/* Frankies illustrated front end. All layouts share this stylesheet. */
@layer reset, base, components, responsive;

/* Self-hosted fonts (29 Sep 2026): the same faces Google served, from npm @fontsource 5.3.0 (OFL-1.1), latin subset, only the
   weights the site uses. Google Fonts saw every visitor's IP address, which sat badly with "no cookies, no tracking". */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/montserrat-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-latin-600-normal.woff2") format("woff2"); }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }   /* 1 Oct 2026: a class that sets display (e.g. .callsheet) can no longer show a hidden sheet or form; !important in the first layer outranks every later one */
  html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  img, svg { display: block; }
  img { max-width: 100%; height: auto; }
  a { color: inherit; text-underline-offset: .24em; }
  button, input { font: inherit; }
  address { font-style: normal; }
}

@layer base {
  :root {
    color-scheme: light;
    --paper: #f7f2e7;
    --paper-deep: #efe7d6;
    --blue: #074aa4;
    --blue-deep: #063a80;
    --yellow: #ffe01b;
    --ink: #142333;
    --sea: #709a96;
    --pale-blue: #e4f0f2;
    --line: rgb(7 74 164 / 21%);
    --muted: #486379;
    --gutter: clamp(1.25rem, 4.3vw, 4.5rem);
    --content: 87rem;
    --edge: max(var(--gutter), calc((100vw - var(--content)) / 2));
    --body: "Inter", "Segoe UI", Arial, sans-serif;
    --heading: "Montserrat", "Segoe UI", Arial, sans-serif;
    --note: "Caveat", "Segoe Print", cursive;
    --section: clamp(3.25rem, 6vw, 6rem);
  }
  body { background: var(--paper); color: var(--blue); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
  body::before { position: fixed; z-index: 20; inset: 0; background: url("../assets/paper-grain.svg"); opacity: .065; pointer-events: none; content: ""; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
  ::selection { background: var(--yellow); color: var(--ink); }
  .container { width: min(calc(100% - 2 * var(--gutter)), var(--content)); margin-inline: auto; }
  .section { padding-block: var(--section); }
  .eyebrow { font-size: .75rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .18em; }
  h1, h2, h3 { font-family: var(--heading); font-weight: 800; line-height: 1.07; letter-spacing: -.05em; }
  h1 { font-size: clamp(3rem, 5.8vw, 6.15rem); }
  h2 { font-size: clamp(2rem, 3.8vw, 3.65rem); }
  h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.035em; }
  .eyebrow + h1, .eyebrow + h2 { margin-top: .85rem; }
  .skip-link { position: fixed; z-index: 30; top: 1rem; left: 1rem; padding: .8rem 1.1rem; background: var(--yellow); color: var(--ink); transform: translateY(-180%); }
  .skip-link:focus { transform: translateY(0); }
}

@layer components {
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 3.25rem; padding: .85rem 1.35rem; border: 1px solid transparent; border-radius: .375rem; font-size: .95rem; font-weight: 700; line-height: 1.35; text-decoration: none; text-align: center; transition: background-color .16s, transform .16s, box-shadow .16s; }
  .button svg, .arrow { width: 1.15rem; height: 1.15rem; flex: none; }
  .button--yellow { color: var(--ink); background: var(--yellow); box-shadow: 0 2px 0 rgb(20 35 51 / 9%); }
  @media (hover: hover) { .button--yellow:hover { background: #f3d310; box-shadow: 0 4px 0 rgb(20 35 51 / 9%); transform: translateY(-1px); } }
  .button--outline { color: var(--blue); border-color: var(--blue); background: rgb(247 242 231 / 75%); }
  @media (hover: hover) { .button--outline:hover { background: var(--blue); color: var(--paper); } }
  .text-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 600; text-decoration-thickness: 1px; }
  .text-link .arrow { width: 1rem; height: 1rem; }
  .phone-icon { width: .85em; height: .85em; flex: none; }

  /* Three clear elements: original brand, local phone, booking action. */
  .masthead { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 7.7rem; padding-block: 1.15rem; }
  .brand { display: flex; align-items: center; gap: .95rem; flex: 0 1 24rem; min-width: 0; text-decoration: none; }
  .brand__car { width: clamp(3.2rem, 5.2vw, 4.65rem); flex: none; }
  .masthead__actions { display: flex; align-items: center; gap: 1.5rem; }
  .header-contact__number { display: inline-flex; align-items: center; min-height: 2.75rem; font: 800 clamp(1.65rem, 2.5vw, 2.4rem)/1.2 var(--heading); letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
  .group-heading { text-align: right; }
  .group-heading a { display: inline-flex; min-height: 2.75rem; align-items: center; font: 800 clamp(1.4rem, 2.3vw, 2rem)/1.2 var(--heading); text-decoration: none; letter-spacing: -.04em; }
  .navigation { border-block: 1px solid var(--line); }
  .navigation__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.3rem; }
  .primary-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 2.1rem; }
  .primary-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .875rem; font-weight: 600; text-decoration: none; }
  .primary-nav a[aria-current="page"] { text-decoration: underline; } @media (hover: hover) { .primary-nav a:hover { text-decoration: underline; } }
  .location-note { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; }
  .location-note svg { width: .9rem; height: 1.1rem; }

  /* Artwork and all its pins resize as one object. This extends beyond the grid. */
  .hero { position: relative; isolation: isolate; overflow: clip; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; gap: 0; min-height: 43rem; }
  .hero__copy { position: relative; z-index: 2; min-width: 0; padding-block: clamp(2.5rem, 5vw, 5rem); }
  .hero h1 { font-weight: 800; line-height: 1.01; letter-spacing: -.065em; }
  .hero h1 span { display: block; }
  .hero__intro { max-width: 29rem; margin-top: 1.7rem; font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.5; }
  .hero__actions { display: flex; align-items: flex-start; flex-direction: column; gap: 1rem; margin-top: 1.7rem; }
  .hero__actions .button { min-height: 3.7rem; font-size: 1.03rem; padding-inline: 1.55rem; }
  .hero__phone { display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; font: 800 clamp(1.85rem, 3.1vw, 3rem)/1.25 var(--heading); letter-spacing: -.055em; text-decoration: none; white-space: nowrap; }
  .hero__scene { position: relative; z-index: 1; width: calc(100% + var(--edge) + 5rem); margin-inline-start: -4rem; align-self: center; }
  .hero__note { display: flex; align-items: center; gap: 1rem; width: fit-content; margin: 1.45rem 0 0 .65rem; transform: rotate(-6deg); font: 500 clamp(1.65rem, 2.6vw, 2.15rem)/.94 var(--note); }
  .hero__note span { display: block; }
  .hero__note svg { width: 4.1rem; height: 2.3rem; transform: rotate(7deg); }
  /* Office markers (29 Sep 2026, Chat's handoff, replaced the blue pins): office art, town label, and a dot whose centre is the
     town's point (left/top from branches.json). --office is the art's size; the whole marker is one link on the home page. */
  .office-marker { --office: clamp(3.6rem, 5.8vw, 5.25rem); position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, calc(-100% + 7px)); color: var(--blue-deep); line-height: 1.2; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .office-marker__art { width: var(--office); height: auto; margin-bottom: -3px; filter: drop-shadow(0 3px 2px rgb(20 35 51 / 14%)); transition: transform .16s ease; }
  .office-marker__label { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border: 1px solid rgb(7 74 164 / 22%); border-radius: 999px; background: #fffdf7; box-shadow: 0 3px 9px rgb(20 35 51 / 12%); font: 700 clamp(.72rem, .95vw, .85rem)/1.2 var(--body); white-space: nowrap; transition: background-color .16s, color .16s; }
  .office-marker::after { content: ""; width: 10px; height: 10px; margin-top: 4px; border: 2px solid #fffdf7; border-radius: 50%; background: var(--blue); box-shadow: 0 1px 5px rgb(20 35 51 / 22%); }
  a.office-marker { min-width: 2.75rem; min-height: 2.75rem; }
  a.office-marker:focus-visible { z-index: 5; }
  a.office-marker:focus-visible .office-marker__art { transform: translateY(-3px); }
  a.office-marker:focus-visible .office-marker__label { background: var(--blue); color: #fff; }
  @media (hover: hover) { a.office-marker:hover { z-index: 5; } a.office-marker:hover .office-marker__art { transform: translateY(-3px); } a.office-marker:hover .office-marker__label { background: var(--blue); color: #fff; } }
  a.office-marker:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 10px; }
  .hero--group .office-marker { --office: clamp(3rem, 4.4vw, 4.1rem); }   /* three on one map: Exeter and Newton Abbot sit close */
  .hero--group h1 { font-size: clamp(3rem, 5.1vw, 5.4rem); }
  .hero--group .hero__intro { max-width: 27rem; }
  .hero-branches { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 29rem; margin-top: 1.65rem; }
  .hero-branches .button { padding-inline: 1rem; font-size: .86rem; gap: .6rem; }
  .hero__micro { margin-top: 1rem; font-size: .8rem; color: var(--muted); }

  .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
  .section-heading h2 { max-width: 59rem; }
  .section-heading__aside { max-width: 15rem; color: var(--muted); font-size: .88rem; }

  /* Equal artwork heights align titles without stretching their images. */
  .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.6rem; }
  .service { min-width: 0; padding-inline: clamp(1rem, 2.2vw, 2rem); }
  .service:first-child { padding-inline-start: 0; }
  .service:last-child { padding-inline-end: 0; }
  .service + .service { border-inline-start: 1px solid var(--line); }
  .service__art { height: clamp(11rem, 15.5vw, 15.5rem); margin-bottom: 1.4rem; }
  .service__art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .service__index { display: block; margin-bottom: .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
  .service h3 { font-size: clamp(1.55rem, 2vw, 1.95rem); }
  .service p { margin-top: .8rem; font-size: .96rem; }
  .service .text-link { margin-top: .55rem; font-size: .9rem; }

  /* A compact interlude between the two large illustrated sections. */
  .fleet { position: relative; padding-block: 2.5rem; background: var(--paper-deep); }
  .fleet h2 { font-size: clamp(1.7rem, 2.65vw, 2.6rem); }
 
  /* The panorama runs off the left edge and meets the coastal booking band. */
  .story { position: relative; overflow: clip; padding-block: clamp(4rem, 7vw, 7rem) 2.7rem; }
  .story__grid { display: grid; grid-template-columns: minmax(0, 59fr) minmax(0, 41fr); align-items: end; gap: 2.5rem; }
  .story__scene { width: calc(100% + var(--edge) + 2rem); margin-left: calc(-1 * var(--edge)); margin-bottom: -2.7rem; }
  .story__scene img { width: 100%; height: auto; }
  .story__copy { position: relative; z-index: 1; padding-bottom: 1.3rem; }
  .story__copy p:not(.eyebrow) { max-width: 32rem; margin-top: 1.2rem; font-size: 1rem; }
  .story__copy .text-link { margin-top: .85rem; }
  .story__copy p.story__signature { font: 500 1.8rem/1 var(--note); transform: rotate(-3deg); }

  .booking-band { position: relative; padding-block: 3.2rem; background: var(--blue); color: var(--paper); isolation: isolate; overflow: hidden; }
  .booking-band__waves { position: absolute; z-index: -1; right: -2rem; bottom: -.4rem; width: 29rem; height: 7rem; color: rgb(247 242 231 / 19%); }
  .booking-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; }
  .booking-band h2 { flex: 1 1 26rem; max-width: 39rem; font-size: clamp(2rem, 3.8vw, 3.7rem); }
  .booking-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.7rem; }
  .booking-band__call { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: .55rem; min-height: 3.25rem; padding: .35rem 1.3rem; border: 2px solid var(--paper); border-radius: 999px; color: var(--paper); text-decoration: none; font: 700 1rem/1.2 var(--body, inherit); }
.booking-band__call b { font: 800 clamp(1.2rem, 1.8vw, 1.5rem)/1.2 var(--heading); letter-spacing: -.03em; }
.booking-band__call .phone-icon { width: 1.3rem; height: 1.3rem; flex: none; }
@media (hover: hover) { .booking-band__call:hover { background: var(--paper); color: var(--blue); } }
.booking-band__phone { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; white-space: nowrap; font: 800 clamp(1.5rem, 2.2vw, 2.2rem)/1.2 var(--heading); letter-spacing: -.04em; text-decoration: none; }
  .booking-band :focus-visible { outline-color: var(--yellow); }

  .branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.7rem; gap: 2rem; }
  .branch-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 1.5rem 0 .5rem; border-top: 3px solid var(--yellow); }
  .branch-card__top { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .75rem; }
  .branch-card__number { font: 500 1.6rem/1 var(--note); color: var(--muted); }
  .branch-card h3 { margin-top: .65rem; min-height: 2.25em; font-size: clamp(1.5rem, 2vw, 1.9rem); }
  .branch-card__phone { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: .6rem; font: 800 clamp(1.2rem, 1.7vw, 1.6rem)/1.3 var(--heading); white-space: nowrap; letter-spacing: -.045em; text-decoration: none; }
  .branch-card address { max-width: 23rem; margin-top: .6rem; margin-bottom: 1.25rem; font-size: .9rem; }
  .branch-card .button { margin-top: auto; width: 100%; justify-content: space-between; }
  .contact { padding-block: 3.5rem; }
  .contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 2.5rem; }
  .contact h2 { margin-top: .5rem; font-size: clamp(1.65rem, 2.5vw, 2.5rem); }
  .contact__addr { margin-top: .35rem; font-size: .95rem; }
  /* the office's doors as simple icon links (29 Sep 2026, replaced the "Find the office" / "Email the office" panels) */
  .contact__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
  .clink { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.05rem; border: 1px solid var(--blue); border-radius: 999px; background: rgb(247 242 231 / 75%); font-size: .9rem; font-weight: 700; text-decoration: none; }
  @media (hover: hover) { .clink:hover { background: var(--blue); color: var(--paper); } }
  .clink svg { width: 1.15rem; height: 1.15rem; flex: none; }
  .clink svg:not(.social__icon) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .contact__phone { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .9rem; font: 800 1.45rem/1.2 var(--heading); text-decoration: none; letter-spacing: -.04em; }
  .site-footer { border-top: 1px solid var(--line); }
  .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.25rem; font-size: .78rem; }
  .footer__nav { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; }
  .footer__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
  @media (hover: hover) { .footer__nav a:hover { text-decoration: underline; } }
  .footer__copyright { flex-basis: 100%; color: var(--muted); font-size: .73rem; }

  .plain-intro { max-width: 53rem; padding-block: 4.5rem 2.5rem; }
  .plain-intro h1 { max-width: 49rem; }
  .plain-intro .lede { margin-top: 1.4rem; max-width: 39rem; font-size: 1.2rem; }
/* 30 Sep 2026: the drivers page puts its three call buttons beside the words from 60rem (on the first screen of a laptop) */
.branch-card__here { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 .65rem; border-radius: 999px; background: var(--blue); color: var(--paper); font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }   /* 1 Oct 2026: a branch site's own offices section marks where you are */
.story__devon { margin-top: 1.2rem; }
.offices .branch-card__top { min-height: 1.6rem; align-items: center; }   /* every card's top row the height of the badge, so the three cards line up */
.drivers-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: var(--content, 80rem); }
.drivers-call { align-self: center; padding: 1.2rem 1.3rem 1.4rem; border: 2px solid var(--blue); border-radius: 1.1rem; background: var(--paper); box-shadow: 0 12px 30px rgb(20 35 51 / 10%); }
.drivers-call__title { font: 800 1.25rem/1.2 var(--heading); letter-spacing: -.02em; color: var(--blue); }
.drivers-call a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-height: 3.4rem; margin-top: .6rem; padding: .5rem 1rem; border-radius: .7rem; background: var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none; }
.drivers-call a b { font: 800 1.2rem/1.2 var(--heading); letter-spacing: -.03em; white-space: nowrap; }
.drivers-call a .phone-icon { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) { .drivers-call a:hover { background: var(--blue); color: var(--paper); } }
@media (max-width: 24rem) { .drivers-call a { grid-template-columns: auto minmax(0, 1fr); } .drivers-call a b { grid-column: 2; } }   /* a small phone or large text: the number  goes under the office name */
@media (min-width: 60rem) { .drivers-intro { grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 1fr); align-items: center; column-gap: 3.5rem; padding-block: 3rem 2rem; } .drivers-intro h1 { font-size: clamp(3rem, 5.2vw, 4.6rem); } }
  .check-list { display: grid; gap: 1rem; margin-top: 2rem; }
  .check-list li { padding-left: 1.7rem; position: relative; }
  .check-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: .6rem; height: .6rem; background: var(--yellow); border: 1px solid var(--blue); border-radius: 50%; }
  .not-found { padding-block: 5rem; min-height: 60vh; }
  .not-found p { margin-block: 1.5rem; }
}

@layer responsive {
  @media (min-width: 100rem) {
    .hero__scene { width: calc(100% + var(--edge) + 5rem); }
  }
  @media (max-width: 72rem) {
    .masthead { flex-wrap: wrap; gap: 1rem; }
    .brand { flex-basis: 21rem; }
    .masthead__actions { gap: 1rem; }
    .masthead__actions .button { max-width: 10rem; }
    .hero__grid { min-height: 37rem; }
    .hero__scene { width: calc(100% + var(--edge) + 2.5rem); margin-left: -2rem; }
    .hero h1 { font-size: clamp(3rem, 5.7vw, 5rem); }
    .hero--group h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
    .hero__intro { max-width: 25rem; font-size: 1.06rem; }
    .hero__phone { font-size: 2.15rem; }
    .story__grid { gap: 1.5rem; }
    .contact__grid { gap: 1.5rem; }
  }
  @media (max-width: 58rem) {
    .masthead__actions { flex: 1 1 100%; justify-content: space-between; }
    .masthead__actions .button { max-width: none; }
    .hero__grid { grid-template-columns: 1fr; min-height: 0; }
    .hero__copy { padding-block: 2.8rem 1.5rem; max-width: 42rem; }
    .hero h1, .hero--group h1 { font-size: clamp(2.65rem, 7.7vw, 4.8rem); letter-spacing: -.058em; }
    .hero__intro { max-width: 34rem; }
    .hero__scene { width: calc(100% + 2 * var(--gutter)); max-width: 50rem; margin: -1rem 0 0; justify-self: center; }
    .hero__phone { font-size: clamp(2rem, 4.7vw, 2.8rem); }
    .hero__note { font-size: 1.85rem; margin-top: 1.25rem; }
    .hero--group .hero__scene { margin-top: 0; }
    .hero-branches { max-width: 35rem; }
    .section-heading__aside { display: none; }
    .service-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .service, .service:first-child, .service:last-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; padding-inline: 0; border-inline-start: 0; }
    .service__art { grid-column: 1; grid-row: 1 / span 4; height: auto; min-height: 11rem; margin: 0; }
    .service__art img { object-position: center; }
    .service__body { grid-column: 2; align-self: center; padding-block: .7rem; }
    .service + .service { padding-top: 2rem; border-top: 1px solid var(--line); }
    .fleet__heading { grid-column: 1 / -1; max-width: 35rem; }
    .story__grid { grid-template-columns: 1fr; gap: 2rem; }
    .story__copy { grid-row: 1; max-width: 37rem; }
    .story__scene { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
    .branch-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .branch-card { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; padding-block: 1.25rem; }
    .branch-card__top { grid-column: 1 / -1; }
    .branch-card h3 { min-height: 0; margin-top: .5rem; }
    .branch-card__phone { justify-self: end; }
    .branch-card address { margin-bottom: .25rem; }
    .branch-card .button { max-width: 24rem; justify-self: end; }
    .contact__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .contact__links { justify-content: flex-start; }
  }
  @media (max-width: 40rem) {
    :root { --gutter: 1.25rem; --section: 3.4rem; }
    body { font-size: 1rem; }
    .masthead { min-height: 0; padding-block: 1rem; gap: 1rem; }
    .brand { flex-basis: 100%; gap: .8rem; }
    .brand__car { width: 3.15rem; }
    .masthead__actions { width: 100%; align-items: center; gap: .75rem; }
    .header-contact__number { font-size: clamp(1.5rem, 6.8vw, 1.85rem); }
    .masthead__actions .button { flex: 0 1 9.5rem; min-height: 3.1rem; padding: .65rem .8rem; font-size: .77rem; gap: .6rem; }
    .masthead__actions .button .arrow { width: .85rem; }
    .group-heading { text-align: left; }
    .group-heading a { font-size: 1.4rem; }
    .navigation__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-block: .2rem .5rem; }
    .primary-nav { width: 100%; justify-content: space-between; gap: .2rem .65rem; }
    .primary-nav a { font-size: .77rem; }
    .location-note { font-size: .69rem; min-height: 1.5rem; }
    .hero__copy { padding-block: 2.25rem 1.3rem; }
    .hero .eyebrow { font-size: .66rem; }
    .hero h1 { font-size: clamp(2.5rem, 10.1vw, 3.8rem); }
    .hero--group h1 { font-size: clamp(2.45rem, 9.7vw, 3.65rem); }
    .hero__intro { font-size: 1rem; margin-top: 1.2rem; }
    .hero__intro br { display: none; }
    .hero__actions { margin-top: 1.35rem; gap: .9rem; }
    .hero__actions .button { min-height: 3.25rem; font-size: .9rem; }
    .hero__phone { font-size: clamp(1.8rem, 8vw, 2.45rem); gap: .5rem; }
    .hero__note { gap: .6rem; margin-top: 1.35rem; font-size: 1.75rem; }
    .hero__note svg { width: 3.5rem; }
    .hero__scene { width: calc(100% + 2.5rem); max-width: none; margin-top: -.3rem; }
    .office-marker { --office: 3rem; }
    .office-marker__label { padding: .18rem .45rem; font-size: .66rem; }
    .hero-branches { gap: .5rem; margin-top: 1.25rem; }
    .hero-branches .button { flex: 1 1 auto; padding: .7rem .85rem; font-size: .8rem; }
    h2 { font-size: clamp(1.9rem, 7.5vw, 2.7rem); }
    .service-grid { margin-top: 1.8rem; gap: 1.8rem; }
    .service, .service:first-child, .service:last-child { display: block; }
    .service__art { height: clamp(10rem, 49vw, 17rem); min-height: 0; margin-bottom: 1rem; }
    .service__body { padding: 0; }
    .service h3 { font-size: 1.65rem; }
    .service p { font-size: .95rem; }
    .service__index { font-size: .63rem; }
    .fleet { padding-block: 2.25rem; }
    .fleet h2 { font-size: 2rem; max-width: 19rem; }
    .story { padding-top: 3.5rem; }
    .story__grid { gap: 1.4rem; }
    .story__copy { padding-bottom: 0; }
    .story__copy p:not(.eyebrow) { font-size: .95rem; }
    .story__copy p.story__signature { font-size: 1.8rem; }
    .story__scene { width: calc(100% + 4rem); margin-left: -2rem; }
    .booking-band { padding-block: 2.7rem; }
    .booking-band h2 { flex-basis: 100%; max-width: 20rem; font-size: 2.3rem; }
    .booking-band__actions { width: 100%; flex-direction: column; align-items: flex-start; gap: 1rem; }
    .booking-band__actions .button, .booking-band__actions .booking-band__call { width: 100%; justify-content: center; }
    .booking-band__phone { font-size: 1.8rem; }
    .branch-grid { margin-top: 1.8rem; }
    .branch-card { display: flex; gap: 0; }
    .branch-card h3 { font-size: 1.65rem; }
    .branch-card__phone { font-size: 1.4rem; }
    .branch-card address { margin-bottom: 1rem; }
    .branch-card .button { max-width: none; }
    .contact { padding-block: 2.6rem; }
    .clink { flex: 1 1 auto; justify-content: center; padding-inline: .8rem; }
    .footer__inner { align-items: flex-start; gap: .4rem; }
    .footer__nav { gap: .25rem 1rem; }
    .footer__nav a { font-size: .73rem; }
    .plain-intro { padding-block: 2.75rem 1.5rem; }
    .plain-intro h1 { font-size: 2.8rem; }
    .plain-intro .lede { font-size: 1.1rem; }
  }
  @media (max-width: 22rem) {
    .masthead__actions { flex-wrap: wrap; }
    .masthead__actions .button { flex: 1 1 100%; }
    .hero-branches .button { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
  }
  @media print {
    body { color: #000; background: #fff; }
    body::before, .hero__note, .booking-band__waves { display: none; }
    .hero__grid, .story__grid, .contact__grid { display: block; }
    .hero__scene, .story__scene { width: 70%; margin: 1rem auto; }
  }
}

/* Utility pages: /app and /links (29 Sep 2026). One centred column, the Home pill top-left beside the logo (InDish pattern), card
   buttons at least 56px tall. Also the footer social row. */
@layer components {
  .util { min-height: 100svh; padding: 1.25rem var(--gutter) 3rem; }
  .util__top { display: flex; align-items: center; gap: 1rem; max-width: 30rem; margin: 0 auto 1.5rem; }
  .homepill { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1.5px solid var(--blue); border-radius: 999px; color: var(--blue); background: rgb(247 242 231 / .85); font-weight: 700; text-decoration: none; }
  .homepill svg { width: 1.1rem; height: 1.1rem; }
  @media (hover: hover) { .homepill:hover { background: var(--blue); color: var(--paper); } }
  .brand--util .brand__car { width: 2.6rem; } .brand--util .brand__text { font-size: .85rem; }
  .util__main { max-width: 30rem; margin: 0 auto; text-align: center; }
  .util__main h1 { font-size: clamp(2.2rem, 7vw, 3rem); margin-top: .5rem; }
  .util__main .lede { margin: .9rem auto 0; max-width: 28rem; }
  .util__cards { display: grid; gap: .7rem; margin-top: 1.6rem; text-align: left; }
  .ucard { display: flex; align-items: center; gap: .9rem; min-height: 3.5rem; padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: .75rem; background: rgb(255 255 255 / .55); color: var(--blue); text-decoration: none; box-shadow: 0 2px 6px rgb(20 35 51 / .06); transition: transform .16s, background-color .16s; }
  @media (hover: hover) { .ucard:hover { transform: translateY(-1px); background: #fff; } }
  .ucard .social__icon { width: 1.6rem; height: 1.6rem; flex: none; }
  .ucard .phone-icon { width: 1.4rem; height: 1.4rem; flex: none; }
  .ucard > .arrow { margin-left: auto; opacity: .7; }
  .ucard__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .ucard__text b { font-size: 1.02rem; } .ucard__text small { font-size: .82rem; color: var(--muted); }
  .ucard--yellow { background: var(--yellow); color: var(--ink); border-color: transparent; } @media (hover: hover) { .ucard--yellow:hover { background: #f3d310; } }
  .ucard--yellow .ucard__text small { color: rgb(20 35 51 / .75); }
  .util__note { margin-top: 1.2rem; font-size: .9rem; color: var(--muted); } .util__note a { font-weight: 700; color: var(--blue); }
  .util__foot { margin-top: 2rem; font-size: .85rem; color: var(--muted); } .util__foot a { color: var(--blue); font-weight: 600; }
  .footer__social { display: flex; flex-wrap: wrap; gap: .6rem; }
  .footer__social .social { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; }
  .footer__social .social__icon { width: 1.15rem; height: 1.15rem; }
  @media (hover: hover) { .footer__social .social:hover { background: var(--blue); color: var(--paper); } }
}
@layer responsive {
  /* the utility pages' small logo wins over the phone header rules (this layer comes last) */
  .brand--util { flex: none; gap: .6rem; }
  .brand--util .brand__car { width: 2.4rem; flex-basis: 2.4rem; }
  .brand--util .brand__text { font-size: .8rem; }
  .util__note a, .util__foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* ---- 29 Sep 2026, harvest from InDish (Frankies-Website-Harvest-from-InDish-2026-09-29.md): the header row that follows, the
   phone tab bar, the one-screen phone hero with a scroll cue, hero traits, real-content sections, the three-office footer. ---- */
@layer components {
  :root { --tab: 4.6rem; --mh: 7.7rem; }
  /* 1. Header row: static in flow; once the page has scrolled (JS adds .scrolled) the row becomes a fixed compact bar and the
     wrapper keeps its measured height so nothing jumps. The nav row and the branch strip stay in flow and scroll away. */
  .masthead-wrap { position: relative; }
  .masthead-bar { transition: padding .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s; }
  .site-header.scrolled .masthead-wrap { height: var(--mh); }
  .site-header.scrolled .masthead-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--paper); box-shadow: 0 4px 24px rgb(20 35 51 / .12); }
  .site-header.scrolled .masthead { min-height: 0; padding-block: .5rem; gap: 1rem; }
  .site-header.scrolled .brand__car { width: 2.4rem; }
  .site-header.scrolled .header-contact__number { font-size: 1.35rem; }
  .site-header.scrolled .masthead__actions .button { min-height: 2.6rem; padding: .5rem 1rem; }
  .site-header.scrolled .group-heading .eyebrow { display: none; }
  section[id] { scroll-margin-top: 4.5rem; }
  /* 2. Traits under the hero buttons */
  .traits { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem; }
  .traits li { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 700; color: var(--blue); }
  .trait__icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--blue); }
  /* 3. Scroll cue: handwritten word, thin line, chevron that bobs; fades once the page moves */
  .scroll-cue { position: absolute; left: var(--gutter); bottom: .6rem; z-index: 3; display: flex; align-items: center; gap: .5rem; color: var(--blue); opacity: .8; transition: opacity .45s; pointer-events: none; }
  .scroll-cue span { font: 600 1.1rem/1 var(--note); }
  .scroll-cue svg { width: .6rem; height: 2rem; fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: cue-bob 1.8s infinite; }
  .scroll-cue.gone { opacity: 0; }
  @keyframes cue-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } }
  /* 4. Fleet: four cells, pay cell */
  .fleet__note { display: flex; align-items: center; gap: .45rem; margin-top: 1rem; font-size: .88rem; font-weight: 600; }
  .fleet__note .trait__icon { width: 1.2rem; height: 1.2rem; }
  .contact__hours { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
  /* 5. Footer: brand line, three offices, socials */
  .footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 1.5rem 3rem; align-items: start; padding-block: 2.2rem 1.4rem; }
  .footer__title { font: 800 1.15rem/1.2 var(--heading); letter-spacing: -.02em; }
  .footer__line { margin-top: .4rem; font-size: .85rem; color: var(--muted); max-width: 26rem; }
  .footer__brand .footer__nav { margin-top: .6rem; }
  .footer__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
  .footer__office { display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; padding-top: .6rem; border-top: 2px solid var(--yellow); }
  .footer__office b { font-size: .92rem; }
  .footer__office > a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: none; font-size: 1.02rem; }
  .footer__office .footer__site { min-height: 2.75rem; font-weight: 600; font-size: .82rem; text-decoration: underline; text-underline-offset: .2em; }
  .footer__social { grid-column: 1 / -1; align-items: center; }
  .footer__social-label { font-size: .82rem; font-weight: 700; color: var(--muted); margin-right: .2rem; }
  .footer__copyright { grid-column: 1 / -1; }
  /* 6. Tab bar (phones and tablets): four doors on a branch, five on the Devon pages; it stays put (30 Sep 2026) */
  .tabbar { display: none; }
}
@layer responsive {
  @media (max-width: 64rem) {
    body { padding-bottom: calc(var(--tab) + env(safe-area-inset-bottom)); }
    .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; transform: translateZ(0); will-change: transform; backface-visibility: hidden; background: var(--blue); border-top: 2px solid var(--yellow); border-radius: 18px 18px 0 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); min-height: var(--tab); gap: 4px; box-shadow: 0 -4px 16px rgb(20 35 51 / .18); }   /* 30 Sep 2026: it never hides, so nothing to animate */
    .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 60px; padding: 6px 4px 10px; border-radius: 14px; color: var(--paper); text-decoration: none; font-size: .76rem; font-weight: 700; opacity: .9; }
    .tabbar a svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
    .tabbar a[data-tab="call"] svg { fill: currentColor; stroke: none; }
    .tabbar a.on { opacity: 1; background: var(--blue-deep); }
    .tabbar a.on::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 26px; height: 2px; border-radius: 999px; background: var(--yellow); transform: translateX(-50%); }
    .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }   /* four doors on a branch, five (Home, Book, Call, App, Offices) on the Devon-wide pages */
    .footer__inner { grid-template-columns: 1fr; }
  }
  @media (max-width: 40rem) {
    /* one-screen phone hero: copy, buttons, traits, then the map, with the cue above the tab bar */
    .hero__grid { min-height: calc(100svh - var(--tab) - env(safe-area-inset-bottom)); align-content: start; padding-bottom: 2.4rem; }
    .hero__scene { max-height: 34svh; overflow: hidden; }
    .traits { gap: .35rem .9rem; } .traits li { font-size: .78rem; }
    .scroll-cue { left: 50%; transform: translateX(-50%); bottom: .3rem; }
    .footer__offices { grid-template-columns: 1fr; }
    .site-header.scrolled .header-contact__number { font-size: 1.1rem; }
    .site-header.scrolled .masthead__actions .button { display: none; }
    .site-header.scrolled .masthead { flex-wrap: nowrap; }
    .site-header.scrolled .masthead__actions { flex-direction: row; align-items: center; width: auto; }
  }
  @media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } .masthead-bar { transition: none; } }
}

/* ---- 29 Sep 2026 04:40: Husqi's header notes. (1) The town sits in the logo lockup, "TAXIS TIVERTON", the way the printed logos
   read; FRANKIES stays the real artwork, the second line is Montserrat 800 in the logo's own blue (#003A94), so any town works.
   (2) One nav row: Home, the sections, then "Also serving Devon from" + the other two branches; no separate strip.
   (3) The whole header (logo row + nav row) travels with the page once scrolled; on phones only the compact logo row stays
   (the tab bar carries the doors). ---- */
@layer components {
  .brand { align-items: center; gap: .8rem; flex: 0 1 auto; }
  .brand__text { display: flex; flex-direction: column; align-items: flex-start; font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1; }
  .brand__frankies { width: 9.2em; height: auto; }
  .brand__town { margin-top: .16em; font: 800 .74em/1 var(--heading); letter-spacing: .04em; text-transform: uppercase; color: #003A94; white-space: nowrap; }
  .nav-branches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-left: 1.4rem; padding-left: 1.4rem; border-left: 1px solid var(--line); }
  .nav-also { font-size: .78rem; font-weight: 600; color: var(--muted); }
  .nav-branch { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; padding: 0 .75rem; border: 1px solid var(--blue); border-radius: .3rem; font-size: .82rem; font-weight: 600; text-decoration: none; background: rgb(223 240 250 / .55); }
  @media (hover: hover) { .nav-branch:hover { background: var(--blue); color: var(--paper); } }
  .site-header.scrolled .brand__text { font-size: .8rem; }
  .site-header.scrolled .navigation { border-top: 1px solid var(--line); }
  .site-header.scrolled .navigation__inner { min-height: 2.6rem; }
  .site-header.scrolled .primary-nav a { min-height: 2.5rem; }
  .site-header.scrolled .nav-branch { min-height: 2rem; }
}
@layer responsive {
  @media (max-width: 64rem) {
    .nav-branches { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
  }
  @media (max-width: 40rem) {
    .brand { flex-basis: 100%; }
    .brand__text { font-size: 1rem; }
    .brand__frankies { width: 8.4em; }
    .nav-branch { flex: 1 1 auto; justify-content: center; min-height: 2.75rem; }
    .nav-also { width: 100%; }
    .site-header.scrolled .navigation { display: none; }   /* phones: the tab bar carries the doors; keep the fixed bar to one row */
    .site-header.scrolled .brand { flex-basis: auto; }
    .site-header.scrolled .brand__text { font-size: .7rem; }
  }
}
@layer responsive { @media (max-width: 40rem) { .brand--util { flex: 0 1 auto; } .util__top { flex-wrap: wrap; } } }
/* 29 Sep 2026 04:55: scrolled bar on tablets and phones stays one row; the actions cell no longer claims the full width (it overlapped the logo). */
@layer responsive {
  @media (max-width: 58rem) {
    .site-header.scrolled .masthead { flex-wrap: nowrap; }
    .site-header.scrolled .brand { flex: 1 1 auto; min-width: 0; }
    .site-header.scrolled .masthead__actions { flex: 0 0 auto; width: auto; justify-content: flex-end; gap: .75rem; }
  }
  @media (max-width: 40rem) {
    .site-header.scrolled .brand__text { font-size: .82rem; }
    .site-header.scrolled .brand__car { width: 2.1rem; }
  }
}

/* ---- 29 Sep 2026 05:10: Husqi's second round. (1) The first screen fits: the hero no longer stretches to the map's full height,
   the map is capped, the copy sits up; "Tiverton taxis. And beyond." is now "Taxis in Tiverton. Day and night.".
   (2) The icon ribbon under the hero is gone. (3) Enquiry form in the contact section (Netlify Forms). ---- */
@layer components {
  .hero__grid { min-height: 0; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; }
  .hero__copy { padding-block: 1.6rem 1.4rem; }
  .hero h1 { font-size: clamp(2.7rem, 4.7vw, 4.5rem); }
  .hero__intro { max-width: 30rem; margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.18rem); }
  .hero__actions { margin-top: 1.3rem; gap: .8rem; }
  .hero__actions .button { min-height: 3.4rem; }
  .traits { margin-top: 1.1rem; }
  .hero__note { margin-top: 1rem; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
  .hero__scene { display: flex; justify-content: flex-end; align-self: center; }
  .enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
  .enquiry__intro h3 { margin-top: .5rem; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.15; }
  .enquiry__intro p:not(.eyebrow) { margin-top: .8rem; font-size: .95rem; }
  .enquiry__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.1rem; align-content: start; }
  .field { display: flex; flex-direction: column; gap: .35rem; }
  .field--wide { grid-column: 1 / -1; }
  .field label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
  .field input, .field textarea { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid rgb(7 74 164 / .35); border-radius: .35rem; background: #fff; font: inherit; color: inherit; }
  .field textarea { resize: vertical; min-height: 6.5rem; }
  .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--blue); }
  .enquiry__send { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; }
  .enquiry__send small { font-size: .8rem; color: var(--muted); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}
@layer responsive {

  @media (max-width: 58rem) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__copy { padding-block: 2rem 1rem; }
    .hero__scene { justify-content: center; margin-top: 0; }
    .enquiry { grid-template-columns: 1fr; gap: 1.5rem; }
  }
  @media (max-width: 40rem) {
    .hero__grid { min-height: 0; padding-bottom: 1.5rem; }
    .hero__scene { max-height: none; }
    .enquiry__form { grid-template-columns: 1fr; }
  }
}
/* 29 Sep 2026 05:20: phones: the header row is shorter (the lockup already names the town, so the location note goes; the branch pills sit inline after "Also serving Devon from"). */
@layer responsive { @media (max-width: 40rem) {
  .location-note { display: none; }
  .nav-also { width: 100%; }
  .nav-branch { flex: 0 1 auto; min-height: 2.4rem; padding-inline: .6rem; font-size: .78rem; }
  .navigation__inner { padding-block: .35rem; }
} }

/* ---- 29 Sep 2026 04:20: (1) the map pins sit on the image again: the pins and the image share a wrapper (.hero__map) that is
   exactly the image's size, so the percentages hold whatever the figure's width. (2) "TIVERTON BOOKINGS" is a big label to the
   left of the number, so nobody wonders which office's site they are on. ---- */
@layer components {
  .hero__map { position: relative; display: block; max-width: 100%; line-height: 0; }
  .hero__map > picture { display: contents; }   /* the <picture> only swaps the file on phones; the img lays out as the box's own child */
  .hero__map > picture > img { display: block; width: auto; max-width: 100%; max-height: min(36rem, calc(100vh - 16rem)); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 100%); }
  .header-contact { display: flex; align-items: center; gap: .9rem; }
  .header-contact__town { font: 700 clamp(1.2rem, 1.95vw, 1.9rem)/1 var(--heading); letter-spacing: .04em; text-transform: uppercase; color: #003A94; white-space: nowrap; }  /* one line, the weight of the TAXIS line in the lockup, not the FRANKIES artwork */
  .site-header.scrolled .header-contact__town { font-size: 1.2rem; }
}
@layer responsive {
  @media (max-width: 72rem) { .hero__map > picture > img { max-height: min(32rem, calc(100vh - 16rem)); } }
  @media (max-width: 58rem) {
    .hero__map > picture > img { max-height: 24rem; mask-image: none; margin-inline: auto; }
    .header-contact__town { font-size: 1.35rem; }
  }
  @media (max-width: 40rem) {
    .hero__map > picture > img { max-height: 18rem; }
    .header-contact { gap: .6rem; }
    .header-contact__town { font-size: 1.25rem; }
    .header-contact__b { display: none; }
    /* phones: the yellow book button is the first thing in the hero and the tab bar carries Call, so the masthead keeps the town + number only */
    .masthead__actions .button { display: none; }
    .header-contact { width: 100%; justify-content: space-between; }
    .header-contact__number { font-size: clamp(1.6rem, 7.5vw, 2rem); }
    .site-header.scrolled .header-contact__town { display: none; }
  }
}
/* 29 Sep 2026 04:30: tablets: the masthead button no longer folds into three lines; when the actions wrap under the logo they sit on one line, right-aligned. */
@layer responsive { @media (max-width: 72rem) and (min-width: 40.01rem) {
  .masthead__actions { flex: 1 1 100%; justify-content: flex-end; }
  .masthead__actions .button { max-width: none; white-space: nowrap; }
} }

/* ---- 29 Sep 2026 v3: Chat's art is in. Hero = the painted Devon map (no labels; the pins name the towns) with the Corolla cut-out
   in front (the InDish cut-out-subject pattern); each branch page's story band and the home page's branch cards carry that
   branch's painted scene; Our cars shows the Corolla, Prius+ and Vito as pictures. ---- */
@layer components {
  .hero__map { overflow: visible; }
  .hero__map > picture > img { mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%); }
  .story--scene .story__scene { width: 100%; margin-left: 0; margin-bottom: 0; align-self: center; }
  .story--scene .story__grid { align-items: center; }
  .story--scene .story__copy { padding-bottom: 0; }
  .fleet__cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: 2.2rem; }
  .car { display: flex; flex-direction: column; align-items: flex-start; padding-top: .9rem; border-top: 3px solid var(--yellow); }
  .car__art { width: 100%; margin: 0 0 .6rem; }
  .car__art img { display: block; width: 92%; height: auto; margin-inline: auto; filter: drop-shadow(0 10px 12px rgb(20 35 51 / .22)); }
  .car h3 { font-size: 1.3rem; }
  .car p { margin-top: .5rem; font-size: .9rem; }
  .car .text-link { margin-top: .6rem; font-size: .86rem; }
  .fleet__pay { display: flex; align-items: flex-start; gap: .8rem; max-width: 46rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .92rem; }
  .fleet__pay svg { flex: 0 0 auto; width: 1.35rem; height: auto; margin-top: .1rem; }
  .fleet__heading { max-width: 36rem; }
  .branch-card__art { width: 100%; margin: 0 0 1rem; }
  .branch-card__art img { display: block; width: 100%; height: auto; }
}
@layer responsive {
  @media (max-width: 58rem) {
    .fleet__cars { grid-template-columns: 1fr 1fr; }
    .story--scene .story__scene { width: 100%; margin-left: 0; }
    .story--scene .story__copy { grid-row: auto; }
    .branch-card__art { grid-column: 1 / -1; }
  }
  @media (max-width: 40rem) {
    .hero__map > picture > img { mask-image: none; }
    .fleet__cars { grid-template-columns: 1fr; gap: 1.6rem; }
    .car__art img { width: 80%; }
  }
}

/* 29 Sep 2026 04:50: Husqi: the app download and Follow pages need a door on the branch page, next to the book button, not in the header. */
@layer components {
  .hero__more { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
  .hero__mini { min-height: 2.75rem; padding: .35rem .95rem; font-size: .84rem; gap: .5rem; }
  .hero__mini svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
  .hero__mini .social__icon { width: 1.05rem; height: 1.05rem; }
}
@layer responsive { @media (max-width: 40rem) { .hero__mini { flex: 1 1 auto; justify-content: center; } } }
@layer components { .hero__mini svg:not(.social__icon) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } }

/* ---- 29 Sep 2026 v3.1: the Corolla moves. The static cut-out is replaced by Chat's SVG rig (2200 x 1000 stage, body 1774 wide from
   x 76, 280 units of travel), sized so the car reads the same as before (46% of the map = 57% stage). ---- */
@layer components {
  .hero__map > .hero__car-stage { position: absolute; left: -9.5%; bottom: -3%; width: 57%; z-index: 4; pointer-events: none; }
  .hero__car-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
}
@layer responsive {
  @media (max-width: 58rem) { .hero__map > .hero__car-stage { width: 59.5%; left: -5.5%; bottom: -2%; } }
  @media (max-width: 40rem) { .hero__map > .hero__car-stage { width: 67%; left: -2%; bottom: -4%; } }
}
/* ---- 29 Sep 2026 deploy pass (layout guard, 11 widths + large text): the masthead number could not wrap at 320-360 on the Newton
   Abbot page and at 768 the label + number + button row stuck out; the /links cards could not shrink under large text (grid items
   default to min-width:auto). ---- */
@layer responsive {
  @media (max-width: 72rem) {
    .masthead__actions { flex-wrap: wrap; }
    .header-contact { flex-wrap: wrap; min-width: 0; }
    .header-contact__town { font-size: clamp(1.05rem, 1.7vw, 1.35rem); white-space: normal; }
    .header-contact__number { font-size: clamp(1.35rem, 2.6vw, 2rem); }
  }
  @media (max-width: 40rem) {
    .header-contact { flex-wrap: wrap; row-gap: .1rem; }
    .header-contact__number { font-size: clamp(1.3rem, 6.4vw, 1.9rem); max-width: 100%; }
    .util__cards { grid-template-columns: minmax(0, 1fr); }
    .ucard { min-width: 0; }
    .ucard__text { min-width: 0; overflow-wrap: anywhere; }
  }
}
/* Home page markers on a phone map: smaller office + label so Exeter's label and Newton Abbot's roof never meet (guard, large text at 320/360). */
@layer responsive { @media (max-width: 40rem) { .hero--group .office-marker { --office: 2.2rem; } .hero--group .office-marker__label { font-size: .62rem; padding: .16rem .4rem; } } }
@layer responsive { @media (prefers-reduced-motion: reduce) { .office-marker__art, .office-marker__label { transition: none; } a.office-marker:hover .office-marker__art, a.office-marker:focus-visible .office-marker__art { transform: none; } } }
/* 29 Sep 2026 05:40, Husqi: "the map is too far to the right and the car moves clunky and not much". The map sits centred in its column
   (was pinned to the right edge), the car's run is 900 stage units on desktop / 420 on phones (was 280 / 160) with eased motion in site.js. */
@layer components { .hero__scene { justify-content: center; } }

/* ---- 29 Sep 2026 (Opus, v3.2): the phone rework. Husqi: "the mobile version is horrendous". Measured at 390 x 844 before: header
   219 px (home) / 264 px (branch, four rows), hero 802 / 869 px against a 767 px fold, the map cut by the tab bar, the scroll cue
   switched off, 8.8 screens, the home Call tab not a phone link. Recipe from InDish's index.html (phones): the hero is ONE screen
   (100svh - header - tab bar), the picture's height follows the screen, the traits and the note go, the cue bobs above the tab bar.
   --hh is the header's measured height (site.js). ---- */
@layer components {
  .nav-also__short, .gh-short { display: none; }
  /* the scroll cue, back on (InDish: a handwritten word and a thin chevron that bobs; fades once the page moves) */
  .scroll-cue { display: flex; flex-direction: column; gap: 2px; left: 50%; transform: translateX(-50%); bottom: .4rem; }   /* bottom centre: bottom-left sat on the "starts here" note */
  /* home page: the office cards line up across the row (the three scenes are 588-607 px tall, so every label and number sat at
     a different height), and the heading sits over the middle of the row, not in its top-left corner */
  .offices > .eyebrow, .offices > h2 { text-align: center; }
  .branch-card__art { aspect-ratio: 1100 / 607; }
  .branch-card__art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  /* the Call sheet (pages that cover all three offices) */
  .callsheet { position: fixed; z-index: 61; left: .75rem; right: .75rem; bottom: calc(var(--tab) + env(safe-area-inset-bottom) + .6rem); max-width: 26rem; margin-inline: auto; padding: .6rem 1rem 1rem; border: 2px solid var(--blue); border-radius: 1rem; background: var(--paper); box-shadow: 0 12px 32px rgb(20 35 51 / 30%); }
  .callsheet__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 800 1.1rem/1.2 var(--heading); letter-spacing: -.02em; }
  .callsheet__close { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; color: var(--blue); font-size: 1.8rem; line-height: 1; cursor: pointer; }
  .callsheet a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.2rem; margin-top: .5rem; padding: .5rem 1rem; border-radius: .6rem; background: var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none; }
  .callsheet a b { font: 800 1.15rem/1.2 var(--heading); letter-spacing: -.03em; white-space: nowrap; }
}
@layer responsive {
  @media (max-width: 40rem) {
    /* header: ONE row (logo left, number right; the lockup already says TAXIS EXETER, so the separate town label goes), then the
       other two offices on one short line. The section links go: the tab bar carries the doors on phones. */
    /* wrap, not nowrap: at normal text the logo and number share one row; with large text on (guard, 20px root at 320/360)
       the number drops under the logo instead of sitting on it. The brand never shrinks (its artwork is sized in em). */
    .masthead { flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding-block: .7rem; }
    .brand { flex: 0 0 auto; gap: .55rem; }
    .masthead__actions, .group-heading { margin-left: auto; }
    .brand__car { width: 2.5rem; }
    .brand__text { font-size: .86rem; }
    .masthead__actions { flex: 0 0 auto; width: auto; justify-content: flex-end; }
    .header-contact { width: auto; flex-wrap: nowrap; justify-content: flex-end; }
    .header-contact__town { display: none; }
    .header-contact__number { font-size: clamp(1.05rem, 4.9vw, 1.4rem); }
    .primary-nav > a { display: none; }
    .navigation__inner { padding-block: .25rem .45rem; }
    .nav-branches { flex-wrap: wrap; gap: .3rem .45rem; }
    .nav-also { width: auto; font-size: .74rem; white-space: nowrap; }
    .nav-also__long { display: none; } .nav-also__short { display: inline; }
    .nav-branch { flex: 0 1 auto; min-height: 2.5rem; padding-inline: .6rem; font-size: .78rem; white-space: nowrap; }
    .site-header--group .navigation { display: none; }
    .group-heading .eyebrow { display: none; }
    .group-heading a { font-size: clamp(.95rem, 4.3vw, 1.15rem); white-space: nowrap; }
    /* hero: exactly one screen, copy on top, the map fills what is left, the cue sits just above the tab bar */
    .hero__grid { display: flex; flex-direction: column; min-height: calc(100svh - var(--hh, 7rem) - var(--tab) - env(safe-area-inset-bottom)); padding-bottom: 3.3rem; }
    .hero__copy { padding-block: 1.1rem .4rem; }
    .hero .eyebrow { display: none; }
    .hero h1, .hero--group h1 { font-size: clamp(1.95rem, 8.7vw, 2.55rem); letter-spacing: -.05em; }
    .hero__intro { margin-top: .6rem; font-size: .95rem; line-height: 1.45; }
    .hero__actions { margin-top: 1rem; gap: .6rem; }
    .hero__actions .button { width: 100%; min-height: 3.2rem; }
    .hero__phone, .traits, .hero__note, .hero__micro { display: none; }   /* the number is in the header, one row above */
    .hero__more { flex-wrap: nowrap; margin-top: .55rem; gap: .5rem; }
    .hero__mini { font-size: .8rem; padding-inline: .6rem; }
    .hero-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: 1rem; }
    .hero-branches .button, .hero-branches .button:only-child { width: auto; min-height: 3.1rem; padding: .5rem .3rem; font-size: .82rem; line-height: 1.15; gap: .3rem; }
    .hero-branches .button .arrow { display: none; }
    .hero__scene { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin: .4rem auto 0; overflow: visible; }   /* visible: an older 34svh rule clipped the top pin */
    .hero--group .hero__scene { align-items: flex-start; margin-top: 1.4rem; }
    .hero__map > picture > img { max-height: clamp(9.5rem, 30svh, 17rem); }
    .scroll-cue { bottom: .35rem; }
    .scroll-cue svg { height: 1.9rem; }
    .contact__grid { gap: 1rem; }
    /* the page after the hero: same content, less scrolling (measured at 390: offices 1707 px, services 1596, fleet 1403).
       Cars and office cards become rows, picture left, words right; the service pictures are shorter. */
    .service__art { height: clamp(7.5rem, 34vw, 10rem); }
    .fleet__cars { gap: 1.1rem; margin-top: 1.4rem; }
    .car { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: .9rem; align-items: start; padding-top: .8rem; }
    .car__art { grid-row: 1 / span 3; align-self: center; margin: 0; }
    .car__art img { width: 100%; }
    .car h3, .car p, .car .text-link { grid-column: 2; }
    .car h3 { font-size: 1.1rem; }
    .car p { margin-top: .3rem; font-size: .85rem; line-height: 1.45; }
    .car .text-link { margin-top: .2rem; font-size: .82rem; }
    .fleet__pay { margin-top: 1.4rem; font-size: .86rem; }
    .branch-card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: .9rem; align-items: start; padding-block: 1rem .25rem; }
    .branch-card__top { display: none; }   /* "EXETER OFFICE 01": the name right under it says the same */
    .branch-card__art { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin: 0; }
    .branch-card h3, .branch-card__phone, .branch-card address { grid-column: 2; }
    .branch-card h3 { margin-top: 0; font-size: 1.2rem; }
    .branch-card__phone { margin-top: .1rem; font-size: 1.15rem; justify-self: start; white-space: normal; }   /* may wrap under large text only */
    .branch-card address { margin: 0; font-size: .82rem; }
    .branch-card .button { grid-column: 1 / -1; margin-top: .8rem; }
  }
  /* wide screens: the car's run crosses the bottom centre, so the cue sits bottom right under the map */
  /* (29 Sep 2026 19:3x: the bottom-right placement for wide screens is withdrawn: Husqi, "the scroll animation should always be central". The cue now has its own row under the art on every screen above a phone; see the block at the end.) */
  /* short phones (an SE, a landscape-ish window): the app / follow pair goes (the tab bar has App, the footer has Follow) and the map shrinks */
  @media (max-width: 40rem) and (max-height: 700px) {
    .hero__more { display: none; }
    .hero__intro { font-size: .9rem; }
    .hero__map > picture > img { max-height: clamp(7rem, 23svh, 12rem); }
  }
  /* 320-352: the label and both pills still fit one row at normal text size; under large text they may wrap, which is allowed */
  @media (max-width: 22rem) {
    .brand__car { width: 2.05rem; }
    .brand__text { font-size: .74rem; }
    .header-contact__number { font-size: 1rem; }
    .gh-long { display: none; } .gh-short { display: inline; }
    .nav-branches { flex-wrap: wrap; gap: .3rem .35rem; }
    .nav-also { font-size: .68rem; }
    .nav-branch { padding-inline: .45rem; font-size: .72rem; gap: .2rem; }
    .hero-branches .button { width: auto; }
  }
}

/* ---- 29 Sep 2026: the booking pages (/<branch>/book/). A slim bar (Home pill, the branch lockup, the number) stays on top; the
   branch's own Autocab eBooker fills the rest of the screen in one framed box (edge to edge on phones, where every pixel of
   width matters to its form). No tab bar here: it would sit over the eBooker's Book button. ---- */
@layer components {
  .bookbar { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
  .bookbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; width: min(calc(100% - 2 * var(--gutter)), var(--content)); margin-inline: auto; padding-block: .55rem; }
  .bookbar__call { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin-left: auto; font: 800 clamp(1.05rem, 2vw, 1.5rem)/1.2 var(--heading); letter-spacing: -.03em; text-decoration: none; white-space: nowrap; }
  .book { width: min(calc(100% - 2 * var(--gutter)), 62rem); margin-inline: auto; padding-block: 1.1rem 2rem; }
  .book__head h1 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
  .book__head p { margin-top: .35rem; font-size: .95rem; color: var(--muted); }
  .book__head p a, .book__note a { color: var(--blue); font-weight: 700; }
  .book__frame { margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 10px 30px rgb(20 35 51 / 10%); }
  .book__frame iframe { display: block; width: 100%; height: max(36rem, calc(100svh - 12rem)); border: 0; }
  .book__note { margin-top: .9rem; font-size: .82rem; color: var(--muted); }
}
@layer responsive {
  @media (max-width: 40rem) {
    .bookbar__inner { gap: .45rem .6rem; }
    .bookbar .homepill { padding-inline: .8rem; }
    /* one row on phones: the call door is a round phone button (the number is written out in the line under the heading) */
    .bookbar__call { justify-content: center; width: 2.9rem; height: 2.9rem; min-height: 0; border: 1.5px solid var(--blue); border-radius: 50%; }
    .bookbar__call span { display: none; }
    .bookbar__call .phone-icon { width: 1.15rem; height: 1.15rem; }
    .book { padding-top: .6rem; }
    .book__head h1 { font-size: 1.35rem; }
    .book__head p { font-size: .88rem; }
    .book__head .book__lead { display: none; }   /* 30 Sep 2026: the round call button is in the bar and the number is in the 8-seater line; the form gets the room */
    .book__frame { margin-top: .6rem; }
    .book__frame { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0; box-shadow: none; }
    .book__frame iframe { height: max(32rem, calc(100svh - 8.5rem)); }
  }
}

/* ---- 29 Sep 2026: (a) the phone footer was ~800 px, a full screen of three office blocks. On phones each office is ONE row: name +
   street on the left, the number as the tap target on the right; the "X site" links go (the header's "Other offices" pills and
   the Offices tab already do that job); the socials sit on one short row with no label. (b) the home page's phone map grows
   into the space under it and sits in the middle of what is left, instead of floating over a gap. ---- */
@layer responsive {
  @media (max-width: 40rem) {
    .footer__inner { gap: 1rem; padding-block: 1.5rem 1.1rem; }
    .footer__offices { gap: 0; }
    .footer__office { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; align-items: center; padding-block: .5rem; border-top: 1px solid var(--line); }
    .footer__office:first-child { border-top: 2px solid var(--yellow); }
    .footer__office b { grid-column: 1; font-size: .88rem; }
    .footer__office span { grid-column: 1; font-size: .72rem; color: var(--muted); }
    .footer__office > a:not(.footer__site) { grid-column: 2; grid-row: 1 / span 2; font-size: .98rem; white-space: nowrap; }
    .footer__office .footer__site { display: none; }
    .footer__social-label { display: none; }
    .footer__social { gap: .4rem; }
    .footer__social .social { padding-inline: .7rem; font-size: .8rem; }
    .hero--group .hero__scene { align-items: center; margin-top: .6rem; }
    .hero--group .hero__map > picture > img { max-height: clamp(9.5rem, 40svh, 20rem); }
  }
  @media (max-width: 40rem) and (max-height: 700px) { .hero--group .hero__map > picture > img { max-height: clamp(7rem, 26svh, 13rem); } }
}

/* ---- 29 Sep 2026: business accounts. The /business/ page (intro, who we look after, four services, how it works, the application
   form) and the "Travel on account" band on the home and branch pages. Reuses the enquiry form's grid and the traits list. ---- */
@layer components {
  .field select { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid rgb(7 74 164 / .35); border-radius: .35rem; background: #fff; font: inherit; color: inherit; }
  .field select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--blue); }
  .bizband { padding-block: 2.4rem; background: var(--pale-blue); border-block: 1px solid var(--line); }
  .bizband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.5rem; }
  .bizband h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
  .bizband p:not(.eyebrow) { max-width: 38rem; margin-top: .5rem; font-size: .95rem; }
  .biz-intro { max-width: none; padding-bottom: 1.5rem; }   /* .plain-intro caps + centres at 53rem; here the intro lines up with the sections below */
  .biz-intro .lede { max-width: 40rem; }
  .biz-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-top: 1.5rem; }
  .biz-section { padding-block: 1.8rem; }
  .biz-h { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
  .biz-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
  .biz-chips li { padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 55%); font-size: .9rem; font-weight: 600; }
  .biz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
  .biz-card { min-width: 0; padding: 1.2rem 1.2rem 1.3rem; border-top: 3px solid var(--yellow); border-radius: .4rem; background: rgb(255 255 255 / 50%); }
  .biz-card h3 { font-size: 1.3rem; }
  .biz-card p { margin-top: .5rem; font-size: .93rem; }
  .biz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
  .biz-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-items: start; }
  .biz-steps span { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 800 1.1rem/1 var(--heading); }
  .biz-steps b { font: 800 1.15rem/1.3 var(--heading); }
  .biz-steps p { font-size: .92rem; }
  #apply .enquiry { margin-top: 0; }
}
@layer responsive {
  @media (max-width: 58rem) { .biz-steps { grid-template-columns: 1fr; } }
  @media (max-width: 40rem) {
    .bizband { padding-block: 1.8rem; }
    .bizband .button { width: 100%; }
    .biz-intro__actions .button { width: 100%; }
    .biz-intro h1 { font-size: min(2.8rem, 11.5vw); }   /* "businesses." is the longest word on the site: sized by the screen, not the text setting (guard, large text at 320) */
    .biz-chips li { font-size: .84rem; }
  }
}

/* 29 Sep 2026: the 8-seater line on the booking pages (the online form books standard cars only) */
@layer components {
  /* 1 Oct 2026 (Husqi): the heading first, the call button right beside it with a good gap, one row on every screen */
  .book__row { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem clamp(1rem, 3vw, 2.25rem); margin-top: .5rem; }
  .book__row h1 { flex: 0 1 auto; min-width: 0; }
  .book__call { flex: none; }
  .book__call-short { display: none; }
  .book__call { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .35rem 1.2rem; border: 2px solid var(--yellow); border-radius: 999px; background: var(--yellow); color: var(--ink); text-decoration: none; flex-wrap: wrap; max-width: 100%; font-weight: 700; box-shadow: 0 3px 0 rgb(20 35 51 / 12%); }   /* 1 Oct 2026: yellow, right of the heading (was left until the afternoon) */   /* wraps under large text on a 320 px screen (layout guard) */
  .book__call b, .book__call span { white-space: nowrap; }
  @media (max-width: 40rem) {   /* phones: a short "Call" pill beside the heading (the number is on the round button in the bar) */
    .book__row { gap: .75rem; }
    .book__call { min-height: 2.75rem; padding: .3rem .95rem; gap: .4rem; }
    .book__call-long, .book__call b { display: none; }
    .book__call-short { display: inline; font-size: .95rem; }
  }
  .book__call b { font: 800 1.1rem/1.2 var(--heading); letter-spacing: -.03em; }
  .book__call .phone-icon { width: 1.1rem; height: 1.1rem; flex: none; }
  @media (hover: hover) { .book__call:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); } }
}

/* ---- 29 Sep 2026, Husqi: "when you click our branches it doesn't center the branches page". Measured: the heading landed
   106-115 px under the fixed bar (the section's own top padding) and the three "Go to" buttons ended below the window (880 px on a
   1366 x 768 laptop, 907 on 1440 x 900). Now: less padding above the offices, the heading on one line from 58rem up, shorter
   office pictures, and the landing offset = the fixed bar + a little air, so the whole row is in view after the click. ---- */
@layer components {
  .offices { padding-top: 1.75rem; }
  /* the box sets the height, the picture fills it: with the img in flow, a figure with aspect-ratio still grows to the image's own height (the scenes are 588-607 px tall), which is what kept Tiverton 7 px lower */
  .branch-card__art { position: relative; aspect-ratio: 1100 / 500; }
  .branch-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
}
@layer responsive {
  /* html has scroll-padding-top: 1.5rem too, and the two add up: 5.25rem + 1.5rem = 108 px against a ~104 px scrolled bar; phones 2.75rem + 1.5rem = 68 against 66 */
  @media (min-width: 40.01rem) { section[id] { scroll-margin-top: 5.25rem; } }
  @media (max-width: 40rem) { section[id] { scroll-margin-top: 2.75rem; } }
  @media (min-width: 58.01rem) {
    .offices > h2 br { display: none; }
    .offices > h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
    .offices .branch-grid { margin-top: 1.6rem; }
    .branch-card { padding-top: 1rem; }
  }
}

/* ---- 29 Sep 2026, Husqi: "the scroll animation should always be central, all chats keep putting it to the side". Nothing forced
   the side placement: it was copied from InDish's desktop rule (bottom-left under the copy column), then moved bottom-right to
   dodge the Corolla. RULE for every width: the cue is horizontally centred. Above phones it gets its OWN row under the art (hero
   bottom padding), so the car's run never crosses it; the map is capped a little lower on short laptop screens so that row stays
   on the first screen. Phones already had it centred above the tab bar. ---- */
@layer responsive {
  @media (min-width: 40.01rem) {
    .hero__grid { padding-bottom: 3.6rem; }
    .scroll-cue { left: 50%; right: auto; transform: translateX(-50%); bottom: .5rem; z-index: 5; }
  }
  @media (min-width: 58.01rem) and (max-height: 800px) { .hero__map > picture > img { max-height: min(36rem, calc(100vh - 20rem)); } }
}

/* ---- 30 Sep 2026 TABLETS AND SHORT LAPTOPS (Husqi: "do ... the parked tablet/laptop layout job"). Measured before, branch pages: the
   top section ran 57-378 px past the first screen at 768x1024, 820x1180, 1024x768, 1280x720 and 1366x768 (the scroll cue with it), the
   header was 218-309 px on tablets (logo on its own row, the menu on two). Now: a one-row header (logo | number + Book), a one-row menu
   (the logo is Home, the "you're on our site" note goes; an upright tablet keeps only Other offices, the tab bar has the doors), and a
   hero no taller than the screen left under the header and the tab bar (the map scales to fit; its markers ride on the same box). */
@layer responsive {
  :root { --tabh: 0px; }
  @media (max-width: 64rem) { :root { --tabh: calc(var(--tab) + env(safe-area-inset-bottom)); } }
  /* the one-row menu reaches small laptops too (1280 wide wrapped it onto two rows). 84rem → 92rem on 1 Oct 2026: the branch menu's new
     "Drivers wanted" wrapped it onto two rows from 1345 to 1455 px wide */
  @media (min-width: 40.01rem) and (max-width: 92rem) {
    .location-note { display: none; }
    .nav-also__long { display: none; } .nav-also__short { display: inline; }
    .primary-nav { flex-wrap: nowrap; column-gap: 1.3rem; }
    .site-header:not(.site-header--group) .primary-nav > a:first-child { display: none; }   /* the logo is Home */
    .primary-nav a { white-space: nowrap; }
    .nav-branches { display: inline-flex; align-items: center; gap: .4rem; }
    .nav-branch { min-height: 2.6rem; padding-inline: .6rem; font-size: .8rem; white-space: nowrap; }
  }
  @media (min-width: 40.01rem) and (max-width: 72rem) {
    .masthead { flex-wrap: nowrap; min-height: 0; padding-block: .8rem; gap: 1.25rem; }
    .brand { flex: 0 1 17rem; }
    .brand__car { width: 3.3rem; }
    .masthead__actions { flex: 0 0 auto; width: auto; margin-left: auto; gap: 1rem; justify-content: flex-end; }
    .masthead__actions .button { min-height: 3rem; padding-inline: 1.1rem; }
    .header-contact__number { font-size: clamp(1.35rem, 2.3vw, 1.85rem); }
    .header-contact__town { font-size: clamp(1rem, 1.6vw, 1.3rem); }
    .location-note { display: none; }
    .nav-also__long { display: none; } .nav-also__short { display: inline; }
    .primary-nav { flex-wrap: nowrap; column-gap: 1.3rem; }
    .site-header:not(.site-header--group) .primary-nav > a:first-child { display: none; }   /* the logo is Home */
    .primary-nav a { font-size: .82rem; white-space: nowrap; }
    .nav-branches { display: inline-flex; align-items: center; gap: .4rem; }
    .nav-branch { min-height: 2.6rem; padding-inline: .6rem; font-size: .8rem; white-space: nowrap; }
    .hero__note, .hero__phone { display: none; }   /* the number is in the header and Call is in the tab bar */
  }
  @media (min-width: 40.01rem) and (max-width: 58rem) {
    .header-contact__town { display: none; }
    .primary-nav > a { display: none; }
    .site-header--group .navigation { display: none; }
    .hero__grid { display: flex; flex-direction: column; align-items: stretch; min-height: calc(100svh - var(--hh, 9rem) - var(--tabh)); }   /* stretch: the words line up with the logo, the map centres itself */
    .hero__copy { padding-block: 1.6rem .4rem; }
    .hero h1, .hero--group h1 { font-size: clamp(2.5rem, 6.4vw, 4.2rem); }   /* 'Taxis in Newton Abbot.' on one line at 768 */
    .hero__phone { display: none; }
    .hero__scene { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; margin: .4rem auto 0; overflow: visible; }
    .hero__map > picture > img { max-height: clamp(12rem, calc(100svh - var(--hh, 9rem) - var(--tabh) - 30rem), 30rem); }
  }
  @media (min-width: 58.01rem) {
    .hero__grid { min-height: min(43rem, calc(100svh - var(--hh, 11rem) - var(--tabh))); }
    .hero__map > picture > img { max-height: min(36rem, calc(100svh - var(--hh, 11rem) - var(--tabh) - 5.5rem)); }
  }
  @media (min-width: 58.01rem) and (max-height: 56rem) {
    .hero__copy { padding-block: 1.5rem 1rem; }
    .hero__intro { margin-top: 1rem; }
    .hero__actions { margin-top: 1.1rem; gap: .6rem; }
    .hero__note { display: none; }
    .hero--long .hero__grid { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }   /* a long town name (Newton Abbot) gets a wider text column */
    .hero--long h1 { font-size: clamp(2.5rem, 3.7vw, 3.7rem); }   /* ... and keeps the heading on two lines */
  }
  @media (min-width: 58.01rem) and (max-width: 72rem) {
    .hero__map > picture > img { max-height: min(36rem, calc(100svh - var(--hh, 11rem) - var(--tabh) - 6.75rem)); }   /* landscape tablets: a little more room for the cue */
    .hero:not(.hero--group) .hero__grid { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
    .hero:not(.hero--group) h1 { font-size: clamp(2.5rem, 4.8vw, 3.7rem); }   /* 'Taxis in Tiverton.' on one line at 1024 */
  }
}
/* ---- 1 Oct 2026 v3.2.4: the drivers' application form (reuses the enquiry grid), the how-it-works sheet after it (two deals side by
   side when there is room, the Teignbridge plating box only on /drivers/thanks/teignbridge/), /privacy/, and the privacy link under
   every form (24 px tall at least: the guard's floor for anything tappable). ---- */
@layer components {
  .util--wide .util__top, .util--wide .util__main { max-width: 46rem; }
  .util--wide .util__cards { max-width: 30rem; margin-inline: auto; }
  .deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 1.6rem; text-align: left; }
  .deal { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: 1rem 1.1rem 1.2rem; border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: .75rem; background: rgb(255 255 255 / .6); }
  .deal__art { margin: 0 0 .3rem; }
  .deal__art img { width: 100%; height: auto; aspect-ratio: 1100 / 535; object-fit: contain; object-position: bottom; }   /* the Corolla (495) and Vito (535) art: one frame, so the labels line up */
  .deal__k { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
  .deal__fig { font: 800 2.6rem/1 var(--heading); letter-spacing: -.03em; color: var(--blue); }
  .deal p:not(.deal__k):not(.deal__fig) { font-size: .95rem; }
  .deal .deal__plate { font-weight: 700; }
  .deal__same { margin-top: .9rem; font-size: .9rem; color: var(--muted); }
  .deal__teign { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 4px solid var(--blue); border-radius: .5rem; background: var(--pale-blue); text-align: left; }
  .deal__teign-t { font-weight: 800; color: var(--blue); }
  .deal__teign p:not(.deal__teign-t) { margin-top: .35rem; font-size: .95rem; }
  .deal__next { margin-top: 1.6rem; font-weight: 700; }
  .privacy h2 { margin-top: 2rem; }
  .privacy h2 + p { margin-top: .5rem; max-width: 42rem; }
  .privacy__phones { display: grid; gap: .2rem; margin-top: .6rem; }
  .privacy__phones a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: .5rem; font-weight: 700; color: var(--blue); }
  .privacy__date { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); }
  .enquiry__send small a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--blue); font-weight: 600; }
}
@layer responsive {
  .privacy h2 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.7rem); }   /* in this layer because the phone h2 size lives here and a later layer wins */
}
/* ---- 1 Oct 2026 v3.2.6: the form guard's inline message (typo kept, phone to check, too many sends). Spans the form grid. ---- */
@layer components {
  .form-msg { grid-column: 1 / -1; margin: 0; padding: .65rem .85rem; border-left: 4px solid #b42318; border-radius: .4rem; background: #fdecea; color: #7a1a10; font-size: .93rem; font-weight: 600; }
}

/* ---- 1 Oct 2026 (Husqi, live screenshot of /exeter/business/ at 1920: "the business accounts starts too low"): the business intro used the
   site-wide h1 (up to 6.15rem) inside .plain-intro's 49rem cap, so the heading took four lines under 4.5rem of padding. On laptops and
   desktops it is now two lines in a wider column with less space above; phones keep their own size (responsive layer). ---- */
@layer components {
  .biz-intro { padding-top: 2.5rem; }
  .biz-intro h1 { max-width: 62rem; font-size: clamp(2.6rem, 4.2vw, 4.4rem); }
}

/* ---- 1 Oct 2026 ONE ACCOUNT, ALL THREE AREAS (Husqi: "make it more obvious that by setting up a account with that local branch they
   will have acsess to all 3 areas maybe add cards"). A blue band under the business intro: the words left, the three office cards
   right (stacked under 60rem; on phones each card is a row, art beside the words). The same cards sit on the business thank-you
   pages (paper background), so they carry their own border and fill. ---- */
@layer components {
  .biz-areas { margin-block: 1rem 1.5rem; padding-block: 2.6rem; background: var(--blue); color: var(--paper); }
  .biz-areas__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.6rem 3rem; align-items: center; }
  .biz-areas .eyebrow { color: var(--yellow); }
  .biz-areas .biz-h { color: #fff; }
  .biz-areas__copy p:not(.eyebrow) { max-width: 34rem; margin-top: .8rem; font-size: 1rem; line-height: 1.55; }
  .biz-areas__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; text-align: left; }
  .biz-area { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: .75rem; background: #fffdf7; color: var(--ink); }
  .biz-area--home { box-shadow: 0 0 0 3px var(--yellow); }
  .biz-area__art { width: 3.6rem; height: auto; }
  .biz-area__text { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
  .biz-area__tag { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
  .biz-area h3 { font-size: 1.25rem; color: var(--blue-deep); }
  .biz-area p { font-size: .87rem; line-height: 1.4; color: var(--muted); }
  .biz-area a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-weight: 800; color: var(--blue); text-decoration: none; white-space: nowrap; }
  .biz-area a .phone-icon { width: 1rem; height: 1rem; }
  .util .biz-areas__list { margin-top: 1.5rem; }
}
@layer responsive {
  @media (hover: hover) { .biz-area a:hover { text-decoration: underline; } }
  @media (max-width: 60rem) { .biz-areas__inner { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 40rem) {
    .biz-areas { padding-block: 2rem; }
    .biz-areas__list { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
    .biz-area { flex-direction: row; align-items: center; gap: .9rem; padding: .75rem .9rem; }
    .biz-area__art { width: 3.2rem; flex: none; }
  }
}
/* ---- 1 Oct 2026: the Drivers wanted band on each branch home (under Our cars), the business band's layout. It was on the deeper paper
   at first, the same as Our cars above it, so the two read as one block; now the business band's pale blue, so it stands apart. ---- */
@layer components {
  .bizband--drivers { background: var(--pale-blue); }
}
/* ---- 1 Oct 2026 THE iPHONE BARS (Husqi: "on iphone when you scroll the nav buttons on the bottom stays but the browser buttons keep
   dissapearing making our nav jump. on indish we solved this by making it all stay"). InDish's fix (brand.css, 29 Sep 2026), same
   names: on phones and tablets the pages with the tab bar (<html class="appscroll">, set by build.py) scroll the BODY, not the
   window. With nothing for the window to scroll, Safari and Chrome keep their address and button bars still instead of shrinking
   and re-growing them mid-scroll, so the fixed tab bar sits on a floor that never moves. site.js reads the offset through pageY()
   (window OR body). Trade-offs (as InDish): tapping the iPhone clock no longer jumps to the top, and the address bar stays full
   size. The /book/ pages have no tab bar and keep the window scroll. ---- */
@layer responsive {
  @media (max-width: 64rem) {
    html.appscroll { height: 100%; overflow: hidden; scroll-behavior: auto; }
    html.appscroll body { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
  }
  @media (prefers-reduced-motion: reduce) { html.appscroll body { scroll-behavior: auto; } }
  @media print { html.appscroll, html.appscroll body { height: auto; overflow: visible; } }   /* print every page, not one screen of the body scroller */
}
/* ---- 1 Oct 2026: on laptops and desktops the band's button sits level with the top of its words, not halfway down, so it is in view
   when About us / Our cars land with only the top of the band showing (site.js land()). Phones stack the button under the words. ---- */
@layer responsive {
  @media (min-width: 60.01rem) { .bizband__inner { align-items: flex-start; } }
}
/* ---- 1 Oct 2026 (Husqi: "the nav has offices i think it should have contact instead and the mobile page should be rearranged so
   when you click contact it also promotes becoming a driver"; then "slim drivers slip"). Phones and tablets (the tab bar's sizes):
   the Drivers wanted band under Our cars hides and a one-line strip shows right under the contact block, so the Contact door lands
   with it in view. Laptops: the other way round. ---- */
@layer components {
  .drvstrip { display: none; }
}
@layer responsive {
  @media (max-width: 64rem) {
    .bizband--drivers { display: none; }
    .drvstrip { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .75rem; min-height: 3.5rem; margin-top: 1.1rem; padding: .6rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: .6rem; background: var(--pale-blue); color: var(--blue); text-decoration: none; }
    .drvstrip__k { flex-basis: 100%; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .drvstrip__t { flex: 1 1 auto; font: 800 1rem/1.25 var(--heading); }
    .drvstrip__go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; white-space: nowrap; }
    .drvstrip__go .arrow { width: 1rem; }
  }
}

/* ---- 1 Oct 2026 THE BRANCH HEADER (Husqi: "drag the newton abbot in the header to the left next to logo with nice gap, put the
   number central of header and make it slightly bigger. make a click to call yellow card on the right and next to it keep the book
   a newton abbot taxi card but reword to click to book online"). From 72rem up (where the older rules stop laying the row out): a
   three-column grid, logo + "<TOWN> BOOKINGS" | the number, centred | Click to call + Click to book online. The wrappers
   (.masthead__left, .masthead__btns) are display:contents below 72rem, so the older phone and tablet rules see the same row as
   before; the town beside the logo shows only up here (the one beside the number only down there). Narrower laptops drop the word
   "bookings" (below 92rem), then the town (below 80rem): the logo already says TAXIS <TOWN>.
   The contact block's Click to call is the same card, lined up under the header's: both cards have fixed widths (--callw, --bookw),
   and on a branch that books online the contact card keeps the book card's width free on its right. ---- */
@layer components {
  :root { --callw: 11.5rem; --bookw: 15.25rem; }
  .masthead__left, .masthead__btns { display: contents; }
  .masthead__town { display: none; }
  .masthead__call:not(.masthead__call--only) { display: none; }
  .masthead__call, .contact__call, .contact__msg { gap: .6rem; }
  .masthead__call .phone-icon, .contact__call .phone-icon { width: 1.1rem; height: 1.1rem; }
  .contact__msg svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .contact__side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; min-width: 0; }
  .contact__grid { align-items: stretch; }
  .contact__side .contact__links { margin-top: auto; }
  .contact__cta { display: flex; justify-content: flex-end; gap: .75rem; }
  .contact__call { width: var(--callw); }
  .contact__msg { display: none; }
}
@layer responsive {
  @media (min-width: 72.01rem) {
    .masthead--branch { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.5rem; }
    .masthead--branch .masthead__left { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); }   /* no min-width:0: the number moves aside before anything overlaps it */
    .masthead--branch .brand { flex: none; }
    .masthead__town { display: block; padding-left: clamp(1rem, 1.6vw, 2rem); border-left: 2px solid var(--line); font: 800 clamp(.95rem, 1.1vw, 1.2rem)/1.1 var(--heading); letter-spacing: .04em; text-transform: uppercase; color: #003A94; white-space: nowrap; }
    .masthead__town .header-contact__b { display: block; margin-top: .2em; font-size: .62em; font-weight: 700; letter-spacing: .16em; }   /* two lines like the logo: TOWN over BOOKINGS */
    .masthead--branch .masthead__actions, .masthead--branch .header-contact { display: contents; }
    .masthead--branch .header-contact__town { display: none; }
    .masthead--branch .header-contact__number { grid-column: 2; justify-self: center; font-size: clamp(1.95rem, 2.7vw, 2.8rem); }
    .masthead--branch .masthead__btns { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .75rem; }
    .masthead--branch .masthead__btns .button { flex: none; }   /* fixed widths, so the contact card below lines up */
    .masthead__call:not(.masthead__call--only) { display: inline-flex; }
    .masthead__call { width: var(--callw); }
    .masthead__book { width: var(--bookw); }
    .contact__cta--book { margin-right: calc(var(--bookw) + .75rem); }
    .site-header.scrolled .masthead__town { font-size: .95rem; }
    .site-header.scrolled .masthead--branch .header-contact__number { font-size: 1.55rem; }
  }

  @media (min-width: 72.01rem) and (max-width: 84rem) { .masthead__town { display: none; } }
  @media (max-width: 64rem) {
    .contact__side { align-items: stretch; }
    .contact__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact__call, .contact__msg { display: inline-flex; width: auto; min-height: 3.25rem; padding-inline: .8rem; }
    .contact__side .contact__links { margin-top: 0; }
  }
  @media (max-width: 40rem) {
    .contact__call, .contact__msg { padding-inline: .55rem; gap: .45rem; white-space: nowrap; }
  }
}
/* ---- 1 Oct 2026: the drivers pages' "How it works" section under the form (the same two deals as the sheet after applying), in a
   column narrow enough that the two car pictures stay card-sized on a wide screen. ---- */
@layer components {
  .drv-how .deals { max-width: 54rem; }
  .drv-how__apply { margin-top: 1.4rem; }
}

/* ---- 1 Oct 2026 CHAT'S COMPACT OTHER-OFFICES STRIP (ChatGPT handoff, Downloads/frankies-header-offices: "Replace ONLY the current
   other-offices row below the main header"). Where that row is only "Other offices: X Y" (up to 58rem: phones and upright tablets):
   a 48 px row plus its border, cream 30 px pills inside 44 px tap areas, a short yellow underline in each, the label in muted grey.
   Same links and markup as before; laptops keep their menu row. Colours mapped to the site's (--blue, --muted, --yellow). ---- */
@layer responsive {
  @media (max-width: 58rem) {
    .site-header:not(.site-header--group) .navigation__inner { min-height: 3rem; padding-block: .125rem; }
    .site-header:not(.site-header--group) .nav-branches { flex-wrap: wrap; gap: 0 .375rem; }   /* one row at normal text (320 up); with large text on it wraps instead of scrolling sideways (layout guard) */
    .site-header:not(.site-header--group) .nav-also { margin-right: .125rem; font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
    .nav-branches .nav-branch { position: relative; isolation: isolate; flex: 0 0 auto; min-height: 2.75rem; gap: .3rem; padding: 0 .625rem; border: 0; border-radius: 0; background: none; color: var(--blue); font-size: .75rem; font-weight: 750; white-space: nowrap; }
    .nav-branches .nav-branch::before { content: ""; position: absolute; z-index: -1; inset: .4375rem 0; border: 1px solid #d0d8d4; border-radius: 999px; background: #fffdf6; }
    .nav-branches .nav-branch::after { content: ""; position: absolute; bottom: .5rem; left: .75rem; width: 1.5625rem; height: 2px; border-radius: 2px; background: var(--yellow); }
    .nav-branches .nav-branch span { font-size: .85em; }
    .nav-branches .nav-branch:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 999px; }
  }
  @media (max-width: 58rem) and (hover: hover) {
    .nav-branches .nav-branch:hover { background: none; color: var(--blue); }
    .nav-branches .nav-branch:hover::before { background: #fff7cf; border-color: #b9c8c7; }
  }
  @media (max-width: 22.4375rem) {
    .site-header:not(.site-header--group) .nav-branches { gap: .25rem; }
    .site-header:not(.site-header--group) .nav-also { font-size: .6875rem; }
    .nav-branches .nav-branch { padding-inline: .5rem; }
  }
}
/* ---- 1 Oct 2026: Our cars' heading on one line on laptops and desktops ("The right car for the trip."), so the section is shorter and
   the Our cars link lands with the heading, the cars and the Drivers wanted band's heading and button in view (site.js land()). ---- */
@layer responsive {
  @media (min-width: 72.01rem) {
    .fleet__heading { max-width: none; }
    .fleet h2 br { display: none; }
  }
}
/* ---- 1 Oct 2026 THE SCROLL CUE (Husqi: "check scroll marker positining on all devices on pc its not perfect and on mobile half of the
   second l is cut out and the arrow head is below the nav line when you land on home"). It sat at the bottom of the hero, and the
   hero runs a few pixels under the tab bar on phones (measured 320-430 wide: the arrow's bob went under it, and the hero's
   overflow:clip cut the letters). Now it is pinned to the bottom centre of the SCREEN, above the tab bar (--tabh is 0 where there
   is none); it still fades once the page moves (site.js .gone). Hidden on very short screens, where it would sit on the picture. ---- */
@layer responsive {
  .scroll-cue { position: fixed; top: auto; left: 50%; right: auto; bottom: calc(var(--tabh) + 1rem); transform: translateX(-50%); z-index: 5; }
  .scroll-cue span { line-height: 1.35; padding-inline: .15em; }
  @media (max-height: 37.5rem) { .scroll-cue { display: none; } }
}
/* ---- 1 Oct 2026 (Husqi: "on newton abbot home page is the only one where taxis in newton abbot the word abbot falls on a new line and
   that changes the whole sites layout makes the map lower than the other which makes the scroll marker look bad"). Measured: three
   lines on phones, at 1024, 1440 and 1920 (map 17-29 px lower; on phones into the scroll cue). "Taxis in Newton Abbot." is 11.28
   font-sizes wide in Montserrat 800 at the loosest letter-spacing used (-.05em), so the heading is sized to its own column: at most
   8.6% of the text column's width (container units, 3% to spare), never bigger than every other branch's. Two lines everywhere. ---- */
@layer responsive {
  .hero--long .hero__copy { container-type: inline-size; align-self: stretch; width: 100%; }   /* a container needs a width of its own: on phones the copy was content-sized, which reads as 0 */
  .hero--long h1 span { font-size: min(1em, 8.6cqi); }
}
/* ---- 1 Oct 2026 PHONE NUMBERS (Husqi: "when numbers appear on the website such as 01392 33 22 11 the distance between the numbers that
   are close to each other is too small the numbers look scrunched up too close"). The big numbers shared the headings' tight
   tracking (-.03 to -.055em). Every place a number is shown gets normal-plus tracking and a little more between the groups
   (01392 33 22 11 / 01626 333 333 / 01884 255 333, Husqi's formats). Unlayered on purpose: some of the old rules are unlayered too. ---- */
.header-contact__number, .hero__phone, .booking-band__call b, .booking-band__phone, .branch-card__phone, .contact__phone,
.drivers-call a b, .callsheet a b, .bookbar__call, .book__call b { letter-spacing: .015em; word-spacing: .08em; }

/* ---- 1 Oct 2026 (Husqi: "on mobile the scroll indicator should be on the left cause the map blocks it"): phones and tablets put it
   bottom left, in the gutter beside the map, still above the tab bar. ---- */
@layer responsive {
  @media (max-width: 64rem) { .scroll-cue { left: var(--gutter); transform: none; } }
}