/* ============================================================
   AdultWebStudio: velvet-luxe design system
   Adult-industry SEO agency · arm of Visible Online
   ============================================================ */

/* ---- Tokens ---- */
:root {
  /* Color: OKLCH, committed dark velvet + honey-gold accent */
  /* Surface is pure neutral (chroma 0) on purpose: this is an image-led
     site, so photography carries every bit of colour. A tinted surface
     would compete with it. */
  --bg:            oklch(0.055 0 0);
  --bg-deep:       oklch(0.020 0 0);
  --surface:       oklch(0.130 0 0);
  --surface-2:     oklch(0.190 0 0);
  --ink:           oklch(0.970 0 0);   /* 19.2:1 on bg */
  --muted:         oklch(0.720 0 0);   /*  8.4:1 on bg */
  --muted-dim:     oklch(0.580 0 0);
  /* Rose splits in two: bright enough to read on black, deep enough to
     carry white button text. One value cannot do both. */
  --primary:       oklch(0.540 0.180 343);  /* fills, white text 5.6:1 */
  --primary-bright:oklch(0.620 0.200 343);
  --accent:        oklch(0.700 0.200 343);  /* marks on black, 7.1:1 */
  --accent-deep:   oklch(0.540 0.180 343);
  --plum:          oklch(0.450 0.130 310);  /* second colour, white 7.9:1 */
  --line:          oklch(1 0 0 / 0.10);
  --line-strong:   oklch(1 0 0 / 0.20);
  --gold-glow:     oklch(0.700 0.200 343 / 0.20);

  /* Type */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;

  /* Fluid scale (1.25 ratio) */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.15rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
  --step-4:  clamp(2.7rem, 2rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.3rem, 2.2rem + 5vw, 5.5rem);

  /* Space */
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --wrap: 1200px;
  --wrap-narrow: 780px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  /* Z-scale */
  --z-nav: 100;
  --z-backdrop: 200;
  --z-modal: 210;

  --radius: 0px;
  --radius-lg: 0px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
/* Tracking is size-dependent: a 88px Bodoni line needs tightening that would
   close up a 24px one. Floor stays above -0.04em so letters never touch. */
h1 { font-size: var(--step-5); letter-spacing: -0.035em; }
h2 { font-size: var(--step-4); letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
/* Second clause of a heading carries the rose. Used on headings that split
   naturally in two, not on every one, or it becomes its own tic. */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
p { text-wrap: pretty; }
.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.55; max-width: 60ch; }

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.gold { color: var(--accent); }
.serif-italic { font-style: italic; }

/* ---- Mood photography is monochrome ----
   Rose is then the only colour on the page, and stock bought from different
   sources stops fighting over colour temperature.
   The desaturation is BAKED INTO THE FILES, not applied here with filter().
   These same images are scaled and clip-path animated, and a runtime filter
   forces the browser to recompute it on every frame of those animations
   instead of compositing a finished layer. That was measurably the wrong
   trade once motion was added.
   Client website screenshots stay in colour on purpose: desaturating them
   would hide the design the client actually paid for. */

/* ---- Layout ---- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: var(--wrap-narrow); }
section { padding-block: var(--space-section); }
.stack > * + * { margin-top: 1.1rem; }

/* ---- Buttons ---- */
.btn {
  --pad-y: 0.95rem; --pad-x: 1.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 0;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  /* No will-change here. It promoted every button on the page to its own
     compositor layer permanently, for a 2px hover lift that is cheap anyway.
     will-change is for elements about to animate, not for idle ones. */
  transition: transform var(--dur) var(--ease-out),
              background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--primary-bright), var(--primary));
  color: var(--ink);
  box-shadow: 0 8px 24px -12px oklch(0.54 0.18 343 / 0.9);
}
.btn--primary:hover { box-shadow: 0 14px 34px -12px oklch(0.62 0.20 343 / 0.9); }
/* White on the deep rose, never dark text: a saturated mid-luminance fill
   reads muddy under dark type (Helmholtz-Kohlrausch). White clears 5.6:1. */
.btn--gold {
  background: linear-gradient(135deg, var(--primary), oklch(0.480 0.160 343));
  color: oklch(0.99 0 0);
  box-shadow: 0 10px 30px -14px var(--gold-glow);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn .arw { transition: transform 0.3s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

/* ---- Link with gold underline sweep ---- */
.ln {
  color: var(--accent);
  font-weight: 600;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ln::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.ln:hover::after { transform: scaleX(1); }
.ln .arw { transition: transform 0.3s var(--ease-out); }
.ln:hover .arw { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
/* Solid (no backdrop-filter): a blurred nav becomes the containing block for the
   fixed full-screen mobile overlay, trapping it in the bar for a frame when
   scrolled (menu appears to open in two stages). Solid bg avoids that entirely. */
.nav.scrolled {
  background: oklch(0.055 0 0);
  border-bottom-color: var(--line);
}
.nav.open {
  background: transparent;
  border-bottom-color: transparent;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.7rem;
}
/* Nav button is a utility, not a hero CTA: smaller than a page button. */
.nav__cta .btn {
  --pad-y: 0.62rem;
  --pad-x: 1.15rem;
  font-size: 0.8rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Height-driven, width auto: the mark is 1.66:1, so a fixed square would
   squash it. It is the whole brand in the header now, so it gets more height. */
.brand__mark { height: 38px; width: auto; flex: none; display: block; }
@media (max-width: 940px) { .brand__mark { height: 32px; } }
.brand b { color: var(--accent); font-weight: 600; }

/* Footer carries the full lockup (mark plus wordmark), so no text beside it. */
.brand--footer { display: block; }
.brand--footer img {
  width: clamp(130px, 11vw, 168px);
  height: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.25s ease;
  position: relative;
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; background: none; border: 0; color: var(--ink); padding: 0.4rem; }
.nav__toggle svg { width: 26px; height: 26px; }

.nav__mobile-extra { display: none; }

@media (max-width: 940px) {
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; position: relative; z-index: 3; color: var(--ink); }
  .brand { position: relative; z-index: 3; }

  .nav__links {
    position: fixed; inset: 0;
    z-index: 2;
    margin: 0; padding: 6rem clamp(1.5rem, 1rem + 4vw, 4rem) 2.5rem;
    list-style: none;
    display: flex; flex-direction: column; justify-content: center; gap: 0;
    background:
      radial-gradient(130% 75% at 88% -5%, oklch(0.34 0.13 343 / 0.60), transparent 60%),
      radial-gradient(80% 50% at 10% 100%, oklch(0.24 0.08 343 / 0.5), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg-deep));
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
    overflow-y: auto;
  }
  .nav.open .nav__links { opacity: 1; visibility: visible; transform: none; }

  .nav__links > li:not(.nav__mobile-extra) { border-bottom: 1px solid var(--line); }
  .nav__links > li:not(.nav__mobile-extra) a {
    display: block; padding: 1.05rem 0;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.7rem, 1.3rem + 3.4vw, 2.5rem);
    color: var(--ink); letter-spacing: -0.01em;
    opacity: 0; transform: translateY(14px);
  }
  .nav.open .nav__links > li:not(.nav__mobile-extra) a { animation: menuItem 0.55s var(--ease-out) forwards; }
  .nav.open .nav__links > li:nth-child(1) a { animation-delay: 0.05s; }
  .nav.open .nav__links > li:nth-child(2) a { animation-delay: 0.10s; }
  .nav.open .nav__links > li:nth-child(3) a { animation-delay: 0.15s; }
  .nav.open .nav__links > li:nth-child(4) a { animation-delay: 0.20s; }
  .nav.open .nav__links > li:nth-child(5) a { animation-delay: 0.25s; }
  .nav.open .nav__links > li:nth-child(6) a { animation-delay: 0.30s; }
  @keyframes menuItem { to { opacity: 1; transform: none; } }

  .nav__mobile-extra {
    display: flex; flex-direction: column; gap: 1rem;
    margin-top: 2.4rem; border-bottom: 0 !important;
    opacity: 0; animation: menuItem 0.55s var(--ease-out) 0.34s forwards;
  }
  .nav.open .nav__mobile-extra { opacity: 0; }
  .nav__mobile-extra .btn { justify-content: center; font-size: var(--step-0); }
  .nav__mobile-extra .mx {
    display: flex; align-items: center; gap: 0.7rem;
    color: var(--muted); font-size: 1rem; font-weight: 500;
  }
  .nav__mobile-extra .mx svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

  @media (prefers-reduced-motion: reduce) {
    .nav__links { transition: opacity 0.2s linear, visibility 0.2s; transform: none; }
    .nav__links > li a, .nav__mobile-extra { animation: none !important; opacity: 1 !important; transform: none !important; }
  }
}

/* ============================================================
   HERO
   ============================================================ */
/* Flex column: keeps the hero content vertically centred at any height */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: clamp(8rem, 6rem + 8vw, 12rem);
  padding-bottom: 0;
  overflow: hidden;
}
.hero > .wrap { flex: 1 0 auto; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }

/* Mobile: fill the screen on open so the whole hero is visible.
   svh accounts for mobile browser chrome; vh is the fallback. */
@media (max-width: 940px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero > .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Short phones (iPhone SE, older Androids): tighten so the hero still fits
   one screen instead of overflowing it. */
@media (max-width: 940px) and (max-height: 740px) {
  .hero { padding-top: 6.5rem; }
  .hero > .wrap { padding-bottom: 1.5rem; }
  .hero > .wrap h1 { font-size: 2.75rem; line-height: 1.04; }
  .hero__sub { margin-top: 0.9rem; font-size: 1rem; }
  .hero__actions { margin-top: 1.5rem; gap: 0.75rem; }
}
/* Image-led hero: the photograph is the design, type sits on top of it. */
.hero__img {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
}
/* Veil keeps body copy at full contrast over the photo without washing it out. */
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, oklch(0 0 0 / 0.82) 0%, oklch(0 0 0 / 0.55) 38%, oklch(0 0 0 / 0.88) 100%),
    linear-gradient(90deg, oklch(0 0 0 / 0.86) 0%, oklch(0 0 0 / 0.30) 62%, oklch(0 0 0 / 0.10) 100%);
}

/* Editorial rows: full-bleed image beside type. Replaces the icon-card grid. */
.vrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  margin-top: clamp(3rem, 2rem + 4vw, 6.5rem);
}
.vrow__img { position: relative; overflow: hidden; }
.vrow__img img {
  width: 100%; height: clamp(300px, 46vh, 580px);
  object-fit: cover; display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .vrow__img img { transition: transform 1.4s var(--ease-out); }
}
.vrow__body { padding-inline: clamp(1.25rem, 4vw, 5rem); max-width: 54ch; }
.vrow__body h3 { font-size: var(--step-3); }
.vrow__body p { margin-top: 1rem; color: var(--muted); }
.vrow__body .ln { margin-top: 1.6rem; display: inline-flex; }
.vrow--flip .vrow__img { order: 2; }
@media (max-width: 860px) {
  .vrow { grid-template-columns: 1fr; gap: 0; }
  .vrow--flip .vrow__img { order: 0; }
  .vrow__body { padding-block: 1.8rem; padding-inline: 1.25rem; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 70% -10%, oklch(0.34 0.13 343 / 0.55), transparent 60%),
    radial-gradient(80% 60% at 15% 20%, oklch(0.24 0.08 343 / 0.5), transparent 55%),
    var(--bg);
}
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("velvet-texture.jpg?v=1785099460");
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: screen;
}
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 55vw; height: 55vw;
  max-width: 700px; max-height: 700px;
  top: -18%; right: -8%;
  background: radial-gradient(circle, var(--gold-glow), transparent 65%);
  filter: blur(20px);
  animation: drift 16s var(--ease-out) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); opacity: 0.85; }
  100% { transform: translate(-6%, 5%) scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__glow { animation: none; } }

.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.hero__sub { margin-top: 1.6rem; max-width: 56ch; }
.hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Button rows: gap spaces both axes, so wrapped buttons never touch on mobile. */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__trust {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.trust-item { display: flex; flex-direction: column; gap: 0.15rem; }
.trust-item b {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
  font-weight: 600;
  line-height: 1;
}
.trust-item span { font-size: 0.85rem; color: var(--muted-dim); letter-spacing: 0.02em; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.sec-head { max-width: 62ch; }
.sec-head h2 { margin-top: 0; }
.sec-head p { margin-top: 1.1rem; color: var(--muted); font-size: var(--step-1); line-height: 1.5; }
.sec-head--center { margin-inline: auto; text-align: center; }
/* .sec-head carries no bottom margin: every block that follows it (grids,
   tiers) supplies its own top margin. .form-panel did not, so the form sat
   flush against the intro text. */
.sec-head + .form-panel { margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.sec-head--center .label { justify-content: center; }

/* ============================================================
   MANIFESTO / WHY
   ============================================================ */
.why { background: var(--bg-deep); position: relative; }
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.why__quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.why__quote em { color: var(--accent); font-style: italic; font-weight: 500; }
.why__body p + p { margin-top: 1.1rem; }
.why__body { color: var(--muted); }
@media (max-width: 820px) { .why__grid { grid-template-columns: 1fr; } }

/* ============================================================
   VERTICALS
   ============================================================ */
.verticals__grid {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
/* Editorial column, not a card: no box, no fill, one rule on top. The boxed
   icon-card grid is the single most saturated AI layout, so it's gone. */
.vcard {
  position: relative;
  padding: 1.6rem 0 0;
  border-top: 2px solid var(--accent);
  background: none;
  transition: border-color 0.4s ease;
}
.vcard:hover { border-top-color: var(--ink); }
.vcard h3 { font-size: var(--step-2); }
.vcard p { margin-top: 0.8rem; color: var(--muted); font-size: var(--step--1); line-height: 1.65; }
/* Was a row of pills. Now a plain stacked list: quieter and less templated. */
.vcard ul {
  margin-top: 1.2rem; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.45rem;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}
.vcard li {
  font-size: 0.82rem;
  color: var(--muted-dim);
  padding: 0;
  border: 0;
}

/* ============================================================
   SERVICES (numbered editorial list)
   ============================================================ */
.services__list { margin-top: clamp(2rem, 1rem + 4vw, 3.5rem); border-top: 1px solid var(--line); }
.srv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s ease;
}
.srv:hover { background: oklch(1 0 0 / 0.015); }
.srv__no {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
  line-height: 1;
  font-weight: 500;
}
.srv__main h3 { font-size: var(--step-2); }
.srv__main p { margin-top: 0.6rem; color: var(--muted); max-width: 58ch; }
.srv__price {
  text-align: right;
  white-space: nowrap;
  color: var(--muted-dim);
  font-size: var(--step--1);
}
.srv__price b { display: block; color: var(--ink); font-size: var(--step-1); font-family: var(--font-display); font-weight: 600; }
@media (max-width: 720px) {
  .srv { grid-template-columns: 1fr; }
  .srv__price { text-align: left; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.work__grid {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
@media (max-width: 640px) { .work__grid { grid-template-columns: 1fr; } }
.wcard {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease-out), border-color 0.4s ease;
}
.wcard:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.wcard__shot {
  aspect-ratio: 16 / 10;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 90% at 30% 20%, oklch(0.34 0.13 343 / 0.7), transparent),
    linear-gradient(160deg, var(--surface-2), var(--bg-deep));
  color: var(--muted-dim);
  overflow: hidden;
}
.wcard__shot img { width: 100%; height: 100%; object-fit: cover; }
.wcard__ph {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.wcard__ph svg { width: 34px; height: 34px; opacity: 0.6; }
.wcard__body { padding: 1.5rem 1.5rem 1.8rem; }
.wcard__tag { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.wcard__body h3 { font-size: var(--step-1); margin-top: 0.5rem; }
.wcard__body p { margin-top: 0.6rem; color: var(--muted); font-size: var(--step--1); }
.wcard__metric { margin-top: 1.1rem; display: flex; gap: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.wcard__metric div b { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); display:block; line-height:1; }
.wcard__metric div span { font-size: 0.75rem; color: var(--muted-dim); }

/* ============================================================
   PROCESS
   ============================================================ */
.process { background: var(--bg-deep); }
.steps {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  counter-reset: step;
}
/* Borderless flow, not another card grid: a thin gold rule reads as a sequence */
.step {
  padding: 1.4rem 0 0;
  border-top: 2px solid var(--accent);
  position: relative;
}
.step__no {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.2em;
}
.step h3 { font-size: var(--step-1); margin-top: 0.8rem; }
.step p { margin-top: 0.5rem; color: var(--muted); font-size: var(--step--1); }

/* ============================================================
   PRICING
   ============================================================ */
.tiers {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  align-items: start;
}
/* Tiers stay cards: comparison is genuinely what a card is for. But they sit
   on the black rather than on a filled panel, so they read editorial. */
.tier {
  padding: 2.2rem 2rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.tier--feature {
  border-color: var(--accent);
  background: linear-gradient(180deg, oklch(0.24 0.08 343 / 0.6), var(--surface));
  box-shadow: 0 20px 60px -30px var(--gold-glow);
}
.tier__flag {
  position: absolute; top: -0.8rem; right: 1.6rem;
  background: linear-gradient(135deg, var(--primary), oklch(0.480 0.160 343));
  color: oklch(0.99 0 0);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.8rem; border-radius: 0;
}
.tier__name { font-family: var(--font-display); font-size: var(--step-1); }
.tier__price { font-family: var(--font-display); font-size: var(--step-3); color: var(--ink); line-height: 1; margin-top: 0.6rem; }
.tier__price small { font-family: var(--font-body); font-size: 0.9rem; color: var(--muted-dim); font-weight: 500; }
.tier__desc { color: var(--muted); font-size: var(--step--1); margin-top: 0.6rem; min-height: 2.8em; }
.tier ul { list-style: none; padding: 0; margin: 1.4rem 0; display: flex; flex-direction: column; gap: 0.7rem; }
.tier li { display: flex; gap: 0.6rem; font-size: var(--step--1); color: var(--muted); }
.tier li svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 0.2rem; }
.tier .btn { margin-top: auto; justify-content: center; }
.pricing__note { margin-top: 2rem; text-align: center; color: var(--muted-dim); font-size: var(--step--1); }

/* ============================================================
   TRUST / DISCRETION
   ============================================================ */
.trust-band__grid {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
/* Borderless: airy text blocks so this doesn't repeat the card rhythm */
.tb {
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 2px solid var(--accent);
  background: none;
}
.tb h3 { font-size: var(--step-1); margin-top: 0; }
.tb p { margin-top: 0.5rem; color: var(--muted); font-size: var(--step--1); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin-inline: auto; margin-top: clamp(2rem,1rem + 3vw,3rem); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
}
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm {
  flex: none;
  width: 26px; height: 26px;
  position: relative;
  transition: transform 0.4s var(--ease-out);
}
.faq summary .pm::before, .faq summary .pm::after {
  content: ""; position: absolute; background: var(--accent);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.faq summary .pm::before { width: 14px; height: 2px; }
.faq summary .pm::after { width: 2px; height: 14px; transition: transform 0.4s var(--ease-out); }
.faq details[open] summary .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq details p { margin-top: 0.9rem; color: var(--muted); max-width: 68ch; }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
/* Background lives in one place only (see the .cta rule further down). A second
   .cta rule used to override this one, which is how a stale warm image survived
   the palette change unnoticed. */
.cta {
  position: relative;
  overflow: hidden;
}
.cta__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: start;
}
.cta h2 { max-width: 14ch; }
.cta__lede { margin-top: 1.2rem; color: var(--muted); font-size: var(--step-1); }
.cta__direct { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.cta__direct a {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: var(--step-0); color: var(--ink);
  transition: color 0.25s ease;
}
.cta__direct a:hover { color: var(--accent); }
.cta__direct svg { width: 22px; height: 22px; color: var(--accent); flex: none; }

/* Form */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit;
  color: var(--ink);
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: oklch(1 0 0 / 0.06);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; cursor: pointer; }
.form .btn { justify-content: center; margin-top: 0.4rem; }
.form__note { font-size: 0.78rem; color: var(--muted-dim); }
.form__ok {
  display: none;
  padding: 1rem 1.2rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: oklch(0.70 0.20 343 / 0.10);
  color: var(--ink);
  font-size: var(--step--1);
}
@media (max-width: 820px) { .cta__grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: clamp(4rem, 3rem + 3vw, 6.5rem) clamp(2rem, 1.5rem + 1vw, 3rem); }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}
.footer__brand p { margin-top: 1rem; color: var(--muted); font-size: var(--step--1); max-width: 34ch; }
.footer h4 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dim); font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.footer ul a { color: var(--muted); font-size: var(--step--1); transition: color 0.2s ease; }
.footer ul a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  padding-top: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  color: var(--muted-dim); font-size: 0.8rem;
}
.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--accent); }
@media (max-width: 720px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   REVEAL ANIMATION (enhances an already-visible default)
   ============================================================ */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Default: quiet. Text should settle, not leap. Shorter travel than before,
     because an identical 22px jump on every block is the templated reflex. */
  .js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: 0.09s; }
  .js .reveal.d2 { transition-delay: 0.18s; }
  .js .reveal.d3 { transition-delay: 0.27s; }
  .js .reveal.d4 { transition-delay: 0.36s; }

  /* ---- Display headings: lines rise from behind a mask ----
     The fashion-house move, and the reason the hero reads expensive. The
     block itself does not move; only the type inside each masked line does. */
  .js .reveal.reveal--type { opacity: 1; transform: none; transition: none; }
  .rv { display: block; overflow: hidden; padding-bottom: 0.06em; }
  .js .reveal--type .rv > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.05s var(--ease-out);
  }
  .js .reveal--type.in .rv > span { transform: none; }
  .js .reveal--type .rv:nth-child(2) > span { transition-delay: 0.10s; }
  .js .reveal--type .rv:nth-child(3) > span { transition-delay: 0.20s; }

  /* ---- Photographs: wipe open, then the image settles out of a slow push-in.
     Gallery language rather than a fade. ---- */
  .js .reveal--img {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease-out);
  }
  .js .reveal--img.in { clip-path: inset(0 0 0 0); }
  .js .reveal--img img {
    transform: scale(1.07);
    transition: transform 1.5s var(--ease-out);
  }
  .js .reveal--img.in img { transform: none; }

  /* Slow push-in on hover. Deliberately placed AFTER the reveal reset above:
     both selectors weigh the same, so source order decides, and without this
     the settled `transform: none` would cancel the hover entirely.
     Long and small on purpose, so the image breathes rather than reacts. */
  @media (hover: hover) {
    .js .reveal--img.in:hover img,
    .vrow__img:hover img { transform: scale(1.03); }
  }

  /* Hero photograph settles once on load. Not a loop, not a Ken Burns drift. */
  .js .hero__img {
    animation: hero-settle 1.8s var(--ease-out) both;
  }
  @keyframes hero-settle {
    from { transform: scale(1.06); }
    to   { transform: none; }
  }
}

/* ---- Page hero (subpages) ---- */
.phero {
  position: relative;
  padding-top: clamp(9rem, 7rem + 6vw, 13rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  overflow: hidden;
}
.phero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 80% at 80% -20%, oklch(0.34 0.13 343 / 0.5), transparent 55%),
    var(--bg);
}
.phero h1 { font-size: var(--step-4); max-width: 18ch; }
.phero p { margin-top: 1.2rem; }
.crumb { color: var(--muted-dim); font-size: 0.85rem; margin-bottom: 1rem; }
.crumb a:hover { color: var(--accent); }

/* prose */
.prose p { color: var(--muted); margin-top: 1rem; max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul { color: var(--muted); margin-top: 1rem; padding-left: 1.2rem; }
.prose li { margin-top: 0.5rem; }

/* ============================================================
   MULTI-STEP FORM
   ============================================================ */
.form-panel {
  padding: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  box-shadow: 0 30px 80px -50px oklch(0 0 0 / 0.9);
}
.multistep { display: grid; gap: 1rem; }
.ms-progress { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.ms-dot { width: 34px; height: 3px; border-radius: 0; background: var(--line-strong); transition: background 0.35s var(--ease-out); }
.ms-dot.active { background: var(--accent); }
.ms-step { display: grid; gap: 0.35rem; animation: msIn 0.45s var(--ease-out); }
.ms-step[hidden] { display: none !important; }
@keyframes msIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-step { animation: none; } }
.ms-step h3 { font-size: var(--step-2); }
.ms-sub { color: var(--muted); font-size: var(--step--1); margin-bottom: 0.7rem; }
.ms-options { display: grid; gap: 0.65rem; margin-top: 0.2rem; }
.ms-option {
  display: flex; align-items: center; gap: 0.85rem;
  text-align: left; width: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: oklch(1 0 0 / 0.03);
  color: var(--ink);
  font-size: var(--step-0); font-weight: 500;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s var(--ease-out);
}
.ms-option .ms-ico { width: 21px; height: 21px; color: var(--accent); flex: none; }
.ms-option .ms-arrow { margin-left: auto; color: var(--accent); transition: transform 0.3s var(--ease-out); }
.ms-option:hover { border-color: var(--accent); background: oklch(0.70 0.20 343 / 0.08); transform: translateX(3px); }
.ms-option:hover .ms-arrow { transform: translateX(4px); }
.ms-option.selected { border-color: var(--accent); background: oklch(0.70 0.20 343 / 0.14); }
.ms-input {
  font: inherit; color: var(--ink); width: 100%;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 0; padding: 0.95rem 1rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ms-input::placeholder { color: var(--muted-dim); }
.ms-input:focus { outline: none; border-color: var(--accent); background: oklch(1 0 0 / 0.06); }
textarea.ms-input { resize: vertical; min-height: 110px; margin-top: 0.7rem; }
.ms-error { color: oklch(0.72 0.16 25); font-size: 0.82rem; min-height: 1.1em; margin-top: 0.3rem; }
.ms-nav { display: flex; gap: 0.7rem; margin-top: 0.8rem; }
.ms-nav .btn { flex: 1; justify-content: center; }
.ms-nav .ms-back { flex: 0.7; }
.ms-note { font-size: 0.78rem; color: var(--muted-dim); margin-top: 0.9rem; }

/* ============================================================
   STICKY ACTION DOCK (WhatsApp-first)
   ============================================================ */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none; /* mobile-only; shown via media query below */
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem clamp(0.8rem, 0.5rem + 2vw, 1.6rem);
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  background: oklch(0.13 0 0 / 0.90);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line-strong);
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-out), opacity 0.3s ease;
}
.dock.dock--in { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .dock { transition: opacity 0.2s linear; } }
.dock__mini {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 0.35rem 0.7rem;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  transition: color 0.2s ease, background 0.2s ease;
}
.dock__mini svg { width: 22px; height: 22px; color: var(--accent); }
.dock__mini:hover { color: var(--ink); background: oklch(1 0 0 / 0.04); }
.dock__wa {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0;
  background: linear-gradient(135deg, var(--primary), oklch(0.480 0.160 343));
  color: oklch(0.99 0 0);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -14px var(--gold-glow);
  transition: transform 0.5s var(--ease-out), box-shadow 0.3s ease;
}
.dock__wa svg { width: 20px; height: 20px; }
.dock__wa:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px var(--gold-glow); }

/* Dock is mobile-only: on desktop the header "Start a project" button covers this */
@media (max-width: 940px) {
  .dock { display: flex; }
  body.has-dock { padding-bottom: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock__wa { transition: none; }
}

/* Portfolio screenshot overlays the placeholder; onerror removes it to reveal placeholder */
.wcard__shot img { position: absolute; inset: 0; }

/* ============================================================
   18+ AGE GATE (SEO-safe overlay; content stays in the DOM)
   ============================================================ */
.agegate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 90% at 70% -10%, oklch(0.34 0.13 343 / 0.7), transparent 60%),
    oklch(0.075 0 0 / 0.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.agegate__card {
  max-width: 460px; width: 100%; text-align: center;
  padding: clamp(2rem, 1.4rem + 3vw, 3rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  box-shadow: 0 40px 100px -40px oklch(0 0 0 / 0.9);
}
.agegate__logo { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 1.2rem; }
.agegate__logo b { color: var(--accent); font-weight: 600; }
.agegate__card h2 { font-size: var(--step-2); }
.agegate__card p { color: var(--muted); margin-top: 0.8rem; font-size: var(--step--1); }
.agegate__actions { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; }
.agegate__actions .btn { justify-content: center; }
.agegate__leave { color: var(--muted-dim); font-size: 0.82rem; margin-top: 0.4rem; }
.agegate__leave a { color: var(--muted); text-decoration: underline; }
.agegate__fine { margin-top: 1.4rem; font-size: 0.72rem; color: var(--muted-dim); line-height: 1.5; }
html.agegate-open, body.agegate-open { overflow: hidden; }

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie {
  position: fixed; z-index: 95;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 560px; margin-inline: auto;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: oklch(0.13 0 0 / 0.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -30px oklch(0 0 0 / 0.9);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
}
.cookie p { font-size: 0.82rem; color: var(--muted); flex: 1 1 240px; line-height: 1.5; }
.cookie p a { color: var(--accent); }
.cookie__btns { display: flex; gap: 0.6rem; flex: none; }
.cookie__btns .btn { padding: 0.6rem 1.1rem; font-size: 0.8rem; }
@media (max-width: 940px) { .cookie { bottom: 88px; } }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}
.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--surface), var(--bg-deep));
  padding: 1.8rem 1.7rem 2rem;
  transition: transform var(--dur) var(--ease-out), border-color 0.4s ease;
}
.post-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.post-card__cat { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.post-card h3 { font-size: var(--step-1); margin-top: 0.7rem; line-height: 1.15; }
.post-card p { color: var(--muted); font-size: var(--step--1); margin-top: 0.7rem; flex: 1; }
.post-card__meta { margin-top: 1.2rem; font-size: 0.78rem; color: var(--muted-dim); display: flex; gap: 0.6rem; align-items: center; }
.post-card__meta .ln { font-size: 0.82rem; margin-left: auto; }

/* Article layout */
.article { max-width: 760px; margin-inline: auto; }
.article__meta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; color: var(--muted-dim); font-size: 0.85rem; margin-top: 1rem; }
.article__meta .cat { color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; }
.article__body { margin-top: 2.5rem; }
.article__body h2 { font-size: var(--step-2); margin-top: 2.6rem; }
.article__body h3 { font-size: var(--step-1); margin-top: 1.8rem; }
.article__body p { color: var(--ink); opacity: 0.9; margin-top: 1.1rem; line-height: 1.75; }
.article__body ul, .article__body ol { color: var(--ink); opacity: 0.9; margin-top: 1.1rem; padding-left: 1.3rem; line-height: 1.7; }
.article__body li { margin-top: 0.5rem; }
.article__body strong { color: var(--ink); opacity: 1; }
.article__cta {
  margin-top: 3rem; padding: 2rem 1.8rem;
  border: 1px solid var(--accent); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, oklch(0.24 0.08 343 / 0.5), var(--surface));
  text-align: center;
}
.article__cta h3 { font-size: var(--step-2); }
.article__cta p { color: var(--muted); margin-top: 0.6rem; }
.article__cta .btn { margin-top: 1.4rem; }
.article__back { display: inline-flex; margin-top: 3rem; color: var(--muted); }
.article__back:hover { color: var(--accent); }

/* ============================================================
   PROJECT / CASE-STUDY PAGE
   ============================================================ */
.project-hero-img {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.project-hero-img img { width: 100%; display: block; }
.project-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.project-meta div b { display: block; font-family: var(--font-display); color: var(--accent); font-size: var(--step-1); line-height: 1; }
.project-meta div span { font-size: 0.8rem; color: var(--muted-dim); }
.pgallery { margin-top: clamp(2rem, 1rem + 3vw, 3rem); columns: 3 260px; column-gap: 1rem; }
.pgallery figure {
  break-inside: avoid; margin: 0 0 1rem;
  border-radius: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.pgallery img { width: 100%; display: block; }

/* Keyword chips + result tiles for case studies */
.kw-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.kw-list span {
  font-size: 0.85rem; color: var(--ink);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: oklch(1 0 0 / 0.03);
}
.result-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem; margin-top: 1.6rem;
}
.result-tiles .tile {
  padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface), var(--bg-deep));
}
.result-tiles .tile b {
  display: block; font-family: var(--font-display); font-size: var(--step-3);
  color: var(--accent); line-height: 1;
}
.result-tiles .tile span { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }

/* Keyword ranking table (case studies). Scrolls inside its own box on mobile. */
.table-scroll { overflow-x: auto; margin-top: 2rem; }
.rank-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.94rem; }
.rank-table th {
  text-align: left; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dim);
  padding: 0 0 0.85rem; border-bottom: 1px solid var(--line-strong);
}
.rank-table td { padding: 0.9rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table td:first-child { color: var(--ink); }
.rank-table th:not(:first-child),
.rank-table td:not(:first-child) { text-align: right; white-space: nowrap; padding-left: 1.2rem; }
.rank-table .pos { font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); }
.src-note { margin-top: 1.4rem; color: var(--muted-dim); font-size: 0.85rem; }

/* ============================================================
   ATMOSPHERE: full-bleed image band (breaks the card rhythm)
   ============================================================ */
.band {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(300px, 34vw, 480px);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  background: url(img/boudoir-chaise-bw.jpg?v=1785099460) center/cover no-repeat;
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.02 0 0 / 0.64), oklch(0.02 0 0 / 0.82));
}
.band > .wrap { position: relative; z-index: 1; }
.band p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.band p em { font-style: italic; color: var(--accent); }

/* Atmospheric photo behind the CTA blocks, kept dark for contrast. The rose
   wash sits on the accent hue (343) so the glow matches the buttons. */
.cta {
  background:
    radial-gradient(90% 120% at 80% 0%, oklch(0.34 0.13 343 / 0.55), transparent 60%),
    linear-gradient(180deg, oklch(0.02 0 0 / 0.84), oklch(0.02 0 0 / 0.93)),
    url(img/agency-mirror-bw.jpg?v=1785099460) center/cover no-repeat,
    var(--bg-deep);
}

/* Desktop: the gold "Start a project" button already covers Contact, so hide the
   duplicate nav item. Mobile keeps it (the button is hidden there). */
@media (min-width: 941px) { .nav__links .nav-contact { display: none; } }

/* The gold hover glow overlay was swallowing mouse events and blocking text
   selection on the vertical cards. It is decorative, so ignore pointer input. */
.vcard::before { pointer-events: none; }

/* Whole case card is clickable, not just the "View project" line */
.wcard { position: relative; }
.card-hit { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-lg); }
.card-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.wcard:hover .ln::after { transform: scaleX(1); }
.wcard:hover .ln .arw { transform: translateX(3px); }



/* ============================================================
   LANGUAGE SWITCH  ·  NL | EN
   Sits directly before the burger so it survives on mobile, where
   .nav__cta is hidden. Text, not flags: a flag names a country, and
   Dutch is spoken in two of the ones this site serves.
   ============================================================ */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  flex: none;
}
.lang a { color: var(--muted-dim); transition: color 0.25s ease; }
.lang a:hover { color: var(--accent); }
.lang__on { color: var(--ink); }
.lang__sep { color: var(--line-strong); font-weight: 400; }

@media (max-width: 940px) {
  /* Left of the burger, above the full-screen menu overlay. */
  .lang { position: relative; z-index: 3; margin-left: auto; margin-right: 0.2rem; }
  .nav__inner { gap: 0.9rem; }
}