/* PhilsMill — all rules derive from tokens.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--c-sheet);color:var(--c-ink);
  overflow-x:hidden;max-width:100%;
  font-family:var(--f-body);font-size:var(--fs-md);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto}   /* never distort */
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* datum rule — signature device */
.datum{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-5)}
.datum .tick{width:var(--hair);height:26px;background:var(--c-cut);flex:none}
/* .lbl is a span in sub-blocks and an h2 when it heads a section —
   reset heading margins so both render identically */
.datum .lbl{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--c-cut);white-space:nowrap;
  margin:0;font-weight:var(--fw-normal);line-height:inherit;
}
.datum .rule{height:var(--hair);background:var(--c-edge);flex:1}
.datum .tol{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--c-mist);letter-spacing:.08em;flex:none}

/* ============================================================
   HEADER — sticky, burger upper-left, SVG logo
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:var(--z-hdr);
  background:var(--c-header);backdrop-filter:blur(8px);
  border-bottom:var(--hair) solid var(--c-edge);
}
.bar{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--header-h);
}

/* burger — labelled pill; reads as a control, not a bare icon box */
.burger{
  display:inline-flex;align-items:center;gap:7px;
  min-height:var(--tap-min);padding:0 13px;
  border:var(--hair) solid var(--c-edge);border-radius:var(--pref-radius);
  background:var(--c-white);color:var(--c-steel);cursor:pointer;flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.burger:hover,.burger[aria-expanded=true]{
  border-color:var(--c-cut);color:var(--c-cut);background:var(--c-sheet);
}
.burger svg{flex:0 0 auto}
.burger svg path{transition:transform var(--t-med) var(--ease),opacity var(--t-fast);
  transform-origin:center}
.burger[aria-expanded=true] .b1{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] .b2{opacity:0}
.burger[aria-expanded=true] .b3{transform:translateY(-5px) rotate(-45deg)}
.burgerlabel{white-space:nowrap}
@media(max-width:520px){.burgerlabel{display:none} .burger{padding:0 11px}}


/* logo — mark + wordmark, sits left next to the burger */
.logo{
  display:flex;align-items:center;gap:var(--sp-2);
  text-decoration:none;color:var(--c-ink);
  flex:0 0 auto;              /* never crush the logo */
  overflow:hidden;            /* belt and braces */
}
.logomark{color:var(--c-cut);flex:0 0 auto}
.lname{
  font-size:var(--logo-size);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-snug);line-height:1;white-space:nowrap;
}
.lname b{color:var(--c-cut);font-weight:inherit}
.lname small{
  display:block;font-family:var(--f-mono);font-size:var(--logo-sub);
  letter-spacing:.22em;color:var(--c-steel);margin-top:2px;font-weight:var(--fw-normal);
}

/* right-hand group pushed to the far edge */
.hgroup{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:0 0 auto}

/* slide-down menu */
nav.menu{display:none;background:var(--c-sheet);border-top:var(--hair) solid var(--c-edge)}
nav.menu.open{display:block}
nav.menu a{
  display:block;padding:15px var(--pad);color:var(--c-ink);
  font-family:var(--f-mono);font-size:var(--fs-md);font-weight:var(--fw-mid);
  letter-spacing:.06em;text-decoration:none;
  border-bottom:var(--hair) solid var(--c-edge);
}
nav.menu a:last-child{border-bottom:0}
nav.menu a:hover{background:var(--c-paper);color:var(--c-cut)}
nav.menu a[aria-current=page]{color:var(--c-cut);font-weight:var(--fw-mid)}
.menu-close{
  display:block;width:100%;text-align:left;
  padding:15px var(--pad);background:var(--c-ink);border:0;
  cursor:pointer;font-family:var(--f-mono);font-size:var(--fs-base);
  letter-spacing:.1em;color:var(--c-white);text-transform:uppercase;
}
.menu-close::before{content:"\00d7";margin-right:10px;font-size:1.25em;line-height:0}
.menu-close:hover{background:var(--c-cut);color:var(--c-white)}

/* narrow phones: drop the strapline, then the wordmark, then the CTA,
   in that order — the burger and the mark always survive */
@media(max-width:420px){
  .lname small{display:none}   /* strapline only; wordmark stays */
}



/* ============================================================
   LANGUAGE + CURRENCY — one obvious control in the header.
   The globe plus the live EN/EUR readout signals it is settable,
   the chevron signals it opens.
   ============================================================ */
.pref{position:relative}
.prefbtn{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  min-height:var(--tap-min);padding:6px 10px;background:var(--c-white);
  border:var(--hair) solid var(--c-edge);border-radius:var(--pref-radius);
  color:var(--c-steel);font-family:var(--f-mono);font-size:var(--fs-xs);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.prefbtn:hover,.prefbtn[aria-expanded=true]{border-color:var(--c-cut);color:var(--c-cut)}
.prefnow{display:flex;align-items:center;gap:5px;letter-spacing:.08em}
.prefnow b{font-weight:var(--fw-bold);color:var(--c-ink)}
.prefnow i{font-style:normal;color:var(--c-steel)}
.prefbtn:hover .prefnow b,.prefbtn[aria-expanded=true] .prefnow b{color:var(--c-cut)}
.prefbtn .chev{transition:transform var(--t-fast)}
.prefbtn[aria-expanded=true] .chev{transform:rotate(180deg)}

.prefmenu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:calc(var(--z-hdr) + 5);
  min-width:var(--pref-w);background:var(--c-white);
  border:var(--hair) solid var(--c-edge);
  box-shadow:var(--shadow-menu);
  padding:var(--sp-4);
}
.prefmenu[hidden]{display:none}
.prefhead{
  margin:0 0 var(--sp-2);font-family:var(--f-mono);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-ink);
}
.prefrow{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:var(--sp-3)}
.prefrow.cur{grid-template-columns:repeat(3,1fr)}
.prefrow a,.prefrow button{
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--tap-min);padding:10px 8px;
  text-decoration:none;cursor:pointer;
  background:var(--c-sheet);border:var(--hair) solid var(--c-edge);
  font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:var(--fw-mid);
  letter-spacing:.04em;color:var(--c-ink);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.prefrow small{color:var(--c-steel);font-size:1em;font-weight:var(--fw-normal)}
.flag{font-size:1.15em;line-height:1;margin-right:2px;
  font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}
.prefnow .flag{margin-right:4px}
.prefrow a:hover,.prefrow button:hover{border-color:var(--c-cut);background:var(--c-white)}
.prefrow a[aria-current=true],
.prefrow button[aria-pressed=true]{
  background:var(--c-cut);border-color:var(--c-cut);color:var(--c-white);
}
.prefrow a[aria-current=true] small,
.prefrow button[aria-pressed=true] small{color:var(--a-white-80)}
.prefnote{
  margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--c-steel);
  padding-top:var(--sp-3);border-top:var(--hair) solid var(--c-edge);
}
/* close row, matching the burger menu's Close */
.prefclose{
  display:block;width:100%;margin-top:var(--sp-3);
  min-height:var(--tap-min);padding:11px var(--sp-3);
  background:var(--c-ink);color:var(--c-white);border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.1em;
  text-transform:uppercase;text-align:center;
  transition:background var(--t-fast);
}
.prefclose::before{content:"\00d7";margin-right:8px;font-size:1.2em;line-height:0}
.prefclose:hover{background:var(--c-cut)}
@media(max-width:420px){
  .prefmenu{position:fixed;left:var(--pad);right:var(--pad);top:calc(var(--header-h) + 6px);min-width:0}
}

/* buttons */
.btn{display:inline-block;background:var(--c-cut);color:var(--c-white);text-decoration:none;
  padding:11px 20px;font-weight:var(--fw-mid);font-size:var(--fs-base);border:0;cursor:pointer;
  font-family:var(--f-body);border-radius:var(--radius);transition:background var(--t-fast)}
.btn:hover{background:var(--c-cut-dark)}
.btn-ghost{background:transparent;color:var(--c-ink);border:var(--hair) solid var(--c-ink)}
.btn-ghost:hover{background:var(--c-ink);color:var(--c-white)}
/* section-level "see more" button — full width on mobile, arrow affordance */
.btn-wide{
  display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:var(--cta-h);width:100%;max-width:var(--cta-max);
  background:var(--c-white);color:var(--c-ink);
  border:var(--hair) solid var(--c-edge);border-left:3px solid var(--c-cut);
  font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.1em;
  text-transform:uppercase;
}
.btn-wide::after{content:"→";color:var(--c-cut);font-size:1.2em}
.btn-wide:hover{background:var(--c-cut);color:var(--c-white);border-color:var(--c-cut)}
.btn-wide:hover::after{color:var(--c-white)}

/* sections */
.sec{padding-top:var(--sp-8);padding-bottom:var(--sp-8);border-bottom:var(--hair) solid var(--c-edge)}
.sec-tight{padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
/* utilities replacing inline style= attributes */
.pt-0{padding-top:0}
.pt-page{padding-top:var(--sp-8)}
.mt-block{margin-top:var(--sp-5)}
.narrow{max-width:var(--narrow-w)}
h1{font-family:var(--f-display);font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  font-weight:var(--fw-bold);margin:0 0 var(--sp-5)}
h1 em{font-style:normal;color:var(--c-cut)}
h2{font-family:var(--f-display);font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);
  font-weight:var(--fw-bold);margin:0 0 var(--sp-4)}
.lede{font-size:var(--fs-lg);color:var(--c-steel);max-width:52ch;margin:0 0 var(--sp-6)}

/* hero */
.hero{padding-top:var(--sp-9);padding-bottom:var(--sp-8);border-bottom:var(--hair) solid var(--c-edge);
  background:var(--c-sheet)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.hero .datum{margin-bottom:var(--sp-4)}
.hero .lede{margin-bottom:var(--sp-6)}
/* two buttons, equal halves of the x-axis. Capped on wide screens so
   they stay a button pair rather than stretching the full column. */
.hero-cta{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  max-width:var(--cta-max);
}
/* minmax(0,1fr) stops a long label (German) from widening its own column */
.hero-cta,.btn-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-cta .btn,
.btn-pair .btn{
  width:100%;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--cta-h);
  padding-left:var(--sp-2);padding-right:var(--sp-2);
  white-space:nowrap;                 /* keep each label on one line */
  font-size:clamp(12px,3.2vw,14px);   /* shrink to fit rather than wrap */
  overflow:hidden;text-overflow:ellipsis;
}

/* same 50/50 pair used by the enquiry form */
.btn-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  max-width:var(--cta-max);
}
.hero-fig{position:relative;margin:0}
.hero-fig img{width:100%;height:auto;display:block;border:var(--hair) solid var(--c-edge)}
.callout{position:absolute;bottom:-1px;left:-1px;background:var(--c-ink);color:var(--c-white);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.1em;padding:var(--sp-2) var(--sp-3)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero{padding-top:var(--sp-6);padding-bottom:var(--sp-7)}
  h1{font-size:clamp(32px,8.5vw,44px)}
  .hero .lede{font-size:var(--fs-md);margin-bottom:var(--sp-5)}
}

/* card grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hair);
  background:var(--c-edge);border:var(--hair) solid var(--c-edge)}
.card{background:var(--c-sheet);padding:var(--sp-6) var(--sp-5)}
.card h3{margin:0 0 var(--sp-2);font-size:var(--fs-md);letter-spacing:-.01em}
.card p{margin:0;color:var(--c-steel);font-size:var(--fs-base);font-weight:var(--fw-normal)}
/* icon + eyebrow sit on one row at the top of each card */
.cardhead{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.cardicon{
  color:var(--c-cut);flex:0 0 auto;
  width:var(--icon-size);height:var(--icon-size);
  transition:transform var(--t-med) var(--ease);
}
.card:hover .cardicon{transform:translateY(-2px)}
.card .no{
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--c-cut);
  letter-spacing:var(--ls-mono);display:block;margin:0;
}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}}

/* process */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);margin-top:var(--sp-2)}
.step{border-top:2px solid var(--c-ink);padding-top:var(--sp-4)}
.step .n{font-family:var(--f-mono);font-size:var(--fs-2xs);color:var(--c-cut);letter-spacing:var(--ls-mono)}
.step h4{margin:var(--sp-2) 0 var(--sp-1);font-size:var(--fs-md)}
.step p{margin:0;font-size:var(--fs-base);color:var(--c-steel)}
@media(max-width:860px){.grid-4{grid-template-columns:1fr 1fr;gap:var(--sp-5)}}
@media(max-width:520px){.grid-4{grid-template-columns:1fr}}

/* gallery */
/* masonry columns — every photo keeps its own shape, nothing is cropped
   or stretched. Portrait and landscape sit side by side at native ratio. */
.gal{
  max-width:var(--gallery-w);margin:0 auto;
  column-count:2;column-gap:var(--gal-gap);
}
@media(min-width:620px){ .gal{column-count:3} }
@media(min-width:980px){ .gal{column-count:4} }
.cell{
  position:relative;overflow:hidden;background:var(--c-paper);cursor:zoom-in;
  border:var(--hair) solid var(--c-edge);
  break-inside:avoid;margin:0 0 var(--gal-gap);display:block;
}
.cell img{
  width:100%;height:auto;display:block;   /* natural aspect ratio, never stretched */
  transition:transform var(--t-slow) var(--ease);
}
.cell:hover img{transform:scale(1.045)}
.cell figcaption{position:absolute;left:0;bottom:0;background:var(--c-veil);color:var(--c-white);
  font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.1em;padding:5px 9px;
  opacity:0;transition:opacity var(--t-med)}
.cell:hover figcaption,.cell:focus-visible figcaption{opacity:1}
.cell.vid::after{content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--c-white);font-size:26px;text-shadow:var(--shadow-nav);pointer-events:none}

/* forms */
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-mid);margin:0 0 var(--sp-1);}
.q-grid input,.q-grid select,.q-grid textarea{margin-bottom:var(--sp-5)}
input,select,textarea{width:100%;padding:11px 13px;border:var(--hair) solid var(--c-edge);
  background:var(--c-white);font-family:inherit;font-size:var(--fs-base);color:var(--c-ink);
  margin-bottom:var(--sp-4);border-radius:var(--radius)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--c-cut);outline-offset:-1px;border-color:var(--c-cut)}
textarea{min-height:110px;resize:vertical}
input.invalid,textarea.invalid{border-color:var(--c-error);background:var(--c-error-bg)}
input.invalid:focus,textarea.invalid:focus{outline-color:var(--c-error)}
.note{font-size:var(--fs-sm);color:var(--c-steel);margin:var(--sp-3) 0 0}
.spec{border:var(--hair) solid var(--c-edge);background:var(--c-white);padding:var(--sp-5)}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:var(--fs-base)}
.spec dt{font-family:var(--f-mono);font-size:var(--fs-2xs);color:var(--c-steel);letter-spacing:.08em;
  text-transform:uppercase;padding-top:2px}
.spec dd{margin:0;color:var(--c-ink)}
.fill{color:var(--c-mist);font-style:italic}
@media(max-width:860px){.q-grid{grid-template-columns:1fr;gap:var(--sp-7)}}

/* contact */
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--hair);
  background:var(--c-edge);border:var(--hair) solid var(--c-edge)}
.cx{background:var(--c-sheet);padding:var(--sp-5);text-decoration:none;color:var(--c-ink);
  display:block;transition:background var(--t-fast)}
.cx:hover{background:var(--c-white)}
.cx .k{font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-mono);
  color:var(--c-cut);display:block;margin-bottom:7px}
.cx .v{font-size:var(--fs-base);font-weight:var(--fw-mid);letter-spacing:-.01em;word-break:break-word}
.cx .s{font-size:var(--fs-sm);color:var(--c-steel);display:block;margin-top:3px}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}
.chan{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.chan span{font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  border:var(--hair) solid var(--c-edge);padding:4px 9px;color:var(--c-steel);background:var(--c-white)}

/* footer rules live in the FOOTER block at the end of this file */

/* lightbox */
.lb{position:fixed;inset:0;background:var(--c-scrim);z-index:var(--z-lb);
  display:none;align-items:center;justify-content:center;padding:var(--sp-6)}
.lb.on{display:flex}
.lb img,.lb video{max-width:100%;max-height:88vh;display:block}
.lb button{background:none;border:0;color:var(--c-white);cursor:pointer;line-height:1}
.lb .x{position:absolute;top:18px;right:22px;font-size:30px}
.lb .nb{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;padding:0 18px}
.lb .prev{left:4px}.lb .next{right:4px}
.lb .cnt{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--c-mist);
  font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.12em}

:focus-visible{outline:2px solid var(--c-cut);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   PAGE SHELL — wide-screen box treatment
   Below the breakpoint the page is full-bleed. Above it, content
   is capped and a hairline box runs top-to-bottom, with a tinted
   margin outside it so wide monitors don't show a stranded column.
   ============================================================ */
.pagewrap{background:var(--c-sheet)}

@media(min-width:760px){
  body{background:var(--c-margin)}
  .pagewrap{
    max-width:var(--max-width);margin:0 auto;min-height:100vh;
    background:var(--c-sheet);
    border-left:var(--pagebox-width) solid var(--pagebox-color);
    border-right:var(--pagebox-width) solid var(--pagebox-color);
  }
  /* colour blocks stop at the same width as content */
  .hdr,.ftr,.chips{max-width:var(--max-width);margin-left:auto;margin-right:auto}
  .pills{
    display:grid;grid-template-columns:repeat(var(--footnav-cols),auto);
    justify-content:center;justify-items:center;gap:11px;max-width:680px;margin:var(--sp-5) auto;
  }
  .pills .pill{width:100%;text-align:center}
}

/* ============================================================
   CHIPS — spec strip under the hero
   ============================================================ */
.chips{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  padding:var(--sp-4) var(--pad);background:var(--c-ink);color:var(--c-mist);
}
.chip{
  font-family:var(--f-mono);font-size:var(--fs-sm);
  padding:var(--chip-pad-y) var(--chip-pad-x);
  border:var(--hair) solid var(--c-line);border-radius:var(--chip-radius);
  letter-spacing:.06em;
}
a.chiplink{
  text-decoration:none;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;min-height:var(--tap-min);   /* tap target */
  transition:background var(--t-fast);
}
a.chiplink:hover{background:var(--a-cut-10)}
a.chiplink:active{opacity:.75}
.chip.hot{background:var(--c-cut);color:var(--c-white);border-color:var(--c-cut);font-weight:var(--fw-mid)}

/* ============================================================
   FOOTER — buttons, pill nav, prev/next, meta
   ============================================================ */
.ftr{background:var(--c-footer-bg);color:var(--c-footer-ink);
  padding:var(--sp-7) var(--pad) var(--sp-8);border-top:var(--hair) solid var(--c-edge)}
.ftr a{color:var(--c-mist);text-decoration:none}
.ftr a:hover{color:var(--c-white)}

.fbtns{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-5)}
.fbtn{
  min-height:var(--fbtn-h);padding:0 13px;border-radius:var(--fbtn-radius);
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.06em;
  border:var(--hair) solid var(--c-cut);color:var(--c-mist);background:transparent;
  cursor:pointer;transition:background var(--t-fast),color var(--t-fast);
}
.fbtn:hover{background:var(--c-cut);color:var(--c-white)}
.fbtn.primary{background:var(--c-cut);color:var(--c-white);font-weight:var(--fw-mid)}
.fbtn.disabled{opacity:.4;cursor:not-allowed;border-color:var(--c-steel)}

.pills{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin:var(--sp-5) 0}
.pill{
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:var(--fw-mid);
  letter-spacing:.1em;padding:var(--pill-pad-y) var(--pill-pad-x);
  border-radius:var(--pill-radius);border:var(--hair) solid var(--a-cut-50);
  color:var(--c-mist);background:transparent;text-transform:uppercase;
  transition:background var(--t-fast),color var(--t-fast);
}
.pill:hover{background:var(--a-cut-20);color:var(--c-white)}
.pill.active{background:var(--c-cut);color:var(--c-white);border-color:var(--c-cut);
  box-shadow:0 0 0 4px var(--a-cut-18)}

.navrow{display:flex;gap:10px;justify-content:center;align-items:stretch;
  margin:var(--sp-2) auto 0;max-width:600px;padding:0 var(--sp-4)}
.navrow .prevbox,.navrow .nextbox{flex:1 1 0;max-width:50%;margin:0}
.navrow.solo-next{justify-content:flex-end}
.navrow.solo-prev{justify-content:flex-start}
.prevbox,.nextbox{
  border:var(--hair) solid var(--a-cut-45);border-radius:var(--next-radius);
  padding:var(--next-pad-y) var(--next-pad-x);background:var(--a-white-04);
  text-decoration:none;display:flex;align-items:center;gap:var(--navarr-gap);
  transition:background var(--t-fast);
}
.prevbox{justify-content:flex-start}
.nextbox{justify-content:flex-end}
.prevbox:hover,.nextbox:hover{background:var(--a-cut-18)}
.prevbox .np,.nextbox .np{font-family:var(--f-mono);font-size:var(--fs-base);
  font-weight:var(--fw-mid);color:var(--c-white);letter-spacing:.06em}
.navarr{color:var(--c-cut);flex:0 0 auto;width:var(--navarr-size);height:var(--navarr-size);
  stroke-width:var(--navarr-stroke)}

.copy-l{text-align:center;margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--c-steel)}
.copy-l .accent{color:var(--c-cut);font-weight:var(--fw-bold)}
.copy-l .rights{display:block;font-size:var(--fs-sm);margin-top:var(--rights-mt);color:var(--c-steel)}
.ver{font-family:var(--f-mono);font-size:var(--fs-meta);color:var(--c-steel);
  text-align:center;margin-top:var(--ver-mt);letter-spacing:.05em;display:block}
.ver .new{color:var(--c-ok);font-weight:var(--fw-bold)}

/* ============================================================
   HERO REVEAL — a machinist's pass.
   The datum rule sweeps like a tool approaching, each headline
   line wipes in behind a moving mask as if a cutter crossed it,
   and the accent word registers last with a brief spark.
   Everything is visible by default; the animation only engages
   when JS adds .cut-ready, so no-JS and crawlers see full text.
   ============================================================ */

/* datum rule sweeps out from the tick */
.cut-ready .hero .datum .rule{transform-origin:left center;transform:scaleX(0)}
.cut-ready.cut-go .hero .datum .rule{
  transform:scaleX(1);
  transition:transform .55s cubic-bezier(.22,.61,.36,1) .05s;
}
.cut-ready .hero .datum .lbl{opacity:0;transform:translateX(-6px)}
.cut-ready.cut-go .hero .datum .lbl{
  opacity:1;transform:none;
  transition:opacity .4s ease .18s, transform .4s ease .18s;
}

/* each headline line sits in a clipping box */
.cutline{display:block;overflow:hidden}
.cutline > span{display:block}
.cut-ready .cutline > span{
  transform:translateY(102%);
  clip-path:inset(0 100% 0 0);
}
.cut-ready.cut-go .cutline > span{
  transform:translateY(0);
  clip-path:inset(0 0 0 0);
  transition:
    transform .62s cubic-bezier(.16,.84,.32,1) var(--cut-delay,0s),
    clip-path .62s cubic-bezier(.16,.84,.32,1) var(--cut-delay,0s);
}

/* the tool: a hairline that travels across each line as it wipes */
.cutline{position:relative}
.cutline::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--c-cut);opacity:0;pointer-events:none;
}
.cut-ready.cut-go .cutline::after{
  animation:toolpass .62s cubic-bezier(.16,.84,.32,1) var(--cut-delay,0s) both;
}
@keyframes toolpass{
  0%  {opacity:0;   transform:translateX(0)}
  8%  {opacity:.9}
  92% {opacity:.9}
  100%{opacity:0;   transform:translateX(var(--cut-span,100%))}
}

/* accent word registers last */
.cut-ready .hero h1 em{color:var(--c-ink)}
.cut-ready.cut-go .hero h1 em{
  animation:register .5s ease var(--cut-spark,1s) both;
}
@keyframes register{
  0%  {color:var(--c-ink)}
  45% {color:var(--c-cut); text-shadow:0 0 18px var(--a-cut-45)}
  100%{color:var(--c-cut); text-shadow:none}
}

/* lede and buttons follow the pass */
.cut-ready .hero .lede,
.cut-ready .hero-cta,
.cut-ready .hero-fig{opacity:0;transform:translateY(10px)}
.cut-ready.cut-go .hero .lede{
  opacity:1;transform:none;transition:opacity .5s ease .55s,transform .5s ease .55s}
.cut-ready.cut-go .hero-cta{
  opacity:1;transform:none;transition:opacity .5s ease .68s,transform .5s ease .68s}
.cut-ready.cut-go .hero-fig{
  opacity:1;transform:none;transition:opacity .6s ease .3s,transform .6s ease .3s}

@media(prefers-reduced-motion:reduce){
  .cut-ready .hero .datum .rule,
  .cut-ready .hero .datum .lbl,
  .cut-ready .cutline > span,
  .cut-ready .hero .lede,
  .cut-ready .hero-cta,
  .cut-ready .hero-fig{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  .cut-ready .hero h1 em{color:var(--c-cut)!important}
  .cutline::after{display:none}
}

/* ============================================================
   HERO SLIDESHOW — auto-advances every 3s; videos hold until
   they finish; swipe or arrows override. Progress bar shows
   how long the current slide has left.
   ============================================================ */
.hero-fig{position:relative;overflow:hidden;background:var(--c-paper);
  border:var(--hair) solid var(--c-edge)}
.hs-track{position:relative;width:100%;aspect-ratio:4/3;background:var(--c-paper)}
.hs-track img,.hs-track video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;                      /* never crop or stretch */
  background:var(--c-paper);
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.hs-track img.on,.hs-track video.on{opacity:1}
.hero-fig img{border:0}                     /* border lives on the figure now */

/* progress bar */
.hs-bar{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--a-white-25);z-index:2}
.hs-bar span{display:block;height:100%;width:0;background:var(--c-cut)}
.hs-bar.run span{transition:width linear}

/* dots */
.hs-dots{position:absolute;top:10px;right:10px;z-index:3;
  display:flex;gap:5px;flex-wrap:wrap;max-width:60%;justify-content:flex-end}
/* dots stay visually small but carry a full-size invisible hit area */
.hs-dots button{
  position:relative;
  width:var(--dot-size);height:var(--dot-size);
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--a-white-45);
  transition:background var(--t-fast),transform var(--t-fast);
}
.hs-dots button::before{
  content:"";position:absolute;left:50%;top:50%;
  width:var(--tap-min);height:var(--tap-min);
  transform:translate(-50%,-50%);
}
.hs-dots button[aria-selected=true]{background:var(--c-cut);transform:scale(1.5)}
@media(max-width:520px){.hs-dots{display:none}}

/* arrows — appear on hover, always available to keyboard */
.hs-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:var(--tap-min);height:var(--tap-min);border:0;cursor:pointer;
  background:var(--a-ink-55);color:var(--c-white);font-size:22px;line-height:1;
  opacity:0;transition:opacity var(--t-fast),background var(--t-fast);
}
.hero-fig:hover .hs-nav,.hs-nav:focus-visible{opacity:1}
.hs-nav:hover{background:var(--c-cut)}
.hs-prev{left:0}.hs-next{right:0}
@media(hover:none){.hs-nav{opacity:.8}}

.hs-vid-badge{position:absolute;top:10px;left:10px;z-index:3;
  font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.12em;
  background:var(--c-cut);color:var(--c-white);padding:3px 7px}

@media(prefers-reduced-motion:reduce){
  .hs-track img,.hs-track video{transition:none}
  .hs-bar{display:none}
}

/* ============================================================
   DESIGN + ENGINEERING — intro block with the in-house product
   shot, then the four stages as cards.
   ============================================================ */
.des-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-7);
  align-items:center;margin-bottom:var(--sp-6);
}
.des-h{
  font-family:var(--f-display);font-size:var(--fs-xl);
  line-height:var(--lh-snug);letter-spacing:var(--ls-snug);
  font-weight:var(--fw-bold);margin:0 0 var(--sp-3);
}
.des-h em{font-style:normal;color:var(--c-cut)}
.des-copy .lede{margin:0}
.des-fig{
  position:relative;margin:0;
  border:var(--hair) solid var(--c-edge);background:var(--c-paper);
}
.des-fig img{width:100%;height:auto;display:block}
.des-cards{margin-top:var(--sp-5)}
@media(max-width:860px){
  .des-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .des-fig{max-width:var(--des-fig-max);margin-inline:auto}
}

/* ============================================================
   MACHINE PARK — grouped by process, one card per machine.
   Specs render only when present in machines.json, so an
   incomplete entry never shows an empty row to a customer.
   ============================================================ */
.mach-group{margin-bottom:var(--sp-7)}
.mach-group .datum{margin-bottom:var(--sp-4)}
.mach-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--mach-min),1fr));
  gap:var(--hair);background:var(--c-edge);
  border:var(--hair) solid var(--c-edge);
}
.mach{background:var(--c-sheet);padding:var(--sp-5);margin:0}
.mach-name{
  font-family:var(--f-display);font-size:var(--fs-md);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-snug);margin:0 0 var(--sp-1);
}
.mach-make{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-cut);margin:0 0 var(--sp-3);
}
.mach-spec{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-4);
  font-size:var(--fs-base);
}
.mach-spec dt{
  font-family:var(--f-mono);font-size:var(--fs-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-steel);padding-top:2px;
}
.mach-spec dd{margin:0;color:var(--c-ink)}
.mach-tbd{
  margin:0;font-size:var(--fs-base);color:var(--c-mist);font-style:italic;
}
.mach-note{
  margin:var(--sp-3) 0 0;font-size:var(--fs-sm);color:var(--c-steel);
  padding-top:var(--sp-2);border-top:var(--hair) solid var(--c-edge);
}

/* ============================================================
   MESSAGING CHANNELS — each button carries its app's own colour
   so the row is scannable at a glance.
   ============================================================ */
.fbtn .chanicon{flex:0 0 auto}
.fbtn.ch-wa{border-color:var(--c-wa);color:var(--c-wa)}
.fbtn.ch-wa.primary{background:var(--c-wa);border-color:var(--c-wa);color:var(--c-white)}
.fbtn.ch-wa:hover{background:var(--c-wa);color:var(--c-white)}
.fbtn.ch-vi{border-color:var(--c-viber);color:var(--c-viber)}
.fbtn.ch-vi:hover{background:var(--c-viber);color:var(--c-white)}
.fbtn.ch-si{border-color:var(--c-signal);color:var(--c-signal)}
.fbtn.ch-si:hover{background:var(--c-signal);color:var(--c-white)}
.fbtn.ch-em{border-color:var(--c-cut);color:var(--c-mist)}
.fbtn.ch-em:hover{background:var(--c-cut);color:var(--c-white)}

/* ---- no-app fallback line ---- */
.noapp{
  text-align:center;margin:var(--sp-4) 0 0;
  font-size:var(--fs-sm);color:var(--c-steel);
}
.stelcom{
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  color:var(--c-cut);text-decoration:underline;text-underline-offset:3px;
  font-weight:var(--fw-mid);
}
.stelcom:hover{color:var(--c-white)}

/* ---- language chips (About) ---- */
.langrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.langchip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:var(--tap-min);padding:0 var(--sp-4);
  border:var(--hair) solid var(--c-edge);background:var(--c-white);
  font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.04em;
}

/* ---- terms list ---- */
.terms{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--term-min),1fr));
  gap:var(--hair);background:var(--c-edge);
  border:var(--hair) solid var(--c-edge);
}
.term{background:var(--c-sheet);padding:var(--sp-5);margin:0}
.term h3{
  font-family:var(--f-display);font-size:var(--fs-md);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-snug);margin:0 0 var(--sp-2);
}
.term h3::before{
  content:"";display:inline-block;width:3px;height:1em;
  background:var(--c-cut);margin-right:9px;vertical-align:-2px;
}
.term p{margin:0;font-size:var(--fs-base);color:var(--c-steel);line-height:var(--lh-body)}

/* ---- process step icons ---- */
.stepicon{color:var(--c-cut);display:block;margin-bottom:var(--sp-2)}

/* ---- terms: icon beside the heading ---- */
.termhead{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-2)}
.termicon{color:var(--c-cut);flex:0 0 auto}
.termhead h3{margin:0}
.termhead h3::before{content:none}   /* icon replaces the accent bar */

/* ---- contact cards: icon above the label ---- */
.cx .cardicon{color:var(--c-cut);display:block;margin-bottom:var(--sp-2)}

/* ---- send to a friend ---- */
.friend{display:flex;justify-content:center;margin:var(--sp-5) 0 0}

/* ---- send to a friend ---- */
.friend{display:flex;justify-content:center;margin:var(--sp-5) 0 0}
.shareicon{flex:0 0 auto}

/* ---- send to a friend ---- */
.friend{display:flex;justify-content:center;margin:var(--sp-5) 0 0}
.fbtn.share{
  border-color:var(--c-cut);color:var(--c-mist);
  padding:0 var(--sp-5);cursor:pointer;
}
.fbtn.share:hover{background:var(--c-cut);color:var(--c-white)}


/* ============================================================
   DESIGN SLIDESHOW — same treatment as the hero, so the
   concept -> assembled -> finished sequence gets full width.
   ============================================================ */
.des-show{
  position:relative;margin:0;overflow:hidden;
  background:var(--c-paper);border:var(--hair) solid var(--c-edge);
}
.ds-track{position:relative;width:100%;aspect-ratio:var(--ds-ratio);background:var(--c-paper)}
.ds-track img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:var(--c-paper);
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.ds-track img.on{opacity:1}
.ds-bar{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--a-white-25);z-index:2}
.ds-bar span{display:block;height:100%;width:0;background:var(--c-cut)}
.ds-dots{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:6px}
.ds-dots button{
  position:relative;width:var(--dot-size);height:var(--dot-size);
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--a-white-45);transition:background var(--t-fast),transform var(--t-fast);
}
.ds-dots button::before{content:"";position:absolute;left:50%;top:50%;
  width:var(--tap-min);height:var(--tap-min);transform:translate(-50%,-50%)}
.ds-dots button[aria-selected=true]{background:var(--c-cut);transform:scale(1.5)}
.des-show .callout{position:absolute;bottom:0;left:0;z-index:2}
@media(prefers-reduced-motion:reduce){
  .ds-track img{transition:none}
  .ds-bar{display:none}
}

/* ---- machine photos ---- */
.mach{padding:0;overflow:hidden}
.mach-shot{margin:0;background:var(--c-paper);border-bottom:var(--hair) solid var(--c-edge)}
.mach-shot img{width:100%;height:auto;display:block;aspect-ratio:var(--mach-shot-ratio);object-fit:cover}
.mach > :not(.mach-shot){margin-left:var(--sp-5);margin-right:var(--sp-5)}
.mach-name{margin-top:var(--sp-5)}
.mach > :last-child{margin-bottom:var(--sp-5)}


/* ============================================================
   TALLY — counts shown as countable marks under a drawing
   dimension. Figures the reader can verify by eye.
   ============================================================ */
.tallies{display:flex;flex-direction:column;gap:var(--tally-row-gap);margin:0 0 var(--sp-7)}
.tally{display:flex;flex-direction:column;gap:var(--sp-3)}

.tally-marks{
  display:flex;flex-wrap:wrap;gap:var(--tally-gap);
  color:var(--c-cut);line-height:0;
}
.tally-marks svg{width:var(--tally-glyph);height:var(--tally-glyph);flex:none}
/* marks are individually drawn — each one is a different person or a
   different process, so none of them is a repeat to be quietened */

/* drawing dimension: |<--- 12 ---> | */
.dim{display:flex;align-items:center;gap:var(--sp-3)}
.dim-cap{width:var(--hair);height:var(--dim-cap);background:var(--c-mist);flex:none}
.dim-line{height:var(--hair);background:var(--c-edge);flex:1}
.dim-n{
  font-family:var(--f-mono);font-size:var(--tally-num);font-weight:var(--fw-normal);
  line-height:1;color:var(--c-ink);letter-spacing:var(--ls-snug);flex:none;
  font-variant-numeric:tabular-nums;
}
.dim-lbl{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--c-steel);margin:0;
}
@media (max-width:420px){
  .tally-marks{gap:calc(var(--tally-gap) - 2px)}
}


/* --- tally motion: marks arrive one at a time, figure rolls up ----------
   Hidden state is applied by app.js only, so with JS off or broken the
   marks are simply visible. Nothing here can make content disappear. */
.tallies.anim .tally-marks svg{
  opacity:0;transform:translateY(var(--tally-rise));
  transition:opacity var(--tally-dur) ease, transform var(--tally-dur) cubic-bezier(.2,.7,.3,1);
}
.tallies.anim .tally-marks svg.in{opacity:1;transform:none}
.dim-n{transition:color var(--tally-count-dur) ease}
.tallies.anim .dim-n.counting{color:var(--c-cut)}
@media (prefers-reduced-motion:reduce){
  .tallies.anim .tally-marks svg{opacity:1;transform:none;transition:none}
  .dim-n{transition:none}
}