@charset "utf-8";
/* ==========================================================================
   Kenady Skelton Photography — v3 "HEIRLOOM"
   A soft romantic keepsake: warm oat paper, deep moss bands, pressed-sprig
   dividers, soft serif type. There is no red anywhere in this file.

   CONTENTS
   01  Design tokens
   02  Reset + base
   03  Typography
   04  Layout: wraps, sections, bands, dividers
   05  Links + buttons
   06  Forms
   07  Media + image treatments
   08  Header + primary nav
   09  Mobile overlay menu
   10  Hero collage
   11  Values strip
   12  Services
   13  Pull-quote band
   14  About teaser
   15  Featured work
   16  Process teaser
   17  Testimonials
   18  Closing CTA
   19  Footer
   20  Motion: reveals, drift, load-in
   21  Reduced motion
   22  Interior page heads + shared stage-2 utilities
   23  Portfolio: filters, column gallery, lightbox
   24  About: intro, approach, a day with her, FAQ accordion
   25  Investment: includes, collection cards, comparison, add-ons
   26  Inquire: form layout, aside, success state
   27  Reduced motion: stage-2 additions
   28  Small shared pieces added with the stage-2 pages
   29  Travel: the schedule
   ========================================================================== */

/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Palette: greens, creams, warm neutrals. No red. ------------------ */
  --oat:            #f4efe6;  /* page ground — warm oat paper              */
  --oat-deep:       #ebe3d5;  /* recessed oat: wells, hovers               */
  --cream:          #fdfbf6;  /* cards, mats, type on moss                 */
  --cream-warm:     #f9f4ea;  /* alternate band, one step off the page     */
  --cream-dim:      rgba(253, 251, 246, .78); /* body copy on moss         */

  --moss:           #33452f;  /* full-bleed section bands                  */
  --moss-dark:      #25321f;  /* footer, headings, solid button hover      */
  --moss-mid:       #4a6142;  /* links, hairline accents                   */
  --sage:           #93a68d;  /* botanical accents, rules                  */
  --sage-soft:      #c2cdbc;  /* muted labels + focus ring on moss         */
  --sage-pale:      #e4e8de;  /* tint blocks, success wash                 */

  --clay:           #8a6f5e;  /* secondary accent: eyebrows, numerals      */
  --clay-dark:      #6e5748;  /* clay hover, form error text               */
  --clay-pale:      #e8dcd1;  /* clay tint, invalid field wash             */

  --ink:            #2b2a26;  /* body text                                 */
  --ink-soft:       #56514a;  /* secondary text                            */
  --ink-faint:      #7d776c;  /* meta, captions                            */

  --line:           #ddd3c3;  /* hairline on oat / cream                   */
  --line-strong:    #c8bca8;  /* hairline that needs to be seen            */
  --line-cream:     rgba(253, 251, 246, .22); /* hairline on moss          */

  --focus:          #4f6a48;  /* focus ring on light — green, never red    */
  --focus-dark:     #c2cdbc;  /* focus ring on moss                        */

  --shadow-soft:    0 18px 40px -30px rgba(43, 42, 38, .48);
  --shadow-lift:    0 30px 64px -38px rgba(37, 50, 31, .55);

  /* --- Type ------------------------------------------------------------- */
  --font-serif:  "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:   "Jost", "Avenir Next", "Century Gothic", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Parisienne", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;

  --fs-label:   .75rem;
  --fs-sm:      .9375rem;
  --fs-body:    clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --fs-lede:    clamp(1.1875rem, 1.1rem + .5vw, 1.375rem);
  --fs-h4:      clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem);
  --fs-h3:      clamp(1.5rem, 1.32rem + .8vw, 1.9375rem);
  --fs-h2:      clamp(2rem, 1.6rem + 1.7vw, 3rem);
  --fs-h1:      clamp(2.5rem, 1.85rem + 2.9vw, 4.25rem);
  --fs-quote:   clamp(1.55rem, 1.15rem + 2.05vw, 2.6rem);
  --fs-script:  clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fs-numeral: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-body:    1.66;
  --lh-quote:   1.3;

  --track-wide:  .2em;   /* wordmark, buttons          */
  --track-label: .16em;  /* small-caps labels and nav  */

  /* --- Space ------------------------------------------------------------ */
  --sp-3xs: .25rem;
  --sp-2xs: .5rem;
  --sp-xs:  .75rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   2.25rem;
  --sp-xl:  3.25rem;
  --sp-2xl: 4.5rem;
  --sp-3xl: 6.5rem;

  --section-y: clamp(4rem, 8.5vw, 7.75rem);
  --gutter:    clamp(1.25rem, 4.5vw, 3.25rem);

  /* --- Layout ----------------------------------------------------------- */
  --wrap:        1180px;
  --wrap-hero:   1240px;
  --wrap-wide:   1400px;
  --wrap-mid:     960px;
  --wrap-narrow:  740px;

  --header-h:  clamp(4.25rem, 3.9rem + 1.6vw, 5.5rem);
  --radius:      2px;
  --radius-arch: 50% 50% var(--radius) var(--radius) / 26% 26% var(--radius) var(--radius);

  /* --- Motion ----------------------------------------------------------- */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --tr-fast:   200ms var(--ease-soft);
  --tr-base:   420ms var(--ease-soft);
  --tr-slow:   900ms var(--ease-soft);
  --tr-image: 1200ms var(--ease-soft);
}

/* ==========================================================================
   02  RESET + BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* overflow-x on BODY ALONE is an old iOS Safari trap: the body becomes the
     scrolling box while html does not, so the page can still be swiped
     sideways into empty space with the fixed header hanging there. Both
     elements need it. `clip` is preferred over `hidden` because it does not
     create a scroll container - which would break position: sticky - and
     browsers that do not know `clip` fall back to the `hidden` above it. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--oat);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Set while the mobile overlay is open */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg, video { max-width: 100%; }
img { display: block; height: auto; border: 0; }
svg { fill: currentColor; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--sp-l);
}

::selection {
  background-color: var(--sage-pale);
  color: var(--moss-dark);
}

/* Focus rings are green. Never red, on any surface. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.band--moss :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible { outline-color: var(--focus-dark); }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 500;
  transform: translate(-50%, -120%);
  padding: .8rem 1.5rem;
  background-color: var(--moss);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--tr-base);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* ==========================================================================
   03  TYPOGRAPHY
   Soft serif for everything readable; small-caps sans for labels; the script
   is reserved for the greeting and her sign-off, never for body copy.
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--moss-dark);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p + p { margin-top: 1.15em; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.58;
  color: var(--ink-soft);
}

/* Small-caps sans label — eyebrows and kickers */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay);
}
.eyebrow--sage  { color: var(--sage); }
.eyebrow--cream { color: var(--sage-soft); }

.script {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--moss);
}

.numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--clay);
}

/* ==========================================================================
   04  LAYOUT: wraps, sections, bands, dividers
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--hero   { max-width: var(--wrap-hero); }
.wrap--wide   { max-width: var(--wrap-wide); }
.wrap--mid    { max-width: var(--wrap-mid); }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* The header is fixed, so the page content starts one header below the top.
   The hero shares the page ground colour, so no negative offset is needed. */
.main { padding-top: var(--header-h); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }

/* Full-bleed colour bands — the signature interruption of the cream */
.band--moss {
  background-color: var(--moss);
  color: var(--cream);
}
.band--moss h1,
.band--moss h2,
.band--moss h3,
.band--moss h4 { color: var(--cream); }
.band--moss .lede,
.band--moss p { color: var(--cream-dim); }

.band--cream { background-color: var(--cream); }
.band--sage  { background-color: var(--sage-pale); }

/* Section heading block */
.section-head {
  display: grid;
  gap: var(--sp-s);
  max-width: 48ch;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.section-head--center {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head p { color: var(--ink-soft); }
/* Wins back the band colour, since .band--moss p is declared earlier */
.band--moss .section-head p { color: var(--cream-dim); }

/* Botanical hairline divider — a pressed sprig between two rules */
.divider {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  width: min(100%, 34rem);
  margin-inline: auto;
  color: var(--sage);
}
.divider--wide { width: min(100%, 58rem); }
.divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}
.divider__sprig {
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  color: var(--sage);
}
.band--moss .divider,
.band--moss .divider__sprig { color: var(--sage-soft); }
.band--moss .divider__line {
  background: linear-gradient(to right, transparent, var(--line-cream) 22%, var(--line-cream) 78%, transparent);
}

/* A divider used between two sections of the same colour */
.section-rule { padding-inline: var(--gutter); }

/* ==========================================================================
   05  LINKS + BUTTONS
   ========================================================================== */
.prose a,
.text-link {
  color: var(--moss-mid);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--sage), var(--sage));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size var(--tr-base), color var(--tr-fast);
}
.prose a:hover,
.text-link:hover {
  color: var(--moss-dark);
  background-size: 100% 2px;
}

/* Small-caps link with a rule that grows on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--moss);
  transition: color var(--tr-fast);
}
.link-arrow::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background-color: currentColor;
  transition: width var(--tr-base);
}
.link-arrow:hover { color: var(--clay); }
.link-arrow:hover::after { width: 3.25rem; }
.band--moss .link-arrow { color: var(--cream); }
.band--moss .link-arrow:hover { color: var(--sage-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05em 2.1em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tr-base), color var(--tr-base),
              border-color var(--tr-base), transform var(--tr-base);
}
.btn:active { transform: translateY(1px); }

.btn--solid {
  background-color: var(--moss);
  border-color: var(--moss);
  color: var(--cream);
}
.btn--solid:hover {
  background-color: var(--moss-dark);
  border-color: var(--moss-dark);
}

.btn--outline {
  background-color: transparent;
  border-color: rgba(51, 69, 47, .35);
  color: var(--moss);
}
.btn--outline:hover {
  background-color: var(--moss);
  border-color: var(--moss);
  color: var(--cream);
}

.btn--clay {
  background-color: transparent;
  border-color: rgba(138, 111, 94, .45);
  color: var(--clay-dark);
}
.btn--clay:hover {
  background-color: var(--clay);
  border-color: var(--clay);
  color: var(--cream);
}

/* Buttons that sit on a moss band */
.btn--cream {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--moss-dark);
}
.btn--cream:hover {
  background-color: transparent;
  border-color: var(--cream);
  color: var(--cream);
}
.btn--ghost {
  background-color: transparent;
  border-color: var(--line-cream);
  color: var(--cream);
}
.btn--ghost:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--moss-dark);
}

.btn--sm { padding: .85em 1.5em; letter-spacing: var(--track-label); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-s);
}
.btn-row--center { justify-content: center; }

/* ==========================================================================
   06  FORMS
   Validation states are clay or green. Never red.
   ========================================================================== */
.form { display: grid; gap: var(--sp-m); }

.field { display: grid; gap: .45rem; }
.field--wide { grid-column: 1 / -1; }

.field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--moss-dark);
}
.field__label .opt {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: .95rem 1.05rem;
  background-color: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast),
              background-color var(--tr-fast);
}
.textarea { min-height: 9.5rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2333452f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 12px 8px;
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); opacity: .8; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--sage); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--moss-mid);
  box-shadow: 0 0 0 3px rgba(147, 166, 141, .35);
}

/* Invalid: clay outline + clay wash + clay message */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: var(--clay);
  background-color: var(--clay-pale);
}
.field.is-invalid .input:focus,
.field.is-invalid .select:focus,
.field.is-invalid .textarea:focus {
  box-shadow: 0 0 0 3px rgba(138, 111, 94, .28);
}
.field__error {
  font-family: var(--font-sans);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--clay-dark);
}
.field:not(.is-invalid) .field__error { display: none; }

.form-note {
  font-style: italic;
  color: var(--ink-soft);
}

.form-status {
  padding: var(--sp-m);
  background-color: var(--sage-pale);
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  color: var(--moss-dark);
}
.form-status--warn {
  background-color: var(--clay-pale);
  border-color: var(--clay);
  color: var(--clay-dark);
}

/* Honeypot wrapper — never seen, never focused by a human */
.hp {
  /* Clipped in place rather than pushed off-screen. A -9999px absolute
     element is another way to hand a mobile browser a reason to scroll
     sideways, and it is not needed - clip hides it just as well from
     sighted users while bots still see the field. */
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   07  MEDIA + IMAGE TREATMENTS
   A ratio class reserves the box before the pixels land, so nothing shifts
   while a lazy image loads and nothing is cropped into a shape it is not.
   The two fixed classes cover the portrait work the site was built around;
   .r-auto covers everything else Kenady uploads.
   ========================================================================== */
.figure { position: relative; margin: 0; }
.figure img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.r-23 img { aspect-ratio: 2 / 3; }
.r-45 img { aspect-ratio: 4 / 5; }
/* Any other shape — landscape, square, panoramic. photo_render_tag() writes
   class="figure figure--zoom r-auto" style="--r: 3/2" from the real stored
   dimensions, so the box is exact and object-fit: cover never crops.
   Deliberately no fallback inside var(): if --r were ever missing, letting
   aspect-ratio compute to `auto` falls back to the img width/height
   attributes, which is right, whereas a hard-coded fallback ratio would
   crop a landscape frame into a portrait one. */
.r-auto img { aspect-ratio: var(--r); }

/* Cream mat — a photo dropped onto an album page */
.figure--mat {
  background-color: var(--cream);
  padding: clamp(.5rem, 1.1vw, .9rem);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* Arched top — chapel window, keepsake locket */
.figure--arch img { border-radius: var(--radius-arch); }

/* Slow zoom for linked images */
.figure--zoom { overflow: hidden; }
.figure--zoom img { transition: transform var(--tr-image); }
a:hover .figure--zoom img,
a:focus-visible .figure--zoom img { transform: scale(1.035); }

.figure__caption {
  margin-top: var(--sp-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ==========================================================================
   08  HEADER + PRIMARY NAV
   Transparent over the oat hero, solid cream once the page scrolls.
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 400;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--tr-base), border-color var(--tr-base),
              box-shadow var(--tr-base);
}
.site-header.is-stuck {
  background-color: rgba(253, 251, 246, .95);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 30px -28px rgba(43, 42, 38, .6);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-stuck {
    background-color: rgba(253, 251, 246, .82);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  min-height: var(--header-h);
}

.wordmark {
  display: grid;
  gap: .28rem;
  line-height: 1;
  color: var(--moss-dark);
  text-decoration: none;
}
.wordmark__name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, .92rem + .38vw, 1.2rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--tr-fast);
}
.wordmark__sub {
  font-family: var(--font-sans);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
}
.wordmark:hover .wordmark__name { color: var(--moss-mid); }

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  /* Six items now (Travel sits between Investment and Inquire). At the 900px
     breakpoint the wordmark plus HOME PORTFOLIO ABOUT INVESTMENT TRAVEL and
     the Inquire button need every pixel, so the minimum gap is tighter than
     it was at five. The large-screen end is unchanged to the eye. */
  gap: clamp(.9rem, 1.9vw, 2.25rem);
}
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: .35rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--moss-dark);
  transition: color var(--tr-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tr-base);
}
.nav__link:hover { color: var(--clay-dark); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--clay-dark); }

/* Hamburger, which becomes the close control while the overlay is open */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .2rem .55rem .6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--moss-dark);
}
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 26px;
  height: 12px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--tr-base);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 11px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(15deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { transform: translateY(-5.5px) rotate(-15deg); }

/* While the overlay is open the header sits on top of the moss panel, so its
   marks flip to cream and it drops any scrolled background. */
.site-header.is-menu-open,
.site-header.is-menu-open.is-stuck {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header.is-menu-open .wordmark,
.site-header.is-menu-open .wordmark__name,
.site-header.is-menu-open .nav-toggle { color: var(--cream); }
.site-header.is-menu-open .wordmark__sub { color: var(--sage-soft); }
.site-header.is-menu-open .wordmark:hover .wordmark__name { color: var(--sage-soft); }

@media (min-width: 900px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* ==========================================================================
   09  MOBILE OVERLAY MENU
   Full-screen moss panel. The header stays above it so the toggle can close.
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Six links plus the foot can outgrow a short phone. Centred content that
     overflows a flex container is clipped at the TOP, where the scrollbar
     cannot reach it; `safe` pins it to the start instead the moment it does
     not fit. Older engines ignore this line and keep the plain centre. */
  justify-content: safe center;
  padding: calc(var(--header-h) + var(--sp-l)) var(--gutter) var(--sp-2xl);
  background-color: var(--moss);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity var(--tr-base), transform var(--tr-base), visibility 0s linear 420ms;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--tr-base), transform var(--tr-base), visibility 0s;
}
.mobile-menu__list {
  display: grid;
  gap: clamp(.85rem, 2.6vw, 1.4rem);
  margin-bottom: var(--sp-xl);
}
.mobile-menu__link {
  display: inline-block;
  justify-self: start;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 3.2vw, 3rem);
  line-height: 1.1;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--tr-fast), transform var(--tr-base);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--sage-soft);
  transform: translateX(.35rem);
}
.mobile-menu__link[aria-current="page"] {
  font-style: italic;
  color: var(--sage-soft);
}
.mobile-menu__foot {
  display: grid;
  gap: var(--sp-xs);
  padding-top: var(--sp-l);
  border-top: 1px solid var(--line-cream);
}
.mobile-menu__tagline {
  max-width: 34ch;
  font-style: italic;
  color: var(--cream-dim);
}
.mobile-menu__foot a {
  justify-self: start;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sage-soft);
  text-decoration: none;
  transition: color var(--tr-fast);
}
.mobile-menu__foot a:hover { color: var(--cream); }

/* ==========================================================================
   10  HERO — full-screen photograph
   --------------------------------------------------------------------------
   Kenady wanted the photograph to fill the screen on arrival, with everything
   else waiting below the fold. So the hero is the picture: full viewport,
   behind the transparent header, with only the wordmark, the place line and a
   scroll cue over it. The tagline and buttons moved into the intro section
   underneath — that is the "additional information" you scroll to.
   ========================================================================== */

/* This page only: cancel the header offset so the photograph runs to the very
   top of the viewport instead of starting below the header bar. */
.main--flush { padding-top: 0; }

.hero--full {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  padding: 0;
  overflow: hidden;
  background: var(--moss-dark);   /* holds the space before the photo paints */
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  object-fit: cover;
  /* A 2:3 portrait shown in a landscape window is a horizontal slice, so bias
     downward to keep the couple and the lawn in frame at any window shape. */
  object-position: 50% 56%;
}

/* Scrims: a soft one under the header so the nav stays readable, a deeper one
   at the foot so cream type holds over bright grass. Moss-tinted rather than
   black so the photograph stays true to colour. */
.hero--full::before,
.hero--full::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}
.hero--full::before {
  top: 0;
  height: 30vh;
  background: linear-gradient(to bottom,
              rgba(37, 50, 31, .34) 0%,
              rgba(37, 50, 31, .14) 55%,
              rgba(37, 50, 31, 0) 100%);
}
.hero--full::after {
  bottom: 0;
  height: 58vh;
  background: linear-gradient(to top,
              rgba(37, 50, 31, .74) 0%,
              rgba(37, 50, 31, .34) 36%,
              rgba(37, 50, 31, 0) 100%);
}

.hero__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(4.5rem, 11vh, 8rem);
  z-index: 2;
}
.hero__overlay-inner {
  display: grid;
  justify-items: start;
  gap: var(--sp-s);
}

.hero__wordmark { margin: 0; }
/* Two lines, not one: the couple sit centre-right in this frame, and a single
   wide line runs straight across them. Stacked, the wordmark stays left of
   them at every window width. */
.hero__name {
  display: block;
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(37, 50, 31, .38);
}
.hero__line { display: block; }
/* "Photography" completes the wordmark. Sized in em so it tracks the name at
   every clamp step, with wide letterspacing so the shorter word still carries
   the same optical width as SKELTON above it. */
.hero__line--sub {
  font-size: .3em;
  letter-spacing: .4em;
  margin-top: .55em;
  color: rgba(253, 251, 246, .93);
}

.hero__place {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(253, 251, 246, .88);
  text-shadow: 0 1px 12px rgba(37, 50, 31, .5);
}
.hero__place-rule {
  flex: 0 0 auto;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(253, 251, 246, .9);
  text-shadow: 0 1px 12px rgba(37, 50, 31, .5);
}
.hero__scroll-rule {
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: heroScrollPulse 2.8s ease-in-out infinite;
}
@keyframes heroScrollPulse {
  0%, 100% { transform: scaleX(.5);  opacity: .55; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

@media (min-width: 900px) {
  .hero__overlay { bottom: clamp(6rem, 14vh, 10rem); }
  .hero__scroll  { left: calc((100vw - min(100vw, var(--wrap-wide))) / 2 + var(--gutter)); }
}

/* Header sits on the photograph until it sticks, so its type flips to cream
   for that stretch. Scoped to pages that actually have a full-bleed hero. */
/* Over a full-bleed photo the header needs its own ground - a page-level
   vignette alone left the nav floating on sunlit leaves. This bar is scoped to
   the header's own height and fades out completely at its lower edge, so the
   photograph still reads as full screen. */
body:has(.main--flush) .site-header:not(.is-stuck) {
  background-image: linear-gradient(to bottom,
                    rgba(37, 50, 31, .76) 0%,
                    rgba(37, 50, 31, .46) 58%,
                    rgba(37, 50, 31, 0) 100%);
}

body:has(.main--flush) .site-header:not(.is-stuck) .wordmark__name,
body:has(.main--flush) .site-header:not(.is-stuck) .nav__link,
body:has(.main--flush) .site-header:not(.is-stuck) .nav-toggle {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(37, 50, 31, .7), 0 1px 16px rgba(37, 50, 31, .5);
}
body:has(.main--flush) .site-header:not(.is-stuck) .wordmark__sub {
  color: rgba(253, 251, 246, .82);
  text-shadow: 0 1px 3px rgba(37, 50, 31, .7), 0 1px 16px rgba(37, 50, 31, .5);
}
body:has(.main--flush) .site-header:not(.is-stuck) .nav .btn--outline {
  color: var(--cream);
  border-color: rgba(253, 251, 246, .55);
  background: transparent;
}
body:has(.main--flush) .site-header:not(.is-stuck) .nav .btn--outline:hover,
body:has(.main--flush) .site-header:not(.is-stuck) .nav .btn--outline:focus-visible {
  border-color: var(--cream);
  background: rgba(253, 251, 246, .12);
}
body:has(.main--flush) .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: var(--cream);
}
/* The underline the nav uses for the current page is drawn with a pseudo
   element, so it needs the cream treatment too. */
body:has(.main--flush) .site-header:not(.is-stuck) .nav__link::after {
  background: var(--cream);
}

/* ==========================================================================
   10b  INTRO — first block below the photograph
   ========================================================================== */
.intro { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.intro__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-l, 2rem);
  text-align: center;
}
.intro__tagline {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.4;
  color: var(--moss-dark);
  text-wrap: balance;
}

/* ==========================================================================
   11  VALUES STRIP
   ========================================================================== */
.values { padding-block: clamp(3rem, 6vw, 5rem); }
.values__inner {
  display: grid;
  gap: var(--sp-m);
  justify-items: center;
  text-align: center;
}
.values__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.75rem);
}
.values__item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.75rem);
}
.values__word {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem);
  line-height: 1.2;
  color: var(--moss);
}
.values__sprig {
  flex: 0 0 auto;
  width: 34px;
  height: 18px;
  color: var(--sage);
}
.values__item:last-child .values__sprig { display: none; }

/* ==========================================================================
   12  SERVICES
   ========================================================================== */
.services__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 760px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.service {
  display: grid;
  align-content: start;
  gap: var(--sp-s);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
}
.service:hover {
  transform: translateY(-4px);
  border-color: var(--sage);
  box-shadow: var(--shadow-lift);
}
.service__num { display: block; }
.service__name { font-size: var(--fs-h3); }
.service__blurb { color: var(--ink-soft); }
.service__price {
  margin-top: var(--sp-3xs);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay-dark);
}
.services__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-m);
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* ==========================================================================
   13  PULL-QUOTE BAND
   The signature move: full-bleed moss carrying a large italic serif quote.
   ========================================================================== */
.quote-band__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .quote-band__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}
.quote-band__figure {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}
.quote-band__figure .figure--mat {
  background-color: rgba(253, 251, 246, .1);
  border-color: var(--line-cream);
  box-shadow: none;
}
.quote-band__body {
  display: grid;
  gap: var(--sp-m);
  justify-items: start;
}
.quote-band__quote {
  font-size: var(--fs-quote);
  font-style: italic;
  line-height: var(--lh-quote);
  color: var(--cream);
  text-wrap: balance;
}
.quote-band__quote::before { content: "\201C"; margin-left: -.42em; }
.quote-band__quote::after  { content: "\201D"; }
.quote-band__cite {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-style: normal;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sage-soft);
}
.quote-band__cite::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background-color: var(--sage);
}

/* ==========================================================================
   14  ABOUT TEASER
   ========================================================================== */
.about-teaser { background-color: var(--cream); }
.about-teaser__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .about-teaser__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.about-teaser__figure {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
/* A hairline arch offset behind the portrait, like a pressed frame */
.about-teaser__figure::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(.75rem, 2vw, 1.25rem);
  left: clamp(.75rem, 2vw, 1.25rem);
  right: calc(-1 * clamp(.75rem, 2vw, 1.25rem));
  bottom: calc(-1 * clamp(.75rem, 2vw, 1.25rem));
  border: 1px solid var(--sage);
  border-radius: var(--radius-arch);
}
.about-teaser__body {
  display: grid;
  gap: var(--sp-m);
  justify-items: start;
}
.about-teaser__greeting { margin-bottom: -.35rem; }
.about-teaser__sub {
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--clay-dark);
}
.about-teaser__bio {
  max-width: 46ch;
  color: var(--ink-soft);
}
.about-teaser__sign {
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sage);
}

/* ==========================================================================
   15  FEATURED WORK
   A staggered portrait grid — an album spread, not a filing cabinet.
   ========================================================================== */
.featured__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (min-width: 560px) {
  .featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .featured__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: clamp(2rem, 4vw, 3.25rem);
  }
  .featured__item { margin-top: var(--drop, 0); }
  .featured__item:nth-child(2) { --drop: 3.25rem; }
  .featured__item:nth-child(3) { --drop: 1.25rem; }
  .featured__item:nth-child(5) { --drop: 3.25rem; }
  .featured__item:nth-child(6) { --drop: 1.25rem; }
}
.featured__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.featured__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

/* ==========================================================================
   16  PROCESS TEASER  (on a moss band)
   ========================================================================== */
.process__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .process__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
  .process__head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
.process__steps { display: grid; }
.process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line-cream);
}
.process__step:first-child { padding-top: 0; border-top: 0; }
.process__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
  color: var(--sage);
}
.process__name {
  margin-bottom: .4rem;
  font-size: var(--fs-h4);
}
.process__body { color: var(--cream-dim); }
.process__foot { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ==========================================================================
   17  TESTIMONIALS
   ========================================================================== */
/* Columns, not a grid. In a grid every card in a row stretches to the tallest
   one, so a short note sat in a mostly empty box and a fourth card was stranded
   on a row of its own. Columns let each card be exactly as tall as its words
   and pack the next one underneath. Two columns rather than three: these are
   long quotes, and three made the measure too narrow to read comfortably. */
.testimonials__grid {
  column-gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 780px) {
  .testimonials__grid { column-count: 2; }
}
.testimonial {
  display: grid;
  align-content: start;
  gap: var(--sp-m);
  break-inside: avoid;          /* never split a quote across a column */
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.testimonial__sprig {
  width: 38px;
  height: 20px;
  color: var(--sage);
}
.testimonial__quote {
  font-size: var(--fs-lede);
  font-style: italic;
  line-height: 1.5;
  color: var(--moss-dark);
}
.testimonial__cite {
  display: grid;
  gap: .15rem;
  padding-top: var(--sp-s);
  border-top: 1px solid var(--line);
  font-style: normal;
}
.testimonial__name {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay-dark);
}
.testimonial__meta {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-faint);
}

/* ==========================================================================
   18  CLOSING CTA
   ========================================================================== */
.cta__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .cta__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.cta__figure {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}
.cta__body {
  display: grid;
  gap: var(--sp-m);
  justify-items: start;
}
.cta__sub {
  max-width: 34ch;
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--ink-soft);
}
.cta__note {
  max-width: 42ch;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

/* ==========================================================================
   19  FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--moss-dark);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.5rem);
}
.site-footer__top { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}
.site-footer__wordmark {
  display: inline-block;
  margin-bottom: var(--sp-xs);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
}
.site-footer__tagline {
  max-width: 38ch;
  font-style: italic;
  color: var(--cream-dim);
}
.site-footer__heading {
  margin-bottom: var(--sp-s);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sage-soft);
}
.site-footer__nav { display: grid; gap: .55rem; }
.site-footer__nav a,
.site-footer__social a {
  justify-self: start;
  font-size: 1.0625rem;
  color: rgba(253, 251, 246, .88);
  text-decoration: none;
  transition: color var(--tr-fast);
}
.site-footer__nav a:hover,
.site-footer__social a:hover { color: var(--sage-soft); }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s) var(--sp-m);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line-cream);
}
.site-footer__copy,
.site-footer__place {
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(253, 251, 246, .6);
}

/* ==========================================================================
   20  MOTION: reveals, drift, load-in
   Slow soft fades only. Nothing sharp, nothing that slides far.
   The .js class is set by an inline script in <head>, so with JavaScript
   disabled every element below stays visible at full opacity.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--tr-slow), transform var(--tr-slow);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Hero load-in — the collage settles onto the page */
.js .hero__copy,
.js .hero__fig {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1100ms var(--ease-soft), transform 1100ms var(--ease-soft);
}
.js .hero__copy   { transition-delay:  60ms; }
.js .hero__fig--a { transition-delay: 120ms; }
.js .hero__fig--c { transition-delay: 220ms; }
.js .hero__fig--b { transition-delay: 320ms; }
.js.is-loaded .hero__copy,
.js.is-loaded .hero__fig {
  opacity: 1;
  transform: none;
}

/* The parallax drift rides on the independent `translate` property, which is
   deliberately left out of the transition above: the load-in still eases,
   while the scroll drift tracks the wheel with no lag. site.js writes
   --drift; with no JS, or on a browser without independent transforms, the
   figures simply sit where the grid put them. */
.js .hero__fig {
  translate: 0 var(--drift, 0px);
  will-change: transform, translate;
}

/* ==========================================================================
   21  REDUCED MOTION
   Everything in section 20 is decoration. Turn all of it off.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-reveal].is-visible,
  .js .hero__copy,
  .js .hero__fig,
  .js.is-loaded .hero__copy,
  .js.is-loaded .hero__fig {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }

  .figure--zoom img,
  a:hover .figure--zoom img,
  a:focus-visible .figure--zoom img,
  .service:hover,
  .mobile-menu__link:hover,
  .mobile-menu__link:focus-visible { transform: none !important; }
}

/* ==========================================================================
   22  INTERIOR PAGE HEADS + SHARED STAGE-2 UTILITIES
   Every page below the home page opens with the same quiet, centred head:
   eyebrow, title, one line of lede, a pressed-sprig rule.
   ========================================================================== */
[hidden] { display: none !important; }

.page-head {
  padding-top: clamp(2.25rem, 5.5vw, 4rem);
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.page-head__inner {
  display: grid;
  gap: var(--sp-m);
  justify-items: center;
  text-align: center;
}
.page-head__lede {
  max-width: 54ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}
.page-head .divider { margin-top: var(--sp-2xs); }

/* Generic prose column — About bio, reassurance copy */
.prose {
  max-width: 64ch;
  color: var(--ink-soft);
}
.prose--wide { max-width: 72ch; }

/* Generic photo + copy split, used on About and Investment */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--rev > :first-child { order: 2; }
}
.split__figure {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}
.split__body {
  display: grid;
  gap: var(--sp-m);
  justify-items: start;
}

/* A sign-off in her hand, reused from the home teaser */
.about-sign {
  font-family: var(--font-script);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--sage);
}

/* ==========================================================================
   23  PORTFOLIO: FILTERS, COLUMN GALLERY, LIGHTBOX
   The gallery is a CSS multi-column album, so frames of different heights sit
   side by side without any of them being cropped to a common box. Every item
   carries a ratio class (see 07), which reserves its height before the image
   arrives — that is what stops the columns re-flowing as the page loads, and
   it is why a landscape upload simply makes a shorter card instead of
   collapsing to nothing.
   ========================================================================== */
.gal__filters {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-bottom: var(--sp-m);
}
/* Only offered when the script that drives it is actually running. */
.js .gal__filters { display: flex; }

.filter-btn {
  padding: .85em 1.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color var(--tr-base), border-color var(--tr-base),
              color var(--tr-base);
}
.filter-btn:hover {
  background-color: var(--cream);
  border-color: var(--sage);
  color: var(--moss);
}
.filter-btn[aria-pressed="true"] {
  background-color: var(--moss);
  border-color: var(--moss);
  color: var(--cream);
}

.gal__count {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
}

.gal__grid { column-gap: clamp(1rem, 2.4vw, 1.75rem); }
@media (min-width: 560px)  { .gal__grid { column-count: 2; } }
@media (min-width: 1000px) { .gal__grid { column-count: 3; } }

.gal__item {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2.4vw, 1.75rem);
}
.gal__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gal__link .figure { background-color: var(--oat-deep); }
/* A soft moss veil rises from the bottom edge on hover — nothing sharp. */
.gal__link .figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(37, 50, 31, .55), rgba(37, 50, 31, 0) 48%);
  opacity: 0;
  transition: opacity var(--tr-base);
  pointer-events: none;
}
.gal__link:hover .figure::after,
.gal__link:focus-visible .figure::after { opacity: 1; }
.gal__view {
  position: absolute;
  z-index: 1;
  left: clamp(.9rem, 2vw, 1.25rem);
  bottom: clamp(.85rem, 2vw, 1.15rem);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transform: translateY(.45rem);
  transition: opacity var(--tr-base), transform var(--tr-base);
  pointer-events: none;
}
.gal__link:hover .gal__view,
.gal__link:focus-visible .gal__view {
  opacity: 1;
  transform: none;
}

.gal__empty {
  padding-block: var(--sp-2xl);
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}

/* --- Lightbox ---------------------------------------------------------- */
.lightbox {
  --lb-chrome: 11.5rem;
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
  padding: clamp(.75rem, 2.4vw, 1.6rem);
  background-color: rgba(37, 50, 31, .95);
  color: var(--cream);
  opacity: 0;
  transition: opacity var(--tr-base);
}
.lightbox[hidden] { display: none !important; }
.lightbox.is-open { opacity: 1; }
@supports (backdrop-filter: blur(6px)) {
  .lightbox {
    background-color: rgba(37, 50, 31, .88);
    backdrop-filter: blur(8px) saturate(1.05);
  }
}

.lightbox__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
}
.lightbox__counter {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sage-soft);
}
.lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .35rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream);
  transition: color var(--tr-fast);
}
.lightbox__close:hover { color: var(--sage-soft); }
.lightbox__close svg { width: 14px; height: 14px; }

.lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.lightbox__frame {
  display: flex;
  /* Without both of these the portrait's intrinsic width becomes the flex
     item's automatic minimum and the mat pushes past the viewport edge. */
  min-width: 0;
  max-width: 100%;
  padding: clamp(.35rem, .9vw, .7rem);
  background-color: var(--cream);
  border: 1px solid var(--line-cream);
  box-shadow: var(--shadow-lift);
  transition: opacity var(--tr-base);
}
.lightbox.is-swapping .lightbox__frame { opacity: 0; }
/* The cloned <picture> is a flex item, so it keeps min-width:auto — its
   intrinsic 1200px would refuse to shrink and shove the mat, the caption and
   the close button off the side of a phone. */
.lightbox__frame > * {
  min-width: 0;
  max-width: 100%;
}
.lightbox__frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--lb-chrome));
}
@supports (height: 100dvh) {
  .lightbox__frame img { max-height: calc(100dvh - var(--lb-chrome)); }
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  translate: 0 -50%;
  border: 1px solid var(--line-cream);
  border-radius: 50%;
  background-color: rgba(37, 50, 31, .55);
  color: var(--cream);
  transition: background-color var(--tr-base), color var(--tr-base),
              border-color var(--tr-base);
}
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }
.lightbox__nav:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--moss-dark);
}
.lightbox__nav svg { width: 16px; height: 16px; }

.lightbox__foot {
  flex: 0 0 auto;
  text-align: center;
}
.lightbox__caption {
  max-width: 58ch;
  margin-inline: auto;
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.5;
  color: var(--cream-dim);
}

@media (min-width: 760px) {
  .lightbox__frame { max-width: calc(100% - 8rem); }
}
@media (max-width: 759px) {
  .lightbox {
    --lb-chrome: 10.5rem;
    gap: var(--sp-2xs);
  }
  .lightbox__nav {
    top: auto;
    bottom: .6rem;
    width: 2.5rem;
    height: 2.5rem;
    translate: none;
  }
  .lightbox__nav--prev { left: .6rem; }
  .lightbox__nav--next { right: .6rem; }
}

/* ==========================================================================
   24  ABOUT: intro, approach, a day with her, FAQ accordion
   ========================================================================== */
.about-intro__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .about-intro__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.about-intro__figure {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
/* The same offset hairline arch used behind the home portrait */
.about-intro__figure::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(.75rem, 2vw, 1.25rem);
  left: clamp(.75rem, 2vw, 1.25rem);
  right: calc(-1 * clamp(.75rem, 2vw, 1.25rem));
  bottom: calc(-1 * clamp(.75rem, 2vw, 1.25rem));
  border: 1px solid var(--sage);
  border-radius: var(--radius-arch);
}
.about-intro__body {
  display: grid;
  gap: var(--sp-m);
  justify-items: start;
}
.about-intro__greeting { margin-bottom: -.45rem; }
.about-intro__sub {
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--clay-dark);
}

.approach__grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 820px) {
  .approach__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.approach {
  display: grid;
  align-content: start;
  gap: var(--sp-s);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line-strong);
}
.approach__sprig {
  width: 38px;
  height: 20px;
  color: var(--sage);
}
.approach__name { font-size: var(--fs-h4); }
.approach p { color: var(--ink-soft); }

.day__grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: start;
}
@media (min-width: 760px) {
  .day__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day__item:nth-child(2) { margin-top: clamp(1.5rem, 3.5vw, 3rem); }
  .day__item:nth-child(3) { margin-top: clamp(.5rem, 1.5vw, 1.25rem); }
}
.day__label {
  display: block;
  margin-top: var(--sp-s);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay);
}
.day__note {
  margin-top: .4rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

.faq {
  display: grid;
  gap: .7rem;
  max-width: 56rem;
  margin-inline: auto;
}
.faq__item {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--tr-base), box-shadow var(--tr-base);
}
.faq__item[open] {
  border-color: var(--sage);
  box-shadow: var(--shadow-soft);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-s);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.6rem);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--moss-dark);
  cursor: pointer;
  list-style: none;
  transition: color var(--tr-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--moss-mid); }
.faq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: .45em;
  color: var(--clay);
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--tr-base), opacity var(--tr-base);
}
.faq__mark::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
.faq__mark::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}
.faq__item[open] .faq__mark::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}
.faq__a {
  max-width: 68ch;
  padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--ink-soft);
}
.faq__foot {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: center;
}

/* ==========================================================================
   25  INVESTMENT: includes strip, collection cards, comparison table,
       price cards, add-ons
   ========================================================================== */
.includes__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 620px) { .includes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .includes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.includes__item {
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
}
.includes__sprig {
  width: 34px;
  height: 18px;
  color: var(--sage);
}
.includes__name {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--moss-dark);
}
.includes__note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The average-investment line inside a section head */
.section-head .tier-avg {
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--clay);
}
.band--moss .section-head .tier-avg { color: var(--sage-soft); }

/* Stacked cream collection cards, sitting on the moss band */
.collections { display: grid; gap: clamp(1.25rem, 2.6vw, 1.85rem); }
.collection {
  display: grid;
  gap: var(--sp-m);
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  background-color: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 820px) {
  .collection {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
  }
}
.collection__head {
  display: grid;
  align-content: start;
  gap: .45rem;
}
.collection__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: .05em;
  color: var(--clay);
}
.collection__name { font-size: var(--fs-h3); }
.collection__lead {
  font-style: italic;
  line-height: 1.5;
}
.collection__items { display: grid; gap: .55rem; }
/* Only the wide wedding cards split the inclusions into two columns, and they
   use CSS columns so the list still reads top to bottom, not left to right.
   The narrower price cards keep a single column. */
@media (min-width: 560px) {
  .collection .collection__items {
    display: block;
    columns: 2;
    column-gap: var(--sp-l);
  }
  .collection .collection__item {
    break-inside: avoid;
    margin-bottom: .55rem;
  }
}
.collection__item {
  position: relative;
  padding-left: 1.35rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.collection__item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .6em;
  width: 6px;
  height: 6px;
  background-color: var(--sage);
  transform: rotate(45deg);
}
/* Cream cards on a moss band keep dark ink, not the band colour */
.band--moss .collection h3,
.band--moss .collection .collection__name { color: var(--moss-dark); }
.band--moss .collection p,
.band--moss .collection li { color: var(--ink-soft); }
.band--moss .collection .collection__num { color: var(--clay); }
.collections__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-m);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* At-a-glance comparison */
.compare-wrap {
  overflow-x: auto;
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.compare {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}
.compare th,
.compare td {
  padding: .85rem 1.05rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.compare thead th {
  background-color: var(--sage-pale);
  border-bottom-color: var(--sage);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--moss-dark);
  text-align: center;
}
.compare thead th:first-child { text-align: left; }
.compare tbody th {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.compare tbody td {
  text-align: center;
  color: var(--ink);
}
.compare tbody tr:nth-child(even) { background-color: rgba(147, 166, 141, .09); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare__no { color: var(--ink-faint); }
.compare-note {
  margin-top: var(--sp-s);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-faint);
}

/* Couples packages — two cream cards with a real price */
.price-cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 760px) { .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-card {
  display: grid;
  align-content: start;
  gap: var(--sp-s);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.price-card__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.1;
  color: var(--clay);
}
.price-card .collection__items { margin-top: var(--sp-2xs); }

.addons__list { display: grid; }
@media (min-width: 640px) {
  .addons__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-xl);
  }
}
.addons__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.addons__sprig {
  flex: 0 0 auto;
  width: 26px;
  height: 14px;
  color: var(--sage);
}

/* ==========================================================================
   26  INQUIRE: form layout, aside, success state
   ========================================================================== */
.inquire__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.75rem);
  align-items: start;
}
@media (min-width: 980px) {
  .inquire__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.inquire__panel {
  padding: clamp(1.4rem, 3.2vw, 2.75rem);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.form-grid { display: grid; gap: var(--sp-m); }
@media (min-width: 620px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form-foot {
  display: grid;
  gap: var(--sp-s);
  justify-items: start;
  margin-top: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--line);
}
.form-legal {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}
.btn[aria-busy="true"] { opacity: .62; pointer-events: none; }

.success {
  display: grid;
  gap: var(--sp-m);
  justify-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background-color: var(--sage-pale);
  border: 1px solid var(--sage);
  border-radius: var(--radius);
}
.success__sprig {
  width: 46px;
  height: 24px;
  color: var(--moss-mid);
}
.success__title { font-size: var(--fs-h3); }
.success p { color: var(--ink-soft); }

.inquire__aside { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.inquire__figure {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}
.next-list { display: grid; gap: var(--sp-m); }
.next-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-s) var(--sp-m);
  align-items: start;
}
.next-item__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--clay);
}
.next-item__name {
  margin-bottom: .25rem;
  font-size: var(--fs-h4);
}
.next-item p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ==========================================================================
   27  REDUCED MOTION — stage-2 additions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox.is-open { opacity: 1; }
  .lightbox.is-swapping .lightbox__frame { opacity: 1; }
  .gal__view { transform: none !important; }
}

/* ==========================================================================
   28  SMALL SHARED PIECES ADDED WITH THE STAGE-2 PAGES
   ========================================================================== */
/* Average-investment line, wherever it sits */
.tier-avg {
  font-size: var(--fs-lede);
  font-style: italic;
  color: var(--clay);
}

/* Cards that follow an intro block inside the same section */
.stack-top { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* Centred closing statement on a moss band (portfolio) */
.closing__inner {
  display: grid;
  gap: var(--sp-m);
  justify-items: center;
  text-align: center;
}
.closing__inner .quote-band__quote {
  max-width: 26ch;
  color: var(--cream);
}
.closing__inner .btn-row { margin-top: var(--sp-2xs); }

/* Aside heading on the inquiry page — an h2 that must not shout */
.next-heading {
  margin-top: var(--sp-2xs);
  margin-bottom: var(--sp-s);
  font-size: var(--fs-h3);
}

/* --------------------------------------------------------------------------
   Notice panel
   A centred cream card used wherever a page has to say "there is nothing here
   yet" or "this could not be loaded" — the portfolio when the gallery cannot
   be read, the travel page when the calendar is empty. The trouble variant is
   clay, like every other warning on this site. There is no red.
   -------------------------------------------------------------------------- */
.note-panel {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 3.8vw, 3rem);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.note-panel__sprig {
  width: 46px;
  height: 24px;
  margin-inline: auto;
  margin-bottom: var(--sp-s);
  color: var(--sage);
}
.note-panel__title {
  margin-bottom: var(--sp-2xs);
  font-size: var(--fs-h3);
}
.note-panel p {
  margin-inline: auto;
  max-width: 52ch;
  color: var(--ink-soft);
}
.note-panel .btn-row { margin-top: var(--sp-m); }

.note-panel--warn {
  background-color: var(--clay-pale);
  border-color: var(--clay);
}
.note-panel--warn .note-panel__sprig { color: var(--clay); }
.note-panel--warn .note-panel__title { color: var(--clay-dark); }
.note-panel--warn p { color: var(--clay-dark); }

/* On a moss band the card keeps its cream ground and dark ink */
.band--moss .note-panel h3,
.band--moss .note-panel__title { color: var(--moss-dark); }
.band--moss .note-panel p { color: var(--ink-soft); }

/* ==========================================================================
   29  TRAVEL: the schedule
   A dated list, grouped by year, with a status chip on every entry.
   Colour, stated once so it cannot drift: available is sage, limited is clay,
   fully booked is a muted moss. Nothing here is ever red — a booked date is
   good news, not an error.
   ========================================================================== */
/* The intro is the shared .split component on a sage band, exactly as the
   investment page uses it, so it needs no rules of its own.

   --- Year groups ------------------------------------------------------- */
.travel-years { display: grid; gap: clamp(2.5rem, 5.5vw, 4rem); }

.travel-year__label {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.25rem, 2.6vw, 1.75rem);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1;
  color: var(--clay);
}
.travel-year__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--line-strong), transparent);
}

/* --- One trip ---------------------------------------------------------- */
.trip-list { display: grid; }

.trip {
  display: grid;
  gap: var(--sp-xs) clamp(1.5rem, 3.2vw, 2.75rem);
  padding-block: clamp(1.5rem, 3.2vw, 2.25rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.trip:first-child {
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 820px) {
  /* Date | where | status + ask. Both outer tracks have a 0 minimum so a long
     range or the widest chip ("Dates available") sizes inside its track
     instead of stretching it and squeezing the middle column. 15rem is set
     from that chip's real width plus room for the ask link, which is allowed
     to wrap onto a second line if it needs to. */
  .trip {
    grid-template-columns: minmax(8.5rem, 13rem) minmax(0, 1fr) minmax(0, 15rem);
  }
}

.trip__when {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--moss-dark);
}
.trip__where {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.trip__region {
  margin-top: .1rem;
  font-style: italic;
  color: var(--clay);
}
.trip__note {
  margin-top: var(--sp-2xs);
  max-width: 56ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.trip__side {
  display: grid;
  justify-items: start;
  gap: var(--sp-s);
}
@media (min-width: 820px) {
  /* text-align so a wrapped "Ask about another date" stays flush with the
     chip above it rather than going ragged against the right edge. */
  .trip__side {
    justify-items: end;
    text-align: right;
  }
}

/* The status chip. Same squared shape as the gallery filter buttons, so the
   two read as one family. */
.trip__pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7em 1.15em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.trip__pill::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  transform: rotate(45deg);
}
/* Dates available — sage */
.trip__pill.is-open {
  background-color: var(--sage-pale);
  border-color: var(--sage);
  color: var(--moss-dark);
}
/* Limited dates — clay */
.trip__pill.is-few {
  background-color: var(--clay-pale);
  border-color: var(--clay);
  color: var(--clay-dark);
}
/* Fully booked — muted moss. Quiet, not alarming, and never red. */
.trip__pill.is-full {
  background-color: rgba(51, 69, 47, .07);
  border-color: rgba(51, 69, 47, .22);
  color: var(--moss-mid);
}

.travel-foot {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.travel-foot p {
  margin-inline: auto;
  max-width: 56ch;
  font-style: italic;
  color: var(--ink-soft);
}
.travel-foot .btn-row { margin-top: var(--sp-m); }

/* ==========================================================================
   Browser-default invalid styling — neutralised
   Firefox paints box-shadow: 0 0 1.5px 1px red on :user-invalid controls, and
   novalidate does not stop that pseudo-class matching. With JS off the
   .is-invalid class never lands either. Kill the UA shadow, restate in clay.
   :user-invalid (not :invalid) so empty required fields are not flagged on
   first paint.
   ========================================================================== */
.input:invalid,
.select:invalid,
.textarea:invalid,
.input:-moz-ui-invalid,
.select:-moz-ui-invalid,
.textarea:-moz-ui-invalid,
.input:user-invalid,
.select:user-invalid,
.textarea:user-invalid {
  box-shadow: none;
}
.input:-moz-ui-invalid,
.select:-moz-ui-invalid,
.textarea:-moz-ui-invalid,
.input:user-invalid,
.select:user-invalid,
.textarea:user-invalid {
  border-color: var(--clay);
  background-color: var(--clay-pale);
}

/* ==========================================================================
   TRAVEL STRIP — home page
   Reads from the same table the portal writes to, so it cannot drift out of
   step with the full schedule page.
   ========================================================================== */
.travel-strip__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .travel-strip__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.travel-strip__figure {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.travel-strip__body { display: grid; gap: var(--sp-m); justify-items: start; }

.travel-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
}
.travel-strip__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem clamp(.75rem, 2vw, 1.5rem);
  padding-block: clamp(.7rem, 1.6vw, 1rem);
  border-bottom: 1px solid var(--line);
}
.travel-strip__item:first-child { border-top: 1px solid var(--line); }

.travel-strip__dates {
  flex: 0 0 auto;
  min-width: 11.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay);
}
.travel-strip__place {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem);
  color: var(--moss-dark);
}

/* ==========================================================================
   COMPARISON TABLE — hidden on small screens
   Five columns need 736px, so it cannot be read side by side on a phone.
   Kenady would rather it step aside there than be restacked. Nothing is lost:
   the collection cards directly above carry the identical information, which
   the section's own intro says. It returns in full from 761px up.
   The cells keep their data-col labels so this is one CSS block to reverse.
   ========================================================================== */
@media (max-width: 760px) {
  #compare { display: none; }
}