/* Republic Golf Co. components
   Header and drawer, footer, buttons, cards, placeholders, section wrappers,
   and the inquiry form. Tokens come from tokens.css, primitives from base.css. */

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}
.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo img { height: 2.75rem; width: auto; }
.site-nav { display: none; margin-left: auto; }
.site-nav ul { display: flex; gap: var(--s-6); }
.site-nav a {
  position: relative;
  display: inline-block;
  padding-block: var(--s-2);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--green);
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hairline);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .site-header__cta { display: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  margin-right: calc(var(--s-3) * -1);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--green);
  border-radius: var(--radius-sm);
}
.menu-toggle__icon { width: 22px; height: 14px; position: relative; }
.menu-toggle__icon span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: 6px; }
.menu-toggle__icon span:nth-child(3) { top: 12px; }

@media (min-width: 900px) {
  .site-nav { display: block; }
  .site-header .site-header__cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ---------- Drawer (mobile nav as a native dialog) ---------- */
.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--green);
  color: var(--cream);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
.drawer[open] { opacity: 1; transform: none; }
@starting-style { .drawer[open] { opacity: 0; transform: translateY(-8px); } }
.drawer::backdrop { background: transparent; }
.drawer__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 var(--gutter) var(--s-6);
}
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.drawer__top img { height: 2.75rem; width: auto; }
.drawer__close {
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  margin-right: calc(var(--s-3) * -1);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--cream);
  border-radius: var(--radius-sm);
}
.drawer__nav { margin-top: var(--s-6); }
.drawer__nav ul { display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
  font-size: var(--fs-lg);
  font-weight: var(--w-medium);
  color: var(--cream);
  text-decoration: none;
  border-bottom: var(--hairline) solid rgb(201 168 118 / 0.3);
}
.drawer__nav a[aria-current="page"] { color: var(--gold); }
.drawer__nav a::after { content: "\2192"; color: var(--gold); font-weight: var(--w-regular); }
.drawer__cta { margin-top: var(--s-6); }
.drawer__contact {
  margin-top: auto;
  padding-top: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--green-20);
}
.drawer__contact a { color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.drawer__contact a:hover { color: var(--gold); }
body.drawer-open { overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-deep);
  color: var(--cream);
  padding-block: var(--s-6) var(--s-5);
}
.site-footer__grid {
  display: grid;
  gap: var(--s-5);
}
.site-footer__logo img { height: 3rem; width: auto; }
.site-footer__tagline { margin-top: var(--s-3); color: var(--gold-60); font-size: var(--fs-sm); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-footer__nav a, .site-footer__contact a {
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* thumb-sized on phones */
}
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--gold); }
.site-footer__contact { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.site-footer__bottom {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--hairline) solid rgb(201 168 118 / 0.3);
  font-size: var(--fs-xs);
  color: var(--green-20);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-footer__legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--green-20); text-decoration: none; font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
}
.site-footer__legal a:hover { color: var(--gold); }
.site-footer__copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; }
.site-footer__credit {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--green-20); text-decoration: none; font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
}
@media (min-width: 720px) {
  .site-footer__credit::before { content: ""; width: 1px; height: 0.9em; margin-right: var(--s-4); background: rgb(201 168 118 / 0.45); }
}
@media (max-width: 719.98px) {
  /* stacked on phones: no divider, and the tap-height row starts flush with the copyright */
  .site-footer__copy { flex-direction: column; align-items: flex-start; gap: 0; }
}
.site-footer__credit:hover { color: var(--gold); }
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .site-footer__nav ul { flex-direction: column; gap: 0; }
  /* pointer devices do not need thumb-height rows; keep the column short */
  .site-footer__nav a, .site-footer__contact a, .site-footer__legal a, .site-footer__credit { min-height: 2rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  color: var(--on-gold);
  background: var(--gold);
  border: var(--hairline) solid var(--gold);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--gold-60); border-color: var(--gold-60); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; transform: none; }
.btn--outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--ghost:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }
.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-4); }
.btn--block { width: 100%; }
.btn__arrow { font-weight: var(--w-regular); transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Text link with the gold underline */
.link {
  color: var(--green);
  font-weight: var(--w-medium);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--gold);
  padding-bottom: 1px;
}
.link:hover { border-bottom-width: 2px; }
.surface-green .link, .band--green .link, .card--green .link { color: var(--cream); }

/* ---------- Section wrappers ---------- */
.section-head { max-width: 44rem; }
.section-head > * + * { margin-top: var(--s-3); }
.section-head .lead { margin-top: var(--s-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--center p { margin-inline: auto; }

.band { position: relative; }
.band--green { background: var(--green); color: var(--on-green); }
.band--green h1, .band--green h2, .band--green h3 { color: var(--cream); }
.band--green .lead { color: var(--gold-60); }
.band--green .kicker { color: var(--gold); }
.band--deep { background: var(--cream-deep); }
.band--blue { background: var(--blue-20); }

.grid { display: grid; gap: var(--s-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--wide-media { grid-template-columns: 1.2fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__body p { font-size: var(--fs-sm); color: var(--ink-soft); }
.card__title { font-size: var(--fs-md); font-weight: var(--w-medium); color: var(--green); }
.card__media { position: relative; aspect-ratio: var(--ar-classic); background: var(--cream-deep); overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--green { background: var(--green); border-color: var(--green); color: var(--cream); }
.card--green .card__title { color: var(--gold); }
.card--green .card__body p { color: var(--green-20); }
.card--plain { background: transparent; border: 0; border-radius: 0; }
.card--plain .card__body { padding: 0; }

/* Numbered step, used in the how-it-works list */
.step { position: relative; padding-top: var(--s-4); border-top: var(--hairline) solid var(--gold); }
.step__num {
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  color: var(--gold-text);
}
.band--green .step__num { color: var(--gold); }
.step__title { margin-top: var(--s-2); font-size: var(--fs-md); font-weight: var(--w-medium); color: var(--green); }
.band--green .step__title { color: var(--cream); }
.step p { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--ink-soft); }
.band--green .step p { color: var(--green-20); }

/* ---------- Media frame and placeholder ---------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deep);
  aspect-ratio: var(--ar, var(--ar-photo));
}
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame--wide { --ar: var(--ar-wide); }
.frame--classic { --ar: var(--ar-classic); }
.frame--square { --ar: var(--ar-square); }
.frame--portrait { --ar: var(--ar-portrait); }
.frame--round { border-radius: 50%; }

/* Placeholder for slots whose photos arrive in October. Looks intentional. */
.placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-4);
  background-color: var(--cream-deep);
  background-image: url("../assets/img/linen-tile.webp");
  background-size: 256px;
  border: var(--hairline) solid var(--rule);
  color: var(--green);
}
.placeholder__inner { display: grid; gap: var(--s-2); justify-items: center; }
.placeholder__icon { width: 2.25rem; height: 2.25rem; color: var(--gold); }
.placeholder__label {
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.placeholder--compact { padding: var(--s-2); }
.placeholder--compact .placeholder__label { display: none; }
.placeholder--compact .placeholder__icon { width: 1.5rem; height: 1.5rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: var(--w-medium); font-size: var(--fs-sm); color: var(--green); }
.field .req { color: var(--gold-text); margin-left: 2px; }
.field__help { font-size: var(--fs-xs); color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  height: 3.5rem; box-sizing: border-box;
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { height: auto; min-height: 5.5rem; resize: vertical; line-height: var(--lh-body); }
/* date fields: one line, never let the picker wrap */
.field input[type="date"] { white-space: nowrap; overflow: hidden; }
.field input::placeholder, .field textarea::placeholder { color: var(--green-60); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(201 168 118 / 0.35);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgb(156 58 38 / 0.15);
}
.field__error { font-size: var(--fs-xs); color: var(--error); font-weight: var(--w-medium); }
.field__error[hidden] { display: none; }
.field input[type="date"] { -webkit-appearance: none; appearance: none; }
.form__consent { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.form__consent a { color: var(--green); font-weight: var(--w-medium); }
.form__actions { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .form__actions { grid-template-columns: auto 1fr; align-items: center; } }

/* Honeypot: real users never see this */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Status panels */
.notice {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-sm);
  border: var(--hairline) solid var(--rule);
  background: var(--white);
  display: grid;
  gap: var(--s-2);
}
.notice[hidden] { display: none; }
.notice__title { font-weight: var(--w-medium); color: var(--green); }
.notice p { font-size: var(--fs-sm); }
.notice--error { border-color: var(--error); background: rgb(156 58 38 / 0.06); }
.notice--error .notice__title { color: var(--error); }
.notice--error ul { padding-left: 1.2em; font-size: var(--fs-sm); }
.notice--error a { color: var(--error); }
.notice--success { border-color: var(--gold); background: var(--white); padding: var(--s-6); text-align: center; justify-items: center; }
.notice--success .notice__icon { width: 3rem; height: 3rem; color: var(--gold); }
.notice--success .notice__title { font-size: var(--fs-lg); font-weight: var(--w-bold); }
.notice--success .btn { margin-top: var(--s-3); }

/* Form card wrapper on the contact page */
.form-card {
  background: var(--white);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-md);
}
@media (min-width: 720px) { .form-card { padding: var(--s-7); } }

/* Contact aside */
.aside-steps { counter-reset: step; display: grid; gap: var(--s-4); }
.aside-steps li { position: relative; padding-left: 2.75rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.aside-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: var(--hairline) solid var(--gold);
  border-radius: 50%;
  color: var(--green);
  font-weight: var(--w-medium);
  font-size: var(--fs-xs);
}

/* ---------- Page-specific components (Step 4) ---------- */

/* Full-bleed atmospheric band */
.band-media { position: relative; width: 100%; height: clamp(14rem, 42.85vw, 60vh); overflow: hidden; background: var(--green-deep); }
.band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.band-media__caption {
  position: absolute; left: var(--gutter); bottom: var(--s-4);
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--cream);
}

/* Home: proof strip and testimonials */
.proof__grid { --gap: var(--s-3); }
.testimonial {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s-2) var(--s-4); align-items: center;
  padding: var(--s-5); background: var(--white); border: var(--hairline) solid var(--rule); border-radius: var(--radius);
}
.testimonial__avatar { grid-row: span 2; width: 3.5rem; }
.testimonial__slot { font-size: var(--fs-xs); font-weight: var(--w-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--green); }
.testimonial__meta { font-size: var(--fs-sm); color: var(--muted); }

/* Services */
.service + .service { border-top: var(--hairline) solid var(--rule); }
.check-list { display: grid; gap: var(--s-3); }
.check-list li { position: relative; padding-left: 1.75rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.9rem; height: 1px; background: var(--gold);
}

/* About hero: a 3:1 plate, cream on the left fading into the valley. Everything
   is placed in percentages of the plate so it lands where the design has it. */
.about-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 33.3vw;
  padding: 5vw 6.5vw;
  background: var(--cream) url("../assets/img/about-hero-w1600.webp") center top / cover no-repeat;
  background: var(--cream) image-set(url("../assets/img/about-hero-w1600.webp") 1x, url("../assets/img/about-hero-w2172.webp") 2x) center top / cover no-repeat;
  border-bottom: var(--hairline) solid var(--rule);
}
@media (min-width: 1700px) { .about-hero { background-image: url("../assets/img/about-hero-w2172.webp"); } }
.about-hero__text { position: relative; z-index: 1; max-width: 40%; }
.about-hero__title {
  margin-top: 0; color: var(--green); text-transform: uppercase;
  font-size: clamp(2.75rem, 5.6vw, 7rem); line-height: 0.98; letter-spacing: var(--ls-tight);
}
.about-hero__title span { display: block; }
.about-hero__sub {
  margin-top: 2.4vw; padding-top: 2vw; border-top: var(--hairline) solid var(--gold);
  font-size: clamp(0.72rem, 0.85vw, 1.05rem); font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
@media (min-width: 900px) { .about-hero__sub { white-space: nowrap; } }
.about-hero__place {
  margin-top: 2.6vw; display: flex; align-items: center; gap: var(--s-4);
  font-size: clamp(0.66rem, 0.8vw, 1rem); font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft);
}
.about-hero__place::before { content: ""; width: 2.25rem; height: var(--hairline); background: var(--gold); }
/* the three placed accents */
.about-hero__corner {
  position: absolute; top: 21%; right: 6.5%; margin: 0;
  display: grid; justify-items: end; text-align: right;
  font-size: clamp(0.62rem, 0.72vw, 0.9rem); font-weight: var(--w-medium); line-height: 1.7;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--green);
}
.about-hero__corner span:first-child::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 2.25rem; height: var(--hairline); background: var(--gold); margin-left: var(--s-3);
}
@media (max-width: 899px) {
  .about-hero {
    min-height: 0; padding: var(--s-7) var(--gutter) var(--s-6);
    background-image: url("../assets/img/about-hero-w1200.webp"); background-position: 74% center;
  }
  .about-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, var(--cream) 0%, rgb(244 238 228 / 0.92) 60%, rgb(244 238 228 / 0.6) 100%);
  }
  .about-hero__text { max-width: none; }
  .about-hero__title { margin-top: var(--s-3); }
  .about-hero__sub { margin-top: var(--s-5); padding-top: var(--s-4); }
  .about-hero__place { margin-top: var(--s-5); }
  .about-hero__corner { display: none; }
}

/* About team: paper plate on top, the client's linen band as the foot.
   The band was split off the plate so the foot keeps its height however tall
   the copy runs. The wide picture carries its own lettering. */
.team {
  position: relative; display: flow-root;   /* keeps the divider's negative margin from pulling the section up */
  background: var(--cream) url("../assets/img/about-the-team-paper-w1600.webp") center top / cover no-repeat;
  background: var(--cream) image-set(url("../assets/img/about-the-team-paper-w1600.webp") 1x, url("../assets/img/about-the-team-paper-w1672.webp") 2x) center top / cover no-repeat;
}
/* the seam: the line sits exactly where the intro ends and the team begins */
.team .divider--open { margin-top: -1.75rem; margin-bottom: clamp(2.5rem, 6.2vw, 7.5rem); }
.team__inner { width: min(100% - 2 * var(--gutter), 76%, 104rem); margin-inline: auto; }
.team__photo { position: relative; margin-top: var(--s-6); }
.team__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.team__media img { display: block; width: 100%; height: auto; }
.team__polaroid {
  position: absolute; right: -10.5%; bottom: -2.5%; width: 24.5%;
  transform: rotate(7deg); transform-origin: center;
  filter: drop-shadow(0 14px 22px rgb(31 58 46 / 0.22));
}
.team__polaroid img { display: block; width: 100%; height: auto; }
.team__flag {
  position: absolute; right: -7%; top: 40%; z-index: 1;
  width: clamp(1.6rem, 2.3vw, 2.8rem); height: clamp(1.6rem, 2.3vw, 2.8rem); color: var(--gold);
}
.team__flag .icon { width: 100%; height: 100%; stroke-width: 1.25; }
.team { padding-bottom: clamp(3rem, 6vw, 7rem); }
@media (max-width: 899px) {
  .team__inner { width: min(100% - 2 * var(--gutter), 104rem); }
  .team__media { aspect-ratio: 4 / 3; }
  .team__media img { height: 100%; object-fit: cover; object-position: 50% center; }
  .team__polaroid { width: 40%; right: -4%; bottom: -6%; }
  .team__flag { right: -2%; top: 36%; }
  .team { padding-bottom: var(--s-9); }
}

/* About, How we work: 16:9 plate with the seal and handwriting baked in and
   the hills along the bottom. Three steps sit on the paper above the hills. */
.hww {
  position: relative; overflow: hidden;
  min-height: 56.3vw;
  padding: 5.5vw 7% 6vw;
  background: var(--cream) url("../assets/img/about-how-we-work-w1600.webp") center top / cover no-repeat;
  background: var(--cream) image-set(url("../assets/img/about-how-we-work-w1600.webp") 1x, url("../assets/img/about-how-we-work-w1672.webp") 2x) center top / cover no-repeat;
}
@media (min-width: 1700px) { .hww { background-image: url("../assets/img/about-how-we-work-w1672.webp"); } }
.hww__head { max-width: 46%; }
.hww__title {
  margin-top: 1vw; color: var(--green); text-transform: uppercase;
  font-size: clamp(2.6rem, 5.6vw, 7rem); line-height: 0.98; letter-spacing: var(--ls-tight);
}
.hww__title span { display: block; }
.hww__sub {
  margin-top: 1.6vw;
  font-size: clamp(0.7rem, 0.85vw, 1.05rem); font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.hww__corner {
  position: absolute; right: 5%; top: 34%; margin: 0;
  font-size: clamp(0.6rem, 0.7vw, 0.85rem); font-weight: var(--w-medium); line-height: 1.7;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--green);
}
.hww__corner span { display: block; }
.hww__corner::after { content: ""; display: block; width: 3rem; height: var(--hairline); background: var(--gold); margin-top: 1vw; }
.hww__steps {
  list-style: none; margin: 3.5vw 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2vw;
}
.hww__step { display: flex; flex-direction: column; padding-top: 1.6vw; border-top: var(--hairline) solid var(--gold); }
.hww__row { display: flex; align-items: center; justify-content: space-between; }
.hww__ring {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(3.25rem, 5.3vw, 6rem); height: clamp(3.25rem, 5.3vw, 6rem); border-radius: 50%;
  border: var(--hairline) solid var(--gold); color: var(--green);
  background: color-mix(in srgb, var(--white) 72%, transparent);
  box-shadow: 0 6px 18px rgb(31 58 46 / 0.08);
}
.hww__ring .icon { width: 42%; height: 42%; stroke-width: 1.4; }
.hww__numeral {
  margin-right: 6%;
  font-size: clamp(3.4rem, 6.2vw, 7.5rem); line-height: 1; font-weight: var(--w-bold); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px var(--gold); opacity: 0.55;
}
.hww__step-title { margin-top: 1.6vw; font-size: clamp(1.2rem, 1.9vw, 2.1rem); font-weight: var(--w-bold); line-height: 1.15; color: var(--green); }
.hww__step-body { margin-top: 0.8vw; font-size: clamp(0.95rem, 1.2vw, 1.3rem); line-height: 1.45; color: var(--ink); }
.hww__foot {
  margin-top: auto; padding-top: 1.6vw;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: clamp(0.6rem, 0.68vw, 0.8rem); font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.hww__foot::before { content: ""; flex: 0 0 auto; width: 2.5rem; height: var(--hairline); background: var(--gold); }
@media (max-width: 899px) {
  /* the plate sits at the bottom at its own ratio; flat cream above it, faded in */
  .hww {
    min-height: 0; padding: var(--s-8) var(--gutter) 40vw;
    background: var(--cream) url("../assets/img/about-how-we-work-w768.webp") center bottom / 100% auto no-repeat;
  }
  .hww::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, var(--cream) 0, var(--cream) calc(100% - 56.3vw), rgb(244 238 228 / 0) calc(100% - 42vw));
  }
  .hww > * { position: relative; }
  .hww__head { max-width: none; }
  .hww__title { margin-top: var(--s-3); }
  .hww__sub { margin-top: var(--s-4); }
  .hww__corner { display: none; }
  .hww__steps { grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-7); }
  .hww__step { padding-top: var(--s-4); }
  .hww__step-title { margin-top: var(--s-4); }
  .hww__step-body { margin-top: var(--s-2); }
  .hww__foot { padding-top: var(--s-4); }
}

/* About intro: the paper plate (16:9) with the seal and the handwritten line.
   The plate is nudged left so the handwriting sits between the copy and the
   photo instead of under the photo. */
.about-intro { position: relative; background: var(--cream); }
@media (min-width: 900px) { .about-intro { background: var(--cream) url("../assets/img/about-republic-w1200.webp") center top / cover no-repeat; } }
@media (min-width: 1100px) { .about-intro { background-image: url("../assets/img/about-republic-w1600.webp"); } }
@media (min-width: 1100px) { .about-intro { background-image: image-set(url("../assets/img/about-republic-w1600.webp") 1x, url("../assets/img/about-republic-w1672.webp") 2x); } }
.about-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgb(244 238 228 / 0.55);
}
.about-intro > .container { position: relative; z-index: 1; }
.about-intro__grid { display: grid; gap: var(--s-7); }
.about-intro__title {
  margin-top: var(--s-3); color: var(--green); text-transform: uppercase;
  font-size: clamp(2.4rem, 4.25vw, 5rem); line-height: 0.98; letter-spacing: var(--ls-tight);
}
.about-intro__title span { display: block; }
@media (min-width: 1100px) { .about-intro__title span { white-space: nowrap; } }
.about-intro__sub {
  margin-top: var(--s-4);
  font-size: clamp(0.68rem, 0.82vw, 1rem); font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
@media (min-width: 1100px) { .about-intro__sub { white-space: nowrap; font-size: clamp(0.68rem, 0.78vw, 1rem); } }
.about-intro__body { margin-top: var(--s-6); }
.about-intro__body p { color: var(--ink); max-width: 46rem; }
.about-closing { font-weight: var(--w-medium); color: var(--green); font-size: var(--fs-md); }
.about-intro .framed__label {
  border-left: 0; padding-left: 0; justify-items: end; text-align: right; color: var(--green);
}
.about-intro .framed__label::after { display: none; }
.about-intro .framed__label span:first-child::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 2.25rem; height: var(--hairline); background: var(--gold); margin-left: var(--s-3);
}
.framed--upright .framed__media { aspect-ratio: 8 / 9; }
.framed--upright .framed__media img { object-position: 42% 50%; }
@media (min-width: 1100px) {
  .about-intro {
    min-height: 56.3vw; padding-block: clamp(3rem, 5vw, 6rem) clamp(2.5rem, 4vw, 5rem);
    background-size: 118% auto; background-position: right top;
  }
  /* below the plate's bottom edge the section is flat cream; fade into it */
  .about-intro::before {
    background: linear-gradient(to bottom, rgb(244 238 228 / 0) 0%, rgb(244 238 228 / 0) calc(66.4vw - 9rem), var(--cream) 66.4vw);
  }
  /* wider than the normal wide container so the photo reaches toward the edge */
  .about-intro > .about-intro__grid { width: min(100% - 2 * var(--gutter), 104rem); }
  .about-intro__grid { grid-template-columns: minmax(0, 44%) minmax(0, 36.5%); justify-content: space-between; column-gap: 0; align-items: start; }
}


/* Legal pages */
.legal { --flow: var(--s-5); }
.legal h1 { margin-bottom: 0; }
.legal__section { padding-top: var(--s-4); }
.legal__section h2 { margin-bottom: var(--s-3); }
.legal__section p + p { margin-top: var(--s-3); }
.notice--review { border-color: var(--gold); background: var(--gold-20); border-left: 4px solid var(--gold); }
.notice--review .notice__title { color: var(--gold-text); }

/* ---------- Design pass: surface, depth, iconography ---------- */

/* Linen as the page surface. The tile is multiplied onto cream at low
   strength so it reads as paper grain, not a pattern. */
.surface-texture { position: relative; }
.surface-texture::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("../assets/img/linen-tile.webp");
  background-size: 512px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.surface-texture > * { position: relative; z-index: 1; }
.band--deep.surface-texture::before { opacity: 0.7; }
.page-head { padding-bottom: calc(var(--section) * 0.5); }
.page-head__lead { margin-top: var(--s-4); max-width: none; }
.page-head__lead span { display: block; }
.page-head__place {
  margin-top: var(--s-6);
  font-size: var(--fs-xs); font-weight: var(--w-medium); line-height: 1.8;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text);
}
.page-head__place span { display: block; }
.page-head h1 { font-size: clamp(2.5rem, 1.25rem + 6vw, 6rem); letter-spacing: var(--ls-tight); text-transform: none; }

/* Icon rings */
.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.icon-ring {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: var(--hairline) solid var(--gold);
  color: var(--green);
  background: color-mix(in srgb, var(--white) 70%, transparent);
}
.icon-ring .icon { width: 1.35rem; height: 1.35rem; }
.icon-ring--sm { width: 2.25rem; height: 2.25rem; }
.icon-ring--sm .icon { width: 1rem; height: 1rem; }
.band--green .icon-ring, .surface-green .icon-ring { color: var(--gold); background: rgb(244 238 228 / 0.06); border-color: rgb(201 168 118 / 0.6); }

.icon-list { display: grid; gap: var(--s-3); }
.icon-list li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.icon-list > li > .icon { color: var(--gold); width: 1.25rem; height: 1.25rem; }
.icon-list--stack { gap: var(--s-4); }
.icon-list--stack li { font-size: var(--fs-base); }
.band--green .icon-list { color: var(--cream); }

/* Offset frame: a gold hairline rectangle sits behind the photo, shifted */
.art { position: relative; }
.art::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border: var(--hairline) solid var(--gold);
  border-radius: var(--radius);
  transform: translate(14px, 14px);
  pointer-events: none;
}
.art--left::before { transform: translate(-14px, 14px); }
.art--gold::before { border-color: var(--gold); background: rgb(201 168 118 / 0.14); }
.art > .frame { position: relative; z-index: 1; box-shadow: var(--shadow-lg); }
.art--detail { padding-bottom: var(--s-7); }
.detail-card {
  position: absolute; z-index: 2; right: calc(var(--s-4) * -1); bottom: 0;
  display: flex; gap: var(--s-4); align-items: center;
  max-width: min(22rem, 85%);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: var(--hairline) solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.detail-card__title { font-weight: var(--w-medium); color: var(--green); font-size: var(--fs-sm); }
.detail-card__body { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
@media (max-width: 899px) { .detail-card { right: var(--s-2); } .art::before { transform: translate(10px, 10px); } .art--left::before { transform: translate(-10px, 10px); } }

/* Divider with the mark */
.divider { position: relative; height: 1px; background: var(--rule); margin-inline: var(--gutter); }
.divider__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 5.5rem; height: 5.5rem; display: grid; place-items: center;
  background: var(--cream); color: var(--gold);
}
.divider__mark .rgc-icon { width: 3.5rem; height: 3.5rem; fill: currentColor; }
/* open variant: gold segments either side of the mark, nothing behind it, so
   the plates on both sides run straight through */
.divider--open { height: auto; background: none; z-index: 2; display: flex; align-items: center; gap: var(--s-5); }
.divider--open::before, .divider--open::after { content: ""; flex: 1; height: var(--hairline); background: var(--gold); opacity: 0.7; }
.divider--open .divider__mark { position: static; transform: none; width: auto; height: auto; background: none; }

/* Steps: oversized numeral watermark behind the icon */
.step { position: relative; padding-top: var(--s-5); }
.step__numeral {
  position: absolute; right: 0; top: var(--s-3);
  font-size: 4.5rem; line-height: 1; font-weight: var(--w-bold);
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  opacity: 0.55; letter-spacing: -0.02em;
  pointer-events: none;
}
.step .icon-ring { margin-bottom: var(--s-4); }
.step__num { display: block; }
.band--green .step__numeral { -webkit-text-stroke-color: var(--gold); opacity: 0.4; }

/* Photo cards for occasions */
.photo-card { display: flex; flex-direction: column; gap: var(--s-4); }
.photo-card__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  background: var(--green-deep); box-shadow: var(--shadow-md);
}
.photo-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.photo-card:hover .photo-card__media img { transform: scale(1.04); }
.photo-card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-5);
  background: linear-gradient(to top, rgb(22 41 31 / 0.85), rgb(22 41 31 / 0.2) 55%, transparent);
  color: var(--cream);
}
.photo-card__overlay .icon-ring { color: var(--gold); background: rgb(22 41 31 / 0.35); border-color: rgb(201 168 118 / 0.7); }
.photo-card__title { color: var(--cream); font-size: var(--fs-lg); }
.photo-card__body { font-size: var(--fs-sm); color: var(--ink-soft); padding-inline: var(--s-1); }

/* Split photos get a soft shadow for depth, nothing drawn behind them */
.split > .frame { box-shadow: var(--shadow-lg); }

/* Services: numeral and includes */
.service__text { position: relative; }
.service__numeral {
  position: absolute; right: 0; top: -0.6em;
  font-size: 7rem; line-height: 1; font-weight: var(--w-bold);
  color: transparent; -webkit-text-stroke: 1px var(--gold); opacity: 0.45; pointer-events: none;
}
.service__includes { padding-top: var(--s-4); border-top: var(--hairline) solid var(--rule); }
.service__includes .check-list { margin-top: var(--s-3); }
.service + .service { border-top: 0; }
.service:nth-child(even) { background: var(--cream-deep); }

/* About composition */
.kicker--center { display: flex; justify-content: center; margin-bottom: var(--s-4); }
.about-art { position: relative; max-width: 34rem; margin-inline: auto; }
@media (min-width: 1100px) { .about-art { max-width: none; margin: 0; } }
.about-art__stamp {
  position: absolute; z-index: 2; left: clamp(-2.25rem, -2vw, -1rem); bottom: -0.5rem;
  width: clamp(6rem, 8.2vw, 9rem); height: clamp(6rem, 8.2vw, 9rem); display: grid; place-items: center;
  background: var(--cream); border: var(--hairline) solid var(--gold); border-radius: 50%;
  color: var(--green); box-shadow: var(--shadow-md);
}
.about-art__stamp .rgc-icon { width: 62%; height: 62%; fill: currentColor; }

/* Testimonial slots read as quote cards */
.testimonial { display: flex; flex-direction: column; gap: var(--s-4); grid-template-columns: none; }
.testimonial__quote .icon { width: 2rem; height: 2rem; color: var(--gold); }
.testimonial__lines { display: grid; gap: var(--s-2); }
.testimonial__lines i { display: block; height: 8px; border-radius: 4px; background: var(--cream-deep); }
.testimonial__who { display: flex; gap: var(--s-3); align-items: center; padding-top: var(--s-3); border-top: var(--hairline) solid var(--rule); }
.testimonial__who .testimonial__avatar { width: 2.75rem; }

/* CTA bands get a large faint mark */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -4rem; top: 50%; transform: translateY(-50%);
  width: 22rem; height: 22rem; pointer-events: none;
  background: url("../assets/brand/RGC-MainLogo-Gold.svg") center / contain no-repeat;
  opacity: 0.08;
}
.cta-band > * { position: relative; }

/* Footer watermark and texture */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/img/linen-tile.webp"); background-size: 512px;
  mix-blend-mode: soft-light; opacity: 0.35;
}
.site-footer__mark { position: absolute; right: -3rem; bottom: -3rem; width: 18rem; height: 18rem; color: var(--gold); opacity: 0.07; pointer-events: none; }
.site-footer__mark .rgc-icon { width: 100%; height: 100%; fill: currentColor; }
.site-footer > .container { position: relative; }

/* Form card sits on texture */
.form-card { box-shadow: var(--shadow-lg); }
.aside-steps li { display: flex; gap: var(--s-3); align-items: flex-start; padding-left: 0; }
.aside-steps li::before { display: none; }
.aside-steps .icon-ring { flex: 0 0 auto; }


/* Cards get a lift on hover */
.card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- How it works (homepage) ---------- */
/* The supplied plate is the section background, used whole. Its cream sky fills
   the top, its landscape runs along the bottom, and the copy is tuned to sit
   inside the cream. Pinned to the bottom so any extra height shows as more of
   the plate's own cream above it. */
.how {
  position: relative;
  background-color: var(--cream);
  background-image: url("../assets/img/how-it-works-background-w1600.webp");
  background-image: image-set(url("../assets/img/how-it-works-background-w1600.webp") 1x, url("../assets/img/how-it-works-background-w1672.webp") 2x);
  background-repeat: no-repeat;
  /* the plate fills the section exactly, so the copy sits on it where the
     design puts it rather than floating above it on flat cream */
  background-size: cover;
  background-position: center top;
  min-height: 56.3vw;
  padding-top: 9vw;
  padding-bottom: 3vw;
}
@media (min-width: 1700px) { .how { background-image: url("../assets/img/how-it-works-background-w1672.webp"); } }
@media (max-width: 899px) {
  .how { background-image: url("../assets/img/how-it-works-background-w1200.webp"); background-size: 100% auto; background-position: center bottom; min-height: 0; padding-top: var(--s-7); padding-bottom: clamp(5rem, 38vw, 14rem); }
  .how::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--cream) 0%, rgb(244 238 228 / 0.9) 58%, rgb(244 238 228 / 0) 84%); }
}
.how > .container { position: relative; z-index: 1; }
.how__head { max-width: 46rem; }
.how__title { margin-top: var(--s-3); font-size: clamp(1.75rem, 0.9rem + 2.1vw, 3rem); letter-spacing: var(--ls-tight); max-width: none; }
@media (min-width: 960px) { .how__title { white-space: nowrap; } }
.how__sub {
  margin-top: var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.how__steps { display: grid; gap: var(--s-6) var(--s-6); margin-top: var(--s-5); }
.how__step { position: relative; }
.how__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; box-shadow: var(--shadow-md); background: var(--cream-deep); }
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.how__row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.how__numeral { font-size: clamp(2.25rem, 1.8rem + 1vw, 2.9rem); font-weight: 300; line-height: 1; color: var(--gold-text); letter-spacing: 0.02em; }
.how__row .icon-ring { background: transparent; border-color: var(--gold); color: var(--green); width: 2.5rem; height: 2.5rem; }
.how__row .icon-ring .icon { width: 1.1rem; height: 1.1rem; }
.how__arrow { flex: 1; display: none; align-items: center; }
.how__arrow i { display: block; width: 100%; max-width: 6rem; height: 1px; background: var(--gold); position: relative; }
.how__arrow i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: rotate(45deg); }
.how__step-title { margin-top: var(--s-3); font-size: var(--fs-md); font-weight: var(--w-medium); color: var(--green); }
.how__step-body { margin-top: var(--s-2); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.how__tagline {
  margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
  max-width: none;
}
.how__tagline::before, .how__tagline::after { content: ""; flex: 1; height: var(--hairline); background: var(--gold); opacity: 0.7; }
/* the lower steps cross onto the plate's horizon; a cream halo lifts them off
   the picture without veiling it */
.how__numeral, .how__step-title, .how__step-body, .how__sub, .how__tagline {
  text-shadow: 0 1px 7px rgb(244 238 228 / 0.9), 0 0 2px rgb(244 238 228 / 0.9);
}
@media (min-width: 640px) { .how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .how__steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .how__step + .how__step::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--s-5) / -2); width: var(--hairline); background: rgb(31 58 46 / 0.12); }
  .how__arrow { display: flex; }
  .how__photo { aspect-ratio: 4 / 3; }
  .how__steps { gap: var(--s-4); }
  .how > .container { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
}

/* ---------- Photo in a gold mat, with live overlay text ---------- */
.framed {
  position: relative;
  margin: 0;
  align-self: center;          /* never stretch to the row height */
  height: fit-content;
}
.framed__media {
  position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgb(var(--shadow-color) / 0.28);
  border: var(--hairline) solid var(--gold);
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: var(--green-deep);
}
.framed--wide .framed__media { aspect-ratio: 3 / 2; }
.framed--tall .framed__media { aspect-ratio: 5 / 4; }
/* fills the height of its grid row, so the copy column's foot line ends level with the picture */
.framed--fill .framed__media { aspect-ratio: 5 / 4; }
@media (min-width: 1000px) {
  .framed--fill { align-self: stretch; height: auto; }
  .framed--fill .framed__media { height: 100%; aspect-ratio: auto; }
}
.framed--square .framed__media { aspect-ratio: 8 / 7; }
.framed__media img { width: 100%; height: 100%; object-fit: cover; }
/* Soft scrims top and bottom so the overlay text reads on bright skies */
.framed__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* light haze top right so the ink label reads, dark scrim bottom for the cream caption */
    radial-gradient(ellipse 74% 60% at 100% 0%, rgb(244 238 228 / 0.82) 0%, rgb(244 238 228 / 0.42) 48%, rgb(244 238 228 / 0) 76%),
    linear-gradient(to top, rgb(22 41 31 / 0.5) 0%, rgb(22 41 31 / 0) 32%);
}
.framed__label {
  z-index: 1;
  position: absolute; top: clamp(1.25rem, 3vw, 2.5rem); right: clamp(1.25rem, 3vw, 2.5rem);
  display: grid; gap: 2px; padding-left: var(--s-4);
  border-left: var(--hairline) solid var(--gold);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  font-size: 0.6875rem; line-height: 1.5;
  text-shadow: 0 1px 8px rgb(244 238 228 / 0.8);
}
.framed__label::after {
  content: ""; display: block; width: 2.25rem; height: var(--hairline);
  background: var(--gold); margin-top: var(--s-2);
}
.framed__caption {
  z-index: 1;
  position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.25rem);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 10px rgb(22 41 31 / 0.6);
}
.framed__caption::before { content: ""; width: 2.25rem; height: var(--hairline); background: var(--gold); }
.framed__label, .framed__caption { font-size: 0.6875rem; }

/* Rule with a small-caps line */
.rule-line {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6); max-width: none;
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-60);
}

/* Icon rows with hairline dividers */
.icon-rows { display: grid; }
.icon-rows li { position: relative; display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-4); }
.icon-rows li + li::before {
  content: ""; position: absolute; top: 0; left: calc(3rem + var(--s-4)); right: 0;
  height: var(--hairline); background: rgb(201 168 118 / 0.3);
}
.icon-rows__text { font-size: var(--fs-md); }

/* ---------- After booking ---------- */
/* Faint topographic lines in the top right corner of the green band */
.after { position: relative; overflow: hidden; }
.after::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: min(34rem, 46%); aspect-ratio: 520 / 420;
  background: url("../assets/brand/contour-lines.svg") top right / contain no-repeat;
  opacity: 0.5;
}
.after > .container { position: relative; z-index: 1; }
.after__grid { display: grid; gap: var(--s-7); align-items: center; }
.after__title {
  margin-top: var(--s-4);
  font-size: clamp(2.25rem, 1.5rem + 2.9vw, 3.9rem);
  line-height: 1.08; letter-spacing: var(--ls-tight);
  text-wrap: nowrap;
}
.after__lead { margin-top: var(--s-5); font-size: var(--fs-md); color: var(--cream); max-width: 34rem; }
.after .icon-rows { margin-top: var(--s-6); }
/* Gold rings, gold glyphs, gold hairlines */
.after .icon-ring { color: var(--gold); border-color: var(--gold); background: transparent; }
.after .icon-rows li + li::before { background: rgb(201 168 118 / 0.45); }
.after .icon-rows__text { color: var(--cream); }
@media (max-width: 599px) { .after__title { text-wrap: balance; } }
@media (min-width: 1100px) {
  .after__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: var(--s-8); align-items: center; }
  .after__lead { font-size: 1.25rem; line-height: 1.5; max-width: 34rem; }
  .after .icon-rows li { padding-block: var(--s-4); }
  .after .icon-rows__text { font-size: var(--fs-base); }
}

/* ---------- Page hero with a full-bleed banner (services) ---------- */
.page-hero {
  position: relative;
  /* run the picture up behind the glass header */
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--s-4));
  background-color: var(--cream);
  background-image: url("../assets/img/services-hero-w1600.webp");
  background-image: image-set(url("../assets/img/services-hero-w1600.webp") 1x, url("../assets/img/services-hero-w2172.webp") 2x);
  background-size: cover;
  background-position: right center;
  border-bottom: var(--hairline) solid var(--rule);
}
@media (min-width: 1700px) { .page-hero { background-image: url("../assets/img/services-hero-w2172.webp"); } }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--cream) 0%, rgb(244 238 228 / 0.86) 22%, rgb(244 238 228 / 0.25) 42%, rgb(244 238 228 / 0) 58%);
}
.page-hero__inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  /* the plate is 3:1, so at full width this shows all of it */
  min-height: max(33.3vw, 17rem);
  padding-block: var(--s-6);
}
.page-hero__text { max-width: 46%; }
.page-hero__title { margin-top: var(--s-3); font-size: clamp(2.5rem, 5.4vw, 6.5rem); line-height: 1; letter-spacing: var(--ls-tight); }
@media (min-width: 900px) { .page-hero > .container { width: auto; max-width: none; margin-inline: 6.5%; } }
@media (max-width: 899px) { .page-hero__text { max-width: none; } }
.page-hero__sub { margin-top: var(--s-4); font-size: var(--fs-base); color: var(--ink-soft); max-width: 32rem; }
.page-hero__label {
  display: none; position: absolute; top: 24%;
  /* the vertical rule sits under the centre of the header's button: container right edge minus half the button */
  left: calc(50% + min(50% - var(--gutter), 36rem) - 5.25rem);
  padding-left: var(--s-4); border-left: var(--hairline) solid var(--gold);
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
}
.page-hero__label span { display: block; }
.page-hero__label::after { content: ""; display: block; width: 2.25rem; height: var(--hairline); background: var(--gold); margin-top: var(--s-2); }
@media (min-width: 1100px) { .page-hero__label { display: block; } }
@media (max-width: 899px) {
  .page-hero { background-image: url("../assets/img/services-hero-w1200.webp"); background-position: 72% center; }
  .page-hero::before { background: linear-gradient(to bottom, var(--cream) 0%, rgb(244 238 228 / 0.92) 62%, rgb(244 238 228 / 0.55) 100%); }
}

/* ---------- Services: the three numbered sections ---------- */
.service { position: relative; overflow: hidden; background: var(--cream); }
.service + .service { border-top: var(--hairline) solid rgb(201 168 118 / 0.3); }
.service:nth-child(even) { background: var(--cream); }
/* faint contour lines, opposite corners */
.service::before, .service::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(30rem, 34%); aspect-ratio: 520 / 420;
  background: url("../assets/brand/contour-lines.svg") center / contain no-repeat;
  opacity: 0.4;
}
.service::before { top: 0; left: 0; transform: scaleX(-1); }
.service::after { bottom: 0; right: 0; transform: scaleY(-1); }
.service__grid { position: relative; z-index: 1; display: grid; gap: var(--s-6); align-items: center; }

.service__text { position: relative; }
.service__title {
  position: relative; z-index: 1;
  margin-top: var(--s-3);
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: 1.02; letter-spacing: var(--ls-tight);
  max-width: 11ch;
}
.service__text > .kicker { position: relative; z-index: 1; }
/* the numeral sits beside the headline and is allowed to tuck behind it */
.service__numeral {
  position: absolute; z-index: 0; top: 0; right: 0;
  font-size: clamp(4.5rem, 2rem + 7vw, 9.5rem);
  font-weight: var(--w-regular); line-height: 0.82; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.3px var(--gold);
  opacity: 0.9; pointer-events: none;
}
.service__summary {
  margin-top: var(--s-4);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.25; color: var(--green); font-weight: var(--w-medium);
  max-width: 24ch;
}
.service__body { margin-top: var(--s-4); color: var(--ink-soft); max-width: 46ch; }
.service__includes { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--hairline) solid var(--rule); }
.service__includes .icon-rows { margin-top: var(--s-2); }
.service__includes .icon-rows li { padding-block: var(--s-3); }
.service__includes .icon-rows li + li::before { background: rgb(201 168 118 / 0.3); }
.service__includes .icon-ring { color: var(--gold); border-color: var(--gold); background: transparent; width: 2.75rem; height: 2.75rem; }
.service__includes .icon-ring .icon { width: 1.15rem; height: 1.15rem; }
.service__includes .icon-rows__text { font-size: var(--fs-base); color: var(--ink); }

/* note inside the copy column, gold rule under it, sits level with the photo */
.service__note {
  margin-top: var(--s-6); padding-bottom: var(--s-3); position: relative;
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.service__note::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: var(--hairline); background: var(--gold); }
/* two labels joined by a single rule */
.service__rule {
  position: relative; z-index: 1; margin-top: var(--s-5);
  display: flex; align-items: center; gap: var(--s-5);
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.service__rule i { flex: 1; height: var(--hairline); background: var(--gold); opacity: 0.8; }
.service__rule span:last-child { text-align: right; }

@media (min-width: 1000px) {
  .service { padding-top: clamp(2.6rem, 4vw, 4.6rem); padding-bottom: clamp(4rem, 6vw, 7rem); }
  .service__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: stretch; }
  .service__text { position: relative; display: flex; flex-direction: column; justify-content: center; }
  .service__text:has(.service__note) { padding-bottom: 4.5rem; }
  .service__note { position: absolute; left: 0; bottom: 0; margin-top: 0; }
  /* when the photo moves to the left it keeps the larger column */
  .service__grid--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .service__grid--flip > .service__text { order: 2; }
  .service__title { max-width: 9ch; }
}

/* ---------- Where we plan ---------- */
.where {
  position: relative;
  background-color: var(--cream);
  background-image: url("../assets/img/services-where-background-w1600.webp");
  background-image: image-set(url("../assets/img/services-where-background-w1600.webp") 1x, url("../assets/img/services-where-background-w1672.webp") 2x);
  background-repeat: no-repeat;
  /* the plate fills the section from its very top, so the contour work baked
     into its corners lines up with the section edges */
  background-size: cover;
  background-position: center top;
  min-height: 56.3vw;
  padding-top: clamp(2.5rem, 4.5vw, 5rem);
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 1700px) { .where { background-image: url("../assets/img/services-where-background-w1672.webp"); } }
@media (max-width: 899px) {
  .where { background-image: url("../assets/img/services-where-background-w1200.webp"); background-size: 100% auto; background-position: center bottom; min-height: 0; padding-bottom: clamp(5rem, 34vw, 12rem); }
  .where::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--cream) 0%, rgb(244 238 228 / 0.9) 62%, rgb(244 238 228 / 0) 88%); }
}
.where__grid { position: relative; z-index: 1; display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .where > .where__grid { width: min(100% - 2 * var(--gutter), 104rem); } }
.where__who-title span { display: block; }
.where__who-title,
.where__area-title {
  margin-top: var(--s-3);
  /* both column heads share one size, set so the longest unbroken line of the
     left one always fits its column */
  font-size: clamp(1.55rem, 3.6vw, 4rem);
  line-height: 1.04; letter-spacing: var(--ls-tight);
  max-width: none;
}
.where__who .icon-rows { margin-top: var(--s-4); }
.where__who .icon-rows li { padding-block: var(--s-3); }
.where__who .icon-rows li + li::before { background: rgb(201 168 118 / 0.32); }
.where__who .icon-ring { color: var(--gold); border-color: var(--gold); background: transparent; width: 2.75rem; height: 2.75rem; }
.where__who .icon-ring .icon { width: 1.15rem; height: 1.15rem; }
.where__who .icon-rows__text { font-size: var(--fs-base); color: var(--ink); }
.where__area-body { margin-top: var(--s-3); color: var(--ink-soft); max-width: 52ch; }
.where__area .framed { margin-top: var(--s-4); }

/* gold label, faint footnote, compass rail */
.where__label,
.where__compass {
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.9;
}
.where__label { color: var(--gold-text); position: relative; padding-bottom: var(--s-3); }
.where__label span { display: block; }
.where__label::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: var(--hairline); background: var(--gold); }
.where__compass { color: var(--gold-text); display: grid; justify-items: start; gap: var(--s-2); text-align: left; }
.where__compass-n { color: var(--gold-text); letter-spacing: 0.2em; }
.where__compass-arrow {
  width: 0; height: 0; margin-top: -2px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 13px solid var(--gold);
}
.where__compass-coords { color: var(--gold-text); letter-spacing: 0.16em; }
.where__compass-note { position: relative; padding-top: var(--s-4); color: var(--gold-text); }
.where__compass-note::before { content: ""; position: absolute; top: var(--s-2); left: 0; width: 1.75rem; height: var(--hairline); background: var(--gold); }
.where__foot {
  margin-top: var(--s-6); position: relative; padding-bottom: var(--s-3);
  font-size: 0.6875rem; font-weight: var(--w-medium); line-height: 1.8;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.where__foot::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: var(--hairline); background: var(--gold); }
@media (min-width: 1000px) {
  /* sits on the tree line at the foot of the plate */
  .where__foot { color: var(--white); text-shadow: 0 1px 10px rgb(22 41 31 / 0.75); }
}

@media (min-width: 1000px) {
  .where__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "who area label"
      "who area rail"
      "foot area rail";
    column-gap: clamp(2rem, 3.4vw, 3.75rem);
    row-gap: 0;
    align-items: start;
    min-height: 47vw;   /* fills the plate so the foot line reaches the tree band */
  }
  .where__who { grid-area: who; position: relative; padding-right: var(--s-5); }
  .where__who-title span { white-space: nowrap; }
  .where__who::after { content: ""; position: absolute; top: 0.4rem; right: 0; height: 74%; width: var(--hairline); background: rgb(201 168 118 / 0.45); }
  .where__area { grid-area: area; }
  .where__label { grid-area: label; margin-top: var(--s-2); }
  .where__compass { grid-area: rail; align-self: center; margin-top: var(--s-8); }
  .where__foot { grid-area: foot; align-self: end; margin-top: var(--s-9); }
}

/* ---------- On the ground ---------- */
.proof { position: relative; overflow: hidden; background-image: url("../assets/img/linen-tile.webp"); background-size: 512px; }
.proof::before, .proof::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(28rem, 32%); aspect-ratio: 520 / 420;
  background: url("../assets/brand/contour-lines.svg") center / contain no-repeat;
  opacity: 0.4;
}
.proof::before { top: 0; right: 0; }                                   /* top right */
.proof::after { top: 0; left: 0; transform: scaleX(-1); height: 62%; width: min(24rem, 28%); aspect-ratio: auto; background-position: left top; }  /* runs from the very top on the left */
.proof > .container { position: relative; z-index: 1; }
.proof__title {
  margin-top: var(--s-4);
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.25rem);
  line-height: 1.05; letter-spacing: var(--ls-tight);
}
.proof__sub {
  margin-top: var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  max-width: none;
}
.proof__grid { --gap: var(--s-4); margin-top: var(--s-6); }
.proof__item { box-shadow: var(--shadow-md); border-radius: 4px; }

/* ---------- Any occasion ---------- */
.occasions { position: relative; overflow: hidden; padding-bottom: var(--s-4); }
.occasions::before, .occasions::after {
  content: ""; position: absolute; top: 0; z-index: 0; pointer-events: none;
  width: min(26rem, 30%); aspect-ratio: 520 / 420;
  background: url("../assets/brand/contour-lines.svg") center / contain no-repeat;
  opacity: 0.38;
}
.occasions::before { left: 0; transform: scaleX(-1); }
.occasions::after { right: 0; }
.occasions > .container { position: relative; z-index: 1; }
.photo-card__over {
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 8px rgb(22 41 31 / 0.6);
}
.photo-card__overlay { gap: var(--s-2); }
.photo-card__overlay .icon-ring { margin-bottom: var(--s-1); }
.photo-card__title { margin-top: 0; }

/* ---------- What we do: taller photo than the copy column ---------- */
@media (min-width: 900px) {
  .what-we-do__media { aspect-ratio: 1 / 1; }
  #what-we-do .split { align-items: center; }
}

/* caption under each On the ground photo, set on the picture */
.proof__item { position: relative; margin: 0; }
.proof__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-8) var(--s-4) var(--s-5);
  text-align: center; color: var(--white);
  font-size: clamp(0.95rem, 0.62rem + 0.72vw, 1.45rem); font-weight: var(--w-medium); line-height: 1.3;
  text-shadow: 0 1px 12px rgb(22 41 31 / 0.75);
  background: linear-gradient(to top, rgb(22 41 31 / 0.72) 0%, rgb(22 41 31 / 0.35) 55%, rgb(22 41 31 / 0) 100%);
  border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}

/* ---------- What we do: wider media column, bigger head, contour lines right ---------- */
.what-we-do { position: relative; overflow: hidden; }
.what-we-do::before, .what-we-do::after {
  content: ""; position: absolute; right: 0; z-index: 0; pointer-events: none;
  width: min(26rem, 30%); aspect-ratio: 520 / 420;
  background: url("../assets/brand/contour-lines.svg") right center / contain no-repeat;
  opacity: 0.4;
}
.what-we-do::before { top: 0; }
.what-we-do::after { bottom: 0; transform: scaleY(-1); }
.what-we-do > .container { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .what-we-do > .container { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
  .what-we-do .split--wide-media { grid-template-columns: 1.35fr 1fr; }
  .what-we-do__media { aspect-ratio: 1 / 1; }
  .what-we-do .section-head h2 { font-size: clamp(2rem, 1.1rem + 2.3vw, 3.1rem); line-height: 1.08; }
}

/* ---------- Beyond the basics ---------- */
.beyond { position: relative; overflow: hidden; }
.beyond::before {
  content: ""; position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: min(30rem, 36%); height: 66%;
  background: url("../assets/brand/contour-lines.svg") right top / cover no-repeat;
  opacity: 0.42;
}
.beyond > .container { position: relative; z-index: 1; }
.beyond__title {
  margin-top: var(--s-4);
  font-size: clamp(2.3rem, 1.3rem + 3vw, 3.9rem);
  line-height: 1.06; letter-spacing: var(--ls-tight);
}
.beyond__title em { font-style: normal; color: var(--gold-text); }
.beyond__body { margin-top: var(--s-4); font-size: var(--fs-base); color: var(--ink-soft); max-width: 44ch; }
.beyond__features {
  display: grid; gap: var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-5);
}
.beyond__features li { display: grid; justify-items: start; gap: var(--s-3); text-align: left; }
.beyond__features .icon { width: 2.1rem; height: 2.1rem; color: var(--gold); }
.beyond__features span {
  font-size: 0.75rem; font-weight: var(--w-medium); line-height: 1.6;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.beyond .btn { margin-top: var(--s-6); }
@media (min-width: 720px) {
  .beyond__features { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
  .beyond__features li { padding-inline: var(--s-5); }
  .beyond__features li:first-child { padding-left: 0; }
  .beyond__features li + li { border-left: var(--hairline) solid var(--gold); }
}
@media (min-width: 900px) {
  .beyond__grid { grid-template-columns: 1fr 1.25fr; }
  .beyond__grid > .beyond__text { order: 2; }
  .beyond__media { aspect-ratio: 5 / 4; }
}

/* the Austin stamp, bottom right of Beyond the basics */
.beyond__stamp {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(1rem, 4vw, 5rem); bottom: clamp(1rem, 3vw, 3.5rem);
  width: clamp(6rem, 11vw, 11rem); height: auto;
  opacity: 0.9;
}
@media (max-width: 899px) { .beyond__stamp { display: none; } }

/* Services page: a genuinely glassy header so the hero reads to the very top */
body:has(.page-hero) .site-header {
  background: color-mix(in srgb, var(--cream) 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* the Exceptional golf trips stamp, bottom right of What we do */
.what-we-do__stamp {
  position: absolute; z-index: 1; pointer-events: none;
  /* the artwork has clear padding around the circle, so it overhangs the edge to read flush */
  right: -2.5rem; bottom: -2rem;
  width: clamp(6rem, 10vw, 10rem); height: auto;
  opacity: 0.9;
}
@media (max-width: 899px) { .what-we-do__stamp { display: none; } }

/* ---------- Homepage closing call to action ---------- */
.home-cta {
  position: relative;
  background-color: var(--cream);
  background-image: url("../assets/img/home-cta-background-w1600.webp");
  background-image: image-set(url("../assets/img/home-cta-background-w1600.webp") 1x, url("../assets/img/home-cta-background-w1916.webp") 2x);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  min-height: 42.8vw;                 /* the plate is 1916 x 821 */
  display: grid; align-content: center;
  padding-block: clamp(2.5rem, 4vw, 4rem);
  overflow: hidden;
}
@media (min-width: 1950px) { .home-cta { background-image: url("../assets/img/home-cta-background-w1916.webp"); } }
@media (max-width: 899px) {
  .home-cta { background-image: url("../assets/img/home-cta-background-w1200.webp"); background-position: 62% center; min-height: 0; }
  .home-cta::before { content: ""; position: absolute; inset: 0; background: rgb(244 238 228 / 0.78); }
}
.home-cta__inner { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; }
.home-cta__kicker {
  position: relative; padding-bottom: var(--s-4);
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft);
}
.home-cta__kicker::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 3.25rem; height: var(--hairline); background: var(--gold);
}
.home-cta__title {
  margin-top: var(--s-5);
  font-size: clamp(2.2rem, 1rem + 3.9vw, 5rem);
  line-height: 1.1; letter-spacing: var(--ls-tight);
  max-width: none;   /* the two lines are set explicitly; never re-wrap them */
}
.home-cta__title span, .home-cta__title em { display: block; }
.home-cta__title em { font-style: italic; }
.home-cta__body {
  margin-top: var(--s-5);
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.3rem);
  color: var(--ink-soft); max-width: 46ch;
}

/* the pill, with the gold disc riding its right end */
.cta-pill {
  position: relative; margin-top: var(--s-7);
  display: inline-flex; align-items: center; gap: var(--s-4);
  min-height: 4.5rem;
  padding: 0 5rem 0 clamp(2rem, 3.5vw, 3.25rem);
  background: var(--green); color: var(--cream);
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 18px 40px rgb(var(--shadow-color) / 0.3);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cta-pill:hover { background: var(--green-deep); }
.cta-pill:active { transform: translateY(1px); }
.cta-pill__label {
  font-size: clamp(0.85rem, 0.75rem + 0.25vw, 1.05rem); font-weight: var(--w-medium);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.cta-pill__arrow { font-size: 1.2em; line-height: 1; transition: transform var(--dur-fast) var(--ease-out); }
.cta-pill:hover .cta-pill__arrow { transform: translateX(3px); }
.cta-pill__icon {
  position: absolute; right: 0; top: 50%; transform: translate(18%, -50%);
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--green);
  box-shadow: 0 10px 24px rgb(var(--shadow-color) / 0.28);
}
.cta-pill__icon .icon { width: 1.6rem; height: 1.6rem; }
@media (max-width: 479px) {
  .cta-pill { padding-right: 4rem; min-height: 4rem; }
  .cta-pill__icon { width: 4rem; height: 4rem; transform: translate(12%, -50%); }
}

.home-cta__features {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-4);
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.home-cta__features li { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.home-cta__features .icon { width: 1.35rem; height: 1.35rem; color: var(--gold); }
@media (min-width: 720px) {
  .home-cta__features { grid-auto-flow: column; gap: 0; }
  .home-cta__features li { padding-inline: clamp(1rem, 2.5vw, 2.25rem); }
  .home-cta__features li + li { border-left: var(--hairline) solid var(--gold); }
}

.home-cta__tagline {
  position: absolute; z-index: 1; right: var(--gutter); top: 62%; transform: translateY(-50%);
  display: none; align-items: center; gap: var(--s-4); max-width: none;
  font-size: 0.6875rem; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.home-cta__tagline i { display: block; width: 3rem; height: var(--hairline); background: var(--gold); }
@media (min-width: 1200px) { .home-cta__tagline { display: flex; } }

/* ---------- Shared closing call to action (about, faq, services) ---------- */
.page-cta {
  position: relative;
  background-color: var(--cream);
  background-repeat: no-repeat;
  /* always the whole picture, edge to edge, never cropped sideways */
  background-size: 100% auto;
  background-position: center top;
  display: grid; align-content: center;
  padding-block: clamp(2.25rem, 3.2vw, 3.25rem);
  overflow: hidden;
}
/* Services: the 3:1 plate, shown whole */
.page-cta[data-cta="about-cta-background"] {
  background-image: url("../assets/img/about-cta-background-w1600.webp");
  background-image: image-set(url("../assets/img/about-cta-background-w1600.webp") 1x, url("../assets/img/about-cta-background-w2172.webp") 2x);
  /* full width, with the plate's busiest bottom edge cropped away so the
     feature row stays on the cream */
  min-height: 27.5vw;
  padding-block: clamp(1.75rem, 2.2vw, 2.4rem);
}
@media (min-width: 1700px) { .page-cta[data-cta="about-cta-background"] { background-image: url("../assets/img/about-cta-background-w2172.webp"); } }
/* About and FAQ: their own 2.33:1 photographs, under a cream wash */
.page-cta[data-cta="covered-porch-golden-hour"] {
  background-image: url("../assets/img/covered-porch-golden-hour-w1600.webp");
  background-image: image-set(url("../assets/img/covered-porch-golden-hour-w1600.webp") 1x, url("../assets/img/covered-porch-golden-hour-w1916.webp") 2x);
  min-height: 42.8vw;
}
.page-cta[data-cta="dew-on-green-macro"] {
  background-image: url("../assets/img/dew-on-green-macro-w1600.webp");
  background-image: image-set(url("../assets/img/dew-on-green-macro-w1600.webp") 1x, url("../assets/img/dew-on-green-macro-w1916.webp") 2x);
  min-height: 42.8vw;
}
@media (min-width: 1700px) {
  .page-cta[data-cta="covered-porch-golden-hour"] { background-image: url("../assets/img/covered-porch-golden-hour-w1916.webp"); }
  .page-cta[data-cta="dew-on-green-macro"] { background-image: url("../assets/img/dew-on-green-macro-w1916.webp"); }
}
/* a shaped wash rather than a flat one: opaque where the copy sits, easing off
   at the edges so the photograph still reads */
.page-cta[data-cta="covered-porch-golden-hour"]::before,
.page-cta[data-cta="dew-on-green-macro"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 72% at 50% 50%, rgb(244 238 228 / 0.94) 0%, rgb(244 238 228 / 0.88) 55%, rgb(244 238 228 / 0.52) 100%),
    rgb(244 238 228 / 0.28);
}
@media (max-width: 899px) {
  .page-cta { background-size: cover; background-position: 62% center; min-height: 0 !important; }
  .page-cta::before { content: ""; position: absolute; inset: 0; background: rgb(244 238 228 / 0.85); }
}
.page-cta__inner { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; }
.page-cta__title {
  margin-top: var(--s-4);
  font-size: clamp(1.9rem, 0.9rem + 3vw, 3.9rem);
  line-height: 1.08; letter-spacing: var(--ls-tight);
  max-width: 20ch;
}
.page-cta__body {
  margin-top: var(--s-3);
  font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.15rem);
  color: var(--ink-soft); max-width: 52ch;
}
.page-cta .btn { margin-top: var(--s-5); }
.page-cta__features {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-4);
  text-align: left;
}
.page-cta__features li { display: flex; align-items: center; gap: var(--s-3); }
.page-cta__features .icon { width: 1.6rem; height: 1.6rem; color: var(--gold); flex: 0 0 auto; }
.page-cta__features strong {
  display: block;
  font-size: 0.75rem; font-weight: var(--w-medium);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.page-cta__features span > * + * { margin-top: 2px; }
.page-cta__features span {
  font-size: 0.6875rem; font-weight: var(--w-medium); line-height: 1.5;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
@media (min-width: 820px) {
  .page-cta__features { grid-auto-flow: column; gap: 0; }
  .page-cta__features li { padding-inline: clamp(0.85rem, 1.5vw, 1.6rem); }
  .page-cta__features li + li { border-left: var(--hairline) solid var(--gold); }
}


/* ---------- FAQ ---------- */
/* Hero: 2.88:1 plate, cream left with the seal and the handwritten line baked in */
.faq-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 34.7vw; padding: 4.5vw 6.5vw 4.5vw 8.5%;   /* clear of the contour lines on the plate's left edge */
  background: var(--cream) url("../assets/img/faq-hero-w1600.webp") center top / cover no-repeat;
  background: var(--cream) image-set(url("../assets/img/faq-hero-w1600.webp") 1x, url("../assets/img/faq-hero-w2129.webp") 2x) center top / cover no-repeat;
  border-bottom: var(--hairline) solid var(--rule);
}
@media (min-width: 1700px) { .faq-hero { background-image: url("../assets/img/faq-hero-w2129.webp"); } }
.faq-hero__text { position: relative; z-index: 1; max-width: 50%; }
.faq-hero__title { margin-top: 0; color: var(--green); font-size: clamp(2.5rem, 5.2vw, 6.5rem); line-height: 1; letter-spacing: var(--ls-tight); max-width: none; }
.faq-hero__sub { margin-top: 1.4vw; font-size: clamp(1.05rem, 1.35vw, 1.5rem); line-height: 1.45; color: var(--ink-soft); text-shadow: 0 0 6px var(--cream), 0 0 12px var(--cream); }
.faq-hero__sub span { display: block; }
.faq-hero__place {
  margin-top: 2vw;
  font-size: clamp(0.66rem, 0.78vw, 0.95rem); font-weight: var(--w-medium); line-height: 1.8;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text);
  /* cream halo lifts the gold off the paper grain and contour lines */
  text-shadow: 0 0 2px var(--cream), 0 0 2px var(--cream), 0 0 6px var(--cream), 0 0 12px var(--cream), 0 0 18px var(--cream);
}
.faq-hero__place span { display: block; }
@media (max-width: 899px) {
  .faq-hero { min-height: 0; padding: var(--s-7) var(--gutter) var(--s-6); background-image: url("../assets/img/faq-hero-w1200.webp"); background-position: 68% center; }
  .faq-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--cream) 0%, rgb(244 238 228 / 0.92) 60%, rgb(244 238 228 / 0.6) 100%); }
  .faq-hero__text { max-width: none; }
  .faq-hero__title { margin-top: var(--s-3); }
  .faq-hero__sub { margin-top: var(--s-4); }
  .faq-hero__sub span { display: inline; }
  .faq-hero__place { margin-top: var(--s-5); }
}

/* Body: index on the left, questions on the right, a rail outside on desktop */
.faq-body { position: relative; padding-block: var(--s-8) var(--s-9); background: var(--cream); }
.faq-body::before {
  content: ""; position: absolute; left: 0; top: 0; width: min(22rem, 26%); height: 70%; pointer-events: none;
  background: url("../assets/brand/contour-lines.svg") left top / cover no-repeat; opacity: 0.35;
}
.faq-body > .container { position: relative; }
.faq-layout { max-width: 64rem; }
.faq-list { display: grid; gap: 0; }
.faq-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: start;
  padding-block: var(--s-6); border-top: var(--hairline) solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.faq-item:first-child { border-top: 0; padding-top: var(--s-2); }
.faq-item__num {
  font-size: clamp(1.5rem, 1.9vw, 2.1rem); font-weight: var(--w-medium); line-height: 1.15; letter-spacing: 0.02em;
  color: var(--gold-text); padding-right: var(--s-4); border-right: var(--hairline) solid var(--gold); min-height: 3.5rem;
}
.faq-item__q { font-size: clamp(1.35rem, 1.8vw, 2rem); line-height: 1.15; color: var(--green); }
.faq-item__a { margin-top: var(--s-3); color: var(--ink); max-width: 62ch; }
.faq-item--closed .faq-item__a { display: none; }
.faq-item__toggle {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -0.5rem -0.5rem 0 0;
  background: none; border: 0; border-radius: 50%; color: var(--gold-text); cursor: pointer;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.faq-item__toggle svg { width: 1.35rem; height: 1.35rem; }
.faq-item__toggle:hover { background: rgb(201 168 118 / 0.18); }
/* chevron points down when the answer is closed, up when it is open */
.faq-item__toggle[aria-expanded="true"] { transform: rotate(180deg); }
.faq-item__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq-rail { display: none; }

@media (min-width: 1100px) {
  .faq-rail {
    display: block; position: absolute; left: clamp(1.5rem, 3.2vw, 4rem); top: 26rem; z-index: 1;
  }
  .faq-rail__lines { margin: 0; font-size: 0.68rem; font-weight: var(--w-medium); line-height: 1.9; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }
  .faq-rail__lines span { display: block; }
  .faq-rail__rule { display: block; width: 2.5rem; height: var(--hairline); background: var(--gold); margin-block: var(--s-4); }
  .faq-rail__script {
    margin: 0; font-family: var(--font-script); font-size: clamp(2rem, 2.6vw, 3.2rem); line-height: 0.95; color: var(--gold);
    transform: rotate(-16deg); transform-origin: left top; white-space: nowrap;
  }
  .faq-rail__script span { display: block; padding-left: 0.4em; }
}

/* ---------- Contact ---------- */
/* One plate: paper on the left, the coast on the right. The cards ride over it. */
.contact {
  position: relative; overflow: hidden;
  min-height: 56.3vw;
  padding: 4.5vw 0 5vw;
  background: var(--cream) url("../assets/img/contact-background-w1600.webp") center top / cover no-repeat;
  background: var(--cream) image-set(url("../assets/img/contact-background-w1600.webp") 1x, url("../assets/img/contact-background-w1672.webp") 2x) center top / cover no-repeat;
}
.contact__inner { width: min(100% - 2 * var(--gutter), 104rem); margin-inline: auto; position: relative; z-index: 1; }
@media (min-width: 1100px) { .contact__inner { width: min(78%, 104rem); } }
.contact__head { max-width: 62rem; }
.contact__title { margin-top: 1vw; color: var(--green); font-size: clamp(2.5rem, 5.2vw, 6.5rem); line-height: 1; letter-spacing: var(--ls-tight); max-width: none; }
.contact__sub { margin-top: 1.2vw; font-size: clamp(1.05rem, 1.35vw, 1.5rem); color: var(--ink-soft); }
.contact__cards { display: grid; gap: var(--s-6); margin-top: clamp(1.5rem, 2.6vw, 3rem); align-items: start; }
@media (min-width: 900px) { .contact__cards { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(1rem, 1.6vw, 2rem); } }
.contact .form-card { background: rgb(255 255 255 / 0.9); }
@media (min-width: 700px) {
  /* the number field needs less room than the two date pickers; inputs bottom-align so they share a top edge */
  .form__row--3 { grid-template-columns: minmax(7.75rem, 0.62fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .form__row--3 input { padding-inline: var(--s-3); }
  .form__row--3 input[type="date"] { font-size: 0.95rem; }
}
.glass-card {
  align-self: stretch;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 3rem) clamp(1.5rem, 2.6vw, 3rem) 1.25rem;
  border-radius: var(--radius-lg);
  background: rgb(244 238 228 / 0.42);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}
.glass-card__title { font-size: clamp(1.6rem, 2.2vw, 2.4rem); line-height: 1.1; color: var(--green); }
.glass-steps { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-5); }
.glass-steps li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.glass-steps__ring {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: var(--hairline) solid var(--gold); color: var(--green); background: rgb(255 255 255 / 0.55);
}
.glass-steps__ring .icon { width: 1.25rem; height: 1.25rem; }
.glass-steps__num { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--gold-text); font-weight: var(--w-medium); padding-top: 1rem; }
.glass-steps__text { font-size: clamp(0.9rem, 1.15vw, 1.1rem); color: var(--ink); line-height: 1.45; padding-top: 0.6rem; }
.glass-card__rule { display: block; width: 3rem; height: var(--hairline); background: var(--gold); margin-block: var(--s-8) var(--s-6); }
.glass-card__foot {
  margin: auto 0 0; padding-top: var(--s-6); align-self: flex-end; text-align: right;
  font-size: 0.66rem; font-weight: var(--w-medium); line-height: 1.9; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text);
}
.glass-card__foot span { display: block; }
.glass-card__sub { font-size: clamp(1.6rem, 2.2vw, 2.4rem); line-height: 1.1; color: var(--green); }
.glass-card__note { margin-top: var(--s-2); color: var(--ink); line-height: 1.6; }
.glass-card__note .link { color: var(--green); font-weight: var(--w-medium); }
.contact__corner, .contact__rail { display: none; }
@media (min-width: 1100px) {
  .contact__corner, .contact__rail {
    display: block; position: absolute; margin: 0; z-index: 1;
    font-size: 0.66rem; font-weight: var(--w-medium); line-height: 1.9; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text);
  }
  .contact__corner span, .contact__rail span { display: block; }
  .contact__corner { right: 2.5%; top: 12%; }
  .contact__corner::after { content: ""; display: block; width: 2.25rem; height: var(--hairline); background: var(--gold); margin-top: var(--s-3); }
  .contact__rail--left { left: 2.5%; bottom: 8%; }
  .contact__rail--left::before { content: ""; display: block; width: 2.25rem; height: var(--hairline); background: var(--gold); margin-bottom: var(--s-3); }
  .contact__rail--right { right: 2.5%; top: 50%; }
  .contact__rail--right::before { content: ""; display: block; width: 2.25rem; height: var(--hairline); background: var(--gold); margin-bottom: var(--s-3); }
}
@media (max-width: 899px) {
  .contact { min-height: 0; padding: var(--s-7) 0 var(--s-8); background-image: url("../assets/img/contact-background-w1200.webp"); background-position: 18% top; }
  .contact::before { content: ""; position: absolute; inset: 0; background: rgb(244 238 228 / 0.45); pointer-events: none; }
  .contact__title { margin-top: var(--s-3); }
  .contact__sub { margin-top: var(--s-3); }
  .contact__cards { margin-top: var(--s-6); }
}


/* On the ground: rule line under the photos */
.proof__foot {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); max-width: none;
  font-size: var(--fs-xs); font-weight: var(--w-medium); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text);
}
.proof__foot::before, .proof__foot::after { content: ""; flex: 1; height: var(--hairline); background: var(--gold); }
.proof__foot .icon { width: 1.25rem; height: 1.25rem; color: var(--gold); flex: 0 0 auto; }

/* What we do: caption on the house photo */
.what-we-do__art { position: relative; }
.what-we-do__art .frame { box-shadow: var(--shadow-lg); }
/* soft scrim along the bottom so the caption holds on the lit grass */
.what-we-do__art .frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, rgb(22 41 31 / 0.62), rgb(22 41 31 / 0));
}
.what-we-do__caption {
  position: absolute; z-index: 1; left: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.25rem);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 0.6875rem; font-weight: var(--w-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 10px rgb(22 41 31 / 0.6);
}
.what-we-do__caption::before { content: ""; width: 2.25rem; height: var(--hairline); background: var(--gold); }