/* Every Tap site styles. Mobile first, one stylesheet, no framework, no
   build step. Design for 390px, then let it widen. Test at 390, 768, 1280.
   Source of truth for values: docs/09-brand-guidelines.md and
   build-brief-01-fresh-tap.md section 3. */

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--w-body) var(--t-body) / var(--lh-body) var(--font-body);
}

h1, h2, h3, h4 {
  color: var(--heading);
  font-family: var(--font);
  line-height: var(--lh-head);
  text-wrap: balance;
  margin: 0 0 var(--s4);
}
h1 { font-size: var(--t-h1); font-weight: var(--w-black); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); font-weight: var(--w-bold); }
h3 { font-size: var(--t-h3); font-weight: var(--w-bold); }

p, ul, ol, table, .callout { margin: 0 0 var(--s4); }

a { color: var(--link); }
a:not(.btn):not(.btn--outline) { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

img, svg { max-width: 100%; height: auto; display: block; }

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

.prose {
  max-width: var(--measure);
}
.prose > :last-child { margin-bottom: 0; }

/* ---- Figures, step 3c. Every figure, at every size, without exception. ---- */

.fig {
  font-family: var(--font-mono);
  font-weight: var(--w-fig);
  font-variant-numeric: tabular-nums;
  /* A monospace comma takes a full character advance, so "$2,490" renders with
     a gap either side of the comma. Chivo Mono has a pnum feature but it is
     inert here, every glyph is 600 units wide, so tracking is the only lever.
     Display figures need more of it than inline ones, because the gap scales
     with the size while the eye's tolerance does not. */
  letter-spacing: -0.03em;
}
h1 .fig, h2 .fig, .price-seal .fig {
  font-weight: var(--w-fig-bold);
  letter-spacing: -0.06em;
}

/* ---- Skip link ---- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--coral);
  color: var(--deep-pine);
  padding: var(--s3) var(--s5);
  font-weight: var(--w-bold);
}
.skip:focus {
  left: var(--s5);
  top: var(--s3);
}

/* ---- Focus ---- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-shadow);
}

/* ---- Header and the hung lockup ---- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s3);
}

.lockup {
  display: inline-flex;
  flex-direction: column;
  font-size: clamp(40px, 3.2vw, 46px);
  color: var(--deep-pine);
  text-decoration: none;
}
.lockup-bar {
  display: block;
  height: var(--lock-bar-h);
  width: 100%;
  border-radius: var(--lock-bar-r);
  background: currentColor;
}
.lockup-row {
  display: flex;
  align-items: center;
  margin-top: var(--lock-bar-gap);
}
.lockup-bowls {
  height: var(--lock-bowls-h);
  width: auto;
  color: var(--deep-pine);
}
.lockup-word {
  margin-left: var(--lock-word-gap);
  font-size: var(--lock-word-size);
  font-weight: var(--w-black);
  letter-spacing: var(--lock-word-track);
  line-height: var(--lock-word-lead);
  color: currentColor;
  white-space: nowrap;
}
/* Conventional lockup, primary from 16 September 2026. The bar caps the bowls
   only and the wordmark stands beside the mark, so the object in the header is
   the same object as the favicon and the avatar. Set brand.lockup to "hung" in
   config.json to go back to the bar spanning both. */
.lockup--conventional {
  flex-direction: row;
  align-items: center;
}
.lockup--conventional .lockup-mark {
  display: inline-flex;
  flex-direction: column;
}
.lockup--conventional .lockup-row { margin-top: var(--lock-bar-gap); }
.lockup--conventional .lockup-word { margin-left: 0.30em; }

.lockup--reversed { color: var(--paper); }
.lockup--reversed .lockup-bowls { color: var(--paper); }
.brand-link {
  display: inline-flex;
  text-decoration: none;   /* the <a> paints the underline, not the .lockup inside it */
  color: var(--deep-pine);
}
.brand-link:hover, .brand-link:focus-visible { text-decoration: none; }

.site-footer .lockup { font-size: 46px; }

/* ---- Nav ---- */

.nav-toggle {
  display: inline-block;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-button);
  padding: var(--s2) var(--s4);
  font: var(--w-bold) var(--t-small) var(--font);
  color: var(--text);
  min-height: var(--tap);
}

.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) var(--s5) var(--s6);
}
.site-nav[data-open="true"] { display: block; }

.site-nav > ul {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.site-nav > ul > li > a,
.site-nav .nav-disclosure {
  display: block;
  padding: var(--s3) 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-weight: var(--w-bold);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: var(--t-body);
}

.disclosure-menu {
  display: none;
  padding-left: var(--s4);
  border-left: 2px solid var(--rule);
  margin-bottom: var(--s2);
}
.disclosure-menu[data-open="true"] { display: block; }
.disclosure-menu ul { list-style: none; margin: 0; padding: 0; }
.disclosure-menu li a {
  display: block;
  padding: var(--s2) 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.header-enquire { align-self: flex-start; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex !important;
    position: static;
    border: none;
    padding: 0;
    align-items: center;
    gap: var(--s5);
    background: transparent;
  }
  .site-nav > ul {
    flex-direction: row;
    align-items: center;
    gap: var(--s5);
    margin: 0;
  }
  .site-nav > ul > li { position: relative; }
  .site-nav > ul > li > a, .site-nav .nav-disclosure {
    padding: var(--s2) 0;
    min-height: auto;
  }
  .disclosure-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    padding: var(--s3);
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(18, 51, 43, 0.12);
    border-left: none;
    margin-bottom: 0;
  }
  .header-enquire { align-self: center; }
}

/* ---- Buttons ---- */

.btn, .btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-button);
  font-family: var(--font);
  font-weight: var(--w-bold);
  text-decoration: none;
  text-transform: none;
  border: none;
  cursor: pointer;
  font-size: var(--t-body);
}
.btn {
  background: var(--coral);
  color: var(--deep-pine);
}
.btn:hover { background: #F2593A; }
.btn--outline {
  background: transparent;
  color: var(--deep-pine);
  border: 2px solid var(--deep-pine);
  padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
}
.band--reversed .btn--outline {
  color: var(--paper);
  border-color: var(--paper);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s5) 0;
}

/* ---- Price seal ---- */

.price-seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  background: var(--coral);
  color: var(--deep-pine);
  border-radius: var(--r-seal);
  padding: var(--s5) var(--s6);
}
.price-seal .price-label {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
}
.price-seal .price-figure {
  font-size: var(--t-price);
  line-height: 1;
}

/* ---- Cards ---- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s5);
  list-style: none;
}
.card--featured {
  border: 2px solid var(--coral);
  position: relative;
}
.card .tag {
  display: inline-block;
  background: var(--coral);
  color: var(--deep-pine);
  border-radius: var(--r-button);
  padding: var(--s1) var(--s3);
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  margin-bottom: var(--s3);
}
.card > :last-child { margin-bottom: 0; }

ul.grid-2, ul.grid-3 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 640px) {
  ul.grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  ul.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
ul.grid-2 > li, ul.grid-3 > li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s5);
}
ul.grid-2 > li > :last-child, ul.grid-3 > li > :last-child { margin-bottom: 0; }

/* ---- Bands ---- */

.band {
  padding-block: var(--s8);
}
.band--plain { padding-block: var(--s7); }
.band--reversed {
  background: var(--bg-reversed);
  color: var(--text-reversed);
}
.band--reversed h1, .band--reversed h2, .band--reversed h3 { color: var(--text-reversed); }
.band--reversed a:not(.btn):not(.btn--outline) { color: var(--paper); }
.band--paper { background: var(--bg); }

.hero-band { padding-block: var(--s8); }
.hero-band .wrap { max-width: var(--measure); }

/* ---- Tables ---- */

.table-scroll { overflow-x: auto; margin-bottom: var(--s5); }
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
thead tr { background: var(--deep-pine); color: var(--paper); }
th, td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}
td:last-child, th:last-child { text-align: right; }
.band--reversed thead tr { background: var(--paper); color: var(--deep-pine); }

/* ---- Spec list ---- */

dl.spec {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 0 var(--s5);
  border-top: 1px solid var(--rule);
}
dl.spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
dl.spec dt { font-weight: var(--w-bold); margin: 0; }
dl.spec dd { margin: 0; }
@media (min-width: 480px) {
  dl.spec > div { grid-template-columns: 1fr 1fr; }
  dl.spec dd { text-align: right; }
}

/* ---- FAQ ---- */

details.faq {
  border-bottom: 1px solid var(--rule);
}
details.faq summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  font-weight: var(--w-bold);
  cursor: pointer;
  list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
details.faq[open] summary::after { transform: rotate(-135deg); }
details.faq .faq-body { padding-bottom: var(--s4); }

/* ---- Credentials strip ---- */

ul.creds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 640px) {
  ul.creds { grid-template-columns: 1fr 1fr; }
}
ul.creds li {
  padding-left: var(--s5);
  position: relative;
}
ul.creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

/* ---- Sticky mobile CTA ---- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--coral);
  padding: var(--s3) var(--s5);
  display: none;
}
.sticky-cta[data-visible="true"] { display: flex; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 768px) {
  .sticky-cta { display: none !important; }
}

/* ---- Diagrams ---- */

.diagram {
  text-align: center;
  background: var(--bg);
  border-radius: var(--r-photo);
  padding: var(--s5);
}
.diagram svg { margin-inline: auto; max-width: 100%; height: auto; }
.diagram figcaption {
  margin-top: var(--s3);
  font-size: var(--t-small);
  color: var(--text);
}

/* ---- Photos ---- */

.figure img {
  border-radius: var(--r-photo);
  background: var(--paper);
}
.figure figcaption {
  margin-top: var(--s2);
  font-size: var(--t-small);
}

/* ---- Callouts ---- */

.callout {
  border-left: 3px solid var(--coral);
  padding-left: var(--s4);
}

/* ---- Form ---- */

.enquiry { max-width: var(--measure); }
.enquiry .field {
  margin-bottom: var(--s5);
}
.enquiry label {
  display: block;
  font-weight: var(--w-bold);
  margin-bottom: var(--s2);
}
.enquiry .helper {
  font-size: var(--t-small);
  margin-top: var(--s1);
}
.enquiry input[type="text"],
.enquiry input[type="tel"],
.enquiry input[type="email"],
.enquiry textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--field);
  font: var(--w-body) var(--t-body) var(--font-body);
  color: var(--text);
}
.enquiry textarea { min-height: 120px; }
.enquiry input[type="file"] {
  width: 100%;
  padding: var(--s3) 0;
}
.enquiry .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.enquiry .radio-group label {
  font-weight: var(--w-body);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  margin-bottom: 0;
}
.enquiry .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}
.enquiry .checkbox-row label { font-weight: var(--w-body); margin-bottom: 0; }
.enquiry .error {
  color: var(--coral-deep);
  font-size: var(--t-small);
  margin-top: var(--s1);
}
/* The required marker. Coral Deep because it is the coral that is allowed to
   set type on a light ground at 4.55:1, and it already carries .error, so the
   form speaks in one colour. Doc 09 section 7 reserves coral as a FILL for
   treated water; as type it is a signal, which is the existing precedent.
   aria-hidden on the span: the required attribute already tells assistive
   technology, and a screen reader announcing "asterisk" after every label is
   noise. Added 17 September 2026. */
.enquiry .req {
  color: var(--coral-deep);
  font-weight: var(--w-bold);
  margin-left: 0.15em;
}
.enquiry .req-key {
  font-size: var(--t-small);
  margin-bottom: var(--s5);
}
.enquiry .checkbox-row .req { margin-left: 0; }

.enquiry .hp { position: absolute; left: -9999px; }
.enquiry .submit-note {
  font-size: var(--t-small);
  margin-top: var(--s3);
}

/* ---- Footer ---- */

.site-footer {
  background: var(--bg-reversed);
  color: var(--text-reversed);
  padding-block: var(--s8);
}
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 {
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper);
  margin-bottom: var(--s3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  margin-bottom: var(--s7);
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(5, 1fr); }
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
/* The li must NOT be a flex container. Inline text and <span class="fig"> inside
   one become separate flex items, so "Monday to Friday, 8:30am to 5:30pm" was
   being broken into independently shrinking boxes. The 48px tap target belongs
   on the link, which is the thing being tapped, not on the list item. */
.footer-grid li { margin-bottom: var(--s2); line-height: 1.45; }
.footer-grid li a { min-height: var(--tap); display: inline-flex; align-items: center; }
.footer-grid li .fig { white-space: nowrap; }
.footer-mark { margin-bottom: var(--s4); }
.legal-entity { font-size: var(--t-small); margin-bottom: var(--s2); }
.gst-note { font-size: var(--t-small); opacity: 0.85; }

/* ---- Print ---- */

@media print {
  .site-header, .sticky-cta, .site-footer nav, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}