/* Feather's site styles v4 2026-10-29. Shared by every page.
   Mobile first. No JavaScript needed. */
:root{
  --green:#34533b; --green-dark:#263f2c; --green-soft:#eef3ee;
  --gold:#e3ae4a; --gold-soft:#fbf3e2;
  --ink:#24292a; --ink-soft:#4d5552; --line:#e8e1d3; --paper:#ffffff; --cream:#faf7f0;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:12px; --wrap:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);padding-bottom:76px}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--green)}
a:hover{color:var(--green-dark)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:#fff;padding:10px 14px;border-radius:8px;z-index:20}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--serif);color:var(--green);font-weight:600;line-height:1.1;margin:0 0 .5em}
h2{font-size:clamp(1.9rem,4.5vw,2.6rem)}
h3{font-size:1.5rem}
p{margin:0 0 1em;max-width:62ch}
.eyebrow{display:block;font:600 .8rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.9rem}

/* Header */
.site-head{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.site-head .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.logo{font:italic 600 1.9rem/1 var(--serif);color:var(--green);text-decoration:none;letter-spacing:-.01em}
.nav{display:none;gap:22px;margin-left:12px}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--green)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.head-phone{display:none;color:var(--ink);text-decoration:none;font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:8px;background:var(--green);color:#fff;font:600 1rem/1.2 var(--sans);text-decoration:none;border:2px solid var(--green)}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#d49b33;border-color:#d49b33;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--green)}
.btn-ghost:hover{background:var(--green-soft);color:var(--green-dark)}
.site-head .btn{min-height:42px;padding:9px 14px;font-size:.92rem}

/* Hero */
.hero{padding:40px 0 28px}
.hero h1{font-size:clamp(2.6rem,9vw,4.4rem);margin-bottom:.35em}
.hero .lead{font-size:1.15rem;color:var(--ink-soft)}
.cta-box{margin-top:24px;padding:20px;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r);background:var(--paper);box-shadow:0 10px 30px rgba(38,63,44,.07);max-width:560px}
.cta-box p{margin:0 0 14px;font-weight:500}
.cta-actions{display:flex;flex-direction:column;gap:10px}
.cta-small{font-size:.9rem;color:var(--ink-soft);margin:12px 0 0}
.trust{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:8px}
.trust li{display:flex;gap:10px;align-items:center;font-weight:500}
.trust svg{width:22px;height:22px;flex:none;color:var(--green)}

/* Sections */
.section{padding:44px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--cream)}
.cards{display:grid;gap:16px;margin-top:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{display:flex;gap:12px;align-items:center}
.card h3 svg{width:34px;height:34px;flex:none;color:var(--green)}
.card p{margin:0}

/* Steps: vertical, one per line */
.steps{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:14px;max-width:640px}
.steps li{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.steps .num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:700 1.1rem/1 var(--sans)}
.steps strong{display:block;font-size:1.05rem}
.steps span.txt{color:var(--ink-soft)}

/* Prices */
.prices{display:grid;gap:16px;margin-top:20px}
.price{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--paper)}
.price .amt{font:600 2.4rem/1 var(--serif);color:var(--ink);margin:.1em 0 .2em}
.price .time{color:var(--ink-soft);margin:0 0 .6em}
.price .note{font-size:.92rem;color:var(--green);font-weight:600}
.extras{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:6px}
.extras li::before{content:"+ ";color:var(--green);font-weight:700}

/* Facts block */
.facts{margin:20px 0 0;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);max-width:760px}
.facts div{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 18px;border-top:1px solid var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font-weight:700;color:var(--green)}
.facts dd{margin:0}

/* Map */
.map{margin-top:20px;max-width:560px}
.map .hood{fill:#f4f1ea;stroke:var(--green);stroke-width:2}
.map .hood.on{fill:var(--green)}
.map .lbl{font:700 15px var(--sans);fill:var(--green)}
.map .lbl.on{fill:#fff}
.map .road{stroke:#b9b1a2;stroke-width:3;stroke-linecap:round}
.map .roadlbl{font:600 11px var(--sans);fill:#5f5a51;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.map a:focus-visible .hood{stroke:var(--gold);stroke-width:5}
.map-note{font-size:.88rem;color:var(--ink-soft);margin-top:8px}

/* FAQ */
.faq{margin-top:16px;max-width:760px}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:600;position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:1.5rem;color:var(--green)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 18px 16px;margin:0}

/* Closing */
.closing{text-align:left;padding:52px 0;background:var(--green);color:#fff}
.closing h2{color:#fff}
.closing p{color:#e7efe8}
.closing .btn-gold{margin-top:6px}
.closing a.plain{color:#fff}
.next-hoods{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:6px}

/* Footer */
.site-foot{padding:36px 0 28px;border-top:1px solid var(--line);font-size:.95rem}
.foot-grid{display:grid;gap:24px}
.site-foot h2{font:700 .8rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.site-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.site-foot a{color:var(--ink);text-decoration:none}
.site-foot a:hover{color:var(--green);text-decoration:underline}
.legal{margin-top:24px;color:var(--ink-soft);font-size:.85rem}
.legal p{margin:0 0 4px;max-width:none}

/* Sticky bottom bar on phones */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
.sticky-cta .btn{width:100%}

@media (min-width:720px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .prices{grid-template-columns:repeat(3,1fr)}
  .cta-actions{flex-direction:row}
  .facts div{grid-template-columns:180px 1fr;gap:16px}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .head-phone{display:inline}
}
@media (min-width:960px){
  .nav{display:flex}
  body{padding-bottom:0}
  .sticky-cta{display:none}
  .hero{padding:64px 0 40px}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
  .cta-box{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.site-head,.sticky-cta{display:none}body{padding:0}}

/* ===== Main site additions (v1 2026-10-28) ===== */
.logo-img{display:block;height:44px;width:auto}
.site-foot .logo-img{height:48px;margin-bottom:14px}
.nav .has-sub{position:relative}
.crumbs{font-size:.88rem;color:var(--ink-soft);padding-top:18px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"\203A";margin-right:6px;color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}
.hero h1 .sub{display:block;font:600 .8rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.9rem}
.hero .sketch{margin:22px 0 0;max-width:480px}
.pkg-switch{font-size:.95rem;margin:0 0 14px}
.pkg-switch strong{color:var(--green)}
.pkg-price{font:600 2.8rem/1 var(--serif);color:var(--ink);margin:.1em 0 .1em}
.pkg-time{color:var(--ink-soft);font-weight:500}
.chips{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--green-soft);color:var(--green-dark);border-radius:999px;padding:6px 12px;font-size:.9rem;font-weight:500}
.checks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;max-width:640px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
.checks.minus li::before{background:var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263f2c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;border:1px solid var(--gold)}
.gallery{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
.gallery figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:10px 14px;font-size:.9rem;font-weight:600;color:var(--green)}
.reviews{display:grid;gap:16px;margin-top:20px}
.review{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.review .stars{color:var(--gold);letter-spacing:2px;font-size:1.1rem;margin-bottom:8px}
.review blockquote{margin:0 0 12px;font-size:1.02rem}
.review figcaption{font-weight:600;color:var(--green);font-size:.92rem}
.relief{padding:52px 0;background:var(--cream);border-top:1px solid var(--line)}
.relief p{font-size:1.15rem}
.ben{display:grid;gap:24px;align-items:start}
.ben img{border-radius:var(--r);max-width:320px}
.sign{font:italic 600 1.6rem/1.2 var(--serif);color:var(--green);margin-bottom:0}
.price .tag{display:inline-block;background:var(--gold);color:var(--ink);font:700 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 10px;margin-bottom:10px}
.price .btn{margin-top:6px;width:100%}
.price .more{display:block;margin-top:12px;font-size:.95rem}
.diff-list{display:grid;gap:12px;margin-top:20px}
.diff-list p{margin:0;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r)}
.ask{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.ask summary{cursor:pointer;font-weight:600;color:var(--green);min-height:44px;display:flex;align-items:center}
.ask form{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.field input,.field textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid #cfc7b6;border-radius:8px;background:#fff;color:var(--ink);min-height:48px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--green)}
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jump{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0 0;padding:0;list-style:none;font-weight:600}
.faq-group{scroll-margin-top:90px}
.faq details ul{margin:0;padding:0 18px 16px 38px}
.hoods{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;max-width:560px}
.hoods a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);text-decoration:none;font-weight:600;min-height:52px}
.hoods a::after{content:"\2192";color:var(--gold)}
.thanks{padding:56px 0}
.thanks .steps{max-width:560px}
@media (min-width:720px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .diff-list{grid-template-columns:repeat(2,1fr)}
  .ben{grid-template-columns:320px 1fr;gap:40px}
}
@media (min-width:960px){
  .gallery.four{grid-template-columns:repeat(4,1fr)}
  .gallery.three{grid-template-columns:repeat(3,1fr)}
}

/* v25 2026-10-30: package cards list four plain lines; the full step list opens on one tap. Research block. */
.price .card-list { list-style: none; padding: 0; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.price .card-list li { position: relative; padding-left: 26px; line-height: 1.45; }
.price .card-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.price .every-step { margin: 0 0 var(--s4); border-top: 1px solid var(--line); }
.price .every-step summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--green); list-style: none; }
.price .every-step summary::-webkit-details-marker { display: none; }
.price .every-step summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; }
.price .every-step[open] summary::after { content: "\2212"; }
.price .every-step .checks { margin: 0 0 var(--s2); font-size: var(--fs-small); }
.research { margin-top: var(--s7); padding: clamp(20px, 3vw, 32px); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--r); max-width: 760px; }
.research h3 { margin: 0 0 var(--s3); }
.research .checks { margin-top: var(--s4); }
.research .close-line { margin: var(--s5) 0 0; font: 600 1.35rem/1.3 var(--serif); color: var(--green-dark); }

/* v32 price page tables: price bold, notes plain */
.cost.cost-plain td:last-child { font-weight: 400; }
.cost.cost-plain td:first-of-type { font-weight: 700; }

/* v33 privacy link under the booking button */
.bk-privacy { margin: var(--s2, 8px) 0 0; font-size: var(--fs-small, .875rem); }

/* v45: before/after pairs cut to the car (Grand Cherokee); keep their own shape */
.gallery.natural img{aspect-ratio:auto;height:auto}

/* v50 (Nov 9): thank-you page question line, sits right under the lead */
.thanks .thanks-q{margin:10px 0 0;font-weight:600}
.thanks .thanks-q a{font-weight:700}
.thanks > .wrap > .req-note{margin:14px 0 4px}

/* v50 (Nov 9): small Text button, top left on phones. The header stays on screen as you scroll. */
.head-text{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1.5px solid var(--forest,#263f2c);border-radius:999px;color:var(--forest,#263f2c);font-weight:700;font-size:.92rem;text-decoration:none;flex:none}
.head-text svg{flex:none}
@media (min-width:720px){.head-text{display:none}}
@media (max-width:360px){.head-text span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.head-text{padding:0 11px}}
.thanks .thanks-warm{margin:10px 0 0}
/* v50: the smallest phones (320px wide) got a sideways scroll from the day chips. 4 per row there. */
@media (max-width:350px){.days .day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* v50: room for the Text button on small phones; the header Book button stays on two lines at most */
@media (max-width:420px){.site-head .wrap{gap:10px}.site-head .head-right .btn{padding:8px 12px;font-size:.88rem;line-height:1.15}}

/* ===== Booking form v4 2026-10-29 ===== */
.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}
.book-box{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r);padding:20px;box-shadow:0 10px 30px rgba(38,63,44,.08);scroll-margin-top:84px;max-width:560px}
.book-h{margin:0 0 .3em}
.book-intro{margin:0 0 14px;color:var(--ink-soft)}
.book-form fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.book-form legend{font:700 1.05rem/1.3 var(--sans);color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:10px;padding:0}
.book-form legend .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.9rem}
.book-form.is-question legend .n{display:none}
.mode{display:flex;gap:8px}
.seg{position:relative;flex:1}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #cfc7b6;border-radius:8px;font-weight:600;font-size:.95rem;text-align:center;background:#fff}
.seg input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.pkg-pick{display:flex;flex-direction:column;gap:10px}
.pkg-opt{position:relative;display:block;cursor:pointer}
.pkg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pkg-body{display:block;padding:14px 16px 14px 46px;border:2px solid var(--line);border-radius:10px;background:#fff;position:relative}
.pkg-body::before{content:"";position:absolute;left:14px;top:17px;width:20px;height:20px;border-radius:50%;border:2px solid #b8b09f;background:#fff}
.pkg-opt input:checked+.pkg-body{border-color:var(--green);background:var(--green-soft)}
.pkg-opt input:checked+.pkg-body::before{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 4px #fff}
.pkg-opt input:focus-visible+.pkg-body{outline:3px solid var(--gold);outline-offset:2px}
.pkg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pkg-name{font-weight:700;font-size:1.05rem}
.pkg-amt{margin-left:auto;font:600 1.5rem/1 var(--serif);color:var(--green-dark)}
.pkg-tag{background:var(--gold);color:var(--ink);font:700 .7rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 8px}
.pkg-meta{display:block;margin-top:4px;font-size:.92rem;color:var(--ink-soft)}
.hint{font-size:.9rem;color:var(--ink-soft);margin:10px 0 0}
.day.soonest{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.day-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.day{font:inherit;min-height:56px;border:1px solid #cfc7b6;border-radius:8px;background:#fff;color:var(--ink);padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.day .dw{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.day .dd{font-weight:700;font-size:.95rem}
.day .dt{font-size:.68rem;font-weight:700;color:var(--green)}
.day.soonest{padding:12px 16px;min-height:52px;flex-direction:row}
.day.soonest .dw{font-size:.85rem;color:var(--green);font-weight:700}
.day[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.day[aria-pressed="true"] .dw,.day[aria-pressed="true"] .dt{color:#fff}
.day.full{background:#eeeae2;color:#9a9385;cursor:not-allowed}
.day.later{display:none}
.days.show-more .day.later{display:flex}
.day:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.more-days{margin-top:8px;background:none;border:0;color:var(--green);font:600 .95rem var(--sans);text-decoration:underline;cursor:pointer;min-height:44px;padding:0}
.sub-legend{font-weight:600;margin:14px 0 8px}
.times{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.time-opt{position:relative}
.time-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.time-opt span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border:1px solid #cfc7b6;border-radius:8px;background:#fff;font-weight:700}
.time-opt small{font-weight:500;color:var(--ink-soft);font-size:.82rem}
.time-opt input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.time-opt input:checked+span small{color:#fff}
.time-opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.time-opt.off span{background:#eeeae2;color:#9a9385}
.book-form .field{margin-bottom:12px}
.book-form .field.file input{min-height:auto;padding:10px;background:var(--cream)}
.book-form input:user-invalid,.book-form textarea:user-invalid{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.bk-extra{border:1px dashed #cfc7b6;border-radius:10px;padding:0 14px;margin-bottom:16px}
.bk-extra summary{cursor:pointer;font-weight:600;color:var(--green);min-height:48px;display:flex;align-items:center}
.bk-extra[open]{padding-bottom:14px}
.hookups{margin-top:12px!important}
.hookups legend{font-size:.95rem!important}
.hookups{display:flex;flex-wrap:wrap;gap:8px}
.hookups legend{width:100%}
.bk-summary{background:var(--cream);border-radius:8px;padding:10px 12px;font-weight:600;color:var(--green-dark);margin:0 0 12px}
.bk-error{background:var(--gold-soft);border:1px solid var(--gold);border-radius:8px;padding:10px 12px;font-weight:600;margin:0 0 12px}
.bk-submit{width:100%;min-height:54px;font-size:1.08rem}
.assure{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.assure li{display:flex;gap:8px;align-items:flex-start}
.assure li::before{content:"\2713";color:var(--green);font-weight:700}
.book-row{margin:22px 0 0}
.book-row .btn{min-width:220px}
.price .btn{margin-top:10px}
.sticky-book{display:flex;gap:8px;transition:transform .2s ease}
.sticky-book .btn-gold{flex:1}
.sticky-book .btn-ghost{flex:none;width:auto;padding:12px 18px}
.sticky-book.away{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.sticky-book{transition:none}}

/* ===== Booking and homepage v5 2026-10-29 ===== */
.car-back{margin-top:14px}
.extras{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.chk{position:relative;flex:1 1 140px}
.chk input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chk span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 12px;border:1px solid #cfc7b6;border-radius:8px;background:#fff;font-weight:600}
.chk small,.seats small{font-weight:500;color:var(--ink-soft)}
.chk input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.chk input:checked+span small{color:#fff}
.chk input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.seats{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #cfc7b6;border-radius:8px;background:#fff;padding:6px 12px;min-height:48px}
.seats label{font-weight:600}
.seats select{width:auto;min-width:72px;min-height:40px;font:inherit;border:1px solid #cfc7b6;border-radius:6px;background:#fff;padding:4px 8px}
.bk-step .bk-extra{margin-top:14px}
.bk-summary{display:flex;flex-direction:column;gap:2px}
.bk-summary strong{color:var(--green-dark)}
.bk-when{font-weight:500;color:var(--ink-soft)}
.bk-under{margin:10px 0 0;font-weight:600;text-align:center}
.two-cars{font-weight:600;color:var(--green)}
.next-open{font-weight:600;color:var(--green-dark);margin:14px 0 0}
.next-open strong{color:var(--ink)}
.proof{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:8px}
.proof li{display:flex;gap:10px;align-items:center;font-weight:600}
.proof svg{flex:none;width:22px;height:22px;color:var(--green)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.hero-actions a.second{font-weight:600}
.hero-photo{margin:22px 0 0;max-width:480px;border-radius:var(--r);overflow:hidden}
.hero-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.story p{max-width:38em}
.story .last{font:600 1.35rem/1.35 var(--serif);color:var(--green-dark)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair figure,.gallery.three figure{margin:0}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block}
.gallery.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.gallery.three img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.big-quote{margin:0 0 24px;padding:18px 22px;border-left:4px solid var(--gold);background:var(--paper);border-radius:0 var(--r) var(--r) 0}
.big-quote blockquote{margin:0;font:600 1.45rem/1.35 var(--serif);color:var(--green-dark)}
.big-quote figcaption{margin-top:8px;font-size:.92rem;color:var(--ink-soft)}
.journey{list-style:none;padding:0;margin:22px 0 0;max-width:640px;position:relative}
.journey li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding-bottom:22px;position:relative}
.journey li::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--line)}
.journey li:last-child::before{display:none}
.journey .ic{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.journey .ic svg{width:24px;height:24px}
.journey strong{display:block;font-size:1.08rem}
.journey .num{color:var(--gold);font-weight:700;margin-right:4px}
.journey .txt{display:block;color:var(--ink-soft);margin-top:2px}
.promise{background:var(--green);color:#fff}
.promise h2{color:#fff}
.promise p{max-width:36em;font-size:1.08rem}
.about-short p{max-width:36em}
@media (max-width:700px){.gallery.three{grid-template-columns:1fr 1fr}.big-quote blockquote{font-size:1.2rem}}

/* v45: Interior Only / Exterior Only, car size, wash add-on; privacy link underlined */
.solo-legend{margin:6px 0 0}
.size-pick{margin-top:12px}
.solo-sizes{font-size:.95rem;color:var(--ink-soft);margin:.2em 0 1em}
.sizes{flex-wrap:wrap}
.sizes .seg{flex:1 1 30%}
.sizes .seg span{min-height:48px;font-size:.9rem}
.wash-add{margin-top:12px}
.wash-add .chk{display:block}
.two-visit{margin-top:10px}
.bk-privacy a{text-decoration:underline;text-underline-offset:.18em}

.owner-photo{margin:1.2em 0 1.6em;max-width:400px}
.owner-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.owner-photo figcaption{font-size:.95rem;color:var(--green-dark);margin-top:.5em}
.owner-photo--small{max-width:280px;margin:1.6em 0}
/* v6 */
.price .mat,.hero .mat{font-size:.92rem;font-weight:600;color:var(--green-dark);margin:.4em 0}
.hero-sketch{margin:22px 0 0;max-width:480px}
.hero-sketch img{display:block;width:100%;height:auto}
.hero-sketch figcaption{margin-top:6px;font-size:.92rem;color:var(--ink-soft);font-style:italic}
.text-line{margin:10px 0 0;font-size:.95rem}

/* footer brand mark v5 */
.foot-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-sketch{width:120px;height:auto;border-radius:8px;opacity:.9}
/* v18 2026-10-29: our own font files. No Google Fonts call, so the page paints sooner on phones.
   Both are variable fonts: one file covers every weight we use. Latin letters only (covers ñ and curly quotes). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-v18.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/cormorant-garamond-v18.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 700; font-display: optional; src: url("../fonts/cormorant-garamond-italic-v18.woff2") format("woff2"); }


/* ===== Feather's design system v9 2026-10-29 =====
   Loaded last, so it sets the final spacing, type and rhythm for every page.
   One spacing scale: 4 8 12 16 24 32 48 72 96. Fluid type. Left-aligned text. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(56px, 8vw, 96px);
  --measure: 65ch;
  --wrap: 1160px;
  --r: 14px;
  --r-sm: 10px;
  --field-line: #cfc7b6;
  --shadow-1: 0 1px 2px rgba(38, 63, 44, .05), 0 4px 16px rgba(38, 63, 44, .05);
  --shadow-2: 0 2px 6px rgba(38, 63, 44, .06), 0 16px 40px rgba(38, 63, 44, .09);
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-h1: clamp(2.5rem, 1.55rem + 4.3vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.55rem + 2vw, 2.875rem);
  --fs-h3: clamp(1.375rem, 1.25rem + .55vw, 1.625rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Base */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  accent-color: var(--green);
}
::selection { background: var(--gold-soft); color: var(--ink); }
p, li, dd, blockquote { text-align: left; hyphens: manual; text-wrap: pretty; }
p { max-width: var(--measure); margin: 0 0 var(--s4); }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: var(--fs-h1); line-height: 1.04; margin: 0 0 var(--s5); }
h2 { font-size: var(--fs-h2); line-height: 1.1; margin: 0 0 var(--s5); }
h3 { font-size: var(--fs-h3); line-height: 1.2; margin: 0 0 var(--s3); }
.eyebrow { margin: 0 0 var(--s3); font-size: .8125rem; letter-spacing: .14em; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }

/* Layout */
.wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.section, .relief, .thanks { padding-block: var(--section); }
.closing { padding-block: var(--section); }
.section .wrap > :last-child,
.closing .wrap > :last-child,
.about-short > :last-child { margin-bottom: 0; }
.book-row { margin: var(--s6) 0 0; }
.book-row .btn { min-width: 240px; }

/* Focus: one calm, clear ring everywhere */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset .15s var(--ease);
}
.field input:focus-visible, .field textarea:focus-visible, .seats select:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--green);
}

/* Buttons and links */
.btn {
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  font-size: 1rem;
  letter-spacing: .005em;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.btn-gold { box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 16px rgba(227, 174, 74, .28); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.site-head .btn { min-height: 44px; padding: 10px 18px; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Header */
.site-head .wrap { min-height: 72px; gap: var(--s5); }
.nav { gap: var(--s5); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.head-right { gap: var(--s4); }
.head-phone { display: none; }
@media (min-width: 720px) { .head-phone { display: inline-flex; align-items: center; min-height: 44px; } }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 80px) var(--s7); }
.hero h1 { margin-bottom: var(--s5); }
.hero h1 .sub { margin-bottom: var(--s4); font-size: .8125rem; letter-spacing: .14em; line-height: 1.5; }
.hero .lead { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.6; margin-bottom: 0; }
.proof { margin: var(--s5) 0 0; gap: var(--s3); }
.proof li, .trust li { gap: var(--s3); }
.next-open { margin: var(--s5) 0 0; }
.hero-actions { margin-top: var(--s5); gap: var(--s3) var(--s5); }
.text-line { margin: var(--s4) 0 0; }
.hero-sketch, .hero .sketch, .hero-photo { margin: var(--s6) 0 0; }
.hero-sketch figcaption { margin-top: var(--s2); }
/* v23: real photo in the hero, in place of the truck sketch */
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: var(--r); }
.hero-photo figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }
.hero-actions .text-book { white-space: nowrap; }
.hero .book-box, .hero-grid > .book-box, .hero-grid > div + .book-box { margin-top: var(--s7); }
.pkg-switch { margin: 0 0 var(--s4); }
.pkg-price { margin: var(--s2) 0 var(--s2); }
.chips { margin: var(--s5) 0 0; gap: var(--s2); }
.chips li { padding: 6px 14px; }
.crumbs { padding-top: var(--s5); }

/* Cards: one radius, one border, one padding */
.card, .price, .review, .book-box, .gallery figure, .facts, .faq details, .hoods a, .diff-list p, .steps li {
  border-radius: var(--r);
  border-color: var(--line);
}
.card, .price, .review { padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-1); }
.cards, .reviews, .gallery, .diff-list { gap: var(--s4); margin-top: var(--s6); }

/* Prices: equal cards, buttons line up at the bottom */
.prices { gap: var(--s5); margin-top: var(--s6); align-items: stretch; }
.price { position: relative; display: flex; flex-direction: column; }
.price .tag {
  position: absolute; top: 0; left: clamp(20px, 2.4vw, 28px);
  transform: translateY(-50%); margin: 0; padding: 7px 12px;
}
.price h3 { margin: 0 0 var(--s2); }
.price .amt { margin: 0 0 var(--s3); }
.price p { margin: 0 0 var(--s3); }
.price .note { margin-bottom: var(--s3); }
.price .mat { margin: 0 0 var(--s5); }
.price .btn { margin-top: auto; width: 100%; }
.price .more { margin-top: var(--s3); align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.big-quote { margin: 0 0 var(--s6); padding: var(--s5) var(--s5); max-width: 720px; }
.prices + h3, .prices ~ h3 { margin-top: var(--s7); }
.checks { margin: var(--s4) 0 0; gap: var(--s3); max-width: 680px; }
.prices ~ p { margin-top: var(--s5); }
.prices ~ p + p { margin-top: 0; }

/* Before and after */
.pair { gap: var(--s4); margin-top: var(--s6); }
.pair figcaption, .gallery figcaption { padding: var(--s3) var(--s4); font-size: var(--fs-small); }
.pair figcaption { padding-inline: 0; }
.gallery.three { gap: var(--s4); margin-top: var(--s4); }
.section .gallery + p, .pair + .gallery + p { margin-top: var(--s5); }

/* Reviews */
.review blockquote { margin: 0 0 var(--s4); line-height: 1.6; }
.reviews + p { margin-top: var(--s5); }

/* How a visit goes */
.journey { margin: var(--s6) 0 0; max-width: 680px; }
.journey li { gap: var(--s4); padding-bottom: var(--s6); grid-template-columns: 48px 1fr; }
.journey li:last-child { padding-bottom: 0; }
.journey strong { margin-top: 10px; }
.journey .txt { margin-top: var(--s1); }
.steps { margin: var(--s6) 0 0; gap: var(--s3); }
.steps li { padding: var(--s4) var(--s5); gap: var(--s4); }

/* Promise, about, story */
.story .last { margin: var(--s5) 0 0; }
.sign { margin: var(--s5) 0 var(--s1); }
.owner-photo { margin: 0 0 var(--s6); }
.owner-photo figcaption { margin-top: var(--s3); }
.about-short h1 + .owner-photo { margin-top: var(--s2); }

/* Questions */
.faq { margin-top: var(--s6); max-width: 760px; }
.faq details { margin-bottom: var(--s3); transition: box-shadow .18s var(--ease); }
.faq details[open] { box-shadow: var(--shadow-1); }
.faq summary { padding: 18px 56px 18px var(--s5); min-height: 60px; display: flex; align-items: center; line-height: 1.4; }
.faq summary::after { right: var(--s5); top: 50%; transform: translateY(-50%); line-height: 1; }
.faq details p, .faq details ul { padding: 0 var(--s5) var(--s5); }
.faq + p { margin-top: var(--s5); }
.jump { gap: var(--s2) var(--s5); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; }
.facts { margin-top: var(--s6); }
.facts div { padding: var(--s4) var(--s5); }

/* Neighborhoods */
.hoods { margin: var(--s5) 0 0; gap: var(--s3); }
.hoods a { padding: var(--s4) var(--s5); min-height: 60px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.hoods a:hover { border-color: var(--green); box-shadow: var(--shadow-1); }
.map { margin-top: var(--s6); }
.next-hoods { margin: var(--s5) 0 0; gap: var(--s2); }
.next-hoods a { display: inline-flex; align-items: center; min-height: 44px; }

/* Closing band: readable on green */
.closing p, .closing .next-open, .closing .next-open strong { color: #fff; }
.closing .next-open { margin: 0 0 var(--s5); }
.closing h2 { margin-bottom: var(--s4); }

/* Footer */
.site-foot { padding-block: var(--s8) var(--s6); }
.site-foot .logo-img { margin-bottom: var(--s6); }
.foot-grid { gap: var(--s6); }
.site-foot h2 { margin: 0 0 var(--s2); }
.site-foot ul { gap: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-foot li:not(:has(a)) { min-height: 44px; display: flex; align-items: center; }
.legal { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* Booking card */
.book-box { padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-2); border-top-width: 4px; }
.book-h { margin: 0 0 var(--s2); }
.book-intro { margin: 0 0 var(--s5); }
.book-form fieldset { margin: 0 0 var(--s6); }
.book-form legend { margin-bottom: var(--s4); gap: var(--s3); }
.book-form .field { margin-bottom: var(--s4); }
.field label { margin-bottom: var(--s2); }
.field input, .field textarea { min-height: 52px; padding: 13px 16px; border-color: var(--field-line); border-radius: var(--r-sm); font-size: 1rem; transition: border-color .15s var(--ease); }
.field input:hover, .field textarea:hover { border-color: #b8b09f; }
.pkg-pick { gap: var(--s3); }
.pkg-body { padding: var(--s4) var(--s4) var(--s4) 48px; border-radius: var(--r-sm); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.pkg-body::before { left: 16px; top: 19px; }
.pkg-meta { margin-top: var(--s1); line-height: 1.5; }
.day.soonest { margin-bottom: var(--s3); border-radius: var(--r-sm); }
.day-grid { gap: var(--s2); }
.day { min-height: 60px; border-radius: var(--r-sm); border-color: var(--field-line); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.day:not(.full):not([aria-pressed="true"]):hover { border-color: var(--green); }
.more-days { margin-top: var(--s2); }
.sub-legend { margin: var(--s5) 0 var(--s3); }
.times { gap: var(--s2); }
.time-opt span, .seg span, .chk span { border-radius: var(--r-sm); border-color: var(--field-line); min-height: 56px; }
.car-back { margin-top: var(--s5); }
.hint { margin: var(--s2) 0 0; line-height: 1.5; }
.two-cars { margin-top: var(--s3); }

/* Extras sit side by side, not stacked with big gaps */
.book-form .extras { flex-direction: row; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.book-form .extras .chk { flex: 1 1 140px; }
.seats { min-height: 56px; padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-sm); border-color: var(--field-line); }
.seats label { line-height: 1.35; }
.seats select { min-height: 44px; min-width: 76px; border-radius: 8px; }
.bk-step .bk-extra, .book-form .bk-extra { margin: var(--s4) 0 0; padding: 0 var(--s4); border-radius: var(--r-sm); }
.bk-extra summary { min-height: 52px; line-height: 1.4; padding-block: var(--s2); }
.bk-extra[open] { padding-bottom: var(--s4); }
.mode { gap: var(--s2); }
.bk-summary { padding: var(--s4); border-radius: var(--r-sm); margin: 0 0 var(--s4); gap: var(--s1); }
.bk-error { padding: var(--s3) var(--s4); border-radius: var(--r-sm); margin: 0 0 var(--s4); }
.bk-submit { min-height: 56px; }
.bk-under { margin: var(--s3) 0 0; text-align: left; }
.book-form .cta-small, .book-box .cta-small { margin-top: var(--s3); text-align: left; }

/* Phone bar: phones only, never on a computer */
.sticky-cta { padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(38, 63, 44, .08); }
.sticky-book { gap: var(--s2); }

@media (min-width: 720px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); }
  .facts div { grid-template-columns: 200px 1fr; gap: var(--s5); }
  .pair { gap: var(--s5); }
}

@media (min-width: 960px) {
  .sticky-cta, .sticky-book { display: none; }
  body { padding-bottom: 0; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .hero .book-box, .hero-grid > .book-box, .hero-grid > div + .book-box { margin-top: 0; max-width: none; }
  .hero-sketch, .hero-photo { max-width: 460px; }
  .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Computers: the hero column beside the booking card (v12).
   v9 to v11 pinned the hero words at the top. On many screens they were taller than the window, so their
   bottom was cut off, and on the homepage the Bronco sketch slid over them. Now the whole left column
   scrolls normally until its last line is in view, then rests there while the card keeps going.
   The site script sets the resting spot (class js-pin). Without the script, nothing is pinned. */
@media (min-width: 960px) {
  .hero-grid > div:first-child { align-self: start; }
  .hero-grid > div:first-child.js-pin { position: sticky; }
  .hero-main .hero-sketch, .hero-main .hero-photo { margin-top: var(--s7); }
}

/* Computer screens: text-only sections read as two columns.
   Title on the left, words on the right, so lines stay short and nothing floats in empty space. */
@media (min-width: 960px) {
  .section.story > .wrap, #friends > .wrap, #area > .wrap,
  .section.nest > .wrap, .section.promise > .wrap, section[aria-labelledby="faq"] > .wrap,
  .gift-how > .wrap, .gift-faq > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .section.story > .wrap > *, #friends > .wrap > *, #area > .wrap > *,
  .section.nest > .wrap > *, .section.promise > .wrap > *, section[aria-labelledby="faq"] > .wrap > *,
  .gift-how > .wrap > *, .gift-faq > .wrap > * { grid-column: 2; }
  .section.story > .wrap > h2, #friends > .wrap > h2, #area > .wrap > h2,
  .section.nest > .wrap > h2, .section.promise > .wrap > h2, section[aria-labelledby="faq"] > .wrap > h2 {
    grid-column: 1; grid-row: 2 / span 12; position: sticky; top: 112px; margin: 0;
  }
  .section.nest > .wrap > .eyebrow { grid-column: 1; grid-row: 1; }
  .section.story > .wrap > h2, #friends > .wrap > h2, #area > .wrap > h2,
  .section.promise > .wrap > h2, section[aria-labelledby="faq"] > .wrap > h2 { grid-row: 1 / span 12; }
  .gift-how > .wrap > h2, .gift-faq > .wrap > h2 { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 112px; margin: 0; }
  .gift-how .steps { margin-top: 0; }
  .section.nest > .wrap > .eyebrow + h2 ~ * { grid-row: auto; }
  .section.nest > .wrap > p:first-of-type { grid-row: 1; }
  .faq { margin-top: 0; }
  #area .hoods { max-width: none; }
}

/* About page on computers: Ben's photo on the left, his story on the right. */
@media (min-width: 960px) {
  .wrap.about-short {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .wrap.about-short > * { grid-column: 2; }
  .wrap.about-short > .eyebrow, .wrap.about-short > h1 { grid-column: 1 / -1; }
  .wrap.about-short > h1 { margin-bottom: var(--s7); max-width: 22ch; }
  .wrap.about-short > .owner-photo { grid-column: 1; grid-row: 3 / span 20; position: sticky; top: 112px; margin: 0; }
  .wrap.about-short > .owner-photo.owner-photo--small { grid-column: 2; grid-row: auto; position: static; margin: var(--s6) 0; }
}

/* Thank-you page: room above each heading. */
.thanks h2 { margin-top: var(--s7); }

/* ===== Gift cards v10 2026-10-29 ===== */
/* The strip: one quiet line above the header. Off until the Stripe links are in, and only Nov 19 to Dec 31. */
.gift-strip { background: var(--green); color: var(--cream); font-size: .95rem; }
.gift-strip[hidden] { display: none; }
.gift-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; }
.gift-strip p { margin: 0; max-width: none; padding-block: var(--s2); }
.gift-strip a { color: var(--cream); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.gift-strip a:hover { text-decoration-thickness: 2px; }
.gift-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: calc(var(--s3) * -1);
  background: none; border: 0; border-radius: var(--r-sm); color: var(--cream); cursor: pointer; }
.gift-x:hover { background: rgba(255,255,255,.1); }
.gift-strip :focus-visible { outline-color: var(--cream); }

/* The /gift/ page */
.gift-top { padding-top: var(--s7); }
.gift-top .lead { margin-top: var(--s4); }
.gift-prices { max-width: 880px; }
@media (min-width: 720px) { .gift-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gift-soon { margin-top: auto; padding: var(--s4); border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: .95rem; }
.gift-soon a { white-space: nowrap; }
.gift-soon + .more, .gift-buy + .more { margin-top: var(--s4); }
.gift-how .steps { margin-top: var(--s5); }
.gift-how h3, .gift-terms h3 { margin-top: var(--s7); }
.gift-redeem, .gift-terms ul { margin: var(--s4) 0 0; padding-left: 1.2em; max-width: var(--measure); }
.gift-redeem li, .gift-terms li { margin-bottom: var(--s2); }
.gift-terms { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.gift-terms li { font-size: .92rem; color: var(--ink-soft); }

/* Booking form: gift code box */
.book-form .gift-code { margin-top: var(--s5); }
.book-form .gift-code input { text-transform: uppercase; letter-spacing: .04em; }
.book-form .gift-code input::placeholder { text-transform: none; letter-spacing: 0; }
.book-form .gift-code .hint { margin-top: var(--s2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ===== Scroll fixes v12 2026-10-29 ===== */
/* Header: no blur behind it. The blur repainted on every scroll step on phones, for almost no visual change. */
.site-head { background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Phone bar is 77px tall. Leave room so the last footer line never hides under it. */
@media (max-width: 959px) { body { padding-bottom: 88px; } }

/* v13 2026-10-29: solid header, one-line date tiles and package rows on phones */
.site-head { background: #fff; }
.day .dd { white-space: nowrap; }
@media (max-width: 420px) {
  .day .dd { font-size: .86rem; letter-spacing: -.01em; }
  .pkg-top { flex-wrap: nowrap; }
  .pkg-top .pkg-tag { white-space: nowrap; font-size: .72rem; }
  .pkg-top .pkg-amt { margin-left: auto; white-space: nowrap; }
}

/* v15 2026-10-29: Ben's dog photos. Soft corners and shadow to match the About photos, caption in small calm type. */
.dog-photo { margin: var(--s6) 0; max-width: 360px; }
.dog-photo img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--shadow-2); }
.dog-photo figcaption { margin-top: var(--s3); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.dog-photo--small { max-width: 240px; }
.dog-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s6) 0; max-width: 620px; }
.dog-pair .dog-photo { margin: 0; max-width: none; }
.extras-row { display: grid; gap: var(--s5); margin-top: var(--s5); align-items: center; }
.extras-row .dog-photo { margin: 0; }
.extras-row p { margin: 0; }
@media (min-width: 700px) { .extras-row { grid-template-columns: 220px minmax(0, 1fr); } }
/* Computer screens: the story photo sits under the title on the left, so that column isn't empty. */
@media (min-width: 960px) {
  .section.story > .wrap > h2 { grid-row: 1; position: static; }
  .section.story > .wrap > .dog-photo { grid-column: 1; grid-row: 2 / span 3; margin: var(--s5) 0 0; max-width: 340px; }
}

/* v16 2026-10-29: add-on pages (price table) and the "at a glance" facts block. */
.cost-wrap { overflow-x: auto; margin-top: var(--s5); max-width: 760px; }
.cost { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-variant-numeric: tabular-nums; }
.cost th, .cost td { text-align: left; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); vertical-align: top; }
.cost thead th { border-top: 0; font-size: var(--fs-small); color: var(--ink-soft); font-weight: 600; }
.cost tbody th { font-weight: 700; color: var(--green-dark, var(--green)); }
.cost td:last-child { font-weight: 700; }
.addon-how .checks { margin-top: 0; }
.glance .facts { margin-top: var(--s5); }
.glance .facts dd { line-height: 1.55; }
.hero .lead + p { margin-top: var(--s4); }
.hero .dog-photo { margin: var(--s5) 0; max-width: 320px; }
.prefill-note { flex: 1 1 100%; margin: var(--s1) 0 0; font-size: var(--fs-small); color: var(--ink-soft); }

/* ===== v17 2026-10-29: calmer, more open design =====
   Fewer boxes and borders. Sections change by a soft color shift, not a line.
   Bigger headings, more air, thin rules instead of outlined cards.
   Form fields keep their outlines, so it stays obvious where to tap and type. */
:root {
  --section: clamp(72px, 10vw, 136px);
  --fs-h1: clamp(2.75rem, 1.5rem + 5.2vw, 5.25rem);
  --fs-h2: clamp(2.25rem, 1.55rem + 2.8vw, 3.625rem);
  --r: 18px;
  --hair: rgba(38, 63, 44, .14);
}
h1, h2 { font-weight: 500; letter-spacing: -.018em; }
h1 { line-height: 1.02; }
h2 { line-height: 1.06; margin-bottom: var(--s6); }
.eyebrow, .hero h1 .sub { display: flex; align-items: center; gap: 12px; color: var(--green); }
.eyebrow::before, .hero h1 .sub::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold); }

/* Sections: no top lines, soft color changes */
.section { border-top: 0; }
.relief { border-top: 0; }
.site-head { border-bottom-color: rgba(38, 63, 44, .08); }

/* Hero: warm cream ground, the booking card floats on it */
.hero { background: var(--cream); padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 104px); }
.hero-sketch img, .hero .sketch img { mix-blend-mode: multiply; }
.hero .lead { color: var(--ink-soft); }
.book-box {
  border: 0; border-top: 0; border-radius: 24px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(38, 63, 44, .04), 0 28px 64px rgba(38, 63, 44, .11);
}

/* Ben's face in the first screen */
.host {
  display: inline-flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 0;
  color: var(--ink); text-decoration: none; font-size: var(--fs-small); line-height: 1.4;
}
.host picture { flex: none; }
.host img { display: block; width: 72px; height: 90px; border-radius: 12px; object-fit: cover; box-shadow: 0 1px 4px rgba(31, 42, 34, .14); }
.host strong { color: var(--green-dark); }
.host:hover span { text-decoration: underline; text-underline-offset: .18em; }
.host + .next-open { margin-top: var(--s5); }
/* v48: trust line under Ben's face */
.trust-strip {
  margin: var(--s4) 0 0; padding: var(--s4) var(--s4) var(--s4) var(--s5);
  background: var(--green-soft, #eef3ee); border-left: 4px solid var(--green); border-radius: var(--r-sm);
  max-width: 34rem; font-family: var(--sans);
}
.trust-strip p { margin: 0; }
.trust-strip .ts-big { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.25rem); font-weight: 650; line-height: 1.35; color: var(--green-dark); }
.trust-strip .ts-small { margin-top: var(--s2); font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.trust-strip + .next-open { margin-top: var(--s5); }
.gift-promise { margin-top: var(--s5); font-weight: 600; color: var(--green-dark); }

/* Meet Ben: photo and words side by side */
.meet-grid { display: grid; gap: var(--s6); align-items: center; }
.meet-photo { margin: 0; }
.meet-photo img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.meet-photo figcaption { margin-top: var(--s3); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.meet-copy > :last-child { margin-bottom: 0; }
.meet-copy p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.meet-copy .sign { margin-top: var(--s5); }
@media (max-width: 719px) {
  .meet-photo { margin-inline: calc(var(--gutter) * -1); }
  .meet-photo img { border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; }
  .meet-photo figcaption { padding-inline: var(--gutter); }
}
@media (min-width: 720px) {
  .meet-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 112px); }
  .meet-photo { max-width: 460px; }
}

/* Before and after: bigger photos, no frames */
.gallery figure { border: 0; background: none; border-radius: 0; overflow: visible; }
.gallery img, .pair img, .gallery.three img { border-radius: var(--r); }
.gallery figcaption, .pair figcaption { padding: var(--s3) 0 0; font-weight: 500; color: var(--ink-soft); }
.pair { margin-top: var(--s7); }
@media (max-width: 719px) {
  .pair { margin-inline: calc(var(--gutter) * -1); gap: 4px; }
  .pair img { border-radius: 0; }
  .pair figcaption { padding-inline: var(--gutter) 0; }
  .pair figure + figure figcaption { padding-inline: var(--s3) 0; }
}

/* Reviews: words, not boxes */
.reviews { gap: var(--s7) clamp(32px, 5vw, 80px); margin-top: var(--s7); }
.review { background: none; border: 0; border-radius: 0; box-shadow: none; padding: var(--s5) 0 0; border-top: 1px solid var(--hair); }
.review blockquote { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem); line-height: 1.4; font-weight: 500; color: var(--green-dark); }
.review figcaption { font-size: var(--fs-small); color: var(--ink-soft); }

/* How a visit goes: lighter markers */
.journey .ic { background: var(--paper); color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.journey li::before { width: 1px; left: 23.5px; background: var(--hair); }

/* Prices: three columns split by thin rules, no boxes */
.big-quote { border: 0; background: none; border-radius: 0; padding: 0; margin: 0 0 var(--s8); max-width: 900px; }
.big-quote::before { content: ""; display: block; width: 48px; height: 2px; background: var(--gold); margin-bottom: var(--s5); }
.big-quote blockquote { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem); line-height: 1.18; font-weight: 500; font-style: italic; }
.prices { gap: 0; margin-top: var(--s7); }
.price { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 44px 0 var(--s6); border-top: 1px solid var(--hair); }
.price .tag { top: 0; left: 0; transform: translateY(-50%); }
.price .amt { font-size: clamp(3rem, 2.4rem + 2vw, 4rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
@media (min-width: 960px) {
  .price { border-top: 0; border-left: 1px solid var(--hair); padding: 44px clamp(24px, 3vw, 44px) 0; }
  .price:first-child { border-left: 0; padding-left: 0; }
  .price:last-child { padding-right: 0; }
  .price .tag { top: 0; left: clamp(24px, 3vw, 44px); transform: none; }
  .price:first-child .tag { left: 0; }
}
.cost { border: 0; border-radius: 0; background: none; }
.cost thead th { border-bottom: 1px solid var(--hair); }
.cost th, .cost td { border-top-color: var(--hair); padding-inline: 0 var(--s4); }

/* Promise: a calm band, not a dark block */
.section.promise { background: var(--paper); color: var(--ink); }
.section.promise h2 { color: var(--green); }
.section.promise p { color: var(--ink); }

/* Questions, neighborhoods, facts: thin rules between rows */
.faq details { border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; margin: 0; box-shadow: none; }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq details[open] { box-shadow: none; }
.faq summary { padding: 20px 48px 20px 0; font-size: 1.0625rem; }
.faq summary::after { right: 0; }
.faq details p { padding: 0 0 var(--s5); }
.faq details ul { padding: 0 0 var(--s5) 1.2em; }
.hoods { gap: 0; }
.hoods a {
  border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; padding: var(--s4) 0; min-height: 64px;
  font: 500 clamp(1.25rem, 1.15rem + .4vw, 1.5rem)/1.25 var(--serif); color: var(--green-dark);
}
.hoods li:last-child a { border-bottom: 1px solid var(--hair); }
.hoods a:hover { border-color: var(--hair); box-shadow: none; color: var(--green); }
.facts { border: 0; border-radius: 0; background: none; overflow: visible; }
.facts div { padding: var(--s4) 0; border-top: 1px solid var(--hair); }
.facts div:first-child { border-top: 1px solid var(--hair); }
.facts div:last-child { border-bottom: 1px solid var(--hair); }

/* Other cards site-wide */
.card { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: var(--s5) 0 0; }
.cards { gap: var(--s6) clamp(24px, 4vw, 56px); }
.steps li { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: var(--s4) 0; }
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.diff-list p { background: none; border: 0; border-left: 2px solid var(--gold); border-radius: 0; padding: var(--s2) 0 var(--s2) var(--s4); }
.dog-photo img { box-shadow: none; }
.owner-photo img { border-radius: var(--r); }

/* Closing: more room */
.closing { padding-block: clamp(80px, 11vw, 144px); }
@media (min-width: 720px) { .pair { max-width: 900px; } }
.meet-copy .sign { font-size: 1.75rem; margin-bottom: var(--s2); }

/* v17 focus group fixes */
.nowrap { white-space: nowrap; }
.meet-photo figcaption, .owner-photo figcaption, .dog-photo figcaption { text-wrap: balance; }
@media (max-width: 719px) {
  .hero h1 .sub::before { display: none; }
}
@media (min-width: 960px) {
  .section.promise > .wrap > .eyebrow { grid-column: 1; grid-row: 1; }
  .section.promise > .wrap > h2 { grid-row: 2 / span 2; position: static; }
  .section.promise > .wrap > p:first-of-type { grid-row: 1 / span 2; }
  .section.promise > .wrap > .book-row { grid-row: 3; align-self: start; margin-top: var(--s5); }
}
.trust + .host { margin-top: var(--s5); }

/* v18 2026-10-29: answer-first line on the car seat page */
.hero .answer { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.6; color: var(--ink); margin: 0 0 var(--s4); }

/* v18 2026-10-29: form mistakes in words, with a darker warm color that passes contrast (7.5 to 1 on white). */
:root { --warn: #8f3a10; --warn-soft: #fdf1ea; --gold-text: #7d5300; }
.bk-error { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn); }
.field-error { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s2) 0 0; color: var(--warn); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.field-error .ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--warn); color: #fff; font: 700 .8rem/1 var(--sans); }
.book-form [aria-invalid="true"] { border-color: var(--warn) !important; box-shadow: 0 0 0 1px var(--warn); }
.book-form input:user-invalid, .book-form textarea:user-invalid { border-color: var(--field-line); box-shadow: none; }
.book-form input[aria-invalid="true"]:user-invalid { border-color: var(--warn); }
.pkg-pick:has(input[aria-invalid="true"]) .pkg-body, .times:has(input[aria-invalid="true"]) span { border-color: var(--warn); }
/* Step numbers in "How a visit goes": darker gold so they're readable */
.journey .num { color: var(--gold-text); }
/* Thank-you page: what they asked for */
.your-request { margin-top: var(--s6); max-width: 640px; }
.your-request h2 { margin-top: 0; }
.your-request .facts { margin-top: var(--s4); }
.req-note { margin-top: var(--s4); }

/* v18: shorter home page. Promise now sits inside "How a visit goes", with real photos. */
.promise-block { margin-top: var(--s6, 48px); padding-top: var(--s5, 32px); border-top: 1px solid var(--hair); max-width: 62rem; }
.promise-block h3 { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.1; color: var(--green); margin: .25em 0 .4em; text-wrap: balance; }
.promise-block > p { max-width: 36em; font-size: 1.08rem; }
.promise-block .gallery { margin-top: var(--s5, 32px); }
.promise-pics img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.nest-line { margin-top: var(--s5, 32px); padding-left: 16px; border-left: 3px solid var(--gold, #b8862b); max-width: 40em; }
.nest-line strong { font-family: var(--serif); font-size: 1.25rem; color: var(--green); }
@media (max-width: 719px) {
  .gallery.promise-pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .gallery.promise-pics figure:first-child { grid-column: 1 / -1; }
}

/* v19: package kind under each price name, materials said once, Dirty Birdie morning hint. */
.price .kind { margin: -.2em 0 .35em; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.mat-once { margin-top: var(--s5); font-size: .95rem; color: var(--ink-soft); }
.db-note { margin: var(--s3) 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 8px 8px 0; color: var(--ink); font-size: .92rem; }

/* v24: outside wash up front on price cards */
.price .wash { margin: 0 0 var(--s2); font-weight: 600; color: var(--green-dark); }
.water-line { margin-bottom: var(--s4); }
.bk-extras summary span { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) 0; }
.bk-extras .extras-prices { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-small); }

/* v26 2026-10-30: home headline matches the yard sign. Big serif line, then a spaced capitals line, in the sign's green. */
.hero h1.sign-h1 .sign-big { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 4.4rem); line-height: 1; letter-spacing: -.01em; color: var(--green-dark); }
.hero h1.sign-h1 .sign-tail { display: block; margin-top: .55em; font-family: var(--sans); font-weight: 700; font-size: clamp(.95rem, 1.9vw, 1.2rem); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }

/* v26: pay and cancel terms under the live total */
.bk-terms { margin: var(--s2) 0 var(--s3); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft, #4a4a4a); }

/* v26: Ben's dog photo on the home page */
.meet-copy .dog-meet { margin: var(--s4) 0 var(--s5); max-width: 220px; }
.hero .dog-form { margin: 0 0 var(--s4); max-width: 200px; }

/* v27 2026-10-30: the dogs and 4Runner drawing in the green closing band. Phone: drawing above the headline. Computer: drawing on the side. */
.close-drawing { margin: var(--s6) 0 0; max-width: 520px; }
.close-drawing img { display: block; width: 100%; height: auto; }
.close-drawing figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: rgba(255,255,255,.82); }
.closing h2 + .btn, .closing h2 + a { margin-top: var(--s4); }
@media (min-width: 900px) {
  .closing--drawing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--s7); align-items: center; }
  .closing--drawing .close-drawing { margin: 0; }
}

/* v28: the Bronco sketch has a white paper ground, so it sits on a soft card in the green band */
.close-drawing--card { max-width: 480px; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.close-drawing--card img { border-radius: 8px; }
@media (min-width: 900px) {
  .closing--drawing .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
}


/* v37 2026-11-03: wide photo row (CX-50 on /our-work/). Shows the whole 16:9 photo, no crop. One per row on phones, three on wide screens. */
.gallery.wide { grid-template-columns: 1fr; }
.gallery.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 960px) { .gallery.wide { grid-template-columns: repeat(3, 1fr); } }

/* v43 friends in the hat */
.hat-friends { margin: var(--s6, 40px) 0 var(--s5, 32px); }
.hat-friends h2 { margin-bottom: var(--s3, 12px); }
.hat-pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4, 16px); margin-top: var(--s4, 16px); max-width: 720px; }
.hat-pics figure { margin: 0; }
.hat-pics img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r, 12px); }
.hat-pics figcaption { padding: var(--s3, 12px) 0 0; font-size: var(--fs-small, .9rem); font-weight: 500; color: var(--ink-soft); }