/* House-Proud Property Developments — site stylesheet
   Brand: orange #FF850C + near-black, Rubik headings, Varela Round body
   (matches the House-Proud logo). Plain CSS, no build step. */

/* Fonts are loaded via <link> tags in each page head (preconnect + stylesheet). */

/* ---------- Self-hosted fonts (was Google Fonts; removed the
   render-blocking third-party request — latin subset only) ---------- */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/rubik-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/rubik-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/rubik-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/varela-round-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #3a3a3a;            /* body text (from existing brand) */
  --ink-soft: #6f6a64;       /* secondary text */
  --dark: #1b1917;           /* headings / dark bands */
  --darker: #131211;         /* footer */
  --orange: #ff850c;         /* brand orange */
  --orange-deep: #e57200;    /* hover / borders */
  --orange-text: #b35400;    /* text links: 5.0:1 on white, 4.7:1 on cream (WCAG AA) */
  --orange-text-hover: #9a4800; /* darker on hover; 6.4:1 — hover text must pass AA too */
  --bg: #ffffff;
  --bg-soft: #faf7f3;        /* warm off-white */
  --line: #ece7e0;
  --shadow: 0 2px 12px rgba(27, 25, 23, 0.07);
  --shadow-lift: 0 10px 28px rgba(27, 25, 23, 0.13);
  --radius: 14px;
  --heading: "Rubik", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --body: "Varela Round", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 68ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg-soft);
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3, h4 { font-family: var(--heading); font-weight: 700; color: var(--dark); line-height: 1.18; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.05rem); margin-bottom: 0.55em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: 0.55em; }
h3 { font-size: 1.25rem; margin-bottom: 0.45em; }

p, ul, ol { margin-bottom: 1em; }
a { color: var(--orange-text); transition: color 0.15s ease; }
a:hover { color: var(--orange-text-hover); }
strong { color: var(--dark); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 780px; }

/* ---------- Header / nav ---------- */

.site-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.6rem 1.25rem; max-width: 1120px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand img { height: 56px; width: auto; }
/* Two-line wordmark matching the logo artwork: "House-Proud" in brand orange
   over "Property Developments" in black, both in the heading face. The icon
   is decorative (alt=""), so this text is the logo link's accessible name.

   Shown at EVERY width. On desktop it sits directly beside the icon, reading
   as one lockup. From tablet down it centres in the gap between the icon and
   the menu button. It used to be hidden on desktop because the nav ate the
   width; the nav gap and the call button were tightened to make room. */
.brand-name {
  font-family: var(--heading); font-weight: 700; line-height: 1;
  display: flex; flex-direction: column; gap: 0.16em;
  white-space: nowrap;
}
.brand-name-main {
  display: block; color: var(--orange);
  letter-spacing: -0.01em; font-size: 1.15rem;
}
.brand-name-sub {
  display: block; color: var(--dark);
  font-size: 0.55rem; letter-spacing: 0.055em;
}

@media (max-width: 1180px) {
  /* Let the brand fill the bar so the wordmark can centre in the space
     between the icon and the buttons. Font sizes are FLUID (clamp) so the
     wordmark shrinks with the screen instead of colliding with the phone
     button — fixed sizes overlapped it on ~360px phones. */
  .brand { flex: 1; min-width: 0; }
  .brand-name { flex: 1; align-items: center; justify-content: center; min-width: 0; }
  .brand-name-main { font-size: clamp(0.7rem, 3.6vw, 1.3rem); }
  .brand-name-sub  { font-size: clamp(0.33rem, 1.65vw, 0.6rem); letter-spacing: 0.04em; }
}
@media (max-width: 340px) {
  /* Very narrow phones (old iPhone SE class): the 56px icon is the biggest
     fixed cost in the bar — shrink it before the wordmark has to vanish. */
  .brand img { height: 44px; }
  .header-inner { gap: 0.6rem; }
}

/* "Call" pill next to the hamburger. Only from tablet down: on those
   widths the Call Peter button lives inside the closed menu, and the flyer
   audience — often older, often on a phone — must never have to hunt for a
   number. Desktop keeps the in-nav button. */
.nav-phone { display: none; }
@media (max-width: 1180px) {
  .nav-phone {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    background: var(--orange); color: var(--dark); text-decoration: none;
    box-shadow: 0 2px 8px rgba(255, 133, 12, 0.35);
  }
  .nav-phone svg { width: 21px; height: 21px; }
}

/* Menu button. A real <button> so it's keyboard-operable and can report its
   open/closed state to screen readers via aria-expanded. */
.nav-toggle-btn {
  display: none; cursor: pointer; padding: 0.55rem; background: none;
  border: 0; border-radius: 6px; line-height: 0;
}
.nav-toggle-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 24px; height: 3px; background: var(--dark);
  border-radius: 3px; position: relative; content: "";
}
.nav-toggle-bars::before { position: absolute; top: -7px; }
.nav-toggle-bars::after  { position: absolute; top: 7px; }

/* Visible only to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard users can jump straight past the nav. */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  background: var(--orange); color: var(--dark); font-family: var(--heading);
  font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 0 0 8px 8px;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: var(--dark); }

/* Anchor targets clear the sticky header instead of hiding behind it. */
[id] { scroll-margin-top: 6rem; }

.site-nav ul { display: flex; gap: 1rem; list-style: none; align-items: center; margin: 0; }
/* The call button is the widest thing in the nav. On desktop it rests as
   "Call Peter" so the wordmark has room; on hover or keyboard focus the label
   swaps to the phone number, so people who want to dial by hand can read it.
   A swap (not an append) because the widths are nearly equal — appending the
   number widened the button ~120px and wrapped the nav onto two lines.
   The number is always in the accessible name and the tel: href, and both
   parts show together from tablet down. */
.nav-cta { white-space: nowrap; }
.nav-cta-label, .nav-cta-num {
  display: inline-block; overflow: hidden;
  vertical-align: bottom; white-space: nowrap;
}
/* Default (tablet and phone, where the menu is a dropdown with room to
   spare): name and number both shown, joined by an em dash. */
.nav-cta-num::before { content: "\00A0\2014\00A0"; }

/* Desktop only: the button rests as "Call Peter" and reveals the number on
   hover or keyboard focus. The two texts are STACKED in one grid cell and
   cross-faded by opacity — the button is sized to the wider (the number) and
   never changes width. An earlier version animated max-width, which resized
   the button on hover; at the button's edge that produced a hover/un-hover
   feedback loop (enter → grow → cursor now outside → leave → shrink → repeat).
   Opacity-only has zero layout change, so there is nothing to flicker.

   Scoped inside min-width, NOT overridden in a max-width block: the hover
   selectors carry three classes and would beat a one-class override on
   specificity, which is how the swap once leaked onto tablet. */
@media (min-width: 1181px) {
  .nav-cta { display: inline-grid; justify-items: center; }
  .nav-cta-label, .nav-cta-num {
    grid-area: 1 / 1; transition: opacity 0.2s ease;
  }
  .nav-cta-num { opacity: 0; }
  .nav-cta-num::before { content: none; }
  .nav-cta:hover .nav-cta-label,
  .nav-cta:focus-visible .nav-cta-label { opacity: 0; }
  .nav-cta:hover .nav-cta-num,
  .nav-cta:focus-visible .nav-cta-num { opacity: 1; }
}

.site-nav a {
  text-decoration: none; color: var(--ink); font-family: var(--heading); font-weight: 500;
  white-space: nowrap;
  font-size: 0.97rem; padding: 0.35rem 0; border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover { color: var(--dark); border-bottom-color: var(--orange); }
.site-nav a[aria-current="page"] { color: var(--dark); border-bottom-color: var(--orange); }
.site-nav .nav-cta {
  background: var(--orange); color: var(--dark); padding: 0.55rem 1.15rem;
  border-radius: 999px; border-bottom: none; font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 133, 12, 0.35);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.site-nav .nav-cta:hover { background: var(--orange-deep); color: var(--dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 133, 12, 0.4); }

@media (max-width: 1180px) {
  .nav-toggle-btn { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    display: none; box-shadow: var(--shadow-lift);
  }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  .site-nav li { width: 100%; text-align: center; }
  .site-nav a { display: block; padding: 0.85rem 1rem; border-bottom: none; }
  .site-nav .nav-cta { margin: 0.6rem auto; display: inline-block; }
  .nav-toggle-btn[aria-expanded="true"] ~ .site-nav { display: block; }
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(150deg, #211d1a 0%, #2e2823 60%, #3a2f24 100%);
  color: #efeae3; padding: 5rem 0 4.5rem;
  position: relative;
}
/* Photo heroes. The scrim is directional: dark where the text sits, clearing
   to the right so the photograph is actually visible. --hero-img swaps the
   picture per page. */
.hero-photo {
  --hero-img: url("/assets/img/hero-home.jpg");
  background-image:
    linear-gradient(100deg, rgba(19, 16, 13, 0.90) 0%, rgba(19, 16, 13, 0.68) 42%, rgba(19, 16, 13, 0.18) 100%),
    var(--hero-img);
  background-position: center center, center 46%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  padding: 6.5rem 0 6rem;
}
.hero-sell    { --hero-img: url("/assets/img/hero-sell.jpg"); }
.hero-partner { --hero-img: url("/assets/img/hero-partner.jpg"); }

/* Narrow screens: text spans the full width, so the scrim has to be even. */
@media (max-width: 900px) {
  .hero-photo {
    background-image:
      linear-gradient(180deg, rgba(19, 16, 13, 0.86) 0%, rgba(19, 16, 13, 0.78) 55%, rgba(19, 16, 13, 0.70) 100%),
      var(--hero-img);
    padding: 3.25rem 0 3rem;
  }
}

/* Phones get portrait crops. A tall, narrow hero box would otherwise force
   `cover` to blow a landscape photo up and show only a sliver of it. */
@media (max-width: 700px) {
  .hero-photo   { --hero-img: url("/assets/img/hero-home-mobile.jpg"); }
  .hero-sell    { --hero-img: url("/assets/img/hero-sell-mobile.jpg"); }
  .hero-partner { --hero-img: url("/assets/img/hero-partner-mobile.jpg"); }
  .hero-photo { background-position: center center, center center; }
}
.hero h1 { color: #ffffff; max-width: 21ch; }
.hero p.lead { font-size: 1.2rem; max-width: 54ch; color: #ddd5cb; margin-bottom: 1.7rem; }
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-start; }
.hero-note { font-size: 0.92rem; color: #b5aca1; margin-top: 1.2rem; }
.hero-phone { margin-top: 1rem; color: #fff; }
.hero-phone a { color: #fff; font-weight: 700; text-decoration: underline; }
.hero-phone a:hover { color: var(--orange); }
.hero .kicker { color: var(--orange); }

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

.btn {
  display: inline-block; text-decoration: none; font-family: var(--heading); font-weight: 600;
  padding: 0.8rem 1.6rem; border-radius: 999px; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--orange); color: var(--dark);
  box-shadow: 0 3px 10px rgba(255, 133, 12, 0.35);
}
.btn-primary:hover { background: var(--orange-deep); color: var(--dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 133, 12, 0.42); }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-secondary:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-outline { background: transparent; color: var(--dark); border-color: var(--orange); }
.btn-outline:hover { background: var(--orange); color: var(--dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 133, 12, 0.3); }

/* ---------- Sections ---------- */

.section { padding: 4rem 0; }
.section-alt { background: #f3ede3; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-green { background: linear-gradient(150deg, #1e1b18 0%, #292420 100%); color: #ded7cd; }
.section-green h2 { color: #ffffff; }
.section-green a { color: #ffb469; }
.kicker {
  font-family: var(--heading); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.8rem; font-weight: 600; color: var(--orange-text); margin-bottom: 0.6rem;
}
.section-green .kicker { color: var(--orange); }

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

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card h3 { margin-top: 0.2rem; }

.project-card { overflow: hidden; padding: 0; }
.project-card .project-img { background: #f1ece5; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.project-card .project-img img { width: 100%; height: 100%; object-fit: cover; }
.project-card .project-body { padding: 1.25rem 1.5rem 1.6rem; }
.project-card .project-suburb { font-family: var(--heading); font-weight: 700; font-size: 1.15rem; color: var(--dark); margin: 0; }

/* ---------- Badges / stats / testimonials ---------- */

.badge {
  display: inline-block; font-family: var(--heading); font-weight: 600;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.22rem 0.7rem; border-radius: 999px; vertical-align: middle;
}
.badge-done { background: var(--orange); color: var(--dark); }
.badge-progress { background: transparent; color: var(--orange-text); border: 1.5px solid var(--orange); }

.stats-band { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 1.6rem 0 0.5rem; }
.stat .stat-num { font-family: var(--heading); font-weight: 700; font-size: 2.3rem; color: var(--dark); line-height: 1.1; }
.stat .stat-num em { font-style: normal; color: var(--orange); }
.stat .stat-label { font-size: 0.92rem; color: var(--ink-soft); }

.testimonial {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow); position: relative;
}
/* Oversized opening quote mark as a decorative flourish, top-left of the card.
   It reads as an icon rather than punctuation, so it needs no closing mark. */
.testimonial::before {
  content: "\201C"; font-family: var(--heading); font-size: 3.2rem; line-height: 1;
  color: var(--orange); position: absolute; top: 0.7rem; left: 1.3rem;
}
.testimonial blockquote { margin: 1.6rem 0 1rem; font-size: 0.99rem; }
.testimonial cite { font-family: var(--heading); font-style: normal; font-weight: 600; color: var(--dark); font-size: 0.95rem; }
.testimonial .cite-role { display: block; font-family: var(--body); font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }

.portrait-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); }
.portrait-frame img { width: 100%; display: block; }
.portrait-caption { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* Contact page: a face beside "Talk to Peter", so the promise that a real
   person answers is backed by the person. */
.contact-intro { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.contact-intro h1 { margin-bottom: 0.35em; }
.contact-intro .lead { max-width: 56ch; margin-bottom: 0.4rem; }
/* Branded frame: a thin orange ring with a short black arc at the lower right,
   echoing the arcs in the logo, then a white mat before the photograph.
   Built in CSS so the original photo is never altered. */
.contact-portrait-frame {
  display: block; box-sizing: border-box; flex-shrink: 0;
  width: 150px; height: 150px; padding: 8px; border-radius: 50%;
  position: relative;
  background: conic-gradient(
    var(--orange) 0deg 110deg,
    var(--dark) 110deg 170deg,
    var(--orange) 170deg 360deg);
  box-shadow: 0 8px 22px rgba(20, 17, 14, 0.12);
}
.contact-portrait-frame::before {   /* white mat inside the ring */
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff;
}
.contact-portrait {
  position: relative; display: block;
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
@media (max-width: 700px) {
  .contact-intro { gap: 1.1rem; }
  .contact-portrait-frame { width: 112px; height: 112px; padding: 6px; }
  .contact-portrait-frame::before { inset: 2.5px; }
}

/* ---------- Steps ---------- */

.steps { list-style: none; counter-reset: step; display: grid; gap: 1.4rem; }
.steps li { counter-increment: step; display: flex; gap: 1.15rem; align-items: flex-start; }
.steps li::before {
  content: counter(step);
  font-family: var(--heading); font-weight: 700; font-size: 1.15rem;
  background: var(--orange); color: var(--dark);
  min-width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 0.15rem;
  box-shadow: 0 3px 8px rgba(255, 133, 12, 0.35);
}

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

.faq details {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.35rem; margin-bottom: 0.8rem;
  transition: border-color 0.15s ease;
}
.faq details:hover { border-color: var(--orange); }
.faq summary {
  font-family: var(--heading); font-weight: 600; color: var(--dark); cursor: pointer; font-size: 1.05rem;
}
.faq summary::marker { color: var(--orange); }
.faq details[open] summary { margin-bottom: 0.6rem; }

/* ---------- Forms ---------- */

.lead-form {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-lift); max-width: 620px;
  border-top: 4px solid var(--orange);
}
.lead-form label { display: block; font-family: var(--heading); font-weight: 500; color: var(--dark); margin-bottom: 0.3rem; margin-top: 1rem; font-size: 0.95rem; }
.lead-form label:first-of-type { margin-top: 0; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; padding: 0.72rem 0.9rem; font-size: 1rem; font-family: var(--body);
  border: 1.5px solid #ddd6cc; border-radius: 8px; background: var(--bg-soft); color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--orange); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(255, 133, 12, 0.18);
}
.lead-form button { margin-top: 1.4rem; width: 100%; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.8rem; margin-bottom: 0; text-align: center; }

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

.callout {
  border-left: 4px solid var(--orange); background: var(--bg);
  padding: 1.1rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0;
  box-shadow: var(--shadow);
}
.placeholder-slot {
  border: 2px dashed #d8cfc2; border-radius: var(--radius); padding: 1.5rem;
  color: var(--ink-soft); font-size: 0.95rem; background: rgba(255, 255, 255, 0.65);
}

/* ---------- Article pages ---------- */

.article-header { padding: 3.2rem 0 1.5rem; }
.article-meta { color: var(--ink-soft); font-size: 0.92rem; }
.article-body { max-width: var(--measure); }
.article-body h2 { margin-top: 2.1rem; }
.article-body h3 { margin-top: 1.5rem; }
.article-body table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.98rem; background: var(--bg); }
.article-body .table-scroll { overflow-x: auto; margin: 1.2rem 0; border-radius: 8px; -webkit-overflow-scrolling: touch; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 0.6rem 0.85rem; text-align: left; }
.article-body th { background: #fff3e6; font-family: var(--heading); font-weight: 600; color: var(--dark); }
.sources { font-size: 0.9rem; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.2rem; }
.sources ul { list-style: none; }
.sources li { margin-bottom: 0.35rem; }

.article-list { list-style: none; display: grid; gap: 1.2rem; }
.article-list .card h3 a { text-decoration: none; color: var(--dark); }
.article-list .card h3 a:hover { color: var(--orange-text); }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; padding: 4rem 0; }
.cta-band h2 { max-width: 26ch; margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.5rem; }
.cta-band .phone-line { margin-top: 1.2rem; font-size: 1.05rem; }
.cta-band .phone-line a { color: #fff; font-family: var(--heading); font-weight: 700; }
.cta-band .phone-line a:hover { color: var(--orange); }

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

.site-footer { background: var(--darker); color: #a89f93; padding: 3.2rem 0 2rem; font-size: 0.93rem; }
.site-footer a { color: #d8d0c5; text-decoration: none; transition: color 0.15s ease; }
/* Links inside footer prose must not rely on colour alone (WCAG 1.4.1).
   Nav-style link lists are exempt; inline links are not. */
.site-footer p a, .footer-legal a { text-decoration: underline; }
.site-footer a:hover { color: var(--orange); text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-family: var(--heading); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.45rem; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.2rem; font-size: 0.83rem; color: #948c80; }

/* ---------- Utilities ---------- */

.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.muted { color: var(--ink-soft); }
.phone-strong { display: inline-block; padding: 0.3rem 0; font-family: var(--heading); font-size: 1.3rem; font-weight: 700; color: var(--dark); text-decoration: none; }
.phone-strong:hover { color: var(--orange-text); }