/* style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === BRAND === */
  --primary: #f2b637;
  --primary-hover: #d4991f;
  --primary-glow: rgba(242,182,55,0.18);
  --accent: #1490d7;
  --dark: #1e1e27;

  /* === LIGHT THEME === */
  --bg: #ffffff;
  --bg-alt: #f7f7f7;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --green: #22c55e;
  --green-dim: rgba(34,197,94,0.10);
  --amber: #f59e0b;
  --amber-dim: rgba(245,158,11,0.10);
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,0.10);
  --purple: #a855f7;
  --purple-dim: rgba(168,85,247,0.10);
  --cyan: #06b6d4;
  --cyan-dim: rgba(6,182,212,0.10);
  --text: #1e1e27;
  --text-secondary: #5a596a;
  --text-dim: #9a99a5;
  --text-light: #c2c1ca;
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.15);
  --shadow: 0 6px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --max-width: 1140px;
  --font: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --transition: 0.3s ease;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: #0d6ebd; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* === NAV === */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px; display: flex; align-items: center;
  background: var(--dark);
  transition: background 0.3s ease;
}
.nav-inner { max-width: var(--max-width); margin: 0 auto; width: 100%; display: flex; align-items: center; padding: 0 24px; }
.nav-logo { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 1.5px; text-transform: uppercase; }
.nav-logo span { color: var(--primary); }
.nav-links { display: flex; gap: 32px; margin-left: auto; list-style: none; align-items: center; }
.nav-links a { color: var(--text-light); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.3px; transition: color var(--transition); }
.nav-links a:hover { color: #fff; }
/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.dropdown-menu {
  display: none; position: absolute; top: 100%; right: 0; padding-top: 8px;
  z-index: 200;
}
.dropdown-menu-inner {
  background: var(--dark); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);
  min-width: 240px; padding: 8px 0; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.dropdown-menu a {
  display: block; padding: 8px 18px; font-size: 0.75rem; color: var(--text-light);
  transition: all 0.2s ease; white-space: nowrap;
}
.dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: var(--primary); }
.nav-dropdown:hover .dropdown-menu { display: block; }
.nav-dropdown.open .dropdown-menu { display: block; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; margin-left: auto; padding: 8px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === BOXED PAGE LAYOUT (gutters appear at >1440px viewport) === */
html { background: var(--bg); overflow-x: hidden; scrollbar-gutter: stable; }
body { overflow-x: visible; }
.stats-bar, .reviews-section, .footer {
  width: 100vw; margin-left: calc(50% - 50vw);
}

/* === HERO BANNER === */
.hero-banner {
  margin-top: 64px; width: 100%; overflow: hidden;
  background: #f4f4f4;
}
.hero-banner img {
  width: 100%; max-height: 560px; object-fit: cover; object-position: center;
  display: block;
}
@media (min-width: 1024px) {
  .hero-banner img { max-height: none; object-fit: contain; }
}

/* === FEATURES BAR === */
.features-bar { background: var(--bg); padding: 32px 0; }
.features-grid {
  display: flex; justify-content: center; gap: 20px;
  max-width: var(--max-width); margin: 0 auto;
}
.feature-box {
  flex: 1; max-width: 200px; text-align: center; text-decoration: none; color: var(--text);
  padding: 24px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all var(--transition);
}
.feature-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(242,182,55,0.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; color: var(--primary); transition: all var(--transition);
}
.feature-box:hover .feature-icon { background: var(--primary); color: #fff; }
.feature-box h3 { font-size: 0.8rem; font-weight: 600; margin-bottom: 3px; }
.feature-box p { font-size: 0.7rem; color: var(--text-dim); line-height: 1.4; }

/* === INTRO LAYOUT === */
.intro-layout {
  display: flex; gap: 48px; align-items: center;
}
.intro-text { flex: 1; }
.intro-text h2 {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; margin-bottom: 16px;
  color: var(--dark);
}
.intro-text p {
  color: var(--text-secondary); font-size: 0.9rem; line-height: 1.8; margin-bottom: 16px;
}
.intro-image { flex: 0 0 400px; }

.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 24px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 2px solid transparent; transition: all var(--transition);
  font-family: var(--font); letter-spacing: 0.3px; text-transform: uppercase;
}
.btn svg { transition: transform var(--transition); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 4px 16px var(--primary-glow);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 24px var(--primary-glow); }
.nav-links .btn-primary, .nav-links .btn-primary:hover { color: var(--dark); font-weight: 700; }
.btn-outline { background: transparent; color: var(--text-secondary); border-color: rgba(0,0,0,0.12); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: transparent; }

/* Article CTA buttons: beat .article-body a (0,0,1,1) which would otherwise
   colour button text the same as the button background and make it invisible.
   Selectors below are 0,0,2,1 specificity. Don't remove without re-checking
   every shipped article in /articles/recommended-gear/. */
.article-body a.btn-primary,
.article-body a.btn-primary:hover { color: #fff; font-weight: 600; }
.article-body a.btn-secondary { color: var(--text); background: transparent; border-color: var(--border); font-weight: 600; }
.article-body a.btn-secondary:hover { color: var(--primary); border-color: var(--primary); background: transparent; }

/* === SECTIONS === */
.section { padding: 64px 0; }
.section-header { text-align: center; margin-bottom: 44px; }
.section-header h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.3px; color: var(--dark); }
.section-header p { color: var(--text-secondary); font-size: 0.9rem; }
.section-alt { background: var(--bg-alt); }
.section-divider { width: 40px; height: 3px; background: var(--primary); border-radius: 2px; margin: 0 auto 20px; }

/* === SERVICE CARDS === */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 24px; transition: all var(--transition); position: relative; overflow: hidden;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-icon {
  margin-bottom: 14px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(242,182,55,0.08); display: flex; align-items: center; justify-content: center;
  color: var(--primary); transition: all var(--transition);
}
.service-card:hover .service-icon { background: var(--primary); color: #fff; }
.service-card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; color: var(--dark); }
.service-card p { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.7; }

/* === GALLERY === */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-item {
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 1; border: 1px solid var(--border);
  transition: all var(--transition); position: relative;
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.gallery-item:hover .caption { opacity: 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .caption {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 10px; background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
  font-size: 0.65rem; color: rgba(255,255,255,0.9); font-weight: 500;
  opacity: 0; transition: opacity var(--transition);
}

/* === CONTACT === */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 16px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 0.85rem; font-family: var(--font);
  margin-bottom: 10px; transition: all var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.contact-form textarea { min-height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* === FOOTER === */
.footer { background: var(--dark); padding: 56px 0 28px; color: #fff; }
.footer a { color: var(--text-light); }
.footer a:hover { color: var(--primary); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer .nav-logo { color: #fff; }
.footer-bottom { text-align: center; }
.footer-bottom p { color: var(--text-light); font-size: 0.65rem; }

/* === STATS BAR / TRUST CARD === */
.stats-bar {
  background: var(--dark);
  color: #fff;
  padding: 36px 24px 28px;
}
.stats-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  margin: 0 auto;
  gap: 24px;
}
.stat-item {
  text-align: center;
  position: relative;
  padding: 0 8px;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.stat-num {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -1px;
  line-height: 1;
}
.stat-label {
  font-size: 0.7rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 10px;
  white-space: nowrap;
  font-weight: 500;
}

/* Reviews link — unified bottom row inside the trust card */
.reviews-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 22px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.reviews-link:hover { color: var(--primary); }
.reviews-link:hover .reviews-arrow { transform: translateX(2px); }
.reviews-stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 1rem;
  line-height: 1;
}
.reviews-text strong { font-weight: 700; }
.reviews-arrow {
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.reviews-link:hover .reviews-arrow { opacity: 1; }

@media (max-width: 540px) {
  .stats-bar { padding: 28px 16px 22px; }
  .stats-bar-inner { gap: 12px; }
  .stat-item { padding: 0 4px; }
  .stat-item:not(:last-child)::after { right: -6px; }
  .stat-label { font-size: 0.62rem; letter-spacing: 1px; }
  .reviews-link { font-size: 0.8rem; margin-top: 18px; padding-top: 16px; }
  .reviews-stars { font-size: 0.9rem; letter-spacing: 1.5px; }
}

/* === BACK TO TOP === */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dark); border: none;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: all var(--transition); box-shadow: var(--shadow);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--primary); }

/* === ANIMATIONS === */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--dark); padding: 20px 24px; gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); max-height: 80vh; overflow-y: auto; }
  .nav-links.open .dropdown-menu { position: static; padding-top: 0; margin-top: 8px; }
  .nav-links.open .dropdown-menu-inner { box-shadow: none; border: none; background: rgba(255,255,255,0.04); border-radius: 8px; }
  .nav-links.open .dropdown-menu a { padding: 6px 16px; font-size: 0.7rem; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .features-bar { padding: 16px 0; }
  .features-grid { gap: 8px; }
  .feature-box { max-width: none; padding: 14px 6px; }
  .feature-box h3 { font-size: 0.65rem; }
  .feature-box p { display: none; }
  .feature-icon { width: 36px; height: 36px; margin-bottom: 6px; }
  .feature-icon svg { width: 18px; height: 18px; }
  .intro-layout { flex-direction: column; text-align: center; gap: 32px; }
  .intro-image { flex: none; width: 100%; max-width: 400px; order: -1; }
  .hero-buttons { justify-content: center; }
  .checklist { text-align: left; display: inline-block; columns: 1 !important; }
  .stats-bar-inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .features-bar { padding: 12px 0; }
  .features-grid { gap: 6px; }
  .feature-box { padding: 10px 4px; border-radius: 10px; }
  .feature-box h3 { font-size: 0.55rem; }
  .feature-icon { width: 30px; height: 30px; margin-bottom: 4px; }
  .feature-icon svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* === AFFILIATE DISCLOSURE (used at top of articles containing Amazon affiliate links) === */
.affiliate-disclosure { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2); padding: 12px 16px; border-radius: 8px; font-size: 0.72rem; color: var(--text-secondary); margin: 0 0 24px; line-height: 1.6; }
.affiliate-disclosure strong { color: var(--text); }

/* === NAV PHONE — always visible, click-to-call (added 2026-04-23 for NAP consistency + conversion) === */
.nav-phone {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 7px 14px;
  background: var(--primary); color: var(--dark);
  font-weight: 700; font-size: 0.78rem;
  border-radius: 6px; text-decoration: none;
  white-space: nowrap; line-height: 1;
  transition: background var(--transition);
}
.nav-phone:hover { background: var(--primary-hover); color: var(--dark); }
.nav-phone svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-links { margin-left: 16px !important; }
@media (max-width: 480px) {
  .nav-phone { padding: 6px 10px; font-size: 0.72rem; gap: 4px; }
  .nav-phone svg { width: 12px; height: 12px; }
}

/* === FOOTER PHONE — also click-to-call === */
.footer-phone {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 600; font-size: 0.85rem;
  text-decoration: none; margin-bottom: 8px;
}
.footer-phone:hover { color: var(--primary-hover); text-decoration: underline; }
.footer-phone svg { width: 14px; height: 14px; flex-shrink: 0; }

/* === HERO CALL-NOW CTA — service pages === */
.hero-cta-row {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; margin-top: 20px;
}
.hero-cta-call, .hero-cta-book {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 8px;
  font-weight: 700; font-size: 0.85rem;
  text-decoration: none; line-height: 1;
}
.hero-cta-call { background: var(--primary); color: var(--dark); }
.hero-cta-call:hover { background: var(--primary-hover); color: var(--dark); }
.hero-cta-book { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.hero-cta-book:hover { background: rgba(255,255,255,0.18); }

/* Article tables + definition lists (added 2026-06-03). The review pipeline
   emits <table> and <dl> but .article-body only styled p/h/li, so these
   rendered at UA defaults (larger, unstyled) and clashed with the prose.
   Scoped to .article-body so nothing else is affected. */
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 0.82rem; }
.article-body caption { caption-side: top; text-align: left; font-size: 0.78rem; color: var(--text-dim); font-weight: 600; margin-bottom: 8px; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; color: var(--text-secondary); line-height: 1.6; vertical-align: top; }
.article-body thead th { background: var(--bg-alt); color: var(--text); font-weight: 600; border-bottom: 2px solid var(--primary); }
.article-body tbody th[scope="row"] { background: var(--bg-alt); color: var(--text); font-weight: 600; }
.article-body dl { margin: 18px 0 22px; }
.article-body dt { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-top: 14px; line-height: 1.6; }
.article-body dd { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.8; margin: 4px 0 0; padding-left: 16px; border-left: 2px solid var(--border); }
.article-body section { margin: 8px 0; }

/* Author sign-off block (signature image at end of article). The signature
   JPG has a white background; mix-blend-mode multiply drops it out on the
   white page so it reads as ink. Added 2026-06-03. */
.article-signoff { max-width: 760px; margin: 44px auto 8px; padding-top: 26px; border-top: 1px solid var(--border); }
.article-signoff img { width: 200px; max-width: 60%; height: auto; display: block; margin: 0 0 4px -3px; mix-blend-mode: multiply; }
.article-signoff .signoff-name { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0; }
.article-signoff .signoff-role { font-size: 0.75rem; color: var(--text-dim); margin: 3px 0 0; }
/* chrome.css */
: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: 30px;
  }
}


/* Hide the navbar logo on mobile/tablet ONLY on the homepage — the hero
   already has a large centred logo there. Every other page (product, about,
   articles, services, etc.) shows the centred mobile logo from the
   <= 768px block above. Add class="is-home" to index.html's <body>. */
@media (max-width: 1024px) {
  body.is-home .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);
}

/* ===== CANONICAL CHROME (NAV+FOOTER) — single source of truth from index.html =====
   Auto-extracted 2026-06-13. Do not hand-edit nav/footer rules above this block;
   re-extract from home.min.css instead. Loads after style.css so these win. */
.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}}
.nav-inner{display:flex;align-items:center;gap:var(--space-6);width:100%}
.nav-links>li>a,.nav-logo{display:inline-flex;align-items:center}
.nav-logo{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){body.is-home .nav-logo{display:none}}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0 0 0 auto}
.nav-links>li{position:relative}
.nav-links>li>a{gap:4px;font-weight:500;font-size:.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:focus-visible,.nav-links>li>a:hover{color:var(--ember)}
.nav-dropdown.open>a>.chev{transform:rotate(180deg)}
.nav-dropdown.open>.dropdown-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-phone{display:inline-flex;align-items:center;gap:6px;background:var(--ember);color:var(--ink);font-size:.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:focus-visible,.nav-phone:hover{background:var(--ember-dark);color:var(--ink)}
.nav-book{font-size:.78rem;padding:9px 22px;flex-shrink:0;white-space:nowrap}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:0 0;border:0;cursor:pointer;padding:6px;border-radius:var(--radius-sm);margin-left:0;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-links.open,.nav-toggle{display:flex}.nav-phone{display:none}.nav-links,.nav-links>li>a{border-bottom:1px solid var(--ink-08)}.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;margin-left:0;padding:8px 16px 16px;box-shadow:0 8px 24px rgba(10,10,10,.08);z-index:99}.nav-links>li>a{padding:11px 4px;font-size:.95rem;border-radius:0}.nav-links>li:last-of-type>a{border-bottom:none}.nav-dropdown.open>.dropdown-menu{max-height:600px;pointer-events:auto;padding:4px 8px 8px}.nav-book{display:inline-flex;flex-shrink:0;margin-left:auto}}
.contact-footer-line a:hover,.footer-areas a:hover,.footer-col a:hover,.footer-compliance a:hover{color:var(--ember)}
.dev-footer{background:var(--ink);color:var(--paper);padding-block:64px 40px}
.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:.5px}
.footer-tagline{font-size:.75rem;color:rgba(255,255,255,.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,.5);margin-bottom:12px;line-height:1}
.footer-col a,.footer-col span{display:block;font-size:13px;color:rgba(255,255,255,.7);line-height:1;margin-bottom:9px;text-decoration:none}
.footer-hr{background:rgba(255,255,255,.1);margin-block:32px}
.footer-areas{font-size:11px;color:rgba(255,255,255,.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,.footer-compliance a{color:rgba(255,255,255,.4);text-decoration:none}
.footer-compliance{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:rgba(255,255,255,.4)}
@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}}
.articles-viewall a,.dev-contact .contact-footer-line a,.dev-contact .contact-link,.dev-footer a,a.link{position:relative;text-decoration:none}
.articles-viewall a::after,.dev-contact .contact-footer-line a::after,.dev-contact .contact-link::after,.dev-footer a::after,a.link::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)}
.articles-viewall a:hover::after,.dev-contact .contact-footer-line a:hover::after,.dev-contact .contact-link:hover::after,.dev-footer a:hover::after,a.link:hover::after{transform:scaleX(1)}
.footer-col a,.footer-suburbs a,.suburb-chip{transition:color 200ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1))}
.footer-suburbs a:hover,.suburb-chip:hover{color:var(--ember, #ff7d03)}
.nav[data-slide-down]{position:sticky;top:0;opacity:1}
.nav[data-slide-down].is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){.nav[data-slide-down]{top:0!important;opacity:1!important}}
.dev-footer{padding-block:44px 26px}
.footer-brand{margin-bottom:22px}
.footer-col h3{margin-bottom:8px}
.footer-col a,.footer-col span{margin-bottom:2px;line-height:1.4}
.footer-col span{padding:5px 4px 5px 0}
.footer-hr{margin-block:18px}
.footer-areas{line-height:1.7}
.footer-cols{gap:20px 24px}
@media (max-width:480px){.footer-cols{grid-template-columns:repeat(2,1fr)}.footer-compliance{flex-direction:row;flex-wrap:wrap}}
.footer-logo{display:inline-block;line-height:0}
.footer-logo img{height:46px;width:auto;display:block}
.footer-brand{gap:8px}
.footer-tagline{font-size:.72rem;color:rgba(255,255,255,.45)}
@media (max-width:480px){.footer-logo img{height:40px}}