/* ==========================================================================
   Whatley & Co — Vehicle Workshop
   Website concept by WiltshireTech. Demonstration only.

   One stylesheet, no build step, no framework — same approach as the rest of
   the WiltshireTech repository. Sections run in the order a page uses them:
   tokens, base, layout, header, then the components, then the forms, then the
   footer, then the handful of media queries that could not be written inline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   The palette is deliberately narrow: graphite for structure, warm off-white
   for paper, one copper accent borrowed from the worklight in the hero photo.
   Nothing else earns a colour.
   -------------------------------------------------------------------------- */
:root {
  --ink:        #14171a;
  --ink-soft:   #1e242a;
  --ink-line:   #2b3238;
  --slate:      #444d55;
  --steel:      #6f7981;
  --steel-soft: #97a0a7;

  --paper:      #f6f3ee;
  --paper-warm: #efeae2;
  --white:      #ffffff;
  --line:       #ddd8d0;
  --line-soft:  #e8e3db;

  --copper:     #b4621a;
  --copper-dk:  #904d13;
  --copper-lt:  #d98b3d;
  --moss:       #2f5d50;
  --flag:       #a8321f;

  --wrap:       1160px;
  --gut:        24px;

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 26, .06), 0 2px 8px rgba(20, 23, 26, .05);
  --shadow:    0 2px 6px rgba(20, 23, 26, .07), 0 10px 30px rgba(20, 23, 26, .07);
  --shadow-lg: 0 4px 12px rgba(20, 23, 26, .09), 0 24px 60px rgba(20, 23, 26, .13);

  --ff:      "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The browser's own `[hidden] { display: none }` is weaker than any class that
   sets display, so buttons, notes and panels toggled with the hidden attribute
   would otherwise stay on screen. This has to win. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header would otherwise sit on top of anchored headings. */
  scroll-padding-top: 96px;
  /* clip rather than hidden: the closed mobile drawer is parked off-screen
     with a transform, and `hidden` would still let it widen the document. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Belt and braces against a stray wide child on small screens. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.16rem, 1.06rem + .38vw, 1.35rem); }
h4 { font-size: 1.03rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--copper-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--copper); }

img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

strong, b { font-weight: 600; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--copper); color: #fff; }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Dark surfaces need a focus ring that survives the background. */
.demo-bar :focus-visible,
.site-head :focus-visible,
.site-foot :focus-visible,
.band--dark :focus-visible { outline-color: var(--copper-lt); }

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 11px 18px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--r) var(--r);
  text-decoration: none;
  transition: top .16s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 800px; }

.band { padding: clamp(3.25rem, 2.2rem + 4vw, 5.5rem) 0; }
.band--tight { padding: clamp(2.5rem, 2rem + 2.4vw, 3.75rem) 0; }
.band--paper { background: var(--paper-warm); }
.band--white { background: var(--white); }
.band--dark  { background: var(--ink); color: var(--steel-soft); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.band--dark a { color: var(--copper-lt); }
.band--line-top { border-top: 1px solid var(--line); }

.eyebrow {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--ff-cond);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-dk);
}
.band--dark .eyebrow { color: var(--copper-lt); }

.lede {
  font-size: clamp(1.06rem, 1.01rem + .22vw, 1.19rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 62ch;
}
.band--dark .lede { color: var(--steel-soft); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.section-head p:last-child { margin-bottom: 0; }

/* A section header with the heading left and a link parked on the right. */
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}
.section-head--split > div { max-width: 58ch; }

/* The spacing nudges that appear often enough to earn a name. */
.mt-lg { margin-top: clamp(2rem, 1.7rem + 1.4vw, 2.75rem); }
.mt-md { margin-top: 1.5rem; }
.mb-lg { margin-bottom: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); }
.mb-md { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--copper);
  color: #fff;
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { background: var(--copper-dk); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--white); border-color: var(--steel); color: var(--ink); }

.btn--onDark {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.btn--onDark:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .5); color: #fff; }

.btn--ink { background: var(--ink); }
.btn--ink:hover { background: var(--ink-soft); }

/* 44px, not 42: these are the enquiry buttons on the services cards and they
   are tapped on a phone more than anything else on the site. */
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: .94rem; }
.btn--lg { min-height: 54px; padding: 15px 30px; font-size: 1.07rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* A quiet text link with a chevron; used where a full button would shout. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 32px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-more svg { transition: transform .16s var(--ease); }
.link-more:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Demo bar
   Present on every page. Professional, closable, and suppressed entirely when
   the page is framed inside the WiltshireTech business page.
   -------------------------------------------------------------------------- */
/* Below the header. The header is sticky and owns its own stacking context,
   so the mobile drawer inside it stacks at the header's level, not its own —
   a higher z-index here would put this bar on top of the open drawer. */
.demo-bar {
  position: relative;
  z-index: 10;
  background: var(--ink);
  color: var(--steel-soft);
  border-bottom: 1px solid var(--ink-line);
  font-size: .875rem;
  line-height: 1.45;
}
.demo-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  padding-block: 9px;
}
/* max-width: none overrides the 68ch measure that applies to every other
   paragraph — here it would strand the close button in the middle of the bar. */
.demo-bar__text { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
.demo-bar__text b { color: #fff; font-weight: 600; }
.demo-bar__text span { display: inline-block; }
.demo-bar__by { color: var(--steel); }
.demo-bar__by a { color: var(--steel-soft); text-decoration-color: rgba(255,255,255,.3); }
.demo-bar__by a:hover { color: #fff; }

.demo-bar__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--steel);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.demo-bar__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Embedded (?embed=1 or inside an iframe): the surrounding page already says
   this is a demo, so the bar would only repeat itself. */
.is-embedded .demo-bar { display: none; }
.is-demo-bar-hidden .demo-bar { display: none; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* Above the drawer scrim (80), because the drawer lives inside this element
   and inherits its stacking level. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: #fff;
  text-decoration: none;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  color: var(--copper-lt);
  flex: 0 0 auto;
}
.brand__name {
  display: block;
  font-family: var(--ff-cond);
  font-size: 1.36rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
}
.brand__tag {
  display: block;
  margin-top: 1px;
  font-family: var(--ff-cond);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li { margin: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  color: var(--steel-soft);
  font-size: .99rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  margin-top: 30px;
  width: 18px;
  border-top: 2px solid var(--copper);
}

.head-actions { display: flex; align-items: center; gap: 14px; }

.head-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.head-phone__icon { color: var(--copper-lt); display: grid; place-items: center; }
.head-phone__label {
  display: block;
  font-family: var(--ff-cond);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--steel);
  line-height: 1.1;
}
.head-phone__num { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.2; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--r-sm);
  background: transparent;
  color: #fff;
  font-family: var(--ff-cond);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .08); }

.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s var(--ease), opacity .16s var(--ease);
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 5px; }
.nav-toggle__bars i:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--steel-soft);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15, 18, 20, .96) 0%, rgba(15, 18, 20, .88) 34%, rgba(15, 18, 20, .5) 62%, rgba(15, 18, 20, .35) 100%),
    linear-gradient(to top, rgba(15, 18, 20, .7), rgba(15, 18, 20, 0) 45%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);
}
.hero__copy { max-width: 44rem; }
.hero h1 { color: #fff; margin-bottom: .55rem; }
.hero__sub {
  font-size: clamp(1.07rem, 1rem + .34vw, 1.24rem);
  line-height: 1.55;
  color: #cfd5d9;
  max-width: 40rem;
  margin-bottom: 1.9rem;
}
.hero .btn-row { margin-bottom: 2.2rem; }

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .93rem;
  color: var(--steel-soft);
}
.hero__note svg { color: var(--copper-lt); }

/* --------------------------------------------------------------------------
   7b. Facts strip
   Its own solid band directly under the hero. It started life inside the hero
   over the photograph, where the last item fell across the bright glove in the
   image and became unreadable. A flat surface is both legible and quieter.
   -------------------------------------------------------------------------- */
.facts {
  background: var(--ink-soft);
  border-top: 1px solid var(--ink-line);
}
.facts ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 1.5rem;
  margin: 0;
  padding: 1.65rem 0;
  list-style: none;
}
.facts li { margin: 0; }
.facts b {
  display: block;
  font-family: var(--ff-cond);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.15;
}
.facts span { font-size: .9rem; color: var(--steel-soft); }

@media (min-width: 720px) {
  .facts ul { grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; }
  .facts li + li { padding-left: 2rem; border-left: 1px solid var(--ink-line); }
}

/* --------------------------------------------------------------------------
   8. Service cards
   The index number is the identity detail: it reads like a workshop job sheet
   rather than another rounded SaaS card with an icon in a circle.
   -------------------------------------------------------------------------- */
/* Six cards, so the column count is set explicitly: auto-fit gave four across
   at 1440 and left a seventh cell empty. */
.grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  background: var(--white);
  transition: background .16s var(--ease);
}
.svc:hover { background: #fdfcfa; }
.svc__no {
  font-family: var(--ff-cond);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--copper-dk);
  margin-bottom: .9rem;
}
.svc h3 { margin-bottom: .45rem; }
.svc p { font-size: .98rem; margin-bottom: 1.25rem; }
.svc__foot { margin-top: auto; }

/* Larger cards with a photograph, used on the services page. */
.cards {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .16s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.svc-card:hover { border-color: var(--steel-soft); box-shadow: var(--shadow); transform: translateY(-2px); }
.svc-card__media { aspect-ratio: 4 / 3; background: var(--paper-warm); overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
}
.svc-card__body h2, .svc-card__body h3 { font-size: 1.28rem; margin-bottom: .4rem; }
.svc-card__body p { font-size: .98rem; margin-bottom: 1.2rem; }
.svc-card__body .btn-row { margin-top: auto; }

.svc-list {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  font-size: .97rem;
}
.svc-list li {
  position: relative;
  margin: 0 0 .3em;
  padding-left: 1.35em;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--copper);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   9. Steps / process
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
  padding: 0;
  margin: 0;
  list-style: none;
}
.steps li {
  margin: 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
  counter-increment: step;
}
.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: .6rem;
  font-family: var(--ff-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--copper-dk);
}
.steps h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.steps p { font-size: .97rem; margin: 0; }
.band--dark .steps li { border-top-color: rgba(255, 255, 255, .3); }
.band--dark .steps li::before { color: var(--copper-lt); }

/* --------------------------------------------------------------------------
   10. Split feature (image beside copy)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
/* Two text columns of different lengths: centring them leaves the headings
   at different heights, which reads as a mistake. */
.split--top { align-items: start; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__media--wide img { aspect-ratio: 2 / 1; }
.split__body p:last-of-type { margin-bottom: 1.4rem; }

/* Facts printed as a small ruled table — plainer and more credible than a
   row of badges. */
.factlist {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.factlist li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.5rem;
  margin: 0;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
}
.factlist dt, .factlist b {
  flex: 0 0 11.5rem;
  font-family: var(--ff-cond);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.factlist span { flex: 1 1 14rem; }
.band--dark .factlist { border-top-color: rgba(255,255,255,.16); }
.band--dark .factlist li { border-bottom-color: rgba(255,255,255,.16); }
.band--dark .factlist b { color: #fff; }

/* --------------------------------------------------------------------------
   11. Full-bleed image band
   -------------------------------------------------------------------------- */
.strip {
  position: relative;
  min-height: 260px;
  display: grid;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
}
.strip img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.strip__inner { position: relative; padding-block: clamp(2.75rem, 2.2rem + 2.4vw, 4rem); }
.strip h2 { color: #fff; max-width: 22ch; }
.strip p { color: #c6cdd2; max-width: 46ch; }

/* --------------------------------------------------------------------------
   12. Callout / notices
   -------------------------------------------------------------------------- */
.note {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: .96rem;
  line-height: 1.55;
}
.note svg { flex: 0 0 auto; margin-top: 2px; color: var(--steel); }
.note p { margin: 0; }
.note--demo { border-left-color: var(--copper); background: #fdf7f0; }
.note--demo svg { color: var(--copper-dk); }
.note--quiet { background: transparent; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-family: var(--ff-cond);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}
.pill--demo { border-color: #e8cfae; background: #fdf3e7; color: var(--copper-dk); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.4rem; }
.field:last-child { margin-bottom: 0; }

.field > label,
.fieldset__legend {
  display: block;
  margin-bottom: .4rem;
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink);
}
.hint {
  display: block;
  margin: -.15rem 0 .5rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--steel);
  font-weight: 400;
}
.opt { font-weight: 400; color: var(--steel); }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #a9b0b6; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(180, 98, 26, .16);
}
.textarea { min-height: 128px; resize: vertical; }

.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f7981' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Inputs that should not stretch the full width of the panel. */
.input--short { max-width: 12rem; }
.input--date  { max-width: 16rem; }

.input--reg {
  font-family: var(--ff-cond);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  max-width: 15rem;
}

.row {
  display: grid;
  gap: 0 1.1rem;
  grid-template-columns: 1fr;
}

.fieldset { border: 0; margin: 0 0 1.4rem; padding: 0; }
.fieldset__legend { padding: 0; }

/* Selectable option tiles — used for services, time of day, contact method. */
.choices {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}
.choices--wide { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.choice { position: relative; margin: 0; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.choice__box {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 56px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.choice__box:hover { border-color: var(--steel-soft); }
.choice__tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: transparent;
  transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.choice__label { font-weight: 600; color: var(--ink); font-size: .99rem; line-height: 1.3; }
.choice__note { display: block; font-weight: 400; font-size: .89rem; color: var(--steel); margin-top: 1px; }

.choice input:checked + .choice__box {
  border-color: var(--copper);
  background: #fdf7f0;
  box-shadow: inset 0 0 0 1px var(--copper);
}
.choice input:checked + .choice__box .choice__tick {
  border-color: var(--copper);
  background: var(--copper);
  color: #fff;
}
.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* Plain checkbox rows. */
.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
  font-size: .97rem;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--copper); flex: 0 0 auto; }

/* Validation */
.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: var(--flag); background: #fffafa; }
.field--invalid .input:focus,
.field--invalid .select:focus,
.field--invalid .textarea:focus { box-shadow: 0 0 0 3px rgba(168, 50, 31, .15); }

.err {
  display: none;
  align-items: center;
  gap: .4em;
  margin-top: .4rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--flag);
}
.err svg { flex: 0 0 auto; }
.field--invalid .err, .fieldset--invalid .err { display: flex; }
.fieldset--invalid .choice__box { border-color: #e0b6b0; }

.form-error {
  display: none;
  gap: .7rem;
  margin-bottom: 1.5rem;
  padding: .9rem 1.1rem;
  border: 1px solid #e5c3bd;
  border-left: 3px solid var(--flag);
  border-radius: var(--r-sm);
  background: #fdf6f5;
  color: #7d2417;
  font-size: .96rem;
}
.form-error[data-shown] { display: flex; }
.form-error a { color: #7d2417; }

/* --------------------------------------------------------------------------
   14. Booking wizard
   -------------------------------------------------------------------------- */
.wizard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wizard__rail {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard__rail::-webkit-scrollbar { display: none; }

.rail-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 500;
  color: var(--steel);
  white-space: nowrap;
}
.rail-step__no {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--ff-cond);
  font-size: .88rem;
  font-weight: 600;
  color: var(--steel);
}
.rail-step[data-state="current"] { color: var(--ink); font-weight: 600; }
.rail-step[data-state="current"] .rail-step__no { border-color: var(--copper); background: var(--copper); color: #fff; }
.rail-step[data-state="done"] { color: var(--slate); }
.rail-step[data-state="done"] .rail-step__no { border-color: var(--moss); background: var(--moss); color: #fff; }
.rail-sep { flex: 0 0 14px; height: 1px; background: var(--line); }

.wizard__progress {
  display: none;
  align-items: center;
  gap: .8rem;
  padding: 12px clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
  font-size: .93rem;
}
.wizard__progress b { font-family: var(--ff-cond); letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }
.wizard__bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.wizard__bar i { display: block; height: 100%; background: var(--copper); transition: width .3s var(--ease); }

.wizard__body { padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); }

.step { display: none; }
.step[data-active] { display: block; animation: stepIn .26s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.step__head { margin-bottom: 1.6rem; }
.step__head h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.62rem); margin-bottom: .3rem; }
.step__head p { font-size: .99rem; margin: 0; }

.wizard__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.15rem clamp(1.25rem, 1rem + 1.2vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
}
.wizard__foot .btn--next { margin-left: auto; }
.wizard__foot .step-count {
  font-family: var(--ff-cond);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Photo upload */
.drop {
  display: block;
  padding: 1.5rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.drop:hover, .drop--over { border-color: var(--copper); background: #fdf7f0; }
.drop svg { margin: 0 auto .6rem; color: var(--steel); }
.drop b { display: block; color: var(--ink); font-size: 1rem; }
.drop span { display: block; font-size: .9rem; color: var(--steel); margin-top: .15rem; }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.thumbs {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}
.thumb {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper-warm);
}
.thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.thumb__name {
  display: block;
  padding: 6px 8px;
  font-size: .8rem;
  color: var(--steel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--white);
}
.thumb__rm {
  position: absolute;
  top: 6px; right: 6px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 23, 26, .82);
  color: #fff;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.thumb__rm:hover { background: var(--flag); }

/* Review step */
.review {
  margin: 0 0 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.review__row {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.5rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--white);
  font-size: .98rem;
}
.review__row:last-child { border-bottom: 0; }
.review__row dt {
  flex: 0 0 10.5rem;
  font-family: var(--ff-cond);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
}
.review__row dd { flex: 1 1 14rem; margin: 0; color: var(--ink); font-weight: 500; }
.review__row dd .muted { color: var(--steel); font-weight: 400; }
.review__edit {
  flex: 0 0 auto;
  font-size: .9rem;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--copper-dk);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review__edit:hover { color: var(--copper); }

/* Success panel */
.done { display: none; text-align: left; }
.done[data-active] { display: block; }
.done__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: #e8f0ed;
  color: var(--moss);
}
.done h2 { margin-bottom: .4rem; }
.done__ref {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin: 1.25rem 0;
  padding: .7rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.done__ref span {
  font-family: var(--ff-cond);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.done__ref b { font-family: var(--ff-cond); font-size: 1.25rem; letter-spacing: .09em; color: var(--ink); }

/* --------------------------------------------------------------------------
   15. Contact page pieces
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.card {
  padding: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.card--flush { padding: 0; overflow: hidden; }
.card h2 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.45rem); }
.card h3 { font-size: 1.14rem; }
.card > p:first-of-type { color: var(--slate); }

.contact-lines { margin: 0; padding: 0; list-style: none; }
.contact-lines li {
  display: flex;
  gap: .95rem;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-lines li:first-child { padding-top: 0; }
.contact-lines li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-lines__icon { flex: 0 0 auto; color: var(--copper-dk); margin-top: 3px; }
.contact-lines b {
  display: block;
  font-family: var(--ff-cond);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: .1rem;
}
.contact-lines a { font-weight: 600; }
.contact-lines .val { display: block; color: var(--ink); font-weight: 600; }
.contact-lines .hint { margin: .2rem 0 0; }
.contact-lines .link-more { font-size: .93rem; }
.contact-lines address { font-style: normal; color: var(--ink); font-weight: 500; line-height: 1.5; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--ink);
  color: var(--steel);
  font-size: .96rem;
  padding-top: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
}
.site-foot h4 {
  font-family: var(--ff-cond);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-soft);
  margin-bottom: 1rem;
}
.site-foot a { color: #cfd5d9; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.foot-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
.foot-brand .brand { margin-right: 0; margin-bottom: 1rem; }
.foot-brand p { font-size: .95rem; max-width: 34ch; }

.foot-links { margin: 0; padding: 0; list-style: none; }
.foot-links li { margin-bottom: .55rem; }

.foot-contact { margin: 0; padding: 0; list-style: none; }
.foot-contact li { margin-bottom: .55rem; }
.foot-contact address { font-style: normal; }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-top: 1px solid var(--ink-line);
  font-size: .89rem;
  color: var(--steel);
}
.foot-bar p { margin: 0; max-width: 62ch; }
.foot-bar__by { display: inline-flex; align-items: center; gap: .5rem; }

/* --------------------------------------------------------------------------
   17. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding: clamp(2.5rem, 2rem + 2.4vw, 4rem) 0 clamp(2rem, 1.7rem + 1.6vw, 3rem);
  background: var(--ink);
  color: var(--steel-soft);
}
.page-head h1 { color: #fff; margin-bottom: .5rem; }
.page-head p { color: #c6cdd2; font-size: clamp(1.03rem, .99rem + .25vw, 1.15rem); max-width: 56ch; margin-bottom: 0; }
.page-head .eyebrow { color: var(--copper-lt); }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: var(--steel);
}
.crumb li { margin: 0; }
.crumb li + li::before { content: "/"; margin-right: .4rem; color: var(--ink-line); }
.crumb a { color: var(--steel-soft); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb [aria-current] { color: #fff; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .row--2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .split__media { order: 2; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1.3fr; gap: 3rem; }
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.15fr .85fr; }
  .split--wide { grid-template-columns: 1.05fr .95fr; }
}

/* --- Mobile navigation ---------------------------------------------------- */
@media (max-width: 919px) {
  .nav-toggle { display: inline-flex; }

  /* The header cannot carry brand, phone, a call to action and a menu button
     on a phone. The call to action lives in the drawer instead. */
  .head-actions > .btn { display: none; }

  .head-phone__label, .head-phone__num { display: none; }
  .head-phone {
    width: 44px; height: 44px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--r-sm);
    gap: 0;
  }
  .head-phone__icon { color: #fff; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 90;
    width: min(340px, 88vw);
    padding: 1.25rem 1.25rem 2rem;
    background: var(--ink-soft);
    border-left: 1px solid var(--ink-line);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s var(--ease), visibility .26s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav[data-open] { transform: none; visibility: visible; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a {
    min-height: 52px;
    padding: 10px 14px;
    font-size: 1.08rem;
    border-radius: var(--r-sm);
  }
  .nav a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav__cta { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-line); }
  .nav__cta .btn { width: 100%; }

  /* `.nav a` is more specific than `.btn` and `.nav__phone`, so without these
     the drawer's call to action renders in muted grey on copper. */
  .nav .btn, .nav .btn:hover { color: #fff; }
  .nav .nav__phone { color: #fff; }
  .nav__phone {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    min-height: 48px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
  }
  .nav__phone svg { color: var(--copper-lt); }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(10, 12, 14, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s var(--ease), visibility .26s var(--ease);
  }
  .nav-scrim[data-open] { opacity: 1; visibility: visible; }

  body.nav-open { overflow: hidden; }
}

@media (min-width: 920px) {
  .nav__cta, .nav__phone { display: none; }
  .nav-scrim { display: none; }
}

/* --- Small phones --------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --gut: 18px; }
  body { font-size: 16.5px; }

  .site-head__inner { min-height: 66px; gap: 12px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 1.18rem; letter-spacing: .09em; }
  .brand__tag { font-size: .72rem; letter-spacing: .17em; }

  .btn-row .btn { width: 100%; }
  .btn-row--inline .btn { width: auto; }

  .hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1rem; }
  .hero__facts li { border-right: 0; padding-right: 0; margin-right: 0; }
  .hero__facts b { font-size: 1.3rem; }

  .wizard__rail { display: none; }
  .wizard__progress { display: flex; }
  .wizard { border-radius: var(--r); }
  .wizard__foot { flex-wrap: wrap; }
  .wizard__foot .step-count { order: 3; width: 100%; text-align: center; }
  .wizard__foot .btn { flex: 1 1 auto; }

  .review__row dt { flex: 1 1 100%; }
  .factlist dt, .factlist b { flex: 1 1 100%; }

  .demo-bar { font-size: .82rem; }
  .demo-bar__by { display: block; }

  /* On a narrow screen the copy runs across the whole frame, so the sideways
     gradient no longer covers the bright part of the photograph. */
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(15, 18, 20, .93) 0%, rgba(15, 18, 20, .86) 55%, rgba(15, 18, 20, .78) 100%);
  }
  .hero__media img { object-position: 70% 50%; }
}

@media (max-width: 380px) {
  .brand__tag { display: none; }
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .demo-bar, .site-head, .site-foot, .nav-scrim, .wizard__foot { display: none !important; }
  body { background: #fff; color: #000; }
}