/* ==========================================================================
   Tampa Bay Plumbers LLC - Design System
   Derived from Stitch "Industrial Emergency Trades", Barlow display type.
   Zero radius. No soft shadows. High contrast. Mobile first.
   ========================================================================== */

:root{
  /* Brand */
  --red:#B52026;
  --red-dark:#8D191A;
  --red-bright:#E04A50;      /* AA on ink, for links on dark surfaces */
  --ink:#0B0D10;
  --ink-soft:#15181C;
  --amber:#F5A524;

  /* Steel ramp */
  --steel-700:#343A40;
  --steel-600:#4A5157;
  --steel-500:#656C73;
  --steel-300:#B3B4B6;
  --steel-200:#DEE1E4;
  --steel-100:#F2F4F6;
  --white:#FFFFFF;

  /* Type */
  --display:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Rhythm: strict 8px increments */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px;

  --wrap:1280px;
  --gut:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  color:var(--steel-700);
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--red-dark)}

h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:800;
  color:var(--ink);
  margin:0 0 var(--s2);
  letter-spacing:-0.02em;
  line-height:1.08;
}
h1{font-size:clamp(32px,6vw,54px)}
h2{font-size:clamp(26px,4vw,38px)}
h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em}
h4{font-size:19px;letter-spacing:0;line-height:1.25}
p{margin:0 0 var(--s2)}
.lead{font-size:18px;line-height:1.65}
.small{font-size:14px;line-height:1.5}

.overline{
  font-family:var(--body);
  font-size:12px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--red);margin:0 0 var(--s1);display:block;
}
.overline-light{color:var(--amber)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--s8) 0}
.section-tight{padding:var(--s6) 0}
.section-alt{background:var(--steel-100)}
.section-ink{background:var(--ink);color:var(--steel-200)}
.section-ink h2,.section-ink h3,.section-ink h4{color:var(--white)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:999;background:var(--amber);color:var(--ink);padding:var(--s1) var(--s2);font-weight:700}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:16px;font-weight:700;letter-spacing:0.04em;
  padding:16px 24px;border:2px solid transparent;border-radius:0;
  text-decoration:none;cursor:pointer;transition:background-color .12s linear,color .12s linear;
  min-height:52px;
}
.btn-call{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-call:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--white)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--white)}
.btn-ghost:hover{background:var(--white);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-dark:hover{background:var(--steel-700);border-color:var(--steel-700);color:var(--white)}
.btn-lg{font-size:19px;padding:20px 32px;min-height:62px}
.btn-block{display:flex;width:100%}
a.btn{text-decoration:none}

/* ---------- Top status bar ---------- */
.topbar{background:var(--amber);color:var(--ink);font-size:12px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;text-align:center;padding:9px var(--gut)}
.topbar .dot{display:inline-block;width:8px;height:8px;background:var(--ink);margin-right:8px;vertical-align:middle}

/* ---------- Header ---------- */
.header{background:var(--ink);position:sticky;top:0;z-index:50;border-bottom:3px solid var(--red)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:8px var(--gut);max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{height:80px;width:auto;flex-shrink:0}
.brand-txt{display:none}
.brand-sub{display:none;font-size:10px;font-weight:700;letter-spacing:0.07em;
  line-height:1.5;color:var(--steel-300);text-transform:uppercase}
.nav{display:none}
.nav a{color:var(--steel-200);text-decoration:none;font-size:14px;font-weight:600;
  letter-spacing:0.02em;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--red)}
/* The lockup got big enough to read, which left the call button less room.
   nowrap keeps the number on one line rather than letting flexbox shrink
   the button below its own content. */
.header .btn-call{padding:12px 14px;min-height:46px;font-size:15px;white-space:nowrap}
.header .btn-call span{white-space:nowrap}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:transparent;border:2px solid var(--steel-600);color:var(--white);cursor:pointer;padding:0}
.navtoggle svg{width:22px;height:22px}
.mobnav{display:none;background:var(--ink-soft);border-top:1px solid var(--steel-700)}
.mobnav.open{display:block}
.mobnav a{display:block;color:var(--steel-200);text-decoration:none;font-weight:600;
  padding:14px var(--gut);border-bottom:1px solid var(--steel-700)}
.mobnav a:hover{background:var(--steel-700);color:var(--white)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.38}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,13,16,.95) 0%,rgba(11,13,16,.90) 55%,rgba(11,13,16,.86) 100%)}
/* Weighted heavier on the right than it first was. The fleet still carries the
   previous logo, and on a phone the hero crops straight onto the van door. */
.hero-in{position:relative;z-index:2;padding:var(--s8) 0 var(--s6)}
.hero h1{color:var(--white);max-width:16ch}
.hero .lead{color:var(--steel-200);max-width:52ch;margin-bottom:var(--s4)}
.hero-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--s4)}
.badge-247{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:7px 12px;margin-bottom:var(--s3)}
.badge-247 .dot{width:8px;height:8px;background:var(--ink)}
.rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-left:3px solid var(--red);padding-left:14px}
.stars{color:var(--amber);letter-spacing:2px;font-size:17px;line-height:1}
.rating-txt{font-size:14px;color:var(--steel-200);font-weight:500}
.rating-txt strong{color:var(--white);font-weight:700}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--ink-soft);border-top:1px solid var(--steel-700);
  border-bottom:3px solid var(--red)}
.trustbar .wrap{padding-top:0;padding-bottom:0}
.trustbar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--steel-700)}
.trustbar li{background:var(--ink-soft);padding:16px 18px;display:flex;flex-direction:column;
  gap:4px;min-width:0}
.trustbar li:last-child{grid-column:1 / -1}
.trustbar .t-label{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--amber)}
.trustbar .t-val{font-family:var(--display);font-weight:800;font-size:16px;color:var(--white);
  line-height:1.15;letter-spacing:-0.01em}

/* ---------- Pillars ---------- */
.pillars-intro{max-width:60ch;border-left:5px solid var(--red);padding-left:var(--s3)}
.pillars-intro h2{font-size:clamp(28px,4.4vw,44px);margin-bottom:var(--s2)}
.pillars-intro .lead{color:var(--steel-200);margin-bottom:var(--s3)}
.section-ink .pillars{margin-top:var(--s6)}
.pillars{display:grid;gap:var(--s3)}
.pillar{border:2px solid var(--steel-700);background:var(--white);display:flex;flex-direction:column}
.pillar-head{background:var(--ink);color:var(--white);padding:18px 20px;
  display:flex;align-items:center;gap:12px;border-bottom:4px solid var(--red)}
.pillar-head h3{color:var(--white);margin:0;font-size:24px}
.pillar-head svg{width:28px;height:28px;color:var(--amber);flex-shrink:0}
.pillar-body{padding:20px;flex:1;display:flex;flex-direction:column}
.pillar-body p{color:var(--steel-600)}
.pillar ul{list-style:none;margin:0 0 var(--s3);padding:0}
.pillar li{border-bottom:1px solid var(--steel-200)}
.pillar li a{display:block;padding:11px 0;color:var(--ink);text-decoration:none;
  font-weight:600;font-size:15px}
.pillar li a::before{content:"\203A";color:var(--red);font-weight:700;margin-right:10px}
.pillar li a:hover{color:var(--red)}
.pillar .btn{margin-top:auto}

/* ---------- Service grid ---------- */
.grid{display:grid;gap:var(--s2);grid-template-columns:1fr}
.card{background:var(--white);border:2px solid var(--steel-200);padding:20px;
  display:flex;flex-direction:column;transition:border-color .12s linear}
.card:hover{border-color:var(--red)}
.card .ico{width:34px;height:34px;color:var(--red);margin-bottom:12px}
.card h3{font-size:19px;margin-bottom:6px;letter-spacing:0}
.card p{font-size:14px;color:var(--steel-500);margin-bottom:14px;flex:1}
.card .more{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--red);text-decoration:none}
.card .more::after{content:"\2009\2192"}
.card-link{text-decoration:none;color:inherit}

/* ---------- Depth blocks (topical content) ---------- */
.depth{display:grid;gap:var(--s2)}
.depth-item{background:var(--white);border-left:4px solid var(--red);padding:18px 20px;
  border-top:1px solid var(--steel-200);border-right:1px solid var(--steel-200);
  border-bottom:1px solid var(--steel-200)}
.depth-item h3{font-size:19px;margin-bottom:8px;letter-spacing:0}
.depth-item p{margin:0;font-size:15px;color:var(--steel-600)}
.stat-inline{font-weight:700;color:var(--ink)}

/* ---------- Reviews ---------- */
.reviews{display:grid;gap:var(--s2)}
.review{background:var(--white);border:2px solid var(--steel-200);padding:22px;
  box-shadow:4px 4px 0 0 var(--ink)}
.review .stars{margin-bottom:12px;color:var(--red)}
.review blockquote{margin:0 0 16px;font-size:15px;line-height:1.65;color:var(--steel-700)}
.review cite{font-style:normal;font-weight:700;color:var(--ink);font-size:14px;display:block}
.review .meta{font-size:12px;color:var(--steel-500);letter-spacing:0.04em;text-transform:uppercase;
  margin-top:3px;display:block}

/* ---------- Why / stat pillars ---------- */
.why{display:grid;gap:var(--s3)}
.why-item{border-top:4px solid var(--red);padding-top:var(--s2)}
.why-num{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;
  color:var(--red);letter-spacing:-0.02em;display:block;margin-bottom:10px}
.section-ink .why-num{color:var(--amber)}
.why-item p{font-size:15px;color:var(--steel-600)}
.section-ink .why-item p{color:var(--steel-200)}

/* ---------- About preview ---------- */
.split{display:grid;gap:var(--s4);align-items:center}
.split img{width:100%;border:2px solid var(--steel-700)}

/* ---------- Service area ---------- */
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--steel-200);border:1px solid var(--steel-200)}
.areas li{background:var(--white);padding:12px 14px;font-size:14px;font-weight:600;color:var(--steel-700)}
.areas li::before{content:"\25A0";color:var(--red);font-size:9px;margin-right:9px;vertical-align:middle}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--steel-200)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-0.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:26px;
  color:var(--red);font-family:var(--body);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--red)}
.faq .answer{padding:0 0 20px;color:var(--steel-600);font-size:15px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.ctaband{background:var(--red);color:var(--white);text-align:center;padding:var(--s8) 0}
.ctaband h2{color:var(--white);margin-bottom:12px}
.ctaband p{color:rgba(255,255,255,.92);max-width:56ch;margin:0 auto var(--s3)}
.ctaband .phone{font-family:var(--display);font-weight:800;font-size:clamp(34px,7vw,56px);
  color:var(--white);text-decoration:none;display:inline-block;letter-spacing:-0.02em;line-height:1}
.ctaband .phone:hover{color:var(--ink)}
.ctaband .note{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;
  margin-top:var(--s2);color:rgba(255,255,255,.88)}

/* ---------- Sources (non-home pages only) ---------- */
.sources{background:var(--steel-100);border-top:2px solid var(--steel-200);padding:var(--s4) 0;
  font-size:13px;color:var(--steel-500)}
.sources h2{font-size:13px;font-family:var(--body);font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--steel-500);margin-bottom:12px}
.sources ol{margin:0;padding-left:18px}
.sources li{margin-bottom:6px;word-break:break-word}
.sources a{color:var(--steel-600)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--steel-300);padding:var(--s8) 0 var(--s10);font-size:14px}
.footer-grid{display:grid;gap:var(--s4)}
.footer h4{color:var(--white);font-size:13px;font-family:var(--body);font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:9px}
.footer a{color:var(--steel-300);text-decoration:none}
.footer a:hover{color:var(--white);text-decoration:underline}
.footer .brand img{height:130px;width:auto;margin-bottom:12px}
.footer address{font-style:normal;line-height:1.7}
.footer .lic{display:inline-block;border:1px solid var(--steel-700);padding:7px 11px;
  font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--amber);margin-top:14px}
.footer-bot{border-top:1px solid var(--steel-700);margin-top:var(--s5);padding-top:var(--s3);
  display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--steel-500)}
.footer-bot nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- Sticky mobile call bar ---------- */
.stickycall{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--red);
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:64px;color:var(--white);text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:0.02em;
  border-top:3px solid var(--ink)}
.stickycall:hover{background:var(--red-dark);color:var(--white)}
.stickycall svg{width:22px;height:22px}
body{padding-bottom:64px}

/* ---------- Breadcrumbs ---------- */
.crumbs{background:var(--steel-100);border-bottom:1px solid var(--steel-200);font-size:13px}
.crumbs ol{list-style:none;margin:0 auto;padding:12px var(--gut);max-width:var(--wrap);
  display:flex;flex-wrap:wrap;gap:8px}
.crumbs li::after{content:"/";margin-left:8px;color:var(--steel-300)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--steel-600);text-decoration:none}
.crumbs a:hover{color:var(--red);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Prose (service page body) ---------- */
.prose h2{margin-top:var(--s5)}
.prose h3{margin-top:var(--s4);font-size:21px}
.prose ul,.prose ol{margin:0 0 var(--s2);padding-left:22px}
.prose li{margin-bottom:9px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--s3);font-size:14px}
.prose th,.prose td{border:1px solid var(--steel-200);padding:11px 13px;text-align:left}
.prose th{background:var(--ink);color:var(--white);font-weight:700;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase}
.prose tbody tr:nth-child(even){background:var(--steel-100)}
.callout{background:var(--ink);color:var(--white);padding:24px;border-left:5px solid var(--amber);
  margin:var(--s3) 0}
.callout p:last-child{margin-bottom:0}
.callout .phone{color:var(--amber);font-weight:700;text-decoration:none}

/* ---------- Focus visibility (WCAG) ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--amber);outline-offset:2px}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:480px){
  :root{--gut:24px}
  .hero-actions{flex-direction:row;flex-wrap:wrap}
  .hero-actions .btn{flex:0 0 auto}
}

@media (min-width:768px){
  :root{--gut:32px}
  .brand-txt{display:block}
  .grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .depth{grid-template-columns:repeat(2,1fr)}
  .areas{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-bot{flex-direction:row;justify-content:space-between;align-items:center}
  .hero-in{padding:var(--s10) 0 var(--s8)}
  .trustbar ul{grid-template-columns:repeat(5,1fr)}
  .trustbar li:last-child{grid-column:auto}
}

@media (min-width:1024px){
  .brand-sub{display:block}
  .nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
  .nav a{white-space:nowrap}
  .navtoggle{display:none}
  .mobnav{display:none !important}
  .grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}
  .areas{grid-template-columns:repeat(4,1fr)}
  .stickycall{display:none}
  body{padding-bottom:0}
  .section{padding:var(--s10) 0}
}

@media (min-width:1280px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .nav{gap:24px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

@media print{
  .header,.topbar,.stickycall,.ctaband{display:none}
  body{padding-bottom:0;color:#000}
}

/* ==========================================================================
   Photography
   Added when the client's own job photos arrived. Every image is cropped by
   object-fit rather than letterboxed, and the aspect ratio is set per image
   from its real dimensions so a portrait phone shot is not forced into a
   letterbox strip and a landscape one is not forced into a square.
   ========================================================================== */
.jobshot{background:var(--ink)}
.jobshot figure{margin:0;max-width:var(--wrap);margin-inline:auto}

.jobshot img{display:block;width:100%;height:auto;aspect-ratio:var(--ar-sm,4/3);object-fit:cover}

/* Footer social */
.social{display:flex;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:2px solid var(--steel-700);color:var(--steel-200);transition:border-color .15s,color .15s,background .15s}
.social a:hover,.social a:focus-visible{border-color:var(--red);background:var(--red);color:var(--white)}

/* Work gallery */
.galgroup{margin-top:var(--s8)}
.galgroup:first-of-type{margin-top:0}
.galgroup > p{color:var(--steel-600);max-width:62ch;margin:10px 0 0}
.galgrid{display:grid;gap:var(--s3);margin-top:var(--s4)}
.galitem{margin:0;background:var(--steel-100);border:1px solid var(--steel-200)}
.galitem img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.galnote{border-left:3px solid var(--steel-300);padding:2px 0 2px 18px;color:var(--steel-600);
  font-size:15px;max-width:68ch}

@media (min-width:768px){
  /* The cap stops a portrait phone shot from filling a whole desktop screen;
     object-fit crops the overflow rather than squashing it. */
  .jobshot img{aspect-ratio:var(--ar-lg,21/9);max-height:600px}
    .galgrid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .galgrid{grid-template-columns:repeat(3,1fr)}
}

/* <picture> is inline by default and its line box leaves a baseline gap under
   every image. Block everywhere, then the two that also need to fill a slot. */
picture{display:block}
.hero-media picture{position:absolute;inset:0}
.split picture{width:100%}
a.galitem{display:block;text-decoration:none;transition:border-color .15s,transform .15s}
a.galitem:hover,a.galitem:focus-visible{border-color:var(--red)}

/* ==========================================================================
   Map
   The Google embed is a third party frame that loads with the page, so it is
   only on the two pages that need it. On the homepage it sits last, above the
   footer, deliberately quiet: small type, muted, no heading competing with the
   CTA directly above it.
   ========================================================================== */
.findus{background:var(--steel-100);border-top:1px solid var(--steel-200);
  padding:var(--s5) 0}
.findus-in{display:grid;gap:var(--s3);align-items:center}
.findus address{font-style:normal;font-size:15px;line-height:1.6;color:var(--steel-700);
  font-weight:600;margin-top:8px}
.findus .small{color:var(--steel-600);font-size:13px;margin:10px 0 0;max-width:46ch}
.mapbox{border:1px solid var(--steel-300);line-height:0;background:var(--steel-200)}
.mapbox iframe{display:block;width:100%}
.mapbox-page{margin:var(--s4) 0;border:2px solid var(--steel-300)}

@media (min-width:768px){
  .findus-in{grid-template-columns:1fr 320px}
}

/* ==========================================================================
   Homepage hero: the H1 is not the headline
   The legal name has to appear in the H1 for NAP consistency, and the legal
   name is not what a person with water on the floor needs to read first. So
   the H1 carries the name and the keywords at kicker size, and the phone
   number is the largest thing on the page, because calling is the only
   conversion this site has.
   ========================================================================== */
.hero h1.hero-kicker{font-family:var(--body);font-size:13px;font-weight:700;line-height:1.5;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--steel-300);
  margin:0 0 var(--s2);max-width:46ch}
.hero h1.hero-kicker strong{color:var(--white);font-weight:800}
.hero-shout{font-family:var(--display);font-weight:800;line-height:0.95;
  letter-spacing:-0.02em;color:var(--white);margin:0 0 var(--s2);
  font-size:clamp(34px,8.5vw,62px);max-width:14ch}
.hero-number{display:inline-block;font-family:var(--display);font-weight:800;
  line-height:1;letter-spacing:-0.02em;color:var(--amber);text-decoration:none;
  font-size:clamp(42px,9.5vw,76px);margin:0 0 var(--s2)}
.hero-number:hover,.hero-number:focus-visible{color:var(--white)}
.hero-number .sub{display:block;font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--steel-300);margin-top:8px}

/* Footer citation. NAP has to read the same here as on the Business Profile. */
.footer .bizname{font-family:var(--display);font-weight:800;font-size:17px;
  color:var(--white);margin:0 0 8px;letter-spacing:-0.01em}

@media (min-width:768px){
  .brand img{height:90px}
}
.gallinks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.gallinks a{display:inline-block;font-size:13px;font-weight:600;color:var(--steel-700);
  border:1px solid var(--steel-300);padding:7px 12px;text-decoration:none}
.gallinks a:hover,.gallinks a:focus-visible{border-color:var(--red);color:var(--red)}