@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

/* Fraunces ships a decorative swash ampersand that reads as cursive at heading
   sizes. Map only U+0026 to DM Sans so "Care & Services" gets a plain, generic
   ampersand while every other character still renders in Fraunces. */
@font-face {
  font-family: "Plain Ampersand";
  src: url("../fonts/dm-sans-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0026;
}

@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #15130f;
  --muted: #4c463d;
  --pine: #b67a08;
  --pine-dark: #3a2a0e;
  --gold: #d7a520;
  --gold-dark: #744b00;
  --cream: #f5f1e8;
  --paper: #fdfcf9;
  --white: #ffffff;
  --line: #ddd6c9;
  --focus: #8a5d07;
  --shadow: 0 18px 50px rgba(43, 37, 27, 0.12);
  --radius: 0.9rem;
  --content: 74rem;
  --display-font: "Plain Ampersand", "Fraunces", Georgia, "Times New Roman", serif;
  --body-font: "DM Sans", system-ui, -apple-system, Arial, sans-serif;
  --mono-font: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fluid: 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-quick: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  scrollbar-gutter: stable;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body-font);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

html.menu-open,
body.menu-open {
  overflow: hidden;
}

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

a {
  color: var(--pine-dark);
  transition: color 160ms ease;
}

a:hover {
  color: var(--gold-dark);
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-180%);
  padding: 0.75rem 1rem;
  color: var(--white);
  background: var(--ink);
  border-radius: 0.35rem;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 252, 249, 0.92);
  border-bottom: 1px solid rgba(222, 212, 193, 0.82);
  backdrop-filter: blur(18px) saturate(120%);
}

.header-inner,
.section-inner,
.footer-inner {
  width: min(calc(100% - 2rem), var(--content));
  margin-inline: auto;
}

.header-inner {
  min-height: 5.6rem;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.4rem);
}

.brand,
.header-cta,
.menu-toggle {
  grid-row: 1;
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  touch-action: manipulation;
}

.brand img {
  width: 210px;
  height: auto;
}

.primary-nav {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  display: flex;
  width: min(86vw, 31rem);
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--paper);
  border-left: 1px solid rgba(138, 93, 7, 0.22);
  box-shadow: -28px 0 80px rgba(31, 25, 15, 0.22);
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(105%, 0, 0);
  transition:
    transform 620ms var(--ease),
    visibility 620ms;
  contain: layout paint;
  will-change: transform;
}

.primary-nav.open {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.drawer-header {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 6.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 5vw, 2.4rem);
  border-bottom: 1px solid rgba(138, 93, 7, 0.2);
  font-family: var(--display-font);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  font-weight: 560;
  line-height: 1.12;
}

.drawer-header small {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--gold-dark);
  font-family: var(--body-font);
  font-size: 0.65rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drawer-close {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(138, 93, 7, 0.28);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.65rem;
  line-height: 1;
  transition: transform var(--motion-fluid), color var(--motion-quick), background-color var(--motion-quick);
}

.drawer-close:hover {
  color: var(--white);
  background: var(--gold-dark);
  transform: rotate(90deg);
}

.drawer-close:focus-visible {
  color: var(--gold-dark);
  background: var(--white);
  transform: none;
}

.primary-nav ul {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  gap: 0;
  margin: 0;
  padding: clamp(1rem, 4vw, 2rem) clamp(1.25rem, 5vw, 2.4rem) 2.5rem;
  counter-reset: nav-item;
  list-style: none;
}

.primary-nav li {
  counter-increment: nav-item;
  opacity: 0;
  transform: translateX(38px);
  transition:
    opacity 350ms ease,
    transform 500ms var(--ease);
}

.primary-nav.open li {
  opacity: 1;
  transform: none;
}

.primary-nav.open li:nth-child(1) {
  transition-delay: 0.12s;
}

.primary-nav.open li:nth-child(2) {
  transition-delay: 0.18s;
}

.primary-nav.open li:nth-child(3) {
  transition-delay: 0.24s;
}

.primary-nav.open li:nth-child(4) {
  transition-delay: 0.3s;
}

.primary-nav.open li:nth-child(5) {
  transition-delay: 0.36s;
}

.primary-nav a {
  position: relative;
  display: grid;
  min-height: 4.65rem;
  grid-template-columns: 2.9rem 1fr auto;
  align-items: center;
  padding: 0.95rem 0.4rem 0.95rem 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid rgba(138, 93, 7, 0.18);
  font-family: var(--display-font);
  font-size: clamp(1.5rem, 3.7vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
  transition: color var(--motion-quick), transform var(--motion-fluid), background-color var(--motion-quick), box-shadow var(--motion-quick);
}

.primary-nav li:not(.drawer-tour-item) a::before {
  align-self: start;
  margin-top: 0.62rem;
  color: var(--gold-dark);
  content: "0" counter(nav-item);
  font-family: var(--mono-font);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.primary-nav li:not(.drawer-tour-item) a::after {
  color: transparent;
  content: "↗";
  font-family: var(--body-font);
  font-size: 0.95rem;
  transform: translate3d(-0.5rem, 0.5rem, 0);
  transition: color var(--motion-quick), transform var(--motion-fluid);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--gold-dark);
  transform: translate3d(0.45rem, 0, 0);
}

.primary-nav li:not(.drawer-tour-item) a:hover::after,
.primary-nav li:not(.drawer-tour-item) a:focus-visible::after {
  color: var(--gold-dark);
  transform: translate3d(0, 0, 0);
}

.primary-nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(215, 165, 32, 0.16), transparent 75%);
  box-shadow: inset 3px 0 0 var(--gold-dark);
}

.drawer-tour-item {
  margin-top: 1.3rem;
}

.primary-nav .drawer-tour-link {
  min-height: 3.4rem;
  display: flex;
  justify-content: center;
  padding: 0.85rem 1.2rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--gold-dark);
  border-bottom: 0;
  border-radius: 0.35rem;
  box-shadow:
    0 4px 0 var(--gold-dark),
    7px 9px 0 rgba(215, 165, 32, 0.22),
    0 18px 30px rgba(43, 37, 27, 0.13);
  font-family: var(--body-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  transition:
    transform var(--motion-fluid),
    box-shadow var(--motion-fluid);
}

.primary-nav .drawer-tour-link:hover,
.primary-nav .drawer-tour-link:focus-visible {
  color: var(--ink);
  transform: translate3d(0, 3px, 0);
  box-shadow:
    0 1px 0 var(--gold-dark),
    4px 5px 0 rgba(215, 165, 32, 0.26),
    0 10px 18px rgba(43, 37, 27, 0.12);
}

.primary-nav .drawer-tour-link:hover,
.primary-nav .drawer-tour-link:focus-visible {
  padding-left: 1.2rem;
  color: var(--white);
  background: var(--gold-dark);
}

.menu-backdrop {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: block;
  padding: 0;
  background: rgba(25, 20, 12, 0.42);
  backdrop-filter: blur(3px);
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 450ms var(--ease),
    visibility 450ms;
}

body.menu-open .menu-backdrop {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.menu-toggle {
  position: relative;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--motion-quick), background-color var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-fluid), transform var(--motion-fluid);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: var(--gold-dark);
  background: var(--white);
  border-color: var(--gold-dark);
  box-shadow: 0 10px 24px rgba(43, 37, 27, 0.14), 0 0 0 5px rgba(215, 165, 32, 0.1);
  transform: scale(1.04);
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  position: absolute;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  content: "";
  transform: translateX(-50%);
  transition: transform var(--motion-fluid), opacity var(--motion-quick), top var(--motion-fluid), bottom var(--motion-fluid);
}

.menu-toggle::before {
  top: 0.95rem;
}

.menu-toggle span {
  top: calc(50% - 1px);
}

.menu-toggle::after {
  bottom: 0.95rem;
}

.menu-toggle[aria-expanded="true"] span {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"]::before {
  top: calc(50% - 1px);
  transform: translateX(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"]::after {
  top: calc(50% - 1px);
  bottom: auto;
  transform: translateX(-50%) rotate(-45deg);
}

.button,
.button-secondary {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-fluid), background-color var(--motion-quick), color var(--motion-quick), box-shadow var(--motion-fluid), border-color var(--motion-quick);
}

.button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--gold-dark);
  box-shadow: 4px 4px 0 rgba(215, 165, 32, 0.2);
}

.button-secondary {
  color: var(--ink);
  background: transparent;
}

.header-cta {
  grid-column: 3;
  position: relative;
  top: -0.15rem;
  margin-right: clamp(0.25rem, 1vw, 0.65rem);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--gold-dark);
  box-shadow: 4px 4px 0 rgba(215, 165, 32, 0.2);
}

.header-cta:hover,
.header-cta:focus-visible {
  color: var(--white);
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  box-shadow: 7px 7px 0 rgba(215, 165, 32, 0.18);
}

.menu-toggle {
  grid-column: 4;
}

.button:hover,
.button-secondary:hover {
  transform: translateY(-2px);
}

.button:hover {
  color: var(--white);
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  box-shadow: 7px 7px 0 rgba(215, 165, 32, 0.16);
}

.button-secondary:hover {
  color: var(--ink);
  background: #f4e4ad;
  border-color: var(--gold-dark);
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--gold-dark);
  font-family: var(--mono-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: var(--display-font);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  margin-bottom: 1.2rem;
  font-size: clamp(2.7rem, 5.2vw, 5rem);
  letter-spacing: -0.032em;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -0.028em;
}

h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
}

p {
  margin-top: 0;
}

.lead {
  max-width: 44rem;
  color: #3f3a32;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.hero {
  position: relative;
  overflow: clip;
  padding: clamp(2rem, 4vw, 3.5rem) 1rem clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 88% 8%, rgba(215, 165, 32, 0.13), transparent 30rem),
    linear-gradient(145deg, #fdfcf9 0%, #f4efe4 100%);
}

.hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(28, 27, 24, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 27, 24, 0.025) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  pointer-events: none;
}

.hero::after,
.page-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(circle 22rem at 72% 28%, rgba(215, 165, 32, 0.1), transparent 74%);
  content: "";
  opacity: 0.7;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: min(100%, 80rem);
  min-height: 40rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(26rem, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero-copy {
  min-width: 0;
  padding-block: 3rem;
}

.hero-copy h1 {
  max-width: 43rem;
  margin-bottom: 1.5rem;
  font-size: clamp(3rem, 4.7vw, 4.3rem);
}

.hero-copy h1 span {
  color: var(--gold-dark);
  font-style: italic;
  font-weight: 500;
}

.hero-copy .lead {
  max-width: 35rem;
  color: #413c34;
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-kicker span {
  width: 2.3rem;
  height: 2px;
  background: var(--gold);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.1rem;
}

/* Both hero buttons occupy an identical box rather than sizing to their labels. */

.hero-actions .button {
  min-width: 14rem;
}

.hero-media {
  position: relative;
  align-self: center;
  /* The frame takes the shape of whichever photograph is showing (set by
     site.js), so a landscape group shot gets a landscape frame and an upright
     portrait gets an upright one. Every photo then fills its frame edge to edge
     instead of floating in empty bands. Falls back to 4:5 before script runs. */
  aspect-ratio: var(--hero-ratio, 4 / 5);
  --hero-mat: clamp(1.75rem, 3.4vw, 3rem);
  width: 100%;
  max-width: 34rem;
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  /* Quiet mount. The heavy bevel and hard gold plane are gone; what is left is
     a hairline edge, a clean surface and one soft shadow, so the photograph is
     the thing you look at rather than the frame around it. */
  border: 1px solid rgba(138, 93, 7, 0.22);
  border-radius: clamp(1.1rem, 2vw, 1.7rem);
  box-shadow: 0 18px 44px rgba(39, 31, 17, 0.14);
  transform: translate3d(0, 0, 0);
  /* One declaration only. A second `transition` later in this rule used to
     overwrite this one and silently disabled the aspect-ratio animation. */
  transition:
    aspect-ratio 700ms var(--ease),
    transform var(--motion-fluid),
    box-shadow var(--motion-fluid),
    border-color var(--motion-quick);
}

.hero-media::after {
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(72, 50, 10, 0.3));
  content: "";
  pointer-events: none;
}

/* Hero slideshow. Slides crossfade in place. `contain` keeps every photograph
   whole regardless of orientation - the landscape house fills the frame exactly
   (its ratio defines it) while portrait resident photos sit centred on the warm
   surround rather than being cropped through people's faces. */

.hero-media {
  background:
    radial-gradient(circle at 70% 16%, rgba(215, 165, 32, 0.13), transparent 56%),
    linear-gradient(158deg, #fffefb 26%, var(--cream));
}

.hero-media img {
  position: absolute;
  /* Inset leaves a warm mat between the gold frame and the photograph, the same
     treatment as the moments carousel. Scales with the viewport. */
  /* A genuine mat: the photograph sits well inside the mount instead of running
     to its edges. Generous corner rounding so the picture reads as a soft
     rounded rectangle rather than a square dropped into a rounded box.
     Width and height are computed rather than left auto: an absolutely
     positioned <img> with auto sizing takes its intrinsic width and ignores the
     right/bottom insets, which let the photo spill past the frame. */
  top: var(--hero-mat);
  left: var(--hero-mat);
  width: calc(100% - 2 * var(--hero-mat));
  height: calc(100% - 2 * var(--hero-mat));
  max-width: none;
  object-fit: cover;
  object-position: center;
  /* Generously rounded, and with the wide mat above it the corners never come
     near the surrounding rectangle on any side. */
  border-radius: clamp(1rem, 1.9vw, 1.5rem);
  box-shadow: 0 8px 22px rgba(43, 37, 27, 0.14);
  opacity: 0;
  transition: opacity 1100ms ease;
}

/* Before the script takes over, the first photograph is the visible one, so a
   scripting failure leaves the hero showing the house rather than nothing. */
.hero-media:not([data-ready]) img:first-of-type,
.hero-media img.is-active {
  opacity: 1;
}

.hero-note {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1;
  max-width: 20rem;
  margin: 0;
  padding: 1rem 1.15rem;
  color: var(--white);
  background: rgba(28, 27, 24, 0.91);
  border-left: 3px solid var(--gold);
  border-radius: 0.25rem;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
}

.hero-note span {
  display: block;
  margin-bottom: 0.35rem;
  color: #f2c558;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3.2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.hero-trust li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  padding-right: 0.9rem;
}

.hero-trust strong {
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-trust span {
  color: var(--muted);
  font-family: var(--mono-font);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-cream {
  background: var(--cream);
}

.section-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.6fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.section-heading::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 5rem;
  height: 2px;
  background: var(--gold);
  content: "";
}

.section-heading > * {
  margin-bottom: 0;
}

.feature-grid,
.service-grid,
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.feature-card,
.service-card,
.value-card {
  position: relative;
  min-height: 16rem;
  padding: clamp(1.45rem, 3vw, 2rem);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(138, 93, 7, 0.24);
  border-radius: 0.65rem;
  box-shadow: 0 16px 42px rgba(43, 37, 27, 0.07);
  isolation: isolate;
}

.feature-card::before,
.service-card::before,
.value-card::before {
  position: absolute;
  z-index: -1;
  inset: auto -3.5rem -5rem auto;
  width: 10rem;
  height: 10rem;
  background: transparent;
  border: 1px solid rgba(215, 165, 32, 0.13);
  border-radius: 50%;
  box-shadow: none;
  content: "";
}

.feature-card::after,
.service-card::after,
.value-card::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), transparent 76%);
  content: "";
}

.feature-card,
.service-card,
.value-card,
.profile-card,
.contact-card,
.booking-preview {
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid), border-color var(--motion-quick);
}

.feature-card .number,
.service-icon {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 1.65rem;
  color: var(--gold-dark);
  background: transparent;
  font-family: var(--display-font);
  font-size: 2.65rem;
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.feature-card h3,
.service-card h3,
.value-card h3 {
  max-width: 15rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  line-height: 1.12;
}

.feature-card p,
.service-card p,
.value-card p {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  color: #423d35;
}

@keyframes icon-beat {
  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }
}

@keyframes icon-steam {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(1.5px) scaleY(0.94);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px) scaleY(1.06);
  }
}

@keyframes icon-lean {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-1.6px);
  }
}

/* Break the three-identical-boxes rhythm: varied shape, tint, depth and offset */

.feature-grid,
.service-grid,
.values-grid {
  perspective: 1400px;
}

.feature-card,
.service-card,
.value-card {
  border-radius: 1.25rem;
  box-shadow: 11px 13px 0 rgba(215, 165, 32, 0.13), 0 24px 48px rgba(43, 37, 27, 0.09);
}

/* Corner emblem: one per card, identical footprint on every card */

.card-icon {
  position: absolute;
  z-index: 2;
  top: clamp(1.1rem, 2.4vw, 1.55rem);
  right: clamp(1.1rem, 2.4vw, 1.55rem);
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(215, 165, 32, 0.24), rgba(255, 255, 255, 0) 68%),
    var(--white);
  border: 1px solid rgba(138, 93, 7, 0.3);
  border-radius: 50%;
  box-shadow: 3px 4px 0 rgba(215, 165, 32, 0.18);
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid);
}

.card-icon svg {
  width: 1.95rem;
  height: 1.95rem;
  fill: none;
  stroke: var(--gold-dark);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.card-icon .icon-ground {
  opacity: 0.4;
}

.card-icon .icon-heart {
  fill: rgba(215, 165, 32, 0.92);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: icon-beat 3.6s ease-in-out infinite;
}

.card-icon .icon-steam path {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: icon-steam 3.2s ease-in-out infinite;
}

.card-icon .icon-steam path:last-child {
  animation-delay: 0.7s;
}

.card-icon .icon-helper,
.card-icon .icon-pusher {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: icon-lean 4.4s ease-in-out infinite;
}

.card-icon .icon-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: icon-glow 5s ease-in-out infinite;
}

.card-icon .icon-sparkle path {
  transform-box: fill-box;
  transform-origin: center;
  animation: icon-twinkle 3.4s ease-in-out infinite;
}

.card-icon .icon-sparkle path:last-child {
  animation-delay: 1.2s;
}

.card-icon .icon-pill {
  transform-box: fill-box;
  transform-origin: center;
  animation: icon-beat 4.2s ease-in-out infinite;
}

@keyframes icon-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes icon-twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.moments-carousel {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 10px 10px 0 rgba(215, 165, 32, 0.16), 0 26px 58px rgba(43, 37, 27, 0.16);
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid);
  touch-action: pan-y;
}

.moment-slide {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.65fr);
  min-height: 42rem;
  animation: carousel-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.moment-slide[hidden] {
  display: none;
}

.moment-visual {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 42rem;
  align-items: center;
  justify-content: center;
  padding: 2.75rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 16%, rgba(215, 165, 32, 0.11), transparent 56%),
    linear-gradient(158deg, var(--white) 24%, var(--cream));
  isolation: isolate;
}

.moment-visual::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(26rem, 78%);
  aspect-ratio: 1;
  border: 1px solid rgba(138, 93, 7, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.45);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.moment-visual img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 33rem;
  object-fit: contain;
  object-position: center;
  border-radius: 0.2rem;
  box-shadow:
    0 0 0 0.7rem var(--white),
    0 0 0 calc(0.7rem + 1px) rgba(138, 93, 7, 0.36),
    16px 18px 0 rgba(215, 165, 32, 0.17),
    0 30px 58px rgba(43, 37, 27, 0.17);
  transform: rotate(-0.7deg);
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid);
}

.moments-carousel:hover .moment-visual img,
.moments-carousel:focus-within .moment-visual img {
  box-shadow:
    0 0 0 0.7rem var(--white),
    0 0 0 calc(0.7rem + 1px) rgba(138, 93, 7, 0.46),
    22px 25px 0 rgba(215, 165, 32, 0.21),
    0 38px 72px rgba(43, 37, 27, 0.2);
  transform: rotate(0deg) translateY(-5px);
}

.moment-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 165, 32, 0.12), transparent 16rem),
    var(--white);
  border-left: 1px solid var(--line);
}

.moment-copy span {
  margin-bottom: 1.3rem;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.moment-copy h3 {
  max-width: 22rem;
  margin-bottom: 1.2rem;
  color: var(--ink);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
}

.moment-copy p {
  max-width: 24rem;
  margin-bottom: 0;
  color: var(--muted);
}

.moments-controls {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.moments-controls button {
  display: grid;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #c8b785;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: transform var(--motion-fluid), color var(--motion-quick), background-color var(--motion-quick), box-shadow var(--motion-fluid);
}

.moments-controls button:hover,
.moments-controls button:focus-visible {
  color: var(--white);
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(43, 37, 27, 0.14);
}

.moment-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.moments-controls .moment-dot {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.moments-controls .moment-dot::before {
  width: 0.65rem;
  height: 0.65rem;
  background: #aaa18e;
  border-radius: 50%;
  content: "";
}

.moments-controls .moment-dot[aria-current="true"]::before {
  width: 0.9rem;
  height: 0.9rem;
  background: var(--gold-dark);
  box-shadow: 0 0 0 4px #f9e9b4;
}

@keyframes carousel-in {
  from {
    opacity: 0;
    transform: translateX(1.25rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-slide-direction="previous"] .moment-slide,
[data-slide-direction="previous"] .review-slide {
  animation-name: carousel-in-reverse;
}

@keyframes carousel-in-reverse {
  from {
    opacity: 0;
    transform: translateX(-1.25rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.split-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e8e3d8;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid);
}

.split-media::after {
  position: absolute;
  z-index: 2;
  inset: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: calc(var(--radius) - 0.35rem);
  content: "";
  pointer-events: none;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  box-shadow: none;
}

.split-media-spaces img {
  object-position: 52% 50%;
}

.check-list,
.plain-list {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.check-list li,
.plain-list li {
  position: relative;
  margin-bottom: 0.7rem;
  padding-left: 1.75rem;
}

.check-list li::before {
  position: absolute;
  left: 0;
  color: var(--pine);
  content: "✓";
  font-weight: 900;
}

.plain-list li::before {
  position: absolute;
  top: 0.7em;
  left: 0.25rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gold);
  border-radius: 50%;
  content: "";
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  background:
    radial-gradient(circle at 84% 20%, rgba(215, 165, 32, 0.14), transparent 24rem),
    var(--cream);
}

.page-hero::after {
  position: absolute;
  right: clamp(1rem, 8vw, 8rem);
  bottom: -8rem;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(138, 93, 7, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(215, 165, 32, 0.045), 0 0 0 6rem rgba(215, 165, 32, 0.025);
  content: "";
  pointer-events: none;
}

.page-hero .section-inner {
  position: relative;
  z-index: 1;
}

.page-hero .lead {
  max-width: 50rem;
}

.page-hero h1 {
  max-width: 58rem;
}

.section[id] {
  scroll-margin-top: 8rem;
}

#tour-request {
  scroll-margin-top: 8rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(8rem, 12vw, 11.5rem);
  grid-auto-flow: row dense;
  gap: 1rem;
}

.gallery-card {
  position: relative;
  grid-column: span 4;
  grid-row: span 2;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  color: var(--white);
  background: var(--ink);
  border: 0;
  border-radius: 0.9rem;
  cursor: zoom-in;
  box-shadow: 6px 6px 0 rgba(215, 165, 32, 0.15), 0 14px 32px rgba(43, 37, 27, 0.1);
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid);
}

/* 12-column pairs: 8+4 then 4+8, so every row fills exactly. No holes possible. */

.gallery-card:nth-child(4n + 1),
.gallery-card:nth-child(4n) {
  grid-column: span 8;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card span {
  position: absolute;
  inset: auto 0 0;
  padding: 2.4rem 1rem 0.9rem;
  background: linear-gradient(transparent, rgba(43, 34, 18, 0.9));
  font-weight: 600;
  text-align: left;
}

.gallery-dialog {
  width: min(92vw, 72rem);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.gallery-dialog::backdrop {
  background: rgba(30, 25, 17, 0.84);
}

.gallery-dialog img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #1f1b14;
}

.dialog-caption {
  margin: 0;
  padding: 1rem 4rem 1rem 1.2rem;
}

.dialog-close {
  position: absolute;
  right: 0.75rem;
  bottom: 0.55rem;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--white);
  background: var(--pine-dark);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

.profile-card {
  position: relative;
  display: grid;
  min-height: 22rem;
  grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1.15fr);
  gap: clamp(1.35rem, 3vw, 2.25rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.15rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(215, 165, 32, 0.14), transparent 13rem),
    linear-gradient(145deg, #ffffff, #fbf7ee);
  border: 1px solid rgba(138, 93, 7, 0.24);
  border-radius: 0.35rem;
  box-shadow: 8px 8px 0 rgba(215, 165, 32, 0.13), 0 22px 50px rgba(43, 37, 27, 0.08);
  isolation: isolate;
}

.profile-card::after {
  position: absolute;
  z-index: -1;
  right: -5rem;
  bottom: -7rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgba(215, 165, 32, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 3.5rem rgba(215, 165, 32, 0.03);
  content: "";
}

.portrait,
.portrait-frame {
  width: clamp(10.5rem, 15vw, 12.5rem);
  height: clamp(10.5rem, 15vw, 12.5rem);
  border: 0.38rem solid var(--white);
  border-radius: 50%;
  outline: 1px solid rgba(138, 93, 7, 0.28);
  outline-offset: 0.35rem;
  box-shadow: 0 16px 34px rgba(43, 37, 27, 0.17);
}

.portrait {
  object-fit: cover;
}

.portrait-frame {
  overflow: hidden;
}

.portrait-frame .portrait-abreham {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-position: 50% 33%;
  transform: scale(1.55) translate(-6%, -6%);
}

.profile-card h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 560;
  line-height: 1.1;
}

.profile-role {
  margin-bottom: 1rem;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

.profile-card > div > p:last-child {
  margin-bottom: 0;
  color: #3f3a32;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.contact-card,
.booking-preview {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 rgba(215, 165, 32, 0.1);
}

.contact-card address {
  font-style: normal;
}

.contact-item {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.08rem;
  font-weight: 580;
  overflow-wrap: anywhere;
}

.address-link {
  color: inherit;
  text-decoration-color: rgba(215, 165, 32, 0.65);
  text-underline-offset: 0.2em;
}

/* Visible "opens elsewhere" cue on address and email links */

.address-link span[aria-hidden],
a[href^="https://mail.google.com"] span[aria-hidden] {
  display: inline-block;
  margin-left: 0.2em;
  color: var(--gold-dark);
  font-size: 0.85em;
  transition: transform var(--motion-quick);
}

.address-link:hover span[aria-hidden],
.address-link:focus-visible span[aria-hidden],
a[href^="https://mail.google.com"]:hover span[aria-hidden],
a[href^="https://mail.google.com"]:focus-visible span[aria-hidden] {
  transform: translate(2px, -2px);
}

.site-footer .address-link span[aria-hidden],
.site-footer a[href^="https://mail.google.com"] span[aria-hidden] {
  color: #f0c85e;
}

.address-link:hover,
.address-link:focus-visible {
  color: var(--gold-dark);
}

.site-footer .address-link:hover,
.site-footer .address-link:focus-visible {
  color: #f0c85e;
}

.calendar-preview {
  margin-block: 1.25rem;
  padding: 1rem;
  background: var(--cream);
  border: 1px solid rgba(138, 93, 7, 0.14);
  border-radius: 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 28px rgba(43, 37, 27, 0.07);
}

.calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.calendar-head h3 {
  margin-bottom: 0;
  font-family: inherit;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
}

.calendar-kicker {
  display: block;
  color: var(--pine);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calendar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.calendar-controls button {
  min-width: 2.55rem;
  min-height: 2.55rem;
  padding: 0.3rem 0.65rem;
  color: var(--pine-dark);
  background: var(--white);
  border: 1px solid #9d9a92;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 580;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.calendar-help {
  margin-bottom: 0.8rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.calendar-weekdays,
.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
  text-align: center;
}

.calendar-weekdays span {
  display: grid;
  min-height: 1.8rem;
  place-items: center;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.calendar-day {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid transparent;
  border-radius: 0.55rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 560;
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.calendar-empty {
  min-width: 0;
  min-height: 2.35rem;
}

.calendar-day.current-day {
  border-color: var(--pine);
  box-shadow: inset 0 0 0 1px var(--pine);
}

.calendar-day.selected {
  color: var(--ink);
  background: #f1bc24;
  border-color: var(--gold-dark);
  box-shadow: inset 0 0 0 1px var(--gold-dark);
}

.calendar-day:disabled,
.calendar-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
  transform: none;
}

.calendar-day:hover,
.calendar-day:focus-visible {
  color: var(--ink);
  background: #f6ca43;
  transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover img,
  .gallery-card:focus-visible img {
    transform: scale(1.035);
  }

  .calendar-controls button:hover {
    color: var(--white);
    background: var(--pine-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(43, 37, 27, 0.16);
  }

}

.button:active,
.button-secondary:active,
.menu-toggle:active,
.drawer-close:active,
.gallery-card:active,
.calendar-controls button:active,
.calendar-day:active {
  transform: translateY(1px);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.78rem 0.85rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #aaa69d;
  border-radius: 0.55rem;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.field-full .button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.reviews-section {
  background: linear-gradient(135deg, #fffdfa 0%, #fff7dd 100%);
  border-block: 1px solid var(--line);
}

.reviews-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.reviews-heading h2 {
  margin-bottom: 0;
}

.reviews-heading-link {
  color: var(--ink);
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--motion-quick), text-decoration-color var(--motion-quick);
}

.reviews-heading-link:hover,
.reviews-heading-link:focus-visible {
  color: var(--gold-dark);
  text-decoration-color: currentColor;
}

.google-rating {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 10px 26px rgba(43, 37, 27, 0.08);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid), border-color var(--motion-quick);
}

.google-rating:hover,
.google-rating:focus-visible {
  color: var(--ink);
  border-color: #c9a83d;
  box-shadow: 0 16px 34px rgba(43, 37, 27, 0.11);
  transform: translateY(-3px);
}

.google-rating strong,
.google-rating small {
  display: block;
  line-height: 1.3;
}

.google-rating small {
  color: var(--muted);
}

.google-icon {
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  place-items: center;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 43%, #fbbc05 0 68%, #ea4335 0 100%);
  background-clip: text;
  color: transparent;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.review-stars {
  color: var(--gold-dark);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.reviews-carousel {
  position: relative;
  overflow: hidden;
  background: var(--white);
  /* Was a raw #e3c66d at 2px, brighter and heavier than every other surface on
     the site. Matched to the card family instead. */
  border: 1px solid rgba(138, 93, 7, 0.26);
  border-radius: 1.25rem;
  box-shadow: 11px 13px 0 rgba(215, 165, 32, 0.14), 0 24px 48px rgba(43, 37, 27, 0.1);
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-fluid), box-shadow var(--motion-fluid);
  touch-action: pan-y;
}

.review-viewport {
  min-height: 20rem;
}

.review-slide {
  min-height: 20rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  animation: carousel-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.review-slide[hidden] {
  display: none;
}

.review-slide blockquote {
  max-width: 54rem;
  margin: 1rem 0 2rem;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(1.45rem, 3.2vw, 2.4rem);
  font-weight: 520;
  line-height: 1.32;
  letter-spacing: -0.008em;
}

.review-slide p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin: 0;
}

.review-slide p span {
  color: var(--muted);
}

.review-controls {
  display: flex;
  min-height: 4.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.review-controls button {
  display: grid;
  min-width: 2.35rem;
  min-height: 2.35rem;
  place-items: center;
  padding: 0.45rem 0.7rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #c8b785;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.review-controls button:hover,
.review-controls button:focus-visible {
  color: var(--white);
  background: var(--pine-dark);
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(43, 37, 27, 0.14);
}

.review-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.review-controls .review-dot {
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.review-controls .review-dot::before {
  width: 0.65rem;
  height: 0.65rem;
  background: #b3a98f;
  border-radius: 50%;
  content: "";
}

.review-controls .review-dot[aria-current="true"]::before {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--gold-dark);
  box-shadow: 0 0 0 4px #fff0bd;
}

.google-review-link {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding: 0.65rem 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.google-review-link .google-icon {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.5rem;
}

.google-review-link:hover,
.google-review-link:focus-visible {
  color: var(--ink);
  border-color: #c9a83d;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(43, 37, 27, 0.1);
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  color: #4a453c;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
}

/* Confirmation. Green, warm, and clearly a good outcome - never the amber that
   browsers use for warnings. A family that just booked a visit for their parent
   should feel welcomed, not cautioned. */

.form-status.is-success {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.95rem;
  padding: 1.2rem 1.25rem;
  color: #14532d;
  background: linear-gradient(180deg, #f4fdf7, #dcfce7);
  border: 1px solid #46b96a;
  border-radius: 0.75rem;
  box-shadow:
    6px 7px 0 rgba(70, 185, 106, 0.22),
    0 16px 36px rgba(20, 83, 45, 0.13);
  animation: status-rise 560ms var(--ease) both;
}

.form-status.is-success::before {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  color: #ffffff;
  background: #16a34a;
  border-radius: 50%;
  content: "\2713";
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  animation: status-check 460ms var(--ease) 220ms both;
}

.form-status.is-success .status-headline {
  display: block;
  margin-bottom: 0.35rem;
  color: #14532d;
  font-family: var(--display-font);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.form-status.is-success .status-detail {
  display: block;
  color: #23543a;
  font-size: 0.95rem;
  line-height: 1.55;
}

.form-status.is-success .status-tagline {
  display: block;
  margin-top: 0.7rem;
  color: #3f6b4e;
  font-family: var(--mono-font);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

@keyframes status-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes status-check {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-25deg);
  }

  70% {
    transform: scale(1.12) rotate(4deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.form-status.is-error {
  color: #6b1c16;
  background: #fff0ed;
  border-color: #c56b61;
}

.cta-band {
  padding-block: clamp(3rem, 6vw, 5rem);
  color: var(--white);
  background: var(--pine-dark);
}

.cta-band .section-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.cta-band h2 {
  max-width: 44rem;
  margin-bottom: 0;
}

.cta-band .button {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
  white-space: nowrap;
}

.site-footer {
  color: #f1e6cc;
  background: #2b2417;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr;
  gap: 3rem;
  padding-block: 4rem 2rem;
}

.footer-logo {
  width: 210px;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
}

.site-footer h2 {
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer a {
  color: #fff8e7;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-bottom {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .header-cta {
    display: none;
  }

  .menu-toggle {
    grid-column: 2;
  }

  .primary-nav {
    width: min(86vw, 31rem);
  }

  .hero-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-copy {
    max-width: 46rem;
    padding: 2.5rem 0 0.5rem;
  }

  .hero-media {
    min-height: 0;
  }

  .feature-grid,
  .service-grid,
  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .gallery-card,
  .gallery-card:nth-child(4n + 1),
  .gallery-card:nth-child(4n) {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .header-inner {
    min-height: 5rem;
  }

  .brand img {
    width: 180px;
  }

  .hero {
    padding: 1rem 1rem 3.5rem;
  }

  .hero-copy {
    padding-top: 2rem;
  }

  .hero-copy h1 {
    font-size: clamp(2.75rem, 13vw, 4.4rem);
  }

  .hero-trust {
    margin-top: 2.5rem;
  }

  .hero-media {
    min-height: 0;
  }

  .section-heading,
  .split,
  .contact-grid,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .section-heading {
    gap: 0.8rem;
  }

  .reviews-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .google-rating {
    width: 100%;
    flex-wrap: wrap;
  }

  .google-rating .review-stars {
    width: 100%;
    padding-left: 3.25rem;
  }

  .review-slide,
  .review-viewport {
    min-height: 22rem;
  }

  .review-controls {
    flex-wrap: wrap;
  }

  .feature-grid,
  .service-grid,
  .values-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .profile-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .portrait,
  .portrait-frame {
    margin-inline: auto;
  }

  .gallery-card,
  .gallery-card:nth-child(4n + 1),
  .gallery-card:nth-child(4n) {
    grid-column: 1 / -1;
  }

  .cta-band .section-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-bottom {
    grid-column: 1;
  }
}

@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .primary-nav {
    width: min(78vw, 27rem);
  }

  .drawer-header {
    min-height: 3.8rem;
    padding-block: 0.65rem;
  }

  .primary-nav ul {
    padding-top: 0.55rem;
    gap: 0.25rem;
  }

  .primary-nav a {
    min-height: 3rem;
  }
}

@media (max-width: 480px) {
  .hero-kicker {
    align-items: flex-start;
    font-size: 0.66rem;
    line-height: 1.5;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .button,
  .hero-actions .button-secondary {
    width: 100%;
  }

  .hero-trust {
    gap: 0.75rem;
  }

  .hero-trust li {
    display: grid;
    gap: 0.25rem;
  }

  .hero-media {
    min-height: 0;
  }

  .hero-note {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }

  .contact-grid {
    gap: 1rem;
  }

  .contact-card,
  .booking-preview {
    padding: 1rem;
  }

  .calendar-preview {
    margin-inline: 0;
    padding: 0.65rem;
  }

  .calendar-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-controls {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-controls button {
    min-width: 2.35rem;
    min-height: 2.35rem;
  }

  .calendar-weekdays,
  .calendar-dates {
    gap: 0.12rem;
  }

  .calendar-weekdays span {
    font-size: 0.67rem;
  }

  .calendar-day {
    min-height: 2rem;
    border-radius: 0.4rem;
    font-size: 0.76rem;
  }

  .calendar-empty {
    min-height: 2rem;
  }

}

@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .feature-card,
  .service-card,
  .value-card,
  .profile-card,
  .contact-card,
  .booking-preview {
    transform: translate3d(0, 0, 0);
  }

  .profile-card:hover,
  .contact-card:hover,
  .booking-preview:hover {
    transform: translate3d(0, -5px, 0);
    border-color: #c9b66f;
    box-shadow: 0 22px 46px rgba(43, 37, 27, 0.12);
  }

  .feature-card:hover,
  .service-card:hover,
  .value-card:hover {
    border-color: #c9b66f;
  }

  .feature-card:hover,
  .service-card:hover,
  .value-card:hover {
    transform: translate3d(0, -7px, 0) rotateX(3deg) rotateY(-4deg);
    box-shadow: 16px 20px 0 rgba(215, 165, 32, 0.16), 0 34px 62px rgba(43, 37, 27, 0.14);
  }

  .feature-card:hover .card-icon,
  .service-card:hover .card-icon,
  .value-card:hover .card-icon {
    transform: translate3d(0, -3px, 0) scale(1.07);
    box-shadow: 5px 7px 0 rgba(215, 165, 32, 0.26);
  }

  .hero-media:hover,
  .split-media:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 34px 72px rgba(39, 31, 17, 0.18);
  }

  .gallery-card:hover,
  .gallery-card:focus-visible {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 24px 48px rgba(43, 37, 27, 0.16);
  }

  .reviews-carousel:hover,
  .reviews-carousel:focus-within,
  .moments-carousel:hover,
  .moments-carousel:focus-within {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 30px 58px rgba(43, 37, 27, 0.14);
  }

  .button:hover,
  .button-secondary:hover,
  .google-review-link:hover,
  .calendar-controls button:hover,
  .moments-controls button:hover,
  .review-controls button:hover {
    transform: translate3d(0, -3px, 0);
  }
}

@media (max-width: 720px) {
  .moment-slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .moment-visual {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .moment-copy {
    padding: 1.6rem;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .moment-copy h3 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .moments-controls {
    flex-wrap: wrap;
  }

  .feature-card,
  .service-card,
  .value-card,
  .profile-card,
  .contact-card,
  .booking-preview,
  .moments-carousel,
  .reviews-carousel,
  .gallery-card {
    box-shadow: 4px 4px 0 rgba(215, 165, 32, 0.1), 0 10px 24px rgba(43, 37, 27, 0.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .feature-card,
  .service-card,
  .value-card,
  .profile-card,
  .contact-card,
  .booking-preview,
  .moments-carousel,
  .reviews-carousel,
  .hero-media,
  .split-media,
  .gallery-card {
    transform: none !important;
  }
}

/* Scroll reveal -------------------------------------------------------------
   [data-reveal] is added by site.js, never in the markup, so a scripting
   failure can never leave content invisible. The :not(.is-visible) selector
   raises specificity above the card transform rules further up the file. */

[data-reveal] {
  transition:
    opacity 750ms ease,
    transform 750ms var(--ease);
}

[data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

/* Drawer contact panel: fills the empty space below the nav list and gives
   families a direct route out of the menu without hunting for the contact page. */

.drawer-contact {
  margin: auto clamp(1.25rem, 5vw, 2.4rem) 2rem;
  padding: 1.4rem 1.5rem 1.55rem;
  background: var(--cream);
  border: 1px solid rgba(138, 93, 7, 0.2);
  border-radius: 0.8rem;
  box-shadow: 8px 9px 0 rgba(215, 165, 32, 0.18);
}

.drawer-contact-label {
  margin: 0 0 0.85rem;
  color: var(--gold-dark);
  font-family: var(--mono-font);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.primary-nav .drawer-contact-phone {
  display: block;
  min-height: 0;
  margin-bottom: 0.55rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-decoration: none;
}

.primary-nav .drawer-contact-phone:hover,
.primary-nav .drawer-contact-phone:focus-visible {
  color: var(--gold-dark);
  transform: none;
}

.primary-nav .drawer-contact-link {
  display: block;
  min-height: 0;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-family: var(--body-font);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: rgba(215, 165, 32, 0.6);
  text-underline-offset: 0.18em;
}

.primary-nav .drawer-contact-link:hover,
.primary-nav .drawer-contact-link:focus-visible {
  color: var(--gold-dark);
  transform: none;
}

/* Photo reel ----------------------------------------------------------------
   A continuously moving band of every gallery photograph, shown high on the
   homepage. No pause/play control: the track is duplicated and translated by
   exactly -50%, so the loop is seamless and never restarts visibly.
   Each photo is sized by HEIGHT with automatic width, which lets portrait and
   landscape shots sit side by side at their true proportions - nothing is
   stretched or cropped. */

.reel-section {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.photo-reel {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.photo-reel-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
  padding: 0.9rem 0 1.6rem;
  will-change: scroll-position;
}

.photo-reel img {
  height: clamp(12rem, 20vw, 18rem);
  width: auto;
  max-width: none;
  flex: none;
  object-fit: cover;
  border: 1px solid rgba(138, 93, 7, 0.22);
  border-radius: 0.7rem;
  box-shadow:
    7px 8px 0 rgba(215, 165, 32, 0.16),
    0 16px 32px rgba(43, 37, 27, 0.12);
}

@keyframes photo-reel-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-reel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .photo-reel-track {
    animation: none;
  }
}

/* Hero slideshow controls: discreet arrows so a visitor can move past a photo
   on any device. Swipe and arrow keys do the same thing. */

.hero-nav {
  position: absolute;
  z-index: 3;
  bottom: clamp(0.8rem, 1.6vw, 1.15rem);
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(138, 93, 7, 0.3);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(43, 37, 27, 0.16);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition:
    transform var(--motion-quick),
    background-color var(--motion-quick),
    color var(--motion-quick);
}

.hero-nav-previous {
  left: clamp(0.8rem, 1.6vw, 1.15rem);
}

.hero-nav-next {
  left: calc(clamp(0.8rem, 1.6vw, 1.15rem) + 3.1rem);
}

.hero-nav:hover,
.hero-nav:focus-visible {
  color: var(--white);
  background: var(--gold-dark);
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .hero-nav {
    width: 2.3rem;
    height: 2.3rem;
  }

  .hero-nav-next {
    left: calc(clamp(0.8rem, 1.6vw, 1.15rem) + 2.75rem);
  }
}

/* Value cards: real 3D ------------------------------------------------------
   The grid carries the perspective; each card becomes its own 3D space with
   preserve-3d, and the heading, body and emblem sit on different Z planes.
   When the card tilts, those layers shift by different amounts - actual
   parallax depth rather than a shadow pretending to be depth. */

.values-grid {
  perspective: 1000px;
}

.value-card {
  transform-style: preserve-3d;
}

.value-card h3 {
  position: relative;
  transform: translateZ(34px);
}

.value-card p {
  transform: translateZ(18px);
}

.value-emblem {
  position: absolute;
  top: clamp(1.2rem, 2.4vw, 1.7rem);
  right: clamp(1.2rem, 2.4vw, 1.7rem);
  width: 3.1rem;
  height: 3.1rem;
  transform: translateZ(58px);
  transition: transform 620ms var(--ease);
  pointer-events: none;
}

/* A different geometric figure per card, all drawn in gold. */

.value-card:nth-child(1) .value-emblem {
  border: 2px solid var(--gold-dark);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px rgba(215, 165, 32, 0.3),
    0 0 0 5px rgba(215, 165, 32, 0.14);
}

.value-card:nth-child(2) .value-emblem {
  border: 2px solid var(--gold-dark);
  border-radius: 0.65rem;
  box-shadow: 9px 9px 0 rgba(215, 165, 32, 0.26);
  transform: translateZ(58px) rotate(-9deg);
}

.value-card:nth-child(3) .value-emblem {
  border: 2px solid var(--gold-dark);
  border-radius: 0.3rem;
  box-shadow: inset 0 0 0 5px rgba(215, 165, 32, 0.28);
  transform: translateZ(58px) rotate(45deg);
}

/* Questions section: the photograph becomes a solid object that turns, and
   each question responds to the pointer. */

.split {
  perspective: 1300px;
}

.split-media {
  transform-style: preserve-3d;
}

.plain-list li {
  transition:
    transform var(--motion-quick),
    color var(--motion-quick);
}

.plain-list li::before {
  transition:
    transform var(--motion-quick),
    background-color var(--motion-quick);
}

@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .value-card:hover .value-emblem {
    transform: translateZ(84px) rotate(180deg) scale(1.12);
  }

  .value-card:nth-child(2):hover .value-emblem {
    transform: translateZ(84px) rotate(171deg) scale(1.12);
  }

  .value-card:nth-child(3):hover .value-emblem {
    transform: translateZ(84px) rotate(225deg) scale(1.12);
  }

  .split-media:hover {
    transform: translate3d(0, -7px, 0) rotateY(-7deg) rotateX(4deg);
    box-shadow: 26px 30px 0 rgba(215, 165, 32, 0.14), 0 40px 76px rgba(39, 31, 17, 0.2);
  }

  .plain-list li:hover {
    color: var(--ink);
    transform: translateX(7px);
  }

  .plain-list li:hover::before {
    background: var(--gold-dark);
    transform: scale(1.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-card h3,
  .value-card p,
  .value-emblem {
    transform: none !important;
  }
}

/* Photo reel controls -------------------------------------------------------
   Manual only. Arrows for mouse and keyboard, native scrolling for fingers.
   scroll-snap makes each photograph settle cleanly instead of stopping
   halfway, which is what makes a swipe feel deliberate rather than loose. */

.photo-reel-frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}

.photo-reel {
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(0.75rem, 1.5vw, 1.15rem);
  -webkit-overflow-scrolling: touch;
}

.photo-reel:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.photo-reel img {
  scroll-snap-align: center;
}

.reel-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(138, 93, 7, 0.32);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(43, 37, 27, 0.2);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  transform: translateY(-50%);
  transition:
    transform var(--motion-quick),
    background-color var(--motion-quick),
    color var(--motion-quick),
    opacity var(--motion-quick);
}

.reel-nav-previous {
  left: clamp(0.5rem, 1.6vw, 1.5rem);
}

.reel-nav-next {
  right: clamp(0.5rem, 1.6vw, 1.5rem);
}

.reel-nav:hover:not(:disabled),
.reel-nav:focus-visible {
  color: var(--white);
  background: var(--gold-dark);
  transform: translateY(-50%) scale(1.06);
}

.reel-nav:disabled {
  opacity: 0.32;
  cursor: default;
}

@media (max-width: 640px) {
  .reel-nav {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1rem;
  }
}

/* Hero arrows, repositioned ------------------------------------------------
   Previously stacked in the bottom-left corner, sitting on top of the
   photograph. Now centred vertically on the left and right edges of the mount,
   outside the picture, so nothing covers the photo and the pair reads as a
   matched set. */

.hero-nav {
  top: 50%;
  bottom: auto;
  width: 2.9rem;
  height: 2.9rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(138, 93, 7, 0.26);
  box-shadow: 0 6px 18px rgba(43, 37, 27, 0.18);
  transform: translateY(-50%);
}

.hero-nav-previous {
  left: calc(var(--hero-mat) / 2);
  transform: translate(-50%, -50%);
}

.hero-nav-next {
  left: auto;
  right: calc(var(--hero-mat) / 2);
  transform: translate(50%, -50%);
}

.hero-nav:hover,
.hero-nav:focus-visible {
  color: var(--white);
  background: var(--gold-dark);
}

.hero-nav-previous:hover,
.hero-nav-previous:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
}

.hero-nav-next:hover,
.hero-nav-next:focus-visible {
  transform: translate(50%, -50%) scale(1.07);
}

@media (max-width: 560px) {
  .hero-nav {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.9rem;
  }
}

/* Activities slideshow ------------------------------------------------------
   Same interaction model as the house reel: native finger-scrolling on touch,
   arrows on pointer devices. Each photograph carries its own caption so the
   section reads as a description of the week rather than a silent gallery. */

.activities-list {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
}

.activity-frame {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

.activity-reel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.activity-reel::-webkit-scrollbar {
  display: none;
}

.activity-reel:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.activity-track {
  display: flex;
  width: max-content;
  align-items: flex-start;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  padding: 0.5rem clamp(1rem, 4vw, 3rem) 1.4rem;
}

.activity-slide {
  flex: none;
  width: clamp(15rem, 24vw, 20rem);
  margin: 0;
  scroll-snap-align: center;
}

.activity-slide img {
  width: 100%;
  height: clamp(17rem, 26vw, 23rem);
  object-fit: cover;
  border: 1px solid rgba(138, 93, 7, 0.24);
  border-radius: 0.9rem;
  box-shadow: 7px 8px 0 rgba(215, 165, 32, 0.15), 0 14px 30px rgba(43, 37, 27, 0.12);
}

.activity-slide figcaption {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Arrow placement, corrected -------------------------------------------------
   Every slider arrow previously sat ON a border line - the hero pair straddled
   the frame edge, overlapping both the mount and the photograph, and the reel
   pair sat on top of the photographs. Nothing overlaps anything now:

   - Hero arrows move to a control row beneath the frame. The mat is only 28px
     on a phone, too narrow to hold a 44px tap target without touching either
     the border or the picture, so sitting them inside was never going to work
     at every screen size.
   - Reel arrows become ordinary flex items either side of the scroller rather
     than absolutely positioned over it. */

.hero-media {
  overflow: visible;
}

.hero-nav {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 2.75rem;
  height: 2.75rem;
  transform: none;
}

.hero-nav-previous,
.hero-nav-next {
  position: static;
  left: auto;
  right: auto;
  transform: none;
}

.hero-nav-previous:hover,
.hero-nav-previous:focus-visible,
.hero-nav-next:hover,
.hero-nav-next:focus-visible,
.hero-nav:hover,
.hero-nav:focus-visible {
  color: var(--white);
  background: var(--gold-dark);
  transform: translateY(-2px);
}

.hero-controls {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1rem;
}

/* Reel arrows sit beside the scroller, never over the photographs. */

.photo-reel-frame,
.activity-frame {
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

.reel-nav {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  flex: none;
  transform: none;
}

.reel-nav:hover:not(:disabled),
.reel-nav:focus-visible {
  color: var(--white);
  background: var(--gold-dark);
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .reel-nav {
    width: 2.4rem;
    height: 2.4rem;
  }
}

/* Wrapper so the frame and its control row occupy one hero grid cell together. */

.hero-showcase {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
}

/* Value emblems, corrected --------------------------------------------------
   A square rotated 45 degrees has a bounding box 41% wider than the square
   itself, so declaring all three emblems at one size made the diamond render
   far larger than the circle and reach back into the heading. Each is now sized
   so its ROTATED footprint matches, and the text is given a reserved corridor
   so it can never run underneath one. */

.value-card:nth-child(2) .value-emblem {
  width: 2.7rem;
  height: 2.7rem;
}

.value-card:nth-child(3) .value-emblem {
  width: 2.25rem;
  height: 2.25rem;
}

.value-card h3,
.value-card p {
  padding-right: 4.6rem;
}

.value-card h3 {
  max-width: none;
}

@media (max-width: 720px) {
  .value-card h3,
  .value-card p {
    padding-right: 4rem;
  }
}

/* Celebration sub-sections ---------------------------------------------------
   Three sliders under one heading: birthdays, holidays, outings. The label sits
   with the text column above rather than the full-bleed slider, so the eye
   still reads it as belonging to the section. */

.celebration-label {
  width: min(calc(100% - 2rem), var(--content));
  margin: clamp(2rem, 4vw, 3rem) auto clamp(0.6rem, 1.4vw, 1rem);
  color: var(--gold-dark);
  font-family: var(--mono-font);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.celebration-label + .activity-frame {
  margin-top: 0;
}

/* Gallery, uniform tiles ----------------------------------------------------
   The alternating 8+4 / 4+8 pattern produced wide 2.45:1 slots. Portrait
   photographs dropped into those lost most of the frame - heads cropped off.
   Every tile is now the same shape, so a photo's crop is predictable, and the
   visible window is biased upward because faces sit in the top half. */

.gallery-card,
.gallery-card:nth-child(4n + 1),
.gallery-card:nth-child(4n) {
  grid-column: span 4;
  grid-row: span 2;
}

.gallery-card img {
  object-position: center 28%;
}

@media (max-width: 1100px) {
  .gallery-card,
  .gallery-card:nth-child(4n + 1),
  .gallery-card:nth-child(4n) {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .gallery-card,
  .gallery-card:nth-child(4n + 1),
  .gallery-card:nth-child(4n) {
    grid-column: 1 / -1;
  }
}