/*
Theme Name:   Hello Elementor Child - Horizon Al-Sahm
Theme URI:    https://sahmhorizon.com
Description:  Flame & Graphite design layer for Horizon Al-Sahm Industrial Products. Colour and type are driven by the Elementor kit; this stylesheet supplies the tokens and the component behaviour the kit has no control for.
Author:       Horizon Al-Sahm
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* ============================================================
   Tokens. Colours are sampled from the company logo:
   #EA401F is 59% of the mark, #ED5919 a further 14%.
   ============================================================ */
:root{
  --hs-flame:#EA401F;
  --hs-flame-deep:#D6371A;      /* 4.75:1 on white - safe for text */
  --hs-flame-pressed:#B82E14;
  --hs-ember:#ED5919;
  --hs-amber:#F3A818;
  --hs-gold:#F5C817;
  --hs-gradient:linear-gradient(95deg,#EA401F 0%,#ED5919 38%,#F3A818 74%,#F5C817 100%);

  --hs-graphite-900:#14100E;
  --hs-graphite-800:#221C19;
  --hs-graphite-700:#2A2320;
  --hs-steel-500:#6B615C;
  --hs-steel-300:#A79E98;

  --hs-canvas:#FBFAF9;
  --hs-mist-100:#F1ECE8;
  --hs-mist-200:#E2DAD4;
  --hs-white:#FFFFFF;
  --hs-error:#B3261E;

  --hs-radius:3px;
  --hs-radius-lg:4px;
  --hs-shadow:0 1px 2px rgba(20,16,14,.06),0 8px 24px -12px rgba(20,16,14,.18);
  --hs-shadow-lift:0 2px 4px rgba(20,16,14,.08),0 18px 40px -16px rgba(20,16,14,.28);
  --hs-focus:0 0 0 3px rgba(243,168,24,.55);
  --hs-ease:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   Base
   ============================================================ */
body{
  background:var(--hs-canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Nothing may push the page sideways on a phone. `clip` rather than `hidden`
   because `hidden` on an ancestor silently kills position:sticky on the header. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img,video,iframe,canvas,svg{max-width:100%;height:auto}
table{max-width:100%}
pre,code{overflow-x:auto;max-width:100%}
/* long unbroken strings (part numbers, urls) must wrap rather than stretch */
.hs-footer a,.hs-footer li,.hs-footer p,.hs-spec li{overflow-wrap:anywhere}

/* offset in-page anchors so the sticky header does not cover the heading */
[id]{scroll-margin-top:96px}

h1,h2,h3,h4,h5,h6{text-wrap:balance}
p,li{text-wrap:pretty}

/* Visible keyboard focus everywhere. Hello Elementor ships none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--hs-amber);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   Buttons - one shape and one motion across the whole site
   ============================================================ */
.elementor-button{
  border-radius:var(--hs-radius);
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:transform .16s var(--hs-ease),
             background-color .16s var(--hs-ease),
             border-color .16s var(--hs-ease),
             color .16s var(--hs-ease),
             box-shadow .16s var(--hs-ease);
  will-change:transform;
}
.elementor-button:hover,
.elementor-button:focus-visible{transform:translateY(-2px)}
.elementor-button:active{transform:translateY(0)}

/* Secondary treatment. The widget carries its own button_text_color, which is
   emitted at equal specificity and later in source, so the hover colour has to
   be forced or the label stays white on a white fill and disappears. Filling
   with flame instead of white also removes the contrast trap entirely. */
.hs-btn-ghost .elementor-button{
  background-color:transparent !important;
  border:2px solid currentColor !important;
}
.hs-btn-ghost .elementor-button:hover,
.hs-btn-ghost .elementor-button:focus-visible{
  background-color:var(--hs-flame) !important;
  border-color:var(--hs-flame) !important;
  color:#FFFFFF !important;
}
.hs-btn-ghost .elementor-button:hover .elementor-button-text,
.hs-btn-ghost .elementor-button:focus-visible .elementor-button-text{
  color:#FFFFFF !important;
}

/* ============================================================
   Utilities used by the page templates
   ============================================================ */
.hs-eyebrow{
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--hs-flame);
}
/* The eyebrow is a decorative kicker, not a section heading, so it renders as
   a <p>. That fixes an h1 -> h6 -> h2 jump on all 20 pages, but it also means
   the type can no longer come from the kit's h6 settings - which is where the
   Barlow Condensed 16px/700 actually came from, not from the rule above.
   Pinned here so the tag change is pixel-identical. The values are the
   measured computed styles from before the switch, including the 0.012em
   letter-spacing the kit was applying in place of the .22em above. */
.hs-eyebrow .elementor-heading-title{
  font-family:"Barlow Condensed",sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1.04;
  letter-spacing:.012em;
  text-transform:uppercase;
  margin:0;
}
.hs-on-dark,
.hs-on-dark h1,.hs-on-dark h2,.hs-on-dark h3,.hs-on-dark h4{color:var(--hs-white)}
.hs-on-dark p,.hs-on-dark li{color:#C9BFB9}

.hs-rule-flame{
  width:56px;height:3px;border:0;
  background:var(--hs-gradient);
  /* <hr> defaults to margin-inline:auto, which centres the rule under a
     left-aligned heading; reset it explicitly */
  margin:1.1rem 0 0;
}

/* Hero legibility: a directional scrim beats a flat black overlay, because the
   headline sits on the left. Drawn here rather than through Elementor's overlay
   control, which does not emit an overlay element for containers. */
.hs-hero-scrim{
  position:relative;
  display:flex;
  /* stretch, not center: the stats bar already anchors the foot, so centring
     only pushed ~100px of dead air above the eyebrow */
  align-items:stretch;
  min-height:clamp(420px,54vh,540px);
  /* the boxed container only contributes the kit's 10px, which leaves the
     copy flush to the screen edge below about 1000px */
  padding:clamp(2.5rem,5vw,4.75rem) clamp(1.25rem,3vw,2rem) 0 !important;
  overflow:hidden;
}
/* directional scrim: the headline sits left, so the image stays readable right */
.hs-hero-scrim::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* corner falloff: a specular highlight off the rotor rides under the
       eyebrow, the smallest text in the hero. Flattening just that hotspot
       takes it from 1.3:1 to 4.8:1 and keeps the exact logo flame, where
       darkening the whole scrim would have thrown the photograph away. */
    radial-gradient(76% 108% at 2% 6%,
      rgba(10,8,7,.86) 0%,
      rgba(10,8,7,0)   58%),
    linear-gradient(104deg,
      rgba(10,8,7,.96) 0%,
      rgba(10,8,7,.90) 36%,
      /* the lede's tail lands around 64-66% at every desktop width, and at
         .58 it cleared AA by only 0.24 - one copy edit in the builder from
         failing. .68 here costs the photograph about 10% of its peak
         brightness and buys a point and a quarter of contrast. */
      rgba(10,8,7,.68) 62%,
      rgba(10,8,7,.24) 100%),
    radial-gradient(120% 80% at 0% 100%, rgba(234,64,31,.16) 0%, rgba(234,64,31,0) 60%);
}
/* a short fade at the foot so the band below meets it cleanly */
.hs-hero-scrim::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:90px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,7,0) 0%,rgba(10,8,7,.55) 100%);
}
/* Stacking order for the whole hero, stated once:
     0  media layer (photograph, and the video when one is present)
     1  the scrim gradients above
     2  the copy                                                          */
/* Deliberately NOT z-index on .e-con-inner. A flex item with a z-index
   creates a stacking context, and the media layer lives inside that wrapper -
   so giving it z-index:2 buried the ::before scrim underneath the photograph
   no matter what z-index the photograph itself carried. The scrim rendered,
   it just painted below the image and did nothing.

   Leaving the wrapper with z-index:auto and unpositioned keeps its children
   in the hero's own stacking context, where the three layers order properly,
   and keeps .hs-hero-scrim the containing block for the media layer's inset. */
.hs-hero-scrim .e-con-inner > *:not(.hs-hero-bg){position:relative;z-index:2}
.hs-hero-scrim::before,
.hs-hero-scrim::after{z-index:1}

/* ---------------------------------------------------------------------
   Hero media layer

   The photograph used to be the container's own background-image, which
   made it impossible to grade: any filter on the container also filters
   the headline sitting on top of it. Moving it into its own element
   solves that and gives the video, when one exists, somewhere to mount.

   Two things are being corrected here. The rotor is photographed in a
   workshop full of safety-yellow tooling, which fights the flame palette
   head on; and a dead-still hero reads as flat next to the reference the
   client liked. Both are handled in CSS so the original file in the
   media library is never re-encoded.
   --------------------------------------------------------------------- */
.hs-hero-scrim{background-color:#0A0807}

.hs-hero-scrim .hs-hero-bg{
  position:absolute !important;
  inset:0;
  z-index:0;
  overflow:hidden;
  margin:0 !important;
  width:auto !important;
  pointer-events:none;
}
.hs-hero-scrim .hs-hero-bg > .elementor-widget-container{height:100%}

.hs-hero-bg .hs-hero-img,
.hs-hero-bg .hs-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 44%;   /* bright disc clears the headline column */
  /* Grade to warm steel. grayscale first so the yellow is gone before
     sepia re-tints, otherwise the tooling turns orange rather than
     neutral and reads as a colour cast instead of a treatment. */
  filter:grayscale(1) sepia(.42) hue-rotate(-14deg) saturate(1.45)
         contrast(1.08) brightness(.80);
}

/* Slow drift. Transform only, so it composites and never triggers layout.
   26s alternate is below the threshold at which the eye reads it as
   movement frame to frame, but the hero is visibly alive over a few
   seconds of dwell - which is the whole point of the reference site. */
@keyframes hs-hero-drift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to  {transform:scale(1.13) translate3d(-1.4%,-1.1%,0)}
}
.hs-hero-bg .hs-hero-img{
  animation:hs-hero-drift 26s ease-in-out infinite alternate;
  will-change:transform;
}

/* A single specular pass, as if a high bay light were tracking across the
   machined surfaces. Kept under 8% opacity: at anything brighter it stops
   reading as a reflection and starts reading as a banner effect. */
.hs-hero-bg .hs-hero-sweep{
  position:absolute;
  inset:-25% -60%;
  background:linear-gradient(74deg,
    rgba(255,196,150,0)    44%,
    rgba(255,196,150,.075) 50%,
    rgba(255,196,150,0)    56%);
  animation:hs-hero-sweep 19s linear infinite;
  will-change:transform;
}
@keyframes hs-hero-sweep{
  from{transform:translate3d(-42%,0,0)}
  to  {transform:translate3d(42%,0,0)}
}

/* The video is optional and additive. It is only mounted when a file is
   actually present on disk (see hs_hero_video_src in functions.php), it
   starts hidden, and it is faded in only once the browser reports it can
   play through. So a blocked autoplay, a data-saver connection or no file
   at all all land on the same place: the photograph, already correct. */
.hs-hero-bg .hs-hero-video{
  opacity:0;
  transition:opacity 1.1s ease;
}
.hs-hero-bg .hs-hero-video.is-live{opacity:1}
/* once the video carries the frame, stop paying for the still's animation */
.hs-hero-bg:has(.hs-hero-video.is-live) .hs-hero-img{animation:none}
.hs-hero-bg:has(.hs-hero-video.is-live) .hs-hero-sweep{opacity:.5}

/* The global reduced-motion rule collapses animation-duration, which with
   `alternate` would strand the drift on its end frame. Pin both layers to
   a settled state and drop the video entirely. */
@media(prefers-reduced-motion:reduce){
  .hs-hero-bg .hs-hero-img{
    animation:none !important;
    transform:scale(1.04);
  }
  .hs-hero-bg .hs-hero-sweep{display:none}
  .hs-hero-bg .hs-hero-video{display:none}
}

/* measure: an unconstrained line ran to 1180px, roughly 140 characters */
.hs-hero-scrim h1{
  font-size:clamp(2.35rem,5.1vw,4rem) !important;
  line-height:1.03 !important;
  /* 24ch wrapped this headline onto three lines; two needs about 940px */
  max-width:min(100%,940px);
  margin:.4rem 0 0 !important;
}
/* Elementor sets max-width:100% on the widget, so the reading measure has to be
   forced or the line runs the full 1180px container - about 140 characters. */
/* The lede ran to 612px against a 940px headline and a 1180px stats bar - three
   different right edges. Widening it to 780px steps the three cleanly. */
.hs-hero-scrim .elementor-widget-text-editor,
.hs-hero-scrim .elementor-widget-text-editor .elementor-widget-container{
  max-width:min(100%,780px) !important;
}
.hs-hero-scrim .elementor-widget-text-editor{
  font-size:clamp(1rem,1.25vw,1.1rem);
  line-height:1.66;
  margin-top:.5rem;
}
.hs-hero-scrim .hs-eyebrow{font-size:.84rem !important;letter-spacing:.24em !important}
.hs-hero-scrim .hs-rule-flame{margin-top:1.1rem}

/* Vertical rhythm is set here rather than left to the container gap plus each
   widget's own padding. Measured ink-to-ink, that combination gave 26/20/28/59/51
   - the button row alone carried 24px of padding on top of the 20px gap. */
/* the page data still carries a 96px top padding on the inner box from the
   original build; the outer padding above was stacking on top of it */
.hs-hero-scrim > .e-con-inner{padding:0 !important}
.hs-hero-scrim .e-con-inner{gap:0 !important;justify-content:flex-start}
.hs-hero-scrim .e-con-inner > *{margin:0 !important}
.hs-hero-scrim .e-con-inner > * + *{margin-top:1.05rem !important}
.hs-hero-scrim .elementor-widget-text-editor{margin-top:1.3rem !important}
/* the last paragraph's trailing margin sat inside the widget box, so the copy
   read 46px above the buttons while the boxes were 31px apart */
.hs-hero-scrim .elementor-widget-text-editor p:last-child{margin-bottom:0}
.hs-hero-scrim .elementor-widget-text-editor p{margin-top:0}
.hs-hero-scrim .e-con-inner > .e-con{
  padding:0 !important;
  margin-top:1.95rem !important;
}
.hs-hero-scrim .e-con-inner > .hs-strip{
  margin-top:2.3rem !important;
  padding:1.65rem 0 1.75rem !important;
}

/* both buttons must share one height; the ghost's 2px border was adding 4px */
.hs-hero-scrim .elementor-button{
  box-sizing:border-box;
  min-height:54px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.8rem;
  font-size:1.02rem;
}

/* Aligned with the copy above it. The earlier negative-margin bleed only moved
   the left edge, so the rule began 32px left of the headline. */
.e-con.hs-strip{
  margin:0 !important;
  padding:1.9rem 0 2.1rem !important;
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
  background:linear-gradient(180deg,rgba(10,8,7,.14) 0%,rgba(10,8,7,.38) 100%);
}
.hs-strip .hs-strip-k{
  font-size:.72rem;letter-spacing:.2em;
}
.hs-strip .hs-strip-v{font-size:1.06rem}

/* ---- hero: tablet ---- */
@media(max-width:1024px){
  .hs-hero-scrim{min-height:clamp(460px,64vh,560px)}
  .hs-hero-scrim h1{max-width:min(100%,760px)}
  .hs-hero-scrim .elementor-widget-text-editor,
  .hs-hero-scrim .elementor-widget-text-editor .elementor-widget-container{
    max-width:min(100%,680px) !important;
  }
}

/* The 104deg scrim trades darkness on the left for the photograph on the
   right, and that trade only holds while the copy occupies the left half.
   Below 1200 it does not: the lede's width cap is lifted at 1024 while the
   viewport is still narrow, so its tail runs out into the light end of the
   gradient - measured 2.25:1 at 768 and 3.76:1 at 1025.

   Through this range the scrim carries an even weight instead, and the
   photograph survives on a lighter middle stop rather than on side-to-side
   falloff. The phone block below overrides it again. */
@media(max-width:1200px){
  .hs-hero-scrim::before{
    background:
      linear-gradient(168deg,
        rgba(10,8,7,.90) 0%,
        rgba(10,8,7,.74) 46%,
        rgba(10,8,7,.88) 100%),
      radial-gradient(120% 70% at 0% 100%, rgba(234,64,31,.16) 0%, rgba(234,64,31,0) 62%);
  }
}

/* ---- hero: phone ---- */
@media(max-width:767px){
  .hs-hero-scrim{
    min-height:0;
    align-items:flex-start;
    /* 1rem, not 1.25 - the logo and every section below sit on 16px */
    padding:2.75rem 1rem 0 !important;
  }
  /* on a narrow column the left-weighted scrim leaves the foot too light */
  .hs-hero-scrim::before{
    background:
      /* was .86/.78/.93, which left the rotor at 0.03 luminance - present in
         the markup and invisible on the device. Lightened to the point the
         tightest text still clears AA, measured, not guessed. */
      linear-gradient(180deg,rgba(10,8,7,.80) 0%,rgba(10,8,7,.68) 45%,rgba(10,8,7,.90) 100%),
      radial-gradient(120% 60% at 0% 100%, rgba(234,64,31,.18) 0%, rgba(234,64,31,0) 62%);
  }
  .hs-hero-scrim::after{display:none}
  .hs-hero-scrim h1{max-width:none;font-size:clamp(2rem,8.4vw,2.6rem) !important}
  .hs-hero-scrim .elementor-widget-text-editor,
  .hs-hero-scrim .elementor-widget-text-editor .elementor-widget-container{
    max-width:none !important;
  }
  .hs-hero-scrim .elementor-widget-text-editor{margin-top:1.1rem}
  .hs-hero-scrim .elementor-button{width:100%;min-height:50px;font-size:.96rem}
  .hs-hero-scrim .elementor-widget-button{width:100%}

  /* A 1224x816 landscape frame cropped into a 375x1084 portrait box shows a
     22% slice of its own width. At 62% that slice lands on bare shaft and
     reads as grey noise; 42% puts the compressor disc in it, which is the
     part that is recognisably a turbine at a glance. */
  .hs-hero-bg .hs-hero-img,
  .hs-hero-bg .hs-hero-video{object-position:42% 40%}
  /* the drift is a desktop nicety - on a phone it costs battery for a crop
     too tight to read the movement as anything but shimmer */
  .hs-hero-bg .hs-hero-img{animation:none;transform:scale(1.03)}
  .hs-hero-bg .hs-hero-sweep{display:none}
  .hs-strip .hs-strip-v{font-size:1rem}
}
@media(max-width:400px){
  .hs-hero-scrim h1{font-size:1.95rem !important}
}

/* ---- value cards ("Why Choose Us") ----
   Inline SVG rather than the old blue PNGs, which were the main thing pulling
   the page away from the brand palette. */
.hs-vcard{
  background:var(--hs-white);
  height:100%;
  padding:2.5rem 2rem 2.6rem;
  display:flex;flex-direction:column;
  text-align:left;
  position:relative;
  transition:box-shadow .22s var(--hs-ease),transform .22s var(--hs-ease);
}
.hs-vcard::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--hs-gradient);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--hs-ease);
}
.hs-vcard:hover{box-shadow:var(--hs-shadow-lift);transform:translateY(-3px)}
.hs-vcard:hover::after{transform:scaleX(1)}

.hs-vcard-ico{
  width:52px;height:52px;border-radius:3px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(234,64,31,.12),rgba(243,168,24,.14));
  border:1px solid rgba(234,64,31,.22);
  margin-bottom:1.5rem;
}
.hs-vcard-ico svg{
  width:26px;height:26px;
  fill:none;stroke:var(--hs-flame-deep);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.hs-vcard h3{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.4rem;line-height:1.15;
  color:var(--hs-graphite-900);
  margin:0 0 .75rem;
}
.hs-vcard p{
  font-size:.97rem;line-height:1.65;color:var(--hs-steel-500);margin:0;
}
@media(max-width:1024px){
  .hs-vcard{padding:2.1rem 1.7rem 2.2rem}
}

/* Cards: a flame rule wipes in on hover. */
.hs-card{
  background:var(--hs-white);
  position:relative;
  transition:box-shadow .2s var(--hs-ease);
}
.hs-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--hs-gradient);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--hs-ease);
}
.hs-card:hover{box-shadow:var(--hs-shadow-lift)}
.hs-card:hover::after{transform:scaleX(1)}

/* Icon tile */
.hs-icon-tile .elementor-icon{
  background:linear-gradient(140deg,var(--hs-flame),var(--hs-ember));
  color:var(--hs-white);
  border-radius:var(--hs-radius);
}

/* Specification lists - the part indexes.
   Monospace is not decoration here: these are catalogue designations. */
.hs-spec ul{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:2.5rem;
}
.hs-spec li{
  break-inside:avoid;
  position:relative;
  padding:.4rem 0 .4rem 1.15rem;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.87rem;line-height:1.45;
}
.hs-spec li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:5px;height:1px;background:var(--hs-flame);
}
@media(max-width:767px){ .hs-spec ul{columns:1} }

/* Unit-fitment chips */
.hs-chip{
  display:inline-block;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.83rem;font-weight:500;
  border:1px solid var(--hs-graphite-700);
  background:var(--hs-graphite-800);
  color:var(--hs-white);
  border-radius:2px;
  padding:.34rem .6rem;margin:0 .45rem .45rem 0;
  white-space:nowrap;
}

/* Forms */
.elementor-field-group .elementor-field{
  border-radius:var(--hs-radius);
  transition:border-color .15s var(--hs-ease),box-shadow .15s var(--hs-ease);
}
.elementor-field-group .elementor-field:focus{
  border-color:var(--hs-flame) !important;
  box-shadow:var(--hs-focus);
  outline:none;
}
.elementor-message.elementor-message-danger{color:var(--hs-error)}

/* Tabs */
.e-n-tabs-heading .e-n-tab-title[aria-selected="true"]{
  box-shadow:inset 0 -3px 0 0 var(--hs-flame);
}

/* Dark bands */
.hs-band-flame{
  background:linear-gradient(100deg,
    var(--hs-flame-pressed) 0%,
    var(--hs-flame) 42%,
    var(--hs-ember) 72%,
    var(--hs-amber) 100%);
  position:relative;
  overflow:hidden;
}
/* Measured against the gradient, white text scores 6.1:1 on the pressed-flame
   end, 4.0 at the flame stop, 3.5 at ember and 2.0 on the amber. So the right
   half of this band cannot legally carry body copy at all - which is exactly
   why every CTA had its content jammed into the left third with a few hundred
   pixels of dead orange beside it.

   Rather than flatten the gradient and lose the brand's one loud moment, the
   copy column gets a graphite wash that fades out before the amber begins.
   The text side becomes safely dark, the decorative side stays vivid, and the
   white button chip - whose own label is #B82E14 on white at 6.1:1 - is the
   only thing that sits over the bright end. */
.hs-band-flame::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(20,16,14,.34) 0%,
    rgba(20,16,14,.28) 40%,
    rgba(20,16,14,.04) 70%,
    rgba(20,16,14,0)   78%);
}
/* A fine diagonal hatch, at 3.5% white. Enough to stop 370px of flat gradient
   reading as a printer test page, not enough to notice as a pattern. */
.hs-band-flame::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(58deg,
    rgba(255,255,255,.035) 0 1px,
    rgba(255,255,255,0)    1px 9px);
}
.hs-band-flame > *{position:relative;z-index:1}

/* ---- layout ----------------------------------------------------------
   The old grid was .9fr/1.1fr with justify-content:flex-end on the right
   cell. That never did anything: an Elementor button widget is display:block
   and filled the whole 618px track, so the anchor sat at its left edge with
   444px of empty band to its right. Sizing the action column to its content
   is what actually right-aligns it. */
.hs-band-flame .hs-grid-2{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:clamp(2rem,5vw,5rem) !important;
  align-items:center !important;
}
.hs-band-flame .hs-grid-2 > .e-con:last-child{
  align-items:flex-end;
  justify-content:center;
  gap:.9rem;
}
/* Both cells inherit the kit's 50px/20px container padding, which added 70px
   of height to the band and seated the content low because the top and bottom
   values differ. The band's own 56px already does this job. */
.hs-band-flame .hs-grid-2 > .e-con{padding-block:0 !important}
.hs-band-flame .elementor-widget-button{width:auto !important}
/* the secondary path: quieter than the button, but not so quiet it reads as
   a caption. Mono, because it is a number to be dialled. */
.hs-band-flame .cta-tel{width:auto !important;margin-top:.35rem}
.hs-band-flame .cta-tel p{margin:0}
.hs-band-flame .cta-tel a{
  font-family:"IBM Plex Mono",monospace;
  font-size:.86rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.hs-band-flame .cta-tel a:hover{color:#fff;border-bottom-color:#fff}
.hs-band-flame .elementor-button{
  padding:1.05rem 2.3rem;
  font-size:.95rem;
  letter-spacing:.12em;
  white-space:nowrap;
}
/* Capping the copy container, not the text widget: Elementor writes a
   per-element max-width:100% at three-class specificity that beats anything
   scoped to the widget class. Without a cap the copy simply expanded into the
   space the button gave back and ran to 107 characters a line - trading dead
   orange for an unreadable measure. 620px is about 72 characters at 17px. */
.hs-band-flame .hs-grid-2 > .e-con:first-child{max-width:540px}
.hs-band-flame h2{
  /* 540px makes the headline wrap to two lines again, which is how it was
     drawn originally and carries far more weight than one thin line floating
     in a 333px band. 540px is also ~62 characters of body copy at 17px. */
  font-size:clamp(1.9rem,3.4vw,3rem) !important;
  line-height:1.04 !important;
  margin-bottom:.9rem;
}
/* The copy column is capped at a fixed 540px, so the narrower the band the
   larger a share of it the text occupies - at 900px wide the copy runs to 60%
   and crosses the wash's 64% falloff, dropping the body to 3.9:1. Between the
   stacking breakpoint and 1200 the wash therefore reaches further across. */
@media(min-width:821px) and (max-width:1200px){
  .hs-band-flame::before{
    background:linear-gradient(100deg,
      rgba(20,16,14,.34) 0%,
      rgba(20,16,14,.30) 52%,
      rgba(20,16,14,.06) 88%);
  }
}

@media(max-width:820px){
  .hs-band-flame .hs-grid-2{
    grid-template-columns:1fr !important;
    gap:1.9rem !important;
  }
  .hs-band-flame .hs-grid-2 > .e-con:last-child{align-items:flex-start}
  /* Stacked, the copy spans the full width and so crosses the bright end of
     the gradient, where the body measured 4.40:1. The horizontal falloff is
     no use once the columns stack, so the wash goes flat and a little
     heavier. */
  .hs-band-flame::before{
    background:linear-gradient(180deg,
      rgba(20,16,14,.36) 0%,
      rgba(20,16,14,.30) 60%,
      rgba(20,16,14,.34) 100%);
  }
}
.hs-band-flame h1,.hs-band-flame h2,.hs-band-flame h3{color:#fff}
.hs-band-flame p{color:rgba(255,255,255,.92)}
.hs-band-flame .elementor-button{background-color:#fff;color:var(--hs-flame-pressed)}
.hs-band-flame .elementor-button:hover{background-color:var(--hs-graphite-900);color:#fff}

.hs-band-ink{background:var(--hs-graphite-900)}
.hs-band-mist{background:var(--hs-mist-100)}

/* ============================================================
   Layout helpers.
   Grid is declared here rather than through Elementor's flex controls
   so column behaviour is deterministic and identical on every page.
   ============================================================ */
/* Specificity, not !important. Elementor hides an inactive tab panel with
   display:none, and an !important display rule here would override that and
   render every panel at once. Never put these classes on a [role=tabpanel]. */
.e-con.hs-grid-4,
.e-con.hs-grid-3,
.e-con.hs-grid-2,
.e-con.hs-strip{align-items:stretch}
.e-con.hs-grid-4:not([role]),
.e-con.hs-grid-3:not([role]),
.e-con.hs-grid-2:not([role]),
.e-con.hs-strip:not([role]){display:grid}
/* padding:0 is load-bearing. These grids paint a background to create the 1px
   rules between cells, so any inherited container padding (the kit default is
   50/10/20/10) shows up as a grey band above the row. */
.e-con.hs-grid-4,
.e-con.hs-grid-3,
.e-con.hs-grid-2{padding:0 !important}
/* ...and the same for the containers nested one level inside them. The kit
   gives every container 10px of horizontal padding, which on the flame CTA
   band pushed its heading to 26px while everything above and below it sat
   on 16. The grid gap owns the spacing between cells, not the cells. */
.e-con.hs-grid-4 > .e-con,
.e-con.hs-grid-3 > .e-con,
.e-con.hs-grid-2 > .e-con{padding-inline:0 !important}
.e-con.hs-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hs-mist-200)}
.e-con.hs-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hs-mist-200)}
.e-con.hs-grid-2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem}
.hs-grid-4 > *,
.hs-grid-3 > *{margin:0}

/* the hero statistics strip */
.e-con.hs-strip{
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.16);
  gap:0;
}
.hs-strip > *{
  border-right:1px solid rgba(255,255,255,.16);
  padding:0 1.6rem !important;
  margin:0 !important;
}
.hs-strip > *:first-child{padding-left:0 !important}
.hs-strip > *:last-child{border-right:0}
.hs-strip .hs-strip-k{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:.74rem;color:var(--hs-flame);margin:0 0 .35rem;
}
.hs-strip .hs-strip-v{color:#fff;font-weight:500;line-height:1.35;margin:0;font-size:1.02rem}

@media(max-width:1024px){
  .e-con.hs-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .e-con.hs-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-con.hs-grid-2{grid-template-columns:1fr;gap:2.5rem}
  /* stacked rows need their own vertical rhythm: the desktop cells carry only
     horizontal padding, so two rows would otherwise sit flush together */
  .e-con.hs-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem}
  .hs-strip > *{padding:0 1.25rem !important}
  .hs-strip > *:nth-child(2n){border-right:0}
  .hs-strip > *:nth-child(2n+1){padding-left:0 !important}
}
@media(max-width:560px){
  .e-con.hs-grid-4,.e-con.hs-grid-3{grid-template-columns:1fr}
  .e-con.hs-strip{grid-template-columns:1fr;row-gap:1.25rem}
  .hs-strip > *{border-right:0;padding:0 !important}
  .hs-strip > * + *{
    padding-top:1.25rem !important;
    border-top:1px solid rgba(255,255,255,.12);
  }
}

/* ============================================================
   Header
   ============================================================ */
/* Sticky has to sit on the wrapper, not on this element. Elementor renders
   the header as <header class="elementor"> wrapping a container, and the
   wrapper shrink-wraps to exactly the container's height - so a sticky child
   has no room to travel inside it and scrolls away with the parent. The rule
   was here from the start and never once held the header in place. */
header.elementor{position:sticky;top:0;z-index:900}
.hs-header{
  position:sticky;top:0;z-index:900;
  background:rgba(20,16,14,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* The site-logo widget shipped em-based sizing that collapsed it to zero width,
   so its box is sized here instead. */
/* The wordmark carries two lines - HORIZON AL-SAHM over INDUSTRIAL PRODUCTS
   LLC - and at 46px the second line rendered about 6px tall, which is not
   readable at any viewing distance.

   The bar is 75px and was 14px padding + 46px logo + 14px + 1px border, so
   the logo was already filling every pixel available to it. The height comes
   back from the padding rather than from the bar: 8 + 58 + 8 + 1 is the same
   75px, with the logo 26% larger. The quote button is 44px and still sits
   comfortably inside 58. */
.hs-header .e-con-inner{padding-block:8px}
.hs-header .hs-logo{flex:0 0 auto;line-height:0}
.hs-header .hs-logo img{height:58px;width:auto;max-width:none;display:block}
.hs-header .elementor-widget-theme-site-logo{width:auto}

/* the bar stays on one line whatever the menu length */
.hs-header .e-con-inner{flex-wrap:nowrap}
.hs-header .elementor-widget-nav-menu{width:auto}
/* A full-width child container defaults to 100% of the bar, which overruns the
   right edge and stops space-between from seating the button. Size to content. */
.hs-header .e-con-inner > .e-con{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
}
/* Equal gaps come from the list, not from per-item padding: the dropdown caret
   widens "Our Products", so padding-based spacing reads as uneven.
   Structure note: elementor-nav-menu--main sits on the <nav>; the <ul> is only
   .elementor-nav-menu, so selectors must go through the nav. */
.hs-header nav.elementor-nav-menu--main > ul.elementor-nav-menu{
  display:flex;
  align-items:center;
  gap:2.1rem;
}
.hs-header nav.elementor-nav-menu--main > ul > li{
  margin:0 !important;padding:0 !important;
}
.hs-header nav.elementor-nav-menu--main > ul > li > a.elementor-item{
  position:relative;
  display:inline-flex;align-items:center;gap:.38rem;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:1.04rem;
  line-height:1.2;
  color:#D5CCC6;
  padding:.45rem 0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  transition:color .18s var(--hs-ease);
}
.hs-header nav.elementor-nav-menu--main > ul > li > a.elementor-item:hover,
.hs-header nav.elementor-nav-menu--main > ul > li > a.elementor-item.elementor-item-active{
  color:#FFFFFF;
  background:transparent !important;
}

/* Elementor already ships an underline pointer on this nav (e--pointer-underline),
   so recolour its element rather than drawing a competing one. */
.hs-header nav.e--pointer-underline .elementor-item:after{
  background:var(--hs-gradient) !important;
  height:2px !important;
  bottom:0 !important;
}

/* keep the caret from adding width of its own */
.hs-header nav.elementor-nav-menu--main .sub-arrow{
  margin:0 !important;padding:0 !important;
  display:inline-flex;align-items:center;
  opacity:.7;
}
.hs-header nav.elementor-nav-menu--main .sub-arrow svg,
.hs-header nav.elementor-nav-menu--main .sub-arrow i{
  width:11px;height:11px;display:block;font-size:11px;
}

/* --- the Products dropdown ---
   Submenu links carry .elementor-sub-item, NOT .elementor-item, so a rule
   written for .elementor-item never reaches them and they fall back to
   Elementor's default #33373D on a dark panel. */
.hs-header .elementor-nav-menu--main .sub-menu,
.hs-header ul.elementor-nav-menu--dropdown{
  background:#1A1512 !important;
  border:1px solid rgba(255,255,255,.09);
  border-top:2px solid var(--hs-flame);
  border-radius:0 0 3px 3px;
  box-shadow:0 26px 50px -14px rgba(0,0,0,.8) !important;
  padding:.35rem 0 !important;
  min-width:262px;
  z-index:901;
}
.hs-header .elementor-sub-item{
  color:#D5CCC6 !important;
  background:transparent !important;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.95rem !important;
  line-height:1.35 !important;
  padding:.7rem 1.15rem !important;
  border:0 !important;
  white-space:normal;
  transition:background .15s var(--hs-ease),color .15s var(--hs-ease),
             padding-left .15s var(--hs-ease);
}
.hs-header .elementor-sub-item:hover,
.hs-header .elementor-sub-item:focus-visible,
.hs-header .elementor-sub-item.elementor-item-active{
  color:#FFFFFF !important;
  background:rgba(234,64,31,.18) !important;
  padding-left:1.45rem !important;
}
.hs-header .sub-arrow,.hs-header .elementor-item .sub-arrow i{color:inherit}

/* --- the burger ---
   Elementor renders the toggle as two inline SVGs, so the icon is drawn here
   instead: ::before is the top bar and casts the middle bar as a flame-coloured
   box-shadow, ::after is the bottom bar. Open state folds them into an X. */
.hs-header .elementor-menu-toggle{
  position:relative;
  width:48px;height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:background .2s var(--hs-ease),border-color .2s var(--hs-ease);
}
.hs-header .elementor-menu-toggle svg,
.hs-header .elementor-menu-toggle i{display:none !important}
.hs-header .elementor-menu-toggle::before,
.hs-header .elementor-menu-toggle::after{
  content:"";
  position:absolute;left:50%;margin-left:-11px;
  width:22px;height:2px;border-radius:2px;
  background:#FFFFFF;
  transition:transform .3s var(--hs-ease),top .3s var(--hs-ease),
             box-shadow .2s var(--hs-ease),background .2s var(--hs-ease);
}
.hs-header .elementor-menu-toggle::before{
  top:13px;
  box-shadow:0 8px 0 0 var(--hs-flame);
}
.hs-header .elementor-menu-toggle::after{top:29px}

.hs-header .elementor-menu-toggle:hover{
  background:rgba(234,64,31,.16);
  border-color:var(--hs-flame);
}
.hs-header .elementor-menu-toggle:focus-visible{
  outline:3px solid var(--hs-amber);outline-offset:3px;
}

/* open -> X. Forced: the base bar rule kept winning the cascade even though
   this selector matches, and the toggle only has these two pseudo-elements to
   work with, so there is no cheaper way to express the open state. */
.hs-header .elementor-menu-toggle[aria-expanded="true"]::before,
.hs-header .elementor-menu-toggle.elementor-active::before{
  top:21px !important;
  transform:rotate(45deg) !important;
  box-shadow:none !important;
  background:var(--hs-flame) !important;
}
.hs-header .elementor-menu-toggle[aria-expanded="true"]::after,
.hs-header .elementor-menu-toggle.elementor-active::after{
  top:21px !important;
  transform:rotate(-45deg) !important;
  background:var(--hs-flame) !important;
}

/* --- header responsive --- */
@media(max-width:1280px){
  .hs-header nav.elementor-nav-menu--main > ul.elementor-nav-menu{gap:1.6rem}
  .hs-header nav.elementor-nav-menu--main > ul > li > a.elementor-item{font-size:.98rem}
}
@media(max-width:1100px){
  /* here the 44px button sets the bar height, not the logo - so the logo
     can grow to meet it at no cost, and the padding stays as it was: the
     8px reclaimed on desktop was only needed because the logo was the
     constraint there. Without this the bar would drop 73px to 61px. */
  .hs-header .e-con-inner{padding-block:14px}
  .hs-header .hs-logo img{height:44px}
}
@media(max-width:767px){
  .hs-header{padding:0 16px}
  .hs-header .e-con-inner{gap:.6rem;padding:9px 0}
  .hs-header .e-con-inner > .e-con{flex:0 1 auto;min-width:0}
  /* same again: the 40px burger is the constraint on a phone */
  .hs-header .hs-logo img{height:40px}
  /* the quote button is dropped on phones; Contact sits in the menu instead */
  .hs-header .elementor-widget-button{display:none !important}
}
@media(max-width:400px){
  .hs-header .hs-logo img{height:36px}
  .hs-header .elementor-menu-toggle{width:44px;height:40px}
  .hs-header .elementor-menu-toggle::before{top:11px}
  .hs-header .elementor-menu-toggle::after{top:27px}
  .hs-header .elementor-menu-toggle[aria-expanded="true"]::before,
  .hs-header .elementor-menu-toggle[aria-expanded="true"]::after{top:19px !important}
}

/* --- the panel --- */
.hs-header nav.elementor-nav-menu--dropdown{
  background:#12100E !important;
  border-top:2px solid var(--hs-flame);
  box-shadow:0 24px 44px -12px rgba(0,0,0,.8);
  max-height:calc(100vh - 64px);
  overflow-y:auto;
}
.hs-header nav.elementor-nav-menu--dropdown a.elementor-item,
.hs-header nav.elementor-nav-menu--dropdown a.elementor-sub-item{
  color:#D5CCC6 !important;
  background:transparent !important;
  font-size:1rem !important;
  padding:.9rem 1.25rem !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  text-transform:uppercase;letter-spacing:.07em;
}
.hs-header nav.elementor-nav-menu--dropdown a.elementor-sub-item{
  padding-left:2.25rem !important;font-size:.93rem !important;
}
.hs-header nav.elementor-nav-menu--dropdown a:hover{
  background:rgba(234,64,31,.18) !important;color:#fff !important;
}

/* ============================================================
   Footer
   Overrides are scoped through .hs-footer plus the Elementor widget class,
   because Elementor's own selectors (.elementor-widget-nav-menu
   .elementor-nav-menu--main .elementor-item) and the kit's graphite heading
   colour both outrank a plain .hs-footer a.
   ============================================================ */
.hs-footer{
  background:
    radial-gradient(90% 120% at 8% -10%, rgba(234,64,31,.16) 0%, rgba(234,64,31,0) 62%),
    radial-gradient(70% 100% at 100% 0%, rgba(243,168,24,.07) 0%, rgba(243,168,24,0) 55%),
    var(--hs-graphite-900);
  color:#C9BFB8;
  position:relative;
}
.hs-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--hs-gradient);
}

/* --- brand column --- */
.hs-footer img{max-height:74px;width:auto}
.hs-footer .elementor-widget-text-editor{
  color:#B3A8A1;
  font-size:1.06rem;
  line-height:1.7;
  max-width:30ch;
  margin-top:1.6rem;
}
.hs-footer p{color:#B3A8A1}

/* --- column headings --- */
.hs-footer .elementor-widget-heading .elementor-heading-title{
  color:#FFFFFF;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 1.75rem;
  position:relative;
  padding-bottom:1rem;
}
.hs-footer .elementor-widget-heading .elementor-heading-title::after{
  content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;
  background:var(--hs-gradient);
}

/* --- links: sized for comfortable reading, no column rules --- */
.hs-footer .elementor-nav-menu .elementor-item,
.hs-footer .elementor-nav-menu a.elementor-item{
  color:#C4B9B2;
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size:1.02rem;
  line-height:1.5;
  padding:.5rem 0;
  background:transparent;
  border:0;
  display:block;
  transition:color .18s var(--hs-ease),padding-left .18s var(--hs-ease);
}
.hs-footer .elementor-nav-menu .elementor-item:hover,
.hs-footer .elementor-nav-menu a.elementor-item:hover,
.hs-footer .elementor-nav-menu a.elementor-item.elementor-item-active{
  color:#FFFFFF;background:transparent;padding-left:.7rem;
}
.hs-footer .elementor-nav-menu .elementor-item:before,
.hs-footer .elementor-nav-menu .elementor-item:after{display:none !important}

/* one track: splitting this column into two made every long product name
   wrap to three lines inside ~150px */
.hs-col-products .elementor-nav-menu{columns:1}

/* --- services list --- */
.hs-footer .elementor-icon-list-item{margin-bottom:0}
.hs-footer .elementor-icon-list-text,
.hs-footer .elementor-icon-list-item > span{
  color:#C4B9B2;font-size:1.02rem;line-height:1.55;padding:.55rem 0;display:block;
}

/* --- contact column --- */
.hs-contact{list-style:none;margin:0;padding:0}
.hs-contact li{margin:0 0 1.35rem;line-height:1.5}
.hs-contact li:last-child{margin-bottom:0}
.hs-contact .hs-k{
  display:block;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:.76rem;color:var(--hs-flame);margin-bottom:.3rem;
}
.hs-contact a,.hs-contact .hs-v{
  color:#C4B9B2;font-size:1.02rem;text-decoration:none;
  transition:color .18s var(--hs-ease);
}
.hs-contact a:hover{color:#FFFFFF}

/* --- social --- */
.hs-footer .elementor-widget-social-icons{margin-top:1.9rem}
.hs-footer .elementor-social-icon{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:3px;
  width:46px;height:46px;
  transition:background .18s var(--hs-ease),border-color .18s var(--hs-ease),
             transform .18s var(--hs-ease);
}
.hs-footer .elementor-social-icon i,
.hs-footer .elementor-social-icon svg{
  color:#C9BFB8;fill:#C9BFB8;font-size:17px;transition:color .18s,fill .18s;
}
.hs-footer .elementor-social-icon:hover{
  background:var(--hs-flame);border-color:var(--hs-flame);transform:translateY(-3px);
}
.hs-footer .elementor-social-icon:hover i,
.hs-footer .elementor-social-icon:hover svg{color:#fff;fill:#fff}

/* --- layout: no vertical rules, they read as ragged when columns differ --- */
.e-con.hs-footer-grid{
  display:grid;
  grid-template-columns:1.55fr .95fr 1.35fr 1.15fr;
  gap:3rem 2.75rem;
  align-items:start;
  max-width:1180px;margin-inline:auto;width:100%;
  /* the kit's default container padding is 50/10/20/10 and lands here unless
     all four sides are named, which is where the dead band above the columns
     was coming from */
  padding:0 0 2.25rem !important;
}
.e-con.hs-col,
.e-con.hs-col-products{border-left:0;padding-left:0 !important}

.e-con.hs-footer-bottom{
  display:flex;justify-content:center;align-items:center;gap:1rem;
  border-top:1px solid rgba(255,255,255,.09);
  max-width:1180px;margin-inline:auto;width:100%;
  padding:1.6rem 0 !important;
}
.hs-footer-bottom p{font-size:.95rem;margin:0;color:#948A84;text-align:center}
.hs-footer-bottom a{
  color:#C4B9B2;text-decoration:none;
  border-bottom:1px solid rgba(234,64,31,.6);
  transition:color .18s var(--hs-ease),border-color .18s var(--hs-ease);
}
.hs-footer-bottom a:hover{color:var(--hs-flame);border-color:var(--hs-flame)}

@media(max-width:1100px){
  .e-con.hs-footer-grid{grid-template-columns:1fr 1fr;gap:3rem 2.5rem}
}
@media(max-width:640px){
  .e-con.hs-footer-grid{grid-template-columns:1fr;gap:2.6rem}
  .hs-footer img{max-height:62px}
  .e-con.hs-footer-bottom{flex-direction:column;gap:.6rem}
}

/* contact detail list */
.hs-dl{margin:0;border-top:1px solid var(--hs-mist-200)}
.hs-dl > div{
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--hs-mist-200);
}
.hs-dl dt{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.76rem;color:var(--hs-steel-500);padding-top:.22rem;margin:0;
}
.hs-dl dd{margin:0;font-size:1rem;color:var(--hs-graphite-700)}
.hs-dl a{color:var(--hs-flame-deep);text-decoration:none;font-weight:500}
.hs-dl a:hover{text-decoration:underline}

/* ============================================================
   Mobile
   ============================================================ */
@media(max-width:767px){
  .hs-spec li{font-size:.84rem}
  .elementor-button:not(.hs-header .elementor-button){width:100%;justify-content:center}
  .hs-header .elementor-button{width:auto}
  .hs-hero-scrim > .elementor-background-overlay{
    background:linear-gradient(180deg,
      rgba(10,8,7,.80) 0%,
      rgba(10,8,7,.92) 100%) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .elementor-button:hover{transform:none}
}

/* the previews were authored against short token names; alias them here so the
   ported component CSS needs no find-and-replace */
:root{
  --flame:var(--hs-flame); --flame-deep:var(--hs-flame-deep); --flame-press:var(--hs-flame-pressed);
  --ember:var(--hs-ember); --amber:var(--hs-amber); --gold:var(--hs-gold);
  --grad:var(--hs-gradient);
  --g900:var(--hs-graphite-900); --g850:#1A1512; --g800:var(--hs-graphite-800); --g700:var(--hs-graphite-700);
  --steel:var(--hs-steel-500); --steel3:var(--hs-steel-300);
  --canvas:var(--hs-canvas); --mist:var(--hs-mist-100); --mist2:var(--hs-mist-200); --line:#D8CEC7;
  --ease:var(--hs-ease);
}

/* ============================================================
   PAGE COMPONENTS - ported from the approved design previews.
   Everything above this point is header, hero, footer and tokens.
   ============================================================ */
.elementor-widget-html > .elementor-widget-container{width:100%}

/* ---------- proof bar: numbers, not adjectives ---------- */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:2.3rem;
  border-top:1px solid rgba(255,255,255,.14);padding:1.9rem 0 2rem;
  /* The plinth carries the stat labels, which are 11.5px in --steel3 and sit
     over the brightest part of the photograph on the right. .42 was enough
     against the old dark stock frame; against the rotor the far-right label
     measured 2.6:1, so the ramp now finishes at .74. Darkening behind them
     rather than lightening them keeps the labels quieter than the figures,
     which is the hierarchy the bar depends on. */
  background:linear-gradient(180deg,
    rgba(10,8,7,.20) 0%,
    rgba(10,8,7,.58) 55%,
    rgba(10,8,7,.74) 100%)}
.proof>div{padding:0 1.7rem;border-right:1px solid rgba(255,255,255,.14)}
.proof>div:first-child{padding-left:0}
.proof>div:last-child{border-right:0}
.proof .n{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:2.5rem;
  line-height:1;color:#fff;display:block}
.proof .n em{font-style:normal;color:var(--flame);font-size:1.5rem;vertical-align:.25em}
.proof .k{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--steel3);margin-top:.5rem}
@media(max-width:900px){
  .proof{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}
  .proof>div{padding:0 1.25rem}
  .proof>div:nth-child(2n){border-right:0}
  .proof>div:nth-child(2n+1){padding-left:0}
}
@media(max-width:560px){
  .hero-in{padding:2.75rem 20px 0}
  .proof{grid-template-columns:1fr;row-gap:1.4rem}
  .proof>div{border-right:0;padding:0}
  .proof>div+div{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12)}
  .hero-cta .btn{width:100%}
}

/* ---------- catalogue: photography leads ---------- */
.cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem}
.cat article{background:var(--g850);border:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.cat article:hover{border-color:rgba(234,64,31,.5);transform:translateY(-4px)}
.cat .shot{background:radial-gradient(80% 80% at 50% 40%,rgba(234,64,31,.10),rgba(234,64,31,0) 70%),#100D0B;
  padding:2.1rem 1.5rem;display:grid;place-items:center;border-bottom:1px solid rgba(255,255,255,.08)}
.cat .shot img{height:150px;width:auto;object-fit:contain;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.cat .body{padding:1.7rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.cat h3{color:#fff;font-size:1.32rem;line-height:1.15;margin-bottom:.6rem}
.cat .desc{color:#A79E98;font-size:.96rem;line-height:1.6}
.cat .meta{display:flex;align-items:center;gap:.6rem;margin:1.15rem 0 .9rem;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--steel3)}
.cat .count{background:rgba(234,64,31,.14);border:1px solid rgba(234,64,31,.4);
  color:#FFB9A5;border-radius:2px;padding:.25rem .5rem}
.fitrow{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.2rem}
.fitrow span{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:#D5CCC6;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:.22rem .45rem}
details{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding-top:1rem}
summary{cursor:pointer;list-style:none;font-family:"Barlow Condensed",sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.88rem;
  color:var(--flame);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.15rem;line-height:1;color:var(--flame)}
details[open] summary::after{content:"\00d7"}
summary:hover{color:#fff}
.idx{margin:.9rem 0 0;padding:0;list-style:none;
  columns:2;column-gap:1.5rem;border-top:1px solid rgba(255,255,255,.08)}
.idx li{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:#CFC6C0;
  padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.06);break-inside:avoid}
@media(max-width:980px){.cat{grid-template-columns:1fr;gap:1.25rem}
  .cat .shot img{height:130px}}

/* ---------- coverage table ---------- */
.cov{margin-top:2.5rem;border-top:2px solid var(--g900)}
.cov-row{display:grid;grid-template-columns:190px minmax(0,1fr) 100px;gap:1.5rem;
  padding:1.45rem 0;border-bottom:1px solid var(--mist2);align-items:center;
  transition:background .16s var(--ease)}
.cov-row:not(.head):hover{background:rgba(234,64,31,.035)}
.cov-row.head{padding:.7rem 0;border-bottom:1px solid var(--mist2)}
.cov-row.head span{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--steel)}
.cov-row b{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.25rem;color:var(--g900);letter-spacing:.03em}
.cov-codes{display:flex;flex-wrap:wrap;gap:.4rem}
.cov-codes span{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--g900);
  background:#fff;border:1px solid #D8CEC7;border-radius:2px;padding:.3rem .55rem;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.cov-row:hover .cov-codes span{border-color:rgba(234,64,31,.45)}
.cov-n{font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:var(--steel);text-align:right}
@media(max-width:760px){
  .cov-row{grid-template-columns:1fr;gap:.7rem}
  .cov-row.head{display:none}
  .cov-n{text-align:left}
}
.ind{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.ind span{border:1px solid #D8CEC7;background:#fff;border-radius:2px;
  padding:.52rem .9rem;font-size:.94rem;color:var(--g900)}

/* ---------- the argument ---------- */
.case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;margin-top:2.5rem}
.pull{border-left:3px solid transparent;border-image:var(--grad) 1;padding-left:1.75rem}
.pull p{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  font-size:1.55rem;line-height:1.18;color:var(--g900)}
.case-body p{color:var(--steel)}
.case-body p+p{margin-top:1.05rem}
@media(max-width:900px){.case{grid-template-columns:1fr;gap:2.2rem}}

/* ---------- page header: slim, not a hero ----------
   The full photographic hero belongs to the homepage. Interior pages get a
   compact dark band so the site keeps one dramatic opening, not nine. */
.phead{background:radial-gradient(90% 130% at 88% 0%,rgba(234,64,31,.15),rgba(234,64,31,0) 60%),var(--g900);
  padding:clamp(2.5rem,4.5vw,3.75rem) 0 clamp(2.75rem,4.5vw,3.5rem);position:relative}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--steel3);margin-bottom:1.1rem}
.crumb a{color:var(--steel3);text-decoration:none}
.crumb a:hover{color:#fff}
.crumb span{color:#5C534E;margin:0 .5rem}
.phead h1{color:#fff;font-size:clamp(2rem,4vw,3.15rem);line-height:1.05;
  /* 20ch broke a 52-character title over four lines; two needs ~780px */
  max-width:min(100%,780px)}
.phead .lede{color:#C4B9B2;max-width:62ch;margin-top:1.2rem}

/* quick facts under the title */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:2.1rem;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem}
.facts>div{padding:0 1.5rem;border-right:1px solid rgba(255,255,255,.14)}
.facts>div:first-child{padding-left:0}
.facts>div:last-child{border-right:0}
.facts dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--flame);margin-bottom:.35rem}
.facts dd{margin:0;color:#fff;font-size:.98rem;font-weight:500;line-height:1.4}
@media(max-width:820px){
  .facts{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}
  .facts>div{padding:0 1.1rem}
  .facts>div:nth-child(2n){border-right:0}
  .facts>div:nth-child(2n+1){padding-left:0}
}
@media(max-width:520px){.facts{grid-template-columns:1fr}.facts>div{border-right:0;padding:0}
  .facts>div+div{padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12)}}

/* ---------- spec cards: Purpose / Applications / Notes ----------
   The source copy is written as "Purpose: … Applications: … Characteristics: …"
   run together in one paragraph. Split into fields it becomes scannable. */
.range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem}
.spec{background:#fff;padding:2rem 1.9rem 2.1rem;display:flex;flex-direction:column;
  transition:background .2s var(--ease)}
.spec:hover{background:#fff}
.spec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;border-bottom:2px solid var(--g900);margin-bottom:1.15rem}
.spec-h h3{font-size:1.3rem}
.spec-h .tag{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--steel);
  white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}
.frow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:1rem;
  padding:.65rem 0;border-bottom:1px solid var(--mist2)}
.frow:last-of-type{border-bottom:0}
.frow dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:var(--steel);margin:0;padding-top:.18rem}
.frow dd{margin:0;font-size:.96rem;line-height:1.55;color:var(--g700)}
.apps{display:flex;flex-wrap:wrap;gap:.35rem}
.apps span{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--g900);
  border:1px solid var(--line);background:var(--canvas);border-radius:2px;padding:.22rem .45rem}
@media(max-width:860px){.range{grid-template-columns:1fr}}
@media(max-width:520px){.frow{grid-template-columns:1fr;gap:.2rem}}

/* ---------- selection guide ---------- */
.guide{margin-top:2.5rem;border-top:2px solid var(--g900);background:#fff;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.grow{display:grid;grid-template-columns:180px minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem;
  padding:1.15rem 1.4rem;border-bottom:1px solid var(--mist2);align-items:baseline}
.grow.head{background:var(--canvas)}
.grow.head span{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.71rem;color:var(--steel)}
.grow b{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.08rem;color:var(--g900);letter-spacing:.03em}
.grow p{font-size:.95rem;color:var(--g700)}
.grow .best{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--flame-deep)}
.grow:not(.head):hover{background:rgba(234,64,31,.035)}
@media(max-width:820px){
  .grow{grid-template-columns:1fr;gap:.45rem;padding:1.1rem 1.1rem}
  .grow.head{display:none}
}

/* ---------- services index ---------- */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem}
.svc a{background:#fff;padding:1.9rem 1.8rem 2rem;text-decoration:none;display:flex;
  flex-direction:column;position:relative;transition:background .2s var(--ease)}
.svc a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.svc a:hover{background:var(--canvas)}
.svc a:hover::after{transform:scaleX(1)}
.svc .n{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--flame-deep);
  margin-bottom:.85rem;letter-spacing:.06em}
.svc h3{font-size:1.28rem;margin-bottom:.6rem}
.svc p{font-size:.96rem;color:var(--steel);line-height:1.6}
.svc .go{margin-top:1.15rem;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:var(--flame-deep);
  display:flex;align-items:center;gap:.4rem}
.svc a:hover .go{gap:.7rem}
.new{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  background:rgba(234,64,31,.12);border:1px solid rgba(234,64,31,.35);color:var(--flame-press);
  border-radius:2px;padding:.15rem .4rem;margin-left:.5rem;vertical-align:.15em}
@media(max-width:860px){.svc{grid-template-columns:1fr}}

/* ---------- service detail: scope as a real sequence ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:3.5rem;margin-top:2.5rem}
.why{background:#fff;border:1px solid var(--line);padding:1.9rem 1.8rem;align-self:start}
.why h3{font-size:1.12rem;letter-spacing:.06em;margin-bottom:.9rem}
.why p{font-size:.98rem;color:var(--g700);line-height:1.68}
.applies{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--mist2)}
.applies dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;color:var(--steel);margin-bottom:.6rem}
.applies dd{margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.applies span{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--g900);
  border:1px solid var(--line);background:var(--canvas);border-radius:2px;padding:.22rem .45rem}
/* numbering is used here because the scope genuinely is a sequence of steps */
.steps{counter-reset:s;margin:0;padding:0;list-style:none;border-top:2px solid var(--g900)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:1.25rem;
  padding:1.15rem 0;border-bottom:1px solid var(--mist2)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:var(--flame-deep);padding-top:.2rem}
.steps b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.08rem;color:var(--g900);letter-spacing:.03em;margin-bottom:.2rem}
.steps p{font-size:.96rem;color:var(--steel)}
@media(max-width:900px){.detail{grid-template-columns:1fr;gap:2.2rem}}

/* vendor lines */
/* ---------- vendor lines: logo wall ----------
   Equal boxes, and the logo well is a fixed height so eight marks drawn at
   eight different aspect ratios all read as the same size. Without that the
   wide wordmarks (W-K-M, Flowseal) tower over the stacked ones (Diamond Gear,
   General Valve) and the row looks accidental.

   Two of the eight - Flowseal and ABZ - carry their own coloured plate baked
   into the file. Nothing is done about it: cutting them out would mean
   editing someone else's trademark. */
.vend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.6rem}
.vcard{margin:0;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:1.5rem 1.1rem 1.35rem;
  position:relative;transition:background .2s var(--ease)}
.vcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.vcard:hover{background:var(--canvas)}
.vcard:hover::after{transform:scaleX(1)}
/* Tall enough for the largest file render any of the eight needs (WKM at
   80px, because its wordmark fills only 37% of its own canvas). Everything
   else is centred inside it. */
.vlogo{display:flex;align-items:center;justify-content:center;
  height:88px;width:100%;margin-bottom:.95rem}
/* the per-logo caps are inline, measured from each file's ink box */
.vlogo img{width:auto;height:auto;object-fit:contain;display:block}
.vcard figcaption{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.88rem;line-height:1.25;
  color:var(--g900);text-align:center}
@media(max-width:900px){.vend{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.vend{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* scale the whole well down rather than overriding the per-logo caps, so
     the optical balance between the eight marks is preserved */
  .vlogo{height:70px}
  .vlogo img{transform:scale(.75)}}

/* ---------- about: editorial ---------- */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.5rem;margin-top:2.5rem}
.pull{border-left:3px solid transparent;border-image:var(--grad) 1;padding-left:1.75rem;align-self:start}
.pull p{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  font-size:1.5rem;line-height:1.18;color:var(--g900)}
.story-body p{color:var(--steel)}
.story-body p+p{margin-top:1.05rem}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:2.2rem}}

.mile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem}
.mile div{background:#fff;padding:2rem 1.8rem}
.mile b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:2.4rem;line-height:1;color:var(--g900)}
.mile b em{font-style:normal;color:var(--flame);font-size:1.4rem;vertical-align:.25em}
.mile span{display:block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--steel);margin-top:.55rem}
.mile p{font-size:.95rem;color:var(--steel);margin-top:.9rem;line-height:1.6}
@media(max-width:860px){.mile{grid-template-columns:1fr}}

.ind{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.ind span{border:1px solid var(--line);background:#fff;border-radius:2px;
  padding:.52rem .9rem;font-size:.94rem;color:var(--g900)}

/* ---------- gallery ---------- */
.gtabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.25rem}
.gtab{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.94rem;padding:.6rem 1.15rem;border:1px solid var(--line);
  background:#fff;color:var(--steel);border-radius:3px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.gtab[aria-selected="true"]{background:var(--g900);color:#fff;border-color:var(--g900)}
.gtab:hover{border-color:var(--flame);color:var(--g900)}
/* The grid used to be hairline-separated cells sharing one outer border. To
   give each product its own flame edge the cells have to become separate
   cards, so the 1px background trick goes and a real gap takes over. */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  background:transparent;border:0;margin-top:1.9rem}
.grid figure{
  margin:0;background:#fff;padding:1.6rem 1.3rem 1.3rem;text-align:center;
  position:relative;border-radius:2px;
  /* the flame at full strength on eight boxes at once would shout; a third of
     it reads as a deliberate edge rather than a warning */
  border:1px solid rgba(234,64,31,.34);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),
             background .2s var(--ease),transform .2s var(--ease);
}
/* the gradient edge the rest of the site uses for a card that leads somewhere */
.grid figure::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--grad);border-radius:2px 2px 0 0;
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.grid figure:hover{
  background:#fff;
  border-color:var(--flame);
  box-shadow:0 2px 18px rgba(234,64,31,.14);
  transform:translateY(-2px);
}
.grid figure:hover::before{transform:scaleX(1)}
.grid img{height:132px;width:auto;margin:0 auto;object-fit:contain}
.grid figcaption{margin-top:1.05rem}
.grid b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.98rem;color:var(--g900)}
.grid span{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--steel)}
.grid figure[hidden]{display:none}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}


/* ---------- complete range: the homepage's route into every product page ---- */
.rrange{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem}
.rcard{background:#fff;padding:1.9rem 1.7rem 2rem;text-decoration:none;display:flex;
  flex-direction:column;position:relative;transition:background .2s var(--ease)}
.rcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.rcard:hover{background:var(--canvas)}
.rcard:hover::after{transform:scaleX(1)}
.rcard .rmeta{font-family:"IBM Plex Mono",monospace;font-size:.74rem;
  color:var(--hs-flame-deep);letter-spacing:.05em;margin-bottom:.8rem}
.rcard h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.25rem;line-height:1.15;color:var(--hs-graphite-900);margin:0 0 .6rem;
  letter-spacing:.02em}
.rcard p{font-size:.95rem;line-height:1.6;color:var(--hs-steel-500);margin:0}
.rcard .rgo{margin-top:1.15rem;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--hs-flame-deep)}
.rcard:focus-visible{outline:3px solid var(--hs-amber);outline-offset:-3px}
@media(max-width:960px){.rrange{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rrange{grid-template-columns:1fr}}

/* ============================================================
   Interior page gutter
   ============================================================ */
/* Ported sections set horizontal padding to 0, because on a wide screen the
   container's own max-width does the centring and any padding on top of it
   only narrows the measure. Below the content width there is no spare room
   left to centre into, so the same rule puts the copy flush against the
   screen edge - breadcrumb, headline and lede all starting at x=0.

   Restore a gutter only in that range. Scoped to div.elementor so the header
   (a <header class="elementor">) keeps its own compact padding, and the
   footer is excluded for the same reason. The hero sets its own gutter with
   !important and is unaffected. */
@media(max-width:1220px){
  div.elementor:not(.elementor-location-footer) > .e-con > .e-con-inner{
    /* 24px matches the kit padding the header container already carries above
       767, so the logo, the breadcrumb and every heading share one edge */
    padding-inline:24px;
  }
}
@media(max-width:767px){
  div.elementor:not(.elementor-location-footer) > .e-con > .e-con-inner{
    /* and 16px matches .hs-header{padding:0 16px} below it */
    padding-inline:16px;
  }
}

/* ============================================================
   Pipes: material and construction table
   ============================================================ */
/* Same construction as .guide, five columns instead of three. The grades
   column carries the longest strings on the site - full ASTM grade lists -
   so it takes the flexible track and everything else is sized to content. */
.ptab{margin-top:2.75rem;border-top:2px solid var(--g900);background:#fff;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.prow{display:grid;
  grid-template-columns:minmax(0,1.15fr) 112px minmax(0,1.1fr) minmax(0,2fr) 128px;
  gap:1.25rem;padding:1.15rem 1.4rem;border-bottom:1px solid var(--mist2);
  align-items:baseline}
.prow.head{background:var(--canvas)}
.prow.head span{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.71rem;color:var(--steel)}
.prow b{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.05rem;color:var(--g900);letter-spacing:.03em}
.prow .con{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:var(--flame-deep)}
/* mono for anything an engineer would read as a designation rather than prose */
.prow .mono{font-family:"IBM Plex Mono",monospace;font-size:.82rem;line-height:1.6;
  color:var(--g700)}
.prow .grades{color:var(--steel)}
.prow .size{color:var(--g900);white-space:nowrap}
.prow:not(.head):hover{background:rgba(234,64,31,.035)}
@media(max-width:1080px){
  .prow{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);gap:.9rem 1.1rem}
  .prow .grades{grid-column:1/-1}
  .prow .size{grid-column:1/-1;white-space:normal}
  .prow.head{display:none}
}
@media(max-width:560px){
  .prow{grid-template-columns:1fr;gap:.35rem;padding:1.1rem}
}

/* two even columns of prose, for a pair of supply points */
.hs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.75rem;
  margin-top:2.25rem}
.hs-two h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.02em;color:var(--g900);margin:0 0 .7rem}
.hs-two p{color:var(--steel);font-size:.98rem;line-height:1.65;margin:0}
@media(max-width:760px){.hs-two{grid-template-columns:1fr;gap:1.8rem}}

/* ============================================================
   Flange cards: a spec card that leads with the product shot
   ============================================================ */
/* The six flange photographs are cut out on white, so they sit directly on
   the card rather than in a tinted well. Fixed height and object-fit:contain
   keeps six different crops optically the same size. */
.frange{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Generalised from .fspec to any spec card: the flange page was not the only
   one with product photography, it was just the only one where I wired it in.
   A card without a figure is left alone rather than given a placeholder -
   two of the eight valve types have no photograph in the library, and an
   invented stand-in would be worse than an honest gap. */
.spec > figure{margin:0 0 1.4rem;background:var(--canvas);border:1px solid var(--mist2);
  padding:1.1rem;display:flex;align-items:center;justify-content:center}
/* multiply drops the white studio background onto the well without a cutout */
.spec > figure img{height:132px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.fspec .frow{grid-template-columns:96px minmax(0,1fr)}
.fspec .frow dd{font-size:.92rem}

/* a lead photograph for a whole section, where per-item shots do not exist */
/* A supplied banner graphic: full width, shown whole.
   Neither existing figure style suits one. .leadshot caps the image at 250px
   tall, which is fine for a cut-out on white but makes the text baked into a
   banner unreadable; .abshot crops to 16:7, which would cut the heading off
   the top and a row of parts off the bottom. So this one keeps the image's
   own aspect ratio and never crops.
   The white card matters too: these banners are composed on white, so without
   a card behind them they bleed into the light band and lose their edges. */
.bannershot{margin:2.6rem 0 0;background:#fff;border:1px solid var(--line);
  border-top:3px solid transparent;border-image:var(--grad) 1;border-image-width:3px 0 0 0;
  padding:1.4rem}
.bannershot img{display:block;width:100%;height:auto;max-width:960px;margin-inline:auto}
.bannershot figcaption{
  margin-top:1rem;font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;line-height:1.5;color:var(--steel);text-align:center}
.bannershot figcaption b{color:var(--g900);font-weight:600}
@media(max-width:620px){.bannershot{padding:.9rem}.bannershot figcaption{font-size:.75rem;text-align:left}}

.leadshot{margin:2.4rem 0 0;background:#fff;border:1px solid var(--line);
  border-top:3px solid transparent;border-image:var(--grad) 1;border-image-width:3px 0 0 0;
  padding:1.6rem;display:flex;align-items:center;justify-content:center}
.leadshot img{max-height:250px;width:auto;object-fit:contain}
.leadshot figcaption{display:none}
@media(max-width:620px){.leadshot{padding:1rem}.leadshot img{max-height:180px}}
@media(max-width:1100px){.frange{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.frange{grid-template-columns:1fr}}

/* ============================================================
   Press fittings: 36 short items, so a compact three-up card
   ============================================================ */
.pfgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem}
.pf{background:#fff;padding:1.6rem 1.5rem 1.7rem}
.pf h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.08rem;line-height:1.2;color:var(--g900);letter-spacing:.02em;
  margin:0 0 .9rem;padding-bottom:.75rem;border-bottom:2px solid var(--g900)}
.pf .frow{grid-template-columns:86px minmax(0,1fr);gap:.85rem;padding:.5rem 0}
.pf .frow dd{font-size:.9rem;line-height:1.5}
@media(max-width:1000px){.pfgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pfgrid{grid-template-columns:1fr}}

/* ============================================================
   News: linked cards out to the original reporting
   ============================================================ */
.nlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem}
.ncard{background:#fff}
.ncard a{display:flex;gap:1.4rem;padding:1.5rem;text-decoration:none;height:100%;
  transition:background .2s var(--ease)}
.ncard a:hover{background:var(--canvas)}
.ncard figure{margin:0;flex:0 0 148px}
.ncard img{width:148px;height:104px;object-fit:cover;display:block}
.nbody{display:flex;flex-direction:column;min-width:0}
.nmeta{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--flame-deep);
  letter-spacing:.03em;margin-bottom:.55rem}
.ncard h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.08rem;line-height:1.22;color:var(--g900);letter-spacing:.02em;margin:0}
.ngo{margin-top:auto;padding-top:.9rem;font-family:"Barlow Condensed",sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;
  color:var(--steel)}
.ncard a:hover .ngo{color:var(--flame-deep)}
.ncard a:focus-visible{outline:3px solid var(--hs-amber);outline-offset:-3px}
/* The site stacks .frow below 520px. The .fspec and .pf overrides above are
   more specific than that rule, so they have to opt in again or the label
   column keeps eating width on a phone. */
@media(max-width:520px){
  .fspec .frow,
  .pf .frow{grid-template-columns:1fr;gap:.2rem}
}

@media(max-width:900px){.nlist{grid-template-columns:1fr}}
@media(max-width:520px){
  .ncard a{flex-direction:column;gap:1rem}
  .ncard figure{flex:none}
  .ncard img{width:100%;height:170px}
}

/* ============================================================
   Contact: the one enquiry form on the site
   ============================================================ */
/* The form lived on seventeen pages and is now only here, so it can afford
   to be a proper panel rather than four underlines floating on the band. */

/* ---- the details column, as a card ---- */
#contact .hs-dl{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid transparent;
  border-image:var(--grad) 1;
  border-image-width:3px 0 0 0;
}
#contact .hs-dl > div{
  grid-template-columns:104px minmax(0,1fr);
  padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--mist2);
}
#contact .hs-dl > div:last-child{border-bottom:0}
#contact .hs-dl dt{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:.71rem;color:var(--steel);padding-top:.2rem;
}
#contact .hs-dl dd{font-size:.98rem;line-height:1.5}
/* the legal entity name led the section as a 48px h2 and dominated it;
   it belongs in the details panel, at the size of a detail */
#contact .hs-dl .hs-co dd{font-family:"Barlow Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.06rem;color:var(--g900);line-height:1.25}
/* the two addresses and the number are the point of the panel, so they get
   the flame rather than sitting in body grey */
#contact .hs-dl a{color:var(--flame-deep);font-weight:500}

/* ---- the form ---- */
#contact .elementor-form .elementor-field-group{margin-bottom:.35rem}
#contact .elementor-field-group > label{
  display:block;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.71rem;
  color:var(--steel);
  margin-bottom:.45rem;
}
/* Elementor tags the group .elementor-mark-required but draws the asterisk
   from its own stylesheet, which is not reaching this page. Drawn here
   instead, so the marker exists and takes the flame rather than inheriting
   the label grey - and so it stays out of the accessible name, which the
   real `required` attribute already carries. */
#contact .elementor-field-group.elementor-mark-required .elementor-field-label::after{
  content:"*";
  color:var(--flame-deep);
  margin-left:.2rem;
  font-size:1.05em;
  line-height:0;
}
#contact .elementor-field-group .elementor-field{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:2px;
  padding:.8rem .95rem;
  font-size:.98rem;
  color:var(--g900);
  line-height:1.5;
}
#contact .elementor-field-group textarea.elementor-field{min-height:132px;resize:vertical}
#contact .elementor-field-group .elementor-field::placeholder{
  /* These placeholders now carry real guidance - part numbers, pressure
     class, what to include - so they have to be readable. The old #A79E98
     measured 2.63:1 on white; this clears AA at 4.9:1 while still reading
     as a prompt rather than as entered text. */
  color:#7A6F69;
  font-size:.92rem;
  opacity:1;                 /* Firefox dims placeholders by default */
}
#contact .elementor-field-group .elementor-field:focus{
  border-color:var(--flame) !important;
  box-shadow:0 0 0 3px rgba(234,64,31,.14);
  outline:none;
}
#contact .elementor-form .elementor-button{
  background-color:var(--g900);
  color:#fff;
  padding:1rem 2.4rem;
  border-radius:2px;
  letter-spacing:.12em;
  transition:background-color .18s var(--ease);
}
#contact .elementor-form .elementor-button:hover{background-color:var(--flame-deep)}
#contact .elementor-form .elementor-field-type-submit{margin-top:1.1rem}

/* the two columns are content of different natures, so they are not forced
   to the same height - the panel sizes to its rows, the form to its fields */
#contact .hs-grid-2{align-items:start}

@media(max-width:860px){
  #contact .hs-dl > div{grid-template-columns:1fr;gap:.3rem;padding:1rem 1.2rem}
  #contact .elementor-form .elementor-button{width:100%;justify-content:center}
}

/* ============================================================
   About: photography carrying the story
   ============================================================ */
/* The About page was the longest stretch of unbroken text on the site. These
   are the two photographs in the library that actually say something about
   the business rather than decorating it: bench work on a control valve, and
   the kind of plant the parts end up in. */
.abshot{margin:2.6rem 0 0;position:relative}
.abshot img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/7;object-fit:cover;object-position:center 42%;
}
.abshot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);z-index:1;
}
.abshot figcaption{
  margin-top:.9rem;
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;line-height:1.5;color:var(--steel);
}
.abshot figcaption b{color:var(--g900);font-weight:600}
/* on the dark and mist bands the caption needs its own colour */
.hs-band-mist .abshot figcaption{color:var(--steel)}
@media(max-width:700px){
  .abshot img{aspect-ratio:4/3}
  .abshot figcaption{font-size:.74rem}
}

/* ============================================================
   Parts search
   ============================================================ */
/* A few thousand rows, filtered in the browser. The dataset is fetched once
   as JSON and never re-requested; only the visible slice is in the DOM,
   because putting 2,000+ table rows on the page makes scrolling stutter on a
   phone even though the filtering itself is instant. */
.psrch{margin-top:2.4rem}

.psrch-field{position:relative;max-width:760px}
.psrch-field svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:var(--steel);fill:none;stroke-width:2;pointer-events:none}
.psrch-field input{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:1.05rem 1.1rem 1.05rem 3.1rem;font-size:1.02rem;color:var(--g900);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.psrch-field input::placeholder{color:#7A6F69}
.psrch-field input:focus{border-color:var(--flame);box-shadow:0 0 0 3px rgba(234,64,31,.14);outline:none}

/* Filter chips.
   ---------------------------------------------------------------------------
   Each line used to end wherever the chips happened to run out: measured at
   1440 the three lines finished 117px, 5px and 256px short of the container.
   That ragged right edge reads as accidental rather than designed, and it is
   what the client noticed.

   A column grid was the obvious fix and the wrong one. The labels come from
   the catalogue and run from "SGT400" to "HYDRAULIC SEQUENCING VALVE
   ASSEMBLY", so a track wide enough for the long ones wastes most of itself
   on the short ones: it turned three lines into six, with holes wherever a
   wide chip would not fit the columns left on a line.

   Letting every chip grow instead keeps the natural wrapping - the short
   labels stay short - and hands each line its leftover space to share, so the
   line squares off at both edges. max-width stops a lone chip on a final line
   from stretching the full width, which is the one ugly case flex-grow has.
   --------------------------------------------------------------------------- */
.psrch-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.psrch-chips button{
  flex:1 1 auto;max-width:360px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.86rem;line-height:1;
  padding:.62rem 1.05rem;border:1px solid var(--line);background:#fff;color:var(--steel);
  border-radius:2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
@media(max-width:600px){
  .psrch-chips button{padding-inline:.7rem;letter-spacing:.05em;max-width:none}
}
.psrch-chips button:hover{border-color:var(--flame);color:var(--g900)}
.psrch-chips button[aria-pressed="true"]{background:var(--g900);border-color:var(--g900);color:#fff}
/* the count sits at the far end of the chip, pushed there by space-between */
.psrch-chips button .n{opacity:.55;font-variant-numeric:tabular-nums;flex:none}

/* count line */
.psrch-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:2rem;padding-bottom:.85rem;border-bottom:2px solid var(--g900);
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--steel)}
.psrch-meta b{color:var(--g900);font-weight:600}

/* column headings, on the same grid as the rows so they line up exactly.
   Sticky under the site header, because this table can run to a few thousand
   rows and a column heading that scrolls away is no heading at all. */
.psrch-head{
  display:grid;grid-template-columns:210px minmax(0,1fr) 190px 116px;
  gap:1.25rem;padding:.8rem 1.1rem;background:var(--mist);
  border-bottom:1px solid var(--line);
  /* the sticky site header measures 75px from the tablet breakpoint up;
     3px short and rows show through the gap as they scroll past */
  position:sticky;top:75px;z-index:3;
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.71rem;color:var(--steel);
}

/* results */
.psrch-row{display:grid;grid-template-columns:210px minmax(0,1fr) 190px 116px;
  gap:1.25rem;align-items:center;padding:.95rem 1.1rem;
  border-bottom:1px solid var(--mist2);background:#fff}
.psrch-row:nth-child(odd){background:var(--canvas)}
.psrch-row:hover{background:rgba(234,64,31,.045)}
.psrch-pn{font-family:"IBM Plex Mono",monospace;font-size:.9rem;font-weight:500;
  color:var(--g900);word-break:break-word}
.psrch-desc{font-size:.95rem;color:var(--g700);line-height:1.45}
.psrch-frame{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;color:var(--g900);
  border:1px solid var(--line);background:var(--mist);border-radius:2px;
  padding:.3rem .55rem;justify-self:start;text-align:center}
.psrch-cta{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;text-decoration:none;text-align:center;
  padding:.6rem .9rem;border:1px solid var(--g900);color:var(--g900);border-radius:2px;
  transition:background .16s var(--ease),color .16s var(--ease)}
.psrch-cta:hover{background:var(--g900);color:#fff}

/* pager */
.psrch-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.35rem;margin-top:2rem}
.psrch-pager .pg{
  font-family:"IBM Plex Mono",monospace;font-size:.84rem;line-height:1;
  min-width:40px;padding:.7rem .6rem;text-align:center;
  border:1px solid var(--line);background:#fff;color:var(--g700);
  border-radius:2px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.psrch-pager .pg:hover:not(:disabled):not(.on){border-color:var(--flame);color:var(--g900)}
.psrch-pager .pg.on{background:var(--g900);border-color:var(--g900);color:#fff;font-weight:600}
.psrch-pager .pg.nav{font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;min-width:0;padding:.7rem 1.05rem}
.psrch-pager .pg:disabled{opacity:.4;cursor:default}
.psrch-pager .gap{color:var(--steel);padding:0 .2rem;user-select:none}
@media(max-width:560px){
  /* the numbers wrap badly on a phone; prev/next carry the load there */
  .psrch-pager .pg:not(.nav):not(.on){display:none}
  .psrch-pager .gap{display:none}
}
.psrch-empty{padding:3rem 1rem;text-align:center;color:var(--steel);background:#fff}
.hs-prefill-note{margin:.5rem 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:.76rem;color:var(--flame-deep)}
.psrch-empty b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.15rem;color:var(--g900);margin-bottom:.5rem}

@media(max-width:900px){
  /* the rows stop being a table below this width, so a header row would be
     labelling columns that no longer exist */
  .psrch-head{display:none}
  .psrch-row{grid-template-columns:minmax(0,1fr) 104px;gap:.5rem 1rem;padding:1rem}
  .psrch-pn{grid-column:1;font-size:.86rem}
  .psrch-cta{grid-column:2;grid-row:1/3;align-self:center}
  .psrch-desc{grid-column:1}
  .psrch-frame{grid-column:1;justify-self:start;margin-top:.25rem}

  /* The column header row is hidden here because the row stacks into a card,
     which costs the Frame/Model label the client asked for specifically. The
     part number reads as one (mono, and it looks like a part number) and the
     description is plain prose, but a bare "Combined Valve" sitting under
     them is ambiguous - it could be either. So the label comes back inline
     on this one cell only. */
  .psrch-frame::before{content:"Frame / Model: ";color:var(--steel);font-weight:400}
}

/* ============================================================
   Proof cells without numerals
   ============================================================ */
/* The hero strip and the About milestones were both built around a big
   numeral. With the figures withdrawn the same slot now holds a short phrase,
   which cannot be set at 2.5rem without wrapping out of its cell - so the
   modifier drops the size and lets the phrase breathe instead. */
.proof.words .n{font-size:1.42rem;line-height:1.18;letter-spacing:0}
.proof.words .k{margin-top:.6rem}
.mile.words b{font-size:1.7rem;line-height:1.15;letter-spacing:.01em}
@media(max-width:1100px){.proof.words .n{font-size:1.24rem}}
@media(max-width:767px){.proof.words .n{font-size:1.3rem}}

/* ==========================================================================
   Touch legibility and tap targets
   --------------------------------------------------------------------------
   Measured across all twenty pages at 375px, every page in a same-origin
   iframe so its own media queries fired. Two classes of fault came back, and
   neither is visible on a desktop monitor - which is why they survived this
   long.

   1. Nineteen rules render below 12px on a phone: the spec labels, table
      column headers, meta strips and - worst of the set - the contact form's
      own field labels at 11.36px. These are uppercase mono and condensed
      faces, which read smaller than their nominal size, so 11px is closer to
      10 in practice. The floor here is 12px, applied only under 768 where
      the viewing distance is short and the pixel density argument does not
      help. Above that the original sizes stand; they are correct there and
      the tighter label is part of the type hierarchy.

   2. Interactive targets under 44px: breadcrumb links at 16px tall, nav
      items and filter chips at 36. WCAG 2.5.8 only asks for 24x24, so none
      of these fail outright - but 16px of vertical target on a breadcrumb is
      a miss waiting to happen, and the parts page puts forty of these chips
      in a row. Padding grows the target without moving the type, so nothing
      reflows.
   ========================================================================== */
@media (max-width:767px){

  /* --- 1. 12px floor on the micro-labels ------------------------------- */
  .new,
  .facts dt,
  .grow.head span,.prow.head span,.cov-row.head span,
  #contact .hs-dl dt,
  #contact .elementor-field-group > label,
  .psrch-head,
  .hs-strip .hs-strip-k,
  .proof .k,
  .spec-h .tag,
  .frow dt,.applies dt,
  .mile span,
  .nmeta,
  .psrch-frame,
  .rcard .rmeta,
  .abshot figcaption{font-size:.75rem}

  /* the form label carries the most weight of the set - give it the room
     to sit clearly above its input rather than crowding it */
  #contact .elementor-field-group > label{margin-bottom:.4rem;display:block}
}

/* --------------------------------------------------------------------------
   Tap targets are keyed on the input device, not the viewport.
   A 768px iPad in portrait is a touch screen with the same finger on it as a
   phone, but it sits above every max-width:767 rule - so the breadcrumbs came
   back at 16px tall on exactly the device where that matters most. Width was
   the wrong axis. (pointer:coarse) asks the question actually being asked,
   and leaves a large mouse-driven window alone, where 34px is fine.

   The width clause is not redundant. Hybrid machines - touch laptops, a
   Surface, an iPad with a trackpad attached - report pointer:fine while a
   finger is still the thing reaching for the link, and emulators disagree
   with each other about which they report. A comma is an OR in a media
   query, so either signal is enough. The cost of being wrong in the
   generous direction is a slightly taller footer link on a 1024px window;
   the cost in the other direction is a 16px breadcrumb on an iPad.
   -------------------------------------------------------------------------- */
@media (pointer:coarse), (max-width:1024px){

  /* breadcrumbs: 16px tall as inline text. The padding is vertical only, so
     the trail still reads as one line. */
  .crumb a{display:inline-block;padding-block:.55rem}
  .crumb{margin-bottom:.7rem}          /* claw back the padding just added */

  /* Nav, chips, tabs and pager all land on the same 44px minimum.
     Note the nav links that need this on a phone are the FOOTER columns -
     the header collapses to a hamburger, so its own menu is hidden there. */
  .elementor-nav-menu a.elementor-item{min-height:44px;display:flex;align-items:center}

  /* the logo is the other way home; it should be as tappable as the menu */
  .hs-logo a{min-height:44px;display:flex;align-items:center}

  .psrch-chips button,
  .gtab,
  .psrch-pager .pg,
  .psrch-cta{min-height:44px}
  .psrch-chips button,.gtab,.psrch-pager .pg{display:inline-flex;align-items:center}
  .psrch-pager .pg{min-width:44px;justify-content:center}

  /* A phone number is the one link on the page someone taps in a hurry,
     and the address block sets both of these as plain inline text - 20px
     of target for an email address, 21 for the number. */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding-block:.7rem}
}


/* ==========================================================================
   404
   --------------------------------------------------------------------------
   The theme shipped no 404 template, so a dead link landed on a bare line of
   text with nothing to click. This band reuses the page-header treatment so
   it reads as part of the site rather than as an error screen, and everything
   below it exists to get the visitor moving again.
   ========================================================================== */
.hs-404-inner{max-width:1180px;margin-inline:auto}
@media(max-width:1220px){.hs-404-inner{padding-inline:24px}}
@media(max-width:767px){.hs-404-inner{padding-inline:16px}}

.hs-404-head{
  position:relative;color:#fff;
  background:radial-gradient(90% 130% at 88% 0%,rgba(234,64,31,.15),rgba(234,64,31,0) 60%),var(--g900);
  padding:clamp(2.75rem,6vw,4.75rem) 0 clamp(2.75rem,5vw,4rem);
}
.hs-404-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.hs-404-head h1{color:#fff;margin:0}

/* The numeral is the one piece of decoration on the page. It is marked
   aria-hidden because "404" is already announced by the eyebrow above it, and
   a screen reader reading the digits twice helps nobody. */
.hs-404-num{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(5.5rem,18vw,13rem);line-height:.8;letter-spacing:-.02em;
  margin:.5rem 0 .9rem;
  color:var(--ember);
}
/* Painting the gradient into the glyphs needs background-clip:text. Where that
   is unsupported, colour:transparent would erase the numeral entirely, so the
   solid colour above stands and only browsers that can do it opt in. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hs-404-num{
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

.hs-404-lead{color:#B3A8A1;max-width:46ch;margin:1.3rem 0 0;line-height:1.65}

.hs-404-search{display:flex;gap:.6rem;flex-wrap:wrap;max-width:560px;margin-top:2rem}
.hs-404-field{position:relative;flex:1 1 250px;display:flex;align-items:center}
.hs-404-field svg{
  position:absolute;left:.95rem;width:18px;height:18px;
  fill:none;stroke:#7A6F69;stroke-width:2;stroke-linecap:round;pointer-events:none;
}
.hs-404-field input{
  width:100%;padding:.85rem 1rem .85rem 2.8rem;
  background:#fff;border:1px solid transparent;border-radius:2px;
  font-family:"IBM Plex Sans",sans-serif;font-size:1rem;color:var(--g900);
}
.hs-404-field input::placeholder{color:#7A6F69}
.hs-404-field input:focus{border-color:var(--flame);box-shadow:var(--hs-focus);outline:none}
/* Two classes, not one. The Elementor kit styles every button on the site with
   ".elementor-kit-39 button", which is specificity (0,1,1) and beat a lone
   ".hs-404-go" at (0,1,0) - so the button rendered in the kit's graphite
   instead of flame. Scoping it under .hs-404 wins on specificity rather than
   with !important, which would only move the same fight somewhere else. */
.hs-404 .hs-404-go{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.95rem;
  padding:.85rem 1.7rem;border:0;border-radius:2px;cursor:pointer;
  /* Measured: white on --flame is 4.00:1, and this text is 15.2px, which is
     under the 18.66px bold that WCAG counts as large - so flame would fail AA
     here. --flame-deep gives 4.75:1 and --flame-pressed 6.11:1, both existing
     brand tokens, and the button still darkens on hover as one should. */
  background:var(--flame-deep);color:#fff;
  transition:background .16s var(--ease);
}
.hs-404 .hs-404-go:hover{background:var(--hs-flame-pressed)}
.hs-404 .hs-404-go:focus-visible{outline:none;box-shadow:var(--hs-focus)}

.hs-404-alt{
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;line-height:1.6;
  color:var(--steel3);margin:1.4rem 0 0;
}
.hs-404-alt a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(243,168,24,.4)}
.hs-404-alt a:hover{color:#fff;border-bottom-color:#fff}

.hs-404-nav{background:var(--mist);padding:clamp(2.75rem,5vw,4rem) 0}
.hs-404-nav h2{margin:0}
/* .rrange already sits on a 1px line grid, so it needs no extra rule here */

@media(max-width:600px){
  .hs-404-search{gap:.5rem}
  .hs-404-go{width:100%}
}