:root{
    --navy-950:#0B1B2E;
    --navy-800:#132C48;
    --navy-700:#1C3E5E;
    --navy-brand:#000080;
    --blueprint:#7FB2D9;
    --blueprint-dim:rgba(127,178,217,0.28);
    --concrete-100:#F2F1ED;
    --concrete-200:#E3E1D9;
    --concrete-300:#CFCCC0;
    --ink-900:#16181D;
    --ink-700:#34363D;
    --oxide-600:#E8590C;
    --oxide-700:#C24B0A;
    --brass-500:#B98A3E;
    --steel-500:#5C6B74;
    --white:#FFFFFF;
    --on-dark:#EAF0F3;
    --on-dark-dim:#A9BFCB;
    --font-display:'Big Shoulders Display',sans-serif;
    --font-body:'IBM Plex Sans',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
    --edge: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink-900);
    background:var(--concrete-100);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:0.01em;text-transform:uppercase;}
  p{margin:0;}
  button{font:inherit;}

  .skip-link{
    position:absolute;left:-999px;top:auto;background:var(--oxide-600);color:#fff;padding:12px 18px;z-index:200;
    font-family:var(--font-mono);
  }
  .skip-link:focus{left:12px;top:12px;}

  :focus-visible{outline:3px solid var(--oxide-600);outline-offset:3px;}

  .wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px;}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--oxide-600);
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--oxide-600);display:block;}
  .eyebrow--dark{color:#7FB2D9;}
  .eyebrow--dark::before{background:#7FB2D9;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--font-mono);font-size:13.5px;letter-spacing:0.06em;text-transform:uppercase;
    padding:15px 26px;border:1px solid transparent;cursor:pointer;
    clip-path:var(--edge);
    transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--oxide-600);color:#fff;}
  .btn-primary:hover{background:var(--oxide-700);}
  .btn-outline{background:transparent;color:var(--on-dark);border-color:var(--blueprint-dim);}
  .btn-outline:hover{border-color:#7FB2D9;}
  .btn-outline--light{color:var(--ink-900);border-color:var(--concrete-300);}
  .btn-outline--light:hover{border-color:var(--ink-900);}

  /* ---------- Nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:18px 0;
    transition:background .25s ease, padding .25s ease, box-shadow .25s ease;
  }
  .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;}
  .nav--scrolled{background:rgba(11,27,46,0.94);backdrop-filter:blur(6px);padding:12px 0;box-shadow:0 8px 24px rgba(0,0,0,0.25);}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand__mark{width:34px;height:34px;flex:none;color:#7FB2D9;}
  .brand__text{display:flex;flex-direction:column;line-height:1;}
  .brand__name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:0.03em;color:var(--on-dark);}
  .brand__sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;color:var(--on-dark-dim);margin-top:3px;}

  .nav__links{display:flex;align-items:center;gap:34px;}
  .nav__links a{
    font-family:var(--font-mono);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--on-dark-dim);position:relative;padding-bottom:4px;
  }
  .nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#7FB2D9;transition:width .2s ease;}
  .nav__links a:hover{color:var(--on-dark);}
  .nav__links a:hover::after{width:100%;}
  .nav__cta{
    display:flex;align-items:center;gap:18px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .nav--scrolled .nav__cta{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .3s ease, visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce){ .nav__cta{transition:none;} }
  .nav__cta .btn{padding:12px 20px;font-size:12px;}

  .nav__toggle{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:38px;height:38px;background:transparent;border:1px solid var(--blueprint-dim);
    clip-path:var(--edge);
  }
  .nav__toggle span{display:block;width:16px;height:2px;background:var(--on-dark);margin:0 auto;transition:transform .2s ease, opacity .2s ease;}
  .nav__toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav__toggle.is-active span:nth-child(2){opacity:0;}
  .nav__toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav__mobile{
    display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--navy-950);z-index:99;
    padding:110px 28px 40px;flex-direction:column;gap:26px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  }
  .nav__mobile.is-open{display:flex;opacity:1;transform:translateY(0);pointer-events:auto;}
  .nav__mobile a{font-family:var(--font-display);font-size:28px;color:var(--on-dark);text-transform:uppercase;font-weight:700;}
  .nav__mobile .btn{align-self:flex-start;margin-top:10px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;background:var(--navy-950);color:var(--on-dark);
    padding:168px 0 96px;overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;
    background-image:
      linear-gradient(var(--blueprint-dim) 1px, transparent 1px),
      linear-gradient(90deg, var(--blueprint-dim) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0) 85%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0) 85%);
  }
  .hero__inner{position:relative;display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;}
  .hero__eyebrow{margin-bottom:22px;}

  .hero__eyebrow,.hero h1,.hero__sub,.hero__ctas,.hero__stats{
    opacity:0;
    animation:heroIn 1s cubic-bezier(.16,.84,.44,1) both;
  }
  .hero__eyebrow{animation-delay:.1s;}
  .hero h1{animation-delay:.25s;}
  .hero__sub{animation-delay:.45s;}
  .hero__ctas{animation-delay:.65s;}
  .hero__stats{animation-delay:.85s;}
  @keyframes heroIn{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){
    .hero__eyebrow,.hero h1,.hero__sub,.hero__ctas,.hero__stats{opacity:1;animation:none;}
  }
  .hero h1{font-size:clamp(38px,5.6vw,64px);line-height:0.98;color:var(--white);}
  .hero__sub{
    font-family:var(--font-body);font-size:17px;color:var(--on-dark-dim);
    max-width:46ch;margin-top:22px;
  }
  .hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

  .hero__stats{
    display:flex;flex-wrap:wrap;gap:0;margin-top:56px;border-top:1px solid var(--blueprint-dim);padding-top:20px;
  }
  .dim-stat{
    display:flex;flex-direction:column;gap:8px;padding:0 26px 0 0;margin-right:26px;border-right:1px solid var(--blueprint-dim);
  }
  .dim-stat:last-child{border-right:none;}
  .dim-stat__tick{display:flex;align-items:center;gap:6px;}
  .dim-stat__tick::before,.dim-stat__tick::after{content:"";width:1px;height:8px;background:#7FB2D9;}
  .dim-stat__tick .line{flex:1;height:1px;background:#7FB2D9;min-width:28px;}
  .dim-stat__label{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;color:var(--on-dark);white-space:nowrap;}

  .hero__art{position:relative;}
  .hero__art svg{width:100%;height:auto;overflow:visible;}

  .crane-trolley{animation:craneSlide 11s ease-in-out infinite;animation-delay:2.3s;}
  .crane-cable{transform-box:fill-box;transform-origin:50% 0%;animation:cableHoist 11s ease-in-out infinite;animation-delay:2.3s;}
  .crane-hook{animation:hookRise 11s ease-in-out infinite;animation-delay:2.3s;}
  .crane-load{transform-box:fill-box;transform-origin:50% 0%;animation:loadSwing 3.6s ease-in-out infinite;animation-delay:2.3s;}
  @keyframes craneSlide{
    0%{transform:translateX(0);}
    32%{transform:translateX(-46px);}
    68%{transform:translateX(30px);}
    100%{transform:translateX(0);}
  }
  @keyframes cableHoist{
    0%,100%{transform:scaleY(1);}
    20%,55%{transform:scaleY(0.56);}
    80%{transform:scaleY(1);}
  }
  @keyframes hookRise{
    0%,100%{transform:translateY(0);}
    20%,55%{transform:translateY(-36px);}
    80%{transform:translateY(0);}
  }
  @keyframes loadSwing{
    0%,100%{transform:rotate(-2.5deg);}
    50%{transform:rotate(2.5deg);}
  }
  @media (prefers-reduced-motion: reduce){
    .crane-trolley,.crane-cable,.crane-hook,.crane-load{animation:none;}
  }

  /* ---------- Stats strip ---------- */
  .statstrip{background:var(--white);border-bottom:1px solid var(--concrete-300);}
  .statstrip__grid{display:grid;grid-template-columns:repeat(4,1fr);}
  .statcell{
    padding:38px 24px;text-align:left;border-left:1px solid var(--concrete-300);
  }
  .statcell:first-child{border-left:none;}
  .statcell__num{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,4vw,46px);color:var(--navy-950);line-height:1;}
  .statcell__label{font-family:var(--font-mono);font-size:12px;color:var(--steel-500);margin-top:10px;display:block;line-height:1.4;}

  /* ---------- Sections generic ---------- */
  .section{padding:110px 0;}
  .section--tight{padding:96px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
.section-head h2,.section-head h1{font-size:clamp(30px,4vw,44px);margin-top:16px;color:var(--ink-900);}
  .section-head p{margin-top:16px;font-size:16px;color:var(--ink-700);}

  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}

  /* ---------- About ---------- */
  .about{background:var(--concrete-100);}
  .about__grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:64px;align-items:start;}
  .about__body p{color:var(--ink-700);font-size:16px;margin-top:18px;}
  .about__body p:first-child{margin-top:0;}
  .about__attrib{margin-top:20px;font-family:var(--font-mono);font-size:12.5px;color:var(--steel-500);}

  /* The fact panel holds while the statement scrolls past it — the grid already
     aligns to start, so it has room to travel. Offset clears the fixed header. */
  .factplate{background:var(--navy-950);color:var(--on-dark);padding:34px;clip-path:var(--edge);
    position:sticky;top:124px;}
  .factrow{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--blueprint-dim);}
  .factrow:first-child{padding-top:0;}
  .factrow:last-child{border-bottom:none;padding-bottom:0;}
  .factrow__label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.08em;color:var(--on-dark-dim);text-transform:uppercase;}
  .factrow__value{font-family:var(--font-mono);font-size:13.5px;color:var(--white);text-align:right;}

  /* ---------- Services ---------- */
  .services{background:var(--white);}
  .service-grid{display:grid;grid-template-columns:repeat(3,1fr);justify-items:stretch;gap:1px;background:var(--concrete-300);border:1px solid var(--concrete-300);}
  .service-card{background:var(--white);padding:0;transition:background .2s ease;}
  .service-card:hover{background:var(--concrete-100);}
  .service-card__icon{width:44px;height:44px;color:var(--oxide-600);margin-bottom:22px;}
  .service-card__body{padding:26px 30px 30px;}
  .service-card h3{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:none;letter-spacing:0;color:var(--ink-900);}
  .service-card p{margin-top:10px;font-size:14.5px;color:var(--ink-700);}

  /* ---------- Projects ---------- */
  .projects{background:var(--concrete-100);}
  .project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
  .project-card{
    background:var(--white);border:1px solid var(--concrete-300);padding:0;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .project-card:hover{transform:translateY(-4px);border-color:var(--oxide-600);box-shadow:0 18px 34px rgba(22,24,29,0.12);}
  .project-card__art{background:var(--navy-950);position:relative;overflow:hidden;}
  .project-card__art::before{content:"";display:block;padding-top:66.71%;}
  .project-card__tag{
    position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;
    color:#fff;text-transform:uppercase;background:rgba(11,27,46,0.72);backdrop-filter:blur(4px);
    padding:5px 10px;z-index:2;
  }
  .demo-photo-blur,.demo-photo-main{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;}
  .project-card__photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
  .project-card:hover .project-card__photo{transform:scale(1.05);}
  .project-card__placeholder{
    position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.06em;color:var(--blueprint);text-transform:uppercase;
  }
  .project-card__body{padding:24px 28px 28px;}
  .project-card__title{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink-900);letter-spacing:0.01em;}
  .project-card__loc{font-family:var(--font-mono);font-size:12.5px;color:var(--oxide-600);margin-top:8px;letter-spacing:0.02em;}
  .project-card__note{font-size:14px;color:var(--ink-700);margin-top:12px;}

  /* ---------- Approach ---------- */
  .approach{background:var(--navy-950);color:var(--on-dark);}
  .approach .section-head p{color:var(--on-dark-dim);}
.approach .section-head h2,.approach .section-head h1{color:var(--white);}
  .approach__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
  .approach__block h3{
    font-family:var(--font-mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
    color:#7FB2D9;font-weight:600;margin-bottom:20px;
  }
  .valuechips{display:flex;flex-wrap:wrap;gap:10px;}
  .valuechip{
    border:1px solid var(--blueprint-dim);padding:9px 16px;font-family:var(--font-mono);font-size:12.5px;
    letter-spacing:0.03em;color:var(--on-dark);
  }
  .safetylist{display:flex;flex-direction:column;gap:0;}
  .safetyitem{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--blueprint-dim);}
  .safetyitem:last-child{border-bottom:none;padding-bottom:0;}
  .safetyitem__num{font-family:var(--font-mono);font-size:13px;color:#7FB2D9;flex:none;width:24px;}
  .safetyitem__text{font-size:14.5px;color:var(--on-dark-dim);}
  .approach__community{grid-column:1/-1;margin-top:8px;border-top:1px solid var(--blueprint-dim);padding-top:38px;}
  .approach__community p{font-size:15.5px;color:var(--on-dark-dim);max-width:70ch;}

  /* ---------- Capacity ---------- */
  .capacity{background:var(--concrete-100);}
  .capacity__sub{font-family:var(--font-mono);font-size:13.5px;color:var(--oxide-600);margin-top:14px;}
  .equip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--concrete-300);border:1px solid var(--concrete-300);margin-top:46px;}
  .equip-cell{background:var(--white);padding:26px 18px;text-align:center;}
  .equip-cell__num{font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--navy-950);}
  .equip-cell__label{font-family:var(--font-mono);font-size:10.5px;color:var(--steel-500);margin-top:8px;text-transform:uppercase;letter-spacing:0.04em;line-height:1.3;display:block;}

  /* ---------- CTA / Contact ---------- */
  .cta{background:var(--oxide-600);color:#fff;}
  .cta__inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:center;}
  .cta h2{color:#fff;font-size:clamp(30px,4vw,44px);}
  .cta p{margin-top:16px;color:rgba(255,255,255,0.85);font-size:16px;max-width:48ch;}
  .cta__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;}
  .cta .btn-primary{background:var(--navy-950);}
  .cta .btn-primary:hover{background:#081321;}
  .cta .btn-outline{border-color:rgba(255,255,255,0.5);color:#fff;}
  .cta .btn-outline:hover{border-color:#fff;}
  /* The proposal page opens on navy, so this section turns the sheet over: paper
     stock, ink type, brass for the surveyor's marks. Oxide is held back for the
     one button that matters. Keeps the page from being navy top to bottom. */
  .cta--brief{background:var(--concrete-100);color:var(--ink-900);
    border-top:1px solid var(--concrete-300);
    background-image:linear-gradient(rgba(92,107,116,.06) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(92,107,116,.06) 1px,transparent 1px);
    background-size:44px 44px;}
  .cta--brief h2{color:var(--ink-900);}
  .cta--brief p{color:var(--ink-700);}
  .cta--brief .eyebrow{color:var(--brass-500);}
  .cta--brief .eyebrow::before{background:var(--brass-500);}
  .cta--brief .direct-line__points li{color:var(--ink-700);}
  .cta--brief .direct-line__points li b{color:var(--ink-900);}
  .cta--brief .direct-line__points li::before{background:var(--brass-500);}
  .cta--brief .btn-outline{border-color:var(--ink-900);color:var(--ink-900);}
  .cta--brief .btn-outline:hover{border-color:var(--oxide-600);color:var(--oxide-600);}
  .cta--brief .proposal-form{background:var(--navy-950);border:1px solid var(--navy-800);}

  .contact-plate{background:rgba(11,27,46,0.92);padding:32px;clip-path:var(--edge);}
  .contact-row{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.18);}
  .contact-row:first-child{padding-top:0;}
  .contact-row:last-child{border-bottom:none;padding-bottom:0;}
  .contact-row__label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-dim);}
  .contact-row__value{font-family:var(--font-mono);font-size:14.5px;color:#fff;}

  /* ---------- Footer ---------- */
  .footer{background:var(--navy-950);color:var(--on-dark-dim);padding:0 0 30px;}
  /* The footer opens on a rule, the way a drawing sheet separates the title block
     from the drawing. Same short oxide lead-in used by every eyebrow on the site,
     and it mirrors the hairline that already sits above the copyright line. */
  .footer__rule{position:relative;height:1px;background:var(--blueprint-dim);margin-bottom:56px;}
  .footer__rule::before{content:"";position:absolute;left:0;top:0;width:64px;height:1px;background:var(--oxide-600);}
  .footer__top{display:grid;grid-template-columns:1.3fr 0.85fr 0.95fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--blueprint-dim);}
  .footer__contact li{font-family:var(--font-mono);font-size:12.5px;line-height:1.6;}
  .footer__brand .brand__mark{color:#7FB2D9;}
  .footer__brand p{margin-top:18px;font-size:13.5px;max-width:34ch;color:var(--on-dark-dim);}
  .footer h4{font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--white);margin-bottom:18px;}
  .footer ul li{margin-bottom:11px;font-size:14px;}
  .footer ul a:hover{color:var(--white);}
  .footer__bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;
    font-family:var(--font-mono);font-size:11.5px;color:var(--on-dark-dim);
  }

  /* ---------- Leadership ---------- */
  .leadership{background:var(--navy-950);color:var(--on-dark);}
.leadership .section-head h2,.leadership .section-head h1{color:var(--white);}
  .leadership .section-head p{color:var(--on-dark-dim);}
  .leader-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--blueprint-dim);border:1px solid var(--blueprint-dim);}
  .leader-card{background:var(--navy-950);padding:30px 26px;}
  .leader-card__name{font-family:var(--font-mono);font-size:11px;color:var(--oxide-600);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;}
  .leader-card__role{font-family:var(--font-display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:0.01em;color:var(--white);}
  .leader-card__exp{font-family:var(--font-mono);font-size:11.5px;color:var(--blueprint);margin-top:9px;letter-spacing:0.04em;text-transform:uppercase;}
  .leader-card__desc{font-size:13.5px;color:var(--on-dark-dim);margin-top:12px;line-height:1.55;}

  /* ---------- Verified completions ---------- */
  .certifications{background:var(--navy-950);color:var(--on-dark);}
  .certifications .section-head p{color:var(--on-dark-dim);}
  .certifications .eyebrow{color:var(--brass-500);}
  .certifications .eyebrow::before{background:var(--brass-500);}
.certifications .section-head h2,.certifications .section-head h1{color:var(--white);}
  .cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.14);margin-top:48px;}
  .cert-card{background:var(--navy-950);padding:32px 26px;}
  .cert-card__seal{width:38px;height:38px;color:var(--brass-500);margin-bottom:18px;}
  .cert-card__label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--brass-500);}
  .cert-card__title{font-family:var(--font-display);font-weight:700;font-size:17px;text-transform:none;letter-spacing:0;color:#fff;margin-top:10px;line-height:1.2;}
  .cert-card__meta{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.14);font-family:var(--font-mono);font-size:11px;color:var(--on-dark-dim);}
  @media (max-width:820px){.cert-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.cert-grid{grid-template-columns:1fr;}}

  /* ---------- Proposal form ---------- */
  .proposal-form{background:rgba(11,27,46,0.92);padding:32px;clip-path:var(--edge);display:flex;flex-direction:column;gap:16px;}
  .form-row{display:flex;flex-direction:column;gap:7px;}
  .form-row label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-dim);}
  .form-row input,.form-row select,.form-row textarea{
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.24);color:#fff;
    padding:11px 13px;font-family:var(--font-body);font-size:14px;border-radius:0;width:100%;
  }
  .form-row input::placeholder,.form-row textarea::placeholder{color:rgba(234,240,243,0.4);}
  .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--blueprint);outline-offset:1px;border-color:var(--blueprint);}
  .form-row select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
  .form-row textarea{resize:vertical;min-height:64px;font-family:var(--font-body);}
  .form-submit{width:100%;justify-content:center;border:none;}
  .form-note{font-family:var(--font-mono);font-size:10.5px;color:var(--on-dark-dim);text-align:center;margin:0;}
  .form-success{display:none;text-align:center;padding:26px 4px;}
  .form-success h3{font-family:var(--font-display);color:#fff;font-size:22px;}
  .form-success p{font-size:13.5px;color:var(--on-dark-dim);margin-top:10px;}
  .proposal-form.is-sent .form-fields,.proposal-form.is-sent .form-submit,.proposal-form.is-sent .form-note{display:none;}
  .proposal-form.is-sent .form-success{display:block;}

  /* ---------- Crosshair hover indicator ---------- */
  .cursor-crosshair{
    position:fixed;top:0;left:0;width:36px;height:36px;pointer-events:none;z-index:300;
    transform:translate(-50%,-50%) scale(0.6);opacity:0;
    transition:opacity .2s ease, transform .25s cubic-bezier(.16,.84,.44,1);
  }
  .cursor-crosshair.is-active{opacity:1;transform:translate(-50%,-50%) scale(1);}
  @media (hover:none),(pointer:coarse){ .cursor-crosshair{display:none;} }

  /* ---------- Featured project ---------- */
  .featured-project{
    display:grid;grid-template-columns:1.1fr 0.9fr;background:var(--navy-950);color:var(--on-dark);
    margin-bottom:26px;overflow:hidden;transition:transform .25s ease;will-change:transform;
  }
  .featured-project__art{padding:30px 20px;display:flex;align-items:center;}
  .featured-project__art svg{width:100%;height:auto;}
  .featured-project__body{padding:36px 40px 36px 4px;display:flex;flex-direction:column;justify-content:center;}
  .featured-project__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--oxide-600);}
  .featured-project__body h3{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,36px);color:#fff;margin-top:10px;letter-spacing:0.01em;text-transform:uppercase;}
  .featured-project__desc{font-size:14.5px;color:var(--on-dark-dim);margin-top:14px;max-width:48ch;line-height:1.6;}
  .featured-project__stats{display:flex;gap:34px;margin-top:22px;padding-top:20px;border-top:1px solid var(--blueprint-dim);}
  .fp-num{display:block;font-family:var(--font-display);font-weight:900;font-size:26px;color:var(--white);}
  .fp-label{display:block;font-family:var(--font-mono);font-size:10px;color:var(--on-dark-dim);margin-top:4px;max-width:17ch;line-height:1.4;}
  @media (max-width:820px){
    .featured-project{grid-template-columns:1fr;}
    .featured-project__body{padding:26px 26px 30px;}
    .featured-project__art{padding:26px 26px 0;}
  }

  /* ---------- Photo frame (blur-up + Ken Burns + lightbox trigger) ---------- */
  .photo-frame{
    position:relative;display:block;width:100%;overflow:hidden;
    border:none;padding:0;cursor:pointer;background:var(--navy-800);
  }
  .photo-frame::before{content:"";display:block;padding-top:66.71%;}
  .photo-frame__blur,.photo-frame__main{
    position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;
  }
  .photo-frame__blur{filter:blur(20px);transform:scale(1.15);}
  .photo-frame__main{opacity:0;transition:opacity .6s ease;}
  .photo-frame__main.is-loaded{opacity:1;}
  @keyframes kenBurns{ from{transform:scale(1);} to{transform:scale(1.08);} }
  .photo-frame__main.is-loaded.kb-img{animation:kenBurns 20s ease-out forwards;}
  @media (prefers-reduced-motion: reduce){ .photo-frame__main.kb-img{animation:none !important;} }
  .photo-frame__zoom-hint{
    position:absolute;right:14px;bottom:14px;width:36px;height:36px;
    background:rgba(11,27,46,0.78);backdrop-filter:blur(4px);color:#fff;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s ease;clip-path:var(--edge);
  }
  .photo-frame__zoom-hint svg{width:17px;height:17px;}
  .photo-frame:hover .photo-frame__zoom-hint,.photo-frame:focus-visible .photo-frame__zoom-hint{opacity:1;}

  /* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;background:rgba(6,14,24,0.94);
    display:flex;align-items:center;justify-content:center;padding:40px;
    opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .lightbox.is-open{opacity:1;visibility:visible;transition:opacity .3s ease, visibility 0s linear 0s;}
  .lightbox__img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,0.5);}
  .lightbox__close{
    position:absolute;top:24px;right:24px;width:44px;height:44px;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.24);color:#fff;
    display:flex;align-items:center;justify-content:center;clip-path:var(--edge);
  }
  .lightbox__close svg{width:20px;height:20px;}
  .lightbox__close:hover{background:rgba(255,255,255,0.16);}
  @media (prefers-reduced-motion: reduce){ .lightbox{transition:none;} }

  /* ---------- Before/after slider ---------- */
  .ba-slider{margin-top:44px;}
  .ba-slider__eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--oxide-600);text-transform:uppercase;margin-bottom:10px;}
  .ba-slider__frame{touch-action:pan-y;cursor:ew-resize;position:relative;overflow:hidden;background:var(--navy-950);}
  .ba-slider__frame::before{content:"";display:block;padding-top:66.7%;}
  .ba-slider__img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
  .ba-slider__after{z-index:1;}
  .ba-slider__before-clip{position:absolute;top:0;left:0;bottom:0;width:50%;overflow:hidden;z-index:2;}
  .ba-slider__before-clip .ba-slider__img{width:1000px;max-width:none;}
  .ba-slider__divider{
    position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
    transform:translateX(-1px);pointer-events:none;z-index:3;box-shadow:0 0 6px rgba(0,0,0,.4);
  }
  .ba-slider__handle{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
    background:#fff;display:flex;align-items:center;justify-content:center;color:var(--navy-950);box-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .ba-slider__handle svg{width:20px;height:20px;}
  .ba-slider__label{
    position:absolute;top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;background:rgba(11,27,46,.7);padding:5px 10px;z-index:4;
  }
  .ba-slider__label--before{left:14px;}
  .ba-slider__label--after{right:14px;}
  .ba-slider__range{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;margin-top:16px;
    background:var(--concrete-300);outline:none;cursor:ew-resize;
  }
  .ba-slider__range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
    background:var(--oxide-600);cursor:ew-resize;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);
  }
  .ba-slider__range::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;background:var(--oxide-600);cursor:ew-resize;
    border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);
  }

  /* ---------- Multi-step proposal form ---------- */
  .form-progress{display:flex;gap:0;margin-bottom:22px;}
  .form-progress-mobile{display:none;}
  .form-progress__item{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;color:var(--on-dark-dim);
    padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,0.15);flex:1;text-align:center;
    transition:color .2s ease, border-color .2s ease;
  }
  .form-progress__item.is-active,.form-progress__item.is-done{color:#fff;border-color:var(--blueprint);}
  .form-step{display:none;flex-direction:column;gap:16px;}
  .form-step.is-active{display:flex;}
  .form-step__label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-dim);}
  .type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
  .type-option{
    display:flex;align-items:center;gap:9px;
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.2);color:var(--on-dark);
    padding:11px 12px;font-family:var(--font-body);font-size:12.5px;cursor:pointer;text-align:left;
    transition:border-color .2s ease, background .2s ease;
  }
  .type-option svg{width:19px;height:19px;flex:none;color:var(--blueprint);}
  .type-option.is-selected{border-color:var(--oxide-600);background:rgba(232,89,12,0.18);}
  .type-option.is-selected svg{color:var(--oxide-600);}
  .chip-group{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.22);color:var(--on-dark-dim);
    padding:8px 13px;font-family:var(--font-mono);font-size:11px;cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .chip.is-selected{border-color:var(--oxide-600);color:#fff;background:rgba(232,89,12,0.22);}
  .form-nav{display:flex;gap:10px;margin-top:2px;}
  .form-nav .btn{flex:1;justify-content:center;}
  .btn[hidden]{display:none;}

  /* ---------- Site walkthrough (360 panorama) ---------- */
  .walkthrough{background:var(--white);}
  .walkthrough-launch{
    position:relative;display:block;width:100%;border:none;padding:0;cursor:pointer;overflow:hidden;
    background:var(--navy-950);
  }
  .walkthrough-launch::before{content:"";display:block;padding-top:42%;}
  .walkthrough-launch__img{
    position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;
    transition:transform .6s ease;
  }
  .walkthrough-launch:hover .walkthrough-launch__img,.walkthrough-launch:focus-visible .walkthrough-launch__img{transform:scale(1.045);}
  .walkthrough-launch__copy{display:flex;flex-direction:column;gap:8px;max-width:420px;}
  .walkthrough-launch__heading{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-0.01em;font-size:clamp(22px,2.8vw,32px);color:#fff;line-height:1.05;}
  .walkthrough-launch__sub{font-family:var(--font-body);font-size:14px;color:rgba(255,255,255,.82);line-height:1.5;}
  .walkthrough-launch__overlay{
    position:absolute;top:0;right:0;bottom:0;left:0;
    background:linear-gradient(0deg, rgba(11,27,46,.88), rgba(11,27,46,.1) 60%);
    display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;padding:34px 36px;
  }
  .walkthrough-launch__icon{
    width:64px;height:64px;flex:none;background:var(--oxide-600);color:#fff;
    display:flex;align-items:center;justify-content:center;clip-path:var(--edge);
    transition:background .2s ease;
  }
  .walkthrough-launch:hover .walkthrough-launch__icon{background:var(--oxide-700);}
  .walkthrough-launch__icon svg{width:30px;height:30px;}
  .walkthrough-launch__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
  @media (max-width:560px){ .walkthrough-launch::before{padding-top:78%;} }

  .pano-modal{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#0a0a0a;
    opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .pano-modal.is-open{opacity:1;visibility:visible;transition:opacity .3s ease, visibility 0s linear 0s;}
  .pano-modal__viewer{position:absolute;top:0;right:0;bottom:0;left:0;}
  .pano-modal__close{
    position:absolute;top:20px;right:20px;z-index:2;width:44px;height:44px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;
    display:flex;align-items:center;justify-content:center;clip-path:var(--edge);
  }
  .pano-modal__close:hover{background:rgba(255,255,255,.2);}
  .pano-modal__close svg{width:20px;height:20px;}
  .pano-modal__fallback{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
    color:var(--on-dark-dim);font-family:var(--font-mono);font-size:13px;text-align:center;max-width:36ch;padding:0 20px;
  }
  @media (prefers-reduced-motion: reduce){ .pano-modal{transition:none;} }

  /* ---------- Testimonials ---------- */
  .testimonials{background:var(--concrete-100);}
  .testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--concrete-300);border:1px solid var(--concrete-300);margin-top:40px;}
  .testimonial-card{background:var(--white);padding:34px 32px;}
  .testimonial-card__mark{display:block;font-family:var(--font-display);font-size:44px;font-weight:800;color:var(--oxide-600);line-height:1;margin-bottom:6px;}
  .testimonial-card__quote{font-size:16px;line-height:1.6;color:var(--ink-900);}
  .testimonial-card__attr{margin-top:18px;padding-top:16px;border-top:1px solid var(--concrete-300);font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--ink-700);}
  .testimonial-card__attr span{display:block;margin-top:3px;color:var(--oxide-600);text-transform:uppercase;font-size:11px;letter-spacing:.06em;}
  @media (max-width:820px){ .testimonial-grid{grid-template-columns:1fr;} }

  /* ---------- Direct line (dedicated support) ---------- */
  .direct-line{background:var(--navy-950);color:var(--on-dark);}
  .direct-line__inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;}
  .direct-line h1,.direct-line h2{color:#fff;font-size:clamp(28px,3.6vw,40px);margin-top:16px;}
  .direct-line__desc{color:var(--on-dark-dim);font-size:15.5px;margin-top:16px;max-width:52ch;line-height:1.65;}
  .direct-line__points{margin-top:24px;display:flex;flex-direction:column;gap:13px;padding:0;list-style:none;}
  .direct-line__points li{font-size:14px;color:var(--on-dark-dim);padding-left:24px;position:relative;}
  .direct-line__points li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:1px;background:var(--blueprint);}
  .direct-line__card{background:rgba(255,255,255,0.04);border:1px solid var(--blueprint-dim);padding:38px 34px;clip-path:var(--edge);text-align:center;}
  .direct-line__mark{
    width:54px;height:54px;background:rgba(127,178,217,0.08);border:1px solid var(--blueprint-dim);
    color:var(--blueprint);clip-path:var(--edge);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  }
  .direct-line__mark svg{width:24px;height:24px;}
  .direct-line__cta-icon{width:16px;height:16px;flex:none;}
  .direct-line__label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-dim);}
  .direct-line__name{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;margin-top:8px;text-transform:uppercase;letter-spacing:0.01em;}
  .direct-line__note{font-size:13px;color:var(--on-dark-dim);margin-top:10px;line-height:1.55;}
  .direct-line__cta{width:100%;justify-content:center;margin-top:22px;}
  .direct-line__meta{display:block;font-family:var(--font-mono);font-size:10px;color:var(--on-dark-dim);margin-top:14px;}
  @media (max-width:820px){ .direct-line__inner{grid-template-columns:1fr;gap:36px;} }

  /* ---------- Social ---------- */
  .social-row{display:flex;gap:12px;margin-top:20px;}
  .social-row a{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--blueprint-dim);color:var(--on-dark-dim);transition:border-color .2s ease, color .2s ease;
  }
  .social-row a:hover{border-color:var(--blueprint);color:#fff;}
  .social-row svg{width:16px;height:16px;}

  /* ---------- Native scroll-driven reveal (progressive enhancement) ---------- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference){
      .js .reveal{
        transition:none;
        animation: reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }
    }
  }
  @keyframes reveal-in{ to{ opacity:1; transform:translateY(0); } }

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .nav__links,.nav__cta{display:none;}
    .nav__toggle{display:flex;}
    .hero__inner{grid-template-columns:1fr;}
    .hero__art{order:-1;width:min(100%,420px);max-width:none;margin:0 auto 6px;opacity:0.95;}
    .hero{padding-top:98px;}
    .statstrip__grid{grid-template-columns:repeat(2,1fr);}
    .statcell:nth-child(3){border-left:none;}
    .about__grid{grid-template-columns:1fr;}
    .factplate{position:static;top:auto;}
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .project-grid{grid-template-columns:1fr;}
    .approach__grid{grid-template-columns:1fr;gap:44px;}
    .equip-grid{grid-template-columns:repeat(3,1fr);}
    .cta__inner{grid-template-columns:1fr;}
    .footer__top{grid-template-columns:1fr;gap:34px;}
    .footer__rule{margin-bottom:38px;}
  }
  @media (max-width:560px){
    .wrap{padding-left:18px;padding-right:18px;}
    .section{padding:76px 0;}
    .hero{padding-top:92px;padding-bottom:52px;}
    .hero__stats{flex-direction:column;gap:16px;}
    .dim-stat{border-right:none;border-bottom:1px solid var(--blueprint-dim);padding-bottom:14px;margin-right:0;}
    .service-grid{grid-template-columns:1fr;}
    .equip-grid{grid-template-columns:repeat(2,1fr);}
    .statstrip__grid{grid-template-columns:1fr;}
    .statcell{border-left:none;border-top:1px solid var(--concrete-300);}
    .statcell:first-child{border-top:none;}
    .form-progress{display:none;}
    .form-progress-mobile{display:block;}
    .form-progress-mobile__label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:#fff;display:block;margin-bottom:10px;}
    .form-progress-mobile__track{height:2px;background:rgba(255,255,255,0.15);}
    .form-progress-mobile__fill{height:100%;background:var(--blueprint);transition:width .3s ease;}
  }

/* ---------- Building: floors rise into place, bottom up, once ---------- */
.building .floor{ opacity:0; transform:translateY(26px); transform-box:fill-box; transform-origin:50% 100%;
  animation:floorSet .72s cubic-bezier(.16,.84,.44,1) forwards; animation-delay:calc(.7s + var(--i) * 3.0s); }
@keyframes floorSet{ from{opacity:0;transform:translateY(26px) scaleY(.96);} to{opacity:1;transform:translateY(0) scaleY(1);} }

/* Each storey is built out room by room: the slab lands, the dividing columns
   go up left to right, and the rooms infill behind them one at a time. Every
   delay is anchored to that floor's own start, so the storeys never overlap. */
.floor .col{ opacity:0; transform-box:fill-box; transform-origin:50% 100%;
  animation:colUp .55s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:calc(.7s + var(--i) * 3.0s + .45s + var(--c) * .22s); }
@keyframes colUp{ from{opacity:0;transform:scaleY(.15);} to{opacity:1;transform:scaleY(1);} }

.room{ fill:rgba(127,178,217,0.13); stroke:none; opacity:0;
  transform-box:fill-box; transform-origin:0% 50%;
  animation:roomFill .58s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:calc(.7s + var(--i) * 3.0s + .72s + var(--r) * .30s); }
@keyframes roomFill{ from{opacity:0;transform:scaleX(0);} to{opacity:.95;transform:scaleX(1);} }

/* Roof: the fixings go up one at a time rather than all at once. */
.spike{ opacity:0; transform-box:fill-box; transform-origin:50% 100%;
  animation:spikeUp .42s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:calc(.7s + 3 * 3.0s + .55s + var(--k) * .17s); }
@keyframes spikeUp{ from{opacity:0;transform:scaleY(0);} to{opacity:1;transform:scaleY(1);} }

/* The adjoining core is climbed lift by lift: each pour rises inside its
   formwork, then a deck slab is cast on top of it, and only then does the next
   pour start. Eight lifts, 420ms apart, so it reads as work rather than a wipe. */
.lift__wall{fill:rgba(127,178,217,0.10);stroke:none;opacity:0;
  transform-box:fill-box;transform-origin:50% 100%;
  animation:liftPour .60s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:calc(.7s + 4 * 3.0s + .50s + var(--l) * .42s);}
@keyframes liftPour{ from{opacity:0;transform:scaleY(0);} to{opacity:.92;transform:scaleY(1);} }

.lift__deck{stroke:#7FB2D9;stroke-width:1.3;opacity:0;
  transform-box:fill-box;transform-origin:0% 50%;
  animation:deckCast .34s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:calc(.7s + 4 * 3.0s + .92s + var(--l) * .42s);}
@keyframes deckCast{ from{opacity:0;transform:scaleX(0);} to{opacity:.8;transform:scaleX(1);} }

/* ---------- Crane: slow slew on top of the existing trolley/hoist cycle ---------- */
.hoist-cage{ animation:hoistRide 14s ease-in-out infinite 1.5s; }
@keyframes hoistRide{ 0%,8%{transform:translateY(0);} 42%,58%{transform:translateY(-150px);} 92%,100%{transform:translateY(0);} }




/* two lines guaranteed on desktop; phones may wrap */
@media (min-width: 900px){ .rot__line{ white-space:nowrap; }
  .hero-rotator.rot--allow-wrap .rot__line{ white-space:normal; } }

/* ---------- Sky ---------- */
.bird{ animation:birdDrift 46s linear infinite; animation-delay:calc(var(--b) * -8s); }
/* Plane. Endpoints are lengths applied as SVG user units, so the path is pinned
   to the viewport rather than to the drawing panel. p0/p3 sit past each screen
   edge; p1/p2 shape slow-in, fast-pass, slow-out; ya/yb are entry/exit altitude. */
.plane{--p0:-95vw;--p1:-33.2vw;--p2:18.2vw;--p3:80vw;--ya:30px;--yb:-10px;
  opacity:1;animation:planeFly 150s linear 20s infinite backwards;will-change:transform;}
.plane__scale{animation:planeNear 150s linear 20s infinite backwards;}
/* tablets: drawing is a centred 420px panel, so the path needs overshoot */
@media (max-width:980px){
  .plane{--p0:-500px;--p1:82px;--p2:568px;--p3:1150px;--ya:150px;--yb:40px;}
}
/* phones: drawing is edge to edge, so viewBox x maps 1:1 to the screen and the
   endpoints are exact user units - no overshoot needed at any phone width */
@media (max-width:560px){
  .plane{--p0:-80px;--p1:202px;--p2:438px;--p3:760px;--ya:150px;--yb:40px;}
}
@keyframes planeFly{
  0%   {transform:translate(var(--p0), var(--ya));}
  11%  {transform:translate(var(--p1), calc(var(--ya) + 0.353 * (var(--yb) - var(--ya))));}
  15%  {transform:translate(var(--p2), calc(var(--ya) + 0.647 * (var(--yb) - var(--ya))));}
  30%  {transform:translate(var(--p3), var(--yb));}
  100% {transform:translate(var(--p3), var(--yb));}
}
@keyframes planeNear{
  0%{transform:scale(.145);} 9.8%{transform:scale(.163);} 13%{transform:scale(.20);}
  16.3%{transform:scale(.163);} 30%{transform:scale(.145);} 100%{transform:scale(.145);}
}
.plane__trail{animation:trailFade 150s linear 20s infinite backwards;}
@keyframes trailFade{ 0%,18%{opacity:.34} 30%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .plane{display:none;} }
@keyframes birdDrift{
  0%{ transform:translate(120px,0); opacity:0; }
  8%{ opacity:.85; }
  88%{ opacity:.85; }
  100%{ transform:translate(-420px,-26px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .bird{ animation:none; }
}

/* ---------- Windows: lights come on well after the structure tops out ---------- */
.win{ fill:rgba(127,178,217,0.05); stroke:none; }
.win--lit{ fill:#E8590C; opacity:0;
  animation:winOn 2.1s ease-out forwards;
  animation-delay:calc(17.6s + var(--w) * 0.13s); }
@keyframes winOn{ 0%{opacity:0;} 60%{opacity:.58;} 100%{opacity:.4;} }

/* some come on, then go dark again and stay dark */
.win--goout{
  animation:
    winOn 2.1s ease-out calc(17.6s + var(--w) * 0.13s) forwards,
    winOff 3.5s ease-in-out calc(24s + var(--w) * 0.9s) forwards;
}
@keyframes winOff{ from{opacity:.4;} to{opacity:.13;} }

/* others keep a slow occupied cycle */
.win--flicker{
  animation:
    winOn 2.1s ease-out calc(17.6s + var(--w) * 0.13s) forwards,
    winIdle 11s ease-in-out calc(20s + var(--w) * 0.55s) infinite;
}
@keyframes winIdle{ 0%,100%{opacity:.4;} 45%{opacity:.15;} 70%{opacity:.3;} }
@media (prefers-reduced-motion: reduce){ .win--lit{ opacity:.4; animation:none; } }


/* ---------- Supporting paragraph: soft crossfade, synced to the headline ---------- */
.hero-sub-rotator{ position:relative; display:block; margin-top:10px; }
.hero-sub-rotator .sub{ position:absolute; top:0; left:0; right:0; opacity:0;
  transform:translateY(6px); transition:opacity .6s ease, transform .6s ease; }
.hero-sub-rotator .sub.is-active{ opacity:1; transform:translateY(0); transition-delay:.22s; }
@media (prefers-reduced-motion: reduce){
  .hero-sub-rotator .sub{ transition:none; transform:none; }
  .hero-sub-rotator .sub:not(.is-active){ display:none; }
}

/* ---------- Headline rotator: line mask reveal ---------- */
.hero h1.hero-rotator{ position:relative; display:block; margin-bottom:0; font-size:clamp(24px,2.6vw,32px); }
.hero-rotator .rot{ position:absolute; top:0; left:0; right:0; opacity:1; transition:opacity .42s ease; }
.hero-rotator .rot{ position:absolute; inset:0; display:block; pointer-events:none; }
.hero-rotator .rot.is-active{ pointer-events:auto; }
.rot__mask{ display:block; overflow:hidden; }
.rot__line{ display:block; transform:translateY(105%); transition:transform .72s cubic-bezier(.16,.84,.44,1); }
.rot.is-active .rot__line{ transform:translateY(0); }
.rot.is-active .rot__mask:nth-child(2) .rot__line{ transition-delay:.09s; }
.rot.is-leaving{ opacity:0; transition:opacity .42s ease; }
@media (min-width: 900px){
  .hero-sub-rotator .sub{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .building .floor{ opacity:1; transform:none; animation:none; }
  .floor .col,.room,.lift__wall,.lift__deck,.spike{ opacity:1; transform:none; animation:none; }
  .hoist-cage{ animation:none; }
  .rot__line{ transition:none; transform:none; }
  .hero-rotator .rot:not(.is-active){ display:none; }
}


/* ---------- Registrations & licences ---------- */
.credentials{background:var(--navy-950);color:var(--on-dark);}
.credentials .section-head h2,.credentials .section-head h1{color:var(--white);}
.credentials .section-head p{color:var(--on-dark-dim);}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--blueprint-dim);border:1px solid var(--blueprint-dim);}
.cred-card{background:var(--navy-950);padding:30px 26px;}
.cred-card__issuer{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--blueprint);}
.cred-card__title{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--white);margin-top:12px;line-height:1.15;}
.cred-card__ref{display:block;font-family:var(--font-mono);font-size:13px;color:var(--oxide-600);margin-top:10px;letter-spacing:.03em;}
.cred-card__note{font-size:13.5px;color:var(--on-dark-dim);margin-top:14px;line-height:1.55;}
@media (max-width:900px){ .cred-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cred-grid{grid-template-columns:1fr;} }

/* ---------- Portfolio: filters, grid, load more ---------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.pf-chip{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--concrete-300);background:transparent;color:var(--ink-700);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;}
.pf-chip:hover{border-color:var(--oxide-600);color:var(--oxide-600);}
.pf-chip.is-active{background:var(--navy-950);border-color:var(--navy-950);color:#fff;}
.pf-empty{font-family:var(--font-mono);font-size:13px;color:var(--steel-500);margin-top:20px;}
.project-card{opacity:0;transform:translateY(14px);animation:pfIn .45s ease forwards;}
@keyframes pfIn{to{opacity:1;transform:translateY(0);}}
a.project-card{display:block;text-decoration:none;color:inherit;}
.project-card__go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--oxide-600);}
a.project-card:hover .project-card__go{gap:12px;}
a.project-card:focus-visible{outline:2px solid var(--oxide-600);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .project-card{opacity:1;transform:none;animation:none;} }


/* ---------- Build stage annotations ---------- */
.stage{ opacity:0; animation:stageOn 2.95s ease-out forwards; animation-delay:var(--s); }
@keyframes stageOn{ 0%{opacity:0;} 10%{opacity:1;} 78%{opacity:1;} 93%{opacity:0;} 100%{opacity:0;} }
.stage:last-of-type{ animation:stageHold 2.95s ease-out forwards; animation-delay:var(--s); }
@keyframes stageHold{ 0%{opacity:0;} 18%{opacity:1;} 100%{opacity:0.85;} }
@media (prefers-reduced-motion: reduce){
  .stage{ opacity:0; animation:none; }
  .stage:last-of-type{ opacity:0.85; animation:none; }
}

/* keep the two hero buttons on one row so the CTA clears the fold on phones */
@media (max-width:560px){
  .hero__ctas{gap:12px;flex-direction:column;align-items:stretch;}
  .hero__ctas .btn{padding:15px 20px;font-size:11.5px;letter-spacing:.05em;white-space:nowrap;justify-content:center;}
}

/* ---------- Managing Director's statement, as a signed letter ---------- */
.mdletter{background:var(--white);border:1px solid var(--concrete-300);padding:30px 28px;margin-top:26px;}
.mdletter__head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-500);border-bottom:1px solid var(--concrete-300);padding-bottom:12px;margin-bottom:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.mdletter__lead{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,3.2vw,25px);
  line-height:1.24;color:var(--ink-900);margin:0 0 18px;}
.mdletter p{color:var(--ink-700);font-size:16px;margin:0 0 16px;}
.mdletter p:last-of-type{margin-bottom:0;}
.mdletter__sign{margin-top:24px;padding-top:16px;border-top:1px solid var(--concrete-300);}
.mdletter__name{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:.01em;color:var(--ink-900);}
.mdletter__role{font-family:var(--font-mono);font-size:11.5px;color:var(--steel-500);margin-top:4px;}
@media (max-width:560px){ .mdletter{padding:24px 20px;} }

/* ---------- Client feedback: snap rail with peek ---------- */
.testi-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(310px,388px);gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:4px 0 18px;margin-top:40px;scrollbar-width:none;}
.testi-rail::-webkit-scrollbar{display:none;}
.testi-rail .testimonial-card{scroll-snap-align:start;height:100%;margin:0;}
.testi-rail:focus-visible{outline:2px solid var(--oxide-600);outline-offset:6px;}
/* peek: let the last card breathe so the edge shows there is more */
.testi-rail::after{content:"";display:block;width:6px;}
.testi-ui{display:flex;align-items:center;gap:20px;margin-top:6px;}
.testi-bar{position:relative;flex:1;height:2px;background:var(--concrete-300);}
.testi-bar span{position:absolute;left:0;top:0;height:100%;width:25%;background:var(--oxide-600);
  transition:transform .18s ease,width .18s ease;}
.testi-btns{display:flex;gap:8px;}
.testi-btns button{width:42px;height:42px;border:1px solid var(--concrete-300);background:none;
  color:var(--ink-900);font-size:15px;cursor:pointer;transition:border-color .2s,color .2s;}
.testi-btns button:hover{border-color:var(--oxide-600);color:var(--oxide-600);}
.testi-btns button[disabled]{opacity:.35;cursor:default;border-color:var(--concrete-300);color:var(--steel-500);}
@media (max-width:560px){
  .testi-rail{grid-auto-columns:minmax(80%,84%);gap:14px;}
  .testi-btns{display:none;}
}

/* ---------- Hero fills exactly one screen; stats begin just after it ---------- */
@media (max-width:980px){
  /* hero padding-top is 98px here, so the inner block ends exactly at 100svh */
  .hero__inner{min-height:calc(100svh - 98px);align-content:center;}
  .hero__statsrow{padding-top:40px;padding-bottom:4px;}
  .hero__statsrow .hero__stats{margin-top:0;}
}
@media (max-width:560px){
  /* hero padding-top is 92px at this breakpoint */
  .hero__inner{min-height:calc(100svh - 92px);}
  /* calls to action stack and run the full width rather than sitting side by side */
  .cta__actions{flex-direction:column;gap:12px;align-items:stretch;}
  .cta__actions .btn{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;}
}
/* Phones. The drawing is capped against svh - the viewport with the browser
   toolbars showing - so the hero fits one screen and View Our Work stays the
   last element visible. Where there is room, 100vw wins and it runs edge to edge. */
@media (max-width:560px){
  .hero__art{--art-cap:34svh;--art-w:min(100vw, calc(var(--art-cap) * 1.2308));
    max-width:none;width:var(--art-w);margin-bottom:-6px;
    /* one margin centres it when narrower than the column and bleeds it when wider */
    margin-left:calc((100% - var(--art-w)) / 2);margin-right:auto;}
  .hero__inner{gap:16px;}
  .plane{--p0:-300px;--p1:202px;--p2:438px;--p3:900px;}
}
@supports not (height:100svh){
  @media (max-width:560px){ .hero__art{--art-cap:32vh;} }
}
/* shorter screens: shrink the drawing further, and widen the plane's run-in,
   because a narrower drawing means fewer screen pixels per SVG user unit */
@media (max-width:560px) and (max-height:680px){
  .hero__art{--art-cap:29svh;}
}
@media (max-width:560px) and (max-height:600px){
  .hero__art{--art-cap:22svh;}
  .hero__inner{gap:10px;}
  .hero__sub,.hero__sub .sub{font-size:14px;line-height:1.5;}
  .hero .btn{padding:13px 18px;}
  .plane{--p0:-800px;--p3:1400px;}
}
@supports not (height: 100svh){
  @media (max-width:980px){ .hero__inner{min-height:calc(100vh - 98px);} }
}

/* ================= Shared full-screen sheet menu ================= */
.sheetmenu{position:fixed;inset:0;z-index:120;background:var(--navy-950);
  background-image:linear-gradient(rgba(127,178,217,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(127,178,217,.055) 1px,transparent 1px);
  background-size:38px 38px;clip-path:inset(0 0 100% 0);transition:clip-path .62s cubic-bezier(.16,.84,.44,1);
  display:flex;flex-direction:column;padding:104px 22px 24px;overflow-y:auto;}
.sheetmenu.is-open{clip-path:inset(0 0 0 0);}
.sheetmenu__head{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--blueprint);
  border-bottom:1px solid var(--blueprint-dim);padding-bottom:10px;margin-bottom:6px;display:flex;justify-content:space-between;}
/* brand lockup inside the full-screen menu */
.sheetmenu__brand{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:22px;opacity:0;transform:translateY(-10px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.16,.84,.44,1);transition-delay:170ms;}
.sheetmenu.is-open .sheetmenu__brand{opacity:1;transform:translateY(0);}
.sheetmenu__brandlink{display:flex;align-items:center;gap:12px;text-decoration:none;}
.sheetmenu__brand .brand__mark{width:44px;height:44px;flex:none;color:var(--oxide-600);}
.sheetmenu__brand .brand__text{display:flex;flex-direction:column;line-height:1;}
.sheetmenu__brand .brand__name{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:.03em;color:#fff;}
.sheetmenu__brand .brand__sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--on-dark-dim);margin-top:5px;}
.sheetmenu__est{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--blueprint);
  text-align:right;line-height:1.6;opacity:.8;white-space:nowrap;padding-top:4px;}
/* while the menu is open the header keeps only its close button */
body.menu-open .nav{z-index:130;background:transparent;box-shadow:none;border-bottom:0;backdrop-filter:none;}
body.menu-open .nav .brand,body.menu-open .nav__cta{opacity:0;pointer-events:none;transition:opacity .2s ease;}
.sheetmenu .mi{display:grid;grid-template-columns:56px 1fr;align-items:baseline;gap:12px;padding:15px 0 13px;
  border-bottom:1px solid rgba(127,178,217,.14);text-decoration:none;color:#fff;position:relative;
  opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,.84,.44,1);
  transition-delay:calc(var(--n) * 55ms + 120ms);}
.sheetmenu.is-open .mi{opacity:1;transform:translateY(0);}
.mi__sheet{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--blueprint);opacity:.85;}
.mi__label{font-family:var(--font-display);font-weight:800;font-size:27px;line-height:1;}
.mi__rule{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--oxide-600);transition:width .38s ease;}
.sheetmenu .mi:hover .mi__rule,.sheetmenu .mi:active .mi__rule,.sheetmenu .mi.is-here .mi__rule{width:100%;}
.sheetmenu .mi:hover .mi__sheet,.sheetmenu .mi.is-here .mi__sheet{color:var(--oxide-600);opacity:1;}
.sheetmenu__foot{margin-top:auto;padding-top:22px;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;transition-delay:600ms;}
.sheetmenu.is-open .sheetmenu__foot{opacity:1;transform:translateY(0);}
.sheetmenu__cta{display:flex;align-items:center;justify-content:center;background:var(--oxide-600);color:#fff;
  text-decoration:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  padding:17px 18px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);}
.sheetmenu__reach{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.sheetmenu__reach a{border:1px solid var(--blueprint-dim);color:#fff;text-decoration:none;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.05em;padding:13px 12px;text-align:center;text-transform:uppercase;}
.sheetmenu__reach a:hover{border-color:var(--oxide-600);color:var(--oxide-600);}
.sheetmenu__meta{font-family:var(--font-mono);font-size:10px;color:var(--on-dark-dim);line-height:1.85;
  margin-top:14px;border-top:1px solid var(--blueprint-dim);padding-top:12px;letter-spacing:.04em;}
.nav__toggle span{transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .2s;}
.nav__toggle.is-open span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.nav__toggle.is-open span:nth-child(2){opacity:0;}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}
/* homepage -> inner page affordance */
.sectionlink{display:inline-flex;align-items:center;gap:13px;margin-top:28px;text-decoration:none;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oxide-600);transition:gap .3s ease;}
.sectionlink::after{content:"";width:32px;height:1px;background:currentColor;transition:width .4s cubic-bezier(.16,.84,.44,1);}
.sectionlink:hover::after,.sectionlink:focus-visible::after{width:56px;}
.sectionlink:focus-visible{outline:2px solid var(--oxide-600);outline-offset:4px;}
@media (prefers-reduced-motion:reduce){ .sectionlink,.sectionlink::after{transition:none;} }
.nav__links a.is-here{color:var(--oxide-600);}
@media (min-width:981px){ .sheetmenu{display:none;} }
@media (prefers-reduced-motion: reduce){
  .sheetmenu{transition:none;} .sheetmenu .mi,.sheetmenu__foot{transition:none;opacity:1;transform:none;}
}

/* inner pages: first section clears the fixed header */
.innerpage > section:first-child{padding-top:140px;}
@media (max-width:980px){ .innerpage > section:first-child{padding-top:118px;} }

/* header must never be transparent over page content */
.nav--solid{background:var(--navy-950);border-bottom:1px solid var(--blueprint-dim);box-shadow:0 6px 26px rgba(0,0,0,.28);}
/* the hero always covers at least one screen so nothing light shows beneath it */
@media (max-width:980px){ .hero{min-height:100lvh;} }
@supports not (height: 100lvh){ @media (max-width:980px){ .hero{min-height:100vh;} } }

/* ---- Page titles ----------------------------------------------------------
   These headings are <h1> so each page has exactly one, which is what search
   engines read as the page's subject. The type is set explicitly here so the
   tag change carries no visual change. The About page heading is the exception:
   it had no size rule at all and was rendering at the browser default 24px, so
   it now matches every other page title. */
h1.section-head{font-size:clamp(30px,4vw,44px);}
.section-head h1{font-size:clamp(30px,4vw,44px);margin-top:16px;}

/* ---- Section-by-section scrolling -----------------------------------------
   Homepage only, desktop only, and PROXIMITY rather than mandatory: the page
   scrolls normally and only settles onto a section when you come to rest near
   one. Mandatory snap would trap people inside the two sections that run taller
   than a screen, so those are exempt along with the short stat strip.
   scroll-margin-top clears the fixed header, otherwise each section would snap
   with its heading tucked underneath it. */
@media (min-width:981px){
  html.is-home{scroll-snap-type:y proximity;}
  /* scroll-behavior:smooth and scroll-snap fight each other: the browser lets
     the flick coast to a stop, then animates the snap correction on top of it,
     which feels like the page tugging at you a beat after you let go. Here the
     snap is the only motion. Anchor links are glided in chrome.js instead, so
     the menu and footer still travel rather than jump. */
  html.is-home{scroll-behavior:auto;}
  html.is-home main > section{scroll-snap-align:start;scroll-margin-top:96px;}
  html.is-home main > section.statstrip,
  html.is-home main > section#projects,
  html.is-home main > section#transformation{scroll-snap-align:none;}
}
@media (prefers-reduced-motion:reduce){
  html.is-home{scroll-snap-type:none;}
}