/* ============================================================
   OWL APPAREL CLOTHING  ·  "The Night Workshop"
   Embroidered clothing & workwear, Telford
   Design system: indigo night · periwinkle · thread-yellow · stitch motif
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* surfaces (deep indigo night) */
  --night:      oklch(0.155 0.033 274);
  --night-1:    oklch(0.185 0.040 276);
  --night-2:    oklch(0.225 0.046 278);
  --card:       oklch(0.235 0.048 279);
  --card-hi:    oklch(0.285 0.050 280);
  --line:       oklch(0.36 0.045 280 / 0.55);
  --line-soft:  oklch(0.36 0.045 280 / 0.30);

  /* brand */
  --periwinkle:     oklch(0.685 0.155 285);
  --periwinkle-hi:  oklch(0.760 0.150 284);
  --periwinkle-dim: oklch(0.500 0.120 285);
  --thread:         oklch(0.905 0.185 104);   /* their yellow, refined */
  --thread-deep:    oklch(0.820 0.170 96);

  /* text */
  --ink:     oklch(0.965 0.008 280);
  --muted:   oklch(0.780 0.024 283);
  --muted-2: oklch(0.640 0.030 283);
  --on-thread: oklch(0.185 0.040 276);   /* dark ink for on-yellow */

  /* type */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* rhythm */
  --container: 1220px;
  --gutter: clamp(1.15rem, 5vw, 2.75rem);
  --section: clamp(4.5rem, 11vw, 9rem);

  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 11px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* quint-ish */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* z-scale */
  --z-nav: 100;
  --z-menu: 200;
  --z-overlay: 300;
  --z-toast: 400;

  --shadow: 0 24px 60px -24px oklch(0.06 0.04 275 / 0.85);
  --shadow-lg: 0 40px 90px -30px oklch(0.05 0.04 275 / 0.9);
}

/* ---------- Skip link ---------- */
.skip{
  position:absolute; left:12px; top:-60px; z-index:var(--z-overlay);
  background:var(--thread); color:var(--on-thread); padding:0.6em 1em; border-radius:10px; font-weight:700;
  transition:top .25s var(--ease-out);
}
.skip:focus{ top:12px; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--night);
  color:var(--ink);
  line-height:1.62;
  font-size:clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2.5px solid var(--thread); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--periwinkle); color:var(--ink); }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:0.94; letter-spacing:0.005em; text-wrap:balance; }
.display{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3.4rem, 2rem + 12vw, 8.5rem);
  line-height:0.86; letter-spacing:0.004em;
  text-transform:uppercase;
}
h2.h-sec{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.3rem, 1.4rem + 5.2vw, 4.6rem);
  line-height:0.9; letter-spacing:0.006em;
}
h3{ font-size:clamp(1.35rem,1.1rem+1.3vw,1.9rem); text-transform:uppercase; letter-spacing:0.01em; }
p{ text-wrap:pretty; }
.lede{ font-size:clamp(1.1rem,1rem+0.7vw,1.45rem); color:var(--ink); line-height:1.5; max-width:38ch; }
.measure{ max-width:64ch; }
.spec{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--periwinkle-hi); }
.thread-word{ color:var(--thread); }
.peri-word{ color:var(--periwinkle-hi); }

/* ---------- Layout ---------- */
.container{ width:min(100% - (var(--gutter)*2), var(--container)); margin-inline:auto; }
.container-wide{ width:min(100% - (var(--gutter)*2), 1440px); margin-inline:auto; }
section{ position:relative; }
.pad{ padding-block:var(--section); }
.pad-t{ padding-top:var(--section); }
.stack > * + *{ margin-top:1.1rem; }

/* ---------- Stitch motif ---------- */
.stitch-rule{
  height:0; border:0;
  border-top:2px dashed var(--line);
  opacity:0.9;
}
.stitch-frame{
  border:1.6px dashed var(--line);
  border-radius:var(--radius);
}
/* animated sewing line (svg path uses .sew) */
.sew{ stroke-dasharray:8 7; }

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--thread); --_fg:var(--on-thread);
  display:inline-flex; align-items:center; gap:0.6em;
  padding:0.95em 1.5em; border-radius:100px;
  font-weight:700; font-size:0.98rem; letter-spacing:0.01em;
  background:var(--_bg); color:var(--_fg);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px oklch(0.905 0.185 104 / 0.4); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .4s var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }
.btn--peri{ --_bg:var(--periwinkle); --_fg:var(--ink); }
.btn--peri:hover{ box-shadow:0 14px 30px -10px oklch(0.685 0.155 285 / 0.5); }
.btn--ghost{
  --_bg:transparent; --_fg:var(--ink);
  border:1.6px solid var(--line); backdrop-filter:blur(4px);
}
.btn--ghost:hover{ border-color:var(--periwinkle); box-shadow:none; }
.btn--sm{ padding:0.68em 1.15em; font-size:0.9rem; }
.btn--block{ width:100%; justify-content:center; }

.chip{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); padding:0.4em 0.75em; border:1px solid var(--line); border-radius:100px;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--thread); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  transition:transform .5s var(--ease-out), background .4s ease, border-color .4s ease;
  background:oklch(0.155 0.033 274 / 0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
}
.nav.scrolled{ border-bottom-color:var(--line-soft); background:oklch(0.155 0.033 274 / 0.9); }
.nav.hidden{ transform:translateY(-105%); }
body.menu-open .nav{ z-index:calc(var(--z-menu) + 5); }
.nav__inner{
  width:min(100% - (var(--gutter)*2), 1440px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:70px;
}
.brand{ display:flex; align-items:center; gap:0.6rem; }
.brand img{ height:46px; width:auto; }
.brand__txt{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.2rem; letter-spacing:0.03em; line-height:1; }
.brand__txt small{ display:block; font-family:var(--mono); font-size:0.52rem; letter-spacing:0.32em; color:var(--periwinkle-hi); font-weight:500; margin-top:3px; }

.nav__links{ display:flex; align-items:center; gap:0.35rem; }
.nav__links a{
  padding:0.55em 0.85em; border-radius:100px; font-size:0.92rem; font-weight:500;
  color:var(--muted); position:relative; transition:color .25s ease;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a::after{
  content:""; position:absolute; left:0.85em; right:0.85em; bottom:0.32em; height:2px;
  background:var(--thread); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__cta{ display:flex; align-items:center; gap:0.6rem; }
.nav__burger{
  display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line);
  align-items:center; justify-content:center;
}
.nav__burger span{ position:relative; width:20px; height:2px; background:var(--ink); transition:.3s var(--ease-out); }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.3s var(--ease-out); }
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{ top:6px; }
body.menu-open .nav__burger span{ background:transparent; }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:oklch(0.155 0.033 274 / 0.98); backdrop-filter:blur(10px);
  padding:4.6rem var(--gutter) 1.5rem;
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateY(-100%); transition:transform .55s var(--ease-out-expo);
  visibility:hidden;
}
body.menu-open .drawer{ transform:translateY(0); visibility:visible; }
.drawer a:not(.btn){
  font-family:var(--display); text-transform:uppercase; font-weight:700;
  font-size:clamp(1.4rem,5.6vw,2rem); line-height:1.3; color:var(--muted);
  border-bottom:1.4px dashed var(--line-soft); padding:0.42em 0;
  display:flex; align-items:center; justify-content:space-between;
  transition:color .25s ease, transform .3s var(--ease-out);
}
.drawer a:not(.btn):hover,.drawer a:not(.btn)[aria-current="page"]{ color:var(--ink); transform:translateX(0.4em); }
.drawer a:not(.btn) span{ font-family:var(--mono); font-size:0.62rem; color:var(--periwinkle-hi); letter-spacing:0.1em; }
.drawer .btn{ margin-top:1.3rem; flex:none; }
.drawer__foot{ margin-top:auto; padding-top:1.3rem; color:var(--muted); font-size:0.82rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(2.5rem,6vw,5rem); padding-bottom:clamp(2rem,5vw,4rem); overflow:hidden; }
.hero__glow{
  position:absolute; top:-8%; left:-6%; width:min(720px,60%); height:min(680px,72%);
  z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side circle at 52% 50%, oklch(0.685 0.155 285 / 0.34), transparent),
    radial-gradient(closest-side circle at 80% 24%, oklch(0.905 0.185 104 / 0.14), transparent);
  filter:blur(55px);
}
.hero__inner{ position:relative; z-index:2; }
.hero__eyebrow{ display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.hero h1{ margin-block:0.2em 0; }
.hero__sub{ margin-top:1.5rem; color:var(--muted); font-size:clamp(1.05rem,1rem+0.6vw,1.35rem); max-width:44ch; line-height:1.55; }
.hero__sub strong{ color:var(--ink); font-weight:600; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:2rem; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3rem); margin-top:2.8rem; }
.hero__stat b{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,1.4rem+2vw,2.9rem); display:block; line-height:1; color:var(--thread); }
.hero__stat span{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }

/* hero owl mark + orbiting apparel ring */
.hero__owl{ position:relative; }
.owl-stage{
  position:relative; aspect-ratio:1/1; width:min(100%, 460px); margin-inline:auto;
  display:grid; place-items:center;
}
.owl-stage img.owl{ width:44%; z-index:3; filter:drop-shadow(0 16px 36px oklch(0.685 0.155 285 / 0.5)); }
.owl-glow{ position:absolute; width:52%; aspect-ratio:1; border-radius:50%; z-index:1;
  background:radial-gradient(circle, oklch(0.685 0.155 285 / 0.38), transparent 68%); filter:blur(26px); }
/* running-stitch ring + travelling needle */
.stitch-ring{ position:absolute; width:94%; aspect-ratio:1; z-index:1; overflow:visible; }
.stitch-ring .track{ fill:none; stroke:var(--thread); stroke-width:0.7; stroke-dasharray:2.4 6; stroke-linecap:round; opacity:0.55; animation:stitch-flow 2.6s linear infinite; }
@keyframes stitch-flow{ to{ stroke-dashoffset:-85; } }
.needle{ position:absolute; width:26px; height:26px; z-index:3;
  offset-path:circle(47% at 50% 50%); offset-rotate:auto 90deg; offset-anchor:50% 50%;
  animation:needle-travel 7s linear infinite; }
.needle .bob{ display:block; width:100%; height:100%; animation:needle-bob 0.34s ease-in-out infinite alternate; }
.needle svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
@keyframes needle-travel{ to{ offset-distance:100%; } }
@keyframes needle-bob{ from{ transform:translateY(-2.5px); } to{ transform:translateY(4.5px); } }
@media (prefers-reduced-motion: reduce){ .stitch-ring .track,.needle,.needle .bob{ animation:none; } }

.orbit{ position:absolute; inset:0; z-index:2; animation:spin 55s linear infinite; }
.orbit-item{ position:absolute; inset:0; transform:rotate(var(--a)); }
.orbit-item .pos{ position:absolute; top:1.5%; left:50%; width:clamp(58px,16.5%,122px); transform:translateX(-50%); }
.orbit-item .counter{ animation:spin-rev 55s linear infinite; }
.orbit-item .counter img{ display:block; width:100%; box-sizing:border-box; background:#fff; padding:9%;
  border-radius:15px; box-shadow:0 10px 22px rgba(0,0,0,0.45);
  transform:rotate(calc(-1 * var(--a))); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){ .orbit,.orbit-item .counter{ animation:none; } }

/* ============================================================
   MARQUEE (stitched band)
   ============================================================ */
.marquee{
  overflow:hidden; border-block:1.6px dashed var(--line); padding-block:1.1rem;
  background:var(--night-1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; gap:2.5rem; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--display); text-transform:uppercase; font-weight:700;
  font-size:clamp(1.5rem,4vw,2.4rem); letter-spacing:0.02em; color:var(--muted-2);
  display:inline-flex; align-items:center; gap:2.5rem; white-space:nowrap;
}
.marquee__track span::after{ content:"✦"; color:var(--thread); font-size:0.7em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ============================================================
   WORLDS (the three ranges)
   ============================================================ */
.worlds{ display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:2.5rem; }
@media (min-width:900px){ .worlds{ grid-template-columns:repeat(3,1fr); } }
.world{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  min-height:clamp(380px,52vh,540px); display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.6rem; isolation:isolate; border:1px solid var(--line-soft);
  background:var(--card);
}
.world__img{ position:absolute; inset:0; z-index:-2; }
.world__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.55) brightness(0.7); transition:filter .6s var(--ease-out), transform .7s var(--ease-out); }
.world::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, oklch(0.155 0.033 274 / 0.1) 30%, oklch(0.155 0.033 274 / 0.92) 100%); }
.world:hover .world__img img{ filter:grayscale(0) brightness(0.82); transform:scale(1.05); }
.world__tag{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--thread); }
.world h3{ margin-top:0.5rem; font-size:clamp(1.6rem,1.3rem+1.6vw,2.4rem); }
.world p{ color:var(--muted); margin-top:0.5rem; font-size:0.96rem; max-width:34ch; }
.world__link{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:0.5em; color:var(--ink); font-weight:600; font-size:0.95rem; }
.world__link .arw{ transition:transform .4s var(--ease-out); }
.world:hover .world__link .arw{ transform:translateX(5px); }

/* ============================================================
   FEATURE / SPLIT
   ============================================================ */
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; } .split.rev > .split__media{ order:-1; } }
.split__media{ position:relative; }
.split__media .frame{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft);
  background:#fff; box-shadow:var(--shadow);
}
.split__media img{ width:100%; object-fit:cover; }

/* ============================================================
   PROCESS (stitched timeline)
   ============================================================ */
.process{ position:relative; margin-top:2.5rem; }
.process__line{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.steps{ display:grid; gap:1.1rem; grid-template-columns:1fr; position:relative; z-index:1; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ padding:1.5rem 1.4rem; border-radius:var(--radius); background:var(--card); border:1px solid var(--line-soft); }
.step__n{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--periwinkle-hi); }
.step h3{ font-size:1.15rem; margin-top:0.7rem; }
.step p{ color:var(--muted); font-size:0.9rem; margin-top:0.5rem; }
.step__ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:oklch(0.685 0.155 285 / 0.14); border:1px solid var(--line); margin-bottom:0.9rem; color:var(--thread); }

/* ============================================================
   STUDIO TEASER (home)
   ============================================================ */
.teaser{
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  border:1.6px dashed var(--line); background:
    radial-gradient(75% 95% at 92% -15%, oklch(0.685 0.155 285 / 0.16), transparent 55%),
    var(--night-1);
  padding:clamp(1.8rem,5vw,3.5rem);
  display:grid; gap:2rem; grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .teaser{ grid-template-columns:1.05fr 0.95fr; } }
.teaser__preview{ position:relative; border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--line-soft); aspect-ratio:4/3; display:grid; place-items:center; }
.teaser__preview img.garment{ width:74%; }
.teaser__logo{ position:absolute; width:42%; top:23%; left:50%; transform:translateX(-50%); filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); }

/* ============================================================
   DESIGN STUDIO (the tool)
   ============================================================ */
.studio-wrap{ padding-top:clamp(1.5rem,4vw,2.5rem); }
.studio{
  display:grid; gap:1.1rem; grid-template-columns:1fr;
}
@media (min-width:1000px){
  .studio{ grid-template-columns:minmax(0,1.35fr) minmax(320px,0.9fr); align-items:start; }
  .studio > div:first-child{ position:sticky; top:88px; }
}

/* stage */
.stage{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:
    radial-gradient(140% 110% at 50% -25%, oklch(0.235 0.046 278), var(--night-1) 72%);
  border:1px solid var(--line); box-shadow:var(--shadow);
  aspect-ratio:1/1.05; touch-action:pan-y; user-select:none;
}
/* editing toolbar above the stage */
.stage-tools{ display:flex; gap:0.5rem; margin-bottom:0.7rem; }
.edit-toggle{
  display:inline-flex; align-items:center; gap:0.5em; font-size:0.9rem; font-weight:600;
  padding:0.6em 1.05em; border-radius:100px; border:1.5px solid var(--periwinkle);
  color:var(--ink); background:oklch(0.685 0.155 285 / 0.14); transition:.2s ease;
}
.edit-toggle:hover{ background:oklch(0.685 0.155 285 / 0.22); }
.edit-toggle[aria-pressed="true"]{ background:var(--thread); color:var(--on-thread); border-color:var(--thread); }
.edit-toggle svg{ flex:none; }
@media (min-width:600px){ .stage{ aspect-ratio:1/0.92; } }
.stage__garment{ position:absolute; inset:0; margin:auto; height:100%; width:auto; object-fit:contain; pointer-events:none; }
.stage__hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted-2); background:oklch(0.155 0.033 274 / 0.7); padding:0.4em 0.9em; border-radius:100px;
  pointer-events:none; transition:opacity .4s ease;
}
/* the draggable logo */
.logo-layer{
  position:absolute; top:0; left:0; cursor:grab; touch-action:none;
  transform-origin:center center;
}
.logo-layer.grabbing{ cursor:grabbing; }
.logo-layer img{ width:100%; height:100%; pointer-events:none; -webkit-user-drag:none; }
.logo-layer .box{
  position:absolute; inset:-2px; border:1.5px dashed var(--thread); border-radius:4px;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.logo-layer:hover .box,.logo-layer.active .box{ opacity:0.9; }
.logo-layer .handle{
  position:absolute; width:16px; height:16px; border-radius:50%; background:var(--thread);
  border:2px solid var(--night); right:-8px; bottom:-8px; cursor:se-resize; opacity:0;
  transition:opacity .2s ease; touch-action:none;
}
.logo-layer:hover .handle,.logo-layer.active .handle{ opacity:1; }
.logo-layer .rot{
  position:absolute; width:16px; height:16px; border-radius:50%; background:var(--periwinkle);
  border:2px solid var(--night); left:50%; top:-30px; transform:translateX(-50%); cursor:grab; opacity:0;
  transition:opacity .2s ease; touch-action:none;
}
.logo-layer:hover .rot,.logo-layer.active .rot{ opacity:1; }
.logo-layer .rot::before{ content:""; position:absolute; left:50%; top:16px; width:1px; height:14px; background:var(--periwinkle); transform:translateX(-50%); }

.stage__empty{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem;
  cursor:pointer; transition:background .25s ease;
}
.stage__empty:hover,.stage__empty:focus-visible{ background:oklch(0.685 0.155 285 / 0.06); outline:none; }
.stage__empty:hover svg,.stage__empty:focus-visible svg{ transform:translateY(-3px); transition:transform .3s var(--ease-out); }
.stage__empty .inner{ max-width:34ch; }
.stage__empty svg{ margin:0 auto 1rem; color:var(--periwinkle-hi); }
.stage__empty p{ color:var(--muted); font-size:0.95rem; }

/* controls panel */
.panel{ display:flex; flex-direction:column; gap:1.05rem; }
.panel__card{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.15rem 1.15rem 1.25rem; }
.panel__card h4{ font-family:var(--sans); font-weight:700; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.9rem; display:flex; align-items:center; gap:0.5rem; }
.panel__card h4 .num{ font-family:var(--mono); color:var(--thread); }

/* garment thumbs */
.garments{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:0.5rem; }
.gbtn{ border:1.4px solid var(--line-soft); border-radius:12px; overflow:hidden; background:var(--night-2); aspect-ratio:1/1.08; padding:2px; transition:border-color .2s ease, transform .2s ease; position:relative; }
.gbtn img{ width:100%; height:100%; object-fit:contain; }
.gbtn:hover{ transform:translateY(-2px); }
.gbtn[aria-pressed="true"]{ border-color:var(--thread); }
.gbtn span{ position:absolute; bottom:0; left:0; right:0; font-family:var(--mono); font-size:0.5rem; letter-spacing:0.03em; text-align:center; color:var(--muted); background:oklch(0.155 0.033 274 / 0.8); padding:1px 0; text-transform:uppercase; }

/* upload */
.dropzone{
  border:1.6px dashed var(--line); border-radius:14px; padding:1.5rem 1rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.25rem;
  min-height:130px; transition:border-color .25s ease, background .25s ease; cursor:pointer; position:relative;
}
.dropzone:hover,.dropzone.drag{ border-color:var(--periwinkle); background:oklch(0.685 0.155 285 / 0.08); }
.dropzone svg{ margin-bottom:0.35rem; color:var(--periwinkle-hi); }
.dropzone b{ font-size:0.95rem; }
.dropzone small{ color:var(--muted); font-size:0.78rem; max-width:26ch; line-height:1.35; }
.dropzone input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* toggle */
.toggle-row{ display:flex; align-items:flex-start; gap:0.75rem; margin-top:0.9rem; padding-top:0.9rem; border-top:1px dashed var(--line-soft); }
.toggle{ position:relative; width:44px; height:25px; border-radius:100px; background:var(--night-2); border:1px solid var(--line); flex:none; transition:background .25s ease; margin-top:2px; }
.toggle[aria-pressed="true"]{ background:var(--periwinkle); border-color:var(--periwinkle); }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:var(--ink); transition:transform .25s var(--ease-out); }
.toggle[aria-pressed="true"]::after{ transform:translateX(19px); }
.toggle-row label{ font-size:0.86rem; }
.toggle-row label small{ display:block; color:var(--muted); font-size:0.76rem; margin-top:2px; }

/* sliders */
.ctrl{ margin-top:0.85rem; }
.ctrl:first-child{ margin-top:0; }
.ctrl label{ display:flex; justify-content:space-between; font-size:0.82rem; color:var(--muted); margin-bottom:0.35rem; }
.ctrl label b{ font-family:var(--mono); color:var(--ink); font-weight:500; }
.ctrl .numwrap{ display:inline-flex; align-items:center; gap:1px; }
.ctrl .numwrap input[type=number]{
  width:3.3em; text-align:right; padding:0.16em 0.4em; border-radius:7px;
  background:var(--night-2); border:1px solid var(--line-soft); color:var(--ink);
  font-family:var(--mono); font-size:0.82rem; -moz-appearance:textfield; appearance:textfield;
}
.ctrl .numwrap input[type=number]::-webkit-outer-spin-button,
.ctrl .numwrap input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ctrl .numwrap input[type=number]:focus{ border-color:var(--periwinkle); outline:none; }
.ctrl .numwrap input[type=number].is-off{ opacity:0.4; }
.ctrl .numwrap i{ font-style:normal; color:var(--muted); font-family:var(--mono); font-size:0.8rem; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:100px;
  background:var(--night-2); border:1px solid var(--line-soft); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--thread); border:2px solid var(--night); box-shadow:0 2px 6px rgba(0,0,0,.4); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--thread); border:2px solid var(--night); }

/* placement presets */
.presets{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.preset{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.5em 0.8em; border:1px solid var(--line-soft); border-radius:100px; color:var(--muted); transition:.2s ease; }
.preset:hover{ color:var(--ink); border-color:var(--periwinkle); }
.preset[aria-pressed="true"]{ background:var(--thread); color:var(--on-thread); border-color:var(--thread); }

/* small button row */
.btn-row{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.mini{ font-size:0.8rem; padding:0.55em 0.85em; border:1px solid var(--line-soft); border-radius:100px; color:var(--muted); display:inline-flex; align-items:center; gap:0.4em; transition:.2s ease; }
.mini:hover{ color:var(--ink); border-color:var(--periwinkle); }
.mini[disabled]{ opacity:0.4; pointer-events:none; }
.is-off{ opacity:0.4; pointer-events:none; }
input[type=range].is-off{ opacity:0.35; }

/* enquiry form */
.field{ margin-top:0.85rem; }
.field label{ display:block; font-size:0.8rem; color:var(--muted); margin-bottom:0.35rem; }
.field input,.field textarea,.field select{
  width:100%; padding:0.75em 0.9em; border-radius:11px; background:var(--night-2);
  border:1px solid var(--line-soft); transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--periwinkle); outline:none; }
.field textarea{ resize:vertical; min-height:74px; }
.field-2{ display:grid; gap:0.85rem; grid-template-columns:1fr 1fr; }
@media (max-width:420px){ .field-2{ grid-template-columns:1fr; } }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,120%); z-index:var(--z-toast);
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0.9em 1.2em;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:0.7rem; max-width:90vw;
  transition:transform .5s var(--ease-out-expo); font-size:0.9rem;
}
.toast.show{ transform:translate(-50%,0); }
.toast .ok{ color:var(--thread); }

/* ============================================================
   PRODUCT GRID (world pages)
   ============================================================ */
.prod-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-top:2.5rem; }
@media (min-width:600px){ .prod-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } }
.prod{ border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--line-soft); transition:transform .35s var(--ease-out), border-color .3s ease; }
.prod:hover{ transform:translateY(-4px); border-color:var(--periwinkle); }
.prod__img{ aspect-ratio:1/1.12; background:#fff; overflow:hidden; }
.prod__img img{ width:100%; height:100%; object-fit:contain; padding:6%; transition:transform .5s var(--ease-out); }
.prod:hover .prod__img img{ transform:scale(1.05); }
.prod__body{ padding:0.9rem 1rem 1.1rem; }
.prod__body h4{ font-family:var(--sans); font-weight:600; font-size:0.95rem; letter-spacing:0; text-transform:none; }
.prod__body .price{ font-family:var(--mono); font-size:0.82rem; color:var(--thread); margin-top:0.3rem; }
.prod--btn{ text-align:left; width:100%; font:inherit; color:inherit; cursor:pointer; display:block; }

/* filter tabs */
.filters{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.6rem; }
.filter{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.55em 0.95em; border:1px solid var(--line-soft); border-radius:100px; color:var(--muted); transition:.2s ease; }
.filter:hover{ color:var(--ink); border-color:var(--periwinkle); }
.filter[aria-pressed="true"]{ background:var(--thread); color:var(--on-thread); border-color:var(--thread); }

/* product quick-view modal */
body.modal-open{ overflow:hidden; }
.pmodal{ position:fixed; inset:0; z-index:var(--z-overlay); display:grid; place-items:center; padding:clamp(0.8rem,3vw,2rem); }
.pmodal[hidden]{ display:none; }
.pmodal__backdrop{ position:absolute; inset:0; background:oklch(0.09 0.03 275 / 0.72); backdrop-filter:blur(6px); animation:pm-fade .3s ease; }
.pmodal__panel{ position:relative; z-index:1; width:min(920px,100%); max-height:92vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr; animation:pm-rise .45s var(--ease-out-expo); }
@media (min-width:720px){ .pmodal__panel{ grid-template-columns:1.05fr 0.95fr; } }
@keyframes pm-fade{ from{ opacity:0; } }
@keyframes pm-rise{ from{ opacity:0; transform:translateY(20px); } }
.pmodal__close{ position:absolute; top:0.7rem; right:0.7rem; z-index:2; width:40px; height:40px; border-radius:50%; background:oklch(0.155 0.033 274 / 0.62); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); }
.pmodal__close:hover{ background:oklch(0.155 0.033 274 / 0.92); }
.pmodal__media{ background:#fff; padding:clamp(1rem,3vw,2rem); display:flex; flex-direction:column; gap:0.7rem; }
.pmodal__media #pmImg{ width:100%; aspect-ratio:1/1; object-fit:contain; }
.pmodal__thumbs{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.pthumb{ width:52px; height:52px; border-radius:9px; overflow:hidden; border:1.5px solid #e5e5e5; background:#fff; cursor:pointer; padding:2px; }
.pthumb.active{ border-color:var(--periwinkle); }
.pthumb img{ width:100%; height:100%; object-fit:contain; }
.pmodal__info{ padding:clamp(1.4rem,4vw,2.2rem); display:flex; flex-direction:column; }
.pmodal__info h3{ font-size:clamp(1.5rem,1.2rem+1.5vw,2.1rem); margin-top:0.3rem; }
.pmodal__price{ font-family:var(--mono); color:var(--thread); font-size:1.15rem; margin-top:0.6rem; }
.pmodal__opts{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.pmodal__optlabel{ width:100%; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.15rem; }
.pchip{ font-size:0.8rem; padding:0.35em 0.7em; border:1px solid var(--line-soft); border-radius:100px; color:var(--ink); }
.pmodal__cta{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.6rem; }
.pmodal__note{ color:var(--muted); text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:0.8rem; margin-top:1rem; }
@media (prefers-reduced-motion: reduce){ .pmodal__backdrop,.pmodal__panel{ animation:none; } }

/* ============================================================
   FAQ / accordion
   ============================================================ */
.faq{ margin-top:2rem; border-top:1px dashed var(--line-soft); }
.faq details{ border-bottom:1px dashed var(--line-soft); }
.faq summary{ padding:1.15rem 0; font-family:var(--display); text-transform:uppercase; font-size:1.15rem; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:24px; height:24px; position:relative; }
.faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; background:var(--thread); transition:.3s var(--ease-out); }
.faq summary .pm::before{ top:11px; left:2px; right:2px; height:2px; }
.faq summary .pm::after{ left:11px; top:2px; bottom:2px; width:2px; }
.faq details[open] summary .pm::after{ transform:scaleY(0); }
.faq details p{ color:var(--muted); padding-bottom:1.2rem; max-width:70ch; margin-top:-0.3rem; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  border-radius:var(--radius-lg); overflow:hidden; position:relative; text-align:center;
  padding:clamp(2.5rem,7vw,5rem) var(--gutter);
  background:
    radial-gradient(80% 95% at 50% -25%, oklch(0.685 0.155 285 / 0.22), transparent 58%),
    var(--night-1);
  border:1.6px dashed var(--line);
}
.cta-band h2{ margin-bottom:1rem; }
.cta-band .btn{ margin-top:1.5rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px dashed var(--line); margin-top:var(--section); padding-block:clamp(2.5rem,6vw,4rem); background:var(--night-1); }
.footer__grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer__brand img{ height:52px; margin-bottom:1rem; }
.footer__brand p{ color:var(--muted); max-width:36ch; font-size:0.92rem; }
.footer h5{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--periwinkle-hi); margin-bottom:1rem; }
.footer ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.footer a{ color:var(--muted); font-size:0.95rem; transition:color .2s ease; }
.footer a:hover{ color:var(--ink); }
.footer__bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px dashed var(--line-soft); display:flex; flex-wrap:wrap; gap:0.8rem 1.5rem; justify-content:space-between; align-items:center; color:var(--muted); font-size:0.82rem; }
.footer__bottom a{ color:var(--periwinkle-hi); }
.footer__bottom a:hover{ color:var(--thread); }

/* ============================================================
   REVEAL (enhance-only; safe if JS absent)
   ============================================================ */
html.js [data-reveal]{ opacity:0; transform:translateY(22px); }
html.js [data-reveal].in{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js [data-reveal="scale"]{ transform:scale(0.96); }
html.js [data-reveal="scale"].in{ transform:none; }
html.js [data-stagger] > *{ opacity:0; transform:translateY(18px); }
html.js [data-stagger].in > *{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal],html.js [data-reveal].in,
  html.js [data-stagger] > *,html.js [data-stagger].in > *{
    opacity:1 !important; transform:none !important; transition:opacity .3s ease !important;
  }
}

/* generic helpers */
.eyebrow-line{ display:inline-flex; align-items:center; gap:0.6rem; color:var(--muted); font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.grid-2{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:800px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.badge-strip{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.6rem; }

/* ---------- nav responsive ---------- */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__cta .btn:not(.nav__burger){ display:none; }
  .nav__burger{ display:inline-flex; }
}
@media (min-width:1081px){ .drawer{ display:none; } }