/* ==========================================================================
   The Unknown Advantage
   Keyhole black, gold leaf and report-paper linen. Castoro for display, Jost for text.
   Base styles are the complete static page (no JS, reduced motion). Everything under
   .motion is the scroll-driven layer, switched on by the inline script in <head>.
   ========================================================================== */

@font-face { font-family: 'Castoro'; src: url('../fonts/castoro-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Castoro'; src: url('../fonts/castoro-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-italic-var.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  --ink: #0b0a08;
  --ink-2: #231d16;   /* lifted at launch so ink and ink-2 bands read as different blocks (site-qa section-bg-repeat) */
  --ink-3: #2c251c;
  --gold: #c9a45c;
  --gold-hi: #ead095;
  --gold-lo: #8a6a32;
  --gold-ink: #74561f;
  --linen: #f0e9dc;
  --linen-2: #e8dfce;
  --text: #efe8da;
  --muted: #b5aa95;
  --ink-text: #17130e;
  --ink-muted: #5c5243;
  --line: rgba(201, 164, 92, .26);
  --line-soft: rgba(239, 232, 218, .12);
  --serif: 'Castoro', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(20px, 4.4vw, 72px);
  --maxw: 1440px;
  --header-h: 84px;
  --sec-pad: clamp(72px, 7.2vw, 116px);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --foil: linear-gradient(135deg, #f1dca6 0%, #d8b56e 28%, #b88f45 58%, #e3c888 100%);
  --keyhole: polygon(41.33% 59.80%, 39.72% 58.57%, 38.30% 57.14%, 37.12% 55.55%, 36.18% 53.81%, 35.51% 51.96%, 35.12% 50.05%, 35.02% 48.10%, 35.21% 46.16%, 35.69% 44.26%, 36.45% 42.45%, 37.47% 40.75%, 38.74% 39.20%, 40.22% 37.84%, 41.89% 36.68%, 43.71% 35.76%, 45.66% 35.08%, 47.69% 34.67%, 49.76% 34.53%, 51.83% 34.66%, 53.86% 35.06%, 55.81% 35.73%, 57.64% 36.64%, 59.31% 37.79%, 60.80% 39.15%, 62.08% 40.69%, 63.11% 42.38%, 63.88% 44.19%, 64.37% 46.08%, 64.57% 48.02%, 64.48% 49.97%, 64.11% 51.89%, 63.45% 53.74%, 62.52% 55.48%, 61.34% 57.08%, 59.94% 58.52%, 58.33% 59.75%, 61.98% 100%, 40.72% 100%);
}
@media (max-width: 760px) { :root { --header-h: 68px; } }
@media (min-width: 1100px) and (max-height: 820px) { :root { --sec-pad: clamp(56px, 5.6vw, 88px); } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* velvet grain over the whole page; ignored by the pointer */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url('../img/grain.svg');
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 14px 20px; background: var(--gold); color: var(--ink); font-weight: 500; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- type */
.h2 {
  font: 400 clamp(2rem, 1.1rem + 2.55vw, 3.55rem)/1.08 var(--serif);
  letter-spacing: -.01em; margin: 0 0 .42em; display: flow-root;
}
.h2 em, .hero__title em { font-style: italic; color: var(--gold); }
.lede { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: var(--muted); }
.sec-head { margin-bottom: clamp(30px, 3.6vw, 54px); }

/* SplitText line masks: padding keeps descenders and italic tails inside the mask; the negative
   margins (all on the bottom) keep the heading exactly the height it has without the split */
.line-mask { display: block; padding: .2em .15em .3em; margin: 0 -.15em -.5em; }
.line-mask:first-child { margin-top: -.2em; }
.line-mask:last-child { margin-bottom: -.3em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 30px; border-radius: 2px; overflow: hidden; isolation: isolate;
  font: 500 .98rem/1.1 var(--sans); letter-spacing: .03em; white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn span { position: relative; z-index: 2; }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: .94rem; }
.btn--gold { background-color: #c9a45c; background-image: var(--foil); color: #1a140b; box-shadow: 0 10px 30px -12px rgba(201, 164, 92, .55); }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 250, 235, .75) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--gold:hover::after, .btn--gold:focus-visible::after { transform: translateX(120%); }
.btn--gold:hover { box-shadow: 0 16px 40px -12px rgba(201, 164, 92, .7); }
.btn--ghost { border: 1px solid rgba(201, 164, 92, .6); color: var(--text); }
.btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: #c9a45c; background-image: var(--foil); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #1a140b; border-color: var(--gold); }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: scaleY(1); }
.btn--dark { background-color: var(--ink); color: var(--text); }
.btn--dark::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: #c9a45c; background-image: var(--foil); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
.btn--dark:hover, .btn--dark:focus-visible { color: #1a140b; }
.btn--dark:hover::before, .btn--dark:focus-visible::before { transform: scaleX(1); }

/* ================================================================ HEADER */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
}
.site-header.is-scrolled, .site-header.is-menu {
  background-color: rgba(11, 10, 8, .88); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.brand { display: flex; align-items: center; min-height: 48px; flex: none; }
.brand__logo { height: 56px; width: auto; }   /* the file has a 4% transparent margin (site-qa logo-clip) */
.nav { margin-left: auto; }
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(8px, 1.3vw, 26px); }
.nav__item { position: relative; }
.nav__link, .nav__trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 4px;
  font: 500 .95rem/1 var(--sans); letter-spacing: .03em; color: var(--text); white-space: nowrap;
}
.nav__link::after, .nav__trigger::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 10px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__trigger:hover::after, .nav__item.is-open .nav__trigger::after { transform: scaleX(1); }
.nav__trigger::before {
  content: ""; width: 12px; height: 12px; flex: none; background-color: var(--gold); transition: transform .4s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  order: 2;
}
.nav__item.is-open .nav__trigger::before { transform: rotate(180deg); }
.site-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* the menu waits for the web fonts (preloaded, so usually instant; 2.5 s at most), so it never jumps sideways */
.js .nav, .js .header-cta { opacity: 0; }
.js .nav { transition: opacity .45s var(--ease); }
.fonts-in .nav, .fonts-in .header-cta { opacity: 1; }

/* dropdown panels: the transparent top padding bridges the gap from trigger to panel */
.nav__panel {
  position: absolute; top: 100%; left: 50%; padding-top: 12px; z-index: 5;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .25s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.nav__item.is-open .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity .25s var(--ease), transform .4s var(--ease), visibility 0s linear 0s;
}
.dd {
  list-style: none; background: var(--ink-2); border: 1px solid var(--line); border-top: 2px solid var(--gold);
  box-shadow: 0 36px 70px -24px rgba(0, 0, 0, .85); padding: 10px;
}
.dd__list { list-style: none; }
.dd--media { display: grid; grid-template-columns: auto 172px; gap: 10px; align-items: stretch; }
.dd__link { display: block; padding: 12px 16px; border-radius: 2px; transition: background-color .25s; white-space: nowrap; }
.dd__link:hover, .dd__link:focus-visible, .dd__link.is-active { background-color: rgba(201, 164, 92, .09); }
.dd__title { display: block; font: 400 1.1rem/1.3 var(--serif); color: var(--text); }
.dd__desc { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.dd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; }
.dd__price { font: 400 1.02rem/1 var(--serif); color: var(--gold); }
.dd--prices { min-width: 340px; }
.dd__all { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.dd__link--all .dd__title { font: 500 .9rem/1.3 var(--sans); letter-spacing: .04em; color: var(--gold); }
.dd__preview { position: relative; overflow: hidden; background: var(--ink-3); min-height: 200px; }
.dd__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .5s var(--ease), transform .9s var(--ease); }
.dd__img.is-on { opacity: 1; transform: none; }
/* items slide in when a panel opens */
.dd__list > li { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.nav__item.is-open .dd__list > li { opacity: 1; transform: none; }
.nav__item.is-open .dd__list > li:nth-child(2) { transition-delay: .04s; }
.nav__item.is-open .dd__list > li:nth-child(3) { transition-delay: .08s; }
.nav__item.is-open .dd__list > li:nth-child(4) { transition-delay: .12s; }
.nav__item.is-open .dd__list > li:nth-child(5) { transition-delay: .16s; }

/* burger (hidden on wide screens) */
.burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid rgba(201, 164, 92, .5); border-radius: 50%; }
.burger__bars { position: relative; width: 20px; height: 10px; }
.burger__bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--text); transition: transform .45s var(--ease), top .45s var(--ease); }
.burger__bars i:first-child { top: 0; }
.burger__bars i:last-child { top: 8.5px; }
.burger[aria-expanded="true"] .burger__bars i:first-child { top: 4.25px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:last-child { top: 4.25px; transform: rotate(-45deg); }

/* mobile menu: a circle opening out of the burger */
.mobile-menu {
  position: fixed; inset: 0; z-index: 55; background: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 18px) var(--gutter) 36px;
  visibility: hidden; clip-path: circle(0% at calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2));
  transition: clip-path .7s var(--ease), visibility 0s linear .7s;
}
.mobile-menu.is-open { visibility: visible; clip-path: circle(150% at calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2)); transition: clip-path .7s var(--ease), visibility 0s linear 0s; }
.mobile-menu__inner { display: flex; flex-direction: column; min-height: 100%; }
.mm__list { list-style: none; }
.mm__item { border-bottom: 1px solid var(--line-soft); }
.mm__link, .mm__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 60px;
  font: 400 clamp(1.6rem, 6vw, 2.2rem)/1.2 var(--serif); color: var(--text); text-align: left;
}
.mm__plus { width: 18px; height: 18px; color: var(--gold); transition: transform .45s var(--ease); flex: none; }
.mm__toggle[aria-expanded="true"] .mm__plus { transform: rotate(45deg); }
.mm__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.mm__panel.is-open { grid-template-rows: 1fr; }
.mm__sub { list-style: none; overflow: hidden; min-height: 0; }
.mm__sub li:last-child { padding-bottom: 14px; }
.mm__sub a { display: flex; align-items: center; min-height: 44px; padding-left: 4px; font-size: 1.06rem; color: var(--muted); }
.mm__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; }
.mm__contact { display: flex; align-items: center; min-height: 44px; color: var(--gold-hi); font-size: 1rem; overflow-wrap: anywhere; }
.mobile-menu .mm__item, .mobile-menu .mm__foot { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.mobile-menu.is-open .mm__item, .mobile-menu.is-open .mm__foot { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .05s); }

@media (max-width: 1239px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .site-header__actions { margin-left: auto; }
}
@media (max-width: 760px) {
  .brand__logo { height: 41px; }
  .header-cta { display: none; }
}

/* ================================================================ HERO (static layout) */
.hero { position: relative; background: var(--ink); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 48% 62% at 76% 52%, rgba(201, 164, 92, .16), rgba(201, 164, 92, 0) 70%),
              radial-gradient(ellipse 80% 60% at 20% 110%, rgba(116, 86, 31, .18), transparent 70%);
}
.hero__stage { position: relative; display: grid; grid-template-areas: "inner" "statement"; }
.hero__inner {
  grid-area: inner; position: relative; z-index: 3; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 5vw, 96px);
  padding: calc(var(--header-h) + clamp(24px, 5vh, 64px)) 0 clamp(56px, 9vh, 104px);
}
/* who she is, in seconds: name, tagline, role */
.hero__brand { display: grid; justify-items: start; gap: .3em; margin: 0 0 clamp(22px, 3.6vh, 42px); }
.hero__name { font: 400 clamp(1.4rem, 1rem + .95vw, 2rem)/1.12 var(--serif); letter-spacing: .005em; color: var(--text); }
.hero__tagline { font: italic 400 clamp(1.1rem, .94rem + .5vw, 1.45rem)/1.25 var(--serif); color: var(--gold-hi); }
.hero__role {
  display: flex; align-items: center; gap: 14px; margin-top: .7em;
  font: 500 clamp(.74rem, .69rem + .16vw, .84rem)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.hero__role::before { content: ""; flex: none; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.hero__title {
  font: 400 clamp(2.25rem, 1rem + 3.2vw, 4.4rem)/1.04 var(--serif);
  letter-spacing: -.014em; margin: 0 0 .42em; display: flow-root;
}
.hero__lede { font-size: clamp(1.05rem, .96rem + .34vw, 1.22rem); line-height: 1.62; color: var(--muted); margin: 0 0 1.9em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__mark-slot { position: relative; height: min(62vh, 580px); aspect-ratio: 1100 / 1171; }
.hero__mark { position: absolute; inset: 0; transform-origin: 49.8% 48.41%; }
.hero__mark-art {
  position: absolute; inset: 0; z-index: 2; transform-origin: 49.8% 48.41%;
  background: url('../img/logo-mark-1100.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .65));
}
@media (max-width: 1099px) { .hero__mark-art { background-image: url('../img/logo-mark-720.webp'); } }
/* static: warm light glowing through the keyhole, pooling on the floor like the logo */
.hero__mark::before {
  content: ""; position: absolute; inset: 0; z-index: 1; clip-path: var(--keyhole);
  background: radial-gradient(ellipse 14% 26% at 50% 78%, #fff3d0 0%, #f0c979 30%, #a47631 64%, #2a1d0d 100%);
}
.hero__mark::after {
  content: ""; position: absolute; left: 50%; top: 88%; width: 70%; height: 36%; z-index: 0; pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 30%, rgba(240, 201, 121, .42), rgba(201, 164, 92, .12) 45%, transparent 72%);
  filter: blur(4px);
}
.hero__sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 220, .9) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url('../img/logo-mark-720.webp') center / 100% 100% no-repeat; mask: url('../img/logo-mark-720.webp') center / 100% 100% no-repeat;
}
.hero__veil { display: none; }
.hero__scene { grid-area: statement; position: relative; min-height: clamp(460px, 78vh, 820px); overflow: hidden; }
.hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { display: none; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 10, 8, .94) 0%, rgba(11, 10, 8, .62) 42%, rgba(11, 10, 8, .12) 100%); }
.hero__statement { grid-area: statement; position: relative; z-index: 2; align-self: end; padding: clamp(40px, 9vh, 104px) 0; }
.statement__big { font: 400 clamp(1.55rem, .9rem + 2.15vw, 3.05rem)/1.24 var(--serif); letter-spacing: -.005em; margin: 0 0 .75em; }
.motion .statement__big {
  --fill: 0%;
  background-image: linear-gradient(100deg, var(--text) 0%, var(--text) var(--fill), rgba(239, 232, 218, .34) calc(var(--fill) + 14%), rgba(239, 232, 218, .34) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statement__small { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--gold-hi); }
.hero__cue { display: none; }

@media (max-width: 1099px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: center; padding-top: calc(var(--header-h) + 16px); }
  .hero__mark-slot { order: -1; height: clamp(170px, 26svh, 280px); justify-self: center; }
  .br-wide { display: none; }
}
@media (max-width: 600px) {
  .hero__lede { font-size: 1rem; margin-bottom: 1.5em; }
  .hero__actions .btn { flex: 1 1 100%; min-height: 50px; }
  /* room for the name and tagline: a smaller A above them, and the role kept to one line */
  .hero__mark-slot { height: clamp(104px, 15svh, 180px); }
  .hero__inner { padding-bottom: clamp(48px, 7svh, 72px); }
  .hero__brand { margin-bottom: 20px; }
  .hero__role { gap: 10px; font-size: .7rem; letter-spacing: .1em; }
  .hero__role::before { width: 22px; }
}
@media (max-width: 600px) and (max-height: 720px) {
  .hero__inner { gap: 12px; }
  .hero__mark-slot { height: 88px; }
  .hero__title { font-size: 2rem; }
}

/* ================================================================ SERVICES */
.services { position: relative; background: var(--ink-2); padding-top: var(--sec-pad); overflow: clip; }
.services::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(201, 164, 92, .10), transparent 70%);
}
.services .wrap { position: relative; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.svc-card { position: relative; height: clamp(400px, 52vh, 560px); overflow: hidden; background: var(--ink-3); isolation: isolate; box-shadow: inset 0 0 0 1px var(--line-soft); }
.svc-card__media { position: absolute; inset: 0; z-index: -1; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(11, 10, 8, .95) 0%, rgba(11, 10, 8, .66) 36%, rgba(11, 10, 8, .05) 70%); }
.svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 40%), rgba(255, 236, 190, .10) 0%, rgba(11, 10, 8, 0) 45%, rgba(11, 10, 8, .5) 100%);
}
.svc-card:hover::after { opacity: 1; }
.svc-card:hover .svc-card__media img { transform: scale(1.07); }
.svc-card__frame { position: absolute; inset: 12px; z-index: 1; border: 1px solid rgba(201, 164, 92, 0); transition: border-color .6s var(--ease), inset .6s var(--ease); pointer-events: none; }
.svc-card:hover .svc-card__frame { border-color: rgba(201, 164, 92, .55); inset: 16px; }
.svc-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(22px, 2.2vw, 36px); }
.svc-card__title { font: 400 clamp(1.45rem, 1.1rem + .8vw, 1.95rem)/1.15 var(--serif); margin: 0 0 .4em; }
.svc-card__link { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--text); }
.svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.svc-card__text { color: rgba(239, 232, 218, .84); font-size: 1rem; line-height: 1.55; margin: 0 0 1.1em; }
.svc-card__more { display: inline-flex; align-items: center; gap: .7em; color: var(--gold-hi); font-weight: 500; font-size: .94rem; letter-spacing: .04em; }
.svc-card__more svg { width: 22px; transition: transform .5s var(--ease); }
.svc-card:hover .svc-card__more svg { transform: translateX(6px); }

.marquee { position: relative; margin-top: clamp(40px, 4.2vw, 68px); border-block: 1px solid var(--line); overflow: hidden; background: transparent; }
.marquee__track { display: flex; width: max-content; padding: 18px 0; }
.marquee__set { display: flex; align-items: center; white-space: nowrap; font: 400 clamp(1.35rem, 1rem + 1.1vw, 2.1rem)/1 var(--serif); color: var(--text); }
.marquee__set i {
  display: inline-block; width: 12px; height: 18px; margin: 0 clamp(22px, 2.6vw, 44px); background: var(--gold);
  clip-path: polygon(50% 0, 78% 12%, 86% 36%, 70% 58%, 88% 100%, 12% 100%, 30% 58%, 14% 36%, 22% 12%);
}

@media (max-width: 960px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-card { height: clamp(380px, 62svh, 520px); }
}

/* ================================================================ JOURNEY (static: a grid of stages) */
.journey { position: relative; background: var(--ink); padding: var(--sec-pad) 0; overflow: clip; }
.journey::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 10% 100%, rgba(201, 164, 92, .08), transparent 70%); }
.journey__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.journey__heading { flex: 1 1 auto; min-width: 0; }
.journey__heading .h2 { margin-bottom: .3em; }
.journey__intro { color: var(--muted); font-size: clamp(1.02rem, .98rem + .2vw, 1.14rem); }
.journey__progress { display: none; flex: none; align-items: center; gap: 18px; padding-bottom: 8px; }
.journey__count { font: 400 1.1rem/1 var(--serif); color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.journey__count b { font-weight: 400; font-size: 2rem; color: var(--gold-hi); min-width: 1.6em; }
.journey__bar { position: relative; width: clamp(120px, 14vw, 220px); height: 1px; background: var(--line-soft); }
.journey__bar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(.1667); transform-origin: 0 50%; }
.journey__track {
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 32px); width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto;
}
.stage { position: relative; }
.stage__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.stage__media img { width: 100%; height: 100%; object-fit: cover; }
.stage__media::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(234, 208, 149, .28); pointer-events: none; }
.stage__body { position: relative; padding: 20px 8px 0 0; }
.stage__num { position: relative; z-index: 2; display: inline-block; margin: 0 0 8px; padding-right: 12px; background: var(--ink); font: italic 400 1.15rem/1 var(--serif); color: var(--gold); }
.stage__title { font: 400 clamp(1.4rem, 1.1rem + .7vw, 1.8rem)/1.2 var(--serif); margin: 0 0 .35em; }
.stage__text { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.journey__thread { display: none; }
@media (max-width: 1100px) { .journey__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .journey__track { grid-template-columns: minmax(0, 1fr); } .journey__head { display: block; } }

/* ================================================================ WHY (linen) */
.why { position: relative; background: var(--linen); color: var(--ink-text); padding: var(--sec-pad) 0; overflow: clip; }
.why::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(201, 164, 92, .16), transparent 70%); }
.why__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(40px, 5vw, 100px); align-items: center; }
.why__copy > p { color: var(--ink-muted); margin-bottom: 1em; }
.why__pledge { margin-top: 1.4em; padding-left: 20px; border-left: 2px solid var(--gold); font: italic 400 clamp(1.15rem, 1.05rem + .35vw, 1.35rem)/1.45 var(--serif); color: var(--ink-text) !important; }
.compare { position: relative; }
.compare::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); pointer-events: none; }
.compare__frame {
  --pos: 50%; position: relative; aspect-ratio: 16 / 9; max-height: 78vh; overflow: hidden; background: var(--linen-2);
  box-shadow: 0 40px 80px -36px rgba(23, 19, 14, .55); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare__notes { list-style: none; position: absolute; inset: 0; }
.compare__notes li {
  position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; font-size: 0;
  border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 5px rgba(234, 208, 149, .28), 0 4px 12px rgba(0, 0, 0, .4);
}
.compare__notes li::after {
  content: attr(data-label); position: absolute; left: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 7px 12px; background: rgba(11, 10, 8, .86); color: var(--text); font: 500 .875rem/1 var(--sans); letter-spacing: .02em;
  border-left: 2px solid var(--gold);
}
.compare__notes li.is-left::after { left: auto; right: 24px; border-left: 0; border-right: 2px solid var(--gold); }
.compare__tag { position: absolute; top: 16px; z-index: 2; padding: 8px 14px; background: rgba(11, 10, 8, .8); color: var(--text); font: 500 .875rem/1.2 var(--sans); letter-spacing: .02em; transition: opacity .35s; }
.compare__tag--before { left: 16px; }
.compare__tag--after { right: 16px; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 48px; margin-left: -24px; cursor: ew-resize; outline: none; }
.compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--gold-hi); box-shadow: 0 0 18px rgba(0, 0, 0, .35); }
.compare__knob {
  position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--gold-hi); border: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .4s var(--ease);
}
.compare__knob svg { width: 24px; }
.compare__handle:hover .compare__knob, .compare__handle:focus-visible .compare__knob, .compare.is-drag .compare__knob { transform: scale(1.1); }
.compare__handle:focus-visible .compare__knob { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.compare__caption { margin-top: 22px; color: var(--ink-muted); font-size: .95rem; }
@media (max-width: 960px) { .why__grid { grid-template-columns: minmax(0, 1fr); } .compare::before { inset: 12px -10px -12px 10px; } }
@media (max-width: 760px) { .compare__frame { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .compare__notes li::after { display: none; } .compare__tag { font-size: .875rem; padding: 6px 10px; top: 10px; } .compare__tag--before { left: 10px; } .compare__tag--after { right: 10px; } }

/* ================================================================ PACKAGES */
.packages { position: relative; padding: var(--sec-pad) 0; background: var(--ink); overflow: clip; isolation: isolate; }
.packages__bg { position: absolute; inset: 0; z-index: -1; }
.packages__bg img { width: 100%; height: 115%; object-fit: cover; opacity: .62; }
.packages__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 8, .88) 0%, rgba(11, 10, 8, .55) 45%, rgba(11, 10, 8, .9) 100%); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); align-items: stretch; perspective: 1400px; }
.pkg {
  position: relative; background-image: linear-gradient(180deg, rgba(30, 25, 18, .94), rgba(17, 14, 10, .96));
  border: 1px solid var(--line); transform-style: preserve-3d; will-change: transform;
}
.pkg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(circle 280px at var(--gx, 50%) var(--gy, 0%), rgba(234, 208, 149, .16), transparent 70%);
}
.pkg:hover::after { opacity: 1; }
.pkg--feature { border-color: rgba(201, 164, 92, .85); background-image: linear-gradient(180deg, rgba(48, 38, 22, .96), rgba(20, 16, 11, .97)); box-shadow: 0 40px 80px -40px rgba(201, 164, 92, .35); }
.pkg__inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 40px); }
.pkg__tag { position: absolute; top: -1px; right: clamp(20px, 2vw, 32px); padding: 7px 12px 6px; background-color: #c9a45c; background-image: var(--foil); color: #1a140b; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pkg__name { font: 400 clamp(1.5rem, 1.15rem + .8vw, 2rem)/1.15 var(--serif); margin: 0 0 .45em; }
.pkg__desc { color: var(--muted); font-size: .98rem; line-height: 1.55; margin: 0 0 1.2em; }
.pkg__price { display: flex; align-items: baseline; margin: auto 0 1.1em; font-family: var(--serif); color: var(--gold-hi); line-height: 1; }
.pkg__cur { font-size: 1.7rem; align-self: flex-start; margin: .25em .06em 0 0; }
.pkg__num { font-size: clamp(3rem, 2.2rem + 2vw, 4.3rem); font-variant-numeric: lining-nums tabular-nums; }
.pkg__per { margin-left: 12px; font: 400 .95rem/1 var(--sans); color: var(--muted); }
.pkg__list { list-style: none; display: grid; gap: 11px; margin: 0 0 1.7em; padding-top: 1.2em; border-top: 1px solid var(--line-soft); }
.pkg__list li { position: relative; padding-left: 28px; font-size: .98rem; line-height: 1.45; }
.pkg__list li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 14px; height: 14px; border: 1px solid var(--gold); border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px);
}
.pkg__btn { width: 100%; }
.expenses { margin-top: clamp(18px, 2vw, 28px); border: 1px solid var(--line); background: rgba(19, 16, 12, .92); }
.expenses__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 0 clamp(20px, 2.4vw, 36px); font: 400 clamp(1.08rem, 1rem + .3vw, 1.25rem)/1.3 var(--serif); text-align: left; }
.expenses__icon { width: 18px; height: 18px; color: var(--gold); flex: none; transition: transform .45s var(--ease); }
.expenses__toggle[aria-expanded="true"] .expenses__icon { transform: rotate(45deg); }
.js .expenses__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.js .expenses__panel.is-open { grid-template-rows: 1fr; }
.expenses__inner {
  overflow: hidden; min-height: 0; padding-inline: clamp(20px, 2.4vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 56px);
}
.expenses__col > p { color: var(--muted); font-size: 1rem; }
.expenses__col > p:first-child { padding-top: 4px; margin-bottom: .9em; }
.expenses__col > p:last-child { padding-bottom: 26px; }
.expenses__list { list-style: none; display: grid; gap: 10px 32px; margin-block: 4px 26px; align-content: start; }
@media (max-width: 760px) { .expenses__inner { grid-template-columns: minmax(0, 1fr); } .expenses__col > p:last-child { padding-bottom: 8px; } }
.expenses__list li { position: relative; padding-left: 20px; font-size: 1rem; }
.expenses__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--gold); }
@media (max-width: 960px) { .pkg-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

/* ================================================================ MEET TANYA (linen) */
.tanya { position: relative; background: var(--linen-2); color: var(--ink-text); padding: var(--sec-pad) 0; overflow: clip; }
.tanya::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 65% at 0% 100%, rgba(201, 164, 92, .18), transparent 70%); }
.tanya__grid { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(48px, 6.5vw, 128px); align-items: center; }
.tanya__portrait { position: relative; height: clamp(420px, 68vh, 640px); aspect-ratio: 400 / 520; }
.tanya__outline { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate(20px, 20px); color: var(--gold); overflow: visible; }
.tanya__arch { position: absolute; inset: 0; overflow: hidden; border-radius: 50% 50% 0 0 / 38.46% 38.46% 0 0; background: var(--ink-3); }
.tanya__arch img { width: 100%; height: 110%; object-fit: cover; }
.tanya__copy .h2 { color: var(--ink-text); margin-bottom: .2em; }
.tanya__role { font: italic 400 clamp(1.15rem, 1.05rem + .4vw, 1.4rem)/1.3 var(--serif); color: var(--gold-ink); margin: 0 0 1.3em; }
.tanya__copy > p:not(.tanya__role) { color: var(--ink-muted); margin-bottom: 1em; }
.tanya__aim {
  margin: 1.3em 0 1.2em; padding-left: 20px; border-left: 2px solid var(--gold);
  font: italic 400 clamp(1.15rem, 1.05rem + .35vw, 1.35rem)/1.45 var(--serif); color: var(--ink-text) !important;
}
.tanya__copy .btn { margin-top: 1.2em; }
@media (max-width: 900px) {
  .tanya__grid { grid-template-columns: minmax(0, 1fr); }
  .tanya__portrait { height: auto; width: min(82vw, 420px); justify-self: center; margin-bottom: 20px; }
}

/* ================================================================ CONFIDENTIALITY */
.confide { position: relative; background: var(--ink); padding: var(--sec-pad) 0; overflow: clip; }
.confide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 90% 50%, rgba(201, 164, 92, .12), transparent 70%); }
.confide__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 120px); align-items: center; }
.confide__copy > p { color: var(--muted); margin-bottom: 1em; }
/* Each promise is uncovered by a gold bar that travels across it: the words appear behind the bar as it passes,
   so nothing ever sits blacked out while the section scrolls in. Static and reduced motion show plain text. */
.redact { position: relative; display: inline-block; }
.redact > span { display: inline-block; }
.pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.pillar__icon { width: 40px; height: 40px; color: var(--gold); margin-bottom: 14px; }
.pillar__title { font: 400 1.35rem/1.2 var(--serif); margin: 0 0 .3em; }
.pillar__text { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.confide__media { position: relative; height: clamp(400px, 66vh, 620px); aspect-ratio: 4 / 5; }
.confide__frame { position: absolute; inset: 0; overflow: hidden; background: var(--ink-3); }
.confide__frame img { width: 100%; height: 110%; object-fit: cover; }
.confide__frame::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(234, 208, 149, .4); pointer-events: none; }
.confide__media::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid var(--line); pointer-events: none; }
@media (max-width: 1100px) {
  .confide__grid { grid-template-columns: minmax(0, 1fr); }
  .confide__media { height: auto; width: min(82vw, 440px); justify-self: center; order: -1; margin: 18px 0 12px; }
}
@media (max-width: 1100px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ CONTACT */
.contact { position: relative; padding: var(--sec-pad) 0; background: var(--ink-2); overflow: clip; isolation: isolate; }
.contact__bg { position: absolute; inset: 0; z-index: -1; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35, 29, 22, .95) 0%, rgba(35, 29, 22, .8) 45%, rgba(35, 29, 22, .55) 100%); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.contact__sub { font: italic 400 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1.3 var(--serif); color: var(--gold-hi); margin: -.1em 0 .9em; }
.contact__copy > p:not(.contact__sub) { color: var(--muted); }
.steps { list-style: none; display: grid; gap: 12px; margin: 1.6em 0; }
.steps li { display: flex; align-items: center; gap: 16px; font-size: 1.04rem; }
.steps__n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font: 400 1.05rem/1 var(--serif); color: var(--gold-hi); }
.direct { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 44px; padding-top: 1.4em; border-top: 1px solid var(--line); }
.direct__label { display: block; font: 500 .82rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.direct a { font: 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.4 var(--serif); color: var(--text); overflow-wrap: anywhere; transition: color .3s; }
.direct a:hover { color: var(--gold-hi); }
.enquiry { position: relative; background-color: rgba(19, 16, 12, .92); border: 1px solid var(--line); padding: clamp(24px, 2.6vw, 44px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.enquiry__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__label { font: 500 .9rem/1.3 var(--sans); color: var(--muted); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 14px; border-radius: 2px; border: 1px solid rgba(239, 232, 218, .18);
  background-color: rgba(11, 10, 8, .7); color: var(--text); font: 400 1rem/1.4 var(--sans);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23c9a45c' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; }
.field select option { background: var(--ink-2); color: var(--text); }
.field input[type="date"] { color-scheme: dark; appearance: none; -webkit-appearance: none; display: flex; align-items: center; }
.field input[type="date"]::-webkit-calendar-picker-indicator { width: 20px; height: 20px; margin-left: 10px; cursor: pointer; opacity: .8; filter: invert(78%) sepia(38%) saturate(420%) hue-rotate(2deg); }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 164, 92, .2); background-color: rgba(11, 10, 8, .9); }
.field.is-error input, .field.is-error textarea { border-color: #d9826b; }
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.enquiry__note { color: var(--muted); font-size: .95rem; }
.enquiry__book { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(201, 164, 92, .5); text-underline-offset: 4px; }
.enquiry__status { margin-top: 14px; min-height: 1.5em; color: var(--gold-hi); font-size: 1rem; }
.enquiry__status.is-error { color: #e9a08e; }
@media (max-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .enquiry__grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ FOOTER */
.site-footer { position: relative; background: var(--ink); padding: clamp(64px, 7vw, 112px) 0 28px; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.footer__logo { display: block; }
.footer__logo img { width: clamp(230px, 22vw, 330px); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 28px; }
.footer__h { font: 500 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.footer__col ul { list-style: none; display: grid; gap: 9px; }
.footer__col a { color: var(--muted); transition: color .3s; }
.footer__col a:hover { color: var(--text); }
.footer__col--contact li a { overflow-wrap: break-word; font-size: .97rem; }
.footer__col--contact .btn { margin-top: 18px; }
.footer__rule { display: flex; align-items: center; gap: 18px; margin: clamp(44px, 5vw, 76px) 0 22px; color: var(--gold); }
.footer__rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 40%, var(--line)); }
.footer__rule span:last-child { background: linear-gradient(90deg, var(--line), var(--line) 60%, transparent); }
.footer__rule svg { width: 14px; height: 20px; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; color: var(--muted); font-size: .9rem; }
.footer__dot { display: inline-block; width: 4px; height: 4px; margin: 0 10px 3px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.footer__links { display: flex; gap: 22px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__links a, .footer__credit a { color: var(--text); transition: color .3s; }
.footer__links a:hover, .footer__credit a:hover { color: var(--gold-hi); }
.footer__credit a { border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) { .footer__top { grid-template-columns: minmax(0, 1fr); } .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__cols { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   MOTION LAYER (html.motion). Start states for reveals, and the pinned scenes.
   ========================================================================== */
.motion [data-rise] { opacity: 0; transform: translateY(28px); }
.motion [data-split] { opacity: 0; }
.motion [data-split].is-split { opacity: 1; }
.motion .redact { --p: 0; --b: 0; }
.motion .redact > span { clip-path: inset(-.3em calc((1 - var(--p)) * 100%) -.35em -.08em); }
.motion .redact::after {
  content: ""; position: absolute; top: .04em; bottom: -.02em; left: calc(var(--p) * 100%); width: .32em; z-index: 1;
  transform: translateX(-55%); opacity: var(--b);
  background: linear-gradient(90deg, rgba(201, 164, 92, 0) 0%, var(--gold) 45%, var(--gold-hi) 100%);
  box-shadow: 0 0 22px rgba(234, 208, 149, .45);
}

/* hero: the keyhole zoom */
.motion .hero { height: 100svh; min-height: 620px; }
.motion .hero__stage { display: block; height: 100%; overflow: clip; }
.motion .hero__inner { min-height: 0; height: 100%; }
.motion .hero__scene { position: absolute; inset: 0; min-height: 0; z-index: 1; background: var(--ink-3); }
/* the room behind the door: dim and soft everywhere except through the keyhole (JS cuts the hole) */
.motion .hero__veil {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 10, 8, .93) 0%, rgba(11, 10, 8, .82) 42%, rgba(11, 10, 8, .66) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(.75); backdrop-filter: blur(3px) saturate(.75);
}
@media (max-width: 1099px) { .motion .hero__veil { background: linear-gradient(180deg, rgba(11, 10, 8, .6) 0%, rgba(11, 10, 8, .84) 38%, rgba(11, 10, 8, .92) 100%); } }
.motion .hero__still { transform-origin: 50% 50%; }
.motion .hero__video { display: block; opacity: 0; transition: opacity .6s; transform-origin: 50% 50%; }
.motion .hero__video.is-playing { opacity: 1; }
.motion .hero__shade { opacity: 0; background: radial-gradient(ellipse 96% 86% at 50% 52%, rgba(11, 10, 8, .62), rgba(11, 10, 8, .93)); }
.motion .hero__mark::before { display: none; }
.motion .hero__mark::after { animation: breathe 5.5s ease-in-out infinite; }
.motion .hero__statement { position: absolute; inset: 0; align-self: stretch; z-index: 4; display: flex; align-items: center; padding: var(--header-h) 0 3vh; opacity: 0; transform: translateY(110vh); }
.motion .hero__cue {
  display: flex; align-items: center; gap: 14px; position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%);
  font: 500 .875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.hero__cue-line { position: relative; width: 1px; height: 34px; overflow: hidden; background: var(--line-soft); }
.hero__cue-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold); animation: cue 2.2s var(--ease) infinite; }
/* moved by transform: animating top registers as a layout shift */
@keyframes cue { from { transform: translateY(0); } to { transform: translateY(350%); } }
@keyframes breathe { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.motion .hero__title { opacity: 0; }
.motion .hero__title.is-split { opacity: 1; }
.motion [data-hero-in] { opacity: 0; transform: translateY(24px); }
.motion .hero__brand > span { opacity: 0; transform: translateY(18px); }
.motion .hero__role { --rule: 0; }
.motion .hero__mark-slot { opacity: 0; }
.intro-seen.motion .hero__mark-slot { opacity: 1; }
@media (max-width: 1099px) {
  .motion .hero__cue { bottom: 14px; gap: 10px; font-size: .78rem; letter-spacing: .12em; }
  .motion .hero__cue .hero__cue-line { height: 22px; }
}

/* services */
.motion .svc-card { opacity: 0; transform: translateY(70px); }
.motion .svc-card__media { transform: scale(1.2); }

/* journey: horizontal filmstrip, pinned */
.motion .journey { padding: 0; }
.motion .journey__pin { height: 100svh; min-height: 620px; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 2.4vh) 0 3.6vh; }
.motion .journey__progress { display: flex; }
.motion .journey__viewport { position: relative; overflow-x: clip; }
.motion .journey__track {
  --stage-h: clamp(210px, 43vh, 470px);
  display: flex; gap: clamp(26px, 3vw, 56px); width: max-content; margin: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
}
.motion .stage { flex: none; width: calc(var(--stage-h) * 4 / 3); }
.motion .stage__media { aspect-ratio: auto; height: var(--stage-h); }
.motion .journey__thread {
  --p: 0%; display: block; position: absolute; left: 0; right: 0; top: calc(var(--stage-h) + 20px + .55rem); height: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, var(--gold) 0, var(--gold-hi) var(--p), var(--line-soft) var(--p), var(--line-soft) 100%);
}
@media (max-width: 760px) {
  .motion .journey__track { --stage-h: calc(80vw * .75); gap: 22px; }
  .motion .journey__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
}
.motion .stage__media img { transform: scale(1.12); }

/* why */
.motion .compare { opacity: 0; transform: translateY(50px); }
.motion .compare__notes li { transform: scale(0); transition: transform .5s var(--ease); }
.motion .compare__notes li.is-on { transform: scale(1); }
.compare__notes li::after { opacity: 0; transition: opacity .4s var(--ease) .15s; }
.compare__notes li.is-on::after, .no-js .compare__notes li::after, html:not(.motion) .compare__notes li::after { opacity: 1; }

/* packages */
.motion .pkg { opacity: 0; transform: translateY(80px) rotateX(8deg); }

/* tanya */
.motion .tanya__arch { clip-path: inset(100% 0 0 0); }
.motion .tanya__outline path { stroke-dasharray: 2000; stroke-dashoffset: 2000; }

/* confidentiality */
.motion .confide__frame { clip-path: inset(0 0 100% 0); }
.motion .pillar { opacity: 0; transform: translateY(30px); }

/* contact */
.motion .enquiry { opacity: 0; transform: translateY(50px); }

/* footer */
.motion .footer__logo { opacity: 0; transform: translateY(24px); }

/* reduced motion: nothing moves on its own */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}