/* ============================================================
   Europe Coffee Roasters
   Direction: industrial editorial. The page is a roast log —
   colour runs green (raw) to copper (first crack) to deep brown (drop).
   ============================================================ */

:root{
  /* Ground */
  --void:      #0B0906;
  --char:      #100C09;
  --ember:     #17120D;
  --raised:    #1E1710;

  /* Ink */
  --cream:     #EDE6DC;
  --ash:       #A79C91;
  --ash-dim:   #8A8076;

  /* Roast gradient — these carry meaning, not decoration */
  --green:     #6E7F5C;   /* unroasted — gradient only */
  --green-ink: #7A8C66;   /* same hue, legible as text */
  --copper:    #C1652F;   /* first crack */
  --brass:     #E0A867;   /* highlight */
  --scorch:    #7E3B1C;   /* drop */

  --line:      rgba(237,230,220,.10);
  --line-soft: rgba(237,230,220,.06);

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-1:  .8125rem;
  --s0:   1rem;
  --s1:   1.0625rem;
  --s2:   clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  --s3:   clamp(1.9rem, 1.3rem + 2.6vw, 3.15rem);
  --s4:   clamp(2.6rem, 1.2rem + 6.4vw, 5.5rem);

  --gap:   clamp(28px, 4vw, 56px);
  --pad-y: clamp(72px, 10vw, 148px);
  --shell: 1180px;
  --ease:  cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }

body{
  position:relative;   /* contains the ambient glow so it cannot widen the document */
  margin:0;
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  font-size:var(--s0);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.015em }
p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }
img,svg{ max-width:100% }
a{ color:inherit }

::selection{ background:var(--copper); color:#150E08 }

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

.visually-hidden{
  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:fixed; left:-9999px; top:0; z-index:200;
  background:var(--copper); color:#150E08; padding:12px 18px;
  font:500 var(--s-1)/1 var(--mono); text-decoration:none;
}
.skip:focus{ left:12px; top:12px }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 48px);
}

/* Paper grain — texture without an image request */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient warmth behind the fold */
body::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-30vh; left:50%; transform:translateX(-50%);
  width:min(1400px, 150vw); height:min(1000px, 110vh);
  background:radial-gradient(50% 50% at 50% 50%, rgba(193,101,47,.16), transparent 70%);
}

/* ---------- Type primitives ---------- */

.eyebrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 24px;
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-dim);
}
.eyebrow__time{ color:var(--copper); font-weight:500 }
.eyebrow__rule{ width:34px; height:1px; background:var(--line); flex:none }

.section__title{
  font-family:var(--display);
  font-size:var(--s3);
  line-height:1.06;
  max-width:19ch;
  margin:0 0 22px;
}
.section__lead{
  color:var(--ash);
  font-size:var(--s1);
  max-width:56ch;
  line-height:1.7;
}

.note{
  margin-top:28px;
  font-size:var(--s-1);
  color:var(--ash-dim);
}
.note a{ color:var(--brass); text-underline-offset:3px }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px;
  background:var(--copper);
  color:#140D07;
  font:500 .8125rem/1 var(--mono);
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--copper); border-radius:2px;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--brass); border-color:var(--brass); transform:translateY(-1px) }
.btn--sm{ padding:11px 18px; font-size:.6875rem }
.btn--ghost{
  background:transparent; color:var(--cream);
  border-color:var(--line);
}
.btn--ghost:hover{ background:transparent; border-color:var(--copper); color:var(--brass) }
.btn--full{ width:100%; padding:17px 26px }

.link-arrow{
  font:400 .8125rem/1 var(--mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ash); text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow:hover{ color:var(--brass); border-color:var(--brass) }
.link-arrow span{ display:inline-block; transition:transform .25s var(--ease) }
.link-arrow:hover span{ transform:translateX(4px) }

/* ---------- Nav ---------- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,9,6,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:76px;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--cream) }
.brand__mark{ width:26px; height:26px; color:var(--copper); flex:none }
.brand__text{ display:flex; flex-direction:column; line-height:1.15 }
.brand__name{ font-family:var(--display); font-size:1.0625rem; letter-spacing:.01em }
.brand__sub{
  font:400 .625rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim);
  margin-top:4px;
}

.nav__links{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 30px) }
.nav__links a:not(.btn){
  font:400 .8125rem/1 var(--body);
  color:var(--ash); text-decoration:none;
  transition:color .2s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--cream) }

.nav__toggle{
  display:none; align-items:center; gap:10px;
  background:none; border:1px solid var(--line); border-radius:2px;
  color:var(--cream); padding:9px 14px; cursor:pointer;
  font:400 .6875rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.nav__toggle-bars{ display:flex; flex-direction:column; gap:4px; width:14px }
.nav__toggle-bars i{ height:1px; background:currentColor; transition:transform .3s var(--ease), opacity .3s var(--ease) }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{ transform:translateY(2.5px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{ transform:translateY(-2.5px) rotate(-45deg) }

/* ---------- Roast log rail (signature element) ---------- */

.rail{
  position:fixed; z-index:60;
  left:clamp(18px, 2.4vw, 40px);
  top:50%; transform:translateY(-50%);
  display:none;
  width:132px;
  opacity:0; transition:opacity .6s var(--ease);
}
.rail.is-on{ opacity:1 }

.rail__readout{
  display:flex; align-items:baseline; gap:3px; flex-wrap:wrap;
  margin-bottom:18px;
  font-family:var(--mono);
}
.rail__temp{ font-size:1.5rem; color:var(--copper); font-weight:500; letter-spacing:-.02em }
.rail__unit{ font-size:.75rem; color:var(--copper) }
.rail__clock{
  width:100%; margin-top:2px;
  font-size:.625rem; letter-spacing:.18em; color:var(--ash-dim);
}

.rail__track{
  position:absolute; left:3px; top:78px; bottom:0;
  width:1px; background:var(--line);
}
.rail__fill{
  position:absolute; left:0; top:0; width:1px; height:0;
  background:linear-gradient(180deg, var(--green), #9A7A46 40%, var(--copper) 78%, var(--scorch));
}

.rail__marks{
  list-style:none; margin:0; padding:0 0 0 20px;
  display:flex; flex-direction:column; gap:clamp(18px, 3.4vh, 34px);
}
.rail__mark{
  position:relative;
  font-family:var(--mono);
  color:var(--ash-dim);
  transition:color .35s var(--ease);
}
.rail__mark::before{
  content:""; position:absolute; left:-20px; top:7px;
  width:7px; height:1px; background:var(--line);
  transition:background .35s var(--ease), width .35s var(--ease);
}
.rail__mark b{ display:block; font-size:.6875rem; font-weight:500; letter-spacing:.06em }
.rail__mark span{
  display:block; font-size:.5625rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55; margin-top:1px;
}
.rail__mark.is-active{ color:var(--brass) }
.rail__mark.is-active::before{ background:var(--copper); width:13px }

/* Mobile stand-in for the rail */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:90;
  background:transparent;
}
.scrollbar__fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--green), var(--copper) 75%, var(--scorch));
}

/* ---------- Hero ---------- */

.hero{
  position:relative; z-index:2;
  padding-top:clamp(130px, 20vh, 210px);
  padding-bottom:clamp(70px, 9vw, 120px);
}
.hero__title{
  font-family:var(--display);
  font-size:var(--s4);
  line-height:.98;
  letter-spacing:-.03em;
  margin:0 0 30px;
}
.hero__title em{
  font-style:italic;
  color:var(--brass);
}
.hero__lead{
  color:var(--ash);
  font-size:clamp(1.0625rem, .95rem + .45vw, 1.25rem);
  line-height:1.65;
  max-width:52ch;
  margin-bottom:38px;
}
.hero__actions{
  display:flex; align-items:center; gap:clamp(20px, 3vw, 34px);
  flex-wrap:wrap;
  margin-bottom:clamp(56px, 8vw, 96px);
}

.stats{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  margin:0;
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.stat{ background:var(--void); padding:26px 22px 26px 0 }
.stat:not(:first-child){ padding-left:22px }
.stat__k{
  font-family:var(--display);
  font-size:clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  line-height:1;
  color:var(--cream);
}
.stat__v{
  margin:10px 0 0;
  font:400 .6875rem/1.4 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ash-dim);
}

/* ---------- Sections ---------- */

.section{
  position:relative; z-index:2;
  padding-block:var(--pad-y);
  border-top:1px solid var(--line-soft);
}
.section--alt{ background:var(--char) }
.section--contact{ background:var(--ember) }
.section__head{ margin-bottom:clamp(44px, 6vw, 76px) }
.section__head .btn{ margin-top:30px }

/* ---------- Cards ---------- */

.cards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(275px, 1fr));
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.card{
  position:relative;
  background:var(--void);
  padding:clamp(30px, 3.4vw, 46px);
  transition:background .4s var(--ease);
}
.section--alt .card{ background:var(--char) }
.card:hover{ background:var(--ember) }
.card__index{
  position:absolute; top:clamp(30px,3.4vw,46px); right:clamp(30px,3.4vw,46px);
  font:400 .6875rem/1 var(--mono); letter-spacing:.18em;
  color:var(--copper);
}
.card__title{
  font-family:var(--display);
  font-size:var(--s2);
  margin:0 0 16px;
  padding-right:34px;
}
.card p{ color:var(--ash); font-size:.9375rem; line-height:1.7 }
.card__list{
  list-style:none; margin:22px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:9px;
}
.card__list li{
  font:400 .75rem/1.4 var(--mono);
  letter-spacing:.05em; color:var(--ash-dim);
  padding-left:16px; position:relative;
}
.card__list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:1px; background:var(--copper);
}
.card--quiet .card__title{ padding-right:0 }

/* ---------- Origins table ---------- */

.table-wrap{ overflow-x:auto; margin-inline:calc(clamp(20px,5vw,48px) * -1); padding-inline:clamp(20px,5vw,48px) }
.origins{
  width:100%; min-width:720px;
  border-collapse:collapse;
  text-align:left;
}
.origins th, .origins td{
  padding:20px 20px 20px 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.origins thead th{
  font:400 .625rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-dim);
  padding-bottom:14px;
  border-bottom-color:var(--line);
}
.origins tbody th{ font-weight:400; padding-right:34px }
.origins tbody th b{
  display:block; font-family:var(--display); font-size:1.1875rem;
  font-weight:400; letter-spacing:0;
}
.origins tbody th span{
  display:block; margin-top:4px;
  font:400 .6875rem/1.3 var(--mono); letter-spacing:.1em;
  color:var(--ash-dim);
}
.origins td{ color:var(--ash); font-size:.9375rem }
.origins .num{ font-family:var(--mono); font-size:.8125rem; letter-spacing:.02em }
.origins tbody tr{ transition:background .3s var(--ease) }
.origins tbody tr:hover{ background:rgba(237,230,220,.02) }
.avail{ font-variant-numeric:tabular-nums }
.avail--yes{ color:var(--green-ink) }

/* ---------- Roast curve ---------- */

.curve{
  margin:0 0 clamp(56px, 7vw, 90px);
  padding:clamp(20px, 3vw, 38px) clamp(12px, 2vw, 26px) clamp(16px, 2vw, 24px);
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(193,101,47,.045), transparent 60%);
}
.curve__scroll{ overflow-x:auto; overflow-y:hidden }
.curve__svg{ display:block; width:100%; height:auto; overflow:visible }
.curve__grid line{ stroke:var(--line-soft); stroke-width:1 }
.curve__ylabel text, .curve__xlabel text{
  font-family:var(--mono); font-size:10px; fill:var(--ash-dim); letter-spacing:.1em;
}
.curve__ylabel text{ text-anchor:end }
.curve__line{
  fill:none;
  stroke:url(#roastGrad);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
}
.curve.is-in .curve__line{ animation:draw 2.4s var(--ease) forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.curve__events circle{ fill:var(--void); stroke:var(--ash-dim); stroke-width:1.5 }
.curve__events line{ stroke:var(--line); stroke-width:1 }
.curve__events text{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  fill:var(--ash-dim); text-transform:uppercase;
}
.curve__events .ev{ opacity:0 }
.curve.is-in .curve__events .ev{ animation:fadeUp .7s var(--ease) forwards }
.curve.is-in .ev:nth-child(1){ animation-delay:.35s }
.curve.is-in .ev:nth-child(2){ animation-delay:.85s }
.curve.is-in .ev:nth-child(3){ animation-delay:1.3s }
.curve.is-in .ev:nth-child(4){ animation-delay:1.85s }
.curve.is-in .ev:nth-child(5){ animation-delay:2.3s }
.ev--key circle{ stroke:var(--copper); stroke-width:2 }
.ev--key text{ fill:var(--brass) }
@keyframes fadeUp{ from{ opacity:0 } to{ opacity:1 } }

.curve figcaption{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line-soft);
  font:400 .6875rem/1.6 var(--mono);
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ash-dim);
}

/* ---------- Process chain ---------- */

.chain{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  counter-reset:step;
}
.chain__step{
  background:var(--void);
  padding:clamp(26px, 3vw, 38px);
  transition:background .4s var(--ease);
}
.chain__step:hover{ background:var(--char) }
.chain__n{
  display:block; margin-bottom:20px;
  font:500 .6875rem/1 var(--mono); letter-spacing:.2em;
  color:var(--copper);
}
.chain__icon{
  display:block; width:38px; height:38px; margin-bottom:20px;
  fill:none; stroke:var(--ash); stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s var(--ease);
}
.chain__step:hover .chain__icon{ stroke:var(--brass) }
.chain__step h3{ font-family:var(--display); font-size:1.25rem; margin:0 0 10px }
.chain__step p{ color:var(--ash); font-size:.875rem; line-height:1.65 }

@media (min-width:620px){ .chain{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .chain{ grid-template-columns:repeat(3,1fr) } }

/* ---------- Split layouts ---------- */

.split{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:clamp(48px, 6vw, 96px) }
  .split .section__head{ margin-bottom:0; position:sticky; top:110px }
  .split--contact .section__head{ position:static }
}

.specs{ margin:0; border-top:1px solid var(--line) }
.spec{
  display:flex; justify-content:space-between; gap:24px;
  padding:15px 0;
  border-bottom:1px solid var(--line-soft);
}
.spec dt{
  font:400 .75rem/1.5 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ash-dim); flex:none; max-width:45%;
}
.spec dd{ margin:0; font-size:.9375rem; text-align:right; color:var(--cream) }

/* ---------- FAQ ---------- */

.faq{ border-top:1px solid var(--line) }
.faq__item{ border-bottom:1px solid var(--line-soft) }
.faq__item h3{ margin:0 }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:none; border:0; padding:24px 0;
  color:var(--cream); text-align:left; cursor:pointer;
  font-family:var(--display); font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem); font-weight:400;
  line-height:1.35;
  transition:color .25s var(--ease);
}
.faq__q:hover{ color:var(--brass) }
.faq__icon{
  position:relative; flex:none; width:14px; height:14px;
}
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; left:0; top:6.5px;
  width:14px; height:1px; background:var(--copper);
  transition:transform .35s var(--ease);
}
.faq__icon::after{ transform:rotate(90deg) }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(0deg) }
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq__a > p{ overflow:hidden; margin:0; color:var(--ash); font-size:.9375rem; max-width:68ch }
.faq__item.is-open .faq__a{ grid-template-rows:1fr }
.faq__item.is-open .faq__a > p{ padding-bottom:26px }

/* ---------- Contact ---------- */

.contact-list{
  list-style:none; margin:38px 0 0; padding:0;
  border-top:1px solid var(--line);
}
.contact-list li{
  display:flex; gap:20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  font-size:.9375rem; color:var(--cream);
}
.contact-list span{
  flex:none; width:88px;
  font:400 .6875rem/1.6 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim);
}
.contact-list a{ color:var(--cream); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s var(--ease), border-color .2s var(--ease) }
.contact-list a:hover{ color:var(--brass); border-color:var(--brass) }

.form{
  display:grid; gap:20px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  padding:clamp(26px, 3.2vw, 42px);
  border:1px solid var(--line-soft);
  background:var(--char);
}
.field{ display:flex; flex-direction:column; gap:8px }
.field--wide, .form > .btn, .form__status, .form__fine{ grid-column:1 / -1 }

.field label{
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash-dim);
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--void);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--cream);
  font-family:var(--body); font-size:.9375rem;
  padding:13px 14px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.6 }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A79C91' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}
.field select option{ background:var(--char); color:var(--cream) }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--copper) }
.field input::placeholder, .field textarea::placeholder{ color:var(--ash-dim) }

.field__err{
  margin:0; min-height:0;
  font:400 .6875rem/1.4 var(--mono); letter-spacing:.06em;
  color:#D8724F;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#D8724F }

.form__status{
  margin:0; font:400 .8125rem/1.5 var(--mono); letter-spacing:.05em;
  color:var(--ash);
}
.form__status.is-ok{ color:var(--green-ink) }
.form__status.is-bad{ color:#D8724F }
.form__fine{ margin:0; font-size:.75rem; color:var(--ash-dim) }

/* ---------- Footer ---------- */

.footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line-soft);
  padding-top:clamp(56px, 6vw, 84px);
  background:var(--void);
}
.footer__inner{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  padding-bottom:clamp(44px, 5vw, 64px);
}
.footer__name{
  display:block; font-family:var(--display); font-size:1.3125rem; margin-bottom:14px;
}
.footer__brand p{ color:var(--ash-dim); font-size:.875rem; max-width:36ch }
.footer__h{
  display:block; margin-bottom:18px;
  font:400 .625rem/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--copper);
}
.footer__nav{ display:flex; flex-direction:column; gap:11px; align-items:flex-start }
.footer__nav a{ font-size:.875rem; color:var(--ash); text-decoration:none; transition:color .2s var(--ease) }
.footer__nav a:hover{ color:var(--cream) }
.footer__meta p{ font:400 .75rem/1.9 var(--mono); color:var(--ash-dim); letter-spacing:.04em }
.footer__meta a{ color:var(--ash); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s var(--ease), border-color .2s var(--ease) }
.footer__meta a:hover{ color:var(--brass); border-color:var(--brass) }

.footer__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:22px;
  border-top:1px solid var(--line-soft);
}
.footer__base p{
  margin:0; font:400 .6875rem/1 var(--mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ash-dim);
}
.footer__log{ color:var(--copper) !important }

/* ---------- Reveal ---------- */

.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }

/* ---------- Responsive ---------- */

@media (min-width:1360px){
  .rail{ display:block }
}

@media (max-width:860px){
  .nav__toggle{ display:inline-flex }
  .nav__links{
    position:fixed; inset:76px 0 auto;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,9,6,.97);
    backdrop-filter:blur(16px);
    border-block:1px solid var(--line-soft);
    padding:8px clamp(20px,5vw,48px) 26px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto }
  .nav__links a:not(.btn){
    padding:16px 0; border-bottom:1px solid var(--line-soft);
    font-size:1.0625rem; color:var(--cream);
  }
  .nav__links .btn{ margin-top:22px; padding:15px 26px; font-size:.75rem }
  .nav.is-open{ background:rgba(11,9,6,.97); border-bottom-color:transparent }
}

@media (max-width:640px){
  .stat{ padding:22px 0 }
  .stat:not(:first-child){ padding-left:0 }
  .stats{ grid-template-columns:repeat(2,1fr); gap:1px }
  .stat:nth-child(odd){ padding-right:18px }
  .stat:nth-child(even){ padding-left:18px }
  .form{ grid-template-columns:1fr }
  .spec{ flex-direction:column; gap:5px }
  .spec dd{ text-align:left }
  .spec dt{ max-width:none }
  .contact-list li{ flex-direction:column; gap:5px }
  .curve{ padding-inline:10px }
  .curve__svg{ min-width:600px }
  .curve__scroll{ padding-block:4px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .curve__line{ stroke-dashoffset:0 }
  .curve__events .ev{ opacity:1 }
}