:root{
    --blue:#41607f;
    --blue-dark:#2f4a63;
    --amber:#c6892f;
    --amber-dark:#a86f1f;
    --cream:#f7f5f1;
    --char:#1e2833;
    --char-soft:#3a4855;
    --line:#e2ddd4;
    --shadow:0 18px 40px -18px rgba(30,40,51,.35);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--char);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{width:min(1180px,92vw);margin-inline:auto}
  section{padding:clamp(4rem,8vw,7rem) 0;scroll-margin-top:118px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.01em}
  .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--amber-dark)}
  .lead{font-size:1.08rem;color:var(--char-soft)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;letter-spacing:.02em;
       padding:.9rem 1.5rem;border-radius:2px;transition:transform .15s ease,background .2s ease,box-shadow .2s}
  /* icons carry no intrinsic size — unset they stretch as flex items and blow up the button */
  .btn svg{width:18px;height:18px;flex:none}
  .btn-amber{background:var(--amber);color:#fff}
  .btn-amber:hover{background:var(--amber-dark);transform:translateY(-2px);box-shadow:var(--shadow)}
  .btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff}
  .btn-ghost:hover{background:#fff;color:var(--char)}

  /* NAV */
  header{position:fixed;inset:0 0 auto 0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
         transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
  header.solid{box-shadow:0 10px 30px -16px rgba(30,40,51,.4)}
  header .wrap{width:min(1440px,95vw)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.9rem 0}
  .brand{display:flex;align-items:center;flex:none}
  /* header height stays fixed on scroll — .solid changes colour only, never size */
  .brand .logo{height:56px;width:auto;flex:none}
  .logo-light{display:none}   /* white+blue mark shown only over the hero */
  .menu{display:flex;align-items:center;gap:1.6rem;list-style:none;flex-wrap:nowrap}
  .menu a{color:var(--char);font-size:.86rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.5rem 0;
          position:relative;white-space:nowrap}
  .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--amber);transition:width .25s ease}
  .menu a:hover{color:var(--blue)}
  .menu a:hover::after,.menu a.active::after{width:100%}
  /* services dropdown */
  .has-sub{position:relative}
  .has-sub>a{display:inline-flex;align-items:center;gap:.35rem}
  .has-sub>a::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}  /* hover bridge */
  .caret{width:9px;height:9px;flex:none;transition:transform .25s ease}
  .has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
  .submenu{position:absolute;top:calc(100% + 14px);left:-1rem;min-width:255px;list-style:none;
           background:#fff;border:1px solid var(--line);border-top:3px solid var(--amber);
           box-shadow:0 18px 40px -18px rgba(30,40,51,.45);padding:.45rem 0;
           opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
  .has-sub:hover>.submenu,.has-sub:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
  .submenu li{display:block}
  .submenu a{display:block;padding:.62rem 1.2rem;font-size:.78rem;letter-spacing:.06em;white-space:nowrap;color:var(--char-soft)}
  .submenu a::after{display:none}
  .submenu a:hover{background:var(--cream);color:var(--blue-dark)}
  .submenu a.active{color:var(--amber-dark)}

  .nav-cta{display:flex;align-items:center;gap:1rem;flex:none}
  .socials{display:flex;align-items:center;gap:.5rem}
  .socials a{width:34px;height:34px;border-radius:50%;background:var(--char);color:#fff;
             display:grid;place-items:center;transition:background .2s,transform .15s}
  .socials a svg{width:19px;height:19px;fill:currentColor}
  .socials a:hover{background:var(--amber);transform:translateY(-2px)}
  .socials a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .menu .socials{display:none}
  /* transparent nav while at the top of a page that has a full hero (homepage) */
  body:has(.hero) header:not(.solid){background:transparent;border-bottom-color:transparent;box-shadow:none}
  body:has(.hero) header:not(.solid) .menu a{color:#fff}
  body:has(.hero) header:not(.solid) .menu a:hover{color:#e7c987}
  /* the dropdown panel is white, so keep its links dark even over the hero */
  body:has(.hero) header:not(.solid) .submenu a{color:var(--char-soft)}
  body:has(.hero) header:not(.solid) .submenu a:hover{color:var(--blue-dark)}
  body:has(.hero) header:not(.solid) .socials a{background:rgba(255,255,255,.18)}
  body:has(.hero) header:not(.solid) .socials a:hover{background:var(--amber)}
  body:has(.hero) header:not(.solid) .burger span{background:#fff}
  body:has(.hero) header:not(.solid) .logo-dark{display:none}
  body:has(.hero) header:not(.solid) .logo-light{display:block}
  /* keep the open mobile drawer (white panel) legible even while the bar is transparent */
  body:has(.hero) header:not(.solid) .menu.open a{color:var(--char)}
  body:has(.hero) header:not(.solid) .menu.open a:hover{color:var(--blue)}
  body:has(.hero) header:not(.solid) .menu.open .socials a{background:var(--char)}
  .call-pill{background:var(--amber);color:#fff;font-weight:700;font-size:.95rem;padding:.72rem 1.25rem;border-radius:3px;
             display:flex;align-items:center;gap:.4rem;white-space:nowrap;flex:none;line-height:1;
             transition:background .2s,transform .15s}
  .call-pill .n{font-size:.95rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .call-pill:hover{background:var(--amber-dark);transform:translateY(-2px)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
  .burger span{width:26px;height:2px;background:var(--char);transition:.3s}

  /* HERO */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
  .hero-slides{position:absolute;inset:0}
  .hero-slides .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8);
                      opacity:0;transition:opacity 2s ease-in-out;will-change:opacity,transform}
  .hero-slides .slide.is-active{opacity:1;animation:kenburns 9s ease-out forwards}
  .hero-slides .slide:nth-child(even).is-active{animation-name:kenburns-alt}
  @keyframes kenburns{
    from{transform:scale(1) translate(0,0)}
    to{transform:scale(1.09) translate(-1.5%,-1%)}
  }
  @keyframes kenburns-alt{
    from{transform:scale(1) translate(0,0)}
    to{transform:scale(1.09) translate(1.5%,1%)}
  }
  .hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,36,.72),rgba(20,28,36,.35) 45%,rgba(20,28,36,.78))}
  .hero .inner{position:relative;max-width:800px;padding-top:6rem}
  .hero h1{font-size:clamp(2.75rem,6.6vw,5.2rem);text-shadow:0 2px 30px rgba(0,0,0,.4)}
  .hero p{margin:1.4rem 0 2.2rem;font-size:clamp(1.15rem,2.35vw,1.56rem);max-width:29em;color:#eef1f4}
  .hero .actions{display:flex;gap:1rem;flex-wrap:wrap;max-width:38em}
  .hero .actions .btn{flex:1 1 240px;justify-content:center;font-size:1.18rem;padding:1.2rem 2.1rem;white-space:nowrap}
  /* Hero ghost button is solid white at rest, not an outline -- Trevor 2026-09-13.
     Hover keeps it white and just lifts, matching .btn-amber's hover. */
  .hero .actions .btn-ghost{background:#fff;border-color:#fff;color:var(--char)}
  .hero .actions .btn-ghost:hover{background:#fff;color:var(--char);transform:translateY(-2px);box-shadow:var(--shadow)}
  /* service-page hero: full-screen, same as the homepage hero */
  .svc-hero{min-height:100vh}
  /* On phones the service and homepage heroes stop short of the screen height, so the first screen ends on the trust
     banner's three stats (3rd / 100+ / 100+) and the HBA badge, with the Google badge below the
     fold. 205px = the banner's top padding, the stats row and the HBA badge. svh ignores the
     mobile URL bar. */
  @media(max-width:640px){
    .svc-hero,.home-hero{min-height:calc(100vh - 205px);min-height:calc(100svh - 205px);padding:calc(70px + 2rem) 0 2rem}
    .svc-hero .inner,.home-hero .inner{padding-top:0}
  }
  /* homepage hero: the headline is far longer than the one-or-two-word service
     titles, so it gets a wider column and a smaller cap — that keeps it to two
     lines instead of three and stops the CTAs from sinking to the fold. */
  .home-hero .inner{max-width:1040px;padding-top:3.5rem}
  .home-hero h1{font-size:clamp(2.5rem,5.1vw,4.25rem)}
  .home-hero p{max-width:38em}
  /* phones: the homepage copy is longer than a service title, so tighten it to keep the stats
     and HBA badge on the first screen (see the phone hero rule above) */
  @media(max-width:640px){
    .home-hero .inner{padding-top:0}
    .home-hero .eyebrow{margin-bottom:.8rem}
    .home-hero p{margin:1rem 0 1.5rem}
    .home-hero .actions{gap:.75rem}
    .home-hero .actions .btn{padding:1rem 1.6rem;font-size:1.08rem}
  }
  .hero .eyebrow{color:#e7c987;margin-bottom:1.1rem}
  /* Hero + page-header eyebrows run larger than the .72rem body-section kickers;
     tracking eases off slightly since bigger uppercase needs less. */
  .hero .eyebrow,.page-head .eyebrow,.gal-head .eyebrow{font-size:clamp(.82rem,1vw,.94rem);letter-spacing:.2em}
  @media (prefers-reduced-motion: reduce){
    .hero-slides .slide{transition:none;animation:none!important}
    .hero-slides .slide:first-child{opacity:1}
    .hero-slides .slide:not(:first-child){opacity:0}
  }

  /* QUICK CONTACT BAR */
  .qbar{background:var(--blue-dark);color:#fff;padding:clamp(1.6rem,3vw,2.2rem) 0}
  .qbar .row{display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
  .qbar h2{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;color:#fff}
  .qbar .tel{display:inline-flex;align-items:center;gap:.7rem;margin-top:1rem;font-weight:700;font-size:1.15rem;color:#fff}
  .qbar .tel .ico{width:34px;height:34px;flex:none;display:grid;place-items:center;background:#fff;border-radius:5px;color:var(--blue-dark)}
  .qbar .tel .ico svg{width:18px;height:18px}
  .qbar .tel:hover{color:var(--amber)}
  .qform{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
  .qform input,.qform select{width:100%;padding:.85rem .9rem;border:1px solid #fff;border-radius:3px;
                             background:#fff;color:var(--char);font:inherit;font-size:.92rem}
  .qform input::placeholder{color:#8b95a0}
  .qform input:focus,.qform select:focus{outline:3px solid var(--amber);outline-offset:1px}
  .qform .sub{grid-column:1/-1;background:var(--amber);color:#fff;border:0;border-radius:3px;padding:.9rem;
              font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:background .2s}
  .qform .sub:hover{background:var(--amber-dark)}

  /* WHY */
  .why{background:#fff}
  .why .row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
  .why .art{position:relative;padding:0 0 6rem 0}
  .why .art .main{width:88%;aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow)}
  .why .art .inset{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:3/4;object-fit:cover;
                   border:8px solid #fff;box-shadow:var(--shadow)}
  .why h2{font-size:clamp(2rem,4vw,2.9rem);margin:.7rem 0 1.3rem}
  .why h2 .hl{color:var(--amber)}
  .why .lead{max-width:52ch}
  .why .lead em{font-style:italic}
  .why hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
  .rev{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
  .rev .score{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--char)}
  .rev .count{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:var(--char-soft);margin-bottom:.35rem}
  .rev .stars{color:var(--amber);letter-spacing:.15em;font-size:1.05rem}
  .rev .faces{display:flex}
  .rev .faces span{width:38px;height:38px;border-radius:50%;border:2px solid #fff;margin-left:-10px;
                   background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700}
  .rev .faces span:first-child{margin-left:0}
  .rev .read{color:var(--amber-dark);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
             border-bottom:1.5px solid currentColor;padding-bottom:2px}
  .rev .read:hover{color:var(--blue)}
  .why .btn-amber{margin-top:2.2rem}

  /* TOUR */
  .tour{background:#fff;overflow:hidden}
  .tour .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
  .tour-launch{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;cursor:pointer;
               background:none;overflow:hidden;color:#fff}
  .tour-launch img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9);transition:transform .6s ease,filter .4s}
  .tour-launch:hover img{transform:scale(1.04);filter:brightness(.7) saturate(1)}
  .tour-launch .frame{position:absolute;inset:11%;border:1px solid rgba(198,137,47,.85);pointer-events:none;transition:inset .4s ease}
  .tour-launch:hover .frame{inset:8%}
  .tour-launch .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
                     background:#fff;display:grid;place-items:center;transition:transform .25s ease,background .25s}
  .tour-launch .play svg{width:24px;height:24px;margin-left:4px;fill:var(--char)}
  .tour-launch:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--amber)}
  .tour-launch:hover .play svg{fill:#fff}
  .tour-launch .cap{position:absolute;left:0;right:0;top:calc(50% + 62px);text-align:center;
                    text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;line-height:1.9;
                    text-shadow:0 2px 18px rgba(0,0,0,.6)}
  .tour-launch .cap strong{display:block;font-size:.95rem;letter-spacing:.2em}
  .tour-launch:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
  .tour .copy{position:relative}
  .tour h2{position:relative;font-style:italic;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.22}
  .tour .rule{display:block;height:1px;background:var(--amber);margin:1.6rem 0 1.8rem;max-width:520px}
  .tour .copy p{position:relative;color:var(--char-soft);max-width:52ch}
  .tour .acts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem;max-width:560px}
  .tbtn{display:flex;align-items:center;justify-content:center;gap:.7rem;background:var(--char);color:#fff;
        padding:1rem .9rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
        transition:transform .15s}
  .tbtn svg{width:17px;height:17px;flex:none}
  /* hover lifts only — each button keeps its own colour at every state */
  .tbtn:hover{transform:translateY(-2px)}
  .tbtn-amber{background:var(--amber)}

  /* tour carousel (arrows flanking the panel) */
  .tour-car{position:relative;display:flex;align-items:center;gap:.7rem}
  .tour-car .arw{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
                 color:var(--char);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .15s}
  .tour-car .arw svg{width:18px;height:18px}
  .tour-car .arw:hover{background:var(--amber);border-color:var(--amber);color:#fff;transform:scale(1.07)}
  .tour-car .arw:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
  .tour-car .tour-launch{flex:1;min-width:0}
  .tour-launch video{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9);
                     transition:transform .6s ease,filter .4s;display:block}
  .tour-launch:hover video{transform:scale(1.04);filter:brightness(.7) saturate(1)}
  .tour-dots{display:flex;justify-content:center;gap:.45rem;margin-top:1.1rem}
  .tour-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s,transform .2s}
  .tour-dots button[aria-current="true"]{background:var(--amber);transform:scale(1.35)}

  .tour-alt h2{font-style:normal;font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;margin:.7rem 0 1.3rem}
  .tour-alt h2 .hl{color:var(--amber)}
  .tour-alt .copy p{color:var(--char-soft)}
  .tour-alt .copy p em{font-style:italic}
  .tour-alt hr{position:relative;border:0;border-top:1px solid var(--line);margin:2.2rem 0}
  .tour-alt .rev{position:relative}
  .tour-alt .btn-amber{position:relative;margin-top:2.2rem}

  /* LIGHTBOX */
  .lbox{position:fixed;inset:0;z-index:200;background:rgba(12,17,23,.94);display:grid;place-items:center;padding:3.5rem 1rem}
  .lbox[hidden]{display:none}
  .lbox img{max-width:min(1200px,94vw);max-height:82vh;object-fit:contain;box-shadow:0 30px 80px -30px #000}
  .lbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
               display:grid;place-items:center;transition:background .2s}
  .lbox button:hover{background:var(--amber)}
  .lbox .lclose{top:1.1rem;right:1.1rem;width:46px;height:46px;font-size:1.7rem;line-height:1;border-radius:50%}
  .lbox .lprev,.lbox .lnext{top:50%;transform:translateY(-50%);width:52px;height:76px;font-size:2rem;line-height:1}
  .lbox .lprev{left:1rem}.lbox .lnext{right:1rem}
  .lbox .lcount{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:#cfd6dd;
                font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
  .lbox .lcap{position:absolute;top:1.4rem;left:1.4rem;color:#cfd6dd;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}

  /* SERVICES */
  .sec-head{max-width:640px;margin-bottom:3rem}
  .sec-head h2{font-size:clamp(2rem,4vw,2.9rem);margin:.6rem 0 1rem}
  .see-all{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;
           font-weight:700;font-size:.86rem;letter-spacing:.02em;color:var(--blue-dark);
           border-bottom:2px solid var(--amber);padding-bottom:.2rem;transition:color .2s,gap .2s}
  .see-all:hover{color:var(--amber-dark);gap:.8rem}
  .see-all svg{width:16px;height:16px}
  .process .see-all{color:#fff}
  .process .see-all:hover{color:var(--amber)}
  .cta-strip .see-all{color:#fff;margin-top:1.6rem}
  .cta-strip .see-all:hover{color:var(--amber)}
  .grid{display:grid;gap:1.2rem}
  .services .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2rem 1.7rem;transition:transform .2s,box-shadow .2s}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .card .ic{width:44px;height:44px;color:var(--blue);margin-bottom:1rem}
  .card h3{font-size:1.28rem;margin-bottom:.5rem}
  .card p{font-size:.95rem;color:var(--char-soft)}

  /* ABOUT */
  .about .row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .about .ph{border-radius:8px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
  .about .ph img{width:100%;height:100%;object-fit:cover}
  .about h2{font-size:clamp(2rem,4vw,2.9rem);margin:.6rem 0 1.2rem}
  .about p+p{margin-top:1rem}
  .vals{display:flex;gap:1.6rem;margin-top:1.8rem;flex-wrap:wrap}
  .vals div{font-weight:700;color:var(--blue-dark)}
  .vals span{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--amber)}

  /* PROCESS */
  .process{background:var(--char);color:#fff}
  .process .sec-head h2{color:#fff}
  .process .eyebrow{color:#e7c987}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;counter-reset:s}
  .step{padding:2rem 1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.03)}
  .step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:2.4rem;color:var(--amber);display:block;margin-bottom:.6rem}
  .step-ic{width:74px;height:74px;object-fit:contain;display:block;margin-bottom:1.1rem}
  .step:has(.step-ic)::before{display:none}   /* icon replaces the number when present */
  .step h3{font-size:1.25rem;margin-bottom:.4rem}
  .step p{color:#c4ccd4;font-size:.92rem}

  /* PROJECTS */
  .projects{background:var(--cream)}
  .projects .grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.6rem}
  .pcard{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
         transition:transform .2s,box-shadow .2s}
  .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .pcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
  .pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .pcard:hover .ph img{transform:scale(1.05)}
  .pcard .tag{position:absolute;top:.9rem;left:.9rem;background:rgba(20,28,36,.82);color:#fff;
              font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;border-radius:2px}
  .pcard .tag.wip{background:var(--amber)}
  .pcard .body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
  .pcard h3{font-size:1.3rem;margin-bottom:.2rem}
  .pcard .type{font-size:.86rem;color:var(--char-soft)}
  .pcard .meta{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.4rem;font-size:.87rem;color:var(--char-soft)}
  .pcard .meta li{display:flex;align-items:center;gap:.55rem}
  .pcard .meta svg{width:15px;height:15px;flex:none;color:var(--blue)}
  .pcard .price{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;align-items:baseline;
                justify-content:space-between;gap:.6rem}
  .pcard .price .lbl{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char-soft)}
  .pcard .price .amt{font-family:var(--serif);font-size:1.45rem;color:var(--blue-dark)}
  .pcard.cta{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
  .pcard.cta:hover{box-shadow:var(--shadow)}
  .pcard.cta .body{justify-content:center;padding:2.2rem 1.6rem}
  .pcard.cta .eyebrow{color:#e7c987;margin-bottom:.7rem}
  .pcard.cta h3{font-size:1.65rem;margin-bottom:.8rem}
  .pcard.cta p{font-size:.93rem;color:#d5dde4}
  .pcard.cta .acts{margin-top:1.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
  .pcard.cta .tel{font-size:.88rem;font-weight:700;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.45);padding-bottom:2px}
  .pcard.cta .tel:hover{color:var(--amber)}

  /* collapsed state — extra projects hidden, CTA stretched across the bottom row */
  .projects .grid.is-collapsed .pcard.extra{display:none}
  .projects .grid.is-collapsed .pcard.cta{grid-column:1/-1}
  .projects .grid.is-collapsed .pcard.cta .body{max-width:820px;margin-inline:auto;text-align:center;padding:2.6rem 1.6rem}
  .projects .grid.is-collapsed .pcard.cta .acts{flex-direction:row;align-items:center;justify-content:center;gap:1.6rem}
  .grid-more{display:flex;justify-content:center;margin-top:2.4rem}
  .more-btn{display:inline-flex;align-items:center;gap:.55rem;background:none;border:1.5px solid var(--line);
            border-radius:2px;padding:.85rem 1.7rem;font:inherit;font-weight:700;font-size:.86rem;
            letter-spacing:.06em;text-transform:uppercase;color:var(--blue-dark);cursor:pointer;
            transition:border-color .2s,color .2s,background .2s}
  .more-btn:hover{border-color:var(--amber);color:var(--amber-dark);background:#fff}
  .more-btn svg{width:16px;height:16px;transition:transform .25s ease}
  .more-btn.is-open svg{transform:rotate(180deg)}
  @media(max-width:560px){
    .projects .grid.is-collapsed .pcard.cta .acts{flex-direction:column;gap:.9rem}
  }

  /* PLACEHOLDER LIVE CHAT */
  .chat-fab{position:fixed;right:24px;bottom:24px;z-index:120;width:60px;height:60px;border-radius:50%;
            background:var(--amber);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
            box-shadow:0 14px 32px -8px rgba(30,40,51,.55);transition:transform .2s,background .2s}
  .chat-fab:hover{background:var(--amber-dark);transform:translateY(-3px)}
  .chat-fab svg{width:28px;height:28px}
  .chat-fab .ic-close{display:none}
  .chat-fab.open .ic-chat{display:none}
  .chat-fab.open .ic-close{display:block}
  .chat-badge{position:absolute;top:-2px;right:-2px;width:19px;height:19px;border-radius:50%;
              background:#d9534f;color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
  .chat-panel{position:fixed;right:24px;bottom:98px;z-index:120;width:min(360px,calc(100vw - 32px));
              background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
              max-height:min(560px,calc(100vh - 130px));box-shadow:0 34px 66px -20px rgba(30,40,51,.55);
              opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  .chat-panel.open{opacity:1;transform:none;pointer-events:auto}
  .chat-head{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;
             padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.8rem}
  .chat-head .avatar{width:44px;height:44px;border-radius:50%;background:#fff;
                     display:grid;place-items:center;flex:none;box-shadow:0 2px 8px -2px rgba(0,0,0,.3)}
  .chat-head .avatar img{width:30px;height:30px;object-fit:contain;display:block}
  .chat-head .who{flex:1;min-width:0}
  .chat-head .who strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.02rem}
  .chat-head .who span{font-size:.75rem;color:#dbe4ec;display:flex;align-items:center;gap:.4rem}
  .chat-head .dot{width:8px;height:8px;border-radius:50%;background:#5cd08a;display:inline-block;flex:none}
  .chat-body{padding:1.1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;background:var(--cream);flex:1}
  .chat-msg{max-width:82%;padding:.65rem .85rem;border-radius:12px;font-size:.9rem;line-height:1.45}
  .chat-msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start;color:var(--char)}
  .chat-msg.me{background:var(--blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
  .chat-quick{display:flex;flex-wrap:wrap;gap:.5rem}
  .chat-quick a{font-size:.79rem;font-weight:700;color:var(--amber-dark);border:1px solid var(--line);
                background:#fff;border-radius:20px;padding:.4rem .8rem;transition:border-color .2s,color .2s}
  .chat-quick a:hover{border-color:var(--amber);color:var(--amber-dark)}
  .chat-foot{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--line);background:#fff}
  .chat-foot input{flex:1;min-width:0;border:1px solid var(--line);border-radius:22px;padding:.6rem .9rem;font:inherit;font-size:.9rem;outline:none;transition:border-color .2s}
  .chat-foot input:focus{border-color:var(--amber)}
  .chat-foot button{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--amber);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
  .chat-foot button:hover{background:var(--amber-dark)}
  .chat-foot button svg{width:19px;height:19px}
  .chat-note{font-size:.68rem;text-align:center;color:var(--char-soft);padding:.35rem 1rem .7rem;background:#fff}
  @media(max-width:480px){.chat-fab{right:16px;bottom:16px}.chat-panel{right:16px;bottom:84px}}

  /* WHAT WE BUILD — image service cards (3 across) */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem}
  .svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;
            overflow:hidden;box-shadow:0 14px 32px -24px rgba(30,40,51,.45);
            transition:transform .2s ease,box-shadow .2s ease}
  .svc-card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -26px rgba(30,40,51,.55)}
  .svc-card-img{aspect-ratio:16/10;overflow:hidden;background:#e7e2d9}
  .svc-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
  .svc-card:hover .svc-card-img img{transform:scale(1.05)}
  .svc-card-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
  .svc-card-body h3{font-size:1.4rem;margin-bottom:.5rem}
  .svc-card-body p{font-size:.95rem;color:var(--char-soft);margin-bottom:1.2rem}
  .svc-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
                 font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-dark);
                 transition:gap .2s ease}
  .svc-card:hover .svc-card-link{gap:.75rem}
  .svc-card-link svg{width:16px;height:16px}
  /* CTA cards that fill the empty grid cells */
  .svc-card.cta{justify-content:center;text-align:center;padding:2.3rem 1.7rem}
  .svc-card.cta .eyebrow{margin-bottom:.55rem}
  .svc-card.cta h3{font-size:1.45rem;margin-bottom:.55rem}
  .svc-card.cta p{font-size:.93rem;margin:0 auto 1.3rem;max-width:26ch}
  .svc-card.cta .btn{align-self:center}
  .cta-blue{background:linear-gradient(150deg,var(--blue),var(--blue-dark));border-color:var(--blue-dark)}
  .cta-blue h3{color:#fff}
  .cta-blue .eyebrow{color:#e7c987}
  .cta-blue p{color:#dbe4ec}
  .cta-amber{background:linear-gradient(150deg,var(--amber),var(--amber-dark));border-color:var(--amber-dark)}
  .cta-amber h3{color:#fff}
  .cta-amber .eyebrow{color:#fff}
  .cta-amber p{color:#fdf1dd}
  /* solid white at rest, not only on hover — the amber card gives it the contrast */
  .cta-amber .btn-ghost{background:#fff;border-color:#fff;color:var(--amber-dark)}
  .cta-amber .btn-ghost:hover{background:#fff;color:var(--amber-dark);transform:translateY(-2px);
                              box-shadow:var(--shadow)}
  @media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

  /* SERVICE AREA / MAP PACK */
  .areas{position:relative;overflow:hidden;background:var(--blue-dark);color:#fff}
  .areas-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.85)}
  .areas-veil{position:absolute;inset:0;background:linear-gradient(160deg,rgba(47,74,99,.82),rgba(20,28,36,.93))}
  .areas .wrap{position:relative;z-index:1}
  .areas .sec-head h2{color:#fff}
  .areas .eyebrow{color:#e7c987}
  .areas .lead{color:#dbe4ec}
  .areas-row{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:start;margin-top:2.8rem}
  .areas-map{display:flex;flex-direction:column;gap:1rem}
  .areas-map iframe{width:100%;height:430px;border:0;border-radius:10px;background:#e7e2d9;
                    box-shadow:0 26px 54px -26px rgba(0,0,0,.65)}
  .areas-based{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.06);
               border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:1rem 1.2rem}
  .based-dot{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
             background:rgba(198,137,47,.16);color:var(--amber)}
  .based-dot svg{width:22px;height:22px}
  .areas-based strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.06rem}
  .areas-based span{font-size:.86rem;color:#c4d0da}
  .areas-towns h3{font-family:var(--serif);font-weight:600;font-size:1.45rem;margin-bottom:1.2rem}
  .town-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
  .town{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:.7rem .8rem;
        font-size:.85rem;font-weight:600;line-height:1.2;transition:border-color .2s,background .2s}
  a.town{color:inherit;text-decoration:none}
  a.town:hover{border-color:var(--amber);background:rgba(198,137,47,.13)}
  /* towns with no page of their own are plain text, and the page you are on is marked, not linked */
  .town.is-current{border-color:var(--amber);background:rgba(198,137,47,.2)}
  .town .pin{width:15px;height:15px;flex:none;color:var(--amber)}
  .areas-cta{margin-top:1.7rem}
  @media(max-width:860px){
    .areas-row{grid-template-columns:1fr}
    .town-grid{grid-template-columns:repeat(3,1fr)}
    .areas-map iframe{height:340px}
  }
  /* full-bleed on phones — as an inline-flex .btn it sits half-width and wraps the label */
  @media(max-width:560px){.areas-cta{display:flex;width:100%;justify-content:center}}
  @media(max-width:480px){.town-grid{grid-template-columns:repeat(2,1fr)}}

  /* PROJECT SHOWCASE (homepage "Our Work") */
  .showcase{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;
            overflow:hidden;box-shadow:0 34px 66px -34px rgba(30,40,51,.45);height:clamp(480px,44vw,560px)}
  .work-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr .9fr;
              opacity:0;transform:scale(1.015);pointer-events:none;
              transition:opacity .6s ease,transform .6s ease}
  .work-slide.is-active{opacity:1;transform:none;pointer-events:auto;z-index:2}
  .work-slide .ph{position:relative;overflow:hidden;background:#e7e2d9}
  .work-slide .ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 6s ease-out}
  .work-slide.is-active .ph img{transform:scale(1)}
  .work-slide .tag{position:absolute;top:1.1rem;left:1.1rem;background:rgba(20,28,36,.82);color:#fff;
                   font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .75rem;border-radius:3px}
  .work-slide .tag.wip{background:var(--amber)}
  .work-slide .info{padding:clamp(1.8rem,3.6vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
  .work-slide .info .eyebrow{margin-bottom:.7rem}
  .work-slide .info h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,2.7vw,2.3rem);line-height:1.1;margin-bottom:.4rem}
  .work-slide .info .type{font-size:1.02rem;color:var(--char-soft);margin-bottom:1.7rem}
  .work-slide .info .meta{list-style:none;padding:0;margin:0 0 1.7rem;display:grid;gap:.75rem;font-size:.96rem;color:var(--char-soft)}
  .work-slide .info .meta li{display:flex;align-items:center;gap:.65rem}
  .work-slide .info .meta svg{width:18px;height:18px;color:var(--blue);flex:none}
  .work-slide .info .price{padding-top:1.5rem;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between}
  .work-slide .info .price .lbl{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char-soft)}
  .work-slide .info .price .amt{font-family:var(--serif);font-size:1.8rem;color:var(--blue-dark)}
  .work-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.7rem}
  .work-nav .count{font-family:var(--serif);font-size:1.15rem;color:var(--char);min-width:70px;text-align:center}
  .sbtn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
        display:grid;place-items:center;color:var(--blue-dark);transition:border-color .2s,color .2s,transform .15s}
  .sbtn:hover{border-color:var(--amber);color:var(--amber-dark);transform:translateY(-2px)}
  .sbtn svg{width:20px;height:20px}
  @media(max-width:760px){
    .showcase{height:auto}
    .work-slide{position:relative;display:none;grid-template-columns:1fr}
    .work-slide.is-active{display:grid}
    .work-slide .ph{aspect-ratio:4/3}
  }
  @media(prefers-reduced-motion:reduce){.work-slide,.work-slide .ph img{transition:none}}

  /* GALLERY PAGE */
  .gal-page{padding:clamp(7.5rem,12vw,9.5rem) 0 clamp(4rem,8vw,6rem)}
  .gal-head{max-width:770px;margin:0 auto 2.6rem;text-align:center}
  .gal-head h1{font-family:var(--serif);font-style:italic;font-weight:600;
               font-size:clamp(2.25rem,5.3vw,3.75rem);letter-spacing:-.01em;margin:.55rem 0 1.1rem}
  .gal-head .rule{width:54px;height:1px;background:var(--amber);margin:0 auto 1.35rem}
  .gal-head p{color:var(--char-soft);font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.75}
  .gal-filter{max-width:940px;margin:0 auto 2.8rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
  .gal-filter .flabel{width:100%;text-align:center;text-transform:uppercase;letter-spacing:.16em;
                      font-size:.72rem;font-weight:700;color:var(--char-soft);margin-bottom:.55rem}
  .fbtn{font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--char);background:#fff;
        border:1px solid var(--line);border-radius:3px;padding:.6rem 1.15rem;cursor:pointer;
        transition:background .18s,color .18s,border-color .18s}
  .fbtn:hover{border-color:var(--amber);color:var(--amber-dark)}
  .fbtn.is-active{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
  .fbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .masonry{column-count:3;column-gap:1.1rem;max-width:1180px;margin:0 auto}
  .gitem{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 1.1rem;display:block;position:relative;
         border-radius:6px;overflow:hidden;background:#e7e2d9;box-shadow:0 12px 28px -22px rgba(30,40,51,.55)}
  .gitem img{width:100%;height:auto;display:block;transition:transform .5s ease}
  .gitem:hover img{transform:scale(1.045)}
  .gitem .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .95rem .75rem;
              background:linear-gradient(transparent,rgba(20,28,36,.75));color:#fff;
              font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
              opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
  .gitem:hover .cap{opacity:1;transform:none}
  .gitem[hidden]{display:none}
  .gal-empty{text-align:center;color:var(--char-soft);padding:3.5rem 0;font-size:1rem}
  @media(max-width:900px){.masonry{column-count:2}}
  @media(max-width:560px){.masonry{column-count:1}}
  /* lightbox */
  .lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(15,20,26,.93);padding:4vh 4vw}
  .lightbox[hidden]{display:none}
  .lb-img{max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
  .lb-cap{position:absolute;bottom:2.2vh;left:0;right:0;text-align:center;color:#eef1f4;
          font-size:.85rem;letter-spacing:.03em;padding:0 1.2rem}
  .lb-close{position:absolute;top:2vh;right:3vw;background:none;border:0;color:#fff;font-size:2.6rem;
            line-height:1;cursor:pointer;opacity:.85;transition:opacity .2s}
  .lb-close:hover{opacity:1}
  .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;
          font-size:2rem;width:52px;height:52px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s}
  .lb-nav:hover{background:rgba(255,255,255,.26)}
  .lb-prev{left:2vw}
  .lb-next{right:2vw}
  @media(max-width:560px){.lb-nav{display:none}}

  /* INSPIRATION GALLERY */
  .gallery{background:var(--cream)}
  .sec-head.center{max-width:720px;margin-inline:auto;text-align:center}
  .gallery h2{font-size:clamp(2rem,4.4vw,3rem);text-transform:uppercase;letter-spacing:.14em}
  .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
  .gtile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;
         padding:1rem 1rem 1.1rem;box-shadow:0 10px 28px -22px rgba(30,40,51,.4);
         transition:transform .2s ease,box-shadow .2s ease}
  .gtile:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(30,40,51,.5)}
  .glabel{display:block;text-align:center;text-transform:uppercase;letter-spacing:.16em;
          font-size:.72rem;font-weight:700;color:var(--blue-dark);padding:.35rem 0 .85rem}
  .gtile:hover .glabel{color:var(--amber-dark)}
  .gimg{display:block;overflow:hidden;border-radius:3px;aspect-ratio:4/5}
  .gimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .gtile:hover .gimg img{transform:scale(1.05)}
  .gal-cta{text-align:center;margin-top:2.6rem}
  .view-gallery{display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;
                font-size:.8rem;font-weight:700;color:var(--char);padding-bottom:.35rem;
                border-bottom:1.5px solid var(--amber);transition:color .2s,border-color .2s}
  .view-gallery:hover{color:var(--amber-dark);border-color:var(--amber-dark)}
  @media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.gal-grid{grid-template-columns:1fr}}

  /* TEAM */
  .team{background:#fff}
  .team .grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:760px;margin-inline:auto}
  /* Legacy monogram cards. No page renders .member any more — index.astro moved
     to the .tcard grid — but the bare .avatar rule below still feeds the chat
     widget's avatar, so this block stays until that is untangled. */
  .member{text-align:center;padding:1rem}
  .avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 1.1rem;display:grid;place-items:center;
          background:linear-gradient(145deg,var(--blue),var(--blue-dark));color:#fff;font-family:var(--serif);font-size:2.6rem}
  .member h3{font-size:1.35rem}
  .member .role{color:var(--amber-dark);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-top:.2rem}
  .member p{color:var(--char-soft);font-size:.92rem;margin-top:.7rem}

  /* CTA STRIP + FOOTER */
  .cta-strip{background:var(--blue);color:#fff;text-align:center}
  .cta-strip h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.7rem}
  .cta-strip p{color:#dbe4ec;margin-bottom:1.8rem}
  footer{background:var(--char);color:#aeb8c1;padding:clamp(3.5rem,6vw,5rem) 0 2rem;font-size:.92rem}
  .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:2.4rem;
        padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-logo{height:52px;width:auto;display:block;margin-bottom:1.2rem}
  .foot-brand p{color:#aeb8c1;line-height:1.7;max-width:38ch;margin-bottom:1.4rem}
  .foot-socials{display:flex;gap:.6rem}
  .foot-socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
                  display:grid;place-items:center;transition:background .2s,transform .15s}
  .foot-socials a svg{width:18px;height:18px;fill:currentColor}
  .foot-socials a:hover{background:var(--amber);transform:translateY(-2px)}
  .foot h4{color:#fff;font-family:var(--serif);font-weight:600;font-size:1.14rem;margin-bottom:1rem}
  .foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
  .foot a{color:#aeb8c1;transition:color .2s}
  .foot a:hover{color:var(--amber)}
  .foot-contact{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
  .foot-phone{font-family:var(--serif);font-size:1.4rem;color:#fff}
  .foot-phone:hover{color:var(--amber)}
  .foot-area{color:#8b97a3;margin:.25rem 0 .5rem}
  .foot-cta{margin-top:.4rem}
  /* .foot a outranks .btn-amber and greys the label; its :hover would tint it amber
     on amber. Declared after those rules so the equal-specificity hover tie resolves here. */
  .foot a.foot-cta,.foot a.foot-cta:hover{color:#fff}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;
               padding-top:1.5rem;font-size:.82rem;color:#8b97a3}
  .foot-bottom .copy,.foot-credit{color:#8b97a3}
  @media(max-width:560px){
    .foot{grid-template-columns:1fr;gap:1.9rem}
    .foot-bottom{flex-direction:column;text-align:center;gap:.35rem}
  }

  @media(max-width:1340px){
    .nav-cta .socials{display:none}      /* icons move into the burger menu */
  }
  @media(max-width:1180px){
    .menu{gap:1.2rem}
    .menu a{font-size:.8rem;letter-spacing:.05em}
    .brand .logo{height:52px}
  }
  @media(max-width:1040px){
    .menu{display:none}
    .nav-cta .call-pill{display:flex}   /* keep tap-to-call visible on mobile */
    .burger{display:flex}
    .brand .logo{height:48px}
    .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;
               border-bottom:1px solid var(--line);box-shadow:0 12px 24px -14px rgba(30,40,51,.4);padding:1.2rem 6vw;gap:1.2rem}
    .menu.open a{font-size:.95rem;letter-spacing:.08em}
    .menu.open .socials{display:flex;padding-top:.4rem}
    .menu.open .socials a{width:34px;height:34px}
    .menu.open .socials a svg{width:17px;height:17px}
    /* dropdown becomes a plain nested list once the burger is in play */
    .menu.open .submenu{position:static;opacity:1;visibility:visible;transform:none;
                        border:0;border-left:2px solid var(--line);box-shadow:none;
                        min-width:0;padding:.5rem 0 .2rem;margin:.55rem 0 0 .2rem}
    .menu.open .submenu a{padding:.45rem 0 .45rem .9rem;font-size:.85rem}
    .menu.open .caret{display:none}
  }
  @media(max-width:430px){
    /* tight phones: drop the word "Call", keep the tappable number */
    .nav-cta{gap:.55rem}
    .call-pill{font-size:0;gap:0;padding:.6rem .85rem}
    .call-pill .n{font-size:.95rem}
  }
  @media(max-width:820px){
    .brand .logo{height:44px}
    .qbar .row{grid-template-columns:1fr}
    .qform{grid-template-columns:1fr 1fr}
    .why .row{grid-template-columns:1fr}
    .why .art{order:-1;padding-bottom:4rem}
    .why .art .main{width:82%}
    .why .art .inset{width:44%;border-width:6px}
    .rev{gap:1.1rem}
    .about .row{grid-template-columns:1fr}
    .about .ph{aspect-ratio:16/10;order:-1}
    .projects .grid{grid-template-columns:1fr}
    .tour .row{grid-template-columns:1fr}
    .tour-launch{aspect-ratio:4/3}
    .tour-car{gap:.4rem}
    .tour-car .arw{width:38px;height:38px}
    .lbox .lprev,.lbox .lnext{width:40px;height:60px;font-size:1.6rem}
    .foot{grid-template-columns:1fr 1fr}
  }

  /* ---------- SERVICE PAGES ---------- */
  .page-head{background:var(--blue-dark);color:#fff;padding:calc(clamp(4rem,8vw,7rem) + 70px) 0 clamp(3rem,6vw,5rem)}
  .page-head .eyebrow{color:#e7c987}
  .page-head h1{font-size:clamp(2.45rem,5.5vw,4.1rem);margin:.6rem 0 1rem}
  .page-head .lead{color:#d5dde4;max-width:58ch;font-size:clamp(1.12rem,1.6vw,1.3rem)}

  .svc .row{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:start}
  .svc h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 1rem}
  .svc h2+p,.svc p+p{margin-bottom:1rem}
  .svc p{color:var(--char-soft)}
  .svc .block{margin-bottom:2.8rem}
  .checks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.75rem}
  .checks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--char-soft)}
  .checks svg{width:19px;height:19px;flex:none;color:var(--amber);margin-top:.15rem}
  .aside{position:sticky;top:130px;background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:1.8rem 1.6rem}
  .aside h3{font-size:1.25rem;margin-bottom:.6rem}
  .aside p{font-size:.92rem;color:var(--char-soft);margin-bottom:1.3rem}
  .aside .btn{width:100%;justify-content:center}
  .aside .tel{display:block;text-align:center;margin-top:.9rem;font-weight:700;color:var(--blue-dark)}
  .aside .tel:hover{color:var(--amber-dark)}
  .aside .other{list-style:none;padding:1.4rem 0 0;margin:1.4rem 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem}
  .aside .other li a{font-size:.88rem;color:var(--char-soft)}
  .aside .other li a:hover{color:var(--amber-dark)}
  .aside .other .lbl{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--char);margin-bottom:.3rem}

  .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;margin-top:1.6rem}
  .shot figure{margin:0}
  .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px}
  .shot figcaption{font-size:.83rem;color:var(--char-soft);margin-top:.6rem}
  .noshots{border:1px dashed var(--line);border-radius:6px;padding:2rem;text-align:center;color:var(--char-soft);font-size:.92rem}

  .steps-lite{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem;counter-reset:t}
  .steps-lite li{display:flex;gap:1rem;align-items:flex-start;color:var(--char-soft)}
  .steps-lite li::before{counter-increment:t;content:"0" counter(t);font-family:var(--serif);font-size:1.4rem;
                         color:var(--amber);flex:none;line-height:1.2}
  @media(max-width:900px){
    .svc .row{grid-template-columns:1fr}
    .aside{position:static}
  }

  /* FAQ band on the service pages (replaced "What's included"). White, so it separates the cream
     project showcase above it from the dark process strip below. Heading stays on the left while
     the questions scroll on the right; each question is a native <details>. */
  .incl{background:#fff}
  .incl .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
              gap:clamp(2rem,6vw,5.5rem);align-items:start}
  .incl .sec-head{margin-bottom:0;position:sticky;top:120px}
  .incl .sec-head .lead{max-width:34ch}
  .incl .sec-head .see-all{margin-top:1.4rem}
  .faq-list{border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
                    gap:1.2rem;padding:1.3rem .2rem}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-q{font-family:var(--serif);font-weight:600;font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--char);
         line-height:1.35;transition:color .2s}
  .faq-item summary:hover .faq-q,.faq-item[open] .faq-q{color:var(--blue-dark)}
  .faq-item summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
  /* plus that turns into a minus */
  .faq-icon{position:relative;flex:none;width:34px;height:34px;border-radius:50%;
            background:rgba(198,137,47,.12);transition:background .25s}
  .faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;
            margin:-1px 0 0 -6px;background:var(--amber-dark);border-radius:2px;transition:transform .3s ease}
  .faq-icon::after{transform:rotate(90deg)}
  .faq-item[open] .faq-icon{background:var(--amber)}
  .faq-item[open] .faq-icon::before,.faq-item[open] .faq-icon::after{background:#fff}
  .faq-item[open] .faq-icon::after{transform:rotate(0deg)}
  .faq-a{margin:0;padding:0 3.6rem 1.5rem .2rem;color:var(--char-soft);line-height:1.7;max-width:62ch;
         animation:faq-in .3s ease}
  @keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @media(max-width:860px){
    .incl .wrap{grid-template-columns:1fr;gap:1.8rem}
    .incl .sec-head{position:static}
    .faq-a{padding-right:.2rem}
  }
  @media(prefers-reduced-motion:reduce){.faq-a{animation:none}.faq-icon::before,.faq-icon::after{transition:none}}

  /* ---------- TRUST BANNER ---------- */
  .trust{background:#fff;border-bottom:1px solid var(--line);padding:clamp(2.2rem,4vw,3.2rem) 0}
  .trust .row{display:grid;grid-template-columns:repeat(3,1fr) auto auto;gap:clamp(1.2rem,3vw,2.6rem);align-items:center}
  /* stretch to a shared height so the three numbers sit on one line regardless of
     how the labels wrap, then centre the block against the badges beside them */
  .tstat{text-align:center;position:relative;align-self:stretch;
         display:flex;flex-direction:column;justify-content:center}
  .tstat+.tstat::before,.tbadge:first-of-type::before{content:"";position:absolute;left:calc(-1 * clamp(.6rem,1.5vw,1.3rem));
                                                      top:50%;transform:translateY(-50%);width:1px;height:52px;background:var(--line)}
  .tstat .num{font-family:var(--serif);font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1;color:var(--blue-dark)}
  .tstat .num .plus{color:var(--amber)}
  .tstat .lbl{margin-top:.5rem;line-height:1.25;min-height:2.5em;font-size:.71rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--char-soft)}
  .tbadge{position:relative;display:flex;align-items:center;gap:.85rem;padding:.85rem 1.15rem;
          border:1px solid var(--line);border-radius:7px;background:#fff;
          transition:border-color .2s,transform .18s,box-shadow .25s}
  a.tbadge:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow)}
  .tbadge .txt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
  .tbadge .t1{font-size:.63rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--amber-dark);line-height:1.2}
  .tbadge .t2{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--char);line-height:1.15;white-space:nowrap}
  .tbadge .t3{font-size:.68rem;letter-spacing:.04em;color:var(--char-soft);line-height:1.3}
  .tbadge .go{margin-left:.2rem;width:14px;height:14px;flex:none;color:var(--char-soft);transition:color .2s,transform .2s}
  a.tbadge:hover .go{color:var(--amber);transform:translate(2px,-2px)}

  /* HBA emblem */
  .hba-mark{flex:none;height:clamp(46px,4.6vw,56px);width:auto}

  /* Google reviews badge (replaced the BBB seal) */
  .g-mark{flex:none;width:clamp(34px,3.4vw,42px);height:auto}
  .g-stars{color:#fbbc05;letter-spacing:.06em;font-size:.95rem;margin-left:.15rem}

  @media(max-width:1040px){
    .trust .row{grid-template-columns:repeat(3,1fr)}
    .tbadge{grid-column:span 1;justify-content:center}
    .tbadge::before{display:none!important}
  }
  @media(max-width:720px){
    .trust .row{grid-template-columns:repeat(3,1fr);gap:1.5rem .7rem}
    .tstat::before{display:none!important}
    .tstat:last-of-type{grid-column:auto}
    .tstat .lbl{min-height:0}
    /* badges stack full-width, centred, under the stat row */
    .tbadge{grid-column:1/-1;justify-content:center;width:100%;max-width:360px;margin:.1rem auto 0}
    .tbadge .t2{white-space:normal}
  }
  @media(max-width:430px){
    .trust .row{gap:1.2rem .4rem}
    .tstat .num{font-size:2rem}
    .tstat .lbl{font-size:.6rem;letter-spacing:.08em}
  }

/* ---- project card -> service page link ------------------------------------
   Added 2026-07-30. Keyword anchor text linking each project card through to
   its service page, so Google can crawl homepage -> services. Discussed with
   the client on the 2026-07-29 call. ------------------------------------- */
.card-link{
  display:inline-flex;align-items:center;gap:.55em;
  margin-top:1.05rem;
  font:700 1.02rem/1.4 var(--sans);
  letter-spacing:.005em;
  color:var(--blue);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:.12em;
  transition:color .18s ease,border-color .18s ease;
}
.card-link::after{content:"\2192";font-size:1.15em;line-height:1;transition:transform .18s ease}
.card-link:hover,.card-link:focus-visible{color:var(--amber-dark);border-bottom-color:currentColor}
.card-link:hover::after{transform:translateX(4px)}
.card-link:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  .card-link,.card-link::after{transition:none}
  .card-link:hover::after{transform:none}
}

/* ---- meet-the-team card grid (about page) ---------------------------------
   Portrait cards with the name/role on an overlay bar, matching the layout
   pattern the client flagged. Members without a photo fall back to the brand
   mark on a dark tile so the grid stays even until real portraits land.
   Used by the About page team + generations grids and the index.astro team
   section. ------------------------------------------------------------- */
.team-grid{
  display:grid;
  /* capped column, not 1fr — the roster is small, and two 1fr cards on a wide
     screen balloon into a pair of very tall 4:5 tiles */
  grid-template-columns:repeat(auto-fit,minmax(230px,300px));
  justify-content:center;
  gap:clamp(1.1rem,2.2vw,1.75rem);
  max-width:1080px;margin-inline:auto;
}
.tcard{position:relative;overflow:hidden;border-radius:6px;background:var(--blue-dark);
       box-shadow:0 14px 34px -20px rgba(30,40,51,.5);transition:transform .25s ease,box-shadow .25s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tcard-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--blue-dark)}
.tcard-ph>img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tcard:hover .tcard-ph>img{transform:scale(1.04)}
/* photo-less fallback: brand mark centred on the blue tile */
.tcard-mark{position:absolute;inset:0;display:grid;place-items:center}
.tcard-mark img{width:min(52%,150px);height:auto;object-fit:contain;opacity:.9}

/* name/role bar sits over the bottom of the image */
.tcard-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;
           display:flex;align-items:flex-end;justify-content:space-between;gap:.9rem;
           padding:2.6rem 1.1rem .95rem;color:#fff;
           background:linear-gradient(to top,rgba(20,28,36,.88) 0%,rgba(20,28,36,.66) 45%,rgba(20,28,36,0) 100%)}
.tcard-bar h3{font-size:1.22rem;color:#fff;line-height:1.15}
.tcard-bar .role{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
                 color:#e7c987;margin-top:.28rem}
.tcard-toggle{flex:none;width:32px;height:32px;border:1px solid rgba(255,255,255,.5);border-radius:2px;
              background:transparent;color:#fff;cursor:pointer;position:relative;
              transition:background .2s ease,border-color .2s ease,transform .2s ease}
/* plus sign drawn from the span so it can rotate into an x when open */
.tcard-toggle span,.tcard-toggle span::before{position:absolute;background:currentColor;content:""}
.tcard-toggle span{left:50%;top:50%;width:13px;height:1.5px;transform:translate(-50%,-50%);
                   transition:transform .25s ease}
.tcard-toggle span::before{left:0;top:0;width:100%;height:100%;transform:rotate(90deg);
                           transition:transform .25s ease}
.tcard-toggle:hover{background:var(--amber);border-color:var(--amber)}
.tcard-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.tcard.open .tcard-toggle span{transform:translate(-50%,-50%) rotate(45deg)}

/* bio panel slides up over the lower half of the card */
.tcard-bio{position:absolute;left:0;right:0;bottom:0;z-index:1;
           background:rgba(20,28,36,.95);color:#d5dde4;padding:1.3rem 1.15rem 4.4rem;
           font-size:.9rem;line-height:1.62;
           transform:translateY(100%);transition:transform .3s ease}
.tcard-bio[hidden]{display:block;visibility:hidden}
.tcard.open .tcard-bio{transform:none;visibility:visible}
.tcard.open .tcard-bar{background:linear-gradient(to top,rgba(20,28,36,.95),rgba(20,28,36,.95))}

@media(max-width:560px){
  .team-grid{grid-template-columns:1fr;max-width:400px}
}
@media (prefers-reduced-motion:reduce){
  .tcard,.tcard-ph>img,.tcard-bio,.tcard-toggle span,.tcard-toggle span::before{transition:none}
  .tcard:hover{transform:none}
  .tcard:hover .tcard-ph>img{transform:none}
}

/* ---- blog: listing + article ----------------------------------------------
   Posts are an Astro content collection (src/content/blog/*.md). The card
   shapes deliberately echo .pcard on the projects grid so the two pages read
   as one site. ------------------------------------------------------------ */
.posts{background:var(--cream)}

/* featured post — wide, image left */
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;
      border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:clamp(2rem,4vw,3rem);
      transition:transform .25s ease,box-shadow .25s ease}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat-ph{position:relative;aspect-ratio:16/11;overflow:hidden}
.feat-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.feat:hover .feat-ph img{transform:scale(1.04)}
.feat-body{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.feat-body h2{font-size:clamp(1.6rem,2.7vw,2.25rem);margin:.5rem 0 .8rem}
.feat-body p{color:var(--char-soft);font-size:1.02rem}
.feat-body .card-link{margin-top:1.2rem}

/* card grid */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
       gap:clamp(1.2rem,2.4vw,1.9rem)}
.bcard{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
       display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bcard-ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.bcard-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bcard:hover .bcard-ph img{transform:scale(1.05)}
.bcard-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.bcard-body h3{font-size:1.22rem;line-height:1.25}
.bcard-body h3 a:hover{color:var(--blue)}
.bcard-body p{color:var(--char-soft);font-size:.93rem;margin-top:.55rem}

/* shared category chip — same treatment as .pcard .tag */
.feat-ph .tag,.bcard-ph .tag{position:absolute;top:.9rem;left:.9rem;background:rgba(20,28,36,.82);color:#fff;
     font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .7rem;border-radius:2px}

/* date / read-time row */
.pmeta{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
       font-size:.82rem;color:var(--char-soft)}
.pmeta li+li::before{content:"·";margin-right:.55rem;color:var(--line)}
.pmeta.light{color:#c3ced8;margin-top:1.1rem}
.pmeta.light li+li::before{color:rgba(255,255,255,.4)}

/* empty state — kept for when the collection is emptied */
.empty{text-align:center;max-width:520px;margin-inline:auto;padding:clamp(2.5rem,6vw,4.5rem) 0}
.empty svg{width:52px;height:52px;margin:0 auto 1.3rem;color:var(--blue);opacity:.55}
.empty h2{font-size:1.7rem;margin-bottom:.7rem}
.empty p{color:var(--char-soft);margin-bottom:1.7rem}

/* ---- article page ---- */
.post-head{padding-bottom:clamp(4rem,9vw,7rem)}
.post-head h1{max-width:20ch}
/* hero image pulled up into the blue band above it */
.post-hero{margin-top:clamp(-6rem,-7vw,-4rem);position:relative;z-index:2}
.post-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;box-shadow:var(--shadow)}
.post{padding-top:clamp(2.5rem,5vw,4rem)}

.prose{max-width:70ch;margin-inline:auto;font-size:1.06rem;line-height:1.75;color:var(--char-soft)}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--char);margin-top:2.6rem}
.prose h3{font-size:1.22rem;color:var(--char);margin-top:1.9rem}
.prose strong{color:var(--char);font-weight:700}
.prose a{color:var(--blue);border-bottom:1.5px solid rgba(65,96,127,.35);transition:color .18s,border-color .18s}
.prose a:hover{color:var(--amber-dark);border-bottom-color:currentColor}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:.5rem}
.prose li::marker{color:var(--amber)}
.prose blockquote{border-left:3px solid var(--amber);padding-left:1.2rem;font-style:italic;color:var(--char)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

.post-next{max-width:70ch;margin:2.8rem auto 0;padding:1.4rem 1.6rem;background:#fff;
           border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:4px}
.post-next .card-link{margin-top:.5rem}

.post-more{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--line)}
.post-more h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1.6rem}
.post-more .card-link{margin-top:1.6rem}

@media(max-width:860px){
  .feat{grid-template-columns:1fr}
  .feat-ph{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .feat,.bcard,.feat-ph img,.bcard-ph img{transition:none}
  .feat:hover,.bcard:hover{transform:none}
  .feat:hover .feat-ph img,.bcard:hover .bcard-ph img{transform:none}
}

/* ---- about page hero ------------------------------------------------------
   Split layout: dark ground with the copy on the left, the photo filling the right ~58% and
   fading into the dark, a rule before the eyebrow, a button plus an underlined text link,
   and a small location badge bottom-right. Transparent header sits over it like the other heroes. */
.about-hero{min-height:min(92vh,860px);background:#26323d}
.about-hero-photo{position:absolute;top:0;right:0;bottom:0;width:62%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%)}
.about-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.about-hero .scrim{background:
  linear-gradient(90deg,rgba(38,50,61,.55) 0%,rgba(38,50,61,.3) 45%,rgba(38,50,61,0) 62%),
  linear-gradient(180deg,rgba(20,28,36,.35) 0%,rgba(20,28,36,0) 18%,rgba(20,28,36,0) 85%,rgba(20,28,36,.2) 100%)}
.about-hero .inner{padding-top:5rem;max-width:none}
.about-hero .inner>*{max-width:560px}
.about-hero .inner>h1{max-width:680px}
.about-hero .eyebrow-rule{display:flex;align-items:center;gap:.8rem}
.about-hero .eyebrow-rule::before{content:"";width:34px;height:2px;background:var(--amber)}
.about-hero h1{font-size:clamp(2.6rem,5.4vw,4.7rem);line-height:1.02;letter-spacing:-.02em;font-weight:700}
.about-hero p{margin:1.5rem 0 2.2rem;font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.65;color:#dfe5ea}
.about-hero .actions{align-items:center;gap:1.8rem}
.about-hero .actions .btn{flex:none;font-size:1.05rem;padding:1rem 1.9rem}
.story-link{display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-weight:700;font-size:1.02rem;
  padding-bottom:.3rem;border-bottom:2px solid var(--amber);transition:gap .2s}
.story-link svg{width:17px;height:17px;color:var(--amber);transition:transform .2s}
.story-link:hover svg{transform:translateY(3px)}
@media(max-width:900px){
  .about-hero-photo{width:100%;-webkit-mask-image:none;mask-image:none}
  .about-hero .scrim{background:linear-gradient(180deg,rgba(20,28,36,.66),rgba(20,28,36,.46) 45%,rgba(20,28,36,.74))}
}
@media(max-width:640px){
  .about-hero{min-height:auto;padding:calc(70px + 4rem) 0 5rem}
  .about-hero .inner{padding-top:1rem}
  .about-hero .actions{gap:1.2rem}
}

/* ---- three-generations band (about page) ----------------------------------
   Same .tcard shell as the team grid, locked to 3 across on desktop with an
   era chip. Sits directly under the hero, so it takes the cream ground and
   the team section below keeps the white one. ---------------------------- */
.gens{background:var(--cream)}
.gens .sec-head{margin-inline:auto;text-align:center;max-width:640px}
.gens .sec-head h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:.55rem 0 .9rem}
.gens .sec-head .lead{margin-inline:auto}
.gen-grid{grid-template-columns:repeat(3,1fr);max-width:1000px;margin-top:clamp(2rem,4vw,3rem)}
/* era chip, same treatment as the category tag on project + blog cards */
.gen-badge{position:absolute;top:.9rem;left:.9rem;z-index:2;
  background:rgba(247,245,241,.92);color:var(--blue-dark);
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.4rem .7rem;border-radius:2px}
@media(max-width:860px){
  .gen-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media(max-width:560px){
  .gen-grid{grid-template-columns:1fr;max-width:400px}
}

/* ---- Figgle Media footer credit -------------------------------------------
   Ported verbatim from the EJC Contracting build so the mark is identical
   across client sites. Do not restyle — the letter-spread on MEDIA depends on
   the per-letter spans and space-between, and the mark depends on Poppins
   (loaded in Base.astro). Link stays followable: rel="noopener" only, never
   nofollow — the whole point is the backlink. ---------------------------- */
.figgle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.figgle:hover { opacity: 0.82; }
.figgle .by {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: #b9c2d1;
}
.figgle .mark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;      /* sub stretches to FIGGLE's width */
  line-height: 1;
}
.figgle .mark-main {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-align: center;
}
.figgle .mark-sub {
  display: flex;
  justify-content: space-between;  /* M...E...D...I...A edge to edge */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.5rem;
  color: #ffffff;
  opacity: 0.9;
  margin-top: 4px;
}
.figgle:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px }
@media (prefers-reduced-motion: reduce) { .figgle { transition: none } }

/* ---- about: story copy + owner video --------------------------------------
   Replaces the old 4:5 photo with a 16:9 video slot (Adam to camera). Play
   mark borrows the .tour-launch language from the homepage so the site has one
   video vocabulary, not two. ---------------------------------------------- */
.about .row{grid-template-columns:1fr 1.12fr;align-items:center}
.about-copy h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:.55rem 0 1.2rem}
.about-copy p{color:var(--char-soft)}

/* stats: hairline-separated rather than three floating numbers */
.vals{gap:0;margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1.5rem}
.vals div{flex:1;padding-right:1.4rem;font-size:.82rem;letter-spacing:.04em;line-height:1.35}
.vals div+div{padding-left:1.4rem;border-left:1px solid var(--line)}
.vals span{font-size:2.1rem;margin-bottom:.15rem;line-height:1}

.about-video{margin:0;display:flex;flex-direction:column;gap:1rem}
.av-frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
          background:var(--blue-dark);box-shadow:var(--shadow)}
.av-frame img,.av-frame video{width:100%;height:100%;object-fit:cover;display:block}
/* thin inset rule, echoing the framed poster on the homepage tour */
.av-edge{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.32);border-radius:4px;
         pointer-events:none}

.av-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
         width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
         background:rgba(255,255,255,.94);color:var(--blue-dark);
         box-shadow:0 10px 30px -8px rgba(20,28,36,.6);transition:transform .22s ease,background .22s ease}
.av-mark svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
/* the placeholder mark is decorative only — nothing to click until a file lands */
.av-mark-static{pointer-events:none}

.av-play{position:absolute;inset:0;width:100%;border:0;background:rgba(20,28,36,.28);cursor:pointer;
         transition:opacity .25s ease,background .25s ease}
.av-play:hover{background:rgba(20,28,36,.14)}
.av-play:hover .av-mark{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.av-play:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.av-play.is-gone{opacity:0;pointer-events:none}

.about-video figcaption{display:flex;flex-direction:column;gap:.15rem;padding-left:.15rem}
.about-video figcaption strong{font-family:var(--serif);font-size:1.12rem;color:var(--char);font-weight:600}
.about-video figcaption span{font-size:.9rem;color:var(--char-soft)}

@media(max-width:900px){
  .about .row{grid-template-columns:1fr}
  .about-video{order:-1}
}
@media(max-width:480px){
  .vals{flex-wrap:nowrap}
  .vals div{padding-right:.8rem;font-size:.74rem}
  .vals div+div{padding-left:.8rem}
  .vals span{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .av-mark,.av-play{transition:none}
  .av-play:hover .av-mark{transform:translate(-50%,-50%)}
}

/* ---- contact page: form + google reviews ----------------------------------
   Full-width labelled form rather than the compressed .qform strip used in the
   quick-contact bars elsewhere. ------------------------------------------- */
/* no .page-head band on this page, so this section clears the fixed header
   itself — the nav is ~86px tall (56px logo + .9rem padding + border) */
.contact{background:var(--cream);padding-top:calc(clamp(4rem,7vw,6rem) + 86px)}
.contact-row{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.contact-main h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:.7rem}
.contact-main .lead{margin-bottom:2rem;max-width:56ch}

.cform{background:#fff;border:1px solid var(--line);border-radius:6px;
       padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 14px 34px -26px rgba(30,40,51,.5)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* honeypot */
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;margin-bottom:1.1rem}
.field label{font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
             color:var(--char-soft);margin-bottom:.45rem}
.field label span{color:var(--amber-dark)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.98rem;color:var(--char);background:#fff;
  border:1px solid var(--line);border-radius:3px;padding:.8rem .9rem;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(65,96,127,.14)}
.field input::placeholder,.field textarea::placeholder{color:#9aa5b0}
.cform-sub{margin-top:.5rem;width:100%;justify-content:center;font-size:1rem;padding:1.05rem 1.8rem}
.f-note{margin-top:.9rem;font-size:.8rem;color:var(--char-soft);text-align:center}

/* sidebar */
/* stretch to the form column and sit the cards at the bottom, so they line up with the
   bottom of the form instead of leaving a gap under them (Trevor, 2026-09-13) */
.contact-side{display:flex;flex-direction:column;gap:1.1rem;align-self:stretch;justify-content:flex-end}
.cs-block{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.5rem 1.6rem}
.cs-block h3{font-size:1.18rem;margin-bottom:.5rem}
.cs-block p{font-size:.92rem;color:var(--char-soft)}
.cs-phone{display:block;margin-top:1rem;font-family:var(--serif);font-size:1.5rem;color:var(--blue-dark)}
.cs-phone:hover{color:var(--amber-dark)}
.cs-mail{display:block;margin-top:.45rem;font-size:.92rem;color:var(--blue);word-break:break-all}
.cs-mail:hover{color:var(--amber-dark)}
.cs-list{list-style:none;margin:.7rem 0 0;padding:0;font-size:.92rem;color:var(--char-soft)}
.cs-list li{padding:.42rem 0;border-bottom:1px solid var(--line)}
.cs-list li:last-child{border-bottom:0}
.cs-note{background:var(--blue-dark);border-color:var(--blue-dark);color:#d5dde4}
.cs-note h3{color:#fff}
.cs-note p{color:#d5dde4}

/* ---- reviews ---- */
/* Quote first, attribution pinned to the bottom — with the byline on
   margin-top:auto both cards line up even though only one carries a tag. */
.revs{background:#fff}
.revs-intro{max-width:640px;margin-inline:auto;text-align:center}
.revs-intro h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin:.55rem 0 1.2rem}
.revs-score{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.7rem;
            background:var(--cream);border:1px solid var(--line);border-radius:100px;
            padding:.6rem 1.3rem}
.revs-score .num{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--blue-dark)}
.revs-score .cnt{font-size:.86rem;color:var(--char-soft)}
.rstars{color:var(--amber);letter-spacing:.12em;line-height:1}

.revs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
           gap:clamp(1.2rem,2.6vw,1.9rem);margin-top:clamp(2.2rem,4vw,3.2rem);
           max-width:1000px;margin-inline:auto}
/* same shell as .pcard / .bcard so reviews read as part of the same set */
.rcard{background:#fff;border:1px solid var(--line);border-radius:6px;
       padding:1.7rem 1.8rem;display:flex;flex-direction:column;
       transition:transform .25s ease,box-shadow .25s ease}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rcard-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
            margin-bottom:1rem}
.rcard blockquote{font-family:var(--serif);font-size:1.16rem;line-height:1.6;
                  color:var(--char);margin-bottom:1.5rem}

.rcard-by{display:flex;align-items:center;gap:.8rem;
          margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line)}
.rav{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
     background:var(--blue);color:#fff;font-weight:700;font-size:1.05rem}
.rwho{min-width:0}
.rwho h3{font-size:1.02rem;line-height:1.2}
.rwhen{font-size:.84rem;color:var(--char-soft);margin-top:.15rem}
.rtag{flex:none;background:rgba(198,137,47,.13);color:var(--amber-dark);
      font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      padding:.32rem .6rem;border-radius:2px}

.revs-foot{text-align:center;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
@media (prefers-reduced-motion:reduce){
  .rcard{transition:none}
  .rcard:hover{transform:none}
}

@media(max-width:900px){
  .contact-row{grid-template-columns:1fr}
}
@media(max-width:520px){
  .f-row{grid-template-columns:1fr;gap:0}
}

/* ---- social icon legibility -----------------------------------------------
   Two collisions fixed here:

   1) `.foot a{color:#aeb8c1}` is declared AFTER `.foot-socials a{color:#fff}`
      and carries the same (0,1,1) specificity, so it won the tie and greyed the
      glyphs — they're `fill:currentColor`. Scoping to `.foot .foot-socials a`
      (0,2,1) settles it. Same trap already documented for .foot-cta above.

   2) `.foot a:hover{color:var(--amber)}` turned the glyph amber at the same
      moment the background turned amber — an amber icon on an amber circle,
      i.e. invisible. Hover now paints the glyph dark, which also reads far
      better on amber than white did (white on #c6892f is only ~2.4:1).
   ------------------------------------------------------------------------ */
.socials a:hover,
.socials a:focus-visible{color:var(--char)}
/* Footer icons are always amber with a dark glyph (Trevor, 2026-09-13), the look they used to
   have only on hover; hover just lifts them. */
.foot .foot-socials a,
.foot .foot-socials a:hover,
.foot .foot-socials a:focus-visible{background:var(--amber);color:var(--char)}

/* ---- sub-service cards (service pages) ------------------------------------
   These replaced the old cross-sell grid and are informational, not links —
   so they must not borrow .card's hover lift, which reads as "clickable". --- */
.card.static{cursor:default}
.card.static:hover{transform:none;box-shadow:none}

/* The "What we handle" band sits right under the trust banner, above the cream Why ARCH band,
   so it is white to keep the two from running together. */
.subservices{background:#fff}

/* "What we handle" cards on the service pages: a job photo fills the card, a dark fade from
   the bottom carries the white title and copy. On hover the photo zooms, the card lifts and an
   amber rule grows under the title. */
.card.photo{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:360px;border:0;border-radius:8px;background:#1e2833;color:#fff;
  padding:1.8rem 1.6rem;box-shadow:0 18px 40px -28px rgba(20,28,36,.7)}
.card.photo .card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card.photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,28,36,0) 25%,rgba(20,28,36,.55) 55%,rgba(20,28,36,.92) 100%)}
.card.photo .ic{width:34px;height:34px;color:#e7c987;margin-bottom:.8rem}
.card.photo h3{color:#fff;font-size:1.4rem;margin-bottom:.55rem;padding-bottom:.6rem;position:relative}
.card.photo h3::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:36px;background:var(--amber);
  transition:width .45s ease}
.card.photo p{color:rgba(255,255,255,.86);font-size:.95rem}
.card.static.photo:hover{transform:translateY(-6px);box-shadow:0 30px 55px -30px rgba(20,28,36,.85)}
.card.photo:hover .card-bg{transform:scale(1.07)}
.card.photo:hover h3::after{width:90px}
@media(max-width:560px){.card.photo{min-height:300px}}
@media(prefers-reduced-motion:reduce){.card.photo,.card.photo .card-bg,.card.photo h3::after{transition:none}}