/* emergencyrepairservicenearme.com
   One stylesheet, no framework, no external requests. Design goals, in order:
   1. A visitor standing in water can find the number in under a second.
   2. The page reads as a real dispatch operation, not a scraped affiliate shell.
   3. Nothing here claims anything we cannot back. Credibility comes from craft
      and from saying true things clearly, never from invented badges or reviews. */

:root{
  /* ink */
  --ink:#0f1a26;          /* headings, primary text */
  --body:#2b3742;         /* body copy, softened from headings */
  --muted:#5c6976;        /* secondary */
  --faint:#8794a1;

  /* surface */
  --bg:#fdfdfc;           /* warm off-white reads designed; pure #fff reads default */
  --panel:#fff;
  --sunken:#f4f6f8;
  --line:#e3e8ed;
  --line-soft:#eef1f4;

  /* brand */
  --brand:#0a4a86;        /* structural colour. Chosen for contrast against the
                             off-white ground, not for any claimed colour psychology. */
  --brand-deep:#073763;
  --brand-wash:#eef4fa;

  /* One high-contrast colour on the page, reserved for the one action we ask for.
     The point is that nothing else competes with it, not that red 'means' urgency. */
  --urgent:#b3161a;
  --urgent-deep:#8d1114;
  --urgent-wash:#fdf0ef;

  --verify:#0a7d3f;
  --verify-wash:#e9f5ee;

  --radius:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(15,26,38,.06), 0 1px 1px rgba(15,26,38,.04);
  --shadow-md:0 4px 14px rgba(15,26,38,.08), 0 1px 3px rgba(15,26,38,.05);
  --bar-h:3.5rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

main{max-width:46rem;margin:0 auto;padding:calc(var(--bar-h) + .5rem) 1.15rem 3rem}

h1,h2,h3{color:var(--ink);letter-spacing:-.018em;font-weight:700}
h1{font-size:1.75rem;line-height:1.2;margin:0 0 .55rem}
h2{font-size:1.3rem;line-height:1.28;margin:0 0 .7rem}
h3{font-size:1.03rem;line-height:1.35;margin:0 0 .3rem;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--brand)}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
svg{display:block;flex:none}

/* ---------------------------------------------------------------- top bar
   Brand and the number in one fixed row. The brand is what stops the page
   reading as a scraper; the number is the only thing we ask anyone to do. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:46rem;margin:0 auto;height:var(--bar-h);
  display:flex;align-items:center;gap:.75rem;padding:0 1.15rem;
}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);min-width:0;height:100%;padding-right:.4rem}
.brand-mark{width:26px;height:26px;color:var(--brand)}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-name{font-weight:700;font-size:.92rem;letter-spacing:-.015em;white-space:nowrap}
.brand-sub{font-size:.68rem;color:var(--muted);letter-spacing:.045em;text-transform:uppercase;font-weight:600}
.callbtn{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--urgent);color:#fff;text-decoration:none;font-weight:700;
  padding:.58rem .85rem;border-radius:8px;font-size:1rem;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.callbtn svg{width:17px;height:17px}
.callbtn:active{background:var(--urgent-deep)}
.callbtn-label{font-size:.95rem}
.callbtn-num{display:none}

/* ---------------------------------------------------------------- hero */
.hero{padding:1.5rem 0 .5rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--urgent);background:var(--urgent-wash);
  padding:.3rem .6rem;border-radius:999px;margin-bottom:.8rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--urgent);flex:none}
.trust{color:var(--muted);font-size:1rem;line-height:1.5;margin:0 0 .45rem}
.value{color:var(--ink);font-size:1.1rem;font-weight:650;line-height:1.4;margin:0 0 1.15rem}

/* the primary call target, distinct from the bar so it survives a screenshot */
.cta{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--urgent);color:#fff;text-decoration:none;
  padding:1rem 1.25rem;border-radius:var(--radius);
  box-shadow:var(--shadow-md);margin:0 0 .55rem;
}
.cta:active{background:var(--urgent-deep)}
.cta svg{width:22px;height:22px}
.cta-in{display:flex;flex-direction:column;line-height:1.15}
.cta-num{font-size:1.42rem;font-weight:800;letter-spacing:.005em}
.cta-sub{font-size:.8rem;font-weight:600;opacity:.92}
.cta-note{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 1.4rem}
.verify-note{
  display:flex;gap:.55rem;align-items:flex-start;
  font-size:.85rem;line-height:1.5;color:var(--muted);margin:0 0 1.7rem;
}
.verify-note svg{width:16px;height:16px;color:var(--verify);margin-top:.15rem}

/* honest trust row. Every item here is a fact we can defend. */
.assure{
  display:grid;grid-template-columns:1fr;gap:.05rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:.35rem .2rem;margin:0 0 1rem;
}
.assure div{display:flex;align-items:center;gap:.55rem;padding:.42rem .7rem;font-size:.89rem;line-height:1.4;color:var(--body)}
.assure svg{width:17px;height:17px;color:var(--verify)}
.assure b{font-weight:650;color:var(--ink)}

/* ---------------------------------------------------------------- sections */
.sec{margin:0 0 2.2rem}
.sec-head{margin:0 0 1rem}
.sec-head p{color:var(--muted);font-size:.95rem;margin:.25rem 0 0}

/* how it works. Doubles as the plain statement of what this business is. */
.steps{display:grid;gap:.6rem;counter-reset:s}
.step{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:.9rem 1rem;
}
.step-ico{
  width:38px;height:38px;border-radius:9px;background:var(--brand-wash);
  color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;
}
.step-ico svg{width:20px;height:20px}
.step-b{min-width:0}
.step-n{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:.1rem;
}
.step h3{margin:0 0 .15rem}
.step p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.5}

/* symptom quick links */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .8rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;line-height:1.2;
}
.chip svg{width:15px;height:15px;color:var(--urgent)}
.chip:hover{border-color:var(--brand);color:var(--brand)}

.intro{font-size:1.02rem;color:var(--body)}
.intro strong{color:var(--ink)}

/* symptom detail */
.symptom{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.15rem;margin:0 0 .7rem;
}
.symptom-h{display:flex;align-items:center;gap:.6rem;margin:0 0 .45rem}
.symptom-h svg{width:19px;height:19px;color:var(--urgent);flex:none}
.symptom-h h2{margin:0;font-size:1.08rem}
.symptom p{margin:0;font-size:.96rem;line-height:1.62}

/* what to do right now. Visually separated because it is the one block that
   helps the reader before anyone arrives. */
.donow{
  background:var(--brand-wash);border:1px solid #d3e3f2;
  border-radius:var(--radius-lg);padding:1.15rem 1.25rem;
}
.donow h2{display:flex;align-items:center;gap:.55rem;color:var(--brand-deep);font-size:1.12rem}
.donow h2 svg{width:20px;height:20px;flex:none}
.donow ol{margin:0;padding:0;list-style:none;counter-reset:d}
.donow li{
  position:relative;padding-left:1.9rem;margin:0 0 .7rem;
  font-size:.95rem;line-height:1.55;color:var(--body);counter-increment:d;
}
.donow li:last-child{margin-bottom:0}
.donow li::before{
  content:counter(d);position:absolute;left:0;top:.05rem;
  width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--brand);color:#fff;
  font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* service area */
.area-list{display:flex;flex-wrap:wrap;gap:.35rem;margin:.85rem 0 0;padding:0;list-style:none}
.area-list li{
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:6px;
  padding:.3rem .55rem;font-size:.86rem;color:var(--muted);
}

/* FAQ, native disclosure so it needs no script */
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 .5rem;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:.85rem 1rem;
  font-weight:650;color:var(--ink);font-size:.98rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .15s ease;margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq-a{padding:.85rem 1rem;margin:0;font-size:.95rem;line-height:1.6;color:var(--muted)}

/* nearby */
.nearby-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.nearby-list a{
  display:inline-block;padding:.45rem .75rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  text-decoration:none;font-size:.9rem;font-weight:600;
}

/* hub city grid */
.citygrid{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.6rem}
.citygrid li{
  position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;box-shadow:var(--shadow-sm);
}
.citygrid li:hover{border-color:var(--brand)}
/* The whole card is the target, not just the words. These are the primary
   navigation on a hub page and a 18px text link is a poor thing to hit on a
   phone. The stretched pseudo-element does it without a wrapper or a script. */
.citygrid a{text-decoration:none;font-weight:700;font-size:1.02rem}
.citygrid a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.citygrid li:focus-within{outline:3px solid var(--brand);outline-offset:2px}
.citygrid a:focus-visible{outline:none}
.citygrid span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem;line-height:1.5}

/* ---------------------------------------------------------------- footer */
.disclosure{color:var(--muted);font-size:.86rem}
.disclosure.inline{margin:-.6rem 0 1rem}
footer{
  border-top:1px solid var(--line);background:var(--sunken);
  margin-top:1rem;padding:1.6rem 1.15rem 2.5rem;
  color:var(--muted);font-size:.9rem;
}
.foot-in{max-width:46rem;margin:0 auto}
.foot-brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);margin-bottom:.7rem}
.foot-brand svg{width:22px;height:22px;color:var(--brand)}
.foot-brand b{font-weight:700;letter-spacing:-.015em}
/* The identity statement. This is the most important sentence in the footer. */
.foot-what{color:var(--body);margin:0 0 1rem;max-width:52ch;line-height:1.6}
footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:0 0 .8rem}
footer nav a{color:var(--brand);text-decoration:none;font-weight:600}
.fine{margin:0;font-size:.84rem;color:var(--muted);line-height:1.55}

/* ---------------------------------------------------------------- wide */
@media (min-width:34rem){
  .callbtn-label{display:none}
  .callbtn-num{display:inline}
  .assure{grid-template-columns:1fr 1fr}
  .cta-num{font-size:1.6rem}
}
@media (min-width:48rem){
  body{font-size:17.5px}
  h1{font-size:2.15rem}
  h2{font-size:1.42rem}
  main{padding-bottom:4rem}
  .hero{padding-top:2.2rem}
  .assure{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{flex-direction:column;gap:.6rem}
  .citygrid{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------- a11y
   Keyboard focus has to be obvious. Anyone tabbing this page is either using a
   screen reader or auditing us, and both should find it works. */
:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}
.cta:focus-visible,.callbtn:focus-visible{outline-color:var(--ink)}

/* Skip link, visible only once focused. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:.7rem 1rem;
  border-radius:0 0 8px 0;text-decoration:none;font-weight:650;
}
.skip:focus{left:0}

/* Tap targets. 44px is the accessibility floor and also just correct for a
   person holding a phone in a flooded room. */
.chip,.nearby-list a,.faq summary,footer nav a{min-height:44px}
.chip,.nearby-list a{display:inline-flex;align-items:center}
footer nav a{display:inline-flex;align-items:center}
.faq summary{align-items:center}

@media (prefers-reduced-motion:reduce){
  .faq details[open] summary::after{transition:none}
}

/* ---------------------------------------------------------------- local figure
   Optional per page. Renders dates and numbers the prose already states, so it
   introduces no claim the page was not making. See templates/partials/figure.html
   and section 6 of CLAUDE.md. No stock imagery: an invented visual is worse than
   none, and this one is not invented. */
.lfig{margin:0 0 2.2rem;padding:1.15rem 1.25rem 1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:12px}
.lfig-head{margin:0 0 1rem}
.lfig-head h3{margin:0;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.lfig-head p{margin:.3rem 0 0;color:var(--muted);font-size:.93rem;line-height:1.5}
.lfig-track{list-style:none;margin:0;padding:0 0 0 1.15rem;
  border-left:2px solid var(--line)}
.lfig-item{position:relative;padding:0 0 1.05rem;display:grid;
  grid-template-columns:auto 1fr;gap:.15rem .6rem;align-items:baseline}
.lfig-item:last-child{padding-bottom:0}
.lfig-dot{position:absolute;left:-1.5rem;top:.42rem;width:9px;height:9px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--bg)}
.is-now .lfig-dot{background:var(--urgent)}
.lfig-when{font-variant-numeric:tabular-nums;font-weight:650;color:var(--brand-deep);
  font-size:.92rem;white-space:nowrap}
.is-now .lfig-when{color:var(--urgent-deep)}
.lfig-what{color:var(--body);font-size:.95rem;line-height:1.5}
.lfig-note{grid-column:2;color:var(--muted);font-size:.88rem;line-height:1.5}
.lfig-src{margin:.9rem 0 0;padding-top:.7rem;border-top:1px solid var(--line-soft);
  color:var(--faint);font-size:.82rem}
@media (max-width:430px){
  .lfig{padding:1rem}
  .lfig-item{grid-template-columns:1fr;gap:.1rem}
  .lfig-note{grid-column:1}
}

/* ------------------------------------------------------------------ breadcrumbs
   Rendered above the hero, marked up as BreadcrumbList in the head. Small and
   quiet: it is a way back and a statement of where this page sits, not a
   navigation element competing with the call button. */
.crumbs{margin:0 0 1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.1rem .45rem;margin:0;padding:0;font-size:.85rem;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.45rem}
.crumbs li+li::before{content:"/";color:var(--faint);font-size:.9em}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;
  padding:.15rem 0}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--brand);border-bottom-color:var(--brand)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------- operator
   Who runs this, in the footer, named and locatable. Quiet by design: it is there
   to be found by someone checking, not to compete with anything. */
.operator{margin:.75rem 0 0;font-style:normal;font-size:.84rem;color:var(--muted);
  line-height:1.55;display:flex;flex-wrap:wrap;gap:.15rem .5rem}
.operator b{color:var(--body);font-weight:650}

/* --------------------------------------------------------------- local facts
   Per-city reference rows, each carrying its own source. Dense on purpose: this
   is lookup material, not prose. */
.facts{margin:0;display:grid;gap:.1rem}
.fact{display:grid;grid-template-columns:11.5rem 1fr;gap:.2rem 1rem;padding:.7rem 0;
  border-bottom:1px solid var(--line-soft)}
.fact:last-child{border-bottom:0}
.facts dt{color:var(--muted);font-size:.9rem;font-weight:600}
.facts dd{margin:0;color:var(--body);font-size:.95rem;line-height:1.5}
.fact-note{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem}
.fact-src{display:block;color:var(--faint);font-size:.8rem;margin-top:.25rem}
@media (max-width:560px){.fact{grid-template-columns:1fr;gap:.1rem}}

/* ---------------------------------------------------------- guides + linking */
.symptom-more{margin:.7rem 0 0;font-size:.92rem}
.symptom-more a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-wash)}
.symptom-more a:hover,.symptom-more a:focus-visible{border-bottom-color:var(--brand)}
.other-services{margin:.6rem 0 0;font-size:.92rem;color:var(--muted)}
.other-services a{color:var(--brand)}
.guide .sec p{color:var(--body);line-height:1.65;margin:0 0 .85rem;max-width:62ch}
.glist,.srclist{margin:.2rem 0 0;padding-left:1.15rem;color:var(--body);line-height:1.6}
.glist li,.srclist li{margin:0 0 .45rem}
.srclist{font-size:.9rem;color:var(--muted)}
.guidelist{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.guidelist li{padding:1rem 1.15rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px}
.guidelist a{font-weight:650;color:var(--ink);text-decoration:none;font-size:1.05rem}
.guidelist a:hover{color:var(--brand)}
.guidelist .dim{display:inline-block;margin-left:.5rem;color:var(--faint);font-size:.85rem}
.guidelist p{margin:.35rem 0 0;color:var(--muted);font-size:.93rem;line-height:1.55}

/* ------------------------------------------------------------------- call cue
   An explicit "this is the thing to press" above the call button. The number on
   its own reads as information rather than as a control, which is the single
   most common reason a tap-to-call block gets looked at and not used. */
.callcue{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;
  color:var(--urgent-deep);font-weight:650;font-size:.95rem;letter-spacing:.01em}
.callcue-arrow{width:34px;height:34px;flex:none;transform:rotate(8deg);
  stroke-width:2.1}  /* the icon set is stroke 1.75 at 24px; scaled up it needs
                        more weight or it reads as a hairline next to the label */
@media (prefers-reduced-motion:no-preference){
  .callcue-arrow{animation:cuenudge 2.4s ease-in-out infinite}
  @keyframes cuenudge{0%,72%,100%{transform:rotate(8deg) translateY(0)}
                      82%{transform:rotate(8deg) translateY(4px)}}
}

/* -------------------------------------------------------------- cost table
   Nobody on page 1 for these terms ships a table of any kind, and only two
   publish a repair price. Market ranges, sourced, clearly not our prices.
   Scrolls horizontally on a phone rather than squashing the numbers. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 .9rem;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.costtable{border-collapse:collapse;width:100%;min-width:33rem;font-size:.94rem}
.costtable th,.costtable td{text-align:left;padding:.7rem .9rem;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
.costtable thead th{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);background:var(--sunken);border-bottom:1px solid var(--line)}
.costtable tbody tr:last-child th,.costtable tbody tr:last-child td{border-bottom:0}
.costtable tbody th{font-weight:650;color:var(--ink);white-space:nowrap}
.costtable .range{font-variant-numeric:tabular-nums;font-weight:650;color:var(--brand-deep);
  white-space:nowrap}
.costtable .why{color:var(--muted);line-height:1.5;min-width:16rem}
.costtable .feerow th,.costtable .feerow .range{color:var(--urgent-deep)}
.costtable .feerow{background:var(--urgent-wash)}
.costs-ask{margin:0 0 .6rem;color:var(--body);font-size:.95rem;line-height:1.6;max-width:62ch}
.costs-src{margin:0;color:var(--faint);font-size:.82rem;line-height:1.55;max-width:70ch}

/* ------------------------------------------------------------ area links */
.arealinks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.arealinks li{padding:.85rem 1rem;background:var(--panel);border:1px solid var(--line);
  border-radius:10px}
.arealinks a{font-weight:650;color:var(--ink);text-decoration:none}
.arealinks a:hover{color:var(--brand)}
.arealinks span{display:block;margin-top:.2rem;color:var(--muted);font-size:.92rem;
  line-height:1.5}

/* -------------------------------------------------------------------- byline
   Who wrote it, what they are not, and when it was last checked. */
.byline p{color:var(--body);font-size:.95rem;line-height:1.6;margin:0 0 .6rem;max-width:62ch}
.byline .reviewed{color:var(--faint);font-size:.85rem;margin:0}

/* ---------------------------------------------------------------- gas block
   The one symptom on the page where the right answer is not to call us. Amber,
   visually separated, and it names the utility instead of our number. */
.symptom.danger{border-color:#e0a800;background:#fffbf0;
  box-shadow:inset 3px 0 0 #e0a800}
.symptom.danger .symptom-h svg{color:#a8780a}
.danger-first{color:#7a5600;font-size:1rem;line-height:1.6}
.danger-call{margin:.7rem 0 0;padding-top:.7rem;border-top:1px solid #f0e0b8;
  color:#7a5600;font-size:.95rem;line-height:1.6}
.danger-call a{color:#8d1114;font-weight:650}

/* --------------------------------------------------------------- diagrams
   Line art in the same 24-unit stroke family as the icons. They carry the
   mechanism and the order of operations, which prose makes people read twice. */
.ringdiag,.stepdiag{display:block;width:100%;max-width:34rem;height:auto;
  margin:.2rem 0 1.1rem;color:var(--brand)}
.ringdiag text,.stepdiag text{font-family:inherit;font-weight:600;fill:var(--muted)}
.ringdiag .ringwin{color:var(--urgent)}
.ringdiag .ringwin text{fill:var(--urgent-deep)}
.verify-note+.stepdiag{margin-top:.6rem}
@media (max-width:520px){
  .ringdiag,.stepdiag{max-width:none}
  .ringdiag text,.stepdiag text{font-size:11px}
}

/* cost table: dated badge and a common-scale bar per row */
.surveyed{margin:0 0 .5rem}
.datebadge{display:inline-block;padding:.22rem .6rem;border-radius:999px;
  background:var(--brand-wash);color:var(--brand-deep);font-size:.8rem;font-weight:650;
  border:1px solid #d6e4f2}
.costtable .bar{display:block;margin-top:.35rem;height:5px;border-radius:3px;
  background:var(--line-soft);min-width:7rem}
.costtable .bar-in{display:block;height:100%;border-radius:3px;background:var(--brand);
  min-width:3px}
.costtable .feerow .bar-in{background:var(--urgent)}
.operator .serving{color:var(--faint)}

/* ------------------------------------------------------------------ photos
   Real ones only. The caption carries where it was taken, because a photograph
   that could have been anywhere is doing the same job as a stock image. */
.photo{margin:1rem 0;padding:0}
.photo img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line);background:var(--sunken)}
.photo figcaption{margin:.5rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.5}
.photo-meta{color:var(--faint)}

/* operator block on the legal pages: one line each, not a run-on */
.legal .operator{display:block;margin:.4rem 0 0;font-style:normal;color:var(--body);
  font-size:.95rem;line-height:1.7}
.legal .operator b{display:block;color:var(--ink)}
.legal .operator span{display:block}
.legal .operator .serving{margin-top:.5rem;color:var(--muted);font-size:.9rem}

/* The referral statement on pages that have no call button to sit under. */
.refnote{margin:.2rem 0 1rem;color:var(--body);font-size:.95rem;line-height:1.6;max-width:60ch}

/* ROC badge links down to the explanation. Underlined because a link that does
   not look like one gets read as emphasis and never tapped, and this one exists
   precisely for the reader who does not know what the three letters mean. */
.assure a{color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;text-decoration-thickness:1px}
.assure a:hover,.assure a:focus-visible{text-decoration-style:solid;color:var(--brand)}
.verify-note:target{background:var(--brand-wash);border-radius:8px;
  box-shadow:0 0 0 .5rem var(--brand-wash)}