/* Asasi website styles */
@font-face{font-family:'IBM Plex Sans';src:url(../fonts/plex-sans-var.woff2) format('woff2');font-weight:100 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/plex-arabic-400.woff2) format('woff2');font-weight:400;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+060C,U+061B,U+061F;font-display:optional}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/plex-arabic-500.woff2) format('woff2');font-weight:500;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+060C,U+061B,U+061F;font-display:optional}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/plex-arabic-600.woff2) format('woff2');font-weight:600;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+060C,U+061B,U+061F;font-display:optional}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/plex-arabic-700.woff2) format('woff2');font-weight:700;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+060C,U+061B,U+061F;font-display:optional}
/* =====================================================================
   ASASY · "Held to tolerance" design system
   Tokens first. Logical properties only (works LTR and RTL).
   Red means measured: the accent is reserved for dimensions and callouts.
   ===================================================================== */
:root{
  /* colour: textile-derived */
  --cotton:#F1EEE7;      /* raw cotton, page ground */
  --paper:#FBFAF6;       /* spec sheet */
  --ink:#1D1D1B;         /* loom charcoal */
  --graphite:#6B6A65;    /* secondary text */
  --chalk:#D8D3C8;       /* rules, grid lines */
  --chalk-2:#E6E2D9;
  --selvedge:#A8321F;    /* measurement red: dimensions, callouts, needs */
  --indigo:#27344F;      /* indigo dye, sector accent */
  --on-ink:#F1EEE7;
  --on-ink-2:#A9A69E;
  /* type */
  --f-sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-label:.6875rem;    /* 11 */
  --t-small:.875rem;     /* 14 */
  --t-body:1.0625rem;    /* 17 */
  --t-lead:1.25rem;      /* 20 */
  --t-h3:1.375rem;       /* 22 */
  --t-h2:clamp(1.875rem,3.4vw,2.75rem);   /* 30 → 44 */
  --t-h1:clamp(2.75rem,6.4vw,5.5rem);     /* 44 → 88 */
  --t-display:clamp(3.5rem,10.4vw,9.5rem);/* 56 → 152 */
  --t-numeral:clamp(7rem,19vw,15rem);     /* 112 → 240 */
  --lh-display:.9; --lh-head:1.05; --lh-body:1.6;
  --track-display:-.045em; --track-label:.14em;
  /* space: three section rhythms, not one */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --sec-tight:48px; --sec:112px; --sec-xl:224px;
  --gutter:24px; --page:min(1320px,100% - 48px);
  /* shape */
  --radius:0; --hair:1px solid var(--chalk); --rule:1px solid var(--ink);
  --shadow-sheet:0 1px 0 var(--chalk),0 24px 48px -32px rgba(29,29,27,.28);
  box-sizing:border-box; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (max-width:760px){:root{--sec:72px;--sec-xl:120px;--gutter:16px;--page:calc(100% - 32px)}}
/* dark theme (viewer preference) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cotton:#171716;--paper:#1F1F1D;--ink:#EDEAE3;--graphite:#A3A098;--chalk:#3A3935;--chalk-2:#2A2927;--selvedge:#E0694F;--indigo:#8FA0C4;--on-ink:#171716;--on-ink-2:#55534E;color-scheme:dark}}
:root[data-theme="dark"]{--cotton:#171716;--paper:#1F1F1D;--ink:#EDEAE3;--graphite:#A3A098;--chalk:#3A3935;--chalk-2:#2A2927;--selvedge:#E0694F;--indigo:#8FA0C4;--on-ink:#171716;--on-ink-2:#55534E;color-scheme:dark}
[lang="ar"]{--f-sans:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,sans-serif;--t-body:1.125rem;--t-lead:1.3rem;--lh-display:1.2;--lh-head:1.3;--lh-body:1.8;--track-display:0;--track-label:0;--t-label:.8125rem;
  --t-display:clamp(3rem,8.6vw,8rem);--t-h1:clamp(2.4rem,5.4vw,4.6rem)}

*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cotton);color:var(--ink);font:400 var(--t-body)/var(--lh-body) var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}
:focus-visible{outline:2px solid var(--selvedge);outline-offset:3px}
h1,h2,h3,p,figure,dl,dd,blockquote{margin:0}
.wrap{width:var(--page);margin-inline:auto}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.skip{position:absolute;inset-inline-start:12px;top:0;transform:translateY(-200%);background:var(--ink);color:var(--cotton);padding:10px 14px;z-index:60}
.skip:focus{transform:none;top:12px}

/* ---------- type roles ---------- */
.label{font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--graphite)}
[lang="ar"] .label{font-family:var(--f-sans);font-weight:600;text-transform:none}
.display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--track-display);font-weight:700;font-stretch:85%}
.h1{font-size:var(--t-h1);line-height:var(--lh-head);letter-spacing:-.035em;font-weight:700;font-stretch:88%}
.h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em;font-weight:600}
.h3{font-size:var(--t-h3);line-height:1.3;font-weight:600}
[lang="ar"] .h1,[lang="ar"] .h2{letter-spacing:0;line-height:1.3}
[lang="ar"] .h3{line-height:1.5}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--graphite);max-width:56ch}
[lang="ar"] .lead{line-height:1.85}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:lining-nums tabular-nums;unicode-bidi:isolate}
.muted{color:var(--graphite)}

/* ---------- NEEDS marker: visible, never mistaken for content ---------- */
.need{display:inline-flex;align-items:baseline;gap:.35em;font:500 var(--t-label)/1.3 var(--f-mono);letter-spacing:.06em;color:var(--selvedge);border:1px dashed var(--selvedge);padding:.2em .5em;vertical-align:middle;text-transform:none}
.need::before{content:"NEEDS";font-weight:600;letter-spacing:.12em}
[lang="ar"] .need{font-family:var(--f-sans);font-size:.8125rem;letter-spacing:0}
[lang="ar"] .need::before{content:"مطلوب"}
.need-block{border:1px dashed var(--selvedge);padding:var(--s-5);display:flex;gap:var(--s-4);align-items:flex-start;color:var(--ink);background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(168,50,31,.05) 9px 10px)}
.need-block .need{flex:0 1 auto;min-width:0}
.need{flex-wrap:wrap;max-width:100%}

/* ---------- buttons: sharp, ink, no pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 26px;border:1.5px solid var(--ink);background:var(--ink);color:var(--cotton);font:600 1rem/1.2 var(--f-sans);text-decoration:none;cursor:pointer;border-radius:var(--radius);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cotton)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9375rem}
[lang="ar"] .btn{line-height:1.45}
.tlink{font-weight:600;text-decoration:underline;text-decoration-color:var(--selvedge);text-decoration-thickness:2px;text-underline-offset:.35em}

/* ---------- header ---------- */
.demo-bar{background:var(--selvedge);color:#fff;font:500 .8125rem/1.5 var(--f-sans);text-align:center;padding:6px 16px}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--cotton) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:var(--rule)}
.site-head .bar{display:flex;align-items:center;gap:var(--s-6);min-height:68px}
.brand{display:block;flex:none}
.brand-logo{height:30px;width:auto}
[lang="ar"] .brand-logo{height:36px}
.nav{display:flex;gap:22px;margin-inline-start:auto;font-size:.9375rem}
.nav a{text-decoration:none;padding-block:6px;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--selvedge)}
.head-tools{display:flex;align-items:center;gap:var(--s-3)}
.lang-switch{font-size:.9375rem;font-weight:600;text-decoration:none;padding:6px}
.lang-switch[lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif}
.cur-select{font:500 .8125rem/1 var(--f-mono);min-height:40px;padding-inline:10px 26px;border:var(--hair);background:transparent;color:var(--ink);appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-size:5px 5px;background-repeat:no-repeat;background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%}
[dir="rtl"] .cur-select{background-position:8px 52%,13px 52%}
[lang="ar"] .cur-select{font-family:var(--f-sans)}
.menu-toggle{display:none;width:44px;height:44px;border:var(--hair);background:transparent;color:var(--ink);position:relative;cursor:pointer}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{position:absolute;inset-inline:12px;height:1.5px;background:currentColor;content:"";transition:transform .2s}
.menu-toggle .bars{top:21px}.menu-toggle .bars::before{top:-6px;inset-inline:0}.menu-toggle .bars::after{top:6px;inset-inline:0}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{border-top:var(--hair);padding-block:var(--s-4) var(--s-6);max-height:calc(100vh - 70px);overflow:auto}
.mobile-menu ol{list-style:none;margin:0 0 var(--s-5);padding:0;counter-reset:m}
.mobile-menu li{counter-increment:m;border-bottom:var(--hair)}
.mobile-menu li a{display:flex;gap:var(--s-4);align-items:baseline;padding:14px 0;font-size:1.25rem;font-weight:600;text-decoration:none}
.mobile-menu li a::before{content:counter(m,decimal-leading-zero);font:500 var(--t-label) var(--f-mono);color:var(--selvedge)}
.mobile-menu .btn{width:100%}
body.menu-open{overflow:hidden}
@media (max-width:1100px){.nav{display:none}.menu-toggle{display:inline-block}.head-tools{margin-inline-start:auto}}
@media (max-width:560px){.head-tools .btn,.head-tools .lang-switch{display:none}}

/* ---------- MOTIF: ruler divider (counts right-to-left on Arabic pages) ---------- */
.ruler{position:relative;height:30px;border-bottom:1px solid var(--ink);color:var(--graphite);
  background:
   linear-gradient(to right,var(--ink) 0 1px,transparent 1px) 0 100%/40px 14px repeat-x,
   linear-gradient(to right,var(--graphite) 0 1px,transparent 1px) 20px 100%/40px 9px repeat-x,
   linear-gradient(to right,var(--chalk) 0 1px,transparent 1px) 0 100%/4px 5px repeat-x}
[dir="rtl"] .ruler{background:
   linear-gradient(to left,var(--ink) 0 1px,transparent 1px) 100% 100%/40px 14px repeat-x,
   linear-gradient(to left,var(--graphite) 0 1px,transparent 1px) calc(100% - 20px) 100%/40px 9px repeat-x,
   linear-gradient(to left,var(--chalk) 0 1px,transparent 1px) 100% 100%/4px 5px repeat-x}
.ruler{overflow:hidden}
.ruler ol{list-style:none;margin:0;padding:0;display:flex;font:500 10px/1 var(--f-mono);position:absolute;inset:2px 0 auto 0}
.ruler li{flex:0 0 80px;padding-inline-start:3px}
.ruler .unit{position:absolute;inset-inline-end:0;top:-2px;font:500 10px/1 var(--f-mono);color:var(--selvedge)}

/* ---------- MOTIF: dimension lines in SVG flats ---------- */
.flat{color:var(--ink);overflow:visible}
.flat .fl-fill{fill:var(--paper)}
.flat .fl-tie{fill:var(--ink)}
.flat .emb-zone{stroke:var(--selvedge)}
.dim-l{stroke:var(--selvedge);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.dim-ext{stroke:var(--selvedge);stroke-width:1;stroke-dasharray:3 3;fill:none;vector-effect:non-scaling-stroke}
.dim-dot{fill:var(--selvedge)}
.dim-t{font:500 15px var(--f-mono);fill:var(--selvedge);paint-order:stroke;stroke:var(--cotton);stroke-width:6px}
[lang="ar"] .dim-t{font:600 17px var(--f-sans)}
.dim-need{fill:var(--selvedge);font-weight:600}
.flat .dim{transition:opacity .7s}
.js .hero-fig:not(.drawn) .flat .dim{opacity:0}
.js .hero-fig .flat .dim:nth-of-type(2){transition-delay:.25s}.js .hero-fig .flat .dim:nth-of-type(3){transition-delay:.5s}
/* MOTIF: dimension bracket in HTML (numerals, timeline) */
.dimx{position:relative;display:block;height:16px;border-inline:1.5px solid var(--selvedge)}
.dimx::before{content:"";position:absolute;inset-inline:0;top:50%;border-top:1.5px solid var(--selvedge)}
.dimx span{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);background:var(--cotton);padding-inline:8px;font:500 var(--t-label)/1 var(--f-mono);color:var(--selvedge);white-space:nowrap;letter-spacing:.06em}
[dir="rtl"] .dimx span{transform:translate(50%,-50%);font-family:var(--f-sans);font-size:.8125rem;font-weight:600}
.ink-sec .dimx span{background:var(--ink)}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:var(--sec-tight)}
.kicker{display:flex;gap:var(--s-3);align-items:center;margin-bottom:var(--s-5)}
.kicker::before{content:"";width:28px;border-top:1.5px solid var(--selvedge)}
.sec-top{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-bottom:var(--s-8)}
.sec-top .h1{grid-column:1/span 9}
.sec-top .lead{grid-column:1/span 6;margin-top:var(--s-5)}
@media (max-width:760px){.sec-top .h1,.sec-top .lead{grid-column:1/-1}}

/* ---------- hero ---------- */
.hero{padding-block:var(--s-8) 0;overflow:hidden}
.hero .g12{align-items:end}
.hero-copy{grid-column:1/span 7;padding-bottom:var(--s-8)}
.hero-copy .display{margin-block:var(--s-5) var(--s-6)}
.hero-copy .lead{max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-7)}
.hero-fig{grid-column:8/-1;margin-inline-end:calc(var(--gutter) * -1 - 4vw);position:relative}
.hero-fig figcaption{margin-top:var(--s-3);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.hero-fig .flat{width:100%}
@media (max-width:980px){.hero-copy{grid-column:1/-1;padding-bottom:var(--s-5)}.hero-fig{grid-column:1/-1;margin-inline:0;max-width:520px}}
@media (max-width:560px){.hero{padding-top:var(--s-6)}.hero-copy .display{margin-block:var(--s-4)}}

/* ---------- 01 sectors: a spec table, not cards ---------- */
.sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--rule)}
.sector{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6) var(--s-5) var(--s-7);border-inline-end:var(--hair);text-decoration:none;position:relative;transition:background .2s}
.sector:last-child{border-inline-end:0}
.sector:hover{background:var(--paper)}
.sector .idx{font:500 var(--t-label) var(--f-mono);color:var(--selvedge)}
.sector .flat{width:100%;max-width:260px;margin-inline:auto}
.sector .pain{font-weight:600}
.sector p{color:var(--graphite);font-size:.9688rem}
.sector .foot{margin-top:auto;display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline;border-top:var(--hair);padding-top:var(--s-3)}
.sector .foot .tlink{font-size:.9375rem}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}.sector:nth-child(2){border-inline-end:0}.sector:nth-child(-n+2){border-bottom:var(--hair)}}
@media (max-width:560px){.sectors{grid-template-columns:1fr}.sector{border-inline-end:0;border-bottom:var(--hair);display:grid;grid-template-columns:110px 1fr;column-gap:var(--s-4);padding:var(--s-5) 0}
  .sector .flat{grid-row:1/span 4;max-width:110px;margin:0}.sector .foot{grid-column:1/-1}}

/* ---------- 02 standards: swatch cards with pinked edge ---------- */
.std .g12{row-gap:var(--s-7)}
.std-intro{grid-column:1/span 4}
.swatches{grid-column:5/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s-5)}
.swatch{background:var(--paper);display:flex;flex-direction:column;box-shadow:var(--shadow-sheet)}
.swatch .cloth{height:128px;position:relative;
  clip-path:polygon(0 0,100% 0,100% 100%,97.5% 94%,95% 100%,92.5% 94%,90% 100%,87.5% 94%,85% 100%,82.5% 94%,80% 100%,77.5% 94%,75% 100%,72.5% 94%,70% 100%,67.5% 94%,65% 100%,62.5% 94%,60% 100%,57.5% 94%,55% 100%,52.5% 94%,50% 100%,47.5% 94%,45% 100%,42.5% 94%,40% 100%,37.5% 94%,35% 100%,32.5% 94%,30% 100%,27.5% 94%,25% 100%,22.5% 94%,20% 100%,17.5% 94%,15% 100%,12.5% 94%,10% 100%,7.5% 94%,5% 100%,2.5% 94%,0 100%)}
.cl-pq{background:radial-gradient(circle at 2px 2px,#FDFCF8 1.1px,transparent 1.3px) 0 0/6px 6px,#E4E0D6}
.cl-pp{background:repeating-linear-gradient(0deg,#ECEEF2 0 1px,#E2E5EB 1px 2px)}
.cl-tw{background:repeating-linear-gradient(135deg,#2B3140 0 2px,#232835 2px 4px)}
.cl-sc{background:repeating-linear-gradient(90deg,#3A6F6B 0 2px,#335F5C 2px 3px)}
.cl-fl{background:radial-gradient(circle at 30% 30%,#8A8F97 0 .6px,transparent 1px) 0 0/3px 3px,#7B8089}
.swatch dl{padding:var(--s-4);display:grid;grid-template-columns:auto 1fr;gap:6px var(--s-4);font-size:.875rem}
.swatch dt{font:500 var(--t-label)/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
[lang="ar"] .swatch dt{font-family:var(--f-sans);text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:600}
.swatch dd{font-variant-numeric:tabular-nums}
.swatch .code{font:600 .8125rem var(--f-mono);color:var(--ink);padding:var(--s-3) var(--s-4) 0;display:flex;justify-content:space-between}
.swatch .code b{font-size:1.5rem;font-family:var(--f-sans);font-weight:700;letter-spacing:-.02em}
.cust{grid-column:5/-1}
@media (max-width:980px){.std-intro,.swatches,.cust{grid-column:1/-1}}
@media (max-width:560px){.swatches{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:var(--s-4)}.swatch{flex:0 0 72%;scroll-snap-align:start}}

/* ---------- tables: spec sheet ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.9375rem}
.spec caption{text-align:start;padding-bottom:var(--s-3)}
.spec th,.spec td{padding:14px 12px;text-align:start;border-bottom:var(--hair);vertical-align:top}
.spec thead th{font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);border-bottom:var(--rule)}
[lang="ar"] .spec thead th{font-family:var(--f-sans);text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:600}
.spec tbody th{font-weight:600}
.spec td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x .spec{min-width:640px}

/* ---------- 03 ordering: measured timeline ---------- */
.timeline{display:grid;grid-template-columns:var(--tl);margin-bottom:var(--s-8)}
.tl-seg{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.tl-bar{height:10px;background:var(--ink);position:relative}
.tl-seg:nth-child(odd) .tl-bar{background:var(--graphite)}
.tl-seg .dimx{margin-bottom:var(--s-2)}
.tl-name{font-weight:600;font-size:.9375rem;padding-inline-end:var(--s-3);line-height:1.35}
.tl-when{font:500 var(--t-label)/1.4 var(--f-mono);color:var(--graphite);letter-spacing:.04em}
[lang="ar"] .tl-when{font-family:var(--f-sans);font-size:.8125rem}
@media (max-width:760px){.timeline{grid-template-columns:1fr;gap:0;border-inline-start:3px solid var(--ink)}
  .tl-seg{display:grid;grid-template-columns:1fr;padding:var(--s-3) 0;padding-inline-start:var(--s-5);border-bottom:var(--hair)}
  .tl-bar,.tl-seg .dimx{display:none}}
.cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:var(--rule)}
.cell{padding:var(--s-5) var(--s-4) var(--s-5) 0;padding-inline:0 var(--s-4);border-inline-end:var(--hair)}
.cell + .cell{padding-inline-start:var(--s-4)}
.cell:last-child{border-inline-end:0}
.cell .label{display:block;margin-bottom:var(--s-3)}
.cell p{font-size:.9688rem}
@media (max-width:1000px){.cells{grid-template-columns:1fr 1fr}.cell{border-bottom:var(--hair);padding-inline:0 var(--s-4)!important}.cell:nth-child(even){border-inline-end:0;padding-inline-start:var(--s-4)!important}}
@media (max-width:560px){.cells{grid-template-columns:1fr}.cell{border-inline-end:0;padding-inline:0!important}}

/* ---------- 04 proof: numerals that break the grid ---------- */
.proof{overflow:hidden}
.numerals{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;margin-inline-end:-8vw;margin-bottom:var(--s-8)}
.numeral{display:flex;flex-direction:column;gap:var(--s-3)}
.numeral b{font-size:var(--t-numeral);line-height:.8;font-weight:700;letter-spacing:-.06em;font-stretch:75%;font-variant-numeric:lining-nums}
[lang="ar"] .numeral b{letter-spacing:-.03em;font-family:"IBM Plex Sans",sans-serif}
.numeral .dimx{max-width:92%}
.numeral span.l{font-size:1.0625rem;color:var(--graphite)}
.numerals-needs{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);margin-bottom:var(--s-8)}
.numerals-needs div{display:flex;flex-direction:column;gap:var(--s-2)}
@media (max-width:760px){.numerals{grid-template-columns:1fr;margin-inline-end:0;gap:var(--s-6)}}
.plate{position:relative;margin-inline:calc((100vw - 100%) / -2);min-height:clamp(260px,42vw,560px);background:repeating-linear-gradient(135deg,var(--chalk-2) 0 1px,transparent 1px 14px),var(--paper);display:flex;align-items:flex-end}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate .cap{position:relative;width:var(--page);margin-inline:auto;padding-block:var(--s-5);display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap}
.plate::before,.plate::after{content:"";position:absolute;width:28px;height:28px;border:1.5px solid var(--ink);inset-block-start:20px}
.plate::before{inset-inline-start:20px;border-inline-end:0;border-bottom:0}
.plate::after{inset-inline-end:20px;border-inline-start:0;border-bottom:0}
.proof-rows{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6);margin-top:var(--s-8)}
.proof-rows > div{grid-column:span 6}
.proof-rows h3{margin-bottom:var(--s-4)}
@media (max-width:760px){.proof-rows > div{grid-column:1/-1}}

/* ---------- 05 the reject table: dark, full bleed ---------- */
.ink-sec{background:var(--ink);color:var(--on-ink)}
.ink-sec .label,.ink-sec .lead,.ink-sec .muted{color:var(--on-ink-2)}
.ink-sec .flat{color:var(--on-ink)}
.ink-sec .flat .fl-fill{fill:transparent}
.ink-sec .dim-t{stroke:var(--ink)}
.ink-sec .need{color:#F08A70;border-color:#F08A70}
.ink-sec .need-block{border-color:#F08A70;color:var(--on-ink)}
.rejects{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--gutter)}
.reject{position:relative;border:1px solid #3A3935;padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.reject:first-child{grid-row:span 2}
.reject .flat{max-width:280px;margin-inline:auto;width:100%}
.reject:first-child .flat{max-width:420px}
.stamp{position:absolute;inset-block-start:var(--s-5);inset-inline-end:var(--s-5);border:2px solid var(--selvedge);color:#F08A70;font:700 .8125rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;transform:rotate(-6deg)}
[lang="ar"] .stamp{font-family:var(--f-sans);letter-spacing:0;font-size:.95rem}
.reject h3{font-size:1.25rem}
.reject p{color:var(--on-ink-2);font-size:.9375rem}
.qc-row{display:grid;grid-template-columns:auto 1fr;gap:var(--s-7);align-items:end;margin-bottom:var(--s-8)}
.rate{display:flex;flex-direction:column;gap:var(--s-3)}
.rate .frame{font-size:var(--t-numeral);line-height:.8;font-weight:700;font-stretch:75%;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #F08A70}
.qc-close{font-size:var(--t-h2);font-weight:600;line-height:1.2;margin-top:var(--s-8);max-width:22ch}
@media (max-width:900px){.rejects{grid-template-columns:1fr 1fr}.reject:first-child{grid-row:auto;grid-column:1/-1}.qc-row{grid-template-columns:1fr}}
@media (max-width:560px){.rejects{grid-template-columns:1fr}}

/* ---------- 06 order sheet ---------- */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-7);align-items:start}
.sheet-main{display:flex;flex-direction:column;gap:var(--s-7)}
.step{border-top:var(--rule);padding-top:var(--s-5)}
.step > .label{display:block;margin-bottom:var(--s-5);color:var(--ink)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--gutter)}
.f{display:grid;gap:6px;min-width:0;align-content:start}
.f.full{grid-column:1/-1}
.f label,.f legend{font:500 var(--t-label)/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);display:flex;align-items:center;gap:8px}
.f label::before,.f legend::before{content:"";width:14px;border-top:1px solid var(--selvedge)}   /* leader line */
[lang="ar"] .f label,[lang="ar"] .f legend{font-family:var(--f-sans);text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:600;line-height:1.6}
.f input,.f select,.f textarea{font:inherit;font-size:1.0625rem;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:10px 0;min-height:48px;width:100%;max-width:100%}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-size:5px 5px;background-repeat:no-repeat;background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;padding-inline-end:28px}
[dir="rtl"] .f select{background-position:8px 55%,13px 55%}
.f textarea{min-height:88px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--selvedge);box-shadow:0 1.5px 0 var(--selvedge)}
.f [aria-invalid="true"]{border-bottom-color:var(--selvedge)}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{text-align:right}
fieldset{border:0;margin:0;padding:0;min-width:0}
.seg{display:flex;flex-wrap:wrap;gap:0}
.seg legend{width:100%;margin-bottom:var(--s-3)}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:10px 16px;border:1px solid var(--ink);margin-inline-end:-1px;font-size:.9375rem;font-weight:500;background:transparent}
.seg input:checked + span{background:var(--ink);color:var(--cotton)}
.seg input:focus-visible + span{outline:2px solid var(--selvedge);outline-offset:2px}
.est-line{display:grid;grid-template-columns:minmax(0,1fr) 120px 44px;gap:var(--s-4);align-items:end;padding-block:var(--s-3);border-bottom:var(--hair)}
.icon-btn{width:44px;height:44px;border:var(--hair);background:transparent;color:var(--ink);font-size:1.25rem;cursor:pointer}
.add-line{margin-top:var(--s-4);background:none;border:0;padding:6px 0;font:600 .9375rem var(--f-sans);color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--selvedge);text-decoration-thickness:2px;text-underline-offset:.35em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-6)}
@media (max-width:1000px){.sheet{grid-template-columns:1fr}.opts{grid-template-columns:1fr}}
@media (max-width:560px){.fields{grid-template-columns:1fr}.est-line{grid-template-columns:minmax(0,1fr) 84px 44px;gap:var(--s-3)}}
/* receipt / order spec: the sheet's own dimension language */
.receipt{position:sticky;top:92px;background:var(--paper);box-shadow:var(--shadow-sheet);padding:var(--s-6) var(--s-5)}
.receipt .top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.receipt .pp{font-size:3.25rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;margin-block:var(--s-2) var(--s-3);font-stretch:85%}
[lang="ar"] .receipt .pp{line-height:1.3;letter-spacing:0}
.receipt .pp-l{display:block}
.receipt table{width:100%;border-collapse:collapse;font-size:.9375rem;margin-top:var(--s-4)}
.receipt td{padding:9px 0;border-bottom:1px dashed var(--chalk);vertical-align:top}
.receipt td:last-child{text-align:end;white-space:nowrap;padding-inline-start:12px;font-variant-numeric:tabular-nums}
.receipt tr.m td{color:var(--graphite);font-size:.875rem}
.receipt .rsub{display:block;font-size:.8125rem;color:var(--graphite);font-variant-numeric:tabular-nums;unicode-bidi:isolate}
[lang="ar"] .receipt .rsub{font-size:.875rem}
.receipt .tot td{border-bottom:0;border-top:var(--rule);padding-top:var(--s-3);font-weight:700;font-size:1.0625rem}
.receipt .warn{color:var(--selvedge);font-weight:600;font-size:.875rem;min-height:1.2em;margin-top:var(--s-3)}
.receipt small{display:block;color:var(--graphite);font-size:.8125rem;margin-top:6px}
[lang="ar"] .receipt small{font-size:.875rem}
.receipt .btn{width:100%;margin-top:var(--s-5)}
.receipt .form-msg{color:var(--selvedge);font-weight:600;font-size:.875rem;margin-top:var(--s-3);min-height:1.2em}
.receipt .note{margin-top:var(--s-4);font-size:.8125rem;color:var(--graphite)}
.receipt .direct{margin-top:var(--s-5);padding-top:var(--s-4);border-top:var(--hair);display:grid;gap:4px;font-size:.9375rem}
.est-email{margin-top:var(--s-5);padding-top:var(--s-4);border-top:var(--hair)}
.est-email .row{display:flex;gap:8px}
.est-email input{flex:1;min-width:0;font:inherit;background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:8px 0}
.est-email-msg{font-size:.8125rem;color:var(--graphite);min-height:1.2em;margin-top:6px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.done{display:none;border-top:var(--rule);padding-top:var(--s-6)}
.done.on{display:block}
.done p{margin-block:var(--s-3) var(--s-5);color:var(--graphite)}

/* ---------- products: spec-sheet cards that become B2C cards later ---------- */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.product{background:var(--paper);display:grid;grid-template-columns:minmax(120px,38%) 1fr;box-shadow:var(--shadow-sheet)}
.product .pic{padding:var(--s-5);border-inline-end:var(--hair);display:flex;align-items:center}
.product .pic .flat{width:100%}
.product .pic .dim{opacity:0;transition:opacity .3s}
.product:hover .pic .dim,.product:focus-within .pic .dim{opacity:1}
.product .body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.product .code{font:500 var(--t-label) var(--f-mono);color:var(--selvedge);letter-spacing:.1em}
.product dl{display:grid;grid-template-columns:auto 1fr;gap:4px var(--s-4);font-size:.875rem}
.product dt{color:var(--graphite)}
.product .price{display:flex;justify-content:space-between;align-items:baseline;border-top:var(--hair);padding-top:var(--s-3);margin-top:auto}
.product .price b{font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.product .btn{width:100%}
@media (max-width:900px){.products{grid-template-columns:1fr}}
@media (max-width:440px){.product{grid-template-columns:1fr}.product .pic{border-inline-end:0;border-bottom:var(--hair);max-height:220px;justify-content:center}.product .pic .flat{max-width:180px}}

/* ---------- prose, lists, faq ---------- */
.two{display:grid;grid-template-columns:4fr 8fr;column-gap:var(--gutter)}
.prose{max-width:66ch}
.prose p + p{margin-top:var(--s-4)}
.prose h3{margin-block:var(--s-6) var(--s-2)}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--ink)}
.terms p{color:var(--graphite)}
@media (max-width:860px){.two{grid-template-columns:1fr;row-gap:var(--s-5)}}
.numbered{list-style:none;margin:0;padding:0;counter-reset:n;border-top:var(--rule)}
.numbered li{counter-increment:n;display:grid;grid-template-columns:64px 1fr;gap:var(--s-4);padding-block:var(--s-5);border-bottom:var(--hair)}
.numbered li::before{content:counter(n,decimal-leading-zero);font:500 .8125rem var(--f-mono);color:var(--selvedge);padding-top:.3em}
.numbered h3{font-size:1.1875rem;margin-bottom:var(--s-2)}
.numbered p{color:var(--graphite)}
.faq{border-top:var(--rule)}
.faq details{border-bottom:var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:64px 1fr 24px;gap:var(--s-4);padding-block:var(--s-5);font-weight:600;font-size:1.125rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font:500 .8125rem var(--f-mono);color:var(--selvedge)}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--f-mono);text-align:end;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--s-6);padding-inline-start:calc(64px + var(--s-4));color:var(--graphite);max-width:calc(66ch + 80px)}
@media (max-width:560px){.faq summary,.numbered li{grid-template-columns:40px 1fr 20px}.numbered li{grid-template-columns:40px 1fr}.faq details p{padding-inline-start:calc(40px + var(--s-4))}}
.chart-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:var(--gutter)}
@media (max-width:900px){.chart-grid{grid-template-columns:1fr}}
.steps-plain{margin:0;padding-inline-start:1.2em;display:grid;gap:var(--s-3)}
.page-hero{padding-block:var(--s-8) var(--s-7);border-bottom:var(--rule)}
.page-hero .h1{margin-top:var(--s-4);max-width:18ch}
.page-hero .lead{margin-top:var(--s-5)}
.crumb{font:500 var(--t-label) var(--f-mono);letter-spacing:.08em;color:var(--graphite)}
[lang="ar"] .crumb{font-family:var(--f-sans);font-size:.875rem;letter-spacing:0}
.crumb a{text-decoration:none}
.sector-hero .g12{align-items:center}
.sector-hero .hero-copy{padding-bottom:0}
.sector-hero .display{font-size:var(--t-h1);line-height:var(--lh-head)}
.link-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:1.125rem;font-weight:600}

/* ---------- footer ---------- */
footer{border-top:var(--rule);padding-block:var(--s-7) var(--s-6);margin-top:var(--sec)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--gutter)}
footer h3{font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:var(--s-4)}
[lang="ar"] footer h3{font-family:var(--f-sans);text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9375rem}
footer a{text-decoration:none}footer a:hover{text-decoration:underline}
footer .brand-logo{filter:none}
footer .legal{margin-top:var(--s-7);padding-top:var(--s-4);border-top:var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-3);font-size:.8125rem;color:var(--graphite)}
@media (max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
.mobile-cta{display:none}
@media (max-width:700px){.mobile-cta{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;inset-inline:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--cotton);border-top:var(--rule)}
  .mobile-cta .btn{min-height:46px}footer{padding-bottom:110px}body.menu-open .mobile-cta{display:none}}
.thanks-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}

/* ---------- review fixes ---------- */
.sec-top > .kicker,.sec-top > .label{grid-column:1/-1}
.sec-top .display{grid-column:1/span 10}
.hero .g12{align-items:center}
.hero-copy{grid-column:1/span 7}
.hero-copy .display{font-size:clamp(3.25rem,7.6vw,7.75rem)}
[lang="ar"] .hero-copy .display{font-size:clamp(2.8rem,6.4vw,6.4rem)}
.hero-fig{grid-column:8/-1;margin-inline-end:0;max-width:600px;justify-self:end;width:100%}
.hero-fig .flat{max-height:68vh}
.dim-t{stroke-width:9px;stroke-linejoin:round}
.flat-callout .dim-t{font-size:30px}
[lang="ar"] .flat-callout .dim-t{font-size:32px}
.sector .foot{flex-direction:column;align-items:flex-start;gap:6px}
.std-intro{grid-column:1/span 5}
.cust{grid-column:7/-1;align-self:end}
.swatches{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.std-intro,.cust{grid-column:1/-1}}
@media (max-width:560px){.swatches{display:flex}}
.numeral b{font-size:clamp(9rem,24vw,21rem)}
.f.seg label{display:block;font:inherit;text-transform:none;letter-spacing:0;color:inherit}
.f.seg label::before{display:none}
.f.seg legend{display:flex}
.seg span{font-family:var(--f-sans);text-transform:none;letter-spacing:0}
.reject .flat{color:var(--on-ink)}
.ink-sec .dim-t{stroke:var(--ink)}
.reject .h3{margin-top:auto}

@media (max-width:980px){
  .hero-copy{grid-column:1/-1;padding-bottom:var(--s-4)}
  .hero-fig{grid-column:1/-1;justify-self:center;max-width:460px}
  .sec-top .display{grid-column:1/-1}}
@media (max-width:560px){
  .hero-copy .display{font-size:clamp(2.75rem,13vw,4rem)}
  [lang="ar"] .hero-copy .display{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero-fig{max-width:340px}
  .numeral b{font-size:clamp(8rem,44vw,12rem)}}

/* ---------- SEO batch: new page types ---------- */
.cats{grid-template-columns:repeat(5,minmax(0,1fr))}
.cats .flat{max-width:180px}
@media (max-width:1100px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}.cats .sector{border-bottom:var(--hair)}}
@media (max-width:700px){.cats{grid-template-columns:1fr}}
.cta-band{background:none;border:1px solid var(--ink);justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--s-6)}
.cta-band .h3{max-width:48ch}
.related a,.link-list a{text-decoration:underline;text-decoration-color:var(--selvedge);text-decoration-thickness:2px;text-underline-offset:.35em}
.two-col-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
@media (max-width:560px){.two-col-list{grid-template-columns:1fr}}
.page-hero .two{align-items:end}
.page-hero .prose p + p{margin-top:var(--s-4)}
/* vitals: no backdrop blur on small screens, reserve space for flats */
@media (max-width:760px){.site-head{backdrop-filter:none;background:var(--cotton)}}
.product .pic .flat,.sector .flat{aspect-ratio:470/500}
.cat-h1{max-width:22ch}
[lang="ar"] .cat-h1{max-width:24ch}

/* =====================================================================
   CRAFT LAYER · motion, texture, interaction
   Rules: animate transform and opacity only; 200–500 ms; one easing, never bouncy.
   Every effect has a static state (no-js, reduced motion) that is the finished design.
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.7,.15,1);--ease-in:cubic-bezier(.5,0,.75,0);--dur:420ms}

/* texture: woven grain on the cotton ground (static, tiles with the page, no compositing cost) */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  repeating-linear-gradient(0deg,rgba(29,29,27,.018) 0 1px,transparent 1px 3px)}
.ink-sec{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hero: kinetic headline, masked line rise + counter (text stays selectable via aria-label) */
.kinetic .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.kinetic .ln > span{display:inline-block}
.kinetic .count{display:inline;font-variant-numeric:tabular-nums lining-nums;color:var(--selvedge)}
[lang="ar"] .kinetic .count{font-family:"IBM Plex Sans",sans-serif}
.motion .kinetic .ln > span{transform:translateY(105%);transition:transform 640ms var(--ease)}
.motion .kinetic .ln:nth-child(2) > span{transition-delay:90ms}
.motion .kinetic.in .ln > span{transform:none}

/* signature: dimension lines draw themselves (scale on the line, fade on the label) */
.draw .dim-h,.draw .dim-v,.product .dim-h{transform-box:fill-box;transform-origin:center}
.motion .draw .dim-h{transform:scaleX(0);transition:transform 700ms var(--ease)}
.motion .draw .dim-v{transform:scaleY(0);transition:transform 800ms var(--ease)}
.motion .draw .dim-tk,.motion .draw .dim-t,.motion .draw .dim-ext{opacity:0;transition:opacity 360ms var(--ease)}
.motion .draw.drawn .dim-h,.motion .draw.drawn .dim-v{transform:none}
.motion .draw.drawn .dim-tk,.motion .draw.drawn .dim-t,.motion .draw.drawn .dim-ext{opacity:1}
.motion .draw .dim:nth-of-type(2) *{transition-delay:220ms}
.motion .draw .dim:nth-of-type(3) *{transition-delay:440ms}
.motion .draw.drawn .dim-t{transition-delay:520ms}
.js .hero-fig:not(.drawn) .flat .dim{opacity:1}   /* opacity now handled per part */
/* product cards: annotation reveals on hover/focus, drawn not faded */
.product .pic .dim{opacity:1}
.product .pic .dim-h{transform:scaleX(0);transition:transform 380ms var(--ease)}
.product .pic .dim-tk,.product .pic .dim-t{opacity:0;transition:opacity 240ms var(--ease)}
.product:hover .pic .dim-h,.product:focus-within .pic .dim-h{transform:none}
.product:hover .pic .dim-tk,.product:hover .pic .dim-t,.product:focus-within .pic .dim-tk,.product:focus-within .pic .dim-t{opacity:1;transition-delay:120ms}
@media (hover:none){.product .pic .dim-h{transform:none}.product .pic .dim-tk,.product .pic .dim-t{opacity:1}}

/* scroll reveal: fast, staggered, never on primary CTAs */
.motion .rv{opacity:0;transform:translateY(18px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.motion .rv.in{opacity:1;transform:none}

/* marquee: slow, pausable, static when reduced motion */
.marquee{border-block:var(--rule);background:var(--paper);overflow:hidden}
.mq-row{display:flex;align-items:center;gap:var(--s-4)}
.mq-view{flex:1;overflow:hidden;display:flex;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{list-style:none;margin:0;padding:14px 0;display:flex;flex:none;gap:0;animation:mq 70s linear infinite}
.mq-track li{display:flex;align-items:center;white-space:nowrap;font:500 .9375rem/1 var(--f-sans);padding-inline:22px}
.mq-track li::after{content:"";width:34px;border-top:1.5px dashed var(--selvedge);margin-inline-start:44px}
.mq-track li[lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:1.0625rem}
.mq-track li[lang="en"]{font-family:"IBM Plex Sans",sans-serif}
@keyframes mq{to{transform:translateX(-100%)}}
[dir="rtl"] .mq-track{animation-name:mq-rtl}
@keyframes mq-rtl{to{transform:translateX(100%)}}
.marquee:hover .mq-track,.marquee:focus-within .mq-track,.marquee.paused .mq-track{animation-play-state:paused}
.mq-toggle{flex:none;width:36px;height:36px;border:var(--hair);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.mq-ico{width:10px;height:12px;border-inline:3px solid currentColor}
.marquee.paused .mq-ico{border:0;width:0;height:0;border-block:6px solid transparent;border-inline-start:10px solid currentColor}
[dir="rtl"] .marquee.paused .mq-ico{border-inline-start:0;border-inline-end:10px solid currentColor}

/* sticky storytelling: the ordering schedule */
.story{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);margin-bottom:var(--s-8)}
.story-pin{position:sticky;top:120px;align-self:start;padding-block:var(--s-5)}
.story-no{display:flex;align-items:baseline;gap:var(--s-3)}
.story-no b{font-size:clamp(6rem,12vw,10rem);line-height:.85;font-weight:700;font-stretch:75%;letter-spacing:-.05em;font-family:"IBM Plex Sans",sans-serif}
.story-bar{position:relative;height:12px;background:var(--chalk-2);margin-block:var(--s-6) var(--s-3);overflow:hidden}
.story-fill{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--p,.02));transform-origin:left center;transition:transform 520ms var(--ease)}
[dir="rtl"] .story-fill{transform-origin:right center}
.story-bar i{position:absolute;top:0;bottom:0;width:2px;background:var(--cotton);z-index:1}
.story-cap{color:var(--selvedge)}
.story-steps{list-style:none;margin:0;padding:0}
.st{display:grid;grid-template-columns:64px 1fr;gap:var(--s-4);padding-block:var(--s-7);border-bottom:var(--hair);min-height:44vh;align-content:center;opacity:.5;transition:opacity 360ms var(--ease)}
.st.on{opacity:1}
.no-js .st,.nomotion .st{opacity:1}
.st-no{font:500 .8125rem var(--f-mono);color:var(--selvedge);padding-top:.5em}
.st-when{font:500 var(--t-label)/1.5 var(--f-mono);letter-spacing:.06em;color:var(--selvedge);margin-block:6px 10px;text-transform:uppercase}
[lang="ar"] .st-when{font-family:var(--f-sans);font-size:.875rem;text-transform:none;letter-spacing:0}
.st-desc{color:var(--graphite)}
@media (max-width:900px){.story{grid-template-columns:1fr}.story-pin{display:none}.st{min-height:0;opacity:1;padding-block:var(--s-5)}}

/* count-up numerals: tabular so nothing shifts while counting */
.count{font-variant-numeric:tabular-nums lining-nums}

/* primary CTA: stitch outline + magnetic pull (desktop) */
.btn{position:relative;will-change:auto}
.btn:not(.btn-line)::after{content:"";position:absolute;inset:-6px;border:1.5px dashed var(--selvedge);opacity:0;transform:scale(.94);transition:opacity 220ms var(--ease),transform 260ms var(--ease);pointer-events:none}
.btn:not(.btn-line):hover::after,.btn:not(.btn-line):focus-visible::after{opacity:1;transform:none}
.btn:not(.btn-line):hover{background:var(--ink);color:var(--cotton)}   /* keep the fill: the stitch is the hover */
.btn:active{transform:translateY(1px)}
.btn-primary{min-height:58px;font-size:1.0625rem}
.magnetic{transition:transform 260ms var(--ease)}

/* swatches: textile, not glossy */
.swatch{transition:transform 260ms var(--ease),box-shadow 260ms var(--ease)}
.swatch:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 1px 0 var(--chalk),0 10px 14px -10px rgba(29,29,27,.35),0 28px 40px -30px rgba(29,29,27,.3)}
.swatch .cloth::after{content:"";position:absolute;inset:8px 8px 14px;border:1px dashed rgba(255,255,255,.55);pointer-events:none}
.cl-pq .swatch .cloth::after,.swatch .cl-pq::after,.swatch .cl-pp::after{border-color:rgba(29,29,27,.25)}

/* measurement cursor over drawings and cloth (fine pointers only) */
@media (pointer:fine){
  .hero-fig .flat,.product .pic,.swatch .cloth,.sector .flat{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg stroke='%23A8321F' stroke-width='1.5'%3E%3Cpath d='M14 2v9M14 17v9M2 14h9M17 14h9'/%3E%3Ccircle cx='14' cy='14' r='2.5' fill='none'/%3E%3C/g%3E%3C/svg%3E") 14 14,crosshair}}

/* reject stamps land when the section enters */
.motion .reject .stamp{opacity:0;transform:scale(1.5) rotate(-14deg);transition:opacity 180ms var(--ease-in),transform 320ms var(--ease-in)}
.motion .reject.in .stamp{opacity:1;transform:rotate(-6deg)}
.motion .reject:nth-child(2) .stamp{transition-delay:120ms}.motion .reject:nth-child(3) .stamp{transition-delay:240ms}

/* receipt reads as a sewn-in label */
.receipt::before{content:"";position:absolute;inset:8px;border:1px dashed var(--chalk);pointer-events:none}
.receipt{position:sticky}
.receipt > *{position:relative}
.micro{font-size:.8125rem;color:var(--graphite);margin-top:10px;text-align:center}
[lang="ar"] .micro{font-size:.875rem}

/* multi-step form */
.progress{margin-block:var(--s-6) 0}
.progress ol{list-style:none;margin:0 0 10px;padding:0;display:flex;gap:var(--s-5);flex-wrap:wrap}
.progress li{font-size:.875rem;color:var(--graphite);display:flex;gap:8px;align-items:baseline}
.progress li .num{font:500 .75rem var(--f-mono);color:var(--graphite)}
.progress li.cur{color:var(--ink);font-weight:600}.progress li.cur .num,.progress li.done .num{color:var(--selvedge)}
.progress li.done{color:var(--ink)}
.progress li[hidden]{display:none}
.progress-bar{height:2px;background:var(--chalk);position:relative;overflow:hidden}
.progress-bar span{position:absolute;inset:0;background:var(--selvedge);transform:scaleX(var(--p,.33));transform-origin:left center;transition:transform 420ms var(--ease)}
[dir="rtl"] .progress-bar span{transform-origin:right center}
.fstep{border-top:var(--rule);padding-top:var(--s-5)}
.step-label{display:block;margin-bottom:var(--s-5);color:var(--ink)}
.motion .fstep.enter{animation:stepIn 380ms var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateX(calc(var(--dir,1) * 22px))}to{opacity:1;transform:none}}
[dir="rtl"] .fstep{--dir:-1}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6)}
.step-back{background:none;border:0;cursor:pointer;font:600 .9375rem var(--f-sans);color:var(--ink);padding:8px 0}
.step-next-m{display:none}
@media (max-width:1000px){.step-next-m{display:inline-flex;flex:1}.receipt #lead-submit{display:none}}
.f .ok-tick{color:var(--selvedge)}

/* success state: a stamp, then the plan */
.stamp-big{position:relative;display:inline-block;inset:auto;font:700 1rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--selvedge);border:2.5px solid var(--selvedge);padding:10px 16px;transform:rotate(-6deg);margin-bottom:var(--s-6)}
[lang="ar"] .stamp-big{font-family:var(--f-sans);letter-spacing:0;font-size:1.25rem}
.motion .done.on .stamp-big,.motion .ty .stamp-big{animation:stampIn 420ms var(--ease-in) both}
@keyframes stampIn{from{opacity:0;transform:scale(1.8) rotate(-16deg)}70%{opacity:1}to{opacity:1;transform:rotate(-6deg)}}
.done{padding-top:var(--s-7)}
.done-head .h1{max-width:18ch}

/* mixed-script composition: the name, set as one typographic object */
.word{padding-block:var(--sec) var(--s-7);overflow-x:clip;border-top:var(--rule)}
.word-grid{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:var(--s-6);row-gap:var(--s-4)}
.w-ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:clamp(6rem,19vw,17rem);line-height:1.35;grid-row:1/span 2;padding-bottom:.05em}
.w-lat{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-stretch:75%;font-size:clamp(3.5rem,11vw,10rem);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--ink);align-self:end}
.w-def{display:flex;flex-direction:column;gap:6px;max-width:36ch;color:var(--graphite);border-top:1.5px solid var(--selvedge);padding-top:12px}
[dir="rtl"] .word-grid{direction:rtl}
@media (max-width:700px){.word-grid{grid-template-columns:1fr}.w-ar{grid-row:auto}}

/* reduced motion: everything is already in its finished state */
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}.mq-view{mask-image:none;-webkit-mask-image:none}.mq-track[aria-hidden]{display:none}.mq-track{flex-wrap:wrap;row-gap:0}.mq-toggle{display:none}
  .story-fill{transition:none}.st{opacity:1}
}
/* mobile: keep the craft, drop the expensive parts */
@media (max-width:760px){.swatch:hover{transform:none}.mq-track{animation-duration:55s}.story-no b{font-size:6rem}}

/* =====================================================================
   CTA SYSTEM · three visible levels
   high  = .btn-primary  filled selvedge, the only filled accent on a screen
   medium= .btn-line     ink outline
   low   = .tlink        underlined text (catalogue, WhatsApp, navigation)
   ===================================================================== */
:root{--primary:#A8321F;--primary-ink:#FFFFFF;--primary-hover:#8E2917}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--primary:#E0694F;--primary-ink:#171716;--primary-hover:#EC8069}}
:root[data-theme="dark"]{--primary:#E0694F;--primary-ink:#171716;--primary-hover:#EC8069}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);min-height:56px;padding-inline:28px;font-weight:600;letter-spacing:.005em}
.btn-primary:hover,.btn:not(.btn-line).btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-ink)}
.btn.btn-primary::after{border-color:var(--ink)}
.btn-primary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{opacity:1;cursor:progress}
.btn-line{min-height:52px}
[lang="ar"] .btn-primary{font-weight:700}
@media (pointer:coarse){.btn,.btn-sm{min-height:48px}.tlink{padding-block:10px;display:inline-block}}
/* loading: a stitch runs under the label; success: filled ink */
.btn.is-loading{position:relative;overflow:hidden}
.btn.is-loading::before{content:"";position:absolute;inset-inline:14px;bottom:10px;height:0;border-top:2px dashed currentColor;opacity:.8;animation:stitchRun .9s linear infinite}
@keyframes stitchRun{from{transform:translateX(-12px)}to{transform:translateX(0)}}
.btn.is-done{background:var(--ink);border-color:var(--ink);color:var(--cotton)}
/* groups: one primary, one lower action, microcopy removing one fear, proof beside it */
.cta-group{display:flex;flex-direction:column;gap:10px;max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5)}
.cta-micro{font-size:.875rem;color:var(--graphite);margin:0}
[lang="ar"] .cta-micro{font-size:.9375rem}
.cta-proof{color:var(--ink);margin-top:6px}
.cta-proof::before{content:"";display:inline-block;width:16px;border-top:1.5px solid var(--selvedge);vertical-align:middle;margin-inline-end:8px}
.hero-actions{margin-top:var(--s-6)}
.hero-copy .hero-actions{margin-top:var(--s-6)}
/* header CTA: outlined while the hero's own primary is on screen, primary after */
.hdr-cta{transition:background .2s,color .2s,border-color .2s}
body:not(.past-hero) .site-head .hdr-cta{background:transparent;color:var(--ink);border-color:var(--ink)}
body:not(.past-hero) .site-head .hdr-cta::after{display:none}
.site-head .btn-sm{min-height:42px}
/* sticky mobile bar: primary + WhatsApp icon, after the hero, hidden near the form and footer */
@media (max-width:700px){
  .mobile-cta{display:grid!important;grid-template-columns:1fr 52px;gap:8px;transform:translateY(110%);transition:transform 280ms var(--ease);visibility:hidden}
  .mobile-cta.show{transform:none;visibility:visible}
  .no-js .mobile-cta{transform:none;visibility:visible}
  .mobile-cta .btn-primary{min-height:52px;font-size:1rem}}
.wa-icon{display:grid;place-items:center;min-height:52px;border:1.5px solid var(--ink);color:var(--ink);background:var(--cotton)}
.wa-icon:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* recap band at exit points */
.recap-box{display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:end;border-top:var(--rule);border-bottom:var(--rule);padding-block:var(--s-7)}
.recap-copy .h2{max-width:20ch}
.recap-copy .muted{margin-top:var(--s-4);max-width:52ch}
.recap-act{display:flex;flex-direction:column;gap:10px}
.recap-low{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-3)}
@media (max-width:860px){.recap-box{grid-template-columns:1fr}}
.faq-cta{padding:0 0 var(--s-5);padding-inline-start:calc(64px + var(--s-4))}
@media (max-width:560px){.faq-cta{padding-inline-start:calc(40px + var(--s-4))}}
.faq-cta .tlink{font-weight:600}
.direct .tlink{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:start;color:inherit}

/* =====================================================================
   BENCHMARK PATTERNS · priced orders, delivery dates, quick quantity,
   effort label, ungated catalogue, share/print, finder, guarantee bar,
   price ladder, direct contact. Dimension-tick motif carries through.
   ===================================================================== */
.gbar li::before,.glist li::before,.dd-rule{color:var(--selvedge);border-inline:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat}
/* guarantee bar */
.gbar{border-block:var(--hair);background:var(--paper)}
.gbar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-6);padding-block:14px}
.gbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6)}
.gbar li{font-size:.9375rem;font-weight:600;display:flex;align-items:center;gap:10px}
.gbar li::before{content:"";flex:none;width:14px;height:9px}
.gbar .tlink{font-size:.9375rem}
@media (max-width:760px){.gbar ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--s-4);width:100%}.gbar li{font-size:.875rem;align-items:flex-start}.gbar li::before{margin-top:.45em}}
.glist{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px var(--s-5);font-size:.9375rem;font-weight:600}
.glist li{position:relative;padding-inline-start:24px}
.glist li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:14px;height:9px}
@media (max-width:560px){.glist{grid-template-columns:1fr}}
/* priced common orders */
.scns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.scns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.scn{background:var(--paper);box-shadow:var(--shadow-sheet);border-top:2px solid var(--ink);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.scn-k{color:var(--selvedge)}
.scn-lines{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.9375rem}
.scn-lines .num{display:inline-block;min-width:4.2ch;font-weight:600}
.scn-sum{margin:auto 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-4);border-top:1px dashed var(--chalk);padding-top:var(--s-3)}
.scn-sum dt{font-size:.8125rem;color:var(--graphite)}
.scn-sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.scn-tot{grid-column:1/-1}
.scn-tot dd{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.scn-disc{margin-inline-start:8px;color:var(--selvedge)}
.scn .btn{width:100%}
.scn-note{margin-top:var(--s-4);font-size:.875rem}
@media (max-width:1100px){.scns-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.scns,.scns-4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) var(--s-5);gap:var(--s-4)}.scn{flex:0 0 min(82%,340px);scroll-snap-align:start}}
/* quantity-break ladder on product cards */
.ladder{border-top:var(--hair);padding-top:var(--s-3);margin-top:auto;min-width:0}
.ladder table{width:100%;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.ladder caption{text-align:start;margin-bottom:6px}
.ladder th,.ladder td{padding:6px 4px;text-align:end;white-space:nowrap}
.ladder th[scope=row]{text-align:start;font-weight:500;color:var(--graphite);padding-inline-start:0;font-size:.8125rem}
.ladder thead th[scope=col]{font:500 var(--t-label) var(--f-mono);color:var(--graphite)}
.ladder thead tr{border-bottom:1px dashed var(--chalk)}
.ladder tbody td{font-weight:600}
.ladder tbody td:first-of-type{font-size:1.125rem;font-weight:700}
.ladder p{font-size:.8125rem;margin-top:6px}
@media (max-width:560px){.ladder th[scope=row]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ladder th,.ladder td{padding-inline:2px}}
/* order sheet: effort, quick quantity, no-gate catalogue, delivery window, share */
.effort{color:var(--ink);margin-bottom:calc(var(--s-6) * -1)}
.effort::before{content:"";display:inline-block;width:16px;border-top:1.5px solid var(--selvedge);vertical-align:middle;margin-inline-end:8px}
.qchips{margin-top:var(--s-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.qrow{display:flex;flex-wrap:wrap}
.qchip{min-height:44px;min-width:58px;padding:0 14px;border:1px solid var(--ink);margin-inline-end:-1px;background:transparent;color:var(--ink);font:600 .9375rem var(--f-sans);cursor:pointer;font-variant-numeric:tabular-nums}
.qchip:hover{background:var(--chalk-2)}
.qchip[aria-pressed="true"]{background:var(--ink);color:var(--cotton)}
.qchip:focus-visible{outline:2px solid var(--selvedge);outline-offset:2px;position:relative;z-index:1}
@media (pointer:coarse){.qchip{min-height:48px}}
.nogate{font-size:.9375rem;margin-bottom:var(--s-4);padding:var(--s-3) var(--s-4);border-inline-start:2px solid var(--selvedge);background:var(--paper)}
.direct-meta{font-size:.8125rem}
.dd{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px dashed var(--chalk);display:grid;gap:4px}
.dd b{font-size:1.125rem;font-weight:700;unicode-bidi:isolate}
.dd-rule{display:block;height:9px;margin-block:2px}
.receipt .dd small{margin-top:0}
.dd-check{font-size:.875rem;margin-top:6px}
.dd-check:empty{display:none}
.dd-check.is-warn{color:var(--selvedge);font-weight:600}
.dd-check.is-tight{color:var(--ink);font-weight:500}
.dd-check.is-ok{color:var(--graphite)}
.share{margin-top:var(--s-5);padding-top:var(--s-4);border-top:var(--hair)}
.share-row{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:6px}
.share .tlink{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer}
.share-out{width:100%;margin-top:var(--s-3);font:500 .8125rem var(--f-mono);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:6px 0;color:var(--ink)}
.share-msg{font-size:.8125rem;color:var(--graphite);margin-top:6px}
.share-msg:empty{display:none}
/* direct contact */
.contact{background:var(--paper);box-shadow:var(--shadow-sheet);padding:var(--s-6) var(--s-5);align-self:start;min-width:0}
.contact dl{margin:var(--s-4) 0 0;display:grid}
.contact dl > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s-4);padding:10px 0;border-bottom:1px dashed var(--chalk)}
.contact dt{font:500 var(--t-label)/1.7 var(--f-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--graphite)}
.contact dd{margin:0;overflow-wrap:anywhere}
.contact dd .need{margin-top:4px}
@media (max-width:440px){.contact dl > div{grid-template-columns:1fr;gap:2px}}
/* guided finder */
.finder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7) var(--gutter);align-items:start}
.fd-qs{display:grid;gap:var(--s-6);min-width:0}
.fd-q legend{display:flex;align-items:baseline;gap:10px;font-weight:600;font-size:1.0625rem;margin-bottom:var(--s-3)}
.fd-n{font:500 var(--t-label) var(--f-mono);color:var(--selvedge)}
.fd-q label{margin-bottom:-1px}
.fd-teams{display:flex;flex-wrap:wrap;width:100%}
.fd-out{background:var(--paper);box-shadow:var(--shadow-sheet);padding:var(--s-6) var(--s-5);position:sticky;top:92px;display:grid;gap:var(--s-3);min-width:0}
.fd-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fd-lines .num{font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.fd-lines small{color:var(--graphite);font-size:.8125rem}
.fd-fab{font-size:.9375rem}
.fd-fab:empty,.fd-warn:empty{display:none}
.fd-warn{color:var(--selvedge);font-weight:600;font-size:.875rem}
.fd-basis{font-size:.8125rem}
.fd-out .btn{width:100%}
.fd-out .btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:900px){.finder{grid-template-columns:1fr}.fd-out{position:static}}
/* estimate print (Save as PDF): only the receipt, with a dated header */
.print-only{display:none}
@media print{
  .demo-bar,.site-head,.mobile-cta,footer,.ruler,.skip{display:none!important}
  body{background:#fff;color:#000}
  body.print-est main > :not(#order),body.print-est #order .sec-top,body.print-est .sheet-main,body.print-est #lead-done{display:none!important}
  body.print-est .sheet{display:block}
  body.print-est .receipt{position:static;box-shadow:none;background:#fff;padding:0;max-width:640px}
  body.print-est .receipt .btn,body.print-est .receipt .share,body.print-est .receipt .est-email,body.print-est .receipt .direct,body.print-est .receipt .micro,body.print-est .receipt .form-msg,body.print-est .receipt .note,body.print-est .receipt .cur{display:none!important}
  body.print-est .print-only{display:block}
  body.print-est .print-head{display:flex;justify-content:space-between;gap:16px;border-bottom:1.5px solid #000;padding-bottom:8px;margin-bottom:16px}
  body.print-est .print-note{font-size:11px;margin-top:16px}
}
.fd-q legend .fd-n{display:inline;border:0;padding:0;margin:0;background:none;font-weight:500}
@media (max-width:760px){.sec-top .h2{grid-column:1/-1}}
.fd-lines small{display:block}
/* A/B labels: both server-rendered, the head script sets the variant class before first paint */
.ab-b{display:none}
.ab-hero_quote-B [data-ab="hero_quote"] .ab-a,.ab-sector_quote-B [data-ab="sector_quote"] .ab-a{display:none}
.ab-hero_quote-B [data-ab="hero_quote"] .ab-b,.ab-sector_quote-B [data-ab="sector_quote"] .ab-b{display:inline}
.tlink.is-off{text-decoration-color:var(--chalk);cursor:default;color:var(--graphite)}

/* =====================================================================
   PERSONA PASS · first-screen facts, paths for talkers / first-timers /
   existing clients, ordering strip, planner, reorder, honest sample kit
   ===================================================================== */
.hero-low{display:flex;flex-wrap:wrap;gap:6px var(--s-5);margin:var(--s-4) 0 0;font-size:.9375rem}
.hero-low .tlink{font-weight:500;text-decoration-thickness:1px;text-decoration-color:var(--graphite)}
.hero-low .tlink:hover{text-decoration-color:var(--selvedge)}
.cta-proof.kf{max-width:62ch;line-height:1.7}
.opt{font-weight:400;color:var(--graphite);font-size:.875em}
.last-order{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);padding:var(--s-4);margin-bottom:var(--s-5);background:var(--paper);border-inline-start:2px solid var(--ink)}
.ro-note,.kit-note{padding:var(--s-4);margin-bottom:var(--s-5);background:var(--paper);border-inline-start:2px solid var(--selvedge);font-size:.9375rem;display:grid;gap:var(--s-3)}
.ro-note p{margin:0}
.ro-note .f{max-width:420px}
/* ordering strip */
.os-steps{list-style:none;margin:0 0 var(--s-7);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:var(--rule)}
.os-steps li{padding:var(--s-4) var(--s-4) var(--s-4) 0;display:grid;gap:4px;border-inline-end:var(--hair);padding-inline-start:var(--s-4)}
.os-steps li:first-child{padding-inline-start:0}
.os-steps li:last-child{border-inline-end:0}
.os-n{font:500 var(--t-label) var(--f-mono);color:var(--selvedge)}
.os-steps b{font-size:1.0625rem}
.os-w{color:var(--graphite);font-size:.9375rem}
.os-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.os-box{background:var(--paper);box-shadow:var(--shadow-sheet);padding:var(--s-5);display:grid;gap:var(--s-3);align-content:start;min-width:0}
.os-box p{margin:0;font-size:.9375rem}
.os-sub{margin-top:var(--s-3)}
.os-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9375rem}
.os-list li{position:relative;padding-inline-start:22px}
.os-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:12px;height:7px;border-inline-start:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.os-x li::before{width:12px;height:0;border:0;border-top:1.5px solid var(--selvedge);transform:none;top:.75em}
.planner input{font:inherit;font-variant-numeric:tabular-nums;background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:8px 0;color:var(--ink);min-height:44px}
.plan-out{font-weight:600}
.plan-out:empty{display:none}
.plan-out.is-ok{color:var(--ink)}
.plan-out.is-warn{color:var(--selvedge)}
.plan-p{font-size:.8125rem!important}
.os-more{margin-top:var(--s-5)}
@media (max-width:1000px){.os-grid{grid-template-columns:1fr 1fr}.planner{grid-column:1/-1}}
@media (max-width:760px){.os-steps{grid-template-columns:1fr}.os-steps li{border-inline-end:0;border-bottom:var(--hair);padding-inline:0;grid-template-columns:40px 1fr;column-gap:var(--s-3)}.os-steps li .os-w{grid-column:2}.os-grid{grid-template-columns:1fr}}
/* thank-you */
.ty-box{background:var(--paper);box-shadow:var(--shadow-sheet);padding:var(--s-5);display:grid;gap:var(--s-3);align-content:start}
.ty-box p{margin:0}
.hero-actions > .cta-proof{max-width:560px}
/* returning buyer (set before first paint from this device's last order) */
.return-bar{display:none;background:var(--paper);border-bottom:var(--hair);font-size:.9375rem}
.returning .return-bar{display:block}
.return-bar .wrap{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding-block:8px}
.last-note{font-size:.8125rem;flex-basis:100%}
/* mobile: product cards become a swipe row so the finder and ordering answers sit closer to the top */
@media (max-width:760px){.products{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) var(--s-5);gap:var(--s-4)}.product{flex:0 0 min(86%,360px);scroll-snap-align:start}}
.sec-top .h2{grid-column:1/span 9}
.product,.scn{position:relative}

/* ===== crawler / agent pass: progressive enhancement and the fact block ===== */
.no-js .menu-toggle{display:none}
@media (min-width:1101px){.mobile-menu{display:none!important}}
.no-js .step-nav,.no-js #lead-submit,.no-js .add-line,.no-js .qchips,.no-js .share,.no-js .est-email,.no-js #step-back{display:none}
.noscript{margin-top:var(--s-4);font-size:.9375rem;padding:var(--s-3) var(--s-4);border-inline-start:2px solid var(--selvedge);background:var(--cotton)}
.progress li[aria-current="step"]{font-weight:600}
.facts .fact-answer{margin-top:var(--s-4);font-size:1.125rem;max-width:52ch}
.fact-list{margin:0;display:grid;border-top:var(--rule)}
.fact-list > div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:var(--s-4);padding:10px 0;border-bottom:1px dashed var(--chalk)}
.fact-list dt{font:500 var(--t-label)/1.7 var(--f-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--graphite)}
.fact-list dd{margin:0}
@media (max-width:560px){.fact-list > div{grid-template-columns:1fr;gap:2px}}
/* JS present (set in <head> before paint): keep closed/later parts closed from the first frame */
.js .mobile-menu:not(.is-open){display:none}
.js #lead-form:not(.ready) .fstep:not([data-step="1"]){display:none}
/* keyword line inside the home H1 (replaces the old kicker; same visual weight as a label) */
.h1-kw{display:block;margin-bottom:var(--s-5);font-size:var(--t-label);line-height:1.4;letter-spacing:var(--track-label)}
.fact-more{margin-top:var(--s-4)}
.f-help{display:inline-block;margin-top:6px;font-size:.875rem;color:var(--graphite);text-decoration:underline;text-decoration-color:var(--chalk);text-underline-offset:.3em}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--gutter);border-top:var(--rule);padding-top:var(--s-6)}
.qa h2{margin-bottom:var(--s-3)}
.qa p{max-width:60ch}
@media (max-width:760px){.qa-grid{grid-template-columns:1fr}}
/* second row of proof numbers (capacity, founding year): large, but sized to fit two per row */
.numeral-sm b{font-size:clamp(3.25rem,8.4vw,7.75rem)!important;line-height:1}
.numerals .numeral-sm{margin-top:var(--s-6)}

.fd-warn.nudge{animation:fdnudge .5s ease 1;color:var(--selvedge,#A8321F)}@keyframes fdnudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.nomotion .fd-warn.nudge{animation:none}
#main:focus{outline:none}