/* ============================================================
   THE ROSE BARN
   Design system and shared styles

   Warm ivory ground, espresso ink, muted olive accent.
   Cormorant Garamond carries headings, reading text and interface;
   Jimmy Script the accents.
   Every brand decision is a token in :root.
   ============================================================ */

/* Self hosted brand fonts (supplied by the client) */
@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight:300 700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Jimmy Script"; src:url("../fonts/jimmy-script.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root{

  /* ---------- colour ---------------------------------------
     Warm neutrals only. Olive is the single accent and is used
     sparingly. Black appears as espresso, never pure #000.     */

  --ivory:        #F8F5EF;   /* primary page ground              */
  --linen:        #EFE9DD;   /* alternating section ground       */
  --oat:          #E4DCCC;   /* image placeholder, soft fill     */
  --stone:        #D2C7B5;   /* rules, borders                   */
  --stone-soft:   #E7E0D3;   /* hairlines on ivory               */

  --espresso:     #241C16;   /* primary ink, dark sections       */
  --espresso-2:   #332A22;   /* raised surface on dark           */
  --bark:         #4B3F34;   /* headings on light                */
  --umber:        #7B6C5D;   /* secondary text                   */
  --umber-light:  #9C8E7F;   /* tertiary text, captions          */

  /* The accent is deliberately neutral for now. Dropping a brand
     colour back in is these three values and nothing else.       */
  --olive:        #7A6B5C;   /* accent on light grounds          */
  --olive-deep:   #4B3F34;   /* accent hover                     */
  --olive-pale:   #B7AC9C;   /* accent on dark grounds           */

  --on-dark:      #F2ECE1;   /* text on espresso                 */
  --on-dark-soft: #BCB0A0;   /* secondary text on espresso       */

  --whatsapp:     #25D366;   /* the real WhatsApp green, hover only */

  --ink:          #12100E;   /* near black, for the impact bands */

  /* ---------- type ----------------------------------------- */

  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --body:    "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --ui:      "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --script:  "Jimmy Script", "Snell Roundhand", "Apple Chancery", cursive;

  --fs-hero:   clamp(2.6rem, 7vw, 6.4rem);
  --fs-d1:     clamp(2.1rem, 5.2vw, 4.2rem);
  --fs-d2:     clamp(1.7rem, 3.6vw, 2.9rem);
  --fs-d3:     clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-lead:   clamp(1.02rem, 1.5vw, 1.22rem);
  --fs-body:   1rem;
  --fs-small:  0.86rem;
  --fs-label:  0.72rem;

  --ls-label: 0.22em;
  --ls-nav:   0.16em;

  /* ---------- rhythm --------------------------------------- */

  --gutter:  clamp(1.35rem, 5vw, 5.5rem);
  --section: clamp(4.5rem, 11vh, 9rem);
  --measure: 62ch;

  --rule: 1px solid var(--stone);

  /* ---------- motion --------------------------------------- */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 1.1s;
}

/* ---------- reset ------------------------------------------ */

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--ivory);
  color: var(--bark);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a{ color: inherit; }

button{ font: inherit; color: inherit; }

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

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip{
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--espresso);
  color: var(--on-dark);
  padding: 0.8rem 1.4rem;
  text-decoration: none;
  font-size: var(--fs-small);
}

.skip:focus{ top: 1rem; }

/* ---------- typography ------------------------------------- */

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.display-1{ font-size: var(--fs-d1); }
.display-2{ font-size: var(--fs-d2); }
.display-3{ font-size: var(--fs-d3); line-height: 1.2; }

.italic{ font-style: italic; }

p{ margin: 0 0 1.15rem; }
p:last-child{ margin-bottom: 0; }

.lead{
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--umber);
  max-width: var(--measure);
}

.body-copy{ max-width: var(--measure); color: var(--umber); }

.label{
  font-family: var(--ui);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1.5rem;
  display: block;
}

.label-dark{ color: var(--olive-pale); }

.caption{
  font-size: var(--fs-small);
  color: var(--umber-light);
  letter-spacing: 0.04em;
}

.rule-short{
  width: 54px;
  height: 1px;
  background: var(--olive);
  border: 0;
  margin: 2rem 0;
}

.centered .rule-short{ margin-left: auto; margin-right: auto; }

/* ---------- layout ----------------------------------------- */

.wrap{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap-narrow{
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section{ padding-block: var(--section); }
.section-tight{ padding-block: calc(var(--section) * 0.62); }

.bg-linen{ background: var(--linen); }
.bg-dark{ background: var(--espresso); color: var(--on-dark); }
.bg-dark .lead,
.bg-dark .body-copy{ color: var(--on-dark-soft); }
.bg-dark h1, .bg-dark h2, .bg-dark h3{ color: var(--on-dark); }

.centered{ text-align: center; }
.centered .lead,
.centered .body-copy{ margin-inline: auto; }

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

/* ---------- buttons ---------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.3rem;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color 0.45s var(--ease),
              color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}

.btn-primary{
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--on-dark);
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}

.btn-outline{
  border-color: var(--bark);
  color: var(--bark);
}

.btn-outline:hover,
.btn-outline:focus-visible{
  background: var(--bark);
  color: var(--ivory);
}

.btn-light{
  border-color: rgba(242, 236, 225, 0.55);
  color: var(--on-dark);
}

.btn-light:hover,
.btn-light:focus-visible{
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--espresso);
}

.btn-solid-light{
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--espresso);
}

.btn-solid-light:hover,
.btn-solid-light:focus-visible{
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.centered .btn-row{ justify-content: center; }

/* text link with a rule that draws in */
.link-under{
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bark);
  padding-bottom: 0.45rem;
  position: relative;
}

.link-under::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--stone);
}

.link-under::before{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width 0.55s var(--ease);
  z-index: 1;
}

.link-under:hover::before,
.link-under:focus-visible::before{ width: 100%; }

.bg-dark .link-under{ color: var(--on-dark); }
.bg-dark .link-under::after{ background: rgba(242,236,225,0.3); }
.bg-dark .link-under::before{ background: var(--olive-pale); }

/* ---------- header ----------------------------------------- */

.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.6rem;
  transition: padding 0.5s var(--ease), background-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}

.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1600px;
}

.site-header.is-solid,
body.no-hero .site-header{
  background: rgba(248, 245, 239, 0.94);
  padding-block: 0.85rem;
  box-shadow: 0 1px 0 var(--stone-soft);
}

/* backdrop-filter creates a containing block for fixed children, which
   would trap the full screen mobile nav inside the header. Only blur
   the bar while the menu is closed. */
body:not(.nav-open) .site-header.is-solid,
body.no-hero:not(.nav-open) .site-header{
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.brand{
  display: block;
  line-height: 0;
  flex-shrink: 0;
}

.brand img{
  width: 78px;
  height: auto;
  transition: width 0.5s var(--ease), filter 0.5s var(--ease);
}

.site-header.is-solid .brand img,
body.no-hero .site-header .brand img{ width: 58px; }

/* logo is white artwork: invert it to espresso once the bar is solid */
.brand .logo-dark{ display: none; }
.site-header.is-solid .brand .logo-light,
body.no-hero .site-header .brand .logo-light{ display: none; }
.site-header.is-solid .brand .logo-dark,
body.no-hero .site-header .brand .logo-dark{ display: block; }

.nav{
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}

.nav a{
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-dark);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}

.nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.5s var(--ease);
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after{ width: 100%; }

.site-header.is-solid .nav a,
body.no-hero .site-header .nav a{ color: var(--bark); }

.header-cta{
  padding: 0.85rem 1.6rem;
  font-size: 0.68rem;
}

.nav-toggle{
  display: none;
  position: relative;
  z-index: 3;
  width: 46px; height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.nav-toggle span{
  display: block;
  width: 26px; height: 1px;
  background: var(--on-dark);
  position: relative;
  transition: background-color 0.3s var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after{
  content: "";
  position: absolute;
  left: 0;
  width: 26px; height: 1px;
  background: inherit;
  transition: transform 0.45s var(--ease);
}

.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }

.site-header.is-solid .nav-toggle span,
body.no-hero .site-header .nav-toggle span{ background: var(--bark); }

body.nav-open .nav-toggle span{ background: transparent; }
body.nav-open .nav-toggle span::before{ transform: translateY(8px) rotate(45deg); background: var(--on-dark); }
body.nav-open .nav-toggle span::after{ transform: translateY(-8px) rotate(-45deg); background: var(--on-dark); }

@media (max-width: 1000px){
  .nav-toggle{ display: flex; }

  .nav{
    position: fixed;
    inset: 0;
    background: var(--espresso);
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    transform: translateY(-100%);
    transition: transform 0.7s var(--ease);
    /* sits above the page but below the toggle, which stays tappable */
    z-index: 1;
    padding: 6.5rem var(--gutter) 3rem;
    overflow-y: auto;
  }

  body.nav-open .nav{ transform: none; }

  .nav a{
    color: var(--on-dark) !important;
    font-family: var(--display);
    font-size: 1.7rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .nav .header-cta{
    font-family: var(--ui);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    border: 1px solid rgba(242,236,225,0.5);
    padding: 1rem 2.2rem;
    margin-top: 1rem;
  }
}

/* ---------- hero ------------------------------------------- */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero-media{
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.06);
  animation: heroSettle 2.6s var(--ease) forwards;
}

@keyframes heroSettle{ to{ transform: scale(1); } }

.hero-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 60% at 50% 48%, rgba(20,15,11,0.30) 0%, rgba(20,15,11,0.52) 100%),
    linear-gradient(180deg, rgba(20,15,11,0.55) 0%, rgba(20,15,11,0.18) 34%,
                    rgba(20,15,11,0.30) 66%, rgba(20,15,11,0.70) 100%);
}

.hero-inner{
  padding: 9rem var(--gutter) 7rem;
  max-width: 1000px;
}

.hero h1{
  font-size: var(--fs-hero);
  line-height: 1.02;
  margin-bottom: 1.6rem;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}

.hero .lead{
  color: rgba(242, 236, 225, 0.92);
  margin-inline: auto;
  max-width: 46ch;
  margin-bottom: 2.8rem;
  text-shadow: 0 1px 24px rgba(0,0,0,0.5);
}

.hero .label{ color: var(--olive-pale); }

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242,236,225,0.72);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.scroll-cue::after{
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(242,236,225,0.7), rgba(242,236,225,0));
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue{
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* page hero, shorter than the homepage */
.page-hero{
  min-height: 66svh;
  text-align: center;
}

.page-hero .hero-inner{ padding-block: 11rem 5rem; }
.page-hero h1{ font-size: var(--fs-d1); }

/* ---------- editorial split -------------------------------- */

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

.split-text{ max-width: 34rem; }

.split.reverse .split-media{ order: 2; }

@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
  .split.reverse .split-media{ order: 0; }
}

.figure{
  position: relative;
  overflow: hidden;
  background: var(--oat);
}

.figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.figure-tall{ aspect-ratio: 4 / 5; }
.figure-wide{ aspect-ratio: 3 / 2; }
.figure-square{ aspect-ratio: 1 / 1; }

.figure-caption{
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--umber-light);
  letter-spacing: 0.05em;
}

/* ---------- story gallery, the venue page -----------------
   Six frames rather than two. The column of text sits still
   while the pictures move past it, which is why the text is
   sticky and the split is aligned to the top.
   ---------------------------------------------------------- */

.split.is-gallery{
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
}

.split.is-gallery .split-text{
  position: sticky;
  top: 7.5rem;
}

.story-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
}

.story-tile .figure{ aspect-ratio: 4 / 5; }

.story-tile.is-wide{ grid-column: 1 / -1; }
.story-tile.is-wide .figure{ aspect-ratio: 3 / 2; }

.story-tile img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}

.story-tile:hover img{ transform: scale(1.04); }

@media (max-width: 860px){
  .split.is-gallery{ grid-template-columns: 1fr; }
  .split.is-gallery .split-text{ position: static; }
}

/* three panels butted edge to edge, the same device as the
   closing band on the home page, used beside a column of copy */
.figure-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: var(--oat);
}

.figure-trio img{
  width: 100%;
  aspect-ratio: 2 / 3;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the bleeding variant: the copy is held to a tight measure and the
   band runs off the right edge of the screen, so the page feels
   wider than the grid it sits in */
.section.has-bleed{ overflow-x: clip; }

.split.is-trio-bleed{
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 860px){
  .split.is-trio-bleed{ grid-template-columns: 1fr; }
}

/* offset pair used on the venue page */
.figure-pair{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2rem;
}

.figure-pair .a{ grid-column: 1 / 9; }
.figure-pair .b{ grid-column: 9 / 13; align-self: end; }

/* ---------- full bleed statement --------------------------- */

.statement{
  position: relative;
  min-height: 78svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  padding: var(--section) var(--gutter);
}

.statement-media{
  position: absolute;
  inset: 0;
  z-index: -2;
}

.statement-media img{
  width: 100%; height: 100%;
  object-fit: cover;
}

/* the closing panel carries three photographs rather than one,
   butted edge to edge so they read as a single band */
.statement-media.is-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.statement-media.is-trio img{ height: 100%; }

/* three bright photographs need a little more help than one */
.statement-media.is-trio::after{
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%,
                    rgba(20,15,11,0.6) 0%, rgba(20,15,11,0.34) 60%,
                    rgba(20,15,11,0.14) 100%),
    linear-gradient(180deg, rgba(20,15,11,0.5), rgba(20,15,11,0.6));
}

@media (max-width: 640px){
  .statement-media.is-trio{ grid-template-columns: 1fr; }
  .statement-media.is-trio img:first-child,
  .statement-media.is-trio img:last-child{ display: none; }
}

.statement-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,11,0.58), rgba(20,15,11,0.7));
}

.statement-inner{ max-width: 44rem; }

.statement h2{ margin-bottom: 1.4rem; }

/* the full bleed statement is the emotional punctuation of each page,
   so it carries the script the hero introduces */
.statement-inner h2{
  font-family: var(--script); font-size-adjust: var(--script-adjust);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.18;
  letter-spacing: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}

/* available anywhere a short romantic line earns it */
.script-accent{
  font-family: var(--script); font-size-adjust: var(--script-adjust);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.statement .lead{ color: rgba(242,236,225,0.9); margin-inline: auto; }

/* ---------- experience grid -------------------------------- */

.exp-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

/* six tiles read best as two rows of three */
@media (min-width: 940px){
  .exp-grid{ grid-template-columns: repeat(3, 1fr); }
}

.exp{
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  color: var(--on-dark);
  text-decoration: none;
  background: var(--oat);
}

.exp img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
  z-index: -2;
}

.exp::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,15,11,0.05) 18%, rgba(20,15,11,0.42) 58%, rgba(20,15,11,0.86) 100%);
  transition: background 0.7s var(--ease);
}

.exp:hover img,
.exp:focus-visible img{ transform: scale(1.06); }

.exp-body{ padding: clamp(1.4rem, 2.4vw, 2.1rem); }

.exp h3{
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  margin-bottom: 0.4rem;
}

.exp p{
  font-size: var(--fs-small);
  color: rgba(242,236,225,0.82);
  margin: 0;
  max-width: 26ch;
}

/* ---------- wedding cards ---------------------------------- */

.wed-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 2.6vw, 2.4rem);
}

.wed-card{
  text-decoration: none;
  color: inherit;
  display: block;
}

.wed-card .figure{ aspect-ratio: 4 / 5; margin-bottom: 1.3rem; }

.wed-card:hover .figure img,
.wed-card:focus-visible .figure img{ transform: scale(1.05); }

.wed-card h3{
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  margin-bottom: 0.35rem;
}

.wed-card .meta{
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber-light);
  margin-bottom: 0.9rem;
}

.wed-card .view{
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive);
}

/* horizontal rail on the homepage */
.rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 30vw);
  gap: clamp(1.2rem, 2.2vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
}

.rail > *{ scroll-snap-align: start; }

.rail::-webkit-scrollbar{ height: 3px; }
.rail::-webkit-scrollbar-track{ background: var(--stone-soft); }
.rail::-webkit-scrollbar-thumb{ background: var(--stone); }

@media (max-width: 620px){
  .rail{ grid-auto-columns: 78vw; }
}

/* ---------- editorial gallery (wedding feature) ------------ */

.gal{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.9rem, 2vw, 1.8rem);
}

.gal .g-full{ grid-column: 1 / -1; }
.gal .g-half{ grid-column: span 6; }
.gal .g-third{ grid-column: span 4; }
.gal .g-two-third{ grid-column: span 8; }
.gal .g-offset{ grid-column: 3 / 11; }

@media (max-width: 760px){
  .gal .g-half,
  .gal .g-third,
  .gal .g-two-third,
  .gal .g-offset{ grid-column: 1 / -1; }
}

.gal .figure{ cursor: zoom-in; }

/* ---------- lightbox --------------------------------------- */

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(18, 14, 10, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.lightbox[open]{ display: flex; }

.lightbox img{
  max-width: 100%;
  max-height: 86svh;
  object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position: absolute;
  background: transparent;
  border: 1px solid rgba(242,236,225,0.35);
  color: var(--on-dark);
  width: 46px; height: 46px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.35s var(--ease);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background: rgba(242,236,225,0.14); }

.lightbox-close{ top: 1.4rem; right: 1.4rem; }
.lightbox-prev{ left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 1.4rem; top: 50%; transform: translateY(-50%); }

.lightbox-count{
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  color: var(--on-dark-soft);
}

/* ---------- rooms ------------------------------------------ */

.room{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: var(--rule);
}

.room:first-of-type{ border-top: 0; }

.room.reverse .room-media{ order: 2; }

@media (max-width: 900px){
  .room{ grid-template-columns: 1fr; }
  .room.reverse .room-media{ order: 0; }
}

.room-media{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.9rem;
}

.room-media{ align-items: stretch; }
.room-media .figure:first-child{ aspect-ratio: 4/5; }
/* the narrower frame fills the row rather than sitting short */
.room-media .figure:last-child{ height: 100%; }

.room h3{ font-size: var(--fs-d3); margin-bottom: 0.5rem; }

.spec{
  list-style: none;
  margin: 1.8rem 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  border-top: var(--rule);
  padding-top: 1.4rem;
}

.spec li{
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  font-size: var(--fs-small);
}

.spec dt, .spec .k{
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber-light);
}

.amenities{
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.amenities li{
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber);
  border: 1px solid var(--stone);
  padding: 0.42rem 0.85rem;
}

/* ---------- packages --------------------------------------- */

.pkg{
  border-top: var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 5vw, 5rem);
}

@media (max-width: 900px){
  .pkg{ grid-template-columns: 1fr; }
}

.pkg-name{ font-size: var(--fs-d2); margin-bottom: 0.8rem; }

.pkg-rate{
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 0.3rem;
}

.pkg-rate small{
  display: block;
  font-family: var(--ui);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber-light);
  margin-top: 0.5rem;
}

.incl{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  column-gap: 2rem;
}

@media (min-width: 700px){
  .incl.two-col{ grid-template-columns: 1fr 1fr; }
}

.incl li{
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--umber);
}

.incl li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 1px;
  background: var(--olive);
}

.rate-table{
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-size: 0.95rem;
}

.rate-table th{
  text-align: left;
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber-light);
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: var(--rule);
}

.rate-table td{
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--stone-soft);
  font-variant-numeric: tabular-nums;
}

.rate-table td:last-child{ text-align: right; padding-right: 0; }

.scroll-x{ overflow-x: auto; }

/* ---------- reviews ---------------------------------------- */

.reviews{ position: relative; }

.review{
  display: none;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}

.review.is-active{ display: block; animation: fadeUp 0.9s var(--ease); }

.review blockquote{
  margin: 0 0 2rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.42;
  font-style: italic;
}

.review cite{
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--umber-light);
}

.review-nav{
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.8rem;
}

.review-dot{
  width: 34px; height: 1px;
  background: var(--stone);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}

.review-dot[aria-selected="true"]{ background: var(--olive); }

/* the Google score line above the quotes */
.review-score{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 1.4rem 0 0;
}

.review-stars{ display: inline-flex; gap: 0.22em; }

.review-stars svg{
  width: 0.95rem;
  height: auto;
  fill: var(--olive-pale);
}

.review-stars svg.is-empty{ opacity: 0.28; }

.review-count{
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.review-source{ margin-top: 2.2rem; }

.review-setup{
  margin-top: 2.5rem;
  color: var(--on-dark-soft);
  opacity: 0.75;
  max-width: 52ch;
  margin-inline: auto;
}

.bg-dark .review-dot{ background: rgba(242,236,225,0.28); }
.bg-dark .review-dot[aria-selected="true"]{ background: var(--olive-pale); }

/* ---------- forms ------------------------------------------ */

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.6rem;
}

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

@media (max-width: 680px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field{ display: flex; flex-direction: column; gap: 0.55rem; }

.field label{
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
}

.field .req{ color: var(--olive); }

.field input,
.field select,
.field textarea{
  font-family: var(--ui);
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--bark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stone);
  padding: 0.7rem 0;
  transition: border-color 0.4s var(--ease);
  border-radius: 0;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-bottom-color: var(--olive);
}

.field select{ appearance: none; cursor: pointer; }

.field-select{ position: relative; }

.field-select::after{
  content: "";
  position: absolute;
  right: 4px; bottom: 1.15rem;
  width: 7px; height: 7px;
  border-right: 1px solid var(--umber);
  border-bottom: 1px solid var(--umber);
  transform: rotate(45deg);
  pointer-events: none;
}

.radio-row{
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding-top: 0.35rem;
}

.radio{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--umber);
  cursor: pointer;
}

.radio input{ accent-color: var(--olive); width: 16px; height: 16px; }

.form-note{
  font-size: var(--fs-small);
  color: var(--umber-light);
  margin-top: 1.6rem;
}

.form-success{
  display: none;
  border: 1px solid var(--olive);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
  background: rgba(109, 115, 85, 0.07);
}

.form-success.is-visible{ display: block; animation: fadeUp 0.6s var(--ease); }

.form-success h3{ font-size: 1.3rem; margin-bottom: 0.5rem; }
.form-success p{ font-size: 0.95rem; color: var(--umber); margin: 0; }

/* on dark grounds */
.bg-dark .field label{ color: var(--on-dark-soft); }
.bg-dark .field input,
.bg-dark .field select,
.bg-dark .field textarea{
  color: var(--on-dark);
  border-bottom-color: rgba(242,236,225,0.3);
}
.bg-dark .field input:focus,
.bg-dark .field textarea:focus,
.bg-dark .field select:focus{ border-bottom-color: var(--olive-pale); }
.bg-dark .field-select::after{ border-color: var(--on-dark-soft); }
.bg-dark .radio{ color: var(--on-dark-soft); }

/* ---------- modal ------------------------------------------ */

.modal{
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.modal.is-open{ display: flex; }

.modal-veil{
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 10, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn 0.6s var(--ease);
}

.modal-card{
  position: relative;
  background: var(--ivory);
  max-width: 940px;
  width: 100%;
  max-height: 92svh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  animation: modalIn 0.7s var(--ease);
}

@media (max-width: 780px){
  .modal-card{ grid-template-columns: 1fr; }
  .modal-card .modal-media{ display: none; }
}

.modal-media{
  position: relative;
  overflow: hidden;
  background: var(--oat);
  min-height: 260px;
}

.modal-media img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.modal-body{ padding: clamp(2rem, 4vw, 3.2rem); }

.modal-close{
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 40px; height: 40px;
  background: rgba(248,245,239,0.9);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background-color 0.35s var(--ease);
}

.modal-close:hover{ background: var(--stone); }

@keyframes modalIn{
  from{ opacity: 0; transform: translateY(24px) scale(0.99); }
  to{ opacity: 1; transform: none; }
}

@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

/* promo code reveal */
.promo-code{
  display: none;
  text-align: center;
  border: 1px solid var(--olive);
  padding: 1.6rem;
  margin-top: 1.6rem;
}

.promo-code.is-visible{ display: block; animation: fadeUp 0.7s var(--ease); }

.promo-code .code{
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  letter-spacing: 0.12em;
  margin: 0.6rem 0 0.9rem;
  color: var(--espresso);
}

/* ---------- whatsapp --------------------------------------- */

.wa{
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 120;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--espresso);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 6px 26px rgba(20,15,11,0.28);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}

.wa:hover,
.wa:focus-visible{
  transform: translateY(-3px);
  background: var(--whatsapp);
  color: #fff;
}

.wa svg{ width: 26px; height: 26px; fill: currentColor; }

/* ---------- footer ----------------------------------------- */

.site-footer{
  background: #000;
  color: var(--on-dark-soft);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
}

.footer-top{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(242,236,225,0.14);
}

@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

.footer-brand img{ width: 92px; height: auto; margin-bottom: 1.4rem; }

.footer-col h4{
  font-family: var(--ui);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive-pale);
  margin-bottom: 1.2rem;
}

.footer-col ul{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.7rem;
}

.footer-col a{
  text-decoration: none;
  font-size: 0.94rem;
  color: var(--on-dark-soft);
  transition: color 0.35s var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible{ color: var(--on-dark); }

.footer-bottom{
  padding-right: 4.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  font-size: var(--fs-small);
  color: rgba(188, 176, 160, 0.7);
}

.footer-bottom a{ text-decoration: none; }
.footer-bottom a:hover{ color: var(--on-dark); }

/* needs to out-specify .footer-col ul, which is a grid */
.footer-col ul.socials,
.socials{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}

.socials a{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(242,236,225,0.24);
  color: var(--on-dark-soft);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.socials a:hover,
.socials a:focus-visible{ background: var(--on-dark); color: var(--espresso); }

.socials svg{ width: 17px; height: 17px; }

/* ---------- reveal animation -------------------------------- */

.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  will-change: opacity, transform;
}

.reveal.is-in{ opacity: 1; transform: none; }

.reveal-1{ transition-delay: 0.1s; }
.reveal-2{ transition-delay: 0.22s; }
.reveal-3{ transition-delay: 0.34s; }
.reveal-4{ transition-delay: 0.46s; }

/* image reveal: the picture slides out from behind a mask */
.mask{ overflow: hidden; }

.mask img{
  transform: scale(1.12);
  transition: transform 1.6s var(--ease);
}

.mask.is-in img{ transform: scale(1); }

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .mask img, .hero-media img{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .scroll-cue::after{ animation: none; }
}

/* ---------- misc ------------------------------------------- */

.divider{
  height: 1px;
  background: var(--stone);
  border: 0;
  margin: 0;
}

.eyebrow-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.credit-block{
  border-top: var(--rule);
  padding-top: 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.credit-block .label{ margin-bottom: 0.9rem; }

.credit-block a{
  color: var(--bark);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
  transition: border-color 0.4s var(--ease);
}

.credit-block a:hover{ border-color: var(--olive); }

/* ---------- the wedding day timeline ------------------------ */

.day-list{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  border-top: var(--rule);
}

.day-step{
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
  border-bottom: var(--rule);
  align-items: start;
}

.day-time{
  font-family: var(--ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive);
  padding-top: 0.55rem;
}

@media (max-width: 700px){
  .day-step{ grid-template-columns: 1fr; gap: 0.5rem; }
  .day-time{ padding-top: 0; }
}

/* ---------- gallery packing --------------------------------- */

.gal{
  grid-auto-flow: row dense;
  align-items: start;
}

.gal .figure{ height: auto; }
.gal .figure img{ height: auto; }

/* ---------- image placeholder -------------------------------
   Used where Rose Barn has not supplied photography yet. Sized
   to the frame it will eventually hold so the layout does not
   move when the real picture arrives.
   ------------------------------------------------------------ */

.placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2.5rem;
  background:
    repeating-linear-gradient(135deg,
      rgba(169,174,147,0.07) 0px, rgba(169,174,147,0.07) 2px,
      transparent 2px, transparent 11px),
    var(--espresso-2);
  border: 1px solid rgba(169,174,147,0.28);
}

.placeholder p{
  max-width: 30ch;
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
  margin: 0;
}

.placeholder .label{ margin: 0; }

.placeholder-tall{ aspect-ratio: 4 / 5; }

/* ---------- footer photography credit ----------------------- */

.footer-credit{
  padding-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.6rem;
}

.footer-credit .label{ margin: 0; }

.footer-credit p{
  margin: 0;
  font-size: 0.92rem;
  color: var(--on-dark-soft);
}

.footer-credit a{
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,236,225,0.28);
  transition: border-color 0.35s var(--ease);
}

.footer-credit a:hover{ border-bottom-color: var(--olive-pale); }

/* ---------- social feed ------------------------------------- */

.feed-handle{
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
  padding-bottom: 0.15rem;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.feed-handle:hover,
.feed-handle:focus-visible{
  color: var(--olive);
  border-bottom-color: var(--olive);
}

.feed-embed{ margin-top: clamp(2.2rem, 4vw, 3.4rem); }

.feed-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

@media (max-width: 900px){
  .feed-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px){
  .feed-grid{ grid-template-columns: repeat(2, 1fr); }
}

.feed-cell{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--oat);
}

.feed-cell img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.feed-cell::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(36, 28, 22, 0);
  transition: background 0.5s var(--ease);
}

.feed-cell:hover img,
.feed-cell:focus-visible img{ transform: scale(1.07); }

.feed-cell:hover::after,
.feed-cell:focus-visible::after{ background: rgba(36, 28, 22, 0.42); }

.feed-mark{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.feed-cell:hover .feed-mark,
.feed-cell:focus-visible .feed-mark{ opacity: 1; transform: none; }

.feed-mark svg{ width: 26px; height: 26px; }

/* ============================================================
   THE WEDDING DAY, SCROLL DRIVEN
   A sticky image stage on the left, the hours scrolling past on
   the right. Each step owns a screen of scroll, and its frame
   crossfades in as it becomes active. Collapses to a plain
   stacked list on narrow screens and with reduced motion.
   ============================================================ */

.timeline{ position: relative; }

.timeline-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.tl-stage{
  position: sticky;
  top: 11svh;
  height: 78svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.4rem;
}

.tl-media{
  position: relative;
  overflow: hidden;
  background: var(--oat);
  height: 100%;
}

.tl-frame{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s var(--ease), transform 1.6s var(--ease);
}

.tl-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-frame.is-active{
  opacity: 1;
  transform: none;
}

.tl-meter{
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.tl-rail{
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--stone);
}

.tl-rail span{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--olive);
  transition: width 0.7s var(--ease);
}

.tl-counter{
  margin: 0;
  font-family: var(--mono, var(--body));
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--umber-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-counter b{ color: var(--bark); font-weight: 400; }

.tl-steps{
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-step{
  min-height: 74svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
  opacity: 0.32;
  transition: opacity 0.8s var(--ease);
}

.tl-step.is-active{ opacity: 1; }

.tl-time{
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.1rem;
}

.tl-time::before{
  content: "";
  width: 0;
  height: 1px;
  background: var(--olive);
  transition: width 0.9s var(--ease);
}

.tl-step.is-active .tl-time::before{ width: 38px; }

.tl-step h3{
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  margin-bottom: 1rem;
}

.tl-step p{
  max-width: 42ch;
  color: var(--umber);
}

.tl-step-media{ display: none; }

/* ---------- stacked fallback -------------------------------- */

@media (max-width: 900px){
  .timeline-inner{ grid-template-columns: 1fr; gap: 0; }
  .tl-stage{ display: none; }

  .tl-step{
    min-height: 0;
    opacity: 1;
    padding-block: clamp(2rem, 6vw, 3rem);
    border-bottom: var(--rule);
  }

  .tl-step:last-child{ border-bottom: 0; }

  .tl-step-media{
    display: block;
    margin-bottom: 1.6rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--oat);
  }

  .tl-step-media img{ width: 100%; height: 100%; object-fit: cover; }
  .tl-step .tl-time::before{ width: 38px; }
}

@media (prefers-reduced-motion: reduce){
  .tl-step{ opacity: 1; min-height: 0; }
  .tl-frame{ transition: none; }
}

/* ---------- wedding card credit ----------------------------- */

.wed-item{ display: flex; flex-direction: column; }

.card-credit{
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--stone-soft);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber-light);
}

.card-credit a{
  color: var(--bark);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
  padding-bottom: 1px;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.card-credit a:hover,
.card-credit a:focus-visible{ color: var(--olive); border-bottom-color: var(--olive); }

/* ============================================================
   PACKAGES
   Two cards to choose between, then one shared inclusion list,
   then what the larger package adds. The old layout repeated
   every inclusion twice, which is what made it hard to follow.
   ============================================================ */

.pkg-choose{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

@media (max-width: 860px){
  .pkg-choose{ grid-template-columns: 1fr; }
}

.pkg-card{
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--stone);
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease);
}

.pkg-card:hover{ border-color: var(--olive); }

.pkg-card.is-feature{ background: var(--espresso); color: var(--on-dark); border-color: var(--espresso); }
.pkg-card.is-feature .pkg-card-body p{ color: var(--on-dark-soft); }
.pkg-card.is-feature .incl li{ color: var(--on-dark-soft); }
.pkg-card.is-feature .incl li::before{ background: var(--olive-pale); }
.pkg-card.is-feature .pkg-figure{ border-bottom-color: rgba(242,236,225,0.16); }

.pkg-figure{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--oat);
}

.pkg-figure img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pkg-card:hover .pkg-figure img{ transform: scale(1.04); }

.pkg-badge{
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(36,28,22,0.82);
  color: var(--on-dark);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
}

.pkg-card-body{
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1.1rem;
}

.pkg-card h3{
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.1;
}

.pkg-price{
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-block: 0.4rem;
  border-block: 1px solid var(--stone-soft);
}

.pkg-card.is-feature .pkg-price{ border-color: rgba(242,236,225,0.16); }

.pkg-price .amount{
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pkg-price .per{
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--umber-light);
}

.pkg-card.is-feature .pkg-price .per{ color: var(--on-dark-soft); }

.pkg-card .btn{ margin-top: auto; }

/* shared inclusions band */

.pkg-shared{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 860px){
  .pkg-shared{ grid-template-columns: 1fr; }
}

.incl.three-col{ display: grid; gap: 0.75rem 2rem; }

@media (min-width: 700px){
  .incl.three-col{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px){
  .incl.three-col{ grid-template-columns: 1fr 1fr; }
}

/* what the exclusive adds */

.adds{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}

@media (max-width: 820px){
  .adds{ grid-template-columns: 1fr; }
}

.add-card{
  border-top: 2px solid var(--olive);
  padding-top: 1.4rem;
}

.add-card h4{
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  margin-bottom: 0.6rem;
}

.add-card p{ font-size: 0.95rem; color: var(--umber); margin: 0; }

.bg-dark .add-card p{ color: var(--on-dark-soft); }
.bg-dark .add-card{ border-top-color: var(--olive-pale); }

/* ============================================================
   THE PACKAGES JOURNEY
   The page used to be six sections a reader had to hold in their
   head. It is now one path: a rail that keeps its place on the
   left, and the steps moving past it. The rail marks where you
   are, so nobody has to remember how far along they got.
   ============================================================ */

.journey{
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.journey-rail{
  position: sticky;
  top: 7.5rem;
}

.journey-rail ol{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.9rem;
  display: grid;
  gap: 1.6rem;
}

/* the line the whole page hangs from */
.journey-rail ol::before{
  content: "";
  position: absolute;
  left: 3px;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: var(--stone);
}

.journey-rail a{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--umber-light);
  transition: color 0.4s var(--ease);
}

.journey-rail a::before{
  content: "";
  position: absolute;
  left: -1.9rem;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stone);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}

.jr-num{
  font-family: var(--display);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.jr-label{
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
}

.journey-rail a:hover{ color: var(--espresso); }

.journey-rail li.is-active a{ color: var(--espresso); }
.journey-rail li.is-active a::before{
  background: var(--olive);
  transform: scale(1.5);
}

/* each step is its own held breath */
.jstep{
  padding-block: clamp(3rem, 7vh, 5.5rem);
  border-top: 1px solid var(--stone);
  scroll-margin-top: 7rem;
}

.jstep:first-child{ border-top: 0; padding-top: 0; }
.jstep.is-last{ padding-bottom: 0; }

.jstep-kicker{
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.jstep-n{
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--olive);
  letter-spacing: 0;
}

.jstep h2{ margin-bottom: 1.2rem; }

.jstep .body-copy{ max-width: 52ch; }

.jstep-panel{
  padding: clamp(2rem, 4vw, 3.4rem);
  scroll-margin-top: 7rem;
}

@media (max-width: 900px){
  .journey{ grid-template-columns: 1fr; gap: 0; }
  .journey-rail{ display: none; }
}

/* two cards side by side sit better narrow inside the steps column */
.journey .pkg-choose{ grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px){
  .journey .pkg-choose{ grid-template-columns: 1fr; }
}

/* seasons */

.seasons{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

@media (max-width: 760px){
  .seasons{ grid-template-columns: 1fr; }
}

.season{
  background: var(--ivory);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.season .k{
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.7rem;
}

.season .v{
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  display: block;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.season small{ font-size: var(--fs-small); color: var(--umber-light); }

/* booking steps as a compact row */

.steps-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bstep;
}

@media (max-width: 900px){ .steps-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps-row{ grid-template-columns: 1fr; } }

.steps-row li{ counter-increment: bstep; }

.steps-row li::before{
  content: counter(bstep, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--olive);
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--stone);
}

.steps-row h4{ font-size: 1.15rem; margin-bottom: 0.45rem; }
.steps-row p{ font-size: 0.92rem; color: var(--umber); margin: 0; }

/* ============================================================
   ENQUIRY FORM
   Grouped into two short fieldsets, with pill choices instead of
   dropdowns so the whole thing can be answered by tapping.
   ============================================================ */

.form-card{
  background: var(--ivory);
  border: 1px solid var(--stone);
  padding: clamp(1.6rem, 4vw, 3.2rem);
}

.fieldset{
  border: 0;
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
  padding: 0;
}

.fieldset:last-of-type{ margin-bottom: 0; }

.fieldset > legend{
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.6rem;
  padding: 0;
}

.fieldset > legend::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stone-soft);
}

.choices{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.2rem;
}

.choice{ position: relative; display: inline-flex; }

.choice input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.choice span{
  display: inline-block;
  border: 1px solid var(--stone);
  padding: 0.62rem 1.05rem;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber);
  cursor: pointer;
  transition: background-color 0.35s var(--ease),
              color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}

.choice:hover span{ border-color: var(--olive); color: var(--bark); }

.choice input:checked + span{
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--on-dark);
}

.choice input:focus-visible + span{
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.field-note{
  font-size: var(--fs-small);
  color: var(--umber-light);
  margin: 0.4rem 0 0;
}

.submit-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--stone-soft);
}

.submit-row .caption{ max-width: 34ch; margin: 0; }

.btn .arrow{
  display: inline-block;
  transition: transform 0.45s var(--ease);
}

.btn:hover .arrow,
.btn:focus-visible .arrow{ transform: translateX(5px); }

/* ---------- contact rail ------------------------------------ */

.contact-ways{
  display: grid;
  gap: 1px;
  background: var(--stone);
  border: 1px solid var(--stone);
}

.way{
  background: var(--ivory);
  padding: 1.3rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  transition: background-color 0.4s var(--ease);
}

.way:hover{ background: var(--linen); }

.way .k{
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--umber-light);
}

.way .v{ color: var(--bark); }

.way .go{ color: var(--olive); transition: transform 0.4s var(--ease); }
.way:hover .go{ transform: translateX(4px); }

/* ---------- contact page ------------------------------------
   The page opens on the form rather than on another photograph,
   and nothing runs beside it. The linen ground is what lifts the
   ivory card off the page, since there is no side column left to
   give it an edge.
   ------------------------------------------------------------ */

.contact-open{
  background: var(--linen);
  padding-top: clamp(7.4rem, 12vh, 8.6rem);
}

.contact-head{
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 3.4vw, 2.8rem);
  text-align: center;
}

/* deliberately smaller than a page hero headline: the form is the
   thing being looked at, not the title above it */
.contact-head h1{
  font-size: var(--fs-d2);
  margin: 0.6rem 0 0.9rem;
}

.contact-head .lead{
  max-width: 46ch;
  margin-inline: auto;
}

.form-lead{
  max-width: 64rem;
  margin-inline: auto;
}

.contact-direct{
  max-width: 64rem;
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  text-align: center;
}

.contact-direct > .label{ margin-bottom: 1.2rem; }

.contact-ways.is-row{
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}

.contact-direct .btn-row{
  justify-content: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

@media (max-width: 900px){
  .contact-ways.is-row{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px){
  .contact-ways.is-row{ grid-template-columns: 1fr; }
}

/* ---------- map --------------------------------------------- */

.map-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--oat);
  border: 1px solid var(--stone);
  overflow: hidden;
}

@media (max-width: 760px){
  .map-frame{ aspect-ratio: 4 / 3; }
}

.map-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  background: transparent;
  /* pulls Google's default palette toward the site's warm neutrals */
  filter: grayscale(0.42) sepia(0.18) contrast(0.94) brightness(1.02);
}

.map-fallback{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  color: var(--umber);
  z-index: 0;
  line-height: 1.9;
}

/* ============================================================
   STORYTELLING DEVICES
   An olive sprig ornament opens each chapter, a sage band slows
   the page down, lock-ups pair letterspaced caps with an italic
   serif line, and pull quotes sit full bleed over photography.
   ============================================================ */

/* ---------- ornament ---------------------------------------- */

.ornament{
  display: block;
  width: clamp(96px, 12vw, 132px);
  height: auto;
  margin: 0 auto 1.6rem;
  color: var(--olive);
}

.ornament-left{ margin-left: 0; margin-right: auto; }

.bg-dark .ornament,
.bg-sage .ornament{ color: currentColor; opacity: 0.85; }

/* ---------- sage narrative band ----------------------------- */

.bg-sage{
  background: var(--sage);
  color: var(--espresso);
}

.bg-sage .label{ color: var(--sage-deep); }
.bg-sage .lead,
.bg-sage .body-copy{ color: rgba(36, 28, 22, 0.78); }
.bg-sage h1, .bg-sage h2, .bg-sage h3{ color: var(--espresso); }
.bg-sage .rule-short{ background: var(--sage-deep); }

.bg-sage .btn-outline{ border-color: var(--espresso); color: var(--espresso); }
.bg-sage .btn-outline:hover,
.bg-sage .btn-outline:focus-visible{ background: var(--espresso); color: var(--sage); }

.bg-sage .link-under{ color: var(--espresso); }
.bg-sage .link-under::after{ background: rgba(36,28,22,0.28); }
.bg-sage .link-under::before{ background: var(--sage-deep); }

/* ---------- lock-up heading ---------------------------------
   A small letterspaced caps line sitting over a larger italic
   serif line. Used where a section needs a voice rather than a
   label.                                                        */

.lockup{
  display: block;
  max-width: 44ch;
  margin-inline: auto;
}

.lockup .caps{
  display: block;
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(0.86rem, 1.5vw, 1.05rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.75;
  margin-bottom: 0.9rem;
  max-width: 40ch;
  margin-inline: auto;
}

.lockup .script{
  display: block;
  font-family: var(--script); font-size-adjust: var(--script-adjust);
  font-style: normal;
  font-weight: 400;
  /* script faces carry a small x-height, so they are set larger than
     the display face would be at the same optical weight */
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  line-height: 1.24;
  letter-spacing: 0;
  max-width: 24ch;
  margin-inline: auto;
}

.lockup-left{ margin-inline: 0; text-align: left; }
.lockup-left .caps,
.lockup-left .script{ margin-inline: 0; }

/* ---------- pull quote over photography --------------------- */

.pullquote{
  position: relative;
  min-height: 72svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  padding: var(--section) var(--gutter);
}

.pullquote-media{
  position: absolute;
  inset: 0;
  z-index: -2;
}

.pullquote-media img{ width: 100%; height: 100%; object-fit: cover; }

.pullquote-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,11,0.44), rgba(20,15,11,0.58));
}

.pullquote blockquote{
  margin: 0;
  max-width: 26ch;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.34;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}

.pullquote cite{
  display: block;
  margin-top: 1.8rem;
  font-family: var(--ui);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(242,236,225,0.76);
}

.pullquote .ornament{ color: var(--olive-pale); margin-bottom: 2rem; }

/* ---------- star credential --------------------------------- */

.stars{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.stars svg{ width: 11px; height: 11px; fill: currentColor; }

.stars .n{ margin-left: 0.35rem; }

.hero .stars{ color: var(--olive-pale); }

/* ============================================================
   PINNED HERO
   The hero is fixed behind the page. Everything after it sits on
   an opaque sheet that slides up over it as you scroll, so the
   first gesture of the site is the estate being covered by its
   own story rather than a scroll cue asking you to move.
   ============================================================ */

.hero-pinned{
  position: fixed;
  inset: 0 0 auto 0;
  height: clamp(520px, 78svh, 860px);
  min-height: 0;
  z-index: 0;
}

.hero-spacer{
  height: clamp(520px, 78svh, 860px);
  pointer-events: none;
}

/* the sheet that rides over the hero */
.page-flow{
  position: relative;
  z-index: 1;
  background: var(--ivory);
}

.hero-pinned .hero-inner{
  padding: 0 var(--gutter);
  transition: opacity 0.4s linear;
}

.hero-logo{
  width: clamp(96px, 13vw, 152px);
  height: auto;
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  display: block;
  /* the ring lettering is hairline thin over a bright sky */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55))
          drop-shadow(0 2px 26px rgba(0,0,0,0.7));
}

.hero-pinned h1{
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: 1.06;
  margin-bottom: 2.4rem;
}

/* the brand mark in the bar holds back until the hero is behind you */
/* the mark stays in the bar on every page, including home */

/* ============================================================
   IMPACT BAND
   Replaces the long narrative block. Near black, very little
   copy, and the credentials stated as facts rather than prose.
   ============================================================ */

.bg-ink{
  background: var(--ink);
  color: var(--on-dark);
}

.bg-ink h1, .bg-ink h2, .bg-ink h3{ color: var(--on-dark); }
.bg-ink .label{ color: var(--olive-pale); }
.bg-ink .lead, .bg-ink .body-copy{ color: var(--on-dark-soft); }
.bg-ink .ornament{ color: var(--olive-pale); }

.bg-ink .btn-light{ border-color: rgba(242,236,225,0.5); }

.facts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(242, 236, 225, 0.16);
  border: 1px solid rgba(242, 236, 225, 0.16);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

@media (max-width: 760px){
  .facts{ grid-template-columns: 1fr; }
}

.fact{
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 2rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* a tile without stars keeps the same rhythm as its neighbours, so the
   values and captions line up across the row */
.fact:not(:has(.stars))::before{
  content: "";
  display: block;
  height: 15px;
  margin-bottom: 0.7rem;
}

/* stacked on a phone there is no row to line up with */
@media (max-width: 760px){
  .fact:not(:has(.stars))::before{ display: none; }
}

.fact .v{
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  color: var(--on-dark);
  margin-bottom: 0.6rem;
}

.fact .k{
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.fact .stars{
  color: var(--on-dark);
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}

.fact .stars svg{ width: 15px; height: 15px; }
.fact .stars .n{ display: none; }

/* ============================================================
   HOMEPAGE, SECOND DESIGN
   ------------------------------------------------------------
   The old hero was centred type on a wide photograph, which is
   what every wedding venue does. This one is asymmetric: the
   headline anchors bottom left at architectural scale, the
   credentials run as a numbered index bottom right, and the next
   section deliberately peeks so the page needs no scroll label.
   ============================================================ */

.hero-ed{
  position: relative;
  height: 86svh;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
}

.hero-ed-media{ position: absolute; inset: 0; z-index: -2; }

.hero-ed-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transform: scale(1.08);
  animation: heroDrift 18s var(--ease) forwards;
}

@keyframes heroDrift{ to{ transform: scale(1); } }

/* a soft centre scrim so light type holds on a bright sky */
.hero-ed-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 52%,
                    rgba(18,16,14,0.52) 0%, rgba(18,16,14,0.30) 55%,
                    rgba(18,16,14,0.10) 100%),
    linear-gradient(180deg, rgba(18,16,14,0.44) 0%, rgba(18,16,14,0.14) 34%,
                    rgba(18,16,14,0.20) 70%, rgba(18,16,14,0.46) 100%);
}

.hero-ed-inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.8rem, 3.4vw, 2.6rem);
}

/* restrained: the statement reads, it does not shout */
.hero-ed h1{
  font-size: clamp(2rem, 4.3vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  text-shadow: 0 2px 60px rgba(0,0,0,0.45);
}

.hero-ed h1 .thin{
  font-style: italic;
  font-weight: 400;
}

.hero-ed .btn-row{ justify-content: center; }
.hero-ed .btn-row{ gap: 0.7rem; }
.hero-ed .btn-row .btn{
  flex: 0 0 auto;
  padding: 0.8rem 1.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

/* scroll cue: one warm line and a drawing rule, so the page needs no
   "scroll" label and the invitation does the work instead */
.hero-cue{
  position: absolute;
  left: 50%;
  bottom: clamp(1.6rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: rgba(242,236,225,0.9);
  z-index: 2;
}

.hero-cue-text{
  font-family: var(--script); font-size-adjust: var(--script-adjust);
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 1px 16px rgba(0,0,0,0.75), 0 0 40px rgba(0,0,0,0.4);
  position: relative;
  display: inline-block;
}

/* the full phrase reserves its width so the line does not shuffle
   sideways while it types */
.hero-cue-ghost{ visibility: hidden; }

.hero-cue-live{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

/* the caret is a hairline, in keeping with the rest of the page */
.hero-cue-caret{
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 0.12em;
  background: rgba(242,236,225,0.9);
  transform: translateY(0.08em);
  opacity: 0;
}

.hero-cue.is-typing .hero-cue-caret{ opacity: 1; }
.hero-cue.is-done .hero-cue-caret{ animation: caretBlink 1.15s steps(1) infinite; }

@keyframes caretBlink{
  0%, 45%{ opacity: 1; }
  50%, 95%{ opacity: 0; }
  100%{ opacity: 1; }
}

.hero-cue-line{
  position: relative;
  width: 1px;
  height: clamp(2.2rem, 5vh, 3.4rem);
  background: rgba(242,236,225,0.26);
  overflow: hidden;
}

.hero-cue-line::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242,236,225,0.95);
  transform-origin: top;
  animation: cueDraw 2.6s var(--ease) 3.4s infinite;
}

.hero-cue:hover .hero-cue-text{ color: #fff; }

@keyframes cueDraw{
  0%{ transform: scaleY(0); opacity: 0; }
  25%{ opacity: 1; }
  55%{ transform: scaleY(1); opacity: 1; }
  100%{ transform: scaleY(1) translateY(100%); opacity: 0; }
}

@media (max-width: 900px){
  .hero-ed{ height: 88svh; }
  .hero-ed-media img{ object-position: 50% 50%; }
  .hero-cue-text{ font-size: 1.5rem; }
}

@media (max-width: 460px){
  .hero-cue-text{ font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce){
  .hero-ed-media img{ animation: none; transform: none; }
  .hero-cue-caret{ display: none; }
  .hero-cue-line::after{ animation: none; opacity: 0.5; }
}

/* ============================================================
   SHOWCASE
   The signature section. Seven real weddings at one venue, every
   one a different palette. No competitor can copy this, so it
   goes second, before anything the site says about itself.
   ============================================================ */

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

.showcase-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}

@media (max-width: 760px){
  .showcase-head{ grid-template-columns: 1fr; align-items: start; }
}

.showcase-rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 27vw, 420px);
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--gutter);
  padding-bottom: 1.6rem;
  scrollbar-width: none;
  cursor: grab;
}

.showcase-rail::-webkit-scrollbar{ display: none; }
.showcase-rail.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.showcase-rail > *{ scroll-snap-align: start; }

.show-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--on-dark);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--oat);
}

.show-card img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--ease);
}

.show-card::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,16,14,0) 42%, rgba(18,16,14,0.82) 100%);
  transition: background 0.6s var(--ease);
}

.show-card:hover img,
.show-card:focus-visible img{ transform: scale(1.06); }

.show-card-body{
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  z-index: 1;
}

.show-card .n{
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  color: rgba(242,236,225,0.66);
  margin-bottom: 0.6rem;
}

.show-card h3{
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.12;
  margin-bottom: 0.3rem;
}

.show-card p{
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242,236,225,0.78);
}

.rail-meter{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.rail-track{
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--stone);
  max-width: 320px;
}

.rail-thumb{
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: var(--bark);
  transition: transform 0.15s linear;
}

/* ============================================================
   SETTINGS
   Six of them, so an even three by two grid at one aspect ratio.
   The offset version read as clutter rather than as rhythm.
   ============================================================ */

.settings{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.4vw, 3.2rem) clamp(1.2rem, 2.2vw, 2rem);
  align-items: start;
}

.setting{ position: relative; display: block; text-decoration: none; color: inherit; }

.setting .frame{
  position: relative;
  overflow: hidden;
  background: var(--oat);
  margin-bottom: 1rem;
}

.setting img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--ease);
}

.setting:hover img{ transform: scale(1.05); }

.setting h3{ font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin-bottom: 0.35rem; }
.setting p{ margin: 0; font-size: 0.92rem; color: var(--umber); max-width: 34ch; }

.setting .frame{ aspect-ratio: 4 / 5; }

@media (max-width: 900px){
  .settings{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .settings{ grid-template-columns: 1fr; }
}

/* ============================================================
   SPLIT FEATURE, full bleed image against a coloured half
   ============================================================ */

.duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 74svh;
}

@media (max-width: 900px){ .duo{ grid-template-columns: 1fr; } }

.duo-media{ position: relative; overflow: hidden; background: var(--oat); min-height: 46svh; }
.duo-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.duo-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.duo-body .inner{ max-width: 34rem; }


/* ============================================================
   THE FILM
   Full bleed against black, directly under the hero. Capped by
   height rather than width so it never swallows a wide screen,
   and cropped with object-fit so the frame stays cinematic at
   every size.
   ============================================================ */

.film{ background: var(--ink); }

.film-frame{
  position: relative;
  width: 100%;
  height: min(82svh, 56.25vw);
  min-height: 330px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.film-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* just enough gradient for the caption and controls to sit on */
.film-veil{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,16,14,0.52) 0%, rgba(18,16,14,0) 30%,
                    rgba(18,16,14,0) 60%, rgba(18,16,14,0.62) 100%);
}

.film-meta{
  position: absolute;
  left: 0; top: 0;
  padding: clamp(1.4rem, 3.4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem);
  color: var(--on-dark);
  max-width: 34ch;
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}

.film-meta p{
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(242, 236, 225, 0.82);
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}

.film-controls{
  position: absolute;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(1.2rem, 3.4vw, 2.6rem);
  display: flex;
  gap: 0.7rem;
}

.film-btn{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 236, 225, 0.45);
  border-radius: 50%;
  background: rgba(18, 16, 14, 0.34);
  color: var(--on-dark);
  cursor: pointer;
  padding: 0;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.film-btn:hover,
.film-btn:focus-visible{
  background: rgba(242, 236, 225, 0.92);
  border-color: rgba(242, 236, 225, 0.92);
  color: var(--ink);
}

.film-btn svg{ width: 19px; height: 19px; fill: currentColor; }

/* one icon per state, swapped by the button's pressed flag */
.film-btn .i-pause{ display: none; }
.film-btn[data-film-play][aria-pressed="true"] .i-play{ display: none; }
.film-btn[data-film-play][aria-pressed="true"] .i-pause{ display: block; }

.film-btn .i-on{ display: none; }
.film-btn[data-film-sound][aria-pressed="true"] .i-on{ display: block; }
.film-btn[data-film-sound][aria-pressed="true"] .i-off{ display: none; }

@media (max-width: 760px){
  /* taller crop on a phone, and the caption drops to the foot of the
     frame where the gradient is strongest */
  .film-frame{ height: min(72svh, 118vw); }

  .film-meta{
    top: auto;
    bottom: 0;
    max-width: 22ch;
    padding-bottom: 1.5rem;
  }

  .film-meta p{ font-size: 0.84rem; margin-top: 0.45rem; }
  .film-btn{ width: 40px; height: 40px; }
  .film-controls{ bottom: 1.5rem; }
}

/* ============================================================
   DRAWN BOTANICALS
   A small family of hand drawn olive sprigs, branches and one
   tree, set loose in the margins. They are decoration and never
   content: aria-hidden, no pointer events, and they sit behind
   everything so text always wins.
   ============================================================ */

/* sizing lives on the wrapper, so .ornament keeps its own width */
.art{ display: block; height: auto; overflow: visible; }
.accent > .art{ width: 100%; }

.accent{
  position: absolute;
  z-index: 0;
  display: block;
  color: var(--stone);
  opacity: 0.9;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg));
}

/* on the dark bands the drawings become a watermark, not a line */
.accent.on-dark{ color: rgba(242, 236, 225, 0.34); }

/* pale marks that should read as texture rather than illustration */
.accent.faint{ opacity: 0.5; }
.accent.ghost{ opacity: 0.28; }

/* any section holding an accent */
.has-art{ position: relative; overflow-x: clip; }
.has-art > .wrap,
.has-art > .duo-body,
.has-art > .duo-media{ position: relative; z-index: 1; }

@media (max-width: 760px){
  .accent.desk-only{ display: none; }
  .accent{ opacity: 0.55; }
}

/* the drawings draw themselves in, once, when they scroll into view */
.accent .art path{
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.accent.is-in .art path{
  animation: inkIn 2.4s cubic-bezier(0.33, 0.9, 0.3, 1) forwards;
}

@keyframes inkIn{ to{ stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce){
  .accent .art path{ stroke-dashoffset: 0; }
  .accent.is-in .art path{ animation: none; }
}


/* the hero script line is one unbroken phrase, so it steps down a touch on the narrowest phones */
@media (max-width: 360px){ .hero-cue-text{ font-size: 1.12rem; } }


/* ============================================================
   TYPE, ROUND 2
   Reading text is set in Cormorant Garamond. Everything that is
   small, spaced out and in capitals (labels, navigation, buttons,
   form labels, captions on cards) now uses Cormorant too, a weight
   heavier so it holds at small sizes. The script face is Jimmy Script.
   ============================================================ */

.label, .btn, .link-under, .nav a, .nav .header-cta, .wed-card .meta, .wed-card .view,
.spec dt, .spec .k, .amenities li, .pkg-rate small, .rate-table th, .review cite, .review-count,
.field label, .footer-col h4, .tl-time, .card-credit, .pkg-badge, .pkg-price .per, .jr-label,
.season .k, .fieldset > legend, .choice span, .way .k, .lockup .caps, .pullquote cite, .stars,
.fact .k, .show-card p, .show-card .n, .form-note, .field-note, .caption, .jr-num, .jstep-n,
input, select, textarea, button, .footer-bottom, .footer-col a, .footer-col li{
  font-family: var(--ui);
}

/* Cormorant has a small x-height, so reading text is nudged up to
   sit at the same optical size the old sans did */
p, li, dd, td, .lead, .body-copy{
  font-size-adjust: 0.46;
}
.body-copy, .lead, .setting p, .exp-grid .body-copy, .statement .lead{
  font-weight: 500;
}

/* ============================================================
   UPCOMING EVENTS
   ============================================================ */
.events-empty{ background: var(--ivory); text-align: center; padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 3rem); }
.events-empty h3{ margin: .6rem 0 .8rem; }
.events-empty .body-copy{ max-width: 44ch; margin-inline: auto; }
.events-signup{ max-width: 40rem; margin: clamp(2rem, 4vw, 3rem) auto 0; }

/* hyphen wrapper in the home hero (no styling needed with Cormorant) */
.hy{ }

/* Home hero: silent background film. The cover photo shows first and
   stays for reduced motion or data saver; the film fades in once playing. */
.hero-ed-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.hero-ed-video.is-playing{ opacity: 1; }
.hero-ed-toggle{
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(1.2rem, 3.4vw, 2.6rem);
  z-index: 2;
  width: 38px; height: 38px;
}
.hero-ed-toggle svg{ width: 16px; height: 16px; }
.hero-ed-toggle .i-pause{ display: none; }
.hero-ed-toggle[aria-pressed="true"] .i-play{ display: none; }
.hero-ed-toggle[aria-pressed="true"] .i-pause{ display: block; }
@media (prefers-reduced-motion: reduce){ .hero-ed-video{ display: none; } }

/* Round 3: Cormorant for labels, navigation and buttons as well */
.label, .btn, .link-under, .nav a, .nav .header-cta, .wed-card .meta, .wed-card .view,
.spec dt, .spec .k, .amenities li, .pkg-rate small, .rate-table th, .review cite, .review-count,
.field label, .footer-col h4, .tl-time, .card-credit, .pkg-badge, .pkg-price .per, .jr-label,
.season .k, .fieldset > legend, .choice span, .way .k, .lockup .caps, .pullquote cite,
.fact .k, .show-card .n, .form-note, .field-note, .jr-num, .jstep-n, .event-meta, .event-date .m{
  font-weight: 600;
}

/* Jimmy Script has a small x-height, so it is optically enlarged to sit where the old script did */
:root{ --script-adjust: 0.38; }

/* Round 3: headings in Cormorant Garamond. Cormorant sets smaller and
   lighter than Bodoni did, so headings get a touch more weight and size. */
h1, h2, h3, h4{ font-weight: 500; letter-spacing: -0.005em; }
h1, .display-1, .display-2{ font-size-adjust: 0.44; }

/* ============================================================
   CONTACT, ROUND 3
   A white page split in two: a tall photograph pinned on the left,
   the enquiry on the right. Fields sit straight on white with fine
   rules, no boxed card.
   ============================================================ */

body.page-white{ background: #fff; }
.page-white .contact-map{ background: #fff; }

.contact-v2{ background: #fff; padding-top: 88px; }

.contact-v2-grid{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}

.contact-v2-media{
  position: sticky;
  top: 88px;
  height: calc(100vh - 88px);
  min-height: 520px;
  overflow: hidden;
}

.contact-v2-img,
.contact-v2-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.contact-v2-img.is-placeholder{
  background:
    linear-gradient(160deg, rgba(36,28,22,0.05), rgba(36,28,22,0.28)),
    repeating-linear-gradient(45deg, #EDE7DC 0 14px, #E6DFD2 14px 28px);
  display: grid;
  place-items: center;
}

.ph-note{
  font-family: var(--ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--umber);
  background: rgba(255,255,255,0.8);
  padding: 0.6rem 1rem;
}

.contact-v2-media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,16,14,0) 55%, rgba(18,16,14,0.45) 100%);
  pointer-events: none;
}

.contact-v2-caption{
  position: absolute;
  left: clamp(1.6rem, 3.5vw, 3rem);
  bottom: clamp(1.4rem, 3vw, 2.6rem);
  z-index: 1;
  color: #fff;
}

.contact-v2-caption .script{
  font-family: var(--script); font-size-adjust: var(--script-adjust);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.1;
}

.contact-v2-body{
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.4rem, 6vw, 6rem) clamp(3.5rem, 7vw, 6rem);
  max-width: 50rem;
}

.contact-v2-head h1{
  font-size: var(--fs-d2);
  margin: 0.6rem 0 1rem;
}

.contact-v2-head .lead{ max-width: 44ch; }

.contact-v2-tour{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  margin: clamp(2rem, 4vw, 2.8rem) 0;
  padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem);
  background: var(--ivory);
}

.contact-v2-tour .label{ margin-bottom: 0.35rem; }
.contact-v2-tour-t{ margin: 0; color: var(--bark); }
.contact-v2-tour-links{ display: flex; gap: 0.6rem; flex-wrap: wrap; }
.contact-v2-tour-links .btn{ padding-inline: 1.3rem; }

.contact-v2-form .form-note{ margin-top: 1rem; }

.contact-v2-form .field input,
.contact-v2-form .field select,
.contact-v2-form .field textarea{ background: transparent; }

.contact-v2-form .choice span{ background: #fff; }
.contact-v2-form .choice input:checked + span{ background: var(--espresso); }

.contact-v2-direct{
  margin-top: clamp(2.8rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  border-top: 1px solid var(--stone-soft);
}

.contact-v2-ways{
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 2rem;
}

.contact-v2-ways li{ display: flex; flex-direction: column; gap: 0.25rem; }
.contact-v2-ways .k{
  font-family: var(--ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--umber-light);
  font-weight: 600;
}
.contact-v2-ways a{
  color: var(--bark);
  text-decoration: none;
  font-size: 1.15rem;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 0.3s var(--ease);
}
.contact-v2-ways a:hover{ border-color: currentColor; }

@media (max-width: 900px){
  .contact-v2-grid{ grid-template-columns: 1fr; }
  .contact-v2-media{ position: relative; top: 0; height: 46svh; min-height: 280px; }
  .contact-v2-body{ max-width: none; padding-top: clamp(2.2rem, 6vw, 3rem); }
}

@media (max-width: 520px){
  .contact-v2-ways{ grid-template-columns: 1fr; }
  .contact-v2-tour-links{ width: 100%; }
  .contact-v2-tour-links .btn{ flex: 1; text-align: center; justify-content: center; }
}

/* ---------- tour choice (book a viewing) -------------------- */

.tour-pick{
  border: 0; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.tour-pick-legend{
  font-family: var(--ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--umber);
  padding: 0;
  margin-bottom: 0.9rem;
}

.tour-option{ position: relative; display: block; cursor: pointer; }
.tour-option input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.tour-option-body{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--stone);
  background: transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.tour-option-k{
  font-family: var(--ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive);
}
.tour-option-t{ font-family: var(--display); font-size: 1.35rem; line-height: 1.2; color: var(--bark); font-weight: 500; }
.tour-option-d{ font-size: 0.98rem; color: var(--umber); }

.tour-option:hover .tour-option-body{ border-color: var(--olive); }
.tour-option input:checked + .tour-option-body{ background: var(--espresso); border-color: var(--espresso); }
.tour-option input:checked + .tour-option-body .tour-option-k{ color: var(--olive-pale); }
.tour-option input:checked + .tour-option-body .tour-option-t{ color: var(--on-dark); }
.tour-option input:checked + .tour-option-body .tour-option-d{ color: var(--on-dark-soft); }
.tour-option input:focus-visible + .tour-option-body{ outline: 2px solid var(--olive); outline-offset: 2px; }

@media (max-width: 520px){ .tour-pick{ grid-template-columns: 1fr; } }

/* packages: the next step after the downloads */
.next-tour{
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(242, 236, 225, 0.2);
}
.next-tour .btn-row{ margin-top: 0.8rem; gap: 1.6rem; }
.next-tour .link-under{ color: var(--on-dark); }
.field .tour-option{ text-transform: none; letter-spacing: normal; font-size: inherit; margin: 0; color: inherit; }
body.page-white.no-hero .site-header,
body.page-white .site-header.is-solid{ background: rgba(255,255,255,0.96); }

/* ============================================================
   THE GRADING BALANCE
   The five-star line leads, the four-star line answers it in a
   smaller script. Same order on the home page fact tiles.
   ============================================================ */

.lockup-grade .head{
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-d1);
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-size-adjust: 0.44;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: 0.5rem;
}

.lockup-grade .script{
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  max-width: 28ch;
  color: var(--olive-pale);
}

.bg-ink .lockup-grade .head{ color: var(--on-dark); }

/* the five star tile leads the row */
.fact.is-lead .v{ font-size: clamp(2.1rem, 4vw, 3.1rem); }

/* ============================================================
   EVENT CARDS, ROUND 3
   Photograph on the left with the date over its corner, the
   details on the right: name, when, a few lines, the price and
   one way to ask about it.
   ============================================================ */

.events-list{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; max-width: 62rem; }

.event-card{
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  align-items: stretch;
  background: var(--ivory);
  border: 1px solid var(--stone-soft);
  padding: 0;
  overflow: hidden;
}

.event-media{ position: relative; min-height: 260px; }

.event-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.event-date{
  position: absolute;
  top: 0; left: 0;
  display: block;
  background: rgba(36, 28, 22, 0.88);
  color: var(--on-dark);
  text-align: center;
  padding: 0.85rem 1.1rem 0.7rem;
  border: 0;
}

.event-date .d{
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1;
}

.event-date .m{
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-pale);
}

.event-body{
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.event-body h3{ font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.event-body .event-meta{ margin: 0; }
.event-body .body-copy{ margin: 0; }

.event-cost{
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--bark);
}

.event-cost span{
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  color: var(--umber-light);
}

.event-body .btn{ margin-top: auto; }

.events-empty{ border: 1px solid var(--stone-soft); }

@media (max-width: 760px){
  .event-card{ grid-template-columns: 1fr; }
  .event-media{ min-height: 0; aspect-ratio: 4 / 3; }
  .event-body .btn{ width: 100%; text-align: center; justify-content: center; margin-top: 0.6rem; }
}

.event-date .d{ color: var(--on-dark); }

.event-meta{ font-family: var(--ui); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; color: var(--umber); }