/* ============================================================
   Cherokee Home Inspection LLC
   Palette drawn from the company logo: navy -> brand blue -> sky,
   with a single warm clay accent reserved for actions.
   ============================================================ */

:root {
  --navy: #0b1f3a;
  --navy-2: #12294a;
  --blue: #1b6fd4;
  --blue-d: #145aae;
  --sky: #8ccdf9;
  --paper: #f6f8fb;
  --paper-2: #eaeff6;
  --white: #ffffff;
  --ink: #101a28;
  --ink-soft: #46536a;
  --ink-faint: #74809a;
  --rule: #d7dfeb;
  --clay: #c8542b;
  --clay-d: #a8431f;
  --clay-wash: #fdf0ea;
  --good: #1f7a55;
  --good-wash: #e6f3ed;
  --warn: #9a6b12;
  --warn-wash: #fbf3e0;

  /* Readability first: one clear humanist sans across the whole site.
     Headings differ by weight and tracking, not by a hard-to-read condensed face. */
  --display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --cond: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shell: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
body.nav-locked { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--blue-d); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, iframe:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell.narrow { max-width: 46rem; }

.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.eyebrow {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-d);
}
.eyebrow.pale { color: #b8dcfb; }
.lede { font-size: 1.15rem; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }

/* ---------------- utility bar ---------------- */
.utility {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  font-family: var(--cond);
  font-size: .82rem;
  letter-spacing: .04em;
}
.utility .shell {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
  align-items: center; justify-content: space-between; padding-block: .5rem;
}
.utility .areas { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: rgba(255,255,255,.5); }
.utility a { color: #fff; font-weight: 700; text-decoration: none; }
.utility a:hover { color: var(--sky); }

/* ---------------- masthead ---------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246,248,251,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s ease;
}
.masthead.stuck { box-shadow: 0 6px 22px rgba(11,31,58,.09); }
.masthead .shell {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .55rem;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { width: clamp(132px, 17vw, 180px); }

.nav { display: flex; align-items: center; gap: 1.15rem; }
.nav a {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .87rem; font-weight: 700; color: var(--ink); text-decoration: none;
  padding-block: .35rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--blue); color: var(--blue-d); }
.nav .nav-cta {
  background: var(--clay); color: #fff; border: 0; border-radius: 3px;
  padding: .5rem .85rem;
}
.nav .nav-cta:hover { background: var(--clay-d); color: #fff; }

.nav-toggle {
  display: none; align-items: center; gap: .45rem;
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: .5rem .7rem; cursor: pointer; color: var(--ink);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; font-size: .78rem;
}
.nt-bar { display: block; width: 17px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle .nt-bar + .nt-bar { margin-top: 3px; }
.nav-toggle.is-open .nt-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nt-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nt-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; font-size: .87rem; text-decoration: none;
  padding: .8rem 1.35rem; border: 2px solid var(--clay); border-radius: 3px;
  background: var(--clay); color: #fff; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { background: var(--clay-d); border-color: var(--clay-d); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(168,67,31,.28); }
.btn.ghost { background: transparent; color: var(--blue-d); border-color: var(--blue); }
.btn.ghost:hover { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 6px 18px rgba(27,111,212,.25); }
.btn.on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn.on-dark:hover { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }
.btn.lg { font-size: .95rem; padding: .95rem 1.7rem; }

/* ---------------- hero ---------------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.5s ease, transform 7s linear;
  transform: scale(1.06);
}
.hero-slide.on { opacity: 1; transform: scale(1.005); }
.hero-slide picture, .hero-slide img { width: 100%; height: 100%; display: block; }
/* The header photo carries no tint overlay — it reads at full strength.
   Legibility is handled by the glass panel behind the copy instead. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* only a soft foot-of-image scrim, so the hero meets the next band cleanly */
  background: linear-gradient(to top, rgba(11,31,58,.55), transparent 34%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(1.5rem,4vw,3.5rem); align-items: center;
  padding-block: clamp(3rem,8vw,6.5rem);
}
/* Copy sits on frosted glass rather than on a tinted photo. */
.hero-copy {
  background: rgba(11,31,58,.42);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: clamp(1.4rem,3.2vw,2.4rem);
  box-shadow: 0 18px 46px rgba(3,16,38,.35);
}
/* Browsers without backdrop-filter get a solid-enough panel to stay legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-copy { background: rgba(11,31,58,.8); }
}
.hero h1 {
  font-size: clamp(2.4rem,7vw,5.1rem);
  margin-block: .7rem 1.05rem;
}
.hero h1 em { font-style: normal; color: var(--sky); }
.hero .lede { color: rgba(255,255,255,.86); font-size: clamp(1.02rem,2.1vw,1.28rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; margin-top: 1.8rem;
  list-style: none; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.22);
}
.hero-proof li {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
  text-transform: none;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(11,31,58,.55);
}
.hero-proof strong {
  display: block;
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.05;
  margin-bottom: .12rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 6px rgba(11,31,58,.5);
}

/* ---- the feather signature ---- */
.feather-stage {
  position: absolute; z-index: 1; pointer-events: none;
  right: -12%; bottom: -16%;
  width: clamp(420px, 58vw, 900px);
  opacity: .5;
  filter: drop-shadow(0 18px 44px rgba(3, 16, 38, .6));
}
.feather-stage svg { width: 100%; height: auto; overflow: visible; }
/* Fly-in is driven per-frame from JS (see render() in site.js) so it runs in
   reverse when the visitor scrolls back up. Only the reduced-motion reset lives
   here — with motion reduced the mark is simply present, never animated. */
@media (prefers-reduced-motion:reduce){
  .feather-stage.feather-scroll svg{transform:none!important;opacity:1!important}
}
.feather-stage.drawn {
  animation: featherDrift 15s ease-in-out infinite alternate;
}
@keyframes featherDrift {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(-20px,-22px,0) rotate(-2.2deg); }
}

/* ---- credential seal ---- */
.seal {
  position: relative; z-index: 2;
  border: 1px solid rgba(255,255,255,.2);
  /* same glass as .hero-copy — the untinted photo would wash out a lighter panel */
  background: rgba(11,31,58,.42);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 18px 46px rgba(3,16,38,.35);
  padding: 1.3rem 1.4rem; border-radius: 4px; min-width: 15.5rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.seal-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .2rem; }
.seal-top img { width: 60px; }
.seal-title {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.74); line-height: 1.4;
}
.seal-name { font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; line-height: 1; }
.seal-role {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.6);
}
.seal dl { margin: .35rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; }
.seal dt {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .76rem; color: rgba(255,255,255,.55); align-self: center;
}
.seal dd { margin: 0; font-family: var(--mono); font-size: .86rem; font-variant-numeric: tabular-nums; color: #fff; }

/* ---------------- page head ---------------- */
.page-head { background: var(--paper-2); padding-block: clamp(2.2rem,6vw,4rem); border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: clamp(2.1rem,5.6vw,3.7rem); margin-block: .55rem .9rem; }
.page-head .btn { margin-top: 1.2rem; }
.page-head.dark-head { background: var(--navy); color: #fff; border-bottom: 0; }
.page-head.dark-head .lede { color: rgba(255,255,255,.82); }
.page-head.city h1 { font-size: clamp(1.9rem,5.2vw,3.3rem); }

.crumbs {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; font-weight: 700; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem;
}
.crumbs a { color: var(--blue-d); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); }

/* ---------------- bands ---------------- */
.band { padding-block: clamp(2.6rem,6.5vw,5rem); }
.band.tint { background: var(--paper-2); }
.band.dark { background: var(--navy); color: #fff; }
.band.dark .lede { color: rgba(255,255,255,.78); }
.band-head {
  display: flex; flex-direction: column; gap: .5rem;
  padding-left: 1.1rem; border-left: 3px solid var(--blue);
  margin-bottom: 2rem;
}
.band.dark .band-head { border-left-color: var(--sky); }
.band-head h1, .band-head h2 { font-size: clamp(1.7rem,4.3vw,2.85rem); }
.band-more { margin-top: 1.5rem; }

/* ---------------- service grid ---------------- */
.svc-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem,1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
}
.svc {
  background: var(--white); padding: 1.3rem 1.35rem;
  display: flex; flex-direction: column; gap: .45rem;
  transition: background .16s ease;
}
.svc:hover { background: var(--clay-wash); }
.svc h3 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: 1.02rem; font-weight: 700; line-height: 1.25;
}
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a:hover { color: var(--blue-d); }
.svc p { font-size: .93rem; color: var(--ink-soft); line-height: 1.56; }
.svc .tag {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem; font-weight: 700; color: var(--blue-d);
}
.svc.flag { box-shadow: inset 4px 0 0 var(--clay); }
.svc .cred-num {
  font-family: var(--mono); font-size: 1.05rem; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* ---------------- process rail ---------------- */
.rail {
  display: grid; gap: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem,1fr));
}
.step {
  border-top: 3px solid var(--rule); padding: 1rem 1.1rem 1.2rem 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.step:first-child { border-top-color: var(--blue); }
.band.dark .step { border-top-color: rgba(255,255,255,.22); }
.band.dark .step:first-child { border-top-color: var(--sky); }
.step .num {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em;
  color: var(--blue-d); font-variant-numeric: tabular-nums;
}
.band.dark .step .num { color: var(--sky); }
.step h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: 1.02rem; font-weight: 700; }
.step p { font-size: .91rem; color: var(--ink-soft); line-height: 1.55; }
.band.dark .step p { color: rgba(255,255,255,.72); }

/* ---------------- split / figures ---------------- */
.split {
  display: grid; gap: clamp(1.4rem,4vw,3rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem,1fr));
  align-items: center;
}
.split.wide-left { grid-template-columns: 1.05fr 1fr; }
.split + .split { margin-top: clamp(1.8rem,4vw,2.8rem); }
.figure img { width: 100%; border-radius: 3px; }
.figure figcaption {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .76rem; color: var(--ink-faint); margin-top: .5rem; font-weight: 700;
}
.prose { display: flex; flex-direction: column; gap: .95rem; max-width: 64ch; }
.prose h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.55rem,3.9vw,2.4rem); line-height: .96; }
.prose h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em; font-size: 1.06rem; font-weight: 700; }
.prose p { color: var(--ink-soft); }
.band.dark .prose p { color: rgba(255,255,255,.8); }

.ticks { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.ticks li {
  position: relative; padding-left: 1.55rem; color: var(--ink-soft); font-size: .96rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(27,111,212,.16);
}

/* ---------------- readout ---------------- */
.readout {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(9rem,1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
}
.readout .cell { background: var(--white); padding: 1rem 1.05rem; display: flex; flex-direction: column; gap: .2rem; }
.readout .v {
  font-family: var(--display); font-size: 1.95rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--blue-d);
}
.readout .k {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .78rem; color: var(--ink-faint); font-weight: 700; line-height: 1.4;
}
.readout.on-dark { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); margin-top: 1.6rem; }
.readout.on-dark .cell { background: var(--navy-2); }
.readout.on-dark .v { color: var(--sky); }
.readout.on-dark .k { color: rgba(255,255,255,.6); }

/* ---------------- notices ---------------- */
.notice {
  border-left: 3px solid var(--warn); background: var(--warn-wash);
  padding: 1rem 1.2rem; border-radius: 0 3px 3px 0; margin-top: 1.6rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.notice.good { border-left-color: var(--good); background: var(--good-wash); }
.notice .lbl {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .78rem; font-weight: 700; color: var(--warn);
}
.notice.good .lbl { color: var(--good); }
.notice p { font-size: .94rem; color: var(--ink-soft); }
.notice.on-dark { background: rgba(255,255,255,.07); border-left-color: var(--sky); }
.notice.on-dark .lbl { color: var(--sky); }
.notice.on-dark p { color: rgba(255,255,255,.8); }

/* ---------------- widget ---------------- */
.widget-frame {
  background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue);
  border-radius: 0 0 4px 4px; padding: .5rem;
  box-shadow: 0 4px 20px rgba(11,31,58,.08);
}
.widget-frame iframe {
  display: block; width: 100%; min-height: 640px; border: 0;
  border-radius: 2px; background: var(--paper-2);
}
.widget-note { padding: 1.4rem; text-align: center; font-size: .95rem; }
.widget-credit {
  margin-top: .6rem; text-align: center;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 700; color: var(--ink-faint);
}
.widget-credit a { color: var(--ink-faint); text-decoration: none; }
.widget-credit a:hover { color: var(--blue-d); text-decoration: underline; }

/* ---------------- area chips & cards ---------------- */
.area-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.area-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: 999px;
  padding: .5rem .95rem; text-decoration: none; color: var(--ink);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em;
  font-size: .87rem; font-weight: 700;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.area-chip span { font-size: .68rem; color: var(--ink-faint); }
.area-chip:hover { border-color: var(--blue); color: var(--blue-d); transform: translateY(-1px); }

.county-block { margin-bottom: 2.2rem; }
.county-name {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .88rem; font-weight: 700; color: var(--blue-d);
  padding-bottom: .5rem; margin-bottom: .9rem; border-bottom: 1px solid var(--rule);
}
.area-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(14rem,1fr)); }
.area-card {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
  padding: .9rem 1rem; text-decoration: none;
  border-left: 3px solid var(--blue);
  transition: transform .16s ease, box-shadow .16s ease;
}
.area-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,31,58,.1); }
.ac-name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 1rem; color: var(--ink); }
.ac-meta { font-size: .84rem; color: var(--ink-faint); font-family: var(--sans); }

/* ---------------- blog ---------------- */
.post-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17.5rem,1fr)); }
.post-card {
  background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--blue);
  border-radius: 0 0 3px 3px; padding: 1.25rem 1.3rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,31,58,.1); }
.post-card h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--blue-d); }
.post-card p { font-size: .92rem; color: var(--ink-soft); }
.post-meta { font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; color: var(--ink-faint); font-weight: 700; margin-top: auto; }

.post { padding-block: clamp(2rem,5vw,3.5rem); }
.post-title { font-size: clamp(1.8rem,4.8vw,3rem); margin-block: .4rem .8rem; }
.byline {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; font-weight: 700; color: var(--ink-faint);
  padding-bottom: 1.3rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem;
}
.post-body { display: flex; flex-direction: column; gap: 1.05rem; }
.post-body p { font-size: 1.08rem; line-height: 1.72; }
.post-cta {
  margin-top: 2rem; padding: 1.3rem 1.4rem;
  background: var(--paper-2); border-left: 3px solid var(--clay); border-radius: 0 3px 3px 0;
  display: flex; flex-direction: column; gap: .9rem; align-items: flex-start;
}
.pager { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem,1fr)); margin-top: 2rem; }
.pg {
  border: 1px solid var(--rule); border-radius: 3px; padding: .85rem 1rem;
  text-decoration: none; color: var(--ink); background: var(--white);
  font-family: var(--cond); font-size: .92rem; font-weight: 700; line-height: 1.35;
}
.pg span {
  display: block; text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; color: var(--ink-faint); margin-bottom: .2rem;
}
.pg:hover { border-color: var(--blue); color: var(--blue-d); }
.pg.next { text-align: right; }

/* ---------------- badges ---------------- */
.badges { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(6.5rem,1fr)); align-items: center; }
.badges img {
  width: 100%; max-width: 7rem; margin-inline: auto;
  filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.badges img:hover { filter: none; opacity: 1; transform: scale(1.05); }

/* ---------------- FAQ ---------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.4rem 1.05rem 0; position: relative;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.35rem; color: var(--blue); line-height: 1;
}
.faq details[open] summary { color: var(--blue-d); }
.faq details[open] summary::after { content: "\2013"; }
.faq .ans { padding: 0 0 1.15rem; }
.faq .ans p { color: var(--ink-soft); font-size: .98rem; max-width: 70ch; }

/* ---------------- contact ---------------- */
.contact-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem,1fr)); }
.contact-item { display: flex; flex-direction: column; gap: .25rem; }
.contact-item .k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; font-weight: 700; color: var(--blue-d); }
.contact-item .v { font-family: var(--mono); font-size: 1rem; line-height: 1.5; }
.contact-item a { color: inherit; }

/* ---------------- final CTA ---------------- */
.cta-final { background: linear-gradient(105deg, var(--blue-d), var(--blue) 62%, #2f86e8); color: #fff; }
.cta-final .shell {
  display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; justify-content: space-between;
  padding-block: clamp(2rem,5vw,3.2rem);
}
.cta-final h2 { font-size: clamp(1.65rem,4.2vw,2.7rem); }
.cta-final p { color: rgba(255,255,255,.9); margin-top: .35rem; }
.cta-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.cta-final .btn { background: #fff; color: var(--blue-d); border-color: #fff; }
.cta-final .btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.cta-final .btn.on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.cta-final .btn.on-dark:hover { background: #fff; color: var(--blue-d); }

/* ---------------- footer ---------------- */
footer.site { background: var(--navy); color: rgba(255,255,255,.62); padding-block: 2.6rem 1.6rem; font-size: .9rem; }
footer.site .cols {
  display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(13rem,1fr));
  padding-bottom: 1.6rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.foot-logo { width: 190px; margin-bottom: .8rem; }
.foot-blurb { margin-bottom: .6rem; }
footer.site h4 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em;
  font-size: .82rem; color: #fff; margin-bottom: .7rem; font-weight: 700;
}
footer.site ul { list-style: none; display: flex; flex-direction: column; gap: .38rem; }
footer.site a { color: rgba(255,255,255,.72); text-decoration: none; }
footer.site a:hover { color: var(--sky); }
footer.site .lic { font-family: var(--mono); font-size: .8rem; letter-spacing: .01em; }
footer.site .fine {
  padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .45rem 1.5rem;
  justify-content: space-between; font-size: .79rem; color: rgba(255,255,255,.45);
}
footer.site .powered a { color: var(--sky); font-weight: 700; }

/* ---------------- skip link ---------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--clay); color: #fff; padding: .7rem 1.1rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------------- reveal ---------------- */
.reveal { opacity: 0; transform: translateY(15px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 64rem) {
  .hero-inner { grid-template-columns: 1fr; }
  .seal { min-width: 0; max-width: 24rem; }
  .split.wide-left { grid-template-columns: 1fr; }
  /* No min-width floor here: a 320px floor is WIDER than a 390px phone's card
     once padding is taken off, so the mark spilled out of its panel and over
     the copy. Width is owned by the .quote-feather card rules further down. */
  .feather-stage { width: 100%; opacity: .34; bottom: -2%; }
}
@media (max-width: 52rem) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .3rem var(--gutter) 1rem;
    box-shadow: 0 14px 26px rgba(11,31,58,.13);
    max-height: 78vh; overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding-block: .85rem; border-bottom: 1px solid var(--rule); }
  .nav a:last-child { border-bottom: 0; }
  .nav .nav-cta { margin-top: .7rem; text-align: center; }
  .nav-toggle { display: inline-flex; }
  .utility .areas { display: none; }
  .utility .shell { justify-content: center; }
  .split.flip { display: flex; flex-direction: column-reverse; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .widget-frame { padding: .25rem; }
  .widget-frame iframe { min-height: 780px; }
  .hero-proof { gap: .5rem 1.3rem; }
  .cta-final .shell { flex-direction: column; align-items: flex-start; }
  .cta-btns { width: 100%; }
  .cta-btns .btn { flex: 1 1 100%; }
  .pg.next { text-align: left; }
}

/* ---------------- motion / print ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .feather-stage.drawn { animation: none; }
}
@media print {
  .utility, .masthead, .nav-toggle, .cta-final, .hero-cta, .widget-frame, .feather-stage, .pager { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: #fff; color: #000; }
  .hero-media { display: none; }
  .band { padding-block: 1rem; }
}

/* ── FAQ accordion + review grid ─────────────────────────────────────────
   Added for faqs.html and reviews.html. Uses existing tokens only. */
.qa-list{display:flex;flex-direction:column;gap:.6rem;max-width:60rem}
.qa{border:1px solid var(--rule);border-radius:10px;background:var(--white);overflow:hidden}
.qa summary{cursor:pointer;padding:1rem 1.15rem;font-weight:650;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.35rem;line-height:1;color:var(--clay);
  flex:none;transition:transform .18s ease}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{background:var(--paper)}
.qa summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.qa-body{padding:0 1.15rem 1.1rem;color:var(--ink-soft);border-top:1px solid var(--rule)}
.qa-body p{margin:.9rem 0 0;line-height:1.65}

.quote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.quote{margin:0;background:var(--white);border:1px solid var(--rule);border-radius:10px;
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;
  border-top:3px solid var(--clay)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;color:var(--ink-soft);line-height:1.62}
.quote blockquote p::before{content:"\201C"}
.quote blockquote p::after{content:"\201D"}
.quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.1rem;
  padding-top:.7rem;border-top:1px solid var(--rule)}
.quote figcaption strong{color:var(--ink);font-size:.94rem}
.quote figcaption span{color:var(--ink-faint);font-size:.8rem;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){.qa summary::after{transition:none}}
@media print{.qa[open] .qa-body,.qa-body{display:block}.qa summary::after{display:none}}

/* ── no-JS fallback for scroll reveals ───────────────────────────────────
   .reveal starts at opacity:0 and waits for JS to add .in. If JS is blocked
   or fails, that content would never become visible. This makes it visible
   immediately whenever scripting is unavailable. */
.no-js .reveal{opacity:1;transform:none}

/* ── certification badge grids (credentials.html) ────────────────────── */
.cert-group{margin:2.2rem 0 0}
.cert-group h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .3rem;color:var(--ink)}
.cert-count{font-size:.72rem;font-weight:700;background:var(--clay-wash);color:var(--clay-d);
  border-radius:99px;padding:.15rem .55rem;letter-spacing:.03em}
.cert-group>p{margin:0 0 1rem;color:var(--ink-soft)}
.cert-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1rem}
.cert{background:var(--white);border:1px solid var(--rule);border-radius:10px;
  padding:1rem .7rem;display:flex;flex-direction:column;align-items:center;
  gap:.6rem;text-align:center}
.cert img{width:auto;height:5.2rem;max-width:100%;object-fit:contain}
.cert span{font-size:.78rem;line-height:1.35;color:var(--ink-soft);font-weight:600}

.guar-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem}
.guar{background:var(--white);border:1px solid var(--rule);border-radius:10px;
  padding:1.15rem 1.25rem;display:flex;gap:1rem;align-items:flex-start;
  border-left:3px solid var(--clay)}
.guar img{width:auto;height:4rem;flex:none;object-fit:contain}
.guar strong{display:block;color:var(--ink);margin-bottom:.25rem}
.guar p{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.55}

.lic-table{width:100%;border-collapse:collapse;max-width:34rem}
.lic-table caption{text-align:left;color:var(--ink-faint);font-size:.8rem;
  padding-bottom:.6rem}
.lic-table th,.lic-table td{padding:.7rem .8rem;border-bottom:1px solid var(--rule);
  text-align:left}
.lic-table th{font-weight:600;color:var(--ink-soft)}
.lic-table td{font-family:var(--mono);color:var(--ink);font-weight:600}
.lic-table tr:last-child th,.lic-table tr:last-child td{border-bottom:none}

/* ── <picture> wrapper (webp + jpg fallback) ─────────────────────────── */
.figure picture{display:block}
.figure picture img{display:block;width:100%;height:auto}

/* ── blog post hero image ────────────────────────────────────────────── */
.post-hero{margin:0 0 1.6rem;border-radius:10px;overflow:hidden;border:1px solid var(--rule)}
.post-hero picture{display:block}
.post-hero img{display:block;width:100%;height:auto}


/* ── InterNACHI transcript ───────────────────────────────────────────── */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.transcript-sub{color:var(--ink-soft);margin:.35rem 0 0}
.transcript{background:var(--white);border:1px solid var(--rule);border-radius:12px;
  padding:1.4rem 1.5rem;box-shadow:0 1px 2px rgba(16,26,40,.04)}
.transcript-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1rem;padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:2px solid var(--rule)}
.tstat{display:flex;flex-direction:column;gap:.15rem}
.tnum{font-size:1.85rem;font-weight:750;color:var(--clay-d);line-height:1;
  font-variant-numeric:tabular-nums}
.tlab{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:600}
.table-scroll{overflow-x:auto}
.ce-table{width:100%;border-collapse:collapse;min-width:30rem;font-size:.92rem}
.ce-table caption{text-align:left;color:var(--ink-faint);font-size:.78rem;
  padding-bottom:.8rem;line-height:1.5}
.ce-table th,.ce-table td{padding:.5rem .65rem;border-bottom:1px solid var(--rule);
  text-align:left;vertical-align:middle}
.ce-table thead th{background:var(--paper);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft);font-weight:700;
  position:sticky;top:0;border-bottom:2px solid var(--rule)}
.ce-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--paper) 55%,transparent)}
.ce-table tbody tr:hover{background:var(--clay-wash)}
.ce-b{width:3.1rem;padding-right:0!important}
.ce-badge{display:block;width:34px;height:34px;object-fit:contain}
.ce-nobadge{display:block;width:34px;height:34px;border-radius:6px;
  background:repeating-linear-gradient(135deg,var(--paper) 0 5px,transparent 5px 10px);
  border:1px solid var(--rule)}
.ce-h{width:4.5rem;text-align:right!important;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.ce-s{width:2.6rem;text-align:center!important}
.ce-done{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;
  height:1.35rem;border-radius:50%;background:var(--good-wash);color:var(--good);
  font-size:.82rem;font-weight:700}
.ce-table tfoot td{border-top:2px solid var(--rule);border-bottom:none;
  padding-top:.75rem;font-size:.95rem}
.ce-table tfoot .ce-h{color:var(--clay-d)}
.transcript-key{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 .6rem;
  font-size:.8rem;color:var(--ink-soft);align-items:center}
.transcript-key .ce-done{width:1.1rem;height:1.1rem;font-size:.7rem;margin-right:.25rem}
@media (max-width:36rem){
  .ce-table{font-size:.85rem}
  .ce-b{display:none}
  .transcript{padding:1.1rem}
}
@media print{
  .transcript{border:none;box-shadow:none;padding:0}
  .ce-table tbody tr:nth-child(even){background:none}
  .ce-table thead th{position:static}
}

/* ── full-width figure (infographics) ────────────────────────────────── */
.figure-wide{margin:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:var(--white)}
.figure-wide picture{display:block}
.figure-wide img{display:block;width:100%;height:auto}
.figure-wide figcaption{padding:.7rem 1rem;font-size:.84rem;color:var(--ink-soft);
  border-top:1px solid var(--rule);background:var(--paper)}

/* ── feather: scroll-driven build ────────────────────────────────────── */
/* The mark stays anchored to the hero rather than pinned to the viewport.
   Pinning kept it visible for longer, but it then floated over the sections
   below (the quote form in particular). The build zone is tuned instead so the
   pair finishes drawing while the hero is still on screen. */
.feather-stage.feather-scroll{
  position:absolute;
  right:-8%;
  bottom:-6%;
  will-change:opacity;
}
.feather-stage.feather-scroll .vane{will-change:opacity,transform}
/* Once complete, the ambient drift resumes. */
.feather-stage.feather-scroll.drawn{
  animation:featherDrift 15s ease-in-out infinite alternate;
}
/* Fade the whole thing out as the visitor reads on, so it never competes
   with body copy. */
@media (min-width:64rem){
  .feather-stage.feather-scroll{opacity:.42}
}
/* Mobile placement. The hero is a single tall column on phones and the glass
   panels fill it top to bottom, so the pair is anchored to the foot of the
   hero — the only band not covered by a panel. It straddles the hero's bottom
   edge so it reads as a signature mark between header and first section. */
/* Phones: the mark is NOT floated over the hero.
   It previously sat position:absolute at z-index:4, pinned to the foot of the
   hero and stacked ABOVE the copy — which is exactly what put a wing across
   "Call 501.215.8700" and the quote-band heading. On a narrow column there is
   no free space to float into, so the mark now lives in normal flow inside its
   own card (see .quote-feather below) and cannot collide with anything. */
@media (max-width:52rem){
  .feather-stage,
  .feather-stage.feather-scroll{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    width:100%;
    transform:none;
    z-index:0;
    opacity:1;
    pointer-events:none;
    filter:none;
  }
  .feather-stage.feather-scroll.drawn{opacity:1;animation:none}
  /* The hero no longer reserves a band for the mark. */
  .hero-inner{padding-bottom:0}
  .hero-copy,.seal{position:relative;z-index:3}
  /* Barbs are hairlines at 30% — too faint to register at phone size. */
  .feather-stage .barbs path{stroke-opacity:.6}
}
/* Finished/fallback state — must apply to everyone, not only reduced-motion,
   since it is also the safety net when the scroll build cannot run. */
.feather-static .vane{opacity:1!important;transform:none!important}
.feather-static .rachis,
.feather-static .barbs path{stroke-dashoffset:0!important}

@media (prefers-reduced-motion:reduce){
  .feather-stage.feather-scroll{position:absolute}
  .feather-stage.feather-scroll.drawn{animation:none}
}
/* ── quote band: copy left, feather right ─────────────────────────────────
   The mark used to sit over the hero photograph, where a busy mid-blue image
   swallowed it — on desktop it was effectively invisible. It now lives in the
   empty right-hand half of the quote band, on a flat #eaeff6 panel, where it
   has real contrast and reads as the signature moment it was meant to be.
   Mobile gets the SAME treatment, just stacked into its own row. */
.quote-intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  margin-bottom:2rem;
}
.quote-intro .band-head{margin-bottom:0}
/* Copy and its CTA sit above the mark in the stacking order, unconditionally.
   Establishing a stacking context here is what guarantees the feather can never
   paint over the "Call 501.215.8700" button, at any width. */
.quote-intro>*:not(.quote-feather){position:relative;z-index:2}

.quote-feather{
  position:relative;
  min-width:0;
  /* Own the row height so the artwork has somewhere to live. */
  min-height:clamp(150px,20vw,240px);
  display:flex;
  align-items:center;
  justify-content:center;
  /* Decorative: never intercept a tap or click meant for the CTA beside it. */
  pointer-events:none;
  /* Contain the drop-shadow/drift so the mark cannot bleed onto the copy. */
  overflow:hidden;
}
/* Reset the hero-era absolute positioning: in this column the mark is a normal
   flow element, centred in its own cell rather than pinned to a corner. */
.quote-feather .feather-stage,
.quote-feather .feather-stage.feather-scroll{
  position:relative;
  inset:auto;
  right:auto;left:auto;top:auto;bottom:auto;
  width:100%;
  max-width:none;
  transform:none;
  /* Full strength — this is now a foreground element, not a watermark. */
  opacity:1;
  /* Behind the copy, always. The mark is a signature, not an overlay: it must
     never paint across the phone CTA at any breakpoint. */
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(11,31,58,.18));
}
/* Barbs are white hairlines built for the navy hero; on this pale panel they
   must be re-inked or they simply vanish. */
.quote-feather .feather-stage .barbs path{stroke:#1b6fd4;stroke-opacity:.75;stroke-width:1.7}
/* Keep the ambient drift once drawn, but gently — it sits beside live copy. */
.quote-feather .feather-stage.feather-scroll.drawn{
  opacity:1;
  animation:featherDrift 18s ease-in-out infinite alternate;
}

@media (max-width:64rem){
  /* Its own row — the "fun part" of the page, full width and unmissable. */
  .quote-intro{grid-template-columns:1fr;gap:1.25rem}
  /* The mark gets its OWN CARD on phones: a self-contained panel in normal
     flow, below the copy. Nothing overlaps because nothing is floated — the
     card occupies real space and the grid keeps it clear of the CTA. */
  .quote-feather{
    min-height:clamp(150px,44vw,240px);
    padding:1.1rem 1rem;
    border:1px solid var(--rule);
    border-radius:16px;
    background:linear-gradient(180deg,#f7fafd 0%,#eaeff6 100%);
    box-shadow:0 1px 2px rgba(11,31,58,.05), 0 8px 24px rgba(11,31,58,.07);
    overflow:hidden;
  }
  /* Identical visual treatment to desktop — same opacity, same ink, same glow.
     Only the placement changes. */
  /* Identical treatment to desktop — same ink, same glow, same full opacity.
     Only the placement changes: inside the card instead of beside the copy. */
  .quote-feather .feather-stage,
  .quote-feather .feather-stage.feather-scroll{
    position:relative;
    width:min(100%,420px);
    margin-inline:auto;
    opacity:1;
    filter:drop-shadow(0 10px 22px rgba(11,31,58,.18));
    transform:none;
    z-index:0;
    pointer-events:none;
  }
  /* Same blue hairlines as desktop so the pair reads the same on a phone. */
  .quote-feather .feather-stage .barbs path{
    stroke:#1b6fd4;stroke-opacity:.75;stroke-width:1.7;
  }
  .quote-feather .feather-stage.feather-scroll.drawn{opacity:1;animation:none}
}

/* ── feather on the area pages ────────────────────────────────────────── */
/* The area-page hero (.page-head.city) is a LIGHT panel, unlike the navy
   homepage hero. Two things must change for the mark to work here:
   1. establish a containing block — .page-head is not positioned, so an
      absolute stage would otherwise anchor to the page and float away;
   2. retune the artwork, which is built from white barbs and pale gradients
      for a dark background and is effectively invisible on #eaeff6. */
.page-head.city{position:relative;overflow:hidden}
.page-head.city .shell{position:relative;z-index:2}

.page-head.city .feather-stage{
  right:-6%;
  bottom:-28%;
  width:clamp(300px,42vw,560px);
  /* Light panel: drop the dark glow, mute the mark so copy stays dominant. */
  opacity:.30;
  filter:none;
  /* Corner decoration — never intercept taps aimed at the hero CTA. */
  pointer-events:none;
  z-index:1;
}
@media (min-width:64rem){
  .page-head.city .feather-stage.feather-scroll{opacity:.30}
}
/* Darken the barbs so the hairlines register against a pale panel. */
.page-head.city .feather-stage .barbs path{stroke:#1b6fd4;stroke-opacity:.55}
.page-head.city .feather-stage.feather-scroll.drawn{opacity:.34}

@media (max-width:52rem){
  /* Override the homepage phone rules (centred, full-opacity, dark halo):
     on a light panel that reads as a heavy blob. Keep it a corner mark. */
  .page-head.city .feather-stage,
  .page-head.city .feather-stage.feather-scroll{
    position:absolute;
    width:min(52vw,190px);
    left:auto;
    right:-8%;
    bottom:-18%;
    z-index:1;
    opacity:.26;
    filter:none;
    transform:none;
  }
  .page-head.city .feather-stage.feather-scroll.drawn{opacity:.30;animation:none}
  /* The homepage reserves a band at the hero foot for the centred mark; the
     area pages place it in the corner, so that padding is not wanted here. */
  .page-head.city .hero-inner{padding-bottom:0}
}

/* ── mobile safety net ───────────────────────────────────────────────────
   Last word in the cascade. Several older blocks position the homepage mark
   absolutely (it used to float in the hero), and any one of them re-escaping
   put a wing across "Call 501.215.8700" / "Price your inspection now". On
   phones the mark lives in its card, in flow, behind the copy — full stop.
   Scoped to .quote-feather so the area-page corner mark is unaffected. */
@media (max-width:64rem){
  .quote-feather{position:relative;z-index:0}
  .quote-feather .feather-stage,
  .quote-feather .feather-stage.feather-scroll,
  .quote-feather .feather-stage.feather-scroll.drawn{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  .quote-feather .feather-stage svg{max-width:100%;height:auto}
}

@media print{.feather-stage{display:none!important}}