:root{
  --nuit:#140A04; --nuit2:#1E1008; --or:#E8A04A; --terre:#B85C2A;
  --sable:#F5EDE4; --cream:#FDF6E3; --ivoire:#E8D5B0;
  --ink-soft:rgba(253,246,227,.62); --ink-faint:rgba(253,246,227,.38);
  --brown:#6B5540; --brown-lt:#8A7460; --line:#EDE2D2;
  --serif:'Fraunces',Georgia,serif; --sans:'General Sans','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--nuit);background:var(--cream);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--terre)}
.btn{display:inline-block;background:var(--or);color:var(--nuit);font-weight:500;font-size:15px;padding:14px 30px;border-radius:99px;border:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#DE9438;transform:translateY(-1px)}
.btn-dark{background:var(--nuit);color:var(--cream)}
.btn-dark:hover{background:#2A1809}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(253,246,227,.3)}
.btn-ghost:hover{border-color:rgba(253,246,227,.6);background:transparent}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(253,246,227,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:baseline}
.logo .i-dot{position:relative}
.logo .i-dot svg{position:absolute;top:-8px;left:50%;width:13px;height:10px;transform:translateX(-50%) rotate(-15deg);transform-origin:center}
.logo .logo-txt{display:flex;align-items:baseline}
.logo .logo-img{height:40px;width:auto;display:block}
footer .logo .logo-img{height:46px}
.logo .logo-txt[hidden],.logo .logo-img[hidden]{display:none}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--brown)}
.nav-links a:hover{color:var(--nuit)}
.nav-cta{background:var(--nuit);color:var(--cream);font-size:13.5px;font-weight:500;padding:10px 20px;border-radius:99px}
@media(max-width:760px){.nav-links a.hideable{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--nuit);color:var(--cream);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:72px 24px 80px;max-width:1120px;margin:0 auto}
.badge{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--or);border:1px solid rgba(232,160,74,.45);border-radius:99px;padding:6px 16px;margin-bottom:26px}
.hero h1{font-family:var(--serif);font-size:clamp(38px,5.2vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--or)}
.hero p{font-size:17px;color:var(--ink-soft);margin:22px 0 32px;max-width:440px;line-height:1.7}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-proof{display:flex;gap:22px;margin-top:34px;font-size:12.5px;color:var(--ink-faint);flex-wrap:wrap}
.hero-proof span{display:flex;align-items:center;gap:7px}
.hero-photo{position:relative}
.hero-photo img{width:100%;border-radius:14px;aspect-ratio:4/5.4;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1.5px solid var(--or);border-radius:14px;z-index:-1;opacity:.55}
.hero-cap{position:absolute;left:16px;bottom:16px;background:rgba(20,10,4,.78);backdrop-filter:blur(4px);border-radius:10px;padding:10px 16px;font-size:12.5px;color:var(--cream)}
.hero-cap b{display:block;font-weight:500}
.hero-cap span{color:var(--ink-faint);font-size:11.5px}
@media(max-width:860px){.hero-in{grid-template-columns:1fr;gap:40px;padding-top:52px;padding-bottom:56px}.hero-photo{max-width:420px}}

/* ---------- marquee ---------- */
.marquee{background:var(--or);overflow:hidden;padding:13px 0;white-space:nowrap}
.marquee-track{display:inline-block;animation:marquee 78s linear infinite;font-size:12.5px;font-weight:500;letter-spacing:.32em;color:var(--nuit)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- sections ---------- */
section{padding:84px 0}
.sec-head{max-width:560px;margin-bottom:44px}
.sec-head h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:500;letter-spacing:-.02em;margin-top:12px}
.sec-head p{color:var(--brown-lt);margin-top:12px;font-size:15.5px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 18px}
.step .n{font-family:var(--serif);font-size:22px;color:var(--or);font-weight:500;display:flex;align-items:center;gap:10px}
.step .n svg{width:26px;height:26px;stroke:var(--terre);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:15px;font-weight:500;margin:10px 0 6px}
.step p{font-size:13px;color:var(--brown-lt);line-height:1.6}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}.step:last-child{grid-column:span 2}}

/* fabrics */
.sable-bg{background:var(--sable)}
.fab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fab-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s ease}
.fab-card:hover{transform:translateY(-3px)}
.fab-sw{height:130px}
.fab-info{padding:13px 16px;display:flex;justify-content:space-between;align-items:baseline}
.fab-info b{font-size:14.5px;font-weight:500;display:block}
.fab-info small{font-size:12px;color:var(--brown-lt)}
.fab-price{font-size:13.5px;white-space:nowrap}
.fab-price span{color:var(--brown-lt);font-size:12px}
@media(max-width:760px){.fab-grid{grid-template-columns:repeat(2,1fr)}}

/* fabric slider (Oct 11) */
.fab-slider{position:relative}
.fs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.fs-count{font-family:var(--serif);font-size:15px;color:var(--brown-lt);margin:0}
.fs-count b{color:var(--nuit);font-weight:500}
.fs-arrows{display:flex;gap:8px}
.fs-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--nuit);font-size:18px;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.fs-arrow:hover:not(:disabled){border-color:var(--terre);color:var(--terre)}
.fs-arrow:disabled{opacity:.35;cursor:default}
.fs-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,27%,320px);column-gap:16px;overflow-x:auto;scroll-snap-type:none;scroll-padding-left:2px;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.fs-rail::-webkit-scrollbar{display:none}
.fs-rail:focus-visible{outline:2px solid var(--terre);outline-offset:4px;border-radius:16px}
.fs-card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.fs-media{position:relative;aspect-ratio:4/5;background:var(--cream);overflow:hidden}
.fs-media img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s ease}
.fs-cloth{object-fit:cover}
.fs-made{object-fit:contain;padding:30px 10px 58px;box-sizing:border-box;opacity:0}
.fs-card.show-made .fs-made{opacity:1}
.fs-card.show-made .fs-cloth{opacity:0}
.fs-toggle{position:absolute;left:12px;bottom:12px;display:flex;background:rgba(253,246,227,.92);border-radius:999px;padding:3px;box-shadow:0 2px 10px rgba(20,10,4,.12)}
.fs-toggle button{font:inherit;font-family:var(--sans);font-size:12px;border:0;background:transparent;color:var(--brown);padding:6px 11px;border-radius:999px;cursor:pointer}
.fs-toggle button.on{background:var(--nuit);color:var(--cream)}
.fs-tag{position:absolute;right:12px;top:12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brown-lt);background:rgba(253,246,227,.9);padding:3px 8px;border-radius:999px;opacity:0;transition:opacity .3s}
.fs-card.show-made .fs-tag{opacity:1}
.fs-card.no-made .fs-toggle{display:none}
.fs-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px;flex:1}
.fs-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fs-info h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;margin:0}
.fs-price{font-size:14px;white-space:nowrap;margin:0}
.fs-price span{color:var(--brown-lt);font-size:12px}
.fs-where{font-size:12.5px;color:var(--brown-lt);margin:0 0 12px}
.fs-cta{margin-top:auto;align-self:flex-start;font:inherit;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--terre);background:none;border:0;padding:4px 0;cursor:pointer;border-bottom:1px solid transparent}
.fs-cta:hover{border-bottom-color:var(--terre)}
.fs-bar{height:2px;background:var(--line);border-radius:2px;margin-top:16px;overflow:hidden}
.fs-bar span{display:block;height:100%;background:var(--terre);border-radius:2px;width:25%;transition:transform .1s linear}
@media(max-width:760px){
  .fs-rail{grid-auto-columns:78%;column-gap:12px}
  .fs-arrows{display:none}
}
@media(prefers-reduced-motion:reduce){.fs-media img,.fs-tag{transition:none}}


/* builder */
.builder{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.b-preview{background:linear-gradient(180deg,#FBF6EC,#F5EDE4);padding:26px 20px 14px;text-align:center;border-bottom:1px solid var(--line)}
.b-preview svg{width:200px;height:210px;filter:drop-shadow(0 8px 14px rgba(20,10,4,.14))}
.b-prev-cap{font-family:var(--serif);font-size:15px;font-weight:500;color:var(--nuit);margin-top:8px}
.b-prev-sub{font-size:11.5px;color:var(--brown-lt);margin-top:2px}
.sil{display:none}
.sil.on{display:block}
.b-sec{padding:24px 26px 4px}
.b-label{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--terre);margin-bottom:12px}
.b-fabrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.b-fab{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .12s}
.b-fab.sel{border:2px solid var(--terre);background:#FBF5F0}
.b-fab .sw{height:52px}
.b-fab .nm{padding:7px 10px;font-size:12px;font-weight:500}
.b-fab .nm small{display:block;font-weight:400;color:var(--brown-lt);font-size:11px}
.b-styles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.b-gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b-gen{border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:500;transition:border-color .12s}
.b-gen.sel{border:2px solid var(--terre);background:#FBF5F0}
.b-gen svg{width:22px;height:22px;stroke:var(--terre);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.g-icon{width:26px;height:26px;flex-shrink:0;stroke:var(--terre);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.b-opt[hidden]{display:none}
.b-opt{border:1.5px solid var(--line);border-radius:10px;padding:12px 15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:border-color .12s}
.b-opt .lft{display:flex;align-items:center;gap:10px}
.b-opt.sel{border:2px solid var(--terre);background:#FBF5F0}
.b-opt b{font-size:13.5px;font-weight:500}
.b-opt small{font-size:11.5px;color:var(--brown-lt);white-space:nowrap}
.b-tiers{display:flex;flex-direction:column;gap:10px}
.b-tier{border:1.5px solid var(--line);border-radius:10px;padding:13px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:border-color .12s}
.b-tier.sel{border:2px solid var(--terre);background:#FBF5F0}
.b-tier b{font-size:14px;font-weight:500;display:block}
.b-tier small{font-size:12px;color:var(--brown-lt)}
.b-tier .fr{font-size:13px;white-space:nowrap}
.b-note{font-size:12px;color:var(--brown-lt);padding:12px 26px 20px;line-height:1.6}
.b-total{background:var(--nuit);color:var(--cream);padding:18px 26px;display:flex;justify-content:space-between;align-items:center}
.b-total .lbl{font-size:11px;color:var(--ink-faint)}
.b-total .amt{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--or);line-height:1.1}
.b-total .money{font-size:11px;color:var(--ink-faint);cursor:pointer;margin-top:2px}
.b-total .money:hover{color:var(--ink-soft)}
.b-breakdown{display:none;background:var(--nuit2);color:var(--ink-soft);font-size:13px;line-height:1.8;padding:16px 26px}
.b-breakdown.open{display:block}
.cowrie-sm{display:inline-block;vertical-align:-1px;margin-right:6px}

/* tailors */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s ease}
.t-card:hover{transform:translateY(-3px)}
.t-card img{width:100%;height:230px;object-fit:cover}
.t-body{padding:16px 18px}
.t-body b{font-size:16px;font-weight:500;font-family:var(--serif)}
.t-body .loc{font-size:13px;color:var(--brown-lt);margin-top:2px}
.t-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.t-badge{font-size:10px;font-weight:500;letter-spacing:.06em;padding:4px 11px;border-radius:99px}
.t-badge.found{background:var(--nuit);color:var(--or)}
.t-badge.tier{background:#FBF5F0;color:var(--terre);border:1px solid #EAD5C5}
@media(max-width:820px){.t-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}}

/* result */
.result{background:var(--nuit);color:var(--cream)}
.result-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.result img{border-radius:14px;width:100%;object-fit:cover}
.result h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.result p{color:var(--ink-soft);margin-top:18px;font-size:16px;max-width:420px}
.slogan{font-size:12px;font-weight:500;letter-spacing:.34em;color:var(--or);margin-top:28px}
@media(max-width:860px){.result-in{grid-template-columns:1fr;gap:36px}}

/* story strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.strip img{border-radius:12px;height:210px;width:100%;object-fit:cover}
@media(max-width:760px){.strip{grid-template-columns:1fr}}

/* faq */
details{border-bottom:1px solid var(--line);padding:20px 4px}
details summary{font-size:16px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::after{content:"+";font-size:20px;color:var(--terre);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--brown-lt);font-size:14.5px;max-width:640px}

/* tailor join */
.join{background:var(--sable);border-top:1px solid var(--line)}
.join-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.join h3{font-family:var(--serif);font-size:24px;font-weight:500}
.join p{color:var(--brown-lt);font-size:14.5px;margin-top:6px;max-width:460px}

/* footer */
footer{background:var(--nuit);color:var(--cream);padding:44px 0}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot-slogan{font-size:10.5px;letter-spacing:.28em;color:var(--or);margin-top:8px}
.foot-meta{font-size:12.5px;color:var(--ink-faint);margin-top:10px}
.foot-links{display:flex;gap:20px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.foot-links a:hover{color:var(--cream)}

/* sticky mobile total */
.sticky-total{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--nuit);color:var(--cream);padding:12px 20px;z-index:60;justify-content:space-between;align-items:center;border-top:1px solid rgba(232,160,74,.3)}
.sticky-total .amt{font-family:var(--serif);font-size:20px;color:var(--or);font-weight:500}
.sticky-total .lbl{font-size:10px;color:var(--ink-faint)}
@media(max-width:640px){.sticky-total.on{display:flex}}


/* ---------- wizard ---------- */
.wiz{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.wiz-bar{height:3px;background:var(--line)}
.wiz-fill{height:3px;width:20%;background:var(--or);transition:width .35s ease}
.wiz-head{display:flex;justify-content:space-between;align-items:baseline;padding:16px 24px 0;font-size:12px;color:var(--brown-lt)}
.wiz-head span:last-child{font-family:var(--serif);font-size:17px;color:var(--nuit);font-weight:500}
.wiz-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;padding:18px 24px 8px}
.wiz-stage{position:sticky;top:86px;align-self:start}
.stage-art{background:linear-gradient(180deg,#FBF6EC,#F5EDE4);border-radius:14px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.stage-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(20,10,4,.13))}
.stage-empty{font-size:12px;color:var(--brown-lt);text-align:center;padding:0 20px}
.stage-fabchip{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 5px;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500}
.chip-sw{width:22px;height:22px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0}
.stage-cap{font-family:var(--serif);font-size:14px;text-align:center;margin-top:10px;color:var(--nuit)}
.wiz-panel{min-height:300px}
.wstep{display:none}.wstep.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gen-card{border:1.5px solid var(--line);border-radius:12px;padding:26px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:15px;font-weight:500;transition:border-color .12s}
.gen-card svg{width:36px;height:36px;stroke:var(--terre);fill:none;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.gen-card.sel{border:2px solid var(--terre);background:#FBF5F0}
.st-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.st-card{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .12s}
.st-card.sel{border:2px solid var(--terre)}
.st-art{aspect-ratio:1/1;background:#F7F0E4;display:flex;align-items:center;justify-content:center}
.st-art img{width:100%;height:100%;object-fit:contain}
.st-soon{display:flex;flex-direction:column;align-items:center;gap:6px;color:#B49B7E}
.st-soon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linejoin:round}
.st-soon span{font-size:9.5px;letter-spacing:.06em}
.st-body{padding:9px 11px}
.st-body b{font-size:12.5px;font-weight:500;display:block;line-height:1.3}
.st-body small{font-size:10.5px;color:var(--brown-lt);display:block;line-height:1.4;margin-top:2px}
.st-yd{font-size:10px;color:var(--terre);font-weight:500;margin-top:4px;display:inline-block}
.fb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.fb-card{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .12s}
.fb-card.sel{border:2px solid var(--terre)}
.fb-sw{height:58px;background-size:cover;background-position:center}
.fb-info{padding:6px 8px}
.fb-info b{font-size:11px;font-weight:500;display:block;line-height:1.25}
.fb-info small{font-size:9.5px;color:var(--brown-lt)}
.em-grid,.tr-grid{display:flex;flex-direction:column;gap:10px}
.em-card,.tr-card{border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color .12s}
.em-card.sel,.tr-card.sel{border:2px solid var(--terre);background:#FBF5F0}
.em-card b,.tr-card b{font-size:14px;font-weight:500;display:block}
.em-card small,.tr-card small{font-size:12px;color:var(--brown-lt)}
.em-price,.tr-fr{font-size:13px;white-space:nowrap;color:var(--terre);font-weight:500}
.wiz-note{font-size:11.5px;color:var(--brown-lt);margin-top:12px;line-height:1.6}
.wiz-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--nuit);padding:14px 24px}
.wiz-back{background:transparent;border:none;color:var(--ink-faint);font-size:13px;cursor:pointer;font-family:var(--sans)}
.wiz-back:hover{color:var(--cream)}
.wiz-total{text-align:center}
.wt-lbl{display:block;font-size:10px;color:var(--ink-faint)}
.wt-amt{display:block;font-family:var(--serif);font-size:26px;font-weight:500;color:var(--or);line-height:1.15}
.wt-money{font-size:10px;color:var(--ink-faint);cursor:pointer}
.wt-money:hover{color:var(--ink-soft)}
.wiz-next{padding:12px 26px;font-size:14px}
.wiz-break{display:none;background:var(--nuit2);color:var(--ink-soft);font-size:12.5px;line-height:1.75;padding:14px 24px}
.wiz-break.open{display:block}
@media(max-width:820px){.wiz-body{grid-template-columns:1fr}.wiz-stage{position:static}.stage-art{aspect-ratio:4/3}.st-grid{grid-template-columns:1fr 1fr}.fb-grid{grid-template-columns:repeat(3,1fr)}}


.st-art{aspect-ratio:1/1;background:#F7F0E4;display:flex;align-items:center;justify-content:center;padding:8px}
.st-sil{width:100%;height:100%;object-fit:contain}
.stage-fill{position:absolute;inset:6%;width:88%;height:88%;filter:drop-shadow(0 10px 14px rgba(20,10,4,.18))}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.th-row{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.th-lbl{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--terre);margin-right:2px}
.th-dot{width:26px;height:26px;border-radius:50%;padding:2px;border:1.5px solid var(--line);cursor:pointer;display:flex}
.th-dot span{flex:1;border-radius:50%;display:block}
.th-dot.sel{border:2px solid var(--terre)}
.th-name{font-size:12px;color:var(--brown-lt);margin-left:4px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--terre);outline-offset:3px;border-radius:4px}

/* ============================================================
   WIZARD v2 — additions
   ============================================================ */

/* substep dots in the header */
.wiz-head{align-items:center}
.wiz-sub{display:flex;gap:5px;margin-left:10px}
.wiz-sub i{width:5px;height:5px;border-radius:50%;background:var(--line);display:block}
.wiz-sub i.on{background:var(--or)}
.wiz-headL{display:flex;align-items:center}

/* audience cards (4-up) */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aud-card{border:1.5px solid var(--line);border-radius:12px;padding:20px 14px;cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.aud-card:hover{border-color:var(--brown-lt)}
.aud-card.sel{border:2px solid var(--terre);background:#FBF5F0;padding:19px 13px}
.aud-card svg{width:34px;height:34px;stroke:var(--terre);fill:none;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;margin:0 auto 8px}
.aud-card b{display:block;font-size:15px;font-weight:500}
.aud-card small{display:block;font-size:11px;color:var(--brown-lt);margin-top:2px}

/* age band pills */
.band-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.band-lbl{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--terre);display:block;margin-bottom:9px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1.5px solid var(--line);border-radius:99px;padding:7px 16px;font-size:13px;cursor:pointer;background:none;font-family:var(--sans);color:var(--nuit);transition:border-color .12s}
.pill:hover{border-color:var(--brown-lt)}
.pill.sel{border:2px solid var(--terre);background:#FBF5F0;padding:6px 15px;font-weight:500}

/* style card placeholder when no mask is drawn yet */
.st-card.soon{cursor:pointer}
.st-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#B49B7E;text-align:center;padding:6px}
.st-ph svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.2}
.st-ph span{font-size:9px;letter-spacing:.07em;text-transform:uppercase;line-height:1.4}

/* fabric tabs */
.fb-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.fb-tab{background:none;border:none;font-family:var(--sans);font-size:13.5px;color:var(--brown-lt);padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s}
.fb-tab:hover{color:var(--nuit)}
.fb-tab.on{color:var(--nuit);border-bottom-color:var(--terre);font-weight:500}
.fb-tab .lk{font-size:10px;opacity:.6;margin-left:5px}
.fb-card.locked{cursor:not-allowed;opacity:.62}
.fb-card.locked:hover{border-color:var(--line)}
.fb-sw.grad{background-size:cover}
.fb-locked-note{background:#FBF5F0;border:1px dashed #E0CDBA;border-radius:10px;padding:14px 16px;font-size:12.5px;color:var(--brown);line-height:1.6}
.fb-locked-note b{display:block;font-weight:500;color:var(--nuit);margin-bottom:3px;font-size:13px}

/* finishing step blocks */
.blk{margin-bottom:18px}
.blk:last-child{margin-bottom:0}
.blk-lbl{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--terre);display:block;margin-bottom:9px}
.opt-row{border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .12s}
.opt-row.sel{border:2px solid var(--terre);background:#FBF5F0;padding:11px 14px}
.opt-row b{font-size:13.5px;font-weight:500;display:block}
.opt-row small{font-size:11.5px;color:var(--brown-lt);display:block;line-height:1.45}
.opt-row .px{margin-left:auto;font-size:12.5px;color:var(--terre);font-weight:500;white-space:nowrap}
.opt-box{width:19px;height:19px;border:1.5px solid var(--line);border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.opt-row.sel .opt-box{background:var(--terre);border-color:var(--terre)}
.opt-box svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;opacity:0}
.opt-row.sel .opt-box svg{opacity:1}

/* inspiration upload */
.insp-drop{border:1.5px dashed #DCC9B2;border-radius:14px;padding:30px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:#FCF8F1}
.insp-drop:hover,.insp-drop.over{border-color:var(--terre);background:#FBF3EA}
.insp-drop svg{width:38px;height:38px;stroke:var(--terre);fill:none;stroke-width:1.3;stroke-linejoin:round;margin:0 auto 10px}
.insp-drop b{display:block;font-family:var(--serif);font-size:16px;font-weight:500}
.insp-drop small{display:block;font-size:12px;color:var(--brown-lt);margin-top:5px;line-height:1.5}
.insp-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.insp-item{display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.insp-item img{width:74px;height:92px;object-fit:cover;border-radius:8px;flex-shrink:0}
.insp-item textarea{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--sans);font-size:12.5px;resize:none;color:var(--nuit);background:#FDFBF7;line-height:1.5}
.insp-item textarea:focus{outline:none;border-color:var(--terre)}
.insp-del{background:none;border:none;color:var(--brown-lt);cursor:pointer;font-size:17px;line-height:1;padding:2px 4px;align-self:flex-start}
.insp-del:hover{color:var(--terre)}

/* tailor cards + profile sheet */
.tw-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tw-card{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;background:#fff;font-family:var(--sans);padding:0;transition:border-color .12s}
.tw-card:hover{border-color:var(--brown-lt)}
.tw-card.sel{border:2px solid var(--terre)}
.tw-card.off{opacity:.6;cursor:default}
.tw-photo{height:104px;background:#EFE4D3 center/cover;display:flex;align-items:center;justify-content:center;color:#B49B7E;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.tw-body{padding:10px 12px}
.tw-body b{font-size:13.5px;font-weight:500;display:block}
.tw-loc{font-size:11.5px;color:var(--brown-lt);margin-top:1px}
.tw-meta{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:6px}
.tw-tier{font-size:9px;letter-spacing:.08em;background:var(--ivoire);color:#6B4A24;border-radius:99px;padding:3px 8px;font-weight:500}
.tw-from{font-size:12px;color:var(--terre);font-weight:500}
.tw-view{font-size:11px;color:var(--brown-lt);margin-top:8px;display:inline-block;border-bottom:1px solid var(--line)}

.sheet{position:fixed;inset:0;z-index:200;display:none}
.sheet.on{display:block}
.sheet-bg{position:absolute;inset:0;background:rgba(20,10,4,.55);backdrop-filter:blur(3px)}
.sheet-in{position:absolute;right:0;top:0;bottom:0;width:min(430px,100%);background:var(--cream);overflow-y:auto;padding:26px;animation:slide .28s ease}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sheet-in{animation:none}}
.sheet-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--brown-lt)}
.sheet-photo{width:100%;height:210px;object-fit:cover;border-radius:12px;background:#EFE4D3}
.sheet-in h3{font-family:var(--serif);font-size:24px;font-weight:500;margin-top:16px}
.sheet-loc{font-size:13px;color:var(--brown-lt);margin-top:3px}
.sheet-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.sheet-spec{font-size:13px;margin-top:14px;line-height:1.6}
.sheet-spec em{font-style:normal;color:var(--terre)}
.sheet-story{font-size:13.5px;color:var(--brown);line-height:1.72;margin-top:10px}
.sheet-gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:16px}
.sheet-gal div{aspect-ratio:3/4;border-radius:8px;background:#EFE4D3 center/cover;display:flex;align-items:center;justify-content:center;font-size:8.5px;color:#B49B7E;text-align:center;letter-spacing:.05em;padding:4px}
.sheet-price{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.sheet-price span{font-size:12px;color:var(--brown-lt)}
.sheet-price b{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--terre)}

/* measurements */
.ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.ms-count{font-size:11.5px;color:var(--brown-lt)}
.unit-tog{display:inline-flex;border:1.5px solid var(--line);border-radius:99px;overflow:hidden}
.unit-tog button{background:none;border:none;font-family:var(--sans);font-size:12px;padding:5px 14px;cursor:pointer;color:var(--brown-lt)}
.unit-tog button.on{background:var(--terre);color:#fff;font-weight:500}
.ms-card{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}
.ms-dia{background:#FBF5EB;border-radius:12px;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.ms-dia svg{width:100%;height:100%}
.ms-q h4{font-family:var(--serif);font-size:21px;font-weight:500}
.ms-q p{font-size:13px;color:var(--brown-lt);line-height:1.6;margin-top:6px}
.ms-input{display:flex;align-items:center;gap:10px;margin-top:14px}
.ms-input input{width:120px;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--sans);font-size:17px;color:var(--nuit);background:#fff}
.ms-input input:focus{outline:none;border-color:var(--terre)}
.ms-unit{font-size:14px;color:var(--brown-lt)}
.ms-warn{font-size:12px;color:#9A5A22;background:#FBF0E4;border-radius:8px;padding:8px 11px;margin-top:10px;line-height:1.5;display:none}
.ms-warn.on{display:block}
.ms-skip{background:none;border:none;font-family:var(--sans);font-size:12px;color:var(--brown-lt);text-decoration:underline;cursor:pointer;margin-top:10px;padding:0}
.ms-prof{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--brown-lt)}
.ms-prof button{background:none;border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-family:var(--sans);font-size:11.5px;cursor:pointer;color:var(--nuit);margin:5px 5px 0 0}
.ms-prof button:hover{border-color:var(--terre)}
.ms-reassure{background:#FBF5F0;border-left:2px solid var(--or);border-radius:0 8px 8px 0;padding:11px 14px;font-size:12.5px;color:var(--brown);line-height:1.6;margin-top:16px;font-style:italic}

/* review */
.rev-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rev-row{display:flex;justify-content:space-between;gap:14px;padding:10px 15px;font-size:13px;border-bottom:1px solid var(--line)}
.rev-row:last-child{border-bottom:none}
.rev-row span{color:var(--brown-lt);flex-shrink:0}
.rev-row b{font-weight:500;text-align:right}
.rev-tot{background:var(--nuit);color:var(--cream)}
.rev-tot span{color:var(--ink-faint)}
.rev-tot b{color:var(--or);font-family:var(--serif);font-size:18px}
.rev-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.rev-cta .btn{font-size:14px;padding:12px 24px}
.rev-note{font-size:11.5px;color:var(--brown-lt);margin-top:12px;line-height:1.6}

@media(max-width:820px){
  .tw-grid{grid-template-columns:1fr 1fr}
  .ms-card{grid-template-columns:100px 1fr;gap:14px}
  .aud-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .ms-card{grid-template-columns:1fr}
  .ms-dia{aspect-ratio:16/9;max-height:150px}
  .fb-grid{grid-template-columns:repeat(2,1fr)}
  .st-grid{grid-template-columns:1fr 1fr}
}

.btn:disabled{opacity:.38;cursor:not-allowed;transform:none;background:var(--or)}
.btn:disabled:hover{transform:none;background:var(--or)}
.wiz-next[hidden]{display:none}
.t-badge{font-size:9px;letter-spacing:.08em;border-radius:99px;padding:3px 9px;font-weight:500;display:inline-block}
.opt-row.incl{cursor:default;border-style:solid;border-color:var(--or);background:#FDF7EE}
.opt-row.incl .px{color:#6B4A24}
.incl-img{width:46px;height:46px;object-fit:cover;border-radius:9px;flex-shrink:0;background:#EFE4D3}
.stage-shade{position:absolute;inset:6%;background-size:contain;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply;pointer-events:none}
.aud-card.soon{opacity:.5;cursor:default}
.aud-card.soon:hover{border-color:var(--line)}
.aud-card.soon svg{stroke:#B49B7E}
.stage-label{display:block;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-lt);margin-bottom:9px}
.concept-lede{font-size:13.5px;line-height:1.7;color:var(--brown);background:#FBF5F0;border-left:2px solid var(--or);border-radius:0 10px 10px 0;padding:13px 16px;margin-bottom:18px}
.concept-lede b{color:var(--nuit);font-weight:500}
textarea.brief{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--sans);font-size:13.5px;color:var(--nuit);background:#fff;resize:vertical;line-height:1.6}
textarea.brief:focus{outline:none;border-color:var(--terre)}
.thread-blk{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

/* occasion chips (Oct 11) */
.occ-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.occ-chip{font:inherit;font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid rgba(20,10,4,.18);background:#fff;color:var(--nuit,#140A04);cursor:pointer}
.occ-chip:hover{border-color:var(--terre,#B85C2A)}
.occ-chip.on{background:var(--nuit,#140A04);color:#FDF6E3;border-color:var(--nuit,#140A04)}
input.occ-box{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font-family:var(--sans);font-size:13.5px;color:var(--nuit);background:#fff}
input.occ-box:focus{outline:none;border-color:var(--terre)}
.occ-chip{font-family:var(--sans)}
.wiz-picked{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--sable);border:1px solid var(--line);font-size:13.5px;color:var(--brown)}

/* style families with a sleeve switch (Oct 16) */
.st-grid.n3{grid-template-columns:repeat(3,1fr)}
.st-sleeve{display:inline-flex;margin:8px 0 4px;background:var(--sable);border:1px solid var(--line);border-radius:999px;padding:2px}
.st-sleeve button{font:inherit;font-family:var(--sans);font-size:11.5px;border:0;background:transparent;color:var(--brown);padding:4px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.st-sleeve button.on{background:var(--nuit);color:var(--cream)}
.st-group .st-yd{display:block}
@media(max-width:820px){.st-grid.n3{grid-template-columns:repeat(3,1fr);gap:8px}.st-grid.n3 .st-body small{display:none}.st-sleeve{display:flex;width:100%;box-sizing:border-box}.st-sleeve button{flex:1;padding:4px 0;font-size:11px;min-width:0}}

/* ===== Mobile pass (Oct 16) ===== */
@media(max-width:820px){
  /* the builder's real controls, pinned to the bottom while the builder is on screen */
  body.wiz-in-view .wiz-foot{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -6px 18px rgba(20,10,4,.18)}
  body.wiz-in-view .wiz{padding-bottom:84px}
  body.wiz-in-view .wiz-break.open{position:fixed;left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom));z-index:59;max-height:45vh;overflow:auto}
  .wiz-back{min-height:44px;min-width:56px;padding:0 6px;font-size:14px}
  .wiz-next{min-height:46px;padding:0 20px;font-size:15px;white-space:nowrap}
  .wt-lbl,.wt-money{font-size:12px}
  .wt-amt{font-size:22px}
  .wiz-foot .wiz-total{flex:1;min-width:0;text-align:left}
  .wiz-foot .wt-money{display:block;white-space:nowrap}
  .wiz-foot .wt-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wiz-back{order:-1}

  /* fabric choices: one swipeable row, so the preview stays on screen */
  .wiz-body>*,#wizPanel{min-width:0}
  #wizPanel .fb-grid{width:100%}
  #wizPanel .fb-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:128px;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:2px 2px 8px;scrollbar-width:none;margin-left:-2px;margin-right:-2px}
  #wizPanel .fb-grid::-webkit-scrollbar{display:none}
  #wizPanel .fb-card{scroll-snap-align:start}
  #wizPanel .fb-sw{height:72px}
  #wizPanel .fb-card{align-self:start}
  .fb-cat-note{display:none}
  #wizPanel .fb-grid{margin-bottom:0;padding-bottom:4px}
  .wiz[data-step="fabric"] .thread-blk{margin-top:8px;padding-top:12px}
  .wiz[data-step="fabric"] .thread-blk .wiz-note{font-size:12.5px;line-height:1.45}
  .fb-info{padding:8px 10px}
  .fb-info b{font-size:13px}
  .fb-info small{font-size:12px}

  /* smaller preview on steps where it isn't the point */
  .wiz[data-step="who"] .stage-art,.wiz[data-step="measure"] .stage-art,.wiz[data-step="tailor"] .stage-art,.wiz[data-step="inspo"] .stage-art{aspect-ratio:auto;height:150px}
  .wiz[data-step="who"] .stage-cap,.wiz[data-step="measure"] .stage-cap,.wiz[data-step="tailor"] .stage-cap,.wiz[data-step="inspo"] .stage-cap{font-size:13px;margin-top:6px}

  /* bigger touch targets */
  .th-row{gap:12px}
  .th-dot{width:38px;height:38px;padding:3px}
  .fs-toggle button{padding:10px 13px;font-size:12.5px}
  .fs-cta{padding:10px 0;font-size:14px}
  details summary{min-height:44px}
  .foot-links a{display:inline-block;padding:10px 0}

  /* readable small text */
  .aud-card small{font-size:12px}
  .t-badge{font-size:11px}
  .stage-label{font-size:11px}
  .stage-empty{font-size:13px}
  .wiz-note{font-size:12.5px}
  .fs-tag{font-size:11px}
}
.stage-fabchip[hidden]{display:none}
.fb-tab{white-space:nowrap}
@media(max-width:400px){.fb-tab{padding:8px 10px;font-size:13px}.fb-tab .lk{margin-left:3px}}

/* announcement strip (Oct 16) */
.announce{background:var(--nuit);border-bottom:1px solid rgba(232,160,74,.25);color:var(--cream);display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:11px 20px;font-size:14.5px;text-align:center;line-height:1.4}
.announce a{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or);text-decoration:none;border-bottom:1.5px solid var(--or);padding:2px 0}
.announce a:hover{color:var(--cream);border-color:var(--cream)}
@media(max-width:600px){.announce{gap:6px 12px;font-size:13.5px;padding:10px 16px}.announce a{padding:8px 0 2px}}

/* bigger, bolder hero headline (Oct 16) */
.hero-in{padding-top:104px;padding-bottom:112px}
.hero h1{font-size:clamp(44px,6.2vw,76px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.hero p{font-size:18px;margin-top:28px}
@media(max-width:860px){.hero-in{padding-top:56px;padding-bottom:64px}.hero h1{font-size:clamp(40px,11vw,56px)}}
.slogan,.foot-slogan{line-height:1.8}
@media(max-width:600px){.slogan span{display:block}.slogan .sl-dot{display:none}}

/* mobile hero order (Oct 17): headline, photo, buttons, paragraph, proof. Phones/tablets only; desktop untouched. */
@media(max-width:860px){
  .hero-in>div:first-child{display:contents}
  .hero-in{display:flex;flex-direction:column;gap:0}
  .hero h1{order:1}
  .hero-photo{order:2;margin-top:26px;max-width:none}
  .hero-photo img{aspect-ratio:5/4;object-position:center 30%}
  .hero-ctas{order:3;margin-top:24px}
  .hero p{order:4;margin:24px 0 0}
  .hero-proof{order:5}
}

/* ===== How it works: blended map + cowries (Oct 17) ===== */
.how3{position:relative;overflow:hidden}
.how3 .wrap{position:relative}
.how-art{position:absolute;top:10px;right:max(0px,calc((100vw - 1180px)/2 - 60px));width:min(600px,46vw);aspect-ratio:760/520;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 52% 48%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 52% 48%,#000 45%,transparent 100%)}
.how-art svg{width:100%;height:100%;display:block}
.ha-land{fill:#E8D5B0;opacity:.45}
.ha-star{fill:var(--terre)}
.ha-route{fill:none;stroke:var(--terre);stroke-width:2;stroke-dasharray:6 7}
.ha-box path{fill:none;stroke:var(--terre);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ha-lbl{font-family:var(--sans);font-size:14px;letter-spacing:.18em;fill:var(--brown);font-weight:500}
.ha-lbl-b{fill:var(--terre)}
.ha-thread{fill:none;stroke:var(--terre);stroke-width:1.6;opacity:.75}
.how-head{position:relative;max-width:560px}
@media(min-width:821px){.how3 .sec-head{min-height:calc(min(600px,46vw) * .684 - 80px)}}
.how-head h2{font-size:clamp(32px,4vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.how3 .steps{position:relative;margin-top:24px}
@media(max-width:1000px){.how-art{opacity:.55}}
@media(max-width:820px){
  .how-art{position:relative;top:auto;right:auto;width:auto;margin:-10px -40px -40px;opacity:1}
  .ha-lbl{font-size:18px}
}

/* Fabric section touch-up (Oct 17) */
.fab-sec{position:relative;overflow:hidden}
.fab-cowrie{position:absolute;top:56px;right:max(24px,calc((100vw - 1180px)/2 + 10px));width:110px;transform:rotate(14deg);pointer-events:none;opacity:.95}
.fab-head{position:relative;max-width:640px}
.fab-head h2{font-size:clamp(32px,4vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.fab-head>p{color:var(--brown)}
.fab-note{margin-top:14px;font-size:14px;line-height:1.6;color:var(--brown)}
.fab-mark{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:3px 11px;border:1px solid var(--or);border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terre);background:rgba(232,160,74,.08);vertical-align:1px}
.fs-top{justify-content:flex-end}
.fab-mark{display:flex;width:fit-content;margin:0 0 8px}
/* the loop runs edge to edge, so cards drift in and out of the screen instead of being cut at the column */
.fab-sec .fs-rail{margin-inline:calc(50% - 50vw);padding-inline:24px;grid-auto-columns:clamp(240px,22vw,310px)}
@media(max-width:820px){.fab-cowrie{width:64px;top:30px;right:14px;opacity:.85}.fab-head{padding-right:56px}.fs-top{display:none}
  .fab-sec .fs-rail{padding-inline:16px;grid-auto-columns:74vw}}

/* Fabric houses logo row (Oct 17). Sized for four logos; two now. */
.fab-brands{margin-top:22px}
.fab-head .fab-brands-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-lt);margin:0 0 10px}
.fab-brands ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,130px));gap:12px 28px;align-items:center}
.fab-brands li{display:flex;align-items:center;height:56px}
.fab-brands li.tall img{max-height:54px}
.fab-brands img{max-width:100%;max-height:42px;width:auto;height:auto;opacity:.78}
@media(max-width:820px){.fab-brands ul{grid-template-columns:repeat(2,minmax(0,120px));gap:12px 28px}.fab-brands li{height:52px}.fab-brands img{max-height:38px}.fab-brands li.tall img{max-height:50px}}