/* ==========================================================================
   Hayat Havuz — "Gün ışığında mimari" design system
   Daylight surfaces (limestone, travertine), one deep water tone for emphasis, real photographs left untinted.
   Tokens → base → layout → components → sections → pages → motion
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Premium aqua: a cool white page, white cards, one turquoise for emphasis and a deep-sea ink for text. */
  --bg: #F8F9F7;
  --surface: #FFFFFF;
  --surface-2: #E8F2F2;
  --ink: #0B2430;
  --ink-2: #2C4550;
  --muted: #587079;
  --water: #0A7482;
  --water-2: #13939D;
  --caustic: #7FE3DA;
  --aqua-1: #E4F5F4;
  --aqua-2: #C9ECEA;
  /* Large washes of water colour (section bands, page heads, footer): kept pale so the page breathes. */
  --wash: #EFF7F6;
  --wash-2: color-mix(in srgb, #C9ECEA 34%, transparent);
  --stone: #E3DCCF;
  --line: rgba(11, 36, 48, .10);
  --line-strong: rgba(11, 36, 48, .22);
  --danger: #B23A26;
  --success: #1F7A5A;
  --abyss: #06131B;
  --abyss-2: #0A2430;
  --on-dark: #F3F6F6;
  --on-dark-muted: rgba(243, 246, 246, .74);
  --card-shadow: 0 24px 48px -36px rgba(10, 36, 48, .38);
  --glow: none;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Two radii only: interface parts and photographs. */
  --r-sm: 6px;
  --r: 14px;
  --r-lg: 20px;
  --gutter: clamp(16px, 4.2vw, 64px);
  --section: clamp(72px, 9vw, 136px);
  --header-h: 80px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #061820;
  --surface: #0B222D;
  --surface-2: #10303D;
  --ink: #EAF4F5;
  --ink-2: #C3D6DB;
  --muted: #8FAAB3;
  --water: #6FE6DE;
  --water-2: #5FE1D9;
  --aqua-1: #0A2A34;
  --aqua-2: #0F3A45;
  --wash: var(--aqua-1);
  --wash-2: color-mix(in srgb, var(--aqua-2) 60%, transparent);
  --stone: #1A2E38;
  --line: rgba(234, 242, 244, .11);
  --line-strong: rgba(234, 242, 244, .26);
  --danger: #FF8E7A;
  --success: #6EE0B4;
  --abyss: #030B10;
  --abyss-2: #082029;
  --card-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8);
  --glow: 0 0 0 1px rgba(95, 225, 217, .10), 0 24px 70px -40px rgba(95, 225, 217, .35);

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--caustic); color: #04121A; }

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg);
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Typography ---------- */
.display, .h-xl, .h-lg, .h-md, .serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: -0.025em;
}
/* Scale: the home hero keeps the largest type; inner pages lead with content, not with a wall of letters. */
.display { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -0.04em; }
.h-xl { font-size: clamp(2rem, 3.5vw, 3.35rem); line-height: 1.04; letter-spacing: -0.035em; }
.h-lg { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.08; }
.h-md { font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.16; }
.display em, .h-xl em, .h-lg em, .h-md em { font-style: italic; font-weight: 300; color: var(--water); }

.lead { font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.55; color: var(--ink-2); max-width: 38ch; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow b { font-weight: 600; color: var(--ink); }

.link-line {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
  padding-bottom: 2px;
}
.link-line:hover, .link-line:focus-visible { background-size: 100% 1px; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 1480px); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 920px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section-tight { padding-block: calc(var(--section) * .6); }
.section-head { display: grid; gap: 24px; margin-bottom: clamp(36px, 4.5vw, 64px); }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(200px, 1fr) 2.4fr; align-items: end; }
  .section-head > .eyebrow { align-self: start; padding-top: .9em; }
}
.section-head .head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Title block left, a short note or link right, aligned on the baseline. */
.section-head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
.section-head--row .h-xl { margin-top: 16px; }
.section-head__note { margin: 0; max-width: 40ch; font-size: 15px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--water); --btn-fg: #fff; --btn-fill: var(--ink); --btn-fill-fg: #fff;
  position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--water) 80%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 54px; padding: 0 28px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--btn-fill); transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); }
.btn .icon { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn--light { --btn-bg: #F4F0EA; --btn-fg: #0F1A21; --btn-fill: var(--caustic); --btn-fill-fg: #04121A; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* On photographs: a light solid button and a frosted one. */
.btn--glass { --btn-bg: rgba(255, 255, 255, .14); --btn-fg: #fff; --btn-fill: rgba(255, 255, 255, .26); --btn-fill-fg: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn[disabled], .btn.is-loading { pointer-events: none; opacity: .65; }
.btn.is-loading .icon { animation: spin 1s linear infinite; }
[data-theme="dark"] .btn:not(.btn--light):not(.btn--ghost) { --btn-bg: var(--caustic); --btn-fg: #04121A; --btn-fill: #F4F0EA; --btn-fill-fg: #04121A; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn .icon { width: 20px; height: 20px; }

.arrow-link { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; }
.arrow-link .icon { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.arrow-link:hover .icon { transform: translateX(5px); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip.is-active { background: var(--ink); color: var(--bg); box-shadow: none; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink);

}
.tag--demo { background: #F2C14E; color: #2A1D00; }

/* ---------- Header ---------- */
/* At the top of a page the bar is fully transparent; once the page scrolls (.is-scrolled) a frosted-glass panel
   fades in behind it, slightly inset with rounded corners, and the bar settles a few pixels shorter.
   Over the home photograph (body:has(.hero)) the type and logo are white until the glass arrives. */
.site-header {
  --hdr-fg: var(--ink);
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h);
  color: var(--hdr-fg);
  transition: color .45s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);

  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 55%, transparent), 0 1px 0 var(--line), 0 18px 40px -28px rgba(8, 48, 60, .35);
  opacity: 0; transition: opacity .5s var(--ease), inset .6s var(--ease), border-radius .6s var(--ease);
}
/* The blur exists only while the glass is shown, so the transparent bar over the hero photo costs nothing. */
.site-header.is-scrolled::before { opacity: 1; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
@media (min-width: 900px) {
  .site-header.is-scrolled::before { inset: 8px max(8px, calc(var(--gutter) - 22px)); border-radius: 18px; }
}
[data-theme="dark"] .site-header::before { background: color-mix(in srgb, var(--bg) 66%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 40px -28px rgba(0, 0, 0, .7); }
/* Over the hero photograph: white type, a white logo, a soft shade from the top so the links always read. */
body:has(.hero) .site-header:not(.is-scrolled) { --hdr-fg: #fff; }
body:has(.hero) .site-header:not(.is-scrolled) .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(4, 22, 30, .35)); }
body:has(.hero) .site-header:not(.is-scrolled) .main-nav > a, body:has(.hero) .site-header:not(.is-scrolled) .nav-item > a { text-shadow: 0 1px 12px rgba(4, 22, 30, .35); }
[data-theme="dark"] body:has(.hero) .site-header:not(.is-scrolled) .brand-logo { background: none; padding: 0; }
.brand-logo { transform-origin: left center; transition: filter .45s var(--ease), transform .5s var(--ease); }
@media (min-width: 560px) { .site-header.is-scrolled .brand-logo { transform: scale(.88); } }

.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 23px; letter-spacing: -0.02em; line-height: 1; font-weight: 400; white-space: nowrap; }
@media (max-width: 380px) { .brand-name { font-size: 20px; } .brand { gap: 9px; } }
.brand-name em { font-style: italic; }

.main-nav { display: none; }
@media (min-width: 1100px) {
  .main-nav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
  /* Every destination is in the bar, so the overlay menu is for smaller screens only. */
  .menu-toggle[data-menu-open] { display: none; }
}
/* Links: quiet at rest; hover lifts a soft pill behind the word; the current page keeps a short turquoise line. */
.main-nav > a, .nav-item > a {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; opacity: .88;
  transition: opacity .3s var(--ease), background-color .35s var(--ease);
}
.main-nav > a::after, .nav-item > a::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px;
  background: var(--caustic); transform: scaleX(0); transition: transform .5s var(--ease);
}
.main-nav > a:hover, .nav-item > a:hover, .main-nav > a:focus-visible, .nav-item > a:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 9%, transparent); }
.main-nav a[aria-current="page"] { opacity: 1; }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header.is-scrolled .main-nav a[aria-current="page"]::after, body:not(:has(.hero)) .main-nav a[aria-current="page"]::after { background: var(--water-2); }

.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a { padding-right: 6px; }
.nav-sub-toggle { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -2px; border-radius: 999px; opacity: .8; transition: transform .4s var(--ease), opacity .3s, background-color .3s; }
.nav-sub-toggle .icon { width: 15px; height: 15px; }
.nav-sub-toggle:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.nav-item.is-open .nav-sub-toggle { transform: rotate(180deg); }
/* The panel: a white glass card under the link; opened by hover (mouse), keyboard focus or the chevron button. */
.nav-sub {
  position: absolute; top: calc(100% + 14px); left: -12px; width: 340px; padding: 10px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(8, 48, 60, .45);
  opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .3s var(--ease), translate .45s var(--ease), visibility 0s linear .3s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover bridge */
.nav-item.is-open .nav-sub, .nav-sub:focus-within { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s var(--ease), translate .45s var(--ease), visibility 0s; }
@media (hover: hover) and (pointer: fine) { .nav-item:hover .nav-sub { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s var(--ease), translate .45s var(--ease), visibility 0s; } }
.nav-sub__list a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; transition: background-color .3s var(--ease); }
.nav-sub__list a:hover, .nav-sub__list a:focus-visible { background: var(--aqua-1); }
.nav-sub__num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--aqua-1); color: var(--water); font-size: 12px; font-weight: 700; letter-spacing: .04em; transition: background-color .3s, color .3s; }
.nav-sub__list a:hover .nav-sub__num { background: var(--water); color: #fff; }
.nav-sub__text { display: grid; line-height: 1.25; }
.nav-sub__text strong { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; letter-spacing: -0.01em; }
.nav-sub__text small { font-size: 12.5px; color: var(--muted); }
.nav-sub__all { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--water); }
.nav-sub__all .icon { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.nav-sub__all:hover .icon { transform: translateX(4px); }

.header-actions { display: flex; align-items: center; gap: 4px; }
.header-cta { display: none; margin-left: 10px; }
.header-cta .icon { width: 16px; height: 16px; }
@media (min-width: 720px) { .header-cta { display: inline-flex; } }
/* Over the photograph the quote button is a white pill; on glass it is the turquoise primary. */
body:has(.hero) .site-header:not(.is-scrolled) .header-cta { --btn-bg: #fff; --btn-fg: var(--abyss-2); --btn-fill: var(--caustic); --btn-fill-fg: #04121A; }
body:has(.hero) .site-header:not(.is-scrolled) .lang-switch a { color: rgba(255, 255, 255, .72); }
body:has(.hero) .site-header:not(.is-scrolled) .lang-switch a:hover, body:has(.hero) .site-header:not(.is-scrolled) .lang-switch a[aria-current="true"] { color: #fff; }
body:has(.hero) .site-header:not(.is-scrolled) .lang-switch span { background: rgba(255, 255, 255, .4); }

.menu-toggle { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.menu-toggle .bars { position: relative; width: 22px; height: 10px; }
.menu-toggle .bars::before, .menu-toggle .bars::after {
  content: ""; position: absolute; left: 0; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .5s var(--ease), width .5s var(--ease);
}
.menu-toggle .bars::before { top: 0; width: 22px; }
.menu-toggle .bars::after { bottom: 0; width: 14px; }
.menu-toggle:hover .bars::after { width: 22px; }
.menu-toggle .icon { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { .menu-toggle .label { display: none; } .menu-toggle { padding: 0 11px; } }

/* Day / night switch: one sun-and-moon drawing that morphs (rays fold in, a shadow disc slides over the sun). */
.theme-toggle {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.theme-toggle__svg { width: 22px; height: 22px; overflow: visible; transition: transform .7s var(--ease); }
.theme-toggle__core { transform-origin: 12px 12px; transition: transform .7s var(--ease); }
.theme-toggle__shadow { transition: cx .7s var(--ease), cy .7s var(--ease); }
.theme-toggle__rays { transform-origin: 12px 12px; transition: transform .7s var(--ease), opacity .45s var(--ease); }
.theme-toggle__stars { opacity: 0; transform-origin: 19px 6px; transform: scale(.3); transition: opacity .4s var(--ease), transform .6s var(--ease); }
[data-theme="dark"] .theme-toggle__svg { transform: rotate(-40deg); }
[data-theme="dark"] .theme-toggle__core { transform: scale(1.55); }
[data-theme="dark"] .theme-toggle__shadow { cx: 17px; cy: 8.5px; }
[data-theme="dark"] .theme-toggle__rays { transform: rotate(-90deg) scale(.4); opacity: 0; }
[data-theme="dark"] .theme-toggle__stars { opacity: 1; transform: rotate(40deg) scale(1); transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .theme-toggle__svg, .theme-toggle__core, .theme-toggle__shadow, .theme-toggle__rays, .theme-toggle__stars { transition: none; } }

/* Switching: a circle of the new theme grows from the button (View Transitions); elsewhere colours cross-fade. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease) !important;
}
html.theme-switching::view-transition-new(root) { animation: theme-reveal .6s var(--ease-in-out) both; mix-blend-mode: normal; }
html.theme-switching::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--theme-x, 100%) var(--theme-y, 0)); }
  to { clip-path: circle(var(--theme-r, 150vmax) at var(--theme-x, 100%) var(--theme-y, 0)); }
}

/* Night: the logo artwork is drawn for daylight paper, so it sits on a small light plate. */
[data-theme="dark"] .brand-logo { background: #F3F6F6; border-radius: 10px; padding: 4px 8px; box-sizing: content-box; }

/* TR | EN: two quiet labels, the current one in ink with a hairline under it. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.lang-switch a { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 4px; border-radius: 999px; color: var(--muted); transition: color .3s var(--ease); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lang-switch span { width: 1px; height: 14px; background: var(--line-strong); }
.lang-switch--lg { font-size: 15px; letter-spacing: .02em; }
.lang-switch--lg a { padding: 0 10px; }
@media (max-width: 420px) { .header-actions .lang-switch { margin: 0; } .header-actions .lang-switch a { min-width: 28px; } }

/* ---------- Overlay menu ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid;
  background: var(--bg); color: var(--ink);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .9s var(--ease-in-out), visibility 0s linear .9s;
}
.menu-overlay.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-in-out), visibility 0s; }
.menu-overlay__inner { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; padding-block: 20px 32px; }
.menu-overlay__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - 20px); }
.menu-overlay__body { display: grid; gap: 48px; align-content: center; padding-block: 32px; }
@media (min-width: 1000px) { .menu-overlay__body { grid-template-columns: 1.5fr 1fr; align-items: center; } }

.menu-links { counter-reset: menu; }
.menu-links li { overflow: hidden; }
.menu-links a {
  display: flex; align-items: baseline; gap: 18px;
  font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.04em;
  transform: translateY(105%); transition: transform .9s var(--ease), color .3s var(--ease);
}
.menu-links a::before { counter-increment: menu; content: "0" counter(menu); font-family: var(--sans); font-size: 13px; letter-spacing: .14em; font-weight: 600; opacity: .5; transform: translateY(-1.6em); }
.menu-links a:hover, .menu-links a:focus-visible { color: var(--water); font-style: italic; }
.menu-overlay.is-open .menu-links a { transform: none; }
.menu-overlay.is-open .menu-links li:nth-child(2) a { transition-delay: .06s; }
.menu-overlay.is-open .menu-links li:nth-child(3) a { transition-delay: .12s; }
.menu-overlay.is-open .menu-links li:nth-child(4) a { transition-delay: .18s; }
.menu-overlay.is-open .menu-links li:nth-child(5) a { transition-delay: .24s; }
.menu-overlay.is-open .menu-links li:nth-child(6) a { transition-delay: .30s; }

.menu-secondary { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 15px; font-weight: 600; }
.menu-aside { display: grid; gap: 28px; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease) .3s, transform .8s var(--ease) .3s; }
.menu-overlay.is-open .menu-aside { opacity: 1; transform: none; }
.menu-preview { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; display: none; background: var(--surface-2); }
@media (min-width: 1000px) { .menu-preview { display: block; } }
.menu-preview .visual { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.menu-preview .visual.is-active { opacity: 1; }
.menu-contact { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.menu-contact a { color: var(--ink); }
.menu-overlay__foot { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; color: var(--muted); }

/* ---------- Visuals (art-directed placeholders & media) ---------- */
.visual {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface-2);
  color: #EEF4F5;
}
/* Art-directed fills only for items that have no photograph; a photo loads over plain stone. */
.visual--empty { background: linear-gradient(160deg, #0E5E6F, #06303D 70%); }
.visual > img, .visual > picture, .visual > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual .caustics { opacity: .42; }
.visual--empty { filter: hue-rotate(var(--hue, 0deg)); }
.visual--empty.visual--pool { background: radial-gradient(120% 90% at 80% 0%, #1B8FA0 0%, transparent 55%), linear-gradient(165deg, #0E6476 0%, #073443 75%); }
.visual--empty.visual--wellness {
  background:
    radial-gradient(70% 60% at 75% 20%, rgba(255, 214, 170, .35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 46px),
    linear-gradient(160deg, #8A5A36 0%, #5A3720 55%, #2E1B10 100%);
}
.visual--empty.visual--art {
  background:
    radial-gradient(80% 70% at 20% 10%, rgba(196, 230, 190, .35), transparent 60%),
    radial-gradient(60% 50% at 90% 90%, rgba(95, 225, 217, .25), transparent 60%),
    linear-gradient(160deg, #3E6B53 0%, #1D3A2D 70%);
}
.visual--empty.visual--care {
  background:
    radial-gradient(90% 80% at 80% 10%, rgba(255, 255, 255, .45), transparent 60%),
    linear-gradient(160deg, #3BAAA7 0%, #1D6F78 80%);
}
.visual--wellness .caustics, .visual--art .caustics { opacity: .22; }
.visual__mark { position: absolute; z-index: 2; inset: auto auto 22px 22px; display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.visual__icon { position: absolute; z-index: 2; right: 8%; top: 50%; width: 34%; max-width: 180px; transform: translateY(-50%); opacity: .22; stroke-width: 1; }
.visual__initials { position: absolute; z-index: 2; left: 22px; bottom: 16px; font-family: var(--serif); font-style: italic; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; opacity: .9; font-weight: 300; }
.visual--empty::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent 50%); }

/* SVG caustic light (pattern drawn once by an SVG filter, then drifted with transforms) */
.caustics { position: absolute; inset: -12%; z-index: 0; pointer-events: none; mix-blend-mode: screen; background-repeat: repeat; will-change: transform; }
.caustics--a { background-image: url("/img/caustics-a.webp"); background-size: 1100px; }
.caustics--b { background-image: url("/img/caustics-b.webp"); background-size: 1500px; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .js .caustics--a { animation: drift-a 26s var(--ease-in-out) infinite alternate; }
  .js .caustics--b { animation: drift-b 34s var(--ease-in-out) infinite alternate; }
}
@keyframes drift-a { from { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) scale(1.1) rotate(2deg); } }
@keyframes drift-b { from { transform: translate3d(3%, 2%, 0) scale(1.08) rotate(-1deg); } to { transform: translate3d(-4%, -3%, 0) scale(1.02) rotate(1.5deg); } }

/* ---------- Water atmosphere (every page, behind everything) ----------
   Three quiet layers, all moved with transform only:
   1. clouds of pool colour (turquoise, pale sky blue, warm travertine) drifting very slowly;
   2. a fan of soft sun rays falling from the upper right, swaying a little;
   3. thin water lines flowing along the lower part of the screen, each at its own pace.
   Text-heavy pages and small screens get less of it; reduced motion keeps it still. */
.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: var(--atmos, 1); contain: strict; }
.atmos__blob { position: absolute; display: block; width: 62vmax; height: 62vmax; border-radius: 50%; will-change: transform; }
.atmos__blob--a { top: -26vmax; left: -18vmax; background: radial-gradient(circle at 50% 50%, rgba(127, 227, 218, .40), rgba(127, 227, 218, 0) 64%); }
.atmos__blob--b { top: 8vh; right: -24vmax; background: radial-gradient(circle at 50% 50%, rgba(150, 205, 238, .34), rgba(150, 205, 238, 0) 64%); }
.atmos__blob--c { bottom: -30vmax; left: 22vw; background: radial-gradient(circle at 50% 50%, rgba(232, 214, 184, .36), rgba(232, 214, 184, 0) 62%); }

.atmos__rays {
  position: absolute; display: block; top: -30vh; right: -20vw; width: 110vw; height: 140vh; transform-origin: 85% 0;
  background: conic-gradient(from 198deg at 85% 0%,
    transparent 0deg, rgba(127, 227, 218, .10) 5deg, transparent 11deg, transparent 17deg,
    rgba(255, 246, 225, .22) 21deg, transparent 27deg, transparent 33deg,
    rgba(150, 205, 238, .10) 37deg, transparent 44deg, transparent 52deg,
    rgba(255, 246, 225, .16) 56deg, transparent 62deg, transparent 360deg);
  -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
  mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
}

.atmos__waves { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: 42vh; overflow: visible; }
.atmos__wave path { fill: none; stroke: var(--water-2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.atmos__wave--1 path { opacity: .14; }
.atmos__wave--2 path { opacity: .10; stroke: var(--caustic); stroke-width: 2.2; }
.atmos__wave--3 path { opacity: .08; }

[data-theme="dark"] .atmos__blob--a { background: radial-gradient(circle, rgba(95, 225, 217, .16), rgba(95, 225, 217, 0) 64%); }
[data-theme="dark"] .atmos__blob--b { background: radial-gradient(circle, rgba(60, 130, 190, .18), rgba(60, 130, 190, 0) 64%); }
[data-theme="dark"] .atmos__blob--c { background: radial-gradient(circle, rgba(18, 122, 138, .20), rgba(18, 122, 138, 0) 62%); }
[data-theme="dark"] .atmos__rays { opacity: .35; }
[data-theme="dark"] .atmos__wave path { stroke: var(--caustic); }

@media (prefers-reduced-motion: no-preference) {
  .js .atmos__blob--a { animation: blob-a 46s var(--ease-in-out) infinite alternate; }
  .js .atmos__blob--b { animation: blob-b 58s var(--ease-in-out) infinite alternate; }
  .js .atmos__blob--c { animation: blob-c 52s var(--ease-in-out) infinite alternate; }
  .js .atmos__rays { animation: rays 24s var(--ease-in-out) infinite alternate; }
  .js .atmos__wave--1 { animation: wave-flow 48s linear infinite; }
  .js .atmos__wave--2 { animation: wave-flow 70s linear infinite reverse; }
  .js .atmos__wave--3 { animation: wave-flow 92s linear infinite; }
}
@keyframes blob-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes blob-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-16vw, 18vh, 0) scale(.92); } }
@keyframes blob-c { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(-12vw, -14vh, 0) scale(1.12); } }
@keyframes rays { from { transform: rotate(-2.5deg); opacity: .75; } to { transform: rotate(2.5deg); opacity: 1; } }
/* The paths repeat every half of the drawing, so sliding by half loops without a seam. */
@keyframes wave-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Reading pages (legal texts, long forms) keep only a trace; phones get fewer moving parts. */
body:has(.legal), body.page-quote { --atmos: .45; }
@media (max-width: 699px) {
  .atmos { opacity: calc(var(--atmos, 1) * .8); }
  .atmos__waves { height: 30vh; }
  .js .atmos__wave--3, .js .atmos__rays { animation: none; }
}

/* ---------- Hero ---------- */
/* Full-bleed photograph from edge to edge, the transparent header resting on it. The copy sits lower-left on a
   shade that covers only that corner; the facts and the slide caption lower-right. The photo ends in layered,
   slowly drifting water lines (.hero__waves) whose front layer is the page colour, so the page seems to rise out
   of the pool. */
.hero { position: relative; padding: 0; --wave-h: clamp(56px, 8.5vw, 140px); }
.hero__frame { position: relative; isolation: isolate; overflow: hidden; background: #0B3D4A; color: #fff;
  height: clamp(620px, 100svh, 1080px);
  /* The photograph itself is cut along the front water line (two mask layers: the wave below, a plain block above),
     so whatever lies under the page shows through and no colour seam appears. */
  --wave-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V84C1310 92 1170 115 990 120C790 126 650 99 460 88C290 78 150 88 0 104Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave-cut) bottom / 100% var(--wave-h) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
  mask: var(--wave-cut) bottom / 100% var(--wave-h) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat; }
@media (max-width: 699px) { .hero__frame { height: max(600px, 92svh); } }

/* Water lines: two translucent layers drift in opposite directions behind a still front edge in the page colour. */
.hero__waves { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: var(--wave-h); pointer-events: none; overflow: hidden; }
.hero__waves svg { position: absolute; bottom: 0; left: 0; width: 200%; max-width: none; height: 100%; overflow: visible; }
.hero__wave-back path { fill: rgba(255, 255, 255, .24); }
.hero__wave-mid path { fill: rgba(201, 236, 234, .46); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__wave-back { animation: wave-flow 38s linear infinite; }
  .js .hero__wave-mid { animation: wave-flow 26s linear infinite reverse; }
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* Layered crossfade: the incoming photo fades in (and settles a few pixels) on top of the outgoing one, which stays
   fully opaque underneath until the fade ends (.is-prev) — so the frame never dips towards its background. */
.hero__slide { position: absolute; inset: 0; z-index: 0; margin: 0; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity 1.8s var(--ease-in-out), transform 2.4s var(--ease); }
.hero__slide.is-prev { z-index: 1; opacity: 1; transform: none; transition: none; }
.hero__slide.is-active { z-index: 2; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transform: none; } }
.hero__slide picture { display: contents; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); }
@media (max-width: 699px) { .hero__slide img { object-position: var(--focus-m, var(--focus, 50% 50%)); transform-origin: var(--focus-m, var(--focus, 50% 50%)); } }
.hero__ripple { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 26, 34, .46) 0%, rgba(3, 26, 34, .14) 18%, rgba(3, 26, 34, 0) 32%),
    radial-gradient(70% 75% at 0% 78%, rgba(3, 26, 34, .62) 0%, rgba(3, 26, 34, .30) 45%, rgba(3, 26, 34, 0) 75%),
    linear-gradient(to top, rgba(3, 26, 34, .32) 0%, rgba(3, 26, 34, 0) 34%); }
/* Morning haze: a pale light that drifts across the top of the frame over a minute. */
.hero__veil::after { content: ""; position: absolute; inset: -10% -20% 55% -20%; background: radial-gradient(40% 60% at 50% 0%, rgba(255, 255, 255, .22), transparent 70%); opacity: .8; }
@media (prefers-reduced-motion: no-preference) { .hero__veil::after { animation: haze 60s ease-in-out infinite alternate; } }
/* Phones: the copy covers more of the photo, so the shade under it reaches higher — still only where the text is. */
@media (max-width: 699px) { .hero__veil { background: linear-gradient(to bottom, rgba(3, 26, 34, .42) 0%, rgba(3, 26, 34, 0) 26%), linear-gradient(to top, rgba(3, 26, 34, .66) 0%, rgba(3, 26, 34, .36) 40%, rgba(3, 26, 34, 0) 70%); } }
@keyframes haze { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* Copy and facts line up with the page container (.wrap), whatever the screen width. */
.hero { --hero-x: max(var(--gutter), calc((100% - 1480px) / 2)); }
.hero__content { position: absolute; z-index: 3; left: var(--hero-x); bottom: calc(var(--wave-h) + clamp(40px, 7vh, 96px)); max-width: min(720px, 86%);
  display: grid; gap: 20px; justify-items: start; text-shadow: 0 1px 24px rgba(4, 22, 30, .3); }
.hero__kicker { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.hero__kicker::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--caustic), rgba(127, 227, 218, .2)); }
.hero__title { margin: 0; color: #fff; font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 5.4vw, 5.4rem); line-height: 1; letter-spacing: -0.04em; }
.hero__title em { font-style: italic; color: #C9F4EE; }

/* Copy changes with the photo: out with a short lift, in from slightly below; staggered title → lead → button. */
.hero__content.is-live .hero-in, .hero__content.is-live .hero__title .line > span { animation: none; }
.hero__content [data-hero-headline], .hero__content [data-hero-lead], .hero__content .hero__ctas {
  transition: opacity .55s var(--ease), translate .75s var(--ease);
}
.hero__content [data-hero-lead] { transition-delay: .12s; }
.hero__content .hero__ctas { transition-delay: .24s; }
.hero__content.is-leaving [data-hero-headline], .hero__content.is-leaving [data-hero-lead], .hero__content.is-leaving .hero__ctas { transition-duration: .35s; transition-delay: 0s; }
.hero__content.is-leaving [data-hero-headline], .hero__content.is-leaving [data-hero-lead], .hero__content.is-leaving .hero__ctas { opacity: 0; translate: 0 -10px; }
.hero__content.is-entering [data-hero-headline], .hero__content.is-entering [data-hero-lead], .hero__content.is-entering .hero__ctas { opacity: 0; translate: 0 14px; transition: none; }

/* Sunlight on water: once per scene (home.js adds .is-on after each change) a broad, soft-edged band of warm
   daylight drifts across the photo. A wide multi-stop gradient gives the soft edge, so no blur filter is needed. */
.hero__sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__sweep::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -80%; width: 75%;
  background: linear-gradient(100deg,
    rgba(255, 250, 235, 0) 0%, rgba(255, 250, 235, .04) 22%, rgba(255, 250, 235, .13) 42%,
    rgba(225, 250, 246, .15) 50%, rgba(225, 250, 246, .10) 58%, rgba(255, 255, 255, .03) 78%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(0, 0, 0) skewX(-14deg); opacity: 0; will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) { .hero__sweep.is-on::before { animation: light-sweep 3.8s var(--ease-in-out) .7s both; } }
@media (max-width: 699px) { .hero__sweep::before { width: 120%; left: -125%; } .hero__sweep.is-on::before { animation-duration: 4.4s; } }
@keyframes light-sweep {
  0% { transform: translate3d(0, 0, 0) skewX(-14deg); opacity: 0; }
  18% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate3d(240%, 0, 0) skewX(-14deg); opacity: 0; }
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.08em; }
.hero__title .line > span { display: inline-block; }
.hero__lead { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .92); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; text-shadow: none; }

.hero__aside { position: absolute; z-index: 3; right: var(--hero-x); bottom: calc(var(--wave-h) + clamp(28px, 4vh, 56px)); display: grid; gap: 14px; justify-items: end; }
.hero__facts { display: flex; margin: 0; color: #fff; text-shadow: 0 1px 14px rgba(4, 22, 30, .45); }
.hero__facts > div { display: grid; gap: 2px; padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, .34); }
.hero__facts > div:first-child { border-left: 0; padding-left: 0; }
.hero__facts > div:last-child { padding-right: 0; }
.hero__facts dt { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.hero__facts dd { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hero__bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 999px; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 93%, transparent); font-size: 13px; }
.hero__caption { display: inline-flex; align-items: baseline; gap: 8px; padding-right: 6px; transition: opacity .5s var(--ease); }
.hero__caption strong { font-weight: 700; white-space: nowrap; }
.hero__caption span { color: var(--muted); white-space: nowrap; }
.hero__caption .icon { width: 14px; height: 14px; align-self: center; }
.hero__caption:hover strong, .hero__caption:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hero__caption.is-swapping { opacity: 0; }
.hero__controls { display: flex; align-items: center; }
.hero__dot, .hero__pause { display: grid; place-items: center; height: 34px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 999px; }
.hero__dot { width: 32px; }
.hero__dot span { position: relative; display: block; width: 22px; height: 2px; background: var(--line-strong); overflow: hidden; border-radius: 2px; }
.hero__dot i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero__dot[aria-current="true"] i { transform: none; }
/* The active dot's fill is the slideshow clock: its animationend advances the slide, so pausing it pauses everything. */
.hero.is-autoplay .hero__dot[aria-current="true"] i { animation: hero-progress var(--slide-ms, 5000ms) linear forwards; }
.hero.is-paused .hero__dot i { animation-play-state: paused; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: none; } }
.hero__pause { width: 34px; }
.hero__pause .icon { width: 15px; height: 15px; }
.hero__pause .icon--play, .hero__pause[aria-pressed="true"] .icon--pause { display: none; }
.hero__pause[aria-pressed="true"] .icon--play { display: block; }
/* Narrow screens: the facts leave the photo (they are repeated under it) and the caption bar spans the foot. */
@media (max-width: 899px) {
  .hero__content { right: var(--gutter); max-width: none; bottom: calc(var(--wave-h) + 84px); }
  .hero__aside { left: var(--gutter); right: var(--gutter); bottom: calc(var(--wave-h) + 16px); justify-items: stretch; }
  .hero__facts { display: none; }
  .hero__bar { justify-content: space-between; }
  .hero__mfacts { display: flex; }
}
@media (max-width: 479px) { .hero__caption span { display: none; } }

/* First paint already holds the start state, so nothing flashes before scripts run; CSS alone plays the entrance. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .line > span { animation: rise-in .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
  .hero-in { animation: fade-up .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
  .hero__media { animation: media-in 1.1s var(--ease) both; }
  .page-hero h1 { animation: fade-up .6s var(--ease) both; }
}
@keyframes rise-in { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes media-in { from { opacity: 0; scale: 1.04; } to { opacity: 1; scale: 1; } }

/* Facts repeated under the photo on narrow screens, where the photo has no room for them. */
.hero__mfacts { display: none; justify-content: space-between; gap: 12px; margin: 4px var(--gutter) 0; padding: 14px 0; border-block: 1px solid var(--line); }
.hero__mfacts div { display: grid; gap: 2px; }
.hero__mfacts dt { font-family: var(--serif); font-size: 1.3rem; line-height: 1; }
.hero__mfacts dd { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Slots still waiting for a photograph (media.json → ShowPlaceholders). Deliberately plain so it never passes for a design. */
.media-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 14px, color-mix(in srgb, var(--surface-2) 70%, var(--stone)) 14px 28px);
  color: var(--ink-2); outline: 1px dashed var(--line-strong); outline-offset: -10px; text-shadow: none; }
.media-ph__label { font-family: var(--serif); font-size: 1.3rem; }
.media-ph__spec { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: 30ch; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(36px, 5.5vw, 88px)); padding-bottom: clamp(40px, 5vw, 76px); position: relative; }
.page-hero .display, .page-hero .h-xl { max-width: 16ch; }
.page-hero__grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .page-hero__grid { grid-template-columns: 1.5fr 1fr; align-items: end; } }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 13px; font-weight: 600; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumbs a:hover { color: var(--ink); }

/* ---------- About ---------- */
.studio-hero__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: end; }
@media (min-width: 1000px) { .studio-hero__grid { grid-template-columns: 1fr 1fr; } }
.studio-hero__copy { display: grid; gap: 28px; justify-items: start; }
.studio-hero__copy .lead { margin: 0; max-width: 40ch; }
.studio-hero__figure { margin: 0; display: grid; gap: 10px; }
.studio-hero__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
@media (min-width: 1000px) { .studio-hero__figure img { aspect-ratio: 5 / 6; max-height: 72vh; } }
.studio-hero__figure figcaption { font-size: 13px; color: var(--muted); }
.founders { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.founders li { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--line-strong); }
.founders strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; }
.founders__role { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--water); }
.scope-item__links { display: grid; gap: 4px; }
.scope-item__links a { font-family: var(--serif); font-size: 1.25rem; letter-spacing: -0.01em; }
.ref-list { border-top: 1px solid var(--line-strong); }
.ref-list a { display: grid; grid-template-columns: 9rem 1fr auto; gap: 4px 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); transition: color .3s var(--ease); }
.ref-list strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.2; }
.ref-list__city { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ref-list__type { grid-column: 2; font-size: 15px; color: var(--muted); }
.ref-list .icon { grid-row: 1; grid-column: 3; width: 18px; height: 18px; opacity: .5; transition: transform .4s var(--ease), opacity .3s; }
.ref-list a:hover, .ref-list a:focus-visible { color: var(--water); }
.ref-list a:hover .icon, .ref-list a:focus-visible .icon { opacity: 1; transform: translate(3px, -3px); }
@media (max-width: 599px) { .ref-list a { grid-template-columns: 1fr auto; } .ref-list__city { grid-column: 1; } .ref-list strong, .ref-list__type { grid-column: 1; } .ref-list .icon { grid-row: 2; grid-column: 2; } }

/* ---------- Manifesto ---------- */
.manifesto__text { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.5vw, 2.35rem); line-height: 1.28; max-width: 30ch; letter-spacing: -0.025em; }
.manifesto__text .w { transition: opacity .2s linear; }
.manifesto__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; }
.manifesto__sign { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 14px; }
.manifesto__sign::before { content: ""; width: 48px; height: 1px; background: var(--line-strong); }

/* ---------- Service cards (home) ---------- */
/* Light, airy cards rising over the hero's water line: a rounded photo inset, the area in serif, its line and the
   services as quiet links. The whole card leads to the area (stretched title link); service links sit above it. */
.home-services { padding-top: clamp(28px, 4vw, 64px); position: relative; }

.svc-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.svc-card { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 24px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--rest-shadow); transition: transform .6s var(--ease), box-shadow .5s var(--ease); }
.svc-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--aqua-1), var(--aqua-2)); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.svc-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 48%, rgba(210, 248, 243, .12) 52%, transparent 70%);
  background-size: 250% 100%; background-position: 130% 0; transition: background-position 1.4s var(--ease); }
.svc-card__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--water); }
.svc-card__glyph .icon { width: 30%; height: auto; stroke-width: 1; opacity: .7; }
.svc-card__num { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--water); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  }
.svc-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px 12px 10px; }
.svc-card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.9vw, 1.85rem); line-height: 1.1; letter-spacing: -0.025em; }
.svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.svc-card__link:focus-visible { outline: none; }
.svc-card:has(.svc-card__link:focus-visible) { outline: 2px solid var(--water-2); outline-offset: 3px; }
.svc-card__tagline { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.svc-card__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.svc-card__list a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--aqua-1); color: var(--ink-2); font-size: 13px; font-weight: 600; transition: background-color .3s var(--ease), color .3s var(--ease); }
.svc-card__list a:hover, .svc-card__list a:focus-visible { background: var(--water); color: #fff; }
.svc-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--water); }
.svc-card__go .icon { width: 16px; height: 16px; margin-left: auto; transition: transform .45s var(--ease); }
.svc-card:hover, .svc-card:focus-within { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--frame), var(--halo); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card:hover .svc-card__media::after { background-position: -30% 0; }
.svc-card:hover .svc-card__go .icon { transform: translateX(5px); }
@media (hover: none) { .svc-card:hover { transform: none; box-shadow: 0 0 0 1px var(--line), var(--rest-shadow); } }

/* A pale water band for alternating sections; its edges fade into the page instead of a hard line. */
.section--tint { background: linear-gradient(to bottom, transparent, var(--wash) 14%, var(--wash) 86%, transparent); }

/* ---------- Process (signature scene) ---------- */
.process { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .process { grid-template-columns: 1.25fr 1fr; min-height: 100vh; } }
.process__stage { position: relative; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--card-shadow), var(--glow); padding: clamp(16px, 3vw, 40px); }
.process__stage svg { width: 100%; height: auto; overflow: visible; }
.process__badge { position: absolute; top: 20px; left: 24px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.process__counter { position: absolute; top: 14px; right: 24px; font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1; color: var(--water); }
.process__counter small { font-size: 16px; color: var(--muted); }
.process__steps { display: grid; gap: 0; counter-reset: step; }
.process__step { position: relative; padding: 22px 0 22px 64px; border-top: 1px solid var(--line); transition: opacity .5s var(--ease); }
.process__step:last-child { border-bottom: 1px solid var(--line); }
.process__step::before { counter-increment: step; content: "0" counter(step); position: absolute; left: 0; top: 26px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--water); }
.process__step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; }
.process__step p { margin: 8px 0 0; color: var(--ink-2); max-width: 46ch; }
.process__step .note { display: inline-flex; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--water); }
.is-pinned-process .process__step { opacity: .28; }
.is-pinned-process .process__step.is-active { opacity: 1; }
.is-pinned-process .process__step:not(.is-active) p, .is-pinned-process .process__step:not(.is-active) .note { display: none; }
@media (min-width: 960px) {
  .process__progress { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
  .process__progress span { position: absolute; inset: 0 0 auto; height: 0; background: var(--water); }
}

/* pool diagram colours */
.pd-ground { fill: var(--stone); }
.pd-earth { fill: color-mix(in srgb, var(--stone) 70%, var(--ink) 8%); }
.pd-concrete { fill: color-mix(in srgb, var(--ink) 20%, var(--surface)); }
.pd-line { stroke: var(--ink); fill: none; }
.pd-dash { stroke: var(--muted); stroke-dasharray: 6 6; fill: none; }
.pd-accent { stroke: var(--water); fill: none; }
.pd-text { fill: var(--ink-2); font: 600 13px var(--sans); letter-spacing: .04em; }
.pd-text-accent { fill: var(--water); font: 600 13px var(--sans); }
.pd-tile { stroke: color-mix(in srgb, var(--water) 45%, transparent); fill: none; }
.pd-water { fill: url(#pd-water-grad); }
.pd-shine { stroke: rgba(255, 255, 255, .7); fill: none; }

/* ---------- Project tiles ---------- */
/* Soft UI: the photo is the card, a hairline inner border and a low, wide shadow give it a printed-on-board depth.
   Title and place sit on a shade at the foot; type and the "view" cue rise on hover or focus, and are always shown
   where there is no hover. */
.p-tile { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); color: #fff; background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(6, 26, 34, .06), 0 18px 40px -30px rgba(6, 26, 34, .55);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.p-tile::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.p-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 20, 28, .62) 0%, rgba(4, 20, 28, .22) 34%, rgba(4, 20, 28, 0) 56%); transition: opacity .6s var(--ease); }
.p-tile__media { position: absolute; inset: 0; }
.p-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.p-tile__media .visual { position: absolute; inset: 0; }
.p-tile__info { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 18px 20px 18px; text-shadow: 0 1px 14px rgba(4, 20, 28, .35); }
.p-tile__meta { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.p-tile__title { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.15; letter-spacing: -0.015em; color: #fff; }
.p-tile--lead .p-tile__title { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
.p-tile__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.p-tile__more > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .4s var(--ease); }
.p-tile__type { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .86); }
.p-tile__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.p-tile__cta .icon { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.p-tile__flag { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: #F2C14E; color: #2A1D00; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.p-tile:hover, .p-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(6, 26, 34, .06), 0 30px 60px -34px rgba(6, 26, 34, .65); }
.p-tile:hover .p-tile__media img, .p-tile:focus-visible .p-tile__media img { transform: scale(1.045); }
.p-tile:hover .p-tile__more, .p-tile:focus-visible .p-tile__more { grid-template-rows: 1fr; }
.p-tile:hover .p-tile__more > div, .p-tile:focus-visible .p-tile__more > div { opacity: 1; transition-delay: .1s; }
.p-tile:hover .p-tile__cta .icon { transform: translateX(4px); }
.p-tile:focus-visible { outline: 2px solid var(--water-2); outline-offset: 4px; }
@media (hover: none) { .p-tile__more { grid-template-rows: 1fr; } .p-tile__more > div { opacity: 1; } }

/* Home: a compact bento on a fixed height (one lead, four companions); a swipeable row on phones. */
.bento { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(200px, 19vw, 270px); }
  .bento > .p-tile--lead { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 699px) {
  .bento { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; margin-inline: -2px; scrollbar-width: none; }
  .bento::-webkit-scrollbar { display: none; }
  .bento > .p-tile { aspect-ratio: 4 / 5; scroll-snap-align: start; }
}

/* Projects page: an editorial grid on fixed row heights; the eight-tile rhythm (7·5 / 4·4·4 / 5·7 / 12) changes the
   proportions while every row stays aligned. Appended pages and filtered results follow the same rhythm. */
.project-grid { display: grid; gap: 14px; }
@media (max-width: 759px) { .project-grid > .p-tile { aspect-ratio: 4 / 3.2; } }
@media (min-width: 760px) {
  .project-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(240px, 25vw, 360px); }
  .project-grid > * { grid-column: span 6; }
  .project-grid--rhythm > :nth-child(8n) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .project-grid--rhythm > :nth-child(8n+1), .project-grid--rhythm > :nth-child(8n+7) { grid-column: span 7; }
  .project-grid--rhythm > :nth-child(8n+2), .project-grid--rhythm > :nth-child(8n+6) { grid-column: span 5; }
  .project-grid--rhythm > :nth-child(8n+3), .project-grid--rhythm > :nth-child(8n+4), .project-grid--rhythm > :nth-child(8n+5) { grid-column: span 4; }
  .project-grid--rhythm > :last-child:nth-child(8n+1) { grid-column: 1 / -1; }
  .project-grid--rhythm > :nth-child(8n) .p-tile__title, .project-grid--rhythm > :nth-child(8n+1) .p-tile__title, .project-grid--rhythm > :nth-child(8n+7) .p-tile__title { font-size: clamp(1.5rem, 2vw, 2rem); }
}
.project-grid--pair { grid-auto-rows: clamp(220px, 20vw, 300px); }

/* ---------- Compare (sauna vs steam) ---------- */
.compare {
  --mix: 0;
  position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  color: #F7EEE6; padding: clamp(28px, 5vw, 72px);
  background: linear-gradient(160deg, #7B4B2A, #3B2213);
  transition: color .4s var(--ease);
}
.compare::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 70% at 70% 20%, #FFFFFF, transparent 70%), linear-gradient(160deg, #DCE8EB, #A9C3CB);
  opacity: var(--mix);
}
.compare::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 52px);
  opacity: calc(1 - var(--mix));
}
.compare.is-steam { color: #0F1A21; }
.compare__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .compare__grid { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.compare__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.035em; color: inherit; }
.compare__title em { font-style: italic; }
.compare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare__stat { border-top: 1px solid currentColor; padding-top: 14px; }
.compare__stat .label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.compare__stat .value { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.compare__stat .value small { font-size: .4em; margin-left: 4px; }
.compare__facts { display: grid; gap: 10px; margin-top: 8px; font-size: 15px; }
.compare__facts li { display: flex; gap: 10px; align-items: baseline; }
.compare__facts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-2px); }
.compare__control { display: grid; gap: 14px; margin-top: 32px; }
.compare__ends { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.compare__table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 28px; }
.compare__table th, .compare__table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); vertical-align: top; }
.compare__table th { font-weight: 700; }
.js .compare--interactive .compare__table { display: none; }

/* range input */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 2px; background: currentColor; opacity: .9; }
.range::-moz-range-track { height: 2px; background: currentColor; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 18%, transparent); transition: transform .3s var(--ease); }
.range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: currentColor; }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.stat__value { font-family: var(--serif); font-weight: 300; font-size: clamp(3.2rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__value sup { font-size: .4em; color: var(--water); vertical-align: .9em; margin-left: .05em; }
.stat__label { margin-top: 14px; color: var(--ink-2); max-width: 22ch; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.25; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .5s var(--ease), background-color .3s; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .pm { background: var(--ink); color: var(--bg); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .answer { padding: 0 64px 28px 0; color: var(--ink-2); max-width: 70ch; }
.faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- Footer ---------- */
/* A short contact band (one line, one button, two contacts) sits on the page just above the footer surface. */
.contact-band { display: grid; gap: 18px 40px; align-items: center; margin-block: clamp(24px, 4vw, 56px) clamp(40px, 5vw, 72px); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 44px);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px -44px rgba(6, 26, 34, .5); position: relative; overflow: hidden; }
.contact-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--water-2), var(--caustic)); }
@media (min-width: 900px) { .contact-band { grid-template-columns: 1fr auto; } }
.contact-band__copy .h-md { margin: 0; }
.contact-band__copy .h-md em { font-style: italic; color: var(--water); }
.contact-band__copy p { margin: 6px 0 0; font-size: 15px; }
.contact-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.contact-band__lines { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.contact-band__lines a { display: inline-flex; align-items: center; gap: 8px; }
.contact-band__lines .icon { width: 16px; height: 16px; color: var(--water); }

.site-footer { position: relative; color: var(--ink); padding-bottom: 28px; }
.footer-main { display: grid; gap: 36px; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .footer-main { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand { display: grid; gap: 14px; justify-items: start; align-content: start; }
.footer-brand p { margin: 0; max-width: 34ch; font-size: 15px; }
.footer-brand .brand-name em { font-style: italic; color: var(--water); }
.footer-col h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col li + li { margin-top: 8px; }
.footer-col a { color: var(--ink); font-size: 15px; }
.footer-col address { font-style: normal; color: var(--ink-2); font-size: 15px; max-width: 32ch; }
.footer-col__label { display: inline-block; min-width: 3.6em; margin-right: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.socials { display: flex; gap: 6px; margin-top: 8px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .3s, color .3s; }
.socials a:hover { background: var(--ink); color: var(--bg); }
.socials .icon { width: 18px; height: 18px; }

/* ---------- Floating bits ---------- */
/* quick contact button (bottom right, every page) */
.contact-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; display: grid; justify-items: end; gap: 12px; }
.contact-fab__toggle {
  position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--water); color: #fff;
  box-shadow: 0 18px 40px -18px rgba(11, 90, 104, .9); transition: transform .4s var(--ease), background-color .3s;
}
.contact-fab__toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--water);
  animation: fab-pulse 2.8s var(--ease) infinite; pointer-events: none;
}
.contact-fab__toggle:hover { transform: translateY(-2px) scale(1.04); }
.contact-fab__toggle:focus-visible { outline: 3px solid var(--water-2); outline-offset: 3px; }
.contact-fab__toggle .icon { width: 26px; height: 26px; }
.contact-fab__close { display: none; }
.contact-fab.is-open .contact-fab__open { display: none; }
.contact-fab.is-open .contact-fab__close { display: grid; }
.contact-fab.is-open .contact-fab__toggle::after { animation: none; opacity: 0; }
.contact-fab.is-open { z-index: 60; }
.contact-fab__menu {
  display: grid; gap: 6px; padding: 8px; min-width: 232px; border-radius: var(--r); background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), 0 0 0 1px var(--line);
  transform-origin: bottom right; animation: fab-in .28s var(--ease);
}
.contact-fab__menu[hidden] { display: none; }
.contact-fab__item {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px 8px 8px; border-radius: calc(var(--r) - 4px);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.contact-fab__item:hover, .contact-fab__item:focus-visible { background: color-mix(in srgb, var(--water) 9%, transparent); text-decoration: none; outline: none; }
.contact-fab__item:focus-visible { box-shadow: inset 0 0 0 2px var(--water); }
.contact-fab__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--water); color: #fff; flex: none; }
.contact-fab__icon .icon { width: 18px; height: 18px; }
.contact-fab__item--wa .contact-fab__icon { background: #1F9D57; }
.contact-fab__item--fb .contact-fab__icon { background: #1877F2; }
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .contact-fab__toggle::after { animation: none; opacity: 0; }
  .contact-fab__menu { animation: none; }
}
@media (max-width: 560px) { .contact-fab__toggle { width: 54px; height: 54px; } }

.cookie-note {
  position: fixed; left: 20px; bottom: 20px; z-index: 55; max-width: 380px; padding: 18px 20px; border-radius: var(--r);
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), 0 0 0 1px var(--line);
  font-size: 14px; display: grid; gap: 12px;
}
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; color: var(--ink-2); }
.cookie-note__row { display: flex; justify-content: flex-end; }
/* On narrow screens the note sits above the quick contact button instead of covering it. */
@media (max-width: 560px) { .cookie-note { left: 16px; right: 16px; max-width: none; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); } }

/* search dialog */
.search-dialog { width: min(100% - 32px, 760px); max-height: min(80vh, 680px); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .6); }
.search-dialog::backdrop { background: rgba(3, 11, 16, .55); backdrop-filter: blur(6px); }
.search-dialog form { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.search-dialog input { flex: 1; border: 0; background: none; color: var(--ink); font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); outline: none; min-width: 0; }
.search-dialog .icon-lead { width: 24px; height: 24px; color: var(--muted); }
.search-results { padding: 8px; overflow: auto; max-height: calc(min(80vh, 680px) - 90px); }
.search-results a { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px; border-radius: var(--r-sm); align-items: baseline; }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface-2); }
.search-results .kind { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--water); }
.search-results .title { font-weight: 600; }
.search-results .snippet { grid-column: 2; font-size: 14px; color: var(--muted); }
.search-results .empty { padding: 24px 14px; color: var(--muted); }

/* ---------- Services index ---------- */
/* Group index under the title: four anchors that also say how much sits behind each. */
.svc-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: clamp(36px, 4.5vw, 64px); border-top: 1px solid var(--line-strong); }
.svc-index__item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.35rem; letter-spacing: -0.015em; transition: color .3s var(--ease); }
.svc-index__item span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.svc-index__item small { grid-column: 2; font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 0; }
.svc-index__item:hover, .svc-index__item:focus-visible { color: var(--water); }

/* Each group: a photo column beside the list, alternating sides. The photo follows the hovered or focused service
   (site.js), so previews never cover the text. On touch screens the photo sits on top and rows carry their own thumbnails. */
.svc-group { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--line); }
.svc-group__grid { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 960px) {
  .svc-group__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .svc-group--flip .svc-group__grid { grid-template-columns: 7fr 5fr; }
  .svc-group--flip .svc-group__figure { order: 2; }
  .svc-group__figure { position: sticky; top: calc(var(--header-h) + 24px); }
}
.svc-group__figure { margin: 0; display: grid; gap: 12px; }
.svc-group__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
@media (min-width: 960px) { .svc-group__frame { aspect-ratio: 4 / 5; } }
.svc-group__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-group__layer { opacity: 0; transition: opacity .6s var(--ease); }
.svc-group__layer.is-active { opacity: 1; }
.svc-group__figure figcaption { font-size: 13px; color: var(--muted); }
.svc-group__body .h-xl { margin-top: 18px; }
.svc-group__tagline { margin: 14px 0 clamp(24px, 3vw, 40px); max-width: 40ch; color: var(--ink-2); font-size: 1.05rem; }

.svc-list li { border-bottom: 1px solid var(--line); }
.svc-list li:first-child { border-top: 1px solid var(--line-strong); }
.svc-row { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: center; padding: 24px 0; }
.svc-row .num { align-self: start; padding-top: .55em; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .12em; }
.svc-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.08; letter-spacing: -0.025em; transition: color .3s var(--ease), transform .5s var(--ease); }
.svc-row p { margin: 8px 0 0; color: var(--ink-2); max-width: 52ch; font-size: 15px; }
.svc-row .go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .4s, color .4s, transform .5s var(--ease); }
.svc-row .go .icon { width: 18px; height: 18px; }
.svc-row__thumb { display: none; }
.svc-row:hover h3, .svc-row:focus-visible h3, .svc-row.is-current h3 { color: var(--water); transform: translateX(6px); }
.svc-row:hover .go, .svc-row:focus-visible .go, .svc-row.is-current .go { background: var(--ink); color: var(--bg); transform: rotate(-45deg); }
.svc-row:focus-visible { outline-offset: 6px; }
@media (max-width: 959px) {
  .svc-row { grid-template-columns: 1fr auto; }
  .svc-row .num { display: none; }
  .svc-row__thumb { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-sm); }
  .svc-row:has(.svc-row__thumb) .go { display: none; }
}

.svc-cta { display: grid; gap: 28px; align-items: end; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 960px) { .svc-cta { grid-template-columns: 1.4fr 1fr; } .svc-cta > :last-child { justify-content: flex-end; } }
.svc-cta .h-md { max-width: 34ch; }
.svc-cta .h-md em { font-style: italic; color: var(--water); }

/* ---------- Service detail ---------- */
.svc-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.svc-hero__grid { display: grid; gap: 28px 64px; align-items: end; }
@media (min-width: 1000px) { .svc-hero__grid { grid-template-columns: 1.1fr 1fr; } }
.svc-hero__title .h-xl { margin-top: 20px; max-width: 14ch; }
.svc-hero__intro { display: grid; gap: 28px; justify-items: start; }
.svc-hero__intro .lead { max-width: 46ch; margin: 0; }
.svc-hero__cover { position: relative; margin-top: clamp(36px, 4.5vw, 64px); aspect-ratio: 21 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
@media (max-width: 759px) { .svc-hero__cover { aspect-ratio: 4 / 3; } }
.svc-hero__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Typographic hero for services without a photo of the firm's own work: the scope at a glance on a stone panel. */
.svc-glance { margin-top: clamp(36px, 4.5vw, 64px); padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-lg); background: var(--surface-2); }
.svc-glance ol { counter-reset: glance; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 32px; margin-top: 18px; }
.svc-glance li { counter-increment: glance; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-strong);
  font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -0.015em; line-height: 1.2; }
.svc-glance li::before { content: counter(glance, decimal-leading-zero); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--water);  grid-row: span 2; }
.svc-glance li small { grid-column: 2; font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.svc-hero--space.svc-hero--type .svc-glance { background: linear-gradient(160deg, #EFE5D8, #E6DCCD); }
[data-theme="dark"] .svc-hero--space.svc-hero--type .svc-glance { background: var(--surface-2); }

.svc-body { display: grid; gap: clamp(64px, 8vw, 120px); min-width: 0; }

/* build: numbered stages joined by a thin line */
.svc-stages { position: relative; display: grid; }
.svc-stages li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 0 0 clamp(24px, 3vw, 36px); }
.svc-stages li::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 1px; background: var(--line-strong); }
.svc-stages li:last-child::before { display: none; }
.svc-stages__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--water); color: var(--water); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.svc-stages h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.2; padding-top: 6px; }
.svc-stages p { margin: 8px 0 0; color: var(--ink-2); max-width: 58ch; }

/* space: two-column feature list */
.svc-features { display: grid; gap: 0 clamp(24px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.svc-features li { padding: 22px 0; border-top: 1px solid var(--line-strong); }
.svc-features h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.2; }
.svc-features p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }

/* technical notes / usage facts */
.spec-sheet { margin: 0; display: grid; border-top: 1px solid var(--line-strong); }
.spec-sheet > div { display: grid; gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .spec-sheet > div { grid-template-columns: 240px 1fr; } }
.spec-sheet dt { font-weight: 700; }
.spec-sheet dd { margin: 0; color: var(--ink-2); }

.svc-note { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.svc-note > .icon { width: 28px; height: 28px; color: var(--water); }
.svc-note h3 { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -0.015em; }
.svc-note p { margin: 8px 0 14px; color: var(--ink-2); max-width: 56ch; }


.layout-aside { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 1100px) { .layout-aside { grid-template-columns: 1fr 320px; align-items: start; } }
.sticky-card { position: sticky; top: calc(var(--header-h) + 24px); border-radius: var(--r-lg); background: var(--surface); padding: 28px; box-shadow: 0 0 0 1px var(--line), var(--glow); display: grid; gap: 16px; }
.sticky-card h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.sticky-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.sticky-card .btn { width: 100%; }
.sticky-card__related { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.sticky-card__related ul { display: grid; gap: 4px; margin-top: 10px; }
.sticky-card__related a { font-size: 15px; }

.scope-grid { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); box-shadow: 0 0 0 1px var(--line); }
.scope-item { background: var(--bg); padding: clamp(24px, 3vw, 36px); display: grid; gap: 10px; align-content: start; min-height: 200px; transition: background-color .4s; }
.scope-item:hover { background: var(--surface); }
.scope-item .n { font-size: 13px; font-weight: 700; color: var(--water); letter-spacing: .1em; }
.scope-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.15; }
.scope-item p { margin: 0; color: var(--ink-2); font-size: 15px; }

.standards { display: grid; gap: 0; }
.standards li { display: grid; gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .standards li { grid-template-columns: 260px 1fr; } }
.standards li:first-child { border-top: 1px solid var(--line); }
.standards strong { font-weight: 700; }
.standards span { color: var(--ink-2); }

.prose { max-width: 68ch; }
.prose p { color: var(--ink-2); }
.prose p:first-child { font-size: 1.15em; color: var(--ink); }

.next-link { display: grid; gap: 16px; padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--line-strong); }
.next-link .h-xl { transition: color .4s, transform .8s var(--ease); }
.next-link:hover .h-xl { color: var(--water); transform: translateX(16px); font-style: italic; }

/* ---------- Project detail ---------- */
.project-hero { padding-bottom: clamp(28px, 3.5vw, 48px); }
.project-hero__grid { display: grid; gap: 32px 64px; align-items: end; }
@media (min-width: 1000px) { .project-hero__grid { grid-template-columns: 1.3fr 1fr; } }
.project-hero .lead { max-width: 44ch; }
.project-cover { position: relative; display: block; aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
@media (max-width: 759px) { .project-cover { aspect-ratio: 4 / 3; } }
.project-cover .visual { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.project-cover:hover .visual { transform: scale(1.02); }
.project-cover__zoom { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); font-size: 14px; font-weight: 600; }
.project-cover__zoom .icon { width: 16px; height: 16px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line-strong); }
.facts div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 6px 0 0; font-family: var(--serif); font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }
.gallery { display: grid; gap: 28px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gallery figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.gallery figure:first-child:not(:only-child) { grid-column: 1 / -1; }
.gallery a { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); }
.gallery figure:first-child:not(:only-child) a { aspect-ratio: 16 / 9; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.03); }
.gallery figcaption { font-size: 14px; color: var(--muted); }
.notice { display: flex; gap: 14px; padding: 18px 22px; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); font-size: 15px; }
.notice .icon { flex: none; width: 22px; height: 22px; color: var(--water); }

/* ---------- Catalog ---------- */
/* The PDF is presented as a physical book: cover, page block and spine are separate planes in one 3D context.
   The cover swings open on its spine; nothing else moves. Reduced motion gets a flat, front-facing cover. */
.catalog { display: grid; gap: clamp(32px, 5vw, 88px); align-items: center; }
@media (min-width: 1000px) { .catalog { grid-template-columns: minmax(360px, .95fr) 1fr; } }
.catalog__copy { display: grid; gap: 22px; justify-items: start; }
.catalog__copy .h-xl { max-width: 16ch; }
.catalog__copy .lead { margin: 0; max-width: 44ch; }
.catalog__note { margin: 0; max-width: 52ch; font-size: 15px; }
.catalog__meta { display: flex; gap: 32px; margin: 4px 0 0; }
.catalog__meta dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.catalog__meta dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.25rem; }
.catalog__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 479px) { .catalog__actions { display: grid; width: 100%; } }

/* The catalog as a printed book on a soft pedestal of light. Cover, page block, page edge and spine are separate
   planes in one 3D context; the cover swings open on its spine. The book floats gently (wrapper, translate only),
   its shadow breathes with it, a fine-pointer tilt follows the cursor (--tx/--ty from catalog.js) and a gloss of
   light crosses the laminated cover on hover. Reduced motion: a flat, front-facing cover with a still shadow. */
.book-stage { position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, 64px) 0 clamp(48px, 5vw, 80px); perspective: 2000px; isolation: isolate; }
.book-stage__halo { position: absolute; z-index: -1; left: 50%; top: 46%; width: min(92%, 560px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--aqua-2) 45%, transparent) 46%, transparent 100%); }
.book-stage__halo::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--water-2) 22%, transparent); }
.book-float { display: block; }
.book {
  --t: 16px; --w: min(66vw, 420px); --tx: 0deg; --ty: 0deg;
  position: relative; display: block; width: var(--w); aspect-ratio: 800 / 1131; color: var(--ink);
  transform-style: preserve-3d; transform: rotateY(calc(-22deg + var(--ty))) rotateX(calc(6deg + var(--tx)));
  transition: transform 1.2s var(--ease);
}
.book.is-tilting { transition: transform .35s var(--ease-out, ease-out); }
@media (max-width: 759px) { .book { --w: min(64vw, 320px); --t: 11px; } }
.book > span { position: absolute; display: block; }
/* Inner page (seen when the cover opens) and the stack of pages behind it. */
.book__page { inset: 1% 1.4% 1% 0; transform: translateZ(calc(var(--t) / 2 - 1px)); background: #FDFCF9; overflow: hidden; border-radius: 0 4px 4px 0;
  box-shadow: inset 14px 0 22px -14px rgba(0, 0, 0, .32), inset -1px 0 0 rgba(0, 0, 0, .06); }
.book__page img { width: 100%; height: 100%; object-fit: cover; }
.book__edge { top: 1%; bottom: 1%; left: calc(98.6% - var(--t) / 2); width: var(--t); transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #FBF9F4 0 1px, #E4DED2 1px 1.6px, #F6F2EA 1.6px 2.4px); box-shadow: inset 0 0 6px rgba(0, 0, 0, .08); }
.book__cover { inset: 0; transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(calc(var(--t) / 2)); transition: transform 1.5s var(--ease); }
.book__front, .book__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 6px 6px 3px; overflow: hidden; }
.book__front { background: var(--surface-2);
  box-shadow: inset 5px 0 0 rgba(0, 0, 0, .10), inset 7px 0 6px -2px rgba(255, 255, 255, .35), inset -1px 0 0 rgba(255, 255, 255, .5), 0 0 0 .5px rgba(0, 0, 0, .08); }
.book__front img { width: 100%; height: 100%; object-fit: cover; }
/* Spine fold, a faint edge vignette and a satin finish: printed card stock, not a flat picture. */
.book__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(255, 255, 255, .28) 2%, rgba(255, 255, 255, 0) 6%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .07)),
              radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .10), transparent 60%); }
.book__gloss { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.book__gloss::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 45%, rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) skewX(-12deg); transition: transform 1.4s var(--ease); }
.book:hover .book__gloss::after, .book:focus-visible .book__gloss::after { transform: translateX(380%) skewX(-12deg); }
.book__back { transform: rotateY(180deg); background: linear-gradient(90deg, #EDE7DC, #F6F2EA 40%, #EFE9DF); }
.book__spine { top: 0; bottom: 0; left: calc(var(--t) / -2); width: var(--t); transform: rotateY(-90deg);
  background: linear-gradient(90deg, #0A4766, #1A7DAE 45%, #2C93C4 55%, #0A4766); }
.book__title { position: absolute; inset: 12% 10% auto; display: grid; gap: 18px; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
.book__title .brand-mark { width: 44px; height: 44px; }
/* Two shadows: a tight contact shadow and a wide, soft ambient one, both breathing with the float. */
.book-shadow { position: absolute; left: 50%; bottom: clamp(22px, 2.6vw, 40px); width: calc(var(--w, 420px) * 1.02); max-width: 78%; height: 34px; translate: -44% 0;
  border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 40, 52, .34), rgba(8, 40, 52, .12) 55%, rgba(8, 40, 52, 0)); }
.book-shadow::before { content: ""; position: absolute; inset: -60% -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 60, 72, .14), transparent); }
.book:focus-visible { outline: none; }
.book:focus-visible .book__front { outline: 2px solid var(--water-2); outline-offset: 5px; }

.book.is-open .book__cover { transform: translateZ(calc(var(--t) / 2)) rotateY(-26deg); }
@media (hover: hover) {
  .book:hover .book__cover { transform: translateZ(calc(var(--t) / 2)) rotateY(-44deg); }
}
.book:focus-visible .book__cover { transform: translateZ(calc(var(--t) / 2)) rotateY(-44deg); }

@media (prefers-reduced-motion: no-preference) {
  .js .book-float { animation: book-float 7s ease-in-out infinite; }
  .js .book-shadow { animation: book-shadow 7s ease-in-out infinite; }
}
@keyframes book-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes book-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.88); opacity: .72; } }
[data-theme="dark"] .book-stage__halo { background: radial-gradient(closest-side, rgba(95, 225, 217, .14) 0%, rgba(95, 225, 217, .05) 50%, transparent 100%); }
[data-theme="dark"] .book-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }

@media (prefers-reduced-motion: reduce) {
  .book, .book:hover { transform: none; }
  .book .book__cover, .book.is-open .book__cover, .book:hover .book__cover, .book:focus-visible .book__cover { transform: none; }
  .book__edge, .book__spine, .book__page { display: none !important; }
  .book__front { box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
}

.doc-card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.doc-card .doc-icon { width: 64px; height: 80px; border-radius: 8px; display: grid; place-items: center; background: var(--water); color: var(--bg); }
.doc-card .doc-icon .icon { width: 28px; height: 28px; }
.doc-card h3 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; }
.doc-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .doc-card { grid-template-columns: auto 1fr; } .doc-card .actions { grid-column: 1 / -1; } }
.product-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.product-card { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); transition: transform .5s var(--ease), box-shadow .5s; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow); }
.product-card .visual { aspect-ratio: 1; border-radius: var(--r); }
.empty-state { display: grid; justify-items: start; gap: 14px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); border: 1px dashed var(--line-strong); color: var(--ink-2); }
.empty-state .icon { width: 36px; height: 36px; color: var(--water); }
.empty-state h3 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 28px 24px; }
@media (min-width: 720px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; position: relative; }
.field label, .field .label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field .optional { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 18px; outline: none;
  transition: border-color .3s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 28px; }
.field select option { background: var(--surface); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--water); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--water); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); pointer-events: none; }
.field:has(textarea)::after, .field:has(.choice)::after, .field:has(input[type="range"])::after, .field.no-line::after { display: none; }
.field:focus-within::after { transform: scaleX(1); }
.field-error, .field-validation-error { font-size: 13px; color: var(--danger); font-weight: 600; }
.field-validation-valid { display: none; }
.input-validation-error { border-bottom-color: var(--danger) !important; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--water-2); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); font-size: 15px; font-weight: 600; }
.form-status.is-visible { display: flex; }
.form-status.is-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.form-status.is-error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.form-status .icon { flex: none; width: 20px; height: 20px; }

.form-card { border-radius: var(--r-lg); background: var(--surface); padding: clamp(24px, 4vw, 56px); box-shadow: var(--card-shadow), var(--glow); }

/* choice cards (quote) */
.choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box { display: grid; gap: 10px; height: 100%; padding: 18px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .3s var(--ease), background-color .3s var(--ease), transform .4s var(--ease); }
.choice__box .icon { width: 28px; height: 28px; color: var(--water); }
.choice__box strong { font-weight: 700; line-height: 1.25; }
.choice__box small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.choice:hover .choice__box { box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:checked + .choice__box { box-shadow: inset 0 0 0 2px var(--water); background: color-mix(in srgb, var(--water) 8%, transparent); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--water-2); outline-offset: 2px; }
.choice__check { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); display: grid; place-items: center; }
.choice__check .icon { width: 14px; height: 14px; opacity: 0; color: #fff; }
.choice input:checked + .choice__box .choice__check { background: var(--water); box-shadow: none; }
.choice input:checked + .choice__box .choice__check .icon { opacity: 1; }
.choices--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.choices--compact .choice__box { padding: 14px 16px; }

/* quote wizard */
.wizard { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1100px) { .wizard { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.wizard-steps { display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
.wizard-steps li { flex: 1; min-width: 0; }
@media (max-width: 560px) { .wizard-steps { gap: 6px; } .wizard-steps button { gap: 4px; font-size: 11px; } .wizard-steps button span { font-size: 15px; } }
.wizard-steps button { width: 100%; display: grid; gap: 8px; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 12px; border-top: 2px solid var(--line); transition: color .3s, border-color .3s; }
.wizard-steps button span { font-family: var(--serif); text-transform: none; letter-spacing: -0.01em; font-weight: 400; font-size: 18px; color: inherit; }
.wizard-steps li.is-active button, .wizard-steps li.is-done button { color: var(--ink); border-color: var(--water); }
.wizard-step { display: grid; gap: 32px; border: 0; margin: 0 0 56px; padding: 0; min-width: 0; }
.wizard-step legend { padding: 0; margin-bottom: 8px; font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
.wizard-step legend em { font-style: italic; color: var(--water); }
.is-wizard .wizard-step { display: none; margin-bottom: 0; }
.is-wizard .wizard-step.is-active { display: grid; animation: step-in .7s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(20px); } }
.wizard-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.no-js-only { }
.is-wizard .no-js-only { display: none; }
.js-only { display: none; }
.is-wizard .js-only { display: initial; }
.is-wizard .wizard-steps.js-only { display: flex; }
.range-field { display: grid; gap: 6px; }
.range-field .head { display: flex; justify-content: space-between; align-items: baseline; }
.range-field output { font-family: var(--serif); font-size: 1.6rem; letter-spacing: -0.02em; color: var(--ink); }
.range-field .range { color: var(--water); }

.preview-panel { position: sticky; top: calc(var(--header-h) + 24px); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: var(--ink); background: linear-gradient(160deg, #E8F1F1, #D2E4E6); box-shadow: 0 0 0 1px var(--line); }
[data-theme="dark"] .preview-panel { background: var(--surface-2); }
.preview-panel .caustics { opacity: .2; }
.preview-panel__inner { position: relative; z-index: 2; display: grid; gap: 22px; padding: 28px; }
.preview-panel svg.pool-plan { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.preview-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.preview-panel dt { color: var(--muted); }
.preview-panel dd { margin: 0; font-weight: 600; text-align: right; }
.preview-panel__water { position: absolute; inset: 0; z-index: 1; transform: scaleY(0); transform-origin: bottom; background: linear-gradient(180deg, rgba(127, 227, 218, .5), rgba(18, 122, 138, .28) 70%); transition: transform 1.6s var(--ease-in-out); }
.preview-panel.is-filled .preview-panel__water { transform: scaleY(1); }
.success-panel { display: grid; gap: 20px; justify-items: start; padding: clamp(24px, 4vw, 48px) 0; }
.success-panel .h-lg em { color: var(--water); }

/* contact */
.contact-grid { display: grid; gap: clamp(48px, 6vw, 96px); }
@media (min-width: 992px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-lines { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.contact-line { display: grid; grid-template-columns: 7.5rem 1fr; align-items: baseline; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-line > span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 420px) { .contact-line { grid-template-columns: 1fr; } }
.contact-lines a.big { font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.2; width: fit-content; overflow-wrap: anywhere; }
.contact-lines a.big:hover { color: var(--water); font-style: italic; }
.contact-meta { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 48px; }
.contact-meta h3 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-family: var(--sans); margin-bottom: 10px; }
.contact-meta address { font-style: normal; color: var(--ink-2); }
.map-box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; text-align: center; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-theme="dark"] .map-box iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); }
.map-box__cta { display: grid; gap: 14px; justify-items: center; padding: 24px; max-width: 40ch; color: var(--ink-2); font-size: 14px; }

/* legal */
.legal h2 { font-family: var(--serif); font-size: 1.7rem; margin: 2em 0 .6em; letter-spacing: -0.02em; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }

/* 404 */
.notfound { min-height: 100svh; display: grid; align-items: center; padding-top: var(--header-h); }
.notfound svg { width: min(100%, 520px); }

/* ---------- Motion helpers ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.reveal-mask { overflow: hidden; }
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .7s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Staggered groups (home cards, before/after): each item rises and settles in turn, its photo easing from a slight
   zoom. Animations use the separate translate / scale properties, so the cards' own hover and expand transitions
   (transform, box-shadow, flex) keep working untouched. */
.motion [data-reveal-stagger]:not(.is-in) .reveal-item { opacity: 0; translate: 0 34px; }
.motion [data-reveal-stagger].is-in .reveal-item { animation: reveal-rise .75s var(--ease) both; animation-delay: calc(var(--ri, 0) * 70ms); }
.motion [data-reveal-stagger].is-in .reveal-item :is(.world__media, .p-tile__media) { animation: reveal-settle 1s var(--ease) both; animation-delay: calc(var(--ri, 0) * 70ms); }
@keyframes reveal-rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-settle { from { scale: 1.08; } to { scale: 1; } }
/* Phones: shorter travel, quicker cascade. */
@media (max-width: 699px) {
  .motion [data-reveal-stagger]:not(.is-in) .reveal-item { translate: 0 22px; }
  .motion [data-reveal-stagger].is-in .reveal-item { animation-duration: .9s; animation-delay: calc(var(--ri, 0) * 80ms); }
}
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal-stagger]:not(.is-in) .reveal-item { opacity: 1; translate: none; }
  .motion [data-reveal-stagger].is-in .reveal-item, .motion [data-reveal-stagger].is-in .reveal-item :is(.world__media, .p-tile__media) { animation: none; }
}
/* SplitText line masks: room below the baseline so Turkish descenders (ş, ç, ğ) and italics are not clipped. */
[class$="-line-mask"] { padding-bottom: .14em; margin-bottom: -.14em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* View transitions between pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-out both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.studio-hero__ph { position: relative; aspect-ratio: 5 / 6; max-height: 72vh; border-radius: var(--r-lg); overflow: hidden; }

/* ---------- Developer: water mask tool ---------- */
.wm { display: grid; gap: 24px; }
.wm__controls { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; }
.wm__custom { display: flex; gap: 12px; align-items: end; }
.wm__stage { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface-2); cursor: crosshair; }
.wm__stage img { width: 100%; height: auto; }
.wm__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm__stage polygon { fill: rgba(127, 227, 218, .32); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.wm textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* ---------- Brand logo ---------- */
/* The official logo file (559 × 176, transparent). Height drives the size so the 3.2:1 artwork is never distorted. */
.brand-logo { display: block; height: 46px; width: auto; max-width: none; }
@media (max-width: 559px) { .brand-logo { height: 38px; } }
.footer-brand .brand-logo { height: 52px; }
.menu-overlay .brand-logo { height: 42px; }
.book__title .brand-logo { height: 40px; }

/* ==========================================================================
   Refinements — one light, one water tone, three intensities:
   hero (most), cards (on hover / open), buttons and headings (smallest).
   ========================================================================== */

/* Shared sheen: a soft diagonal band of light that glides once across a photo on hover or focus. */
.world__media::after, .p-tile__media::after, .svc-group__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 48%, rgba(210, 248, 243, .10) 52%, transparent 70%);
  background-size: 250% 100%; background-position: 130% 0; opacity: 0;
  transition: background-position 1.4s var(--ease), opacity .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .world:hover .world__media::after, .p-tile:hover .p-tile__media::after, .p-tile:focus-visible .p-tile__media::after,
  .svc-group__figure:hover .svc-group__frame::after { opacity: 1; background-position: -30% 0; }
}

/* Home service cards: open card gets a thin water line under the title and a calmer shade. */
.world__title { position: relative; }
.world__title::after { content: ""; display: block; width: 0; height: 1px; margin-top: 12px; background: linear-gradient(90deg, var(--caustic), rgba(127, 227, 218, 0)); transition: width .9s var(--ease) .15s; }
.world.is-open .world__title::after { width: 72px; }
.world__num { transition: opacity .5s var(--ease), letter-spacing .7s var(--ease); }
.world.is-open .world__num { letter-spacing: .08em; }

/* Project tiles: the photograph leads — lighter lift and shadow, the shade only where the text sits. */
.p-tile:hover, .p-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(6, 26, 34, .05), 0 26px 50px -36px rgba(6, 26, 34, .55); }
.p-tile:hover .p-tile__media img, .p-tile:focus-visible .p-tile__media img { transform: scale(1.03); }
.p-tile__meta { display: inline-flex; align-items: center; gap: 8px; }
.p-tile__meta::before { content: ""; width: 18px; height: 1px; background: var(--caustic); opacity: .9; transition: width .6s var(--ease); }
.p-tile:hover .p-tile__meta::before, .p-tile:focus-visible .p-tile__meta::before { width: 30px; }
.p-tile--lead .p-tile__info { padding: 26px 28px; }

/* Services page: each row washes in with a faint water tint from the left; number and arrow follow. */
.svc-row::before {
  content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: var(--r);
  background: linear-gradient(90deg, color-mix(in srgb, var(--water-2) 8%, transparent), transparent 75%);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.svc-row { isolation: isolate; }
.svc-row:hover::before, .svc-row:focus-visible::before, .svc-row.is-current::before { transform: none; }
.svc-row .num { transition: color .4s var(--ease); }
.svc-row:hover .num, .svc-row:focus-visible .num, .svc-row.is-current .num { color: var(--water); }
.svc-group__frame img { transition: transform 1.6s var(--ease), opacity .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .svc-group__figure:hover .svc-group__frame img { transform: scale(1.025); } }
.svc-group__figure figcaption { display: flex; align-items: center; gap: 10px; }
.svc-group__figure figcaption::before { content: ""; width: 22px; height: 1px; background: var(--water-2); opacity: .7; }

/* Buttons: the fill keeps its rise; arrows nudge, glass buttons catch a little light. */
.btn--glass:hover, .btn--glass:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 10px 30px -18px rgba(127, 227, 218, .6); }
.btn:active { transform: translateY(1px); }
.arrow-link, .link-line { transition: color .35s var(--ease); }
.arrow-link:hover { color: var(--water); }


/* Touch screens: nothing depends on hover. */
@media (hover: none) {
  .p-tile:hover, .p-tile:focus-visible { transform: none; }
  .svc-row::before { display: none; }
}

/* ==========================================================================
   Card frames — one system for every card on the site.
   At rest: a visible frame in the water tone (photo cards also carry a thin inner passe-partout line).
   On hover / keyboard focus: the frame brightens and a soft turquoise halo spreads around the card.
   ========================================================================== */
:root {
  --frame: color-mix(in srgb, var(--water-2) 26%, transparent);
  --frame-strong: color-mix(in srgb, var(--water-2) 62%, transparent);
  --halo: 0 0 0 4px color-mix(in srgb, var(--caustic) 18%, transparent), 0 0 42px -8px color-mix(in srgb, var(--caustic) 55%, transparent),
          0 30px 60px -28px color-mix(in srgb, var(--water) 55%, transparent);
  --rest-shadow: 0 1px 2px rgba(6, 26, 34, .05), 0 16px 36px -30px color-mix(in srgb, var(--water) 60%, transparent);
}
[data-theme="dark"] {
  --frame: color-mix(in srgb, var(--caustic) 22%, transparent);
  --frame-strong: color-mix(in srgb, var(--caustic) 60%, transparent);
  --halo: 0 0 0 4px color-mix(in srgb, var(--caustic) 12%, transparent), 0 0 46px -8px color-mix(in srgb, var(--caustic) 32%, transparent),
          0 30px 64px -28px rgba(0, 0, 0, .7);
  --rest-shadow: 0 18px 40px -30px rgba(0, 0, 0, .7);
}

/* Cards carry no outline at rest — only a soft, water-tinted shadow. On hover / keyboard focus a diffuse turquoise
   glow spreads around them (no crisp border lines). */
.world, .p-tile { box-shadow: var(--rest-shadow); transition: transform .6s var(--ease), box-shadow .5s var(--ease), min-height var(--dur, .8s) var(--ease), flex-grow var(--dur, .8s) var(--ease); }
.p-tile::before, .world::before { content: none; }
.world:hover, .world:focus-within, .p-tile:hover, .p-tile:focus-visible { box-shadow: var(--halo); }
.world.is-open { box-shadow: var(--rest-shadow); }
.world.is-open:hover { box-shadow: var(--halo); }
.p-tile:focus-visible, .world:has(.world__link:focus-visible) { outline: none; }

.doc-card, .product-card, .sticky-card, .contact-band, .form-card {
  position: relative; box-shadow: var(--rest-shadow);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.doc-card:hover, .doc-card:focus-within, .product-card:hover, .product-card:focus-within, .contact-band:hover, .sticky-card:hover { box-shadow: var(--halo); }
.product-card:hover { transform: translateY(-4px); }

.scope-item { position: relative; transition: background-color .4s var(--ease), box-shadow .5s var(--ease); }
.scope-item:hover { z-index: 1; background: var(--surface); box-shadow: var(--halo); }


/* Touch screens: no hover halo (it would stick after a tap); keyboard focus still shows it. */
@media (hover: none) {
  .world:hover, .p-tile:hover, .doc-card:hover, .product-card:hover, .contact-band:hover, .scope-item:hover, .sticky-card:hover { box-shadow: var(--rest-shadow); }
  .world.is-open { box-shadow: var(--rest-shadow); }
  .product-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .product-card:hover, .p-tile:hover { transform: none; } }

/* Scrolling away from the hero (--hero-p: 0 → 1, set by home.js): the photo moves at a slower pace and the copy
   lifts and fades — a soft hand-over to the services section. translate/opacity only. */
/* The photo layer reaches 60px above the frame, so the slower drift never uncovers its top edge. */
.hero__media { top: -60px; translate: 0 calc(var(--hero-p, 0) * 60px); }
.hero__content, .hero__aside { opacity: calc(1 - var(--hero-p, 0) * 1.4); translate: 0 calc(var(--hero-p, 0) * -48px); }
@media (max-width: 699px) { .hero__media { translate: 0 calc(var(--hero-p, 0) * 36px); } }
@media (prefers-reduced-motion: reduce) { .hero__media, .hero__content, .hero__aside { translate: none; opacity: 1; } }

/* ==========================================================================
   Design polish — small refinements on top of the existing layouts (remove this block to undo them).
   ========================================================================== */

/* Section labels: the number sits in a small water-tinted pill. */
.eyebrow b { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--caustic) 26%, transparent); color: var(--water); font-size: 11px; letter-spacing: .06em; }

/* Home service cards: same layout, a deep-water tint in the shade and a small arrow by the open card's title. */
.world::after { background: linear-gradient(to top, rgba(3, 34, 44, .74) 0%, rgba(3, 34, 44, .34) 36%, rgba(3, 34, 44, 0) 62%); }
.world:not(.is-open)::after { background: linear-gradient(to top, rgba(3, 34, 44, .66), rgba(3, 34, 44, .2)); }
.world__link { display: inline-flex; align-items: center; gap: 12px; }
.world__link::after {
  content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%; opacity: 0; translate: -8px 0;
  background: var(--caustic) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: opacity .5s var(--ease) .2s, translate .6s var(--ease) .2s;
}
.world.is-open .world__link::after { opacity: 1; translate: 0 0; }
.world.is-open:hover .world__link::after { translate: 4px 0; transition-delay: 0s; }

/* Project tiles: a round arrow appears in the corner on hover (always shown on touch screens). */
.p-tile.p-tile::before {
  content: ""; position: absolute; z-index: 3; top: 14px; right: 14px; left: auto; bottom: auto; inset: 14px 14px auto auto; width: 38px; height: 38px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  opacity: 0; scale: .8; transition: opacity .4s var(--ease), scale .5s var(--ease), background-color .3s var(--ease);
}
.p-tile:hover::before, .p-tile:focus-visible::before { opacity: 1; scale: 1; background-color: rgba(127, 227, 218, .35); }
@media (hover: none) { .p-tile.p-tile::before { opacity: 1; scale: 1; } }

/* About page — founders: soft cards with a monogram. */
.founders { gap: 18px; }
.founders li { position: relative; padding: 26px 26px 26px 98px; border-top: 0; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: var(--rest-shadow); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.founders li:hover { box-shadow: var(--halo); }
.founders__mono { position: absolute; left: 24px; top: 26px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.3rem; letter-spacing: .02em; color: #fff;
  background: linear-gradient(140deg, var(--water-2), var(--water) 60%, #083F4A); box-shadow: 0 10px 24px -14px var(--water); }

/* About page — references: each row lights up softly on hover. */
.ref-list a { position: relative; padding-inline: 14px; border-radius: var(--r); transition: color .3s var(--ease), background-color .4s var(--ease); }
.ref-list a:hover, .ref-list a:focus-visible { background: color-mix(in srgb, var(--caustic) 14%, transparent); }
.ref-list__city { display: inline-flex; align-items: center; width: fit-content; height: 24px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--water-2) 9%, transparent); color: var(--water); font-size: 11px; }

/* Contact page — lines: label pill, a soft wash on hover. */
.contact-line { padding-inline: 12px; border-radius: var(--r-sm); transition: background-color .4s var(--ease); }
.contact-line:hover { background: color-mix(in srgb, var(--caustic) 12%, transparent); }

/* Footer: a faint water tint rising from the bottom of the page. */
.site-footer { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--caustic) 10%, transparent)); }

/* ==========================================================================
   Premium aqua — one daylight system for every page (2026-10-25).
   Inner pages open on a pale water band that ends in the same layered wave as the home photograph; cards are white
   with a hairline frame; the footer settles into a soft aqua tint. Remove this block to return to the previous look.
   ========================================================================== */
:root {
  --rest-shadow: 0 1px 2px rgba(8, 48, 60, .04), 0 18px 40px -30px rgba(8, 48, 60, .30);
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V62C1370 70 1270 89 1110 94C900 100 760 69 540 54C330 40 170 52 0 74Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 44C220 70 420 82 640 66C860 50 1000 26 1200 36C1320 42 1400 54 1440 60V120H0Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] { --rest-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -30px rgba(0, 0, 0, .7); }

/* Hero: the push-in pauses with the slideshow. */

/* ---------- Inner page heads ---------- */
.page-hero { --ph-wave: clamp(40px, 5.5vw, 88px); isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(40px, 5.5vw, 88px)); padding-bottom: calc(clamp(36px, 4.5vw, 64px) + var(--ph-wave)); margin-bottom: clamp(12px, 2vw, 28px); }
/* The water band is its own layer, cut along a slow wave at the foot (mask: wave below, plain block above), so the
   page shows through under the curve without a seam. A second, translucent wave peeks out just beneath it. */
.page-hero::before, .page-hero::after { content: ""; position: absolute; pointer-events: none; left: 0; right: 0; }
.page-hero::after { inset: 0; z-index: -1;
  background:
    radial-gradient(55% 90% at 88% -10%, color-mix(in srgb, var(--caustic) 16%, transparent), transparent 70%),
    radial-gradient(40% 60% at 6% 0%, color-mix(in srgb, #9FD8F0 10%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--wash) 88%, transparent) 0%, color-mix(in srgb, var(--wash) 50%, transparent) 100%);
  -webkit-mask: var(--wave-a) bottom / 100% var(--ph-wave) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--ph-wave) + 1px) no-repeat;
  mask: var(--wave-a) bottom / 100% var(--ph-wave) no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - var(--ph-wave) + 1px) no-repeat; }
.page-hero::before { bottom: -8px; height: var(--ph-wave); z-index: -2; background: var(--wash-2);
  -webkit-mask: var(--wave-b) bottom / 100% 100% no-repeat; mask: var(--wave-b) bottom / 100% 100% no-repeat; }
[data-theme="dark"] .page-hero::after { background:
    radial-gradient(55% 90% at 88% -10%, rgba(95, 225, 217, .14), transparent 70%),
    linear-gradient(180deg, var(--aqua-1) 0%, color-mix(in srgb, var(--aqua-1) 50%, var(--bg)) 100%); }
.page-hero .display em, .page-hero .h-xl em { color: var(--water); }
.page-hero .lead { color: var(--ink-2); }
.breadcrumbs { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: 0 0 0 1px var(--line); }
.breadcrumbs a { transition: color .3s var(--ease); }
.breadcrumbs a:hover { color: var(--water); }
/* Pages whose head carries a large picture (about, catalog, project) keep it clear of the wave. */
.studio-hero .studio-hero__figure img, .studio-hero__ph { box-shadow: var(--rest-shadow); }

/* ---------- Cards: white, hairline frame, soft lift ---------- */
.doc-card, .product-card, .sticky-card, .contact-band, .form-card, .svc-note, .svc-cta, .founders li {
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--rest-shadow); }
.doc-card:hover, .doc-card:focus-within, .product-card:hover, .product-card:focus-within, .contact-band:hover, .sticky-card:hover, .founders li:hover {
  box-shadow: 0 0 0 1px var(--frame), var(--halo); }
.scope-grid { border-radius: 24px; box-shadow: 0 0 0 1px var(--line), var(--rest-shadow); }
.scope-item { background: var(--surface); }
.scope-item:hover { background: var(--surface); }
.scope-item .n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--aqua-1); color: var(--water); letter-spacing: .04em; }
.svc-group__frame, .project-cover, .svc-hero__cover, .ba__stage, .map-box, .gallery a { box-shadow: var(--rest-shadow); }
.contact-band { border-radius: 24px; }
.contact-band::before { width: 5px; background: linear-gradient(var(--caustic), var(--water-2)); }
.form-card { border-radius: 24px; }
.preview-panel { background: linear-gradient(160deg, var(--aqua-1), var(--aqua-2)); box-shadow: 0 0 0 1px var(--line), var(--rest-shadow); }
[data-theme="dark"] .preview-panel { background: var(--surface-2); }
.empty-state { background: color-mix(in srgb, var(--surface) 60%, transparent); border-color: var(--frame); border-radius: 24px; }
.chip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--water); color: var(--water); }
.chip.is-active { background: var(--water); color: #fff; box-shadow: 0 10px 22px -14px var(--water); }

/* ---------- Services page: groups alternate between the page and a pale water band ---------- */
.svc-group--flip { background: linear-gradient(to bottom, transparent, var(--wash) 10%, var(--wash) 90%, transparent); border-top-color: transparent; }
.svc-group--flip + .svc-group { border-top-color: transparent; }
.svc-index { border-top: 0; gap: 10px; }
.svc-index__item { padding: 16px 18px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 0 0 1px var(--line);
  transition: color .3s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease); }
.svc-index__item:hover, .svc-index__item:focus-visible { box-shadow: 0 0 0 1px var(--frame), var(--halo); transform: translateY(-3px); }
.svc-row .go { background: var(--surface); }

/* ---------- Project detail and catalog: facts as a light panel ---------- */
.facts { border-top: 0; border-radius: 20px; background: color-mix(in srgb, var(--surface) 75%, transparent); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.facts div { padding: 16px 18px; border-bottom: 0; border-right: 1px solid var(--line); }
.catalog__meta dd { color: var(--ink); }

/* ---------- Contact ---------- */
.contact-lines { border-top: 0; border-radius: 22px; padding: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--rest-shadow); }
.contact-line { border-bottom-color: var(--line); }
.contact-line:last-child { border-bottom: 0; }

/* ---------- Footer: the page settles into a pale water tint ---------- */
.site-footer { background: linear-gradient(to bottom, transparent 0, var(--wash) 220px, var(--wash) 100%); }
.footer-main { border-top-color: color-mix(in srgb, var(--water-2) 18%, transparent); }
.footer-col a { transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--water); }
.socials a { background: var(--surface); }

/* ---------- Overlay menu (phones, tablets) ---------- */
.menu-overlay { background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--caustic) 26%, transparent), transparent 70%),
    linear-gradient(170deg, var(--bg) 30%, var(--wash)); }
.menu-links a:hover, .menu-links a:focus-visible { color: var(--water); }

/* ==========================================================================
   Daylight background — "sea glass" (2026-10-25). Night mode is untouched: every rule here is scoped to the light
   theme, and the new layers are hidden at night.
   A pearl page with soft pools of sea-glass colour (mint, warm sand, a little periwinkle) that drift very slowly; over
   it, a faint pool-tile grid that only shows where the light falls, and thin rings spreading out from two points, like
   drops landing on still water. Everything moves with transform / opacity only, so it costs the browser almost nothing.
   ========================================================================== */
:root:not([data-theme="dark"]) .atmos__blob--a { background: radial-gradient(circle, rgba(183, 226, 208, .42), rgba(183, 226, 208, 0) 64%); }
:root:not([data-theme="dark"]) .atmos__blob--b { background: radial-gradient(circle, rgba(204, 214, 242, .38), rgba(204, 214, 242, 0) 64%); }
:root:not([data-theme="dark"]) .atmos__blob--c { background: radial-gradient(circle, rgba(242, 222, 196, .50), rgba(242, 222, 196, 0) 62%); }
:root:not([data-theme="dark"]) .atmos__rays, :root:not([data-theme="dark"]) .atmos__waves { display: none; }

/* Pool tiles: a 56px grid of hairlines, faded out everywhere except two soft pools of light. Static. */
.atmos__tiles { position: absolute; inset: 0; display: block;
  background-image: linear-gradient(rgba(23, 92, 104, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 92, 104, .07) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(38% 46% at 84% 16%, #000, transparent 72%), radial-gradient(34% 40% at 12% 86%, #000, transparent 72%);
  mask-image: radial-gradient(38% 46% at 84% 16%, #000, transparent 72%), radial-gradient(34% 40% at 12% 86%, #000, transparent 72%); }

/* Ripples: four rings per drop, each growing from a point and fading as it widens; staggered so one is always on its way. */
.atmos__drop { position: absolute; left: var(--x); top: var(--y); display: block; width: 0; height: 0; }
.atmos__drop--a { --x: 84%; --y: 16%; }
.atmos__drop--b { --x: 12%; --y: 86%; --ring: 52vmax; }
.atmos__drop i { position: absolute; left: 0; top: 0; width: var(--ring, 64vmax); height: var(--ring, 64vmax); margin: calc(var(--ring, 64vmax) / -2) 0 0 calc(var(--ring, 64vmax) / -2);
  border-radius: 50%; border: 1px solid rgba(31, 140, 148, .34); opacity: 0; transform: scale(.06); }
.atmos__drop i:nth-child(2) { border-color: rgba(120, 150, 210, .30); }
.atmos__drop i:nth-child(4) { border-color: rgba(196, 160, 112, .30); }
@media (prefers-reduced-motion: no-preference) {
  .js .atmos__drop i { animation: drop-ring 18s cubic-bezier(.25, .6, .35, 1) infinite; will-change: transform, opacity; }
  .js .atmos__drop i:nth-child(2) { animation-delay: -4.5s; }
  .js .atmos__drop i:nth-child(3) { animation-delay: -9s; }
  .js .atmos__drop i:nth-child(4) { animation-delay: -13.5s; }
  .js .atmos__drop--b i { animation-duration: 22s; }
  .js .atmos__drop--b i:nth-child(1) { animation-delay: -2s; }
  .js .atmos__drop--b i:nth-child(2) { animation-delay: -7.5s; }
  .js .atmos__drop--b i:nth-child(3) { animation-delay: -13s; }
  .js .atmos__drop--b i:nth-child(4) { animation-delay: -18.5s; }
}
@media (prefers-reduced-motion: reduce) { .atmos__drop i:nth-child(1) { opacity: .5; transform: scale(.35); } .atmos__drop i:nth-child(2) { opacity: .3; transform: scale(.65); } }
@keyframes drop-ring {
  0% { opacity: 0; transform: scale(.06); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
[data-theme="dark"] .atmos__tiles, [data-theme="dark"] .atmos__drop { display: none; }
@media (max-width: 699px) { .atmos__drop--b i:nth-child(n+3), .atmos__drop--a i:nth-child(4) { display: none; } }

/* Light theme: the menu overlay and project-section band follow the paler wash. */
:root:not([data-theme="dark"]) .menu-overlay { background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--caustic) 12%, transparent), transparent 70%),
    linear-gradient(170deg, var(--bg) 30%, var(--wash)); }

/* ---------- Before / after: a sliding divider ---------- */
/* Left: a rail of example cards, each with a split thumbnail of its own pair (before | after, cut on a slant), the
   active one lifted with a turquoise edge. Right: the pair at a measured size, "before" left of the line, "after" right
   of it; the round knob on the line is the handle, but the whole photo can be dragged sideways. */
.ba { display: grid; gap: 22px; align-items: start; }
@media (min-width: 960px) { .ba { grid-template-columns: minmax(270px, 4fr) 8fr; gap: clamp(24px, 3vw, 48px); } .ba--single { grid-template-columns: 1fr; } }
.ba__rail { display: grid; gap: 14px; align-content: start; }
.ba__rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.ba__rail-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ba__count { font-family: var(--serif); font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ba__count b { font-weight: 400; font-size: 1.5rem; color: var(--water); }
.ba__list { display: grid; gap: 10px; counter-reset: none; }
@media (max-width: 959px) {
  .ba__list { grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; scrollbar-width: none; }
  .ba__list::-webkit-scrollbar { display: none; }
  .ba__list li { scroll-snap-align: start; }
}
.ba__pick { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; width: 100%; padding: 8px 14px 8px 8px; text-align: left;
  border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--rest-shadow);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.ba__pick:hover { transform: translateX(3px); box-shadow: 0 0 0 1px var(--frame), var(--rest-shadow); }
.ba__pick[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--water-2), 0 18px 34px -24px color-mix(in srgb, var(--water) 60%, transparent); }
.ba__pick[aria-pressed="true"]::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--water-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--water-2) 18%, transparent); }
.ba__thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--aqua-2)); }
.ba__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__thumb-before { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); filter: saturate(.75); }
.ba__thumb-after { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.ba__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 49.2%, rgba(255, 255, 255, .95) 49.6% 50.4%, transparent 50.8%); }
.ba__pick-text { display: grid; gap: 2px; min-width: 0; padding-right: 18px; }
.ba__pick-num { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--water); }
.ba__pick-text strong { font-weight: 600; font-size: 15px; line-height: 1.3; }
.ba__pick-text small { font-size: 13px; color: var(--muted); }
.ba__pick-flag { justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ba__hint { display: flex; align-items: center; gap: 12px; margin: 4px 4px 0; font-size: 13px; color: var(--muted); }
.ba__hint-icon { position: relative; flex: none; width: 34px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ba__hint-icon i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--water-2); }
@media (prefers-reduced-motion: no-preference) { .ba__hint-icon i { animation: hint-dot 2.4s var(--ease-in-out) infinite; } }
@keyframes hint-dot { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }

.ba__viewer { min-width: 0; }
.ba__item { margin: 0; display: grid; gap: 14px; }
.ba__stage { --pos: 50%; position: relative; aspect-ratio: 16 / 10; max-height: 480px; width: 100%; border-radius: 22px; overflow: hidden; background: var(--surface-2);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; box-shadow: var(--rest-shadow); }
@media (max-width: 699px) { .ba__stage { aspect-ratio: 4 / 3.4; } }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); pointer-events: none; -webkit-user-drag: none; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; pointer-events: none; }
.ba__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 .5px rgba(10, 36, 48, .2), 0 0 18px rgba(127, 227, 218, .75); }
.ba__knob { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: rgba(255, 255, 255, .96); color: var(--water); box-shadow: 0 10px 28px -10px rgba(8, 48, 60, .55), 0 0 0 6px rgba(255, 255, 255, .28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ba__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ba__stage:hover .ba__knob, .ba__stage.is-dragging .ba__knob { transform: scale(1.08); box-shadow: 0 12px 30px -10px rgba(8, 48, 60, .6), 0 0 0 9px rgba(127, 227, 218, .3); }
.ba__stage.is-dragging { cursor: grabbing; }
.ba__tag { position: absolute; top: 14px; z-index: 2; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .9); color: var(--abyss-2); transition: opacity .3s var(--ease); }
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; background: var(--water); color: #fff; }
.ba__range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ba__stage:has(.ba__range:focus-visible) { outline: 2px solid var(--water-2); outline-offset: 4px; }
.ba__caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 0 4px; }
.ba__caption strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.ba__caption p { margin: 4px 0 0; color: var(--muted); font-size: 15px; max-width: 56ch; }
.ba__links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; font-weight: 600; }
.ba .media-ph { outline-offset: -14px; }
.ba__layer--after .media-ph { background: repeating-linear-gradient(135deg, #DCEBEC 0 14px, #CFE3E5 14px 28px); place-content: center end; padding-right: clamp(24px, 8%, 80px); }
.ba__layer--before .media-ph { place-content: center start; padding-left: clamp(24px, 8%, 80px); }
[data-theme="dark"] .ba__knob { background: var(--surface); }
[data-theme="dark"] .ba__thumb::after { background: linear-gradient(112deg, transparent 49.2%, rgba(234, 244, 245, .8) 49.6% 50.4%, transparent 50.8%); }
@media (hover: none) { .ba__pick:hover { transform: none; } }