/* ==========================================================================
   BEE Strategy Amsterdam
   site.css - base, layout, components, animation
   Palette: deep navy -> deep green, white counterweight, terracotta from logo
   Design rule: square corners. No rounded shapes except the logo mark itself.
   ========================================================================== */

/* --- 0. Fonts ----------------------------------------------------------
   Self-hosted. Previously loaded from fonts.googleapis.com, which sent every
   visitor's IP address to Google before any consent was given. These files are
   served from our own origin, so no third party sees the visitor at all.
   Both families are variable fonts: one file covers weights 100-900.
   ---------------------------------------------------------------------- */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../assets/fonts/inter-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:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../assets/fonts/inter-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:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../assets/fonts/inter-tight-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:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../assets/fonts/inter-tight-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;
}

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* dark scale */
  --ink:      #04141A;
  --ink-2:    #06212B;
  --navy:     #082D3A;
  --navy-2:   #0A3A45;
  --pine:     #0C4A42;
  --pine-2:   #0F5B4C;

  /* light scale */
  --white:    #FFFFFF;
  --paper:    #F4F7F6;
  --paper-2:  #E8EDEB;
  --ash:      #D4DCDA;

  /* accent */
  --green:      #17B889;
  --green-hi:   #2FE3AC;
  --green-dim:  #0E7A5B;
  --clay:       #D37442;   /* sampled from the logo */

  /* text */
  --t-on-dark:      #FFFFFF;
  --t-on-dark-soft: rgba(255,255,255,.68);
  --t-on-dark-mute: rgba(255,255,255,.46);
  --t-on-light:      #06212B;
  --t-on-light-soft: #4A5F66;

  /* lines */
  --line-dark:  rgba(255,255,255,.14);
  --line-dark-2:rgba(255,255,255,.07);
  --line-light: #DCE3E1;

  /* metrics */
  --shell: 1320px;
  --gut: 28px;
  --head-h: 76px;
  --bar-h: 38px;

  /* motion */
  --e: cubic-bezier(.22,.61,.36,1);
  --e-out: cubic-bezier(.16,1,.3,1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--t-on-light);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  font-feature-settings:'ss01','cv05';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--green); color:#04141A; }

/* --- 3. Type ------------------------------------------------------------ */
h1,h2,h3,h4,.display{
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.04;
}
.d1{ font-size:clamp(2.9rem,7.2vw,5.6rem); }
.d2{ font-size:clamp(2.1rem,4.4vw,3.5rem); }
p.d1,p.d2,p.d3{ font-family:'Inter Tight','Inter',system-ui,sans-serif; font-weight:600; letter-spacing:-.028em; line-height:1.06; }
.d3{ font-size:clamp(1.5rem,2.4vw,2.05rem); letter-spacing:-.02em; line-height:1.14; }
.d4{ font-size:clamp(1.12rem,1.5vw,1.3rem); letter-spacing:-.012em; line-height:1.25; }

.eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:.5; flex:none; }
.eyebrow.no-rule::before{ display:none; }
.lead{ font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.62; }
.small{ font-size:.86rem; line-height:1.6; }
.tiny{ font-size:.76rem; letter-spacing:.02em; }
.num{ font-variant-numeric:tabular-nums; }

.on-dark{ color:var(--t-on-dark); }
.on-dark p, .on-dark .lead{ color:var(--t-on-dark-soft); }
.soft{ color:var(--t-on-light-soft); }
.soft-d{ color:var(--t-on-dark-soft); }
.mute-d{ color:var(--t-on-dark-mute); }
.gr{ color:var(--green); }
.gr-hi{ color:var(--green-hi); }
.clay{ color:var(--clay); }

/* --- 4. Layout ---------------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.shell-wide{ width:100%; max-width:1680px; margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }
.pad{ padding-block:clamp(72px,9vw,132px); }
.pad-sm{ padding-block:clamp(52px,6vw,84px); }
.pad-lg{ padding-block:clamp(90px,12vw,168px); }

.bg-white{ background:var(--white); }
.bg-paper{ background:var(--paper); }
.bg-ink{ background:var(--ink); color:var(--t-on-dark); }
.bg-navy{ background:var(--navy); color:var(--t-on-dark); }
.bg-grad{
  background:linear-gradient(142deg,var(--ink) 0%,var(--navy) 46%,var(--pine) 100%);
  color:var(--t-on-dark);
}
.bg-grad-rev{
  background:linear-gradient(142deg,var(--pine) 0%,var(--navy) 54%,var(--ink) 100%);
  color:var(--t-on-dark);
}

.rule{ height:1px; background:var(--line-light); border:0; }
.rule-d{ height:1px; background:var(--line-dark); border:0; }

.grid{ display:grid; gap:clamp(20px,2.4vw,32px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,88px); align-items:center; }
.split-58{ grid-template-columns:1.25fr 1fr; }
.split-85{ grid-template-columns:1fr 1.25fr; }
.stack-sm > * + *{ margin-top:14px; }
.stack   > * + *{ margin-top:22px; }
.stack-lg> * + *{ margin-top:34px; }
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.sec-head{ max-width:760px; }
.sec-head .d2{ margin-top:20px; }
.sec-head .lead{ margin-top:20px; max-width:62ch; }

/* --- 5. Buttons --------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:15px 26px; border-radius:0; border:1px solid transparent;
  font-size:.86rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .32s var(--e), border-color .32s var(--e), background-color .32s var(--e), transform .2s var(--e);
  white-space:nowrap;
}
.btn .lbl{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:11px; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  transform:translateY(101%); transition:transform .42s var(--e-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }
.btn .ar{ transition:transform .32s var(--e); }
.btn:hover .ar{ transform:translateX(5px); }

/* primary - green fill, darkens to white on hover */
.btn-1{ background:var(--green); color:#03181A; }
.btn-1::before{ background:var(--white); }
.btn-1:hover{ color:#03181A; }

/* solid dark */
.btn-2{ background:var(--ink); color:#fff; }
.btn-2::before{ background:var(--green); }
.btn-2:hover{ color:#03181A; }

/* outline on dark */
.btn-3{ border-color:var(--line-dark); color:#fff; }
.btn-3::before{ background:#fff; }
.btn-3:hover{ color:var(--ink); border-color:#fff; }

/* outline on light */
.btn-4{ border-color:var(--t-on-light); color:var(--t-on-light); }
.btn-4::before{ background:var(--ink); }
.btn-4:hover{ color:#fff; border-color:var(--ink); }

/* ghost / white */
.btn-5{ background:#fff; color:var(--ink); }
.btn-5::before{ background:var(--green); }
.btn-5:hover{ color:#03181A; }

.btn-sm{ padding:11px 18px; font-size:.74rem; }
.btn-lg{ padding:19px 34px; font-size:.92rem; }
.btn-block{ width:100%; }

/* text link with animated rule */
.tlink{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  font-weight:600; font-size:.86rem; letter-spacing:.05em; text-transform:uppercase;
  padding-bottom:5px;
}
.tlink::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform-origin:right; transform:scaleX(1);
  transition:transform .38s var(--e-out);
}
.tlink:hover::after{ transform-origin:left; animation:swipe .58s var(--e-out); }
@keyframes swipe{ 0%{transform:scaleX(1);transform-origin:right} 49%{transform:scaleX(0);transform-origin:right} 50%{transform:scaleX(0);transform-origin:left} 100%{transform:scaleX(1);transform-origin:left} }
.tlink .ar{ transition:transform .3s var(--e); }
.tlink:hover .ar{ transform:translateX(5px); }

/* pill / chip */
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid var(--line-light); background:transparent;
  font-size:.78rem; font-weight:500; letter-spacing:.04em;
  transition:background-color .26s var(--e), color .26s var(--e), border-color .26s var(--e);
}
.chip:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.is-on{ background:var(--green); border-color:var(--green); color:#03181A; }
.chip-d{ border-color:var(--line-dark); color:var(--t-on-dark-soft); }
.chip-d:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.chip-d.is-on{ background:var(--green); border-color:var(--green); color:#03181A; }

.tag{
  display:inline-block; padding:5px 11px; border:1px solid var(--line-dark);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
}
.tag-l{ border-color:var(--line-light); }

/* icon button */
.ibtn{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line-dark); color:#fff;
  transition:background-color .28s var(--e), color .28s var(--e), border-color .28s var(--e);
}
.ibtn:hover{ background:var(--green); border-color:var(--green); color:#03181A; }
.ibtn-l{ border-color:var(--line-light); color:var(--ink); }
.ibtn-l:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* --- 6. Top bar --------------------------------------------------------- */
.topbar{
  height:var(--bar-h); background:var(--ink); color:var(--t-on-dark-soft);
  display:flex; align-items:center; font-size:.76rem; letter-spacing:.04em;
  border-bottom:1px solid var(--line-dark-2); position:relative; z-index:60;
}
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar a{ transition:color .24s var(--e); }
.topbar a:hover{ color:var(--green-hi); }
.tb-left{ display:flex; align-items:center; gap:10px; }
.pulse{
  width:7px; height:7px; background:var(--green); flex:none;
  box-shadow:0 0 0 0 rgba(23,184,137,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(23,184,137,0);} 100%{ box-shadow:0 0 0 0 rgba(23,184,137,0);} }
.tb-right{ display:flex; align-items:center; gap:22px; }

/* --- 7. Header ---------------------------------------------------------- */
.head{
  position:sticky; top:0; z-index:50; height:var(--head-h);
  background:var(--ink);
  border-bottom:1px solid var(--line-dark-2);
  transition:height .3s var(--e), background-color .3s var(--e), border-color .3s var(--e);
}
.head .shell{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.head.is-stuck{ height:64px; background:rgba(4,20,26,.93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--line-dark); }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img.mk{ width:30px; height:auto; transition:transform .5s var(--e-out); }
.brand:hover img.mk{ transform:rotate(-14deg) scale(1.08); }
.brand img.wm{ height:26px; width:auto; transition:height .3s var(--e); }
.head.is-stuck .brand img.wm{ height:22px; }
.head.is-stuck .brand img.mk{ width:26px; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:9px 15px; font-size:.82rem; font-weight:500; letter-spacing:.03em;
  color:var(--t-on-dark-soft); transition:color .26s var(--e);
}
.nav a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:2px; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:right;
  transition:transform .34s var(--e-out);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a.is-here{ color:#fff; }
.nav a.is-here::after{ transform:scaleX(1); }
.head-cta{ display:flex; align-items:center; gap:10px; flex:none; }

.burger{ display:none; width:44px; height:44px; place-items:center; border:1px solid var(--line-dark); }
.burger span{ display:block; width:19px; height:1.5px; background:#fff; transition:transform .3s var(--e), opacity .2s; }
.burger span + span{ margin-top:5px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:45; background:var(--ink);
  padding:calc(var(--head-h) + var(--bar-h) + 30px) var(--gut) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); transition:clip-path .5s var(--e-out); pointer-events:none;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.drawer nav a{
  display:block; padding:15px 0; border-bottom:1px solid var(--line-dark-2);
  font-family:'Inter Tight',sans-serif; font-size:1.6rem; font-weight:600; letter-spacing:-.02em;
  color:#fff; opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--e), transform .4s var(--e), color .25s;
}
body.menu-open .drawer nav a{ opacity:1; transform:none; }
.drawer nav a:hover{ color:var(--green-hi); }
.drawer nav a:nth-child(1){ transition-delay:.10s } .drawer nav a:nth-child(2){ transition-delay:.15s }
.drawer nav a:nth-child(3){ transition-delay:.20s } .drawer nav a:nth-child(4){ transition-delay:.25s }
.drawer nav a:nth-child(5){ transition-delay:.30s }
.drawer-foot{ display:flex; flex-direction:column; gap:12px; }

/* --- 8. Hero ------------------------------------------------------------ */
.hero{
  position:relative; min-height:clamp(600px,92vh,940px); display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink); color:#fff;
}
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); animation:kb 26s var(--e) infinite alternate;
}
@keyframes kb{ from{ transform:scale(1.14) translate3d(0,0,0);} to{ transform:scale(1.0) translate3d(-1.5%,-1.5%,0);} }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(4,20,26,.97) 0%, rgba(6,33,43,.80) 34%, rgba(8,45,58,.44) 66%, rgba(12,74,66,.34) 100%),
    linear-gradient(105deg, rgba(4,20,26,.86) 0%, rgba(4,20,26,.12) 62%);
}
.hero-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(var(--line-dark-2) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-dark-2) 1px, transparent 1px);
  background-size:100% 25%, 25% 100%;
  opacity:.6;
}
.hero-body{ position:relative; z-index:2; width:100%; padding-block:clamp(56px,8vw,88px); }
.hero h1{ max-width:16ch; margin-top:26px; }
.hero .lead{ max-width:56ch; margin-top:26px; color:rgba(255,255,255,.8); }
.hero-acts{ margin-top:38px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-strip{
  margin-top:46px; padding-top:26px; border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.hero-strip .k{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--green-hi); }
.hero-strip .v{ margin-top:7px; font-size:.94rem; color:rgba(255,255,255,.9); line-height:1.4; }

.scrollcue{
  position:absolute; right:var(--gut); bottom:34px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--t-on-dark-mute);
  writing-mode:vertical-rl;
}
.scrollcue i{ display:block; width:1px; height:56px; background:var(--line-dark); position:relative; overflow:hidden; }
.scrollcue i::after{ content:''; position:absolute; left:0; top:0; width:1px; height:20px; background:var(--green); animation:cue 2.1s var(--e) infinite; }
@keyframes cue{ 0%{ transform:translateY(-22px);} 100%{ transform:translateY(58px);} }

/* page hero (inner pages) */
.phero{ position:relative; overflow:hidden; background:var(--ink); color:#fff; padding-block:clamp(84px,11vw,150px); }
.phero-media{ position:absolute; inset:0; z-index:0; }
.phero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:kb 30s var(--e) infinite alternate; }
.phero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(4,20,26,.95) 0%, rgba(8,45,58,.86) 52%, rgba(12,74,66,.7) 100%);
}
.phero .shell{ position:relative; z-index:2; }
.phero h1{ max-width:18ch; margin-top:22px; }
.phero .lead{ max-width:60ch; margin-top:22px; color:rgba(255,255,255,.78); }
.crumb{ display:flex; align-items:center; gap:10px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t-on-dark-mute); }
.crumb a:hover{ color:var(--green-hi); }

/* --- 9. Marquee --------------------------------------------------------- */
.marq{
  background:var(--green); color:#03181A; overflow:hidden; padding-block:15px;
  border-block:1px solid rgba(0,0,0,.14);
}
.marq-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marq:hover .marq-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marq-track span{
  display:inline-flex; align-items:center; gap:22px; padding-inline:22px;
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.marq-track span::after{ content:''; width:5px; height:5px; background:#03181A; flex:none; }
.marq-dark{ background:var(--ink); color:#fff; border-block-color:var(--line-dark); }
.marq-dark .marq-track span::after{ background:var(--green); }

/* --- 10. Media blocks --------------------------------------------------- */
.fig{ position:relative; overflow:hidden; background:var(--navy); }
.fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-out), filter .6s var(--e); }
.fig:hover img{ transform:scale(1.06); }
.fig-r{ aspect-ratio:4/5; }
.fig-s{ aspect-ratio:1/1; }
.fig-w{ aspect-ratio:16/10; }
.fig-l{ aspect-ratio:3/2; }
.fig-b{ aspect-ratio:21/9; }
.fig-cap{
  position:absolute; left:0; bottom:0; right:0; padding:20px 22px; z-index:2;
  background:linear-gradient(to top, rgba(4,20,26,.92), rgba(4,20,26,0));
  color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.fig-tint::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(4,20,26,.42), rgba(12,74,66,.34));
  mix-blend-mode:multiply; transition:opacity .5s var(--e);
}
.fig-tint:hover::after{ opacity:.45; }

/* offset image pair */
.duo{ position:relative; }
.duo .a{ width:82%; }
.duo .b{ position:absolute; right:0; bottom:-14%; width:46%; border:8px solid var(--white); }
.bg-paper .duo .b{ border-color:var(--paper); }
.duo .badge{
  position:absolute; left:0; top:0; background:var(--green); color:#03181A;
  padding:16px 20px; z-index:3; max-width:180px;
}
.duo .badge .d4{ line-height:1.15; }

/* parallax band */
.band{ position:relative; overflow:hidden; color:#fff; min-height:clamp(420px,58vw,620px); display:flex; align-items:center; }
.band-media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.band-media img{ width:100%; height:100%; object-fit:cover; }
.band-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(112deg, rgba(4,20,26,.96) 0%, rgba(6,33,43,.90) 42%, rgba(12,74,66,.80) 100%);
}
.band .shell{ position:relative; z-index:2; padding-block:clamp(60px,8vw,90px); }

/* --- 11. Cards ---------------------------------------------------------- */
.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-dark);
  transition:border-color .4s var(--e), transform .4s var(--e-out), background-color .4s var(--e);
}
.card:hover{ border-color:var(--green); transform:translateY(-5px); }
.card .fig{ aspect-ratio:16/11; }
.card:hover .fig img{ transform:scale(1.07); }
.card-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; gap:14px; }
.card-idx{
  position:absolute; right:0; top:0; z-index:3; padding:9px 13px;
  background:var(--green); color:#03181A; font-size:.72rem; font-weight:700; letter-spacing:.1em;
}
.card h3{ font-size:1.28rem; }
.card p{ color:var(--t-on-dark-soft); font-size:.93rem; flex:1; }
.card .tlink{ color:var(--green-hi); align-self:flex-start; }

.card-l{ background:var(--white); border-color:var(--line-light); }
.card-l:hover{ border-color:var(--ink); }
.card-l p{ color:var(--t-on-light-soft); }
.card-l .tlink{ color:var(--ink); }

/* numbered feature list */
.feat{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding-block:26px; border-top:1px solid var(--line-dark);
}
.feat:last-child{ border-bottom:1px solid var(--line-dark); }
.grid > .feat:last-child,.grid > .feat{ border-bottom:0; }
.feat-l{ border-color:var(--line-light); }
.feat-l:last-child{ border-bottom-color:var(--line-light); }
.grid > .feat-l{ border-bottom:0; }
.feat .n{
  font-family:'Inter Tight',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.1em;
  color:var(--green); padding-top:5px; min-width:30px;
}
.feat h4{ font-size:1.1rem; }
.feat p{ margin-top:9px; font-size:.93rem; }

/* --- 12. Tabs (process) ------------------------------------------------- */
.tabs{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(28px,4vw,64px); align-items:start; }
.tab-btns{ display:flex; flex-direction:column; }
.tab-btn{
  position:relative; text-align:left; padding:24px 24px 24px 26px;
  border-top:1px solid var(--line-dark); display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  transition:background-color .34s var(--e), padding-left .34s var(--e);
}
.tab-btn:last-child{ border-bottom:1px solid var(--line-dark); }
.tab-btn::before{
  content:''; position:absolute; left:0; top:-1px; bottom:-1px; width:2px; background:var(--green);
  transform:scaleY(0); transform-origin:top; transition:transform .4s var(--e-out);
}
.tab-btn:hover{ background:rgba(255,255,255,.03); }
.tab-btn.is-on{ background:rgba(23,184,137,.07); padding-left:32px; }
.tab-btn.is-on::before{ transform:scaleY(1); }
.tab-btn .st{ font-size:.7rem; font-weight:700; letter-spacing:.14em; color:var(--green); }
.tab-btn .tt{ font-family:'Inter Tight',sans-serif; font-size:1.16rem; font-weight:600; letter-spacing:-.015em; color:#fff; }
.tab-btn .ar{ opacity:0; transform:translateX(-8px); transition:opacity .3s var(--e), transform .3s var(--e); color:var(--green); }
.tab-btn.is-on .ar{ opacity:1; transform:none; }

.tab-aside{ margin-top:34px; padding:26px; border:1px solid var(--line-dark); background:rgba(255,255,255,.025); }
.tab-aside p{ color:var(--t-on-dark-soft); font-size:.92rem; }
.tab-aside .row{ margin-top:20px; }

.tab-panes{ position:relative; }
.tab-pane{ display:none; }
.tab-pane.is-on{ display:block; animation:paneIn .55s var(--e-out) both; }
@keyframes paneIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
.tab-pane .fig{ aspect-ratio:16/10; }
.tab-pane .pane-body{ padding-top:26px; }
.tab-pane ul{ margin-top:20px; display:grid; gap:11px; }
.tab-pane li{ display:grid; grid-template-columns:auto 1fr; gap:13px; font-size:.93rem; color:var(--t-on-dark-soft); }
.tab-pane li::before{ content:''; width:13px; height:1px; background:var(--green); margin-top:12px; }

/* --- 13. Accordion ------------------------------------------------------ */
.acc-item{ border-top:1px solid var(--line-light); }
.acc-item:last-child{ border-bottom:1px solid var(--line-light); }
.acc-head{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:24px 0; text-align:left; transition:color .26s var(--e);
}
.acc-head:hover{ color:var(--green-dim); }
.acc-head .n{ font-size:.76rem; font-weight:700; letter-spacing:.12em; color:var(--green-dim); }
.acc-head .t{ font-family:'Inter Tight',sans-serif; font-size:1.14rem; font-weight:600; letter-spacing:-.015em; }
.acc-sign{ position:relative; width:15px; height:15px; flex:none; }
.acc-sign::before,.acc-sign::after{ content:''; position:absolute; background:currentColor; transition:transform .36s var(--e-out), opacity .3s; }
.acc-sign::before{ left:0; top:7px; width:15px; height:1.5px; }
.acc-sign::after{ left:7px; top:0; width:1.5px; height:15px; }
.acc-item.is-on .acc-sign::after{ transform:rotate(90deg); opacity:0; }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .46s var(--e-out); }
.acc-item.is-on .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc-body p{ padding-bottom:26px; max-width:70ch; color:var(--t-on-light-soft); }
.acc-d .acc-item{ border-color:var(--line-dark); }
.acc-d .acc-head:hover{ color:var(--green-hi); }
.acc-d .acc-head .n{ color:var(--green); }
.acc-d .acc-body p{ color:var(--t-on-dark-soft); }

/* --- 14. Sector grid ---------------------------------------------------- */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.tile{ position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--navy); }
.tile img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1s var(--e-out), opacity .5s; opacity:.5; }
.tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(4,20,26,.7), rgba(12,74,66,.6)); transition:opacity .5s var(--e); }
.tile:hover img{ transform:scale(1.1); opacity:.85; }
.tile:hover::after{ opacity:.25; }
.tile-t{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px;
  font-family:'Inter Tight',sans-serif; font-size:1rem; font-weight:600; letter-spacing:-.01em; color:#fff;
  transform:translateY(0); transition:transform .4s var(--e-out);
}
.tile:hover .tile-t{ transform:translateY(-4px); }
.tile-wide{ grid-column:span 2; aspect-ratio:2/1; }

.sector-list{ display:flex; flex-wrap:wrap; gap:8px; }

/* --- 15. Contact dock --------------------------------------------------- */
.dock{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:10px;
}
.dock-items{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.dock-item{
  display:flex; align-items:center; gap:11px; padding:12px 16px;
  background:var(--ink); color:#fff; border:1px solid var(--line-dark);
  font-size:.8rem; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none;
  transition:opacity .32s var(--e), transform .32s var(--e-out), background-color .26s, color .26s, border-color .26s;
}
.dock.is-open .dock-item{ opacity:1; transform:none; pointer-events:auto; }
.dock.is-open .dock-item:nth-child(1){ transition-delay:.10s }
.dock.is-open .dock-item:nth-child(2){ transition-delay:.06s }
.dock.is-open .dock-item:nth-child(3){ transition-delay:.02s }
.dock-item:hover{ background:var(--green); color:#03181A; border-color:var(--green); }
.dock-toggle{
  width:56px; height:56px; display:grid; place-items:center; flex:none;
  background:var(--green); color:#03181A; border:1px solid var(--green);
  box-shadow:0 10px 30px rgba(4,20,26,.28);
  transition:background-color .3s var(--e), transform .3s var(--e-out), color .3s;
}
.dock-toggle:hover{ transform:scale(1.06); }
.dock.is-open .dock-toggle{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dock-toggle svg{ transition:transform .4s var(--e-out); }
.dock.is-open .dock-toggle svg{ transform:rotate(135deg); }

/* --- 16. Forms ---------------------------------------------------------- */
.form{ display:grid; gap:18px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t-on-light-soft); margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; background:var(--white);
  border:1px solid var(--line-light); border-radius:0; font-size:.95rem;
  transition:border-color .26s var(--e), box-shadow .26s var(--e);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:inset 0 -2px 0 0 var(--green);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5F66' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.form-note{ font-size:.78rem; color:var(--t-on-light-soft); }
.form-msg{ padding:16px 18px; border:1px solid var(--green); background:rgba(23,184,137,.08); font-size:.9rem; display:none; }
.form-msg.is-on{ display:block; animation:paneIn .4s var(--e-out) both; }
.form-msg.is-err{ border-color:#C0563E; background:rgba(192,86,62,.08); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Keyboard focus on form controls.
   The rule above deliberately drops the outline for the mouse, but it also beat
   the global :focus-visible ring on specificity, leaving keyboard users with a
   weaker cue than everywhere else on the site. This puts the ring back for
   keyboard focus only. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--green-hi); outline-offset:3px;
}

/* Consent checkbox */
.field-check{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.field-check input[type=checkbox]{
  width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--green);
  border:1px solid var(--line-light); cursor:pointer;
}
.field-check input[type=checkbox]:focus-visible{ outline:2px solid var(--green-hi); outline-offset:3px; }
.field-check label{
  font-size:.85rem; line-height:1.55; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--t-on-light-soft); margin:0; cursor:pointer;
}
.field-check a{ color:var(--pine-2); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Per-field validation */
.field-err{ display:none; margin-top:7px; font-size:.78rem; font-weight:600; color:#A8462F; }
.field.is-invalid .field-err{ display:block; }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:#C0563E; }
.field.is-invalid input:focus,.field.is-invalid textarea:focus{ box-shadow:inset 0 -2px 0 0 #C0563E; }
.opt{ font-weight:400; letter-spacing:0; text-transform:none; color:var(--t-on-light-soft); opacity:.75; }

/* contact method cards */
.cmethod{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  padding:24px 26px; border:1px solid var(--line-dark); background:rgba(255,255,255,.02);
  transition:background-color .34s var(--e), border-color .34s var(--e), transform .34s var(--e-out);
}
.cmethod:hover{ background:rgba(23,184,137,.08); border-color:var(--green); transform:translateX(5px); }
.cmethod .ic{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-dark); color:var(--green); flex:none; transition:background-color .3s,color .3s,border-color .3s; }
.cmethod:hover .ic{ background:var(--green); color:#03181A; border-color:var(--green); }
.cmethod > span:nth-child(2){ min-width:0; }
.cmethod .k,.cmethod .v{ display:block; }
.cmethod .k{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t-on-dark-mute); }
.cmethod .v{ font-family:'Inter Tight',sans-serif; font-size:1.08rem; font-weight:600; letter-spacing:-.01em; color:#fff; margin-top:4px; }

/* --- 17. Footer --------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--t-on-dark-soft); padding-top:clamp(64px,7vw,96px); }
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); padding-bottom:56px; }
.foot h5{ font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.foot ul{ display:grid; gap:11px; }
.foot li a{ font-size:.9rem; transition:color .24s var(--e), padding-left .28s var(--e); display:inline-block; }
.foot li a:hover{ color:var(--green-hi); padding-left:5px; }
.foot-logo img{ height:88px; width:auto; }
.foot-bot{
  border-top:1px solid var(--line-dark-2); padding-block:24px 30px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  font-size:.78rem; color:var(--t-on-dark-mute);
}
.foot-bot a:hover{ color:var(--green-hi); }
.foot-legal{ display:flex; flex-wrap:wrap; gap:20px; }
.totop{ display:inline-flex; align-items:center; gap:9px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:#fff; }
.totop .bx{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line-dark); transition:background-color .28s,color .28s,border-color .28s; }
.totop:hover .bx{ background:var(--green); border-color:var(--green); color:#03181A; }

/* --- 18. Reveal animation ---------------------------------------------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); }
.rv.in{ opacity:1; transform:none; }
.rv-l{ transform:translateX(-30px); } .rv-r{ transform:translateX(30px); }
.rv-s{ transform:scale(.96); }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
.rv-d4{ transition-delay:.32s } .rv-d5{ transition-delay:.40s } .rv-d6{ transition-delay:.48s }

/* word-by-word headline */
.rvw span{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.rvw span i{ display:inline-block; font-style:normal; transform:translateY(105%); transition:transform .82s var(--e-out); }
.rvw.in span i{ transform:none; }

/* image wipe */
.rvi{ overflow:hidden; }
.rvi > *{ transform:scale(1.12); opacity:0; transition:transform 1.15s var(--e-out), opacity .7s var(--e); }
.rvi.in > *{ transform:none; opacity:1; }

/* --- 19. Utility -------------------------------------------------------- */
.mt-0{margin-top:0} .mt-1{margin-top:10px} .mt-2{margin-top:18px} .mt-3{margin-top:26px}
.mt-4{margin-top:36px} .mt-5{margin-top:48px} .mt-6{margin-top:64px}
.mb-4{margin-bottom:36px} .mb-5{margin-bottom:48px}
.tc{text-align:center} .mx{margin-inline:auto}
.nowrap{white-space:nowrap}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--green); color:#03181A; padding:12px 18px; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--green-hi); outline-offset:3px; }

/* --- 20. Responsive ----------------------------------------------------- */
@media (max-width:1080px){
  .foot-top{ grid-template-columns:1fr 1fr; row-gap:44px; }
  .mosaic{ grid-template-columns:repeat(3,1fr); }
  .hero-strip{ grid-template-columns:repeat(2,1fr); gap:20px 28px; }
}
@media (max-width:900px){
  :root{ --gut:20px; }
  .nav{ display:none; }
  .burger{ display:grid; }
  .head-cta .btn{ display:none; }
  .split,.split-58,.split-85,.tabs{ grid-template-columns:1fr; }
  .split .fig-r{ aspect-ratio:4/3; }
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .duo .a{ width:100%; } .duo .b{ display:none; }
  .duo .badge{ max-width:150px; }
  .tab-btns{ margin-bottom:8px; }
  .topbar .tb-right span.hide-s{ display:none; }
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .f-row{ grid-template-columns:1fr; }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .tile-wide{ grid-column:span 2; aspect-ratio:2/1; }
  .hero-strip{ grid-template-columns:1fr 1fr; }
  .scrollcue{ display:none; }
  .foot-top{ grid-template-columns:1fr; }
  .hero-acts .btn{ width:100%; }
  .cmethod{ grid-template-columns:auto 1fr; }
  .cmethod .ar{ display:none; }
  .dock-item span{ display:none; }
  .dock-item{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv,.rvw span i,.rvi > *{ opacity:1 !important; transform:none !important; }
}