/* antonjoro.com — institutional M&A advisory site
   Palette: deep navy + muted gold, warm paper background.
   Fonts: system serif for headings, system sans for body — no external font dependency. */

:root {
  --navy: #1b2a4a;
  --navy-dark: #101a30;
  --gold: #b08d3e;
  --gold-light: #d8c48f;
  --paper: #f7f6f3;
  --paper-alt: #efece4;
  --ink: #1a1a1a;
  --ink-soft: #4a4a48;
  --border: #ded9cc;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: normal;
}

h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.brand img { height: 76px; width: 76px; display: block; }

.brand .name-line { font-size: 1.05rem; }
.brand .name-line .credentials { color: var(--gold-light); font-size: 0.72em; letter-spacing: 0.01em; }

.brand small {
  display: block;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 3px;
}

.affil-logos {
  display: flex;
  align-items: center;
  gap: 12px;
}
.affil-logos img { height: 76px; width: auto; display: block; }
.affil-logos img.murphy { height: 76px; }

/* nav and its <ul> generate no box of their own — their children (the tab
   <li>s, plus .affil-logos) become direct flex items of .site-header .wrap
   alongside .brand, so the header's own justify-content: space-between
   evenly distributes ALL the gaps (brand-to-Home included) instead of only
   the gaps between tabs, which was leaving a visibly larger, uneven gap on
   the left before "Home". */
nav.primary-nav, nav.primary-nav > ul {
  display: contents;
}

nav.primary-nav > ul > li {
  display: flex;
  align-items: center;
}

nav.primary-nav a {
  color: #e7e9f0;
  font-size: 1.13rem;
  letter-spacing: 0.02em;
}

nav.primary-nav > ul > li > a {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 5px;
}

nav.primary-nav a:hover { color: var(--gold-light); }
nav.primary-nav > ul > li > a[aria-current="page"] {
  color: var(--gold-light);
  box-shadow: inset 0 -2px 0 var(--gold-light);
}

.has-dropdown { position: relative; }
/* Bridges the visual gap between the nav link and the dropdown panel below it
   (see .dropdown's top offset) so moving the mouse straight down from
   "Services" to the panel doesn't pass through a dead zone and drop the
   :hover state before the panel is reached — that was making the menu feel
   unresponsive / hard to navigate. */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -22px;
  right: -22px;
  height: 18px;
}
.has-dropdown > a .caret {
  font-size: 0.6rem;
  transition: transform 0.15s ease;
}
.has-dropdown.open > a .caret,
.has-dropdown:hover > a .caret { transform: rotate(180deg); }

.dropdown {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  min-width: 280px;
  padding: 8px 0;
  box-shadow: 0 18px 40px rgba(9, 14, 28, 0.35);
  z-index: 50;
  border-radius: 3px;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-label {
  display: block;
  padding: 8px 20px 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

nav.primary-nav .dropdown a {
  display: block;
  color: var(--ink) !important;
  background: #fff;
  padding: 10px 20px;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}

nav.primary-nav .dropdown a:hover { background: var(--paper-alt); color: var(--navy) !important; border-left-color: var(--gold); }

.nav-cta {
  background: var(--gold);
  color: var(--navy-dark) !important;
  padding: 9px 18px;
  border-radius: 2px;
  font-size: 0.88rem !important;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-light); }

/* Persistent CTA, moved out of the header (was crowding the name/designations
   at the header's larger size) — a fixed pill button, present on every page
   except Contact itself. */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  background: var(--gold);
  color: var(--navy-dark);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: 30px;
  box-shadow: 0 10px 26px rgba(9, 14, 28, 0.32);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.floating-cta:hover { background: var(--gold-light); transform: translateY(-2px); }

.nav-toggle { display: none; }

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

.hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 84px 0 76px;
}

.hero .wrap { max-width: 880px; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--gold-light);
  margin-bottom: 18px;
  font-weight: 600;
}

.hero h1 { color: #fff; }

.hero .lede {
  font-size: 1.15rem;
  color: #d6dae6;
  max-width: 700px;
  margin-top: 18px;
}

.page-hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 62px 0 54px;
}
.page-hero h1 { color: #fff; max-width: 780px; }
.page-hero .lede { color: #d6dae6; max-width: 720px; font-size: 1.08rem; }

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

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 2px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-gold:hover { background: var(--gold-light); color: var(--navy-dark); }

.btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }

.btn-outline-navy {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline-navy:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

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

section { padding: 68px 0; }
section.alt { background: var(--paper-alt); }
section.navy-band {
  background: var(--navy);
  color: #eceef3;
}
section.navy-band h2 { color: #fff; }
section.navy-band a { color: var(--gold-light); }

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head .eyebrow { color: var(--navy); }
section.navy-band .section-head .eyebrow { color: var(--gold-light); }

/* Three-up teaser / cards */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 30px 26px;
}

.card h3 { margin-bottom: 0.5em; }
.card p:last-child { margin-bottom: 0; }
.card a.card-link { font-size: 0.9rem; font-weight: 600; }
.card a.card-link::after { content: " \2192"; }

.specialist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 18px;
}
.specialist-tags span {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Trust strip */

.trust-strip {
  background: var(--paper-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}
.trust-strip strong { color: var(--navy); }

/* Lists */

ul.check-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
ul.check-list li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
}
ul.check-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--gold);
}

ol.process-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
ol.process-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 54px;
  margin-bottom: 26px;
}
ol.process-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
ol.process-steps li h3 { margin-bottom: 4px; }

/* Table (valuation comparison) */

.table-wrap { overflow-x: auto; margin: 28px 0; }

table.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  background: #fff;
  font-size: 0.92rem;
}

table.compare th, table.compare td {
  border: 1px solid var(--border);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

table.compare thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1rem;
}

table.compare tbody th {
  background: var(--paper-alt);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

table.compare tbody tr:nth-child(even) td { background: #fbfaf8; }

.disclaimer {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 18px;
  margin: 24px 0;
}

/* Callout / CTA band */

.callout {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  padding: 28px 32px;
  margin: 32px 0;
}

.cta-band {
  background: var(--navy-dark);
  color: #fff;
  text-align: center;
  padding: 56px 0;
}
.cta-band h2 { color: #fff; }
.cta-band .lede { color: #d6dae6; max-width: 620px; margin: 0 auto 26px; }

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: start;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 32px;
}
.contact-card dt { color: var(--ink-soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 16px; }
.contact-card dt:first-child { margin-top: 0; }
.contact-card dd { margin: 2px 0 0; font-size: 1.05rem; }
.contact-card dd a { color: var(--navy); font-weight: 600; }

.cross-links {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}
.cross-links a {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  padding: 16px 20px;
  font-size: 0.95rem;
}
.cross-links a:hover { border-color: var(--gold); }
.cross-links small { display: block; color: var(--ink-soft); margin-top: 2px; }

/* Testimonial placeholder */

.testimonial-slot {
  background: #fff;
  border: 1px dashed var(--border);
  padding: 30px 28px;
  color: var(--ink-soft);
  font-style: italic;
}

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

footer.site-footer {
  background: var(--navy-dark);
  color: #b9c2d6;
  padding: 50px 0 28px;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 32px;
}

footer.site-footer h4 {
  color: #fff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--sans);
  margin-bottom: 14px;
}

footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
footer.site-footer li { margin-bottom: 8px; }
footer.site-footer a { color: #b9c2d6; }
footer.site-footer a:hover { color: var(--gold-light); }

.footer-brand p { color: #96a0b8; font-size: 0.88rem; max-width: 320px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #7c869f;
  font-size: 0.8rem;
}
.footer-bottom a { color: #7c869f; }

/* ---------- Hero with image ---------- */

.hero-split {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 78px 0;
  overflow: hidden;
}
.hero-split .wrap {
  max-width: var(--max);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}
.hero-split .hero-copy .lede { color: #d6dae6; max-width: 560px; }
.hero-split .hero-copy h1 { color: #fff; }
.hero-media {
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--gold);
  transform: translate(14px, 14px);
  z-index: -1;
}

/* ---------- Photo feature block (service pages) ---------- */

.photo-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 40px 0;
}
.photo-feature img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.photo-feature.reverse { direction: rtl; }
.photo-feature.reverse > * { direction: ltr; }

.lifestyle-collage { display: flex; flex-direction: column; gap: 12px; }
.lifestyle-collage .collage-main { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.lifestyle-collage .collage-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lifestyle-collage .collage-row img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.collage-caption { font-family: var(--serif); font-style: italic; color: var(--navy); font-size: 1.05rem; border-left: 3px solid var(--gold); padding-left: 14px; margin: 18px 0; }

.photo-feature.compact { grid-template-columns: 280px 1fr; gap: 34px; align-items: center; }
.photo-feature.compact img { aspect-ratio: 1/1; }
@media (max-width: 880px) { .photo-feature.compact { grid-template-columns: 1fr; } }

.page-hero-media {
  margin-top: 28px;
}
.page-hero-media img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}

/* ---------- Stat counters ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.stat .num {
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--gold-light);
  line-height: 1;
}
section:not(.navy-band):not(.hero-split):not(.hero) .stat .num,
.trust-strip .stat .num { color: var(--navy); }
.stat .label {
  margin-top: 8px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Stagger children of a grid when revealed */
.grid-3.reveal-group .card,
.grid-2.reveal-group .card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.grid-3.reveal-group.in-view .card,
.grid-2.reveal-group.in-view .card { opacity: 1; transform: translateY(0); }
.grid-3.reveal-group.in-view .card:nth-child(2),
.grid-2.reveal-group.in-view .card:nth-child(2) { transition-delay: 0.08s; }
.grid-3.reveal-group.in-view .card:nth-child(3) { transition-delay: 0.16s; }

.card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card:hover { box-shadow: 0 14px 30px rgba(16,26,48,0.1); transform: translateY(-3px); }

/* ---------- Reviews (testimonials) ---------- */

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 26px 26px 22px;
}
.review-stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; font-size: 0.95rem; }
.review-quote { font-size: 0.94rem; color: var(--ink-soft); font-style: italic; }
.review-who { margin-top: 12px; font-size: 0.86rem; font-weight: 600; color: var(--navy); }

/* ---------- Visual elevation: icons, pull-quote, texture, forms ---------- */

.icon-badge {
  width: 46px;
  height: 46px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  background: var(--paper-alt);
  margin-bottom: 16px;
}
.icon-badge svg { width: 22px; height: 22px; }
section.navy-band .icon-badge,
.cta-band .icon-badge { background: rgba(255,255,255,0.06); border-color: var(--gold-light); color: var(--gold-light); }

.card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(9,14,28,0.12); }

/* Subtle diagonal texture for depth on alternating sections */
section.alt {
  background-image:
    repeating-linear-gradient(135deg, rgba(27,42,74,0.025) 0px, rgba(27,42,74,0.025) 1px, transparent 1px, transparent 14px),
    linear-gradient(var(--paper-alt), var(--paper-alt));
}
.cta-band {
  background-image:
    repeating-linear-gradient(135deg, rgba(216,196,143,0.05) 0px, rgba(216,196,143,0.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(var(--navy-dark), var(--navy-dark));
}
.hero-split {
  position: relative;
}
.hero-split::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(216,196,143,0.05) 0px, rgba(216,196,143,0.05) 1px, transparent 1px, transparent 16px);
  pointer-events: none;
}
.hero-split .wrap { position: relative; z-index: 1; }

/* Pull-quote */
.pull-quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.pull-quote .mark {
  font-family: var(--serif);
  font-size: 3.2rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.pull-quote blockquote {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 18px;
  font-style: italic;
}
.pull-quote cite {
  font-style: normal;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
section.navy-band .pull-quote blockquote { color: #fff; }
section.navy-band .pull-quote cite { color: #b9c2d6; }

/* Enhanced process steps: filled numerals + connecting line */
ol.process-steps { position: relative; }
ol.process-steps li::before {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
  z-index: 1;
}
ol.process-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  width: 1px;
  height: calc(100% - 10px);
  background: var(--border);
}

/* Sign-up / lead form */
.lead-form {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 32px;
}
.lead-form .field { margin-bottom: 18px; }
.lead-form label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus { outline: 2px solid var(--gold-light); border-color: var(--gold); }
.lead-form textarea { resize: vertical; min-height: 100px; }
.lead-form .hp-field { position: absolute; left: -9999px; }
.lead-form button.btn { border: none; cursor: pointer; font-family: var(--sans); }
.form-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 12px; }
.form-banner {
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  border-left: 4px solid var(--gold);
  background: var(--paper-alt);
}
.form-banner.success { border-left-color: #2f7a4f; }
.form-banner.error { border-left-color: #b23b3b; }

/* ---------- Interactive valuation-type toggle ---------- */
.valuation-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 18px;
}
.vtab {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  padding: 10px 18px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.vtab:hover { border-color: var(--gold); color: var(--navy); }
.vtab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.vtab-panel {
  background: var(--paper-alt);
  border-left: 4px solid var(--gold);
  padding: 18px 22px;
  margin-bottom: 30px;
  font-size: 0.95rem;
}
table.compare td.col-active,
table.compare th.col-active {
  background: #fbf3e2 !important;
  box-shadow: inset 0 0 0 2px var(--gold);
}
table.compare thead th.col-active { background: var(--gold) !important; }

/* ---------- Lifestyle photo trio ---------- */
.lifestyle-pair {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}
.lifestyle-pair img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(9,14,28,0.14);
}
@media (max-width: 880px) { .lifestyle-pair { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lifestyle-pair { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2.1rem; }
  .hero-split .wrap { grid-template-columns: 1fr; }
  .hero-split .hero-media { order: -1; max-width: 460px; }
  .photo-feature { grid-template-columns: 1fr; }
  .photo-feature.reverse { direction: ltr; }
  .review-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .stat .num { font-size: 1.9rem; }
}

@media (max-width: 720px) {
  nav.primary-nav > ul { display: none; }
  .affil-logos { margin-left: 2px; }
  .affil-logos img { height: 24px; }
  .nav-cta { padding: 8px 14px; font-size: 0.82rem !important; }
  .floating-cta { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 0.85rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
  section { padding: 48px 0; }
}