:root{--terra-accessible:#9E4E37;}

/*
 * By Dora Studio — Mobile Design Pass
 * IMPORTANT: every rule in this file is scoped to mobile/tablet widths.
 * Desktop styles remain untouched.
 */

@media (max-width:900px){

  /* ---------- GLOBAL RHYTHM ---------- */
  .shell{
    width:calc(100% - 40px) !important;
    max-width:none !important;
  }

  main{
    overflow:hidden;
  }

  .eyebrow{
    font-size:9px !important;
    line-height:1.55 !important;
    letter-spacing:.15em !important;
    max-width:100% !important;
    overflow-wrap:anywhere;
  }

  p{
    line-height:1.65;
  }

  .section{
    padding:68px 0 !important;
  }

  .section h2{
    font-size:clamp(38px,8vw,48px) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
  }

  .section h3{
    line-height:1.08;
  }

  .lede{
    font-size:18px !important;
    line-height:1.5 !important;
  }

  .cta{
    min-height:46px;
    align-items:center;
    justify-content:center;
  }

  /* ---------- GENERIC SERVICE-PAGE HEROES ---------- */
  .hero{
    padding:58px 0 62px !important;
  }

  .hero > .hero-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }

  .hero > .hero-grid h1{
    font-size:clamp(42px,9vw,54px) !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important;
    max-width:100% !important;
  }

  .hero > .hero-grid .lead{
    font-size:16px !important;
    line-height:1.58 !important;
    margin:18px 0 !important;
  }

  .hero-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px 12px !important;
    margin-top:18px !important;
  }

  .hero-meta span{
    font-size:10px !important;
  }

  .hero > .hero-grid .hero-art{
    height:330px !important;
    margin-top:6px;
  }

  /* ---------- COMMON GRID SECTIONS ---------- */
  .two,.three,.four,.cards,.detail-grid,.portfolio-intro,.contact-panel,
  .process-intro,.deliverables,.invest,.outputs,.who,.session,.system,.scope{
    gap:34px !important;
  }

  .card{
    padding:25px !important;
  }

  .steps{
    gap:0 !important;
  }

  .step{
    padding:25px 0 !important;
  }

  /* ---------- ABOUT ---------- */
  .about-hero{
    padding:58px 0 62px !important;
  }

  .about-hero-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }

  .about-hero h1{
    font-size:clamp(42px,9vw,54px) !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important;
  }

  .about-hero p{
    font-size:16px !important;
    line-height:1.62 !important;
  }

  .about-art{
    min-height:320px !important;
  }

  .story{
    gap:32px !important;
  }

  /* ---------- SERVICES OVERVIEW ---------- */
  .services-hero,
  .services .hero{
    padding-top:58px !important;
  }

  .hero-grid,.intro-grid,.service,.compare,.fit{
    gap:32px !important;
  }

  .service{
    padding:0 !important;
  }

  .service .copy{
    padding:34px 0 !important;
  }

  .service.signature{
    padding:35px 24px !important;
  }

  /* ---------- PROCESS / CONTACT / PORTFOLIO ---------- */
  .process-hero,
  .contact-hero,
  .port-hero{
    padding:58px 0 62px !important;
  }

  .process-hero-grid,
  .contact-hero-grid,
  .port-hero-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .process-hero h1,
  .contact-hero h1,
  .port-hero h1{
    font-size:clamp(42px,9vw,54px) !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important;
  }

  .process-hero p,
  .contact-hero p,
  .port-hero p{
    font-size:16px !important;
    line-height:1.62 !important;
  }

  .process-art,
  .contact-art,
  .portfolio-mood{
    height:320px !important;
  }

  .project-row{
    gap:17px !important;
    padding:19px 0 !important;
  }

  /* ---------- PACKAGES ---------- */
  .pricing-hero{
    padding:58px 0 64px !important;
  }

  .pricing-hero-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .pricing-hero h1{
    font-size:clamp(43px,9.5vw,58px) !important;
    line-height:.96 !important;
    letter-spacing:-.045em !important;
  }

  .hero-lede{
    font-size:16px !important;
    line-height:1.58 !important;
    margin-top:18px !important;
  }

  .pricing-snapshot{
    margin-top:4px !important;
  }

  .pricing-principle,
  .website-packages,
  .brand-pricing,
  .signature-offer,
  .extras-section,
  .care-section,
  .pricing-notes,
  .pricing-final{
    padding:68px 0 !important;
  }

  .principle-grid,
  .section-heading,
  .signature-grid,
  .care-grid,
  .notes-grid,
  .final-grid{
    gap:30px !important;
  }

  .section-heading h2,
  .principle-grid h2,
  .care-intro h2,
  .notes-grid h2,
  .pricing-final h2{
    font-size:clamp(39px,8vw,50px) !important;
    line-height:.99 !important;
  }

  .web-tier-grid{
    gap:15px !important;
  }

  .web-tier{
    padding:27px 23px !important;
  }

  .web-tier-featured{
    transform:none !important;
  }

  .extras-grid{
    gap:0 !important;
  }

  .extra-card{
    min-height:auto !important;
    padding:24px 21px !important;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:42px 0 24px !important;
  }

  .footer-grid{
    gap:28px !important;
  }
}


@media (max-width:650px){

  .shell{
    width:calc(100% - 36px) !important;
  }

  /* ---------- HOME: purpose-built mobile hero ---------- */
  .shell.hero{
    padding:42px 0 56px !important;
    gap:32px !important;
    min-height:0 !important;
  }

  .shell.hero > .reveal:first-child{
    min-width:0;
  }

  .shell.hero h1{
    font-size:39px !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
    max-width:100% !important;
    margin-top:10px;
    overflow-wrap:normal;
  }

  .shell.hero .lead{
    font-size:16px !important;
    line-height:1.58 !important;
    margin:20px 0 !important;
  }

  .shell.hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-top:22px;
  }

  .shell.hero .hero-actions .cta:first-child{
    width:100%;
    min-height:50px;
  }

  .shell.hero .hero-actions .cta.alt{
    width:max-content;
    min-height:auto;
    padding:7px 0 6px !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid rgba(59,39,49,.45) !important;
    color:var(--plum) !important;
  }

  .shell.hero .meta{
    font-size:10px !important;
    line-height:1.55 !important;
    letter-spacing:.035em !important;
    margin-top:22px !important;
  }

  .shell.hero .hero-art{
    height:270px !important;
    margin-top:0;
  }

  .shell.hero .hero-main{
    inset:0 0 18px 0 !important;
  }

  .shell.hero .hero-main img{
    object-position:center 46% !important;
  }

  .shell.hero .hero-note{
    left:14px !important;
    bottom:0 !important;
    max-width:180px !important;
    padding:12px 14px !important;
    font-size:15px !important;
  }

  /* Home content rhythm */
  .section{
    padding:58px 0 !important;
  }

  .argument,
  .section-intro,
  .service-stage,
  .portfolio-preview,
  .about-grid{
    gap:28px !important;
  }

  .argument h2,
  .section-intro h2,
  .portfolio-copy h2,
  .process h2,
  .about h2,
  .final h2{
    font-size:38px !important;
    line-height:1 !important;
  }

  .argument-copy{
    font-size:15px !important;
    line-height:1.68 !important;
  }

  .argument-copy p:first-child{
    font-size:18px !important;
    line-height:1.5 !important;
  }

  .section-intro{
    margin-bottom:30px !important;
  }

  .section-intro p{
    font-size:15px !important;
  }

  .service-row{
    grid-template-columns:28px minmax(0,1fr) 18px !important;
    gap:10px !important;
    padding:19px 0 !important;
    align-items:start !important;
  }

  .service-row h3,
  .service-row h2{
    font-size:25px !important;
    line-height:1.02 !important;
  }

  .service-row p{
    font-size:12px !important;
    line-height:1.5 !important;
    margin-top:6px !important;
  }

  .preview{
    height:250px !important;
    margin-top:4px;
  }

  .preview-label{
    left:12px !important;
    bottom:12px !important;
  }

  .marquee{
    padding:11px 0 !important;
  }

  .track{
    font-size:19px !important;
  }

  .portfolio-symbol,
  .portfolio-symbol img{
    min-height:250px !important;
  }
  .about-visual img{
    height:300px !important;
  }

  .steps{
    grid-template-columns:1fr !important;
    margin-top:30px !important;
  }

  .step{
    padding:18px 0 !important;
  }

  .step h3{
    font-size:23px !important;
    margin:10px 0 6px !important;
  }

  .step p{
    font-size:13px !important;
  }

  .final-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* ---------- SERVICE DETAIL PAGES ---------- */
  .hero{
    padding:46px 0 56px !important;
  }

  .hero > .hero-grid{
    gap:26px !important;
  }

  .hero > .hero-grid h1{
    font-size:40px !important;
    line-height:.99 !important;
  }

  .hero > .hero-grid .hero-art{
    height:280px !important;
  }

  .hero > .hero-grid p[style*="margin-top"]{
    margin-top:20px !important;
  }

  .hero > .hero-grid .cta{
    width:100%;
    text-align:center;
  }

  .hero-meta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .fit-grid,
  .problem-grid,
  .deliverable-list,
  .signal-grid,
  .output-list,
  .who-cards,
  .scope-grid,
  .logic,
  .system-art{
    gap:12px !important;
  }

  .fit-card,
  .problem-card,
  .output,
  .who-card,
  .scope-item,
  .logic-card{
    padding:21px !important;
  }

  .visual,
  .session-art{
    height:270px !important;
  }

  .visual-break>div,
  .editorial>div,
  .break>div,
  .system-art>div{
    height:220px !important;
  }

  /* ---------- ABOUT ---------- */
  .about-hero{
    padding:46px 0 56px !important;
  }

  .about-hero h1{
    font-size:40px !important;
  }

  .about-art{
    min-height:280px !important;
  }

  .about-art .small{
    font-size:15px !important;
  }

  /* ---------- PROCESS / CONTACT / PORTFOLIO ---------- */
  .process-hero,
  .contact-hero,
  .port-hero{
    padding:46px 0 56px !important;
  }

  .process-hero h1,
  .contact-hero h1,
  .port-hero h1{
    font-size:40px !important;
  }

  .process-art,
  .contact-art,
  .portfolio-mood{
    height:270px !important;
  }

  .process-hero p,
  .contact-hero p,
  .port-hero p{
    font-size:15px !important;
  }

  .contact-panel h2{
    font-size:40px !important;
  }

  .contact-side{
    padding:26px !important;
  }

  .project-thumb{
    height:190px !important;
  }

  .project-row h3{
    font-size:27px !important;
  }

  /* ---------- PACKAGES ---------- */
  .pricing-hero{
    padding:46px 0 56px !important;
  }

  .pricing-hero h1{
    font-size:41px !important;
    line-height:.98 !important;
  }

  .pricing-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:15px !important;
  }

  .pricing-hero .hero-actions .cta{
    width:100%;
  }

  .pricing-hero .quiet-link{
    width:max-content;
  }

  .snapshot-top{
    padding:17px 18px !important;
  }

  .snapshot-row{
    padding:17px 18px !important;
  }

  .snapshot-row>span{
    font-size:18px !important;
  }

  .snapshot-row strong{
    font-size:23px !important;
  }

  .pricing-principle,
  .website-packages,
  .brand-pricing,
  .signature-offer,
  .extras-section,
  .care-section,
  .pricing-notes,
  .pricing-final{
    padding:56px 0 !important;
  }

  .principle-grid h2,
  .section-heading h2,
  .care-intro h2,
  .notes-grid h2,
  .pricing-final h2{
    font-size:37px !important;
  }

  .principle-copy{
    gap:16px !important;
  }

  .principle-copy p,
  .section-heading>p{
    font-size:14px !important;
  }

  .web-tier{
    padding:24px 20px !important;
  }

  .web-tier h3{
    font-size:31px !important;
  }

  .tier-price{
    font-size:44px !important;
  }

  .ledger-item{
    padding:24px 0 !important;
  }

  .ledger-name{
    gap:12px !important;
  }

  .ledger-name h3{
    font-size:28px !important;
  }

  .ledger-includes,
  .ledger-price{
    padding-left:42px !important;
  }

  .ledger-price{
    font-size:39px !important;
  }

  .signature-copy h2{
    font-size:45px !important;
  }

  .signature-price{
    font-size:50px !important;
  }

  .signature-price-card{
    padding:25px !important;
  }

  .extra-card{
    padding:22px 19px !important;
  }

  .commerce-strip{
    padding:24px 20px !important;
    gap:18px !important;
  }

  .commerce-price{
    font-size:37px !important;
  }

  .care-card{
    padding:22px !important;
  }

  .care-price{
    font-size:33px !important;
  }

  .note-row{
    padding:17px 0 !important;
  }

  .pricing-final .cta{
    width:100%;
  }

  /* ---------- FOOTER ---------- */
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .foot-bottom{
    display:grid !important;
    gap:10px !important;
  }


  /* ---------- MOBILE HERO ORDER + IMAGE STABILITY ---------- */
  .shell.hero,
  .hero > .hero-grid,
  .services-page .hero-grid,
  .about-hero-grid,
  .process-hero-grid,
  .contact-hero-grid,
  .port-hero-grid{
    display:flex !important;
    flex-direction:column !important;
  }

  .shell.hero > .hero-art,
  .hero > .hero-grid > .hero-art,
  .services-page .hero-grid > .hero-art,
  .about-hero-grid > .about-art,
  .process-hero-grid > .process-art,
  .contact-hero-grid > .contact-art,
  .port-hero-grid > .portfolio-mood{
    order:1 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    align-self:stretch !important;
    flex:0 0 auto !important;
    margin:0 0 18px !important;
  }

  .shell.hero > .hero-art{height:245px !important}
  .hero > .hero-grid > .hero-art{height:255px !important}
  .services-page .hero-grid > .hero-art{height:245px !important}
  .about-hero-grid > .about-art{min-height:0 !important;height:255px !important}
  .process-hero-grid > .process-art,
  .contact-hero-grid > .contact-art,
  .port-hero-grid > .portfolio-mood{height:250px !important}

  .shell.hero > .mobile-hero-copy,
  .hero > .hero-grid > .mobile-hero-copy,
  .services-page .hero-grid > .mobile-hero-copy,
  .about-hero-grid > .mobile-hero-copy,
  .process-hero-grid > .mobile-hero-copy,
  .contact-hero-grid > .mobile-hero-copy,
  .port-hero-grid > .mobile-hero-copy{
    order:2 !important;
  }

  .shell.hero .hero-main{inset:0 !important}
  .shell.hero .hero-note{left:12px !important;bottom:12px !important}

  .shell.hero .hero-main,
  .hero > .hero-grid > .hero-art .main,
  .hero > .hero-grid > .hero-art .screen,
  .hero > .hero-grid > .hero-art .back,
  .about-hero-grid .about-art .main,
  .process-hero-grid .process-art,
  .contact-hero-grid .contact-art,
  .port-hero-grid .portfolio-mood{
    width:100% !important;
    max-width:100% !important;
  }

  .shell.hero .hero-main img,
  .hero > .hero-grid > .hero-art img,
  .services-page .hero-grid > .hero-art img,
  .about-hero-grid .about-art img,
  .process-hero-grid .process-art img,
  .contact-hero-grid .contact-art img,
  .port-hero-grid .portfolio-mood img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  .hero-art .main,
  .hero-art .small,
  .hero-art .screen,
  .hero-art .mobile,
  .hero-art .back,
  .hero-art .front,
  .hero-art .note,
  .hero-art .chip{
    visibility:visible !important;
  }

}


@media (max-width:380px){
  .shell{
    width:calc(100% - 30px) !important;
  }

  .shell.hero h1,
  .hero > .hero-grid h1,
  .about-hero h1,
  .process-hero h1,
  .contact-hero h1,
  .port-hero h1,
  .pricing-hero h1{
    font-size:37px !important;
  }

  .argument h2,
  .section-intro h2,
  .portfolio-copy h2,
  .process h2,
  .about h2,
  .final h2,
  .section h2,
  .section-heading h2{
    font-size:35px !important;
  }

  .shell.hero > .hero-art,
  .hero > .hero-grid > .hero-art,
  .services-page .hero-grid > .hero-art,
  .about-hero-grid > .about-art,
  .process-hero-grid > .process-art,
  .contact-hero-grid > .contact-art,
  .port-hero-grid > .portfolio-mood{
    height:225px !important;
  }
}


/* =========================================================
   SERVICES PAGE — TARGETED MOBILE REDESIGN
   Scoped to .services-page. Desktop remains unchanged.
   ========================================================= */

@media (max-width:900px){

  .services-page .hero{
    padding:50px 0 54px !important;
  }

  .services-page .hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .services-page .hero h1{
    font-size:clamp(41px,9vw,52px) !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important;
  }

  .services-page .hero p{
    font-size:16px !important;
    line-height:1.6 !important;
    margin-bottom:0 !important;
  }

  /* On mobile one strong image is enough.
     Hiding the two secondary images prevents the collage from spilling
     into the following section and gives the hero a cleaner composition. */
  .services-page .hero-art{
    display:block !important;
    height:300px !important;
    overflow:hidden !important;
    position:relative !important;
    margin-top:2px !important;
  }

  .services-page .hero-art .big{
    display:block !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }

  .services-page .hero-art .big img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 48% !important;
  }

  .services-page .hero-art .stack{
    display:none !important;
  }

  /* Intro is deliberately clean on mobile: no visual overlap. */
  .services-page .section.alt:first-of-type{
    padding:55px 0 58px !important;
  }

  .services-page .intro-grid{
    display:block !important;
    position:relative !important;
  }

  .services-page .intro-grid > *{
    position:static !important;
    transform:none !important;
  }

  .services-page .intro-grid h2{
    font-size:clamp(37px,8.3vw,47px) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
    margin-top:8px !important;
    max-width:100% !important;
  }

  .services-page .intro-grid > p:not(.packages-link){
    font-size:15px !important;
    line-height:1.62 !important;
    color:var(--muted) !important;
    margin:24px 0 0 !important;
    max-width:620px !important;
  }

  .services-page .packages-link{
    margin:27px 0 0 !important;
  }

  .services-page .packages-link a{
    display:inline-block !important;
    font-size:10px !important;
    line-height:1.4 !important;
    letter-spacing:.1em !important;
    padding-bottom:7px !important;
  }

  /* Service entries become intentional editorial blocks, not squeezed desktop rows. */
  .services-page article.service{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:48px 0 !important;
    margin:0 !important;
    background:transparent !important;
  }

  .services-page article.service .copy{
    order:1 !important;
    padding:0 !important;
  }

  .services-page article.service .visual{
    order:2 !important;
    width:100% !important;
    height:300px !important;
    margin:0 !important;
  }

  .services-page article.service h2{
    font-size:clamp(36px,8vw,46px) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
  }

  .services-page article.service .hook{
    font-size:21px !important;
    line-height:1.25 !important;
    margin:12px 0 !important;
  }

  .services-page article.service p{
    font-size:14px !important;
    line-height:1.62 !important;
  }

  .services-page article.service .facts{
    gap:8px 16px !important;
    margin:19px 0 22px !important;
    font-size:10px !important;
  }

  .services-page article.service .cta{
    width:max-content !important;
    max-width:100% !important;
  }

  .services-page article.service.signature{
    padding:34px 24px !important;
    margin:15px 0 0 !important;
    background:var(--plum) !important;
  }

  .services-page article.service.signature .visual{
    height:260px !important;
  }

  .services-page .compare,
  .services-page .fit{
    gap:30px !important;
  }

  .services-page .compare h2,
  .services-page .fit-copy h2,
  .services-page .final h2{
    font-size:clamp(37px,8vw,47px) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
  }

  .services-page .fit-art{
    height:300px !important;
  }
}

@media (max-width:600px){

  .services-page .hero{
    padding:42px 0 48px !important;
  }

  .services-page .hero h1{
    font-size:39px !important;
  }

  .services-page .hero-art{
    height:245px !important;
  }

  .services-page .section.alt:first-of-type{
    padding:48px 0 52px !important;
  }

  .services-page .intro-grid h2{
    font-size:36px !important;
  }

  .services-page article.service{
    padding:41px 0 !important;
    gap:21px !important;
  }

  .services-page article.service h2{
    font-size:35px !important;
  }

  .services-page article.service .visual{
    height:245px !important;
  }

  .services-page article.service.signature{
    padding:30px 20px !important;
  }

  .services-page article.service.signature .visual{
    height:225px !important;
  }

  .services-page .fit-art{
    height:250px !important;
  }

  .services-page .fit-tags{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   v24 — FINAL STRUCTURE POLISH
   Only new component layouts; no global visual redesign.
   ========================================================= */
@media (max-width:650px){
  .extras-ledger{grid-template-columns:1fr !important}
  .extra-row{
    grid-template-columns:58px minmax(0,1fr) !important;
    gap:12px 14px !important;
    padding:19px 0 !important;
  }
  .extra-row-price{
    grid-column:2 !important;
    min-width:0 !important;
    justify-items:start !important;
    text-align:left !important;
  }

  .deliverable-list,
  .scope-grid{
    gap:0 !important;
  }

  .deliverable,
  .scope-item{
    background:transparent !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}