/* ============================================================
   MERKAMA — Wellness Center, Addis Ababa
   Design system: "water at depth" quiet luxury
   Palette: Deep Blue #304a6e · Soft Neutral #efe9dd (brand guideline, March 2026)
   Type: Felix Titling · Bahnschrift · Segoe UI
   ============================================================ */

/* Brand-manual fonts, embedded from licensed client files (woff2 = same file, web-compressed) */
@font-face {
  font-family: "Bahnschrift";
  src: url("../assets/fonts/bahnschrift.woff2") format("woff2"),
       url("../assets/fonts/bahnschrift.ttf") format("truetype");
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Felix Titling";
  src: url("../assets/fonts/felix-titling.woff2") format("woff2"),
       url("../assets/fonts/felix-titling.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* brand hues + permitted shades/tints */
  --deep:      #304a6e;
  --deep-2:    #263c5a;
  --deep-3:    #1c2e46;
  --abyss:     #142234;
  --tint-1:    #5a719b;
  --tint-2:    #93a3bf;
  --tint-3:    #c6cfde;
  --cream:     #efe9dd;
  --cream-hi:  #f6f2e9;
  --cream-lo:  #e4dbc9;
  --ink:       #2b415f;               /* body text on cream */
  --line:      rgba(48, 74, 110, .16);
  --line-strong: rgba(48, 74, 110, .34);
  --line-cream: rgba(239, 233, 221, .18);

  /* brand-manual fonts first, with quiet system fallbacks */
  --font-display: "Felix Titling", "Times New Roman", serif;
  --font-body: "Bahnschrift", "Segoe UI", sans-serif;
  --glass: rgba(13, 23, 36, .58);            /* very dark brand blue, for glass */
  --glass-border: rgba(239, 233, 221, .16);

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-float: 0 30px 70px rgba(20, 34, 52, .38);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--deep); color: var(--cream); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  color: var(--deep);
  letter-spacing: .015em;
}

.display-xl { font-size: clamp(2.5rem, 6.5vw, 5.25rem); }
.display-lg { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.display-md { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.display-sm { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: .04em; }

.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.7; }

.measure { max-width: 34em; }

/* on deep blue */
.on-deep { color: var(--cream); }
.on-deep h1, .on-deep h2, .on-deep h3, .on-deep .display { color: var(--cream); }
.on-deep ::selection { background: var(--cream); color: var(--deep); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding: 1.1em 2.4em 1em;
  border: 1px solid var(--deep);
  border-radius: 999px;
  color: var(--deep);
  background: transparent;
  cursor: pointer;
  transition: background .45s var(--ease-out), color .45s var(--ease-out), letter-spacing .45s var(--ease-out);
}
.btn:hover { background: var(--deep); color: var(--cream); letter-spacing: .38em; }

.btn-solid { background: var(--deep); color: var(--cream); }
.btn-solid:hover { background: var(--deep-2); }

.on-deep .btn, .btn-cream { border-color: rgba(239,233,221,.55); color: var(--cream); }
.on-deep .btn:hover, .btn-cream:hover { background: var(--cream); color: var(--deep); }
.on-deep .btn-solid { background: var(--cream); color: var(--deep); border-color: var(--cream); }
.on-deep .btn-solid:hover { background: var(--cream-hi); color: var(--deep); }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.35rem;
  transition: padding .5s var(--ease-out);
}

.brand { display: flex; align-items: center; gap: .85rem; }
.brand img { width: auto; }
.brand .mark-dark, .brand .mark-light { height: 32px; }
.brand .word-dark, .brand .word-light { height: 13px; transform: translateY(1px); }
.brand .mark-light, .brand .word-light { display: none; }

.site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.site-nav a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-block: .4rem;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-cta { font-size: .68rem; padding: .95em 1.9em .85em; }

/* dark hero variant: cream header assets until scrolled */
.hero-dark .site-header:not(.scrolled) .site-nav a { color: var(--cream); }
.hero-dark .site-header:not(.scrolled) .header-cta { border-color: rgba(239,233,221,.55); color: var(--cream); }
.hero-dark .site-header:not(.scrolled) .header-cta:hover { background: var(--cream); color: var(--deep); }
.hero-dark .site-header:not(.scrolled) .brand .mark-dark,
.hero-dark .site-header:not(.scrolled) .brand .word-dark { display: none; }
.hero-dark .site-header:not(.scrolled) .brand .mark-light,
.hero-dark .site-header:not(.scrolled) .brand .word-light { display: block; }
.hero-dark .site-header:not(.scrolled) .nav-toggle span { background: var(--cream); }

.site-header.scrolled {
  background: rgba(246, 242, 233, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.scrolled .header-inner { padding-block: .85rem; }

/* mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  z-index: 80;
}
.nav-toggle span {
  width: 30px; height: 1px;
  background: var(--deep);
  transition: transform .45s var(--ease-out), opacity .3s;
}

/* mobile overlay nav */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: linear-gradient(160deg, var(--deep-2), var(--abyss));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility 0s .5s;
}
.nav-overlay.open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out); }
.nav-overlay a {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vh, 2.6rem);
  color: var(--cream);
  letter-spacing: .08em;
  padding-block: .55rem;
  border-bottom: 1px solid var(--line-cream);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.nav-overlay.open a { opacity: 1; transform: none; }
.nav-overlay a:nth-child(1) { transition-delay: .08s; }
.nav-overlay a:nth-child(2) { transition-delay: .13s; }
.nav-overlay a:nth-child(3) { transition-delay: .18s; }
.nav-overlay a:nth-child(4) { transition-delay: .23s; }
.nav-overlay a:nth-child(5) { transition-delay: .28s; }
.nav-overlay a:nth-child(6) { transition-delay: .33s; }
.nav-overlay a:nth-child(7) { transition-delay: .38s; }

body.nav-open { overflow: hidden; }
body.nav-open .site-header {
  z-index: 80;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.nav-open .brand .mark-dark, body.nav-open .brand .word-dark { display: none; }
body.nav-open .brand .mark-light, body.nav-open .brand .word-light { display: block; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--cream); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--cream); }

/* ---------- home hero: photography + floating glass (reference approach) ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(168deg, var(--deep) 0%, var(--deep-2) 46%, var(--abyss) 100%);
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero::after {
  /* neutral black shade: legibility left, photograph breathing right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .52) 38%, rgba(0, 0, 0, .2) 72%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 45%);
}
.hero::before {
  /* slow drifting light, like the surface seen from below */
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 2;
  background:
    radial-gradient(42% 34% at 62% 22%, rgba(198,207,222,.14), transparent 70%),
    radial-gradient(36% 30% at 30% 60%, rgba(90,113,155,.18), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.08); }
}
.hero-mark {
  position: absolute;
  right: clamp(-90px, -4vw, -20px);
  top: 12%;
  z-index: 2;
  width: clamp(300px, 38vw, 560px);
  opacity: .06;
  pointer-events: none;
  animation: floaty 14s ease-in-out infinite alternate;
}
@keyframes floaty {
  from { transform: translateY(-12px); }
  to   { transform: translateY(16px); }
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(5.8rem, 10vh, 7rem) clamp(2.4rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  align-items: end;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 980px) { .hero-content { grid-template-columns: 1fr; } }

.hero-head { grid-column: 1 / -1; display: grid; gap: 1.4rem; }
.hero-main { display: grid; gap: 2.2rem; justify-items: start; align-self: end; }
.hero h1 { max-width: none; }
@media (min-width: 980px) { .hero h1 .line { white-space: nowrap; } }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; transform: translateY(110%); animation: rise 1.3s var(--ease-out) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .14s; }
@keyframes rise { to { transform: none; } }

.hero-statement { max-width: 30em; font-size: 1.02rem; color: var(--tint-3); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* floating glass collage — dark brand glass, cream text, staggered like the reference */
.hero-cards { display: grid; gap: .9rem; }
.hero-cards .glass-card { position: relative; z-index: 1; padding: clamp(1.4rem, 2vw, 1.9rem); gap: .85rem; box-shadow: var(--shadow-float); }
.hero-cards .glass-card p { color: var(--cream); font-size: .98rem; }
@media (min-width: 980px) {
  .hero-card-a { width: 90%; margin-left: auto; }
  .hero-card-c { width: 68%; margin-right: auto; margin-top: -.1rem; }
  .hero-card-b { width: 86%; margin-left: auto; }
}

/* icon chip header — the reference's card-header device */
.chip { display: flex; align-items: center; gap: .75rem; }
.chip-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(239, 233, 221, .1);
  border: 1px solid rgba(239, 233, 221, .3);
  display: grid;
  place-items: center;
  flex: none;
}
.chip-icon img { width: 13px; height: auto; }
.chip-label {
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tint-3);
}

/* compact chip-card variant */
.hero-cards .hero-card-c { flex-direction: row; align-items: center; padding: .95rem 1.4rem; min-height: 0; }
.hero-cards .hero-card-c p { font-size: .95rem; margin: 0; }

/* pills — the reference's tag chips */
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .6em 1.2em .5em;
  border-radius: 999px;
  color: var(--cream);
  background: rgba(239, 233, 221, .14);
  border: 1px solid rgba(239, 233, 221, .3);
  white-space: nowrap;
}

/* backgroundless decorative cutouts, layered above/below elements like the reference */
.has-float { position: relative; overflow: hidden; }
.spa-intro-float { overflow: visible; }
.spa-intro-float .wrap { position: relative; z-index: 1; }
.float-img {
  position: absolute;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .35));
}
.float-img.below { z-index: 0; }
.float-img.above { z-index: 4; }
@media (max-width: 860px) { .float-img { display: none; } }

.scroll-cue {
  position: absolute;
  bottom: 0; right: var(--gutter);
  display: none;
  font-size: .62rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--tint-2);
  writing-mode: vertical-rl;
  padding-bottom: 6.5rem;
}
@media (min-width: 1100px) { .scroll-cue { display: block; } }
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 5rem;
  background: linear-gradient(var(--tint-2), transparent);
  animation: cue 2.6s ease-in-out infinite;
}
@keyframes cue { 50% { transform: scaleY(.55); transform-origin: top; } }

/* ---------- page hero (inner pages, cream) ---------- */

.page-hero { padding: clamp(9rem, 20vh, 13rem) 0 clamp(3rem, 7vh, 5rem); position: relative; }
.page-hero h1 { margin-bottom: 1.6rem; }
.page-hero .lede { max-width: 36em; color: var(--ink); }

/* ---------- sections ---------- */

.section { padding-block: clamp(5.5rem, 12vh, 9.5rem); }
.section-tight { padding-block: clamp(3.5rem, 8vh, 6rem); }

.section-head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.8rem, 6vh, 4.5rem); }
.section-head .kicker { margin-bottom: .4rem; }

/* two-column editorial split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.split > .sticky-col { position: sticky; top: 7.5rem; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split > .sticky-col { position: static; }
}

.contact-rail {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.4rem);
  border-radius: 22px;
  color: var(--cream);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(90,113,155,.34), transparent 62%),
    linear-gradient(145deg, var(--deep), var(--deep-3));
  box-shadow: 0 18px 40px rgba(20,34,52,.12);
}
.contact-rail::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -42px;
  top: -44px;
  border: 1px solid rgba(239,233,221,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(239,233,221,.04), 0 0 0 32px rgba(239,233,221,.035);
}
.contact-rail-title {
  position: relative;
  z-index: 1;
  max-width: 8em;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: .98;
  color: var(--cream);
}
.contact-rail-intro {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  max-width: 22em;
  color: rgba(239,233,221,.72);
}
.contact-list {
  position: relative;
  z-index: 1;
  margin-top: 2.2rem;
}
.contact-list > div {
  padding: 1rem 0;
  border-top: 1px solid rgba(239,233,221,.2);
}
.contact-list dt {
  color: var(--amber);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.contact-list dd {
  margin-top: .42rem;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.55;
}
.contact-list a { color: inherit; text-decoration: none; transition: color .25s ease; }
.contact-list a:hover { color: var(--amber); }

/* deep band */
.band-deep {
  background:
    radial-gradient(100% 130% at 85% 0%, rgba(90,113,155,.35) 0%, transparent 55%),
    linear-gradient(160deg, var(--deep) 10%, var(--deep-3) 100%);
  position: relative;
  overflow: hidden;
}
.band-deep .band-mark {
  position: absolute;
  left: -6%;
  bottom: -18%;
  width: clamp(280px, 30vw, 480px);
  opacity: .05;
  pointer-events: none;
}
.band-deep > .wrap { position: relative; z-index: 2; }

/* photo band: photograph under a brand duotone — glass actually blurs imagery */
.band-photo .band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .58) 55%, rgba(0, 0, 0, .8) 100%);
}

/* media figure: rounded photography with a glass caption chip */
.media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.ratio-32 { aspect-ratio: 3 / 2; }
.media.ratio-45 { aspect-ratio: 4 / 5; }
.media.ratio-169 { aspect-ratio: 16 / 9; }
.media-tag {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  padding: .65em 1.3em .55em;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.media-label {
  position: absolute;
  inset: auto .9rem .9rem .9rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .95rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--cream);
}
.media-label .name { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .08em; }
.media-label .tag { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--tint-3); }
@media (max-width: 720px) {
  .media-label { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* glass cards — single, deliberate echo of the reference design */
.glass-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
@media (max-width: 920px) { .glass-row { grid-template-columns: 1fr; max-width: 34rem; } }
.glass-card {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 100%;
  color: var(--cream);
  transition: background .6s var(--ease-out), transform .6s var(--ease-out);
}
.glass-card:hover { background: rgba(13, 23, 36, .7); transform: translateY(-4px); }
.glass-card h3 { font-size: 1.28rem; letter-spacing: .05em; }
.glass-card p { font-size: .96rem; color: var(--tint-3); }
.glass-card .card-link {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
  display: inline-flex;
  gap: .8rem;
  align-items: center;
}
.glass-card .card-link::after { content: "→"; font-family: serif; transition: transform .4s var(--ease-out); }
.glass-card:hover .card-link::after { transform: translateX(6px); }

/* philosophy values */
.phil-list { display: grid; gap: clamp(3rem, 8vh, 5.5rem); }
.phil-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding-top: clamp(2.2rem, 5vh, 3.4rem);
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .phil-item { grid-template-columns: 1fr; }
}
.phil-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.phil-body { max-width: 30em; }

/* pattern divider — droplet lattice from the brand pattern page */
.pattern-band {
  height: 40px;
  background-color: rgba(48, 74, 110, .055);
  -webkit-mask-image: url("../assets/mark-blue.svg");
  mask-image: url("../assets/mark-blue.svg");
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
  margin-block: clamp(1rem, 4vh, 3rem);
}
.band-deep .pattern-band, .pattern-band.on-deep-band { background-color: rgba(239, 233, 221, .05); margin: 0; }

/* imagery placeholders — photography pending from client */
.ph-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(90,113,155,.5), transparent 60%),
    radial-gradient(120% 120% at 90% 100%, rgba(20,34,52,.75), transparent 65%),
    linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 60%, var(--deep-3) 100%);
}
.ph-tile:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.ph-tile.tone-cream {
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(110% 120% at 85% 100%, rgba(200,186,155,.5), transparent 60%),
    linear-gradient(150deg, var(--cream-hi), var(--cream-lo));
}
.ph-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(239, 233, 221, .06);
  -webkit-mask-image: url("../assets/mark-blue.svg");
  mask-image: url("../assets/mark-blue.svg");
  -webkit-mask-size: 38px;
  mask-size: 38px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.ph-tile.tone-cream::before { background-color: rgba(48, 74, 110, .07); }
.ph-tile .ph-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: var(--cream);
  border-top: 1px solid var(--line-cream);
  background: linear-gradient(transparent, rgba(20, 34, 52, .35));
}
.ph-tile.tone-cream .ph-label { color: var(--deep); border-top-color: var(--line); background: linear-gradient(transparent, rgba(239,233,221,.4)); }
.ph-label .name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; }
.ph-label .tag { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tint-3); }
.ph-tile.tone-cream .ph-label .tag { color: var(--tint-1); }
@media (max-width: 720px) {
  .ph-tile .ph-label { flex-direction: column; align-items: flex-start; gap: .35rem; }
}
.ph-tile .ph-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 72px;
  transform: translate(-50%, -60%);
  opacity: .3;
}

.contact-map::before { display: none; }
.contact-map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-map .ph-label { z-index: 2; }
.contact-map .ph-label .tag { color: var(--tint-3); text-decoration: none; }
.contact-map .ph-label .tag:hover { color: var(--cream); }

/* ---------- access / membership ---------- */

.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 860px) { .access-grid { grid-template-columns: 1fr; } }
.access-note {
  border-left: 1px solid var(--line-strong);
  padding-left: 1.8rem;
  font-size: .98rem;
}
.access-note strong { font-weight: 500; color: var(--deep); }

.pending-flag {
  display: inline-block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--deep);
  border: 1px solid var(--line-strong);
  padding: .5em 1.1em .4em;
  margin-top: 1.2rem;
}

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band .display-lg { max-width: 16em; margin-inline: auto; }
.cta-band p { max-width: 34em; margin: 1.6rem auto 2.6rem; color: var(--tint-3); }

/* ---------- forms ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 3rem; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: .55rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--deep);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--deep);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: .55rem 0;
  border-radius: 0;
  outline: none;
  transition: border-color .4s;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--deep); }
.field input::placeholder, .field textarea::placeholder { color: var(--tint-1); }
.on-deep .field input::placeholder, .on-deep .field textarea::placeholder { color: var(--tint-3); }

.on-deep .field label { color: var(--cream-lo); }
.on-deep .field input, .on-deep .field select, .on-deep .field textarea {
  color: var(--cream);
  border-bottom-color: rgba(239, 233, 221, .35);
}
.on-deep .field input:focus, .on-deep .field select:focus, .on-deep .field textarea:focus { border-bottom-color: var(--cream); }
.on-deep .field select option { color: var(--deep); background: var(--cream); }

.form-actions { grid-column: 1 / -1; padding-top: 1rem; display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.form-note { font-size: .8rem; letter-spacing: .04em; color: var(--deep); }
.on-deep .form-note { color: var(--cream-lo); }

.form-success {
  display: none;
  padding: 2.4rem 0 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: .04em;
}
form.sent .form-success { display: block; }
form.sent .form-grid, form.sent .newsletter-row { display: none; }

/* newsletter */
.newsletter-row { display: flex; gap: 1.5rem; align-items: flex-end; flex-wrap: wrap; }
.newsletter-row .field { flex: 1 1 260px; }

/* ---------- FAQ ---------- */

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.7rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--deep);
  letter-spacing: .02em;
  transition: color .3s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .q-mark {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--tint-1);
  transition: transform .45s var(--ease-out);
  flex: none;
}
.faq-list details[open] summary .q-mark { transform: rotate(45deg); }
.faq-list .answer { max-width: 44em; padding: 0 0 2rem; }

/* ---------- footer ---------- */

.site-footer {
  background: linear-gradient(175deg, var(--deep-2) 0%, var(--abyss) 90%);
  color: var(--tint-3);
  position: relative;
  overflow: hidden;
}
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(4rem, 9vh, 6.5rem) clamp(2.5rem, 6vh, 4rem);
}
@media (max-width: 860px) { .footer-main { grid-template-columns: 1fr; } }
.footer-logo { width: clamp(180px, 20vw, 250px); }
.footer-tagline { margin-top: 1.8rem; font-size: .95rem; max-width: 24em; }
.footer-col h4 {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tint-2);
  margin-bottom: 1.4rem;
}
.footer-col ul { list-style: none; display: grid; gap: .55rem; }
.footer-main > .footer-col:nth-child(2) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: .55rem; }
.footer-main > .footer-col:nth-child(2) li { break-inside: avoid; }
.footer-col a { font-size: .95rem; color: var(--tint-3); transition: color .3s; }
.footer-col a:hover { color: var(--cream); }
.footer-col .tbc { font-size: .95rem; color: var(--tint-3); }
.footer-legal {
  border-top: 1px solid var(--line-cream);
  padding-block: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--tint-3);
}

/* ---------- reveals ---------- */

/* hide-for-reveal only when scripting is available — content stays visible without JS */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  .reveal.in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; animation: none; }
}

/* ---------- responsive header ---------- */

@media (max-width: 1080px) {
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- gallery grid ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.gallery-grid .media { min-height: 300px; }
.gallery-grid .media > img { position: absolute; inset: 0; }
/* mirrored bento: 4+2 / 2+4 / full-bleed */
.gallery-grid .g-a { grid-column: span 4; min-height: 440px; }
.gallery-grid .g-b { grid-column: span 2; min-height: 440px; }
.gallery-grid .g-c { grid-column: span 2; }
.gallery-grid .g-d { grid-column: span 4; }
.gallery-grid .g-e { grid-column: span 6; min-height: 300px; }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid > * { grid-column: 1 / -1 !important; min-height: 300px; }
}

/* services page: treatment placeholders */
.menu-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  gap: 1rem;
  background: var(--cream-hi);
}
.menu-note h3 { font-size: 1.35rem; }

.service-block {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: clamp(2.2rem, 5vh, 3.5rem);
}
.service-block.flip .svc-media { order: -1; }
@media (max-width: 860px) {
  .service-block { grid-template-columns: 1fr; }
  .service-block.flip .svc-media { order: 0; }
}
.service-block .svc-text { display: grid; gap: 1.2rem; justify-items: start; }
.service-block h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.service-block .svc-body { max-width: 38em; }

/* ---------- deeper service storytelling ---------- */

.service-intro-copy {
  max-width: 40em;
  color: var(--ink-soft);
}
.service-intro-copy + .btn { margin-top: 2rem; }
.detail-list {
  list-style: none;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.detail-list li {
  display: grid;
  grid-template-columns: minmax(150px, .62fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.detail-list strong {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--deep);
}
.detail-list span { color: var(--ink-soft); }

.service-photo-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr .92fr;
  gap: clamp(.8rem, 2vw, 1.4rem);
  margin-top: clamp(2.2rem, 5vw, 4.5rem);
}
.service-photo-grid .editorial-image { aspect-ratio: 4 / 5; }
.service-photo-grid .editorial-image:nth-child(2) { margin-top: 3.5rem; }
.service-photo-grid .editorial-image:nth-child(3) { margin-top: 7rem; }
.service-photo-grid img { object-fit: cover; }

.service-standard {
  background: var(--cream-hi);
}
.service-standard .wrap { position: relative; }
.service-standard-grid {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1fr);
  gap: clamp(3rem, 10vw, 10rem);
}
.service-standard-heading h2 { max-width: 7em; }
.service-standard-heading p { margin-top: 1.6rem; color: var(--ink-soft); max-width: 24em; }
.service-standard-heading .btn { margin-top: 2rem; }
.service-standard-copy { border-top: 1px solid var(--line); }

.service-image-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: end;
}
.service-image-pair .editorial-image:first-child { aspect-ratio: 4 / 5; }
.service-image-pair .editorial-image:last-child { aspect-ratio: 3 / 4; margin-bottom: 4rem; }

/* Product concepts are intentionally drawn in CSS so the supplied wordmark
   remains sharp and accurate on every label. */
.product-concept-intro { max-width: 38em; color: var(--ink-soft); }
.product-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: 3rem;
}
.product-concept {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-hi);
}
.product-art {
  min-height: 330px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 16%, rgba(255,255,255,.11), transparent 35%), var(--deep-3);
}
.product-art::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 18%;
  left: 14%;
  bottom: 8%;
  border-radius: 50%;
  background: rgba(4,10,17,.45);
  filter: blur(16px);
}
.product-photo { position: relative; z-index: 1; display: block; width: min(82%, 250px); height: 285px; object-fit: contain; filter: drop-shadow(0 22px 18px rgba(4,10,17,.28)); }
.product-order { display: inline-flex; margin-top: 1.15rem; padding: .72em 1.05em .66em; font-size: .62rem; color: var(--deep); border-color: var(--deep); }
.product-order .btn-icon { width: 1.8em; height: 1.8em; margin-left: .65em; font-size: .9em; }
.product-concept--soak .product-art { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 28%), #8c806c; }
.product-concept--candle .product-art { background: radial-gradient(circle at 70% 18%, rgba(255,211,136,.14), transparent 25%), #202e42; }
.product-bottle, .product-jar, .product-candle { position: relative; z-index: 1; filter: drop-shadow(0 22px 18px rgba(4,10,17,.28)); }
.product-bottle { width: 132px; height: 206px; border-radius: 17px 17px 12px 12px; background: linear-gradient(90deg, #17263b, #395574 52%, #18283d); }
.product-bottle::before { content: ""; position: absolute; width: 47px; height: 36px; top: -31px; left: 42px; border-radius: 5px 5px 2px 2px; background: #c3a77b; box-shadow: inset 5px 0 rgba(255,255,255,.18); }
.product-jar { width: 190px; height: 130px; border-radius: 20px 20px 30px 30px; background: linear-gradient(90deg, #d3c6b3, #f0e7d8 50%, #c4b6a0); }
.product-jar::before { content: ""; position: absolute; width: 200px; height: 28px; left: -5px; top: -16px; border-radius: 8px; background: #19304a; }
.product-candle { width: 142px; height: 170px; border-radius: 22px 22px 28px 28px; background: linear-gradient(90deg, #17263b, #304a6e 52%, #18283d); }
.product-candle::before { content: ""; position: absolute; width: 2px; height: 15px; left: 70px; top: -14px; background: #151515; }
.product-candle::after { content: ""; position: absolute; width: 16px; height: 26px; left: 63px; top: -39px; border-radius: 50% 50% 48% 48%; background: #f4c778; box-shadow: 0 0 22px rgba(244,199,120,.8); }
.product-label {
  position: absolute;
  inset: 20% 10px 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .32rem;
  padding: 1.1rem .55rem;
  text-align: center;
  color: var(--cream);
  border: 1px solid rgba(239,233,221,.45);
  background: rgba(11,23,38,.62);
}
.product-label img { width: 27px; height: 27px; object-fit: contain; }
.product-label .product-wordmark { width: 86px; height: auto; }
.product-label b { margin-top: .3rem; font-size: .62rem; font-weight: 500; letter-spacing: .17em; }
.product-label small { font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.product-concept--soak .product-label { inset: 22% 9px 12px; gap: .14rem; padding: .55rem .25rem; color: var(--deep-3); border-color: rgba(48,74,110,.25); background: rgba(247,243,234,.76); }
.product-concept--soak .product-label img { width: 21px; height: 21px; filter: brightness(.4); }
.product-concept--soak .product-label .product-wordmark { width: 72px; }
.product-concept--soak .product-label b { margin-top: .1rem; font-size: .48rem; }
.product-concept--soak .product-label small { font-size: .4rem; }
.product-concept-copy { padding: 1.5rem 1.55rem 1.8rem; }
.product-concept-copy h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; }
.product-concept-copy p { margin-top: .55rem; color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
.concept-status { display: inline-block; margin-top: 1.2rem; color: var(--deep); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.product-principles { background: var(--deep-3); position: relative; overflow: hidden; }
.product-principles > .band-mark { position: absolute; left: -6%; bottom: -18%; width: clamp(280px, 30vw, 480px); opacity: .05; pointer-events: none; }
.product-principles > .wrap { position: relative; z-index: 1; }
.product-principles .detail-list { border-color: var(--line-cream); }
.product-principles .detail-list li { border-color: var(--line-cream); }
.product-principles .detail-list strong { color: var(--cream-lo); }
.product-principles .detail-list span { color: rgba(239,233,221,.72); }

@media (max-width: 860px) {
  .service-standard-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .service-photo-grid { grid-template-columns: 1fr 1fr; }
  .service-photo-grid .editorial-image:first-child { grid-row: span 2; }
  .service-photo-grid .editorial-image:nth-child(2), .service-photo-grid .editorial-image:nth-child(3) { margin-top: 0; }
  .product-concept-grid { grid-template-columns: 1fr; }
  .product-concept { min-height: 0; }
  .product-art { min-height: 280px; }
}
@media (max-width: 600px) {
  .detail-list li { grid-template-columns: 1fr; gap: .4rem; }
  .service-photo-grid { grid-template-columns: 1fr; }
  .service-photo-grid .editorial-image:first-child { grid-row: auto; }
  .service-image-pair { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .service-image-pair .editorial-image:last-child { margin-bottom: 2.2rem; }
}

/* ============================================================
   PHOTO-LED EDITORIAL REDESIGN — August 2026
   The page is built around the supplied reference: warm photography
   as the canvas, a small number of dark-blue glass plates, and generous
   cream space between scenes. The brand hues belong to the interface;
   photography keeps its natural warmth.
   ============================================================ */

:root {
  --deep: #304a6e;
  --deep-2: #263c5a;
  --deep-3: #1a2b42;
  --abyss: #101c2b;
  --cream: #efe9dd;
  --cream-hi: #f7f3ea;
  --cream-lo: #e3d8c7;
  --amber: #d29a57;
  --ink: #243a56;
  --ink-soft: #52637a;
  --line: rgba(48, 74, 110, .19);
  --line-cream: rgba(239, 233, 221, .22);
  --glass-deep: rgba(18, 31, 48, .82);
  --glass-deep-soft: rgba(22, 39, 61, .69);
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(.22, .8, .2, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --radius: 24px;
}

body { background: var(--cream); color: var(--ink); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

h1, h2, h3, .display { font-family: "Felix Titling", var(--font-display), serif; font-weight: 400; letter-spacing: .006em; }
h1 em, h2 em { font-style: normal; color: var(--cream-lo); }
p { max-width: 60ch; }
.wrap { max-width: var(--wrap); }
.section { padding-block: clamp(6.5rem, 13vw, 12rem); }
.section-tight { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* Header: transparent over the opening image, then grounded on scroll. */
.site-header { padding-top: 18px; background: transparent; box-shadow: none; }
.header-inner {
  min-height: 68px;
  padding: .75rem clamp(1rem, 2vw, 1.35rem) .75rem 1.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background .5s var(--ease-out), border-radius .5s var(--ease-out), box-shadow .5s var(--ease-out), padding .5s var(--ease-out);
}
.brand { gap: .65rem; }
.brand .mark-dark, .brand .mark-light { height: 28px; }
.brand .word-dark, .brand .word-light { height: 12px; }
.site-header:not(.scrolled) .brand .mark-dark, .site-header:not(.scrolled) .brand .word-dark { display: none !important; }
.site-header:not(.scrolled) .brand .mark-light, .site-header:not(.scrolled) .brand .word-light { display: block !important; }
.site-header.scrolled .brand .mark-light, .site-header.scrolled .brand .word-light { display: block !important; }
.site-header.scrolled .brand .mark-dark, .site-header.scrolled .brand .word-dark { display: none !important; }
.site-header:not(.scrolled) .nav-toggle span { background: var(--cream); }
.site-nav { gap: clamp(1rem, 2vw, 1.8rem); }
.site-nav a { color: var(--cream) !important; font-size: .64rem; letter-spacing: .19em; padding-block: .65rem; }
.site-nav a::after { background: var(--cream); opacity: .9; }
.header-cta { border-color: rgba(239,233,221,.48) !important; color: var(--cream) !important; font-size: .63rem; padding: .9em 1.2em .84em; }
.header-cta:hover { background: var(--cream) !important; color: var(--deep) !important; }
.btn-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(48,74,110,.13); font-size: .9rem; letter-spacing: 0; transition: transform .6s var(--ease-spring), background .6s var(--ease-spring); }
.btn:hover .btn-icon { transform: translate(3px,-2px); background: rgba(239,233,221,.24); }
.btn { min-height: 48px; padding: .72rem .75rem .72rem 1.35rem; letter-spacing: .18em; border-color: var(--deep); transition: transform .6s var(--ease-spring), background .6s var(--ease-spring), color .6s var(--ease-spring); }
.btn:hover { letter-spacing: .18em; transform: translateY(-2px); }
.btn-solid { display: inline-flex; gap: .75rem; }
.on-deep .btn-solid .btn-icon, .btn-solid .btn-icon { background: rgba(48,74,110,.2); }
.site-header.scrolled { padding-top: 0; background: transparent; box-shadow: none; }
.site-header.scrolled .header-inner { padding-block: .85rem .8rem; background: rgba(48,74,110,.97); border-radius: 0 0 24px 24px; box-shadow: 0 18px 50px rgba(4,10,17,.2), inset 0 -1px 0 rgba(239,233,221,.14); }
.site-header.scrolled .site-nav a, .site-header.scrolled .header-cta { color: var(--cream) !important; }
.site-header.scrolled .site-nav a::after { background: var(--cream); }
.site-header.scrolled .header-cta { border-color: rgba(239,233,221,.65) !important; }
.site-header.scrolled .header-cta .btn-icon { background: var(--cream); color: var(--deep); }
.site-header.scrolled .header-cta:hover { background: var(--cream) !important; color: var(--deep) !important; }
.site-header.scrolled .header-cta:hover .btn-icon { background: var(--deep); color: var(--cream); }
.site-header.scrolled .nav-toggle span { background: var(--cream); }
.nav-overlay { background: rgba(16,28,43,.98); }

/* Hero — the image does the emotional work, the UI floats over it. */
.home-hero { min-height: 100dvh; height: auto; isolation: isolate; overflow: hidden; background: var(--abyss); }
.home-hero::before, .home-hero::after { display: none; }
.home-hero .hero-photo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(1.08); transform-origin: center; will-change: transform; }
.home-hero .hero-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,10,17,.9) 0%, rgba(4,10,17,.7) 27%, rgba(4,10,17,.28) 55%, rgba(4,10,17,.34) 100%), linear-gradient(0deg, rgba(4,10,17,.82) 0%, rgba(4,10,17,.18) 48%, rgba(4,10,17,.12) 100%); }
.hero-person { position: absolute; width: auto; max-width: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 22px 22px rgba(4,10,17,.28)); }
.hero-person--gym { left: 42%; bottom: 17.5%; z-index: 10; height: 32%; transform: rotate(-4deg); }
.hero-person--spa { left: 56%; bottom: 5%; z-index: 10; height: 56%; }
.hero-person--coffee { right: 1%; bottom: 5%; z-index: 7; height: 27%; transform: rotate(3deg); }
.hero-leaf--grounded { position: absolute; right: 12vw; bottom: -12%; width: auto; height: 75vh; max-width: none; z-index: -1; pointer-events: none; filter: drop-shadow(0 18px 20px rgba(4,10,17,.35)); transform: rotate(13deg); transform-origin: right bottom; }
.hero-brand-plate { position: absolute; top: clamp(7rem, 15vh, 11rem); left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); width: clamp(180px, 18vw, 240px); padding: 1rem 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.hero-brand-plate img { width: 100%; height: auto; }
.hero-brand-plate span { display: block; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid rgba(239,233,221,.34); font-size: .55rem; letter-spacing: .12em; color: var(--cream); text-transform: uppercase; }
.home-hero .hero-content { position: relative; min-height: 100dvh; display: block; padding-top: clamp(10rem, 20vh, 15rem); padding-bottom: clamp(7rem, 12vh, 10rem); }
.hero-copy { position: relative; z-index: 8; max-width: 42rem; padding-top: 12rem; }
.home-hero h1 { max-width: 11em; font-size: clamp(2.35rem, 4.5vw, 4.8rem); line-height: .99; color: var(--cream); text-wrap: balance; }
.home-hero .hero-accent { color: var(--amber); }
.home-hero .hero-statement { margin-top: 2.1rem; max-width: 30rem; color: rgba(239,233,221,.82); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero-actions .btn-solid { background: var(--cream); color: var(--deep); border-color: var(--cream); }
.hero-actions .btn-solid:hover { background: var(--cream-hi); color: var(--deep); }
.text-link { display: inline-flex; gap: .8rem; align-items: center; color: var(--cream); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; }
.text-link span { font-size: 1rem; transition: transform .6s var(--ease-spring); }
.text-link:hover span { transform: translateY(4px); }
.glass-card { min-height: 0; display: block; gap: 0; }
.hero-card, .service-card { min-height: 0; display: block; }
.hero-card { position: absolute; padding: 1.35rem 1.45rem; color: var(--cream); background: var(--glass-deep); border: 1px solid rgba(239,233,221,.24); border-radius: 22px; box-shadow: 0 28px 80px rgba(4,10,17,.3), inset 0 1px 0 rgba(255,255,255,.13); backdrop-filter: blur(16px); }
.hero-card-copy--mobile { display: none; }
.hero-card:hover { background: rgba(18,31,48,.92); transform: translateY(-7px); }
.hero-card h2, .hero-card h3, .hero-card p { color: var(--cream); }
.hero-card h2 { font-family: var(--font-body); font-size: .92rem; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.hero-card p { margin-top: .55rem; color: rgba(239,233,221,.73); font-size: .9rem; line-height: 1.45; }
.hero-card-standard { top: 51%; right: 2%; z-index: 11; width: min(100%, 300px); display: flex; align-items: flex-start; gap: .85rem; }
.card-symbol { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(239,233,221,.3); border-radius: 50%; color: var(--cream-lo); }
.card-symbol svg { width: 18px; height: 18px; }
.hero-card-private { right: 42%; top: 80%; z-index: 9; width: min(100%, 250px); }
.hero-card-quiet { right: 2%; bottom: 10%; z-index: 11; width: min(100%, 280px); }
.card-link { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.2rem; color: var(--cream); font-size: .66rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.card-link span { font-size: 1rem; transition: transform .6s var(--ease-spring); }
.card-link:hover span { transform: translate(3px,-2px); }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 2.1rem; display: flex; justify-content: space-between; align-items: center; color: rgba(239,233,221,.65); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.home-hero .scroll-cue { position: static; display: inline-flex; gap: .7rem; align-items: center; color: var(--cream); font-size: .62rem; writing-mode: horizontal-tb; padding-bottom: 0; white-space: nowrap; }
.home-hero .scroll-cue::after { display: none; }
.home-hero .scroll-cue b { font-size: 1rem; font-weight: 300; }

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-photo { transform: none; will-change: auto; }
}

/* Interior sections. */
.intro-section { position: relative; overflow: hidden; background: var(--cream); }
.intro-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, .72fr); gap: clamp(3rem, 10vw, 10rem); align-items: center; }
.intro-copy { padding-left: clamp(0px, 4vw, 5rem); }
.intro-copy h2 { max-width: 8em; }
.intro-copy .lede { margin-top: 1.7rem; color: var(--deep); }
.intro-copy > p:not(.lede) { margin-top: 1.5rem; color: var(--ink-soft); }
.intro-copy .btn { margin-top: 2.2rem; }
.editorial-image { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: var(--deep-3); }
.editorial-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-spring); }
.editorial-image:hover img { transform: scale(1.035); }
.editorial-image figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .75rem .95rem; color: var(--cream); border: 1px solid rgba(239,233,221,.2); border-radius: 13px; background: rgba(16,28,43,.72); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; backdrop-filter: blur(12px); }
.intro-image { aspect-ratio: 4 / 5; max-height: 690px; }
.intro-image img { object-position: 60% center; }
.intro-cutout { position: absolute; z-index: 2; width: clamp(150px, 16vw, 230px); right: 37%; bottom: -7%; transform: rotate(7deg); pointer-events: none; }

.band-photo::before { background: rgba(4,10,17,.63); }
.service-section { position: relative; overflow: hidden; }
.service-section .band-bg { filter: saturate(.74) contrast(1.02); opacity: .54; }
.service-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.05fr); gap: clamp(3rem, 9vw, 10rem); align-items: start; }
.service-intro { position: sticky; top: 8rem; }
.service-intro h2 { max-width: 7em; }
.service-intro p { margin-top: 1.6rem; max-width: 20rem; color: rgba(239,233,221,.74); }
.service-stack { display: grid; gap: 1rem; }
.service-card { padding: clamp(1.4rem, 2.5vw, 2rem); color: var(--cream); background: var(--glass-deep-soft); border: 1px solid rgba(239,233,221,.22); border-radius: 22px; box-shadow: 0 28px 80px rgba(4,10,17,.2), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(15px); transition: transform .7s var(--ease-spring), background .7s var(--ease-spring); }
.service-card:hover { background: rgba(22,39,61,.88); transform: translateY(-5px); }
.service-card h3 { max-width: 13em; color: var(--cream); font-size: clamp(1.4rem, 2.4vw, 2rem); }
.service-card p { margin-top: .8rem; color: rgba(239,233,221,.73); line-height: 1.55; }
.service-card-large { min-height: 250px; padding-right: 24%; }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 2rem; color: var(--cream-lo); border: 1px solid rgba(239,233,221,.22); border-radius: 50%; }
.service-icon svg { width: 30px; height: 30px; }
.service-card-large .service-icon { float: right; margin: .1rem 0 1rem 2rem; }
.service-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.service-pair .service-card { min-height: 290px; }
.service-pair .service-icon { margin-bottom: 1.6rem; }

.philosophy-section { background: var(--cream-hi); }
.philosophy-grid { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(0, 1.1fr); gap: clamp(3rem, 10vw, 10rem); }
.philosophy-heading { position: relative; }
.philosophy-heading h2 { max-width: 6em; }
.philosophy-lotus { position: absolute; width: 180px; left: 28%; top: 40%; opacity: .72; transform: rotate(17deg); filter: saturate(.6); }
.philosophy-copy { border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: 2rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.principle h3 { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.principle p { color: var(--ink-soft); }

.movement-section { background: var(--deep-3); }
.movement-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, .8fr); gap: clamp(3rem, 10vw, 10rem); align-items: center; }
.movement-image { aspect-ratio: 4 / 5; max-height: 700px; }
.movement-image img { object-position: 30% center; }
.movement-copy h2 { max-width: 8em; }
.movement-copy .lede { margin-top: 1.8rem; color: var(--cream-lo); }
.movement-copy > p:not(.lede) { margin-top: 1.5rem; color: rgba(239,233,221,.72); }
.movement-copy .btn { margin-top: 2.2rem; }
.movement-copy .btn-solid { background: var(--cream); color: var(--deep); border-color: var(--cream); }
.movement-copy .btn-solid:hover { background: var(--cream-hi); }

.booking-section { position: relative; overflow: hidden; background: var(--cream); }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
.booking-grid h2 { max-width: none; }
.booking-heading-line { white-space: nowrap; }
.title-accent { color: var(--amber); }
.booking-grid .lede { margin-top: 1.3rem; color: var(--ink-soft); }
.booking-cutout { position: absolute; width: 250px; right: 4%; bottom: -30%; opacity: .74; transform: rotate(-5deg); }
.newsletter-section { padding-block: clamp(5rem, 8vw, 8rem); background: var(--deep); }
.newsletter-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(340px, 1fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; }
.newsletter-grid p { margin-top: 1.2rem; color: rgba(239,233,221,.72); }
.newsletter-row { align-items: end; }
.newsletter-row .btn { flex: 0 0 auto; }

/* Inner-page heroes: the photograph is the first impression, not decoration. */
.page-hero {
  min-height: clamp(470px, 64vh, 660px);
  padding-block: clamp(10rem, 18vh, 13rem) clamp(4rem, 8vh, 5.8rem);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--abyss);
  color: var(--cream);
}
.page-hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  animation: hero-settle 1.6s var(--ease-spring) both;
}
.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 10, 17, .9) 0%, rgba(4, 10, 17, .64) 40%, rgba(4, 10, 17, .17) 78%, rgba(4, 10, 17, .42) 100%),
    linear-gradient(0deg, rgba(4, 10, 17, .82) 0%, rgba(4, 10, 17, .1) 66%);
}
.page-hero .wrap { position: relative; z-index: 1; width: 100%; }
.page-hero h1 {
  max-width: 10em;
  margin-bottom: 1.2rem;
  color: var(--cream);
  font-size: clamp(3.25rem, 7vw, 6.2rem);
  line-height: .98;
}
.page-hero .lede {
  max-width: 34em;
  color: rgba(239, 233, 221, .82);
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
}
.page-hero .float-img.below { opacity: .82; }
.page-hero--about .page-hero-image { object-position: 58% center; }
.page-hero--services .page-hero-image { object-position: 58% center; }
.page-hero--wellness .page-hero-image { object-position: 54% center; }
.page-hero--spa .page-hero-image { object-position: 58% center; }
.page-hero--gym .page-hero-image { object-position: center 52%; }
.page-hero--products .page-hero-image { object-position: 58% center; }
.page-hero--gallery .page-hero-image { object-position: 68% center; }
.page-hero--faq .page-hero-image { object-position: 44% center; }
.page-hero--contact .page-hero-image { object-position: 68% center; }
@keyframes hero-settle { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
.media, .ph-tile { border-radius: 22px; }
.media-tag, .media-label, .ph-tile .ph-label { border-radius: 14px; }
.phil-item { border-color: var(--line); }
.access-note, .menu-note { background: rgba(247,243,234,.56); border-color: var(--line); border-radius: 20px; }
.faq-list details { border-color: var(--line); }
.faq-list summary { min-height: 84px; }
.site-footer { background: var(--deep-3); }

/* Motion is restrained and only uses transform + opacity. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity .9s var(--ease-spring), transform .9s var(--ease-spring), filter .9s var(--ease-spring); transition-delay: var(--d, 0s); }
  .reveal.in { opacity: 1; transform: none; filter: none; }
}

@media (min-width: 981px) {
  .hero-card-quiet { z-index: 9; }
}

@media (max-width: 980px) {
  .home-hero .hero-content { padding-top: 11rem; }
  .hero-copy { padding-top: 5rem; }
  .hero-card-standard { right: 4%; }
  .service-layout, .movement-grid, .intro-grid, .philosophy-grid { grid-template-columns: 1fr; gap: 4rem; }
  .service-intro { position: static; }
  .service-intro h2, .philosophy-heading h2, .movement-copy h2 { max-width: 11em; }
  .intro-copy { padding-left: 0; max-width: 40rem; }
  .intro-image, .movement-image { max-width: 570px; }
  .philosophy-lotus { left: 25%; top: 10%; }
}

@media (min-width: 681px) and (max-width: 980px) {
  /* Tablet layouts need a clear reading layer: cards stay above the cutouts. */
  .hero-brand-plate { top: 5.6rem; width: 180px; }
  .hero-card-standard { top: 42%; right: 4%; width: min(42vw, 300px); z-index: 8; }
  .hero-card-standard .hero-card-copy--desktop { max-width: 180px; }
  .hero-card-private { top: 76.6%; left: 4%; right: auto; width: min(44vw, 360px); z-index: 9; }
  .hero-card-quiet { right: 4%; bottom: 8%; width: min(36vw, 280px); }
  .hero-person--spa { left: auto; right: 4%; top: 12%; bottom: auto; height: 34%; z-index: 10; }
  .hero-person--gym { left: 8%; bottom: 22%; height: 20%; z-index: 10; }
  .hero-person--coffee { left: auto; right: 10%; bottom: 8%; height: 24%; z-index: 7; }
}

@media (max-width: 680px) {
  .header-inner { min-height: 62px; }
  .brand .mark-dark, .brand .mark-light { height: 24px; }
  .brand .word-dark, .brand .word-light { height: 10px; }
  .home-hero { min-height: 1040px; }
  .home-hero .hero-content { min-height: 1040px; padding-top: 8.5rem; padding-bottom: 6rem; }
  .hero-brand-plate { top: 5.8rem; left: var(--gutter); right: auto; width: 148px; padding: .72rem 0; }
  .hero-brand-plate span { font-size: .48rem; }
  .home-hero h1 { font-size: clamp(2.1rem, 9vw, 3.6rem); }
  .hero-copy { padding-top: 6rem; }
  .home-hero .hero-statement { font-size: .94rem; }
  .hero-card { padding: 1rem; }
  .hero-card-copy--desktop { display: none; }
  .hero-card-copy--mobile { display: block; }
  .hero-card-standard { top: 81%; left: 4%; right: auto; width: min(72vw, 310px); z-index: 8; }
  .hero-leaf--grounded { right: 12vw; bottom: -10%; width: auto; height: 75vh; transform: rotate(18deg); }
  .hero-card-private,
  .hero-card-quiet { display: none; }
  .hero-lotus { width: 170px; right: 22%; bottom: 0; opacity: .62; }
  .hero-foot { display: none; }
  .home-hero .scroll-cue { display: none; }
  .section { padding-block: 5.5rem; }
  .intro-cutout, .booking-cutout, .philosophy-lotus { display: none; }
  .service-pair, .newsletter-grid, .booking-grid { grid-template-columns: 1fr; }
  .service-card-large { padding-right: 1.4rem; }
  .service-card-large .service-icon { float: none; margin: 0 0 1.6rem; }
  .service-pair .service-card { min-height: 0; }
  .principle { grid-template-columns: 1fr; gap: .7rem; }
  .booking-grid .btn { justify-self: start; }
  .newsletter-row { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
  .newsletter-row .btn { justify-self: start; }
  .footer-legal { align-items: flex-start; flex-direction: column; }
  .page-hero { min-height: 500px; padding-block: 10rem 3.4rem; }
  .page-hero h1 { max-width: 8em; font-size: clamp(2.75rem, 12vw, 4.4rem); }
  .page-hero .lede { max-width: 28em; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .reveal { filter: none !important; }
}

/* ---------- home service cards + unified arrows ---------- */

/* Card links already contain their arrow span. The older pseudo-element
   created a second arrow beside it. */
.glass-card .card-link::after { content: none; }
.glass-card .card-link span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 50%;
  background: var(--deep);
  color: var(--cream);
  font-size: .84rem;
  letter-spacing: 0;
  transition: transform .5s var(--ease-spring), background .5s var(--ease-spring);
}
.glass-card .card-link:hover span { transform: translate(3px, -2px); background: var(--deep-2); }
.btn-icon,
.btn-solid .btn-icon,
.on-deep .btn-solid .btn-icon {
  background: var(--deep) !important;
  color: var(--cream) !important;
}
.btn:hover .btn-icon { background: var(--deep-2) !important; color: var(--cream) !important; }
.site-header.scrolled .header-cta .btn-icon { background: var(--cream) !important; color: var(--deep) !important; }
.site-header.scrolled .header-cta:hover .btn-icon { background: var(--deep) !important; color: var(--cream) !important; }
.site-header .header-cta { border-color: var(--amber) !important; background: var(--amber) !important; color: var(--deep) !important; }
.site-header .header-cta .btn-icon { background: var(--deep) !important; color: var(--amber) !important; }
.site-header .header-cta:hover { background: var(--cream) !important; border-color: var(--cream) !important; color: var(--deep) !important; }
.site-header .header-cta:hover .btn-icon { background: var(--deep) !important; color: var(--cream) !important; }
.site-header.scrolled .header-cta { background: var(--amber) !important; border-color: var(--amber) !important; color: var(--deep) !important; }
.site-header.scrolled .header-cta .btn-icon { background: var(--deep) !important; color: var(--amber) !important; }
.site-header.scrolled .header-cta:hover { background: var(--cream) !important; border-color: var(--cream) !important; color: var(--deep) !important; }
.site-header.scrolled .header-cta:hover .btn-icon { background: var(--deep) !important; color: var(--cream) !important; }

.service-card-large {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .58fr);
  gap: 1.4rem;
  padding-right: 1.45rem;
}
.service-card-copy { min-width: 0; display: flex; flex-direction: column; }
.service-card-large .service-icon { float: none; margin: 0 0 1.6rem; }
.service-card-media {
  overflow: hidden;
  min-height: 220px;
  margin: 0;
  border-radius: 15px;
}
.service-card-media img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  transition: transform 1s var(--ease-spring);
}
.service-card-media:hover img { transform: scale(1.04); }
.service-card-large .service-card-media {
  border-left: 1px solid rgba(239,233,221,.2);
  border-radius: 0;
  padding-left: 1.35rem;
}
.service-pair .service-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.1rem;
}
.service-pair .service-card-copy { min-height: 230px; }
.service-pair .service-card-media {
  min-height: 126px;
  padding-top: 1rem;
  border-top: 1px solid rgba(239,233,221,.2);
  border-radius: 0;
}
.service-pair .service-card-media img { min-height: 126px; aspect-ratio: 16 / 9; }

/* The booking call-to-action stays intentionally quiet after the people move
   into the hero scene. */
.booking-section { min-height: 360px; }
.booking-section .booking-grid { position: relative; z-index: 3; min-height: 240px; }

@media (max-width: 980px) {
  .service-card-large { grid-template-columns: 1fr; padding-right: 1.4rem; }
  .service-card-large .service-card-media {
    min-height: 180px;
    padding-top: 1.15rem;
    padding-left: 0;
    border-top: 1px solid rgba(239,233,221,.2);
    border-left: 0;
  }
  .service-card-large .service-card-media img { min-height: 180px; }
  .service-pair .service-card-copy { min-height: 0; }
}

@media (max-width: 680px) {
  .booking-section { min-height: 430px; }
  .booking-section .booking-grid { min-height: 280px; }
  .hero-person--gym { left: 2%; bottom: 18%; height: 20%; z-index: 9; }
  .hero-person--spa { left: auto; right: -3%; top: auto; bottom: 2%; height: 34%; z-index: 10; }
  .hero-person--coffee { right: 33%; bottom: 15%; height: 20%; }
  .service-card-media, .service-card-media img { min-height: 150px; }
}