/* ============================================================================
   v14 "Harbour · Terracotta B" — Combined Air-Con & Electrical
   (v14 revises photographs and figure captions only: a seventh work tile, two
   re-cut EV-charger crops, and the mosaic's phone override — the colour system,
   type scale and composition are v11-v13's)

   The v7b Harbour composition (photo-led hero, mosaic strip, scope slab, work
   gallery, approach rail, contact block, v7b enquiry page) carrying the
   v10 Terracotta B identity: chalk grounds, terracotta accents, near-black ink
   and Justin's own dark AE artwork on a chalk header.

   Read this as one colour system, not a recolour of a navy page:
     * the only dark surfaces are the ink used for the hero shelf, the approach
       band and the hero/CTA buttons — there is no navy or amber anywhere;
     * the header, services and contact grounds are chalk/white, so the supplied
       dark artwork sits on light chrome unaltered (no reversed derivative, no
       white plaque, no recolour);
     * type follows v10B: Helvetica-family display, 700 headings, sentence-case
       h2/h3, letterspaced small caps for labels only.

   Deep-cleaning is no longer a section or a nav item: it is one sentence in the
   air-conditioning scope cell plus one ordinary tile in the work gallery.

   Shared demo-form layer: ../v4-shared/enquiry.css and ../v4-shared/enquiry.js
   are loaded first/unchanged; this file supplies the visual values they read.
   No network, no upload, no booking, no analytics.
   ========================================================================= */
:root {
  /* chalk / paper */
  --chalk: #F5F1EA;
  --chalk-deep: #EDE6DB;
  --white: #FFFFFF;

  /* ink */
  --ink: #181310;
  --ink-soft: #241D18;
  --muted: #5B5048;
  --faint: #6A5C52;

  /* rules */
  --line: #E0D6C7;
  --line-strong: #C0B2A0;
  --line-control: #8C7A66;   /* >=3:1 on chalk AND white: form control boundaries */
  --dark-line: #3A2F28;

  /* terracotta */
  --terra: #AF4626;          /* filled surfaces; white on it is 5.64:1 */
  --terra-deep: #9E3D1F;     /* terracotta as text on light: 6.06:1 on chalk */
  --terra-soft: #E8855F;     /* terracotta as text on ink: 6.91:1 */
  --terra-tint: #F7C6AE;     /* kicker/label over the hero scrim */

  /* on-dark */
  --on-dark: #F6F1E9;
  --dark-muted: #C9BEB2;
  --hero-body: #EFE6DC;

  --danger: #B3261E;

  /* shared component contract (read by ../v4-shared/enquiry.css) */
  --bg: var(--chalk);
  --surface: var(--white);
  --surface-2: var(--white);
  --text: var(--ink);
  --accent: var(--terra);
  --accent-ink: #FFFFFF;
  --header-bg: var(--chalk);
  --header-line: var(--terra);
  --header-rule: 4px;
  --logo-w: clamp(200px, 23vw, 300px);
  --wrap: 1180px;
  --radius: 2px;
  --bw: 1px;
  --gutter: 1.25rem;
  --font-body: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-display: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: "Helvetica Neue", "Nimbus Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
  --label-tracking: .12em;
}

@media (max-width: 480px) { :root { --gutter: 1rem; } }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--chalk);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.62;
  margin: 0;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.028em; line-height: 1.06; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--terra-deep); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }

/* The shared layer sizes .wrap with 93vw; the Harbour composition wants a fixed
   gutter so the hero copy and the sections share one left edge. */
.wrap { width: min(var(--wrap), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }

/* Letterspaced small caps are the only "mono" in this system (v10B sets
   --font-mono to the body face). 12.5px keeps the label floor above 12px. */
.mono, .eye {
  font-family: var(--font-body);
  font-size: .78125rem;      /* 12.5px */
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ header */
.site-head {
  background: var(--header-bg);
  border-bottom: var(--header-rule) solid var(--header-line);
  position: relative;
  z-index: 12;
}
.head-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem;
  padding: 14px 0; position: relative;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
/* .brand img lives in the shared layer and out-specifies a bare class, so the two
   logo boxes are scoped through the anchor here. */
.brand img.brand-lockup { width: var(--logo-w); height: auto; }
.brand img.brand-mark { display: none; width: 56px; height: 40px; object-fit: contain; }
.brand-type { display: none; flex-direction: column; align-items: flex-start; line-height: 1.1; text-transform: uppercase; }
.brand-type .bt1 { font-size: .78rem; font-weight: 600; letter-spacing: .07em; color: var(--muted); }
.brand-type .bt2 { font-size: .8125rem; font-weight: 700; letter-spacing: .09em; color: var(--ink); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--ink); text-decoration: none; font-family: var(--font-body);
  font-size: .97rem; letter-spacing: 0; text-transform: none; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.nav-toggle { display: none; }

.head-phone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 1.15rem; background: var(--terra); color: #fff;
  font-weight: 700; font-size: .97rem; letter-spacing: 0; text-decoration: none;
  white-space: nowrap;
}
.head-phone:hover { background: #C1512D; }
.head-phone:focus-visible { outline-color: var(--ink); }

/* -------------------------------------------------------------------- hero */
/* the hero is a full-bleed photo band, so it must not inherit the section rhythm */
.hero { position: relative; background: var(--ink); padding: 0; }
/* The copy block is bottom-anchored inside the photo band. The media is kept at
   least as tall as the copy: 15.6vw tracks the h1's 6.1vw display size and 470px
   covers the fixed parts (kicker, standfirst, actions, trust line) plus ~70px of
   photograph above the copy, so four wrapped h1 lines can never push the kicker up
   behind the header at 901-1440px. Above ~1500px the 16/7 ratio is taller and the
   rule has no effect. */
.hero-media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 7; min-height: calc(15.6vw + 470px); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Warm near-black scrim — ink (#181310), not navy and not neutral grey.
   Two layers: a vertical one that anchors the top edge and builds a shelf under
   the copy, and a horizontal one that is strongest on the left where the copy
   sits and falls away to 0.50 on the right so the outdoor unit still reads.
   Contrast is gated on the scrim alone (composite over pure white, the brightest
   possible photo pixel), so it holds for any crop or viewport:
   research/v11-hero-contrast.json records the per-width composite numbers. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,19,16,.45) 0%, rgba(24,19,16,.16) 22%, rgba(24,19,16,.48) 55%, rgba(24,19,16,.90) 100%),
    linear-gradient(90deg, rgba(24,19,16,.94) 0%, rgba(24,19,16,.90) 46%, rgba(24,19,16,.62) 72%, rgba(24,19,16,.50) 100%);
}
.hero-copy { position: absolute; inset: auto 0 0 0; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero-copy .wrap { position: relative; }
.kicker { color: var(--terra-tint); margin: 0 0 1rem; max-width: 34rem; }
.hero h1 {
  font-size: clamp(2.15rem, 6.1vw, 4.5rem);
  line-height: .97;
  text-transform: uppercase;
  letter-spacing: -.025em;
  margin: 0 0 1.1rem;
  max-width: 22ch;
  color: #FFFFFF;
}
.hero .standfirst { color: var(--hero-body); max-width: 42rem; margin: 0 0 1rem; font-size: 1.05rem; }
.hero .standfirst + .standfirst { margin-top: -.25rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1rem; }
/* on the photo the secondary action has to be light-on-dark: the shared
   .btn-ghost inks the text for light grounds and would vanish here. */
.hero .btn-ghost {
  color: #FFFFFF; border-color: rgba(255,255,255,.78); background: rgba(24,19,16,.42);
}
.hero .btn-ghost:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; filter: none; }
.hero .trust { color: var(--terra-tint); margin: 0; max-width: 40rem; }

/* ------------------------------------------------------------------ mosaic */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: var(--terra); }
.mosaic figure { margin: 0; overflow: hidden; background: var(--ink); }
.mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ----------------------------------------------------------------- ticker */
.ticker { background: var(--terra); color: #fff; border: 0; overflow: hidden; }
.ticker p {
  margin: 0; padding: .72rem 0; white-space: normal; text-align: center;
  font-family: var(--font-body); font-size: .78125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
}

/* ---------------------------------------------------------------- sections */
section { padding: clamp(2.6rem, 6vw, 4.4rem) 0; }
h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.35rem);
  margin: 0 0 .7rem;
}
.section-lede { color: var(--muted); max-width: 46rem; margin: 0 0 2.2rem; }
.section-lede strong { color: var(--ink); }

#services { background: var(--white); }

/* Scope slab: a bordered category table, deliberately not a 3-up icon-card grid.
   Hairlines are 1px chalk, the category label is terracotta.
   Seven categories since v13 (generator repairs added). Six filled a 2x3 grid exactly; an
   odd count would leave the last row half empty, so the seventh cell spans the full width
   and sets its label and heading beside its sentence — a deliberate closing row rather
   than a lonely card at the four widths this round is checked at (320/390/768/1440). */
.slab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.slab > div { padding: clamp(1.2rem, 2.4vw, 1.75rem); border-top: 1px solid var(--line); }
.slab > div:nth-child(-n+2) { border-top: 0; }
.slab > div:nth-child(even) { border-left: 1px solid var(--line); }
.slab .mono { color: var(--terra-deep); }
.slab h3 { font-size: 1.2rem; margin: .5rem 0 .7rem; }
.slab p { margin: 0; color: var(--muted); }
.slab p + p { margin-top: .7rem; }
.service-detail { font-size: .95rem; }
.service-detail .mono { display: block; margin-top: .35rem; color: var(--terra-deep); }

/* Seventh category — the full-width closing row described above. The cell is a two-column
   grid: a copy column (label, heading, sentence) and the supplied enclosed-generator
   photograph. Wrapping the copy keeps it in normal flow, so its spacing is the same as every
   other cell instead of being stretched to the photograph's height. */
.slab > div.slab-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(160px, 17vw, 232px);
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}
.slab > div.slab-wide > p:not(.mono) { max-width: 44rem; }
.slab-wide .slab-fig { margin: 0; }
.slab-fig img { width: 100%; height: auto; }
.slab-fig figcaption {
  font-size: .78rem; line-height: 1.45; color: var(--muted); margin-top: .55rem;
}

/* ------------------------------------------------------------- work gallery */
#work { background: var(--chalk); }
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.work figure { margin: 0; background: var(--white); border: 1px solid var(--line); }
.work img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.work figcaption { padding: .8rem .9rem 1rem; font-size: .88rem; color: var(--muted); }
.work .mono { display: block; color: var(--terra-deep); margin-bottom: .35rem; }

/* --------------------------------------------------------------- approach */
#approach { background: var(--ink); color: var(--on-dark); }
#approach h2 { color: var(--on-dark); }
#approach .section-lede { color: var(--dark-muted); }
.runs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.runs > div { border-top: 3px solid var(--terra); padding-top: 1rem; }
.runs .num { font-size: 2.1rem; font-weight: 700; color: var(--terra-soft); display: block; margin-bottom: .4rem; letter-spacing: -.03em; }
.runs h3 { font-size: 1.05rem; text-transform: none; margin: 0 0 .4rem; color: var(--on-dark); }
.runs p { margin: 0; color: var(--dark-muted); font-size: .95rem; }

/* -------------------------------------------------------------- CTA band */
.band { background: var(--terra); color: #fff; }
.band .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.band h2 { margin: 0 0 .3rem; color: #fff; }
.band p { margin: 0; max-width: 40rem; color: #fff; }
.band .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.band .btn:hover { background: var(--ink-soft); filter: none; }
.band .btn:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- contact */
#contact { background: var(--chalk); }
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; }
/* The email address is long enough to set the min-content width of the grid track,
   which pushed the list 20 px past the wrap at 320 px. Cards and list cells may
   always shrink, and the address may break rather than widen the page. */
.contact-grid > *, .contact-list, .contact-list li, .contact-list .val { min-width: 0; }
.contact-list .val, .contact-list .val a { overflow-wrap: anywhere; }
.contact-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; flex-wrap: wrap; }
.contact-list .key { font-size: .78rem; font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--terra-deep); min-width: 12rem; }
.contact-list .val { color: var(--ink); }
/* Links keep a 2px terracotta underline so the affordance is not colour alone. */
.contact-list .val a, .contact-line a, .confirm a, footer a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--terra); text-underline-offset: .18em;
}
.contact-list .val a:hover, .contact-line a:hover, footer a:hover { color: var(--terra-deep); }
.contact-line { color: var(--muted); max-width: 44rem; margin: .9rem 0 0; }
/* long contact values wrap inside their column instead of widening the page */
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }
.contact-card { border: 1px solid var(--line); background: var(--white); padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.contact-card h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.contact-card p { color: var(--muted); margin: 0 0 1.1rem; }

/* ----------------------------------------------------------------- footer */
footer.site-foot { background: var(--chalk-deep); color: var(--ink); padding: 3rem 0 3.2rem; border-top: 5px solid var(--terra); }
.foot-grid { display: grid; grid-template-columns: 1.45fr 1fr 1.1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.foot-brand img { width: 260px; height: auto; margin-bottom: 1rem; }
.foot-brand p { color: var(--muted); font-size: .88rem; max-width: 26em; }
.site-foot h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--terra-deep); margin: 0 0 .8rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { font-size: .875rem; margin-bottom: .45rem; color: var(--ink); }
.site-foot p { font-size: .88rem; color: var(--muted); }
.foot-legal { border-top: 1px solid var(--line-strong); margin-top: 2rem; padding-top: 1rem; font-size: .8rem; color: var(--faint); }
.draft-note { font-size: .78rem; color: var(--faint); margin: .7rem 0 0; line-height: 1.6; max-width: 78em; }
.ph { border-bottom: 2px dashed var(--terra); color: var(--terra-deep); }

/* ---------------------------------------------------------- enquiry page */
/* one focused column: the banner, the page head, the form and the confirmation
   all hold the form's own measure and share the wrap's left edge. */
.enq-col > * { max-width: 52rem; }
.enquiry-page .page-head { padding: 2.2rem 0 .6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.page-head h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); text-transform: uppercase; letter-spacing: -.025em; margin: 0 0 .7rem; }
.page-head .lede { color: var(--muted); max-width: 44rem; }
.demo-banner { background: var(--terra); color: #fff; padding: 1rem 1.2rem; margin: 1.6rem 0 1.9rem; font-size: .92rem; }
.demo-banner strong { display: block; text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; margin-bottom: .3rem; }
.enquiry { background: var(--white); border: 1px solid var(--line); padding: clamp(1.1rem, 3vw, 2rem); margin: 1rem 0 2rem; max-width: 52rem; }
.enquiry h2 { font-size: 1.35rem; }
.enquiry .hint { color: var(--muted); }
.enquiry legend { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.choice { background: var(--white); border-color: var(--line-control); }
.choice:hover { border-color: var(--terra); background: #FFFBF7; }
.choice .detail { color: var(--muted); }
.field label { color: var(--ink); }
/* the shared layer caps fields at 38rem and notes at 44rem; inside this card the
   job-type rows run the full measure, so the fields match them */
.field, .consent, .photo-note, .notice { max-width: none; }
.field input, .field textarea { background: var(--white); border-color: var(--line-control); }
.field input:focus, .field textarea:focus { border-color: var(--terra); }
.photo-note { border-left: 5px solid var(--terra); background: var(--chalk); color: var(--muted); }
.photo-note strong { color: var(--ink); }
.notice { border-left: 5px solid var(--terra); background: var(--chalk); color: var(--muted); }
.btn { background: var(--terra); border-color: var(--terra); color: #fff; min-height: 48px;
       display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { background: #C1512D; border-color: #C1512D; filter: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-control); }
.btn-ghost:hover { background: var(--chalk); filter: none; }
.confirm { background: var(--white); border: 1px solid var(--terra); }
.confirm h2 { font-size: 1.35rem; }
.confirm ol { color: var(--muted); }
.foot-contact { margin-bottom: 1.2rem; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  /* three footer groups squeeze the email onto a second line below ~1100px */
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; }
  .runs { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 900px) {
  .head-inner { gap: .6rem; padding: 10px 0 0; }
  .brand img.brand-lockup { display: none; }
  .brand img.brand-mark { display: block; }
  .brand-type { display: flex; }
  .nav-toggle {
    display: inline-flex; align-items: center; margin-left: auto; order: 2;
    min-height: 44px; padding: 0 .9rem; background: transparent;
    border: 1px solid var(--line-strong); color: var(--ink);
    font: inherit; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
  }
  .nav { order: 4; width: 100%; margin: 0; }
  .nav ul { display: none; }
  .nav[data-open="true"] ul {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border: 1px solid var(--line); padding: .5rem 1.2rem; z-index: 20;
  }
  .nav[data-open="true"] a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); }
  .nav[data-open="true"] li:last-child a { border-bottom: 0; }
  .site-head { border-bottom-width: 0; }
  /* one full-bleed tel: bar at the foot of the header, 48px tall */
  .head-phone {
    order: 3; width: calc(100% + (var(--gutter) * 2)); margin: 10px calc(var(--gutter) * -1) 0;
    min-height: 48px; font-size: 1rem;
  }
  .hero-media { aspect-ratio: 3 / 2; min-height: 0; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(24,19,16,.30) 0%, rgba(24,19,16,.06) 34%, rgba(24,19,16,.55) 78%, var(--ink) 100%);
  }
  .hero-copy { position: static; padding: 1.5rem 0 2.2rem; }
  .hero h1 { font-size: clamp(1.95rem, 6.4vw, 2.6rem); }
  .slab { grid-template-columns: 1fr; }
  .slab > div { border-left: 0; border-top: 1px solid var(--line); }
  .slab > div:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .slab > div:first-child { border-top: 0; }
  /* one column here, so the closing row stacks like every other cell: text, then photograph */
  .slab > div.slab-wide { grid-template-columns: 1fr; }
  .slab > div.slab-wide .slab-fig { max-width: 20rem; margin-top: .9rem; }
  .work { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .band .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .work, .mosaic { grid-template-columns: 1fr; }
  /* v14: the mosaic keeps 4/3 here. The old 16/10 override made `object-fit: cover` trim
     8.3 % off the top and bottom of every 4:3 mosaic file, which is what cut the top off the
     EV charger on phones. Box ratio now matches file ratio at every width, so cover crops
     nothing and no photograph is reframed by CSS. */
  .mosaic img { aspect-ratio: 4 / 3; }
  .hero .btn, .band .btn { width: 100%; text-align: center; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand img { width: 230px; }
  /* stacked label/value rows: a 12rem label column would squeeze the email */
  .contact-list li { flex-direction: column; gap: .1rem; }
  .contact-list .key { min-width: 0; }
}
@media (max-width: 360px) {
  .brand img.brand-mark { width: 47px; height: 34px; }
  .brand-type .bt1 { font-size: .75rem; letter-spacing: .05em; }
  .brand-type .bt2 { font-size: .75rem; letter-spacing: .07em; }
  .foot-brand img { width: 210px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.honeypot {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ============================================================================
   v17 — gate-B corrections (research/v16-biggles-review.md)
   Appended last so these rules win over both this sheet and the shared layer.
   ========================================================================= */

/* --- F4: the mobile menu is an enhancement, not a requirement --------------
   With scripting the Menu button behaves exactly as before. Without scripting
   the button is not rendered at all and the four links simply wrap, so the
   navigation is always reachable. */
@media (max-width: 900px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav ul { display: flex; flex-wrap: wrap; gap: 0 1.15rem; }
  html:not(.js) .nav li { flex: 0 0 auto; }
  html:not(.js) .nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- F1/F2: server-rendered errors, delivery failure and confirmation ------
   Same visual language as .notice/.photo-note: a 6px accent edge on a tinted
   panel. Red is used only for a real problem the visitor must act on. */
.enquiry .error { color: var(--danger); font-size: .88rem; font-weight: 600; margin: .4rem 0 0; }
.enquiry .error[hidden] { display: none; }
/* an invalid control is marked by weight as well as colour */
.enquiry .field [aria-invalid="true"], .enquiry textarea[aria-invalid="true"] { border-width: 2px; }
.form-alert {
  border: 1px solid var(--danger); border-left: 6px solid var(--danger);
  background: #FFF7F6; padding: 1rem 1.2rem; margin: 0 0 1.4rem; border-radius: 2px;
}
.form-alert h2 {
  font: 700 1.2rem/1.3 var(--font-display); text-transform: none; letter-spacing: 0;
  color: var(--danger); margin: 0 0 .55rem;
}
.form-alert p { margin: .4rem 0 0; color: var(--ink); }
.form-alert ul { margin: 0; padding-left: 1.15rem; }
.form-alert li { margin: .2rem 0; }
.form-alert a {
  color: var(--danger); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.form-alert:focus, .form-alert:focus-visible { outline: 3px solid var(--danger); outline-offset: 3px; }
.form-alert--delivery { border-color: var(--terra-deep); border-left-color: var(--terra-deep); background: var(--white); }
.form-alert--delivery h2 { color: var(--terra-deep); }
.form-alert--delivery a { color: var(--terra-deep); }
.form-alert--delivery:focus, .form-alert--delivery:focus-visible { outline-color: var(--terra-deep); }
.confirm:focus, .confirm:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }

/* ARCtick RTA identification in the website footer. */
.arctick-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: 1.2rem; padding: .85rem 1rem; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); text-decoration: none; }
.arctick-badge img { width: 175px; height: 45px; object-fit: contain; }
.arctick-badge .arctick-au { font-weight: 700; font-size: .9rem; letter-spacing: .035em; color: var(--ink); }
.arctick-badge:hover, .arctick-badge:focus-visible { border-color: var(--terra); outline-color: var(--terra); }

/* ============================================================================
   v20 — Netlify Forms states.
   Appended after the v19 sheets. Nothing here restyles existing components:
   it only covers the sending state and the generated confirmation/error
   panels that form.js inserts client-side.
   ========================================================================= */

/* in-flight: the submit control is disabled, so it must not look actionable */
.enquiry[aria-busy="true"] button[type="submit"] {
  cursor: progress;
  opacity: .72;
}

/* the panel form.js inserts sits where the form's own cards do */
.confirm > p:last-child,
.form-alert--delivery > p:last-child { margin-bottom: 0; }

.thanks-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.2rem; }
.thanks-actions .btn { margin: 0; }

/* approved enquiry privacy notice — sits directly below the consent checkbox */
.privacy-note {
  border-left: 3px solid var(--line-control);
  margin: .55rem 0 0;
  padding: .1rem 0 .1rem .85rem;
  max-width: 62ch;
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width: 560px) {
  .thanks-actions .btn { flex: 1 1 100%; }
}