/* The Custom Goods Lab — storefront (T-CGL-SITE-BUILD; re-themed from the CGL logo in T-CGL-LOGO-BUILD).
   Brand colours were sampled from the original CGL logo artwork:
   red #6D1012, navy #0C1D4E, card off-white #E4E4E3, gray #8D969F (gray is used only for lines/large accents; text uses darker tints). */
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable-latin.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{
  --cgl-red:#6D1012; --cgl-red-hover:#560C0E; --cgl-navy:#0C1D4E; --cgl-card:#E4E4E3; --cgl-gray:#8D969F; --cgl-gray-ink:#545B63;
  --ink:#1A1F2B; --ink-2:#0C1D4E; --paper:#F2F2F1; --paper-2:#E4E4E3; --white:#fff;
  --muted:#4B525C; --line:#C9CED3; --accent:#6D1012; --accent-ink:#fff;
  --open-bg:#fff4c2; --open-ink:#3a3000; --error:#a1261b; --ok:#245b3a;
  --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.08);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.55;font-size:1rem}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:3px solid #0a64d6;outline-offset:2px}
/* .open notes (unused on public pages) */
.open{display:inline;background:var(--open-bg);color:var(--open-ink);border:1px dashed #b39200;border-radius:4px;padding:0 .3em;font-size:.86em;font-weight:600}
.preview-banner{background:#3a3000;color:#fff4c2;font-size:.78rem;text-align:center;padding:5px 12px;line-height:1.3}
/* header */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;gap:12px;min-height:58px}
.wordmark{text-decoration:none;display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.wordmark b{font-size:1.08rem;font-weight:800;letter-spacing:-.02em}
.wordmark .open{font-size:.62rem;align-self:flex-start;margin-top:2px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.site-nav a{display:block;text-decoration:none;padding:.5rem .75rem;border-radius:8px;font-weight:600;font-size:.95rem}
.site-nav a:hover{background:var(--paper-2)}
.site-nav a[aria-current="page"]{background:var(--paper-2)}
.nav-toggle{display:none;border:1px solid var(--line);background:var(--white);border-radius:8px;padding:.45rem .7rem;font:inherit;font-weight:600}
.site-header .header-quote{display:none;white-space:nowrap}
@media (max-width:860px){
  .nav-toggle{display:inline-block}
  .site-header .header-quote{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);display:none}
  .site-nav[data-open="true"]{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;padding:8px 16px 16px}
}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:46px;padding:.6rem 1.15rem;border-radius:999px;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--ink);cursor:pointer;font-size:1rem}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-sm{min-height:38px;padding:.35rem .9rem;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
/* hero */
.hero{padding:28px 0 36px;background:linear-gradient(180deg,var(--white),var(--paper))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;margin-bottom:.35em}
.sells{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sells li{background:var(--ink);color:#fff;border-radius:999px;padding:.4rem .9rem;font-weight:700;font-size:1.02rem}
.hero .lede{font-size:1.05rem;color:var(--muted);max-width:34em;margin-bottom:1rem}
.hero .bio{font-size:.9rem;color:var(--muted);margin-top:1rem}
/* motion stage */
.stage{position:relative;background:var(--ink);color:#fff;border-radius:20px;padding:14px;overflow:hidden}
.stage-svg{width:100%;height:auto;aspect-ratio:3/3.1;max-height:440px;margin:0 auto}
.stage-flag{position:absolute;top:10px;left:12px;font-size:.7rem;background:rgba(255,255,255,.12);border-radius:6px;padding:2px 8px}
.stage-caption{text-align:center;font-size:.9rem;margin:.25rem 0 .6rem;min-height:1.4em}
.ctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px;backdrop-filter:blur(8px)}
.ctrl button{font:inherit;font-weight:700;font-size:.9rem;color:#fff;background:transparent;border:0;border-radius:999px;padding:.45rem .85rem;cursor:pointer;min-height:38px}
.ctrl button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.ctrl button:hover{background:rgba(255,255,255,.18)}
.ctrl button[aria-pressed="true"]:hover{background:#fff}
.ctrl .ctrl-play{border:1px solid rgba(255,255,255,.35)}
/* figure parts */
#fig{transform-box:fill-box;transform-origin:50% 100%}
.jumping #fig{animation:cgl-jump .9s cubic-bezier(.3,.7,.3,1)}
.jumping #shadow{animation:cgl-shadow .9s cubic-bezier(.3,.7,.3,1)}
#shadow{transform-box:fill-box;transform-origin:50% 50%}
@keyframes cgl-jump{0%{transform:translateY(0) scale(1,1)}14%{transform:translateY(0) scale(1.06,.9)}45%{transform:translateY(-70px) scale(.96,1.05)}58%{transform:translateY(-70px) scale(1,1)}86%{transform:translateY(0) scale(1.05,.92)}100%{transform:translateY(0) scale(1,1)}}
@keyframes cgl-shadow{0%,100%{transform:scale(1);opacity:.5}45%,58%{transform:scale(.55);opacity:.2}}
[data-wear] .g-tee,[data-wear] .g-hoodie,[data-wear] .g-hat,.arm-hold,.held{display:none}
[data-wear="tee"] .g-tee,[data-wear="hoodie"] .g-hoodie{display:inline}
[data-hat="on"] .g-hat{display:inline}
[data-hold="tumbler"] .held-tumbler,[data-hold="mug"] .held-mug{display:inline}
[data-hold="tumbler"] .arm-hold,[data-hold="mug"] .arm-hold{display:inline}
[data-hold="tumbler"] .arm-r-down,[data-hold="mug"] .arm-r-down{display:none}
.held{transform-box:fill-box;transform-origin:50% 50%}
.jumping .held{animation:cgl-hold .9s ease-out}
@keyframes cgl-hold{0%,40%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.jumping #fig,.jumping #shadow,.jumping .held{animation:none!important}}
html[data-reduced="true"] .jumping #fig,html[data-reduced="true"] .jumping #shadow,html[data-reduced="true"] .jumping .held{animation:none!important}
/* sections */
.section{padding:56px 0}
.section-alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:24px}
.section-head h1,.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.lede{color:var(--muted);font-size:1.05rem}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{font-size:1.15rem}
.prod-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.prod-card .thumb{background:var(--paper-2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:14px}
.prod-card .thumb svg{height:100%;width:auto}
.prod-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-card .cat{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price{font-weight:800}
.prod-card .btn{margin-top:auto;align-self:flex-start}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.filters button{font:inherit;font-weight:700;border:2px solid var(--ink);background:var(--white);border-radius:999px;padding:.4rem 1rem;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin:.6em 0 0}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps li{counter-increment:s;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.steps li::before{content:counter(s);display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-weight:800;margin-bottom:8px}
/* footer */
.site-footer{background:var(--ink);color:#e9e9e6;padding:40px 0 24px;font-size:.92rem}
.site-footer a{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 2fr;gap:24px}
.site-footer h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:24px;padding-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
/* forms / builder */
.builder{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
.b-steps{display:grid;gap:16px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:16px 18px 18px;margin:0;min-width:0}
legend{font-weight:800;font-size:1.05rem;padding:0 6px}
legend .n{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-size:.85rem;margin-right:6px}
.hint{font-size:.85rem;color:var(--muted);display:block;margin-top:4px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:block;border:2px solid var(--line);border-radius:10px;padding:.45rem .8rem;font-weight:600;background:var(--white);font-size:.93rem}
.opt input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.opt input:focus-visible+span{outline:3px solid #0a64d6;outline-offset:2px}
.swatch span{display:flex;align-items:center;gap:6px}
.swatch i{width:18px;height:18px;border-radius:50%;border:1px solid #999;display:inline-block}
label.f{display:block;font-weight:700;font-size:.92rem;margin:10px 0 4px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{width:100%;font:inherit;font-size:1rem;border:1.5px solid #9a9a95;border-radius:8px;padding:.55rem .65rem;background:#fff;color:var(--ink)}
textarea{min-height:96px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sizes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sizes label{font-size:.8rem;font-weight:700;text-align:center;display:block}
.sizes input{text-align:center;padding:.45rem .2rem}
.total{font-weight:800;margin-top:8px}
.err{color:var(--error);font-size:.86rem;font-weight:600;display:block;min-height:0}
.preview-panel{position:sticky;top:76px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.preview-panel h2{font-size:1.1rem}
.pv-canvas{background:var(--paper-2);border-radius:10px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pv-canvas svg{width:92%;height:92%}
.side-toggle{display:flex;gap:6px;margin:10px 0}
.side-toggle button{flex:1;font:inherit;font-weight:700;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:.4rem;cursor:pointer}
.side-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.summary{font-size:.88rem;margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.summary dt{font-weight:700}
.summary dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.notice{border:2px solid #3a3000;background:var(--open-bg);color:var(--open-ink);border-radius:var(--radius);padding:16px 18px}
.notice h2{font-size:1.15rem}
.error-summary{border:2px solid var(--error);border-radius:var(--radius);padding:12px 16px;background:#fff;color:var(--error)}
.error-summary ul{margin:.3em 0 0;padding-left:1.2em}
.art-thumb{max-width:120px;max-height:120px;border:1px solid var(--line);border-radius:8px;margin-top:8px;background:#fff}
@media (max-width:960px){.builder{grid-template-columns:1fr}.preview-panel{position:static}}
@media (max-width:860px){
  .hero{padding:16px 0 28px}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .grid-3,.grid-4,.steps,.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid-3,.grid-4,.steps,.footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.15rem}
  .sells li{font-size:.95rem;padding:.35rem .75rem}
  .hero .lede{font-size:.98rem;margin-bottom:.8rem}
  .row{grid-template-columns:1fr}
  .sizes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .btn{min-height:44px;padding:.5rem 1rem}
}

/* ===== Home hero rev2: full-bleed set, transparent nav, thin headline, glass selector ===== */
body.home{background:#f4f6f9}
.hx{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;color:#fff;isolation:isolate;
  --tee:#c8553d;--hoodie:#33584a;--hat:#1f2b3a;--tumbler:#d5d9de;--mug:#f3f1ec}
.hx-scene,.hx-veil{position:absolute;inset:0;width:100%;height:100%}
.hx-scene{z-index:0}
.hx-veil{z-index:2;pointer-events:none;background:
  radial-gradient(ellipse 55% 30% at 50% 46%,rgba(18,38,68,.20),rgba(18,38,68,0) 72%),
  linear-gradient(180deg,rgba(10,25,50,.18),rgba(10,25,50,0) 22%,rgba(10,25,50,0) 75%,rgba(10,25,50,.12))}
.hx .g-tee,.hx .g-hoodie,.hx .g-hat,.hx .hold,.hx .hu-item,.hx .hd-item,.hx .hu-sl-tee,.hx .hu-sl-hoodie{display:none}
.hx[data-item="tee"] .g-tee,.hx[data-item="hat"] .g-tee,.hx[data-item="tumbler"] .g-tee{display:inline}
.hx[data-item="hoodie"] .g-hoodie,.hx[data-item="mug"] .g-hoodie{display:inline}
.hx[data-item="hat"] .g-hat{display:inline}
/* fix1 D-HERO-004: held item raised beside the head on wide screens, held low at the hip on phones */
.hx[data-item="tumbler"] .hold-up,.hx[data-item="mug"] .hold-up{display:inline}
.hx[data-item="tumbler"] .hu-tumbler,.hx[data-item="tumbler"] .hd-tumbler,.hx[data-item="mug"] .hu-mug,.hx[data-item="mug"] .hd-mug{display:inline}
.hx[data-item="tumbler"] .hu-sl-tee,.hx[data-item="mug"] .hu-sl-hoodie{display:inline}
.hx[data-item="tumbler"] .arm-r,.hx[data-item="mug"] .arm-r,.hx[data-item="mug"] .sl-r{display:none}
.hx[data-item="hat"]{--tee:#e9e4da}
.hx[data-item="tumbler"]{--tee:#2c3e55}
.hx[data-item="mug"]{--hoodie:#b9ad98}
.hx-fig-in{transition:opacity .22s ease,transform .22s ease;transform-box:fill-box;transform-origin:50% 100%}
.hx.is-swapping .hx-fig-in{opacity:.25;transform:translateY(-6px)}
.hx-nav{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;gap:36px;padding:26px clamp(20px,4.5vw,64px)}
.hx-brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:-.01em;font-size:1.05rem;text-shadow:0 1px 12px rgba(10,30,60,.25)}
.hx-links{display:flex;gap:28px;margin-right:auto}
.hx-links a{color:#fff;text-decoration:none;font-weight:400;font-size:.95rem;opacity:.92;text-shadow:0 1px 10px rgba(10,30,60,.3)}
.hx-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.hx-cta{color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.9);border-radius:999px;padding:.6rem 1.5rem;font-size:.95rem;font-weight:500;white-space:nowrap;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.hx-cta:hover{background:rgba(255,255,255,.2)}
.hx-center{position:absolute;z-index:4;left:0;right:0;top:31%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px}
.hx-title{font-weight:300;font-size:clamp(2.7rem,6.6vw,6.2rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 .45em;max-width:12.5em;text-shadow:0 2px 40px rgba(12,34,66,.35),0 1px 3px rgba(12,34,66,.18)}
.hx-bar{display:flex;align-items:center;gap:4px;padding:7px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  box-shadow:0 10px 40px rgba(16,40,76,.18),inset 0 1px 0 rgba(255,255,255,.35);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.hx-bar-label{color:rgba(255,255,255,.72);font-size:1.05rem;font-weight:300;padding:0 18px 0 16px;white-space:nowrap}
.hx-bar button{font:inherit;font-size:1.08rem;font-weight:400;color:#fff;background:transparent;border:1px solid transparent;border-radius:999px;padding:.72rem 1.55rem;cursor:pointer;transition:background .25s,box-shadow .25s,color .25s;text-shadow:0 1px 8px rgba(12,34,66,.25)}
.hx-bar button:hover{background:rgba(255,255,255,.14)}
.hx-bar button[aria-pressed="true"]{background:rgba(255,255,255,.62);color:#14304f;text-shadow:none;border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 28px rgba(255,255,255,.65),0 6px 20px rgba(16,40,76,.18)}
.hx-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hx-line{margin:1.1rem 0 0;font-size:.95rem;font-weight:400;max-width:40em;line-height:1.5;text-shadow:0 1px 14px rgba(12,34,66,.55),0 0 2px rgba(12,34,66,.35)}
.hx-foot{position:absolute;z-index:4;left:0;right:0;bottom:10px;text-align:center;font-size:.68rem;color:rgba(40,55,75,.55);margin:0;letter-spacing:.02em}
.hx-title .br-d{display:inline}
.hx-mlabel{display:none;font-size:.8rem;font-weight:400;color:rgba(255,255,255,.85);margin:0 0 8px;text-shadow:0 1px 10px rgba(12,34,66,.5)}
.preview-note{font-size:.8rem;color:var(--muted);padding-top:14px}
@media (prefers-reduced-motion:reduce){.hx-fig-in,.hx-bar button,.hx-cta{transition:none!important}.hx.is-swapping .hx-fig-in{opacity:1;transform:none}}
@media (max-width:720px){
  .hx{min-height:0}
  .hx-nav{padding:18px 18px;gap:12px}
  .hx-links{display:none}
  .hx-brand{margin-right:auto;font-size:.98rem}
  .hx-cta{padding:.5rem 1.05rem;font-size:.88rem}
  .hx-center{top:17%}
  .hx-title{font-size:clamp(2.6rem,12.4vw,3.4rem);line-height:1.04;max-width:8.2em}
  .hx-bar{flex-wrap:wrap;justify-content:center;gap:2px;padding:5px;max-width:100%}
  .hx-bar-label{display:none}
  .hx-bar button{font-size:.93rem;padding:.6rem .78rem}
  .hx-line{font-size:.88rem;max-width:22em;margin-top:.9rem}
  .hx-mlabel{display:block}
  .hx-title .br-d{display:none}
}

/* ===== fix1 (T-CGL-SITE-FIX1): legibility (D-HERO-001) + held-item placement (D-HERO-004) ===== */
.hx-veil{background:
  radial-gradient(ellipse 66% 34% at 50% 45%,rgba(20,38,64,.50),rgba(20,38,64,.42) 42%,rgba(20,38,64,.18) 74%,rgba(20,38,64,0) 100%),
  linear-gradient(180deg,rgba(10,25,50,.10),rgba(10,25,50,0) 22%,rgba(10,25,50,0) 75%,rgba(10,25,50,.10))}
.hx-title{text-shadow:0 0 2px rgba(12,30,56,.55),0 0 6px rgba(12,30,56,.45),0 2px 34px rgba(12,34,66,.40)}
.hx-navgrp{display:flex;align-items:center;gap:26px;margin-right:auto;padding:.5rem 1.2rem;border-radius:999px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.75);box-shadow:0 4px 18px rgba(16,40,76,.10);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.hx-navgrp .hx-links{margin-right:0}
.hx-brand,.hx-links a{color:#10233b;text-shadow:none}
.hx-links a{opacity:1;font-weight:500}
.hx-cta{color:#10233b;font-weight:600;background:rgba(255,255,255,.80);border-color:#fff;box-shadow:0 4px 18px rgba(16,40,76,.12)}
.hx-cta:hover{background:#fff}
.hx-line{color:#10233b;text-shadow:none;font-weight:500;padding:.5rem 1.15rem;border-radius:999px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 24px rgba(16,40,76,.10);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.hx-bar-label{color:rgba(255,255,255,.9);text-shadow:0 0 2px rgba(12,30,56,.6),0 0 6px rgba(12,30,56,.4)}
.hx-bar button{text-shadow:0 0 2px rgba(12,30,56,.6),0 0 6px rgba(12,30,56,.4)}
.hx-bar button[aria-pressed="true"]{text-shadow:none}
.hx-mlabel{text-shadow:0 0 2px rgba(12,30,56,.7),0 0 8px rgba(12,30,56,.5)}
.hx .hold-down{display:none!important}
.hx[data-item="hat"]{--tee:#a3aab2}
.hx-brand,.hx-cta{white-space:nowrap}
@media (max-width:720px){
  .hx-veil{background:
    radial-gradient(ellipse 90% 30% at 50% 30%,rgba(20,38,64,.40),rgba(20,38,64,.30) 50%,rgba(20,38,64,.10) 80%,rgba(20,38,64,0) 100%),
    linear-gradient(180deg,rgba(10,25,50,.10),rgba(10,25,50,0) 22%)}
  .hx-navgrp{padding:.45rem .9rem}
  .hx-brand{font-size:.9rem}
  .hx-cta{font-size:.86rem;padding:.5rem .95rem}
  .hx-line{border-radius:18px;padding:.55rem .9rem}
  .hx-center{top:15.5%}
  .hx .hold-up{display:none!important}
  .hx[data-item="tumbler"] .hold-down,.hx[data-item="mug"] .hold-down{display:inline!important}
  .hx[data-item="tumbler"] .arm-r,.hx[data-item="mug"] .arm-r,.hx[data-item="mug"] .sl-r{display:inline}
}

/* ===== fix2 (T-CGL-SITE-FIX2): readable inactive pills; mobile head/hat clear of the headline ===== */
.hx-bar{background:rgba(255,255,255,.70);border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 24px rgba(16,40,76,.10);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.hx-bar-label{color:#3a4d66;text-shadow:none}
.hx-bar button{color:#10233b;font-weight:500;text-shadow:none}
.hx-bar button:hover{background:rgba(16,35,59,.08)}
.hx-bar button[aria-pressed="true"]{background:#10233b;color:#fff;border-color:#10233b;box-shadow:0 4px 14px rgba(16,35,59,.28)}
.hx-bar button:focus-visible{outline:2px solid #10233b;outline-offset:2px}
@media (max-width:720px){
  /* figure ~14% larger on phones so the head + hat sit between the nav and the headline, feet still on the floor */
  .hx-fig{transform:translate(629px,67.6px) scale(1.71,1.463)}
  .hx-center{top:17.8%}
  .hx-title{font-size:clamp(2.2rem,10.4vw,2.8rem);line-height:1.02;max-width:6.6em;margin-bottom:.28em}
  .hx-mlabel{margin-bottom:4px}
  .hx-line{margin-top:.6rem;font-size:.85rem;padding:.45rem .85rem}
  /* a touch more scrim on phones: the larger figure puts more light clothing behind the headline */
  .hx-veil{background:
    radial-gradient(ellipse 92% 30% at 50% 27%,rgba(20,38,64,.47),rgba(20,38,64,.36) 50%,rgba(20,38,64,.12) 80%,rgba(20,38,64,0) 100%),
    linear-gradient(180deg,rgba(10,25,50,.10),rgba(10,25,50,0) 22%)}
}

/* ===== rev3 (T-CGL-SITE-BUILD rev3): drawn hero scene (superseded by the hero video, rules kept inert);
   video layer; jump interaction (collapse bar -> jump -> apex cut -> land -> expand). ===== */
.hx{--skin-a:#c99a7a;--skin-b:#dcae8e;--skin-c:#b3846a;--hair:#2b211c;--top:#c8392f;--pants:#34476b;--shoe:#f4f5f7;--hatc:#e0a526;
  --itemc:#f3f1ec;--itemart:#c8392f;--art1:rgba(0,0,0,.26);--art2:rgba(255,255,255,.34);--build:.95}
.hx[data-item="hoodie"]{--skin-a:#6b4636;--skin-b:#80573f;--skin-c:#56382a;--hair:#17110f;--top:#1d6b4a;--pants:#2b2f37;--shoe:#e9ebee;--itemc:#e6e9ed;--itemart:#1d6b4a;--build:1.08}
.hx[data-item="hat"]{--skin-a:#e6bc9c;--skin-b:#f0c9aa;--skin-c:#d2a283;--hair:#7a3b1d;--top:#2b3f6b;--pants:#6f6450;--shoe:#f4f5f7;--hatc:#e0a526;--itemc:#a9cdea;--itemart:#2b3f6b;--build:.92}
.hx[data-item="tumbler"]{--skin-a:#b07a55;--skin-b:#c48c64;--skin-c:#956240;--hair:#2a1d17;--top:#5a2d6e;--pants:#23252b;--shoe:#f4f5f7;--itemc:#d9503f;--itemart:#fff3e6;--build:.98}
.hx[data-item="mug"]{--skin-a:#8f5d45;--skin-b:#a46d51;--skin-c:#784b36;--hair:#1f1714;--top:#0f6f78;--pants:#2a3550;--shoe:#f4f5f7;--itemc:#f3f1ec;--itemart:#0f6f78;--build:1.03}
.hx .fig-build{transform:translate(100px,0) scaleX(var(--build)) translate(-100px,0)}
.hx .p-tee,.hx .p-hoodie,.hx .p-hat,.hx .hr,.hx .p-hoodie-only,.hx .hu-item,.hx .hd-item,.hx .ha-sl{display:none}
.hx[data-item="tee"] .p-tee,.hx[data-item="hat"] .p-tee,.hx[data-item="tumbler"] .p-tee,.hx[data-item="mug"] .p-tee{display:inline}
.hx[data-item="hoodie"] .p-hoodie,.hx[data-item="hoodie"] .p-hoodie-only,.hx[data-item="hoodie"] .ha-sl-hoodie{display:inline}
.hx[data-item="tee"] .ha-sl-tee,.hx[data-item="hat"] .ha-sl-tee,.hx[data-item="tumbler"] .ha-sl-tee,.hx[data-item="mug"] .ha-sl-tee{display:inline}
.hx[data-item="hat"] .p-hat{display:inline}
.hx[data-item="tee"] .hr-long,.hx[data-item="hoodie"] .hr-fade,.hx[data-item="hat"] .hr-pony,.hx[data-item="tumbler"] .hr-curly,.hx[data-item="mug"] .hr-buzz{display:inline}
.hx[data-item="tee"] .hu-mug,.hx[data-item="hat"] .hu-mug,.hx[data-item="mug"] .hu-mug,.hx[data-item="hoodie"] .hu-tumbler,.hx[data-item="tumbler"] .hu-tumbler,
.hx[data-item="tee"] .hd-mug,.hx[data-item="hat"] .hd-mug,.hx[data-item="mug"] .hd-mug,.hx[data-item="hoodie"] .hd-tumbler,.hx[data-item="tumbler"] .hd-tumbler{display:inline}
.hx .hold2-down{display:none}
@media (max-width:720px){.hx .hold2-up{display:none}.hx .hold2-down{display:inline}}
/* old video layer rules (inert) */
.hx-vid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s ease}
.hx-vid.is-ready{opacity:1}
.hx-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.hx-vid video.is-front{visibility:visible}
.hx-vid video.is-fade{visibility:visible;opacity:0;transition:opacity .3s linear}
.hx-vid video.is-fade.is-in{opacity:1}
/* jump choreography (timings measured from the reference, see private reference-timing.md) */
.hx-title,.hx-mlabel{transition:opacity .233s ease}
.hx.is-titleoff .hx-title,.hx.is-titleoff .hx-mlabel{opacity:0;transition:opacity .134s linear}
.hx.is-jumping .hx-bar button{cursor:progress}
/* SVG-only fallback jump (used only when the video cannot play) */
@keyframes hx-svgjump{0%{transform:none}30%{transform:translateY(10px) scaleY(.96)}55%{transform:translateY(-34px)}75%{transform:translateY(-10px)}100%{transform:none}}
.hx.is-svgjump .hx-fig-in{animation:hx-svgjump 1.1s ease-in-out}
@media (prefers-reduced-motion:reduce){.hx-bar,.hx-bar button,.hx-bar-label,.hx-title,.hx-mlabel{transition:none!important}.hx.is-svgjump .hx-fig-in{animation:none}.hx-vid video.is-fade{transition:opacity .3s linear!important}}
/* rev3: while the headline is hidden mid-jump the text veil eases off, so the person reads clearly; it is back at full strength before the headline returns */
.hx-veil{transition:opacity .2s ease}
.hx.is-titleoff .hx-veil{opacity:.3;transition:opacity .134s linear}

/* ===== FIX3 (T-CGL-SITE-FIX3) ===== */
/* D-R3-006: lay out JS-only UI before first paint (html.js set by a 1-line head script) */
html:not(.js) .js-only{display:none}
#filter-status{min-height:1.6em}
html.f-apparel [data-cat]:not([data-cat="apparel"]),html.f-drinkware [data-cat]:not([data-cat="drinkware"]),html.f-headwear [data-cat]:not([data-cat="headwear"]){display:none}
/* D-R3-001: re-timed choreography (frame-measured against the reference): collapse 100 ms, title fade 200 ms linear,
   re-expand ~133 ms (4 frames at 30 fps). Linear timing so the visible motion spans the whole duration.
   The text veil now stays constant during the jump (it only changes with the headline in rev3). */
.hx-title,.hx-mlabel{transition:opacity .133s linear}
.hx.is-titleoff .hx-title,.hx.is-titleoff .hx-mlabel{transition:opacity .2s linear}
.hx.is-titleoff .hx-veil{opacity:1}
.hx.is-svgjump .hx-fig-in{animation-duration:.966s}
/* D-R3-002: hero caption on opaque ink (measured >= 4.5:1 on rendered pixels) */
.hx-foot{color:#2a3a50}
/* D-R3-004: phones - headline box starts lower so every head clears it by >= 16 px; slightly smaller type keeps its bottom edge where it was */
@media (max-width:720px){
  .hx-center{top:19.8%}
  .hx-title{font-size:clamp(1.95rem,8.95vw,2.4rem)}
}
@media (prefers-reduced-motion:reduce){.hx-bar,.hx-bar button,.hx-bar-label,.hx-title,.hx-mlabel,.hx.is-collapsed .hx-bar,.hx.is-collapsed .hx-bar .is-off{transition:none!important}}

/* ===== FIX4 (T-CGL-SITE-FIX4) ===== */
/* D-R3R-008: the item bar collapses/re-expands with transform + opacity only (no width, padding or gap changes, so no layout shift).
   The glass background is drawn by .hx-bar-bg: two end caps that slide inward and a middle that scales in X, painted opaque
   inside one opacity group so overlaps never double up. The chosen pill slides to the centre; the other pills and the label fade. */
.hx-bar{position:relative;isolation:isolate;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hx-bar>button,.hx-bar>.hx-bar-label{position:relative;z-index:1}
.hx-bar-bg{position:absolute;inset:-1px;z-index:0;pointer-events:none;opacity:.74}
.hx-bar-bg i{position:absolute;top:0;bottom:0;background:#fff;box-shadow:0 6px 22px rgba(16,40,76,.16)}
.hx-bar-bg .l{left:0;width:46px;border-radius:999px 0 0 999px;clip-path:inset(-40px 0 -40px -40px)}
.hx-bar-bg .r{right:0;width:46px;border-radius:0 999px 999px 0;clip-path:inset(-40px -40px -40px 0)}
.hx-bar-bg .m{left:22px;right:22px;transform-origin:50% 50%}
.hx-bar-bg i,.hx-bar>button{transition:transform .3s linear,background .1s,box-shadow .1s,color .1s}
.hx-bar>button,.hx-bar>.hx-bar-label{transition-property:transform,opacity,visibility,background,box-shadow,color}
.hx-bar>.is-off{transition:opacity .1s linear .2s,visibility 0s linear 0s,transform .3s linear}
.hx.is-collapsed .hx-bar-bg i,.hx.is-collapsed .hx-bar>button{transition:transform .333s linear,background .1s,box-shadow .1s,color .1s}
.hx.is-collapsed .hx-bar-bg .l{transform:translateX(var(--capdx,0px))}
.hx.is-collapsed .hx-bar-bg .r{transform:translateX(calc(-1 * var(--capdx,0px)))}
.hx.is-collapsed .hx-bar-bg .m{transform:scaleX(var(--ms,1))}
.hx.is-collapsed .hx-bar>.is-chosen{transform:translateX(var(--dx,0px))}
.hx.is-collapsed .hx-bar>.is-off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .067s linear,visibility 0s linear .067s}
/* D-R3R-002 / J5: headline fades over 5 frames (f11 -> f16) and returns with the bar (9 frames) */
.hx-title,.hx-mlabel{transition:opacity .3s linear}
.hx.is-titleoff .hx-title,.hx.is-titleoff .hx-mlabel{transition:opacity .167s linear}
@media (prefers-reduced-motion:reduce){.hx-bar-bg i,.hx-bar>button,.hx-bar>.hx-bar-label,.hx.is-collapsed .hx-bar-bg i,.hx.is-collapsed .hx-bar>button,.hx.is-collapsed .hx-bar>.is-off{transition:none!important}}
/* D-R3R-003 / D-R3R-006: phones - whole composition 72 css px lower so the higher jump keeps the head clear of the nav */
@media (max-width:720px){
  .hx-fig{transform:translate(629px,152.9px) scale(1.71,1.463)}
  .hx-scene ellipse[cx="800"][cy="934"]{transform:translateY(85.3px)}
  .hx-center{top:calc(19.8% + 72px)}
  /* the lower figure puts the shoes behind the footer note: give it its own light backing */
  .hx-foot{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);background:rgba(255,255,255,.88);padding:3px 12px;border-radius:12px}
}
.hx.is-svgjump .hx-fig-in{animation-duration:1.1s}
/* D-R3R-004: both videos stay rendered (the back one hidden behind the front by stacking, not by visibility), so the landing
   video's pre-seeked frame is already decoded and composited at the cut, so no stale frame can flash */
.hx-vid video{visibility:visible;z-index:1}
.hx-vid video.is-front{z-index:2}
.hx-vid video.is-fade{z-index:3}
/* FIX4 D-R3R-009 follow-up: "Request a Quote" is longer than the old header label. On narrow phones keep the header to the
   2-line wordmark height whatever font is showing (no wrap to 3-4 lines, no overflow at 320 px, no shift when Manrope swaps in) */
@media (max-width:860px){.site-header .header-inner{height:58px;min-height:0}}
@media (max-width:440px){
  .site-header .header-inner{gap:8px}
  .site-header .wordmark b{font-size:.95rem}
  .site-header .header-quote{min-height:38px;padding:.4rem .75rem;font-size:.84rem}
  .site-header .nav-toggle{padding:.4rem .55rem}
}
@media (max-width:370px){
  .site-header .header-inner{gap:6px}
  .site-header .wordmark b{font-size:.86rem}
  .site-header .wordmark .open{font-size:.56rem}
  .site-header .header-quote{padding:.35rem .6rem;font-size:.78rem}
  .site-header .nav-toggle{padding:.35rem .45rem;font-size:.85rem}
}

/* ===== FIX5 (T-CGL-SITE-FIX5) ===== */
/* D-R3R2-001: frosted glass again, white labels. The glass is two fixed half-width clip boxes per layer: a blur layer (.g, only
   backdrop-filter) and, painted after both blur halves, a dark see-through tint layer (.t). Each half holds a half-pill that
   reaches 48px past the centre, so the blur has real pixels on both sides of the centre seam and the tint never doubles.
   Collapse = the half-pills slide toward the centre (transform only); the clip boxes never move or resize.
   No ancestor of the glass has opacity, filter or clip-path, so the blur samples the hero video behind the bar. */
.hx-bar{isolation:auto}
.hx-bar-bg{opacity:1}
.hx-bar-bg>b{position:absolute;top:0;bottom:0;overflow:hidden}
.hx-bar-bg>.gl,.hx-bar-bg>.tl{left:0;right:50%}
.hx-bar-bg>.gr,.hx-bar-bg>.tr{left:50%;right:0}
.hx-bar-bg>b>i{box-shadow:none;clip-path:none;background:transparent;box-sizing:border-box}
.hx-bar-bg>.gl>i,.hx-bar-bg>.tl>i{left:0;right:-48px;border-radius:999px 0 0 999px}
.hx-bar-bg>.gr>i,.hx-bar-bg>.tr>i{left:-48px;right:0;border-radius:0 999px 999px 0}
/* blur only: in headless/software compositing a chained saturate()/brightness() halved the frame rate (measured), so the
   darkening is in the tint */
.hx-bar-bg>.g>i{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hx-bar-bg>.t>i{background:rgba(9,17,32,.37);border:1px solid rgba(255,255,255,.36)}
.hx-bar-bg>.tl>i{border-right:0}
.hx-bar-bg>.tr>i{border-left:0}
.hx.is-collapsed .hx-bar-bg>.gl>i,.hx.is-collapsed .hx-bar-bg>.tl>i{transform:translateX(var(--capdx,0px))}
.hx.is-collapsed .hx-bar-bg>.gr>i,.hx.is-collapsed .hx-bar-bg>.tr>i{transform:translateX(calc(-1 * var(--capdx,0px)))}
.hx-bar-label{color:#fff;text-shadow:0 1px 2px rgba(6,14,28,.45)}
.hx-bar button{color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(6,14,28,.45)}
.hx-bar button:hover{background:rgba(255,255,255,.12)}
/* active pill: deeper glass with a soft white glow ring (reference technique), white label */
.hx-bar button[aria-pressed="true"]{background:rgba(10,22,40,.22);color:#fff;border-color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(6,14,28,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 16px 3px rgba(214,236,255,.6),inset 0 0 10px rgba(255,255,255,.14)}
.hx-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* D-R3R2-002: phones - shoes visible at rest. The figure is 2.54% smaller about its head top (the head, hat and the 72 css px
   jump apex stay exactly where they were; the feet come up ~20 css px, above the viewport bottom). The headline block moves up
   6 px so the card keeps its gap above the held item, and the foot note becomes a short corner note left of the shoes
   (the full wording stays on desktop; the burned-in video plate says "drawn stand-in, not real footage"). */
@media (max-width:720px){
  .hx-fig{transform:translate(633.34px,153.05px) scale(1.6666,1.4258)}
  .hx-scene ellipse[cx="800"][cy="934"]{transform:translateY(63.6px)}
  .hx-center{top:calc(19.8% + 66px)}
  .hx-foot{left:6px;right:auto;bottom:8px;transform:none;width:auto;max-width:90px;text-align:left;padding:3px 8px;line-height:1.3;border-radius:8px}
  .hx-foot .ft-x{display:none}
}

/* ===== T-CGL-LOGO-BUILD / GOLIVE: logo, brand theme, real hero video ===== */
a{color:var(--cgl-navy)} a:hover{color:var(--cgl-red)}
.btn-primary{background:var(--cgl-red);border-color:var(--cgl-red);color:#fff}
.btn-primary:hover{background:var(--cgl-red-hover);border-color:var(--cgl-red-hover);color:#fff}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{border-color:var(--cgl-navy);color:var(--cgl-navy)}
.site-header{border-bottom:3px solid var(--cgl-red)}
.header-inner{min-height:64px;padding:4px 0}
.wordmark{flex-direction:row;align-items:center;gap:10px;color:var(--cgl-navy)}
.wm-logo{display:block;height:56px;width:auto}
.site-nav a{color:var(--cgl-navy)}
.eyebrow{color:var(--cgl-red)}
.sells li,.filters button[aria-pressed="true"],.side-toggle button[aria-pressed="true"],.opt input:checked+span{background:var(--cgl-navy);border-color:var(--cgl-navy);color:#fff}
.filters button,.side-toggle button{border-color:var(--cgl-navy);color:var(--cgl-navy)}
.steps li::before,legend .n{background:var(--cgl-red)}
.section-alt{background:var(--cgl-card);border-color:var(--line)}
.site-footer{background:var(--cgl-navy);color:var(--cgl-card)}
.ft-logo{margin:0 0 8px}.ft-logo-img{display:block;width:120px;height:80px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{border-color:var(--cgl-gray-ink)}
.notice-soon{background:#fff;border:2px solid var(--cgl-red);border-left-width:6px;border-radius:10px;padding:12px 16px;margin:12px 0 16px;color:var(--ink)}
.q-off{border:0;padding:0;margin:0;min-width:0}
.q-off:disabled{opacity:.6}
@media (max-width:480px){.wordmark b{display:none}}
/* hero: approved looping video over its own still (the still is also the reduced-motion / no-video view) */
.hx-media{position:absolute;inset:0;z-index:1;pointer-events:none;background:#dfe4ea}
.hx-still img,.hx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-video{opacity:0;transition:opacity .2s linear}
.hx.is-playing .hx-video{opacity:1}
.hx.is-still .hx-video{display:none}
@media (prefers-reduced-motion:reduce){.hx-video{display:none}}
.hx-cta{background:var(--cgl-red);color:#fff;border-color:rgba(255,255,255,.85)}
.hx-cta:hover{background:var(--cgl-red-hover);color:#fff}
.hx-brand{display:flex;align-items:center;gap:8px;color:var(--cgl-navy)}
.hx-links a{color:var(--cgl-navy)}
.hx-logo{display:block;height:34px;width:auto;margin:-6px 0}
@media (max-width:720px){.hx-logo{height:30px;margin:-6px 0}}
/* glass selector: keep the dark smoked glass, tinted toward the logo navy */
.hx-bar-bg>.t>i{background:rgba(8,19,52,.40)}
.hx-bar button[aria-pressed="true"]{background:rgba(12,29,78,.30)}
.hx-foot{color:#1A1F2B;background:rgba(255,255,255,.82);left:auto;right:12px;bottom:10px;width:auto;max-width:none;padding:2px 10px;border-radius:10px;transform:none}
.hx-brand picture,.wordmark picture{flex:none;display:block}
/* hero legibility over the real video (rendered-pixel checked, see BRAND-PALETTE.md) */
.hx-title{text-shadow:0 0 3px rgba(8,19,52,.75),0 0 10px rgba(8,19,52,.55),0 2px 34px rgba(8,19,52,.45)}
.hx-bar-bg>.t>i{background:rgba(8,19,52,.56)}
.hx-mlabel{background:rgba(8,19,52,.55);color:#fff;padding:2px 10px;border-radius:999px;text-shadow:none}
@media (max-width:720px){.hx-brand span{display:none}}
.site-nav a.btn-primary,.site-nav a.btn-primary:hover{color:#fff;background:var(--cgl-red)}
.site-nav a.btn-primary:hover{background:var(--cgl-red-hover)}
.site-nav a.btn-primary[aria-current="page"]{color:#fff;background:var(--cgl-navy)}