/* ============================================================
   J.A.K. ENERGY GROUP S.R.L.
   Editorial schematic — paper + ink, one dark pinned chapter
   ============================================================ */

/* Palette sampled from the logo lockup: the reds and navies are the mark's own
   values, and the greys were pulled off its chrome so the emblem does not sit
   on a warmer ground than itself. */
:root{
  --paper:#F1F2F4;
  --paper-2:#E4E7EB;
  --ink:#06162F;      /* darkest navy of the J.A.K. wordmark */
  --ink-2:#17304F;
  --mute:#656E7B;     /* 4.6:1 on paper — the mono labels set at 11.5px */
  --faint:#A3AAB4;    /* logo chrome mid #99A1A8 */
  --hair:rgba(6,22,47,.15);
  --hair-soft:rgba(6,22,47,.08);
  --red:#D90D12;      /* ENERGY red; its bright core is #EC0D14 */

  --wrap:1440px;
  --pad:clamp(20px, 4.4vw, 76px);

  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.4,0,.2,1);

  --hdr-h:68px;

  --sans:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono','SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-feature-settings:'ss01','cv01';
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,p,ul,dl,dd,dt,figure,figcaption{margin:0}
ul{padding:0; list-style:none}
::selection{background:var(--ink); color:var(--paper)}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

.mono{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--mute)}

.rule{position:relative}
.rule::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hair);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--e);
}
.rule.is-in::before{transform:scaleX(1)}

/* ============================================================
   SCHEMATIC RAIL
   ============================================================ */
.rail{
  position:fixed; z-index:90; left:calc(var(--pad) / 2 - 6px);
  top:calc(var(--hdr-h) + 26px); bottom:26px; width:12px;
  pointer-events:none;
  opacity:0; transition:opacity .9s var(--e) .5s;
}
html.ready .rail{opacity:1}
.rail-bg,.rail-run{position:absolute; left:5px; top:0; bottom:0; width:1px; display:block}
.rail-bg{background:var(--hair)}
.rail-run{
  background:var(--red); transform:scaleY(0); transform-origin:top center;
  will-change:transform;
}
.rail-nodes{position:absolute; inset:0}
.rail-nodes li{
  position:absolute; left:0; width:12px;
  display:flex; align-items:center; gap:10px;
}
.rail-nodes li:nth-child(1){top:26%}
.rail-nodes li:nth-child(2){top:53%}
.rail-nodes li:nth-child(3){top:80%}
.rail-dot{
  width:7px; height:7px; margin-left:2.5px; border-radius:50%;
  background:var(--paper); border:1px solid var(--hair);
  transition:background-color .5s var(--e2), border-color .5s var(--e2), transform .5s var(--e);
}
.rail-t{
  font-size:9.5px; color:var(--faint); opacity:0; transform:translateX(-4px);
  transition:opacity .5s var(--e2), transform .5s var(--e), color .5s var(--e2);
}
.rail-nodes li.on .rail-dot{background:var(--red); border-color:var(--red); transform:scale(1.25)}
.rail-nodes li.on .rail-t{opacity:1; transform:none; color:var(--ink)}

.rail-hud{
  position:absolute; left:0; bottom:-4px;
  display:flex; align-items:center; gap:5px;
  font-size:9.5px; color:var(--faint);
  writing-mode:vertical-rl; text-orientation:mixed;
}
.rail-hud #hudPct{color:var(--ink); font-variant-numeric:tabular-nums}
.rail-hud-s{opacity:.5}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hdr-h);
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--e2), border-color .45s var(--e2), color .5s var(--e2);
}
.hdr.stuck{
  background:rgba(241,242,244,.84);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
}
/* over the dark chapter the header flips to light-on-dark */
.hdr.dark{color:#fff}
.hdr.dark.stuck{background:rgba(6,22,47,.72); border-bottom-color:rgba(255,255,255,.14)}
.hdr.dark .brand-sub,.hdr.dark .nav a,.hdr.dark .lang-btn{color:rgba(255,255,255,.68)}
.hdr.dark .lang-btn.is-active{color:#fff; background:rgba(255,255,255,.12)}
.hdr.dark .burger span{background:#fff}

.hdr-in{
  height:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px}
/* emblem only up here — see the note in index.html */
.brand-emblem{height:34px; width:auto}
.brand-name{font-size:17px; font-weight:600; letter-spacing:-.02em}
.brand-sub{font-family:var(--mono); font-size:11px; color:var(--mute); transition:color .5s var(--e2)}

.nav{display:flex; gap:30px}
.nav a{position:relative; font-size:14px; color:var(--ink-2); padding:2px 0; transition:color .5s var(--e2)}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e);
}
.nav a:hover::after{transform:scaleX(1); transform-origin:left}

.hdr-end{display:flex; align-items:center; gap:18px}
.lang{display:flex; gap:2px}
.lang-btn{
  font-family:var(--mono); font-size:11.5px; color:var(--mute);
  padding:4px 6px; border-radius:4px;
  transition:color .3s var(--e2), background-color .3s var(--e2);
}
.lang-btn.is-active{color:var(--ink); background:rgba(6,22,47,.07)}

.burger{display:none; width:22px; height:12px; position:relative}
.burger span{position:absolute; left:0; right:0; height:1px; background:var(--ink); transition:transform .45s var(--e), background-color .5s var(--e2)}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){bottom:0}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================================================
   TYPE
   ============================================================ */
.hero-h{
  font-size:clamp(42px, 8.4vw, 138px);
  line-height:.93; letter-spacing:-.048em; font-weight:500;
}
.hl{display:block}
/* per-character cells: fixed width so weight can breathe without reflow */
.ch{display:inline-block; text-align:center; will-change:font-variation-settings}

.statement{
  font-size:clamp(26px, 3.5vw, 52px);
  line-height:1.13; letter-spacing:-.034em; font-weight:400; max-width:19ch;
}
.body-lg{font-size:clamp(16px,1.25vw,18px); line-height:1.62; color:var(--ink-2); max-width:40ch; font-weight:300}

.w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.09em}
.w > i{display:inline-block; font-style:inherit}
[data-scrub] .w{overflow:visible}
.js [data-scrub] .w > i{opacity:.14; will-change:opacity}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:calc(var(--hdr-h) + clamp(52px, 8.5vw, 116px))}
.hero-in{padding-bottom:clamp(36px, 4.2vw, 58px)}

.hero-tag{display:flex; align-items:center; gap:11px; margin-bottom:clamp(24px,3.2vw,44px)}
.hero-tag .dot{width:3px; height:3px; border-radius:50%; background:var(--red)}
.clock{font-variant-numeric:tabular-nums; color:var(--ink-2)}
.clock-z{color:var(--faint)}

.hero-h{margin-bottom:clamp(32px,4.4vw,60px)}

/* descriptor under the claim headline, red tick to its left */
.hero-h:has(+ .hero-sub){margin-bottom:clamp(15px,1.9vw,24px)}
.hero-sub{
  display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(30px,4vw,54px);
  font-size:13px; letter-spacing:.15em; color:var(--ink-2);
}
.hero-sub-rule{flex:none; width:clamp(26px,3.4vw,52px); height:1px; background:var(--red)}

.hero-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; padding-top:clamp(20px,2.4vw,30px)}
.hero-p{font-size:clamp(15.5px,1.15vw,17px); line-height:1.62; color:var(--ink-2); max-width:56ch; font-weight:300}

.link-cta{display:inline-flex; align-items:center; gap:11px; position:relative; font-size:14px; font-weight:500; padding-bottom:8px; white-space:nowrap}
.link-cta::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform-origin:right; transition:transform .55s var(--e)}
.link-cta:hover::after{transform:scaleX(0)}
.link-cta-t{position:relative; display:block; overflow:hidden; height:1.35em}
.link-cta-t i{display:block; font-style:normal; transition:transform .55s var(--e)}
.link-cta-t i:last-child{position:absolute; inset:0; transform:translateY(100%)}
.link-cta:hover .link-cta-t i{transform:translateY(-100%)}
.link-cta:hover .link-cta-t i:last-child{transform:translateY(0)}
.link-cta svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .55s var(--e)}
.link-cta:hover svg{transform:translateX(6px)}

.hero-fig{width:100%}
.hero-fig-mask{
  position:relative; overflow:hidden;
  height:clamp(340px, 62vh, 700px); background:var(--paper-2);
  clip-path:inset(0 var(--pad) round 3px); will-change:clip-path;
}
.hero-fig-mask img{
  position:absolute; left:0; right:0; top:-8%;
  width:100%; height:116%; object-fit:cover; object-position:center 52%; will-change:transform;
}
.hero-cap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:13px}
.hero-cap .mono{font-size:10.5px}
.hero-scroll{display:inline-flex; align-items:center; gap:10px; color:var(--faint)}
.hero-scroll .tick{position:relative; display:block; width:34px; height:1px; background:var(--hair); overflow:hidden}
.hero-scroll .tick::after{content:''; position:absolute; inset:0; background:var(--ink); animation:tick 2.4s var(--e2) infinite}
@keyframes tick{0%{transform:translateX(-100%)} 60%{transform:translateX(0)} 100%{transform:translateX(100%)}}

[data-in]{opacity:0; transform:translateY(16px)}
[data-in].shown{opacity:1; transform:none; transition:opacity .9s var(--e), transform 1s var(--e)}
[data-in="2"]{opacity:1; transform:none}
[data-in="2"] .ch{opacity:0; transform:translateY(.42em)}
[data-in="2"].shown .ch{
  opacity:1; transform:none;
  transition:opacity .7s var(--e), transform .85s var(--e);
  transition-delay:calc(var(--ci) * .014s);
}

/* ============================================================
   SPEC
   ============================================================ */
.spec{padding:clamp(44px,5.2vw,74px) 0 clamp(54px,6.6vw,96px)}
.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair-soft); border-block:1px solid var(--hair)}
.spec-item{background:var(--paper); padding:22px 26px 24px; display:flex; flex-direction:column; gap:9px; transition:background-color .5s var(--e2)}
.spec-item:hover{background:var(--paper-2)}
.spec-k{font-size:10.5px}
.spec-v{font-size:15px; letter-spacing:-.01em}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:clamp(76px,9.5vw,158px) 0}
#about,#services,#contact{scroll-margin-top:var(--hdr-h)}
.sec-grid{display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,4.2fr); gap:clamp(26px,3.6vw,58px)}
.sec-label{display:flex; flex-direction:column; gap:5px; position:sticky; top:calc(var(--hdr-h) + 26px); align-self:start}
.sec-label .num{color:var(--faint); font-weight:500; transition:color .6s var(--e2)}
.sec-label .lbl{transition:color .6s var(--e2)}
[data-sec].active .sec-label .num{color:var(--red)}
[data-sec].active .sec-label .lbl{color:var(--ink)}

.about .statement{margin-bottom:clamp(44px,5.2vw,80px)}
.about-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(28px,4vw,64px); align-items:start}
.about-fig .mask{overflow:hidden; border-radius:3px; aspect-ratio:16/10; background:var(--paper-2)}
.about-fig img{width:100%; height:100%; object-fit:cover; object-position:center 62%; transform:scale(1.06); transition:transform 1.5s var(--e)}
.about-fig.is-in img{transform:scale(1)}
.about-fig figcaption{margin-top:12px; font-size:10.5px}

/* ============================================================
   02 — PINNED HORIZONTAL CHAPTER
   ============================================================ */
/* 4 cards (title + 3 services) → 4 screens of travel */
.pin{position:relative; height:440vh; background:var(--ink)}
.pin-stage{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--ink)}

.pin-track{display:flex; height:100%; width:max-content; will-change:transform}

.panel{position:relative; width:100vw; height:100%; overflow:hidden}
.panel-media{position:absolute; inset:0}
.panel-media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.62);
  transform:scale(1.1); will-change:transform;
}
.panel::after{
  content:''; position:absolute; inset:0;
  background:
    /* top scrim keeps the header legible over any photograph */
    linear-gradient(180deg, rgba(6,22,47,.7) 0%, rgba(6,22,47,.05) 26%, rgba(6,22,47,.1) 52%, rgba(6,22,47,.72) 100%),
    linear-gradient(90deg, rgba(6,22,47,.94) 0%, rgba(6,22,47,.6) 46%, rgba(6,22,47,.14) 78%, rgba(6,22,47,.5) 100%);
}

/* oversized ghost numeral, bleeding off the right edge */
.panel-ghost{
  position:absolute; z-index:2; right:-.06em; top:50%;
  transform:translate3d(0,-54%,0);
  font-size:clamp(190px, 30vw, 460px); line-height:.72; font-weight:500; letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.22);
  opacity:0; transition:opacity 1.1s var(--e), transform 1.4s var(--e);
  pointer-events:none; will-change:transform,opacity;
}
.panel.is-live .panel-ghost{opacity:1; transform:translate3d(0,-50%,0)}

.panel-body{
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(66px,10vh,132px);
  color:#fff; will-change:transform;
}
.panel-k{
  display:inline-block; color:rgba(255,255,255,.66); font-size:11px;
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--e) .05s, transform .8s var(--e) .05s;
}
.panel.is-live .panel-k{opacity:1; transform:none}
.panel-rule{
  display:block; height:1.5px; width:0; background:var(--red);
  margin:18px 0 22px; transition:width .95s var(--e) .12s;
}
.panel.is-live .panel-rule{width:clamp(56px,7vw,104px)}

.panel-t{
  font-size:clamp(34px, 5.6vw, 88px); line-height:.98; letter-spacing:-.045em; font-weight:500;
  max-width:13ch; margin-bottom:22px;
}
.panel-t .w > i{transform:translateY(105%); transition:transform 1s var(--e)}
.panel.is-live .panel-t .w > i{transform:none; transition-delay:calc(.14s + var(--wi) * .05s)}

.panel-d{
  font-size:clamp(15px,1.2vw,18px); line-height:1.6; font-weight:300;
  color:rgba(255,255,255,.74); max-width:36ch;
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--e) .3s, transform .9s var(--e) .3s;
}
.panel.is-live .panel-d{opacity:1; transform:none}

/* chapter title card */
.panel-intro .panel-body{bottom:auto; top:50%; transform:translateY(-50%)}
.panel-intro .panel-k{font-size:11.5px; color:rgba(255,255,255,.62); margin-bottom:24px}
.panel-intro .panel-k .num{color:var(--red); font-weight:500}
.panel-lead{
  font-size:clamp(34px, 6.2vw, 96px); line-height:.98; letter-spacing:-.048em; font-weight:500;
  max-width:12ch; margin-bottom:34px;
}
.panel-lead .w > i{transform:translateY(105%); transition:transform 1s var(--e)}
.panel-intro.is-live .panel-lead .w > i{transform:none; transition-delay:calc(var(--wi) * .06s)}
.panel-hint{
  display:inline-flex; align-items:center; gap:11px; color:rgba(255,255,255,.5); font-size:10.5px;
  opacity:0; transition:opacity .8s var(--e) .5s;
}
.panel-intro.is-live .panel-hint{opacity:1}
.panel-hint svg{
  width:26px; height:14px; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
  animation:hintSlide 2.6s var(--e2) infinite;
}
@keyframes hintSlide{0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)}}

.pin-count{
  position:absolute; z-index:4; right:var(--pad); top:calc(var(--hdr-h) + 24px);
  color:rgba(255,255,255,.5); font-size:11px;
  opacity:0; transition:opacity .6s var(--e2);
}
.pin-count.on{opacity:1}
.pin-count b{color:#fff; font-weight:400; font-variant-numeric:tabular-nums}
.pin-count .s{opacity:.4; margin:0 3px}

.pin-bar{position:absolute; z-index:4; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.14)}
.pin-bar i{display:block; height:100%; width:0; background:var(--red)}

/* ============================================================
   03 CONTACT
   ============================================================ */
.contact{padding-bottom:clamp(58px,6.6vw,104px)}
.contact .statement{margin-bottom:clamp(30px,3.6vw,52px)}

.mailto{display:inline-block; position:relative; padding-bottom:10px; margin-bottom:clamp(42px,5vw,74px)}
.mailto::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair)}
.mailto::before{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); z-index:1; transform:scaleX(0); transform-origin:left; transition:transform .8s var(--e)}
.mailto:hover::before{transform:scaleX(1)}
.mailto-t{position:relative; display:block; overflow:hidden; font-size:clamp(22px,3.4vw,52px); line-height:1.16; letter-spacing:-.035em; height:1.16em}
.mailto-t i{display:block; font-style:normal; transition:transform .6s var(--e)}
.mailto-t i:last-child{position:absolute; inset:0; transform:translateY(100%)}
.mailto:hover .mailto-t i{transform:translateY(-100%)}
.mailto:hover .mailto-t i:last-child{transform:translateY(0)}

.det{max-width:640px}
.det-row{display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--hair)}
.det-row dt{font-size:10.5px}
.det-row dd{font-size:16px; margin:0}
.det-row a{position:relative}
.det-row a::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e)}
.det-row a:hover::after{transform:scaleX(1)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{border-top:1px solid var(--hair); padding:30px 0 30px}
/* the full lockup gets its home here, where there is room to read it */
.ftr-logo{height:72px; width:auto; margin-bottom:26px}
.ftr-in{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.ftr .mono{font-size:10.5px}
.to-top{display:inline-flex; align-items:center; gap:8px; color:var(--mute); transition:color .35s var(--e2)}
.to-top:hover{color:var(--ink)}
.to-top svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--e)}
.to-top:hover svg{transform:translateY(-3px)}

/* ============================================================
   REVEAL
   ============================================================ */
[data-rv]{opacity:0; transform:translateY(18px); transition:opacity .85s var(--e), transform .95s var(--e)}
[data-rv].is-in{opacity:1; transform:none}

/* ============================================================
   LEGAL PAGES — terms.html / privacy.html
   ============================================================ */
/* Both language editions sit side by side in the markup and <html lang>,
   written by setLang(), decides which one is shown. Long-form legal prose
   does not belong in the I18N dict. */
html[lang="es"] [data-l="en"],
html[lang="en"] [data-l="es"]{display:none}

/* no hero here, so the section has to clear the fixed header itself */
.legal{padding-top:calc(var(--hdr-h) + clamp(52px,6.5vw,104px))}
.legal .sec-label{flex-wrap:wrap}
.legal .num{color:var(--red); font-weight:500}

.legal-back{display:inline-flex; align-items:center; gap:7px; color:var(--mute); transition:color .35s var(--e2)}
.legal-back:hover{color:var(--ink)}
.legal-back svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--e)}
.legal-back:hover svg{transform:translateX(-3px)}

.legal-doc{max-width:74ch}
.legal-h{font-size:clamp(30px,4.4vw,58px); line-height:1.06; letter-spacing:-.038em; font-weight:400}
.legal-date{display:block; margin-top:14px; color:var(--faint)}
.legal-lead{
  margin-top:clamp(28px,3.2vw,44px); padding-top:clamp(24px,2.8vw,36px);
  border-top:1px solid var(--hair);
  font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink-2); font-weight:300;
}

.legal-doc h2{margin-top:clamp(36px,3.8vw,56px); font-size:15px; font-weight:600; letter-spacing:-.01em}
.legal-doc p{margin-top:13px; font-size:15.5px; line-height:1.72; color:var(--ink-2)}
.legal-doc b{font-weight:600; color:var(--ink)}
.legal-doc a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair); transition:text-decoration-color .35s var(--e2)}
.legal-doc a:hover{text-decoration-color:var(--ink)}
.legal-doc code{font-family:var(--mono); font-size:.88em; background:var(--paper-2); padding:2px 6px; border-radius:3px}
.nowrap{white-space:nowrap}

.legal-list{margin-top:13px; display:flex; flex-direction:column; gap:9px}
.legal-list li{position:relative; padding-left:22px; font-size:15.5px; line-height:1.65; color:var(--ink-2)}
.legal-list li::before{content:''; position:absolute; left:2px; top:.78em; width:7px; height:1px; background:var(--red)}

.legal-det{margin-top:20px; border-top:1px solid var(--hair)}
.legal-det > div{display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--hair-soft)}
.legal-det dt{font-size:10.5px}
.legal-det dd{margin:0; font-size:15px; color:var(--ink-2)}

/* stacked emails in the home contact list */
.det-mails{display:flex; flex-direction:column; gap:6px; align-items:flex-start}

.ftr-legal{display:flex; gap:22px; flex-wrap:wrap}
.ftr-legal a{color:var(--mute); transition:color .35s var(--e2)}
.ftr-legal a:hover,.ftr-legal a.is-current{color:var(--ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){ .rail{display:none} }

@media (max-width:1100px){
  .sec-grid{grid-template-columns:1fr; gap:26px}
  .sec-label{position:static; flex-direction:row; gap:14px}
  .about-cols{grid-template-columns:1fr; gap:36px}
}

/* the pinned chapter unrolls into a normal stack on small screens */
@media (max-width:860px),(hover:none){
  .pin{height:auto}
  .pin-stage{position:static; height:auto; overflow:visible}
  .pin-track{flex-direction:column; width:100%; transform:none!important}
  .panel{width:100%; height:auto; aspect-ratio:4/5; border-bottom:1px solid rgba(255,255,255,.1)}
  .panel::after{background:linear-gradient(180deg, rgba(6,22,47,.4) 0%, rgba(6,22,47,.3) 42%, rgba(6,22,47,.92) 100%)}
  .panel-media img{transform:none!important}
  .panel-body{bottom:clamp(28px,6vw,48px)}
  .panel-ghost{font-size:clamp(150px,44vw,300px); right:-.04em}
  .pin-bar,.pin-count{display:none}

  /* stacked: the title card is a header block, not a full photo card */
  .panel-intro{aspect-ratio:auto; min-height:52svh; display:flex; align-items:center}
  .panel-intro .panel-body{position:relative; top:auto; transform:none; padding-block:clamp(60px,14vw,90px)}
  .panel-lead{font-size:clamp(32px,10vw,54px); max-width:none}
  .panel-hint{display:none}
}

@media (max-width:860px){
  :root{--hdr-h:60px}
  body{font-size:16px}
  .burger{display:block}

  .nav{
    position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:center;
    align-items:flex-start; gap:2px; padding:0 var(--pad); background:var(--paper);
    clip-path:inset(0 0 100% 0); transition:clip-path .75s var(--e); pointer-events:none;
  }
  .nav a{font-size:clamp(30px,8.4vw,44px); letter-spacing:-.035em; padding:10px 0; opacity:0; transform:translateY(14px); transition:opacity .5s var(--e), transform .6s var(--e)}
  .nav a::after{display:none}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{clip-path:inset(0 0 0 0); pointer-events:auto}
  body.menu-open .nav a{opacity:1; transform:none; color:var(--ink)}
  body.menu-open .nav a:nth-child(1){transition-delay:.14s}
  body.menu-open .nav a:nth-child(2){transition-delay:.2s}
  body.menu-open .nav a:nth-child(3){transition-delay:.26s}
  body.menu-open .hdr.dark{color:var(--ink)}
  body.menu-open .hdr.dark .burger span{background:var(--ink)}

  .hero-h{font-size:clamp(38px,11vw,60px); line-height:1}
  .hero-foot{grid-template-columns:1fr; gap:24px; align-items:start}
  .hero-fig-mask{height:clamp(300px,54vh,460px)}
  .hero-scroll{display:none}
  .spec-grid{grid-template-columns:1fr 1fr}
  .det-row{grid-template-columns:1fr; gap:4px}
  .legal-det > div{grid-template-columns:1fr; gap:4px}
  .ftr-in{flex-direction:column; align-items:flex-start; gap:8px}
}

@media (max-width:480px){
  .spec-grid{grid-template-columns:1fr}
  .hero-sub{gap:10px; letter-spacing:.1em}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  [data-rv],[data-in]{opacity:1!important; transform:none!important}
  .ch{opacity:1!important; transform:none!important}
  .w > i{opacity:1!important}
  .rule::before{transform:scaleX(1)!important}
  .hero-fig-mask{clip-path:inset(0 var(--pad) round 3px)!important}
  .pin{height:auto}
  .pin-stage{position:static; height:auto; overflow:visible}
  .pin-track{flex-direction:column; width:100%; transform:none!important}
  .panel{width:100%; height:auto; aspect-ratio:4/5}
  .panel-intro{aspect-ratio:auto; min-height:50svh; display:flex; align-items:center}
  .panel-intro .panel-body{position:relative; top:auto; transform:none; padding-block:70px}
  .panel-media img{transform:none!important}
  .panel-ghost,.panel-k,.panel-d{opacity:1!important; transform:none!important}
  .panel-rule{width:clamp(56px,7vw,104px)!important}
  .pin-bar,.pin-count{display:none}
}