/*
Theme Name:   Sherry's Plant Hire
Theme URI:    https://sherrysplanthire.co.za/
Description:  Divi child theme for Sherry's Plant Hire CC. Carries the whole design
              system - tokens, layout, components, motion - so the Divi layouts stay
              pure markup and this stylesheet is cached once for the entire site.
Author:       Sherry's Plant Hire CC
Template:     Divi
Version:      1.4.3
Text Domain:  sherrys-plant-hire
*/

/* Everything below is generated from src/ by build.mjs - edit the source files
   and re-run `node build.mjs` rather than editing this by hand.

   Cascade order is the order the modules load (header, page body, footer), and
   several rules rely on that order to win specificity ties. Do not reorder. */

/* ===== header/00-tokens.html ===== */
/* Metric-matched fallback. Poppins swapping in was reflowing the H1 and pushing
   the hero CTAs down (measured CLS 0.217 on a 390px viewport). Overriding the
   fallback's metrics to Poppins' own (upm 1000, asc 1050, desc 350, xH 548)
   means the pre-swap text occupies the same box, so nothing moves. */
@font-face{
  font-family:'Poppins Metric';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:105.7%;
  ascent-override:99.4%;
  descent-override:33.1%;
  line-gap-override:0%;
}

:root{
  /* --- equipment yellow: actions and active states --- */
  --sph-y:#FFC400;
  --sph-y-hi:#FFD84D;
  --sph-y-deep:#D99F00;

  /* --- brand orange, sampled from the supplied logo artwork. Belongs to the
         logo lockup only. 8.0:1 on ink, so it is safe as small text.
         To unify the whole site to the logo colour instead of yellow, set
         --sph-y:#E9951E and --sph-y-hi:#F5A63A here and rebuild. --- */
  --sph-orange:#E9951E;

  /* --- asphalt --- */
  --sph-ink:#0B0B0C;
  --sph-asphalt:#141518;
  --sph-asphalt-2:#1B1D21;
  --sph-steel:#24272C;
  --sph-grit:#33373E;        /* borders and rivets only - never text */
  --sph-dim:#868D98;         /*  5.3:1 on asphalt - the quietest legible text */

  /* --- text --- */
  --sph-chalk:#EDEFF2;        /* 16.4:1 on ink */
  --sph-smoke:#A2A9B4;        /*  7.8:1 on asphalt */
  --sph-paper:#EDEFF2;
  --sph-paper-2:#E981;        /* placeholder, overridden below */
  --sph-paper-line:#D3D8DF;
  --sph-paper-ink:#101216;    /* 16.1:1 on paper */
  --sph-paper-mute:#4E545E;   /*  6.6:1 on paper */

  --sph-line:rgba(255,255,255,.10);
  --sph-line-2:rgba(255,255,255,.18);

  /* --- type --- */
  --sph-font:'Poppins','Poppins Metric','Segoe UI',system-ui,-apple-system,sans-serif;
  --sph-d1:clamp(2.4rem,7vw,5.25rem);
  --sph-d2:clamp(1.85rem,4.1vw,3.05rem);
  --sph-d3:clamp(1.35rem,2.6vw,1.9rem);
  --sph-h4:clamp(1.08rem,1.6vw,1.28rem);
  --sph-lead:clamp(1.02rem,1.35vw,1.22rem);
  --sph-body:1.0125rem;
  --sph-sm:.875rem;
  --sph-xs:.75rem;

  /* --- space --- */
  --sph-gut:clamp(1.25rem,4vw,3rem);
  --sph-wrap:1240px;
  --sph-pad-y:clamp(4.5rem,8.5vw,7.5rem);

  /* --- material --- */
  --sph-r:3px;
  --sph-sh:0 2px 4px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.24);
  --sph-sh-lift:0 4px 8px rgba(0,0,0,.32),0 18px 44px rgba(0,0,0,.34);
  --sph-sh-paper:0 1px 2px rgba(16,18,22,.10),0 8px 24px rgba(16,18,22,.10);
  --sph-hazard:repeating-linear-gradient(135deg,var(--sph-y) 0 11px,var(--sph-ink) 11px 22px);
  --sph-ease:cubic-bezier(.16,1,.3,1);
}
:root{--sph-paper-2:#E2E6EB}

/* ---------------------------------------------------------------
   Let each code module own its full width, whatever the theme's
   row constraints are. Divi's wrappers are neutralised by force
   because their front-end selectors are id-scoped.
   --------------------------------------------------------------- */
.sph-sec>[class*="et_pb_row"],
.sph-sec [class*="et_pb_column"],
.sph-host,
.sph-host>[class*="et_pb_code_inner"]{
  width:100%!important;max-width:100%!important;
  margin:0!important;padding:0!important;float:none!important;
}
.sph-sec>[class*="et_pb_row"]{display:block!important}
/* overflow:clip contains the hero's scaled backdrop and the gallery rail's
   negative margins - but it must NOT apply to the header, because a clipping
   ancestor is one of the things that stops a fixed/sticky child from escaping. */
.sph-sec:not(#sph-header){overflow:clip}

/* ---------------------------------------------------------------
   STICKY HEADER.

   position:sticky on the nav could never work here: a sticky element only
   travels inside its own parent, and the nav's parent chain ends at the
   header section, which is ~130px tall. So it scrolled away immediately.
   (The old test only asserted the data-stuck attribute, which JS sets on
   scroll regardless, so it passed against a header that never stuck.)

   Fixing the whole header section instead takes it out of flow entirely,
   and --sph-head reserves the space it no longer occupies. That variable
   is measured from the real element by JS on load and resize, so it stays
   correct at any breakpoint and with any logo aspect ratio.
   --------------------------------------------------------------- */
:root{--sph-head:128px}
#sph-header{
  position:fixed;top:0;left:0;right:0;z-index:250;
  /* a transform or filter on an ancestor would break out of fixed
     positioning, so the header carries neither */
}
body{padding-top:var(--sph-head)}
/* the WordPress admin bar sits above it while logged in */
body.admin-bar #sph-header{top:32px}
@media screen and (max-width:782px){body.admin-bar #sph-header{top:46px}}

/* ---------------------------------------------------------------
   Component-scoped reset. Nothing outside .sph is touched.
   --------------------------------------------------------------- */
.sph,.sph *,.sph *::before,.sph *::after{box-sizing:border-box}
.sph{
  font-family:var(--sph-font);
  font-size:var(--sph-body);
  line-height:1.6;
  color:var(--sph-chalk);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Kills Divi's heading padding-bottom and any theme font on our elements.
   Deliberately does NOT touch `color`: forcing colour to inherit here would
   beat every component rule below it and paint the whole page black. */
/* Forced: Divi adds padding-bottom to headings and a theme font can override
   ours. We never set these per element, so !important is safe here. */
.sph :is(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dt,dd,fieldset,legend){
  padding:0!important;border:0;font-family:inherit!important;
}
/* Margin is zeroed through :where() so the rule carries only `.sph` weight.
   With :is() it scored (0,1,1) and silently beat every single-class component
   rule like .sph-jobs__ttl { margin-bottom: .9rem }, collapsing those gaps. */
.sph :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dt,dd,fieldset,legend){
  margin:0;
}
/* An author `display` rule outranks the UA's [hidden]{display:none}, so any
   component that sets display must opt back out of it explicitly. */
.sph [hidden]{display:none!important}
.sph :is(ul,ol){list-style:none!important}
/* :where() throughout the reset. A bare `.sph img` scores (0,1,1) and silently
   outranks every single-class component rule like .sph-brand__logo{height:58px}
   or .sph-filter{background:#fff} - which is how the nav once grew to 610px tall
   and the filter pills lost their border. :where() contributes 0, so components win. */
.sph :where(img,svg,picture){display:block;max-width:100%}
.sph :where(img){height:auto;background:var(--sph-steel)}
/* :where() keeps this at .sph specificity so any component rule that names the
   anchor (.sph-skip, .sph-foot__wa, .sph-btn) still paints its own colour */
.sph :where(a){text-decoration:none;color:inherit}
.sph :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sph :where(input,select,textarea){font:inherit;color:inherit}
.sph ::selection{background:var(--sph-y);color:var(--sph-ink)}

/* --- typography scale (important, because Divi's heading rules are id-scoped) --- */
.sph :is(.sph-d1,.sph-d2,.sph-d3,.sph-h4,.sph-lead,.sph-p,.sph-sm){text-transform:none!important}
.sph .sph-d1{font-size:var(--sph-d1)!important;font-weight:800!important;line-height:.95!important;letter-spacing:-.035em!important;text-wrap:balance}
.sph .sph-d2{font-size:var(--sph-d2)!important;font-weight:800!important;line-height:1.02!important;letter-spacing:-.03em!important;text-wrap:balance}
.sph .sph-d3{font-size:var(--sph-d3)!important;font-weight:700!important;line-height:1.14!important;letter-spacing:-.02em!important}
.sph .sph-h4{font-size:var(--sph-h4)!important;font-weight:700!important;line-height:1.28!important;letter-spacing:-.01em!important}
.sph .sph-lead{font-size:var(--sph-lead)!important;font-weight:400!important;line-height:1.58!important;max-width:60ch}
.sph .sph-p{font-size:var(--sph-body)!important;line-height:1.68!important;max-width:68ch}
.sph .sph-sm{font-size:var(--sph-sm)!important;line-height:1.55!important}

/* --- the one recurring label device: a stencilled plant ref, not an eyebrow --- */
.sph .sph-ref{
  font-size:var(--sph-xs)!important;font-weight:700!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  line-height:1!important;font-variant-numeric:tabular-nums;
}

/* --- layout --- */
.sph-wrap{width:100%;max-width:var(--sph-wrap);margin-inline:auto;padding-inline:var(--sph-gut)}
.sph-band{padding-block:var(--sph-pad-y)}

/* --- hazard chevron rule: the world's own graphic device, used at joints --- */
.sph-rule{height:7px;background:var(--sph-hazard);border:0}

/* ---------------------------------------------------------------
   LOGO - Sherry's own artwork, used as the file in all three places.

   The supplied PNG is already light-on-dark, so it needs no plate and
   no colour treatment: it sits directly on the asphalt ground. Using
   the real file everywhere also removed the Anton webfont and the
   hand-built text lockup that stood in for it, which is one less font
   request and one less thing that can disagree with the brand.

   object-fit:contain, so replacing the file with a different aspect
   ratio (a wide export, say) needs no CSS change.
   --------------------------------------------------------------- */
.sph-logo{display:block;width:auto;object-fit:contain}
/* text fallback, revealed only if the image 404s */
.sph-logo-fb{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.3em}
.sph-logo-fb b{
  font-weight:800!important;text-transform:uppercase!important;
  letter-spacing:-.01em!important;line-height:1!important;color:#fff;font-size:1.1rem;
}
.sph-logo-fb span{
  font-weight:700!important;text-transform:uppercase!important;
  letter-spacing:.13em!important;line-height:1!important;
  font-size:.5625rem;color:var(--sph-orange);
}

/* --- buttons --- */
.sph .sph-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.9rem 1.6rem;border-radius:var(--sph-r);
  font-size:var(--sph-sm);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;text-align:center;
  transition:background-color .22s var(--sph-ease),color .22s var(--sph-ease),
             transform .22s var(--sph-ease),box-shadow .22s var(--sph-ease),border-color .22s var(--sph-ease);
}
.sph .sph-btn--go{background:var(--sph-y);color:var(--sph-ink);box-shadow:var(--sph-sh)}
.sph .sph-btn--go:hover{background:var(--sph-y-hi);transform:translateY(-2px);box-shadow:var(--sph-sh-lift)}
.sph .sph-btn--line{border:2px solid var(--sph-line-2);color:var(--sph-chalk)}
.sph .sph-btn--line:hover{border-color:var(--sph-y);color:var(--sph-y)}
.sph .sph-btn--ink{background:var(--sph-ink);color:var(--sph-chalk)}
.sph .sph-btn--ink:hover{background:var(--sph-steel);transform:translateY(-2px)}
.sph .sph-btn svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}

/* --- focus: yellow is the only focus colour, everywhere --- */
.sph :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--sph-y);outline-offset:3px;border-radius:2px;
}

/* --- utilities --- */
.sph-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sph-skip{
  position:absolute;left:var(--sph-gut);top:-100px;z-index:9999;
  background:var(--sph-y);color:var(--sph-ink);padding:.85rem 1.4rem;
  font-weight:700;font-size:var(--sph-sm);border-radius:0 0 var(--sph-r) var(--sph-r);
  transition:top .2s var(--sph-ease);
}
.sph-skip:focus{top:0}

/* anchor targets clear the fixed header, whatever height it is */
#fleet,#why-us,#how-it-works,#areas,#gallery,#quote,#contact{
  scroll-margin-top:calc(var(--sph-head) + 12px);
}
html{scroll-behavior:smooth}

/* --- reveal-on-scroll: content is visible by default, JS only adds the motion --- */
.sph-rise{opacity:1}
.sph-js .sph-rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--sph-ease),transform .7s var(--sph-ease)}
.sph-js .sph-rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sph *,.sph *::before,.sph *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sph-js .sph-rise{opacity:1!important;transform:none!important}
}

/* ===== header/01-topbar.html ===== */
.sph-top{background:var(--sph-ink);color:var(--sph-chalk);border-bottom:1px solid var(--sph-line);position:relative;z-index:60}
.sph-top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;flex-wrap:wrap}
.sph-top__l,.sph-top__r{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);flex-wrap:wrap}

/* live open / closed indicator */
.sph-stat{display:inline-flex;align-items:center;gap:.5rem;color:var(--sph-chalk);font-size:var(--sph-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sph-stat__dot{width:8px;height:8px;border-radius:50%;background:var(--sph-smoke);flex:none;position:relative}
.sph-stat[data-open="1"] .sph-stat__dot{background:var(--sph-y)}
.sph-stat[data-open="1"] .sph-stat__dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--sph-y);animation:sph-ping 2.4s var(--sph-ease) infinite;
}
@keyframes sph-ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.sph-stat__txt{color:var(--sph-smoke);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:var(--sph-xs)}
.sph-stat__txt b{color:var(--sph-chalk);font-weight:700}

.sph-top__lnk{display:inline-flex;align-items:center;gap:.45rem;color:var(--sph-smoke);font-size:var(--sph-xs);font-weight:600;letter-spacing:.03em;transition:color .2s var(--sph-ease)}
.sph-top__lnk:hover{color:var(--sph-y)}
.sph-top__lnk svg{width:13px;height:13px;fill:currentColor;flex:none}
.sph-top__lnk i{font-style:normal;color:var(--sph-dim);font-weight:700}
.sph-top__lnk:hover i{color:var(--sph-y-deep)}

@media (max-width:900px){
  .sph-top__in{min-height:40px}
  .sph-top__r .sph-top__lnk--mail,.sph-top__r .sph-top__lnk--alt{display:none}
  .sph-stat__txt{display:none}
}

/* ===== header/02-nav.html ===== */
/* not sticky: the whole #sph-header section is position:fixed (see tokens) */
.sph-nav{position:relative;z-index:2;color:var(--sph-chalk);background:rgba(11,11,12,.86);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--sph-line);transition:background-color .3s var(--sph-ease),border-color .3s var(--sph-ease)}
.sph-nav[data-stuck="1"]{background:rgba(11,11,12,.97);border-bottom-color:var(--sph-line-2);box-shadow:0 2px 4px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.4)}
/* Constant height, deliberately: the bar is fixed, so any change would have to be
   mirrored in --sph-head and would animate the logo. It is taller than a text-only
   header needs because Sherry's logo is a square lockup - see README section 9. */
.sph-nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:88px}

/* ---- brand: Sherry's supplied logo file ----
   No plate and no background: the artwork is already light-on-dark, so it sits
   straight on the asphalt bar. A white plate behind it (which an earlier version
   had, for a dark-on-light file) read as a bright box in the middle of the header. */
.sph-brand{flex:none;display:flex;align-items:center}
.sph-brand__logo{
  height:72px;min-width:72px;max-width:260px;
  background:none;
}

/* ---- desktop links ---- */
.sph-nav__links{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.1rem)}
.sph-nav__lnk{position:relative;padding:.6rem .3rem;font-size:var(--sph-sm);font-weight:600;letter-spacing:.01em;color:var(--sph-smoke);white-space:nowrap;transition:color .2s var(--sph-ease)}
.sph-nav__lnk::after{
  content:"";position:absolute;left:.3rem;right:.3rem;bottom:.2rem;height:2px;
  background:var(--sph-y);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--sph-ease);
}
.sph-nav__lnk:hover{color:var(--sph-chalk)}
.sph-nav__lnk:hover::after{transform:scaleX(1)}
.sph-nav__lnk[aria-current="true"]{color:var(--sph-y)}
.sph-nav__lnk[aria-current="true"]::after{transform:scaleX(1)}

.sph-nav__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.sph-nav__cta .sph-btn{min-height:46px;padding:.7rem 1.25rem;font-size:var(--sph-xs)}

/* ---- burger ---- */
.sph-burger{display:none;width:48px;height:48px;place-items:center;border:1px solid var(--sph-line-2);border-radius:2px;flex:none}
.sph-burger:hover{border-color:var(--sph-y)}
.sph-burger span{display:block;width:22px;height:2px;background:var(--sph-chalk);position:relative;transition:background-color .2s}
.sph-burger span::before,.sph-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--sph-chalk);transition:transform .3s var(--sph-ease),top .3s var(--sph-ease)}
.sph-burger span::before{top:-7px}
.sph-burger span::after{top:7px}
.sph-burger[aria-expanded="true"] span{background:transparent}
.sph-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.sph-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---- scroll progress: wayfinding on a long single page ---- */
/* scaleX, not width: this is driven from the scroll handler, so animating width
   would run layout on every frame. The bar is position:absolute, so a transform
   cannot affect the header height that syncHead() measures - it is strictly safer
   here than width was, as well as cheaper. Grows from the left. */
.sph-prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--sph-y);pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s linear;
}

/* ---- drawer ---- */
.sph-drawer{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.sph-drawer[data-open="1"]{visibility:visible;pointer-events:auto}
.sph-drawer__veil{position:absolute;inset:0;background:rgba(11,11,12,.72);opacity:0;transition:opacity .35s var(--sph-ease);backdrop-filter:blur(4px)}
.sph-drawer[data-open="1"] .sph-drawer__veil{opacity:1}
.sph-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);
  background:var(--sph-asphalt);color:var(--sph-chalk);border-left:1px solid var(--sph-line-2);
  display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .42s var(--sph-ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.sph-drawer[data-open="1"] .sph-drawer__panel{transform:none}
.sph-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem var(--sph-gut);border-bottom:1px solid var(--sph-line)}
.sph-drawer__ttl{font-size:var(--sph-xs)!important;font-weight:700!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--sph-smoke)}
.sph-drawer__x{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--sph-line-2);border-radius:2px;color:var(--sph-chalk)}
.sph-drawer__x:hover{border-color:var(--sph-y);color:var(--sph-y)}
.sph-drawer__x svg{width:16px;height:16px;fill:currentColor}
.sph-drawer__nav{padding:.5rem 0;flex:1}
.sph-drawer__lnk{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem var(--sph-gut);border-bottom:1px solid var(--sph-line);
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--sph-chalk);
  transition:background-color .2s var(--sph-ease),color .2s var(--sph-ease),padding-left .2s var(--sph-ease);
}
.sph-drawer__lnk:hover{background:var(--sph-steel);color:var(--sph-y);padding-left:calc(var(--sph-gut) + 8px)}
.sph-drawer__lnk .sph-ref{color:var(--sph-dim)}
.sph-drawer__lnk:hover .sph-ref{color:var(--sph-y-deep)}
.sph-drawer__foot{padding:var(--sph-gut);border-top:1px solid var(--sph-line);display:grid;gap:.6rem}
.sph-drawer__foot .sph-btn{width:100%}
.sph-drawer__called{display:grid;gap:.35rem;margin-top:.4rem}
.sph-drawer__called a{font-size:var(--sph-sm);font-weight:600;color:var(--sph-smoke);display:flex;justify-content:space-between;gap:1rem}
.sph-drawer__called a:hover{color:var(--sph-y)}
.sph-drawer__called b{color:var(--sph-chalk);font-weight:700}

@media (max-width:1080px){
  .sph-nav__links{display:none}
  .sph-burger{display:grid}
  .sph-nav__cta .sph-btn--line{display:none}
}
@media (max-width:560px){
  .sph-brand__logo{height:56px;min-width:56px;max-width:180px}
  .sph-logo-fb span{display:none}
  .sph-nav__cta .sph-btn span{display:none}
  .sph-nav__cta .sph-btn{min-width:46px;padding:.7rem}
}
body.sph-locked{overflow:hidden}

/* ===== home/01-hero.html ===== */
.sph-hero{position:relative;isolation:isolate;background:var(--sph-ink);color:var(--sph-chalk)}
.sph-hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.sph-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:sph-settle 1.6s var(--sph-ease) both}
@keyframes sph-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
.sph-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.55) 0,rgba(11,11,12,0) 22%),
    linear-gradient(100deg,rgba(11,11,12,.97) 0%,rgba(11,11,12,.9) 34%,rgba(11,11,12,.5) 66%,rgba(11,11,12,.62) 100%),
    linear-gradient(0deg,var(--sph-ink) 0,rgba(11,11,12,0) 26%);
}

.sph-hero__in{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(90svh,880px);
  padding-block:clamp(3.5rem,9vw,6rem) clamp(2rem,4vw,3rem);
}

/* dispatch header line: yellow rule + live credentials, not an eyebrow */
.sph-hero__slug{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.sph-hero__slug span{color:var(--sph-y);flex:none}
/* A span, not an <hr>: <hr> is not phrasing content, so the parser would close
   the <p> around it and drop everything after it out of the flex row.
   min-width is 2.5rem, not 1rem: at 1rem the rule collapsed to a 16px stub that
   read as a stray mark rather than a rule. Below 560px there is no room for it
   to be a rule at all, so the line stacks and the rule is dropped entirely. */
.sph-hero__slug .sph-hero__dash{flex:1 1 auto;min-width:2.5rem;height:1px;background:linear-gradient(90deg,var(--sph-y-deep),rgba(255,196,0,0))}
@media (max-width:560px){
  .sph-hero__slug{flex-direction:column;align-items:flex-start;gap:.45rem}
  .sph-hero__slug .sph-hero__dash{display:none}
}

.sph-hero h1{color:#fff;margin-bottom:clamp(1.25rem,2.2vw,1.65rem)!important;max-width:19ch}
.sph-hero h1 em{font-style:normal;color:var(--sph-y);display:block}
.sph-hero__lead{color:#D8DCE2;margin-bottom:clamp(1.6rem,3.5vw,2.4rem)!important;max-width:56ch}
.sph-hero__lead b{color:#fff;font-weight:600}

.sph-hero__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:clamp(2rem,4.5vw,3rem)}
.sph-hero__acts .sph-btn{min-width:min(100%,232px)}

/* --- job picker: the hero hands the visitor straight into the fleet board --- */
.sph-jobs{border-top:1px solid var(--sph-line-2);padding-top:clamp(1.25rem,2.5vw,1.75rem)}
.sph-jobs__ttl{color:var(--sph-smoke);margin-bottom:.9rem}
.sph-jobs__row{display:flex;flex-wrap:wrap;gap:.5rem}
.sph-job{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1rem;border:1px solid var(--sph-line-2);border-radius:2px;
  background:rgba(20,21,24,.6);backdrop-filter:blur(6px);
  font-size:var(--sph-sm);font-weight:600;color:#D8DCE2;
  transition:background-color .22s var(--sph-ease),color .22s var(--sph-ease),border-color .22s var(--sph-ease),transform .22s var(--sph-ease);
}
.sph-job svg{width:16px;height:16px;fill:var(--sph-y);flex:none;transition:fill .22s}
.sph-job:hover{background:var(--sph-y);border-color:var(--sph-y);color:var(--sph-ink);transform:translateY(-2px)}
.sph-job:hover svg{fill:var(--sph-ink)}

@media (max-width:600px){
  .sph-hero__in{min-height:min(94svh,760px)}
  .sph-hero__acts .sph-btn{min-width:100%}
}

/* ===== home/02-credentials.html ===== */
.sph-creds{background:var(--sph-asphalt);color:var(--sph-chalk);border-bottom:1px solid var(--sph-line)}
.sph-creds__in{display:grid;grid-template-columns:minmax(220px,.85fr) 2.6fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-block:clamp(2.5rem,5vw,3.75rem)}
.sph-creds__head h2{color:var(--sph-chalk)}
.sph-creds__head p{color:var(--sph-smoke);margin-top:1.1rem!important}

.sph-creds__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sph-line)}
.sph-plate{
  position:relative;background:var(--sph-asphalt-2);padding:1.4rem 1.25rem 1.5rem;
  overflow:hidden;transition:background-color .3s var(--sph-ease);
}
.sph-plate::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:var(--sph-hazard);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--sph-ease);
}
.sph-plate:hover{background:var(--sph-steel)}
.sph-plate:hover::before{transform:scaleX(1)}
/* rivets - the plate is a stamped part, not a card */
.sph-plate::after{
  content:"";position:absolute;right:10px;bottom:10px;width:5px;height:5px;border-radius:50%;
  background:var(--sph-grit);box-shadow:-12px 0 0 var(--sph-grit),0 -12px 0 var(--sph-grit),-12px -12px 0 var(--sph-grit);
}
.sph-plate__mark{width:34px;height:34px;margin-bottom:.9rem;fill:var(--sph-y)}
.sph-plate__ttl{color:#fff;margin-bottom:.55rem!important}
.sph-plate__sub{color:var(--sph-smoke);font-size:var(--sph-sm)!important;line-height:1.5!important;max-width:26ch}

@media (max-width:1080px){
  .sph-creds__in{grid-template-columns:1fr}
  .sph-creds__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .sph-creds__grid{grid-template-columns:1fr}
  .sph-plate{padding:1.15rem 1.1rem 1.25rem}
}

/* ===== home/03-fleet.html ===== */
.sph-fleet{background:var(--sph-paper);color:var(--sph-paper-ink)}
.sph-fleet__band{padding-block:var(--sph-pad-y)}

.sph-fleet__head{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.sph-fleet__head h2{color:var(--sph-paper-ink)}
/* The display line-height of 1.02 is too tight once a line carries a background:
   an inline <mark> comes later in the DOM, so its box paints over the descender
   of the line above it and "job" reads as "iob". Loosening this one heading and
   padding the highlight keeps the descender clear. */
/* needs .sph in the selector to outrank `.sph .sph-d2 { line-height: 1.02 }` */
.sph .sph-fleet__head h2:has(mark){line-height:1.24!important}
.sph-fleet__head h2 mark{
  background:var(--sph-y);color:var(--sph-ink);
  padding:0 .18em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.sph-fleet__head p{color:var(--sph-paper-mute)}

/* ---- filter rail ---- */
.sph-filters{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:1.25rem;margin-bottom:1.75rem;border-bottom:2px solid var(--sph-paper-line)}
.sph-filter{
  position:relative;padding:.62rem 1.05rem;border:1px solid var(--sph-paper-line);
  background:#fff;border-radius:2px;
  font-size:var(--sph-sm);font-weight:600;color:var(--sph-paper-mute);
  transition:background-color .2s var(--sph-ease),color .2s var(--sph-ease),border-color .2s var(--sph-ease),transform .2s var(--sph-ease);
}
.sph-filter:hover{border-color:var(--sph-paper-ink);color:var(--sph-paper-ink);transform:translateY(-1px)}
/* the active marker lives inside the button, not on the container's border,
   so it stays correct when the filter row wraps to a second line */
.sph-filter[aria-pressed="true"]{
  background:var(--sph-ink);border-color:var(--sph-ink);color:#fff;
  box-shadow:inset 0 -3px 0 var(--sph-y);
}
.sph-filter b{font-variant-numeric:tabular-nums;opacity:.55;margin-left:.4rem;font-weight:600}

.sph-fleet__count{color:var(--sph-paper-mute);margin-bottom:1.5rem!important}

/* ---- board ---- */
.sph-board{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}

.sph-card{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--sph-paper-line);border-radius:var(--sph-r);overflow:hidden;
  box-shadow:var(--sph-sh-paper);
  transition:opacity .34s var(--sph-ease),transform .34s var(--sph-ease),box-shadow .3s var(--sph-ease),border-color .3s var(--sph-ease);
}
.sph-card:hover{border-color:#B9C0CA;box-shadow:0 3px 6px rgba(16,18,22,.12),0 18px 44px rgba(16,18,22,.16);transform:translateY(-3px)}
.sph-card.is-out{opacity:0;transform:translateY(14px) scale(.985)}
/* .sph-card sets display:flex, which beats the UA [hidden] rule - without this
   a filtered-out card stays invisible but keeps its grid cell, leaving a large
   empty block under the results. */
.sph-board .sph-card[hidden]{display:none!important}

.sph-card__fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sph-paper-2)}
/* photographs are static - no zoom, no filter, no transition */
.sph-card__fig img{width:100%;height:100%;object-fit:cover}

/* ---- machine plate: the count, over the machine ----
   Every entry here is real yard stock, so the plate carries the client's own
   photograph of that class of machine with the number held stated over it. The
   photograph is the context; the number is the message.
   The scrim is radial and heaviest under the middle because that is where the
   numeral sits - the yellow then reads against the scrim rather than against
   whatever happens to be bright in the picture behind it.
   Cross hire is deliberately the one entry with NO photograph: it is the one
   entry that is not a machine they own. */
.sph-card__fig--plate{
  display:grid;place-content:center;justify-items:center;gap:.3rem;
  background:var(--sph-asphalt);
  background-image:repeating-linear-gradient(135deg,rgba(255,196,0,.055) 0 10px,rgba(255,196,0,0) 10px 20px);
}
.sph-card__fig--plate img{position:absolute;inset:0;z-index:0}
.sph-card__fig--plate::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(62% 58% at 50% 48%,rgba(11,11,12,.9) 0%,rgba(11,11,12,.68) 68%,rgba(11,11,12,.6) 100%);
}
/* z-index on all four so they clear the scrim above the photograph */
.sph-card__fig--plate::before{
  content:"";position:absolute;inset-inline:0;bottom:0;height:3px;z-index:2;
  background:var(--sph-y);opacity:.85;
}
.sph-card__fig--plate .sph-card__ref{z-index:2}
/* nothing behind the bare plate to scrim, so the hazard stripes stay legible */
.sph-card__fig--bare::after{content:none}
.sph-card__num{
  position:relative;z-index:2;
  font-size:clamp(2.5rem,6vw,3.5rem);font-weight:800;line-height:1;
  color:var(--sph-y);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  text-shadow:0 2px 14px rgba(11,11,12,.75);
}
.sph-card__unit{
  position:relative;z-index:2;
  font-size:var(--sph-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sph-chalk);text-align:center;max-width:18ch;
  text-shadow:0 1px 8px rgba(11,11,12,.8);
}
.sph-card__ref{
  position:absolute;top:0;left:0;background:var(--sph-y);color:var(--sph-ink);
  padding:.4rem .7rem;font-variant-numeric:tabular-nums;
}
.sph-card__body{display:flex;flex-direction:column;gap:.65rem;padding:1.25rem 1.25rem 1.4rem;flex:1}
.sph-card__ttl{color:var(--sph-paper-ink)}
.sph-card__txt{color:var(--sph-paper-mute);font-size:var(--sph-sm)!important;line-height:1.6!important}
.sph-card__meta{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--sph-paper-line);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.sph-card__spec{color:#6B7280;font-size:var(--sph-xs)!important;line-height:1.4!important;max-width:16ch}
/* min-height keeps this a real 44px touch target; the yellow rule is drawn with
   ::after so it still sits tight under the label rather than under the padding */
.sph-card__ask{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;flex:none;
  min-height:44px;padding:.7rem 0 .6rem;
  font-size:var(--sph-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sph-paper-ink);
  transition:color .2s var(--sph-ease),gap .2s var(--sph-ease);
}
.sph-card__ask::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:2px;background:var(--sph-y)}
.sph-card__ask:hover{color:var(--sph-y-deep);gap:.65rem}
.sph-card__ask svg{width:12px;height:12px;fill:currentColor}

/* ---- support entries: same board, different material ---- */
.sph-card--sup{grid-column:1/-1;flex-direction:row;align-items:stretch;background:var(--sph-ink);border-color:var(--sph-ink)}
/* The image is taken out of flow so it cannot drive the card's height - Unsplash
   returns each photo at its own aspect ratio, and a portrait crop was making this
   card far taller than its sibling. Height now follows the body copy. */
.sph-card--sup .sph-card__fig{aspect-ratio:auto;width:34%;flex:none;min-height:200px;align-self:stretch}
.sph-card--sup .sph-card__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sph-card--sup .sph-card__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,0) 40%,var(--sph-ink) 100%)}
.sph-card--sup .sph-card__ref{background:var(--sph-y)}
.sph-card--sup .sph-card__body{padding:1.5rem clamp(1.25rem,3vw,2.25rem);justify-content:center;gap:.7rem}
.sph-card--sup .sph-card__ttl{color:#fff}
.sph-card--sup .sph-card__txt{color:var(--sph-smoke);max-width:56ch}
.sph-card--sup .sph-card__meta{border-top-color:var(--sph-line-2)}
.sph-card--sup .sph-card__spec{color:var(--sph-dim)}
.sph-card--sup .sph-card__ask{color:var(--sph-y)}
.sph-card--sup .sph-card__ask:hover{color:#fff}
.sph-card--sup:hover{border-color:var(--sph-y-deep);transform:translateY(-3px)}

.sph-fleet__note{margin-top:clamp(1.5rem,3vw,2.25rem);padding:1.1rem 1.25rem;background:var(--sph-paper-2);border-left:3px solid var(--sph-y);border-radius:0 var(--sph-r) var(--sph-r) 0}
.sph-fleet__note p{color:var(--sph-paper-mute);font-size:var(--sph-sm)!important}
.sph-fleet__note b{color:var(--sph-paper-ink);font-weight:700}
.sph-fleet__none{padding:2.5rem 0;color:var(--sph-paper-mute)}

@media (max-width:1080px){
  .sph-fleet__head{grid-template-columns:1fr;align-items:start}
  .sph-board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .sph-board{grid-template-columns:1fr}
  .sph-card--sup{flex-direction:column}
  .sph-card--sup .sph-card__fig{width:100%;aspect-ratio:16/9;min-height:0}
  .sph-card--sup .sph-card__fig::after{background:linear-gradient(0deg,var(--sph-ink) 0,rgba(11,11,12,0) 70%)}
  .sph-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:1rem}
  .sph-filters::-webkit-scrollbar{display:none}
  .sph-filter{flex:none}
}

/* ===== home/04-why.html ===== */
.sph-why{background:var(--sph-ink);color:var(--sph-chalk)}
.sph-why__band{padding-block:var(--sph-pad-y)}

.sph-why__head{max-width:44ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sph-why__head p:first-child{color:var(--sph-y-deep);margin-bottom:.7rem!important}
.sph-why__head h2{color:#fff}
.sph-why__head>p:last-child{color:var(--sph-smoke);margin-top:1.35rem!important}

/* --- three promises, alternating, deliberately unequal --- */
.sph-promise{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(2rem,4vw,3.25rem);border-top:1px solid var(--sph-line)}
/* mirror the column widths too, otherwise the alternating image lands in the
   narrower track and reads as a smaller photograph than its siblings */
.sph-promise:nth-child(even){grid-template-columns:1fr 1.05fr}
.sph-promise:nth-child(even) .sph-promise__fig{order:2}
.sph-promise__fig{position:relative;border-radius:var(--sph-r);overflow:hidden;background:var(--sph-steel)}
/* photographs are static - no zoom, no filter, no transition */
.sph-promise__fig img{width:100%;aspect-ratio:16/11;object-fit:cover}
/* The third promise carries the client's own 12s clip of a pad-foot roller with
   its operator in the seat - the promise and the footage are the same claim.
   preload="none" plus a poster means the 2 MB costs nothing until it is played.

   RATIO: the clip is square (848x848). It was originally dropped into the 16/11
   box the still photographs use, with object-fit:cover, which cut roughly a third
   of the frame away top and bottom - the client spotted it. The box now matches
   the footage and uses `contain`, so nothing is ever cropped. --sph-vid-ar is the
   single line to change if a differently-shaped clip replaces this one; contain
   means even a wrong value letterboxes rather than cutting the machine off. */
.sph-promise__fig--vid{--sph-vid-ar:1/1}
/* height:auto is load-bearing. The width/height attributes on <video> are
   presentation hints that set a real CSS height, and an explicit height beats
   aspect-ratio - so without this the box stayed 848px tall and only the width
   responded. The reset covers `img` but not `video`, which is why images never
   showed this. Keep the attributes: they are what reserves the box against CLS. */
.sph-promise__fig video{
  display:block;width:100%;height:auto;aspect-ratio:var(--sph-vid-ar,16/11);
  object-fit:contain;background:#08090A;
}
/* the number badge sits bottom-left, which is exactly where the native control
   bar appears - on the video card it moves to the top instead */
.sph-promise__fig--vid .sph-promise__no{bottom:auto;top:0}
.sph-promise__fig::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--sph-line-2);border-radius:var(--sph-r);pointer-events:none}
.sph-promise__no{
  position:absolute;left:0;bottom:0;background:var(--sph-y);color:var(--sph-ink);
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1;
  padding:.5rem .7rem .45rem;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.sph-promise__txt h3{color:#fff;margin-bottom:1rem!important}
.sph-promise__txt p{color:var(--sph-smoke)}
.sph-promise__txt p b{color:var(--sph-chalk);font-weight:600}
.sph-promise--lead{grid-template-columns:1.25fr 1fr}
.sph-promise--lead .sph-promise__txt h3{font-size:var(--sph-d3)!important}

/* --- hour meter: derived from their posted hours and posted fleet, nothing invented --- */
.sph-meter{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sph-line);border:1px solid var(--sph-line);border-radius:var(--sph-r);overflow:hidden}
.sph-meter__cell{background:var(--sph-asphalt);padding:clamp(1.25rem,2.5vw,1.85rem)}
.sph-meter__win{
  display:inline-flex;align-items:baseline;gap:.15rem;
  background:#08090A;border:1px solid #000;border-radius:2px;
  padding:.35rem .6rem;margin-bottom:.8rem;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9);
}
.sph-meter__val{
  font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;line-height:1;
  color:var(--sph-y);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.sph-meter__unit{font-size:var(--sph-xs);font-weight:700;color:var(--sph-y-deep);letter-spacing:.1em;text-transform:uppercase}
.sph-meter__lbl{color:#fff;margin-bottom:.45rem!important}
.sph-meter__sub{color:var(--sph-smoke);font-size:var(--sph-xs)!important;line-height:1.5!important}
.sph-meter__cell--flag .sph-meter__win{background:var(--sph-y);border-color:var(--sph-y-deep);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.sph-meter__cell--flag .sph-meter__val{color:var(--sph-ink);font-size:clamp(1.1rem,2.2vw,1.4rem)}

@media (max-width:900px){
  .sph-promise,.sph-promise--lead{grid-template-columns:1fr;gap:1.5rem}
  .sph-promise:nth-child(even) .sph-promise__fig{order:0}
  .sph-meter{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.sph-meter{grid-template-columns:1fr}}

/* ===== home/05-gallery.html ===== */
.sph-gal{background:var(--sph-asphalt);color:var(--sph-chalk);overflow:hidden}
.sph-gal__band{padding-block:var(--sph-pad-y)}
.sph-gal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.sph-gal__head p:first-child{color:var(--sph-y-deep);margin-bottom:.7rem!important}
.sph-gal__head h2{color:#fff;max-width:26ch}
.sph-gal__head>div>p:last-child{color:var(--sph-smoke);margin-top:1.35rem!important;max-width:52ch}

.sph-gal__ctrl{display:flex;gap:.5rem;flex:none}
.sph-gal__btn{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--sph-line-2);border-radius:2px;color:var(--sph-chalk);transition:background-color .2s var(--sph-ease),border-color .2s var(--sph-ease),color .2s var(--sph-ease)}
.sph-gal__btn:hover:not(:disabled){background:var(--sph-y);border-color:var(--sph-y);color:var(--sph-ink)}
.sph-gal__btn:disabled{opacity:.3;cursor:not-allowed}
.sph-gal__btn svg{width:18px;height:18px;fill:currentColor}

/* --- the rail runs past the container edge on purpose --- */
.sph-rail{
  display:flex;gap:clamp(.75rem,1.4vw,1.15rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* No scroll-snap: `x mandatory` snapped the rail back to the nearest card the
     moment a drag ended, so anything shorter than half a card undid itself.
     No scroll-behavior:smooth either - it animates every scrollLeft write, so a
     drag lags behind the pointer. The arrows pass behavior:'smooth' explicitly. */
  scrollbar-width:none;padding-bottom:.25rem;
  margin-inline:calc(var(--sph-gut) * -1);
  padding-inline:var(--sph-gut);
  cursor:grab;
}
.sph-rail[data-drag="1"]{cursor:grabbing}
.sph-rail::-webkit-scrollbar{display:none}
.sph-shot{
  position:relative;flex:none;
  width:clamp(272px,40vw,500px);border-radius:var(--sph-r);overflow:hidden;
  background:var(--sph-steel);
}
/* photographs are static - no zoom, no filter, no transition */
.sph-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;-webkit-user-drag:none;user-select:none}
.sph-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,12,.94) 0,rgba(11,11,12,.24) 42%,rgba(11,11,12,0) 72%);pointer-events:none}
.sph-shot__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.15rem}
.sph-shot__no{color:var(--sph-y);display:block;margin-bottom:.4rem!important}
.sph-shot__ttl{color:#fff;font-size:var(--sph-sm)!important;font-weight:600!important;line-height:1.45!important}

/* wide feature every fifth frame so the rail is not a metronome */
.sph-shot--wide{width:clamp(272px,62vw,760px)}
.sph-shot--wide img{aspect-ratio:16/9}
/* Three of the client's photographs are portrait phone frames. Cropped to the
   rail's 4/3 the default centre crop cuts the top off the machine, so those
   figures pull the focal point up instead. */
.sph-shot--tall img{object-position:50% 30%}

.sph-gal__foot{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.sph-gal__track{flex:1;height:2px;background:var(--sph-line-2);position:relative;overflow:hidden}
/* translateX + scaleX, not left + width: sync() writes this on every rail-scroll
   frame, so animating two layout properties ran layout each time. width:100% makes
   both percentages resolve against the same track width - a percentage translate is
   relative to the element's own box, a percentage left is relative to the containing
   block, and they only agree because the element now fills the track. No radius on
   this bar, so scaleX cannot distort it. */
.sph-gal__thumb{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  background:var(--sph-y);
  transform:scaleX(.2);transform-origin:left center;
  transition:transform .2s var(--sph-ease);
}
.sph-gal__hint{color:var(--sph-dim);flex:none}

@media (max-width:720px){
  .sph-gal__head{flex-direction:column;align-items:flex-start}
  .sph-gal__ctrl{display:none}
}

/* ===== home/06-process.html ===== */
.sph-proc{background:var(--sph-paper);color:var(--sph-paper-ink)}
.sph-proc__band{padding-block:var(--sph-pad-y)}
.sph-proc__head{max-width:46ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.sph-proc__head p:first-child{color:var(--sph-paper-mute);margin-bottom:.7rem!important}
.sph-proc__head h2{color:var(--sph-paper-ink)}
.sph-proc__head>p:last-child{color:var(--sph-paper-mute);margin-top:1.35rem!important}

.sph-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem);counter-reset:sph-step}
/* the rule that runs behind the steps, and fills as you read down the page */
.sph-steps::before{content:"";position:absolute;left:0;right:0;top:30px;height:2px;background:var(--sph-paper-line)}
.sph-steps::after{content:"";position:absolute;left:0;top:30px;height:2px;width:var(--fill,0%);background:var(--sph-y);transition:width .8s var(--sph-ease)}

/* equal-height steps with the tag pinned to the bottom, so the row of tags
   lines up even though the four descriptions are different lengths */
.sph-step{position:relative;display:flex;flex-direction:column;height:100%}
.sph-step__body{display:flex;flex-direction:column;flex:1}
/* the description absorbs the slack, so the tag keeps a real gap above it
   instead of being pushed flush by margin-top:auto */
.sph-step__body p{flex:1 1 auto}
.sph-step__no{
  position:relative;z-index:2;width:60px;height:60px;display:grid;place-items:center;
  background:#fff;border:2px solid var(--sph-paper-line);border-radius:50%;
  font-size:1.25rem;font-weight:800;color:var(--sph-paper-mute);
  font-variant-numeric:tabular-nums;margin-bottom:1.15rem;
  transition:background-color .45s var(--sph-ease),border-color .45s var(--sph-ease),color .45s var(--sph-ease),transform .45s var(--sph-ease);
}
.sph-step.is-on .sph-step__no{background:var(--sph-y);border-color:var(--sph-y);color:var(--sph-ink);transform:scale(1.06)}
.sph-step h3{color:var(--sph-paper-ink);margin-bottom:.75rem!important}
.sph-step p{color:var(--sph-paper-mute);font-size:var(--sph-sm)!important;line-height:1.65!important}
.sph-step__tag{
  display:inline-block;align-self:flex-start;margin-top:.85rem;padding:.3rem .55rem;
  background:var(--sph-paper-2);color:#5A616C;border-radius:2px;
  font-size:var(--sph-xs)!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;
}

@media (max-width:900px){
  .sph-steps{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .sph-steps::before,.sph-steps::after{display:none}
}
@media (max-width:560px){
  .sph-steps{grid-template-columns:1fr;gap:1.75rem}
  .sph-step{display:grid;grid-template-columns:52px 1fr;gap:0 1rem;align-items:start}
  .sph-step__no{width:52px;height:52px;font-size:1.05rem;margin-bottom:0}
  .sph-step__body{grid-column:2}
}

/* ===== home/07-areas.html ===== */
.sph-area{position:relative;background:var(--sph-ink);color:var(--sph-chalk);isolation:isolate}
.sph-area__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sph-area__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.sph-area__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.97) 0%,rgba(11,11,12,.9) 45%,rgba(11,11,12,.78) 100%)}
.sph-area__band{padding-block:var(--sph-pad-y)}
.sph-area__in{display:grid;grid-template-columns:.95fr 1.15fr;gap:clamp(2rem,5vw,4.5rem)}

.sph-area__head p:first-child{color:var(--sph-y-deep);margin-bottom:.7rem!important}
.sph-area__head h2{color:#fff}
.sph-area__head>p{color:var(--sph-smoke)}
.sph-area__head h2+p{margin-top:1.35rem!important}
.sph-base{margin-top:1.75rem;padding:1.15rem 1.25rem;border:1px solid var(--sph-line-2);border-left:3px solid var(--sph-y);border-radius:0 var(--sph-r) var(--sph-r) 0;background:rgba(27,29,33,.7);backdrop-filter:blur(8px)}
.sph-base__lbl{color:var(--sph-y);margin-bottom:.45rem!important}
.sph-base address{font-style:normal;color:#fff;font-size:var(--sph-sm);line-height:1.6;font-weight:500}
.sph-base a{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;color:var(--sph-chalk);font-size:var(--sph-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--sph-y);padding-bottom:2px}
.sph-base a:hover{color:var(--sph-y)}
.sph-base a svg{width:12px;height:12px;fill:currentColor}

/* --- suburb check --- */
.sph-check{position:relative;margin-bottom:1.25rem}
.sph-check input{
  width:100%;min-height:56px;padding:.9rem 1.1rem .9rem 3rem;
  background:var(--sph-asphalt-2);border:1px solid var(--sph-line-2);border-radius:var(--sph-r);
  color:#fff;font-size:var(--sph-body);
}
.sph-check input::placeholder{color:var(--sph-dim)}
.sph-check input:focus{border-color:var(--sph-y);outline:none;box-shadow:0 0 0 3px rgba(255,196,0,.22)}
.sph-check svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:var(--sph-grit);pointer-events:none}
.sph-check input:focus+svg{fill:var(--sph-y)}

.sph-area__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sph-line);border:1px solid var(--sph-line);border-radius:var(--sph-r);overflow:hidden}
.sph-spot{
  background:rgba(20,21,24,.86);padding:1rem .95rem;
  transition:background-color .28s var(--sph-ease),opacity .28s var(--sph-ease);
}
.sph-spot b{display:block;color:#fff;font-size:var(--sph-sm);font-weight:600;line-height:1.35}
.sph-spot span{display:block;margin-top:.2rem;color:var(--sph-dim);font-size:var(--sph-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.sph-area__msg{margin-top:1.15rem;padding:1rem 1.15rem;border-radius:var(--sph-r);background:var(--sph-asphalt-2);border:1px solid var(--sph-line-2)}
.sph-area__msg p{color:var(--sph-smoke);font-size:var(--sph-sm)!important}
.sph-area__msg b{color:#fff}
.sph-area__msg a{color:var(--sph-y);border-bottom:1px solid currentColor}

@media (max-width:980px){
  .sph-area__in{grid-template-columns:1fr}
  .sph-area__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){.sph-area__grid{grid-template-columns:1fr}}

/* ===== home/08-quote.html ===== */
.sph-q{background:var(--sph-paper);color:var(--sph-paper-ink)}
.sph-q__band{padding-block:var(--sph-pad-y)}
.sph-q__head{max-width:48ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sph-q__head p:first-child{color:var(--sph-paper-mute);margin-bottom:.7rem!important}
.sph-q__head h2{color:var(--sph-paper-ink)}
.sph-q__head>p:last-child{color:var(--sph-paper-mute);margin-top:1.35rem!important}

.sph-q__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}

/* ---- the form, laid out like a job card ---- */
.sph-form{background:#fff;border:1px solid var(--sph-paper-line);border-radius:var(--sph-r);box-shadow:var(--sph-sh-paper);overflow:hidden}
.sph-form__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;background:var(--sph-ink)}
.sph-form__top p{color:var(--sph-y)}
.sph-form__top span{color:var(--sph-dim);font-size:var(--sph-xs);font-weight:600}
.sph-form__body{padding:clamp(1.25rem,2.5vw,1.75rem);display:grid;gap:1.1rem}
.sph-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.sph-fld{display:grid;gap:.4rem}
.sph-fld label{color:var(--sph-paper-ink);font-size:var(--sph-xs)!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase}
.sph-fld label i{font-style:normal;color:#6B7280;font-weight:600;letter-spacing:0;text-transform:none}
.sph-fld :is(input,select,textarea){
  width:100%;min-height:50px;padding:.7rem .85rem;
  background:#FBFCFD;border:1px solid var(--sph-paper-line);border-radius:2px;
  color:var(--sph-paper-ink);font-size:var(--sph-body);
  transition:border-color .2s var(--sph-ease),box-shadow .2s var(--sph-ease),background-color .2s var(--sph-ease);
}
.sph-fld textarea{min-height:96px;resize:vertical;line-height:1.6}
.sph-fld :is(input,select,textarea):focus{background:#fff;border-color:var(--sph-y-deep);outline:none;box-shadow:0 0 0 3px rgba(255,196,0,.28)}
.sph-fld :is(input,textarea)::placeholder{color:#6B7280}
.sph-fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E545E'%3E%3Cpath d='M12 16 6 10h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:18px;padding-right:2.4rem}
.sph-fld[data-bad="1"] :is(input,select,textarea){border-color:#B4231F;box-shadow:0 0 0 3px rgba(180,35,31,.14)}
.sph-fld__err{color:#B4231F;font-size:var(--sph-xs)!important;font-weight:600;display:none}
.sph-fld[data-bad="1"] .sph-fld__err{display:block}

.sph-form__foot{padding:1.1rem clamp(1.25rem,2.5vw,1.75rem) 1.5rem;border-top:1px solid var(--sph-paper-line);display:grid;gap:.7rem}
.sph-form__foot .sph-btn{width:100%}
.sph-form__alt{display:flex;flex-wrap:wrap;gap:.5rem}
.sph-form__alt button,.sph-form__alt a{
  flex:1;min-width:132px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:46px;padding:.6rem .9rem;border:1px solid var(--sph-paper-line);border-radius:2px;
  font-size:var(--sph-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sph-paper-mute);
  transition:border-color .2s var(--sph-ease),color .2s var(--sph-ease),background-color .2s var(--sph-ease);
}
.sph-form__alt button:hover,.sph-form__alt a:hover{border-color:var(--sph-paper-ink);color:var(--sph-paper-ink);background:var(--sph-paper-2)}
.sph-form__alt svg{width:14px;height:14px;fill:currentColor}
.sph-form__note{color:#6B7280;font-size:var(--sph-xs)!important;line-height:1.5!important}

/* ---- live docket preview ---- */
.sph-docket{position:sticky;top:96px;display:grid;gap:1rem}
.sph-docket__card{background:var(--sph-ink);border-radius:var(--sph-r);overflow:hidden;box-shadow:var(--sph-sh)}
.sph-docket__fig{position:relative;height:120px;overflow:hidden}
.sph-docket__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.sph-docket__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--sph-ink) 0,rgba(11,11,12,.25) 100%)}
.sph-docket__fig p{position:absolute;left:1.15rem;bottom:.85rem;z-index:2;color:var(--sph-y)}
.sph-docket__body{padding:1.15rem 1.25rem 1.35rem}
.sph-docket__pre{
  margin:0;color:var(--sph-chalk);font-family:var(--sph-font);font-size:var(--sph-sm);
  line-height:1.7;white-space:pre-wrap;word-break:break-word;min-height:180px;
}
.sph-docket__pre em{font-style:normal;color:var(--sph-dim)}
.sph-docket__pre b{color:var(--sph-y);font-weight:600}
.sph-docket__meta{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--sph-line);display:flex;align-items:center;gap:.5rem;color:var(--sph-dim)}
.sph-docket__meta svg{width:14px;height:14px;fill:var(--sph-y);flex:none}

.sph-docket__call{background:#fff;border:1px solid var(--sph-paper-line);border-radius:var(--sph-r);padding:1.15rem 1.25rem}
.sph-docket__call p:first-child{color:var(--sph-paper-mute);margin-bottom:.75rem!important}
.sph-docket__call a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--sph-paper-line);font-size:var(--sph-sm);color:var(--sph-paper-mute);transition:color .2s}
.sph-docket__call a:last-child{border-bottom:0}
.sph-docket__call a:hover{color:var(--sph-paper-ink)}
.sph-docket__call b{color:var(--sph-paper-ink);font-weight:700;white-space:nowrap}

@media (max-width:980px){
  .sph-q__in{grid-template-columns:1fr}
  .sph-docket{position:static}
  .sph-docket__pre{min-height:0}
}
@media (max-width:560px){.sph-row{grid-template-columns:1fr}}

/* ===== home/09-contact-intro.html ===== */
.sph-con{background:var(--sph-asphalt);color:var(--sph-chalk)}
.sph-con__band{padding-block:var(--sph-pad-y) clamp(2rem,4vw,3rem)}
.sph-con__head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.sph-con__head p:first-child{color:var(--sph-y-deep);margin-bottom:.7rem!important}
.sph-con__head h2{color:#fff}
.sph-con__head>div>p:last-child{color:var(--sph-smoke);margin-top:1.35rem!important}
.sph-con__fig{border-radius:var(--sph-r);overflow:hidden;position:relative}
.sph-con__fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sph-con__fig::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--sph-line-2);border-radius:var(--sph-r)}

.sph-con__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sph-line);border:1px solid var(--sph-line);border-radius:var(--sph-r);overflow:hidden}
.sph-con__col{background:var(--sph-asphalt-2);padding:clamp(1.25rem,2.5vw,1.85rem)}
.sph-con__lbl{color:var(--sph-y);margin-bottom:1rem!important;padding-bottom:.7rem;border-bottom:1px solid var(--sph-line)}

.sph-con__who a{display:block;padding:.7rem 0;border-bottom:1px solid var(--sph-line)}
.sph-con__who a:last-child{border-bottom:0;padding-bottom:0}
.sph-con__who span{display:block;color:var(--sph-dim);font-size:var(--sph-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}
.sph-con__who b{display:block;color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;transition:color .2s var(--sph-ease)}
.sph-con__who a:hover b{color:var(--sph-y)}

.sph-hours{display:grid;gap:.15rem}
.sph-hours div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--sph-line)}
.sph-hours div:last-child{border-bottom:0}
.sph-hours dt{color:var(--sph-smoke);font-size:var(--sph-sm)}
.sph-hours dd{color:#fff;font-size:var(--sph-sm);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sph-hours div[data-shut="1"] dd{color:var(--sph-dim);font-weight:600}
.sph-hours div[data-today="1"]{background:rgba(255,196,0,.09);margin-inline:-.5rem;padding-inline:.5rem;border-radius:2px}
.sph-hours div[data-today="1"] dt{color:var(--sph-y);font-weight:700}

.sph-con__where address{font-style:normal;color:#fff;font-size:var(--sph-sm);line-height:1.7}
.sph-con__where a{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;color:var(--sph-chalk);font-size:var(--sph-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--sph-y);padding-bottom:2px}
.sph-con__where a:hover{color:var(--sph-y)}
.sph-con__where a svg{width:12px;height:12px;fill:currentColor}
.sph-con__social{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--sph-line)}
.sph-con__social a{display:inline-flex;align-items:center;gap:.5rem;color:var(--sph-smoke);font-size:var(--sph-sm);font-weight:600}
.sph-con__social a:hover{color:var(--sph-y)}
.sph-con__social svg{width:18px;height:18px;fill:currentColor}

@media (max-width:980px){
  .sph-con__head{grid-template-columns:1fr}
  .sph-con__grid{grid-template-columns:1fr}
}

/* ===== home/09-contact-formstyle.html ===== */
.sph-formhead{max-width:var(--sph-wrap);margin:0 auto clamp(1.25rem,2.5vw,1.75rem);padding-inline:var(--sph-gut)}
.sph-formhead__in{max-width:760px;margin-inline:auto;text-align:center}
.sph-formhead p:first-child{color:var(--sph-y-deep);margin-bottom:.6rem!important}
.sph-formhead h3{color:#fff}
.sph-formhead>div>p:last-child{color:var(--sph-smoke);margin-top:1.1rem!important;margin-inline:auto!important}

/* ---- native Divi form, dressed as the job card ---- */
#contact [class*="et_pb_contact_form_container"],
#contact [class*="et_pb_contact_form_0"]{max-width:820px;margin-inline:auto!important}
#contact [class*="et_pb_contact"] h1,
#contact [class*="et_pb_contact"] h2{display:none}

#contact form p{padding:0!important;margin-bottom:1.05rem!important}
#contact form input:not([type="submit"]),
#contact form textarea,
#contact form select{
  width:100%!important;min-height:52px;
  padding:.75rem .9rem!important;
  background:#FBFCFD!important;
  border:1px solid #D3D8DF!important;border-radius:2px!important;
  color:#101216!important;
  font-family:var(--sph-font)!important;font-size:1rem!important;line-height:1.5!important;
  box-shadow:none!important;
  transition:border-color .2s var(--sph-ease),box-shadow .2s var(--sph-ease),background-color .2s var(--sph-ease);
}
#contact form textarea{min-height:130px;resize:vertical}
#contact form input:not([type="submit"]):focus,
#contact form textarea:focus,
#contact form select:focus{
  background:#fff!important;border-color:#D99F00!important;outline:none!important;
  box-shadow:0 0 0 3px rgba(255,196,0,.28)!important;
}
#contact form ::placeholder{color:#6B7280!important;opacity:1}
#contact form label{
  display:block!important;margin-bottom:.35rem!important;
  color:#101216!important;font-family:var(--sph-font)!important;
  font-size:.75rem!important;font-weight:700!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
}

/* ---- reCAPTCHA v3 ----
   The v3 badge is position:fixed bottom-right, exactly where the mobile action
   bar lives. Google permits hiding it ONLY if the attribution notice is shown
   instead, so the two are tied together by the html.sph-recaptcha class: the JS
   below the form adds it at the same moment it reveals the notice.

   Deliberately fail-safe. If detection ever misses, the class is never added,
   so the badge stays VISIBLE and we remain compliant - rather than hiding the
   badge and showing no attribution. */
html.sph-recaptcha .grecaptcha-badge{visibility:hidden!important}

/* Divi's basic math captcha. Styled so the form still looks right if it is left
   on, but with reCAPTCHA enabled you should switch it off - see README 2a. */
#contact [class*="et_pb_contact_right"]{
  display:flex!important;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1.1rem!important;padding:.85rem 1rem;
  background:#EDEFF2;border:1px dashed #C6CCD5;border-radius:2px;
}
/* when Divi renders the wrapper empty (basic captcha off) it must not show as
   an empty dashed box */
#contact [class*="et_pb_contact_right"]:empty{display:none!important}
#contact [class*="et_pb_contact_captcha_question"]{
  color:#101216!important;font-weight:700!important;font-size:1rem!important;
  font-variant-numeric:tabular-nums;
}
#contact input[class*="et_pb_contact_captcha"]{max-width:110px!important;min-height:44px!important}

/* submit */
#contact [class*="et_pb_contact_submit"],
#contact form button[type="submit"],
#contact form input[type="submit"]{
  font-family:var(--sph-font)!important;font-weight:700!important;
  font-size:.9375rem!important;letter-spacing:.02em!important;text-transform:uppercase!important;
  min-height:54px;cursor:pointer;
  transition:background-color .22s var(--sph-ease),color .22s var(--sph-ease),transform .22s var(--sph-ease),box-shadow .22s var(--sph-ease)!important;
}
#contact [class*="et_pb_contact_submit"]:hover,
#contact form button[type="submit"]:hover{transform:translateY(-2px);box-shadow:var(--sph-sh)}
#contact [class*="et_pb_contact_submit"]::after{display:none!important}

/* Divi's own status messages */
#contact [class*="et-pb-contact-message"]{
  color:#101216!important;background:#fff;border-left:3px solid var(--sph-y);
  padding:1rem 1.15rem!important;margin-bottom:1.1rem!important;border-radius:0 2px 2px 0;
  font-family:var(--sph-font)!important;
}
#contact [class*="et-pb-contact-message"] ul{list-style:disc!important;padding-left:1.25rem!important}
#contact [class*="et_contact_error"] input,
#contact [class*="et_contact_error"] textarea{border-color:#B4231F!important}

#contact [class*="et_pb_contact_field_last"],
#contact [class*="et_pb_contact_field_half"]{box-sizing:border-box}

/* .sph-formfoot lives in 09-contact-formfoot.html, which renders below the form */

/* ===== home/09-contact-formfoot.html ===== */
.sph-formfoot{max-width:820px;margin:1.15rem auto 0;padding-inline:var(--sph-gut);text-align:center}
.sph-formfoot p{color:var(--sph-dim);font-size:var(--sph-xs)!important;line-height:1.65!important}
.sph-formfoot a{color:var(--sph-smoke);border-bottom:1px solid var(--sph-grit)}
.sph-formfoot a:hover{color:var(--sph-y);border-bottom-color:var(--sph-y-deep)}
.sph-formfoot__shield{display:inline-flex;align-items:center;gap:.4rem}
.sph-formfoot__shield svg{width:12px;height:12px;fill:var(--sph-y-deep);flex:none}

/* ===== home/10-cta.html ===== */
.sph-cta{position:relative;background:var(--sph-ink);color:#fff;isolation:isolate;overflow:hidden}
.sph-cta__bg{position:absolute;inset:0;z-index:-1}
.sph-cta__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.sph-cta__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,rgba(11,11,12,.72) 0%,rgba(11,11,12,.94) 62%,var(--sph-ink) 100%)}
.sph-cta__band{padding-block:clamp(4.5rem,9vw,7.5rem);text-align:center}

/* the one place with room to show the logo at a real size */
.sph-cta__logo{
  margin:0 auto clamp(1.75rem,3.5vw,2.5rem);
  height:clamp(120px,15vw,180px);min-width:clamp(120px,15vw,180px);max-width:min(88vw,380px);
}

.sph-cta h2{color:#fff;margin-inline:auto!important;max-width:22ch}
.sph-cta__sub{color:var(--sph-smoke);margin:1.1rem auto 0!important;max-width:52ch}
.sph-cta__acts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.sph-cta__acts .sph-btn{min-width:min(100%,238px)}

.sph-cta__tag{margin-top:clamp(2.25rem,4.5vw,3.25rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--sph-line)}
.sph-cta__creds{display:flex;flex-wrap:wrap;gap:.4rem .5rem;justify-content:center}
.sph-cta__creds span{
  padding:.4rem .7rem;border:1px solid var(--sph-line-2);border-radius:2px;
  color:var(--sph-smoke);font-size:var(--sph-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:560px){.sph-cta__acts .sph-btn{min-width:100%}}

/* ===== footer/01-main.html ===== */
.sph-foot{position:relative;background:var(--sph-ink);color:var(--sph-chalk);isolation:isolate;overflow:hidden}
.sph-foot__tex{position:absolute;inset:0;z-index:-1;opacity:.13}
.sph-foot__tex img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.sph-foot__tex::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--sph-ink) 0,rgba(11,11,12,.82) 45%,var(--sph-ink) 100%)}

.sph-foot__band{padding-block:clamp(3rem,6vw,4.75rem)}
.sph-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(1.75rem,4vw,3.25rem)}

/* brand block - the logo file */
.sph-foot__brand{display:inline-block;margin-bottom:1.35rem}
.sph-foot__brand .sph-brand__logo{height:88px;min-width:88px;max-width:230px}
.sph-foot__blurb{color:var(--sph-smoke);font-size:var(--sph-sm)!important;line-height:1.7!important;max-width:42ch}
.sph-foot__creds{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.25rem}
.sph-foot__creds span{padding:.32rem .6rem;background:var(--sph-asphalt-2);border:1px solid var(--sph-line);border-radius:2px;color:var(--sph-smoke);font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* link columns */
.sph-foot h2{color:var(--sph-y);margin-bottom:1.05rem!important;padding-bottom:.65rem;border-bottom:1px solid var(--sph-line)}
.sph-foot__list li{margin-bottom:.1rem}
.sph-foot__list a{
  display:inline-block;padding:.32rem 0;color:var(--sph-smoke);font-size:var(--sph-sm);font-weight:500;
  transition:color .2s var(--sph-ease),transform .2s var(--sph-ease);
}
.sph-foot__list a:hover{color:var(--sph-y);transform:translateX(3px)}
.sph-foot__areas{display:flex;flex-wrap:wrap;gap:.3rem}
.sph-foot__areas li{color:var(--sph-smoke);font-size:var(--sph-sm)}
.sph-foot__areas li::after{content:" / ";color:var(--sph-grit)}
.sph-foot__areas li:last-child::after{content:""}
.sph-foot__more{color:var(--sph-dim)!important;font-size:var(--sph-xs)!important;margin-top:.8rem!important;line-height:1.6!important}

/* contact column */
.sph-foot__con a{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--sph-line);color:var(--sph-smoke);font-size:var(--sph-sm)}
.sph-foot__con a:hover{color:var(--sph-y)}
.sph-foot__con a b{color:#fff;font-weight:700;white-space:nowrap}
.sph-foot__con a:hover b{color:var(--sph-y)}
.sph-foot__con address{font-style:normal;color:var(--sph-smoke);font-size:var(--sph-sm);line-height:1.7;margin-top:1rem!important}
/* scoped to beat `.sph-foot__con a` above, which is equally specific */
.sph-foot__con .sph-foot__wa{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1.15rem;min-height:48px;padding:.7rem 1rem;background:var(--sph-y);color:var(--sph-ink);border-radius:2px;font-size:var(--sph-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:0;transition:background-color .2s var(--sph-ease),transform .2s var(--sph-ease)}
.sph-foot__con .sph-foot__wa:hover{background:var(--sph-y-hi);color:var(--sph-ink);transform:translateY(-2px)}
.sph-foot__wa svg{width:15px;height:15px;fill:currentColor}

@media (max-width:1000px){.sph-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sph-foot__grid{grid-template-columns:1fr;gap:2.25rem}}

/* ===== footer/02-bottom.html ===== */
.sph-legal{background:#08090A;color:var(--sph-chalk);border-top:1px solid var(--sph-line)}
.sph-legal__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.15rem}
.sph-legal p{color:var(--sph-dim);font-size:var(--sph-xs)!important;line-height:1.6!important}
.sph-legal p b{color:var(--sph-smoke);font-weight:600}
.sph-legal__tag{color:var(--sph-y-deep)!important;font-weight:700!important;letter-spacing:.06em}
.sph-top-btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;
  border:1px solid var(--sph-line-2);border-radius:2px;color:var(--sph-smoke);
  font-size:var(--sph-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .2s var(--sph-ease),color .2s var(--sph-ease),background-color .2s var(--sph-ease);
}
.sph-top-btn:hover{border-color:var(--sph-y);color:var(--sph-ink);background:var(--sph-y)}
.sph-top-btn svg{width:13px;height:13px;fill:currentColor}
@media (max-width:700px){
  .sph-legal__in{flex-direction:column;align-items:flex-start;text-align:left}
  .sph-legal{padding-bottom:0}
}

/* ===== footer/03-actionbar.html ===== */
.sph-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:180;
  display:none;grid-template-columns:repeat(3,1fr);
  background:rgba(11,11,12,.97);color:var(--sph-chalk);backdrop-filter:blur(14px);
  border-top:1px solid var(--sph-line-2);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(105%);transition:transform .38s var(--sph-ease);
}
.sph-bar[data-show="1"]{transform:none}
.sph-bar__lnk{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
  min-height:62px;padding:.5rem .4rem;color:var(--sph-chalk);
  font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-right:1px solid var(--sph-line);
  transition:background-color .2s var(--sph-ease),color .2s var(--sph-ease);
}
.sph-bar__lnk:last-child{border-right:0}
.sph-bar__lnk svg{width:19px;height:19px;fill:currentColor}
.sph-bar__lnk:active{background:var(--sph-steel)}
.sph-bar__lnk--go{background:var(--sph-y);color:var(--sph-ink)}
.sph-bar__lnk--go:active{background:var(--sph-y-hi)}

@media (max-width:860px){
  .sph-bar{display:grid}
  /* keep the last section clear of the bar */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
body.sph-locked .sph-bar{transform:translateY(105%)}