/* Serendipity Blue — site styles */

:root {
  /* Palette: blue (default) */
  --ink: oklch(0.18 0.04 260);
  --ink-2: oklch(0.26 0.05 260);
  --brand-gold: oklch(0.78 0.12 85); /* warm gold from storefront sign */
  --brand-navy: oklch(0.30 0.12 260); /* navy blue from storefront sign */
  --paper: oklch(0.975 0.008 80);
  --paper-2: oklch(0.94 0.012 80);
  --rule: oklch(0.86 0.02 80);
  --muted: oklch(0.45 0.02 260);
  --accent-1: oklch(0.55 0.22 295); /* electric purple */
  --accent-2: oklch(0.72 0.13 260); /* periwinkle */
  --accent-3: oklch(0.68 0.20 35);  /* fire orange */
  --accent-4: oklch(0.62 0.20 15);  /* fire red */
  --accent-5: oklch(0.85 0.10 200); /* sky */
  --accent-6: oklch(0.86 0.09 95);  /* honey */

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --script: "Pinyon Script", cursive;

  --maxw: 1520px;
  --pad-x: clamp(16px, 3vw, 40px);

  /* fantasy gradients reused as imagery */
  --grad-purple: linear-gradient(135deg, oklch(0.28 0.12 295), oklch(0.58 0.25 295) 45%, oklch(0.82 0.18 320));
  --grad-fire:   linear-gradient(140deg, oklch(0.30 0.13 25), oklch(0.62 0.22 28) 40%, oklch(0.85 0.18 75));
  --grad-peri:   linear-gradient(150deg, oklch(0.32 0.10 250), oklch(0.65 0.15 250) 50%, oklch(0.88 0.10 230));
  --grad-rain:   linear-gradient(135deg, oklch(0.65 0.22 28), oklch(0.78 0.18 95) 30%, oklch(0.62 0.20 160) 55%, oklch(0.55 0.22 260) 80%, oklch(0.55 0.22 320));
  --grad-blonde: linear-gradient(160deg, oklch(0.32 0.04 80), oklch(0.65 0.08 80) 50%, oklch(0.92 0.06 90));
  --grad-brunette: linear-gradient(155deg, oklch(0.18 0.04 50), oklch(0.40 0.07 45) 50%, oklch(0.68 0.10 60));
  --grad-charcoal: linear-gradient(150deg, oklch(0.16 0.02 260), oklch(0.30 0.03 260) 60%, oklch(0.50 0.04 260));
}

[data-palette="ink"] {
  --paper: oklch(0.15 0.04 260);
  --paper-2: oklch(0.20 0.05 260);
  --ink: oklch(0.97 0.01 80);
  --ink-2: oklch(0.88 0.02 80);
  --rule: oklch(0.32 0.05 260);
  --muted: oklch(0.70 0.03 260);
}

[data-palette="golden"] {
  --paper: oklch(0.97 0.02 85);
  --paper-2: oklch(0.93 0.04 85);
  --ink: oklch(0.20 0.04 50);
  --ink-2: oklch(0.30 0.05 50);
  --rule: oklch(0.84 0.04 80);
  --muted: oklch(0.46 0.04 60);
  --accent-1: oklch(0.55 0.22 295);
  --accent-2: oklch(0.70 0.16 60);
  --accent-3: oklch(0.68 0.20 35);
  --accent-4: oklch(0.55 0.18 25);
}

[data-palette="violet"] {
  --paper: oklch(0.97 0.012 320);
  --paper-2: oklch(0.93 0.025 320);
  --ink: oklch(0.18 0.10 305);
  --ink-2: oklch(0.28 0.10 305);
  --rule: oklch(0.86 0.03 305);
  --muted: oklch(0.45 0.05 305);
  --accent-1: oklch(0.55 0.22 305);
  --accent-2: oklch(0.65 0.15 260);
  --accent-3: oklch(0.72 0.16 25);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* — type helpers — */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.script { font-family: var(--script); font-weight: 400; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-display {
  font-family: var(--serif);
  font-size: clamp(48px, 9vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.h-1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.015em; }
.h-2 { font-family: var(--serif); font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.01em; }
.h-3 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; }
.body-lg { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.italic { font-style: italic; }

/* — layout — */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); width: 100%; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent-1); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-pill { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
.btn-pill:hover { border-color: var(--ink); }
.btn-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .arrow, .btn-link:hover .arrow { transform: translateX(4px); }

/* — nav — */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad-x);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.nav-brand { display: flex; align-items: baseline; gap: 4px; cursor: pointer; }
.brand-script { font-family: var(--script); font-size: 32px; line-height: 1; color: var(--brand-gold); }
.brand-blue { font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); }
.nav-links { display: flex; gap: 28px; }
.nav-link { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; padding-block: 6px; border-bottom: 1px solid transparent; }
.nav-link:hover, .nav-link.active { color: var(--ink); border-color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Mobile hamburger */
.mobile-ham { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.mobile-ham span { width: 22px; height: 1.5px; background: var(--ink); display: block; }
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4); }
.mobile-nav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--paper); padding: 80px 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.mobile-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 28px; color: var(--ink); cursor: pointer; }
.mobile-link { font-family: var(--serif); font-size: 28px; color: var(--ink); cursor: pointer; padding: 8px 0; }
.mobile-link.active { color: var(--accent-1); }

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-phone { display: none; }
  .nav-cta .btn { display: none; }
  .mobile-ham { display: flex; }
}

/* — wordmark display — */
.wordmark { display: inline-flex; flex-direction: column; line-height: 0.85; }
.wordmark .script-part { font-family: var(--script); font-size: clamp(64px, 12vw, 180px); color: var(--brand-gold); }
.wordmark .blue-part { font-family: var(--serif); font-style: italic; font-size: clamp(52px, 9vw, 140px); letter-spacing: 0.04em; color: var(--brand-navy); margin-top: -0.15em; padding-left: clamp(32px, 6vw, 100px); }
[data-script="caveat"] .brand-script,
[data-script="caveat"] .wordmark .script-part { font-family: "Caveat", cursive; }
[data-script="italianno"] .brand-script,
[data-script="italianno"] .wordmark .script-part { font-family: "Italianno", cursive; }

/* — color swatch tiles (the imagery placeholders) — */
.swatch {
  position: relative; overflow: hidden; border-radius: 18px;
  isolation: isolate; background: var(--grad-purple);
}
.swatch::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 30% 0%, transparent, rgba(0,0,0,0.18) 80%);
  pointer-events: none;
}
.swatch.purple { background: var(--grad-purple); }
.swatch.fire { background: var(--grad-fire); }
.swatch.peri { background: var(--grad-peri); }
.swatch.rain { background: var(--grad-rain); }
.swatch.blonde { background: var(--grad-blonde); }
.swatch.brunette { background: var(--grad-brunette); }
.swatch.charcoal { background: var(--grad-charcoal); }
.swatch .label {
  position: absolute; left: 14px; bottom: 12px; right: 14px;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: rgba(255,255,255,0.94);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  z-index: 1;
}
.swatch .label .by { opacity: 0.75; }
.swatch .strands {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,0.05) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(0,0,0,0.08) 50%, transparent 51%);
  background-size: 14px 100%, 22px 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* hero specific */
.hero { position: relative; padding-block: clamp(56px, 8vw, 100px); }
.hero-grid { display: grid; gap: clamp(20px, 3vw, 40px); align-items: end; }

/* splitfan hero: wordmark beside asymmetric fan */
.hero-splitfan { grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 100px); }
.hero-fan {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr);
  height: clamp(420px, 55vw, 620px); gap: 10px;
}
.hero-fan .swatch { border-radius: 16px; overflow: hidden; min-height: 0; min-width: 0; }
.hero-fan .swatch:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 7; }
.hero-fan .swatch:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 7; }
.hero-fan .swatch:nth-child(3) { grid-column: 1 / 6; grid-row: 7 / 13; }
.hero-fan .swatch:nth-child(4) { grid-column: 6 / 13; grid-row: 7 / 13; }
@media (max-width: 900px) {
  .hero-splitfan { grid-template-columns: 1fr; }
  .hero-fan { height: 60vh; }
}

/* stack hero: full-width wordmark over a single large image strip */
.hero-stack { grid-template-columns: 1fr; }
.hero-stack .hero-strip {
  height: clamp(340px, 46vw, 520px);
  border-radius: 24px; overflow: hidden; position: relative;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 8px;
}
.hero-stack .hero-strip .swatch { border-radius: 0; }

/* portrait hero: editorial single tile + side caption */
.hero-portrait { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.hero-portrait .swatch { height: 100%; min-height: 520px; border-radius: 0 24px 24px 0; }
.hero-portrait .meta-side { padding-right: clamp(8px, 2vw, 24px); }
@media (max-width: 900px) {
  .hero-portrait { grid-template-columns: 1fr; }
  .hero-portrait .swatch { min-height: 360px; border-radius: 24px; }
}

.hero-meta { display: flex; flex-direction: column; gap: 24px; max-width: 620px; }
.hero-tag { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.hero-tag .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px; padding: 7px 12px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-1); }
.dot.blue { background: var(--accent-2); }
.dot.fire { background: var(--accent-3); }
.dot.green { background: oklch(0.62 0.18 160); }

.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* trust strip */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trust .cell {
  padding: clamp(20px, 3vw, 36px) clamp(16px, 2.4vw, 32px);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.trust .cell:last-child { border-right: none; }
.trust .num { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 64px); line-height: 1; }
.trust .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust .cell:nth-child(2) { border-right: none; }
  .trust .cell:nth-child(1), .trust .cell:nth-child(2) { border-bottom: 1px solid var(--rule); }
}

/* signature manifesto block */
.manifesto { position: relative; }
.manifesto .quote-mark {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(160px, 22vw, 320px);
  line-height: 0.6; color: var(--accent-1); opacity: 0.18;
  position: absolute; left: -10px; top: -10px; pointer-events: none;
}
.manifesto h2 { max-width: 18ch; }
.manifesto .body-lg { max-width: 56ch; }
.manifesto-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.manifesto-row .swatch { aspect-ratio: 4/5; }
@media (max-width: 880px) { .manifesto-row { grid-template-columns: 1fr; } }

/* services preview */
.svc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden;
}
.svc-card { background: var(--paper); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.svc-card .num { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.16em; }
.svc-card h3 { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; margin: 0; }
.svc-card p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.svc-card .price { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: auto; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* team teaser */
.team-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.stylist-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.stylist-card .swatch { aspect-ratio: 3/4; border-radius: 14px; }
.stylist-card .name { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.stylist-card .role { font-size: 12px; color: var(--muted); }
.stylist-card .book { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; margin-top: 6px; }
.stylist-card:hover .book { color: var(--accent-1); }
.stylist-card.featured .swatch { aspect-ratio: 3/4.6; }
.stylist-card.featured .name { font-size: 26px; }

@media (max-width: 1024px) { .team-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .team-row { grid-template-columns: repeat(2, 1fr); } }

/* reviews */
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.review-card {
  border: 1px solid var(--rule); border-radius: 18px;
  padding: clamp(24px, 2.6vw, 40px);
  display: flex; flex-direction: column; gap: 18px; background: #fff;
}
.review-card.alt { background: #fff; }
.review-card .stars { display: flex; gap: 4px; }
.review-card .star { color: var(--accent-3); font-size: 14px; }
.review-card .q { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; color: var(--ink); }
.review-card .who { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) { .reviews-grid { grid-template-columns: 1fr; } }

/* location strip */
.loc-card {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  border: 1px solid var(--rule); border-radius: 24px; overflow: hidden;
}
.loc-card .swatch { min-height: 360px; }
.loc-card .info { padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.loc-card .info .row { display: flex; gap: 14px; align-items: baseline; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.loc-card .info .row:last-child { border-bottom: none; }
.loc-card .info .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); min-width: 90px; }
.loc-card .info .v { font-family: var(--serif); font-size: 20px; }
@media (max-width: 820px) { .loc-card { grid-template-columns: 1fr; } }

/* footer */
.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 6vw, 80px) var(--pad-x) 32px;
  background: var(--ink);
  color: oklch(0.92 0.02 80);
}
.footer .container { color: inherit; }
.footer .wm-line { font-family: var(--script); font-size: clamp(56px, 12vw, 180px); color: var(--brand-gold); line-height: 0.9; }
.footer .wm-line .blue { font-family: var(--serif); font-style: italic; color: oklch(0.55 0.10 260); letter-spacing: 0.04em; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; padding-block: 40px; border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); margin-top: 24px; }
.footer-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.75 0.02 260); margin: 0 0 16px; font-weight: 500; }
.footer-grid a, .footer-grid li { color: oklch(0.92 0.02 80); font-size: 14px; line-height: 1.8; cursor: pointer; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.65 0.02 260); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* — gallery — */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.filter-chip {
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  font-size: 13px; cursor: pointer; transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.filter-chip:hover { color: var(--ink); border-color: var(--ink); }
.filter-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-chip .count { font-family: var(--mono); font-size: 10px; opacity: 0.7; }

/* portfolio: custom (curated bento) */
.portfolio-custom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  grid-auto-rows: 300px;
  grid-auto-flow: dense;
}
.portfolio-custom .swatch { border-radius: 14px; }
.portfolio-custom .swatch img { object-fit: cover; }
.portfolio-custom .tile { position: relative; overflow: hidden; border-radius: 14px; }
.portfolio-custom .tile:nth-child(1) { grid-row: span 2; }
.portfolio-custom .tile:nth-child(6) { grid-row: span 2; }
.portfolio-custom .tile:nth-child(8) { grid-column: span 2; }
@media (max-width: 900px) {
  .portfolio-custom { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .portfolio-custom .tile:nth-child(1) { grid-row: span 2; }
  .portfolio-custom .tile:nth-child(5) { grid-column: span 1; }
}

/* portfolio: grid */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.portfolio-grid .swatch { aspect-ratio: 4/5; border-radius: 14px; }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* portfolio: editorial scroll */
.portfolio-editorial { display: flex; flex-direction: column; gap: 60px; }
.portfolio-editorial .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.portfolio-editorial .row:nth-child(even) { direction: rtl; }
.portfolio-editorial .row > * { direction: ltr; }
.portfolio-editorial .row .swatch { aspect-ratio: 4/5; border-radius: 18px; }
.portfolio-editorial .row .copy { display: flex; flex-direction: column; gap: 12px; padding-inline: clamp(0px, 4vw, 40px); }
.portfolio-editorial .row .copy .ttl { font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); line-height: 1.05; }
@media (max-width: 720px) {
  .portfolio-editorial .row, .portfolio-editorial .row:nth-child(even) { direction: ltr; grid-template-columns: 1fr; }
}

/* — services page — */
.svc-list { display: flex; flex-direction: column; }
.svc-row {
  display: grid; grid-template-columns: 80px 1fr 1.2fr 200px;
  gap: 32px; padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.svc-row:last-child { border-bottom: 1px solid var(--rule); }
.svc-row .num { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.14em; padding-top: 8px; }
.svc-row h3 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; margin: 0; }
.svc-row .desc p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
.svc-row .desc ul { padding-left: 18px; margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.svc-row .meta { display: flex; flex-direction: column; gap: 14px; }
.svc-row .meta .price { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); }
.svc-row .meta .micro { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.svc-row .meta .tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--accent-1); color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; align-self: flex-start; }
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 16px; }
  .svc-row .num { padding-top: 0; }
}

/* — team page — */
.team-feature {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: center; padding-block: clamp(40px, 5vw, 80px);
  border-bottom: 1px solid var(--rule);
}
.team-feature .swatch { aspect-ratio: 4/5; border-radius: 24px; }
.team-feature .info { display: flex; flex-direction: column; gap: 20px; }
.team-feature h2 { margin: 0; }
.team-feature .specialties { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 880px) { .team-feature { grid-template-columns: 1fr; } }

.team-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); padding-block: clamp(40px, 5vw, 64px); }
.team-list .card { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rule); }
.team-list .card .swatch { aspect-ratio: 4/5; border-radius: 16px; }
.team-list .card .info { display: flex; flex-direction: column; gap: 12px; }
.team-list .card .info h3 { font-family: var(--serif); font-size: 36px; line-height: 1; margin: 0; }
.team-list .card .info .role { font-size: 14px; color: var(--muted); }
.team-list .card .info p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
@media (max-width: 1024px) { .team-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .team-list .card { grid-template-columns: 1fr; } }

/* — contact — */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: 0; }
.contact-info .row { padding: 22px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.contact-info .row:first-child { padding-top: 0; }
.contact-info .row .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.contact-info .row .v { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; color: var(--ink); }
.contact-info .row .v.small { font-family: var(--sans); font-size: 15px; color: var(--ink-2); }

.form-card { background: var(--paper-2); border-radius: 24px; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.form-card h3 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 10px; padding: 12px 14px; font-family: var(--sans); font-size: 14px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-1); outline-offset: 0; }
.field textarea { min-height: 110px; resize: vertical; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-success {
  padding: 14px 18px; background: var(--ink); color: var(--paper);
  border-radius: 12px; font-size: 14px; display: flex; align-items: center; gap: 12px;
}

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); padding: 24px 0; cursor: pointer; }
.faq-item .q-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.faq-item .q { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
.faq-item .toggle { font-family: var(--mono); font-size: 14px; color: var(--muted); transition: transform .25s ease; }
.faq-item.open .toggle { transform: rotate(45deg); color: var(--ink); }
.faq-item .a {
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease;
  font-size: 15px; line-height: 1.65; color: var(--ink-2);
}
.faq-item.open .a { max-height: 200px; padding-top: 14px; }

/* map placeholder */
.map-tile {
  border-radius: 24px; overflow: hidden; position: relative;
  background:
    linear-gradient(0deg, oklch(0.92 0.02 220), oklch(0.88 0.03 220)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 28px);
  min-height: 320px;
  border: 1px solid var(--rule);
}
.map-tile::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(15deg, transparent 48%, oklch(0.85 0.05 220) 48% 52%, transparent 52%),
    linear-gradient(-70deg, transparent 48%, oklch(0.85 0.05 220) 48% 52%, transparent 52%);
  background-size: 280px 280px, 360px 360px;
  background-repeat: no-repeat;
  background-position: 20% 40%, 70% 30%;
}
.map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.map-pin .dot {
  width: 16px; height: 16px; background: var(--accent-1); border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-1) 25%, transparent),
              0 0 0 12px color-mix(in oklab, var(--accent-1) 10%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
.map-pin .label {
  background: var(--paper); border: 1px solid var(--rule); padding: 6px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-1) 25%, transparent), 0 0 0 12px color-mix(in oklab, var(--accent-1) 10%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-1) 30%, transparent), 0 0 0 20px color-mix(in oklab, var(--accent-1) 0%, transparent); }
}

/* page header */
.page-header { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 56px); border-bottom: 1px solid var(--rule); }
.page-header .row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.page-header h1 { margin: 12px 0 0; }
@media (max-width: 820px) { .page-header .row { grid-template-columns: 1fr; } }

/* misc */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 3vw, 48px); flex-wrap: wrap; }
.section-head h2 { margin: 8px 0 0; max-width: 18ch; }
.section-head .sub { max-width: 38ch; }

.hand-edge { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hand-edge::before, .hand-edge::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.in-stylist { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 4px 8px; border: 1px solid var(--rule); border-radius: 999px; }

.fadein { animation: fadein .6s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══ SCROLL REVEAL ANIMATIONS ═══ */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Hover effects */
.swatch { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.swatch:hover { transform: scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.stylist-card { transition: transform 0.3s ease; }
.stylist-card:hover { transform: translateY(-6px); }
.review-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.btn { transition: all 0.25s ease; }
.btn:hover { transform: translateY(-2px); }
.filter-chip { transition: all 0.2s ease; }

/* Service photo transition */
.svc-photo-wrap img {
  transition: opacity 0.4s ease;
}

/* Smooth page transitions */
main {
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Auto-reveal — homepage scroll elements only */
.review-card,
.stylist-card,
.loc-card,
.manifesto-row {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.review-card.visible,
.stylist-card.visible,
.loc-card.visible,
.manifesto-row.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delays */
.stylist-card:nth-child(1), .review-card:nth-child(1) { transition-delay: 0s; }
.stylist-card:nth-child(2), .review-card:nth-child(2) { transition-delay: 0.08s; }
.stylist-card:nth-child(3), .review-card:nth-child(3) { transition-delay: 0.16s; }
.stylist-card:nth-child(4), .review-card:nth-child(4) { transition-delay: 0.24s; }
.stylist-card:nth-child(5) { transition-delay: 0.32s; }
.stylist-card:nth-child(6) { transition-delay: 0.4s; }