/* Divorce Home Pro — site styles per Brand Guidelines & Style Guide (Aug 2026) */
:root {
  --navy: #153B4A;
  --teal: #2C8C89;
  --teal-dark: #23706E;
  --gold: #C8A65A;
  --light-teal: #DCEBE9;
  --ivory: #F7F4EE;
  --soft-gray: #EDF1F2;
  --charcoal: #35434A;
  --muted: #5C6B71;
  --white: #FFFFFF;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: 'Aptos', Arial, Helvetica, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Stops Safari enlarging text when a phone turns to landscape. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--charcoal); background: var(--white); font-size: 16px; line-height: 1.65; }
img { max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
h1, h2, h3 { font-family: var(--font-heading); color: var(--navy); font-weight: 600; line-height: 1.2; }

/* viewport-fit=cover lets section backgrounds run under the camera and rounded corners in
   landscape; the safe area insets keep the content itself clear of them. Zero elsewhere. */
.container { max-width: 1200px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); }
.btn { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 15px 30px; border-radius: 4px; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: #0E2B37; color: var(--white); }
.btn-outline { border: 2px solid var(--teal); color: var(--navy); padding: 13px 28px; }

/* Top bar */
.topbar { background: var(--navy); color: var(--soft-gray); font-size: 13px; letter-spacing: 0.5px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.topbar .tagline { font-style: italic; display: flex; align-items: center; gap: 8px; }
.topbar .contacts { display: flex; gap: 28px; }
.topbar a { color: var(--soft-gray); }

/* Header */
.site-header { background: var(--white); border-bottom: 1px solid var(--soft-gray); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 44px; width: 44px; border-radius: 8px; }
.brand .wordmark { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: 0.5px; }
.brand .wordmark span { color: var(--teal); }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { font-size: 15px; color: var(--charcoal); }
.main-nav a.active { font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--teal); padding-bottom: 3px; }
.main-nav a.btn-primary { color: var(--white); }
.main-nav a.btn-primary:hover { color: var(--white); }
.nav-toggle { display: none; background: none; border: 1px solid var(--soft-gray); border-radius: 6px; padding: 8px 10px; cursor: pointer; }

/* Hero */
.hero { background: var(--ivory); text-align: center; }
.hero .container { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); max-width: 20ch; }
.hero p { font-size: 18px; color: var(--charcoal); max-width: 62ch; }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Sections */
.section { padding: 80px 0; }
.section.alt { background: var(--ivory); }
.section.navy { background: var(--navy); color: var(--light-teal); }
.section.navy h2 { color: var(--white); }
.section-head { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(26px, 3.5vw, 38px); max-width: 26ch; }
.section-head p { max-width: 68ch; color: var(--muted); }
.section.navy .section-head p { color: var(--light-teal); }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { background: var(--white); border: 1px solid var(--light-teal); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 21px; }
.card p { font-size: 15px; color: var(--charcoal); }
.card .rule { width: 44px; border-top: 3px solid var(--gold); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { background: var(--white); border: 1px solid var(--light-teal); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.step .num { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: var(--white); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step h3 { font-size: 18px; }
.step p { font-size: 14px; color: var(--muted); }

.includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; max-width: 900px; margin: 0 auto; }
.include { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.include svg { flex: none; margin-top: 4px; }
.include strong { color: var(--navy); }

/* CTA band */
.cta-band { background: var(--ivory); border-top: 3px solid var(--gold); text-align: center; }
.cta-band .container { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta-band h2 { font-size: clamp(26px, 3.5vw, 38px); max-width: 24ch; }

/* Footer */
.site-footer { background: #0E2B37; color: var(--soft-gray); }
.site-footer .container { padding-top: 64px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 44px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 48px; }
.footer-brand { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--white); letter-spacing: 2px; }
.footer-brand span { color: var(--teal); }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col .label { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.footer-col a, .footer-col div { font-size: 14px; color: #C9DDD9; }
.footer-desc { font-size: 14px; line-height: 1.65; color: #AFC8C4; margin-top: 12px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #9DB8B4; flex-wrap: wrap; gap: 10px; }
.footer-bottom a { color: #9DB8B4; }

/* Responsive */
/* The nav carries eight items since the Concierge link was added. Below about 1025px the row
   no longer fits, and because .main-nav does not wrap, the links break INSIDE themselves
   instead: "Professional Network" and "Member Login" go to two lines and the header grows from
   96px to 108px. nowrap stops the mid phrase break; the 1200px handover puts the hamburger in
   before the row can overflow the viewport. */
.main-nav a { white-space: nowrap; }

@media (max-width: 1200px) {
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: flex-start; padding: 20px max(24px, env(safe-area-inset-right)) 20px max(24px, env(safe-area-inset-left)); gap: 18px; border-bottom: 1px solid var(--soft-gray); }
  /* The header is sticky, so a menu taller than the screen could never be scrolled to its
     last item. Cap it at the space under the header and let it scroll inside itself. */
  .main-nav.open { display: flex; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-toggle { display: block; }
}

@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .includes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .contacts { display: none; }
  .section { padding: 56px 0; }
}

/* Membership page */
.page-hero { background: var(--ivory); text-align: center; }
.page-hero .container { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-hero h1 { font-size: clamp(30px, 4.5vw, 46px); max-width: 24ch; }
.page-hero p { max-width: 60ch; color: var(--charcoal); font-size: 17px; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; }
.price-card { background: var(--white); border: 1px solid var(--light-teal); border-top: 5px solid var(--gold); border-radius: 12px; padding: 38px 34px; display: flex; flex-direction: column; gap: 18px; text-align: center; position: sticky; top: 96px; }
.price-card .amount { font-family: var(--font-heading); font-size: 54px; color: var(--navy); font-weight: 700; }
.price-card .term { color: var(--muted); font-size: 15px; }
.price-card .flow { font-size: 13px; color: var(--teal); letter-spacing: 0.5px; }
.cycle { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cycle .stage { background: var(--white); border-radius: 8px; padding: 20px 16px; font-size: 13.5px; font-weight: 700; color: var(--navy); text-align: center; width: 190px; display: flex; align-items: center; justify-content: center; }
.cycle .arrow { align-self: center; color: var(--teal); flex: none; }
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { position: static; }
}
@media (max-width: 960px) {
  .cycle { flex-direction: column; align-items: center; }
  .cycle .arrow { transform: rotate(90deg); }
}

/* Directory page */
.search-panel { background: var(--white); border-radius: 10px; box-shadow: 0 10px 28px rgba(21, 59, 74, 0.10); padding: 22px 24px; display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.search-field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; }
.search-field .label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); }
.search-field .control { border: 1px solid var(--light-teal); border-radius: 4px; padding: 13px 16px; font-size: 15px; color: var(--charcoal); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); }
.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.chip { background: var(--white); border: 1px solid var(--light-teal); color: var(--charcoal); padding: 7px 14px; border-radius: 18px; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pro-card { background: var(--white); border: 1px solid var(--light-teal); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.pro-card .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--light-teal); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--navy); }
.pro-card h3 { font-size: 19px; }
.pro-card .role { font-size: 14px; color: var(--teal); }
.pro-card .meta { font-size: 13px; color: var(--muted); }
.pro-card .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pro-card .tags span { background: var(--ivory); color: var(--charcoal); font-size: 12px; padding: 5px 11px; border-radius: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; background: var(--light-teal); border-radius: 20px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--navy); }
@media (max-width: 960px) { .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .result-grid { grid-template-columns: 1fr; } }

/* Profile page */
.profile-header { background: var(--white); border: 1px solid var(--light-teal); border-radius: 10px; padding: 32px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.profile-header .avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--light-teal); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 34px; font-weight: 600; color: var(--navy); flex: none; }
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.panel { background: var(--white); border: 1px solid var(--light-teal); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.panel h2 { font-size: 24px; }
/* Between 861 and 960 the two columns go equal, so the split lands on the centre line where the
   unfolded iPhone Duo hinges, rather than running the main column across it. */
@media (max-width: 960px) { .profile-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .profile-body { grid-template-columns: 1fr; } .profile-header { flex-direction: column; text-align: center; } }

/* About page */
.founder-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: start; }
.founder-grid > div:first-child { align-self: stretch; }
.founder-grid img { border-radius: 12px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.credential { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
@media (max-width: 960px) { .founder-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
@media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } .founder-grid img { height: auto; } .credentials { grid-template-columns: 1fr; } }

/* Intake form */
.intake-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.intake-progress { display: flex; flex-direction: column; gap: 8px; }
.intake-progress .bar { height: 6px; background: var(--soft-gray); border-radius: 3px; overflow: hidden; }
.intake-progress .fill { height: 6px; background: var(--teal); border-radius: 3px; transition: width 0.3s; }
.intake-progress .label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.intake-step h2 { font-size: clamp(24px, 3.5vw, 32px); margin-bottom: 8px; }
.intake-step .desc { color: var(--muted); font-size: 15px; margin-bottom: 6px; }
.intake-step .note { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.intake-step .note a { text-decoration: underline; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pick { border: 1px solid var(--light-teal); background: var(--white); border-radius: 8px; padding: 14px 16px; font-size: 14.5px; cursor: pointer; text-align: left; font-family: var(--font-body); color: var(--charcoal); transition: border-color 0.15s, background 0.15s; }
.pick:hover { border-color: var(--teal); }
.pick.on { border-color: var(--teal); background: var(--light-teal); color: var(--navy); font-weight: 700; }
.pick-group-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 18px 0 10px; }
.pick-group-label:first-child { margin-top: 0; }
.intake-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--soft-gray); padding-top: 22px; }
.intake-nav .hint { font-size: 13px; color: var(--muted); flex: 1; text-align: center; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
.field input, .field select { border: 1px solid var(--light-teal); border-radius: 6px; padding: 13px 15px; font-size: 15px; font-family: var(--font-body); color: var(--charcoal); }
.field input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--soft-gray); font-size: 14.5px; }
.review-row .k { width: 190px; flex: none; font-weight: 700; color: var(--navy); }
.review-row .v { color: var(--charcoal); }
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; } .pick-grid { grid-template-columns: 1fr 1fr; } }

.avatar img, .avatar-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pro-card .avatar { overflow: hidden; flex: none; }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; max-width: 760px; margin: 0 auto; }
.team-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.team-card img { width: 138px; height: 138px; border-radius: 50%; object-fit: cover; border: 4px solid var(--light-teal); margin-bottom: 8px; }
.team-card .name { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--navy); }
.team-card .role { font-size: 13px; color: var(--teal); }
@media (max-width: 620px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--light-teal); border-radius: 10px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0; font-family: var(--font-heading); font-size: 16.5px; font-weight: 700; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--teal); flex: none; font-family: var(--font-body); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { font-size: 14.5px; color: var(--charcoal); padding-bottom: 18px; margin: 0; }

/* Branch strip */
/* Six divisions. auto-fit drew five and an orphan on desktop and four and two at 1024, so the
   counts are explicit: three by two, then two by three, then one. Two columns start at 960
   rather than lower so the unfolded iPhone Duo gets an even count, which divides cleanly at
   its hinge, as Apple's guidance for the device asks of grids. */
.branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .branch-grid { grid-template-columns: 1fr; } }
.branch-card { display: block; background: var(--white); border: 1px solid var(--light-teal); border-top: 4px solid var(--teal); border-radius: 10px; padding: 22px; transition: transform 0.15s, box-shadow 0.15s; }
.branch-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(21, 59, 74, 0.10); }
.branch-card h3 { font-size: 19px; margin-bottom: 6px; }
.branch-card p { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.branch-card .link { font-size: 13px; font-weight: 700; color: var(--teal); }

/* Accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; z-index: 100; font-weight: 700; font-size: 14px; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.pick:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Concierge page */
.split-hero { background: var(--ivory); }
.split-hero .container { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; }
.split-hero h1 { font-size: clamp(30px, 4.5vw, 46px); margin-top: 14px; }
.split-hero p { font-size: 17px; color: var(--charcoal); margin-top: 16px; max-width: 56ch; }
.split-hero .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.split-hero figure { margin: 0; }
.split-hero img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 18px 40px rgba(21, 59, 74, 0.18); }
.split-hero figcaption { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 12px; }
@media (max-width: 960px) { .split-hero .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
@media (max-width: 860px) { .split-hero .container { grid-template-columns: 1fr; } .split-hero figure { max-width: 340px; margin: 0 auto; } }

.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .steps.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps.three { grid-template-columns: 1fr; } }

.stack { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.stack p { font-size: 16.5px; }
.stack .emphasis { font-family: var(--font-heading); font-size: 19px; color: var(--navy); }
.section.navy .stack .emphasis { color: var(--white); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.notice { background: var(--white); border: 1px solid var(--light-teal); border-left: 5px solid var(--gold); border-radius: 10px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.notice .label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #8A6D1F; }
.notice h3 { font-size: 20px; }
.notice p { font-size: 15px; color: var(--charcoal); }
.section.navy .notice { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.section.navy .notice h3 { color: var(--white); }
.section.navy .notice p { color: var(--light-teal); }

.cycle.bordered .stage { border: 1px solid var(--light-teal); }

h3.faq-label, .faq-label { max-width: 780px; margin: 0 auto 16px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.faq + .faq-label { margin-top: 44px; }

/* iPhone Duo, and every phone held sideways.
   The Duo's outer display is 466 by 678 CSS px and its inner display 669 by 951, and both turn
   sideways, so 678 by 466 is a real screen. On a screen that short a 96px sticky header and an
   88px hero padding put the first button below the fold before Safari's own bars take their
   share. Height, not width, is what runs out here. */
@media (max-height: 540px) and (orientation: landscape) {
  .site-header .container { padding-top: 8px; padding-bottom: 8px; }
  .brand img { height: 46px !important; }
  .topbar .container { padding-top: 6px; padding-bottom: 6px; }
  .hero .container { padding-top: 40px; padding-bottom: 44px; gap: 16px; }
  .page-hero .container, .split-hero .container { padding-top: 40px; padding-bottom: 44px; }
  /* The headings scale with width (5vw), which is exactly wrong on a wide, short screen: an
     874px wide phone on its side got a 44px headline in 402px of height. Scale with height. */
  .hero h1, .page-hero h1, .split-hero h1 { font-size: clamp(26px, 7.5vh, 38px); }
  .hero h1 { max-width: 30ch; }
  .hero p, .page-hero p, .split-hero p { font-size: 16px; }
}
/* The open menu is eight items; in one column that is taller than a sideways phone. Two
   columns fit it in four rows. Only where the hamburger is showing. */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1200px) {
  .main-nav.open { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 56px; row-gap: 14px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
}