/* ==========================================================================
   VIA NIA — design tokens & system
   Palette, type and shape are locked per brand brief. One dominant colour
   per section, one accent max, grain on flat colour only, milestone shapes
   instead of arches. Keep the type unhurried.
   ========================================================================== */

:root{
  /* --- palette (locked) --- */
  --green:        #2B3D2A; /* primary, deep pine */
  --green-ink:    #202D1F; /* darker, for text-on-sand where extra contrast needed */
  --olive-light:  #A9BE94; /* pistachio */
  --olive-deep:   #5B6B45;
  --gold:         #C79A4B;
  --terracotta:   #B15C3C;
  --sand:         #F0EBDA;
  --sand-2:       #F1ECDD;
  --cream:        #FAF7EC;
  --white:        #FFFFFF;

  /* semantic */
  --ink:          var(--green-ink);
  --ink-soft:     #4B5A43;
  --border-soft:  rgba(43,61,42,0.14);

  /* type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --sans:  "Work Sans", -apple-system, "Segoe UI", sans-serif;

  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2.2rem, 1.7rem + 2vw, 3.2rem);
  --step-4: clamp(2.8rem, 2rem + 3.4vw, 4.6rem);
  --step-5: clamp(3.6rem, 2.2rem + 6vw, 7rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-max: 1180px;
  --radius: 22px;

  --ease-unhurried: cubic-bezier(.22,.61,.16,1);
  --ease-out-strong: cubic-bezier(.23,1,.32,1);
  --dur-slow: 900ms;
  --dur-med: 480ms;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1.1em; }
.italic{ font-style: italic; font-weight: 400; }

:focus-visible{
  outline: 2.5px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section{ padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.section--tight{ padding: clamp(2.2rem, 5vw, 4rem) 0; }

/* section tone backgrounds -------------------------------------------- */
.tone-green   { background: var(--green);   color: var(--sand-2); }
.tone-olive   { background: var(--olive-deep); color: var(--sand-2); }
.tone-sand    { background: var(--sand);    color: var(--ink); }
.tone-cream   { background: var(--cream);   color: var(--ink); }
.tone-terracotta{ background: var(--terracotta); color: var(--cream); }
.tone-gold    { background: var(--gold); color: var(--green-ink); }

.tone-green h1,.tone-green h2,.tone-green h3{ color: var(--sand-2); }
.tone-olive h1,.tone-olive h2,.tone-olive h3{ color: var(--sand-2); }
.tone-terracotta h1,.tone-terracotta h2,.tone-terracotta h3{ color: var(--cream); }

/* ---------------------------------------------------------------- grain
   Fine paper-noise, flat colour fills only. One texture, reused. Applied
   as a layered ::after so it never sits over text or photography. */
.grain{ position: relative; isolation:isolate; }
.grain::before{
  content:"";
  position:absolute; inset:0; z-index:-1; /* behind all normal-flow content: flat colour only, never text/cards/photos */
  pointer-events:none;
  opacity: .1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.tone-green.grain::before,.tone-olive.grain::before,.tone-terracotta.grain::before{ opacity:.14; mix-blend-mode: overlay; }

/* ---------------------------------------------------------------- emboss
   Restrained: buttons, the mark, and dividers only — soft inset shadow,
   pressed-into-material rather than floating. No outer drop shadows. */
.emboss{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -3px 6px rgba(0,0,0,.22);
}
.emboss-deep{
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.28),
    inset 0 -1px 1px rgba(255,255,255,.12);
}

/* ---------------------------------------------------------------- eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: 1.1em;
}
.tone-green .eyebrow,.tone-olive .eyebrow{ color: var(--gold); }
.tone-terracotta .eyebrow{ color: var(--cream); opacity:.85; }
.eyebrow::before{ content:""; width: 22px; height: 1px; background: currentColor; opacity:.7; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  padding: .95em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform 200ms var(--ease-out-strong), background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: scale(.97); transition-duration: 120ms; }
.btn-primary{
  background: var(--terracotta); color: var(--cream);
}
.btn-primary:hover{ background: #9c4f31; }
.tone-green .btn-primary, .tone-olive .btn-primary{ background: var(--gold); color: var(--green-ink); }
.tone-green .btn-primary:hover, .tone-olive .btn-primary:hover{ background:#d9ac5c; }
.tone-gold .btn-primary{ background: var(--green); color: var(--sand-2); }
.btn-ghost{
  background: transparent; border-color: currentColor; color: inherit;
}
.btn-ghost:hover{ background: rgba(0,0,0,.06); }
.tone-green .btn-ghost:hover,.tone-olive .btn-ghost:hover,.tone-terracotta .btn-ghost:hover{ background: rgba(255,255,255,.08); }

@media (hover: none) or (pointer: coarse){
  .btn:hover{ transform:none; }
}

/* ---------------------------------------------------------------- header */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: var(--sand);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}
.brand{ display:flex; align-items:center; gap:.65em; color: var(--green); }
.wordmark{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}

.nav-links{ display:flex; align-items:center; gap: clamp(1rem,2vw,2.1rem); font-size:.94rem; font-weight:500; }
.nav-links a{ position:relative; padding: .3em 0; color: var(--ink-soft); transition: color 150ms ease; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--terracotta); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--terracotta); border-radius:2px;
}
/* underline grows in from the left on hover — skipped on the active page, which already has a permanent one */
.nav-links a:not([aria-current="page"])::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--terracotta); border-radius:2px;
  transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine){
  .nav-links a:not([aria-current="page"]):hover::after{ transform: scaleX(1); }
}
.nav-cta{ margin-left:.4rem; }
.nav-cta .btn-primary{ background: #5B7FA6; color: var(--cream); padding: .95em 2.3em; }
.nav-cta .btn-primary:hover{ background: #4C6C90; }

.nav-toggle{ display:none; transition: transform 120ms var(--ease-out-strong); }
.nav-toggle:active{ transform: scale(.9); }

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset: 78px 0 0 0; background: var(--sand);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding: 2rem var(--gutter); gap: 1.4rem; font-size: 1.15rem;
    transform: translateX(100%); transition: transform .35s var(--ease-unhurried);
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.5em; z-index:41;
  }
  .nav-toggle span{ width:24px; height:2px; background: var(--green); border-radius:2px; transition: transform .3s ease, opacity .3s ease; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ---------------------------------------------------------------- footer */
.site-footer{ padding: clamp(3rem,7vw,5rem) 0 2.5rem; }
.footer-top{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.6rem; border-bottom: 1px solid rgba(241,236,221,.18);
}
.footer-top h3{ font-size: 1.5rem; margin-bottom:.6em; }
.footer-top .wordmark{ font-size: 1.5rem; }
.footer-links{ display:flex; flex-direction:column; gap:.65em; }
.footer-links a:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top: 1.6rem; font-size: .85rem; opacity:.75;
}
@media (max-width: 760px){
  .footer-top{ grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom{ flex-direction: column; align-items:flex-start; }
}

/* ---------------------------------------------------------------- hero & oversized type
   The one editorial "oversized crop" moment: huge Fraunces type used as
   background texture, not meant to be read in full. */
.hero{
  position: relative; overflow:hidden;
  min-height: min(92vh, 820px);
  display:flex; align-items:center;
}
.hero-type{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; pointer-events:none;
}
.hero-type span{
  font-family: var(--serif); font-weight:600; font-style:italic;
  font-size: min(46vw, 620px);
  line-height:1; white-space:nowrap;
  color: rgba(241,236,221,.07);
  transform: translateX(2%);
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items:center;
  padding: clamp(3.5rem,10vh,5rem) 0;
}
.hero h1{ font-size: var(--step-5); color: var(--sand-2); }
.hero h1 .accent{ color: var(--gold); font-style:italic; font-weight:500; }
.hero-lede{ max-width: 34em; font-size: var(--step-1); color: var(--olive-light); }
.hero-cta-row{ display:flex; gap:1rem; margin-top: 1.6rem; flex-wrap:wrap; }

.hero-figure{ position:relative; }
.hero-figure .stone-frame{ position:relative; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-figure{ order:-1; max-width: 320px; margin: 0 auto; }
}

/* reveal-on-load stagger for hero text (single deliberate motion moment) */
.reveal-up{ opacity:0; transform: translateY(18px); }
.is-ready .reveal-up{
  opacity:1; transform:none;
  transition: opacity var(--dur-slow) var(--ease-unhurried), transform var(--dur-slow) var(--ease-unhurried);
}
.is-ready .reveal-up:nth-child(1){ transition-delay: .05s; }
.is-ready .reveal-up:nth-child(2){ transition-delay: .22s; }
.is-ready .reveal-up:nth-child(3){ transition-delay: .4s; }
.is-ready .reveal-up:nth-child(4){ transition-delay: .58s; }
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; }
}

/* scroll reveal for the rest of the page */
.on-scroll{ opacity:0; transform: translateY(22px); transition: opacity 550ms var(--ease-out-strong), transform 550ms var(--ease-out-strong); }
.on-scroll.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .on-scroll{ opacity:1; transform:none; } }

/* cards in the same row cascade in rather than popping together — capped so a
   long grid never feels slow to finish revealing */
.grid > .on-scroll:nth-child(1){ transition-delay: 0ms; }
.grid > .on-scroll:nth-child(2){ transition-delay: 60ms; }
.grid > .on-scroll:nth-child(3){ transition-delay: 120ms; }
.grid > .on-scroll:nth-child(n+4){ transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce){
  .grid > .on-scroll{ transition-delay: 0ms !important; }
}

/* ---------------------------------------------------------------- milestone mark & crop shapes */
.milestone-mark path{ fill: currentColor; }
.milestone-mark text{ font-family: var(--serif); fill: currentColor; }

/* A "milestone" shape (flat sides, semicircular top) that scales correctly at
   any width: top corner radius = 50% width horizontally, and (half-width /
   height) vertically, so the cap is a true semicircle whatever size this
   renders at. Percentage-based on purpose — a fixed clip-path in px broke
   the moment the box wasn't exactly the size it was authored at. */
.stone-frame{
  width: 100%; max-width: 340px; aspect-ratio: 3/4;
  border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
  overflow: hidden;
  background: var(--olive-deep);
}
.stone-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.stone-crop{
  aspect-ratio: 3/4; width:100%; overflow:hidden;
  border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
  position:relative; background: var(--olive-deep);
}
.stone-crop img{ width:100%; height:100%; object-fit:cover; }
.stone-crop .numeral{
  position:absolute; top: 10%; left:50%; transform:translateX(-50%);
  font-family: var(--serif); font-style:italic; color: rgba(250,247,236,.85);
  font-size: 1.1rem; letter-spacing:.06em;
}

/* ---------------------------------------------------------------- cards */
.grid{ display:grid; gap: clamp(1.4rem,3vw,2.2rem); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px){ .grid-2,.grid-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--cream); border-radius: var(--radius);
  padding: clamp(1.6rem,3vw,2.2rem);
  border: 1px solid var(--border-soft);
}
.card--dark{ background: var(--green); color: var(--sand-2); border-color: transparent; }
.card--dark h3{ color: var(--sand-2); }

.experience-card{
  display:flex; flex-direction:column; gap: 1.1rem;
  padding: clamp(1.8rem,3vw,2.4rem);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--cream);
  transition: transform 260ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine){
  .experience-card:hover{ transform: translateY(-4px); }
}
.experience-card .price{
  font-family: var(--serif); font-style:italic; font-size:1.05rem; color: var(--terracotta);
}
.experience-card .meta{ font-size:.85rem; letter-spacing:.03em; color: var(--ink-soft); text-transform:uppercase; }
.experience-card h3{ font-size: var(--step-2); margin: 0; }
.experience-card--figure{ border-radius: calc(var(--radius) - 6px); overflow:hidden; aspect-ratio: 16/10; margin-bottom:.4rem; }
.experience-card--figure img{ width:100%; height:100%; object-fit:cover; transition: transform 450ms var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine){
  .experience-card:hover .experience-card--figure img{ transform: scale(1.04); }
}

/* ---------------------------------------------------------------- gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.gallery-grid figure{ margin:0; overflow:hidden; border-radius: 14px; aspect-ratio: 4/5; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform 450ms var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine){
  .gallery-grid figure:hover img{ transform: scale(1.05); }
}
.gallery-grid figure:nth-child(3n+1){ grid-row: span 2; aspect-ratio: 4/9; }
@media (max-width: 760px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid figure:nth-child(3n+1){ grid-row: span 1; aspect-ratio: 4/5; }
}

/* ---------------------------------------------------------------- testimonials */
.testi-card{
  padding: clamp(1.8rem,3vw,2.4rem);
  border-radius: var(--radius);
  background: rgba(241,236,221,.06);
  border: 1px solid rgba(241,236,221,.18);
}
.tone-sand .testi-card, .tone-cream .testi-card{ background: var(--cream); border-color: var(--border-soft); }
.testi-card p{ font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height:1.5; }
.testi-card cite{ display:block; font-family: var(--sans); font-style:normal; font-size:.85rem; opacity:.75; margin-top:.6rem; }

/* a guest photo, sized and framed to sit in the same grid as the quote
   cards rather than floating on its own as an afterthought */
.testi-photo{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(241,236,221,.18);
  aspect-ratio: 1 / 1;
}
.testi-photo img:first-child{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.testi-photo-badge{
  position: absolute; bottom: 14px; right: 14px;
  width: 40px; height: 40px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.testi-photo figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding: 1.6rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(32,45,31,.75), transparent);
  color: var(--sand-2);
  font-size: .82rem;
  letter-spacing: .02em;
}

.flower-accent{ display:block; margin-inline:auto; }

/* a landscape guest photo used as a full-width break between rows of quotes */
.testi-banner{
  margin: 2.4rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(241,236,221,.18);
  aspect-ratio: 21/8;
}
.testi-banner img:first-child{ width:100%; height:100%; object-fit:cover; display:block; }
.testi-banner .testi-photo-badge{ bottom:16px; right:16px; }
.testi-banner figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding: 2.2rem 1.4rem 1rem;
  background: linear-gradient(to top, rgba(32,45,31,.7), transparent);
  color: var(--sand-2);
  font-size: .85rem;
  letter-spacing: .02em;
}
@media (max-width: 700px){ .testi-banner{ aspect-ratio: 4/5; } }

/* ---------------------------------------------------------------- lists / problems */
.check-list{ display:grid; gap: .9rem; }
.check-list li{ display:flex; gap:.9em; align-items:flex-start; font-size: 1.02rem; }
.check-list li::before{
  content:""; flex-shrink:0; width:9px; height:9px; margin-top:.5em; border-radius:2px;
  background: var(--terracotta); transform: rotate(45deg);
}
.check-list li > *{ flex: 1; } /* the text wrapper, not the ::before bullet */

/* ---------------------------------------------------------------- forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form-grid .full{ grid-column: 1 / -1; }
@media (max-width:700px){ .form-grid{ grid-template-columns: 1fr; } }
label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.5em; color: var(--ink-soft); }
input,textarea,select{
  width:100%; font-family: var(--sans); font-size:1rem; padding: .85em 1em;
  border-radius: 12px; border: 1px solid var(--border-soft); background: var(--cream); color: var(--ink);
  transition: border-color 150ms ease;
}
input:focus,textarea:focus,select:focus{ border-color: var(--terracotta); }
textarea{ min-height: 130px; resize: vertical; }
.form-note{ font-size:.85rem; opacity:.7; margin-top: 1rem; }

/* ---------------------------------------------------------------- divider motif */
.line-motif{ width: 130px; height: auto; color: var(--terracotta); opacity:.9; }
.tone-green .line-motif,.tone-olive .line-motif{ color: var(--gold); }

/* ---------------------------------------------------------------- utils */
.mt-0{margin-top:0;} .center{ text-align:center; margin-left:auto; margin-right:auto; }
.max-56{ max-width: 56ch; }
.max-40{ max-width: 40ch; }
.stack{ display:flex; flex-direction:column; }
.gap-1{gap:1rem;} .gap-2{gap:2rem;}
.small{ font-size:.9rem; }
.pill{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  padding:.35em .9em; border-radius:999px; border:1px solid currentColor; opacity:.85;
}
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- legal pages */
.legal{ max-width: 78ch; }
.legal h1{ font-size: var(--step-4); }
.legal h2{ font-size: var(--step-2); margin-top: 2.4rem; }
.legal h3{ font-size: 1.15rem; margin-top: 1.6rem; }
.legal p, .legal li{ font-size: 1.02rem; }
.legal ul{ list-style: disc; padding-left: 1.3rem; margin: 0 0 1.1em; }
.legal li{ margin-bottom: .4em; }
.legal a{ color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.legal .meta{ opacity: .7; font-size: .92rem; }
.legal .langswitch{ display:inline-block; margin-bottom: 1.4rem; font-weight:600; }
.legal-table{ width:100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0 1.6rem; }
.legal-table th, .legal-table td{ text-align:left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--border-soft); }
.legal-table th{ background: var(--green); color: var(--sand-2); font-weight: 600; }
.table-wrap{ overflow-x: auto; }
.legal .todo{ background:#ffe08a; color:#5a3b00; padding:0 .3em; border-radius:4px; }
.legal-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.legal-links a{ text-decoration: underline; text-underline-offset: 3px; }
.form-privacy{ font-size:.85rem; line-height:1.5; opacity:.85; margin-top:1rem; }
.form-privacy a{ text-decoration: underline; text-underline-offset: 3px; color: var(--terracotta); }


/* Contact: what happens next */
.next-steps{ margin:.4rem 0 0; padding-left:1.2rem; display:grid; gap:.55rem; max-width:56ch; }
.next-steps li::marker{ color:var(--terracotta); font-weight:600; }

/* Plan your trip: what a day can include */
.photo-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.6rem; }
.photo-trio figure{ margin:0; position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5; }
.photo-trio img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-trio figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2rem 1rem .8rem; color:#fff; font-size:.9rem; letter-spacing:.04em; background:linear-gradient(transparent, rgba(20,30,20,.7)); }
@media (max-width:700px){ .photo-trio{ grid-template-columns:1fr; } .photo-trio figure{ aspect-ratio:16/11; } }

/* ---------------------------------------------------------------- experience detail (own page + pop-up) */
.tour-page{ max-width:1100px; }
.tour-back{ display:inline-block; margin-bottom:1.6rem; font-size:.95rem; color:var(--ink-soft); }
.tour-back:hover{ color:var(--terracotta); }
.tour-detail{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.tour-detail__figure{ border-radius:calc(var(--radius) - 6px); overflow:hidden; aspect-ratio:1/1; position:sticky; top:6rem; }
.tour-detail__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.tour-detail .meta{ font-size:.85rem; letter-spacing:.03em; color:var(--ink-soft); text-transform:uppercase; margin:0 0 .4rem; }
.tour-detail h1{ font-size:var(--step-4); margin:0 0 1rem; }
.tour-detail__body p{ max-width:60ch; }
.tour-extras{ margin:1.1rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem; max-width:60ch; }
.tour-extras li{ padding-left:1.1rem; position:relative; }
.tour-extras li::before{ content:""; position:absolute; left:0; top:.7em; width:.5rem; height:1px; background:var(--gold); }
.tour-facts{ margin:1.4rem 0 .6rem; padding-left:1rem; border-left:2px solid var(--gold); max-width:60ch; font-size:.95rem; }
.tour-facts p{ margin:.25rem 0; }
.tour-note{ font-family:var(--serif); font-style:italic; margin-top:1rem; }
.tour-detail .price{ margin:.6rem 0 1.1rem; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--terracotta); }
.tour-more{ margin-top:clamp(2.4rem,6vw,4rem); padding-top:1.6rem; border-top:1px solid rgba(32,45,31,.14); }
.tour-more ul{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; }
.tour-more a{ color:var(--ink-soft); border-bottom:1px solid rgba(75,90,67,.35); }
.tour-more a:hover{ color:var(--terracotta); border-color:var(--terracotta); }
@media (max-width:880px){
  .tour-detail{ grid-template-columns:1fr; }
  .tour-detail__figure{ position:static; aspect-ratio:16/10; }
  .tour-detail h1{ font-size:var(--step-3); }
}

/* the pop-up: the same content as the tour's own page, shown over the Experiences page */
.tour-dialog{
  border:0; padding:0; background:var(--cream); color:var(--ink);
  width:min(960px, calc(100vw - 2rem)); max-height:calc(100dvh - 2rem);
  border-radius:var(--radius); overflow:auto; overscroll-behavior:contain;
  box-shadow:0 30px 80px rgba(20,30,20,.35);
}
.tour-dialog::backdrop{ background:rgba(32,45,31,.6); }
.tour-dialog__inner{ position:relative; padding:clamp(1.2rem,3vw,2rem); }
.tour-dialog__close{
  position:sticky; top:0; float:right; z-index:2; margin:-.4rem -.4rem 0 .5rem;
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid rgba(32,45,31,.18);
  background:var(--cream); color:var(--ink); font-size:1.6rem; line-height:1; cursor:pointer;
}
.tour-dialog__close:hover{ background:var(--sand); }
.tour-dialog .tour-detail{ grid-template-columns:1fr; clear:both; }
.tour-dialog .tour-detail__figure{ position:static; aspect-ratio:16/8; }
.tour-dialog .tour-detail h1, .tour-dialog .tour-detail h2{ font-size:var(--step-3); }
.tour-dialog .tour-back, .tour-dialog .tour-more{ display:none; }
html.has-dialog{ overflow:hidden; }
@media (prefers-reduced-motion: no-preference){
  .tour-dialog[open]{ animation:tour-in 240ms var(--ease-out-strong); }
  .tour-dialog[open]::backdrop{ animation:tour-fade 200ms ease-out; }
}
@keyframes tour-in{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes tour-fade{ from{ opacity:0; } to{ opacity:1; } }