/* Jewellery Valuations Australia — production stylesheet
   Rebuilt from the Claude Design prototype as lean, cacheable static CSS. */

:root {
  --seal:   #8C0000;  /* primary seal red */
  --garnet: #5E0000;  /* deep garnet */
  --gold:   #B0873F;  /* antique gold (accents only) */
  --pearl:  #F7F2E9;  /* warm cream panel */
  --ink:    #222222;  /* body text */
  --muted:  #6B6B6B;  /* secondary text */
  --line:   #DDDDDD;  /* hairline borders */
  --white:  #FFFFFF;
  --serif:  Georgia, 'Times New Roman', serif;
  --sans:   Calibri, Candara, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

img { max-width: 100%; }

a { color: var(--garnet); }

h1, h2, h3, h4 { margin: 0; }

/* ---------- Announcement banner ---------- */
.banner {
  background: var(--garnet);
  color: var(--white);
  padding: 10px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  position: relative;
  font-size: 14px;
}
.banner[hidden] { display: none; }
.banner__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ---------- Header ---------- */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.header__logo {
  height: 66px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: height 220ms ease;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.header[data-scrolled="yes"] .header__logo { height: 48px; }
.nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
}
.nav__link {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.nav__link:hover { color: var(--seal); }
.nav__link[aria-current="true"] {
  font-weight: bold;
  color: var(--seal);
  border-bottom-color: var(--seal);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .3px;
  padding: 14px 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background 160ms ease, transform 80ms ease;
}
.btn--primary { background: var(--seal); color: var(--white); }
.btn--primary:hover { background: var(--garnet); }
.btn--primary:active { transform: scale(.98); }
.btn--ghost { background: transparent; color: var(--seal); border-color: var(--seal); }
.btn--ghost:hover { background: var(--pearl); }
.btn--sm { font-size: 14px; padding: 11px 20px; }
.btn--hero { padding: 16px 28px; box-shadow: 0 6px 20px rgba(140,0,0,.22); }

/* ---------- Layout ---------- */
.main { max-width: 1200px; margin: 0 auto; padding: 48px 40px 64px; }
.screen { padding-bottom: 48px; }
.screen[hidden] { display: none; }
.eyebrow {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
}
.section-title { font-family: var(--serif); font-weight: bold; font-size: 36px; margin: 0 0 12px; }
.lede { font-size: 17px; margin: 0 0 48px; max-width: 720px; }
.prose { font-size: 17px; line-height: 1.65; margin: 0 0 20px; max-width: 780px; }
.prose--narrow { max-width: 780px; }
.note {
  font-size: 15px; line-height: 1.6; color: var(--muted);
  max-width: 780px; padding-left: 18px; border-left: 2px solid var(--gold);
}
.subhead { font-family: var(--serif); font-weight: bold; font-size: 24px; margin: 40px 0 14px; }
.divider { border-top: 1px solid var(--line); padding-top: 40px; }
.mt-lg { margin-top: 64px; }

/* ---------- Hero ---------- */
.hero { margin-bottom: 44px; }
.hero__top { max-width: 720px; margin-bottom: 36px; }
.hero__lower { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.hero__copy { flex: 1 1 420px; min-width: 320px; }
.hero__kicker {
  font-family: var(--sans); font-size: 12px; font-weight: bold; letter-spacing: 3px;
  color: var(--gold); text-transform: uppercase; margin: 0 0 20px;
}
.hero__title {
  font-family: var(--serif); font-weight: bold;
  font-size: clamp(34px, 4.8vw, 56px); line-height: 1.1; letter-spacing: -.5px;
  margin: 0;
}
.hero__title em { color: var(--garnet); font-style: italic; }
.hero__intro { font-size: 19px; line-height: 1.65; margin: 0 0 28px; max-width: 620px; }
.hero__body { font-size: 17px; line-height: 1.65; margin: 0 0 20px; max-width: 620px; color: var(--ink); }
.hero__closing { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--garnet); margin: 4px 0 32px; max-width: 620px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__media {
  flex: 1 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 96px;
}
.hero__media img {
  width: 100%; max-width: 400px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 4px; box-shadow: 0 20px 50px rgba(94,0,0,.12); display: block;
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  padding: 24px 0; margin-bottom: 44px;
}
.stats > div { text-align: center; padding: 0 16px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: none; }
.stats strong {
  font-family: var(--serif); font-size: 16px; font-weight: bold;
  letter-spacing: .3px; color: var(--garnet);
}

/* ---------- Founder card ---------- */
.founder {
  display: flex; flex-wrap: wrap; gap: 44px; align-items: start;
  background: var(--pearl); padding: 44px; border-radius: 8px;
  box-shadow: 0 4px 24px rgba(28,21,15,.05); margin-bottom: 44px;
}
.founder__photo {
  width: 220px; height: 220px; object-fit: cover; border-radius: 4px;
  flex-shrink: 0; box-shadow: 0 12px 30px rgba(28,21,15,.15);
}
.founder__body { flex: 1 1 300px; min-width: 260px; }
.founder__name { font-family: var(--serif); font-weight: bold; font-size: 26px; margin: 0 0 4px; }
.role {
  font-size: 13px; color: var(--gold); font-weight: bold;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px;
}

/* ---------- Reviews ---------- */
.reviews-head { text-align: center; }
.reviews-head .eyebrow { display: block; margin-bottom: 12px; }
.reviews-head h2 { font-family: var(--serif); font-weight: bold; font-size: 28px; margin: 0 0 48px; }
.review-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;
}
.review-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 32px;
  background: var(--white); box-shadow: 0 4px 20px rgba(28,21,15,.04);
}
.stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.review-card blockquote {
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6;
  margin: 0 0 20px;
}
.review-card cite { font-style: normal; font-size: 13px; font-weight: bold; color: var(--garnet); display: block; }
.review-card small { font-size: 12px; color: var(--muted); }
.reviews-summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 32px; font-size: 15px;
}
.reviews-summary a { color: var(--garnet); }

/* ---------- Cards / grids ---------- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 64px; }
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card {
  border: 1px solid var(--line); border-radius: 6px; padding: 32px; background: var(--white);
}
.card h3 { font-family: var(--serif); font-weight: bold; font-size: 21px; color: var(--garnet); margin: 0 0 12px; }
.card p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.card p.muted { color: var(--muted); }
.card--sm { padding: 26px; }
.card--sm h4 { font-family: var(--serif); font-weight: bold; font-size: 18px; color: var(--garnet); margin: 0 0 10px; }
.card--sm p { font-size: 15px; line-height: 1.6; margin: 0; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 36px 0 12px; }

.panel { background: var(--pearl); border-radius: 6px; padding: 20px 24px; }
.panel strong { display: block; color: var(--garnet); font-size: 14px; margin-bottom: 6px; }
.panel span { font-size: 15px; line-height: 1.55; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--pearl); border-radius: 8px; padding: 40px; margin-top: 44px;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.cta-band h3 { font-family: var(--serif); font-weight: bold; font-size: 22px; margin: 0 0 8px; }
.cta-band p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- Process steps ---------- */
.step { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--serif); font-weight: bold; font-size: 28px; color: var(--seal); width: 44px; flex-shrink: 0; }
.step__title { font-weight: bold; font-size: 17px; margin-bottom: 6px; }
.step__body { font-size: 15px; line-height: 1.6; }

/* ---------- Tools scroller ---------- */
.tools-wrap { position: relative; }
.tools-scroller {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 4px 18px;
}
.tool {
  border: 1px solid var(--line); border-radius: 6px; padding: 24px;
  flex: 0 0 280px; scroll-snap-align: start; background: var(--white);
}
.tool h4 { font-family: var(--serif); font-weight: bold; font-size: 17px; color: var(--garnet); margin: 0 0 10px; }
.tool p { font-size: 14px; line-height: 1.6; margin: 0; }
.tools-controls { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.scroll-btn {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--white); color: var(--seal); font-size: 18px; line-height: 1; cursor: pointer;
}
.scroll-btn:hover { background: var(--pearl); }
.tools-controls span { font-size: 13px; color: var(--muted); }

/* ---------- Team ---------- */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; align-items: stretch; max-width: 900px;
}
.member {
  border: 1px solid var(--line); border-radius: 6px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.member h4 { font-family: var(--serif); font-weight: bold; font-size: 18px; color: var(--garnet); margin: 0; }
.member__creds {
  font-size: 12px; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); line-height: 1.5;
}
.member p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- Location ---------- */
.loc-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; margin-bottom: 48px; }
.loc-card {
  background: var(--pearl); border-radius: 6px; padding: 32px; flex: 1 1 320px; min-width: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.loc-card h3 { font-family: var(--serif); font-weight: bold; font-size: 20px; color: var(--garnet); margin: 0 0 8px; }
.loc-card address { font-style: normal; font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.map-links { display: flex; flex-wrap: wrap; gap: 12px; }
.map-links a {
  font-size: 12px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--garnet); border: 1px solid var(--gold); padding: 10px 18px; border-radius: 3px; text-decoration: none;
}
.map-links a:hover { background: var(--garnet); color: var(--white); border-color: var(--garnet); }
.map-frame {
  flex: 1 1 340px; min-width: 280px; border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; background: var(--pearl); min-height: 280px;
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; }

/* ---------- Partners ---------- */
.partners { border-top: 1px solid var(--line); padding: 40px 0 36px; margin-bottom: 40px; text-align: center; }
.partners__label { margin: 0 0 28px; font-size: 12px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.partners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px 56px; max-width: 1000px; margin: 0 auto; }
.partners__row a { color: #8A8A8A; opacity: .9; display: block; transition: color 200ms ease, opacity 200ms ease; }
.partners__row a:hover { color: var(--garnet); opacity: 1; }
.partners__row svg { height: 34px; width: auto; display: block; }

/* ---------- Pricing ---------- */
.price-table { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.price-row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: none; }
.price-row__item { flex: 1 1 320px; min-width: 240px; }
.price-row__item strong { font-family: var(--serif); font-weight: bold; font-size: 16px; }
.price-row__item span { display: block; font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 3px; }
.price-row__price { font-family: var(--serif); font-weight: bold; font-size: 17px; color: var(--garnet); white-space: nowrap; }
.fineprint { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 720px; }

/* ---------- Info list ---------- */
.info-list { display: flex; flex-direction: column; }
.info-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.info-item__bar { width: 6px; background: var(--seal); border-radius: 3px; flex-shrink: 0; }
.info-item__text { font-size: 15px; line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--line); padding: 24px 0; }
.faq__q { font-family: var(--serif); font-weight: bold; font-size: 18px; color: var(--garnet); margin-bottom: 8px; }
.faq__a { font-size: 15px; line-height: 1.6; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1.5px solid var(--seal); padding: 24px 40px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer__name { font-family: var(--serif); font-variant: small-caps; letter-spacing: 1px; color: var(--seal); font-weight: bold; font-size: 15px; }
.footer__right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.socials { display: flex; align-items: center; gap: 14px; }
.socials a { color: var(--seal); display: flex; }
.footer__meta { color: var(--muted); font-size: 13px; }

/* ---------- Contact modal ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal__box { background: var(--white); border-radius: 6px; max-width: 520px; width: 100%; padding: 40px; max-height: 90vh; overflow-y: auto; }
.modal__box h3 { font-family: var(--serif); font-weight: bold; font-size: 24px; margin: 0 0 20px; }
.modal__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.modal__hours { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 22px; }
.modal__blurb { margin: 0 0 20px; padding: 18px 20px; background: var(--pearl); border-radius: 4px; display: flex; flex-direction: column; gap: 12px; }
.modal__blurb p { font-size: 14px; line-height: 1.55; margin: 0; }
.modal__close { width: 100%; font-family: var(--sans); font-size: 14px; padding: 10px; background: transparent; color: var(--muted); border: none; cursor: pointer; }

/* ---------- Progressive enhancement: only hide sections once JS tabs are active ---------- */
.js .screen[hidden] { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  /* Contain sideways scroll on the CONTENT area, not the body. Clipping .main
     (a sibling of the sticky header) keeps horizontal overflow in check without
     sitting on the header's ancestry, so the sticky header keeps working. */
  .main { overflow-x: clip; }
  .banner { padding: 10px 40px; }
  .header { padding: 10px 16px; gap: 8px 12px; justify-content: center; }
  /* Logo on its own centered row, sized to the screen width so it reads clearly
     regardless of the lockup's aspect ratio. */
  .header > a { order: 0; flex: 1 0 100%; display: flex; justify-content: center; }
  .header__logo { height: auto; width: min(74vw, 360px); max-width: 100%; }
  .header[data-scrolled="yes"] { padding: 6px 16px; }
  /* Contact button: compact, centered, its own row */
  .header > div { order: 1; flex: 1 0 100%; display: flex; justify-content: center; }
  .header > div .btn { font-size: 13px; padding: 10px 22px; }
  /* Menu: horizontally scrolling row beneath */
  .nav { order: 2; flex: 1 0 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { min-height: 44px; padding: 10px 12px; flex: 0 0 auto; }
  .main { padding: 28px 20px 64px; }
  .main p, .main li { font-size: 17px; line-height: 1.6; }
  .hero { margin-bottom: 40px; }
  .hero__top { max-width: none; margin-bottom: 8px; }
  .hero__title { margin: 0; }
  /* Mobile hero: clean photo between the headline and the copy (no faded overlay). */
  .hero__lower { gap: 24px; }
  .hero__media { order: -1; position: static; flex: 1 1 100%; min-width: 0; margin-top: 20px; }
  .hero__media img { width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-position: center 35%; box-shadow: 0 12px 30px rgba(94,0,0,.10); }
  .hero__copy { min-width: 0; flex: 1 1 100%; }
  .stats { grid-template-columns: 1fr; gap: 18px; padding: 22px 0; margin-bottom: 56px; }
  .stats > div { border-right: none; }
  .card-grid-3, .card-grid-2, .mini-grid { grid-template-columns: 1fr; gap: 20px; }
  .founder { padding: 22px; }
  .founder__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 260px; }
  .cta-band { padding: 22px; }
  .footer { padding: 20px; }
  .footer a { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
}

/* ============================================================
   Intro splash — lightweight CSS/SVG logo sting.
   Auto-dismisses via CSS animation (works with JS disabled);
   JS adds skip button + once-per-session suppression.
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--garnet);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  animation: splashOut 500ms ease 1.2s forwards;
}
.splash[hidden] { display: none; }
.splash--skip { animation: splashOut 320ms ease 0s forwards; }

@keyframes splashOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.splash__mark {
  font-family: var(--serif);
  font-weight: bold;
  font-size: clamp(64px, 14vw, 118px);
  line-height: 1;
  letter-spacing: 3px;
  color: var(--gold);
  opacity: 0;
  transform: scale(.86);
  animation: splashMark 550ms cubic-bezier(.2,.7,.2,1) .05s forwards;
}
@keyframes splashMark { to { opacity: 1; transform: scale(1); } }

.splash__rule {
  width: 0;
  height: 2px;
  background: var(--gold);
  opacity: .9;
  animation: splashRule 500ms ease .3s forwards;
}
@keyframes splashRule { to { width: min(300px, 62vw); } }

.splash__word {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: clamp(12px, 2.4vw, 17px);
  color: var(--pearl);
  opacity: 0;
  transform: translateY(6px);
  animation: splashWord 500ms ease .5s forwards;
}
@keyframes splashWord { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .splash { animation: splashOut 300ms ease .6s forwards; }
  .splash__mark, .splash__word { opacity: 1; transform: none; animation: none; }
  .splash__mark { animation: none; }
  .splash__rule { width: min(300px, 62vw); animation: none; }
}

/* ---------- Enquiry form (inside the Contact us popup) ---------- */
.enquiry { border-top: 1px solid var(--line); padding-top: 22px; margin: 4px 0 22px; }
.enquiry__intro { font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: 13px; font-weight: bold; color: var(--ink); }
.field .req { color: var(--seal); }
.field .optional { font-weight: normal; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; /* 16px stops iPhone zooming in on focus */
  color: var(--ink); background: var(--white);
  border: 1px solid #BDBDBD; border-radius: 4px; padding: 10px 12px; width: 100%;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal);
}
.field [aria-invalid="true"] { border-color: var(--seal); background: #FFF8F8; }
/* Tick-box "chips" for multi-select questions */
.chips { flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 14px; }
.chips legend { font-size: 13px; font-weight: bold; color: var(--ink); padding: 0; margin-bottom: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  font-size: 15px; color: var(--ink); background: var(--white);
  border: 1px solid #BDBDBD; border-radius: 999px; user-select: none;
}
.chip input:checked + span { background: var(--garnet); border-color: var(--garnet); color: #fff; }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; font-size: 13px; }
.chip input:focus-visible + span { outline: 2px solid var(--seal); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.enquiry__privacy { font-size: 12.5px; color: var(--muted); margin: 2px 0 12px; }
.enquiry__submit { width: 100%; min-height: 48px; }
.enquiry__submit[disabled] { opacity: .65; cursor: progress; }
.enquiry__status { font-size: 14px; line-height: 1.5; margin: 10px 0 0; color: var(--seal); }
.enquiry__status:empty { display: none; }
.enquiry__thanks { background: var(--pearl); border-radius: 4px; padding: 18px 20px; margin: 4px 0 22px; outline: none; }
.enquiry__thanks h4 { font-family: var(--serif); font-size: 18px; color: var(--garnet); margin: 0 0 6px; }
.enquiry__thanks p { font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 700px) {
  .field-row { grid-template-columns: 1fr; }
  .chips { gap: 6px; }
  .chip span { padding: 8px 11px; font-size: 14px; }
  .modal { padding: 12px; }
  .modal__box { padding: 28px 20px; max-height: 94vh; }
}