:root{
    --ink:#14130f; --ink-2:#0d0c0a; --charcoal:#1c1a15; --panel:#221f19; --panel-2:#2a261e;
    --hairline: rgba(200,164,102,0.16); --hairline-strong: rgba(200,164,102,0.36);
    --bone:#f3efe5; --bone-dim:#d7d0c1; --taupe:#9c9384;
    --gold:#c8a466; --gold-bright:#e2c184;
    --stage-bg:#ece6da; --stage-ink:#2b2720; --stage-muted:#8c8371;
    --radius-l:22px; --radius-m:12px; --radius-s:6px;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    min-height:100vh; background:var(--stage-bg);
    background-image:
      radial-gradient(circle at 15% 10%, rgba(200,164,102,0.07), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(200,164,102,0.06), transparent 45%);
    font-family:'Jost', sans-serif; color:var(--stage-ink);
    display:flex; flex-direction:column; align-items:center; padding:32px 20px 56px;
  }
  button{ font-family:inherit; }
  :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

  /* ===== stage ===== */
  .stage-topbar{ width:100%; max-width:1180px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; margin-bottom:8px; }
  .stage-title{ font-family:'Fraunces', serif; font-size:20px; font-weight:500; }
  .stage-title span{ display:block; font-family:'Jost'; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--stage-muted); margin-top:4px; font-weight:400; }
  .stage-hint{ width:100%; max-width:1180px; font-size:12px; color:var(--stage-muted); margin-bottom:26px; }

  .frame-wrap{ width:100%; display:flex; justify-content:center; }
  .device-bezel{
    width:min(94vw, 124vh, 1180px); aspect-ratio:4/3;
    background:linear-gradient(155deg, #16140f, #0a0908 85%);
    border-radius:32px; padding:1.6cqw;
    box-shadow:0 40px 90px -30px rgba(20,18,12,.5), 0 0 0 1px rgba(20,18,12,.08);
    position:relative; container-type: inline-size;
  }
  .device-bezel::after{ content:""; position:absolute; right:7px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#050504; box-shadow:0 0 0 2px rgba(200,164,102,0.08); }
  .device-screen{ position:relative; width:100%; height:100%; background:var(--ink); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }

  /* ===== topbar ===== */
  .topbar{ display:grid; grid-template-columns:auto 1fr minmax(140px,240px) auto; align-items:center; gap:2cqw; padding:2cqw 3cqw; border-bottom:1px solid var(--hairline); flex-shrink:0; }
  .topbar[hidden]{ display:none; }
  .icon-btn{ background:none; border:1px solid var(--hairline-strong); color:var(--bone-dim); width:clamp(28px,4.2cqw,40px); height:clamp(28px,4.2cqw,40px); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; flex-shrink:0; }
  .icon-btn:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(200,164,102,0.06); }
  .icon-btn svg{ width:46%; height:46%; }
  .icon-btn.is-hidden{ visibility:hidden; }
  .icon-btn:disabled{ opacity:.3; cursor:not-allowed; border-color:var(--hairline-strong); color:var(--bone-dim); background:none; }
  .topbar-actions{ display:flex; align-items:center; gap:.9cqw; flex-shrink:0; }

  .breadcrumb{ font-size:clamp(11px,1.25cqw,14px); letter-spacing:.03em; color:var(--taupe); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .breadcrumb .crumb{ color:var(--taupe); }
  .breadcrumb .crumb.clickable{ cursor:pointer; color:var(--bone-dim); }
  .breadcrumb .crumb.clickable:hover{ color:var(--gold-bright); }
  .breadcrumb .crumb.current{ color:var(--bone); }
  .breadcrumb .crumb.suffix{ color:var(--gold-bright); }
  .breadcrumb .sep{ margin:0 .5em; color:var(--hairline-strong); }

  .view-order-label{ justify-self:center; background:none; border:1px solid var(--hairline-strong); color:var(--bone-dim); border-radius:999px; padding:.5cqw 1.4cqw; font-size:clamp(11px,1.1cqw,13px); letter-spacing:.04em; cursor:pointer; white-space:nowrap; transition:border-color .2s ease, color .2s ease, background .2s ease; }
  .view-order-label:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(200,164,102,0.06); }

  /* ===== screens (shared) ===== */
  .screen{ display:none; flex:1; min-height:0; }
  .screen.active{ display:flex; animation:screenIn .48s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes screenIn{ from{ opacity:0; transform:translateY(10px) scale(.99);} to{ opacity:1; transform:translateY(0) scale(1);} }
  @keyframes weaveDrift{ from{ background-position:0 0,0 0;} to{ background-position:300px 300px, -300px 300px;} }

  /* ---- Home ---- */
  .home-screen{ display:flex; align-items:center; justify-content:center; position:relative; width:100%; }
  .home-screen::before{ content:""; position:absolute; inset:0;
    background-image: repeating-linear-gradient(45deg, rgba(200,164,102,0.035) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(200,164,102,0.035) 0 1px, transparent 1px 9px);
    animation:weaveDrift 60s linear infinite; }
  .home-inner{ position:relative; text-align:center; padding:0 6cqw; }
  .eyebrow{ font-size:clamp(10px,1.15cqw,13px); text-transform:uppercase; letter-spacing:.36em; color:var(--gold); margin-bottom:1.6cqw; }
  .wordmark{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:.05em; font-size:clamp(42px,9cqw,100px); margin:0; color:var(--bone); }
  .rule{ width:64px; height:1px; background:var(--gold); margin:2.2cqw auto; }
  .tagline{ font-size:clamp(13px,1.5cqw,17px); color:var(--bone-dim); letter-spacing:.02em; margin:0 0 3.4cqw; }
  .btn-primary{ background:var(--gold-bright); color:var(--ink); border:none; cursor:pointer; border-radius:999px; padding:1.5cqw 3.6cqw; font-size:clamp(12px,1.35cqw,15px); letter-spacing:.08em; text-transform:uppercase; font-weight:500; box-shadow:0 10px 30px -10px rgba(200,164,102,.55); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .btn-primary:hover{ transform:translateY(-2px); background:#efd49c; }

  /* ---- Gender select ---- */
  .gender-screen{ width:100%; }
  .gender-panel{ flex:1; position:relative; border:none; cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--charcoal); color:var(--bone); }
  .gender-panel + .gender-panel{ border-left:1px solid var(--hairline-strong); }
  .gender-media{ position:absolute; inset:0; opacity:.55; transition:opacity .35s ease, transform .5s ease; }
  .gender-panel[data-gender="men"] .gender-media{ background:radial-gradient(120% 100% at 30% 20%, #2a271e 0%, #14130f 70%); }
  .gender-panel[data-gender="women"] .gender-media{ background:radial-gradient(120% 100% at 70% 20%, #2a231e 0%, #14100f 70%); }
  .gender-panel:hover .gender-media{ opacity:.85; transform:scale(1.04); }
  .gender-label{ position:relative; font-family:'Fraunces', serif; font-weight:500; font-size:clamp(28px,5.4cqw,58px); letter-spacing:.06em; }
  .gender-label::after{ content:""; display:block; height:1px; width:0%; background:var(--gold); transition:width .35s ease; margin-top:1.2cqw; }
  .gender-panel:hover .gender-label::after{ width:100%; }
  .gender-hint{ position:absolute; bottom:3.4cqw; left:0; right:0; text-align:center; font-size:clamp(10px,1cqw,12px); letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }

  /* ---- Product grid ---- */
  .grid-screen{ flex-direction:column; padding:3cqw 3.4cqw 2.4cqw; overflow:auto; width:100%; }
  .grid-head{ margin-bottom:2.2cqw; }
  .grid-eyebrow{ font-size:clamp(10px,1.05cqw,12px); letter-spacing:.3em; color:var(--gold); text-transform:uppercase; }
  .grid-title{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(22px,3.2cqw,34px); margin:.5cqw 0 .4cqw; color:var(--bone); }
  .grid-sub{ font-size:clamp(11px,1.15cqw,13px); color:var(--taupe); margin:0; }
  .tile-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.4cqw; flex:1; }
  .tile{ position:relative; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-m); cursor:pointer; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.4cqw 1cqw 1.2cqw; gap:.8cqw; transition:border-color .25s ease, transform .25s ease, background .25s ease; }
  .tile:hover{ border-color:var(--hairline-strong); background:var(--panel-2); transform:translateY(-3px); }
  .tile-icon{ width:clamp(34px,6.4cqw,64px); height:clamp(34px,6.4cqw,64px); color:var(--bone-dim); transition:color .25s ease, transform .25s ease; }
  .tile:hover .tile-icon{ color:var(--gold-bright); transform:scale(1.06); }
  .tile-label{ font-size:clamp(11px,1.15cqw,13.5px); color:var(--bone); letter-spacing:.02em; }
  .tile-underline{ height:1px; width:0%; background:var(--gold); transition:width .3s ease; }
  .tile:hover .tile-underline{ width:60%; }
  .tile-saved{ position:absolute; top:.8cqw; right:.8cqw; width:clamp(14px,1.8cqw,18px); height:clamp(14px,1.8cqw,18px); color:var(--gold-bright); opacity:0; }
  .tile.is-saved .tile-saved{ opacity:1; }

  /* ---- Generic styling guide (non-Suit products) ---- */
  .styling-screen{ flex-direction:column; overflow:hidden; width:100%; }
  .styling-top{ display:flex; flex:1.25; min-height:0; }
  .hero{ flex:1.3; position:relative; background:var(--charcoal); border-right:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; cursor:zoom-in; overflow:hidden; }
  .hero-image{ width:38%; color:var(--bone-dim); transition:transform .4s ease; }
  .hero-image svg{ width:100%; height:100%; display:block; }
  .hero-image.view-detail svg{ transform:scale(1.55); }
  .hero-image.view-back svg{ transform:scaleX(-1); }
  .hero-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(20,18,12,.5); border:1px solid var(--hairline-strong); color:var(--bone); width:clamp(26px,3.6cqw,36px); height:clamp(26px,3.6cqw,36px); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:background .2s ease, color .2s ease; }
  .hero-nav:hover{ background:rgba(200,164,102,0.16); color:var(--gold-bright); }
  .hero-nav.prev{ left:1.4cqw; } .hero-nav.next{ right:1.4cqw; }
  .hero-caption{ position:absolute; left:1.6cqw; top:1.4cqw; font-size:clamp(10px,1.05cqw,12px); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
  .hero-placeholder-note{ position:absolute; left:1.6cqw; bottom:1.4cqw; font-size:clamp(9px,.95cqw,11px); letter-spacing:.1em; color:var(--taupe); opacity:.75; }
  .hero-dots{ position:absolute; bottom:1.5cqw; right:1.6cqw; display:flex; gap:.6cqw; }
  .hero-dots .dot{ width:6px; height:6px; border-radius:50%; background:var(--hairline-strong); cursor:pointer; }
  .hero-dots .dot.active{ background:var(--gold-bright); }
  .info-panel{ flex:1; padding:2.6cqw 2.8cqw; display:flex; flex-direction:column; }
  .info-eyebrow{ font-size:clamp(9.5px,1cqw,11.5px); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
  .info-title{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(24px,3.4cqw,36px); margin:.5cqw 0 1.2cqw; color:var(--bone); }
  .info-desc{ font-size:clamp(12px,1.25cqw,14.5px); line-height:1.65; color:var(--bone-dim); margin:0 0 auto; max-width:46ch; }
  .btn-save{ align-self:flex-start; display:inline-flex; align-items:center; gap:.8cqw; background:transparent; border:1px solid var(--hairline-strong); color:var(--bone-dim); border-radius:999px; padding:1.1cqw 2cqw; cursor:pointer; margin-top:2cqw; font-size:clamp(11px,1.15cqw,13px); letter-spacing:.04em; transition:border-color .2s ease, color .2s ease, background .2s ease; }
  .btn-save svg{ width:clamp(13px,1.5cqw,16px); height:clamp(13px,1.5cqw,16px); }
  .btn-save:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .btn-save.is-saved{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink); }
  .btn-save .icon-outline{ display:inline-flex; } .btn-save .icon-filled{ display:none; }
  .btn-save.is-saved .icon-outline{ display:none; } .btn-save.is-saved .icon-filled{ display:inline-flex; }
  .styling-bottom{ flex:1; display:flex; flex-direction:column; border-top:1px solid var(--hairline); min-height:0; }
  .tab-strip{ display:flex; gap:.4cqw; padding:1.2cqw 2cqw 0; overflow-x:auto; flex-shrink:0; }
  .tab{ display:flex; align-items:center; gap:.7cqw; padding:1cqw 1.5cqw; border:none; background:none; color:var(--taupe); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; font-size:clamp(11px,1.1cqw,13px); letter-spacing:.03em; transition:color .2s ease, border-color .2s ease; }
  .tab svg{ width:clamp(14px,1.6cqw,18px); height:clamp(14px,1.6cqw,18px); }
  .tab:hover{ color:var(--bone-dim); }
  .tab.active{ color:var(--gold-bright); border-color:var(--gold); }
  .option-panel{ flex:1; display:flex; align-items:center; gap:2.4cqw; padding:2cqw 3cqw; min-height:0; animation:fadeIn .35s ease both; }
  @keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
  .option-icon{ width:clamp(46px,6cqw,64px); height:clamp(46px,6cqw,64px); color:var(--gold-bright); flex-shrink:0; }
  .option-text h3{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(16px,1.9cqw,21px); margin:0 0 .5cqw; color:var(--bone); }
  .option-text p{ font-size:clamp(11.5px,1.15cqw,13.5px); color:var(--taupe); margin:0 0 1.2cqw; max-width:50ch; }
  .option-swatches{ display:flex; gap:.8cqw; }
  .option-swatch{ width:clamp(34px,4cqw,44px); height:clamp(34px,4cqw,44px); border-radius:var(--radius-s); border:1px dashed var(--hairline-strong); flex-shrink:0; }

  /* ---- Lightbox (generic styling) ---- */
  .lightbox{ position:absolute; inset:0; background:rgba(10,9,7,.94); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20; opacity:0; visibility:hidden; transition:opacity .3s ease; }
  .lightbox.open{ opacity:1; visibility:visible; }
  .lightbox-close{ position:absolute; top:2cqw; right:2cqw; background:none; border:1px solid var(--hairline-strong); color:var(--bone); width:clamp(30px,3.6cqw,38px); height:clamp(30px,3.6cqw,38px); border-radius:50%; cursor:pointer; font-size:18px; line-height:1; }
  .lightbox-close:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .lightbox-image{ width:26%; color:var(--bone-dim); margin-bottom:2.4cqw; }
  .lightbox-image svg{ width:100%; height:100%; }
  .lightbox-thumbs{ display:flex; gap:1cqw; }
  .lightbox-thumb{ width:clamp(46px,5.4cqw,58px); height:clamp(46px,5.4cqw,58px); border-radius:var(--radius-s); border:1px solid var(--hairline); background:var(--panel); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--taupe); padding:.6cqw; }
  .lightbox-thumb.active{ border-color:var(--gold); color:var(--gold-bright); }
  .lightbox-thumb svg{ width:100%; height:100%; }

  /* ---- Suit step wizard ---- */
  .step-screen{ overflow:hidden; flex-direction:column; width:100%; }
  .step-body{ flex:1; display:flex; min-height:0; }
  .step-left{ flex:1.15; min-width:0; overflow:auto; }
  .step-content-wrap{ min-height:0; padding:2.6cqw 2.2cqw 1cqw 3.2cqw; }
  .step-right{ flex:0.85; min-width:0; border-left:1px solid var(--hairline); background:var(--charcoal); display:flex; flex-direction:column; align-items:center; padding:2cqw 2.2cqw 1.6cqw; }
  .preview-header{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:.6cqw; margin-bottom:.4cqw; }
  .preview-eyebrow{ font-size:clamp(10px,1.05cqw,12px); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
  .preview-toggle{ background:none; border:1px solid var(--hairline-strong); color:var(--taupe); border-radius:999px; padding:.5cqw 1.3cqw; font-size:clamp(9.5px,.95cqw,11px); cursor:pointer; letter-spacing:.03em; white-space:nowrap; transition:border-color .2s ease, color .2s ease; }
  .preview-toggle:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .preview-figure{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
  .preview-figure svg{ height:100%; max-height:100%; width:auto; max-width:100%; }
  .preview-figure.pulse svg, .preview-figure.pulse .preview-photo, .preview-figure.pulse .preview-logo{ animation:previewPulse .45s ease; }
  @keyframes previewPulse{ 0%{ opacity:.35; transform:scale(.965); } 100%{ opacity:1; transform:scale(1); } }
  .preview-photo{ position:relative; height:100%; max-height:100%; aspect-ratio:2/3; border-radius:var(--radius-m); overflow:hidden; background:var(--charcoal); border:1px solid var(--hairline); }
  .preview-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .preview-photo-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--bone-dim); }
  .preview-photo-placeholder svg{ width:40%; height:40%; }
  .preview-logo{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; width:100%; text-align:center; }
  .preview-logo-word{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:.08em; font-size:clamp(28px,4cqw,44px); color:var(--bone); }
  .preview-logo-rule{ width:40px; height:1px; background:var(--gold); margin:1cqw 0; }
  .preview-logo-sub{ font-size:clamp(10px,1cqw,12px); color:var(--taupe); letter-spacing:.03em; }
  .preview-hint{ font-size:clamp(9px,.9cqw,10.5px); color:var(--taupe); text-align:center; margin:.8cqw 0 0; max-width:32ch; line-height:1.5; }
  .step-header{ margin-bottom:1.8cqw; }
  .role-tabs{ display:flex; gap:.7cqw; margin-bottom:1.6cqw; flex-wrap:wrap; }
  .role-tab{ display:flex; align-items:center; gap:.5cqw; background:none; border:1px solid var(--hairline-strong); color:var(--taupe); border-radius:999px; padding:.6cqw 1.5cqw; font-size:clamp(10.5px,1.05cqw,12.5px); letter-spacing:.03em; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; }
  .role-tab:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .role-tab.active{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink); }
  .role-tab svg{ width:11px; height:11px; flex-shrink:0; }
  .step-eyebrow{ font-size:clamp(10px,1.05cqw,12px); letter-spacing:.3em; color:var(--gold); text-transform:uppercase; }
  .step-title{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(21px,2.9cqw,31px); margin:.5cqw 0 .5cqw; color:var(--bone); display:flex; align-items:baseline; gap:.9cqw; flex-wrap:wrap; }
  .step-optional-tag{ font-family:'Jost'; font-size:clamp(9.5px,.95cqw,11px); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); border:1px solid var(--hairline-strong); border-radius:999px; padding:.3cqw 1cqw; }
  .step-desc{ font-size:clamp(11.5px,1.15cqw,13.5px); color:var(--taupe); margin:0; max-width:70ch; }
  .options-grid{ display:flex; flex-wrap:wrap; gap:1.4cqw; padding-bottom:1cqw; }
  .opt-break{ flex-basis:100%; height:0; margin:0; padding:0; }
  .yn-list{ display:flex; flex-direction:column; gap:1cqw; width:100%; padding-bottom:1cqw; }
  .yn-row{ display:flex; align-items:center; gap:1.4cqw; padding:1.1cqw 1.3cqw; border:1px solid var(--hairline); border-radius:var(--radius-m); transition:border-color .2s ease; }
  .yn-row.answered{ border-color:var(--hairline-strong); }
  .yn-media{ position:relative; width:clamp(46px,5.6cqw,60px); aspect-ratio:2/3; border-radius:var(--radius-s); overflow:hidden; background:var(--charcoal); border:1px solid var(--hairline); flex-shrink:0; }
  .yn-text{ flex:1; min-width:0; }
  .yn-label{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(13px,1.3cqw,15.5px); color:var(--bone); }
  .yn-desc{ font-size:clamp(10.5px,1.05cqw,12.5px); color:var(--taupe); margin-top:.2cqw; }
  .yn-toggle{ display:flex; gap:.6cqw; flex-shrink:0; }
  .yn-btn{ background:none; border:1px solid var(--hairline-strong); color:var(--bone-dim); border-radius:999px; padding:.6cqw 1.7cqw; font-size:clamp(11px,1.1cqw,13px); letter-spacing:.03em; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
  .yn-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .yn-btn.active{ color:var(--ink); }
  .yn-btn.yn-yes.active{ background:var(--gold-bright); border-color:var(--gold-bright); }
  .yn-btn.yn-no.active{ background:var(--bone-dim); border-color:var(--bone-dim); }
  .step-remark{ margin-top:1.8cqw; padding-bottom:1cqw; max-width:70ch; }
  .step-remark label{ display:block; font-size:clamp(10px,1.05cqw,12px); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.6cqw; }
  .step-remark label span{ text-transform:none; letter-spacing:0; color:var(--taupe); font-size:clamp(10px,1cqw,11.5px); }
  .step-remark textarea{ width:100%; background:var(--panel); border:1px solid var(--hairline-strong); border-radius:var(--radius-s); padding:1cqw 1.2cqw; color:var(--bone); font-family:inherit; font-size:clamp(12px,1.2cqw,14px); resize:vertical; min-height:56px; box-sizing:border-box; }
  .step-remark textarea:focus{ outline:none; border-color:var(--gold); }
  .opt-card{ width:clamp(84px,10.6cqw,124px); background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; gap:.7cqw; text-align:left; color:inherit; }
  .opt-media{ position:relative; width:100%; aspect-ratio:2/3; border-radius:var(--radius-s); border:1px solid var(--hairline); transition:border-color .2s ease, box-shadow .2s ease; }
  .opt-card:hover .opt-media{ border-color:var(--hairline-strong); }
  .opt-card.selected .opt-media{ border-color:var(--gold-bright); box-shadow:0 0 0 2px rgba(226,193,132,.28); }
  .opt-media-inner{ position:relative; width:100%; height:100%; border-radius:calc(var(--radius-s) - 1px); overflow:hidden; background:var(--charcoal); }
  .opt-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--bone-dim); }
  .opt-placeholder svg{ width:46%; height:46%; transition:color .2s ease; }
  .opt-card:hover .opt-placeholder svg{ color:var(--gold-bright); }
  .opt-media-inner > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .opt-media-inner.strip-wrap > img{ inset:auto; top:0; left:0; height:100%; }
  .opt-check{ position:absolute; top:.5cqw; right:.5cqw; width:clamp(16px,2cqw,20px); height:clamp(16px,2cqw,20px); border-radius:50%; background:var(--gold-bright); color:var(--ink); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:opacity .18s ease, transform .18s ease; }
  .opt-card.selected .opt-check{ opacity:1; transform:scale(1); }
  .opt-check svg{ width:60%; height:60%; }
  .opt-label{ font-size:clamp(11px,1.1cqw,13px); color:var(--bone); letter-spacing:.01em; }
  .opt-card.selected .opt-label{ color:var(--gold-bright); }
  .opt-desc{ font-size:clamp(9.5px,.95cqw,11px); color:var(--taupe); line-height:1.4; }
  .step-nav{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:1.5cqw 3.2cqw; border-top:1px solid var(--hairline); }
  .btn-ghost{ background:none; border:1px solid var(--hairline-strong); color:var(--bone-dim); border-radius:999px; padding:1.1cqw 2.2cqw; cursor:pointer; font-size:clamp(11px,1.15cqw,13px); letter-spacing:.04em; display:flex; align-items:center; gap:.6cqw; transition:border-color .2s ease, color .2s ease; }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .btn-next{ background:var(--gold-bright); color:var(--ink); border:none; border-radius:999px; padding:1.1cqw 2.6cqw; cursor:pointer; font-size:clamp(11px,1.15cqw,13px); letter-spacing:.06em; text-transform:uppercase; font-weight:500; transition:transform .2s ease, background .2s ease, opacity .2s ease; }
  .btn-next:hover{ transform:translateY(-1px); background:#efd49c; }
  .btn-next:disabled{ opacity:.3; cursor:not-allowed; transform:none; }
  .jump-summary{ background:none; border:none; color:var(--taupe); font-size:clamp(10.5px,1.05cqw,12px); letter-spacing:.04em; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .jump-summary:hover{ color:var(--gold-bright); }

  /* ---- Suit summary ---- */
  .summary-screen{ overflow:hidden; flex-direction:column; width:100%; }
  .summary-scroll{ flex:1; min-height:0; overflow:auto; padding:2.4cqw 3.2cqw 1cqw; }
  .summary-letterhead{ margin-bottom:1.2cqw; }
  .lh-word{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:.08em; font-size:clamp(15px,1.7cqw,19px); color:var(--gold-bright); }
  .lh-sub{ font-size:clamp(9.5px,.95cqw,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); margin-top:.2cqw; }
  .summary-title-row{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--hairline-strong); padding-bottom:1.2cqw; margin-bottom:1.6cqw; flex-wrap:wrap; gap:.6cqw; }
  .summary-title-row h2{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(22px,2.9cqw,30px); margin:0; color:var(--bone); }
  .summary-date{ font-size:clamp(10.5px,1.05cqw,12px); color:var(--taupe); }
  .summary-section{ margin-bottom:1.8cqw; }
  .summary-section-title{ font-size:clamp(10.5px,1.05cqw,12px); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--hairline); padding-bottom:.6cqw; margin-bottom:.4cqw; }
  .summary-row{ display:flex; align-items:flex-start; gap:1.2cqw; padding:.9cqw 0; border-bottom:1px solid var(--hairline); }
  .summary-row:last-child{ border-bottom:none; }
  .mini-media{ position:relative; width:clamp(30px,3.6cqw,42px); aspect-ratio:2/3; border-radius:5px; overflow:hidden; background:var(--charcoal); border:1px solid var(--hairline); flex-shrink:0; }
  .mini-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .mini-media.strip-wrap img{ inset:auto; top:0; left:0; height:100%; }
  .mini-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--bone-dim); }
  .mini-placeholder svg{ width:50%; height:50%; }
  .row-text{ flex:1; min-width:0; }
  .row-cat{ font-size:clamp(9px,.9cqw,10.5px); text-transform:uppercase; letter-spacing:.14em; color:var(--taupe); }
  .row-val{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(13px,1.35cqw,15.5px); color:var(--bone); }
  .row-val.is-empty{ font-family:'Jost'; font-weight:400; color:var(--taupe); font-style:italic; font-size:clamp(11.5px,1.15cqw,13px); }
  .row-remark{ font-size:clamp(10px,1cqw,12px); color:var(--taupe); font-style:italic; margin-top:.35cqw; line-height:1.45; }
  .row-edit{ align-self:center; background:none; border:1px solid var(--hairline-strong); color:var(--taupe); width:clamp(24px,2.8cqw,30px); height:clamp(24px,2.8cqw,30px); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:border-color .2s ease, color .2s ease; }
  .row-edit:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .row-edit svg{ width:48%; height:48%; }
  .summary-actions{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:1cqw; padding:1.6cqw 3.2cqw; border-top:1px solid var(--hairline); flex-wrap:wrap; }
  .summary-actions .right-group{ display:flex; gap:1cqw; flex-wrap:wrap; }
  .btn-save-export{ display:inline-flex; align-items:center; gap:.7cqw; background:var(--gold-bright); color:var(--ink); border:none; border-radius:999px; padding:1.1cqw 2.4cqw; cursor:pointer; font-size:clamp(11px,1.15cqw,13px); letter-spacing:.06em; text-transform:uppercase; font-weight:500; transition:transform .2s ease, background .2s ease; }
  .btn-save-export:hover{ transform:translateY(-1px); background:#efd49c; }
  .save-export-wrap{ position:relative; }
  .save-export-menu{ position:absolute; bottom:calc(100% + 10px); right:0; background:var(--panel-2); border:1px solid var(--hairline-strong); border-radius:var(--radius-m); padding:6px; display:flex; flex-direction:column; gap:2px; min-width:200px; box-shadow:0 20px 44px -14px rgba(10,9,7,.6); z-index:10; }
  .save-export-menu[hidden]{ display:none; }
  .save-export-item{ display:flex; align-items:center; gap:.8cqw; width:100%; background:none; border:none; color:var(--bone-dim); text-align:left; padding:.8cqw 1cqw; border-radius:calc(var(--radius-s) + 2px); cursor:pointer; font-size:clamp(11px,1.1cqw,13px); letter-spacing:.02em; transition:background .15s ease, color .15s ease; white-space:nowrap; }
  .save-export-item:hover{ background:rgba(200,164,102,0.12); color:var(--gold-bright); }
  .save-export-item svg{ width:16px; height:16px; flex-shrink:0; }
  .confirm-row{ display:flex; align-items:center; gap:.8cqw; flex-wrap:wrap; }
  .confirm-row span{ font-size:clamp(10.5px,1.05cqw,12px); color:var(--taupe); }
  .btn-tiny-outline{ background:none; border:1px solid var(--hairline-strong); color:var(--bone-dim); border-radius:999px; padding:.7cqw 1.4cqw; cursor:pointer; font-size:clamp(10px,1cqw,11.5px); }
  .btn-tiny-outline:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .btn-tiny-solid{ background:#c4695a; color:#fff; border:none; border-radius:999px; padding:.7cqw 1.4cqw; cursor:pointer; font-size:clamp(10px,1cqw,11.5px); }

  .toast{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px); background:var(--panel-2); border:1px solid var(--hairline-strong); color:var(--bone); padding:10px 20px; border-radius:999px; font-size:12.5px; letter-spacing:.03em; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:30; white-space:nowrap; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---- Order Details modal ---- */
  .modal-overlay{ position:absolute; inset:0; background:rgba(10,9,7,.72); display:flex; align-items:center; justify-content:center; z-index:40; opacity:0; visibility:hidden; transition:opacity .25s ease; padding:4cqw; }
  .modal-overlay.open{ opacity:1; visibility:visible; }
  .modal-card{ background:var(--charcoal); border:1px solid var(--hairline-strong); border-radius:var(--radius-l); padding:2.6cqw 2.8cqw; width:min(94%, 480px); max-height:88%; overflow:auto; }
  .modal-title{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(18px,2.2cqw,24px); color:var(--bone); margin:0 0 .4cqw; }
  .modal-sub{ font-size:clamp(11px,1.1cqw,13px); color:var(--taupe); margin:0 0 1.8cqw; }
  .form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.2cqw; }
  .form-row{ margin-bottom:1.2cqw; }
  .form-row label{ display:block; font-size:clamp(10px,1cqw,11.5px); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.5cqw; }
  .form-row input, .form-row textarea{ width:100%; background:var(--panel); border:1px solid var(--hairline-strong); border-radius:var(--radius-s); padding:.9cqw 1.1cqw; color:var(--bone); font-family:inherit; font-size:clamp(12px,1.2cqw,14px); box-sizing:border-box; }
  .form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--gold); }
  .form-row textarea{ resize:vertical; min-height:64px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:1cqw; margin-top:1.6cqw; }
  .qty-picker{ display:flex; gap:.8cqw; margin-bottom:.4cqw; }
  .qty-option{ flex:1; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--hairline-strong); border-radius:var(--radius-m); color:var(--bone); font-family:'Fraunces', serif; font-size:clamp(16px,1.8cqw,20px); cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
  .qty-option:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .qty-option.selected{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink); }

  /* ---- PDF preview ---- */
  .pdf-preview-overlay{ position:absolute; inset:0; background:rgba(10,9,7,.88); display:flex; flex-direction:column; align-items:center; z-index:45; opacity:0; visibility:hidden; transition:opacity .25s ease; padding:2.2cqw; }
  .pdf-preview-overlay.open{ opacity:1; visibility:visible; }
  .pdf-preview-toolbar{ width:100%; max-width:640px; display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2cqw; flex-shrink:0; }
  .pdf-preview-toolbar-title{ color:var(--bone-dim); font-size:clamp(11px,1.1cqw,13px); letter-spacing:.05em; text-transform:uppercase; }
  .pdf-preview-toolbar-actions{ display:flex; gap:.8cqw; }
  .pdf-preview-scroll{ flex:1; width:100%; max-width:640px; overflow:auto; border-radius:8px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); }
  .pdf-page{ background:#fdfcf9; color:#1c1a15; width:100%; min-height:100%; padding:34px 32px; font-family:'Jost', sans-serif; box-sizing:border-box; }
  .pdf-letterhead{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #1c1a15; padding-bottom:14px; margin-bottom:18px; }
  .pdf-brand{ font-family:'Fraunces', serif; font-weight:500; font-size:22px; letter-spacing:.05em; }
  .pdf-brand-sub{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8c8371; margin-top:2px; }
  .pdf-order-meta{ text-align:right; font-size:11px; color:#4a4638; line-height:1.7; }
  .pdf-order-meta strong{ color:#1c1a15; }
  .pdf-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-bottom:20px; font-size:11.5px; }
  .pdf-info-grid div span{ display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#8c8371; margin-bottom:2px; }
  .pdf-section-title{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#a3752e; border-bottom:1px solid #ddd6c6; padding-bottom:5px; margin:18px 0 6px; }
  .pdf-row{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-bottom:1px solid #eee9dd; font-size:11.5px; }
  .pdf-row:last-child{ border-bottom:none; }
  .pdf-thumb{ position:relative; width:30px; height:45px; border-radius:3px; overflow:hidden; background:#eee9dd; flex-shrink:0; }
  .pdf-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pdf-thumb.strip-wrap img{ inset:auto; top:0; left:0; height:100%; }
  .pdf-thumb-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#b8b09c; }
  .pdf-thumb-placeholder svg{ width:60%; height:60%; }
  .pdf-cat{ width:110px; flex-shrink:0; color:#8c8371; text-transform:uppercase; letter-spacing:.06em; font-size:9.5px; }
  .pdf-val{ flex:1; color:#1c1a15; }
  .pdf-val.is-empty{ color:#b8b09c; font-style:italic; }
  .pdf-remark{ font-size:10px; color:#8c8371; font-style:italic; margin-top:2px; line-height:1.45; }
  .pdf-notes{ margin-top:20px; font-size:11px; color:#4a4638; white-space:pre-wrap; }
  .pdf-notes-label{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#8c8371; margin-bottom:4px; }
  .pdf-footer{ margin-top:26px; padding-top:12px; border-top:1px solid #ddd6c6; font-size:9.5px; color:#8c8371; display:flex; justify-content:space-between; }
  @media print{
    body > *:not(.pdf-preview-overlay){ display:none !important; }
    .pdf-preview-overlay{ position:static !important; background:none !important; padding:0 !important; opacity:1 !important; visibility:visible !important; }
    .pdf-preview-toolbar, .pdf-preview-scroll{ display:block; }
    .pdf-preview-toolbar{ display:none !important; }
    .pdf-preview-scroll{ overflow:visible !important; box-shadow:none !important; max-width:none !important; }
    .pdf-page{ padding:0; }
  }

  [hidden]{ display:none !important; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important; } }
  @media (max-width:720px){ .tile-grid{ grid-template-columns:repeat(3,1fr); } }

  /* ===================== iPad / installed-app polish =====================
     Added for the PWA. All rules are inert on desktop: env(safe-area-inset-*)
     resolves to 0px where there is no notch or home indicator, so the layout
     on a Mac is unchanged. */

  /* Stop the whole page rubber-banding, which on iOS reads as a pull-to-refresh
     and can reload away an in-progress order. */
  html, body { overscroll-behavior: none; }

  /* Suppress the iOS text-selection loupe and the grey flash when a consultant
     taps an option card. Inputs opt back in below. */
  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }

  /* viewport-fit=cover lets the page fill the display; these keep content clear
     of the home indicator and rounded corners. Values add to the existing
     body padding of 32px 20px 56px. */
  body {
    padding-left:  calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }