/* Hajjo Apparel & Manufacturing, direction D "The Order Book".
   The Bolmandi Order Book design carried to the factory: everything inside a 1440 frame on bone, a label card
   on the edge of a photograph, the olive accent line under every name, the olive and sand stripe under the ribbon.
   An information site for the factory: the garments as plain tiles, every page closing on the inquiry.
   Optima (system) with Marcellus, Newsreader 300 for headlines, the Cinzel Apparel lockup of the Group site. */
:root{
  --ground:#F7F5F1; --panel:#F3F0EB; --panel-2:#EEEAE5;
  --tile:#ECE8DF;                        /* sampled from the corners of the packshots in assets/garment, never themed */
  --ink:#1E1916; --grey:#5B5A57; --rule:#DED5CB; --rule-2:#CFC3B6;
  --sand:#D2C4AC; --off:#857E78;
  --acc:#6B694D; --acc-hover:#5E5C42; --t-acc:#5E5C42; --btn:#6B694D;
  --on-acc:#F7F5F1; --on-acc-soft:rgba(247,245,241,.9); --on-acc-line:rgba(247,245,241,.34);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:Optima,'Marcellus',Candara,sans-serif;
  --roman:'Cinzel',Georgia,serif;
  --logo-sans:'Jost',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(16px,2.65vw,38px);
  --ribbon-h:32px; --stripe-h:8px; --brand-h:100px; --nav-h:46px;
  --head-h:calc(var(--ribbon-h) + var(--stripe-h) + var(--brand-h) + var(--nav-h));
  --lock-w:282px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1A1512; --panel:#211B17; --panel-2:#29221D;
    --ink:#EDE4D6; --grey:#B3A899; --rule:#4A3E36; --rule-2:#5E5046;
    --sand:#6E5E52; --off:#7A726B; --t-acc:#A6A47E; --btn:#6B694D; --acc-hover:#7A7858;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#1A1512; --panel:#211B17; --panel-2:#29221D;
  --ink:#EDE4D6; --grey:#B3A899; --rule:#4A3E36; --rule-2:#5E5046;
  --sand:#6E5E52; --off:#7A726B; --t-acc:#A6A47E; --btn:#6B694D; --acc-hover:#7A7858;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.display{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:0;text-wrap:balance}
h1 em,h2 em,h3 em,.display em{font-style:italic;font-weight:300}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button,select{font:inherit;color:inherit;letter-spacing:inherit}
[hidden]{display:none !important}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:300;background:var(--ink);color:var(--ground);padding:10px 16px;font-size:14px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--t-acc);outline-offset:3px}
html.locked,html.locked body{overflow:hidden}

/* the 1440 frame: every block lives inside it */
.fr{width:min(1440px,100%);margin-inline:auto;padding-inline:var(--pad);padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}

/* type */
.caps{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:400;line-height:1.6}
.folio{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--grey);font-variant-numeric:oldstyle-nums}
.no{font-family:var(--serif);font-style:italic;font-variant-numeric:oldstyle-nums tabular-nums;color:var(--grey)}
.sec{padding-block:112px}
.sec.tight{padding-block:80px}
.sec-head{text-align:center;margin:0 auto 52px;max-width:720px}
.sec-head .caps{display:block;margin-bottom:12px}
.sec-head h2{font-size:clamp(27px,2.3vw,34px);line-height:1.18}
.sec-head p{margin:14px auto 0;color:var(--grey);max-width:56ch}
.sec-head .lede{margin-top:14px}
.sec-head .dash{margin-top:10px}
.lede{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--grey)}

/* links and buttons: links are underlined, never flanked by little lines */
.dash{display:inline-flex;align-items:center;color:var(--t-acc);font-size:14.5px;padding:6px 0;min-height:40px;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--t-acc) 55%,transparent);text-decoration-thickness:1px;text-underline-offset:5px;
  transition:text-decoration-color .3s var(--ease),text-decoration-thickness .3s var(--ease),text-underline-offset .3s var(--ease)}
.dash:hover,.dash:focus-visible,a:hover > .dash,a:focus-visible > .dash{text-decoration-color:var(--t-acc);text-decoration-thickness:2px;text-underline-offset:7px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 30px;font-family:var(--sans);font-size:14.5px;letter-spacing:.02em;text-decoration:none;text-align:center;border:0;cursor:pointer;transition:background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
.btn{background:var(--btn);color:var(--on-acc);box-shadow:inset 0 0 0 3px var(--btn),inset 0 0 0 4px rgba(247,245,241,.5)}
.btn:hover{background:var(--acc-hover);box-shadow:inset 0 0 0 3px var(--acc-hover),inset 0 0 0 4px rgba(247,245,241,.62)}
.btn[disabled]{opacity:.7;cursor:wait}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* reveal: only when JS runs and the tab is visible; content is visible by default */
html.rv-on .rv:not(.in){opacity:0;transform:translateY(12px)}
html.rv-on .rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* ─── the Apparel lockup, drawn exactly as the Group site draws it ─── */
.lockup{display:block;container-type:inline-size;width:var(--lock-w)}
.logo{display:grid;justify-items:center;line-height:1;color:var(--t-acc);font-family:var(--roman);font-weight:400}
.logo b{font-weight:400;font-size:9.4cqw;letter-spacing:.36em;text-indent:.36em;white-space:nowrap}
.logo i{display:block;height:1px;background:currentColor;width:100%;margin:6.5cqw 0 5.5cqw}
.logo small{font-family:var(--logo-sans);font-weight:400;font-size:3.6cqw;letter-spacing:.3em;text-indent:.3em;white-space:nowrap}
.logo-apparel i{width:118%}
.logo-apparel small{color:var(--grey);font-size:3.9cqw}

/* ─── header: ribbon, the olive and sand stripe, the lockup, the nav ─── */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--ground);transform:translateY(0);will-change:transform;transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.hd.solid{transform:translateY(calc(-1 * var(--ribbon-h)));box-shadow:0 1px 0 var(--rule)}
.hd.hide{transform:translateY(-110%);transition-duration:.24s}
.hd-space{height:var(--head-h)}
.ribbon{height:var(--ribbon-h);display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;transition:opacity .2s var(--ease)}
.hd.solid .ribbon{opacity:0}
.ribbon a{text-decoration:none;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}
.ribbon a:hover{color:var(--t-acc)}
.ribbon .short{display:none}
.stripe{height:var(--stripe-h);background:var(--sand);border-top:2px solid var(--t-acc);border-bottom:2px solid var(--t-acc)}
.hd-brand{height:var(--brand-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{grid-column:2;display:grid;align-items:center;min-height:40px;text-decoration:none}
.hd-brand .only-s{display:none}
.hd-nav{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.hd-nav .tag{font-size:13.5px;color:var(--grey);padding-top:5px;white-space:nowrap}
.pn{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.pn a{font-size:14.5px;text-decoration:none;white-space:nowrap;display:inline-block;padding:9px 0 10px;border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.pn a:hover{color:var(--t-acc)}
.pn a[aria-current="page"]{color:var(--t-acc);border-bottom-color:currentColor}
.hd-tools{justify-self:end;display:flex;align-items:center;gap:22px}
.burger{display:none;grid-column:1;justify-self:start;font-size:14.5px;text-decoration:none;background:none;border:0;padding:10px 4px;cursor:pointer;min-height:44px}

/* ─── home hero: the black and white suit film inside the frame, the label card over its foot ─── */
.hero{position:relative;height:clamp(480px,70vh,800px);height:clamp(480px,70svh,800px);background:#161413;isolation:isolate;margin-top:6px}
.hero .film{position:absolute;inset:0;overflow:hidden;z-index:-1;background:var(--tiny) center/cover no-repeat #161413}
.hero .film .poster,.hero .film .poster img,.hero .film video{position:absolute;inset:0;width:100%;height:100%}
.hero .film .poster img,.hero .film video{object-fit:cover;object-position:center 45%;display:block;transition:opacity 1.2s var(--ease)}
/* black and white is never tinted: no filter at all on the poster or the film */
.mono{filter:none !important}
/* never the browser's own play button over the film */
.hero video::-webkit-media-controls,.hero video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
/* the film lies over its poster and fades in once it is playing */
.hero .film video{opacity:0}
.hero .film video.on{opacity:1}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.22),rgba(0,0,0,0));pointer-events:none;z-index:-1}
.label-card{position:absolute;left:clamp(24px,4.5vw,64px);bottom:0;transform:translateY(64px);width:min(500px,calc(100% - 48px));background:var(--ground);padding:34px 40px 30px;text-align:center}
.label-card h1,.label-card .display{font-size:clamp(30px,2.6vw,40px);line-height:1.14}
/* Home: the display line is a p since the SEO pass (the h1 moved to the What we make band); same look as the h1 */
.label-card .display{margin:0;color:inherit;max-width:none}
.label-card p{margin-top:12px;font-size:14.5px;color:var(--grey);max-width:40ch;margin-inline:auto}
.label-card .btns{margin-top:22px}
.label-card .btn{min-width:0;padding-inline:30px}
/* the home card holds the headline and the button only, half over the foot of the film (owner, 28 Sep 2026) */
.hero .label-card{width:min(380px,calc(100% - 48px));padding:26px 30px 24px;transform:translateY(50%)}
.hero .label-card h1,.hero .label-card .display{font-size:clamp(30px,2.3vw,34px)}
.hero .label-card .btns{margin-top:16px}
/* the inquiry button, always in the header */
.btn-s{min-height:40px;padding:8px 20px;font-size:14px;box-shadow:inset 0 0 0 2px var(--btn),inset 0 0 0 3px rgba(247,245,241,.5)}
.btn-s:hover{box-shadow:inset 0 0 0 2px var(--acc-hover),inset 0 0 0 3px rgba(247,245,241,.62)}
.hd-nav .hd-tools{margin-top:0}
.film-ctl{position:absolute;right:20px;bottom:20px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(247,245,241,.86);cursor:pointer;display:grid;place-items:center;color:#1E1916}
.film-ctl i{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.film-ctl.paused i{width:0;height:0;border-left:11px solid currentColor;border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.hero-after{height:112px}

/* ─── inner page head: a framed photograph with the folio card over its foot ─── */
.ph{position:relative;height:clamp(340px,50vh,560px);background:#161413;margin-top:6px;isolation:isolate}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);z-index:-1}
.ph .label-card{transform:translateY(56px);width:min(580px,calc(100% - 48px))}
.label-card .folio{display:block;margin-bottom:8px}
.ph .label-card p{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5}
.ph-after{height:56px}

/* the centred intro paragraph */
.intro{padding-top:112px;padding-bottom:16px;text-align:center}
.intro p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,1.6vw,23px);line-height:1.55;color:var(--grey);max-width:50ch;margin:0 auto}

/* ─── the garment card: tile on the packshot ground, No. tab on its edge, olive line ─── */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 20px;list-style:none;margin:0;padding:0}
.pc{display:flex;flex-direction:column;text-align:center;min-width:0}
.pc-img{position:relative;display:block;background:var(--tile);aspect-ratio:3/4;text-decoration:none}
.pc-img .fr-in{position:absolute;inset:0;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
a.pc-img:hover img{transform:scale(1.03)}
.pc-no{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background:var(--ground);padding:2px 12px;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--grey);font-variant-numeric:oldstyle-nums;white-space:nowrap}
.pc-name{margin-top:22px;font-family:var(--sans);font-size:15px;line-height:1.4;font-weight:400}
.pc-name a{text-decoration:none}
.pc-name a:hover{color:var(--t-acc)}
.pc-type{font-size:14px;color:var(--t-acc);line-height:1.5}

/* ─── ledger language: margin number column, the double olive rule, ruled lines ─── */
.ledger-lines{list-style:none;margin:0 auto;padding:0;max-width:1080px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative}
.ledger-lines::before{content:"";position:absolute;top:0;bottom:0;left:84px;width:4px;border-left:1px solid var(--t-acc);border-right:1px solid var(--t-acc);opacity:.55}
.ledger-lines > li{display:grid;grid-template-columns:84px 1fr;align-items:baseline;border-top:1px solid var(--rule);padding:26px 0}
.ledger-lines > li:first-child{border-top:0}
.ledger-lines .m{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--t-acc);text-align:center;font-variant-numeric:oldstyle-nums}
.ledger-lines .t{padding-left:40px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:8px 40px;align-items:baseline}
.ledger-lines h3{font-size:clamp(22px,1.9vw,27px);line-height:1.2}
.ledger-lines p{color:var(--grey);font-size:15px}
.after-lines{text-align:center;margin-top:34px}
/* questions buyers ask (SEO pass): a ruled list, each answer folded in a native details element, all text in the HTML */
.qa{max-width:860px;margin:0 auto;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.qa details + details{border-top:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:24px;align-items:center;padding:16px 2px;min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:clamp(19px,1.5vw,22px);line-height:1.3;transition:color .25s var(--ease)}
.qa summary::after{content:"+";font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;color:var(--t-acc);text-align:center;transition:transform .3s var(--ease)}
.qa details[open] > summary::after{transform:rotate(45deg)}
.qa summary:hover h3{color:var(--t-acc)}
.qa details > p{margin:-4px 0 0;padding:0 50px 20px 2px;color:var(--grey);max-width:68ch}
.after-note{text-align:center;margin:36px auto 0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;line-height:1.55;color:var(--grey);max-width:56ch}

/* the six steps: number, photograph, what happens, the check */
.steps6 > li{align-items:center;padding:22px 0}
.steps6 .m{align-self:center}
.steps6 .t{grid-template-columns:200px minmax(0,1fr) minmax(0,.9fr);gap:0 36px;align-items:center}
.steps6 figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--panel-2)}
.steps6 figure img{width:100%;height:100%;object-fit:cover}
.steps6 .k{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.steps6 h3{margin-bottom:6px}
.steps6 .what{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;line-height:1.5;color:var(--grey)}
.steps6 .check{border-left:1px solid var(--rule);padding-left:28px}
.steps6 .check .k{color:var(--t-acc)}
.steps6 .check b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.4}

/* ─── two column split, image and text ─── */
.cb{display:grid;grid-template-columns:1fr 1fr}
.cb figure{margin:0;overflow:hidden;background:var(--panel-2);position:relative;min-height:560px}
.cb figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.cb .txt{display:grid;align-content:center;justify-items:center;text-align:center;padding:64px clamp(24px,5vw,80px)}
.cb .txt > div{max-width:440px;width:100%}
.cb .txt .caps{display:block;margin-bottom:12px}
.cb .txt h2,.cb .txt h3{font-size:clamp(24px,2vw,30px);line-height:1.2}
.cb .txt > div > p{margin-top:14px;color:var(--grey);font-size:15px}
.cb .txt .lede{font-size:18px}
.cb .txt .dash{margin-top:14px}
.cb .txt .tick{display:block;width:1px;height:26px;background:var(--t-acc);margin:18px auto;opacity:.6}
.cb.rev figure{order:2}
.cb.panel .txt{background:var(--panel)}
.cb + .cb{margin-top:0}

/* a small ruled ledger of terms inside a split, name left, value right */
.dl{margin:24px 0 0;border-top:1px solid var(--rule-2);text-align:left}
.dl > div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 2px;border-bottom:1px solid var(--rule);align-items:baseline}
.dl dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.dl dd{margin:0;font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.45}
.dl dd.big{font-size:26px;line-height:1.2}
.dl dd > a{text-decoration:none}
.dl dd > a:hover{color:var(--t-acc)}
.dl dd small{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.5;margin-top:2px}
.dl dd small a{color:var(--t-acc);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--t-acc) 55%,transparent)}
.dl dd small a:hover{text-decoration-thickness:2px}
.since{font-size:14.5px;color:var(--t-acc);margin-top:6px}

/* three or four columns divided by sand hairlines */
.cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));list-style:none;margin:0;padding:0}
.cols > li,.cols > div{padding:8px clamp(18px,2.6vw,40px);text-align:center;display:grid;gap:8px;align-content:start;justify-items:center}
.cols > * + *{border-left:1px solid var(--rule-2)}
.cols .big{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.2vw,50px);line-height:1.05;font-variant-numeric:lining-nums tabular-nums}
.cols .big small{font-size:.5em;margin-left:4px}
.cols .big i{font-style:normal}
.cols .big.sm{font-size:clamp(24px,2.1vw,32px);padding-block:.25em}
.cols h3{font-family:var(--sans);font-size:14.5px;font-weight:400;color:var(--t-acc)}
.cols p,.cols .lab{font-size:14.5px;color:var(--grey);max-width:26ch}

/* the figures as a ruled ledger */
.figs{list-style:none;margin:0 auto;padding:0;max-width:980px;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.figs li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:baseline;padding:22px 8px;border-top:1px solid var(--rule)}
.figs li:first-child{border-top:0}
.figs b{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3vw,46px);line-height:1.05;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.figs b small{font-size:.5em;margin-left:4px}
.figs span{font-size:15px;color:var(--grey)}
.figs em{display:block;font-family:var(--serif);font-weight:300;font-size:17px;color:var(--t-acc)}

/* the tech pack, seven items numbered in the margin */
.pack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;margin:0 auto;padding:18px 0;counter-reset:tp;max-width:1180px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pack li{padding:6px 12px;counter-increment:tp;text-align:center}
.pack li + li{border-left:1px solid var(--rule-2)}
.pack li::before{content:counter(tp,lower-roman) ".";display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--t-acc);margin-bottom:6px}
.pack li b{font-family:var(--serif);font-weight:300;font-size:20px;line-height:1.2;display:block}

/* the fair: a centred ruled block */
.fair{text-align:center}
.fair .box{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:60px 24px;max-width:880px;margin:0 auto;position:relative}
.fair .box::before,.fair .box::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--rule)}
.fair .box::before{top:4px}.fair .box::after{bottom:4px}
.fair h2{font-size:clamp(28px,2.4vw,36px);line-height:1.15;margin-top:10px}
.fair .date{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--t-acc);margin-top:6px}
.fair p.body{margin:16px auto 0;max-width:54ch;color:var(--grey)}
.fair .dash{margin-top:14px}

/* the inquiry call that closes every page */
.call{background:var(--panel);padding:56px clamp(24px,5vw,80px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;border-top:3px solid var(--acc)}
.call > .btn{justify-self:start;min-width:220px}
.call h2{font-size:clamp(28px,2.4vw,36px);line-height:1.15}
.call p{margin-top:12px;color:var(--grey);max-width:46ch}
.call .caps{display:block;margin-bottom:8px}
.call .fairline{font-size:14px;margin-top:14px}
.call .fairline a{color:var(--t-acc);text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--t-acc) 55%,transparent)}
.call .fairline a:hover{text-decoration-thickness:2px}
/* links inside running text (SEO pass): the same underline as the fair line and ledger links */
a.tl{color:var(--t-acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--t-acc) 55%,transparent)}
a.tl:hover,a.tl:focus-visible{text-decoration-thickness:2px;text-decoration-color:var(--t-acc)}
/* a heading that links: the heading keeps its ink, a quiet rule under it */
a.tl-h{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rule-2)}
a.tl-h:hover,a.tl-h:focus-visible{text-decoration-color:var(--t-acc)}

/* the founder and the leadership */
.founder-img{filter:grayscale(1) contrast(1.03)}
.memory{margin-top:26px;font-family:var(--roman);font-size:12px;letter-spacing:.24em;line-height:1.9;color:var(--grey)}
.leaders{list-style:none;margin:26px 0 0;padding:18px 0 0;display:flex;justify-content:center;gap:44px;flex-wrap:wrap;border-top:1px solid var(--rule)}
.leaders li{display:grid;gap:0}
.leaders b{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2}
.leaders span{font-size:14px;color:var(--t-acc)}

/* the clients, set as type */
.names{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;border-top:1px solid var(--rule-2)}
.names li{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.7vw,25px);line-height:1.25;padding:18px 10px 16px;border-bottom:1px solid var(--rule);text-align:center}
.names li:not(:nth-child(4n+1)){border-left:1px solid var(--rule)}
.names-run{list-style:none;max-width:1040px;margin:0 auto;text-align:center;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.1vw,30px);line-height:1.6;padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.names-run li{display:inline;white-space:nowrap}
.names-run li:nth-child(even){font-style:italic;color:var(--grey)}
.names-run li:not(:last-child)::after{content:"\00B7";color:var(--t-acc);font-style:normal;margin:0 .2em 0 .5em;display:inline-block}
.names-run.sm{font-size:clamp(19px,1.6vw,23px);padding:18px 0;line-height:1.7}
.made-for{text-align:center;margin:0 auto;max-width:1080px}
/* home: three text bands in one family, what we make, the two plants, the houses */
.band{padding-top:72px}
.made-for .names-run a{text-decoration:none}
.made-for .names-run a:hover{color:var(--t-acc);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.band-note{margin-top:18px;font-size:14.5px;color:var(--grey)}
/* Home: the page h1 is set as a band note, quiet, under the garment names */
h1.band-note{font-family:var(--sans);font-weight:400;letter-spacing:inherit;line-height:inherit}
.band .dash{margin-top:4px}
/* Home, 21 Oct 2026: one plain sentence under the h1, so the page says what the factory is in words */
.band-sub{max-width:62ch;margin:8px auto 6px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;line-height:1.55;color:var(--grey)}
.band-sub a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--t-acc) 55%,transparent)}
.band-sub a:hover{color:var(--t-acc)}
.plants2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plants2 article{padding:26px clamp(16px,3vw,48px) 22px}
.plants2 article + article{border-left:1px solid var(--rule)}
.plants2 h3{font-size:clamp(24px,2vw,28px);line-height:1.2}
.plants2 .dl{margin-top:16px}
.plants2 .dl dd.big{font-size:22px}
.made-for .caps{display:block;margin-bottom:12px}
.figs b i{font-style:normal}

/* the four houses */
.houses{max-width:1080px;margin:0 auto;width:100%;border-collapse:collapse}
.houses th{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule-2)}
.houses td{padding:18px 12px;border-bottom:1px solid var(--rule);vertical-align:baseline}
.houses td:first-child{font-family:var(--serif);font-size:23px;font-weight:300;line-height:1.25}
.houses td:nth-child(2){color:var(--grey)}
.houses td a{display:inline-flex;align-items:center;min-height:40px;color:var(--t-acc);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--t-acc) 55%,transparent)}
.houses td a:hover{text-decoration-thickness:2px}
.houses tr.here td:first-child{color:var(--t-acc)}
.houses .here-s{font-style:italic;font-family:var(--serif);color:var(--grey)}

/* the mills */
.mills{list-style:none;margin:22px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:420px;border-top:1px solid var(--rule-2)}
.mills li{padding:14px 10px;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:clamp(22px,2vw,27px);font-weight:300;line-height:1.15}
.mills li:nth-child(even){border-left:1px solid var(--rule)}

/* ─── construction explorer ─── */
.xtabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tab{display:inline-grid;justify-items:center;gap:0;min-height:52px;padding:8px 22px;background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--rule-2);cursor:pointer;color:var(--ink);transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.tab b{font-family:var(--serif);font-weight:300;font-size:20px;line-height:1.2}
.tab small{font-size:12.5px;color:var(--grey)}
.tab:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.tab[aria-selected="true"]{background:var(--btn);color:var(--on-acc);box-shadow:none}
.tab[aria-selected="true"] small{color:var(--on-acc-soft)}
.xpanel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center;padding-top:40px;max-width:1140px;margin:0 auto}
.xs{position:relative}
.xs svg{width:100%;height:auto;display:block;overflow:visible}
.xs .ly{transition:transform 1.1s var(--ease)}
.xs .base{fill:var(--panel);opacity:.92}
.xs .tex{opacity:0;transition:opacity .9s var(--ease) calc(var(--i) * .16s + .55s)}
.xs .o{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) calc(var(--i) * .16s),stroke .3s,stroke-width .3s}
.xs .det{fill:none;stroke:var(--grey);stroke-width:.7;opacity:0;transition:opacity .8s var(--ease) 1.1s}
.xs .btn-c{fill:none;stroke:var(--grey);stroke-width:.8;opacity:0;transition:opacity .8s var(--ease) 1.1s}
.xs .stitch{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:1.6 3.4;stroke-linecap:round;opacity:0;transition:opacity .8s var(--ease) 1.4s}
.xs .mk{font-family:var(--serif);font-style:italic;font-size:19px;fill:var(--t-acc);opacity:0;transition:opacity .8s var(--ease) calc(var(--i) * .16s + .9s);paint-order:stroke;stroke:var(--ground);stroke-width:5px}
.xs .tick{stroke:var(--t-acc);stroke-width:.8;opacity:0;transition:opacity .8s var(--ease) calc(var(--i) * .16s + .9s)}
.xs.on .o{stroke-dashoffset:0}
.xs.on .tex,.xs.on .det,.xs.on .btn-c,.xs.on .stitch,.xs.on .mk,.xs.on .tick{opacity:1}
.xs.on .tex{opacity:.9}
.xs .ly.hl .o{stroke:var(--t-acc);stroke-width:1.8}
.xs .p-line{stroke:var(--rule-2);stroke-width:.6}
.xs .p-dot{fill:var(--grey)}
.xs .p-hair{stroke:var(--grey);stroke-width:.55;fill:none}
.xs .p-lin{stroke:var(--rule-2);stroke-width:.9}
.xs .p-can{stroke:var(--grey);stroke-width:.4}
.xtext .x-name{font-size:14.5px;color:var(--t-acc)}
.xtext .def{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.1vw,30px);line-height:1.25;margin:6px 0 22px;max-width:22ch}
.legend{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.legend li{display:grid;grid-template-columns:40px 1fr;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);cursor:default}
.legend li b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--t-acc);text-align:center}
.legend li span{font-size:14.5px;color:var(--grey)}
.legend li:hover span,.legend li:focus span{color:var(--ink)}
.xnote{margin-top:18px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;color:var(--grey)}

/* ─── the machines on the floor: ruled lists ─── */
.parks{display:grid;gap:80px;max-width:1240px;margin:0 auto}
.parks article > h3{font-size:clamp(26px,2.2vw,32px);text-align:center}
.park-note{text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;color:var(--grey);margin:6px 0 26px}
.dept{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px double color-mix(in srgb,var(--t-acc) 60%,transparent)}
.dept section{padding:22px clamp(14px,2vw,30px) 0}
.dept section + section{border-left:1px solid var(--rule)}
.dept h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--t-acc);margin:0 0 6px}
.dept h4.gap{margin-top:30px}
.dept ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.dept li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
.dept li b{font-family:var(--serif);font-weight:300;font-size:17.5px;line-height:1.3}
.dept li span{font-size:13px;color:var(--grey);text-align:right;white-space:nowrap}

/* ─── the gallery: a small carousel with disc controls ─── */
.gal-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.gal-head h2{font-size:clamp(26px,2.2vw,32px);line-height:1.2}
.gal-head .caps{display:block;margin-bottom:8px}
.ctl{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--grey);font-variant-numeric:lining-nums tabular-nums}
.ctl .count{min-width:56px;text-align:center}
.disc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:none;border:1px solid var(--sand);cursor:pointer;color:var(--ink);transition:border-color .25s var(--ease)}
.disc:hover{border-color:var(--ink)}
.disc[disabled]{opacity:.35;cursor:default}
.disc i{display:block;width:8px;height:8px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-left:3px}
.disc.nx i{transform:rotate(-135deg);margin-left:-3px}
.car{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;list-style:none;margin:0;padding:0;overscroll-behavior-x:contain}
.car::-webkit-scrollbar{display:none}
.car > li{scroll-snap-align:start;margin:0}
.car figure{margin:0;position:relative}
.car .ph-box{aspect-ratio:3/4;overflow:hidden;background:var(--panel-2)}
.car img{width:100%;height:100%;object-fit:cover}
.car figcaption{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background:var(--ground);padding:6px 18px;white-space:nowrap;font-family:var(--serif);font-size:17px}
.car figcaption .no{font-size:14px;margin-right:8px}
.car > li{padding-bottom:24px}

/* ─── contact: the numbered form ─── */
.ob{max-width:1140px;margin:0 auto}
.fstep{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--rule)}
.fstep:first-of-type{border-top:0;padding-top:0}
.fstep > header h2{font-size:24px;line-height:1.2}
.fstep > header h2 .n{color:var(--t-acc);font-style:normal;margin-right:6px}
.fstep > header p{font-size:13.5px;color:var(--grey);margin-top:8px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.fields .full{grid-column:1 / -1}
.fields label{display:grid;gap:6px;align-content:start;font-size:13.5px;color:var(--grey)}
.fields .lt{display:block}
.fields input,.fields textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--panel);border:0;border-bottom:1px solid var(--rule-2);padding:12px 12px;border-radius:0;width:100%}
.fields input:focus,.fields textarea:focus{outline:2px solid var(--t-acc);outline-offset:-1px}
.fields textarea{resize:vertical;min-height:120px}
.fields .hint{font-size:13px;color:var(--grey)}
.fields fieldset{border:0;margin:0;padding:0;min-width:0}
.fields legend{font-size:13.5px;color:var(--grey);padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.chip span:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.chip input:checked + span{background:var(--btn);color:var(--on-acc);box-shadow:none}
.chip input:focus-visible + span{outline:2px solid var(--t-acc);outline-offset:2px}
.file .drop{position:relative;display:flex;align-items:center;gap:14px;background:var(--panel);border-bottom:1px solid var(--rule-2);padding:9px 12px;cursor:pointer;min-height:52px}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0;width:100%}
.file .pick{flex:none;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--sand);padding:7px 16px;background:var(--ground)}
.file .fname{font-size:14px;color:var(--grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file.has .fname{color:var(--ink)}
.file .drop:focus-within{outline:2px solid var(--t-acc);outline-offset:-1px}
.hp-trap{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.send{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:40px 0 0;border-top:1px solid var(--rule)}
.send .note{color:var(--grey);font-size:14.5px;max-width:64ch}
.send .note b{font-weight:400;color:var(--ink)}
.send .btn{margin-top:22px;min-width:280px}
.send .err{margin-top:14px;color:var(--t-acc);font-size:14.5px}
.send .err:empty{display:none}
.sent{padding:72px 24px;text-align:center;display:grid;gap:14px;justify-items:center;align-content:center;min-height:380px;background:var(--panel);border-top:3px solid var(--acc)}
.sent h2{font-size:clamp(30px,2.6vw,38px)}
.sent p{max-width:46ch;color:var(--grey)}

/* next page */
.nextp{text-align:center;padding-top:88px}
.nextp a{display:inline-grid;justify-items:center;gap:6px;text-decoration:none;padding:20px}
.nextp .k{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--grey)}
.nextp .t{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.1;transition:color .25s var(--ease)}
.nextp .l{font-size:14.5px;color:var(--grey);max-width:48ch}
.nextp a:hover .t{color:var(--t-acc)}

/* ─── footer: the contained olive block, then the bottom line ─── */
.foot{margin-top:80px}
.foot-block{background:var(--acc);color:var(--on-acc);padding:56px clamp(24px,4.5vw,72px) 48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.foot-block h2{font-size:clamp(26px,2.2vw,32px);line-height:1.18}
.foot-block h3{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--on-acc-soft);margin-bottom:14px}
.foot-block ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-block li{font-size:14px;line-height:1.55;color:var(--on-acc-soft)}
.foot-block a{color:var(--on-acc-soft);text-decoration:none}
.foot-block a:hover{color:var(--on-acc);text-decoration:underline;text-underline-offset:4px}
.foot-block li b{font-weight:400;color:var(--on-acc)}
.foot-block :focus-visible{outline-color:var(--on-acc)}
.foot-bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:24px 0 34px;font-size:13px;color:var(--grey)}
.foot-bot .lockup{--lock-w:170px}
.foot-bot .brand-s{text-decoration:none;display:block}
.foot-bot .r{justify-self:end;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.foot-bot a{text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.foot-bot a:hover{color:var(--t-acc)}
.theme{background:none;border:0;cursor:pointer;font-size:13px;color:var(--grey);padding:8px 0;min-height:40px}
.theme:hover{color:var(--t-acc)}

/* the close button of the phone menu */
.x{background:none;border:0;cursor:pointer;font-size:14px;color:var(--grey);padding:8px 2px;min-height:40px}
.x:hover{color:var(--t-acc)}

/* ─── phone menu and the bottom bar ─── */
.mnav{position:fixed;inset:0;z-index:95;background:var(--ground);display:flex;flex-direction:column;padding:0 16px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;opacity:0;transition:opacity .3s var(--ease)}
.mnav.open{opacity:1}
.mnav .stripe{margin:0 -16px;flex:none}
.mnav-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;border-bottom:1px solid var(--rule)}
.mnav-top .lockup{grid-column:2;--lock-w:190px}
.mnav-top .x{grid-column:3;justify-self:end}
.mnav-links{list-style:none;margin:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.mnav-links a{display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:10px 0;text-decoration:none}
.mnav-links .no{font-size:14px}
.mnav-links b{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.2}
.mnav-links a[aria-current="page"] b{color:var(--t-acc)}
.mnav-foot{margin-top:auto;padding-top:22px;display:grid;gap:12px;text-align:center}
.mnav-foot .btn{width:100%}
.mnav-foot p{font-size:14.5px;line-height:2;color:var(--grey)}
.mnav-foot p a{text-decoration:none}
.mbar{display:none}

/* ─── responsive ─── */
@media (max-width:1319px){
  .hd-nav .tag{visibility:hidden}
  .pn{gap:28px}
  .hd-tools{gap:16px}
}
/* seven pages since 21 Oct 2026: the menu tightens just above the switch to the phone menu */
@media (max-width:1199px) and (min-width:1100px){
  .pn{gap:20px}
  .pn a{font-size:14px}
  .hd-tools{gap:12px}
}
@media (max-width:1199px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps6 .t{grid-template-columns:170px minmax(0,1fr) minmax(0,.9fr);gap:0 24px}
}
@media (max-width:1099px){
  :root{--nav-h:0px;--brand-h:84px;--lock-w:240px}
  .hd-nav{display:none}
  .burger{display:block}
  .hd-brand .only-s{display:flex}
  .hd-brand .hd-tools{grid-column:3}
  .foot-block{grid-template-columns:1fr 1fr}
  .pack{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px}
  .pack li:nth-child(5){border-left:0}
  .dept{grid-template-columns:1fr 1fr}
  .dept section:nth-child(3){border-left:0}
}
@media (max-width:900px) and (min-width:761px){
  :root{--lock-w:200px}
  .only-s .btn-s{padding-inline:14px}
}
@media (max-width:960px){
  .cb{grid-template-columns:1fr}
  .cb figure{min-height:0;aspect-ratio:4/3}
  .cb.rev figure{order:0}
  .call{grid-template-columns:1fr;gap:28px}
  .fstep,.send{grid-template-columns:1fr;gap:18px}
  .ledger-lines .t{grid-template-columns:1fr}
  .steps6 .t{grid-template-columns:1fr;gap:14px}
  .steps6 figure{max-width:420px}
  .steps6 .check{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:12px}
  .xpanel{grid-template-columns:1fr;gap:32px}
  .names{grid-template-columns:repeat(2,minmax(0,1fr))}
  .names li:not(:nth-child(4n+1)){border-left:0}
  .names li:nth-child(even){border-left:1px solid var(--rule)}
  .car{grid-auto-columns:calc((100% - 20px) / 2)}
  .cols{--n:2 !important;row-gap:34px}
  .cols > *:nth-child(odd){border-left:0}
}
@media (max-width:760px){
  .band{padding-top:56px}
  .plants2{grid-template-columns:1fr}
  .plants2 article{padding:22px 4px 18px}
  .plants2 article + article{border-left:0;border-top:1px solid var(--rule)}
  :root{--ribbon-h:40px;--brand-h:64px;--lock-w:176px;--pad:16px}
  html{scroll-padding-top:100px}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .foot-block ul{gap:0}
  .foot-block li a{display:inline-flex;align-items:center;min-height:40px}
  /* finish pass: taller tap areas for the links that sit inside running text; inline padding, so nothing moves */
  .made-for .names-run a{padding-block:8px}
  .dl dd > a{padding-block:3px}
  .dl dd small a{padding-block:5px}
  .mnav-foot p a{display:inline-flex;align-items:center;min-height:40px;vertical-align:middle}
  .ribbon{font-size:12px}
  .ribbon .long{display:none}
  .ribbon .short{display:inline}
  .hd-tools .inq-s{display:none}
  .sec{padding-block:72px}
  .sec.tight{padding-block:56px}
  .sec-head{margin-bottom:34px}
  .intro{padding-top:72px;padding-bottom:0}
  .hero{height:auto;min-height:0;margin-top:4px;background:none}
  .hero .film{position:relative;inset:auto;z-index:0;height:calc((100vw - 32px) * 1.3333);background-image:var(--tiny-phone)}
  .hero .film .poster img,.hero .film video{object-position:center 50%}
  .hero::after{display:none}
  .hero .label-card{position:relative;left:auto;right:auto;bottom:auto;transform:none;margin:-56px 16px 0;width:auto;padding:22px 18px 20px}
  .hero .label-card h1,.hero .label-card .display{font-size:28px}
  .label-card{left:16px;right:16px;width:auto;padding:24px 18px 22px;transform:translateY(72%)}
  .ph .label-card{position:relative;left:auto;right:auto;bottom:auto;transform:none;margin:-56px 16px 0;width:auto}
  .label-card h1,.label-card .display{font-size:28px}
  .label-card .btns{flex-direction:column}
  .label-card .btn{width:100%}
  .hero-after{height:8px}
  .ph{height:auto;min-height:0;margin-top:4px;background:none}
  .ph img{position:relative;inset:auto;height:46svh;min-height:300px;z-index:0}
  .ph-after{height:8px}
  .film-ctl{right:12px;top:12px;bottom:auto}
  .grid{grid-template-columns:1fr 1fr;gap:40px 12px}
  .pc-name{font-size:14.5px;margin-top:20px}
  .pc-type{font-size:13px}
  .tab{padding:6px 10px;min-height:48px}
  .tab b{font-size:16px}
  .tab small{font-size:11.5px}
  .xtabs{gap:6px;flex-wrap:nowrap}
  .ledger-lines::before{left:44px}
  .ledger-lines > li{grid-template-columns:44px 1fr;padding:22px 0}
  .ledger-lines .m{font-size:17px}
  .ledger-lines .t{padding-left:20px}
  .qa summary{gap:14px;padding:14px 2px}
  .qa details > p{padding-right:4px}
  .cb .txt{padding:44px 8px}
  .dl > div{grid-template-columns:1fr;gap:2px}
  .cols{--n:1 !important}
  .cols > *{border-left:0 !important;padding:22px 8px;border-top:1px solid var(--rule-2)}
  .cols > *:first-child{border-top:0}
  .figs li{grid-template-columns:1fr;gap:4px;text-align:center}
  .figs b{text-align:center}
  .pack{grid-template-columns:1fr 1fr;row-gap:0;padding:0}
  .pack li,.pack li + li{padding:14px 8px;border-left:0;border-bottom:1px solid var(--rule)}
  .pack li:nth-child(even){border-left:1px solid var(--rule)}
  .pack li:last-child{border-bottom:0}
  .fair .box{padding:44px 8px}
  .call{padding:40px 18px}
  .call > .btn{width:100%}
  .names li{font-size:19px;padding:14px 6px 12px}
  .names-run{font-size:21px}
  .houses thead{display:none}
  .houses tr{display:grid;grid-template-columns:1fr;padding:14px 0;border-bottom:1px solid var(--rule)}
  .houses td{border:0;padding:2px 0}
  .dept{grid-template-columns:1fr}
  .dept section,.dept section + section{border-left:0;padding-left:0;padding-right:0}
  .parks{gap:56px}
  .car{grid-auto-columns:82%;gap:14px}
  .fields{grid-template-columns:1fr}
  .fields input,.fields textarea{font-size:16px;padding:13px 12px}
  .send .btn{width:100%;min-width:0}
  .foot{margin-top:72px}
  .foot-block{grid-template-columns:1fr;gap:30px;padding:40px 20px 36px}
  .foot-bot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .foot-bot .r{justify-self:center;justify-content:center}
  .foot-bot .brand-s{order:-1}
  .nextp{padding-top:64px}
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.25fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ground);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;color:var(--ink);text-decoration:none;font-size:14px;padding:0 4px}
  .mbar > * + *{border-left:1px solid var(--rule)}
  .mbar a:last-child{background:var(--btn);color:var(--on-acc)}
  html.locked .mbar{display:none}
}
@media (max-width:420px){ :root{--lock-w:150px} }
@media (min-width:1100px){ .mnav{display:none !important} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  html.rv-on .rv:not(.in){opacity:1;transform:none}
  .film-ctl{display:none}
}

/* ─── the fair notices come down by themselves after 4 October 2026 (class set in the head of every page) ─── */
html.after-fair{--ribbon-h:0px}
html.after-fair .ribbon,html.after-fair .fair,html.after-fair [data-fair]{display:none !important}

/* ─── landscape phones (SEO pass): the Home film is shortened so the label card sits inside the first screen.
   Only the film's height changes; the card keeps its size and place on the film's foot. ─── */
@media (orientation:landscape) and (max-height:500px) and (min-width:761px){
  .hero{height:max(140px,calc(100svh - var(--head-h) - 6px - 76px - 14px))}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:760px){
  .hero .film{height:max(100px,calc(100svh - var(--head-h) - 4px - 82px - 12px - 58px - env(safe-area-inset-bottom)))}
}

/* ─── the language switch, English and Arabic (29 Sep 2026): a quiet text link beside the inquiry button on desktop,
   in the free left corner of the phone menu's top line ─── */
.lang-sw{display:inline-flex;align-items:center;min-height:40px;font-size:14px;color:var(--grey);text-decoration:none;white-space:nowrap;transition:color .25s var(--ease)}
.lang-sw:hover,.lang-sw:focus-visible{color:var(--t-acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.mnav-top .lang-sw{grid-column:1;grid-row:1;justify-self:start;padding:8px 2px}
.mnav-top .lockup{grid-row:1}

/* ─── the Arabic pages (ar/, <html lang="ar" dir="rtl">), 29 Sep 2026. Everything below applies only there;
   nothing above changes, so the English pages are untouched.
   Type: Amiri (naskh) for headlines, IBM Plex Sans Arabic for text and interface, loaded on ar/ only. The English
   faces stay first in each stack, so digits and the Latin house names keep Newsreader and Optima. ─── */
html[lang="ar"]{
  --serif:'Newsreader','Amiri',Georgia,'Times New Roman',serif;
  --sans:Optima,'Marcellus','IBM Plex Sans Arabic',Candara,Tahoma,sans-serif;
}
html[lang="ar"] body{font-size:16px;line-height:1.85;letter-spacing:0;font-weight:300}
/* no italics in Arabic: the word English sets in italic takes the accent colour instead */
html[lang="ar"] body *{font-style:normal !important}
html[lang="ar"] :is(h1,h2,h3,.display) em{color:var(--t-acc)}
html[lang="ar"] .nextp .t,html[lang="ar"] .names-run li:nth-child(even){font-style:normal}
/* no tracking and no capitals: the small tracked labels become plain small Arabic labels */
html[lang="ar"] :is(.caps,.dl dt,.steps6 .k,.dept h4,.houses th,.foot-block h3,.btn,.memory,.pn a,.ribbon,.theme,.x,.burger){letter-spacing:0;text-transform:none;text-indent:0}
html[lang="ar"] .caps{font-size:13.5px;font-weight:400;line-height:1.7}
html[lang="ar"] :is(.dl dt,.steps6 .k,.houses th){font-size:13.5px;line-height:1.7}
html[lang="ar"] :is(.dept h4,.foot-block h3){font-size:14px;font-weight:400}
html[lang="ar"] .memory{font-family:var(--sans);font-size:14.5px;line-height:1.9}
html[lang="ar"] :is(.btn,.pn a,.burger,.x,.chip span,.file .pick,.tab small,.pc-name,.mbar a,.lang-sw){font-weight:400}
html[lang="ar"] .pn a{font-size:15.5px;line-height:1.5}
html[lang="ar"] .btn{font-size:15.5px}
html[lang="ar"] .btn-s{font-size:14.5px}
html[lang="ar"] .ribbon{font-size:13.5px}
html[lang="ar"] .hd-nav .tag{font-size:14px}
/* Arabic needs more room between lines than Latin: headlines 1.5, running text 1.8 */
html[lang="ar"] :is(h1,h2,h3,h4,.display){line-height:1.5 !important}
html[lang="ar"] :is(.lede,.intro p,.after-note,.ph .label-card p,.label-card p,.steps6 .what,.xnote,.park-note,.fair .date,.cb .txt > div > p,.sec-head p,.call p,.sent p,.fair p.body,.qa details > p,.nextp .l,.send .note,.band-note,.band-sub,.foot-block li,.mnav-foot p,.fields label,.hint,.legend li span,.figs span,.cols .lab,.since){line-height:1.8}
html[lang="ar"] .dl dd{line-height:1.7}
/* no single word or year left alone on the last line of a paragraph */
html[lang="ar"] :is(p,dd,.lede){text-wrap:pretty}
html[lang="ar"] .dl dd.big{line-height:1.35}
html[lang="ar"] :is(.mnav-links b,.nextp .t,.steps6 .check b,.dept li b,.xtext .def,.pack li b,.tab b,.leaders b,.pc-name){line-height:1.55}
html[lang="ar"] .figs em{line-height:1.7}
html[lang="ar"] .lede{font-size:clamp(18px,1.45vw,21px)}
html[lang="ar"] .intro p{font-size:clamp(20px,1.65vw,24px)}
html[lang="ar"] .dl dd{font-size:18.5px}
html[lang="ar"] .dl dd small{font-size:14px}
html[lang="ar"] .pc-name{font-size:16px}
html[lang="ar"] .pc-type,html[lang="ar"] .since{font-size:15px}
html[lang="ar"] .fields label,html[lang="ar"] .fields legend,html[lang="ar"] .fstep > header p{font-size:14.5px}
html[lang="ar"] .foot-block li{font-size:14.5px}
html[lang="ar"] .qa summary h3{font-size:clamp(20px,1.55vw,23px)}
/* the Latin wordmark stays a left to right lockup */
[dir="rtl"] .lockup{direction:ltr}
/* an English trade term in brackets after its Arabic (first use on each page) stays on one line */
html[lang="ar"] .tt{white-space:nowrap}
/* numbered form steps: the number sits at the start, on the right */
[dir="rtl"] .fstep > header h2 .n{margin-right:0;margin-left:8px}
/* the tech pack items: Western numerals in place of the Latin lower roman */
[dir="rtl"] .pack li::before{content:counter(tp) "."}
/* email inputs stay left to right but line up with the Arabic fields */
[dir="rtl"] .fields input[type="email"]{text-align:right}

/* mirroring: every physical left or right in the rules above, turned round */
[dir="rtl"] .skip{left:auto;right:16px}
[dir="rtl"] .label-card{left:auto;right:clamp(24px,4.5vw,64px)}
[dir="rtl"] .film-ctl{right:auto;left:20px}
[dir="rtl"] .ledger-lines::before{left:auto;right:84px}
[dir="rtl"] .ledger-lines .t{padding-left:0;padding-right:40px}
[dir="rtl"] .qa details > p{padding:0 2px 20px 50px}
[dir="rtl"] .steps6 .check{border-left:0;padding-left:0;border-right:1px solid var(--rule);padding-right:28px}
[dir="rtl"] .dl{text-align:right}
[dir="rtl"] .cols > * + *{border-left:0;border-right:1px solid var(--rule-2)}
[dir="rtl"] .cols .big small,[dir="rtl"] .figs b small{margin-left:0;margin-right:4px}
[dir="rtl"] .figs b{text-align:left}
[dir="rtl"] .pack li + li{border-left:0;border-right:1px solid var(--rule-2)}
[dir="rtl"] .names li:not(:nth-child(4n+1)){border-left:0;border-right:1px solid var(--rule)}
[dir="rtl"] .names-run li:not(:last-child)::after{margin:0 .5em 0 .2em}
[dir="rtl"] .plants2 article + article{border-left:0;border-right:1px solid var(--rule)}
[dir="rtl"] .houses th{text-align:right}
[dir="rtl"] .mills li:nth-child(even){border-left:0;border-right:1px solid var(--rule)}
[dir="rtl"] .dept section + section{border-left:0;border-right:1px solid var(--rule)}
[dir="rtl"] .dept li span{text-align:left}
/* the carousel chevrons: previous points right, next points left */
[dir="rtl"] .disc i{transform:rotate(-135deg);margin-left:-3px}
[dir="rtl"] .disc.nx i{transform:rotate(45deg);margin-left:3px}
[dir="rtl"] .hp-trap{left:auto;right:-9999px}
@media (max-width:1099px){
  [dir="rtl"] .pack li:nth-child(5){border-right:0}
  [dir="rtl"] .dept section:nth-child(3){border-right:0}
}
@media (max-width:960px){
  [dir="rtl"] .steps6 .check{border-right:0;padding-right:0}
  [dir="rtl"] .names li:not(:nth-child(4n+1)){border-right:0}
  [dir="rtl"] .names li:nth-child(even){border-right:1px solid var(--rule)}
  [dir="rtl"] .cols > *:nth-child(odd){border-right:0}
}
@media (max-width:760px){
  [dir="rtl"] .label-card{left:16px;right:16px}
  [dir="rtl"] .hero .label-card,[dir="rtl"] .ph .label-card{left:auto;right:auto}
  [dir="rtl"] .film-ctl{left:12px;right:auto}
  [dir="rtl"] .ledger-lines::before{left:auto;right:44px}
  [dir="rtl"] .ledger-lines .t{padding-left:0;padding-right:20px}
  [dir="rtl"] .qa details > p{padding-right:2px;padding-left:4px}
  [dir="rtl"] .cols > *{border-right:0 !important}
  [dir="rtl"] .pack li,[dir="rtl"] .pack li + li{border-right:0}
  [dir="rtl"] .pack li:nth-child(even){border-right:1px solid var(--rule)}
  [dir="rtl"] .plants2 article + article{border-right:0}
  [dir="rtl"] .dept section,[dir="rtl"] .dept section + section{border-right:0}
  [dir="rtl"] .mbar > * + *{border-left:0;border-right:1px solid var(--rule)}
  html[lang="ar"] .label-card h1,html[lang="ar"] .label-card .display{font-size:27px}
  html[lang="ar"] .names-run{font-size:20px}
  html[lang="ar"] .mbar a{font-size:14.5px}
}

/* ─── phones, 21 Oct 2026 (mobile pass): shorter pages, nothing removed. Image rows become swipe rows with a peek
   of the next frame, the construction drawing gives way to its one line, the vertical rhythm tightens, the footer
   folds into two columns. Everything here sits inside the phone breakpoint; desktop is untouched. ─── */
@media (max-width:760px){
  /* running text at 16px on phones */
  body{font-size:16px}
  .ledger-lines > li{padding:14px 0}
  .ledger-lines p,.cb .txt > div > p,.figs span,.qa details > p{font-size:16px}
  /* never under the bottom bar: anchors, focus and opened answers keep clear of it */
  html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}

  /* rhythm: about 64px between sections */
  .sec{padding-block:32px}
  .sec.tight{padding-block:28px}
  .sec-head{margin-bottom:22px}
  .sec-head .caps{margin-bottom:8px}
  .intro{padding-top:28px}
  .ph-after{height:0}
  /* the first section under a page head carries an inline 88px top on desktop; phones take the phone rhythm */
  .sec[style*="padding-top:88px"]{padding-top:32px !important}
  .intro p{font-size:19px}
  .band{padding-top:40px}
  .after-note{margin-top:22px;font-size:17px}
  .after-lines{margin-top:20px}
  .nextp{padding-top:20px}
  .nextp a{padding:8px 16px;gap:2px}
  .nextp .t{font-size:26px}
  .call{padding:24px 18px;gap:16px}
  .call p{margin-top:8px}
  .foot{margin-top:40px}

  /* inner page heads: a lower photograph, so the heading sits in the first screen */
  .ph img{height:clamp(200px,30svh,290px);min-height:0;object-position:var(--pos-m,var(--pos,center))}
  .ph .label-card{margin-top:-48px;padding:20px 18px 18px}
  .label-card .folio{margin-bottom:4px}
  .ph .label-card p{margin-top:8px;font-size:16.5px}

  /* splits: a wider, lower photograph and no little rule under the heading */
  .cb figure{aspect-ratio:16/9}
  .cb .txt{padding:26px 6px 24px}
  .cb .txt .tick{display:none}
  .cb .txt > div > p{margin-top:10px}
  .dl{margin-top:14px}
  .dl > div{grid-template-columns:minmax(0,124px) minmax(0,1fr);gap:12px;padding:9px 2px}
  .dl dt{padding-top:3px}
  .dl dd{font-size:17px}
  .dl dd.big{font-size:22px}
  .mills{margin-top:16px}
  .mills li{padding:10px 8px}
  .memory{margin-top:16px}
  .leaders{margin-top:16px;padding-top:12px;gap:24px}

  /* one swipe row pattern for every image row: bleeds to the screen edge, snaps, shows the next frame, no scrollbar */
  .grid,.car,.steps6{display:grid;grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .grid::-webkit-scrollbar,.steps6::-webkit-scrollbar{display:none}
  .grid > *,.car > li,.steps6 > li{scroll-snap-align:start}
  /* the garments: eight tiles in one row */
  .grid{grid-auto-columns:58%;gap:12px;padding-bottom:4px}
  .pc-name{margin-top:18px}
  /* the floor */
  .car{grid-auto-columns:56%;gap:12px}
  .gal-head{margin-bottom:18px;padding-bottom:12px}
  /* the six steps: number, photograph, step and its check on one card each */
  .steps6{grid-auto-columns:68%;gap:14px;border:0;max-width:none;padding-bottom:4px}
  .steps6::before{display:none}
  .steps6 > li,.steps6 > li:first-child{display:block;border:0;border-top:3px double color-mix(in srgb,var(--t-acc) 60%,transparent);padding:10px 0 0}
  .steps6 .m{display:block;text-align:start;font-size:17px;margin-bottom:8px}
  .steps6 .t,[dir="rtl"] .steps6 .t{display:block;padding:0}
  .steps6 figure{max-width:none;margin-bottom:10px}
  .steps6 h3{margin-bottom:4px}
  .steps6 .check{border-top:1px solid var(--rule);padding-top:8px}
  .steps6 .check b{font-size:17px}

  /* construction: the tabs and the one line; the layered drawing and its numbered list are left to larger screens */
  .xpanel{display:block;padding-top:16px;text-align:center}
  .xs,.xtext .x-name,.xtext .legend,.xtext .xnote{display:none}
  .xtext .def{margin:0 auto;font-size:21px;max-width:24ch}

  /* figures and terms: number beside its label */
  .cols{row-gap:0}
  .cols > li,.cols > div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:baseline;justify-items:stretch;gap:16px;padding:12px 4px;text-align:start}
  .cols .lab{max-width:none}
  .cols .big{text-align:end;font-size:30px}
  .figs li{padding:14px 8px}
  /* the tech pack: the numeral sits before its word, one short line each */
  .pack li,.pack li + li{padding:9px 6px;display:flex;justify-content:center;align-items:baseline;gap:6px}
  .pack li::before{display:inline;margin:0}
  .pack li b{font-size:18px}
  .pack li:last-child:nth-child(odd){grid-column:1 / -1}

  /* the machines */
  .parks{gap:28px}
  .parks .names-run.sm{font-size:18px;padding:12px 0;margin-top:10px}

  /* the houses and the clients */
  .names li{font-size:17px;line-height:1.2;padding:8px 6px 7px}
  .houses tr{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:10px 0}
  .houses td:first-child{grid-column:1 / -1;font-size:21px}
  .houses td a{min-height:32px}
  .plants2 article{padding:18px 4px 14px}

  /* questions: tap rows of at least 48px, the question wraps, the marker keeps its own column */
  .qa summary{grid-template-columns:minmax(0,1fr) 22px;gap:12px;min-height:48px;padding:11px 2px;-webkit-tap-highlight-color:transparent}
  .qa summary h3{font-size:18px;line-height:1.35;text-wrap:pretty;overflow-wrap:anywhere}
  .qa details > p{padding-bottom:16px}

  .band-note,.send .note{font-size:16px}

  /* the form */
  .fstep{padding:24px 0;gap:12px}
  .fields{gap:12px}
  .fields input{padding-block:10px}
  .fields label{gap:4px}
  .fields textarea{min-height:100px;height:112px}
  .send > div:empty{display:none}
  .chip span{padding:6px 12px}
  .chips{gap:6px}
  .send{padding-top:26px}

  /* footer: contact across, the houses in two columns, legal across; the page list is the menu's, so it goes */
  .foot-block{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 18px;padding:28px 18px 24px}
  .foot-block > div{grid-column:1 / -1}
  .foot-block h3{margin-bottom:6px}
  #foot-nav{display:none}
  /* the address is given once, under Legal with the registered name */
  .foot-block > div:first-child li:nth-child(3){display:none}
  .foot-block > div:nth-child(2) ul{display:flex;flex-wrap:wrap;column-gap:12px}
  .foot-block li{font-size:14.5px}
  .foot-bot{padding:16px 0 18px;gap:4px}
  .foot-bot .lockup{--lock-w:140px}
}
/* the Home film on an upright phone: no taller than the screen allows, so the line and its button stay in view */
@media (max-width:760px) and (orientation:portrait){
  .hero .film{height:min(calc((100vw - 32px) * 1.3333),calc(100svh - 230px))}
}