:root{
      --cream:#f7f4ec; --ink:#33301f; --muted:#6f6a55;
      --forest:#4b6b3c; --meadow:#6b8e4e; --earth:#8a6a44;
      --lake:#3f7fa6; --plum:#7b5d77; --accent:#c0492f;
      --gold:#e0a23c; --lantern:#f4c873; --night:#1d2436;
      --card:#fbf6e9; --cardborder:#e6d9b3; --line:#e3ddcd;
      --rare:#3f7fa6; --legendary:#b8923a; --common:#6b8e4e;
      /* Roles that had grown a second, undeclared palette alongside this one.
         --muted-deep replaces #5f5a48/#625e4c/#756f61, three near-identical greys that
         were all doing the same job (secondary body copy, one step darker than
         --muted); collapsing them also lifts contrast on --card. */
      --muted-deep:#5f5a48; --alert:#8b2f20; --ok:#294d25;
      --field-bg:#fffdf8; --field-border:#a89d7e; --placeholder:#e8e0cc;
      --serif:Georgia,'Iowan Old Style','Palatino Linotype',serif;
      --sans:Arial,'Helvetica Neue',system-ui,sans-serif;
      --z-scrim:40; --z-sheet:50; --z-lightbox:60; --z-sticky:30;
      --shadow:0 18px 50px -18px rgba(15,12,7,.55);
    }
    *{box-sizing:border-box}
    .skip-link{position:fixed;left:14px;top:10px;z-index:1000;padding:9px 14px;border-radius:999px;background:var(--ink);color:var(--cream);transform:translateY(-160%);transition:transform .15s ease}.skip-link:focus{transform:translateY(0)}.breadcrumbs{display:flex;align-items:center;gap:9px;margin:0 0 20px;color:var(--muted);font-size:13px}.breadcrumbs a{font-weight:700}.site-footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:18px;font-size:14px}.site-footer-nav a{font-weight:700}.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}
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{margin:0; color:var(--ink); font-family:var(--sans); line-height:1.6; background:radial-gradient(ellipse at 50% -10%,rgba(244,200,115,.3),transparent 36rem),radial-gradient(ellipse at 0 45%,rgba(138,106,68,.12),transparent 45%),radial-gradient(ellipse at 100% 70%,rgba(75,107,60,.08),transparent 38%),var(--cream); position:relative}
    body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:-1; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
    a{color:var(--forest)} button,input,textarea,select,summary,a{transition:transform .12s ease-out,filter .12s ease-out,box-shadow .12s ease-out}
    :where(a,button,input,textarea,select,summary,[tabindex="-1"]):focus-visible{outline:0; box-shadow:0 0 0 3px #1c160d,0 0 0 6px rgba(255,255,255,.95),0 0 22px 6px rgba(244,200,115,.7)}
    h1,h2,h3{font-family:var(--serif); line-height:1.08; text-wrap:balance} p{max-width:72ch; text-wrap:pretty}
    .site-header{position:sticky; top:0; z-index:var(--z-sticky); padding:12px 0; pointer-events:none}
    .header-inner,.hero,.page,footer{width:min(calc(100% - 40px),1040px); margin-inline:auto}
    .header-inner{min-height:52px; padding:7px 10px 7px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--cardborder); border-radius:999px; background:rgba(251,246,233,.95); box-shadow:0 10px 30px -18px rgba(15,12,7,.65); backdrop-filter:blur(10px); pointer-events:auto}
    .brand{display:flex; align-items:center; gap:9px; flex:none; font:700 14px/1 var(--serif); letter-spacing:.16em}
    /* Explicit height, no aspect-ratio: the markup carries width/height as a
       presentational hint and that hint beats aspect-ratio unless height is set. */
    .brand-mark{display:block; width:auto; height:32px}.site-nav{display:flex; align-items:center; justify-content:flex-end; gap:2px}.site-nav a{position:relative; padding:8px 10px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap}.site-nav a:hover{transform:translateY(-2px); filter:brightness(1.07)}.site-nav-toggle{display:none}
    /* Nav links measured 56x37 and the burger 36x36 — under the 44px target floor.
       The hit area is extended with an overlay rather than by growing the controls,
       because the header pill's height is part of the locked visual and the hero's
       negative top margin is tuned to it. */
    .site-nav a::after,.site-nav-toggle::after{content:""; position:absolute; left:0; right:0; top:50%; min-height:44px; height:100%; transform:translateY(-50%)}
    .site-nav-toggle{position:relative}
    .site-nav-toggle::after{left:-4px; right:-4px}
    /* Anchored sections clear the sticky header instead of landing behind it. */
    :where(section,h2,h3,article)[id]{scroll-margin-top:96px}
    /* Kept deliberately, alongside html{overflow-x:hidden}. Lifting it to expose what it
       was masking found a real 61px overflow (the home hero's contrast scrim, since
       fixed at source with .home-hero{overflow:hidden}) plus a 2px pseudo-element on
       experiences at 320px. With those known, the guard goes back: the cost is that it
       clips the 22px focus glow at the content edges, which is the lesser risk on a
       live site whose full page x viewport matrix is not machine-verified. */
    main{overflow:hidden}.hero{position:relative; min-height:clamp(530px,70vw,690px); margin-top:-76px; margin-bottom:90px; border-radius:0 0 26px 26px; overflow:visible; color:#fff; box-shadow:var(--shadow)}
    .hero-media{position:absolute; inset:0; overflow:hidden; border-radius:0 0 26px 26px; background:#665f43}
    .hero-media img{width:100%; height:100%; object-fit:cover}
    .hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,10,.3),rgba(20,16,10,0) 30%,rgba(20,16,10,.62)),radial-gradient(ellipse at center,transparent 42%,rgba(20,16,10,.34)); box-shadow:inset 0 0 70px rgba(20,16,10,.28)}
    .hero-copy{position:absolute; inset:auto 24px 86px; z-index:1; text-align:center; display:grid; justify-items:center}
    /* The RV interior behind this hero has a blown-out window right where the headline
       sits: sampling the rendered page, the 90th-percentile background under the h1 was
       pure white — 1.00:1 against white text — and 1.32:1 under the paragraph.
       The darkening lives on .hero-media (which is overflow:hidden) rather than as a
       block behind .hero-copy: .hero itself must stay overflow:visible so the
       .hero-plaque can overhang its bottom edge by 58px, and a copy-block scrim there
       spilled a hard-edged grey rectangle out past both sides of the photo.
       Scoped with :not(.home-hero) because index.html carries both classes. */
    .hero:not(.home-hero) .hero-media::after{background:
      linear-gradient(180deg, rgba(20,16,10,.26) 0, rgba(20,16,10,.06) 24%, rgba(20,16,10,.16) 46%, rgba(20,16,10,.46) 76%, rgba(20,16,10,.52) 100%),
      radial-gradient(ellipse 116% 58% at 50% 80%, rgba(14,10,6,.46), rgba(14,10,6,.14) 62%, rgba(14,10,6,0) 100%)}
    /* The subject spreads left-to-right: rig, guests, herd. A centred cover-crop on a
       narrow screen keeps the rig and loses the alpacas, which are the reason to book.
       Bias the crop right so the fence-line interaction survives on a phone. */
    @media(max-width:700px){.hero:not(.home-hero) .hero-media img{object-position:73% 50%}}
    h1{max-width:850px; margin:0 0 16px; font-size:clamp(3rem,8vw,5rem); letter-spacing:-.02em; text-shadow:0 3px 20px rgba(20,16,10,.85)}
    .hero-copy p{margin:0; font-size:clamp(1rem,2.1vw,1.18rem); text-shadow:0 2px 10px rgba(20,16,10,.95)}
    .flourish{margin-top:17px; color:var(--lantern); font:700 15px/1 var(--serif); letter-spacing:.6em; text-shadow:0 0 18px rgba(244,200,115,.8)}
    .hero-plaque{position:absolute; z-index:2; left:50%; bottom:-58px; width:min(calc(100% - 40px),850px); transform:translateX(-50%); padding:17px 20px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; border:1px solid rgba(255,255,255,.65); border-radius:16px; background:rgba(251,246,233,.72); color:var(--ink); box-shadow:var(--shadow); backdrop-filter:blur(16px) saturate(1.2); text-align:center; font-weight:700}
    .hero-plaque p{margin:0}.btn{display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:13px 21px; background:var(--accent); color:#fff; font:700 14.5px var(--sans); text-decoration:none; cursor:pointer}
    .btn:hover{transform:translateY(-2px); filter:brightness(1.07)}
    .content-section{margin:88px 0}.section-title{font-size:clamp(2rem,5vw,2.65rem); margin:0 0 28px; text-align:center}
    .skeleton-card{min-height:360px; overflow:hidden; border:1px solid var(--cardborder); border-radius:18px; background:var(--card); box-shadow:var(--shadow)}.skeleton-card::before{content:""; display:block; height:100%; background:linear-gradient(110deg,var(--placeholder) 8%,#f5efdf 18%,var(--placeholder) 33%) 0 0/200% 100%; animation:skeleton-pulse 1.4s ease-in-out infinite}@keyframes skeleton-pulse{to{background-position-x:-200%}}
    .steps{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:34px}.steps::before{content:""; position:absolute; left:16%; right:16%; top:24px; height:3px; background:linear-gradient(90deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent); opacity:.65}
    .step{position:relative; padding:62px 23px 24px; border:1px solid var(--cardborder); border-radius:16px; background:var(--card); box-shadow:var(--shadow)}
    .node{position:absolute; z-index:1; top:0; left:50%; width:48px; height:48px; transform:translate(-50%,-50%); display:grid; place-items:center; border:2px solid #fff8df; border-radius:50%; background:var(--gold); color:var(--ink); box-shadow:0 0 0 5px var(--cream),0 0 22px rgba(244,200,115,.85); font:700 20px var(--serif)}
    .step h3{margin:0 0 9px; color:var(--forest); font-size:21px}.step p{margin:0}
    /* Three ways to stay since 2026-07-29 (BYO joined the two supplied options). At two
       tracks the third card sat alone on its own row looking like an afterthought. */
    .stay-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
    @media(max-width:1000px) and (min-width:761px){.stay-cards{grid-template-columns:1fr 1fr}}.stay-card{overflow:hidden; border:1px solid var(--cardborder); border-radius:16px; background:var(--card); box-shadow:var(--shadow)}
    /* min-height, not flex: .motif is a float and floats do nothing inside a flex
       container. Two-line titles ("Delivered to Your Campsite") otherwise pushed that
       card's photo 27px below its neighbours' and the row read as misaligned. */
    .stay-head{min-height:94px; padding:22px 24px 18px; color:#fff}.farm .stay-head{background:linear-gradient(135deg,var(--forest),var(--meadow))}.delivery .stay-head{background:linear-gradient(135deg,#9e3927,var(--accent))}.byo .stay-head{background:linear-gradient(135deg,#5b4327,var(--earth))}.stay-head h3{margin:0; font-size:25px}.motif{float:right; font-size:26px}
    .stay-body{padding:23px 25px 26px}.price{margin:0 0 18px; color:var(--ink); font:700 clamp(2rem,5vw,2.75rem)/1.05 var(--serif)}.price small{font:700 15px var(--sans)}
    .stay-card ul{margin:0 0 24px; padding:0; list-style:none}.stay-card li{position:relative; padding-left:25px}.stay-card li+li{margin-top:8px}.stay-card li::before{content:"\2713"; position:absolute; left:0; color:var(--gold); font-weight:700}
    .fleet-intro{margin:-17px auto 25px; text-align:center; color:var(--muted-deep)}
    /* Availability calendar. Replaces a pair of bare date inputs plus a "Check
       availability" button that revealed nothing until you had already guessed a
       range. The month grid shows open/limited/booked per night up front, so a
       guest can see where the gaps are instead of probing for them. */
    .availability-panel{margin-bottom:26px; padding:22px; border:1px solid var(--cardborder); border-radius:16px; background:var(--card); box-shadow:var(--shadow)}
    /* `min-width:0` on the items is required, not cosmetic: an `fr` track has an
       automatic minimum of min-content, and a date input's min-content is ~165px, so
       without this the tracks refuse to shrink and the row overflows its own panel. */
    .availability-controls{display:grid; grid-template-columns:1.2fr 1fr 1fr auto; align-items:end; gap:14px}
    .availability-controls>*{min-width:0}
    .availability-controls input,.availability-controls select{width:100%}
    .availability-controls .btn{min-height:48px}
    .availability-controls select,.availability-controls input{min-height:48px; padding:10px 12px; border:1px solid var(--field-border); border-radius:10px; background:var(--field-bg); color:var(--ink); font:inherit}
    .availability-meta,.availability-hint,.availability-summary{margin:14px 0 0; font-size:13px}
    .availability-meta{color:var(--muted-deep)}
    .availability-hint{color:var(--alert); font-weight:700}
    .availability-summary:not(:empty){margin-top:10px; padding:10px 14px; border-radius:10px; background:#f0ead8; font-weight:700}
    .calendar{margin-top:20px; padding-top:18px; border-top:1px dashed var(--cardborder)}
    .calendar-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
    .calendar-label{margin:0; font:700 20px/1.2 var(--serif); color:var(--forest)}
    .calendar-step{min-width:44px; min-height:44px; border:1px solid var(--cardborder); border-radius:999px; background:var(--field-bg); color:var(--ink); font-size:17px; cursor:pointer}
    .calendar-step:hover{filter:brightness(.97)}
    .calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
    .calendar-weekday{padding:5px 0; color:var(--muted-deep); font-size:12px; font-weight:700; text-align:center}
    .calendar-weekday abbr{text-decoration:none; border:0}
    .calendar-day{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:44px; padding:0; border:1px solid transparent; border-radius:10px; background:#eef2e8; color:var(--ink); font:700 14px/1.05 var(--sans); cursor:pointer}
    .calendar-day.is-blank{background:none; cursor:default}
    /* Three exact states against one class in scope: is-all (every rig of that kind is
       free), is-some (at least one is taken), is-none. The old banding was a ratio, so
       a day could read green with half the fleet gone — a different claim than the one
       the guest takes from the colour. */
    .calendar-day.is-all{background:#cfe4c4; color:#22401a; border-color:#b6d4a7}
    .calendar-day.is-some{background:#f7e2b4; color:#5e4208; border-color:#e6c79b}
    /* The count is what makes amber actionable: 3/4 says browse on, 1/4 says hurry. */
    .calendar-tally{font:700 10.5px/1 var(--sans); letter-spacing:-.2px}
    /* Unselectable days use aria-disabled, not [disabled], so they stay focusable and
       arrow-key navigation cannot strand the roving tabindex. Colour is therefore NOT
       the only signal: is-none also carries a line-through, and every cell states its
       status in its aria-label. */
    .calendar-day.is-none{background:#ece7dc; color:#6d675c; text-decoration:line-through; cursor:not-allowed}
    /* #8a8375 on the panel's #fbf6e9 measured 3.49:1. These cells are focusable
       buttons (aria-disabled, not [disabled]), so the WCAG exemption for disabled
       controls does not cover them and 4.5:1 is the bar. */
    .calendar-day.is-past{background:transparent; color:#6d6858; cursor:not-allowed}
    .calendar-day:not([aria-disabled="true"]):hover{border-color:var(--forest); transform:translateY(-1px)}
    .calendar-day.is-start,.calendar-day.is-end{background:var(--forest); color:#fff}
    .calendar-day.is-between{background:#c8dbbb; color:#25401b}
    .calendar-help{margin:14px 0 0; color:var(--muted-deep); font-size:13px}
    .calendar-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:12px 0 0; padding:0; list-style:none; font-size:12.5px; color:var(--muted-deep)}
    .calendar-legend li{display:flex; align-items:center; gap:7px}
    .calendar-legend .swatch{width:14px; height:14px; border-radius:4px; background:#eef2e8}
    .calendar-legend .swatch.all{background:#cfe4c4}
    .calendar-legend .swatch.some{background:#f7e2b4}
    .calendar-legend .swatch.none{background:#ece7dc}
    .calendar-legend .swatch.chosen{background:var(--forest)}
    .calendar-default:not([hidden]){display:block; margin:10px 0 0; padding:7px 12px; border-radius:9px; background:rgba(75,107,60,.1); color:var(--ok); font:700 12.5px var(--sans)}
    /* ---- class-first availability (2026-07-29) --------------------------------
       Three class tiles, a calendar scoped to the chosen one, and the answer in an
       aside beside it. Replaces a "Which RV?" select plus six 280px-tall unit cards
       stacked underneath, where the effect of picking dates was a scroll away from
       the cause. */
    .rv-class-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px}
    .rv-class-tab{display:grid; grid-template-columns:78px 1fr; gap:11px; align-items:center; min-height:44px; padding:11px; border:2px solid var(--cardborder); border-radius:16px; background:var(--field-bg); color:var(--ink); text-align:left; cursor:pointer}
    .rv-class-tab>img{width:78px; height:52px; object-fit:contain}
    .rv-class-text{display:flex; flex-direction:column; gap:2px; min-width:0}
    .rv-class-name{font:700 16px/1.15 var(--serif); color:var(--forest)}
    .rv-class-sub{color:var(--muted-deep); font-size:12px}
    .rv-class-state:not(:empty){margin-top:4px; padding:2px 8px; border-radius:999px; font:700 11.5px var(--sans); align-self:flex-start}
    .rv-class-state.is-all{background:#dcead5; color:var(--ok)}
    .rv-class-state.is-some{background:#f6e6c4; color:#5e4208}
    .rv-class-state.is-none{background:#e8ded9; color:#7d3626}
    .rv-class-tab:hover{border-color:var(--meadow)}
    .rv-class-tab[aria-checked="true"]{border-color:var(--forest); background:#eef3e9; box-shadow:0 0 0 3px rgba(75,107,60,.14)}
    .availability-split{display:grid; grid-template-columns:1.25fr .9fr; gap:22px; align-items:start}
    .availability-split>*{min-width:0}
    .availability-split .calendar{margin-top:20px}
    .rv-class-side{margin-top:20px; padding:17px; border:1px solid var(--cardborder); border-radius:14px; background:var(--field-bg)}
    .rv-side-title{margin:0 0 8px; font:700 19px/1.15 var(--serif); color:var(--forest)}
    .rv-side-blurb{margin:0; color:var(--muted-deep); font-size:13.5px}
    .rv-class-side .availability-badge{display:inline-block; margin:12px 0 0}
    .rv-side-specs{margin:12px 0 0; padding-left:18px; color:var(--muted-deep); font-size:13.5px}
    .rv-side-rigs{margin-top:14px; padding-top:12px; border-top:1px dashed var(--cardborder)}
    .rv-side-rigs-label{margin:0 0 7px; color:var(--muted-deep); font-size:12.5px; font-weight:700}
    .rv-side-rig{min-height:34px; margin:0 6px 6px 0; padding:6px 12px; border:1px solid var(--cardborder); border-radius:999px; background:var(--card); color:var(--forest); font:700 12.5px var(--sans); cursor:pointer}
    .rv-side-rig:hover{border-color:var(--forest)}
    .rv-side-rig.is-booked{color:var(--muted-deep); text-decoration:line-through}
    .rv-side-request{width:100%; margin-top:14px}
    .fleet-card.is-booked{opacity:.62}
    .gallery-note{margin:18px auto 0; max-width:62ch; text-align:center; color:var(--muted-deep); font-size:14.5px}
    /* height:auto per the image-geometry rule — the markup carries width/height for
       layout stability and a presentational hint would otherwise beat aspect-ratio. */
    .stay-figure{overflow:hidden}
    .stay-figure img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
    /* The deposit ask is the scariest moment on the page; the generous cancellation
       policy was nine sections away inside a closed <details>. Put it where the fear is. */
    .booking-reassure{margin:10px 0 0; padding:11px 15px; border-radius:10px; background:#e7efe1; color:#25401b; font-size:14px; font-weight:700}
    .booking-reassure a{color:#25401b}
    /* Layout comes from the existing .call-bar class, which already does
       `display:flex` + `.btn{width:auto;flex:1}`. Hand-rolling it here lost the cascade
       to the later `.mobile-cta{display:block}` / `.btn{width:100%}` rules and the two
       buttons stacked into a double-height bar. Only the split needs overriding. */
    .mobile-cta.call-bar .btn--ghost{flex:0 0 30%}
    /* Four tracks need ~575px; below that they were being clipped by main{overflow:hidden}
       rather than wrapping, so the Clear button fell off the right edge on a phone. */
    /* One column below 860px: at 820px the aside squeezed the 7-track grid until the
       44px day cells could no longer hold a two-digit number plus its tally. */
    @media(max-width:860px){
      .availability-split{grid-template-columns:1fr; gap:0}
      .rv-class-side{margin-top:18px}
    }
    @media(max-width:760px){
      .availability-controls{grid-template-columns:1fr 1fr}
      .availability-controls .btn{grid-column:1/-1}
      .calendar-day{font-size:13px}
      .availability-panel{padding:16px}
      /* Stacked, not squeezed: three 78px thumbnails plus their labels cannot share
         a phone's width without the type collapsing. */
      .rv-class-tabs{grid-template-columns:1fr; gap:9px}
      .rv-class-tab{grid-template-columns:62px 1fr}
      .rv-class-tab>img{width:62px; height:42px}
    }.fleet-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}.fleet-card{display:flex; flex-direction:column; min-height:280px; overflow:hidden; border:1px solid var(--cardborder); border-radius:18px; background:linear-gradient(145deg,#fffdf5,var(--card)); box-shadow:var(--shadow); cursor:pointer; transition:transform .18s ease-out,box-shadow .18s ease-out}.fleet-card:hover{transform:translateY(-3px); box-shadow:0 22px 54px -18px rgba(15,12,7,.6)}.fleet-photo{display:flex; aspect-ratio:16/10; align-items:center; justify-content:center; overflow:hidden; background:var(--card)}.fleet-photo img{display:block}.fleet-photo.is-photo img{width:100%; height:100%; object-fit:cover}.fleet-photo.is-render{padding:10px 12px; background:linear-gradient(170deg,#fffdf6,#f0e9d8)}/* Definite 100%/100% + contain, NOT max-width/auto: these are lazy-loaded, so
   before decode they have no intrinsic size and `auto` collapses the box to 0. */
.fleet-photo.is-render img{width:100%; height:100%; object-fit:contain}.fleet-placeholder{flex-direction:column; gap:6px; color:var(--muted-deep); font-size:14px}.fleet-placeholder span{font-size:24px}.fleet-card-body{display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:24px}.fleet-class{margin:0 0 18px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em}.fleet-class.class-a{background:#f1d2c8; color:#702719}.fleet-class.class-b{background:#ead8a8; color:#54400b}.fleet-class.class-c{background:#dcead5; color:var(--ok)}.fleet-card h3{margin:0 0 9px; color:var(--forest); font:700 22px/1.2 var(--serif)}.fleet-spec,.fleet-sleeps{margin:0 0 9px}.fleet-sleeps{font-weight:700}.availability-badge{margin:8px 0 17px; padding:5px 10px; border-radius:999px; background:#e4dfd3; color:#4e493e; font-size:13px; font-weight:700}.availability-badge.available{background:#dcead5; color:var(--ok)}.availability-badge.booked{background:#e4dfd3; color:#4e493e}.fleet-request{margin-top:auto}.fleet-request:disabled{background:var(--muted-deep); color:#fff; cursor:not-allowed; filter:none; transform:none}.fleet-footnote{margin:14px 0 0; color:var(--muted-deep); font-size:13px; text-align:center}
    .included-plaque{padding:28px; border:1px solid var(--cardborder); border-radius:28px 16px 30px 18px; background:var(--card); box-shadow:var(--shadow)}.included{display:grid; grid-template-columns:repeat(3,1fr); gap:8px 20px; margin:0; padding:0; list-style:none}.included li{display:flex; align-items:center; gap:12px; padding:13px 8px; border-bottom:1px dashed var(--cardborder); font-weight:700}.included .icon{font-size:23px}.note,.booking-info{color:var(--muted-deep)}.note{margin:20px 8px 0; font-size:14px}
    /* `height:auto` on `.photo img` and `#lightbox img` is load-bearing, not tidying.
       The markup carries width/height attributes (width="1600" height="1203") for
       layout stability. Those become presentational hints, and a hint BEATS
       `aspect-ratio` unless the author sets `height` explicitly — so without it every
       gallery photo rendered at its attribute height: 224px wide by 1203px tall, a
       column of stretched slivers. Same bug previously fixed on the home page cards. */
    /* minmax(300px) not 240px: at the 1040px content width 240 yields four columns, so
       six photos rendered 4 + 2 with an orphan row. 300 gives 3 + 3, and bigger photos. */
    .gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}.photo{padding:7px; border:1px solid var(--cardborder); border-radius:14px; background:var(--card); box-shadow:0 12px 28px -15px rgba(30,23,12,.55); cursor:zoom-in; overflow:hidden}.photo img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:9px; transition:transform .45s cubic-bezier(.2,.7,.2,1)}.photo:hover{transform:translateY(-4px); box-shadow:0 15px 33px -13px rgba(30,23,12,.6)}.photo:hover img{transform:scale(1.035)}
    details{margin:12px 0; padding:0 22px; border:1px solid var(--cardborder); border-radius:16px; background:var(--card); box-shadow:0 10px 25px -22px rgba(15,12,7,.6)}summary{position:relative; padding:19px 38px 19px 0; cursor:pointer; font-weight:700; list-style:none}summary::-webkit-details-marker{display:none}summary::after{content:"\2756"; position:absolute; right:2px; color:var(--accent); transition:transform .25s ease-out}details[open] summary::after{transform:rotate(45deg)}details p{margin:0; padding:0 0 20px; color:var(--muted-deep)}
    .cross-sell-intro{margin:-16px auto 26px; text-align:center; color:var(--muted-deep)}.cross-sell-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}.cross-sell-card{display:flex; flex-direction:column; padding:24px; border:1px solid var(--cardborder); border-radius:22px 14px 24px 16px; background:var(--card); box-shadow:var(--shadow)}.cross-sell-card h3{margin:0 0 7px; color:var(--forest); font-size:21px}.cross-sell-price{margin:0 0 12px; color:var(--accent); font-weight:700}.cross-sell-card .teaser{margin:0 0 20px}.cross-sell-card .btn{align-self:flex-start; margin-top:auto}.cross-sell-card .btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
    .booking{scroll-margin-top:90px; margin:90px 0; padding:32px; border:1px solid var(--cardborder); border-radius:16px; background:var(--card); box-shadow:var(--shadow)}.booking h2{font-size:clamp(2rem,5vw,2.65rem); margin:0 0 14px}.booking-info{margin:0 0 26px}
    .grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}.field{display:flex; flex-direction:column; gap:6px}.wide{grid-column:1/-1}label,legend{font-weight:700; font-size:14px}input,textarea{width:100%; padding:11px 12px; border:1px solid var(--field-border); border-radius:9px; background:var(--field-bg); color:var(--ink); font:inherit}input::placeholder,textarea::placeholder{color:var(--muted-deep)}textarea{min-height:100px; resize:vertical}fieldset{margin:0; padding:0; border:0}.modes{display:flex; flex-wrap:wrap; gap:16px; margin-top:7px}.modes label{display:flex; align-items:center; gap:7px; font-weight:400}.modes input{width:auto}.hint{color:var(--muted-deep); font-size:12px}.actions{display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px}.fallback{font-size:14px}#confirmation{padding:26px; border:1px solid var(--cardborder); border-radius:16px; background:#fffaf0}#confirmation h2{color:var(--forest)}
    footer{padding:42px 0 100px; text-align:center; border-top:1px solid var(--line)}
    .footer-seal{display:block; width:148px; height:148px; margin:0 auto 18px}
    .footer-logo{display:flex; align-items:center; justify-content:center; gap:15px; margin-bottom:8px; font:700 15px var(--serif); letter-spacing:.16em}.footer-logo::before,.footer-logo::after{content:""; width:48px; height:1px; background:var(--earth)}.footer-flourish{color:var(--accent); letter-spacing:.45em; margin:8px}.footer-link{font-size:14px}
    dialog{border:0}#lightbox{z-index:var(--z-lightbox); max-width:min(92vw,1000px); padding:8px; border:1px solid var(--cardborder); border-radius:16px; background:var(--card); box-shadow:var(--shadow)}#lightbox::backdrop{background:rgba(28,22,13,.78)}#lightbox img{display:block; width:auto; height:auto; max-width:calc(92vw - 16px); max-height:85vh; border-radius:10px}.lightbox-close,.sheet-close{position:absolute; border:1px solid var(--cardborder); border-radius:50%; background:rgba(251,246,233,.95); color:var(--ink); cursor:pointer; font-size:20px}.lightbox-close{top:16px; right:16px; width:42px; height:42px}
    #rv-detail[open]{position:fixed; inset:0; z-index:var(--z-sheet); width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:auto; background:var(--cream); color:var(--ink)}#rv-detail::backdrop{background:rgba(32,25,15,.72)}.detail-inner{width:min(calc(100% - 40px),900px); margin-inline:auto; padding:30px 0 48px}.detail-header{position:relative; padding-right:58px}.detail-header h2{margin:0 0 10px; font-size:clamp(2rem,6vw,3.4rem)}.detail-header .fleet-class{display:inline-block}.detail-close{z-index:2; top:28px; right:max(20px,calc((100% - 900px)/2)); width:42px; height:42px}.detail-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}.detail-gallery .photo{padding:5px}.detail-caption,.detail-footnote{margin:8px 0 24px; color:var(--muted); font-size:13px}.detail-overview{font-size:18px}.detail-block{margin:24px 0; padding:22px; border:1px solid var(--cardborder); border-radius:16px; background:var(--card)}.detail-block h3,.detail-stay h3{margin:0 0 12px; color:var(--forest)}.detail-facts{margin:0}.detail-specs{width:100%; border-collapse:collapse}.detail-specs th,.detail-specs td{padding:8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}.detail-specs th{width:28%}.detail-features,.campgrounds{margin-bottom:0}.detail-availability{font-weight:700}.detail-availability.available{color:var(--ok)}.detail-availability.booked{color:var(--alert)}.detail-stay{margin:28px 0}.field-fact{font-weight:700}.detail-footer{position:sticky; bottom:0; padding:14px 0 calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,var(--cream) 18%)}
    .mobile-cta{display:none; position:fixed; z-index:var(--z-sticky); left:0; right:0; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--cardborder); background:rgba(251,246,233,.94); backdrop-filter:blur(12px)}.mobile-cta .btn{width:100%}
    /* Shared call bar (injected by site-shell.js). Two thumb targets, side by side:
       calling and finding the place are what a farm visitor on a phone actually wants. */
    .call-bar{gap:10px}.call-bar .btn{width:auto; flex:1; min-height:48px}
    .btn--ghost{background:var(--card); color:var(--ink); border:1px solid var(--cardborder)}
    .btn--ghost:hover{filter:brightness(.98)}
    /* Footer social row. Text links, no icon font or remote sprite: the site makes zero
       third-party requests and that stays true. */
    .site-social{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:12px; font-size:13px}
    .site-social a{font-weight:700; color:var(--earth); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; padding:0 4px}
    .site-social a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
    .reveal-ready .reveal{transform:translateY(20px); transition:transform .7s cubic-bezier(.2,.7,.2,1)}.reveal-ready .reveal.inview{transform:none}.reveal-ready .stagger>*{transform:translateY(20px); transition:transform .7s cubic-bezier(.2,.7,.2,1)}.reveal-ready .stagger.inview>*{transform:none}.stagger>*:nth-child(2){transition-delay:.1s}.stagger>*:nth-child(3){transition-delay:.2s}.stagger>*:nth-child(4){transition-delay:.3s}.stagger>*:nth-child(5){transition-delay:.4s}.stagger>*:nth-child(6){transition-delay:.5s}
    @media(max-width:700px){
      .site-header{padding:8px 0}.header-inner{min-height:47px; padding-left:15px}.brand{font-size:12px; letter-spacing:.11em}.back{font-size:12px;padding:7px 5px}.hero{margin-top:-63px; margin-bottom:92px; min-height:650px; border-radius:0}.hero-media{border-radius:0}.hero-copy{inset:auto 20px 130px}.hero-plaque{bottom:-68px; padding:16px; gap:11px}.hero-plaque .btn{display:none}.content-section{margin:74px 0}.steps{grid-template-columns:1fr; gap:28px; padding-left:31px}.steps::before{left:23px; right:auto; top:0; bottom:0; width:3px; height:auto; background:linear-gradient(transparent,var(--gold) 8%,var(--gold) 92%,transparent)}.step{padding:23px 20px 22px 37px}.node{left:0; top:50%; width:44px; height:44px}.stay-cards,.grid{grid-template-columns:1fr}.included{grid-template-columns:1fr 1fr}.wide{grid-column:auto}.booking{display:none}.mobile-cta{display:block}.mobile-cta.call-bar{display:flex}#booking-sheet[open]{position:fixed; inset:auto 0 0; z-index:var(--z-sheet); width:100%; max-width:none; max-height:92dvh; margin:0; padding:18px 18px calc(22px + env(safe-area-inset-bottom)); overflow:auto; border:1px solid var(--cardborder); border-radius:22px 22px 0 0; background:var(--card); color:var(--ink); box-shadow:0 -18px 50px -18px rgba(15,12,7,.7); transform:none; transition:transform .35s cubic-bezier(.2,.7,.2,1)}@starting-style{#booking-sheet[open]{transform:translateY(100%)}}#booking-sheet::backdrop{background:rgba(32,25,15,.62)}.grab{width:46px;height:5px;margin:0 auto 18px;border-radius:99px;background:#b9ad8d}.sheet-close{top:14px;right:14px;width:38px;height:38px}.sheet-title{padding-right:45px;margin:0 0 10px;font-size:30px}.sheet-info{font-size:14px;margin:0 0 22px;color:var(--muted-deep)}#rv-detail[open]{inset:0; width:100%; height:100dvh; max-height:none; border-radius:0}.detail-inner{width:100%; padding:22px 18px 38px}.detail-close{top:16px;right:14px}.detail-gallery{grid-template-columns:repeat(2,1fr)}footer{padding-bottom:110px}
    }
    @media(max-width:700px){
      .header-inner{position:relative}
      .site-nav-toggle{display:grid; width:36px; height:36px; padding:9px 7px; place-items:center; border:0; border-radius:50%; background:transparent; cursor:pointer}
      .site-nav-toggle span[aria-hidden]{position:relative; width:20px; height:2px; background:var(--ink)}
      .site-nav-toggle span[aria-hidden]::before,.site-nav-toggle span[aria-hidden]::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
      .site-nav-toggle span[aria-hidden]::before{top:-6px}.site-nav-toggle span[aria-hidden]::after{top:6px}
      .site-nav{display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; padding:10px; flex-direction:column; align-items:stretch; border:1px solid var(--cardborder); border-radius:18px; background:rgba(251,246,233,.98); box-shadow:var(--shadow); backdrop-filter:blur(10px)}
      .site-nav-toggle[aria-expanded="true"] + .site-nav{display:flex}.site-nav a{padding:10px 12px}
      .availability-checker{grid-template-columns:1fr}.availability-checker .btn{width:100%}
    }
    @media(max-width:430px){.included{grid-template-columns:1fr}.included-plaque{padding:20px}.hero-copy p{font-size:15px}.hero-plaque p{font-size:14px}}
    .stay-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.stay-choice-card{padding:28px;border:1px solid var(--cardborder);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.stay-choice-card h3{margin:0 0 10px;color:var(--forest);font-size:26px}.stay-choice-card p{margin:0 0 18px}.stay-choice-card .field-label{margin-bottom:8px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
    .animal-jump{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 18px;color:var(--muted);font-size:14px;font-weight:700}.animal-jump select{padding:9px 12px;border:1px solid var(--cardborder);border-radius:999px;background:var(--card);color:var(--ink);font:inherit}
    @media(max-width:700px){.stay-choice-grid{grid-template-columns:1fr}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important; transition:none!important}.reveal-ready .reveal,.reveal-ready .stagger>*{transform:none!important}}