:root {
  color-scheme: light;
  --ao-night: #080810;
  --ao-panel: #121922;
  --ao-line: rgba(159, 179, 200, 0.24);
  --ao-white: #f6f8fb;
  --ao-muted: #a3b5c7;
  --ao-gold: #f3b14b;
  --ao-blue: #4d8bff;
  --green: #17683a;
  --green-dark: #0f3f28;
  --gold: #f2c23d;
  --cream: #f7f6ef;
  --paper: #ffffff;
  --ink: #162019;
  --muted: #5f6e64;
  --line: #dce2d5;
  --review-drawer-width: min(390px, calc(100vw - 28px));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
}

.brand-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 34px);
  min-height: 76px;
  padding: 10px clamp(14px, 4vw, 36px);
  background: rgba(5, 13, 16, 0.96);
  border-bottom: 1px solid rgba(124, 213, 21, 0.34);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

.brand-header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 260px;
  min-width: 156px;
  color: #f8fbf1;
  text-decoration: none;
  font-size: 17px;
  font-weight: 950;
  text-transform: uppercase;
  line-height: 1;
}

.brand-header-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 8px;
  background: white;
}

.brand-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 44px);
  flex: 1 1 auto;
}

.brand-nav a {
  color: #f5f8ef;
  text-decoration: none;
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.brand-nav a:first-child {
  color: #8bd918;
}

.header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid #86d719;
  border-radius: 8px;
  color: #f8fbf1;
  text-decoration: none;
  font-weight: 950;
  white-space: nowrap;
}

body.feedback-open {
  overflow-x: hidden;
}

body.version-swapping .site-hero,
body.version-swapping .site-main {
  opacity: 0.72;
}

.ao-topbar,
.ao-hero,
.ao-main,
.site-hero,
.site-main,
.site-hero-inner,
.grid.services,
.estimate-band,
.contact {
  transition:
    width 180ms ease,
    max-width 180ms ease,
    margin 180ms ease,
    padding 180ms ease,
    font-size 180ms ease,
    transform 180ms ease;
}

a { color: inherit; }

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

.ao-shell {
  background: var(--ao-night);
  color: var(--ao-white);
  min-height: 100svh;
}

.ao-topbar,
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 12px clamp(14px, 4vw, 34px);
  backdrop-filter: blur(16px);
}

.ao-topbar {
  background: rgba(8, 8, 16, 0.88);
  border-bottom: 1px solid var(--ao-line);
}

.ao-topbar img {
  width: min(210px, 52vw);
}

.site-topbar {
  background: rgba(247, 246, 239, 0.95);
  border-bottom: 1px solid var(--line);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  font-weight: 950;
}

.site-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: white;
  border-bottom: 4px solid var(--gold);
  flex: 0 0 auto;
  font-size: 14px;
}

.site-brand span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-actions,
.ao-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.button.primary {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.button.gold {
  border-color: var(--gold);
  background: var(--gold);
  color: #202415;
}

.button.dark {
  border-color: var(--ao-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ao-white);
}

.button.ao {
  border-color: rgba(243, 177, 75, 0.7);
  background: var(--ao-gold);
  color: var(--ao-night);
}

.ao-hero {
  min-height: 62svh;
  display: grid;
  align-items: end;
  border-bottom: 1px solid var(--ao-line);
  background:
    linear-gradient(90deg, rgba(8, 8, 16, 0.98) 0%, rgba(8, 8, 16, 0.82) 48%, rgba(8, 8, 16, 0.2) 100%),
    linear-gradient(180deg, rgba(8, 8, 16, 0) 0%, rgba(8, 8, 16, 0.78) 100%),
    url("assets/aidentityone-right-hero-field.png") center right / cover no-repeat;
}

.ao-hero-inner,
.ao-main,
.site-main,
.site-hero-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.ao-hero-inner {
  padding-top: 74px;
  padding-bottom: 28px;
}

.eyebrow {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ao-hero .eyebrow,
.ao-section .eyebrow {
  color: var(--ao-gold);
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  max-width: 820px;
  font-size: clamp(39px, 8vw, 78px);
  line-height: 0.95;
}

h2 {
  font-size: clamp(25px, 5vw, 40px);
  line-height: 1.03;
}

h3 {
  font-size: 20px;
}

.ao-hero p {
  max-width: 680px;
  margin: 16px 0 0;
  color: var(--ao-muted);
  font-size: clamp(17px, 3vw, 22px);
  line-height: 1.42;
}

.ao-main {
  padding-top: 24px;
  padding-bottom: 58px;
}

.ao-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--ao-line);
}

.decision-strip {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.decision-step,
.version-card,
.panel,
.card,
.reviews,
.proof-section,
.contact,
.estimate-band {
  border-radius: 8px;
}

.decision-step {
  border: 1px solid var(--ao-line);
  background: rgba(255, 255, 255, 0.04);
  padding: 14px;
}

.decision-step strong {
  display: block;
  color: var(--ao-gold);
  margin-bottom: 4px;
}

.decision-step span {
  color: var(--ao-muted);
  line-height: 1.42;
}

.version-grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.version-card {
  border: 1px solid var(--ao-line);
  background: var(--ao-panel);
  overflow: hidden;
}

.version-card.selected {
  border-color: rgba(243, 177, 75, 0.95);
  box-shadow: 0 0 0 1px rgba(243, 177, 75, 0.3), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.version-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.version-card-body {
  display: grid;
  gap: 11px;
  padding: 16px;
}

.version-card p,
.ao-muted {
  color: var(--ao-muted);
  line-height: 1.5;
  margin: 0;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag {
  border: 1px solid var(--ao-line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--ao-muted);
  font-size: 12px;
  font-weight: 850;
}

.selected-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--ao-gold);
  color: var(--ao-night);
  font-size: 11px;
  font-weight: 950;
  vertical-align: middle;
}

.site-hero {
  min-height: 82svh;
  display: grid;
  align-items: end;
  background:
    linear-gradient(180deg, rgba(13, 26, 16, 0.16) 0%, rgba(13, 26, 16, 0.46) 54%, rgba(13, 26, 16, 0.83) 100%),
    var(--hero-image) center / cover no-repeat;
  transition: background-image 420ms ease;
}

.site-hero.b {
  background:
    linear-gradient(90deg, rgba(15, 35, 24, 0.86) 0%, rgba(15, 35, 24, 0.5) 48%, rgba(15, 35, 24, 0.1) 100%),
    var(--hero-image) center / cover no-repeat;
}

.site-hero.c {
  background:
    linear-gradient(180deg, rgba(35, 22, 12, 0.1) 0%, rgba(35, 22, 12, 0.45) 55%, rgba(35, 22, 12, 0.86) 100%),
    var(--hero-image) center / cover no-repeat;
}

.site-hero.brand-forward {
  position: relative;
  min-height: calc(100svh - 76px);
  align-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 34%, rgba(139, 217, 24, 0.16), rgba(139, 217, 24, 0) 34%),
    linear-gradient(90deg, rgba(4, 12, 14, 0.95) 0%, rgba(4, 12, 14, 0.74) 45%, rgba(4, 12, 14, 0.34) 100%),
    linear-gradient(180deg, rgba(4, 12, 14, 0.12) 0%, rgba(4, 12, 14, 0.9) 100%),
    var(--hero-image) center / cover no-repeat;
}

.site-hero.brand-forward::before {
  content: "";
  position: absolute;
  left: -120px;
  bottom: 118px;
  width: 520px;
  height: 230px;
  pointer-events: none;
  background:
    linear-gradient(36deg, transparent 0 37%, #0b321d 37% 47%, transparent 47%),
    linear-gradient(36deg, transparent 0 51%, #79d318 51% 60%, transparent 60%),
    linear-gradient(36deg, transparent 0 66%, #06421f 66% 78%, transparent 78%);
  opacity: 0.95;
}

.brand-forward .site-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
}

.site-hero-inner {
  padding-top: 38px;
  padding-bottom: 30px;
  color: white;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(380px, 560px) minmax(0, 1fr);
  grid-template-areas:
    "logo copy"
    "strip strip"
    "trust trust";
  align-items: center;
  gap: clamp(18px, 5vw, 64px);
  padding-top: clamp(26px, 6vw, 74px);
}

.hero-logo-panel {
  grid-area: logo;
  display: grid;
  place-items: center;
}

.hero-copy-panel {
  grid-area: copy;
  display: grid;
  align-content: center;
}

.approved-logo-lockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(330px, 40vw, 570px);
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.approved-logo-lockup::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 70%);
  filter: blur(8px);
  opacity: 0.72;
}

.approved-logo-lockup img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    brightness(1.38)
    contrast(1.08)
    saturate(1.18)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.84))
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.68));
}

.site-hero .eyebrow {
  color: #9bee18;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.brand-forward h1 {
  max-width: 680px;
  color: #f8fbf1;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.38);
}

.brand-forward h1::after {
  content: "";
  display: block;
  width: min(280px, 60vw);
  height: 5px;
  margin-top: 16px;
  border-radius: 99px;
  background: #86d719;
}

.site-hero p {
  max-width: 620px;
  margin: 14px 0 0;
  font-size: clamp(17px, 4vw, 22px);
  line-height: 1.35;
}

.brand-forward .site-hero p {
  color: rgba(248, 251, 241, 0.9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 460px;
  margin-top: 22px;
}

.brand-forward .button.gold {
  border-color: #86d719;
  background: linear-gradient(180deg, #9fed22, #63b60d);
  color: #071107;
  box-shadow: 0 14px 30px rgba(75, 163, 11, 0.28);
}

.brand-forward .hero-actions .button:not(.gold) {
  border-color: rgba(134, 215, 25, 0.6);
  background: rgba(255, 255, 255, 0.94);
}

.hero-service-strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-self: end;
  width: min(100%, 1220px);
  margin: 8px auto 0;
  overflow: hidden;
  border: 1px solid rgba(213, 221, 213, 0.98);
  border-radius: 20px;
  background: #ffffff;
  color: #101820;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.2);
}

.hero-service-strip span {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 118px;
  padding: 20px 26px;
  border-right: 2px solid #d8ded8;
}

.hero-service-strip span:last-child {
  border-right: 0;
}

.strip-icon,
.trust-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.strip-icon {
  background: radial-gradient(circle at 34% 24%, #128a43, #05401f 70%);
  color: #f7fff0;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.18);
}

.strip-icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-service-strip b,
.hero-trust-strip b {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-weight: inherit;
}

.hero-service-strip strong {
  color: #071107;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1;
}

.hero-service-strip small {
  color: #34433a;
  font-size: 15px;
  line-height: 1.32;
}

.hero-trust-strip {
  grid-area: trust;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 1220px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(90deg, #06421f, #087939);
  color: white;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
}

.hero-trust-strip span {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 108px;
  padding: 20px 28px;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
}

.hero-trust-strip span:last-child {
  border-right: 0;
}

.hero-trust-strip strong {
  color: #f8fbf1;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 1;
}

.hero-trust-strip small {
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  line-height: 1.32;
}

.trust-icon {
  width: 62px;
  height: 62px;
  border: 3px solid #8bd918;
  color: #8bd918;
  background: rgba(255, 255, 255, 0.06);
}

.trust-icon svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-main {
  padding-top: 24px;
  padding-bottom: 52px;
}

.workflow-section,
.proof-section {
  margin-top: 28px;
  scroll-margin-top: 18px;
}

.section-head {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
}

.section-head p,
.muted,
.card p,
.contact p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.grid {
  display: grid;
  gap: 12px;
}

.workflow-grid,
.proof-grid,
.next-step-actions {
  display: grid;
  gap: 12px;
}

.next-step-actions {
  margin-top: 14px;
}

.card,
.contact,
.reviews,
.proof-section {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 16px;
  box-shadow: 0 10px 28px rgba(35, 51, 35, 0.06);
}

/* This rule only started matching when the review section was pulled out for the
   initial release, and 42px was tuned for a layout where it never applied. */
.proof-section + .contact {
  margin-top: 18px;
}

.proof-section {
  margin-bottom: 28px;
}

/* Adjacent margins collapse to the larger of the two, so the 28px above was
   silently beating the 18px set on the contact section below. Zeroed only when
   contact is the next sibling, which leaves the spacing alone everywhere else.
   Browsers without :has() simply keep the looser 28px — slack, not breakage. */
.proof-section:has(+ .contact) {
  margin-bottom: 0;
}

/* Contact now follows the review section, so it needs the section rhythm the
   .proof-section + .contact rule used to provide. */
.customer-review-section + .contact {
  margin-top: 28px;
}

.contact .nav-actions {
  padding-top: 14px;
}

.workflow-section .card {
  box-shadow: none;
}

.workflow-section .card h3 {
  margin-bottom: 8px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--green-dark);
  color: white;
  font-weight: 950;
}

.service-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #edf6ec;
  color: var(--green-dark);
  font-size: 20px;
  font-weight: 950;
  flex: 0 0 auto;
}

.estimate-band {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 18px;
  background: var(--green-dark);
  color: white;
  border-bottom: 5px solid var(--gold);
}

.estimate-band p { color: rgba(255, 255, 255, 0.82); }

.facts {
  display: grid;
  gap: 10px;
}

.fact {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.fact strong {
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
}

.phone {
  display: inline-block;
  margin: 6px 0 10px;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1;
  font-weight: 950;
  color: var(--green-dark);
  text-decoration: none;
}

.reviews {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)),
    url("assets/customer-review-accent.png") center / cover no-repeat;
}

.proof-section {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.92)),
    url("assets/customer-review-accent.png") center / cover no-repeat;
}

.robust-proof {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 4vw, 28px);
  /* The slider's dots are the last thing in this section, and a full pad below
     them reads as dead space rather than breathing room. */
  padding-bottom: clamp(12px, 2vw, 16px);
}

.proof-section h2 {
  max-width: 880px;
}

.proof-section .muted {
  max-width: 760px;
}

.proof-intro {
  display: grid;
  gap: 8px;
}

.proof-stat-grid {
  display: grid;
  gap: 10px;
}

.proof-stat-grid article,
.review-slide,
.review-theme-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.proof-stat-grid article {
  display: grid;
  gap: 5px;
  min-height: 128px;
  padding: 14px;
}

.proof-stat-grid span,
.review-card-top span,
.review-score {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.proof-stat-grid strong {
  color: var(--green-dark);
  font-size: clamp(34px, 7vw, 54px);
  line-height: 0.92;
}

.proof-stat-grid p,
.review-slide p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.review-theme-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: rgba(23, 104, 58, 0.08);
}

.review-theme-panel h3 {
  max-width: 620px;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.05;
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: white;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px var(--line);
}

.review-slider {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.review-slider-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.review-slider-head h3 {
  max-width: 620px;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.05;
}

.slider-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.slider-button {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--green-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.slider-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.review-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 86%);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 12px;
  scroll-behavior: smooth;
  /* Proximity, not mandatory: several cards are visible at once, so the end of
     the track is not on a card boundary. Mandatory snap refuses to rest there,
     which made the last cards unreachable and the Next button dead. */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.review-track:focus {
  outline: 2px solid rgba(22, 104, 58, 0.28);
  outline-offset: 3px;
}

.review-slide {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 340px;
  padding: 16px;
  scroll-snap-align: start;
}

.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.review-score {
  color: var(--green-dark);
}

.review-slide > strong {
  color: var(--green-dark);
  font-size: 24px;
  line-height: 1;
}

.review-slide em {
  color: var(--ink);
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.18;
}

.review-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.review-detail-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #edf6ec;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.customer-review-slide {
  border-color: rgba(22, 104, 58, 0.28);
  background: #fbfcf7;
}

.review-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.review-photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line);
}

.customer-review-section {
  margin-top: 14px;
  scroll-margin-top: 18px;
}

.customer-review-panel {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(237, 246, 236, 0.92), rgba(255, 255, 255, 0.94));
  box-shadow: 0 16px 44px rgba(18, 35, 24, 0.08);
}

.customer-review-copy {
  display: grid;
  align-content: start;
  gap: 8px;
}

.customer-review-copy h2 {
  max-width: 560px;
  font-size: clamp(27px, 5vw, 42px);
  line-height: 1.05;
}

.customer-review-copy p:not(.eyebrow),
.form-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.customer-review-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(22, 104, 58, 0.16);
  border-radius: 8px;
  background: white;
}

.customer-review-form label {
  display: grid;
  gap: 7px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
}

.customer-review-form input,
.customer-review-form select,
.customer-review-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.customer-review-form textarea {
  min-height: 92px;
  resize: vertical;
}

.customer-review-form input:focus,
.customer-review-form select:focus,
.customer-review-form textarea:focus {
  outline: 2px solid rgba(22, 104, 58, 0.25);
  border-color: var(--green);
}

.photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-upload-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 11px 12px;
  border: 1px dashed rgba(22, 104, 58, 0.38);
  border-radius: 8px;
  background: #f4faf0;
  color: var(--green-dark);
  cursor: pointer;
}

.photo-upload-control:hover {
  border-color: var(--green);
  background: #edf6ec;
}

.photo-upload-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.photo-upload-control strong,
.photo-upload-control small {
  display: block;
}

.photo-upload-control small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.photo-upload:focus-within .photo-upload-control {
  outline: 2px solid rgba(22, 104, 58, 0.25);
  border-color: var(--green);
}

.photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-preview img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 63, 40, 0.24);
  cursor: pointer;
}

.slider-dot[data-active="true"] {
  width: 24px;
  background: var(--green-dark);
}

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  color: var(--green-dark);
  flex-wrap: wrap;
}

.stars {
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
}

.review-quote {
  margin: 0;
  max-width: 860px;
  color: var(--ink);
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 850;
  line-height: 1.1;
  text-wrap: balance;
}

.review-author {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.trust-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.trust-point {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.trust-point strong {
  color: var(--green-dark);
  font-size: 13px;
  text-transform: uppercase;
}

.trust-point span {
  color: var(--muted);
  line-height: 1.35;
}

.feedback-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  border: 1px solid var(--ao-line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: rgba(8, 8, 16, 0.82);
  color: var(--ao-gold);
  padding: 11px 8px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
}

.feedback-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  width: var(--review-drawer-width);
  padding: 18px;
  background: var(--ao-night);
  color: var(--ao-white);
  border-left: 1px solid var(--ao-line);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.28);
  transform: translateX(105%);
  transition: transform 180ms ease;
  overflow: auto;
}

.feedback-drawer.open {
  transform: translateX(0);
}

body.feedback-open .feedback-tab {
  opacity: 0;
  pointer-events: none;
}

.feedback-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.feedback-head p {
  color: var(--ao-muted);
  line-height: 1.45;
  margin: 8px 0 0;
}

.close-feedback {
  border: 1px solid var(--ao-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ao-white);
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
}

.feedback-form {
  display: grid;
  gap: 12px;
}

.feedback-form label,
.field-label {
  display: grid;
  gap: 6px;
  color: var(--ao-muted);
  font-size: 13px;
  font-weight: 850;
}

.feedback-form textarea {
  width: 100%;
  border: 1px solid var(--ao-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ao-white);
  padding: 12px;
  font: inherit;
}

.field-group {
  display: grid;
  gap: 7px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.choice-grid.decision {
  grid-template-columns: 1fr;
}

.choice {
  position: relative;
  min-height: 44px;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 9px;
  border: 1px solid var(--ao-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ao-muted);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.12;
  text-align: center;
}

.choice input:checked + span {
  border-color: rgba(243, 177, 75, 0.78);
  background: var(--ao-gold);
  color: var(--ao-night);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--ao-blue);
  outline-offset: 2px;
}

.feedback-form textarea {
  min-height: 120px;
  resize: vertical;
}

.feedback-actions {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}

.note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

body.modal-open {
  overflow: hidden;
}

/* The hidden attribute only carries display:none from the browser's default
   sheet, so any author display rule beats it. Every element on this page that gets
   toggled with .hidden needs to be listed here or it stays visible while the
   script believes it is gone — which is exactly what happened on 2026-07-29 when
   the quote modal kept showing Copy email and Copy number after being hidden. */
.action-modal[hidden],
.modal-toast[hidden],
.quote-form[hidden],
.modal-actions[hidden],
.modal-contact-card[hidden],
.review-overlay[hidden],
.button[hidden],
[data-slider-dots][hidden] {
  display: none;
}

.action-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
}

.action-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 12, 0.68);
  backdrop-filter: blur(8px);
}

.action-dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(760px, calc(100svh - 36px));
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(22, 104, 58, 0.28);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 28px 80px rgba(8, 18, 12, 0.28);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.action-dialog .eyebrow {
  padding-right: 78px;
  color: var(--green);
}

.modal-desc {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.modal-contact-card,
.message-card {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
}

.modal-contact-card[hidden] {
  display: none;
}

.modal-contact-card span,
.message-card strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.modal-contact-card strong {
  color: var(--green-dark);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 0.95;
}

.modal-contact-card small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.quote-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(22, 104, 58, 0.2);
  border-radius: 8px;
  background: #fbfcf7;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.quote-form label {
  display: grid;
  gap: 7px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.quote-form textarea {
  min-height: 86px;
  resize: vertical;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: 2px solid rgba(22, 104, 58, 0.25);
  border-color: var(--green);
}

.message-card p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.modal-step-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.45;
}

.modal-step-list li::marker {
  color: var(--green);
  font-weight: 950;
}

.modal-actions {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.modal-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  transform: translateX(-50%);
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--green-dark);
  color: white;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(8, 18, 12, 0.24);
}

@media (min-width: 700px) {
  .decision-strip,
  .version-grid,
  .grid.services,
  .workflow-grid,
  .proof-grid,
  .proof-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review-track {
    grid-auto-columns: minmax(310px, calc((100% - 24px) / 3));
  }

  .hero-actions,
  .nav-actions,
  .feedback-actions,
  .next-step-actions,
  .modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .estimate-band {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: center;
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-review-panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  }

  .contact {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
  }

  .contact .nav-actions {
    padding-top: 18px;
  }
}

@media (min-width: 760px) {
  body.feedback-open .ao-topbar,
  body.feedback-open .ao-hero,
  body.feedback-open .site-hero {
    width: calc(100vw - var(--review-drawer-width));
  }

  body.feedback-open .site-hero {
    min-height: min(76svh, 760px);
    background-position: center;
  }

  body.feedback-open .site-hero-inner {
    width: 100%;
    margin: 0;
    padding: clamp(30px, 4vw, 64px) clamp(18px, 3.6vw, 52px) 28px;
  }

  body.feedback-open .site-hero h1 {
    max-width: min(620px, calc(100vw - var(--review-drawer-width) - 56px));
    font-size: clamp(31px, 4.2vw, 58px);
    line-height: 1;
  }

  body.feedback-open .site-hero p {
    max-width: min(540px, calc(100vw - var(--review-drawer-width) - 48px));
    font-size: clamp(16px, 1.8vw, 20px);
  }

  body.feedback-open .hero-actions {
    max-width: min(420px, calc(100vw - var(--review-drawer-width) - 48px));
  }

  body.feedback-open .ao-main,
  body.feedback-open .site-main {
    width: min(1120px, calc(100vw - var(--review-drawer-width)));
    margin-left: 0;
    margin-right: auto;
    padding-left: clamp(22px, 4vw, 58px);
    padding-right: clamp(22px, 4vw, 58px);
  }

  body.feedback-open .grid.services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.feedback-open .workflow-grid,
  body.feedback-open .proof-grid {
    grid-template-columns: 1fr;
  }

  body.feedback-open .estimate-band,
  body.feedback-open .contact {
    grid-template-columns: 1fr;
  }

  body.feedback-open .contact {
    padding: clamp(24px, 3.4vw, 34px);
    gap: 22px;
    margin-top: 28px;
  }

  body.feedback-open .contact .phone {
    display: inline-block;
    margin: 6px 0 12px;
    font-size: clamp(30px, 4vw, 46px);
  }

  body.feedback-open .contact p {
    max-width: 620px;
    line-height: 1.55;
  }

  body.feedback-open .contact .nav-actions {
    justify-content: start;
    gap: 12px;
    margin-top: 14px;
    padding-top: 2px;
  }

  body.feedback-open .contact .button {
    min-width: 128px;
  }

  body.feedback-open .trust-points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 759px) {
  body.feedback-open .ao-topbar,
  body.feedback-open .ao-hero,
  body.feedback-open .ao-main,
  body.feedback-open .site-hero,
  body.feedback-open .site-main {
    transform: translateX(calc(var(--review-drawer-width) * -1));
  }
}

@media (max-width: 430px) {
  .ao-actions .button.dark {
    display: none;
  }

  .feedback-tab {
    display: none;
  }

  .site-brand span:last-child {
    max-width: 150px;
  }

  .trust-points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .brand-header {
    flex-wrap: wrap;
    min-height: auto;
  }

  .brand-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .hero-split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "copy"
      "strip"
      "trust";
    align-items: start;
  }

  .approved-logo-lockup {
    width: min(330px, 78vw);
  }

  .hero-service-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-service-strip span:nth-child(2) {
    border-right: 0;
  }

  .hero-service-strip span:nth-child(-n + 2) {
    border-bottom: 1px solid #d7ded5;
  }

  .hero-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-trust-strip span:nth-child(2) {
    border-right: 0;
  }

  .hero-trust-strip span:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }
}

@media (max-width: 620px) {
  .brand-header {
    padding: 10px 14px;
  }

  .brand-header-logo {
    flex-basis: 190px;
    min-width: 150px;
    font-size: 13px;
  }

  .brand-header-logo img {
    width: 42px;
    height: 42px;
  }

  .header-call {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .brand-nav {
    gap: 18px;
  }

  .brand-nav a {
    font-size: 12px;
  }

  .site-hero.brand-forward {
    min-height: auto;
  }

  .hero-split {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .approved-logo-lockup {
    width: min(270px, 82vw);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-copy-panel {
    text-align: center;
  }

  .brand-forward h1::after {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
    max-width: none;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-service-strip {
    grid-template-columns: 1fr;
  }

  .hero-service-strip span,
  .hero-service-strip span:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #d7ded5;
  }

  .hero-service-strip span {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 90px;
    padding: 14px 16px;
  }

  .strip-icon {
    width: 54px;
    height: 54px;
  }

  .strip-icon svg {
    width: 34px;
    height: 34px;
  }

  .hero-service-strip strong {
    font-size: 15px;
  }

  .hero-service-strip small {
    font-size: 13px;
  }

  .hero-service-strip span:last-child {
    border-bottom: 0;
  }

  .hero-trust-strip {
    grid-template-columns: 1fr;
  }

  .hero-trust-strip span,
  .hero-trust-strip span:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .hero-trust-strip span {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 86px;
    padding: 14px 16px;
  }

  .trust-icon {
    width: 48px;
    height: 48px;
  }

  .trust-icon svg {
    width: 30px;
    height: 30px;
  }

  .hero-trust-strip strong {
    font-size: 14px;
  }

  .hero-trust-strip small {
    font-size: 13px;
  }

  .hero-trust-strip span:last-child {
    border-bottom: 0;
  }
}

/* The cards now carry real review text instead of our own short summaries, and
   the longest review is ~780 characters. A column grid stretches every card to
   the tallest, which pushed all 34 to 718px. Clamping the body copy keeps the
   cards close to the height they were designed at. The full text of every review
   is preserved in reviews.json — only the card display is limited. */
.review-slide p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* ------------------------------------------------------- read the full review
   Cards clamp to four lines. The control below appears only on cards whose text
   is genuinely cut off — live-actions.js measures the clamp rather than guessing
   from length, so it stays right at every width. Reading a review must not cost
   the reader their place, so the overlay closes back to exactly where they were
   and focus returns to the control they pressed. */

.review-more {
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.review-more:hover { color: var(--green-dark); }

.review-more:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

.review-overlay[hidden] { display: none; }

.review-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
}

.review-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 12, 0.6);
}

.review-overlay-panel {
  position: relative;
  width: min(540px, 100%);
  max-height: min(78vh, 700px);
  overflow-y: auto;
  display: grid;
  gap: 11px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 26px 60px rgba(8, 18, 12, 0.32);
}

.review-overlay-panel:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.review-overlay-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--muted);
}

.review-overlay-panel strong {
  font-size: 19px;
}

.review-overlay-body p {
  margin: 0 0 9px;
  line-height: 1.5;
  color: var(--ink);
}

.review-overlay-body p:last-child { margin-bottom: 0; }

.review-overlay-close { justify-self: start; }

body.review-overlay-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .review-overlay-panel { animation: reviewOverlayIn 140ms ease-out; }
}

@keyframes reviewOverlayIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------ anchor the pills to the bottom
   Cards are a uniform height, but the detail pills sat wherever the review text
   happened to end — 135px down on one card, 312px on its neighbour. Anchoring
   them to the bottom gives every card a common baseline, so the pills read as one
   row across the carousel instead of a ragged staircase.

   align-content: start keeps the text at the top; margin-top: auto on the last
   block pushes it down and absorbs the slack between them. */
.review-slide {
  /* Grid packs its rows at the top and leaves the slack outside any row, so
     margin-top: auto on a grid item has nothing to absorb. A flex column gives
     the last child real free space to push against. */
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.review-slide .review-detail-list {
  margin-top: auto;
}

/* The copy / open-app button row was removed from the modal on 2026-07-29. The
   trigger that opens the modal calls preventDefault, so the tel: link on the
   button never dials — that row's "Open phone app" was the only way to place the
   call. These make the number and email in the card the action instead. */
.modal-contact-phone,
.modal-contact-email {
  text-decoration: none;
  justify-self: start;
}

.modal-contact-phone {
  font-size: clamp(27px, 5vw, 40px);
  font-weight: 950;
  line-height: 1.05;
  color: var(--green);
}

.modal-contact-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.modal-contact-phone:hover,
.modal-contact-email:hover { text-decoration: underline; }

.modal-contact-phone:focus-visible,
.modal-contact-email:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}