/* ============================================================
   Billing & Co — assets/site.css
   Shared design system: brand tokens, nav, mobile menu, footer,
   pill buttons, kicker / ghost-B / full-bleed photo sections,
   base reset & typography scale. Single source of truth — do not
   re-duplicate these rules into a page's own <style> block.
   Each page keeps only its page-specific CSS locally.
   ============================================================ */

/* ---- Reset & base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  /* Fixed nav: in-page anchor targets must land below it, not under it.
     --nav-h is defined on :root below — custom properties resolve at use
     time, so referencing it here on html is fine. */
  scroll-padding-top: var(--nav-h);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
:root {
  --dark: #202020;
  --dark2: #2A2A28;
  --cream: #fffef6;
  --cream2: #F7F4EA;
  --rev-body: #F5F3EC;
  --white: #FFFFFF;
  --text-dk: #1E1E1C;
  --text-md: #4A4A48;
  --text-lt: #888884;
  --gold: #B08D57;
  --gold-bright: #C6A265; /* kickers only — a lifted gold for legibility on dark/photo panels */
  --f-wordmark: "Playfair Display", Georgia, serif;
  --f-display: "Bodoni Moda", Georgia, serif;
  --f-body: "Montserrat", "Helvetica Neue", sans-serif;
  /* Type scale (2026-07-31 W6 scale-up round, made fluid after Manmeet's
     laptop review) — the ONLY sanctioned UI/body sizes. Sizes scale with the
     viewport: the lower bound lands around laptop widths (~1366-1440px), the
     upper bound on a 1920px screen. Nothing on the site may render below
     12px at ≥1366px except the footer copyright line. */
  --fs-label: 12px;                              /* section labels, uppercase micro-labels */
  --fs-ui: clamp(12px, 0.21vw + 9px, 13px);      /* nav links, buttons, footer links, small UI */
  --fs-meta: clamp(13px, 0.21vw + 10px, 14px);   /* secondary/meta text */
  --fs-body: clamp(15px, 0.21vw + 12px, 16px);   /* standard body copy */
  --fs-body-lg: clamp(16px, 0.21vw + 13px, 17px);/* lead body copy */
  /* Nav height + section padding scale the same way; every offset that
     references the nav must use var(--nav-h), never a literal. */
  --nav-h: clamp(64px, 3.33vw + 24px, 88px);
  --sec-pad: clamp(80px, 6.5vw, 124px);
}
body {
  background: var(--cream);
  color: var(--text-dk);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(16px, 0.21vw + 13px, 17px);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 3000;
  background: var(--dark);
  color: #fff;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  border-radius: 40px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

/* ---- Nav & mobile menu ---- */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--dark);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.nav-logo-img {
  /* The SVG viewBox is cropped tight to the lockup (W6 iter 3) — this height
     is the visible wordmark block itself, not a padded canvas. */
  height: clamp(40px, 1.46vw + 28px, 56px);
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  list-style: none;
}
.nav-links li {
  display: flex;
  align-items: center;
}
.nav-links a {
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 0 clamp(8px, 0.6vw, 11px);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: #fff;
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(255,255,255,0.6);
}
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--dark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#mobile-menu.open {
  display: flex;
}
.mobile-close {
  position: absolute;
  top: 9px;
  right: 13px;
  padding: 11px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 22px;
  cursor: pointer;
}
#mobile-menu ul {
  list-style: none;
}
#mobile-menu ul li a {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  line-height: 1.9;
  display: block;
  transition: color 0.2s;
}
#mobile-menu ul li a:hover {
  color: #fff;
}
.mobile-info {
  margin-top: 24px;
}
.mobile-info a:not(.btn-pill) {
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  display: block;
  padding: 13px 0;
}

/* ---- Pill buttons ---- */
.btn-pill {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 40px;
  background: transparent;
  color: #fff;
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-pill:hover {
  background: rgba(255,255,255,0.1);
}
.btn-pill-dk {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid var(--text-dk);
  border-radius: 40px;
  background: transparent;
  color: var(--text-dk);
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-pill-dk:hover {
  background: var(--text-dk);
  color: #fff;
}
.btn-pill-fill {
  display: inline-block;
  padding: 12px 36px;
  border: none;
  border-radius: 40px;
  background: var(--dark2);
  color: #fff;
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-pill-fill:hover {
  background: #3A3A38;
}

/* ---- Form fields (shared: dark-section forms, light-section forms, single-field notify rows) ---- */
.f-field { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); color: #fff; font-family: var(--f-body); font-size: 16px; padding: 10px 0; margin-bottom: 22px; width: 100%; outline: none; display: block; transition: border-color 0.2s; border-radius: 0; }
.f-field::placeholder { color: rgba(255,255,255,0.35); }
.f-field:focus { border-bottom-color: var(--gold); }
select.f-field { -webkit-appearance: none; cursor: pointer; }
select.f-field option { background: var(--dark); color: #fff; }
textarea.f-field { resize: vertical; min-height: 72px; }
.wf-field { background: transparent; border: none; border-bottom: 1px solid var(--text-md); color: var(--text-dk); font-family: var(--f-body); font-size: 16px; padding: 10px 0; width: 100%; outline: none; display: block; transition: border-color 0.2s; border-radius: 0; }
.wf-field::placeholder { color: var(--text-lt); }
.wf-field:focus { border-bottom-color: var(--gold); }
select.wf-field { -webkit-appearance: none; cursor: pointer; }
textarea.wf-field { resize: vertical; min-height: 60px; }
.notify-row { display: flex; max-width: 380px; margin: 0 auto; gap: 16px; flex-wrap: wrap; }
.notify-row input { flex: 1; min-width: 180px; background: transparent; border: none; border-bottom: 1px solid var(--text-md); color: var(--text-dk); font-family: var(--f-body); font-size: 16px; padding: 10px 0; outline: none; transition: border-color 0.2s; }
.notify-row input:focus { border-bottom-color: var(--gold); }
.notify-row input::placeholder { color: var(--text-lt); }
.notify-row.dark input { border-bottom-color: rgba(255,255,255,0.3); color: #fff; }
.notify-row.dark input::placeholder { color: rgba(255,255,255,0.4); }
.notify-row button { flex-shrink: 0; }
@media (max-width: 768px) {
  .notify-row { flex-direction: column; gap: 12px; }
}

/* ---- Ampersand glyph match (logo uses Playfair Display for its &) ---- */
.amp-serif {
  font-family: var(--f-wordmark);
  font-weight: 700;
}

/* ---- Kicker / ghost-B / full-bleed photo sections ---- */
.kicker {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(13px, 0.21vw + 10px, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 16px;
  display: block;
}
.ghost-b {
  position: absolute;
  right: -0.05em;
  bottom: -0.02em;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(150px, 20vw, 280px);
  line-height: 1;
  color: rgba(255,255,255,0.035);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ghost-b-panel {
  position: relative;
  overflow: hidden;
}
.photo-section {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: var(--sec-pad) 60px;
  text-align: center;
  overflow: hidden;
}
.photo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20,20,20,.55), rgba(20,20,20,.7));
}
.photo-section > * {
  position: relative;
  z-index: 1;
}
.photo-section .h-display {
  color: #fff;
}
.photo-body {
  font-family: var(--f-body);
  font-size: var(--fs-body-lg);
  color: var(--rev-body);
  line-height: 1.85;
  max-width: 680px;
  margin: 0 auto;
}
.h-display {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-optical-sizing: auto;
  line-height: 1.15;
  color: #fff;
}

/* ---- Footer ---- */
#site-footer {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 56px 60px 0;
}
.footer-top {
  /* W7 iter 2 (Manmeet): address details live inside the brand column
     (under the tagline, socials underneath them) — 3 columns, not 4 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* 6 Aug (Manmeet, 6th pass): plain 1fr tracks (same bug as the
     footer-details fix earlier) let one column's content push its track
     wider than its fair third, so the 480px caps on columns 2 and 3
     weren't landing on equal-width tracks — one was binding, one wasn't.
     minmax(0,1fr) forces genuinely equal thirds regardless of content,
     so both 480px-capped columns now sit on identical tracks. */
  align-items: start;
}
.footer-brand {
  text-align: center;
}
.footer-logo-img {
  /* width-capped so it can never spill out of its grid column */
  width: min(310px, 100%);
  height: auto;
  display: block;
  margin: 0 auto 18px;
}
.footer-tagline {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 16px;
}
.footer-details {
  /* brand-column address block (W7 iter 2) — centred like the rest of
     the column; the socials row sits below it. 6 Aug (Manmeet): Address,
     Phone Number and Email now sit in one row of 3 sub-columns instead
     of Phone+Email stacking in a shared second column — each sub-column
     holds exactly one label + value pair, so the first-child margin
     reset below now applies uniformly to all three.
     6 Aug follow-up: plain `1fr` tracks default to minmax(auto,1fr) —
     "auto" resolves to the content's min-content size, so an unbreakable
     string (the email address) was forcing its track wider than its fair
     third, pushing the other two out of alignment and causing awkward
     mid-word wraps. minmax(0,1fr) lets every track actually hold to an
     even third and wrap its own content within it. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 10px;
  text-align: center;
  margin: 30px 0 26px;
}
.footer-details .footer-col-h {
  margin: 26px 0 8px;
  /* the shared .footer-col-h letter-spacing (0.3em) was tuned for the
     roomier Address/Phone/Email columns further down this same footer —
     too wide for "PHONE NUMBER" to fit this narrower brand column
     without wrapping mid-word. */
  letter-spacing: 0.15em;
}
.footer-details .footer-col-h:first-child {
  margin-top: 0;
}
.footer-details .footer-addr a {
  padding: 0;
}
.footer-social {
  display: flex;
  gap: 2px;
  justify-content: center;
}
.footer-social a {
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
}
.footer-social a:hover {
  color: rgba(255,255,255,0.8);
}
.footer-col-h {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
  display: block;
}
.footer-addr {
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  color: rgba(255,255,255,0.65);
  line-height: 1.9;
  font-style: normal;
  /* the email address is one unbroken string — without this it forces
     its grid track wider than its fair third instead of wrapping. */
  overflow-wrap: break-word;
}
.footer-addr a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
  padding: 6px 0;
}
.footer-addr a:hover {
  color: #fff;
}
.footer-nav-list {
  list-style: none;
}
.footer-nav-list li {
  margin-bottom: 0;
}
.footer-nav-list a {
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  padding: 7px 0;
}
.footer-nav-list a:hover {
  color: rgba(255,255,255,0.85);
}
.footer-nl-text {
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 22px;
}
.footer-top > div:last-child {
  /* newsletter column has no class of its own in the HTML (bare <div>) —
     same width:min() pattern as .footer-contact (see note there). */
  width: min(480px, 100%);
  margin: 0 auto;
}
.nl-label {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 8px;
}
.nl-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: var(--f-body);
  font-size: var(--fs-meta);
  padding: 8px 0;
  width: 100%;
  outline: none;
  margin-bottom: 18px;
  display: block;
}
.nl-input::placeholder {
  color: rgba(255,255,255,0.35);
}
.nl-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 40px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nl-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
#nl-ok {
  display: none;
  font-family: var(--f-display);
  font-size: 15px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  margin-top: 12px;
}
.footer-bottom {
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  list-style: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.footer-bottom-nav a {
  font-family: var(--f-body);
  font-size: var(--fs-ui);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  padding: 10px 18px;
  transition: color 0.2s;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
}
.footer-bottom-nav a:hover {
  color: rgba(255,255,255,0.75);
}
.footer-bottom-nav li:last-child a {
  border-right: none;
}
/* Footer contact form (W6 iter 5 — replaces the duplicated Pages column;
   the centred bottom nav row carries the page links) */
.footer-contact {
  /* 6 Aug (Manmeet, 7th pass): switched from max-width+margin:auto to an
     explicit width:min() — removes an edge case where max-width + auto
     margins wasn't resolving consistently, which was the actual cause of
     columns 2 and 3 rendering at different widths. Confirmed fixed via
     diagnostic outlines (both boxes measured equal), now removed. */
  width: min(480px, 100%);
  margin: 0 auto;
}
.footer-contact .footer-col-h {
  /* Manmeet, 6 Aug (revised): match the "Stay informed with the latest
     listings..." paragraph text (.footer-nl-text) exactly — same font
     size, weight and colour, no uppercase treatment, no heavy letter-
     spacing — rather than reading as a small grey micro-label next to a
     full paragraph of body text opposite it. */
  text-transform: none;
  font-size: var(--fs-ui);
  font-weight: 400;
  letter-spacing: normal;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.footer-contact .f-field { margin-bottom: 6px; padding: 2px 0; font-size: 13px; line-height: 1.3; }
.footer-contact textarea.f-field { min-height: 28px; }
.footer-contact .f-submit {
  /* Manmeet, 6 Aug: match the Subscribe button (nl-btn) exactly — filled
     pill, no border, full width — instead of the outlined ghost-button
     style .f-submit uses elsewhere, which looked visually lighter/smaller
     next to Subscribe. */
  margin-top: 2px;
  width: 100%;
  padding: 12px;
  border: none;
  background: rgba(255,255,255,0.12);
  letter-spacing: 0.12em;
}
.footer-contact .f-submit:hover {
  background: rgba(255,255,255,0.2);
}
#footer-form-ok {
  display: none;
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: 16px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
}
.footer-copyright {
  /* © line — the one sanctioned sub-11px size on the site */
  font-family: var(--f-body);
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  letter-spacing: 0.06em;
}
.footer-copyright .amp-serif {
  /* Playfair's ornate ampersand glyph doesn't hold up at 10px — the one
     sanctioned sub-12px text on the site (Manmeet, 6 Aug: reads as a
     blur/broken shape here). Revert to the surrounding Montserrat in
     this one spot only; every other "&" instance (kickers, about-strip
     copy, nav/footer logo) stays matched to the logo per the 3 Aug rule
     — those sizes are large enough to hold the glyph. */
  font-family: inherit;
  font-weight: inherit;
}

/* ---- Shared responsive blocks ----
   Order matters: 1100px block must precede the 768px block below, since
   both set .footer-top and narrower must win the cascade at narrow
   widths (matches every page's original source order). */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-details {
    /* 6 Aug (Manmeet, mobile/tablet audit): 3 columns with no override here
       meant Address/Phone/Email squeezed into ~100px each on every phone
       and most tablets (anywhere footer-top itself has already compressed)
       — the same wrapping problem fixed for wide desktop tracks earlier
       today, just triggered by narrow width instead. Stack to one column
       at the same breakpoint footer-top already compresses at. */
    grid-template-columns: 1fr;
  }
  .footer-details .footer-col-h {
    /* Manmeet, 6 Aug (2nd pass): confirmed the 36px bump was live but too
       subtle to read as "more space" next to the address block's own
       generous line-height right beside it. Going much more assertive. */
    margin-top: 56px;
  }
  .hamburger {
    display: flex !important;
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 768px) {
  .ghost-b {
    font-size: clamp(90px, 26vw, 160px);
  }
  .photo-section {
    padding: 64px 24px;
  }
  #main-nav {
    padding: 0 20px;
  }
  #site-footer {
    padding: 48px 24px 0;
  }
  .footer-bottom-nav {
    gap: 0;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
}

/* ---- Testimonials slider (shared: index, services, about, worth) ---- */
#testimonials { background: var(--dark); padding: var(--sec-pad) 60px; text-align: center; }
.testi-h { font-family: var(--f-display); font-size: clamp(36px, 2.5vw + 16px, 58px); font-weight: 500; letter-spacing: 0.03em; font-optical-sizing: auto; color: #fff; margin-bottom: 52px; }
.testi-wrap { position: relative; max-width: 1080px; margin: 0 auto; }
.testi-slider { overflow: hidden; }
.testi-track { display: grid; }
.testi-item { grid-area: 1 / 1; padding: 0 28px; opacity: 0; transition: opacity 1s ease; }
.testi-item.active { opacity: 1; }
.testi-name { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 18px; display: block; }
.testi-quote { font-family: var(--f-display); font-size: clamp(19px, 0.42vw + 13px, 21px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.8); line-height: 1.65; }
.t-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.35); font-size: 26px; padding: 8px 14px; transition: color 0.2s; }
.t-arrow:hover { color: rgba(255,255,255,0.75); }
.t-arrow.prev { left: -44px; }
.t-arrow.next { right: -44px; }
.testi-dots { margin-top: 36px; display: flex; justify-content: center; gap: 8px; }
.t-dot { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.t-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; transition: background 0.2s, border-color 0.2s; }
.t-dot.active::before { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.55); }

/* ---- Listing cards (shared: index, buy — server data rendered by JS) ---- */
#listings { background: var(--dark2); padding: var(--sec-pad) 60px; text-align: center; }
.listings-h { font-family: var(--f-display); font-size: clamp(36px, 2.5vw + 16px, 58px); font-weight: 500; letter-spacing: 0.03em; font-optical-sizing: auto; color: #fff; margin-bottom: 6px; }
.listings-sub { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 40px; display: block; }
.listing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; text-align: left; margin-bottom: 40px; max-width: 1240px; margin-left: auto; margin-right: auto; }
.listing-grid:has(> .listing-card:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.listing-grid:has(> .listing-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.listing-card { background: #333330; overflow: hidden; display: block; text-decoration: none; color: inherit; }
a.listing-card { cursor: pointer; }
a.listing-card:hover .listing-link { color: #fff; }
.listing-photo { width: 100%; aspect-ratio: 4/3; background: #2C2C2A; display: flex; align-items: center; justify-content: center; font-family: var(--f-body); font-size: var(--fs-label); color: rgba(255,255,255,0.25); letter-spacing: 0.12em; text-transform: uppercase; overflow: hidden; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-body { padding: 18px 18px 22px; }
.listing-suburb { font-family: var(--f-body); font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 5px; display: block; }
.listing-address { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: 0.03em; font-optical-sizing: auto; color: #fff; line-height: 1.2; margin-bottom: 6px; }
.listing-price { font-family: var(--f-body); font-size: 15px; color: rgba(255,255,255,0.75); margin-bottom: 10px; }
.listing-features { display: flex; gap: 14px; font-family: var(--f-body); font-size: var(--fs-meta); color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.listing-link { font-family: var(--f-body); font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.listing-link:hover { color: #fff; }
button.listing-link { background: none; border: none; padding: 0; margin: 0; display: inline-block; cursor: pointer; }
@keyframes pulse { 0%,100%{opacity:.3}50%{opacity:.55} }
.skeleton { background: #333330; animation: pulse 1.5s ease-in-out infinite; }
.skeleton-card { background: #2E2E2C; overflow: hidden; }
.skeleton-photo { width: 100%; aspect-ratio: 4/3; }
.skeleton-body { padding: 18px; }
.skeleton-line { height: 10px; margin-bottom: 10px; border-radius: 2px; }
.no-listings { padding: 60px 0; grid-column: 1/-1; text-align: center; }
.no-listings p { font-family: var(--f-display); font-size: 22px; font-weight: 400; font-style: italic; color: rgba(255,255,255,0.6); margin-bottom: 20px; }

/* ---- Contact block (shared: index #contact section, contact.html) ---- */
/* section# so the footer's id="contact" anchor target (index) doesn't inherit
   section padding */
section#contact { background: var(--dark); padding: var(--sec-pad) 60px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 1140px; margin: 0 auto; }
.contact-h { font-family: var(--f-display); font-size: 40px; font-weight: 500; letter-spacing: 0.03em; font-optical-sizing: auto; color: #fff; margin-bottom: 20px; }
.contact-note { font-family: var(--f-body); font-size: var(--fs-body); color: rgba(255,255,255,0.7); line-height: 1.75; margin-bottom: 28px; }
.f-label { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: block; margin-bottom: 6px; }
.f-submit { background: transparent; border: 1px solid rgba(255,255,255,0.45); border-radius: 40px; color: #fff; font-family: var(--f-body); font-size: var(--fs-ui); letter-spacing: 0.08em; padding: 12px 36px; cursor: pointer; width: 100%; margin-top: 6px; transition: background 0.2s; }
.f-submit:hover { background: rgba(255,255,255,0.08); }
#form-ok { display: none; margin-top: 18px; font-family: var(--f-display); font-size: 18px; font-style: italic; color: rgba(255,255,255,0.7); }
.ci-label { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; display: block; margin-top: 22px; }
.ci-label:first-child { margin-top: 0; }
.ci-val { font-family: var(--f-body); font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.75; }
.ci-val a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.ci-val a:hover { color: #fff; }
.ci-socials { display: flex; gap: 2px; margin-top: 6px; margin-left: -11px; }
.ci-socials a { color: rgba(255,255,255,0.5); transition: color 0.2s; display: flex; align-items: center; padding: 11px; }
.ci-socials a:hover { color: rgba(255,255,255,0.8); }

/* ---- 2×2 photo grids (shared: index about/services grids, services.html) ---- */
.about-photo-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 1;
}
/* Column-alignment rule (2026-07-31 W6): in side-by-side layouts the photo
   grid stretches to the full height of its text column — no dead space
   under the photos. The square aspect-ratio only applies when stacked. */
@media (min-width: 769px) {
  .about-inner { align-items: stretch; }
  .about-inner .about-photo-grid { aspect-ratio: auto; height: 100%; }
}
.ph-cell, .ph-cell-lt {
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase;
  min-height: 120px;
}
.ph-cell { background: #333330; color: rgba(255,255,255,0.25); }
.ph-cell-lt { background: var(--cream2); color: var(--text-lt); }
.ph-cell img, .ph-cell-lt img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Blog cards (shared: index teasers, blog.html, article "related" grids) ---- */
.blog-card { cursor: pointer; text-decoration: none; display: block; }
.blog-img-wrap { width: 100%; aspect-ratio: 3/2.2; overflow: hidden; position: relative; background: var(--cream2); }
.blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-img-ph { width: 100%; height: 100%; min-height: 140px; display: flex; align-items: center; justify-content: center; font-family: var(--f-body); font-size: var(--fs-label); color: var(--text-lt); letter-spacing: 0.12em; text-transform: uppercase; }
.blog-cat-box { background: var(--cream); border: 1px solid var(--cream2); padding: 8px 12px; }
.blog-cat { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-md); }
.blog-title { font-family: var(--f-body); font-size: 15px; font-weight: 400; color: var(--text-dk); line-height: 1.5; margin-top: 4px; }

@media (max-width: 768px) {
  #testimonials { padding: 64px 24px; }
  .t-arrow.prev { left: -8px; }
  .t-arrow.next { right: -8px; }
  #listings { padding: 64px 24px; }
  .listing-grid { grid-template-columns: 1fr; }
  section#contact { padding: 64px 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- Reveal-on-scroll (subtle fade + translate; JS adds .reveal/.in-view) ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Blog article hero image (shared across all 5 article pages) ---- */
.article-hero-img {
  max-width: 720px;
  width: 100%;
  margin: 32px auto 0;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.article-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- HOTFIX 2026-07-31: stacked crossfade slides intercept clicks ----
   Slider patterns stack every slide with position:absolute and fade with
   opacity; without pointer-events:none the topmost INVISIBLE slide still
   receives clicks, so visible CTAs (e.g. hero "Book an Appraisal") were
   dead or jumped to the wrong target. Inactive slides must never receive
   pointer events. Lives in the shared stylesheet so every page using the
   .slide / .testi-item pattern is covered. */
.slide {
  pointer-events: none;
}
.slide.active {
  pointer-events: auto;
}
.testi-item {
  pointer-events: none;
}
.testi-item.active {
  pointer-events: auto;
}