/* ==========================================================================
   The Unknown Advantage: inner pages
   Built on the homepage tokens in site.css (ink, gold, linen, Castoro and Jost). Base rules are the complete static
   page for no-JS and reduced motion; everything under .motion is the moving layer, as on the homepage.
   ========================================================================== */

/* ---------------------------------------------------------------- shared */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.band { position: relative; padding: var(--sec-pad) 0; overflow: clip; isolation: isolate; }
.band--ink { background: var(--ink); }
.band--ink2 { background: var(--ink-2); }
.band--linen { background: var(--linen) url('../img/paper.svg'); color: var(--ink-text); }
.band--linen2 { background: var(--linen-2) url('../img/paper.svg'); color: var(--ink-text); }
/* the keyhole outline from the logo, drawn large and faint behind question bands */
.band__motif { position: absolute; right: -4vw; top: 50%; z-index: -1; width: min(34vw, 420px); aspect-ratio: 108 / 238; transform: translateY(-50%) rotate(8deg); background: url('../img/keyhole-ring.svg') center / 100% 100% no-repeat; opacity: .14; pointer-events: none; }
.band--linen .band__motif, .band--linen2 .band__motif { opacity: .22; filter: saturate(.6) brightness(.7); }
@media (max-width: 900px) { .band__motif { width: 60vw; right: -22vw; top: 30%; } }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band--ink::before { background: radial-gradient(ellipse 50% 60% at 8% 100%, rgba(201, 164, 92, .09), transparent 70%); }
.band--ink2::before { background: radial-gradient(ellipse 55% 55% at 92% 0%, rgba(201, 164, 92, .11), transparent 70%); }
.band--linen::before { background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(201, 164, 92, .16), transparent 70%); }
.band--linen2::before { background: radial-gradient(ellipse 55% 65% at 0% 100%, rgba(201, 164, 92, .18), transparent 70%); }
.band--linen p, .band--linen2 p { color: var(--ink-muted); }
.band--linen .h2 em, .band--linen2 .h2 em { color: var(--gold-ink); }
.band p + p { margin-top: 1em; }
.lede--ink { color: var(--ink-muted); }

.eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font: 500 .875rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); }
.band--linen .eyebrow, .band--linen2 .eyebrow { color: var(--gold-ink); }

/* a picture in a frame with an offset gold outline (the homepage's comparison frame) */
.frame { position: relative; }
.frame__pic { position: relative; display: block; overflow: hidden; background: var(--ink-3); }
.frame__pic img { width: 100%; height: 100%; object-fit: cover; }
.frame__pic::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(234, 208, 149, .38); pointer-events: none; }
.frame--offset::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); pointer-events: none; }

/* ================================================================ PAGE HEROES */
.phero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; background: var(--ink); overflow: clip; isolation: isolate; }
.phero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.phero__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 50%); }
.phero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 10, 8, .92) 0%, rgba(11, 10, 8, .78) 36%, rgba(11, 10, 8, .2) 70%, rgba(11, 10, 8, 0) 100%),
              linear-gradient(0deg, rgba(11, 10, 8, .92) 0%, rgba(11, 10, 8, .2) 36%, rgba(11, 10, 8, 0) 60%),
              linear-gradient(180deg, rgba(11, 10, 8, .55) 0%, rgba(11, 10, 8, 0) 22%);
}
.phero__inner { position: relative; padding: calc(var(--header-h) + clamp(40px, 7vh, 96px)) 0 clamp(64px, 11vh, 128px); }
.phero__copy { width: min(100%, 60rem); }
.phero__title {
  font: 400 clamp(2.5rem, 1.1rem + 3.7vw, 5.1rem)/1.04 var(--serif);
  letter-spacing: -.016em; margin: 0 0 .38em; display: flow-root;
}
.phero__title em { font-style: italic; color: var(--gold); }
.phero__lede { font-size: clamp(1.06rem, .98rem + .34vw, 1.26rem); line-height: 1.62; color: rgba(239, 232, 218, .86); margin: 0 0 1.8em; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.phero__aside { margin-top: 1.8em; }
.phero__ring { display: none; }
.phero__cue { display: none; }

.crumbs { margin: 0 0 clamp(18px, 3vh, 30px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; font: 500 .875rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 14px; border-radius: 50%; background: var(--gold); flex: none; }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--muted); transition: color .3s; }
.crumbs a:hover { color: var(--gold-hi); }
.crumbs [aria-current] { color: var(--gold-hi); }

/* typographic hero (FAQs, legal, 404): the gold A floats on the right, lit by a travelling sheen */
.phero--type, .phero--legal { min-height: 100svh; background: radial-gradient(ellipse 60% 70% at 80% 40%, rgba(201, 164, 92, .15), transparent 70%), var(--ink); }
.phero--legal { min-height: min(62svh, 640px); }
.phero--type::after, .phero--legal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(201, 164, 92, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 164, 92, .07) 1px, transparent 1px);
  background-size: 88px 88px; background-position: center;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 70% 40%, #000, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 70% 40%, #000, transparent 75%);
}
.phero__mark {
  position: absolute; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: 9%; z-index: -1;
  height: min(calc(100% - var(--header-h) - 18%), 560px); aspect-ratio: 1100 / 1171;
  background: url('../img/logo-mark-1100.webp') center / 100% 100% no-repeat; opacity: .9;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .65));
}
.phero--legal .phero__mark { height: min(66%, 400px); opacity: .55; }
.phero__sheen {
  position: absolute; inset: 0; 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;
}
.phero--type .phero__copy, .phero--legal .phero__copy { width: min(100%, 58%); }
@media (max-width: 1099px) { .phero--type .phero__copy, .phero--legal .phero__copy { width: 100%; } }
@media (max-width: 1099px) {
  .phero__mark { top: calc(var(--header-h) + 20px); bottom: auto; right: var(--gutter); height: clamp(120px, 22svh, 220px); opacity: .5; }
  .phero--legal .phero__mark { height: clamp(100px, 16svh, 160px); }
}

@media (max-width: 760px) {
  .phero { min-height: 100svh; }
  .phero--legal { min-height: 56svh; }
  .phero__shade { background: linear-gradient(0deg, rgba(11, 10, 8, .97) 0%, rgba(11, 10, 8, .88) 50%, rgba(11, 10, 8, .5) 78%, rgba(11, 10, 8, .55) 100%); }
  .phero__lede { font-size: 1.02rem; }
  .phero__actions .btn { flex: 1 1 100%; }
  .crumbs li { letter-spacing: .1em; }
  .crumbs li + li::before { margin: 0 10px; }
}

/* ================================================================ SERVICE: what it is */
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.intro__copy > p:not(.eyebrow) { color: var(--muted); }
.intro__media .frame__pic { height: min(74vh, 700px); }
@media (max-width: 900px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr); }
  .intro__media { width: min(100% - 18px, 560px); }
  .intro__media .frame__pic { height: auto; aspect-ratio: 4 / 5; max-height: 72svh; }
}

/* ================================================================ SERVICE SET PIECE: the notebook */
.notes__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.notes__key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 1.6em; font-weight: 500; color: var(--ink-text); }
.notes__key li { display: flex; align-items: center; gap: 10px; }
.notes__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.notes__dot--good { background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 164, 92, .2); }
.notes__dot--fix { background: #b0553d; box-shadow: 0 0 0 4px rgba(176, 85, 61, .18); }
.notebook { position: relative; }
.notebook::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: #171410; }
.notebook__page {
  position: relative; padding: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 48px) clamp(30px, 3vw, 46px) clamp(56px, 5.4vw, 86px);
  background-color: #fbf7ee;
  background-image: linear-gradient(90deg, transparent calc(clamp(40px, 4vw, 64px) - 1px), rgba(176, 85, 61, .35) calc(clamp(40px, 4vw, 64px) - 1px), rgba(176, 85, 61, .35) clamp(40px, 4vw, 64px), transparent clamp(40px, 4vw, 64px)),
                    repeating-linear-gradient(180deg, transparent 0, transparent 43px, rgba(90, 110, 140, .16) 43px, rgba(90, 110, 140, .16) 44px);
  box-shadow: 0 40px 80px -36px rgba(23, 19, 14, .5);
}
.notebook__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; font: 500 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted) !important; }
.notebook__clock { font: italic 400 clamp(2rem, 1.4rem + 1.4vw, 2.8rem)/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.notebook__list { list-style: none; display: grid; }
.note { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 14px; align-items: baseline; min-height: 44px; padding: 10px 0 0; position: relative; }
.note time { font: 500 .92rem/1.3 var(--sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.note span { font: italic 400 clamp(1.08rem, 1rem + .35vw, 1.3rem)/1.4 var(--serif); color: #1f2a3d; }
.note::before { content: ""; position: absolute; left: calc(-1 * clamp(34px, 3.4vw, 52px)); top: 1.05em; width: 11px; height: 11px; border-radius: 50%; }
.note--good::before { background: var(--gold); }
.note--fix::before { background: #b0553d; }
.notebook__underline { width: 62%; height: 14px; margin: 16px 0 0 4.9em; color: var(--gold); }
@media (max-width: 900px) { .notes__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .notebook__page { padding: 22px 18px 26px 44px; background-image: linear-gradient(90deg, transparent 31px, rgba(176, 85, 61, .35) 31px, rgba(176, 85, 61, .35) 32px, transparent 32px), repeating-linear-gradient(180deg, transparent 0, transparent 43px, rgba(90, 110, 140, .16) 43px, rgba(90, 110, 140, .16) 44px); }
  .note { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .note::before { left: -28px; top: 1em; width: 9px; height: 9px; }
  .notebook__underline { margin-left: 0; }
}

/* ================================================================ SERVICE SET PIECE: the sort */
.sorter__head { margin-bottom: clamp(28px, 3.4vw, 48px); }
.sorter__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.sorter__col { position: relative; padding: clamp(18px, 2vw, 28px); background: rgba(255, 255, 255, .45); border-top: 3px solid var(--gold); min-height: 100%; }
.sorter__col--fix { border-top-color: #b0553d; }
.sorter__col--gap { border-top-color: var(--ink-text); }
.sorter__title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font: 400 clamp(1.35rem, 1.1rem + .6vw, 1.75rem)/1.2 var(--serif); }
.sorter__count { font: italic 400 1rem/1 var(--serif); color: var(--gold-ink); }
.sorter__list { list-style: none; display: grid; gap: 12px; }
.obs {
  position: relative; padding: 16px 18px 16px 44px; background: #fffdf8; color: var(--ink-text); font-size: 1.02rem; line-height: 1.4;
  box-shadow: 0 1px 0 rgba(23, 19, 14, .06), 0 14px 30px -18px rgba(23, 19, 14, .4);
}
.obs::before { content: ""; position: absolute; left: 18px; top: 1.3em; width: 12px; height: 12px; border-radius: 50%; }
.obs--good::before { background: var(--gold); }
.obs--fix::before { background: #b0553d; }
.obs--gap::before { border: 1.5px solid var(--ink-text); }
@media (max-width: 900px) { .sorter__cols { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ SERVICE SET PIECE: the report page */
.reportp__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.reportp__steps { list-style: none; display: grid; gap: 4px; margin-top: 1.6em; }
.reportp__steps li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(23, 19, 14, .12); font: 400 clamp(1.1rem, 1rem + .35vw, 1.3rem)/1.3 var(--serif); color: var(--ink-text); transition: color .4s var(--ease); }
.reportp__steps li span { font: italic 400 1rem/1 var(--serif); color: var(--gold-ink); }
.paper { position: relative; }
.paper::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--gold); }
.paper__sheet { position: relative; padding: clamp(26px, 3vw, 48px); background: #fffdf8; box-shadow: 0 40px 80px -36px rgba(23, 19, 14, .5); color: var(--ink-text); }
.paper__top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin: 0 0 18px; border-bottom: 2px solid var(--ink-text); font: 500 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted) !important; }
.paper__brand { color: var(--gold-ink); }
.paper__sec + .paper__sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23, 19, 14, .1); }
.paper__h { font: 400 1.3rem/1.2 var(--serif); margin: 0 0 8px; }
.paper__sec p, .paper__sec li { font-size: 1rem; line-height: 1.5; color: var(--ink-muted); }
.paper__sec ul, .paper__sec ol { padding-left: 1.2em; display: grid; gap: 4px; }
.paper__sec ol li::marker { color: var(--gold-ink); font-family: var(--serif); }
.hl { --hl: 1; color: var(--ink-text); background: linear-gradient(transparent 55%, rgba(234, 208, 149, .85) 55%) no-repeat 0 0 / calc(var(--hl) * 100%) 100%; }
@media (max-width: 900px) { .reportp__grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ SERVICE: what you get + package */
.get__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.ticks { list-style: none; display: grid; gap: 18px; margin-top: 1.2em; }
.ticks li { display: flex; gap: 16px; align-items: flex-start; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.45; }
.ticks__icon { width: 26px; height: 26px; flex: none; color: var(--gold); margin-top: 1px; }
.fitcard {
  position: relative; padding: clamp(26px, 3vw, 48px); border: 1px solid rgba(201, 164, 92, .7);
  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);
}
.fitcard__label { font: 500 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.fitcard__name { font: 400 clamp(1.6rem, 1.2rem + .9vw, 2.2rem)/1.15 var(--serif); margin: 0 0 12px; }
.fitcard__price { display: flex; align-items: baseline; font: 400 clamp(3rem, 2.2rem + 2vw, 4.2rem)/1 var(--serif); color: var(--gold-hi); margin: 0 0 18px; }
.fitcard__cur { font-size: .45em; align-self: flex-start; margin: .2em .06em 0 0; }
.fitcard__per { margin-left: 12px; font: 400 .95rem/1 var(--sans); color: var(--muted); }
.fitcard__line { color: var(--text); margin: 0 0 .8em; }
.fitcard__note { color: var(--muted); font-size: .95rem; margin: 0 0 1.6em; }
.fitcard__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 960px) { .get__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fitcard__actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; } }

/* ================================================================ FINALE: call to action and onward links */
.finale { position: relative; padding: var(--sec-pad) 0 clamp(56px, 6vw, 96px); background: var(--ink-2); overflow: clip; isolation: isolate; }
.finale__bg { position: absolute; inset: 0; z-index: -1; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.finale__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 29, 22, .9) 0%, rgba(20, 17, 13, .62) 40%, rgba(35, 29, 22, .95) 100%); }
.finale__cta { padding-bottom: clamp(48px, 5vw, 80px); border-bottom: 1px solid var(--line); }
.finale__title { font-size: clamp(2.2rem, 1.1rem + 3vw, 4rem); }
.finale__text { font-size: clamp(1.06rem, 1rem + .3vw, 1.24rem); color: rgba(239, 232, 218, .84); margin: 0 0 1.8em; }
.finale__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.onward { padding-top: clamp(36px, 4vw, 60px); }
.onward__h { font: 500 .875rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; }
.onward__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.onward__card {
  position: relative; display: grid; grid-template-columns: clamp(84px, 8vw, 128px) minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 12px 16px 12px 12px; background: rgba(19, 16, 12, .86); border: 1px solid var(--line-soft);
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.onward__card:hover, .onward__card:focus-within { border-color: rgba(201, 164, 92, .6); background-color: rgba(30, 25, 18, .95); }
.onward__media { aspect-ratio: 1; overflow: hidden; background: var(--ink-3); }
.onward__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.onward__card:hover .onward__media img { transform: scale(1.08); }
.onward__title { font: 400 clamp(1.15rem, 1rem + .4vw, 1.4rem)/1.2 var(--serif); margin: 0 0 4px; }
.onward__link { color: var(--text); }
.onward__link::after { content: ""; position: absolute; inset: 0; }
.onward__text { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.onward__arrow { display: inline-block; width: 20px; margin-left: 10px; vertical-align: middle; color: var(--gold-hi); transition: transform .5s var(--ease); }
.onward__card:hover .onward__arrow { transform: translateX(6px); }
@media (max-width: 1100px) { .onward__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .onward__card { grid-template-columns: 76px minmax(0, 1fr); } }

/* ==========================================================================
   MOTION LAYER
   ========================================================================== */
.motion [data-stagger] > * { opacity: 0; transform: translateY(36px); }
.motion [data-wipe] { clip-path: inset(100% 0 0 0); }
.motion [data-phero-in] { opacity: 0; transform: translateY(24px); }
.motion .phero__title { opacity: 0; }
.motion .phero__title.is-split { opacity: 1; }
.motion .crumbs { opacity: 0; }

/* the keyhole hero: the photo is seen through the keyhole first, which opens to fill the screen */
.motion .phero--keyhole .phero__media {
  -webkit-mask-image: url('../img/keyhole-mask.svg'); mask-image: url('../img/keyhole-mask.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 0 0; mask-size: 0 0;
}
.motion .phero--keyhole .phero__media.is-open { -webkit-mask-image: none; mask-image: none; }
.motion .phero__ring {
  display: block; position: absolute; left: 0; top: 0; z-index: 0; width: 100px; height: 230px; pointer-events: none;
  background: url('../img/keyhole-ring.svg') center / 100% 100% no-repeat; transform-origin: 0 0; opacity: 0;
  filter: drop-shadow(0 0 18px rgba(234, 208, 149, .55));
}
.motion .phero--photo .phero__media { clip-path: inset(0 0 0 100%); }
.motion .phero__mark { opacity: 0; }
.motion .phero__cue {
  display: flex; position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%); opacity: 0;
}

/* notebook: notes are written in as you scroll */
.motion .note { clip-path: inset(0 100% 0 0); }
.motion .note::before { transform: scale(0); transition: transform .45s var(--ease); }
.motion .note.is-on::before { transform: scale(1); }
.motion .notebook__underline path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* sorter: cards start in a pile (JS sets the pile transforms) */
.motion .sorter__col { background: rgba(255, 255, 255, .22); }
.motion .sorter__col .sorter__title { opacity: .35; transition: opacity .6s var(--ease); }
.motion .sorter__col.is-lit .sorter__title { opacity: 1; }

/* report: sections print in turn, highlights draw */
.motion .paper__sec { opacity: .08; }
.motion .hl { --hl: 0; }
.motion .reportp__steps li { color: rgba(23, 19, 14, .38); }
.motion .reportp__steps li.is-on { color: var(--ink-text); }

.motion .ticks li { opacity: 0; transform: translateX(-18px); }
.motion .ticks [data-tick] { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* pinned set pieces (wide screens only, matching the JS): the scene fills the screen below the header */
@media (min-width: 900px) and (min-height: 600px) {
  .motion .band[data-pinned] { padding: 0; }
  .motion [data-pin-scene] {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--header-h) + 3vh) 0 4vh;
  }
  .motion [data-pin-scene] > .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); }
}
/* a gold clip holds the notebook page */
.notebook__page::after {
  content: ""; position: absolute; top: -14px; right: clamp(40px, 8%, 90px); width: 22px; height: 58px;
  border: 2.5px solid var(--gold); border-radius: 11px; transform: rotate(8deg);
  box-shadow: inset 0 0 0 5px transparent, 0 4px 10px rgba(23, 19, 14, .25);
  background: linear-gradient(var(--gold), var(--gold)) center 12px / 2.5px 30px no-repeat;
}

/* ================================================================ SERVICES HUB: expanding panels */
.panels { list-style: none; display: flex; gap: clamp(10px, 1.2vw, 18px); height: min(56vh, 580px); min-height: 440px; }
.panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-soft); transition: flex-grow .8s var(--ease);
}
.panel.is-active { flex-grow: 2.4; }
.panel__media { position: absolute; inset: 0; z-index: -1; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .8s var(--ease); filter: saturate(.7) brightness(.72); }
.panel.is-active .panel__media img { transform: scale(1.04); filter: none; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(11, 10, 8, .95) 0%, rgba(11, 10, 8, .55) 42%, rgba(11, 10, 8, .05) 75%); pointer-events: none; }
.panel::after { content: ""; position: absolute; inset: 14px; z-index: 1; border: 1px solid rgba(201, 164, 92, 0); pointer-events: none; transition: border-color .7s var(--ease); }
.panel.is-active::after { border-color: rgba(201, 164, 92, .5); }
.panel__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(22px, 2.4vw, 40px); }
.panel__num { display: block; font: italic 400 1.2rem/1 var(--serif); color: var(--gold); margin-bottom: 10px; }
.panel__title { font: 400 clamp(1.4rem, 1.05rem + .9vw, 2.1rem)/1.15 var(--serif); margin: 0; }
.panel__link { color: var(--text); }
.panel__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.panel__more { color: rgba(239, 232, 218, .7); transition: color .6s var(--ease); }
.panel.is-active .panel__more { color: rgba(239, 232, 218, .9); }
.panel__text { padding-top: 12px; font-size: .98rem; line-height: 1.5; color: inherit; }
.panel__cta { display: inline-flex; align-items: center; gap: .7em; margin-top: 16px; color: var(--gold-hi); font-weight: 500; font-size: .94rem; letter-spacing: .04em; }
.panel__cta svg { width: 22px; }
@media (max-width: 900px) {
  .panels { flex-direction: column; height: auto; min-height: 0; }
  .panel, .panel.is-active { flex: none; height: clamp(360px, 58svh, 480px); }
  .panel__media img { filter: none; }
}

/* ================================================================ SERVICES HUB: every visit covers */
.covers__head { margin-bottom: clamp(30px, 3.4vw, 50px); }
.covers__line { height: 1px; background: rgba(23, 19, 14, .14); margin-bottom: 0; }
.covers__line span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); transform-origin: 0 50%; }
.covers__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.covers__list li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 26px 0; border-bottom: 1px solid rgba(23, 19, 14, .12); }
.covers__list li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--linen); }
.covers__list li:nth-child(n+5)::before { display: none; }
.covers__n { font: italic 400 1.05rem/1 var(--serif); color: var(--gold-ink); }
.covers__t { font: 400 clamp(1.2rem, 1.05rem + .45vw, 1.5rem)/1.2 var(--serif); color: var(--ink-text); }
.covers__foot { margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 900px) { .covers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .covers__list li:nth-child(n+3)::before { display: none; } }

/* ================================================================ SERVICES HUB: prices */
.prices__bg { position: absolute; inset: 0; z-index: -1; }
.prices__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.prices__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 8, .95) 0%, rgba(11, 10, 8, .8) 50%, rgba(11, 10, 8, .6) 100%); }
.prices__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.prices__copy > p { color: var(--muted); }
.pricelist { list-style: none; border-top: 1px solid var(--line); }
.pricelist li { border-bottom: 1px solid var(--line); }
.pricelist__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 22px 4px; transition: padding-left .5s var(--ease), background-color .5s; }
.pricelist__row:hover, .pricelist__row:focus-visible { padding-left: 16px; background-color: rgba(201, 164, 92, .06); }
.pricelist__name { font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.75rem)/1.2 var(--serif); color: var(--text); }
.pricelist__line { grid-column: 1; color: var(--muted); font-size: .98rem; }
.pricelist__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1 var(--serif); color: var(--gold-hi); white-space: nowrap; }
@media (max-width: 960px) { .prices__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pricelist__row { grid-template-columns: minmax(0, 1fr); } .pricelist__price { grid-column: 1; grid-row: auto; } }

.motion .panel { clip-path: inset(100% 0 0 0); }
.motion .covers__line span { transform: scaleX(0); }

/* ================================================================ SPLIT HERO (About): the photo fills the right side, opened by shutters */
.phero--split { align-items: center; background: radial-gradient(ellipse 50% 60% at 10% 90%, rgba(201, 164, 92, .12), transparent 70%), var(--ink); }
/* a framed photo inside the hero, sized to fit the screen below the header */
.phero--split .phero__media { left: 46%; top: calc(var(--header-h) + 28px); bottom: 36px; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
.phero--split .phero__shade { background: linear-gradient(90deg, rgba(11, 10, 8, 1) 0%, rgba(11, 10, 8, .35) 22%, rgba(11, 10, 8, 0) 45%), linear-gradient(180deg, rgba(11, 10, 8, .5) 0%, rgba(11, 10, 8, 0) 20%); }
.phero--split .phero__media::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(234, 208, 149, .4); pointer-events: none; }
.phero--split .phero__copy { width: 42%; }
.phero--split .phero__title { font-size: clamp(3rem, 1.4rem + 5vw, 7rem); line-height: 1; }
.phero__role { display: block; margin: 0 0 .9em; font: italic 400 clamp(1.25rem, 1.1rem + .5vw, 1.6rem)/1.3 var(--serif); color: var(--gold-hi); }
.phero__shutters { display: none; }
@media (max-width: 900px) {
  .phero--split { align-items: flex-end; }
  .phero--split .phero__media { left: 0; right: 0; top: 0; bottom: 38%; }
  .phero--split .phero__media::after { display: none; }
  .phero--split .phero__shade { background: linear-gradient(0deg, rgba(11, 10, 8, 1) 0%, rgba(11, 10, 8, .2) 40%, rgba(11, 10, 8, .4) 100%); }
  .phero--split .phero__copy { width: 100%; }
}

/* ================================================================ ABOUT: story */
.story__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 130px); align-items: center; }
.story__media .frame__pic { height: min(74vh, 700px); }
.story__aim { margin: 1.6em 0 0; padding-left: 22px; border-left: 2px solid var(--gold); }
.story__aim p { font: italic 400 clamp(1.25rem, 1.1rem + .5vw, 1.6rem)/1.4 var(--serif); color: var(--ink-text) !important; }
@media (max-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 1fr); }
  .story__media { width: min(100% - 18px, 480px); }
  .story__media .frame__pic { height: auto; aspect-ratio: 4 / 5; max-height: 70svh; }
}

/* ================================================================ ABOUT: approach */
.approach__ring {
  position: absolute; right: -6vw; top: 50%; z-index: -1; width: min(46vw, 620px); aspect-ratio: 100 / 230; transform: translateY(-50%) rotate(-8deg);
  background: url('../img/keyhole-ring.svg') center / 100% 100% no-repeat; opacity: .16;
}
.approach__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.approach__item { position: relative; padding-top: 26px; }
.approach__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(201, 164, 92, .1)); transform-origin: 0 50%; }
.approach__word { display: block; font: italic 400 clamp(2rem, 1.3rem + 2vw, 3.4rem)/1.05 var(--serif); color: var(--gold-hi); margin-bottom: .45em; }
.approach__item p { color: var(--muted); font-size: 1.04rem; }
@media (max-width: 900px) { .approach__list { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ ABOUT: the deck of details */
.notice__grid { display: grid; grid-template-columns: minmax(0, 1fr) min(500px, 44%); gap: clamp(40px, 6vw, 110px); align-items: center; }
.notice__hint, .notice__controls { display: none; }
.notice__count { display: flex; align-items: baseline; gap: 8px; font: 400 1.1rem/1 var(--serif); color: var(--ink-muted) !important; }
.notice__count b { font-weight: 400; font-size: 2rem; color: var(--gold-ink); min-width: 1.4em; }
.deck__cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.deck__card { background: #fffdf8; padding: 10px 10px 18px; box-shadow: 0 20px 40px -24px rgba(23, 19, 14, .45); color: var(--ink-text); }
.deck__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.deck__media img { width: 100%; height: 100%; object-fit: cover; }
.deck__text { padding: 14px 8px 0; font: italic 400 clamp(1.05rem, .98rem + .3vw, 1.3rem)/1.35 var(--serif); color: var(--ink-text) !important; }
.deck__n { display: block; margin-bottom: 6px; font: 500 .875rem/1 var(--sans); font-style: normal; letter-spacing: .16em; color: var(--gold-ink); }
@media (max-width: 900px) { .notice__grid { grid-template-columns: minmax(0, 1fr); } .js .deck { width: min(100%, 460px); justify-self: center; } }
@media (max-width: 520px) { .deck__cards { grid-template-columns: minmax(0, 1fr); } }
/* with JS the cards become a stack you can throw aside */
.js .notice__hint, .js .notice__controls { display: block; }
.js .notice__controls { display: flex; align-items: center; gap: 24px; margin-top: 1.6em; }
.js .deck { position: relative; height: min(64vh, 560px); min-height: 440px; }
.js .deck__cards { display: block; position: absolute; inset: 0; }
.js .deck__card { position: absolute; left: 50%; top: 50%; width: 100%; margin: 0; transform: translate(-50%, -50%); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; }
.js .deck__card:active { cursor: grabbing; }
.js .deck__card img { pointer-events: none; }
@media (max-width: 520px) { .js .deck { height: 420px; min-height: 0; } .js .deck__card { width: min(100%, 330px); } }

/* ================================================================ ABOUT: one person */
.oneperson__bg { position: absolute; inset: 0; z-index: -1; }
.oneperson__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.oneperson__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 8, .96) 0%, rgba(11, 10, 8, .75) 55%, rgba(11, 10, 8, .5) 100%); }
.oneperson__title { font: 400 clamp(2rem, 1rem + 2.8vw, 3.9rem)/1.12 var(--serif); letter-spacing: -.01em; margin: 0 0 .9em; display: flow-root; }
.oneperson__title em { font-style: italic; color: var(--gold); }
.oneperson__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding-top: 28px; border-top: 1px solid var(--line); }
.oneperson__grid p { color: var(--muted); margin: 0 !important; }
.oneperson__grid strong { display: block; font: 400 1.4rem/1.2 var(--serif); color: var(--text); margin-bottom: 6px; }
@media (max-width: 900px) { .oneperson__grid { grid-template-columns: minmax(0, 1fr); } }

.motion .approach__item { opacity: 0; transform: translateY(30px); }
.motion .approach__item::before { transform: scaleX(var(--sx, 0)); }
.motion .phero__shutters { display: flex; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.motion .phero__shutters i { flex: 1 1 0; background: var(--ink); transform-origin: 50% 0; margin-right: -1px; }

/* ================================================================ HOW IT WORKS: the five steps */
.process__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 44px); }
.process__head .h2 { margin: 0; }
.process__count { display: none; align-items: baseline; gap: 8px; font: 400 1.1rem/1 var(--serif); color: var(--muted); }
.process__count b { font-weight: 400; font-size: 2rem; color: var(--gold-hi); min-width: 1.4em; }
.process__line { display: none; }
.steps2 { list-style: none; display: grid; gap: clamp(28px, 3vw, 44px); }
.step2 { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(20px, 3vw, 56px); align-items: center; }
.step2__n { font: italic 400 clamp(2rem, 1.4rem + 1.6vw, 3rem)/1 var(--serif); color: var(--gold); align-self: start; min-width: 1.4em; }
.step2__t { font: 400 clamp(1.25rem, 1.05rem + .5vw, 1.6rem)/1.15 var(--serif); margin: 0 0 .4em; }
.step2__more p { color: var(--muted); }
.step2__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); max-height: 60vh; }
.step2__media img { width: 100%; height: 100%; object-fit: cover; }
.process__stage { display: none; }
@media (max-width: 900px) {
  .step2 { grid-template-columns: auto minmax(0, 1fr); }
  .step2__media { grid-column: 1 / -1; order: -1; }
}
/* pinned on wide screens: the list on the left, one frame of pictures on the right */
@media (min-width: 900px) and (min-height: 600px) {
  .motion .process__count { display: flex; }
  .motion .process__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .9fr); gap: clamp(40px, 5vw, 90px); align-items: center; }
  .motion .process__steps { position: relative; padding-left: 4px; }
  .motion .process__line { display: block; position: absolute; left: calc(.7em + 4px); top: 10px; bottom: 10px; width: 2px; height: calc(100% - 20px); color: var(--gold); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); overflow: visible; }
  .motion .process__steps::before { content: ""; position: absolute; left: calc(clamp(2rem, 1.4rem + 1.6vw, 3rem) * .7 + 4px); top: 10px; bottom: 10px; width: 2px; background: rgba(239, 232, 218, .1); }
  .motion .process__line { left: calc(clamp(2rem, 1.4rem + 1.6vw, 3rem) * .7 + 4px); font-size: inherit; }
  .motion .steps2 { gap: clamp(8px, 1.6vh, 18px); }
  .motion .step2 { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .motion .step2__n { position: relative; z-index: 1; min-width: 1.4em; text-align: center; background: var(--ink-2); padding: 4px 0; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); color: rgba(201, 164, 92, .45); transition: color .5s var(--ease); }
  .motion .step2__t { margin: 4px 0 0; color: rgba(239, 232, 218, .72); transition: color .5s var(--ease); }
  .motion .step2__media { display: none; }
  .motion .step2__more > p { padding-top: 4px; font-size: .96rem; line-height: 1.5; }
  .motion .step2.is-on .step2__n { color: var(--gold-hi); }
  .motion .step2.is-on .step2__t { color: var(--text); }
  .motion .step2.is-on .step2__more > p { color: var(--text); }

  .motion .process__stage { display: block; }
  .motion .process__stage .frame__pic { height: min(62vh, 580px); }
  .motion .process__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease); }
  .motion .process__img.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
  .motion .process__img.is-past { clip-path: inset(0 0 0 0); }
}

/* ================================================================ HOW IT WORKS: what we need */
.needs__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); gap: clamp(48px, 7vw, 130px); align-items: center; }
.needs__list { list-style: none; display: grid; gap: 22px; margin-top: 1.8em; }
.needs__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; color: var(--ink-muted); }
.needs__list li > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font: 400 1.15rem/1 var(--serif); color: var(--gold-ink); }
.needs__list strong { display: block; font: 400 1.35rem/1.25 var(--serif); color: var(--ink-text); margin-bottom: 4px; }
.needs__media .frame__pic { height: min(72vh, 660px); }
@media (max-width: 900px) {
  .needs__grid { grid-template-columns: minmax(0, 1fr); }
  .needs__media { width: min(100% - 18px, 460px); }
  .needs__media .frame__pic { height: auto; aspect-ratio: 4 / 5; max-height: 70svh; }
}

/* ================================================================ accordions (FAQs and question blocks) */
.qs__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.qs__copy > p { color: var(--muted); margin-bottom: 1.4em; }
.qs { background-image: radial-gradient(ellipse 50% 70% at 100% 100%, rgba(201, 164, 92, .1), transparent 70%); }
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; }
.acc__btn > span { display: block; }
.acc__btn { position: relative; display: flex; width: 100%; align-items: center; min-height: 68px; padding: 16px 44px 16px 4px; text-align: left; font: 400 clamp(1.15rem, 1.02rem + .4vw, 1.4rem)/1.3 var(--serif); color: var(--text); transition: color .3s; }
.acc__btn:hover { color: var(--gold-hi); }
.acc__icon { position: absolute; right: 8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--gold); transition: transform .45s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.js .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.js .acc__panel.is-open { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; min-height: 0; }
.acc__inner p { color: var(--muted); padding: 0 48px 22px 4px; }
.band--linen .acc, .band--linen .acc__item, .band--linen2 .acc, .band--linen2 .acc__item { border-color: rgba(23, 19, 14, .14); }
.band--linen .acc__btn, .band--linen2 .acc__btn { color: var(--ink-text); }
.band--linen .acc__btn:hover, .band--linen2 .acc__btn:hover { color: var(--gold-ink); }
@media (max-width: 900px) { .qs__grid { grid-template-columns: minmax(0, 1fr); } .acc__inner p { padding-right: 8px; } }


/* the note being written glows gold, so the scene visibly moves down the page as you scroll */
.note { transition: background-color .5s var(--ease); margin-inline: -12px; padding-inline: 12px; }
.note.is-current { background-color: rgba(234, 208, 149, .38); }
.motion .notebook { opacity: 0; }

/* what you get: the photograph under the package card */
.get__bg { position: absolute; inset: 0; z-index: -1; }
.get__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.get__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 8, .97) 0%, rgba(11, 10, 8, .85) 45%, rgba(11, 10, 8, .55) 100%); }
/* start states for the unpinned (narrow or short screen) versions of the set pieces */
@media not all and (min-width: 900px) and (min-height: 600px) {
  .motion .step2__media { clip-path: inset(100% 0 0 0); }
  .motion .step2__body { opacity: 0; transform: translateY(28px); }
  .motion .obs { opacity: 0; transform: translateX(-40px); }
}
@media (min-width: 900px) and (min-height: 600px) {
  .motion .process__stage { opacity: 0; }
  .motion .step2 { opacity: 0; }
}

/* ================================================================ MOSAIC HERO (Who we help) */
.phero--mosaic { align-items: center; background: radial-gradient(ellipse 45% 60% at 75% 50%, rgba(201, 164, 92, .14), transparent 70%), var(--ink); }
.phero--mosaic .phero__copy { width: 46%; }
.phero__mosaic { position: absolute; top: calc(var(--header-h) + 4vh); bottom: 6vh; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); width: 44%; }
.tile { position: absolute; overflow: hidden; background: var(--ink-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(234, 208, 149, .3); pointer-events: none; }
.tile--1 { left: 0; top: 6%; width: 44%; height: 50%; }
.tile--2 { left: 50%; top: 0; width: 50%; height: 36%; }
.tile--3 { left: 50%; top: 41%; width: 38%; height: 50%; }
.tile--4 { left: 8%; top: 61%; width: 36%; height: 39%; }
@media (max-width: 1099px) {
  .phero--mosaic { align-items: flex-end; }
  .phero--mosaic .phero__copy { width: 100%; }
  .phero__mosaic { top: calc(var(--header-h) + 14px); bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; height: 38svh; }
  .tile--1 { left: 0; top: 4%; width: 30%; height: 80%; }
  .tile--2 { left: 33%; top: 0; width: 36%; height: 55%; }
  .tile--3 { left: 72%; top: 10%; width: 28%; height: 86%; }
  .tile--4 { left: 33%; top: 60%; width: 36%; height: 40%; }
  .phero--mosaic .phero__inner { padding-top: calc(var(--header-h) + 38svh + 36px); }
}

/* ================================================================ WHO WE HELP: filters and grid */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.filter {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 30px;
  font: 500 .95rem/1 var(--sans); letter-spacing: .02em; color: var(--text); transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.filter span { font: italic 400 .95rem/1 var(--serif); color: var(--gold); }
.filter:hover { border-color: var(--gold); }
.filter[aria-pressed="true"] { background-color: #c9a45c; background-image: var(--foil); color: #1a140b; border-color: transparent; }
.filter[aria-pressed="true"] span { color: #3b2c12; }
.no-js .filters { display: none; }
.sector-grid { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.sector { position: relative; display: flex; flex-direction: column; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sector.is-hidden { display: none; }
.sector__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sector__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sector:hover .sector__media img { transform: scale(1.06); }
.sector__body { padding: 18px 20px 22px; }
.sector__cat { font: 500 .875rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.sector__name { font: 400 clamp(1.3rem, 1.1rem + .5vw, 1.6rem)/1.2 var(--serif); margin: 0 0 8px; }
.sector__eyes { color: var(--muted); font-size: .98rem; line-height: 1.5; }
@media (max-width: 1100px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sector-grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ WHO WE HELP: not on the list */
.notlisted__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 130px); align-items: center; }
.notlisted__media .frame__pic { aspect-ratio: 4 / 3; max-height: 70vh; }
@media (max-width: 900px) { .notlisted__grid { grid-template-columns: minmax(0, 1fr); } .notlisted__media { width: calc(100% - 18px); } }

.motion .tile { opacity: 0; }
.motion .sector { opacity: 0; }

/* ================================================================ WHAT WE LOOK AT: the route */
.route { position: relative; }
.route__svg { display: none; }
.route__marker { display: none; }
.route__list { list-style: none; position: relative; display: grid; gap: clamp(48px, 8vh, 110px); }
.route__list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--line); }
.cp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
.cp__media { grid-column: 1; }
.cp__media .frame__pic { aspect-ratio: 4 / 3; max-height: 50vh; }
.cp__node {
  grid-column: 2; justify-self: center; position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); border: 1px solid var(--gold); font: italic 400 1.2rem/1 var(--serif); color: var(--gold-hi);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.cp.is-lit .cp__node { background-color: #c9a45c; color: #1a140b; box-shadow: 0 0 0 8px rgba(201, 164, 92, .16), 0 0 30px rgba(234, 208, 149, .45); }
.cp__body { grid-column: 3; }
.cp--flip .cp__media { grid-column: 3; grid-row: 1; }
.cp--flip .cp__body { grid-column: 1; grid-row: 1; text-align: right; }
.cp--flip .cp__tags { justify-content: flex-end; }
.cp__n { font: italic 400 1.05rem/1 var(--serif); color: var(--gold); margin: 0 0 10px; }
.cp__n span { color: var(--muted); }
.cp__t { font: 400 clamp(1.7rem, 1.2rem + 1.3vw, 2.6rem)/1.1 var(--serif); margin: 0 0 .35em; }
.cp__p { color: var(--muted); margin: 0 0 1em; }
.cp__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cp__tags li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 30px; font-size: .9rem; color: var(--text); }
@media (max-width: 900px) {
  .route__list::before { left: 22px; }
  .cp, .cp--flip { grid-template-columns: 44px minmax(0, 1fr); gap: 18px 18px; align-items: start; }
  .cp__node { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 1.05rem; align-self: start; }
  .cp__media, .cp--flip .cp__media { grid-column: 2; grid-row: 1; }
  .cp__body, .cp--flip .cp__body { grid-column: 2; grid-row: 2; text-align: left; }
  .cp--flip .cp__tags { justify-content: flex-start; }
}
/* with JS a winding gold path replaces the straight rule, and a marker travels along it */
.js .route__list::before { display: none; }
/* the route is a background layer of the whole section: full width, the path drawn in the content's coordinates */
.js .route__svg { display: block; position: absolute; top: 0; left: var(--route-off, 0px); width: 100vw; max-width: none; height: 100%; overflow: visible; pointer-events: none; }
.route__base { fill: none; stroke: rgba(201, 164, 92, .22); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.route__path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(234, 208, 149, .5)); }
.motion .route__marker {
  display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 30px; pointer-events: none;
  background: var(--gold-hi); filter: drop-shadow(0 0 10px rgba(234, 208, 149, .8));
  clip-path: polygon(50% 0, 78% 12%, 86% 36%, 70% 58%, 88% 100%, 12% 100%, 30% 58%, 14% 36%, 22% 12%);
}

/* ================================================================ WHAT WE LOOK AT: your focus */
.focus__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(48px, 7vw, 130px); align-items: center; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.chips li { padding: 11px 18px; background: #fffdf8; border: 1px solid rgba(201, 164, 92, .45); border-radius: 30px; font: italic 400 1.08rem/1.2 var(--serif); color: var(--ink-text); box-shadow: 0 10px 24px -18px rgba(23, 19, 14, .5); }
.focus__media .frame__pic { aspect-ratio: 4 / 3; max-height: 70vh; }
@media (max-width: 900px) { .focus__grid { grid-template-columns: minmax(0, 1fr); } .focus__media { width: calc(100% - 18px); } }
.motion .cp__body { opacity: 0; }

/* ================================================================ IRIS HERO (Packages, Confidentiality) */
.phero--iris .phero__shade { background: radial-gradient(ellipse 80% 90% at 70% 45%, rgba(11, 10, 8, .05), rgba(11, 10, 8, .6) 70%), linear-gradient(0deg, rgba(11, 10, 8, .95) 0%, rgba(11, 10, 8, .2) 50%), linear-gradient(90deg, rgba(11, 10, 8, .85) 0%, rgba(11, 10, 8, 0) 60%); }
.motion .phero--iris .phero__media { clip-path: circle(0% at 70% 48%); }
.pchips { display: flex; flex-wrap: wrap; gap: 12px; }
.pchip {
  display: flex; flex-direction: column; gap: 6px; min-width: 190px; padding: 16px 20px; border: 1px solid var(--line);
  background: rgba(19, 16, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.pchip:hover, .pchip:focus-visible { border-color: var(--gold); transform: translateY(-4px); }
.pchip__name { font: 500 .9rem/1.2 var(--sans); letter-spacing: .04em; color: var(--muted); }
.pchip__price { font: 400 clamp(1.6rem, 1.3rem + .9vw, 2.2rem)/1 var(--serif); color: var(--gold-hi); }
@media (max-width: 600px) { .pchip { min-width: 0; flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: baseline; padding: 12px 16px; } }

/* ================================================================ PACKAGES: the stack */
.stack { display: grid; gap: clamp(20px, 3vw, 40px); }
.pcard { position: relative; }
.pcard__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); overflow: hidden;
  background-image: linear-gradient(160deg, rgba(34, 28, 20, .98), rgba(17, 14, 10, .99)); border: 1px solid var(--line);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); transform-origin: 50% 0;
}
.pcard--feature .pcard__inner { border-color: rgba(201, 164, 92, .85); background-image: linear-gradient(160deg, rgba(52, 41, 23, .98), rgba(20, 16, 11, .99)); }
.pcard__copy { padding: clamp(28px, 3.4vw, 56px); display: flex; flex-direction: column; }
.pcard__num { display: flex; align-items: center; gap: 10px; font: italic 400 1.1rem/1 var(--serif); color: var(--gold); margin: 0 0 16px; }
.pcard__num span:first-of-type { color: var(--muted); }
.pcard__tag { margin-left: auto; padding: 7px 12px 6px; background-color: #c9a45c; background-image: var(--foil); color: #1a140b !important; font: 600 .875rem/1 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.pcard__name { font: 400 clamp(1.8rem, 1.3rem + 1.4vw, 2.8rem)/1.1 var(--serif); margin: 0 0 14px; }
.pcard__price { display: flex; align-items: baseline; font: 400 clamp(3.2rem, 2.2rem + 2.6vw, 5rem)/1 var(--serif); color: var(--gold-hi); margin: 0 0 20px; }
.pcard__cur { font-size: .42em; align-self: flex-start; margin: .22em .06em 0 0; }
.pcard__per { margin-left: 14px; font: 400 1rem/1 var(--sans); color: var(--muted); }
.pcard__line { font-size: 1.1rem; color: var(--text); margin: 0 0 .6em; }
.pcard__more { color: var(--muted); margin: 0 0 1.1em; }
.pcard__best { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 14px 0; margin: 0 0 1.4em; border-block: 1px solid var(--line-soft); color: var(--text); }
.pcard__best span { font: 500 .875rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pcard__actions { margin-top: auto; }
.pcard__note { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.pcard__media { position: relative; min-height: 100%; overflow: hidden; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 14, 10, .7), rgba(17, 14, 10, 0) 40%); }
@media (max-width: 900px) {
  .pcard__inner { grid-template-columns: minmax(0, 1fr); }
  .pcard__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .pcard__media::after { background: linear-gradient(0deg, rgba(17, 14, 10, .9), rgba(17, 14, 10, 0) 50%); }
}
@media (min-width: 900px) and (min-height: 600px) {
  .motion .pcard__inner { height: min(calc(100vh - var(--header-h) - 48px), 700px); }
}
@media (max-width: 560px) { .pcard__actions .btn { width: 100%; white-space: normal; text-align: center; } }

/* ================================================================ PACKAGES: compare */
.cmp-wrap { background: #fffdf8; box-shadow: 0 40px 80px -40px rgba(23, 19, 14, .45); }
.cmp { width: 100%; border-collapse: collapse; color: var(--ink-text); }
.cmp th, .cmp td { padding: 18px clamp(14px, 2vw, 28px); text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(23, 19, 14, .1); }
.cmp thead th { vertical-align: bottom; border-bottom: 2px solid var(--ink-text); }
.cmp__name { display: block; font: 400 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.2 var(--serif); }
.cmp__price { display: block; margin-top: 4px; font: 400 1.2rem/1 var(--serif); color: var(--gold-ink); }
.cmp tbody th { font: 500 1rem/1.4 var(--sans); width: 34%; }
.cmp td { font-size: 1rem; color: var(--ink-muted); }
.cmp tbody tr { transition: background-color .3s; }
.cmp tbody tr:hover { background-color: rgba(201, 164, 92, .08); }
.cmp thead th:nth-child(3), .cmp td:nth-child(3) { background-color: rgba(201, 164, 92, .1); }
.cmp__tick { width: 28px; height: 28px; color: var(--gold-ink); }
.cmp__no { color: rgba(23, 19, 14, .45); font-size: 1.3rem; }
.cmp__ask { font: italic 400 1.05rem/1.2 var(--serif); color: var(--gold-ink); }
@media (max-width: 760px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tbody th { width: 100%; padding: 18px 18px 8px; border: 0; font-size: 1.05rem; }
  .cmp td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 18px; border: 0; background: none !important; text-align: right; }
  .cmp td::before { content: attr(data-label); text-align: left; font: 400 1rem/1.3 var(--serif); color: var(--ink-text); }
  .cmp tr { padding-bottom: 12px; border-bottom: 1px solid rgba(23, 19, 14, .12); }
}

/* ================================================================ PACKAGES: the receipt */
.exp__grid { display: grid; grid-template-columns: minmax(0, 1fr) min(440px, 42%); gap: clamp(40px, 6vw, 110px); align-items: center; }
.expenses-sec { background-image: radial-gradient(ellipse 45% 60% at 80% 40%, rgba(201, 164, 92, .14), transparent 70%); }
.exp__copy > p { color: var(--muted); }
.exp__pledge { margin-top: 1.4em !important; 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(--text) !important; }
.receipt { position: relative; width: 100%; }
.receipt__slot { display: block; height: 16px; margin: 0 -18px; border-radius: 8px; background: linear-gradient(180deg, #2a241b, #0f0d0a); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(234, 208, 149, .2); position: relative; z-index: 2; }
.receipt__paper {
  position: relative; margin-top: -8px; padding: 30px 28px 38px; color: #2b2419; background: #f7f1e4;
  font: 400 1rem/1.45 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 12px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 12px repeat-x;
}
.receipt::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -20px; height: 40px; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), transparent 70%); }
.receipt__head { display: grid; gap: 4px; text-align: center; padding-bottom: 14px; margin: 0 0 12px; border-bottom: 1px dashed rgba(43, 36, 25, .5); text-transform: uppercase; letter-spacing: .12em; color: #2b2419 !important; }
.receipt__brand { font: 400 1.25rem/1.2 var(--serif); letter-spacing: .08em; text-transform: none; color: #74561f; }
.receipt__lines { list-style: none; display: grid; gap: 8px; }
.receipt__lines li, .receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.receipt__lines li span:first-child { flex: 1 1 auto; }
.receipt__amt { flex: none; color: #74561f; }
.receipt__total { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(43, 36, 25, .5); font-weight: 700; color: #2b2419 !important; text-transform: uppercase; letter-spacing: .06em; }
.receipt__foot { margin: 14px 0 0; text-align: center; font-size: .9rem; color: #5c5243 !important; }
@media (max-width: 900px) { .exp__grid { grid-template-columns: minmax(0, 1fr); } .receipt { width: min(100%, 440px); justify-self: center; } }
.motion .receipt__paper { clip-path: inset(0 0 100% 0); }
.motion [data-receipt-line] { opacity: 0; }

/* ================================================================ CONFIDENTIALITY */
.promises__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr); gap: clamp(48px, 7vw, 130px); align-items: center; }
.promise-list { list-style: none; display: grid; gap: 22px; margin-top: 1.4em; }
.promise-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(23, 19, 14, .12); }
.promise-list__n { font: italic 400 1.6rem/1 var(--serif); color: var(--gold-ink); }
.promise-list h3 { font: 400 clamp(1.3rem, 1.1rem + .5vw, 1.6rem)/1.2 var(--serif); margin: 0 0 6px; color: var(--ink-text); }
.promises__media .frame__pic { aspect-ratio: 4 / 5; max-height: 76vh; }
@media (max-width: 900px) { .promises__grid { grid-template-columns: minmax(0, 1fr); } .promises__media { width: min(100% - 18px, 440px); } }

.flow { position: relative; margin-top: clamp(10px, 2vw, 30px); }
.flow__svg { width: 100%; height: auto; overflow: visible; }
.flow__svg--tall { display: none; max-width: 420px; margin-inline: auto; }
@media (max-width: 760px) { .flow__svg--wide { display: none; } .flow__svg--tall { display: block; } }
.flow__track { fill: none; stroke: rgba(239, 232, 218, .14); stroke-width: 2; }
.flow__main { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(234, 208, 149, .5)); }
.flow__branch { fill: none; stroke: rgba(217, 130, 107, .75); stroke-width: 2; stroke-dasharray: 6 8; }
.node { fill: var(--ink); stroke: var(--gold); stroke-width: 2; }
.node--end { fill: #c9a45c; stroke: var(--gold-hi); }
.seal circle { fill: #2a1712; stroke: #d9826b; stroke-width: 1.5; }
.seal path { fill: #d9826b; }
.flow__labels text { font: 400 22px var(--serif); fill: var(--text); pointer-events: none; }
.flow__svg--tall .flow__labels text { font-size: 20px; }
.flow__labels .flow__you { font-size: 30px; fill: var(--gold-hi); font-style: italic; }
.flow__labels .flow__small { font: 500 15px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: #e9a08e; }
.flow__dot { fill: #fff3d0; filter: drop-shadow(0 0 8px rgba(255, 236, 190, .9)); pointer-events: none; }
.no-js .flow__dot, html:not(.motion) .flow__dot { display: none; }

.purpose__bg { position: absolute; inset: 0; z-index: -1; }
.purpose__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.purpose__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35, 29, 22, .97) 0%, rgba(35, 29, 22, .85) 50%, rgba(35, 29, 22, .6) 100%); }
.purpose__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.purpose__copy > p { color: var(--muted); }
.purpose__words { list-style: none; display: grid; gap: 6px; }
.purpose__words li { font: italic 400 clamp(2.2rem, 1.3rem + 2.8vw, 4.4rem)/1.1 var(--serif); color: var(--gold-hi); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .purpose__grid { grid-template-columns: minmax(0, 1fr); } }

.records__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 130px); align-items: center; }
.records__media .frame__pic { aspect-ratio: 4 / 5; max-height: 70vh; }
.records__copy .btn { margin-top: 1.2em; }
@media (max-width: 900px) { .records__grid { grid-template-columns: minmax(0, 1fr); } .records__media { width: min(100% - 18px, 400px); } }

.motion .flow__main { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .flow__branch { opacity: 0; }
.motion [data-seal] { opacity: 0; }

/* ================================================================ CONTACT */
.motion .phero--lift .phero__media { clip-path: inset(100% 0 0 0); }
.phero--lift .phero__copy { width: min(100%, 70rem); }
.direct2 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 0; border: 1px solid var(--line); background: rgba(19, 16, 12, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.direct2 li { display: flex; flex-direction: column; gap: 6px; padding: 18px 26px; }
.direct2 li + li { border-left: 1px solid var(--line); }
.direct2__label { font: 500 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.direct2__value { font: 400 clamp(1.1rem, 1rem + .45vw, 1.45rem)/1.3 var(--serif); color: var(--text); overflow-wrap: anywhere; }
a.direct2__value { display: flex; align-items: center; min-height: 44px; margin: -8px 0; transition: color .3s; }
a.direct2__value:hover { color: var(--gold-hi); }
@media (max-width: 900px) {
  .direct2 { grid-template-columns: minmax(0, 1fr); }
  .direct2 li + li { border-left: 0; border-top: 1px solid var(--line); }
  .direct2 li { padding: 14px 18px; }
}

.enq-sec { background-image: radial-gradient(ellipse 50% 60% at 100% 30%, rgba(201, 164, 92, .12), transparent 70%); }
.enq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.enq__copy > p { color: var(--muted); }
.next { list-style: none; display: grid; gap: 16px; margin: 1.4em 0; }
.next li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; color: var(--muted); }
.next__n { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font: 400 1.15rem/1 var(--serif); color: var(--gold-hi); }
.next strong { display: block; font: 400 1.3rem/1.25 var(--serif); color: var(--text); margin-bottom: 4px; }
.enq__alt { padding-top: 1.2em; border-top: 1px solid var(--line); }
.enq__alt a { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; line-height: 1.2; color: var(--gold-hi); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.enquiry--page { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.enquiry--page::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--line); pointer-events: none; z-index: -1; }
.enquiry__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.enquiry__title { font: 400 clamp(1.4rem, 1.2rem + .6vw, 1.9rem)/1.2 var(--serif); }
.enquiry__req { font-size: .9rem; color: var(--muted); }
.enquiry__status.is-ok { color: var(--gold-hi); font: italic 400 1.15rem/1.4 var(--serif); }
.enquiry__done { display: none; }
.enquiry.is-sent .enquiry__done { display: block; position: absolute; top: clamp(20px, 2.4vw, 36px); right: clamp(20px, 2.4vw, 36px); width: 56px; height: 56px; color: var(--gold-hi); }
.enquiry.is-sent .enquiry__done path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick-draw .8s var(--ease) .2s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.enquiry.is-sending { opacity: .75; transition: opacity .3s; }
@media (max-width: 960px) { .enq__grid { grid-template-columns: minmax(0, 1fr); } }

.mapsec__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 110px); align-items: center; }
.mapsec__copy > p { color: var(--muted); }
.mapsec__hint { display: none; }
.mapsec__copy .btn { margin-top: 1.4em; }
.lensmap { position: relative; height: min(78vh, 720px); aspect-ratio: 600 / 904; justify-self: center; touch-action: pan-y; }
.lensmap img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lensmap__lit {
  position: absolute; inset: 0;
  -webkit-mask: url('../img/keyhole-mask.svg') no-repeat; mask: url('../img/keyhole-mask.svg') no-repeat;
  -webkit-mask-size: var(--lw, 120px) calc(var(--lw, 120px) * 2.3); mask-size: var(--lw, 120px) calc(var(--lw, 120px) * 2.3);
  -webkit-mask-position: var(--lx, 58%) var(--ly, 55%); mask-position: var(--lx, 58%) var(--ly, 55%);
}
/* Tanya's base: Nottingham on the 600 x 904 map (454, 651) */
.lensmap__pin { position: absolute; z-index: 2; left: 75.6%; top: 72%; width: 0; height: 0; pointer-events: none; }
.lensmap__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(11, 10, 8, .85), 0 0 18px rgba(234, 208, 149, .7); }
.lensmap__dot::after { content: ""; position: absolute; inset: -9px; border: 1px solid var(--gold-hi); border-radius: 50%; opacity: 0; }
.motion .lensmap__dot::after { animation: pin-pulse 2.6s var(--ease) infinite; }
@keyframes pin-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.lensmap__label { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 10px 4px; background: rgba(11, 10, 8, .82); border: 1px solid var(--line); font: 500 .78rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
.lensmap__ring { display: none; }
.js .lensmap__ring {
  display: block; position: absolute; left: 0; top: 0; width: 108px; height: 238px; pointer-events: none; transform-origin: 0 0;
  background: url('../img/keyhole-ring.svg') center / 100% 100% no-repeat; filter: drop-shadow(0 0 14px rgba(234, 208, 149, .6));
}
.js .mapsec__hint { display: block; font-size: .95rem; color: var(--gold-hi) !important; }
.mapsec__hint-touch { display: none; }
@media (hover: none) { .mapsec__hint-fine { display: none; } .mapsec__hint-touch { display: inline; } }
@media (max-width: 900px) {
  .mapsec__grid { grid-template-columns: minmax(0, 1fr); }
  .lensmap { height: auto; width: min(100%, 440px); max-height: 80svh; }
}
.motion .lensmap { opacity: 0; }

/* ================================================================ FAQS: topic rail and answers */
.faq__grid { display: grid; grid-template-columns: minmax(220px, .36fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.rail { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 28px; }
.rail__nav { position: relative; }
.rail__h { font: 500 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 12px; }
.rail__list { list-style: none; border-left: 1px solid rgba(23, 19, 14, .14); }
.rail__link { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 48px; padding: 12px 0 12px 20px; font: 400 1.2rem/1.2 var(--serif); color: var(--ink-muted); transition: color .35s var(--ease); }
.rail__link:hover, .rail__link.is-on { color: var(--ink-text); }
.rail__count { font: italic 400 1rem/1 var(--serif); color: var(--gold-ink); }
.rail__marker { display: none; position: absolute; left: -1px; top: 0; width: 3px; height: 48px; background: var(--gold); }
.js .rail__marker { display: block; }
.rail__media .frame__pic { aspect-ratio: 4 / 5; max-height: 38vh; }
.faq__groups { display: grid; gap: clamp(40px, 5vw, 72px); }
.faq-group__h { font: 400 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1.1 var(--serif); margin: 0 0 16px; display: flow-root; color: var(--ink-text); }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .rail__list { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .rail__link { min-height: 44px; padding: 8px 14px; border: 1px solid rgba(201, 164, 92, .5); border-radius: 30px; font-size: 1.05rem; gap: 8px; }
  .rail__marker, .js .rail__marker { display: none; }
  .rail__media { display: none; }
}

/* ================================================================ LEGAL PAGES: readable long-form */
.legal__grid { display: grid; grid-template-columns: minmax(200px, .32fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.legal__side { position: sticky; top: calc(var(--header-h) + 28px); }
.legal__updated { font-size: .95rem; margin-bottom: 1.4em; }
.legal__toc ol { list-style: none; border-left: 1px solid rgba(23, 19, 14, .14); }
.legal__toc a { display: flex; align-items: center; min-height: 44px; padding-left: 18px; font: 400 1.1rem/1.2 var(--serif); color: var(--ink-muted); transition: color .3s; }
.legal__toc a:hover { color: var(--ink-text); }
.legal__body { max-width: 120ch; }
.legal__sec + .legal__sec { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid rgba(23, 19, 14, .12); }
.legal__sec h2 { font: 400 clamp(1.6rem, 1.2rem + 1.1vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .6em; display: flow-root; color: var(--ink-text); }
.legal__sec p, .legal__list li { font-size: 1.08rem; line-height: 1.75; }
.legal__sec a { color: var(--gold-ink); border-bottom: 1px solid rgba(116, 86, 31, .4); }
.legal__list { list-style: none; display: grid; gap: 10px; margin: .6em 0 1em; }
.legal__list li { position: relative; padding-left: 22px; color: var(--ink-muted); }
.legal__list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 9px; height: 1px; background: var(--gold); }
.legal__list strong { color: var(--ink-text); font-weight: 500; }
@media (max-width: 900px) { .legal__grid { grid-template-columns: minmax(0, 1fr); } .legal__side { position: static; } }

.nowrap { white-space: nowrap; }
/* services hub: each moment carries a small picture */
.covers__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 10px; background: var(--ink-3); }
.covers__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.covers__list li:hover .covers__thumb img { transform: scale(1.07); }

.enquiry--page .field textarea { min-height: 104px; }

/* intro text inside light bands keeps the dark-on-linen colour */
.band--linen .qs__copy > p, .band--linen2 .qs__copy > p { color: var(--ink-muted); }
@media (max-width: 420px) { .direct2__value { font-size: 1rem; overflow-wrap: normal; } }

/* ================================================================ CONTACT: book online or send an enquiry */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.mode { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 46px; border: 1px solid var(--line); cursor: pointer; transition: border-color .35s var(--ease), background-color .35s var(--ease); }
.mode input { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; margin: 0; accent-color: #c9a45c; }
.mode__t { font: 400 1.15rem/1.2 var(--serif); color: var(--text); }
.mode__d { font-size: .9rem; line-height: 1.35; color: var(--muted); }
.mode:hover { border-color: rgba(201, 164, 92, .6); }
.mode:has(input:checked) { border-color: var(--gold); background-color: rgba(201, 164, 92, .1); }
.mode:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
/* the two sets of fields: CSS :has() switches them even without JavaScript; the class is the fallback */
.enquiry .only-book { display: none; }
.enquiry.is-book .only-book, .enquiry:has(input[data-mode][value="book"]:checked) .only-book { display: revert; }
.enquiry.is-book .field.only-book, .enquiry:has(input[data-mode][value="book"]:checked) .field.only-book { display: flex; }
.enquiry.is-book .bsum.only-book, .enquiry:has(input[data-mode][value="book"]:checked) .bsum.only-book { display: block; }
.enquiry.is-book .only-enquiry, .enquiry:has(input[data-mode][value="book"]:checked) .only-enquiry { display: none; }
.bsum { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); background: rgba(11, 10, 8, .55); }
.bsum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.bsum__name { font: 400 1.25rem/1.2 var(--serif); color: var(--text); }
.bsum__price { font: 400 1.9rem/1 var(--serif); color: var(--gold-hi); white-space: nowrap; }
.bsum__price small { font: 400 .9rem/1 var(--sans); color: var(--muted); margin-left: 6px; }
.bsum__note, .bsum__secure { font-size: .95rem; color: var(--muted); }
.bsum__secure { margin-top: 8px; }
.bsum__secure strong { color: var(--gold-hi); font-weight: 500; }
.check { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; min-height: 44px; cursor: pointer; font-size: 1rem; color: var(--text); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #c9a45c; }
.check a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(201, 164, 92, .5); text-underline-offset: 4px; }
.check.is-error span { color: #e9a08e; }
.field.is-error select { border-color: #d9826b; }
@media (max-width: 560px) { .modes { grid-template-columns: minmax(0, 1fr); } }

/* the booking confirmation page */
.booked__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.booked__list { display: grid; gap: 0; margin: 1.2em 0 0; border-top: 1px solid rgba(23, 19, 14, .14); }
.booked__list > div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(23, 19, 14, .14); }
.booked__list dt { font: 500 .875rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.booked__list dd { margin: 0; font: 400 1.15rem/1.3 var(--serif); color: var(--ink-text); text-align: right; overflow-wrap: anywhere; }
.booked__note { margin-top: 1.4em; }
.next--ink li { color: var(--ink-muted); }
.next--ink strong { color: var(--ink-text); }
.next--ink .next__n { color: var(--gold-ink); }
@media (max-width: 900px) { .booked__grid { grid-template-columns: minmax(0, 1fr); } }