/* Badobo Creations - styles
   White and clean, with the three primary colors used on purpose:
     BLUE   = actions (buttons, links, selected things)
     GREEN  = the "upload your design" path
   RED    = attention (alerts) and the "we design it" path
     YELLOW = highlight only (a marker behind a key word; never small text)
   System fonts. Soft shadows. Scroll reveal. */

:root {
  --accent: #1f4fe0;               /* blue: the main action color */
  --accent-dark: #1a42bd;
  --accent-text: #1f4fe0;          /* blue for text on white (passes contrast) */
  --accent-hover: #1a42bd;
  --accent-deep: #14308f;
  --accent-rgb: 31, 79, 224;       /* same blue as --accent, as plain numbers (for see-through tints) */
  --red: #e5322d;
  --red-rgb: 229, 50, 45;
  --green: #1f9d57;
  --green-rgb: 31, 157, 87;
  --green-text: #167a44;           /* green for small text on white (passes contrast) */
  --red-text: #c62822;             /* red for small text on white (passes contrast) */
  --yellow: #ffc21a;
  --bg-rgb: 255, 255, 255;         /* same as --bg, as plain numbers */
  --slide-time: .7s;               /* effect settings: js/settings.js and admin.html change these */
  --slide-dist: 3rem;
  --rise-dist: 22px;
  --ease: ease;
  --accent-soft: rgba(var(--accent-rgb), .08);
  --glow: rgba(16, 20, 24, .20);   /* soft neutral shadow color */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --ink: #101418;
  --muted: #5b6472;
  --line: #e3e6ec;
  --line-strong: #cdd3dd;
  --radius: 16px;
  --wrap: 1120px;
  --font: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(var(--accent-rgb), .18); }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
[hidden] { display: none !important; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--soft { background: var(--surface-2); border-block: 1px solid var(--line); }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}
.eyebrow--red { color: var(--red-text); }
.eyebrow--green { color: var(--green-text); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 40rem; margin-top: 1rem; }
.skip {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* a thin strip of the brand colors across the very top */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 55%, var(--red) 55% 70%, var(--yellow) 70% 85%, var(--green) 85% 100%);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; padding-top: 4px; }

/* Logo: three dots (blue, red, yellow) + the name. Other versions are in logo-options.html:
   add class "logo--dot" (one blue dot after the name) or "logo--letters" (colored syllables) to the <a class="logo">. */
.logo { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); }
.logo-mark { display: inline-flex; align-items: center; gap: 4px; }
.logo-mark i { display: block; width: .62rem; height: .62rem; border-radius: 50%; }
.logo-mark i:nth-child(1) { background: var(--accent); }
.logo-mark i:nth-child(2) { background: var(--red); }
.logo-mark i:nth-child(3) { background: var(--yellow); }
.logo-name b { font-weight: 500; color: var(--muted); }
.logo-name .ld { display: none; }
.logo--dot .logo-mark, .logo--letters .logo-mark { display: none; }
/* the full stop becomes a round dot, big enough to read as a color */
.logo--dot .logo-name .ld, .logo--letters .logo-name .ld {
  display: inline-block; width: .3em; height: .3em; border-radius: 50%; margin: 0 .14em 0 .05em;
  overflow: hidden; text-indent: -9999px; white-space: nowrap;
}
.logo--dot .logo-name .ld { background: var(--accent); }
.logo--letters .logo-name .ld { background: var(--yellow); }
.logo--letters .s1 { color: var(--accent); }
.logo--letters .s2 { color: var(--red); }
/* the first time someone opens the site in a visit, the dots bounce in and the name fades in (html gets .logo-intro from a tiny script in <head>) */
@keyframes logo-drop {
  0%   { opacity: 0; transform: translateY(-16px) scale(.6); }
  55%  { opacity: 1; transform: translateY(3px) scale(1.1); }
  78%  { transform: translateY(-2px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes logo-fade { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.logo-intro .logo-mark i { animation: logo-drop .65s cubic-bezier(.2, .8, .2, 1) both; }
.logo-intro .logo-mark i:nth-child(2) { animation-delay: .12s; }
.logo-intro .logo-mark i:nth-child(3) { animation-delay: .24s; }
.logo-intro .logo-name { animation: logo-fade .5s ease .4s both; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--muted); transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .btn, .nav .btn:hover { color: #fff; }
/* the page you are on ("Upload your design" or "Have us design it") is highlighted as a blue pill */
.nav a[href="upload.html"][aria-current="page"], .nav a[href="request.html"][aria-current="page"] {
  background: var(--accent); color: #fff; padding: .5rem 1rem; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 20, 24, .12), 0 6px 16px -8px rgba(var(--accent-rgb), .55);
}
.nav-toggle {
  display: none; background: #fff; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: .45rem .8rem; font: inherit; font-weight: 600; cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--accent); color: #fff; border: 2px solid var(--accent);
  padding: .8rem 1.4rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: .98rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 20, 24, .12), 0 6px 16px -8px rgba(var(--accent-rgb), .55);
  transition: background .15s, transform .15s, box-shadow .2s, border-color .15s;
}
.btn:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16), 0 10px 22px -10px rgba(var(--accent-rgb), .6);
}
.btn:active { transform: translateY(0); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent-text); color: var(--accent-text); box-shadow: none; }
.btn--small { padding: .5rem 1rem; font-size: .88rem; }

/* ---------- Home: hero ---------- */
.hero, .page-head { position: relative; overflow: hidden; isolation: isolate; }
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.hero::before, .page-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background: linear-gradient(180deg, var(--surface-2) 0%, rgba(var(--bg-rgb), 0) 100%);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .wrap > * { animation: rise .7s ease both; }
.hero .wrap > :nth-child(2) { animation-delay: .08s; }
.hero .wrap > :nth-child(3) { animation-delay: .16s; }
.hero .wrap > :nth-child(4) { animation-delay: .24s; }
/* Home headline font: Matcha Style, from the "fonts" folder. TO CHANGE IT: put a new font file in "fonts" and change the file name below. */
@font-face {
  font-family: "Matcha Style";
  src: url("../fonts/matcha-style.woff") format("woff"), url("../fonts/Matcha%20Style.otf") format("opentype"), url("../fonts/Matcha%20Style.ttf") format("truetype");   /* the small web version first (about a third of the size) */
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Home headline: "Let's make your ___ unforgettable." The word after "your" drives in, parks, drives off (js/headline.js). */
.hero h1.hero-title {
  font-family: "Matcha Style", var(--font);
  font-weight: 400; font-size: clamp(2.2rem, 11vw, 6.4rem); line-height: 1; letter-spacing: -0.015em;  /* sized so "unforgettable." always fits on small phones */
}
/* always three lines: "LET'S MAKE" / "YOUR ___" / "UNFORGETTABLE." so nothing else moves when the word changes */
.hero-title .ht-line { display: block; }
/* the headline is for looking at: normal arrow cursor, and it can't be highlighted */
.hero-title { cursor: default; -webkit-user-select: none; user-select: none; }
/* "Pick your piece" heading uses the same font as the headline */
#products .section-head h2 { font-family: "Matcha Style", var(--font); font-weight: 400; letter-spacing: 0; }
.hero-title em { display: block; font-style: italic; }
/* "your ___" with the yellow underline; the underline stretches to fit each word */
.ht-your { position: relative; display: inline-block; white-space: nowrap; }
.ht-your::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em; border-radius: 1em; background: var(--yellow);
}
/* the "lane" the words drive through. No hard edges: words fade and motion-blur in and out instead of being cut off */
.ht-lane {
  position: relative; display: inline-block; vertical-align: baseline; text-align: left;
  transition: width .7s cubic-bezier(.65, 0, .35, 1);
}
.ht-sizer { visibility: hidden; white-space: nowrap; }
.ht-word { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity, filter; backface-visibility: hidden; }
.ht-word:not(.is-on) { opacity: 0; }
.hero .lead { font-size: 1.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero-actions .btn { padding: 1rem 1.8rem; font-size: 1.05rem; }
/* tagline under the headline */
.tagline { margin-top: 1.25rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }

/* Fields flagged by the form validator (aria-invalid set in main.js) */
[aria-invalid="true"] { border-color: var(--red) !important; }
fieldset[aria-invalid="true"] { outline: 1.5px solid var(--red); outline-offset: 6px; border-radius: 8px; }

/* ---------- Home: path cards ---------- */
.paths-section { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }
/* home page: the two path cards float up over the bottom of the header scene, with a deep soft shadow */
.hero--scene + .paths-section { position: relative; z-index: 2; margin-top: -1.75rem; perspective: 1100px; }
/* the cards rise into place one after the other (js/cards.js), lift and tilt toward the mouse, and drift a little as you scroll */
.hero--scene + .paths-section .paths.reveal { opacity: 1; transform: none; }
.hero--scene + .paths-section .path {
  box-shadow: 0 2px 4px rgba(16, 20, 24, .08), 0 18px 40px -12px rgba(16, 20, 24, .3), 0 40px 80px -30px rgba(16, 20, 24, .4);
  transform-style: preserve-3d; will-change: transform; backface-visibility: hidden;
  transition: box-shadow .45s ease;
}
.js .hero--scene + .paths-section .path:not(.is-in) { opacity: 0; transform: translateY(60px) scale(.94) rotateX(8deg); }
.js .hero--scene + .paths-section .path.is-in:not(.is-live) { transition: opacity .8s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease; }
.hero--scene + .paths-section .path:hover {
  box-shadow: 0 0 0 4px rgba(var(--path-rgb), .16), 0 30px 60px -16px rgba(16, 20, 24, .38), 0 60px 100px -36px rgba(16, 20, 24, .5);
}
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* Pointer spotlight on interactive cards (--mx / --my set in main.js) */
.path, .product, .step { --mx: 50%; --my: 0%; }
.path::after, .product::after, .step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .07), transparent 70%);
  opacity: 0; transition: opacity .25s;
}
.path:hover::after, .product:hover::after, .step:hover::after { opacity: 1; }

.path {
  --path-rgb: var(--red-rgb); --path-text: var(--red-text);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px; overflow: hidden;
  text-decoration: none; border: 2px solid rgb(var(--path-rgb)); background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 20, 24, .06), 0 10px 28px -20px rgba(16, 20, 24, .25);
  transition: transform .2s, box-shadow .2s;
}
.path--primary { --path-rgb: var(--green-rgb); --path-text: var(--green-text); }
.path:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(var(--path-rgb), .14), 0 22px 44px -22px rgba(16, 20, 24, .35); }
.path .tag { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--path-text); }
.path h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.path p { color: var(--muted); }
.path .btn { margin-top: auto; }
.path > p:last-of-type { margin-bottom: 1rem; }  /* the space above the button lives on the text, so the button can sit at the bottom: both cards line up */

/* ---------- Home: products ---------- */
.section-head { margin-bottom: 2rem; }
.products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.product {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: .85rem;
  text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 1px 2px rgba(16, 20, 24, .05);
}
.product:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 36px -20px rgba(16, 20, 24, .35); }
.product .art {
  aspect-ratio: 1 / 1.05; border-radius: 12px; padding: .6rem;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #fbfcfe 0%, #e6eaf1 85%);
}
.product .art svg { width: 100%; height: 100%; transition: transform .3s; filter: drop-shadow(0 8px 10px rgba(16, 20, 24, .18)); }
.product:hover .art svg { transform: scale(1.05) rotate(-1deg); }

/* "Pick your piece": no cards, just cardboard boxes sitting on the ground with a soft shadow under each.
   On hover a box hops up (its shadow shrinks and fades, so it feels lifted) and opens in 5 stop-motion frames (js/boxes.js).
   The 15 pictures sit side by side in images/box-sprite-smooth.webp, with empty space around each one. */
.products--boxes .product {
  background: none; border: 0; box-shadow: none; padding: .5rem .25rem 1rem;
  align-items: center; text-align: center; overflow: visible;
}
.products--boxes .product::after { display: none; }
.products--boxes .product:hover { transform: none; border: 0; box-shadow: none; }
.products--boxes .art--box { position: relative; width: 100%; aspect-ratio: 546 / 362; padding: 0; background: none; overflow: visible; }
.products--boxes .art--box::before {   /* the shadow on the ground */
  content: ""; position: absolute; left: 14%; right: 6%; bottom: 4%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 28, 15, .42), rgba(40, 28, 15, .18) 55%, transparent);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease;
}
.box-anim {
  position: relative; width: 100%; height: 100%; max-width: 300px; margin-inline: auto;
  background: url("../images/box-sprite-smooth.webp?v=2") 0 0 / 1500% 100% no-repeat;
  transform: scale(var(--sc)); transform-origin: 50% 90%;
  will-change: transform; backface-visibility: hidden;
}
/* hover: the box pops forward in place. js/boxes.js moves it smoothly every frame: it grows, lifts, drifts a few pixels
   with the cursor and leans slightly toward it. Its shadow shifts the other way, like real light. */
.products--boxes .art--box::before {
  transform: translateX(var(--shx, 0px)) scale(var(--shs, 1.25), calc(var(--shs, 1.25) * .9));
  opacity: var(--sho, 1); transition: none;
}
.products--boxes { gap: 2.25rem; padding: 3rem 0 1.5rem; align-items: start; }
.products--boxes .product { --sc: 1.38; --rot: 0deg; position: relative; transition: opacity .45s ease, filter .45s ease; }
.products--boxes .product:hover, .products--boxes .product:focus-visible { z-index: 3; }
.products--boxes .product h3 { font-size: 1.15rem; position: relative; z-index: 1; }
@media (max-width: 720px) { .products--boxes { gap: 1.5rem .5rem; padding-top: 1.5rem; } .products--boxes .product { --sc: 1.2; } }

/* the next picture of the opening box, blended in on top so the flaps glide smoothly (js/boxes.js) */
.box-tween { position: absolute; inset: 0; background: inherit; background-size: 1500% 100%; opacity: 0; pointer-events: none; }

/* what's inside a box (the T-shirt for now). Layers, back to front: the box picture, the shirt, then the box's front
   walls and front flaps (images/box-front.webp, shown only while the box is fully open), so the shirt sits INSIDE the box.
   After the box opens, the shirt glides up out of it and floats with a slow, soft bob; moving away sinks it back in
   before the flaps close (js/boxes.js). .box-mouth just hides anything below the bottom of the box. */
.box-mouth { position: absolute; inset: 0; pointer-events: none; clip-path: polygon(-60% -250%, 160% -250%, 160% 78%, 81.9% 78.5%, 32.8% 89.5%, 16.8% 73%, -60% 73%); }
.box-item {
  position: absolute; left: 21%; top: -72%; width: 58%; height: auto;   /* where it floats: out of the box, just above the flaps */
  filter: drop-shadow(0 8px 10px rgba(16, 20, 24, .16));
  transform: translateY(134%) rotate(4deg) scale(.9);                  /* where it waits: down inside the box */
  transform-origin: 50% 95%;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.box-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.product.is-open .box-front { opacity: 1; }
.box-mouth { visibility: hidden; }
.product.is-open .box-mouth { visibility: visible; }   /* the shirt only exists while the box is fully open */
.product.is-out .box-item { transform: translateY(0) rotate(-2deg) scale(1); }
/* the "deck" of colored shirts behind the white one: it comes out with it and fans open like a hand of cards
   (each shirt's angle --a, sideways shift --dx, height --dy and small delay --d are set on it in index.html) */
.box-item--deck {
  filter: drop-shadow(0 4px 6px rgba(16, 20, 24, .18));
  /* going back in: the fan folds while it sinks (the sideways spread goes first, so nothing pokes out of the box) */
  transition: transform .7s cubic-bezier(.4, 0, .2, 1) .18s, translate .4s cubic-bezier(.4, 0, .6, 1), rotate .55s cubic-bezier(.4, 0, .6, 1);
}
.product.is-out .box-item--deck {
  transform: translateY(0) scale(.92);
  translate: var(--dx) var(--dy); rotate: var(--a);
  /* coming out: the stack rises and fans open at the same time, in one smooth motion. The tilt starts early (the
     shirts pivot around their bottom edge, so the tops swing out above the box), and the sideways spread starts a
     little later, once the bottoms are clear of the box walls */
  transition: transform .8s cubic-bezier(.22, 1, .36, 1),
    rotate .85s cubic-bezier(.45, 0, .25, 1) calc(.12s + var(--d)),
    translate .7s cubic-bezier(.45, 0, .25, 1) calc(.32s + var(--d));
}
.box-item:not(.box-item--deck) { transition: transform .7s cubic-bezier(.22, 1, .36, 1) .3s; }
.product.is-out .box-item:not(.box-item--deck) { transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.product.is-out .box-mouth { animation: item-bob 2.6s ease-in-out .75s infinite alternate; }
@keyframes item-bob { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -7px; rotate: 1.2deg; } }

/* "Pick your piece": bigger, slides in when you reach it, and slides away while the cursor is over the boxes
   (that space is kept free for the clothes that will pop out of the boxes later) */
#products .section-head.reveal { opacity: 1; transform: none; }
#products .section-head h2 {
  display: inline-block; font-size: clamp(2.8rem, 6.5vw, 5rem);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .6s ease, filter .6s ease;
}
.js #products .section-head:not(.in) h2 { opacity: 0; transform: translateX(-80px); filter: blur(8px); }
#products:has(.products--boxes .product:hover) .section-head h2,
#products:has(.products--boxes .product:focus-visible) .section-head h2 { opacity: 0; transform: translateX(-60px); filter: blur(8px); }
/* waiting boxes (js/boxes.js): the boxes start up just under the Path 1 / Path 2 cards, shaking now and then to invite
   a hover or a scroll, then fall down into their places. --up is how far up they wait (set by js/boxes.js). */
.products--boxes.drop-ready.reveal { opacity: 1; transform: none; }     /* the row is already on screen up top */
.products--boxes .art--box { transform-origin: 50% 90%; }
.product.is-up .art--box, .product.is-falling .art--box { z-index: 4; }
.product.is-up .art--box { transform: translateY(var(--up, 0px)); animation: box-hop 2.8s var(--sd, 0s) infinite; cursor: pointer; }
/* waiting: a quick little hop with a soft squash on landing (and just a hint of a tilt), then a rest */
@keyframes box-hop {
  0%, 58%, 100% { translate: 0 0; scale: 1 1; rotate: 0deg; animation-timing-function: ease-out; }
  61% { translate: 0 2px; scale: 1.04 .95; rotate: 0deg; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }   /* crouch */
  68% { translate: 0 -16px; scale: .98 1.03; rotate: -1.2deg; animation-timing-function: cubic-bezier(.6, 0, .9, .5); } /* up */
  75% { translate: 0 0; scale: 1.05 .94; rotate: 0deg; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }      /* land */
  80% { translate: 0 -6px; scale: .99 1.01; rotate: .6deg; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }  /* small hop */
  85% { translate: 0 0; scale: 1.02 .98; rotate: 0deg; animation-timing-function: ease-out; }
  89% { translate: 0 0; scale: 1 1; rotate: 0deg; }
}
.products--boxes .product h3 { transition: opacity .45s ease; }
.products--boxes .product .btn { transition: background .15s, transform .15s, box-shadow .2s, border-color .15s, opacity .45s ease; }
.product.is-up h3, .product.is-up .btn, .product.is-falling h3, .product.is-falling .btn { opacity: 0; }
#products.boxes-waiting .section-head h2 { opacity: 0; transform: translateX(-80px); filter: blur(8px); }
.products--boxes .product h3 { margin-top: .4rem; }
.products--boxes .product .btn { align-self: center; margin-top: .4rem; }
@media (max-width: 720px) { .products--boxes .product:last-child .art--box { max-width: calc(50% - .5rem); margin-inline: auto; } }

.product .art--more { font-size: 3rem; font-weight: 300; color: var(--green-text); }
.product h3 { font-size: 1.05rem; }
.product p { color: var(--muted); font-size: .88rem; margin-top: .3rem; }
.product .btn { margin-top: auto; align-self: flex-start; padding: .5rem 1rem; font-size: .85rem; }
.product > div:nth-child(2) { flex: 1; }

/* ---------- Home: steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; }
.step {
  counter-increment: step; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.step:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 16px 32px -22px rgba(16, 20, 24, .3); }
.step::before {
  content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; margin-bottom: 1rem;
}
.step:nth-child(2)::before { background: var(--red); }
.step:nth-child(3)::before { background: var(--yellow); color: var(--ink); }
.step p { color: var(--muted); margin-top: .5rem; }
.step strong { color: var(--ink); }

.band {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); border: 0;
  color: #fff; border-radius: 28px; padding: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
}
.band h2 { max-width: 28rem; }
.band .actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Home: See our work ---------- */
.section-head .lead { margin-top: .75rem; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.work-tile { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.work-photo {
  aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius); overflow: hidden; object-fit: cover;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 38%, #fbfcfe 0%, #e6eaf1 85%);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.work-photo span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.work-tile:hover .work-photo { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 36px -20px rgba(16, 20, 24, .35); }
.work-tile figcaption { font-weight: 600; font-size: .95rem; }
.work-tile--quote {
  justify-content: center; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.work-tile--quote blockquote { margin: 0; font-size: 1.1rem; font-weight: 600; }
.work-tile--quote figcaption { color: var(--muted); font-weight: 400; }

/* ---------- Home: Contact us ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; flex-direction: column; gap: .15rem; }
.contact-list span { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.contact-list a { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover, .thanks a:hover { color: var(--accent-text); }
.thanks a { color: var(--accent-text); font-weight: 600; }
.contact-box { position: relative; }
#contact { overflow-x: clip; }  /* the form slides in from the right without ever causing a sideways scrollbar */
/* contact card: no border, no edge; the fields sit straight on the section (their own input borders stay) */
.contact-box .form-card { border: 0; box-shadow: none; background: transparent; padding: 0; }
/* no top padding, and the heading uses the exact h2 size/line-height, so "Prefer we reach out?" sits level with "Contact us" */
.contact-box .form-note { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.when { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.when legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .6rem; }
.when-pick { margin-top: .75rem; }
input[type="datetime-local"] {
  font: inherit; color: var(--ink); width: 100%; padding: .8rem .95rem; border: 1.5px solid var(--line-strong);
  border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
input[type="datetime-local"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding: clamp(2.25rem, 5vw, 3.5rem) 0 1.5rem; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.page-head .btn--small { margin-bottom: 1.25rem; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field > label, .field > .label { font-weight: 600; font-size: .92rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  font: inherit; color: var(--ink); width: 100%;
  padding: .8rem .95rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #8a93a3; }
select option { background: #fff; color: var(--ink); }
input:hover, select:hover, textarea:hover { border-color: #9aa4b5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
textarea { min-height: 150px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checks { border: 0; padding: 0; margin-inline: 0; min-width: 0; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.checks legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .5rem; float: left; width: 100%; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span {
  display: inline-block; padding: .55rem 1.05rem; border: 1.5px solid var(--line-strong); border-radius: 999px;
  font-weight: 600; font-size: .92rem; cursor: pointer; background: #fff; transition: all .15s;
}
.check:hover span { border-color: var(--accent-text); transform: translateY(-1px); }
.check input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.check input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.req { color: var(--red-text); }

.filebox {
  position: relative;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 2px dashed var(--line-strong); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.filebox:hover, .filebox.drag { border-color: var(--accent); background: var(--accent-soft); }
.filebox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
.filebox .pick { background: var(--accent); color: #fff; padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .88rem; }
.filebox .drop { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.filebox .drop-text { font-weight: 600; font-size: .92rem; }
.filebox .name { color: var(--muted); font-size: .88rem; word-break: break-all; }
.error { color: var(--red-text); font-size: .88rem; min-height: 1.1em; margin-top: .4rem; }
.form-error { font-weight: 600; margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid rgba(229, 50, 45, .4); border-radius: 12px; background: rgba(229, 50, 45, .06); color: var(--red-text); }

.form-card { border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.25rem); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 20, 24, .05), 0 18px 40px -28px rgba(16, 20, 24, .3); }
.form-note { font-family: var(--font); color: var(--ink); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 1.4rem; }
.narrow { max-width: 720px; padding-bottom: 4rem; }
.form-card .btn { margin-top: .5rem; }

/* thank-you messages are green: green means "done, it worked" */
.thanks { border: 1.5px solid var(--green); background: rgba(var(--green-rgb), .07); border-radius: 20px; padding: 1.75rem; }
.thanks h2 { font-size: 1.6rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem; }
.thanks h2::before {
  content: "\2713"; display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 1.05rem; font-weight: 800;
}
.thanks .btn { margin-top: 1.25rem; }
.thanks strong { color: var(--ink); }
.notice {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: 12px; background: rgba(255, 194, 26, .16); border: 1px solid rgba(255, 194, 26, .7);
  color: #5c4300; font-size: .9rem;
}

/* ---------- Upload studio ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-bottom: 4rem; }
.stage {
  position: sticky; top: 92px; border-radius: 28px; padding: 1rem; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 36%, #f4f6fa 0%, #dde2ea 92%);
  box-shadow: 0 1px 2px rgba(16, 20, 24, .05), 0 24px 50px -30px rgba(16, 20, 24, .4);
}
.stage svg { width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
/* Front / Back toggle, sits above the shirt */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(100%, 300px); margin: .15rem auto 1rem; padding: 4px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line-strong);
}
.seg-opt { position: relative; display: block; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s;
}
.seg-opt:hover span { color: var(--ink); }
.seg-opt input:checked + span { background: var(--accent); color: #fff; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.seg .n {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px;
  font-style: normal; font-size: .75rem; background: rgba(16, 20, 24, .08); color: var(--ink);
}
.seg-opt input:checked + span .n { background: rgba(255, 255, 255, .28); color: #fff; }
.seg .n[hidden] { display: none; }
.stage .caption { text-align: center; color: var(--muted); font-size: .85rem; padding: .25rem 0 .5rem; }
.stage .caption.side-caption { color: var(--ink); font-weight: 600; font-size: .95rem; }
.design { cursor: grab; touch-action: none; outline: none; } /* only the artwork captures touch, so the page can still scroll over the garment */
.design.dragging { cursor: grabbing; }

/* add-another button + list of designs on the side being shown */
.add-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.add-row .filebox { flex: 1 1 260px; }
.add-another { white-space: nowrap; align-self: center; }
.add-another:disabled { opacity: .45; cursor: not-allowed; }
.design-list { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.design-list[hidden] { display: none; }
.design-item {
  display: flex; align-items: center; gap: .55rem; max-width: 220px; padding: .35rem .85rem .35rem .4rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.design-item:hover { border-color: var(--accent-text); }
.design-item.active { border-color: var(--accent); background: var(--accent-soft); }
.design-item:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.design-item .thumb { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; background: #e4e7ec; flex: none; }  /* light grey, so white artwork still shows */
.design-item .thumb--tile { display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .6rem; font-weight: 700; }
.design-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the x that removes a design: shows when you hover or focus the chip (always shown on touch screens) */
.design-chip { position: relative; }
.design-x {
  position: absolute; top: -.4rem; right: -.4rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 20, 24, .15); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s, background .15s, color .15s, border-color .15s;
}
.design-x svg { width: .7rem; height: .7rem; }
.design-chip:hover .design-x, .design-chip:focus-within .design-x { opacity: 1; transform: none; }
.design-x:hover { background: var(--red); border-color: var(--red); color: #fff; }
.design-x:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; opacity: 1; }
@media (hover: none) { .design-x { opacity: 1; transform: none; } }

.step-block { margin-bottom: 1.75rem; }
.step-block h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font-size: 1.05rem; }
.step-block h3 b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85rem; }
/* upload page steps 1 to 4 use the four brand colors in order: blue, red, yellow, green */
.step-block:nth-of-type(2) h3 b { background: var(--red); }
.step-block:nth-of-type(3) h3 b { background: var(--yellow); color: var(--ink); }
.step-block:nth-of-type(4) h3 b { background: var(--green); }
.studio .lead { margin-top: .6rem; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-block; padding: .55rem 1.05rem; border: 1.5px solid var(--line-strong); border-radius: 999px;
  font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .15s; background: var(--surface);
}
.pill:hover span { border-color: var(--accent-text); transform: translateY(-1px); }
.pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }

.swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch span {
  display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(16, 20, 24, .2); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px transparent; transition: box-shadow .15s, transform .15s;
}
.swatch:hover span { transform: scale(1.08); }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-text); }
.swatch input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 4px; }
.color-name { margin-top: .6rem; font-size: .9rem; color: var(--muted); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1rem; }
.controls label { font-weight: 600; font-size: .9rem; }
.controls input[type="range"] { flex: 1 1 160px; accent-color: var(--accent); }
.tip { color: var(--muted); font-size: .85rem; margin-top: .6rem; }

/* ---------- [TBD] placeholders: always visible, highlighted on request ---------- */
.tbd { color: var(--accent-text); font-weight: 600; }
.show-ph [data-ph] { background: #fff3a8; outline: 2px dotted #c9a700; outline-offset: 2px; color: #3a3000; border-radius: 4px; }


/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 2.5rem 0; color: var(--muted); font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-footer .lines { display: flex; flex-direction: column; gap: .25rem; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.site-footer a { text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Scroll reveal (only when JS has added .js to <html>) ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--rise-dist)); transition: opacity var(--slide-time) var(--ease), transform var(--slide-time) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* Contact form: fields slide in from the right (same .7s ease as .reveal) FIRST; main.js then types the heading */
.js .slide-right { opacity: 0; transform: translateX(var(--slide-dist)); transition: opacity var(--slide-time) var(--ease), transform var(--slide-time) var(--ease); }
.js .slide-right.in { opacity: 1; transform: none; }
/* heading waits invisibly (its height is already reserved by the hidden text) until the slide has finished */
.tw-wait [data-tw-rest] { visibility: hidden; }
/* while typing, untyped letters keep their space (hidden, not removed), so nothing jumps; without JS the full text just shows */
.typing [data-tw-rest] { visibility: hidden; }
.typing [data-tw-done] { border-right: 2px solid var(--accent-text); margin-right: -2px; }  /* subtle caret, removed when finished */

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* 5 cards: three on the first row, two wider ones on the second (no orphan) */
  .products { grid-template-columns: repeat(6, 1fr); }
  .product { grid-column: span 2; }
  .product:nth-child(n+4) { grid-column: span 3; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
  .studio { grid-template-columns: 1fr; }
  .stage { position: static; }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem; box-shadow: 0 18px 30px -20px rgba(16, 20, 24, .25);
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: .75rem; text-align: center; border-bottom: 2px solid var(--accent); }
  .nav a[href="upload.html"][aria-current="page"], .nav a[href="request.html"][aria-current="page"] { margin-top: .5rem; padding: .8rem 1rem; border-bottom: 0; }
  .paths, .steps, .row { grid-template-columns: 1fr; }
  /* 2 columns: the fifth card spans the full last row */
  .products { grid-template-columns: repeat(2, 1fr); }
  .product, .product:nth-child(n+4) { grid-column: auto; }
  .product:last-child { grid-column: 1 / -1; }
  .band { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .slide-right { opacity: 1; transform: none; }
}


/* ---- 3D garment viewer (upload page) ---- */
.view3d { display: block; width: 100%; aspect-ratio: 400 / 440; touch-action: pan-y; cursor: grab; border-radius: 18px; outline: none; user-select: none; -webkit-user-select: none; }
.view3d.grabbing { cursor: grabbing; }
.view3d.over-design { cursor: move; }
.view3d:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.view-tools { display: flex; justify-content: center; gap: .5rem; padding: .35rem 0 .5rem; }
.view-tools button {
  min-width: 2.4rem; height: 2.4rem; padding: 0 .9rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--ink); background: #fff; border: 1px solid var(--line-strong); cursor: pointer;
}
.view-tools button:hover { border-color: var(--accent-text); background: var(--accent-soft); }
.view-tools button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
/* the flat drawing keeps working as a hidden helper; it is only shown if 3D cannot start */
.flat-engine { position: absolute; left: -10000px; top: 0; width: 400px; height: 440px; opacity: 0; pointer-events: none; overflow: hidden; }
.stage.flat .flat-engine { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; overflow: visible; }
.stage.flat .view3d, .stage.flat .view-tools, .stage.flat #drag-hint { display: none; }

/* ---- Upload page: design size (Custom size / Popular size) ---- */
.size-panel { margin-top: 1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.size-panel .controls { margin-top: .9rem; }
.size-panel .tip { margin-top: .75rem; }
.size-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.size-tabs button {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 0 .7rem; margin-bottom: -1px;
  font: inherit; font-weight: 700; font-size: .98rem; color: var(--muted); background: none; border: 0;
  border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s;
}
.size-tabs button svg { width: 1.25rem; height: 1.25rem; }
.size-tabs button:hover { color: var(--ink); }
.size-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.size-tabs button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
.size-help { font-size: .92rem; margin-bottom: .75rem; }
.size-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.size-fields .field { margin-bottom: 0; }
.size-fields label { color: var(--muted); }
.size-now { margin-top: .6rem; font-size: .9rem; color: var(--muted); }

/* ---- Upload page: size guide (standard print sizes on the selected garment) ----
   Computers: a slim column to the left of the 3D shirt. Phones: a bar under the shirt that opens when tapped. */
@media (min-width: 1101px) {
  .studio { grid-template-columns: 190px minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.75rem; }
  .size-guide { position: sticky; top: 92px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .studio { grid-template-areas: "stage panel" "guide panel"; }
  .studio .stage { grid-area: stage; position: static; }
  .studio-panel { grid-area: panel; }
  .size-guide { grid-area: guide; }
}
@media (max-width: 960px) {
  .size-guide { order: 1; }
  .studio-panel { order: 2; }
}
.size-guide { padding: .85rem .8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); min-width: 0; }
.size-guide summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-weight: 700; font-size: .9rem; letter-spacing: -0.01em;
}
.size-guide summary::-webkit-details-marker { display: none; }
.size-guide summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.size-guide[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.size-guide summary:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; border-radius: 6px; }
.size-guide[open] summary { margin-bottom: .75rem; }
.size-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem .5rem; }
.size-ref { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.size-ref figcaption { display: flex; flex-direction: column; align-items: center; margin-bottom: .2rem; line-height: 1.2; }
.size-ref figcaption b { font-size: .82rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.size-ref figcaption span { font-size: .68rem; color: var(--muted); }
.size-ref svg { width: 100%; max-width: 84px; height: auto; filter: drop-shadow(0 4px 6px rgba(16, 20, 24, .14)); }
/* phones and tablets: three across, a little bigger */
@media (max-width: 1100px) {
  .size-guide-grid { grid-template-columns: repeat(3, 1fr); }
  .size-ref svg { max-width: 110px; }
  .size-ref figcaption b { font-size: .95rem; }
  .size-ref figcaption span { font-size: .75rem; }
}


/* ---------- Home header scene: teal sky, the real road from the photo, and the Wear Works truck ----------
   The truck faces left and stays in place; the road slides to the right (with motion blur) and the wheels turn.
   --s is the size of the whole scene (1 = the photo's own size). Speeds: change the seconds in the "animation" lines (smaller = faster). */
.hero--scene {
  --s: .88;
  --tw: calc(600px * var(--s));                       /* van width */
  --road: calc(92px * var(--s));
  --side: calc(137px * var(--s));
  --ground: calc(var(--road) + var(--ov));
  --ov: 1.75rem;                                      /* how far the two path cards float up over the road */
  background: linear-gradient(180deg, #2f7fd0 0%, #4a95dc 22%, #6caee6 45%, #92c5ee 68%, #b7daf4 88%, #c4e1f6 100%);   /* clear sky blue */
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: calc(var(--ground) + 1rem + 20px * var(--s));   /* room for the scenery above the hedge */
}
.hero--scene::before { display: none; }
.hero--scene .lead, .hero--scene .tagline { color: #0d1f25; }
.hero-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* plain asphalt under the road picture, where the path cards sit */
.hero-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ov);
  background: linear-gradient(180deg, #3e3f40 0%, #38393b 100%);   /* asphalt, same as the road picture */
}
.scene-road { position: absolute; left: 0; right: 0; }
.scene-road {
  --tile: calc(692px * var(--s));
  bottom: var(--ov); height: var(--road);
  background: url("../images/scene-road.webp?v=2") 0 0 / var(--tile) 100% repeat-x;
  animation: scene-roll 2.6s linear infinite;
}
@keyframes scene-roll { to { background-position: var(--tile) 0; } }

/* clouds: the far layer drifts slowly, the near layer a bit faster, both in the same direction as the road */
.cloud-layer { position: absolute; left: 0; top: 0; bottom: calc(var(--road) + var(--ov)); display: flex; animation: cloud-roll linear infinite; }
.cloud-set { position: relative; flex: none; width: var(--T); height: 100%; }
.cloud { position: absolute; height: auto; }
.cloud-layer--far  { --T: max(1600px, 140vw); animation-duration: 150s; opacity: .55; filter: blur(.6px); }
.cloud-layer--near { --T: max(1900px, 170vw); animation-duration: 85s; opacity: .9; }
@keyframes cloud-roll { from { transform: translateX(calc(var(--T) * -1)); } to { transform: translateX(0); } }
@media (max-width: 600px) { .cloud-layer--far .cloud { min-width: 70px; } .cloud-layer--near .cloud { min-width: 110px; } }

/* the truck, parked to the right of the headline, wheels on the road */
.scene-truck {
  position: absolute; width: var(--tw); aspect-ratio: 2288 / 996;
  right: max(1.25rem, calc((100% - var(--wrap)) / 2)); bottom: calc(var(--ov) + var(--road) - 58px * var(--s));
  container-type: inline-size;
}
.truck-rig { position: absolute; inset: 0; animation: truck-bump .55s ease-in-out infinite; }
.truck-body { position: absolute; inset: 0; width: 100%; height: 100%; }
.truck-shadow {
  position: absolute; left: 2%; right: 1%; bottom: -2.5%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25, 20, 15, .5), transparent);
}
.truck-wheel { position: absolute; animation: truck-wheel .8s linear infinite; }
.truck-wheel--front { left: 9.44%; top: 69.08%; width: 13.2%; }
.truck-wheel--back { left: 74.08%; top: 69.18%; width: 13.02%; }
@keyframes truck-wheel { to { transform: rotate(-360deg); } }      /* turning backwards = rolling to the left */
@keyframes truck-bump { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-1px); } 60% { transform: translateY(.35px); } }

/* the Wear Works logo painted on the side of the box */
.truck-logo {
  position: absolute; left: 34.6%; top: 2%; width: 64.9%; height: 70.3%;
  display: flex; align-items: center; justify-content: center; gap: 2.2cqw;
  font-family: var(--font); font-size: 6.4cqw; font-weight: 800; letter-spacing: -0.03em; color: #15191d;
  mix-blend-mode: multiply; opacity: .93;
}
.truck-logo .logo-mark { gap: .9cqw; }
.truck-logo .logo-mark i { width: 2.3cqw; height: 2.3cqw; }
.truck-logo .tl-name b { font-weight: 500; color: #4c5561; }

/* big screens: text on the left, truck on the right */
@media (min-width: 1101px) {
  .hero--scene .wrap > * { max-width: 600px; }
  .hero--scene h1.hero-title { font-size: 5rem; }
}
/* smaller screens: the truck drives along under the text */
@media (max-width: 1100px) {
  .hero--scene { --s: .76; padding-bottom: calc(var(--ov) + var(--road) - 58px * var(--s) + var(--tw) * .435 + 1.75rem); }
  .scene-truck { right: 50%; transform: translateX(50%); }
}
@media (max-width: 600px) {
  .hero--scene { --s: .56; }
}


/* ================= Dark theme =================
   The whole site is a dark slate blue-gray with light text. A few things stay light on purpose ("light islands"):
   the top bar with the logo, the two path cards on the home page, the header scene, form fields and buttons that
   are white, and the 3D shirt preview. TO GO BACK TO THE ALL-WHITE LOOK: delete this whole block. */
body {
  --bg: #35414f; --bg-rgb: 53, 65, 79;
  --surface: #404d5d; --surface-2: #3a4757;
  --ink: #eef2f7; --muted: #a9b4c3;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .2);
  --accent-text: #8eaeff; --accent-soft: rgba(110, 150, 255, .12);
  --green-text: #5fd391; --red-text: #ff8a84;
  --glow: rgba(0, 0, 0, .45);
  color-scheme: dark;
}
.site-header, .hero--scene, .paths-section .path, .btn--ghost, .nav-toggle, .check span, .seg, .view-tools button,
.design-x, .stage, .notice, input, select, textarea {
  --bg: #ffffff; --bg-rgb: 255, 255, 255;
  --surface: #ffffff; --surface-2: #f5f6f8;
  --ink: #101418; --muted: #5b6472;
  --line: #e3e6ec; --line-strong: #cdd3dd;
  --accent-text: #1f4fe0; --accent-soft: rgba(31, 79, 224, .08);
  --green-text: #167a44; --red-text: #c62822;
  color-scheme: light; color: var(--ink);
}
input, select, textarea { color: #101418; }
select option { background: #fff; color: #101418; }
input::placeholder, textarea::placeholder { color: #8a93a3; }
.notice { background: #fff4cf; }
/* the header scene's text stays dark on the sky */
.hero--scene h1, .hero--scene .lead { color: #101418; }
/* shadows read better a little deeper on a dark background */
.products--boxes .art--box::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, .22) 55%, transparent); }
.btn { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(var(--accent-rgb), .7); }
.site-footer { background: #2c3644; }
/* the strip where the two path cards sit is a little lighter, so their shadows show and they pop */
.hero--scene + .paths-section { background: linear-gradient(180deg, transparent 0 1.75rem, #4a5768 1.75rem, #3a4757 100%); }   /* starts below the road, so the cards still overlap the road */
.site-header { background: #ffffff; }   /* solid white top bar (see-through would let the dark page tint it grey) */

/* ---------- Home header: headline and tagline with depth (white letters, black outline, a chunky 3D edge and a soft shadow) ---------- */
.hero--scene h1.hero-title {
  color: #fff; -webkit-text-stroke: 2px #101418; paint-order: stroke fill;
  text-shadow: 1px 1px 0 #101418, 2px 2px 0 #101418, 3px 3px 0 #101418, 4px 4px 0 #101418, 5px 6px 0 #101418, 0 18px 30px rgba(10, 30, 80, .35);
}
.hero--scene .tagline {
  font-family: "Matcha Style", var(--font); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: .01em; line-height: 1.15;
  color: #ffc21a; -webkit-text-stroke: 1.5px #101418; paint-order: stroke fill; text-wrap: balance;
  text-shadow: 1px 1px 0 #101418, 2px 2px 0 #101418, 3px 3px 0 #101418, 4px 5px 0 #101418, 0 12px 22px rgba(0, 0, 0, .25);
  transform: rotate(-2deg); transform-origin: left center;
}
/* the yellow underline under "your ___": dropped below the letters (and their 3D edge), with room before the next line,
   and outlined in black with the same 3D edge so it matches the words */
.hero--scene .ht-your { padding-bottom: .24em; }
.hero--scene .ht-your::after {
  bottom: .06em; height: .075em; border-radius: 1em;
  box-shadow: 0 0 0 2px #101418, 3px 4px 0 #101418;
}