/* ==========================================================================
   TrueHome Inspection — production stylesheet
   MOBILE-FIRST: base rules target the phone; min-width queries enhance upward.
   Brand: Terracotta & Deep Marine — marine #2E8A72 (structure) + terracotta #C2582F (CTA) · Inter.
   ========================================================================== */

/* Self-hosted Inter (variable font, Latin subset) — no external Google Fonts
   request, so --font:"Inter",... actually loads instead of silently falling
   back to system fonts. Single variable-weight woff2 covers 400–700. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/inter-var-latin.woff2") format("woff2");
}

:root{
  --ground:#F7F3EE; --surface:#FFFFFF; --ink:#163039; --ink-soft:#566A70;
  --accent:#2E8A72; --accent-strong:#246E5B; --accent-ink:#FFFFFF; --accent-tint:#E7F1ED;
  --line:#E7E0D8; --ps-blue:#2456BD; --ps-blue-tint:#EAF1FD; --flag:#CC2E2E; --warm:#A8481F;
  --cta:#C2582F; --cta-strong:#A23F22; --cta-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(23,39,59,.05),0 10px 34px rgba(23,39,59,.07);
  --maxw:1080px; --readw:660px;
  --fs-eyebrow:.78rem; --lh-body:1.62;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0E2027; --surface:#14303A; --ink:#EEF3F2; --ink-soft:#9DB2B4;
    --accent:#5FC2A7; --accent-strong:#7BD3BB; --accent-ink:#08130F; --accent-tint:#173029;
    --line:#23424A; --ps-blue:#60A5FA; --ps-blue-tint:#16243A; --flag:#F26D6D; --warm:#E0916A;
    --cta:#D97444; --cta-strong:#C15C30; --cta-ink:#1B0E07;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 44px rgba(0,0,0,.38);
  }
}
:root[data-theme="light"]{
  --ground:#F7F3EE; --surface:#FFFFFF; --ink:#163039; --ink-soft:#566A70;
  --accent:#2E8A72; --accent-strong:#246E5B; --accent-ink:#FFFFFF; --accent-tint:#E7F1ED;
  --line:#E7E0D8; --ps-blue:#2456BD; --ps-blue-tint:#EAF1FD; --flag:#CC2E2E; --warm:#A8481F;
  --cta:#C2582F; --cta-strong:#A23F22; --cta-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(23,39,59,.05),0 10px 34px rgba(23,39,59,.07);
}
:root[data-theme="dark"]{
  --ground:#0E2027; --surface:#14303A; --ink:#EEF3F2; --ink-soft:#9DB2B4;
  --accent:#5FC2A7; --accent-strong:#7BD3BB; --accent-ink:#08130F; --accent-tint:#173029;
  --line:#23424A; --ps-blue:#60A5FA; --ps-blue-tint:#16243A; --flag:#F26D6D; --warm:#E0916A;
  --cta:#D97444; --cta-strong:#C15C30; --cta-ink:#1B0E07;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 44px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:700;line-height:1.14;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* Long-form guide pages read as a centered column instead of a left-hugging
   block against a wide empty right. Grids inside still sit within it. */
main.reading .wrap{max-width:820px}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--warm);margin-bottom:14px}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:var(--readw)}
.muted{color:var(--ink-soft)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:12px;top:12px}
/* screen-reader-only: exposed to assistive tech, removed from visual layout */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- nav (mobile-first: brand + burger; links hidden behind the burger) ---- */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;
  font-size:2.2rem;background:none;border:0;color:var(--ink);padding:0;text-decoration:none}
/* Original lockup rides on a FIXED light card — literal colors, no theme tokens,
   so light and dark mode render the logo identically (theme-immune by construction). */
.brand .lockup{height:42px;width:auto;display:block;box-sizing:content-box;flex:none;
  background:#F7F5F1;border:1px solid #E4DED5;border-radius:11px;padding:6px 12px}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
  align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:6px 0}
.nav-links.open{display:flex}
.nav-links a{font-size:1rem;color:var(--ink-soft);text-decoration:none;font-weight:500;
  padding:14px 20px;border-top:1px solid var(--line)}
.nav-links a:first-child{border-top:0}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;padding:0}
.icon-btn:hover{color:var(--ink)}
.nav-actions .btn-primary{display:none}
.nav-actions .pill{display:none}

/* ---- buttons (pill shape — Dan's call) ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:.98rem;
  font-weight:600;padding:13px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .16s ease,background .18s,border-color .18s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cta);color:var(--cta-ink);
  box-shadow:0 6px 18px color-mix(in srgb,var(--cta) 30%,transparent),var(--shadow)}
.btn-primary:hover{background:var(--cta-strong);
  box-shadow:0 9px 26px color-mix(in srgb,var(--cta) 42%,transparent),var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cta);color:var(--cta)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* PermitSearch touchpoints wear PermitSearch's blue — a visual handshake to the sibling site.
   The pill is the SECONDARY action: outline + smaller, so the filled Book CTA stays dominant. */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;white-space:nowrap;
  padding:10px 18px;border-radius:999px;background:transparent;color:var(--accent);text-decoration:none;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);transition:border-color .18s,background .18s}
.pill:hover{border-color:var(--accent);background:var(--accent-tint)}

/* ---- sections / rhythm ---- */
.band{padding:56px 0}
.band + .band{border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---- hero ---- */
.hero{padding-top:44px;padding-bottom:40px}
.hero h1{font-size:clamp(2rem,7vw,3.5rem)}
.hero .lead{margin-top:18px;font-size:1.12rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.hero-note{margin-top:22px;font-size:.9rem;color:var(--ink-soft);display:flex;gap:10px;align-items:flex-start}
.hero-note svg{color:var(--accent);flex:none;margin-top:2px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
/* Solo hero (no side image): one centered column that reads as a deliberate
   statement rather than a 2-col grid with an empty half. Compound selector so it
   wins over the desktop 2-col rule regardless of source order. */
.hero-grid.hero-solo{grid-template-columns:1fr}
.hero-solo .hero-copy{max-width:730px;margin-inline:auto;text-align:center}
.hero-solo .hero-copy .lead{margin-inline:auto}
.hero-solo .hero-cta{justify-content:center}
.hero-solo .hero-note{justify-content:center}
.hero-art{display:flex;justify-content:center;order:-1}
.hero-art svg{width:100%;max-width:230px;height:auto}
.hero-art .mag{animation:floatMag 5.5s ease-in-out infinite;transform-origin:center}
.hero-art .cloud-a{animation:drift 8s ease-in-out infinite}
.hero-art .cloud-b{animation:drift 11s ease-in-out infinite reverse}
@keyframes floatMag{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-7px)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}

/* ---- step / outcome grids (mobile = single column) ---- */
.grid{display:grid;gap:18px}
.steps{grid-template-columns:1fr;margin-top:32px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 22px;
  box-shadow:var(--shadow)}
.step .ico{color:var(--accent);margin-bottom:16px;display:block}
.step .n{font-size:.76rem;font-weight:700;letter-spacing:.12em;color:var(--warm);margin-bottom:8px}
.step h3{font-size:1.12rem;margin-bottom:8px}
.step p{font-size:.95rem;color:var(--ink-soft)}
.outcomes{grid-template-columns:1fr;margin-top:32px;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.outcome{background:var(--surface);padding:24px 24px;display:flex;gap:15px;align-items:flex-start}
.outcome .tick{color:var(--accent);flex:none;margin-top:3px}
.outcome p{font-size:1rem}
.outcome b{color:var(--ink)}

/* ---- why ---- */
.why-list{margin-top:32px;display:flex;flex-direction:column;gap:0}
.why{display:flex;gap:18px;padding:24px 0;border-top:1px solid var(--line)}
.why:first-child{border-top:0}
.why .idx{font-size:.8rem;font-weight:700;color:var(--warm);letter-spacing:.1em;padding-top:5px;flex:none;width:30px}
.why h3{font-size:1.14rem;margin-bottom:7px}
.why p{color:var(--ink-soft);max-width:60ch}

/* ---- blog cards ---- */
.posts{grid-template-columns:1fr;margin-top:32px}
.blog-grid{grid-template-columns:1fr;margin-top:32px}
/* Cover cards: text over the photo, kept legible by a bottom-up gradient scrim
   (always dark regardless of light/dark theme) + light text with a soft shadow. */
.post{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;
  text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:#fff;
  transition:transform .18s ease,border-color .18s}
.post:hover{transform:translateY(-3px);border-color:var(--accent)}
.post .thumb{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-tint),var(--surface));
  display:grid;place-items:center;color:var(--accent)}
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post .body{position:relative;z-index:1;padding:20px 20px 18px;
  background:linear-gradient(to top,rgba(8,15,22,.94) 0%,rgba(8,15,22,.74) 52%,rgba(8,15,22,0) 100%)}
.post .kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#9fd8c6;
  font-weight:700;margin-bottom:8px;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.post h3{font-size:1.08rem;line-height:1.25;margin-bottom:7px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.post p{font-size:.9rem;color:rgba(255,255,255,.86);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.post .more{margin-top:12px;font-size:.86rem;font-weight:700;color:#9fd8c6;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.see-all{text-align:center;margin-top:32px}

/* ---- book cta band ---- */
.cta-band{text-align:center;background:var(--accent-tint)}
.cta-band h2{font-size:clamp(1.6rem,5vw,2.4rem)}
.cta-band .lead{margin:14px auto 0}
.cta-band .btn{margin-top:24px}

/* ---- page head ---- */
.page-head{padding-top:48px;padding-bottom:6px}
.page-head h1{font-size:clamp(1.9rem,6vw,2.9rem)}

/* ---- Q&A (how it works) ---- */
.qa{max-width:760px;margin:0 auto}
.qa-item{padding:26px 0;border-top:1px solid var(--line)}
.qa-item:first-of-type{border-top:0}
.qa-item h3{font-size:1.18rem;margin-bottom:11px}
.qa-item p{color:var(--ink-soft);max-width:64ch}
.qa-item p + p{margin-top:10px}

/* ---- article (blog post) ---- */
.article{max-width:var(--readw);margin:0 auto}
.back{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--accent);
  text-decoration:none;margin-bottom:22px}
.article h1{font-size:clamp(1.8rem,5.6vw,2.6rem);margin-bottom:16px}
.article .meta{font-size:.84rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;margin-bottom:26px}
.article .photo{border-radius:14px;background:linear-gradient(135deg,var(--accent-tint),var(--surface));
  border:1px solid var(--line);margin:6px 0 28px;overflow:hidden}
.article .photo img{width:100%;height:auto;display:block}
.article .photo.placeholder{min-height:180px;display:grid;place-items:center;gap:14px;color:var(--accent);
  font-size:.85rem;text-align:center;padding:22px;margin:6px 0 28px}
.article .photo.placeholder figcaption{color:var(--ink-soft);max-width:46ch;line-height:1.5}
.qblock{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px 22px;
  box-shadow:var(--shadow);margin-bottom:28px}
.qrow{padding:19px 0;border-top:1px solid var(--line)}
.qrow:first-child{border-top:0}
.qrow .q{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent);margin-bottom:8px}
.qrow p{color:var(--ink)}
.article .tail{color:var(--ink-soft);margin-bottom:24px}
.xlink{background:var(--accent-tint);border-radius:14px;padding:20px 22px;display:flex;gap:14px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.xlink p{font-weight:600;color:var(--ink)}

/* ---- post prev/next nav (bottom of each field note) ---- */
.post-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.pnav-slot{display:flex;flex-direction:column;justify-content:center;gap:5px;text-decoration:none;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  transition:border-color .18s,background .18s}
.pnav-slot:hover{border-color:var(--accent)}
.pnav-dir{font-size:.74rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.07em}
.pnav-title{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3}
.pnav-slot.next{text-align:right}
.pnav-index{align-self:stretch;justify-content:center;text-align:center;font-weight:700;
  color:var(--accent);white-space:nowrap;background:var(--accent-tint);border-color:transparent}
.pnav-empty{border:none;background:none;pointer-events:none}
@media (max-width:640px){
  .post-nav{grid-template-columns:1fr;gap:10px}
  .pnav-slot.next{text-align:left}
  .pnav-empty{display:none}
}

/* ---- booking page ---- */
.book-wrap{max-width:760px;margin:0 auto;text-align:center}
.book-frame{margin-top:26px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.book-frame iframe{width:100%;height:760px;min-height:420px;border:0;display:block;transition:height .25s ease}
.book-fallback{margin-top:18px;font-size:.92rem}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--ink-soft);font-size:.9rem}
.foot-in{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--accent)}
/* Grouped footer nav (2026-08-16). Replaced a single 9-link run that read as one
   undifferentiated line on desktop. Mobile-first: stacked groups, 3 columns from 700px. */
.foot-nav{display:grid;grid-template-columns:1fr;gap:20px}
/* Headings sit at full ink, links stay at --ink-soft. At opacity .7 the heading landed
   almost exactly on the link colour, so the labels stopped reading as labels. Value
   contrast rather than a new hue — teal here would compete with the phone/email links
   above and imply these headings are clickable. */
.foot-nav h2{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);opacity:.92;margin:0 0 16px;line-height:1.2}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot-nav a{color:var(--ink-soft);text-decoration:none}
.foot-nav a:hover{color:var(--accent)}
@media (min-width:700px){
  .foot-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 32px;max-width:760px}
}
.foot-contact{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.foot-contact a{display:inline-flex;align-items:center;gap:7px;color:var(--accent);text-decoration:none;
  font-weight:600;font-size:.95rem}
.foot-contact a:hover{text-decoration:underline}
.foot-contact svg{flex:none;color:var(--accent)}

/* ---- sticky mobile book bar (shown on phones, hidden on desktop) ---- */
.mobile-book{position:fixed;bottom:0;left:0;right:0;z-index:55;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.mobile-book .btn{width:100%;justify-content:center}
body{padding-bottom:76px}

/* ==========================================================================
   ENHANCE UPWARD — tablet / desktop
   ========================================================================== */
@media (min-width:680px){
  .wrap{padding:0 24px}
  .band{padding:76px 0}
  .hero{padding-top:70px;padding-bottom:66px}
  .hero-grid{grid-template-columns:1.06fr .94fr;gap:46px}
  .hero-art{order:0}
  .hero-art svg{max-width:360px}
  .hero .lead{font-size:1.2rem}
  .lead{font-size:1.12rem}

  /* MINIMAL bar at every width: brand · [look-up pill] [Get scheduled] [☰].
     The informational links live inside the hamburger — no inline link row. */
  .nav-in{padding:15px 24px}
  .brand{font-size:2.35rem}
  .nav-actions .btn-primary{display:inline-flex}

  .steps{grid-template-columns:repeat(3,1fr)}
  .outcomes{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:repeat(3,1fr)}
  .blog-grid{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
  .post{min-height:300px}
  .page-head{padding-top:64px;padding-bottom:10px}

  /* desktop doesn't need the sticky book bar */
  .mobile-book{display:none}
  body{padding-bottom:0}
}
/* Desktop: the informational links are the VISIBLE backbone of the bar — trust
   content shouldn't hide behind a hamburger. But the whole bar needs ~1076px to
   sit on ONE clean line; below that it wrapped to two jumbled rows. So the inline
   menu appears only once it fits on one line (labels never wrap), and the tidy
   hamburger handles every narrower width. */
@media (min-width:1120px){
  .nav-links{display:flex;position:static;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:24px;
    background:none;border:0;padding:0}
  .nav-links a{padding:0;border-top:0;font-size:.95rem;white-space:nowrap;transition:color .18s}
  .nav-links .only-mobile{display:none}
  .nav-actions .pill{display:inline-flex}
  .burger{display:none}
}
@media (min-width:980px){
  .hero-art svg{max-width:380px}
}

/* ---- motion / reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .btn,.post{transition:none}
  .hero-art .mag,.hero-art .cloud-a,.hero-art .cloud-b{animation:none}
}
/* Pull-quote — emphatic editorial beat between ideas */
.pullquote{max-width:var(--readw);margin:26px 0 4px;padding:2px 0 2px 22px;
  border-left:3px solid var(--accent);
  font-size:clamp(1.3rem,3.4vw,1.85rem);font-weight:700;line-height:1.26;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
@media(min-width:760px){.pullquote{margin:34px 0 6px;padding-left:28px}}

/* Meet-your-inspector — a small human trust anchor (real face for a remote buyer
   vetting a stranger), deliberately NOT a hero takeover. */
.inspector{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.inspector-photo{width:116px;height:116px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid var(--surface);box-shadow:var(--shadow);background:var(--surface)}
.inspector-copy{max-width:440px;text-align:left}
.inspector-copy h2{font-size:1.5rem;margin-top:2px}
.inspector-copy .eyebrow{margin-bottom:6px}
.inspector-copy .lead{margin-top:8px;font-size:1.02rem}
@media (max-width:520px){.inspector-copy{text-align:center}}

/* Permit-record proof card — real public permit history rendered natively (not a
   screenshot), styled to match the site. The permit-search blue ties to the sibling. */
.permit-card{max-width:560px;margin:26px 0 22px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.permit-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.permit-addr{font-weight:700;font-size:1.05rem}
.permit-sub{color:var(--ink-soft);font-size:.85rem;margin-top:2px}
.permit-badge{flex:none;font-size:.74rem;font-weight:600;color:var(--accent);
  background:var(--accent-tint);border-radius:999px;padding:5px 11px;white-space:nowrap}
.permit-rows{padding:4px 20px 10px}
.permit-row{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line);font-size:.92rem}
.permit-row:first-child{border-top:0}
.permit-date{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-weight:600}
.permit-status{color:var(--accent);font-size:.76rem;font-weight:600;white-space:nowrap}

/* PermitSearch search band — deliberately lighter than .btn-primary so scheduling stays the
   dominant hero action (see spec §3). Outline + muted, not a filled call-to-action. The
   "Powered by PermitSearch" mark uses PermitSearch's own brand blue (--ps-blue), matching how
   the site already refers to it (how-it-works.html) and spec §5 ("PermitSearch's own second brand"). */
.ps-band{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem;max-width:440px}
.ps-band-label{font-size:.85rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em}
.ps-band-row{display:flex;gap:.5rem}
.ps-band input{flex:1;min-width:0;padding:.6rem .8rem;font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:10px}
.ps-band input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ps-band-go{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;cursor:pointer;
  padding:.6rem .9rem;font-size:.9rem;font-weight:600;color:var(--accent);
  background:transparent;border:1.5px solid var(--accent);border-radius:10px}
.ps-band-go:hover{background:var(--accent);color:#fff}
.ps-band-by{display:flex;align-items:center;gap:.35rem;margin:.1rem 0 0;
  font-size:.78rem;color:var(--ink-soft)}
.ps-band-by b{color:var(--ps-blue);font-weight:700}
.ps-band-by .ps-pin{color:var(--ps-blue);flex:none}
/* Google Places dropdown: keep it above the hero, on-brand-neutral */
.pac-container{z-index:60;border-radius:10px;border:1px solid var(--line);margin-top:2px}
@media (max-width:520px){.ps-band{max-width:none}.ps-band-row{flex-wrap:wrap}.ps-band-go{width:100%;justify-content:center}}

/* Booking page: logo only, centred (Dan, 2026-08-14). `space-between` on a single
   child pins it left with a void beside it, which reads as a nav whose menu failed to
   load; `center` reads as a checkout header. */
.nav-bare .nav-in{justify-content:center}