/* =============================================================================
   SLEEPLESS FINLAND — APPEARANCE-FIRST STYLES (brand-neutral utilities kept)
   ========================================================================== */

/* ----------------------------- Variables ---------------------------------- */
:root{
  --container-max-width: 1400px;

  /* Core palette (analogous greens + birch) */
  --sf-green:        #5aa56a;   /* primary moss */
  --sf-green-deep:   #346e45;   /* deep forest for solid buttons */
  --sf-sage:         #b7e0c6;   /* lighter sage (headings on dark surfaces) */
  --sf-birch:        #eef3ea;   /* body text on dark */
  --sf-ink:          #0a0f0c;   /* forest green-black background */

  /* Surfaces */
  --surface-card:    #0f1a14;   /* forest green-black card */
  --surface-border:  #233328;   /* subtle green outline for cards */

  /* Layout */
  --bar-h:           32px;      /* compact nav */
  --edge-pad:        12px;      /* fixed side padding regardless of width */
}

/* ------------------------------ Base/Reset -------------------------------- */
*{ box-sizing:border-box; max-width:100%; }
html{ scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable){ html{ overflow-y: scroll; } }
html, body{ height:100%; }
body{
  margin:0; padding:0; background:var(--sf-ink); color:var(--sf-birch);
  font-family: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}

/* --------------------------- Generic utilities ---------------------------- */
.text-center{ text-align:center; } .text-left{ text-align:left; } .text-right{ text-align:right; }
.text-bold{ font-weight:700; }
.text-underline{ text-decoration:underline; text-decoration-thickness:.02vw; text-underline-offset:.04vw; }
.text-1_25vw{ font-size:max(1.25rem,1.25vw); line-height:1.35; }

.spacer-1{ display:block; height:1rem; } .spacer-2{ display:block; height:2rem; } .spacer-3{ display:block; height:3rem; }

/* ------------------------------ Top bar ----------------------------------- */
.bar-black-fixed{
  position:fixed; inset:0 0 auto 0; height:var(--bar-h);
  background:var(--sf-ink);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:1000;
}
.bar-content-right{
  height:100%; width:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding-inline: var(--edge-pad); /* fixed, no extra at wide widths */
}

/* Right links (a bit more personality) */
.links-green-compact{ display:flex; align-items:center; gap:.25rem; }
.link-green{
  color:var(--sf-green);
  text-decoration:none;
  font-family:"Trebuchet MS","Gill Sans","Segoe UI",system-ui,sans-serif;
  font-weight:700; letter-spacing:.3px;
  padding:.2rem .6rem; border-radius:.5rem; line-height:1.1;
  transition:color .12s ease, transform .06s ease;
}
.link-green:hover, .link-green:focus-visible{ color:#fff; outline:none; }
.link-green:active{ transform:translateY(1px); }

/* Language switch — all three languages shown together in a tidy outlined
   group; the language you're currently reading is highlighted. */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px;
  margin-left:.4rem; padding:2px;
  border:1px solid var(--sf-green); border-radius:.55rem;
}
.lang-option{
  background:transparent; border:none; cursor:pointer;
  color:var(--sf-green);
  font-family:"Trebuchet MS","Gill Sans","Segoe UI",system-ui,sans-serif;
  font-weight:700; letter-spacing:.3px; font-size:.9rem; line-height:1.1;
  padding:.18rem .5rem; border-radius:.4rem;
  transition:color .12s ease, background .12s ease, transform .06s ease;
}
.lang-option:hover, .lang-option:focus-visible{ color:#fff; outline:none; }
.lang-option:active{ transform:translateY(1px); }
.lang-option.is-active{ background:var(--sf-green); color:var(--sf-ink); }

/* Hamburger (☰) menu button — hidden on computers, shown on phones only */
.nav-toggle{
  display:none;                       /* hidden by default (desktop) */
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px;
  background:transparent; border:none; cursor:pointer;
}
.nav-toggle-bar{
  display:block; width:100%; height:2px; border-radius:2px;
  background:var(--sf-green);
  transition:transform .2s ease, opacity .2s ease;
}
/* When the menu is open the three bars morph into an "X" */
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Spacer to offset fixed bar */
.spacer-bar{ height:var(--bar-h); }

/* ---- Phone menu: links collapse behind the hamburger button ---- */
@media (max-width:760px){
  :root{ --bar-h:52px; }               /* taller bar = easy-to-tap button */

  .nav-toggle{ display:flex; }         /* show the hamburger on phones */

  /* The row of links becomes a full-width dropdown panel under the bar */
  .links-green-compact{
    display:none;                      /* hidden until the button is tapped */
    position:fixed; top:var(--bar-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--sf-ink);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 24px rgba(0,0,0,.45);
    padding:.35rem 0;
  }
  .links-green-compact.is-open{ display:flex; }

  /* Each link becomes a big, comfortable full-width tap target */
  .link-green{
    padding:.9rem var(--edge-pad);
    border-radius:0; font-size:1.05rem;
  }
  /* On phones the switch centres itself under the menu, with big tap targets */
  .lang-switch{
    margin:.5rem var(--edge-pad); justify-content:center;
  }
  .lang-option{ padding:.55rem .9rem; font-size:1rem; }
}

/* -------------------------------- Hero ------------------------------------ */
/* Hero image: always centered + robust viewport handling */
.hero-cover-full{
  position: relative;
  height: 100vh;                 /* fallback */
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-position: center center;  /* keep the visual center */
  background-size: cover;              /* fill while preserving aspect */
  overflow: hidden;                    /* hide any scroll / jitter edges */
}

/* Use small/dynamic viewport units where supported to avoid mobile bar jumps */
@supports (height: 100svh) {
  .hero-cover-full{ height: 100svh; }  /* stable viewport (iOS Safari) */
}
@supports (height: 100dvh) {
  .hero-cover-full{ height: 100dvh; }  /* dynamic viewport (modern browsers) */
}

.hero-title-decenter-left{
  position:absolute; left:clamp(1rem,6vw,5rem); bottom:clamp(2rem,8vh,6rem);
  max-width:48ch; text-align:left; text-shadow:0 2px 6px rgba(0,0,0,.45);
  background:linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30));
  padding:clamp(1rem,2.5vw,1.75rem); border-radius:.75rem;
}
.title-serif-strong{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  line-height:1.02; font-size:clamp(2.6rem,6vw,4.25rem);
}
.hero-area-title{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-style:italic; font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.5rem); line-height:1.25;
  margin:.6rem 0 0;
}
.hero-area-text{
  font-size:clamp(.95rem,1.4vw,1.05rem); line-height:1.5;
  margin:.7rem 0 0;
}

/* -------------------------------- Buttons --------------------------------- */
.button{
  display:inline-block; padding:.7rem .95rem;
  font-weight:700; border:none; border-radius:.6rem; cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .06s ease;
}
.button-solid-forest{ background:var(--sf-green-deep); color:#fff; }
.button-solid-forest:hover{ background:#2f5f3a; }
.button-solid-moss{ background:var(--sf-green); color:#0a120d; }
.button-solid-moss:hover{ background:#4e955e; color:#fff; }

/* ---------------------------- Sections & layout --------------------------- */
.section-black{ background:var(--sf-ink); color:#e8eee9; padding:4rem var(--edge-pad) 5rem; }
.section-wrap-max{ max-width:var(--container-max-width); margin:0 auto; }
/* Keep anchored sections clear of the fixed top bar when jumped to */
.anchor-offset{ scroll-margin-top:var(--bar-h); }

/* --------------------------------- Cards ---------------------------------- */
/* Principles applied:
   - Lightness contrast: lighter headings vs deep surface
   - Chroma restraint: desaturated sage to harmonize, avoid neon clash
   - Limited hues: greens + birch only
*/
.cards-grid-equal{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.card-dark-contrast{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-radius:.9rem;
  padding:.8rem .9rem;             /* tighter, less airy */
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.heading-sage{
  color:var(--sf-sage);
  font-weight:800; letter-spacing:.2px;
  font-size:1.06rem; margin:0 0 .25rem 0;
}
.text-birch{ color:var(--sf-birch); font-size:1rem; }

/* --------------------------------- About ---------------------------------- */
/* Personal introduction: photo beside the text on wide screens */
.about-layout{
  display:flex; gap:2rem; align-items:flex-start;
}
.about-photo{ flex:0 0 38%; max-width:420px; }
.about-photo img{
  display:block; width:100%; height:auto;
  border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
/* Keep line length comfortable to read */
.about-copy{ flex:1 1 auto; max-width:70ch; }
.about-copy p{ margin:0 0 1.1rem; line-height:1.6; }
.about-copy p:last-child{ margin-bottom:0; }
.about-lead{ font-size:1.15rem; }
.about-signoff{ color:var(--sf-sage); font-style:italic; }

/* ------------------------------- Testimonial ------------------------------ */
/* A single guest review, shown as a quote with a sage accent bar */
.testimonial-card{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-left:4px solid var(--sf-sage);
  border-radius:.9rem;
  padding:2rem 2.25rem;
  max-width:80ch;
  margin:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.testimonial-quote{ margin:0; }
.testimonial-quote p{
  color:var(--sf-birch);
  font-size:1.05rem; line-height:1.7;
  margin:0 0 1.1rem;
}
.testimonial-quote p:last-child{ margin-bottom:0; }
.testimonial-attr{
  color:var(--sf-sage); font-style:italic;
  margin-top:1.5rem;
}

@media (max-width: 760px){
  .testimonial-card{ padding:1.5rem 1.4rem; }
}

/* On phones, stack the photo above the text */
@media (max-width: 760px){
  .about-layout{ flex-direction:column; gap:1.5rem; }
  .about-photo{ flex-basis:auto; max-width:100%; align-self:center; }
}

/* ----------------------------- Products page ------------------------------ */
/* Simple header band at the top of the packages page */
.page-header{
  background:var(--sf-ink); color:var(--sf-birch);
  padding:3rem var(--edge-pad) 1.5rem; text-align:center;
}
.page-header h1{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:800; letter-spacing:.02em; line-height:1.1;
  font-size:clamp(2rem,4.5vw,3rem); margin:0;
}
.page-header p{ color:var(--sf-sage); margin:.6rem 0 0; font-size:1.05rem; }
/* Short welcome paragraph under the page title */
.page-intro{
  color:var(--sf-birch); max-width:65ch; margin:1.1rem auto 0;
  font-size:1.02rem; line-height:1.6;
}

/* Green highlights band: the four things every tour offers */
.feature-bar{ background:var(--sf-green-deep); color:#eaf5ec; padding:1.1rem var(--edge-pad); }
.feature-bar-inner{
  max-width:var(--container-max-width); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
}
.feature{ display:flex; align-items:center; gap:.7rem; font-size:.98rem; font-weight:600; }
.feature-icon{ width:34px; height:34px; flex:0 0 34px; color:var(--sf-sage); }
@media (max-width: 860px){
  .feature-bar-inner{ grid-template-columns:repeat(2, 1fr); gap:.9rem 1.2rem; }
}
@media (max-width: 460px){
  .feature-bar-inner{ grid-template-columns:1fr; }
}

/* Three package cards, side by side on desktop, stacked on phones */
.packages-grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  align-items:stretch;
}
.package-card{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-radius:1rem; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.package-card.is-featured{ border-color:var(--sf-green); }

/* Photo at the top of each card, with a corner ribbon */
.package-photo{ position:relative; }
.package-photo img{
  display:block; width:100%; height:200px; object-fit:cover;
}
.package-ribbon{
  position:absolute; top:.8rem; left:0;
  background:#c79a3a; color:#20160a;
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:.3rem .8rem .3rem .7rem;
  border-radius:0 .4rem .4rem 0;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.package-ribbon-soft{ background:var(--sf-sage); color:#123021; }

/* Text area of each card */
.package-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1 1 auto; }
.package-name{
  font-family:Georgia, "Times New Roman", Times, serif;
  color:#fff; font-size:1.3rem; font-weight:800; margin:.1rem 0 .2rem; line-height:1.2;
}
.package-tagline{ color:var(--sf-sage); font-style:italic; margin:0 0 .6rem; font-size:.98rem; }
.package-desc{ color:var(--sf-birch); margin:0 0 .9rem; font-size:.98rem; }

/* Ticked list of what's included */
.package-includes{ list-style:none; margin:0 0 1rem; padding:0; }
.package-includes li{
  position:relative; padding:.32rem 0 .32rem 1.6rem;
  color:var(--sf-birch); font-size:.96rem;
  border-top:1px solid var(--surface-border);
}
.package-includes li:first-child{ border-top:none; }
.package-includes li::before{
  content:"✓"; position:absolute; left:0; top:.32rem;
  color:var(--sf-green); font-weight:800;
}
.package-price{
  align-self:flex-start; margin:auto 0 1rem;
  background:rgba(90,165,106,.15); border:1px solid var(--surface-border);
  color:var(--sf-sage); font-weight:800; font-size:1.2rem;
  padding:.45rem .9rem; border-radius:.6rem;
}
.package-book{ align-self:stretch; text-align:center; }

/* Notes & safety blocks */
.info-block{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-radius:1rem; padding:1.2rem 1.3rem; margin-top:1.25rem;
}
.info-block h3{ color:var(--sf-sage); margin:0 0 .6rem; font-size:1.15rem; }
.info-block h4{ color:var(--sf-birch); margin:1rem 0 .3rem; font-size:1rem; }
.info-block p{ margin:.4rem 0; color:var(--sf-birch); }
.info-block .fine-print{ font-size:.85rem; color:var(--sf-sage); margin-top:.8rem; line-height:1.5; }

/* The three info columns (practical info / good to know / FAQ) */
.info-columns{
  display:grid; gap:1.25rem; margin-top:1.25rem;
  grid-template-columns:repeat(3, 1fr);
}
.info-columns .info-block{ margin-top:0; }
@media (max-width: 900px){ .info-columns{ grid-template-columns:1fr; } }

/* Ticked "good to know" list */
.tick-list{ list-style:none; margin:.2rem 0 0; padding:0; }
.tick-list li{
  position:relative; padding:.35rem 0 .35rem 1.6rem; color:var(--sf-birch); font-size:.96rem;
}
.tick-list li::before{
  content:"✓"; position:absolute; left:0; top:.35rem; color:var(--sf-green); font-weight:800;
}
.everymans-right{ font-style:italic; color:var(--sf-sage); margin-top:.9rem; }

/* FAQ question / answer pairs */
.faq-q{ color:#fff; font-weight:700; margin:.9rem 0 .15rem; }
.faq-q:first-of-type{ margin-top:.2rem; }
.faq-a{ margin:0 0 .3rem; color:var(--sf-birch); }

.cta-line{
  text-align:center; color:var(--sf-sage);
  font-size:1.1rem; font-weight:700; margin:2rem auto 0; max-width:60ch;
}

/* Photo strip — a neat row of photos across the page.
   On phones the photos wrap onto two rows so nothing gets too small. */
.photo-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.6rem;
  padding:0 var(--edge-pad);
  max-width:var(--container-max-width);
  margin-inline:auto;
}
.photo-strip img{
  width:100%;
  height:clamp(180px, 22vw, 300px);
  object-fit:cover;            /* fill the box neatly, no stretching */
  display:block;
  border-radius:.7rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
/* Two-across on narrower screens (tablets and phones) */
@media (max-width: 720px){
  .photo-strip{ grid-template-columns:repeat(2, 1fr); }
}

/* ---- Photo album — a neat grid of tour pictures ----
   Photos flow into as many columns as fit, so adding or
   removing pictures just reflows the grid automatically. */
.album-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1rem;
  max-width:var(--container-max-width);
  margin-inline:auto;
}
.album-item{ margin:0; }
.album-item img{
  width:100%;
  height:clamp(200px, 24vw, 300px);
  object-fit:cover;            /* fill the box neatly, no stretching */
  display:block;
  border-radius:.7rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
/* Wide panorama photos stretch across the whole row and keep their
   natural shape, so the full sweeping view is visible. */
.album-item.wide{ grid-column:1 / -1; }
.album-item.wide img{ height:auto; max-height:460px; }
/* Two-across on tablets, then one on small phones */
@media (max-width: 720px){
  .album-grid{ grid-template-columns:repeat(2, 1fr); gap:.6rem; }
}
@media (max-width: 440px){
  .album-grid{ grid-template-columns:1fr; }
}

/* ---- Contact page: form flanked by full-height photo columns ---- */
.contact-layout{
  display:flex;
  align-items:stretch;          /* photo columns stretch to full height */
  justify-content:center;
  gap:1.25rem;
  max-width:var(--container-max-width);
  margin-inline:auto;
}
.contact-center{
  flex:0 1 640px;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.contact-rail{
  flex:0 0 auto;
  width:clamp(150px, 17vw, 240px);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
/* Title above the form (was the shared page-header on other pages) */
.contact-heading{ text-align:center; margin:0 0 2rem; }
.contact-heading h1{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:800; letter-spacing:.02em; line-height:1.1;
  font-size:clamp(2rem,4.5vw,3rem); margin:0; color:#e8eee9;
}
.contact-heading p{ color:var(--sf-sage); margin:.6rem 0 0; font-size:1.05rem; }

/* A photo frame is a box that holds one or more stacked photos.
   The rotation script fades between them, so the box stays put. */
.photo-frame{
  position:relative;
  overflow:hidden;
  border-radius:.7rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  background:#0f1a14;
}
/* In the side columns the frames share the full column height evenly,
   so the photos cover each side from top to bottom. */
.contact-rail .photo-frame{ flex:1 1 0; min-height:150px; }
.photo-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:1;
  transition:opacity 1.2s ease;
}
/* The incoming/outgoing photo during a crossfade */
.photo-frame img.is-hidden{ opacity:0; }

/* The mobile photo strip only appears when the side columns are hidden */
.contact-strip-mobile{ display:none; margin-top:2.5rem; }
.contact-strip-mobile .photo-frame{ height:clamp(180px, 40vw, 260px); }
/* Below this width there isn't room for side columns: hide them,
   and show the photos as a strip beneath the form instead. */
@media (max-width: 900px){
  .contact-rail{ display:none; }
  .contact-strip-mobile{ display:grid; }
}

/* Heading above the bottom photo strip */
.forage-gallery-block{ margin-top:2.5rem; }
.forage-gallery-title{
  color:var(--sf-sage); font-size:1.25rem; font-weight:800;
  margin:0 0 .3rem; text-align:center;
}
.forage-gallery-sub{
  color:var(--sf-birch); text-align:center;
  margin:0 auto 1.4rem; max-width:60ch;
}

/* "Book & Pay" button area at the bottom of each package card */
.package-cta{
  padding:.9rem 1rem 1.1rem;
  border-top:1px solid var(--surface-border);
  text-align:center;
}
.package-book{ display:block; width:100%; }

/* ------------------------------ Booking page ------------------------------ */
/* Summary card at the top of the booking page (which package was chosen) */
.booking-summary{
  background:var(--surface-card);
  border:1px solid var(--sf-green);
  border-radius:1rem;
  padding:1.2rem 1.3rem; margin-bottom:1.4rem; text-align:center;
}
.booking-summary-tier{
  display:inline-block; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  background:rgba(90,165,106,.18); color:var(--sf-sage);
  padding:.15rem .55rem; border-radius:1rem; margin-bottom:.5rem;
}
.booking-summary-name{
  color:#fff; font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:800; font-size:clamp(1.4rem,3.5vw,2rem); line-height:1.15;
}
.booking-summary-price{ color:var(--sf-sage); font-weight:700; margin-top:.3rem; }

/* The booking form reuses the contact-form field styles */
.booking-form .form-row{ display:flex; flex-direction:column; margin-bottom:1rem; }
.booking-form label{
  color:var(--sf-sage); font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem;
}
.booking-form textarea.quiz-input{ resize:vertical; min-height:5rem; }

/* Small grey helper text under a field */
.booking-help{ color:#9fb29f; font-size:.9rem; margin:.4rem 0 0; }

/* Grey helper text shown between a label and its input */
.field-hint{ color:#9fb29f; font-size:.9rem; margin:.15rem 0 .5rem; }

/* Click-to-choose monthly calendar */
.calendar{
  background:var(--sf-ink);
  border:1px solid var(--surface-border); border-radius:.9rem;
  padding:.8rem; max-width:360px;
}
.calendar-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.6rem;
}
.calendar-title{
  color:var(--sf-birch); font-weight:800; font-size:1.05rem;
  text-transform:capitalize;
}
.calendar-nav{
  background:transparent; border:1px solid var(--surface-border);
  color:var(--sf-sage); width:2rem; height:2rem; border-radius:.5rem;
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.calendar-nav:hover:not(:disabled){ border-color:var(--sf-green); color:#fff; }
.calendar-nav:disabled{ opacity:.35; cursor:default; }
.calendar-weekdays, .calendar-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.calendar-weekday{
  text-align:center; color:var(--sf-sage);
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  padding:.3rem 0;
}
.calendar-day{
  aspect-ratio:1 / 1; min-height:2.2rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-card);
  border:1px solid var(--surface-border); border-radius:.5rem;
  color:var(--sf-birch); font:inherit; font-weight:600; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.calendar-day:hover:not(:disabled){ border-color:var(--sf-green); }
.calendar-day:focus-visible{ outline:none; border-color:var(--sf-green); box-shadow:0 0 0 2px rgba(90,165,106,.3); }
.calendar-day:disabled{ opacity:.28; cursor:default; }
.calendar-day.is-selected{
  background:var(--sf-green); color:#0a120d;
  border-color:var(--sf-green); font-weight:800;
}
.calendar-day.is-empty{ background:transparent; border:none; cursor:default; }

/* The line that confirms the chosen day under the calendar */
.booking-selected-date{ color:var(--sf-sage); font-weight:700; margin:.6rem 0 0; }

/* The running total */
.booking-total{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin:1.4rem 0 .4rem;
  padding:1rem 1.2rem;
  background:rgba(90,165,106,.12);
  border:1px solid var(--sf-green); border-radius:.9rem;
  color:var(--sf-sage); font-weight:700;
}
.booking-total strong{ color:#fff; font-size:1.4rem; }

.booking-pay{ display:block; width:100%; margin-top:.4rem; font-size:1.05rem; }
.booking-pay:disabled{ opacity:.6; cursor:default; }

.booking-reassure{
  color:#9fb29f; font-size:.9rem; text-align:center; margin:.9rem 0 0;
}

/* ------------------------------ Contact page ------------------------------ */
/* A narrower column so the form and text stay comfortable to read */
.section-wrap-narrow{ max-width:640px; margin:0 auto; }

.contact-intro{ color:var(--sf-birch); margin:0 0 1.2rem; }

/* The form fields */
.contact-form .form-row{ display:flex; flex-direction:column; margin-bottom:1rem; }
.contact-form label{
  color:var(--sf-sage); font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  background:var(--sf-ink); color:var(--sf-birch);
  border:1px solid var(--surface-border); border-radius:.6rem;
  padding:.7rem .8rem; font:inherit; line-height:1.4;
}
.contact-form textarea{ resize:vertical; min-height:8rem; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--sf-green);
  box-shadow:0 0 0 2px rgba(90,165,106,.25);
}
.contact-form .button{ margin-top:.4rem; }

/* Hidden spam-trap field — kept off-screen for people, visible to bots */
.hp-field{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* Thank-you / error banners shown after sending */
.form-banner{
  border-radius:.9rem; padding:1rem 1.2rem; margin-bottom:1.25rem;
  font-weight:700; border:1px solid transparent;
}
.form-banner-ok{
  background:rgba(90,165,106,.15); color:var(--sf-sage);
  border-color:var(--sf-green);
}
.form-banner-error{
  background:rgba(180,70,70,.15); color:#f0c9c9;
  border-color:#8a4444;
}

/* Direct email link */
.contact-email{ color:var(--sf-green); font-weight:800; text-decoration:none; }
.contact-email:hover{ color:#fff; text-decoration:underline; }

/* ------------------------- Identify Tour (quiz) --------------------------- */
/* A step-by-step guide: one question at a time, big tappable choices. */

/* Progress bar + label */
.quiz-progress{ margin:0 auto 1.5rem; max-width:640px; }
.quiz-progress-track{
  height:8px; border-radius:999px; overflow:hidden;
  background:var(--surface-card); border:1px solid var(--surface-border);
}
.quiz-progress-bar{
  height:100%; width:0%;
  background:var(--sf-green);
  transition:width .25s ease;
}
.quiz-progress-label{
  margin-top:.5rem; text-align:center;
  color:var(--sf-sage); font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}

/* Question card */
.quiz-card{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-radius:1rem; padding:1.6rem 1.4rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.quiz-question{
  color:var(--sf-birch); margin:0 0 .3rem;
  font-size:clamp(1.3rem,3vw,1.7rem); font-weight:800; line-height:1.25;
}
.quiz-hint{ color:var(--sf-sage); margin:0 0 1rem; font-size:.95rem; }

/* The choices */
.quiz-options{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.quiz-option{
  display:block; width:100%; text-align:left;
  min-height:48px; padding:.85rem 1rem;
  background:var(--sf-ink); color:var(--sf-birch);
  border:1px solid var(--surface-border); border-radius:.7rem;
  font:inherit; font-size:1.02rem; font-weight:600; cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .06s ease;
}
.quiz-option:hover{ border-color:var(--sf-green); }
.quiz-option:focus-visible{ outline:none; border-color:var(--sf-green); box-shadow:0 0 0 2px rgba(90,165,106,.3); }
.quiz-option:active{ transform:translateY(1px); }
.quiz-option.is-selected{
  border-color:var(--sf-green);
  background:rgba(90,165,106,.16);
  color:#fff;
}
/* A little tick on chosen multi-select options */
.quiz-option.is-selected[aria-pressed="true"]::before{
  content:"\2713\00a0"; color:var(--sf-green); font-weight:800;
}

/* Text / number / date boxes revealed by "Other" and date questions */
.quiz-input{
  width:100%; margin-top:.2rem;
  background:var(--sf-ink); color:var(--sf-birch);
  border:1px solid var(--surface-border); border-radius:.7rem;
  padding:.7rem .85rem; font:inherit;
}
.quiz-input:focus{
  outline:none; border-color:var(--sf-green);
  box-shadow:0 0 0 2px rgba(90,165,106,.25);
}

/* Validation message */
.quiz-error{ color:#f0c9c9; margin:.9rem 0 0; font-weight:700; font-size:.95rem; }

/* Back / Skip / Next row */
.quiz-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-top:1.4rem;
}
.quiz-nav-right{ display:flex; align-items:center; gap:.6rem; }
.quiz-textbtn{
  background:transparent; border:none; cursor:pointer;
  color:var(--sf-sage); font:inherit; font-weight:700;
  padding:.5rem .4rem; border-radius:.5rem;
}
.quiz-textbtn:hover{ color:#fff; text-decoration:underline; }
.quiz-next{ min-height:44px; }

/* ---- Results screen ---- */
.result-hero{
  background:var(--surface-card);
  border:1px solid var(--sf-green); border-radius:1rem;
  padding:1.6rem 1.4rem; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.result-eyebrow{
  color:var(--sf-sage); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem;
}
.result-name{
  color:#fff; font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:800; font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.15;
}
.result-meta{ color:var(--sf-sage); font-weight:700; margin-top:.3rem; }
.result-why{ color:var(--sf-birch); margin:1rem 0 .6rem; font-size:1.08rem; }
.result-includes{ color:var(--sf-birch); margin:0; }

.result-touch-title{
  color:var(--sf-sage); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; margin:1.2rem 0 .4rem;
}
.result-touches{ margin:0; padding-left:1.2rem; color:var(--sf-birch); }
.result-touches li{ margin:.25rem 0; }

.result-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }

/* Collapsible "other tours" */
.result-alts{
  margin-top:1.25rem;
  background:var(--surface-card);
  border:1px solid var(--surface-border); border-radius:1rem;
  padding:.4rem 1.2rem;
}
.result-alts-summary{
  cursor:pointer; color:var(--sf-sage); font-weight:800;
  padding:.9rem 0; list-style-position:inside;
}
.result-alts-summary:hover{ color:#fff; }
.result-alt{ padding:.8rem 0; border-top:1px solid var(--surface-border); }
.result-alt-name{ color:var(--sf-birch); font-weight:700; margin-bottom:.2rem; }
.result-alt-inc{ color:var(--sf-birch); margin:0; font-size:.95rem; opacity:.9; }

.result-contact{ margin-top:1.25rem; }

.quiz-startover{
  display:block; margin:1.4rem auto 0; text-align:center;
}

/* --------------------------------- Footer --------------------------------- */
.footer-black-muted{
  background:var(--sf-ink); color:#9fb29f; text-align:center; padding:1.6rem 1.1rem; font-size:.95rem;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.footer-logo{
  width:90px; height:90px; border-radius:50%; display:block;
}
.footer-contact{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.footer-contact p{ margin:0; }
.footer-contact a{ color:#cfe0cf; text-decoration:none; }
.footer-contact a:hover{ text-decoration:underline; }

/* --------------------------------- Mobile --------------------------------- */
@media (max-width:640px){
  .title-serif-strong{ font-size:clamp(2.2rem,8vw,3.2rem); }
}