/* ==========================================================================
   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:12px 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:46px;width:auto}
.brand-txt{display:none}
.brand-name{font-family:var(--display);font-weight:800;font-size:18px;color:var(--white);
  line-height:1;letter-spacing:-0.01em}
.brand-sub{font-size:10px;font-weight:700;letter-spacing:0.08em;color:var(--steel-300);
  text-transform:uppercase;margin-top:3px}
.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)}
.header .btn-call{padding:12px 18px;min-height:46px;font-size:15px}
.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,.86) 55%,rgba(11,13,16,.74) 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 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:18px 16px;display:flex;flex-direction:column;gap:3px}
.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:104px;width:auto;margin-bottom:14px}
.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)}
}

@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:26px}
  .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)}
}

@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 picture{display:block}
.jobshot img{display:block;width:100%;height:auto;aspect-ratio:var(--ar-sm,4/3);object-fit:cover}
.jobshot figcaption{color:var(--steel-300);font-size:14px;line-height:1.55;
  padding:14px var(--gut) 16px;border-left:3px solid var(--red);margin:0 var(--gut) 0 0}

/* 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}
.galitem figcaption{padding:14px 16px 16px;font-size:14px;line-height:1.55;color:var(--steel-600)}
.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}
  .jobshot figcaption{max-width:72ch;padding-left:var(--gut)}
  .galgrid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .galgrid{grid-template-columns:repeat(3,1fr)}
}

/* <picture> wrappers need to fill the slots their plain <img> used to fill. */
.hero-media picture{display:block;position:absolute;inset:0}
.split picture{display:block;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}
}