/* Moments on Main — Payson, UT wedding & event venue
   Palette per intake.md (cream / black / white, non-negotiable) plus research
   accents from design-brief.md §1 (gold 8A6C2F, champagne B08D57 decorative
   only, hunter green 3F4D3A). Type per §2: Cormorant Garamond + Jost.
   Mobile-first. Animations use transform and opacity only. */

:root{
  --cream:#FDF5EE;
  --cream-2:#F6EBE0;        /* tint of the mandated cream for cards/alt panels — logged */
  --ink:#0D0D0D;
  --ink-soft:#2A2622;       /* body text on cream, 14.2:1 */
  --white:#FFFFFF;
  --gold:#8A6C2F;           /* 4.57:1 on cream — body-safe accent */
  --champagne:#B08D57;      /* decorative only: rules, borders, overlays */
  --green:#3F4D3A;          /* 8.34:1 on cream — links, captions, focus */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --header-h:64px;
  --max:1200px;
  --gutter:20px;
  --radius:4px;
  --shadow:0 18px 44px rgba(13,13,13,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(min-width:900px){:root{--header-h:88px;--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--cream)}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--ink-soft);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold)}
/* 44px tap targets: inline links take vertical padding, which enlarges the hit box without
   moving the line; the small negative inline margin keeps short words at 44px wide. */
main p a:not(.btn):not(.link-more):not(.link-call),main li a:not(.btn):not(.link-more),main address a,.form-note a,.legal-links a{padding:12px 4px;margin:0 -4px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}
.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;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--white);
  padding:10px 16px;border-radius:0;text-decoration:none;transform:translateY(0);transition:transform .2s var(--ease)}
.skip:focus{top:12px;transform:none}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--ink);margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,7.5vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.45rem,2.4vw,1.85rem);font-weight:600}
p{margin:0 0 1.1em}
.lede{font-size:1.2rem;line-height:1.6}
.tagline{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.3;color:var(--gold)}
.eyebrow{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 14px}
.measure{max-width:64ch}
.center{text-align:center}
.center .measure{margin-inline:auto}
/* spacing utilities (replace one-off inline styles) */
.mt-20{margin-top:20px}.mt-26{margin-top:26px}.mt-28{margin-top:28px}.mt-30{margin-top:30px}.mt-34{margin-top:34px}.mb-34{margin-bottom:34px}
.h2-sm{font-size:1.6rem}.h2-md{font-size:1.75rem}
.btn-row--center{justify-content:center}
.hp{position:absolute;left:-9999px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:64px 0}
@media(min-width:900px){.section{padding:104px 0}}
.section--tight{padding-block:44px}
@media(min-width:900px){.section--tight{padding-block:72px}}
.band-ink{background:var(--ink);color:var(--cream)}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--white)}
.band-ink a{color:var(--cream)}
.band-ink .eyebrow{color:var(--champagne)}
.band-green{background:var(--green);color:var(--cream)}
.band-green h2,.band-green h3{color:var(--white)}
.band-green a{color:var(--white)}
.band-green .eyebrow{color:var(--cream)}
.band-tint{background:var(--cream-2)}
/* Included-with-the-room block. springsvenue.com is the only one of the six researched
   sites that carries this on its home page, and it runs six short items with inline
   icons; knotandpine's dedicated amenities page uses the same icon-per-item treatment in
   a 4-across grid and publishes its own six-item digest. Six with icons it is. */
.included{display:grid;gap:26px 30px;list-style:none;margin:0;padding:0}
.included li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:4px;align-items:start}
.included .inc-ico{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--champagne);border-radius:50%;color:var(--green)}
.included .inc-ico svg{width:17px;height:17px}
.included strong{font-family:var(--serif);font-size:1.22rem;font-weight:600;
  line-height:1.25;color:var(--ink)}
.included li > span:not(.inc-ico){font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
@media(min-width:640px){.included{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.included{grid-template-columns:repeat(3,1fr);gap:34px 40px}}
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;
  border-radius:0;font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-primary:hover{color:var(--white)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{color:var(--ink)}
.band-ink .btn-primary{background:var(--white);color:var(--ink);border-color:var(--white)}
.band-ink .btn-primary:hover{color:var(--ink)}
.band-ink .btn-outline,.band-green .btn-outline{color:var(--cream);border-color:var(--cream)}
.band-ink .btn-outline:hover,.band-green .btn-outline:hover{color:var(--white)}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-call{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--sans);font-weight:500;text-decoration:none;letter-spacing:.02em}
.link-call svg{width:18px;height:18px;flex:none}
.link-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--sans);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;text-decoration:none;color:var(--ink)}
.link-more::after{content:"";width:22px;height:1px;background:currentColor;transition:transform .2s var(--ease)}
.link-more:hover{color:var(--gold)}
.link-more:hover::after{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:1px solid rgba(176,141,87,.35)}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:18px;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);flex:none;height:100%}
.brand img{height:43px;width:auto}
@media(min-width:900px){.brand img{height:72px}}
.brand-mark{font-family:var(--serif);font-weight:600;font-size:1.45rem;letter-spacing:.02em;line-height:1;white-space:nowrap}
.brand-mark em{font-style:italic;font-weight:400;color:var(--gold);margin:0 .12em}
@media(min-width:900px){.brand-mark{font-size:1.75rem}}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:0;position:relative;
  font-weight:500;font-size:.95rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);
  transition:opacity .2s var(--ease)}
.site-nav a:hover{color:var(--gold)}
.site-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{min-height:46px;padding:0 24px;font-size:.8rem}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;padding:12px;
  margin-right:-8px;background:transparent;border:0;cursor:pointer;border-radius:8px}
.nav-toggle .bar{display:block;width:100%;height:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-open .nav-toggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle .bar:nth-child(2){opacity:0}
.nav-open .nav-toggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:899px){
  .header-inner{gap:10px}
  .nav-toggle{margin-left:auto}
  .header-cta{display:none}
  .site-nav{position:fixed;inset:var(--header-h) 0 0 0;background:var(--ink);margin:0;padding:28px var(--gutter) 40px;
    overflow-y:auto;transform:translateX(100%);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s linear .3s}
  .nav-open .site-nav{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav a{display:flex;color:var(--cream);font-family:var(--sans);font-size:1.25rem;font-weight:500;letter-spacing:.04em;min-height:58px;padding:0 6px;border-radius:0;
    border-bottom:1px solid rgba(253,245,238,.12)}
  .site-nav a::after{display:none}
  .site-nav a[aria-current="page"]{background:transparent;color:var(--champagne)}
  .site-nav .nav-call{margin-top:14px}
  .site-nav .nav-call a{font-family:var(--sans);font-size:1rem;font-weight:500;min-height:48px;border:0;justify-content:center;gap:10px;color:var(--champagne)}
  .site-nav .nav-cta{margin-top:26px}
  .site-nav .nav-cta .btn{width:100%;background:var(--white);color:var(--ink);border-color:var(--white)}
  .nav-open body,.nav-open{overflow:hidden}
}
@media(min-width:900px){.nav-toggle{display:none}.site-nav .nav-cta,.site-nav .nav-call{display:none}}

/* real photos in fixed-ratio frames (same boxes the placeholders used) */
.photo{overflow:hidden;border-radius:var(--radius);background:var(--cream-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--4x3{aspect-ratio:4/3}.photo--1x1{aspect-ratio:1/1}.photo--3x4{aspect-ratio:3/4}
.card .photo{border-radius:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(82svh,680px);
  display:grid;align-items:center;background:var(--ink);color:var(--white);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,13,13,.30) 0%,rgba(13,13,13,.42) 45%,rgba(13,13,13,.78) 100%)}
/* mobile-first: the phone crop puts the text over more of the bright ceiling, so it
   carries the heavier gradient it always had */
@media(max-width:899px){.hero-overlay{background:linear-gradient(180deg,rgba(13,13,13,.36) 0%,rgba(13,13,13,.5) 45%,rgba(13,13,13,.84) 100%)}}
.hero-content{position:relative;z-index:2;padding:64px 0;text-align:center}
@media(min-width:900px){.hero{min-height:clamp(600px,78vh,900px)}.hero-content{padding:88px 0}}
.hero h1{color:var(--white);margin-bottom:10px;font-size:clamp(3rem,9vw,6rem)}
.hero .btn-row{justify-content:center}
.hero .link-call{color:var(--cream)}
.hero .link-call:hover{color:var(--white)}

/* page hero (interior pages) */
.page-hero{padding:56px 0 40px;border-bottom:1px solid rgba(176,141,87,.35)}
@media(min-width:900px){.page-hero{padding:88px 0 64px}}
.page-hero .tagline{margin-top:6px}

/* ---------- highlights ---------- */
.highlights{display:grid;gap:18px 32px;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0}
@media(min-width:900px){.highlights{grid-template-columns:repeat(3,1fr);gap:26px 40px}}
.highlights li{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.55rem);font-weight:600;line-height:1.25;color:var(--ink);
  padding-top:14px;border-top:1px solid var(--champagne)}
.highlights li small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--green);margin-top:5px;letter-spacing:.02em}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:700px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.gallery-grid a{display:block;border-radius:var(--radius);overflow:hidden}
.gallery-grid img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.gallery-grid a:hover img{transform:scale(1.03)}
/* The preview breaks the wrap and runs edge to edge, tight and square-cornered, the way
   wadleyfarms, castletonfarms and theaddisongrove present theirs. Declared AFTER
   .gallery-grid on purpose: both are single-class selectors, so source order is what
   decides, and placing these first meant the grid's 12/16px gap and 4px radius won. */
.gallery-band{width:100vw;margin-left:calc(50% - 50vw);gap:6px}
.gallery-band a{border-radius:0}
@media(min-width:700px){.gallery-band{gap:8px}}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(13,13,13,.94);display:grid;place-items:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.lightbox.is-open{opacity:1;visibility:visible;transition-delay:0s}
.lightbox img{max-height:86vh;max-width:min(1200px,94vw);width:auto;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:transparent;border:0;color:var(--cream);cursor:pointer;
  width:52px;height:52px;display:grid;place-items:center;border-radius:999px}
.lightbox-close{top:16px;right:16px}
.lightbox-prev{left:10px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:10px;top:50%;transform:translateY(-50%)}
.lightbox button svg{width:28px;height:28px}

/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid rgba(176,141,87,.32);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card--flush{padding:0;overflow:hidden}
.card--flush .card-body{padding:24px 26px 28px}

/* pricing */
.year-switch{display:inline-flex;border:1px solid var(--ink);border-radius:0;padding:4px;gap:4px;background:var(--white)}
.year-switch button{min-width:96px;min-height:44px;border:0;border-radius:999px;background:transparent;font-family:var(--sans);
  font-weight:500;letter-spacing:.08em;font-size:.9rem;cursor:pointer;color:var(--ink);border-radius:0}
.year-switch button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
/* Season is the outer grouping and the rental block the inner one — the arrangement four
   of the eight venue pricing pages in design-brief 21 use. Every block carries the same two
   day ranges, so the three cards in a season come out the same height without being forced. */
.season-block{margin-top:52px}
.season-block:first-of-type{margin-top:0}
.season-head{text-align:center;margin-bottom:28px}
.season-head h3{margin-bottom:6px}
.price-cards{display:grid;gap:24px}
@media(min-width:700px){.price-cards{grid-template-columns:1fr 1fr;gap:28px}}
@media(min-width:1050px){.price-cards{grid-template-columns:repeat(3,1fr);gap:28px}}
.price-card{background:var(--white);border:1px solid rgba(176,141,87,.4);border-radius:var(--radius);padding:28px 22px 24px;box-shadow:var(--shadow)}
@media(min-width:560px){.price-card{padding:34px 30px 30px}}
.season-meta{font-family:var(--sans);font-size:.9rem;color:var(--green);letter-spacing:.06em;text-transform:uppercase;margin:0}
.price-card h4{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;line-height:1.3}
/* Flex rather than grid so a day range and its rate sit on one line when the card is wide
   enough and the rate drops to its own line when it is not. A grid column shrank the day
   instead and broke "Monday - Thursday" across two lines, which is the one thing every
   venue researched avoids: they all keep a day range intact. */
.price-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;align-items:baseline;padding:18px 0;border-top:1px solid var(--champagne)}
.price-row:last-of-type{border-bottom:1px solid var(--champagne)}
.price-row .day{font-family:var(--sans);font-weight:500;color:var(--ink);white-space:nowrap}
.price-row .amt{font-family:var(--serif);font-weight:600;font-size:2.1rem;line-height:1;color:var(--ink);text-align:right;margin-left:auto}
/* A missing price must be impossible to mistake for a rate, so it is deliberately
   off-palette and hazard-striped. Nothing else on the site looks like this, and it comes
   out the moment the numbers arrive. */
.tba{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;color:#0D0D0D;background:#FFE800;border:2px dashed #C81E1E;
  padding:9px 10px;white-space:nowrap;text-align:center}
/* The photograph sits immediately before the rates, where riverbridge, blocvenue,
   castletonfarms and sleepyridge all put theirs. Full bleed, but the frame flattens as the
   viewport widens so the rates stay near the top of the screen instead of being pushed a
   whole fold down. */
/* The rates section keeps its own bottom padding but loses most of the top, so the photo and
   the first rates read as one unit rather than two separated blocks. */
.pricing-photo + .section{padding-top:clamp(34px,4vw,54px)}
.pricing-photo{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--cream-2)}
.pricing-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* 2:1 keeps three quarters of the source height, and biasing the window up to 40% puts
   that window at 10%-85% of the frame: the raised sparklers on the left survive at the
   top and the couple's shoes survive at the bottom. A shallower frame loses one or the
   other. Below 700px the frame is the source's own 3:2 and nothing is cropped at all. */
@media(min-width:700px){.pricing-photo{aspect-ratio:2/1}}
/* Grid, not multi-column. With `columns` the items flowed down one column and into the
   next, so the rules under them never lined up across columns and lines of different
   length sat at different heights. Grid rows are uniform, so every line aligns. */
.amenities{display:grid;grid-template-columns:1fr;column-gap:40px;list-style:none;margin:0;padding:0}
@media(min-width:700px){.amenities{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.amenities{grid-template-columns:repeat(3,1fr)}}
.amenities li{display:flex;align-items:center;min-height:52px;padding:10px 0 10px 26px;border-bottom:1px solid rgba(176,141,87,.35);position:relative;color:var(--ink)}
.amenities li::before{content:"";position:absolute;left:2px;top:50%;margin-top:-5px;width:12px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.note{font-size:.95rem;color:var(--green);border-left:2px solid var(--champagne);padding:6px 0 6px 16px;margin:0}

/* services (add-ons) */
/* align-items:start, so a card that opens grows on its own. With the grid stretching, one
   open panel pulled every card in the row to the same new height and the other three
   showed a matching void, which read as all four opening at once. The buttons are kept on
   one line by levelling the description above them instead. */
.addon-grid{display:grid;gap:22px;align-items:start}
@media(min-width:640px){.addon-grid{grid-template-columns:1fr 1fr}}
/* Four across from 1080 rather than 1000. Below that the cards are narrow enough that the
   longest description runs to four lines while the others run to three, and no min-height
   can level that without leaving a hole at every other width. */
@media(min-width:1080px){.addon-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
/* The card body is a column and the toggle is pushed to its foot, so all four View
   Details sit on one line however long the description above them runs. */
.addon{display:flex;flex-direction:column}
.addon .card-body{display:flex;flex-direction:column;flex:1}
.addon .card-body > p{margin-bottom:16px;min-height:3.3em}
@media(min-width:1080px){.addon .card-body > p{min-height:4.95em}}
/* The panel is ordered above the toggle so the button stays at the foot of the card when
   it is open. DOM order is unchanged - button then panel - so a screen reader still meets
   the trigger before the region it controls, and the panel is not focusable, so nothing
   moves in the focus order. */
.addon .addon-detail{order:1}
.addon .addon-toggle{order:2;margin-top:auto}
.addon-toggle{background:none;border:0;padding:0;cursor:pointer;font-size:.82rem;font-family:var(--sans)}
.addon-detail{padding-top:4px}
.addon-detail[hidden]{display:none}
.addon-detail p{font-size:.95rem;line-height:1.55;color:var(--ink-soft);margin:0}

/* tours */
.tour-grid{display:grid;gap:24px}
@media(min-width:900px){.tour-grid{grid-template-columns:1fr 1fr;gap:32px}}
.tour{display:flex;flex-direction:column}
.tour .dur{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:12px}
.tour .dur::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--champagne)}
.tour p{flex:1}
.tour .btn{align-self:flex-start}
@media(max-width:899px){.tour .btn{align-self:stretch}}

/* reviews */
.reviews{display:grid;gap:18px}
@media(min-width:700px){.reviews{grid-template-columns:1fr 1fr;gap:22px}}
@media(min-width:1000px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{display:flex;flex-direction:column;gap:14px;background:var(--white);border:1px solid rgba(176,141,87,.35);padding:26px 24px 22px;
  color:var(--ink-soft);text-decoration:none;box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.review:hover{transform:translateY(-2px);color:var(--ink-soft)}
.review .stars{display:inline-flex;gap:3px;color:var(--gold)}
.review .stars svg{width:16px;height:16px}
.review-text{font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--ink)}
.review-text::before{content:"\201C"}.review-text::after{content:"\201D"}
/* Every card matches: the quote takes the slack, then the photo strip and the name
   sit together at the foot of the card. Cards with no photos keep their own auto
   margin on .review-meta, so they stay bottom-aligned as before. */
.review-photos{display:flex;gap:8px;margin-top:auto}
.review-photos + .review-meta{margin-top:0}
.review-photos img{width:88px;height:88px;object-fit:cover;flex:none}
.review-meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:.92rem}
.review-meta strong{font-weight:500;color:var(--ink)}
.review-meta em{font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
/* the Google label sits on its own line under the name, which read better than
   crowding all three onto one row */
.review-meta small{flex:0 0 100%;font-size:.8rem;color:var(--green);margin:2px 0 0}

/* event spaces */
.spaces{display:grid;gap:22px}
@media(min-width:700px){.spaces{grid-template-columns:1fr 1fr;gap:26px}}
.spaces h3{margin-bottom:8px}

/* faq */
.faq{border-top:1px solid var(--champagne)}
.faq-item{border-bottom:1px solid var(--champagne)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;
  background:transparent;border:0;padding:20px 0;cursor:pointer;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1.25}
.faq-q .faq-icon{flex:none;width:28px;height:28px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);
  font-family:var(--sans);font-size:1.1rem;font-weight:400;transition:transform .25s var(--ease)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-a{padding:0 0 20px;max-width:64ch}
.faq-a[hidden]{display:none}

/* contact */
.contact-grid{display:grid;gap:40px}
@media(min-width:960px){.contact-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.contact-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.contact-list .ico{width:44px;height:44px;border-radius:50%;border:1px solid var(--champagne);display:grid;place-items:center;color:var(--gold)}
.contact-list .ico svg{width:20px;height:20px}
.contact-list address{font-style:normal}
.contact-list strong{display:block;font-family:var(--sans);font-weight:500;color:var(--ink);letter-spacing:.02em}
.contact-list a{text-decoration:none}
.map{border:1px solid rgba(176,141,87,.4);border-radius:var(--radius);overflow:hidden;background:var(--cream-2);margin-top:28px}
.map iframe{width:100%;height:300px;border:0}
.form-card{background:var(--white);border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(176,141,87,.3);padding:28px 22px}
@media(min-width:700px){.form-card{padding:38px 36px}}
.form-card h2{font-size:clamp(1.7rem,3vw,2.2rem)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-family:var(--sans);font-weight:500;font-size:.9rem;color:var(--ink);letter-spacing:.02em}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1px solid rgba(13,13,13,.28);border-radius:var(--radius);min-height:50px;padding:10px 14px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.field-row{display:grid;gap:0 16px}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.field[hidden]{display:none}
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:6px 0 22px;font-size:.92rem;line-height:1.5}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.form-note{text-align:center;font-size:.92rem;margin:18px 0 0}
.form-status{margin-top:16px;padding:14px 16px;border-radius:var(--radius);font-size:.95rem;border:1px solid transparent}
.form-status[hidden]{display:none}
.form-status.is-error{background:#FBEDE6;border-color:#C9662E;color:#6E2E0C}
.form-status.is-ok{background:#EAF0E7;border-color:var(--green);color:var(--green)}
.legal-links{font-size:.88rem;color:var(--green);margin-top:22px;text-align:center}
.legal-links a{margin:0 6px}

/* about */
.about-quote{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.5;color:var(--ink);font-weight:400}
.about-quote strong{font-weight:600}

/* cta band */
/* ---- home restructure, 2026-09-17 --------------------------------------------
   Hero: the tagline is now the headline, set in the tagline's own serif italic. The
   keyword line stays INSIDE the h1 as a second span, so the page still has one h1 and
   it still carries Payson, Utah and wedding venue. */
.hero h1{margin-bottom:0;font-size:inherit}
.h1-lead{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(3.7rem,10.8vw,7.8rem);line-height:1;color:var(--white)}
.h1-kw{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:clamp(1.05rem,2.5vw,1.55rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);margin-top:24px}

/* The overlay is back, so the text needs no plate of its own. The only thing kept from
   the undimmed experiment is the air between the keyword line and the buttons, which
   were colliding before it. */
/* The buttons sit toward the foot of the hero rather than tucked under the text. The
   whole group is still centred, so the gap does the work and the hero does not go
   top-heavy the way a top-aligned block would. */
.hero .btn-row{margin-top:clamp(64px,13vh,132px)}

/* First section after the hero. knotandpine, thewildoakvenue and wadleyfarms all put a
   single centred column here with no photo, so the words carry it. */
/* ---- Opening story section, treatment from the venue research -----------------
   knotandpine.com frames this section's photo as an arch with a white mat and leaves
   the section itself on the plain background; castletonfarms.com and wadleyfarms.com
   reserve the tinted band for the NEXT section rather than this one. So the design
   here comes from the frame and the air around it, not from a panel behind the text. */
.sell{padding-block:76px}
.sell-inner{max-width:60ch;position:relative}
/* a hairline over the heading, the small rule these sites use to open a story block */
.sell-inner h2::before,.about-story h2::before{content:"";display:block;width:64px;height:1px;
  background:var(--champagne);margin-bottom:22px}
/* Type scale carries this column, the way it does on every site studied. The heading
   steps up to roughly castletonfarms' 64px and the body steps down, widening the jump
   between them; the closing link keeps the uppercase tracking wadleyfarms uses. */
.sell-inner h2,.about-story h2{font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.04;
  letter-spacing:-.005em;margin-bottom:24px}
.sell-inner .lede{font-size:1.14rem;line-height:1.65}
.sell-inner p:not(.lede){font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.sell-inner .link-more{margin-top:14px}
@media(min-width:900px){
  .sell-inner h2,.about-story h2{margin-bottom:28px}
  .sell-inner .lede{font-size:1.2rem}
}
.sell-photo-frame{position:relative}
/* the arch: an ellipse across the top two corners, so it scales with the column */
.sell-photo-frame .photo{border-radius:50% 50% var(--radius) var(--radius) / 26% 26% var(--radius) var(--radius);
  border:10px solid var(--white);box-shadow:var(--shadow)}
@media(min-width:900px){
  .sell{padding-block:120px}
  .sell-inner h2::before{margin-bottom:26px}
  .sell-photo-frame .photo{border-width:14px}
}
.sell-inner h2{margin-bottom:18px}
.sell-inner p{margin-bottom:16px}
.sell-inner .link-more{display:inline-block;margin-top:6px}
/* the photo sits under the centred copy and runs wider than the text measure, so the
   room itself closes the section rather than a line of type */

/* Reviews: three, then the rest on request. */
.reviews--more{margin-top:26px}
/* .reviews sets display:grid, which overrides the UA rule for [hidden] - without
   this the collapsed cards stay on screen. Same guard as .faq-a and .field. */
.reviews[hidden]{display:none}
.review-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* The tour band moved from ink to green, so the primary button needs the same lift it
   had on ink, and champagne text does not clear AA on this green - 2.91:1 - so the
   eyebrow and tagline take cream instead, at 8.35:1. */
.band-green .btn-primary{background:var(--white);color:var(--ink);border-color:var(--white)}
.band-green .btn-primary:hover{color:var(--ink)}
.band-green .link-call{color:var(--cream)}
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(2.1rem,5vw,3.6rem);max-width:20ch;margin-inline:auto}
/* One line from 900px. It was the 20ch measure that broke it after "in", not the
   width - measured, the line needs 681px of the 1200px available with the webfont and
   888px with the Georgia fallback, so lifting the cap is enough on its own. No nowrap:
   with it, a future copy change or a wider fallback would be cropped silently by
   html{overflow-x:clip} instead of simply wrapping. */
@media(min-width:900px){.cta-band h2{max-width:none}}
/* the tour heading is two deliberate lines, not a wrap */
.cta-band h2 .cta-line{display:block}
.cta-band h2 .cta-line + .cta-line{margin-top:.12em}
.cta-band .tagline{color:var(--champagne);margin:0 auto 30px}
.band-green.cta-band .tagline{color:var(--cream)}
.cta-band .btn-row{justify-content:center}
.cta-band .link-call{color:var(--cream)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--cream);padding:56px 0 28px;font-size:.95rem}
.footer-grid{display:grid;gap:36px}
@media(min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:48px}}
.site-footer .brand-mark{color:var(--white);font-size:1.7rem}
.site-footer .brand-mark em{color:var(--champagne)}
.footer-tag{font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:1.15rem;margin:10px 0 0}
.site-footer h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);font-weight:500;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer a{color:var(--cream);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.site-footer a:hover{color:var(--champagne)}
.site-footer address{font-style:normal;line-height:1.5;display:grid;gap:2px;margin-top:14px}
.social{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--champagne);border-radius:0;color:var(--cream);text-decoration:none;min-width:44px}
.social a:hover{color:var(--champagne)}
.social svg{width:20px;height:20px}
main .social a{color:var(--ink);border-color:var(--gold)}
main .social a:hover{color:var(--gold)}
main .social{margin-top:6px}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(253,245,238,.14);display:flex;flex-wrap:wrap;gap:8px 24px;
  justify-content:space-between;font-size:.85rem;color:rgba(253,245,238,.7)}
.footer-bottom a{color:rgba(253,245,238,.85)}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:0 18px}
.footer-bottom p{display:flex;align-items:center;gap:.3em;min-height:44px;margin:0}

/* ---------- 404 ---------- */
.nf{min-height:60vh;display:grid;place-items:center;text-align:center}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}