/* =========================================================
   Merve Mete Photography — cinematic editorial theme
   3 brand tokens (admin-editable): dark teal, accent teal, cream.
   ========================================================= */
:root {
  --brand-dark: #14292a;
  --brand-accent: #2f6f70;
  --brand-soft: #f6f1ea;

  --ink: var(--brand-dark);
  --teal: var(--brand-accent);
  --teal-l: color-mix(in oklab, var(--brand-accent) 50%, white);
  --aqua: color-mix(in oklab, var(--brand-accent) 14%, white);
  --cream: var(--brand-soft);
  --paper: color-mix(in oklab, var(--brand-soft) 40%, white);
  --sand: color-mix(in oklab, var(--brand-soft) 76%, #b8977c);
  --blush: #e9cfc2;
  --text: color-mix(in oklab, var(--brand-dark) 92%, black);
  --muted: color-mix(in oklab, var(--brand-dark) 60%, var(--brand-soft));
  --line: color-mix(in oklab, var(--brand-dark) 13%, transparent);
  --on-dark: #f5f0e9;
  --on-dark-muted: color-mix(in oklab, #f5f0e9 72%, var(--brand-dark));

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script: "Allura", "Segoe Script", "Brush Script MT", cursive;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r: 22px;
  --wrap: 1320px;
  --hdr: 86px;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 1rem) }
body { margin: 0; font: 400 16px/1.75 var(--sans); color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: clip }
img, video { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.06; margin: 0 0 .6em; letter-spacing: -.012em; text-wrap: balance }
p { margin: 0 0 1em }
em { font-style: italic }
.wrap { width: min(var(--wrap), 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto }
.narrow { max-width: 900px }
.center { text-align: center; justify-content: center; margin-inline: auto }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle }
.skip { position: absolute; left: -999px; top: 0; z-index: 400; background: var(--ink); color: #fff; padding: .7rem 1rem }
.skip:focus { left: 1rem; top: 1rem }
:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 3px }
::selection { background: var(--teal); color: var(--on-dark) }
.mt { margin-top: 2rem }
.muted { color: var(--muted) }

/* ---------- Type ---------- */
.eyebrow { font: 500 .72rem/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7 }
.eyebrow.light { color: var(--on-dark) }
.center .eyebrow::before, .eyebrow.center::before { display: none }
.display { font-size: clamp(2.9rem, 7vw, 6.4rem); font-weight: 300; line-height: .98 }
.h2 { font-size: clamp(2.3rem, 4.8vw, 4.3rem); font-weight: 300 }
.h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 400 }
.display em, .h2 em, .h3 em, .phero-title em { color: var(--teal); font-weight: 300 }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); font-weight: 300; color: var(--muted); max-width: 58ch }
.script { font-family: var(--script); font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: var(--teal); margin: 0 0 .4rem }
.script.big { font-size: clamp(3.8rem, 11vw, 9.5rem); color: var(--on-dark) }
.sec { padding: clamp(5rem, 12vw, 10rem) 0; position: relative }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; margin-bottom: clamp(3rem, 6vw, 5rem); flex-wrap: wrap }
.sec-head .h2 { max-width: 17ch; margin: 0 }
.sec-head.center { flex-direction: column; align-items: center; text-align: center }
.sec-lead { max-width: 44ch; color: var(--muted); margin: 0 }

/* ---------- Buttons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; padding: 1.05rem 1.8rem; border-radius: 999px; border: 1px solid transparent; font: 500 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color .5s var(--ease), border-color .5s, transform .5s var(--ease) }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease) }
.btn:hover::before { transform: none }
.btn .i { width: 1.25em; height: 1.25em }
.btn-light { background: var(--on-dark); color: var(--ink) }
.btn-light::before { background: var(--teal) }
.btn-light:hover { color: var(--on-dark) }
.btn-ghost { border-color: color-mix(in oklab, var(--on-dark) 45%, transparent); color: var(--on-dark) }
.btn-ghost::before { background: var(--on-dark) }
.btn-ghost:hover { color: var(--ink) }
.btn-glass { background: color-mix(in oklab, var(--on-dark) 14%, transparent); color: inherit; border-color: color-mix(in oklab, currentColor 30%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.btn-glass::before { background: var(--teal) }
.btn-glass:hover { color: var(--on-dark); border-color: var(--teal) }
.btn-dark { background: var(--ink); color: var(--on-dark) }
.btn-dark::before { background: var(--teal) }
.btn-line { border-color: var(--ink); color: var(--ink) }
.btn-line::before { background: var(--ink) }
.btn-line:hover { color: var(--on-dark) }
.btn-wa { background: #1fa855; color: #fff }
.btn-wa::before { background: #148a44 }
.btn-sm { padding: .8rem 1.25rem; font-size: .72rem }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem }
.btns.center { justify-content: center }
.link-arrow { display: inline-flex; align-items: center; gap: .7rem; font: 500 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .6rem 0; position: relative; white-space: nowrap }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 2rem; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .6s var(--ease) }
.link-arrow:hover::after { transform: scaleX(.3) }
.link-arrow .i { transition: transform .5s var(--ease) }
.link-arrow:hover .i { transform: translateX(6px) }
.round-link { width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; align-content: center; gap: .6rem; text-align: center; font: 500 .75rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: background .5s var(--ease), color .5s }
.round-link .i { width: 1.8em; height: 1.8em; transition: transform .5s var(--ease) }
.round-link:hover { background: var(--ink); color: var(--on-dark) }
.round-link:hover .i { transform: rotate(45deg) }
.chips { display: flex; flex-wrap: wrap; gap: .55rem }
.chips.center { justify-content: center; margin-top: 3rem }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; transition: background .4s, color .4s, border-color .4s }
.chip:hover, .chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-dark) }
.chip sup { font-size: .65em; opacity: .6 }

/* ---------- Preloader / cursor / grain ---------- */
.loader { position: fixed; inset: 0; z-index: 500; background: var(--cream); display: grid; place-items: center; transition: clip-path 1.1s var(--ease-io); clip-path: inset(0 0 0 0); animation: loaderFailsafe .01s 4s forwards }
.loader.done { clip-path: inset(0 0 100% 0) }
.no-js .loader { display: none }
.loader-in { display: grid; justify-items: center; gap: 2rem }
.loader-in img { width: min(320px, 60vw); height: auto; animation: loaderLogo 1.4s var(--ease) both }
.loader-bar { width: 180px; height: 1px; background: var(--line); overflow: hidden }
.loader-bar i { display: block; height: 100%; background: var(--teal); animation: loaderBar 1.6s var(--ease-io) both }
@keyframes loaderLogo { from { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(6px) } }
@keyframes loaderBar { from { transform: translateX(-100%) } }
@keyframes loaderFailsafe { to { visibility: hidden; opacity: 0 } }

.cursor { display: none }
.has-cursor .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: 450; pointer-events: none; mix-blend-mode: difference }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff }
.cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #fff; display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .45s }
.cursor-ring em { font: 500 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: #000; opacity: 0; transition: opacity .3s }
.cursor.is-link .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px }
.cursor.is-label .cursor-ring { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: #fff }
.cursor.is-label .cursor-ring em { opacity: 1 }
.cursor.off { opacity: 0 }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none }
.grain { position: fixed; inset: -50%; z-index: 350; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite }
@keyframes grain { 0%, 100% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -3%) } 60% { transform: translate(-2%, -1%) } 80% { transform: translate(3%, 3%) } }

/* ---------- Header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hdr); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 0 clamp(1rem, 3vw, 2.8rem); color: var(--on-dark); transition: background .6s var(--ease), color .6s, transform .7s var(--ease), height .5s var(--ease), box-shadow .6s }
.hdr.scrolled { height: 72px; background: color-mix(in oklab, var(--cream) 86%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); color: var(--ink); box-shadow: 0 1px 0 var(--line) }
.hdr.hide { transform: translateY(-105%) }
.menu-open .hdr { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--on-dark); transform: none }
.brand { display: block; position: relative; width: clamp(128px, 12vw, 172px) }
.brand img { width: 100%; height: auto; transition: opacity .5s }
.brand .logo-d { position: absolute; inset: 0; opacity: 0 }
.hdr.scrolled .logo-d { opacity: 1 }
.hdr.scrolled .logo-l { opacity: 0 }
.menu-open .hdr .logo-d { opacity: 0 }
.menu-open .hdr .logo-l { opacity: 1 }
.nav { justify-self: center }
.nav > ul { display: flex; gap: clamp(1.4rem, 2.6vw, 2.8rem); list-style: none; margin: 0; padding: 0 }
.nav > ul > li > a { display: block; font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 1rem 0; position: relative }
.nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .6rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease) }
.nav > ul > li > a:hover::after, .nav > ul > li > a[aria-current]::after { transform: scaleX(1); transform-origin: left }
.has-mega { position: relative }
.mega { position: absolute; top: 100%; left: 50%; width: min(980px, 92vw); display: grid; grid-template-columns: 1fr 1fr .95fr; gap: 2rem; padding: 2rem; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 90px -40px rgba(10, 25, 26, .45); opacity: 0; visibility: hidden; transform: translate(-50%, 14px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s }
.mega::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) }
.mega-h { font: 500 .66rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem }
.mega-col a { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; font-family: var(--serif); font-size: 1.22rem; line-height: 1.2; transition: color .3s, transform .4s var(--ease) }
.mega-col a .i { color: var(--teal); width: 1.1em; height: 1.1em }
.mega-col a:hover { color: var(--teal); transform: translateX(6px) }
.mega-preview { position: relative; border-radius: 18px; overflow: hidden; min-height: 280px; background: var(--sand) }
.mega-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform 1.2s var(--ease) }
.mega-preview img.swap { opacity: .2; transform: scale(1.06) }
.mega-preview span { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .7rem 1rem; border-radius: 12px; background: color-mix(in oklab, var(--ink) 55%, transparent); backdrop-filter: blur(8px); color: var(--on-dark); font-size: .8rem }
.hdr-act { display: flex; align-items: center; gap: .8rem; justify-self: end }
.hdr-ig { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); transition: background .4s, color .4s }
.hdr-ig:hover { background: currentColor }
.hdr-ig:hover .i { color: var(--teal) }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; position: relative; z-index: 2 }
.burger span { width: 20px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease) }
.menu-open .burger span:first-child { transform: translateY(3.75px) rotate(45deg) }
.menu-open .burger span:last-child { transform: translateY(-3.75px) rotate(-45deg) }

/* Full-screen menu (outside the header on purpose: no backdrop-filter ancestor) */
.menu { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: .8fr 1.2fr; background: var(--ink); color: var(--on-dark); clip-path: circle(0% at calc(100% - 3.2rem) 2.6rem); visibility: hidden; transition: clip-path 1s var(--ease-io), visibility 0s linear 1s }
.menu-open .menu { clip-path: circle(150% at calc(100% - 3.2rem) 2.6rem); visibility: visible; transition: clip-path 1s var(--ease-io), visibility 0s }
.menu-open { overflow: hidden }
.menu-media { position: relative; overflow: hidden }
.menu-media img, .menu-media .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s var(--ease); filter: saturate(.8) }
.menu-open .menu-media img { transform: scale(1) }
.menu-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--ink)) }
.menu-body { padding: calc(var(--hdr) + 3vh) clamp(1.5rem, 5vw, 5rem) 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; overflow-y: auto }
.menu-nav { list-style: none; margin: 0; padding: 0 }
.menu-nav li { overflow: hidden }
.menu-nav a { display: flex; align-items: baseline; gap: 1.2rem; font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: 1.12; transform: translateY(110%); transition: transform .9s var(--ease), color .3s }
.menu-nav small { font: 400 .75rem var(--sans); letter-spacing: .2em; color: var(--teal-l) }
.menu-nav a:hover { color: var(--teal-l); font-style: italic }
.menu-open .menu-nav a { transform: none }
.menu-nav li:nth-child(2) a { transition-delay: .06s } .menu-nav li:nth-child(3) a { transition-delay: .12s } .menu-nav li:nth-child(4) a { transition-delay: .18s } .menu-nav li:nth-child(5) a { transition-delay: .24s } .menu-nav li:nth-child(6) a { transition-delay: .3s }
.menu-sub .mega-h { color: var(--on-dark-muted) }
.menu-sub .chip { border-color: rgba(255, 255, 255, .16) }
.menu-sub .chip:hover { background: var(--on-dark); color: var(--ink) }
.menu-contact { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.6rem; font-size: .95rem }
.menu-contact a { display: inline-flex; gap: .5rem; align-items: center; color: var(--on-dark-muted) }
@media (max-width: 1100px) {
  .nav, .hide-m { display: none }
  .burger { display: flex }
  .hdr { grid-template-columns: auto 1fr }
}
@media (max-width: 760px) { .menu { grid-template-columns: 1fr } .menu-media { display: none } }

/* ---------- Word splitting & reveals ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em }
.w > span { display: inline-block }
.js [data-split] .w > span { transform: translateY(110%); transition: transform 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0s)) }
.js [data-split].in .w > span { transform: none }
.js body:not(.loaded) [data-split] .w > span { transform: translateY(110%) !important }
.js [data-fade] { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s) }
.js [data-fade].in { opacity: 1; transform: none }
.js body:not(.loaded) [data-fade] { opacity: 0 !important }
.js .reveal { opacity: 0; transform: translateY(46px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease) }
.js .reveal.in { opacity: 1; transform: none }
.mask { display: block; overflow: hidden; border-radius: var(--r); position: relative }
.mask img { width: 100%; height: 100%; object-fit: cover }
.js [data-reveal] { clip-path: inset(100% 0 0 0) }
.js [data-reveal] img { transform: scale(1.3) }
.js [data-reveal].in { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease-io) }
.js [data-reveal].in img { transform: scale(1); transition: transform 2s var(--ease) }
.img-ph { display: block; width: 100%; height: 100%; min-height: 200px; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6), transparent 55%), linear-gradient(150deg, var(--aqua), var(--sand)) }

/* ---------- Hero ---------- */
.hero, .phero { position: relative; min-height: 100svh; display: flex; overflow: hidden; color: var(--on-dark); background: var(--ink); isolation: isolate }
.hero-media, .phero-media { position: absolute; inset: -6% 0; z-index: -2; transform: translate3d(0, calc(var(--p, 0) * 16%), 0) scale(calc(1.04 + var(--p, 0) * .14)); will-change: transform }
.bg-video, .bg-img { width: 100%; height: 100%; object-fit: cover }
.veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 20% 100%, color-mix(in oklab, var(--ink) 80%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--ink) 55%, transparent) 0%, color-mix(in oklab, var(--ink) 10%, transparent) 38%, color-mix(in oklab, var(--ink) 78%, transparent) 100%) }
.hero-content { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr) + 4rem) 0 clamp(8rem, 18vh, 12rem); transform: translate3d(0, calc(var(--p, 0) * -22%), 0); opacity: calc(1 - var(--p, 0) * 1.5) }
.hero-title { font-size: clamp(3.1rem, 8.6vw, 8.6rem); font-weight: 300; line-height: .96; max-width: 13ch; margin-bottom: 2rem }
.hero-title em, .phero-title em { font-family: var(--script); font-style: normal; font-weight: 400; font-size: 1.18em; color: color-mix(in oklab, var(--brand-accent) 30%, white); letter-spacing: 0; line-height: .8 }
.hero-sub { max-width: 48ch; font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 300; color: var(--on-dark-muted); margin: 0 }
.hero-side { position: absolute; right: clamp(1rem, 2.6vw, 2.6rem); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 500 .68rem var(--sans); letter-spacing: .5em; text-transform: uppercase; opacity: .75 }
.hero-meta { position: absolute; left: 0; right: 0; bottom: clamp(1.8rem, 4vh, 3rem); display: flex; flex-wrap: wrap; gap: .5rem 2.4rem; font-size: .8rem; letter-spacing: .08em; color: var(--on-dark-muted) }
.hero-meta b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--on-dark); margin-right: .3rem }
.scroll-cue { position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vh, 3rem); display: flex; flex-direction: column; align-items: center; gap: .8rem; font: 500 .62rem var(--sans); letter-spacing: .3em; text-transform: uppercase }
.scroll-cue i { width: 1px; height: 64px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--on-dark); animation: cue 2.2s var(--ease-io) infinite }
@media (max-width: 760px) {
  .hero-title { font-size: clamp(2.3rem, 9.4vw, 3.4rem); max-width: none }
  .phero-title { font-size: clamp(2.2rem, 9vw, 3.2rem); overflow-wrap: break-word }
  .hero-side, .scroll-cue { display: none }
  .hero-content { padding-bottom: 7.5rem }
  .hero-meta { gap: .3rem 1.2rem; font-size: .72rem }
  .hero-meta b { font-size: 1.2rem }
}
@keyframes cue { 0% { transform: translateY(-100%) } 100% { transform: translateY(100%) } }

.phero { min-height: 90svh }
.phero.compact { min-height: 64svh }
.phero-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr) + 3rem) 0 clamp(4rem, 11vh, 7rem); transform: translate3d(0, calc(var(--p, 0) * -18%), 0); opacity: calc(1 - var(--p, 0) * 1.3) }
.phero-title { font-size: clamp(2.7rem, 6.6vw, 6.2rem); font-weight: 300; max-width: 16ch; margin-bottom: 1.4rem }
.phero-lead { max-width: 56ch; font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 300; color: var(--on-dark-muted); margin: 0 }
.phero.plain { background: radial-gradient(80% 70% at 85% 10%, color-mix(in oklab, var(--brand-accent) 55%, var(--ink)), var(--ink) 65%) }
.phero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.phero-orbs i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: orb 18s ease-in-out infinite }
.phero-orbs i:nth-child(1) { width: 40vw; height: 40vw; background: var(--teal); top: -12vw; right: -8vw }
.phero-orbs i:nth-child(2) { width: 30vw; height: 30vw; background: var(--blush); bottom: -14vw; left: -6vw; opacity: .25; animation-delay: -6s }
.phero-orbs i:nth-child(3) { width: 22vw; height: 22vw; background: var(--teal-l); top: 40%; left: 40%; opacity: .18; animation-delay: -12s }
@keyframes orb { 50% { transform: translate(-6vw, 5vw) scale(1.15) } }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 2rem; padding: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted) }
.crumbs li + li::before { content: "—"; margin-right: .5rem; opacity: .5 }
.crumbs a:hover { color: var(--on-dark) }

/* ---------- Ticker ---------- */
.ticker { background: var(--ink); color: var(--on-dark); overflow: hidden; padding: clamp(1.2rem, 2.4vw, 2rem) 0; border-top: 1px solid rgba(255, 255, 255, .06) }
.ticker-track { display: flex; align-items: center; gap: 2.4rem; width: max-content; animation: marquee 50s linear infinite; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.8rem, 4vw, 3.6rem); white-space: nowrap; transform: skewX(var(--skew, 0deg)); transition: transform .4s }
.ticker-track i { font-style: normal; font-size: .4em; color: var(--teal-l) }
.ticker-track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--on-dark) 60%, transparent) }
@keyframes marquee { to { translate: -33.333% 0 } }

/* ---------- Manifesto ---------- */
.manifesto { position: relative; padding: clamp(8rem, 20vh, 14rem) 0; overflow: hidden }
.manifesto-text { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.8vw, 3.5rem); line-height: 1.24; letter-spacing: -.01em; color: var(--ink); margin: 0 0 2rem }
.mw { opacity: .14; transition: opacity .5s }
.mw.on { opacity: 1 }
.no-js .mw { opacity: 1 }
.manifesto .sig { text-align: right; font-size: clamp(2.6rem, 5vw, 4rem) }
.float { position: absolute; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(10, 25, 26, .5); z-index: -0 }
.float img, .float .img-ph { width: 100%; height: 100%; object-fit: cover }
.float.f1 { width: 13vw; aspect-ratio: 4/5; left: 3vw; top: 10% }
.float.f2 { width: 11vw; aspect-ratio: 4/5; right: 4vw; top: 16% }
.float.f3 { width: 9vw; aspect-ratio: 4/5; right: 14vw; bottom: 8% }
.manifesto .wrap { position: relative; z-index: 1 }
@media (max-width: 1000px) { .float { display: none } }

/* ---------- Horizontal pinned services ---------- */
.hs { position: relative; background: var(--paper) }
.hs-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem) }
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem }
.hs-head .h2 { margin: 0; max-width: 14ch }
.hs-count { font-family: var(--serif); font-size: 1.4rem; color: var(--muted); margin: 0 }
.hs-count b { font-weight: 400; font-size: 3rem; color: var(--ink) }
.hs-track { display: flex; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-inline: max(clamp(1rem, 3vw, 2.5rem), (100vw - var(--wrap)) / 2); width: max-content; will-change: transform }
.hs-panel { flex: 0 0 auto; width: min(64vw, 900px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: end }
.hs-media { display: block; aspect-ratio: 4/5; max-height: 62svh; border-radius: 300px 300px var(--r) var(--r); overflow: hidden; background: var(--sand) }
.hs-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease) }
.hs-panel:hover .hs-media img { transform: scale(1.07) }
.hs-num { display: block; font-family: var(--serif); font-size: clamp(4rem, 8vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--teal); margin-bottom: 1rem }
.hs-info h3 { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 300 }
.hs-info p:not(.eyebrow) { color: var(--muted); max-width: 36ch }
.hs-end { flex: 0 0 auto; width: 30vw; display: grid; place-items: center }
.hs-progress { height: 1px; background: var(--line); position: relative }
.hs-progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--prog, 0)) }
@media (max-width: 900px) {
  .hs { height: auto !important }
  .hs-sticky { position: static; height: auto; padding: 6rem 0 }
  .hs-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 1.5rem; scrollbar-width: none }
  .hs-panel { width: 82vw; grid-template-columns: 1fr; scroll-snap-align: center }
  .hs-media { max-height: none; aspect-ratio: 4/4.4 }
  .hs-end, .hs-progress, .hs-count { display: none }
}

/* ---------- About teaser ---------- */
.about-teaser { background: var(--cream) }
.at-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); align-items: center }
.at-media { position: relative }
.at-media .mask { aspect-ratio: 4/5; border-radius: 500px 500px var(--r) var(--r) }
.badge-spin { position: absolute; width: clamp(130px, 13vw, 180px); right: -2.5rem; bottom: 8%; border-radius: 50%; background: var(--cream); padding: .6rem; animation: spin 22s linear infinite; box-shadow: 0 20px 40px -24px rgba(10, 25, 26, .45) }
.badge-spin text { font: 500 13.5px var(--sans); letter-spacing: 4px; text-transform: uppercase; fill: var(--ink) }
@keyframes spin { to { transform: rotate(360deg) } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2.8rem 0 2.4rem; padding: 2.2rem 0; border-block: 1px solid var(--line) }
.stats dt { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; color: var(--teal) }
.stats dd { margin: .5rem 0 0; font-size: .78rem; letter-spacing: .06em; color: var(--muted) }
.stats.compact { grid-template-columns: repeat(3, auto); gap: 2.6rem; margin: 0; padding: 0; border: 0 }
@media (max-width: 900px) { .at-grid { grid-template-columns: 1fr } .at-media { max-width: 460px; margin: 0 auto } .badge-spin { right: -.5rem } .stats { grid-template-columns: repeat(2, 1fr) } }

/* ---------- Video break (clip expands on scroll) ---------- */
.vbreak { position: relative; height: 230svh; background: var(--cream) }
.vbreak-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; --c: calc(1 - clamp(0, var(--v, 0) * 2.4, 1)) }
.vbreak-media { position: absolute; inset: 0; clip-path: inset(calc(var(--c) * 16%) calc(var(--c) * 24%) round calc(var(--c) * 260px) calc(var(--c) * 260px) calc(var(--c) * 30px) calc(var(--c) * 30px)); background: var(--ink) }
.vbreak-lines { position: relative; z-index: 1; margin: 0; text-align: center; color: var(--on-dark); font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 8vw, 7.5rem); line-height: 1.02 }
.vbreak-lines span { display: block; opacity: clamp(0, calc((var(--v, 0) - .36) * 8), 1); transform: translateY(calc((1 - clamp(0, calc((var(--v, 0) - .36) * 8), 1)) * 50px)) }
.vbreak-lines span:nth-child(2) { opacity: clamp(0, calc((var(--v, 0) - .5) * 8), 1); transform: translateY(calc((1 - clamp(0, calc((var(--v, 0) - .5) * 8), 1)) * 50px)) }
.vbreak-lines span:nth-child(3) { opacity: clamp(0, calc((var(--v, 0) - .64) * 8), 1); transform: translateY(calc((1 - clamp(0, calc((var(--v, 0) - .64) * 8), 1)) * 50px)); font-size: 1.35em; color: color-mix(in oklab, var(--brand-accent) 28%, white) }
.no-js .vbreak { height: auto } .no-js .vbreak-sticky { position: relative } .no-js .vbreak-lines span { opacity: 1; transform: none }

/* ---------- Locations ---------- */
.locs { background: var(--paper) }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem) }
.loc { position: relative; display: block; aspect-ratio: 3/4.1; border-radius: var(--r); overflow: hidden; color: var(--on-dark); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); isolation: isolate }
.loc:nth-child(2) { margin-top: clamp(0rem, 8vw, 7rem) }
.loc-media { position: absolute; inset: 0; z-index: -2 }
.loc-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease), filter 1s }
.loc:hover .loc-media img { transform: scale(1.16) }
.loc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--ink) 88%, transparent)); transition: opacity .6s }
.loc-body { position: absolute; left: 1.8rem; right: 1.8rem; bottom: 1.8rem; display: grid; gap: .5rem }
.loc-body small { font: 500 .68rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--on-dark-muted) }
.loc-body strong { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1.05 }
.loc-body em { font-style: normal; font-size: .92rem; color: var(--on-dark-muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s var(--ease), opacity .6s }
.loc:hover .loc-body em, .loc:focus-visible .loc-body em { max-height: 8rem; opacity: 1 }
.loc-arrow { position: absolute; top: 1.4rem; right: 1.4rem; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); transition: transform .6s var(--ease), background .4s }
.loc:hover .loc-arrow { transform: rotate(45deg); background: var(--on-dark); color: var(--ink) }
@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr } .loc:nth-child(2) { margin-top: 0 } .loc { aspect-ratio: 4/4.4 } .loc-body em { max-height: 8rem; opacity: 1 } }

/* ---------- Process / timeline ---------- */
.steps, .timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem }
.steps-line { position: absolute; left: 0; right: 0; top: 2.3rem; height: 1px; background: var(--line) }
.steps-line i { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(var(--sp, 0)) }
.step, .tl { position: relative; padding-top: .2rem }
.step-n { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; margin-bottom: 1.8rem; background: var(--cream); border: 1px solid var(--teal); font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--teal); position: relative }
.step h3, .tl h3 { font-size: clamp(1.6rem, 2.2vw, 2rem) }
.step p, .tl p { color: var(--muted); margin: 0 }
.tl-y { display: block; font-family: var(--script); font-size: 2.6rem; color: var(--teal); line-height: 1.5; background: var(--cream); padding-right: 1rem; width: fit-content; margin-bottom: 1rem; position: relative }
@media (max-width: 900px) { .steps, .timeline { grid-template-columns: 1fr 1fr } .steps-line { display: none } }
@media (max-width: 560px) { .steps, .timeline { grid-template-columns: 1fr } }

/* ---------- Gallery preview (parallax columns) ---------- */
.gal-preview { background: var(--paper); overflow: hidden }
.pcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.6rem); align-items: start }
.pcol { display: grid; gap: clamp(.8rem, 1.6vw, 1.6rem); will-change: transform }
.pcol:nth-child(2) { margin-top: 12vh }
.ptile, .m-item, .strip-item { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--sand) }
.ptile img, .m-item img, .strip-item img { width: 100%; height: auto; transition: transform 1.4s var(--ease), filter .8s }
.ptile:hover img, .m-item:hover img, .strip-item:hover img { transform: scale(1.06) }
.ptile::after, .m-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, color-mix(in oklab, var(--ink) 55%, transparent)); opacity: 0; transition: opacity .6s }
.ptile:hover::after, .m-item:hover::after { opacity: 1 }
@media (max-width: 760px) { .pcols { grid-template-columns: 1fr 1fr } .pcol:nth-child(3) { display: none } .pcol { transform: none !important } }

/* ---------- Testimonials ---------- */
.quotes-sec { background: var(--ink); color: var(--on-dark) }
.quotes-sec .eyebrow { color: var(--teal-l) }
.quote-mark { width: 3rem; height: 3rem; color: var(--teal-l); margin: 0 auto 1.5rem; display: block }
.quotes { display: grid; margin: 1rem 0 2.5rem }
.quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); pointer-events: none }
.quote.on { opacity: 1; transform: none; pointer-events: auto }
.quote blockquote { margin: 0 0 1.8rem; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1.3 }
.quote figcaption { font-size: .85rem; letter-spacing: .08em; color: var(--on-dark-muted) }
.quote figcaption strong { color: var(--on-dark); font-weight: 500 }
.quote-dots { display: flex; justify-content: center; gap: .6rem }
.quote-dots button { width: 34px; height: 3px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .2); cursor: pointer; padding: 0; transition: background .4s, width .4s }
.quote-dots button.on { background: var(--on-dark); width: 56px }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--cream) }
.faq-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 7vw, 7rem); align-items: start }
.faq { margin-top: 2.6rem; border-top: 1px solid var(--line) }
.faq-item { border-bottom: 1px solid var(--line) }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; padding: 1.5rem 0 }
.faq-item summary::-webkit-details-marker { display: none }
.faq-n { font: 500 .72rem var(--sans); letter-spacing: .14em; color: var(--teal) }
.faq-q { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; transition: color .3s }
.faq-item summary:hover .faq-q { color: var(--teal) }
.faq-plus { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background .5s var(--ease), transform .6s var(--ease) }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; translate: -50% -50% }
.faq-plus::after { rotate: 90deg }
.faq-item[open] .faq-plus { background: var(--ink); color: var(--on-dark); transform: rotate(135deg) }
.faq-a { padding: 0 3.5rem 1.6rem 3rem; color: var(--muted) }
.faq-a p { margin: 0 }
.faq-item[open] .faq-a { animation: faqIn .7s var(--ease) }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px) } }
@media (max-width: 960px) { .faq-grid { grid-template-columns: 1fr } }

/* ---------- Lead form ---------- */
.lead-box { position: relative; background: var(--paper); border-radius: 30px; padding: clamp(1.8rem, 3.6vw, 3rem); box-shadow: 0 40px 90px -50px rgba(10, 25, 26, .45); scroll-margin-top: calc(var(--hdr) + 1rem) }
.lead-box .h3 { margin-bottom: .5rem }
.lead-box > .muted { font-size: .95rem; margin-bottom: 1.6rem }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.4rem }
.fld { position: relative; display: block; padding-top: 1.2rem }
.fld.full { grid-column: 1 / -1 }
.fld input, .fld select, .fld textarea { width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: .7rem 0 .6rem; border-radius: 0; transition: border-color .4s; appearance: none }
.fld select { background: linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 10px) 55% / 5px 5px no-repeat, linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 5px) 55% / 5px 5px no-repeat; cursor: pointer }
.fld textarea { resize: vertical; min-height: 90px }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--teal) }
.fld > span { position: absolute; left: 0; top: 1.95rem; font-size: .95rem; color: var(--muted); pointer-events: none; transform-origin: left; transition: transform .45s var(--ease), color .3s }
.fld input:focus + span, .fld input:not(:placeholder-shown) + span, .fld textarea:focus + span, .fld textarea:not(:placeholder-shown) + span, .fld > span.fixed { transform: translateY(-1.45rem) scale(.78); color: var(--teal) }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .82rem; color: var(--muted); margin: 1.6rem 0; line-height: 1.55; cursor: pointer }
.consent input { accent-color: var(--teal); width: 17px; height: 17px; margin-top: .15rem; flex: none }
.consent a { text-decoration: underline; color: var(--text) }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem }
.form-actions .btn-dark { flex: 1 1 auto }
.form-err { background: #f8e3dd; color: #8a2c1c; border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1rem }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr } }

/* ---------- Blog ---------- */
.blog-teaser { background: var(--paper) }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem) }
.pcard-media { display: block; aspect-ratio: 7/5; border-radius: var(--r); overflow: hidden; margin-bottom: 1.4rem; background: var(--sand) }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease) }
.pcard:hover .pcard-media img { transform: scale(1.06) }
.pcard-meta { font: 500 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin-bottom: .7rem }
.pcard h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem) }
.pcard p:not(.pcard-meta) { color: var(--muted); font-size: .95rem }
.post-feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(4rem, 8vw, 7rem) }
.post-feature-media { aspect-ratio: 7/5 }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 4rem; color: var(--muted) }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(3rem, 7vw, 7rem); align-items: start }
.post-aside .sticky { position: sticky; top: calc(var(--hdr) + 2rem); padding: 2rem; border-radius: var(--r); background: var(--paper); display: grid; gap: 1.2rem }
.post-aside img { width: 160px; height: auto }
.post-aside p { font-size: .9rem; color: var(--muted); margin: 0 }
@media (max-width: 900px) { .pgrid, .post-feature, .post-grid { grid-template-columns: 1fr } }

/* ---------- Final CTA ---------- */
.cta-final { position: relative; min-height: 92svh; display: grid; place-items: center; overflow: hidden; color: var(--on-dark); background: var(--ink); isolation: isolate; text-align: center }
.cta-media { position: absolute; inset: -18% 0; z-index: -2 }
.cta-content { padding: 10rem 0 }
.cta-text { max-width: 52ch; margin: 1.6rem auto 0; color: var(--on-dark-muted); font-weight: 300; font-size: 1.1rem }
.cta-final .btns { justify-content: center }

/* ---------- Footer ---------- */
.ftr { background: var(--ink); color: var(--on-dark-muted); overflow: hidden; position: relative }
.ftr-cta { text-align: center; padding: clamp(7rem, 16vh, 11rem) 0 clamp(4rem, 9vh, 6rem); border-bottom: 1px solid rgba(255, 255, 255, .08) }
.ftr-cta .script { color: var(--teal-l) }
.ftr-cta h2 { color: var(--on-dark); max-width: 15ch; margin: 0 auto }
.ftr-cta h2 em { color: var(--teal-l) }
.ftr-cta .btns { justify-content: center }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; padding: 5rem 0 3rem }
.ftr h3 { font: 500 .7rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--teal-l); margin: 0 0 1.3rem }
.ftr h3.mt { margin-top: 2rem }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .95rem }
.ftr ul.inline { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem }
.ftr a { transition: color .3s }
.ftr a:hover { color: var(--on-dark) }
.ftr address { font-style: normal; display: grid; gap: .5rem; font-size: .95rem }
.ftr-brand img { width: 190px; height: auto; margin-bottom: 1.4rem }
.ftr-brand p { max-width: 36ch; font-size: .95rem }
.social { display: flex; gap: .6rem; margin-top: 1.4rem }
.social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .14); transition: background .4s, color .4s, border-color .4s }
.social a:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark) }
.ftr-word { text-align: center; white-space: nowrap; line-height: .85; padding-bottom: 1rem; pointer-events: none }
.ftr-word span { display: inline-block; font-family: var(--script); font-size: clamp(6rem, 22vw, 21rem); color: transparent; -webkit-text-stroke: 1px rgba(245, 240, 233, .16) }
.ftr-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.6rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .78rem; letter-spacing: .04em }
@media (max-width: 960px) { .ftr-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .ftr-grid { grid-template-columns: 1fr } }

/* ---------- Landing (service & city) ---------- */
.intro-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 7vw, 7rem); align-items: start }
.intro-aside .sticky { position: sticky; top: calc(var(--hdr) + 2rem) }
.intro-big { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.3; color: var(--ink) }
.facts { margin: 2rem 0 0; display: grid; gap: 0 }
.facts div { padding: 1rem 0; border-top: 1px solid var(--line) }
.facts dt { display: flex; align-items: center; gap: .5rem; font: 500 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--teal) }
.facts dd { margin: .35rem 0 0; font-size: .98rem }
.prose { font-size: 1.07rem; line-height: 1.85; max-width: 70ch }
.prose > :first-child { margin-top: 0 }
.prose h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 400; margin: 2.8rem 0 1rem }
.prose h3 { font-size: 1.6rem; margin: 2rem 0 .7rem }
.prose ul, .prose ol { padding: 0; margin: 0 0 1.6rem; list-style: none; display: grid; gap: .7rem }
.prose ul li { position: relative; padding-left: 2rem }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .85em; width: 1.1rem; height: 1px; background: var(--teal) }
.prose ol { counter-reset: o }
.prose ol li { counter-increment: o; position: relative; padding-left: 2.6rem }
.prose ol li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--serif); font-style: italic; color: var(--teal) }
.prose strong { font-weight: 500; color: var(--ink) }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 4px }
.prose img { border-radius: var(--r); margin: 2rem 0 }
.prose blockquote { margin: 2rem 0; padding-left: 1.6rem; border-left: 1px solid var(--teal); font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--ink) }
.dropcap > p:first-of-type::first-letter { float: left; font-family: var(--serif); font-weight: 300; font-size: 5.4em; line-height: .78; padding: .1em .12em 0 0; color: var(--teal) }
.highlights { background: var(--paper) }
.hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem }
.hl { position: relative; padding: 2.4rem 2rem; border-radius: var(--r); background: var(--cream); border: 1px solid var(--line); overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), box-shadow .6s, border-color .6s }
.hl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--brand-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .5s }
.hl:hover { box-shadow: 0 30px 60px -40px rgba(10, 25, 26, .5); border-color: color-mix(in oklab, var(--teal) 40%, var(--line)) }
.hl:hover::before { opacity: 1 }
.hl-n { display: block; font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--teal); margin-bottom: 1.6rem; position: relative }
.hl h3 { font-size: 1.55rem; position: relative }
.hl p { color: var(--muted); margin: 0; font-size: .95rem; position: relative }
.strip-sec { padding: 0 0 clamp(4rem, 8vw, 7rem); background: var(--paper); overflow: hidden }
.strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.strip-track { display: flex; gap: 1rem; width: max-content; animation: marquee2 70s linear infinite }
.strip:hover .strip-track { animation-play-state: paused }
.strip-item { width: clamp(220px, 24vw, 360px); flex: none }
.strip-item img { aspect-ratio: 4/5; object-fit: cover }
@keyframes marquee2 { to { translate: -50% 0 } }
.related { background: var(--cream) }
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem) }
.scard-media { position: relative; display: block; aspect-ratio: 4/5; border-radius: 240px 240px var(--r) var(--r); overflow: hidden; background: var(--sand); margin-bottom: 1.5rem }
.scard-media img, .scard-media .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease) }
.scard:hover .scard-media img { transform: scale(1.07) }
.scard-ico { position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--teal) }
.scard h3 { font-size: clamp(1.6rem, 2.3vw, 2rem) }
.scard p:not(.eyebrow) { color: var(--muted); font-size: .95rem }
.scard .eyebrow { margin-bottom: .9rem }
@media (max-width: 1000px) { .hl-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 900px) { .intro-grid, .sgrid { grid-template-columns: 1fr } .intro-aside .sticky { position: static } }
@media (max-width: 560px) { .hl-grid { grid-template-columns: 1fr } }

/* ---------- Services list ---------- */
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; margin-bottom: clamp(6rem, 14vw, 12rem) }
.svc-row:last-child { margin-bottom: 0 }
.svc-row.rev .svc-media { order: 2 }
.svc-media .mask { aspect-ratio: 5/6; border-radius: 30px }
.svc-parallax { display: block; height: 118%; margin-top: -9%; will-change: transform }
.svc-parallax img { width: 100%; height: 100%; object-fit: cover }
.svc-ph { display: grid; place-items: center; height: 100%; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .7), transparent 55%), linear-gradient(150deg, var(--aqua), var(--sand)); color: var(--teal) }
.svc-ph .i { width: 90px; height: 90px; stroke-width: .8 }
.svc-num { display: block; font-family: var(--serif); font-size: clamp(5rem, 10vw, 9rem); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--teal); margin-bottom: 1rem }
.svc-copy .h2 { font-size: clamp(2.2rem, 4vw, 3.6rem) }
.svc-hl { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .6rem }
.svc-hl li { display: flex; gap: .7rem; align-items: center }
.svc-hl .i { color: var(--teal) }
@media (max-width: 900px) { .svc-row { grid-template-columns: 1fr } .svc-row.rev .svc-media { order: 0 } }

/* ---------- Gallery page ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 3.5rem }
.masonry { columns: 3 320px; column-gap: 1.2rem }
.m-item { break-inside: avoid; margin-bottom: 1.2rem }
.m-cap { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; padding: .45rem .85rem; border-radius: 999px; background: color-mix(in oklab, var(--cream) 85%, transparent); color: var(--ink); font-size: .75rem; letter-spacing: .08em; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease) }
.m-item:hover .m-cap { opacity: 1; transform: none }
.insta-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--line) }
.insta-cta .h3 { margin: 0; max-width: 20ch }
.empty { text-align: center; color: var(--muted); padding: 4rem 0 }

/* ---------- About ---------- */
.portrait { aspect-ratio: 4/5; border-radius: 500px 500px var(--r) var(--r) }
.about-story .script { text-align: center; margin-top: 1.5rem }
.big-quote-sec { padding: clamp(6rem, 14vw, 11rem) 0; background: var(--paper) }
.big-quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.25; color: var(--ink); margin: 0 }
.big-quote-sec .quote-mark { color: var(--teal) }
.timeline-sec { background: var(--cream) }
.values { background: var(--paper) }
.hospitals { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line) }
.hospitals .eyebrow { margin: 0 }
.hospitals ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.4rem }
.hospitals li { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.5rem }
.hospitals .i { color: var(--teal) }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start }
.ccards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem }
.ccard { display: grid; gap: .3rem; padding: 1.7rem; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), border-color .4s }
.ccard:hover { border-color: var(--teal) }
.ccard .i { width: 1.8em; height: 1.8em; color: var(--teal); margin-bottom: .8rem }
.ccard small { font: 500 .66rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted) }
.ccard strong { font-weight: 400; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; word-break: break-word }
.hours { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); margin-bottom: 2rem }
.hours .i { color: var(--teal); margin-top: .3rem }
.map { margin-top: clamp(4rem, 8vw, 6rem); border-radius: 30px; overflow: hidden; aspect-ratio: 16/7; background: var(--sand) }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) sepia(.1) }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr } .map { aspect-ratio: 4/3 } }
@media (max-width: 480px) { .ccards { grid-template-columns: 1fr } }

/* ---------- Center pages ---------- */
.center-hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 8rem 0 5rem; background: var(--ink); color: var(--on-dark); overflow: hidden; isolation: isolate }
.center-hero .phero-orbs { z-index: -1 }
.center-hero .display { color: var(--on-dark); margin-inline: auto; max-width: 15ch }
.center-hero .lead { color: var(--on-dark-muted); margin: 1.4rem auto 0 }
.center-hero .script { color: var(--teal-l) }
.huge-404 { font-family: var(--serif); font-size: clamp(8rem, 26vw, 20rem); line-height: .8; margin: 0 0 1rem; color: transparent; -webkit-text-stroke: 1px rgba(245, 240, 233, .35) }
.big-ico { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.5rem; border: 1px solid var(--teal-l); color: var(--teal-l) }
.big-ico .i { width: 40px; height: 40px }

/* ---------- Lightbox ---------- */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; display: none; place-items: center }
.lb[open] { display: grid }
.lb::backdrop { background: color-mix(in oklab, var(--ink) 95%, black); backdrop-filter: blur(6px) }
.lb figure { margin: 0; display: grid; justify-items: center; gap: 1rem }
.lb img { max-width: 88vw; max-height: 82dvh; border-radius: 14px; opacity: 0; transform: scale(.97); transition: opacity .5s, transform .6s var(--ease) }
.lb img.ready { opacity: 1; transform: none }
.lb figcaption { color: var(--on-dark-muted); font-size: .9rem; max-width: 70ch; text-align: center; padding: 0 1rem }
.lb-btn { position: fixed; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--on-dark); display: grid; place-items: center; cursor: pointer; transition: background .3s }
.lb-btn:hover { background: rgba(255, 255, 255, .18) }
.lb-close { top: 1.5rem; right: 1.5rem }
.lb-prev { left: 1.5rem; top: 50% }
.lb-next { right: 1.5rem; top: 50% }
.lb-open { overflow: hidden }

/* ---------- Floating actions ---------- */
.fab-wa { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 80; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 16px 34px -12px rgba(37, 211, 102, .6); transition: transform .4s var(--ease) }
.fab-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ping 2.6s infinite }
.fab-wa .i { width: 30px; height: 30px }
@keyframes ping { to { transform: scale(1.8); opacity: 0 } }
.to-top { position: fixed; right: calc(1.4rem + 5px); bottom: calc(1.4rem + 76px); z-index: 80; width: 50px; height: 50px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink); background: conic-gradient(var(--teal) calc(var(--pct, 0) * 1%), color-mix(in oklab, var(--ink) 14%, transparent) 0); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease) }
.to-top::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cream) }
.to-top .i { position: relative; width: 20px; height: 20px }
.to-top.show { opacity: 1; transform: none; pointer-events: auto }
.menu-open .fab-wa, .menu-open .to-top { opacity: 0; pointer-events: none }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .js [data-split] .w > span, .js [data-fade], .js .reveal, .js [data-reveal], .js [data-reveal] img { transform: none !important; opacity: 1 !important; clip-path: none !important }
  .mw { opacity: 1 }
  .hero-media, .phero-media, .hero-content, .phero-content { transform: none !important; opacity: 1 !important }
  .vbreak { height: auto } .vbreak-sticky { position: relative; --c: 0 } .vbreak-lines span { opacity: 1 !important; transform: none !important }
  .grain, .loader { display: none }
}