/* ==========================================================================
 * Sunrise Bullions - app.css
 *
 * Responsive website stylesheet. Palette and proportions still follow the
 * original app design (tasks.txt 27-30 / homepage.jpeg); the layout is now a
 * normal scrolling document that scales from a 320px phone to a wide desktop.
 *
 * Breakpoints (mobile first, min-width only):
 *    400px   two-up form fields
 *    600px   footer splits into columns, inline buttons
 *    700px   larger service tiles
 *    760px   header call-to-action, two-up message / contact cards
 *    820px   rate cards go two-up
 *    900px   five-column footer, side-by-side calculator
 *   1080px   header nav replaces the hamburger and the mobile quick bar
 *   1240px   rate cards go three-up
 * ========================================================================== */

/* ------------------------------------------------------------- 1. tokens - */
:root {
  /* Golds - deliberately several shades to fake metallic depth (tasks.txt 28) */
  --gold:            #D9A83E;
  --gold-bright:     #F4C653;
  --gold-antique:    #8F6724;
  --gold-heading:    #E2B75B;
  --gold-ticker:     #D6A93C;

  /* Neutrals */
  --bg:              #000000;
  --card-bg:         #050402;
  --price:           #F0F0F0;
  --text-secondary:  #D8D4CA;
  --text-muted:      #8A8478;

  /* Chrome surfaces - header, footer, bars, drawer, dropdowns */
  --surface:         rgba(0, 0, 0, 0.94);
  --surface-2:       #060503;
  --hairline:        rgba(143, 103, 36, 0.42);

  /* Signals */
  --up:              #20C653;
  --down:            #F13D48;

  /* Structure */
  --card-radius:     14px;
  --card-border:     1px solid rgba(143, 103, 36, 0.85);
  --card-glow:       inset 0 0 18px rgba(217, 168, 62, 0.06);
  --page-pad:        13px;

  /* Widest the content column ever gets, and a narrower measure for prose. */
  --content-max:     1180px;
  --prose-max:       900px;

  /* Furniture heights - the fixed bars and buttons key off these */
  --topbar-h:        60px;
  --ticker-h:        42px;
  --nav-h:           62px;
  --safe-bottom:     env(safe-area-inset-bottom, 0px);
  --bottomnav-h:     calc(var(--nav-h) + var(--safe-bottom));

  /* Type */
  --serif: 'Cinzel', 'Trajan Pro', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}

/* Light theme (menu toggle). The reference design is dark. */
[data-theme='light'] {
  --bg:             #FFFFFF;
  --card-bg:        #FFFDF7;
  --price:          #101010;
  --text-secondary: #4A4438;
  --text-muted:     #7C7568;
  /* Dark enough to clear WCAG AA (4.5:1) as small text on the near-white
     card background; the previous #9A7526 only reached 4.17:1. */
  --gold-heading:   #8A6414;
  --card-glow:      inset 0 0 18px rgba(217, 168, 62, 0.05);
  --surface:        rgba(255, 255, 255, 0.94);
  --surface-2:      #FFFDF7;
  --hairline:       rgba(143, 103, 36, 0.32);
}

/* --------------------------------------------------------------- 2. base - */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  /* Anchors are not hidden behind the sticky header. */
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--text-secondary);

  /* A website scrolls its document; the app shell used to lock it to 100dvh
     and scroll .app-main instead. Keeping body a flex column lets a short page
     still push the footer to the bottom of the viewport. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;

  /* Room for the fixed mobile quick bar; removed once that bar is hidden. */
  padding-bottom: var(--bottomnav-h);
}

/* Scrolling is frozen only while the slide-out menu is open. */
body.nav-open { overflow: hidden; }

a { color: var(--gold); text-decoration: none; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img { max-width: 100%; }

/* Keyboard users get a visible focus ring everywhere. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Tabular figures keep prices from jittering as they tick. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 100;
  padding: 11px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--gold-bright);
  color: #17130A;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  transition: top 160ms ease;
}

.skip-link:focus { top: 0; }

/* ------------------------------------------------------- 3. content column */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Home screen: lets .breathing-room absorb leftover height so the hero and the
   cards stay top-weighted on a tall viewport (tasks.txt 15 / 31). */
.app-main--flex {
  display: flex;
  flex-direction: column;
}

/* Everything a page puts straight into <main> is centred and capped, so the
   design never stretches into an unreadable full-bleed band on a desktop.
   These blocks carry their own side padding. */
.content,
.rates {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* These have no internal padding, so the gutter is baked into their width -
   which keeps their edges flush with the padded blocks above at every size. */
.page-title,
.offline {
  width: min(100% - 2 * var(--page-pad), var(--content-max) - 2 * var(--page-pad));
  margin-left: auto;
  margin-right: auto;
}

/* Long-form pages read better on a narrower measure. The modifier sits on
   <main> so the title banner and the prose narrow together. */
.app-main--prose .content { max-width: var(--prose-max); }

.app-main--prose .page-title {
  width: min(100% - 2 * var(--page-pad), var(--prose-max) - 2 * var(--page-pad));
}

.breathing-room {
  width: 100%;
  flex: 1 1 auto;
  min-height: 24px;
}

/* --------------------------------------------------------- 4. sticky header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

body.is-scrolled .topbar { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); }

.topbar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: var(--topbar-h);
  padding: 8px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ----- brand lockup, shared by the header, the drawer and the footer ----- */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  /* Never squeezed by the nav - the company name must not be truncated. */
  flex: 0 0 auto;
  color: inherit;
}

.brand__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.brand__text { display: flex; flex-direction: column; min-width: 0; }

.brand__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(13px, 3.7vw, 17px);
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__sub {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ----- horizontal nav: hidden until the 1000px breakpoint ---------------- */
.topnav { display: none; }

.topnav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease;
}

.topnav__link:hover { color: var(--gold-bright); background: rgba(217, 168, 62, 0.10); }

.topnav__link.is-active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(217, 168, 62, 0.18) 0%, rgba(217, 168, 62, 0.06) 100%);
}

/* ----- header dropdowns -------------------------------------------------- */
.navdrop { position: relative; }

.navdrop__caret {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.navdrop.is-open .navdrop__caret { transform: rotate(180deg); }

.navdrop__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 292px;
  padding: 7px;
  border: 1px solid rgba(143, 103, 36, 0.7);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  display: grid;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.navdrop.is-open > .navdrop__menu,
.navdrop:hover > .navdrop__menu,
.navdrop:focus-within > .navdrop__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.navdrop__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text-secondary);
}

.navdrop__item svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex: 0 0 auto;
  margin-top: 1px;
}

.navdrop__item:hover { background: rgba(217, 168, 62, 0.10); }
.navdrop__item.is-active { background: rgba(217, 168, 62, 0.15); }

.navdrop__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.navdrop__label {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-heading);
}

.navdrop__desc { font-size: 11px; line-height: 1.35; color: var(--text-muted); }

/* ----- header actions ---------------------------------------------------- */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  flex: 0 0 auto;
}

.topbar__cta {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F4C653 0%, #D9A83E 55%, #B4831F 100%);
  color: #17130A;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(217, 168, 62, 0.22);
}

.topbar__cta:hover { filter: brightness(1.06); }
.topbar__cta svg { width: 16px; height: 16px; }

.topbar__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 103, 36, 0.55);
  border-radius: 10px;
  background: rgba(217, 168, 62, 0.05);
  color: var(--gold);
  flex: 0 0 auto;
}

.topbar__icon:hover { color: var(--gold-bright); border-color: var(--gold); }
.topbar__icon svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------- 5. ticker  */
.ticker {
  height: var(--ticker-h);
  background: linear-gradient(180deg, #E4B84A 0%, #D6A93C 52%, #BE9330 100%);
  color: #120C02;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.ticker__text {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 100%;
  animation: tickerScroll 26s linear infinite;
}

/* Short announcements are not worth scrolling - centre them in the content
   column like the reference screenshot does. */
.ticker--static .ticker__text {
  padding-left: 0;
  animation: none;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-right: var(--page-pad);
  padding-left: var(--page-pad);
  text-align: center;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --------------------------------------------------------------- 6. hero - */
.hero {
  position: relative;
  overflow: hidden;
  height: 23dvh;
  min-height: 186px;
  max-height: 244px;
  background: #000;
  flex: 0 0 auto;
}

/* Warm atmospheric glow behind the right-hand sunrise. */
.hero__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 72% at 80% 78%,
      rgba(255, 196, 77, 0.45) 0%,
      rgba(203, 138, 30, 0.20) 32%,
      rgba(90, 58, 10, 0.10) 58%,
      rgba(0, 0, 0, 0) 78%);
}

/* Thin radial rays, built from a repeating conic gradient and faded out.
   Capped in absolute terms so they do not become a full-screen starburst on a
   wide desktop viewport. */
.hero__rays {
  position: absolute;
  left: 80%;
  top: 78%;
  width: min(150vw, 760px);
  height: min(150vw, 760px);
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 206, 100, 0.50) 0deg 0.75deg,
    rgba(255, 206, 100, 0) 0.75deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 4%, rgba(0, 0, 0, 0.75) 16%, transparent 40%);
  mask-image: radial-gradient(circle, #000 4%, rgba(0, 0, 0, 0.75) 16%, transparent 40%);
  pointer-events: none;
}

/* The sun lives outside the SVG: the ridges stretch to any viewport width
   (preserveAspectRatio="none"), which would flatten a circle into an ellipse. */
.hero__sun {
  position: absolute;
  left: 80%;
  top: 75%;
  width: clamp(44px, 13%, 104px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFD469 45%, #E9A22C 100%);
  box-shadow:
    0 0 0 14px rgba(217, 168, 62, 0.10),
    0 0 48px 22px rgba(255, 196, 77, 0.26);
  pointer-events: none;
}

.hero__mountains {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px var(--page-pad) 0;
  text-align: center;
}

.hero__logo {
  width: clamp(72px, 21vw, 96px);
  height: clamp(72px, 21vw, 96px);
  border-radius: 50%;
  object-fit: cover;
  /* The supplied logo art is already black-backed, so it blends into the sky. */
  filter: drop-shadow(0 0 10px rgba(217, 168, 62, 0.35));
}

.hero__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(17px, 4.9vw, 34px);
  letter-spacing: 0.055em;
  line-height: 1.05;
  margin: 2px 0 0;
  color: var(--gold-bright);
  background: linear-gradient(180deg, #F7DC93 0%, #D9A83E 55%, #A97C22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* 'PVT. LTD.' flanked by thin ornamental gold rules (tasks.txt 6). */
.hero__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(74%, 300px);
  margin-top: 3px;
}

.hero__sub span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(10px, 2.9vw, 14px);
  letter-spacing: 0.16em;
  color: var(--gold-heading);
  white-space: nowrap;
}

.hero__sub i {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-antique), transparent);
}

.hero__flourish {
  margin-top: 5px;
  width: min(58%, 230px);
  height: 7px;
  opacity: 0.9;
}

/* Only shown where the hero is tall enough to carry it (see breakpoints). */
.hero__tagline {
  display: none;
  margin: 9px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-heading);
}

/* Gold gradient page title banner used by the information pages. */
.page-title {
  margin-top: var(--page-pad);
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #F4C653 0%, #D9A83E 48%, #A97C22 100%);
  color: #1A1204;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(217, 168, 62, 0.18);
}

/* --------------------------------------------------------------- 7. cards */
.rates {
  padding: 12px var(--page-pad) 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-glow);
}

/* --- 7a. global multi-column card (GOLD / SILVER / USDINR) -------------- */
.card--global {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: stretch;
  padding: 11px 4px 12px;
}

.card--global .divider {
  /* Dividers stop short of the card edge (tasks.txt 29). */
  width: 1px;
  margin: 4px 0;
  background: linear-gradient(180deg, transparent, rgba(143, 103, 36, 0.9) 22%,
                              rgba(143, 103, 36, 0.9) 78%, transparent);
}

.gcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 3px;
  min-width: 0;
}

.gcol__head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(11px, 3.2vw, 14px);
  letter-spacing: 0.03em;
  color: var(--gold-heading);
  /* Scrip names come from the feed, so clip an unexpectedly long one rather
     than letting it stretch the grid column. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gcol__head small {
  font-size: 0.72em;
  letter-spacing: 0;
}

.gcol__price {
  font-size: clamp(19px, 5.5vw, 27px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--price);
  white-space: nowrap;
}

.gcol__hl {
  font-size: clamp(10px, 3vw, 13px);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.gcol__hl .sep { color: var(--gold-antique); margin: 0 3px; }
.hi { color: var(--up); }
.lo { color: var(--down); }

/* --- 7b. costing cards (GOLD COSTING / SILVER COSTING) ------------------ */
.card--costing {
  display: grid;
  /* icon | label | buy | divider | sell - home.js overrides this per card so a
     scrip with a single price, or none of the bullion icons, still balances. */
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
  padding: 11px 11px 12px;
}

.costing__iconwrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.costing__icon {
  width: 46px;
  height: 40px;
  flex: 0 0 auto;
}

.costing__label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(13px, 3.9vw, 17px);
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--gold-heading);
  text-transform: uppercase;
  padding-left: 2px;
  min-width: 0;
  /* Feed names such as 'GOLD 999 WITH GST' wrap instead of squeezing the
     price columns. */
  overflow-wrap: break-word;
}

/* Unit hint under the scrip name, e.g. (Rs/10g). */
.costing__unit {
  display: block;
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold-antique);
}

.costing__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.costing__price {
  font-size: clamp(19px, 5.6vw, 27px);
  line-height: 1.1;
  color: var(--price);
  white-space: nowrap;
}

.costing__hl {
  font-size: clamp(10px, 3vw, 13px);
  white-space: nowrap;
}

.card--costing .divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: linear-gradient(180deg, transparent, rgba(143, 103, 36, 0.9) 20%,
                              rgba(143, 103, 36, 0.9) 80%, transparent);
}

/* Price change flash (green up / red down). */
@keyframes flashUp {
  0%   { color: var(--up); }
  70%  { color: var(--up); }
  100% { color: var(--price); }
}
@keyframes flashDown {
  0%   { color: var(--down); }
  70%  { color: var(--down); }
  100% { color: var(--price); }
}
.flash-up   { animation: flashUp   var(--flash-ms, 900ms) ease-out 1; }
.flash-down { animation: flashDown var(--flash-ms, 900ms) ease-out 1; }

/* Shown when the feed responds but publishes no scrips. */
.rates__empty {
  grid-column: 1 / -1;
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- 7c. dense mode ------------------------------------------------------
   The number of scrips is decided by the broadcast template, so once the feed
   returns enough cards (AppConfig.rateDisplay.denseFrom) the whole block
   tightens up to keep as many as possible above the fold. Relaxed again from
   820px, where the cards sit side by side and the height is no longer scarce. */
.rates--dense { gap: 8px; padding-top: 9px; }

.rates--dense .card--global  { padding: 8px 4px 9px; }
.rates--dense .card--costing { padding: 7px 10px 8px; }

.rates--dense .gcol__price,
.rates--dense .costing__price { font-size: clamp(17px, 4.9vw, 23px); }

.rates--dense .gcol__head     { font-size: clamp(10px, 2.9vw, 13px); }
.rates--dense .costing__label { font-size: clamp(11.5px, 3.4vw, 15px); }

.rates--dense .gcol__hl,
.rates--dense .costing__hl { font-size: clamp(9.5px, 2.7vw, 12px); }

.rates--dense .costing__icon { width: 36px; height: 31px; }

/* A long scrip list needs the height more than the negative space does. */
.rates--dense ~ .breathing-room { min-height: 12px; }

/* ---------------------------------------------------- 8. floating actions */
.fabs {
  position: fixed;
  z-index: 40;
  right: var(--page-pad);
  bottom: calc(var(--bottomnav-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #F7DC93 0%, #E0AE44 45%, #B4831F 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 14px rgba(217, 168, 62, 0.30);
  transition: transform 140ms ease;
}

.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(0.94); }
.fab svg { width: 25px; height: 25px; display: block; }

/* ------------------------------------------- 9. mobile quick-access bar -- */
.navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  height: var(--bottomnav-h);
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(143, 103, 36, 0.35);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.navbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 1px;
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.1;
  text-align: center;
  min-width: 0;
}

.navbar__item svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}

.navbar__item span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active tab: a restrained warm highlight, not a bright one (tasks.txt 21). */
.navbar__item.is-active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(217, 168, 62, 0.16) 0%, rgba(217, 168, 62, 0.05) 100%);
  border-radius: 8px;
}
.navbar__item.is-active svg { color: var(--gold-bright); }

/* --------------------------------------------------------- 10. site footer */
.sitefoot {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
}

.sitefoot__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 26px var(--page-pad) 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.sitefoot__title {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-heading);
  margin: 0 0 11px;
}

.sitefoot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sitefoot__list a { font-size: 12.5px; color: var(--text-secondary); }
.sitefoot__list a:hover { color: var(--gold-bright); text-decoration: underline; }

.brand--foot .brand__logo { width: 44px; height: 44px; }

.sitefoot__blurb {
  margin: 11px 0 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.sitefoot__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.sitefoot__contact li,
.sitefoot__contact a {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.sitefoot__contact a:hover { color: var(--gold-bright); }

.sitefoot__contact svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sitefoot__bar {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 13px var(--page-pad);
  border-top: 1px solid rgba(143, 103, 36, 0.28);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.sitefoot__legal { display: flex; gap: 16px; }
.sitefoot__legal a { color: var(--gold-heading); }
.sitefoot__legal a:hover { text-decoration: underline; }

/* ------------------------------------------------ 11. slide-out side menu */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms;
}

body.nav-open .scrim { opacity: 1; visibility: visible; }

.sidenav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: min(90vw, 400px);
  background: var(--surface-2);
  border-right: 1px solid rgba(143, 103, 36, 0.5);
  box-shadow: 26px 0 60px rgba(0, 0, 0, 0.7);
  transform: translateX(-100%);
  transition: transform 260ms ease, visibility 260ms;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  visibility: hidden;
}

.sidenav.is-open { transform: translateX(0); visibility: visible; }

.sidenav__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--page-pad);
  border-bottom: 1px solid rgba(143, 103, 36, 0.5);
  flex: 0 0 auto;
}

.sidenav__top img { width: 36px; height: 36px; border-radius: 50%; }

.sidenav__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
}

.sidenav__close {
  margin-left: auto;
  width: 34px; height: 34px;
  border: 1px solid rgba(143, 103, 36, 0.6);
  border-radius: 9px;
  color: var(--gold);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.sidenav__close svg { width: 18px; height: 18px; }

.sidenav__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidenav__foot {
  flex: 0 0 auto;
  padding: 12px var(--page-pad) calc(14px + var(--safe-bottom));
  border-top: 1px solid rgba(143, 103, 36, 0.4);
}

.navgroup {
  border: 1px solid rgba(143, 103, 36, 0.7);
  border-radius: 12px;
  padding: 8px 6px 10px;
  background: var(--card-bg);
}

.navgroup__title {
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-heading);
  text-align: center;
  margin-bottom: 6px;
}

.navgroup__grid {
  /* Flex rather than a fixed 3-column grid: a group whose item count is not a
     multiple of three centres its last row instead of leaving empty cells
     stranded on the right. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.navcell {
  /* Three to a row, accounting for the two 6px gaps between them. */
  flex: 0 0 calc((100% - 12px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 9px 3px;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}

.navcell:hover { background: rgba(217, 168, 62, 0.12); }
.navcell svg { width: 22px; height: 22px; color: var(--gold); }

.navcell.is-active {
  background: rgba(217, 168, 62, 0.14);
  color: var(--gold-bright);
}
.navcell.is-active svg { color: var(--gold-bright); }

/* ---------------------------------------------------- 12. status / notices */
.snackbar {
  position: fixed;
  z-index: 50;
  left: var(--page-pad);
  /* Sits beside the floating buttons rather than under them. */
  right: calc(var(--page-pad) + 64px);
  bottom: calc(var(--bottomnav-h) + 12px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(143, 103, 36, 0.85);
  border-radius: 11px;
  background: rgba(10, 8, 4, 0.97);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
  transform: translateY(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.snackbar.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
.snackbar__msg { flex: 1 1 auto; min-width: 0; }
.snackbar__close { flex: 0 0 auto; color: var(--gold); font-size: 16px; line-height: 1; padding: 0 2px; }

.offline {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(241, 61, 72, 0.6);
  border-radius: 10px;
  background: rgba(60, 10, 12, 0.5);
  color: #FFD9DB;
  font-size: 12px;
}

.offline.is-visible { display: flex; }

.offline__retry {
  margin-left: auto;
  border: 1px solid rgba(241, 61, 72, 0.8);
  border-radius: 7px;
  padding: 4px 10px;
  color: #FFD9DB;
  font-size: 11px;
}

.spinner {
  width: 26px; height: 26px;
  margin: 22px auto;
  border: 2px solid rgba(217, 168, 62, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- 13. modal    */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.7);
}

.modal.is-open { display: flex; }

.modal__card {
  width: 100%;
  max-width: 330px;
  background: #FFFFFF;
  color: #17130A;
  border-radius: 12px;
  padding: 18px 16px 10px;
  text-align: center;
}

.modal__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  color: #6B4E12;
}

.modal__msg { font-size: 13px; line-height: 1.45; }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 16px;
}

.modal__actions button {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #A97C22;
  padding: 8px 4px;
  text-transform: uppercase;
}

/* --------------------------------------------- 14. generic content blocks */
.content {
  padding: 12px var(--page-pad) 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  padding: 14px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.panel h1, .panel h2, .panel h3, .panel h4 {
  font-family: var(--serif);
  color: var(--gold-heading);
  margin: 0 0 8px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}

.panel h2 + p, .panel h3 + p { margin-top: 0; }
.panel h2:not(:first-child), .panel h3:not(:first-child) { margin-top: 18px; }

.panel p { margin: 0 0 9px; }
.panel p:last-child { margin-bottom: 0; }
.panel ul, .panel ol { margin: 0 0 9px; padding-left: 18px; }
.panel a { color: var(--gold-bright); text-decoration: underline; }

.panel table { width: 100%; border-collapse: collapse; font-size: 12px; }
.panel td, .panel th {
  padding: 7px 9px;
  border: 1px solid rgba(143, 103, 36, 0.4);
  text-align: left;
}
.panel th { color: var(--gold-heading); font-weight: 600; }
.panel img { max-width: 100%; height: auto; }

/* Message cards (Message.html) */
.msggrid { display: grid; gap: 11px; }

.msgcard {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  padding: 13px 14px;
}

.msgcard__text { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }

.msgcard__date {
  margin-top: 9px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--gold-heading);
  text-align: right;
}

.empty-state {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* Key/value rows built by pages/content.js on the information pages. */
.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(143, 103, 36, 0.28);
  font-size: 12.5px;
}

.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.kv__v { color: var(--price); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

.disclaimer-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--gold-heading);
  text-decoration: underline;
  padding: 6px 0 2px;
}

/* ------------------------------------------------- 15. calculator pages  */
.rate-strip {
  background: #000;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 12px 13px;
  text-align: center;
}

.rate-strip__label {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-heading);
}

.rate-strip__value {
  font-size: clamp(26px, 6vw, 38px);
  line-height: 1.15;
  color: var(--price);
  margin-top: 3px;
}

.rate-strip__hl { font-size: 11.5px; margin-top: 2px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }

.field > label {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-heading);
}

.field input, .field select {
  width: 100%;
  padding: 11px;
  font-family: var(--sans);
  /* 16px stops iOS Safari zooming the page when a field is focused. */
  font-size: 16px;
  color: var(--price);
  background: #0B0906;
  border: 1px solid rgba(143, 103, 36, 0.75);
  border-radius: 9px;
  -webkit-user-select: text;
  user-select: text;
  appearance: none;
}

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(217, 168, 62, 0.18);
}

.field select option { background: #0B0906; color: var(--price); }

/* One field per row on the narrowest phones; two from 400px up. */
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 10px; }

.btn-gold {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: linear-gradient(180deg, #F4C653 0%, #D9A83E 50%, #B4831F 100%);
  color: #17130A;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 3px 12px rgba(217, 168, 62, 0.22);
}

.btn-gold:hover { filter: brightness(1.06); }
.btn-gold:active { transform: translateY(1px); }

.btn-outline {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(143, 103, 36, 0.85);
  color: var(--gold-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  background: var(--card-bg);
}

.btn-outline:hover { border-color: var(--gold); color: var(--gold-bright); }

/* Bill table with alternating gold / dark cells (pages.csv row 5). */
.bill { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.bill th {
  background: linear-gradient(180deg, #E0B04A 0%, #C3922E 100%);
  color: #17130A;
  font-family: var(--serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 9px 8px;
}

.bill td {
  padding: 10px;
  border-bottom: 1px solid rgba(143, 103, 36, 0.3);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.bill td:last-child { text-align: right; color: var(--price); }
.bill tr:nth-child(even) td { background: rgba(217, 168, 62, 0.07); }

.bill tr.is-total td {
  background: linear-gradient(180deg, rgba(217, 168, 62, 0.30) 0%, rgba(217, 168, 62, 0.16) 100%);
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 13.5px;
  border-bottom: 0;
}

/* ----------------------------------------------- 16. services / contact  */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 11px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 12px;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  color: var(--text-secondary);
  text-align: center;
  transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.tile:hover {
  border-color: var(--gold);
  background: rgba(217, 168, 62, 0.07);
  transform: translateY(-2px);
}

.tile:active { background: rgba(217, 168, 62, 0.1); }
.tile svg { width: 30px; height: 30px; color: var(--gold); }

.tile__label {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--gold-heading);
  text-transform: uppercase;
}

.tile__desc { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-glow);
  color: var(--text-secondary);
  width: 100%;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.contact-row:hover { border-color: var(--gold); background: rgba(217, 168, 62, 0.06); }

.contact-row svg { width: 24px; height: 24px; color: var(--gold); flex: 0 0 auto; }
.contact-row__k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.contact-row__v { font-size: 13px; color: var(--price); overflow-wrap: anywhere; }

/* ==========================================================================
 * 17. RESPONSIVE BREAKPOINTS
 * ========================================================================== */

/* ---- 400px: forms are wide enough for two fields per row --------------- */
@media (min-width: 400px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* ---- 600px: roomier gutters, inline buttons, two footer columns -------- */
@media (min-width: 600px) {
  :root { --page-pad: 20px; }

  .content { padding: 16px var(--page-pad) 24px; gap: 14px; }
  .rates { padding-top: 16px; gap: 15px; }

  .page-title { font-size: 16px; padding: 12px 18px; }

  /* A full-bleed button looks unfinished once there is space around it. */
  .content > .btn-gold,
  .content > .btn-outline {
    width: auto;
    min-width: 220px;
    align-self: flex-start;
    padding-left: 28px;
    padding-right: 28px;
  }

  .sitefoot__inner { grid-template-columns: repeat(2, 1fr); }
  .sitefoot__col--brand { grid-column: 1 / -1; }
}

/* ---- 700px: larger service tiles --------------------------------------- */
@media (min-width: 700px) {
  .tilegrid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
  }

  .tile { padding: 24px 16px; gap: 11px; }
  .tile svg { width: 34px; height: 34px; }
  .tile__label { font-size: 13.5px; }
  .tile__desc { font-size: 11.5px; }
}

/* ---- 760px: header call button, two-up cards --------------------------- */
@media (min-width: 760px) {
  .topbar__cta { display: inline-flex; }

  .msggrid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

  /* .content sets display:flex; this wins by coming later in the cascade. */
  .contactgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
  }

  .hero { height: 30dvh; min-height: 230px; max-height: 330px; }
  .hero__tagline { display: block; }
  .panel { padding: 20px 22px; font-size: 13.5px; }
  .panel h1, .panel h2, .panel h3, .panel h4 { font-size: 15px; }
}

/* ---- 820px: rate cards side by side ------------------------------------ */
@media (min-width: 820px) {
  .rates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  /* Card widths are bounded by the grid now, so viewport-relative type is the
     wrong yardstick - pin it instead. */
  .gcol__price,
  .costing__price { font-size: 24px; }

  .gcol__head { font-size: 13px; }
  .costing__label { font-size: 16px; }

  .gcol__hl,
  .costing__hl { font-size: 12px; }

  /* A little more air between the two price columns and their divider. */
  .card--costing { gap: 0 10px; }

  /* Vertical space is no longer scarce, so undo the dense clamp-down. */
  .rates--dense { gap: 15px; padding-top: 16px; }
  .rates--dense .card--global { padding: 11px 4px 12px; }
  .rates--dense .card--costing { padding: 11px 11px 12px; }
  .rates--dense .gcol__price,
  .rates--dense .costing__price { font-size: 24px; }
  .rates--dense .gcol__head { font-size: 13px; }
  .rates--dense .costing__label { font-size: 16px; }
  .rates--dense .gcol__hl,
  .rates--dense .costing__hl { font-size: 12px; }
  .rates--dense .costing__icon { width: 46px; height: 40px; }
}

/* ---- 900px: five-column footer, calculator form beside its bill -------- */
@media (min-width: 900px) {
  .sitefoot__inner {
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 28px;
  }
  .sitefoot__col--brand { grid-column: auto; }

  .content--calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  /* The live rate strip and the closing note run the full width; the form and
     the bill sit side by side, and Reset stays under the form. */
  .content--calc > .rate-strip,
  .content--calc > .empty-state { grid-column: 1 / -1; }
  .content--calc > #calcBill { grid-column: 2; }

  .content--calc > .btn-gold,
  .content--calc > .btn-outline { width: 100%; min-width: 0; align-self: stretch; }
}

/* ---- 1080px: the header nav replaces the hamburger and the quick bar.
        Chosen by measurement: all six items plus the brand and the call button
        need ~1030px, so this leaves headroom rather than overflowing. Keep in
        step with DESKTOP_NAV_MQ in js/layout.js. --------------------------- */
@media (min-width: 1080px) {
  :root { --page-pad: 26px; }

  .topnav {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: 16px;
    /* One row only; the link padding below keeps all six items on it. */
    flex-wrap: nowrap;
  }

  .topnav__link { padding: 9px 10px; letter-spacing: 0.05em; }

  .topbar__burger { display: none; }

  /* The fixed bottom bar and its body padding are only for small screens. */
  .navbar { display: none; }
  body { padding-bottom: 0; }

  .fabs { bottom: 24px; right: 24px; }
  .fab { width: 56px; height: 56px; }
  .fab svg { width: 26px; height: 26px; }

  .snackbar {
    left: 24px;
    right: auto;
    bottom: 24px;
    max-width: 420px;
  }

  .hero { height: 34dvh; min-height: 260px; max-height: 380px; }
  .hero__logo { width: 104px; height: 104px; }

  .content { padding: 20px var(--page-pad) 32px; gap: 16px; }
  .rates { padding-top: 20px; gap: 16px; }
  .page-title { font-size: 17px; letter-spacing: 0.14em; }

  /* Fixed three-up rather than auto-fit: the six service tiles then form a
     balanced 3 x 2 block instead of a row of five and a lone orphan. */
  .tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 1080-1259px: the nav and the call button compete for the same row,
        so the button keeps its icon and drops the number ----------------- */
@media (min-width: 1080px) and (max-width: 1259px) {
  .topbar__cta { padding: 9px 12px; }
  .topbar__cta span { display: none; }
}

/* ---- 1240px: three rate cards to a row --------------------------------- */
@media (min-width: 1240px) {
  .rates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
 * 18. Narrow, short and reduced-motion adjustments
 * ========================================================================== */

/* Very small phones. */
@media (max-width: 360px) {
  :root { --page-pad: 10px; }
  .navbar__item { font-size: 9.5px; }
  .navbar__item svg { width: 20px; height: 20px; }
  .costing__icon { width: 38px; height: 34px; }
  .brand__logo { width: 34px; height: 34px; }
  .topbar__icon { width: 38px; height: 38px; }
  .fab { width: 48px; height: 48px; }
  .fab svg { width: 23px; height: 23px; }
}

/* Short viewports (landscape phones): give the content the height back. */
@media (max-height: 660px) and (max-width: 1079px) {
  :root { --nav-h: 56px; --ticker-h: 38px; }
  .hero { min-height: 150px; height: 20dvh; }
  .hero__tagline { display: none; }
  .rates { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ticker__text {
    animation: none;
    padding-left: 0;
    text-align: center;
    width: 100%;
  }

  .hero__rays { display: none; }

  /* Keep state changes instant rather than animated. */
  .topnav__link,
  .navdrop__menu,
  .navdrop__caret,
  .scrim,
  .sidenav,
  .snackbar,
  .tile,
  .fab,
  .contact-row {
    transition: none;
  }

  .tile:hover,
  .fab:hover { transform: none; }
}

/* ==========================================================================
 * 19. Light-theme contrast corrections
 *
 * The palette was designed for gold-on-black. A few places use --gold-bright
 * (#F4C653) directly, which is legible on black but far too pale on white, so
 * the light theme steps those down to a darker gold. The toast keeps its dark
 * surface, so its text must stay light rather than inheriting the dark body
 * colour.
 * ========================================================================== */
[data-theme='light'] {
  --gold-deep: #8A6414;
}

[data-theme='light'] .brand__name,
[data-theme='light'] .sidenav__title,
[data-theme='light'] .topnav__link:hover,
[data-theme='light'] .topnav__link.is-active,
[data-theme='light'] .navbar__item.is-active,
[data-theme='light'] .navcell.is-active,
[data-theme='light'] .navdrop__label,
[data-theme='light'] .panel a,
[data-theme='light'] .sitefoot__list a:hover,
[data-theme='light'] .sitefoot__contact a:hover,
[data-theme='light'] .bill tr.is-total td {
  color: var(--gold-deep);
}

[data-theme='light'] .navbar__item.is-active svg,
[data-theme='light'] .navcell.is-active svg {
  color: var(--gold-deep);
}

/* The snackbar, the hero and the calculator rate strip stay dark in both
   themes, so their text must keep the *brighter* gold - the darkened
   --gold-heading above would be too low-contrast against black. */
[data-theme='light'] .snackbar,
[data-theme='light'] .snackbar__msg { color: #EDE7D8; }

[data-theme='light'] .rate-strip__value { color: #F5F5F5; }

[data-theme='light'] .rate-strip__label,
[data-theme='light'] .hero__sub span,
[data-theme='light'] .hero__tagline { color: #E2B75B; }