/* Takenaga Detailing — single stylesheet.
   Colours are measured from the shop sign (brand/source/takenaga-sign-reference.jpg). */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: italic; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }

:root {
  --ink: #040605;          /* sign background */
  --ink-2: #080b09;
  --ink-3: #0e130f;
  --line: #1d271f;
  --line-strong: #2c3a2e;
  --sign-green: #5f8c52;   /* sign tagline + rules */
  --swash: #4a7640;        /* brush panel green (white text on it ≥ 4.5:1) */
  --bamboo: #3f6a37;
  --leaf: #8cc277;         /* readable green for small text on black */
  --action: #7db868;       /* button green (dark text on it ≈ 7.6:1) */
  --action-hover: #96cd82;
  --paper: #f3f2ed;
  --muted: #aab3a9;
  --focus: #c9f0b4;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1100px;
  --ease-out: cubic-bezier(.22, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.125rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--leaf); text-underline-offset: .18em; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { color: var(--action-hover); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  padding: .7rem 1rem; background: var(--paper); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; position: relative; z-index: 1; }

.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7rem 1.4rem;
  border: 1.5px solid transparent; border-radius: 3px;
  font: 700 1.15rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-out);
}
.btn .icon--ext { width: .8em; height: .8em; stroke-width: 2.2; transition: transform .18s var(--ease-out); }
.btn:hover .icon--ext { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 54px; padding: .85rem 1.7rem; font-size: 1.25rem; }
.btn--primary { background: var(--action); color: var(--ink); }
.btn--primary:hover { background: var(--action-hover); color: var(--ink); transform: translateY(-1px); }
.btn--ghost { border-color: rgba(243, 242, 237, .38); color: var(--paper); }
.btn--ghost:hover { border-color: var(--leaf); color: var(--leaf); }
.btn--tier, .btn--line { border-color: var(--sign-green); color: var(--paper); }
.btn--tier { width: 100%; }
.btn--tier:hover, .btn--line:hover { background: var(--action); border-color: var(--action); color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- Bamboo (artwork from the sign) ---------- */
.bamboo { position: absolute; pointer-events: none; user-select: none; height: auto; max-width: none; z-index: 0; }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(600px, 94svh, 900px);
  display: flex; flex-direction: column;
  padding: 0 0 clamp(3rem, 7vh, 5rem);  /* top spacing comes from the site header */
  overflow: hidden;
  background: var(--ink);
}
.bamboo--hero-left { top: 0; left: 0; width: clamp(150px, 23vw, 350px); }
.bamboo--hero-right { top: 0; right: 0; width: clamp(186px, 28.5vw, 434px); }

/* ---------- Site header (same on every page) ----------
   Logo row, then nav row, each centred on its own, so every page puts them in the same place whatever
   the logo's width. Homepage: inside the hero, above its bamboo. About: first thing on the page. */
.sitehead { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem 1.25rem 0; }
.sitehead__brand {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .3rem;
  color: var(--paper); text-decoration: none;
  font: 800 1.15rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.sitehead__brand:hover { color: var(--leaf); }
.sitehead__brand img { width: 52px; height: auto; }
.topnav { display: flex; justify-content: center; }
.topnav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(1rem, 2.4vw, 2.2rem); list-style: none; }
.topnav a {
  display: inline-block; padding: .6rem .15rem;
  color: var(--muted); text-decoration: none;
  font: 600 1rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  transition: color .18s ease;
}
.topnav a:hover { color: var(--paper); }
.topnav .topnav__phone { color: var(--leaf); }

.hero__inner {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: min(820px, 100% - 2.5rem); margin: 0 auto; text-align: center;
  padding-top: clamp(1.5rem, 5vh, 3rem);
}

.brand { display: flex; flex-direction: column; align-items: center; width: 100%; font-weight: inherit; }
.brand__art { position: relative; display: block; width: min(760px, 100%); aspect-ratio: 1568 / 648; }
.brand__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand__tagline {
  display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.4rem);
  width: min(760px, 100%); margin-top: clamp(.6rem, 1.6vw, 1.1rem);
  color: var(--sign-green);
  font: 700 clamp(1.15rem, 3.1vw, 2.15rem)/1 var(--display);
  letter-spacing: .045em; text-transform: uppercase; white-space: nowrap;
}
.brand__tagline::before, .brand__tagline::after { content: ""; flex: 1; height: 3px; min-width: 1.2rem; background: var(--sign-green); }

.hero__lead {
  max-width: 34em; margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
  color: #d9ddd6; font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.55;
}
.hero__lead strong { color: var(--paper); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; margin-top: 1.8rem; }
.hero__note { margin-top: 1.1rem; color: var(--muted); font-size: .98rem; }

/* Opening signature (once): car outline draws and the script is brushed in (~1.5 s); 竹永 is written
   stroke by stroke over ~5.5 s (below).
   Headline text and booking buttons are never delayed. */
@media (prefers-reduced-motion: no-preference) {
  .brand__car, .brand__script {
    -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
            mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
  .brand__car { animation: draw-in 1240ms cubic-bezier(.45, 0, .25, 1) both; }
  .brand__script { animation: draw-in 960ms cubic-bezier(.55, 0, .25, 1) 540ms both; }
}
/* 竹永 written stroke by stroke, about 0.35-5.5s, once. Layers, centre lines and the timings below come
   from scripts/build-kanji-strokes.py. Each layer is the original brushwork, uncovered by a soft round
   front moving along its stroke in writing order. At the end the original kanji image takes over again,
   so the finished logo is the untouched artwork. Reduced motion (or no animation support): the original
   image only, complete from the start. */
.brand__ink { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Hand-off: the original image is shown and the stroke layers hidden in the same instant (show/hide
     only, no fade: a fade would dim the white strokes halfway through). */
  .brand__ink { display: block; position: absolute; inset: 0; width: 100%; height: 100%; animation: ink-handoff-out 1ms steps(1, end) 5.49s both; }
  .brand__kanji { animation: ink-handoff-in 1ms steps(1, end) 5.49s both; }
  .ink { --ink-flick: cubic-bezier(.5, .05, .8, .9); stroke-dasharray: 1 1; animation: ink-write 1s cubic-bezier(.42, 0, .32, 1) both; }
  .ink--take-1 { animation-duration: 0.40s; animation-delay: 0.35s; animation-timing-function: var(--ink-flick); }
  .ink--take-2 { animation-duration: 0.20s; animation-delay: 0.84s; }
  .ink--take-3 { animation-duration: 0.30s; animation-delay: 1.12s; }
  .ink--take-4 { animation-duration: 0.30s; animation-delay: 1.58s; animation-timing-function: var(--ink-flick); }
  .ink--take-5 { animation-duration: 0.22s; animation-delay: 1.96s; }
  .ink--take-6 { animation-duration: 0.50s; animation-delay: 2.26s; animation-name: ink-take-6; }
  .ink--naga-1 { animation-duration: 0.26s; animation-delay: 3.06s; }
  .ink--naga-2 { animation-duration: 0.66s; animation-delay: 3.41s; animation-name: ink-naga-2; }
  .ink--naga-3 { animation-duration: 0.42s; animation-delay: 4.17s; animation-name: ink-naga-3; }
  .ink--naga-4 { animation-duration: 0.24s; animation-delay: 4.68s; animation-timing-function: var(--ink-flick); }
  .ink--naga-5 { animation-duration: 0.44s; animation-delay: 5.00s; }
  .ink-marks { animation: ink-marks .55s ease-out 4.94s both; }
}
@keyframes ink-write {
  from { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ink-take-6 {
  from { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  75%, 80% { stroke-dashoffset: 0.268; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ink-naga-2 {
  from { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  21%, 26% { stroke-dashoffset: 0.661; }
  81%, 86% { stroke-dashoffset: 0.181; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ink-naga-3 {
  from { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  33%, 38% { stroke-dashoffset: 0.556; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ink-marks { from { opacity: 0; } to { opacity: 1; } }
@keyframes ink-handoff-in { from { visibility: hidden; } to { visibility: visible; } }
@keyframes ink-handoff-out { from { visibility: visible; } to { visibility: hidden; } }
@keyframes draw-in {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(4.5rem, 10vw, 7.5rem) 0; overflow: hidden; }
.sizes { background: var(--ink-2); border-top: 1px solid var(--line); }
.photos { background: var(--ink); border-top: 1px solid var(--line); }
.included { background: var(--ink-2); border-top: 1px solid var(--line); }
.contact { background: var(--ink-2); border-top: 1px solid var(--line); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head h2, .contact h2 {
  font: 800 clamp(2.1rem, 4.6vw, 3.5rem)/1.02 var(--display);
  letter-spacing: .005em; text-transform: uppercase; text-wrap: balance;
}
.section-head__lead { margin-top: 1rem; color: #d2d7cf; max-width: 38em; }

/* Section label on a dry-brush swash (echoes the green brush panel on the sign) */
.kicker { margin-bottom: 1.1rem; }
.kicker span {
  position: relative; isolation: isolate; display: inline-block;
  padding: .45em 1.5em .45em 1em; margin-left: -.6em;
  color: #fff; font: 800 italic 1.2rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
}
.kicker span::before {
  content: ""; position: absolute; inset: -.15em -.2em; z-index: -1;
  background: var(--swash);
  -webkit-mask: url("/assets/brand/brush-swash.webp") center / 100% 100% no-repeat;
          mask: url("/assets/brand/brush-swash.webp") center / 100% 100% no-repeat;
}

/* Section reveal: short fade + lift, once. Only when JS is running and motion is OK. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1.1s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .tiers .reveal:nth-child(2), .js .stages .reveal:nth-child(2), .js .gallery .reveal:nth-child(2), .js .deals__grid .reveal:nth-child(2) { transition-delay: 140ms; }
  .js .tiers .reveal:nth-child(3), .js .stages .reveal:nth-child(3) { transition-delay: 280ms; }
}

/* Bamboo after the opening (revised 2026-10-30): one different idea per section instead of a repeated
   corner pattern, with deliberate empty space between them.
     Included      one small angled branch by the heading
     Prices        one tall cluster on the left, stalks visible
     Photos        none, so the photos stand out
     Deals         a large, faint silhouette behind the section (the solid cards sit on top of it)
     Footer        a full cluster growing up from the bottom-left (reaching into Contact on wider screens)
   Soft fades hide the places where the sign artwork was cropped. Never over text or buttons, except the
   faint Deals silhouette, which sits behind them on purpose and keeps text contrast high. */

/* Prices: phones and tablets get extra bottom space to hold the cluster under the content;
   wide screens stand it, full height, in the empty left margin. */
.sizes { padding-bottom: 10rem; }
.bamboo--prices-cluster {
  left: -10px; bottom: -122px; width: 130px; opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
          mask-image: linear-gradient(to bottom, transparent, #000 16%);
}
@media (min-width: 768px) {
  .sizes { padding-bottom: 12rem; }
  .bamboo--prices-cluster { bottom: -176px; width: 170px; }
}
@media (min-width: 1280px) {
  .sizes { padding-bottom: clamp(4.5rem, 10vw, 7.5rem); }
  .bamboo--prices-cluster { left: -24px; bottom: 0; width: clamp(140px, calc((100vw - var(--wrap)) / 2 + 50px), 320px); }
}

/* Deals: large faint silhouette, slightly tilted, fading out before the section edges */
.bamboo--deals-ghost {
  top: 50%; right: -40px; width: 300px; opacity: .12;
  transform: translateY(-50%) rotate(7deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
@media (min-width: 768px) {
  .bamboo--deals-ghost { right: 5%; width: clamp(380px, 40vw, 600px); opacity: .14; }
}

/* What's included: one small branch, angled, beside the label (phones/tablets) or the heading (wide) */
.bamboo--included-branch {
  top: .4rem; right: -18px; width: 150px; opacity: .9;
  transform: rotate(-12deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 38% at 42% 38%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 38% at 42% 38%, #000 60%, transparent 100%);
}
@media (min-width: 1100px) {
  .bamboo--included-branch {
    top: calc(clamp(4.5rem, 10vw, 7.5rem) + 1.5rem); right: auto;
    left: calc((100% - var(--wrap)) / 2 + 46rem + 2rem);  /* just right of the heading block */
    width: 210px; transform: rotate(-16deg);
  }
}

/* ---------- 3. Sizes ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.tier {
  display: flex; flex-direction: column;
  padding: 2rem clamp(1.1rem, 2.4vw, 2rem) 2rem;
}
.tier + .tier { border-left: 1px solid var(--line-strong); }
.tier__car { align-self: flex-start; width: auto; height: clamp(72px, 7.4vw, 96px); max-width: 100%; object-fit: contain; object-position: left bottom; margin-bottom: 1.4rem; }  /* same height = same scale, as on the flyer */
.tier__name { font: 800 2.4rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.tier__fits { margin-top: .35rem; color: #d2d7cf; }
@media (min-width: 768px) and (max-width: 1180px) { .tier__fits { min-height: 3.2em; } }
.tier__price {
  margin-top: 1rem; display: flex; align-items: flex-start;
  font: 800 clamp(3.4rem, 6vw, 4.6rem)/.9 var(--display); color: var(--paper); letter-spacing: -.01em;
}
.tier__currency { font-size: .45em; margin: .12em .06em 0 0; color: var(--leaf); }
.tier__time { display: flex; align-items: center; gap: .45em; margin: .9rem 0 1.5rem; color: var(--muted); font-size: 1rem; }
.tier__time .icon { color: var(--leaf); }
.tier .btn { margin-top: auto; }
.sizes__help { margin-top: 1.6rem; color: var(--muted); font-size: 1rem; }

/* ---------- 5. Fleet & employee deals (call/email only) ---------- */
.deals { background: var(--ink-3); border-top: 1px solid var(--line); }
.deals__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); }
.deal {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--ink); border: 1px solid var(--line-strong); border-top: 3px solid var(--sign-green);
}
.deal__name { font: 800 2.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.deal__what { margin-top: .5rem; color: #d2d7cf; }
.deal__rates { margin: 1.4rem 0 1.8rem; border-top: 1px solid var(--line-strong); }
.deal__rates div {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.4rem; padding: .7rem 0; border-bottom: 1px solid var(--line-strong);
}
.deal__rates dt {
  display: flex; align-items: center; gap: .9rem;
  font: 700 1.2rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.deal__icon { flex: none; width: 76px; height: 28px; object-fit: contain; object-position: left center; }  /* fixed box: labels line up, same scale */
.deal__rates dd {
  margin: 0; display: flex; align-items: baseline; white-space: nowrap;
  font: 800 2.6rem/1 var(--display); letter-spacing: -.01em;
}
.deal__currency { align-self: flex-start; margin: .1em .06em 0 0; font-size: .5em; color: var(--leaf); }
.deal__unit { margin-left: .4rem; color: var(--muted); font: 600 1rem/1 var(--body); letter-spacing: 0; }
.deal__actions { list-style: none; margin-top: auto; display: flex; flex-wrap: wrap; gap: .7rem; }
.deal__actions li { flex: 1 1 auto; }
.deal__actions .btn { width: 100%; }

/* ---------- 2. Included ---------- */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3.25rem); }
.stage { position: relative; padding-top: 1.4rem; border-top: 3px solid var(--sign-green); }
.stage__num {
  font: 800 4.2rem/1 var(--display); color: transparent;
  -webkit-text-stroke: 1.5px var(--sign-green);
  margin-bottom: .4rem;
}
.stage h3 { font: 800 1.85rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.stage__label { display: block; margin-bottom: .3rem; color: var(--leaf); font: 700 .95rem/1 var(--display); letter-spacing: .14em; }
.steps { list-style: none; margin-top: 1.3rem; }
.steps li { display: flex; gap: .9rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps__n { flex: none; width: 1.6rem; color: var(--leaf); font: 700 1rem/1 var(--display); letter-spacing: .05em; }

/* ---------- 4. Photos ---------- */
/* 2fr / 1fr makes the Tesla exactly twice the Kia's width, so the 4:3 and 2:3 frames always match in height. */
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(.9rem, 2.2vw, 1.5rem); align-items: start; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--ink-2); }
.shot--lead img { aspect-ratio: 4 / 3; }
.shot--side img { aspect-ratio: 2 / 3; }
.shot figcaption { margin-top: .75rem; font: 600 1.15rem/1.3 var(--display); letter-spacing: .02em; }

/* ---------- 6. Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.contact h2 { margin-bottom: 1.8rem; text-wrap: balance; }
.facts { margin: 2.2rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-strong); }
.facts dt { color: var(--leaf); font: 700 1rem/1.6 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.facts dd { margin: 0; }
/* Call / email card (right-hand column; stacks under the booking column below 960px) */
.reach { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ink); border: 1px solid var(--line-strong); border-top: 3px solid var(--sign-green); }
.reach__title { font: 800 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.reach__intro { margin: .5rem 0 1.4rem; color: var(--muted); }
.direct { list-style: none; border-top: 1px solid var(--line-strong); }
.direct a {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong);
  color: var(--paper); text-decoration: none; overflow-wrap: anywhere;
  font: 700 clamp(1.15rem, .9rem + 1.1vw, 1.55rem)/1.2 var(--display); letter-spacing: .02em;
  transition: color .18s ease;
}
.direct a:hover { color: var(--leaf); }
.direct .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--leaf); }
.direct__label { display: block; margin-bottom: .2rem; color: var(--muted); font: 700 .8rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; padding: 4.5rem 0 3.5rem; background: var(--ink); border-top: 1px solid var(--line); text-align: center; }
/* Footer bamboo: a full cluster growing up from the bottom-left. Phones: kept inside the footer's
   bottom space, right side left empty. Tablets and up: it grows past the footer's top edge into the
   Contact section, with a fainter stalk behind it and one shorter stalk on the right. */
.bamboo--foot-cluster {
  left: -14px; bottom: -70px; width: 110px; opacity: .95;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
          mask-image: linear-gradient(to bottom, transparent, #000 16%);
}
.bamboo--foot-back, .bamboo--foot-right {
  display: none; bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
          mask-image: linear-gradient(to bottom, transparent, #000 16%);
}
@media (min-width: 768px) {
  .footer { overflow: visible; }  /* nothing extends below the page: every footer piece sits on its bottom edge */
  .bamboo--foot-cluster { left: -20px; bottom: 0; width: clamp(150px, 21vw, 310px); }
  .bamboo--foot-back { display: block; left: clamp(30px, 7vw, 110px); width: clamp(110px, 15vw, 230px); opacity: .5; transform: scaleX(-1); }
  .bamboo--foot-right { display: block; right: 0; width: clamp(90px, 9vw, 140px); opacity: .85; }  /* right: 0, so the page never scrolls sideways */
}
.footer__inner { position: relative; z-index: 1; width: min(640px, 100% - 2.5rem); margin: 0 auto; }
.footer__mark { width: 120px; height: auto; margin: 0 auto 1rem; }
.footer__name { font: 800 1.6rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.footer__what { text-wrap: balance; margin-top: .3rem; color: var(--sign-green); font: 700 1.05rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.footer__contact { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.5rem; margin-top: 1.3rem; }
.footer__contact a { color: var(--paper); text-decoration: none; overflow-wrap: anywhere; }
.footer__contact a:hover { color: var(--leaf); text-decoration: underline; }
.footer__small { margin-top: 1.5rem; color: #8b948a; font-size: .9rem; }
.footer__what span + span::before, .footer__small span + span::before { content: "\00b7"; margin-right: .5em; }
@media (max-width: 520px) {
  .footer__what span, .footer__small span { display: block; }
  .footer__what span + span::before, .footer__small span + span::before { content: none; }
}
.footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.4rem; margin-top: 1.2rem; }
.footer__nav a {
  display: inline-block; padding: .5rem .1rem; color: var(--muted); text-decoration: none;
  font: 600 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.footer__nav a:hover, .footer__nav a[aria-current="page"] { color: var(--paper); }
.topnav a[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px var(--sign-green); }

/* ---------- About page (about.html) ----------
   Photo left, text right on wider screens; on phones: heading, photo, then text. */

.about { padding-top: clamp(3rem, 7vw, 5.5rem); }
.about__grid {
  display: grid; grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr;
  grid-template-areas: "photo head" "photo body"; column-gap: clamp(2rem, 5vw, 4.5rem);
}
.about__head { grid-area: head; }
.about__photo { grid-area: photo; margin: 0; }
.about__body { grid-area: body; }
.about h1 { font: 800 clamp(2.4rem, 5vw, 4rem)/1 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.about__owner { margin-top: .8rem; color: var(--sign-green); font: 700 1.15rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.about__lead { margin-top: 1.5rem; max-width: 34em; color: #d9ddd6; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.55; }
.about__body p + p { margin-top: 1rem; }
.about__actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.8rem; }
.about .facts { margin-top: 2.2rem; }
.about__photo img { width: 100%; height: auto; aspect-ratio: 848 / 1280; object-fit: cover; background: var(--ink-2); }
.about__photo figcaption { margin-top: .75rem; color: var(--muted); font: 600 1.05rem/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.about__links { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin-top: 1.6rem; }
.about__links a { display: inline-block; padding: .45rem 0; font: 600 1rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }

/* One small branch in the top-right corner (the footer cluster is the page's other bamboo) */
.bamboo--about-branch {
  top: .4rem; right: -18px; width: 110px; opacity: .85;
  transform: rotate(-12deg);
  -webkit-mask-image: radial-gradient(ellipse 50% 38% at 42% 38%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 38% at 42% 38%, #000 60%, transparent 100%);
}
@media (min-width: 1100px) {
  .bamboo--about-branch { top: 2rem; right: -6px; width: clamp(150px, calc((100vw - var(--wrap)) / 2), 220px); }
}
@media (max-width: 767px) {
  .about__grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "photo" "body"; }
  .about__photo { margin-top: 1.8rem; }
  .about__body { margin-top: 1.8rem; }
  .about__actions { flex-direction: column; align-items: stretch; max-width: 420px; }
}

/* ---------- Booking bar (top of the screen, all sizes) ----------
   Parked just above the screen until the opening "Book" buttons scroll away (site.js), then stays.
   Keyboard focus also brings it down at any scroll position, so it can always be reached. Solid site black. */
html { scroll-padding-top: 4.5rem; }  /* in-page links and focused fields land below the bar */
.bookbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: max(.45rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) .45rem max(.9rem, env(safe-area-inset-left));
  background: var(--ink); border-bottom: 1px solid var(--line-strong);
  transform: translateY(-110%);
  transition: transform .28s var(--ease-out);
}
.bookbar.is-visible, .bookbar:focus-within { transform: none; }
.bookbar__inner { display: flex; align-items: center; gap: .6rem 1.2rem; width: min(var(--wrap), 100%); margin-inline: auto; }
.bookbar__brand {
  display: none; align-items: center; gap: .7rem; margin-right: auto;
  color: var(--paper); text-decoration: none; font: 800 1.15rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.bookbar__brand:hover { color: var(--leaf); }
.bookbar__brand img { width: 52px; height: auto; }
.bookbar__call {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: 0 .9rem; border: 1.5px solid var(--line-strong); border-radius: 3px;
  color: var(--paper); text-decoration: none; font: 700 1.05rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.bookbar__call:hover { color: var(--leaf); }
.bookbar__call .icon { color: var(--leaf); }
.bookbar__call-long { display: none; }
.bookbar__btn { flex: 1; min-height: 44px; padding: .55rem 1rem; font-size: 1.05rem; }
@media (min-width: 768px) {
  .bookbar__brand { display: inline-flex; }
  .bookbar__call { border: 0; padding: 0 .3rem; }
  .bookbar__call-short { display: none; }
  .bookbar__call-long { display: inline; }
  .bookbar__btn { flex: none; }
}
@media (max-width: 380px) {
  .bookbar__call { padding: 0 .7rem; }
  .bookbar__btn { padding-inline: .6rem; font-size: 1rem; }
  .bookbar__btn .icon--ext { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bookbar, .bookbar.is-visible { transition: none; }
}

/* ---------- No-JavaScript fallback page ---------- */
.fallback { max-width: 34rem; margin: 20vh auto; padding: 0 1.5rem; font-size: 1.2rem; }
.fallback p + p { margin-top: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .stages { grid-template-columns: 1fr; gap: 2.5rem; }
  .stage { display: grid; grid-template-columns: auto 1fr; column-gap: 1.4rem; }
  .stage__num { grid-row: span 2; font-size: 3.4rem; }
  .steps { margin-top: .8rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .deals__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  body { font-size: 1.0625rem; }
  .sitehead__brand img { width: 44px; }
  .topnav ul { gap: 0 1.1rem; }                 /* nav wraps onto a second centred row */
  .topnav a { padding: .75rem .2rem; font-size: .95rem; }  /* taller tap targets */
  .hero { min-height: auto; padding-top: 0; padding-bottom: 3.5rem; }
  .bamboo--hero-left { width: clamp(118px, 34vw, 210px); left: -6px; }
  .bamboo--hero-right { width: clamp(146px, 42vw, 260px); right: -8px; }
  .hero__inner { padding-top: 1.5rem; }
  .brand__art { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }

  .tiers { grid-template-columns: 1fr; border-bottom: 0; }
  .tier {
    display: grid; grid-template-columns: 1fr auto; column-gap: 1rem;
    grid-template-areas: "car car" "name price" "fits price" "time time" "btn btn";
    padding: 1.6rem 0; border-bottom: 1px solid var(--line-strong);
  }
  .tier + .tier { border-left: 0; }
  .tier__car { grid-area: car; height: 80px; margin-bottom: 1rem; }
  .tier__name { grid-area: name; font-size: 2.1rem; }
  .tier__fits { grid-area: fits; min-height: 0; }
  .tier__price { grid-area: price; align-self: center; margin-top: 0; font-size: 3.3rem; }
  .tier__time { grid-area: time; margin: .7rem 0 1.1rem; }
  .tier .btn { grid-area: btn; }

  .stage { display: block; }
  .stage__num { font-size: 3rem; }
  .gallery { grid-template-columns: 1fr; gap: 2rem; }
  .shot--lead img { aspect-ratio: 1; }
  .shot--side img { aspect-ratio: 5 / 4; }
  .facts div { grid-template-columns: 5.5rem 1fr; }
  .footer { padding-bottom: 7rem; }  /* room for the footer bamboo cluster */
}

@media (max-width: 380px) {
  .brand__tagline { font-size: 1.02rem; gap: .5rem; }
  .tier__price { font-size: 2.9rem; }
  .deal__rates dd { font-size: 2.2rem; }
  .deal__icon { width: 60px; height: 22px; }
}

/* Respect "reduce motion" everywhere (smooth scrolling included). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}