/* Northlight Models — Design Three · shared styles
   Tokens → base → typography → layout → buttons → header → banner → footer →
   photos/masks → decoration → cards → features → testimonials → rates → CTA → forms → carousel/slider → responsive */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* colour */
  --c-ink: #1c191e;
  --c-ink-80: rgba(28, 25, 30, .8);
  --c-black: #000;
  --c-heading: #0c0e11;
  --c-white: #fff;
  --c-cream: #f5f2ed;
  --c-cream-2: #ece9e3;
  --c-gold: #e9cba4;
  --c-gold-deep: #c78b4b;
  --c-copper: #c56f39;
  --c-copper-text: #a4551f;
  --c-star-off: #dcccc1;
  --c-text: #444c56;
  --c-muted: #afafaf;
  --c-line: #dadada;
  --c-line-field: #d2d2d2;
  --c-line-dark: #3d3c3e;
  --c-line-dark-2: #555257;
  --c-wave: #333134;
  --c-photo: #d9d9d9;
  --c-blob-green: #e0fad3;
  --c-blob-peach: #ffeed1;
  --c-script-ghost: #e0dbd1;
  --grad-logo: linear-gradient(100deg, #fff 0%, #e9cba4 100%);
  --grad-rule: linear-gradient(90deg, #c56f39 0%, rgba(255, 255, 255, 0) 100%);

  /* fonts */
  --f-serif: "Cormorant Infant", "Cormorant Garamond", Georgia, serif;
  --f-serif-alt: "Cormorant Garamond", "Cormorant Infant", Georgia, serif;
  --f-sans: "Outfit", "Segoe UI", Arial, sans-serif;
  --f-logo: "Poppins", "Outfit", Arial, sans-serif;
  --f-script: "Mrs Saint Delafield", "Great Vibes", cursive;

  /* type scale (Figma px → fluid) */
  --fs-display: clamp(2.125rem, 1.2rem + 2.9vw, 3.75rem);   /* 60/70 banner + hero */
  --lh-display: 1.1667;
  --fs-h2: clamp(1.875rem, 1.35rem + 1.6vw, 2.8125rem);      /* 45/55 */
  --lh-h2: 1.2222;
  --fs-h3: clamp(1.25rem, 1.15rem + .3vw, 1.5rem);           /* 24 */
  --fs-sub: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);       /* 22/34 */
  --lh-sub: 1.5455;
  --fs-quote: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);     /* 22/41 */
  --lh-quote: 1.8636;
  --fs-body: 1rem;                                           /* 16/28 */
  --lh-body: 1.75;
  --fs-nav: .8125rem;                                        /* 13 */
  --fs-btn: .875rem;                                         /* 14 */
  --fs-meta: .8125rem;                                       /* 13/35 card overlay */
  --fs-badge: .6875rem;                                      /* 11 */
  --fs-logo: 1.75rem;                                        /* 28/23 */
  --fs-script-accent: 1.35em;                                /* script word inside a title */
  --fs-script-md: clamp(2.75rem, 2rem + 2.4vw, 3.75rem);     /* 60/89 */
  --fs-script-lg: clamp(3.25rem, 2rem + 4vw, 5.9375rem);     /* 95/116 */
  --fs-script-ghost: clamp(5rem, 1rem + 10.5vw, 12.5rem);    /* 200 */
  --ls-body: .02em;
  --ls-body-wide: .04em;
  --ls-sub: .02em;
  --ls-caps: .1em;

  /* layout */
  --container: 1290px;
  --gutter: clamp(16px, 3.2vw, 24px);
  --header-h: 120px;
  --banner-h: 349px;
  --hero-h: 776px;
  --section-y: clamp(64px, 6.25vw, 120px);
  --grid-gap: 30px;
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --radius-0: 0;
  --radius-check: 3px;
  --btn-w: 196px;
  --btn-h: 50px;
  --field-h: 52px;
  --card-ratio: 300 / 383;
  --cta-overlap: 94px;

  /* motion */
  --dur: .3s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --focus: 2px solid var(--c-copper);
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
.is-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--c-gold); }
main { display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 18px; background: var(--c-gold); color: var(--c-ink);
  font-weight: 400; font-size: var(--fs-btn); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Typography ------------------------------------------------ */
.display {
  font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: 0; text-transform: uppercase; color: var(--c-white);
}
.title {
  font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: 0; text-transform: uppercase; color: var(--c-black);
}
.title--alt { font-family: var(--f-serif-alt); }
.title .accent, .text-gold { color: var(--c-gold); }
.script {
  font-family: var(--f-script); font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--c-gold-deep); font-size: var(--fs-script-accent); line-height: 0;
}
.title-sm {
  font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.4;
  text-transform: uppercase; color: var(--c-black);
}
.subtitle {
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-heading);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.subtitle--plain { text-decoration: none; }
a.subtitle:hover { color: var(--c-copper-text); }
.body-text { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--c-text); }
.body-text a, .prose a { color: var(--c-copper-text); text-decoration: underline; text-underline-offset: 3px; }
.prose > * + * { margin-top: 28px; }
.eyebrow {
  font-family: var(--f-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: var(--ls-body-wide); color: var(--c-copper-text);
}
.is-dark { background: var(--c-ink); color: var(--c-white); }
.is-dark .title, .is-dark .title-sm, .is-dark .subtitle { color: var(--c-white); }
.is-dark .body-text { color: var(--c-white); }
.is-dark .body-text.is-muted { color: var(--c-muted); }
.is-dark a.subtitle:hover { color: var(--c-gold); }
.is-cream { background: var(--c-cream); }
.text-center { text-align: center; }

/* section heading patterns */
.section-head { display: flex; flex-direction: column; gap: 16px; }
.section-head--center { align-items: center; text-align: center; max-width: 760px; margin-inline: auto; }
.section-head--split {                                   /* title left · aside (subtitle / text / link) right */
  flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.section-head--split > * { flex: 1 1 0%; min-width: 0; }
.section-head--split > .section-head__title { max-width: 623px; }
.section-head--split > .section-head__aside { max-width: 630px; }
.section-head--split > .link-line { flex: 0 0 auto; }

/* ---------- 4. Layout ---------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.split { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 5vw, 100px); }
.split > * { flex: 1 1 0%; min-width: 0; }
.split--top { align-items: flex-start; }
.split--reverse { flex-direction: row-reverse; }

/* ---------- 5. Buttons & links ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: var(--btn-w); min-height: var(--btn-h); padding: 10px 28px;
  background: var(--c-gold); color: var(--c-ink); border: 1px solid var(--c-gold); border-radius: var(--radius-0);
  font-family: var(--f-sans); font-weight: 400; font-size: var(--fs-btn); line-height: 1.4;
  letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.btn--dark { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.is-dark .btn:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink); }
.btn--block { display: flex; width: 100%; }
.btn--sm { font-size: var(--fs-nav); min-height: var(--field-h); }
.btn svg { width: 22px; height: 10px; flex: none; }
.link-line {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--f-sans); font-weight: 400; font-size: var(--fs-btn); line-height: 2;
  letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px;
  color: var(--c-copper-text); white-space: nowrap;
}
.link-line::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width var(--dur) var(--ease); }
.link-line:hover::after { width: 44px; }
.is-dark .link-line { color: var(--c-gold); }

/* ---------- 6. Header ---------------------------------------------------- */
.site-header { position: relative; z-index: 50; background: var(--c-ink); color: var(--c-white); }
.site-header__inner {
  position: relative; display: flex; align-items: center; gap: clamp(28px, 7.3vw, 140px);
  min-height: var(--header-h);
}
.site-logo {
  position: relative; display: inline-flex; flex-direction: column; flex: none;
  font-family: var(--f-logo); font-weight: 500; font-size: var(--fs-logo); line-height: .8214;
  letter-spacing: -.04em; white-space: nowrap;
  color: var(--c-gold); background: var(--grad-logo); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-logo__line + .site-logo__line { align-self: flex-end; }
.site-logo__swash { position: absolute; left: 14%; top: 56%; width: 40%; height: 9px; color: var(--c-gold); overflow: visible; }
.site-header__menu { display: flex; align-items: center; gap: inherit; flex: 1 1 auto; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
  font-weight: 400; font-size: var(--fs-nav); line-height: 28px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-white); white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--c-gold); }
.header-call { display: inline-flex; align-items: center; gap: 12px; flex: none; margin-left: auto; margin-right: clamp(0px, 4.2vw, 80px); }
.header-call__icon { width: 26px; height: 29px; color: var(--c-gold); flex: none; }
.header-call__text { display: flex; flex-direction: column; }
.header-call__label, .header-call__number {
  font-weight: 400; font-size: var(--fs-nav); line-height: 22px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; white-space: nowrap;
}
.header-call__label { color: var(--c-muted); }
.header-call__number { color: var(--c-gold); }
.header-call:hover .header-call__number { color: var(--c-white); }
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; flex: none; }
.nav-toggle__bar {
  position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--c-gold);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 14px; }
.nav-toggle__bar:nth-child(2) { top: 21px; }
.nav-toggle__bar:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- 7. Hero (home) + inner-page banner -------------------------- */
.banner { position: relative; display: flex; align-items: flex-end; min-height: var(--banner-h); background: var(--c-ink); overflow: hidden; }
.banner__bg { position: absolute; inset: 0; }
.banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.banner .container { position: relative; display: flex; justify-content: flex-end; }
.banner__title { padding: 29px clamp(28px, 4.2vw, 80px) 30px; background: var(--c-ink-80); }
.hero { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; min-height: var(--hero-h); background: var(--c-ink); overflow: hidden; }
.hero__strip { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.hero__strip .photo { height: 100%; }
.hero__title {
  position: relative; width: 50%; max-width: 959px; min-height: 206px;
  display: flex; align-items: center; padding: 33px clamp(24px, 3.8vw, 73px); background: var(--c-ink-80);
}

/* ---------- 8. Footer ---------------------------------------------------- */
.site-footer { position: relative; background: var(--c-ink); color: var(--c-white); overflow: hidden; }
.site-footer::before {                                   /* line-wave texture */
  content: ""; position: absolute; inset: 0; background: url("/images/decor/waves.svg") center / cover no-repeat;
  opacity: .55; pointer-events: none;
}
.site-footer > .container { position: relative; }
.site-footer--after-cta { padding-top: var(--cta-overlap); }
.site-footer__main {
  display: grid; grid-template-columns: minmax(0, 659fr) minmax(0, 331fr) minmax(0, 300fr);
  align-items: start; padding-top: 110px; padding-bottom: 72px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8px; }
.site-footer__headline {
  max-width: 482px; font-family: var(--f-serif-alt); font-weight: 400; font-size: var(--fs-h2); line-height: 1.2444;
  text-transform: uppercase; color: var(--c-white);
}
.footer-col__title {
  font-family: var(--f-serif-alt); font-weight: 500; font-size: var(--fs-sub); line-height: 37px;
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-white); margin-bottom: 26px;
}
.footer-col__list li { font-size: var(--fs-body); line-height: 32px; letter-spacing: var(--ls-body-wide); color: var(--c-muted); }
.footer-col__list--contact li { line-height: 34px; }
.footer-col__list a:hover { color: var(--c-white); }
.footer-col__list .is-gold { color: var(--c-gold); }
.footer-social { display: flex; gap: 18px; margin-top: 16px; }
.footer-social a {
  font-weight: 400; font-size: var(--fs-nav); line-height: 28px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-white);
}
.footer-social a:hover { color: var(--c-gold); }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding-top: 25px; padding-bottom: 112px; border-top: 1px solid var(--c-line-dark);
}
.site-footer__copy { font-size: var(--fs-body); line-height: 28px; letter-spacing: var(--ls-body-wide); color: var(--c-white); }

/* ---------- 9. Photos & masks ------------------------------------------- */
.photo { position: relative; display: block; width: 100%; overflow: hidden; background: var(--c-photo); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.is-card { aspect-ratio: var(--card-ratio); }
.photo.is-portrait { aspect-ratio: 519 / 647; }
.photo.is-tall { aspect-ratio: 504 / 653; }
.photo.is-wide { aspect-ratio: 1005 / 513; }
.photo.is-square { aspect-ratio: 216 / 214; }
.photo-note {                                            /* dark caption box overlapping a photo corner */
  background: var(--c-ink); color: var(--c-white); padding: 42px 30px 42px 49px;
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub); text-transform: uppercase;
}
.play-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px;
  border-radius: 50%; background: var(--c-white); color: var(--c-ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.play-btn svg { width: 32px; height: 32px; margin-left: 5px; }
.play-btn:hover { transform: scale(1.06); background: var(--c-gold); }

/* ---------- 10. Decoration ---------------------------------------------- */
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob--green { width: 496px; height: 398px; opacity: .8; background: radial-gradient(closest-side, var(--c-blob-green), rgba(255, 255, 255, 0)); }
.blob--peach { width: 570px; height: 416px; opacity: .7; background: radial-gradient(closest-side, var(--c-blob-peach), rgba(255, 255, 255, 0)); }
.has-blobs { position: relative; overflow: hidden; }
.has-blobs > .container { position: relative; }
.has-blobs > .blob--green { left: 2.1%; top: 0; }
.has-blobs > .blob--peach { right: 0; bottom: 0; }
.has-waves { position: relative; overflow: hidden; }
.has-waves::before {
  content: ""; position: absolute; inset: 0; background: url("/images/decor/waves.svg") left center / cover no-repeat; pointer-events: none;
}
.has-waves > .container { position: relative; }
.ghost-script {
  position: absolute; font-family: var(--f-script); font-weight: 400; font-size: var(--fs-script-ghost);
  line-height: 1; color: var(--c-white); white-space: nowrap; pointer-events: none; user-select: none;
}
.script-md { font-family: var(--f-script); font-weight: 400; font-size: var(--fs-script-md); line-height: 1.48; color: var(--c-script-ghost); }
.script-lg { font-family: var(--f-script); font-weight: 400; font-size: var(--fs-script-lg); line-height: 1.22; letter-spacing: .04em; color: var(--c-cream); }
.ornament { display: flex; align-items: center; width: 100%; color: var(--c-copper); }
.ornament::before, .ornament::after { content: ""; flex: 1 1 0%; height: 1px; background: var(--grad-rule); }
.ornament::after { transform: scaleX(-1); }
.ornament svg { width: 228px; height: 30px; flex: none; }
.divider { border: 0; height: 1px; margin: 0; background: var(--c-line); }
.is-dark .divider { background: var(--c-line-dark-2); }
.badge-rotate { width: 132px; height: 132px; color: var(--c-gold); pointer-events: none; }
.badge-rotate svg { width: 100%; height: 100%; overflow: visible; }
.badge-rotate text { font-family: var(--f-sans); font-weight: 500; font-size: 11px; letter-spacing: .12em; fill: currentColor; text-transform: uppercase; }
.badge-rotate__ring { transform-origin: 50% 50%; animation: badge-spin 24s linear infinite; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
.stars { display: inline-flex; color: var(--c-copper); }
.stars svg { width: 16px; height: 16px; }
.stars .is-off { color: var(--c-star-off); }

/* ---------- 11. Cards --------------------------------------------------- */
.model-card { position: relative; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.model-card__media { position: relative; }
.model-card__name {
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-black);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.is-dark .model-card__name { color: var(--c-white); }
.model-card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; background: var(--c-ink-80); color: var(--c-white); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.model-card:hover .model-card__overlay, .model-card:focus-within .model-card__overlay { opacity: 1; }
.model-card__stats li, .model-card__cta {
  font-weight: 400; font-size: var(--fs-meta); line-height: 35px; letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.model-card__cta { display: inline-flex; flex-direction: column; align-items: center; color: var(--c-gold); }
.model-card__cta::before { content: ""; width: 1px; height: 34px; margin-bottom: 8px; background: currentColor; }
.model-card__cta::after { content: ""; position: absolute; inset: 0; }      /* whole photo clickable */
.model-card__cta:hover { color: var(--c-white); }

.place-strip { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.place-strip__label {
  position: absolute; left: 50%; top: 75px; z-index: 1; transform: translateX(-50%);
  min-width: min(471px, 80%); padding: 5px 40px; background: var(--c-ink); color: var(--c-white); text-align: center;
  font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-h3); line-height: 55px; text-transform: uppercase; white-space: nowrap;
}
.place { display: flex; flex-direction: column; gap: 15px; text-align: center; }
.place__name {
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-heading);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}

/* ---------- 12. Feature items ------------------------------------------- */
.icon { width: 60px; height: 60px; flex: none; color: var(--c-black); }
.is-dark .icon { color: var(--c-white); }
.feature { display: flex; align-items: flex-start; gap: 29px; }
.feature__body { display: flex; flex-direction: column; gap: 13px; max-width: 288px; }
.feature__title {
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-black);
}
.is-dark .feature__title { color: var(--c-white); font-family: var(--f-serif-alt); }
.is-dark .feature__body .body-text { color: var(--c-muted); letter-spacing: var(--ls-body-wide); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 53px 60px; }
.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.feature-strip__item { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 0 24px 10px; text-align: center; border-left: 1px solid var(--c-line); }
.feature-strip__item:first-child { border-left: 0; }
.feature-strip__item .feature__title { max-width: 195px; }

/* ---------- 13. Testimonials -------------------------------------------- */
.quote { position: relative; padding-top: 36px; }
.quote::before {
  content: ""; position: absolute; left: 0; top: 0; width: 179px; height: 160px;
  background: url("/images/decor/quote.svg") left top / contain no-repeat;
}
.quote > * { position: relative; }
.quote__text {
  font-family: var(--f-serif-alt); font-weight: 500; font-size: var(--fs-quote); line-height: var(--lh-quote);
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-heading);
}
.quote__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 24px; }
.quote__name {
  font-family: var(--f-serif-alt); font-weight: 500; font-size: var(--fs-quote); line-height: var(--lh-quote);
  letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-heading); font-style: normal;
}

/* ---------- 14. Rates --------------------------------------------------- */
.rate-row { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px, 4vw, 60px); }
.rate-row__aside { flex: 1 1 0%; max-width: 349px; padding-top: 60px; }
.rate-row__main { flex: 1 1 0%; max-width: 855px; min-width: 0; }
.rate-row__main > .subtitle { display: block; margin-top: 6px; }
.rate-row__main > .body-text { margin-top: 28px; }
.rate-row__label { display: block; margin-bottom: 12px; }
.rate-list { font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: var(--ls-sub); text-transform: uppercase; color: var(--c-heading); }
.rate-list div { display: flex; flex-wrap: wrap; gap: 0 12px; }

/* ---------- 15. CTA band ------------------------------------------------ */
.cta-band {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px clamp(32px, 6vw, 120px);
  min-height: 248px; padding: 56px clamp(24px, 8.3vw, 107px); background: var(--c-gold); color: var(--c-black);
}
.cta-band > * { flex: 1 1 0%; min-width: 0; }
.cta-band__title { max-width: 520px; }
.cta-band__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; max-width: 436px; }
.cta-band__phone { font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--c-black); white-space: nowrap; }
.cta-band__phone:hover { color: var(--c-copper-text); }
.cta-band--overlap { margin-bottom: calc(-1 * var(--cta-overlap)); }

/* ---------- 16. Forms --------------------------------------------------- */
.form-panel { max-width: 850px; margin-inline: auto; padding: clamp(40px, 8vw, 107px) clamp(20px, 8vw, 111px) clamp(40px, 8vw, 120px); background: var(--c-cream); }
.form-panel__head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 42px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.field { position: relative; display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field__label {
  position: absolute; left: 22px; top: 12px; right: 40px; pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 400; font-size: var(--fs-nav); line-height: 28px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text);
  transition: opacity var(--dur) var(--ease);
}
.field__input {
  width: 100%; min-height: var(--field-h); padding: 11px 22px; background: var(--c-white);
  border: 1px solid var(--c-line-field); border-radius: var(--radius-0); color: var(--c-heading);
  font-weight: 400; font-size: var(--fs-nav); line-height: 28px; letter-spacing: var(--ls-caps);
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease);
}
textarea.field__input { min-height: 140px; resize: vertical; }
.field__input:focus { border-color: var(--c-copper); }
.field.is-filled .field__label, .field:focus-within .field__label { opacity: 0; }
.field:not(.is-filled):not(:focus-within) .field__input[type="date"],
.field:not(.is-filled):not(:focus-within) .field__input[type="time"],
.field:not(.is-filled):not(:focus-within) select.field__input { color: transparent; }
.field.is-invalid .field__input { border-color: var(--c-copper-text); }
.field--select::after {
  content: ""; position: absolute; right: 22px; top: 23px; width: 0; height: 0; pointer-events: none;
  border: 5px solid transparent; border-top: 7px solid var(--c-ink); border-bottom: 0;
}
.field select option { color: var(--c-heading); }
.choice-group { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-block: 38px 28px; }
.choice-group__title { text-align: center; }
.choice-group__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 31px; }
.choice {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-weight: 400; font-size: var(--fs-nav); line-height: 28px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text);
}
.choice input {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin: 0; flex: none;
  border: 1px solid var(--c-text); border-radius: var(--radius-check); background: transparent; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.choice input:checked { background: var(--c-gold); border-color: var(--c-gold-deep); }
.form-status { min-height: 28px; margin-top: 14px; text-align: center; font-size: var(--fs-btn); color: var(--c-copper-text); }
.form-note { margin-top: 8px; text-align: center; font-size: var(--fs-btn); }

/* ---------- 17. Carousel + slider --------------------------------------- */
.carousel { --visible: 4; --gap: var(--grid-gap); position: relative; }
.carousel__viewport { overflow: hidden; touch-action: pan-y; }
.carousel__track { display: flex; gap: var(--gap); transition: transform .5s var(--ease); will-change: transform; }
.carousel.is-dragging .carousel__track { transition: none; }
.carousel__item { flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible)); min-width: 0; }
.carousel__nav, .slider__nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.carousel__arrow, .slider__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  border: 1px solid currentColor; color: var(--c-ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.is-dark .carousel__arrow, .is-dark .slider__arrow { color: var(--c-gold); }
.carousel__arrow svg, .slider__arrow svg { width: 24px; height: 12px; }
.carousel__arrow:hover:not(:disabled), .slider__arrow:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.carousel__arrow:disabled { opacity: .35; cursor: default; }
.dots { display: flex; align-items: center; gap: 10px; }
.dots button { width: 28px; height: 24px; position: relative; }
.dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: currentColor; opacity: .3; }
.dots button[aria-current="true"]::before { opacity: 1; background: var(--c-copper); }
.is-dark .dots button[aria-current="true"]::before { background: var(--c-gold); }
.slider { position: relative; }
.slider__track { display: grid; }
.slider__slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.slider__slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }

/* ---------- 18. Responsive ---------------------------------------------- */
@media (max-width: 1600px) {
  :root { --hero-h: 48.5vw; }
}
@media (max-width: 1280px) {
  :root { --fs-nav: .75rem; --grid-gap: 24px; }
  .site-header__inner { gap: 36px; }
  .site-nav { gap: 20px; }
  .site-footer__main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .feature-grid { gap: 40px 32px; }
  .carousel { --visible: 3; }
}
@media (max-width: 991px) {
  :root { --header-h: 88px; --banner-h: 280px; --hero-h: 520px; --fs-nav: .8125rem; }
  .nav-toggle { display: block; }
  .site-header__menu {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 28px;
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    padding: 12px var(--gutter) 36px; background: var(--c-ink); border-top: 1px solid var(--c-line-dark);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .site-header__menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .header-call { margin-inline: 0; }
  .site-header .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header .site-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--c-line-dark); font-size: .875rem; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--reverse { flex-direction: column; align-items: stretch; }
  .split > * { flex: 0 0 auto; }
  .section-head--split { flex-direction: column; gap: 16px; }
  .section-head--split > * { flex: 0 0 auto; }
  .section-head--split > .section-head__title, .section-head--split > .section-head__aside { max-width: none; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .feature-strip__item:nth-child(odd) { border-left: 0; }
  .place-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .place-strip__label { position: static; transform: none; grid-column: 1 / -1; min-width: 0; white-space: normal; line-height: 1.6; padding-block: 12px; }
  .hero__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__strip .photo:nth-child(n+3) { display: none; }
  .hero__title { width: 70%; min-height: 0; }
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding-top: 72px; padding-bottom: 48px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { padding-bottom: 56px; }
  .site-footer .site-nav { flex-wrap: wrap; gap: 4px 24px; }
  .rate-row__aside { max-width: 240px; }
  .cta-band { flex-direction: column; align-items: flex-start; min-height: 0; }
  .cta-band > * { flex: 0 0 auto; }
  .cta-band__title, .cta-band__aside { max-width: none; }
  .cta-band__phone { white-space: normal; }
  .carousel { --visible: 2; }
}
@media (max-width: 767px) {
  :root { --banner-h: 220px; --hero-h: 440px; --grid-gap: 16px; }
  .banner__title { padding: 18px 24px; }
  .hero__title { width: 100%; max-width: none; padding-block: 24px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .rate-row { flex-direction: column; gap: 12px; }
  .rate-row__aside, .rate-row__main { flex: 0 0 auto; max-width: none; width: 100%; }
  .rate-row__aside { order: 2; padding-top: 0; }
  .rate-row__main > .body-text { margin-top: 16px; }
  .ornament svg { width: 160px; }
  .photo-note { padding: 24px; }
  .play-btn { width: 72px; height: 72px; }
  .play-btn svg { width: 24px; height: 24px; }
  .quote::before { width: 120px; height: 107px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 479px) {
  :root { --header-h: 76px; --fs-logo: 1.5rem; --hero-h: 380px; }
  .site-footer__main { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-strip { grid-template-columns: minmax(0, 1fr); }
  .feature-strip__item { border-left: 0; }
  .place-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { min-width: 0; }
  .carousel { --visible: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}