@font-face{font-family:"Gilmer";font-weight:300;font-style:normal;font-display:swap;src:url("/assets/fonts/gilmer-light.woff2") format("woff2")}
@font-face{font-family:"Gilmer";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/gilmer-regular.woff2") format("woff2")}
@font-face{font-family:"Gilmer";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/gilmer-medium.woff2") format("woff2")}
@font-face{font-family:"Gilmer";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/gilmer-bold.woff2") format("woff2")}
@font-face{font-family:"Gilmer";font-weight:800;font-style:normal;font-display:swap;src:url("/assets/fonts/gilmer-heavy.woff2") format("woff2")}
/* ============================================================================
   PAMUUC SUITE — token layer
   One palette, one type scale, one motion system for all three surfaces.
   Light palette is defined on bare :root. Dark redefines ONLY the tokens.
   ========================================================================= */
:root{
  /* -- ground ------------------------------------------------------------ */
  --paper:#F4F2ED;
  --surface:#FFFFFF;
  --surface-2:#EAE7DF;
  --surface-3:#DFDBD1;
  --ink:#0A1024;
  --muted:#59617A;
  --faint:#5F6679;
  --line:color-mix(in srgb,#011251 12%,transparent);
  --line-strong:color-mix(in srgb,#011251 24%,transparent);

  /* -- navy: interactive + brand ONLY. INVERTS between themes. ------------
     Text on navy must use var(--paper) or --on-navy-dim, never a hardcoded
     off-white, or dark mode gives dark-on-dark. */
  --navy:#011251;
  --navy-hover:#16307A;
  --navy-quiet:color-mix(in srgb,#011251 8%,transparent);
  --on-navy-dim:color-mix(in srgb,#F4F2ED 72%,transparent);

  /* -- band: editorial anchor. NEVER inverts. Text uses --on-band. ------- */
  --band:#011251;
  --on-band:#F4F2ED;
  --on-band-dim:color-mix(in srgb,#F4F2ED 66%,transparent);

  /* -- red: MERCHANDISE line of business and nothing else. --------------- */
  --red:#7F1D16;
  --red-text:#7F1D16;
  --red-quiet:color-mix(in srgb,#7F1D16 9%,transparent);

  /* -- status families. --stop is danger/blocked — never --red. ---------- */
  --stop:#B92740;
  --stop-quiet:color-mix(in srgb,#B92740 10%,transparent);
  --go:#1F6B4A;
  --go-quiet:color-mix(in srgb,#1F6B4A 11%,transparent);
  --wait:#8A5A08;
  --wait-quiet:color-mix(in srgb,#B57F1B 15%,transparent);
  --flow:#1E5679;
  --flow-quiet:color-mix(in srgb,#1E5679 10%,transparent);
  --idle:#59617A;
  --idle-quiet:color-mix(in srgb,#59617A 10%,transparent);

  /* -- Ink Glass. Chrome, controls and transient surfaces only. ---------- */
  --ig-light:color-mix(in srgb,#F4F2ED 72%,transparent);
  --ig-navy:color-mix(in srgb,#011251 78%,transparent);
  --ig-media:color-mix(in srgb,#0A1024 42%,transparent);
  --ig-edge:color-mix(in srgb,#F4F2ED 38%,transparent);
  --ig-blur:18px;

  /* -- elevation. Cards carry shadow in light, border-only in dark. ------ */
  --shadow-1:0 1px 2px color-mix(in srgb,#011251 8%,transparent),0 1px 1px color-mix(in srgb,#011251 4%,transparent);
  --shadow-2:0 2px 6px color-mix(in srgb,#011251 10%,transparent);
  --shadow-3:0 8px 24px color-mix(in srgb,#011251 12%,transparent);
  --shadow-4:0 18px 48px color-mix(in srgb,#011251 18%,transparent);
  --card-shadow:var(--shadow-1);
  --card-border:1px solid var(--line);

  /* -- shape law: rounded is reserved for things you can act on. ---------
     Content cards stay SQUARE. Capsules are controls. 24/28 are panels. */
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:24px;
  --radius-xl:28px;
  --radius-full:999px;

  /* -- spacing ----------------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:80px;

  /* -- motion: quiet and architectural, never bouncy. -------------------- */
  --dur-press:90ms;
  --dur-focus:160ms;
  --dur-morph:260ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* -- type. Gilmer only. Machine values get tabular-nums, not a 2nd face.
     Nothing renders below 11px outside .paper. ------------------------- */
  --f:"Gilmer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-micro:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-3xl:36px;

  /* -- layout ------------------------------------------------------------ */
  --nav-w:240px;
  --nav-w-collapsed:72px;
  --app-max:1440px;
  --detail-max:1280px;
  --read-max:720px;
  --header-h:56px;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#080C18;
  --surface:#0F1426;
  --surface-2:#141A30;
  --surface-3:#1C2440;
  --ink:#ECEAE4;
  --muted:#A4AABE;
  --faint:#7B8298;
  --line:color-mix(in srgb,#ECEAE4 14%,transparent);
  --line-strong:color-mix(in srgb,#ECEAE4 28%,transparent);

  --navy:#9DB4EC;
  --navy-hover:#BACBF5;
  --navy-quiet:color-mix(in srgb,#9DB4EC 14%,transparent);
  --on-navy-dim:color-mix(in srgb,#080C18 72%,transparent);

  --red:#D98A80;
  --red-text:#E29A90;
  --red-quiet:color-mix(in srgb,#D98A80 14%,transparent);

  --stop:#DE6478;
  --stop-quiet:color-mix(in srgb,#DE6478 15%,transparent);
  --go:#6FBF95;
  --go-quiet:color-mix(in srgb,#6FBF95 15%,transparent);
  --wait:#D9A94E;
  --wait-quiet:color-mix(in srgb,#D9A94E 16%,transparent);
  --flow:#7FB4D8;
  --flow-quiet:color-mix(in srgb,#7FB4D8 14%,transparent);
  --idle:#A4AABE;
  --idle-quiet:color-mix(in srgb,#A4AABE 13%,transparent);

  --ig-light:color-mix(in srgb,#141A30 76%,transparent);
  --ig-navy:color-mix(in srgb,#011251 82%,transparent);
  --ig-media:color-mix(in srgb,#000 46%,transparent);
  --ig-edge:color-mix(in srgb,#ECEAE4 16%,transparent);

  --card-shadow:none;
  --card-border:1px solid var(--line);
  --shadow-3:0 8px 24px color-mix(in srgb,#000 40%,transparent);
  --shadow-4:0 18px 48px color-mix(in srgb,#000 55%,transparent);
}}

:root[data-theme="dark"]{
  --paper:#080C18;
  --surface:#0F1426;
  --surface-2:#141A30;
  --surface-3:#1C2440;
  --ink:#ECEAE4;
  --muted:#A4AABE;
  --faint:#7B8298;
  --line:color-mix(in srgb,#ECEAE4 14%,transparent);
  --line-strong:color-mix(in srgb,#ECEAE4 28%,transparent);
  --navy:#9DB4EC;
  --navy-hover:#BACBF5;
  --navy-quiet:color-mix(in srgb,#9DB4EC 14%,transparent);
  --on-navy-dim:color-mix(in srgb,#080C18 72%,transparent);
  --red:#D98A80;
  --red-text:#E29A90;
  --red-quiet:color-mix(in srgb,#D98A80 14%,transparent);
  --stop:#DE6478;
  --stop-quiet:color-mix(in srgb,#DE6478 15%,transparent);
  --go:#6FBF95;
  --go-quiet:color-mix(in srgb,#6FBF95 15%,transparent);
  --wait:#D9A94E;
  --wait-quiet:color-mix(in srgb,#D9A94E 16%,transparent);
  --flow:#7FB4D8;
  --flow-quiet:color-mix(in srgb,#7FB4D8 14%,transparent);
  --idle:#A4AABE;
  --idle-quiet:color-mix(in srgb,#A4AABE 13%,transparent);
  --ig-light:color-mix(in srgb,#141A30 76%,transparent);
  --ig-navy:color-mix(in srgb,#011251 82%,transparent);
  --ig-media:color-mix(in srgb,#000 46%,transparent);
  --ig-edge:color-mix(in srgb,#ECEAE4 16%,transparent);
  --card-shadow:none;
  --card-border:1px solid var(--line);
  --shadow-3:0 8px 24px color-mix(in srgb,#000 40%,transparent);
  --shadow-4:0 18px 48px color-mix(in srgb,#000 55%,transparent);
}

@media (min-width:769px){:root{--ig-blur:22px}}
/* ============================================================================
   PAMUUC SUITE — component layer
   One status pill, one card, one table, one timeline — used by all three
   surfaces, so a state cannot be called two things or drawn two ways.
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:var(--fs-base);line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- type ------------------------------------------------------------- */
.t-display{font-size:clamp(32px,5.5vw,60px);line-height:1.03;letter-spacing:-.035em;font-weight:300;text-wrap:balance}
.t-h1{font-size:var(--fs-3xl);line-height:1.1;letter-spacing:-.03em;font-weight:300;text-wrap:balance}
.t-h2{font-size:var(--fs-2xl);line-height:1.15;letter-spacing:-.025em;font-weight:300;text-wrap:balance}
.t-h3{font-size:var(--fs-xl);line-height:1.25;letter-spacing:-.018em;font-weight:400}
.t-h4{font-size:var(--fs-lg);line-height:1.3;letter-spacing:-.01em;font-weight:500}
.t-h5{font-size:var(--fs-md);line-height:1.35;font-weight:500}
.t-lead{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);font-weight:300}
.t-body{font-size:var(--fs-base);line-height:1.6}
.t-sm{font-size:var(--fs-sm);line-height:1.5}
.t-xs{font-size:var(--fs-xs);line-height:1.45}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.med{font-weight:500}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.read{max-width:var(--read-max)}
/* the only uppercase in the system besides .pill — a section eyebrow */
.eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow-red{color:var(--red-text)}

/* ---- glass chrome. Opaque first, translucent second, blur last. ------- */
.glass{background:var(--surface);background:var(--ig-light);border-bottom:1px solid var(--ig-edge)}
@supports (backdrop-filter:blur(2px)){
  .glass{backdrop-filter:blur(var(--ig-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--ig-blur)) saturate(120%)}
}
.glass-panel{background:var(--surface);background:var(--ig-light);border:1px solid var(--ig-edge);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
@supports (backdrop-filter:blur(2px)){
  .glass-panel{backdrop-filter:blur(var(--ig-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--ig-blur)) saturate(120%)}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .glass,.glass-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--line-strong)}
}

/* ---- controls are capsules -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:36px;padding:0 var(--sp-4);border-radius:var(--radius-full);
  border:1px solid transparent;background:transparent;color:var(--ink);
  font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-focus) var(--ease),border-color var(--dur-focus) var(--ease),transform var(--dur-press) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:active{transform:none}
.btn--primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.btn--primary:hover:not(:disabled){background:var(--navy-hover);border-color:var(--navy-hover)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn--ghost:hover:not(:disabled){border-color:var(--ink);background:var(--surface-2)}
.btn--quiet{color:var(--muted)}
.btn--quiet:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.btn--danger{background:transparent;border-color:var(--stop);color:var(--stop)}
.btn--danger:hover:not(:disabled){background:var(--stop-quiet)}
.btn--lg{min-height:46px;padding:0 var(--sp-6);font-size:var(--fs-md)}
/* On a photograph the surface tokens do not apply: both themes sit on the same
   dark image, so this variant uses literal light values rather than inverting
   tokens that would flip with the theme. */
.btn--onphoto{background:transparent;border-color:rgba(244,242,237,.55);color:#F4F2ED}
.btn--onphoto:hover:not(:disabled){background:rgba(244,242,237,.12);border-color:#F4F2ED}

.btn--sm{min-height:28px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}

/* ---- status pill. The ONLY way a state is drawn. Non-interactive. ----- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--radius-full);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;line-height:1.5;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill--idle{background:var(--idle-quiet);color:var(--idle)}
.pill--flow{background:var(--flow-quiet);color:var(--flow)}
.pill--wait{background:var(--wait-quiet);color:var(--wait)}
.pill--go{background:var(--go-quiet);color:var(--go)}
.pill--stop{background:var(--stop-quiet);color:var(--stop)}
.pill--merch{background:var(--red-quiet);color:var(--red-text)}
.pill--plain{background:var(--surface-2);color:var(--muted)}

/* ---- content cards are SQUARE ----------------------------------------- */
.card{background:var(--surface);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:0;padding:var(--sp-5)}
.card--flush{padding:0}
.card--quiet{background:var(--surface-2);box-shadow:none}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.card-head .t-h4{letter-spacing:-.01em}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--sp-4)}
.stack-2>*+*{margin-top:var(--sp-2)}
.stack-3>*+*{margin-top:var(--sp-3)}
.stack-6>*+*{margin-top:var(--sp-6)}
.stack-8>*+*{margin-top:var(--sp-8)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.wrap-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sep{height:1px;background:var(--line);border:0;margin:var(--sp-5) 0}
.spacer{flex:1}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

/* ---- key/value ------------------------------------------------------- */
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.kv dt{color:var(--muted)}
.kv dd{color:var(--ink)}
.factline{display:flex;gap:var(--sp-2);font-size:var(--fs-sm);align-items:baseline}
.factline span:first-child{color:var(--muted);min-width:96px;flex:none}

/* ---- metric tile ------------------------------------------------------ */
.tile{background:var(--surface);border:var(--card-border);box-shadow:var(--card-shadow);padding:var(--sp-4);border-radius:0}
.tile-v{font-size:var(--fs-2xl);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.tile-l{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.tile-n{font-size:var(--fs-micro);color:var(--faint);margin-top:var(--sp-2)}

/* ---- tables ----------------------------------------------------------- */
.tw{overflow-x:auto;border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:620px}
table.tbl th{
  text-align:left;font-weight:500;font-size:var(--fs-xs);color:var(--muted);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--surface-2);position:sticky;top:0;z-index:1;
}
table.tbl td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr.clickable{cursor:pointer;transition:background-color var(--dur-focus) var(--ease)}
table.tbl tbody tr.clickable:hover{background:var(--surface-2)}
.tnum{font-variant-numeric:tabular-nums;text-align:right}
.tbl-empty{padding:var(--sp-8);text-align:center;color:var(--muted);font-size:var(--fs-sm)}

/* ---- list rows (the workhorse of both dashboards) --------------------- */
.rows{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow)}
.rw{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-4);border-bottom:1px solid var(--line);text-align:left;width:100%;background:transparent;border-left:0;border-right:0;border-top:0;cursor:pointer;transition:background-color var(--dur-focus) var(--ease)}
.rw:last-child{border-bottom:0}
.rw:hover{background:var(--surface-2)}
.rw--static{cursor:default}
.rw--static:hover{background:transparent}
/* The title and the line under it are spans, and a span is inline: without
   this they ran together on one line and the margin meant nothing, so every
   row in the app read "Your account is ready 10 Sept, 19:37". */
.rw-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rw-t{font-size:var(--fs-base);font-weight:500;line-height:1.35;display:block}
.rw-s{font-size:var(--fs-sm);color:var(--muted);display:block}
.rw-side{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.rw-flag{width:3px;align-self:stretch;flex:none;margin:calc(var(--sp-4) * -1) 0;margin-right:calc(var(--sp-2) * -1)}
.rw-flag--stop{background:var(--stop)}
.rw-flag--wait{background:var(--wait)}
.rw-flag--go{background:var(--go)}
@media (max-width:620px){
  .rw{flex-wrap:wrap}
  .rw-side{width:100%;justify-content:flex-start;padding-left:0}
}

/* ---- stage timeline --------------------------------------------------- */
.tl{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tl::-webkit-scrollbar{display:none}
.tl-s{flex:1;min-width:118px;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-top:2px solid var(--line);position:relative}
.tl-s+.tl-s{padding-left:var(--sp-3)}
.tl-s--done{border-top-color:var(--go)}
.tl-s--now{border-top-color:var(--navy)}
.tl-n{font-size:var(--fs-sm);font-weight:500;margin-top:var(--sp-1);color:var(--muted)}
.tl-s--done .tl-n{color:var(--ink)}
.tl-s--now .tl-n{color:var(--navy);font-weight:700}
.tl-m{font-size:var(--fs-micro);color:var(--faint);margin-top:2px}
.tl-s--done .tl-m{color:var(--go)}

/* ---- forms ------------------------------------------------------------ */
.field{display:block;margin-bottom:var(--sp-4)}
.field-l{display:block;font-size:var(--fs-sm);font-weight:500;margin-bottom:var(--sp-2)}
.field-h{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-2);margin-top:-2px}
.inp,select.inp,textarea.inp{
  width:100%;padding:9px var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-size:var(--fs-sm);
  transition:border-color var(--dur-focus) var(--ease);
}
.inp:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-quiet)}
textarea.inp{min-height:84px;resize:vertical;line-height:1.5}
.inp--sm{padding:5px var(--sp-2);font-size:var(--fs-sm);width:auto}
.inp--num{text-align:right;font-variant-numeric:tabular-nums;width:76px}
.inp--err{border-color:var(--stop)}
.err{color:var(--stop);font-size:var(--fs-xs);margin-top:var(--sp-1);display:block}
.choice{display:flex;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;background:var(--surface);transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.choice:hover{border-color:var(--navy)}
.choice input{margin-top:3px;accent-color:var(--navy);flex:none}
.choice--on{border-color:var(--navy);background:var(--navy-quiet)}
.choice>span:last-child{display:block;flex:1;min-width:0}
.choice-t{display:block;font-size:var(--fs-sm);font-weight:500}
.choice-d{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}

/* ---- swatches (colourways) -------------------------------------------- */
.sw{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);flex:none}
.sw--lg{width:30px;height:30px}
.sw-btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:4px 10px 4px 4px;border-radius:var(--radius-full);border:1px solid var(--line-strong);background:var(--surface);font-size:var(--fs-xs);cursor:pointer;transition:border-color var(--dur-focus) var(--ease)}
.sw-btn:hover{border-color:var(--ink)}
.sw-btn--on{border-color:var(--navy);background:var(--navy-quiet)}

/* ---- messages --------------------------------------------------------- */
.msg{display:flex;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:0}
.av{width:30px;height:30px;border-radius:50%;background:var(--surface-3);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;flex:none;letter-spacing:.02em}
.av--studio{background:var(--navy);color:var(--paper)}
.msg-b{flex:1;min-width:0}
.msg-h{display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap;margin-bottom:var(--sp-1)}
.msg-a{font-size:var(--fs-sm);font-weight:500}
.msg-r{font-size:var(--fs-xs);color:var(--faint)}
.msg-t{font-size:var(--fs-sm);line-height:1.55;white-space:pre-wrap}
.msg--internal{background:var(--wait-quiet);margin:0 calc(var(--sp-4)*-1);padding-left:var(--sp-4);padding-right:var(--sp-4);border-left:3px solid var(--wait)}

/* ---- activity feed ---------------------------------------------------- */
.feed{position:relative;padding-left:var(--sp-5)}
.feed::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line)}
.fe{position:relative;padding:var(--sp-2) 0;font-size:var(--fs-sm)}
.fe::before{content:"";position:absolute;left:calc(var(--sp-5)*-1);top:12px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.fe--now::before{border-color:var(--navy);background:var(--navy)}
.fe-m{color:var(--faint);font-size:var(--fs-xs);margin-top:1px}

/* ---- banner (reserved for high priority only) ------------------------- */
.banner{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-left:3px solid var(--navy);background:var(--surface-2);align-items:flex-start}
.banner--wait{border-left-color:var(--wait)}
.banner--stop{border-left-color:var(--stop)}
.banner--go{border-left-color:var(--go)}
.banner--flow{border-left-color:var(--flow)}   /* in motion, waiting on no one */
.banner-t{font-size:var(--fs-sm);font-weight:500}
.banner-d{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}

/* ---- tabs are capsules ------------------------------------------------ */
.tabs{display:flex;gap:var(--sp-1);flex-wrap:wrap;padding:3px;background:var(--surface-2);border-radius:var(--radius-full);width:fit-content;max-width:100%}
.tab{padding:6px var(--sp-4);border-radius:var(--radius-full);border:0;background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-focus) var(--ease),color var(--dur-focus) var(--ease)}
.tab .badge-n{margin-left:6px;vertical-align:1px}

/* Notifications — a read list, not a table of rows. The day is said once,
   each entry states what happened and what it wants, and anything asking for
   an answer carries the answer with it. */
.ntf-day{font-size:var(--fs-sm);font-weight:500;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 var(--sp-3)}
.ntf-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ntf{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;text-align:left;
  padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);border:0;border-bottom:1px solid var(--line);
  border-left:2px solid transparent;background:transparent;font:inherit;color:inherit}
.ntf--go{cursor:pointer;transition:background-color var(--dur-focus) var(--ease)}
.ntf--go:hover{background:var(--navy-quiet)}
.ntf--new{border-left-color:var(--navy);background:var(--navy-quiet)}
.ntf--need{border-left-color:var(--wait)}
.ntf-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.ntf-t{font-size:var(--fs-base);font-weight:500;line-height:1.35}
.ntf-st{flex:none;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ntf-st--need{color:var(--wait)}
.ntf-st--done{color:var(--go)}
.ntf-st--info{color:var(--muted)}
.ntf-m{font-size:var(--fs-sm);color:var(--muted)}
.ntf-do{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
@media (max-width:560px){
  .ntf-top{flex-direction:column;gap:2px}
  .ntf-st{align-self:flex-start}
}
.tab:hover{color:var(--ink)}
.tab--on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

/* ---- empty state ------------------------------------------------------ */
.empty{padding:var(--sp-9) var(--sp-5);text-align:center;border:1px dashed var(--line-strong);background:var(--surface)}
.empty-t{font-size:var(--fs-md);font-weight:500}
.empty-d{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-2) auto var(--sp-4);max-width:46ch}

/* ---- toast (functional surface: 28px panel) --------------------------- */
.toasts{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:90;display:flex;flex-direction:column;gap:var(--sp-2);max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--surface);background:var(--ig-light);border:1px solid var(--ig-edge);border-radius:var(--radius-xl);padding:var(--sp-3) var(--sp-5);box-shadow:var(--shadow-4);font-size:var(--fs-sm);animation:tin var(--dur-morph) var(--ease)}
@supports (backdrop-filter:blur(2px)){.toast{backdrop-filter:blur(var(--ig-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--ig-blur)) saturate(120%)}}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast-t{font-weight:500}
.toast-d{color:var(--muted);font-size:var(--fs-xs);margin-top:2px}

/* ---- modal ------------------------------------------------------------ */
.scrim{position:fixed;inset:0;background:var(--ig-media);z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);overflow-y:auto}
@supports (backdrop-filter:blur(2px)){.scrim{backdrop-filter:blur(6px)}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);width:min(660px,100%);max-height:88vh;overflow-y:auto;animation:min var(--dur-morph) var(--ease)}
.modal--wide{width:min(960px,100%)}
@keyframes min{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal-h{padding:var(--sp-5);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);position:sticky;top:0;background:var(--surface);z-index:2}
.modal-b{padding:var(--sp-5)}
.modal-f{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:var(--sp-2);position:sticky;bottom:0;background:var(--surface);flex-wrap:wrap}

/* ---- diff (what changed between revisions) ---------------------------- */
.diff{font-size:var(--fs-sm);display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3);align-items:baseline}
.diff-k{color:var(--muted)}
.was{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--stop)}
.now{color:var(--ink);font-weight:500}
.arrow{color:var(--faint);padding:0 4px}

/* ---- misc ------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);background:var(--surface-2);font-size:var(--fs-xs);color:var(--muted)}
.chip--on{background:var(--navy-quiet);color:var(--navy)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--stop);flex:none}
.badge-n{min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--stop);color:var(--paper);font-size:var(--fs-micro);font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.crumbs{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap}
.crumbs a{cursor:pointer}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.link{color:var(--navy);cursor:pointer;font-weight:500}
.link:hover{text-decoration:underline}
.bar{height:5px;background:var(--surface-3);overflow:hidden}
.bar-f{height:100%;background:var(--navy)}
.bar-f--go{background:var(--go)}
.bar-f--wait{background:var(--wait)}
.mono-ref{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:var(--fs-xs);color:var(--muted)}
.thumb{aspect-ratio:4/5;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:var(--fs-xs);overflow:hidden;position:relative}
.thumb-sq{aspect-ratio:1;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:var(--fs-xs)}
/* ============================================================================
   PAMUUC SUITE — layout for the three surfaces
   Same chrome language, three densities.
   ========================================================================= */

/* ---- brand mark -------------------------------------------------------- */
.brand{display:inline-flex;align-items:baseline;gap:7px;font-weight:800;letter-spacing:-.01em;cursor:pointer;font-size:var(--fs-md)}
.brand-bar{color:var(--line-strong);font-weight:300}
.brand-sub{font-weight:500;letter-spacing:.02em}
.brand--sm{font-size:var(--fs-sm)}

/* ---- surface switcher (prototype affordance) --------------------------- */
.switch{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--sp-4);z-index:95;
  display:flex;gap:2px;padding:3px;border-radius:var(--radius-full);
  background:var(--surface);background:var(--ig-navy);border:1px solid var(--ig-edge);box-shadow:var(--shadow-4)}
@supports (backdrop-filter:blur(2px)){.switch{backdrop-filter:blur(var(--ig-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--ig-blur)) saturate(120%)}}
/* --ig-navy is a fixed dark ground in BOTH themes, so its text must NOT use
   --on-navy-dim or --paper: both invert, and in dark mode that yields
   dark-on-dark. Literal light values here, like --band/--on-band. */
.switch button{padding:6px 14px;border-radius:var(--radius-full);border:0;background:transparent;
  color:color-mix(in srgb,#F4F2ED 74%,transparent);font-size:var(--fs-xs);font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-focus) var(--ease),color var(--dur-focus) var(--ease)}
.switch button:hover{color:#F4F2ED}
.switch button.on{background:color-mix(in srgb,#F4F2ED 22%,transparent);color:#F4F2ED}
@media (max-width:820px){
  /* the switcher is a prototype affordance, not product chrome — it must never
     be wider than the screen it is explaining */
  .switch{left:var(--sp-2);right:var(--sp-2);transform:none;max-width:calc(100% - var(--sp-4));
    justify-content:center;overflow-x:auto;scrollbar-width:none}
  .switch::-webkit-scrollbar{display:none}
  .switch button{padding:6px 10px;font-size:var(--fs-micro);flex:none}
}

/* ============ PUBLIC WEBSITE ============================================= */
.pub{background:var(--paper)}
.pub-hd{position:sticky;top:0;z-index:60;height:var(--header-h)}
.pub-hd-in{max-width:var(--app-max);margin:0 auto;height:100%;padding:0 var(--sp-6);display:flex;align-items:center;gap:var(--sp-6);flex-wrap:nowrap}
.pub-nav{display:flex;gap:var(--sp-5);align-items:center;font-size:var(--fs-sm);white-space:nowrap}
.pub-nav a{color:var(--muted);cursor:pointer;transition:color var(--dur-focus) var(--ease)}
.pub-nav a:hover,.pub-nav a.on{color:var(--ink)}
.pub-wrap{max-width:var(--app-max);margin:0 auto;padding:0 var(--sp-6)}
.pub-sec{padding:var(--sp-10) 0}
.pub-sec--tight{padding:var(--sp-9) 0}
.pub-band{background:var(--band);color:var(--on-band)}
.pub-band .t-lead,.pub-band .muted{color:var(--on-band-dim)}
.pub-band .eyebrow{color:var(--on-band-dim)}
.pub-hero{padding:var(--sp-10) 0 var(--sp-9)}
.pub-ft{border-top:1px solid var(--line);padding:var(--sp-8) 0;font-size:var(--fs-sm);color:var(--muted)}
.offer{border:var(--card-border);box-shadow:var(--card-shadow);background:var(--surface);padding:var(--sp-7);display:flex;flex-direction:column;min-height:340px}
.offer--merch{border-top:3px solid var(--red)}
.offer--custom{border-top:3px solid var(--navy)}
.hero-art{aspect-ratio:16/7;background:var(--band);display:flex;align-items:flex-end;padding:var(--sp-7);color:var(--on-band)}
@media (max-width:900px){.pub-sec{padding:var(--sp-9) 0}.pub-wrap,.pub-hd-in{padding:0 var(--sp-4)}}

/* ---- question pages (one question at a time) --------------------------- */
.q-wrap{max-width:var(--read-max);margin:0 auto;padding:var(--sp-8) var(--sp-5) var(--sp-10)}
.q-prog{display:flex;gap:3px;margin-bottom:var(--sp-6)}
.q-prog i{height:3px;flex:1;background:var(--surface-3)}
.q-prog i.on{background:var(--navy)}
.q-prog i.done{background:var(--go)}

/* ============ APP SHELL (account + studio) =============================== */
.app{display:flex;min-height:100vh;background:var(--paper)}
.side{width:var(--nav-w);flex:none;border-right:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-hd{padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.side-scope{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2);line-height:1.4}
.side-nav{padding:0 var(--sp-3);flex:1}
.side-grp{font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:var(--sp-4) var(--sp-3) var(--sp-2)}
.nv{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:7px var(--sp-3);border:0;background:transparent;
  border-radius:var(--radius-full);color:var(--muted);font-size:var(--fs-sm);cursor:pointer;text-align:left;
  transition:background-color var(--dur-focus) var(--ease),color var(--dur-focus) var(--ease)}
.nv:hover{background:var(--surface-3);color:var(--ink)}
.nv--on{background:var(--navy);color:var(--paper);font-weight:500}
.nv--on:hover{background:var(--navy);color:var(--paper)}
.nv-i{width:15px;flex:none;text-align:center;opacity:.85;font-size:13px}
.nv-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-ft{padding:var(--sp-4);border-top:1px solid var(--line)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6)}
.top-t{font-size:var(--fs-md);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.body{flex:1;padding:var(--sp-6);max-width:var(--app-max);width:100%}
.body--narrow{max-width:calc(var(--detail-max) + var(--sp-6)*2)}
.page-hd{margin-bottom:var(--sp-6)}
.page-hd .t-h2{margin-top:var(--sp-2)}
.page-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-2);max-width:68ch}

/* iconless round avatar button in the top bar */
.ub{display:flex;align-items:center;gap:var(--sp-2);padding:3px 3px 3px var(--sp-3);border-radius:var(--radius-full);
  border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:var(--fs-xs)}
.ub:hover{border-color:var(--ink)}
.iconbtn{width:34px;height:34px;border-radius:var(--radius-full);border:1px solid transparent;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--muted);
  transition:background-color var(--dur-focus) var(--ease)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn .badge-n{position:absolute;top:1px;right:0}

/* two-column detail */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-6);align-items:start}
.cols--wide{grid-template-columns:minmax(0,1fr) 400px}
@media (max-width:1080px){.cols,.cols--wide{grid-template-columns:minmax(0,1fr)}}

/* mobile shell */
.mob-nav{display:none}
@media (max-width:900px){
  .side{display:none}
  .body{padding:var(--sp-4) var(--sp-4) 96px}
  .top{padding:0 var(--sp-4)}
  .mob-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;
    border-top:1px solid var(--ig-edge);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mob-nav .nv{flex-direction:column;gap:3px;font-size:var(--fs-micro);padding:6px 2px;border-radius:var(--radius-md)}
  .mob-nav .nv-i{font-size:15px}
  .switch{bottom:auto;top:calc(var(--header-h) + 8px)}
  body.is-public .switch{bottom:var(--sp-4);top:auto}
}

/* ---- stage header (the orientation device, shared by both apps) -------- */
.stagehd{background:var(--surface);border:var(--card-border);box-shadow:var(--card-shadow);padding:var(--sp-5)}
.stage-now{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.stage-col{flex:1;min-width:190px}
.stage-lbl{font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--sp-2)}
.stage-txt{font-size:var(--fs-sm);line-height:1.5}

/* ---- customer-view panel (Studio only) -------------------------------- */
.cvp{border:1px solid var(--navy);background:var(--navy-quiet);padding:var(--sp-4)}
.cvp-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}

/* ---- garment builder --------------------------------------------------- */
.gcard{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow)}
.gcard-hd{display:flex;gap:var(--sp-4);padding:var(--sp-4);border-bottom:1px solid var(--line);align-items:flex-start}
.gcard-th{width:56px;height:70px;background:var(--surface-3);flex:none;display:flex;align-items:center;justify-content:center;font-size:20px}
.gcard-b{padding:var(--sp-4)}
.cw{display:grid;grid-template-columns:1fr auto auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.cw:last-of-type{border-bottom:0}
.sizes{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.size-f{display:flex;flex-direction:column;gap:3px;align-items:center}
.size-l{font-size:var(--fs-micro);color:var(--muted);font-weight:700;letter-spacing:.04em}
.size-i{width:52px;padding:5px;text-align:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.size-i:focus{outline:none;border-color:var(--navy)}
.sum-ok{color:var(--go);font-size:var(--fs-xs);font-weight:500}
.sum-bad{color:var(--stop);font-size:var(--fs-xs);font-weight:500}

/* ---- merchandise ------------------------------------------------------- */
.pcard{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);cursor:pointer;
  transition:transform var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease);display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.pcard-b{padding:var(--sp-4);flex:1;display:flex;flex-direction:column;gap:var(--sp-2)}
.pcard-img{position:relative;aspect-ratio:1;background:var(--surface-2);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
/* multiply drops the supplier's white studio ground into our paper. It is
   wrong on a dark ground, so it is switched off there — and it must never sit
   on a `position:sticky` ancestor, because the stacking context it creates
   breaks sticky compositing. */
/* multiply drops the supplier's white studio ground into our paper. It is only
   applied on the listing cards: inside `.pdp-media`, which is position:sticky,
   the stacking context it creates breaks sticky compositing and the page paints
   in the wrong place. The product photography already has a near-paper ground,
   so the hero does not need it. */
.pcard-img img{mix-blend-mode:multiply}
:root[data-theme="dark"] .pcard-img img{mix-blend-mode:normal}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pcard-img img{mix-blend-mode:normal}
}
.pcard-img img{width:100%;height:100%;object-fit:contain}
.pcard-ph{font-size:52px}
.pcard-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3);font-size:var(--fs-micro);color:var(--muted);white-space:nowrap;
  background:linear-gradient(to top,var(--surface) 55%,transparent)}
.pcard-meta>span{flex:none}
.pcard-meta .row{overflow:hidden;min-width:0}
.pcard-more{font-size:var(--fs-micro);color:var(--muted);font-weight:500}
.sw--xs{width:13px;height:13px}

/* ---- product page ------------------------------------------------------
   Two columns: media pins while the option column scrolls. The order summary
   sits inline at the END of the options, never floating over them, and a slim
   fixed bar carries the running total. The body reserves room for the bar so
   it can never cover content. */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:var(--sp-8);align-items:start}
.pdp-media{position:sticky;top:calc(var(--header-h) + var(--sp-4));display:grid;
  grid-template-columns:74px minmax(0,1fr);gap:var(--sp-3)}
.pdp-rail{display:flex;flex-direction:column;gap:var(--sp-2);max-height:520px;overflow-y:auto;
  scrollbar-width:thin}
.pdp-thumb{width:74px;height:88px;padding:0;flex:none;border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;overflow:hidden;
  transition:border-color var(--dur-focus) var(--ease)}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-thumb.on{border-color:var(--ink);border-width:2px}
.pdp-hero{position:relative;aspect-ratio:1;background:var(--surface-2);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.pdp-hero img{width:100%;height:100%;object-fit:contain}
.pdp-badges{position:absolute;top:var(--sp-3);left:var(--sp-3);display:flex;gap:5px;flex-wrap:wrap;z-index:2}

/* placement map, under the hero */
.place-map{grid-column:1 / -1;margin-top:var(--sp-3);border:var(--card-border);
  background:var(--surface);padding:var(--sp-4)}
.place-map-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-3)}
.place-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.place-cell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:var(--sp-3) var(--sp-2);
  border:1px dashed var(--line-strong);background:transparent;cursor:pointer;font-size:var(--fs-xs);
  color:var(--muted);text-align:center;
  transition:border-color var(--dur-focus) var(--ease),color var(--dur-focus) var(--ease)}
.place-cell:hover{border-color:var(--ink);color:var(--ink)}
.place-cell.on{border-style:solid;border-color:var(--navy);background:var(--navy-quiet);color:var(--ink)}
.place-cell:disabled{opacity:.4;cursor:not-allowed}
.place-n{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);color:var(--muted);font-size:var(--fs-micro);font-weight:700}
.place-cell.on .place-n{background:var(--navy);color:var(--paper)}

/* ---- options column ---------------------------------------------------- */
.pdp-cfg{display:flex;flex-direction:column;min-width:0}
.pdp-from{margin-top:var(--sp-4);font-size:var(--fs-2xl);font-weight:300;letter-spacing:-.025em}
.pdp-step{padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.pdp-step:first-of-type{border-top:0;padding-top:var(--sp-4)}
.step-h{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.step-n{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:700}
.step-t{font-size:var(--fs-md);font-weight:500}
.step-v{font-size:var(--fs-sm);color:var(--muted);margin-left:auto;text-align:right}

/* A block of colour, as in the reference: a fixed grid rather than a ragged
   row, so a product with forty colours still reads as one object. */
/* 143 colours: the grid fills the column and wraps, rather than stacking
   extra rows inside a 420px ribbon */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:6px}
.pdp-sw{width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);
  cursor:pointer;padding:0;transition:box-shadow var(--dur-focus) var(--ease)}
.pdp-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}

/* one quantity control, not two */
.qgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.qcard{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-2);border:1px solid var(--line-strong);
  background:var(--surface);cursor:pointer;text-align:center;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.qcard:hover{border-color:var(--ink)}
.qcard.on{border-color:var(--ink);border-width:2px;background:var(--surface-2)}
.qcard b{font-size:var(--fs-md);font-weight:500}
.qcard span{font-size:var(--fs-xs);color:var(--muted)}
.qcard em{font-style:normal;font-size:var(--fs-micro);font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--go);min-height:13px}

/* placement cards */
.place-card{border:var(--card-border);background:var(--surface);margin-bottom:var(--sp-3)}
.place-card-h{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.place-badge{width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:700;flex:none}
.place-opts{padding:var(--sp-4);display:grid;gap:0}
.opt-lbl{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.opt-hint{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:6px}
.opt-cost{float:right;font-size:var(--fs-xs);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.qty-pill{padding:6px 13px;border-radius:var(--radius-full);border:1px solid var(--line-strong);
  background:var(--surface);font-size:var(--fs-sm);cursor:pointer;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.qty-pill.sm{font-size:var(--fs-xs);padding:5px 11px}
.qty-pill:hover{border-color:var(--ink)}
.qty-pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.art-drop{width:100%;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:var(--sp-3);border:1px dashed var(--line-strong);background:transparent;cursor:pointer;
  font-size:var(--fs-sm);text-align:left;transition:border-color var(--dur-focus) var(--ease)}
.art-drop:hover{border-color:var(--navy)}
.art-on{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-3);border:1px solid var(--go);background:var(--go-quiet);font-size:var(--fs-sm)}

/* ---- order summary: inline, at the end, never floating ----------------- */
.pdp-sum{margin-top:var(--sp-5);border:1px solid var(--line-strong);background:var(--surface-2);
  padding:var(--sp-5)}
.sum-row{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline;
  padding:6px 0;font-size:var(--fs-sm)}
.sum-note{display:block;font-size:var(--fs-xs);color:var(--muted)}
.sum-sep{border-top:1px solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-2)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:2px solid var(--ink);
  font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em}
.sum-eff{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.pdp-deliver{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.seg2{display:flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--radius-full)}
.seg2 button{padding:6px 16px;border-radius:var(--radius-full);border:0;background:transparent;
  font-size:var(--fs-sm);cursor:pointer;color:var(--muted)}
.seg2 button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

/* ---- fixed action bar --------------------------------------------------- */
body.has-bar{padding-bottom:84px}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface);
  border-top:1px solid var(--line-strong);box-shadow:0 -2px 10px color-mix(in srgb,#011251 8%,transparent);
  padding:var(--sp-3) var(--sp-6)}
.buybar-in{max-width:var(--app-max);margin:0 auto;display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.buybar-fig{display:flex;flex-direction:column}
.buybar-fig b{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
.buybar-fig span{font-size:var(--fs-xs);color:var(--muted)}
@media (max-width:1080px){
  .pdp{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .pdp-media{position:static}
}
@media (max-width:620px){
  .pdp-media{grid-template-columns:minmax(0,1fr)}
  .pdp-rail{flex-direction:row;max-height:none;order:2}
  .qgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .buybar-in{gap:var(--sp-3)}
  body.has-bar{padding-bottom:132px}
}

/* ---- print / paper facsimile (the only place under 11px) --------------- */
.paper{background:#fff;color:#111;padding:var(--sp-7);font-size:10px;line-height:1.5;border:1px solid var(--line)}
.paper h4{font-size:13px;font-weight:700}
.paper table{width:100%;border-collapse:collapse;font-size:10px;margin-top:8px}
.paper th,.paper td{border-bottom:1px solid #ddd;padding:4px 6px;text-align:left}
.paper td.n,.paper th.n{text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================================
   PUBLIC SITE — split gateway and the two branch sites
   One root that is a choice, then two sites that never borrow each other's
   navigation. Page titles and the sentence under them run the full width of
   the content column, on every page, by rule.
   ========================================================================= */

/* ---- header additions --------------------------------------------------- */
.hd-branch{font-size:var(--fs-sm);font-weight:500;letter-spacing:-.01em;color:var(--ink);
  cursor:pointer;padding-left:var(--sp-4);margin-left:calc(var(--sp-4) * -1 + 4px);
  border-left:1px solid var(--line);white-space:nowrap}
.hd-branch--merch{color:var(--red-text)}

/* ---- full-width page heading ------------------------------------------- */
.page-head{padding:var(--sp-9) 0 var(--sp-6);border-bottom:1px solid var(--line)}
.page-title{font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.032em;
  font-weight:300;text-wrap:pretty;margin-top:var(--sp-4);max-width:none}
.page-desc{font-size:clamp(16px,1.35vw,20px);line-height:1.55;font-weight:300;
  color:var(--muted);margin-top:var(--sp-5);max-width:none}
.sec-title{font-size:var(--fs-2xl);line-height:1.15;letter-spacing:-.025em;font-weight:300;
  text-wrap:pretty;margin-top:var(--sp-3);max-width:none}
.sec-desc{font-size:var(--fs-base);line-height:1.6;color:var(--muted);
  margin-top:var(--sp-4);max-width:none}
.pub-sec--top{padding-top:var(--sp-8)}
.surface-2{background:var(--surface-2)}
.gap-lg{gap:var(--sp-5)}
.btn-row--top{margin-top:var(--sp-7)}
.card-t{margin-top:var(--sp-2);margin-bottom:var(--sp-3)}
.card-foot{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);color:var(--muted)}
.card--num{display:flex;flex-direction:column}
.card--num .t-sm{flex:1}
.note{margin-top:var(--sp-6)}
.list-bar{margin-bottom:var(--sp-5);gap:var(--sp-4);flex-wrap:wrap}
.proc-p{margin-top:var(--sp-2)}
.proc-eyebrow{margin-top:var(--sp-5)}
.proc .t-sm{margin-top:var(--sp-2)}

/* ---- breadcrumb --------------------------------------------------------- */
.crumb{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-5)}
.crumb a{cursor:pointer;color:var(--muted)}
.crumb a:hover{color:var(--ink)}
.crumb-sep{color:var(--line-strong)}
.crumb-here{color:var(--ink)}

/* ---- the gateway -------------------------------------------------------- */
.gate{display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(100svh - var(--header-h));background:var(--band)}
.gate-half{position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:flex-end;min-height:460px}
.gate-half + .gate-half{border-left:1px solid rgba(244,242,237,.16)}
.gate-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;transition:transform 1.1s var(--ease)}
.gate-half:hover .gate-img{transform:scale(1.035)}
.gate-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,14,52,.92) 0%,rgba(2,14,52,.72) 38%,rgba(2,14,52,.28) 70%,rgba(2,14,52,.14) 100%)}
.gate-body{position:relative;width:100%;padding:var(--sp-8);color:#F4F2ED}
/* the prototype's surface switcher is fixed to the bottom of the viewport on
   every page: the gateway's calls to action have to clear it, not sit under it */
.gate-body{padding-bottom:calc(var(--sp-8) + 58px)}
.gate-eyebrow{color:rgba(244,242,237,.72)}
.gate-title{font-size:clamp(28px,3.2vw,42px);line-height:1.06;letter-spacing:-.03em;
  font-weight:300;margin-top:var(--sp-3);text-wrap:pretty;color:#F4F2ED}
.gate-desc{font-size:var(--fs-base);line-height:1.6;font-weight:300;
  margin-top:var(--sp-4);color:rgba(244,242,237,.86);max-width:52ch}
.gate-facts{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2)}
.gate-facts li{font-size:var(--fs-sm);color:rgba(244,242,237,.74);
  padding-left:var(--sp-4);position:relative}
.gate-facts li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:rgba(244,242,237,.5)}
.gate-half .btn--onphoto{margin-top:var(--sp-6)}
.gate-half--merch .gate-eyebrow{color:#F2B8B0}
.gate-intro{border-bottom:1px solid var(--line)}
.gate-sectors{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.chip--lg{font-size:var(--fs-sm);padding:6px 14px}

/* ---- photographic band at the top of a branch home --------------------- */
.hero-band{position:relative;overflow:hidden;background:var(--band);
  display:flex;align-items:flex-end;min-height:clamp(420px,58vh,620px)}
.hero-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 10%}
.hero-band-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,14,52,.93) 0%,rgba(2,14,52,.74) 42%,rgba(2,14,52,.3) 78%,rgba(2,14,52,.16) 100%)}
.hero-band-in{position:relative;width:100%;padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.hero-band-eyebrow{color:rgba(244,242,237,.72)}
.page-title--onphoto{color:#F4F2ED}
.page-desc--onphoto{color:rgba(244,242,237,.84)}

/* ---- closing call to action -------------------------------------------- */
.cta-band{background:var(--band);color:var(--on-band)}
.sec-title--band{color:var(--on-band)}
.sec-desc--band{color:var(--on-band-dim)}
.cta-band .eyebrow{color:var(--on-band-dim)}

/* ---- statistics --------------------------------------------------------- */
.stat-v{font-size:var(--fs-3xl);line-height:1.1;font-weight:300;color:var(--on-band)}
.stat-l{font-size:var(--fs-sm);margin-top:var(--sp-2);color:var(--on-band)}
.stat-n{font-size:var(--fs-xs);margin-top:var(--sp-2);color:var(--on-band-dim)}

/* ---- process strip ------------------------------------------------------ */
.stage-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3);
  margin-top:var(--sp-6)}
.stage-card{border:var(--card-border);background:var(--surface);padding:var(--sp-4);
  border-top:2px solid var(--navy);display:flex;flex-direction:column}
.stage-card:first-child{border-top-color:var(--line-strong)}

/* ---- collections -------------------------------------------------------- */
.coll{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  cursor:pointer;display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--dur-focus) var(--ease),box-shadow var(--dur-focus) var(--ease)}
.coll:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.coll-img{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.coll-img--lg{aspect-ratio:3/2}
.coll-img img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.coll-b{padding:var(--sp-4);display:flex;flex-direction:column;flex:1}
.coll-b .t-sm{flex:1}
.coll-strip{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6)}

/* ---- footer ------------------------------------------------------------- */
.pub-ft{border-top:1px solid var(--line);padding:var(--sp-9) 0 var(--sp-7);
  background:var(--surface-2)}
/* Four equal columns divided by hairlines, so the directory reads as one
   object and each group is visibly its own. The identity and the legal note
   live under the rule with the rest of the small print, not inside a column. */
.ft-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.ft-col{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:0 var(--sp-7)}
.ft-col:first-child{padding-left:0}
.ft-col:last-child{padding-right:0}
.ft-col + .ft-col{border-left:1px solid var(--line)}
.ft-h{margin-bottom:var(--sp-2)}
.ft-link{color:var(--muted);cursor:pointer;font-size:var(--fs-sm);
  transition:color var(--dur-focus) var(--ease)}
.ft-link:hover{color:var(--ink)}
.ft-link--inline{display:inline}
.ft-base{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-6);
  flex-wrap:wrap;margin-top:var(--sp-9);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.ft-id{display:flex;align-items:flex-start;gap:var(--sp-3)}
.ft-id .mk{margin-top:2px}
.ft-id-t{display:flex;flex-direction:column;gap:3px;line-height:1.5}
.ft-base-links{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.ft-base-links .ft-link{font-size:var(--fs-xs)}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) 0}
  .ft-col{padding:0 var(--sp-6)}
  .ft-col:nth-child(odd){padding-left:0}
  .ft-col:nth-child(even){padding-right:0}
  .ft-col:nth-child(odd){border-left:0}
  .stage-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .gate{grid-template-columns:1fr;min-height:0}
  .gate-half{min-height:76svh}
  .gate-half + .gate-half{border-left:0;border-top:1px solid rgba(244,242,237,.16)}
  /* under 900px the switcher moves to the top, so drop the bottom clearance */
  .gate-body{padding:var(--sp-6)}
  .hd-branch{padding-left:var(--sp-3);margin-left:0}
  .page-head{padding:var(--sp-8) 0 var(--sp-5)}
}
@media (max-width:720px){
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-hide-sm{display:none}
  .hero-band{min-height:clamp(380px,66svh,520px)}
}
@media (max-width:520px){
  /* One column: the rule goes above each group instead of beside it. */
  .ft-grid{grid-template-columns:1fr;gap:var(--sp-6) 0}
  .ft-col{padding:var(--sp-6) 0 0;border-left:0}
  .ft-col + .ft-col{border-left:0;border-top:1px solid var(--line)}
  .ft-col:first-child{padding-top:0}
  .stage-row{grid-template-columns:1fr}
  .ft-base{justify-content:flex-start}
}

/* ---- narrow-screen menu ------------------------------------------------- */
.hd-menu-btn{display:none}
/* Must be a sibling of the header, never a child: .pub-hd carries a
   backdrop-filter, which makes it the containing block for fixed descendants
   and collapses this panel to nothing. */
.hd-sheet{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:120;
  background:var(--surface);border-top:1px solid var(--line);overflow-y:auto}
.hd-sheet-in{max-width:var(--app-max);margin:0 auto;padding:var(--sp-6) var(--sp-4) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-1)}
.hd-sheet-link{display:block;padding:var(--sp-3) 0;font-size:var(--fs-lg);font-weight:300;
  color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line)}
.hd-sheet-link:hover{color:var(--navy)}
.hd-sheet-link--cta{color:var(--navy);font-weight:500}
.hd-sheet-eyebrow{margin-top:var(--sp-6)}
@media (max-width:900px){
  .hd-menu-btn{display:inline-flex}
  .pub-hd-in{gap:var(--sp-3)}
}
/* Below this the brand, the branch label and two controls no longer fit on one
   bar. The branch label goes: the menu sheet names the branch on its first line. */
@media (max-width:620px){
  .hd-branch{display:none}
  .pub-hd-in{gap:var(--sp-2)}
}

/* ---- grids that have to come out even --------------------------------- */
/* Seven collections in a four-column grid leaves a hole. Twelve tracks let
   four cards of three sit above three cards of four, so both rows are full. */
.coll-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.coll-grid[data-n="7"]{grid-template-columns:repeat(12,minmax(0,1fr))}
.coll-grid[data-n="7"] > :nth-child(-n+4){grid-column:span 3}
.coll-grid[data-n="7"] > :nth-child(n+5){grid-column:span 4}
/* Seven cards in a three-column grid strand one on its own row. Six tracks
   let three cards of two sit twice, and the seventh run the full width as a
   horizontal feature — a deliberate shape rather than a gap. */
.coll-grid-lg[data-n="7"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.coll-grid-lg[data-n="7"] > *{grid-column:span 2}
.coll-grid-lg[data-n="7"] > :nth-child(7){grid-column:span 6;flex-direction:row;
  align-items:stretch;height:clamp(260px,26vw,340px)}
.coll-grid-lg[data-n="7"] > :nth-child(7) .coll-img{flex:1 1 52%;aspect-ratio:auto;height:100%}
.coll-grid-lg[data-n="7"] > :nth-child(7) .coll-img img{object-position:center 28%}
.coll-grid-lg[data-n="7"] > :nth-child(7) .coll-b{flex:1 1 48%;justify-content:center;padding:var(--sp-7)}
.coll-grid-lg[data-n="7"] > :nth-child(7) .t-sm{flex:0}
/* The price basis is part of the card contract — it wraps, it never clips.
   A buyer must not need a tooltip to learn the quantity or that decoration
   is excluded. */
.pcard-price{min-width:0;white-space:normal;line-height:1.5;margin-top:var(--sp-2)}
.pcard-price b{font-size:var(--fs-md)}
.pcard-cta{flex:none}
.pcard-b .row-between{gap:var(--sp-3)}
@media (max-width:1100px){
  .coll-grid[data-n="7"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .coll-grid[data-n="7"] > :nth-child(-n+4),
  .coll-grid[data-n="7"] > :nth-child(n+5){grid-column:span 3}
  .coll-grid[data-n="7"] > :nth-child(7){grid-column:span 6}
  .feat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .coll-grid-lg[data-n="7"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .coll-grid-lg[data-n="7"] > *{grid-column:span 2}
  .coll-grid-lg[data-n="7"] > :nth-child(7){grid-column:span 4}
}
@media (max-width:700px){
  .coll-grid-lg[data-n="7"]{grid-template-columns:minmax(0,1fr)}
  .coll-grid-lg[data-n="7"] > *{grid-column:span 1 !important}
  .coll-grid-lg[data-n="7"] > :nth-child(7){flex-direction:column}
  .coll-grid-lg[data-n="7"] > :nth-child(7){height:auto}
  .coll-grid-lg[data-n="7"] > :nth-child(7) .coll-img{height:auto;aspect-ratio:3/2}
  .coll-grid-lg[data-n="7"] > :nth-child(7) .coll-b{padding:var(--sp-4)}
}
@media (max-width:620px){
  .coll-grid[data-n="7"]{grid-template-columns:minmax(0,1fr)}
  .coll-grid[data-n="7"] > *{grid-column:span 1 !important}
}

/* On a narrow card the meta row cannot fit minimum + lead time + swatches, and
   every child is flex:none, so the overflow escapes instead of collapsing.
   Let the swatch group shrink, and drop the lead time before anything clips. */
.pcard-meta .row{flex:0 1 auto}
@media (max-width:620px){
  .pcard-meta > span:nth-child(2){display:none}
}
/* Below this a card is too narrow to show swatches without slicing one in half,
   so it states the number of colours instead of showing a clipped row of them. */
.pcard-ncol{display:none}
@media (max-width:620px){
  .pcard-sw{display:none}
  .pcard-ncol{display:inline}
}

/* ============================================================================
   PUBLIC SITE v2 — the structure from the website specification
   Square content cards, capsule controls, Gilmer only, 11px floor.
   ========================================================================= */

/* Clipped rather than pushed off-canvas: it stays at the top-left of the
   document, so it never reads as an element escaping the viewport. */
.skip{position:absolute;top:0;left:0;z-index:200;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;background:var(--navy);color:var(--paper);
  padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm)}
.skip:focus{width:auto;height:auto;clip-path:none}
/* used on both <a> and <button>; a button needs its native chrome cleared or
   it renders as a grey bevelled box wherever this class is its only styling */
.lnk{color:var(--navy);cursor:pointer;font-size:var(--fs-sm);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  background:none;border:0;padding:0;font-family:inherit;text-align:left}
.lnk:hover{color:var(--ink)}
.lnk--sm{font-size:var(--fs-xs);font-weight:400;margin-left:var(--sp-3)}
.stack-3{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---- the shared root: two service choices ------------------------------ */
.svc{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  cursor:pointer;display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--dur-focus) var(--ease),box-shadow var(--dur-focus) var(--ease)}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.svc-img{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.svc-b{padding:var(--sp-6);display:flex;flex-direction:column;flex:1}
.svc-t{margin-bottom:var(--sp-3)}
.svc-d{flex:0}
.svc--merch .svc-t{color:var(--red-text)}
.facts{list-style:none;margin:var(--sp-4) 0 var(--sp-5);padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2);flex:1}
.facts li{font-size:var(--fs-sm);color:var(--muted);padding-left:var(--sp-4);position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--line-strong)}
.svc-cta{align-self:flex-start}
.cmp .card{display:flex;flex-direction:column}
.cmp .card .t-body{flex:1}
.assist{margin-top:var(--sp-6)}

/* ---- branch hero: copy first, one real image --------------------------- */
.s1{padding:var(--sp-9) 0;border-bottom:1px solid var(--line)}
.s1-in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-8);align-items:center}
.s1-copy{min-width:0}
.s1-sup{margin-top:var(--sp-5)}
.s8-sup{margin-top:var(--sp-4)}
.s1-fig{margin:0;min-width:0}
.s1-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 18%;display:block;
  border:var(--card-border);background:var(--surface-2)}
.s1-fig figcaption{margin-top:var(--sp-2)}

/* ---- featured evidence -------------------------------------------------- */
.feat{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--sp-5);margin-top:var(--sp-6)}
.feat-main{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  cursor:pointer;display:flex;flex-direction:column;overflow:hidden;margin:0;
  transition:transform var(--dur-focus) var(--ease),box-shadow var(--dur-focus) var(--ease)}
.feat-main:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.feat-main--static{cursor:default}
.feat-main--static:hover{transform:none;box-shadow:var(--card-shadow)}
.feat-img{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.feat-img img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.feat-b{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.feat-p{margin:var(--sp-2) 0 var(--sp-4)}
.feat-cap{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.feat-side{display:flex;flex-direction:column;gap:var(--sp-5)}
/* Size to content: a stretched card leaves a void under its own text, which
   reads as a mistake rather than as space. */
.feat-sm{cursor:pointer;flex:0 0 auto;display:flex;flex-direction:column}
.sect{cursor:pointer}

/* ---- scope group with one shared detail image -------------------------- */
.scope-row{display:grid;grid-template-columns:1.5fr .8fr;gap:var(--sp-5);margin-top:var(--sp-6)}
.scope-items{margin:0}
.scope-fig{margin:0}
.scope-fig img{width:100%;height:100%;max-height:420px;object-fit:cover;display:block;
  border:var(--card-border);background:var(--surface-2)}
.scope-fig figcaption{margin-top:var(--sp-2)}
.fact{border-top:2px solid var(--line-strong);padding-top:var(--sp-4)}
.fact p{margin-top:var(--sp-2)}
.banner--top{margin-top:var(--sp-6)}
.proc-stack{margin-top:var(--sp-6)}
.steps{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.steps li{font-size:var(--fs-sm);color:var(--muted)}
.steps li b{color:var(--ink);font-weight:500}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.cta-inline{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-top:var(--sp-5)}

/* ---- FAQ: native disclosure, six shown, six on demand ------------------ */
.faq{margin-top:var(--sp-6);border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i--more{display:none}
.faq--all .faq-i--more{display:block}
.faq-q{cursor:pointer;padding:var(--sp-4) var(--sp-7) var(--sp-4) 0;position:relative;
  font-size:var(--fs-md);font-weight:400;line-height:1.4;list-style:none;min-height:44px;
  display:flex;align-items:center}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";position:absolute;right:var(--sp-2);top:50%;transform:translateY(-50%);
  font-size:var(--fs-xl);font-weight:300;color:var(--muted);line-height:1}
.faq-i[open] .faq-q::after{content:"–"}
.faq-q:hover{color:var(--navy)}
/* The answer wraps where the question wraps — the same right inset for the
   +/- marker, and no measure cap of its own. Every FAQ in the suite is built
   from .faq-a, so this holds on the Studio page, the catalogue pages and the
   all-questions pages alike. */
.faq-a{padding:0 var(--sp-7) var(--sp-5) 0}
.faq-more{margin-top:var(--sp-4)}

/* ---- disclosure --------------------------------------------------------- */
.disc{margin-top:var(--sp-6);border:var(--card-border);background:var(--surface)}
.disc-q{cursor:pointer;padding:var(--sp-4) var(--sp-5);font-size:var(--fs-md);font-weight:500;
  list-style:none;min-height:44px;display:flex;align-items:center}
.disc-q::-webkit-details-marker{display:none}
.disc-q::before{content:"＋ ";color:var(--muted);margin-right:var(--sp-2)}
.disc[open] .disc-q::before{content:"– "}
.disc-b{padding:0 var(--sp-5) var(--sp-5)}
.disc--sm{margin-top:var(--sp-3);border:0;background:transparent}
.disc--sm .disc-q{padding:var(--sp-2) 0;font-size:var(--fs-sm);font-weight:400;min-height:0}
.disc--sm .disc-b{padding:0 0 var(--sp-2)}

/* ---- form controls ------------------------------------------------------ */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld-l{font-size:var(--fs-sm);font-weight:500}
.fld-h{line-height:1.45}
.fld-e{color:var(--stop);font-weight:500}
.fld--err .inp{border-color:var(--stop)}
.fld--grow{flex:1}
.fld--inline{flex-direction:row;align-items:center;gap:var(--sp-3)}
.inp--sm{max-width:220px}
.chk{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer;font-size:var(--fs-sm);
  min-height:44px;align-items:center}
.chk input{accent-color:var(--navy);flex:none;width:18px;height:18px}
.srch{display:flex;gap:var(--sp-3);align-items:flex-end;margin-top:var(--sp-5);flex-wrap:wrap}
.adv-form,.help-form{margin-top:var(--sp-4);max-width:620px}

/* ---- filters ------------------------------------------------------------ */
.flt{display:flex;gap:var(--sp-4);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.flt-d{flex:1;min-width:260px;border:var(--card-border);background:var(--surface)}
.flt-q{cursor:pointer;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:500;
  list-style:none;min-height:44px;display:flex;align-items:center;gap:var(--sp-2)}
.flt-q::-webkit-details-marker{display:none}
.flt-q::before{content:"＋ ";color:var(--muted)}
.flt-d[open] .flt-q::before{content:"– "}
.flt-b{padding:0 var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5)}
.flt-g{border:0;padding:0;margin:0;min-width:0}
.flt-g legend{padding:0}
.applied{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-5)}
.chip--x{cursor:pointer;border:1px solid var(--line-strong);background:var(--surface)}
.chip--x:hover{border-color:var(--ink);color:var(--ink)}
.empty{text-align:left;padding:var(--sp-7)}

/* ---- quote basket ------------------------------------------------------- */
/* named for the quote layout, not the quantity grid the product page owns */
.qlayout{display:grid;grid-template-columns:1.6fr .9fr;gap:var(--sp-6);align-items:start}
.qline{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-4);
  border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);padding:var(--sp-4)}
.qline-img{aspect-ratio:4/5;background:var(--surface-2);overflow:hidden}
.qline-img img{width:100%;height:100%;object-fit:cover;display:block}
.qline-b{min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.qline-top{align-items:flex-start;gap:var(--sp-4)}
.qline-amt{text-align:right;flex:none}
.qline-facts{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.qline-act{margin-top:auto;padding-top:var(--sp-3)}
.qsum{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  padding:var(--sp-5);position:sticky;top:calc(var(--header-h) + var(--sp-4))}
.qsum-act{margin-top:var(--sp-5);flex-direction:column;align-items:stretch}
.qmini{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dl{margin:var(--sp-3) 0 0;display:flex;flex-direction:column}
.dl-r{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.dl-r:last-child{border-bottom:0}
.dl-r dt{color:var(--muted);flex:none}
.dl-r dd{margin:0;text-align:right;min-width:0}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1000px){
  .s1-in{grid-template-columns:1fr;gap:var(--sp-6)}
  .s1-fig{order:-1}
  .feat{grid-template-columns:1fr}
  .scope-row{grid-template-columns:1fr}
  .scope-fig img{max-height:300px}
  .qlayout{grid-template-columns:1fr}
  .qsum{position:static}
}
/* The merchandise bar carries the most controls. "Choose a service" is the
   first to go — it is still in the menu sheet and in the footer. */
/* Measured, not guessed: with a quote badge in the bar the full set of header
   items needs 1407px of content box and the container is capped at --app-max
   (1440) less 48 of padding = 1392, so the top tier never fit at any window
   width and every public page scrolled sideways by 15px. */
@media (max-width:1500px){
  .hd-hide-lg{display:none}
}
/* A portrait tablet is 1024 wide: the language switch and the other-service
   link go before the nav is forced to wrap. Both stay in the menu sheet. */
@media (max-width:1320px){
  .hd-hide-md{display:none}
  /* The nav is 429px of nowrap links and the brand another 223: below about
     1100 neither can give space back, so the row overflowed as soon as the
     quote badge appeared and every public page scrolled sideways. The nav now
     collapses into the menu sheet here rather than at 900, which is where the
     other header extras already go — and the sheet carries the same links. */
  .pub-hd-in{gap:var(--sp-4)}
}
@media (max-width:1100px){
  .pub-nav{display:none}
  .hd-menu-btn{display:inline-flex}
}
@media (max-width:720px){
  .svc-b{padding:var(--sp-5)}
  .qline{grid-template-columns:84px 1fr}
  .faq-a{padding-right:0}
  .cta-inline{align-items:flex-start}
}
/* ============================================================================
   PAMUUC — EDITORIAL LAYER
   The design direction is technical editorial: this is a workshop, so the site
   is set like a specification document that keeps opening into full-bleed
   photography. Structure is the ornament — indices, hairlines and captions are
   real information, not decoration bolted on.

   Drawn from the studios and commerce experiences in our own benchmark
   register (Fashionizer, Field Grey, Studio 104, NO Uniform, Creyconfe;
   Monday Merch, Merchery) and from the design-led apparel and industrial
   houses this category is measured against — Aesop, COS, Arket, Norse
   Projects, Our Legacy, Carhartt WIP, Snow Peak, Muji, Kvadrat, Vitra, Hay,
   Dinesen, Patagonia Workwear. What is borrowed is structural: the oversized
   opening statement, the indexed section, the specification caption under
   every image, the sudden dark band, the asymmetric split. Nothing is copied.

   Everything below obeys the house rules: Gilmer only, 11px floor, square
   content geometry with capsule controls, red reserved for Merchandise,
   --navy inverts and --band does not.
   ========================================================================= */

:root{
  --fs-display:clamp(38px,6.2vw,84px);
  --fs-mega:clamp(56px,11vw,150px);
  --rule:1px solid var(--line);
}

/* ---- section identity --------------------------------------------------- */
/* Every section opens with an index and a rule, so one reads as a distinct
   chapter rather than another block of text on the same page. */
.sec-ix{display:flex;align-items:baseline;gap:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:var(--rule);margin-bottom:var(--sp-7)}
.sec-ix-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;
  color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
.sec-ix-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.sec-ix .spacer{flex:1}
.sec-ix-m{font-size:var(--fs-micro);color:var(--faint);text-align:right}
.sec--red .sec-ix-l{color:var(--red-text)}
.sec--red .sec-ix{border-bottom-color:color-mix(in srgb,#7F1D16 26%,transparent)}

/* dark chapters break the rhythm; --band does not invert with the theme */
.sec--dark{background:var(--band);color:var(--on-band)}
.sec--dark .sec-title,.sec--dark .page-title,.sec--dark .t-h3,.sec--dark .t-h4{color:var(--on-band)}
.sec--dark .sec-desc,.sec--dark .muted,.sec--dark .t-sm{color:var(--on-band-dim)}
.sec--dark .sec-ix{border-bottom-color:color-mix(in srgb,#F4F2ED 22%,transparent)}
.sec--dark .sec-ix-l,.sec--dark .sec-ix-n,.sec--dark .sec-ix-m,.sec--dark .eyebrow{color:var(--on-band-dim)}
.sec--dark .card{background:color-mix(in srgb,#F4F2ED 6%,transparent);
  border-color:color-mix(in srgb,#F4F2ED 16%,transparent);box-shadow:none}
.sec--dark .card-foot{border-top-color:color-mix(in srgb,#F4F2ED 16%,transparent)}
.sec--dark .fact{border-top-color:color-mix(in srgb,#F4F2ED 34%,transparent)}
.sec--dark .lnk{color:var(--on-band)}
.sec--dark .dl-r{border-bottom-color:color-mix(in srgb,#F4F2ED 16%,transparent)}

/* ---- display type ------------------------------------------------------- */
.display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.04em;
  font-weight:300;text-wrap:pretty;margin:0}
.mega{font-size:var(--fs-mega);line-height:.86;letter-spacing:-.05em;font-weight:300}
.pull{font-size:clamp(22px,2.6vw,38px);line-height:1.2;letter-spacing:-.025em;
  font-weight:300;text-wrap:pretty}
.lede{font-size:clamp(16px,1.4vw,21px);line-height:1.55;font-weight:300;color:var(--muted)}

/* ---- image placeholders -------------------------------------------------
   Where real photography is required but not yet shot. The slot is
   art-directed and carries the asset ID from the content plan, so nobody
   mistakes it for a finished page or ships it by accident. */
.ph{position:relative;background:var(--surface-2);border:var(--rule);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph::before,.ph::after{content:"";position:absolute;width:10px;height:10px;
  border:1px solid var(--line-strong)}
.ph::before{top:8px;left:8px;border-right:0;border-bottom:0}
.ph::after{bottom:8px;right:8px;border-left:0;border-top:0}
.ph-in{text-align:center;padding:var(--sp-5);max-width:34ch}
.ph-id{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.ph-d{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2);line-height:1.5}
.ph--4x5{aspect-ratio:4/5}
.ph--1x1{aspect-ratio:1}
.ph--3x2{aspect-ratio:3/2}
.ph--16x9{aspect-ratio:16/9}
.ph--21x9{aspect-ratio:21/9}
.sec--dark .ph{background:color-mix(in srgb,#F4F2ED 5%,transparent);
  border-color:color-mix(in srgb,#F4F2ED 18%,transparent)}
.sec--dark .ph-id{color:var(--on-band-dim)}
.sec--dark .ph-d{color:var(--on-band-dim)}
.sec--dark .ph::before,.sec--dark .ph::after{border-color:color-mix(in srgb,#F4F2ED 34%,transparent)}

/* a caption belongs under every image, and says what it actually is */
.cap{font-size:var(--fs-micro);color:var(--faint);margin-top:var(--sp-2);
  display:flex;gap:var(--sp-3);align-items:baseline}
.cap b{font-weight:500;color:var(--muted)}

/* ---- media ------------------------------------------------------------- */
.media{overflow:hidden;background:var(--surface-2);border:var(--rule)}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.media--4x5{aspect-ratio:4/5}
.media--3x2{aspect-ratio:3/2}
.media--16x9{aspect-ratio:16/9}
.media--21x9{aspect-ratio:21/9}
.hovr:hover .media img{transform:scale(1.03)}

/* ---- full-bleed band ---------------------------------------------------- */
.bleed{position:relative;overflow:hidden;background:var(--band);
  min-height:clamp(380px,54vh,600px);display:flex;align-items:flex-end}
.bleed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%}
.bleed-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(1,12,46,.94) 0%,rgba(1,12,46,.7) 40%,rgba(1,12,46,.22) 78%,rgba(1,12,46,.1) 100%)}
.bleed-in{position:relative;width:100%;padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.bleed .display,.bleed .lede,.bleed .eyebrow,.bleed .cap{color:#F4F2ED}
.bleed .lede{color:rgba(244,242,237,.86)}
.bleed .eyebrow,.bleed .cap{color:rgba(244,242,237,.7)}

/* ---- asymmetric split --------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.split--wide{grid-template-columns:1.35fr .65fr}
.split--narrow{grid-template-columns:.65fr 1.35fr}
.split--flip>*:first-child{order:2}
.split-b{min-width:0}
/* A short heading beside a long list should travel with it rather than sit
   centred in its own empty column. */
/* Two columns whose text wraps to different depths still land their actions
   on one line. */
.split--bottom{align-items:stretch}
.split--bottom>.split-b{display:flex;flex-direction:column}
.split--bottom>.split-b>.btn-row{margin-top:auto}
.split--sticky{align-items:start}
.split--sticky>.split-b:first-child{position:sticky;top:calc(var(--header-h) + var(--sp-7))}
@media (max-width:1000px){
  .split--sticky>.split-b:first-child{position:static}
}

/* ---- offset cards ------------------------------------------------------- */
.offset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.offset>*:nth-child(even){margin-top:var(--sp-8)}

/* ---- oversized statistics ----------------------------------------------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6)}
.num-b{border-top:2px solid currentColor;padding-top:var(--sp-4)}
.num-v{font-size:clamp(32px,3.6vw,52px);line-height:1;font-weight:300;letter-spacing:-.035em}
.num-l{font-size:var(--fs-sm);margin-top:var(--sp-3);font-weight:500}
.num-n{font-size:var(--fs-micro);margin-top:var(--sp-2);color:var(--muted);line-height:1.5}
.sec--dark .num-n{color:var(--on-band-dim)}

/* ---- indexed list (process, scope) -------------------------------------- */
.ilist{border-top:var(--rule)}
.ilist-r{display:grid;grid-template-columns:64px 1fr 1.1fr;gap:var(--sp-5);
  padding:var(--sp-6) 0;border-bottom:var(--rule);align-items:start}
.ilist-n{font-size:var(--fs-xl);font-weight:300;color:var(--faint);line-height:1;
  font-variant-numeric:tabular-nums}
.ilist-h{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.sec--dark .ilist,.sec--dark .ilist-r{border-color:color-mix(in srgb,#F4F2ED 18%,transparent)}
.sec--dark .ilist-n{color:var(--on-band-dim)}

/* ---- the gateway -------------------------------------------------------- */
.gate{display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(100svh - var(--header-h));background:var(--band)}
.gate-h{position:relative;overflow:hidden;cursor:pointer;display:flex;
  align-items:flex-end;min-height:440px;isolation:isolate}
.gate-h+.gate-h{border-left:1px solid rgba(244,242,237,.18)}
.gate-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 20%;transition:transform 1.4s var(--ease)}
.gate-h:hover .gate-img{transform:scale(1.045)}
/* Two gradients: the heavy one carries the copy at the bottom, the light one
   at the top gives the corner index something to sit on. Without it the index
   disappears wherever the photograph happens to be bright. */
.gate-veil{position:absolute;inset:0;transition:opacity var(--dur-morph) var(--ease);
  background:linear-gradient(to top,rgba(1,10,40,.95) 0%,rgba(1,10,40,.74) 38%,rgba(1,10,40,.26) 72%,rgba(1,10,40,.14) 100%),
             linear-gradient(to bottom,rgba(1,10,40,.5) 0%,rgba(1,10,40,.12) 18%,rgba(1,10,40,0) 30%)}
.gate-h:hover .gate-veil{opacity:.88}
.gate-ix{position:absolute;top:var(--sp-7);left:var(--sp-8);z-index:2;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;color:rgba(244,242,237,.92)}
.gate-b{position:relative;z-index:2;width:100%;padding:var(--sp-8);
  padding-bottom:calc(var(--sp-8) + 58px);color:#F4F2ED}
.gate-t{font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-.04em;
  font-weight:300;margin:0;color:#F4F2ED}
.gate-d{font-size:var(--fs-md);line-height:1.6;font-weight:300;margin-top:var(--sp-4);
  color:rgba(244,242,237,.84);max-width:46ch}
.gate-f{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2);border-top:1px solid rgba(244,242,237,.24);
  padding-top:var(--sp-4)}
.gate-f li{font-size:var(--fs-sm);color:rgba(244,242,237,.76);display:flex;gap:var(--sp-3)}
.gate-f b{font-weight:500;color:rgba(244,242,237,.95);flex:none;
  font-variant-numeric:tabular-nums;min-width:2.2em}
.gate-go{display:inline-flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);
  font-size:var(--fs-md);font-weight:500;color:#F4F2ED;min-height:44px}
.gate-go span{width:34px;height:1px;background:rgba(244,242,237,.6);
  transition:width var(--dur-morph) var(--ease)}
.gate-h:hover .gate-go span{width:54px;background:#F4F2ED}
.gate-h--merch .gate-ix{color:#F5C3BB}

/* ---- links -------------------------------------------------------------- */
.lnk-a{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);
  font-weight:500;color:var(--ink);cursor:pointer;min-height:44px}
.lnk-a span{width:22px;height:1px;background:var(--line-strong);
  transition:width var(--dur-morph) var(--ease),background-color var(--dur-morph) var(--ease)}
.lnk-a:hover span{width:36px;background:var(--ink)}
.sec--red .lnk-a:hover{color:var(--red-text)}
.sec--red .lnk-a:hover span{background:var(--red-text)}
.sec--dark .lnk-a{color:var(--on-band)}
.sec--dark .lnk-a span{background:color-mix(in srgb,#F4F2ED 50%,transparent)}
.sec--dark .lnk-a:hover span{background:#F4F2ED}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1000px){
  .split,.split--wide,.split--narrow{grid-template-columns:1fr;gap:var(--sp-6)}
  .split--flip>*:first-child{order:0}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ilist-r{grid-template-columns:44px 1fr;gap:var(--sp-4)}
  .ilist-r>*:last-child{grid-column:2}
}
@media (max-width:900px){
  .gate{grid-template-columns:1fr;min-height:0}
  .gate-h{min-height:72svh}
  .gate-h+.gate-h{border-left:0;border-top:1px solid rgba(244,242,237,.18)}
  .gate-b{padding:var(--sp-6);padding-bottom:var(--sp-7)}
  .gate-ix{top:var(--sp-5);left:var(--sp-6)}
  .offset{grid-template-columns:1fr}
  .offset>*:nth-child(even){margin-top:0}
}
@media (max-width:620px){
  .nums{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .media img,.gate-img,.gate-veil,.gate-go span,.lnk-a span{transition:none}
  .hovr:hover .media img,.gate-h:hover .gate-img{transform:none}
}

/* ---- product card, vertical contract ------------------------------------ */
.pcard-b{gap:var(--sp-2)}
.pcard-b .t-h5{margin-bottom:0}
/* Every card in a row ends on the same line, whatever its price state. */
.pcard{height:100%}
.pcard-b{flex:1}
.pcard-cta{margin-top:auto;padding-top:var(--sp-2);width:100%;justify-content:center}
.pcard-basis{line-height:1.45}
.pcard:hover .pcard-cta{border-color:var(--ink)}

/* ============================================================================
   MERCHANDISE — listing, carousel and home devices
   ========================================================================= */

/* ---- category strip: the primary filter on every listing page ---------- */
.cstrip{display:flex;gap:var(--sp-4);overflow-x:auto;padding:var(--sp-6) 0 var(--sp-2);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cstrip::-webkit-scrollbar{display:none}
.cst{flex:none;width:96px;background:transparent;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;gap:var(--sp-2);text-align:center;min-height:44px}
.cst-i{display:block;aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line);
  overflow:hidden;transition:border-color var(--dur-focus) var(--ease)}
.cst-i img{width:100%;height:100%;object-fit:cover;display:block}
.cst-i--all{display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg);font-weight:300;color:var(--muted)}
.cst-l{font-size:var(--fs-micro);color:var(--muted);line-height:1.3}
.cst:hover .cst-i{border-color:var(--line-strong)}
.cst--on .cst-i{border-color:var(--red);border-width:2px}
.cst--on .cst-l{color:var(--ink);font-weight:500}

/* ---- carousel ----------------------------------------------------------- */
.carou{margin-top:var(--sp-6)}
.carou-h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.carou-b{width:40px;height:40px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);cursor:pointer;border-radius:var(--radius-full);font-size:var(--fs-md);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.carou-b:hover{border-color:var(--ink);background:var(--surface-2)}
.carou-t{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:var(--sp-2)}
.carou-t::-webkit-scrollbar{display:none}
.carou-t::-webkit-scrollbar{display:none}
.carou-t>*{scroll-snap-align:start}

/* ---- two editorial tiles ------------------------------------------------ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  margin-top:var(--sp-6)}
.duo-h{position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;
  min-height:clamp(360px,46vw,560px);background:var(--band);isolation:isolate}
.duo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;transition:transform 1.4s var(--ease)}
.duo-h:hover .duo-img{transform:scale(1.04)}
.duo-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(1,10,40,.92) 0%,rgba(1,10,40,.6) 42%,rgba(1,10,40,.12) 80%),
             linear-gradient(to bottom,rgba(1,10,40,.4) 0%,rgba(1,10,40,0) 26%)}
.duo-ix{position:absolute;top:var(--sp-6);left:var(--sp-7);z-index:2;font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.16em;color:rgba(244,242,237,.9)}
.duo-b{position:relative;z-index:2;padding:var(--sp-7);color:#F4F2ED;width:100%}
.duo-t{font-size:clamp(26px,3vw,44px);line-height:1;letter-spacing:-.035em;font-weight:300;
  margin:0;color:#F4F2ED}
.duo-d{font-size:var(--fs-sm);line-height:1.6;color:rgba(244,242,237,.82);
  margin-top:var(--sp-3);max-width:44ch}
.duo-m{display:block;font-size:var(--fs-micro);color:rgba(244,242,237,.68);
  margin-top:var(--sp-4);font-variant-numeric:tabular-nums}

/* ---- quality and certification ----------------------------------------- */
.card--pad{padding:var(--sp-7)}
.ticks{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.ticks li{font-size:var(--fs-sm);color:var(--muted);padding-left:var(--sp-6);position:relative;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:1px;background:var(--red)}
.certs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
.cert{border:1px solid var(--line);padding:var(--sp-4);display:flex;flex-direction:column;gap:4px}
.cert-n{font-size:var(--fs-sm);font-weight:500}
.cert-s{font-size:var(--fs-micro);color:var(--faint)}

/* ---- reassurance band --------------------------------------------------- */
.reass{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6)}
.reass-i{display:flex;gap:var(--sp-4);align-items:flex-start}
.reass-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;
  color:var(--on-band-dim);flex:none;padding-top:3px}
.reass-h{font-size:var(--fs-md);font-weight:500;color:var(--on-band);line-height:1.35}
.reass-p{font-size:var(--fs-sm);color:var(--on-band-dim);margin-top:var(--sp-2);line-height:1.55}

/* ---- listing ------------------------------------------------------------ */
.pgrid{margin-top:var(--sp-2)}
.more{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:var(--rule)}
.rev-ph{min-height:200px}
.post-lead{cursor:pointer}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1000px){
  .duo{grid-template-columns:1fr}
  .reass{grid-template-columns:1fr 1fr}
  .certs{grid-template-columns:1fr}
}
@media (max-width:720px){
  .reass{grid-template-columns:1fr}
  .cst{width:76px}
  .card--pad{padding:var(--sp-5)}
}

/* ============================================================================
   QUOTE DRAWER AND CHECKOUT
   ========================================================================= */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- slide-over drawer -------------------------------------------------- */
.dscrim{position:fixed;inset:0;z-index:150;background:color-mix(in srgb,#010B2E 46%,transparent);
  animation:dfade var(--dur-morph) var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:151;width:min(480px,100vw);
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-4);
  display:flex;flex-direction:column;animation:dslide var(--dur-morph) var(--ease)}
@keyframes dfade{from{opacity:0}to{opacity:1}}
@keyframes dslide{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .dscrim,.drawer{animation:none}
}
.drawer-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-6);border-bottom:1px solid var(--line);flex:none}
.drawer-x{width:40px;height:40px;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:var(--fs-lg);border-radius:var(--radius-full);flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.drawer-x:hover{background:var(--surface-2);color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-6)}
.drawer-empty{padding:var(--sp-7) 0}

.dline{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-4);padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line)}
.dline:last-child{border-bottom:0}
.dline-img{aspect-ratio:4/5;background:var(--surface-2);overflow:hidden}
.dline-img img{width:100%;height:100%;object-fit:cover;display:block}
.dline-b{min-width:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.dline-top{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:flex-start}
.dline-n{font-size:var(--fs-md);font-weight:500;line-height:1.35}
.dline-p{flex:none;font-weight:500}
.dline-r{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.inp--xs{min-height:36px;padding:0 var(--sp-3);max-width:88px}
/* Text, not an icon: nothing else in this interface uses a pictogram, and a
   destructive control is the wrong place to start. */
.dline-x{min-height:36px;padding:0 var(--sp-3);border:0;background:transparent;cursor:pointer;
  flex:none;color:var(--muted);font-size:var(--fs-xs);border-radius:var(--radius-full)}
.dline-x:hover{background:var(--stop-quiet);color:var(--stop)}

.drawer-foot{flex:none;padding:var(--sp-6);border-top:1px solid var(--line);background:var(--surface)}
.drow{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
  font-size:var(--fs-sm);color:var(--muted)}
.drow--t{border-top:1px solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-4);
  font-size:var(--fs-lg);color:var(--ink);font-weight:500}
.drawer-foot .btn--block{margin-top:var(--sp-4)}
.dnote{text-align:center;color:var(--muted);margin-top:var(--sp-3)}

/* ---- checkout ----------------------------------------------------------- */
.pub--bare{min-height:100svh;display:flex;flex-direction:column}
.co-hd{border-bottom:1px solid var(--line);background:var(--paper)}
.co-hd-in{max-width:var(--app-max);margin:0 auto;padding:var(--sp-5) var(--sp-6);
  display:flex;align-items:center;gap:var(--sp-5)}
.co-back{width:40px;height:40px;border:1px solid var(--line-strong);background:transparent;
  border-radius:var(--radius-full);cursor:pointer;color:var(--ink);flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.co-back:hover{border-color:var(--ink);background:var(--surface-2)}
.co{display:grid;grid-template-columns:1fr 1fr;flex:1;max-width:var(--app-max);
  margin:0 auto;width:100%}
.co-left{padding:var(--sp-9) var(--sp-8) var(--sp-8) var(--sp-6);display:flex;flex-direction:column}
.co-right{padding:var(--sp-9) var(--sp-6) var(--sp-8) var(--sp-8);background:var(--surface-2);
  border-left:1px solid var(--line)}
.co-t{font-size:clamp(28px,3vw,44px);margin-bottom:var(--sp-7)}
.co-lines{border-bottom:1px solid var(--line)}
.co-line{display:grid;grid-template-columns:84px 1fr;gap:var(--sp-4);padding-bottom:var(--sp-5);
  margin-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.co-line:last-child{border-bottom:0;margin-bottom:0}
.co-line-img{aspect-ratio:4/5;background:var(--surface-2);overflow:hidden}
.co-line-img img{width:100%;height:100%;object-fit:cover;display:block}
.co-line-b{min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.co-line-top{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:flex-start}
.co-line-n{font-size:var(--fs-md);font-weight:500;line-height:1.35}
.co-line-p{flex:none;font-weight:500}
.co-line-m{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
.co-line-a{display:flex;gap:var(--sp-4);margin-top:var(--sp-2)}
.co-line-a .lnk--sm{margin-left:0}
.co-row{display:flex;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.co-row-l{color:var(--muted)}
.co-row-v{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.co-row--total{border-bottom:0;align-items:baseline;padding-top:var(--sp-6)}
.co-row--total .co-row-l{font-size:var(--fs-lg);color:var(--ink)}
.co-total{font-size:clamp(22px,2.2vw,30px);font-weight:400}
.co-legal{margin-top:auto;padding-top:var(--sp-8)}
.co-card{background:var(--surface);border:1px solid var(--line);padding:var(--sp-7);
  display:flex;flex-direction:column;gap:var(--sp-5)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.co-grid--phone{grid-template-columns:.8fr 1.2fr}
.co-chk{background:var(--surface-2);padding:var(--sp-3) var(--sp-4);align-items:flex-start}
.co-trust{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:center;
  margin-top:var(--sp-6);font-size:var(--fs-xs);color:var(--muted)}

@media (max-width:620px){
  .drawer{width:100vw}
}
@media (max-width:900px){
  .co{grid-template-columns:1fr}
  .co-left{padding:var(--sp-7) var(--sp-4) var(--sp-6)}
  .co-right{padding:var(--sp-7) var(--sp-4) var(--sp-8);border-left:0;border-top:1px solid var(--line)}
  .co-legal{padding-top:var(--sp-6)}
  .co-card{padding:var(--sp-5)}
  .co-grid,.co-grid--phone{grid-template-columns:1fr}
}

/* The audit measures geometry synchronously, so an element part-way through
   an entrance animation reads as off-screen. This freezes motion for the
   duration of a run: what gets measured is the resting state. */
.audit-still *,.audit-still *::before,.audit-still *::after{
  animation:none !important;transition:none !important}

/* ============================================================================
   ADAPTED REFERENCE SECTIONS — Studio
   ========================================================================= */

/* ---- hero: copy, work, and the artefact the method turns on ------------ */
.shero{padding:var(--sp-9) 0 var(--sp-10);border-bottom:var(--rule)}
.shero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-9);align-items:center}
.shero-copy{min-width:0}
.news{display:inline-flex;align-items:center;gap:var(--sp-3);border:1px solid var(--line);
  background:var(--surface);padding:6px 14px;border-radius:var(--radius-full);
  font-size:var(--fs-xs);color:var(--muted)}
.news b{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:var(--navy-quiet);padding:3px 8px;border-radius:var(--radius-full)}
.shero-t{margin-top:var(--sp-6)}
.shero-d{margin-top:var(--sp-6)}
.shero-media{position:relative;min-width:0}
.shero-img{width:100%}
.shero-card{position:absolute;left:calc(var(--sp-8) * -1);bottom:var(--sp-7);width:min(330px,78%);
  background:var(--surface);border:var(--card-border);box-shadow:var(--shadow-4);padding:var(--sp-5)}
.shero-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.shero-card-t{font-size:var(--fs-md);font-weight:500;margin:var(--sp-3) 0 var(--sp-4)}
.shero-card-f{font-size:var(--fs-micro);color:var(--faint);margin-top:var(--sp-4);
  padding-top:var(--sp-3);border-top:1px solid var(--line)}

/* ---- small state pill --------------------------------------------------- */
.pill-s{font-size:var(--fs-micro);font-weight:500;padding:3px 9px;border-radius:var(--radius-full);
  white-space:nowrap;flex:none}
.pill-s--go{background:var(--go-quiet);color:var(--go)}
.pill-s--wait{background:var(--wait-quiet);color:var(--wait)}
.pill-s--flow{background:var(--flow-quiet);color:var(--flow)}

/* ---- artefacts inside the solution cards ------------------------------- */
.art{margin-top:var(--sp-5);border:1px solid var(--line);background:var(--surface-2);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.art-r{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--fs-xs);padding:5px 0}
.art-r+.art-r{border-top:1px solid var(--line)}
.art-m{color:var(--muted)}
/* The chip, spec-header and left-aligned brand variants belonged to the
   earlier artefacts; the labelled record below replaces all three. */
.art-label span{font-weight:400;letter-spacing:0;color:var(--muted);text-transform:none}

/* ---- solutions grid ----------------------------------------------------- */
/* .sol-h and .sol-t belonged to the old section head; the card head below
   now owns .sol-h. */
.sol-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.sol{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  padding:var(--sp-6);display:flex;flex-direction:column}
.sol-ht{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.sol-p{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-3);line-height:1.6;flex:1}

/* ---- directory ---------------------------------------------------------- */
.dirsec{border-top:var(--rule)}
.dir-t{margin-bottom:var(--sp-6)}
.dir-pills{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.pill{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;
  border-radius:var(--radius-full);padding:0 var(--sp-5);min-height:40px;font-size:var(--fs-sm);
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.pill:hover{border-color:var(--ink)}
.pill--on{border-color:var(--ink);border-width:2px;font-weight:500}
.dir-tabs{display:flex;gap:var(--sp-6);overflow-x:auto;margin-top:var(--sp-6);
  border-bottom:1px solid var(--line);scrollbar-width:none}
.dir-tabs::-webkit-scrollbar{display:none}
.dtab{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:var(--fs-sm);
  padding:var(--sp-3) 0;white-space:nowrap;border-bottom:2px solid transparent;min-height:44px}
.dtab:hover{color:var(--ink)}
.dtab--on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.dir-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--sp-4) var(--sp-6);margin-top:var(--sp-7)}
.dir-l{font-size:var(--fs-sm);color:var(--muted);cursor:pointer;line-height:1.5;
  transition:color var(--dur-focus) var(--ease)}
.dir-l:hover{color:var(--ink)}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .sol-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .shero-in{grid-template-columns:1fr;gap:var(--sp-7)}
  .shero-media{order:-1}
  .shero-card{position:static;width:100%;margin-top:calc(var(--sp-6) * -1);box-shadow:var(--shadow-3)}
}
@media (max-width:720px){
  .sol-g{grid-template-columns:1fr}
  .dir-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .dir-grid{grid-template-columns:1fr}
}

/* ============================================================================
   THE BRIEF — one question per screen, answered by choosing
   ========================================================================= */
.tf-bar{position:sticky;top:0;z-index:20;height:3px;background:var(--line)}
.tf-bar span{display:block;height:100%;background:var(--navy);
  transition:width var(--dur-morph) var(--ease)}
.tf{flex:1;display:flex;align-items:center;padding:var(--sp-9) var(--sp-6)}
.tf-in{max-width:760px;margin:0 auto;width:100%}
.tf--wide .tf-in{max-width:920px}
.tf-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;color:var(--faint);
  text-transform:uppercase}
.tf-n b{color:var(--navy);font-weight:700}
.tf-q{font-size:clamp(26px,3.4vw,46px);line-height:1.1;letter-spacing:-.035em;font-weight:300;
  margin:var(--sp-4) 0 0;text-wrap:pretty}
.tf-h{font-size:var(--fs-md);color:var(--muted);line-height:1.6;margin-top:var(--sp-4);max-width:62ch}
.tf-multi{font-size:var(--fs-xs);color:var(--faint);margin-top:var(--sp-5)}
.tf-basis{display:flex;gap:var(--sp-2);margin-top:var(--sp-6);
  border:1px solid var(--line-strong);border-radius:var(--radius-full);padding:4px;width:fit-content}
.tf-bb{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:var(--fs-sm);
  padding:0 var(--sp-5);min-height:38px;border-radius:var(--radius-full)}
.tf-bb--on{background:var(--navy);color:var(--paper);font-weight:500}

.tf-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-6)}
.tf-o{display:flex;align-items:center;gap:var(--sp-4);text-align:left;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:var(--sp-4) var(--sp-5);min-height:60px;font-size:var(--fs-md);
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.tf-o:hover{border-color:var(--navy);background:var(--navy-quiet)}
.tf-key{flex:none;width:26px;height:26px;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);
  color:var(--muted);border-radius:var(--radius-xs)}
.tf-lab{flex:1;line-height:1.35}
.tf-tick{flex:none;opacity:0;color:var(--navy);font-size:var(--fs-md)}
.tf-o--on{border-color:var(--navy);border-width:2px;background:var(--navy-quiet);
  padding:calc(var(--sp-4) - 1px) calc(var(--sp-5) - 1px)}
.tf-o--on .tf-key{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.tf-o--on .tf-tick{opacity:1}

.tf-form{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-7);max-width:560px}
.inp--lg{min-height:52px;font-size:var(--fs-md)}
.tf-foot{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-8);
  padding-top:var(--sp-6);border-top:1px solid var(--line)}
.tf-hint{font-size:var(--fs-xs);color:var(--faint)}

/* ---- review ------------------------------------------------------------- */
.rv{margin-top:var(--sp-7);border-top:1px solid var(--line)}
.rv-r{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-5);padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.rv-r dt{font-size:var(--fs-sm);color:var(--muted)}
.rv-r dd{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  font-size:var(--fs-md)}
.rv-r dd span{min-width:0}

@media (max-width:720px){
  .tf{padding:var(--sp-7) var(--sp-4)}
  .tf-opts{grid-template-columns:1fr}
  .rv-r{grid-template-columns:1fr;gap:var(--sp-2)}
  .tf-foot{gap:var(--sp-3)}
}
.tf-guide{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-5);
  padding-left:var(--sp-5);border-left:2px solid var(--navy);line-height:1.6;max-width:60ch}
.tf-below{margin-top:var(--sp-5)}
.tf-below .lnk{display:inline-block;margin-top:var(--sp-2)}

/* ---- the brief: intro and descriptor options --------------------------- */
.tf-q--intro{max-width:22ch}
.intro-l{list-style:none;margin:var(--sp-7) 0 0;padding:0;display:flex;flex-direction:column;
  gap:var(--sp-4);max-width:60ch}
.intro-l li{display:flex;gap:var(--sp-4);align-items:baseline;font-size:var(--fs-md);
  color:var(--muted);line-height:1.55;padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.intro-l li:last-child{border-bottom:0;padding-bottom:0}
.intro-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;color:var(--faint);flex:none}
.intro-l em{font-style:normal;color:var(--ink);font-weight:500}

/* an option that carries a descriptor needs the room to breathe */
.tf-opts--desc{grid-template-columns:1fr}
.tf-opts--desc .tf-o{align-items:flex-start}
.tf-opts--desc .tf-key{margin-top:2px}
.tf-desc{display:block;font-size:var(--fs-xs);color:var(--muted);font-style:normal;
  margin-top:4px;line-height:1.5}
.tf-o--on .tf-desc{color:var(--muted)}
@media (min-width:900px){
  .tf-opts--desc{grid-template-columns:1fr 1fr}
}

/* ---- VAT capture -------------------------------------------------------- */
.vat{display:flex;flex-direction:column;gap:var(--sp-3);
  border:1px solid var(--line);background:var(--surface-2);padding:var(--sp-5)}
.vat-row{display:flex;gap:var(--sp-2);align-items:stretch}
.vat-cc{display:inline-flex;align-items:center;padding:0 var(--sp-4);flex:none;
  border:1px solid var(--line-strong);background:var(--surface);font-weight:500;
  font-size:var(--fs-md);color:var(--muted)}
.vat-row .inp{flex:1;min-width:0}
.vat-row .btn{flex:none}
.tf-form--wide{max-width:640px}
@media (max-width:620px){
  .vat-row{flex-wrap:wrap}
  .vat-row .inp{flex:1 1 100%;order:2}
  .vat-row .btn{order:3}
}

/* ============================================================================
   THE GATEWAY — two images, the wordmark over them, one word each
   ========================================================================= */
.gate2{position:relative;display:grid;grid-template-columns:1fr 1fr;
  height:100svh;min-height:520px;background:var(--band)}
.gate2-mark{position:absolute;top:clamp(24px,5.5vh,64px);left:50%;transform:translateX(-50%);
  z-index:5;color:#F4F2ED;font-size:clamp(20px,3vw,42px);font-weight:700;letter-spacing:-.02em;
  line-height:1;white-space:nowrap;cursor:pointer;pointer-events:auto;
  text-shadow:0 1px 24px rgba(1,9,36,.45)}
.gate2-mark em{font-style:normal;font-weight:300;letter-spacing:.02em}
/* the divider from the lockup, at the weight the rest of the suite uses —
   quieter than either word, and it sets the spacing on both sides so the
   two halves are not doing it with margins of their own */
.gate2-bar{font-style:normal;font-weight:300;opacity:.55;margin:0 .34em}

.gate2-h{position:relative;overflow:hidden;cursor:pointer;border:0;padding:0;
  background:var(--band);display:flex;align-items:center;justify-content:center;isolation:isolate}
.gate2-h+.gate2-h{box-shadow:inset 1px 0 0 rgba(244,242,237,.2)}
/* the <picture> exists only to swap the source at 900px — it must not
   become a flex item of its own and nudge the label off centre */
.gate2-h picture{display:contents}
.gate2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;transition:transform 1.6s var(--ease)}
.gate2-h:hover .gate2-img,.gate2-h:focus-visible .gate2-img{transform:scale(1.04)}
/* Two layers, each doing a measured job. The radial carries the label in the
   middle of the frame; the top scrim carries the wordmark, which would
   otherwise sit on whatever pale sweep the photograph happens to have —
   measured at 2.8:1 without it, below the 3:1 large-text floor. */
.gate2-veil{position:absolute;inset:0;transition:opacity var(--dur-morph) var(--ease);
  background:
    linear-gradient(to bottom,rgba(1,9,36,.46) 0%,rgba(1,9,36,.14) 22%,rgba(1,9,36,0) 34%),
    radial-gradient(120% 70% at 50% 50%,rgba(1,9,36,.42) 0%,rgba(1,9,36,.26) 55%,rgba(1,9,36,.4) 100%)}
.gate2-h:hover .gate2-veil,.gate2-h:focus-visible .gate2-veil{opacity:.82}
.gate2-t{position:relative;z-index:2;color:#F4F2ED;font-size:clamp(24px,3.1vw,50px);
  font-weight:300;letter-spacing:-.02em;line-height:1.1;text-align:center;
  padding:0 var(--sp-6);text-shadow:0 1px 28px rgba(1,9,36,.5);
  transition:letter-spacing var(--dur-morph) var(--ease)}
.gate2-h:hover .gate2-t,.gate2-h:focus-visible .gate2-t{letter-spacing:0}
.gate2-h:focus-visible{outline:2px solid #F4F2ED;outline-offset:-6px}

.gate2-narrow{display:none}

@media (max-width:900px){
  /* both choices stay on the first screen: half each, not one scroll apart */
  .gate2{grid-template-columns:1fr;height:100svh;min-height:560px}
  .gate2-h+.gate2-h{box-shadow:inset 0 1px 0 rgba(244,242,237,.2)}
  .gate2-mark{top:clamp(18px,3.5vh,36px)}
  .gate2-t{font-size:clamp(22px,6.4vw,34px)}
}
/* Below about 646px a centred wordmark and a right-aligned control row can
   no longer share the top line — measured, not guessed. The mark moves to
   the left rail and the login button takes its short label. */
@media (max-width:660px){
  .gate2-mark{left:clamp(16px,3vw,40px);transform:none}
  .gate2-wide{display:none}
  .gate2-narrow{display:inline}
}
/* the narrowest phones still in use: the mark comes down a size and the
   controls close up, so the two clear each other at 320px */
@media (max-width:400px){
  .gate2-mark{font-size:16px;left:12px}
  .gate2-ctl{gap:4px;right:12px}
  .gate2-ctl .btn{padding:0 10px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .gate2-img,.gate2-veil,.gate2-t{transition:none}
  .gate2-h:hover .gate2-img{transform:none}
}

/* ============================================================================
   TYPE AND MEASURE
   A title fills the column it sits in. A paragraph keeps a measure a person
   can actually read. The two live in one full-width row, so the space is used
   without stretching a sentence to two hundred characters.
   ========================================================================= */
:root{
  --measure:52ch;        /* lede and page description → ~66 characters */
  --measure-sm:58ch;     /* smaller section text     → ~74 characters */
  --measure-prose:56ch;  /* long-form reading        → ~72 characters */
}

/* ---- page head: title left, description right, both on one baseline --- */
.page-head .pub-wrap{display:grid;grid-template-columns:1.1fr .9fr;
  column-gap:var(--sp-8);align-items:end}
.page-head .crumb,.page-head .eyebrow{grid-column:1 / -1}
.page-head .eyebrow{margin-bottom:var(--sp-3)}
.page-head .page-title{grid-column:1;margin:0}
.page-head .page-desc{grid-column:2;margin:0;align-self:end}
.page-head .pub-wrap > *:not(.crumb):not(.eyebrow):not(.page-title):not(.page-desc){
  grid-column:1 / -1;margin-top:var(--sp-6)}
/* with nothing beside it, the title takes the whole row */
.page-head .pub-wrap:not(:has(.page-desc)) .page-title{grid-column:1 / -1}

/* ---- section head: the same shape, one level down --------------------- */
/* Container queries, not media queries: the same head sits at the top level
   and inside a 440px column, and only the container knows which. */
.pub-wrap,.split-b,.co-left,.co-right{container-type:inline-size}
.shead{display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  align-items:end;margin-bottom:var(--sp-8)}
@container (min-width:880px){
  .shead{grid-template-columns:1.1fr .9fr;gap:var(--sp-5) var(--sp-8)}
}
.shead > h2{margin:0}
.shead > p{margin:0;align-self:end}

/* ---- measures ---------------------------------------------------------- */
/* Titles and description text fill their column. The column is the measure —
   capping the line length inside it leaves a ribbon of text in a wide space. */
.read .t-body,.read .t-sm{max-width:var(--measure-prose)}
/* inside a narrow column a measure is already set by the column itself */


/* ---- the brief: a wider column, and less air above the question ------- */
.tf-in{max-width:920px}
.tf{align-items:flex-start;padding-top:clamp(48px,9vh,104px)}
.tf-opts{gap:var(--sp-3) var(--sp-4)}

@media (max-width:1000px){
  .page-head .pub-wrap{grid-template-columns:1fr;gap:var(--sp-5)}
  .page-head .page-title,.page-head .page-desc{grid-column:1 / -1}
}

/* ---- one size for a section heading, wherever it appears -------------- */
.shead > h2,.sec-title{font-size:clamp(26px,2.9vw,42px);line-height:1.08;
  letter-spacing:-.03em;font-weight:300;text-wrap:pretty}
/* a display heading standing alone in a section keeps the same rank */
.pub-sec .display:not(.page-title){font-size:clamp(26px,2.9vw,42px);line-height:1.08}
/* the branch openers stay larger — they are the page's own title */
.bleed .display,.shero-t,.page-title{font-size:clamp(30px,4.4vw,56px);line-height:1.04}

/* Two passes of the wrapper could nest a section head inside another, which
   split 1392px into 744 and then into 317. Flattened here as well as in the
   markup, so it cannot come back. */
.shead .shead{display:contents}
/* the brief's opening title uses its column like every other title */
.tf-q--intro{max-width:none}

/* ---- the brief: text aligns with the title ----------------------------
   On these screens the title is the widest element and the text below it
   runs to the same edge. The copy is written short enough that the measure
   stays readable at that width, rather than the column being narrowed and
   the two falling out of alignment. */
.tf-h,.intro-l,.intro-l li,.tf-guide{max-width:none}
.tf-h{font-size:var(--fs-lg);line-height:1.5}
.intro-l li{font-size:var(--fs-lg);line-height:1.5}
.tf-form,.tf-form--wide{max-width:none}
.tf-form .fld,.tf-form--wide .fld{max-width:560px}

/* ---- a title and the copy under it are one column ---------------------
   Where text sits directly below a heading rather than beside it, the two
   share a measure. The heading is brought in to the reading width instead
   of the prose being pushed out to the heading's — long-form lines stay
   readable, and nothing overhangs the column it introduces. */
/* The measure tokens are in ch, which resolves against each element's own
   font size — the same token that gives body copy a 72-character line gives
   a 42px heading one three times too long. Shared columns are therefore set
   in rem, which does not move with the type size. */
:root{--col-guide:34rem}           /* the prose column: ~78 characters at 14px */
.guide > .split-b:last-child{max-width:var(--col-guide)}
.guide .sec-title{max-width:none}
.guide .t-body,.guide .t-sm{max-width:none}
.guide .t-body + .t-body{margin-top:var(--sp-4)}
.read-cta{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
@media (max-width:900px){
  .guide{grid-template-columns:1fr}
  .guide > .split-b:first-child{position:static}
  .read-cta{flex-direction:row;align-items:center}
}
.bleed-in{--hero-col:min(100%,940px)}
.bleed-in .display{max-width:var(--hero-col)}
.bleed-in .lede{max-width:var(--hero-col)}

/* ---- a heading sizes to its own column --------------------------------
   The FAQ rail is 439px wide, but .pull is sized against the viewport, so
   a 28-character question arrived at 37px and broke onto two lines with a
   stub for a second. Inside a narrow column the heading scales with the
   column (cqi) instead. */
@container (max-width:520px){
  .split-b > .pull{font-size:clamp(21px,6.1cqi,28px);letter-spacing:-.025em}
}
/* Card headings even their lines rather than leaving one word alone. */
.post-t,.card-t,.duo-t,.scard-t{text-wrap:balance}

/* ============================================================================
   STUDIO PAGE — the blended reference language
   The Custom Uniforms page is the one surface a buyer meets before they meet
   us, so it is allowed a softer geometry than the two applications: panels
   at 28, cards at 20, media at 16. Everything inside them still obeys the
   house rules — Gilmer Light and Regular, the 11px floor, the locked navy
   and off-white, red reserved for Merchandise, and the mark only ever on a
   solid field.

   Three references are blended here, structurally and not literally: the
   architecture studio (one display line, one photograph, a floating card of
   real information over it), the benefits platform (a centred statement and
   a row of figures set as a single object) and the designer portfolio
   (stacked panels on a quiet ground, small pill labels, a closing card that
   asks for the project).
   ========================================================================= */

:root{
  --r-panel:28px;
  --r-card:20px;
  --r-media:16px;
}

/* ---- the mark ----------------------------------------------------------
   currentColor, so it inherits the navy or the off-white of the solid field
   it sits on. Clear space is built into the 6% padding of the artwork. */
.mk{width:1em;height:1em;flex:none;color:inherit}
.mk--lockup{width:19px;height:19px;color:var(--navy);align-self:center;margin-right:1px}
.mk--news{width:15px;height:15px;color:var(--navy)}
.mk--ft{width:17px;height:17px;color:var(--navy)}
.mk--ask{width:34px;height:34px;color:var(--on-band);margin:0 auto var(--sp-6)}
.ft-mark{display:inline-flex;align-items:center;gap:var(--sp-3)}

/* ---- controls ----------------------------------------------------------
   The primary action carries its own arrow, so it reads as one object at
   any size. The arrow travels on hover; it does not bounce. */
.btn--arrow{padding-right:var(--sp-3);gap:var(--sp-4)}
.btn-a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--radius-full);background:color-mix(in srgb,currentColor 16%,transparent);
  font-style:normal;font-size:var(--fs-sm);line-height:1;flex:none;
  transition:transform var(--dur-morph) var(--ease)}
.btn--arrow:hover .btn-a{transform:translateX(3px)}
.btn--ghost .btn-a{background:var(--surface-2)}
/* Merchandise is the only place red appears in the chrome. */
.btn--merch{color:var(--red-text)}
.btn--merch:hover:not(:disabled){background:var(--red-quiet);color:var(--red-text)}

/* ---- the pill label ----------------------------------------------------
   The house section index survives inside the pill the references use, so a
   section still reads as a numbered chapter of one document. */
.tag{display:inline-flex;align-items:center;gap:var(--sp-3);border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius-full);padding:5px 14px 5px 5px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.tag i{font-style:normal;background:var(--navy-quiet);color:var(--navy);border-radius:var(--radius-full);
  padding:3px 8px;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.tag--dark{border-color:color-mix(in srgb,#F4F2ED 26%,transparent);background:transparent;
  color:var(--on-band-dim)}
.tag--dark i{background:color-mix(in srgb,#F4F2ED 16%,transparent);color:var(--on-band)}

/* ---- section head ------------------------------------------------------ */
/* A chapter head takes the full width of the page rather than a column down
   the middle of it. Centred, the statement runs as wide as it needs — at
   desktop each one lands on a single line — and the sentence under it keeps a
   readable measure, centred beneath it. */
.shd{max-width:none;margin:0 auto var(--sp-9);text-align:center}
.shd-t{font-size:clamp(28px,3.4vw,52px);margin-top:var(--sp-5);text-wrap:balance}
.shd-d{margin-top:var(--sp-5);margin-left:auto;margin-right:auto}
/* Left, the two halves sit side by side on one line of the grid: the
   statement on the left, the sentence beside it, both bottom-aligned. */
.shd--left{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--sp-5) var(--sp-8);align-items:end;text-align:left;max-width:none;margin-left:0}
.shd--left .tag{grid-column:1 / -1;justify-self:start}
.shd--left .shd-t{margin-top:0}
.shd--left .shd-d{margin:0 0 .4em}
.shd--left .shd-a{grid-column:1 / -1;margin-top:var(--sp-2)}
.shd--dark .shd-t{color:var(--on-band)}
.shd--dark .shd-d{color:var(--on-band-dim)}

/* ---- 1. the opening ---------------------------------------------------- */
.shero{padding:var(--sp-9) 0 var(--sp-9);border-bottom:0}
.shero-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:center}
.shero-t{margin-top:var(--sp-6);font-size:clamp(40px,5.6vw,76px);line-height:1.02}
.shero-d{margin-top:var(--sp-6)}
.shero-sup{margin-top:var(--sp-5)}
.news{padding:5px 14px 5px 8px}
.shero-img{border-radius:var(--r-panel);border:0}
/* Side by side, the photograph is capped by the screen rather than by its own
   ratio, so the opening always resolves within one view on a laptop. The crop
   runs from the top, so the wearers stay in frame. */
@media (min-width:1001px){
  .shero-img{max-height:calc(100svh - 260px)}
}
/* Between 1000 and 1200 the two columns are narrow enough that a full measure
   of lede would run right up to the artefact card. Shorten the measure so the
   gutter stays visible. */
@media (min-width:1001px) and (max-width:1200px){

}
.shero-img img{object-position:center top}
/* The card hangs off the photograph by exactly one gutter, so its left edge
   lands on the right edge of the copy column and never crosses into the text. */
.shero-card{left:calc(var(--sp-9) * -1);bottom:var(--sp-8);width:min(320px,80%);
  border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-4)}
/* the published work, in place of the client-logo row the references run */
.trust{margin-top:var(--sp-9);padding-top:var(--sp-6);border-top:var(--rule);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);align-items:center}
.trust-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);line-height:1.5;padding-right:var(--sp-6)}
.trust-r{display:contents}
.trust-i{border:0;background:transparent;cursor:pointer;text-align:left;padding:var(--sp-2) 0;
  display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center}
.trust-i b{font-size:var(--fs-md);font-weight:400;letter-spacing:-.01em;
  transition:color var(--dur-focus) var(--ease)}
.trust-i span{font-size:var(--fs-micro);color:var(--faint)}
.trust-i:hover b{color:var(--navy)}

/* ---- section grounds ----------------------------------------------------
   Every section used to sit on the same unbroken paper, with all the variety
   happening inside floating rounded panels. That reads as one flat surface
   however many panels are on it — which is the whole reason the page felt
   clinical. These are the same two colours the palette already had; what
   changes is that they now run edge to edge, so the page has a rhythm you feel
   while scrolling instead of a stack of cards.

   No new colour is introduced: --surface-2 is the warm off-white the panels
   were already made of, and --band is the navy the closing block already was. */
.pub-sec--warm{background:var(--surface-2)}
/* a panel inside a warm section would dissolve into it, so it takes the white
   the product cards use and keeps its edge */
.pub-sec--warm .panel{background:var(--surface)}
.pub-sec--warm .panel .tag{background:var(--surface-2)}

.pub-sec--dark{background:var(--band);color:var(--on-band)}
.pub-sec--dark .lede,.pub-sec--dark .muted,.pub-sec--dark .t-lead{color:var(--on-band-dim)}
.pub-sec--dark .eyebrow{color:var(--on-band-dim)}
.pub-sec--dark h2,.pub-sec--dark h3,.pub-sec--dark .display{color:var(--on-band)}
/* the closing block is already navy; inside a navy section it only has to
   stop being a panel and let the ground carry it */
.pub-sec--dark .ask{background:transparent;border-radius:0;padding:0}

/* ---- 2. the figures band ----------------------------------------------- */
.pub-sec--flush{padding-top:0}
.band{background:var(--band);color:var(--on-band);border-radius:var(--r-panel);
  padding:var(--sp-9) var(--sp-8) var(--sp-8)}
.band-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.band-c{padding:0 var(--sp-6)}
.band-c:first-child{padding-left:0}
.band-c:last-child{padding-right:0}
.band-c+.band-c{border-left:1px solid color-mix(in srgb,#F4F2ED 22%,transparent)}
.band-v{font-size:clamp(40px,4.6vw,68px);line-height:1;font-weight:300;letter-spacing:-.045em;
  color:var(--on-band)}
.band-l{font-size:var(--fs-md);font-weight:500;margin-top:var(--sp-4);color:var(--on-band)}
.band-n{font-size:var(--fs-xs);line-height:1.6;color:var(--on-band-dim);margin-top:var(--sp-3)}
.band-note{font-size:var(--fs-micro);color:var(--on-band-dim);margin-top:var(--sp-8);
  padding-top:var(--sp-5);border-top:1px solid color-mix(in srgb,#F4F2ED 18%,transparent);
  max-width:72ch}

/* ---- 3. the industries ------------------------------------------------- */
.ind-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.ind{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-4);display:flex;flex-direction:column;
  transition:border-color var(--dur-morph) var(--ease)}
.ind:hover{border-color:var(--line-strong)}
button.lnk-a{border:0;background:transparent;padding:0;font-family:inherit}
.ind-go{margin-top:var(--sp-2)}
/* Catalogue grounds run from warm mid-tone to near white, so every photograph
   carries the same hairline: without it the palest ones dissolve into the card. */
.ind-m{aspect-ratio:4/3;border-radius:var(--r-media);border:0;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.shero-img,.work-s .media{box-shadow:inset 0 0 0 1px var(--line)}
/* the catalogue frames its models tight to the top edge, so any crop must
   start there or it cuts the wearer's head */
.ind-m img{object-position:center top}
.ind-b{padding:var(--sp-5) 0 var(--sp-2);display:flex;flex-direction:column;flex:1}
.ind-t{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.ind-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:var(--sp-3)}
.ind-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);flex:1;align-content:flex-start}
.ind-tags .chip{border-radius:var(--radius-full)}
.ind-note{margin-top:var(--sp-6);text-align:center}

/* ---- 4. how it works --------------------------------------------------- */
.panel{background:var(--surface-2);border-radius:var(--r-panel);
  padding:var(--sp-10) var(--sp-8)}
.panel .tag{background:var(--surface)}
.how-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.how{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-6);display:flex;flex-direction:column}
.how-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.how-i{width:44px;height:44px;border-radius:14px;background:var(--navy);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.how-i svg{width:22px;height:22px}
.how-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.how-t{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;margin-top:var(--sp-5)}
.how-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:var(--sp-3)}
.how-cta{justify-content:center;margin-top:var(--sp-8)}

/* ---- 5. the timeline ---------------------------------------------------
   Four phases across one line. The rails abut, so the four segments read as
   a single line with a node on each phase. No duration appears: the order is
   fixed and the timing is not. */
.pt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--sp-8)}
.pt-i{display:flex;flex-direction:column}
/* the body fills its column so the ruled condition can be pinned to the
   bottom of all four at once, however many lines the paragraph above runs to */
.pt-b{padding-right:var(--sp-7);flex:1;display:flex;flex-direction:column}
.pt-rail{position:relative;height:1px;background:var(--line-strong);margin-bottom:var(--sp-6)}
.pt-i:last-child .pt-rail{background:linear-gradient(to right,var(--line-strong) 22px,transparent 22px)}
.pt-dot{position:absolute;left:0;top:50%;width:13px;height:13px;border-radius:50%;
  background:var(--navy);transform:translateY(-50%);
  box-shadow:0 0 0 4px var(--paper)}
.pt-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.pt-t{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;margin-top:var(--sp-3)}
.pt-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;
  margin:var(--sp-3) 0 var(--sp-5)}
/* auto takes the slack, the margin above keeps a floor under it */
.pt-m{font-size:var(--fs-micro);color:var(--navy);margin-top:auto;
  padding-top:var(--sp-3);border-top:1px solid var(--line);display:block}

/* ---- 7. what is included ----------------------------------------------- */
.sol{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:none}
.sol:hover{box-shadow:var(--shadow-2)}
.art{border-radius:var(--r-media)}

/* ---- 6. selected work ---------------------------------------------------
   Each project opens in place. Native disclosure, so the keyboard and the
   expanded state come from the browser, and more than one may be open at
   once — a reader comparing two projects should not have to close one. */
.work-s{align-items:stretch;gap:var(--sp-9)}
.work-s>.split-b:first-child{display:flex;flex-direction:column}
/* the swap wrapper sits between the column and the figure, so it has to pass
   the stretch through rather than stop it */
.work-s #workfig{flex:1;display:flex;flex-direction:column;min-height:0}
.work-s .fig{flex:1;display:flex;flex-direction:column;min-height:0}
/* The photograph takes its height from the projects beside it. The image is
   taken out of flow so its own 4:5 intrinsic size cannot drive the row. */
.work-s .media{border-radius:var(--r-panel);border:0;flex:1;aspect-ratio:auto;
  min-height:420px;position:relative}
.work-s .media img{position:absolute;inset:0}
.work-s .cap{flex:none}
/* Filled to the column height, a top crop shows only a head: bias down the
   frame so the garment is what the reader sees. */
.work-s .media img{object-position:center 25%}
.cases{border-top:var(--rule)}
.case{border-bottom:var(--rule)}
.case-q{cursor:pointer;list-style:none;display:flex;gap:0;align-items:baseline;
  padding:var(--sp-5) var(--sp-7) var(--sp-5) 0;position:relative;min-height:44px}
.case-q::-webkit-details-marker{display:none}
.case-q::after{content:"+";position:absolute;right:var(--sp-2);top:var(--sp-5);
  font-size:var(--fs-xl);font-weight:300;color:var(--muted);line-height:1}
.case[open] .case-q::after{content:"–"}
.case-q:hover .case-h{color:var(--navy)}
/* One 36px column holds the index for both the summary and the body, so the
   opened text starts exactly under the project name. */
.case-n{font-size:var(--fs-md);font-weight:300;color:var(--faint);flex:none;width:36px;
  font-variant-numeric:tabular-nums}
.case-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.case-h{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2;
  transition:color var(--dur-focus) var(--ease)}
.case-m{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.case-b{padding:0 var(--sp-7) var(--sp-6) 36px}
.case-scope{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-5)}
.case-r+.case-r{margin-top:var(--sp-4)}
.case-r b{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.case-r p{font-size:var(--fs-sm);line-height:1.65}
.case-cta{margin-top:0}
.case-acts{margin-top:var(--sp-5);gap:var(--sp-3);flex-wrap:wrap}

/* ---- 8. the invitation --------------------------------------------------
   The closing panel is navy in both themes, so its controls use the literal
   band tokens rather than the inverting surface ones. */
.ask{background:var(--band);color:var(--on-band);border-radius:var(--r-panel);
  padding:clamp(40px,5vw,80px) var(--sp-8);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.ask-t{margin-top:var(--sp-5);font-size:clamp(30px,3.8vw,58px);color:var(--on-band)}
.ask-d{margin-top:var(--sp-5);color:var(--on-band-dim)}
.ask-btns{margin-top:var(--sp-7);justify-content:center}
.ask-sup{margin-top:var(--sp-5);color:var(--on-band-dim)}
.ask .btn--primary{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.ask .btn--primary:hover:not(:disabled){background:#FFFFFF;border-color:#FFFFFF}
.ask .btn--primary .btn-a{background:color-mix(in srgb,#011251 12%,transparent)}
.ask .btn--ghost{background:transparent;color:var(--on-band);
  border-color:color-mix(in srgb,#F4F2ED 42%,transparent)}
.ask .btn--ghost:hover:not(:disabled){background:color-mix(in srgb,#F4F2ED 12%,transparent);
  border-color:var(--on-band)}
.ask .btn--ghost .btn-a{background:color-mix(in srgb,#F4F2ED 18%,transparent)}
/* Opened from the second CTA rather than from a disclosure summary, so the
   panel carries its own top padding where the summary row used to sit. */
.ask-adv{padding-top:var(--sp-6)}
.ask-adv .disc-b{padding-bottom:var(--sp-6)}
.ask-disc{margin-top:var(--sp-8);width:min(560px,100%);text-align:left;
  background:transparent;border:0;
  border-top:1px solid color-mix(in srgb,#F4F2ED 20%,transparent);
  border-bottom:1px solid color-mix(in srgb,#F4F2ED 20%,transparent)}
.ask-disc .disc-q::before{color:var(--on-band-dim)}
.ask-disc .disc-q{padding-left:0}
.ask-disc .disc-b{padding-left:0}
.ask-disc .disc-q{color:var(--on-band)}
.ask-disc .disc-b{color:var(--on-band-dim)}
.ask-disc .fld-l{color:var(--on-band-dim)}
.ask-disc .inp{background:color-mix(in srgb,#F4F2ED 10%,transparent);color:var(--on-band);
  border-color:color-mix(in srgb,#F4F2ED 28%,transparent)}
.ask-disc .inp::placeholder{color:color-mix(in srgb,#F4F2ED 46%,transparent)}
.ask-disc .chk{color:var(--on-band-dim)}
.ask-disc .lnk{color:var(--on-band)}
.ask-disc .btn--ghost{background:transparent;color:var(--on-band);
  border-color:color-mix(in srgb,#F4F2ED 42%,transparent)}

/* ---- the questions ------------------------------------------------------ */
.faq-s{margin-top:var(--sp-7)}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .ind-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) 0}
  .pt-i:nth-child(2) .pt-rail{background:linear-gradient(to right,var(--line-strong) 22px,transparent 22px)}
}
/* The label takes its own line before the projects as soon as four columns
   would squeeze them. */
@media (max-width:900px){
  .trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
  .trust-l{grid-column:1 / -1;padding-right:0}
}
@media (max-width:1000px){
  /* these repeat the earlier stacking rules: the base rules above are later in
     the file, so a media query that precedes them cannot win on its own */
  .shero{padding-top:var(--sp-7)}
  .shero-in{grid-template-columns:1fr;gap:var(--sp-7)}
  /* Stacked, the statement comes first and the photograph follows it as
     evidence. A full-bleed 4:5 photograph at tablet width is a wall: it fills
     the opening screen and the headline never appears above the fold. */
  .shero-media{order:0}
  .shero-img{max-height:clamp(300px,46svh,560px)}
  .shero-t{font-size:clamp(34px,7.4vw,56px)}
  .shero-card{position:static;left:auto;bottom:auto;width:100%;
    margin-top:calc(var(--sp-6) * -1);box-shadow:var(--shadow-3)}
  .band{padding:var(--sp-8) var(--sp-6)}
  .band-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) 0}
  .band-c:nth-child(3){padding-left:0;border-left:0}
  .band-c:nth-child(2){padding-right:0}
  .panel{padding:var(--sp-9) var(--sp-6)}
  .work-s{gap:var(--sp-7)}
}
@media (max-width:900px){
  .shd--left{grid-template-columns:1fr;align-items:start}
  .shd--left .shd-d{margin:0;max-width:60ch}
}
@media (max-width:720px){
  .shd{margin-bottom:var(--sp-8)}
  .ind-g,.how-g{grid-template-columns:1fr}
  .pt{grid-template-columns:1fr;gap:0}
  .pt-i{flex-direction:row;gap:var(--sp-6);padding:0 0 var(--sp-7)}
  .pt-rail{width:1px;height:auto;align-self:stretch;margin:0;flex:none;
    background:var(--line-strong)}
  .pt-i .pt-rail,.pt-i:nth-child(2) .pt-rail,.pt-i:last-child .pt-rail{background:var(--line-strong)}
  .pt-i:last-child .pt-rail{background:linear-gradient(to bottom,var(--line-strong) 22px,transparent 22px)}
  .pt-dot{left:50%;top:6px;transform:translateX(-50%)}
  .trust{grid-template-columns:1fr;gap:var(--sp-2)}
  .trust-l{padding-right:0;margin-bottom:var(--sp-2)}
  .news{align-items:flex-start;line-height:1.45}
  .band-g{grid-template-columns:1fr}
  .band-c{padding:0}
  .band-c+.band-c{border-left:0;border-top:1px solid color-mix(in srgb,#F4F2ED 22%,transparent);
    padding-top:var(--sp-6)}
  .ask{padding:var(--sp-8) var(--sp-5)}
  .ask-btns{flex-direction:column;align-items:stretch;width:min(320px,100%)}
  .ask-btns .btn{width:100%;justify-content:space-between}
}
/* On a phone the two opening actions become one stack of equal blocks: two
   capsules of different widths sitting under each other read as an accident.
   The eyebrow, which wraps to two lines at this width, stops pretending to
   be a capsule and becomes a rounded block. */
@media (max-width:520px){
  .shero .btn-row{flex-direction:column;align-items:stretch}
  .shero .btn-row .btn{width:100%;justify-content:space-between}
  .news{border-radius:18px;padding:8px 14px 8px 10px}
}
@media (prefers-reduced-motion:reduce){
  .ind:hover{transform:none}
  .btn--arrow:hover .btn-a{transform:none}
}
.shd-a{margin-top:var(--sp-5)}
.faq-s .faq{max-width:none}
.faq-s .faq-q{font-size:var(--fs-lg);font-weight:300;letter-spacing:-.01em;padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
@media (max-width:720px){
  .case-b{padding-left:0;padding-right:0}
  .case-q{padding-right:var(--sp-6)}
}

/* ---- the one-pager's vertical rhythm ------------------------------------
   Every chapter gets the same air, and that air is set by the height of the
   screen: generous on a large display, tighter on a 768-tall laptop where
   160px between sections reads as a gap rather than as space. */
main[data-branch] .pub-sec,
main[data-page="merch"] .pub-sec,
main[data-page="products"] .pub-sec,
main[data-page="collection"] .pub-sec,
main[data-page="collections"] .pub-sec,
main[data-page="product"] .pub-sec{padding:clamp(48px,7.5vh,80px) 0}
/* The flush reset exists so a full-bleed opener can run up under the header.
   The page head is not one of those — it is a band with a ground of its own,
   and it needs its padding. Excluding it here rather than fighting the
   specificity from the other side, because this is the rule that is wrong
   about it: .mph's own padding-top has been dead since this was written. */
main[data-branch] .pub-sec--flush:not(.mph),
main[data-page="merch"] .pub-sec--flush:not(.mph),
main[data-page="products"] .pub-sec--flush:not(.mph),
main[data-page="collection"] .pub-sec--flush:not(.mph),
main[data-page="collections"] .pub-sec--flush:not(.mph){padding-top:0}
main[data-branch] .shero,
main[data-page="merch"] .shero{padding:clamp(32px,5vh,56px) 0 clamp(40px,6vh,56px)}

/* The capsule's own padding would otherwise set its label 12px inside the
   column the questions are aligned to. */
.faq-s .faq-more{margin-left:calc(var(--sp-3) * -1)}

/* ============================================================================
   MERCHANDISE — the same language, in the catalogue
   The Studio page set the devices: a pill label with the chapter index, a
   light display line, rounded panels on a quiet ground, one navy band. The
   catalogue uses all of them, and spends the Merchandise red only on the
   index chip and the eyebrows.

   The card is the smallest piece of this system and the one that repeats
   most, so it carries four lines and a row of colours. Anything true of the
   whole grid is said once, under the grid.
   ========================================================================= */

/* Red is the merchandise line's colour and it was doing almost nothing: a
   small link here and there. The label at the top of every merchandise page
   is exactly what an accent is for — it says which of the two businesses you
   are in, before you have read a word. */
.tag--merch{background:var(--red-quiet);border-color:color-mix(in srgb,#7F1D16 22%,transparent);
  color:var(--red-text)}
.tag--merch i{background:color-mix(in srgb,#7F1D16 16%,transparent);color:var(--red-text)}
.tag--plain{padding-left:14px}
/* The catalogue's opening line is longer than the Studio's, so it is set a
   step smaller and lands on two lines rather than four. */
.shero--merch .shero-t{font-size:clamp(32px,4.3vw,58px)}
.news--merch b{background:var(--red-quiet);color:var(--red-text)}

/* ---- listing page head -------------------------------------------------- */
.mph{background:var(--surface-2);border-bottom:2px solid var(--red)}
/* Stated with enough specificity to actually hold. The per-page .pub-sec rules
   set padding for content sections and were reaching this band too, so its
   size was whatever those happened to say. A masthead should be sized on
   purpose. */
main[data-branch] .mph{padding:clamp(36px,4.6vh,60px) 0 clamp(32px,4vh,52px)}
/* the breadcrumb is navigation, not part of the title block — it needs enough
   air after it to stop reading as the first line of the heading */
.mph .crumb{margin-bottom:var(--sp-7)}
.mph-t{font-size:clamp(32px,4vw,58px);margin-top:var(--sp-6)}
.mph-d{margin-top:var(--sp-6)}
.mph-m{margin-top:var(--sp-6);font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---- the product card ---------------------------------------------------
   The whole card is the control, so nothing inside it is a second button. */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-6);margin-top:var(--sp-7)}
/* Four across, not as many as will fit. Auto-fill gave a fifth column on a wide
   screen, and at that width the garment in the photograph is smaller than the
   card's own text. The steps down are set rather than inferred. */
@media (max-width:1040px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-3);display:flex;flex-direction:column;cursor:pointer;
  transition:border-color var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease)}
.pc:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.pc:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pc-m{aspect-ratio:1;border-radius:var(--r-media);border:0;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.pc-m img{object-position:center top}
.pc-ph{font-size:44px;align-self:center;margin:auto}
.pc-b{padding:var(--sp-5) var(--sp-2) var(--sp-2);display:flex;flex-direction:column;flex:1}
/* One line, always. The grid's narrowest card leaves 210px for the title and
   the longest name ("Custom Long Sleeve Polo Shirt") measures 205px at 15px,
   so the type scales with the card and stops there. The plain declaration is
   the fallback where container units are unsupported; the ellipsis is a
   guarantee, not a working part. */
.pc{container-type:inline-size}
.pc-t{font-size:var(--fs-md);font-weight:400;letter-spacing:-.012em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-t{font-size:clamp(15px,6cqi,18px)}
.pc-meta{font-size:var(--fs-micro);color:var(--faint);margin-top:6px;font-variant-numeric:tabular-nums}
.pc-f{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-5)}
/* "From" sits above the figure rather than beside it, so the price itself
   still reads as one clean number down the column of cards. */
.pc-price{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.pc-price b{font-size:var(--fs-lg);font-weight:400;font-variant-numeric:tabular-nums}
.pc-price span{font-size:var(--fs-micro);color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase}
.pc-price em{font-style:normal;font-size:var(--fs-sm);color:var(--muted)}
.pc-sw{display:flex;align-items:center;gap:4px;flex:none;padding-bottom:2px}
.pc-sw i{width:11px;height:11px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 22%,transparent)}
.pc-sw em{font-style:normal;font-size:var(--fs-micro);color:var(--faint);margin-left:2px;
  font-variant-numeric:tabular-nums}

/* ---- the filters --------------------------------------------------------
   One bar, everything visible. The collection row is the primary filter and
   sits above the rule; the qualifiers sit under it, each behind its label. */
/* the grouped card invites the build rather than just counting stock */
.pc-var{font-size:var(--fs-xs);font-weight:600;color:var(--red);margin-top:6px;
  display:flex;align-items:baseline;gap:5px;white-space:nowrap;overflow:hidden}
.pc-var>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pc-var i{font-style:normal;font-size:12px;flex:none;transition:transform var(--dur-focus,.18s) var(--ease,ease)}
.pc.hovr:hover .pc-var i{transform:translateX(3px)}
/* how many garments sit behind the card, read at a glance from the grid */
.pc-m{position:relative}
.pc-n{display:inline-flex;align-self:flex-start;margin-top:8px;font-size:var(--fs-micro);
  letter-spacing:.03em;background:var(--surface-2);color:var(--muted);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}

/* every garment in a collection, flat — the familiar way in */
/* ---- choosing a kind of garment ----------------------------------------
   The way into 174 garments. Each tile carries the colours that kind actually
   comes in, so the choice is made on something real rather than on a word. */
.gbp{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-6)}
.gbp-c{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-4);
  text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-media);
  padding:0 var(--sp-5) var(--sp-5);
  transition:border-color var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease)}
.gbp-c:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.gbp-c:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.gbp-sw{grid-column:1 / -1;display:flex;height:40px;margin:0 calc(var(--sp-5) * -1) var(--sp-5);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,#011251 10%,transparent)}
.gbp-sw i{flex:1 1 0;min-width:0;display:block;
  box-shadow:inset -1px 0 0 color-mix(in srgb,#011251 9%,transparent)}
.gbp-sw i:last-child{box-shadow:none}
.gbp-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.gbp-t{font-size:var(--fs-lg);font-weight:400;letter-spacing:-.012em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbp-m{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.gbp-a{color:var(--faint);font-size:15px;transition:transform var(--dur-focus) var(--ease)}
.gbp-c:hover .gbp-a{transform:translateX(3px);color:var(--red)}

/* back out of a chosen type */
.gb-back{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.gb-scope{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* ---- the size split ----------------------------------------------------
   Optional, and folded away until asked for: most buyers give us a number and
   the sizes later. When it is open it is the quantity, so it sits inside the
   quantity step rather than beside it. */
.szp{margin-top:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);overflow:hidden}
.szp-h{display:flex;align-items:center;gap:var(--sp-3);width:100%;font:inherit;
  font-size:var(--fs-sm);color:inherit;background:none;border:0;cursor:pointer;
  padding:var(--sp-4) var(--sp-4);text-align:left}
.szp-h:hover{background:var(--surface-2)}
.szp-h em{font-style:normal;font-size:var(--fs-xs);color:var(--muted);margin-left:auto}
.szp-h i{font-style:normal;font-size:15px;opacity:.55;width:12px;text-align:center}
.szp-b{padding:0 var(--sp-4) var(--sp-4);border-top:1px solid var(--line)}
.szg{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-4)}
.szg-i{display:flex;flex-direction:column;gap:4px;min-width:0}
.szg-l{font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.szg-n{width:100%;text-align:center;font-variant-numeric:tabular-nums;padding:7px 4px}
.szg-n::-webkit-outer-spin-button,.szg-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.szg-n{-moz-appearance:textfield}
.szp-f{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.szp-f .btn{margin-left:auto}
/* a bracket card cannot be clicked while the split decides the quantity */
.qcard--off{opacity:.5;cursor:default}
/* the size run, wherever a quote line is shown */
.szrun{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:3px;
  font-variant-numeric:tabular-nums}
.dqty--fixed{display:inline-grid;place-items:center;background:var(--surface-2);
  color:var(--muted);cursor:default}
@media (max-width:620px){
  .szg{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}

/* ---- the garment browser ------------------------------------------------
   One card per garment. With no photography, the colour range IS the picture:
   the band across the top is the actual colours that garment is made in, so
   two cards at the same weight still look like different things. */
.gb{margin-top:var(--sp-6)}
.gb-bar{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.gb-search{position:relative;display:flex;align-items:center;flex:1 1 340px;min-width:0}
.gb-i{position:absolute;left:15px;display:inline-flex;color:var(--faint);pointer-events:none}
.gb-q{width:100%;font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-full);min-height:46px;
  padding:0 40px 0 42px;-webkit-appearance:none;appearance:none;
  transition:border-color var(--dur-focus) var(--ease),box-shadow var(--dur-focus) var(--ease)}
.gb-q::placeholder{color:var(--faint)}
.gb-q::-webkit-search-cancel-button,.gb-q::-webkit-search-decoration{-webkit-appearance:none}
.gb-q:hover{border-color:var(--ink)}
.gb-q:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 16%,transparent)}
.gb-x{position:absolute;right:7px;display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:17px;
  line-height:1;cursor:pointer;font-family:inherit}
.gb-x:hover{background:var(--surface-3);color:var(--ink)}
.gb-sort{margin-left:auto;width:auto;max-width:220px;flex:0 0 auto}
.gb-sort .fsel{min-height:46px}

/* the questions, grouped so a pill is read against its own label */
.gb-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4);
  align-items:center}
.gb-grp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.gb-gl{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-right:2px}
.fp--sm{min-height:34px;padding:0 var(--sp-4);font-size:var(--fs-xs)}

.gb-head{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.gb-c-n{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.gb-head .btn{margin-left:auto}

.gb-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5)}
/* The colour band that used to head this card is gone — the space is reserved
   for the garment's own photograph once there is one. */
.gb-c{display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;
  cursor:pointer;padding:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-media);
  transition:border-color var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease)}
.gb-c:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.gb-c:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* the colour band */
.gb-b{display:flex;flex-direction:column;gap:3px;padding:var(--sp-4);flex:1}
/* The title now carries the whole spec, so it runs to two or three lines on a
   narrow card. Tighter leading keeps that block compact; balanced wrapping
   stops a lone "155 g/m²" stranded on its own line. */
.gb-t{font-size:var(--fs-sm);font-weight:500;line-height:1.35;text-wrap:balance}
.gb-m{font-size:var(--fs-micro);color:var(--faint);line-height:1.35}
/* "from 500 pieces" is wider than the card at its narrowest, so the colour
   count drops to its own line rather than running past the edge. */
.gb-f{display:flex;align-items:baseline;justify-content:space-between;
  gap:2px var(--sp-2);flex-wrap:wrap;margin-top:auto;padding-top:var(--sp-4)}
.gb-n{margin-left:auto}
.gb-pr{font-size:var(--fs-md);font-variant-numeric:tabular-nums;white-space:nowrap;
  display:flex;flex-direction:column;line-height:1.2}
.gb-pr em{font-style:normal;font-size:var(--fs-micro);color:var(--faint);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase}
.gb-req{font-size:var(--fs-sm);color:var(--muted)}
.gb-n{font-size:var(--fs-micro);color:var(--faint);white-space:nowrap}
.gb-c:hover .gb-pr{color:var(--red)}
@media (max-width:620px){
  .gb-sort{margin-left:0;max-width:none;width:100%;flex:1 1 100%}
  .gb-g{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
  .gb-b{padding:var(--sp-3)}
  .gb-pills{gap:var(--sp-2) var(--sp-4)}
}

.fbar{margin-top:var(--sp-7)}
/* the collapsed head: one control, what is applied, and the sort */
.fhead{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.fbtn{display:inline-flex;align-items:center;gap:var(--sp-3);font:inherit;font-size:var(--fs-sm);
  color:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-full);padding:0 var(--sp-4);min-height:38px}
.fbtn:hover{border-color:var(--ink)}
.fbtn--on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fbtn-i{display:inline-flex;opacity:.75}
.fbtn-n{font-style:normal;font-size:var(--fs-micro);font-weight:600;background:var(--red);
  color:#FFF;border-radius:999px;min-width:18px;height:18px;display:inline-grid;place-items:center;
  padding:0 5px}
.fbtn-c{font-size:15px;opacity:.55;margin-left:2px}
.fhead-h{font-size:var(--fs-xs);color:var(--muted)}
.fhead .fapp{margin-top:0}
.fhead .fsort--top{margin-left:auto;max-width:190px;width:auto}
.fhead .fsort--top .fsel{min-height:38px}
@media (max-width:620px){
  .fhead{align-items:stretch}
  .fhead .fsort--top{margin-left:0;max-width:none;width:100%}
}
/* the panel, only when asked for */
.frow{padding-top:var(--sp-5)}
.fp em{font-style:normal;font-size:var(--fs-micro);opacity:.6;margin-left:6px}
.fp--on em{opacity:.8}
@media (prefers-reduced-motion:no-preference){
  #fpanel{animation:fReveal .22s var(--ease,ease) both}
  @keyframes fReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
.fscroll{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;
  padding-bottom:var(--sp-2);margin-bottom:var(--sp-2)}
.fscroll::-webkit-scrollbar{display:none}
.fscroll--top{margin-bottom:var(--sp-5)}
.fp{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:var(--radius-full);padding:0 var(--sp-5);min-height:40px;font-size:var(--fs-sm);
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease),
             color var(--dur-focus) var(--ease)}
.fp:hover{border-color:var(--line-strong);color:var(--ink)}
/* These live only on the merchandise pages, so the selected one carries the
   merchandise colour rather than a generic near-black. */
/* --paper inverts with the theme and --red inverts with it, so one line gives
   off-white on deep red in light and near-black on soft red in dark. The
   three-selector version this replaced looked like a dark-mode override but
   matched in light mode too, and was only right by accident. */
.fp--on{background:var(--red);border-color:var(--red);color:var(--paper);font-weight:500}
.fp--on em{color:var(--paper)}
/* Four columns: three questions and the order they come back in. Pills wrap
   inside their own column, so the groups keep their line however many there
   are. */
.frow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;
  gap:var(--sp-6) var(--sp-7);margin-top:var(--sp-5);padding-top:var(--sp-6);border-top:var(--rule)}
.fgrp{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.fgrp-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.fgrp-p{display:flex;flex-wrap:wrap;gap:6px}
.fgrp .fp{min-height:34px;padding:0 var(--sp-4);font-size:var(--fs-xs)}
.fsort{justify-self:end;width:100%;max-width:210px}
.fsort{display:flex;flex-direction:column;gap:var(--sp-3)}
.fsel{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--radius-full);min-height:34px;padding:0 var(--sp-4);font-size:var(--fs-xs);
  cursor:pointer;font-family:inherit}
.fsel:hover{border-color:var(--line-strong)}
.fapp{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-5)}
.fx{border:0;background:var(--red-quiet);color:var(--red-text);border-radius:var(--radius-full);
  padding:6px 12px;font-size:var(--fs-xs);cursor:pointer;display:inline-flex;gap:8px;
  align-items:center;font-family:inherit;min-height:32px}
.fx i{font-style:normal;opacity:.65;font-size:var(--fs-sm);line-height:1}
.fx:hover i{opacity:1}

/* ---- the count and the basis, once ------------------------------------- */
.more{align-items:flex-start}
.more-l{display:flex;flex-direction:column;gap:4px}
.empty-p{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-9) var(--sp-7);text-align:center;margin-top:var(--sp-7);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.empty-p .btn-row{justify-content:center}

/* ---- the collection card ------------------------------------------------ */
/* ---- the collections rail ----------------------------------------------
   Native scroll with snap: the browser does the moving, so a trackpad swipe,
   a drag, the arrow keys and the two buttons all drive one mechanism. Three
   cards fit the wrap and the fourth is cut by its edge, which is what tells
   you there is more without needing a caption to say so. */
.carou{position:relative}
.carou-t{display:flex;gap:var(--sp-6);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  scroll-padding-left:var(--sp-1);padding:var(--sp-1) var(--sp-1) var(--sp-2);
  margin:calc(var(--sp-1) * -1);
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.carou-t::-webkit-scrollbar{display:none}
.carou-t>.cc{flex:0 0 calc((100% - var(--sp-6) * 2) / 3);scroll-snap-align:start}
/* proximity, not mandatory: the last card's snap point sits past the furthest
   the rail can scroll, and a mandatory snap keeps hauling a scroll that ends
   there back to the previous card. Proximity still settles a swipe on a card
   edge and leaves a scroll the buttons asked for where it was put. */
.carou-t>.cc:last-child{scroll-snap-align:end}
.carou-t:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:var(--r-card)}

.carou-f{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-6)}
.carou-p{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.carou-p i{display:block;height:100%;background:var(--red);border-radius:2px;
  transition:width var(--dur-morph) var(--ease),margin-left var(--dur-morph) var(--ease)}
.carou-nav{display:flex;gap:var(--sp-3);flex:none}
.carou-b{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-size:var(--fs-md);cursor:pointer;
  display:grid;place-items:center;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease),
             opacity var(--dur-focus) var(--ease)}
.carou-b:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.carou-b:disabled{opacity:.32;cursor:not-allowed}
/* nothing to scroll: the controls would be a lie, so they go */
.carou--still .carou-f{display:none}

@media (prefers-reduced-motion:reduce){.carou-t{scroll-behavior:auto}}
@media (max-width:1000px){
  .carou-t>.cc{flex-basis:calc((100% - var(--sp-6)) / 2)}
}
@media (max-width:680px){
  .carou-t{gap:var(--sp-4)}
  .carou-t>.cc{flex-basis:82%}
  .carou-b{width:40px;height:40px}
}
.cc-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.cc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-4);display:flex;flex-direction:column;cursor:pointer;
  transition:border-color var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease)}
.cc:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.cc-m{aspect-ratio:1;border-radius:var(--r-media);border:0;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.cc-m img{object-position:center top}
.cc-b{padding:var(--sp-5) var(--sp-2) var(--sp-2);display:flex;flex-direction:column;flex:1}
.cc-t{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.cc-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:var(--sp-3);flex:1}
.cc-f{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.cc-n{font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums}
.cc .lnk-a{min-height:0}

/* ---- five steps instead of six ----------------------------------------- */
.how-g--5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---- what we check ------------------------------------------------------ */
/* ---- what we check -----------------------------------------------------
   A photograph on the left and the record on the right, rather than two
   cards of text side by side. The certification marks are category symbols,
   not the schemes' own logos — those belong on a product, against its
   certificate, which is what the paragraph beside them says. */
/* The record is the longer half here, so the photograph takes the smaller
   column rather than the 1.35fr the wide split gives it by default. */
.chk-s{grid-template-columns:.8fr 1.2fr;align-items:stretch;gap:var(--sp-9)}
.chk-s>.split-b:first-child{display:flex;flex-direction:column}
.chk-s .fig{flex:1;display:flex;flex-direction:column;min-height:0}
.chk-s .media{flex:1;aspect-ratio:auto;min-height:420px;border-radius:var(--r-panel);border:0;
  box-shadow:inset 0 0 0 1px var(--line)}
.chk-ph{background:var(--surface-2);display:grid;place-items:center}
.chk-ph-in{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;
  padding:var(--sp-6)}
.chk-ph .mk{width:34px;height:34px;color:var(--red);opacity:.5}
.chk-ph-t{font-size:var(--fs-md);font-weight:500;color:var(--muted)}
.chk-ph-s{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.chk-b{display:flex;flex-direction:column}
.chk-cert{margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:var(--rule)}
.certs--mark{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.certs--mark .cert{flex-direction:row;align-items:flex-start;gap:var(--sp-4);
  background:var(--surface);border-radius:var(--r-card)}
.cert-i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,#7F1D16 8%,transparent);color:var(--red)}
.cert-i svg{width:20px;height:20px}
.cert-t{display:flex;flex-direction:column;gap:3px;min-width:0}
@media (max-width:1000px){
  /* 1000px is where .split stacks; the column override above has to be undone
     at the same width or it keeps two columns alive after the stack. */
  .chk-s{grid-template-columns:1fr;gap:var(--sp-7)}
  .chk-s .media{min-height:300px}
  .chk-cert{margin-top:var(--sp-7);padding-top:var(--sp-6)}
}
@media (max-width:560px){.certs--mark{grid-template-columns:1fr}}
.chk-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
/* .chk-c, not .chk: .chk is the checkbox row, and this card was overriding it
   wherever a form used one. */
.chk-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-7);display:flex;flex-direction:column}
.chk-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.65;margin-top:var(--sp-5)}
.chk-f{margin-top:auto;padding-top:var(--sp-5)}
.chk-c .ticks{margin-top:var(--sp-5)}
.chk-c .certs{margin-top:var(--sp-5)}
.cert{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-4)}

/* ---- the written guidance under a listing ------------------------------ */
.guide-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-7);
  margin-top:var(--sp-7)}
.guide-g p{font-size:var(--fs-sm);line-height:1.7;color:var(--muted)}
.guide-cta{margin-top:var(--sp-8);justify-content:center}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1200px){
  .how-g--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .cc-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-g{grid-template-columns:1fr;gap:var(--sp-5)}
}
@media (max-width:1100px){
  .frow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fsort{justify-self:start;max-width:none}
}
@media (max-width:900px){
  .how-g--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chk-g{grid-template-columns:1fr}
  .frow{gap:var(--sp-5)}
}
@media (max-width:720px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
  .pgrid--4,.cc-g{grid-template-columns:1fr}
  .how-g--5{grid-template-columns:1fr}
  .pc-b{padding:var(--sp-4) var(--sp-1) var(--sp-1)}
  .pc-t{font-size:var(--fs-md)}
  .pc-f{flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding-top:var(--sp-4)}
  .chk-c{padding:var(--sp-5)}
  .more{flex-direction:column;align-items:stretch;gap:var(--sp-4)}
}
/* Two columns stop here rather than at 520: below ~600px a half-width card
   leaves under 210px for the title, which is where the longest product name
   starts needing a second line. */
@media (max-width:600px){
  .pgrid{grid-template-columns:1fr}
}

/* ============================================================================
   THE PRODUCT PAGE — the same language, one decision at a time
   The photograph holds the left column and stays there while you work; the
   right column is a short column of decisions with a hairline between each.
   Nothing is boxed that does not need a box: the only panels are the ones
   that hold a number you are being asked to accept.
   ========================================================================= */
.pdp-sec{padding-top:clamp(16px,2.6vh,28px)}
.pdp-crumb{margin-bottom:var(--sp-6)}
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp-9);align-items:start}
.pdp-media{position:sticky;top:calc(var(--header-h) + var(--sp-5));display:flex;
  flex-direction:column;gap:var(--sp-4)}
.pdp-hero{aspect-ratio:1;border-radius:var(--r-panel);border:0;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center}
.pdp-hero img{width:100%;height:100%;object-fit:contain}
.pdp-glyph{font-size:96px}
/* the four angles of the shoot, above the photograph they change */
.pdp-views{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3);flex-wrap:wrap}
.pdp-view{font:inherit;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-full);
  padding:0 var(--sp-4);min-height:32px;
  transition:border-color var(--dur-focus) var(--ease),color var(--dur-focus) var(--ease)}
.pdp-view:hover{border-color:var(--line-strong);color:var(--ink)}
.pdp-view.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.pdp-rail{display:flex;flex-direction:row;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;
  max-height:none;padding-bottom:2px}
.pdp-rail::-webkit-scrollbar{display:none}
.pdp-thumb{width:64px;height:80px;flex:none;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);
  transition:border-color var(--dur-focus) var(--ease)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pdp-thumb:hover{border-color:var(--line-strong)}
.pdp-thumb.on{border-color:var(--ink);border-width:2px}

/* where the mark goes: a quiet panel, not a form */
.place-map{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);
  padding:var(--sp-5);margin-top:var(--sp-2)}
.place-cell{border-radius:var(--radius-md)}
.place-cell.on{border-color:var(--red);background:var(--red-quiet)}
.place-cell.on .place-n{background:var(--red);color:var(--paper)}

/* the decisions -------------------------------------------------------- */
.pdp-cfg .tag{cursor:pointer;align-self:flex-start}
/* The header was four blocks at 20 / 20 / 24 / 20 — an even rhythm, so nothing
   grouped. It now reads as three things: what it is (tag, name, specification),
   what it costs, and what it is for. */
.pdp-t{font-size:clamp(30px,3.2vw,46px);margin-top:var(--sp-3);line-height:1.05}
.pdp-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4);
  font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums;
  text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.pdp-from{margin-top:var(--sp-7);display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.pdp-from b{font-size:clamp(26px,2.4vw,34px);font-weight:300;letter-spacing:-.03em}
.pdp-from span{font-size:var(--fs-xs);color:var(--muted)}
/* the same "From" the card carried, so the two read as one statement */
.pdp-from .pdp-from-l{font-size:var(--fs-micro);color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase;align-self:center}
/* the column is the measure: description text fills it, never a capped ribbon */
.pdp-desc{font-size:var(--fs-sm);line-height:1.7;color:var(--muted);margin-top:var(--sp-5);
  padding-bottom:var(--sp-2)}
.pdp-step{padding:var(--sp-7) 0 var(--sp-6);border-top:1px solid var(--line)}
.pdp-step:first-of-type{margin-top:var(--sp-7)}
.step-h{align-items:center;margin-bottom:var(--sp-5)}
.step-n{background:var(--navy-quiet);color:var(--navy);width:22px;height:22px}
.step-t{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.step-v{font-size:var(--fs-sm);color:var(--ink)}
.pdp-sw{border-radius:50%;width:32px;height:32px;box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 20%,transparent)}
.pdp-sw.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 20%,transparent),
  0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.sw-grid{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:8px}
.qcard{border-radius:var(--radius-lg);border-color:var(--line);padding:var(--sp-4) var(--sp-2);gap:3px}
.qcard.on{border-color:var(--ink);background:var(--surface)}
.qty-pill{border-color:var(--line);border-radius:var(--radius-full)}
.place-card{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  margin-bottom:var(--sp-4);box-shadow:none}
.place-card-h{background:var(--surface-2);border-bottom:1px solid var(--line)}
.place-badge{background:var(--red);color:var(--paper)}
.art-drop{border-radius:var(--radius-md)}

/* the only number you are asked to accept, in the only panel on the page */
.pdp-sum{border:0;background:var(--band);color:var(--on-band);border-radius:var(--r-card);
  padding:var(--sp-6);margin-top:var(--sp-7)}
.pdp-sum .eyebrow{color:var(--on-band-dim)}
.pdp-sum .sum-row{color:var(--on-band)}
.pdp-sum .sum-note,.pdp-sum .muted,.pdp-sum .sum-eff,.pdp-sum .t-sm{color:var(--on-band-dim)}
.pdp-sum .sum-sep,.pdp-sum .sum-total{border-top-color:color-mix(in srgb,#F4F2ED 22%,transparent)}
.pdp-sum .chip{background:color-mix(in srgb,#F4F2ED 16%,transparent);color:var(--on-band)}
.pdp-sum .pdp-deliver{border-top-color:color-mix(in srgb,#F4F2ED 22%,transparent)!important}
.pdp-sum .btn--quiet{color:var(--on-band-dim)}
.pdp-sum .btn--quiet:hover{background:color-mix(in srgb,#F4F2ED 12%,transparent);color:var(--on-band)}
.pdp-sum .t-xs.muted{color:var(--on-band-dim)}

/* the action bar rides as a capsule rather than a shelf */
.buybar{background:transparent;border-top:0;box-shadow:none;padding:0 var(--sp-6) var(--sp-5)}
.buybar-in{background:var(--surface);background:var(--ig-light);border:1px solid var(--ig-edge);
  border-radius:var(--radius-full);box-shadow:var(--shadow-4);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
  width:max-content;max-width:min(100%,720px);flex-wrap:nowrap;gap:var(--sp-7)}
.buybar-in .spacer{display:none}
@supports (backdrop-filter:blur(2px)){
  .buybar-in{backdrop-filter:blur(var(--ig-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--ig-blur)) saturate(120%)}
}
.buybar-fig b{font-weight:400;font-variant-numeric:tabular-nums}

/* the specification, as tabs in the same pill language */
.pdp-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.pdp-tabs .tab{border:1px solid var(--line);background:var(--surface);min-height:36px;
  padding:0 var(--sp-5);border-radius:var(--radius-full)}
.pdp-tabs .tab--on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

@media (max-width:1080px){
  .pdp{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
  .pdp-media{position:static}
  .pdp-hero{aspect-ratio:1}
}
@media (max-width:720px){
  .pdp-step{padding:var(--sp-6) 0 var(--sp-5)}
  .pdp-sum{padding:var(--sp-5)}
  .buybar{padding:0 var(--sp-3) var(--sp-3)}
  .buybar-in{padding-left:var(--sp-5)}
}

/* The catalogue's own cards follow the panel geometry of the pages they sit on. */
main[data-page="product"] .card,
main[data-page="merch"] .card,
main[data-page="products"] .card,
main[data-page="collection"] .card,
main[data-page="collections"] .card{border-radius:var(--r-card)}
main[data-page="product"] .pdp-cfg .btn--primary{margin-top:var(--sp-6)!important}

/* On a phone the Merchandise bar carries the branch label, the quote button
   and the menu, and the three do not fit. The label goes: the menu sheet
   names the service on its first line, and the mark is still the mark. */
@media (max-width:560px){
  .pub--merch .brand-bar,.pub--merch .brand-sub{display:none}
}

/* The prototype's surface switcher lives at the bottom centre too, so on a
   product page it steps above the action capsule rather than over it. */
body.is-public.has-bar .switch{bottom:calc(var(--sp-4) + 72px)}
body.has-bar{padding-bottom:96px}

/* A <picture> has to fill its media box exactly as a bare <img> would. */
.media picture{display:block;width:100%;height:100%}
/* The supplied hero crops are composed to their box, so they are centred;
   the catalogue fallback still crops from the top to keep wearers in frame. */
.shero-img--photo img{object-position:center}

/* ============================================================================
   WHAT IS INCLUDED — the artefacts, as records
   Each card holds a fragment of the real method, and each fragment is
   labelled the way it would be in the account: a navy bar naming the record
   and the one number it turns on. The navy is the band's navy, so the places
   where a project leaves something behind are marked in one colour.
   ========================================================================= */
.sol-h{display:flex;align-items:baseline;gap:var(--sp-4)}
.sol-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;flex:none;
  color:var(--navy);background:var(--navy-quiet);border-radius:var(--radius-full);
  padding:4px 9px;font-variant-numeric:tabular-nums}
.sol-ht{flex:1;min-width:0}
.sol-p{margin-top:var(--sp-4)}

.art{margin-top:var(--sp-6);padding:0;overflow:hidden;gap:0;
  border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface)}
.art-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  background:var(--band);color:var(--on-band);padding:9px var(--sp-4)}
.art-h-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.art-h-m{font-size:var(--fs-micro);color:var(--on-band-dim);text-align:right;
  font-variant-numeric:tabular-nums}
.art-b{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:0}
.art-r{padding:9px 0}
.art-r+.art-r{border-top:1px solid var(--line)}

/* the fabric shortlist reads as weights, so it is drawn as weights */
.art--weights .art-b{gap:var(--sp-3);padding-top:var(--sp-4)}
.art-w{display:grid;grid-template-columns:5.5em 1fr 4.6em;align-items:center;gap:var(--sp-3)}
.art-w-n{font-size:var(--fs-xs);font-weight:500}
.art-w-bar{height:6px;border-radius:var(--radius-full);background:var(--navy-quiet);display:block}
.art-w-bar i{display:block;height:100%;border-radius:var(--radius-full);background:var(--navy)}
.art-w-v{font-size:var(--fs-micro);color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}

/* the label sits on the card as a label would sit on a garment */
.art--brand .art-b{gap:var(--sp-4);padding-top:var(--sp-4)}
.art-label{border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface-2);padding:var(--sp-3) var(--sp-4);align-self:flex-start;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;display:flex;
  flex-direction:column;gap:4px}
.art-sw{display:flex;gap:8px;margin-top:0}
.art-sw span{width:30px;height:30px;border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 22%,transparent)}
.art-check{font-size:var(--fs-micro);color:var(--go);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--line)}

@media (max-width:720px){
  .art-w{grid-template-columns:5em 1fr 4.4em}
}

/* The copy sits under its title; the free space in a card falls between the
   copy and the record, so the six records end on one line. */
.sol-p{flex:0 0 auto;margin-bottom:var(--sp-6)}
.sol .art{margin-top:auto}

/* ============================================================================
   THE GATEWAY — the two sections under the choice
   The intro head runs the full width like every other chapter, the sectors
   sit on the same labelled strip the Studio uses, and the two services are
   told in two identical panels so neither reads as the recommendation.
   ========================================================================= */
.gate2-ctl{position:absolute;top:clamp(20px,4vh,40px);right:clamp(16px,3vw,40px);z-index:5;
  display:flex;align-items:center;gap:var(--sp-2)}

/* label, then the teams across the rest of the width */
.gate-sectors{margin-top:var(--sp-8);grid-template-columns:minmax(0,20ch) minmax(0,1fr);
  align-items:start}
.gate-sectors .trust-r{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.gate-sectors .trust-l{padding-top:6px}
.chip--lg{padding:7px 14px;font-size:var(--fs-sm)}

.pick-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);
  margin-top:var(--sp-8)}
.pick{border:1px solid color-mix(in srgb,#F4F2ED 20%,transparent);border-radius:var(--r-card);
  padding:var(--sp-7);display:flex;flex-direction:column;
  background:color-mix(in srgb,#F4F2ED 4%,transparent)}
.pick-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-band-dim)}
.pick-t{font-size:clamp(20px,1.9vw,27px);line-height:1.3;letter-spacing:-.018em;font-weight:300;
  color:var(--on-band);margin-top:var(--sp-5);text-wrap:pretty}
.pick-cta{margin-top:auto;padding-top:var(--sp-7)}
.pick .btn--primary{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.pick .btn--primary:hover:not(:disabled){background:#FFFFFF;border-color:#FFFFFF}
.pick .btn--primary .btn-a{background:color-mix(in srgb,#011251 12%,transparent)}
.pick-f{font-size:var(--fs-sm);color:var(--on-band-dim);margin-top:var(--sp-7);text-align:center}
.pick-f .lnk{color:var(--on-band)}

@media (max-width:900px){
  .pick-g{grid-template-columns:1fr;gap:var(--sp-5)}
  .pick{padding:var(--sp-6)}
  .gate2-ctl{gap:var(--sp-1)}
}

/* ============================================================================
   CUSTOM UNIFORMS — a little dimension
   The page keeps its flat geometry; what changes is that surfaces now sit at
   different depths. Three jobs only: cards lift off the ground, wells recess
   into it, and the navy objects carry a light top edge so they read as solid
   rather than printed. Shadows are mixed from the brand navy, never black, so
   the page never goes grey; in dark mode they fall back to near-black at a
   lower strength, where a shadow is barely a shadow anyway.
   ========================================================================= */
main[data-branch]{
  --lift-1:0 1px 2px color-mix(in srgb,#011251 6%,transparent),
           0 4px 12px color-mix(in srgb,#011251 5%,transparent);
  --lift-2:0 2px 4px color-mix(in srgb,#011251 7%,transparent),
           0 12px 28px color-mix(in srgb,#011251 9%,transparent);
  --lift-3:0 4px 10px color-mix(in srgb,#011251 8%,transparent),
           0 24px 56px color-mix(in srgb,#011251 13%,transparent);
  --well:inset 0 1px 3px color-mix(in srgb,#011251 7%,transparent);
  --edge-light:inset 0 1px 0 color-mix(in srgb,#F4F2ED 16%,transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) main[data-branch]{
    --lift-1:0 1px 2px color-mix(in srgb,#000 30%,transparent);
    --lift-2:0 2px 6px color-mix(in srgb,#000 36%,transparent);
    --lift-3:0 10px 30px color-mix(in srgb,#000 46%,transparent);
    --well:inset 0 1px 3px color-mix(in srgb,#000 28%,transparent);
  }
}
:root[data-theme="dark"] main[data-branch]{
  --lift-1:0 1px 2px color-mix(in srgb,#000 30%,transparent);
  --lift-2:0 2px 6px color-mix(in srgb,#000 36%,transparent);
  --lift-3:0 10px 30px color-mix(in srgb,#000 46%,transparent);
  --well:inset 0 1px 3px color-mix(in srgb,#000 28%,transparent);
}

/* cards sit above the page */
main[data-branch] .ind,
main[data-branch] .how,
main[data-branch] .sol{box-shadow:var(--lift-1)}
main[data-branch] .ind:hover,
main[data-branch] .sol:hover{box-shadow:var(--lift-2)}

/* the tinted panel is a well the white cards sit in */
main[data-branch] .panel{box-shadow:var(--well)}

/* the navy objects: a light top edge and a deeper shadow */
main[data-branch] .band,
main[data-branch] .ask{box-shadow:var(--lift-3),var(--edge-light);
  background-image:linear-gradient(180deg,color-mix(in srgb,#F4F2ED 5%,transparent) 0%,
    color-mix(in srgb,#F4F2ED 0%,transparent) 46%)}

/* the photographs sit on the page rather than in it */
main[data-branch] .shero-img,
main[data-branch] .work-s .media{box-shadow:inset 0 0 0 1px var(--line),var(--lift-2)}
main[data-branch] .ind-m{box-shadow:inset 0 0 0 1px var(--line),
  0 1px 3px color-mix(in srgb,#011251 6%,transparent)}

/* the floating record over the photograph floats a little further */
main[data-branch] .shero-card{box-shadow:var(--lift-3)}

/* the record inside a card is recessed into it, and its navy bar is lit */
main[data-branch] .art{box-shadow:var(--well)}
main[data-branch] .art-h{box-shadow:var(--edge-light),
  0 1px 2px color-mix(in srgb,#011251 14%,transparent)}

/* the icon tile is the one small solid object on the page */
main[data-branch] .how-i{box-shadow:0 2px 6px color-mix(in srgb,#011251 26%,transparent),
  inset 0 1px 0 color-mix(in srgb,#FFFFFF 20%,transparent)}

/* controls: a resting lift, and a press that actually presses */
main[data-branch] .btn--primary{box-shadow:0 1px 2px color-mix(in srgb,#011251 22%,transparent),
  0 6px 16px color-mix(in srgb,#011251 16%,transparent)}
main[data-branch] .btn--primary:active{box-shadow:0 1px 2px color-mix(in srgb,#011251 22%,transparent)}
main[data-branch] .btn--ghost,
main[data-branch] .tag,
main[data-branch] .news{box-shadow:0 1px 2px color-mix(in srgb,#011251 5%,transparent)}
main[data-branch] .ask .btn--primary{box-shadow:0 2px 6px color-mix(in srgb,#010B2E 34%,transparent)}

/* the timeline node stands slightly off its rail */
main[data-branch] .pt-dot{box-shadow:0 0 0 4px var(--paper),
  0 1px 3px color-mix(in srgb,#011251 30%,transparent)}

/* colour chips read as physical swatches */
main[data-branch] .art-sw span{box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 22%,transparent),
  0 1px 2px color-mix(in srgb,#011251 18%,transparent)}

@media (prefers-reduced-motion:reduce){
  main[data-branch] .btn--primary:active{box-shadow:none}
}

/* ---- the same depth, on the merchandise objects -------------------------
   The tokens above are branch-wide, so everything the two lines of business
   share — the hero photograph, its floating record, the navy band and panel,
   the buttons, the icon tiles — already reads the same. What follows is the
   parts that exist only on the catalogue side, given the same rules: a card
   sits above the page, a photograph sits on it, a record is recessed into
   it, and a control rests slightly proud and presses when you press it.
   ========================================================================= */

/* product and collection cards are cards: they sit above the page */
main[data-branch] .pc,
main[data-branch] .cc,
main[data-branch] .cert{box-shadow:var(--lift-1)}
main[data-branch] .pc:hover,
main[data-branch] .cc:hover{box-shadow:var(--lift-2)}

/* their photographs sit on the card, the way .ind-m sits on its own */
main[data-branch] .pc-m,
main[data-branch] .cc-m{box-shadow:inset 0 0 0 1px var(--line),
  0 1px 3px color-mix(in srgb,#011251 6%,transparent)}

/* the placeholder frame is a photograph's seat, so it reads as one */
main[data-branch] .chk-ph{box-shadow:inset 0 0 0 1px var(--line),var(--well)}

/* the certification mark is recessed into its tile, not stuck on it */
main[data-branch] .cert-i{box-shadow:inset 0 0 0 1px color-mix(in srgb,#7F1D16 14%,transparent),
  inset 0 1px 2px color-mix(in srgb,#7F1D16 10%,transparent)}

/* the rail's controls rest proud and press */
main[data-branch] .carou-b{box-shadow:0 1px 2px color-mix(in srgb,#011251 8%,transparent),
  0 4px 10px color-mix(in srgb,#011251 6%,transparent)}
main[data-branch] .carou-b:active:not(:disabled){box-shadow:0 1px 2px color-mix(in srgb,#011251 10%,transparent)}
main[data-branch] .carou-b:disabled{box-shadow:none}

/* filter pills carry the same hairline lift as the tag and the news pill */
main[data-branch] .fp{box-shadow:0 1px 2px color-mix(in srgb,#011251 5%,transparent)}
main[data-branch] .fp--on{box-shadow:0 1px 2px color-mix(in srgb,#011251 22%,transparent),
  0 6px 16px color-mix(in srgb,#011251 14%,transparent)}
main[data-branch] .fp--on:active{box-shadow:0 1px 2px color-mix(in srgb,#011251 22%,transparent)}

@media (prefers-reduced-motion:reduce){
  main[data-branch] .carou-b:active:not(:disabled),
  main[data-branch] .fp--on:active{box-shadow:none}
}

/* ---- the VAT field ------------------------------------------------------
   A prefix, a number and the check are one control, not three objects of
   three different heights. The state of the number is a line with a dot, not
   a box inside a box, and the opt-out is a checkbox, on one line.
   ========================================================================= */
/* the panel lines up with the fields above it, not with the page */
.vat{border-radius:var(--radius-md);gap:var(--sp-5);padding:var(--sp-6);max-width:560px}
.vat-row{display:flex;align-items:stretch;gap:0;max-width:440px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-md);overflow:hidden;
  transition:border-color var(--dur-focus) var(--ease)}
.vat-row:focus-within{border-color:var(--navy)}
.vat-cc{display:inline-flex;align-items:center;padding:0 var(--sp-4);flex:none;border:0;
  background:var(--surface-2);border-right:1px solid var(--line);
  font-size:var(--fs-md);font-weight:500;color:var(--muted);letter-spacing:.02em}
.vat-inp{flex:1;min-width:0;border:0;border-radius:0;background:transparent;min-height:50px;
  font-size:var(--fs-md);padding:0 var(--sp-4)}
.vat-inp:focus{outline:0}
.vat-go{flex:none;border:0;border-left:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;
  padding:0 var(--sp-5);transition:background-color var(--dur-focus) var(--ease)}
.vat-go:hover:not(:disabled){background:var(--surface-2)}
.vat-go:disabled{color:var(--faint);cursor:not-allowed}
.vat-note{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);
  color:var(--muted);line-height:1.55}
.vat-note::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;margin-top:.52em;
  background:var(--idle)}
.vat-note--go::before{background:var(--go)}
.vat-note--flow::before{background:var(--flow)}
.vat-note--wait::before{background:var(--wait)}
.vat-note--stop::before{background:var(--stop)}
.vat-chk{min-height:0;align-self:flex-start}
.vat--off .vat-row{opacity:.55}
@media (max-width:620px){
  .vat-row{max-width:none}
  .vat-cc{padding:0 var(--sp-3)}
  .vat-go{padding:0 var(--sp-4)}
}

/* A figure that is measured in something carries its unit, set small and
   tight against the numeral so the row still reads as four numbers. */
.band-u{font-size:.3em;font-weight:500;letter-spacing:0;margin-left:.28em;
  color:var(--on-band-dim);vertical-align:baseline}

/* ============================================================================
   THE PROJECT BUILDER — Back Office (bo-) and the customer's project (pp-)

   Two surfaces, one record. The Back Office side is dense and operational:
   rows you can scan and act on. The customer side is a proposal: images
   large enough to judge, prices legible, one decision per card.
   ========================================================================= */

/* ---- Back Office: the build bar ---------------------------------------- */
.bo-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-md)}

.bo-pos-h{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);
  flex-wrap:wrap;gap:var(--sp-3);align-items:flex-start}
.bo-pos-b{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---- Back Office: one garment, one row --------------------------------- */
.bo-g{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--sp-4);
  align-items:flex-start;padding:var(--sp-4);border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface)}
.bo-g-m{position:relative;width:64px;height:80px;border:1px solid var(--line);
  border-radius:var(--r-media);overflow:hidden;background:var(--surface-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color var(--dur-focus) var(--ease)}
.bo-g-m:hover{border-color:var(--navy)}
.bo-g-m img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.bo-g-ph{font-size:26px;line-height:1}
.bo-g-n{position:absolute;right:3px;bottom:3px;background:var(--navy);color:var(--paper);
  font-size:10px;line-height:1;padding:3px 5px;border-radius:var(--radius-full);
  font-variant-numeric:tabular-nums}
.bo-g-b{min-width:0}
.bo-g-a{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex:none}
.bo-g-a .btn{white-space:nowrap}
.bo-chip-warn{color:var(--wait);border-color:color-mix(in srgb,var(--wait) 40%,transparent)}

/* ---- Back Office: empty states are the way in -------------------------- */
.bo-empty{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  width:100%;padding:var(--sp-5);border:1px dashed var(--line-strong);
  border-radius:var(--radius-md);background:transparent;cursor:pointer;font-family:inherit;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.bo-empty:hover{border-color:var(--navy);background:var(--surface-2)}
.bo-empty--lg{padding:var(--sp-8);align-items:center;text-align:center;gap:8px}
.bo-note{padding:var(--sp-4) var(--sp-5);background:var(--surface-2);
  border-left:2px solid var(--navy);border-radius:0 var(--radius-md) var(--radius-md) 0}

/* ---- Back Office: base picker ------------------------------------------ */
.bo-bases{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-3)}
.bo-base{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);cursor:pointer;font-family:inherit;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.bo-base:hover{border-color:var(--line-strong)}
.bo-base--on{border-color:var(--navy);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--navy)}
.bo-base-g{font-size:20px;line-height:1.2}
.bo-base-n{font-size:var(--fs-sm);color:var(--ink)}
.bo-base-r{font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums}

/* ---- images, both sides ------------------------------------------------ */
.bo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.bo-grid--sm{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.bo-im{margin:0;border:1px solid var(--line);border-radius:var(--r-media);overflow:hidden;
  background:var(--surface)}
.bo-im img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.bo-im figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:6px 8px;font-size:var(--fs-micro);color:var(--muted);border-top:1px solid var(--line);
  min-height:30px}
.bo-im figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bo-x{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:15px;
  line-height:1;padding:2px 4px;flex:none;font-family:inherit}
.bo-x:hover{color:var(--stop)}

/* ---- the customer's proposal ------------------------------------------- */
.pp-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-5)}
.pp-board{margin:0;border-radius:var(--r-media);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line)}
.pp-board img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pp-board figcaption{padding:8px 10px;font-size:var(--fs-xs);color:var(--muted);
  border-top:1px solid var(--line)}

.pp-line{display:flex;flex-direction:column;gap:var(--sp-3)}
.pp-item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--sp-4);
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);
  overflow:hidden}
.pp-item-m{background:var(--surface-3);display:flex;align-items:center;justify-content:center}
.pp-item-m img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.pp-item-ph{font-size:34px}
.pp-item-b{padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;min-width:0}
.pp-item-f{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line)}

.pp-total{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;margin-top:var(--sp-5);padding:var(--sp-5);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md)}

.pp-thumb{width:72px;height:90px;object-fit:cover;object-position:center top;
  border-radius:var(--r-media);border:1px solid var(--line);flex:none;display:block}
.pp-strip{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-4);scrollbar-width:thin}
.pp-strip-i{margin:0;flex:none;width:104px}
.pp-strip-i img{display:block;width:104px;height:130px;object-fit:cover;object-position:center top;
  border-radius:var(--r-media);border:1px solid var(--line)}
.pp-strip-i figcaption{font-size:var(--fs-micro);color:var(--faint);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- one decision, one card -------------------------------------------- */
.pp-dec{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);border-left:3px solid var(--wait)}
.pp-dec-b{min-width:0;flex:1}

/* ---- payments ----------------------------------------------------------- */
.pp-pay{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface)}
.pp-pay--now{border-color:var(--wait);background:var(--surface-2)}
.pp-pay-b{min-width:0;flex:1}
.pp-pay-a{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* ---- work that exists but is not released yet -------------------------- */
.pp-held{margin-top:var(--sp-4);padding:var(--sp-5);border:1px dashed var(--line-strong);
  border-radius:var(--radius-md);background:var(--surface-2)}
.pp-held-t{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}

/* the customer's garment thumbnail can now carry a photograph */
.gcard-th{overflow:hidden;padding:0}
.gcard-th img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

@media (max-width:900px){
  .bo-g{grid-template-columns:56px minmax(0,1fr)}
  .bo-g-a{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .bo-g-m{width:56px;height:70px}
  .pp-item{grid-template-columns:84px minmax(0,1fr)}
  .pp-dec,.pp-pay{flex-direction:column;align-items:stretch}
  .pp-dec .btn{width:100%}
  .pp-total{flex-direction:column;align-items:flex-start}
  .pp-total .t-xs{text-align:left}
}

/* A payment step is a sentence, an amount and two or three actions — a row
   that can breathe, not a cell in a six-column table. */
.bo-ms{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface)}
.bo-ms--done{background:var(--surface-2)}
.bo-ms-b{flex:1 1 260px;min-width:0}
.bo-ms-n{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.bo-ms-a{display:flex;gap:6px;flex-wrap:wrap;flex:none;align-items:flex-start}
.bo-ms-tot{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-md)}
.bo-ms-tot .num{margin-left:auto}
.bo-ms-tot .t-xs{flex:1 1 100%;margin-top:2px}
@media (max-width:700px){
  .bo-ms-n{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .bo-ms-tot .num{margin-left:0}
  .bo-ms-a{width:100%}
}

/* ============================================================================
   THE JOURNAL

   It was built from the merchandise card language and read like a different
   site. It now uses the Studio page's devices: the chapter head with its
   index chip, rounded media on a quiet ground, a light display line, and one
   lead article given the same split as the work section.

   The article page adds one thing the rest of the site does not need — a
   summary block stated before the argument, because that is the part an
   answer engine quotes and the part a busy reader wants.
   ========================================================================= */

/* ---- the index ---------------------------------------------------------- */
.jr-lead{align-items:center;gap:var(--sp-9);margin-top:var(--sp-8);cursor:pointer}
.jr-lead-m{border-radius:var(--r-panel);overflow:hidden;background:var(--surface-2);
  aspect-ratio:3/2;transition:box-shadow var(--dur-morph) var(--ease)}
.jr-lead-m img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;
  transition:transform 1.2s var(--ease)}
.jr-lead:hover .jr-lead-m img{transform:scale(1.03)}
.jr-lead:hover .jr-lead-m{box-shadow:var(--shadow-2)}
.jr-lead-b{display:flex;flex-direction:column;align-items:flex-start}
.jr-lead-t{margin-top:var(--sp-5);font-size:clamp(28px,3.2vw,46px);text-wrap:balance}
.jr-lead-d{margin-top:var(--sp-5);max-width:54ch}
.jr-lead-f{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-6);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.jr-lead-a{margin-top:var(--sp-5)}
.jr-lead:hover .lnk-a{color:var(--navy)}

.jr-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-6) var(--sp-6);margin-top:var(--sp-9)}
.jr-g--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.jr{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-3);cursor:pointer;
  transition:border-color var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease)}
.jr:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.jr:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.jr-m{aspect-ratio:3/2;border-radius:var(--r-media);overflow:hidden;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.jr-m img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.jr-b{padding:var(--sp-5) var(--sp-2) var(--sp-2);display:flex;flex-direction:column;flex:1}
.jr-k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.jr-t{font-size:var(--fs-lg);font-weight:400;letter-spacing:-.012em;line-height:1.25;
  margin-top:var(--sp-3);text-wrap:pretty}
.jr:hover .jr-t{color:var(--navy)}
.jr-d{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:var(--sp-3);flex:1}
.jr-f{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums}
.jr-note{margin-top:var(--sp-7);font-size:var(--fs-xs);color:var(--faint)}

/* ---- one article -------------------------------------------------------- */
.po-hd{margin-top:var(--sp-6);max-width:none}
.po-t{margin-top:var(--sp-5);font-size:clamp(32px,4.2vw,62px);max-width:22ch;text-wrap:balance}
.po-d{margin-top:var(--sp-5);max-width:64ch}
.po-meta{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-8);margin-top:var(--sp-7);
  padding-top:var(--sp-5);border-top:var(--rule)}
.po-meta span{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.po-meta b{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.po-m{margin-top:var(--sp-8);border-radius:var(--r-panel);overflow:hidden;background:var(--surface-2);
  aspect-ratio:21/9}
.po-m img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}

/* the answer, before the argument */
.po-key{margin-top:var(--sp-8);background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--navy);border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--sp-7) var(--sp-7) var(--sp-6)}
.po-key-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}
.po-key-l{display:flex;flex-direction:column;gap:var(--sp-4);list-style:none;padding:0;margin:0}
.po-key-l li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-md);line-height:1.6;
  color:var(--ink)}
.po-key-l li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:var(--navy)}

.po-body{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);
  gap:var(--sp-9);margin-top:var(--sp-9);align-items:start}
.po-rail{position:sticky;top:96px}
.po-toc{list-style:none;padding:0;margin:var(--sp-4) 0 0;counter-reset:toc;
  display:flex;flex-direction:column;gap:var(--sp-3)}
.po-toc li{counter-increment:toc;display:flex;gap:var(--sp-3);font-size:var(--fs-sm);line-height:1.45}
.po-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--faint);
  font-variant-numeric:tabular-nums;flex:none}
.po-toc a{cursor:pointer;color:var(--muted);text-decoration:none}
.po-toc a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.po-rail-cta{margin-top:var(--sp-7)}

.po-read{max-width:72ch}
.po-s + .po-s{margin-top:var(--sp-8)}
.po-h{font-size:clamp(22px,2.2vw,30px);font-weight:300;letter-spacing:-.018em;line-height:1.25;
  text-wrap:balance;scroll-margin-top:96px}
.po-read p{font-size:var(--fs-md);line-height:1.72;color:var(--ink);margin-top:var(--sp-4)}
.po-l{margin-top:var(--sp-4);padding-left:0;list-style:none;display:flex;flex-direction:column;
  gap:var(--sp-3)}
.po-l li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-sm);line-height:1.65;
  color:var(--muted)}
.po-l li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--line-strong)}

@media (max-width:1000px){
  .po-body{grid-template-columns:1fr;gap:var(--sp-7)}
  .po-rail{position:static;padding-bottom:var(--sp-6);border-bottom:var(--rule)}
  .po-rail-cta{display:none}
  .jr-g,.jr-g--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .jr-lead{gap:var(--sp-6)}
  .jr-lead-m{aspect-ratio:16/9}
}
@media (max-width:720px){
  .jr-g,.jr-g--3{grid-template-columns:1fr;gap:var(--sp-5)}
  .po-m{aspect-ratio:4/3}
  .po-key{padding:var(--sp-5);border-radius:0 var(--radius-md) var(--radius-md) 0}
  .po-meta{gap:var(--sp-4)}
}

/* ---- the product journey ------------------------------------------------
   Steps down the page, the running answer beside them. A step you have
   answered collapses to its answer and stays clickable; the one you are on
   is the only one open, so the page never asks two questions at once.
   ========================================================================= */
.bwrap{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-9);align-items:start}
.bsteps{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}

.bs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-6);transition:border-color var(--dur-morph) var(--ease)}
.bs--open{border-color:var(--line-strong)}
.bs--done .bs-l{color:var(--muted)}
.bs-h{display:flex;align-items:baseline;gap:var(--sp-4)}
.bs-n{flex:none;width:28px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;
  color:var(--faint);font-variant-numeric:tabular-nums}
.bs-t{flex:1;min-width:0}
.bs-l{font-size:var(--fs-lg);font-weight:400;letter-spacing:-.012em}
.bs-d{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;line-height:1.55}
.bs-v{flex:none;font-size:var(--fs-sm);font-weight:500;color:var(--red)}
.bs-b{margin-top:var(--sp-5);padding-left:calc(28px + var(--sp-4))}
.bs-note{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-4);line-height:1.6}
.bs-note--draft{color:var(--faint)}

.bchs{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.bch{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-5);min-height:56px;justify-content:center;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.bch:hover:not(:disabled){border-color:var(--red)}
.bch--on{background:var(--red);border-color:var(--red);color:#FFF}
.bch--on .bch-m{color:color-mix(in srgb,#FFFFFF 78%,transparent)}
.bch--out{opacity:.4;cursor:not-allowed}
.bch-t{font-size:var(--fs-sm);font-weight:500}
.bch-m{font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums}

.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-4)}
.bst{display:flex;flex-direction:column;text-align:left;cursor:pointer;font-family:inherit;padding:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color var(--dur-focus) var(--ease)}
.bst:hover{border-color:var(--line-strong)}
.bst--on{border-color:var(--red)}
.bst-m{display:block;aspect-ratio:1;border-radius:var(--r-media);overflow:hidden;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.bst-m img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.bst-b{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4) var(--sp-2) var(--sp-2)}
.bst-t{font-size:var(--fs-sm);font-weight:500}
.bst-d{font-size:var(--fs-micro);color:var(--faint)}
.bst-p{font-size:var(--fs-sm);margin-top:4px}

.bsw{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.bsw-i{width:34px;height:34px;border-radius:50%;padding:3px;cursor:pointer;background:none;
  border:1px solid var(--line);transition:border-color var(--dur-focus) var(--ease)}
.bsw-i i{display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 22%,transparent)}
.bsw-i:hover{border-color:var(--line-strong)}
.bsw-i--on{border-color:var(--red);border-width:2px;padding:2px}

/* the running answer: what you have chosen, what it costs, what is left */
.brail{position:sticky;top:var(--sp-7)}
.brail-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.brail-p{font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.brail-p span{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--muted);
  letter-spacing:0;margin-top:6px}
.brail-c{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.brail-l{display:flex;flex-direction:column;margin:0;border-top:var(--rule)}
.brail-r{display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.brail-r dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.brail-r dd{font-size:var(--fs-sm);color:var(--faint);margin:0;text-align:right}
.brail-r.is-set dd{color:var(--ink);font-weight:500}
.brail-a{margin-top:var(--sp-2);flex-wrap:wrap}

@media (max-width:1000px){
  .bwrap{grid-template-columns:1fr;gap:var(--sp-6)}
  .brail{position:static;order:-1}
  .bs-b{padding-left:0}
}
@media (max-width:560px){
  .bs{padding:var(--sp-5)}
  .bch{flex:1 1 calc(50% - var(--sp-3));min-height:54px}
}

/* the journey's objects join the branch depth system */
main[data-branch] .bs,
main[data-branch] .brail-in{box-shadow:var(--lift-1)}
main[data-branch] .bs--open{box-shadow:var(--lift-2)}
main[data-branch] .bch{box-shadow:0 1px 2px color-mix(in srgb,#011251 5%,transparent)}
main[data-branch] .bch--on{box-shadow:0 1px 2px color-mix(in srgb,#7F1D16 26%,transparent),
  0 6px 16px color-mix(in srgb,#7F1D16 18%,transparent)}
main[data-branch] .bch--out{box-shadow:none}
main[data-branch] .bst-m{box-shadow:inset 0 0 0 1px var(--line),
  0 1px 3px color-mix(in srgb,#011251 6%,transparent)}
.mph-or{align-self:center}

/* ---- the mapped style's journey, on its own product page ---------------- */
.dj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-6)}
.dj-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.dj-flag{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.dj-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.dj-s{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.dj-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.dj-r{display:flex;align-items:baseline;gap:var(--sp-6);flex-wrap:wrap;
  padding-top:var(--sp-5);border-top:var(--rule)}
.dj-p{font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.05;flex:none}
.dj-p span{display:block;font-size:var(--fs-xs);color:var(--muted);letter-spacing:0;margin-top:6px}
.dj-m{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-sm);color:var(--muted)}
.dj-m b{font-size:var(--fs-md);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.dj-n{flex:1 1 220px;min-width:0;margin:0}
.dj-r--none .dj-m b{color:var(--red)}
@media (max-width:900px){.dj-g{grid-template-columns:1fr;gap:var(--sp-5)}.dj{padding:var(--sp-6)}}
main[data-branch] .dj{box-shadow:var(--lift-1)}

/* ---- the three answers, in the configurator column ---------------------- */
.pdp-step--q{border-radius:var(--radius-md);transition:background-color var(--dur-focus) var(--ease)}
.step-h--btn{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.pdp-step--q.is-done .step-t{color:var(--muted)}
.pdp-step--q .step-v{margin-left:auto;color:var(--faint)}
.pdp-step--q.is-done .step-v{color:var(--red);font-weight:500}
.pdp-step--q.is-open .step-v{color:var(--muted);font-weight:400}
.mchs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
/* The three cloth weights behind a gender and fit. Named .gopt, not .gcard —
   .gcard is the Back Office garment card and this inherited its chrome. */
/* .mchs is a flex row for chips; a block child of it sizes to its content,
   which left these cards at half the column. Claim the whole row. */
.gopts{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);width:100%;flex:1 1 100%}
/* Two rows: what it is, then how heavy it is. The price spans both on the
   right. Leading with the style is what stops three garments at the same
   weight reading as the same garment listed three times. */
.gopt{display:grid;grid-template-columns:1fr auto;align-items:start;
  gap:3px var(--sp-4);width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:var(--sp-4) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);min-height:56px}
.gopt-t{grid-column:1;font-size:var(--fs-base);font-weight:500;line-height:1.3;
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.gopt-p{grid-column:2;grid-row:1 / span 3;align-self:center}
.gopt-wq{grid-column:1;display:flex;align-items:center;gap:var(--sp-3);min-width:0}
/* where this garment sits between the lightest and heaviest on offer */
.gopt-bar{position:relative;flex:1 1 auto;max-width:132px;height:4px;border-radius:2px;
  background:color-mix(in srgb,var(--ink) 12%,transparent)}
.gopt-bar i{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--red);transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px var(--surface)}
.gopt--on .gopt-bar i{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--red)}
/* the legend, once for the column */
.gopt-key{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);
  font-size:var(--fs-micro);color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.gopt-key i{flex:1 0 132px;max-width:132px;height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--line),var(--muted))}
.gopt-key em{font-style:normal;margin-left:auto;text-transform:none;letter-spacing:0;
  font-variant-numeric:tabular-nums}
.gopt:hover{border-color:var(--red)}
.gopt--on{border-color:var(--red);border-width:2px;padding:calc(var(--sp-4) - 1px)}
.gopt-w{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;display:flex;align-items:baseline;gap:5px}
.gopt-w i{font-style:normal;font-size:var(--fs-xs);color:var(--muted)}
.gopt-x{font-style:normal;font-size:var(--fs-micro);color:var(--muted);letter-spacing:.04em}
/* the question mark: small, quiet, and obviously pressable */
.gopt-q{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;
  border-radius:50%;font-size:10px;font-weight:600;line-height:1;cursor:pointer;
  color:var(--muted);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background-color var(--dur-focus) var(--ease),color var(--dur-focus) var(--ease)}
.gopt-q:hover{background:var(--red);color:#FFF;box-shadow:none}
.gopt-q--on{background:var(--red);color:#FFF;box-shadow:none}
/* what it reveals — inside the card, so it cannot be mistaken for another one */
.gopt-i{grid-column:1;font-size:var(--fs-xs);color:var(--muted);line-height:1.45;
  margin-top:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);
  background:var(--surface-2);text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){
  .gopt-i{animation:gInfoIn .18s var(--ease) both}
  @keyframes gInfoIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
}
.gopt-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.gopt-m{grid-column:1;font-size:var(--fs-micro);color:var(--faint)}
.gopt-f{grid-column:1;font-size:var(--fs-micro);color:var(--red);letter-spacing:.04em}
.gopt-p{font-size:var(--fs-md);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
/* the same "From" label the cards and the headline carry */
.gopt-p em{font-style:normal;font-size:var(--fs-micro);color:var(--faint);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase}
.gopt-r{font-size:var(--fs-xs);color:var(--muted)}
main[data-branch] .gopt--on{box-shadow:0 1px 2px color-mix(in srgb,#7F1D16 22%,transparent)}
@media (max-width:520px){
  .gopt{grid-template-columns:1fr auto;row-gap:2px}
  .gopt-b{grid-column:1 / -1}
}

/* Everything the three questions govern stays out of the page until they are
   answered — dimmed-but-present controls read as broken, and the column was
   carrying its whole height before it could say anything true. */
.pdp-rest{display:grid;gap:0}
@keyframes pdpReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pdp-rest--in{animation:pdpReveal var(--dur-slow,.34s) var(--ease,cubic-bezier(.2,.7,.3,1)) both}
@media (prefers-reduced-motion:reduce){.pdp-rest--in{animation:none}}
.mch{flex:1 1 calc(33.333% - var(--sp-2));min-width:96px;display:flex;flex-direction:column;gap:2px;
  text-align:left;cursor:pointer;font-family:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);
  min-height:52px;justify-content:center;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease)}
.mch:hover:not(:disabled){border-color:var(--red)}
.mch--on{background:var(--red);border-color:var(--red);color:#FFF}
.mch--on .mch-m{color:color-mix(in srgb,#FFFFFF 78%,transparent)}
.mch--out{opacity:.38;cursor:not-allowed}
.mch-t{font-size:var(--fs-sm);font-weight:500;line-height:1.2}
.mch-m{font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums}

/* what the three answers govern waits for them */
.pdp-step--locked{opacity:.38}
.pdp-gate{font-size:var(--fs-xs);color:var(--muted);line-height:1.6;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
main[data-branch] .mch{box-shadow:0 1px 2px color-mix(in srgb,#011251 5%,transparent)}
main[data-branch] .mch--on{box-shadow:0 1px 2px color-mix(in srgb,#7F1D16 26%,transparent),
  0 6px 16px color-mix(in srgb,#7F1D16 18%,transparent)}
main[data-branch] .mch--out,main[data-branch] .pdp-step--locked{box-shadow:none}

/* ---- the production estimate -------------------------------------------
   It was four blocks stacked down the panel with the ask orphaned beneath
   them. It is a summary row like the ones above it now, with the caveat
   running under it and the question ending that sentence rather than
   sitting alone in its own band of whitespace. */
.pdp-deliver{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line)}
.pdl-n{line-height:1.6;margin-top:2px}
.pdl-a{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pdp-sum .pdl-a{color:var(--on-band);text-decoration-color:color-mix(in srgb,#F4F2ED 45%,transparent)}
.pdp-sum .pdl-a:hover{text-decoration-color:#F4F2ED}

/* ---- the quote summary's rhythm ----------------------------------------
   Every line had the same padding above and below it, so a unit price and
   the multiplication of that unit price sat as far apart as two unrelated
   charges — and a row carrying a note ran to double height with the note
   floating clear of the label it belongs to. Rows tighten, notes sit up
   against their label, and the multiplication joins the price it multiplies.
   ========================================================================= */
.sum-row{padding:4px 0}
.sum-note{line-height:1.45;margin-top:1px}
.sum-row--sub{padding-top:0}
.sum-total{margin-top:var(--sp-2);padding-top:var(--sp-2)}

/* ---- choosing a method -------------------------------------------------
   It was a pill row, fourth in a list of options, reading "DTF" and "DTG" to
   people who have no reason to know what either means. It is the decision
   that sets the artwork you must supply, what it costs to set up and how
   long the print survives a wash, so it opens the step and it explains
   itself where it is made. */
.opt-method{grid-column:1/-1}
/* the placement form — label left, controls right, one line each, so the
   step reads as a short form rather than a page of cards */
/* one decision per row, separated by a hairline so the four read as four
   rather than one stack; the label sits on the first line of its control */
.orow{display:grid;grid-template-columns:88px 1fr;gap:var(--sp-4);align-items:start;
  padding:var(--sp-3) 0;border-top:1px solid color-mix(in srgb,#7F1D16 12%,transparent)}
/* rows carry their own rhythm, so their containers add no gap on top of it */
.place-flat>.orow:first-child,
.place-card .place-opts>.orow:first-child{border-top:0;padding-top:0}
.orow .opt-lbl{margin:0;line-height:34px}
.orow--add{padding-bottom:0}
.orow--add .lnk{line-height:34px}
.ochips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
/* a lone placement drops its card chrome and sits as rows in the step */
.place-flat{display:grid;gap:0}
/* a lone placement's rows become siblings of the header row, so the dividers
   run continuously down the step instead of restarting inside a wrapper */
.place-flat>.place-opts{display:contents}
.ochips--sel{flex-wrap:nowrap;gap:var(--sp-4)}
.ochips--sel select{max-width:240px;min-height:34px}
.ochip{padding:6px 13px;border-radius:var(--radius-full);border:1px solid var(--line);
  background:var(--surface);font:inherit;font-size:var(--fs-xs);line-height:1.5;
  color:inherit;cursor:pointer;min-height:34px}
.ochip:hover{border-color:var(--red)}
.ochip.on{background:var(--red);border-color:var(--red);color:#FFF}
/* a method we hold no rate for — choosable, but never priced as if free */
.ochip--q{border-style:dashed}
.ochip-q{display:block;font-size:var(--fs-micro);color:var(--muted);letter-spacing:.04em}
.ochip.on .ochip-q{color:#FFF;opacity:.82}
.ochips-n{font-size:var(--fs-xs);color:var(--muted);margin-left:4px}
/* what the chosen method is called in full, what it costs, and the way in */
/* sits inside the method row's control cell, so it reads as that row's note */
.ometa{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;
  font-size:var(--fs-xs);color:var(--muted);margin-top:7px}
.ometa .mhelp-a{margin-top:0}
.art-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;text-align:left;
  cursor:pointer;font:inherit;font-size:var(--fs-sm);color:inherit;background:var(--surface);
  border:1px dashed var(--line-strong);border-radius:var(--radius-md);padding:6px var(--sp-4);
  min-height:34px}
.art-line span{font-size:var(--fs-xs);color:var(--muted)}
.art-line:hover{border-color:var(--red)}
@media (max-width:560px){
  .orow{grid-template-columns:1fr;gap:6px}
  .orow .opt-lbl{line-height:1.4}
  .orow--add>span{display:none}
}
.mhelp-a{display:inline-block;margin-top:var(--sp-4);font-size:var(--fs-xs);background:none;border:0;
  padding:0;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  font-family:inherit}
.mhelp-a:hover{color:var(--red)}
.mhelp{margin-top:var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--sp-4);background:var(--surface-2);overflow-x:auto}
.mhelp-t{width:100%;border-collapse:collapse;font-size:var(--fs-xs);min-width:420px}
.mhelp-t th,.mhelp-t td{text-align:left;padding:var(--sp-2) var(--sp-3);vertical-align:top;
  border-bottom:1px solid var(--line)}
.mhelp-t thead th{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.mhelp-t tbody th{font-weight:500;white-space:nowrap}
.mhelp-t tbody tr:last-child th,.mhelp-t tbody tr:last-child td{border-bottom:0}
.mhelp p{margin-top:var(--sp-3)}

/* ---- the branded presentation ------------------------------------------ */
/* exact quantity — the field and the rate it drives, read left to right;
   the helper under it keeps the column's full measure like every other note */
.qx{display:flex;align-items:flex-end;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4)}
.qx-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.qx-i{width:7.5rem;max-width:none;text-align:center;font-variant-numeric:tabular-nums}
.qx-r{display:flex;flex-direction:column;gap:6px;min-width:0}
/* A quoted product has no tiers above this field, so it carries the step by
   itself and is given the room to look like it rather than sitting as a small
   input under a label. */
.qx--solo{padding:var(--sp-4) var(--sp-5);background:var(--surface-2);
  border-radius:var(--r-media);box-shadow:inset 0 0 0 1px var(--line);
  justify-content:space-between;align-items:center}
.qx--solo .qx-i{width:9rem;font-size:var(--fs-md);padding:var(--sp-2) var(--sp-3)}
.qx--solo .qx-r{text-align:right}
.qx-r .fld-l{color:var(--muted);font-weight:400}
.qx-r b{font-size:var(--fs-lg);line-height:1.9;white-space:nowrap}
.qx-r b em{font-style:normal;font-size:var(--fs-xs);color:var(--muted)}
@media (max-width:420px){.qx{gap:var(--sp-4)}.qx-r b{line-height:1.4}}

/* The branded presentation. It is the one thing on these two pages a person
   can choose to add, so it is built to be seen: red side panel, the price in
   the open, and one button that says exactly what happens. */
.presx{display:flex;gap:0;border:1px solid color-mix(in srgb,#7F1D16 30%,transparent);
  border-radius:var(--r-card);background:color-mix(in srgb,#7F1D16 4%,var(--surface));
  overflow:hidden;box-shadow:var(--lift-1)}
.presx-side{flex:none;width:84px;display:grid;place-items:center;color:#FFF;
  background:var(--red)}
.presx-b{padding:var(--sp-5);display:flex;flex-direction:column;gap:7px;min-width:0}
.presx-h{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.presx-tag{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red)}
.presx-p{margin-left:auto;font-size:var(--fs-lg);color:var(--red)}
.presx-t{font-size:var(--fs-md);font-weight:500}
.presx-d{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.presx-cta{align-self:flex-start;margin-top:var(--sp-2)}
.presx--on{border-color:var(--red);border-width:2px}
.presx--on .presx-b{padding:calc(var(--sp-5) - 1px)}
/* The stand-in is a drawing, not a photograph. `cover` cropped its caption away
   in tall frames and `contain` blew it up to fill a 770px hero, so it renders at
   its own size and only shrinks when the frame is smaller — one modest mark
   wherever it appears. Matched on the data URI because the placeholder is the
   only SVG the page ever puts in an <img>. */
img[src^="data:image/svg+xml"]{object-fit:scale-down;background:#EAE7DF}
/* A 4:5 hero is sized for a photograph. While a product has none, that is a
   three-quarter-height panel of empty ground above the fold, so the frame
   shrinks to the stand-in rather than the other way round. */
main .pdp-hero--ph{aspect-ratio:16/9;max-height:380px}

/* the same offer as a line, for the drawer and the two summary columns:
   it shows whether the presentation is in and lets you change it there */
.presl dt,.presl span:first-child{display:flex;flex-direction:column;gap:2px}
.presl-d{font-size:var(--fs-xs);color:var(--muted);font-weight:400}
.presl dd,.presl span:last-child{display:flex;align-items:center;gap:var(--sp-3);
  justify-content:flex-end;flex-wrap:wrap}
.presl-add{white-space:nowrap}
/* a text link is still a target: 24x24 is the minimum a finger can hit */
.presl-x{font-size:var(--fs-xs);font-weight:400;padding:4px 2px;min-height:24px;
  display:inline-flex;align-items:center}
.presl--on{color:var(--red)}
.presl--on dt,.presl--on span:first-child,.presl--on .num{color:var(--red)}
.presl--on .presl-x{color:var(--red)}
/* The drawer's version of the same offer. It sits among rows that only state
   facts, so it needs to look like the one thing there you can act on. */
.presd{margin:var(--sp-4) 0 var(--sp-2);padding:var(--sp-4);border-radius:var(--r-media);
  background:var(--red-quiet);box-shadow:inset 0 0 0 1px var(--line)}
.presd-tag{display:block;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--red-text);font-weight:500}
.presd-t{font-size:var(--fs-sm);font-weight:500;margin:6px 0 2px;color:var(--ink);letter-spacing:-.01em}
.presd-d{font-size:var(--fs-xs);color:var(--muted);margin:0;text-wrap:pretty;line-height:1.45}
.presd-f{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-4)}
.presd-p{font-size:var(--fs-md);font-weight:500;color:var(--red-text)}
.presd--on .presd-p{color:var(--ink)}
/* A message rendered the way its reader gets it, so reviewing the words is
   reading them rather than picturing them. */
.mail{padding:0;overflow:hidden}
.mail-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5);border-bottom:1px solid var(--line);background:var(--surface-2)}
.mail-bd{padding:var(--sp-6) var(--sp-5)}
.mail-bd p{font-size:var(--fs-sm);line-height:1.6;margin:0 0 var(--sp-4);max-width:62ch}
.mail-cta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-5) 0}
.mail-btn{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--radius-full);
  border:1px solid var(--line-strong);font-size:var(--fs-sm);color:var(--ink);background:var(--surface)}
.mail-btn--go{background:var(--navy);border-color:var(--navy);color:#fff}
.mail-foot{font-size:var(--fs-xs);color:var(--faint);border-top:1px solid var(--line);
  padding-top:var(--sp-4);margin-bottom:0}
.field--row{display:flex;align-items:center;gap:var(--sp-3)}
@media (max-width:560px){
  .presx{flex-direction:column}
  .presx-side{width:100%;height:64px}
  .presx-cta{align-self:stretch;text-align:center;justify-content:center}
}

/* ---- no checkout here -------------------------------------------------- */
.nopay{margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-card);
  background:var(--surface-2);border:1px solid var(--line)}
.nopay-t{font-size:var(--fs-sm);font-weight:500}
.nopay-d{font-size:var(--fs-xs);color:var(--muted);line-height:1.6;margin-top:3px}
main[data-branch] .ochip.on{box-shadow:0 1px 2px color-mix(in srgb,#7F1D16 22%,transparent)}
main[data-branch] .nopay{box-shadow:var(--lift-1)}
.mhelp-c{text-align:left;font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:0 var(--sp-3) var(--sp-3)}

/* ---- what each method is ----------------------------------------------
   A table compared them on three axes; what people actually ask is what the
   thing is. A definition list says it in prose, and it stays closed until
   asked so the step is four cards tall at rest. */
.mwhat{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.mwhat-r{display:flex;flex-direction:column;gap:3px}
.mwhat-r dt{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--fs-sm);font-weight:500}
.mwhat-c{font-size:var(--fs-micro);font-weight:400;color:var(--red)}
.mwhat-r dd{margin:0;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* ---- personalisation, in its own colour --------------------------------
   Red is the merchandise accent and this is the one step a person must not
   scroll past, so the section carries a red wash and a red rule rather than
   sitting in the same white as everything above it. */
.pdp-step--pers{background:color-mix(in srgb,#7F1D16 4%,var(--surface));
  border:1px solid color-mix(in srgb,#7F1D16 18%,transparent);
  border-left:3px solid var(--red);
  border-radius:var(--r-card);padding:var(--sp-5);margin-top:var(--sp-4)}
.pdp-step--pers .step-n{background:var(--red);color:#FFF;border-radius:50%;
  width:22px;height:22px;display:inline-grid;place-items:center;font-size:var(--fs-micro)}
.pdp-step--pers .step-t{color:var(--red);font-weight:500}
.pdp-step--pers .ochip,.pdp-step--pers .mhelp,
.pdp-step--pers .art-line{background:var(--surface)}
.pdp-step--pers .ochip.on{background:var(--red)}
.pdp-step--pers .mhelp{border-color:color-mix(in srgb,#7F1D16 18%,transparent)}
main[data-branch] .pdp-step--pers{box-shadow:var(--lift-1)}

/* ---- the project as a sequence -----------------------------------------
   One rail down the left, a numbered marker per step. Where you are is the
   only step that carries weight; what is done is a line, what is ahead is a
   promise. The rail is drawn by the markers, not by a border on the list, so
   it stops cleanly at the last step instead of running past it. */
.prj-hd{margin-bottom:var(--sp-6)}
.prj-am{display:flex;align-items:center;gap:var(--sp-3)}

.pstep-list{list-style:none;margin:0 0 var(--sp-9);padding:0;display:flex;flex-direction:column}
.pstep{display:flex;gap:var(--sp-4);position:relative;padding-bottom:var(--sp-6)}
/* the rail: drawn from each marker down to the next, so the last one ends it */
.pstep:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;
  width:1px;background:var(--line)}
.pstep-i{flex:none;width:32px;height:32px;border-radius:var(--radius-full);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);position:relative;z-index:1}
.pstep-b{flex:1;min-width:0;padding-top:4px}
.pstep-n{font-size:var(--fs-md);font-weight:500;line-height:1.3}
.pstep-m{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}

.pstep--done .pstep-i{background:var(--go);border-color:var(--go);color:var(--paper)}
.pstep--done .pstep-n{color:var(--muted);font-weight:400}
.pstep--later{opacity:.55}
.pstep--now{padding-bottom:var(--sp-7)}
.pstep--now .pstep-i{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.pstep--now .pstep-b{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:var(--sp-5);box-shadow:var(--card-shadow);margin-top:-4px}
.pstep--now .pstep-n{font-size:var(--fs-lg);font-weight:500}

.pstep-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.pstep-say{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);padding:var(--sp-4) 0}
.pstep-say p{font-size:var(--fs-sm);line-height:1.5;margin-top:4px}
.pstep-lbl{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pstep-pay{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:var(--radius-full);
  background:var(--wait-quiet);color:var(--wait);font-size:var(--fs-xs);font-weight:500}
.pstep-none{font-size:var(--fs-sm);color:var(--muted);padding:var(--sp-3) 0;border-top:1px solid var(--line)}

.pstep-part{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.pstep-dos{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.pstep-do{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  border-left:2px solid var(--wait);background:var(--surface-2)}
.pstep-do-b{flex:1;min-width:0}
.pstep-do-t{font-size:var(--fs-base);font-weight:500}
.pstep-do-d{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.pstep-work:not(:empty){border-top:1px solid var(--line);margin-top:var(--sp-5);padding-top:var(--sp-5)}

/* the material that is true at every step, one click away */
.pref-hd{margin-bottom:var(--sp-4)}
.prefs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pref{border-bottom:1px solid var(--line)}
.pref-s{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 0;cursor:pointer;
  font-size:var(--fs-base);font-weight:500;list-style:none}
.pref-s::-webkit-details-marker{display:none}
.pref-s::after{content:"+";margin-left:auto;color:var(--muted);font-size:var(--fs-md)}
.pref[open] .pref-s::after{content:"−"}
.pref-n{padding:0 7px;border-radius:var(--radius-full);background:var(--wait);color:var(--paper);
  font-size:var(--fs-micro);font-weight:700;line-height:18px}
.pref-n--quiet{background:transparent;color:var(--muted);font-weight:500;padding:0}
.pref-b{padding:0 0 var(--sp-5)}
/* the fold already names the section, so the section's own title would say it
   twice; the meta line beside it stays, and slides left into the space */
.pref-b > section > h2.t-h4,
.pref-b > section > .row-between > h2.t-h4{display:none}

@media (max-width:760px){
  .pstep-say{grid-template-columns:1fr;gap:var(--sp-4)}
  .pstep-do{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .pstep--now .pstep-b{padding:var(--sp-4)}
}

/* ---- the back office's step view --------------------------------------- */
.stst{display:flex;flex-direction:column;gap:var(--sp-6)}
.stst-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.stst-who{flex:none;text-align:right}
.stst-gate,.stst-do,.stst-see{}
.stst-clear{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-top:10px;padding:var(--sp-4);border-radius:var(--radius-md);
  border-left:2px solid var(--go);background:var(--surface-2);font-size:var(--fs-sm)}
.pstep-do--stop{border-left-color:var(--stop)}
.stst-mirror{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:10px;
  padding:var(--sp-4);border-radius:var(--radius-md);background:var(--surface-2)}
.stst-mirror p{margin-top:4px;line-height:1.5}
@media (max-width:760px){
  .stst-hd,.stst-clear{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .stst-who{text-align:left}
  .stst-mirror{grid-template-columns:1fr}
}

/* ---- choosing which step a project moves to ---------------------------- */
.mv{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.mv-o{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  cursor:pointer;border-bottom:1px solid var(--line)}
.mv-o:last-child{border-bottom:0}
.mv-o:hover{background:var(--navy-quiet)}
.mv-o input{margin-top:3px;flex:none}
.mv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mv-n{font-size:var(--fs-base);font-weight:500}
.mv-d{font-size:var(--fs-sm);color:var(--muted)}
.mv-o--here{background:var(--surface-2)}
.mv-o--here .mv-n{color:var(--muted)}
.mv-o--off{opacity:.5;cursor:not-allowed}
.mv-o--off:hover{background:transparent}
.mv-tag{flex:none;align-self:center;padding:1px 8px;border-radius:var(--radius-full);
  background:var(--wait-quiet);color:var(--wait);font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* ---- the design document ------------------------------------------------
   The one thing a design fee buys, shown as one thing. */
.dsn{display:flex;flex-direction:column;gap:var(--sp-4)}
.dsn-doc,.dsn-held{display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.dsn-ico{flex:none;width:44px;height:56px;border-radius:var(--radius-xs);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--paper);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em}
.dsn-ico--off{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.dsn-b{flex:1;min-width:0}
.dsn-t{font-size:var(--fs-md);font-weight:500;line-height:1.3}
.dsn-m{font-size:var(--fs-sm);color:var(--muted);margin-top:3px;line-height:1.45}
.dsn-note{font-size:var(--fs-base);line-height:1.55;white-space:pre-wrap}
.dsn-next{font-size:var(--fs-sm);color:var(--muted);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.dsn-wait .dsn-t{font-size:var(--fs-md)}
.dsn-wait .dsn-m{margin-top:6px}
.dsn-brief{padding:var(--sp-4);border-radius:var(--radius-md);background:var(--surface-2)}
@media (max-width:560px){
  .dsn-doc,.dsn-held{flex-wrap:wrap}
  .dsn-doc .btn,.dsn-held .btn{width:100%}
}

/* ---- a document, previewed ---------------------------------------------
   Rendered from the same blocks as the PDF, so it is laid out like the page
   it becomes rather than like a web card. */
.pp-doc{line-height:1.45}
.pp-doc .pp-rule{border:0;border-top:1px solid var(--navy);opacity:.35;margin:10px 0}
.pp-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);margin-bottom:3px}
.pp-row .num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- looking at a file ---------------------------------------------------
   The page is the subject, so it gets the width and a ground that is not the
   modal's own — a white sheet reads as a sheet, in either theme. */
.fv{display:flex;flex-direction:column;gap:var(--sp-3);min-height:120px}
.fv-img{width:100%;height:auto;border-radius:var(--radius-sm);background:#fff}
.fv-frame{width:100%;height:min(70vh,760px);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;display:block}
/* an image that can be opened says so before it is hovered */
.pp-board{cursor:zoom-in}

/* ---- the journey, as the navigation -------------------------------------
   Eight steps in a row, each one a button. Where the project is is marked,
   where you are looking is lifted, and the rail runs through all of them so it
   reads as one sequence rather than eight chips. */
.way{list-style:none;display:flex;margin:0 0 var(--sp-4);padding:0;overflow-x:auto;
  scrollbar-width:none;border-bottom:1px solid var(--line)}
.way::-webkit-scrollbar{display:none}
.way li{flex:1 1 0;min-width:96px}
.way-s{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:var(--sp-3) var(--sp-3) var(--sp-4);border:0;border-bottom:2px solid transparent;
  background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:background-color var(--dur-focus) var(--ease),border-color var(--dur-focus) var(--ease)}
.way-s:hover{background:var(--navy-quiet)}
.way-i{width:22px;height:22px;border-radius:var(--radius-full);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-micro);font-weight:700;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--muted)}
.way-n{font-size:var(--fs-sm);font-weight:500;line-height:1.25}
.way-m{font-size:var(--fs-micro);color:var(--muted);letter-spacing:.02em}
.way-s--done .way-i{background:var(--go);border-color:var(--go);color:var(--paper)}
.way-s--done .way-n{color:var(--muted);font-weight:400}
.way-s--now .way-i{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.way-s--now .way-n{font-weight:600}
.way-s--ahead{opacity:.6}
.way-s--on{border-bottom-color:var(--navy);background:var(--navy-quiet)}
.way-s--on .way-n{color:var(--navy)}

.wayblock{display:flex;align-items:center;gap:var(--sp-3);width:100%;margin-bottom:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border:0;border-left:2px solid var(--stop);
  border-radius:var(--radius-sm);background:var(--stop-quiet);color:inherit;
  font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
.wayblock-n{flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-full);
  background:var(--stop);color:var(--paper);font-size:var(--fs-micro);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.wayblock-go{margin-left:auto;color:var(--stop);font-weight:500;white-space:nowrap}

/* the across-the-project row reads as secondary to the rail above it */
.tabs--quiet{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.tabs-l{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-right:var(--sp-2)}
.stagehd--slim{margin-bottom:var(--sp-5)}

/* one step, opened */
.stw{display:flex;flex-direction:column;gap:var(--sp-5)}
.stw-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.stw-when{flex:none;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.stw-who{flex:none;text-align:right}
.stw-work{border-top:1px solid var(--line);padding-top:var(--sp-5)}
.stw-lbl{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--sp-4)}
@media (max-width:760px){
  .way li{min-width:132px}
  .stw-hd{flex-direction:column;gap:var(--sp-3)}
  .wayblock{flex-wrap:wrap}
  .wayblock-go{margin-left:0}
}

/* ---- the range, edge to edge --------------------------------------------
   No cards, no gaps, no radius: the photographs' own backdrops meet and read
   as one continuous band of colour across the full width of the page. */
.strip-sec{padding-top:0;padding-bottom:0}
.strip{display:flex;width:100%;overflow:hidden;background:var(--surface-2)}
.strip-i{flex:1 1 0;min-width:0;margin:0;aspect-ratio:3/4;overflow:hidden}
.strip-i img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
/* the last two drop away before the images get too narrow to read */
@media (max-width:1100px){ .strip-i:nth-child(n+6){display:none} }
@media (max-width:860px){ .strip-i:nth-child(n+5){display:none} }
@media (max-width:620px){ .strip-i:nth-child(n+4){display:none} .strip-i{aspect-ratio:2/3} }

/* ---- the editorial hero -------------------------------------------------
   A group shot is not a packshot. It needs the whole frame — three people and
   a kitchen do not survive being cropped to a product tile — and the spec card
   has to come off their faces. The card keeps its job of showing what a
   configured line carries; it just does it from the floor. */
.shero-img--ed{aspect-ratio:auto}
.shero-img--ed img{width:100%;height:auto;display:block;object-fit:contain;object-position:center}
/* down onto the plywood, and narrower, so nobody is behind it */
.shero-media--ed .shero-card{bottom:calc(var(--sp-8) * -1);left:calc(var(--sp-7) * -1);
  width:min(280px,70%);padding:var(--sp-4)}
.shero-media--ed .shero-card-t{margin:var(--sp-2) 0 var(--sp-3)}
@media (max-width:1100px){
  .shero-media--ed .shero-card{left:calc(var(--sp-4) * -1);width:min(260px,74%)}
}
@media (max-width:860px){
  /* stacked, the card stops floating and simply follows the photograph */
  .shero-media--ed .shero-card{position:static;width:100%;margin-top:var(--sp-4);box-shadow:var(--shadow-2)}
}

/* ---- offers -------------------------------------------------------------
   Red, because an offer belongs to the merchandise line and this is the one
   place a loud accent earns its keep. The strip is deliberately thin: it sits
   above everything on every page, so it has to be readable and then ignorable. */
.obar{position:relative;background:var(--red);color:#FFFFFF}
/* centred on the page, not on the space left over beside the dismiss — so the
   sentence sits in the middle of the screen the way every bar worth copying does */
.obar-in{min-height:34px;padding:7px var(--sp-10);display:flex;align-items:center;
  justify-content:center;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-sm);text-align:center}
.obar-tag{flex:none;padding:2px 9px;border-radius:var(--radius-full);
  background:color-mix(in srgb,#FFFFFF 20%,transparent);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.obar-t{font-weight:500}
.obar-go{background:transparent;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:var(--fs-sm);font-weight:600;color:#FFFFFF;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:3px}
.obar-go i{font-style:normal;text-decoration:none;transition:transform var(--dur-focus) var(--ease)}
.obar-go:hover i{transform:translateX(2px)}
.obar-x{position:absolute;top:50%;right:var(--sp-5);transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;line-height:1;padding:6px;
  color:color-mix(in srgb,#FFFFFF 66%,transparent);font-size:12px}
.obar-x:hover{color:#FFFFFF}
@media (max-width:620px){
  .obar-in{padding:7px var(--sp-8);gap:var(--sp-2)}
  .obar-tag{display:none}       /* the sentence already says which offer it is */
}
/* No padding on main. Giving it any let the page's own ground show through as
   a third colour between the red bar and the warm head band — a stripe that
   belonged to nothing. The room content needs comes from inside the head
   instead, where it is part of the band rather than a gap above it. */

/* the block on the home page */
.oblock{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-9);align-items:center}
.oblock-t{font-size:clamp(28px,3.4vw,46px);margin-top:var(--sp-5)}
.oblock-d{margin-top:var(--sp-4)}
.oblock-e{margin-top:var(--sp-5)}
.otiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.otier{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--radius-md)}
.otier-p{font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1;color:var(--red-text);
  font-variant-numeric:tabular-nums}
.otier-p i{font-style:normal;font-size:.5em;margin-left:2px}
.otier-s{font-size:var(--fs-sm);color:var(--muted)}
.otiers--flat{flex-direction:row;gap:var(--sp-2);margin-top:var(--sp-5)}
.otiers--flat .otier{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--sp-3) var(--sp-4)}
.otiers--flat .otier-p{font-size:24px}
@media (max-width:860px){
  .oblock{grid-template-columns:1fr;gap:var(--sp-6)}
  .otiers--flat{flex-direction:column}
}

/* the pop-up */
.opop-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5)}
.opop-veil{position:absolute;inset:0;background:color-mix(in srgb,#0A1024 52%,transparent)}
@supports (backdrop-filter:blur(2px)){.opop-veil{backdrop-filter:blur(3px)}}
.opop{position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;
  background:var(--surface);border-radius:var(--r-panel);box-shadow:var(--shadow-4);
  padding:var(--sp-7) var(--sp-7) var(--sp-6)}
.opop-x{position:absolute;top:var(--sp-4);right:var(--sp-4);background:transparent;border:0;
  cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:6px}
.opop-x:hover{color:var(--ink)}
.opop-t{font-size:clamp(22px,2.6vw,30px);font-weight:400;line-height:1.15;margin-top:var(--sp-4)}
.opop-t b{font-weight:500;color:var(--red-text)}
.opop-d{font-size:var(--fs-base);color:var(--muted);margin-top:var(--sp-3);line-height:1.5}
.opop-f{margin-top:var(--sp-5)}
.opop-b{margin-top:var(--sp-4)}
.opop-s{margin-top:var(--sp-4)}
@media (prefers-reduced-motion:no-preference){
  .opop{animation:opop-in var(--dur-focus) var(--ease)}
  @keyframes opop-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}


/* Prototype furniture that must never reach a customer. The app redraws the
   page after it boots, so removing these from the built HTML alone is not
   enough — they come back on the next render. A stylesheet rule holds for
   both, and .switch in particular carries a "reset every record" button. */
.switch{display:none !important}
[data-go="public:login"],[data-go="public:studiohelp"]{display:none !important}

/* Elements the static builder turned into <a> that had no display of their own.
   Only these are touched: a class that already sets display keeps it, because
   a rule like a.pc{display:block} would beat .pc{display:flex} on specificity
   and flatten the card. */
a[data-blk]{display:block}

/* ---------------------------------------------------------------------------
   Responsive corrections, from the audit across the twenty most-used screen
   sizes of 2026 (tools/responsive-harness.js). Each one is a real failure at a
   real size, not a preference.
   ------------------------------------------------------------------------ */

/* The headline price. At 34px with -.03em the decimal point is crushed between
   two nines and "9.99" reads as one number. The cents get the tracking back
   plus a hair of margin — a seam, not a gap. */
.pdp-from b .cts{font-style:normal;letter-spacing:0;margin-left:.07em}

/* The filter pills are <button> in the mockup and <a> here, and a link does not
   centre its own text the way a button does. With min-height:40px and nothing
   centring it, the label sat 4px from the top of the pill with 23px of air
   underneath. Specificity has to beat a[data-blk]{display:block} above. */
a[data-blk].fp,.fp{display:inline-flex;align-items:center;justify-content:center}

/* The filter row is a horizontal scroller, and on a phone it was being sliced
   at the page gutter — a pill cut in half 16px short of the edge reads as a
   layout fault rather than as "there is more, push it". Pulled out to the
   screen edge and padded back in, so the pills start where the text starts and
   scroll off the actual edge. */
@media (max-width:900px){
  .fscroll{margin-left:calc(var(--sp-4) * -1);margin-right:calc(var(--sp-4) * -1);
    padding-left:var(--sp-4);padding-right:var(--sp-4);
    scroll-padding-left:var(--sp-4)}
}

/* The offer bar is one line at every width. It wrapped at 320 even after the
   sentence was shortened, and a promotional strip on two lines pushes the page
   down and reads as a mistake. */
.obar-in{flex-wrap:nowrap}
.obar-t{white-space:nowrap}
@media (max-width:400px){
  .obar-in{font-size:var(--fs-xs);padding-left:var(--sp-5);padding-right:var(--sp-7)}
}

/* Controls below the 24px minimum of WCAG 2.5.8. All three were wide enough
   and too short — a thumb misses them on a phone. */
.obar-go{min-height:24px}
.obar-x{min-width:24px;min-height:24px}
.step-h{min-height:24px}

/* The header at phone widths. Five controls and a lockup at a 24px gap come to
   394px, so at 375 — the iPhone SE and the 13 mini, both still everywhere —
   the Menu button hung 19px off the side and took the whole page into a
   sideways scroll with it. The brand also had flex-shrink working on it, which
   squashed the lockup to 3px at 320 while its text carried on across the
   language switcher. */
.brand{flex:none}
@media (max-width:480px){
  .pub-hd-in{gap:var(--sp-3)}
  /* "| MERCHANDISE" goes: the page under it says which side you are on, and
     the mark and the name do not. */
  .brand .brand-bar,.brand .brand-sub{display:none}
}
@media (max-width:380px){
  .pub-hd-in{gap:var(--sp-2);padding:0 var(--sp-3)}
  /* The light/dark toggle is the one control with a system-level equivalent:
     prefers-color-scheme still decides, and the switch returns above 380. */
  .pub-hd-in [data-act="theme"]{display:none}
}

/* The two doors on the chooser. A grid item defaults to min-width:auto, so the
   card was sized by its widest child rather than by its column: "Explore custom
   uniforms →" is 262px on one line, which made a 312px card sit in a 288px
   track and took the whole page into a sideways scroll at 320. The card may
   shrink now, and at that width the label is allowed the second line it needs
   rather than deciding the width of the page. */
.pick{min-width:0}
@media (max-width:380px){
  .pick{padding:var(--sp-6)}
  .pick .btn{white-space:normal;text-align:center}
}

/* The quote drawer scrolls as one list. The summary rows and the presentation
   card used to sit in the pinned footer, which on a laptop left the products
   themselves about two lines of scrollable height; they are in the scrolling
   body now, and the footer keeps only the total and the button. .dsum is the
   seam between the two — it needs the rule the footer's border used to give. */
.dsum{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.dsum .btn--block{margin-top:var(--sp-4)}
/* Room to scroll past the last control rather than ending flush against the
   footer, which reads as "there is nothing more" when there is. */
.drawer-body{padding-bottom:var(--sp-6)}
/* A short window is exactly where this went wrong, so the footer is capped and
   given its own scroll rather than being allowed to grow without limit again. */
.drawer-foot{max-height:45vh;overflow-y:auto}
/* On a laptop the browser's own chrome takes a third of the screen before the
   page gets any, and the drawer is full height — so the two bands that do not
   scroll give some of their padding back rather than charging it to the list. */
@media (max-height:780px){
  .drawer-h{padding:var(--sp-4) var(--sp-6)}
  .drawer-foot{padding:var(--sp-4) var(--sp-6)}
  .drawer-foot .btn--block{margin-top:var(--sp-3)}
}

/* The language switcher. The mockup had a stub button and no menu to style,
   so this is new — but it is the merchandise side's own tokens throughout, and
   the shape deliberately matches the switcher the custom uniforms pages have
   had all along, because they are one site and this is one control. */
.mlang{position:relative;display:inline-flex}
.mlang-b{gap:var(--sp-1);letter-spacing:.06em}
.mlang-b svg{opacity:.7;transition:transform var(--dur-focus) var(--ease)}
.mlang-b[aria-expanded="true"] svg{transform:rotate(180deg)}
.mlang-m{position:absolute;right:0;top:calc(100% + var(--sp-2));z-index:70;
  min-width:12rem;padding:var(--sp-1);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-3)}
.mlang-m[hidden]{display:none}
.mlang-m a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);color:var(--ink);white-space:nowrap}
.mlang-m a:hover{background:var(--surface-2)}
.mlang-c{font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted)}
.mlang-m a[aria-current="true"]{font-weight:500}
.mlang-m a[aria-current="true"] .mlang-c{color:var(--ink)}

/* On the hero photograph the control sits on the image, where the quiet
   button's border and ink would disappear. Same rule the mockup's own
   btn--onphoto uses, applied to the button this replaced it with. */
.mlang--onphoto .mlang-b{background:transparent;border-color:rgba(244,242,237,.55);color:#F4F2ED}
.mlang--onphoto .mlang-b:hover:not(:disabled){background:rgba(244,242,237,.12);border-color:#F4F2ED}

/* The footer's row of names, in place of the stub that listed three languages
   and did nothing. */
.mlang-row{color:var(--muted);font-size:var(--fs-sm)}
.mlang-row a{color:var(--muted)}
.mlang-row a:hover{color:var(--ink)}
.mlang-row a[aria-current="true"]{color:var(--ink)}
.mlang-row i{font-style:normal;opacity:.5}

/* ---- Consent bar ------------------------------------------------------- */
.consent-bar{position:fixed;inset:auto 1rem 1rem auto;z-index:60;max-width:32rem;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:14px;padding:1rem 1.15rem;font-size:var(--step--1);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.consent-bar p{margin-bottom:.75rem;color:var(--muted)}
/* ---------------------------------------------------------------------------
   THE CONSENT NOTICE

   It was a plain white box in a corner, in a different language from the rest
   of the site. It now uses the same panel: the page radius, a hairline, the
   navy action and a quiet decline of equal weight — a real choice, not a
   nudge — with a route to the cookie policy for anyone who wants the detail.
   ------------------------------------------------------------------------ */
.consent-bar{position:fixed;inset:auto var(--sp-6) var(--sp-6) auto;z-index:60;
  width:min(24rem,calc(100vw - var(--sp-6) * 2));
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-6);font-size:var(--fs-sm);
  box-shadow:0 1px 2px color-mix(in srgb,#011251 6%,transparent),
             0 24px 48px -24px color-mix(in srgb,#011251 38%,transparent)}
.consent-bar__l{margin:var(--sp-3) 0 0;font-size:var(--fs-xs)}
.consent-bar__l a:hover{color:var(--navy);text-decoration-color:var(--navy)}
.consent-bar__a .btn{flex:1 1 auto;justify-content:center}
.consent-bar__a .btn{flex:1 1 100%}