/* ───────────────────────────────────────────────────────────────
   Wardrobe Store UK — LIGHT design system (Anvogue-inspired).
   White surfaces · Instrument Sans · black buttons · green accent.
   Functional hooks (reveal engine, postcode, accordion, sticky bar,
   spec tabs, lightbox) preserved from the previous build.
   ─────────────────────────────────────────────────────────────── */

:root {
  --ink: #1f1f1f;          /* primary text / headings */
  --body-copy: #3f444b;    /* body copy */
  --muted: #6b7178;        /* secondary text */
  --secondary2: #9aa0a8;   /* tertiary */

  --bg: #ffffff;
  --surface: #f6f6f4;      /* light section / card fills */
  --footer: #f6f6f4;
  --drawer: #ffffff;
  --line: #e7e6e2;         /* borders / dividers */

  --accent: #1f1f1f;       /* primary buttons: black (Anvogue .button-main) */
  --on-accent: #ffffff;    /* text on black buttons */
  --accent2: #2f7d46;      /* green pop: eyebrows, highlights, links */
  --green: #d2ef9a;        /* Anvogue lime — small tag backgrounds */

  --ok-fg: #2e7d46;  --ok-bg: #eaf6ee;  --ok-border: #bfe3cb;
  --warn-fg: #9a6b00; --warn-bg: #fdf4e3; --warn-border: #f0dcae;

  /* One type family everywhere — Instrument Sans — like the template. */
  --serif: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:  "Instrument Sans", system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --anim-dur: 0.66s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--accent2); color: #fff; }

/* ─── Keyframes ─────────────────────────────────────────────────── */
@keyframes heroType { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes glowPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.75; } }
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 0.25; } 50% { opacity: 1; } 100% { transform: translateY(11px); opacity: 0.25; } }

/* ─── Typography primitives ─────────────────────────────────────── */
.container-x { max-width: var(--container); margin-inline: auto; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent2); }
.serif { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.mono { font-family: var(--sans); }
.ital { font-style: italic; font-weight: 600; color: var(--accent2); }

/* ─── Scroll-in reveal engine (JS adds .is-in). No-JS = visible. ─── */
html.js [data-anim],
html.js .reveal,
html.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--anim-dur) var(--ease-out), transform var(--anim-dur) var(--ease-out), filter var(--anim-dur) var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
html.js [data-anim="left"]  { transform: translateX(-40px); }
html.js [data-anim="right"] { transform: translateX(40px); }
html.js [data-anim="scale"] { transform: scale(0.94); }
html.js [data-anim="fade"]  { transform: none; }
html.js [data-anim="blur"]  { transform: translateY(20px); filter: blur(8px); }
html.js [data-anim].is-in,
html.js .reveal.is-in,
html.js [data-stagger].is-in > * { opacity: 1; transform: none; filter: none; }

/* ─── Cards / hover micro-interactions ──────────────────────────── */
.card-hov { transition: transform 0.28s var(--ease-out), border-color 0.28s, box-shadow 0.28s; }
.card-hov:hover { transform: translateY(-4px); border-color: #d9d8d3; box-shadow: 0 18px 40px -24px rgba(20,24,31,0.28); }

.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform 0.6s var(--ease-out); display: block; }
.zoom-wrap:hover img { transform: scale(1.045); }

/* Primary (black) button: subtle light sweep + press feedback */
.btn-shine { position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.25s, background 0.2s; }
.btn-shine::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%); background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transition: transform 0.7s var(--ease-out); pointer-events: none; }
.btn-shine:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(20,24,31,0.4); }
.btn-shine:hover::after { transform: translateX(130%); }
.btn-shine:active { transform: translateY(0) scale(0.99); }

/* Inline underline links */
.ul-grow { position: relative; }
.ul-grow::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--accent2); transition: width 0.3s var(--ease-out); }
.ul-grow:hover::after { width: 100%; }

.nudge .arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
.nudge:hover .arrow { transform: translateX(5px); }

.pill-hov { transition: transform 0.2s var(--ease-out), border-color 0.2s, color 0.2s, background 0.2s; }
.pill-hov:hover { transform: translateY(-2px); border-color: var(--ink); color: var(--ink); background: var(--surface); }

/* Accessibility focus */
a:focus-visible, button:focus-visible, .field:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: 6px;
}
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(47,125,70,0.12); }

/* Page-load motion */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes headerIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
html.js main { animation: pageIn 0.5s var(--ease-out) both; }
html.js header { animation: headerIn 0.55s var(--ease-out) both; }

.link-muted { color: var(--muted); transition: color 0.2s; }
.link-muted:hover { color: var(--ink); }
.link-soft { color: var(--muted); transition: color 0.2s; }
.link-soft:hover { color: var(--ink); }

.lift { transition: transform 0.2s; }
.lift:hover { transform: translateY(-2px); }
.lift-3:hover { transform: translateY(-3px); }

.loc-item { transition: background 0.18s; }
.loc-item:hover { background: var(--surface); }

.city-chip { transition: border-color 0.2s, color 0.2s, background 0.2s; }
.city-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr !important; } }

/* ─── Cinematic reveal (home) — light version ───────────────────── */
.cine-reveal { position: relative; height: 220vh; view-timeline-name: --reveal; view-timeline-axis: block; }
.cine-reveal .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 40px); padding: 92px 24px 44px; background: radial-gradient(80% 90% at 50% 42%, #ffffff, #f2f2f0); }
.cine-reveal .rv-img { animation: revealScale linear both; animation-timeline: --reveal; animation-range: contain 0% contain 100%; }
@keyframes revealScale { 0% { opacity: 0.3; transform: scale(0.72); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(1.04); } }
.cine-reveal .rv-h1, .cine-reveal .hud { display: none; }
.cine-reveal .rv-h2 { opacity: 1; }
@supports not (animation-timeline: view()) {
  .cine-reveal { height: auto; }
  .cine-reveal .sticky { position: static; height: auto; padding: 100px 22px 50px; }
  .cine-reveal .rv-img { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 880px) {
  .cine-reveal { height: auto; }
  .cine-reveal .sticky { position: static; height: auto; padding: 100px 22px 50px; }
  .cine-reveal .rv-img { animation: none; opacity: 1; transform: none; width: min(80vw, 360px) !important; }
}

/* Responsive grids */
@media (max-width: 880px) {
  .two-col, .spec-grid, .g3 { grid-template-columns: 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; }
  .bento { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 160px !important; }
  .bento .span2 { grid-column: auto !important; }
  .fam-gallery { grid-template-columns: 1fr 1fr !important; }
}

/* Masonry gallery */
.masonry { column-count: 4; column-gap: 14px; }
.masonry-item { break-inside: avoid; margin-bottom: 14px; }
.masonry-item img { transition: transform 0.5s; }
.masonry-item:hover img { transform: scale(1.04); }
@media (max-width: 1100px) { .masonry { column-count: 3; } }
@media (max-width: 760px) { .masonry { column-count: 2; column-gap: 10px; } .masonry-item { margin-bottom: 10px; } }

.lightbox-nav { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,0.05); border: 1px solid var(--line); color: var(--ink); font-size: 24px; cursor: pointer; transition: border-color 0.2s; }
.lightbox-nav:hover { border-color: var(--ink); }

/* Sticky mobile CTA bar */
.sticky-buybar { display: none; }
@media (max-width: 880px) { .sticky-buybar { display: flex; } body { padding-bottom: 78px; } }

.show-mobile { display: none !important; }
@media (max-width: 880px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: inline-flex !important; }
}

/* Inputs — light */
.field { width: 100%; padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; outline: none; border: 1px solid var(--line); }
.field::placeholder { color: var(--secondary2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html.js [data-anim], html.js .reveal, html.js [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .btn-shine::after { display: none; }
}