/* ================================================================
   TCI v28 — CNC SIZE + SPACING BENCHMARK
   ---------------------------------------------------------------
   Visual geometry only. The v25 TCI palette remains LOCKED.
   This pass matches the refined Titan Trades CNC mobile rhythm:
   compact header, shorter audience switch, earlier hero start,
   centered/narrower copy, and restrained CTA sizing.
   ================================================================ */

/* Desktop/tablet: keep the same TCI composition, just slightly calmer. */
.head-row{min-height:172px}
.brand img{width:min(410px,100%)}
.head-cta{min-height:60px;font-size:17px;padding:0 22px}
.mode-switch a{min-height:88px;font-size:19px}
.hero-inner{padding:72px 0 92px}

@media(max-width:900px){
  .head-row{padding:26px 0 24px;gap:14px}
  .brand img{max-width:270px}
  .head-cta{min-height:58px;font-size:15px;padding:0 16px}
  .mode-switch a{min-height:78px;font-size:17px}
  .hero-inner{padding:54px 0 76px}
}

@media(max-width:640px){
  /* Reference screenshot uses comfortable side gutters — not edge-to-edge. */
  .shell{width:calc(100% - 46px)}

  /* CNC-like three-piece header rhythm: logo / phone / compact CTA. */
  .head-row{
    min-height:118px;
    padding:24px 0 22px;
    grid-template-columns:minmax(0,1.46fr) auto 96px;
    grid-template-areas:'brand phone cta';
    gap:9px;
    align-items:center;
  }
  .brand img{
    width:100%;
    max-width:194px;
  }
  .head-phone{
    font-size:12.5px;
    gap:4px;
    font-weight:800;
    letter-spacing:.045em;
  }
  .head-phone svg{
    width:18px;
    height:18px;
    flex-basis:18px;
  }
  .head-cta{
    width:96px;
    max-width:96px;
    min-height:54px;
    padding:6px 7px;
    font-size:10.5px;
    line-height:1.05;
    letter-spacing:.06em;
    text-align:center;
  }

  /* Shorter CNC-style contractor/specialist switch. */
  .mode-switch a{
    min-height:66px;
    padding:0 7px;
    font-size:14px;
    line-height:1.08;
    letter-spacing:.09em;
    border-bottom-width:3px;
  }

  /* Hero starts sooner and follows the same compact vertical cadence. */
  .hero-inner{
    padding:28px 0 62px;
    text-align:center;
  }
  .kicker{
    max-width:330px;
    margin:0 auto 20px;
    font-size:13.5px;
    line-height:1.45;
    letter-spacing:.19em;
    text-align:center;
  }
  .hero h1{
    max-width:350px;
    margin-left:auto;
    margin-right:auto;
    font-size:50px;
    line-height:.94;
    letter-spacing:-.018em;
    text-align:center;
  }
  .hero-copy{
    max-width:348px;
    margin:34px auto 0;
    font-size:17px;
    line-height:1.72;
    text-align:center;
  }
  .hero-actions{
    margin:36px auto 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100%;
  }
  .hero-actions .btn{
    min-height:54px;
    font-size:16px;
    padding:0 18px;
  }
  .hero-actions .btn.primary{
    width:172px;
    min-width:172px;
    max-width:172px;
  }
  .hero-actions .btn.secondary{
    width:230px;
    min-width:230px;
    max-width:230px;
  }
  .hero-phone{
    margin-top:23px;
    font-size:16px;
    gap:7px;
  }
  .hero-phone svg{width:20px;height:20px}

  /* Carry the same visual scale through the page. */
  .section{padding:64px 0}
  .section-label{font-size:13px;margin-bottom:16px}
  .section-title{font-size:38px;line-height:.96}
  .section-copy,.section-head .section-copy{font-size:16.5px;line-height:1.62}
  .section-copy.leftbar{padding-left:20px}
  .benefit-card{padding:28px 24px}
  .icon-box{width:72px;height:72px}
  .icon-box svg{width:42px;height:42px}
  .benefit-card h3{font-size:23px;margin-top:18px}
  .benefit-card p{font-size:16px;line-height:1.55}
  .role-tag{font-size:17px;padding:15px 18px}
  .scope-board{padding:22px}
  .chip{font-size:14px;padding:10px 12px}

  /* Lower-page work was already compacted in v24; keep that geometry. */
}

@media(max-width:440px){
  .shell{width:calc(100% - 38px)}
  .head-row{
    min-height:112px;
    padding:22px 0 20px;
    grid-template-columns:minmax(0,1.5fr) auto 90px;
    gap:7px;
  }
  .brand img{max-width:188px}
  .head-phone{font-size:11.5px;gap:3px}
  .head-phone svg{width:17px;height:17px;flex-basis:17px}
  .head-cta{
    width:90px;
    max-width:90px;
    min-height:52px;
    font-size:10px;
    padding:5px 6px;
  }
  .mode-switch a{min-height:62px;font-size:13px;padding:0 5px}

  .hero-inner{padding:24px 0 58px}
  .kicker{max-width:320px;font-size:13px;margin-bottom:18px}
  .hero h1{max-width:338px;font-size:48px}
  .hero-copy{max-width:334px;font-size:16.5px;line-height:1.7;margin-top:32px}
  .hero-actions{margin-top:34px;gap:11px}
  .hero-actions .btn{min-height:52px;font-size:15.5px}
  .hero-actions .btn.primary{width:166px;min-width:166px;max-width:166px}
  .hero-actions .btn.secondary{width:224px;min-width:224px;max-width:224px}
  .hero-phone{font-size:15.5px;margin-top:22px}

  .section{padding:60px 0}
  .section-title{font-size:36px}
  .section-copy,.section-head .section-copy{font-size:16px}
  .benefit-card{padding:26px 22px}
  .icon-box{width:68px;height:68px}
  .icon-box svg{width:40px;height:40px}
  .benefit-card h3{font-size:22px}
  .benefit-card p{font-size:15.5px}
  .role-tag{font-size:16.5px;padding:14px 16px}
}

@media(max-width:380px){
  .head-row{
    grid-template-columns:minmax(0,1.56fr) auto 86px;
    gap:6px;
  }
  .brand img{max-width:180px}
  .head-phone{font-size:10.5px}
  .head-phone svg{width:16px;height:16px;flex-basis:16px}
  .head-cta{width:86px;max-width:86px;font-size:9.6px}
  .mode-switch a{min-height:60px;font-size:12.5px}
  .hero h1{font-size:46px}
  .hero-copy{font-size:16px}
}