/* Pelland Realtors. Brand palette carried over from the approved canvas design. */
:root {
  --navy-950: #0A1A33;
  --navy-900: #0B1B33;
  --navy-800: #0E2244;
  --navy-700: #14315E;
  --navy-600: #1F447C;
  --ink: #182A45;
  --ink-soft: #3C4A61;
  --muted: #636D7A;
  --gold: #D4AF37;
  --gold-dark: #B08A2E;
  --gold-light: #F0D480;
  --cream: #FAF8F4;
  --card: #FFFFFF;
  --line: #E4DED2;
  --line-strong: #D8D0C0;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 32px);
  --r: 10px;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Signika Negative', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-700); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s ease;
}
.site-head[data-scrolled="1"] { box-shadow: 0 10px 30px -18px rgba(20, 49, 94, .45); }
.head-in { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand .rule { width: 1px; height: 40px; background: var(--line-strong); }
.brand img { display: block; }
.site-head nav { margin-left: auto; }
.site-head nav ul { display: flex; align-items: center; gap: 2px; list-style: none; flex-wrap: wrap; }
.site-head nav a {
  display: block; padding: 10px 11px; font-size: 14.5px; font-weight: 500;
  color: var(--ink); white-space: nowrap; position: relative;
}
.site-head nav a.on::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px;
  height: 2px; background: var(--gold);
}
.site-head nav .cta a {
  margin-left: 10px; padding: 11px 22px; border-radius: 999px;
  background: var(--navy-700); color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 18px -10px rgba(20, 49, 94, .7);
  transition: transform .3s ease, background .3s ease;
}
.site-head nav .cta a:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); }
.burger { display: none; }

/* ---------- hero ---------- */
.hero { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
/* a lit desert home at dusk sits behind the navy. it is held well back so it
   reads as depth and warmth rather than as a photograph competing with the
   portrait, and the scrim over it keeps the headline legible. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .30; filter: saturate(1.15);
  transform: scale(1.06);
  animation: heroDrift 60s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(-0.7%, 0, 0); }
  to   { transform: scale(1.14) translate3d(0.7%, -0.8%, 0); }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,27,51,.94) 0%, rgba(11,27,51,.78) 42%, rgba(11,27,51,.55) 100%),
    linear-gradient(180deg, rgba(11,27,51,.55) 0%, rgba(11,27,51,0) 35%, rgba(8,20,38,.9) 100%);
}
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: 1;
}
.hero::before {
  top: -30%; left: -10%; width: 70%; height: 150%;
  background: radial-gradient(closest-side, rgba(31, 68, 124, .85), rgba(11, 27, 51, 0) 70%);
}
.hero::after {
  bottom: -40%; right: -5%; width: 55%; height: 140%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, .16), rgba(11, 27, 51, 0) 70%);
}
.hero-in {
  position: relative; z-index: 2; display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center; padding-block: clamp(56px, 8vw, 88px) clamp(64px, 9vw, 112px);
}
.eyebrow {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero h1 { font-size: clamp(44px, 6.4vw, 76px); line-height: .98; font-weight: 700; }
.hero h1 .gold {
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: #C9D3E2; max-width: 34ch; }
.hero-figure img { border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  cursor: pointer; border: 0; text-align: center;
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease,
              background-color .28s ease, color .28s ease, border-color .28s ease;
}
/* a single slow highlight crosses the face on hover, like light moving over
   metal. it runs once per hover rather than looping, so it stays quiet. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
}
.btn:hover::before { transition: transform .75s cubic-bezier(.4,0,.2,1); transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }

.btn-gold {
  background: var(--gold); color: var(--navy-800);
  box-shadow: 0 10px 22px -12px rgba(212,175,55,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover {
  background: var(--gold-light); color: var(--navy-800);
  box-shadow: 0 16px 30px -14px rgba(212,175,55,.75), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-navy {
  background: var(--navy-700); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(20,49,94,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-navy:hover {
  background: var(--navy-800); color: #fff;
  box-shadow: 0 16px 30px -14px rgba(20,49,94,.65), 0 0 0 1px var(--gold) inset;
}
.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.08); }
.btn-ghost::before { background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%); }
.btn-outline { border: 1px solid var(--line-strong); color: var(--navy-700); font-weight: 600; background: #fff; }
.btn-outline:hover { border-color: var(--gold); background: #FBF7EA; }
.btn-outline::before { background: linear-gradient(105deg, transparent 38%, rgba(212,175,55,.18) 50%, transparent 62%); }

/* submit buttons in the form are full width and should not shrink oddly */
form.note .btn { justify-content: center; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
  .btn::before { display: none; }
}

/* ---------- sections ---------- */
section { padding-block: clamp(48px, 7vw, 84px); }
.section-head { max-width: 62ch; display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); color: var(--navy-700); }
.section-head p { font-size: 19px; color: var(--ink-soft); }
.kicker {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700;
}
.alt { background: #fff; border-block: 1px solid var(--line); }
.dark { background: var(--navy-900); color: #fff; }
.dark h2, .dark h3 { color: #fff; }
.dark p { color: #C9D3E2; }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.card h3 { font-size: 22px; color: var(--navy-700); }
.card p { color: var(--ink-soft); }
.card .more { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--navy-700); }

/* ---------- numbered steps ---------- */
.steps { list-style: none; display: grid; gap: 20px; }
.steps li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 28px; display: grid; gap: 10px;
  grid-template-columns: auto 1fr; align-items: start; column-gap: 22px;
}
.steps .n {
  font-family: var(--display); font-size: 30px; font-weight: 700;
  color: var(--gold-dark); line-height: 1; grid-row: span 2;
}
.steps h3 { font-size: 21px; color: var(--navy-700); }
.steps p { color: var(--ink-soft); grid-column: 2; }
.dont {
  grid-column: 2; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line-strong);
  font-size: 15.5px; color: #8A3B3B;
}
.dont b { font-weight: 700; letter-spacing: .06em; }

/* ---------- eleven don'ts ---------- */
.donts { list-style: none; display: grid; gap: 12px; counter-reset: d; }
.donts li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px;
}
.donts li::before {
  counter-increment: d; content: "DO NOT";
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #B23B3B;
  border: 1px solid #E6C4C4; border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}

/* ---------- reviews ---------- */
.reviews { columns: 3 300px; column-gap: 22px; }
.review {
  break-inside: avoid; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 24px; margin-bottom: 22px;
}
.review .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.review .who strong { font-family: var(--display); font-size: 18px; color: var(--ink); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.review p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

.rating-band {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px;
}
.rating-band .big { font-family: var(--display); font-size: 46px; font-weight: 700; color: var(--navy-700); line-height: 1; }

/* ---------- partners ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filters button {
  padding: 9px 16px; border: 1px solid var(--line-strong); background: #fff;
  border-radius: 999px; font: inherit; font-size: 14.5px; color: var(--ink-soft); cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.cat-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 44px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.cat-head h2 { font-size: 26px; color: var(--navy-700); }
.cat-head span { font-size: 14px; color: var(--muted); }
.partner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.partner .logo {
  height: 74px; display: flex; align-items: center; justify-content: flex-start;
}
.partner .logo img { max-height: 74px; width: auto; object-fit: contain; }
.partner h3 { font-size: 20px; color: var(--navy-700); }
.partner .tagline { font-size: 14.5px; color: var(--muted); }
.partner .perk {
  font-size: 14.5px; color: var(--navy-800); background: #FBF4DF;
  border: 1px solid #EBDCA8; border-radius: 8px; padding: 10px 14px;
}
.person { padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.person .nm { font-weight: 600; color: var(--ink); }
.person .role { color: var(--muted); font-size: 14px; }

/* ---------- service list ---------- */
.services { columns: 3 200px; column-gap: 28px; list-style: none; }
.services li { padding: 7px 0; break-inside: avoid; color: var(--ink-soft); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 14px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px;
}
.faq summary {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  color: var(--navy-700); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--gold); font-weight: 700; }
.faq details[open] summary::after { content: " –"; }
.faq details p { margin-top: 12px; color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.phone-row {
  display: flex; align-items: baseline; gap: 16px; padding: 20px 0;
  border-top: 1px solid var(--line);
}
.phone-row:last-of-type { border-bottom: 1px solid var(--line); }
.phone-row .lbl { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; width: 78px; }
.phone-row .num { font-family: var(--display); font-size: 28px; font-weight: 600; color: var(--navy-700); }

form.note { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; }
form.note label { font-size: 14px; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 7px; }
form.note input, form.note textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-family: var(--sans); font-size: 16px; background: #FDFCF9; color: var(--ink);
}
form.note textarea { resize: vertical; min-height: 110px; }
form.note input:invalid:not(:placeholder-shown) { border-color: #C98A8A; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips label {
  margin: 0; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 15px; font-weight: 400; color: var(--ink-soft); cursor: pointer; background: #FDFCF9;
}
/* visually hidden but still focusable. needs to out-specify
   `form.note input { width: 100% }`, or the radios stretch full width and,
   being absolutely positioned, drag the page into horizontal scroll. */
form.note .chips input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0; opacity: 0;
}
.chips input:checked + span { color: var(--navy-700); font-weight: 600; }
.chips label:has(input:checked) { border-color: var(--gold); background: #FBF7EA; }
.chips label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 15.5px; padding: 12px 16px; border-radius: 8px; display: none; }
.form-msg.ok { display: block; background: #EDF6EE; border: 1px solid #BFDCC3; color: #2C5733; }
.form-msg.err { display: block; background: #FBEDED; border: 1px solid #E3C2C2; color: #8A3B3B; }

/* ---------- resource guide ---------- */
.guide-toc { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.guide-toc a { padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14.5px; background: #fff; }
.prose { max-width: 72ch; display: flex; flex-direction: column; gap: 18px; }
.prose h3 { font-size: 24px; color: var(--navy-700); margin-top: 14px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; color: var(--ink-soft); }
.prose strong { color: var(--ink); }

/* ---------- footer ---------- */
.site-foot { background: var(--navy-950); color: #8FA0BC; margin-top: 0; }
.foot-in {
  display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-block: 56px; align-items: start;
}
.site-foot p { font-size: 15px; line-height: 1.6; margin-bottom: 4px; }
.foot-name { font-family: var(--display); font-size: 22px; font-weight: 700; color: #fff; }
.site-foot a { color: #C9D3E2; }
.site-foot a:hover { color: var(--gold); }
.foot-mhg { background: #fff; padding: 10px 14px; border-radius: 6px; margin-top: 12px; }
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.foot-marks { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.foot-marks .chip { background: #fff; padding: 7px; border-radius: 5px; }
.fine { font-size: 12.5px; line-height: 1.6; color: #6E7F9B; }
.hive { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(143, 160, 188, .2); }
.hive span { display: flex; flex-direction: column; }
.hive small { font-size: 11px; color: #8FA0BC; }
.hive strong { font-family: var(--display); font-size: 13px; color: var(--gold); font-weight: 600; }
.hive .heart { color: #E8C547; }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal="in"] { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; background: none;
    border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
  }
  .burger span { display: block; height: 2px; background: var(--navy-700); margin-inline: auto; width: 20px; }
  .site-head nav { margin-left: 0; flex-basis: 100%; display: none; }
  .site-head nav[data-open="1"] { display: block; }
  .site-head nav ul { flex-direction: column; align-items: stretch; padding-block: 10px; gap: 0; }
  .site-head nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-head nav .cta a { margin: 12px 0 4px; text-align: center; border-bottom: 0; }
  .brand .script, .brand .rule, .brand .mhg { display: none; }
  .reviews { columns: 1; }
  .services { columns: 2 150px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .steps li { grid-template-columns: 1fr; }
  .steps .n { grid-row: auto; }
  .steps p, .dont { grid-column: 1; }
  .services { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, [data-reveal] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-head, .site-foot, .btn-row, .filters, .burger { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .partner, .card, .review { break-inside: avoid; border: 1px solid #ccc; }
}

/* ---------- text + image split ---------- */
.split {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center; margin-bottom: 44px;
}
.split .section-head { margin-bottom: 0; }
.split figure { margin: 0; }
.split img {
  width: 100%; border-radius: var(--r); display: block;
  box-shadow: 0 26px 50px -32px rgba(11, 27, 51, .55);
}
.split.portrait img { max-height: 560px; object-fit: cover; }
.band { margin: 0 0 44px; }
.band img {
  width: 100%; height: clamp(180px, 26vw, 300px); object-fit: cover;
  border-radius: var(--r); display: block;
}
figcaption.credit { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ---------- eleven don'ts, cream treatment ---------- */
.donot-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.donot-head h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; color: var(--navy-700); }
.donot-head .sub { font-family: var(--display); font-size: 17px; font-weight: 600; color: #B22A2A; letter-spacing: .04em; }
.donot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px 40px;
  list-style: none;
}
.donot-grid li {
  display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 18px;
  align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.donot-grid li::before {
  content: "DO NOT"; font-family: var(--display); font-size: 16px;
  font-weight: 700; color: #B22A2A; letter-spacing: .04em;
}
.cream { background: #F7F3EA; border-top: 1px solid var(--line); }

/* ---------- closing cta band ---------- */
.cta-band {
  background-color: var(--navy-700);
  background-image: linear-gradient(120deg, var(--navy-700), var(--navy-800));
  color: #fff; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; top: -60%; right: -10%; width: 55%; height: 220%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, .18), rgba(20, 49, 94, 0) 70%);
  pointer-events: none;
}
.cta-in {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap; padding-block: 66px;
}
.cta-in h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; max-width: 26ch; color: #fff; }
.signoff {
  font-family: var(--display); font-size: clamp(22px, 2.4vw, 29px); font-weight: 700;
  color: var(--gold); font-style: italic; padding-top: 6px;
}

/* ---------- gold dot bullets with bold lead-ins ---------- */
.dots { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.dots li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 16px; align-items: start; }
.dots li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-top: 9px; display: block;
}
.dots p { font-size: 18px; line-height: 1.62; color: var(--ink-soft); }
.dots strong { color: var(--navy-700); }
.dark .dots p { color: #C9D3E2; }
.dark .dots strong { color: #fff; }

/* gold offset frame behind the portrait, as in the canvas */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--gold); border-radius: 6px; pointer-events: none;
}
.framed img { position: relative; border-radius: 6px; display: block; }
.accent { font-style: italic; color: var(--navy-700); font-weight: 600; }
.dark .accent, .hero .accent, .cta-band .accent { color: var(--gold); }
.booklet-note {
  margin-top: 36px; padding-top: 20px; border-top: 1px dashed var(--gold);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}

/* ---------- do's and don'ts, split sections with badges ---------- */
@keyframes drawStroke { from { stroke-dashoffset: 64 } to { stroke-dashoffset: 0 } }
@keyframes badgePop {
  0% { transform: scale(.4) rotate(-14deg); opacity: 0 }
  60% { transform: scale(1.12) rotate(3deg); opacity: 1 }
  100% { transform: scale(1) rotate(0); opacity: 1 }
}
@keyframes stampIn {
  0% { transform: scale(1.6) rotate(-18deg); opacity: 0 }
  55% { transform: scale(.92) rotate(4deg); opacity: 1 }
  100% { transform: scale(1) rotate(-4deg); opacity: 1 }
}

.dd-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px; margin-bottom: 36px;
}
.dd-head .word {
  font-family: var(--display); font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700; line-height: 1; margin: 0;
}
.dd-head .sub { font-size: 15px; color: var(--muted); }
.dd-head.do { border-bottom: 2px solid var(--navy-700); }
.dd-head.do .word { color: var(--navy-700); }
.dd-head.dont { border-bottom: 2px solid #B22A2A; }
.dd-head.dont .word { color: #B22A2A; }

.dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.dd-card {
  background-color: #FFFFFF;
  background-image: linear-gradient(#FFFFFF, #FDFCFA);
  border: 1px solid #E7E1D5; border-radius: var(--r);
  box-shadow: 0 1px 1px rgba(20, 49, 94, .04), 0 14px 30px -22px rgba(20, 49, 94, .30);
  padding: 28px; display: flex; flex-direction: column; gap: 11px;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, border-color .3s ease;
}
.dd-card .row { display: flex; align-items: center; gap: 14px; margin-bottom: 2px; }
.dd-card .no {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #656E7D; font-weight: 600;
}
.dd-card h3 {
  font-size: 20px; font-weight: 700; color: var(--navy-700);
  line-height: 1.25; text-transform: uppercase; letter-spacing: .01em;
}
.dd-card p { font-size: 16px; line-height: 1.6; color: #4A5768; }

.dd-card.is-do:hover {
  border-color: var(--gold); transform: translateY(-5px);
  box-shadow: 0 2px 2px rgba(20, 49, 94, .05), 0 26px 48px -26px rgba(20, 49, 94, .38);
}
.dd-card.is-dont:hover {
  border-color: #B22A2A; transform: translateY(-5px);
  box-shadow: 0 2px 2px rgba(20, 49, 94, .05), 0 26px 48px -26px rgba(178, 42, 42, .38);
}
.dd-card.is-dont p { font-size: 17px; color: var(--ink-soft); }

.badge-do {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(212, 175, 55, .9);
  animation: badgePop .7s cubic-bezier(.2, .9, .3, 1.2) both;
}
.badge-do path { stroke-dasharray: 64; animation: drawStroke .7s cubic-bezier(.5, 0, .2, 1) .25s both; }
.badge-dont {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: stampIn .75s cubic-bezier(.2, .9, .3, 1.2) both;
}
.badge-dont .x { stroke-dasharray: 64; animation: drawStroke .6s cubic-bezier(.5, 0, .2, 1) .3s both; }

@media (prefers-reduced-motion: reduce) {
  .badge-do, .badge-dont, .badge-do path, .badge-dont .x { animation: none !important; }
  .badge-dont { transform: rotate(-4deg); }
}

/* booklet teaser: tilted card behind the cover, as in the canvas */
.tilted { position: relative; padding: 14px 0; margin: 0; }
.tilted::before {
  content: ""; position: absolute; left: 22px; right: -16px; top: 30px; bottom: 2px;
  background: linear-gradient(140deg, #E7E1D5, #D8D0C0);
  border-radius: 8px; transform: rotate(1.4deg);
}
.tilted img {
  position: relative; display: block; width: 100%; height: auto;
  aspect-ratio: 1393 / 848; object-fit: cover; border-radius: 8px;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .6);
}

/* ---------- Arizona sunset divider, full bleed ---------- */
.sunset {
  position: relative; width: 100%; overflow: hidden;
  background: var(--navy-900);
  min-height: clamp(160px, 22vw, 300px);
  display: flex; align-items: center; justify-content: center;
}
.sunset img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Ken Burns. Starts already scaled up so the frame never shows an edge as
     it drifts, and alternates so it eases back rather than snapping. */
  transform-origin: 52% 60%;
  animation: kenburns 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(-0.8%, 0.4%, 0); }
  to   { transform: scale(1.13) translate3d(0.8%, -0.6%, 0); }
}
/* soften both edges into the navy so the band sits in the page rather than on it */
.sunset::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,27,51,.55) 0%, rgba(11,27,51,0) 28%, rgba(11,27,51,0) 62%, rgba(11,27,51,.85) 100%);
}
.sunset .sunset-copy {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(28px, 5vw, 52px) var(--pad);
  max-width: 46ch;
}
.sunset .sunset-copy p {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.25;
  color: #fff; text-shadow: 0 6px 26px rgba(0,0,0,.6);
}
.sunset .sunset-copy .small {
  font-family: var(--sans); font-weight: 400; font-size: 15.5px;
  color: #E6D9BC; margin-top: 12px; text-shadow: 0 3px 14px rgba(0,0,0,.7);
}

/* ---------- night sections, deepened ---------- */
.dark { position: relative; overflow: hidden; }
.dark::before {
  content: ""; position: absolute; pointer-events: none;
  top: -40%; left: -8%; width: 62%; height: 180%;
  background: radial-gradient(closest-side, rgba(31,68,124,.55), rgba(11,27,51,0) 70%);
}
.dark::after {
  content: ""; position: absolute; pointer-events: none;
  bottom: -50%; right: -6%; width: 52%; height: 170%;
  background: radial-gradient(closest-side, rgba(212,175,55,.13), rgba(11,27,51,0) 70%);
}
.dark > * { position: relative; z-index: 1; }

/* gold hairline that opens a night section */
.dark .kicker { color: var(--gold); }

/* ---------- photo framing, day and night ---------- */
.split figure, .band, .tilted { position: relative; }
.split figure::after, .band::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r);
  pointer-events: none; box-shadow: inset 0 0 0 1px rgba(20,49,94,.07);
}
.band img, .split img { filter: saturate(1.03) contrast(1.02); }

/* warm dusk scrim for photos sitting inside night sections */
.dark .split figure::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r);
  background: linear-gradient(200deg, rgba(212,175,55,.10), rgba(11,27,51,.35));
}

/* ---------- card lift ---------- */
.card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .3s ease; }
a.card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 22px 40px -26px rgba(20,49,94,.42); }

/* ---------- endless review marquee ---------- */
.marquee {
  position: relative;
  /* fade the ends so cards enter and leave rather than getting cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-row { display: flex; overflow: hidden; padding: 8px 0; }
.marquee-track {
  display: flex; gap: 20px; flex: none; padding-right: 20px;
  will-change: transform;
  animation: marquee var(--dur, 70s) linear infinite;
}
.marquee-row.rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-100%) } }

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.m-card {
  flex: 0 0 340px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 1px 1px rgba(20,49,94,.03), 0 14px 30px -24px rgba(20,49,94,.28);
  display: flex; flex-direction: column; gap: 8px;
}
.m-card .who { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.m-card .who strong { font-family: var(--display); font-size: 16.5px; color: var(--ink); }
.m-card .who .stars { font-size: 13px; }
.m-card p {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.marquee-note { display: flex; justify-content: center; margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .sunset img, .hero-bg img { animation: none; transform: scale(1.06); }
  .marquee-track { animation: none; }
  .marquee-row { overflow-x: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track.dup { display: none; }
}
@media (max-width: 560px) { .m-card { flex-basis: 280px; } }

/* ---------- contrast corrections ---------- */
/* Gold stars sat at 2.1:1 on white. The glyphs are aria-hidden and every
   rating has a text equivalent, so the 3:1 non-text bar applies; this clears
   it while staying recognisably gold. On navy the original gold is fine. */
.stars { color: #8C6D22; }
.dark .stars, .hero .stars, .sunset .stars { color: var(--gold); }

/* Footer fine print was 4.28:1, just under the 4.5 body-text bar. */
.fine { color: #8296B5; }

/* ---------- advice panel and bonus tips ---------- */
.advice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(24px, 4vw, 44px); align-items: start;
}
.advice {
  position: relative; overflow: hidden;
  background: #F3EFE6; border-top: 3px solid #B22A2A;
  border-radius: 0 0 10px 10px; padding: 38px 36px 30px;
  display: flex; flex-direction: column; gap: 16px;
}
/* oversized quote mark, ornament only */
.advice::before {
  content: "\201C"; position: absolute; top: -26px; right: 14px;
  font-family: var(--display); font-size: 190px; line-height: 1;
  color: #B22A2A; opacity: .09; pointer-events: none;
}
.advice h2 { font-size: 26px; font-weight: 700; color: var(--navy-700); }
.advice p { font-size: 17.5px; line-height: 1.65; color: var(--ink-soft); position: relative; }
.advice .sig {
  align-self: flex-end; width: 172px; height: auto; margin-top: 4px;
  opacity: .85; mix-blend-mode: multiply;
}

.tips { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.tips h2 { font-size: 26px; font-weight: 700; color: var(--navy-700); }
.tips ul { list-style: none; display: grid; gap: 10px; }
.tips li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
  align-items: start; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 18px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.tips li:hover {
  transform: translateX(3px); border-color: var(--gold);
  box-shadow: 0 14px 26px -20px rgba(20,49,94,.4);
}
.tips li::before {
  content: "\2713"; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: var(--navy-800); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px -6px rgba(212,175,55,.9); margin-top: 1px;
}
.tips p { font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { .tips li:hover { transform: none; } }

/* ---------- reviews page header ---------- */
.reviews-hero { align-items: center; }
.score-card {
  justify-self: end; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(212,175,55,.35);
  border-radius: 16px; padding: 30px 44px;
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.8);
}
.score-card .score {
  display: block; font-family: var(--display); font-size: 74px; font-weight: 700;
  line-height: 1; color: #fff; letter-spacing: -.03em;
}
.score-card .stars { display: block; margin: 8px 0 12px; font-size: 19px; letter-spacing: 3px; }
.score-card .count { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--gold); }
.score-card .sub { font-size: 14px; color: #C9D3E2; margin-top: 2px; }

.stat-row {
  list-style: none; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat-row li {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding-top: 14px; border-top: 2px solid var(--gold);
}
.stat-row .figure {
  font-family: var(--display); font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700; color: var(--navy-700); line-height: 1;
}
.stat-row .figure .amp { font-size: .58em; color: var(--gold-dark); padding: 0 2px; }
.stat-row .label { font-size: 14.5px; color: var(--ink-soft); line-height: 1.35; }

.pull {
  margin: 0 0 40px; padding: 40px 44px 32px; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 20px 44px -34px rgba(20,49,94,.5);
}
.pull::before {
  content: "“"; position: absolute; top: -34px; left: 22px;
  font-family: var(--display); font-size: 170px; line-height: 1;
  color: var(--gold); opacity: .16; pointer-events: none;
}
.pull p {
  position: relative;
  font-family: var(--display); font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.45; color: var(--navy-700); font-weight: 500;
}
.pull figcaption {
  margin-top: 16px; display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
}
@media (max-width: 900px) { .score-card { justify-self: start; padding: 24px 32px; } }

/* ---------- social links ---------- */
.socials { list-style: none; display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(143,160,188,.3); color: #C9D3E2;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.socials a:hover {
  color: var(--navy-900); background: var(--gold);
  border-color: var(--gold); transform: translateY(-2px);
}
.socials svg { fill: currentColor; display: block; }
@media (prefers-reduced-motion: reduce) { .socials a:hover { transform: none; } }