/* Uniform MG — atelier stylesheet */
:root{
  --paper:#F2EDE3;--paper-2:#E8E0CF;--card:#FBF9F4;--kraft:#D9C3A0;
  --ink:#15171C;--ink-2:#3A3D46;--muted:#6E6B63;
  --cobalt:#2340B5;--cobalt-deep:#14246B;--chalk:#C8452F;--tape:#E8C23A;--wa:#1FA855;
  --line:rgba(21,23,28,.14);
  --f-display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --f-hand:"Aref Ruqaa","Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1240px;--gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--f-body);font-size:1.0625rem;line-height:1.95;color:var(--ink);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(0deg,rgba(21,23,28,.022) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(21,23,28,.018) 0 1px,transparent 1px 3px);
  overflow-x:clip}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.25;margin:0 0 .5em;letter-spacing:0}
p{margin:0 0 1.1em}
ul{padding-inline-start:1.2em}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:#fff;padding:.5em 1em;z-index:100}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}
.hand{font-family:var(--f-hand);color:var(--chalk)}
.stitch{height:2px;background-image:linear-gradient(90deg,currentColor 55%,transparent 0);background-size:11px 2px;opacity:.5}

/* ── selvedge ticker ── */
.selvedge{background:var(--ink);color:#EDE6D6;font-size:.82rem;overflow:hidden;white-space:nowrap;position:relative}
.selvedge__track{display:inline-flex;gap:2.4rem;padding:.55rem 0;animation:slide 48s linear infinite}
.selvedge__track span{display:inline-flex;align-items:center;gap:.8rem}
.selvedge__track span::after{content:"";width:6px;height:6px;border:1.5px solid var(--tape);transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(50%)}}
@keyframes slideL{to{transform:translateX(-50%)}}

/* ── header ── */
.site-head{position:sticky;top:0;z-index:40;background:rgba(242,237,227,.94);backdrop-filter:saturate(1.2) blur(6px)}
.site-head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background-image:linear-gradient(90deg,var(--ink) 55%,transparent 0);background-size:11px 2px;opacity:.35}
.site-head__in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand__mark{width:44px;height:44px}
.brand__name{font-family:var(--f-display);font-size:1.35rem;font-weight:700;line-height:1}
.brand__name b{color:var(--cobalt);font-family:var(--f-mono);font-size:1.05rem;margin-inline-start:.2em}
.brand__sub{display:block;font-size:.72rem;color:var(--muted);margin-top:.3rem;font-weight:500}
.nav{margin-inline-start:auto}
.nav ul{list-style:none;display:flex;gap:.2rem;margin:0;padding:0}
.nav a{display:block;padding:.45rem .75rem;text-decoration:none;font-weight:500;font-size:.95rem;border-radius:3px;position:relative}
.nav a:hover,.nav a[aria-current=page]{color:var(--cobalt)}
.nav a[aria-current=page]::after{content:"";position:absolute;inset-inline:.75rem;bottom:.15rem;height:2px;background-image:linear-gradient(90deg,var(--chalk) 60%,transparent 0);background-size:7px 2px}
.head-cta{display:flex;gap:.5rem}
.menu-btn{display:none;background:none;border:1.5px solid var(--ink);width:46px;height:42px;border-radius:3px;cursor:pointer;margin-inline-start:auto;padding:0}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;transition:transform .3s var(--ease),opacity .2s}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── buttons ── */
.btn{--bg:var(--ink);--fg:#fff;display:inline-flex;align-items:center;gap:.65em;padding:.95em 1.55em;background:var(--bg);color:var(--fg);
  font:600 1rem/1.2 var(--f-body);text-decoration:none;border:1.5px solid var(--ink);border-radius:2px;position:relative;
  outline:1.3px dashed rgba(255,255,255,.45);outline-offset:-6px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translate(2px,-3px);box-shadow:-5px 6px 0 var(--ink)}
.btn svg{width:1.25em;height:1.25em;flex-shrink:0}
.btn--wa{--bg:var(--wa);border-color:#14753B}
.btn--wa:hover{box-shadow:-5px 6px 0 #14753B}
.btn--ig{--bg:transparent;--fg:var(--ink);outline-color:rgba(21,23,28,.35)}
.btn--ig:hover{--bg:var(--card)}
.btn--sm{padding:.6em 1em;font-size:.9rem;outline-offset:-4px}
.btn--light{--bg:#fff;--fg:var(--ink);border-color:#fff;outline-color:rgba(21,23,28,.3)}

/* ── hero ── */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);position:relative}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:1.4rem}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--chalk)}
.hero h1{font-size:clamp(2.9rem,7.6vw,6.4rem);line-height:1.08;margin-bottom:.35em}
.hero h1 .l2{display:inline-block;position:relative;color:var(--cobalt)}
.hero h1 .circle{position:absolute;left:-9%;top:-16%;width:118%;height:140%;pointer-events:none;overflow:visible}
.hero h1 .circle path{fill:none;stroke:var(--chalk);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.6s .5s var(--ease) forwards}
.hero h1 small{display:block;font-size:.29em;line-height:1.55;color:var(--ink-2);font-family:var(--f-body);font-weight:500;margin-top:.7em;max-width:24ch}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__lead{font-size:1.14rem;max-width:52ch;color:var(--ink-2)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0 2.2rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);padding-top:1.2rem;margin:0;list-style:none;padding-inline:0}
.hero__facts li{padding-inline-end:1.4rem;margin-inline-end:1.4rem;border-inline-end:1px solid var(--line);font-size:.9rem;color:var(--ink-2);line-height:1.5}
.hero__facts li:last-child{border:0}
.hero__facts strong{display:block;font-family:var(--f-display);font-size:1.25rem;color:var(--ink)}

/* pattern paper */
.pattern{position:relative;background-color:#FCFBF7;
  background-image:linear-gradient(rgba(35,64,181,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(35,64,181,.13) 1px,transparent 1px),linear-gradient(rgba(35,64,181,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(35,64,181,.055) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 22px 40px -22px rgba(21,23,28,.35);border:1px solid rgba(21,23,28,.08)}
.pattern::before,.pattern::after{content:"";position:absolute;top:14px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F06A55,#A8301E 70%);box-shadow:2px 3px 3px rgba(0,0,0,.25);z-index:2}
.pattern::before{inset-inline-start:14px}.pattern::after{inset-inline-end:14px}
.hero__sheet{transform:rotate(-2.2deg);padding:1.2rem;max-width:520px;margin-inline:auto;width:100%}
.hero__sheet .sheet-head{display:flex;justify-content:space-between;padding:.3rem 1.6rem 0;color:var(--cobalt-deep)}
.hero__tag{position:absolute;inset-inline-start:-34px;bottom:58px;background:var(--kraft);padding:1rem .9rem .8rem;width:118px;text-align:center;transform:rotate(9deg);
  clip-path:polygon(22% 0,78% 0,100% 14%,100% 100%,0 100%,0 14%);font-size:.8rem;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);z-index:3}
.hero__tag::before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:var(--paper);margin:0 auto .5rem;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.hero__tag b{display:block;font-family:var(--f-display);font-size:1.05rem}
.hero__tag .mono{display:block;font-size:.72rem;margin-top:.25rem}

/* ── measuring tape ── */
.tape{direction:ltr;position:relative;z-index:2;height:58px;background:var(--tape);transform:rotate(-1.6deg);margin:0 -40px;overflow:hidden;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.45);border-block:1px solid rgba(0,0,0,.15)}
.tape__track{display:flex;width:max-content;height:100%;animation:slideL 60s linear infinite;
  background-image:linear-gradient(90deg,var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:8px 12px,40px 22px;background-repeat:repeat-x;background-position:0 0,0 0}
.tape__track span{width:200px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 .55rem 6px;font:600 1rem/1 var(--f-mono);direction:ltr;color:var(--ink)}
.tape__track span b{font-weight:600}
.tape__track span.hl b{color:var(--chalk);border:2px solid var(--chalk);border-radius:50%;padding:.42em .32em;margin:-.42em -.32em}

/* ── sections ── */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.6rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head .num{grid-row:span 2;font-family:var(--f-mono);font-size:clamp(3rem,7vw,5.5rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--ink);direction:ltr}
.sec-head h2{font-size:clamp(1.9rem,4vw,3rem);margin:0}
.sec-head p{margin:0;color:var(--ink-2);max-width:62ch}
.kicker{font-family:var(--f-hand);color:var(--chalk);font-size:1.35rem;line-height:1;display:block;margin-bottom:.4rem}

/* ── hang tags (catalog) ── */
.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 1.8rem;padding-top:1.6rem}
.tag{position:relative;filter:drop-shadow(0 14px 16px rgba(21,23,28,.16));transform:rotate(var(--r,-1deg));transition:transform .45s var(--ease)}
.tag:nth-child(3n+2){--r:1.2deg}.tag:nth-child(3n){--r:-.4deg}
.tag:hover{transform:rotate(0) translateY(-6px)}
.tag::before{content:"";position:absolute;top:-34px;left:50%;width:1.5px;height:58px;background:#8A7A63;transform:rotate(14deg);transform-origin:bottom;z-index:2}
.tag__body{background:var(--card);clip-path:polygon(20% 0,80% 0,100% 8%,100% 100%,0 100%,0 8%);padding:2.4rem 1.4rem 1.4rem;height:100%;display:flex;flex-direction:column}
.tag:nth-child(even) .tag__body{background:var(--kraft)}
.tag__body::before{content:"";position:absolute;top:14px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px rgba(0,0,0,.22)}
.tag__ref{display:flex;justify-content:space-between;color:var(--muted);border-bottom:1px dashed rgba(0,0,0,.25);padding-bottom:.5rem;margin-bottom:.6rem}
.tag figure{margin:0 auto .4rem;width:min(190px,80%);aspect-ratio:240/280}
.tag h3{font-size:1.35rem;margin:.2rem 0 .3rem}
.tag h3 a{text-decoration:none}
.tag h3 a::after{content:"";position:absolute;inset:0}
.tag p{font-size:.93rem;line-height:1.75;color:var(--ink-2);margin-bottom:1rem}
.tag__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;margin-bottom:1rem}
.chip{font-size:.78rem;font-weight:600;padding:.2rem .6rem;border:1.2px solid currentColor;border-radius:99px;line-height:1.6}
.tag__wa{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-weight:600;font-size:.92rem;border-top:1.5px solid var(--ink);padding-top:.75rem}
.tag__wa:hover{color:var(--wa)}
.tag__wa svg{width:20px;height:20px}

/* ── care label ── */
.care{background:#fff;position:relative;padding:clamp(1.6rem,4vw,3rem);border-radius:3px;box-shadow:0 18px 40px -26px rgba(21,23,28,.5);
  outline:1.5px dashed rgba(21,23,28,.28);outline-offset:-12px}
.care::after{content:"";position:absolute;inset-inline-end:-1px;top:0;width:46px;height:46px;background:linear-gradient(225deg,var(--paper) 50%,#E1DACB 50%);}
[dir=rtl] .care::after{background:linear-gradient(135deg,var(--paper) 50%,#E1DACB 50%)}
.care__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-bottom:1.5px solid var(--ink);padding-bottom:1rem;margin-bottom:1.8rem}
.care__top h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}
.care__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.4rem;list-style:none;margin:0;padding:0}
.care__grid li{display:grid;grid-template-columns:58px 1fr;gap:1rem;align-items:start}
.care__grid svg{width:58px;height:58px}
.care__grid h3{font-size:1.12rem;margin:0 0 .25rem;font-family:var(--f-body);font-weight:700}
.care__grid p{font-size:.93rem;line-height:1.75;margin:0;color:var(--ink-2)}

/* ── swatches ── */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem 1rem;list-style:none;margin:0;padding:0}
.swatch{text-align:center;font-size:.88rem;font-weight:600}
.swatch i{display:block;aspect-ratio:1;background:var(--c);clip-path:polygon(0% 0%,3.57% 3.2%,7.14% 0%,10.71% 3.2%,14.29% 0%,17.86% 3.2%,21.43% 0%,25% 3.2%,28.57% 0%,32.14% 3.2%,35.71% 0%,39.29% 3.2%,42.86% 0%,46.43% 3.2%,50% 0%,53.57% 3.2%,57.14% 0%,60.71% 3.2%,64.29% 0%,67.86% 3.2%,71.43% 0%,75% 3.2%,78.57% 0%,82.14% 3.2%,85.71% 0%,89.29% 3.2%,92.86% 0%,96.43% 3.2%,100% 0%,96.8% 3.57%,100% 7.14%,96.8% 10.71%,100% 14.29%,96.8% 17.86%,100% 21.43%,96.8% 25%,100% 28.57%,96.8% 32.14%,100% 35.71%,96.8% 39.29%,100% 42.86%,96.8% 46.43%,100% 50%,96.8% 53.57%,100% 57.14%,96.8% 60.71%,100% 64.29%,96.8% 67.86%,100% 71.43%,96.8% 75%,100% 78.57%,96.8% 82.14%,100% 85.71%,96.8% 89.29%,100% 92.86%,96.8% 96.43%,100% 100%,96.43% 96.8%,92.86% 100%,89.29% 96.8%,85.71% 100%,82.14% 96.8%,78.57% 100%,75% 96.8%,71.43% 100%,67.86% 96.8%,64.29% 100%,60.71% 96.8%,57.14% 100%,53.57% 96.8%,50% 100%,46.43% 96.8%,42.86% 100%,39.29% 96.8%,35.71% 100%,32.14% 96.8%,28.57% 100%,25% 96.8%,21.43% 100%,17.86% 96.8%,14.29% 100%,10.71% 96.8%,7.14% 100%,3.57% 96.8%,0% 100%,3.2% 96.43%,0% 92.86%,3.2% 89.29%,0% 85.71%,3.2% 82.14%,0% 78.57%,3.2% 75%,0% 71.43%,3.2% 67.86%,0% 64.29%,3.2% 60.71%,0% 57.14%,3.2% 53.57%,0% 50%,3.2% 46.43%,0% 42.86%,3.2% 39.29%,0% 35.71%,3.2% 32.14%,0% 28.57%,3.2% 25%,0% 21.43%,3.2% 17.86%,0% 14.29%,3.2% 10.71%,0% 7.14%,3.2% 3.57%);margin-bottom:.5rem;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 2px,transparent 2px 5px);transition:transform .35s var(--ease)}
.swatch:nth-child(odd) i{transform:rotate(-3deg)}.swatch:nth-child(even) i{transform:rotate(2.5deg)}
.swatch:hover i{transform:rotate(0) scale(1.05)}

/* ── split / editorial ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.big-quote{font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.45;margin:0}
.big-quote mark{background:linear-gradient(transparent 62%,rgba(232,194,58,.75) 0);color:inherit;padding:0 .1em}

/* ── waybill (delivery) ── */
.waybill{background:var(--card);border:1.5px solid var(--ink);position:relative}
.waybill__head{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-bottom:1.5px solid var(--ink)}
.waybill__head h3{margin:0;font-size:1.3rem}
.barcode{height:40px;width:180px;direction:ltr}
.waybill__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.waybill__cell{padding:1.2rem 1.4rem;border-inline-start:1px dashed rgba(21,23,28,.35);border-bottom:1px dashed rgba(21,23,28,.35)}
.waybill__cell:nth-child(3n+1){border-inline-start:0}
.waybill__cell h4{font-size:1.1rem;margin:0 0 .35rem;display:flex;gap:.5rem;align-items:baseline}
.waybill__cell h4 .mono{color:var(--muted);font-size:.7rem}
.waybill__cell p{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-2)}
.waybill__foot{padding:1rem 1.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.stamp{font-family:var(--f-display);color:var(--chalk);border:2.5px solid var(--chalk);padding:.3rem .9rem;transform:rotate(-6deg);display:inline-block;font-size:1.05rem;opacity:.85;border-radius:4px;box-shadow:inset 0 0 0 2px var(--card),inset 0 0 0 3.5px var(--chalk)}

/* ── instagram band ── */
.ig-band{background:var(--ink);color:#EFE9DC;position:relative;overflow:hidden}
.ig-band::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.ig-band .handle{display:block;font-family:var(--f-mono);font-weight:600;font-size:clamp(2.6rem,10vw,8.5rem);line-height:1;direction:ltr;text-align:center;color:transparent;-webkit-text-stroke:1.5px #EFE9DC;text-decoration:none;margin:1.4rem 0 2.6rem;transition:color .4s;word-break:break-all}
.ig-band .handle:hover{color:#EFE9DC}
.highlights{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;list-style:none;margin:0 0 2.6rem;padding:0}
.highlights a{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;font-size:.9rem;font-weight:500;width:96px;text-align:center;line-height:1.4}
.highlights .ring{width:86px;height:86px;border-radius:50%;padding:5px;border:2px dashed rgba(239,233,220,.55);transition:border-color .3s,transform .3s var(--ease)}
.highlights .ring span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#F2EDE3;overflow:hidden}
.highlights .ring img{width:62%;height:auto}
.highlights a:hover .ring{border-color:var(--tape);transform:rotate(-8deg)}
.ig-band .center{text-align:center}

/* ── FAQ ── */
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.2rem 0;font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mono{color:var(--muted)}
.faq summary::after{content:"";width:22px;height:22px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 2.6rem 1.4rem 0;color:var(--ink-2);max-width:75ch}
[dir=rtl] .faq .ans{padding:0 2.6rem 1.4rem 0}

/* ── cta band ── */
.cta-band{background:var(--cobalt);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:14px;border:1.5px dashed rgba(255,255,255,.35);pointer-events:none}
.cta-band__in{display:grid;grid-template-columns:1.3fr auto;gap:2rem;align-items:center;padding:clamp(2.5rem,6vw,4rem) 0}
.cta-band h2{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 .4rem}
.cta-band p{margin:0;opacity:.88;max-width:56ch}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.cta-band .btn--ig{--fg:#fff;border-color:#fff;outline-color:rgba(255,255,255,.4)}
.cta-band .btn--ig:hover{--bg:var(--cobalt-deep);box-shadow:-5px 6px 0 var(--cobalt-deep)}

/* ── page hero (inner) ── */
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.6rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-inline-end:.4rem;opacity:.6}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--cobalt)}
.phero{padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,5vw,4rem)}
.phero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.phero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.15}
.phero h1 em{font-style:normal;color:var(--cobalt)}
.phero .lead{font-size:1.12rem;color:var(--ink-2);max-width:60ch}
.phero__art{padding:1.6rem 1.6rem 1rem;transform:rotate(2deg);max-width:340px;width:100%;margin-inline:auto}
.phero__art figcaption{text-align:center;color:var(--cobalt-deep);margin-top:.3rem}

/* ── product rows (inner) ── */
.products{display:grid;gap:1.6rem}
.product{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.2rem,3vw,2.4rem);background:var(--card);padding:clamp(1.2rem,3vw,1.8rem);border:1px solid rgba(21,23,28,.1);position:relative}
.product::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(21,23,28,.18);pointer-events:none}
.product figure{margin:0;background:#fff;padding:.8rem;align-self:start;border:1px solid rgba(21,23,28,.08)}
.product h3{font-size:1.5rem;margin-bottom:.3rem}
.product .mono{color:var(--muted)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.2rem;margin:.9rem 0 1.2rem;font-size:.94rem}
.spec dt{font-weight:700}.spec dd{margin:0;color:var(--ink-2)}
.product .btn{position:relative;z-index:1}

/* ── prose ── */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.55rem,3vw,2.1rem);margin-top:2.4rem;padding-top:1.4rem;position:relative}
.prose h2::before{content:"";position:absolute;top:0;inset-inline-start:0;width:64px;height:2px;background-image:linear-gradient(90deg,var(--chalk) 60%,transparent 0);background-size:8px 2px}
.prose h3{font-size:1.25rem;margin-top:1.6rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--cobalt);text-underline-offset:4px}
.layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.aside{position:sticky;top:100px;display:grid;gap:1.4rem}
.note{background:#FFF8D9;padding:1.4rem 1.3rem 1.2rem;transform:rotate(1.2deg);box-shadow:0 12px 20px -14px rgba(0,0,0,.45);position:relative}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(232,194,58,.55);transform:rotate(-3deg)}
.note .hand{font-size:1.5rem;display:block;margin-bottom:.4rem}
.note p{font-size:.93rem;line-height:1.75;margin-bottom:.9rem}
.side-links{background:var(--card);border:1px solid var(--line);padding:1.2rem 1.3rem}
.side-links h4{font-size:1rem;margin-bottom:.6rem}
.side-links ul{list-style:none;margin:0;padding:0}
.side-links li{border-top:1px dashed var(--line)}
.side-links a{display:flex;justify-content:space-between;padding:.5rem 0;text-decoration:none;font-size:.94rem}
.side-links a:hover{color:var(--cobalt)}

/* size chart */
.chart{width:100%;border-collapse:collapse;background:var(--card);font-size:.98rem;margin:1.4rem 0}
.chart th,.chart td{padding:.85rem 1rem;text-align:center;border-bottom:1px dashed rgba(21,23,28,.25)}
.chart thead th{background:var(--ink);color:#fff;font-weight:600}
.chart tbody th{font-family:var(--f-mono);font-size:1.15rem;color:var(--cobalt)}
.chart tbody tr:hover{background:#FFF8D9}
.table-wrap{overflow-x:auto}

/* areas list */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem;margin-top:1.6rem}
.area{background:var(--card);border:1px solid var(--line);padding:1.3rem 1.4rem;position:relative}
.area h3{font-size:1.2rem;margin-bottom:.6rem;display:flex;justify-content:space-between;align-items:baseline}
.area ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.area li{font-size:.84rem;background:var(--paper);padding:.15rem .6rem;border-radius:2px}

/* search terms */
.terms{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.terms a{display:inline-block;font-size:.86rem;padding:.3rem .8rem;border:1px solid rgba(239,233,220,.3);border-radius:2px;text-decoration:none;transition:background .2s,color .2s}
.terms a:hover{background:#EFE9DC;color:var(--ink)}

/* related */
.related{display:flex;flex-wrap:wrap;gap:.7rem;list-style:none;margin:0;padding:0}
.related a{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem .55rem 1.2rem;background:var(--card);border:1.5px solid var(--ink);text-decoration:none;font-weight:600;transition:transform .2s var(--ease),box-shadow .2s}
.related a img{width:30px;height:auto}
.related a:hover{transform:translateY(-3px);box-shadow:-4px 5px 0 var(--ink)}

/* ── footer ── */
.site-foot{background:var(--cobalt-deep);color:#E6E9F5;position:relative;padding-top:4rem;font-size:.95rem}
.site-foot::before{content:"";position:absolute;inset-inline:0;top:12px;height:2px;background-image:linear-gradient(90deg,rgba(255,255,255,.5) 55%,transparent 0);background-size:11px 2px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
.site-foot h2,.site-foot h3{font-size:1.1rem;color:#fff;margin-bottom:.9rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.35rem}
.site-foot a{text-decoration:none;opacity:.88}
.site-foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.site-foot .brand__name{color:#fff}
.site-foot .brand__name b{color:var(--tape)}
.lic{margin-top:1rem;display:grid;gap:.3rem}
.lic span{display:flex;gap:.6rem;align-items:center}
.foot-terms{margin-top:3rem;padding-top:1.6rem;border-top:1px dashed rgba(255,255,255,.25)}
.foot-terms h3{font-size:.95rem;opacity:.8}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1.6rem 0 2rem;margin-top:2rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;opacity:.8}

/* floating + mobile bar */
.float{position:fixed;inset-inline-end:22px;bottom:22px;z-index:50;display:flex;flex-direction:column;gap:.6rem}
.float a{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .25s var(--ease)}
.float a:hover{transform:scale(1.08) rotate(-6deg)}
.float .f-wa{background:var(--wa)}
.float .f-ig{background:var(--ink);width:48px;height:48px;margin-inline-start:5px}
.float svg{width:28px;height:28px}
.float .f-ig svg{width:22px;height:22px}
.mbar{display:none}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ── responsive ── */
@media (max-width:1080px){
  .head-cta .btn--ig{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .care__grid{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}
  .aside{position:static}
}
@media (max-width:900px){
  .tags{grid-template-columns:repeat(2,1fr)}
  .swatches{grid-template-columns:repeat(4,1fr)}
  .menu-btn{display:block}
  .head-cta{display:none}
  .nav{position:fixed;inset:74px 0 auto 0;background:var(--paper);border-bottom:1.5px solid var(--ink);max-height:0;overflow:hidden;transition:max-height .45s var(--ease);margin:0}
  .nav.open{max-height:80vh;overflow:auto}
  .nav ul{flex-direction:column;padding:.6rem var(--gutter) 1.2rem}
  .nav a{padding:.8rem 0;font-size:1.08rem;border-bottom:1px dashed var(--line)}
  .nav a[aria-current=page]::after{display:none}
  .hero__grid,.phero__grid,.split,.cta-band__in{grid-template-columns:1fr}
  .hero__sheet{max-width:440px}
  .hero__tag{inset-inline-start:-6px}
  .waybill__grid{grid-template-columns:1fr 1fr}
  .waybill__cell:nth-child(3n+1){border-inline-start:1px dashed rgba(21,23,28,.35)}
  .waybill__cell:nth-child(odd){border-inline-start:0}
  .float{display:none}
  .mbar{display:grid;grid-template-columns:1.4fr 1fr;position:fixed;inset-inline:0;bottom:0;z-index:50;background:var(--ink);padding:.55rem;gap:.55rem;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border-radius:2px}
  .mbar svg{width:20px;height:20px}
  .mbar .m-wa{background:var(--wa)}
  .mbar .m-ig{border:1.5px solid rgba(255,255,255,.5)}
  body{padding-bottom:68px}
}
@media (max-width:640px){
  .tags{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
  .swatches{grid-template-columns:repeat(3,1fr)}
  body{font-size:1rem}
  .brand__sub{display:none}
  .care__grid{grid-template-columns:1fr}
  .waybill__grid{grid-template-columns:1fr}
  .waybill__cell{border-inline-start:0!important}
  .foot-grid{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .product figure{max-width:200px}
  .sec-head{grid-template-columns:1fr}
  .sec-head .num{grid-row:auto;font-size:2.6rem}
  .hero__facts li{border:0;margin:0 0 .6rem;padding:0;width:50%}
  .hero__tag{width:96px;bottom:24px;font-size:.72rem}
  .faq .ans,[dir=rtl] .faq .ans{padding-inline:0}
  .tape{height:50px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}
@media print{.site-head,.float,.mbar,.selvedge,.tape{display:none}}