@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);
  /* the merchandise red, on the band. #7F1D16 on #011251 is unreadable, and
     the dark-mode red is a theme value the band cannot use — the band never
     inverts, so it needs a red that does not either. This is the one the
     gateway already paints its merchandise half with. */
  --red-on-band:#F2B8B0;
  --band-rule:color-mix(in srgb,#F4F2ED 18%,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:500;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)}
/* gap is --sp-5, not --sp-6: at the top tier this row carries nine items in
   five languages and the container cannot grow past --app-max. French is the
   long one — with a two-digit quote badge the wider gap left it 15px of
   slack, which is one word away from overflowing. */
.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-5);flex-wrap:nowrap}
.pub-nav{display:flex;gap:var(--sp-4);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)}
/* On the shop the categories are the point of the bar, so they are read at
   full strength and the utilities beside them are the quiet ones. The current
   page is marked with a rule rather than more weight, because "darker" is
   already the resting state here and cannot also mean "you are here". */
.pub--merch .pub-nav a{color:var(--ink)}
.pub--merch .pub-nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.pub--merch .pub-nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}

/* The hairline that separates "what the site is" from "what your order is".
   It is the whole reason the row reads as two short groups instead of one
   long one, so it holds its place at every width the controls do. */
.hd-rule{width:1px;height:20px;background:var(--line);flex:none;margin:0 calc(var(--sp-2) * -1)}
/* A square button for a glyph: the small button's side padding is sized for
   a word and leaves an icon adrift in it. */
.hd-i{padding-left:var(--sp-3);padding-right:var(--sp-3)}
.hd-i svg{display:block}
.hd-bag{gap:var(--sp-2)}
.hd-bag svg{margin-right:calc(var(--sp-1) * -1)}
/* On a phone the bar runs out of room before it runs out of things to say,
   and the word is the part a bag with a number beside it does not need. It
   goes to the screen reader rather than away, and the hairline goes with it:
   at this width there are only two groups' worth of controls left to tell
   apart. Without both, the last button sat flush against the screen edge. */
@media (max-width:520px){
  .hd-bag .hd-bag-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .hd-bag svg{margin-right:0}
  .hd-rule{display:none}
}
.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);
  flex-wrap:wrap;min-width:0}
/* a single word longer than the column has to be allowed to break, or it sets
   the minimum width of everything above it */
.step-t{min-width:0;overflow-wrap:anywhere}
.step-v{min-width:0}
.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)}
/* The second placement onward gets this header row, and it was a nowrap flex
   line: badge, the position select on flex:1 with no floor, the cost, and a
   Remove button whose word is longer in every language but English. At 320 the
   select was left 45px — "Davanti" was not merely truncated, it was invisible.
   The row wraps and the select keeps a floor, so the button drops to its own
   line rather than crushing the control it sits beside. */
.place-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-3);
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.place-card-h select{min-width:11ch}
.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 ------------------------------------------------------------- */
/* THE LAST THING ON EVERY PAGE, AND IT WAS THE QUIETEST THING ON IT.
   Four columns of grey links on the same off-white as the page above them,
   signed with a 17px mark. Nothing said whose site this was.

   It is the band now: the identity's own surface, the one colour in the
   system that never inverts, so the footer closes every page the same way in
   both themes — and the wordmark is set as the lockup rather than as a
   bullet in front of a copyright line. */
.pub-ft{position:relative;border-top:0;padding:var(--sp-9) 0 var(--sp-6);
  background:var(--band);color:var(--on-band)}
/* the line of business, across the top edge. Red is Merchandise and nothing
   else, so the Studio and the gateway get no rule rather than a borrowed one. */
.pub-ft--merch::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--red-on-band)}
.pub-ft .ft-h{color:var(--on-band-dim)}
.pub-ft--merch .ft-col:first-child .ft-h{color:var(--red-on-band)}
.pub-ft .muted{color:var(--on-band-dim)}
.ft-lock{display:inline-flex;align-items:center;gap:7px;font-weight:800;
  letter-spacing:-.01em;font-size:var(--fs-lg);line-height:1}
.ft-lock .mk{width:20px;height:20px;color:var(--on-band)}
.ft-lock-t{color:var(--on-band)}
/* 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(--band-rule)}
.ft-h{margin-bottom:var(--sp-2)}
.ft-link{color:var(--on-band-dim);cursor:pointer;font-size:var(--fs-sm);
  transition:color var(--dur-focus) var(--ease)}
.ft-link:hover{color:var(--on-band)}
.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(--band-rule)}
.ft-id{display:flex;align-items:flex-start;gap:var(--sp-4)}
.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}
}
/* Only the custom-uniforms bar still carries "Choose a service", and it is
   the first thing to go there. On the shop it has gone altogether — see
   merchHeadEnd(). It is still in the menu sheet and in the footer on both. */
/* Measured, not guessed: the container is capped at --app-max (1440) less 48
   of padding = 1392, so a wider window hands this row no extra space. The full
   set has to fit that, in every language — French is the long one. */
@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);align-items:center;flex-wrap:wrap}
.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.

   Tightened once already measured: at 7.5vh a 1280x860 laptop put 129px
   between one chapter and the next and the merchandise landing page ran to
   6,955px, which is a lot of scrolling past nothing. 5.5vh gives 94px there
   — still a clear break between chapters, about 400px less page — and the
   ceiling comes down with it so a tall display does not go back to 160.
   The section heads give up a step of their own margin at the same time:
   a heading 56px clear of the thing it heads reads as its own paragraph. */
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(40px,5.5vh,64px) 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}
/* ...and the section that FOLLOWS the page head is not one of those either.
   The head is a band closed by a 2px rule, so a flush section under it set its
   first row of cards directly on that rule — on the collections index and on
   every product-family page, the grid began the pixel the line ended. Only the
   opener gets to run up under the header; whatever comes after the head takes
   the same air as any other chapter. .mph exists only on these pages, so the
   two scopes without one are unaffected. */
main[data-branch] .mph + .pub-sec--flush,
main[data-page="merch"] .mph + .pub-sec--flush,
main[data-page="products"] .mph + .pub-sec--flush,
main[data-page="collection"] .mph + .pub-sec--flush,
main[data-page="collections"] .mph + .pub-sec--flush{padding-top:clamp(40px,5.5vh,64px)}
main[data-branch] .shero,
main[data-page="merch"] .shero{padding:clamp(32px,5vh,56px) 0 clamp(40px,6vh,56px)}
/* A section head is part of its section, not a chapter of its own. */
main[data-branch] .shd,
main[data-page="merch"] .shd,
main[data-page="products"] .shd,
main[data-page="collection"] .shd,
main[data-page="collections"] .shd,
main[data-page="product"] .shd{margin-bottom:var(--sp-8)}

/* 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:500;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:500;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 space the colour band used to hold is the garment's photograph now,
   square like the product card's, and of the colour the card names. */
.gb-im{aspect-ratio:1;border:0;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);display:block}
.gb-im img{object-position:center top}
.gb-ph{font-size:34px;display:grid;place-items:center;height:100%;color:var(--faint)}
/* the colours this garment comes in, read as colour rather than as a number */
.gb-sw{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto;padding-bottom:2px}
.gb-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)}
.gb-sw em{font-style:normal;font-size:var(--fs-micro);color:var(--faint);margin-left:2px;
  font-variant-numeric:tabular-nums}
.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:500;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)}
/* The frame was a hard square and the photograph was told to fit inside it
   without cropping. Most catalogue shots are square and filled it exactly,
   but the model shots are 4:5 — so on those the frame stood wider than the
   picture and showed a band of empty panel down each side.
   
   Cropping to fill was the wrong way out: the crop would have come off the
   top and bottom of a person, which on a garment photograph means the collar
   or the hem. So the frame takes the shape of whatever is in it, and only
   falls back to a square when there is no photograph and the glyph needs a
   box to sit in. dimension() writes width and height on every <img>, so the
   browser reserves the right height before the file arrives and nothing
   shifts. */
.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;
  overflow:hidden}
.pdp-hero:has(img){aspect-ratio:auto}
.pdp-hero img{width:100%;height:auto;display:block;object-fit:contain}
.pdp-glyph{font-size:96px}
.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)}
/* The consent bar gets the same lift the theme switch already takes, for the
   same reason: the buy bar is fixed to the bottom of every product page and
   the consent bar is fixed to the bottom-right corner, so they sat on top of
   one another. Raising the z-index alone would put the legal choice OVER the
   buy bar's own controls; clearing it is what both of them need. --barh is
   the bar's measured height, published by measureBar(). */
body.has-bar .consent-bar{bottom:calc(var(--barh, 96px) + var(--sp-5))}
/* This flat 96px sat after the @media (max-width:1080px) rule that reserves
   132, at the same specificity, so it won — the public site kept 96px at every
   width, which is where the shortfall came from. --barh is the bar's measured
   height; the 96 stays only as the value before the first measurement. */
body.has-bar{padding-bottom:calc(var(--barh, 96px) + var(--sp-3))}

/* 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)}
/* The figcaption used to sit inside this clipped, ratio-locked box and was
   painted nowhere at all: 63px entirely outside the figure at 375, on every
   article in every language. What it carries is the AI-provenance disclosure,
   so it was the disclosure that was being silently deleted. The ratio and the
   clipping belong to the IMAGE; the figure just holds the image and its
   caption. */
.po-m{margin-top:var(--sp-8)}
.po-m img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 28%;display:block;
  border-radius:var(--r-panel);background:var(--surface-2)}
.po-cap{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}

/* 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 img{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}

.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:500;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. */
/* An `auto` track grows to its content's min-content contribution rather than
   clipping, so one unbreakable Italian word — PERSONALIZZAZIONE, 137px — pushed
   the whole page 14.34px wider than the 320px viewport and the visitor could
   scroll the site sideways. minmax(0,1fr) holds the track to the column. */
.pdp-rest{display:grid;grid-template-columns:minmax(0,1fr);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 */
/* The label column was a flat 88px, which is the width of the English word.
   "Posizionamento" wants 110 and ran out under the select beside it; Spanish
   and German reach past 88 too. The column takes the width of the longest
   label it actually holds, never dropping below the 88 the English set, and
   the control's track is minmax(0,1fr) so it yields rather than overflowing
   when a label is long and the row is narrow. */
.orow{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,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}
/* Each .orow is its own grid, so sizing the label track to its own content
   aligned nothing: the row with the long label pushed its control 22px right
   of the others. Subgrid hands every row in one placement the SAME pair of
   tracks, measured across all their labels at once — so the column is as wide
   as the longest word in that language and the controls line up under it.
   The declaration above stands as the fallback where subgrid is missing. */
@supports (grid-template-columns: subgrid){
  .place-flat,
  .place-card .place-opts{grid-template-columns:minmax(88px,auto) minmax(0,1fr)}
  .place-flat .orow,
  .place-card .place-opts>.orow{grid-column:1 / -1;grid-template-columns:subgrid}
}
.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;white-space:nowrap}
.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));
  /* presOffer() renders on the quote page and the checkout, both of which
     sit outside main[data-branch] where the lift tokens are declared — so
     this asked for a shadow and got none. Same bug as the sample box. */
  overflow:hidden;box-shadow:var(--shadow-2)}
.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:500;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:500;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:500}
.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:500;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:500;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:500;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}}
}

/* ---- the placement diagram ---------------------------------------------
   A flat of the garment with a dot on every spot it takes a mark, sitting
   between the product and its specification. Drawn, not photographed: it
   reads at any size, themes with the page, and costs no image request. */
.fd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-7);
  align-items:center}
.fd-copy .eyebrow{color:var(--red)}
.fd-copy h2{margin-top:var(--sp-2)}
.fd-copy p{margin-top:var(--sp-3);max-width:46ch}
.fd-key{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-4)}
.fd-key li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.fd-n{width:20px;height:20px;border-radius:50%;background:var(--navy);color:var(--paper);
  display:grid;place-items:center;font-size:var(--fs-micro);font-weight:700;flex:none}
.fd-art{display:flex;gap:var(--sp-5);justify-content:center}
.fd-fig{margin:0;flex:1;max-width:285px;text-align:center;color:var(--ink)}
.fd-fig svg{width:100%;height:auto;display:block}
.fd-fig figcaption{margin-top:var(--sp-2);font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
/* the placement hint: fixed labels, values in a " · " list */
.oh-split{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--sp-2)}
.oh-split .oh-l{color:var(--faint)}
.oh-split .oh-v{color:var(--muted)}
.oh-split .oh-l:not(:first-child){margin-left:var(--sp-2)}

/* the placement being edited, marked on the garment flat */
.orow--fig{align-items:flex-start}
/* min-width:0, or the caption cannot shrink: beside a 74px figure in a row
   that is already down to the width of a 320px screen, "Parte delantera,
   pecho izquierdo" pushed 9px of itself off the side of the page. */
.pm-wrap{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.pm-fig{width:74px;height:auto;flex:none;color:var(--ink)}
.pm-halo{fill:none;stroke:var(--red);stroke-width:1.5;opacity:.5}
.pm-dot{fill:var(--red)}
.pm-cap{font-size:var(--fs-xs);color:var(--muted);min-width:0;overflow-wrap:anywhere}

/* One calm technical drawing language across every product: pale grey cloth,
   fine construction lines and no photographic shading or drop shadow. */
.fd-body{fill:#ededed;fill-rule:evenodd;stroke:#9e9e9e;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round}
.fd-under{fill:none;stroke:#aaa;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.fd-under--cloth{fill:#ededed}
.fd-seam{fill:none;stroke:#b8b8b8;stroke-width:.7;
  stroke-linecap:round;stroke-linejoin:round}
/* the disc is only there to keep the garment line out of the numeral */
.fd-pt-bg{fill:var(--paper)}
.fd-pt-ring{fill:none;stroke:var(--navy);stroke-width:1}
.fd-pt text{fill:var(--navy);font-size:7.8px;font-weight:500;
  font-family:inherit;dominant-baseline:auto}
@media (max-width:860px){
  .fd{grid-template-columns:1fr;gap:var(--sp-5)}
  .fd-art{order:-1}
  .fd-fig{max-width:235px}
}

/* ---- the volume offer on the quote surfaces ------------------------------
   One calculation draws these rows everywhere; the classes only decide the
   weight of the line. A row that gives something back is marked good; the
   included setup and sample read as facts, in the ink, not as upsells. */
.crow--good dd,.crow--good .co-row-v,.crow--good > span:last-child,.crow--good .factv{color:var(--red-text);font-weight:500}
.crow--muted dd,.crow--muted > span:last-child{color:var(--muted)}
.crow-n{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400;margin-top:2px;text-wrap:pretty}
.onote{display:flex;flex-wrap:wrap;gap:4px var(--sp-2);align-items:baseline;font-size:var(--fs-xs);
  color:var(--muted);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.onote-l{color:var(--red-text);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-micro)}
.onote--on .onote-v{color:var(--ink)}
/* the sample choice: two plain options, the included one first */
/* This box gives something away — a garment, made and posted, worth about
   eighty euros — and it was the least noticeable thing on the checkout: a
   pale red wash on an off-white page, which on a phone reads as another
   section rather than as an offer. More red would not have helped; red is
   the merchandise brand colour and it is already on the page, so turning it
   up makes the box louder without making it different.
   
   It stands out by being the one thing LIFTED off the page instead. A solid
   surface, a real shadow and a navy rail down the side: structure rather
   than colour, which still reads when the tint does not — on a phone in
   sunlight, and for anyone who does not separate red from off-white. */
/* --shadow-3, not --lift-2. The lift tokens are declared on main[data-branch]
   and the checkout renders outside it, so var(--lift-2) resolved to nothing
   and the box had no shadow at all — the one property the whole idea rests
   on. The shadow scale is on :root and is there wherever this box is. */
.samp{margin:var(--sp-6) 0;padding:var(--sp-6);border:0;border-radius:var(--r-media);
  background:var(--surface);box-shadow:var(--shadow-3);
  border-left:4px solid var(--navy)}
/* A <legend> is anchored to its fieldset's top border edge, and the browser
   cuts the box's outline behind it — which left the heading sitting in a
   notch in a rounded rectangle that never closed. Floating it puts it back
   into normal flow, inside the padding, and the box closes behind it. The
   element stays a legend, because a legend is what names a group of radios
   to a screen reader. */
.samp-l{float:left;width:100%;display:flex;flex-wrap:wrap;gap:8px var(--sp-3);align-items:baseline;
  font-size:var(--fs-xl);font-weight:500;letter-spacing:-.015em;
  color:var(--ink);padding:0;margin:0 0 var(--sp-4)}
.samp-l + *{clear:both}
/* "Included · worth about €80" is the reason to read the box, and it was
   wearing the colour this site uses for warnings and for merchandise. It is
   a thing being given, so it is green — the one colour on the page that
   means you are getting something rather than being told something. */
.samp-tag{font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--go);
  font-weight:500;background:var(--go-quiet);padding:4px 10px;border-radius:999px;line-height:1.5;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--go) 22%,transparent)}
.samp-o{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border-radius:var(--r-ctl);background:var(--surface-2);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;
  transition:box-shadow .12s ease}
.samp-o + .samp-o{margin-top:var(--sp-3)}
.samp-o:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.samp-o--on,.samp-o--on:hover{box-shadow:inset 0 0 0 2px var(--navy)}
.samp-o:has(:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.samp-o input{margin-top:2px;flex:0 0 auto;accent-color:var(--navy);width:18px;height:18px}
.samp-o b{display:block;font-weight:500;font-size:var(--fs-base);color:var(--ink);line-height:1.4}
.samp-d{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.5;text-wrap:pretty}
/* The other half of the same box: under a hundred pieces the sample is not
   included, so this one OFFERS it rather than announcing it. It was the
   quieter of the two by some way — a page-coloured panel, a bare checkbox
   and two lines of the smallest grey on the site — which read as a footnote
   about samples rather than as something to tick.

   It gets the same lift as its sibling, because they are the same decision
   at two quantities and should not look like different features. What it
   does NOT get is the green "included" badge: nothing is being given away
   here, and dressing a priced extra as a gift is the one thing this box
   must not do. */
.samp--ask{padding:var(--sp-5) var(--sp-6)}
/* the checkbox becomes a control you can see, not a mark in the margin */
.samp--ask .chk{padding:var(--sp-4);border-radius:var(--r-ctl);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--dur-focus) var(--ease)}
.samp--ask .chk:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.samp--ask .chk:has(:checked){box-shadow:inset 0 0 0 2px var(--navy)}
.samp-ask-t{font-size:var(--fs-base);font-weight:500;color:var(--ink);line-height:1.4}
.samp-s{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-4) 0 0;text-wrap:pretty}
/* where an order stands, as a strip of the states it passes through */
.ostep{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.ostep li{font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);
  padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.ostep li.on{color:#FFFFFF;background:var(--red);box-shadow:none}
.ostep li.done{color:var(--muted);background:var(--surface-2)}
.ostep li.skip{text-decoration:line-through;opacity:.6}
/* the offer's own tiers, now a mark and a sentence rather than a percentage */
.otier-p.otier-p--mark{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.opop-t--caps{text-transform:uppercase;letter-spacing:.02em;font-size:clamp(20px,2.4vw,26px)}
.opop-list{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.opop-list li{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-ctl);background:var(--red-quiet);font-size:var(--fs-sm);color:var(--ink)}
/* The product ticket is set on the band, so the offer note takes the band's
   own ink there rather than the page's. */
.pdp-sum .onote{color:var(--on-band-dim);border-top-color:color-mix(in srgb,#F4F2ED 22%,transparent)}
.pdp-sum .onote-l,.pdp-sum .onote--on .onote-v{color:var(--on-band)}

/* ---- the merchandise contact step ---------------------------------------
   Products, then what the offer gives, then the one decision to make, then
   the arithmetic. Each block is separated by a rule rather than by guessed
   whitespace, and nothing in the money column repeats what is above it. */
.onote--co{margin:0;padding:var(--sp-5) 0;border-top:0;border-bottom:1px solid var(--line)}

.samp-err{margin:calc(var(--sp-4) * -1) 0 var(--sp-5)}
.co-row{padding:var(--sp-4) 0}
.co-row .crow-n{margin-top:3px}
.co-row--total{padding-top:var(--sp-5);padding-bottom:var(--sp-3);border-top:1px solid var(--line-strong)}
/* WHAT IS INCLUDED IS NOT A CHARGE.
   Three rows reading "Included" against an empty money column made the list
   twice as long as the money in it. One block, once, in small type: the
   benefits are still named and still say what they are worth, and the column
   beside them is left to the figures that are actually being added up. */
.co-inc{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.co-inc-h{display:block;font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--red-text);margin-bottom:var(--sp-3)}
.co-inc-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.co-inc-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--sp-3);
  font-size:var(--fs-sm);line-height:1.4}
.co-inc-l li::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--red-text);transform:translateY(-2px)}
.co-inc-k{font-weight:500}
.co-inc-n{font-size:var(--fs-xs);color:var(--muted);text-wrap:pretty}
/* An answer, not an amount. Delivery and the payment terms are conditions of
   the quote, true and worth printing, and never what the eye is hunting for
   in a column of money. */
.co-row--q{font-size:var(--fs-xs);padding:var(--sp-3) 0;border-bottom:0;color:var(--muted)}
.co-row--q + .co-row--q{padding-top:0}
.co-row--q .co-row-v{font-weight:400;color:var(--muted)}
/* The gross follows the tax that produced it, so it reads as the consequence
   of the figure above rather than as a second headline. */
/* the tax and the gross are one statement, so no rule runs between them */
.co-row:has(+ .co-row--sum){border-bottom:0;padding-bottom:var(--sp-2)}
.co-row--sum{border-top:0;padding-top:var(--sp-2);padding-bottom:var(--sp-4)}
.co-row--sum .co-row-l{font-size:var(--fs-base)}
.co-row--sum .co-total{font-size:var(--fs-lg);font-weight:500}
/* THE CHECKOUT IS STILL THE BRAND.
   Stripping the header and the footer left the page without one brand
   surface on it: a white bar, a beige panel, and a navy button at the
   bottom of the form. The band is the identity's own surface and is the one
   colour in the system that never inverts, so the wordmark sits on it here
   exactly as it does at the top of every other page. */
.co-hd{background:var(--band);border-bottom:0;color:var(--on-band)}
.co-hd .brand{color:var(--on-band)}
.co-hd .brand-bar{color:var(--on-band-dim)}
.co-back{border-color:var(--on-band-dim);color:var(--on-band)}
.co-back:hover{border-color:var(--on-band);
  background:color-mix(in srgb,var(--on-band) 14%,transparent)}
/* The merchandise red, over each column's heading. A rule rather than an
   eyebrow: it says which line of business this is without adding a word
   that would then need translating five ways. */
.co-t{position:relative;padding-top:var(--sp-5)}
.co-t::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;
  background:var(--red);border-radius:2px}
/* the money, resolved onto paper */
.co-sum{background:var(--surface-2);padding:var(--sp-4) var(--sp-5) var(--sp-5);
  margin-top:var(--sp-5)}
.co-sum .co-row--total{border-top:0;padding-top:var(--sp-3)}
.co-sum .co-row--q{padding-bottom:0}
.crow-a{display:block;margin-top:4px;font-weight:400}
.co-row-v .crow-a{margin-left:0}
.co-fine{margin-top:var(--sp-5)}
.co-left .co-legal{margin-top:auto;padding-top:var(--sp-6)}
/* the VAT number's answer from VIES, under the field */
.vat-s{display:inline-flex;align-items:baseline;gap:6px}
.vat-s::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  transform:translateY(-1px);flex:none}
.vat--ok{color:var(--go)}
.vat--no{color:var(--stop)}
.vat--wait{color:var(--muted)}
.fld--vat .inp{padding-right:var(--sp-5)}

/* ---- the offer, as a ladder ---------------------------------------------
   Three benefits down the side, two thresholds across the top, a tick where
   they meet. It replaced two paragraphs saying the same thing, and is read
   rather than parsed. */
.olad{width:100%;border-collapse:collapse;margin:var(--sp-5) 0 0;text-align:left}
.olad th,.olad td{padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--line)}
.olad thead td,.olad thead th{border-bottom:1px solid var(--line-strong);padding-top:0}
/* Four columns now, not three: the band under fifty is on the table. The
   quantities are short and the row labels are not, so the label column keeps
   the larger share of what is left. */
.olad thead th{text-align:center;width:18%;vertical-align:bottom}
/* nowrap: "1-49" is a range, not a sentence, and at 320 it was breaking
   after the dash. One column's number then stood a line higher than the
   other three and the header stopped being a row again. */
.olad-m{display:block;font-size:clamp(20px,2.2vw,26px);font-weight:500;color:var(--red-text);
  line-height:1.05;letter-spacing:-.01em;white-space:nowrap}
.olad-u{display:block;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-top:3px;font-weight:400}
.olad tbody th{font-weight:400;font-size:var(--fs-sm);color:var(--ink)}
.olad tbody td{text-align:center;font-size:var(--fs-md);line-height:1}
.olad-y{color:var(--red-text)}
.olad-n{color:var(--faint)}
.olad tbody tr:last-child th,.olad tbody tr:last-child td{border-bottom:0}
.olad--pop{margin-top:var(--sp-6)}
.olad--home{margin:0;align-self:start}
.olad--home th,.olad--home td{padding:var(--sp-4) var(--sp-2)}

/* the offer on a product page: the words on the left, the ladder on the right */
.oband{display:grid;grid-template-columns:1fr minmax(320px,.9fr);gap:var(--sp-7) var(--sp-8);
  align-items:center;padding:var(--sp-7);border-radius:var(--r-card);background:var(--red-quiet)}
.oband-t{margin:var(--sp-3) 0 0;letter-spacing:-.01em}
.oband-f{margin:var(--sp-4) 0 0;max-width:52ch;text-wrap:pretty}
.olad--band{margin:0}
/* "You are here." The column the order is actually in, on the surfaces that
   know the order. A fill rather than a colour, because the ticks are already
   using colour to mean included and a second meaning on the same channel is
   how a table stops being readable. */
/* The column the order is in, marked three ways that agree: a red rule under
   its heading, the caption above, and a lift behind it.

   The lift used to be opaque white, and on the warm ground of the offer band
   that read as a card pasted over the table rather than a column of it. Worse,
   under border-collapse a browser paints a cell's background ABOVE the
   collapsed hairline, so the rules between the rows vanished for the width of
   the column and the block floated clear of the rows it belongs to.

   So it is a translucent lift now — it works on the band, on the page and in
   the popup without being brighter than any of them — and each cell redraws
   its own hairline as an inset shadow, which paints above its own background.
   A radius on every cell would clip the corners where they meet, so only the
   two ends of the column are rounded. */
.olad-here{background:color-mix(in srgb,#FFFFFF 55%,transparent)}
.olad tbody td.olad-here{box-shadow:inset 0 -1px 0 var(--line)}
.olad tbody tr:last-child td.olad-here{box-shadow:none;
  border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.olad thead th.olad-here{box-shadow:inset 0 -2px 0 var(--red);
  border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
/* Two words, and in German it is "Ihre Bestellung" — nothing narrow enough to
   promise one line in a column this size, in five languages. So it is allowed
   to wrap, evenly, and set tight enough that two lines cost little: every
   header reserves the same space for it either way, which is what keeps the
   numbers on one line with each other. */
.olad-now{display:block;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;
  color:var(--red-text);margin-top:4px;font-weight:500;text-wrap:balance;line-height:1.2}
.olad-now--off{visibility:hidden}
/* A fourth column is 63px of min-content that a 375px phone does not have,
   and an auto table will not give it back — it pushed the whole offer block
   34px past the screen. Fixed layout makes the declared widths the widths
   and lets the words wrap instead, which is what the percentages above
   always meant. Phones only: on a desktop there is room for auto to be
   right. */
@media (max-width:620px){
  .olad{table-layout:fixed}
  /* The quantities are four characters; the row labels are German compounds.
     The larger share goes to the words that need it. */
  .olad thead th{width:16%}
  .olad th,.olad td{padding:var(--sp-3) var(--sp-1)}
  .olad-m{font-size:18px}
  .olad tbody th{font-size:var(--fs-xs)}
  /* Where a word is too long for its column it is hyphenated rather than
     guillotined: every page carries its own lang, so the browser breaks
     "Logoeinrichtung" where German breaks it instead of after the
     second-to-last letter, and "Ihre Bestellung" fits a 55px column at the
     same 11px the rest of the site's micro-labels use. break-word stays
     underneath as the last resort. Nothing here goes under 11px: below that
     is where the site stops being readable, not where it gets clever. */
  .olad-now{letter-spacing:.02em}
  .olad tbody th,.olad-now{hyphens:auto;overflow-wrap:break-word}
}
/* One step further down. At 320 the columns are 42px and 18px of "1-49" is
   44 of them, so the number had nowhere to go but outside its cell. */
@media (max-width:400px){
  .olad-m{font-size:15px}
  .olad-u,.olad-now{letter-spacing:.03em}
}
.olad--band th,.olad--band td{border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent)}
/* The band stacks at 1080, not 860. Between those two the table was living
   in .9fr of a shrinking column — about 355px at a 900px window — and it
   showed: "Approval sample" broke over two lines with "per product" on a
   third, so the middle row stood twice as tall as the two beside it, and the
   marker above the live column wrapped as well. Stacked, the table has the
   whole width of the band and every label sits on one line. */
@media (max-width:1080px){.oband{grid-template-columns:1fr;padding:var(--sp-5)}}

/* ---- the quote drawer, redrawn ------------------------------------------
   Products at the top, the money pushed down to meet the total, and one
   thing in between that can be decided. Three hairlines used to stack
   under the last product — the line's own bottom border, the summary's top
   border and the offer note's — with nothing between them; there is one
   rule there now, and the summary sits against the footer rather than
   floating at the top of half a metre of empty drawer. */
.drawer-t{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.drawer-n{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
/* One scroller between a pinned header and a pinned footer: the products
   AND the money move together inside it. Two scrollers meant the money's
   natural height always won and the product list was left less than one
   product tall on a phone. */
.drawer-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.drawer-body{display:block;flex:none;overflow:visible;padding:var(--sp-4) var(--sp-6)}
.dline{padding:var(--sp-4) 0;gap:var(--sp-4)}
.dline:last-of-type{border-bottom:0}
.dline-m{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;line-height:1.5;text-wrap:pretty}
.dline-r{margin-top:var(--sp-3)}
/* the money meets the total instead of hanging under the products */
.dsum{flex:none;margin:0;padding:var(--sp-4) var(--sp-6) var(--sp-5);border-top:1px solid var(--line)}
.dsum .drow{padding:var(--sp-3) 0}
.onote--drawer{margin:0 0 var(--sp-2);padding:0 0 var(--sp-4);border-top:0;border-bottom:1px solid var(--line)}
/* the one decision in the drawer, and the only thing here shaped like a control */
.presr{display:flex;width:100%;text-align:left;gap:var(--sp-4);align-items:flex-start;justify-content:space-between;
  margin:var(--sp-4) 0 0;padding:var(--sp-4);border:0;border-radius:var(--r-ctl);cursor:pointer;
  background:var(--red-quiet);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 22%,transparent);
  font:inherit;color:var(--ink);transition:box-shadow .12s ease}
.presr:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--red) 38%,transparent)}
.presr--on{box-shadow:inset 0 0 0 2px var(--red)}
.presr-b{display:block;min-width:0}
.presr-t{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--red-text)}
.presr-g{font-style:normal;margin-right:6px}
.presr--on .presr-t{color:var(--ink)}
.presr-d{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.45;text-wrap:pretty}
.presr-a{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;flex:none}
.presr-a .num{font-weight:500}
.presr-x{font-size:var(--fs-xs);color:var(--red-text);text-decoration:underline;text-underline-offset:2px}
.presr--on .presr-x{color:var(--muted)}
.drawer-foot .dnote{color:var(--muted);text-wrap:pretty}
/* every total says what it excludes, under the figure */
.crow-sub{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--muted);letter-spacing:0;margin-top:2px}
.co-total .crow-sub,.sum-total .crow-sub{text-align:right}
/* the ticket: a setup the offer covers reads like the benefit it is */
.sum-row--good .num{color:var(--red-text);font-weight:500}

/* On a phone there is not enough height to give the products a scroller AND
   the summary a scroller: capping the summary clipped the presentation card
   off its bottom edge, which is the one thing in the drawer somebody can
   act on. So the whole drawer scrolls as one and only the total stays put. */

/* the ladder's one row that is not counted the way its columns are */
.olad-per{display:block;font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;
  color:var(--red-text);font-weight:500;margin-top:2px}
.olad-f{padding-top:var(--sp-4);font-size:var(--fs-xs);color:var(--muted);text-align:left;
  border-bottom:0;text-wrap:pretty}

/* the address check, under the email field — same shape as the VAT one */
.mail--ok{color:var(--go)}
.mail--no{color:var(--stop)}
/* Not an error, and not nothing either. A personal address is ACCEPTED — the
   form will send with it — but a company one is better, and the reader has to
   be able to tell those two facts apart at a glance. Plain ink said neither:
   the sentence looked like the same grey help text every other field carries,
   so nobody read it and nobody changed their address. Amber on an amber wash
   is the third state between "fine" and "fix this", and it is the only place
   on this form that colour is doing that job. */
.mail--warn{color:#7A4F06;background:var(--wait-quiet);
  border-radius:var(--radius-sm);padding:2px var(--sp-2);display:inline-block}
.mail--wait{color:var(--muted)}
/* The amber above is a dark ochre chosen against a white card. On the dark
   theme the card is near-black, so the same ink would disappear into it. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mail--warn{color:#E0B356}}
:root[data-theme="dark"] .mail--warn{color:#E0B356}
.mail-fix{display:block;margin-top:4px}
.mail-fix .lnk{margin-left:0;font-size:var(--fs-xs)}

.hd-sheet-link--sm{font-size:var(--fs-sm);color:var(--muted)}

/* ---- the quantity on a basket line ---------------------------------------
   One control, on the drawer and on the quote page. A stepper for the small
   corrections and a typed number for the big ones, because going from 100 to
   250 with a + button is not a quantity control, it is a punishment.

   The buttons are 34px so a thumb can hit them, and the field is sized for
   four digits — 10,000 pieces is past anything this catalogue quotes. */
/* align-self, because on the quote card this sits in a column flex and a
   stretched item made the span 603px wide for 130px of controls. */
.lqty{display:inline-flex;align-items:center;gap:var(--sp-2);align-self:flex-start;
  width:max-content;max-width:100%}
.lqty-b{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  color:var(--ink);font:inherit;font-size:var(--fs-md);line-height:1;cursor:pointer;
  transition:border-color var(--dur-focus) var(--ease),background var(--dur-focus) var(--ease)}
.lqty-b:hover:not(:disabled){border-color:var(--ink)}
.lqty-b:disabled{color:var(--faint);cursor:not-allowed}
.lqty-i{width:68px;height:34px;flex:none;text-align:center;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;
  font-size:var(--fs-sm);padding:0 var(--sp-1)}
.lqty-i:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* The native spinners duplicate the two buttons beside them and, in Safari,
   sit on top of the last digit. */
.lqty-i::-webkit-outer-spin-button,.lqty-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lqty-i{-moz-appearance:textfield;appearance:textfield}
.lqty-u{font-size:var(--fs-xs);color:var(--muted)}
/* a size run already decided this one */
.lqty--set{gap:var(--sp-2)}
.lqty--set .lqty-n{display:inline-grid;place-items:center;min-width:44px;height:34px;padding:0 var(--sp-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);
  color:var(--muted);font-size:var(--fs-sm)}
/* The drawer line is tighter than the quote card, and it drops the word:
   the control and Remove came to 256px of a 238px body and Remove fell to a
   line of its own. The drawer's own heading already counts the pieces, and
   the field keeps its label for a screen reader either way. */
.lqty--sm{gap:6px}
.lqty--sm .lqty-b{width:30px;height:30px}
.lqty--sm .lqty-i{width:56px;height:30px}
.lqty--sm .lqty-u{display:none}
.lqty--sm .lqty--set .lqty-n,.lqty--sm.lqty--set .lqty-n{height:30px}

/* ---- the quote card on a phone -------------------------------------------
   At 375 the picture took 84px of a 343 card and the padding another 32, so
   the body was left 209: the title got 71px of it beside the amount and wrapped
   to "Custom / Beanie", and Edit · Duplicate · Remove needed 220 and could not
   all fit on a line. A smaller thumbnail and a stacked heading give the body
   235px, which all three fit inside. */
@media (max-width:560px){
  .qline{grid-template-columns:64px 1fr;gap:var(--sp-3)}
  .qline-top{flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
  .qline-amt{text-align:left}
  /* The summary line has the same problem and one less column to give: the
     stepper plus Change plus Remove come to 269px of a 245px body. Left to
     wrap on its own the row broke between the two links and stranded Remove
     under a gap the spacer had opened. The control takes the whole row and
     the two links keep each other company on the next one. */
  .co-line-a>.spacer{display:none}
  .co-line-a>.lqty{flex:1 0 100%}
  /* Modifier · Dupliquer · Retirer came to 235px of a 233px body and dropped
     the last one onto a line of its own — two pixels, in the language the
     row is widest in. The three actions give up their side padding here and
     keep each other company instead. */
  /* Three actions, three equal thirds. Left to wrap they broke 2 + 1 and
     stranded the last one under a gap — and where they broke moved with the
     language: French fitted, German and Italian did not. A grid puts them on
     one row in all five, and a track that can shrink below its content keeps
     the longest word inside the card rather than outside it. */
  .qline-act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1)}
  .qline-act .btn--sm{padding-left:var(--sp-1);padding-right:var(--sp-1);
    font-size:var(--fs-xs);min-width:0}
}

/* ---- what the catalogue does not list ------------------------------------
   The same tinted panel as the volume offer, so the two read as the same kind
   of aside rather than as two competing announcements, and the heading is
   t-h3 like the offer band's: this is a note beside the catalogue, not a
   section of it. Only the button is filled. */
.offc{background:var(--red-quiet);border-radius:var(--r-panel);padding:var(--sp-7);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6) var(--sp-8);align-items:end}
.offc-c{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-3);min-width:0}
.offc-a{grid-column:2;grid-row:1;justify-self:end}
.offc-t{margin:0}
.offc-d{margin:0;max-width:62ch;text-wrap:pretty}

/* Five products, five tiles. The previous version put five 20px marks in five
   pill-shaped chips, which is the shape this site uses for FILTERS — so the
   one band whose job was "we also make these" looked like a control for
   narrowing a list. A tile with a large drawing in it cannot be mistaken for
   that, and it gives the drawing room to be recognisable. */
.offc-l{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.offc-l > li{display:flex;min-width:0}
.offc-i{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-3);text-align:center;font:inherit;font-size:var(--fs-base);color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-4) var(--sp-4);cursor:pointer;position:relative;
  transition:border-color var(--dur-focus) var(--ease),box-shadow var(--dur-focus) var(--ease),
    transform var(--dur-focus) var(--ease)}
/* The drawing sits on its own tinted disc so it reads as an object on a
   surface rather than an icon floating in a card. */
.offc-ic{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:var(--red-quiet);color:var(--red-text);flex:none}
.offc-ic svg{display:block}
.offc-n{min-width:0;overflow-wrap:break-word;line-height:1.25}
/* The arrow is the only thing that appears on hover. Everything else is
   already there, so the tile does not move under the cursor. */
.offc-go{color:var(--red-text);font-size:var(--fs-sm);opacity:0;
  transition:opacity var(--dur-focus) var(--ease)}
.offc-i:hover{border-color:var(--red-text);box-shadow:var(--lift-1);transform:translateY(-2px)}
/* the ring itself comes from the sheet's global :focus-visible */
.offc-i:hover .offc-go,.offc-i:focus-visible .offc-go{opacity:1}
@media (prefers-reduced-motion:reduce){
  .offc-i{transition:none}
  .offc-i:hover{transform:none}
}

@media (max-width:1000px){
  /* One column, and the button takes the last row: sentence, tiles, ask. */
  .offc{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .offc-a{grid-column:1;grid-row:3;justify-self:start}
  .offc-l{grid-column:1;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .offc{padding:var(--sp-5);border-radius:var(--r-card)}
  .offc-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  /* A 84px disc in a half-width tile leaves no room for the name, so the
     tile turns on its side and the drawing shrinks with it. */
  .offc-i{flex-direction:row;text-align:left;gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)}
  .offc-ic{width:44px;height:44px}
  .offc-ic svg{width:30px;height:30px}
  .offc-go{display:none}
  /* the odd one out takes the width rather than sitting alone in half of it */
  .offc-l > li:last-child{grid-column:1 / -1}
  .offc-a{justify-self:stretch}
  .offc-a .btn{width:100%;justify-content:center}
}

/* The subject chooser on the merchandise contact page. Seven pills that
   look pressable and show which one is pressed; the segmented .tabs control
   could not be used because its track is surface-2 and the section it sits
   in is surface-2. */
/* THE QUESTIONS, IN THREE SHORT COLUMNS.
   Twelve accordions in one stack is eleven hundred pixels of identical grey
   bars and no way to tell which four are yours. Three groups side by side is
   the same twelve questions at a third of the height, and the group headings
   do the work the rows cannot do for themselves. They stack on a narrow
   screen, where a column of four is short enough to scan anyway. */
.hfaq{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6) var(--sp-7);
  align-items:start;margin-top:var(--sp-5)}
.hfaq-h{margin-bottom:var(--sp-1)}
.hfaq .faq{margin-top:var(--sp-3)}
.hfaq .faq-q{font-size:var(--fs-sm);padding-right:var(--sp-6)}
.hfaq .faq-q::after{font-size:var(--fs-lg)}
@media (max-width:900px){ .hfaq{grid-template-columns:1fr;gap:var(--sp-6)} }

.htopics{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.htopic{font:inherit;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-full);
  padding:var(--sp-2) var(--sp-4);min-height:36px;
  transition:border-color var(--dur-focus) var(--ease),background-color var(--dur-focus) var(--ease),
    color var(--dur-focus) var(--ease)}
.htopic:hover{border-color:var(--line-strong)}
.htopic--on{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.htopic--on:hover{border-color:var(--navy)}

/* ---- the contact page ----------------------------------------------------
   It was off-white on off-white: a column of fields beside three identical
   white boxes, one of which apologised for not having any contact details
   in it. The colour goes where it does the most work — on the answer to
   "I do not want to fill in a form" — and the rest is given a hierarchy
   rather than a paint job. */
.ctside{display:flex;flex-direction:column;gap:var(--sp-5)}
/* the form, given edges of its own so the two columns weigh the same */
.ctf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:var(--sp-7)}
/* A segmented control: .tab--on is a white pill, and a white pill needs a
   ground that is not also white to read as chosen. */
.ctseg{display:inline-flex;flex-wrap:wrap;gap:var(--sp-1);background:var(--surface-2);
  border-radius:var(--radius-full);padding:var(--sp-1)}
.ctseg .tab{min-height:36px}
/* the navy panel */
.ctmail{background:var(--band);color:var(--on-band);border-radius:var(--r-panel);
  padding:var(--sp-7);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.ctmail .eyebrow{color:var(--on-band-dim)}
.ctmail-a{font-size:clamp(20px,2.1vw,26px);font-weight:300;letter-spacing:-.02em;
  color:var(--on-band);text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1px;overflow-wrap:anywhere;
  transition:text-decoration-color var(--dur-focus) var(--ease)}
.ctmail-a:hover{text-decoration-color:color-mix(in srgb,#F4F2ED 45%,transparent)}
.ctmail-d{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--on-band-dim);text-wrap:pretty}
/* the warm panel — .panel's own padding is sized for a full-width section */
.ctp{padding:var(--sp-6) var(--sp-7)}
.ctp .ticks{margin-top:var(--sp-4)}
/* the two short facts, side by side rather than stacked as two more boxes */
.ctrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-2) 0;border-top:1px solid var(--line)}
.ctrow-p{margin-top:var(--sp-2)}
.ctrow-l{margin-top:var(--sp-2);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.ctrow-l .lnk{margin-left:0}
@media (max-width:900px){
  .ctf{padding:var(--sp-5);border-radius:var(--r-card)}
  .ctmail{padding:var(--sp-6);border-radius:var(--r-card)}
  .ctp{padding:var(--sp-5)}
}
@media (max-width:520px){
  .ctseg{display:flex;width:100%}
  .ctseg .tab{flex:1 1 auto;text-align:center}
  .ctrow{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
}


/* 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: one line at every width, in every language.
   ---------------------------------------------------------------------------
   Making it nowrap stopped it wrapping and started it colliding. The dismiss is
   position:absolute, so the centred sentence beside it cannot see it; English
   happened to be short enough to clear it and French was not — "Voir l'offre"
   ran 17px under the ✕ on a Galaxy. Reserving padding for it would only move
   the guess, so below 620 the dismiss goes into the flow instead and the
   overlap becomes impossible rather than unlikely.

   The label on the link goes at the same width. The five languages are not the
   same length — "Voir l'offre" is 72px where "See how" is 44 — and a phone has
   no room for the longest of them beside a sentence. The chevron stays, the
   button keeps its accessible name, and the sentence is what a reader needs. */
.obar-in{flex-wrap:nowrap}
.obar-t{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){
  .obar{display:flex;align-items:center}
  .obar-in{flex:1;min-width:0;padding:7px var(--sp-2) 7px var(--sp-4);justify-content:flex-start}
  .obar-x{position:static;transform:none;flex:none;margin-right:var(--sp-3)}
  .obar-go-l{display:none}
  /* The ellipsis above was sized for a sentence that has since got longer.
     The offer now names two thresholds, and at 375 every language ran out of
     room: Spanish wanted 392px of a 234px box, so the reader was shown
     "Preparacion del logo gratis desde 50 piezas. 5% de" and the half that
     says what the second threshold gives them was simply cut off.

     The sentence takes two lines here instead. The row stays nowrap, so it is
     still sentence, chevron, dismiss in one line of boxes — only the sentence
     inside the first of them wraps — and the dismiss is in the flow at this
     width, which is what made the ellipsis necessary in the first place. */
  .obar-t{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:pretty}
  /* With the label gone an underlined chevron reads as a stray character, so
     it becomes the same round outlined control the rest of the site uses. */
  .obar-go{min-width:26px;height:26px;justify-content:center;text-decoration:none;
    border:1px solid color-mix(in srgb,#FFFFFF 45%,transparent);border-radius:var(--radius-full)}
  .obar-go:hover{background:color-mix(in srgb,#FFFFFF 15%,transparent)}
}
/* Two steps down, because the longest sentence of the five is French at 278px
   and the narrowest real screen is 320. */
@media (max-width:420px){ .obar-in{font-size:var(--fs-xs)} }
@media (max-width:360px){
  .obar-in{font-size:var(--fs-micro);padding-left:var(--sp-3)}
  .obar-x{margin-right:var(--sp-2)}
}

/* The mockup draws its own skip link, and head() emits one too, so every
   merchandise page carried two — the builder strips the mockup's from the
   static HTML but app.js puts it back the moment it boots. The one inside
   #root is the app's copy. */
#root .skip{display:none}

/* 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:480px){
  /* The light/dark toggle is the one control with a system-level equivalent —
     prefers-color-scheme still decides — so it is what gives way when the
     header runs out of room. It has to go on every phone, not only the narrow
     ones: the label on the primary button is "Quote" in English and
     "Presupuesto" in Spanish, and that alone took the header past 390, which
     is the iPhone 14/15/16. It returns above 480. */
  .pub-hd-in [data-act="theme"]{display:none}
}
@media (max-width:380px){
  .pub-hd-in{gap:var(--sp-2);padding:0 var(--sp-3)}
}

/* The garment card, rebuilt around a tier rather than a weight.
   ---------------------------------------------------------------------------
   The tier is the headline and carries the weight of the type; the
   composition is the reading line; the actual grams are a footnote, because
   only some buyers want them and none of them want them first. */
.gopt{grid-template-rows:auto auto auto}
.gopt-t{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-md);font-weight:500;letter-spacing:-.008em}
/* the qualifier — "Garment dyed", "Recycled" — is a note on the tier, not a
   second heading competing with it */
.gopt-x{font-style:normal;font-size:var(--fs-xs);font-weight:400;color:var(--muted);
  letter-spacing:0}
.gopt-m{grid-column:1;font-size:var(--fs-sm);color:var(--ink);line-height:1.4;
  margin-top:2px}
/* quiet, and last */
.gopt-w{grid-column:1;font-size:var(--fs-micro);color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:4px}
/* the rest of the range, one button, under the five that are shown */
.gopt-more{margin-top:var(--sp-3)}

/* The breadcrumb, given the same air on every page.
   ---------------------------------------------------------------------------
   Measured across the templates it was 41px clear of the band above it on the
   listings, 56px on the flat pages and ZERO on the product page — where its
   section carries no top padding, so the first line of navigation sat flush
   against the bottom edge of the red offer bar. That is the one that looked
   wrong, and it is the page most people land on.

   The product page gets the listings' 40px. The bottom is levelled to 24px
   everywhere, so the breadcrumb reads as its own band rather than as a caption
   belonging to whatever happens to be above or below it. */
.pdp-crumb{margin-top:var(--sp-8)}
.crumb{margin-bottom:var(--sp-6)}
.mph .crumb,.pdp-crumb{margin-bottom:var(--sp-6)}
/* The separator was 24% opacity — close to invisible against the page and
   doing none of the work a separator exists to do. */
.crumb-sep{color:color-mix(in srgb,var(--ink) 40%,transparent)}

/* A product name is not a caption, and four of the five languages are longer
   than English. The card title was one line with an ellipsis, which is fine for
   "Custom T-Shirt" and cuts "Camiseta de manga larga personalizada" and
   "T-shirt personnalisé à manches longues" mid-word. Two lines, then ellipsis:
   the grid stays tidy and the name survives. */
.pc-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis}

/* At the narrowest real screen — 320, the first iPhone SE — a Spanish or
   French label simply does not fit a button on one line, and .btn is nowrap,
   so instead of wrapping it pushed the whole page sideways: 347px of content
   in a 320px window on the French collection page. Below 380 a label may take
   a second line, and a word longer than the column breaks rather than
   deciding the width of the document. */
@media (max-width:380px){
  .btn{white-space:normal;min-width:0}
  body{overflow-wrap:break-word}
}

/* Two more places where a fixed nowrap meets a longer language. The card's
   spec line is hard-cut mid-word at "9 grammages", and the fact row's value
   cannot shrink because a flex child defaults to min-width:auto. */
.pc-var span{white-space:normal}
.factline{min-width:0}
.factline > *{min-width:0}

/* 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}
/* ...and in the footer that row sits on the band, which never inverts. The
   current language was painted in --ink, which on navy is the same as not
   painting it: the language you are reading was the one name you could not
   see. */
.pub-ft .mlang-row,.pub-ft .mlang-row a{color:var(--on-band-dim)}
.pub-ft .mlang-row a:hover,.pub-ft .mlang-row a[aria-current="true"]{color:var(--on-band)}

/* ---- Consent bar ------------------------------------------------------- */
/* Above the sticky buy bar (80) and the toasts (90), below the modal scrim
   (100). At 60 it sat UNDER the buy bar: on all 155 product pages the bar
   covered both consent buttons, elementFromPoint returned DIV.buybar for
   each of them, and neither Accept nor Reject could be clicked at all. */
.consent-bar{position:fixed;inset:auto 1rem 1rem auto;z-index:92;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[hidden]{display:none}
.consent-bar p{margin-bottom:.75rem;color:var(--muted)}
.consent-bar div{display:flex;gap:.5rem;flex-wrap:wrap}
/* ---------------------------------------------------------------------------
   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:92;
  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__t{margin:0;color:var(--muted);line-height:1.6}
.consent-bar__l{margin:var(--sp-3) 0 0;font-size:var(--fs-xs)}
.consent-bar__l a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-strong)}
.consent-bar__l a:hover{color:var(--navy);text-decoration-color:var(--navy)}
.consent-bar__a{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
.consent-bar__a .btn{flex:1 1 auto;justify-content:center}
@media (max-width:520px){.consent-bar{inset:auto var(--sp-4) var(--sp-4) var(--sp-4);width:auto}}
@media (max-width:520px){.consent-bar__a .btn{flex:1 1 100%}}