/* ============================================================
   Buy With Ricardo — marketing site
   Bold Modern direction, hand-authored from the design system.
   Layers on top of styles.css (tokens + base).
   ============================================================ */

/* ---- Layout wrappers ---- */
html, body { overflow-x: hidden; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; }
.wrap--wide { max-width: 1320px; }
.wrap--narrow { max-width: 780px; }
.wrap--prose { max-width: 760px; }

/* Reset heading defaults from base.css inside designed sections so the
   per-element type below wins cleanly. */
section h1, section h2, section h3 { margin: 0; text-wrap: balance; }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.005em; line-height: 1;
  border-radius: var(--radius-button); cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: transform 140ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--md { padding: 0.75rem 1.6rem; font-size: 1rem; gap: 0.5rem; }
.btn--lg { padding: 1rem 2.1rem; font-size: 1.0625rem; gap: 0.6rem; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn--secondary { background: var(--surface-card); color: var(--text-heading); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { border-color: var(--border-strong); }

/* ============================================================
   Logo lockup
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.logo:hover { text-decoration: none; }
/* Nav mark: white dark-mode logo, edge-to-edge on the dark nav (no tile) */
.logo__tile { display: inline-flex; align-items: center; box-sizing: border-box; flex: 0 0 auto; }
.logo__tile img { height: 36px; width: auto; display: block; }
/* Dark-mode mark: white, edge-to-edge, no tile (footer / dark surfaces) */
.logo__mark { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo__mark img { height: 40px; width: auto; display: block; }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.01em; white-space: nowrap; }
.logo--light .logo__word { color: var(--cream-50); }

/* ============================================================
   Nav
   ============================================================ */
.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent; transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.site-nav.is-scrolled { background: var(--ink-900); box-shadow: 0 6px 24px rgba(28,32,35,0.28); }
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.site-nav__links { display: flex; align-items: center; gap: 34px; }
.site-nav__menu { display: flex; gap: 30px; }
.site-nav__menu a { font-family: var(--font-ui); font-weight: 700; font-size: 15px; text-decoration: none; color: rgba(255,255,255,0.82); }
.site-nav__menu a:hover { text-decoration: none; color: #fff; }
.site-nav__menu a.is-active { color: #fff; }
.site-nav.menu-open { background: var(--ink-900); box-shadow: 0 6px 24px rgba(28,32,35,0.28); }
.site-nav__toggle { display: none; }
.mobile-menu { display: none; }

/* ============================================================
   HOME — hero
   ============================================================ */
.hero { position: relative; min-height: 760px; display: flex; align-items: flex-end; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(43,49,53,0.92) 0%, rgba(43,49,53,0.66) 34%, rgba(43,49,53,0.34) 60%, rgba(43,49,53,0.10) 84%, rgba(43,49,53,0) 100%),
  linear-gradient(180deg, rgba(43,49,53,0.34) 0%, rgba(43,49,53,0) 26%, rgba(43,49,53,0) 70%, rgba(43,49,53,0.34) 100%); }
.hero__inner { position: relative; width: 100%; box-sizing: border-box; padding: 0 56px 80px; }
.hero__content { max-width: 860px; }
.hero__badge { display: inline-block; background: var(--accent); color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 13px; border-radius: var(--radius-button); box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: 76px; line-height: 1.0; letter-spacing: -0.025em; color: #fff; }
.hero__lead { font-family: var(--font-body); font-size: 21px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 26px 0 32px; max-width: 600px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Stakes (peach block) ---- */
.stakes { background: var(--peach-500); padding: 104px 0; }
.stakes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.stakes h2 { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.stakes p { font-family: var(--font-body); font-size: 20px; line-height: 1.66; color: rgba(255,255,255,0.95); margin: 0; }

/* ---- How it works ---- */
.how { padding: 104px 0; }
.how__head .eyebrow { margin-bottom: 0.85rem; }
.how__head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-snug); color: var(--text-heading); }
.how__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.how__step { border-top: 2px solid var(--ink-900); padding-top: 26px; }
.how__num { font-family: var(--font-display); font-weight: 800; font-size: 78px; line-height: 1; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; user-select: none; color: var(--peach-500); }
.how__step h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--text-heading); margin: 18px 0 10px; }
.how__step p { margin: 0; font-family: var(--font-body); font-size: 17.5px; color: var(--text-muted); line-height: 1.55; }

/* ---- Meet Ricardo ---- */
.meet { padding: 0 0 104px; }
.meet__card { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.meet__photo { aspect-ratio: 825 / 1024; }
.meet__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet__panel { background: var(--ink-900); padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.meet__eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peach-300); margin-bottom: 16px; }
.meet__panel h2 { font-family: var(--font-display); font-weight: 700; font-size: 42px; color: #fff; margin: 0 0 18px; letter-spacing: -0.02em; }
.meet__panel p { font-family: var(--font-body); font-size: 19px; line-height: 1.65; color: rgba(245,236,221,0.85); margin: 0 0 28px; }
.meet__more { cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--peach-300); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.meet__more:hover { text-decoration: none; }

/* ============================================================
   Testimonials — spotlight cards on a warm band
   ============================================================ */
.testi { background: var(--cream-200); padding: 92px 0; }
.testi__wrap { max-width: 1080px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; }
.testi__head { text-align: center; }
.testi__head .eyebrow { color: var(--peach-600); }
.testi__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 42px; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-heading); margin: 12px auto 0; max-width: 22ch; }
.testi__grid { margin-top: 54px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: stretch; }
.tcard { display: flex; }
.tcard__inner { width: 100%; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border-soft); }
.tcard__strip { height: 6px; background: var(--peach-500); }
.tcard__body { padding: 38px 36px 32px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.tcard__top { display: flex; justify-content: space-between; align-items: center; }
.tstars { display: flex; gap: 3px; color: var(--peach-500); }
.tcard__mark { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 70px; line-height: 0.6; color: var(--peach-200); user-select: none; }
.tcard__quote { font-family: var(--font-body); font-size: 18.5px; line-height: 1.62; color: var(--text-muted); margin: 0; flex: 1; }
.tcard__quote strong { font-weight: 700; color: var(--text-heading); }
.tcard__foot { display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.tavatar { width: 46px; height: 46px; border-radius: 50%; background: var(--peach-500); color: #fff; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; flex: 0 0 auto; }
.tcard__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-heading); }
.tcard__meta { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-subtle); }

/* ============================================================
   Brokerage row
   ============================================================ */
.brokerage { padding: 96px 0 104px; }
.brokerage__label { text-align: center; margin-bottom: 20px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.brokerage__rule { border-top: 2px solid var(--ink-900); border-bottom: 1px solid var(--border-default); padding: 40px 0; }
.brokerow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 72px; }
.brokerow img { width: auto; object-fit: contain; opacity: 0.85; }
.brokerow img.exp { height: 46px; }
.brokerow img.utah { height: 61px; }
.brokerow img.place { height: 38px; }

/* ============================================================
   Free guide (cyan block)
   ============================================================ */
.guide { background: var(--cyan-500); padding: 88px 0; }
.guide__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.guide__eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.guide h2 { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: #fff; margin: 0 0 14px; letter-spacing: -0.02em; }
.guide p { font-family: var(--font-body); font-size: 18.5px; line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0; max-width: 460px; }
.guide__form { display: flex; flex-wrap: wrap; gap: 12px; background: var(--surface-card); padding: 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); align-items: flex-end; }
.guide__form .field { flex: 1; }
.guide__form .btn[disabled] { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Honeypot: off-screen for sighted users and screen readers, tab-skipped.
   A dumb bot fills every field and is silently dropped server side
   (functions/api/guide-signup.js). */
.guide__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Signup status line (success/error), shown after submit. Empty and
   collapsed until JS sets data-state. */
.guide__status { flex: 0 0 100%; margin: 0; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; min-height: 0; }
.guide__status:empty { display: none; }
.guide__status[data-state="success"] { color: var(--success-500); }
.guide__status[data-state="error"] { color: var(--danger-500); }

/* ---- Field (labeled input) ---- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-ui); font-weight: 700; font-size: 0.875rem; color: var(--text-heading); }
.field input { width: 100%; font-family: var(--font-body); font-size: var(--text-body-base); color: var(--text-heading); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.8rem 1rem; outline: none; transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.field input:focus { border-color: var(--peach-400); box-shadow: var(--shadow-focus); }

/* ============================================================
   Closing CTA
   ============================================================ */
.closing { background: var(--ink-900); padding: 112px 0; text-align: center; }
.closing h2 { font-family: var(--font-display); font-weight: 900; font-size: 56px; color: #fff; margin: 0 0 18px; letter-spacing: -0.025em; }
.closing p { font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: rgba(245,236,221,0.82); margin: 0 auto 32px; max-width: 720px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink-900); color: var(--cream-200); padding-top: 72px; padding-bottom: 40px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.site-footer__about { margin-top: 20px; max-width: 340px; font-family: var(--font-body); font-size: 16px; color: rgba(245,236,221,0.7); }
.site-footer__credit { display: inline-flex; align-items: center; gap: 9px; margin: 22px 0 0 -12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: rgba(245,236,221,0.5); font-family: var(--font-ui); font-size: 13px; transition: background 200ms ease, color 200ms ease; }
.site-footer__credit:hover { color: var(--cream-200); background: rgba(245,236,221,0.07); }
.site-footer__credit img { height: 24px; width: auto; display: block; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__label { font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,236,221,0.5); margin-bottom: 4px; }
.site-footer__col a { font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--cream-200); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__affil { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.site-footer__affilbox { background: var(--cream-50); border-radius: var(--radius-md); padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.site-footer__bottom { margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(245,236,221,0.16); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.site-footer__copy { font-family: var(--font-ui); font-size: 13px; color: rgba(245,236,221,0.6); }

/* Equal Housing mark */
.eho { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(245,236,221,0.7); }
.eho span { font-family: var(--font-ui); font-size: 11.5px; line-height: 1.25; font-weight: 600; letter-spacing: 0.02em; }

/* ============================================================
   Page heros (About / Contact)
   ============================================================ */
.pagehero { background: var(--ink-900); }
.pagehero--about { padding: 140px 0 88px; }
.pagehero--contact { padding: 140px 0 80px; }
.pagehero__eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--peach-300); margin-bottom: 20px; }
.pagehero h1 { font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 1; letter-spacing: -0.03em; color: #fff; margin: 0 0 22px; }
.pagehero__lead { font-family: var(--font-body); font-size: 21px; line-height: 1.55; color: rgba(245,236,221,0.85); margin: 0; max-width: 620px; }

/* ---- About prose ---- */
.about-prose { padding: 96px 0; }
.about-prose__crest { display: block; width: 112px; height: auto; margin: 0 auto 44px; }
.about-prose p { font-family: var(--font-body); font-size: 21px; line-height: 1.72; color: var(--text-body); margin: 0; }
.about-prose__lic { margin-top: 32px; padding-left: 22px; border-left: 3px solid var(--peach-500); font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--text-heading); }

/* ---- Off the clock ---- */
.offclock { padding: 8px 0 112px; }
.offclock__card { display: grid; grid-template-columns: 1.25fr 0.75fr; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.offclock__panel { background: var(--peach-500); padding: 64px clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.offclock__eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.offclock__panel h2 { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: #fff; margin: 0 0 20px; letter-spacing: -0.02em; }
.offclock__panel p { font-family: var(--font-body); font-size: 18.5px; line-height: 1.65; color: rgba(255,255,255,0.95); margin: 0 0 30px; }
.offclock__panel .btn { align-self: flex-start; }
.offclock__photo { background: var(--peach-500); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.offclock__photo img { width: 100%; height: auto; display: block; }

/* ============================================================
   Contact body
   ============================================================ */
.contact-body { padding: 88px 0 112px; }
.contact-body__grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: start; }
.contact-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text-heading); margin: 0 0 20px; }
.contact-body__spacer { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 0 0 20px; visibility: hidden; user-select: none; }

.scheduler { border: 2px dashed var(--cream-400); border-radius: var(--radius-md); background: var(--surface-sunken); padding: var(--space-9) var(--space-6); text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; min-height: 240px; justify-content: center; }
.scheduler__icon { color: var(--cyan-500); }
.scheduler__label { font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--text-heading); }
.scheduler__sub { font-family: var(--font-ui); font-size: 13.5px; max-width: 320px; }

.contact-card { background: var(--peach-500); border-radius: var(--radius-md); padding: 32px; color: #fff; }
.contact-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 10px; }
.contact-card p { font-size: 16px; color: rgba(255,255,255,0.9); margin: 0 0 22px; }
.contact-card__links { display: flex; flex-direction: column; gap: 16px; }

/* Crop the empty "Cal.com" branding strip off the bottom of the cal iframe
   (cross-origin: can't be hidden via CSS inside the iframe, and hideBranding
   requires a paid Cal plan). DESKTOP ONLY: cal's 3-pane layout keeps the
   iframe height stable, so a fixed ~72px crop lands exactly on the branding.
   On mobile cal stacks to one column and GROWS the iframe when a date is
   picked (the time-slot list + Confirm button appear below the calendar); a
   fixed-height crop with overflow:hidden clips that content and the page
   cannot scroll to it, which silently blocks every mobile booking. So on
   mobile we show the full iframe and accept the small branding strip. */
#my-cal-inline-discovery iframe { display: block; }
@media (min-width: 768px) {
  #my-cal-inline-discovery { overflow: hidden; }
  #my-cal-inline-discovery iframe { margin-bottom: -72px; }
}

/* Reserve the settled calendar height up front so the page below (orange box,
   footer) doesn't jump while cal's iframe hydrates and resizes in steps.
   Desktop = clipped 3-pane height (570-72=498); mobile = full uncropped
   stacked height (~725). min-height is only a floor: cal can grow past it
   (e.g. the slots view) without being clipped. Cal switches layouts at its
   own 768px breakpoint. */
.cal-wrap { position: relative; min-height: 498px; }
@media (max-width: 767px) { .cal-wrap { min-height: 725px; } }

/* Keep the calendar hidden until cal finishes its staged internal render
   (cross-origin iframe — can't be smoothed from here), then fade it in once.
   A centered spinner holds the reserved space until then. */
#my-cal-inline-discovery iframe { opacity: 0; transition: opacity .5s ease; }
.cal-wrap.cal-ready #my-cal-inline-discovery iframe { opacity: 1; }
.cal-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .4s ease; pointer-events: none; }
.cal-wrap.cal-ready .cal-loader { opacity: 0; }
.cal-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(43,49,53,0.15); border-top-color: #D97757; animation: cal-spin .8s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cal-spinner { animation: none; }
  #my-cal-inline-discovery iframe { transition: none; }
}

/* Orange box placed below the full-width calendar */
.contact-card--wide { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.contact-card--wide .contact-card__text h3 { margin-bottom: 6px; }
.contact-card--wide .contact-card__text p { margin: 0; }
.contact-card--wide .contact-card__links { flex-direction: row; gap: 28px; flex-shrink: 0; }
.reveal-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: #fff; background: transparent; border: none; padding: 0; cursor: pointer; text-decoration: none; text-align: left; }
.reveal-link:hover { text-decoration: none; }
.reveal-link span.u { border-bottom: 1px solid rgba(255,255,255,0.55); padding-bottom: 1px; }

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 1024px) {
  .wrap, .wrap--wide { padding: 0 32px; }
  .hero__inner { padding: 0 32px 64px; }
  .hero h1 { font-size: 60px; }
  .stakes h2 { font-size: 38px; }
  .closing h2 { font-size: 46px; }
  .pagehero h1 { font-size: 60px; }
  .testi__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Responsive — mobile
   ============================================================ */
@media (max-width: 760px) {
  .wrap, .wrap--wide, .testi__wrap { padding: 0 22px; }

  .site-nav__inner { height: 70px; gap: 12px; }
  .site-nav__menu { display: none; }
  .site-nav__cta { display: none; }
  .site-nav__links { gap: 0; min-width: 0; }
  .logo { min-width: 0; }
  .logo__word { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .logo__tile img { height: 28px; }
  .site-nav .btn--md { padding: 0.6rem 1.05rem; font-size: 0.9rem; }

  /* Hamburger toggle + dropdown menu (mobile only) */
  .site-nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; margin-right: -8px; background: transparent; border: none; cursor: pointer; }
  .site-nav__bar { display: block; width: 26px; height: 2px; margin: 0 auto; background: #fff; border-radius: 2px; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(2) { opacity: 0; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu.is-open { display: flex; flex-direction: column; padding: 8px 22px 22px; background: var(--ink-900); border-top: 1px solid rgba(255,255,255,0.08); }
  .mobile-menu a:not(.btn) { font-family: var(--font-ui); font-weight: 700; font-size: 18px; color: rgba(255,255,255,0.9); text-decoration: none; padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,0.09); }
  .mobile-menu a.is-active { color: #fff; }
  .mobile-menu .btn { margin-top: 18px; width: 100%; }

  .hero { min-height: 600px; }
  .hero__inner { padding: 0 22px 48px; }
  .hero h1 { font-size: 40px; line-height: 1.04; }
  .hero__lead { font-size: 18px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { width: 100%; }

  .stakes { padding: 64px 0; }
  .stakes__grid { grid-template-columns: 1fr; gap: 22px; }
  .stakes h2 { font-size: 30px; }
  .stakes p { font-size: 17px; }

  .how { padding: 64px 0; }
  .how__grid { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }

  .meet { padding: 0 0 64px; }
  .meet__card { grid-template-columns: 1fr; }
  .meet__photo { aspect-ratio: auto; }
  .meet__photo img { height: auto; }
  .meet__panel { padding: 40px 26px; }
  .meet__panel h2 { font-size: 32px; }

  .testi { padding: 56px 0; }
  .testi__head h2 { font-size: 28px; max-width: 18ch; }
  .testi__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
  .tcard__body { padding: 26px 24px 24px; gap: 16px; }
  .tcard__quote { font-size: 16.5px; }

  .brokerage { padding: 56px 0 64px; }
  .brokerow { gap: 36px 44px; }
  .brokerow img.exp { height: 34px; }
  .brokerow img.utah { height: 46px; }
  .brokerow img.place { height: 28px; }

  .guide { padding: 64px 0; }
  .guide__grid { grid-template-columns: 1fr; gap: 28px; }
  .guide h2 { font-size: 30px; }
  .guide__form { flex-direction: column; align-items: stretch; }
  .guide__form .btn { width: 100%; }

  .closing { padding: 72px 0; }
  .closing h2 { font-size: 36px; }
  .closing p { font-size: 18px; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .pagehero--about { padding: 116px 0 64px; }
  .pagehero--contact { padding: 116px 0 60px; }
  .pagehero h1 { font-size: 44px; }
  .pagehero__lead { font-size: 18px; }

  .about-prose { padding: 64px 0; }
  .about-prose p { font-size: 18.5px; }
  .offclock { padding: 0 0 72px; }
  .offclock__card { grid-template-columns: 1fr; }
  .offclock__panel { padding: 40px 26px; }
  .offclock__panel h2 { font-size: 30px; }

  .contact-body { padding: 56px 0 72px; }
  .contact-card--wide { flex-direction: column; align-items: flex-start; }
  .contact-card--wide .contact-card__links { flex-direction: column; gap: 14px; }
}