/* Royal Contracting — site styles (premium pass)
   Layout concept: generous white space on a 12-column grid; photography carries the page; type is light and large;
   navy is reserved for the opening, one heritage band, the client band and the footer; gold appears only as fine detail. */
:root{
  --navy:#002366;
  --navy-deep:#001A4D;
  --gold:#D4AF37;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --tint:#F4F5F8;
  --ink:#141B2B;
  --heading:#0E1424;
  --muted:#5A6375;
  --line:#E3E6EC;
  --line-strong:#C3C9D4;
  --band:#002366;
  --band-ink:#F2F4F9;
  --band-muted:#AEB8CF;
  --focus:#D4AF37;
  --font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --step--1:0.8125rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:clamp(1.5rem,1.2rem + 1vw,1.95rem);
  --step-3:clamp(1.9rem,1.4rem + 1.7vw,2.75rem);
  --step-4:clamp(2.3rem,1.5rem + 2.8vw,3.9rem);
  --wrap:1280px;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --header-h:76px;
  --header-h-top:114px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --space:clamp(88px,11vw,168px);
}
@media all{:root{
  --paper:#070F24;--surface:#0C1630;--tint:#0C1630;--ink:#E9EDF5;--heading:#F4F6FA;--muted:#A0AABF;--line:#1C2946;--line-strong:#33446B;
  --band:#0A2A6E;--band-ink:#F2F4F9;--band-muted:#B5C0D8;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#070F24;--surface:#0C1630;--tint:#0C1630;--ink:#E9EDF5;--heading:#F4F6FA;--muted:#A0AABF;--line:#1C2946;--line-strong:#33446B;
  --band:#0A2A6E;--band-ink:#F2F4F9;--band-muted:#B5C0D8;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--heading);font-family:var(--font-body)}
h1,h2{font-weight:300;letter-spacing:-.025em;line-height:1.12}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:500;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.section{padding-block:var(--space)}
.section + .section{padding-top:0}
.section.tint{background:var(--tint)}
.section.tint + .section,.section + .section.tint{padding-top:var(--space)}
.lede{font-size:var(--step-1);font-weight:300;line-height:1.6;color:var(--muted);max-width:56ch}
.prose{max-width:62ch;display:grid;gap:1.1em}
.muted{color:var(--muted)}
.label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.photo{filter:saturate(.9) contrast(1.04) brightness(1.01)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:17px 30px;border-radius:0;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{background:transparent;color:var(--navy)}
.btn-ghost{background:transparent;color:var(--heading);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.text-link{position:relative;display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--heading);text-decoration:none;padding-bottom:6px}
.text-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:28px;background:var(--gold);transition:width .45s var(--ease)}
.text-link:hover::after{width:100%}
.band .text-link,.hero-full .text-link{color:#fff}

/* ---------- header ---------- */
.site-header{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:var(--surface);box-shadow:0 1px 0 var(--line);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-header.at-top{background:transparent;box-shadow:none}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.brand{display:block;flex:none}
.brand img{height:50px;width:auto}
.brand .logo-white{display:none}
.site-header.at-top .brand .logo-navy{display:none}
.site-header.at-top .brand .logo-white{display:block}
@media all{:root .brand .logo-navy{display:none}:root .brand .logo-white{display:block}}
:root[data-theme="dark"] .brand .logo-navy{display:none}
:root[data-theme="dark"] .brand .logo-white{display:block}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav a{position:relative;text-decoration:none;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);padding-block:10px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-header.at-top .nav a{color:#fff}
@media all{:root .site-header:not(.at-top) .nav a{color:var(--ink)}}
:root[data-theme="dark"] .site-header:not(.at-top) .nav a{color:var(--ink)}
.menu-toggle{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--navy);position:relative}
.menu-toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-toggle span:nth-child(1){top:17px}
.menu-toggle span:nth-child(2){top:25px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}
.site-header.at-top .menu-toggle{color:#fff}
@media (min-width:901px){
  .site-header .wrap{transition:max-width .6s var(--ease),min-height .6s var(--ease)}
  .brand img{transition:height .6s var(--ease)}
  .nav{transition:gap .6s var(--ease)}
  .nav a{transition:font-size .6s var(--ease),color .3s}
  .site-header.at-top .wrap{max-width:1080px;min-height:var(--header-h-top)}
  .site-header.at-top .brand img{height:75px}
  .site-header.at-top .nav{gap:clamp(26px,3.6vw,54px)}
  .site-header.at-top .nav a{font-size:1.1rem}
}
@media (max-width:900px){
  :root{--header-h:68px;--header-h-top:68px}
  .menu-toggle{display:block}
  .brand img{height:42px}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);padding:6px var(--gutter-r) 24px var(--gutter);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility 0s .45s}
  .nav.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease)}
  .nav a{padding:17px 0;border-bottom:1px solid var(--line);font-size:.8rem}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--gold)}
  .site-header.at-top:has(.nav.open){background:var(--band)}
  .site-header.at-top .nav{background:var(--band);border-bottom-color:transparent}
  .site-header.at-top .nav a{border-bottom-color:rgba(255,255,255,.14)}
}

/* ---------- opening animation ----------
   Build (unchanged): crown appears, gold lines draw outward, ROYAL drops in, CONTRACTING rises.
   Every piece is a clipped copy of the white header logo placed exactly as in the logo, so when the build is
   complete the whole box glides into the header and lands on the header logo with no swap. */
html{scrollbar-gutter:stable}
html.intro-playing,html.intro-playing body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;pointer-events:none;animation:intro-failsafe .6s ease 7s forwards}
.intro-bg{position:absolute;inset:0;background:var(--navy-deep);transition:opacity .9s var(--ease)}
.intro-box{position:fixed;left:50%;top:50%;width:min(360px,70vw);aspect-ratio:932/375;transform:translate(-50%,-50%);transform-origin:0 0;will-change:transform}
.intro-box img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* pieces, in logo coordinates (932 x 375) */
.ip-top{clip-path:inset(0 0 38.13% 0);opacity:0;transform:translateY(-14px);animation:intro-in .9s var(--ease-out) .75s forwards}
.ip-bottom{clip-path:inset(82.67% 0 0 0);opacity:0;transform:translateY(14px);animation:intro-in .9s var(--ease-out) .9s forwards}
.ip-crown{clip-path:inset(61.87% 42.92% 17.33% 45.92%);opacity:0;transform:scale(.7);transform-origin:51.56% 72%;animation:crown-in .6s var(--ease-out) .05s forwards}
.ip-line-l{clip-path:inset(69.87% 54.08% 22.13% 45.92%);animation:line-l .8s var(--ease-out) .35s forwards}
.ip-line-r{clip-path:inset(69.87% 42.92% 22.13% 57.08%);animation:line-r .8s var(--ease-out) .35s forwards}
@keyframes crown-in{to{opacity:1;transform:none}}
@keyframes intro-in{to{opacity:1;transform:none}}
@keyframes line-l{to{clip-path:inset(69.87% 54.08% 22.13% 0)}}
@keyframes line-r{to{clip-path:inset(69.87% 0 22.13% 57.08%)}}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
/* user scrolled during the build: snap the build to finished */
.intro.hurry .intro-box img{animation:none;opacity:1;transform:none;transition:opacity .2s,transform .2s}
.intro.hurry .ip-line-l{clip-path:inset(69.87% 54.08% 22.13% 0)}
.intro.hurry .ip-line-r{clip-path:inset(69.87% 0 22.13% 57.08%)}
/* flight into the header */
.intro.flying .intro-bg{opacity:0}
.intro.flying .intro-box{transition:transform var(--fly,1s) cubic-bezier(.65,0,.25,1)}
.intro.hurry .intro-bg{transition-duration:.45s}
.intro.fading{transition:opacity .6s var(--ease);opacity:0}
html.intro-playing .site-header .brand{opacity:0}
html.intro-playing:not(.intro-nav) .site-header .nav,html.intro-playing:not(.intro-nav) .site-header .menu-toggle{opacity:0}
.site-header .nav,.site-header .menu-toggle{transition:opacity .6s var(--ease)}
html.intro-seen .intro{display:none}

/* ---------- home opening ---------- */
.hero-full{position:relative;min-height:min(100vh,900px);display:flex;align-items:flex-end;background:var(--navy-deep);color:#fff;overflow:hidden}
.hero-full .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:hero-zoom 3.2s var(--ease-out) var(--hero-delay,1.9s) forwards}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,22,66,.86) 0%,rgba(0,30,90,.6) 46%,rgba(0,30,90,.18) 100%),linear-gradient(0deg,rgba(0,18,55,.55),rgba(0,18,55,0) 45%)}
.hero-full::after{content:"";position:absolute;inset:0 0 auto;height:200px;background:linear-gradient(180deg,rgba(0,18,55,.6),rgba(0,18,55,0));pointer-events:none}
.hero-inner{position:relative;z-index:1;width:100%;padding-top:calc(var(--header-h-top) + env(safe-area-inset-top,0px) + 64px);padding-bottom:clamp(96px,12vh,140px)}
.hero-copy{max-width:720px;display:flex;flex-direction:column;gap:30px}
.hero-copy > *{opacity:0;transform:translateY(22px);animation:rise 1.1s var(--ease-out) forwards;animation-delay:calc(var(--hero-delay,1.9s) + var(--d,0s))}
.hero-copy .label{color:rgba(255,255,255,.75);--d:.1s}
.hero-full h1{color:#fff;font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);--d:.2s}
.hero-full .lede{color:#D3DAEA;max-width:52ch;--d:.35s}
.hero-full .actions{--d:.5s}
.hero-full .btn{background:#fff;color:var(--navy);border-color:#fff}
.hero-full .btn:hover{background:transparent;color:#fff}
.hero-full .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hero-full .btn-ghost:hover{border-color:#fff}
.hero-caption{position:absolute;z-index:1;right:var(--gutter-r);bottom:30px;font-size:var(--step--1);color:rgba(255,255,255,.7);opacity:0;animation:fade 1s ease forwards;animation-delay:calc(var(--hero-delay,1.9s) + .8s)}
.hero-down{position:absolute;z-index:1;left:50%;bottom:24px;transform:translateX(-50%);background:none;border:0;color:#fff;cursor:pointer;padding:12px;opacity:0;animation:fade 1s ease forwards;animation-delay:calc(var(--hero-delay,1.9s) + 1s)}
.hero-down svg{animation:nudge 2.6s ease-in-out infinite}
:root{--hero-delay:2.35s}
html.intro-skip{--hero-delay:.1s}
@keyframes hero-zoom{to{transform:scale(1)}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-width:700px){.hero-full{min-height:88vh}.hero-caption{display:none}}

/* ---------- section heads ---------- */
.head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:28px 72px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.head .label{grid-column:1/-1;margin-bottom:-8px}
@media (max-width:860px){.head{grid-template-columns:1fr}}
.center-head{display:grid;justify-items:center;text-align:center;gap:26px;margin-bottom:clamp(48px,6vw,80px)}
.crown-rule{display:flex;align-items:center;gap:14px;width:220px}
.crown-rule i{flex:1;height:2px;background:var(--gold)}
.crown-rule img{height:30px;width:auto;flex:none}

/* ---------- project index ---------- */
.index{border-top:1px solid var(--line)}
.idx-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem) 6.5rem;gap:32px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--heading)}
.idx-name{font-size:clamp(1.25rem,1rem + 1.1vw,2rem);font-weight:300;letter-spacing:-.02em;transition:transform .6s var(--ease),color .3s}
.idx-meta{font-size:var(--step--1);color:var(--muted);letter-spacing:.04em;text-align:right}
.idx-val{font-size:1.05rem;font-weight:500;font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:right}
.idx-img{position:absolute;right:20%;top:50%;width:300px;aspect-ratio:3/2;object-fit:cover;opacity:0;transform:translateY(-50%) scale(.94);pointer-events:none;transition:opacity .45s var(--ease),transform .7s var(--ease);z-index:2;box-shadow:0 30px 60px -20px rgba(0,20,60,.35)}
.idx-row:hover .idx-name{transform:translateX(14px);color:var(--navy)}
.idx-row:hover .idx-img{opacity:1;transform:translateY(-50%) scale(1)}
@media all{:root .idx-row:hover .idx-name{color:#fff}}
@media (hover:none),(max-width:900px){.idx-img{display:none}.idx-meta{text-align:left}.idx-row{grid-template-columns:1fr auto;gap:6px 18px}.idx-meta{grid-row:2;grid-column:1}.idx-val{grid-row:1/3;grid-column:2;align-self:center}}

/* ---------- figures ---------- */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px}
.fig{display:grid;gap:14px;align-content:start}
.fig .n{font-size:clamp(2.6rem,1.8rem + 2.6vw,4.2rem);font-weight:300;letter-spacing:-.035em;line-height:1;color:var(--heading);font-variant-numeric:lining-nums}
.fig .n small{font-size:.42em;letter-spacing:0;margin-left:.15em;font-weight:400}
.fig p{font-size:.92rem;color:var(--muted);max-width:26ch;line-height:1.55}
.fig::before{content:"";width:28px;height:1px;background:var(--gold);margin-bottom:6px}
@media (max-width:900px){.figures{grid-template-columns:1fr 1fr}}

/* ---------- owner's side ---------- */
.accountable{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 56px}
.accountable > div{display:grid;gap:14px;align-content:start}
.accountable h3{font-size:1.15rem}
.accountable p{color:var(--muted);font-size:.98rem}
@media (max-width:860px){.accountable{grid-template-columns:1fr;gap:40px}}

/* ---------- featured projects ---------- */
.features{display:grid;gap:clamp(80px,9vw,140px)}
.feature{display:grid;gap:36px}
.feature-media{display:block;overflow:hidden;aspect-ratio:21/10;background:var(--line)}
.feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.feature:hover .feature-media img{transform:scale(1.04)}
.feature-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px 72px}
.feature-body .t{display:grid;gap:14px;align-content:start}
.feature-body .t h3{font-size:var(--step-2);font-weight:300;letter-spacing:-.02em}
.feature-body .d{display:grid;gap:24px;align-content:start}
.feature-body .d p{color:var(--muted)}
@media (max-width:860px){.feature-body{grid-template-columns:1fr}.feature-media{aspect-ratio:4/3}}

/* ---------- spec sheet ---------- */
.spec{margin:0;font-size:.92rem;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:0 20px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.spec dt,.spec dd{margin:0}
.spec dt{color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.spec dd{font-weight:500;min-width:0}
.spec{container-type:inline-size}
@container (max-width:340px){.spec-row{grid-template-columns:1fr;gap:4px}}

/* ---------- sectors ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.sector{display:grid;gap:18px;text-decoration:none;align-content:start}
.sector .ph{aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.sector .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.sector:hover .ph img{transform:scale(1.05)}
.sector h3{font-size:1.15rem}
.sector p{color:var(--muted);font-size:.94rem;margin-top:-6px}
@media (max-width:900px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sectors{grid-template-columns:1fr}.sector .ph{aspect-ratio:4/3}}

/* ---------- process (a real sequence) ---------- */

/* ---------- bands ---------- */
.band{background:var(--band);color:var(--band-ink)}
.band h2,.band h3{color:#fff}
.band .lede,.band p.muted,.band .muted{color:var(--band-muted)}
.band-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center;padding-block:var(--space)}
.band-split .year{font-size:clamp(5rem,12vw,10rem);font-weight:200;line-height:.85;color:#fff;letter-spacing:-.05em}
.band-split .year small{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--band-muted);margin-top:22px;font-weight:600}
@media (max-width:860px){.band-split{grid-template-columns:1fr}}
.cta-light{padding-block:var(--space);text-align:center;border-top:1px solid var(--line)}
.cta-light .inner{display:grid;justify-items:center;gap:28px}
.cta-light h2{max-width:20ch}
.cta-light .lede{margin-inline:auto}

/* ---------- clients ---------- */
.clients{background:var(--band);color:var(--band-ink)}
.clients .wrap{padding-block:clamp(64px,8vw,104px);display:grid;gap:44px}
.clients-title{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--band-muted);text-align:center}
.client-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 40px;align-items:center}
.client{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:64px;text-align:center}
.client img{max-height:44px;max-width:min(170px,100%);width:auto;height:auto;object-fit:contain;opacity:.82;transition:opacity .4s var(--ease)}
.client:hover img{opacity:1}
.client span{font-weight:500;font-size:1rem;color:#fff;opacity:.85}
.client small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--band-muted);font-weight:600}
@media (max-width:760px){.client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}}

/* ---------- page heads ---------- */
.page-head{background:var(--band);color:var(--band-ink)}
.page-head .wrap{padding-top:calc(var(--header-h-top) + env(safe-area-inset-top,0px) + clamp(56px,7vw,104px));padding-bottom:clamp(64px,8vw,112px);display:grid;gap:24px}
.page-head h1{color:#fff}
.page-head .lede{color:var(--band-muted)}
.page-head .label,.crumb,.crumb a{color:var(--band-muted)}
.crumb{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.crumb a{text-decoration:none}
.crumb a:hover{color:#fff}
.page-head .wrap > *{opacity:0;transform:translateY(16px);animation:rise 1s var(--ease-out) .05s forwards}
.page-head .wrap > :nth-child(2){animation-delay:.15s}

/* ---------- projects index page ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px 32px;margin-bottom:56px;border-bottom:1px solid var(--line)}
.filters button{position:relative;font:600 .72rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:16px 0;cursor:pointer;transition:color .3s}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .45s var(--ease)}
.filters button:hover{color:var(--heading)}
.filters button[aria-pressed="true"]{color:var(--heading)}
.filters button[aria-pressed="true"]::after{transform:scaleX(1)}
.grid-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:88px 40px}
.card{display:grid;gap:18px;text-decoration:none;align-content:start}
.card[hidden]{display:none}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .ph img{transform:scale(1.04)}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .meta .val{color:var(--heading)}
.card h3{font-size:var(--step-2);font-weight:300;letter-spacing:-.02em}
@media (max-width:760px){.grid-projects{grid-template-columns:1fr;gap:64px}}

/* ---------- project detail ---------- */
.p-hero-full{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;background:var(--navy-deep);color:#fff;overflow:hidden}
.p-hero-full > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:hero-zoom 2.6s var(--ease-out) .1s forwards}
.p-hero-full::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,18,55,.88) 0%,rgba(0,18,55,.35) 50%,rgba(0,18,55,.55) 100%);z-index:1}
.p-hero-full .wrap{position:relative;z-index:2;width:100%;padding-top:calc(var(--header-h-top) + 80px);padding-bottom:clamp(56px,7vw,96px);display:grid;gap:22px}
.p-hero-full h1{color:#fff;max-width:18ch}
.p-hero-full .lede{color:#D3DAEA}
.p-hero-full .crumb{color:rgba(255,255,255,.7)}
.p-hero-full .wrap > *{opacity:0;transform:translateY(18px);animation:rise 1s var(--ease-out) forwards}
.p-hero-full .wrap > :nth-child(2){animation-delay:.12s}
.p-hero-full .wrap > :nth-child(3){animation-delay:.24s}
.p-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,104px);align-items:start}
.p-side{position:sticky;top:110px;display:grid;gap:28px}
@media (max-width:900px){.p-grid{grid-template-columns:1fr}.p-side{position:static;order:-1}}
.p-body{display:grid;gap:64px}
.p-body .prose{font-size:1.1rem;font-weight:300;line-height:1.75}
.p-body h3{margin-bottom:18px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--gold)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:48px}
.callout{background:var(--tint);padding:clamp(32px,4vw,48px);display:grid;gap:18px}
.callout .big{font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);font-weight:300;letter-spacing:-.03em;color:var(--heading);line-height:1}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;display:grid;gap:10px}
.gallery figure:first-child{grid-column:1/-1}
.gallery .gph{overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line);transition:transform 1.4s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figure:first-child img{aspect-ratio:16/9}
.gallery figcaption{font-size:var(--step--1);color:var(--muted)}
.next-prev{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 72px;padding-block:48px;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-size:var(--step-2)!important;font-weight:300;letter-spacing:-.02em}
.svc .body{display:grid;gap:20px}
.svc .body p{color:var(--muted);max-width:60ch}
@media (max-width:800px){.svc{grid-template-columns:1fr}}
.media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:center}
.media-split .ph{aspect-ratio:4/5;overflow:hidden}
.media-split .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.media-split:hover .ph img{transform:scale(1.03)}
.media-split h2{font-size:var(--step-3)}
@media (max-width:860px){.media-split{grid-template-columns:1fr}.media-split .ph{aspect-ratio:4/3}}
.tag-list{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0;padding:0}
.tag-list li{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--heading);padding-left:16px;position:relative}
.tag-list li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--gold)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-list{display:grid;gap:30px}
.contact-list .k{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.contact-list .v{font-weight:400;font-size:1.15rem}
.contact-list .v a{text-decoration:none}
form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:28px 28px}
.field{display:grid;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;padding:10px 0;width:100%;transition:border-color .3s}
.field select option{color:#141B2B}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--navy)}
.form-status{grid-column:1/-1;font-weight:500;color:var(--heading)}
@media (max-width:600px){form.enquiry{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:#C9D1E3;font-size:.94rem}
.site-footer .wrap{padding-block:clamp(72px,8vw,104px) 40px;display:grid;gap:56px}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.foot-grid h4{color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-grid a{text-decoration:none;transition:color .3s}
.foot-grid a:hover{color:#fff}
.foot-mark{display:flex;align-items:center;gap:22px}
.foot-mark i{flex:1;height:1px;background:var(--gold);opacity:.9}
.foot-mark img{height:34px;width:auto;flex:none}
.foot-base{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:var(--step--1);color:#8E9BB8;letter-spacing:.02em}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > div:last-child{grid-column:1/-1}.foot-mark img{height:28px}}

/* ---------- scroll reveal (only applied by script to content below the first screen) ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .intro{display:none}
  .rv{opacity:1;transform:none}
}

/* single-file preview views */
main[data-view][hidden]{display:none!important}

/* centred text in every page's opening banner */
.hero-full{align-items:center}
.hero-inner{padding-bottom:clamp(110px,14vh,160px)}
.hero-copy{margin-inline:auto;align-items:center;text-align:center;max-width:860px}
.hero-full .lede{margin-inline:auto}
.hero-full .actions{justify-content:center}
.hero-shade{background:linear-gradient(0deg,rgba(0,18,55,.78) 0%,rgba(0,22,66,.55) 50%,rgba(0,22,66,.62) 100%)}
.page-head .wrap{justify-items:center;text-align:center}
.page-head .lede{margin-inline:auto}
.p-hero-full .wrap{justify-items:center;text-align:center}
.p-hero-full h1{margin-inline:auto}
.p-hero-full .lede{margin-inline:auto;max-width:56ch}

/* logo: both versions share one spot and crossfade while the size eases down (no instant swap) */
.brand{position:relative}
.brand img{display:block!important;transition:height .6s var(--ease),opacity .5s var(--ease)}
.brand .logo-white{opacity:0}
.brand .logo-navy{position:absolute;left:0;top:0;opacity:1}
.site-header.at-top .brand .logo-white{opacity:1}
.site-header.at-top .brand .logo-navy{opacity:0}
@media all{:root .brand .logo-white{opacity:1}:root .brand .logo-navy{opacity:0}}
:root[data-theme="dark"] .brand .logo-white{opacity:1}
:root[data-theme="dark"] .brand .logo-navy{opacity:0}

/* header grow/shrink by transform only (scale + slide), so every browser animates it in one smooth motion */
@media (min-width:901px){
  .site-header{--shift:calc((min(100vw, 1280px) - min(100vw, 1080px)) / 2)}
  .site-header .wrap,.site-header.at-top .wrap{max-width:var(--wrap);transition:min-height .7s var(--ease)}
  .site-header.at-top .wrap{min-height:var(--header-h-top)}
  .brand img,.site-header.at-top .brand img{height:50px;transition:opacity .5s var(--ease)}
  .nav,.site-header.at-top .nav{gap:clamp(18px,2.6vw,40px)}
  .nav a,.site-header.at-top .nav a{font-size:.74rem;transition:color .35s var(--ease)}
  .brand{transform-origin:left center;transition:transform .7s var(--ease)}
  .site-header .nav{transform-origin:right center;transition:transform .7s var(--ease),opacity .6s var(--ease)}
  .site-header.at-top .brand{transform:translateX(var(--shift)) scale(1.5)}
  .site-header.at-top .nav{transform:translateX(calc(-1 * var(--shift))) scale(1.5)}
}

.client img.to-white{filter:brightness(0) invert(1)}

/* ---------- map: offices and project locations ---------- */
:root{--map-ca:#002366;--map-us:#C9CFDA}
@media all{:root{--map-ca:#5E7BC2;--map-us:#2A3A5E}}
:root[data-theme="dark"]{--map-ca:#5E7BC2;--map-us:#2A3A5E}
.map-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px);align-items:center}
.map-copy{display:grid;gap:26px;align-content:start}
.offices{display:grid;gap:28px;margin-top:8px}
.office{display:grid;gap:6px;padding-left:20px;border-left:1px solid var(--gold)}
.office h3{font-size:var(--step-2);font-weight:300;letter-spacing:-.02em}
.office p{color:var(--muted);font-size:.95rem}
.office p a{text-decoration:none}
.map-legend{list-style:none;margin:0;padding:0;display:flex;gap:28px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.map-legend li{display:flex;align-items:center;gap:10px}
.map-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.lg-office{background:var(--gold)}
.lg-proj{background:var(--paper);border:2px solid var(--map-ca)}
.map-towns{font-size:.9rem;color:var(--muted);line-height:1.8}
.map{margin:0;display:grid;gap:10px}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map figcaption{font-size:.7rem;color:var(--muted);text-align:right}
.m-ca{stroke:var(--map-ca);stroke-width:6.2;stroke-linecap:round;opacity:.9}
.m-us{stroke:var(--map-us);stroke-width:6.2;stroke-linecap:round}
.m-water{font:italic 300 15px var(--font-body);fill:var(--muted);letter-spacing:.06em;opacity:.8}
.m-country{font:600 11px var(--font-body);fill:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.m-proj circle{fill:var(--paper);stroke:var(--map-ca);stroke-width:3;transition:r .3s var(--ease)}
.section.tint .m-proj circle{fill:var(--tint)}
.m-proj:hover circle{r:9}
.m-town{font:600 13px var(--font-body);fill:var(--heading);letter-spacing:.08em;paint-order:stroke;stroke:var(--tint);stroke-width:5px;stroke-linejoin:round}
.m-office .core{fill:var(--gold);stroke:#fff;stroke-width:3}
.m-office .pulse{fill:none;stroke:var(--gold);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:map-pulse 2.6s var(--ease-out) infinite}
.m-office polyline{fill:none;stroke:var(--gold);stroke-width:1.5}
.m-office-name{paint-order:stroke;stroke:var(--tint);stroke-width:6px;font:600 16px var(--font-body);fill:var(--heading);letter-spacing:.2em}
.m-office-sub{paint-order:stroke;stroke:var(--tint);stroke-width:6px;font:400 13px var(--font-body);fill:var(--muted);letter-spacing:.04em}
@keyframes map-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@media (max-width:900px){.map-grid{grid-template-columns:1fr}}
@media (max-width:600px){.m-town{font-size:24px}.m-office-name{font-size:28px}.m-office-sub{font-size:22px}.m-water{font-size:24px}.m-country{font-size:18px}.m-proj circle{r:10}.m-office .core{r:14}}

/* ---------- street map: office location ---------- */
:root{--sm-ground:#EEF0F4;--sm-road:#FFFFFF;--sm-case:#C9CFDA;--sm-bldg:#DDE1E8;--sm-park:#DFE5DC;--sm-water:#C9D5E8;--sm-label:#5A6375}
@media all{:root{--sm-ground:#0C1630;--sm-road:#26365C;--sm-case:#33446B;--sm-bldg:#16234A;--sm-park:#15263F;--sm-water:#0A1D45;--sm-label:#A0AABF}}
:root[data-theme="dark"]{--sm-ground:#0C1630;--sm-road:#26365C;--sm-case:#33446B;--sm-bldg:#16234A;--sm-park:#15263F;--sm-water:#0A1D45;--sm-label:#A0AABF}
.street-map{position:relative;aspect-ratio:1120/660;max-height:680px;width:100%;overflow:hidden;background:var(--sm-ground)}
.street-map > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sm-ground{fill:var(--sm-ground)}
.sm-park{fill:var(--sm-park)}
.sm-water{fill:var(--sm-water)}
.sm-creek{fill:none;stroke:var(--sm-water);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.sm-bldg{fill:var(--sm-bldg)}
.sm-road,.sm-case{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sm-road{stroke:var(--sm-road)}
.sm-road.r4{stroke-width:5}
.sm-road.r3{stroke-width:10}
.sm-road.r2{stroke-width:12}
.sm-road.r1{stroke-width:15}
.sm-case.r1{stroke:var(--sm-case);stroke-width:19}
.sm-label{font:500 12.5px var(--font-body);fill:var(--sm-label);text-anchor:middle;letter-spacing:.04em;paint-order:stroke;stroke:var(--sm-road);stroke-width:4px;stroke-linejoin:round}
.sm-label.key{font-weight:600;font-size:14px;fill:var(--heading);letter-spacing:.08em;text-transform:uppercase}
.sm-pin .core{fill:var(--gold);stroke:#fff;stroke-width:4}
.sm-pin .halo{fill:var(--gold);opacity:.16}
.sm-pin .pulse{fill:none;stroke:var(--gold);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:sm-pulse 2.8s var(--ease-out) infinite}
@keyframes sm-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.sm-card{position:absolute;left:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);background:var(--surface);padding:clamp(26px,3vw,40px);display:grid;gap:8px;width:min(340px,calc(100% - 32px));box-shadow:0 30px 70px -30px rgba(0,20,60,.35)}
.sm-card h3{font-size:var(--step-2);font-weight:300;letter-spacing:-.02em;margin-top:6px}
.sm-card p{color:var(--ink);font-size:.98rem}
.sm-card p.muted{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.sm-card p a{text-decoration:none}
.sm-card .btn{justify-self:start}
.sm-credit{position:absolute;right:10px;bottom:8px;font-size:.66rem;color:var(--sm-label);background:color-mix(in srgb,var(--sm-ground) 80%,transparent);padding:2px 6px}
@media (max-width:760px){
  .street-map{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;overflow:visible;background:none}
  .street-map > svg{position:relative;inset:auto;aspect-ratio:1/1;height:auto}
  .sm-card{position:static;transform:none;width:100%;box-shadow:none;border:1px solid var(--line)}
  .sm-credit{position:static;text-align:right;background:none;padding:6px 0 0}
}

/* ---------- recent projects: list beside a fixed photo panel (photo never covers text) ---------- */
.idx-img{display:none!important}
.index-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,80px);align-items:start}
.idx-row{grid-template-columns:minmax(0,1fr) 6rem;gap:6px 24px;padding:26px 0 26px 0;position:relative}
.idx-row .idx-thumb{display:none}
.idx-row .idx-name{grid-column:1;transition:transform .6s var(--ease),color .3s}
.idx-row .idx-meta{grid-column:1;grid-row:2;text-align:left}
.idx-row .idx-val{grid-column:2;grid-row:1/3;align-self:center}
.idx-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .7s var(--ease)}
.idx-row.on::before{width:100%}
.idx-row.on .idx-name{transform:translateX(10px);color:var(--navy)}
.idx-row:hover .idx-name{transform:translateX(10px);color:var(--navy)}
@media all{:root .idx-row.on .idx-name,:root .idx-row:hover .idx-name{color:#fff}}
.idx-preview{position:sticky;top:120px;display:grid}
.idx-shot{grid-area:1/1;margin:0;display:grid;gap:14px;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.idx-shot.on{opacity:1}
.idx-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--line);transform:scale(1.04);transition:transform 1.4s var(--ease)}
.idx-shot.on img{transform:none}
.idx-shot figcaption{display:flex;justify-content:space-between;gap:16px;font-size:var(--step--1);color:var(--muted)}
.idx-shot figcaption span:first-child{color:var(--heading);font-weight:500}
@media (max-width:900px){
  .index-split{grid-template-columns:1fr}
  .idx-preview{display:none}
  .idx-row{grid-template-columns:72px minmax(0,1fr) auto;gap:4px 16px;align-items:center}
  .idx-row .idx-thumb{display:block;grid-column:1;grid-row:1/3;width:72px;aspect-ratio:1;overflow:hidden}
  .idx-row .idx-thumb img{width:100%;height:100%;object-fit:cover}
  .idx-row .idx-name{grid-column:2;font-size:1.15rem}
  .idx-row .idx-meta{grid-column:2;grid-row:2}
  .idx-row .idx-val{grid-column:3;grid-row:1/3}
  .idx-row.on::before{width:0}
  .idx-row.on .idx-name{transform:none;color:var(--heading)}
}
.idx-row .idx-name{font-size:clamp(1.15rem,.95rem + .7vw,1.6rem);line-height:1.3}

/* ---------- clients: staggered entrance + hover spotlight ---------- */
.clients .wrap{gap:28px}
.clients-rule{display:block;justify-self:center;width:120px;height:1px;background:var(--gold);margin-bottom:22px}
.client{position:relative;padding-bottom:14px}
.client img,.client span{transition:opacity .5s var(--ease),transform .6s var(--ease),filter .5s var(--ease)}
.client img{opacity:.7}
@media (hover:hover){
  .client-grid:hover .client img,.client-grid:hover .client span:not(.logo-wrap){opacity:.32}
  .client-grid .client:hover img,.client-grid .client:hover span:not(.logo-wrap){opacity:1;filter:none;transform:scale(1.1)}
}
/* entrance (only when the script has armed it, so logos are never hidden without it) */
.clients.arm .client{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.clients.arm .clients-rule{transform:scaleX(0);transition:transform 1.1s var(--ease-out) .1s}
.clients.arm .clients-title{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.clients.arm.in .client,.clients.arm.in .clients-title{opacity:1;transform:none}
.clients.arm.in .clients-rule{transform:none}
.clients.arm .client:nth-child(1){transition-delay:.15s}.clients.arm .client:nth-child(2){transition-delay:.25s}
.clients.arm .client:nth-child(3){transition-delay:.35s}.clients.arm .client:nth-child(4){transition-delay:.45s}
.clients.arm .client:nth-child(5){transition-delay:.55s}.clients.arm .client:nth-child(6){transition-delay:.65s}
.clients.arm .client:nth-child(7){transition-delay:.75s}.clients.arm .client:nth-child(8){transition-delay:.85s}
.clients.arm .client:nth-child(n+9){transition-delay:.95s}
@media (prefers-reduced-motion:reduce){.clients.arm .client,.clients.arm .clients-title{opacity:1;transform:none}.clients.arm .clients-rule{transform:none}}
.band-split .year small.pre{margin:0 0 22px}

/* ---------- survey grid: interactive point field on navy areas (desktop with a mouse only) ---------- */
.field-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.2s var(--ease)}
.field-canvas.on{opacity:1}
.hero-full .field-canvas{z-index:0}
.page-head,.band,.site-footer{position:relative;overflow:hidden}
.page-head > .wrap,.band > .wrap,.site-footer > .wrap{position:relative;z-index:2}
.p-hero-full .field-canvas{z-index:1}

/* foil crown: tilt layer (driven by the cursor); the drawing itself stays still */
.crown-tilt{position:absolute;inset:0;pointer-events:none;z-index:1;will-change:transform}
.hero-full .crown-tilt{z-index:0}
/* ---------- no text highlighting (form fields stay editable) ---------- */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
@media all{:root .menu-toggle{color:#fff}}

/* ---------- background gold lines at the crown's angles ---------- */
.bgl-host{position:relative;isolation:isolate}
.bg-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden}
.bg-lines path{fill:none;stroke-linejoin:miter;stroke-linecap:butt}
.bg-lines .b-base{stroke:rgba(212,175,55,.13);stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.2,.7,.2,1)}
.bg-lines.drawn .b-base{stroke-dashoffset:0}
.bg-lines .b-glint{stroke-width:1.4;opacity:0}
@media (min-width:901px){.bg-lines{-webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 55%);mask-image:linear-gradient(90deg,transparent 22%,#000 55%)}}
@media (prefers-reduced-motion:reduce){.bg-lines .b-base{stroke-dashoffset:0;transition:none}}

/* ---------- footer: the divider lines draw outward from the crown when the footer comes into view ---------- */
.foot-mark i{transform:scaleX(0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.foot-mark i:first-child{transform-origin:100% 50%}
.foot-mark i:last-child{transform-origin:0 50%}
.site-footer.lit .foot-mark i{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.foot-mark i{transform:none;transition:none}}

/* ---------- clients: on hover the logo turns platinum and a single white glint crosses it ---------- */
.client .logo-wrap{position:relative;display:inline-block;line-height:0;transition:transform .6s var(--ease),filter .5s var(--ease)}
.client .logo-wrap img{display:block}
.client .gild{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(115deg,#9AA3B1 0%,#D9DEE6 40%,#F7F9FC 62%,#B9C0CB 100%)}
/* one soft glint crosses the logo when hovered, then it rests in platinum */
.client .gild::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 62%) no-repeat;
  background-size:300% 100%;background-position:92% 0}
@media (hover:hover){
  .client-grid .client:hover img{transform:none}
  .client-grid .client:hover .logo-wrap{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(225,232,245,.35)) drop-shadow(0 0 22px rgba(200,212,235,.16))}
  .client-grid .client:hover .gild{opacity:1}
  .client-grid .client:hover .gild::after{animation:logo-sweep 5.6s .15s infinite}
  .client-grid .client:hover span:not(.logo-wrap){color:#E9C766;text-shadow:0 0 14px rgba(212,175,55,.55)}
}
.client .logo-wrap{max-width:100%}
.client .logo-wrap img{max-width:min(170px,40vw)}





/* ---------- section dots ---------- */
.sec-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:6px}
.sec-dots[hidden]{display:none}
.sec-dot{position:relative;width:22px;height:calc(22px + var(--g,0px));padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;transition:height .18s ease-out}
.sec-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(var(--s,1));transition:background .25s var(--ease),transform .18s ease-out,box-shadow .25s var(--ease)}
.sec-dot:hover::before{background:rgba(255,255,255,.8)}
.sec-dot.on::before{background:#D4AF37;transform:scale(calc(var(--s,1) * 1.5));box-shadow:0 0 0 4px rgba(212,175,55,.16)}
.sec-dot:focus-visible{outline:1px solid #D4AF37;outline-offset:2px}
.sec-tip{position:absolute;right:30px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font:600 .66rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(7,15,36,.9);border:1px solid rgba(212,175,55,.3);padding:8px 12px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.sec-dot:hover .sec-tip,.sec-dot:focus-visible .sec-tip{opacity:1;transform:translate(0,-50%)}
html.intro-playing .sec-dots{opacity:0}
.sec-dots{opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.sec-dots.awake{opacity:1}
html.intro-playing .sec-dots.awake{opacity:0}
@media (max-width:900px),(hover:none){.sec-dots{display:none}}

/* footer office details can be selected and copied */
.foot-office ul,.foot-office li,.foot-office a{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* ---------- footer: a glint crosses the crown each time it scrolls into view (after 2s+ away), then every 8 seconds ---------- */
.foot-crown{position:relative;flex:none;line-height:0}
.foot-crown img{display:block}
.crown-sheen{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(100deg,rgba(255,248,220,0) 38%,rgba(255,248,220,.85) 50%,rgba(255,248,220,0) 62%) no-repeat;background-size:300% 100%;
  background-position:120% 0}
.foot-crown.glint .crown-sheen{animation:crown-sheen 8s ease-in-out .3s infinite}
@keyframes crown-sheen{0%{background-position:120% 0}24%,100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.foot-crown.glint .crown-sheen{animation:none}}

/* ---------- services: delivery models as four matching cards ---------- */
.models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;row-gap:20px}
.model{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:16px;align-content:start;padding:34px 28px 32px;border:1px solid var(--line);background:rgba(255,255,255,.015);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.model:hover{border-color:rgba(212,175,55,.45);background:rgba(212,175,55,.03)}
.model-n{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:#D4AF37}
.model h3{font-size:1.3rem;font-weight:400;letter-spacing:-.01em;line-height:1.3}
.model p{color:var(--muted);font-size:.95rem;line-height:1.65}
.model .ticks{align-self:start;padding-top:20px;margin-top:4px;border-top:1px solid var(--line);gap:10px;font-size:.88rem}
.model .ticks li{padding-left:22px}
.model .ticks li::before{width:10px;top:.85em}
@media (max-width:1100px){.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.models{grid-template-columns:1fr}}

/* ---------- contact details: selectable, with a copy button ---------- */
.contact-list .copyable{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.contact-list .copy-text,.contact-list .copy-text *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.copy-btn{display:inline-flex;align-items:center;gap:0;padding:6px 8px;border:1px solid rgba(212,175,55,.28);background:none;color:#D4AF37;cursor:pointer;
  font:600 .64rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;transform:translateY(-2px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s,border-color .25s var(--ease),background-color .25s var(--ease),gap .25s var(--ease)}
.copy-btn svg{flex:none}
.copy-btn .copy-lbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .3s var(--ease),opacity .2s var(--ease)}
/* the icon appears when the detail is hovered; the "Copy" label only when the button itself is hovered (or just after copying) */
.contact-list > div:hover .copy-btn,.copy-btn:focus-visible,.copy-btn.done{opacity:1;visibility:visible}
.copy-btn.done{gap:7px;padding-right:10px;border-color:#D4AF37;background:rgba(212,175,55,.08)}
.copy-btn.done .copy-lbl{max-width:80px;opacity:1}
/* the "Copy" label on hover/keyboard focus is for computers only, so on phones the button returns to the icon after "Copied" */
@media (hover:hover){
  .copy-btn:hover,.copy-btn:focus-visible{gap:7px;padding-right:10px;border-color:#D4AF37;background:rgba(212,175,55,.08)}
  .copy-btn:hover .copy-lbl,.copy-btn:focus-visible .copy-lbl{max-width:80px;opacity:1}
}
@media (hover:none){.copy-btn{opacity:.7;visibility:visible}}

/* footer crown doubles as "back to top" */
button.foot-crown{padding:0;border:0;background:none;cursor:pointer;transition:transform .35s var(--ease)}
button.foot-crown:hover{transform:translateY(-3px)}
button.foot-crown:focus-visible{outline:1px solid #D4AF37;outline-offset:6px}
/* one pass forward (1.3s), one pass back (1.3s), then a 3s rest before the next loop */
@keyframes logo-sweep{0%{background-position:92% 0;animation-timing-function:ease-in-out}23.2%{background-position:8% 0;animation-timing-function:ease-in-out}46.4%,100%{background-position:92% 0}}
@media (prefers-reduced-motion:reduce){.client-grid .client:hover .gild::after{animation:none}}

/* ---------- buttons for the dark theme: white outline by default, filling white with navy text on hover ---------- */
.btn{background:transparent;color:#fff;border-color:#fff;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:#fff;color:var(--navy);border-color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:transparent;color:#fff;border-color:#fff}

/* mask images are passed in as --mask (inlined data, so they also work when the site is opened from disk) */
.client .gild,.crown-sheen{-webkit-mask-image:var(--mask);mask-image:var(--mask)}

/* sectors: with five sectors, the last two share the bottom row instead of leaving a gap */
@media (min-width:901px){
  .sectors{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sector{grid-column:span 2}
  .sector:first-child:nth-last-child(5) ~ .sector:nth-child(n+4){grid-column:span 3}
  .sector:first-child:nth-last-child(5) ~ .sector:nth-child(n+4) .ph{aspect-ratio:16/10}
}

/* copy button: on copying, the icon becomes a drawn check, the button flashes gold and a soft glow ring spreads out */
.copy-btn{position:relative}
.copy-btn .copy-ok{display:none}
.copy-btn.done .copy-ico{display:none}
.copy-btn.done .copy-ok{display:block}
.copy-btn.done .copy-ok path{stroke-dasharray:1;stroke-dashoffset:1;animation:copy-check .35s ease-out .05s forwards}
.copy-btn.done{animation:copy-flash 1.6s ease-out;border-color:#E6C35F;color:#F3DE9A}
.copy-btn.done::after{content:"";position:absolute;inset:-1px;pointer-events:none;border:1px solid rgba(230,195,95,.8);animation:copy-ring .9s ease-out forwards}
@keyframes copy-check{to{stroke-dashoffset:0}}
@keyframes copy-flash{0%{background:rgba(212,175,55,.45);box-shadow:0 0 0 0 rgba(212,175,55,.6),0 0 18px 2px rgba(242,214,140,.55)}
  30%{background:rgba(212,175,55,.16);box-shadow:0 0 0 0 rgba(212,175,55,0),0 0 22px 4px rgba(242,214,140,.4)}
  100%{background:rgba(212,175,55,.08);box-shadow:0 0 10px 0 rgba(242,214,140,.15)}}
@keyframes copy-ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.9)}}
@media (prefers-reduced-motion:reduce){.copy-btn.done,.copy-btn.done::after,.copy-btn.done .copy-ok path{animation:none;stroke-dashoffset:0}}

/* map card: the address and phone can be selected and copied */
.sm-card h3,.sm-card p:not(.muted),.sm-card p:not(.muted) a{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* ---------- owner-led band, combined with "since 1989": live years count, the 1988 skyline faint along the bottom ---------- */
.since-band .year .since-n{display:block;color:#fff}
.since-band .year small.post{margin-top:14px}
.since-bg{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;object-fit:cover;object-position:30% 100%;z-index:0;pointer-events:none;
  opacity:.28;mix-blend-mode:luminosity;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 55%);mask-image:linear-gradient(180deg,transparent 0,#000 55%)}
.since-credit{position:absolute;z-index:2;right:var(--gutter);bottom:12px;margin:0;font-size:.62rem;color:rgba(255,255,255,.4);letter-spacing:.02em}
.since-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:2px}
.since-credit a:hover{color:#E6C35F}
@media (max-width:760px){.since-bg{height:45%;object-position:12% 100%}.since-credit{position:relative;right:auto;bottom:auto;padding:0 var(--gutter) 16px}}
.since-band.no-photo .since-bg,.since-band.no-photo .since-credit{display:none}

/* ---------- page-head drawings: shared layout (text left, drawing on the right) ---------- */
.page-head.has-art .wrap{justify-items:start;text-align:left}
.page-head.has-art .lede{margin-inline:0;max-width:40ch}
.head-art{position:absolute;top:var(--header-h-top);bottom:0;right:2vw;width:min(60%,880px);height:calc(100% - var(--header-h-top));z-index:1;pointer-events:none}
@media (max-width:760px){.head-art{width:100%;right:0;opacity:.45}}

/* ---------- projects banner: a minimal schedule; the progress line follows the mouse (scroll on phones) ---------- */
.sched-art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.sched-art *{vector-effect:non-scaling-stroke}
.sched-art .grid{fill:none;stroke:rgba(212,175,55,.09);stroke-width:1}
.sched-art .link{fill:none;stroke:rgba(212,175,55,.2);stroke-width:1}
.sched-art .box{fill:none;stroke:rgba(212,175,55,.35);stroke-width:1;transition:stroke .4s ease}
.sched-art .tick{fill:none;stroke:#F2D68C;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .45s ease,opacity .2s ease}
.sched-art .task.done .tick{stroke-dashoffset:0;opacity:1}
.sched-art .task.done .box{stroke:rgba(242,214,140,.75)}
.sched-art .bar{fill:none;stroke:rgba(212,175,55,.38);stroke-width:1;transition:stroke .4s ease}
.sched-art .task.done .bar{stroke:rgba(242,214,140,.6)}
.sched-art .fill{fill:rgba(201,162,39,.55)}
.sched-art .task.done .fill{fill:rgba(226,186,72,.7)}
.sched-art .pline{fill:none;stroke:rgba(242,214,140,.6);stroke-width:1}
.sched-art .phandle{fill:#0A2A6E;stroke:#F2D68C;stroke-width:1}
.sched-art .grid-g,.sched-art .link,.sched-art .box,.sched-art .bar,.sched-art .prog{opacity:0;transition:opacity 1.2s ease}
.sched-art.in .grid-g,.sched-art.in .link,.sched-art.in .box,.sched-art.in .bar,.sched-art.in .prog{opacity:1}
.sched-art.in .bar{transition:opacity .8s ease,stroke .4s ease}
@media (max-width:760px){.sched-art{top:auto;height:75%;width:95%;right:-4%;opacity:.4}}
.page-head.has-art{touch-action:pan-y}   /* vertical swipes still scroll; sideways drags move the projects progress line */

/* ---------- contact banner: ripple (rings spread from a point; the dot can be caught with the mouse) ---------- */
.ripple-art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.ripple-art .ring{fill:none;stroke:rgba(212,175,55,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.ripple-art .dot{fill:#F2D68C;opacity:.9;transition:r .25s ease}
@media (max-width:760px){.ripple-art{top:auto;height:80%;width:100%;right:-6%;opacity:.85}.ripple-art .ring{stroke:rgba(222,188,80,.42)}}

/* ---------- services banner: the crown at the centre of the trades; drag the crown and the trades are towed behind ---------- */
.hub-art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hub-art *{vector-effect:non-scaling-stroke}
.hub-art .tline{fill:none;stroke:rgba(212,175,55,.16);stroke-width:1}
.hub-art .ic path{fill:none;stroke:rgba(212,175,55,.5);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.hub-art .hub-crown circle{fill:#0A2A6E;stroke:rgba(242,214,140,.7);stroke-width:1.2}
.hub-art .hub-crown path{fill:none;stroke:rgba(242,214,140,.8);stroke-width:1.2}
.hub-grab{position:absolute;left:0;top:0;width:68px;height:68px;border-radius:50%;z-index:3;cursor:grab;touch-action:none}
.hub-art.dragging + .hub-grab{cursor:grabbing}
@media (max-width:760px){.hub-art{top:auto;height:75%;width:100%;right:-4%;opacity:.5}}
/* services banner: hold the crown and it glows; on release the glow runs out along the lines and lights each trade */
.hub-art .hub-crown circle,.hub-art .hub-crown path{transition:stroke .35s ease,filter .5s ease}
.hub-art.held .hub-crown circle,.hub-art.held .hub-crown path{stroke:#FBE7A6;filter:drop-shadow(0 0 4px rgba(242,214,140,.9)) drop-shadow(0 0 12px rgba(212,175,55,.6))}
.hub-art .tglow{fill:none;stroke:#F6DE95;stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(242,214,140,.8))}
.hub-art .trade .ic path{transition:stroke .7s ease,filter .7s ease}
.hub-art .trade.lit .ic path{stroke:#FFF0BE;stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(255,232,160,1)) drop-shadow(0 0 12px rgba(242,205,110,.75));transition:stroke .12s ease,filter .12s ease}
.hub-art .tring{fill:none;stroke:#F6DE95;stroke-width:1.2;opacity:0;filter:drop-shadow(0 0 3px rgba(242,214,140,.8))}