/* ==========================================================================
   SPECIALIZED MOWING — HOME PAGE STYLES
   Design system carried over from the approved trifold brochure.

   WHERE THIS GOES
   Preferred: a child theme stylesheet. See sm-child-theme-setup.md.

   NOTE ON ADDITIONAL CSS
   This file contains no @import rule on purpose. WordPress runs the
   Additional CSS panel through a CSS linter that treats @import as an
   error and disables the Publish button, which is what stopped this
   saving. Fonts are therefore loaded separately - see the setup notes.

   Do not paste this into a page or a Custom HTML block: WordPress strips
   <style> tags from post content.

   WHY EVERYTHING IS PREFIXED WITH .sm-page
   Every rule is scoped inside .sm-page so none of it can leak out and
   restyle the rest of the site. The page markup must therefore be wrapped
   in <div class="sm-page"> ... </div> for any of this to take effect.

   COLOURS
   The --sm-* custom properties are sampled from the logo artwork.
   Map these to GeneratePress Global Colors when you build for real, so
   blocks inherit them instead of hardcoding hex values.
     #E75D2E  brand orange
     #FFF00F  hi-vis yellow
     #53A43E  brand green
   ========================================================================== */

/* The page wrapper has to establish the font and colour context itself,
   because the theme's own body rules still apply outside it. */
.sm-page{font-family:var(--sm-body);color:var(--sm-ink);background:var(--sm-paper)}

/* GeneratePress adds container padding that fights the full-bleed sections.
   Use the "Full Width / Contained" content layout on this page, or keep
   these two rules. */
.sm-page-wrapper .site-content,
.sm-page-wrapper .content-area,
.sm-page-wrapper .site-main,
.sm-page-wrapper .entry-content{padding:0!important;margin:0!important;max-width:none!important}
.sm-page-wrapper .entry-header,
.sm-page-wrapper .page-header,
.sm-page-wrapper .entry-title{display:none!important}

/* ============================================================
   SPECIALIZED MOWING — HOMEPAGE PROTOTYPE
   Design system carried over from the approved trifold.

   BUILD NOTES (GeneratePress + GenerateBlocks)
   - :root vars below map to GeneratePress Global Colors.
     Set them in Appearance > Customize > Colors so blocks
     inherit them instead of hardcoding hex anywhere.
   - Each <section> = one GenerateBlocks Container.
     Sections marked PATTERN are reusable across the site.
   - .wrap = Container inner width 1200px.
   - No layout depends on JS. The slope figure, the
     before/after slider and the nav all degrade to something
     usable with JS off.
   ============================================================ */
.sm-page *,.sm-page *::before,.sm-page *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
.sm-page{margin:0}
:root{/* sampled from logo artwork */
  --sm-orange:#E75D2E;
  --sm-yellow:#FFF00F;
  --sm-green:#53A43E;
  --sm-ink:#141714;
  --sm-ink-2:#1E231E;
  --sm-paper:#F1F0EB;
  --sm-steel:#7E837C;
  --sm-rule:#C6C8C2;
  --sm-white:#fff;

  --sm-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sm-body:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --sm-mono:'IBM Plex Mono','Courier New',monospace;

  --sm-gut:clamp(1.25rem,4vw,2.5rem);
  --sm-sect:clamp(3.5rem,8vw,7rem);
  --sm-maxw:1200px;}
.sm-page{font-family:var(--sm-body);
  color:var(--sm-ink);
  background:var(--sm-paper);
  font-size:clamp(1rem,.97rem + .18vw,1.08rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;}
.sm-page img{max-width:100%;height:auto;display:block}
.sm-page a{color:inherit}
.sm-page .wrap{max-width:var(--sm-maxw);margin-inline:auto;padding-inline:var(--sm-gut)}
.sm-page .sect{padding-block:var(--sm-sect)}
/* ---------- type ---------- */
.sm-page .eyebrow{font-family:var(--sm-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sm-orange);
  margin:0 0 1rem;}
.sm-page .eyebrow--quiet{color:var(--sm-steel)}
.sm-page h1,.sm-page h2,.sm-page h3,.sm-page h4{font-family:var(--sm-display);font-weight:800;line-height:1.03;letter-spacing:-.025em;margin:0 0 .6em;text-transform:uppercase}
.sm-page h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);font-weight:900;letter-spacing:-.035em}
.sm-page h2{font-size:clamp(1.85rem,1.2rem + 2.7vw,3.1rem)}
.sm-page h3{font-size:clamp(1.15rem,1rem + .8vw,1.55rem)}
.sm-page h4{font-size:1.02rem;letter-spacing:-.01em}
.sm-page p{margin:0 0 1.1em}
.sm-page p:last-child{margin-bottom:0}
.sm-page .lede{font-size:clamp(1.06rem,1rem + .5vw,1.32rem);line-height:1.55;color:#31352F}
.sm-page .hl{color:var(--sm-orange)}
/* ---------- buttons — PATTERN ---------- */
.sm-page .btn{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sm-display);font-weight:800;font-size:.94rem;
  letter-spacing:.01em;text-transform:uppercase;text-decoration:none;
  padding:1.05em 1.7em;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease;}
.sm-page .btn--primary{background:var(--sm-orange);color:#fff}
.sm-page .btn--primary:hover{background:#cf4f24;transform:translateY(-2px)}
.sm-page .btn--ghost{border-color:currentColor;background:transparent}
.sm-page .btn--ghost:hover{background:var(--sm-ink);color:var(--sm-paper);border-color:var(--sm-ink);transform:translateY(-2px)}
.sm-page .btn--on-dark.btn--ghost:hover{background:var(--sm-paper);color:var(--sm-ink);border-color:var(--sm-paper)}
/* Long button labels must be able to wrap. white-space:nowrap used to be on
   .btn itself, which forced any long-labelled button to push the page wider
   than the viewport on phones. Nowrap now lives only on the header CTA, where
   the label is short and wrapping would look broken. */
.sm-page .btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.sm-page .btn{text-align:center}
@media(max-width:520px){
  .sm-page .btn-row{width:100%}
  .sm-page .btn-row .btn{flex:1 1 100%}
}
.sm-page .btn-row .btn{flex:0 1 auto}
/* ---------- header ---------- */
.sm-page .hdr{position:sticky;top:0;z-index:100;
  background:rgba(241,240,235,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--sm-rule);}
.sm-page .hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.sm-page .hdr__logo img{width:190px}
.sm-page .hdr__nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.sm-page .hdr__nav a{font-family:var(--sm-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.35rem 0;border-bottom:2px solid transparent;}
.sm-page .hdr__nav a:hover{border-bottom-color:var(--sm-orange)}
.sm-page .hdr__tel{font-family:var(--sm-display);font-weight:800;font-size:1rem;
  text-decoration:none;white-space:nowrap;}
.sm-page .hdr__cta{padding:.8em 1.2em;font-size:.82rem}
@media(max-width:900px){.sm-page .hdr__nav a:not(.hdr__cta):not(.hdr__tel){display:none}
.sm-page .hdr__logo img{width:150px}
.sm-page .hdr__in{gap:.9rem;min-height:66px}
.sm-page .hdr__nav{gap:.9rem}
.sm-page .hdr__cta{white-space:nowrap;padding:.75em 1em;font-size:.74rem}
.sm-page .hdr__tel{font-size:.92rem}}
@media(max-width:520px){.sm-page .hdr__logo img{width:124px}
.sm-page .hdr__tel{display:none}}
/* ============================================================
   HERO — the slope is the signature element
   ============================================================ */
.sm-page .hero{position:relative;background:var(--sm-paper);overflow:hidden}
.sm-page .hero__in{position:relative;z-index:3;padding-block:clamp(1.6rem,3vw,2.4rem) clamp(3.5rem,15vw,8rem)}
.sm-page .hero__copy{max-width:min(46rem,100%)}
.sm-page .hero h1 .go{display:block;color:var(--sm-orange)}
.sm-page .hero .lede{max-width:32rem;margin-top:1rem}
/* Aspect ratio locked to the viewBox (1200:300) so preserveAspectRatio cannot
   stretch it. This is what keeps the 60 degree face a true 60 degrees at every
   viewport width. Never set an explicit height on this element. */
.sm-page .hero__slope{position:absolute;left:0;right:0;bottom:0;width:100%;
  aspect-ratio:1200/260;height:auto;z-index:1;pointer-events:none}
.sm-page .hero__slope svg{width:100%;height:100%;display:block}
.sm-page .hero__strip{position:relative;z-index:4;background:var(--sm-ink);color:var(--sm-paper);}
.sm-page .hero__strip .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;padding-block:1.1rem;align-items:center}
.sm-page .hero__strip span{font-family:var(--sm-mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;display:flex;align-items:center;gap:.6em;}
.sm-page .hero__strip span::before{content:"";width:7px;height:7px;background:var(--sm-orange);flex:0 0 auto}
.sm-page .hero__strip .hz::before{background:var(--sm-yellow)}
/* ============================================================
   SAFETY CASE — dark section
   ============================================================ */
.sm-page .dark{background:var(--sm-ink);color:var(--sm-paper)}
.sm-page .dark .eyebrow{color:var(--sm-yellow)}
.sm-page .dark .lede{color:#C9CEC5}
.sm-page .dark p{color:#C9CEC5}
.sm-page .split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem)}
@media(min-width:900px){.sm-page .split{grid-template-columns:1.05fr .95fr;align-items:start}}
.sm-page .risk{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid rgba(241,240,235,.2)}
.sm-page .risk li{padding:1.05rem 0 1.05rem 2.4rem;border-bottom:1px solid rgba(241,240,235,.2);
  position:relative;font-size:.98rem;line-height:1.5;}
.sm-page .risk li::before{content:attr(data-n);position:absolute;left:0;top:1.15rem;
  font-family:var(--sm-mono);font-size:.72rem;font-weight:600;
  color:var(--sm-orange);letter-spacing:.08em;}
.sm-page .risk li b{display:block;font-family:var(--sm-display);font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1rem;margin-bottom:.15rem;color:var(--sm-paper)}
.sm-page .pull{background:var(--sm-orange);color:#fff;padding:clamp(1.6rem,3vw,2.4rem);
  margin-top:2rem;}
.sm-page .pull .eyebrow{color:#FFE7D6;margin-bottom:.7rem}
.sm-page .pull p{color:#fff;font-family:var(--sm-display);font-weight:800;
  font-size:clamp(1.1rem,1rem + .9vw,1.5rem);line-height:1.18;
  letter-spacing:-.02em;text-transform:uppercase;margin:0}
/* ============================================================
   BEFORE / AFTER SLIDER — PATTERN (reused on every job page)
   ============================================================ */
.sm-page .ba{position:relative;user-select:none;touch-action:pan-y;overflow:hidden;background:var(--sm-ink)}
.sm-page .ba img{width:100%;display:block;pointer-events:none}
.sm-page .ba__after{position:absolute;inset:0;width:50%;overflow:hidden}
.sm-page .ba__after img{width:auto;height:100%;max-width:none;object-fit:cover}
.sm-page .ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--sm-orange);
  transform:translateX(-50%);z-index:5;}
.sm-page .ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;background:var(--sm-orange);border:3px solid #fff;
  border-radius:50%;display:grid;place-items:center;
  box-shadow:0 3px 14px rgba(0,0,0,.4);cursor:ew-resize;}
.sm-page .ba__grip::before{content:"";width:16px;height:16px;
  border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) translate(2px,-2px)}
.sm-page .ba__tag{position:absolute;top:0;font-family:var(--sm-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:.5em .8em;z-index:4;}
.sm-page .ba__tag--b{right:0;background:var(--sm-ink);color:var(--sm-paper)}
.sm-page .ba__tag--a{left:0;background:var(--sm-orange);color:#fff}
.sm-page .ba__range{position:absolute;inset:0;width:100%;opacity:0;cursor:ew-resize;z-index:6;margin:0}
.sm-page .ba__cap{font-family:var(--sm-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sm-steel);margin-top:.9rem;}
/* ============================================================
   SERVICES — PATTERN
   ============================================================ */
.sm-page .grid-3{display:grid;gap:1px;background:var(--sm-rule);border:1px solid var(--sm-rule);margin-top:2.5rem}
@media(min-width:640px){.sm-page .grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sm-page .grid-3{grid-template-columns:repeat(3,1fr)}}
.sm-page .card{background:var(--sm-paper);padding:clamp(1.4rem,2.6vw,2rem);position:relative;transition:background .18s ease}
.sm-page .card:hover{background:#fff}
.sm-page .card__k{font-family:var(--sm-mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sm-orange);}
.sm-page .card h3{margin:.7rem 0 .5rem}
.sm-page .card p{font-size:.94rem;color:#41463F;margin:0}
/* ============================================================
   SPEC TABLE — PATTERN (equipment pages)
   ============================================================ */
.sm-page .spec{border-top:2px solid var(--sm-ink);margin-top:2.2rem}
.sm-page .spec__row{display:grid;grid-template-columns:1fr;gap:.15rem;
  padding:1.05rem 0;border-bottom:1px solid var(--sm-rule);}
@media(min-width:700px){.sm-page .spec__row{grid-template-columns:11rem 1fr;gap:1.5rem;align-items:baseline}}
.sm-page .spec__k{font-family:var(--sm-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sm-steel)}
.sm-page .spec__v{font-size:1rem;font-weight:500}
.sm-page .spec__v b{font-family:var(--sm-display);font-weight:900;font-size:1.65rem;letter-spacing:-.03em;line-height:1}
/* ============================================================
   AUDIENCE
   ============================================================ */
.sm-page .aud{list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;gap:1px;background:rgba(241,240,235,.22);
  border-block:1px solid rgba(241,240,235,.22)}
@media(min-width:640px){.sm-page .aud{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sm-page .aud{grid-template-columns:repeat(4,1fr)}}
.sm-page .aud li{background:var(--sm-ink);padding:1.3rem 1.2rem}
.sm-page .aud b{display:block;font-family:var(--sm-display);font-weight:800;text-transform:uppercase;
  font-size:.98rem;letter-spacing:-.01em;line-height:1.15}
.sm-page .aud span{display:block;font-size:.85rem;color:#9AA096;margin-top:.35rem;line-height:1.4}
/* ============================================================
   QUOTE CTA
   ============================================================ */
.sm-page .quote{background:var(--sm-orange);color:#fff}
.sm-page .quote .eyebrow{color:#FFE7D6}
.sm-page .quote h2{max-width:22ch}
.sm-page .quote .lede{color:#FFEDE4;max-width:44ch}
.sm-page .quote .btn--ghost{border-color:#fff;color:#fff}
.sm-page .quote .btn--ghost:hover{background:#fff;color:var(--sm-orange)}
.sm-page .quote__solid{background:var(--sm-ink);color:#fff}
.sm-page .quote__solid:hover{background:#000}
.sm-page .steps{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.35)}
@media(min-width:800px){.sm-page .steps{grid-template-columns:repeat(3,1fr)}}
.sm-page .steps li{background:var(--sm-orange);padding:1.4rem 1.3rem}
.sm-page .steps .n{font-family:var(--sm-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:#FFE7D6}
.sm-page .steps b{display:block;font-family:var(--sm-display);font-weight:800;text-transform:uppercase;
  font-size:1.05rem;margin:.5rem 0 .3rem;letter-spacing:-.015em}
.sm-page .steps p{font-size:.92rem;color:#FFEDE4;margin:0}
/* ============================================================
   FOOTER
   ============================================================ */
.sm-page .ftr{background:var(--sm-ink);color:var(--sm-paper);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.sm-page .ftr__grid{display:grid;gap:2.5rem}
@media(min-width:800px){.sm-page .ftr__grid{grid-template-columns:1.3fr 1fr 1fr}}
.sm-page .ftr__logo{width:210px;margin-bottom:1.3rem}
.sm-page .ftr h3{color:var(--sm-yellow);margin-bottom:1rem;font-size:.8rem;font-family:var(--sm-mono);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sm-page .ftr a{text-decoration:none}
.sm-page .ftr__list{list-style:none;margin:0;padding:0}
.sm-page .ftr__list li{margin-bottom:.6rem;font-size:.94rem;color:#C9CEC5}
.sm-page .ftr__list a:hover{color:var(--sm-orange)}
.sm-page .ftr__big{font-family:var(--sm-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;display:block;margin-bottom:.35rem}
.sm-page .creds{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.sm-page .creds span{font-family:var(--sm-mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid rgba(241,240,235,.35);padding:.45em .7em}
.sm-page .creds span.on{background:var(--sm-orange);border-color:var(--sm-orange);color:#fff}
.sm-page .ftr__base{border-top:1px solid rgba(241,240,235,.2);margin-top:3rem;padding-top:1.4rem;
  font-family:var(--sm-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#7E837C;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}
@media(max-width:640px){.sm-page .hero__slope{aspect-ratio:1200/260}
.sm-page .hero__slope svg{transform:none}
.sm-page .hero__in{padding-bottom:4.5rem}
.sm-page .hero h1{font-size:clamp(2.15rem,1.1rem + 6.2vw,3rem)}
.sm-page .hero .lede{font-size:1.02rem}
.sm-page .hero__strip .wrap{gap:.55rem 1.4rem;padding-block:.9rem}
.sm-page .hero__strip span{font-size:.66rem;letter-spacing:.1em}
.sm-page .ba__grip{width:42px;height:42px}
.sm-page .spec__v b{font-size:1.4rem}}
/* Short laptop screens (1366x768 and similar) need the hero compressed so the
   60 degree figure still clears the fold. */
@media(min-width:900px) and (max-height:820px){.sm-page .hero__in{padding-block:1.2rem 3.5rem}
.sm-page .hero h1{font-size:clamp(2.2rem,1.2rem + 3.2vw,3.7rem)}
.sm-page .hero .lede{margin-top:.85rem}
.sm-page .btn-row{margin-top:1.2rem}}
/* Small, short phones (360x640 and similar). */
@media(max-width:640px) and (max-height:700px){.sm-page .hero__in{padding-block:1rem 3rem}
.sm-page .hero h1{font-size:1.95rem}
.sm-page .hero .lede{font-size:.95rem;margin-top:.7rem}
.sm-page .btn-row{margin-top:1rem}
.sm-page .btn{padding:.9em 1.3em;font-size:.85rem}}
/* ---------- a11y ---------- */
.sm-page :focus-visible{outline:3px solid var(--sm-orange);outline-offset:3px}
.sm-page .skip{position:absolute;left:-9999px}
.sm-page .skip:focus{left:.5rem;top:.5rem;z-index:999;background:var(--sm-ink);color:#fff;padding:.7rem 1rem}
@media(prefers-reduced-motion:reduce){.sm-page *{animation:none!important;transition:none!important}}

/* ==========================================================================
   SITE PATTERNS — append to the END of sm-home-styles.css

   Added for the About page, but written to be reused across the site.
   Same scoping rule as the rest of that file: every selector sits inside
   .sm-page so nothing can leak out and restyle the theme.

   Keep the DEFENSIVE OVERRIDES block last in the combined file. If you paste
   this above it, theme element rules can win again.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FACTS STRIP — big numbers under a hero
   Four is the right count. At three it looks sparse, at five the numbers stop
   being memorable.
   -------------------------------------------------------------------------- */

.sm-page .facts{
  display:grid;
  gap:1px;
  background:rgba(241,240,235,.25);
  border-block:1px solid rgba(241,240,235,.25);
  margin-top:clamp(2rem,4vw,3rem);
  /* Two up even on the narrowest phones. Stacked one-per-row the strip runs
     four screens tall and pushes every bit of content below the fold. */
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:1000px){ .sm-page .facts{ grid-template-columns:repeat(4,1fr); } }

.sm-page .facts div{ background:var(--sm-ink); padding:clamp(1.1rem,3vw,1.5rem) clamp(.9rem,2.5vw,1.3rem); }

.sm-page .facts b{
  display:block;
  font-family:var(--sm-display);
  font-weight:900;
  font-size:clamp(2rem,1.4rem + 1.6vw,2.6rem);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--sm-yellow);
}
.sm-page .facts span{
  display:block;
  font-family:var(--sm-mono);
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#9AA096;
  margin-top:.6rem;
  line-height:1.4;
}


/* --------------------------------------------------------------------------
   CLIENT LOGO GRID

   Greyscale by default, full colour on hover. The ten marks come from very
   different design eras and palettes; left in colour they fight each other and
   the page reads as clutter. Greyscale makes them read as one credential set.
   -------------------------------------------------------------------------- */

.sm-page .clients{
  display:grid;
  gap:1px;
  background:var(--sm-rule);
  border:1px solid var(--sm-rule);
  margin-top:clamp(2rem,4vw,2.8rem);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:700px){ .sm-page .clients{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1000px){ .sm-page .clients{ grid-template-columns:repeat(5,1fr); } }

/* ONE NUMBER CONTROLS LOGO SIZE
   --sm-logo-h is the maximum height any logo can render at. Raise it to make
   every logo bigger, lower it to make them smaller. Everything else adapts.

   Why a height cap rather than a width: these ten marks range from wide
   wordmarks to square seals. Capping height is what stops the square ones
   towering over the wide ones. The trade-off is that square logos always look
   smaller by area - that is correct, not a bug. Sizing them to match by area
   would make them visually dominate the row. */
.sm-page .clients{
  --sm-logo-h:4.75rem;
}

.sm-page .clients a,
.sm-page .clients span.client{
  background:var(--sm-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem .85rem;
  min-height:calc(var(--sm-logo-h) + 2.6rem);
  transition:background .18s ease;
}
.sm-page .clients a:hover{ background:#fff; }

.sm-page .clients img{
  max-width:100%;
  max-height:var(--sm-logo-h);
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1);
  /* Slightly stronger than before so the larger marks do not read as washed
     out. Raise toward 1 for more presence, drop toward .7 for quieter. */
  opacity:.82;
  transition:filter .2s ease,opacity .2s ease;
}
.sm-page .clients a:hover img{ filter:grayscale(0); opacity:1; }


/* --------------------------------------------------------------------------
   LIGHT VARIANT OF THE AUDIENCE GRID
   .aud is built for dark sections. This lets the same markup sit on paper.
   -------------------------------------------------------------------------- */

.sm-page .aud--light{
  background:var(--sm-rule);
  border-block:1px solid var(--sm-rule);
}
.sm-page .aud--light li{ background:var(--sm-paper); }
.sm-page .aud--light b{ color:var(--sm-ink); }
.sm-page .aud--light span{ color:var(--sm-steel); }


/* --------------------------------------------------------------------------
   PAGE HERO — for interior pages. Shorter than the home hero, no slope SVG.
   -------------------------------------------------------------------------- */

.sm-page .phero{
  background:var(--sm-ink);
  color:var(--sm-paper);
  padding-block:clamp(2.6rem,6vw,4.5rem) clamp(2.6rem,6vw,4.5rem);
}
.sm-page .phero .eyebrow{ color:var(--sm-yellow); }
.sm-page .phero h1{
  font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem);
  margin-bottom:.35em;
}
.sm-page .phero .lede{ color:#C9CEC5; max-width:46ch; }


/* --------------------------------------------------------------------------
   TAGLINE BLOCK — the company's own line, given room to breathe
   -------------------------------------------------------------------------- */

.sm-page .tagline{
  background:var(--sm-orange);
  color:#fff;
  padding:clamp(1.6rem,3.5vw,2.6rem);
  margin-top:clamp(1.5rem,3vw,2rem);
}
.sm-page .tagline p{
  font-family:var(--sm-display);
  font-weight:900;
  font-size:clamp(1.3rem,1rem + 1.7vw,2.1rem);
  line-height:1.05;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0;
  color:#fff;
}
.sm-page .tagline .attrib{
  font-family:var(--sm-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFE7D6;
  margin-top:.9rem;
  display:block;
}


/* --------------------------------------------------------------------------
   FIGURE — image with a caption, used in the story section
   -------------------------------------------------------------------------- */

.sm-page .fig{ margin:0; }
.sm-page .fig img{ width:100%; display:block; }
.sm-page .fig figcaption{
  font-family:var(--sm-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sm-steel);
  margin-top:.8rem;
}


/* ==========================================================================
   FORM PATTERNS — append to sm-home-styles.css, ABOVE the DEFENSIVE
   OVERRIDES block (that block must stay last).

   WHY THIS TARGETS SEVERAL PLUGINS
   The Contact page ships with plain styled markup so the layout can be seen
   before a form plugin is installed. That markup will be replaced by a real
   form. Rather than restyling afterwards, the selectors below cover the
   output of the four common plugins as well, so whichever you pick inherits
   the design automatically:

     Fluent Forms     .fluentform
     WPForms          .wpforms-container
     Contact Form 7   .wpcf7
     Gravity Forms    .gform_wrapper

   Everything stays scoped under .sm-page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FORM PANEL
   -------------------------------------------------------------------------- */

.sm-page .form-panel{
  background:var(--sm-paper);
  border:1px solid var(--sm-rule);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.sm-page .dark .form-panel{
  background:var(--sm-paper);
  border-color:transparent;
}
.sm-page .form-panel h2,
.sm-page .form-panel h3{
  color:var(--sm-ink);
  font-size:clamp(1.2rem,1rem + .8vw,1.5rem);
  margin-bottom:.35em;
}
.sm-page .form-panel .sub{
  font-size:.94rem;
  color:#41463F;
  margin-bottom:1.4rem;
}


/* --------------------------------------------------------------------------
   FIELDS — own markup and plugin output together
   -------------------------------------------------------------------------- */

.sm-page .field{ margin-bottom:1rem; }

.sm-page .field label,
.sm-page .fluentform label,
.sm-page .wpforms-container label,
.sm-page .gform_wrapper label,
.sm-page .wpcf7 label{
  display:block;
  font-family:var(--sm-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sm-steel);
  margin-bottom:.4rem;
}

.sm-page .field input,
.sm-page .field select,
.sm-page .field textarea,
.sm-page .fluentform input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.sm-page .fluentform select,
.sm-page .fluentform textarea,
.sm-page .wpforms-container input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.sm-page .wpforms-container select,
.sm-page .wpforms-container textarea,
.sm-page .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.sm-page .wpcf7 select,
.sm-page .wpcf7 textarea,
.sm-page .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.sm-page .gform_wrapper select,
.sm-page .gform_wrapper textarea{
  width:100%;
  font-family:var(--sm-body);
  font-size:1rem;
  line-height:1.4;
  padding:.85em .9em;
  border:2px solid var(--sm-rule);
  border-radius:0;
  background:#fff;
  color:var(--sm-ink);
  box-shadow:none;
  transition:border-color .15s ease;
}

.sm-page .field input:focus,
.sm-page .field select:focus,
.sm-page .field textarea:focus,
.sm-page .fluentform input:focus,
.sm-page .fluentform select:focus,
.sm-page .fluentform textarea:focus,
.sm-page .wpforms-container input:focus,
.sm-page .wpforms-container select:focus,
.sm-page .wpforms-container textarea:focus,
.sm-page .wpcf7 input:focus,
.sm-page .wpcf7 textarea:focus,
.sm-page .gform_wrapper input:focus,
.sm-page .gform_wrapper textarea:focus{
  border-color:var(--sm-orange);
  outline:none;
}

.sm-page .field textarea,
.sm-page .fluentform textarea,
.sm-page .wpforms-container textarea,
.sm-page .wpcf7 textarea,
.sm-page .gform_wrapper textarea{
  min-height:6rem;
  resize:vertical;
}

/* File input needs different padding - the browser draws its own button. */
.sm-page .field--file input,
.sm-page input[type=file]{
  padding:.7em;
  background:#fff;
  font-size:.92rem;
}

.sm-page .field .hint{
  display:block;
  font-family:var(--sm-body);
  font-size:.8rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--sm-steel);
  margin-top:.35rem;
  line-height:1.45;
}


/* --------------------------------------------------------------------------
   SUBMIT BUTTON — match the site's .btn--primary
   -------------------------------------------------------------------------- */

.sm-page .form-panel button[type=submit],
.sm-page .fluentform .ff-btn-submit,
.sm-page .wpforms-container button[type=submit],
.sm-page .wpcf7 input[type=submit],
.sm-page .gform_wrapper input[type=submit]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  font-family:var(--sm-display);
  font-weight:800;
  font-size:.94rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
  background:var(--sm-orange);
  border:2px solid transparent;
  border-radius:0;
  padding:1.05em 1.7em;
  margin-top:.5rem;
  cursor:pointer;
  transition:background .16s ease,transform .16s ease;
}
.sm-page .form-panel button[type=submit]:hover,
.sm-page .fluentform .ff-btn-submit:hover,
.sm-page .wpforms-container button[type=submit]:hover,
.sm-page .wpcf7 input[type=submit]:hover,
.sm-page .gform_wrapper input[type=submit]:hover{
  background:#cf4f24;
  transform:translateY(-2px);
}

.sm-page .form-panel .fine{
  font-size:.8rem;
  color:var(--sm-steel);
  margin-top:.9rem;
  line-height:1.5;
}


/* --------------------------------------------------------------------------
   CONTACT METHOD BLOCKS
   -------------------------------------------------------------------------- */

.sm-page .contact-methods{
  display:grid;
  gap:1px;
  background:rgba(241,240,235,.25);
  border-block:1px solid rgba(241,240,235,.25);
  margin-top:clamp(1.6rem,3vw,2.2rem);
}
@media(min-width:600px){ .sm-page .contact-methods{ grid-template-columns:repeat(2,1fr); } }

.sm-page .contact-methods div{
  background:var(--sm-ink);
  padding:1.4rem 1.3rem;
}
.sm-page .contact-methods .k{
  display:block;
  font-family:var(--sm-mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#9AA096;
  margin-bottom:.5rem;
}
.sm-page .contact-methods a,
.sm-page .contact-methods .v{
  font-family:var(--sm-display);
  font-weight:800;
  font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--sm-paper);
  text-decoration:none;
  word-break:break-word;
}
.sm-page .contact-methods a:hover{ color:var(--sm-yellow); }
.sm-page .contact-methods .v--sm{
  font-family:var(--sm-body);
  font-weight:400;
  font-size:.98rem;
  letter-spacing:0;
  color:#C9CEC5;
}


/* ==========================================================================
   SOLAR PAGE PATTERNS — append to sm-home-styles.css, ABOVE the DEFENSIVE
   OVERRIDES block (that block must always stay last).

   Adds three things the stylesheet does not have yet: an FAQ accordion,
   checkbox groups for the enquiry form, and a scope checklist.
   All scoped under .sm-page as usual.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FAQ ACCORDION
   Built on <details>/<summary> so it works with no JavaScript at all, is
   keyboard operable by default, and stays open for Ctrl-F on the page.
   -------------------------------------------------------------------------- */

.sm-page .faq{
  margin-top:clamp(2rem,4vw,2.8rem);
  border-top:2px solid var(--sm-ink);
}
.sm-page .dark .faq{ border-top-color:rgba(241,240,235,.5); }

.sm-page .faq details{ border-bottom:1px solid var(--sm-rule); }
.sm-page .dark .faq details{ border-bottom-color:rgba(241,240,235,.22); }

.sm-page .faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.15rem 2.4rem 1.15rem 0;
  position:relative;
  font-family:var(--sm-display);
  font-weight:800;
  font-size:clamp(.98rem,.93rem + .25vw,1.1rem);
  line-height:1.3;
  letter-spacing:-.012em;
  text-transform:uppercase;
}
.sm-page .faq summary::-webkit-details-marker{ display:none; }
.sm-page .faq summary::marker{ content:""; }

.sm-page .faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:1rem;
  font-family:var(--sm-mono);
  font-size:1.4rem;
  line-height:1;
  color:var(--sm-orange);
}
.sm-page .faq details[open] summary::after{ content:"\2013"; }

.sm-page .faq summary:hover,
.sm-page .faq summary:focus-visible{ color:var(--sm-orange); }

.sm-page .faq p{
  padding:0 0 1.3rem;
  margin:0;
  font-size:.96rem;
  line-height:1.6;
  max-width:66ch;
  color:#41463F;
}
.sm-page .dark .faq p{ color:#C9CEC5; }
.sm-page .faq p + p{ padding-top:0; margin-top:-.4rem; }


/* --------------------------------------------------------------------------
   CHECKBOX GROUP — for "what do you need" style questions
   -------------------------------------------------------------------------- */

.sm-page .checks{
  display:grid;
  gap:.5rem;
  margin-top:.2rem;
}
@media(min-width:520px){ .sm-page .checks{ grid-template-columns:repeat(2,1fr); } }

.sm-page .checks label{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  font-family:var(--sm-body);
  font-size:.92rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--sm-ink);
  line-height:1.35;
  margin:0;
  cursor:pointer;
  padding:.5rem .6rem;
  border:1px solid var(--sm-rule);
  background:#fff;
  transition:border-color .15s ease;
}
.sm-page .checks label:hover{ border-color:var(--sm-orange); }

.sm-page .checks input[type=checkbox]{
  width:auto;
  margin:.15rem 0 0;
  flex:0 0 auto;
  accent-color:var(--sm-orange);
  transform:scale(1.15);
}


/* --------------------------------------------------------------------------
   SCOPE CHECKLIST — what is covered on a site
   -------------------------------------------------------------------------- */

.sm-page .scope{
  list-style:none;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--sm-rule);
  border:1px solid var(--sm-rule);
}
@media(min-width:640px){ .sm-page .scope{ grid-template-columns:repeat(2,1fr); } }

.sm-page .scope li{
  background:var(--sm-paper);
  padding:1.1rem 1.2rem 1.1rem 2.8rem;
  position:relative;
  font-size:.95rem;
  line-height:1.4;
}
.sm-page .scope li::before{
  content:"";
  position:absolute;
  left:1.15rem;
  top:1.35rem;
  width:.62rem;
  height:.34rem;
  border-left:2.5px solid var(--sm-orange);
  border-bottom:2.5px solid var(--sm-orange);
  transform:rotate(-45deg);
}
.sm-page .scope li b{
  display:block;
  font-family:var(--sm-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:.96rem;
  letter-spacing:-.01em;
  margin-bottom:.15rem;
}
.sm-page .scope li span{
  display:block;
  color:var(--sm-steel);
  font-size:.85rem;
  line-height:1.4;
}

.sm-page .dark .scope{ background:rgba(241,240,235,.22); border-color:rgba(241,240,235,.22); }
.sm-page .dark .scope li{ background:var(--sm-ink); }
.sm-page .dark .scope li span{ color:#9AA096; }


/* ==========================================================================
   EQUIPMENT PAGE PATTERNS — append to sm-home-styles.css, ABOVE the
   DEFENSIVE OVERRIDES block (that block must always stay last).

   Adds a comparison matrix and an image placeholder slot.
   All scoped under .sm-page as usual.
   ========================================================================== */


/* --------------------------------------------------------------------------
   COMPARISON MATRIX

   A real <table>, because that is what this data is - screen readers announce
   row and column headers, which a grid of divs cannot do.

   On narrow screens the table scrolls sideways inside its wrapper rather than
   squashing. Stacking a matrix into cards destroys the comparison, which is
   the only reason to have one.
   -------------------------------------------------------------------------- */

.sm-page .matrix-wrap{
  margin-top:clamp(2rem,4vw,2.8rem);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--sm-rule);
}
.sm-page .dark .matrix-wrap{ border-color:rgba(241,240,235,.22); }

.sm-page .matrix{
  width:100%;
  min-width:44rem;
  border-collapse:collapse;
  font-size:.92rem;
}

.sm-page .matrix th,
.sm-page .matrix td{
  padding:.85rem .9rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--sm-rule);
}
.sm-page .dark .matrix th,
.sm-page .dark .matrix td{ border-bottom-color:rgba(241,240,235,.18); }

.sm-page .matrix thead th{
  background:var(--sm-ink);
  color:var(--sm-paper);
  font-family:var(--sm-mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1.35;
  border-bottom:0;
  position:sticky;
  top:0;
}
.sm-page .matrix thead th:first-child{ min-width:14rem; }

.sm-page .matrix tbody th{
  font-family:var(--sm-body);
  font-weight:600;
  font-size:.94rem;
  color:inherit;
}

.sm-page .matrix td{ text-align:center; }

.sm-page .matrix .best,
.sm-page .matrix .yes{
  font-family:var(--sm-mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-block;
  padding:.35em .6em;
  white-space:nowrap;
}
.sm-page .matrix .best{ background:var(--sm-orange); color:#fff; }
.sm-page .matrix .yes{ background:rgba(20,23,20,.08); color:var(--sm-ink); }
.sm-page .dark .matrix .yes{ background:rgba(241,240,235,.12); color:var(--sm-paper); }

.sm-page .matrix tbody tr:nth-child(even) td,
.sm-page .matrix tbody tr:nth-child(even) th{ background:rgba(20,23,20,.03); }
.sm-page .dark .matrix tbody tr:nth-child(even) td,
.sm-page .dark .matrix tbody tr:nth-child(even) th{ background:rgba(241,240,235,.04); }

.sm-page .matrix-note{
  font-family:var(--sm-mono);
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sm-steel);
  margin-top:.8rem;
}


/* --------------------------------------------------------------------------
   IMAGE SLOT — placeholder until real machine photos exist

   Deliberately obvious. A subtle placeholder is a placeholder that ships to
   production by accident.
   -------------------------------------------------------------------------- */

.sm-page .imgslot{
  border:2px dashed var(--sm-steel);
  background:rgba(255,255,255,.45);
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  text-align:center;
  padding:1.5rem;
  font-family:var(--sm-mono);
  font-size:.72rem;
  line-height:1.7;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--sm-steel);
}
.sm-page .dark .imgslot{
  border-color:rgba(241,240,235,.45);
  background:rgba(255,255,255,.05);
  color:rgba(241,240,235,.65);
}
.sm-page .imgslot--wide{ aspect-ratio:16/9; }

/* Once a real photo exists, swap the div for:
     <figure class="fig"><img src="..." alt="..."><figcaption>...</figcaption></figure>
   The .fig pattern already exists in the SITE PATTERNS block. */


/* --------------------------------------------------------------------------
   MACHINE HEADER — model name plus a status line
   -------------------------------------------------------------------------- */

.sm-page .machine-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:0 0 1.1rem;
}
.sm-page .machine-meta span{
  font-family:var(--sm-mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.4em .65em;
  border:1px solid var(--sm-rule);
  color:var(--sm-steel);
}
.sm-page .dark .machine-meta span{
  border-color:rgba(241,240,235,.3);
  color:#9AA096;
}
.sm-page .machine-meta span.hot{
  background:var(--sm-orange);
  border-color:var(--sm-orange);
  color:#fff;
}


/* --------------------------------------------------------------------------
   SCREEN-READER-ONLY TEXT
   Visually hidden but still announced. Used on the matrix <caption>, which
   screen readers need and sighted users do not.
   -------------------------------------------------------------------------- */

.sm-page .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   SPECIALIZED MOWING — HOME PAGE REVISION CSS
   Append-only. This is the NEW css for the revised home page, nothing else.

   WHERE IT GOES
   Paste this at the end of:
       generatepress_child/assets/css/sm-home-styles.css
   but ABOVE the block that starts:
       DEFENSIVE OVERRIDES
   That block has to stay last in the file, or theme element rules can win
   again and headings lose their colour.

   So the finished file reads, top to bottom:
       base styles
       SITE PATTERNS
       FORM PATTERNS
       SOLAR PAGE PATTERNS
       EQUIPMENT PAGE PATTERNS
       HERO + VIDEO ROW          <- this file goes here
       DEFENSIVE OVERRIDES       <- stays last

   WHAT IT COVERS
     1. Hero        - core Cover block, image background, text overlay
     2. Strip       - the credibility bar under the hero
     3. Video row   - core Columns, text beside a 16:9 embed
     4. Services    - block version of the card grid
     5. Who We Serve- block version of the audience grid

   Everything is scoped under .sm-page, same as the rest of the stylesheet,
   so none of it can leak out and restyle the theme.
   ========================================================================== */


/* --------------------------------------------------------------------------
   HERO — core Cover block

   The overlay is the important part. The client will swap this background
   image, and a photo that works with white text today may not next month -
   bright sky, pale dry grass, a light machine. The gradient below is heaviest
   where the text sits and lifts toward the top, so headline contrast holds up
   whatever they put behind it.

   These values were set by testing white text against a deliberately awful
   background - bright sky over pale dry grass. If they only ever use dark
   hillside photos this is more overlay than strictly needed, but it means a
   bright photo can never break the headline.

   To change the background: click the hero, then Replace in the toolbar.
   To change how dark it is: the Overlay panel in block settings.
   -------------------------------------------------------------------------- */

.sm-page .sm-hero{
  min-height:clamp(26rem,58vh,38rem);
  display:flex;
  align-items:center;
}

.sm-page .sm-hero .wp-block-cover__background{
  /* Stronger at the bottom where the copy sits, lighter at the top so the
     photograph is still visible. */
  background:linear-gradient(
    180deg,
    rgba(20,23,20,.58) 0%,
    rgba(20,23,20,.72) 45%,
    rgba(20,23,20,.86) 100%
  ) !important;
  opacity:1 !important;
}

.sm-page .sm-hero .wp-block-cover__inner-container{
  width:100%;
  max-width:var(--sm-maxw);
  margin-inline:auto;
  padding-inline:var(--sm-gut);
  padding-block:clamp(2.5rem,6vw,4.5rem);
  color:var(--sm-paper);
}

.sm-page .sm-hero .eyebrow{ color:var(--sm-yellow); }

.sm-page .sm-hero h1{
  color:var(--sm-paper);
  font-size:clamp(2.3rem,1.4rem + 4.2vw,4.6rem);
  max-width:18ch;
  /* A soft shadow rather than a hard one - invisible on a dark photo, quietly
     saves the headline on a bright one. */
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.sm-page .sm-hero h1 .hl,
.sm-page .sm-hero h1 strong{ color:var(--sm-orange); font-weight:inherit; }

.sm-page .sm-hero p{
  color:#E4E7E1;
  max-width:34rem;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.sm-page .sm-hero .lede{ font-size:clamp(1.05rem,1rem + .5vw,1.3rem); }

.sm-page .wp-block-buttons{ margin-top:1.6rem; gap:.7rem; }

/* Core Button blocks restyled to match .btn.
   Scoped to .sm-page rather than .sm-hero, because these appear in the video
   row too - and will appear anywhere the client adds a Button block later. */
.sm-page .wp-block-button__link{
  font-family:var(--sm-display);
  font-weight:800;
  font-size:.94rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  padding:1.05em 1.7em;
  border-radius:0;
  border:2px solid transparent;
  transition:background .16s ease,transform .16s ease,color .16s ease;
}
.sm-page .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--sm-orange);
  color:#fff;
}
.sm-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:#cf4f24;
  transform:translateY(-2px);
}
.sm-page .sm-hero .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--sm-paper);
  border-color:var(--sm-paper);
}
.sm-page .sm-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--sm-paper);
  color:var(--sm-ink);
  transform:translateY(-2px);
}


/* --------------------------------------------------------------------------
   CREDIBILITY STRIP — sits directly beneath the hero
   -------------------------------------------------------------------------- */

.sm-page .sm-hero-strip{
  background:var(--sm-ink);
  color:var(--sm-paper);
}
.sm-page .sm-hero-strip{
  padding-block:1.05rem;
}
.sm-page .sm-hero-strip p{
  max-width:var(--sm-maxw);
  margin-inline:auto;
  padding-inline:var(--sm-gut);
  font-family:var(--sm-mono);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--sm-paper);
  margin-block:0;
}
@media(max-width:640px){
  .sm-page .sm-hero-strip p{ font-size:.66rem; letter-spacing:.1em; line-height:1.7; }
}


/* --------------------------------------------------------------------------
   VIDEO ROW — core Columns block, text beside a 16:9 embed
   -------------------------------------------------------------------------- */

/* Padding sits on the section itself, and the columns are constrained inside
   it. Modern WordPress group blocks with a constrained layout do NOT emit
   .wp-block-group__inner-container - styling that wrapper silently does
   nothing, which is how this shipped with no left margin the first time. */
.sm-page .sm-videorow{
  padding-block:var(--sm-sect);
  padding-inline:var(--sm-gut);
}
.sm-page .sm-videorow .wp-block-columns{
  max-width:var(--sm-maxw);
  margin-inline:auto;
}

.sm-page .sm-videorow .wp-block-columns{
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media(max-width:781px){
  .sm-page .sm-videorow .wp-block-columns{ gap:2rem; }
}

.sm-page .sm-videorow h2{ margin-bottom:.5em; }
.sm-page .sm-videorow .eyebrow{ margin-bottom:1rem; }

/* The embed. WordPress handles the 16:9 ratio via wp-embed-aspect-16-9, but
   only once a URL is set - before that the editor shows its own placeholder.
   The min-height keeps the column from collapsing in the meantime. */
.sm-page .sm-videorow .wp-block-embed{
  margin:0;
  background:var(--sm-ink);
}
.sm-page .sm-videorow .wp-block-embed__wrapper{
  min-height:1px;
}
.sm-page .sm-videorow .wp-block-embed iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
}

/* Placeholder shown until a video URL is added. Deliberately obvious. */
.sm-page .sm-video-slot{
  aspect-ratio:16/9;
  background:var(--sm-ink);
  border:2px dashed var(--sm-steel);
  display:grid;
  place-items:center;
  text-align:center;
  padding:1.5rem;
  font-family:var(--sm-mono);
  font-size:.74rem;
  line-height:1.8;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9AA096;
}


/* --------------------------------------------------------------------------
   BLOCK VERSIONS OF SERVICES + WHO WE SERVE

   These two sections were converted from raw HTML to native blocks so the
   client can edit them. The visual result is identical - the rules below just
   make core Group blocks behave like the hand-written markup did.
   -------------------------------------------------------------------------- */

/* Tint background as a class, so it survives block editing.
   The old markup used an inline style, which the editor strips on edit. */
.sm-page .sect--tint{ background:#EBEAE4; }

/* WordPress adds vertical margins between blocks. Inside a card that produces
   uneven spacing, so reset it and let the card's own rules govern. */
.sm-page .card > *{ margin-block:0; }
.sm-page .card > * + *{ margin-block-start:.55rem; }
.sm-page .card .card__k{ margin-block-end:0; }

/* .grid-3 holds Group blocks now rather than plain divs. Core adds its own
   margins to a group inside a group - neutralise them or the 1px hairline
   grid gaps break. */
.sm-page .grid-3 > .wp-block-group{ margin-block:0; }

/* Section inner wrapper. The old markup used <div class="wrap">; as a block
   it is a Group with the same class, so nothing changes visually - but core
   adds a top margin to the first child, which shifts the eyebrow. */
.sm-page .sect > .wrap:first-child{ margin-block-start:0; }
.sm-page .sect .wrap > *:first-child{ margin-block-start:0; }


/* --------------------------------------------------------------------------
   AUDIENCE GRID — block version of .aud

   .aud is a <ul> with <li><b>/<span> inside, used on About, Services, Contact
   and Solar. That structure cannot be built from core blocks, so this is a
   div-based equivalent that renders identically. The <ul> version stays as it
   is everywhere else - do not replace it.
   -------------------------------------------------------------------------- */

.sm-page .aud-grid{
  display:grid;
  gap:1px;
  background:rgba(241,240,235,.22);
  border-block:1px solid rgba(241,240,235,.22);
  margin-top:2.5rem;
}
@media(min-width:640px){ .sm-page .aud-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .sm-page .aud-grid{ grid-template-columns:repeat(4,1fr); } }

.sm-page .aud-grid > .wp-block-group{
  background:var(--sm-ink);
  padding:1.3rem 1.2rem;
  margin-block:0;
}
.sm-page .aud-grid h3{
  font-family:var(--sm-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:.98rem;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 .35rem;
  color:var(--sm-paper);
}
.sm-page .aud-grid p{
  font-size:.85rem;
  line-height:1.4;
  color:#9AA096;
  margin:0;
}

/* Light variant, for the same grid on a paper background. */
.sm-page .aud-grid--light{ background:var(--sm-rule); border-block-color:var(--sm-rule); }
.sm-page .aud-grid--light > .wp-block-group{ background:var(--sm-paper); }
.sm-page .aud-grid--light h3{ color:var(--sm-ink); }
.sm-page .aud-grid--light p{ color:var(--sm-steel); }

/* FRONT PAGE FULL-BLEED FIX
   GeneratePress puts .site-content on #content itself, so `.home .site-content`
   never matches - it is not a descendant. Targeting the IDs is both correct
   and specific enough to beat GP's inline Customizer output. */
body.home #content.site-content,
body.home #primary.content-area,
body.home #main.site-main,
body.home .entry-content{
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  background:transparent !important;
}

/* GP adds side padding to the content wrapper. Full-bleed sections need it
   gone; the sections supply their own via .wrap. */
body.home #content.site-content{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ==========================================================================
   DEFENSIVE OVERRIDES — keep these last in the file

   Themes and plugins set colours and spacing directly on elements
   (h1, ul, a, button). Those element rules beat inheritance from the
   .sm-page wrapper, so anything the design relies on inheriting has to be
   restated here explicitly. Without this block, a theme that colours its
   headings will recolour the whole page.
   ========================================================================== */

.sm-page h1,.sm-page h2,.sm-page h3,.sm-page h4,.sm-page h5,.sm-page h6{color:inherit}
.sm-page .dark h1,.sm-page .dark h2,.sm-page .dark h3,
.sm-page .quote h1,.sm-page .quote h2,.sm-page .quote h3{color:inherit}
.sm-page .hl{color:var(--sm-orange)}
.sm-page .hero__title .go,.sm-page .cover__title .go{color:var(--sm-orange)}

.sm-page p{color:inherit}
.sm-page a{color:inherit;text-decoration:none}
.sm-page a:hover{color:inherit}
.sm-page .btn--primary,.sm-page .btn--primary:hover,.sm-page .btn--primary:visited{color:#fff}
.sm-page .quote__solid,.sm-page .quote__solid:hover{color:#fff}

.sm-page ul,.sm-page ol{margin:0;padding:0}
.sm-page .list,.sm-page .aud,.sm-page .risk,.sm-page .steps,.sm-page .ftr__list{list-style:none}
.sm-page .list li::marker,.sm-page .aud li::marker,.sm-page .risk li::marker,
.sm-page .steps li::marker,.sm-page .ftr__list li::marker{content:""}

.sm-page img{max-width:100%;height:auto;display:block;border-radius:0;box-shadow:none}
.sm-page .ba img{width:100%}

/* Some themes add transitions or transforms to links inside content. */
.sm-page a:hover{transform:none}