/* ============================================================
   Russ Sears Overhead Door — site styles
   Premium LIGHT theme: white / charcoal with brand RED #C52D2F accent.
   Charcoal header/hero/footer anchors. Mobile-first. Class-prefixed (.sg-).
   ============================================================ */

:root {
  --red:        #C52D2F;   /* brand red (from their CSS) */
  --red-dark:   #A11F21;   /* hover/active */
  --red-soft:   #E24F43;
  --charcoal:   #1C1D21;   /* header/footer/hero base */
  --charcoal-2: #26272C;
  --char-line:  #34363D;
  --ink:        #17181C;   /* heading + body ink on light */
  --bg:         #FFFFFF;
  --bg-alt:     #F4F5F7;
  --bg-alt-2:   #ECEEF1;
  --text:       #2A2D34;
  --muted:      #5C626D;
  --line:       #E5E7EC;
  --line-strong:#D4D8DF;
  --silver-1:   #ECEDEF;   /* light text on charcoal */
  --silver-2:   #B7BAC1;
  --silver-3:   #8A8E97;
  --ok:         #1B9E54;
  --shadow-sm:  0 2px 12px rgba(20,22,28,.07);
  --shadow-md:  0 18px 46px rgba(20,22,28,.14);
  --shadow-dark:0 24px 60px rgba(0,0,0,.45);
  --radius:     12px;
  --radius-sm:  8px;
  --maxw:       1180px;
  --gap:        clamp(3.4rem, 7vw, 7rem);
  --hair-light: linear-gradient(90deg,transparent,rgba(0,0,0,.12),transparent);
  --hair-dark:  linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  --font-head:  "Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body:  "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* reset */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
/* [hidden] must beat component display rules (e.g. .sg-pill{display:inline-flex}) */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.68;font-size:1.0625rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--red);text-decoration:none;transition:color .18s ease}a:hover{color:var(--red-dark)}
ul{padding-left:1.15rem}svg{display:block}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.04;letter-spacing:.005em;color:var(--ink);text-transform:uppercase}
h1{font-size:clamp(2.4rem,5.8vw,4.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.25rem)}
h3{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700}
.sg-lead{font-size:clamp(1.08rem,1.6vw,1.32rem);color:var(--muted);font-weight:400}
.sg-accent{color:var(--red)}

.sg-eyebrow{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.28em;font-weight:600;font-size:.82rem;color:var(--red);display:inline-flex;align-items:center;gap:.7rem}
.sg-center .sg-eyebrow{justify-content:center}
.sg-center .sg-eyebrow::before,.sg-center .sg-eyebrow::after{content:"";width:34px;height:1px;background:currentColor;opacity:.5}
.sg-eyebrow.is-light{color:var(--red-soft)}

/* layout */
.sg-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1.35rem}
.sg-section{padding:var(--gap) 0}
.sg-section.is-alt{background:var(--bg-alt)}
.sg-section.is-dark{background:var(--charcoal);color:var(--silver-1);border-block:1px solid rgba(255,255,255,.07)}
.sg-section.is-red{background:linear-gradient(135deg,var(--red) 0%,#9d1c1e 100%);color:#fff}
.sg-section.is-dark h2,.sg-section.is-dark h3,.sg-section.is-red h2,.sg-section.is-red h3{color:#fff}
.sg-center{text-align:center}
.sg-section__head{max-width:760px;margin:0 auto 3rem}.sg-center .sg-section__head{margin-inline:auto}
.sg-section__head h2{margin-top:.6rem}.sg-section__head .sg-lead{margin-top:1rem}

/* icons */
.sg-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sg-ico--sm{width:18px;height:18px}

/* buttons */
.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:1.02rem;padding:.95rem 1.7rem;min-height:52px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:.2s ease;text-align:center;line-height:1.1}
.sg-btn--primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 8px 20px rgba(197,45,47,.32)}
.sg-btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;transform:translateY(-2px)}
.sg-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sg-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.sg-btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.sg-btn--dark:hover{background:#000;color:#fff;transform:translateY(-2px)}
.sg-btn--lg{font-size:1.12rem;padding:1.15rem 2.1rem;min-height:60px}
.sg-btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sg-btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.sg-btn-row--center{justify-content:center}

/* header */
.sg-header{position:sticky;top:0;z-index:60;background:rgba(20,21,25,.97);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.sg-header__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.sg-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.sg-logo__mark{height:42px;width:auto;flex:none}
.sg-logo__text{display:flex;flex-direction:column;line-height:1}
.sg-logo__text b{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,4.5vw,1.42rem);letter-spacing:.05em;color:#fff}
.sg-logo__text i{font-family:var(--font-head);font-style:normal;font-weight:600;text-transform:uppercase;font-size:.58rem;letter-spacing:.34em;color:var(--red-soft);margin-top:3px}
.sg-nav{display:none}
.sg-nav a{color:var(--silver-2);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.96rem;padding:.4rem .2rem;position:relative}
.sg-nav a:hover{color:#fff}.sg-nav a.is-active{color:#fff}
.sg-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red)}
.sg-header__cta{display:none;align-items:center;gap:1rem}
.sg-header__phone{color:#fff;font-family:var(--font-head);font-size:1.18rem;letter-spacing:.04em;white-space:nowrap}
.sg-header__phone span{color:var(--silver-3);font-size:.64rem;display:block;letter-spacing:.2em;text-transform:uppercase}
.sg-burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.sg-burger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.sg-mobile-menu{display:none;background:var(--charcoal);border-top:1px solid rgba(255,255,255,.08)}
.sg-mobile-menu.is-open{display:block}
.sg-mobile-menu nav{display:flex;flex-direction:column;padding:.5rem 0 1.2rem}
.sg-mobile-menu a{color:var(--silver-1);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;padding:.9rem 1.35rem;border-bottom:1px solid rgba(255,255,255,.06);font-size:1.1rem}
.sg-mobile-menu .sg-btn{margin:1rem 1.35rem 0}

/* hero */
.sg-hero{position:relative;color:#fff;background:linear-gradient(180deg,rgba(18,19,23,.92),rgba(18,19,23,.97)),radial-gradient(900px 440px at 78% -10%,rgba(197,45,47,.28),transparent 60%),var(--charcoal);padding:clamp(3.2rem,8vw,7rem) 0 clamp(3.8rem,8vw,6.5rem);overflow:hidden}
.sg-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--red),transparent)}
.sg-hero__grid{display:grid;gap:2.6rem;align-items:center}
.sg-hero h1{color:#fff;margin:1rem 0 0}
.sg-hero__sub{font-size:clamp(1.08rem,1.7vw,1.32rem);color:var(--silver-2);margin:1.3rem 0 1.9rem;max-width:620px}
.sg-hero__media{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-dark);min-height:300px}
.sg-hero__trust{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;margin-top:1.9rem}
.sg-hero__alt + .sg-hero__trust{margin-top:1.35rem}
.sg-hero__trust div{display:flex;align-items:center;gap:.5rem;color:var(--silver-1);font-weight:600;font-size:.96rem}
.sg-hero__trust .sg-ico{color:var(--red-soft)}

/* trust bar */
.sg-trustbar{background:var(--charcoal-2);color:var(--silver-1);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
/* One per row on phones: two columns cramped the condensed caps onto three lines. */
.sg-trustbar__grid{display:grid;grid-template-columns:1fr}
.sg-trustbar__item{display:flex;gap:.85rem;align-items:center;justify-content:flex-start;text-align:left;padding:1.15rem 1rem}
.sg-trustbar__item+.sg-trustbar__item{border-top:1px solid rgba(255,255,255,.09)}
@media(min-width:560px){
  .sg-trustbar__grid{grid-template-columns:repeat(2,1fr)}
  .sg-trustbar__item{justify-content:center;padding:1.7rem 1rem}
  .sg-trustbar__item+.sg-trustbar__item{border-top:0}
  .sg-trustbar__item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .sg-trustbar__item:nth-child(even){border-left:1px solid rgba(255,255,255,.09)}
}
.sg-trustbar__item .sg-ico{color:var(--red-soft);width:28px;height:28px}
.sg-trustbar__item b{font-family:var(--font-head);font-size:1.08rem;color:#fff;display:block;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.sg-trustbar__item small{color:var(--silver-3)}

/* cards */
.sg-cards{display:grid;grid-template-columns:1fr;gap:1.35rem}
.sg-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.7rem;box-shadow:var(--shadow-sm);transition:.22s ease;display:flex;flex-direction:column;overflow:hidden}
.sg-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.sg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.sg-card:hover::before{transform:scaleX(1)}
.sg-card__icon{width:60px;height:60px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.2rem;background:linear-gradient(150deg,var(--red),#9d1c1e);color:#fff;box-shadow:0 8px 18px rgba(197,45,47,.28)}
.sg-card__icon .sg-ico{width:28px;height:28px}
.sg-card h3{margin-bottom:.5rem}.sg-card p{color:var(--muted);margin-bottom:1.2rem}
.sg-card__link{margin-top:auto;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.sg-card__link::after{content:"→";transition:transform .2s}.sg-card:hover .sg-card__link::after{transform:translateX(4px)}

/* Photo-led card. The icon moves onto the image as a badge so the tile still
   carries the brand red without a second red block under it. */
.sg-card--photo{padding:0}
.sg-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.sg-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.sg-card--photo:hover .sg-card__media img{transform:scale(1.045)}
.sg-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,21,0) 45%,rgba(16,17,21,.42) 100%)}
.sg-card__badge{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,var(--red),#9d1c1e);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.sg-card__badge .sg-ico{width:23px;height:23px}
.sg-card__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.sg-card__body h3{margin-bottom:.5rem}
.sg-card__body p{color:var(--muted);margin-bottom:1.2rem}

/* feature list */
.sg-feat{display:grid;grid-template-columns:1fr;gap:1.6rem}
.sg-feat__item{display:flex;gap:1rem;align-items:flex-start}
.sg-feat__item .sg-ic{flex:none;width:50px;height:50px;border-radius:11px;display:grid;place-items:center;background:#FBE9E9;color:var(--red);border:1px solid #F3D2D2}
.sg-section.is-dark .sg-feat__item .sg-ic,.sg-section.is-red .sg-feat__item .sg-ic{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.sg-feat__item h3{font-size:1.22rem;margin-bottom:.3rem}.sg-feat__item p{color:var(--muted)}
/* Three-across variant, stacked and centred, for a section under a centred heading.
   The single-column version left a dead right half on desktop. */
/* .sg-feat.sg-feat--tri, not .sg-feat--tri: the min-width:680px block later in this
   file sets .sg-feat to two columns at equal specificity and would otherwise win. */
@media(min-width:860px){
  .sg-feat.sg-feat--tri{grid-template-columns:repeat(3,1fr);gap:2.6rem 2.2rem}
  .sg-feat--tri .sg-feat__item{flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
}
/* Solid red tiles, matching the card badges. The pale pink wash read as unfinished. */
.sg-feat--tri .sg-feat__item .sg-ic{width:56px;height:56px;background:linear-gradient(150deg,var(--red),#9d1c1e);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(197,45,47,.26)}
.sg-section.is-dark .sg-feat__item p,.sg-section.is-red .sg-feat__item p{color:var(--silver-2)}
.sg-section.is-red .sg-feat__item p{color:rgba(255,255,255,.9)}

/* brands strip */
.sg-brands{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sg-brands__item{background:#fff;display:grid;place-items:center;padding:1.6rem 1rem;min-height:96px}
/* The partner PNGs are pure white on transparent (pulled from the old dark site),
   so on a white tile they render invisible. invert() flips them to black; alpha is
   preserved. Keep invert() in the hover state too or they disappear on hover. */
.sg-brands__item img{max-height:42px;width:auto;opacity:.62;filter:grayscale(1) invert(1);transition:.2s}
.sg-brands__item:hover img{opacity:.95}
.sg-brands__item span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.sg-brands__item--cta{background:var(--bg-alt)}
.sg-brands__item--cta .sg-card__link{color:var(--red)}

/* product gallery */
.sg-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.sg-product{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.sg-product:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sg-product__img{background:var(--bg-alt);display:grid;place-items:center;padding:1rem;min-height:180px}
.sg-product__img img{max-height:170px;width:auto}
.sg-product__cap{padding:.9rem 1.1rem}.sg-product__cap b{display:block;color:var(--ink);font-family:var(--font-head);letter-spacing:.02em}
.sg-product__cap small{color:var(--muted)}

/* placeholder tiles */
.sg-ph{position:relative;min-height:210px;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(45deg,#ECEEF1 0 12px,#E5E8EC 12px 24px);color:var(--silver-3);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;padding:1rem}
.sg-ph--dark{background:repeating-linear-gradient(45deg,#202126 0 12px,#26282E 12px 24px);color:var(--silver-3)}
.sg-ph__brand{width:84px;height:84px;opacity:.42}
/* real photos filling hero media + product tiles */
.sg-hero__img{width:100%;height:320px;object-fit:cover;display:block}
@media(min-width:940px){.sg-hero__img{height:460px}}
.sg-product__img.is-photo{padding:0;min-height:0;background:none}
.sg-product__img.is-photo img{width:100%;height:200px;max-height:none;object-fit:cover}
/* full-bleed home hero with high-res background photo */
/* Mobile: keep the copy on a dark band up top, let the door read underneath it.
   Framed at 72%/58% so the garage door itself is in shot, not the empty lawn. */
.sg-hero--bg{min-height:clamp(430px,60vh,600px);display:flex;align-items:center;
  background:linear-gradient(180deg, rgba(16,17,21,.94) 0%, rgba(16,17,21,.88) 46%, rgba(16,17,21,.60) 100%), url("../img/hero-home.webp") 72% 58%/cover no-repeat, var(--charcoal)}
@media(min-width:940px){.sg-hero--bg{min-height:clamp(460px,70vh,640px);
  background:linear-gradient(102deg, rgba(15,16,20,.94) 0%, rgba(15,16,20,.74) 50%, rgba(15,16,20,.28) 100%), radial-gradient(760px 380px at 88% 18%, rgba(197,45,47,.20), transparent 62%), url("../img/hero-home.webp") center/cover no-repeat, var(--charcoal)}}
.sg-hero__copy{max-width:660px}
@media(max-width:939px){.sg-hero__trust{display:none}}

/* steps */
.sg-steps{display:grid;grid-template-columns:1fr;gap:1.5rem;counter-reset:step}
.sg-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;position:relative;box-shadow:var(--shadow-sm)}
.sg-step__n{counter-increment:step;font-family:var(--font-head);font-weight:800;font-size:3.2rem;line-height:1;color:var(--red);opacity:.92}
.sg-step__n::before{content:"0" counter(step)}
.sg-step h3{margin:.6rem 0 .4rem}.sg-step p{color:var(--muted)}

/* area band */
.sg-area{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.sg-area__list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.sg-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.55rem 1rem;border-radius:999px;font-weight:600;font-size:.92rem}
.sg-map{min-height:300px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.16)}
/* Google's default map is bright green and fights the charcoal sections it sits in.
   Invert + hue-rotate lands it back on a readable dark-mode map with sane road colours. */
.sg-section.is-dark .sg-map{filter:invert(.92) hue-rotate(180deg) saturate(.72) brightness(1.02) contrast(.92);border-color:rgba(255,255,255,.12)}

/* FAQ */
.sg-faq{max-width:840px;margin:0 auto}
.sg-faq__item{border-bottom:1px solid var(--line)}
.sg-faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;color:var(--ink);padding:1.3rem 2.4rem 1.3rem 0;position:relative}
.sg-faq__q::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--red);transition:.2s;font-family:var(--font-body)}
.sg-faq__item.is-open .sg-faq__q::after{content:"\2212"}
.sg-faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--muted)}
.sg-faq__a p{padding:0 0 1.3rem}

/* reviews */
.sg-reviews{text-align:center;max-width:780px;margin:0 auto}
.sg-reviews__note{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem;color:var(--muted)}

/* quote form */
.sg-quote{display:grid;grid-template-columns:1fr;gap:2.2rem}
.sg-form{background:#fff;border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.sg-form h3{margin-bottom:1.1rem}
.sg-form .sg-field{margin-bottom:1.05rem}
.sg-form label{font-weight:600;color:var(--ink);display:block;margin-bottom:.4rem;font-size:.94rem}
.sg-form input,.sg-form select,.sg-form textarea{width:100%;padding:.9rem 1rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;color:var(--text);background:#fff}
/* Native select chrome did not match the inputs. Custom chevron, same box. */
.sg-form select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E4E4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:17px}
.sg-form input:focus,.sg-form select:focus,.sg-form textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(197,45,47,.16)}
.sg-form textarea{min-height:120px;resize:vertical}
.sg-form .sg-consent{font-size:.82rem;color:var(--muted);margin-top:.5rem}
.sg-form__row{display:grid;grid-template-columns:1fr;gap:1.05rem}
.sg-section.is-dark .sg-form label{color:var(--ink)}

/* contact info list */
.sg-info{list-style:none;padding:0;display:grid;gap:1.1rem}
.sg-info li{display:flex;gap:.7rem;align-items:flex-start}
.sg-info .sg-ico{color:var(--red);margin-top:2px}
.sg-loc{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.4rem}
.sg-loc__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm)}
.sg-loc__card h3{font-size:1.15rem;margin-bottom:.3rem}
.sg-loc__card .sg-tag{display:inline-block;background:#FBE9E9;color:var(--red);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;padding:.2rem .6rem;border-radius:6px;margin-bottom:.5rem}

/* footer */
.sg-footer{background:linear-gradient(180deg,#212329 0%,var(--charcoal) 42%);color:var(--silver-2);padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;border-top:1px solid rgba(255,255,255,.12)}
.sg-footer__grid{display:grid;grid-template-columns:1fr;gap:2.2rem}
.sg-footer h4{color:#fff;font-size:1.05rem;margin-bottom:1rem;letter-spacing:.1em}
.sg-footer a{color:var(--silver-2)}.sg-footer a:hover{color:#fff}
.sg-footer ul{list-style:none;padding:0;display:grid;gap:.6rem}
.sg-footer li{display:flex;align-items:center;gap:.6rem}
.sg-footer li .sg-ico{color:var(--silver-3)}
.sg-footer__brand .sg-logo{margin-bottom:1.1rem}
.sg-footer__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.4rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;font-size:.85rem;color:var(--silver-3)}
.sg-todo{color:#E8A33D}

/* sticky mobile CTA */
.sg-mobilecta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;background:var(--charcoal);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.sg-mobilecta a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff}
.sg-mobilecta a.is-quote{background:var(--red)}
body{padding-bottom:66px}

/* misc */
.sg-crumb{font-size:.82rem;color:var(--silver-3);padding-top:1rem;letter-spacing:.04em}.sg-crumb a{color:var(--silver-2)}
.sg-mt{margin-top:1.6rem}
.sg-pill{display:inline-flex;align-items:center;gap:.45rem;background:#FBE9E9;color:var(--red);font-weight:700;font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .9rem;border-radius:999px;font-size:.82rem}
.sg-section.is-dark .sg-pill,.sg-section.is-red .sg-pill{background:rgba(255,255,255,.14);color:#fff}

/* responsive */
@media(min-width:680px){
  .sg-cards{grid-template-columns:repeat(3,1fr)}
  .sg-steps{grid-template-columns:repeat(3,1fr)}
  .sg-trustbar__grid{grid-template-columns:repeat(4,1fr)}
  .sg-trustbar__item:nth-child(n+3){border-top:0}
  .sg-trustbar__item+.sg-trustbar__item{border-left:1px solid rgba(255,255,255,.1)}
  .sg-feat{grid-template-columns:repeat(2,1fr)}
  .sg-brands{grid-template-columns:repeat(4,1fr)}
  .sg-gallery{grid-template-columns:repeat(4,1fr)}
  .sg-form__row{grid-template-columns:1fr 1fr}
  .sg-loc{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:940px){
  .sg-nav{display:flex;gap:1.8rem}.sg-header__cta{display:flex}.sg-burger{display:none}
  .sg-mobile-menu{display:none!important}.sg-mobilecta{display:none}body{padding-bottom:0}
  .sg-hero__grid{grid-template-columns:1.05fr .95fr}.sg-hero__media{min-height:440px}
  .sg-cards.is-4up{grid-template-columns:repeat(4,1fr)}
  .sg-area{grid-template-columns:1fr 1fr}
  .sg-quote{grid-template-columns:.9fr 1.1fr}
  .sg-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Same white-on-transparent partner PNGs on the Brands page tiles. */
.sg-product__img.is-logo img{filter:grayscale(1) invert(1);opacity:.72}

/* Secondary repair line in the hero. Deliberately quiet: the page leads with new doors. */
.sg-hero__alt{margin:1.25rem 0 0;color:var(--silver-2);font-size:.98rem}
.sg-hero__alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.sg-hero__alt a:hover{color:#fff;text-decoration-color:#fff}

/* Repair band: a real section for repairs, sized so it reads as the second offer. */
.sg-section--tight{padding:clamp(2.6rem,5vw,4rem) 0}
.sg-band{display:grid;gap:1.6rem;align-items:center}
.sg-band__title{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:.6rem}
.sg-band p{color:var(--muted);margin-top:.9rem;max-width:62ch}
.sg-band__cta{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.sg-band__phone{color:var(--muted);font-size:.95rem}
@media(min-width:900px){
  .sg-band{grid-template-columns:1fr auto;gap:3rem}
  .sg-band__cta{align-items:center}
}

/* ---------- Audience sections: pain on the left, what we do under it ---------- */
.sg-aud{display:grid;gap:2.4rem;align-items:stretch}
.sg-aud__media{display:flex;align-self:center;aspect-ratio:4/3;width:100%}
.sg-aud__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}
/* Product shots are 290x220 manufacturer files. Filling a photo slot with one
   upscales it ~1.5x and crops the sides, which reads as blurry. Show it at
   native width on a panel instead: sharp, and it looks like a product card. */
.sg-aud__media--product{background:#101114;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.4rem;align-items:center;justify-content:center}
.sg-aud__media--product img{width:auto;height:auto;max-width:290px;min-height:0;object-fit:contain;border-radius:6px;margin:0 auto}
@media(min-width:940px){
  .sg-aud{grid-template-columns:1fr 1fr;gap:3.4rem}
  .sg-aud--flip .sg-aud__copy{order:2}
  .sg-aud--flip .sg-aud__media{order:1}
}

/* Pain / solution list. Problem in ink, what we do about it underneath. */
.sg-pain{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:1.35rem}
.sg-pain li{position:relative;padding-left:2.1rem}
.sg-pain li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:13px;border-radius:3px;
  background:var(--red);transform:rotate(45deg)}
.sg-pain b{display:block;color:var(--ink);font-weight:600;line-height:1.45}
.sg-pain span{display:block;color:var(--muted);margin-top:.18rem}
.sg-pain--light b{color:#fff}
.sg-pain--light span{color:var(--silver-2)}
/* Repairs: two columns so six items do not run down the page */
@media(min-width:860px){
  .sg-pain--grid{grid-template-columns:1fr 1fr;gap:1.6rem 2.6rem;max-width:1000px;margin-inline:auto}
}
.sg-pain--inline{margin-top:1.1rem;gap:1rem}

/* ---------- Hero legibility ----------
   The headline was competing with the photo. Deepen the scrim on the copy side and
   add a soft shadow so the type sits on the image instead of getting lost in it. */
.sg-hero--bg{
  background:linear-gradient(180deg, rgba(12,13,17,.95) 0%, rgba(12,13,17,.90) 44%, rgba(12,13,17,.62) 100%), url("../img/hero-home.webp") 72% 58%/cover no-repeat, var(--charcoal)}
@media(min-width:940px){
  .sg-hero--bg{
    background:linear-gradient(102deg, rgba(10,11,15,.96) 0%, rgba(10,11,15,.90) 34%, rgba(10,11,15,.62) 62%, rgba(10,11,15,.24) 100%),
      radial-gradient(760px 380px at 88% 14%, rgba(197,45,47,.18), transparent 62%),
      url("../img/hero-home.webp") center/cover no-repeat, var(--charcoal)}
}
.sg-hero--bg h1{text-shadow:0 2px 30px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4)}
.sg-hero--bg .sg-hero__sub,.sg-hero--bg .sg-eyebrow,.sg-hero--bg .sg-hero__trust{text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* Chips live on light sections now too (the service-area band moved off charcoal). */
.sg-section:not(.is-dark):not(.is-red) .sg-chip{background:#fff;border:1px solid var(--line-strong);color:var(--ink)}
.sg-section:not(.is-dark):not(.is-red) .sg-map{border-color:var(--line-strong)}
.sg-section:not(.is-dark):not(.is-red) .sg-area p{color:var(--muted)}

/* Hairline seam between same-tone neighbours so sections never melt together. */
.sg-section.is-alt + .sg-section.is-alt,
.sg-section + .sg-section.is-alt{border-top:1px solid var(--line)}
.sg-section.is-dark{border-block:1px solid rgba(255,255,255,.09)}