/* Self-hosted fonts (latin + latin-ext only), served from Cloudflare with the
   site instead of Google Fonts: no third-party connection, cached with /media.
   Regenerate from Google Fonts css2 if the family list changes. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../media/fonts/anton-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../media/fonts/anton-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('../media/fonts/archivo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../media/fonts/barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../media/fonts/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../media/fonts/barlow-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../media/fonts/barlow-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../media/fonts/barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../media/fonts/barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap; src: url('../media/fonts/fraunces-italic-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap; src: url('../media/fonts/fraunces-italic-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../media/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===========================================================
   WBME — Cinematic Experience
   Blue + Brass/Gold · dark cinematic
   =========================================================== */
:root{
  --ink:#0f2c52; --ink2:#163a66; --panel:#071a33;
  --white:#fff; --mut:#9fb0c6; --line:rgba(255,255,255,.10);
  --gold:#c79a3e; --gold-lt:#e3c372; --gold-soft:rgba(199,154,62,.14); --brass-deep:#b1862c; --white-steel:#f4f7fb; --status-online:#6de08a;
  /* motion (Emil Kowalski curves) */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  /* z-index scale — documented; values match existing usage so nothing shifts visually.
     Ordered low to high: chrome sits above content, panels above chrome,
     overlays above panels, atmosphere/preloader above everything. */
  --z-hdr:72;
  --z-burger:73;
  --z-chatbot-fab:76;
  --z-chatbot:77;
  --z-modal-progress:96;
  --z-drawer:120;
  --z-contact-modal:150;
  --z-lightbox:200;
  --z-grain:9000;
  --z-preloader:11000;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{font-family:'Barlow',sans-serif;background:var(--panel);color:#fff;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
.anton{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.arch{font-family:'Archivo',sans-serif}

/* ===== STAGE / HERO ===== */
.stage{position:relative;width:100vw;height:100vh;min-height:600px;overflow:hidden}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 7s ease}
.bg.on{opacity:1;transform:scale(1)}
.scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(8,16,26,.86) 0%,rgba(8,16,26,.55) 42%,rgba(8,16,26,.2) 100%),
  linear-gradient(0deg,rgba(8,16,26,.85),transparent 55%)}

/* header */
.brand{font-family:'Archivo';font-weight:700;letter-spacing:.04em;font-size:1.4rem}
.brand b{color:var(--gold-lt)}
.brand::before{content:"";display:block;width:156px;height:58px;background:rgba(255,255,255,.06) url("../media/brand/logo-768.webp") center/contain no-repeat;border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.28)}
.brand-logo{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px}

/* left copy */
.copy{position:absolute;left:48px;top:50%;transform:translateY(-54%);z-index:5;max-width:560px}
.copy .ey{font-family:'Archivo';font-weight:600;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:16px}
.copy .ti{font-family:'Anton';font-size:clamp(3.6rem,10.5vw,10.5rem);line-height:.9;text-transform:uppercase}
.copy .de{font-size:1.1rem;color:#dbe2ec;max-width:420px;margin:20px 0 28px;line-height:1.6}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.explore{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.45);padding:15px 30px;border-radius:40px;font-family:'Archivo';font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.25s;color:#fff;background:none}
.explore:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero-call{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;font-family:'Archivo';font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);transition:color .22s var(--ease-out),transform .15s var(--ease-out)}
.hero-call:hover{color:#fff}
.hero-call:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
.copy .swap{opacity:1}
.copy.first .swap{opacity:0;transform:translateY(16px);animation:rise .7s forwards}
@keyframes rise{to{opacity:1;transform:none}}

.hint{position:absolute;right:48px;top:50%;transform:translateY(-50%);z-index:4;font-family:'Archivo';font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#aab6c6;writing-mode:vertical-rl;opacity:.55}

/* ===== PANELS ===== */
.panel-hero{position:relative;min-height:280px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:40px 44px}
.panel-hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--ink) 2%,rgba(12,23,38,.3) 50%,rgba(12,23,38,.5))}
.panel-hero .in{position:relative;z-index:2;max-width:760px}
.panel-hero .ey{font-family:'Archivo';font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:10px}
.panel-hero .ti{font-family:'Anton';font-size:clamp(2.6rem,6vw,5rem);line-height:.92;text-transform:uppercase}
.panel-body{max-width:880px;margin:0 auto;padding:48px 48px 70px}
.p-rv{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
/* scroll-driven reveal (normal-flow pages): IntersectionObserver adds .in */
.p-rv.in{opacity:1;transform:none}
.stagger .p-rv:nth-child(1){transition-delay:0s}
.stagger .p-rv:nth-child(2){transition-delay:.06s}
.stagger .p-rv:nth-child(3){transition-delay:.12s}
.stagger .p-rv:nth-child(4){transition-delay:.18s}
.stagger .p-rv:nth-child(5){transition-delay:.24s}
.stagger .p-rv:nth-child(6){transition-delay:.3s}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.panel-body h3{font-family:'Anton';text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;margin:14px 0 18px}
.panel-body p{color:var(--mut);margin-bottom:16px;max-width:680px;line-height:1.7}
.lead-row{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.lead-row .media{border-radius:18px;overflow:hidden;background:#081421}
.lead-row .media img{width:100%;height:420px;object-fit:contain}
.verse{background:var(--gold-soft);border:1px solid rgba(227,195,114,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-radius:12px;padding:18px 22px;font-style:italic;color:#eef2f7;margin:8px 0 22px}
.statline{display:flex;gap:42px;flex-wrap:wrap;margin-top:28px;border-top:1px solid var(--line);padding-top:28px}
.statline .n{font-family:'Anton';font-size:2.8rem;color:var(--gold-lt);line-height:1}
.statline .l{color:var(--mut);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.profile-points{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.profile-points span{min-height:58px;display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.045);padding:14px 16px;font-family:'Archivo';font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#e9eef5}
.about-video{margin-top:30px;border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;background:rgba(0,0,0,.22);box-shadow:0 26px 56px rgba(0,0,0,.32)}
.about-video video{width:100%;aspect-ratio:16/9;display:block;background:#05080d;object-fit:cover}
.about-video-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.1)}
.about-video-caption b{font-family:'Archivo';font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.about-video-caption span{color:#aebccd;font-size:.9rem;line-height:1.4}

/* dark service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.svc{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:.28s}
.svc:hover{background:rgba(255,255,255,.07);transform:translateY(-5px)}
.svc .ic{width:60px;height:60px;border-radius:15px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.svc .ic img{height:30px;filter:brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(700%) hue-rotate(2deg) brightness(92%)}
.svc h4{font-family:'Archivo';font-weight:700;font-size:1.2rem;margin-bottom:8px}
.svc p{color:var(--mut);font-size:.92rem;margin:0}
.svc .proof{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.svc .proof b{display:block;font-family:'Archivo';font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:4px}
.svc .proof span{display:block;color:#c9d4e3;font-size:.84rem;line-height:1.55}
.svc .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.svc .tags span{font-size:.72rem;font-family:'Archivo';font-weight:600;color:#cdd6e2;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:20px;padding:4px 10px}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
@media(max-width:860px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:420px){.gal{gap:8px}}
.gal .g{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;background:#081421}
.gal .g img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gal .g:hover img{transform:scale(1.07)}
.gal .g .cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;font-family:'Archivo';font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8);opacity:.95}
.gal .g:after{content:"⤢";position:absolute;top:12px;right:14px;color:#fff;opacity:0;transition:.3s;font-size:1.1rem}
.gal .g:hover:after{opacity:.9}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:start}
.info .row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}
.info .row:last-child{border:none}
.info .ic{width:46px;height:46px;border-radius:13px;background:var(--gold-soft);color:var(--gold-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.info b{font-family:'Archivo';display:block;margin-bottom:2px}
.info span{color:var(--mut);font-size:.94rem}
.formcard{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;padding:34px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow>.field{min-width:0}
.field{margin-bottom:14px}
.field label{display:block;font-family:'Archivo';font-weight:600;font-size:.84rem;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:11px;font-family:'Barlow';font-size:.94rem;background:rgba(0,0,0,.25);color:#fff;transition:.2s}
.field input::placeholder,.field textarea::placeholder{color:#9ca9ba}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.4)}
.field textarea{min-height:120px;resize:vertical}
.field.invalid input,.field.invalid textarea{border-color:#e07a7a}
.field .err{display:none;color:#e98c8c;font-size:.78rem;margin-top:5px}
.field.invalid .err{display:block}
.btn-brass{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--gold);color:var(--ink);font-family:'Archivo';font-weight:700;font-size:.86rem;letter-spacing:.04em;padding:1rem;border-radius:40px;border:none;cursor:pointer;transition:.25s}
.btn-brass:hover{background:var(--gold-lt)}
.form-note{color:var(--mut);font-size:.84rem;margin-top:12px}
/* contact forms: a field people never see; only bots fill it in */
.hp-field{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-ok{display:none;background:var(--gold-soft);border:1px solid var(--gold);border-radius:13px;padding:15px;margin-top:14px}
.map{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:0}
.map iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9)}

.map-frame{position:relative;margin-top:48px;padding:22px;border:1px solid rgba(227,195,114,.2);border-radius:16px;background:rgba(255,255,255,.02)}
.map-frame-label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.map-frame-label .dispatch-coord{color:#7f8fa6}

/* drawer (mobile nav) */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(11,26,48,.72);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);padding:calc(30px + env(safe-area-inset-top,0px)) calc(26px + env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) calc(26px + env(safe-area-inset-left,0px));display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.drawer.open{transform:none}
.drawer .top{display:flex;justify-content:flex-end;align-items:center;margin-bottom:36px}
.drawer .x{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(227,195,114,.3);border-radius:50%;
  color:#fff;font-size:1.5rem;cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.drawer .x:hover{border-color:var(--gold-lt);background:rgba(199,154,62,.14)}
.drawer .x:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.drawer a{font-family:'Anton';text-transform:uppercase;font-size:2.4rem;padding:14px 0;border-bottom:1px solid rgba(227,195,114,.16);cursor:pointer;min-height:44px;display:flex;align-items:center}
.drawer a:hover{color:var(--gold-lt)}
.drawer a.active{color:var(--gold-lt);box-shadow:inset 4px 0 0 var(--gold);padding-left:16px}
.drawer .df{margin-top:auto;color:var(--mut);font-size:.95rem;line-height:1.9}
.drawer .df a{font-family:'Barlow';font-size:.95rem;border:none;padding:6px 0;display:block;min-height:0}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(5,10,18,.94);display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:82vh;border-radius:14px}
.lb-caption{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(680px,82vw);font-family:'Archivo';font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#dfe5ee;text-align:center}
.lightbox .lc{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;cursor:pointer}
.lightbox .ln{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.lightbox .ln:hover{background:var(--gold);color:var(--ink)}
.lightbox .lp{left:24px}.lightbox .lnx{right:24px}

/* contact modal — landscape glass pane: the enquiry form on the left,
   contact details + live map location on the right. Frosted, translucent,
   refractive edge — the one surface meant to feel like glass, not steel. */
.contact-modal{position:fixed;inset:0;z-index:var(--z-contact-modal);display:none;align-items:center;justify-content:center;padding:24px}
.contact-modal.open{display:flex}
.cm-backdrop{position:absolute;inset:0;background:rgba(4,9,16,.62);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
.cm-panel{
  position:relative;z-index:1;width:min(1080px,100%);max-height:min(90vh,720px);overflow-y:auto;
  background:linear-gradient(165deg,rgba(27,58,99,.5) 0%,rgba(7,26,51,.62) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid rgba(255,255,255,.18);border-radius:30px;
  box-shadow:0 50px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.24);
  padding:clamp(28px,4vw,48px);
  opacity:0;filter:blur(10px);transform:scale(.94) translateY(14px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),filter .4s var(--ease-out);
}
.contact-modal.open .cm-panel{opacity:1;filter:blur(0);transform:none}
@media(prefers-reduced-motion:reduce){.cm-panel{filter:none;transition:opacity .2s ease,transform .2s ease}}
.cm-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.cm-x:hover{border-color:var(--gold-lt);background:rgba(199,154,62,.22)}
.cm-x:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
/* landscape split */
.cm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,52px);align-items:stretch}
.cm-form-side .eyebrow{margin-bottom:8px}
.cm-form-side h3{font-family:'Anton';text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.5rem,3vw,2rem);margin:6px 0 22px;color:#fff}
.cm-side{display:flex;flex-direction:column;gap:13px;padding-left:clamp(22px,3vw,40px);border-left:1px solid rgba(255,255,255,.14)}
.cm-d{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.09)}
.cm-d b{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt)}
.cm-d span{font-size:.9rem;color:#eef1f6;line-height:1.45}
.cm-d a{color:#eef1f6}
.cm-d a:hover{color:var(--gold-lt)}
.cm-map{flex:1;min-height:170px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cm-map iframe{display:block;width:100%;height:100%;min-height:170px;border:0;filter:saturate(.85) contrast(1.02)}
.cm-side-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.08em;color:#9fb0c6;white-space:nowrap}
.cm-status{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;color:var(--gold-lt)}
.cm-status i{width:7px;height:7px;border-radius:50%;background:var(--status-online);box-shadow:0 0 0 3px rgba(109,224,138,.22);animation:dispatch-pulse 2.2s ease-in-out infinite}
/* info chips — used by the standalone Contact page (contact.html) */
.cm-info{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}
.cm-i{padding:14px 14px 15px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.cm-i:hover{background:rgba(255,255,255,.09);border-color:rgba(227,195,114,.35);transform:translateY(-2px)}
.cm-i b{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:6px}
.cm-i span{display:block;font-size:.84rem;color:#eef1f6;line-height:1.4}
.cm-i a{color:#eef1f6}
.cm-i a:hover{color:var(--gold-lt)}
/* glass-scoped field treatment: full frosted fields, distinct from the plain
   underline style ticket-field keeps on the standalone Contact page and Admin. */
.cm-panel .ticket-field label,.contact-panel .ticket-field label{color:rgba(227,195,114,.92)}
.cm-panel .ticket-field input,.cm-panel .ticket-field textarea,.cm-panel .ticket-field select,
.contact-panel .ticket-field input,.contact-panel .ticket-field textarea,.contact-panel .ticket-field select{
  border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.065);
  padding:.8rem 1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.cm-panel .ticket-field input:focus,.cm-panel .ticket-field textarea:focus,.cm-panel .ticket-field select:focus,
.contact-panel .ticket-field input:focus,.contact-panel .ticket-field textarea:focus,.contact-panel .ticket-field select:focus{border-color:var(--gold-lt);background:rgba(255,255,255,.1)}
.cm-panel .ticket-field input::placeholder,.cm-panel .ticket-field textarea::placeholder,
.contact-panel .ticket-field input::placeholder,.contact-panel .ticket-field textarea::placeholder{color:rgba(223,229,238,.55)}
/* glass select fields are translucent when closed, but the native open
   popup still needs an explicit opaque colour (see .ticket-field select above) */
.cm-panel .ticket-field select,.contact-panel .ticket-field select{color-scheme:dark}
.cm-panel .ticket-field select option,.contact-panel .ticket-field select option{background-color:var(--ink2);color:#fff}
@media(max-width:820px){
  .contact-modal{padding:0}
  .cm-panel{width:100%;height:100%;max-height:none;border:0;border-radius:0;padding:calc(24px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
  .cm-grid{grid-template-columns:1fr;gap:26px}
  .cm-side{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
  .cm-map{min-height:210px}
  .cm-info{grid-template-columns:1fr 1fr}
}

/* contact split-pane — shared by the contact modal and the standalone Contact page:
   a compact "job ticket" form beside real worksite photography, instead of a form-only card. */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);align-items:start}
.cs-photo{position:relative;overflow:hidden;border-radius:12px;min-height:280px;align-self:stretch}
.cs-photo .hero-bg{position:absolute;inset:0}
.cs-photo .corner-marks{inset:14px}
.cs-photo .dispatch-status{position:absolute;left:18px;top:16px;z-index:2;margin-bottom:0;font-size:.6rem}
.cs-photo .dispatch-coord{position:absolute;left:18px;bottom:16px;z-index:2;text-align:left;color:#dfe5ee}

.ticket-field{position:relative;margin-bottom:18px}
.ticket-field label{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:7px}
.ticket-field input,.ticket-field textarea,.ticket-field select{
  width:100%;padding:.7rem 2px;border:none;border-bottom:1.5px solid var(--line);
  background:transparent;color:#fff;font-family:'Barlow';font-size:.94rem;border-radius:0;transition:border-color .2s var(--ease-out)
}
.ticket-field input::placeholder,.ticket-field textarea::placeholder{color:#7f8fa6}
/* the closed <select> stays transparent (matches the glass/dark surface
   behind it), but the native OPEN dropdown list is a separate OS-rendered
   surface that ignores "transparent" — give it an explicit dark background
   so Chromium/Edge/Firefox render the popup in the site's own theme instead
   of a stark white system default. */
.ticket-field select{background-color:var(--ink2);color-scheme:dark}
.ticket-field select option{background-color:var(--ink2);color:#fff;font-family:'Barlow',sans-serif}
.ticket-field input:focus,.ticket-field textarea:focus,.ticket-field select:focus{outline:none;border-color:var(--gold-lt)}
.ticket-field textarea{min-height:96px;resize:vertical}
.ticket-field.invalid input,.ticket-field.invalid textarea{border-color:#e07a7a}
.ticket-field .err{display:none;color:#e98c8c;font-size:.78rem;margin-top:5px}
.ticket-field.invalid .err{display:block}

@media(max-width:760px){
  .contact-split{grid-template-columns:1fr}
  .cs-photo{min-height:170px;order:-1}
}

/* ===== MOBILE REFLOW ===== */
@media(max-width:860px){
  .burger{display:flex}
  .copy{left:24px;right:24px;top:120px;transform:none;max-width:none}
  .copy .ti{font-size:3.7rem}
  .copy .de{font-size:.95rem;max-width:260px}
  .hint{display:none}
  .panel-hero{padding:26px 22px;min-height:200px}
  .panel-body{padding:34px 22px 64px}
  .lead-row,.contact-grid{grid-template-columns:1fr;gap:26px}
  .lead-row .media img{height:300px}
  .svc-grid,.gal{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
}
@media(max-width:520px){.svc-grid,.gal{grid-template-columns:1fr}.copy .ti{font-size:3.1rem}}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .bg,.copy .swap,.p-rv,.dispatch-status .dot{transition:none!important;animation:none!important}
}

/* ===========================================================
   MAGNIFICENT LAYER
   =========================================================== */
/* preloader — a cutting-torch sequence. The screen is a dark steel plate
   with a chalk guide line scribed across it (the yellow chalk marks on a
   hull in dry dock). Loading progress is a torch travelling that line:
   white-hot at the tip, cooling to brass behind it, sparks streaming off
   the cut (canvas, js/experience.js). At 100% the plate parts along the
   cut and the site is revealed underneath. The propeller is JS-driven so it
   always spins (owner requirement) and spins up as the cut progresses.
   Minimum 3s display (see js/experience.js), so the sequence is built to
   read as an intentional moment, not a flash of content. */
.preloader{position:fixed;inset:0;z-index:var(--z-preloader);overflow:hidden;--p:0;--pl-seam:66%;animation:pl-safety .4s 9s forwards}
/* later pages of the same visit skip the loader (class set by the inline head script) */
.pl-seen .preloader{display:none}
.preloader.done{pointer-events:none;visibility:hidden;transition:visibility 0s linear 1.1s}
/* if the script never runs, the loader must not hold the page hostage */
@keyframes pl-safety{to{opacity:0;visibility:hidden;pointer-events:none}}

/* the two halves of the plate — brushed steel in the brand navy, split at the seam */
.pl-plate{position:absolute;left:0;width:100%;overflow:hidden;background:#071424;background-image:radial-gradient(120% 80% at 50% 45%,rgba(22,58,102,.5),rgba(7,20,36,0) 62%);transition:transform .85s cubic-bezier(.76,0,.24,1) .14s;will-change:transform}
.pl-plate:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}
.pl-plate:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pl-plate-top{top:0;height:var(--pl-seam);display:flex;align-items:center;justify-content:center;padding:58px 20px 30px}
.pl-plate-bottom{top:var(--pl-seam);bottom:0}
.preloader.done .pl-plate-top{transform:translateY(-102%)}
.preloader.done .pl-plate-bottom{transform:translateY(102%)}

/* registration marks in the outer corners; each pair rides its own plate */
.pl-frame{position:absolute;inset:22px;pointer-events:none;z-index:2}
.pl-frame i{position:absolute;width:20px;height:20px;border:1.5px solid rgba(227,195,114,.5)}
.pl-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.pl-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.pl-frame-bottom i:nth-child(1){top:auto;bottom:0;border-top:0;border-bottom:1.5px solid rgba(227,195,114,.5)}
.pl-frame-bottom i:nth-child(2){top:auto;bottom:0;border-top:0;border-bottom:1.5px solid rgba(227,195,114,.5)}

/* title block — the four corner readouts of an engineering drawing */
.pl-corner{position:absolute;z-index:2;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.62rem;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:rgba(227,195,114,.6);white-space:nowrap;animation:pl-fade-in .6s var(--ease-out) both .25s}
.pl-corner-tl{top:28px;left:52px}
.pl-corner-tr{top:28px;right:52px}
.pl-corner-bl{bottom:28px;left:52px}
.pl-corner-br{bottom:28px;right:52px;color:rgba(227,195,114,.75)}
.pl-percent{font-variant-numeric:tabular-nums;color:var(--gold-lt);font-weight:600;margin-left:.7em}
@keyframes pl-fade-in{from{opacity:0}to{opacity:1}}

.pl-scene{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;animation:pl-fade-up .6s var(--ease-out) both}
@keyframes pl-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* emblem: breathing brass glow, a slow lathe-dial tick ring, the propeller */
.pl-emblem{position:relative;width:min(250px,52vw);aspect-ratio:1;margin-bottom:clamp(16px,3.5vw,26px)}
.pl-glow{position:absolute;inset:-70%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(227,195,114,.28) 0%,rgba(227,195,114,.08) 32%,transparent 60%);animation:pl-glow-pulse 3.2s ease-in-out infinite}
@keyframes pl-glow-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.pl-dial{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(rgba(227,195,114,.6) 0 .7deg,transparent .7deg 6deg);-webkit-mask:radial-gradient(circle,transparent 0 46%,#000 46.5% 49.5%,transparent 50%);mask:radial-gradient(circle,transparent 0 46%,#000 46.5% 49.5%,transparent 50%);animation:pl-dial-spin 48s linear infinite reverse}
@keyframes pl-dial-spin{to{transform:rotate(360deg)}}
.pl-prop{position:absolute;inset:14%}
.pl-prop:before{content:"";position:absolute;inset:8% -4% -12%;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.55),transparent 62%)}
.pl-prop img{position:relative;display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;will-change:transform}

/* WBME wordmark — letters assemble in one at a time instead of arriving as a block */
.pl-word{display:flex;justify-content:center;font-family:'Anton';text-transform:uppercase;font-size:clamp(2.3rem,8vw,3.4rem);line-height:1;color:#fff;letter-spacing:.02em;margin-bottom:10px}
.pl-letter{display:inline-block;opacity:0;transform:translateY(16px);animation:pl-letter-in .5s var(--ease-out) forwards}
.pl-letter:nth-child(1){animation-delay:.15s}
.pl-letter:nth-child(2){animation-delay:.23s}
.pl-letter:nth-child(3){animation-delay:.31s}
.pl-letter:nth-child(4){animation-delay:.39s}
.pl-letter-gold{color:var(--gold-lt)}
@keyframes pl-letter-in{to{opacity:1;transform:none}}
.pl-tagline{font-family:'Archivo',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* the seam: chalk guide line ahead of the torch, glowing cut behind it */
.pl-seam{position:absolute;left:0;right:0;top:var(--pl-seam);height:0;z-index:3;pointer-events:none}
.pl-seam:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:repeating-linear-gradient(90deg,rgba(232,214,120,.55) 0 8px,transparent 8px 18px)}
.pl-cut{position:absolute;left:0;top:-1.5px;height:3px;width:calc(var(--p)*100%);background:linear-gradient(to left,#fff 0,#ffe7b0 8px,#ffa03a 40px,rgba(255,130,50,.75) 110px,rgba(214,168,80,.6) 260px,rgba(199,154,62,.38) 100%);box-shadow:0 0 10px rgba(255,160,70,.5)}
.pl-torch{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;transform:translateX(var(--x,0px));background:radial-gradient(circle,#fff 0 24%,rgba(255,226,160,.95) 42%,rgba(255,150,50,.55) 62%,transparent 72%);box-shadow:0 0 16px 5px rgba(255,180,80,.55),0 0 44px 14px rgba(255,120,30,.28)}
.pl-torch:after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(255,230,180,.55),transparent 60%);animation:pl-flicker .13s steps(2) infinite}
@keyframes pl-flicker{50%{transform:scale(1.35);opacity:.6}}
.pl-sparks{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}

/* exit: the cut flashes white, the torch and sparks die, the plate parts */
.preloader.done .pl-cut{background:#fff;box-shadow:0 0 28px 8px rgba(255,225,170,.85);transition:box-shadow .18s}
.preloader.done .pl-torch{opacity:0;transition:opacity .2s}
.preloader.done .pl-seam{opacity:0;transition:opacity .4s ease .16s}
.preloader.done .pl-sparks{opacity:0;transition:opacity .5s ease .3s}

@media(max-width:600px){
  .pl-frame{inset:16px}
  .pl-corner{font-size:.54rem;letter-spacing:.14em}
  .pl-corner-tl,.pl-corner-bl{left:42px}
  .pl-corner-tr,.pl-corner-br{right:42px}
  .pl-corner-tl,.pl-corner-tr{top:21px}
  .pl-corner-bl,.pl-corner-br{bottom:21px}
  .pl-plate-top{padding-top:48px}
}
/* narrowest phones: the name and the year no longer fit side by side */
@media(max-width:360px){
  .pl-corner-tr{display:none}
}
/* landscape phones: less height, so the seam drops and the emblem shrinks */
@media(max-height:520px){
  .preloader{--pl-seam:72%}
  .pl-plate-top{padding-top:40px}
  .pl-emblem{width:min(150px,30vh);margin-bottom:10px}
  .pl-word{font-size:1.9rem;margin-bottom:6px}
}

/* NOTE: the propeller spin is deliberately excluded below — owner requires
   it to always spin, on every machine, including reduced-motion setups
   (it is driven from JS, which slows it right down instead). */
@media(prefers-reduced-motion:reduce){
  .pl-scene,.pl-corner,.pl-letter{animation:none;opacity:1;transform:none}
  .pl-glow,.pl-dial,.pl-torch:after{animation:none}
  .pl-plate{transition:none}
  .preloader.done .pl-plate-top,.preloader.done .pl-plate-bottom{transform:none}
  .preloader.done{opacity:0;transition:opacity .4s,visibility 0s linear .4s}
}

/* grain */
.grain{position:fixed;inset:-50%;z-index:var(--z-grain);pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}

/* local time */
.localtime{position:absolute;right:48px;bottom:4.3vh;z-index:4;font-family:'Archivo';font-weight:600;letter-spacing:.16em;font-size:.72rem;text-transform:uppercase;color:#aab6c6}
.stage-footer{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);z-index:4;font-family:'Archivo';font-weight:600;letter-spacing:.08em;font-size:.62rem;color:#66727f;white-space:nowrap;pointer-events:none}
@media(max-width:860px){.stage-footer{display:none}}
.localtime b{color:var(--gold-lt)}

/* modal scroll progress */
.modal-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-modal-progress);opacity:0;transition:opacity .3s;pointer-events:none}
.modal-progress.on{opacity:1}
.modal-progress i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}
.panel-hero{transition:background-position .05s linear}

.chatbot-fab{position:fixed;left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:var(--z-chatbot-fab);width:84px;height:84px;border:1px solid rgba(227,195,114,.46);border-radius:999px;background:linear-gradient(180deg,rgba(15,44,82,.92),rgba(7,26,51,.82));box-shadow:0 18px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.1);color:#f4f7fb;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:transform .15s var(--ease-out),border-color .22s var(--ease-out),background .22s var(--ease-out),opacity .24s var(--ease-out),visibility .24s var(--ease-out)}
.chatbot-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),rgba(199,154,62,.13) 46%,rgba(15,44,82,.78) 74%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.chatbot-ring img{width:48px;height:48px;object-fit:contain;animation:propeller-spin .9s linear infinite;transform-origin:50% 50%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.42))}
.chatbot-fab:hover{border-color:var(--gold-lt);background:linear-gradient(180deg,rgba(22,58,102,.96),rgba(15,44,82,.9));transform:translateY(-2px)}
.chatbot-fab:active{transform:scale(.97)}
.chatbot-fab:focus-visible{outline:3px solid var(--gold-lt);outline-offset:4px}
body.locked .chatbot-fab{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:860px){body.form-active .chatbot-fab{opacity:0;visibility:hidden;pointer-events:none}}

@media(max-width:860px){
  .localtime{right:24px;bottom:62px;font-size:.62rem}
  .chatbot-fab{left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:72px;height:72px;border-color:var(--gold-lt);box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.12)}
  .chatbot-ring{width:58px;height:58px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22),rgba(199,154,62,.18) 46%,rgba(15,44,82,.86) 74%)}
  .chatbot-ring img{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .grain{display:none}
}

/* ===== ADDED SECTIONS ===== */
.num-badge{font-family:'Archivo';font-weight:800;color:var(--gold-lt);font-size:.72rem;letter-spacing:.08em;line-height:1}
.ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px}
.ind{display:flex;align-items:flex-start;gap:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.ind .nu{font-family:'Archivo';font-weight:800;color:var(--gold-lt);font-size:.72rem;letter-spacing:.08em;line-height:1.5;flex:0 0 34px}
.ind b{font-family:'Archivo';font-weight:700;font-size:1.05rem}
.ind span{display:block;color:var(--mut);font-size:.9rem;margin-top:3px}
.checklist{display:grid;gap:13px;margin-top:8px;max-width:700px}
.checklist li{list-style:none;display:flex;gap:13px;align-items:flex-start;color:var(--mut);line-height:1.6}
.checklist li:before{content:"✓";color:var(--ink);background:var(--gold);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex-shrink:0;margin-top:2px}
.checklist li b{color:#fff;font-family:'Archivo'}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:10px}
.quote-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:28px}
.quote-card .q{font-size:1.04rem;color:#eef2f7;line-height:1.7;margin:0 0 14px}
.quote-card .by{font-family:'Archivo';font-weight:700;font-size:.86rem;color:var(--gold-lt)}
.quote-card .by span{display:block;color:var(--mut);font-weight:500;font-size:.8rem;margin-top:2px}
.readiness-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px}
.ready-card{min-height:150px;background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.ready-card:before{content:"";position:absolute;left:24px;top:22px;width:34px;height:3px;background:var(--gold);border-radius:999px}
.ready-card b{font-family:'Archivo';font-size:1.05rem;color:#fff;margin-bottom:8px}
.ready-card span{color:#c9d4e3;font-size:.92rem;line-height:1.6}
.drawer a{font-size:2rem;padding:11px 0}
@media(max-width:860px){.ind-grid,.quotes,.readiness-grid,.profile-points{grid-template-columns:1fr}.about-video-caption{align-items:flex-start;flex-direction:column;gap:5px}.drawer a{font-size:1.7rem;padding:9px 0}}

/* ===========================================================
   INTERACTIVE BUNDLE  (impeccable register + Emil Kowalski motion)
   =========================================================== */

/* press feedback (scale-on-active) */
.explore,.btn-brass{transition:background .25s var(--ease-out),color .25s var(--ease-out),transform .15s var(--ease-out),border-color .25s var(--ease-out)}
.explore:active,.btn-brass:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}

/* scatter: hero copy recedes as a panel opens */
.copy{transition:opacity .45s var(--ease-out)}
body.locked .copy,body.locked .prog,body.locked .count,body.locked .hint,body.locked .localtime{opacity:0}

/* typography craft */
.copy .ti,.panel-hero .ti,.panel-body h3{text-wrap:balance}
.panel-body p{text-wrap:pretty;max-width:70ch}

/* reduced motion: keep crossfades, drop movement */
@media (prefers-reduced-motion: reduce){
  .copy{filter:none!important}
}

/* ===========================================================
   BEAUTY PASS — cohesive cinematic grade, light, depth
   =========================================================== */
/* unify mismatched imagery into one graded mood */
.bg{filter:saturate(.9) contrast(1.05)}

/* hero light: warm brass key behind the headline + deeper falloff */
.scrim{background:
  radial-gradient(72% 62% at 15% 44%, rgba(227,195,114,.12), transparent 60%),
  linear-gradient(90deg,rgba(8,16,26,.9) 0%,rgba(8,16,26,.56) 42%,rgba(8,16,26,.16) 100%),
  linear-gradient(0deg,rgba(8,16,26,.92),transparent 56%)}
.copy .ey{text-shadow:0 1px 18px rgba(0,0,0,.5)}
.copy .ti{text-shadow:0 2px 52px rgba(0,0,0,.5)}

/* panels: same grade + a soft brass top light */
.panel-hero{filter:saturate(.92) contrast(1.04)}
.panel-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(165deg,rgba(227,195,114,.22),transparent 52%)}

/* kinetic title reveal (gated to slow changes in JS) */
@keyframes titleIn{from{opacity:0;filter:blur(10px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
.copy.anim .swap{animation:titleIn .6s var(--ease-out)}
@media (prefers-reduced-motion: reduce){.copy.anim .swap{animation:none}.bg,.panel-hero{filter:none}}

/* ===========================================================
   BRIGHTEN PASS — lift the hero + lighten the popups
   =========================================================== */
/* hero: let more photography through, softer vignette */
.scrim{background:
  radial-gradient(72% 62% at 15% 44%, rgba(227,195,114,.10), transparent 60%),
  linear-gradient(90deg,rgba(8,16,26,.72) 0%,rgba(8,16,26,.38) 46%,rgba(8,16,26,.06) 100%),
  linear-gradient(0deg,rgba(8,16,26,.7),transparent 58%)}
.bg{filter:saturate(.98) contrast(1.02) brightness(1.06)}

/* popups: lighter navy surface + brighter text */
.panel-hero:after{background:linear-gradient(0deg,#1b2e4d 2%,rgba(27,46,77,.14) 56%,rgba(27,46,77,.3))}
.panel-body{color:#e9eef5}
.panel-body p{color:#c9d4e3}
.svc,.quote-card,.ind,.formcard{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.14)}
.svc p,.ind span,.quote-card .by span,.statline .l{color:#aebccd}
.field input,.field textarea,.field select{background:rgba(255,255,255,.06)}
.why-grid .it{background:rgba(255,255,255,.06)}

/* ===========================================================
   ACCESSIBILITY — visible focus + sr-only
   =========================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.drawer a:focus-visible,.explore:focus-visible,.btn-brass:focus-visible,
.burger:focus-visible,.lightbox .lc:focus-visible,.lightbox .ln:focus-visible,
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:6px}
.gal .g:focus-visible,.wc-lead:focus-visible,.wc-t:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}

/* ===========================================================
   CLARITY — persistent strapline + always-on quote CTA
   =========================================================== */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.05;position:relative;min-width:156px;min-height:58px}
@media(max-width:860px){.brand{min-width:124px;min-height:46px}.brand::before{width:124px;height:46px}}

/* focus ring for the hero call CTA + nav cta */
.hero-call:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:8px}

/* breathing room after removing the hero description */
.hero-actions{margin-top:34px}

/* burger: hidden on desktop, frosted glass trigger on mobile */
.burger{
  display:none;position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));z-index:var(--z-burger);
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(8,17,31,.62);border:1.5px solid var(--gold-lt);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .15s var(--ease-out);
}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#f4f7fb;transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.burger:hover{border-color:var(--gold-lt)}
.burger:active{transform:scale(.94)}
.burger:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .copy{top:126px}
  .burger{display:flex}
  /* the "Request a quote" pill has nowhere to go next to the burger at this width — hide it,
     same breakpoint the burger appears at, so the two never compete for space */
  .nav-cta{display:none}
}
@media(max-width:380px){
  .burger{width:44px;height:44px;top:calc(14px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px))}
}

/* ===========================================================
   PERFORMANCE — smooth drift: drop per-card blend/filter
   (mix-blend + image filters on moving cards = the jank)
   =========================================================== */
.bg{filter:none!important;transform:none!important;transition:opacity .45s var(--ease-out)!important}
.panel-hero:before{mix-blend-mode:normal!important;background:linear-gradient(165deg,rgba(227,195,114,.12),transparent 55%)}
.grain{display:none!important}
.copy.anim .swap{animation:none!important}
.panel-hero{transition:none!important}

/* ===========================================================
   PALETTE — navy blue + brass/gold + white (brand)
   =========================================================== */
:root{--ink:#0b1a30; --brass:#c79a3e;}
.scrim{background:
  radial-gradient(70% 60% at 15% 44%, rgba(227,195,114,.12), transparent 60%),
  linear-gradient(90deg,rgba(7,16,30,.76) 0%,rgba(7,16,30,.42) 46%,rgba(7,16,30,.10) 100%),
  linear-gradient(0deg,rgba(7,16,30,.80),transparent 58%)}
.panel-hero:after{background:linear-gradient(0deg,#0f2138 2%,rgba(15,33,56,.12) 56%,rgba(15,33,56,.32))}

/* ===== ABOUT panel (next-level) ===== */
.lead-statement{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.3;color:#eef2f7;max-width:780px;margin-bottom:42px;text-wrap:balance}
.lead-statement span{color:var(--gold-lt)}
.founder{margin:0}
.founder figcaption{margin-top:12px;font-family:'Archivo';font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt)}
.standard{margin-top:40px}
.std-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.std-list li{color:var(--mut);line-height:1.6;padding:18px 20px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px}
.std-list li b{color:#fff;font-family:'Archivo';display:block;margin-bottom:4px}
.panel-cta{display:flex;align-items:center;gap:22px;margin-top:42px;flex-wrap:wrap}
@media(max-width:860px){.std-list{grid-template-columns:1fr}}

/* ===========================================================
   PANEL PAGES - industrial upgrade
   =========================================================== */
.panel-hero{
  min-height:clamp(240px,34vh,340px);
  padding:clamp(34px,5vw,58px);
  background-position:center;
  border-bottom:1px solid rgba(227,195,114,.2);
  isolation:isolate;
}
.panel-hero:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,rgba(227,195,114,.18),transparent 44%);
}
.panel-hero:after{
  background:
    linear-gradient(0deg,#102640 0%,rgba(16,38,64,.78) 16%,rgba(5,10,18,.16) 62%),
    linear-gradient(90deg,rgba(4,9,18,.72),rgba(4,9,18,.08) 72%);
}
.panel-hero .in{max-width:860px}
.panel-hero .ey{font-size:.7rem;letter-spacing:.26em;margin-bottom:12px;color:var(--gold-lt);text-shadow:0 2px 18px rgba(0,0,0,.65)}
.panel-hero .ti{font-size:clamp(3rem,7vw,5.75rem);line-height:.9;text-shadow:0 16px 44px rgba(0,0,0,.68)}
.panel-body{max-width:1040px;padding:clamp(36px,5vw,66px) clamp(24px,5vw,64px) clamp(64px,7vw,88px)}
.panel-intro{
  max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,280px);
  column-gap:clamp(24px,5vw,56px);row-gap:14px;align-items:start;margin-bottom:clamp(28px,4vw,40px);
  padding-bottom:clamp(24px,4vw,36px);border-bottom:1px solid rgba(227,195,114,.18);
}
.panel-intro .eyebrow{grid-column:1/-1}
.panel-intro h3{margin:8px 0 0;max-width:660px}
.panel-intro p{margin:12px 0 0;max-width:430px;font-size:1.03rem;color:#d3dce8}
.lead-statement{font-size:clamp(1.75rem,3.3vw,2.65rem);margin-bottom:clamp(36px,5vw,58px)}
.lead-row{grid-template-columns:minmax(0,1fr) minmax(280px,.76fr);gap:clamp(34px,5vw,64px);align-items:start}
.lead-row .media{border-radius:8px;border:1px solid rgba(227,195,114,.2);box-shadow:0 24px 62px rgba(0,0,0,.32)}
.lead-row .media img{height:min(460px,58vh)}
.verse{border-radius:8px;background:rgba(199,154,62,.13);border-color:rgba(227,195,114,.32)}
.statline{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(34px,5vw,54px);
  border:1px solid rgba(227,195,114,.2);padding:0;background:rgba(255,255,255,.035);border-radius:8px;overflow:hidden;
}
.statline>div{padding:22px 20px;border-right:1px solid rgba(227,195,114,.16)}
.statline>div:last-child{border-right:0}
.statline .n{font-size:clamp(2.1rem,4vw,3rem)}
.std-list,.ind-grid,.readiness-grid{gap:12px}
.std-list li,.ind,.ready-card,.quote-card{
  border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03));
  border-color:rgba(227,195,114,.18);box-shadow:0 18px 42px rgba(0,0,0,.18);
}
.svc{
  display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:18px;align-items:start;
  border-radius:8px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032));
  border-color:rgba(227,195,114,.18);box-shadow:0 18px 42px rgba(0,0,0,.18);transform:none;
}
.svc:hover{background:rgba(255,255,255,.085);transform:translateY(-2px)}
.svc .ic{width:48px;height:48px;border-radius:50%;margin:0;border:1px solid rgba(227,195,114,.3);background:rgba(199,154,62,.12);grid-row:1/3}
.svc .ic img{height:24px}
.svc h4{font-size:1.08rem;margin:1px 0 6px;color:#fff;grid-column:2}
.svc p{font-size:.94rem;color:#cbd5e3;grid-column:2}
.svc .proof,.svc .tags{grid-column:1/-1}
.svc .proof{margin-top:16px;border-top-color:rgba(227,195,114,.16)}
.svc .tags span{border-color:rgba(227,195,114,.16);background:rgba(5,10,18,.22)}
.num-badge{font-size:.56rem;letter-spacing:.05em;text-align:center}
.ind{border-radius:8px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))}
.ind .nu{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(227,195,114,.3);border-radius:50%;background:rgba(199,154,62,.1);flex:0 0 48px;font-size:.62rem;line-height:1}
.checklist{max-width:none;gap:10px}
.checklist li{background:rgba(255,255,255,.045);border:1px solid rgba(227,195,114,.16);border-radius:8px;padding:16px 18px;color:#d0dae7}
.checklist li:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:9px}
.ready-card{min-height:160px;padding:26px}
.ready-card:before{height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.contact-grid{grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);gap:clamp(26px,5vw,54px)}
.info .row{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:17px 0}
.info .ic{width:52px;height:52px;border-radius:50%;font-family:'Archivo',sans-serif;font-weight:800;font-size:.58rem;letter-spacing:.08em;border:1px solid rgba(227,195,114,.28);background:rgba(199,154,62,.11)}
.info span{color:#cbd5e3}
.formcard{border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border-color:rgba(227,195,114,.2);box-shadow:0 24px 58px rgba(0,0,0,.24)}
.field input,.field textarea,.field select{border-radius:8px;background:rgba(4,9,18,.34)}
.map{border-radius:8px;border-color:rgba(227,195,114,.18)}
.featured-work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:clamp(34px,5vw,54px)}
.work-card{position:relative;display:flex;flex-direction:column;border:1px solid rgba(227,195,114,.2);border-radius:16px;overflow:hidden;background:#081421;box-shadow:0 18px 42px rgba(0,0,0,.18)}
.wc-lead{position:relative;height:250px;cursor:pointer}
.wc-lead img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04);transition:transform .45s var(--ease-out)}
.wc-lead:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,11,20,.92),rgba(5,11,20,.18) 62%,rgba(5,11,20,.08));pointer-events:none}
.wc-info{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;pointer-events:none}
.wc-info span{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:7px}
.wc-info h4{font-family:'Archivo',sans-serif;font-size:1.15rem;line-height:1.15;color:#fff;margin:0 0 8px}
.wc-info p{font-size:.88rem;line-height:1.5;color:#cbd5e3;margin:0;max-width:36ch}
@media(hover:hover) and (pointer:fine){.wc-lead:hover img{transform:scale(1.045)}}
.wc-thumbs{display:flex;gap:8px;padding:12px;background:rgba(255,255,255,.03);border-top:1px solid rgba(227,195,114,.14)}
.wc-t{flex:0 0 auto;width:72px;height:54px;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid rgba(227,195,114,.16);transition:border-color .25s var(--ease-out),transform .25s var(--ease-out)}
.wc-t img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.wc-t:hover{border-color:rgba(227,195,114,.55);transform:translateY(-2px)}
.feed-intro{margin-top:clamp(28px,5vw,46px);margin-bottom:18px}
.feed-intro h3{margin-bottom:0}
.panel-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(36px,6vw,62px);padding-top:24px;border-top:1px solid rgba(227,195,114,.18);
}
.panel-cta .explore{min-height:48px;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.panel-cta .explore:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.panel-cta .hero-call{min-height:48px}

@media(max-width:860px){
  .panel-hero{min-height:210px;padding:60px 22px 22px}
  .panel-body{max-width:none;padding:32px 20px 86px}
  .panel-intro{display:block;margin-bottom:28px;padding-bottom:26px}
  .panel-intro:after{display:none}
  .panel-intro p{max-width:none;margin-top:14px;font-size:1rem}
  .lead-row,.contact-grid{grid-template-columns:1fr;gap:28px}
  .lead-row .media img{height:300px}
  .statline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statline>div:nth-child(2){border-right:0}
  .statline>div:nth-child(-n+2){border-bottom:1px solid rgba(227,195,114,.16)}
  .svc-grid,.ind-grid,.readiness-grid,.std-list{grid-template-columns:1fr}
  .featured-work{grid-template-columns:1fr}
  .wc-lead{height:220px}
  .svc{padding:16px}
  .svc .ic{width:44px;height:44px}
  .panel-cta{align-items:stretch}
  .panel-cta .explore,.panel-cta .hero-call{width:100%;justify-content:center;text-align:center}
}

@media(max-width:420px){
  .panel-body{padding-left:16px;padding-right:16px}
  .frow{grid-template-columns:1fr}
  .statline{grid-template-columns:1fr}
  .statline>div{border-right:0;border-bottom:1px solid rgba(227,195,114,.16)}
  .statline>div:last-child{border-bottom:0}
  .wc-lead{height:200px}
  .svc{display:block}
  .svc .ic{margin-bottom:14px}
}

/* ===========================================================
   PANEL-HERO ENTRANCE — title + label reveal on page load
   =========================================================== */
body.ready .panel-hero .ey{animation:panelLabelIn .38s cubic-bezier(.23,1,.32,1) both .05s}
body.ready .panel-hero .ti{animation:panelTitleIn .52s cubic-bezier(.16,1,.3,1) both .08s}
body.ready .panel-hero:before{animation:panelHeroLight .78s cubic-bezier(.22,1,.36,1) both}

@keyframes panelLabelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes panelTitleIn{
  from{opacity:0;transform:translateY(16px) scale(.985);clip-path:inset(0 0 42% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
@keyframes panelHeroLight{
  from{opacity:.2;transform:translateX(-4%)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  body.ready .panel-hero .ey,body.ready .panel-hero .ti,body.ready .panel-hero:before{
    animation:none!important;filter:none!important;
  }
}

/* ===========================================================
   WBME ASSISTANT — on-brand chat widget
   =========================================================== */
.chatbot{
  position:fixed;left:26px;bottom:120px;z-index:var(--z-chatbot);
  width:min(392px,calc(100vw - 32px));
  height:min(560px,calc(100dvh - 150px));
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(227,195,114,.4);border-radius:18px;
  background:rgba(14,35,64,.66);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 34px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom left;
  transition:opacity .28s var(--ease-out),transform .32s var(--ease-out),visibility 0s linear .32s;
}
.chatbot.open{opacity:1;visibility:visible;transform:none;transition:opacity .28s var(--ease-out),transform .32s var(--ease-out)}
body.locked .chatbot{opacity:0;visibility:hidden;pointer-events:none}
.cb-head{
  display:flex;align-items:center;gap:12px;padding:14px 14px 13px 16px;flex-shrink:0;
  background:linear-gradient(90deg,rgba(199,154,62,.16),rgba(15,44,82,.35) 62%,transparent);
  border-bottom:1px solid rgba(227,195,114,.22);
}
.cb-prop{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;border:1px solid rgba(227,195,114,.45);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16),rgba(199,154,62,.12) 46%,rgba(15,44,82,.8) 74%)}
.cb-prop img{width:28px;height:28px;object-fit:contain;animation:propeller-spin 5s linear infinite;transform-origin:50% 50%}
.cb-id{flex:1;min-width:0;line-height:1.25}
.cb-id b{display:block;font-family:'Archivo';font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:#f4f7fb}
.cb-id span{display:block;font-family:'Archivo';font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#9fb0c6;margin-top:2px}
.cb-x{width:36px;height:36px;flex-shrink:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(5,10,18,.5);color:#e9eef5;font-size:1.25rem;line-height:1;cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.cb-x:hover{border-color:var(--gold-lt);background:rgba(199,154,62,.18)}
.cb-x:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.cb-log{flex:1;overflow-y:auto;padding:18px 16px 10px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.cb-log::-webkit-scrollbar{width:8px}
.cb-log::-webkit-scrollbar-track{background:transparent}
.cb-log::-webkit-scrollbar-thumb{background:rgba(199,154,62,.4);border-radius:999px}
.cb-m{max-width:84%;padding:11px 14px;font-size:.92rem;line-height:1.55;border-radius:14px;word-wrap:break-word}
.cb-m.bot{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(227,195,114,.18);border-top-left-radius:4px;color:#dce4ee}
.cb-m.bot b{color:#fff;font-family:'Archivo'}
.cb-m.user{align-self:flex-end;background:var(--gold);border-top-right-radius:4px;color:var(--ink);font-weight:500}
.cb-m .cb-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.cb-act{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;cursor:pointer;
  font-family:'Archivo';font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lt);background:rgba(199,154,62,.1);border:1px solid rgba(227,195,114,.42);border-radius:999px;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.cb-act:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cb-act:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.cb-typing{align-self:flex-start;display:inline-flex;gap:5px;padding:13px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(227,195,114,.18);border-radius:14px;border-top-left-radius:4px}
.cb-typing i{width:7px;height:7px;border-radius:50%;background:var(--gold-lt);opacity:.4;animation:cb-blink 1.1s infinite}
.cb-typing i:nth-child(2){animation-delay:.18s}
.cb-typing i:nth-child(3){animation-delay:.36s}
@keyframes cb-blink{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}
.cb-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 16px 10px;flex-shrink:0}
.cb-chip{
  min-height:34px;padding:6px 13px;cursor:pointer;
  font-family:'Archivo';font-weight:600;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:#c9d4e3;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.cb-chip:hover{border-color:var(--gold-lt);color:var(--gold-lt);background:rgba(199,154,62,.1)}
.cb-chip:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.cb-bar{display:flex;gap:9px;padding:11px 12px 12px;flex-shrink:0;border-top:1px solid rgba(227,195,114,.18);background:rgba(4,10,18,.42)}
.cb-bar input{
  flex:1;min-width:0;min-height:44px;padding:10px 15px;
  font-family:'Barlow';font-size:.94rem;color:#f4f7fb;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  transition:border-color .2s var(--ease-out);
}
.cb-bar input::placeholder{color:#9ca9ba}
.cb-bar input:focus{outline:none;border-color:var(--gold-lt)}
.cb-bar button{
  width:44px;height:44px;flex-shrink:0;cursor:pointer;font-size:1.05rem;
  color:var(--ink);background:var(--gold);border:1px solid var(--gold);border-radius:50%;
  transition:background .2s var(--ease-out),transform .15s var(--ease-out);
}
.cb-bar button:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.cb-bar button:active{transform:scale(.94)}
.cb-bar button:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
@media(max-width:860px){
  .chatbot{right:calc(10px + env(safe-area-inset-right,0px));left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;height:min(600px,calc(100dvh - 24px));border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
  .chatbot{transition:opacity .18s var(--ease-out),visibility 0s linear .18s;transform:none}
  .cb-typing i{animation:none;opacity:.7}
  /* NOTE: the propeller spin is deliberately NOT disabled here — the owner
     requires it to spin always, on every machine, including those with the
     OS "reduce animations" setting on (which was silently stopping it). */
}

/* ===========================================================
   BUTTON + CARD SYSTEM — matches DESIGN.md: no glass cards,
   pill-shaped controls, brass earned on action/hover only.
   Blur is reserved for the backdrop and the urgent mobile
   contact bar (DESIGN.md's one documented exception).
   =========================================================== */

/* ---- content cards: tonal + border, moderate industrial radius ---- */
.svc,.ind,.work-card,.formcard,.std-list li,.ready-card,.quote-card,.info .row{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(227,195,114,.2);
  border-radius:16px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.info .row{border-left:0;border-right:0;border-top:0;border-radius:0;padding:16px 18px;background:rgba(255,255,255,.03)}
.info .row:first-child{border-top-left-radius:16px;border-top-right-radius:16px}
.info .row:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.svc:hover,.ind:hover,.work-card:hover,.ready-card:hover{
  transform:translateY(-4px);
  border-color:rgba(227,195,114,.5);
  box-shadow:0 26px 54px rgba(0,0,0,.32);
}
.svc:before,.ind:before,.work-card:before,.ready-card:before,.explore:before,.btn-brass:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 60%);
  transition:opacity .3s var(--ease-out);
}
.svc:hover:before,.ind:hover:before,.work-card:hover:before,.ready-card:hover:before,.explore:hover:before,.btn-brass:hover:before,
.svc.is-touched:before,.ind.is-touched:before,.work-card.is-touched:before,.ready-card.is-touched:before,.explore.is-touched:before,.btn-brass.is-touched:before{opacity:1}
.svc>*,.ind>*,.work-card>*,.ready-card>*{position:relative;z-index:1}
.work-card:after{z-index:0}

.gal .g,.featured-work .work-card{border:1px solid rgba(227,195,114,.22)}
.gal .g{transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.gal .g:hover{transform:translateY(-3px);border-color:rgba(227,195,114,.55);box-shadow:0 22px 46px rgba(0,0,0,.32)}

/* ---- form fields: dark inset, fine white border, 11px radius per spec ---- */
.field input,.field textarea,.field select{
  background:rgba(0,0,0,.25);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:11px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--gold);
  background:rgba(0,0,0,.4);
  box-shadow:none;
}

/* ---- primary buttons: machined brass plate, chamfered corners, ink text ----
   deliberately NOT a pill — the chamfer is the button-shape signature,
   same family as the corner-marks motif on heroes/preloader */
.explore,.btn-brass,.panel-cta .explore,.cb-bar button,.nav-cta{
  background:var(--gold);
  border:1px solid rgba(227,195,114,.6);
  border-radius:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.4);
  position:relative;overflow:hidden;
}
.explore:hover,.btn-brass:hover,.panel-cta .explore:hover,.cb-bar button:hover,.nav-cta:hover{
  background:var(--gold-lt);
  border-color:var(--gold-lt);
  color:var(--ink);
  box-shadow:0 14px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.48);
  transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px));
}

/* ---- ghost buttons: glass fill, white border, brass on hover, same chamfer ---- */
.hero-call,.cb-chip{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.42);
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
}
.hero-call{padding:0 18px;min-height:48px}
.hero-call:hover,.cb-chip:hover{
  background:rgba(199,154,62,.78);border-color:var(--gold);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
/* lightbox prev/next/close stay circular — they're wayfinding controls, not CTAs */
.lightbox .ln,.lightbox .lc{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
}
.lightbox .ln:hover,.lightbox .lc:hover{
  background:rgba(199,154,62,.78);border-color:var(--gold);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}

/* ---- circular controls: frosted glass discs ---- */
.chatbot-fab,.cb-x{
  background:rgba(10,20,36,.5);
  border:1px solid rgba(227,195,114,.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.chatbot-fab:hover,.cb-x:hover{
  border-color:var(--gold-lt);
}

/* ===========================================================
   EDITORIAL TYPOGRAPHY + LAYOUT — panel content
   Glass surfaces stay as-is; this pass is purely type + rhythm:
   bigger considered numerals, a real editorial column structure,
   broken-grid emphasis on the lead item, tighter large-type tracking.
   =========================================================== */

/* hero + section headings: tighter tracking, no orphan words */
.panel-hero .ti{letter-spacing:-.01em;text-wrap:balance}
.panel-body h3{text-wrap:balance;font-size:clamp(1.9rem,3.7vw,3.05rem)}
.lead-statement{text-wrap:balance}

/* panel-intro becomes a real two-column editorial spread:
   a slim brass rule replaces the previously-empty second column */
.panel-intro{position:relative}
.panel-intro:after{
  content:"";grid-column:2;grid-row:1/-1;justify-self:start;
  width:1px;align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(227,195,114,.4) 12%,rgba(227,195,114,.4) 88%,transparent);
}
.panel-intro p{font-size:1.06rem;line-height:1.75}

/* big, considered stat numerals with tabular alignment */
.statline .n{font-size:clamp(2.6rem,5.6vw,4.3rem);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.statline .l{margin-top:8px}

/* service / industry / standard items read as a numbered
   manifesto rather than a generic feature grid */
.svc-grid,.ind-grid,.std-list{counter-reset:wbme-item}
.svc,.ind,.std-list li{counter-increment:wbme-item}
.svc:after,.ind:after,.std-list li:after{
  content:counter(wbme-item,decimal-leading-zero);
  position:absolute;top:10px;right:16px;z-index:0;pointer-events:none;
  font-family:'Anton';font-size:2.4rem;line-height:1;
  color:rgba(227,195,114,.14);
}
.std-list li:after{font-size:1.7rem;top:8px;right:12px}
.std-list li{position:relative;overflow:hidden}
.svc h4,.ind b,.std-list li b{position:relative;z-index:1}
.svc p,.svc .proof,.svc .tags,.ind span{position:relative;z-index:1}

/* break the uniform grid: lead item gets the full width */
.svc-grid .svc:first-child,.ind-grid .ind:first-child{grid-column:1/-1}
.svc-grid .svc:first-child h4,.ind-grid .ind:first-child b{font-size:1.28em}

/* generous, editorial rhythm */
.panel-intro{margin-bottom:clamp(36px,5.5vw,52px);padding-bottom:clamp(30px,4.5vw,44px)}
.svc-grid,.ind-grid{gap:16px}
.svc{padding:32px 28px}

@media(max-width:860px){
  .panel-intro:after{display:none}
  .svc-grid .svc:first-child,.ind-grid .ind:first-child{grid-column:1/-1}
}

/* ===========================================================
   MINI FOOTER — small, quiet, end of each panel
   =========================================================== */
.mini-footer{
  margin-top:clamp(40px,6vw,64px);padding-top:16px;
  border-top:1px solid rgba(227,195,114,.14);
  text-align:center;font-family:'Archivo';font-weight:600;
  font-size:.66rem;letter-spacing:.05em;color:#5f6d7f;
}

/* ===========================================================
   SLIDE-IN PANEL — frosted glass side panel
   A fixed-width panel slides in from the right with the homepage
   visible (and blurred) behind it. Glass surfaces throughout.
   =========================================================== */

/* ---- hero: a normal header image, not full-screen ---- */
.panel-hero{
  position:relative;min-height:260px;width:100%;
  padding:0;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;
  border-bottom:1px solid rgba(227,195,114,.22);isolation:isolate;filter:none;
}
.panel-hero:before{content:none}
.panel-hero:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,var(--panel) 0%,rgba(7,26,51,.62) 40%,rgba(7,26,51,.1) 100%);
}
.panel-hero .in{position:relative;z-index:2;max-width:100%;width:100%;padding:28px 34px}
.panel-hero .ey{font-size:.68rem;letter-spacing:.24em;margin-bottom:10px;color:var(--gold-lt);text-shadow:none}
.panel-hero .ti{font-size:clamp(2.6rem,6.4vw,4rem);line-height:.95;letter-spacing:0;text-shadow:0 10px 26px rgba(0,0,0,.5)}

/* ---- content zone: plain, readable ---- */
.panel-body{background:transparent;color:#e4eaf1;padding:32px 34px 64px;position:relative}
.panel-body:before{content:"";position:absolute;left:50%;top:0;width:800px;height:560px;transform:translate(-50%,-32%);border-radius:50%;background:radial-gradient(circle,rgba(199,154,62,.08),transparent 70%);pointer-events:none;z-index:-1}
.panel-intro{border-bottom-color:rgba(255,255,255,.12);grid-template-columns:1fr}
.panel-intro:after{display:none}
.panel-intro h3,.panel-intro p{max-width:640px}

/* ---- ordinary cards: subtle fill, real border, normal radius ---- */
.panel .svc,.panel .ind,.std-list li,.info .row,.formcard,.ready-card,.quote-card{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:10px;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
.panel .svc:before,.panel .ind:before,.ready-card:before{content:none}
.panel .svc:after,.panel .ind:after,.std-list li:after{content:none}

.panel .svc,.panel .ind{padding:20px;display:flex;gap:16px;align-items:flex-start}
.panel .svc .ic,.panel .ind .nu{
  display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;
  border-radius:8px;background:rgba(199,154,62,.14);color:var(--gold-lt);
  font-family:'Archivo';font-weight:800;font-size:.62rem;
}
.panel .svc h4,.panel .ind b{display:block;font-family:'Archivo';font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:5px}
.panel .svc p,.panel .svc .proof,.panel .svc .tags,.panel .ind span{color:#aebccd;font-size:.92rem;line-height:1.6}
.panel .svc .proof{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.panel .svc .proof b{font-family:'Archivo';font-size:.68rem;letter-spacing:.1em;color:var(--gold-lt)}
.panel .svc .tags{margin-top:8px}
.panel .svc .tags span{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px}
.info .row{border-radius:10px;margin-bottom:10px;padding:16px}
.formcard{padding:24px}
.lead-row .media{border-radius:10px;border:1px solid rgba(255,255,255,.14);box-shadow:none}

/* ---- panel buttons: glass, matching the sitewide button treatment ---- */
.panel .explore,.panel-body .explore{
  background:rgba(199,154,62,.4);color:var(--ink);border:1px solid rgba(227,195,114,.6);border-radius:8px;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  padding:14px 28px;font-weight:700;
}
.panel .explore:before,.panel-body .explore:before{content:none}
.panel .explore:hover,.panel-body .explore:hover{background:rgba(227,195,114,.6);border-color:var(--gold-lt);transform:translate(var(--tx,0px),var(--ty,0px));box-shadow:inset 0 1px 0 rgba(255,255,255,.48)}
.panel .hero-call,.panel-body .hero-call{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);border-radius:8px;
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff;text-decoration:none;padding:0 22px;min-height:48px;
}
.panel .hero-call:hover,.panel-body .hero-call:hover{border-color:var(--gold-lt);color:var(--gold-lt);background:rgba(199,154,62,.2)}
.panel-cta{border-top-color:rgba(255,255,255,.14)}

@media(max-width:860px){
  .panel .svc,.panel .ind{padding:16px}
}

/* ===========================================================
   ABOUT PAGE — full redesign: a cinematic hero with an overlaid
   pull-quote, a genuine glass "Founder" panel (sheen + spotlight +
   portrait tilt, same signature language as Home's About card),
   a unified standard/industries panel, a framed video, and the
   shared glass closing-cta card with legacy-toned copy.
   =========================================================== */

/* ---- hero: full viewport, autoplaying video background, Fraunces pull-quote.
   Doubled class (.page-hero.about-hero) so this beats the generic
   .page-hero{min-height:56vh} rule declared later in the file — plain
   .about-hero{min-height:74vh} used to lose that cascade fight and silently
   render short. ---- */
.page-hero.about-hero{height:100vh;min-height:640px}
@media(max-width:720px){.page-hero.about-hero{height:auto;min-height:100dvh}}
.about-hero-video{width:100%;height:100%;object-fit:cover;object-position:center;background:#05080d}
/* content moved off the bottom-left corner (it was clipping against the
   viewport edge and colliding with the fixed chatbot launcher there) and
   centred as one big cinematic title card, matching the full-bleed canvas. */
.about-hero{align-items:center;justify-content:center;text-align:center}
.about-hero .in{max-width:640px;padding:0 28px}
.about-hero .ti{font-size:clamp(3.6rem,9vw,7.5rem)}
.about-hero-quote{
  margin:18px auto 0;font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  color:#fff;font-size:clamp(1.3rem,2.6vw,1.9rem);text-wrap:balance;max-width:20ch;
}

/* ---- founder panel: glass card, sheen sweep, cursor spotlight ---- */
.founder-panel{position:relative;margin:0 0 clamp(48px,6vw,68px)}
.founder-panel-glow{position:absolute;left:15%;top:50%;width:60%;aspect-ratio:1.8/1;transform:translateY(-50%);pointer-events:none;background:radial-gradient(circle,rgba(227,195,114,.2),transparent 68%);filter:blur(50px);z-index:0}
.founder-panel-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,4.5vw,56px);align-items:stretch;
  padding:clamp(36px,5vw,56px);border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(227,195,114,.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16);
}
.founder-panel-grid:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(227,195,114,.3),transparent 62%);transition:opacity .35s var(--ease-out)}
.founder-panel-grid:hover:before,.founder-panel-grid.is-touched:before{opacity:1}
.founder-panel-grid>*{position:relative;z-index:1}
.founder-copy{display:flex;flex-direction:column;justify-content:center}
.founder-copy .eyebrow{margin-bottom:14px}
.founder-copy h2{font-family:'Anton';text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.08;color:#fff;margin-bottom:18px}
.founder-copy p{color:#d3dce8;font-size:1rem;line-height:1.75;margin-bottom:16px}
.founder-copy p:last-of-type{margin-bottom:0}
.verse{
  position:relative;margin-top:22px;padding:20px 24px;
  background:rgba(199,154,62,.12);border:1px solid rgba(227,195,114,.32);border-radius:16px;
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#f2f5f9;font-size:1.02rem;line-height:1.55;
}
.verse span{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt)}
.founder-portrait{position:relative;display:flex;flex-direction:column}
.founder-portrait-glow{position:absolute;inset:-16px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(227,195,114,.28),transparent 68%);filter:blur(30px)}
.founder-portrait-frame{position:relative;z-index:1;aspect-ratio:3/4;border-radius:18px;overflow:hidden;border:1px solid rgba(227,195,114,.35);background:linear-gradient(160deg,#0c223f,#081627);box-shadow:0 26px 56px rgba(0,0,0,.4);transform:perspective(900px) rotateX(var(--tilty,0deg)) rotateY(var(--tiltx,0deg));transition:transform .2s cubic-bezier(.16,1,.3,1)}
.founder-portrait-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) sepia(.22) contrast(1.06)}
.founder-portrait{align-self:center}
.founder-copy .founder-note{margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;line-height:1.6;color:var(--gold-lt)}
.founder-portrait figcaption{position:relative;z-index:1;margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'Archivo';font-weight:700;font-size:.82rem;color:#fff}
.founder-portrait figcaption span{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lt)}

/* ---- standard we hold / who we serve: one unified glass panel ---- */
.standard-panel{display:grid;grid-template-columns:1.1fr auto 1fr;gap:clamp(28px,4vw,48px);margin:0 0 clamp(48px,6vw,68px);padding:clamp(32px,4.5vw,48px);border-radius:24px;background:rgba(255,255,255,.035);border:1px solid rgba(227,195,114,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.standard-col .eyebrow{margin-bottom:18px}
.standard-divider{width:1px;background:rgba(227,195,114,.2)}
.std-list-new{list-style:none;display:flex;flex-direction:column;gap:16px}
.std-list-new li{display:flex;align-items:flex-start;gap:14px}
.std-list-new i{flex:0 0 24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(227,195,114,.45);background:rgba(199,154,62,.12);color:var(--gold-lt);font-style:normal;font-size:.7rem;margin-top:2px}
.std-list-new b{display:block;font-family:'Archivo';font-weight:700;font-size:.98rem;color:#fff;margin-bottom:3px}
.std-list-new span{display:block;color:var(--mut);font-size:.9rem;line-height:1.55}
.industry-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.industry-tags span{font-family:'Archivo';font-weight:600;font-size:.82rem;padding:9px 16px;border-radius:999px;border:1px solid rgba(227,195,114,.3);color:var(--gold-lt)}
.standard-note{color:var(--mut);font-size:.92rem;line-height:1.6;max-width:40ch}

/* ---- working hours: compact glass info card ---- */









/* ---- mid-page break: full-bleed atmospheric hero (not a thin divider) ---- */

@media(max-width:860px){
  .founder-panel-grid{grid-template-columns:1fr}
  .founder-portrait{order:-1}
  .founder-portrait{width:min(100%,360px);margin:0 auto}
  .standard-panel{grid-template-columns:1fr}
  .standard-divider{width:100%;height:1px}
}
@media(prefers-reduced-motion:reduce){.founder-portrait-frame{transition:none}}

/* ===========================================================
   NORMAL-FLOW SITE CHROME — header nav, footer, scroll progress
   (used by the standalone pages: about/services/projects/contact,
   and later by the rebuilt Home page)
   =========================================================== */
.site-hdr{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-hdr);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(18px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-right,0px)) 18px calc(40px + env(safe-area-inset-left,0px));
  background:var(--white-steel);border-radius:0;overflow:visible;
  box-shadow:0 1px 0 rgba(15,44,82,.1);
  transition:top .35s var(--ease-out),left .35s var(--ease-out),right .35s var(--ease-out),
    max-width .35s var(--ease-out),padding .3s var(--ease-out),border-radius .35s var(--ease-out),
    box-shadow .3s var(--ease-out),background-color .3s var(--ease-out);
}
/* on scroll: detach from the edges and become a floating pill —
   single fixed nav element, so the left/right/padding shift here is
   negligible cost (not a repeated list item worth avoiding it for). */
.site-hdr.scrolled{
  top:calc(14px + env(safe-area-inset-top,0px));left:22px;right:22px;max-width:1180px;margin:0 auto;
  padding:11px 28px;border-radius:999px;
  background:rgba(244,247,251,.97);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 16px 36px rgba(15,44,82,.22),0 0 0 1px rgba(15,44,82,.06);
}
.site-hdr .brand{display:inline-flex;flex-direction:row;align-items:center;gap:10px;min-width:190px;transition:min-width .3s var(--ease-out)}
.site-hdr .brand::before{display:none}
/* Scaled up visually via transform (not width/height), so the logo can render
   much larger than the header's own box without ever growing the header bar —
   transform is paint-only and never contributes to layout/flex sizing. The
   brand slot's min-width above reserves the matching horizontal room so the
   enlarged logo doesn't overlap the nav links; header HEIGHT is untouched. */
.site-hdr .brand-logo{display:block;height:52px;width:auto;object-fit:contain;transform:scale(1.3);transform-origin:left center;transition:transform .3s var(--ease-out)}
.site-hdr.scrolled .brand{min-width:0}
.site-hdr.scrolled .brand-logo{transform:scale(.95)}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-family:'Archivo';font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.78;transition:opacity .2s var(--ease-out),color .2s var(--ease-out);position:relative}
.site-nav a:hover{opacity:1;color:var(--brass-deep)}
/* current page: a small brass plate, same chamfer as the buttons. Negative margin
   matches the padding so the link keeps its place in the row. */
.site-nav a.active{opacity:1;color:var(--ink);background:var(--gold);padding:8px 14px;margin:-8px -14px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.site-nav a.active:hover{color:var(--ink);background:var(--gold-lt)}
.hdr-actions{display:flex;align-items:center;gap:22px}
.hdr-phone{font-family:'Archivo';font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--brass-deep);white-space:nowrap}
.hdr-phone:hover{color:var(--ink)}
.site-hdr .nav-cta{background:var(--gold);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(227,195,114,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);color:var(--ink);padding:.6rem 1.3rem;border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-family:'Archivo';font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;transition:background .2s var(--ease-out),border-color .2s var(--ease-out)}
.site-hdr .nav-cta:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.site-hdr .nav-cta:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
@media(max-width:960px){
  .site-nav,.hdr-phone{display:none}
  .site-hdr{padding:calc(16px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) 16px calc(20px + env(safe-area-inset-left,0px))}
  .site-hdr.scrolled{padding:11px 20px;left:14px;right:14px}
  .site-hdr .brand{min-width:0}
  .site-hdr .brand-logo{height:44px;transform:scale(1.15)}
}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-modal-progress);pointer-events:none}
.scroll-progress i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}

/* ===== FOOTER — small, simple, one clean row. Brass hairline on top,
   brand mark + nav + phone + back-to-top on one line, a quiet status/
   copyright/admin line underneath. No towers, no watermark — just tidy. ===== */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,var(--panel) 0%,#081527 100%);
}
.site-footer:before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,195,114,.65) 50%,transparent);
}
.sf-row{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px clamp(20px,5vw,64px);
}
.sf-brand-mark{display:inline-flex;align-items:center;gap:10px}
.sf-brand-mark img{width:38px;height:38px;object-fit:contain;flex:none}
.sf-brand-mark span{font-family:'Archivo';font-weight:700;font-size:1rem;letter-spacing:.02em;color:#fff}
.sf-brand-mark span b{color:var(--gold-lt)}
.sf-links{display:flex;flex-wrap:wrap;gap:22px}
.sf-links a{position:relative;font-family:'Archivo';font-weight:600;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);transition:color .2s var(--ease-out)}
.sf-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--gold-lt);transition:right .25s var(--ease-out)}
.sf-links a:hover{color:#fff}
.sf-links a:hover:after{right:0}
.sf-actions{display:flex;align-items:center;gap:16px}
.sf-actions a{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--mut);transition:color .2s var(--ease-out)}
.sf-actions a:hover{color:var(--gold-lt)}
.sf-top-btn{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(227,195,114,.4);color:var(--gold-lt);
  font-size:.95rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.sf-top-btn:hover{transform:translateY(-2px);border-color:var(--gold-lt);background:rgba(199,154,62,.18)}
.sf-top-btn:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
.sf-hours{
  max-width:1180px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:0 clamp(20px,5vw,64px) 18px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.03em;color:var(--mut);
}
.sf-hours-tag{font-family:'Archivo';font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.sf-hours-row b{color:#fff;font-weight:600}
.sf-bottom{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px clamp(20px,5vw,64px) 20px;border-top:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.06em;color:#7f8fa6;
}
.sf-bottom a{color:#7f8fa6;transition:color .2s var(--ease-out)}
.sf-bottom a:hover{color:var(--gold-lt)}
@media(max-width:640px){
  .sf-row{padding:22px 20px;justify-content:center;text-align:center}
  .sf-links{justify-content:center}
  .sf-hours{justify-content:center;text-align:center;padding:0 20px 18px}
  .sf-bottom{justify-content:center;text-align:center}
}

/* page-hero: a shorter version of the full-viewport home hero, used on About/Services/Projects/Contact */
.page-hero{min-height:56vh;overflow:hidden}
.page-hero .ey{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.1em}
.page-hero .corner-marks{z-index:3}
@media(max-width:720px){.page-hero{min-height:44vh}}

/* hero-bg: dedicated parallax/background layer, kept separate from the
   foreground .in text so the parallax transform never touches the heading */
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;will-change:transform}

/* magnetic buttons: JS sets --tx/--ty on pointer devices only */
.explore,.hero-call,.btn-brass,.nav-cta{transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out)}

/* ===========================================================
   HOME — static hero copy + scroll teaser sections
   =========================================================== */
/* corner registration marks — reused on the preloader and every hero */
.corner-marks{position:absolute;inset:26px;pointer-events:none;z-index:5}
.corner-marks i{position:absolute;width:22px;height:22px;border:1.5px solid rgba(227,195,114,.5)}
.corner-marks i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.corner-marks i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.corner-marks i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.corner-marks i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
@media(max-width:860px){.corner-marks{inset:16px}.corner-marks i{width:16px;height:16px}}

/* full-bleed hero: one cinematic photo fills the whole stage — no copy column.
   Minimal instrument-panel chrome (corner marks, coordinate tag, CTAs) floats
   over the image; the photography carries the section, per "Show the work". */
.stage-photo-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);will-change:transform}
.stage-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(0deg,rgba(5,10,18,.74) 0%,rgba(5,10,18,.32) 26%,transparent 52%),
  linear-gradient(100deg,rgba(5,10,18,.46) 0%,transparent 32%)}
.stage .corner-marks{z-index:4}
.stage-photo-tag{position:absolute;right:26px;bottom:26px;z-index:3;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.08em;color:#e9eef5;background:rgba(5,11,20,.55);padding:8px 12px;border:1px solid rgba(227,195,114,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stage .localtime{position:absolute;right:26px;top:112px;z-index:3}
@media(max-width:960px){.stage .localtime{display:none}}
.stage .hero-actions{position:absolute;left:48px;bottom:112px;z-index:3;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* wave divider: the hero curves down and flows straight into the marquee's
   fill colour, so the two read as one continuous shape, not a hard cut */
.stage-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;z-index:2;pointer-events:none;display:block}
.stage-wave path{fill:var(--panel)}
@media(max-width:960px){
  .stage{height:auto;min-height:100dvh}
  .stage .hero-actions{left:22px;right:22px;bottom:96px}
  .stage-wave{height:44px}
}

/* ===== SERVICES MARQUEE — conveyor-belt strip, directly below the hero ===== */
.marquee{position:relative;overflow:hidden;background:var(--panel);padding:22px 0;border-bottom:1px solid rgba(227,195,114,.18)}
/* the hero's own marquee sits pulled up over the tail of the hero image, so
   it's already visible within the first viewport on load, not just on scroll */
.marquee--hero{margin-top:-84px;z-index:5}
@media(max-width:860px){.marquee--hero{margin-top:-58px}}
.marquee:before,.marquee:after{content:"";position:absolute;top:0;bottom:0;width:min(120px,10vw);z-index:2;pointer-events:none}
.marquee:before{left:0;background:linear-gradient(90deg,var(--panel),transparent)}
.marquee:after{right:0;background:linear-gradient(-90deg,var(--panel),transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee-scroll 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{flex:none;font-family:'Archivo';font-weight:700;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;color:var(--white-steel);opacity:.88;padding:0 8px;transition:opacity .2s var(--ease-out),color .2s var(--ease-out)}
a.marquee-item:hover{opacity:1;color:var(--gold-lt)}
.marquee-dot{flex:none;width:7px;height:7px;margin:0 30px;border-radius:50%;background:var(--gold);opacity:.7}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:860px){
  .marquee{padding:16px 0}
  .marquee-item{font-size:1.02rem}
  .marquee-dot{margin:0 18px}
}

/* ===== ABOUT SUMMARY — floating brass card, the site's one deliberate
   colour departure: a lifted, warm-toned panel breaking out of the dark
   navy rhythm so it reads as a genuine "signature moment", not a repeat
   of the panel-navy cards used everywhere else. ===== */
.about-float{position:relative;background:var(--panel);padding:48px clamp(20px,5vw,64px) 64px;z-index:2;overflow:visible}
/* ambient breathing glow — sits behind the card, bleeds past its edges */
.about-card-glow{
  position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  width:min(1100px,94%);aspect-ratio:2.4/1;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(227,195,114,.4),transparent 68%);
  filter:blur(54px);animation:about-glow-breathe 6s ease-in-out infinite;
}
@keyframes about-glow-breathe{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
/* Genuine glass panel: translucent white over the dark navy section behind
   it, with real backdrop-blur (not just a flat tint) and a refractive edge —
   text goes dark grey since the surface reads light now, not gold or navy. */
.about-card{
  position:relative;z-index:3;margin:-28px auto 0;max-width:1180px;
  display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch;
  border-radius:32px;overflow:hidden;
  /* 3D brass frame: gradient border (light catches top-left, shadow falls
     bottom-right, glint at the tail) drawn in the border-box layer while the
     glass gradient fills the padding-box — works with the rounded corners. */
  border:3px solid transparent;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px) padding-box,
    linear-gradient(160deg,#14304f 0%,#0c2038 52%,#081829 100%) padding-box,
    linear-gradient(160deg,#f6e6b6 0%,#e3c372 18%,#c79a3e 42%,#7b5619 68%,#a67828 84%,#f1dca6 100%) border-box;
  box-shadow:0 30px 64px rgba(5,10,18,.5),0 0 0 1px rgba(123,86,25,.5),inset 0 1px 0 rgba(255,255,255,.12);
  transform:perspective(1400px) rotateX(1.2deg);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.about-card:hover{transform:perspective(1400px) rotateX(0deg) translateY(-4px);box-shadow:0 40px 80px rgba(5,10,18,.4),0 0 0 1px rgba(123,86,25,.5),0 0 34px rgba(227,195,114,.35),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18)}
/* light sweep — travels along the card's edge only, never across the text */
.about-card:before,
@keyframes edge-sheen{0%{background-position:100% 0}55%,100%{background-position:0 0}}

/* cursor spotlight — --mx/--my set by glass-fx.js, same system as .explore/.btn-brass */
.about-card:after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(227,195,114,.16),transparent 62%);
  transition:opacity .35s var(--ease-out);
}
.about-card:hover:after,.about-card.is-touched:after{opacity:1}
.about-copy{position:relative;z-index:5;padding:clamp(36px,5vw,64px);color:#dbe2ec}
.about-copy .eyebrow{display:inline-block;margin-bottom:16px;font-family:'Archivo';font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt)}
.about-copy h2{font-family:'Anton';text-transform:uppercase;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.02;color:#fff;max-width:17ch;text-wrap:balance;margin-bottom:18px}
.about-copy p{font-family:'Barlow';font-size:1rem;line-height:1.65;color:#c9d4e3;max-width:52ch;margin-bottom:28px}
.about-stats{display:flex;gap:28px;margin-bottom:30px;flex-wrap:wrap}
.about-stats span{display:flex;flex-direction:column;gap:3px;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.about-stats b{font-family:'Anton';font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--gold-lt)}
.about-link{display:inline-flex;align-items:center;gap:8px;font-family:'Archivo';font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);border-bottom:2px solid rgba(227,195,114,.45);padding-bottom:4px;transition:border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.about-link:hover{border-color:var(--gold-lt);color:#fff;transform:translateX(4px)}
.about-mark{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:36px}
.about-mark-glow{position:absolute;width:72%;padding-top:72%;border-radius:50%;background:radial-gradient(circle,rgba(227,195,114,.4),transparent 68%);filter:blur(2px)}
/* "face the cursor" tilt: --tiltx/--tilty set document-wide by glass-fx.js */
.about-mark-logo{position:relative;width:min(94%,360px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.28));transform:perspective(900px) rotateX(var(--tilty,0deg)) rotateY(var(--tiltx,0deg));transition:transform .18s cubic-bezier(.16,1,.3,1);will-change:transform}

@media(max-width:860px){
  .about-float{padding:32px 18px 64px}
  .about-card-glow{aspect-ratio:1.4/1}
  .about-card{grid-template-columns:1fr;border-radius:24px;transform:none;margin-top:-18px}
  .about-card:hover{transform:none}
  .about-mark{padding:32px;order:-1}
  .about-copy{padding:32px 26px}
  .about-stats{gap:22px}
}
/* NOTE: the About-card effects (glow, sheen, logo tilt) are deliberately NOT
   disabled under prefers-reduced-motion — owner requires them on every
   machine, including those with the OS "reduce animations" setting on. */

/* ===== OUR PROJECTS — fixed backdrop, the page scrolls over it.
   The section is a window onto a photo that never moves: the media and
   scrim are position:fixed to the viewport, and clip-path:inset(0) on the
   section clips them to the section's box, so they only show through while
   the section is on screen. Neighbouring sections scroll over it like
   normal. Unlike background-attachment:fixed this works on iOS Safari.
   Nothing here may sit under a transform/filter ancestor, or "fixed"
   would become relative to that ancestor. */
.showcase-fixed{position:relative;height:100vh;height:100lvh;clip-path:inset(0)}
.showcase-fixed-pin{position:absolute;inset:0}
.showcase-fixed-media{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;background-size:cover;background-position:center;z-index:0}
.showcase-scrim{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,10,18,.84) 0%,rgba(5,10,18,.5) 46%,rgba(5,10,18,.22) 100%),linear-gradient(0deg,rgba(5,10,18,.4),transparent 40%)}
.showcase-fixed .corner-marks{z-index:3}
.showcase-content{position:absolute;top:50%;left:0;z-index:2;transform:translateY(-50%);padding:0 clamp(24px,6vw,80px);max-width:620px}
.showcase-content .eyebrow{margin-bottom:18px}
.showcase-content h2{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(2.4rem,5vw,4rem);line-height:.98;margin-bottom:20px;text-wrap:balance}
.showcase-content p{color:var(--mut);font-size:1.05rem;line-height:1.7;margin-bottom:30px;max-width:52ch}

/* ===== VIDEO SHOWCASE — full-bleed autoplaying (muted) loop, viewport-gated ===== */
.video-showcase{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden;background:#050a12}
.video-showcase-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-showcase-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(5,10,18,.86) 0%,rgba(5,10,18,.28) 45%,rgba(5,10,18,.38) 100%)}
.video-showcase .corner-marks{z-index:3}
.video-showcase-content{position:relative;z-index:2;padding:0 clamp(24px,6vw,80px) clamp(56px,8vw,96px);max-width:640px}
.video-showcase-content .eyebrow{margin-bottom:16px}
.video-showcase-content h2{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.98;text-wrap:balance}
.video-sound-toggle{position:absolute;right:clamp(20px,5vw,56px);bottom:clamp(32px,6vw,64px);z-index:3;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(5,10,18,.55);border:1.5px solid rgba(227,195,114,.5);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.video-sound-toggle:hover{border-color:var(--gold-lt);transform:translateY(-2px)}
.video-sound-toggle:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
.video-sound-toggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.video-sound-toggle .ico-sound{display:none}
.video-sound-toggle.is-unmuted{border-color:var(--gold-lt);background:rgba(199,154,62,.22)}
.video-sound-toggle.is-unmuted .ico-mute{display:none}
.video-sound-toggle.is-unmuted .ico-sound{display:block}
@media(max-width:860px){
  .video-showcase{min-height:70vh}
  .video-sound-toggle{width:54px;height:54px;right:20px;bottom:24px}
}

/* ===== SERVICES GRID — six small panels, one per discipline, with a
   cursor-tilt + cursor-spotlight + Ken-Burns hover reveal per tile ===== */
.services-grid{position:relative;background:var(--panel);padding:clamp(36px,4.5vw,56px) clamp(20px,5vw,64px) clamp(56px,7vw,90px);border-top:1px solid rgba(227,195,114,.14)}
.services-grid-head{max-width:1180px;margin:0 auto clamp(20px,3vw,30px)}
.services-grid-head h2{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(2rem,4vw,3.2rem);margin-top:14px;text-wrap:balance}
.services-grid-list{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-tile{
  position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;
  border:1px solid rgba(227,195,114,.22);box-shadow:0 20px 44px rgba(0,0,0,.32);
  perspective:900px;
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .4s var(--ease-out),border-color .3s var(--ease-out);
  will-change:transform;
}
.svc-tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .6s var(--ease-out)}
.svc-tile:hover .svc-tile-bg,.svc-tile:focus-visible .svc-tile-bg{transform:scale(1.12)}
.svc-tile-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,10,18,.94) 0%,rgba(5,10,18,.34) 58%,rgba(5,10,18,.1) 100%)}
.svc-tile:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(227,195,114,.35),transparent 60%);transition:opacity .35s var(--ease-out)}
.svc-tile:hover:before,.svc-tile:focus-visible:before,.svc-tile.is-touched:before{opacity:1}
.svc-tile:hover,.svc-tile:focus-visible{border-color:rgba(227,195,114,.6);box-shadow:0 34px 64px rgba(0,0,0,.5)}
.svc-tile-num{position:absolute;top:16px;right:18px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;color:rgba(227,195,114,.8)}
.svc-tile-face{position:relative;z-index:2;padding:22px}
.svc-tile-face h3{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:1.4rem}
.svc-tile-face p{max-height:0;opacity:0;overflow:hidden;color:#dbe2ec;font-size:.86rem;line-height:1.55;margin-top:0;transition:max-height .4s var(--ease-out),opacity .3s var(--ease-out),margin-top .35s var(--ease-out)}
.svc-tile:hover .svc-tile-face p,.svc-tile:focus-visible .svc-tile-face p{max-height:120px;opacity:1;margin-top:10px}
.svc-tile-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;opacity:0;transform:translateY(6px);font-family:'Archivo';font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lt);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.svc-tile:hover .svc-tile-link,.svc-tile:focus-visible .svc-tile-link{opacity:1;transform:none}
@media(max-width:960px){.services-grid-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .services-grid-list{grid-template-columns:1fr;gap:16px}
  .svc-tile{aspect-ratio:16/11}
  .svc-tile-face p{max-height:120px;opacity:1;margin-top:10px} /* no hover on touch — show the blurb by default */
  .svc-tile-link{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .svc-tile,.svc-tile-bg{transition:none}
  .svc-tile:hover .svc-tile-bg{transform:scale(1.02)}
}

/* ===== CLOSING CTA — a floating glass card (sheen sweep + cursor spotlight +
   hover lift), not just a flat gradient band, so Home ends on the same
   "wow" register as the About card instead of trailing into the footer ===== */
.closing-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,9vw,110px) clamp(20px,5vw,64px);background:linear-gradient(160deg,#0f2c52 0%,#0a1f3d 55%,#071a33 100%);border-top:1px solid rgba(227,195,114,.16)}
.cc-glow{position:absolute;left:50%;top:50%;width:min(700px,120vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(1);pointer-events:none;background:radial-gradient(circle,rgba(227,195,114,.2),transparent 68%);filter:blur(50px);animation:cc-glow-pulse 4s ease-in-out infinite}
.cc-glow-2{width:min(420px,80vw);background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);filter:blur(40px);animation-duration:5.5s;animation-direction:reverse}
@keyframes cc-glow-pulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}

.cc-card{
  position:relative;z-index:2;max-width:860px;margin:0 auto;overflow:hidden;
  padding:clamp(48px,7vw,76px) clamp(28px,5vw,56px);border-radius:32px;
  background:linear-gradient(160deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(227,195,114,.32);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18),0 0 50px rgba(199,154,62,.16);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.cc-card:hover{transform:translateY(-5px);box-shadow:0 50px 110px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22),0 0 70px rgba(199,154,62,.26)}
.cc-card:before{
  content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 48%,rgba(227,195,114,.42) 54%,transparent 72%);
  transform:rotate(8deg) translateX(-20%);
  animation:about-sheen 7s ease-in-out infinite;
  mix-blend-mode:overlay;
}
.cc-card:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(227,195,114,.4),transparent 62%);
  transition:opacity .35s var(--ease-out);
}
.cc-card:hover:after,.cc-card.is-touched:after{opacity:1}
.cc-card > *{position:relative;z-index:2}
.cc-card .corner-marks{inset:18px}
.cc-status{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.cc-status i{width:7px;height:7px;border-radius:50%;background:var(--status-online);box-shadow:0 0 0 3px rgba(109,224,138,.22);animation:dispatch-pulse 2.2s ease-in-out infinite}
.closing-cta h2{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.04;margin-bottom:20px;max-width:18ch;margin-left:auto;margin-right:auto;text-wrap:balance}
.closing-cta p{color:var(--mut);font-size:1.05rem;max-width:52ch;margin:0 auto 34px}
.cc-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.cc-actions .btn-brass{width:auto;padding:1rem 2rem}
@media(max-width:640px){.cc-card{padding:40px 26px;border-radius:24px}}
@media(prefers-reduced-motion:reduce){
  .cc-glow,.cc-glow-2{animation:none;opacity:.6}
  .cc-card{transition:none}
  .cc-card:before,.about-card:before{animation:none;opacity:0}
}

/* ===== ABOUT PAGE — editorial heritage pass ===== */
.lead-statement{font-family:'Fraunces',serif;font-style:italic;font-weight:500;line-height:1.35}
.lead-statement span{color:var(--gold-lt);font-style:normal;font-family:'Archivo'}
.founder{position:relative}
.founder-glow{position:absolute;inset:-30px;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(227,195,114,.22),transparent 68%);filter:blur(34px)}
.stat-strip{background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.ss-item{transition:transform .2s var(--ease-out)}
.ss-item:hover{transform:translateY(-3px)}

/* legacy-toned closing CTA — distinct from Home's urgency-dispatch band:
   About closes on continuity and relationship, not "respond fast" pressure */
.legacy-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,9vw,100px) clamp(20px,5vw,64px);background:linear-gradient(160deg,#0f2c52 0%,#0a1f3d 55%,#071a33 100%);border-top:1px solid rgba(227,195,114,.16)}
.legacy-cta .corner-marks{inset:24px}
.legacy-cta-quote{position:relative;font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#fff;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.3;max-width:20ch;margin:0 auto 26px;text-wrap:balance}
.legacy-cta p{position:relative;color:var(--mut);font-size:1rem;max-width:48ch;margin:0 auto 32px}
.legacy-cta-actions{position:relative;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.legacy-cta-actions .btn-brass{width:auto;padding:1rem 2rem}

/* ===== SERVICES PAGE — "spec sheet": numbered alternating rows instead of
   the generic 3-col icon grid, so the six disciplines read like dossier
   entries (real photo + description + proof + tags) rather than feature
   cards ===== */
.spec-list{display:flex;flex-direction:column;gap:clamp(48px,7vw,76px)}
.spec-row{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:center}
/* rows are link targets (services.html#pipe-works): land clear of the fixed header */
.spec-row{scroll-margin-top:calc(108px + env(safe-area-inset-top,0px))}
/* the linked row is already where the visitor asked to be: it fades in but does not
   slide, so the browser scrolls to its true position, not the pre-reveal offset */
.spec-row.p-rv:target{transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1)}
.spec-row:nth-child(even){grid-template-columns:.75fr 1.25fr}
.spec-row:nth-child(even) .spec-row-media{order:2}
.spec-row-media{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid rgba(227,195,114,.22);box-shadow:0 24px 54px rgba(0,0,0,.32)}
.spec-row-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .6s var(--ease-out)}
.spec-row:hover .spec-row-img{transform:scale(1.08)}
.spec-num{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.72rem;letter-spacing:.14em;color:var(--gold-lt);margin-bottom:14px}
.spec-row-body h3{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:14px}
.spec-row-body p{color:var(--mut);font-size:1rem;line-height:1.7;margin-bottom:22px;max-width:52ch}



.spec-tags{display:flex;flex-wrap:wrap;gap:8px}
.spec-tags span{font-family:'Archivo';font-weight:600;font-size:.76rem;padding:6px 14px;border-radius:999px;border:1px solid rgba(227,195,114,.3);color:var(--gold-lt)}
.spec-more{margin-top:22px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;font-family:'Archivo';font-weight:700;font-size:.84rem;letter-spacing:.04em;color:var(--gold-lt);cursor:pointer;transition:color .2s var(--ease-out),gap .2s var(--ease-out)}
.spec-more:hover{color:#fff;gap:12px}
@media(max-width:860px){
  .spec-row,.spec-row:nth-child(even){grid-template-columns:1fr}
  .spec-row:nth-child(even) .spec-row-media{order:0}
  .spec-row-media{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){.spec-row-img{transition:none}}

/* ===== SERVICE DETAIL MODAL — "Learn more" popup with a two-shot gallery
   and the fuller write-up for each discipline. Reuses .cm-backdrop/.cm-x
   from the contact modal for the shared chrome. ===== */
.service-modal{position:fixed;inset:0;z-index:var(--z-contact-modal);display:none;align-items:center;justify-content:center;padding:24px}
.service-modal.open{display:flex}
.sm-panel{
  position:relative;z-index:1;width:min(920px,100%);max-height:min(90vh,720px);overflow-y:auto;
  background:linear-gradient(165deg,rgba(27,58,99,.5) 0%,rgba(7,26,51,.62) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid rgba(255,255,255,.18);border-radius:30px;
  box-shadow:0 50px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.24);
  padding:clamp(20px,3vw,32px);
  opacity:0;filter:blur(10px);transform:scale(.94) translateY(14px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),filter .4s var(--ease-out);
}
.service-modal.open .sm-panel{opacity:1;filter:blur(0);transform:none}
.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,40px);align-items:stretch}
.sm-gallery{display:grid;grid-template-rows:1.5fr 1fr;gap:10px;border-radius:20px;overflow:hidden;min-height:280px}
.sm-shot{background-size:cover;background-position:center}
.sm-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,1.5vw,16px) clamp(8px,1vw,12px) clamp(8px,1.5vw,16px) 0}
.sm-body h3{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(1.6rem,2.8vw,2.1rem);margin:2px 0 14px}
.sm-desc{color:var(--mut);font-size:.96rem;line-height:1.7;margin-bottom:20px}
.sm-actions{margin-top:24px}
@media(prefers-reduced-motion:reduce){.sm-panel{filter:none;transition:opacity .2s ease,transform .2s ease}}
@media(max-width:820px){
  .service-modal{padding:0}
  .sm-panel{width:100%;height:100%;max-height:none;border:0;border-radius:0;padding:calc(20px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}
  .sm-grid{grid-template-columns:1fr}
  .sm-gallery{min-height:220px}
}

/* ===== CONTACT PAGE — the same landscape glass pane as the contact modal,
   as a full inline page section instead of a popup (reuses .cm-grid/.cm-side/
   .cm-d/.cm-map, which already carry the modal's styling) ===== */
.contact-panel{position:relative;overflow:hidden;padding:clamp(28px,4vw,48px);border-radius:30px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(165deg,rgba(27,58,99,.5) 0%,rgba(7,26,51,.62) 100%);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.contact-panel-glow{position:absolute;left:50%;top:0;width:min(760px,120%);aspect-ratio:1.6/1;transform:translate(-50%,-55%);pointer-events:none;background:radial-gradient(circle,rgba(227,195,114,.18),transparent 68%);filter:blur(50px)}
.contact-panel .cm-grid{position:relative;z-index:1}
.contact-panel .cm-form-side h3{font-family:'Anton';text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.1rem);color:#fff;margin:8px 0 12px}
.contact-panel .cm-form-side p{color:var(--mut);margin-bottom:24px;max-width:46ch;line-height:1.6}
@media(max-width:820px){.contact-panel{border-radius:22px}}

/* ===== PROJECTS BLOG — listing grid + single-post view, backed by Supabase ===== */
#projectsBlog [hidden]{display:none!important}
.blog-loading,.blog-empty,.blog-error{display:flex;align-items:center;gap:12px;padding:48px 0;color:var(--mut);font-family:'Archivo';font-weight:600;font-size:.9rem}
.blog-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(227,195,114,.25);border-top-color:var(--gold-lt);animation:blog-spin .7s linear infinite;flex:none}
@keyframes blog-spin{to{transform:rotate(360deg)}}
.blog-retry{background:none;border:1px solid rgba(227,195,114,.4);color:var(--gold-lt);font-family:'Archivo';font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.blog-retry:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

.blog-grid{display:flex;flex-direction:column;gap:clamp(32px,4.5vw,44px)}

/* discipline filter chips */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px}
.blog-filter{background:rgba(255,255,255,.04);border:1px solid rgba(227,195,114,.28);color:var(--mut);font-family:'Archivo';font-weight:600;font-size:.78rem;letter-spacing:.04em;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out)}
.blog-filter:hover{color:#fff;border-color:rgba(227,195,114,.5)}
.blog-filter.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.blog-hidden{display:none!important}

/* featured post: newest project, given magazine-style prominence */
.blog-feature{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;gap:0;border:1px solid rgba(227,195,114,.28);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 60px rgba(0,0,0,.28);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)}
.blog-feature:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(227,195,114,.22),transparent 62%);transition:opacity .3s var(--ease-out)}
.blog-feature:hover:before,.blog-feature.is-touched:before{opacity:1}
.blog-feature:hover{transform:translateY(-4px);border-color:rgba(227,195,114,.55);box-shadow:0 34px 76px rgba(0,0,0,.36)}
.blog-feature-img{min-height:280px;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .6s var(--ease-out)}
.blog-feature:hover .blog-feature-img{transform:scale(1.07)}
.blog-feature-body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,44px)}
.blog-feature-kicker{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:14px}
.blog-feature-body .blog-card-tag{margin-bottom:10px}
.blog-feature-body h3{font-family:'Anton';text-transform:uppercase;color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05;margin-bottom:14px;text-wrap:balance}
.blog-feature-body p{color:#cbd5e3;font-size:.98rem;line-height:1.65;margin-bottom:18px;max-width:46ch}
@media(max-width:860px){.blog-feature{grid-template-columns:1fr}.blog-feature-img{min-height:220px}}

/* regular grid: editorial overlay cards */
.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1100px){.blog-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.blog-cards{grid-template-columns:1fr}}
.blog-card{position:relative;display:block;border:1px solid rgba(227,195,114,.2);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 42px rgba(0,0,0,.18);transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.blog-card:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(227,195,114,.28),transparent 60%);transition:opacity .3s var(--ease-out)}
.blog-card:hover:before,.blog-card.is-touched:before{opacity:1}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(227,195,114,.5);box-shadow:0 26px 54px rgba(0,0,0,.3)}
.blog-card-img{position:relative;height:230px;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .5s var(--ease-out)}
.blog-card:hover .blog-card-img{transform:scale(1.08)}
.blog-card-face{padding:22px 24px 26px}
.blog-card-tag{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:8px}
.blog-card-face h4{font-family:'Archivo';font-size:1.15rem;color:#fff;margin-bottom:8px}
.blog-card-face p{font-size:.9rem;line-height:1.55;color:#cbd5e3;margin-bottom:14px;max-width:42ch}
.blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.blog-card-date{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.06em;color:#6f7d90}
.blog-card-link{display:inline-flex;align-items:center;gap:6px;font-family:'Archivo';font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lt)}
@media(prefers-reduced-motion:reduce){.blog-card-img,.blog-feature-img{transition:none}}

/* single post: cinematic overlay cover instead of image-then-title */
.blog-post{position:relative;max-width:820px}
.blog-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-family:'Archivo';font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-lt)}
.blog-back:hover{color:#fff}
.blog-post-hero{position:relative;min-height:min(52vh,440px);border-radius:22px;overflow:hidden;background-size:cover;background-position:center;margin-bottom:32px;border:1px solid rgba(227,195,114,.24);display:flex;align-items:flex-end;box-shadow:0 30px 70px rgba(0,0,0,.34)}
.blog-post-hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,10,18,.92) 0%,rgba(5,10,18,.35) 55%,rgba(5,10,18,.05) 100%)}
.blog-post-hero-in{position:relative;z-index:1;padding:clamp(24px,4vw,40px)}
.blog-post-tag{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:10px}
.blog-post-hero-in h1{font-family:'Anton';text-transform:uppercase;font-size:clamp(2rem,4vw,3.2rem);line-height:1;color:#fff;margin-bottom:12px;text-wrap:balance}
.blog-post-date{font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.06em;color:#c3cedb}
.blog-post-body{font-family:'Barlow';font-size:1.05rem;line-height:1.75;color:#dbe2ec;max-width:68ch;white-space:pre-line;margin-bottom:32px}
.blog-post-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:640px){.blog-post-gallery{grid-template-columns:repeat(2,1fr)}.blog-post-hero{min-height:280px}}
.blog-post-thumb{aspect-ratio:4/3;border-radius:12px;background-size:cover;background-position:center;cursor:pointer;border:1px solid rgba(227,195,114,.2);transition:transform .25s var(--ease-out),border-color .25s var(--ease-out)}
.blog-post-thumb:hover{transform:translateY(-3px);border-color:rgba(227,195,114,.55)}

/* ===== ADMIN — login + project CRUD dashboard, matching the site's glass
   + brass language instead of the plain dark cards it launched with ===== */
.admin-hdr{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:rgba(7,26,51,.72);border-bottom:1px solid rgba(227,195,114,.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
}
.admin-brand{display:inline-flex;align-items:center;gap:12px}
.admin-brand img{width:30px;height:30px;object-fit:contain;animation:propeller-spin .9s linear infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.admin-brand-word{font-family:'Archivo';font-weight:700;font-size:1.1rem;letter-spacing:.04em;color:#fff}
.admin-brand-word b{color:var(--gold-lt)}
.admin-brand-tag{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);padding:3px 9px;border:1px solid rgba(227,195,114,.4);border-radius:999px}
.admin-hdr-actions{display:flex;align-items:center;gap:16px}
.admin-who{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--mut)}
.btn-ghost-sm{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.28);color:#fff;font-family:'Archivo';font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 18px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out)}
.btn-ghost-sm:hover{background:rgba(199,154,62,.75);border-color:var(--gold);color:var(--ink)}

.admin-main{max-width:920px;margin:0 auto;padding:clamp(48px,7vw,80px) 24px 100px}

/* login — split screen: the yard on the left (drone shot of the WBME
   building), a brushed-steel panel with the form on the right. While signed
   out (body.admin-out) the page header is hidden and the login fills the
   screen; body.admin-checking hides everything until the session check
   answers, so a signed-in admin never sees the form flash. */
body.admin-checking .admin-login,body.admin-checking .admin-hdr{visibility:hidden}
body.admin-out .admin-hdr{display:none}
body.admin-out .admin-main{max-width:none;padding:0}
.admin-login{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh;min-height:100dvh}
.admin-login[hidden]{display:none}

.al-visual{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,52px);background:#071424}
.al-photo{position:absolute;inset:0;background:url('../media/hero/contact-building-1280.webp') center 60%/cover no-repeat;transform:scale(1.04);animation:al-drift 24s ease-in-out infinite alternate}
.al-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,12,24,.94) 0%,rgba(5,12,24,.55) 45%,rgba(5,12,24,.35) 100%),linear-gradient(90deg,rgba(5,12,24,.35),transparent 60%)}
@keyframes al-drift{to{transform:scale(1.1) translate(-1.5%,-1%)}}
.al-visual .corner-marks{inset:22px;z-index:1}
.al-visual>*:not(.al-photo){position:relative;z-index:2}
.al-brand{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;font-family:'Archivo';font-weight:700;font-size:1.25rem;letter-spacing:.04em;color:#fff}
.al-brand img{width:40px;height:40px;animation:propeller-spin .9s linear infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.al-brand b{color:var(--gold-lt)}
.al-statement{max-width:30rem;margin-top:auto;margin-bottom:clamp(28px,5vh,56px)}
.al-kicker{display:inline-flex;align-items:center;gap:12px;font-family:'Archivo';font-weight:600;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:16px}
.al-kicker:before{content:"";width:26px;height:1px;background:var(--gold-lt)}
.al-statement h2{font-family:'Anton';text-transform:uppercase;font-size:clamp(2.4rem,4.4vw,4rem);line-height:.98;color:#fff;margin-bottom:16px;text-wrap:balance}
.al-statement p{color:#c9d4e3;font-size:1.02rem;line-height:1.65;max-width:40ch}
.al-meta{display:flex;justify-content:space-between;gap:16px;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(227,195,114,.7)}

.al-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px);background:#081729;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),radial-gradient(120% 70% at 50% 40%,rgba(22,58,102,.45),transparent 65%);border-left:1px solid rgba(227,195,114,.18)}
.al-form-wrap{width:100%;max-width:380px}
.al-form-wrap h1{font-family:'Anton';text-transform:uppercase;font-size:clamp(2.2rem,3.4vw,2.8rem);line-height:1;color:#fff;margin:14px 0 10px}
.al-sub{color:var(--mut);font-size:.95rem;line-height:1.6;margin-bottom:30px}
.al-field{margin-bottom:18px}
.al-field label{display:block;font-family:'Archivo';font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#c9d4e3;margin-bottom:8px}
.al-field input{width:100%;height:52px;padding:0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:#fff;font-family:'Barlow';font-size:1rem;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out)}
.al-field input:hover{border-color:rgba(255,255,255,.28)}
.al-field input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(199,154,62,.28)}
.al-pass{position:relative}
.al-pass input{padding-right:78px}
.al-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-width:60px;height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--gold-lt);font-family:'Archivo';font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.al-eye:hover{background:rgba(255,255,255,.06)}
.al-eye:focus-visible{outline:2px solid var(--gold-lt);outline-offset:1px}
.al-caps{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--gold-lt)}
.al-submit{width:100%;margin-top:10px;min-height:54px;font-size:.92rem}
.al-submit:disabled{opacity:.7;cursor:progress}
.admin-login-error{margin-top:16px;padding:12px 14px;border-radius:10px;border:1px solid rgba(233,140,140,.4);background:rgba(224,122,122,.1);color:#f1b0b0;font-size:.88rem;line-height:1.5}
.al-back{display:inline-flex;margin-top:28px;min-height:44px;align-items:center;font-family:'Archivo';font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);transition:color .2s var(--ease-out)}
.al-back:hover{color:var(--gold-lt)}

@media(max-width:860px){
  .admin-login{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .al-visual{min-height:34vh;min-height:34dvh;padding:22px 22px 26px}
  .al-visual .corner-marks{inset:14px}
  .al-statement{margin-bottom:0}
  .al-statement h2{font-size:2rem}
  .al-statement p,.al-meta{display:none}
  .al-panel{align-items:flex-start;border-left:0;border-top:1px solid rgba(227,195,114,.18);padding:30px 22px 40px}
}
@media(prefers-reduced-motion:reduce){.al-photo{animation:none}}

/* dashboard */
.admin-dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.admin-dash-head h1{font-family:'Anton';text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;margin-top:8px}
.admin-new-btn{width:auto;padding:.85rem 1.6rem}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.admin-stat{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(227,195,114,.18)}
.admin-stat b{display:block;font-family:'Anton';font-size:1.7rem;color:var(--gold-lt);line-height:1}
.admin-stat span{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.admin-list{display:flex;flex-direction:column;gap:12px}
.admin-empty{color:var(--mut);padding:20px 0}
.admin-row{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid rgba(227,195,114,.16);border-radius:14px;background:rgba(255,255,255,.03);transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.admin-row:hover{background:rgba(255,255,255,.055);border-color:rgba(227,195,114,.35);transform:translateY(-2px)}
.admin-row-thumb{width:64px;height:48px;border-radius:8px;background-size:cover;background-position:center;flex:none;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.admin-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.admin-row-body b{color:#fff;font-family:'Archivo';font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-row-meta{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.admin-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16)}
.admin-badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.admin-badge.is-published{color:var(--status-online);border-color:rgba(109,224,138,.3)}
.admin-badge.is-draft{color:#9fb0c6;border-color:rgba(159,176,198,.28)}
.admin-row-actions{display:flex;gap:8px;flex:none}

/* form — one column, plain questions, boxed fields (same style as sign-in) */
.admin-form-panel{max-width:680px;margin:0 auto}
.pf-back{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--mut);font-family:'Archivo';font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s var(--ease-out)}
.pf-back:hover{color:var(--gold-lt)}
.pf-heading{font-family:'Anton';text-transform:uppercase;font-size:clamp(2rem,4vw,2.6rem);line-height:1;color:#fff;margin:6px 0 28px}
.pf-field{margin-bottom:26px}
.pf-field > label:not(.pf-drop),.pf-label{display:block;font-family:'Archivo';font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#c9d4e3;margin-bottom:10px}
.pf-field input[type=text],.pf-field input[type=date],.pf-field textarea{width:100%;padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:#fff;font-family:'Barlow';font-size:1rem;line-height:1.55;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out)}
.pf-field input[type=text],.pf-field input[type=date]{height:52px;padding-top:0;padding-bottom:0}
.pf-field textarea{resize:vertical;min-height:150px}
.pf-field input::placeholder,.pf-field textarea::placeholder{color:#7e8b9c}
.pf-field input:hover,.pf-field textarea:hover{border-color:rgba(255,255,255,.28)}
.pf-field input:focus,.pf-field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(199,154,62,.28)}
.pf-field input[type=date]{max-width:240px;color-scheme:dark}
.pf-err{margin-top:8px;font-size:.86rem;color:#f1b0b0}

/* type of work: tap-to-choose chips */
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chips label{position:relative;cursor:pointer}
.pf-chips input{position:absolute;opacity:0;pointer-events:none}
.pf-chips span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);font-family:'Archivo';font-weight:600;font-size:.86rem;color:#dbe2ec;transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out)}
.pf-chips label:hover span{border-color:rgba(227,195,114,.6)}
.pf-chips input:checked + span{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pf-chips input:focus-visible + span{outline:2px solid var(--gold-lt);outline-offset:2px}

/* photos: one drop zone, thumbnails below, first is the cover */
.pf-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:130px;padding:22px;border:1.5px dashed rgba(227,195,114,.45);border-radius:14px;background:rgba(199,154,62,.05);text-align:center;cursor:pointer;transition:background .2s var(--ease-out),border-color .2s var(--ease-out)}
.pf-drop:hover,.pf-drop.is-over{background:rgba(199,154,62,.12);border-color:var(--gold-lt)}
.pf-drop:focus-within{outline:2px solid var(--gold-lt);outline-offset:3px}
.pf-drop input{position:absolute;width:1px;height:1px;opacity:0}
.pf-drop b{font-family:'Archivo';font-weight:700;font-size:1rem;color:var(--gold-lt)}
.pf-drop span{font-size:.9rem;color:var(--mut)}
.pf-thumbs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.pf-thumbs:empty{display:none}
.pf-thumb{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0b1c33}
.pf-thumb.is-cover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pf-thumb-img{aspect-ratio:4/3;background-size:cover;background-position:center}
.pf-cover-tag,.pf-make-cover{position:absolute;left:8px;bottom:8px;padding:5px 10px;border-radius:999px;font-family:'Archivo';font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.pf-cover-tag{background:var(--gold);color:var(--ink)}
.pf-make-cover{border:0;background:rgba(7,20,36,.85);color:#fff;cursor:pointer;min-height:30px}
.pf-make-cover:hover{background:var(--gold);color:var(--ink)}
.pf-remove{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(7,20,36,.85);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.pf-remove:hover{background:#b54a4a}
.pf-make-cover:focus-visible,.pf-remove:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}

.pf-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.pf-actions .btn-brass{width:auto;min-width:160px;padding:1rem 2rem}
.pf-actions .pf-draft{min-height:50px;padding:0 22px}
.pf-actions button:disabled{opacity:.6;cursor:progress}
.admin-form-status{flex-basis:100%;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--gold-lt)}
.admin-form-status:empty{display:none}
@media(max-width:640px){
  .pf-actions .btn-brass,.pf-actions .pf-draft{flex:1 1 100%}
}
@media(max-width:640px){
  .admin-hdr{padding:14px 20px}
  .admin-main{padding:36px 18px 80px}
  .admin-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .admin-stat{padding:12px}
  .admin-stat b{font-size:1.3rem}
}

/* ===========================================================
   HOME — full rebuild below the hero: instrument stat strip,
   interactive capability triptych, dispatch-panel closing CTA.
   Replaces the old stacked alternating-row teasers, which read
   as the same block repeated three times.
   =========================================================== */
.stat-strip{position:relative;background:var(--panel);padding:56px 48px;border-top:1px solid rgba(227,195,114,.14);border-bottom:1px solid rgba(227,195,114,.14)}
.stat-strip-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.ss-item{text-align:center;padding:0 20px;border-left:1px solid rgba(227,195,114,.16)}
.ss-item:first-child{border-left:0}
.ss-item b{display:block;font-family:'JetBrains Mono',monospace;font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(2rem,3.6vw,3rem);color:var(--gold-lt);line-height:1;text-shadow:0 0 26px rgba(227,195,114,.22)}
.ss-item span{display:block;margin-top:12px;font-family:'Archivo';font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}

/* tag-strip — compact linked pill row for Home's "who we serve" band
   (the matching "six disciplines" band was superseded by the services marquee) */
.tag-strip{padding:56px 64px;border-bottom:1px solid rgba(227,195,114,.14)}
.tag-strip-inner{max-width:1180px;margin:0 auto}
.tag-strip-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.tag-pill{font-family:'Archivo';font-weight:600;font-size:.86rem;letter-spacing:.02em;color:#dfe5ee;padding:12px 22px;border:1px solid rgba(227,195,114,.22);border-radius:999px;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s var(--ease-out);cursor:default}
a.tag-pill{cursor:pointer}
a.tag-pill:hover{border-color:var(--gold-lt);color:var(--gold-lt);background:rgba(199,154,62,.08)}
@media(max-width:860px){.tag-strip{padding:40px 22px}}

/* dispatch: closing CTA reframed as a workshop status panel — left-aligned, not centered */
.dispatch{position:relative;overflow:hidden;padding:96px 64px 88px;background:linear-gradient(160deg,#0f2c52 0%,#0a1f3d 62%,#071a33 100%)}
.dispatch:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 100% at 20% 30%,#000,transparent 72%);
  mask-image:radial-gradient(120% 100% at 20% 30%,#000,transparent 72%);
}
.dispatch-status{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:38px}
.dispatch-status .dot{width:7px;height:7px;border-radius:50%;background:var(--status-online);box-shadow:0 0 0 3px rgba(109,224,138,.22);animation:dispatch-pulse 2.2s ease-in-out infinite}
@keyframes dispatch-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.dispatch-grid{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.dispatch-copy h2{font-family:'Anton';text-transform:uppercase;font-size:clamp(2.1rem,4.4vw,3.6rem);color:#fff;margin-bottom:18px;max-width:16ch;text-wrap:balance}
.dispatch-copy p{color:var(--mut);max-width:48ch;margin-bottom:32px}
.dispatch-coord{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:#7f8fa6;text-align:right;display:flex;flex-direction:column;gap:5px;white-space:nowrap}

@media(max-width:720px){
  .stat-strip{padding:40px 20px}
  .stat-strip-inner{grid-template-columns:1fr 1fr;row-gap:28px}
  .ss-item:nth-child(3){border-left:0}
  .dispatch{padding:64px 22px 56px}
  .dispatch-grid{flex-direction:column;align-items:flex-start}
  .dispatch-coord{text-align:left}
  .dispatch-copy h2{max-width:none}
}

/* ===========================================================
   WBME ASSISTANT v4 — live status, conversation memory,
   enquiry cards, teaser. Extends the widget block above; keeps
   the chamfered brass send button and ghost chips from the
   button system.
   =========================================================== */
.cb-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chatbot.no-anim{transition:none!important}
.cb-status{display:flex!important;align-items:center;gap:7px;text-transform:none!important;letter-spacing:.04em!important;font-size:.68rem!important;color:#aebbd0!important}
.cb-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#e3a84a;box-shadow:0 0 0 3px rgba(227,168,74,.18)}
.cb-status.is-open .cb-dot{background:var(--status-online);box-shadow:0 0 0 3px rgba(109,224,138,.22);animation:dispatch-pulse 2.2s ease-in-out infinite}
.cb-new{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:#e9eef5;
  background:rgba(10,20,36,.5);border:1px solid rgba(227,195,114,.4);border-radius:999px;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out)}
.cb-new:hover{border-color:var(--gold-lt)}
.cb-new:active,.cb-x:active{transform:scale(.94)}
.cb-new:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.cb-new.is-armed{width:auto;padding:0 12px;color:var(--ink);background:var(--gold-lt);border-color:var(--gold-lt)}
.cb-new.is-armed::after{content:"Clear chat?";font-family:'Archivo';font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}

/* messages */
.cb-m{animation:cb-in .22s var(--ease-out) both}
@keyframes cb-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cb-m p{margin:0}
.cb-m p+p,.cb-m p+ul,.cb-m ul+p{margin-top:7px}
.cb-m ul{margin:4px 0 0;padding-left:18px}
.cb-m li{margin:2px 0}
.cb-m li::marker{color:var(--gold-lt)}
.cb-m.bot a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cb-m.user{white-space:pre-wrap}
.cb-time{align-self:center;margin:6px 0 2px;font-family:'Archivo';font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7f8fa6}
.cb-act.is-primary{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.cb-act.is-primary:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.cb-chips[hidden]{display:none}

/* enquiry card */
.cb-card{align-self:stretch;padding:13px 14px 12px;border:1px solid rgba(227,195,114,.45);border-radius:14px;background:linear-gradient(180deg,rgba(199,154,62,.12),rgba(199,154,62,.04));animation:cb-in .26s var(--ease-out) both}
.cb-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.cb-card-head span{font-family:'Archivo';font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt)}
.cb-card-head b{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.8rem;letter-spacing:.06em;color:#fff}
.cb-card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:.86rem;line-height:1.45}
.cb-card dt{font-family:'Archivo';font-weight:600;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#93a3b8;padding-top:3px}
.cb-card dd{margin:0;color:#e9eef5;overflow-wrap:anywhere;white-space:pre-wrap}
.cb-card .cb-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}

/* composer: a textarea that grows with the message */
.cb-bar{align-items:flex-end}
.cb-bar textarea{
  flex:1;min-width:0;min-height:44px;max-height:120px;padding:11px 15px;resize:none;overflow-y:auto;
  font-family:'Barlow';font-size:.94rem;line-height:1.4;color:#f4f7fb;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:22px;
  transition:border-color .2s var(--ease-out);scrollbar-width:thin;
}
.cb-bar textarea::placeholder{color:#9ca9ba}
.cb-bar textarea:focus{outline:none;border-color:var(--gold-lt)}
.cb-bar textarea:focus-visible{box-shadow:0 0 0 2px rgba(227,195,114,.35)}
.cb-bar button:disabled{opacity:.55;cursor:default;transform:none}
.cb-foot{flex-shrink:0;margin:0;padding:0 14px 9px;background:rgba(4,10,18,.42);text-align:center;font-family:'Archivo';font-weight:600;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#7f8fa6}

/* teaser: one gentle nudge beside the launcher */
.cb-teaser{position:fixed;z-index:var(--z-chatbot-fab);left:calc(26px + 84px + 14px + env(safe-area-inset-left,0px));bottom:calc(24px + 16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-start;max-width:min(300px,calc(100vw - 150px));
  background:rgba(14,35,64,.94);border:1px solid rgba(227,195,114,.45);border-radius:14px 14px 14px 4px;
  box-shadow:0 18px 42px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(6px);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);pointer-events:none}
.cb-teaser[hidden]{display:none}
.cb-teaser.show{opacity:1;transform:none;pointer-events:auto}
.cb-teaser-body{flex:1;min-width:0;padding:12px 4px 12px 15px;background:none;border:0;cursor:pointer;text-align:left;color:#e9eef5;font-family:'Barlow';font-size:.92rem;line-height:1.4}
.cb-teaser-body:focus-visible,.cb-teaser-x:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;border-radius:10px}
.cb-teaser-x{width:36px;height:36px;flex-shrink:0;margin:4px 4px 0 0;background:none;border:0;cursor:pointer;color:#9fb0c6;font-size:1.15rem;line-height:1}
.cb-teaser-x:hover{color:#fff}
body.locked .cb-teaser,body.form-active .cb-teaser{opacity:0;pointer-events:none}
@media(max-width:860px){
  .cb-teaser{left:calc(16px + 72px + 10px + env(safe-area-inset-left,0px));bottom:calc(16px + 12px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 98px - 16px)}
}

/* touch: every control at least 44px */
@media(pointer:coarse){
  .cb-chip,.cb-act{min-height:44px}
  .cb-x,.cb-new{width:44px;height:44px}
  .cb-new.is-armed{width:auto}
  .cb-teaser-x{width:44px;height:44px;margin:0}
}
@media(prefers-reduced-motion:reduce){
  .cb-m,.cb-card{animation:none}
  .cb-status.is-open .cb-dot{animation:none}
  .cb-teaser{transition:opacity .18s linear;transform:none}
}
.cb-id .cb-status span{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* admin: enquiries from the website assistant */
.admin-enq{margin-bottom:40px}
.admin-enq-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.admin-enq-head h2{font-family:'Anton';text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff}
.admin-enq-head h2 span{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--mut);margin-left:8px;vertical-align:middle}
.admin-enq-count{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt)}
.admin-enq-list{display:flex;flex-direction:column;gap:10px}
.admin-enq-row{border:1px solid rgba(227,195,114,.16);border-radius:14px;background:rgba(255,255,255,.03);transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.admin-enq-row.is-new{border-color:rgba(227,195,114,.42);background:rgba(199,154,62,.06)}
.admin-enq-row[open]{background:rgba(255,255,255,.05)}
.admin-enq-row summary{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none;min-height:44px}
.admin-enq-row summary::-webkit-details-marker{display:none}
.admin-enq-row summary:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;border-radius:14px}
.admin-enq-ref{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.78rem;letter-spacing:.06em;color:var(--gold-lt);flex:none}
.admin-enq-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-enq-who b{color:#fff;font-family:'Archivo';font-size:.95rem}
.admin-enq-who span{color:var(--mut);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-enq-tags{display:flex;align-items:center;gap:8px;flex:none;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.admin-badge.is-new{color:var(--gold-lt);border-color:rgba(227,195,114,.4)}
.admin-badge.is-urgent{color:#f1a3a3;border-color:rgba(241,163,163,.4)}
.admin-enq-body{padding:0 16px 16px}
.admin-enq-body dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 14px;font-size:.92rem;line-height:1.5}
.admin-enq-body dt{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding-top:3px}
.admin-enq-body dd{margin:0;color:#e9eef5;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-enq-chat{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:rgba(4,10,18,.4);border:1px solid rgba(255,255,255,.08);max-height:280px;overflow-y:auto}
.admin-enq-chat-label{display:block;margin-bottom:8px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.admin-enq-chat p{margin:0 0 8px;font-size:.86rem;line-height:1.5;color:#cfd8e4;white-space:pre-wrap}
.admin-enq-chat p span{display:block;font-family:'Archivo';font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#8ea0b6}
.admin-enq-chat p.is-visitor span{color:var(--gold-lt)}
.admin-enq-body .admin-row-actions{flex-wrap:wrap}
@media(max-width:640px){
  .admin-enq-row summary{flex-wrap:wrap;gap:8px 12px}
  .admin-enq-who{flex-basis:100%;order:3}
  .admin-enq-tags{margin-left:auto}
  .admin-enq-body dl{grid-template-columns:1fr;gap:2px}
  .admin-enq-body dd{margin-bottom:6px}
}

/* ===========================================================
   MOBILE COMFORT — phones and touch screens.
   Every control at least 44px to the thumb, small labels no
   smaller than 12px, form fields at 16px so iOS doesn't zoom,
   phone-sized photos and video, the chat launcher in the
   thumb's corner, and closed panels out of the tab order.
   Desktop layouts are unchanged.
   =========================================================== */

/* clip sideways spill without making the page a scroll container */
@supports (overflow:clip){html,body{overflow-x:clip}}

/* a closed menu is invisible to taps, Tab and screen readers too */
.drawer{visibility:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
.drawer.open{visibility:visible;transition:transform .4s cubic-bezier(.16,1,.3,1)}

/* photos that ship in two sizes: phones get the 800px file, wider screens the 1600px one */
.rbg{background-image:var(--bg-lg)}
@media(max-width:860px){.rbg{background-image:var(--bg-sm)}}

/* the service pop-up's "Profile scope" label sat on the same line as its text */
.spec-proof{margin-top:4px}
.spec-proof b{display:block;margin-bottom:6px;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt)}

/* lightbox controls are real buttons now */
.lightbox button.ln,.lightbox button.lc{font-family:inherit;line-height:1;padding:0;margin:0;-webkit-appearance:none;appearance:none}
.lightbox img{touch-action:pan-y;user-select:none;-webkit-user-select:none}

/* readable dates on project cards (was #6f7d90, under 4.5:1 on navy) */
.blog-card-date{color:#8a98ad}

/* map on phones: a card that opens the Maps app, with the live map one tap away */
.map-facade{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:100%;min-height:170px;padding:18px;
  background:linear-gradient(160deg,rgba(15,44,82,.9),rgba(7,26,51,.95)),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 32px);
  background-blend-mode:normal}
.map-facade:before{content:"";position:absolute;top:18px;left:18px;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gold-lt);box-shadow:0 0 0 6px rgba(227,195,114,.16)}
.map-facade b{font-family:'Archivo';font-weight:700;font-size:.95rem;color:#fff}
.map-facade span{font-size:.88rem;color:var(--mut)}
.map-facade-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.map-facade-acts a,.map-facade-acts button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  font-family:'Archivo';font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.map-facade-acts a{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.map-facade-acts button{background:rgba(255,255,255,.06);color:#e9eef5;border:1px solid rgba(255,255,255,.28)}
.map-facade-acts a:focus-visible,.map-facade-acts button:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}

@media(max-width:860px),(pointer:coarse){
  /* --- touch targets --- */
  .sf-links{gap:0 4px}
  .sf-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  .sf-links a:after{display:none}
  .sf-actions a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .sf-top-btn{width:44px;height:44px}
  .sf-brand-mark{min-height:44px}
  .sf-bottom{gap:2px 14px}
  .sf-bottom a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px}
  .blog-filter{min-height:44px}
  .spec-more{min-height:44px}
  .about-link{min-height:44px}
  .blog-back{min-height:44px}
  .cm-d a{display:inline-flex;align-items:center;min-height:44px}
  .drawer .df a{display:flex;align-items:center;min-height:44px;padding:0}
  .ticket-field label{padding:4px 0}
  /* moving marquee words: a taller hit area, same look */
  .marquee-item{padding-top:14px;padding-bottom:14px;margin-top:-14px;margin-bottom:-14px}
}

@media(max-width:860px){
  /* --- small labels no smaller than 12px on a phone --- */
  .eyebrow,.copy .ey,.panel-hero .ey,.page-hero .ey,.about-copy .eyebrow{font-size:.75rem}
  .ticket-field label{font-size:.75rem}
  .cm-d b{font-size:.75rem}
  .about-stats span{font-size:.75rem}
  .stage-photo-tag{font-size:.75rem}
  .svc-tile-num,.spec-num{font-size:.75rem}
  .svc-tile-link{font-size:.78rem}
  .founder-copy .founder-note{font-size:.82rem}
  .verse span,.founder-portrait figcaption span{font-size:.75rem}
  .cc-status,.cm-side-foot,.cm-side-foot span,.ss-item span{font-size:.75rem}
  .blog-feature-kicker,.blog-card-tag,.blog-post-tag{font-size:.75rem}
  .blog-card-date{font-size:.75rem}
  .sf-hours{font-size:.8rem;gap:10px 18px}
  .sf-hours-tag{font-size:.75rem}
  .sf-bottom{font-size:.75rem}

  /* --- form fields at 16px: iOS zooms the page into anything smaller --- */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea,
  .ticket-field input,.ticket-field select,.ticket-field textarea,
  .cm-panel .ticket-field input,.cm-panel .ticket-field select,.cm-panel .ticket-field textarea,
  .contact-panel .ticket-field input,.contact-panel .ticket-field select,.contact-panel .ticket-field textarea,
  .cb-bar textarea,.al-field input,.pf-field input,.pf-field textarea,.pf-field select{font-size:16px}

  /* --- chat launcher in the thumb's corner, clear of left-aligned text and form labels --- */
  .chatbot-fab{left:auto;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:64px;height:64px}
  .chatbot-ring{width:52px;height:52px}
  .chatbot-ring img{width:40px;height:40px}
  .chatbot{transform-origin:bottom right}
  .cb-teaser{left:auto;right:calc(16px + 64px + 10px + env(safe-area-inset-right,0px));bottom:calc(16px + 8px + env(safe-area-inset-bottom,0px));border-radius:14px 14px 4px 14px;max-width:calc(100vw - 16px - 64px - 10px - 16px)}

  /* --- lightbox: controls kept clear of the photo and the screen edge --- */
  .lightbox{padding:16px}
  .lightbox img{max-width:100%;max-height:72vh;max-height:72svh}
  .lightbox .ln{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:none;width:52px;height:52px}
  .lightbox .lp{left:16px}.lightbox .lnx{right:16px}
  .lightbox .lc{top:calc(14px + env(safe-area-inset-top,0px));right:14px}
  .lb-caption{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.drawer{transition:visibility 0s linear .01s}.drawer.open{transition:none}}