:root{
    --ivory:#F5F1EA;
    --ivory-2:#EFEAE0;
    --oatmeal:#E8E1D4;
    --cashmere:#D9CFBE;
    --slate:#6B6660;
    --slate-2:#8A857E;
    --charcoal:#2A2824;
    --navy:#1B2433;
    --rule:rgba(42,40,36,0.14);
    --rule-strong:rgba(42,40,36,0.32);
    --serif:"Cormorant Garamond", "EB Garamond", Georgia, serif;
    --sans:"Inter", "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:auto}
  body{
    background:var(--ivory);
    color:var(--charcoal);
    font-family:var(--sans);
    font-weight:400;
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:var(--navy);color:var(--ivory)}
  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  hr{border:0;border-top:1px solid var(--rule);margin:0}

  /* ---------- Type ---------- */
  .display{
    font-family:var(--serif);
    font-weight:300;
    letter-spacing:-0.012em;
    line-height:1.02;
  }
  .eyebrow{
    font-family:var(--sans);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--slate);
  }
  .label{
    font-family:var(--sans);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .lede{
    font-family:var(--serif);
    font-style:italic;
    font-weight:300;
    font-size:22px;
    line-height:1.45;
    color:var(--charcoal);
  }
  .body-lg{font-size:16px;line-height:1.65;color:#3a3833}
  .small{font-size:12.5px;color:var(--slate);letter-spacing:0.02em}

  /* ---------- Layout ---------- */
  .wrap{max-width:1320px;margin:0 auto;padding:0 48px}
  .wrap-narrow{max-width:1080px;margin:0 auto;padding:0 48px}
  .section{padding:140px 0;position:relative}
  .section-tight{padding:96px 0}
  @media (max-width:760px){
    .wrap,.wrap-narrow{padding:0 22px}
    .section{padding:88px 0}
    .section-tight{padding:64px 0}
  }

  .section-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:48px;margin-bottom:80px;
  }
  .section-head h1,
  .section-head h2{margin:0;font-size:64px}
  .section-head p{margin:0;max-width:420px;color:#3a3833}
  @media (max-width:760px){
    .section-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:48px}
    .section-head h1,
    .section-head h2{font-size:42px}
  }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    padding:22px 48px;
    display:flex;align-items:center;justify-content:space-between;
    transition:background .4s ease, color .4s ease, border-color .4s ease, padding .4s ease;
    color:var(--ivory);
    border-bottom:1px solid transparent;
  }
  .nav.is-solid{
    background:rgba(245,241,234,0.92);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    color:var(--charcoal);
    border-bottom-color:var(--rule);
    padding:14px 48px;
  }
  .wordmark{
    display:inline-flex;align-items:center;gap:12px;
    font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:0.06em;
    line-height:1;
  }
  .wordmark-mark{
    display:inline-block;width:22px;height:34px;flex-shrink:0;
    background-color:currentColor;
    -webkit-mask:url("logo-mark.png") center/contain no-repeat;
    mask:url("logo-mark.png") center/contain no-repeat;
    transition:background-color .4s ease;
  }
  .wordmark-text{display:inline-block}
  .wordmark .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 8px;vertical-align:middle;opacity:.5}
  .nav-links{display:flex;gap:36px}
  .nav-links a{
    font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
    position:relative;padding:6px 0;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;
    transition:right .35s ease;
  }
  .nav-links a:hover::after{right:0}
  .nav-bag{font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
  @media (max-width:860px){
    .nav{padding:16px 22px}
    .nav.is-solid{padding:12px 22px}
    .nav-links{display:none}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;height:180vh;min-height:560px;
    color:var(--ivory);
    background:#1a1d22;
  }
  .hero-sticky{
    position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  }
  .hero-media{position:absolute;inset:0;overflow:hidden;background:#1a1d22}
  .hero-video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
    z-index:0;
    filter:contrast(1.02) saturate(0.92) brightness(0.85);
  }
  .hero-media::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(180deg, rgba(20,23,29,0.45) 0%, rgba(20,23,29,0.15) 30%, rgba(20,23,29,0.25) 60%, rgba(20,23,29,0.78) 100%),
      radial-gradient(70% 60% at 25% 70%, rgba(27,36,51,0.45), transparent 70%);
    pointer-events:none;
  }
  /* simulated falling fabric — soft veils */
  .veil{
    position:absolute;left:50%;top:50%;width:140vmin;height:140vmin;
    transform:translate(-50%,-50%);
    border-radius:50%;
    filter:blur(40px);opacity:.55;mix-blend-mode:screen;
    background:radial-gradient(closest-side, rgba(232,225,212,0.55), rgba(232,225,212,0) 70%);
    animation:veilFloat 14s ease-in-out infinite alternate;
  }
  .veil.v2{width:90vmin;height:90vmin;animation-duration:18s;animation-delay:-4s;opacity:.4;background:radial-gradient(closest-side, rgba(217,207,190,0.6), rgba(217,207,190,0) 70%)}
  .veil.v3{width:60vmin;height:60vmin;animation-duration:11s;animation-delay:-2s;opacity:.35;background:radial-gradient(closest-side, rgba(255,250,240,0.7), rgba(255,250,240,0) 70%)}
  @keyframes veilFloat{
    0%{transform:translate(-58%,-46%) scale(1)}
    50%{transform:translate(-46%,-54%) scale(1.08)}
    100%{transform:translate(-52%,-50%) scale(0.96)}
  }
  @keyframes driftZoom{
    0%{transform:scale(1) translate(0,0)}
    100%{transform:scale(1.08) translate(-1%,-2%)}
  }
  .hero-grain{
    position:absolute;inset:0;pointer-events:none;opacity:.06;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  .hero-inner{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:120px 48px 96px;max-width:1320px;margin:0 auto;
    overflow:hidden;
  }
  @media (max-width:760px){
    .hero-inner{padding:110px 22px 80px}
  }
  .hero-eyebrow{
    color:rgba(245,241,234,0.78);
    margin-bottom:28px;display:flex;align-items:center;gap:14px;
  }
  .hero-eyebrow::before{content:"";display:block;width:36px;height:1px;background:currentColor;opacity:.6}
  .hero h1{
    margin:0;
    font-family:var(--serif);font-weight:300;
    font-size:clamp(48px, 7.6vw, 112px);
    line-height:0.98;letter-spacing:-0.015em;
    max-width:14ch;
  }
  .hero h1 em{font-style:italic;font-weight:300;color:#E8E1D4}
  .hero-sub{
    margin-top:32px;max-width:46ch;
    font-size:16px;line-height:1.6;color:rgba(245,241,234,0.78);
  }
  .hero-ctas{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}

  .scroll-ind{
    position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:3;
    color:rgba(245,241,234,0.7);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .scroll-ind .line{
    width:1px;height:48px;background:currentColor;position:relative;overflow:hidden;
  }
  .scroll-ind .line::after{
    content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;
    background:linear-gradient(180deg, transparent, var(--ivory));
    animation:scrollPulse 2.4s ease-in-out infinite;
  }
  @keyframes scrollPulse{
    0%{top:-50%}100%{top:120%}
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:12px;
    padding:16px 26px;
    will-change:transform;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease, color .35s ease, border-color .35s ease;
    font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
    border:1px solid currentColor;
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  }
  .btn .arrow{
    width:18px;height:1px;background:currentColor;position:relative;transition:width .3s ease;
  }
  .btn .arrow::after{
    content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
    border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);
  }
  .btn:hover .arrow{width:26px}
  .btn-light{color:var(--ivory);border-color:rgba(245,241,234,0.6)}
  .btn-light:hover{background:var(--ivory);color:var(--charcoal);border-color:var(--ivory)}
  .btn-light.btn-ghost{border-color:rgba(245,241,234,0.35)}
  .btn-dark{color:var(--charcoal);border-color:var(--charcoal)}
  .btn-dark:hover{background:var(--charcoal);color:var(--ivory)}
  .btn-navy{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
  .btn-navy:hover{background:#0f1623;border-color:#0f1623}
  .link-quiet{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
    padding-bottom:6px;border-bottom:1px solid var(--rule-strong);
    transition:gap .3s ease, border-color .3s ease;
  }
  .link-quiet:hover{gap:16px;border-bottom-color:var(--charcoal)}

  /* ---------- Brand strip ---------- */
  .brandstrip{
    border-bottom:1px solid var(--rule);
    padding:22px 0;
    overflow:hidden;
  }
  .brandstrip-inner{
    display:flex;gap:64px;align-items:center;justify-content:center;
    color:var(--slate);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
    flex-wrap:wrap;
  }
  .brandstrip-inner span{display:flex;align-items:center;gap:14px}
  .brandstrip-inner span::before{content:"";display:block;width:4px;height:4px;background:var(--cashmere);border-radius:50%}

  /* ---------- Image placeholder ---------- */
  .ph{
    position:relative;
    background:
      repeating-linear-gradient(135deg, rgba(42,40,36,0.04) 0 1px, transparent 1px 14px),
      linear-gradient(180deg, var(--oatmeal), var(--cashmere));
    color:var(--slate);
    overflow:hidden;
  }
  .ph::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(60% 50% at 50% 40%, rgba(255,250,240,0.5), transparent 70%);
    pointer-events:none;
  }
  .ph .ph-tag{
    position:absolute;left:14px;bottom:12px;
    font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size:10px;letter-spacing:0.08em;color:var(--slate);
    background:rgba(245,241,234,0.7);
    padding:5px 9px;border:1px solid var(--rule);
    text-transform:uppercase;
    z-index:2;
  }
  .ph.dark{
    background:
      repeating-linear-gradient(135deg, rgba(245,241,234,0.05) 0 1px, transparent 1px 14px),
      linear-gradient(180deg, #2c3340, #1B2433 70%);
    color:rgba(245,241,234,0.75);
  }
  .ph.dark .ph-tag{background:rgba(27,36,51,0.7);border-color:rgba(245,241,234,0.18);color:rgba(245,241,234,0.85)}
  .ph.warm{
    background:
      repeating-linear-gradient(135deg, rgba(42,40,36,0.05) 0 1px, transparent 1px 14px),
      linear-gradient(180deg, #EDE3CF, #C9B898);
  }

  /* ---------- Collection ---------- */
  .coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
  @media (max-width:980px){.coll-grid{grid-template-columns:1fr;gap:64px}}
  .coll-item .ph{aspect-ratio:3/4;margin-bottom:28px}
  .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .ph.has-img::after{display:none}
  .ph.has-img .ph-tag{z-index:2}
  .coll-item h3{font-family:var(--serif);font-weight:400;font-size:34px;margin:0 0 12px;letter-spacing:-0.005em}
  .coll-item p{margin:0 0 20px;color:#3a3833;max-width:36ch}
  .coll-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px}
  .coll-num{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:14px}
  .coll-item:nth-child(2){transform:translateY(48px)}
  @media (max-width:980px){.coll-item:nth-child(2){transform:none}}

  /* ---------- Spotlight ---------- */
  .spot-tabs{
    display:flex;gap:0;margin-bottom:56px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    position:sticky;top:76px;z-index:20;background:rgba(247,243,236,0.92);
    backdrop-filter:saturate(160%) blur(10px);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
  }
  .spot-tab{
    flex:1;padding:22px 18px;text-align:left;
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;
    color:var(--slate);border-right:1px solid var(--rule);
    transition:color .25s ease, background .25s ease;
    position:relative;display:flex;flex-direction:column;gap:4px;
  }
  .spot-tab:last-child{border-right:0}
  .spot-tab .tnum{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--slate);letter-spacing:0;text-transform:none}
  .spot-tab .tname{color:var(--slate)}
  .spot-tab.active{color:var(--charcoal);background:var(--ivory)}
  .spot-tab.active .tname{color:var(--charcoal)}
  .spot-tab.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--charcoal);
  }
  .spot-tab:hover{color:var(--charcoal)}
  @media (max-width:760px){
    .spot-tabs{flex-direction:column}
    .spot-tab{border-right:0;border-bottom:1px solid var(--rule)}
    .spot-tab:last-child{border-bottom:0}
  }
  .spot-panel{display:none}
  .spot-panel.active{display:block}
  .spot{display:grid;grid-template-columns:1.15fr 1fr;gap:88px;align-items:start}
  @media (max-width:1080px){.spot{grid-template-columns:1fr;gap:48px}}
  .spot-gallery{display:flex;flex-direction:column;gap:12px;position:sticky;top:170px}
  @media (max-width:1080px){.spot-gallery{position:static}}
  .spot-main{aspect-ratio:4/5;width:100%}
  .spot-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .spot-thumb{aspect-ratio:1/1;cursor:pointer;opacity:.78;transition:opacity .25s ease, outline-color .25s ease;outline:1px solid transparent;outline-offset:2px}
  .spot-thumb:hover{opacity:1}
  .spot-thumb.active{opacity:1;outline-color:var(--charcoal)}
  .spot-info{position:static}
  .spot-info .eyebrow{margin-bottom:18px}
  .spot-info h1,
  .spot-info h2{font-family:var(--serif);font-weight:300;font-size:56px;line-height:1.04;margin:0 0 24px;letter-spacing:-0.01em}
  .spot-certs{display:flex;align-items:center;gap:22px;margin:24px 0 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap}
  .spot-certs img{height:32px;width:auto;opacity:.6;filter:grayscale(1) contrast(1.05) brightness(.55);transition:opacity .3s ease, filter .3s ease}
  .spot-certs img:hover{opacity:.95;filter:grayscale(1) contrast(1.05) brightness(.35)}
  .spot-certs .grs{height:22px}

  /* Color pickers — cashmere texture with color overlay */
  .spot-colors{margin:28px 0 4px}
  .spot-colors .label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline}
  .spot-colors .label .picked{font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:0;text-transform:none;color:var(--charcoal)}
  .swatches{display:flex;gap:14px;flex-wrap:wrap}
  .swatch{
    position:relative;width:44px;height:44px;border-radius:50%;
    cursor:pointer;border:none;padding:0;
    background-image:url('cashmere-texture.jpg');
    background-size:140% 140%;background-position:center;
    box-shadow:0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.06);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .swatch::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--c, #888);
    mix-blend-mode:multiply;
    opacity:0.92;
  }
  .swatch::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(ellipse at 32% 28%, rgba(255,255,255,0.22), transparent 55%);
    pointer-events:none;
  }
  .swatch:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.06)}
  .swatch.active{box-shadow:0 0 0 1px var(--ivory), 0 0 0 2px var(--charcoal), 0 4px 10px rgba(0,0,0,0.14)}
  .swatch:focus-visible{outline:none;box-shadow:0 0 0 1px var(--ivory), 0 0 0 2px var(--charcoal)}
  .spot-info .eyebrow{margin-bottom:18px}
  .spot-info h1,
  .spot-info h2{font-family:var(--serif);font-weight:300;font-size:56px;line-height:1.04;margin:0 0 24px;letter-spacing:-0.01em}
  .spot-price{display:flex;align-items:baseline;gap:18px;margin:28px 0 8px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
  .spot-price .price{font-family:var(--serif);font-size:34px;font-weight:400}
  .spot-price .strike{font-family:var(--serif);font-size:18px;color:var(--slate);text-decoration:line-through;text-decoration-thickness:0.5px}
  .spot-price .save{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);margin-left:auto}
  .spot-cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:32px 0 40px}
  .acc{margin-top:8px;border-top:1px solid var(--rule)}
  .acc-item{border-bottom:1px solid var(--rule)}
  .acc-head{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:22px 0;text-align:left;
    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;
  }
  .acc-head .plus{
    width:14px;height:14px;position:relative;
  }
  .acc-head .plus::before,.acc-head .plus::after{
    content:"";position:absolute;background:var(--charcoal);
  }
  .acc-head .plus::before{left:0;right:0;top:6px;height:1px}
  .acc-head .plus::after{top:0;bottom:0;left:6px;width:1px;transition:transform .3s ease}
  .acc-item.open .acc-head .plus::after{transform:scaleY(0)}
  .acc-body{
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;
  }
  .acc-item.open .acc-body{grid-template-rows:1fr}
  .acc-body > div{overflow:hidden}
  .acc-body dl{
    display:grid;grid-template-columns:1fr 1.4fr;gap:8px 24px;
    padding:0 0 26px;margin:0;font-size:14px;
  }
  .acc-body dt{color:var(--slate);font-size:12px;letter-spacing:0.06em}
  .acc-body dd{margin:0}

  /* ---------- Honest Price ---------- */
  .honest{background:var(--ivory-2)}
  .honest-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
  @media (max-width:1080px){.honest-grid{grid-template-columns:1fr;gap:56px}}
  .honest h2{font-size:64px;margin:0 0 28px}
  .honest .lede{margin:0 0 32px;max-width:46ch}
  .honest blockquote{
    margin:32px 0 0;padding:24px 0 0;border-top:1px solid var(--rule);
    font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--charcoal);
    max-width:42ch;
  }
  .compare{
    border:1px solid var(--rule);background:var(--ivory);
    padding:36px;
  }
  .compare-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
  .compare-row:last-of-type{border-bottom:0}
  .compare-row .name{font-size:13px;letter-spacing:0.04em;color:#3a3833}
  .compare-row .val{font-family:var(--serif);font-size:20px}
  .compare .total{padding-top:22px;margin-top:6px;border-top:1px solid var(--charcoal)}
  .compare .total .name{font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:0}
  .compare .total .val{font-family:var(--serif);font-size:32px;font-weight:400}
  .compare .retail{
    display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
    margin-top:24px;padding:18px 0;border-top:1px dashed var(--rule);color:var(--slate);
  }
  .compare .retail .val{font-family:var(--serif);font-size:18px;text-decoration:line-through;text-decoration-thickness:0.5px}
  .savings{
    margin-top:18px;padding:14px 18px;background:var(--oatmeal);
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  }
  .savings strong{font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:0;text-transform:none}
  .nots{margin-top:36px;display:grid;gap:6px}
  .nots li{
    list-style:none;padding:12px 0;border-bottom:1px solid var(--rule);
    display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--slate);
  }
  .nots li::before{
    content:"";display:block;width:14px;height:1px;background:var(--slate);flex:none;
  }
  .nots li.in{color:var(--charcoal)}
  .nots li.in::before{width:0;height:0;border:0}
  .nots li.in .num{
    font-family:var(--serif);font-style:italic;color:var(--slate);font-size:13px;width:24px;flex:none;
  }

  /* ---------- Origin ---------- */
  .origin-hero .ph{aspect-ratio:21/9;margin-bottom:80px}
  .origin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
  @media (max-width:980px){.origin-grid{grid-template-columns:1fr;gap:40px}}
  .step .step-num{
    font-family:var(--serif);font-style:italic;font-size:42px;font-weight:300;color:var(--slate);
    border-top:1px solid var(--rule);padding-top:18px;margin-bottom:24px;
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .step .step-num .label{color:var(--slate)}
  .step h4{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 12px}
  .step p{margin:0;color:#3a3833;max-width:32ch}

  .badges{
    margin-top:96px;padding-top:48px;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  }
  @media (max-width:760px){.badges{grid-template-columns:repeat(2,1fr)}}
  .badge{
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  }
  .badge .seal{
    width:140px;height:84px;
    display:flex;align-items:center;justify-content:flex-start;
    background:transparent;
    position:relative;
    margin-bottom:10px;
  }
  .badge .seal img{
    max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
    filter:none;
    transition:transform .4s ease;
  }
  .badge:hover .seal img{transform:scale(1.04)}
  .badge .seal img{filter:grayscale(1) contrast(1.05) brightness(.55);opacity:.75;transition:transform .5s ease, opacity .3s ease, filter .3s ease}
  .badge:hover .seal img{opacity:1;filter:grayscale(1) contrast(1.05) brightness(.35)}
  .badge .name{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500}
  .badge .sub{font-size:12px;color:var(--slate)}

  /* ---------- Packaging ---------- */
  .pack{background:var(--charcoal);color:var(--ivory)}
  .pack .small,.pack .eyebrow{color:rgba(245,241,234,0.6)}
  .pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
  @media (max-width:1080px){.pack-grid{grid-template-columns:1fr;gap:56px}}
  .pack h2{font-family:var(--serif);font-weight:300;font-size:60px;line-height:1.05;margin:0 0 28px;letter-spacing:-0.01em}
  .pack .lede{color:rgba(245,241,234,0.78)}
  .pack-images{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .pack-images .ph{background:
    repeating-linear-gradient(135deg, rgba(245,241,234,0.04) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #3a3733, #1f1d1a);
    color:rgba(245,241,234,0.65);
  }
  .pack-images .ph .ph-tag{background:rgba(0,0,0,0.4);border-color:rgba(245,241,234,0.18);color:rgba(245,241,234,0.8)}
  .pack-images .pi-1{aspect-ratio:1/1;grid-column:1/3}
  .pack-images .pi-2{aspect-ratio:1/1.1}
  .pack-images .pi-3{aspect-ratio:1/1.1}
  .pack-list{margin-top:32px;display:grid;gap:0}
  .pack-list li{
    list-style:none;padding:18px 0;border-top:1px solid rgba(245,241,234,0.16);
    display:flex;justify-content:space-between;align-items:center;
    font-size:13px;letter-spacing:0.04em;
  }
  .pack-list li:last-child{border-bottom:1px solid rgba(245,241,234,0.16)}
  .pack-list .num{font-family:var(--serif);font-style:italic;color:rgba(245,241,234,0.55);font-size:14px}

  /* ---------- Testimonials ---------- */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
  @media (max-width:980px){.testi-grid{grid-template-columns:1fr;gap:48px}}
  .testi .ph{aspect-ratio:4/5;margin-bottom:28px}
  .testi blockquote{
    font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.35;
    margin:0 0 22px;letter-spacing:-0.005em;
  }
  .testi blockquote::before{content:"“";font-family:var(--serif);font-size:48px;line-height:0;vertical-align:-0.18em;margin-right:4px;color:var(--slate)}
  .testi blockquote::after{content:"”";font-family:var(--serif);font-size:48px;line-height:0;vertical-align:-0.4em;margin-left:2px;color:var(--slate)}
  .testi .who{display:flex;justify-content:space-between;font-size:12px;letter-spacing:0.04em;color:var(--slate)}
  .testi .who .name{color:var(--charcoal);font-weight:500}

  /* ---------- Care ---------- */
  .care{background:var(--ivory-2)}
  .care-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
  @media (max-width:980px){.care-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.care-grid{grid-template-columns:1fr}}
  .care-card{
    background:var(--ivory);border:1px solid var(--rule);
    padding:32px 24px 28px;min-height:240px;
    display:flex;flex-direction:column;justify-content:space-between;gap:18px;
    transition:transform .35s ease, border-color .35s ease;
  }
  .care-card:hover{transform:translateY(-4px);border-color:var(--rule-strong)}
  .care-card .num{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--slate)}
  .care-card .glyph{
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--rule-strong);border-radius:50%;
  }
  .care-card .glyph svg{width:16px;height:16px;stroke:var(--charcoal);fill:none;stroke-width:1.2}
  .care-card .ttl{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2}
  .care-card .care-copy{display:flex;flex-direction:column;gap:8px}
  .care-card .care-note{
    font-family:var(--sans);font-weight:400;font-size:13px;line-height:1.55;
    color:var(--slate);max-width:30ch;
  }

  /* ---------- Concierge ---------- */
  .concierge-cta{background:#343D6B;color:var(--ivory);text-align:center;padding:160px 0}
  .concierge-cta .eyebrow{color:rgba(245,241,234,0.6)}

  /* ---------- Finale wrap (Care + Private Assistance with sticky brand mark) ---------- */
  .finale-wrap{position:relative;background:#343D6B;isolation:isolate;overflow:clip}
  .finale-mark-track{position:absolute;inset:0;pointer-events:none;z-index:0}
  .finale-mark{
    position:sticky;top:70%;
    width:clamp(66px,7vw,100px);
    aspect-ratio:192/300;
    margin:0 auto;
    transform:translateY(-50%);
    background-color:rgba(245,241,234,0.18);
    -webkit-mask:url("logo-mark.png") center/contain no-repeat;
    mask:url("logo-mark.png") center/contain no-repeat;
  }
  .finale-wrap > .care{position:relative;z-index:2;background:var(--ivory)}
  .finale-wrap > .concierge-cta{position:relative;z-index:1;background:transparent}
  .finale-wrap > .concierge-cta .wrap-narrow{position:relative;z-index:3}
  @media (max-width:760px){
    .finale-mark{width:min(18vw,72px)}
  }
  .concierge-cta h2{font-family:var(--serif);font-weight:300;font-size:84px;line-height:1.02;letter-spacing:-0.015em;margin:24px 0 28px}
  .concierge-cta p{max-width:48ch;margin:0 auto;color:rgba(245,241,234,0.78);font-size:17px}
  .concierge-cta .ctas{margin-top:48px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
  @media (max-width:760px){.concierge-cta{padding:96px 0}.concierge-cta h2{font-size:48px}}

  /* Floating concierge button */
  .floating-concierge{
    position:fixed;right:24px;bottom:24px;z-index:60;
    display:flex;align-items:center;gap:12px;
    padding:14px 18px 14px 14px;
    background:var(--ivory);color:var(--charcoal);
    border:1px solid var(--rule-strong);
    border-radius:999px;
    font-size:11px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;
    box-shadow:0 8px 30px rgba(27,36,51,0.12);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
    opacity:0;transform:translateY(8px);pointer-events:none;
  }
  .floating-concierge.show{opacity:1;transform:translateY(0);pointer-events:auto}
  .floating-concierge:hover{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
  .floating-concierge .dot{
    width:30px;height:30px;border-radius:50%;border:1px solid currentColor;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-style:italic;font-size:13px;
  }

  /* Concierge drawer */
  .drawer-mask{
    position:fixed;inset:0;background:rgba(20,23,29,0.5);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:80;
  }
  .drawer{
    position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);
    background:var(--ivory);z-index:90;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;
    border-left:1px solid var(--rule);
  }
  .drawer.open{transform:translateX(0)}
  .drawer-mask.open{opacity:1;pointer-events:auto}
  .drawer-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:24px 32px;border-bottom:1px solid var(--rule);
  }
  .drawer-head .title{font-family:var(--serif);font-size:22px}
  .drawer-close{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate)}
  .drawer-close:hover{color:var(--charcoal)}
  .drawer-body{padding:36px 32px;overflow:auto;flex:1}
  .drawer-body p{color:#3a3833}
  .drawer-body .lede{font-size:20px;margin:0 0 28px}
  .drawer-form{display:grid;gap:18px;margin-top:28px}
  .field{display:grid;gap:8px}
  .field label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate)}
  .field input,.field textarea,.field select{
    font:inherit;color:var(--charcoal);
    background:transparent;
    border:0;border-bottom:1px solid var(--rule-strong);
    padding:10px 0;outline:none;width:100%;
    border-radius:0;
  }
  .field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--charcoal)}
  .field textarea{resize:vertical;min-height:90px}
  .drawer-foot{padding:20px 32px;border-top:1px solid var(--rule);font-size:12px;color:var(--slate);display:flex;justify-content:space-between}

  /* ================== Atelier Bag (cart + checkout) ================== */
  .bag-mask{
    position:fixed;inset:0;background:rgba(20,23,29,0.55);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:100;
  }
  .bag-mask.open{opacity:1;pointer-events:auto}
  .bag-drawer{
    position:fixed;top:0;right:0;bottom:0;
    width:min(680px,100vw);
    background:var(--ivory);
    z-index:110;
    transform:translateX(100%);
    transition:transform .55s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;
    border-left:1px solid var(--rule);
    box-shadow:-32px 0 64px -32px rgba(20,23,29,0.18);
  }
  .bag-drawer.open{transform:translateX(0)}

  .bag-head{
    flex:none;padding:22px 36px 0;
    border-bottom:1px solid var(--rule);background:var(--ivory);
  }
  .bag-head-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px}
  .bag-head-title{
    font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:0.04em;
    display:flex;align-items:baseline;gap:14px;
  }
  .bag-head-title .ital{font-style:italic;color:var(--slate);font-size:14px}
  .bag-close{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate);padding:6px 0}
  .bag-close:hover{color:var(--charcoal)}
  .bag-stepper{display:flex;border-top:1px solid var(--rule);margin:0 -36px}
  .bag-step-pill{
    flex:1;padding:14px 18px;border-right:1px solid var(--rule);
    display:flex;flex-direction:column;gap:2px;
    font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--slate);position:relative;cursor:default;
    transition:color .3s ease, background .3s ease;
  }
  .bag-step-pill:last-child{border-right:0}
  .bag-step-pill .num{font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:0;text-transform:none;color:var(--slate)}
  .bag-step-pill.is-active{color:var(--charcoal);background:#fbf8f1}
  .bag-step-pill.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--charcoal)}
  .bag-step-pill.is-done{color:var(--slate);cursor:pointer}
  .bag-step-pill.is-done:hover{color:var(--charcoal)}
  .bag-step-pill.is-done .num::after{content:" ✓";font-family:var(--sans);font-style:normal;font-size:10px;color:var(--charcoal)}
  .bag-step-pill.is-future{opacity:.55}

  .bag-body{flex:1;overflow:auto;padding:32px 36px 28px;scroll-behavior:smooth}
  .bag-step{display:none;animation:bagFade .5s ease}
  .bag-step.is-active{display:block}
  @keyframes bagFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .bag-empty{display:flex;flex-direction:column;align-items:flex-start;padding:52px 0 24px;gap:20px}
  .bag-empty .eyebrow{margin:0}
  .bag-empty h3{font-family:var(--serif);font-weight:300;font-size:38px;line-height:1.1;letter-spacing:-0.01em;margin:0;max-width:18ch}
  .bag-empty p{margin:0;color:#3a3833;max-width:38ch;font-size:15px}

  .bag-section-label{
    font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--slate);
    display:flex;justify-content:space-between;align-items:baseline;
    padding-bottom:12px;border-bottom:1px solid var(--rule);
  }
  .bag-section-label .count{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:13px;letter-spacing:0;text-transform:none}

  .bag-line{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--rule)}
  .bag-line .line-img{aspect-ratio:4/5;width:88px;background:var(--oatmeal);overflow:hidden}
  .bag-line .line-img img{width:100%;height:100%;object-fit:cover;display:block}
  .bag-line .line-info{display:flex;flex-direction:column;gap:8px;min-width:0}
  .bag-line .line-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
  .bag-line .line-name{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;margin:0;letter-spacing:-0.005em}
  .bag-line .line-meta{font-size:12px;color:var(--slate);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .bag-line .line-meta .dot{width:3px;height:3px;background:var(--cashmere);border-radius:50%;display:inline-block}
  .bag-line .line-price{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--charcoal);white-space:nowrap;text-align:right}
  .bag-line .line-price .strike{display:block;font-size:11px;color:var(--slate);text-decoration:line-through;text-decoration-thickness:0.5px;font-family:var(--sans);letter-spacing:0.04em;margin-top:2px}
  .bag-line .line-controls{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:14px}
  .bag-qty{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--rule-strong);padding:6px 14px}
  .bag-qty button{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;line-height:1;color:var(--charcoal)}
  .bag-qty button:hover{color:var(--navy)}
  .bag-qty .v{font-family:var(--serif);font-size:15px;min-width:14px;text-align:center}
  .line-remove{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .25s ease, border-color .25s ease}
  .line-remove:hover{color:var(--charcoal);border-bottom-color:var(--rule-strong)}

  .line-bespoke{margin-top:6px}
  .bespoke-toggle{
    width:100%;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);
    padding:10px 0;border-top:1px dashed var(--rule);
    display:flex;justify-content:space-between;align-items:center;text-align:left;
  }
  .bespoke-toggle:hover{color:var(--charcoal)}
  .bespoke-toggle .ind{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:12px;letter-spacing:0;text-transform:none}
  .bespoke-fields{display:none;padding:6px 0 14px;gap:16px;grid-template-columns:1fr 1fr}
  .bespoke-fields.open{display:grid}
  .bespoke-fields .field label{font-size:10px}
  .bespoke-fields textarea{min-height:60px}
  @media (max-width:560px){.bespoke-fields.open{grid-template-columns:1fr}}

  .bag-incl{margin-top:28px;padding:22px 24px;background:var(--ivory-2);border:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
  .bag-incl-item{display:flex;flex-direction:column;gap:6px}
  .bag-incl-item .label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate);font-weight:500}
  .bag-incl-item .v{font-family:var(--serif);font-size:14px;color:var(--charcoal)}
  @media (max-width:560px){.bag-incl{grid-template-columns:1fr}}

  .bag-form{display:grid;gap:22px;margin-top:6px}
  .bag-form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .bag-form-row.three{grid-template-columns:1.4fr 1fr 1fr}
  @media (max-width:560px){.bag-form-row,.bag-form-row.three{grid-template-columns:1fr}}
  .bag-form .field label{font-size:10px;letter-spacing:0.2em}
  .bag-form .field input,.bag-form .field select,.bag-form .field textarea{
    font-size:15px;padding:8px 0 10px;
    font-family:var(--serif);font-weight:400;letter-spacing:0;color:var(--charcoal);
  }
  .bag-form .field input::placeholder,.bag-form .field textarea::placeholder{color:var(--slate-2);font-style:italic;font-family:var(--serif)}
  .bag-form-section + .bag-form-section{margin-top:8px;padding-top:30px;border-top:1px solid var(--rule)}
  .bag-form-section h4{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 18px;letter-spacing:-0.005em;display:flex;justify-content:space-between;align-items:baseline}
  .bag-form-section h4 .num{font-style:italic;color:var(--slate);font-size:14px}
  .field-opt{color:var(--slate-2);text-transform:none;letter-spacing:0;font-style:italic;font-family:var(--serif);font-size:12px}

  .bag-radios{display:grid;gap:12px;margin-top:6px}
  .bag-radio{
    display:flex;justify-content:space-between;align-items:center;gap:18px;
    padding:18px 22px;border:1px solid var(--rule-strong);cursor:pointer;
    transition:border-color .25s ease, background .25s ease;
    position:relative;
  }
  .bag-radio:hover{border-color:var(--charcoal)}
  .bag-radio input{position:absolute;opacity:0;pointer-events:none}
  .bag-radio.is-on{border-color:var(--charcoal);background:#fbf8f1}
  .bag-radio .info{display:flex;flex-direction:column;gap:4px;min-width:0}
  .bag-radio .name{font-family:var(--serif);font-size:18px}
  .bag-radio .sub{font-size:12px;color:var(--slate)}
  .bag-radio .price{font-family:var(--serif);font-size:16px;color:var(--charcoal);white-space:nowrap}
  .bag-radio .price.free{font-style:italic;color:var(--slate)}

  .bag-card-disclaimer{
    margin-top:24px;padding-top:0;font-size:11.5px;color:var(--slate);line-height:1.55;letter-spacing:0.02em;
    display:flex;gap:12px;align-items:flex-start;
  }
  .bag-card-disclaimer::before{content:"";display:block;width:3px;align-self:stretch;background:var(--rule-strong);flex:none}

  .bag-summary{margin-top:32px;padding:22px 24px;background:#fbf8f1;border:1px solid var(--rule)}
  .bag-summary h5{margin:0 0 14px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--slate);font-weight:500;display:flex;justify-content:space-between;align-items:baseline}
  .bag-summary h5 .ed{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:13px;letter-spacing:0;text-transform:none;cursor:pointer}
  .bag-summary h5 .ed:hover{color:var(--charcoal)}
  .bag-summary-lines{display:grid;gap:10px;margin-bottom:14px}
  .bag-summary-line{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;font-size:13px;color:#3a3833}
  .bag-summary-line .nm{font-family:var(--serif);font-size:15px}
  .bag-summary-line .nm .qty{color:var(--slate);font-style:italic;margin-left:4px}
  .bag-summary-line .nm .clr{display:block;font-size:12px;color:var(--slate);font-family:var(--sans);font-style:normal;margin-top:1px;letter-spacing:0}
  .bag-summary-line .v{font-family:var(--serif);font-size:14px;color:var(--charcoal)}
  .bag-summary-totals{margin-top:8px;padding-top:14px;border-top:1px solid var(--rule);display:grid;gap:8px}
  .bag-summary-totals .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#3a3833}
  .bag-summary-totals .row .v{font-family:var(--serif);font-size:14px}
  .bag-summary-totals .row.complimentary .v{font-style:italic;color:var(--slate)}
  .bag-summary-totals .row.total{margin-top:6px;padding-top:14px;border-top:1px solid var(--charcoal);font-size:15px}
  .bag-summary-totals .row.total .lbl{font-family:var(--serif);font-size:18px;font-weight:500}
  .bag-summary-totals .row.total .v{font-family:var(--serif);font-size:24px;font-weight:400}

  .bag-foot{flex:none;border-top:1px solid var(--rule);background:var(--ivory);padding:18px 36px 22px;display:flex;flex-direction:column;gap:12px}
  .bag-foot-totals{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:6px}
  .bag-foot-totals .lbl{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate)}
  .bag-foot-totals .lbl .sub{display:block;color:var(--slate-2);font-size:10px;margin-top:3px;letter-spacing:0.14em}
  .bag-foot-totals .v{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--charcoal);letter-spacing:-0.005em}
  .bag-foot-cta{display:flex;gap:10px;align-items:center;justify-content:space-between}
  .bag-foot-cta .btn{flex:1;justify-content:center;padding:18px 26px}
  .bag-foot-back{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate);padding:18px 6px}
  .bag-foot-back:hover{color:var(--charcoal)}
  .bag-foot-trust{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);padding-top:10px;border-top:1px dashed var(--rule)}
  .bag-foot-trust span{display:flex;align-items:center;gap:8px}
  .bag-foot-trust span::before{content:"";display:block;width:4px;height:4px;background:var(--cashmere);border-radius:50%}

  .bag-confirm{text-align:center;padding:24px 0 12px;display:flex;flex-direction:column;align-items:center;gap:24px}
  .bag-confirm .seal{
    width:84px;height:84px;border-radius:50%;border:1px solid var(--rule-strong);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-style:italic;font-size:32px;color:var(--charcoal);
    background:#fbf8f1;position:relative;
  }
  .bag-confirm .seal::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--rule)}
  .bag-confirm .conf-eyebrow{margin:0}
  .bag-confirm h3{font-family:var(--serif);font-weight:300;font-size:42px;line-height:1.1;letter-spacing:-0.01em;margin:0;max-width:24ch}
  .bag-confirm h3 em{font-style:italic;color:var(--slate)}
  .bag-confirm .conf-handwriting{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:30px;color:var(--navy);margin:0}
  .bag-confirm-meta{width:100%;margin-top:8px;padding:24px 26px;background:#fbf8f1;border:1px solid var(--rule);display:grid;gap:14px;text-align:left}
  .bag-confirm-meta .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;font-size:13px}
  .bag-confirm-meta .row .lbl{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate)}
  .bag-confirm-meta .row .v{font-family:var(--serif);font-size:16px;color:var(--charcoal);text-align:right;max-width:60%}
  .bag-confirm-meta .row .v.italic{font-style:italic;color:var(--slate)}
  .bag-confirm-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}

  /* nav-bag enhanced */
  .nav-bag{
    display:inline-flex;align-items:center;gap:10px;
    padding:6px 0;color:inherit;position:relative;
  }
  .nav-bag .nav-bag-count{
    font-family:var(--serif);font-style:italic;font-size:13px;
    letter-spacing:0;text-transform:none;color:inherit;opacity:.7;
    border-left:1px solid currentColor;padding-left:10px;
    transition:opacity .3s ease;display:inline-block;
  }
  .nav-bag .nav-bag-count.full{opacity:1}
  .nav-bag .nav-bag-count.bump{animation:bagBump .55s cubic-bezier(.2,.8,.2,1)}
  @keyframes bagBump{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
  .nav-bag:hover{color:inherit}
  .nav-bag:hover .nav-bag-count{opacity:1}

  /* fly-to-bag animation */
  .bag-fly{
    position:fixed;width:64px;height:80px;z-index:200;
    pointer-events:none;
    background:var(--oatmeal) center/cover no-repeat;
    border:1px solid var(--rule);
    transition:transform .85s cubic-bezier(.5,.0,.2,1), opacity .85s ease;
  }

  @media (max-width:680px){
    .bag-drawer{width:100vw;border-left:0}
    .bag-head{padding:18px 22px 0}
    .bag-stepper{margin:0 -22px}
    .bag-step-pill{padding:12px 14px;font-size:10px;letter-spacing:0.12em}
    .bag-body{padding:24px 22px}
    .bag-foot{padding:14px 22px 18px}
    .bag-line{grid-template-columns:72px 1fr;gap:14px}
    .bag-line .line-img{width:72px}
    .bag-foot-totals .v{font-size:24px}
  }

  /* ---------- Footer ---------- */
  footer{background:var(--charcoal);color:var(--ivory);padding:88px 0 36px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(245,241,234,0.14)}
  @media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.foot-top{grid-template-columns:1fr}}
  .foot-mark{font-family:var(--serif);font-size:30px;letter-spacing:0.04em;margin-bottom:18px;display:inline-flex;align-items:center;gap:14px;line-height:1}
  .foot-mark-icon{display:inline-block;width:22px;height:34px;flex-shrink:0;background-color:currentColor;-webkit-mask:url("logo-mark.png") center/contain no-repeat;mask:url("logo-mark.png") center/contain no-repeat}
  .foot-state{color:rgba(245,241,234,0.7);max-width:34ch}
  .foot-col h5{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,241,234,0.55);margin:0 0 18px;font-weight:500}
  .foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
  .foot-col a{color:rgba(245,241,234,0.85);font-size:14px}
  .foot-col a:hover{color:var(--ivory)}
  .foot-bot{display:flex;justify-content:space-between;padding-top:32px;color:rgba(245,241,234,0.5);font-size:12px;flex-wrap:wrap;gap:14px}

  /* ---------- Page loader (editorial title card while hero video buffers) ---------- */
  .page-loader{
    position:fixed;inset:0;z-index:9999;
    background:var(--ivory);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .9s cubic-bezier(.5,0,.2,1), visibility .9s linear;
  }
  .page-loader.is-done{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  .page-loader-inner{
    display:flex;flex-direction:column;align-items:center;
    gap:18px;padding:0 32px;text-align:center;
    opacity:0;transform:translateY(8px);
    animation:os-loader-in 1.4s cubic-bezier(.2,.7,.2,1) 0.15s forwards;
  }
  @keyframes os-loader-in{
    to{opacity:1;transform:none}
  }
  .page-loader-mark{
    display:block;width:32px;height:50px;
    background-color:var(--charcoal);
    -webkit-mask:url("logo-mark.png") center/contain no-repeat;
    mask:url("logo-mark.png") center/contain no-repeat;
    margin-bottom:6px;
  }
  .page-loader-wordmark{
    font-family:var(--serif);font-weight:400;font-size:32px;
    letter-spacing:0.06em;color:var(--charcoal);
    margin:0;line-height:1;
  }
  .page-loader-eyebrow{
    font-family:var(--sans);font-size:10px;
    letter-spacing:0.28em;text-transform:uppercase;
    color:var(--slate);margin:0;
  }
  .page-loader-bar{
    width:160px;height:1px;background:var(--rule);
    position:relative;overflow:hidden;margin-top:18px;
  }
  .page-loader-bar-fill{
    position:absolute;left:0;top:0;bottom:0;
    width:0%;background:var(--charcoal);
    transition:width .8s cubic-bezier(.2,.7,.2,1);
  }

  /* Reveal */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease, transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- Split-text reveal (display titles) ---------- */
  .split-text{display:inline-block}
  .split-text .word{display:inline-block;overflow:hidden;vertical-align:baseline}
  .split-text .word + .word{margin-left:0}
  .split-text .char{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
    filter:blur(6px);
    transition:transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease, filter 1s ease;
    transition-delay:var(--d, 0ms);
  }
  .split-text.in .char{transform:translateY(0);opacity:1;filter:blur(0)}

  /* ---------- Image entry (Collection) ---------- */
  .coll-item .ph{
    overflow:hidden;
    clip-path:inset(100% 0 0 0);
    transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .coll-item.in .ph{clip-path:inset(0)}
  .coll-item .ph img{
    transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
  .coll-item:hover .ph img{transform:scale(1.045)}

  /* ---------- Spotlight panel cross-fade ---------- */
  .spot-panel{display:block;position:absolute;left:0;right:0;top:0;
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .spot-panels-wrap{position:relative}
  .spot-panel.active{opacity:1;transform:none;pointer-events:auto;position:relative}

  /* ---------- Fiber labels stagger ---------- */
  .fiber-annot .fl-1{transition-delay:.10s}
  .fiber-annot .fl-2{transition-delay:.25s}
  .fiber-annot .fl-3{transition-delay:.40s}
  .fiber-annot .fl-4{transition-delay:.55s}
  .fiber-annot .fl-5{transition-delay:.70s}
  /* .ln-dot: per-dot stagger handled inline by JS (line index × line offset
     + dot index × dot offset), since the timing varies per element. */
  .fiber-dot:nth-of-type(1){transition-delay:.20s}
  .fiber-dot:nth-of-type(2){transition-delay:.35s}
  .fiber-dot:nth-of-type(3){transition-delay:.50s}
  .fiber-dot:nth-of-type(4){transition-delay:.65s}
  .fiber-dot:nth-of-type(5){transition-delay:.80s}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease, transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- Fiber (scroll-driven) ---------- */
  .fiber{position:relative;background:var(--charcoal);height:230vh}
  .fiber-sticky{
    position:sticky;top:0;height:100vh;width:100%;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .fiber-stage{
    position:relative;
    width:100vw;
    height:100vh;
    background:#0f0e0c;
    overflow:hidden;
  }
  .fiber-canvas{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    transition:filter .9s ease, opacity .9s ease;
  }
  .fiber-annot.show ~ .fiber-canvas, .fiber-stage.dim .fiber-canvas{
    filter:brightness(0.62) contrast(1.05);
  }
  .fiber-vignette{
    position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%),
      linear-gradient(180deg, rgba(15,14,12,0.55) 0%, transparent 14%, transparent 86%, rgba(15,14,12,0.55) 100%);
  }
  .fiber-mark{
    position:fixed;left:50%;top:50%;
    width:clamp(72px,7vw,108px);
    aspect-ratio:192/300;
    background-color:rgba(245,241,234,0);
    -webkit-mask:url("logo-mark.png") center/contain no-repeat;
    mask:url("logo-mark.png") center/contain no-repeat;
    opacity:0;
    transform:translate(-50%, calc(-50% - var(--push-y, 0px))) scale(var(--mark-scale, 1));
    transition:opacity .9s ease, background-color .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .8s ease;
    z-index:9;
    pointer-events:none;
    filter:drop-shadow(0 2px 24px rgba(0,0,0,0.45));
  }
  .fiber-mark.dim{
    opacity:0.78;
    background-color:rgba(245,241,234,0.88);
  }
  .fiber-mark.dissolve{
    opacity:1;
    background-color:#343D6B;
    --mark-scale:1.28;
    filter:drop-shadow(0 4px 28px rgba(52,61,107,0.22));
  }
  .fiber-mark.pushing{
    transition:opacity .9s ease, background-color .9s ease, filter .8s ease;
  }
  .fiber-eyebrow{
    position:absolute;left:0;right:0;top:calc(72px + 2vh);text-align:center;
    color:rgba(245,241,234,0.7);
    font-size:11px;letter-spacing:0.32em;text-transform:uppercase;font-weight:500;
    z-index:7;
    transition:opacity .8s ease;
    text-shadow:0 1px 12px rgba(0,0,0,0.55);
  }
  .fiber-title{
    position:absolute;left:0;right:0;top:calc(72px + 7vh);
    text-align:center;color:var(--ivory);
    font-family:var(--serif);font-weight:300;font-size:clamp(44px,6vw,88px);
    line-height:1;letter-spacing:-0.01em;
    z-index:7;pointer-events:none;
    transition:opacity .8s ease, transform .8s ease;
    text-shadow:0 2px 30px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  }
  .fiber-scroll{color:rgba(245,241,234,0.7);bottom:32px;z-index:7;text-shadow:0 1px 12px rgba(0,0,0,0.55);transition:opacity .6s ease}
  .fiber-title em{font-style:italic;color:var(--cashmere)}

  /* Annotations overlay (SVG + labels) */
  .fiber-annot{
    position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;opacity:0;transition:opacity .9s ease;
    z-index:6;
  }
  .fiber-annot.show{opacity:1}
  .fiber-annot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  /* Connector dots — HTML spans positioned absolutely along the conceptual
     path from label edge to dot anchor. Each one has its own opacity
     transition with staggered delay set inline by JS, so dots truly form
     in sequence (from the label outward to the dot anchor) instead of the
     SVG dasharray illusion which interpolates non-linearly. */
  .fiber-annot .ln-dot{
    position:absolute;
    width:1.5px;height:1.5px;border-radius:50%;
    background:rgba(245,241,234,0.7);
    transform:translate(-50%, -50%);
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
  }
  .fiber-annot.show .ln-dot{opacity:1}
  .fiber-dots{position:absolute;inset:0;pointer-events:none}
  .fiber-annot .dot{fill:var(--ivory)}
  .fiber-annot .ring{fill:none;stroke:rgba(245,241,234,0.4);stroke-width:1}
  .fiber-dot{
    position:absolute;width:18px;height:18px;border-radius:50%;
    border:1px solid rgba(245,241,234,0.45);
    transform:translate(-50%,-50%);
    opacity:0;transition:opacity .9s ease .1s;
  }
  .fiber-dot::after{
    content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
    border-radius:50%;background:var(--ivory);transform:translate(-50%,-50%);
  }
  .fiber-annot.show .fiber-dot{opacity:1}

  .fiber-label{
    position:absolute;color:var(--ivory);
    max-width:240px;
    opacity:0;transform:translateY(8px);
    transition:opacity .8s ease .2s, transform .8s ease .2s;
    text-shadow:0 1px 14px rgba(0,0,0,0.65), 0 0 2px rgba(0,0,0,0.45);
  }
  .fiber-annot.show .fiber-label{opacity:1;transform:none}
  .fiber-label .num{
    font-family:var(--serif);font-style:italic;font-size:13px;
    color:var(--cashmere);margin-bottom:4px;
  }
  .fiber-label .val{
    font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.15;
    letter-spacing:-0.005em;margin-bottom:8px;
  }
  .fiber-label .desc{
    font-size:11.5px;letter-spacing:0.04em;line-height:1.55;
    color:rgba(245,241,234,0.88);
  }
  /* label positions — anchored to the full-bleed stage with safe margins */
  .fl-1{left:5vw;top:24%;text-align:left;max-width:240px}
  .fl-2{left:5vw;top:62%;text-align:left;max-width:240px}
  .fl-3{right:5vw;top:24%;text-align:right;max-width:240px}
  .fl-4{right:5vw;top:46%;text-align:right;max-width:240px}
  .fl-5{right:5vw;top:70%;text-align:right;max-width:240px}
  @media (max-width:1100px){
    .fiber-label{max-width:200px}
    .fiber-label .val{font-size:20px}
  }
  /* Mobile: 5 labels in two columns, kept inside the safe edges of the video */
  @media (max-width:720px){
    .fiber-stage{height:100vh}
    .fiber-title{top:calc(64px + 4vh);font-size:clamp(36px,9vw,52px)}
    .fiber-eyebrow{top:calc(64px + 1vh)}
    .fiber-label{
      max-width:38vw;font-size:10px;
    }
    .fiber-label .val{font-size:14px;margin-bottom:4px}
    .fiber-label .desc{font-size:10px;line-height:1.45;color:rgba(245,241,234,0.85)}
    .fl-1{left:4vw;top:30%}
    .fl-2{left:4vw;top:64%}
    .fl-3{right:4vw;top:30%}
    .fl-4{right:4vw;top:48%}
    .fl-5{right:4vw;top:80%;max-width:80vw;text-align:center;left:10vw;right:10vw}
  }

  /* Material reveal — cashmere texture expands and dissolves into the Collection */
  .fiber-mask{
    position:absolute;inset:0;
    background:var(--ivory);
    opacity:0;
    z-index:8;
    transition:none;
    pointer-events:none;
  }
  .fiber-mask::before{
    content:"";position:absolute;inset:0;
    background-image:var(--fiber-poster, none);
    background-size:cover;background-position:center;
    filter:blur(0px) saturate(0.4) brightness(1.18);
    mix-blend-mode:lighten;
    opacity:0;
  }
  .fiber-stage.dissolving .fiber-canvas{
    transition:filter .5s ease, transform .8s ease, opacity .6s ease;
  }

  /* ════════════════════════════════════════════════════
     MOBILE NATIVE — viewports ≤ 768px
     No tocar nada arriba de este bloque.
     Patch entrega: 2026-05-10
     ════════════════════════════════════════════════════ */
  .mobile-only{display:none}

  @media (max-width: 768px) {
    /* Reveal mobile-only elements (hamburger toggle, mobile sheet, fiber cards) */
    .mobile-only{display:flex}

    /* Page loader scales down on phones */
    .page-loader-mark{width:26px;height:40px}
    .page-loader-wordmark{font-size:24px}
    .page-loader-eyebrow{font-size:9px;letter-spacing:0.24em}
    .page-loader-bar{width:140px}

    /* ───── 0a. Containment guard ─────
       iOS Safari expands its layout viewport to fit the natural width of any
       wide element it doesn't recognise as internally-scrollable, even when
       overflow-x:auto is set on it. This rule pins html/body to the visual
       viewport and clips any leak. `clip` (not `hidden`) so we don't promote
       html/body to a scroll container — that would break sticky on hero+fiber. */
    html, body{
      width:100%;
      max-width:100vw;
      overflow-x:clip;
    }
    .brandstrip-inner,
    .spot-tabs,
    .spot-thumbs,
    .testi-grid,
    .bag-stepper{
      max-width:100vw;
    }
    /* Defensive text wrap for display headings if a glyph rendering quirk
       makes a line slightly wider than the column. */
    .hero h1,
    .hero-sub,
    .display,
    .section-head h1,
    .section-head h2,
    .spot-info h1,
    .spot-info h2{
      overflow-wrap:break-word;
      word-wrap:break-word;
    }

    /* ───── 0. Section rhythm ───── */
    .section{padding:80px 0}
    .section-tight{padding:56px 0}
    .section-head{margin-bottom:40px;gap:20px}
    .section-head h1,
    .section-head h2{font-size:36px;line-height:1.1}
    .section-head p{font-size:14px;line-height:1.55}

    /* ───── 1. Nav + hamburger menu ───── */
    .nav{padding:14px 22px}
    .nav.is-solid{padding:10px 22px}
    .wordmark{font-size:18px;gap:10px}
    .wordmark .wordmark-mark{width:18px;height:28px}
    .nav-bag{font-size:11px;letter-spacing:0.14em;gap:8px}
    .nav-bag .nav-bag-count{font-size:12px;padding-left:8px}

    .nav-mobile-toggle{
      width:44px;height:44px;
      display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
      color:inherit;margin:-8px -10px -8px 0;
    }
    .nav-mobile-toggle span{
      display:block;width:18px;height:1px;background:currentColor;
      transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
    }
    .nav-mobile-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .nav-mobile-toggle.is-open span:nth-child(2){opacity:0}
    .nav-mobile-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

    .nav-mobile-sheet{
      position:fixed;top:0;left:0;right:0;
      flex-direction:column;
      background:var(--ivory);color:var(--charcoal);
      padding:80px 22px 28px;
      max-height:70vh;
      border-bottom:1px solid var(--rule);
      z-index:45;
      transform:translateY(-100%);opacity:0;pointer-events:none;
      transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
      overflow-y:auto;
    }
    .nav-mobile-sheet.open{transform:translateY(0);opacity:1;pointer-events:auto}
    .nav-mobile-sheet a{
      display:flex;align-items:center;height:64px;
      border-bottom:1px solid var(--rule);
      font-family:var(--serif);font-weight:300;font-style:italic;font-size:22px;
      color:var(--charcoal);letter-spacing:0;
      transition:padding .35s cubic-bezier(.2,.8,.2,1), color .25s ease;
    }
    .nav-mobile-sheet a:first-child{border-top:1px solid var(--rule)}
    .nav-mobile-sheet a:active{padding-left:8px;color:var(--navy)}
    body.nav-sheet-open{overflow:hidden}

    /* ───── 2. Hero — full-bg video, every element overlays it ─────
       Hero is one immersive zone, not split. Video covers the full sticky
       (100vh), absolute. All hero content (eyebrow, h1, sub, CTAs, marquee,
       scroll-ind) layered on top via z-index. Marquee is anchored absolutely
       at the bottom (above scroll-ind), not floating in the middle. Goat
       framing handled by `object-position:100% 50%` (max right) — within the
       limits of full-cover scaling, that's the rightmost band of the source. */
    .hero{height:160vh;min-height:680px}
    .hero-sticky{display:block} /* revert prior fixes' flex column to original block layout */
    .hero-media{
      position:absolute;inset:0;        /* full background */
      flex:auto;width:auto;height:auto; /* explicitly undo any prior flex/clamp */
    }
    .hero-video{object-position:100% 50%} /* right-aligned: shows rightmost band of source */

    /* Brand strip — pinned to the very bottom of the hero, overlaid on the video.
       JS drives scrollLeft + tap-to-pause. The mobile scroll indicator is hidden
       below (the marquee itself anchors the visual bottom of the hero). */
    .hero-brandstrip{
      position:absolute;left:0;right:0;
      bottom:0;                     /* literal bottom of the hero */
      z-index:3;
      background:rgba(20,23,29,0.78); /* semi-opaque so video shows through subtly */
      backdrop-filter:blur(6px) saturate(1.1);
      -webkit-backdrop-filter:blur(6px) saturate(1.1);
      border-top:1px solid rgba(245,241,234,0.12);
      border-bottom:1px solid rgba(245,241,234,0.12);
      padding:14px 0;
      overflow-x:auto;overflow-y:hidden;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
      color:rgba(245,241,234,0.7);
      font-family:var(--sans);
      font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
    }
    .hero-brandstrip::-webkit-scrollbar{display:none}
    .hero-brandstrip-track{
      display:flex;align-items:center;gap:48px;
      width:max-content;padding:0 22px;margin:0;list-style:none;
    }
    .hero-brandstrip-track > li{
      display:flex;align-items:center;gap:14px;flex:none;white-space:nowrap;
    }
    .hero-brandstrip-track > li::before{
      content:"";display:block;width:4px;height:4px;
      background:var(--cashmere);border-radius:50%;
    }
    /* Hide the desktop brand strip — replaced by the in-hero marquee on mobile. */
    .brandstrip{display:none}

    /* Hero content area: covers the full sticky, content centred vertically over
       the video. Bottom padding leaves room for the absolute marquee + scroll-ind. */
    .hero-inner{
      flex:auto;height:100%;
      padding:24px 22px 140px;      /* bottom: marquee (46) + gap (24) + scroll-ind (54) + buffer (16) */
      justify-content:center;
    }
    /* Subtle text-shadows for hero copy — paired (diffuse atmospheric + crisp edge),
       same pattern as the desktop fiber-title. Only kicks in on mobile where the
       hero gradient overlay can't reach all content positions on bright frames. */
    .hero-eyebrow{
      font-size:11px;letter-spacing:0.22em;margin-bottom:14px;
      text-shadow:0 1px 12px rgba(0,0,0,0.45);
    }
    .hero-eyebrow::before{width:24px}
    .hero h1{
      font-size:42px;line-height:1.05;letter-spacing:-0.01em;max-width:none;
      text-shadow:0 2px 24px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.32);
    }
    .hero-sub{
      font-size:15px;line-height:1.55;max-width:32ch;margin-top:16px;
      text-shadow:0 1px 10px rgba(0,0,0,0.4);
    }
    .hero-ctas{flex-direction:column;flex-wrap:nowrap;gap:10px;margin-top:24px;width:100%;max-width:320px}
    .hero-ctas .btn{height:50px;width:100%;justify-content:space-between;padding:0 24px;font-size:12px;letter-spacing:0.18em}
    .veil{opacity:.35}
    .veil.v2{opacity:.25}
    .veil.v3{opacity:.22}
    /* Scroll indicator stacked above the marquee (which is at bottom:0).
       Marquee height ~46 + 24px gap → scroll-ind anchored at bottom:70. */
    .scroll-ind{font-size:10px;letter-spacing:0.28em;bottom:70px;gap:10px}
    .scroll-ind .line{height:30px}

    /* ───── 3. Brand strip — horizontal scroll-snap ───── */
    .brandstrip{padding:16px 0}
    .brandstrip-inner{
      flex-wrap:nowrap;justify-content:flex-start;
      overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      gap:24px;padding:0 22px;
      scrollbar-width:none;
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
      mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
    .brandstrip-inner::-webkit-scrollbar{display:none}
    .brandstrip-inner span{
      flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;
      font-size:11px;letter-spacing:0.2em;
    }

    /* ───── 4. Fiber section — full-screen sticky video, sequential centred cards ─────
       Desktop architecture (video covers 100vh of the sticky, content overlaid via
       z-index) preserved on mobile. Diff from desktop: instead of 5 simultaneous
       corner labels, mobile shows ONE card at a time, centred over the video. JS
       sequencer toggles `.is-active` from scroll progress; CSS handles the fade. */
    .fiber{height:240vh;min-height:auto}     /* slight extension for reading time */
    .fiber-sticky{
      display:block;padding:0;
      /* position:sticky;top:0;height:100vh;width:100%;overflow:hidden — kept from desktop */
    }
    .fiber-eyebrow{
      position:absolute;left:0;right:0;
      top:calc(56px + 2vh);
      text-align:center;padding:0 22px;
      font-size:11px;letter-spacing:0.32em;text-transform:uppercase;font-weight:500;
      color:rgba(245,241,234,0.7);
      z-index:7;
      text-shadow:0 1px 12px rgba(0,0,0,0.55);
    }
    .fiber-title{
      position:absolute;left:0;right:0;
      top:calc(56px + 5vh);
      text-align:center;padding:0 22px;
      font-size:36px;line-height:1.1;letter-spacing:-0.01em;
      color:var(--ivory);
      z-index:7;pointer-events:none;
      text-shadow:0 2px 26px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
    }
    /* Force eyebrow + title visible (override JS-driven fade from desktop) */
    .fiber-title,
    .fiber-eyebrow{
      opacity:1 !important;
      transform:none !important;
    }
    .fiber-stage{
      position:absolute;inset:0;
      flex:auto;width:auto;height:auto;
      aspect-ratio:auto;background:#0f0e0c;
    }
    .fiber-canvas{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      /* No more !important overrides — let fiberScroll's dissolve at p>0.9
         apply filter(blur), transform(scale) and opacity transitions so the
         section closes with the editorial dissolve to ivory + mark zoom. */
    }
    /* Vignette ON for legibility against any video frame */
    .fiber-vignette{display:block}
    /* Hide desktop corner annotations only — mark + mask are re-enabled below
       so the desktop closing choreography (logo dissolve into ivory wash, then
       sticky push-up against the Collection title) plays on mobile too. */
    .fiber-annot{display:none !important}
    .fiber-scroll{display:none}
    /* Mark: small editorial size on mobile (vs 72-108px desktop). Existing
       fiberScroll JS handles the .dim → .dissolve → .pushing class transitions
       and the --push-y / --mark-scale variables — no JS changes needed. */
    .fiber-mark{width:clamp(56px, 14vw, 72px)}

    /* Cards container — grid aligned to the bottom third of the sticky viewport.
       Lets the video macro breathe in the upper 2/3 (visual hero), while keeping
       the card stack readable in the lower zone. 130px bottom padding clears the
       floating Concierge button (which sits at bottom:22 + ~44px tall).
       Fades out when .fiber-stage gets the .dissolving class (p > 0.9), so the
       cards exit just as the ivory wash + mark zoom take over. */
    .fiber-cards-mobile{
      position:absolute;inset:0;
      padding:0 22px 130px 22px;
      display:grid;
      place-items:end stretch;
      pointer-events:none;
      transition:opacity .5s cubic-bezier(.2,.7,.2,1);
    }
    .fiber-stage.dissolving ~ .fiber-cards-mobile{
      opacity:0;
    }
    /* Single static shell — never animates opacity, so backdrop-filter on its
       descendant placas is never moved into a compositor-isolated layer. Card
       changes are driven by JS updating the text slots inside, with a 0.28s
       opacity crossfade on the text elements only (no placa animation). */
    .fiber-card-mobile{
      grid-area:1/1;
      width:100%;
      text-align:center;color:var(--ivory);
      background:transparent;border:0;padding:0;
    }

    /* Numeral — hidden on mobile. The section eyebrow ('I · THE FIBER') already
       establishes chapter context, and three of the five card titles start with
       digits ('15.5 microns', '≥ 36 mm staple', '~150 g per goat') where a
       prefixed Roman numeral creates a misread risk (I·15.5 reads as I.15.5).
       The HTML markup stays so the WAA JS finds it transparently; the rule
       just suppresses the visual presence. */
    .fiber-card-mobile .num{display:none}

    /* Two placas — glass-with-darkness, charcoal at 25% + blur 40px. Permanent
       in the DOM and at constant opacity — the compositor never has reason to
       isolate them, so backdrop-filter renders continuously against the video. */
    .fiber-card-mobile .row,
    .fiber-card-mobile .desc-frame{
      display:block;
      background:rgba(20,23,29,0.20);
      backdrop-filter:blur(40px) brightness(1.15);
      -webkit-backdrop-filter:blur(40px) brightness(1.15);
      border-top:1px solid rgba(245,241,234,0.14);
      border-bottom:1px solid rgba(245,241,234,0.14);
      border-left:0;border-right:0;
      max-width:none;
    }

    /* Title placa — narrow (fit-content + auto margins) so the fiber macro
       breathes on either side; same 22px×24px padding as the body placa for
       perfect vertical rhythm. Reads as a contained editorial headline tag. */
    .fiber-card-mobile .row{
      display:flex;
      align-items:baseline;
      justify-content:center;
      gap:0;
      padding:22px 24px;
      margin:0 auto;
      width:fit-content;
      max-width:100%;
    }
    .fiber-card-mobile .val{
      display:block;
      font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.1;
      letter-spacing:-0.005em;color:var(--ivory);
      text-align:center;
      transition:opacity .28s cubic-bezier(.2,.7,.2,1);
    }

    /* Body placa frame — tighter padding */
    .fiber-card-mobile .desc-frame{
      padding:22px 24px;
      margin:12px 0 0;
    }
    .fiber-card-mobile .desc{
      display:block;
      font-size:14px;line-height:1.6;
      color:rgba(245,241,234,0.94);
      text-align:center;
      max-height:none;overflow:visible;
      transition:opacity .28s cubic-bezier(.2,.7,.2,1);
    }

    /* Card transition — text fades to 0 while JS swaps content, then fades back
       to 1. The placas never participate in the opacity animation. */
    .fiber-card-mobile.is-fading .num,
    .fiber-card-mobile.is-fading .val,
    .fiber-card-mobile.is-fading .desc{
      opacity:0;
    }

    /* ───── 5. Collection grid ───── */
    .coll-grid{gap:64px}
    .coll-item .ph{aspect-ratio:4/5;margin-bottom:20px}
    .coll-num{font-size:13px}
    .coll-meta .label{font-size:11px;letter-spacing:0.2em}
    .coll-item h3{font-size:30px;margin:0 0 10px}
    .coll-item p{font-size:14px;max-width:30ch;margin-bottom:18px}
    .coll-item .link-quiet{font-size:11px;letter-spacing:0.2em}

    /* ───── 6. Spotlight ───── */
    .spot-tabs{
      flex-direction:row;
      overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
      top:60px;margin-bottom:36px;
      /* Edge fade on the right hints "more content beyond" without explicit arrows */
      -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
      mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .spot-tabs::-webkit-scrollbar{display:none}
    .spot-tab{
      flex:0 0 auto;min-width:140px;
      border-right:1px solid var(--rule);border-bottom:0;
      padding:14px 18px;scroll-snap-align:start;
    }
    .spot-tab:last-child{border-right:0}
    /* Nuclear overflow guard for Spotlight — every container clipped + width-locked.
       Use a single descendant selector so it cannot be beaten by media-query order
       (e.g. the desktop @1080 rules cascading after). */
    #spotlight,
    #spotlight .wrap,
    #spotlight .spot-panels-wrap,
    #spotlight .spot-panel,
    #spotlight .spot,
    #spotlight .spot-gallery,
    #spotlight .spot-info,
    #spotlight aside.spot-info,
    /* The generated piece pages reuse this panel outside #spotlight, and this
       guard is what keeps it from overflowing on a narrow screen. Scoped by
       class as well as by id so both carry it. */
    .spot-scope,
    .spot-scope .wrap,
    .spot-scope .spot-panels-wrap,
    .spot-scope .spot-panel,
    .spot-scope .spot,
    .spot-scope .spot-gallery,
    .spot-scope .spot-info,
    .spot-scope aside.spot-info{
      max-width:100% !important;
      min-width:0 !important;
      overflow-x:clip;
      box-sizing:border-box;
    }
    /* Anything inside spot-info that could carry intrinsic width (long words, no-wrap inline) */
    #spotlight .spot-info *,
    .spot-scope .spot-info *{
      max-width:100%;
      min-width:0;
    }
    .spot-panel{width:100%;box-sizing:border-box}
    .spot{grid-template-columns:minmax(0, 1fr);gap:32px;width:100%}
    .spot > *{min-width:0;max-width:100%;width:100%}
    .spot-info > *{min-width:0;max-width:100%}
    /* Inline 42ch max-width on <p> needs override on tiny viewports */
    .spot-info p[style*="42ch"]{max-width:100% !important}
    .spot-info h2{font-size:32px;line-height:1.1;margin:0 0 16px;overflow-wrap:break-word;word-break:break-word}
    .spot-info .body-lg{font-size:15px;line-height:1.55;max-width:100%;overflow-wrap:break-word;word-break:break-word}
    .spot-info p,
    .spot-info .small,
    .spot-info .label,
    .spot-info .picked{overflow-wrap:break-word;word-break:break-word;max-width:100%}
    .spot-colors,
    .spot-colors .label,
    .spot-certs{min-width:0;max-width:100%;flex-wrap:wrap}
    .spot-colors .label{align-items:flex-start;gap:8px}
    .spot-thumbs{
      grid-template-columns:none;
      display:flex;
      overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
      gap:12px;
    }
    .spot-thumbs::-webkit-scrollbar{display:none}
    .spot-thumb{
      flex:0 0 64px;width:64px;height:64px;
      scroll-snap-align:start;aspect-ratio:1/1;
    }
    .swatch{width:36px;height:36px}
    .spot-colors .label{flex-direction:row;flex-wrap:wrap;gap:6px}
    .spot-certs{gap:18px}
    .spot-certs img{height:28px}
    .spot-price{flex-wrap:wrap;align-items:baseline;gap:12px;margin-top:24px;padding-bottom:18px}
    .spot-price .price{font-size:28px}
    .spot-price .strike{font-size:14px}
    .spot-price .save{margin-left:0;width:100%;font-size:11px;letter-spacing:0.16em}
    .spot-cta-row{flex-direction:column;align-items:stretch;gap:14px;margin:24px 0 30px}
    .spot-cta-row .btn{
      height:56px;width:100%;justify-content:center;
      padding:0 24px;font-size:13px;letter-spacing:0.18em;
    }
    .spot-cta-row .link-quiet{justify-content:center;text-align:center;align-self:center}
    .acc,
    .acc-item,
    .acc-body,
    .acc-body > div{min-width:0;max-width:100%;overflow-x:clip}
    .acc-head{padding:18px 0;font-size:11px;letter-spacing:0.16em;min-height:56px;width:100%}
    .acc-body dl{font-size:13px;grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);gap:6px 16px;width:100%;max-width:100%}
    .acc-body dt,
    .acc-body dd{min-width:0;max-width:100%;overflow-wrap:break-word;word-break:break-word;hyphens:auto}
    .spot-price{min-width:0;max-width:100%}
    .spot-price .price{overflow-wrap:break-word}
    .spot-cta-row{min-width:0;max-width:100%}
    .spot-cta-row .btn{
      min-width:0;max-width:100%;
      white-space:normal;text-align:center;
      overflow-wrap:break-word;
    }

    /* ───── 7. Honest Price ───── */
    .honest h2{font-size:42px;margin-bottom:20px}
    .honest .lede{font-size:18px;margin-bottom:20px}
    .honest blockquote{font-size:18px;line-height:1.45;margin-top:24px;padding-top:20px}
    .compare{padding:24px 22px}
    .compare-row{padding:14px 0;font-size:13px;align-items:baseline}
    .compare-row .name{font-size:13px}
    .compare-row .val{font-size:18px;font-feature-settings:"tnum" on, "lnum" on}
    .compare .total{padding-top:18px}
    .compare .total .name{font-size:16px}
    .compare .total .val{font-size:26px;font-feature-settings:"tnum" on, "lnum" on}
    .compare .retail{margin-top:18px;padding-top:14px}
    .compare .retail .val{font-size:16px;font-feature-settings:"tnum" on, "lnum" on}
    .savings{padding:12px 16px;font-size:11px;letter-spacing:0.12em}
    .savings strong{font-size:16px;font-feature-settings:"tnum" on, "lnum" on}
    .nots{margin-top:24px}
    .nots li{padding:10px 0;font-size:13px}

    /* ───── 8. Origin ───── */
    .origin-hero .ph{aspect-ratio:4/3;margin-bottom:48px}
    .origin-grid{
      position:relative;gap:36px;padding-left:32px;
    }
    .origin-grid::before{
      content:"";position:absolute;left:8px;top:8px;bottom:8px;
      width:1px;background:var(--rule-strong);
    }
    .step{position:relative}
    .step::before{
      content:"";position:absolute;left:-29px;top:30px;
      width:8px;height:8px;border-radius:50%;background:var(--charcoal);
    }
    .step .step-num{font-size:32px;padding-top:14px;margin-bottom:18px}
    .step h4{font-size:22px;margin:0 0 8px}
    .step p{font-size:14px;max-width:none;line-height:1.55}
    .badges{margin-top:64px;padding-top:36px;gap:24px}
    .badge{align-items:center;text-align:center;gap:10px}
    .badge .seal{width:120px;height:72px;align-self:center;justify-content:center;margin-bottom:6px}
    .badge .name{font-size:11px;letter-spacing:0.14em;text-align:center;width:100%}
    .badge .sub{font-size:11px;text-align:center;width:100%}

    /* ───── 9. Packaging ───── */
    .pack h2{font-size:36px;margin:0 0 20px}
    .pack-grid{gap:36px}
    .pack-grid > .reveal:first-child{order:2}
    .pack-images{order:1;grid-template-columns:1fr;gap:10px}
    .pack-images .pi-1{aspect-ratio:4/3;grid-column:auto}
    .pack-images .pi-2{aspect-ratio:4/3}
    .pack-images .pi-3{aspect-ratio:4/3}
    .pack-list{margin-top:24px}
    .pack-list li{padding:14px 0;font-size:13px}

    /* ───── 10. Testimonials — editorial vertical stack ─────
       Each testimonial gets its own "page": full width, generous vertical
       padding, hairline divider between entries. No carousel, no card frames
       — the type and image carry the moment, dividers structure the rhythm.
       Brunello / Loro Piana pattern for editorial prose on mobile. */
    .testi-grid{
      grid-template-columns:1fr;
      display:grid;
      gap:0;
      overflow-x:visible;
      scroll-snap-type:none;
      padding:0;margin:0;
    }
    .testi-grid::-webkit-scrollbar{display:revert}
    .testi{
      flex:auto;width:auto;max-width:none;
      scroll-snap-align:none;
      padding:48px 0;
      border:0;border-top:1px solid var(--rule);
      background:transparent;margin:0;
    }
    .testi:first-child{border-top:0;padding-top:0}
    .testi .ph{aspect-ratio:4/5;margin-bottom:24px} /* portrait — matches source 1086×1448 (3/4 ≈ 4/5) */
    .testi blockquote{
      font-size:22px;line-height:1.4;margin:0 0 22px;
      font-style:italic;font-family:var(--serif);font-weight:300;
      letter-spacing:-0.005em;
    }
    .testi blockquote::before,.testi blockquote::after{font-size:36px}
    .testi .who{font-size:12px;letter-spacing:0.04em}

    /* ───── 11. Care + Finale ───── */
    .care-grid{gap:14px;grid-template-columns:1fr}
    .care-card{padding:24px 22px;min-height:auto;gap:14px}
    .care-card .num{font-size:18px}
    .care-card .ttl{font-size:18px}
    .concierge-cta{padding:80px 0}
    .concierge-cta h2{font-size:42px;margin:18px 0 20px}
    .concierge-cta p{font-size:15px;line-height:1.55}
    .concierge-cta .ctas{
      flex-direction:column;align-items:stretch;
      max-width:280px;margin:36px auto 0;gap:12px;
    }
    .concierge-cta .ctas .btn{
      height:54px;width:100%;justify-content:center;
      padding:0 24px;font-size:13px;letter-spacing:0.18em;
    }

    /* ───── 12. Footer ─────
       Editorial 2-col arrangement on mobile, all content left-aligned to
       match the hero column rhythm:
       Row 1 — Brand block (spans both columns)
       Row 2 — House (left) + Service (right) → parallel atelier menus
       Row 3 — Quiet Letter (spans both, separated by a hairline divider) */
    footer{padding:64px 0 28px}
    .foot-top{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:36px 24px;
      text-align:left;padding-bottom:40px;
    }
    .foot-top > div{display:flex;flex-direction:column;align-items:flex-start}
    .foot-top > div:first-child{grid-column:1 / -1}     /* Brand spans both cols */
    .foot-top > div:last-child{
      grid-column:1 / -1;                                 /* Quiet Letter spans both */
      border-top:1px solid rgba(245,241,234,0.14);       /* hairline divider */
      padding-top:30px;
      margin-top:4px;
    }
    .foot-mark{margin:0 0 12px;font-size:24px;justify-content:flex-start}
    .foot-state{margin:0;text-align:left;max-width:36ch}
    .foot-col h5{margin-bottom:14px;text-align:left}
    .foot-col ul{align-items:stretch;text-align:left}
    .foot-col li form{
      width:100%;flex-direction:column !important;align-items:stretch !important;
      border:0 !important;padding:0 !important;gap:12px;
    }
    .foot-col li form input{
      width:100%;height:54px;font-size:16px;padding:0 16px;
      border:1px solid rgba(245,241,234,0.3) !important;background:transparent;
    }
    .foot-col li form button{
      width:100%;height:54px;
      background:var(--ivory) !important;color:var(--charcoal) !important;
      border:0 !important;
    }
    .foot-bot{
      flex-direction:column;justify-content:flex-start;align-items:flex-start;
      gap:8px;font-size:11px;text-align:left;
    }

    /* ───── 13. Atelier Bag drawer ───── */
    .bag-drawer{width:100vw;border-left:0}
    .bag-head{padding:18px 22px 0}
    .bag-head-title{font-size:18px;letter-spacing:0.04em}
    .bag-head-title .ital{display:none}
    .bag-close{
      font-size:11px;padding:10px 0;
      min-width:44px;min-height:44px;
      display:flex;align-items:center;justify-content:flex-end;
    }
    .bag-stepper{
      flex-wrap:nowrap;overflow-x:auto;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
      margin:0 -22px;
    }
    .bag-stepper::-webkit-scrollbar{display:none}
    .bag-step-pill{
      flex:0 0 auto;padding:10px 14px;
      font-size:10px;letter-spacing:0.12em;gap:1px;min-width:88px;
    }
    .bag-step-pill .num{font-size:12px}
    .bag-body{padding:22px 22px 24px}
    .bag-line{grid-template-columns:72px 1fr;gap:14px;padding:18px 0}
    .bag-line .line-img{width:72px}
    .bag-line .line-name{font-size:18px}
    .bag-line .line-price{font-size:16px;font-feature-settings:"tnum" on, "lnum" on}
    .bag-foot{padding:14px 22px 18px;gap:10px}
    .bag-foot-totals .v{font-size:24px;font-feature-settings:"tnum" on, "lnum" on}
    .bag-foot-cta{flex-direction:column-reverse;align-items:stretch;gap:8px}
    .bag-foot-cta .btn{padding:16px 22px;font-size:12px;height:54px}
    .bag-foot-back{padding:10px 0;align-self:center}
    .bag-form-row,.bag-form-row.three{grid-template-columns:1fr;gap:18px}
    .bag-form .field input,.bag-form .field select,.bag-form .field textarea{
      font-size:16px;padding:12px 0 14px;
    }
    .bag-form-section h4{font-size:20px;margin:0 0 14px}
    .bag-radio{padding:14px 18px;gap:14px}
    .bag-radio .name{font-size:16px}
    .bag-radio .sub{font-size:11px}
    .bag-summary{padding:18px;margin-top:24px}
    .bag-summary-line .v,.bag-summary-totals .row .v{font-feature-settings:"tnum" on, "lnum" on}
    #stripe-card-element{padding:12px 14px;min-height:50px}
    .bag-empty{padding:40px 0 16px}
    .bag-empty h3{font-size:30px}
    .bag-empty p{font-size:14px}
    .bag-confirm h3{font-size:32px}
    .bag-confirm .conf-handwriting{font-size:24px}
    .bag-confirm-meta{padding:20px 22px}
    .bag-confirm-meta .row .v{font-size:14px}
    .bag-incl{grid-template-columns:1fr;gap:14px;padding:18px}

    /* ───── 14. Concierge drawer ───── */
    .drawer{width:100vw;border-left:0}
    .drawer-head{padding:18px 22px}
    .drawer-head .title{font-size:18px}
    .drawer-close{
      padding:10px 0;
      min-height:44px;min-width:44px;
      display:flex;align-items:center;justify-content:flex-end;
    }
    .drawer-body{padding:24px 22px}
    .drawer-body .lede{font-size:18px}
    .drawer-form{gap:16px}
    .drawer-form .field label{font-size:11px;letter-spacing:0.18em}
    .drawer-form .field input,
    .drawer-form .field textarea,
    .drawer-form .field select{
      font-size:16px;padding:14px 0;
      border:0;border-bottom:1px solid rgba(42,40,36,0.2);
    }
    .drawer-form .field select{
      appearance:none;-webkit-appearance:none;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2824' stroke-width='1' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
      background-repeat:no-repeat;background-position:right 4px center;background-size:18px;
      padding-right:28px;
    }
    .drawer-form .btn{
      width:100%;height:54px;justify-content:center;
      font-size:13px;letter-spacing:0.18em;
    }
    .drawer-foot{
      padding:14px 22px;
      flex-direction:column;align-items:flex-start;
      gap:6px;font-size:11px;
    }

    /* ───── 15. Floating concierge button ───── */
    .floating-concierge{
      right:22px;
      bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);
      padding:12px 16px 12px 12px;font-size:11px;
    }
    .floating-concierge .dot{width:28px;height:28px;font-size:13px}
    /* Hide while bag/concierge drawer is open */
    body:has(.bag-drawer.open) .floating-concierge,
    body:has(.drawer.open) .floating-concierge{display:none !important}
  }

  /* Reduced motion — respect user preference within mobile range */
  @media (max-width: 768px) and (prefers-reduced-motion: reduce){
    .veil,.veil.v2,.veil.v3{animation:none;opacity:0}
    .nav-mobile-sheet,.bag-drawer,.drawer{transition:none}
    .nav-mobile-toggle span{transition:none}
    .brandstrip-inner,.spot-thumbs,.spot-tabs,.testi-grid,.bag-stepper{scroll-behavior:auto}
    .fiber-card-mobile,.fiber-card-mobile .desc{transition:none}
    .scroll-ind .line::after{animation:none}
  }

  /* ═══════════════════════════════════════════════════════════════════════
     Generated pages — /collection and /piece/{slug}

     Additive only. Everything above is the live page and is not touched: the
     piece pages reuse .spot, .spot-gallery, .spot-info, .swatches, .acc and
     .ph as they are, and this block adds the parts the spotlight never had —
     collection grouping, the chips, a named swatch for the colourways whose
     measured values have not arrived, and The Coat's size table.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ---------- /collection: the four groups ---------- */
  .coll-group{margin-top:110px}
  .coll-group:first-of-type{margin-top:64px}
  .coll-group-head{
    display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:end;
    padding-bottom:28px;margin-bottom:56px;border-bottom:1px solid var(--rule);
  }
  .coll-group-head h2{
    font-family:var(--serif);font-weight:300;font-size:46px;line-height:1.05;
    margin:0;letter-spacing:-0.008em;
  }
  .coll-group-tag{
    font-family:var(--serif);font-style:italic;font-size:20px;color:var(--slate);
    margin:10px 0 0;grid-column:1;
  }
  .coll-group-intro{margin:0;color:#3a3833;max-width:52ch;grid-column:2;grid-row:1 / span 2}
  .coll-group-head .label{grid-column:1;color:var(--slate-2)}
  .coll-best{margin:0 0 20px;font-size:13px;color:var(--slate)}
  .coll-best .label{display:block;margin-bottom:5px;color:var(--slate-2)}

  @media (max-width:980px){
    .coll-group{margin-top:88px}
    .coll-group-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
    .coll-group-head h2{font-size:38px}
    .coll-group-intro{grid-column:1;grid-row:auto}
    .coll-group-head .label{grid-column:1}
  }

  /* ---------- /piece: heading block ---------- */
  .piece-crumb{margin-bottom:44px}
  .piece-subtitle{
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--slate-2);margin:-14px 0 24px;
  }
  .piece-prose{margin:0 0 14px;color:#3a3833;max-width:46ch}

  /* ---------- /piece: Best for · When to wear it ---------- */
  .piece-chips{margin:26px 0 0}
  .piece-chips .label{display:block;margin-bottom:10px;color:var(--slate-2)}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .chip{
    display:inline-block;padding:5px 11px;border:1px solid var(--rule);
    border-radius:999px;font-size:12px;letter-spacing:0.02em;color:var(--slate);
    background:rgba(255,255,255,0.4);
  }

  /* ---------- /piece: named colourways ----------
     The catalogue holds every swatch hex at null on purpose: it states its own
     swatches are not Pantone or laboratory measurements, and colour is the
     buying decision on this page. Until the managed-colour photography lands,
     the options are named rather than painted. When the values arrive this
     class comes off and the circular .swatch above renders unchanged. */
  .swatch-named{
    width:auto;height:auto;border-radius:2px;padding:9px 14px;
    background-image:none;background-color:rgba(255,255,255,0.55);
    box-shadow:inset 0 0 0 1px var(--rule);
    font-family:var(--sans);font-size:12px;letter-spacing:0.03em;
    color:var(--charcoal);white-space:nowrap;
  }
  .swatch-named::before,.swatch-named::after{display:none}
  .swatch-named:hover{transform:none;box-shadow:inset 0 0 0 1px var(--rule-strong)}
  .swatch-named.active{box-shadow:inset 0 0 0 1px var(--charcoal);background-color:var(--oatmeal)}
  .swatch-named:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--charcoal), 0 0 0 2px var(--ivory), 0 0 0 3px var(--charcoal)}
  .swatch-groups{display:flex;flex-direction:column;gap:20px}
  .swatch-group-name{
    display:block;margin-bottom:9px;
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate-2);
  }

  /* ---------- /piece: the size table ---------- */
  .piece-sizes{margin:30px 0 4px}
  .piece-sizes .label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);margin-bottom:14px;display:block}
  .size-table{border-collapse:collapse;width:100%;max-width:280px;font-size:14px}
  .size-table th,.size-table td{
    text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--rule);
  }
  .size-table th{
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
    font-weight:400;color:var(--slate-2);
  }
  .size-table td{font-family:var(--serif);font-size:17px}
  .piece-sizes .small{margin-top:14px;color:var(--slate)}