/* ------------------------------------------------------------------
   The cutting table. Paper, ink, one selvedge red, and spec-sheet type.
   ------------------------------------------------------------------ */
:root{
  --paper:#EEE9DF; --paper-2:#E5DFD2; --card:#F7F4EE;
  --ink:#131313; --ink-2:#2B2B29; --muted:#6F6A61; --line:#CBC3B4; --line-soft:#DDD6C9;
  --red:#C8361B; --red-ink:#9E2812;
  --night:#121417; --night-2:#1B1E22; --night-line:#2E3238; --night-text:#E9E4DA; --night-muted:#8E9196;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Inter Tight", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --gutter:clamp(16px, 4vw, 40px);
  --max:1280px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.label b{color:var(--red);font-weight:500}

/* selvedge: the red-and-white edge a mill weaves into good cloth */
.selvedge{height:6px;background:repeating-linear-gradient(90deg,var(--red) 0 18px,#F4EFE6 18px 22px,var(--red) 22px 26px,#F4EFE6 26px 40px)}

/* ---------- tape measure scroll progress ---------- */
.tape{position:fixed;inset:0 0 auto 0;height:14px;z-index:60;background:#E8D9A8;border-bottom:1px solid #C9B77E;overflow:hidden}
.tape::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,#3B3320 0 1px,transparent 1px 10px) 0 100%/100% 4px no-repeat,
  repeating-linear-gradient(90deg,#3B3320 0 1px,transparent 1px 50px) 0 100%/100% 7px no-repeat,
  repeating-linear-gradient(90deg,#3B3320 0 1.5px,transparent 1.5px 100px) 0 100%/100% 10px no-repeat}
.tape i{position:absolute;top:0;bottom:0;left:0;width:0;background:rgba(200,54,27,.22);border-right:2px solid var(--red)}
.tape span{position:absolute;top:0;font:9px/1 var(--mono);color:#3B3320;transform:translateX(3px)}

/* ---------- header ---------- */
.top{position:sticky;top:14px;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;gap:24px;height:62px}
.brand{display:inline-flex;flex-direction:column;gap:3px;font-family:var(--serif);font-size:31px;line-height:.95;text-decoration:none;letter-spacing:-.005em;word-spacing:.04em;white-space:nowrap}
.brand small{font-family:var(--mono);font-size:8.5px;line-height:1;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;padding-left:1px}
.top nav{display:flex;gap:26px;margin-left:auto}
.top nav a{text-decoration:none;font-size:14.5px;color:var(--ink-2);position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.top nav a:hover::after{transform:scaleX(1)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:14.5px;font-weight:500;border:0;cursor:pointer;transition:background .25s,transform .25s var(--ease);white-space:nowrap}
.pill:hover{background:var(--red);transform:translateY(-1px)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}
.pill:hover .dot{background:#fff}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pill.ghost:hover{background:var(--ink);color:var(--paper)}
.pill.big{padding:15px 24px;font-size:16px}
@media (max-width:900px){.top nav{display:none}.top .pill{margin-left:auto}}
@media (max-width:640px){.brand small{display:none}}
@media (max-width:420px){.brand{font-size:21px}.top .pill{padding:10px 14px;font-size:13.5px}.top .wrap{gap:12px}}

/* ---------- hero: full-bleed mill film; on scroll the frame pulls back into a panel (--p set by site.js) ---------- */
.hero{position:relative;--p:0}
.stage{position:relative;height:calc(100svh - 76px);min-height:600px;max-height:980px;overflow:hidden;background:#12161d;isolation:isolate;color:#F4EFE6;
  clip-path:inset(0 calc(var(--p) * var(--gutter)) calc(var(--p) * 28px) round calc(var(--p) * 22px))}
.stage .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p) * .12));transform-origin:50% 40%;will-change:transform}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,12,16,.82) 0%,rgba(10,12,16,.55) 38%,rgba(10,12,16,.08) 70%),
  linear-gradient(180deg,rgba(10,12,16,.35) 0%,transparent 22%,transparent 62%,rgba(10,12,16,.78) 100%)}
.stage .edge{position:absolute;top:0;bottom:0;left:0;width:10px;z-index:2;background:repeating-linear-gradient(180deg,var(--red) 0 14px,#F4EFE6 14px 18px)}
.hero-in{position:relative;z-index:3;height:100%;display:flex;align-items:center;padding-bottom:80px}
.hero-copy{max-width:720px;transform:translateY(calc(var(--p) * -60px));opacity:calc(1 - var(--p) * .9)}
.hero .label{color:rgba(244,239,230,.72)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(58px,7.4vw,116px);line-height:.84;letter-spacing:-.035em;margin:16px 0 0;text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero h1 em{font-style:italic;color:#E9583C}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .04em .14em 0;margin-bottom:-.14em}
.hero h1 .ln > span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) .15s forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:.3s}
@keyframes rise{to{transform:none}}
.hero .lede{font-size:clamp(17px,1.5vw,20px);max-width:500px;color:rgba(244,239,230,.86);margin:22px 0 0;opacity:0;animation:fadeup .9s var(--ease) .6s forwards}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;opacity:0;animation:fadeup .9s var(--ease) .75s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .pill{background:var(--red);color:#fff}
.hero .pill .dot{background:#fff}
.hero .pill:hover{background:#fff;color:var(--ink)}
.hero .pill:hover .dot{background:var(--red)}
.hero .pill.ghost{background:rgba(255,255,255,.06);color:#F4EFE6;box-shadow:inset 0 0 0 1px rgba(244,239,230,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero .pill.ghost:hover{background:#F4EFE6;color:var(--ink)}
.hero-base{position:absolute;z-index:3;left:0;right:0;bottom:0;padding-bottom:22px;opacity:calc(1 - var(--p) * 1.4)}
.hero-base .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.facts{list-style:none;padding:14px 0 0;margin:0;display:flex;flex-wrap:wrap;gap:8px 26px;border-top:1px solid rgba(244,239,230,.28);max-width:640px;flex:1}
.facts li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(244,239,230,.88)}
.facts li::before{content:"✓ ";color:#E9583C}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:8px;font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.7);text-decoration:none}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(rgba(244,239,230,.15),rgba(244,239,230,.8));position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#E9583C;animation:drop 1.8s var(--ease) infinite}
@keyframes drop{to{top:100%}}

/* hang tag, on its string over the film */
.tag{position:absolute;z-index:3;top:46px;right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));width:200px;transform-origin:50% -46px;animation:sway 6s ease-in-out infinite}
.tag::before{content:"";position:absolute;left:50%;top:-60px;width:1px;height:72px;background:linear-gradient(transparent,#D9CFBF 40%,#A89B86)}
.tag-body{transition:opacity .35s,transform .35s var(--ease);position:relative;background:#F6F1E6;color:var(--ink);padding:26px 16px 14px;border-radius:3px 3px 10px 10px;box-shadow:0 22px 50px rgba(0,0,0,.45);clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%)}
.tag-body::before{content:"";position:absolute;left:50%;top:9px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#1d2533;box-shadow:0 0 0 2px #D8CDB9}
.tag-body .label{color:var(--muted)}
.tag-body h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1;margin:6px 0 10px}
.tag-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font:11px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.tag-body dt{color:var(--muted)}
.tag-body dd{margin:0;text-align:right}
.tag-body .bar{margin-top:12px;height:22px;background:repeating-linear-gradient(90deg,#131313 0 2px,transparent 2px 4px,#131313 4px 5px,transparent 5px 8px,#131313 8px 11px,transparent 11px 12px)}
.tag-body.swap{opacity:0;transform:translateY(-6px)}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}

@media (max-width:900px){
  .shade{background:linear-gradient(180deg,rgba(10,12,16,.45) 0%,rgba(10,12,16,.35) 40%,rgba(10,12,16,.85) 100%)}
  .hero-in{align-items:flex-end;padding-bottom:120px}
  .tag{width:158px;top:30px}
  .tag-body h3{font-size:21px}
  .scroll-cue{display:none}
}
@media (max-width:560px){.tag{display:none}.stage{min-height:560px}.facts li{font-size:11px}}

/* ---------- sections ---------- */
.sec{padding:clamp(40px,4.6vw,64px) 0}
/* every section opens the same way, on the same left edge: label, then heading, the intro beside it */
.sec-head{margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head > .label{margin-bottom:14px}
.sec-head > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 44px;align-items:center}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.8vw,64px);line-height:.98;letter-spacing:-.025em;margin:0;max-width:22ch;text-wrap:balance}
.sec-head h2 em{color:var(--red)}
.sec-head > h2.one-line{max-width:none;white-space:nowrap}
@media (max-width:900px){.sec-head > h2.one-line{white-space:normal}}
.sec-head p{max-width:46ch;color:var(--ink-2);margin:0;font-size:17px}
.night .sec-head p{color:#A9ACB0}
@media (max-width:760px){.sec-head > div{grid-template-columns:1fr}}

.night{background:var(--night);color:var(--night-text)}
.night .label{color:var(--night-muted)}
.night .sec-head h2 em{color:#E2553A}

/* woven swatch drawn in CSS (until a real photo is uploaded) */
.sw{width:100%;height:100%;background-color:var(--c)}
.sw.herringbone{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 3px,transparent 3px 8px),repeating-linear-gradient(-45deg,rgba(0,0,0,.2) 0 3px,transparent 3px 8px);background-size:16px 16px;background-position:0 0,8px 0}
.sw.twill{background-image:repeating-linear-gradient(60deg,rgba(0,0,0,.18) 0 2px,transparent 2px 6px),linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.08))}
.sw.linen{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0 1px,transparent 1px 4px)}
.sw.plain{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px)}

/* headings that rise in word by word (spans added by site.js) */
.split .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .22em 0;margin:0 -.06em -.22em 0}
.split .wd > span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
.split.in .wd > span{transform:none}

/* moving band under the hero */
.ticker{margin-top:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;white-space:nowrap}
.ticker div{display:inline-flex;gap:38px;padding:12px 0;animation:tick 46s linear infinite}
.ticker:hover div{animation-play-state:paused}
.ticker span{font-family:var(--serif);font-size:26px;line-height:1}
.ticker span i{font-style:normal;color:var(--red);margin-left:38px;font-size:.42em;vertical-align:.4em}
@keyframes tick{to{transform:translateX(-50%)}}

/* contact: identity card + requirement slip */
/* contact sits on the same paper; a rule on the content edge marks where it starts */
.contact,#order{padding-top:0}
.contact > .wrap,#order > .wrap{padding-top:clamp(40px,4.6vw,64px);background:linear-gradient(var(--line),var(--line)) var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px no-repeat}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,44px) 44px;align-items:start}
.reach h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.8vw,64px);line-height:.98;letter-spacing:-.025em;margin:14px 0 20px}
.reach h2 em{color:var(--red)}
.wa-pill{background:#1F7A4D}
.wa-pill:hover{background:#17603C}
.card{margin:20px 0 0;border-top:2px solid var(--ink)}
.card div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.card dt{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.card dd{margin:0;font-family:var(--serif);font-size:22px;line-height:1.2}
.card dd.mono-v{font:500 15px var(--mono);letter-spacing:.06em;padding-top:3px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

.slip{position:relative;background:var(--card);padding:clamp(20px,2.6vw,30px);box-shadow:0 30px 60px -36px rgba(0,0,0,.45)}
.slip::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;background:radial-gradient(circle at 8px 8px,var(--paper) 5px,transparent 5.5px) 0 0/16px 16px repeat-x}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:4px}
.slip-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1;margin:0}
.slip-head span{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.line-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.lf{border-bottom:1px solid var(--line);padding:10px 0 6px}
.lf.full{grid-column:1/-1}
.lf label{display:block;font:10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lf input,.lf select,.lf textarea{width:100%;background:transparent;border:0;outline:none;padding:6px 0 2px;font-size:19px;font-family:var(--serif);appearance:none;-webkit-appearance:none}
.lf select{cursor:pointer}
.lf textarea{resize:vertical;min-height:60px}
.lf:focus-within{border-color:var(--red)}
.lf:focus-within label{color:var(--red)}
.slip-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{margin:0 0 18px;padding:14px 18px;font-size:15px;border-left:3px solid var(--red);background:var(--card)}
@media (max-width:640px){.line-f{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--night);color:var(--night-text);padding:44px 0 22px;overflow:hidden}
.wordmark{font-family:var(--serif);font-size:clamp(44px,7vw,110px);line-height:1;letter-spacing:-.012em;word-spacing:.06em;margin:0 0 24px;color:var(--night-text)}
.wordmark em,.sh-firm em{display:inline-block;width:.13em;height:.13em;margin-left:.14em;border-radius:50%;background:var(--red);color:transparent;overflow:hidden;font-size:inherit;vertical-align:.02em;line-height:0}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--night-line);padding-top:18px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--night-muted)}

.wa{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:10px;background:#1F7A4D;color:#fff;text-decoration:none;padding:12px 18px 12px 14px;border-radius:999px;font-size:14.5px;font-weight:500;box-shadow:0 14px 34px -10px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:20px;height:20px}

/* card actions: rate + spec sheet */
.stag-acts{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.stag-acts .pill{margin:0}
.spec-link{font:11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.spec-link:hover{color:var(--red);border-color:var(--red)}

/* ---------- order tracking page ---------- */
.trk{padding:clamp(28px,4vw,56px) var(--gutter) 64px;max-width:980px}
.trk-find h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,8vw,104px);line-height:.9;letter-spacing:-.03em;margin:14px 0 14px}
.trk-find h1 em{color:var(--red)}
.trk-find > p{max-width:520px;color:var(--ink-2);margin:0 0 20px}
.trk-form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) auto;gap:8px 28px;align-items:end;background:var(--card);padding:20px 24px 24px;max-width:760px;box-shadow:0 30px 60px -36px rgba(0,0,0,.45)}
.trk-small{font-size:14px;color:var(--muted);margin:14px 0 0}
.trk-demo{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#E8D9A8;color:#3B3320;padding:10px 14px;border-radius:4px;margin-bottom:18px}
@media (max-width:640px){.trk-form{grid-template-columns:1fr}.trk-form .pill{justify-content:center}}

.docket{background:var(--card);border-radius:6px;box-shadow:0 30px 60px -36px rgba(0,0,0,.45);overflow:hidden;position:relative}
.docket::before{content:"";display:block;height:6px;background:repeating-linear-gradient(90deg,var(--red) 0 18px,#F4EFE6 18px 22px,var(--red) 22px 26px,#F4EFE6 26px 40px)}
.dk-top{display:flex;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;padding:22px clamp(18px,3vw,32px);border-bottom:1px dashed var(--line)}
.dk-code{font:500 clamp(28px,4vw,40px)/1 var(--mono);letter-spacing:.02em;margin:6px 0 0}
.dk-meta{display:flex;gap:28px;flex-wrap:wrap}
.dk-meta b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin-top:4px}
.dk-meta i{display:block;font-style:normal;font-size:14px;color:var(--muted)}
.dk-now{display:flex;gap:18px;align-items:flex-start;padding:24px clamp(18px,3vw,32px) 8px}
.dk-dot{flex:none;width:16px;height:16px;margin-top:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(200,54,27,.45);animation:pingr 2s infinite}
.dk-dot.done{background:#1F7A4D;animation:none}
@keyframes pingr{70%{box-shadow:0 0 0 12px rgba(200,54,27,0)}100%{box-shadow:0 0 0 0 rgba(200,54,27,0)}}
.dk-now h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,64px);line-height:1;letter-spacing:-.02em;margin:0}
.dk-now p{margin:6px 0 0;color:var(--ink-2);max-width:56ch}
.dk-now .dk-upd{font:11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* the route: stops joined by a line; the leg in progress runs a moving thread instead of a percentage */
.route{list-style:none;margin:0;padding:28px clamp(18px,3vw,32px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.route li{position:relative;padding-right:10px}
.route li::before{content:"";position:absolute;top:15px;left:32px;right:0;height:2px;background:var(--line)}
.route li:last-child::before{display:none}
.route li.past::before{background:var(--red)}
.route li.here::before{background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 16px) 0 0/32px 2px;animation:thread 1.1s linear infinite}
@keyframes thread{to{background-position:32px 0}}
.stop{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--line);font:500 13px var(--mono);color:var(--muted)}
.past .stop{background:var(--red);box-shadow:none;color:#fff}
.here .stop{box-shadow:inset 0 0 0 2px var(--red);color:var(--red)}
.route b{display:block;font-weight:500;font-size:15px;margin-top:10px;line-height:1.2}
.route small{display:block;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.here b{color:var(--red)}
@media (max-width:640px){
  .route{grid-template-columns:1fr;gap:0}
  .route li{display:grid;grid-template-columns:32px 1fr;column-gap:14px;padding:0 0 18px}
  .route li::before{top:32px;bottom:0;left:15px;right:auto;width:2px;height:auto}
  .route li.here::before{background:repeating-linear-gradient(180deg,var(--red) 0 8px,transparent 8px 16px) 0 0/2px 32px;animation:threadv 1.1s linear infinite}
  .route .stop{grid-row:span 2}
  .route b{margin-top:6px}
}
@keyframes threadv{to{background-position:0 32px}}

.trk-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;margin-top:18px}
.trk-card{background:var(--card);border-radius:6px;padding:22px clamp(18px,2.6vw,28px)}
.win{font-family:var(--serif);font-size:clamp(34px,4.4vw,48px);line-height:1;margin:8px 0 4px}
.win-v{margin:0;color:#1F7A4D;font-weight:500}
.here.fin .stop{background:#1F7A4D;box-shadow:none;color:#fff}
.here.fin b{color:#1F7A4D}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:16px;max-width:420px}
.cal b{font:500 10px var(--mono);letter-spacing:.1em;color:var(--muted);text-align:center;padding-bottom:2px}
.cal span{position:relative;display:grid;place-items:center;height:40px;border-radius:6px;font:500 14px var(--mono);color:var(--ink-2);background:var(--paper)}
.cal span i{position:absolute;top:2px;font-style:normal;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cal .in{background:#F3D9CF;color:var(--red-ink)}
.cal .first,.cal .last{background:var(--red);color:#fff}
.cal .first i,.cal .last i,.cal .sent i{color:rgba(255,255,255,.8)}
.cal .today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal .sent{background:#1F7A4D;color:#fff}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.key.today{box-shadow:inset 0 0 0 2px var(--ink)}
.key.in{background:var(--red)}
.key.sent{background:#1F7A4D}
.moved{margin-top:14px;padding:12px 14px;border-left:3px solid var(--red);background:var(--paper);font-size:14.5px}
.trk-card .card{margin-top:12px}
.trk-card .card div{grid-template-columns:110px minmax(0,1fr)}
.trk-note{margin:14px 0 0;font-size:15px;color:var(--ink-2)}
.trk-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.trk-how{margin:22px 0 0;font-size:14.5px;color:var(--muted);max-width:72ch;border-top:1px solid var(--line);padding-top:16px}
.trk-how b{color:var(--ink)}
@media (max-width:760px){.trk-grid{grid-template-columns:1fr}}

/* ---------- spec sheets: A4 paper on screen, clean pages in print ---------- */
.spec-page{background:#D9D3C6}
.spec-bar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.spec-bar .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.spec-back{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:background .2s,color .2s}
.spec-back:hover{background:var(--ink);color:var(--paper)}
.spec-pick{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.spec-pick a{text-decoration:none;font-size:13.5px;padding:7px 12px;border-radius:999px;color:var(--ink-2)}
.spec-pick a:hover{background:var(--paper-2)}
.spec-pick a.on{background:var(--ink);color:var(--paper)}
.spec-acts{display:flex;gap:8px;flex-wrap:wrap}
.sheets{padding:28px 12px 60px;display:flex;flex-direction:column;align-items:center;gap:28px}
.sheet{width:min(210mm,100%);min-height:297mm;background:#FBF9F4;box-shadow:0 30px 70px -30px rgba(0,0,0,.45);padding:14mm 14mm 10mm;display:flex;flex-direction:column;gap:9mm;position:relative}
.sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:repeating-linear-gradient(180deg,var(--red) 0 14px,#F4EFE6 14px 18px)}
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:5mm}
.sh-firm{font-family:var(--serif);font-size:34px;line-height:1;margin:0 0 4px;letter-spacing:-.02em}

.sh-ref{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.sh-main{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:9mm}
.sh-img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#1d2533}
.sh-img img,.sh-img .sw{width:100%;height:100%;object-fit:cover}
.sh-spec h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,58px);line-height:.95;letter-spacing:-.025em;margin:0 0 6mm}
.sh-spec dl{margin:0;border-top:1px solid var(--ink)}
.sh-spec dl div{display:grid;grid-template-columns:34mm minmax(0,1fr);gap:10px;padding:3.4mm 0;border-bottom:1px dashed var(--line)}
.sh-spec dt{font:10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.sh-spec dd{margin:0;font-family:var(--serif);font-size:21px;line-height:1.15}
.sh-spec dd.tbc{font:italic 16px var(--serif);color:var(--muted)}
.sh-foot{display:grid;grid-template-columns:minmax(0,1fr) 50mm;gap:9mm;align-items:start;margin-top:auto}
.sh-order ol{margin:8px 0 0;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sh-order li{padding:2px 0}
.sh-terms{margin:12px 0 0;display:flex;gap:24px;flex-wrap:wrap}
.sh-terms dt{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sh-terms dd{margin:2px 0 0;font-family:var(--serif);font-size:19px}
.sh-qr{text-align:center;border:1px solid var(--line);padding:4mm;border-radius:4px;background:#fff}
.sh-qr .qr{width:100%;aspect-ratio:1;display:grid;place-items:center}
.sh-qr .qr img,.sh-qr .qr canvas{width:100%!important;height:auto!important}
.sh-qr b{display:block;font-size:13.5px;margin-top:3mm}
.sh-qr span{display:block;font-size:11px;color:var(--muted);line-height:1.3;margin-top:2px;word-break:break-all}
.sh-id{display:flex;flex-wrap:wrap;gap:4mm 9mm;border-top:2px solid var(--ink);padding-top:4mm}
.sh-id b{display:block;font-weight:500;font-size:13.5px;margin-top:2px}
@media (max-width:640px){
  .sheet{min-height:0;padding:22px 18px}
  .sh-main,.sh-foot{grid-template-columns:1fr}
  .sh-img{aspect-ratio:16/10}
  .sh-qr{max-width:220px}
  .spec-pick{margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .spec-pick::-webkit-scrollbar{display:none}
  .spec-pick a{flex:none}
  .spec-acts{width:100%}
  .spec-acts .pill{flex:1;justify-content:center;padding:10px 12px;font-size:14px}
  .sh-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sh-ref{align-items:flex-start;flex-direction:row;gap:14px}
  .sh-firm{font-size:28px;white-space:nowrap}
}
@page{size:A4;margin:0}
@media print{
  .spec-page{background:#fff}
  .spec-bar{display:none}
  .sheets{padding:0;gap:0;display:block}
  .sheet{width:210mm;height:297mm;min-height:0;box-shadow:none;break-after:page;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet:last-child{break-after:auto}
}

/* ---------- B2B sections: ruled grids, spec-sheet type, one red ---------- */
/* sections after the first are divided by a rule on the content edge */
.sec.rule{padding-top:0}
.sec.rule > .wrap{padding-top:clamp(40px,4.6vw,64px);background:linear-gradient(var(--line),var(--line)) var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px no-repeat}

/* 01 qualities: product cards on the paper. The film plays on hover (or when seen, on phones). */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.prod{display:flex;flex-direction:column}
.prod-media{position:relative;display:block;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#1d2533;box-shadow:0 24px 44px -30px rgba(0,0,0,.55);isolation:isolate;text-decoration:none;color:#F4EFE6}
.prod-media img,.prod-media video,.prod-media .sw{width:100%;height:100%;object-fit:cover;transform:scale(1.02);filter:saturate(.8) brightness(.85);transition:transform 1.2s var(--ease),filter .6s}
.prod-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,16,.35),transparent 28%,transparent 55%,rgba(10,12,16,.85));transition:opacity .5s}
.prod-badge{position:absolute;z-index:2;top:14px;left:14px;padding:6px 10px;border-radius:999px;background:rgba(244,239,230,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(244,239,230,.25);font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.prod-n{position:absolute;z-index:2;top:16px;right:16px;font:12px var(--mono);letter-spacing:.1em;color:rgba(244,239,230,.7)}
/* specs rise into the bottom of the film on hover */
.prod-peek{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:0;padding:12px 14px;border-radius:8px;background:rgba(16,18,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(244,239,230,.12);transform:translateY(calc(100% + 16px));transition:transform .55s var(--ease)}
.prod-peek > span{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(244,239,230,.12);font-size:13.5px}
.prod-peek i{font:normal 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.6);padding-top:2px}
.prod-peek b{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#E2553A;padding-top:9px}
.prod:hover .prod-media img,.prod:hover .prod-media video,.prod-media:focus-visible img,.prod-media:focus-visible video{transform:scale(1.07);filter:none}
.prod:hover .prod-peek,.prod-media:focus-visible .prod-peek{transform:none}
.prod-info{padding:18px 2px 0;display:flex;flex-direction:column;flex:1}
.prod-info h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.5vw,36px);line-height:1;letter-spacing:-.015em;margin:0}
.prod-info p{margin:8px 0 16px;color:var(--ink-2);font-size:15px}
.prod-acts{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.products .pill{padding:10px 16px;font-size:14px}
.products .pill.ghost{padding:13px 22px;font-size:15px}
.sec-side .spec-link{display:inline-block;margin-top:12px;font-weight:700!important;font-size:12.5px;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.sec-side .spec-link:hover{color:var(--red);border-color:var(--red)}
@media (max-width:1100px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}.prod-media{aspect-ratio:5/4}}
@media (max-width:560px){
  .prods{grid-template-columns:1fr;gap:28px}
  .prod-media{aspect-ratio:4/3}
  .prod-peek{display:none}
}

/* 02 ordering: an iPhone with four WhatsApp screens that slide sideways, one per step; the caption beside it follows */
/* the handset: natural-titanium band, black bezel, Dynamic Island, buttons on both sides */
.iphone{--h:clamp(600px,78vh,700px);position:relative;justify-self:center;height:var(--h);width:calc(var(--h) * .485);padding:calc(var(--h) * .016);border-radius:calc(var(--h) * .118);
  background:#050506;box-shadow:0 0 0 calc(var(--h) * .0055) #9b978f,0 0 0 calc(var(--h) * .0095) #cfcbc3,0 0 0 calc(var(--h) * .011) #77746e,
  0 70px 110px -50px rgba(0,0,0,.6),0 26px 46px -28px rgba(0,0,0,.4)}
.ip-btn{position:absolute;width:calc(var(--h) * .0075);border-radius:2px;background:linear-gradient(90deg,#77746e,#c9c5bd 50%,#8d8a83)}
.ip-btn.a{left:calc(var(--h) * -.016);top:16%;height:4.4%}
.ip-btn.b{left:calc(var(--h) * -.016);top:24%;height:7.5%}
.ip-btn.c{left:calc(var(--h) * -.016);top:33.5%;height:7.5%}
.ip-btn.d{right:calc(var(--h) * -.016);top:27%;height:11%}
.ip-screen{position:relative;height:100%;border-radius:calc(var(--h) * .102);overflow:hidden;display:flex;flex-direction:column;background:#EFE6DC;
  font:15px/1.35 -apple-system,"SF Pro Text","Segoe UI",var(--sans);color:#000}
.ip-island{position:absolute;z-index:6;top:calc(var(--h) * .017);left:50%;width:30%;height:calc(var(--h) * .05);transform:translateX(-50%);border-radius:999px;background:#000}
.ip-status{display:flex;justify-content:space-between;align-items:center;height:calc(var(--h) * .082);padding:calc(var(--h) * .012) 7% 0 10%;background:#F6F6F6;font-size:calc(var(--h) * .024)}
.ip-status b{font-weight:600;letter-spacing:-.01em}
.ip-status > span{display:flex;align-items:center;gap:calc(var(--h) * .006)}
.ip-status svg{width:calc(var(--h) * .025);height:auto}
.ip-batt{position:relative;width:calc(var(--h) * .038);height:calc(var(--h) * .018);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);padding:1.5px}
.ip-batt::after{content:"";position:absolute;right:-3px;top:4px;width:1.5px;height:4px;border-radius:0 1px 1px 0;background:rgba(0,0,0,.35)}
.ip-batt i{display:block;height:100%;width:78%;border-radius:2px;background:#000}
/* iOS WhatsApp header: light bar, blue controls */
.ip-head{display:flex;align-items:center;gap:8px;padding:2px 14px 8px 10px;background:#F6F6F6;color:#007AFF}
.ip-av{display:grid;place-items:center;flex:none;width:calc(var(--h) * .052);height:calc(var(--h) * .052);border-radius:50%;background:var(--red);color:#fff;font:600 12px var(--sans)}
.ip-who{display:flex;flex-direction:column;min-width:0;color:#000}
.ip-who b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-who i{font-style:normal;font-size:11.5px;color:#8E8E93}
.ip-ico{margin-left:auto;display:flex;align-items:center;gap:calc(var(--h) * .024);flex:none}
.ip-ico svg{width:calc(var(--h) * .033);height:auto}
/* the steps, as a story bar */
.ip-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 10px 8px;background:#F6F6F6;border-bottom:.5px solid rgba(0,0,0,.15)}
.ip-steps button{display:flex;flex-direction:column;gap:5px;border:0;background:none;padding:0;cursor:pointer;text-align:left}
.ip-steps button > span{display:block;height:3px;border-radius:2px;background:rgba(0,0,0,.12);overflow:hidden}
.ip-steps button > span i{display:block;height:100%;width:0;background:#25D366}
.ip-steps button.past > span i{width:100%}
.ip-steps button.on > span i{animation:ipfill var(--dur,4.8s) linear forwards}
.ip-flow.hold .ip-steps button.on > span i,.ip-flow.still .ip-steps button.on > span i{animation-play-state:paused}
@keyframes ipfill{to{width:100%}}
.ip-steps b{font:600 10.5px var(--sans);color:#8E8E93;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-steps button.on b{color:#000}
/* the chat: four panes side by side, the track slides */
.ip-chat{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y}
.ip-chat::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.4'%3E%3Ccircle cx='15' cy='16' r='6'/%3E%3Cpath d='M55 10l8 8M63 10l-8 8'/%3E%3Crect x='30' y='48' width='14' height='10' rx='2'/%3E%3Cpath d='M70 55c4-6 12-6 14 0'/%3E%3Cpath d='M12 70l6-8 6 8z'/%3E%3Ccircle cx='60' cy='80' r='2'/%3E%3C/svg%3E") 0 0/90px 90px}
.ip-track{position:relative;display:flex;height:100%;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.ip-pane{flex:0 0 100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 10px 12px}
.ip-pane .d{align-self:center;margin:0 0 4px;padding:3px 10px;border-radius:9px;background:rgba(255,255,255,.85);font-size:11.5px;font-weight:500;color:#6B6B6B}
.ip-pane .m{position:relative;max-width:84%;padding:6px 10px 18px;border-radius:16px;font-size:14.5px;line-height:1.35;opacity:0;transform:translateY(12px) scale(.96)}
.ip-pane.on .m{animation:ipmsg .45s var(--ease) forwards}
.ip-pane.on .m:nth-of-type(2){animation-delay:.45s}
.ip-pane.on .m:nth-of-type(3){animation-delay:.9s}
.ip-pane.on .m:nth-of-type(4){animation-delay:1.35s}
.ip-pane.seen .m{opacity:1;transform:none}
@keyframes ipmsg{to{opacity:1;transform:none}}
.ip-pane .out{align-self:flex-end;background:#DCF7C5;border-bottom-right-radius:5px}
.ip-pane .in{align-self:flex-start;background:#fff;border-bottom-left-radius:5px}
.ip-pane .t{position:absolute;right:9px;bottom:4px;display:flex;align-items:center;gap:3px;font-size:10.5px;color:#8E8E93}
.ip-pane .t em{display:inline-flex;color:#34B7F1}
.ip-pane .doc{display:flex;align-items:center;gap:10px;min-width:215px}
.ip-pane .di{display:grid;place-items:center;flex:none;width:36px;height:42px;border-radius:5px;background:#E2553A;color:#fff;font:700 10px var(--sans)}
.ip-pane .di.lr{background:#5B6770}
.ip-pane .dt b{display:block;font-weight:600;font-size:13.5px}
.ip-pane .dt i{display:block;font-style:normal;font-size:11.5px;color:#8E8E93}
.ip-pane .pic{padding:4px 4px 20px}
.ip-pane .sw2{display:flex;gap:3px;width:200px;height:118px;border-radius:12px;overflow:hidden}
.ip-pane .sw2 b{flex:1;background:var(--c);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 2px,transparent 2px 7px),linear-gradient(160deg,rgba(255,255,255,.12),transparent 50%)}
.ip-pane .cap{display:block;padding:5px 6px 0;font-size:14px}
.ip-pane .lp{display:block;margin:6px 0 2px;padding:8px 10px;border-radius:10px;background:#F2F2F7;border-left:3px solid #25D366;text-decoration:none;color:inherit}
.ip-pane .lp b{display:block;font-size:13.5px}
.ip-pane .lp i{display:block;font-style:normal;font-size:12px;color:#8E8E93}
/* iOS input bar */
.ip-input{display:flex;align-items:center;gap:12px;padding:7px 14px calc(var(--h) * .045);background:#F6F6F6;color:#007AFF;border-top:.5px solid rgba(0,0,0,.12)}
.ip-plus{font-size:28px;line-height:1;font-weight:300}
.ip-field{flex:1;height:32px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.ip-home{position:absolute;z-index:6;left:50%;bottom:calc(var(--h) * .012);width:36%;height:5px;transform:translateX(-50%);border-radius:3px;background:#000}

/* tracking bar, on paper */
.trackbar{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,.7fr) auto auto;gap:8px 24px;align-items:end;padding:18px 22px;background:var(--card);border:1px solid var(--line-soft);border-top:2px solid var(--ink);border-radius:0 0 8px 8px}
.tb-l b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;margin-top:4px}
.trackbar .lf input{font-size:18px}
.trackbar .tb-demo{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding-bottom:12px}
.trackbar .tb-demo:hover{color:var(--red)}
@media (max-width:1000px){.trackbar{grid-template-columns:1fr 1fr}.tb-l{grid-column:1/-1}.trackbar .pill{justify-content:center}}

/* 02 start an order: form on the left writes the first WhatsApp message on the iPhone at right */
/* one panel: the route runs across the top; the form is step 1, the phone plays 2–4 */
.so-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:0;background:#FBF9F4;border-radius:18px;box-shadow:0 40px 80px -50px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.so-form{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0;padding:clamp(20px,2.6vw,34px);border-right:1px solid var(--line-soft)}
.so-card .iphone{margin:clamp(20px,2.6vw,34px) clamp(24px,3.4vw,48px)}
/* the route */
.so-route{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line-soft);background:var(--card)}
.so-route button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:18px 20px 20px;border:0;background:none;text-align:left;cursor:pointer;color:var(--muted);transition:color .3s,background .3s}
.so-route button + button{border-left:1px solid var(--line-soft)}
.so-route button:hover{background:#fff}
.so-route em{grid-row:span 2;font:500 12px var(--mono);font-style:normal;letter-spacing:.08em;color:inherit}
.so-route b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.1;color:inherit;white-space:normal;overflow:visible}
.so-route small{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 7px;border-radius:999px;background:#E3F5EA;color:#1E7A48;font:600 9.5px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.so-route i{font-style:normal;font-size:13px;color:var(--muted)}
.so-route button > span{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent;overflow:hidden}
.so-route button > span i{display:block;height:100%;width:0;background:#25D366}
.so-route button.past > span i{width:100%}
.so-route button.on > span i{animation:ipfill var(--dur,4.8s) linear forwards}
.so-route button.on,.so-route button.past{color:var(--ink)}
.so-route button.on em{color:#1E9E5A}
/* more details */
.qb-more{display:flex;align-items:center;gap:8px;width:100%;padding:12px 0;border:0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);background:none;cursor:pointer;text-align:left;font:500 14.5px var(--sans);color:var(--ink)}
.qb-more span{position:relative;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);font-size:0;transition:transform .3s var(--ease)}
.qb-more span::before,.qb-more span::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;border-radius:1px;background:var(--paper)}
.qb-more span::after{transform:rotate(90deg)}
.qb-more i{font-style:normal;font-size:13px;color:var(--muted)}
.qb-more span::before,.qb-more span::after{transition:transform .3s var(--ease)}
.qb-more[aria-expanded=true] span::before{transform:rotate(180deg)}
.qb-more[aria-expanded=true] span::after{transform:rotate(180deg)}
.qb-extra{display:flex;flex-direction:column;gap:6px;animation:fadeup .4s var(--ease)}
.qb-extra[hidden]{display:none}
.qb-row2.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.qb-k{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qb{display:flex;flex-direction:column;gap:14px}
.qb-step{display:flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.qb-step span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:10.5px;letter-spacing:0}
.qb-step ~ .qb-step{margin-top:6px;padding-top:16px;border-top:1px dashed var(--line)}
/* quality tiles */
.qb-q{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.qb-q legend{grid-column:1/-1;float:left;width:100%}
.qt{position:relative;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.qt input{position:absolute;opacity:0;pointer-events:none}
.qt-img{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#1d2533;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s,transform .25s var(--ease)}
.qt-img img,.qt-img .sw{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.7);transition:filter .3s}
.qt-any .qt-img{display:grid;place-items:center;background:var(--paper)}
.qt-any i{font:400 32px var(--serif);font-style:normal;color:var(--muted)}
.qt b{font-weight:500;font-size:13px;line-height:1.25;color:var(--ink-2)}
.qt:hover .qt-img{transform:translateY(-2px)}
.qt input:checked + .qt-img{box-shadow:0 0 0 2.5px var(--red),0 12px 24px -14px rgba(200,54,27,.6)}
.qt input:checked + .qt-img img{filter:none}
.qt input:checked ~ b{color:var(--ink)}
.qt input:focus-visible + .qt-img{outline:2px solid var(--red);outline-offset:3px}
/* quantity: chips and the box on one line */
.qb-qty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:end}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:6px}
.chips button{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 12.5px var(--mono);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chips button:hover{border-color:var(--ink)}
.chips button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qb-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
.qb-row2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 20px}
.qb .lf{padding:6px 0 4px}
.qb .lf input,.qb .lf select{font-size:17px}
.qb .lf input[type=date]{min-height:28px;font-size:15.5px}
.qb-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.qb-acts .pill{flex:1;justify-content:center}
#order .trackbar{margin-top:16px;grid-template-columns:auto minmax(0,1.2fr) minmax(0,.8fr) auto;border-radius:12px;border-top:1px solid var(--line-soft);padding:14px 18px}
.trackbar .tb-l b{font-size:22px}
/* the live message: a soft pulse when the form changes it */
.ip-pane .m.live{opacity:1;transform:none;animation:none}
.ip-pane .m.live.bump{animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:scale(1.03)}}
.so-card .iphone{--h:clamp(520px,62vh,560px)}
.so-card .ip-who b{font-size:14px}
.so-card .ip-head{gap:7px;padding-right:12px}
.so-card{--phw:calc(clamp(520px,62vh,560px) * .485 + 2 * clamp(24px,3.4vw,48px))}

@media (max-width:1100px){.qb-q{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .so-card{grid-template-columns:1fr}
  .so-form{border-right:0;border-bottom:1px solid var(--line-soft)}
  .so-card .iphone{justify-self:center;--h:min(160vw,600px);margin:24px auto}
  .so-route{grid-template-columns:repeat(4,minmax(0,1fr))}
  .so-route button{grid-template-columns:1fr;padding:12px 10px 14px}
  .so-route b{font-family:var(--sans);font-weight:600;font-size:13px}
  .so-route small,.so-route i{display:none}
}
@media (max-width:640px){
  .qb-row3,.qb-row2{grid-template-columns:1fr}
  .trackbar{grid-template-columns:1fr 1fr}
}

/* footer: columns, like a supplier's letterhead */
.foot-cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px 32px;padding-bottom:30px}
.foot-brand .wordmark{font-size:clamp(36px,3.6vw,54px);margin:0 0 10px;white-space:nowrap}
.foot-brand span{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted)}
.foot-cols nav,.foot-cols > div:last-child{display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--night-muted)}
.foot-cols b{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-text);margin-bottom:4px}
.foot-cols a{color:var(--night-muted);text-decoration:none}
.foot-cols a:hover{color:#E2553A}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- phones: swipe rows instead of long stacks, compact labels, a smaller handset ---------- */
.prods-dots{display:none}
@media (max-width:640px){
  /* products: a swipe row; the next card peeks in so it's clear there's more */
  .prods{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding:0 var(--gutter)}
  .prods::-webkit-scrollbar{display:none}
  .prod{flex:0 0 80%;scroll-snap-align:start}
  .prod-media{aspect-ratio:4/4.4}
  .prod-info h3{font-size:28px}
  .prod-info p{margin:6px 0 14px;font-size:14.5px}
  .prods-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .prods-dots i{width:18px;height:3px;border-radius:2px;background:var(--line);transition:background .3s,width .3s}
  .prods-dots i.on{width:32px;background:var(--red)}

  /* order panel */
  .so-route button{padding:12px 6px 14px 10px}
  .so-route em{font-size:10.5px}
  .so-route b{font-size:11.5px;line-height:1.2;letter-spacing:-.01em}
  .so-route button{min-width:0}
  .so-form{padding:18px 16px}
  .qb-q{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
  .qb-q::-webkit-scrollbar{display:none}
  .qb-q .qt{flex:0 0 92px}
  .qb-q .qt b{font-size:12.5px}
  .qb-q legend{display:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 6px}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none}
  .qb-row2.eq,.qb-qty{grid-template-columns:1fr 1fr;gap:0 14px}
  .qb-qty .chips{grid-column:1/-1}
  .qb-qty .lf{grid-column:2}
  .qb-acts{flex-direction:column}
  .so-card .iphone{--h:min(140vw,540px);margin:22px auto 26px}
  .so-card .ip-head{gap:6px;padding:2px 10px 7px 8px}
  .so-card .ip-who b{font-size:13px}
  .so-card .ip-who i{font-size:10.5px}
  .so-card .ip-ico{gap:10px}
  .so-card .ip-av{width:30px;height:30px;font-size:11px}

  /* footer: company details get the full width */
  .foot-cols > div:last-child{grid-column:1/-1}
  .foot-brand .wordmark{font-size:40px;word-spacing:0}

  /* hero copy a touch tighter */
  .hero .lede{font-size:16px;margin-top:16px}
  .cta{margin-top:20px}
}
@media (max-width:380px){
  .so-route b{font-size:11px}
  .prod{flex-basis:84%}
}

/* ==================================================================
   Cloth house dressing: the way fine-fabric mills present themselves.
   Spaced capitals instead of code type, the house name at the centre,
   a woven ground, stitched seams, swatches cut with pinking shears.
   ================================================================== */
:root{--mono:"Inter Tight",system-ui,sans-serif}
/* small labels: refined spaced capitals, not code */
.label,.lf label,.qb-k,.qb-step,.so-route em,.foot-cols b,.foot-base,.prod-badge,.prod-n,.spec-link,.chips button,.ip-steps b,.tb-demo{font-family:var(--sans)!important;font-weight:500}
.label{letter-spacing:.2em;font-size:11px}
.chips button{font-size:13px;letter-spacing:.02em}

/* a faint twill in the paper, like the face of a suiting */
body{background-image:repeating-linear-gradient(135deg,rgba(60,48,30,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(60,48,30,.014) 0 1px,transparent 1px 7px)}

/* ---------- header: the house name at the centre ---------- */
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:96px;gap:20px}
.top nav{margin:0;justify-self:start;gap:28px}
.top nav a{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.top .pill{justify-self:end}
.brand{align-items:center;gap:6px;font-size:54px;line-height:.9;letter-spacing:0;text-align:center}
.brand small{font:italic 400 16px/1 var(--serif);letter-spacing:.04em;text-transform:none;color:var(--muted);padding:0}
.brand small::before,.brand small::after{content:"";display:inline-block;width:22px;height:1px;background:var(--line);vertical-align:middle;margin:0 9px}
@media (max-width:900px){
  .top .wrap{grid-template-columns:1fr auto;height:70px}
  .top nav{display:none}
  .brand{align-items:flex-start;text-align:left;font-size:38px}
}
@media (max-width:640px){.brand small{display:none}.brand{font-size:30px}}
@media (max-width:380px){.brand{font-size:26px}}

/* tracking and spec pages keep a simple left-aligned bar */
.trk-page .top .wrap{display:flex}
.trk-page .brand,.spec-bar .brand{align-items:flex-start;text-align:left;font-size:30px}
.spec-bar .brand{font-size:28px}

/* sections meet at a stitched seam, not a hairline */
.sec.rule > .wrap,.contact > .wrap,#order > .wrap{background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 12px) var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px no-repeat}

/* ---------- the collection: swatches, not app cards ---------- */
.prod-media{border-radius:2px;
  /* pinking-shear edge along the bottom */
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 9px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 9px repeat-x;
  box-shadow:none}
.prod{filter:drop-shadow(0 18px 22px rgba(40,30,20,.18))}
/* a stitch line just inside the cut edge */
.prod-media::before{content:"";position:absolute;inset:10px 10px 18px;z-index:2;border:1px dashed rgba(244,239,230,.45);border-radius:1px;pointer-events:none}
/* the finish reads like a woven label */
.prod-badge{border-radius:2px;background:#F4EFE6;color:var(--ink);box-shadow:none;backdrop-filter:none;letter-spacing:.14em;font-size:10px;padding:6px 9px}
.prod-n{font-family:var(--serif)!important;font-style:italic;font-size:17px;letter-spacing:0}
.prod-n::before{content:"No. "}
.prod-info h3{font-size:clamp(30px,2.6vw,38px)}

/* ---------- order panel: a stitched swatch card around the form and phone ---------- */
.so-card{border-radius:4px;box-shadow:0 30px 60px -44px rgba(40,30,20,.5),0 0 0 1px rgba(0,0,0,.05)}
.so-card::after{content:"";position:absolute;inset:8px;border:1px dashed var(--line);border-radius:2px;pointer-events:none}
.so-route{background:transparent}
.so-route b{font-family:var(--serif)!important;font-weight:400!important;font-size:clamp(21px,1.9vw,27px)}
.tag-body .bar{height:8px;margin-top:14px;background:repeating-linear-gradient(90deg,var(--red) 0 14px,#F4EFE6 14px 17px,var(--red) 17px 20px,#F4EFE6 20px 30px)}
.so-route em{font-family:var(--serif)!important;font-style:italic;font-size:17px;font-weight:400;letter-spacing:0}
.qt-img{border-radius:3px}
.qb-more span{border-radius:2px}

/* quiet the pill buttons a little: squarer, like a tailor's label */
.pill{border-radius:3px;letter-spacing:.02em}
.wa-pill{border-radius:3px}

/* footer */
.foot-cols{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.foot-base{letter-spacing:.16em}

/* email floater */
.mail-fab{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:12px;padding:7px 20px 7px 7px;background:#FBF9F4;color:var(--ink);text-decoration:none;border-radius:2px;
  box-shadow:0 18px 40px -16px rgba(40,30,20,.55),0 0 0 1px rgba(0,0,0,.06);transition:transform .35s var(--ease),box-shadow .35s}
.mail-fab::after{content:"";position:absolute;inset:3px;border:1px dashed var(--line);border-radius:1px;pointer-events:none}
.mf-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:1px;background:var(--red);color:#fff;transition:background .3s}
.mf-ico svg{overflow:visible}
.mf-flap{transform-box:fill-box;transform-origin:50% 0;transition:transform .35s var(--ease)}
.mf-txt{display:flex;flex-direction:column;line-height:1.15}
.mf-txt b{font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mf-txt i{font:400 16px "Times New Roman",Times,serif;font-style:normal;margin-top:3px}
.mail-fab:hover{transform:translateY(-3px);box-shadow:0 24px 48px -16px rgba(40,30,20,.6),0 0 0 1px rgba(0,0,0,.08)}
.mail-fab:hover .mf-flap{transform:scaleY(-1)}
.mail-fab:hover .mf-ico{background:var(--red-ink)}
@media (max-width:640px){.mail-fab{right:14px;bottom:14px;padding:5px}.mail-fab::after{inset:2px}.mail-fab{border-radius:2px}.mf-txt{display:none}.mf-ico{width:46px;height:46px}}
@media print{.mail-fab{display:none}}
/* phones: order steps and footer columns sized for a small screen */
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:640px){
  .so-route b{font-size:14px!important;line-height:1.15;overflow-wrap:anywhere}
  .so-route em{font-size:13px}
  .so-route button{padding:12px 8px 14px}
  .foot-cols > div:last-child{grid-column:1/-1}
  .mf-ico{width:42px;height:42px}
}
@media (max-width:380px){.so-route b{font-size:12.5px!important}.qb-more i{display:none}}

/* phones: nothing cut off at the edge. Product row gets arrows; form tiles and chips fit in a grid */
.prods-wrap{position:relative}
.prods-arrow{display:none}
@media (max-width:640px){
  .prods-arrow{position:absolute;z-index:5;top:calc(40% - 22px);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:2px;background:#FBF9F4;color:var(--ink);cursor:pointer;
    box-shadow:0 10px 24px -8px rgba(40,30,20,.55),0 0 0 1px rgba(0,0,0,.06)}
  .prods-arrow::after{content:"";position:absolute;inset:3px;border:1px dashed var(--line);pointer-events:none}
  .prods-arrow.next{right:-6px}
  .prods-arrow.prev{left:-6px}
  .prods-arrow[hidden]{display:none}
  .prods-arrow:active{transform:scale(.94)}
  .prods-dots i{cursor:pointer;height:4px}
  .qb-q{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;margin:0;padding:0}
  .qb-q .qt{flex:none}
  .chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible;margin:0;padding:0 0 6px}
  .chips button{padding:8px 2px;font-size:12px;text-align:center}
}

/* phone form order: chips, then your name on its own line, then metres and phone side by side */
@media (max-width:640px){
  .qb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .qb > *{grid-column:1/-1}
  .qb-qty,.qb-row2.eq{display:contents}
  .qb-qty .chips{grid-column:1/-1;order:1}
  .qb-row2.eq > .lf:first-child{grid-column:1/-1;order:2}
  .qb-qty > .lf,.qb-row2.eq > .lf:last-child{grid-column:auto;order:3}
  .qb-more,.qb-extra,.qb-acts{order:4}
  .qb-qty > .lf{margin-top:0}
}

/* phone footer: compact, about the height of the desktop one */
@media (max-width:640px){
  .foot{padding-top:28px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:18px 20px;padding-bottom:16px}
  .foot-brand .wordmark{font-size:30px;margin:0 0 4px}
  .foot-brand span{font-size:10px}
  .foot-cols nav,.foot-cols > div:last-child{gap:5px;font-size:13px}
  .foot-cols b{font-size:10px;margin-bottom:2px}
  .foot-cols > div:last-child{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .foot-cols > div:last-child b{flex-basis:100%}
  .foot-cols > div:last-child span:first-of-type{display:none}
  .foot-base{padding-top:12px;font-size:10px;gap:3px}
}

/* phones: no selvedge strip down the left of the hero */
@media (max-width:640px){.stage .edge{display:none}}

/* footer line sits on the left, clear of the floater */
.foot-base{justify-content:flex-start;align-items:center;gap:10px 40px}
/* the bottom line sits level with the email floater: its centre is 48px up on desktop, 40px on phones (below the footer runs a 6px selvedge) */
.foot{padding-bottom:34px}
@media (min-width:641px){.foot-base{gap:0}.foot-base > span + span{margin-left:var(--pvx,40px)}}
@media (max-width:640px){.foot{padding-bottom:26px}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .ln > span{transform:none}
  .hero .lede,.cta{opacity:1}
  .stage{clip-path:none}.stage .hero-film{transform:none}.hero-copy,.hero-base{transform:none;opacity:1}
  .rv{opacity:1;transform:none}
  .ip-pane .m{opacity:1;transform:none}
  .split .wd > span{transform:none}
  .split .wd > span{transform:none;opacity:1}
  .thread path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}