/* ==========================================================================
   Russian Federal Security Service — Independent International Security
   Design system: "technical dossier" — graphite / midnight / frosted steel
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* surfaces */
  --ink:#0B1118;
  --deep:#14212C;
  --surf:#1C2934;
  --steel:#2B3B48;
  --ivory:#F4F1EA;
  --paper:#EAE7E0;

  /* type on dark */
  --on-dark:#E8ECEF;
  --on-dark-soft:#AFC0CA;
  --on-dark-mute:#8B9DA8;

  /* type on light */
  --on-light:#0F1A22;
  --on-light-soft:#3C4B56;
  --on-light-mute:#5A6873;

  /* accents */
  --acc:#7FA8B8;
  --acc-2:#B9C4CA;
  --acc-hi:#9FD4E3;
  --acc-ink:#2C5568;          /* accessible accent on light surfaces */

  /* lines */
  --line:rgba(127,168,184,.20);
  --line-soft:rgba(127,168,184,.11);
  --line-strong:rgba(127,168,184,.38);
  --line-light:rgba(15,26,34,.16);
  --line-light-soft:rgba(15,26,34,.09);

  /* metrics */
  --rail:0px;
  --nav-h:78px;
  --gut:clamp(20px,4.4vw,72px);
  --shell:1460px;
  --r:2px;

  /* type */
  --f-display:"Barlow Condensed","Oswald","Helvetica Neue Condensed",
              "Arial Narrow",system-ui,sans-serif;
  --f-body:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:1280px){ :root{ --rail:66px; } }

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,picture,video{ max-width:100%; display:block; }
img{ height:auto; }

h1,h2,h3,h4,h5{ margin:0; font-weight:600; line-height:1.08; overflow-wrap:break-word; }
p,li,dt,dd,figcaption,label,td,th{ overflow-wrap:break-word; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 1.15em; padding-left:1.15em; }
li{ margin-bottom:.5em; }
a{ color:inherit; }

button{ font:inherit; color:inherit; }

::selection{ background:var(--acc); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--acc-hi);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acc-hi); color:var(--ink);
  padding:14px 22px; font-family:var(--f-mono);
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:0; }

.vh{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------- layout */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.shell--narrow{ max-width:1040px; }

.sec{ position:relative; padding-block:clamp(64px,8.5vw,132px); }
.sec--tight{ padding-block:clamp(48px,6vw,86px); }
.sec--dark{ background:var(--ink); color:var(--on-dark); }
.sec--deep{ background:var(--deep); color:var(--on-dark); }
.sec--surf{ background:var(--surf); color:var(--on-dark); }
.sec--light{ background:var(--ivory); color:var(--on-light); }
.sec--paper{ background:var(--paper); color:var(--on-light); }

.sec--dark + .sec--dark,
.sec--deep + .sec--deep{ padding-top:0; }

/* hairline top rule on every dark section */
.sec--dark::before,.sec--deep::before,.sec--surf::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--line-soft);
}
.sec--light::before,.sec--paper::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--line-light-soft);
}

/* fine background grid used on selected dark sections */
.sec--grid{
  background-image:
    linear-gradient(to right,var(--line-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  background-position:center top;
}

/* ---------------------------------------------------------------- vertical rail */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  display:none; z-index:60; pointer-events:none;
  border-right:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(11,17,24,.92),rgba(11,17,24,.55));
  backdrop-filter:blur(6px);
}
@media (min-width:1280px){
  .rail{ display:flex; align-items:center; justify-content:center; }
  body{ padding-left:var(--rail); }
}
.rail span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--acc); opacity:.75; white-space:nowrap;
}
.rail i{
  position:absolute; left:50%; transform:translateX(-50%);
  font-style:normal; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; color:var(--acc-2); opacity:.5;
}
.rail i.top{ top:26px; }
.rail i.bot{ bottom:26px; }

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(11,17,24,.82);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-scrolled{
  background:rgba(11,17,24,.96);
  border-bottom-color:var(--line);
}
.nav-in{
  max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  min-height:var(--nav-h);
  display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(10px,1.4vw,26px);
  padding-block:8px;
  transition:min-height .3s var(--ease);
}
.nav.is-scrolled .nav-in{ min-height:66px; }

.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; flex:0 0 auto; min-width:0;
}
/* The link list absorbs every bit of leftover space and is the only part of the
   bar allowed to give way, so the wordmark and the call to action always hold
   their size and the links wrap instead of anything being pushed off-screen. */
.nav-in > nav{ flex:1 1 auto; min-width:0; display:flex; justify-content:flex-end; }
.brand-mark{ width:34px; height:34px; flex:0 0 34px; }
.brand-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-name{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(12px,.95vw,15px); letter-spacing:.115em;
  text-transform:uppercase; color:var(--on-dark); line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-sub{
  font-family:var(--f-mono); font-size:8.6px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc); opacity:.82; white-space:nowrap; line-height:1;
}

.nav-links{
  display:none; align-items:center; justify-content:flex-end;
  flex-wrap:wrap; row-gap:0; gap:clamp(9px,.92vw,19px);
  margin-left:auto; list-style:none; padding:0;
}
.nav-links > li{ margin:0; position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(12px,.95vw,14px); letter-spacing:.105em; text-transform:uppercase;
  color:var(--on-dark-soft); text-decoration:none;
  padding:9px 2px; position:relative; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  transition:color .22s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px;
  background:var(--acc-hi); transition:right .3s var(--ease);
}
.nav-link:hover,.nav-link[aria-expanded="true"]{ color:var(--on-dark); }
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after{ right:0; }
.nav-link[aria-current="page"]{ color:var(--acc-hi); }
.nav-link[aria-current="page"]::after{ right:0; background:var(--acc); }
.nav-link .caret{ width:7px; height:7px; opacity:.65; transition:transform .25s var(--ease); }
.nav-link[aria-expanded="true"] .caret{ transform:rotate(180deg); }

.nav-cta{
  display:none; align-items:center; gap:8px;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(11.5px,.88vw,13px); letter-spacing:.115em; text-transform:uppercase;
  color:var(--ink); background:var(--acc-2); flex:0 0 auto;
  padding:12px 15px; text-decoration:none; border:1px solid var(--acc-2);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--acc-hi); border-color:var(--acc-hi); transform:translateY(-1px); }
.nav-cta svg{ width:13px; height:13px; }

/* The ten primary links, the wordmark and the CTA all have to share the bar, so
   their metrics are fixed rather than viewport-scaled. The link list is also
   allowed to wrap: if the condensed web font is slow or fails and a wider
   fallback is substituted, the links move onto a second row and the bar grows
   a little, rather than the call to action being pushed out of view.
   Below 1240px the full-screen drawer is used instead. */
@media (min-width:1240px){
  .nav-links{ display:flex; gap:12px; }
  .nav-link{ font-size:12px; letter-spacing:.05em; padding:7px 2px; }
  .nav-cta{ display:inline-flex; font-size:11.5px; letter-spacing:.07em; padding:12px 14px; }
  .nav-burger{ display:none; }
  .nav-in{ gap:14px; }
  .brand-name{ font-size:12px; letter-spacing:.07em; }
}
/* Between 1240px and 1499px the wordmark sets on two lines so that all ten
   primary links and the call to action keep their place on one row. */
@media (min-width:1240px) and (max-width:1499px){
  .brand-name{ white-space:normal; max-width:16ch; line-height:1.16; }
  .brand-sub{ display:none; }
}

/* mega panel */
.mega{
  position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:330px; padding:20px; z-index:95;
  background:rgba(20,33,44,.98);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.mega[data-open="true"]{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.mega li{ margin:0; }
.mega a{
  display:block; padding:11px 13px; text-decoration:none;
  border-left:2px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.mega a:hover,.mega a:focus-visible{ background:rgba(127,168,184,.09); border-left-color:var(--acc-hi); }
.mega .m-t{
  font-family:var(--f-display); font-size:16px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark);
}
.mega .m-d{ font-size:13px; line-height:1.45; color:var(--on-dark-mute); margin-top:2px; }

/* burger */
.nav-burger{
  margin-left:auto; display:inline-flex; flex-direction:column; justify-content:center;
  align-items:center; gap:5px; width:48px; height:48px;
  background:transparent; border:1px solid var(--line); cursor:pointer; padding:0;
}
.nav-burger span{
  display:block; width:19px; height:1.5px; background:var(--on-dark);
  transition:transform .3s var(--ease),opacity .25s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:88;
  background:linear-gradient(165deg,#0B1118 0%,#14212C 62%,#101c26 100%);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 18px) var(--gut) 34px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.drawer[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
@media (min-width:1240px){ .drawer{ display:none; } }
.drawer-grp{ margin-bottom:26px; }
.drawer-grp h2{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--acc); opacity:.8;
  margin:0 0 10px; padding-bottom:9px; border-bottom:1px solid var(--line-soft);
}
.drawer-grp ul{ list-style:none; margin:0; padding:0; }
.drawer-grp li{ margin:0; }
.drawer-grp a{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 0; text-decoration:none; min-height:48px;
  font-family:var(--f-display); font-size:clamp(21px,5.2vw,27px);
  font-weight:500; letter-spacing:.055em; text-transform:uppercase;
  color:var(--on-dark-soft); border-bottom:1px solid var(--line-soft);
  transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.drawer-grp a:hover,.drawer-grp a:focus-visible{ color:var(--acc-hi); padding-left:8px; }
.drawer-grp a[aria-current="page"]{ color:var(--acc-hi); }
.drawer-grp a em{
  font-style:normal; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; color:var(--acc); opacity:.6; flex:0 0 auto;
}
.drawer-foot{ margin-top:auto; padding-top:22px; border-top:1px solid var(--line); }
.drawer-foot .btn{ width:100%; justify-content:center; }
.drawer-contact{
  margin-top:18px; display:grid; gap:7px;
  font-family:var(--f-mono); font-size:13px; color:var(--on-dark-mute);
}
.drawer-contact a{ color:var(--acc-2); text-decoration:none; }
.drawer-contact a:hover{ color:var(--acc-hi); }

body.is-locked{ overflow:hidden; }

/* ---------------------------------------------------------------- type */
.h1{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(40px,7.2vw,92px); line-height:.98;
  letter-spacing:.005em; text-transform:uppercase;
}
.h2{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(29px,4.1vw,54px); line-height:1.04;
  letter-spacing:.012em; text-transform:uppercase;
}
.h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(22px,2.5vw,32px); line-height:1.12;
  letter-spacing:.03em; text-transform:uppercase;
}
.h4{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(19px,1.75vw,23px); line-height:1.2;
  letter-spacing:.05em; text-transform:uppercase;
}
.h5{
  font-family:var(--f-body); font-weight:600;
  font-size:17px; line-height:1.35; letter-spacing:.01em;
}

.lede{
  font-size:clamp(18px,1.65vw,22px); line-height:1.6;
  color:var(--on-dark-soft); font-weight:400;
}
.sec--light .lede,.sec--paper .lede{ color:var(--on-light-soft); }

.body-lg{ font-size:clamp(17px,1.2vw,18.5px); line-height:1.72; }

.mute{ color:var(--on-dark-mute); }
.sec--light .mute,.sec--paper .mute{ color:var(--on-light-mute); }

.kicker{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--acc);
}
.sec--light .kicker,.sec--paper .kicker{ color:var(--acc-ink); }
.kicker::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.75; flex:0 0 26px;
}
.kicker--plain::before{ display:none; }

.idx{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.2em;
  color:var(--acc); opacity:.8;
}
.sec--light .idx,.sec--paper .idx{ color:var(--acc-ink); opacity:.85; }

.sec-head{ max-width:900px; margin-bottom:clamp(34px,4.4vw,62px); }
.sec-head .h2{ margin-top:16px; }
.sec-head .lede{ margin-top:20px; }
.sec-head--wide{ max-width:1100px; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.sec--light .rule,.sec--paper .rule{ background:var(--line-light); }

.mark-line{
  width:64px; height:3px; background:var(--acc-hi); margin-bottom:26px;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:52px; padding:14px 26px;
  font-family:var(--f-display); font-weight:600; font-size:14.5px;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; cursor:pointer; background:none;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn svg{ width:15px; height:15px; flex:0 0 15px; }
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--acc-2); color:var(--ink); border-color:var(--acc-2); }
.btn--primary:hover{ background:var(--acc-hi); border-color:var(--acc-hi); }
.btn--ghost{ color:var(--on-dark); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--acc-hi); color:var(--acc-hi); background:rgba(159,212,227,.06); }
.btn--dark{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.btn--dark:hover{ background:var(--deep); border-color:var(--deep); }
.btn--outline-dark{ color:var(--on-light); border-color:var(--line-light); }
.btn--outline-dark:hover{ border-color:var(--acc-ink); color:var(--acc-ink); background:rgba(44,85,104,.06); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.tlink{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--acc-hi);
  padding:4px 0; border-bottom:1px solid rgba(159,212,227,.3);
  transition:gap .25s var(--ease),border-color .25s var(--ease);
}
.tlink:hover{ gap:15px; border-bottom-color:var(--acc-hi); }
.sec--light .tlink,.sec--paper .tlink{ color:var(--acc-ink); border-bottom-color:rgba(44,85,104,.3); }
.sec--light .tlink:hover,.sec--paper .tlink:hover{ border-bottom-color:var(--acc-ink); }
.tlink svg{ width:13px; height:13px; }

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; isolation:isolate;
  min-height:min(88vh,780px);
  display:flex; align-items:flex-end;
  padding-block:clamp(92px,14vw,140px) clamp(46px,6vw,74px);
  overflow:hidden;
  background:var(--ink);
}
.hero--tall{ min-height:min(94vh,900px); }
.hero--short{ min-height:min(60vh,540px); align-items:center; }

.hero-bg{
  position:absolute; inset:0; z-index:-2;
}
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,rgba(11,17,24,.95) 0%,rgba(11,17,24,.86) 38%,rgba(11,17,24,.44) 70%,rgba(11,17,24,.62) 100%),
    linear-gradient(to top,rgba(11,17,24,.96) 0%,rgba(11,17,24,.2) 46%,rgba(11,17,24,.5) 100%);
}
.hero-in{ position:relative; width:100%; }
.hero-copy{ max-width:900px; }
.hero .h1{ margin-top:22px; }
.hero .lede{ margin-top:24px; max-width:660px; }
.hero .btn-row{ margin-top:clamp(30px,3.6vw,42px); }

.hero-meta{
  margin-top:clamp(40px,5vw,64px); padding-top:26px;
  border-top:1px solid var(--line);
  display:grid; gap:20px 26px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.hero-meta div{ display:flex; gap:11px; align-items:flex-start; }
.hero-meta .dot{
  width:7px; height:7px; flex:0 0 7px; margin-top:8px;
  background:var(--acc-hi); transform:rotate(45deg);
}
.hero-meta span{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--on-dark-soft); line-height:1.55;
}

/* page hero (interior) */
.phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink);
  padding-block:clamp(78px,11vw,130px) clamp(52px,7vw,92px);
  min-height:min(62vh,560px);
  display:flex; align-items:flex-end;
}
.phero-bg{ position:absolute; inset:0; z-index:-2; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; }
.phero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg,rgba(11,17,24,.96) 0%,rgba(11,17,24,.84) 45%,rgba(11,17,24,.5) 100%),
    linear-gradient(to top,rgba(11,17,24,.9),rgba(11,17,24,.25) 55%);
}
.phero--short{
  min-height:min(46vh,410px);
  padding-block:clamp(70px,9vw,104px) clamp(38px,4.6vw,60px);
}
.phero-in{ position:relative; width:100%; max-width:960px; }
.phero .h1{ margin-top:20px; font-size:clamp(34px,5.6vw,72px); }
.phero .lede{ margin-top:20px; max-width:640px; }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-mute);
  list-style:none; margin:0 0 18px; padding:0;
}
.crumbs li{ margin:0; display:flex; align-items:center; gap:8px; }
.crumbs a{ color:var(--acc); text-decoration:none; }
.crumbs a:hover{ color:var(--acc-hi); text-decoration:underline; }
.crumbs li+li::before{ content:"/"; color:var(--acc); opacity:.45; }
.crumbs [aria-current]{ color:var(--on-dark-soft); }

/* ---------------------------------------------------------------- panels */
.panel{
  position:relative;
  background:linear-gradient(158deg,rgba(28,41,52,.92),rgba(20,33,44,.7));
  border:1px solid var(--line);
  padding:clamp(24px,2.6vw,38px);
}
.panel--glass{
  background:rgba(232,236,239,.035);
  backdrop-filter:blur(9px);
}
.panel--light{
  background:#fff; border-color:var(--line-light-soft);
  box-shadow:0 1px 0 rgba(15,26,34,.05);
}
.panel--bracket::before,.panel--bracket::after{
  content:""; position:absolute; width:17px; height:17px; pointer-events:none;
  border:1px solid var(--acc); opacity:.8;
}
.panel--bracket::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel--bracket::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------------------------------------------------------------- grids */
/* Flex and grid children default to min-width:auto, which lets long content
   push a track wider than the viewport. Reset it everywhere text can appear. */
.g > *,.split > *,.vgrid > *,.strip > *,.ccards > *,.cta-in > *,
.foot-top > *,.form-row > *,.hero-copy,.phero-in,.acc-btn .q,.nav-in > *{ min-width:0; }

.g{ display:grid; gap:clamp(18px,2vw,28px); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
@media (min-width:900px){ .g-2{ grid-template-columns:repeat(2,1fr); } }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); }

.split{
  display:grid; gap:clamp(28px,4vw,68px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:1.02fr .98fr; }
  .split--wide-l{ grid-template-columns:1.3fr .7fr; }
  .split--wide-r{ grid-template-columns:.72fr 1.28fr; }
  .split--offset{ align-items:start; }
  .split--offset > *:last-child{ margin-top:clamp(30px,5vw,80px); }
  .split--rev > *:first-child{ order:2; }
}

/* ---------------------------------------------------------------- cards */
.card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(24px,2.4vw,34px);
  background:linear-gradient(160deg,rgba(28,41,52,.85),rgba(17,28,38,.72));
  border:1px solid var(--line-soft);
  text-decoration:none; color:inherit;
  transition:transform .34s var(--ease),border-color .34s var(--ease),
             background .34s var(--ease),box-shadow .34s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--acc-hi); transition:width .42s var(--ease);
}
a.card:hover,a.card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--line-strong);
  background:linear-gradient(160deg,rgba(37,53,66,.95),rgba(20,33,44,.8));
  box-shadow:0 26px 52px -30px rgba(0,0,0,.9);
}
a.card:hover::before,a.card:focus-visible::before{ width:100%; }
.card-idx{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em;
  color:var(--acc); opacity:.75; margin-bottom:16px;
}
.card .h4{ margin-bottom:12px; }
.card p{ color:var(--on-dark-mute); font-size:15.5px; line-height:1.62; }
.card .tlink{ margin-top:auto; padding-top:20px; align-self:flex-start; }
.card-ico{ width:34px; height:34px; margin-bottom:20px; color:var(--acc-hi); }

.sec--light .card-idx,.sec--paper .card-idx{ color:var(--acc-ink); opacity:.9; }

.card--light{
  background:#fff; border-color:var(--line-light-soft);
}
.card--light p{ color:var(--on-light-mute); }
.card--light .card-idx{ color:var(--acc-ink); }
a.card--light:hover{
  background:#fff; border-color:var(--line-light);
  box-shadow:0 24px 44px -30px rgba(15,26,34,.45);
}

/* editorial value grid (bordered cells, no boxes) */
.vgrid{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.vgrid > div{
  padding:clamp(26px,2.8vw,42px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sec--light .vgrid,.sec--paper .vgrid{ border-color:var(--line-light); }
.sec--light .vgrid > div,.sec--paper .vgrid > div{ border-color:var(--line-light); }
.vgrid .idxn{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em;
  color:var(--acc); display:block; margin-bottom:18px;
}
.sec--light .vgrid .idxn,.sec--paper .vgrid .idxn{ color:var(--acc-ink); }
.vgrid .h4{ margin-bottom:12px; }
.vgrid p{ font-size:15.5px; margin:0; }

/* ---------------------------------------------------------------- figures */
.fig{ position:relative; margin:0; }
.fig img{
  width:100%; height:100%; object-fit:cover;
  border:1px solid var(--line-soft); background:var(--deep);
}
.fig--contain img{ object-fit:contain; background:var(--deep); }
.fig--r21{ aspect-ratio:2/1; }
.fig--r43{ aspect-ratio:4/3; }
.fig--r11{ aspect-ratio:1/1; }
.fig--r34{ aspect-ratio:3/4; }
.fig--auto img{ height:auto; }
.fig figcaption{
  margin-top:13px; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute);
  line-height:1.6;
}
.sec--light .fig figcaption,.sec--paper .fig figcaption{ color:var(--on-light-mute); }
.sec--light .fig img,.sec--paper .fig img{ border-color:var(--line-light-soft); background:var(--paper); }
.fig--framed{ padding:12px; border:1px solid var(--line); }
.sec--light .fig--framed,.sec--paper .fig--framed{ border-color:var(--line-light); }

/* portrait: never crop the subject */
.portrait{
  position:relative; display:grid; place-items:end center;
  background:linear-gradient(170deg,var(--surf),var(--ink));
  border:1px solid var(--line);
  padding:clamp(18px,2.2vw,30px);
  aspect-ratio:4/5; max-width:520px;
}
.portrait img{
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
}
.portrait::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--acc-hi); opacity:.85;
}
/* on ivory sections the frame stays light so a white-background photograph
   sits inside it without reading as a heavy border */
.sec--light .portrait,.sec--paper .portrait{
  background:linear-gradient(170deg,#fff,var(--paper));
  border-color:var(--line-light);
}
.sec--light .portrait::after,.sec--paper .portrait::after{ background:var(--acc-ink); opacity:.9; }

/* ---------------------------------------------------------------- lists */
.tick{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.tick li{ position:relative; padding-left:30px; margin:0; font-size:16px; line-height:1.6; }
.tick li::before{
  content:""; position:absolute; left:1px; top:.52em;
  width:13px; height:7px; border:1.8px solid var(--acc-hi);
  border-width:0 0 1.8px 1.8px; transform:rotate(-45deg);
}
.sec--light .tick li::before,.sec--paper .tick li::before{ border-color:var(--acc-ink); }

.dash{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.dash li{ position:relative; padding-left:24px; margin:0; font-size:15.8px; line-height:1.6; }
.dash li::before{
  content:""; position:absolute; left:0; top:.78em; width:12px; height:1px; background:var(--acc);
}
.sec--light .dash li::before,.sec--paper .dash li::before{ background:var(--acc-ink); }

.deflist{ display:grid; gap:0; margin:0; }
.deflist > div{
  display:grid; gap:6px 30px; padding:22px 0;
  border-bottom:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .deflist > div{ grid-template-columns:250px 1fr; } }
.deflist dt{
  font-family:var(--f-display); font-size:19px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark);
}
.deflist dd{ margin:0; color:var(--on-dark-soft); font-size:16px; }
.sec--light .deflist > div,.sec--paper .deflist > div{ border-color:var(--line-light); }
.sec--light .deflist dt,.sec--paper .deflist dt{ color:var(--on-light); }
.sec--light .deflist dd,.sec--paper .deflist dd{ color:var(--on-light-soft); }

/* ---------------------------------------------------------------- steps / timeline */
.steps{ display:grid; gap:0; counter-reset:s; }
.step{
  position:relative; padding:clamp(24px,2.6vw,34px) 0 clamp(24px,2.6vw,34px) clamp(58px,7vw,104px);
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; left:0; top:clamp(24px,2.6vw,34px);
  font-family:var(--f-mono); font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.08em; color:var(--acc); opacity:.55;
}
.step::after{
  content:""; position:absolute; left:clamp(44px,5.4vw,78px); top:0; bottom:0; width:1px;
  background:var(--line-soft);
}
.step .h3{ margin-bottom:12px; }
.step p{ max-width:760px; color:var(--on-dark-soft); }
.sec--light .step,.sec--paper .step{ border-color:var(--line-light); }
.sec--light .step::before,.sec--paper .step::before{ color:var(--acc-ink); opacity:.7; }
.sec--light .step::after,.sec--paper .step::after{ background:var(--line-light-soft); }
.sec--light .step p,.sec--paper .step p{ color:var(--on-light-soft); }

.tline{ position:relative; padding-left:34px; display:grid; gap:clamp(26px,3vw,42px); }
.tline::before{
  content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--line);
}
.tline-i{ position:relative; }
.tline-i::before{
  content:""; position:absolute; left:-34px; top:7px; width:15px; height:15px;
  border:1px solid var(--acc); background:var(--ink); transform:rotate(45deg);
}
.tline-i .idx{ display:block; margin-bottom:9px; }
.tline-i .h4{ margin-bottom:10px; }
.sec--light .tline::before,.sec--paper .tline::before{ background:var(--line-light); }
.sec--light .tline-i::before,.sec--paper .tline-i::before{ background:var(--ivory); border-color:var(--acc-ink); }

/* ---------------------------------------------------------------- matrix */
.matrix-wrap{ overflow-x:auto; padding-bottom:6px; }
.matrix{
  border-collapse:collapse; width:100%; min-width:560px;
  font-size:14px;
}
.matrix caption{
  text-align:left; padding-bottom:16px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-mute);
}
.matrix th,.matrix td{
  border:1px solid var(--line); padding:14px 12px; text-align:center; vertical-align:middle;
}
.matrix th{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--acc); font-weight:500; background:rgba(127,168,184,.05);
}
.matrix th[scope="row"]{ text-align:left; white-space:nowrap; }
.matrix td{ font-family:var(--f-display); font-size:15px; letter-spacing:.09em; text-transform:uppercase; }
.m-l1{ background:rgba(127,168,184,.05); color:var(--on-dark-soft); }
.m-l2{ background:rgba(127,168,184,.12); color:var(--on-dark-soft); }
.m-l3{ background:rgba(127,168,184,.22); color:var(--on-dark); }
.m-l4{ background:rgba(159,212,227,.62); color:var(--ink); }
.m-l5{ background:rgba(159,212,227,.88); color:var(--ink); font-weight:600; }

/* ---------------------------------------------------------------- accordion */
.acc{ border-top:1px solid var(--line); }
.acc-i{ border-bottom:1px solid var(--line); }
.acc-btn{
  width:100%; display:flex; align-items:flex-start; gap:18px;
  padding:clamp(20px,2.3vw,28px) 0; background:none; border:0; cursor:pointer;
  text-align:left; color:inherit;
}
.acc-btn .q{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(18px,1.85vw,24px); line-height:1.24;
  letter-spacing:.035em; text-transform:uppercase; flex:1;
  transition:color .22s var(--ease);
}
.acc-btn:hover .q{ color:var(--acc-hi); }
.acc-btn .n{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em;
  color:var(--acc); opacity:.7; flex:0 0 auto; padding-top:5px;
}
.acc-sign{
  position:relative; flex:0 0 22px; width:22px; height:22px; margin-top:3px;
}
.acc-sign::before,.acc-sign::after{
  content:""; position:absolute; background:var(--acc-hi);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.acc-sign::before{ left:0; top:10.5px; width:22px; height:1.5px; }
.acc-sign::after{ left:10.5px; top:0; width:1.5px; height:22px; }
.acc-btn[aria-expanded="true"] .acc-sign::after{ transform:scaleY(0); opacity:0; }
.acc-btn[aria-expanded="true"] .q{ color:var(--acc-hi); }
.acc-p{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease);
}
.acc-i[data-open="true"] .acc-p{ grid-template-rows:1fr; }
.acc-p > div{ overflow:hidden; }
.acc-p .inner{
  padding:0 0 clamp(24px,2.6vw,32px) clamp(0px,3vw,52px);
  max-width:900px; color:var(--on-dark-soft);
}
.acc-p .inner p{ font-size:16.5px; }

/* accordion on light surfaces */
.sec--light .acc,.sec--paper .acc,
.sec--light .acc-i,.sec--paper .acc-i{ border-color:var(--line-light); }
.sec--light .acc-btn .n,.sec--paper .acc-btn .n{ color:var(--acc-ink); opacity:.85; }
.sec--light .acc-sign::before,.sec--light .acc-sign::after,
.sec--paper .acc-sign::before,.sec--paper .acc-sign::after{ background:var(--acc-ink); }
.sec--light .acc-btn:hover .q,.sec--paper .acc-btn:hover .q,
.sec--light .acc-btn[aria-expanded="true"] .q,.sec--paper .acc-btn[aria-expanded="true"] .q{
  color:var(--acc-ink);
}
.sec--light .acc-p .inner,.sec--paper .acc-p .inner{ color:var(--on-light-soft); }

/* ---------------------------------------------------------------- forms */
.form{ display:grid; gap:22px; }
.form-row{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.field{ display:grid; gap:8px; }
.field label{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--acc);
}
.field .req{ color:var(--acc-hi); }
.field input,.field select,.field textarea{
  width:100%; min-height:54px; padding:14px 16px;
  font-family:var(--f-body); font-size:16px; color:var(--on-dark);
  background:rgba(232,236,239,.04);
  border:1px solid var(--line); border-radius:0;
  transition:border-color .22s var(--ease),background .22s var(--ease);
  appearance:none;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237FA8B8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:44px; cursor:pointer;
}
.field select option{ background:var(--deep); color:var(--on-dark); }
.field input::placeholder,.field textarea::placeholder{ color:var(--on-dark-mute); opacity:.65; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--line-strong); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--acc-hi); background:rgba(232,236,239,.07); outline:none;
  box-shadow:0 0 0 2px rgba(159,212,227,.22);
}
.field .hint{ font-size:13.5px; color:var(--on-dark-mute); line-height:1.5; }
.field .err{
  font-size:13.5px; color:#FFC9C0; display:none; align-items:center; gap:7px;
}
.field .err::before{ content:"!"; font-family:var(--f-mono); font-weight:600; }
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{
  border-color:#E08C80; box-shadow:0 0 0 2px rgba(224,140,128,.18);
}
.field[data-invalid="true"] .err{ display:flex; }

.radio-set{ display:flex; flex-wrap:wrap; gap:10px; }
.radio-set label{
  display:inline-flex; align-items:center; gap:9px;
  min-height:48px; padding:11px 18px;
  border:1px solid var(--line); cursor:pointer;
  font-family:var(--f-display); font-size:14.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-dark-soft);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.radio-set input{
  appearance:none; width:15px; height:15px; margin:0; flex:0 0 15px;
  border:1px solid var(--acc); background:transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.radio-set input:checked{
  background:var(--acc-hi); border-color:var(--acc-hi);
  box-shadow:inset 0 0 0 3px var(--ink);
}
.radio-set label:has(input:checked){ border-color:var(--acc-hi); color:var(--on-dark); background:rgba(159,212,227,.07); }
.radio-set input:focus-visible{ outline:2px solid var(--acc-hi); outline-offset:3px; }

.fieldset{ border:0; padding:0; margin:0; min-width:0; }
.legend{
  padding:0; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--acc);
}

.consent,.field .consent{
  display:flex; gap:13px; align-items:flex-start;
  font-family:var(--f-body); font-size:14.5px; line-height:1.6;
  letter-spacing:normal; text-transform:none; color:var(--on-dark-soft);
  cursor:pointer;
}
.consent input{
  appearance:none; width:20px; height:20px; flex:0 0 20px; margin:2px 0 0;
  border:1px solid var(--acc); cursor:pointer;
  background:transparent no-repeat center / 12px 9px;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.consent input:checked{
  background-color:var(--acc-hi); border-color:var(--acc-hi);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.4 8 11 1.2' fill='none' stroke='%230B1118' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.consent a{ color:var(--acc-hi); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{
  border-left:2px solid var(--acc); padding:16px 20px;
  background:rgba(127,168,184,.06);
  font-size:14.5px; line-height:1.62; color:var(--on-dark-soft);
}
.form-status{ display:none; padding:18px 20px; border:1px solid var(--line); font-size:15.5px; }
.form-status[data-state="ok"]{ display:block; border-color:var(--acc-hi); background:rgba(159,212,227,.09); }
.form-status[data-state="error"]{ display:block; border-color:#E08C80; background:rgba(224,140,128,.09); }

/* ---- form controls on light surfaces ------------------------------------ */
.sec--light .field label,.sec--paper .field label,
.sec--light .legend,.sec--paper .legend{ color:var(--acc-ink); }
.sec--light .field .req,.sec--paper .field .req{ color:var(--acc-ink); }

.sec--light .field input,.sec--light .field select,.sec--light .field textarea,
.sec--paper .field input,.sec--paper .field select,.sec--paper .field textarea{
  background:#fff; border-color:var(--line-light); color:var(--on-light);
}
.sec--light .field input::placeholder,.sec--light .field textarea::placeholder,
.sec--paper .field input::placeholder,.sec--paper .field textarea::placeholder{
  color:var(--on-light-mute); opacity:.8;
}
.sec--light .field input:hover,.sec--light .field select:hover,.sec--light .field textarea:hover,
.sec--paper .field input:hover,.sec--paper .field select:hover,.sec--paper .field textarea:hover{
  border-color:rgba(15,26,34,.34);
}
.sec--light .field input:focus,.sec--light .field select:focus,.sec--light .field textarea:focus,
.sec--paper .field input:focus,.sec--paper .field select:focus,.sec--paper .field textarea:focus{
  border-color:var(--acc-ink); background:#fff;
  box-shadow:0 0 0 2px rgba(44,85,104,.24);
}
.sec--light .field select,.sec--paper .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232C5568' stroke-width='1.6'/%3E%3C/svg%3E");
}
.sec--light .field select option,.sec--paper .field select option{ background:#fff; color:var(--on-light); }
.sec--light .field .hint,.sec--paper .field .hint{ color:var(--on-light-mute); }
.sec--light .field .err,.sec--paper .field .err{ color:#93301F; }
.sec--light .field[data-invalid="true"] input,.sec--light .field[data-invalid="true"] select,
.sec--light .field[data-invalid="true"] textarea,.sec--paper .field[data-invalid="true"] input,
.sec--paper .field[data-invalid="true"] select,.sec--paper .field[data-invalid="true"] textarea{
  border-color:#A6392A; box-shadow:0 0 0 2px rgba(166,57,42,.16);
}

.sec--light .radio-set label,.sec--paper .radio-set label{
  border-color:var(--line-light); color:var(--on-light-soft);
}
.sec--light .radio-set input,.sec--paper .radio-set input,
.sec--light .consent input,.sec--paper .consent input{ border-color:var(--acc-ink); }
.sec--light .radio-set input:checked,.sec--paper .radio-set input:checked,
.sec--light .consent input:checked,.sec--paper .consent input:checked{ background:var(--acc-ink); }
.sec--light .radio-set label:has(input:checked),.sec--paper .radio-set label:has(input:checked){
  border-color:var(--acc-ink); color:var(--on-light); background:rgba(44,85,104,.07);
}
.sec--light .radio-set input:checked,.sec--paper .radio-set input:checked{
  box-shadow:inset 0 0 0 3px var(--ivory);
}
.sec--light .consent input:checked,.sec--paper .consent input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.4 8 11 1.2' fill='none' stroke='%23F4F1EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sec--light .consent,.sec--paper .consent,
.sec--light .field .consent,.sec--paper .field .consent{ color:var(--on-light-soft); }
.sec--light .consent a,.sec--paper .consent a{ color:var(--acc-ink); }

.sec--light .form-note,.sec--paper .form-note{
  background:rgba(44,85,104,.06); border-left-color:var(--acc-ink); color:var(--on-light-soft);
}
.sec--light .form-status,.sec--paper .form-status{ border-color:var(--line-light); color:var(--on-light); }
.sec--light .form-status[data-state="ok"],.sec--paper .form-status[data-state="ok"]{
  border-color:var(--acc-ink); background:rgba(44,85,104,.08);
}
.sec--light .form-status[data-state="error"],.sec--paper .form-status[data-state="error"]{
  border-color:#A6392A; background:rgba(166,57,42,.08);
}

/* ---------------------------------------------------------------- callouts */
.callout{
  position:relative; padding:clamp(28px,3.2vw,44px);
  border:1px solid var(--line); background:rgba(127,168,184,.05);
}
.callout .h3{ margin-bottom:14px; }
.callout--accent{ border-left:3px solid var(--acc-hi); }
.sec--light .callout,.sec--paper .callout{ border-color:var(--line-light); background:rgba(44,85,104,.045); }

.quote{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(23px,3.1vw,40px); line-height:1.18;
  letter-spacing:.02em; text-transform:uppercase; color:var(--on-dark);
  margin:0; max-width:20ch;
}
.sec--light .quote,.sec--paper .quote{ color:var(--on-light); }

.notice{
  border:1px solid var(--line); border-left:3px solid var(--acc);
  padding:clamp(20px,2.4vw,30px);
  font-size:15.5px; line-height:1.66; color:var(--on-dark-soft);
  background:rgba(11,17,24,.4);
}
.notice strong{ color:var(--on-dark); }
.sec--light .notice,.sec--paper .notice{
  border-color:var(--line-light); border-left-color:var(--acc-ink);
  color:var(--on-light-soft); background:rgba(255,255,255,.6);
}
.sec--light .notice strong,.sec--paper .notice strong{ color:var(--on-light); }

/* strip of small facts */
.strip{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  border:1px solid var(--line);
}
.strip > div{ padding:clamp(22px,2.4vw,30px); border-right:1px solid var(--line); }
.strip > div:last-child{ border-right:0; }
.strip .k{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acc); display:block; margin-bottom:10px;
}
.strip .v{
  font-family:var(--f-display); font-size:clamp(17px,1.6vw,21px);
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; line-height:1.2;
}
.sec--light .strip,.sec--paper .strip{ border-color:var(--line-light); }
.sec--light .strip > div,.sec--paper .strip > div{ border-color:var(--line-light); }
.sec--light .strip .k,.sec--paper .strip .k{ color:var(--acc-ink); }

/* ---------------------------------------------------------------- CTA band */
.cta{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--deep),var(--ink) 62%);
  border-top:1px solid var(--line);
}
.cta::after{
  content:""; position:absolute; right:-140px; top:-160px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle,rgba(127,168,184,.16),transparent 68%);
  pointer-events:none;
}
.cta-in{
  position:relative; display:grid; gap:clamp(26px,3.4vw,54px);
  align-items:center; grid-template-columns:1fr;
}
@media (min-width:900px){ .cta-in{ grid-template-columns:1.25fr .75fr; } }
.cta .h2{ max-width:16ch; }

/* ---------------------------------------------------------------- contact cards */
.ccards{ display:grid; gap:clamp(16px,1.8vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(100%,222px),1fr)); }
.ccard{
  display:flex; flex-direction:column; gap:9px;
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line); background:rgba(232,236,239,.03);
  text-decoration:none;
  transition:border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease);
}
a.ccard:hover{ border-color:var(--acc-hi); background:rgba(159,212,227,.07); transform:translateY(-3px); }
.ccard .k{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acc);
}
.ccard .v{
  font-family:var(--f-display); font-size:clamp(19px,1.9vw,24px); font-weight:600;
  letter-spacing:.05em; color:var(--on-dark); word-break:break-word;
}
.ccard .d{ font-size:14px; color:var(--on-dark-mute); }

/* ---------------------------------------------------------------- footer */
.foot{ background:var(--ink); border-top:1px solid var(--line); }
.foot-top{
  display:grid; gap:clamp(32px,3.6vw,50px);
  grid-template-columns:1fr;
  padding-block:clamp(52px,6vw,84px);
}
@media (min-width:700px){ .foot-top{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .foot-top{ grid-template-columns:1.45fr .85fr .85fr 1.05fr; } }
.foot h2{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--acc); font-weight:500;
  margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line-soft);
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot li{ margin:0; }
.foot-nav a{
  font-size:15px; color:var(--on-dark-soft); text-decoration:none;
  transition:color .2s var(--ease),padding-left .25s var(--ease);
  display:inline-block;
}
.foot-nav a:hover{ color:var(--acc-hi); padding-left:5px; }
.foot-brand .bname{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(19px,1.9vw,24px); letter-spacing:.12em;
  text-transform:uppercase; line-height:1.2; margin-bottom:10px;
}
.foot-brand .bsub{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--acc); margin-bottom:18px; line-height:1.6;
}
.foot-brand p{ font-size:15px; color:var(--on-dark-mute); max-width:38ch; }
.foot-contact .ln{ display:grid; gap:4px; margin-bottom:16px; }
.foot-contact .k{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc); opacity:.85;
}
.foot-contact a,.foot-contact .v{
  font-size:16px; color:var(--on-dark); text-decoration:none; word-break:break-word;
}
.foot-contact a:hover{ color:var(--acc-hi); text-decoration:underline; }

.social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.social a,.social span{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line); color:var(--acc-2);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.social a:hover{ border-color:var(--acc-hi); color:var(--acc-hi); background:rgba(159,212,227,.07); }
.social span{ opacity:.42; cursor:default; }
.social svg{ width:17px; height:17px; }
.social-note{
  margin-top:13px; font-size:12.5px; color:var(--on-dark-mute); line-height:1.55; max-width:34ch;
}

.foot-legal{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(28px,3vw,40px);
  display:grid; gap:22px;
}
.disclaimer{
  display:grid; gap:14px;
  font-size:13.2px; line-height:1.68; color:var(--on-dark-mute);
}
.disclaimer strong{ color:var(--on-dark-soft); font-weight:500; }
.foot-base{
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center;
  justify-content:space-between;
  padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:13.5px; color:var(--on-dark-mute);
}
.foot-base a{ color:var(--acc-2); text-decoration:none; }
.foot-base a:hover{ color:var(--acc-hi); text-decoration:underline; }
.credit{ font-family:var(--f-mono); font-size:12px; letter-spacing:.07em; }

/* ---------------------------------------------------------------- motion */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.09s; }
[data-reveal][data-d="2"]{ transition-delay:.18s; }
[data-reveal][data-d="3"]{ transition-delay:.27s; }
[data-reveal][data-d="4"]{ transition-delay:.36s; }
[data-reveal][data-d="5"]{ transition-delay:.45s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .btn:hover,a.card:hover,a.ccard:hover{ transform:none; }
}

/* ---------------------------------------------------------------- utils */
.stack-sm > * + *{ margin-top:14px; }
.stack > * + *{ margin-top:24px; }
.stack-lg > * + *{ margin-top:clamp(30px,3.4vw,48px); }
.mt-l{ margin-top:clamp(34px,4vw,58px); }
.mt-m{ margin-top:clamp(22px,2.6vw,34px); }
.center{ text-align:center; }
.maxw{ max-width:72ch; }
.maxw-s{ max-width:58ch; }

/* ---------------------------------------------------------------- small screens */
@media (max-width:520px){
  body{ font-size:16.5px; }
  .hero{ min-height:auto; padding-block:104px 54px; }
  .hero-meta{ grid-template-columns:1fr; }
  .strip > div{ border-right:0; border-bottom:1px solid var(--line); }
  .strip > div:last-child{ border-bottom:0; }
  .deflist > div{ padding:18px 0; }
}
@media (max-width:380px){
  :root{ --gut:18px; }
  .brand-sub{ display:none; }
  .brand-name{ font-size:12px; letter-spacing:.1em; }
}

/* print */
@media print{
  .nav,.drawer,.rail,.cta,.social{ display:none!important; }
  body{ background:#fff; color:#000; padding-left:0; }
  .sec{ padding-block:18px; }
}