/* =============================================================
     AMOR ROOFING. Hi-Fi Homepage v3
     Reference aesthetic: FIND Real Estate + Fluid Glass
    . Geometric sans, black/grey headlines on light backgrounds
    . Restrained color. Editorial rhythm. Pill CTAs.
     ============================================================= */

  :root{
    --ink: #0b0c0e;
    --ink-2: #2a2d33;
    --ink-3: #6a6f78;
    --ink-4: #a5a9b0;
    --line: #e6e6e4;
    --line-2: #d8d8d4;
    --bg: #ffffff;
    --bg-2: #f5f3ee;           /* warm cream from brand system */
    --bg-3: #0b0c0e;
    --navy: #041121;
    --gold: #b48c36;
    --white: #fff;
    --ease: cubic-bezier(.2,.7,.2,1);
    --ease-slow: cubic-bezier(.19,1,.22,1);
    --gutter: clamp(20px, 4vw, 56px);
    --maxw: 1400px;
  }

  *{box-sizing:border-box; margin:0; padding:0}
  html,body{background:var(--bg); color:var(--ink); font-family:'General Sans', 'Inter', -apple-system, sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  body{overflow-x:hidden}
  img,svg{max-width:100%; display:block}
  a{color:inherit; text-decoration:none}
  button{font:inherit; background:none; border:0; cursor:pointer; color:inherit}

  /*:-: TYPE:-: */
  .eyebrow{
    font-family:'General Sans', 'Inter', sans-serif; font-weight:600;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-3);
    display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:'◆'; color:var(--gold); font-size:10px}
  h1,h2,h3,h4{font-family:'General Sans', 'Inter', sans-serif; font-weight:700; color:var(--ink); letter-spacing:-0.035em; line-height:.98}
  .display{
    font-weight:700; letter-spacing:-0.04em; line-height:.95;
    font-size:clamp(56px, 9.5vw, 148px);
  }
  .display-sm{
    font-weight:700; letter-spacing:-0.035em; line-height:1;
    font-size:clamp(40px, 5.8vw, 84px);
  }
  .display .dim, .display-sm .dim{ color:var(--ink-4); font-weight:700 }
  .dark .display .dim, .dark .display-sm .dim{ color:#6a6f78 }

  .lede{
    font-family:'General Sans', 'Inter', sans-serif; font-weight:500;
    font-size:clamp(16px, 1.4vw, 19px); line-height:1.5;
    color:var(--ink-2);
  }
  .lede .dim{color:var(--ink-4)}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative}
  section{position:relative}

  /*:-: BUTTONS:-: */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'General Sans', 'Inter', sans-serif; font-weight:500;
    font-size:14.5px; padding:14px 22px;
    border-radius:999px;
    transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
    white-space:nowrap;
  }
  .btn .arr{
    display:inline-block;
    font-size: 1em;
    line-height: 1;
    margin-left: 2px;
    transition: transform .3s var(--ease);
    color: currentColor;
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
  }
  .btn:hover .arr{ transform: translateX(5px); }
  .btn.dark{ background:var(--ink); color:#fff }
  .btn.dark .arr{ background: transparent; color: #fff; }
  .btn.dark:hover{background:#1a1c20}
  .btn.light{ background:#fff; color:var(--ink); border:1px solid var(--line-2) }
  .btn.light .arr{ background: transparent; color: var(--ink); }
  .btn.light:hover{border-color:var(--ink)}
  .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
  .btn.ghost .arr{ background: transparent; color: var(--ink); }
  .btn.ghost:hover{background:var(--ink); color:#fff}
  .btn.ghost:hover .arr{ background: transparent; color: #fff; }
  .btn.onblack{background:#fff; color:var(--ink)}
  .btn.onblack .arr{ background: transparent; color: var(--ink); }

  /* =============================================================
     NAV. invisible on hero, glass-frosted on scroll. Edge-aligned.
     ============================================================= */
  .nav{
    position:fixed; top:32px; left:20px; right:20px; z-index:50;
    padding:14px clamp(24px, 4vw, 56px);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: padding .5s var(--ease), background .5s var(--ease),
                backdrop-filter .5s var(--ease), border-color .5s var(--ease),
                box-shadow .5s var(--ease), top .5s var(--ease),
                left .5s var(--ease), right .5s var(--ease);
  }
  .nav.scrolled{
    top:0; left:0; right:0;
  }
  .nav .wrap{
    max-width:1400px; margin:0 auto; padding:0;
    display:flex; align-items:center; justify-content:space-between; gap:32px;
    transition: max-width .5s var(--ease);
  }
  .nav .bar{
    flex:1;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:transparent; border:none; box-shadow:none;
    padding:0;
    border-radius:999px;
    transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
                border-color .5s var(--ease), box-shadow .5s var(--ease),
                padding .5s var(--ease);
    border: 1px solid transparent;
  }

  .nav .logo{
    display:inline-flex; align-items:center;
    padding:0; background:transparent; border:none;
  }
  .nav .logo img{height:84px; width:auto; transition: height .4s var(--ease);}
  .nav .logo .logo-navy{display:none}

  .nav .pill{
    display:flex; align-items:center; justify-content:center; gap:2px;
    background:transparent; border:none; padding:0;
  }
  .nav .pill a{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 14px; border-radius:999px;
    font-family:'General Sans','Inter',sans-serif; font-weight:500; font-size:14px;
    color:#fff;
    transition: background .2s var(--ease), color .3s var(--ease);
    white-space:nowrap;
  }
  .nav .pill a:hover{ background: rgba(255,255,255,.12); }
  .nav .pill .caret{
    width:7px; height:7px; display:inline-block;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px,-1px);
    opacity:.75;
  }

  .nav .actions{
    display:flex; align-items:center; gap:6px;
    background:transparent; border:none;
  }
  .nav .phone{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500; font-size:14px; color:#fff; white-space:nowrap;
    padding:9px 14px; border-radius:999px;
    transition: background .2s var(--ease), color .3s var(--ease);
  }
  .nav .phone:hover{ background:rgba(255,255,255,.1); }
  .nav .cta{
    background:var(--gold); color:var(--navy);
    padding:10px 20px; border-radius:999px;
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500; font-size:14px; letter-spacing:-0.005em;
    transition: background .2s var(--ease), transform .2s var(--ease);
  }
  .nav .cta:hover{ background:#c99a3d; transform: translateY(-1px); }

  /* Scrolled. glass pill, centered, detached */
  .nav.scrolled{
    padding: 14px clamp(16px, 2vw, 32px);
  }
  .nav.scrolled .wrap{
    max-width: 1160px;
  }
  .nav.scrolled .bar{
    background: rgba(245,243,238,.78);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-color: rgba(10,22,40,.08);
    box-shadow: 0 10px 30px rgba(10,22,40,.08), 0 2px 8px rgba(10,22,40,.04);
    padding: 8px 12px 8px 20px;
  }
  .nav.scrolled .logo .logo-white{display:none}
  .nav.scrolled .logo .logo-navy{display:block}
  .nav.scrolled .logo img{height:34px;}
  .nav.scrolled .pill a{ color:var(--ink); font-size:13.5px; padding:8px 12px;}
  .nav.scrolled .pill a:hover{ background: rgba(10,22,40,.06); }
  .nav.scrolled .phone{ color:var(--ink); font-size:13.5px; padding:8px 12px;}
  .nav.scrolled .phone:hover{ background: rgba(10,22,40,.06); }
  .nav.scrolled .cta{ padding:9px 16px; font-size:13.5px; }

  @media (max-width: 980px){
    .nav .pill{display:none}
    .nav .phone{display:none}
  }

  @media (max-width: 980px){
    .nav .pill{display:none}
    .nav .phone{display:none}
  }

  /* =============================================================
     HERO. Cinematic editorial: H1 bottom-left, meta bottom-right,
     eyebrow top-left with gold rule, full-bleed photo + heavy vignette.
     ============================================================= */
  .hero{
    position:relative;
    height:100vh; min-height:720px;
    overflow:hidden;
    background:var(--bg);
    font-family:'General Sans','Inter',sans-serif;
    --hero-inset: 20px;
    --hero-radius: 18px;
  }
  .hero .photo-stage{
    position:absolute;
    inset: var(--hero-inset);
    z-index:1; overflow:hidden;
    border-radius: var(--hero-radius);
    transition: border-radius .1s linear;
  }
  .hero .photo-stage img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover; object-position:center;
    transform:scale(1.04);
    will-change:transform;
  }
  .hero::after{
    content:''; position:absolute;
    inset: var(--hero-inset);
    z-index:2; pointer-events:none;
    border-radius: var(--hero-radius);
    background:
      linear-gradient(180deg, rgba(4,17,33,.72) 0%, rgba(4,17,33,.42) 25%, rgba(4,17,33,.38) 55%, rgba(4,17,33,.82) 88%, rgba(4,17,33,.96) 100%),
      linear-gradient(90deg, rgba(4,17,33,.55) 0%, rgba(4,17,33,0) 55%);
  }
  .hero .content{
    position:absolute;
    inset: var(--hero-inset);
    z-index:3;
    display:grid; grid-template-rows:auto 1fr auto;
    padding: clamp(108px, 14vh, 150px) clamp(28px, 5vw, 72px) clamp(42px, 6vh, 72px);
  }
  /* TOP EYEBROW */
  .hero .top-meta{
    display:flex; align-items:center; gap:14px;
    color:rgba(255,255,255,.78);
    font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  }
  .hero .top-meta .rule{ height:1px; width:56px; background:var(--gold); flex:none; }
  .hero .top-meta .gold{ color:var(--gold); }
  .hero .top-meta .dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.35); }

  /* BOTTOM CINEMATIC BLOCK */
  .hero .bottom{
    display:flex; flex-direction:column; gap:28px; align-items:flex-start;
    max-width: 920px;
  }
  .hero h1.fluid-head{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    color:#fff;
    font-size:clamp(36px, 4.6vw, 76px);
    line-height:.98;
    letter-spacing:-0.028em;
    margin:0;
    max-width:none;
    text-align:left;
  }
  .hero h1.fluid-head .br{display:block; white-space:nowrap;}
  .hero h1.fluid-head em{ color:var(--gold); font-style:italic; font-weight:400; }

  .hero .tagline-pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 16px; border-radius:999px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255,255,255,.18);
    font-family:'General Sans','Inter',sans-serif;
    font-size:12px; font-weight:500;
    letter-spacing:.12em; text-transform:uppercase;
    color:#fff;
    margin-bottom:20px;
    width:fit-content;
  }
  .hero .tagline-pill .dot-mark{
    width:6px; height:6px; border-radius:50%;
    background: var(--gold);
    display:inline-block;
    box-shadow: 0 0 0 3px rgba(201,154,61,.18);
  }
  .hero .tagline-pill .dash{
    color:rgba(255,255,255,.4);
    margin: 0 2px;
    letter-spacing:0;
  }

  .hero .signature{
    font-family:'Instrument Serif', Georgia, serif;
    font-style:italic;
    color:var(--gold);
    font-size:clamp(22px, 2.1vw, 32px);
    line-height:1;
    letter-spacing:-0.005em;
    margin-top:14px;
  }

  .hero .bottom-right{
    display:flex; flex-direction:column; gap:24px;
    width:100%;
    margin-top:4px;
  }
  .hero .hero-sub{
    color:rgba(255,255,255,.84);
    font-size:16px;
    line-height:1.55;
    font-weight:400;
    max-width:56ch;
    margin:0;
  }
  .hero .hero-ctas{
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .hero .hero-ctas .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border-radius:999px;
    font-family:'General Sans','Inter',sans-serif; font-weight:500; font-size:14px;
    letter-spacing:-0.005em;
    transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .hero .hero-ctas .btn.primary{ background:var(--gold); color:var(--navy); }
  .hero .hero-ctas .btn.primary:hover{ transform:translateY(-1px); background:#c99a3d; }
  .btn.primary{ background:var(--gold); color:var(--navy); }
  .btn.primary:hover{ transform:translateY(-1px); background:#c99a3d; }
  .hero .hero-ctas .btn.ghost{
    background:transparent; color:#fff;
    border:1px solid rgba(255,255,255,.32);
  }
  .hero .hero-ctas .btn.ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); }
  .hero .hero-ctas .arr{font-size:15px}

  /* VITAL STATS. thin top rule, three columns */
  .hero .stats{
    display:grid; grid-template-columns:repeat(3, auto);
    justify-content:start;
    gap: 0 clamp(40px, 6vw, 80px);
    padding-top: 22px;
    border-top:1px solid rgba(255,255,255,.18);
    margin-top:4px;
    width:100%;
    max-width:640px;
  }
  .hero .stats .stat{ display:flex; flex-direction:column; gap:4px; }
  .hero .stats .stat .n{
    font-family:'Cabinet Grotesk','General Sans',sans-serif;
    font-weight:700;
    color:#fff;
    font-size:clamp(24px, 2.2vw, 32px);
    letter-spacing:-0.02em; line-height:1;
  }
  .hero .stats .stat .n em{ color:var(--gold); font-style:normal; }
  .hero .stats .stat .l{
    color:rgba(255,255,255,.62);
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    font-weight:500;
  }

  /* Scroll affordance, bottom-center */
  .hero .scroll-hint{
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:4;
    color:rgba(255,255,255,.6); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-weight:500;
  }
  .hero .scroll-hint .line{ width:1px; height:28px; background:rgba(255,255,255,.3); animation:hintPulse 2s var(--ease) infinite; }
  @keyframes hintPulse{ 0%,100%{opacity:.3; transform:scaleY(.5); transform-origin:top} 50%{opacity:1; transform:scaleY(1)} }

  /* Bottom-right editorial wordmark badge */
  .hero .stamp{
    position:absolute; right:clamp(28px,5vw,72px); bottom:clamp(42px,6vh,72px);
    z-index:4; color:var(--gold); pointer-events:none;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.4));
  }
  .hero .stamp-inner{
    display:flex; flex-direction:column; align-items:stretch; gap:6px;
    text-align:center; min-width:210px;
  }
  .hero .stamp-row{
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-family:'General Sans','Inter',sans-serif;
    font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
    font-weight:500; color:var(--gold);
  }
  .hero .stamp-row .tick{ width:18px; height:1px; background:currentColor; display:inline-block; }
  .hero .stamp-mark{
    display:flex; align-items:center; gap:12px;
    font-family:'Instrument Serif', Georgia, serif;
    line-height:1;
  }
  .hero .stamp-mark .mark-line{ flex:1; height:1px; background:currentColor; opacity:.7; }
  .hero .stamp-mark .mark-word{
    font-size:30px; font-style:italic; color:var(--gold); white-space:nowrap;
    letter-spacing:-.005em;
  }
  .hero .stamp-mark .mark-italic{ font-size:28px; }

  @media (max-width: 980px){
    .hero .stamp{ display:none; }
  }

  @media (max-width: 900px){
    .hero .bottom{ grid-template-columns:1fr; gap:28px; }
    .hero .stats{ grid-template-columns:repeat(3, 1fr); }
    .hero .scroll-hint{ display:none; }
  }

  /* =============================================================
     TRUST. editorial intro + single certification bar
     ============================================================= */
  .trust{
    background:var(--bg-2);
    padding: clamp(100px, 12vw, 160px) 0;
    border-top:1px solid var(--line);
    overflow:hidden;
  }
  .trust .intro{
    display:grid; grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items:end;
    margin-bottom: clamp(56px, 7vw, 88px);
  }
  .trust .intro h2{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(32px, 3.8vw, 56px);
    line-height:1;
    letter-spacing:-0.028em;
    color:var(--ink);
    margin:0; max-width:18ch;
  }
  .trust .intro h2 .dim{ color:inherit; font-weight:inherit; }
  .trust .intro .lede{
    font-size:clamp(15px, 1.15vw, 17px);
    line-height:1.6;
    color:var(--ink);
    max-width:52ch;
    margin:0;
    font-weight:400;
    padding-bottom: 6px;
  }
  .trust .intro .lede .dim{ color:inherit; }

  /* Certification bar. one unified row */
  .trust .cert-bar{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .trust .cert{
    padding: 32px 28px;
    border-right: 1px solid var(--line);
    display:flex; flex-direction:column; gap:4px;
    transition: background .25s var(--ease);
  }
  .trust .cert:nth-child(5n){ border-right: none; }
  .trust .cert:nth-child(n+6){ border-top: 1px solid var(--line); }
  .trust .cert:hover{ background: rgba(201,154,61,.04); }
  .trust .cert .cn{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:600; font-size:17px;
    color:var(--ink);
    letter-spacing:-0.015em;
    line-height:1.1;
  }
  .trust .cert .ct{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:400; font-size:12px;
    color:var(--ink-3);
    letter-spacing:.06em; text-transform:uppercase;
    margin-top:2px;
  }

  @media (max-width: 900px){
    .trust .intro{ grid-template-columns:1fr; gap:24px; }
    .trust .cert-bar{ grid-template-columns: repeat(2, 1fr); }
    .trust .cert{ border-right:none; }
    .trust .cert:nth-child(odd){ border-right: 1px solid var(--line); }
    .trust .cert:nth-child(n+3){ border-top: 1px solid var(--line); }
  }

  /* =============================================================
     MANIFESTO. FIND chevron crossfade pattern
     "This isn't just [about roofs].". black + grey headline
     4 chevron photo tiles below
     ============================================================= */
  .manifesto{
    padding: clamp(100px, 14vw, 180px) 0;
    background:var(--bg);
    text-align:center;
  }
  .manifesto h2.display{
    max-width: 22ch; margin: 0 auto;
  }
  .manifesto h2.display .dim{color:var(--ink-4)}
  .manifesto .chevrons{
    margin: 72px auto 68px; max-width:1100px;
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:0; position:relative;
  }
  .chev{
    aspect-ratio: .72 / 1;
    clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%, 22% 50%);
    overflow:hidden;
    position:relative;
    background:#d4d0c8;
    margin-right:-12%;
    opacity:0; transform:translateX(30px);
    transition: opacity 1.2s var(--ease-slow), transform 1.2s var(--ease-slow);
  }
  .chev:nth-child(1){transition-delay:.05s}
  .chev:nth-child(2){transition-delay:.15s}
  .chev:nth-child(3){transition-delay:.25s}
  .chev:nth-child(4){transition-delay:.35s}
  .manifesto.on .chev{opacity:1; transform:translateX(0)}
  .chev img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition: transform 1.8s var(--ease-slow);
  }
  .manifesto.on .chev img{transform:scale(1.04)}
  .manifesto .outro{
    font-weight:500; font-size:clamp(17px, 1.4vw, 21px);
    line-height:1.55; color:var(--ink); max-width:46ch; margin:0 auto;
    letter-spacing:-0.01em;
  }
  .manifesto .outro .dim{color:var(--ink-4)}

  /* =============================================================
     SERVICES. cinematic bento on navy
     ============================================================= */
  .services{
    background:var(--navy); color:#fff;
    padding: clamp(100px, 12vw, 160px) 0 clamp(100px, 12vw, 160px);
    position:relative;
  }
  .services .head{
    display:block;
    margin-bottom: clamp(32px, 3.5vw, 48px);
  }
  .services .head h2{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(32px, 3.8vw, 56px);
    line-height:1;
    letter-spacing:-0.028em;
    color:#fff;
    margin:0 0 clamp(20px, 2vw, 28px);
    max-width:14ch;
  }
  .services .head .lede{
    font-size:clamp(15px, 1.15vw, 17px);
    line-height:1.55;
    color:rgba(255,255,255,.72);
    max-width:78ch; margin:0;
    font-weight:400;
  }

  /* Tiles don't use reveal fade. they're always visible (bento should paint immediately) */
  .bento .tile.reveal{ opacity:1; transform:none; }

  /* Bento. 12-col grid for featured+stacks row, then 4-across row */
  .bento{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(180px, 22vw, 280px);
    gap: clamp(10px, 1vw, 14px);
  }
  .tile{
    position:relative;
    overflow:hidden;
    border-radius:6px;
    display:block;
    isolation:isolate;
    background:#0b1220;
  }
  /* Row 1: featured left (8×2), two stacked right (4×1 each).
     Row 2: 4 tiles across (3×1 each). */
  .t-feat{ grid-column: span 8; grid-row: span 2; }
  .t-stk { grid-column: span 4; grid-row: span 1; }
  .t-quad{ grid-column: span 3; grid-row: span 1; }
  /* ---------------------------------------------------------------
     Bento animations: staggered entry, Ken Burns hover,
     title lift + gold underline, corner bracket, cinematic featured.
     --------------------------------------------------------------- */

  /* 1. Staggered entry. tiles rise + fade in sequentially when bento enters viewport */
  .bento.on .tile{ opacity:1; transform:none; }
  .bento .tile{
    opacity:0;
    transform: translateY(28px);
    transition:
      opacity .9s var(--ease-slow),
      transform .9s var(--ease-slow),
      box-shadow .4s var(--ease);
  }
  .bento.on .tile:nth-child(1){ transition-delay: 0ms; }
  .bento.on .tile:nth-child(2){ transition-delay: 90ms; }
  .bento.on .tile:nth-child(3){ transition-delay: 180ms; }
  .bento.on .tile:nth-child(4){ transition-delay: 270ms; }
  .bento.on .tile:nth-child(5){ transition-delay: 330ms; }
  .bento.on .tile:nth-child(6){ transition-delay: 390ms; }
  .bento.on .tile:nth-child(7){ transition-delay: 450ms; }

  /* 2. Ken Burns hover. slow scale + directional pan, different per tile */
  .tile .tile-img{
    position:absolute; inset:-4%;
    background-image: var(--img);
    background-size: cover;
    background-position:center;
    transform: scale(1.03) translate3d(0,0,0);
    transition: transform 2.2s var(--ease-slow);
    will-change: transform;
  }
  .tile:hover .tile-img{ transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
  .tile.t-stk:hover .tile-img{ transform: scale(1.12) translate3d(1.5%, -1%, 0); }
  .tile.t-quad:nth-of-type(even):hover .tile-img{ transform: scale(1.12) translate3d(-1.5%, 1%, 0); }
  .tile.t-quad:nth-of-type(odd):hover .tile-img{ transform: scale(1.12) translate3d(1.5%, 1%, 0); }

  /* 7. Featured tile. continuous slow Ken Burns loop (cinematic idle state) */
  @keyframes featuredKenBurns{
    0%   { transform: scale(1.05) translate3d(0%,   0%,   0); }
    50%  { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
    100% { transform: scale(1.05) translate3d(0%,   0%,   0); }
  }
  .t-feat .tile-img{
    animation: featuredKenBurns 32s var(--ease-slow) infinite;
  }
  .t-feat:hover .tile-img{
    animation-play-state: paused;
    transform: scale(1.15) translate3d(-2%, -1.5%, 0);
  }

  /* 3. Gradient overlay lightens very subtly on hover so the image comes forward */
  .tile:hover::after{ opacity:.88; }

  /* 4. Title lift + thin gold underline sweep on hover */
  .tile .tile-title{
    position:relative;
    transition: transform .5s var(--ease-slow);
  }
  .tile:hover .tile-title{ transform: translateY(-3px); }
  .tile .tile-title::after{
    content:'';
    position:absolute;
    left:0; bottom:-6px;
    height:1px;
    width:0;
    background: var(--gold, #c99a3d);
    transition: width .6s var(--ease-slow);
  }
  .tile:hover .tile-title::after{ width: clamp(36px, 4vw, 56px); }

  /* 5. Gold corner bracket. top-right signature detail fades in on hover */
  .tile .bracket{
    position:absolute;
    top:14px; right:14px;
    width:22px; height:22px;
    pointer-events:none;
    z-index:2;
    opacity:0;
    transform: translate(4px, -4px);
    transition:
      opacity .5s var(--ease),
      transform .5s var(--ease-slow);
  }
  .tile .bracket::before,
  .tile .bracket::after{
    content:'';
    position:absolute;
    background: var(--gold, #c99a3d);
  }
  .tile .bracket::before{ top:0; right:0; width:100%; height:1px; }
  .tile .bracket::after{  top:0; right:0; width:1px; height:100%; }
  .tile:hover .bracket{
    opacity:1;
    transform: translate(0,0);
  }

  /* lift the whole tile very slightly on hover (feels tactile) */
  .tile:hover{
    box-shadow:
      0 24px 60px -24px rgba(0,0,0,.55),
      0 2px 0 0 rgba(201,154,61,.25);
  }

  /* reduced motion: kill loops + transforms */
  @media (prefers-reduced-motion: reduce){
    .t-feat .tile-img{ animation: none; }
    .bento .tile{ opacity:1; transform:none; transition:none; }
    .tile .tile-img,
    .tile:hover .tile-img{ transition:none; transform: scale(1.03); }
  }
  .tile::after{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(4,17,33,0) 30%, rgba(4,17,33,.85) 100%),
      linear-gradient(90deg, rgba(4,17,33,.25), rgba(4,17,33,0) 50%);
    z-index:1;
    transition: opacity .4s var(--ease);
  }
  .tile .tile-body{
    position:absolute; left:0; right:0; bottom:0;
    padding: clamp(20px, 2vw, 32px);
    z-index:2;
    display:flex; flex-direction:column; gap:10px;
    color:#fff;
  }
  .tile-eyebrow{
    font-family:'General Sans','Inter',sans-serif;
    font-size:11px; font-weight:500;
    color:rgba(255,255,255,.72);
    letter-spacing:.2em; text-transform:uppercase;
  }
  .tile-eyebrow.gold{ color:var(--gold); }
  .tile-title{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(20px, 1.8vw, 28px);
    letter-spacing:-0.02em;
    line-height:1.05;
    color:#fff;
    margin:0;
  }
  .tile-desc{
    font-size:14px; line-height:1.5;
    color:rgba(255,255,255,.78);
    margin:0; max-width:42ch;
    opacity:0; max-height:0;
    transform:translateY(4px);
    transition: opacity .35s var(--ease), max-height .4s var(--ease), transform .35s var(--ease), margin .35s var(--ease);
    overflow:hidden;
  }
  .tile:hover .tile-desc{
    opacity:1; max-height:120px; transform:translateY(0);
  }
  .tile-link{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500; font-size:13px;
    color:var(--gold);
    letter-spacing:.01em;
  }
  .tile-link .arr-thin{ transition: transform .25s var(--ease); }
  .tile:hover .tile-link .arr-thin{ transform: translateX(4px); }

  /* scale titles by tile */
  .t-feat .tile-title{ font-size:clamp(32px, 3.2vw, 48px); }
  .t-stk .tile-title{ font-size:clamp(22px, 2vw, 32px); }
  .t-quad .tile-title{ font-size:clamp(18px, 1.4vw, 22px); }

  /* Multifamily. gold frame to flag different audience */
  .t-multi{
    outline: 1px solid rgba(201,154,61,.45);
    outline-offset: -1px;
  }
  .t-multi::after{
    background:
      linear-gradient(180deg, rgba(4,17,33,.3) 0%, rgba(4,17,33,.9) 100%);
  }
  .t-band::after{
    background:
      linear-gradient(90deg, rgba(4,17,33,.92) 0%, rgba(4,17,33,.55) 50%, rgba(4,17,33,.1) 100%),
      linear-gradient(180deg, rgba(4,17,33,0) 60%, rgba(4,17,33,.4) 100%);
  }

  @media (max-width: 1100px){
    .services .head{ grid-template-columns:1fr; gap:24px; }
    .bento{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(160px, 20vw, 220px); }
    .t-feat{ grid-column: span 4; grid-row: span 2; }
    .t-stk { grid-column: span 2; grid-row: span 1; }
    .t-quad{ grid-column: span 2; grid-row: span 1; }
  }
  @media (max-width: 600px){
    .bento{ grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 55vw, 260px); }
    .t-feat, .t-stk, .t-quad{ grid-column: span 1; grid-row: span 1; }
  }

  /* =============================================================
     PROCESS LEDGER. editorial 4-step with proof artifacts
     Matches site type system: General Sans, .dim phrase pattern,
     gold used sparingly. No italic serif.
     ============================================================= */
  .ledger{
    background: var(--bg-2);
    padding: clamp(100px, 12vw, 160px) 0;
    position:relative;
  }
  .ledger-head{
    max-width: 760px;
    margin: 0 0 clamp(24px, 3vw, 36px);
    text-align:left;
  }
  .pill-light{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 16px; border-radius:999px;
    background: #fff;
    border: 1px solid var(--line-2);
    font-family:'General Sans','Inter',sans-serif;
    font-size:12px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-2);
    margin-bottom:20px;
    width:fit-content;
  }
  .pill-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(180,140,54,.18);
  }
  .pill-dash{
    color: var(--ink-4);
    margin: 0 2px;
    letter-spacing: 0;
  }
  .ledger-head .eyebrow{ justify-content:flex-start; display:inline-flex; margin-bottom:22px; }
  .ledger-head h2{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(32px, 3.8vw, 56px);
    line-height:1;
    letter-spacing:-0.028em;
    color:var(--ink);
    margin: 0 0 24px;
    max-width: 20ch;
  }
  .ledger-head h2 .dim{ color:var(--ink-4); font-weight:inherit; }
  .ledger-intro{
    font-family:'General Sans','Inter',sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 18.5px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 60ch;
    margin: 0;
  }
  .ledger-intro .dim{ color: var(--ink-4); }

  /* =============================================================
     PROCESS LEDGER. two-column: sticky left, scrolling right stack
     ============================================================= */
  .ledger-split{
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: flex-start;
  }
  .ledger-side{
    position: sticky;
    top: calc(72px + 24px);
    align-self: start;
  }
  .ledger-side h2{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(30px, 3.2vw, 44px);
    line-height:1.02;
    letter-spacing:-0.028em;
    color:var(--ink);
    margin: 0 0 20px;
    max-width: 14ch;
  }
  .ledger-side .ledger-intro{
    font-family:'General Sans','Inter',sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 44ch;
    margin: 0;
  }

  /* Vertical rail in side panel */
  .rail-v{
    list-style: none; padding: 0; margin: 40px 0 0;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--line-2);
  }
  .rail-v li{
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0 14px 20px;
    font-family:'General Sans','Inter',sans-serif;
    opacity: .38;
    transition: opacity .4s var(--ease), color .4s var(--ease);
  }
  .rail-v li::before{
    content: '';
    position: absolute;
    left: -1px; top: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s var(--ease-slow);
  }
  .rail-v li.is-active{ opacity: 1; }
  .rail-v li.is-active::before{ transform: scaleY(1); }
  .rail-v .rv-n{
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em; color: var(--gold);
  }
  .rail-v .rv-t{
    font-size: 13px; font-weight: 500;
    color: var(--ink-2); letter-spacing: -.005em;
  }

  /* Vertical step stack */
  .ledger-stack{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: clamp(80px, 10vw, 140px);
    position: relative;
  }
  /* Thin gold connector line down the left of the stack */
  .ledger-stack::before{
    content: '';
    position: absolute;
    left: 18px;
    top: 8px; bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0, var(--line-2) 6%, var(--line-2) 94%, transparent 100%);
    z-index: 0;
  }
  .vstep{
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: clamp(24px, 2.4vw, 40px);
    row-gap: clamp(14px, 1.6vw, 22px);
    align-items: start;
    padding-left: 0;
  }
  .vstep-num{
    grid-column: 1; grid-row: 1 / span 3;
    position: relative;
    z-index: 1;
    font-family:'General Sans','Inter',sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .18em;
    color: var(--gold);
    background: var(--vstep-bg, var(--bg-2));
    padding: 6px 0 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 36px;
    margin-left: 0;
  }
  .vstep-num::after{
    content: '';
    position: absolute;
    left: 50%; top: 30px;
    transform: translateX(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px var(--vstep-bg, var(--bg-2)), 0 0 0 4px rgba(180,140,54,.28);
  }
  .vstep-title{
    grid-column: 2; grid-row: 1;
    font-family:'General Sans','Inter',sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 0;
    max-width: 22ch;
    padding-top: 2px;
  }
  .vstep-desc{
    grid-column: 2; grid-row: 2;
    font-family:'General Sans','Inter',sans-serif;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 54ch;
    margin: 0;
    font-weight: 400;
  }
  .vstep-proof{
    grid-column: 2; grid-row: 3;
    margin: clamp(8px, 1vw, 16px) 0 0;
    position: relative;
  }

  /* Reveal animation per step */
  .vstep > .vstep-title,
  .vstep > .vstep-desc,
  .vstep > .vstep-proof{
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .7s var(--ease-slow),
      transform .9s var(--ease-slow);
  }
  .vstep > .vstep-num{
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .5s var(--ease-slow),
      transform .6s var(--ease-slow);
  }
  .vstep.is-in > .vstep-num{ opacity: 1; transform: none; transition-delay: 0s; }
  .vstep.is-in > .vstep-title{ opacity: 1; transform: none; transition-delay: .08s; }
  .vstep.is-in > .vstep-desc{ opacity: 1; transform: none; transition-delay: .16s; }
  .vstep.is-in > .vstep-proof{ opacity: 1; transform: none; transition-delay: .24s; }

  /* Proof gets a soft scale-in */
  .vstep-proof .proof-img,
  .vstep-proof .doc,
  .vstep-proof .check,
  .vstep-proof .grid-feed{
    transform: scale(.985);
    transition: transform 1s var(--ease-slow);
    transform-origin: top left;
  }
  .vstep.is-in .vstep-proof .proof-img,
  .vstep.is-in .vstep-proof .doc,
  .vstep.is-in .vstep-proof .check,
  .vstep.is-in .vstep-proof .grid-feed{
    transform: scale(1);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .vstep > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
    .vstep-proof .proof-img,
    .vstep-proof .doc,
    .vstep-proof .check,
    .vstep-proof .grid-feed{ transform: none !important; transition: none !important; }
  }

  .vstep-proof figcaption{
    margin-top: 14px;
    font-family:'General Sans','Inter',sans-serif;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    line-height: 1.5;
  }
  .vstep-proof figcaption span{
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-4);
    font-size: 12.5px;
    font-weight: 400;
  }

  @media (max-width: 860px){
    .ledger-split{ grid-template-columns: 1fr; gap: 40px; }
    .ledger-side{ position: static; }
    .rail-v{ display:none; }
    .ledger-stack::before{ display:none; }
    .vstep{ grid-template-columns: 40px 1fr; }
    .vstep-num{ font-size: 12px; }
  }

  /* Proof artifacts */
  .vstep-proof{
    padding-top: clamp(4px, 0.6vw, 10px);
    max-width: 560px;
  }
  .proof-img{
    aspect-ratio: 16/9;
    max-height: 320px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 24px 60px -30px rgba(4,17,33,.35);
  }

  /* Step 02. scope doc */
  .proof-doc .doc{
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: clamp(22px, 2.2vw, 32px);
    box-shadow: 0 24px 60px -30px rgba(4,17,33,.35);
    font-family:'General Sans','Inter',sans-serif;
  }
  .doc-head{
    display:flex; justify-content:space-between; align-items:baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 16px;
  }
  .doc-title{
    font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .doc-meta{
    font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
  }
  .doc-lines{
    list-style: none; padding: 0;
    display: grid; gap: 10px;
  }
  .doc-lines li{
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-2);
    align-items: baseline;
    font-family:'General Sans','Inter',sans-serif;
  }
  .doc-lines li > span:first-child{
    color: var(--gold);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
  }
  .doc-lines .amt{
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
  }
  .doc-lines li.hl{
    background: rgba(180,140,54,.08);
    padding: 0 10px;
    border-radius: 3px;
    margin: 0 -10px;
  }
  .doc-lines li.hl > span:nth-child(2){ color: var(--ink); font-weight: 600; }

  /* Step 03. photo feed grid */
  .proof-grid .grid-feed{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 24px 60px -30px rgba(4,17,33,.35);
  }
  .g-cell{
    position:relative;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
  }
  .g-cell .g-time{
    position:absolute; left:8px; bottom:8px;
    font-family:'General Sans','Inter',sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #fff;
    background: rgba(4,17,33,.65);
    padding: 3px 7px;
    border-radius: 2px;
    backdrop-filter: blur(4px);
  }

  /* Step 04. QC checklist */
  .proof-check .check{
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: clamp(22px, 2.2vw, 32px);
    box-shadow: 0 24px 60px -30px rgba(4,17,33,.35);
    font-family:'General Sans','Inter',sans-serif;
  }
  .check-head{
    display:flex; justify-content:space-between; align-items:baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 16px;
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .check-meta{
    font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
  }
  .check-list{
    list-style: none; padding: 0;
    display: grid; gap: 9px;
  }
  .check-list li{
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-2);
    align-items: baseline;
  }
  .cb{
    display:inline-block;
    width: 16px; height: 16px;
    background: var(--gold);
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    border-radius: 2px;
    font-weight: 700;
  }
  .check-foot{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
    display:flex; justify-content:space-between;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: .02em;
  }
  .check-foot strong{
    color: var(--ink); font-weight: 700;
  }

  @media (max-width: 960px){
    .step, .step.flip{
      grid-template-columns: 72px 1fr;
    }
    .step .step-proof,
    .step.flip .step-proof{
      grid-column: 1 / -1; grid-row: 2;
      margin-top: 8px;
    }
    .step-num{ font-size: 44px; }
  }

  /* =============================================================
     WHY. two-up: big pulled quote + 4:5 photo
     ============================================================= */
  .why{
    background:var(--bg);
    padding: clamp(100px, 12vw, 160px) 0;
  }
  .why .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
  }
  .why .body .pill-light{ margin-bottom: 22px; }
  .why h2.why-title{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(30px, 3.2vw, 44px);
    line-height:1.02;
    letter-spacing:-0.028em;
    color:var(--ink);
    margin:0 0 20px;
    max-width: 14ch;
  }
  .why h2.why-title .dim{color:var(--ink-4); font-weight:inherit}
  .why .body p{
    margin-top:18px;
    font-family:'General Sans','Inter',sans-serif;
    font-weight:400;
    font-size:clamp(14px, 1vw, 15.5px);
    line-height:1.6;
    color:var(--ink-2);
    max-width:48ch;
  }
  .why .stats{
    margin-top:36px;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:28px; padding-top:28px; border-top:1px solid var(--line);
  }
  .why .stats .s b{
    display:block; font-family:'General Sans', 'Inter', sans-serif; font-weight:700;
    font-size:clamp(28px, 3vw, 40px); color:var(--ink); letter-spacing:-0.02em;
    line-height:1;
  }
  .why .stats .s span{
    display:block; margin-top:8px;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3); font-weight:500;
  }
  .why .portrait{
    position:relative; aspect-ratio: 4/5;
    border-radius:6px; overflow:hidden;
    background:#ddd;
  }
  .why .portrait img{width:100%; height:100%; object-fit:cover}
  .why .portrait .tag{
    position:absolute; left:20px; bottom:20px;
    background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
    padding:10px 16px; border-radius:999px;
    font-size:12px; font-weight:600; color:var(--ink);
    letter-spacing:-0.005em;
  }
  .why .portrait .tag small{display:block; color:var(--ink-3); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:10px; margin-top:2px}
  .why .cta-row{margin-top:36px}

  /* Ledger footer. process proof row, matches .vstep rhythm */
  .ledger-proof{
    margin-top: clamp(80px, 9vw, 120px);
    padding-top: clamp(40px, 4vw, 56px);
    border-top: 1px solid var(--line-2);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .ledger-proof .lp-cell{
    padding: 0 clamp(24px, 3vw, 44px);
    border-left: 1px solid var(--line-2);
    position: relative;
  }
  .ledger-proof .lp-cell:first-child{ border-left: 0; padding-left: 0; }
  .ledger-proof .lp-cell:last-child{ padding-right: 0; }
  .ledger-proof .lp-tag{
    font-family:'General Sans','Inter',sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(24px, 2.6vw, 36px);
  }
  .ledger-proof .lp-dot{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 4px rgba(180,140,54,.28);
    display: inline-block;
  }
  .ledger-proof .lp-num{
    font-family:'General Sans','Inter',sans-serif;
    font-weight: 500;
    font-size: clamp(64px, 7.4vw, 104px);
    line-height: .9;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin-bottom: clamp(20px, 2vw, 28px);
    display: flex;
    align-items: baseline;
  }
  .ledger-proof .lp-plus{
    font-size: .5em;
    color: var(--gold);
    font-weight: 500;
    margin-left: 2px;
    letter-spacing: 0;
  }
  .ledger-proof .lp-label{
    font-family:'General Sans','Inter',sans-serif;
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.5;
    color: var(--ink-2);
    font-weight: 400;
    max-width: 24ch;
  }
  @media (max-width: 860px){
    .ledger-proof{ grid-template-columns: 1fr; }
    .ledger-proof .lp-cell{
      border-left: 0; padding-left: 0; padding-right: 0;
      border-top: 1px solid var(--line-2);
      padding-top: clamp(28px, 4vw, 40px);
      margin-top: clamp(28px, 4vw, 40px);
    }
    .ledger-proof .lp-cell:first-child{ border-top: 0; margin-top: 0; padding-top: 0; }
  }

  /* =============================================================
     GALLERY. horizontal scroll (Fluid-style)
     Title left, arrow controls right; 4:5 portrait cards
     ============================================================= */
  /* =============================================================
     RECENT PROJECTS. gallery teaser with filter chips + 3×2 grid
     ============================================================= */
  .recent{
    background:var(--navy);
    color:#fff;
    padding: clamp(100px, 12vw, 160px) 0;
  }
  .recent .recent-head{
    max-width: 68ch;
    margin-bottom: clamp(28px, 2.6vw, 40px);
  }
  .recent .pill-light{
    margin-bottom:22px;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    color: #fff;
  }
  .recent-title{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(30px, 3.2vw, 44px);
    line-height:1.02;
    letter-spacing:-0.028em;
    color:#fff;
    margin:0 0 20px;
    max-width: 22ch;
  }
  .recent-title .dim{ color:rgba(255,255,255,.5); font-weight:inherit; }
  .recent-intro{
    font-family:'General Sans','Inter',sans-serif;
    font-size:clamp(14px, 1vw, 15.5px);
    line-height:1.6;
    color:rgba(255,255,255,.72);
    max-width:52ch;
  }
  .recent-filters{
    margin-top: clamp(28px, 3vw, 40px);
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .recent-filters .chip{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:13px;
    letter-spacing:.01em;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.82);
    background:transparent;
    cursor:pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .recent-filters .chip:hover{ border-color:rgba(255,255,255,.5); color:#fff; }
  .recent-filters .chip.on{
    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);
  }
  .recent-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap: clamp(14px, 1.4vw, 22px);
  }
  .recent-grid .r-tile{
    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
    background:#0a0d15;
    cursor:pointer;
    display:block;
    isolation:isolate;
    transition: transform .6s var(--ease-slow);
    will-change: transform;
  }
  .recent-grid .r-tile.is-hidden{ display:none; }
  .recent-grid .r-tile::before{
    content:''; position:absolute; inset:0; z-index:4;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    pointer-events:none;
    transition: box-shadow .5s var(--ease);
  }
  .recent-grid .r-tile:hover::before{ box-shadow: inset 0 0 0 1px rgba(180,140,54,.55); }
  .recent-grid .r-img{
    position:absolute; inset:-2% -2% -2% -2%;
    background-size:cover; background-position:center;
    transform: scale(1.04);
    transition: transform 2.6s var(--ease-slow), filter .6s var(--ease);
    filter: saturate(.92) contrast(1.02);
    z-index:1;
  }
  .recent-grid .r-tile:hover .r-img{
    transform: scale(1.12) translate3d(-1%, -1.5%, 0);
    filter: saturate(1.05) contrast(1.06);
  }
  /* cinematic layered gradient: top vignette + bottom shade */
  .recent-grid .r-shade{
    position:absolute; inset:0; z-index:2;
    background:
      linear-gradient(180deg, rgba(4,17,33,.38) 0%, rgba(4,17,33,0) 22%, rgba(4,17,33,0) 55%, rgba(4,17,33,.55) 80%, rgba(4,17,33,.92) 100%),
      radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 100%);
    pointer-events:none;
    transition: opacity .6s var(--ease);
  }
  /* subtle grain */
  .recent-grid .r-grain{
    position:absolute; inset:0; z-index:3;
    pointer-events:none;
    opacity:.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
  }
  /* top-right editorial corner: index + year */
  .recent-grid .r-corner{
    position:absolute; top:18px; right:18px; z-index:5;
    display:flex; align-items:center; gap:10px;
    font-family:'General Sans','Inter',sans-serif;
    font-weight:600; font-size:11px;
    letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.88);
  }
  .recent-grid .r-corner .r-idx{ color: var(--gold); }
  .recent-grid .r-corner .r-bar{
    width:18px; height:1px; background:rgba(255,255,255,.35);
  }
  /* bottom meta block */
  .recent-grid .r-meta{
    position:absolute; left:22px; right:22px; bottom:22px;
    z-index:5; color:#fff;
    display:flex; flex-direction:column; gap:8px;
    transform: translateY(6px);
    transition: transform .5s var(--ease);
  }
  .recent-grid .r-tile:hover .r-meta{ transform: translateY(0); }
  .recent-grid .r-mat{
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold); font-weight:600;
    display:inline-flex; align-items:center; gap:8px;
  }
  .recent-grid .r-mat::before{
    content:''; width:18px; height:1px; background:var(--gold);
  }
  .recent-grid .r-loc{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(18px, 1.4vw, 22px);
    line-height:1.15;
    letter-spacing:-0.016em;
    color:#fff;
    max-width: 18ch;
  }
  .recent-grid .r-view{
    margin-top:4px;
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    font-weight:600;
    color: rgba(255,255,255,.78);
    opacity:0; transform: translateY(4px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s var(--ease);
  }
  .recent-grid .r-view .r-arrow{
    width:22px; height:1px; background:currentColor; position:relative;
    transition: width .3s var(--ease);
  }
  .recent-grid .r-view .r-arrow::after{
    content:''; position:absolute; right:0; top:-3px;
    width:7px; height:7px;
    border-top:1px solid currentColor;
    border-right:1px solid currentColor;
    transform: rotate(45deg);
  }
  .recent-grid .r-tile:hover .r-view{
    opacity:1; transform: translateY(0);
    color: #fff;
  }
  .recent-grid .r-tile:hover .r-view .r-arrow{ width: 34px; }
  /* stagger entry */
  .recent-grid .r-tile{ opacity:0; transform: translateY(18px); transition: opacity .9s var(--ease-slow), transform .9s var(--ease-slow), filter .4s var(--ease); }
  .recent-grid.on .r-tile{ opacity:1; transform: translateY(0); }
  .recent-grid.on .r-tile:nth-child(1){ transition-delay: 0ms; }
  .recent-grid.on .r-tile:nth-child(2){ transition-delay: 80ms; }
  .recent-grid.on .r-tile:nth-child(3){ transition-delay: 160ms; }
  .recent-grid.on .r-tile:nth-child(4){ transition-delay: 240ms; }
  .recent-grid.on .r-tile:nth-child(5){ transition-delay: 320ms; }
  .recent-grid.on .r-tile:nth-child(6){ transition-delay: 400ms; }
  .recent-cta{
    margin-top: clamp(48px, 5vw, 72px);
    display:flex; justify-content:flex-start;
  }
  @media (max-width: 900px){
    .recent-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .recent-grid{ grid-template-columns:1fr; }
  }

  /* =============================================================
     TESTIMONIAL. FIND "Don't Take Our Word" pattern
     Big 2-tone headline, photo left + quote right, pagination pills
     ============================================================= */
  .testimonial{
    background:var(--navy);
    color:#fff;
    padding: clamp(100px, 12vw, 160px) 0;
  }
  .testimonial h2.display-sm{ color:#fff; }
  .testimonial h2.display-sm .dim{ color:rgba(255,255,255,.35); font-weight:inherit; }
  .testimonial .head .head-meta .rating-txt{ color:rgba(255,255,255,.6); }
  .testimonial .reviews{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
  }
  .testimonial .reviews::before{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  }
  .testimonial .review blockquote{ color:#fff; }
  .testimonial .review .r-by{ color:rgba(255,255,255,.5); }
  .testimonial .review .r-by b{ color:#fff; }
  .testimonial .review .r-by .r-dot{ background:rgba(255,255,255,.3); }
  .testimonial .r-count{ color:rgba(255,255,255,.5); }
  .testimonial .r-count b{ color:#fff; }
  .testimonial .r-dots button{ background:rgba(255,255,255,.2); }
  .testimonial .r-dots button.on{ background:#fff; }
  .testimonial .r-arrows button{
    color:#fff; border-color:rgba(255,255,255,.25); background:transparent;
  }
  .testimonial .r-arrows button:hover{
    background:#fff; color:var(--navy); border-color:#fff;
  }
  .testimonial .head{
    margin-bottom:56px;
  }
  .testimonial h2.display-sm{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(32px, 3.8vw, 56px);
    line-height:1;
    letter-spacing:-0.028em;
    color:#fff;
    margin:0;
    max-width:18ch; flex:1 1 auto;
  }
  .testimonial h2.display-sm .dim{ color:rgba(255,255,255,.35); font-weight:inherit; }
  .testimonial .head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
    margin-bottom:56px;
  }
  .testimonial .head .head-meta{
    display:flex; flex-direction:column; gap:8px; text-align:right;
    padding-bottom:10px; flex:0 0 auto;
    font-family:'General Sans','Inter',sans-serif;
  }
  .testimonial .head .head-meta .rating{
    font-size:18px; color:var(--gold); letter-spacing:3px; line-height:1;
  }
  .testimonial .head .head-meta .rating-txt{
    font-family:'General Sans','Inter',sans-serif;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
  }
  .testimonial .grid{
    display:grid; grid-template-columns: 1.1fr 1fr; gap:0; align-items:stretch;
  }
  .testimonial .video{
    aspect-ratio:16/9; background:#000; border-radius:4px 0 0 4px; overflow:hidden;
    position:relative; cursor:pointer;
    box-shadow: 0 30px 60px -30px rgba(4,17,33,.35), 0 1px 0 0 rgba(4,17,33,.06);
  }
  .testimonial .video .poster{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(4,17,33,.1), rgba(4,17,33,.7)),
      url('/assets/mccarthy-05-metal-drone.jpg') center/cover;
    transition: transform 2s var(--ease-slow);
  }
  .testimonial .video:hover .poster{ transform: scale(1.03); }
  .testimonial .video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4}
  .testimonial .video .play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:84px; height:84px; border-radius:50%; background:var(--gold); color:#fff;
    display:flex; align-items:center; justify-content:center;
    padding-left:5px; font-size:22px;
    transition:transform .25s var(--ease), background .25s var(--ease);
    box-shadow: 0 20px 40px -10px rgba(180,140,54,.55);
  }
  .testimonial .video:hover .play{transform:translate(-50%,-50%) scale(1.08); background:#c9a147}
  .testimonial .video .cap{
    position:absolute; left:26px; right:26px; bottom:22px; z-index:3; color:#fff;
    display:flex; flex-direction:column; gap:6px;
  }
  .testimonial .video .cap small{
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold); font-weight:600;
    display:inline-flex; align-items:center; gap:8px;
  }
  .testimonial .video .cap small::before{
    content:''; width:18px; height:1px; background:var(--gold);
  }
  .testimonial .video .cap .cap-title{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500; font-size:22px; line-height:1.2; letter-spacing:-0.015em;
    max-width: 20ch;
  }
  .testimonial .video .cap .cap-sub{
    font-size:13px; color:rgba(255,255,255,.72); letter-spacing:.02em;
  }
  .testimonial .video .cap .cap-sub::before{
    content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--gold); margin-right:10px; transform: translateY(-2px);
  }

  /* Review slider. equal height to video */
  .testimonial .reviews{
    position:relative;
    display:flex; flex-direction:column;
    background:var(--bg-2);
    border-radius:4px;
    padding: 36px 40px 28px;
    overflow:hidden;
    min-height:100%;
  }
  .testimonial .reviews::before{
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(4,17,33,.14), transparent);
  }
  .testimonial .reviews .r-track{
    position:relative;
    flex:1 1 auto;
    overflow:hidden;
  }
  .testimonial .review{
    position:absolute; inset:0;
    padding:0;
    display:flex; flex-direction:column; gap:18px;
    opacity:0; transform: translateX(16px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    pointer-events:none;
  }
  .testimonial .review.is-on{
    opacity:1; transform: translateX(0);
    pointer-events:auto;
  }
  .testimonial .review .r-stars{
    font-size:13px; color:var(--gold); letter-spacing:2px;
  }
  .testimonial .review .r-mark{
    font-family:'Instrument Serif', Georgia, serif;
    font-style:italic;
    color: var(--gold);
    font-size: 52px; line-height:.6;
    margin-top:-4px;
  }
  .testimonial .review blockquote{
    margin:0; padding:0;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.55; color: var(--ink);
    font-weight:400; max-width: 46ch;
  }
  .testimonial .review .r-by{
    margin-top:auto;
    display:flex; align-items:center; gap:14px;
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color: var(--ink-3); font-weight:500;
    padding-top:18px;
  }
  .testimonial .review .r-by b{ color: var(--ink); font-weight:600; letter-spacing:.08em; }
  .testimonial .review .r-by .r-dot{ width:3px; height:3px; background:var(--ink-4); border-radius:50%; }
  .testimonial .review .r-src{ display:inline-flex; align-items:center; gap:6px; }
  .testimonial .review .r-src::before{
    content:''; width:12px; height:12px; border-radius:50%;
    background: conic-gradient(from 0deg, #4285F4 0 25%, #EA4335 0 50%, #FBBC04 0 75%, #34A853 0 100%);
  }
  /* slider controls */
  .testimonial .r-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:22px;
    border-top:1px solid var(--line-2);
  }
  .testimonial .r-dots{ display:flex; gap:10px; align-items:center; }
  .testimonial .r-dots button{
    width:28px; height:2px; border-radius:2px; background:var(--line-2);
    border:0; padding:0; cursor:pointer;
    transition: background .3s var(--ease), width .3s var(--ease);
  }
  .testimonial .r-dots button.on{ background: var(--ink); width:42px; }
  .testimonial .r-arrows{ display:flex; gap:8px; }
  .testimonial .r-arrows button{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--line-2); background:transparent;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink);
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    font-size:16px;
  }
  .testimonial .r-arrows button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .testimonial .r-count{
    font-family:'General Sans','Inter',sans-serif;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-3); font-weight:600;
  }
  .testimonial .r-count b{ color:var(--ink); font-weight:600; }

  /* =============================================================
     AREA. city list + map placeholder
     ============================================================= */
  .area{
    background:var(--bg-2);
    padding: clamp(100px, 12vw, 160px) 0;
  }
  .area .grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
  .area h2.display-sm{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(32px, 3.8vw, 56px);
    line-height:1;
    letter-spacing:-0.028em;
    color:var(--ink);
    margin:0;
    max-width:18ch;
  }
  .area h2.display-sm .dim{ color:var(--ink-4); font-weight:inherit; }
  .area p{margin-top:22px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:52ch}
  .area .cities{
    margin-top:36px;
    display:grid; grid-template-columns:1.4fr 1fr; gap:0 44px;
  }
  .area .city-col{ display:flex; flex-direction:column; }
  .area .city-col .col-head{
    font-family:'General Sans','Inter',sans-serif;
    font-size:11px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-3);
    padding-bottom:14px;
    border-bottom:1px solid var(--line-2);
    margin-bottom:0;
    display:flex; align-items:baseline; gap:10px;
  }
  .area .city-col .col-head::after{
    content:''; flex:1; height:1px; background:var(--line-2);
    align-self:center; margin-left:4px;
    display:none;
  }
  .area .city-col .col-head .col-count{
    color:var(--gold); font-weight:600; letter-spacing:.12em;
    font-size:10.5px;
  }
  .area .cities a{
    padding:15px 0;
    display:flex; justify-content:space-between; align-items:center;
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500; font-size:16.5px; color:var(--ink);
    border-bottom:1px solid var(--line-2);
    transition: padding .25s var(--ease), color .25s var(--ease);
    letter-spacing:-0.012em;
  }
  .area .cities a:hover{padding-left:8px; color:var(--gold);}
  .area .cities a .arr-thin{
    opacity:0; color:var(--gold); font-size:14px;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .area .cities a:hover .arr-thin{opacity:1; transform:translateX(2px);}
  .area .coverage-line{
    margin-top:40px;
    padding-top:28px;
    border-top:1px solid var(--line-2);
    font-family:'General Sans','Inter',sans-serif;
    font-size:15px; line-height:1.6;
    color:var(--ink-2); font-weight:400;
    max-width: 54ch;
  }
  .area .coverage-line::before{
    content:''; display:inline-block; vertical-align:middle;
    width:22px; height:1px; background:var(--gold);
    margin-right:14px; transform:translateY(-3px);
  }
  .area .coverage-line b{ color:var(--ink); font-weight:600; }
  .area .map{
    position:relative; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
    background: linear-gradient(145deg, #ebe7dc, #d9d4c5);
    border:1px solid var(--line-2);
  }
  .area .map .badge{
    position:absolute; top:16px; right:16px; z-index:500;
    background:rgba(255,255,255,.95); padding:7px 12px; border-radius:4px;
    font-size:10px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-3); font-weight:600;
    pointer-events:none;
  }
  .area .map #amorMap { background: #ebe7dc; }
  .area .map .leaflet-container { background: #ebe7dc; font-family:'General Sans','Inter',sans-serif; }
  .area .map .leaflet-control-attribution { font-size: 9px; opacity: .7; }
  /* Kill Leaflet's built-in Ukraine solidarity flag (ships in Leaflet 1.8+) */
  .leaflet-attribution-flag,
  .leaflet-control-attribution .leaflet-attribution-flag,
  .leaflet-control-attribution svg { display: none !important; }
  .area .map .leaflet-popup-content-wrapper { border-radius: 4px; }
  .area .map .leaflet-popup-content { margin: 10px 14px; }
  .area .map svg{width:100%; height:100%}
  .area .map .pin{
    position:absolute; z-index:2;
    padding:6px 12px 6px 22px; border-radius:999px;
    background:#fff; color:var(--ink); font-size:12px; font-weight:600;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }
  .area .map .pin::before{
    content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:8px; height:8px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 0 4px rgba(180,140,54,.2);
  }

  /* =============================================================
     FAQ. accordion
     ============================================================= */
  .faq{
    background:var(--bg);
    padding: clamp(100px, 12vw, 160px) 0;
  }
  .faq .head{
    display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:end;
    margin-bottom:56px;
  }
  .faq .head .eyebrow{ margin-bottom:22px; }
  .faq h2.faq-title{
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(30px, 3.2vw, 44px);
    line-height:1.02;
    letter-spacing:-0.028em;
    color:var(--ink);
    margin:0 0 20px;
    white-space:nowrap;
  }
  .faq h2.faq-title .dim{color:var(--ink-4); font-weight:inherit}
  .faq .head .lede{max-width:38ch}
  .faq .list{border-top:1px solid var(--line-2)}
  details.q{
    border-bottom:1px solid var(--line-2);
    padding:24px 0;
  }
  details.q summary{
    list-style:none; cursor:pointer;
    display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
    font-size:clamp(18px, 1.4vw, 22px); font-weight:500; color:var(--ink);
    letter-spacing:-0.015em;
  }
  details.q summary::-webkit-details-marker{display:none}
  details.q summary .plus{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--ink-2); font-weight:400;
    transition: background .2s var(--ease), color .2s var(--ease), transform .3s var(--ease);
  }
  details.q[open] summary .plus{background:var(--ink); color:#fff; transform:rotate(45deg)}
  details.q .a{
    padding-top:18px; max-width:80%;
    font-size:16.5px; line-height:1.65; color:var(--ink-2);
  }

  /* =============================================================
     FINAL CTA. black stage, huge 2-tone headline, pill CTAs
     ============================================================= */
  .final{
    background:var(--navy);
    color:#fff;
    padding: clamp(100px, 14vw, 180px) 0 clamp(80px, 10vw, 140px);
    position:relative; overflow:hidden;
  }
  .final::before{
    content:''; position:absolute; inset:-10% 0;
    background-image: var(--final-bg, url('/assets/mccarthy-05-metal-drone.jpg'));
    background-size:cover; background-position:center;
    opacity:.18;
    filter: grayscale(.4);
    transform: translateY(var(--final-parallax, 0px));
    will-change: transform;
  }
  .final::after{
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(4,17,33,.88) 70%);
  }
  .final > *{position:relative; z-index:1}
  .final .wrap{max-width:1120px}
  .final .stamp{
    display:flex; align-items:center; gap:14px;
    font-family:'General Sans','Inter',sans-serif;
    font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:#8a8e95;
    margin-bottom: clamp(32px, 4vw, 56px);
  }
  .final .stamp::before, .final .stamp::after{
    content:''; flex:1; height:1px; background:rgba(255,255,255,.12);
  }
  .final .stamp .dot{
    width:6px; height:6px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 0 4px rgba(180,140,54,.15);
  }
  .final h2.final-title{
    color:#fff;
    font-family:'General Sans','Inter',sans-serif;
    font-weight:500;
    font-size:clamp(30px, 3.4vw, 48px);
    line-height:1.05;
    letter-spacing:-0.028em;
    max-width: 20ch;
    margin: 0 auto 28px;
    text-align:center;
  }
  .final .final-body{
    max-width: 62ch;
    margin: 0 auto clamp(48px, 5vw, 72px);
    font-family:'General Sans','Inter',sans-serif;
    font-weight:400;
    font-size:clamp(15px, 1.2vw, 17.5px);
    line-height:1.65;
    color:#c9c9c4;
    text-align:center;
  }
  .final .cta-row{
    display:flex; align-items:center; justify-content:center;
    gap: clamp(16px, 2vw, 28px);
    flex-wrap:wrap;
  }
  .final .cta-primary{
    display:inline-flex; align-items:center; gap:14px;
    background:#fff; color:var(--ink);
    font-family:'General Sans','Inter',sans-serif; font-weight:500;
    font-size:15.5px;
    padding:18px 26px 18px 28px;
    border-radius:999px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    box-shadow: 0 10px 40px -12px rgba(180,140,54,.35);
  }
  .final .cta-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 50px -10px rgba(180,140,54,.5);
  }
  .final .cta-primary .arr{
    width:30px; height:30px; border-radius:50%;
    background:var(--ink); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px;
    transition: transform .2s;
  }
  .final .cta-primary:hover .arr{transform: translateX(2px);}
  .final .cta-divider{
    width:1px; height:26px; background:rgba(255,255,255,.15);
  }
  .final .cta-phone{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'General Sans','Inter',sans-serif; font-weight:500;
    font-size:15.5px;
    color:#fff;
    padding:16px 4px;
  }
  .final .cta-phone .icon{
    width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
    color:var(--gold);
  }
  .final .cta-phone:hover{color:var(--gold)}
  .final .cta-tertiary-row{
    margin-top: clamp(32px, 3.5vw, 48px);
    text-align:center;
    font-family:'General Sans','Inter',sans-serif;
    font-size:14px;
    color:#8a8e95;
  }
  .final .cta-tertiary-row a{
    color:#fff;
    border-bottom: 1px solid rgba(255,255,255,.3);
    padding-bottom: 2px;
    margin-left: 8px;
    transition: color .2s, border-color .2s;
  }
  .final .cta-tertiary-row a:hover{
    color: var(--gold); border-color: var(--gold);
  }
  .final .cta-tertiary-row a .arr-thin{
    margin-left:6px; color: var(--gold);
  }
  @media (max-width: 640px){
    .final .cta-divider{display:none}
    .final .cta-row{flex-direction:column}
  }

  /* =============================================================
     FOOTER
     ============================================================= */
  footer{
    background:var(--navy); color:#c9c9c4;
    padding: 80px 0 40px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  footer .grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px}
  footer .brand img{height:104px; width:auto; margin-bottom:20px}
  footer .brand p{font-size:14.5px; line-height:1.6; color:#8a8e95; max-width:32ch}
  footer h5{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; font-weight:600; margin-bottom:18px}
  footer ul{list-style:none; display:flex; flex-direction:column; gap:10px}
  footer ul a{font-size:14.5px; color:#c9c9c4; font-weight:400}
  footer ul a:hover{color:#fff}
  footer .bottom{
    margin-top:60px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1);
    display:flex; justify-content:space-between; font-size:12px; color:#6a6f78;
  }

  /* =============================================================
     REVEAL
     ============================================================= */
  .reveal{opacity:0; transform:translateY(28px); transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow); will-change: opacity, transform}
  .reveal.on{opacity:1; transform:translateY(0)}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}
  .reveal.d4{transition-delay:.32s}
  .reveal.d5{transition-delay:.40s}
  .reveal.d6{transition-delay:.48s}
  .reveal-left{opacity:0; transform:translateX(-32px); transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow)}
  .reveal-left.on{opacity:1; transform:translateX(0)}
  .reveal-right{opacity:0; transform:translateX(32px); transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow)}
  .reveal-right.on{opacity:1; transform:translateX(0)}
  .reveal-scale{opacity:0; transform:scale(.96); transition: opacity 1.2s var(--ease-slow), transform 1.2s var(--ease-slow)}
  .reveal-scale.on{opacity:1; transform:scale(1)}
  .reveal-mask{
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s var(--ease-slow);
  }
  .reveal-mask.on{ clip-path: inset(0 0 0 0); }
  /* Staggered child reveal: parent adds .stagger-on when intersecting */
  .stagger > *{opacity:0; transform:translateY(24px); transition: opacity .9s var(--ease-slow), transform .9s var(--ease-slow)}
  .stagger.on > *{opacity:1; transform:translateY(0)}
  .stagger.on > *:nth-child(1){transition-delay:0ms}
  .stagger.on > *:nth-child(2){transition-delay:80ms}
  .stagger.on > *:nth-child(3){transition-delay:160ms}
  .stagger.on > *:nth-child(4){transition-delay:240ms}
  .stagger.on > *:nth-child(5){transition-delay:320ms}
  .stagger.on > *:nth-child(6){transition-delay:400ms}
  .stagger.on > *:nth-child(7){transition-delay:480ms}
  .stagger.on > *:nth-child(8){transition-delay:560ms}
  /* Gold accent line that draws in on section headers */
  .draw-line{
    position:relative;
    display:inline-block;
  }
  .draw-line::after{
    content:''; position:absolute; left:0; bottom:-10px;
    height:2px; width:0; background:var(--gold);
    transition: width 1.4s var(--ease-slow);
  }
  .draw-line.on::after{ width:64px; }
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-mask, .stagger > *{
      opacity:1 !important; transform:none !important; clip-path:none !important;
    }
  }

  /* =============================================================
     RESPONSIVE
     ============================================================= */
  @media (max-width: 980px){
    .nav .links{display:none}
    .trust .intro, .services .head, .process .head, .why .grid, .testimonial .grid, .area .grid, .faq .head{grid-template-columns:1fr; gap:36px}
    .services .cards{grid-template-columns:1fr}
    .services .more-row{grid-template-columns:1fr 1fr}
    .manifesto .chevrons{grid-template-columns:repeat(2,1fr)}
    .chev:nth-child(3), .chev:nth-child(4){margin-top:-12%}
    .area .cities{grid-template-columns:1fr}
    footer .grid{grid-template-columns:1fr 1fr; gap:32px}
  }

/* ============================================================
   POST-HANDOFF PATCHES (matt 2026-04-22)
   Unified eyebrow pattern. Dot-left + uppercase text, no pill.
   Reason: pill containers read as tappable buttons on mobile.
   ============================================================ */

/* Kill the diamond ::before that the original eyebrow used,
   we are using an inline pill-dot span instead for halo + consistency. */
.eyebrow::before { content: none; }

/* Base eyebrow override, locks the unified look */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'General Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

/* Pill-dot inside eyebrow, halo + gold fill */
.eyebrow .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(180,140,54,.18);
  flex-shrink: 0;
  display: inline-block;
}

/* Dark-section eyebrow, same gold text, slightly softer halo on navy */
.services .eyebrow .pill-dot,
.recent .eyebrow .pill-dot {
  box-shadow: 0 0 0 3px rgba(180,140,54,.22);
}

/* Services head: eyebrow lives above the H2, consistent spacing */
.services .head .eyebrow { margin-bottom: 18px; }

/* Trust intro is a 2-col grid (H2 left, lede right). Eyebrow needs to
   sit above the grid spanning both columns, not become a third column.
   Tighten row-gap so eyebrow hugs the H2 (Matt 2026-04-22 feedback). */
.trust .intro { row-gap: 12px !important; align-items: start !important; }
.trust .intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
.trust .intro h2 { margin-top: 0 !important; padding-top: 0 !important; }

/* Testimonial head is a flex row (H2 + star rating meta). Eyebrow wraps
   to its own line above the row. Needs flex-wrap enabled on the parent.
   Override the 40px gap for the wrapped row so eyebrow hugs the H2. */
.testimonial .head { flex-wrap: wrap; row-gap: 14px; }
.testimonial .head .eyebrow {
  flex-basis: 100%;
  margin-bottom: 0;
  order: -1;
}

/* Nav scrolled pill: cleaner cream, reduce glass "dirty" look */
.nav.scrolled .bar{
  background: rgba(245,243,238,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(10,22,40,.10);
  box-shadow: 0 12px 32px rgba(10,22,40,.10), 0 2px 8px rgba(10,22,40,.05);
}

/* Why section: 72px gap felt cavernous, tighten noticeably. */
.why .grid { gap: clamp(28px, 3vw, 44px); }
/* Let the H2 and paragraphs breathe a bit wider */
.why h2.why-title { max-width: 18ch; }
.why .body p { max-width: 52ch; }

/* ============================================================
   Subpage hero (service + city + about + hubs): shorter than the
   homepage hero. Only fires on pages that tag the hero with
   data-subpage. Homepage hero stays 100vh (no attribute).
   ============================================================ */
/* Subpage hero: shorter vertical than homepage (72vh vs 100vh), but
   everything else INHERITS the homepage hero pattern which is already
   responsive. We used to override padding, H1 size, and .bottom width
   here, and those overrides are what was breaking responsiveness. */
.hero[data-subpage] {
  height: 72vh;
  min-height: 640px;
  max-height: 820px;
}
.hero[data-subpage] .scroll-hint,
.hero[data-subpage] .stamp { display: none; }

/* ============================================================
   .prose — editorial container for rendered markdown body
   Matches homepage rhythm: gold-rule H2 sections, card-style
   H3 sub-headers, review-card blockquotes, homepage-grade tables.
   ============================================================ */

.service-body, .city-body {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 !important;
  background: var(--bg-2) !important;
}

.prose {
  max-width: 1040px;
  margin: 0 auto;
  font-family: 'General Sans','Inter',sans-serif;
  color: var(--ink-2);
}

/* H2 as section heading with gold rule on the top */
.prose h2 {
  font-family: 'General Sans','Inter',sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: clamp(72px, 7vw, 112px) 0 clamp(24px, 2vw, 32px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--line-2);
  position: relative;
  max-width: 26ch;
}
.prose h2::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--gold);
}
.prose > h2:first-child,
.prose > h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.prose > h2:first-child::before,
.prose > h2:first-of-type::before {
  display: none;
}

/* Intro paragraph right after first H2 reads bigger and wider */
.prose > h2:first-of-type + p {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 64ch;
  margin-bottom: clamp(24px, 2vw, 32px);
}

/* H3 = feature card header with gold accent */
.prose h3 {
  font-family: 'General Sans','Inter',sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: clamp(40px, 4vw, 56px) 0 clamp(12px, 1.2vw, 16px);
  padding-left: 16px;
  border-left: 3px solid var(--gold);
}

.prose h4 {
  font-family: 'General Sans','Inter',sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(28px, 2.4vw, 36px) 0 8px;
}

.prose p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  margin: 0 0 clamp(16px, 1.4vw, 22px);
  color: var(--ink-2);
  max-width: 64ch;
}

/* Custom bullet styling: gold haloed dot */
.prose ul, .prose ol {
  margin: 0 0 clamp(18px, 1.6vw, 26px);
  padding-left: 0;
  list-style: none;
  max-width: 64ch;
}
.prose ul li, .prose ol li {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  margin-bottom: 12px;
  color: var(--ink-2);
  padding-left: 26px;
  position: relative;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(180,140,54,.15);
}
.prose ol {
  counter-reset: item;
}
.prose ol li {
  counter-increment: item;
}
.prose ol li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold);
}

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ease);
}
.prose a:hover { color: var(--gold); }

/* Blockquote = homepage-grade review card */
.prose blockquote {
  background: #fff;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
  margin: clamp(28px, 2.8vw, 40px) 0;
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(10,22,40,.06);
  max-width: 72ch;
}
.prose blockquote p {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: none;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.prose blockquote p:last-child {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-3);
  font-weight: 400;
  margin-bottom: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.prose blockquote strong { color: var(--ink); font-weight: 600; }

/* Table = pricing-grade grid */
.prose table {
  width: 100%;
  max-width: 860px;
  border-collapse: collapse;
  margin: clamp(24px, 2.4vw, 32px) 0;
  font-size: 14.5px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
}
.prose table th {
  text-align: left;
  font-family: 'General Sans','Inter',sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
}
.prose table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.5;
  font-size: 15px;
}
.prose table tr:last-child td { border-bottom: 0; }
.prose table tr:hover td { background: rgba(180,140,54,.03); }
.prose table strong { color: var(--ink); font-weight: 600; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: clamp(56px, 6vw, 80px) 0;
}

.prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .92em;
  background: var(--line);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 640px) {
  .prose h2 { max-width: 100%; }
  .prose blockquote { padding: 20px; }
  .prose table { font-size: 13px; }
  .prose table th, .prose table td { padding: 10px 12px; }
}

/* ============================================================
   TYPOGRAPHY NORMALIZE (matt 2026-04-22)
   Display headings on light backgrounds = weight 400 (Regular),
   which reads elegant. Dark-bg sections can carry 500 because
   high contrast makes them feel lighter already.
   ============================================================ */

/* Default: all display headings at 400 */
h1, h2, h3, h4 { font-weight: 400 !important; }
.display, .display-sm { font-weight: 400 !important; }

/* Dark-bg sections carry 500, contrast compensates */
.hero h1, .hero h2,
.services h2, .services h3,
.recent h2, .recent h3,
.testimonial h2,
.final h2, .final-title { font-weight: 500 !important; }

/* Force display H2s on light backgrounds to stay light */
.feature-card h2,
.intro-band h2,
.trust h2,
.why h2, .why-title,
.ledger h2, .ledger-head h2, .ledger-side h2,
.faq h2, .faq-title,
.area h2,
.vstep-title { font-weight: 400 !important; letter-spacing: -0.025em; }

/* Numeric stats stay heavy for hit */
.hero .stats .stat .n { font-weight: 700 !important; }
.ledger-proof .lp-num { font-weight: 500 !important; }

/* Small-label elements keep their bold */
footer h5 { font-weight: 700 !important; }
.tile-title, .tile-eyebrow { font-weight: 500 !important; }


/* ============================================================
   TWO-TONE HEADING KILLSWITCH (matt 2026-04-22)
   Strip all .dim and heading-scoped em color overrides so that
   headings render in a single color/weight. Per matt's directive
   to remove all two-color heading treatments.
   ============================================================ */
.dim { color: inherit !important; font-weight: inherit !important; font-style: inherit !important; }
.display .dim, .display-sm .dim,
.dark .display .dim, .dark .display-sm .dim,
.lede .dim,
.trust .intro h2 .dim,
.trust .intro .lede .dim,
.manifesto h2.display .dim,
.manifesto .outro .dim,
.ledger-head h2 .dim,
.ledger-intro .dim,
.why h2.why-title .dim,
.recent-title .dim,
.testimonial h2.display-sm .dim,
.area h2.display-sm .dim,
.faq h2.faq-title .dim {
  color: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
}

/* Kill the hero h1 em gold italic variant */
.hero h1 em, .hero h1.fluid-head em {
  color: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}
/* Kill the nav "em" accent */
.hero .signature, .hero .stamp, .hero .stamp-mark .mark-word {
  /* these are signature/stamp elements, not headings — leave behavior to their own rules */
}

/* ============================================================
   HERO: Split-H1 accent + constrained subpage hero
   Service pages get a shorter H1 with a smaller accent line
   below it. Hero capped at max body width on service subpages.
   ============================================================ */

/* Accent line below H1 on subpage heroes */
.hero .hero-accent {
  font-family: 'General Sans','Inter',sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--gold);
  margin-top: clamp(10px, 1vw, 14px);
  letter-spacing: -0.005em;
  max-width: 52ch;
}


}

/* ============================================================
   SERVICE HERO RESPONSIVE FIX (matt 2026-04-22)
   H1 was forced to one line via .br { white-space: nowrap } from
   base hi-fi CSS, causing overflow on smaller viewports. Plus the
   hero padding/type scale needed real breakpoints.
   ============================================================ */

/* Allow H1 text to wrap naturally on subpage heroes */
.hero[data-subpage] h1.fluid-head .br {
  white-space: normal !important;
  display: inline;
}
.hero[data-subpage] h1.fluid-head {
  white-space: normal;
  max-width: 22ch;
}

/* Narrow-viewport responsive adjustments only (inherit homepage type otherwise) */
@media (max-width: 900px) {
  .hero[data-subpage] .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero[data-subpage] .hero-ctas .btn {
    justify-content: center;
    text-align: center;
  }
  .hero[data-subpage] .stats {
    grid-template-columns: repeat(3, auto);
    gap: 0 clamp(20px, 4vw, 40px);
    max-width: 100%;
  }
  .hero[data-subpage] .stats .stat .n {
    font-size: clamp(20px, 4vw, 26px);
  }
}


/* Also apply the nowrap fix to city + other subpage heroes */
.hero[data-subpage="city"] h1.fluid-head,
.hero[data-subpage="about"] h1.fluid-head,
.hero[data-subpage="gallery"] h1.fluid-head,
.hero[data-subpage="services-hub"] h1.fluid-head,
.hero[data-subpage="service-area-hub"] h1.fluid-head {
  white-space: normal;
  max-width: 24ch;
}

/* ============================================================
   NAV ACTIONS VISIBILITY FIX (matt 2026-04-22)
   Force nav phone + CTA visible at medium viewports.
   ============================================================ */
@media (min-width: 900px) {
  .nav .actions { display: flex !important; }
  .nav .phone { display: inline-flex !important; }
  .nav .cta { display: inline-flex !important; }
}

/* Keep nav .bar from pushing actions off screen */
.nav .bar {
  flex-wrap: nowrap;
}
.nav .actions {
  flex-shrink: 0;
}

/* At mid viewports, hide phone but keep CTA */
@media (max-width: 1099px) and (min-width: 900px) {
  .nav .phone { display: none !important; }
  .nav .pill a { font-size: 13px; padding: 8px 10px; }
}

/* ============================================================
   SERVICE HERO: content width + stats responsive (matt 2026-04-22)
   FIX 1: text was only taking ~25% of the hero on wide monitors
          because .bottom had max-width: 920px inherited from
          homepage. Subpage heroes need wider content to fill
          the non-cinematic photo.
   FIX 2: stats were going vertical and overflowing the hero box
          on smaller monitors. Force horizontal 3-col layout and
          scale down the numeric size at mid-small viewports.
   ============================================================ */

/* Widen subpage hero content container */
.hero[data-subpage] .bottom {
  max-width: 1240px;
  width: 100%;
}

/* Bigger H1 + accent on subpage heroes so content reads as lead, not caption */
.hero[data-subpage] h1.fluid-head {
  font-size: clamp(40px, 5.2vw, 84px);
  max-width: 18ch;
  line-height: .98;
}
.hero[data-subpage] .hero-accent {
  font-size: clamp(20px, 1.8vw, 28px);
  margin-top: clamp(12px, 1.2vw, 18px);
  max-width: 44ch;
}

/* Sub-copy on the right column reads wider */
.hero[data-subpage] .hero-sub {
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 17.5px);
}

/* Stats: always horizontal 3-col, scaled down on narrow viewports */
.hero[data-subpage] .stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 clamp(32px, 5vw, 72px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 4px;
  width: 100%;
  max-width: 640px;
}

@media (max-width: 980px) {
  .hero[data-subpage] .stats {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    gap: 0 16px;
  }
  .hero[data-subpage] .stats .stat .n {
    font-size: clamp(20px, 4.2vw, 26px);
  }
  .hero[data-subpage] .stats .stat .l {
    font-size: 9.5px;
    letter-spacing: .12em;
  }
  .hero[data-subpage] h1.fluid-head {
    font-size: clamp(32px, 6vw, 48px);
    max-width: 100%;
  }
  .hero[data-subpage] .hero-accent {
    font-size: clamp(16px, 3vw, 20px);
  }
}

@media (max-width: 640px) {
  .hero[data-subpage] .stats .stat .n {
    font-size: 18px;
  }
  .hero[data-subpage] .stats .stat .l {
    font-size: 8.5px;
  }
  .hero[data-subpage] h1.fluid-head {
    font-size: 28px;
  }
}

/* Ensure the .content grid doesn't clip stats vertically */
.hero[data-subpage] .content {
  grid-template-rows: auto 1fr auto;
}

/* ============================================================
   HERO OVERFLOW FIX (matt 2026-04-22)
   H1 was overflowing off the right on narrower-than-desktop
   viewports because .br had display:inline + a giant font size.
   Stats labels fell below the fold because hero min-height
   was too short for the content stack.
   ============================================================ */

/* Force H1 text to wrap, cap size reasonably so it never runs off */
.hero[data-subpage] h1.fluid-head {
  font-size: clamp(34px, 3.6vw, 60px) !important;
  max-width: 100% !important;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1;
}
/* Each .br span renders as its own line (explicit split via | delimiter
   in h1 prop) but content inside a span still wraps if needed. */
.hero[data-subpage] h1.fluid-head .br {
  display: block !important;
  white-space: normal !important;
}

/* Lift the min-height so content including stat labels always fits.
   Let content flow naturally (position:relative) so hero grows to fit a
   2-line H1 without overflow:hidden chopping the stat labels off. */
.hero[data-subpage] {
  min-height: 720px;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: clamp(48px, 6vh, 72px);
}

/* Content flows naturally (not absolutely pinned). Photo-stage + vignette
   stay absolute and will resize to the hero's grown height via inset. */
.hero[data-subpage] .content {
  position: relative;
  inset: auto;
  width: auto;
  padding-top: clamp(108px, 14vh, 140px);
  padding-bottom: clamp(48px, 6vh, 72px);
  min-height: calc(720px - 40px);
}

/* Ensure the photo-stage covers the now-taller hero */
.hero[data-subpage] .photo-stage,
.hero[data-subpage]::after {
  inset: var(--hero-inset, 20px);
  height: auto;
}

/* Accent line smaller so it does not dominate the split H1 */
.hero[data-subpage] .hero-accent {
  font-size: clamp(17px, 1.4vw, 22px);
  margin-top: 10px;
}

/* Shrink stats labels on narrow viewports so the 3-col row always fits */
.hero[data-subpage] .stats .stat .l {
  font-size: 9.5px;
  letter-spacing: .14em;
  white-space: nowrap;
}

/* ============================================================
   SUBPAGE HERO LAYOUT (matt 2026-04-22 feedback)
   1. Align text to nav logo left edge (nav has left:20px + clamp(24,4vw,56)
      padding + .wrap max-width:1400px margin:auto).
   2. Add top clearance so fixed nav never clips H1 when it wraps.
   3. Keep photo-stage sized to the grown hero height.
   ============================================================ */
.hero[data-subpage] {
  --nav-edge: 20px;
  --nav-pad: clamp(24px, 4vw, 56px);
  --nav-max: 1400px;
  --hero-align: calc(var(--nav-edge) + var(--nav-pad) + max(0px, (100vw - 2 * var(--nav-edge) - 2 * var(--nav-pad) - var(--nav-max)) / 2));
}
.hero[data-subpage] .content {
  padding-left: var(--hero-align);
  padding-right: var(--hero-align);
  padding-top: clamp(160px, 18vh, 210px);
}
@media (max-width: 900px) {
  .hero[data-subpage] .content {
    padding-left: clamp(24px, 5vw, 48px);
    padding-right: clamp(24px, 5vw, 48px);
    padding-top: clamp(140px, 16vh, 180px);
  }
}

/* Prevent H1 wrap from pushing content off the vignette. Let the hero
   grow naturally and keep the photo-stage / vignette tracking its height. */
.hero[data-subpage] {
  min-height: 720px;
}
.hero[data-subpage] .photo-stage,
.hero[data-subpage]::after {
  inset: var(--hero-edge, 20px);
}