/* Tidy Sealants website.
   One typeface (Archivo variable). The colours are GF Sealants' palette, read
   off their stylesheet on 2026-10-13 at the owner's request: a deep navy for
   every dark surface and every heading, and two pale blues for the page and the
   alternating bands. The values are theirs, unchanged.
   Every word on the page comes from Business/Website/Copy/Home.md. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The palette is GF Sealants', read off https://gfsealants.co.uk on 2026-10-13.
   Their names for these values are --navy, --navy-d, --sky, --sky-d, --ice,
   --ice-2, --ink and --mute. The comment against each line says which of their
   tokens it is. */
:root {
  --navy:         #003060;  /* their --navy. Headings, buttons, the hero panel. */
  --navy-d:       #00213F;  /* their --navy-d. Buttons under the mouse. */
  --sky:          #36A9E1;  /* their --sky. The bright accent. A mark, not a word. */
  --sky-d:        #1F8FC7;  /* their --sky-d. The accent, dark enough for a ring. */

  --paper:        #EEF7FC;  /* their --ice. The page. */
  --paper-lift:   #FFFFFF;  /* The tile face. Anything that catches light. */
  --band:         #E2F1FA;  /* their --ice-2. The alternating panels. */
  --ink:          #14202C;  /* their --ink. Text. */
  --ink-soft:     #5B6B7A;  /* their --mute. Prose. */
  --hero-soft:    #CFE2F1;  /* The pale blue their dark sections use for prose. */
  --hair:         rgba(0,48,96,.14);  /* their --line. The rules between rows. */

  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --measure: 62ch;
  --wrap: 1200px;
  --gutter: 28px;
  --section-y: clamp(52px, 6.5vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sky); color: var(--navy); }

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

a { color: var(--ink); text-underline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ---------- shell ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2 {
  margin: 0 0 0.55em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  max-width: 15em;
  font-size: clamp(2.15rem, 1.3rem + 3.6vw, 3.6rem);
  font-stretch: 90%;
  letter-spacing: -0.032em;
  line-height: 0.98;
}
h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem);
  font-stretch: 92%;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.subhead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  font-weight: 600;
  font-stretch: 96%;
  color: var(--ink);
  max-width: 54ch;
  margin-bottom: 1.1em;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}
.wordmark {
  margin-right: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* The artwork is navy and cyan on nothing. The optimiser lifted its flat
   background out, so it sits on whatever colour the masthead is. Its own
   colours are kept, because a logo is the thing a palette answers to, not the
   other way round. */
.wordmark img {
  display: block;
  width: 130px;
  height: auto;
}
@media (max-width: 700px) {
  .wordmark img { width: 100px; }
}
.nav {
  display: flex;
  gap: 20px;
  font-size: 0.9375rem;
}
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
/* The phone number where the Get Free Quote button used to be. The owner removed
   every quote button on 2026-10-13 and asked for the number in the top bar, with
   an icon to the left of it. It stays visible when the nav links are hidden on a
   narrow screen, which is the point of putting it there. */
.tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 96%;
  text-decoration: none;
  white-space: nowrap;
}
.tel:hover { border-color: var(--navy); }
.tel-icon { display: inline-flex; }
.tel-icon svg { display: block; }

/* A phone has to carry the logo, the number and the button on one line, and at
   320px there is very little room for all three. So the bar's own gutters come in
   on a narrow screen, the gap between the three comes in, and so does the
   number's padding. Only the bar is touched: the rest of the page keeps its
   gutters, because a header that has one more thing in it is not a reason to move
   every section. The button keeps its 44px square, since that is the smallest
   thing a thumb hits reliably and it is the one control here that must not
   shrink. Below 375px the phone icon goes too: a number beside a phone icon and a
   number on its own both read as tap-to-call, and the digits are the part that
   matters. */
@media (max-width: 480px) {
  .masthead-inner { padding-inline: 18px; gap: 10px; }
  .tel { gap: 4px; padding: 8px 9px; font-size: 0.875rem; }
}
@media (max-width: 374px) {
  .tel-icon { display: none; }
}

/* ---------- the menu button, and the panel it opens ----------
   Below 1000px there is no room for five links beside the logo and the number,
   so they used to be hidden with nothing to replace them: the owner could see
   the logo and the phone number and had no way to reach Services, Pricing or
   the contact page from the top of the screen. The button is that way in.

   The button is hidden on a wide screen by CSS and the links sit in the bar as
   before, so this changes nothing above 1000px. The panel is positioned against
   the masthead, which is `position: sticky` and so is already a containing
   block, and it hangs under it over the top of the page rather than pushing the
   page down. */
.menu-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--navy); }
.menu-icon { display: inline-flex; }
.menu-icon svg { display: block; }
.menu-icon-close { display: none; }
/* The button says what it will do, not what it did: three bars to open, a cross
   to close. Colour and size are the phone number's, because they are the same
   kind of thing in the same bar. */
.menu-open .menu-icon-open { display: none; }
.menu-open .menu-icon-close { display: inline-flex; }

@media (max-width: 1000px) {
  .menu-btn { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 14px 22px rgba(0, 33, 63, .10);
  }
  .menu-open .nav { display: flex; }
  .nav a {
    padding: 14px var(--gutter);
    font-size: 1rem;
    border-top: 1px solid var(--hair);
  }
  .nav a:first-child { border-top: 0; }
  .nav a:hover { background: var(--band); text-decoration: none; }
}

/* ---------- hero ----------
   A split panel. Navy on the left carrying the words, the photograph on
   the right at full strength, used as it came. The two halves are exactly half
   the page each. The copy keeps the page's container edge, so the left edge
   still lines up with the sections below it.

   The panel is --navy, which is the colour GF Sealants' dark sections use and
   the colour the quote buttons on this page sit at. The buttons darken to
   --navy-d under the mouse and the hero's own button is reversed out light, so
   the panel and a button never sit on each other at the same value. */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(520px, 54vw, 800px);
  background: var(--navy);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  padding-block: clamp(56px, 6.5vw, 104px);
  /* The left edge of the page's 1200px container, expressed as a share of this
     half. Percentages in padding resolve against the grid area, and half the
     page is 100% of it, so the container edge is 100% minus half the container,
     plus the gutter. Below the container width the max() falls back to the
     gutter on its own.

     The min() is the important part. On a very wide screen the container edge
     is far enough in that the words end up optically centred in this half,
     which reads as a mistake. Capping the indent at 12.5vw keeps them clearly
     ranged left, and the cap does not bite until about 1185px, so the hero still
     holds the page's left edge on every ordinary laptop. */
  padding-inline: min(max(var(--gutter), calc(100% - var(--wrap) / 2 + var(--gutter))), 12.5vw)
                  clamp(32px, 3.5vw, 64px);
}

.hero-copy h1 { color: #fff; }
.hero-copy .lede,
.hero-copy .hero-note { color: var(--hero-soft); }

/* The one button in the hero, reversed out of the dark panel. */
.hero-copy .btn-solid { background: var(--paper-lift); color: var(--navy); }
.hero-copy .btn-solid:hover { background: #fff; }
.hero-copy :focus-visible { outline-color: #fff; }

/* Selecting text in the hero. The page's selection is --navy on white,
   which against the navy panel is almost no highlight at all. */
.hero-copy ::selection { background: var(--paper-lift); color: var(--navy-d); }

.hero-shot {
  position: relative;
  overflow: hidden;
}
.hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The frame is cropped so the fixtures at its foot are kept, so anchoring to
     the bottom is what keeps them in view when the column gets wider than tall. */
  object-position: 50% 100%;
}

/* Below this there is no room for two columns, so the panel goes above the
   photograph. The photograph keeps a fixed slice of the height rather than
   being squeezed by the text. */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-inline: var(--gutter); }
  .hero-shot { height: clamp(260px, 62vw, 430px); }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9em;
}
.hero-note {
  margin-top: 1.1em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  font-stretch: 96%;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-d); }
.btn-ghost { border-color: var(--hair); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- sections ---------- */

.section { padding-block: var(--section-y); scroll-margin-top: 74px; }
.band { background: var(--band); }
.section-lede {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 1.9em;
}
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9em;
}
.after-button {
  margin-top: 1.1em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.after-list { margin-top: 2em; }

.spec {
  max-width: 68ch;
  color: var(--ink-soft);
}

/* ---------- lists ---------- */

.ticks {
  list-style: none;
  margin: 0.3em 0 1.75em;
  padding: 0;
  max-width: 68ch;
}
.ticks li {
  position: relative;
  padding: 15px 0 15px 24px;
  border-top: 1px solid var(--hair);
}
.ticks li:last-child { border-bottom: 1px solid var(--hair); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 2px;
  /* The bright sky blue, in one of its two places on the page. It is a mark in
     front of a list item, not a word, so it does not carry text contrast. */
  background: var(--sky);
  transform: translateY(-50%);
}

.areas {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  max-width: 64ch;
}
.areas li { padding: 13px 0; border-top: 1px solid var(--hair); }
.areas li:last-child { border-bottom: 1px solid var(--hair); }

/* ---------- steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0.3em 0 0;
  padding: 0;
  max-width: 68ch;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--hair);
}
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  font-size: 1.5rem;
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.steps li p {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-width: 58ch;
}

@media (max-width: 560px) {
  .steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
}

/* ---------- prices ---------- */

.prices {
  width: 100%;
  max-width: 840px;
  border-collapse: collapse;
  margin-bottom: 1.9em;
}
.prices th, .prices td {
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  text-align: left;
  vertical-align: baseline;
}
.prices thead th {
  border-top: 0;
  padding-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.prices th:first-child, .prices td:first-child { padding-right: 28px; }
.prices th:last-child, .prices td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.prices tbody td:last-child {
  color: var(--navy);
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.prices tbody tr:last-child td { border-bottom: 1px solid var(--hair); }

/* ---------- questions ---------- */

.faq { margin: 0; }
.faq dt {
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-weight: 700;
  font-stretch: 96%;
}
.faq dd {
  margin: 8px 0 0;
  padding-bottom: 22px;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.faq dt:last-of-type + dd { border-bottom: 1px solid var(--hair); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--hair);
  padding-block: 46px;
}
.foot-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 40px;
}
.foot p {
  margin: 0 0 6px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: 42ch;
}
.foot-logo {
  display: block;
  margin-bottom: 14px;
}
.foot-logo img {
  display: block;
  width: 120px;
  height: auto;
}

/* ---------- the contact page ----------
   The shape of this page is taken from gfsealants.co.uk/contact, which is the
   page the owner asked for: two columns on a wide screen, the three ways to get
   in touch stacked down the left, and the enquiry form in a white card on the
   right. On a narrow screen the columns become one, the card following the
   details. The background is their page's: the pale blue fading to white. */

.cpage {
  background: linear-gradient(180deg, var(--paper), #fff 60%);
  padding-block: clamp(40px, 6vw, 80px) clamp(60px, 8vw, 110px);
}
.cpage-in {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 900px) {
  .cpage-in { grid-template-columns: 1fr; }
}
.cpage-lead {
  margin: 26px 0 36px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 48ch;
}

/* The three contact cards. Icon tile on the left, the label above the value. */
.direct {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.direct a {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 var(--hair);
  text-decoration: none;
  transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s cubic-bezier(.19,1,.22,1);
}
.direct a:hover {
  transform: translateX(6px);
  box-shadow: 0 20px 40px -26px rgba(0, 33, 63, .4);
}
.direct .ic {
  grid-row: span 2;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--sky);
  display: grid;
  place-items: center;
}
.direct .ic svg { width: 22px; height: 22px; display: block; }
.direct small {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-self: end;
}
.direct b {
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 600;
  font-stretch: 96%;
  align-self: start;
  word-break: break-word;
}
.cpage-note {
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* The form card. */
.cpage-card {
  padding: clamp(26px, 3.4vw, 48px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 50px 100px -50px rgba(0, 33, 63, .45), 0 1px 0 var(--hair);
}
.cpage-card h2 {
  font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem);
  margin-bottom: 26px;
  letter-spacing: -.03em;
}

/* The enquiry form. The field shapes, colours and spacing are taken from the
   contact form on gfsealants.co.uk: white fields on a 1px grey rule, 3px
   corners, 40px minimum height, the section headings in navy at weight 600,
   two fields to a row on a wide screen, and the submit button stretched across
   the card the way theirs is. */
.enq { margin: 0; }
/* Which fields have to be filled in, said before the customer finds out by
   pressing send. Every field carries a label, and the label carries the word.
   Added 2026-10-13 after the owner pointed out that the form only told you
   after the fact: the labels were there for a screen reader and invisible to
   everyone else, so the placeholders read as optional hints. */
.enq-legend {
  margin: -8px 0 24px;
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 56ch;
}
.enq-field label {
  display: block;
  margin-bottom: 5px;
  font-size: .875rem;
  font-weight: 600;
  font-stretch: 96%;
  color: var(--ink);
}
.enq-field .req,
.enq-field .opt {
  margin-left: 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.enq-field .req {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--navy);
}
.enq-field .opt { color: var(--ink-soft); }
.enq-head {
  margin: 1.6em 0 .7em;
  color: var(--navy);
  font-weight: 600;
  font-stretch: 96%;
}
.enq-head:first-child { margin-top: 0; }
.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
@media (max-width: 640px) {
  .enq-grid { grid-template-columns: 1fr; }
}
.enq-field { margin: 0 0 10px; }
.enq-field input,
.enq-field select,
.enq-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 5px 14px;
  border: 1px solid #9B9B9B;
  border-radius: 3px;
  background: #fff;
  color: #30373E;
  font: inherit;
  font-size: 1rem;
}
.enq-field textarea { min-height: 130px; padding: 10px 14px; resize: vertical; }
.enq-field input::placeholder,
.enq-field textarea::placeholder { color: inherit; opacity: .6; }
.enq-field input:focus,
.enq-field select:focus,
.enq-field textarea:focus {
  outline: 2px solid var(--sky-d);
  outline-offset: 1px;
}
/* The example draws its own caret, so the browser's is turned off and the same
   shape is drawn as a background image. */
.enq-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003060' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
.enq-privacy {
  margin: 1.2em 0;
  font-size: .875rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
/* The example stretches its one submit button across the whole card, at 10px
   corners and 0.7px letter spacing. Two buttons now share that row, because
   WhatsApp is not the only way to answer and a customer without the app has to
   be able to send the same enquiry. The fills stay the site's navy rather than
   Elementor's grey or WhatsApp's green: white on the navy clears 13:1, and
   white on WhatsApp's #25D366 clears 1.9:1, which is not readable as a button. */
.enq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* The buttons size to their own words rather than to half the row: forced to an
   equal 200px each, "Send on WhatsApp" wraps onto two lines and both buttons
   grow to the taller one. They still fill the row between them. */
.enq-actions .btn {
  flex: 1 1 auto;
  padding: 12px 18px;
  border-radius: 10px;
  letter-spacing: .7px;
}
.enq-actions .btn-ghost {
  border-color: var(--navy);
  background: #fff;
  color: var(--navy);
}
.enq-actions .btn-ghost:hover {
  border-color: var(--navy-d);
  background: var(--paper);
  color: var(--navy-d);
}
.enq-help {
  margin: 12px 0 0;
  font-size: .875rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.enq-help a { color: var(--navy); }
.enq-status {
  margin: 1.2em 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--sky);
  background: var(--paper);
  font-size: .9375rem;
  color: var(--ink);
  max-width: 52ch;
}
/* The last way out, for a device with no WhatsApp and no mail app either: the
   same message, in a box, ready to copy into anything. Shut until it is
   needed, so it never competes with the two buttons. */
.enq-alt {
  margin-top: 1.4em;
  font-size: .9375rem;
  color: var(--ink-soft);
}
.enq-alt summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
  font-stretch: 96%;
}
.enq-alt p { margin: .8em 0; }
.enq-alt textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 14px;
  border: 1px solid #9B9B9B;
  border-radius: 3px;
  background: #fff;
  color: #30373E;
  font: inherit;
  font-size: .9375rem;
  resize: vertical;
}
.enq-noscript { margin-top: 0; }

/* The small icon that sits to the left of a phone number, an email address or
   the WhatsApp link, in the footer and in the top bar. */
.cta-icon { display: inline-flex; color: var(--navy); }
.cta-icon svg { display: block; }

/* The footer's Get in touch column, on the right. Added 2026-10-13: the owner
   asked for the heading, then the number, the email and WhatsApp under it, each
   with an icon to the left. */
.foot-head {
  margin: 0 0 12px;
  color: var(--navy);
  font-weight: 700;
  font-stretch: 96%;
}
.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.foot-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .875rem;
}
.foot-links a:hover { color: var(--navy); text-decoration: underline; }
.foot-links .cta-icon { color: var(--navy); }

/* ---------- floating WhatsApp button ---------- */

/* Bottom right corner, over the top of the page on every screen. The words are
   the owner's: Business/Website/Copy/Home.md, section FLOATING WHATSAPP BUTTON.
   The green is WhatsApp's own brand colour. Do not put the navy on it: people
   read the green circle as WhatsApp before they read anything else. */
.wa {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 14px rgba(0, 33, 63, .28);
  text-decoration: none;
  transition: transform .2s ease-in-out;
}
.wa:hover { transform: scale(1.06); }
.wa:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
/* The ring is the pulse. It sits behind the circle, swells and fades, waits,
   then goes again. Set to none in the reduced-motion block below. */
.wa-ring {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
}
.wa-dot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.wa-dot svg { display: block; }
.wa-label {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--paper-lift);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 33, 63, .18);
}

@media (prefers-reduced-motion: no-preference) {
  .wa-ring { animation: wa-pulse 6s ease-out 2s infinite; }
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  35%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wa-ring { animation: none; }
  .wa:hover { transform: none; }
}