/**
 * Rotech Granite — component styles
 *
 * Only components Salient does not give us, or where Salient's defaults fight
 * the brand. Tokens live in style.css. Everything is `rt-` prefixed so nothing
 * collides with Salient or a plugin.
 */

/* ---------- Spacing scale ----------
   One rhythm, three stops, used everywhere a section, band or grouped
   fragment needs vertical space. Component-level tokens (not brand tokens,
   so they live here rather than style.css):
   --rt-sp      full section padding (top+bottom) — the default rhythm
                between genuinely separate sections.
   --rt-sp-half half strength — a "continuation" gap: page-intro into its
                first section, or between fragments that belong to one
                visual group (see .rt-stack below).
   --rt-sp-x    section inline padding, unchanged, named for reuse.
   --rt-gap     shared card/grid gap so rt-grid-2/3/4 don't drift from
                each other by a few px of hand-picked difference. */
:root{
  --rt-sp:clamp(60px,8vw,110px);
  --rt-sp-half:clamp(32px,4.5vw,56px);
  --rt-sp-x:clamp(20px,5vw,48px);
  --rt-gap:1.5rem;
}

/* ---------- Buttons ---------- */
.rt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--rt-sans);font-weight:700;font-size:.95rem;
  padding:1rem 1.75rem;border-radius:var(--rt-r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:var(--rt-t);white-space:nowrap;
}
.rt-btn-primary{background:var(--rt-red);color:#fff}
.rt-btn-primary:hover{background:var(--rt-red-dk);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(194,49,27,.75)}
/* Gold buttons take DARK text — white on #FFC60B fails contrast. */
.rt-btn-gold{background:var(--rt-gold);color:var(--rt-ink)}
.rt-btn-gold:hover{background:#F0B400;color:var(--rt-ink);transform:translateY(-2px)}
.rt-btn-outline{background:transparent;color:var(--rt-ink);border-color:var(--rt-ink)}
.rt-btn-outline:hover{background:var(--rt-ink);color:#fff}

/* ---------- Trust strip (gold band) ---------- */
.rt-trust{background:var(--rt-gold);color:var(--rt-ink);display:grid;
  grid-template-columns:repeat(4,1fr)}
.rt-trust-i{padding:1.9rem 1.2rem;text-align:center;display:block;
  text-decoration:none;color:inherit;transition:var(--rt-t);
  border-right:1px solid rgba(26,26,26,.16)}
.rt-trust-i:last-child{border-right:0}
a.rt-trust-i:hover{background:rgba(26,26,26,.07);color:inherit}
.rt-trust-n{font-family:var(--rt-serif);font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-weight:700;line-height:1}
.rt-trust-l{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:rgba(26,26,26,.72);margin-top:.45rem}
@media(max-width:760px){
  .rt-trust{grid-template-columns:repeat(2,1fr)}
  .rt-trust-i:nth-child(2){border-right:0}
  .rt-trust-i:nth-child(-n+2){border-bottom:1px solid rgba(26,26,26,.16)}
}

/* ---------- Shared type ---------- */
.rt-eyebrow{font-family:var(--rt-sans);font-size:.75rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rt-gold-tx);margin:0 0 .9rem}
.rt-lede{font-size:clamp(1.03rem,1.55vw,1.18rem);color:var(--rt-text-mute);max-width:62ch}

/* ---------- Full-bleed helper ----------
   Salient constrains WPBakery rows to a ~1100px container. WPBakery's own
   full_width="stretch_row" relies on its JS measuring the row, which does not
   fire reliably for shortcode-authored rows. This breaks an element out of any
   centred container using pure CSS, so it works regardless of the builder. */
.rt-hero,
.rt-trust{
  width:100vw;max-width:100vw;
  margin-left:50%;transform:translateX(-50%);
}
/* 100vw counts the scrollbar, so clamp the page to avoid a sideways scroll */
html{overflow-x:hidden}

/* ---------- Hero (light split — not a dark overlay hero) ---------- */
.rt-hero{background:var(--rt-bone);overflow:hidden}
.rt-hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:clamp(520px,72vh,700px)}
.rt-hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,80px) clamp(24px,4vw,64px);max-width:660px;margin-left:auto}
.rt-hero-copy h1{font-family:var(--rt-serif);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;font-size:clamp(2.4rem,5vw,4rem);color:var(--rt-ink);margin:0 0 1.2rem;
  text-wrap:balance}
.rt-hero-copy h1 em{font-style:normal;color:var(--rt-red)}
.rt-hero-rule{width:76px;height:5px;background:var(--rt-gold);border-radius:3px;margin-bottom:1.6rem}
.rt-hero-btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.rt-hero-chips{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:2.1rem;
  padding-top:1.5rem;border-top:1px solid var(--rt-line)}
.rt-chip{display:flex;align-items:center;gap:.45rem;font-size:.85rem;
  color:var(--rt-text);font-weight:600}
.rt-chip svg{width:17px;height:17px;stroke:var(--rt-red);fill:none;stroke-width:2.4;flex-shrink:0}
.rt-hero-media{position:relative;min-height:320px}
.rt-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 55%}
@media(max-width:940px){
  .rt-hero-grid{grid-template-columns:1fr}
  .rt-hero-copy{max-width:none;margin:0;order:2}
  .rt-hero-media{order:1;min-height:clamp(260px,42vh,380px)}
}

/* ---------- Profile / credential link cards ---------- */
.rt-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;margin-bottom:clamp(2rem,4vw,2.8rem)}
.rt-proof-i{display:flex;align-items:center;gap:.9rem;background:var(--rt-paper);
  border:1px solid var(--rt-line);border-radius:var(--rt-r);padding:1.05rem 1.2rem;
  text-decoration:none;transition:var(--rt-t)}
.rt-proof-i:hover{border-color:var(--rt-gold);box-shadow:var(--rt-shadow);transform:translateY(-3px)}
.rt-proof-badge{width:48px;height:48px;border-radius:var(--rt-r);display:grid;
  place-items:center;font-weight:800;flex-shrink:0;font-size:1.05rem;font-family:var(--rt-sans)}
.rt-proof-g{background:#F1F3F4;color:#1A73E8}
.rt-proof-y{background:#FDF0EF;color:#D32323}
.rt-proof-b{background:var(--rt-ink);color:var(--rt-gold);font-size:1.15rem}
.rt-proof-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rt-proof-t b{font-size:1rem;color:var(--rt-ink)}
.rt-proof-t small{font-size:.82rem;color:var(--rt-text-mute)}
.rt-go{margin-left:auto;width:17px;height:17px;stroke:var(--rt-text-mute);
  fill:none;stroke-width:2;flex-shrink:0;transition:var(--rt-t)}
.rt-proof-i:hover .rt-go{stroke:var(--rt-red);transform:translateX(3px)}

/* ---------- BBB A+ callout ---------- */
.rt-bbb{display:flex;align-items:center;gap:1.25rem;background:var(--rt-ink);color:#fff;
  border-radius:var(--rt-r);padding:1.5rem 1.7rem;margin-top:2.5rem;flex-wrap:wrap}
.rt-bbb-grade{font-family:var(--rt-serif);font-size:2.6rem;font-weight:700;
  color:var(--rt-gold);line-height:1;flex-shrink:0}
.rt-bbb-t{flex:1;min-width:200px}
.rt-bbb-t b{display:block;font-size:1.05rem}
.rt-bbb-t span{font-size:.9rem;color:rgba(255,255,255,.7)}

/* ---------- Response promise ---------- */
.rt-promise{display:flex;gap:.85rem;align-items:flex-start;background:var(--rt-paper);
  border-left:5px solid var(--rt-red);padding:1.1rem 1.3rem;
  border-radius:0 var(--rt-r) var(--rt-r) 0;box-shadow:0 6px 20px -14px rgba(26,26,26,.4)}
.rt-promise svg{width:20px;height:20px;stroke:var(--rt-red);fill:none;stroke-width:2;
  flex-shrink:0;margin-top:3px}
.rt-promise p{margin:0;font-size:.93rem}

/* ---------- Hours / licence ---------- */
.rt-hours{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.rt-hours li{display:flex;justify-content:space-between;gap:1.5rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--rt-line)}
.rt-hours li:last-child{border-bottom:0}
.rt-lic{display:inline-block;padding:.4rem .8rem;border:1px solid var(--rt-gold);
  color:var(--rt-gold-tx);border-radius:var(--rt-r);font-size:.75rem;
  letter-spacing:.05em;font-weight:700}

/* ---------- Sticky mobile call bar ---------- */
.rt-callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;display:none;
  background:var(--rt-red);color:#fff;text-decoration:none;padding:.95rem;
  font-weight:800;font-size:.98rem;box-shadow:0 -6px 24px -8px rgba(26,26,26,.45);
}
.rt-callbar:hover,.rt-callbar:focus{color:#fff}
/* White stroked icon — a phone emoji renders red-on-red and disappears. */
.rt-callbar svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.2;flex-shrink:0}
@media(max-width:720px){
  .rt-callbar{display:flex;align-items:center;justify-content:center;gap:.6rem}
  body{padding-bottom:56px}
  /* keep Salient's back-to-top clear of the bar */
  #to-top{bottom:70px !important}
}

/* ---------- Sections ----------
   Salient's WPBakery build ignores el_id/el_class on rows, so each section
   carries its own <section id class> emitted inside a text block. Sections
   full-bleed themselves and re-establish their own centred container, which is
   why .rt-wrap exists for the blocks that sit outside a <section>. */
.rt-section{
  width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%);
  padding:var(--rt-sp) var(--rt-sp-x);
}
.rt-section.rt-bone{background:var(--rt-bone)}
.rt-section > *{max-width:1200px;margin-inline:auto}
.rt-wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--rt-sp-x)}

/* A section immediately following the page-intro band already inherits the
   intro's own bottom whitespace — a full standard top-padding on top of that
   stacked two gaps and left every inner page with a dead zone under the H1.
   Halve it so intro + first section read as one continuous opening, matching
   the rt-section-to-rt-section rhythm used for the rest of the page. Home has
   no .rt-page-intro (the hero fills that role) so it's unaffected. */
.wpb_text_column:has(.rt-page-intro) + .wpb_text_column .rt-section:first-child,
.wpb_content_element:has(.rt-page-intro) + .wpb_content_element .rt-section:first-child,
.vc_row:has(.rt-page-intro) + .vc_row .rt-section:first-child{
  padding-top:var(--rt-sp-half);
}

/* Section h2 used inside split layouts */
.rt-h2{font-family:var(--rt-serif);font-weight:600;font-size:clamp(2rem,4vw,2.7rem);
  color:var(--rt-ink);line-height:1.14;letter-spacing:-.015em;margin:0 0 .9rem;text-wrap:balance}

/* Card / step grids — CSS grid instead of vc_column widths */
.rt-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--rt-gap);align-items:stretch}
.rt-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--rt-gap)}
.rt-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.rt-split{grid-template-columns:1fr}}

/* "Established" badge on the why-image */
.rt-badge{position:absolute;right:0;bottom:0;background:var(--rt-gold);color:var(--rt-ink);
  padding:1.1rem 1.45rem;text-align:center}
.rt-badge b{display:block;font-family:var(--rt-serif);font-size:2.1rem;line-height:1}
.rt-badge span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* Contact + form slot */
.rt-contact{margin-top:1.8rem}
.rt-contact p{margin:0 0 .6rem}
.rt-form-slot{background:var(--rt-paper);border-top:5px solid var(--rt-gold);border-radius:var(--rt-r);
  padding:clamp(1.6rem,3vw,2.3rem);box-shadow:var(--rt-shadow)}
.rt-form-slot h3{font-family:var(--rt-serif);font-size:1.4rem;color:var(--rt-ink);margin:0 0 .25rem}
.rt-form-slot .rt-sub{font-size:.9rem;color:var(--rt-text-mute);margin:0 0 1.4rem}
.rt-form-todo{padding:1.6rem;border:2px dashed var(--rt-line);border-radius:var(--rt-r);
  text-align:center;color:var(--rt-text-mute);font-size:.88rem;margin:0}
.rt-shead{text-align:center;max-width:760px;margin:0 auto clamp(2.2rem,4vw,3.4rem)}
.rt-shead h2{font-family:var(--rt-serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);
  color:var(--rt-ink);line-height:1.12;letter-spacing:-.015em;margin:0 0 .8rem;text-wrap:balance}
.rt-shead .rt-lede{margin-inline:auto}

/* ---------- Fragment stack ----------
   For a sequence of standalone shortcode fragments that reads as ONE section
   (proof cards -> review-card grid -> BBB band is the current case) but is
   emitted as separate builder blocks. Wrap the group in one
   <section class="rt-section rt-stack"> holding the fragments as direct
   children instead of several rt_block() calls with inline padding
   overrides — see the FOR THE WP ENGINEER notes for the exact build-script
   change. One rt-section padding around the whole group, half-strength gaps
   between its pieces. */
.rt-stack > * + *{margin-top:var(--rt-sp-half)}

/* Service / process / material cards built from vc_column_text */
.rt-cards .wpb_column{margin-bottom:1.4rem}
.rt-card{background:var(--rt-paper);border:1px solid var(--rt-line);border-radius:var(--rt-r);
  padding:2rem 1.8rem;height:100%;transition:var(--rt-t);position:relative;overflow:hidden}
.rt-card::before{content:'';position:absolute;left:0;top:0;height:4px;width:0;
  background:var(--rt-gold);transition:var(--rt-t)}
.rt-card:hover{transform:translateY(-5px);box-shadow:var(--rt-shadow);border-color:transparent}
.rt-card:hover::before{width:100%}
.rt-card h3{font-family:var(--rt-serif);font-size:1.28rem;color:var(--rt-ink);margin:0 0 .5rem}
.rt-card p{color:var(--rt-text-mute);font-size:.95rem;margin:0}
/* Icon tile — restores the scannable icon per service from the approved design */
.rt-card .rt-ic{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--rt-r);
  background:var(--rt-bone-2);margin-bottom:1.2rem}
.rt-card .rt-ic svg{width:24px;height:24px;stroke:var(--rt-red);fill:none;stroke-width:1.7}

/* Material teaser tiles (home) — portrait image cards with an overlay caption,
   so the home page previews the stone range and doesn't repeat the split idiom */
.rt-mat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--rt-gap)}
.rt-mat{position:relative;border-radius:var(--rt-r);overflow:hidden;aspect-ratio:3/4;
  display:flex;align-items:flex-end;color:#fff;text-decoration:none;transition:var(--rt-t)}
.rt-mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.rt-mat::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,26,26,.9),rgba(26,26,26,.2) 55%,rgba(26,26,26,.03))}
.rt-mat:hover img{transform:scale(1.07)}
/* Tile is a block <div> (wpautop-safe); a stretched transparent link makes the
   whole tile clickable without wrapping the block markup in an inline <a>. */
.rt-mat-link{position:absolute;inset:0;z-index:3}
.rt-mat:focus-within{outline:3px solid var(--rt-gold);outline-offset:2px}
.rt-mat-t{position:relative;z-index:2;padding:1.3rem;border-left:4px solid var(--rt-gold);margin:0 1rem 1rem}
.rt-mat-t h3{color:#fff;font-family:var(--rt-serif);font-size:1.25rem;margin:0 0 .12rem}
.rt-mat-t p{color:rgba(255,255,255,.82);font-size:.84rem;margin:0}

/* Standalone full-bleed band (e.g. the trust strip on the About page). It must
   NOT be wrapped in .rt-section, whose "> * {max-width:1200px}" rule would fight
   the band's full-bleed and shove it off-centre. This wrapper just gives the
   self-full-bleeding band vertical breathing room. */
.rt-band{padding-block:var(--rt-sp-half)}

/* wpautop inserts a stray <p> (sometimes holding a <br>, so :empty misses it)
   after each inline <a> tile. These grids only ever hold real tiles/cards, so
   any direct <p> child is junk — drop it. */
.rt-mat-grid > p,
.rt-grid-2 > p,.rt-grid-3 > p,.rt-grid-4 > p{display:none}

/* Why-Rotech image */
.rt-why-media{border-radius:var(--rt-r);overflow:hidden;box-shadow:var(--rt-shadow);position:relative}
.rt-why-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* Numbered process steps — numbering is real sequence info, not decoration */
.rt-steps{counter-reset:rtstep}
.rt-step{position:relative;padding-top:2.7rem}
.rt-step::before{counter-increment:rtstep;content:'0' counter(rtstep);
  position:absolute;top:0;left:0;font-family:var(--rt-serif);font-size:2.5rem;
  font-weight:700;color:var(--rt-gold);line-height:1}
.rt-step h3{font-family:var(--rt-serif);font-size:1.1rem;color:var(--rt-ink);margin:0 0 .4rem}
.rt-step p{font-size:.93rem;color:var(--rt-text-mute);margin:0}

/* Why-Rotech numbered features */
.rt-feat{display:flex;gap:1rem;margin-bottom:1.5rem}
.rt-feat-n{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--rt-gold);
  display:grid;place-items:center;color:var(--rt-ink);font-weight:800;font-size:.85rem}
.rt-feat h4{font-family:var(--rt-sans);font-size:1rem;font-weight:700;margin:0 0 .25rem;color:var(--rt-ink)}
.rt-feat p{font-size:.93rem;color:var(--rt-text-mute);margin:0}

/* Testimonial cards */
.rt-rev{background:var(--rt-paper);border:1px solid var(--rt-line);border-top:4px solid var(--rt-gold);
  border-radius:var(--rt-r);padding:1.9rem;height:100%;transition:var(--rt-t)}
.rt-rev:hover{box-shadow:var(--rt-shadow);transform:translateY(-4px)}
.rt-rev .rt-stars{color:var(--rt-gold-tx);letter-spacing:.14em;font-size:.95rem;margin-bottom:.9rem}
.rt-rev blockquote{margin:0 0 1.3rem;font-size:1rem;line-height:1.7;border:0;padding:0}
.rt-rev cite{display:block;font-style:normal;padding-top:1.1rem;border-top:1px solid var(--rt-line);
  font-size:.92rem;font-weight:700;color:var(--rt-ink)}
.rt-rev cite span{display:block;font-weight:400;font-size:.8rem;color:var(--rt-text-mute)}

/* ---------- Portfolio gallery ---------- */
/* Brand the active filter pill */
.portfolio-filters-inline ul li a.active,
.portfolio-filters ul li a.active{background:var(--rt-ink) !important;color:#fff !important}

/* Hide the auto date on portfolio items — it shows the post-creation date
   ("July 2026"), which misleadingly reads as the install date for every job. */
.portfolio-items .col time,
.portfolio-items .col .date,
.portfolio-items .col .meta-date,
.portfolio-items .col .work-meta .date{display:none !important}

/* #current-category is Salient's MOBILE filter trigger. With horizontal_filters
   on, the inline list is already visible on desktop, so the trigger renders as a
   stray "All" floating to the left of the real filter bar. Hide it above mobile. */
@media(min-width:1000px){
  .portfolio-filters-inline #current-category{display:none !important}
}

/* The gallery heading sits in its own section; kill the doubled gap before the
   portfolio row so the filter bar tucks under the heading. */
#gallery.rt-section{padding-bottom:0}
.portfolio-filters-inline{margin-top:0 !important}

/* ---------- Inner-page intro band ---------- */
.rt-page-intro{
  width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%);
  background:var(--rt-bone);text-align:center;
  padding:clamp(56px,8vw,96px) var(--rt-sp-x);
}
.rt-page-intro-in{max-width:780px;margin:0 auto}
.rt-page-intro h1{
  font-family:var(--rt-serif);font-weight:600;color:var(--rt-ink);
  font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.12;letter-spacing:-.015em;
  margin:.2rem 0 1rem;text-wrap:balance;
}
.rt-page-intro .rt-lede{margin-inline:auto}

/* two-column grid + reversed split */
.rt-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--rt-gap)}
@media(max-width:760px){.rt-grid-2{grid-template-columns:1fr}}
@media(min-width:901px){.rt-split-rev>*:first-child{order:2}}

/* service card "what's included" list */
.rt-card .rt-includes{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.rt-card .rt-includes li{position:relative;padding-left:1.4rem;font-size:.92rem;color:var(--rt-text-mute)}
.rt-card .rt-includes li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;
  background:var(--rt-gold);border-radius:2px;transform:rotate(45deg)}

/* material "best for" tag + split image */
.rt-mattag{display:inline-block;margin-top:1.1rem;padding:.4rem .85rem;background:var(--rt-bone-2);
  border-radius:var(--rt-r);font-size:.8rem;font-weight:700;color:var(--rt-gold-tx);letter-spacing:.02em}
.rt-split-img{border-radius:var(--rt-r);overflow:hidden;box-shadow:var(--rt-shadow)}
.rt-split-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* contact detail list */
.rt-contact-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1.2rem}
.rt-contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.rt-ci{flex-shrink:0;width:42px;height:42px;border-radius:var(--rt-r);background:var(--rt-bone-2);
  display:grid;place-items:center}
.rt-ci svg{width:20px;height:20px;stroke:var(--rt-red);fill:none;stroke-width:2}
.rt-contact-list b{display:block;color:var(--rt-ink);font-size:.95rem;margin-bottom:.1rem}
.rt-contact-list span,.rt-contact-list .rt-cl a{color:var(--rt-text-mute);font-size:.93rem;text-decoration:none}
.rt-contact-list .rt-cl a:hover{color:var(--rt-red)}

/* responsive map embed */
.rt-map{border-radius:var(--rt-r);overflow:hidden;box-shadow:var(--rt-shadow);border:1px solid var(--rt-line);margin-top:1.5rem}
.rt-map iframe{display:block;width:100%;height:clamp(300px,42vw,460px);border:0}

/* ---------- Quote form (Contact Form 7) ---------- */
.rt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:560px){.rt-form-grid{grid-template-columns:1fr}}
.rt-f{margin:0 0 1rem;display:flex;flex-direction:column;gap:.35rem}
.rt-f-full{grid-column:1/-1}
.rt-f label{font-size:.82rem;font-weight:700;color:var(--rt-ink)}
.rt-req{color:var(--rt-red)}
.rt-form-slot .wpcf7 input:not([type=submit]),
.rt-form-slot .wpcf7 select,
.rt-form-slot .wpcf7 textarea{
  width:100%;font:400 .95rem var(--rt-sans);color:var(--rt-text);
  background:var(--rt-bone);border:1px solid var(--rt-line);
  border-radius:var(--rt-r);padding:.8rem .9rem;transition:var(--rt-t);
}
.rt-form-slot .wpcf7 input:focus,
.rt-form-slot .wpcf7 select:focus,
.rt-form-slot .wpcf7 textarea:focus{
  outline:none;border-color:var(--rt-gold);background:#fff;
  box-shadow:0 0 0 3px rgba(255,198,11,.3);
}
.rt-form-slot .wpcf7 textarea{resize:vertical;min-height:96px}
.rt-f-submit{margin-top:.3rem}
.rt-form-slot .wpcf7 input[type=submit]{
  width:100%;background:var(--rt-red) !important;color:#fff !important;
  font-weight:700;font-size:1rem;padding:1.15rem 2rem;border:0;
  border-radius:var(--rt-r);cursor:pointer;transition:var(--rt-t);
}
.rt-form-slot .wpcf7 input[type=submit]:hover{
  background:var(--rt-red-dk) !important;transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(194,49,27,.75);
}
/* CF7 validation + response messages, restyled off its defaults */
.rt-form-slot .wpcf7-not-valid-tip{color:var(--rt-red);font-size:.78rem;font-weight:600;margin-top:.2rem}
.rt-form-slot .wpcf7 .wpcf7-not-valid{border-color:var(--rt-red) !important;background:#fdf4f2 !important}
.rt-form-slot .wpcf7-response-output{
  margin:1rem 0 0 !important;padding:.9rem 1.1rem !important;border-radius:var(--rt-r);
  border-width:2px !important;font-size:.9rem;
}
.rt-form-slot .wpcf7-mail-sent-ok{border-color:#2e7d32 !important;background:#e8f5e9;color:#1b5e20}
.rt-form-slot .wpcf7-validation-errors,
.rt-form-slot .wpcf7-mail-sent-ng{border-color:var(--rt-red) !important;background:#fdf4f2;color:var(--rt-red-dk)}
.rt-form-slot .wpcf7-spinner{margin:.5rem auto 0;display:block}

/* ---------- Header brand lockup: sunburst mark + wordmark ----------
   Salient renders the site name as a PLAIN, unwrapped text node inside
   #logo (see nectar_logo_output() in Salient core — no span to hook a
   two-line lockup onto). This rebalances the mark against the wordmark and
   gives the wordmark real weight so the two read as one confident mark, the
   way the approved mockup pairs a ~46px mark with a 1.3rem/700 wordmark. A
   dedicated gold "Commercial & Residential" subline needs a markup change
   Salient's default doesn't offer via CSS alone — see FOR THE WP ENGINEER in
   the handoff notes. The .rt-word / .rt-sub rules below are pre-wired for
   that markup and are inert until it exists. */
#header-outer #logo,
#header-outer .col #logo{
  display:inline-flex !important;
  align-items:center;
  gap:.7rem;
  font-family:var(--rt-serif) !important;
  font-weight:700 !important;
  font-size:1.3rem !important;
  line-height:1 !important;
  letter-spacing:-.015em !important;
  color:var(--rt-ink) !important;
}
#header-outer #logo::before{
  content:"";flex:0 0 auto;
  width:clamp(38px,3.8vw,46px);height:clamp(38px,3.8vw,46px);
  background:url(../brand/rotech-mark.svg) center/contain no-repeat;
}
#header-outer #logo .rt-word{display:block;font-size:1em;font-weight:700}
#header-outer #logo .rt-sub{
  display:block;font-family:var(--rt-sans);font-size:.58rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rt-gold-tx);margin-top:.3rem;
}
/* Salient's own "small-nav" scrolled/sticky header state: shrink the same
   lockup rather than let it clip or overlap the (also smaller) nav. */
#header-outer.small-nav #logo,
#header-outer.small-nav .col #logo{font-size:1.1rem !important;gap:.55rem}
#header-outer.small-nav #logo::before{width:32px;height:32px}

/* ---------- Header nav ----------
   Salient's default text-logo header ships the primary nav at 14px with 0
   horizontal padding on the <a> — cramped and mismatched next to a wordmark
   this size. Give it real weight, letter-spacing and space between items,
   plus the gold underline-on-hover from the mockup. Scoped to ul.sf-menu
   inside #header-outer only, so it never touches the off-canvas mobile menu
   (different markup entirely — see classic-mobile-nav.php). */
#header-outer ul.sf-menu > li{margin:0 .35rem !important}
#header-outer ul.sf-menu > li > a{
  font-family:var(--rt-sans) !important;
  font-size:.95rem !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  padding:.5rem .5rem !important;
  position:relative;
}
#header-outer ul.sf-menu > li > a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;width:0;
  background:var(--rt-gold);transition:var(--rt-t);margin-inline:auto;
}
#header-outer ul.sf-menu > li > a:hover::after,
#header-outer ul.sf-menu > li > a:focus-visible::after{width:100%}
#header-outer ul.sf-menu > li > a:focus-visible{
  outline:2px solid var(--rt-gold);outline-offset:2px;border-radius:2px;
}
#header-outer.small-nav ul.sf-menu > li > a{font-size:.9rem !important}

/* Testimonials: drop Salient's decorative blue left-bar (::before). The cards
   already carry a gold top border, so no quote bar is needed. */
.rt-rev blockquote::before,
.rt-rev blockquote::after{content:none !important;border:0 !important;display:none !important}

/* ---------- Closing CTA band ----------
   Deliberate dark band so it never blends into the beige/white section above it,
   and so the heading centers reliably (Salient's own h2 rule beats an inherited
   text-align, so we set it explicitly here). */
.rt-cta{background:var(--rt-ink)}
.rt-cta h2{font-family:var(--rt-serif);font-weight:600;color:#fff;
  font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.14;letter-spacing:-.015em;
  margin:0 0 .7rem;text-align:center;text-wrap:balance}
.rt-cta .rt-lede{color:rgba(255,255,255,.72);margin:0 auto 1.7rem;text-align:center}
.rt-cta-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* Full-bleed sections must butt directly together. WPBakery gives each content
   block a default bottom margin, which left a thin strip of the white page
   background between sections — invisible at a beige/white boundary, but a
   visible "line" where two same-coloured sections meet. Zero it for the wrappers
   that hold our sections. */
.wpb_text_column:has(.rt-section),
.wpb_text_column:has(.rt-page-intro),
.wpb_text_column:has(.rt-wrap),
.wpb_text_column:has(.portfolio-items),
.wpb_content_element:has(.rt-section),
.wpb_content_element:has(.rt-page-intro),
.wpb_content_element:has(.rt-wrap),
.wpb_content_element:has(.portfolio-items),
.vc_row:has(.rt-section),
.vc_row:has(.rt-page-intro),
.vc_row:has(.rt-wrap),
.vc_row:has(.portfolio-items){margin-bottom:0 !important}

/* Bare rt-wrap fragments (proof cards, review-card grid, BBB band on pages
   still using the old per-block markup — see FOR THE WP ENGINEER) and the
   native portfolio grid aren't wrapped in .rt-section, so with their default
   WPBakery margin zeroed above they'd otherwise butt together with NO gap at
   all. Give the portfolio grid a controlled bottom gap matching the section
   scale; it stays tucked to its heading on top (see #gallery.rt-section
   below) since that pairing is deliberate. */
.wpb_content_element:has(.portfolio-items),
.vc_row:has(.portfolio-items){margin-bottom:var(--rt-sp) !important}

/* Fallback for the CURRENT per-page markup (separate rt_block() calls for
   proof cards / review grid / BBB band, before the build-script change to
   .rt-stack lands): give consecutive bare-rt-wrap fragments the same
   half-strength gap .rt-stack uses, so nothing regresses to a hard 0px seam
   if this CSS ships ahead of that edit. Safe to remove once .rt-stack is in
   use everywhere. */
.wpb_content_element:has(.rt-wrap) + .wpb_content_element:has(.rt-wrap),
.vc_row:has(.rt-wrap) + .vc_row:has(.rt-wrap){margin-top:var(--rt-sp-half) !important}

/* Footer "Site by" credit — subtle, sits after the copyright */
.rt-credit{margin-left:.5rem;opacity:.7}
.rt-credit a{text-decoration:underline;text-underline-offset:2px}
.rt-credit a:hover{color:var(--rt-gold)}

/* ---------- Salient overrides ---------- */
/* Salient's default accent is blue; force brand red on interactive chrome. */
body .nectar-button.regular,
body input[type="submit"],
body button[type="submit"]{
  background-color:var(--rt-red) !important;
  border-radius:var(--rt-r) !important;
}
body .nectar-button.regular:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover{background-color:var(--rt-red-dk) !important}

/* Portfolio filter pills → brand */
body .portfolio-filters-inline ul li a.active,
body .portfolio-filters ul li a.active{
  background-color:var(--rt-ink) !important;color:#fff !important;
}

/* Form fields */
body .wpcf7 input:not([type=submit]),
body .wpcf7 textarea,
body .gform_wrapper input:not([type=submit]),
body .gform_wrapper textarea,
body .gform_wrapper select{
  background:var(--rt-bone) !important;border:1px solid var(--rt-line) !important;
  border-radius:var(--rt-r) !important;
}
body .gform_wrapper input:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus{
  border-color:var(--rt-gold) !important;background:#fff !important;
  box-shadow:0 0 0 3px rgba(255,198,11,.3) !important;
}

@media(prefers-reduced-motion:reduce){
  .rt-btn,.rt-proof-i,.rt-go,
  #header-outer #logo::before,
  #header-outer ul.sf-menu > li > a::after{transition:none}
}