/* ════════════════════════════════════════════════════════════
   Sydney Watch Plug — storefront design system (Sample Website)
   Editorial monochrome: white gallery walls, black bands, hairline
   borders, one thin sans (Inter, standing in for Roobert), sharp 0px
   surfaces against full pill buttons. The only colour on the whole
   site is the liquid iridescent wash behind the hero.
   Motion: cubic-bezier(0.19, 1, 0.22, 1), 0.8 to 1.25s, glide don't snap.
   ════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Raleway:wght@300;400&display=swap");

:root {
  /* palette (light surface is the default) */
  --obsidian: #000000;
  --paper: #ffffff;
  --inkstone: #181818;
  --slate: #636363;
  --felt: #6d6d6d;
  --pewter: #808080;
  --ash-mist: #9a9a9a;

  /* semantic tokens, flipped inside .dark */
  --bg: var(--paper);
  --fg: var(--obsidian);
  --ink: var(--inkstone);
  --mute: var(--felt);
  --mute-2: var(--ash-mist);
  --line: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.85);
  --surface: #f3f3f3;

  /* aliases still referenced inline by the JSX */
  --white: var(--fg);
  --ash: var(--ink);
  --accent: var(--fg);
  --accent-soft: var(--mute);
  --glass-line: var(--line);
  --status-available: var(--fg);
  --status-reserved: var(--pewter);
  --status-sold: var(--ash-mist);

  /* iridescent wash (hero media only, never UI) */
  --iri-sage: rgb(160, 224, 171);
  --iri-amber: rgb(255, 172, 46);
  --iri-oxblood: rgb(165, 45, 37);

  /* type */
  --f-sans: "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif;
  --f-accent: "Raleway", "Jost", "Montserrat", sans-serif;
  --f-cond: var(--f-sans);
  --f-body: var(--f-sans);
  --f-mono: var(--f-sans);

  /* shape + rhythm */
  --pill: 75px;
  --card: 0px;
  --max: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}
.dark {
  --bg: var(--obsidian);
  --fg: var(--paper);
  --ink: #d6d6d6;
  --mute: var(--ash-mist);
  --mute-2: var(--felt);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.3);
  --surface: #0e0e0e;
  --white: var(--fg);
  --ash: var(--ink);
  --accent: var(--fg);
  --accent-soft: var(--mute);
  --glass-line: var(--line);
  --status-available: var(--fg);
  background: var(--bg); color: var(--fg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--f-sans); font-size: 16px; font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 8px; }

/* ── type ─────────────────────────────────────────────── */
.cond { font-family: var(--f-sans); font-weight: 400; letter-spacing: -0.01em; }
.mono, .label { font-family: var(--f-sans); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
.muted { color: var(--mute); }
.accent { color: var(--fg); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-sans); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 11vw, 152px) 0; background: var(--bg); color: var(--fg); }
.hair-top { border-top: 1px solid var(--line); }

/* section heading: small label, whisper-weight headline */
.head { max-width: 900px; margin: 0 0 clamp(40px, 6vw, 68px); }
.head .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mute); }
.head .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.head h2 { font-size: clamp(40px, 6.2vw, 78px); font-weight: 300; line-height: 1.02; margin-top: 20px; }
.head p { margin: 22px 0 0; max-width: 520px; color: var(--mute); font-size: 16px; line-height: 1.58; }

/* ── pills: the only rounded shape ───────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 11px 30px; border-radius: var(--pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg);
  font-family: var(--f-sans); font-size: 15px; font-weight: 400; letter-spacing: 0;
  cursor: pointer; white-space: nowrap;
  transition: background 0.8s var(--ease), color 0.8s var(--ease), border-color 0.8s var(--ease), letter-spacing 0.8s var(--ease);
}
.pill:hover { border-color: var(--fg); letter-spacing: 0.02em; }
.pill.soft { border-color: var(--line); color: var(--mute); }
.pill.soft:hover { color: var(--fg); border-color: var(--fg); }
.pill.glass { border-color: var(--line); }
.pill.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pill.on:hover { background: transparent; color: var(--fg); }
.pill.lg { min-height: 54px; padding: 14px 36px; font-size: 16px; }
/* the WhatsApp glyph is a black svg: flip it white wherever the pill text is white */
.dark .pill img, .hero .pill img, .menu .pill img, .pill.on img, .dock .pill.wa img, .fab img { filter: invert(1); }
.dark .pill.on img { filter: none; }
.pill .ic { width: 16px; height: 16px; display: inline-flex; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--pill);
  border: 1px solid var(--line-strong); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; }
.badge.dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.glass { background: rgba(255, 255, 255, 0.9); color: #000 !important; border-color: transparent !important; }

/* panels: flat, hairline, sharp */
.glass-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 0; }

/* ── header: floats over everything, inverts via difference ── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 72px; padding: 0 var(--gutter); }
.site-header .bar > * { pointer-events: auto; }
.site-header .mark { display: flex; align-items: center; gap: 12px; justify-self: start; }
.site-header .mark img { width: 34px; height: 34px; object-fit: contain; filter: grayscale(1) brightness(2.2); }
.site-header .mark span { font-size: 15px; font-weight: 400; letter-spacing: -0.01em; }
.site-header .links { display: flex; gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.site-header .links a { opacity: 0.8; transition: opacity 0.4s ease; }
.site-header .links a:hover { opacity: 1; }
.site-header .right { justify-self: end; display: flex; gap: 8px; }
.site-header .pill { --line-strong: rgba(255, 255, 255, 0.45); --line: rgba(255, 255, 255, 0.45); --fg: #fff;
  min-height: 40px; padding: 8px 20px; font-size: 13px; color: #fff; }

/* once scrolled, the bar detaches into a floating pill (inset from the edges, not a full-width
   banner) with its own blurred backdrop, so the words stay readable over any photo */
.site-header .bar { transition: height 0.4s var(--ease), margin 0.4s var(--ease), padding 0.4s var(--ease),
  background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); border: 1px solid transparent; border-radius: 999px; }
.site-header.scrolled { mix-blend-mode: normal; }
.site-header.scrolled .bar { width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 10px auto 0; height: 40px;
  padding: 0 4px 0 16px; background: rgba(10, 10, 10, 0.72); border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); }
.site-header.scrolled .pill { min-height: 32px; padding: 0 16px; font-size: 12px; }
.site-header.scrolled .mark img { width: 24px; height: 24px; }
.site-header.scrolled .mark span { font-size: 13px; }
.site-header.scrolled .links { font-size: 11px; }

/* full-screen menu */
.menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: #000; color: #fff; animation: fade 0.8s var(--ease) both; }
.menu .top { display: flex; justify-content: space-between; align-items: center; height: 72px; padding: 0 var(--gutter); }
.menu nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); }
.menu nav a { display: flex; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: clamp(40px, 8vw, 94px); font-weight: 300; letter-spacing: -0.03em; line-height: 1;
  transition: padding 1.25s var(--ease), opacity 0.4s ease; animation: rise 1.25s var(--ease) both; }
.menu nav a small { font-size: 11px; color: var(--ash-mist); letter-spacing: 0.08em; }
.menu nav a:hover { padding-left: 20px; }
.menu .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px var(--gutter) 36px;
  font-size: 11px; color: var(--ash-mist); text-transform: uppercase; letter-spacing: 0.08em; }
.menu .pill { --line-strong: rgba(255,255,255,0.3); --line: rgba(255,255,255,0.3); --fg: #fff; color: #fff; }
.menu img { filter: grayscale(1) brightness(2.2); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ── hero: liquid light, a glass orb, one monumental line ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate; background: #000; color: #fff; padding: 120px var(--gutter) 140px;
  --mx: 0; --my: 0; }
.liquid { position: absolute; inset: -25%; z-index: -4; filter: blur(64px) saturate(1.2); opacity: 0.95;
  transform: translate(calc(var(--mx) * -36px), calc(var(--my) * -36px)); transition: transform 1.25s var(--ease); }
.liquid i { position: absolute; border-radius: 50%; will-change: transform; mix-blend-mode: screen; }
.liquid i:nth-child(1) { width: 58vw; height: 40vw; left: 2%; top: 30%; background: radial-gradient(closest-side, var(--iri-sage), transparent); opacity: 0.7; animation: flowA 21s ease-in-out infinite alternate; }
.liquid i:nth-child(2) { width: 52vw; height: 46vw; left: 32%; top: 18%; background: radial-gradient(closest-side, var(--iri-amber), transparent); opacity: 0.75; animation: flowB 25s ease-in-out infinite alternate; }
.liquid i:nth-child(3) { width: 56vw; height: 56vw; right: -4%; top: 4%; background: radial-gradient(closest-side, var(--iri-oxblood), transparent); animation: flowC 19s ease-in-out infinite alternate; }
.liquid i:nth-child(4) { width: 44vw; height: 30vw; left: 18%; bottom: 8%; background: radial-gradient(closest-side, var(--iri-oxblood), transparent); opacity: 0.8; animation: flowB 29s ease-in-out -8s infinite alternate-reverse; }
.liquid i:nth-child(5) { width: 40vw; height: 26vw; right: 16%; bottom: 14%; background: radial-gradient(closest-side, var(--iri-sage), transparent); opacity: 0.45; animation: flowA 23s ease-in-out -11s infinite alternate-reverse; }
/* dark ribbons swept through the colour, like oil on water */
.liquid b { position: absolute; inset: 10%; border-radius: 50%; mix-blend-mode: multiply; animation: spin 80s linear infinite;
  background: conic-gradient(from 30deg, #000 0 8%, transparent 16% 30%, #000 38% 46%, transparent 55% 70%, #000 78% 84%, transparent 92%); opacity: 0.85; }
@keyframes flowA { 50% { transform: translate(16vw, -10vh) scale(1.2) rotate(35deg); } 100% { transform: translate(-8vw, 8vh) scale(0.85) rotate(-15deg); } }
@keyframes flowB { 50% { transform: translate(-14vw, 12vh) scale(0.8) rotate(-30deg); } 100% { transform: translate(10vw, -6vh) scale(1.15) rotate(20deg); } }
@keyframes flowC { 50% { transform: translate(-10vw, 10vh) scale(1.25); } 100% { transform: translate(6vw, -4vh) scale(0.9); } }
@keyframes spin { to { transform: rotate(360deg); } }

.orb { position: absolute; z-index: -2; width: clamp(360px, 60vw, 980px); aspect-ratio: 1; border-radius: 50%;
  right: -18vw; top: 50%; margin-top: calc(clamp(360px, 60vw, 980px) / -2);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.14), transparent 40%),
              radial-gradient(circle at 70% 78%, rgba(255,255,255,0.05), transparent 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 24px 36px 90px rgba(255,255,255,0.07), inset -50px -70px 140px rgba(0,0,0,0.6);
  backdrop-filter: blur(16px) brightness(1.2) saturate(1.35); -webkit-backdrop-filter: blur(16px) brightness(1.2) saturate(1.35);
  translate: calc(var(--mx) * 48px) calc(var(--my) * 48px); transition: translate 1.25s var(--ease);
  animation: orbIn 2s 0.1s var(--ease) both, orbFloat 14s ease-in-out 2s infinite alternate; }
@keyframes orbIn { from { opacity: 0; transform: scale(0.8) translateX(10vw); } }
@keyframes orbFloat { to { transform: translateY(-3vh) rotate(6deg); } }
.grain { position: absolute; inset: 0; z-index: -1; opacity: 0.09; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hero .veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.25), transparent 60%), linear-gradient(rgba(0,0,0,0.35), transparent 22%, transparent 78%, rgba(0,0,0,0.6)); }

.hero .core { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* emblem above the marque */
.hero .emblem { width: clamp(96px, 11vw, 150px); height: auto; margin-bottom: clamp(18px, 2.4vw, 30px);
  filter: grayscale(1) brightness(2.3) drop-shadow(0 0 30px rgba(255,255,255,0.18)); animation: emblemIn 1.6s var(--ease) both; }
@keyframes emblemIn { from { opacity: 0; transform: translateY(20px) scale(0.9); filter: grayscale(1) brightness(2.3) blur(8px); } }

/* bold, all-caps marque: small wide-tracked SYDNEY over a heavy WATCH PLUG */
.display { display: flex; flex-direction: column; align-items: center; font-weight: 600; text-transform: uppercase;
  font-size: clamp(50px, 10.4vw, 170px); letter-spacing: -0.035em; line-height: 0.88; }
.display .wline { display: block; overflow: hidden; padding: 0.02em 0.04em 0.06em; }
.display .wline > span { display: inline-block; animation: lineUp 1.25s var(--ease) both; }
.display .wline.small { font-size: 0.24em; font-weight: 500; letter-spacing: 0.62em; margin-right: -0.62em; line-height: 1.2; margin-bottom: 0.18em; }
@keyframes lineUp { from { transform: translateY(110%); } }
.hero .tagline { margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.8); animation: rise 1.25s 0.55s var(--ease) both; }
.hero .tagline::before, .hero .tagline::after { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 14px;
  vertical-align: middle; background: rgba(255,255,255,0.45); }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: clamp(28px, 3.4vw, 40px);
  animation: rise 1.25s 0.7s var(--ease) both; }
.hero .pill { --line-strong: rgba(255,255,255,0.35); --line: rgba(255,255,255,0.35); --fg: #fff; --bg: #000; color: #fff; }
.hero .pill.on { background: #fff; color: #000; border-color: #fff; }
.hero .pill.on:hover { background: transparent; color: #fff; }

/* hairline watch dial behind the liquid light */
.dial { position: absolute; z-index: -5; left: 50%; top: 50%; width: min(118vmin, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%) translate(calc(var(--mx) * 18px), calc(var(--my) * 18px));
  transition: transform 1.25s var(--ease); animation: dialIn 2.4s 0.2s var(--ease) both; }
.dial svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(255,255,255,0.32); stroke-width: 0.5; }
.dial .bezel text { fill: rgba(255,255,255,0.4); stroke: none; font-family: var(--f-sans); font-size: 5.4px; font-weight: 500;
  letter-spacing: 0.08em; text-anchor: middle; }
.dial .idx { fill: rgba(255,255,255,0.4); stroke: none; }
.dial .hand { transform-origin: 0 0; transform-box: view-box; }
.dial .hand line { stroke: rgba(255,255,255,0.45); stroke-linecap: round; }
.dial .hand.s line { stroke: rgba(255,255,255,0.6); }
.dial .hand.s circle { fill: rgba(255,255,255,0.6); stroke: none; }
@keyframes dialIn { from { opacity: 0; scale: 1.08; } }
/* let the dial glow through the colour instead of sitting on top of it */
.liquid { mix-blend-mode: screen; }

/* rotating scroll badge, bottom left */
.spinner { position: absolute; left: var(--gutter); bottom: clamp(24px, 4vw, 44px); width: 104px; height: 104px;
  display: grid; place-items: center; color: #fff; animation: fade 1.25s 0.9s var(--ease) both; }
.spinner svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.spinner text { font-family: var(--f-sans); font-size: 8.6px; letter-spacing: 0.26em; text-transform: uppercase; fill: currentColor; }
.spinner img { width: 38px; height: 38px; object-fit: contain; filter: grayscale(1) brightness(2.2); transition: transform 1.25s var(--ease); }
.spinner:hover img { transform: translateY(6px); }
.hero .meta-r { position: absolute; right: var(--gutter); bottom: clamp(24px, 4vw, 44px); text-align: right;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.7; color: rgba(255,255,255,0.75);
  animation: fade 1.25s 1s var(--ease) both; }

/* ── showroom ────────────────────────────────────────── */
#collection { padding-top: clamp(64px, 7vw, 104px); }
#collection .head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 48px; max-width: none; margin-bottom: 28px; }
#collection .head .eyebrow { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 860px) { #collection .head { grid-template-columns: 1fr; } #collection .head p { margin-top: 14px; } }
#collection .head h2 { font-size: clamp(36px, 5vw, 64px); margin-top: 14px; }
#collection .head p { margin: 0; max-width: 360px; }
.toolbar { position: sticky; top: 72px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0; margin-bottom: 22px; background: var(--bg); border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolbar .search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: var(--pill); border: 1px solid var(--line); }
.toolbar .search input { all: unset; flex: 1; font-size: 16px; color: var(--fg); min-width: 0; }
.toolbar .search input::placeholder { color: var(--mute-2); }
.toolbar select { appearance: none; min-height: 44px; padding: 0 40px 0 20px; border-radius: var(--pill);
  border: 1px solid var(--line); color: var(--fg); font-family: var(--f-sans); font-size: 14px; cursor: pointer;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 16px center; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips .pill, .toolbar .pill { min-height: 38px; padding: 7px 18px; font-size: 13px; }
.count { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 18px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }
/* project card: no chrome, the image and the title are the card */
.card { position: relative; display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0;
  cursor: pointer; text-align: left; padding: 0; color: var(--fg); }
.card .ph { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.25s var(--ease), filter 0.8s var(--ease); }
.card:hover .ph img { transform: scale(1.06); }
.card.sold .ph img { filter: grayscale(1) brightness(0.85); }
.card .ph .tl { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.card .ph .tr { position: absolute; top: 12px; right: 12px; }
.card .ph .shade { display: none; }
.card .body { flex: 1; padding: 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.card .brand { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .model { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--line); }
.card .price { font-size: 16px; white-space: nowrap; }
.card .ref { font-size: 11px; color: var(--mute); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--mute-2); }

.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px; border-top: 1px solid var(--line); }
.pager .pill { min-width: 46px; padding: 0 16px; font-variant-numeric: tabular-nums; }
.pager .pill:disabled { opacity: 0.3; cursor: default; }
.pager .gap { color: var(--mute); padding: 0 4px; }
.list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 44px 72px minmax(0, 1fr) auto auto; align-items: center; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; transition: padding 1.25s var(--ease); }
.row:hover { padding-left: 10px; }
.row .n { font-size: 11px; color: var(--mute); }
.row .th { width: 72px; height: 72px; overflow: hidden; background: var(--surface); }
.row .th img { width: 100%; height: 100%; object-fit: cover; }
.empty { text-align: center; padding: 64px 0; color: var(--mute); }

/* ── reviews (black band) ─────────────────────────────── */
.stars { letter-spacing: 3px; font-size: 13px; }
.rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 12px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.4s ease; }
.rating b { font-size: 22px; font-weight: 400; color: var(--fg); letter-spacing: -0.02em; }
.rating:hover { color: var(--fg); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.review { display: flex; flex-direction: column; gap: 18px; padding: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.review p { margin: 0; flex: 1; font-size: 18px; font-weight: 300; line-height: 1.5; letter-spacing: -0.01em; }
.review .who { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.review .who small { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── narrative / numbered pillars ────────────────────── */
.statement { font-family: var(--f-accent); font-weight: 300; letter-spacing: -0.02em;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.15; max-width: 1100px; margin: 0; }
.statement em { font-style: normal; color: var(--mute); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.pillar { padding: 34px 34px 34px 0; display: flex; flex-direction: column; gap: 18px; }
.pillar + .pillar { padding-left: 34px; border-left: 1px solid var(--line); }
.pillar h3 { font-size: 26px; font-weight: 400; }
.pillar p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.6; }

/* ── sell form (black band) ──────────────────────────── */
.sell { position: relative; }
.sell .bg, .sell .veil { display: none; }
.sell-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sell-steps { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; }
.sell-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.sell-steps li h4 { font-size: 18px; font-weight: 400; }
.sell-steps li p { margin: 6px 0 0; color: var(--mute); font-size: 14px; line-height: 1.58; }
.form { padding: clamp(24px, 3.5vw, 40px); }
.form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form .span { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.fld > span small { text-transform: none; letter-spacing: 0; color: var(--mute-2); font-size: 12px; margin-left: 6px; }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 48px; padding: 12px 0; font-family: var(--f-sans); font-size: 16px; color: var(--fg);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; outline: none;
  transition: border-color 0.4s ease; appearance: none; }
.fld select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 2px center; }
.fld select option { background: #111; color: #fff; }
.fld textarea { resize: vertical; min-height: 110px; line-height: 1.58; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--fg); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--mute-2); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px;
  border: 1px dashed var(--line-strong); color: var(--mute); cursor: pointer; text-align: center; padding: 16px;
  transition: border-color 0.4s ease, color 0.4s ease; }
.drop:hover, .drop.over { border-color: var(--fg); color: var(--fg); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); }
.form .err { color: var(--fg); font-size: 13px; text-align: center; margin: 0; }
.done { text-align: center; padding: 30px 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ── contact + footer ────────────────────────────────── */
.contact .head { max-width: none; }
.contact .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.footer { background: #000; color: #fff; padding: 72px 0 120px; --line: rgba(255,255,255,0.14); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer h5 { margin: 0 0 16px; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash-mist); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer li a, .footer li span { font-size: 14px; transition: opacity 0.4s ease; }
.footer li a:hover { opacity: 0.6; }
.footer .muted { color: var(--ash-mist); }
.footer .cond { color: #fff; }
.footer img { filter: grayscale(1) brightness(2.2); }
.footer .base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--felt); text-transform: uppercase; letter-spacing: 0.08em; }
.footer .big { font-weight: 400; letter-spacing: -0.05em; font-size: clamp(48px, 11.6vw, 210px); line-height: 0.78;
  color: #fff; opacity: 0.08; margin-top: 64px; white-space: nowrap; }

/* ── enquiry modal ───────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade 0.8s var(--ease) both; }
.modal-card { width: min(580px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; padding: clamp(24px, 4vw, 40px);
  background: #fff; color: #000; animation: rise 1.25s var(--ease) both; }
.modal-card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.modal-card .span { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { width: 100%; max-height: 92svh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal-card .grid2 { grid-template-columns: 1fr; }
}

/* ── mobile action dock ──────────────────────────────── */
.dock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: none; gap: 8px; padding: 6px;
  border-radius: var(--pill); background: rgba(255,255,255,0.94); border: 1px solid rgba(0,0,0,0.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); --fg: #000; --bg: #fff; --line: rgba(0,0,0,0.15); --line-strong: #000; color: #000; }
.dock .pill { flex: 1; min-height: 46px; }
.dock .pill.wa { background: #000; color: #fff; border-color: #000; }
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 50; background: #000; border-color: #000 !important; }

/* ── reveal on scroll ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity 1.25s var(--ease), transform 1.25s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── watch page ──────────────────────────────────────── */
.pdp { padding-top: 110px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 11px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.08em; }
.crumbs a:hover { color: var(--fg); }
.pdp-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 64px); margin-top: 24px; align-items: start; }
.stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.stage img { width: 100%; height: 100%; object-fit: cover; }
.stage .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 0;
  background: rgba(255,255,255,0.9); color: #000; border-color: transparent; }
.stage .nav.l { left: 14px; } .stage .nav.r { right: 14px; }
.stage .tag { position: absolute; left: 14px; bottom: 14px; }
.stage .zoom { position: absolute; right: 14px; bottom: 14px; }
.strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.strip button { flex: none; width: 76px; height: 76px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid transparent; opacity: 0.5; background: var(--surface); transition: opacity 0.4s ease, border-color 0.4s ease; }
.strip button.on { opacity: 1; border-color: var(--fg); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.info { position: sticky; top: 96px; padding: clamp(24px, 3vw, 36px); }
.info h1 { font-size: clamp(36px, 4.4vw, 60px); margin-top: 14px; }
.info .price { font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; margin-top: 18px; }
.spec { margin-top: 24px; border-top: 1px solid var(--line); }
.spec div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.spec dd { margin: 0; text-align: right; font-size: 14px; }
.info .ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.info .ctas .pill { width: 100%; }
.assure { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.story { max-width: 820px; margin: clamp(56px, 8vw, 104px) auto 0; }
.story p { color: var(--ink); font-size: 17px; line-height: 1.75; white-space: pre-line; margin: 20px 0 0; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.94); color: #fff; animation: fade 0.8s var(--ease) both; }
.lightbox .pill { --line: rgba(255,255,255,0.3); --line-strong: rgba(255,255,255,0.3); --fg: #fff; color: #fff; }
.lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
.lightbox .x { position: absolute; top: 18px; right: 18px; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox .nav.l { left: 16px; } .lightbox .nav.r { right: 16px; }
.lightbox .n { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); }

/* ── about ───────────────────────────────────────────── */
.hero.short { min-height: 82svh; }
.hero h1:not(.display) { font-size: clamp(44px, 8vw, 120px); font-weight: 300; letter-spacing: -0.045em; line-height: 0.9;
  animation: rise 1.25s 0.1s var(--ease) both; }
.hero h1 em { font-style: normal; color: rgba(255,255,255,0.6); }
.hero .sub { margin: 28px 0 0; max-width: 460px; font-size: 16px; line-height: 1.58; color: rgba(255,255,255,0.78);
  animation: rise 1.25s 0.4s var(--ease) both; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: center; }
.story-grid .img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.story-grid .img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.story-grid p { color: var(--ink); font-size: 16px; line-height: 1.75; margin: 20px 0 0; }
.story-grid .lead { font-family: var(--f-accent); font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; color: var(--fg); margin: 0; }
.bone { background: #000; color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.bone .label { color: var(--ash-mist); }

/* ── page-load intro: wordmark rises, a hairline fills, the curtain lifts ── */
.intro { display: none; }
.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 200; cursor: pointer; background: #000; color: #fff;
  clip-path: inset(0 0 0 0); transition: clip-path 1.25s cubic-bezier(0.77, 0, 0.18, 1); }
.intro-on body { overflow: hidden; }
.intro-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: transform 1.25s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.8s ease; }
.intro-word { display: flex; gap: 0.26em; font-size: clamp(30px, 5vw, 64px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.intro-word span { display: block; overflow: hidden; padding: 0.06em 0.02em 0.14em; }
.intro-word span i { display: block; font-style: normal; transform: translateY(110%); }
.intro-word span:nth-child(1) i { animation: introUp 1.25s 0.15s var(--ease) forwards; }
.intro-word span:nth-child(2) i { animation: introUp 1.25s 0.27s var(--ease) forwards; }
.intro-word span:nth-child(3) i { animation: introUp 1.25s 0.39s var(--ease) forwards; }
@keyframes introUp { to { transform: none; } }
.intro-line { width: min(280px, 60vw); height: 1px; background: rgba(255,255,255,0.18); position: relative; overflow: hidden; }
.intro-line::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left;
  animation: introBar 1.7s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes introBar { to { transform: scaleX(1); } }
.intro-meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; display: flex; justify-content: space-between;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash-mist); font-variant-numeric: tabular-nums; }
.intro-open .intro { clip-path: inset(0 0 100% 0); pointer-events: none; }
.intro-open .intro-core { transform: translateY(-12vh); opacity: 0; }
/* hold the hero entrance until the curtain lifts, so it plays in view */
.intro-on:not(.intro-open) .hero * { animation-play-state: paused !important; }
.intro-open .hero .liquid { animation: settle 1.8s var(--ease) both; }
@keyframes settle { from { scale: 1.15; } }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: 1fr 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .site-header .links { display: none; }
  .site-header .bar { grid-template-columns: 1fr auto; }
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .pillars, .reviews { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .sell-grid, .pdp-grid, .story-grid { grid-template-columns: 1fr; }
  .info { position: static; }
  .toolbar { position: static; }
  .row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .row .n, .row .hide-sm { display: none; }
  .row .th { width: 56px; height: 56px; }
  .orb { right: -45vw; width: 115vw; margin-top: -57vw; }
  .liquid i:nth-child(1) { width: 120vw; height: 90vw; }
  .liquid i:nth-child(2) { width: 110vw; height: 100vw; }
  .liquid i:nth-child(3) { width: 110vw; height: 110vw; }
}
@media (max-width: 560px) {
  .card .model { font-size: 16px; }
  .card .price { font-size: 14px; }
  .card .ref { display: none; }
  .form .grid2 { grid-template-columns: 1fr; }
  .review { padding: 26px 22px; }
  .review p { font-size: 16px; }
  .dock { display: flex; }
  .fab { display: none; }
  .footer .cols { grid-template-columns: 1fr; }
  .site-header .right .pill:first-child { display: none; }
  .site-header .mark span { font-size: 14px; }
  .card .ph .tr, .card .ph .tl .badge:first-child { display: none; }
  .spinner { width: 84px; height: 84px; bottom: 96px; }
  .spinner img { width: 30px; height: 30px; }
  .hero .meta-r { display: none; }
  .hero .tagline { font-size: 11px; letter-spacing: 0.16em; }
  .hero .tagline::before, .hero .tagline::after { width: 16px; margin: 0 8px; }
  .hero .ctas .pill { padding: 12px 24px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .intro-word span i { transform: none; }
}