:root {
  /* Core palette (only three colours allowed) */
  --ink:        #0a0a0a;
  --paper:      #ffffff;
  --ember:      #ff7d03;

  /* Ink derivatives */
  --ink-80:     #3a3a3a;
  --ink-60:     #6a6a6a;
  --ink-30:     #b5b5b5;
  --ink-08:     rgba(10, 10, 10, 0.08);
  --ink-04:     rgba(10, 10, 10, 0.04);

  /* Paper derivative */
  --paper-warm: #fafaf8;

  /* Ember derivatives */
  --ember-soft: rgba(255, 125, 3, 0.08);
  --ember-mid:  rgba(255, 125, 3, 0.18);
  --ember-dark: #e56e00;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);  /* alias for clarity; same font (SPEC §5.2) */

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* Layout */
  --max-width: 1500px;

  /* Motion — easing canon (IMMERSION SPEC §4.1): textura's exact curves.
     --ease-out-expo updated to canonical easeOutExpo; all immersion motion
     uses ONLY --ease-out-expo or --ease-in-out-quart. */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-out-soft:  cubic-bezier(0.4, 0, 0.2, 1);  /* retained — used by pre-immersion rules */

  --dur-fast:   150ms;
  --dur-med:    350ms;
  --dur-slow:   500ms;
  --dur-stage:  700ms;

  --stagger:    120ms;
}


/* === RESET === */

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

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;        /* IMMERSION §5.5 — Inter reads larger; calibrated base */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body { font-size: 18px; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }


/* === REDUCED MOTION — required, see SPEC §7.7 === */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




/* === LAYOUT === */

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}


/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 28px;
  line-height: 1;
  transition:
    background  var(--dur-med) var(--ease-out-expo),
    transform   var(--dur-med) var(--ease-out-expo);
  text-decoration: none;
}


/* Primary button */
.btn-primary {
  background: var(--ember);
  color: var(--ink);
}


.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--ember-dark);
}


/* Arrow nudge inside any .btn */
.btn .arrow {
  transition: transform var(--dur-med) var(--ease-out-expo);
}


.btn:hover .arrow {
  transform: translateX(4px);
}


/* Hairline divider */
.hairline {
  height: 1px;
  background: var(--ink-08);
  border: 0;
}



/* ============================================================
 * PHASE 2 — NAV
 * ========================================================== */

/* Nav bar */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-08);
  height: 72px;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .nav { height: 64px; }
}



/* Inner layout row */
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}


/* Logo wordmark */
.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}


.nav-logo img {
  display: block;
  height: 48px;
  width: auto;
}

@media (max-width: 768px) {
  .nav-inner {
    position: relative;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-logo img {
    height: 48px;
  }
}


@media (max-width: 1024px) {
  .nav-logo { display: none; }
}



/* Nav links list */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
}


.nav-links > li {
  position: relative;
}


/* All nav links */
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-80);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out-expo);
}


.nav-links > li > a:hover,
.nav-links > li > a:focus-visible {
  color: var(--ember);
}


/* Phone CTA */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ember);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 7px 12px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out-expo);
}


.nav-phone:hover,
.nav-phone:focus-visible {
  background: var(--ember-dark);
  color: var(--ink);
}


/* Book button — compact override */
.nav-book {
  font-size: 0.78rem;
  padding: 9px 22px;
  flex-shrink: 0;
  white-space: nowrap;
}


/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  margin-left: 0; /* far left on mobile ("app menu"); display:none on desktop (Ben 2026-05-25) */
  flex-shrink: 0;
}


.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out-expo), opacity var(--dur-fast);
}


.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {

  .nav-toggle {
    display: flex;
  }

  .nav-phone {
    display: none;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-08);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px 16px 16px;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
    z-index: 99;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links > li > a {
    padding: 11px 4px;
    font-size: 0.95rem;
    border-radius: 0;
    border-bottom: 1px solid var(--ink-08);
  }

  .nav-links > li:last-of-type > a {
    border-bottom: none;
  }

  /* Keep book button visible on mobile, pinned to the far right (Ben 2026-05-25).
     margin-left:auto absorbs the free space so BOOK lands far right, with the
     hamburger far left and the absolutely-centered logo between them. */
  .nav-book {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
  }
}



/* --- BACK TO TOP --- */
.back-to-top { position: fixed; bottom: 32px; right: 32px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: var(--ember); color: var(--ink); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-out-expo); }

.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.back-to-top:hover { background: var(--ember-dark); }

@media (max-width: 768px) { .back-to-top { bottom: 20px; right: 20px; }
}



/* ============================================================
 * PHASE 9 — FOOTER (SPEC §13)
 * ========================================================== */
.dev-footer { background: var(--ink); color: var(--paper); padding-block: 64px 40px; }

.footer-inner { }

.footer-brand { display: flex; flex-direction: column; gap: 4px; margin-bottom: 40px; }

.footer-wordmark { font-size: 1.1rem; font-weight: 700; color: var(--paper); letter-spacing: 0.5px; }

.footer-tagline { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

.footer-cols { display: grid; grid-template-columns: repeat(5,1fr); gap: 24px; }

.footer-col h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.5); margin-bottom: 12px; line-height: 1; }

.footer-col a, .footer-col span { display: block; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1; margin-bottom: 9px; text-decoration: none; }

.footer-col a:hover { color: var(--ember); }

.footer-hr { background: rgba(255,255,255,0.1); margin-block: 32px; }

.footer-areas { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.8; }

.footer-areas-label { display: inline-block; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-right: 8px; }

.footer-areas a { color: rgba(255,255,255,0.4); text-decoration: none; }

.footer-areas a:hover { color: var(--ember); }

.footer-compliance { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.4); }

.footer-compliance a { color: rgba(255,255,255,0.4); text-decoration: none; }

.footer-compliance a:hover { color: var(--ember); }

@media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2,1fr); }
}


@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } .footer-compliance { flex-direction: column; }
}



/* --- §11 Animated link underlines (text links only — buttons/CTAs excluded) --- */
a.link, .dev-footer a, .dev-contact .contact-link, .dev-contact .contact-footer-line a, .articles-viewall a { position: relative; text-decoration: none; }

a.link::after, .dev-footer a::after, .dev-contact .contact-link::after, .dev-contact .contact-footer-line a::after, .articles-viewall a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out-expo); }

a.link:hover::after, .dev-footer a:hover::after, .dev-contact .contact-link:hover::after, .dev-contact .contact-footer-line a:hover::after, .articles-viewall a:hover::after { transform: scaleX(1); }


/* Footer suburb chips — colour shift on hover */
.footer-suburbs a,
.suburb-chip,
.footer-col a {
  transition: color 200ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}


/* ============================================================
   STYLE.CSS CASCADE OVERRIDES — added 2026-05-28
   These rules exist solely to defeat conflicting rules in style.css
   on pages that load BOTH stylesheets. Without these, the hamburger
   bars render white (invisible on white nav) and the mobile dropdown
   misaligns. See /opt/backups/ifix-chrome-css-conflict-fix-2026-05-28/
   for the pre-fix snapshot.
   ============================================================ */

/* style.css line 82: .nav-toggle span { background:#fff } would paint
   our hamburger-bar spans white. Specificity bump beats (0,0,1,1). */
.nav-toggle .hamburger-bar {
  background: var(--ink);
  transition: transform var(--dur-med) var(--ease-out-expo),
              opacity var(--dur-fast);
}

/* style.css line 83-85: .nav-toggle.open span uses the OLD class-based
   X-animation hook. New JS sets aria-expanded only. Block the stale rule
   firing if the toggle ever gets .open from anywhere. */
.nav-toggle.open .hamburger-bar:nth-child(1),
.nav-toggle.open .hamburger-bar:nth-child(2),
.nav-toggle.open .hamburger-bar:nth-child(3) {
  transform: none;
  opacity: 1;
}

/* style.css line 401: .nav-links { margin-left:16px !important } is a
   TOP-LEVEL rule (no media query), so it applies at every viewport size.
   It pins the nav-links 16px from the left of .nav-inner — breaking the
   intended margin-left:auto right-alignment on desktop AND offsetting the
   mobile dropdown 16px from the left edge. Must use !important on both
   to win the !important duel.

   Desktop: margin-left:auto pushes the UL to the far right of the flex
   container (so links sit between the logo and the right-side CTAs).
   Mobile (<=768px): margin-left:0 keeps the absolute-positioned dropdown
   flush to the left viewport edge. */
.nav .nav-links {
  margin-left: auto !important;
}

@media (max-width: 768px) {
  .nav .nav-links {
    margin-left: 0 !important;
  }
}

/* style.css line 392: .nav-phone { margin-left: auto; } adds a SECOND auto-margin
   in the nav's flex container. When two flex children both have margin-left:auto,
   free space is SPLIT between them — nav-links lands in the middle, nav-phone
   and nav-book on the right. The homepage doesn't load style.css so it doesn't
   have this bug. Override with higher specificity so chrome.css wins. */
.nav .nav-phone {
  margin-left: 0;
}

/* style.css line 346 sets `.nav-links.open { background: var(--dark) }` for
   the mobile dropdown (0,0,2,0 specificity). chrome.css's base `.nav-links`
   rule (0,0,1,0) loses on specificity even though loaded later, so the
   dropdown renders dark navy with our dark link text → unreadable.
   Match specificity here so chrome.css wins. */
@media (max-width: 768px) {
  .nav .nav-links.open {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-08);
  }
  /* Also explicitly set link colour inside the open dropdown so it survives
     any per-page inline style.css with .nav-links.open .dropdown-menu rules */
  .nav .nav-links.open > li > a {
    color: var(--ink);
    background: transparent;
  }
  .nav .nav-links.open > li > a:hover,
  .nav .nav-links.open > li > a:focus-visible {
    color: var(--ember);
  }
}

/* style.css lines 59-60: .nav-links / .nav-links a colour + spacing rules
   target the OLD dark-theme nav. Override colours to match the new chrome. */
.nav .nav-links a {
  color: var(--ink);
}

.nav .nav-links a:hover,
.nav .nav-links a:focus-visible {
  color: var(--ember);
}