/* ======================================================================
   Elementor mapping.

   Pages are built from native Elementor widgets carrying the design's own
   class names. This sheet is the only place the design is applied - nothing
   is styled inside the Elementor document itself, so a page never carries
   hard-coded colours or spacing that could drift from the brand.

   It loads AFTER Elementor's own CSS (see the enqueue order in functions.php),
   so plain specificity is enough; !important is used only where Elementor
   writes inline-level defaults.
   ====================================================================== */

/* ---------------------------------------------------------------- shell */
/* the container is the design's .wrap */
.elementor-section > .elementor-container{max-width:var(--maxw);margin:0 auto;padding:0 40px;
  width:100%}
.elementor-section.sv-pad{padding:60px 0}
.elementor-inner-section{width:100%}
.elementor-inner-section > .elementor-container{padding:0;max-width:none}
.elementor-column{display:block}
.elementor-widget-wrap{align-content:flex-start}
.elementor-widget{width:100%}
@media(max-width:820px){.elementor-section.sv-pad{padding:42px 0}}
/* the gutter is .wrap's: 40px, 20px under 640, 16px under 380 - not 20 from 820 down */
@media(max-width:640px){.elementor-section > .elementor-container{padding:0 20px}}
@media(max-width:380px){.elementor-section > .elementor-container{padding:0 16px}}

/* Elementor's widget spacing is off; the design spaces its own pieces */
.elementor-widget:not(:last-child){margin-bottom:0}
.elementor-element.elementor-widget-text-editor + .elementor-element.elementor-widget-text-editor{margin-top:16px}

/* ---------------------------------------------------------------- type */
.elementor-heading-title{font-family:var(--disp);color:var(--ink);letter-spacing:-.02em}
h2.elementor-heading-title{font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.14;
  letter-spacing:-.025em}
.sv-sec-head h2.elementor-heading-title,.sv-split-h2 h2.elementor-heading-title{margin:0}
.elementor-widget-text-editor{font-size:16.5px;line-height:1.8;color:var(--ink-soft)}
.elementor-widget-text-editor p{margin:0}
.elementor-widget-text-editor p + p{margin-top:16px}

/* eyebrow */
.elementor-widget.sv-eyebrow p{font-family:var(--head);font-weight:700;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre-deep);
  display:inline-flex;align-items:center;gap:9px;background:var(--ochre-tint);
  padding:8px 16px;border-radius:100px;margin-bottom:14px}
.elementor-widget.sv-eyebrow p::before{content:"";width:14px;height:2px;
  background:var(--ochre);border-radius:2px}
/* a label introducing a list */
.elementor-widget.sv-list-label p{font-family:var(--head);font-weight:700;
  font-size:15.5px;color:var(--ink);letter-spacing:0;margin-top:24px}

/* section heads */
.elementor-column.sv-sec-head > .elementor-widget-wrap{max-width:760px;margin-bottom:26px}
.elementor-column.sv-sec-head.sv-center > .elementor-widget-wrap{margin-left:auto;margin-right:auto;
  text-align:center;align-items:center}
.elementor-column.sv-sec-head.sv-center .sv-eyebrow p{margin-left:auto;margin-right:auto}
.elementor-column.sv-sec-head .elementor-widget-text-editor{margin-top:14px}
.elementor-widget.sv-split-h2 h2.elementor-heading-title{font-weight:700;
  font-size:clamp(26px,3.2vw,38px);margin-bottom:6px}
.elementor-section.sv-doc-sec h2.elementor-heading-title{background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* The design gives every section head's h2 the brand gradient - the static rule
   is a bare `.sec-head h2`. Scoping the Elementor version to .sv-doc-sec only
   covered a couple of sections, so six of eight headings on a service page came
   out flat black and the two sites looked different at a glance. The split
   sections' own h2 (.sv-split-h2) is outside .sv-sec-head and stays flat, as it
   does on the static side. */
.elementor-column.sv-sec-head h2.elementor-heading-title{background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* The design runs four heading sizes, not one. Measured off the static build:
   .contrib-head 52 | .sec-head 44 | .doc-sec .sec-head 40 | split h2 38.
   The mapping had a single 40px value, so most headings were a size small and
   the doc-sec ones were right by accident. */
.elementor-section.sv-doc-sec .sv-sec-head h2.elementor-heading-title{
  font-size:clamp(26px,3.3vw,40px)}
.elementor-column.sv-contrib-head h2.elementor-heading-title{
  font-size:clamp(30px,4.2vw,52px);line-height:1.04;letter-spacing:-.03em}
.elementor-widget.sv-sec-sub h3.elementor-heading-title{font-family:var(--disp);
  font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.01em;margin-top:28px}
/* the design centres this block: .doc-sec .wrap is max-width:1100px with
   40px gutters, so the text runs 210..1230 in a 1440 viewport */
.elementor-section.sv-doc-sec .elementor-column.sv-sec-body > .elementor-widget-wrap{
  max-width:1020px;margin-left:auto;margin-right:auto}
.elementor-column.sv-sec-body .elementor-widget:not(:first-child){margin-top:16px}
/* ...but not inside the CTA band: that rule reaches its nested buttons and gave
   them a 16px top margin, making the band 132px against the design's 116. */
.elementor-column.sv-sec-body .sv-sec-cta-band .elementor-widget{margin-top:0}
.sv-tail-gap > .elementor-widget-wrap{margin-top:34px}

/* ---------------------------------------------------------------- hero */
.elementor-section.sv-sh-hero{min-height:520px;display:flex;align-items:flex-end;
  padding:150px 0 64px;background-color:var(--ink);position:relative;overflow:hidden}
.elementor-section.sv-sh-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(10,9,7,.9) 0%,rgba(10,9,7,.74) 38%,
    rgba(10,9,7,.44) 72%,rgba(10,9,7,.62) 100%)}
.elementor-section.sv-sh-hero > .elementor-container{position:relative;z-index:1}
.sv-sh-hero h1.elementor-heading-title{font-weight:800;font-size:clamp(30px,4.6vw,56px);
  line-height:1.06;letter-spacing:-.03em;color:#fff;max-width:16ch}
/* a client-set line break (H1_LINES, class lines -> sv-lines on the widget) is wider
   than 16ch: "Contractor, Supplier & Erector" must stay one line, as on the static site */
.sv-sh-hero .elementor-widget.sv-lines h1.elementor-heading-title{max-width:none}
.sv-sh-hero .elementor-widget.sv-lead{margin-top:20px;font-size:16.5px;line-height:1.7;
  color:rgba(255,255,255,.86);max-width:600px}
.sv-sh-hero .elementor-widget.sv-lead p{color:rgba(255,255,255,.86)}
.sv-sh-hero .elementor-widget.sv-sh-tag p{font-family:var(--head);
  font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);padding:8px 16px;border-radius:100px;
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px} /* .sh-hero h1{margin-top:20px} */
.sv-sh-hero .elementor-widget.sv-sh-tag p::before{content:"";width:7px;
  height:7px;border-radius:50%;background:var(--ochre-light)}
.sv-sh-hero .elementor-shortcode .sh-crumb{margin-bottom:20px}

/* ---------------------------------------------------------------- buttons */
.elementor-widget-button{width:auto}
.elementor-widget-button .elementor-button{border-radius:100px;font-family:var(--head);
  font-weight:700;font-size:15px;padding:17px 30px;display:inline-flex;align-items:center;
  gap:10px;line-height:1.7;border:1.5px solid transparent;background:none;
  transition:.35s var(--ease);text-decoration:none}
.elementor-widget-button.sv-btn-primary .elementor-button{background:var(--brand-gradient);
  color:#fff;box-shadow:0 12px 26px -12px rgba(198,61,38,.55)}
.elementor-widget-button.sv-btn-primary .elementor-button:hover{transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(198,61,38,.65)}
.elementor-widget-button.sv-btn-outline .elementor-button{color:var(--ink);border-color:var(--line-2)}
.elementor-widget-button.sv-btn-outline .elementor-button:hover{border-color:var(--ochre);
  color:var(--ochre-deep)}
.elementor-widget-button.sv-btn-ghost-light .elementor-button{color:#fff;
  border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.elementor-widget-button.sv-btn-ghost-light .elementor-button:hover{border-color:#fff}
/* the third hero call to action, in WhatsApp's own green. site.css carries the
   .btn-wa rule for the static markup; the class lands on the Elementor widget,
   not on the <a>, so the button needs its own mapping here or it renders as
   bare text on the hero photo. */
.elementor-widget-button.sv-btn-wa .elementor-button{background:#25d366;
  border-color:#25d366;color:#fff;box-shadow:0 8px 24px -8px rgba(37,211,102,.55)}
.elementor-widget-button.sv-btn-wa .elementor-button:hover{background:#1da851;
  border-color:#1da851;color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(37,211,102,.6)}
.elementor-column.sv-ctas > .elementor-widget-wrap{display:flex;flex-direction:row;flex-wrap:wrap;
  gap:14px;margin-top:28px}
.elementor-column.sv-ctas .elementor-widget{width:auto}

/* CTA band */
.elementor-column.sv-sec-cta-band > .elementor-widget-wrap{position:relative;display:flex;
  flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:34px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 30px 26px 34px;box-shadow:0 18px 40px -30px rgba(20,16,14,.5);overflow:hidden}
.elementor-column.sv-sec-cta-band > .elementor-widget-wrap::before{content:"";position:absolute;
  inset:0 auto 0 0;width:5px;background:var(--brand-gradient)}
.elementor-column.sv-sec-cta-band .elementor-widget{width:auto}
.elementor-column.sv-sec-cta-band .elementor-widget.sv-cta-line{flex:1 1 300px}
/* the CTA band's message is a display-font statement, not body copy - it was
   inheriting the text-editor default (16.5px, ink-soft) against the design's
   20px bold ink */
.elementor-widget.sv-cta-line,
.elementor-widget.sv-cta-line p{font-family:var(--disp);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;color:var(--ink);
  line-height:1.35;margin:0}
.sv-cta-line p{font-family:var(--disp);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);line-height:1.35;letter-spacing:-.01em}

/* ---------------------------------------------------------------- split */
.elementor-section.sv-sh-split > .elementor-container{display:flex;align-items:center;gap:52px}
.elementor-section.sv-sh-split .elementor-column{min-width:0}
.elementor-widget.sv-sh-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/3;position:relative}
.elementor-widget.sv-sh-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .9s var(--ease)}
.elementor-widget.sv-sh-media:hover img{transform:scale(1.07)}
.elementor-widget.sv-sh-media::before{content:"";position:absolute;inset:auto auto -1px -1px;
  width:62%;height:5px;background:var(--brand-gradient);z-index:2}
@media(max-width:900px){.elementor-section.sv-sh-split > .elementor-container{flex-direction:column;
  gap:30px}.elementor-section.sv-sh-split .elementor-column{width:100%!important}}

/* intro: copy + fact cards beside the photo */
#intro > .elementor-container{display:flex;align-items:stretch;gap:52px}
#intro .elementor-column.sv-intro-copy{display:flex;flex-direction:column;justify-content:center}
#intro .elementor-widget.sv-sh-media{aspect-ratio:auto;min-height:340px;height:100%}
.elementor-column.sv-intro-cards > .elementor-widget-wrap{display:grid;
  grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
@media(max-width:900px){#intro > .elementor-container{flex-direction:column}
  #intro .elementor-column{width:100%!important}
  #intro .elementor-widget.sv-sh-media{aspect-ratio:4/3;min-height:0}}
@media(max-width:620px){.elementor-column.sv-intro-cards > .elementor-widget-wrap{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- icon-box cards */
.elementor-widget.sv-why-card,

/* ---------------------------------------------------------------- icon-box cards */
.elementor-widget.sv-step-card{background:var(--white);border:1px solid var(--line);
  transition:.3s var(--ease);
  /* the design's card is a PILL, not a box: icon left of the label, fully
     rounded, 74px tall. Elementor's default stacked the icon on top and the
     card came out 162px with a 16px radius - the most visible difference
     between the two sites on any page carrying these. */
  display:flex;align-items:center;gap:15px;border-radius:100px;
  padding:13px 26px 13px 13px}
.elementor-widget.sv-why-card:hover,
.elementor-widget.sv-step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);
  border-color:var(--ochre-light)}
.sv-why-card .elementor-icon-box-icon,
.sv-step-card .elementor-icon-box-icon{margin-bottom:0;flex:none}
/* position="left" gives Elementor's own flex wrapper; centre it and kill the
   gutter it adds, so the pill's own gap is the only spacing */
.sv-why-card .elementor-icon-box-wrapper,
.sv-step-card .elementor-icon-box-wrapper{display:flex;align-items:center;gap:15px;
  text-align:left;width:100%}
.sv-why-card .elementor-icon-box-content,
.sv-step-card .elementor-icon-box-content{text-align:left}
.sv-why-card .elementor-icon,
.sv-step-card .elementor-icon{width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--ochre-tint);
  color:var(--ochre-deep);display:flex;align-items:center;justify-content:center}
.sv-why-card .elementor-icon svg,
.sv-step-card .elementor-icon svg{width:21px;height:21px;fill:none;stroke:currentColor}
.sv-why-card .elementor-icon-box-title,
.sv-step-card .elementor-icon-box-title{font-family:var(--head);font-weight:700;font-size:16px;
  line-height:1.3;color:var(--ink);margin:0}
.sv-why-card .elementor-icon-box-description,
.sv-step-card .elementor-icon-box-description{font-size:14.5px;line-height:1.6;
  color:var(--ink-soft);margin-top:8px}
.elementor-column.sv-why-grid > .elementor-widget-wrap{display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:1000px){.elementor-column.sv-why-grid > .elementor-widget-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.elementor-column.sv-why-grid > .elementor-widget-wrap{grid-template-columns:1fr}}
.elementor-widget.sv-wp-lead{max-width:900px}

/* ---------------------------------------------------------------- image-box: type cards */
.elementor-widget.sv-shed-card{flex:none;width:290px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.3s var(--ease)}
.elementor-widget.sv-shed-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);
  border-color:var(--ochre-light)}
.sv-shed-card .elementor-image-box-wrapper{display:block}
.sv-shed-card .elementor-image-box-img{margin:0!important;width:100%!important}
.sv-shed-card .elementor-image-box-img img{width:100%;height:170px;object-fit:cover;display:block}
.sv-shed-card .elementor-image-box-content{padding:18px 20px 22px}
.sv-shed-card .elementor-image-box-title{font-family:var(--head);font-weight:700;font-size:16px;
  line-height:1.3;color:var(--ink);margin:0}
.sv-shed-card .elementor-image-box-description{font-size:14px;line-height:1.6;
  color:var(--ink-soft);margin-top:8px}
/* the track is wider than the viewport by design - the column clips it */
.elementor-column.sv-marquee-track{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.elementor-column.sv-marquee-track > .elementor-widget-wrap{display:flex;flex-direction:row;
  flex-wrap:nowrap;gap:18px;width:max-content;margin-top:34px;
  animation:marqueeRTL 34s linear infinite}
.elementor-column.sv-marquee-track:hover > .elementor-widget-wrap{animation-play-state:paused}
.elementor-section.sv-pad,.elementor-section.sv-sh-hero{overflow:hidden}

/* ---------------------------------------------------------------- sector cards */
.elementor-column.sv-sector-grid > .elementor-widget-wrap{display:grid;
  grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:1000px){.elementor-column.sv-sector-grid > .elementor-widget-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.elementor-column.sv-sector-grid > .elementor-widget-wrap{grid-template-columns:1fr}}
.elementor-section.sv-sector-card{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.35s var(--ease)}
.elementor-section.sv-sector-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sv-sector-card .elementor-widget.sv-sc-img{aspect-ratio:16/10;overflow:hidden;display:block}
.sv-sector-card .sv-sc-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.elementor-section.sv-sector-card:hover .sv-sc-img img{transform:scale(1.06)}
.sv-sector-card .elementor-widget.sv-sc-title{padding:20px 22px 0}
.sv-sector-card .sv-sc-title h3.elementor-heading-title{font-family:var(--disp);font-weight:700;
  font-size:18px;letter-spacing:-.01em}
.sv-sector-card .elementor-widget.sv-sc-head{padding:22px 22px 0}
.sv-sector-card .sv-sc-head .elementor-icon{width:52px;height:52px;border-radius:50%;
  background:var(--ochre-tint);color:var(--ochre-deep);display:flex;align-items:center;
  justify-content:center;margin-bottom:14px}
.sv-sector-card .sv-sc-head .elementor-icon svg{width:21px;height:21px}
.sv-sector-card .sv-sc-head .elementor-icon-box-title{font-family:var(--disp);font-weight:700;
  font-size:18px;color:var(--ink);margin:0}
.sv-sector-card .elementor-widget-text-editor{padding:0 22px;font-size:14.5px;line-height:1.6}
.sv-sector-card .elementor-widget.sv-sc-list{padding:12px 22px 24px}
.sv-sector-card .elementor-widget:last-child{padding-bottom:24px}

/* ---------------------------------------------------------------- icon lists */
.elementor-widget-icon-list .elementor-icon-list-items{margin:0;padding:0;list-style:none}
.elementor-widget-icon-list .elementor-icon-list-item{align-items:flex-start}
.elementor-widget-icon-list .elementor-icon-list-icon{display:flex;flex:none}
.elementor-widget-icon-list .elementor-icon-list-icon svg{width:16px;height:16px;
  stroke:var(--ochre);fill:none;stroke-width:2}
.elementor-widget-icon-list .elementor-icon-list-text{color:var(--ink-soft)}

.elementor-widget.sv-check-list .elementor-icon-list-items{display:grid;
  grid-template-columns:1fr 1fr;gap:12px 26px;margin-top:16px}
.elementor-widget.sv-check-list .elementor-icon-list-item{gap:12px;font-size:15.5px;
  line-height:1.55;color:var(--ink-soft);align-items:flex-start}
/* the design's tick sits inside a round ochre-tint badge (.check-item .ico:
   22px, 50% radius, tinted ground). Elementor renders a bare SVG, so the list
   read as plain ticks against the static site's badged ones. */
.elementor-widget.sv-check-list .elementor-icon-list-icon{flex:none;width:22px;height:22px;
  border-radius:50%;background:var(--ochre-tint);color:var(--ochre-deep);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.elementor-widget.sv-check-list .elementor-icon-list-icon svg{width:12px;height:12px;
  fill:none;stroke:currentColor;stroke-width:3}
@media(max-width:720px){.elementor-widget.sv-check-list .elementor-icon-list-items{grid-template-columns:1fr}} /* .check-list goes to one column at 720, the why grid at 560 */

/* = .wp-list / .wp-item: 42px tinted icon tile, bold 15.5 label over a 13.5 line */
.elementor-widget.sv-wp-list .elementor-icon-list-items{display:flex;flex-direction:column;
  gap:2px;margin-top:26px}
.elementor-section.sv-doc-sec .elementor-widget.sv-wp-list .elementor-icon-list-items{margin-top:18px}
.elementor-widget.sv-wp-list .elementor-icon-list-item{display:flex;align-items:stretch;gap:14px;
  padding:15px 12px 15px 4px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55;
  color:var(--ink-soft);transition:.3s var(--ease)}
.elementor-widget.sv-wp-list .elementor-icon-list-item:last-child{border-bottom:0}
.elementor-widget.sv-wp-list .elementor-icon-list-item:hover{padding-left:14px}
.elementor-widget.sv-wp-list .elementor-icon-list-icon{width:42px;height:42px;flex:none;
  border-radius:12px;background:var(--ochre-tint);color:var(--ochre-deep);display:flex;
  align-items:center;justify-content:center;margin:0;padding:0;transition:.3s var(--ease)}
.elementor-widget.sv-wp-list .elementor-icon-list-icon svg{width:21px;height:21px}
.elementor-widget.sv-wp-list .elementor-icon-list-item:hover .elementor-icon-list-icon{
  background:var(--brand-gradient);color:#fff;transform:rotate(-6deg) scale(1.05)}
.elementor-widget.sv-wp-list .elementor-icon-list-text{display:flex;flex-direction:column;
  justify-content:center;gap:3px;padding:0;margin:0}
.elementor-widget.sv-wp-list .elementor-icon-list-text strong{font-family:var(--head);font-weight:700;
  font-size:15.5px;line-height:1.25;color:var(--ink);display:block;transition:color .3s var(--ease)}
.elementor-widget.sv-wp-list .elementor-icon-list-item:hover strong{color:var(--ochre-deep)}
@media(max-width:520px){.elementor-widget.sv-wp-list .elementor-icon-list-item{gap:11px}
  .elementor-widget.sv-wp-list .elementor-icon-list-icon{width:36px;height:36px}
  .elementor-widget.sv-wp-list .elementor-icon-list-icon svg{width:18px;height:18px}}

.elementor-widget.sv-sc-list .elementor-icon-list-items{display:grid;gap:8px}
.elementor-widget.sv-sc-list .elementor-icon-list-item{gap:9px;font-size:14.5px;line-height:1.55}
.elementor-widget.sv-sc-list .elementor-icon-list-icon svg{width:13px;height:13px}

/* location pills */
.elementor-widget.sv-loc-list .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px;
  margin-top:16px}
.elementor-widget.sv-loc-list .elementor-icon-list-item{display:inline-flex;align-items:center;
  gap:8px;font-family:var(--head);font-weight:600;font-size:13.5px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);padding:9px 15px 9px 11px;
  border-radius:100px;transition:.25s var(--ease)}
.elementor-widget.sv-loc-list .elementor-icon-list-item:hover{border-color:var(--ochre);
  transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(198,61,38,.5)}
.elementor-widget.sv-loc-list .elementor-icon-list-text{color:var(--ink)}
.elementor-widget.sv-loc-list .elementor-icon-list-icon svg{width:15px;height:15px}

/* In-content links. site.css carries the .ilink rule, but Elementor ships
   `.elementor a{text-decoration:none}` at (0,1,1), which outranks a bare
   .ilink at (0,1,0) whatever the load order - so the underline that makes
   these read as links silently disappears. Match the same element one level
   deeper to win it back. */
.elementor a.ilink{text-decoration:underline;
  text-decoration-color:rgba(198,61,38,.38);text-underline-offset:3px;
  text-decoration-thickness:1px}
.elementor a.ilink:hover{text-decoration-color:var(--ochre);
  text-decoration-thickness:2px}

/* ---------------------------------------------------------------- tables
   The generator now emits the static build's own table markup into this
   widget - <div class="spec-table-wrap"><table class="spec-table"> - and that
   wrapper carries the border, radius, background and horizontal scroll. So the
   widget itself must stay a bare container: give it the box as well and every
   spec table renders as a box inside a box. site.css styles the rest; these
   rules only cover a widget whose content predates the wrapper. */
.elementor-widget.sv-spec-tablew{margin-top:20px}
.sv-spec-tablew > table{width:100%;border-collapse:collapse;min-width:520px;margin:0;
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white)}
.sv-spec-tablew > table th{text-align:left;font-family:var(--head);font-weight:700;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre-deep);
  background:var(--ochre-tint);padding:13px 16px;white-space:nowrap;border:0}
.sv-spec-tablew > table td{font-size:14px;color:var(--ink-soft);padding:13px 16px;border:0;
  border-top:1px solid var(--line);vertical-align:top}
.sv-spec-tablew > table tr:hover td{background:var(--off)}

/* ---------------------------------------------------------------- FAQ */
.elementor-column.sv-faq-wrap > .elementor-widget-wrap{max-width:880px;margin:0 auto}
.sv-faq .elementor-accordion-item,
.sv-faq .elementor-toggle-item{border:0;border-bottom:1px solid var(--line)}
.sv-faq .elementor-tab-title{padding:0;border:0;background:none}
.sv-faq .elementor-tab-title .elementor-accordion-title,
.sv-faq .elementor-tab-title .elementor-toggle-title{font-family:var(--head);font-weight:600;
  font-size:18px;color:var(--ink)}
.sv-faq .elementor-tab-title a{display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:20px 0;color:inherit;text-decoration:none}
.sv-faq .elementor-accordion-icon,
.sv-faq .elementor-toggle-icon{color:var(--ochre);float:none;width:auto;order:2;
  margin:0;text-align:right}
.sv-faq .elementor-accordion-icon svg,
.sv-faq .elementor-toggle-icon svg{width:18px;height:18px;stroke:var(--ochre)}
.sv-faq .elementor-tab-content{border:0;padding:0 0 20px;color:var(--ink-soft);font-size:16px;
  line-height:1.7;max-width:760px;background:none} /* .faq-a p inherits the page's 1.7 */
.sv-faq .elementor-tab-content p{margin:0}

/* ---------------------------------------------------------------- industries */
.elementor-section.sv-sh-contrib{background:var(--white)} /* .sh-contrib{background:var(--white)}; padding: .sv-pad (60 / 42) */
.elementor-column.sv-contrib-head > .elementor-widget-wrap{max-width:760px;margin-bottom:22px}
.elementor-column.sv-contrib-simple > .elementor-widget-wrap{display:none}

/* ---------------------------------------------------------------- gallery */
.elementor-column.sv-eg-grid > .elementor-widget-wrap{display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px}
.elementor-widget.sv-eg-item{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:4/3}
.elementor-widget.sv-eg-item img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .9s var(--ease)}
.elementor-widget.sv-eg-item:hover img{transform:scale(1.07)}
.elementor-widget.sv-eg-item::before{content:"";position:absolute;inset:auto auto -1px -1px;
  width:62%;height:5px;background:var(--brand-gradient);z-index:2}
@media(max-width:760px){.elementor-column.sv-eg-grid > .elementor-widget-wrap{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- misc */
.elementor-section.sv-bg-off{background-color:var(--off)}
.elementor-section.sv-bg-white{background-color:var(--white)}
.elementor-widget-image figure,.elementor-widget-image img{margin:0;display:block}
.elementor-widget-shortcode{width:100%}

/* ---------------------------------------------------------------- alignment */
/* Elementor centres icon-box and image-box by default; the design is left-aligned */
.sv-why-card .elementor-icon-box-wrapper,

/* ---------------------------------------------------------------- alignment */
/* Elementor centres icon-box and image-box by default; the design is left-aligned */
.sv-step-card .elementor-icon-box-wrapper,
.sv-sector-card .elementor-icon-box-wrapper,
.sv-shed-card .elementor-image-box-wrapper{text-align:left}
.sv-why-card .elementor-icon-box-icon,
.sv-step-card .elementor-icon-box-icon,
.sv-sector-card .sv-sc-head .elementor-icon-box-icon{margin-left:0;margin-right:auto}
.sv-shed-card .elementor-image-box-content{text-align:left}
.elementor-widget-icon-list .elementor-icon-list-item > a{width:100%}
.elementor-widget.sv-sc-img img,.elementor-widget.sv-eg-item img{width:100%;height:100%;
  object-fit:cover;display:block}

/* the grouped cards are inner sections, so they stretch as grid items */
.elementor-section.sv-sector-card{display:flex;flex-direction:column}
.elementor-section.sv-sector-card > .elementor-container{flex:1;align-items:stretch}
.elementor-section.sv-sector-card .elementor-column{display:flex;flex-direction:column}
.elementor-section.sv-sector-card .elementor-widget-wrap{flex:1;align-content:flex-start}

/* Elementor's position-top preset centres the card text; the design is flush left */
.sv-why-card.elementor-position-top .elementor-icon-box-wrapper,

/* Elementor's position-top preset centres the card text; the design is flush left */
.sv-step-card.elementor-position-top .elementor-icon-box-wrapper,
.sv-sector-card .elementor-position-top .elementor-icon-box-wrapper,
.sv-shed-card.elementor-position-top .elementor-image-box-wrapper{text-align:left}
.sv-why-card .elementor-icon-box-title,
.sv-step-card .elementor-icon-box-title,.sv-why-card .elementor-icon-box-description,.sv-step-card .elementor-icon-box-description,
.sv-sector-card .elementor-icon-box-title,.sv-sector-card .elementor-icon-box-description,
.sv-shed-card .elementor-image-box-title,.sv-shed-card .elementor-image-box-description{
  text-align:left}
.sv-why-card .elementor-icon-box-icon,
.sv-step-card .elementor-icon-box-icon,
.sv-sector-card .elementor-icon-box-icon{text-align:left;margin-left:0}
.sv-shed-card .elementor-image-box-img{text-align:left}

/* the card title is a link; give it a finger-sized hit area on a phone */
.sv-shed-card .elementor-image-box-title a,
.sv-c-item .elementor-image-box-title a{display:inline-block;padding:3px 0}

/* ---------------------------------------------------------------- scrolling */
/* Elementor's frontend.css sets html{scroll-behavior:smooth}. Lenis animates the
   scroll itself, so the two fight and the page stutters. Lenis requires the
   native behaviour to stay instant. */
@media (prefers-reduced-motion: no-preference) {
  html, html.lenis { scroll-behavior: auto !important; }
}
html { scroll-behavior: auto !important; }
html.lenis { height: auto; }
html.lenis body { overscroll-behavior: none; }

/* ---------------------------------------------------------------- editor */
/* Sections fade in on scroll (.reveal starts at opacity 0 and GSAP reveals it).
   Inside the Elementor editor the scroll trigger never fires, so every section
   below the hero looked blank. Show everything while editing. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .elementor-element,
.elementor-editor-active .reveal{opacity:1 !important;transform:none !important}
/* the hero slideshow frames are consumed by the adapter on the front end; in
   the editor they stay as ordinary image widgets so they can be swapped */
.sv-hero-slides{display:none}
body.elementor-editor-active .sv-hero-slides{display:block}

/* ======================================================================
   Homepage. The design itself lives in home.css, which also carries a
   generated bridge onto Elementor's widget markup. Only the things Elementor's
   own markup forces belong here.
   ====================================================================== */

/* Elementor writes a per-column width rule that beats the track's max-content */
.elementor-column.marquee-track,.elementor-column.quote-track{width:max-content}
.elementor-section.marquee-row,.elementor-section.quote-marquee{overflow:hidden;width:100%}
.elementor-section.marquee-row > .elementor-container,
.elementor-section.quote-marquee > .elementor-container{max-width:none;padding:0;width:max-content}

/* an image-box sizes its figure as a side column; every card here is full width */
.sv-svc-card .elementor-image-box-wrapper,.sv-mat-card .elementor-image-box-wrapper,
.sv-ind-card .elementor-image-box-wrapper{display:block}
.sv-svc-card .elementor-image-box-img,.sv-mat-card .elementor-image-box-img,
.sv-ind-card .elementor-image-box-img{width:100% !important;margin:0 !important;display:block}
.sv-svc-card .elementor-image-box-img a,.sv-mat-card .elementor-image-box-img a,
.sv-ind-card .elementor-image-box-img a{display:block;height:100%}

/* an icon-box centres itself; only the stats band is centred in this design */
.sv-why-card .elementor-icon-box-wrapper,.sv-role-tile .elementor-icon-box-wrapper{text-align:left}
.sv-why-card .elementor-icon,.sv-role-tile .elementor-icon{margin-left:0;margin-right:0}
.sv-role-tile .elementor-icon-box-icon{margin-bottom:0}

/* the design spaces its own elements; Elementor's stock widget gap doubles it */
body.home .elementor-widget:not(:last-child){margin-bottom:0}
body.home .elementor-section .elementor-container{align-items:flex-start}

/* the card title is the only element Elementor links; give it the card's reach */
.elementor-section.guide-card,.elementor-widget.sv-svc-card,
.elementor-widget.sv-mat-card,.elementor-widget.sv-ind-card{position:relative}
.sv-svc-card .elementor-image-box-title a::after,
.sv-mat-card .elementor-image-box-title a::after,
.sv-ind-card .elementor-image-box-title a::after{content:"";position:absolute;inset:0}
.sv-svc-card .elementor-image-box-title a,
.sv-mat-card .elementor-image-box-title a,
.sv-ind-card .elementor-image-box-title a{display:block;padding:4px 0}


/* An inner section standing in for a card must not re-impose the boxed
   container width, or the card collapses to the page gutter. */
.elementor-section.proj-card > .elementor-container,
.elementor-section.guide-card > .elementor-container,
.elementor-section.sv-quote-card > .elementor-container,
.elementor-section.why-lead > .elementor-container{max-width:none;padding:0;width:100%}

/* The adapter inserts plain divs into Elementor's flex widget wrap, where a box
   with no intrinsic width shrinks to its content - the industries list came out
   a third of its width, and the before/after panel resolved to zero height. */
.elementor-widget-wrap > .ba-slider,
.elementor-widget-wrap > .contrib-list,
.elementor-widget-wrap > .contrib-float{width:100%;flex:0 0 100%}

/* Elementor's widget wrap wraps; a marquee track is a single line by design */
.elementor-column.marquee-track > .elementor-widget-wrap,
.elementor-column.quote-track > .elementor-widget-wrap{flex-wrap:nowrap}

/* The design assumes normal block flow, where a section head's bottom margin
   collapses with the following grid's top margin. Elementor's widget wrap is a
   flex container, which suppresses collapsing and doubles every gap. The
   homepage bridge re-declares display on the wraps that need it. */
body.sv-front .elementor-column > .elementor-widget-wrap{display:block}

/* Elementor's column keeps a short used height in this nesting - the wrap
   measures 395px while its column measures 300px, with no rule setting either.
   An explicit height:auto forces the column to size from its content again. */
body.sv-front .elementor-column{height:auto}

/* ================= THE ELEMENTOR CANVAS ONLY (.sv-editing) =================
   Never reaches the live site: sv-editing is added only when
   Preview::is_preview_mode() is true. main.js is deliberately inert in the
   canvas, so the two blocks it normally positions fall back into flow - the
   hero's seven slides stack full-size (2712px instead of 900) and the
   before/after pairs stack one per row. Both are still real, selectable
   widgets; they just need a layout to be editable without endless scrolling.
   Slides become a thumbnail strip, which is how you want to edit a slideshow
   anyway: every slide visible at once, each one still click-to-swap. */
.sv-editing .sv-hero-slides > .elementor-widget-wrap{display:flex;flex-wrap:wrap;
  gap:10px;align-content:flex-start;padding:18px}
.sv-editing .sv-hero-slides .elementor-widget-image{flex:0 0 118px;width:118px;margin:0}
.sv-editing .sv-hero-slides .elementor-widget-image img{width:100%;height:84px;
  object-fit:cover;border-radius:8px;display:block}
/* the pairs read as before | after, side by side, at a size you can judge */
.sv-editing .sv-ba-before,.sv-editing .sv-ba-after{display:inline-block;
  width:calc(50% - 10px);vertical-align:top;margin:0 4px 6px 0}
.sv-editing .sv-ba-before img,.sv-editing .sv-ba-after img{height:190px;
  width:100%;object-fit:cover;border-radius:8px;display:block}
/* The industries rows are the source for the cursor-follow list main.js builds,
   so the front end hides them (line ~318) and shows the generated list instead.
   In the canvas main.js never runs, so hiding them leaves ten real widgets
   present but invisible and unclickable - the client cannot edit an industry at
   all. Show them here as a plain readable list. */
.sv-editing .elementor-column.sv-contrib-simple > .elementor-widget-wrap{display:flex;
  flex-wrap:wrap;gap:10px 14px;margin-top:26px;border-top:1px solid var(--line);
  padding-top:20px}
.sv-editing .sv-contrib-simple .sv-c-item{flex:0 0 calc(33.333% - 10px);margin:0;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--white)}
.sv-editing .sv-contrib-simple .sv-c-item .elementor-image-box-img{display:none}
.sv-editing .sv-contrib-simple .sv-c-item .elementor-image-box-title{font-family:var(--disp);
  font-weight:600;font-size:15.5px;color:var(--ink);margin:0}
@media(max-width:900px){.sv-editing .sv-contrib-simple .sv-c-item{flex:0 0 calc(50% - 8px)}}

/* Elementor ships `.elementor img{height:auto}`, which loads after site.css and
   ties on specificity with `.cf-frame img{height:100%}` - so the industries
   hover frames showed a short image floating in a 248px box instead of filling
   it. Same for any other fixed-ratio frame the design fills with a photo.
   The HERO SLIDESHOW is the worst case: an absolutely-positioned replaced
   element with height:auto resolves to its intrinsic ratio, so on a phone the
   slide covered only the top ~290px of the 844px hero and the section's
   fallback background showed through underneath with a different crop - the
   "split hero" the client reported as not responsive (5 Sep). */
.elementor .cf-frame img,
.elementor .contrib-float img,
.elementor .hero-bg img.hero-slide,
.elementor .ba-slider img{width:100%;height:100%;object-fit:cover;display:block}

/* mobile heading alignment, standardized (5-Sep): every section heading goes
   left on a phone, matching the hero, splits and body text. Desktop unchanged. */
@media(max-width:640px){
  .elementor-column.sv-sec-head > .elementor-widget-wrap,
  .elementor-column.sv-sec-head.sv-center > .elementor-widget-wrap{text-align:left;align-items:flex-start}
  .elementor-column.sv-contrib-head > .elementor-widget-wrap{text-align:left}
}

/* ============================================================= 4-Sep parity
   The Elementor side of the WIDE_CSS port (see site.css tail for the static-
   markup side): full-width justified section leads (FAQ keeps 760), split
   photos fill their column, the "Types of" cards sit in a static grid, and
   the project gallery reuses the end-gallery card look, 2-up on a phone.
   Keep after the earlier sv-sec-head / sv-sh-split / sv-shed-card rules -
   these win on cascade order. */
.elementor-column.sv-sec-head > .elementor-widget-wrap,
.elementor-column.sv-contrib-head > .elementor-widget-wrap{max-width:none}
.elementor-widget.sv-wp-lead{max-width:none}
.elementor-column.sv-faq-wrap .elementor-column.sv-sec-head > .elementor-widget-wrap{max-width:760px}
.elementor-section.sv-doc-sec .elementor-column.sv-sec-body > .elementor-widget-wrap{max-width:none}
.elementor-column.sv-sec-head .elementor-widget-text-editor:not(.sv-eyebrow) p,
.elementor-column.sv-contrib-head .elementor-widget-text-editor:not(.sv-eyebrow) p,
.elementor-column.sv-sec-body .elementor-widget-text-editor p,
.elementor-section.sv-sh-split > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor:not(.sv-loc-list):not(.sv-cta-line) p,
.elementor-widget.sv-wp-lead p{text-align:justify;text-justify:inter-word}
.elementor-section.sv-sh-split > .elementor-container{align-items:stretch}
.elementor-section.sv-sh-split > .elementor-container > .elementor-column > .elementor-widget-wrap{display:flex;flex-direction:column;justify-content:center;height:100%}
.elementor-widget.sv-sh-media{aspect-ratio:auto;min-height:420px;height:100%}
/* the intro (#intro, not an sv-sh-split) needs the same two links in the chain:
   the photo column's wrap must fill the stretched column, and the img must beat
   Elementor's own `.elementor img{height:auto}` - or the photo stops at its
   intrinsic ratio inside a 340px box while the fact cards run on below it */
#intro > .elementor-container > .elementor-column > .elementor-widget-wrap{height:100%}
#intro .elementor-widget.sv-sh-media img,
.elementor-section.sv-sh-split .elementor-widget.sv-sh-media img{width:100%;height:100%;object-fit:cover;display:block}
.elementor-column.sv-type-grid > .elementor-widget-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.elementor-column.sv-type-grid .elementor-widget.sv-shed-card{width:auto}
@media(max-width:1000px){.elementor-column.sv-type-grid > .elementor-widget-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.elementor-widget.sv-sh-media{aspect-ratio:4/3;min-height:0;height:auto}}
@media(max-width:640px){
.elementor-column.sv-sec-head .elementor-widget-text-editor:not(.sv-eyebrow) p,
.elementor-column.sv-contrib-head .elementor-widget-text-editor:not(.sv-eyebrow) p,
.elementor-column.sv-sec-body .elementor-widget-text-editor p,
.elementor-section.sv-sh-split > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor:not(.sv-loc-list):not(.sv-cta-line) p,
.elementor-widget.sv-wp-lead p{text-align:left}}
@media(max-width:560px){.elementor-column.sv-type-grid > .elementor-widget-wrap{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- phone parity, 17 Sep
   Measured against the static pages at 390px (build/tests/mobile_parity.js). Every
   rule here is a static-side value the mapping had only for desktop. */
/* the 20px phone gutter above matches .elementor-inner-section too (same
   specificity, later in the file) - every nested block sat 40px in, not 20 */
@media(max-width:640px){.elementor-inner-section > .elementor-container{padding:0}}
/* hero: .sh-hero-inner keeps its 40px gutter on a phone and drops to 112/46 */
.elementor-section.sv-sh-hero > .elementor-container{padding:0 40px}
/* CTA band: .sec-cta-band at <=620 tightens and runs its buttons full width */
@media(max-width:620px){
  .elementor-column.sv-sec-cta-band > .elementor-widget-wrap{padding:22px 20px 22px 24px}
  .elementor-column.sv-sec-cta-band .elementor-widget-button{flex:1 1 100%;width:100%}
  .elementor-column.sv-sec-cta-band .elementor-widget-button .elementor-button{width:100%;justify-content:center}}
/* FAQ: Elementor puts the icon span BESIDE the <a>, not inside it, so the flex
   on the <a> never reached it and it sat on its own line above the question.
   The title row is the flex box, as .faq-q is. */
.sv-faq .elementor-tab-title{display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:20px 0;line-height:1.7}
.sv-faq .elementor-tab-title a{display:block;flex:1;padding:0;line-height:1.7}
.sv-faq .elementor-tab-title .elementor-toggle-title,
.sv-faq .elementor-tab-title .elementor-accordion-title{line-height:1.7}
.sv-faq .elementor-accordion-icon,.sv-faq .elementor-toggle-icon{flex:none;display:flex;align-items:center}
/* intro key-fact cards: .intro-cards .why-card:has(p) - a rounded box, not the pill */
.elementor-column.sv-intro-cards .elementor-widget.sv-why-card{border-radius:28px;padding:16px 26px 16px 14px}
.elementor-column.sv-intro-cards .sv-why-card .elementor-icon-box-description{margin-top:4px;font-size:14px;line-height:1.5}
/* .why-card h3 is the display face at 600, not the heading face at 700 */
.sv-why-card .elementor-icon-box-title,.sv-step-card .elementor-icon-box-title{font-family:var(--disp);font-weight:600}
/* place pills: Elementor pads the text and icon of an inline list; .loc-chip has gap:8px only */
.elementor-widget.sv-loc-list .elementor-icon-list-item{gap:8px}
.elementor-widget.sv-loc-list .elementor-icon-list-icon{margin:0;padding:0;width:15px}
.elementor-widget.sv-loc-list .elementor-icon-list-text{padding:0;margin:0}
.elementor-widget.sv-loc-list .elementor-icon-list-items{margin:0}

/* ---- typography measured off the static generated pages (17 Sep) ----
   base: h1-h4 line-height 1.08 (the doc-sec head is the one at 1.14);
   .sh-split p / .sh-why p 16px/1.78; .doc-sec .sec-body > p 16.5/1.8 with the
   first one 17.5/1.75 in ink; .sec-head p 18/1.7 - and that rule also reaches
   the eyebrow pill (p.eyebrow), so the static eyebrow renders at 18px, 16px
   inside .sh-why. Mirrored here on purpose: the client signed off the static
   pages as they are. */
h2.elementor-heading-title{line-height:1.08}
.elementor-section.sv-doc-sec .sv-sec-head h2.elementor-heading-title{line-height:1.14}
.elementor-widget.sv-split-h2 h2.elementor-heading-title{line-height:1.08}
.elementor-section.sv-sh-split .elementor-widget-text-editor:not(.sv-eyebrow):not(.sv-cta-line):not(.sv-list-label),
#intro .elementor-widget-text-editor:not(.sv-eyebrow):not(.sv-cta-line):not(.sv-list-label),
.elementor-section.sv-sh-why .elementor-widget-text-editor:not(.sv-eyebrow):not(.sv-cta-line):not(.sv-list-label){font-size:16px;line-height:1.78}
.elementor-column.sv-sec-head .elementor-widget-text-editor:not(.sv-eyebrow) p{font-size:18px;line-height:1.7}
.elementor-section.sv-sh-why .elementor-column.sv-sec-head .elementor-widget-text-editor:not(.sv-eyebrow) p{font-size:16px;line-height:1.78}
.elementor-section.sv-doc-sec .elementor-column.sv-sec-body > .elementor-widget-wrap > .elementor-inner-section + .elementor-widget-text-editor:not(.sv-spec-tablew) p{font-size:17.5px;line-height:1.75;color:var(--ink)}
/* the eyebrow pill, as .eyebrow + the .sec-head p leak: 18px/1.7, 7px 18px,
   hairline border, 22px gradient dash, 20px above (the leaked margin-top) */
.elementor-widget.sv-eyebrow p{font-size:18px;line-height:1.7;letter-spacing:.14em;gap:8px;
  padding:7px 18px;border:1px solid rgba(198,61,38,.18);margin:0}
.elementor-widget.sv-eyebrow p::before{width:22px;height:1.5px;background:var(--brand-gradient)}
.elementor-section.sv-sh-why .elementor-widget.sv-eyebrow p{font-size:16px;line-height:1.78}
.elementor-column.sv-sec-head .elementor-widget.sv-eyebrow{margin-top:20px}
.elementor-column.sv-sec-head .elementor-widget.sv-eyebrow + .elementor-widget-heading{margin-top:18px}
.elementor-column.sv-sec-head .elementor-widget-text-editor:not(.sv-eyebrow){margin-top:20px}
/* pieces that carry their own top margin in site.css - no widget margin on top */
.elementor-column.sv-sec-body .elementor-widget.sv-spec-tablew{margin-top:0}
.elementor-column.sv-sec-body .elementor-widget.sv-loc-list{margin-top:26px}
.elementor-widget.sv-loc-list .elementor-icon-list-item{margin:0}
/* a tail that opens with the CTA band: the 34px is the tail's, not the band's too */
.sv-tail-gap > .elementor-widget-wrap > .elementor-inner-section:first-child .sv-sec-cta-band > .elementor-widget-wrap{margin-top:0}
/* hero tag: .sh-tag is 12px / .15em */
.sv-sh-hero .elementor-widget.sv-sh-tag p{font-size:12px;letter-spacing:.15em}
/* type cards = .shed-card: 180px photo (146 on a phone), 15px 17px 16px body,
   15.5px/1.25 two-line title, 12.5px/1.5 three-line blurb */
.sv-shed-card .elementor-image-box-img img{height:180px}
.sv-shed-card .elementor-image-box-content{padding:15px 17px 16px}
.sv-shed-card .elementor-image-box-title{font-size:15.5px;line-height:1.25;min-height:2.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-shed-card .elementor-image-box-description{font-size:12.5px;line-height:1.5;margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:560px){.sv-shed-card .elementor-image-box-img img{height:146px}}
/* .sh-split p{margin-top:16px} reaches the first paragraph too - under the split
   h2 and at the top of the intro copy */
.elementor-widget.sv-split-h2 h2.elementor-heading-title{margin-bottom:0}
.elementor-widget.sv-split-h2 + .elementor-widget-text-editor{margin-top:16px}
#intro .elementor-column.sv-intro-copy > .elementor-widget-wrap > .elementor-widget-text-editor:first-child{margin-top:16px}
/* the image-box figure is inline-block and leaves a descender gap under the photo */
.sv-shed-card .elementor-image-box-img{display:block;line-height:0}
.sv-shed-card .elementor-image-box-img a{display:block}
.sv-shed-card .elementor-image-box-img img{transform:scale(1.02);transition:transform .5s var(--ease)}
.elementor-widget.sv-shed-card:hover .elementor-image-box-img img{transform:scale(1.1)}
/* Elementor's inline list spaces items with margins; .loc-list uses gap:10px only */
.elementor-widget-icon-list.sv-loc-list .elementor-icon-list-items.elementor-inline-items{margin:0}
.elementor-widget-icon-list.sv-loc-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin:0}
/* ---- after the head: static margins COLLAPSE (.sec-head margin-bottom 26 against
   the next block's own margin-top -> the larger wins); Elementor's flex columns
   add them. So the head carries no bottom margin here and the block after it
   supplies the collapsed value: 26 for copy and lists, or the grid's own
   (type 32, why 30, sector 36, band 34, table 28, h3 28) which it already has. */
.elementor-column.sv-sec-head > .elementor-widget-wrap{margin-bottom:0}
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget{margin-top:26px}
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-spec-tablew,
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-sec-sub{margin-top:0}
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-loc-list{margin-top:26px}
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget-toggle,
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget-accordion{margin-top:26px}
/* .sec-head h2 sits 18px under whatever precedes it - the eyebrow or the section edge */
.elementor-column.sv-sec-head .elementor-widget-heading{margin-top:18px}
.elementor-section.sv-sh-why .elementor-column.sv-sec-head .elementor-widget.sv-eyebrow{margin-top:16px}
/* a tail that opens with the "also on rent" box: its 8px collapses into the tail's 34 */
.sv-tail-gap > .elementor-widget-wrap > .elementor-widget:first-child .alt-rent{margin-top:0}
/* #intro at <=900 is the plain .sh-split gap, 30 */
@media(max-width:900px){#intro > .elementor-container{gap:30px}}
/* line-height these inherit from body (1.7) on the static side, not the text-editor's 1.8 */
.sv-sh-hero .elementor-widget.sv-sh-tag p{line-height:1.7}
.elementor-widget-text-editor .alt-rent{line-height:1.7}
/* the plain (doc-sec) shell writes margin-bottom:18px on its head inline */
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget{margin-top:18px}
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-spec-tablew,
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-sec-sub{margin-top:0}
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-loc-list{margin-top:26px}
/* pieces whose inner element carries the static margin already */
.elementor-column.sv-sec-body .elementor-widget.sv-sec-sub{margin-top:0}
.elementor-widget.sv-sec-sub h3.elementor-heading-title{line-height:1.08}
.elementor-widget.elementor-widget-text-editor.sv-list-label,
.elementor-column.sv-sec-body .elementor-widget.sv-list-label{margin-top:24px}
.elementor-widget.sv-list-label p{margin-top:0}
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-list-label{margin-top:26px}
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-list-label{margin-top:24px}
/* icon-box: Elementor's own icon spacing (margin-inline-end 15) doubled the pill's gap */
.elementor-widget.sv-why-card .elementor-icon-box-wrapper .elementor-icon-box-icon,
.elementor-widget.sv-step-card .elementor-icon-box-wrapper .elementor-icon-box-icon{margin:0}
/* .doc-sec .why-card h3 is 17.5px (process steps) */
.elementor-section.sv-doc-sec .sv-why-card .elementor-icon-box-title{font-size:17.5px}
/* .contrib-head: h2 18px under the eyebrow, p 16/1.75 18px under, the eyebrow itself 16/1.75
   through the same .contrib-head p rule; the rows carry the 42px */
.elementor-column.sv-contrib-head > .elementor-widget-wrap{margin-bottom:0}
.elementor-column.sv-contrib-head .elementor-widget.sv-eyebrow p{font-size:16px;line-height:1.75}
.elementor-column.sv-contrib-head .elementor-widget.sv-eyebrow{margin-top:18px}
.elementor-column.sv-contrib-head .elementor-widget-heading{margin-top:18px}
.elementor-column.sv-contrib-head .elementor-widget-text-editor:not(.sv-eyebrow){margin-top:18px}
.elementor-column.sv-contrib-head .elementor-widget-text-editor:not(.sv-eyebrow) p{font-size:16px;line-height:1.75}
/* Elementor pads the text of every icon list; .check-item spaces with gap only */
.elementor-widget.sv-check-list .elementor-icon-list-text{padding:0;margin:0}
.elementor-widget.sv-check-list .elementor-icon-list-icon{margin-right:0}

/* ---- 18 Sep, second pass of the phone diff ----------------------------------- */
/* list labels. Outside .doc-sec: .sh-split p.list-label / .list-label = 15.5 bold
   ink, 24px above. Inside .doc-sec the static `.doc-sec .sec-body > p` outranks
   .list-label on size, colour and margin (16.5/1.8, ink-soft, 16px) - bold only. */
.elementor-widget.elementor-widget-text-editor.sv-list-label.elementor-element{margin-top:24px}
.elementor-section.sv-doc-sec .elementor-widget.elementor-widget-text-editor.sv-list-label.elementor-element{margin-top:16px}
.elementor-section.sv-doc-sec .elementor-widget.sv-list-label p{font-size:16.5px;line-height:1.8;color:var(--ink-soft)}
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-list-label.elementor-element{margin-top:18px}
/* sector cards. No photo: a 52px white badge with an ochre ring (.sc-img.sc-noimg),
   22px in from the top-left, 16px above the title. Copy is the page default, 15/1.7,
   no margins; the bullet list is 12px under it with an 8px gradient dot. */
.sv-sector-card .sv-sc-head .elementor-icon{background:var(--white);border:1.5px solid var(--ochre);
  color:var(--ochre);margin:0 0 16px}
.sv-sector-card .elementor-widget.sv-sc-head{padding:22px 22px 0}
.sv-sector-card .elementor-widget-text-editor{font-size:15px;line-height:1.7;color:var(--ink-soft)}
.sv-sector-card .elementor-widget-text-editor + .elementor-widget-text-editor{margin-top:0}
.elementor-widget.sv-sc-list .elementor-icon-list-item{gap:12px;align-items:flex-start}
.elementor-widget.sv-sc-list .elementor-icon-list-icon{width:8px;height:8px;flex:none;border-radius:50%;
  background:var(--brand-gradient);margin:8px 0 0;padding:0}
.elementor-widget.sv-sc-list .elementor-icon-list-icon svg{display:none}
.elementor-widget.sv-sc-list .elementor-icon-list-text{padding:0;margin:0}
/* a section's tail outside .doc-sec (the loose copy after a card grid): plain
   page paragraphs, 15/1.7 and no margin between them, as the static .sec-body */
.elementor-section:not(.sv-doc-sec) .elementor-column.sv-tail-gap .elementor-widget-text-editor:not(.sv-list-label):not(.sv-eyebrow):not(.sv-cta-line){font-size:15px;line-height:1.7}
.elementor-section:not(.sv-doc-sec) .elementor-column.sv-tail-gap .elementor-widget-text-editor + .elementor-widget-text-editor{margin-top:0}
/* process steps in a .doc-sec are the boxed .why-card (24px 22px, 16px radius,
   badge above a 17.5px title over 14.5px copy), not the .sh-why pill */
.elementor-section.sv-doc-sec .elementor-widget.sv-why-card{display:block;border-radius:var(--radius);padding:24px 22px}
.elementor-section.sv-doc-sec .sv-why-card .elementor-icon-box-wrapper{display:block}
.elementor-section.sv-doc-sec .sv-why-card .elementor-icon{width:48px;height:48px;color:var(--ochre)}
.elementor-section.sv-doc-sec .sv-why-card .elementor-icon-box-title{margin-top:18px;font-size:17.5px;line-height:1.3}
.elementor-section.sv-doc-sec .sv-why-card .elementor-icon-box-description{margin-top:8px;font-size:14.5px;line-height:1.6}
.elementor-section.sv-doc-sec .elementor-column.sv-why-grid > .elementor-widget-wrap{margin-top:30px} /* .doc-sec .why-grid{margin-top:30px} */
/* .sh-split p{margin-top:16px} - after a list too, not only after another paragraph */
.elementor-section.sv-sh-split .elementor-widget + .elementor-widget-text-editor:not(.sv-list-label){margin-top:16px}
/* the h3 the toggle title sits in carries the base heading letter-spacing (-.01em);
   .faq-q is a button and has none - the tighter text wrapped a line early */
.sv-faq .elementor-tab-title,.sv-faq .elementor-tab-title a{letter-spacing:0}
/* Elementor's icon-box adds its own 15px under the icon (position=top) */
.elementor-widget-icon-box.sv-sc-head .elementor-icon-box-wrapper .elementor-icon-box-icon{margin:0}
/* ---- 18 Sep, third pass ------------------------------------------------------ */
/* Elementor 3.2x spaces the icon-box parts with a flex gap; the design's badge margin is the only space */
.elementor-widget.elementor-widget-icon-box.sv-sc-head{--icon-box-icon-margin:0px}
.elementor-widget.elementor-widget-icon-box.sv-sc-head .elementor-icon-box-wrapper{gap:0}
/* tails inside .sh-why / .sh-split keep those sections' paragraph style (16/1.78, 16px apart) */
.elementor-section.sv-sh-why .elementor-column.sv-tail-gap .elementor-widget-text-editor:not(.sv-list-label):not(.sv-eyebrow):not(.sv-cta-line),
.elementor-section.sv-sh-split .elementor-column.sv-tail-gap .elementor-widget-text-editor:not(.sv-list-label):not(.sv-eyebrow):not(.sv-cta-line){font-size:16px;line-height:1.78}
.elementor-section.sv-sh-why .elementor-column.sv-tail-gap .elementor-widget + .elementor-widget-text-editor:not(.sv-list-label),
.elementor-section.sv-sh-split .elementor-column.sv-tail-gap .elementor-widget + .elementor-widget-text-editor:not(.sv-list-label){margin-top:16px}
/* an h3 opening a tail: its 28px collapses into the tail's 34 on the static side */
.sv-tail-gap > .elementor-widget-wrap > .elementor-widget.sv-sec-sub:first-child h3.elementor-heading-title{margin-top:0}
/* lists carry their own top margin in site.css (.wp-list 26/18, .check-list 24) - none on the widget */
.elementor-column.sv-sec-body .elementor-widget.sv-wp-list,
.elementor-column.sv-sec-body .elementor-widget.sv-check-list{margin-top:0}
.elementor-widget.sv-check-list .elementor-icon-list-items{margin-top:24px}
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-check-list{margin-top:2px}
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-check-list{margin-top:0}
/* a linked check-list item: the phone tap padding must not grow the line (static .ilink is inline) */
.elementor-widget.sv-check-list .elementor-icon-list-text a.ilink{display:inline}
/* the split h2 is written inline with letter-spacing:-.02em (the section heads use -.025) */
.elementor-widget.sv-split-h2 h2.elementor-heading-title{letter-spacing:-.02em}
/* the type-card title link keeps its 25px tap height without growing the two-line box */
.sv-shed-card .elementor-image-box-title a{display:inline;padding:3px 0;margin:0} /* inline: the padding widens the hit area, not the line */
/* a labelled list straight after the head: its own 18/26 is the collapsed value */
.elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-wp-list,
.elementor-section.sv-doc-sec .elementor-column .elementor-section.sv-sec-head-sec + .elementor-widget.sv-wp-list{margin-top:0}
/* the sec-body's 16px widget spacing reached the cards of a grid nested in it (process steps) */
.elementor-column.sv-sec-body .elementor-column.sv-why-grid > .elementor-widget-wrap > .elementor-widget{margin-top:0}

/* ---- 18 Sep, desktop pass (build/tools/layout_parity.py all 1440) ------------ */
/* hero = .sh-hero: min-height min(80vh,660px), content centred; the paddings are
   .sh-hero-inner's (132/58, 112/46 under 900) - not 150/64 pinned to the bottom */
.elementor-section.sv-sh-hero{min-height:min(80vh,660px);align-items:center;padding:0}
.elementor-section.sv-sh-hero > .elementor-container{padding:132px 40px 58px}
@media(max-width:900px){.elementor-section.sv-sh-hero > .elementor-container{padding:112px 40px 46px}}
/* the FAQ list is a .wrap of its own: 880 outer with the 40px gutter = 800 inside */
.elementor-column.sv-faq-wrap > .elementor-widget-wrap{max-width:800px}
/* the why head is written style="max-width:900px" - inline beats the max-width:none port */
.elementor-section.sv-sh-why .elementor-column.sv-sec-head > .elementor-widget-wrap{max-width:900px}
/* #intro .sh-split is 1.34fr .66fr of the row minus its 52px gap; Elementor's 66/34
   percentages are of the full row and shrink unevenly */
#intro .elementor-column.sv-intro-copy{width:calc((100% - 52px) * .67)!important}
#intro .elementor-column.elementor-col-34{width:calc((100% - 52px) * .33)!important}
@media(max-width:900px){#intro .elementor-column.sv-intro-copy,#intro .elementor-column.elementor-col-34{width:100%!important}}
/* .sh-split > div > p is justified on the intro too, and the CTA line never is */
#intro .elementor-column.sv-intro-copy > .elementor-widget-wrap > .elementor-widget-text-editor p{text-align:justify;text-justify:inter-word}
@media(max-width:640px){#intro .elementor-column.sv-intro-copy > .elementor-widget-wrap > .elementor-widget-text-editor p{text-align:left}}
.elementor-widget.sv-cta-line p{text-align:start}
/* .contrib-head: centred block, its paragraph justified (the WIDE rules), left under 640 */
.elementor-column.sv-contrib-head > .elementor-widget-wrap{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
.elementor-column.sv-contrib-head .elementor-widget-text-editor:not(.sv-eyebrow) p{text-align:justify;text-justify:inter-word}
@media(max-width:640px){.elementor-column.sv-contrib-head > .elementor-widget-wrap{text-align:left}
  .elementor-column.sv-contrib-head .elementor-widget-text-editor:not(.sv-eyebrow) p{text-align:left}}
/* the button arrow: the static <span class="arrow">, 10px off the label, slides on hover */
.elementor-widget-button.sv-btn-arrow .elementor-button-text::after{content:"\2192";display:inline-block;margin-left:10px;transition:transform .35s var(--ease)}
.elementor-widget-button.sv-btn-arrow .elementor-button:hover .elementor-button-text::after{transform:translateX(5px)}
/* every static check-list is .two-col: a 2-column grid with a 38px column gap and 2px under each item */
.elementor-widget.sv-check-list .elementor-icon-list-items{gap:14px 38px}
.elementor-widget.sv-check-list .elementor-icon-list-item{margin-bottom:2px}
/* the CTA line is never justified (the sec-body justify rule outranked the plain one) */
.elementor-column.sv-sec-body .elementor-widget.sv-cta-line p,
.elementor-column .elementor-widget.sv-cta-line.elementor-widget-text-editor p{text-align:start}
/* .sh-hero h1{max-width:none} under 900 - the 16ch cap is a desktop measure */
@media(max-width:900px){.sv-sh-hero h1.elementor-heading-title{max-width:none}}
/* the static "+" glyph is 15px wide; an 18px svg took 3px off the question and wrapped it a line early */
.sv-faq .elementor-accordion-icon,.sv-faq .elementor-toggle-icon{width:15px}
.sv-faq .elementor-accordion-icon svg,.sv-faq .elementor-toggle-icon svg{width:15px}

/* ---- /sheds/ hub as an Elementor document (18 Sep) ---- */
/* gen_sheds.py. Every value is site.css's, moved onto the widget markup the
   way home.css bridges the homepage's .stat-item. */
/* the hero h1's <em> is the gradient word, as .sh-hero h1 em on the static page */
.sv-sh-hero h1.elementor-heading-title em{font-style:normal;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
/* .stats-band / .stats-grid / .stat-item */
.elementor-section.sv-stats-band{background:var(--white);border-bottom:1px solid var(--line);padding:22px 0}
.elementor-column.sv-stats-grid > .elementor-widget-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:760px){.elementor-column.sv-stats-grid > .elementor-widget-wrap{grid-template-columns:1fr 1fr;gap:20px 16px}}
.elementor-widget.elementor-widget-icon-box.sv-stat-item{--icon-box-icon-margin:0px}
.elementor-widget.sv-stat-item .elementor-icon-box-wrapper .elementor-icon-box-icon{margin:0;text-align:center}
.sv-stat-item .elementor-icon{width:48px;height:48px;border-radius:50%;background:var(--ochre-tint);color:var(--ochre-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.sv-stat-item .elementor-icon svg{width:23px;height:23px}
.sv-stat-item .elementor-icon-box-title{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:0;margin:0; /* .stat-num is a div: none of the h3 -.01em */background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-stat-item .elementor-icon-box-description{font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
/* .sh-why-grid: 1.28fr .72fr with a 44px gap (the columns are 64 / 36), one column under 900 */
.elementor-section.sv-sh-why-grid > .elementor-container{display:flex;align-items:flex-start;gap:44px;position:relative;z-index:1}
.elementor-section.sv-sh-why-grid .elementor-column{min-width:0}
@media(max-width:900px){.elementor-section.sv-sh-why-grid > .elementor-container{flex-direction:column;gap:28px}
  .elementor-section.sv-sh-why-grid .elementor-column{width:100%!important}}
/* .sh-callcard: the column is the card */
.elementor-column.sv-sh-callcard > .elementor-widget-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);text-align:center}
.elementor-widget.sv-call-line p{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--ink-soft);margin:0;line-height:1.7}
.elementor-widget.sv-call-num .elementor-heading-title{margin:6px auto 0;width:fit-content;font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.1vw,42px);letter-spacing:-.02em;line-height:1;transition:.25s var(--ease)}
.elementor-widget.sv-call-num .elementor-heading-title,
.elementor-widget.sv-call-num .elementor-heading-title a{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.elementor-column.sv-sh-callcard .elementor-widget-button{margin-top:20px}
.elementor-column.sv-sh-callcard .elementor-widget-button .elementor-button{width:100%;justify-content:center}
/* the hub's own trail travels as a text widget (a middle link the page-tree crumb cannot write) */
.sv-sh-hero .elementor-widget.sv-crumb-box .sh-crumb{margin-bottom:20px}
/* the hub predates the generated pages' justified copy: its split and lead paragraphs
   are left-set and its industries head is centred */
body.sv-hub .elementor-section.sv-sh-split > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor:not(.sv-loc-list):not(.sv-cta-line) p,
body.sv-hub .elementor-widget.sv-wp-lead p{text-align:start}
.elementor-widget.sv-crumb-box .sh-crumb{line-height:1.7} /* the trail keeps the page rhythm, not the text editor's 1.8 */
/* .sh-why-grid sits 26px under the head (the head's collapsed margin) */
body.sv-hub .elementor-inner-section.sv-sh-why-grid{margin-top:26px}
/* the hub's sub-nav source widget: no gutter or padding of its own (main.js moves the
   <nav> out of it on the front end; in the editor it shows in place) */
.elementor-section.subnav-host > .elementor-container{max-width:none;padding:0}
.elementor-section.subnav-host .elementor-widget-container{margin:0}
.elementor-widget.sv-subnav-src{margin:0;font-size:inherit;line-height:inherit}
/* the hub's stat items: Elementor's icon-box flex gap is not part of .stat-item */
.elementor-widget.sv-stat-item .elementor-icon-box-wrapper{gap:0!important}
.sv-sh-hero .elementor-widget.sv-crumb-box + .elementor-widget-text-editor{margin-top:0} /* the crumb's own 20px is the gap to the tag */
/* .sh-why p{margin-top:16px} holds on the lead at the top of the hub's why column (a grid
   item keeps its child's margin) */
body.sv-hub .sv-sh-why-grid .elementor-widget.sv-wp-lead{margin-top:16px}
/* the FAQ icon is exactly 15px - Elementor's span carried 3px of its own around the svg */
.sv-faq .elementor-accordion-icon,.sv-faq .elementor-toggle-icon{padding:0;margin:0;flex:0 0 14.5px;width:14.5px} /* the static "+" glyph inks 14.6px; a question that fills the line to the pixel wrapped at 15 */
/* the static "+" is a 22px glyph whose line box (37px) sets the row height: 20+37+20 = 77.
   An 18px svg made every question 6px shorter */
.sv-faq .elementor-accordion-icon,.sv-faq .elementor-toggle-icon{min-height:37.4px} /* 22px x 1.7 */

/* ---- /contact-us/ as an Elementor document (18 Sep) ----------------------------
   Sections and columns keep the static class names (.contact-head, .sec-head,
   .contact, .contact-info, .office-card, .contact-form), so the contact rules in
   site.css style them directly. What follows is only what Elementor's markup
   adds or lacks. */
/* .wrap.contact-grid is the section's container */
body.sv-contact .elementor-section.contact > .elementor-container{display:grid;grid-template-columns:1fr .95fr;gap:40px;align-items:start}
body.sv-contact .elementor-section.contact > .elementor-container > .elementor-column{width:100%}
@media(max-width:960px){body.sv-contact .elementor-section.contact > .elementor-container{grid-template-columns:1fr}}
/* .oc-row = one icon-list row: 38px tinted disc, 14.5/1.65 copy, 13px apart, none under the title */
.elementor-widget.sv-oc-row{margin-top:13px}
.elementor-widget-heading + .elementor-widget.sv-oc-row{margin-top:0}
.elementor-widget.sv-oc-row .elementor-icon-list-item{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.elementor-widget.sv-oc-row .elementor-icon-list-icon{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ochre-tint);color:var(--ochre-deep);display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.elementor-widget.sv-oc-row .elementor-icon-list-icon svg{width:17px;height:17px;stroke:currentColor;fill:none}
.elementor-widget.sv-oc-row .elementor-icon-list-text{padding:0;margin:0}
/* the crumb's own 20px is the gap to what follows; the map's 20px to the social pills */
.elementor-widget.sv-crumb-box + .elementor-widget{margin-top:0}
.elementor-widget.sv-map-box + .elementor-widget.sv-soc-box{margin-top:0}
/* links inside an icon-list row run inline (Elementor lays every <a> in an item out as a flex row) */
.elementor-widget.sv-oc-row .elementor-icon-list-text a{display:inline;width:auto;align-items:normal}
@media(max-width:760px){.elementor-widget.sv-oc-row .elementor-icon-list-text a{display:inline-block}} /* the phone tap padding (site.css .office-card a) */
/* the head is written style="max-width:820px" on the static page */
body.sv-contact .elementor-section.contact-head .elementor-column.sec-head{max-width:820px}
/* h1-h4{line-height:1.08} - every heading widget, before the per-shell sizes above */
.elementor-widget-heading .elementor-heading-title{line-height:1.08}
/* the static .sec-head p{margin-top:20px} reaches the eyebrow under the crumb (the
   text-editor + text-editor 16px above is more specific than the crumb rule) */
body.sv-contact .elementor-column.sec-head .elementor-widget.sv-crumb-box + .elementor-widget.sv-eyebrow{margin-top:20px}
/* the pill, the form's sub line and the social pills inherit the page's 1.7, not the
   text-editor's 1.8; the pill sits on no line box (a block widget's strut moved it 2px) */
.elementor-widget.sv-oc-tag{display:flex;flex-direction:column;align-items:flex-start;line-height:1.7}
.elementor-widget.sv-sub-box,.elementor-widget.sv-soc-box{line-height:1.7}
/* .soc-links{margin-top:4px} collapses into the map's 20px on the static page; a
   widget is a flex item, so here the two would add */
.elementor-widget.sv-soc-box .soc-links{margin-top:0}
/* .wrap .spec-table-wrap{margin-top:24px;...;background:var(--white);box-shadow:var(--shadow)} on
   the static page (no .wrap here, so the bare 28px base won and the table sat flat); the
   header row inherits the page's 1.7, not the widget's 1.8 */
.elementor-widget.sv-spec-tablew .spec-table-wrap{margin-top:24px;line-height:1.7;background:var(--white);box-shadow:var(--shadow)}
/* the static why and industries bands carry a soft radial glow in one corner
   (.sh-why::before / .sh-contrib::before); the section is the positioned, clipped box and
   the container sits above the glow the way .sh-why-grid / .sh-contrib .wrap do */
.elementor-section.sv-sh-why,.elementor-section.sv-sh-contrib{position:relative;overflow:hidden}
.elementor-section.sv-sh-why > .elementor-container,.elementor-section.sv-sh-contrib > .elementor-container{position:relative;z-index:1}
.elementor-section.sv-sh-why::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-240px;right:-150px;background:radial-gradient(circle,rgba(246,136,31,.14),transparent 70%);pointer-events:none}
.elementor-section.sv-sh-contrib::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;top:-250px;left:-170px;background:radial-gradient(circle,rgba(246,136,31,.11),transparent 70%);pointer-events:none}
/* .sh-why{background:var(--off)} - the why band is always the off ground, not the
   section alternation (the generator no longer adds a bg class to it) */
.elementor-section.sv-sh-why{background:var(--off)}