/* ==========================================================================
   The Relocation Co — site stylesheet
   Monochrome, square, rule-led. No border radius. No shadows.
   Values taken from the design handoff; do not introduce an accent colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink:            #0A0A0A;
  --white:          #FFFFFF;
  --off:            #F2F2F0;  /* alternating sections, hover fills, tints */
  --grey:           #767674;  /* secondary copy on light */
  --grey-dark:      #9A9A98;  /* secondary copy on dark */
  --light-dark:     #C8C8C6;  /* footer links, disabled text */
  --hair:           #DEDEDA;  /* 1px dividers on light */
  --hair-dark:      #2E2E2E;  /* 1px dividers on dark */
  --stroke-dark:    #5A5A58;  /* outlined numerals on dark */

  --sans: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;

  --gutter:  clamp(20px, 5vw, 72px);
  --rhythm:  clamp(72px, 10vw, 150px);
  --maxw:    1320px;
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* The UA rule for [hidden] is display:none, which any author `display`
   would override — .btn is inline-flex, so a hidden button would still
   show. Toggling visibility with the hidden attribute relies on this. */
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, p, blockquote, figure { margin: 0; }
button { font-family: inherit; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 14px 22px; font: 700 14px/1 var(--sans);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}
.on-dark .eyebrow { color: var(--grey-dark); }

.h1 {
  font-size: clamp(46px, 9.2vw, 132px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
}
.h1--tall { font-size: clamp(42px, 7.6vw, 108px); } /* three-line H1 (insurance) */

.h2 {
  font-size: clamp(34px, 5.6vw, 80px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
}

.h3 {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.h4 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lead {
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.5;
  color: var(--grey);
}
.on-dark .lead { color: var(--grey-dark); }

.body { font-size: 17px; line-height: 1.65; color: var(--grey); }
.on-dark .body { color: var(--grey-dark); }

/* Outlined (stroked) type — used for the last line of an H1 and for numerals. */
.outline {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
}
.on-dark .outline { -webkit-text-stroke-color: var(--white); }

.num-outline {
  display: block;
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--grey);
}
.on-dark .num-outline { -webkit-text-stroke-color: var(--stroke-dark); }

/* Browsers without -webkit-text-stroke would render these invisible. */
@supports not (-webkit-text-stroke: 1px black) {
  .outline, .num-outline { color: var(--grey); -webkit-text-stroke: 0; }
  .on-dark .outline, .on-dark .num-outline { color: var(--stroke-dark); }
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-block: var(--rhythm); }
.section--tint { background: var(--off); }
.section--dark { background: var(--ink); color: var(--white); }
.section--flush { padding-block: 0; }

/* Eyebrow + H2 on the left, lead paragraph on the right, over a heavy rule. */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: end;
  padding-bottom: 44px;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 56px;
}
.on-dark .section-head { border-bottom-color: var(--hair-dark); }
.section-head .h2 { margin-top: 18px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.site-header__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The tagline's letter-spacing is tuned so its width matches the wordmark
   above it. If the wordmark size changes, retune the tagline to match. */
.wordmark {
  display: block;
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
}
.wordmark small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 7.6px;
  letter-spacing: 0.135em;
  margin-top: 6px;
  color: var(--grey);
}

.nav { display: flex; align-items: center; gap: 32px; white-space: nowrap; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: 18px; }
.header__phone { font-family: var(--mono); font-size: 13.5px; }

/* --- Services dropdown ---------------------------------------------------
   Opens on hover for pointer users and on click/focus for everyone else.
   The wrapper's padding-top keeps the gap between trigger and panel
   hoverable so the panel does not close as the pointer travels to it. */
.dropdown { position: relative; }
.dropdown__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  padding-top: 22px;
  width: 268px;
  z-index: 120;
}
.dropdown.is-open .dropdown__panel { display: block; }
.dropdown__inner {
  background: var(--white);
  border: 1.5px solid var(--ink);
  padding: 8px 0;
}
.dropdown__item {
  display: block;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
}
.dropdown__item:hover,
.dropdown__item:focus-visible { background: var(--off); }
.dropdown__item[aria-current="page"] { background: var(--off); }
.dropdown__divider { height: 1px; background: var(--hair); margin: 8px 0; }
.dropdown__all {
  display: block;
  padding: 11px 20px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.dropdown__all:hover { color: var(--ink); }

/* --- Burger + mobile panel ---------------------------------------------- */
.burger {
  display: none;
  position: relative;
  width: 22px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); }
/* The bars are only 22 x 16px, which is a mean target for a thumb and this
   is the sole navigation control on a phone. This enlarges the tappable
   area to ~50 x 44 without moving or resizing anything you can see. */
.burger::after { content: ""; position: absolute; inset: -14px; }

.mobile-panel {
  display: none;
  border-top: 1px solid var(--hair);
  padding: 20px var(--gutter) 30px;
  background: var(--white);
}
.mobile-panel.is-open { display: block; }
.mobile-panel a {
  display: block;
  font-size: 20px;
  font-weight: 700;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}
.mobile-panel a:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  transition: background .22s ease, color .22s ease;
}
.btn--primary  { background: var(--ink); color: var(--white); }
.btn--primary:hover  { background: var(--white); color: var(--ink); }

.btn--outline  { background: transparent; color: var(--ink); }
.btn--outline:hover  { background: var(--ink); color: var(--white); }

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

/* Outline button sitting on a dark ground. */
.on-dark .btn--outline { color: var(--white); border-color: var(--white); }
.on-dark .btn--outline:hover { background: var(--white); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   7. Cell grids
   Adjacent cards share borders: one box, internal separators, no gaps.
   The "gap" is the box colour showing through, which keeps the rules a
   consistent weight and lets the grid restack without doubling borders.
   -------------------------------------------------------------------------- */
.cellgrid {
  display: grid;
  gap: 1.5px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
}
.cellgrid > * { background: var(--white); }
.cellgrid--3 { grid-template-columns: repeat(3, 1fr); }
.cellgrid--4 { grid-template-columns: repeat(4, 1fr); }
.cellgrid--6 { grid-template-columns: repeat(3, 1fr); }

/* On dark grounds the rules are hairline-dark, not ink. */
.on-dark .cellgrid { gap: 1px; background: var(--hair-dark); border: 0; }
.on-dark .cellgrid > * { background: var(--ink); }

.cell { padding: 38px 30px 42px; }
.cell .h4 { margin: 20px 0 12px; }
.cell .body { font-size: 15.5px; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* A hero closes tighter than a normal section: the full rhythm below it
   leaves a hole between the headline and whatever follows. The homepage
   opens with more air above, the booking page closes with less below. */
.hero {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(48px, 7vw, 86px);
}
.hero--home { padding-top: clamp(56px, 9vw, 110px); }
.hero--booking { padding-bottom: clamp(40px, 5vw, 60px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 54px;
  align-items: end;
}
.hero .h1 { margin: 22px 0 28px; }
.hero .lead { max-width: 54ch; margin-bottom: 34px; }

.hero__aside { border-left: 1px solid var(--hair); padding-left: 34px; }
.numbered { margin-top: 20px; }
.numbered__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.numbered__row:last-child { border-bottom: 0; }
.numbered__n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--grey);
  flex: none;
}
.numbered__t { font-size: 15px; font-weight: 600; line-height: 1.35; }

.breadcrumb {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 26px;
}
.breadcrumb span { color: var(--ink); }
.breadcrumb a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   9. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--ink);
  color: var(--white);
  padding: 15px 0;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trc-slide 38s linear infinite;
}
.marquee span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__sep { padding: 0 26px; }

@keyframes trc-slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   10. Service rows (homepage)
   -------------------------------------------------------------------------- */
.svc-row {
  display: grid;
  grid-template-columns: 78px 1fr 1.15fr;
  gap: 40px;
  align-items: start;
  padding: 44px 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left .3s ease, background .3s ease;
}
.svc-row:hover { padding-left: 18px; background: var(--off); }
.svc-row__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--grey); padding-top: 6px; }
.svc-row__icon { width: 44px; height: 44px; stroke: currentColor; }
.svc-row .h3 { margin: 18px 0 14px; }
.svc-row .body { font-size: 16px; max-width: 46ch; }

.dash-list { columns: 2; column-gap: 34px; }
.dash-list__item {
  display: flex;
  gap: 12px;
  break-inside: avoid;
  padding: 7px 0;
  font-size: 14.5px;
  line-height: 1.45;
}
.dash-list__item::before {
  content: "";
  flex: none;
  width: 8px;
  height: 1.5px;
  background: var(--ink);
  margin-top: 10px;
}
.on-dark .dash-list__item::before { background: var(--white); }

/* --------------------------------------------------------------------------
   11. Stats bar
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.stats__cell { padding: 36px 26px; border-right: 1px solid var(--hair); }
.stats__cell:last-child { border-right: 0; }
.stats__n {
  display: block;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.stats__l {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   12. Packages
   -------------------------------------------------------------------------- */
.pkg { padding: 38px 32px 40px; display: flex; flex-direction: column; }
.pkg--featured { background: var(--ink); color: var(--white); }
.pkg__label {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 5px 9px;
}
.pkg .h3 { font-size: 27px; margin: 22px 0 10px; }
.pkg__desc { font-size: 15.5px; color: var(--grey); }
.pkg--featured .pkg__desc { color: var(--grey-dark); }
.pkg__price { margin: 26px 0 8px; font-weight: 800; font-size: 44px; letter-spacing: -0.04em; line-height: 1; }
.pkg__price sup { font-size: 15px; font-weight: 700; letter-spacing: 0; vertical-align: super; }
.pkg__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.pkg--featured .pkg__meta { color: var(--grey-dark); }
.pkg__features { margin: 28px 0 32px; }
.pkg__feature {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  font-size: 14.5px;
  line-height: 1.45;
  border-bottom: 1px solid var(--hair);
}
.pkg--featured .pkg__feature { border-bottom-color: var(--hair-dark); }
.pkg__feature::before {
  content: "";
  flex: none;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  margin-top: 9px;
}
.pkg__feature--out { opacity: 0.45; text-decoration: line-through; }
.pkg .btn { margin-top: auto; justify-content: center; }

.footnote {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   13. Reviews — placeholder hatch until real reviews land
   -------------------------------------------------------------------------- */
.reviews { border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.review {
  padding: 40px 32px 44px;
  border-right: 1px solid var(--ink);
  background: repeating-linear-gradient(135deg, #F2F2F0, #F2F2F0 9px, #E8E8E5 9px, #E8E8E5 18px);
}
.review:last-child { border-right: 0; }
.review__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px dashed var(--grey);
  padding: 5px 9px;
}
.review__glyph { display: block; font-size: 52px; font-weight: 800; line-height: 1; margin: 18px 0 6px; }
.review p { font-size: 18px; font-weight: 600; line-height: 1.45; }
.review cite {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   14. FAQ accordion — single-open
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hair); }
.faq__row { border-bottom: 1px solid var(--hair); }
.faq__q {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 26px 46px 26px 0;
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
/* Plus/minus built from two bars; the second rotates flat when open. */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 13px;
  height: 1.8px;
  background: var(--ink);
  margin-top: -0.9px;
}
.faq__q::after { transform: rotate(90deg); transition: transform .25s; }
.faq__q[aria-expanded="true"]::after { transform: rotate(0deg); }

.faq__a { display: none; padding: 0 60px 28px 0; color: var(--grey); font-size: 16px; line-height: 1.7; max-width: 78ch; }
.faq__row.is-open .faq__a { display: block; }
/* Without JS every answer stays visible rather than unreachable. */
.no-js .faq__a { display: block; }
.no-js .faq__q::after { display: none; }

/* --------------------------------------------------------------------------
   15. Insurance page

   This page sets its own type. Everything else on the site shouts in
   uppercase weight 800; here the headings are sentence case at weight 700
   and the outline stroke is lighter (1.2px against 1.6px). That is
   deliberate — it is meant to read as the most considered page on the site.
   Don't "fix" it to match the others.
   -------------------------------------------------------------------------- */
.ins-hero {
  padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 7vw, 86px);
  border-bottom: 1px solid var(--hair);
}
.h1--ins {
  margin: 30px 0 36px;
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-transform: none;       /* sentence case, unlike every other H1 */
  text-wrap: balance;
}
.outline--thin { -webkit-text-stroke-width: 1.2px; }

.ins-lead {
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.5;
  color: var(--grey);
  max-width: 60ch;
  margin: 0;
}

/* The reputation paragraph stands alone: no heading, no rule above it.
   It carries the page's positioning — resist adding a headline. */
.ins-reputation { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.ins-reputation p { text-wrap: pretty; }

/* --- Six points, dark ---------------------------------------------------- */
.ins-points { padding: clamp(40px, 5vw, 60px) 0 clamp(72px, 10vw, 150px); }
/* The mono label sits alone with no H2 beside it; the space above and below
   is balanced on purpose, so don't add a margin to the label itself. */
.ins-points__label {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1.5px solid var(--hair-dark);
}
.ins-points__label .eyebrow { font-size: 10.5px; }
.ins-points__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair-dark);
}
.ins-point {
  padding: 40px 30px 44px;
  border-right: 1px solid var(--hair-dark);
  border-bottom: 1px solid var(--hair-dark);
}
.ins-point .num-outline { margin-bottom: 26px; }
.ins-point h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;        /* lighter than the weight-800 cards elsewhere */
  letter-spacing: -0.025em;
  line-height: 1.3;
}

/* --- Partner box ---------------------------------------------------------
   The top padding matters: this section follows the dark six-point block,
   and at 0 the white box butts straight against the colour change. */
.section--partner { padding-top: clamp(56px, 7vw, 96px); }

.partner { display: grid; grid-template-columns: 1.15fr 0.85fr; border: 1.5px solid var(--ink); }
.partner__main { padding: 46px 44px 48px; }
.partner__main .h3 {
  margin: 22px 0 0;
  font-size: clamp(24px, 2.9vw, 38px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: none;
}
.partner__main .body { max-width: 52ch; margin: 18px 0 30px; }

/* The CARTS wordmark is white with a yellow mark, so this panel has to stay
   dark — the logo vanishes on white or #F2F2F0. */
.partner__side {
  padding: 40px 30px 44px;
  background: var(--ink);
  color: var(--white);
  border-left: 1.5px solid var(--ink);
}
.partner__side .eyebrow { color: var(--grey-dark); }
.partner__logo {
  height: 76px;
  display: flex;
  align-items: center;
  margin: 20px 0 10px;
}
.partner__logo img { display: block; width: 100%; max-width: 170px; height: auto; }
.partner__side .dash-list { columns: 1; }
.partner__side .dash-list__item {
  color: var(--light-dark);
  border-bottom: 1px solid var(--hair-dark);
  padding: 12px 0;
}
.partner__side .dash-list__item:last-child { border-bottom: 0; }
.partner__side .dash-list__item::before { background: var(--white); }
.partner__note {
  display: block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-dark);
}

/* Visible placeholders — every one of these must be resolved before launch. */
.placeholder {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px dashed var(--grey);
  padding: 9px 12px;
}

/* --------------------------------------------------------------------------
   16. Closing CTA band
   -------------------------------------------------------------------------- */
.cta-band .btn-row { margin-top: 44px; }

/* --------------------------------------------------------------------------
   17. Footer
   One spec, identical on every page — build it once. Deliberately sparse:
   do not reinstate the services column, company column, description
   paragraph, avatar mark, giant outlined wordmark, or a rule above the logo.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 70px 0 34px;
  border-top: 1px solid var(--hair-dark);
}

/* Wordmark left, contact right, both aligned to the top of the row. */
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 52px;
}

.footer-wordmark {
  display: block;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--white);
}
.footer-strapline {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey-dark);
}

.site-footer__contact { text-align: right; }
.site-footer h5 {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}
.site-footer__contact a,
.site-footer__contact p {
  display: block;
  font-size: 14.5px;
  line-height: 1.4;
  padding: 6px 0;
  color: var(--light-dark);
}
.site-footer__contact a:hover { color: var(--white); }

/* The row's 52px bottom padding plus this 34px leaves roughly 86px of
   deliberate open space between the contact block and the legal line. */
.site-footer__legal {
  padding-top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--grey);
}
.site-footer__legal a { color: var(--grey); }
.site-footer__legal a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   18. Booking flow
   Four steps on the left, a sticky summary sidebar on the right.
   -------------------------------------------------------------------------- */
/* The step area opens with more air than a normal section. */
.booking-section { padding-top: clamp(56px, 8vw, 110px); }

.booking-grid { display: grid; grid-template-columns: 1fr 0.42fr; gap: 54px; align-items: start; }

/* --- Step tracker -------------------------------------------------------- */
.tracker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 54px;
}
.tracker__step {
  padding: 22px 20px 20px;
  border-top: 4px solid transparent;
  margin-top: -1.5px;          /* sit the active rule over the section border */
  color: var(--grey);
}
.tracker__step.is-active { border-top-color: var(--ink); color: var(--ink); }
.tracker__n {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tracker__t { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }

/* --- Steps --------------------------------------------------------------- */
.step { display: none; }
.step.is-current { display: block; }
.step > .h2 { font-size: clamp(30px, 4.4vw, 56px); }
.step > .lead { margin: 18px 0 40px; max-width: 60ch; }

.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}
.field-label .req { color: var(--ink); }

.field { margin-bottom: 28px; }
.input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--hair);
  background: transparent;
  padding: 12px 0;
  font-size: 16px;
  color: var(--ink);
}
.input::placeholder { color: var(--light-dark); }
.input:focus { outline: none; border-bottom-color: var(--ink); }
/* Only flag a field once the customer has tried to move on. */
.step.show-errors .input:invalid { border-bottom-color: var(--ink); background: #FBF3F3; }
textarea.input { border: 1.5px solid var(--hair); padding: 14px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.group { margin-bottom: 38px; }

/* --- Service cards (multi-select) and packages (single-select) ----------- */
.group__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.group__head .field-label { margin-bottom: 0; }
.group__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

.svc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; background: var(--ink); border: 1.5px solid var(--ink); }
.svc-card {
  background: var(--white);
  padding: 24px 24px 26px;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.svc-card__row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.svc-card__t { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
/* Square checkbox that fills with a tick when the service is on. */
.svc-card__tick {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.svc-card__d { display: block; font-size: 15px; line-height: 1.5; margin-top: 7px; opacity: 0.7; }
.svc-card[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* Centred label with a hairline either side. */
.or-rule { display: flex; align-items: center; gap: 18px; margin: 32px 0 18px; }
.or-rule::before,
.or-rule::after { content: ""; height: 1px; background: var(--hair); flex: 1; }
.or-rule span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

.pkg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: var(--ink); border: 1.5px solid var(--ink); }
.pkg-card {
  background: var(--white);
  padding: 24px 24px 26px;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pkg-card__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pkg-card__t { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 12px; }
.pkg-card__d { display: block; font-size: 15px; line-height: 1.5; margin-top: 7px; opacity: 0.7; }
.pkg-card__p { display: block; margin-top: 14px; font-size: 15px; font-weight: 700; }
.pkg-card[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.summary-row__q { color: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }


/* --- Chips --------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  padding: 13px 21px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1.5px solid var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* --- Calendar ------------------------------------------------------------ */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cal-month { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.cal-nav {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 1.5px solid var(--hair);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.cal-nav:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1.5px solid var(--ink); border-left: 1px solid var(--hair); }
.cal-dow div {
  padding: 12px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  border-right: 1px solid var(--hair);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--hair); }
.cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  background: var(--white);
  cursor: pointer;
}
.cal-cell--blank { background: #FAFAF9; cursor: default; }
.cal-cell--off {
  color: var(--light-dark);
  background: #FAFAF9;
  text-decoration: line-through;
  cursor: not-allowed;
}
.cal-cell--on:hover { background: var(--off); }
.cal-cell[aria-selected="true"] { background: var(--ink); color: var(--white); }

/* --- Arrival windows ----------------------------------------------------- */
.slots-box { margin-top: 34px; border: 1.5px solid var(--ink); }
.slots-head {
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: var(--ink); }
.slot {
  background: var(--white);
  padding: 22px 20px;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.slot__t { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.slot__d {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.slot[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.slot[aria-pressed="true"] .slot__d { color: var(--grey-dark); }

/* --- Payment summary ----------------------------------------------------- */
.summary-panel { border: 1.5px solid var(--ink); padding: 30px 28px; margin-bottom: 38px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; }
.summary-row + .summary-row { border-top: 1px solid var(--hair); }
.summary-row__k { font-size: 15px; color: var(--grey); }
.summary-row__v { font-size: 17px; font-weight: 700; }
.deposit-row { padding: 20px 0 16px; }
.deposit-figure { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.policy-box { background: var(--off); padding: 24px 26px; }
.policy-box h5 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.policy-box p { font-size: 14.5px; line-height: 1.6; color: var(--grey); }

/* --- Step nav ------------------------------------------------------------ */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1.5px solid var(--ink);
}
.step-progress { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.step-nav .btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.step-nav .btn[aria-disabled="true"]:hover { background: var(--ink); color: var(--white); }
.step-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.step-note {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px dashed var(--grey);
  padding: 14px 16px;
}

/* --- Sticky sidebar ------------------------------------------------------ */
.booking-aside { position: sticky; top: 98px; border: 1.5px solid var(--ink); padding: 28px 26px 30px; }
.booking-aside h3 {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.aside-row { padding: 13px 0; border-bottom: 1px solid var(--hair); }
.aside-row__k {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.aside-row__v { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.aside-total { padding: 20px 0 6px; }
.aside-deposit { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-top: 4px; }
.aside-credit { margin-top: 10px; font-size: 13px; color: var(--grey); }
.trust { margin-top: 22px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.trust div {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 5px 0;
}

/* --------------------------------------------------------------------------
   19. Responsive
   The prototype switched layouts with a JS resize listener; these are the
   equivalent media queries, plus the stacking rules the handoff left open.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav, .header__phone { display: none; }
  .burger { display: flex; }
  .site-header__bar { gap: 16px; }

  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__aside { border-left: 0; padding-left: 0; border-top: 1.5px solid var(--ink); padding-top: 28px; }

  .svc-row { grid-template-columns: 1fr; gap: 20px; padding: 34px 0; }
  .svc-row:hover { padding-left: 0; }  /* no hover affordance on touch */
  .dash-list { columns: 1; }

  .partner { grid-template-columns: 1fr; }
  .partner__side { border-left: 0; border-top: 1.5px solid var(--ink); }
  .ins-points__label { grid-template-columns: 1fr; gap: 0; }

  /* Sidebar drops below the steps and stops sticking. */
  .booking-grid { grid-template-columns: 1fr; gap: 44px; }
  .booking-aside { position: static; }
}

@media (max-width: 900px) {
  .cellgrid--3, .cellgrid--4 { grid-template-columns: 1fr; }
  .cellgrid--6 { grid-template-columns: repeat(2, 1fr); }
  .ins-points__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .review { border-right: 0; border-bottom: 1px solid var(--ink); }
  .review:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__cell { border-bottom: 1px solid var(--hair); }
  .stats__cell:nth-child(2n) { border-right: 0; }
  .stats__cell:nth-last-child(-n+2) { border-bottom: 0; }

  .cellgrid--6 { grid-template-columns: 1fr; }
  .on-dark .cellgrid--4 { grid-template-columns: 1fr; }
  .ins-points__grid { grid-template-columns: 1fr; }
  .ins-point { padding: 32px 0 34px; border-right: 0; }

  /* Tracker to 2 x 2; the calendar stays seven across but gets shorter. */
  .tracker { grid-template-columns: repeat(2, 1fr); }
  .svc-cards { grid-template-columns: 1fr; }
  .pkg-cards { grid-template-columns: 1fr; }
  .slots { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .cal-cell { height: 48px; font-size: 14px; }
  .cal-dow div { font-size: 8.5px; letter-spacing: 0.08em; }

  /* Too narrow for two columns — stack, wordmark first, both left. */
  .site-footer__top { grid-template-columns: 1fr; gap: 30px; }
  .site-footer__contact { text-align: left; justify-items: start; }
  .site-footer__legal { flex-direction: column; gap: 10px; }
}

@media (max-width: 560px) {
  /* The wordmark, a full-size CTA and the burger will not fit across a
     phone. The header CTA is dropped here — "Book now" is still the first
     button in the hero and the last item in the mobile panel. */
  .header__actions .btn { display: none; }
  .wordmark { font-size: 17px; }
  .wordmark small { font-size: 6.9px; letter-spacing: 0.118em; }
}

@media (max-width: 520px) {
  .btn { padding: 15px 22px; font-size: 13px; }
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .cell { padding: 30px 24px 34px; }
  .pkg { padding: 32px 24px 34px; }
  .partner__main, .partner__side { padding: 34px 24px; }
}

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

@media print {
  .site-header, .marquee, .burger, .mobile-panel { display: none; }
  .faq__a { display: block !important; }
  body { font-size: 12pt; }
}