/* =====================================================================
   HIERARCHY  (overrides the rules above)
   Reading order on every page:
     1. the page headline and its one primary action
     2. each section's headline
     3. block titles, then body text, then labels and meta
   One filled button per screen. Everything else steps down to an outline or a text link.
   ===================================================================== */
:root{
  --fs-display:clamp(40px,4.2vw + .6rem,80px);
  --fs-h2:clamp(30px,2.3vw + .7rem,52px);
  --fs-h3:clamp(19px,.4vw + 1rem,22px);
  --fs-lead:clamp(18px,.45vw + 15px,21px);
  --fs-body:17px;
  --fs-block:16px;
  --fs-small:14px;
  --section:clamp(72px,9vw,136px);
  --sp-head:clamp(32px,3vw,48px);   /* section headline → its content */
  --sp-block:clamp(32px,3vw,40px);  /* between rows of blocks */
}
body{font-size:var(--fs-body)}
@media(max-width:767px){body{font-size:16px}}

/* 1 · Page headline: the largest thing on the page, by a clear margin */
h1,.h1,.elementor h1.elementor-heading-title{font-size:var(--fs-display);line-height:1;letter-spacing:-.042em;font-weight:700}
/* 2 · Section headlines */
h2,.h2,.elementor h2.elementor-heading-title{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.032em;font-weight:700}
/* 3 · Block titles: one size everywhere (was five different sizes) */
h3,.h3,.card__title,.svc-card .h3,.step__t,
.st-card-title .elementor-heading-title,.st-h3 .elementor-heading-title,.st-h4 .elementor-heading-title,.st-step-t .elementor-heading-title{font:600 var(--fs-h3)/1.25 var(--font-head);letter-spacing:-.012em}
.svc-card h2.h3,.svc-card .st-h3 .elementor-heading-title{font-size:clamp(21px,.8vw + 1rem,26px)}
/* Body and supporting text */
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:56ch}
.card__text,.step__b,.e-con.card .elementor-widget-text-editor,.e-con.step .elementor-widget-text-editor{font-size:var(--fs-block);line-height:1.55}
.elementor-widget-text-editor p:not(.marquee__track):not(.eyebrow),.text,.faq__a,.entry p{max-width:68ch}
/* Labels and meta: quiet, one size */
.eyebrow{font:600 var(--fs-small)/1.4 var(--font-body);color:var(--muted);letter-spacing:0;margin-bottom:var(--s3)}
.stat-label,.trust,.form-note,.privacy-note,.small,.tag,.metric span,.mega a span{font-size:var(--fs-small)}
/* Proof numbers read as figures, not as headlines: lighter weight, below h1 */
.stat-strip .num,.st-stat-num .elementor-heading-title{font-size:clamp(40px,3.6vw,56px);font-weight:500;letter-spacing:-.035em}
.metric b{font-weight:500}

/* ---------- Spacing rhythm ---------- */
.section__head{margin-bottom:var(--sp-head)}
.e-con.st-sec>.e-con-inner>.elementor-widget-heading:has(h2){margin-bottom:var(--sp-head)!important}
.e-con.st-sec>.e-con-inner>.e-con:has(>.elementor-widget-heading h2):not(.card):not(.e-grid){margin-bottom:var(--sp-head)!important}
.e-con.st-sec .elementor-widget-text-editor:has(>.eyebrow,>.elementor-widget-container>.eyebrow)+.elementor-widget-heading{margin-top:0!important}
.grid{gap:var(--sp-block) var(--s6)}
.e-con.e-grid:has(>.card),.e-con.e-grid:has(>.e-con.card),.e-con.e-grid:has(>.step){--gap:var(--sp-block) var(--s6)!important;--row-gap:var(--sp-block)!important;--column-gap:var(--s6)!important}
.e-con.st-sec--narrow{--content-width:calc(880px - 2 * var(--gutter))}
.hero{padding-block:clamp(48px,6vw,96px) clamp(72px,8vw,120px)}

/* ---------- Calls to action: one primary per screen ---------- */
.btn,.elementor .elementor-widget-button[class*="st-btn"] .elementor-button{min-height:52px;padding:15px 26px;font:600 16px/1.2 var(--font-body);letter-spacing:0}
.btn--sm,.elementor .st-btn--sm .elementor-button{min-height:44px;padding:11px 18px;font-size:15px}
/* Graphite "light" buttons mid-page used to compete with the primary: now an outline */
.btn--light,.st-btn--light .elementor-button{background:transparent!important;color:var(--text)!important;border:1px solid var(--border-strong)!important}
.btn--light:hover,.st-btn--light .elementor-button:hover{background:var(--text)!important;color:var(--bg)!important}
/* Tertiary: text links with a clear underline */
.card__cta,.link{font-weight:600;color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.card__cta:hover,.link:hover{text-decoration-thickness:2.5px}
/* Elementor's own CSS takes the underline off every link (.elementor a): links keep theirs, as on the coded pages */
.elementor a.link{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.elementor a.link:hover{text-decoration-thickness:2.5px}
.elementor .svc-card a.link{text-decoration-thickness:1px}
/* Service list: ten "Explore …" buttons became ten equal shouts; they're links now */
.svc-card .btn--secondary,.svc-card .st-btn--secondary .elementor-button{min-height:44px;padding:10px 0!important;border:0!important;background:none!important;color:var(--accent-text)!important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;justify-content:flex-start}
.svc-card .st-btn--secondary .elementor-button:hover,.svc-card .btn--secondary:hover{text-decoration-thickness:2.5px;color:var(--accent-hover)!important}
.svc-card .link{color:var(--muted);font-weight:500;text-decoration-thickness:1px}
/* Home hero: the form is the primary action, so the buttons beside the headline step down */
.st-page-home main>.elementor>.e-con:first-child .st-btn--primary .elementor-button,.st-page-home .hero .btn--primary{background:transparent;color:var(--text);border-color:var(--border-strong)!important}
.st-page-home main>.elementor>.e-con:first-child .st-btn--primary .elementor-button:hover,.st-page-home .hero .btn--primary:hover{background:var(--text);color:var(--bg)}
.st-page-home main>.elementor>.e-con:first-child .st-btn--secondary .elementor-button,.st-page-home .hero .btn--secondary{border-color:transparent!important;padding-inline:4px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.st-page-home main>.elementor>.e-con:first-child .st-btn--secondary .elementor-button:hover,.st-page-home .hero .btn--secondary:hover{background:none;color:var(--accent-text)}
.hero-form__btn,.hero-form__card .btn{min-height:54px;font-size:17px}
.form-card button[type=submit],.form-card .btn--primary{min-height:54px;font-size:17px}
/* Header CTA: quiet while the page's own primary is on screen, solid once you scroll past it */
.header-cta__btn{transition:background-color .25s,color .25s,border-color .25s}
body.past-hero .header-cta__btn{background:var(--ink);border-color:var(--ink);color:#fff}
body.past-hero .header-cta__btn:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
/* One path to the form: buttons scroll to this page's form, which clears the sticky header */
#hero-form,#lead-form,.quick-form{scroll-margin-top:88px}
#hero-form:focus,#lead-form:focus{outline:none}
/* Phones: the bottom bar follows the same one-filled-button rule. It stays out of the way on the first screen,
   beside a form, or while a section's own main button is showing. */
.mobile-bar{padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px))}
@media(max-width:767px){
  .js .mobile-bar{transform:translateY(calc(100% + 2px));transition:transform .3s var(--ease)}
  .js body.past-hero .mobile-bar{transform:none}
  .js body:not(.past-hero) .to-top{bottom:16px}
  body.has-bar .site-footer{padding-bottom:calc(var(--s6) + 80px)}
}
@media(prefers-reduced-motion:reduce){.js .mobile-bar{transition:none}}

/* ---------- Order: proof before the long client list ---------- */
.client-list{margin-top:var(--sp-head);padding-top:var(--s5);border-top:1px solid var(--border)}
.e-con.st-sec>.e-con-inner>.elementor-widget-text-editor:has(+.st-marquee--clients){order:98;margin-top:var(--sp-head);padding-top:var(--s5);border-top:1px solid var(--border)}
.e-con.st-sec>.e-con-inner>.st-marquee--clients{order:99}
/* The six "Why SAMTECH" points aren't a sequence: no numbers */
.e-con.step .elementor-widget-text-editor:has(.eyebrow--lime){display:none}

@media(max-width:767px){
  .btn,.elementor .elementor-widget-button[class*="st-btn"] .elementor-button{min-height:50px}
  .hero .row .btn,.e-con.st-sec:first-child .st-row>.elementor-widget-button{width:100%}
}
.card__title,.e-con.card .check{font-size:var(--fs-h3)!important;line-height:1.3}
.card__cta{font-size:16px}

/* Hero: headline column gets the room (7/5), so the display size sets on 2–3 lines, not 4 */
@media(min-width:1024px){
  main>.elementor>.e-con.st-sec:first-child>.e-con-inner>.e-con.e-grid:not(.stat-strip){--e-con-grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important}
  .hero .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
/* Proof numbers: always a 2×2 or 1×4 grid, never a single tall column */
.e-con.stat-strip{--e-con-grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(min-width:1024px){.e-con.stat-strip{--e-con-grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1023px){
  .e-con.stat-strip>.e-con.st-stat{border-left:0!important}
  .e-con.stat-strip>.e-con.st-stat:nth-child(even){border-left:1px solid var(--border)!important}
  .e-con.stat-strip>.e-con.st-stat:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1024px){.stat-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- CTA block: every page ends like the Home hero ----------
   A black section: headline, reply promise, WhatsApp link and trust line on the left; the quick form (white card) on the right.
   Coded pages: template-parts/lead-form.php (.cta-block). Elementor: a section with class st-cta-block. */
.cta-block__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);align-items:center}
@media(min-width:1024px){.cta-block__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}}
.cta-block__grid--top{align-items:start}
.cta-block__title{margin:0 0 var(--s5)}
.cta-block__copy .lead{margin:0 0 var(--s6)}
.cta-block__copy .trust,.e-con.st-cta-block .trust{margin-top:var(--s5)}
@media(min-width:1024px){.e-con.st-cta-grid{--e-con-grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important}}
/* WhatsApp is a quiet text link with a green dot, as in the hero: the form is the main action */
.wa-link,.e-con.st-cta-block .st-btn--secondary .elementor-button{border-color:transparent!important;background:none!important;color:var(--text)!important;padding-inline:4px!important;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.wa-link:hover,.e-con.st-cta-block .st-btn--secondary .elementor-button:hover{color:var(--accent-text)!important;text-decoration-thickness:2.5px}
.wa-link{gap:var(--s2)}
.wa-link__dot{width:8px;height:8px;border-radius:50%;background:var(--wa);flex:none}
/* Contact page: details and map under the copy */
.cta-block__contact{margin-top:var(--s6);border-top:1px solid var(--border)}
.cta-block__row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);padding-block:var(--s3);border-bottom:1px solid var(--border);font-size:15px}
.cta-block__row .eyebrow{margin:0}
.cta-block__book{margin-top:var(--s4);font-size:15px;color:var(--text-2)}
.cta-block__map{display:block;width:100%;height:220px;border:0;margin-top:var(--s5)}
/* stacked (phones, tablets): the form sits under the copy, full width up to the card's own limit */
@media(max-width:1023px){.cta-block .hero-form,.e-con.st-cta-block .hero-form{margin-left:0;max-width:560px}}
.request[hidden]{display:none}
/* a form section not yet converted by Appearance → SAMTECH Content Update: the short form sits where the long one was */
#lead-form:not(.st-cta-block):not(.cta-block) .hero-form{margin-left:0}

/* ---------- Go-live fixes (2.6.0) ---------- */
/* A link inside running text is underlined, so it doesn't rely on colour alone (WCAG 1.4.1) */
.elementor-widget-text-editor p:not(.eyebrow):not(.marquee__track) a:not([class]),.entry p a:not([class]),.entry li a:not([class]),.st-entry li a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Contact details (label | value): on small phones the value goes under its label, so a long email address never runs off the screen */
.st-contact-row p a{padding-block:12px}
@media(max-width:479px){.e-con.st-contact-row{--e-con-grid-template-columns:minmax(0,1fr)!important;--gap:4px 16px!important;--row-gap:4px!important;row-gap:4px!important}}
/* A name list that isn't moving wraps inside an item too, so one long name can't push the page sideways on a 320 px phone */
.marquee:not(.is-moving) .marquee__item{white-space:normal}
/* A map (or any embed) reached with Tab shows the focus ring too (on its box: Elementor clips anything outside the frame) */
.st-frame-focus{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- Go-live fixes (2.6.2) ---------- */
/* Job application form (Careers, under Open roles) */
.job-form{max-width:760px;margin-top:var(--s6);scroll-margin-top:88px}
.job-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);margin:var(--s4) 0 var(--s5)}
.job-form__wide{grid-column:1/-1}
@media(max-width:600px){.job-form__grid{grid-template-columns:minmax(0,1fr)}}
/* Cookie choice: a card at the bottom of the screen (above the phone contact bar), Accept and Reject given equal weight */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);padding:var(--s4) var(--s5);background:var(--white);color:var(--graphite);border:1px solid var(--graphite);border-top:4px solid var(--ink);box-shadow:0 16px 48px rgba(0,0,0,.45)}
.consent[hidden]{display:none}
.consent__text{flex:1 1 340px;margin:0;font-size:15px;line-height:1.5}
.consent__text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.consent__btns{display:flex;gap:var(--s2);flex:none}
.consent__btns .btn{min-height:44px;min-width:104px}
@media(max-width:767px){body.has-bar .consent{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
@media(max-width:479px){.consent{padding:var(--s4)}.consent__btns{flex:1 1 100%}.consent__btns .btn{flex:1}}
.site-footer__toggles{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 var(--s5)}
.consent-open{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--muted-2);font:500 14px/1.4 var(--font-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.consent-open:hover{color:#fff}
/* Google map on Contact: waits for "Accept" or "Show map" (it sets Google's own cookies) */
.map-gate{position:relative}
.map-gate iframe[data-st-src]{visibility:hidden}
.map-gate__cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s4);text-align:center;background:var(--surface-3);border:1px solid var(--border)}
.map-gate__cover p{margin:0;max-width:36ch;font-size:15px;line-height:1.5;color:var(--text-2)}
.map-gate__btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s4)}
.map-gate__link{display:inline-flex;align-items:center;min-height:44px;color:var(--primary-text);text-decoration:underline;text-underline-offset:3px}
.map-gate.is-on .map-gate__cover{display:none}