/* ============================================================
   Syntax responsive composition rebuild — September 2026
   Purpose: preserve the desktop visual system while giving phones
   intentional, readable compositions instead of squeezed desktop grids.
   Desktop styles in styles.css remain the source of truth.
   ============================================================ */

/* Hero copy remains one normal desktop column. On phones only, the wrapper
   becomes layout-transparent so the artwork can sit between the headline
   and supporting copy without changing the desktop composition. */
.hero-details .hero-copy:first-child{margin-top:0}

/* ------------------------------
   Phone composition
   ------------------------------ */
@media(max-width:720px){
  html,body{overflow-x:clip}
  .container{width:100%;max-width:none;padding-inline:22px}
  .header-inner{padding-inline:22px}

  .hero{padding:44px 0 62px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
  .hero-grid>.hero-copy-block{display:contents}
  .hero-grid>.hero-copy-block>.hero-intro{grid-column:1;grid-row:1;max-width:none;width:100%}
  .service-page .hero-grid>.hero-concept,
  body:not(.service-page) .hero-grid>.hero-canvas{
    grid-column:1;grid-row:2;width:100%;max-width:none;margin:26px 0 28px;justify-self:stretch
  }
  .hero-grid>.hero-copy-block>.hero-details{grid-column:1;grid-row:3;max-width:none;width:100%}
  .hero-intro h1{margin-bottom:0;max-width:none!important}
  .hero-details p.hero-copy{max-width:none;margin-bottom:14px}
  .hero-details p.hero-copy:last-of-type{margin-bottom:0}
  .hero-actions{margin-top:22px}
  .hero-actions .btn{min-height:48px;padding-inline:21px}

  /* Homepage hero: keep the dark visual substantial and self-contained. */
  .home-orbit{min-height:300px;border-radius:20px}
  .home-orbit .visual-label{left:20px;right:20px;top:20px;max-width:none;white-space:normal;font-size:14px}
  .home-orbit .orbit-node{display:none}
  .home-mobile-legend{display:grid;left:20px;right:20px;top:86px}
  .home-orbit .visual-caption{left:20px;right:20px;bottom:18px;max-width:none}

  /* Accounting artwork: use the full phone width and a deliberate 2x2 card
     arrangement beneath the full-width management report. */
  .accounting-concept{
    height:auto!important;display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
    padding:8px 0 2px!important;overflow:visible!important
  }
  .accounting-concept::before{inset:3% 0 0!important}
  .accounting-concept::after{display:none}
  .accounting-concept .concept-connectors{display:none}
  .accounting-concept .acct-card{
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;margin:0!important;min-width:0;overflow:hidden!important
  }
  .accounting-concept .acct-report{grid-column:1/-1;grid-row:1;height:244px!important;padding:17px 19px!important}
  .accounting-concept .acct-ledger{grid-column:1;grid-row:2;height:185px!important;padding:16px 13px!important;opacity:1}
  .accounting-concept .acct-reconciled{grid-column:2;grid-row:2;height:185px!important;padding:16px 14px!important}
  .accounting-concept .acct-insight{grid-column:1;grid-row:3;height:142px!important;padding:14px 13px!important;display:block!important}
  .accounting-concept .acct-deadlines{grid-column:2;grid-row:3;height:142px!important;padding:15px 12px!important;grid-template-columns:29px minmax(0,1fr)!important;gap:8px!important}
  .accounting-concept .acct-kicker{font-size:12.5px;margin-bottom:10px}
  .accounting-concept .ledger-head,.accounting-concept .ledger-row{grid-template-columns:36px minmax(0,1fr);gap:5px;font-size:8.4px;padding:5px 0}
  .accounting-concept .ledger-head{font-size:7.4px}
  .accounting-concept .ledger-row b{font-size:8.4px!important;line-height:1.18!important}
  .accounting-concept .report-title{font-size:16px}
  .accounting-concept .report-sub{font-size:9px}
  .accounting-concept .report-line{grid-template-columns:78px minmax(0,1fr);font-size:8.7px;padding:4px 0}
  .accounting-concept .report-chart{height:61px;margin-top:6px}
  .accounting-concept .reconciled-title{font-size:14.5px;line-height:1.18}
  .accounting-concept .reconciled-title svg{width:29px;height:29px;margin-bottom:7px}
  .accounting-concept .acct-reconciled p{font-size:10.2px;line-height:1.45;margin-top:10px}
  .accounting-concept .acct-insight strong{display:block;font-size:11.5px;line-height:1.25}
  .accounting-concept .mini-up-chart{height:72px;margin-top:8px;padding-inline:4px;gap:5px}
  .accounting-concept .mini-up-chart>span{width:10px}
  .accounting-concept .acct-deadlines svg{width:28px;height:28px}
  .accounting-concept .acct-deadlines strong{font-size:11.2px;line-height:1.28}

  /* Advisory artwork: retain the four-stage relationship as a 2x2 process,
     rather than four tiny columns or one very long vertical strip. */
  .advisory-concept{min-height:0;padding:35px 0 0}
  .advisory-concept::before{inset:8% 0 1%}
  .advisory-arc,.advisory-bracket{display:none}
  .advisory-process{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 12px}
  .advisory-stage{min-height:220px;padding:34px 13px 14px;border-radius:12px;overflow:hidden}
  .advisory-node{width:50px;height:50px;top:-25px}
  .advisory-node svg{width:25px;height:25px}
  .advisory-stage h3{font-size:14.5px;line-height:1.15;min-height:34px;margin-bottom:8px}
  .advisory-stage p{font-size:11.6px;line-height:1.45;min-height:51px;text-align:left}
  .advisory-stage-art{height:58px;margin-top:7px;transform:scale(.88);transform-origin:center}
  .advisory-outcome{margin-top:16px;padding-inline:8px}
  .advisory-outcome strong{font-size:15px}
  .advisory-outcome span{font-size:11px;line-height:1.45}

  /* CFO artwork keeps the chart wide. Steps become four equal touch-friendly
     visual anchors above it; arrows are omitted only at phone width. */
  .cfo-concept{min-height:0;padding:24px 19px 20px;border-radius:19px}
  .cfo-concept h2{font-size:23px}
  .cfo-concept-head p{font-size:12.5px}
  .decision-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:21px}
  .decision-arrow{display:none}
  .decision-icon{width:41px;height:41px;margin-bottom:7px}
  .decision-icon svg{width:23px;height:23px}
  .decision-step b{font-size:9.2px;line-height:1.2}
  .scenario-chart{height:116px;margin-top:15px}
  .scenario-legend{gap:13px;flex-wrap:wrap;font-size:9.4px}
  .cfo-concept-foot{font-size:10.5px;margin-top:14px}

  /* Sustainability artwork: 2x2 connected-feeling tiles retain the four-part
     system while staying readable on a phone. */
  .sustainability-concept{min-height:0;padding:8px 0 0}
  .sustainability-concept::before{inset:0 0 -3%}
  .sust-connector{display:none}
  .sust-process{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sust-stage{
    display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:auto auto 1fr;column-gap:10px;align-items:start;text-align:left!important;
    padding:14px 12px!important;border:1px solid rgba(216,207,189,.8);border-radius:12px;
    background:rgba(253,252,249,.86);min-width:0
  }
  .sust-node{grid-column:1;grid-row:1/4;width:48px;height:48px;margin:0!important}
  .sust-node svg{width:27px;height:27px}
  .sust-no{grid-column:2;font-size:10px;margin:0 0 4px}
  .sust-stage h3{grid-column:2;font-size:13.7px;line-height:1.18;min-height:0;margin:0 0 6px}
  .sust-stage h3 br{display:none}
  .sust-stage p{grid-column:2;font-size:11.2px;line-height:1.42;margin:0;max-width:none}

  /* Text-heavy service choices remain full-width on phones. This is one of the
     places where stacking improves legibility; unlike the hero, nothing is
     visually detached from a paired illustration. */
  .card-grid.three,
  .engagement-cards{
    display:grid!important;grid-template-columns:1fr!important;gap:14px!important;
    overflow:visible!important;padding:0!important;margin:0!important
  }
  .card-grid.three>.card,
  .engagement-cards>.card{width:100%!important;min-width:0}

  .visual-service-grid{display:grid!important;grid-template-columns:1fr!important;overflow:visible;border-top:1px solid var(--stone-300);margin:0;padding:0}
  .visual-service-item,
  .visual-service-item:first-child,
  .visual-service-item:last-child{
    padding:28px 0!important;border-left:0!important;border-right:0!important;border-top:0!important;min-height:0
  }
  .visual-service-item + .visual-service-item{border-top:1px solid var(--stone-300)!important}

  /* Shorter four-choice sections use a 2x2 arrangement at normal phone widths. */
  .reason-grid,
  .sustainability-audience-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0;overflow:visible;margin:0;padding:0;border-top:1px solid var(--stone-300)
  }
  .reason-item,
  .reason-item:nth-child(even),.reason-item:nth-child(odd),
  .sustainability-audience-item,
  .sustainability-audience-item:nth-child(even),.sustainability-audience-item:nth-child(odd){
    padding:22px 15px!important;border:0!important;min-width:0
  }
  .reason-item:nth-child(even),.sustainability-audience-item:nth-child(even){border-left:1px solid var(--stone-300)!important}
  .reason-item:nth-child(n+3),.sustainability-audience-item:nth-child(n+3){border-top:1px solid var(--stone-300)!important}
  .reason-item:nth-child(odd),.sustainability-audience-item:nth-child(odd){padding-left:0!important}
  .reason-item:nth-child(even),.sustainability-audience-item:nth-child(even){padding-right:0!important}
  .reason-item h3,.sustainability-audience-item h3{font-size:17px;line-height:1.25}
  .reason-item p,.sustainability-audience-item p{font-size:13.6px!important;line-height:1.55;max-width:none}

  /* Horizontal pillar strips in the original design become readable vertical
     sections on phones, avoiding any appearance of content being cut off. */
  .dark-pillars{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;padding-bottom:0!important}
  .dark-pillar,.dark-pillar+.dark-pillar,.dark-pillar:nth-child(3),.dark-pillar:nth-child(4){
    width:100%!important;min-height:0!important;padding:25px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.15)!important
  }
  .dark-pillar:last-child{border-bottom:0!important}
  .scroll-hint{display:none!important}

  /* Closing CTA: preserve artwork as a large lower-right visual, but reserve
     real space for it so the illustration is never clipped by the copy. */
  .final-cta{padding:64px 0 74px}
  .final-cta-card.final-cta-card-visual{min-height:500px;padding:34px 26px 190px;border-radius:20px}
  .final-cta-content{max-width:100%}
  .final-cta-card-visual h2{font-size:32px;line-height:1.08}
  .final-cta-card-visual p{font-size:15px;line-height:1.58}
  .final-cta-art-native{width:100%!important;height:180px!important;right:0!important;bottom:0!important;top:auto!important;overflow:hidden}
  .cta-shield-wrap{right:7%;width:42%;min-width:132px;max-width:165px}
  .cta-contours{opacity:.74}

  /* Contact keeps the desktop line motif, now below the copy instead of being
     removed completely on mobile. */
  .contact-hero{padding:42px 0 46px}
  .contact-hero-grid{grid-template-columns:1fr;gap:12px}
  .contact-line-art{display:block;min-height:105px;margin-top:6px;opacity:.9}

  /* Mobile menu should feel like a full-width navigation panel, not a cramped
     desktop nav squeezed beneath the logo. */
  .main-nav{padding:17px 22px 22px;gap:2px}
  .main-nav a{min-height:44px;display:flex;align-items:center;font-size:15.5px}
}

@media(max-width:480px){
  .container{padding-inline:20px}
  .header-inner{padding-inline:20px}
  .hero{padding-top:40px}
  .hero-grid>.hero-canvas,.hero-grid>.hero-concept,
  .service-page .hero-grid>.hero-concept,body:not(.service-page) .hero-grid>.hero-canvas{margin-top:23px;margin-bottom:25px}
  .home-orbit{min-height:286px}
  .home-mobile-legend{top:82px}
  .final-cta-card.final-cta-card-visual{padding-inline:24px}
}

@media(max-width:360px){
  .container{padding-inline:17px}
  .header-inner{padding-inline:17px}
  .hero h1,.service-page .hero h1{font-size:32px;line-height:1.08}
  .sustainability-page .hero h1{font-size:29px}
  .hero p.hero-copy{font-size:15.6px}
  .home-orbit{min-height:276px}
  .home-mobile-legend span{font-size:11px}
  .advisory-process{gap:36px 9px}
  .advisory-stage{padding-inline:9px;min-height:226px}
  .advisory-stage h3{font-size:13.5px}
  .advisory-stage p{font-size:10.9px}
  .sust-process{gap:9px}
  .sust-stage{grid-template-columns:42px minmax(0,1fr)!important;padding:12px 9px!important;column-gap:8px}
  .sust-node{width:40px;height:40px}
  .sust-node svg{width:23px;height:23px}
  .sust-stage h3{font-size:12.6px}
  .sust-stage p{font-size:10.5px}
  .accounting-concept{gap:9px}
  .accounting-concept .acct-ledger,.accounting-concept .acct-reconciled{height:178px!important;padding-inline:10px!important}
  .accounting-concept .acct-insight,.accounting-concept .acct-deadlines{height:136px!important;padding-inline:9px!important}
  .accounting-concept .acct-deadlines{grid-template-columns:24px minmax(0,1fr)!important}
  .accounting-concept .acct-deadlines svg{width:23px;height:23px}
  .accounting-concept .acct-deadlines strong{font-size:10.2px}
  .reason-grid,.sustainability-audience-grid{grid-template-columns:1fr!important}
  .reason-item,.reason-item:nth-child(even),.reason-item:nth-child(odd),
  .sustainability-audience-item,.sustainability-audience-item:nth-child(even),.sustainability-audience-item:nth-child(odd){
    padding:22px 0!important;border-left:0!important;border-top:1px solid var(--stone-300)!important
  }
  .reason-item:first-child,.sustainability-audience-item:first-child{border-top:0!important}
  .final-cta-card.final-cta-card-visual{min-height:500px;padding:32px 22px 188px}
  .final-cta-card-visual h2{font-size:29px}
}

/* ============================================================
   FINAL MOBILE HERO ASSET MODE
   Desktop keeps the original live HTML/CSS hero illustrations.
   Phones use a flattened desktop composition so no internal part
   can wrap, reflow, overlap or clip independently.
   ============================================================ */
.service-hero-mobile-static{display:none}

@media (max-width:720px){
  .service-page .hero-grid>.hero-concept{
    display:none!important;
  }
  .service-page .hero-grid>.service-hero-mobile-static{
    display:block;
    grid-column:1;
    grid-row:2;
    width:100%;
    max-width:100%;
    height:auto;
    margin:24px auto 27px;
    object-fit:contain;
  }
  .advisory-page .hero-grid>.service-hero-mobile-static,
  .sustainability-page .hero-grid>.service-hero-mobile-static{
    margin-top:20px;
  }
}