/* ===========================================================================
   Peille Adventure
   Palette sampled from the logo and from a photograph of the village.
   Signature: the contour line. Section edges and route climb profiles are
   drawn as elevation, because elevation is what this business is about.
   =========================================================================== */

@font-face{font-family:Archivo;src:url(../fonts/archivo-latin.woff2) format('woff2');font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');font-weight:400 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(../fonts/inter-latin.woff2) format('woff2');font-weight:400 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-ext.woff2) format('woff2');font-weight:400 600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#1C2119;
  --pine:#2E3A2C;
  /* --green is the exact logo green. It is used for marks and rules.
     --green-ui is a shade darker so white text on it clears WCAG AA
     (5.07:1 rather than 4.36:1). Interactive surfaces use --green-ui.       */
  --green:#048C3A;
  --green-ui:#048035;
  --green-deep:#154026;
  --green-lift:#22A755;
  --yellow:#E8C31A;
  --limestone:#EDE7DC;
  --limestone-2:#F6F2EA;
  --stone:#B3B4AB;
  --olive:#6E6A52;
  --roof:#8A766B;

  --paper:var(--limestone-2);
  --text:var(--ink);
  --dim:#5C6157;

  --f-disp:Archivo,"Helvetica Neue",Arial,sans-serif;
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:74rem;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r:14px;
  --r-sm:9px;

  --sh-1:0 1px 2px rgba(28,33,25,.07),0 4px 14px rgba(28,33,25,.05);
  --sh-2:0 10px 34px rgba(28,33,25,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The top bar is sticky and 64px tall, so an anchor jump would otherwise park
   the section heading underneath it. */
:target,section[id]{scroll-margin-top:76px}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 clamp(1rem,.97rem + .18vw,1.1rem)/1.65 var(--f-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,picture{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:700;line-height:1.08;letter-spacing:-.022em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}

.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.muted{color:var(--dim)}
.h2{font-size:clamp(1.85rem,1.35rem + 2.1vw,3.1rem);margin-bottom:.5em}
.h4{font-size:clamp(1.1rem,1.03rem + .35vw,1.3rem);margin-bottom:.35em}
.h5{font-size:.98rem;font-family:var(--f-disp);letter-spacing:.005em;margin-bottom:.45em}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);color:var(--dim);max-width:46ch;line-height:1.6}
.lede--wide{max-width:62ch}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:.85rem 1.15rem;border-radius:0 0 var(--r-sm) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0;outline:3px solid var(--yellow);outline-offset:-3px}

/* Not :where() here: zero specificity loses to component rules, and a focus
   ring that loses is a focus ring that does not exist. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--green);
  outline-offset:3px;
  border-radius:4px;
}
/* Over dark grounds and photographs the green ring is hard to see, so those
   contexts get a white one. */
.sec--dark a:focus-visible,
.sec--dark button:focus-visible,
.sec--dark summary:focus-visible,
.hero a:focus-visible,
.foot a:focus-visible{
  outline-color:#fff;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--green-ui);--fg:#fff;--bd:var(--green-ui);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  padding:.72rem 1.15rem;border-radius:999px;
  font:600 .95rem/1 var(--f-body);text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,color .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{box-shadow:0 6px 18px rgba(4,140,58,.28)}
.btn--primary:hover{--bg:var(--green-lift);--bd:var(--green-lift)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(28,33,25,.28)}
.btn--ghost:hover{--bg:rgba(28,33,25,.05);--bd:rgba(28,33,25,.5)}
.sec--dark .btn--ghost{--fg:#F2F0E8;--bd:rgba(255,255,255,.42)}
.sec--dark .btn--ghost:hover{--bg:rgba(255,255,255,.1);--bd:#fff}
.btn--lg{padding:.95rem 1.6rem;font-size:1.02rem}
.btn--sm{padding:.52rem .95rem;font-size:.86rem}
.ico{width:1.05em;height:1.05em;fill:currentColor;flex:none}

.link{color:var(--green-deep);font-weight:600;text-underline-offset:3px}
.sec--dark .link{color:#9BE3B4}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:80;
  background:rgba(246,242,234,.82);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.topbar.is-stuck{border-bottom-color:rgba(28,33,25,.1);box-shadow:0 4px 20px rgba(28,33,25,.05)}
.topbar__in{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:none}
.brand img{border-radius:7px}
.brand__name{font:700 1.05rem/1 var(--f-disp);letter-spacing:-.02em}
.brand__thin{font-weight:400;color:var(--dim);margin-left:.28em}
.nav{display:none;gap:1.5rem;margin-left:auto;font-size:.95rem}
.nav a{text-decoration:none;color:var(--dim);font-weight:500;padding:.3rem 0;position:relative}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--green);transition:right .22s ease}
.nav a:hover::after{right:0}
.topbar__right{display:flex;align-items:center;gap:.85rem;margin-left:auto}
.nav + .topbar__right{margin-left:1.6rem}

/* Plain text, not a pill, and placed after the CTA. A bordered switch with a
   filled active chip read as a second button and won the eye on contrast
   alone. Switching language is a utility, so it is set as quiet text at the
   end of the bar; tap targets stay 44px tall through padding rather than
   through a visible shape. */
.lang{display:flex;align-items:center}
.lang__btn{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:500 .82rem/1 var(--f-body);letter-spacing:.03em;color:var(--dim);
  padding:.7rem .4rem;min-height:44px;transition:color .15s;
}
.lang__btn + .lang__btn{position:relative;margin-left:.5rem}
.lang__btn + .lang__btn::before{
  content:"";position:absolute;left:-.25rem;top:50%;transform:translateY(-50%);
  width:1px;height:.85em;background:rgba(28,33,25,.22);
}
.lang__btn:hover{color:var(--ink)}
.lang__btn.is-on{color:var(--ink);font-weight:700}
.btn--call{display:none}

@media (min-width:800px){
  .nav{display:flex}
  .btn--call{display:inline-flex}
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Copy sits high-left; the bike occupies the lower left of the photograph, so
   anchoring the text to the top keeps the subject visible. */
.hero{position:relative;min-height:clamp(31rem,80svh,47rem);display:grid;align-items:start;background:var(--pine)}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* height:100% has to beat the global `img{height:auto}` that follows it */
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:32% 50%}
/* Narrow screens: copy spans the full width, so shade from the top down.
   Wide screens: copy moves to the right half, so the weight moves with it and
   the bike on the left stays clear. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(20,28,18,.76) 0%,rgba(20,28,18,.58) 46%,rgba(20,28,18,.46) 70%,rgba(20,28,18,.58) 100%);
}
@media (min-width:1000px){
  /* The copy sits in the right half, so that is the side that has to stay dark
     enough for small text. Measured over the sky, the old gradient bottomed out
     at .04 alpha there and left the score line at 2.3:1. This runs the other
     way: lightest over the bike on the left, firm under the copy on the right,
     with a flat floor so no part of the text ever sits on bare sky. */
  .hero__scrim{
    background:
      linear-gradient(75deg,rgba(20,28,18,.30) 0%,rgba(20,28,18,.34) 30%,rgba(20,28,18,.52) 55%,rgba(20,28,18,.66) 78%,rgba(20,28,18,.72) 100%),
      linear-gradient(to top,rgba(20,28,18,.38) 0%,transparent 32%),
      rgba(20,28,18,.22);
  }
}
.hero__body{
  width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto;
  padding-block:clamp(3rem,9vh,5rem) clamp(5.5rem,13vh,8rem);
  color:#fff;position:relative;z-index:1;
}
/* Wide screens: the bike stands in the left of the frame, so the copy moves to
   the right half and stops covering the subject. */
@media (min-width:1000px){
  .hero__body{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem}
  .hero__copy{grid-column:2}
}
.hero__title{
  font-size:clamp(1.8rem,1.1rem + 2.9vw,3rem);
  letter-spacing:-.028em;line-height:1.06;
  max-width:24ch;
  text-wrap:balance;
  text-shadow:0 2px 8px rgba(20,28,18,.55),0 2px 30px rgba(20,28,18,.4);
  margin-bottom:.32em;
}
/* The tagline. The h1 above states the service plainly; this says what you
   actually get. Set in the body face so it supports rather than competes. */
.hero__lead{
  font:400 clamp(1.05rem,1rem + .55vw,1.32rem)/1.45 var(--f-body);
  color:rgba(255,255,255,.95);
  margin:0 0 1.7em;
  max-width:42ch;
  text-shadow:0 1px 3px rgba(20,28,18,.85),0 2px 18px rgba(20,28,18,.55);
}
.hero__lead::after{
  content:"";display:block;width:2.6rem;height:2px;margin-top:.95rem;
  background:var(--yellow);border-radius:2px;
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem}
/* Beside the button, where "can I call right now?" is the live question. Not
   inside it: a button's label should name what happens when you press it, and
   folding the hours in would make them part of the link's accessible name.
   No ground of its own, so the CTA stays the only object in the row. */
.hero__hours{
  margin:0;font-size:.9rem;color:#fff;
  text-shadow:0 1px 3px rgba(20,28,18,.95),0 2px 12px rgba(20,28,18,.85);
}
/* Narrow screens wrap the hours below the button, onto a brighter part of the
   photograph where they measured 3.85:1. There they get a ground. */
@media (max-width:412px){
  .hero__hours{
    padding:.25rem .5rem;border-radius:5px;
    background:rgba(14,22,14,.6);
  }
}

/* the signature contour, sitting on the section edge */
.contour{position:absolute;left:0;width:100%;pointer-events:none}
.contour path{fill:var(--paper)}
.contour--hero{bottom:-1px;height:clamp(38px,6vw,84px);z-index:2}
.contour--top{top:-1px;height:clamp(28px,3.6vw,58px)}
.contour--top path{fill:var(--paper)}
.contour--bottom{bottom:-1px;height:clamp(28px,3.6vw,58px)}
.contour--bottom path{fill:var(--paper)}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec{padding-block:clamp(3.4rem,8vw,6.4rem);position:relative}
.sec--dark{background:var(--pine);color:#F2F0E8}
.sec--dark .lede,.sec--dark .muted{color:rgba(242,240,232,.72)}
.sec--dark .h2{color:#fff}

/* ── Google score ──────────────────────────────────────────────────────────
   Sits under the hero buttons, so it reads as reassurance at the moment of
   deciding to call. On the photograph it needs its own ground to stay legible. */
.score{margin:1.25rem 0 0}
/* A text link, not a third button. It reassures at the moment of deciding to
   call; it must not compete with the two CTAs above it. Legibility over the
   photograph comes from the shadow, since there is no ground behind it. */
.score__link{
  display:inline-flex;align-items:baseline;gap:.45rem;
  text-decoration:none;color:#fff;
  /* This is the smallest text on the hero and it sits wherever the photograph
     happens to be brightest, so measured contrast swung from 9:1 to 2.6:1 with
     viewport width. It gets a soft wash of its own. No border, no pill radius
     and no hover fill, so it still reads as a line of text rather than a third
     button competing with the two CTAs above. */
  padding:.3rem .55rem;border-radius:5px;
  background:rgba(14,22,14,.58);
  text-shadow:0 1px 3px rgba(20,28,18,.9);
}
.score__link:hover span:last-child{text-decoration:underline}
/* A lighter gold than --yellow. The brand yellow is a mid tone that only
   reaches 3.1:1 against the hero ground; this clears AA and still reads gold. */
.score__stars{color:#FFD84D;letter-spacing:.06em;font-size:.98rem}
.score__link strong{font:600 1.05rem/1 var(--f-disp);color:#fff}
.score__link span:last-child{color:rgba(255,255,255,.92);font-size:.9rem}

/* What you hire */
.offer__grid{display:grid;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media (min-width:900px){.offer__grid{grid-template-columns:1fr 1fr}}
.offer__fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2)}
.offer__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

.price{display:flex;gap:.85rem;margin:1.6rem 0 2rem;flex-wrap:wrap}
.price__cell{
  flex:1 1 9rem;background:#fff;border:1px solid rgba(28,33,25,.09);
  border-radius:var(--r);padding:1rem 1.15rem;box-shadow:var(--sh-1);
}
.price__label{display:block;font-size:.86rem;color:var(--dim);margin-bottom:.28rem}
.price__fig{font:700 clamp(1.9rem,1.5rem + 1.4vw,2.5rem)/1 var(--f-disp);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.price__cur{margin-left:.06em}

.ticks li{position:relative;padding-left:1.65rem;margin-bottom:.5rem;color:var(--dim)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.72rem;height:.4rem;
  border-left:2.2px solid var(--green);border-bottom:2.2px solid var(--green);
  transform:rotate(-45deg);
}
.src{margin-top:1.6rem;font-size:.88rem}

/* ── Route finder ──────────────────────────────────────────────────────── */
.routes .lede{margin-bottom:2.4rem}
.finder{display:grid;gap:clamp(1.6rem,3.5vw,3rem)}
@media (min-width:1000px){
  .finder{grid-template-columns:minmax(15rem,20rem) 1fr;align-items:start}
  .finder__controls{position:sticky;top:5.2rem}
}

.qs{border:0;padding:0;margin:0 0 1.5rem}
.qs__q{font:600 .95rem/1.3 var(--f-body);color:#fff;padding:0;margin-bottom:.7rem}
.qs__opts{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:.5rem .85rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.26);
  font-size:.88rem;color:rgba(242,240,232,.86);
  transition:background-color .16s,border-color .16s,color .16s;
}
.chip:hover span{border-color:rgba(255,255,255,.55);color:#fff}
.chip input:checked + span{background:var(--green-ui);border-color:var(--green-ui);color:#fff;font-weight:600}
.chip input:focus-visible + span{outline:3px solid #fff;outline-offset:2px}

/* Cards keep a minimum height so a short result list still reads as a set
   rather than as a mistake. */
.finder__results{min-height:100%}

.finder__count{font:600 .9rem/1 var(--f-body);color:rgba(242,240,232,.66);margin:0 0 1rem;letter-spacing:.01em}
.finder__none{max-width:46ch;color:rgba(242,240,232,.8);background:rgba(0,0,0,.16);padding:1.1rem 1.25rem;border-radius:var(--r);border-left:2px solid var(--yellow)}

.cards{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}

.card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:1.1rem 1.15rem 1rem;
  display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.card:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.085);transform:translateY(-2px)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.card__name{font:700 1.06rem/1.2 var(--f-disp);color:#fff;letter-spacing:-.015em}
.card__ease{
  flex:none;font:600 .7rem/1 var(--f-body);letter-spacing:.05em;text-transform:uppercase;
  padding:.34rem .5rem;border-radius:6px;
}
.ease-1{background:rgba(4,140,58,.24);color:#8FE3AE}
.ease-2{background:rgba(232,195,26,.2);color:#F0D75F}
.ease-3{background:rgba(196,120,90,.22);color:#EDA98C}

.card__blurb{font-size:.92rem;color:rgba(242,240,232,.74);line-height:1.55;margin:0;flex:1}

/* the climb profile: shape is generated from the route's real ascent */
.card__profile{width:100%;height:28px;overflow:visible}
.card__profile path{fill:none;stroke:var(--yellow);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.card__profile .base{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 3}

.card__stats{display:flex;align-items:baseline;gap:1rem;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.stat{display:flex;align-items:baseline;gap:.28rem}
.stat b{font:700 1.02rem/1 var(--f-disp);color:#fff}
.stat span{font-size:.8rem;color:rgba(242,240,232,.6)}
.card__ffc{font-size:.74rem;color:rgba(242,240,232,.44);margin-left:auto}

/* ── How it works ──────────────────────────────────────────────────────── */
.how__grid{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:900px){.how__grid{grid-template-columns:1fr 1fr}}
.how__steps{display:grid;gap:1.5rem}
.step{padding-left:1.3rem;border-left:2px solid var(--stone);transition:border-color .2s}
.step:hover{border-left-color:var(--green)}
.step p{color:var(--dim);margin:0;font-size:.98rem}
.how__fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);order:-1}
@media (min-width:900px){.how__fig{order:0}}
.how__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── Reviews ───────────────────────────────────────────────────────────── */
.reviews{background:var(--limestone)}
.quotes{display:grid;gap:1rem}
@media (min-width:760px){.quotes{grid-template-columns:1fr 1fr}}
.quote{
  background:#fff;border-radius:var(--r);padding:1.35rem 1.4rem;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:.8rem;
  border-top:3px solid var(--green);
}
.quote blockquote{margin:0;font-size:1rem;line-height:1.6}
.quote__gloss{font-size:.88rem;color:var(--dim);line-height:1.55;margin:0;padding-top:.7rem;border-top:1px dashed rgba(28,33,25,.14)}
.quote__by{display:flex;align-items:baseline;gap:.55rem;margin-top:auto;font-size:.86rem;flex-wrap:wrap}
.quote__by b{font-family:var(--f-disp);font-size:.94rem}
.quote__by span{color:var(--dim)}
.quote__stars{color:var(--yellow);font-size:.82rem;letter-spacing:.05em;margin-left:auto}

/* ── About ─────────────────────────────────────────────────────────────── */
.about__grid{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:900px){.about__grid{grid-template-columns:1fr 1fr}}
.about__fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2)}
.about__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about__text p{color:var(--dim);max-width:52ch}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact__grid{display:grid;gap:clamp(2rem,4vw,3.4rem)}
@media (min-width:900px){.contact__grid{grid-template-columns:1.05fr .95fr}}
.contact__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.contact__facts{display:grid;gap:1.5rem;align-content:start}
@media (min-width:560px) and (max-width:899px){.contact__facts{grid-template-columns:1fr 1fr}}
.fact{border-top:1px solid rgba(255,255,255,.16);padding-top:.9rem}
.fact .h5{color:#fff}
.fact p,.fact address{color:rgba(242,240,232,.78);margin:0 0 .4rem;font-size:.97rem}
.drive{display:grid;gap:.35rem}
.drive li{display:flex;align-items:baseline;gap:.5rem;color:rgba(242,240,232,.78);font-size:.97rem}
.drive b{font-family:var(--f-disp);color:#fff;font-variant-numeric:tabular-nums}
.drive .dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.24);transform:translateY(-.25em)}

/* ── Footer ────────────────────────────────────────────────────────────────
   One band, not three. The legal disclosures used to sit in a pale section of
   their own, as white cards, above a dark footer that repeated the same two
   links. That gave boilerplate the loudest treatment on the page and said
   everything twice. They are folded in here and set as quiet text, so the page
   closes on the phone number instead. */
.foot{background:var(--ink);color:rgba(242,240,232,.72);
  padding-block:clamp(3.2rem,5vw,4.2rem) 2rem;font-size:.9rem;
  position:relative;overflow:hidden}
/* The contact section above is also dark: only 1.37:1 between the two grounds,
   which read as one long block. The contour carries the boundary instead, and
   fills with the section above so it reads as that section's edge. */
.contour--foot{top:-1px;height:clamp(20px,2.4vw,40px)}
.contour--foot path{fill:var(--pine)}
.foot__in{display:grid;gap:1.6rem}
.foot .muted{color:rgba(242,240,232,.58)}

/* Icons, not words: the phone number and hours are already in the contact
   section directly above, so the footer does not repeat them. */
.foot__social{display:flex;gap:.4rem}
.foot__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:-.6rem;
  color:rgba(242,240,232,.72);border-radius:50%;
  transition:color .16s ease,background-color .16s ease;
}
.foot__social a + a{margin-left:0}
.foot__social a:hover{color:#fff;background:rgba(255,255,255,.08)}
.foot__social svg{width:20px;height:20px;fill:currentColor}

/* Legal disclosures: hairline rules, no cards, no fill. */
.foot__legal{border-top:1px solid rgba(255,255,255,.1)}
.disc{border-bottom:1px solid rgba(255,255,255,.1)}
.disc summary{
  cursor:pointer;padding:.9rem 0;font:500 .9rem/1 var(--f-body);
  color:rgba(242,240,232,.8);
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:44px;
}
.disc summary:hover{color:#fff}
.disc summary::-webkit-details-marker{display:none}
.disc summary::after{content:"+";font-size:1.1rem;font-weight:400;color:rgba(242,240,232,.55)}
.disc[open] summary::after{content:"–"}
.disc__body{padding:0 0 1.2rem;font-size:.88rem;color:rgba(242,240,232,.66);max-width:68ch}
.disc__body .h5{color:rgba(242,240,232,.92);margin-top:1.1rem}
.disc__body .h5:first-child{margin-top:0}

.foot__copy{margin:0;font-size:.82rem}

/* ── Scroll reveal (quiet, and off when reduced motion is asked for) ───── */
/* Content is visible by default. The hidden state is applied only once JS has
   confirmed it can reveal it again (html.js), so a script failure or a blocked
   file can never leave a section permanently blank. */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .6s ease var(--rv-delay,0ms),transform .6s cubic-bezier(.2,.7,.3,1) var(--rv-delay,0ms)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv.in,.js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .btn:hover,.card:hover{transform:none}
}

@media print{
  .topbar,.hero__cta,.finder__controls,.contour{display:none}
  body{background:#fff}
  /* Someone printing this wants the number and the address, so the footer
     prints as ink on paper rather than as a solid dark block. */
  .foot{background:#fff;color:#000;border-top:1px solid #999}
  .disc summary,.disc__body,.disc__body .h5,.foot .muted{color:#000}
  .disc[open] .disc__body{display:block}
  .foot__social{display:none}
}