:root {
  --ink: #18201f;
  --muted: #5d6662;
  --paper: #f7f3ea;
  --paper-deep: #ece4d5;
  --white: #fffdf8;
  --green: #315d55;
  --green-dark: #173d37;
  --blue: #476b79;
  --coral: #d95935;
  --coral-dark: #a83820;
  --coral-deeper: #8d2e1a;
  --coral-deepest: #7a2716;
  --line: rgba(24, 32, 31, 0.14);
  --shadow: 0 28px 70px rgba(24, 32, 31, 0.14);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.has-phone {
  padding-bottom: 0;
}

a {
  color: inherit;
}

img,
svg {
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 999px;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  /* Two-tone: the dark ring carries contrast on light backgrounds
     (14.99:1 on paper) and the light halo carries it on dark ones
     (11.74:1 on --green-dark), so the indicator is never lost. */
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 253, 248, 0.95);
  border-radius: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 14px clamp(18px, 4vw, 54px);
  background: rgba(247, 243, 234, 0.9);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 14px 40px rgba(24, 32, 31, 0.08);
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}

.brand-icon {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid rgba(255, 253, 248, 0.38);
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(24, 32, 31, 0.16);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 0.98rem;
  line-height: 1.15;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 13px 18px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: var(--white);
  /* --coral (#d95935) gave only 3.80:1 against the button text and failed
     WCAG AA. --coral-dark is 6.35:1; hover 8.14:1; active 9.70:1. */
  background: var(--coral-dark);
  box-shadow: 0 14px 28px rgba(168, 56, 32, 0.26);
}

.button-primary:hover {
  background: var(--coral-deeper);
}

.button-primary:active {
  background: var(--coral-deepest);
}

.button-secondary {
  color: var(--green-dark);
  background: rgba(255, 253, 248, 0.72);
  border-color: rgba(49, 93, 85, 0.24);
}

.button-small {
  min-height: 42px;
  padding: 11px 15px;
  font-size: 0.9rem;
}

.button-large {
  min-height: 56px;
  padding-inline: 22px;
}

.section-shell {
  width: min(1160px, calc(100% - 36px));
  margin-inline: auto;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background-image:
    linear-gradient(90deg, rgba(8, 20, 20, 0.91) 0%, rgba(8, 20, 20, 0.78) 34%, rgba(8, 20, 20, 0.45) 68%, rgba(8, 20, 20, 0.22) 100%),
    linear-gradient(180deg, rgba(8, 20, 20, 0.2) 0%, rgba(8, 20, 20, 0.08) 42%, rgba(8, 20, 20, 0.76) 100%),
    url("assets/fort-lauderdale-fl.webp");
  background-position: center;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 24%, rgba(217, 89, 53, 0.32), transparent 32%),
    linear-gradient(180deg, rgba(24, 32, 31, 0.05), rgba(24, 32, 31, 0.36));
}

.hero-inner {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 72px);
  padding: clamp(56px, 8vw, 108px) 0 clamp(46px, 6vw, 82px);
}

.hero-copy {
  width: min(100%, 1140px);
}

.hero .eyebrow {
  color: #f5c87d;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.96;
}

h1 {
  max-width: 1040px;
  font-size: clamp(3.25rem, 7vw, 7.7rem);
}

.hero h1 {
  max-width: 1120px;
  text-wrap: balance;
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.48);
}

h2 {
  font-size: clamp(2.35rem, 4.6vw, 5.1rem);
}

h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.hero-lede {
  max-width: 900px;
  margin: 28px 0 0;
  color: var(--white);
  font-size: clamp(1.12rem, 2vw, 1.5rem);
  line-height: 1.55;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.58);
}

.hero-support {
  max-width: 790px;
  margin: 18px 0 0;
  color: rgba(255, 253, 248, 0.82);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.36);
}

.hero-byline {
  margin: 22px 0 0;
  color: #f5c87d;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.microcopy {
  margin: 14px 0 0;
  color: rgba(255, 253, 248, 0.78);
  font-size: 0.92rem;
}

.hero-secondary {
  color: var(--white);
  background: rgba(255, 253, 248, 0.13);
  border-color: rgba(255, 253, 248, 0.34);
  backdrop-filter: blur(12px);
}

.hero-secondary:hover {
  background: rgba(255, 253, 248, 0.22);
}

.visual-card {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  background:
    linear-gradient(135deg, rgba(49, 93, 85, 0.12), rgba(217, 89, 53, 0.1)),
    var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.photo-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--green-dark);
  border-radius: 10px;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 32, 31, 0) 58%, rgba(24, 32, 31, 0.26)),
    linear-gradient(90deg, rgba(24, 32, 31, 0.08), rgba(24, 32, 31, 0));
}

.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  border-radius: inherit;
}

.visual-card-large {
  min-height: 610px;
}

.placeholder-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.placeholder-art span {
  position: absolute;
  display: block;
}

.visual-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 2px;
  padding: 14px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(24, 32, 31, 0.1);
  border-radius: 7px;
  backdrop-filter: blur(12px);
}

.visual-caption strong {
  font-size: 0.82rem;
}

.visual-caption span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.condo-art {
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(24, 32, 31, 0.055) 17% 17.5%, transparent 17.5% 34%, rgba(24, 32, 31, 0.055) 34% 34.5%, transparent 34.5%),
    linear-gradient(180deg, #dce5df 0%, #f7efe1 100%);
}

.letter-body {
  width: min(1440px, calc(100% - clamp(28px, 5vw, 76px)));
  max-width: none;
  margin: clamp(34px, 5vw, 70px) auto clamp(92px, 11vw, 150px);
  padding: clamp(42px, 7vw, 86px) clamp(22px, 5vw, 70px) clamp(62px, 8vw, 104px);
  background: var(--white);
  border: 1px solid rgba(24, 32, 31, 0.1);
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(24, 32, 31, 0.1);
}

.letter-body p {
  max-width: 1120px;
  margin: 0;
  color: #34413d;
  font-size: clamp(1.05rem, 1.1vw, 1.18rem);
  line-height: 1.78;
}

.letter-body p + p {
  margin-top: 18px;
}

.letter-heading {
  clear: both;
  max-width: 100%;
  margin: clamp(54px, 8vw, 86px) 0 22px;
  color: var(--green-dark);
  font-size: clamp(2.35rem, 4.25vw, 4rem);
  line-height: 0.98;
  text-wrap: normal;
}

.letter-emphasis {
  color: var(--ink);
  font-size: clamp(1.16rem, 1.4vw, 1.36rem);
  font-weight: 800;
  line-height: 1.52;
}

.letter-space {
  height: 10px;
}

.letter-signature {
  margin-top: clamp(32px, 5vw, 54px);
  color: var(--green-dark);
  font-weight: 900;
}

.text-link {
  color: var(--coral-dark);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.letter-visual {
  margin: clamp(42px, 7vw, 76px) 0;
  min-height: auto;
  border-radius: 10px;
}

.letter-visual img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  border-radius: inherit;
}

.letter-visual-wide {
  aspect-ratio: 16 / 9;
}

.letter-visual-wide img {
  height: 100%;
}

.letter-visual-pano img {
  height: auto;
}

.letter-visual-right,
.letter-visual-left {
  width: min(44%, 390px);
}

.letter-visual-right {
  float: right;
  margin: 10px 0 34px 42px;
}

.letter-visual-left {
  clear: both;
  float: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: clamp(42px, 7vw, 76px) 0;
}

.letter-visual-left img {
  height: 100%;
}

.sun {
  width: 104px;
  height: 104px;
  top: 54px;
  right: 54px;
  background: #e0a158;
  border-radius: 50%;
  opacity: 0.72;
}

.tower {
  bottom: 118px;
  background: rgba(49, 93, 85, 0.86);
  border-radius: 7px 7px 0 0;
}

.tower::before {
  content: "";
  position: absolute;
  inset: 22px 16px;
  background-image: linear-gradient(rgba(255, 253, 248, 0.36) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 253, 248, 0.36) 1px, transparent 1px);
  background-size: 28px 32px;
}

.tower-one {
  left: 44px;
  width: 138px;
  height: 360px;
}

.tower-two {
  left: 190px;
  width: 94px;
  height: 276px;
  background: rgba(71, 107, 121, 0.86);
}

.sofa {
  right: 48px;
  bottom: 138px;
  width: 210px;
  height: 86px;
  background: var(--coral);
  border-radius: 22px 22px 10px 10px;
  box-shadow: -26px 28px 0 rgba(24, 32, 31, 0.16);
}

.sofa::before,
.sofa::after {
  content: "";
  position: absolute;
  bottom: -25px;
  width: 16px;
  height: 34px;
  background: var(--ink);
}

.sofa::before {
  left: 34px;
}

.sofa::after {
  right: 34px;
}

.dolly {
  right: 120px;
  bottom: 102px;
  width: 118px;
  height: 12px;
  background: var(--ink);
  transform: rotate(-18deg);
}

.dolly::before,
.dolly::after {
  content: "";
  position: absolute;
  bottom: -24px;
  width: 22px;
  height: 22px;
  background: var(--green-dark);
  border-radius: 50%;
}

.dolly::before {
  left: 6px;
}

.dolly::after {
  right: 6px;
}

.intro-band {
  padding: 30px 0;
  color: var(--white);
  background: var(--green-dark);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 70px);
}

.intro-grid p {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.55;
}

.service-section,
.split-section,
.proof-section,
.photos-section,
.fit-section,
.contact-section {
  padding: clamp(76px, 10vw, 132px) 0;
}

.section-heading {
  max-width: 770px;
}

.section-heading p:not(.eyebrow) {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.07rem;
}

.section-heading-centered {
  margin-inline: auto;
  text-align: center;
}

.service-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 44px;
}

.feature-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  padding: clamp(28px, 4vw, 48px);
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(14, 31, 29, 0.3), rgba(14, 31, 29, 0.88)),
    linear-gradient(90deg, rgba(14, 31, 29, 0.92), rgba(14, 31, 29, 0.5)),
    url("assets/fort-lauderdale-fl-highrise.webp");
  background-position: 58% center;
  background-size: cover;
  border-radius: 8px;
}

.feature-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 24% 18%, rgba(217, 89, 53, 0.28), transparent 34%),
    linear-gradient(180deg, transparent 48%, rgba(14, 31, 29, 0.5));
}

.feature-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 253, 248, 0.05);
  mix-blend-mode: screen;
}

.panel-number {
  display: block;
  margin-bottom: 120px;
  color: rgba(255, 253, 248, 0.66);
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.feature-panel h3 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 400;
  text-shadow: 0 5px 26px rgba(0, 0, 0, 0.52);
}

.feature-panel p {
  max-width: 430px;
  margin: 18px 0 0;
  color: rgba(255, 253, 248, 0.9);
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5);
}

.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.service-list article {
  min-height: 206px;
  padding: clamp(24px, 3vw, 34px);
  background: rgba(255, 253, 248, 0.62);
}

.service-list article:last-child {
  grid-column: 1 / -1;
}

.service-list p {
  margin: 12px 0 0;
  color: var(--muted);
}

.split-section,
.proof-section,
.estate-grid,
.fit-section,
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 86px);
  align-items: center;
}

.split-copy p:not(.eyebrow),
.proof-copy p,
.estate-copy p,
.contact-copy p {
  color: var(--muted);
  font-size: 1.05rem;
}

.split-copy p:not(.eyebrow) {
  margin: 22px 0 0;
}

.inline-cta {
  display: inline-flex;
  margin-top: 24px;
  color: var(--coral-dark);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.access-art {
  background: linear-gradient(135deg, #f7efe1, #dbe5df);
}

.door {
  top: 52px;
  left: 54px;
  width: 42%;
  height: 70%;
  border: 18px solid var(--green-dark);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.floor-runner {
  right: 34px;
  bottom: 74px;
  width: 76%;
  height: 56px;
  background: rgba(217, 89, 53, 0.72);
  transform: skewX(-20deg);
}

.dresser {
  right: 70px;
  bottom: 140px;
  width: 180px;
  height: 150px;
  background: var(--blue);
  border-radius: 8px;
  box-shadow: -18px 18px 0 rgba(24, 32, 31, 0.18);
}

.dresser::before {
  content: "";
  position: absolute;
  inset: 34px 18px;
  border-top: 2px solid rgba(255, 253, 248, 0.42);
  border-bottom: 2px solid rgba(255, 253, 248, 0.42);
}

.path-line {
  left: 42px;
  right: 42px;
  bottom: 54px;
  height: 2px;
  background: rgba(24, 32, 31, 0.34);
}

.process-section {
  padding: clamp(76px, 10vw, 132px) 0;
  color: var(--white);
  background: var(--ink);
}

.process-section .eyebrow {
  color: #e0a158;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  background: rgba(255, 253, 248, 0.16);
  border: 1px solid rgba(255, 253, 248, 0.16);
  border-radius: 8px;
  overflow: hidden;
}

.process-list li {
  min-height: 330px;
  padding: 26px 22px;
  background: #202b29;
}

.process-list span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 42px;
  place-items: center;
  color: var(--ink);
  background: #e0a158;
  border-radius: 50%;
  font-weight: 900;
}

.process-list p {
  margin: 14px 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.92rem;
}

.proof-stack {
  display: grid;
  gap: 14px;
}

.mini-proof {
  padding: 26px;
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mini-proof strong,
.mini-proof span {
  display: block;
}

.mini-proof strong {
  font-size: 1.1rem;
}

.mini-proof span {
  margin-top: 8px;
  color: var(--muted);
}

.estate-section {
  padding: clamp(76px, 10vw, 132px) 0;
  background: var(--paper-deep);
}

.estate-art {
  background: linear-gradient(135deg, #f3ead9, #e0e7e0);
}

.table {
  right: 46px;
  bottom: 92px;
  width: 74%;
  height: 28px;
  background: var(--green-dark);
  border-radius: 5px;
}

.box {
  bottom: 120px;
  background: #b77b4f;
  border: 2px solid rgba(24, 32, 31, 0.24);
  border-radius: 6px;
}

.box-one {
  left: 68px;
  width: 120px;
  height: 90px;
}

.box-two {
  left: 206px;
  width: 96px;
  height: 72px;
}

.photo {
  width: 86px;
  height: 112px;
  top: 90px;
  background: var(--white);
  border: 8px solid var(--white);
  box-shadow: 0 18px 34px rgba(24, 32, 31, 0.18);
}

.photo::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: linear-gradient(135deg, var(--blue), #e0a158);
}

.photo-one {
  right: 92px;
  transform: rotate(7deg);
}

.photo-two {
  right: 190px;
  transform: rotate(-8deg);
}

.photos-section {
  grid-template-columns: 0.85fr 1fr;
  align-items: start;
  border-bottom: 1px solid var(--line);
}

.photo-instructions {
  display: grid;
  gap: 16px;
}

.photo-instructions p {
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.fit-section {
  align-items: stretch;
}

.fit-column {
  padding: clamp(28px, 4vw, 46px);
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.fit-good {
  color: var(--white);
  background: var(--green-dark);
}

.fit-good p {
  color: rgba(255, 253, 248, 0.8);
}

.fit-column h2 {
  font-size: clamp(2.2rem, 4vw, 4.2rem);
}

.fit-column p {
  margin: 20px 0 0;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--coral);
  border-radius: 50%;
}

.faq-section {
  padding: clamp(76px, 10vw, 132px) 0;
  background: var(--white);
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: clamp(32px, 7vw, 84px);
  align-items: start;
}

.faq-list {
  display: grid;
  gap: 10px;
}

details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

summary {
  cursor: pointer;
  padding: 20px 22px;
  font-weight: 800;
}

details p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--muted);
}

.contact-section {
  padding-bottom: clamp(92px, 12vw, 150px);
}

.launch-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.launch-note {
  max-width: 520px;
  margin: 16px 0 0;
}

.mobile-call-bar {
  position: fixed;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 30;
  padding: 10px;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(24, 32, 31, 0.18);
  backdrop-filter: blur(18px);
}

.mobile-call-bar .button {
  width: 100%;
}

.site-footer {
  color: rgba(255, 253, 248, 0.78);
  background:
    linear-gradient(135deg, rgba(217, 89, 53, 0.08), transparent 38%),
    var(--ink);
  border-top: 1px solid rgba(255, 253, 248, 0.12);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, 0.55fr));
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(54px, 7vw, 86px) 0 34px;
}

.footer-brand {
  max-width: 470px;
}

.footer-logo {
  color: var(--white);
}

.footer-logo .brand-icon {
  border-color: rgba(255, 253, 248, 0.28);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.footer-logo small,
.footer-brand p,
.footer-bottom p {
  color: rgba(255, 253, 248, 0.68);
}

.footer-brand p {
  margin: 18px 0 0;
}

.footer-note {
  font-size: 0.92rem;
}

.footer-nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-nav h2 {
  margin: 0 0 8px;
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-nav a {
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer-bottom {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255, 253, 248, 0.12);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.84rem;
}

.legal-main {
  padding: clamp(54px, 8vw, 96px) 0;
}

.legal-article {
  max-width: 850px;
}

.legal-article h1 {
  font-size: clamp(3rem, 7vw, 6rem);
}

.legal-article h2 {
  margin-top: 42px;
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 900;
  line-height: 1.15;
}

.legal-article p,
.legal-article li {
  color: var(--muted);
  font-size: 1.04rem;
}

.legal-article ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 22px;
}

.legal-updated {
  margin: 22px 0 0;
  color: var(--green);
  font-weight: 800;
}

.legal-back {
  display: inline-flex;
  margin-bottom: 34px;
  color: var(--green-dark);
  font-weight: 900;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 1040px) {

  .service-layout,
  .split-section,
  .proof-section,
  .estate-grid,
  .photos-section,
  .fit-section,
  .faq-grid,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    min-height: auto;
  }

  .hero {
    background-position: 63% center;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-list {
    grid-template-columns: 1fr 1fr;
  }

  .process-list li:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body.has-phone {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .site-header {
    padding: 10px 14px;
  }

  .brand small {
    display: none;
  }

  .site-header .button {
    min-height: 44px;
    padding-inline: 12px;
  }

  .section-shell {
    width: min(100% - 28px, 1160px);
  }

  .hero-inner {
    padding-top: 32px;
    gap: 26px;
  }

  .hero {
    background-image:
      linear-gradient(180deg, rgba(9, 23, 23, 0.88) 0%, rgba(9, 23, 23, 0.68) 46%, rgba(9, 23, 23, 0.84) 100%),
      url("assets/fort-lauderdale-fl-900.webp");
    background-position: center;
  }

  h1 {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }

  h2 {
    font-size: clamp(2.25rem, 10vw, 3.35rem);
  }

  .hero-actions {
    display: grid;
  }

  .letter-body {
    padding-top: 46px;
  }

  .letter-body p {
    font-size: 1rem;
    line-height: 1.72;
  }

  .letter-heading {
    margin-top: 48px;
  }

  .letter-visual,
  .letter-visual-right,
  .letter-visual-left {
    float: none;
    width: 100%;
    margin: 34px 0;
  }

  .intro-grid,
  .service-list,
  .process-list {
    grid-template-columns: 1fr;
  }

  .service-list article:last-child,
  .process-list li:last-child {
    grid-column: auto;
  }

  .feature-panel,
  .visual-card,
  .visual-card-large {
    min-height: 420px;
  }

  .process-list li {
    min-height: auto;
  }

  .process-list span {
    margin-bottom: 22px;
  }

  .panel-number {
    margin-bottom: 80px;
  }

  .mobile-call-bar:not([hidden]) {
    display: block;
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .footer-grid,
  .footer-bottom {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    display: grid;
  }

  .footer-bottom {
    display: grid;
  }
}

@media (min-width: 721px) {
  .mobile-call-bar {
    display: none;
  }
}

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

/* ---------------------------------------------------------------
   Neighborhood landing pages (Galt Mile).
   Reuses the home page hero/letter treatment; the additions below
   cover only what the home page has no equivalent for.
   --------------------------------------------------------------- */

/* Photo-backed hero: same visual result as the home page's CSS
   background hero, but the photograph is a real <img> so it is
   available to search engines and assistive technology. */
.hero-has-photo {
  background-image: none;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 20, 20, 0.91) 0%, rgba(8, 20, 20, 0.78) 34%, rgba(8, 20, 20, 0.45) 68%, rgba(8, 20, 20, 0.22) 100%),
    linear-gradient(180deg, rgba(8, 20, 20, 0.2) 0%, rgba(8, 20, 20, 0.08) 42%, rgba(8, 20, 20, 0.76) 100%);
}

.hero-actions-row {
  margin: 30px 0 0;
}

/* Breadcrumb */
.breadcrumb {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgba(24, 32, 31, 0.35);
}

/* Body lists inside the letter card. The ordered list is scoped with the child
   combinator so it cannot reach the breadcrumb's own <ol>. */
.letter-body ul,
.letter-body > ol {
  max-width: 1120px;
  margin: 20px 0 18px;
  padding-left: 22px;
  color: #34413d;
  font-size: clamp(1.05rem, 1.1vw, 1.18rem);
  line-height: 1.78;
}

.letter-body li + li {
  margin-top: 12px;
}

.letter-body li strong {
  color: var(--ink);
}

/* FAQ questions */
.faq-question {
  margin: 34px 0 10px;
  color: var(--green-dark);
  font-family: var(--sans);
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  font-weight: 900;
  line-height: 1.3;
}

/* Closing call-to-action block */
.cta-block {
  margin-top: clamp(46px, 6vw, 72px);
  padding: clamp(28px, 4vw, 44px);
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(217, 89, 53, 0.14), transparent 46%),
    var(--green-dark);
  border-radius: 12px;
}

/* Guard: .letter-heading hard-sets the dark green used on the page background, so an
   H2 placed inside this block would otherwise be dark-on-dark. The site convention is
   to keep the closing heading outside the block; this makes the other case safe too. */
.cta-block .letter-heading {
  color: var(--white);
}

.cta-block p {
  max-width: 760px;
  color: rgba(255, 253, 248, 0.86);
}

.cta-block p + p {
  margin-top: 14px;
}

.cta-block .button {
  margin-top: 24px;
}

/* Clickable call-to-action banner. The phone number is baked into the image, so
   the <a> carries no text and the img alt is its accessible name. Margins are
   twice the .letter-body paragraph gap (18px) so it reads as a section break,
   and the radius matches .cta-block. */
.cta-banner {
  display: block;
  width: 100%;
  margin-block: 36px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.cta-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.cta-banner:hover,
.cta-banner:active {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(24, 32, 31, 0.18);
}

.cta-banner:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 253, 248, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner {
    transition: none;
  }

  .cta-banner:hover,
  .cta-banner:active {
    transform: none;
  }
}

@media (max-width: 760px) {
  .hero-has-photo::after {
    background:
      linear-gradient(180deg, rgba(9, 23, 23, 0.88) 0%, rgba(9, 23, 23, 0.68) 46%, rgba(9, 23, 23, 0.84) 100%);
  }
}

/* ===============================================================
   PRIMARY NAVIGATION
   Desktop (>=901px): horizontal bar, Locations opens on hover and
   on focus (CSS only, so it works without JavaScript) and on click
   (JS enhancement). Mobile (<=900px): hamburger-toggled panel.
   =============================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-nav {
  justify-self: center;
}

.nav-menu {
  display: flex;
  gap: clamp(10px, 1.8vw, 26px);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

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

.nav-menu a,
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  color: inherit;
  font: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.nav-menu a:hover,
.nav-sub-toggle:hover {
  color: var(--ink);
}

/* current page — subtle but visible */
.nav-menu a[aria-current="page"],
.nav-sub-toggle.is-active {
  color: var(--green-dark);
  box-shadow: inset 0 -2px 0 var(--coral-dark);
}

.nav-sub-toggle svg {
  width: 11px;
  height: 11px;
  transition: transform 160ms ease;
}

.nav-has-sub[data-open] .nav-sub-toggle svg,
.nav-has-sub:hover .nav-sub-toggle svg {
  transform: rotate(180deg);
}

/* dropdown */
.nav-sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 208px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(24, 32, 31, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

.nav-sub a {
  display: block;
  width: 100%;
  padding: 11px 12px;
}

.nav-sub a:hover {
  background: var(--paper-deep);
}

/* open on hover, on keyboard focus (no JS needed), or via JS */
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub,
.nav-has-sub[data-open] .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--green-dark);
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle .nav-icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-icon-close { display: block; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: static;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-h, 76px);
    right: 0;
    left: 0;
    z-index: 25;
    display: block;
    max-height: calc(100dvh - var(--header-h, 76px));
    overflow-y: auto;
    padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 50px rgba(24, 32, 31, 0.18);
    font-size: 1.05rem;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }

  .site-nav[data-open] .nav-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu > li + li {
    border-top: 1px solid rgba(24, 32, 31, 0.1);
  }

  .nav-menu a,
  .nav-sub-toggle {
    width: 100%;
    min-height: 52px;
    padding: 14px 6px;
    border-radius: 0;
  }

  .nav-sub-toggle {
    justify-content: space-between;
  }

  .nav-menu a[aria-current="page"],
  .nav-sub-toggle.is-active {
    box-shadow: inset 3px 0 0 var(--coral-dark);
    padding-left: 12px;
  }

  /* mobile disclosure, not a floating dropdown */
  .nav-sub {
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }

  .nav-has-sub[data-open] .nav-sub { display: block; }
  .nav-has-sub:hover .nav-sub,
  .nav-has-sub:focus-within .nav-sub { display: none; }
  .nav-has-sub[data-open]:hover .nav-sub,
  .nav-has-sub[data-open]:focus-within .nav-sub { display: block; }

  .nav-sub a {
    min-height: 48px;
    padding: 12px 8px;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-sub,
  .nav-sub-toggle svg {
    transition: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   Responsiveness pass
   --------------------------------------------------------------- */

/* Sticky header would otherwise cover the top of an anchored
   section when following /#faq from another page. */
:where(h2[id], section[id], [id="faq"], [id="top"]) {
  scroll-margin-top: calc(var(--header-h, 76px) + 16px);
}

/* Header phone button was 40-42px tall; lift to the 44px minimum. */
.button-small {
  min-height: 44px;
}

/* Desktop nav items to a comfortable 44px. */
.nav-menu a,
.nav-sub-toggle {
  min-height: 44px;
}

/* Long unbroken strings (URLs, addresses) must not force a scrollbar. */
.footer-nav a,
.footer-brand p,
.legal-article p,
.letter-body p,
.letter-body li {
  overflow-wrap: anywhere;
}

/* Media never exceeds its container. */
img,
svg,
video {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* Footer link columns: 24px tall links were below the tap minimum. */
  .footer-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Body copy stays at least 16px on small screens. */
  .letter-body p,
  .letter-body li,
  .legal-article p,
  .legal-article li {
    font-size: max(1rem, clamp(1.05rem, 1.1vw, 1.18rem));
  }

  /* Keep the hero subject (truck / crew and sofa) in frame on portrait phones. */
  .hero-photo {
    object-position: 62% center;
  }
}

@media (max-width: 480px) {
  /* Headline sizing: avoid a single orphaned word at the smallest widths, and keep
     the headline short enough that the lede and the call button stay in the first
     screen on a phone. At 390x844 the longest headline on the site runs six lines
     with the button fully visible. Above 480px this block does not apply and the
     headline returns to its usual size. */
  .hero h1 {
    text-wrap: balance;
    font-size: clamp(2.4rem, 11.7vw, 2.85rem);
  }
}

/* The nav wrapper must not occupy a header grid cell on mobile, or the
   brand and the actions wrap onto separate rows and double the header
   height. The menu itself is position:fixed, so it stays out of flow. */
@media (max-width: 900px) {
  .site-nav {
    display: contents;
  }
}

/* Header stays a single row at every width. */
@media (max-width: 900px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
}

/* Below ~430px the brand subtitle pushes the actions onto a second row. */
@media (max-width: 460px) {
  .brand small {
    display: none;
  }

  .site-header {
    padding-inline: 14px;
  }
}

/* At the narrowest widths the brand name wrapped to three lines and made
   the sticky header ~93px tall. Tighten the type so it fits on two. */
@media (max-width: 460px) {
  .brand strong {
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .brand-icon {
    width: 40px;
    height: 40px;
  }

  .header-actions {
    gap: 8px;
  }

  .site-header .button {
    padding-inline: 10px;
    font-size: 0.84rem;
  }
}

@media (max-width: 380px) {
  .brand strong {
    font-size: 0.86rem;
  }

  .site-header .button {
    padding-inline: 9px;
    font-size: 0.8rem;
  }
}

/* Inside the dropdown, mark the current page with a left rule rather than
   an underline, which collided with the panel's rounded corner. */
.nav-sub a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--coral-dark);
  background: var(--paper-deep);
}

/* The brand link is a tap target too; hiding the subtitle at narrow
   widths left it at the icon's 40px height. */
@media (max-width: 900px) {
  .brand {
    min-height: 44px;
  }
}

/* .button-primary sets its own box-shadow, which out-specifies the generic
   :focus-visible halo. Re-apply the halo alongside the button's drop shadow
   so the two-tone focus ring survives on buttons too. */
.button:focus-visible {
  box-shadow: 0 0 0 6px rgba(255, 253, 248, 0.95), 0 14px 28px rgba(168, 56, 32, 0.26);
}

.cta-block .button:focus-visible,
.hero .button:focus-visible {
  box-shadow: 0 0 0 6px rgba(255, 253, 248, 0.95);
}

/* ===============================================================
   FAQ PAGE
   =============================================================== */

/* The skyline sits in the upper half of this photo; the default
   centre crop would show mostly open water on a portrait phone. */
.hero-photo-faq {
  object-position: center 32%;
}

/* Crew and dresser sit left of centre (≈16–66% of frame width); the global
   62% mobile crop would push them off the left edge on a portrait phone. */
.hero-photo-lbts {
  object-position: 45% center;
}

/* Crew and truck sit at the right edge (≈80–100% of frame width). The portrait
   crop is only ≈ 31% of the frame wide, so it cannot hold both them and the lake
   (which ends near 55%); push it right so the truck reads on a phone. */
.hero-photo-coconut-creek {
  object-position: 80% center;
}

/* Street scene with no single subject; favour the house and palms on a phone
   rather than the global 62% crop, which lands on the parked car. */
.hero-photo-wilton-manors {
  object-position: 42% center;
}

/* Lifeguard tower (1-9% of frame), palms and buildings sit in the left half;
   the pier is far right. Pushed to the left end of the useful range so the
   building cluster and palm frontage carry the phone crop; the tower itself
   sits outside any portrait window wider than ~15%. */
.hero-photo-pompano-beach {
  object-position: 25% center;
}

/* The Broadwalk paving runs diagonally through roughly 30-55% of the frame and the
   palm line stands over 40-70%; storefronts sit hard left and the sun hard right.
   Centring just left of middle keeps the Broadwalk and the whole palm line inside
   the narrow portrait window, trading away the shopfronts and the sun. */
.hero-photo-hollywood {
  object-position: 48% center;
}

/* The lake edge and the far shoreline of homes run across the lower third; the palm
   line and the sunset sit right of centre, with a single foreground frond hard left.
   Holding the frame at centre keeps the waterline, the houses and the sun together at
   390px, which is the whole subject; nothing worth keeping sits at either edge. */
.hero-photo-plantation {
  object-position: 50% center;
}

/* Downtown Oakland Park: palms and shopfronts fill the left third, the street runs to a
   vanishing point near 43%, parked cars and street trees hold the right. Centring keeps
   the palms, the receding street and the first cars together in the narrow portrait
   window, which is what says "downtown street" at a glance. */
.hero-photo-oakland-park {
  object-position: 38% 50%;
}

html:not(.js) .js-only { display: none !important; }

/* ---- toolbar ---- */
.faq-toolbar {
  position: relative;
  z-index: 15;
  padding: 16px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 901px) {
  .faq-toolbar {
    position: sticky;
    top: var(--header-h, 77px);
  }
}

.faq-toolbar-inner {
  display: grid;
  gap: 12px;
}

.faq-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: end;
}

.faq-search {
  display: grid;
  gap: 5px;
  flex: 1 1 260px;
  max-width: 420px;
}

.faq-search label {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.faq-search input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  background: var(--white);
  border: 1px solid rgba(24, 32, 31, 0.28);
  border-radius: 8px;
}

/* #5d6662 on #fffdf8 is 5.52:1 — passes AA for the placeholder. */
.faq-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.faq-search input:focus-visible {
  border-color: var(--green-dark);
}

.faq-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.faq-bulk {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.faq-bulk-btn {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--green-dark);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  background: var(--white);
  border: 1px solid rgba(24, 32, 31, 0.28);
  border-radius: 8px;
  cursor: pointer;
}

.faq-bulk-btn:hover {
  background: var(--paper-deep);
}

/* ---- category pills ---- */
.faq-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  color: var(--green-dark);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  background: var(--white);
  border: 1px solid rgba(24, 32, 31, 0.18);
  border-radius: 999px;
}

.faq-pill:hover {
  background: var(--paper-deep);
  border-color: var(--green-dark);
}

/* ---- questions ---- */
.faq-cat {
  scroll-margin-top: calc(var(--header-h, 77px) + var(--toolbar-h, 0px) + 20px);
}

.faq-item {
  scroll-margin-top: calc(var(--header-h, 77px) + var(--toolbar-h, 0px) + 20px);
  margin-top: 10px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(24, 32, 31, 0.12);
}

.faq-item > summary {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 44px;
  padding: 14px 4px;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary:hover {
  background: rgba(24, 32, 31, 0.035);
}

.faq-item > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

.faq-item summary h3 {
  margin: 0;
  max-width: 68ch;
  color: var(--green-dark);
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  font-weight: 800;
  line-height: 1.42;
}

.faq-num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.faq-chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.faq-item[open] > summary .faq-chev { transform: rotate(180deg); }

.faq-item[open] {
  background: rgba(49, 93, 85, 0.045);
  border-left: 3px solid var(--green);
  border-radius: 4px;
}

.faq-item[open] > summary { padding-left: 12px; }

.faq-item > p {
  max-width: 72ch;
  margin: 0 0 14px;
  padding: 0 4px 0 12px;
  font-size: max(1rem, clamp(1.02rem, 1.05vw, 1.1rem));
  line-height: 1.72;
}

.faq-item > summary + p { padding-top: 2px; }

.faq-copy-row { margin-bottom: 12px; }

.faq-copy {
  min-height: 34px;
  padding: 6px 11px;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  background: none;
  border: 1px solid rgba(24, 32, 31, 0.24);
  border-radius: 7px;
  cursor: pointer;
}

.faq-copy:hover { color: var(--ink); background: var(--white); }

.faq-item.is-target {
  animation: faq-flash 1600ms ease-out 1;
}

@keyframes faq-flash {
  0%, 35% { background: rgba(217, 89, 53, 0.16); }
  100% { background: rgba(49, 93, 85, 0.045); }
}

.faq-empty {
  margin: 26px 0;
  font-weight: 700;
}

.faq-backtotop { margin-top: 30px; }

@media (min-width: 901px) {
  .faq-backtotop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-chev { transition: none; }
  .faq-item.is-target { animation: none; outline: 3px solid var(--coral-dark); }
}

/* Wrapped pills made the sticky desktop toolbar 426px tall — nearly half a
   900px viewport. A single scrollable row keeps the filter and the jump
   links reachable while scrolling without swallowing the page. */
.faq-jump {
  position: relative;
}

.faq-jump ul {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.faq-jump li {
  scroll-snap-align: start;
}

.faq-pill {
  white-space: nowrap;
}

/* Below 900px the toolbar is not sticky, so a wrapped block costs nothing and every
   category is reachable without a sideways swipe. Above it the single scrolling row
   stays, for the reason given above. */
@media (max-width: 900px) {
  .faq-jump ul {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 8px;
    padding-bottom: 0;
  }

  /* The longest category labels are wider than a phone, so let them wrap too. */
  .faq-pill {
    white-space: normal;
  }
}

/* fade affordance showing the row continues */
.faq-jump::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  width: 38px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 243, 234, 0), var(--paper));
}

/* The id lives on the <h2>, so the anchor offset must be on the heading
   itself, not only on the section wrapper. */
.faq-cat > h2[id] {
  scroll-margin-top: calc(var(--header-h, 77px) + var(--toolbar-h, 0px) + 20px);
}

/* Grid and flex children default to min-width:auto, so the nowrap pill row
   expanded the toolbar column to its full 5087px content width instead of
   scrolling. Constrain the tracks so overflow-x can do its job. */
.faq-toolbar-inner > *,
.faq-controls > * {
  min-width: 0;
}

.faq-toolbar-inner {
  grid-template-columns: minmax(0, 1fr);
}

.faq-jump,
.faq-jump ul {
  max-width: 100%;
}

@media (max-width: 900px) {
  .faq-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .faq-search {
    max-width: none;
  }

  .faq-bulk {
    margin-left: 0;
  }
}

/* In the mobile column layout the flex-basis applies to the vertical axis,
   which stretched the search field to 141px tall. */
@media (max-width: 900px) {
  .faq-search {
    flex: 0 0 auto;
  }

  .faq-search input {
    height: 48px;
  }
}