/* ============================================================
   Baraka Houses: public site
   One stylesheet for all five pages.
     1. Tokens         2. Shell (fixed header/footer, scrolling middle)
     3. Header & nav   4. Footer
     5. Type & layout  6. Components
     7. Forms          8. Responsive
   ============================================================ */

/* 1. TOKENS ------------------------------------------------- */
:root {
  --navy:       #34437A;   /* taken from the logo */
  --navy-deep:  #26315C;
  --navy-soft:  #EEF1F8;
  --accent:     #2E6FA6;
  --ink:        #1D2733;
  --ink-soft:   #545E6C;
  --ink-faint:  #8A93A0;
  --line:       #D7DFEB;
  /* Surface scale: four steps, each clearly distinct from its neighbours.
     0 is the page, 1 sits on the page, 2 sits on a white section, 3 is a
     highlighted aside. Panels used to be within 1% of the page colour,
     which is why they read as unstyled floating text. */
  --bg:         #E9EEF6;   /* 0: the page */
  --card:       #FFFFFF;   /* 1: a card on the page */
  --card-alt:   #F4F7FC;   /* 2: a card inside a white section */
  --panel:      #DDE6F3;   /* 3: a highlighted aside */
  --panel-line: #C6D3E7;
  --flag:       #8A5A44;   /* validation notes: deliberately not red */

  --r-sm: 9px; --r-md: 14px; --r-lg: 20px;
  --header-h: 78px;
  --footer-h: 44px;
  --wrap: 1120px;
  --measure: 800px;   /* shared reading column for text outside cards */
  --sh-1: 0 1px 2px rgba(28,40,64,.05);
  --sh-2: 0 4px 16px rgba(28,40,64,.07);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }

/* Nothing may push the layout wider than its container: long emails,
   URLs and unbroken words included. This is what keeps the page from
   drifting sideways. */
img, svg, video, table, pre { max-width: 100%; }
p, li, td, th, h1, h2, h3, dd, dt { overflow-wrap: break-word; }

/* 2. SHELL -------------------------------------------------- */
/* The page scrolls normally. Only the HEADER is pinned: it stays on
   screen at every scroll position, on every page. The footer is an
   ordinary footer at the end of the content, and the flex column below
   is what keeps it at the bottom of the window on a short page instead
   of floating halfway up. */
html, body { height: auto; overflow: visible; }
html { scroll-behavior: smooth; }

.site-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }

/* 3. HEADER & NAV ------------------------------------------- */
/* Deep navy band, pinned to the top of the window at every scroll
   position. Its own shadow separates it from the page beneath. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  background: var(--navy-deep);
  box-shadow: 0 2px 14px rgba(18, 26, 48, .22);
}
/* The header's inner row matches the page's own max-width, so the logo
   lines up with the content below it instead of hugging the window. */
.header-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;          /* the row must never break onto two lines */
  min-width: 0;
}
.header-inner > * { min-width: 0; }

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
/* The logo is navy on transparent, so it needs a light disc behind it to
   read against the navy bar. */
.brand img {
  display: block;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
}
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19.5px;
  color: #fff;
  white-space: nowrap;
}

.nav-desktop {
  display: flex;
  gap: clamp(12px, 1.9vw, 30px);
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.navlink {
  font-size: 16.5px;
  font-weight: 500;
  color: #FFFFFF;
  padding: 6px 0 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.navlink:hover { color: #fff; text-decoration: none; }
.navlink.active { color: #fff; border-bottom-color: #8FB4D9; }

.header-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.site-header .btn { min-height: 42px; padding: 10px 20px; font-size: 14.5px; }

.menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.menu-btn:hover { background: rgba(255,255,255,.12); }

/* The phone button has to stay the brightest thing in the bar. */
.site-header .btn-call { background: #fff; color: var(--navy-deep); }
.site-header .btn-call:hover { background: var(--navy-soft); color: var(--navy-deep); }

.nav-mobile {
  display: none;
  flex-direction: column;
  position: sticky;
  top: var(--header-h);
  z-index: 39;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 18px rgba(18, 26, 48, .22);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 15px clamp(16px, 4vw, 48px);
  font-size: 16px;
  font-weight: 500;
  color: #DCE4F0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  min-height: 50px;
  display: flex;
  align-items: center;
}
.nav-mobile a:hover { text-decoration: none; color: #fff; }
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.08); }

/* 4. FOOTER ------------------------------------------------- */
/* Sits at the end of the content: no longer pinned. Room to breathe,
   and still only what belongs there: who we are, where we are, and how
   to reach us. No link lists, no social icons. */
.site-footer {
  flex-shrink: 0;
  background: var(--navy-deep);
  color: #C3CEDF;
  padding: clamp(30px, 4vw, 44px) 0;
  border-top: 4px solid var(--navy);
}
.site-footer .wrap { text-align: center; }
.site-footer .foot-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}
.site-footer .foot-line {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.7;
  color: #C3CEDF;
}
.site-footer .foot-legal {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: 13px;
  color: #93A1BC;
}
.site-footer a:not(.btn) { color: #E7ECF4; }
.site-footer a:hover { color: #fff; }
.site-footer .dot { color: #6E7DA0; margin: 0 9px; }

/* 5. TYPE & LAYOUT ------------------------------------------ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.wrap-narrow { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
/* A reading column that still starts on the page's left edge: centring it
   would break the single vertical axis everything else aligns to. The width
   is shared with .lede, .section-intro and the solo hero so all free-standing
   text ends on the same right edge. */
.col-text { max-width: var(--measure); }
.section { padding: clamp(36px, 4vw, 54px) 0; }
.section-tight { padding: clamp(24px, 2.6vw, 34px) 0; }
.section-alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy-deep); margin: 0 0 14px; font-weight: 600; }
h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: clamp(23px, 2.8vw, 30px); line-height: 1.25; }
h3 { font-size: 18px; line-height: 1.35; margin-bottom: 8px; }
.card h3 { font-size: 17px; }
h4 { font-size: 16px; line-height: 1.4; margin-bottom: 6px; font-family: var(--sans); font-weight: 600; }
p  { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(16px, 1.5vw, 17.5px); line-height: 1.7; color: var(--ink-soft); max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; }
.tiny  { font-size: 13px; }

.eyebrow {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-intro { max-width: var(--measure); margin-bottom: 30px; }

.grid { display: grid; gap: 20px; align-items: stretch; }
.grid > .card { height: 100%; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 28px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.center { text-align: center; }

.ic { flex-shrink: 0; vertical-align: middle; }

/* 6. COMPONENTS --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 13px 24px;
  min-height: 48px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy-soft); color: var(--navy-deep); }
.btn-light { background: #fff; color: var(--navy-deep); }
.btn-light:hover { background: var(--navy-soft); color: var(--navy-deep); }
.btn-block { width: 100%; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: #C9D4E2; }
.card > .ic { color: var(--navy); margin-bottom: 12px; }
.card-featured { border-color: var(--navy); border-width: 1.5px; }
/* Inside a white section a white card is invisible: step down to the
   tinted surface so the card edge is always readable. */
.section-alt .card { background: var(--card-alt); }
.section-alt .panel { background: var(--panel); }
.card h3 + p, .card h4 + p { margin-top: 0; }

.band { background: var(--navy-deep); color: #fff; padding: clamp(34px, 4.5vw, 52px) 0; }
.band h2 { color: #fff; }
.band p { color: #C7D3E0; }
/* Prose links inside the band go white, but NOT buttons. A .btn-light is a
   white pill, so inheriting white text made its label invisible until hover. */
.band a:not(.btn) { color: #fff; }
.band .btn-light { color: var(--navy-deep); }
.band .btn-light:hover { color: var(--navy-deep); background: var(--navy-soft); }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
}
.panel-line { background: #fff; border: 1px solid var(--line); }

/* Long addresses must wrap inside their card, never run past its edge.
   The min-width:0 is the important half: a flex child defaults to
   min-width:auto, which refuses to shrink below its content and is what
   pushes an email address out through the side of a panel. */
.email, .nowrap-guard { overflow-wrap: anywhere; word-break: break-word; }
.list-check li > span, .list-check li > div { min-width: 0; }

/* Check / bullet lists */
.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.list-check li .ic { color: var(--accent); margin-top: 4px; }
.list-check strong { color: var(--ink); font-weight: 600; }

/* A documented service block: heading, clinical prose, then the specifics.
   Reads as a professional services schedule rather than a marketing card. */
.detail { padding: 26px 0; border-bottom: 1px solid var(--line); }
.detail:last-child { border-bottom: 0; padding-bottom: 0; }
.detail:first-child { padding-top: 0; }
.detail > h3 { font-size: 19px; margin-bottom: 10px; }
.detail p { color: var(--ink-soft); max-width: 80ch; }
.detail .list-check { margin-top: 12px; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 40px; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; gap: 0; } }

/* Definition rows: "what's included", specs, at-a-glance facts */
.spec { margin: 0; }
.spec div {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.spec div:last-child { border-bottom: 0; }
.spec dt { font-weight: 600; color: var(--ink); font-size: 15px; margin: 0; }
.spec dd { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* Numbered steps: how placement works, what happens after a referral */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--sans);
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* Daily rhythm: a simple time-labelled column */
.rhythm { display: grid; gap: 0; }
.rhythm > div {
  display: grid;
  grid-template-columns: minmax(120px, 20%) 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.rhythm > div:last-child { border-bottom: 0; }
.rhythm .when { font-weight: 600; color: var(--navy-deep); font-size: 15px; }
.rhythm p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-deep);
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-soft); font-size: 15px; max-width: var(--measure); }

/* Photographs. Dropped into photos/ they appear automatically:
   see site_photo() in shared.php and photos/README.txt. */
.photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  object-fit: cover;
  box-shadow: var(--sh-2);
}
.photo-hero { aspect-ratio: 4 / 3; }
.photo-tile { aspect-ratio: 3 / 2; border-radius: var(--r-md); }
.photo-wide { aspect-ratio: 16 / 7; }

/* Hero. With no photo yet it is a clean typographic block, never a
   placeholder box and never a drawing. */
.hero { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
.hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero-solo  { grid-template-columns: minmax(0, 1fr); }
/* Constrain the TEXT, never the container: narrowing the container would
   re-centre it and break the page's single left edge. With no hero photo
   there is nothing on the right, so this uses the full shared measure
   rather than a narrow column stranded beside empty space. */
.hero-solo > div { max-width: var(--measure); }

.alert {
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: 15px;
  margin-bottom: 24px;
  display: flex; gap: 11px; align-items: flex-start;
}
.alert .ic { flex-shrink: 0; margin-top: 3px; }
.alert-ok   { background: var(--navy-soft); color: var(--navy-deep); border: 1px solid #D5DEEF; }
.alert-flag { background: #FBF6F3; color: var(--flag); border: 1px solid #E9DBD3; }

/* 7. FORMS -------------------------------------------------- */
.field { margin-bottom: 18px; }
.field-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field-label .opt { font-weight: 500; color: var(--ink-soft); }
.req { color: var(--flag); }

.input, textarea.input, select.input {
  width: 100%;
  padding: 12px 13px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 16px;                 /* 16px stops iOS zooming on focus */
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,111,166,.14);
}
.input.err { border-color: var(--flag); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.55; }

/* Date fields. Mobile Safari and Chrome for Android both give a native
   type="date" control its own intrinsic height that ignores the input's
   own padding/line-height once a value is picked: the field visibly grows
   taller than every input around it. Turning off the native appearance
   and fixing an explicit height (not just min-height) stops that: the
   field is forced to stay the same size as every other input, empty or
   filled, on any device.
   The calendar glyph is drawn once here rather than relying on each
   browser's own icon (invisible in Safari, a plain grey square in some
   Android WebViews) so the field always shows an obvious, on-brand way to
   open the picker. The native picker indicator is kept, just made
   invisible and stretched over the whole field, so tapping anywhere in
   the box opens the date picker, not just the small icon area. */
.date-input {
  position: relative;
  height: 48px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6FA6' stroke-width='1.6'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2.3'/%3E%3Cpath d='M7 3v4M17 3v4M3.5 10h17'/%3E%3C/svg%3E");
}
.date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.helper { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.helper.err { color: var(--flag); }

.check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.check {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  min-height: 48px;
  font-size: 14.5px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.check:hover { border-color: #C6D0DC; }
.check input { width: 17px; height: 17px; accent-color: var(--navy); cursor: pointer; margin: 0; }
.check:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); }

.dropzone {
  display: block;
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 32px);
  text-align: center;
  background: #F3F7FB;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.drag { background: #E9F1F8; border-color: var(--navy); }
.dropzone .ic {
  display: block;
  margin: 0 auto 10px;
  color: var(--navy);
}
.dropzone input[type=file] { display: none; }
.file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.file-chip {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 12px;
}
.file-chip .ic { color: var(--accent); margin: 0; }

.secure-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.secure-note .ic { color: var(--navy); margin-top: 2px; }

.form-section-head {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;                 /* was clipping the cap-height */
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 30px 0 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.form-section-head:first-of-type { margin-top: 0; }

/* Entrance: one gentle move, nothing bouncing */
.page-fade { animation: fadeUp .45s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-fade { animation: none; }
  * { transition: none !important; }
}

/* 8. RESPONSIVE --------------------------------------------- */
@media (max-width: 1000px) {
  .hero-split { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sidebar { grid-template-columns: 1fr; }
}

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

@media (max-width: 820px) {
  :root { --header-h: 66px; }
  .nav-desktop { display: none; }
  .menu-btn { display: flex; }
  .brand-name { font-size: 17px; }
  .brand img { width: 32px; height: 32px; }
  .btn-call span { display: none; }        /* icon-only call button on phones */
  .btn-call { padding: 12px; min-width: 48px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid { gap: 14px; }
  .btn { width: 100%; }
  .row .btn { width: 100%; }
  .card { padding: 20px; }
  .spec div, .rhythm > div { grid-template-columns: 1fr; gap: 4px; }
  .steps li { grid-template-columns: 34px 1fr; gap: 12px; }
  .steps li::before { width: 34px; height: 34px; font-size: 14px; }
  /* On a phone the footer's contact details read better one per line
     than crammed together with separators. */
  .site-footer .dot { display: block; height: 0; overflow: hidden; margin: 0; }
  .site-footer .foot-line { font-size: 14.5px; }
}

@media (min-width: 641px) and (max-width: 820px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { width: auto; }
}

/* Narrowest phones (320–380px): scale the wordmark down, then drop it
   entirely, so the fixed-width call and menu controls always fit. The logo
   alone still identifies the site at that size. */
@media (max-width: 380px) {
  .brand-name { font-size: 15.5px; }
  .site-header { padding: 0 12px; }
  .header-inner { gap: 10px; }
}
@media (max-width: 339px) {
  .brand-name { display: none; }
}