/* Main header, shared. Hairline separates it from the page; once you scroll it stays on top with a solid backdrop.
   A single red line glides under the nav: to the item you hover, to the item you click, and on to the next page. */
html{overflow-x:clip;overflow-y:scroll}   /* 2026-10-20: every inner page always keeps its scrollbar (when the system shows one), so the header never shifts sideways between pages; the home page allows for it */
/* One header for every page. "body header.top" outranks the page-level header rules, so the size never changes between pages. */
body header.top{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;margin:0;min-height:0}
body header.top>a:first-child{display:block;flex:none;line-height:0}
body header.top>a:first-child{--lw:clamp(150px,15vw,210px)}
body header.top>a:first-child img{width:var(--lw);height:auto;vertical-align:top}
body header.top nav{position:relative;display:flex;gap:clamp(22px,2.4vw,38px);margin:0;font-size:clamp(13px,1.05vw,15px);font-weight:700;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
body header.top .cta{display:inline-flex;align-items:center;gap:10px;flex:none;margin:0;padding:14px 22px;border:0;border-radius:999px;
  background:linear-gradient(90deg,#C21F2E,#F2545B 30%,#C21F2E 50%,#F2545B 80%,#C21F2E) 0 0/200% 100%;animation:hdrflow 7s linear infinite;
  color:#fff;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
@keyframes hdrflow{from{background-position:0% 0}to{background-position:100% 0}}
@media (max-width:1180px){body header.top nav{display:none}}
@media (max-width:640px){body header.top .cta{padding:11px 14px;letter-spacing:.08em}body header.top>a:first-child{--lw:150px}}
header.top{position:sticky;top:0;z-index:50}
header.top::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;
  background:rgba(5,5,5,0);border-bottom:1px solid rgba(255,255,255,.1);transition:background .5s ease,border-color .5s ease}
header.top.stuck::before{background:rgba(5,5,5,.94);border-color:rgba(255,255,255,.14);box-shadow:0 12px 32px -12px rgba(0,0,0,.8)}

body header.top nav a,body header.top nav a[aria-current]{color:#fff;margin:0;font:inherit;letter-spacing:inherit;white-space:nowrap;text-decoration:none;padding:8px 0;border-bottom:0;opacity:1;transition:opacity .35s ease}
body header.top nav a:hover,body header.top nav a:focus-visible,body header.top nav a[aria-current],body header.top nav a.picked{opacity:1}
body header.top nav:has(a.picked) a[aria-current]:not(.picked){opacity:1}
header.top nav a:focus-visible{outline:none}
.nav-ind{position:absolute;left:0;bottom:0;height:1.5px;width:0;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#B01B2C,#F2545B 60%,#C21F2E);view-transition-name:nav-ind;
  transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1),opacity .3s ease}
::view-transition-group(nav-ind){animation-duration:.55s;animation-timing-function:cubic-bezier(.65,0,.25,1)}

body header.top .cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px -10px rgba(226,50,62,.7)}
body header.top .cta:active{transform:scale(.96);transition-duration:.12s}

@media (prefers-reduced-motion:reduce){.nav-ind,header.top .cta,header.top::before{transition:none}}

/* ---------- hover study (?nh=): how the item under the cursor shows itself. 0 = now (text brightens, the red line follows)
   1 = glass pill glides behind the text · 2 = the text fills with the brand gradient, the rest steps back · 3 = a thin lit outline glides ---------- */
.nav-pill{position:absolute;left:0;top:0;height:0;width:0;border-radius:999px;pointer-events:none;opacity:0;z-index:-1;
  transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1),opacity .35s ease}
html:not([data-nh="1"]):not([data-nh="3"]):not([data-nh="4"]) .nav-pill{display:none}
/* 1 · glass pill (Liquid + Gloss) */
html[data-nh="1"] .nav-pill{
  background:radial-gradient(120% 70% at 30% -20%,rgba(255,255,255,.26),rgba(255,255,255,.05) 50%,transparent 51%),linear-gradient(180deg,rgba(30,12,15,.35),rgba(163,21,42,.42));
  -webkit-backdrop-filter:blur(6px) saturate(1.8);backdrop-filter:blur(6px) saturate(1.8);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(255,255,255,.18),inset 0 -8px 14px -8px rgba(242,84,91,.6),0 8px 22px -10px rgba(0,0,0,.9),0 0 18px -6px rgba(226,50,62,.55)}
html[data-nh="1"] body header.top nav a:hover,html[data-nh="1"] body header.top nav a:focus-visible{opacity:1}
/* 2 · brand gradient text, the rest steps back */
html[data-nh="2"] body header.top nav a:hover,html[data-nh="2"] body header.top nav a:focus-visible,html[data-nh="4"] body header.top nav a:hover,html[data-nh="4"] body header.top nav a:focus-visible{opacity:1;
  background:linear-gradient(90deg,#C21F2E,#F2545B 30%,#C21F2E 50%,#F2545B 80%,#C21F2E) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hdrflow 7s linear infinite}
html[data-nh="2"] .nav-ind{background:linear-gradient(90deg,#F2545B,#C21F2E)}
/* 3 · thin lit outline · 4 = 2 + 3: gradient text inside the lit outline */
html[data-nh="3"] .nav-pill,html[data-nh="4"] .nav-pill{background:transparent;padding:1px;
  box-shadow:0 0 16px -6px rgba(242,84,91,.6)}
html[data-nh="3"] .nav-pill::before,html[data-nh="4"] .nav-pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.12) 40%,rgba(242,84,91,.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nh-sw{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:4px;padding:5px;border-radius:999px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.nh-sw b{padding:7px 8px 7px 10px;font:700 11px Inter,system-ui,sans-serif;color:#5F6878}
.nh-sw button{all:unset;cursor:pointer;padding:7px 11px;border-radius:999px;font:600 11px Inter,system-ui,sans-serif;color:#5F6878}
.nh-sw button.on{background:#0B1220;color:#fff}
@media (prefers-reduced-motion:reduce){.nav-pill{transition:none}}

/* 2026-10-07: no red line under the nav; the current page reads by brightness, the hover by the pill */
.nav-ind{display:none!important}

/* tactile feel without haptics: the outline flies over and settles with a small spring, and a click presses the item in */
html[data-nh] .nav-pill{transition:transform .55s cubic-bezier(.34,1.22,.55,1),width .55s cubic-bezier(.34,1.22,.55,1),opacity .3s ease}
body header.top nav a{display:inline-block;transition:opacity .35s ease,transform .18s ease}
body header.top nav a:active{transform:scale(.96)}
.nav-pill.press{transform-origin:center}
@media (prefers-reduced-motion:reduce){html[data-nh] .nav-pill{transition:opacity .2s ease}body header.top nav a:active{transform:none}}

/* ---------- header design study (?hd=, switch bottom-left). Same content everywhere: logo, nav, Contact us.
   1 now: full-width bar turns solid on scroll · 2 floating glass capsule · 3 islands: logo, nav and button each in its own glass
   4 glass bar that slims down on scroll · 5 as 4, and it slides away while you read, back as soon as you scroll up ---------- */
.hdr-bg{position:absolute;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease,inset .5s cubic-bezier(.65,0,.25,1),border-radius .5s ease}
html:not([data-hd="1"]) header.top::before{display:none}
html[data-hd="1"] .hdr-bg{display:none}
/* shared Liquid + Gloss surface for the header */
html[data-hd] .hdr-bg,html[data-hd="3"] header.top nav,html[data-hd="3"] header.top>a:first-child{
  --hb:radial-gradient(120% 70% at 30% -40%,rgba(255,255,255,.16),rgba(255,255,255,.03) 50%,transparent 51%),linear-gradient(180deg,rgba(12,6,8,.62),rgba(20,6,10,.72) 70%,rgba(94,10,26,.55))}
html[data-hd="2"] .hdr-bg,html[data-hd="4"] .hdr-bg,html[data-hd="5"] .hdr-bg{background:var(--hb);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
header.top.stuck .hdr-bg{opacity:1}
header.top{transition:padding .5s cubic-bezier(.65,0,.25,1),transform .5s cubic-bezier(.65,0,.25,1)}
html:not([data-hd="1"]) body header.top>a:first-child img{transition:width .5s cubic-bezier(.65,0,.25,1)}

/* 2 · floating capsule: once you scroll, the header gathers into one glass pill that floats below the top edge */
html[data-hd="2"] .hdr-bg{inset:0 -40px;border-radius:999px}
html[data-hd="2"] header.top.stuck{padding:24px 0}
html[data-hd="2"] header.top.stuck .hdr-bg{inset:12px -28px;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.35),inset -1px -1px 0 rgba(255,255,255,.12),inset 0 -10px 18px -10px rgba(242,84,91,.45),0 18px 40px -18px rgba(0,0,0,1)}
html[data-hd="2"] header.top.stuck>a:first-child img{width:clamp(140px,12vw,168px)}

/* 3 · islands: no bar at all; logo, nav and button float as three separate pieces of glass */
html[data-hd="3"] .hdr-bg{display:none}
html[data-hd="3"] header.top nav,html[data-hd="3"] header.top>a:first-child{border-radius:999px;transition:background .5s ease,box-shadow .5s ease,padding .5s ease}
html[data-hd="3"] header.top.stuck nav,html[data-hd="3"] header.top.stuck>a:first-child{background:var(--hb);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -1px -1px 0 rgba(255,255,255,.1),0 14px 30px -16px rgba(0,0,0,1)}
html[data-hd="3"] header.top.stuck nav{padding:6px 22px}
html[data-hd="3"] header.top.stuck>a:first-child{padding:13px 20px}
html[data-hd="3"] header.top.stuck>a:first-child img{width:clamp(130px,11vw,156px)}
html[data-hd="3"] header.top.stuck{padding:16px 0}

/* 4 and 5 · full-width glass bar, slimmer once you scroll, a brand-red hairline along the bottom */
html[data-hd="4"] .hdr-bg,html[data-hd="5"] .hdr-bg{top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw}
html[data-hd="4"] .hdr-bg::after,html[data-hd="5"] .hdr-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,84,91,.7) 30%,rgba(255,255,255,.25) 60%,transparent)}
html[data-hd="4"] header.top.stuck,html[data-hd="5"] header.top.stuck{padding:14px 0}
html[data-hd="4"] header.top.stuck>a:first-child img,html[data-hd="5"] header.top.stuck>a:first-child img{width:clamp(140px,11vw,160px)}
html[data-hd="5"] header.top.away{transform:translateY(-110%)}

.hd-sw{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;gap:4px;padding:5px;border-radius:999px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:calc(100vw - 32px);overflow-x:auto}
.hd-sw b{padding:7px 8px 7px 10px;font:700 11px Inter,system-ui,sans-serif;color:#5F6878;white-space:nowrap}
.hd-sw button{all:unset;cursor:pointer;padding:7px 11px;border-radius:999px;font:600 11px Inter,system-ui,sans-serif;color:#5F6878;white-space:nowrap}
.hd-sw button.on{background:#0B1220;color:#fff}
@media (prefers-reduced-motion:reduce){header.top,.hdr-bg,body header.top>a:first-child img{transition:none}html[data-hd="5"] header.top.away{transform:none}}

/* 2026-10-13 (Nik): the header button gets the same hover as "Send message" on Contact: no lift, no glow around it;
   a light sweeps across inside it, it brightens a touch and the arrow runs ahead. Menu text a little smaller. */
body header.top nav{font-size:clamp(12px,.94vw,13.5px)}
body header.top .cta{position:relative;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transition:filter .4s ease,transform .4s ease}
body header.top .cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)}
body header.top .cta .ar{display:inline-block;font-style:normal;transition:transform .4s cubic-bezier(.22,.8,.24,1)}
body header.top .cta:hover,body header.top .cta:focus-visible{transform:none;box-shadow:none;filter:brightness(1.12)}
body header.top .cta:hover::after,body header.top .cta:focus-visible::after{transform:translateX(120%);transition:transform .8s ease}
body header.top .cta:hover .ar,body header.top .cta:focus-visible .ar{transform:translateX(4px)}
body header.top .cta:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){body header.top .cta,body header.top .cta .ar,body header.top .cta::after{transition:none}}

/* brand descriptor under the header logo (placed by nav.js), matches the home page lockup */
body header.top>a:first-child{position:relative}
/* static in the markup, sized from the logo width (--lw): logo viewBox 661 wide, wordmark 644 units; 163.86px = the text at 9px with no tracking */
.hdesc-i{position:absolute;left:calc(var(--lw) * 8.5 / 661);top:calc(var(--lw) * 115.4 / 661 - 1.2px);letter-spacing:calc((var(--lw) * 644 / 661 - 163.86px) / 26);font:600 9px/1 Montserrat,system-ui,sans-serif;text-transform:uppercase;white-space:nowrap;color:#A3A9B4;pointer-events:none}
@media (max-width:640px){.hdesc-i{display:none}}
.hdesc-i.wait{opacity:0}