/* Brand: whitestonewash.ink — Whitestone Wash, Canton GA
   Art direction: terracotta + cobalt. Saturated clay canvas, warm cream reading panels,
   cobalt display type and pill buttons, dirty-to-clean wipes. Authored classes are "whi30-".
   Colour, radius and spacing come from Site DNA tokens (never hardcoded hexes downstream). */

/* Client-mandated brand pair: terracotta #E2725B ground + cobalt #0047AB type/buttons.
   site-dna.js writes the seeded palette as inline custom properties on <html>, so these
   have to be !important to win the cascade. Everything downstream still reads the tokens.
   Cobalt never sits directly on clay (2.7:1) — clay carries ink, cobalt carries cream. */
html {
  --dna-bg: #e2725b !important;         /* terracotta canvas */
  --dna-surface: #fdf4ee !important;    /* warm cream reading panel */
  --dna-surface-2: #f7e6db !important;  /* deeper cream */
  --dna-ink: #25120e !important;        /* 6.8:1 on clay, 16:1 on cream */
  --dna-ink-soft: #6b3a2c !important;   /* 8.5:1 on cream */
  --dna-line: rgba(37, 18, 14, 0.16) !important;
  --dna-accent: #0047ab !important;     /* cobalt */
  --dna-accent-2: #00337d !important;   /* deep cobalt */
  --dna-accent-ink: #ffffff !important; /* 8.4:1 on cobalt */
  --bg: #e2725b !important;
  --surface: #fdf4ee !important;
  --ink: #25120e !important;
  --ink-soft: #6b3a2c !important;
  --line: rgba(37, 18, 14, 0.16) !important;
  --accent-ink: #ffffff !important;
  --cyan: #0047ab !important;
  --teal: #00337d !important;
  --cyan-dim: rgba(0, 71, 171, 0.12) !important;
}

:root {
  --whi30-bg: var(--dna-bg, #e2725b);
  --whi30-surface: var(--dna-surface, #fdf4ee);
  --whi30-surface-2: var(--dna-surface-2, #f7e6db);
  --whi30-ink: var(--dna-ink, #25120e);
  --whi30-soft: var(--dna-ink-soft, #6b3a2c);
  --whi30-line: var(--dna-line, rgba(37, 18, 14, 0.16));
  --whi30-jet: var(--dna-accent, #0047ab);
  --whi30-jet-2: var(--dna-accent-2, #00337d);
  --whi30-on-jet: var(--dna-accent-ink, #fff);
  --whi30-jet-rgb: 0, 71, 171;
  --whi30-ink-rgb: 37, 18, 14;
  --whi30-cream-rgb: 253, 244, 238;
  --whi30-h: var(--whi30-jet);   /* heading colour — flips to ink on clay grounds */
  --whi30-duo: grayscale(1) sepia(0.5) saturate(1.55) hue-rotate(-10deg) contrast(1.04);
  --whi30-r: var(--radius, 20px);
  --whi30-r-lg: var(--radius-lg, 38px);
  --whi30-pad: var(--section-pad, 100px);
  --whi30-pill: var(--btn-radius, 100px);
  --nav-h: 122px;
  --whi30-wrap: 1200px;
  --whi30-ease: cubic-bezier(0.2, 0.7, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--whi30-bg);
  color: var(--whi30-ink);
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 1.02rem;
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.02em; color: var(--whi30-h); }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.05rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }

.whi30-skip {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.whi30-skip:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  clip: auto;
  z-index: 200;
  background: var(--whi30-jet);
  color: var(--whi30-on-jet);
  border-radius: var(--whi30-pill);
  font-weight: 600;
}

.whi30-wrap {
  width: 100%;
  max-width: var(--whi30-wrap);
  margin: 0 auto;
  padding: 0 22px;
}

.whi30-band { padding: var(--whi30-pad) 0; position: relative; }
.whi30-band--tint { background: var(--whi30-surface); }
.whi30-band--deep {
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(var(--whi30-jet-rgb), 0.12), transparent 62%),
    var(--whi30-surface-2);
}

/* Clay grounds: the terracotta canvas is a mid-tone, so cobalt type drops to 2.7:1 there.
   Anything sitting straight on clay switches headings to ink and stops using muted body ink. */
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep),
.whi30-foot {
  --whi30-h: var(--whi30-ink);
  --whi30-soft: rgba(var(--whi30-ink-rgb), 0.88);
  --whi30-line: rgba(var(--whi30-ink-rgb), 0.26);
}
/* …but cards inside a clay band are cream again, so they get the cobalt headings back. */
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-slide,
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-row,
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-case,
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-plate,
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-info,
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-bk,
.whi30-band:not(.whi30-band--tint):not(.whi30-band--deep) .whi30-catalog .service-detail {
  --whi30-h: var(--whi30-jet);
  --whi30-soft: var(--dna-ink-soft, #6b3a2c);
  --whi30-line: var(--dna-line, rgba(37, 18, 14, 0.16));
}

/* ---------- Type helpers ---------- */
.whi30-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--whi30-h);
  margin-bottom: 16px;
}
.whi30-kicker::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--whi30-jet);
}
.whi30-lede { color: var(--whi30-soft); font-size: 1.08rem; max-width: 62ch; }
.whi30-head { max-width: 720px; margin-bottom: 46px; }
.whi30-head--wide { max-width: 860px; }

/* ---------- Buttons, chips ---------- */
.whi30-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--whi30-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--whi30-ease), box-shadow 0.25s var(--whi30-ease),
              background 0.25s, border-color 0.25s, color 0.25s;
}
.whi30-btn--jet {
  background: linear-gradient(122deg, var(--whi30-jet), var(--whi30-jet-2));
  color: var(--whi30-on-jet);
  box-shadow: 0 12px 30px -14px rgba(var(--whi30-jet-rgb), 0.85);
}
.whi30-btn--jet:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(var(--whi30-jet-rgb), 0.9); }
.whi30-btn--ghost {
  background: transparent;
  border-color: var(--whi30-line);
  color: var(--whi30-ink);
}
.whi30-btn--ghost:hover { border-color: var(--whi30-jet); background: rgba(var(--whi30-cream-rgb), 0.5); }
.whi30-btn .dna-ic { width: 1.15em; height: 1.15em; color: currentColor; background: none; padding: 0; }

/* button ripple (JS adds --x/--y then toggles .is-rippling) */
.whi30-btn::after {
  content: '';
  position: absolute;
  top: var(--y, 50%); left: var(--x, 50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.whi30-btn.is-rippling::after { animation: whi30Ripple 0.55s ease-out; }
@keyframes whi30Ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
  to { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}

.whi30-chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.whi30-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-pill);
  background: rgba(var(--whi30-cream-rgb), 0.82);
  color: var(--whi30-ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, transform 0.2s var(--whi30-ease);
}
.whi30-chip:hover { color: var(--whi30-ink); border-color: var(--whi30-jet); transform: translateY(-2px); }
.whi30-chip .dna-ic { width: 1.05em; height: 1.05em; background: none; padding: 0; }

.whi30-tel { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ================= HEADER — topbar (strip + main bar) ================= */
.whi30-head-fixed {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  background: rgba(var(--whi30-cream-rgb), 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--whi30-line);
}
.whi30-strip {
  background: var(--whi30-surface-2);
  border-bottom: 1px solid var(--whi30-line);
  font-size: 0.78rem;
  color: var(--whi30-soft);
}
.whi30-strip .whi30-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.whi30-strip-item { display: inline-flex; align-items: center; gap: 8px; }
.whi30-strip-item .dna-ic { width: 1.05em; height: 1.05em; background: none; padding: 0; }
.whi30-strip a { text-decoration: none; font-weight: 600; color: var(--whi30-ink); }
.whi30-strip a:hover { color: var(--whi30-jet); }

.whi30-bar .whi30-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
}
.whi30-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.whi30-brand img { width: 40px; height: 40px; }
.whi30-brand b {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.whi30-brand span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--whi30-soft);
}

/* segmented pill nav (desktop) */
.whi30-seg {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-pill);
  background: var(--whi30-surface-2);
}
.whi30-seg a {
  padding: 9px 18px;
  border-radius: var(--whi30-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--whi30-soft);
  text-decoration: none;
  transition: color 0.22s, background 0.32s var(--whi30-ease);
}
.whi30-seg a:hover { color: var(--whi30-ink); }
.whi30-seg a[aria-current='page'] {
  background: linear-gradient(122deg, var(--whi30-jet), var(--whi30-jet-2));
  color: var(--whi30-on-jet);
}
.whi30-bar-end { display: flex; align-items: center; gap: 12px; }

.whi30-burger {
  display: none;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--whi30-line);
  border-radius: 14px;
  background: var(--whi30-surface-2);
  color: var(--whi30-ink);
  cursor: pointer;
}
.whi30-burger span {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  position: relative;
}
.whi30-burger span::before,
.whi30-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
}
.whi30-burger span::before { top: -6px; }
.whi30-burger span::after { top: 6px; }

/* fullscreen overlay menu (mobile) */
.whi30-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(168deg, var(--whi30-surface) 0%, var(--whi30-surface-2) 88%);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.3s var(--whi30-ease), transform 0.35s var(--whi30-ease), visibility 0.35s;
}
.whi30-sheet.is-open { opacity: 1; visibility: visible; transform: scale(1); }
.whi30-sheet-top { display: flex; justify-content: flex-end; }
.whi30-sheet-close {
  width: 46px; height: 46px;
  border: 1px solid var(--whi30-line);
  border-radius: 14px;
  background: transparent;
  color: var(--whi30-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.whi30-sheet-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: auto 0;
}
.whi30-sheet-links a {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--whi30-line);
  color: var(--whi30-ink);
}
.whi30-sheet-links a[aria-current='page'] { color: var(--whi30-jet); }
.whi30-sheet-foot { display: grid; gap: 10px; }
.whi30-sheet-foot .whi30-btn { width: 100%; }
body.whi30-locked { overflow: hidden; }

/* ================= HERO — split, action bar ================= */
.whi30-hero {
  padding-top: calc(var(--nav-h) + 54px);
  padding-bottom: 74px;
  position: relative;
  overflow: hidden;
}
.whi30-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 12% 6%, rgba(var(--whi30-jet-rgb), 0.1), transparent 60%),
    radial-gradient(70% 60% at 96% 108%, rgba(226, 114, 91, 0.42), transparent 62%),
    linear-gradient(180deg, var(--whi30-surface), var(--whi30-surface-2) 84%);
  z-index: -1;
}
.whi30-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.whi30-hero h1 { margin-bottom: 18px; }
.whi30-hero-lede { font-size: 1.14rem; color: var(--whi30-soft); max-width: 54ch; }
.whi30-hero-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 22px;
}
.whi30-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.86rem;
  color: var(--whi30-soft);
  margin-top: 26px;
}
.whi30-hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.whi30-hero-note .dna-ic { width: 1.1em; height: 1.1em; background: none; padding: 0; }

.whi30-hero-shot {
  position: relative;
  border-radius: var(--whi30-r-lg);
  overflow: hidden;
  border: 1px solid var(--whi30-line);
  box-shadow: 0 40px 80px -50px rgba(var(--whi30-ink-rgb), 0.7);
}
.whi30-hero-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.whi30-hero-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(187deg, transparent 40%, rgba(0, 51, 125, 0.58));
  pointer-events: none;
}

/* Duotone treatment (DNA imageStyle = duotone-photo): the shoot came back cool blue,
   the palette is clay, so every photo is pulled onto one warm terracotta ramp. */
.whi30-hero-shot img,
.whi30-slide img,
.whi30-portrait img { filter: var(--whi30-duo); }
.whi30-shot-tag {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--whi30-pill);
  background: rgba(var(--whi30-cream-rgb), 0.93);
  color: var(--whi30-ink);
  border: 1px solid var(--whi30-line);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.whi30-shot-tag i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--whi30-jet);
  box-shadow: 0 0 0 4px rgba(var(--whi30-jet-rgb), 0.24);
}

/* dirty -> clean wipe on the hero photo (keeps the duotone at both ends) */
.whi30-wipe img {
  clip-path: inset(0 100% 0 0);
  filter: var(--whi30-duo) brightness(0.62) saturate(0.7);
}
.whi30-wipe.is-washed img {
  clip-path: inset(0 0 0 0);
  filter: var(--whi30-duo);
  transition: clip-path 1.25s var(--whi30-ease), filter 1.5s ease-out;
}

/* ================= GALLERY — snap rail ================= */
.whi30-rail-hold { position: relative; }
.whi30-rail-hold::before,
.whi30-rail-hold::after {
  content: '';
  position: absolute;
  top: 0; bottom: 14px;
  width: 64px;
  pointer-events: none;
  z-index: 2;
}
.whi30-rail-hold::before { left: 0; background: linear-gradient(90deg, var(--whi30-bg), transparent); }
.whi30-rail-hold::after { right: 0; background: linear-gradient(270deg, var(--whi30-bg), transparent); }
.whi30-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
}
.whi30-slide {
  flex: 0 0 min(74%, 420px);
  scroll-snap-align: center;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-r);
  overflow: hidden;
  background: var(--whi30-surface);
  transition: transform 0.4s var(--whi30-ease), border-color 0.3s;
}
.whi30-slide:hover { transform: translateY(-5px); border-color: var(--whi30-jet); }
.whi30-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.whi30-slide-cap { padding: 16px 18px 20px; }
.whi30-slide-cap h3 { font-size: 1.02rem; margin-bottom: 6px; }
.whi30-slide-cap p { margin: 0; font-size: 0.9rem; color: var(--whi30-soft); }
.whi30-slide--note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  background: var(--whi30-surface-2);
}
.whi30-slide--note p { color: var(--whi30-soft); font-size: 0.95rem; }
.whi30-rail-hint { font-size: 0.8rem; color: var(--whi30-soft); margin: 6px 0 0; }

/* ================= SERVICES — icon rows ================= */
.whi30-rows { display: grid; gap: 14px; }
.whi30-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 240px);
  gap: 24px;
  align-items: start;
  padding: 26px;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-r);
  background: var(--whi30-surface);
  transition: border-color 0.3s, transform 0.35s var(--whi30-ease), background 0.3s;
}
.whi30-row:hover {
  border-color: var(--whi30-jet);
  transform: translateX(5px);
  background: var(--whi30-surface-2);
}
.whi30-row-ic {
  width: 58px; height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(var(--whi30-jet-rgb), 0.1);
  border: 1px solid var(--whi30-line);
}
.whi30-row-ic .dna-ic { width: 26px; height: 26px; background: none; padding: 0; }
.whi30-row p { margin: 0; color: var(--whi30-soft); font-size: 0.96rem; }
.whi30-row-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--whi30-pill);
  border: 1px dashed var(--whi30-line);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--whi30-jet-2);
  white-space: nowrap;
}

/* ================= PROCESS — steps with drawn line ================= */
.whi30-steps { position: relative; display: grid; gap: 30px; padding-left: 58px; }
.whi30-steps::before {
  content: '';
  position: absolute;
  left: 24px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--whi30-line);
}
.whi30-steps::after {
  content: '';
  position: absolute;
  left: 24px; top: 10px;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--whi30-jet), var(--whi30-jet-2));
  transition: height 1.4s var(--whi30-ease);
}
.whi30-steps.is-drawn::after { height: calc(100% - 20px); }
.whi30-step { position: relative; }
.whi30-step-dot {
  position: absolute;
  left: -58px; top: 0;
  width: 50px; height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--whi30-surface-2);
  border: 1px solid var(--whi30-line);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}
.whi30-step-dot .dna-ic { width: 22px; height: 22px; background: none; padding: 0; }
.whi30-steps.is-drawn .whi30-step-dot {
  animation: whi30Hop 0.5s var(--whi30-ease) both;
  border-color: var(--whi30-jet);
}
.whi30-steps.is-drawn .whi30-step:nth-child(2) .whi30-step-dot { animation-delay: 0.18s; }
.whi30-steps.is-drawn .whi30-step:nth-child(3) .whi30-step-dot { animation-delay: 0.36s; }
.whi30-steps.is-drawn .whi30-step:nth-child(4) .whi30-step-dot { animation-delay: 0.54s; }
@keyframes whi30Hop {
  0% { transform: translateY(0); }
  45% { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}
.whi30-step h3 { margin-bottom: 6px; }
.whi30-step p { margin: 0; color: var(--whi30-soft); }

/* ================= CASE CARDS ================= */
.whi30-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.whi30-case {
  padding: 28px;
  border: 1px solid var(--whi30-line);
  border-left: 3px solid var(--whi30-jet);
  border-radius: 6px;
  background: var(--whi30-surface);
  transition: transform 0.35s var(--whi30-ease), background 0.3s;
}
.whi30-case:hover { transform: translateY(-6px); background: var(--whi30-surface-2); }
.whi30-case-where {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--whi30-jet-2);
}
.whi30-case h3 { margin: 12px 0 10px; }
.whi30-case p { margin: 0 0 14px; color: var(--whi30-soft); font-size: 0.95rem; }
.whi30-case dl { margin: 0; display: grid; gap: 6px; font-size: 0.88rem; }
.whi30-case dl div { display: flex; gap: 8px; }
.whi30-case dt { color: var(--whi30-soft); min-width: 74px; }
.whi30-case dd { margin: 0; font-weight: 600; }

/* ================= ABOUT — stats led ================= */
.whi30-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 52px;
  align-items: center;
}
.whi30-portrait {
  border-radius: var(--whi30-r-lg);
  overflow: hidden;
  border: 1px solid var(--whi30-line);
}
.whi30-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.whi30-plates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.whi30-plate {
  padding: 18px;
  border: 1px solid var(--whi30-line);
  border-radius: 6px;
  background: var(--whi30-surface-2);
}
.whi30-plate b {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.whi30-plate span { font-size: 0.88rem; color: var(--whi30-soft); }

/* ================= TRUST — icon row ================= */
.whi30-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.whi30-trust-item {
  padding: 24px;
  border-top: 2px solid var(--whi30-line);
  transition: border-color 0.3s;
}
.whi30-trust-item:hover { border-top-color: var(--whi30-jet); }
.whi30-trust-item .dna-ic { width: 26px; height: 26px; margin-bottom: 14px; }
.whi30-trust-item h3 { font-size: 1.04rem; }
.whi30-trust-item p { margin: 0; font-size: 0.92rem; color: var(--whi30-soft); }

/* ================= CLOSING BAND (water sheen) ================= */
.whi30-sheet-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(118deg, var(--whi30-jet), var(--whi30-jet-2)),
    var(--whi30-jet);
  background-size: 220% 220%, auto;
  background-position: 0% 50%, center;
  transition: background-position 1.1s var(--whi30-ease);
  padding: 74px 0;
}
.whi30-sheet-band:hover { background-position: 100% 50%, center; }
.whi30-sheet-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 84% 120%, hsla(0, 0%, 100%, 0.22), transparent 60%);
  pointer-events: none;
}
.whi30-sheet-band .whi30-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.whi30-sheet-band h2 { color: #fff; margin-bottom: 8px; }
.whi30-sheet-band .whi30-kicker { color: hsla(0, 0%, 100%, 0.92); }
.whi30-sheet-band .whi30-kicker::before { background: #fff; }
.whi30-sheet-band p { color: hsla(0, 0%, 100%, 0.9); margin: 0; max-width: 46ch; }
.whi30-sheet-band .whi30-btn--ghost { border-color: hsla(0, 0%, 100%, 0.6); color: #fff; }
.whi30-sheet-band .whi30-btn--ghost:hover { background: hsla(0, 0%, 100%, 0.14); color: #fff; }
.whi30-sheet-band .whi30-btn--jet { background: #fff; color: var(--whi30-jet); box-shadow: none; }

/* ================= FOOTER — stacked ================= */
.whi30-foot {
  border-top: 1px solid var(--whi30-line);
  padding: 56px 0 34px;
  background: var(--whi30-bg);
}
.whi30-foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--whi30-line);
}
/* the mark's own tile is terracotta, so on the clay footer it needs a cream frame to read */
.whi30-foot .whi30-brand img {
  padding: 3px;
  background: var(--whi30-surface);
  border-radius: 13px;
}
.whi30-foot-cols { display: flex; flex-wrap: wrap; gap: 46px; }
.whi30-foot h4 {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--whi30-soft);
  margin-bottom: 12px;
}
.whi30-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.94rem; }
.whi30-foot a { text-decoration: none; color: var(--whi30-ink); }
.whi30-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.whi30-foot-note {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.84rem;
  color: var(--whi30-soft);
}

/* ================= INNER PAGE HEADS ================= */
.whi30-mast {
  padding: calc(var(--nav-h) + 62px) 0 58px;
  background:
    radial-gradient(80% 110% at 88% 0%, rgba(var(--whi30-jet-rgb), 0.12), transparent 62%),
    radial-gradient(60% 80% at 4% 100%, rgba(226, 114, 91, 0.32), transparent 60%),
    var(--whi30-surface);
  border-bottom: 1px solid var(--whi30-line);
}
.whi30-mast h1 { max-width: 20ch; }
.whi30-crumb {
  font-size: 0.8rem;
  color: var(--whi30-soft);
  margin-bottom: 18px;
}
.whi30-crumb a { text-decoration: none; }
.whi30-crumb a:hover { color: var(--whi30-jet); }

/* ================= SERVICES PAGE (DNA tabs catalog) ================= */
/* site-dna.css loads after this file, so the contract .svc-tab rules need the
   extra html-class specificity to stay readable on a dark ground. */
.svc-tabs { margin-bottom: 26px; }
.dna-svc-tabs .svc-tab {
  padding: 11px 18px;
  background: var(--whi30-surface-2);
  border: 1.5px solid var(--whi30-line);
  color: var(--whi30-soft);
  cursor: pointer;
  transition: background 0.28s var(--whi30-ease), color 0.22s, border-color 0.22s, transform 0.22s;
}
.dna-svc-tabs .svc-tab:hover {
  transform: translateY(-1px);
  color: var(--whi30-ink);
  border-color: var(--whi30-jet);
}
.dna-svc-tabs .svc-tab.active {
  background: linear-gradient(122deg, var(--whi30-jet), var(--whi30-jet-2));
  color: var(--whi30-on-jet);
  border-color: transparent;
}
.whi30-catalog { display: grid; gap: 18px; }
.whi30-catalog .service-detail {
  padding: 30px;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-r);
  background: var(--whi30-surface);
}
.whi30-catalog .service-detail h3 { font-size: 1.42rem; margin-bottom: 10px; }
.whi30-catalog .service-detail > p { color: var(--whi30-soft); }
.whi30-svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 28px;
  align-items: start;
}
.whi30-svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.whi30-svc-list li {
  display: flex;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--whi30-soft);
}
.whi30-svc-list .dna-ic { width: 1.05em; height: 1.05em; margin-top: 0.25em; background: none; padding: 0; }
.whi30-svc-aside {
  padding: 22px;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-r);
  background: var(--whi30-surface-2);
  font-size: 0.92rem;
}
.whi30-svc-aside h4 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--whi30-jet-2);
  margin: 0 0 10px;
}
.whi30-svc-aside p:last-child { margin-bottom: 0; }

/* two-column prose for about / privacy */
.whi30-prose { max-width: 74ch; }
.whi30-prose h2 { margin-top: 42px; }
.whi30-prose h3 { margin-top: 28px; }
.whi30-prose p, .whi30-prose li { color: var(--whi30-soft); }
.whi30-prose ul { padding-left: 20px; display: grid; gap: 8px; }

/* ================= CONTACT ================= */
[data-contact-root] { padding-bottom: 8px; }
.whi30-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.whi30-info {
  padding: 20px;
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-r);
  background: var(--whi30-surface);
}
.whi30-info h3 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--whi30-soft);
  margin-bottom: 8px;
}
.whi30-info p { margin: 0; font-size: 1rem; }
.whi30-info a { text-decoration: none; font-weight: 600; }
.whi30-info a:hover { color: var(--whi30-jet-2); }
.whi30-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.95rem; }
.whi30-hours li { display: flex; justify-content: space-between; gap: 16px; }
.whi30-hours span { color: var(--whi30-soft); }

/* ---- booking card (own form, phone-callback) ---- */
.whi30-bk {
  border: 1px solid var(--whi30-line);
  border-radius: var(--whi30-r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--whi30-jet-rgb), 0.1), transparent 60%),
    var(--whi30-surface);
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.whi30-bk-head { margin-bottom: 22px; }
.whi30-bk-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; }
.whi30-bk-head p { margin: 0; color: var(--whi30-soft); font-size: 0.96rem; }
.whi30-bk-field { margin-bottom: 18px; }
.whi30-bk-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--whi30-soft);
  margin-bottom: 8px;
}
.whi30-bk-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--whi30-line);
  border-radius: 14px;
  background: #fffdfb;
  color: var(--whi30-ink);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.whi30-bk-phone input {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 16px;
}
.whi30-bk-field input:focus {
  outline: none;
  border-color: var(--whi30-jet);
  box-shadow: 0 0 0 4px rgba(var(--whi30-jet-rgb), 0.18);
}
.whi30-bk-hint { font-size: 0.82rem; color: var(--whi30-soft); margin: 8px 0 0; }
.whi30-bk-submit { width: 100%; margin-top: 6px; }
.whi30-bk-err {
  margin: 10px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #9c2313;
}
.whi30-bk-err[hidden] { display: none; }
.whi30-bk-done { text-align: center; padding: 12px 0 6px; }
.whi30-bk-done .dna-ic {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  color: var(--whi30-jet-2);
}
.whi30-bk-done h3 { font-size: 1.42rem; }
.whi30-bk-done p { color: var(--whi30-soft); }
.whi30-bk-done a {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--whi30-jet-2);
}

/* ================= REVEAL MOTION ================= */
.whi30-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--whi30-ease), transform 0.7s var(--whi30-ease);
}
.whi30-rise.is-in { opacity: 1; transform: none; }
.whi30-rise:nth-child(2) { transition-delay: 0.07s; }
.whi30-rise:nth-child(3) { transition-delay: 0.14s; }
.whi30-rise:nth-child(4) { transition-delay: 0.21s; }
.whi30-hero-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  animation: whi30Enter 0.75s var(--whi30-ease) forwards;
}
.whi30-hero-stagger > *:nth-child(1) { animation-delay: 0.06s; }
.whi30-hero-stagger > *:nth-child(2) { animation-delay: 0.16s; }
.whi30-hero-stagger > *:nth-child(3) { animation-delay: 0.26s; }
.whi30-hero-stagger > *:nth-child(4) { animation-delay: 0.36s; }
.whi30-hero-stagger > *:nth-child(5) { animation-delay: 0.46s; }
.whi30-hero-stagger > *:nth-child(6) { animation-delay: 0.56s; }
@keyframes whi30Enter { to { opacity: 1; transform: none; } }

:focus-visible {
  outline: 2px solid var(--whi30-jet-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .whi30-cases { grid-template-columns: 1fr 1fr; }
  .whi30-trust { grid-template-columns: 1fr 1fr; }
  .whi30-row { grid-template-columns: 58px minmax(0, 1fr); }
  .whi30-row-mode { grid-column: 2; }
}

@media (max-width: 900px) {
  :root { --nav-h: 116px; --whi30-pad: 74px; }
  .whi30-seg { display: none; }
  .whi30-bar-end .whi30-btn { display: none; }
  .whi30-burger { display: inline-flex; }
  .whi30-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .whi30-about { grid-template-columns: 1fr; gap: 32px; }
  .whi30-svc-split { grid-template-columns: 1fr; }
  .whi30-cases { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --nav-h: 108px; }
  .whi30-strip .whi30-wrap { justify-content: center; gap: 14px; font-size: 0.72rem; }
  .whi30-strip-hours { display: none; }
  .whi30-bar .whi30-wrap { min-height: 70px; }
  .whi30-brand img { width: 34px; height: 34px; }
  .whi30-trust { grid-template-columns: 1fr; }
  .whi30-plates { grid-template-columns: 1fr; }
  .whi30-info-grid { grid-template-columns: 1fr; }
  .whi30-hero-acts .whi30-btn { width: 100%; }
  .whi30-slide { flex-basis: 84%; }
  .whi30-bk { padding: 22px; border-radius: var(--whi30-r); }
  .whi30-band, .whi30-sheet-band { padding-top: 62px; padding-bottom: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .whi30-rise { opacity: 1; transform: none; transition: none; }
  .whi30-hero-stagger > * { opacity: 1; transform: none; animation: none; }
  .whi30-wipe img { clip-path: none; filter: var(--whi30-duo); }
  .whi30-steps::after { transition: none; }
  .whi30-steps.is-drawn .whi30-step-dot { animation: none; }
  .whi30-sheet-band { transition: none; }
  .whi30-btn.is-rippling::after { animation: none; }
  .whi30-sheet { transition: opacity 0.01s linear; transform: none; }
  .whi30-row:hover, .whi30-slide:hover, .whi30-case:hover, .whi30-btn--jet:hover { transform: none; }
  .whi30-rail { scroll-snap-type: none; }
}