/* 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: .74; filter: saturate(1.18) contrast(1.06) brightness(1.06);
  transform: scale(1.08);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.08) translate3d(-2.2%, 1.1%, 0); }
  to   { transform: scale(1.20) translate3d(2.2%, -1.6%, 0); }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Weighted to the left, where the words are, and light on the right so the
     photograph is actually visible. */
  background:
    linear-gradient(95deg, rgba(11,27,51,.88) 0%, rgba(11,27,51,.52) 32%, rgba(11,27,51,.08) 62%, rgba(11,27,51,0) 100%),
    linear-gradient(180deg, rgba(11,27,51,.32) 0%, rgba(11,27,51,0) 28%, rgba(8,20,38,.48) 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(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center; padding-block: clamp(48px, 6vw, 76px) clamp(52px, 7vw, 88px);
}
.eyebrow {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600;
}
/* A small diamond, not a rule. The horizontal line that stood here was being
   read as an em dash the page had rendered by mistake, which is the one
   punctuation mark this client watches for. A shape that is plainly a shape
   cannot be mistaken for one. */
.eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--gold); transform: rotate(45deg);
}
/* kept for any eyebrow that should carry no marker at all */
.eyebrow.no-rule::before { display: none; }
.hero h1 { font-size: clamp(44px, 6.4vw, 76px); line-height: .98; font-weight: 700; }
/* Flat gold rather than a gradient clipped to the text. The gradient dulled
   the word at its right end where it ran into gold-dark, and a solid fill also
   lets the heading take the same etch as every other heading. */
.hero h1 .gold { color: var(--gold-light); }
.hero p.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: #C9D3E2; max-width: 34ch; }
/* A mat, not an offset. The offset rule works on the meet page where it is
   large and clearly placed; at this size it read as the photograph having
   slipped rather than as a frame. An even gold hairline with equal margin on
   all four sides can only be deliberate. */
.hero-figure { min-width: 0; display: flex; justify-content: flex-end; }
.hero-figure .mat {
  position: relative;
  /* the mat sets the width; the photograph fills it. the other way round the
     two size off each other and collapse. */
  width: 100%; max-width: 420px; flex: 0 1 auto;
  padding: 14px;
  border: 1px solid rgba(212,175,55,.55);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 26px 54px -28px rgba(0,0,0,.75);
}
/* a second hairline just inside, the way a mounted print is double ruled */
.hero-figure .mat::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 8px; pointer-events: none;
}
.hero-figure img {
  position: relative; display: block;
  width: 100%; max-height: min(46vh, 402px);
  object-fit: cover; object-position: 50% 20%;
  border-radius: 6px;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.hero .btn-row { margin-top: 22px; }
.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; }

/* Score, stars and count read as one unit on the left, the link sits opposite,
   and the sentence runs full width beneath. Everything used to be a flex item
   on the same row, so each part wrapped onto a line of its own. */
.rating-band {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 24px; row-gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 26px;
}
.rb-score { display: flex; align-items: center; gap: 14px; }
.rb-score .g-mark svg { display: block; width: 30px; height: 30px; }
.rating-band .big {
  font-family: var(--display); font-size: 40px; font-weight: 700;
  color: var(--navy-700); line-height: 1;
}
.rb-meta { display: flex; flex-direction: column; gap: 3px; }
.rb-meta .stars { font-size: 15px; letter-spacing: 2px; line-height: 1; }
.rb-count { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rating-band .g-btn { justify-self: end; }
.rb-note {
  grid-column: 1 / -1; font-size: 15px; line-height: 1.55;
  color: var(--ink-soft); max-width: 74ch;
}
@media (max-width: 640px) {
  .rating-band { grid-template-columns: 1fr; }
  .rating-band .g-btn { justify-self: start; }
}

/* ---------- 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: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid rgba(143, 160, 188, .2);
  font-size: 12.5px; color: #8FA0BC;
}
.hive strong { font-family: var(--display); font-size: 13px; color: var(--gold); font-weight: 600; }

/* ---------- 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) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-figure { justify-content: center; }
  .hero-figure img { max-height: 40vh; }
  .hero-figure .mat { padding: 11px; max-width: 340px; }
  .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. The backing card was a pale grey, which on the navy section
   sat at almost the same value as the cover in front of it, so the tilt read
   as a smudge rather than a second card. Gold separates the two. */
.tilted { position: relative; padding: 14px 0; margin: 0; }
.tilted::before {
  content: ""; position: absolute; left: 20px; right: -18px; top: 26px; bottom: -6px;
  background: linear-gradient(140deg, var(--gold), var(--gold-dark));
  border-radius: 8px; transform: rotate(2deg);
  box-shadow: 0 22px 44px -26px rgba(0,0,0,.75);
}
.tilted img {
  position: relative; display: block; width: 100%; height: auto;
  aspect-ratio: 1360 / 616; object-fit: contain; 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 photographs sitting inside night sections. Excludes the
   booklet teaser, whose ::before is its own backing card; without this the two
   rules fight over the same pseudo-element and this one wins on specificity. */
.dark .split figure:not(.tilted)::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 {
  /* the full lockup rather than the wordmark alone. no blend mode: the png
     carries its own transparency and multiply muddied the gold. */
  align-self: flex-end; width: 150px; height: auto; margin-top: 10px;
}

.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; } }

/* ---------- full lockup ---------- */
.lockup { margin: 26px 0 0; max-width: 340px; }
.lockup img { width: 100%; height: auto; display: block; }
/* the script in the mark is black, so on the navy footer it sits on white */
.lockup-centre { margin: 8px auto 40px; max-width: 300px; }

/* ---------- zip search ---------- */
.zip-search { margin-top: 18px; max-width: 400px; }
.zip-search label {
  display: block; font-size: 13.5px; color: #C9D3E2; margin-bottom: 8px;
}
.zip-row { display: flex; gap: 0; }
/* one control rather than two: the field and the button share a pill, so it
   reads as a single thing instead of a stack of parts */
.zip-row input {
  flex: 1 1 auto; min-width: 0; padding: 13px 18px;
  border: 1px solid rgba(255,255,255,.28); border-right: 0;
  border-radius: 999px 0 0 999px;
  background: rgba(255,255,255,.10); color: #fff;
  font-family: var(--sans); font-size: 16px;
}
.zip-row input::placeholder { color: #8FA0BC; }
.zip-row input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.16); }
.zip-row .btn {
  flex: 0 0 auto; padding: 13px 26px; border-radius: 0 999px 999px 0;
  box-shadow: none; font-size: 15px;
}
.zip-row .btn:hover { transform: none; }
.zip-row:focus-within { box-shadow: 0 0 0 3px rgba(212,175,55,.35); border-radius: 999px; }
.zip-hint { font-size: 13px; color: #8FA0BC; margin-top: 8px; }

.zip-result { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #C9D3E2; }
.zip-result.ok { color: #C9D3E2; }
.zip-result.err { color: #F7DFA0; font-weight: 600; }
.zip-result.offer {
  background: rgba(255,255,255,.07); border: 1px solid rgba(212,175,55,.34);
  border-radius: 10px; padding: 16px 18px; color: #E4EAF3;
}
.zip-result.offer p { margin-bottom: 12px; }
.zip-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.zip-actions .btn { padding: 10px 18px; font-size: 14px; background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.zip-actions .btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.08); }
.zip-talk { font-size: 14px; color: #C9D3E2; text-decoration: underline; }
.zip-talk:hover { color: var(--gold); }

/* ---------- google attribution on the rating band ---------- */
.rating-band .g-mark { display: flex; align-items: center; flex: 0 0 auto; }
.rating-band .g-mark svg { display: block; }
.g-btn { display: inline-flex; align-items: center; gap: 9px; }
.g-btn::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 auto;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.6 30.2.5 24 .5 14.6.5 6.5 5.8 2.6 13.6l7.8 6c1.9-5.7 7.2-10.1 13.6-10.1z"/><path fill="%234285F4" d="M46.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9c4.4-4.1 7-10.1 7-17.4z"/><path fill="%23FBBC05" d="M10.4 28.4a14.5 14.5 0 0 1 0-8.8l-7.8-6a24 24 0 0 0 0 20.8l7.8-6z"/><path fill="%2334A853" d="M24 47.5c6.2 0 11.5-2 15.3-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.7 2.3-6.4 0-11.7-4.4-13.6-10.1l-7.8 6C6.5 42.2 14.6 47.5 24 47.5z"/></svg>') center/contain no-repeat;
}

/* the tagline mark, closing the home page under their name */
.spouses-mark { display: block; width: 100%; max-width: 340px; height: auto; margin-top: 6px; }

/* ---------- the tagline mark, overlapping a portrait ---------- */
/* Navy and red artwork on a navy section leaves 91% of its ink under 3:1, so
   it sits on a light card. That card is also what makes the overlap read as
   placed rather than as the mark having drifted onto the photograph. */
.mark-badge {
  position: absolute; left: -14px; bottom: -18px; z-index: 3;
  background: #fff; border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.55);
  border: 1px solid rgba(212,175,55,.4);
}
.mark-badge img { display: block; width: 150px; height: auto; }
.framed .mark-badge { left: auto; right: -14px; bottom: -20px; }
@media (max-width: 900px) {
  .mark-badge { left: -8px; bottom: -14px; padding: 8px 11px; }
  .mark-badge img { width: 118px; }
  .framed .mark-badge { right: -8px; left: auto; }
}

/* ---------- etched headings ---------- */
/* A single hairline of light beneath the letterform, which is what makes type
   look cut into a surface rather than printed on it. Kept to one pixel and
   well under half opacity: any more and it reads as a bevel from 2005. */
h1, h2, .dd-head .word, .rating-band .big, .score-card .score {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
/* On dark grounds the light comes from the other side, so the hairline goes
   above and a soft shadow sits beneath. */
.hero h1, .dark h2, .cta-band h2, .sunset-copy p, .score-card .score,
.dark .dd-head .word {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .28);
}
/* now a solid colour, so it takes the same etch as the rest of the heading */
@media (prefers-reduced-motion: no-preference) { }

/* A list of places separates with the same diamond rather than leading with
   one and using dots between, which read as two different systems at once. */
.eyebrow.places { flex-wrap: wrap; row-gap: 4px; }
.eyebrow.places::before { display: none; }
.eyebrow.places span { display: inline-flex; align-items: center; }
.eyebrow.places span + span::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto;
  margin: 0 10px; background: var(--gold); transform: rotate(45deg);
}