/* ==========================================================================
   CTS Process — "The Mill"
   --------------------------------------------------------------------------
   Ground: SOLID WHITE. Sectioning is hairlines and space only; the single
   pale grey (#f4f5f6) is the ATEX zone key, a small functional block.
   base.css owns reset, wrap, sections, header/nav/mega mechanics, buttons,
   footer skeleton, reveals, preloader shell and the hero headline contract.
   ========================================================================== */

:root{
  /* ---------- palette ---------- */
  --ink:       #14171a;
  --ink-2:     #1b1f23;
  --ink-3:     #22272c;
  --white:     #ffffff;
  --steel:     #76808a;
  --steel-t:   #6b757f;   /* steel, a half-step darker for small text (AA) */
  --malt:      #b7791f;
  --malt-ink:  #8a5710;   /* malt for small text — 6:1 on white */
  --malt-d:    #8f5c10;   /* solid buttons — 5.6:1 against white */
  --malt-lt:   #d9a13f;
  --grey:      #f4f5f6;

  --line:      rgba(20,23,26,.12);
  --line-2:    rgba(20,23,26,.075);
  --text:      #14171a;
  --muted:     #6b757f;
  --ink-text:  #14171a;
  --ink-mute:  #5d666f;
  --surface:   #ffffff;
  --surface-2: #f4f5f6;

  /* ---------- base.css contract ---------- */
  --accent:     var(--malt-ink);
  --accent-lit: var(--malt-lt);
  --accent-2:   var(--malt-ink);

  /* ---------- type ---------- */
  --font-display: "Bree Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Bai Jamjuree", system-ui, -apple-system, sans-serif;
  --font-mono:    "Lekton", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap-max: 1240px;
  --pad:      clamp(1.15rem, 4vw, 2.5rem);
  --radius:   3px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* ---------- page ---------- */
html{ scroll-padding-top:92px; }
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  font-weight:400;
  line-height:1.66;
}
::selection{ background:var(--malt); color:#fff; }
:focus-visible{ outline:2px solid var(--malt); outline-offset:3px; }
.flow :focus-visible, .atex :focus-visible{ outline-color:var(--malt-lt); }
.con :focus-visible{ outline-color:var(--ink); }

.sect__num{
  color:var(--malt-ink);
  font-size:.64rem; letter-spacing:.22em; font-weight:500;
  margin-bottom:1.1rem;
}
.sect__h2{ font-weight:400; letter-spacing:-.012em; line-height:1.07; text-wrap:balance; }
.sect__lead{ color:var(--ink-mute); font-size:.98rem; line-height:1.72; max-width:46ch; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:.5rem; top:.5rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.72rem 1rem; background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* ==========================================================================
   PRELOADER — the mill motif
   ========================================================================== */
.pre{ background:var(--white); color:var(--ink); }
.pre__mark{ width:154px; margin-bottom:.6rem; }
.pre__mark svg{ width:100%; height:auto; display:block; }
.pre__hop{ stroke:var(--ink); stroke-width:1.6; }
.pre__roll{ stroke:var(--ink); stroke-width:1.6; }
.pre__grain{ fill:var(--malt); animation:preGrain 1.7s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes preGrain{
  0%   { transform:translateY(-5px); opacity:.15; }
  30%  { opacity:1; }
  72%  { transform:translateY(17px); opacity:0; }
  100% { transform:translateY(17px); opacity:0; }
}
.pre__meta{ color:var(--steel-t); font-size:.66rem; letter-spacing:.18em; }
.pre__pct{ color:var(--malt-ink); }
.pre__bar{ background:var(--line); height:2px; }
.pre__bar i{ background:var(--malt); }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.hdr{
  background:var(--white);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
  }
}
/* desktop header + mega. Everything here is scoped to >=1024px so base.css
   keeps full control of the mobile overlay (it must stay a full-screen
   accordion, not a hover panel). */
@media (min-width:1024px){
  .hdr__in{ min-height:82px; gap:1rem; }
  .brand img{ width:168px; height:auto; }

  .nav{ display:flex; align-items:center; }
  .nav__list{ gap:0; }
  .nav__link{
    font-size:.795rem; font-weight:500; letter-spacing:.002em;
    padding:.5rem .52rem; color:var(--ink); border-radius:2px;
  }
  .nav__link:hover{ color:var(--malt-ink); background:rgba(183,121,31,.06); }
  .nav__item.is-open > .nav__link{ color:var(--malt-ink); }
  .nav__chev{ width:8px; height:5.5px; opacity:.45; }
  .nav__tel .nav__link{
    font-family:var(--font-mono); font-size:.76rem; letter-spacing:.01em;
    color:var(--steel-t); margin-left:.5rem;
  }
  .nav__cta .nav__link{
    background:var(--ink); color:#fff;
    padding:.6rem 1rem; margin-left:.35rem;
    font-size:.755rem; letter-spacing:.03em;
  }
  .nav__cta .nav__link:hover{ background:var(--malt-d); color:#fff; }
  .nav__foot{ display:none; }

  /* ---------- mega ---------- */
  .mega{
    background:var(--white);
    border:1px solid var(--line);
    box-shadow:0 28px 60px -26px rgba(20,23,26,.35);
    border-radius:2px;
    padding:1.5rem 1.6rem 1.6rem;
  }
  .mega__h{
    color:var(--steel-t);
    font-size:.6rem; letter-spacing:.19em;
    border-bottom:1px solid var(--line);
  }
  .mega a{ color:var(--ink); font-size:.83rem; padding:.36rem 0; }
  .mega a:hover{ color:var(--malt-ink); }
  .mega__feat{ border-left:1px solid var(--line); padding-left:1.4rem; }
  .mega__note{
    font-size:.82rem; line-height:1.6; color:var(--ink-mute); margin:.7rem 0 1rem;
  }
  .mega__all{
    display:inline-block; font-family:var(--font-mono); font-size:.7rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--malt-ink);
  }
  .mega__all:hover{ color:var(--ink); }
}
@media (min-width:1024px) and (max-width:1179px){ .nav__tel{ display:none; } }

/* mobile: the overlay and its accordion are base.css's, only the palette changes */
@media (max-width:1023px){
  .hdr__in{ min-height:70px; }
  .brand img{ width:150px; height:auto; }
  .nav{ background:var(--white); }
  .nav__close{ border-color:var(--line); }
  .nav__headlabel{ color:var(--steel-t); }
  .nav__item{ border-bottom:1px solid var(--line); }
  /* base.css colours the mega for a dark panel — the overlay is white */
  .mega a{ color:var(--ink); }
  .mega a:hover{ color:var(--malt-ink); }
  .mega__h{ color:var(--steel-t); }
  .mega__note{ color:var(--ink-mute); }
  .mega__all{ color:var(--malt-ink); }
  .nav__tel{ border-bottom:0; margin-top:.4rem; }
  .nav__tel .nav__link{ font-family:var(--font-mono); font-size:.92rem; color:var(--steel-t); }
  .nav__cta{ border-bottom:0; margin-top:.7rem; }
  .nav__cta .nav__link{
    justify-content:center; padding:1rem; font-size:.95rem;
    background:var(--ink); color:#fff;
  }
}

/* ==========================================================================
   HERO — the mill in section
   ========================================================================== */
.hero{
  padding-bottom:0;
  background:var(--white);
  overflow:hidden;
}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
  padding-block:clamp(2.2rem,4.5vw,3.6rem) clamp(1.8rem,3.5vw,2.8rem);
}
.hero__copy{ min-width:0; }
.hero__mill, .hero__copy, .prod__aside, .atex__fig, .atex__body,
.works__body, .con__grid > *{ min-width:0; }

.hero__kick{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel-t);
  margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
}
.hero__dot{
  width:6px; height:6px; border-radius:50%; background:var(--malt); flex-shrink:0;
}

.hero__h1{
  font-size:var(--h1-size, clamp(2.15rem, 5.2vw, 3.95rem));
  font-weight:400;
  letter-spacing:-.016em;
  line-height:1.02;
  margin-bottom:clamp(1.2rem,2.6vw,1.8rem);
}
.hero__h1 .line{ overflow:visible; }

.hero__lead{
  font-size:clamp(.98rem,1.5vw,1.1rem);
  line-height:1.68; color:var(--ink-mute);
  max-width:46ch; margin-bottom:clamp(1.5rem,3vw,2rem);
}

.hero__acts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.7rem 1rem; margin-bottom:clamp(1.9rem,3.6vw,2.6rem);
}
.hero__acts .btn{ font-size:.84rem; padding:.82rem 1.25rem; }
.btn--solid{ background:var(--malt-d); color:#fff; }
.btn--solid:hover{ background:#7a4d0c; transform:translateY(-2px); }
.btn--ghost{
  border:1px solid var(--line); color:var(--ink);
  background:transparent;
}
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); background:rgba(20,23,26,.03); }
.atex .btn--ghost{ color:#fff; }
.atex .btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--ink); }

.hero__facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem; padding-top:1.15rem; border-top:1px solid var(--line);
  max-width:40rem;
}
.hero__facts li{ min-width:0; }
.hero__facts b{
  display:block; font-family:var(--font-mono); font-size:.72rem;
  font-weight:700; letter-spacing:.05em; color:var(--ink);
  margin-bottom:.28rem;
}
.hero__facts span{
  display:block; font-size:.775rem; line-height:1.5; color:var(--steel-t);
}

.hero__mill{
  margin:0; justify-self:end; width:100%;
  max-width:clamp(280px,30vw,400px);
}
.mill{ display:block; width:100%; height:auto; }
.hero__figcap{
  margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.655rem; line-height:1.65;
  letter-spacing:.02em; color:var(--steel-t); max-width:40ch;
}

/* ---------- the drawing ---------- */
.mill .ln { fill:none; stroke:var(--ink); stroke-width:1.4; }
.mill .ln2{ fill:none; stroke:var(--ink); stroke-width:1.7; }
.mill .thin{ fill:none; stroke:var(--ink); stroke-width:.8; opacity:.3; }
.mill .cl {
  fill:none; stroke:var(--ink); stroke-width:.8; opacity:.16;
  stroke-dasharray:15 4 2 4;
}
.mill .grainline{ fill:none; stroke:#a86a15; stroke-width:1.1; opacity:.55; }
.mill .tick{
  fill:none; stroke:var(--malt); stroke-width:13;
  stroke-dasharray:1.5 8.2; opacity:.3;
}
.mill .dot{ fill:var(--ink); }
.mill .rot{ fill:none; stroke:var(--malt); stroke-width:1.05; opacity:.5; }
.mill .dimt{
  font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.13em; fill:var(--malt-ink);
}
.mill .dimt--sm{ font-size:8px; letter-spacing:.2em; fill:var(--steel-t); }
.mill .lead{ fill:none; stroke:var(--malt); stroke-width:.9; }
.mill .curtain ellipse{ fill:var(--malt); opacity:.3; }
.mill .fall ellipse{ fill:var(--malt); }
.mill .gristfall ellipse{ fill:var(--malt); opacity:.45; }

/* one fall of grain, after the preloader releases the page */
@keyframes mFall{
  0%   { transform:translateY(-140px); opacity:0; }
  16%  { opacity:1; }
  68%  { opacity:1; }
  100% { transform:translateY(238px); opacity:0; }
}
body.loaded .mill .fall{
  animation:mFall .9s cubic-bezier(.38,.06,.32,1) .18s both;
}

/* ---------- the flow line under the hero ---------- */
.rail{
  border-top:1px solid var(--line);
  margin-top:clamp(2rem,3.6vw,3rem);
}
.rail__in{
  display:flex; align-items:center; gap:1rem;
  padding-block:.78rem;
}
.rail__lbl{
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--steel-t);
  white-space:nowrap;
}
.rail__dots{
  display:flex; align-items:center; justify-content:space-between;
  flex:1; gap:clamp(.4rem,4vw,4rem); min-width:0;
}
.rail__dots i{
  display:block; width:5px; height:5px; border-radius:50%;
  background:var(--malt); flex-shrink:0;
}
.rail__dots i:nth-child(1){ opacity:.2; }
.rail__dots i:nth-child(2){ opacity:.36; }
.rail__dots i:nth-child(3){ opacity:.52; }
.rail__dots i:nth-child(4){ opacity:.68; }
.rail__dots i:nth-child(5){ opacity:.84; }
.rail__dots i:nth-child(6){ opacity:1; }

/* ==========================================================================
   01 — THE FLOW
   ========================================================================== */
/* ---------- dark band: the plant at work ---------- */
.flow{
  background:var(--ink);
  color:#fff;
  --line:rgba(255,255,255,.15);
  --line-2:rgba(255,255,255,.08);
  --ink-mute:rgba(255,255,255,.66);
  --ink-text:#fff;
}
.flow .sect__num{ color:var(--malt-lt); }
.flow__rail{
  position:relative;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
}
.flow__rail::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--line);
}
.flow__st{
  position:relative;
  display:flex; flex-direction:column;
  padding:2rem 1.1rem 0 0;
  border-right:1px solid var(--line);
}
.flow__st:last-child{ border-right:0; padding-right:0; }
.flow__st::before{
  content:""; position:absolute; left:0; top:-3.5px;
  width:7px; height:7px; border-radius:50%; background:var(--malt-lt);
}
.flow__n{
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.16em; color:rgba(255,255,255,.55); margin-bottom:.75rem;
}
.flow__t{
  font-family:var(--font-display); font-weight:400;
  font-size:1.24rem; line-height:1.1; letter-spacing:-.01em;
  margin-bottom:.6rem;
}
.flow__d{
  font-size:.83rem; line-height:1.55; color:var(--ink-mute);
  margin-bottom:1rem; min-height:3.9rem;
}
.flow__l{ display:grid; gap:.1rem; margin-top:auto; padding-top:.2rem; }
.flow__l a{
  display:inline-block; font-size:.79rem; line-height:1.5;
  color:rgba(255,255,255,.9); border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
  overflow-wrap:anywhere;
}
.flow__l a:hover{ color:var(--malt-lt); border-bottom-color:var(--malt-lt); }

/* ==========================================================================
   02 — PRODUCTS
   ========================================================================== */
.prod{ background:var(--white); }
.prod .sect__head--split{ align-items:start; }
.prod__aside{ display:grid; gap:1.3rem; align-content:start; }
.prod__fig{ margin:0; }
.prod__fig img{
  width:100%; max-width:290px; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line);
}
.prod__fig figcaption{
  margin-top:.55rem; font-family:var(--font-mono); font-size:.625rem;
  line-height:1.6; letter-spacing:.02em; color:var(--steel-t); max-width:34ch;
}

.ptable{
  width:100%; border-collapse:collapse; table-layout:fixed;
  font-size:.9rem;
}
.ptable caption{ text-align:left; }
.ptable thead th{
  font-family:var(--font-mono); font-weight:400; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--steel-t);
  text-align:left; padding:0 1.2rem .7rem 0;
  border-bottom:1px solid var(--line);
}
.ptable thead th:nth-child(1){ width:32%; }
.ptable thead th:nth-child(2){ width:46%; }
.ptable thead th:nth-child(3){ width:22%; }
.ptable tbody tr{ border-bottom:1px solid var(--line-2); transition:background .18s; }
.ptable tbody tr:hover{ background:rgba(183,121,31,.045); }
.ptable tbody th{
  text-align:left; font-weight:400; padding:1.05rem 1.2rem 1.05rem 0;
  vertical-align:top;
}
.ptable tbody th a{
  font-family:var(--font-display); font-size:1.03rem; line-height:1.25;
  letter-spacing:-.008em; color:var(--ink);
  transition:color .18s;
  overflow-wrap:anywhere;
}
.ptable tbody th a:hover{ color:var(--malt-ink); }
.ptable tbody td{
  padding:1.12rem 1.2rem 1.05rem 0; vertical-align:top;
  color:var(--ink-mute); line-height:1.55;
}
.ptable tbody td:nth-child(3){
  font-family:var(--font-mono); font-size:.705rem; letter-spacing:.02em;
  color:var(--steel-t); padding-top:1.24rem;
}
.prod__foot{
  margin-top:1.2rem; font-size:.8rem; color:var(--steel-t);
}
.prod__foot a{ color:var(--malt-ink); border-bottom:1px solid rgba(183,121,31,.35); }
.prod__foot a:hover{ border-bottom-color:var(--malt); }

/* ==========================================================================
   03 — COMPLIANCE / ATEX
   ========================================================================== */
/* ---------- dark band: the compliance panel ---------- */
.atex{
  background:var(--ink);
  color:#fff;
  --line:rgba(255,255,255,.15);
  --line-2:rgba(255,255,255,.08);
  --ink-mute:rgba(255,255,255,.66);
  --ink-text:#fff;
}
.atex .sect__num{ color:var(--malt-lt); }
.atex__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2.2rem,5vw,4.6rem);
  align-items:start;
}
.atexsvg{ display:block; width:100%; height:auto; max-width:480px; }
.ztitle{
  font-family:var(--font-mono); font-size:8.4px;
  letter-spacing:.19em; fill:rgba(255,255,255,.5);
}
.z22{
  fill:none; stroke:rgba(255,255,255,.34); stroke-width:1;
  stroke-dasharray:6 5;
}
.z21{
  fill:var(--malt); fill-opacity:.17;
  stroke:var(--malt-lt); stroke-width:1; stroke-dasharray:3 4; opacity:.8;
}
.z20{ fill:url(#zDot); }
#zDot circle{ fill:var(--malt-lt); opacity:.8; }
.zm path{
  fill:none; stroke:rgba(255,255,255,.86); stroke-width:1.5;
}
.ztag rect{
  fill:var(--ink-2); stroke:rgba(255,255,255,.45); stroke-width:1;
}
.ztag text{
  font-family:var(--font-mono); font-size:10px; fill:#fff;
  text-anchor:middle;
}

.zonekey{
  background:var(--grey);
  --ink-mute:#5d666f;
  padding:1.05rem 1.2rem 1.15rem;
  margin-top:1.4rem;
  display:grid; gap:.72rem;
  max-width:480px;
}
.zonekey div{
  display:grid; grid-template-columns:2.1rem 1fr; gap:.55rem;
  align-items:baseline;
}
.zonekey b{
  font-family:var(--font-mono); font-size:.82rem; font-weight:700; color:var(--malt-ink);
}
.zonekey span{
  font-size:.795rem; line-height:1.55; color:var(--ink-mute);
}
.atex__note{
  margin-top:.9rem; font-family:var(--font-mono); font-size:.625rem;
  line-height:1.65; letter-spacing:.02em; color:rgba(255,255,255,.5); max-width:44ch;
}
.atex__p{
  font-size:.95rem; line-height:1.72; color:var(--ink-mute);
  max-width:46ch; margin:1.1rem 0 1.9rem;
}
.atex__list{ border-top:1px solid var(--line); }
.atex__list a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.78rem 0; border-bottom:1px solid var(--line-2);
  font-size:.875rem; color:rgba(255,255,255,.9);
  transition:color .18s;
}
.atex__list a:hover{ color:var(--malt-lt); }
.atex__go{
  font-family:var(--font-mono); color:rgba(255,255,255,.42);
  transition:transform .2s var(--ease), color .18s;
}
.atex__list a:hover .atex__go{ transform:translateX(3px); color:var(--malt); }
.atex__cta{ margin-top:1.8rem; }

/* ==========================================================================
   04 — SERVICES
   ========================================================================== */
.svc{ background:var(--white); }
.svc2{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.6rem,3.4vw,3rem);
}
.svc2 li{ border-top:1px solid var(--line); }
.svc2 a{
  display:grid; grid-template-columns:2.3rem minmax(0,1fr);
  align-items:baseline;
  padding:1.35rem 0 1.7rem;
}
.svc2__n{
  grid-row:1 / span 2;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.12em; color:var(--steel-t);
}
.svc2__t{
  font-family:var(--font-display); font-size:1.1rem;
  line-height:1.2; letter-spacing:-.008em; color:var(--ink);
  transition:color .18s;
}
.svc2__d{
  grid-column:2; display:block;
  margin-top:.42rem; font-size:.815rem; line-height:1.55;
  color:var(--ink-mute);
}
.svc2 a:hover .svc2__t{ color:var(--malt-ink); }

/* ==========================================================================
   05 — THE WORKS
   ========================================================================== */
.works{ background:var(--white); border-top:1px solid var(--line); }
.works__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
}
.works__fig{ margin:0; }
.works__fig img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border:1px solid var(--line);
}
.works__fig figcaption{
  margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.64rem; line-height:1.65;
  letter-spacing:.02em; color:var(--steel-t); max-width:52ch;
}
.works__h{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.1;
  letter-spacing:-.012em; margin-bottom:1rem;
}
.works__p{
  font-size:.95rem; line-height:1.72; color:var(--ink-mute);
  max-width:44ch; margin-bottom:1.9rem;
}
.works__dl{
  display:grid; gap:1rem; padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.works__dl div{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.8rem;
  align-items:baseline;
}
.works__dl dt{
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--steel-t);
}
.works__dl dd{
  font-size:.875rem; line-height:1.55; color:var(--ink);
  overflow-wrap:anywhere;
}
.works__dl a:hover{ color:var(--malt-ink); }

/* ==========================================================================
   06 — CONTACT
   ========================================================================== */
/* ---------- brand band: the close ---------- */
.con{
  background:var(--malt);
  color:var(--ink);
  --line:rgba(20,23,26,.26);
  --line-2:rgba(20,23,26,.18);
}
.con .sect__num{ color:var(--ink); }
.con__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.2rem,5vw,4.5rem);
  align-items:start;
}
.con__h{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.06;
  letter-spacing:-.014em; margin-bottom:1.1rem; max-width:18ch;
  color:var(--ink);
}
.con__p{
  font-size:.96rem; line-height:1.72; color:var(--ink);
  max-width:44ch; margin-bottom:1.9rem;
}
.con__acts{ display:flex; flex-wrap:wrap; gap:.7rem; }
.con__acts .btn--solid{ background:var(--ink); color:#fff; }
.con__acts .btn--solid:hover{ background:#000; }
.con__acts .btn--ghost{
  border-color:rgba(20,23,26,.55); color:var(--ink); background:transparent;
}
.con__acts .btn--ghost:hover{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.con__dl{ display:grid; gap:1.15rem; }
.con__dl div{
  display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:.9rem; align-items:baseline;
  padding-bottom:1.15rem; border-bottom:1px solid var(--line-2);
}
.con__dl div:last-child{ border-bottom:0; padding-bottom:0; }
.con__dl dt{
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink);
}
.con__dl dd{
  font-size:.895rem; line-height:1.6; color:var(--ink);
  overflow-wrap:anywhere;
}
.con__dl a{ border-bottom:1px solid rgba(20,23,26,.45); }
.con__dl a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--ink);
  border-top:1px solid var(--line);
  color:#fff;
}
.foot__top{ border-bottom:1px solid rgba(255,255,255,.13); }
.foot__brand{
  font-family:var(--font-display); font-size:1.55rem; line-height:1;
  letter-spacing:-.02em; color:#fff; margin-bottom:.5rem;
}
.foot__brand i{ font-style:normal; color:var(--steel); }
.foot__legalname{
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1.3rem;
}
.foot__blurb{
  font-size:.84rem; line-height:1.66; color:rgba(255,255,255,.62);
  max-width:36ch; margin-bottom:1.1rem;
}
.foot__tel a{
  font-family:var(--font-mono); font-size:.9rem; letter-spacing:.02em;
  color:#fff;
}
.foot__tel a:hover{ color:var(--malt-lt); }
.foot__h{ color:rgba(255,255,255,.58); }
.foot__nav a{ color:rgba(255,255,255,.76); }
.foot__nav a:hover{ color:var(--malt-lt); }
.foot__bottom{ color:rgba(255,255,255,.55); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .hero__in{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .hero__mill{ justify-self:start; max-width:340px; }
  .hero__figcap{ max-width:44ch; }
  .flow__rail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .flow__rail::before{ display:none; }
  .flow__st{
    border-right:0; border-top:1px solid var(--line);
    padding:1.5rem 1.4rem 1.7rem 0;
  }
  .flow__st::before{ top:-3.5px; left:0; }
  .flow__d{ min-height:0; }
  .atex__grid{ grid-template-columns:minmax(0,1fr); }
  .atexsvg, .zonekey{ max-width:none; }
  .svc2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .works__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .con__grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:860px){
  .hero__facts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
  .hero__facts span{ font-size:.72rem; }
  .prod__aside{ align-content:start; }
  .prod__fig img{ max-width:100%; }
}

@media (max-width:760px){
  .ptable{ table-layout:auto; font-size:.9rem; }
  .ptable thead{ display:none; }
  .ptable tbody tr{
    display:block; padding-block:1.1rem;
    border-bottom:1px solid var(--line);
  }
  .ptable tbody tr:hover{ background:none; }
  .ptable tbody th, .ptable tbody td{
    display:block; width:auto; padding:0;
  }
  .ptable tbody th{ margin-bottom:.4rem; }
  .ptable tbody td{
    font-size:.845rem; margin-top:.28rem;
    padding-left:0;
  }
  .ptable tbody td::before{
    content:attr(data-label) " · ";
    font-family:var(--font-mono); font-size:.6rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--steel-t);
  }
  .ptable tbody td:nth-child(3){
    font-size:.72rem; padding-top:.28rem;
  }
}

@media (max-width:640px){
  .hero__in{ padding-block:1.6rem 2rem; }
  .hero__facts{ grid-template-columns:minmax(0,1fr); gap:.85rem; }
  .hero__facts li{
    display:grid; grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);
    gap:.7rem; align-items:baseline;
  }
  .hero__facts b{ margin-bottom:0; }
  .hero__mill{ max-width:100%; }
  .rail__lbl{ font-size:.55rem; letter-spacing:.14em; }
  .rail__dots{ gap:.4rem; }
  .flow__rail{ grid-template-columns:minmax(0,1fr); border-left:1px solid var(--line); }
  .flow__st{
    border-top:0; padding:0 0 1.9rem 1.4rem;
  }
  .flow__st:last-child{ padding-bottom:0; }
  .flow__st::before{ left:-4px; top:.5rem; }
  .svc2{ grid-template-columns:minmax(0,1fr); }
  .svc2 a{ padding:1.15rem 0 1.35rem; }
  .works__dl div, .con__dl div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .con__acts .btn{ width:100%; justify-content:center; }
}

@media (max-width:420px){
  .hero__h1{ letter-spacing:-.01em; }
  .hero__acts{ gap:.6rem; }
  .hero__acts .btn{ width:100%; justify-content:center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mill .fall{ animation:none !important; opacity:0; }
  .pre__grain{ animation:none; }
}