.elementor-kit-7{--e-global-color-primary:#E31A1C;--e-global-color-secondary:#000000;--e-global-color-text:#000000;--e-global-color-accent:#CD1517;--e-global-color-elmsurfaceblack:#000000;--e-global-color-elmsurfacedark:#0B0C0E;--e-global-color-elmsurfacedarkraised:#16181C;--e-global-color-elmsurfacedarkhi:#22262C;--e-global-color-elmsurfacepaper:#F7F7F8;--e-global-color-elmsurfacewhite:#FFFFFF;--e-global-color-elmsurfacesteel:#DFE3E9;--e-global-color-elmondark:#FFFFFF;--e-global-color-elmondarksecondary:#DFE3E9;--e-global-color-elmondarkmuted:#949CA6;--e-global-color-elmonlight:#000000;--e-global-color-elmonlightsecondary:#474A4F;--e-global-color-elmonlightmuted:#5F6873;--e-global-color-elmred500fill:#E31A1C;--e-global-color-elmred600fill:#CD1517;--e-global-color-elmred350text:#FF3C37;--e-global-color-elmred300text:#FF6B61;--e-global-color-elmred400hover:#EC5A50;--e-global-color-elmred700text:#CD1517;--e-global-color-elmborderdark:#2E3238;--e-global-color-elmborderlight:#D0D6DE;--e-global-color-elmbordercontroldark:#656D78;--e-global-color-elmbordercontrollight:#737E89;--e-global-color-elmfocusdark:#FFD166;--e-global-color-elmfocuslight:#1D4ED8;--e-global-color-elmdangerlight:#B3121A;--e-global-color-elmdangerdark:#FF8A80;--e-global-color-elmsuccesslight:#0E7C3F;--e-global-color-elmsuccessdark:#22C55E;--e-global-typography-primary-font-family:"Roboto Serif";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Roboto Serif";--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:700;--e-global-typography-primary-line-height:1.08em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:-0.015em;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0.01em;--e-global-typography-elmdisplay1-font-family:"Roboto Serif";--e-global-typography-elmdisplay1-font-weight:800;--e-global-typography-elmdisplay1-line-height:1.05em;--e-global-typography-elmdisplay1-letter-spacing:-0.02em;--e-global-typography-elmdisplay2-font-family:"Roboto Serif";--e-global-typography-elmdisplay2-font-weight:800;--e-global-typography-elmdisplay2-line-height:1.08em;--e-global-typography-elmdisplay2-letter-spacing:-0.02em;--e-global-typography-elmh3-font-family:"Roboto Serif";--e-global-typography-elmh3-font-weight:700;--e-global-typography-elmh3-line-height:1.25em;--e-global-typography-elmh3-letter-spacing:-0.01em;--e-global-typography-elmh4-font-family:"Inter";--e-global-typography-elmh4-font-weight:700;--e-global-typography-elmh4-line-height:1.3em;--e-global-typography-elmlede-font-family:"Inter";--e-global-typography-elmlede-font-weight:400;--e-global-typography-elmlede-line-height:1.6em;--e-global-typography-elmbodysm-font-family:"Inter";--e-global-typography-elmbodysm-font-size:15px;--e-global-typography-elmbodysm-font-weight:400;--e-global-typography-elmbodysm-line-height:1.55em;--e-global-typography-elmcaption-font-family:"Inter";--e-global-typography-elmcaption-font-size:13px;--e-global-typography-elmcaption-font-weight:400;--e-global-typography-elmcaption-line-height:1.5em;--e-global-typography-elmeyebrow-font-family:"Inter";--e-global-typography-elmeyebrow-font-size:12px;--e-global-typography-elmeyebrow-font-weight:700;--e-global-typography-elmeyebrow-line-height:1.4em;--e-global-typography-elmeyebrow-letter-spacing:0.14em;--e-global-typography-elmphone-font-family:"Inter";--e-global-typography-elmphone-font-weight:700;--e-global-typography-elmphone-line-height:1.2em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ELIMINATIS design system — Elementor › Site Settings › Custom CSS (kit post 7).
   Canonical copy: build/theme/kit-custom-css.css. Edit HERE, then push. Spec v1.1 §3.
   MOBILE FIRST at 360px — mobile values are the base, tablet/desktop are overrides.

   SPECIFICITY, and why the .elementor-kit-7s look the way they do
   -------------------------------------------------------
   Elementor 4's atomic base sheet (uploads/elementor/css/base-desktop.css) ships:
       .elementor .e-flexbox-base { padding:10px; display:flex; flex-direction:row; }
       .elementor .e-button-base  { background-color:#375EFB; ... }
   Both are (0,2,0). A per-element local style is only (0,1,0), so it LOSES to the base —
   which is why passing direction:column to add-flexbox has no effect, and why every
   button renders Elementor blue. Design-system rules must therefore be at least (0,2,1):
       body .elementor [id^="elm-…"]        -> (0,2,1)
       body .elementor .e-con[id^="elm-…"]  -> (0,3,1)
   Do not "simplify" these .elementor-kit-7s down; the layout collapses to a row if you do.

   HOW TO STYLE AN ELEMENT: give it a CSS ID in Elementor (Advanced › CSS ID) using one of
   the prefixes below, then a unique suffix — elm-sec-black-hero.

     elm-sec-black|dark|raised|paper|white|steel|red-*   section ground + padding
     elm-hero-*      hero + no-photo X device            elm-wrap-*    centred 1200px well
     elm-grid2|3|4-* responsive grid, 1 col on mobile    elm-card-*    card
     elm-row-*       stays a row on mobile (wraps)       elm-prose-*   68ch measure
     elm-eyebrow-*   12px label                          elm-lede-*    opening paragraph
     elm-caption-*   13px floor                          elm-phone-*   tabular number
     elm-xlist-*     red X list                          elm-accent-*  3px red left rule
     elm-accentsteel-* steel left rule (C7 equal weight) elm-pending-* visibly empty
     elm-btn-primary-* / elm-btn-secondary-* / elm-btn-onlight-*
     elm-header-* elm-nav-* elm-sticky-* elm-trustbar-* elm-proofstrip-* elm-ctarow-*
*/

/* ============================ TOKENS (§3.1 §3.2 §3.3) ============================ */
:root{color-scheme:light;
--elm-surface-black:#000000;--elm-surface-dark:#0B0C0E;--elm-surface-dark-raised:#16181C;--elm-surface-dark-hi:#22262C;
--elm-on-dark:#FFFFFF;--elm-on-dark-secondary:#DFE3E9;--elm-on-dark-muted:#949CA6;
--elm-border-dark:#2E3238;--elm-border-control-dark:#656D78;--elm-focus-dark:#FFD166;
--elm-surface-paper:#F7F7F8;--elm-surface-white:#FFFFFF;--elm-surface-steel:#DFE3E9;
--elm-on-light:#000000;--elm-on-light-secondary:#474A4F;--elm-on-light-muted:#5F6873;
--elm-border-light:#D0D6DE;--elm-border-control-light:#737E89;--elm-focus-light:#1D4ED8;
--elm-red-500:#E31A1C;--elm-red-600:#CD1517;--elm-red-350:#FF3C37;--elm-red-300:#FF6B61;
--elm-red-400:#EC5A50;--elm-red-700:#CD1517;
--elm-success-dark:#22C55E;--elm-success-light:#0E7C3F;--elm-warning-dark:#FBBF24;--elm-warning-light:#B45309;
--elm-danger-dark:#FF8A80;--elm-danger-light:#B3121A;--elm-info-dark:#60A5FA;--elm-info-light:#1D4ED8;
--elm-space-1:4px;--elm-space-2:8px;--elm-space-3:12px;--elm-space-4:16px;--elm-space-5:20px;
--elm-space-6:24px;--elm-space-8:32px;--elm-space-10:40px;--elm-space-12:48px;--elm-space-16:64px;
--elm-space-20:80px;--elm-space-24:96px;--elm-space-32:128px;
--elm-radius-sm:2px;--elm-radius-md:4px;--elm-radius-lg:8px;--elm-radius-pill:999px;
--elm-font-display:"Roboto Serif","Roboto Slab",Bitter,Georgia,"Times New Roman",serif;
--elm-font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--elm-display-1:clamp(2.125rem,1.5rem + 3.2vw,3.75rem);--elm-display-2:clamp(1.875rem,1.4rem + 2.4vw,3rem);
--elm-h2:clamp(1.625rem,1.3rem + 1.6vw,2.5rem);--elm-h3:clamp(1.3125rem,1.15rem + 0.8vw,1.75rem);
--elm-h4:clamp(1.125rem,1.05rem + 0.4vw,1.25rem);--elm-lede:clamp(1.1875rem,1.1rem + 0.5vw,1.3125rem);
--elm-body:clamp(1.0625rem,1.03rem + 0.2vw,1.125rem);--elm-body-sm:0.9375rem;--elm-caption:0.8125rem;
--elm-eyebrow:0.75rem;--elm-button:1rem;--elm-phone:clamp(1.25rem,1.1rem + 0.7vw,1.5rem);
--elm-e1:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.10);
--elm-e2:0 2px 4px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.10);
--elm-gutter:20px;--elm-section-y:48px;--elm-section-y-hero:64px;--elm-grid-gap:16px;--elm-card-pad:20px;
--elm-content-max:1200px;--elm-measure:68ch;}
@media(min-width:768px){:root{--elm-gutter:32px;--elm-section-y:64px;--elm-section-y-hero:80px;
--elm-grid-gap:20px;--elm-card-pad:24px;}}
@media(min-width:1024px){:root{--elm-gutter:40px;--elm-section-y:96px;--elm-section-y-hero:128px;
--elm-grid-gap:24px;}}

/* ============================ BASE ============================ */
body{background-color:var(--elm-surface-paper);color:var(--elm-on-light);
font-family:var(--elm-font-ui);font-size:var(--elm-body);line-height:1.65;text-wrap:pretty;
-webkit-text-size-adjust:100%;overflow-x:hidden;}
body .elementor h1,body .elementor h2,body .elementor h3{font-family:var(--elm-font-display);
text-wrap:balance;hyphens:manual;}
/* §3.2.4: display-1 caps at 20 characters per line, display-2 and h2 at 34ch. Template
   h1s are display-2, so a global 20ch cap wrapped the government h1 to five lines at 1440.
   20ch belongs to the homepage h1 alone, which is set separately below. */
body .elementor h1{font-size:var(--elm-display-2);font-weight:800;line-height:1.08;
letter-spacing:-.02em;max-width:34ch;}
body .elementor h2{font-size:var(--elm-h2);font-weight:800;line-height:1.15;
letter-spacing:-.015em;max-width:30ch;}
body .elementor h3{font-size:var(--elm-h3);font-weight:700;line-height:1.25;letter-spacing:-.01em;}
body .elementor h4{font-family:var(--elm-font-ui);font-size:var(--elm-h4);font-weight:700;line-height:1.30;}
body .elementor p{max-width:var(--elm-measure);text-align:left;}
/* §3.2.4 permits hyphens:auto on Spanish body copy "where long compounds genuinely need
   it". Unconstrained at 390px it also broke place names — "Hud-son", "nego-cios" — which is
   worse typography than a ragged edge and mangles the very county names the page is selling.
   The limits keep hyphenation for genuinely long words (documenta-ción) and switch it off
   for anything short enough to just wrap. */
:lang(es) p,:lang(es) li{hyphens:auto;
-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4;
-webkit-hyphenate-limit-lines:2;hyphenate-limit-chars:10 5 4;}
body img,body svg,body video,body iframe{max-width:100%;height:auto;}
body [id]{scroll-margin-top:88px;}
/* Hello Elementor / block themes emit their own post title — a SECOND h1 on every page.
   Pages use the Elementor Canvas template so it never renders; this is belt and braces. */
body .wp-block-post-title,body .page-header,body .entry-title{display:none;}

/* ============================ CONTAINER RESET — the load-bearing rule ============================
   Beats .elementor .e-flexbox-base (0,2,0). Without this every container is a 10px-padded
   ROW and the whole page overflows on a phone. */
body .elementor .e-con[id^="elm-"]{padding:0;width:100%;max-width:none;
--container-max-width:100%;flex-direction:column;align-items:stretch;}

/* Containers that legitimately stay a row on mobile. They must all wrap. */
body .elementor .e-con[id^="elm-row"],body .elementor .e-con[id^="elm-ctarow"],
body .elementor .e-con[id^="elm-proofstrip"],body .elementor .e-con[id^="elm-trustbar"],
body .elementor .e-con[id^="elm-header"],body .elementor .e-con[id^="elm-nav"],
body .elementor .e-con[id^="elm-sticky"]{flex-direction:row;flex-wrap:wrap;align-items:center;}

/* ============================ SECTION GROUNDS ============================ */
body .elementor .e-con[id^="elm-sec-"],body .elementor .e-con[id^="elm-hero"],
body .elementor .e-con[id^="elm-crumb"]{padding-block:var(--elm-section-y);
padding-inline:var(--elm-gutter);}
body .elementor .e-con[id^="elm-crumb"]{padding-block:var(--elm-space-4);}
body .elementor [id^="elm-sec-black"]{background-color:var(--elm-surface-black);color:var(--elm-on-dark);}
body .elementor [id^="elm-sec-dark"]{background-color:var(--elm-surface-dark);color:var(--elm-on-dark);}
body .elementor [id^="elm-sec-raised"]{background-color:var(--elm-surface-dark-raised);color:var(--elm-on-dark);}
body .elementor [id^="elm-sec-paper"]{background-color:var(--elm-surface-paper);color:var(--elm-on-light);}
body .elementor [id^="elm-sec-white"]{background-color:var(--elm-surface-white);color:var(--elm-on-light);}
body .elementor [id^="elm-sec-steel"]{background-color:var(--elm-surface-steel);color:var(--elm-on-light);}
/* The ONE full-bleed red band per page, maximum (§3.4.2 — red budget ~5% of a viewport) */
body .elementor [id^="elm-sec-red"]{background-color:var(--elm-red-500);color:#FFFFFF;}

/* Text colour by ground */
body .elementor [id^="elm-sec-black"] :is(h1,h2,h3,h4),
body .elementor [id^="elm-sec-dark"] :is(h1,h2,h3,h4),
body .elementor [id^="elm-sec-raised"] :is(h1,h2,h3,h4),
body .elementor [id^="elm-hero"] :is(h1,h2,h3,h4){color:var(--elm-on-dark);}
body .elementor [id^="elm-sec-black"] p,body .elementor [id^="elm-sec-dark"] p,
body .elementor [id^="elm-sec-raised"] p,body .elementor [id^="elm-hero"] p{color:var(--elm-on-dark-secondary);}
body .elementor [id^="elm-sec-red"] :is(h1,h2,h3,h4,p){color:#FFFFFF;}
body .elementor [id^="elm-sec-paper"] p,body .elementor [id^="elm-sec-white"] p{color:var(--elm-on-light);}
body .elementor [id^="elm-sec-black"] td,body .elementor [id^="elm-sec-dark"] td,
body .elementor [id^="elm-sec-black"] th,body .elementor [id^="elm-sec-dark"] th{color:var(--elm-on-dark-secondary);}

/* Links — #E31A1C is NEVER text on black (§3.1.1, §9.1 trap 1) */
body .elementor [id^="elm-sec-black"] a:not([id^="elm-btn"]),
body .elementor [id^="elm-sec-dark"] a:not([id^="elm-btn"]),
body .elementor [id^="elm-sec-raised"] a:not([id^="elm-btn"]),
body .elementor [id^="elm-hero"] a:not([id^="elm-btn"]){color:var(--elm-red-350);}
body .elementor [id^="elm-sec-black"] a:not([id^="elm-btn"]):hover,
body .elementor [id^="elm-sec-dark"] a:not([id^="elm-btn"]):hover{color:var(--elm-red-400);}
body .elementor [id^="elm-sec-paper"] a:not([id^="elm-btn"]),
body .elementor [id^="elm-sec-white"] a:not([id^="elm-btn"]){color:var(--elm-red-700);}
body .elementor [id^="elm-sec-paper"] a:not([id^="elm-btn"]):hover,
body .elementor [id^="elm-sec-white"] a:not([id^="elm-btn"]):hover{color:#B3121A;}
/* PANEL FINDING C-2. A dark card hovers from #16181C to --surface-dark-hi #22262C, where
   --red-350 #FF3C37 measures 4.31:1 and fails the 4.5 body threshold — the exact surface
   §3.1.1 names and forbids red text on. --red-300 #FF6B61 is the token approved for ANY
   dark surface including #22262C (5.45:1), so links inside dark cards use it in BOTH states
   rather than only being patched on :hover. */
body .elementor [id^="elm-sec-black"] .e-con[id^="elm-card"] a:not([id^="elm-btn"]),
body .elementor [id^="elm-sec-dark"] .e-con[id^="elm-card"] a:not([id^="elm-btn"]),
body .elementor [id^="elm-sec-raised"] .e-con[id^="elm-card"] a:not([id^="elm-btn"]){
color:var(--elm-red-300);}

/* §9.1 trap 3 — #CD1517 on steel is 4.39:1. NO body links on steel panels. */
body .elementor [id^="elm-sec-steel"] a:not([id^="elm-btn"]){color:var(--elm-on-light);text-decoration-thickness:2px;}
body .elementor [id^="elm-sec-red"] a:not([id^="elm-btn"]){color:#FFFFFF;}
/* A link inside a button must never repaint the label */
body .elementor [id^="elm-btn"],body .elementor a[id^="elm-btn"]:hover{text-decoration:none;}

/* ============================ WRAP / MEASURE / GRID ============================ */
body .elementor .e-con[id^="elm-wrap"]{max-width:var(--elm-content-max);margin-inline:auto;}
body .elementor [id^="elm-prose"]{max-width:var(--elm-measure);}
/* Single column by default — every multi-column layout is an explicit >=768px override */
body .elementor .e-con[id^="elm-grid"]{display:grid;grid-template-columns:1fr;
gap:var(--elm-grid-gap);}
@media(min-width:768px){
body .elementor .e-con[id^="elm-grid2"],body .elementor .e-con[id^="elm-grid3"],
body .elementor .e-con[id^="elm-grid4"]{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1024px){
body .elementor .e-con[id^="elm-grid3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
body .elementor .e-con[id^="elm-grid4"]{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* ============================ HEADER / NAV ============================ */
body .elementor .e-con[id^="elm-header"]{background-color:var(--elm-surface-black);
padding:var(--elm-space-2) var(--elm-gutter);gap:var(--elm-space-2) var(--elm-space-4);
justify-content:space-between;align-items:center;
border-bottom:1px solid var(--elm-border-dark);}
/* DEVIATION from §3.5.2 C2: the spec's mobile header is a 64px bar with a hamburger opening
   a focus-trapped drawer. That needs JavaScript the connector cannot ship, so below 1024px
   the nav wraps to a second row of 44px targets instead. It is fully keyboard operable and
   needs no script; it is taller than the spec's 64px. Revisit when the child theme lands. */
body .elementor [id^="elm-logo"]{font-family:var(--elm-font-display);font-weight:800;
font-size:1.375rem;letter-spacing:.02em;color:var(--elm-on-dark);text-decoration:none;margin:0;}
/* 2026-09-14 — the logo is now the header LOCKUP IMAGE (html widget, same elm-logo-* id), cut
   from the client's master PNG at 2x (1001x176 → 40px tall). Black ground composites onto the
   black header. The text rules above stay as the no-image fallback. */
body .elementor [id^="elm-logo"] .elm-logo-link{display:flex;align-items:center;min-height:44px;text-decoration:none;}
body .elementor [id^="elm-logo"] img{display:block;height:40px;width:auto;max-width:100%;}
@media(max-width:1023px){body .elementor [id^="elm-logo"] img{height:30px;}}
/* The container reset gives every elm- container width:100%. For a container that is
   itself a flex ITEM in a row (the nav), width:100% forces a full row no matter what
   flex-basis says — which is why the desktop header was 185px tall in three stacked rows
   instead of one 72px row. width:auto is the fix, not a different flex value. */
body .elementor .e-con[id^="elm-nav"]{gap:var(--elm-space-2) var(--elm-space-4);
flex:1 1 100%;order:3;width:100%;}
body .elementor [id^="elm-navitem"]{margin:0;font-size:var(--elm-body-sm);font-weight:600;
color:var(--elm-on-dark-secondary);text-decoration:none;
min-height:44px;display:inline-flex;align-items:center;}
body .elementor [id^="elm-navitem"]:hover{color:var(--elm-on-dark);}
@media(min-width:1024px){body .elementor .e-con[id^="elm-nav"]{flex:0 1 auto;order:0;
width:auto;}}

/* MOBILE HEADER (<1024px). §1.2 decision 3 makes "Government" top-level at EVERY breakpoint,
   so the nav cannot simply be hidden on a phone. Wrapping it instead produced a 221px header
   at 390px — a third of the screen consumed before the hero, on the surface §1 calls the
   product. The nav therefore becomes ONE horizontally scrollable row: every item keeps a 44px
   target, nothing is hidden from a screen reader or the tab order, and the header drops to
   ~110px. The page body still never scrolls horizontally — only this strip does. */
@media(max-width:1023px){
  body .elementor .e-con[id^="elm-nav"]{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:var(--elm-space-2);
  padding-block-end:var(--elm-space-1);}   /* 8px = the §9.2 minimum target spacing */
  /* The switcher takes ~92px off the nav row, and the Spanish labels are longer than the
     English ("Áreas de servicio"). Dropping to the caption size keeps "Gobierno" visible
     without a swipe in BOTH trees — §1.2 decision 3 makes Government top-level at every
     breakpoint, and a nav item you have to discover by scrolling is not top-level. */
  body .elementor [id^="elm-navitem"]{font-size:var(--elm-caption);}
  body .elementor .e-con[id^="elm-nav"]::-webkit-scrollbar{display:none;}
  body .elementor [id^="elm-navitem"]{flex:0 0 auto;white-space:nowrap;}
  /* Keep the logo and the phone button on one row — they wrapped at 390px otherwise. */
  body .elementor [id^="elm-logo"]{font-size:1.125rem;}
  body .elementor [id^="elm-header"] [id^="elm-btn-primary"]{font-size:var(--elm-body-sm);
  padding-inline:var(--elm-space-3);min-width:0;}
}
/* ≤420px: the 24px lockup is 137px wide; the Spanish phone button ("Llame al 908-285-3404") is
   207px at 15px/12px padding, and 137 + 16 + 207 = 360 does not fit the 350px available at
   390 — the header wrapped to THREE rows, the regression §15 fixed once already. Caption size
   and 8px padding bring the button to ~185px. MUST sit after the ≤1023 block above: same
   specificity, so source order decides, and the first draft of this rule lost on exactly
   that. At 320 the row still wraps (280px available) — that was already true of the text logo. */
@media(max-width:420px){
  body .elementor [id^="elm-logo"] img{height:24px;}
  body .elementor [id^="elm-header"] [id^="elm-btn-primary"]{font-size:var(--elm-caption);
  padding-inline:var(--elm-space-2);}
}
/* ≤360px: <picture> swaps the lockup for the 96px MARK (roach + X, no wordmark) — the only
   way logo + phone share a row at 320–360 in BOTH languages (40 + 8 + 175 = 223 ≤ 280).
   The wordmark is not lost: the aria-label and alt still carry the full name, and the hero
   H1 is 40px below. The browser fetches only the matching source. */
@media(max-width:360px){
  body .elementor [id^="elm-logo"] img{height:40px;}
  body .elementor .e-con[id^="elm-header"]{column-gap:var(--elm-space-2);}
}

/* ============================ TYPE ROLES ============================ */
body .elementor [id^="elm-eyebrow"]{font-family:var(--elm-font-ui);font-size:var(--elm-eyebrow);
font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
color:var(--elm-on-dark-secondary);margin:0;max-width:none;}
body .elementor [id^="elm-sec-paper"] [id^="elm-eyebrow"],
body .elementor [id^="elm-sec-white"] [id^="elm-eyebrow"]{color:var(--elm-on-light-secondary);}
body .elementor [id^="elm-lede"]{font-size:var(--elm-lede);line-height:1.6;max-width:var(--elm-measure);}
body .elementor [id^="elm-caption"]{font-size:var(--elm-caption);line-height:1.5;
color:var(--elm-on-light-muted);max-width:none;}
body .elementor [id^="elm-sec-black"] [id^="elm-caption"],
body .elementor [id^="elm-sec-dark"] [id^="elm-caption"]{color:var(--elm-on-dark-muted);}
body .elementor [id^="elm-phone"]{font-size:var(--elm-phone);font-weight:700;line-height:1.2;
font-variant-numeric:tabular-nums;}
/* display-1 is the HOMEPAGE h1 only (§3.2.3) */
body .elementor [id^="elm-h1-home"]{font-size:var(--elm-display-1);line-height:1.05;
max-width:20ch;}

/* ============================ BUTTONS (§3.1.4) ============================ */
/* Beats .elementor .e-button-base, which ships background-color:#375EFB.
   Fill #E31A1C + white label = 4.74:1. A button label is NEVER black on red. */
body .elementor [id^="elm-btn"]{font-family:var(--elm-font-ui);font-size:var(--elm-button);
font-weight:700;letter-spacing:.01em;line-height:1.2;border-radius:var(--elm-radius-md);
padding:var(--elm-space-3) var(--elm-space-5);min-height:48px;
display:inline-flex;align-items:center;justify-content:center;text-align:center;
border:2px solid transparent;cursor:pointer;height:auto;overflow-wrap:anywhere;
transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease;}
body .elementor a[id^="elm-btn-primary"],body .elementor button[id^="elm-btn-primary"],
body .elementor [id^="elm-btn-primary"]{background-color:var(--elm-red-500);color:#FFFFFF;}
body .elementor [id^="elm-btn-primary"]:hover,body .elementor [id^="elm-btn-primary"]:active{
background-color:var(--elm-red-600);color:#FFFFFF;}
body .elementor a[id^="elm-btn-secondary"],body .elementor button[id^="elm-btn-secondary"],
body .elementor [id^="elm-btn-secondary"]{background-color:transparent;color:var(--elm-on-dark);
border-color:var(--elm-surface-steel);}
body .elementor [id^="elm-btn-secondary"]:hover{background-color:var(--elm-surface-dark-hi);color:var(--elm-on-dark);}
body .elementor a[id^="elm-btn-onlight"],body .elementor button[id^="elm-btn-onlight"],
body .elementor [id^="elm-btn-onlight"]{background-color:transparent;color:var(--elm-on-light);
border-color:var(--elm-on-light-secondary);}
body .elementor [id^="elm-btn-onlight"]:hover{background-color:var(--elm-surface-steel);}
/* On the red band the primary inverts so it is not red on red */
body .elementor [id^="elm-sec-red"] a[id^="elm-btn-primary"],
body .elementor [id^="elm-sec-red"] [id^="elm-btn-primary"]{background-color:#FFFFFF;color:#000000;}
body .elementor [id^="elm-sec-red"] a[id^="elm-btn-secondary"],
body .elementor [id^="elm-sec-red"] [id^="elm-btn-secondary"]{border-color:#FFFFFF;color:#FFFFFF;}
/* FORBIDDEN: coloured shadow / red glow, in any state (§3.3.3) */
body .elementor [id^="elm-btn"]:hover{box-shadow:none;}
/* §9.2 — targets 48x48 with >=8px spacing. The CTA row wraps, so gap does the spacing. */
body .elementor .e-con[id^="elm-ctarow"]{gap:var(--elm-space-3);}

/* ============================ CARDS (§3.5.2 C8) ============================ */
body .elementor .e-con[id^="elm-card"]{padding:var(--elm-card-pad);
border-radius:var(--elm-radius-md);height:auto;overflow-wrap:anywhere;
transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease;}
body .elementor [id^="elm-sec-black"] .e-con[id^="elm-card"],
body .elementor [id^="elm-sec-dark"] .e-con[id^="elm-card"]{
background-color:var(--elm-surface-dark-raised);border:1px solid var(--elm-border-dark);}
body .elementor [id^="elm-sec-black"] .e-con[id^="elm-card"]:hover,
body .elementor [id^="elm-sec-dark"] .e-con[id^="elm-card"]:hover{
background-color:var(--elm-surface-dark-hi);border-color:var(--elm-on-light-secondary);transform:translateY(-2px);}
body .elementor [id^="elm-sec-paper"] .e-con[id^="elm-card"],
body .elementor [id^="elm-sec-white"] .e-con[id^="elm-card"]{
background-color:var(--elm-surface-white);border:1px solid var(--elm-border-light);box-shadow:var(--elm-e1);}
body .elementor [id^="elm-sec-paper"] .e-con[id^="elm-card"]:hover{box-shadow:var(--elm-e2);transform:translateY(-2px);}
body .elementor .e-con[id^="elm-card"] :is(h3,h4){max-width:none;}
body .elementor .e-con[id^="elm-card"] p{font-size:var(--elm-body-sm);max-width:none;}

/* ============================ HERO (§3.5.2 C5) ============================ */
body .elementor .e-con[id^="elm-hero"]{position:relative;
background-color:var(--elm-surface-black);color:var(--elm-on-dark);overflow:hidden;
padding-block:var(--elm-section-y-hero);}
/* No-photo variant (§3.6.4) — the REQUIRED state until real photography exists.
   The fallback is the ABSENCE of photography, not stock. The X device carries the frame. */
body .elementor .e-con[id^="elm-hero"]::after{content:"\00D7";position:absolute;
right:-6%;bottom:-30%;font-family:var(--elm-font-display);font-size:min(52vw,560px);
font-weight:800;line-height:1;color:var(--elm-red-500);opacity:.08;
pointer-events:none;user-select:none;z-index:0;}
body .elementor .e-con[id^="elm-hero"] > *{position:relative;z-index:1;}
@media(min-width:1024px){body .elementor .e-con[id^="elm-hero"] > *{max-width:60%;}}
/* When real photography lands, add data-photo to the hero. The scrim is a CONTRAST
   requirement, not a styling preference: alpha >=0.536 where body text lands, >=0.418
   where only large text lands. It may NOT be reduced for a prettier image (§3.5.2 C5). */
body .elementor .e-con[id^="elm-hero"][data-photo]::before{content:"";position:absolute;
inset:0;z-index:0;background-color:rgba(0,0,0,.78);}
@media(min-width:1024px){body .elementor .e-con[id^="elm-hero"][data-photo]::before{
background-color:transparent;background-image:linear-gradient(90deg,
rgba(0,0,0,.88) 0%,rgba(0,0,0,.78) 45%,rgba(0,0,0,.60) 100%);}}

/* ============================ PROOF STRIP / TRUST BAR (C10) ============================ */
body .elementor .e-con[id^="elm-proofstrip"]{gap:var(--elm-space-2) var(--elm-space-5);}
body .elementor [id^="elm-proof"]{margin:0;font-size:var(--elm-body-sm);
color:var(--elm-on-dark-secondary);max-width:none;}
body .elementor .e-con[id^="elm-trustbar"]{gap:var(--elm-space-3) var(--elm-space-6);
border-block:1px solid var(--elm-border-dark);padding-block:var(--elm-space-5);}
body .elementor [id^="elm-trust-"]{margin:0;font-size:var(--elm-body-sm);
color:var(--elm-on-dark-secondary);max-width:none;}

/* ============================ THE X DEVICE (§3.4.3) ============================ */
body .elementor .e-con[id^="elm-xlist"] p{position:relative;padding-left:var(--elm-space-6);
margin:0;max-width:var(--elm-measure);}
body .elementor .e-con[id^="elm-xlist"] p::before{content:"\00D7";position:absolute;left:0;top:0;
color:var(--elm-red-500);font-weight:700;font-size:1.2em;line-height:1.35;}
body .elementor .e-con[id^="elm-accent"]{border-left:3px solid var(--elm-red-500);
padding-left:var(--elm-space-5);}
/* C7 equal weight: BOTH fork cards carry the same STEEL rule. A red rule on card A wins
   on pre-attentive colour pop-out no matter how identical the typography is (§3.5.2 C7). */
body .elementor .e-con[id^="elm-accentsteel"]{border-left:3px solid var(--elm-surface-steel);
padding-left:var(--elm-space-5);}

/* ============================ EMPTY STATES ============================ */
/* Where content is blocked the structure is VISIBLY empty. Never a fabricated testimonial,
   rating, count or lorem placeholder — not even in staging (§10.1 items 2, 5, 6). */
body .elementor [id^="elm-pending"]{border:1px dashed var(--elm-border-control-light);
border-radius:var(--elm-radius-md);padding:var(--elm-space-5);color:var(--elm-on-light-muted);
font-size:var(--elm-body-sm);max-width:var(--elm-measure);}
body .elementor [id^="elm-sec-black"] [id^="elm-pending"],
body .elementor [id^="elm-sec-dark"] [id^="elm-pending"]{
border-color:var(--elm-border-control-dark);color:var(--elm-on-dark-muted);}

/* ============================ BREADCRUMBS (C21) ============================ */
body .elementor [id^="elm-breadcrumb"],body .elementor .elm-breadcrumb-list{
list-style:none;display:flex;flex-wrap:wrap;align-items:center;
gap:var(--elm-space-2);margin:0;padding:0;font-size:var(--elm-caption);}
/* 2026-09-14: the link item is a 44px inline-flex target while the current-page item is bare
   text, so with the default `stretch` the two sat on different baselines — "Inicio" a full
   line below "/ Servicios". Every item is now a centred flex row of the same height. */
body .elementor [id^="elm-breadcrumb"] li,body .elementor .elm-breadcrumb-list li{
display:flex;align-items:center;min-height:44px;margin:0;padding:0;}
body .elementor [id^="elm-breadcrumb"] li + li::before,
body .elementor .elm-breadcrumb-list li + li::before{content:"/";
margin-right:var(--elm-space-2);color:var(--elm-on-dark-muted);}
body .elementor [id^="elm-crumb"]{background-color:var(--elm-surface-black);}
body .elementor [id^="elm-crumb"] a:not([id^="elm-btn"]){color:var(--elm-red-350);}
body .elementor [id^="elm-crumb"] [aria-current]{color:var(--elm-on-dark-secondary);}

/* ============================ TABLES (§9.5) ============================ */
body .elementor [id^="elm-tablewrap"]{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;}
body .elementor table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
body .elementor :is(th,td){text-align:left;padding:var(--elm-space-3) var(--elm-space-4);
border-bottom:1px solid var(--elm-border-light);font-size:var(--elm-body-sm);vertical-align:top;}
body .elementor thead th{background:var(--elm-surface-steel);color:var(--elm-on-light);font-weight:700;}
body .elementor caption{text-align:left;font-size:var(--elm-caption);
color:var(--elm-on-light-muted);padding-block-end:var(--elm-space-3);}
/* PANEL FINDING A-7. The table rules above were written for C17/C18, which sit on white or
   paper. Dropped onto a DARK section, the ancestor rule painted th text --on-dark-secondary
   #DFE3E9 while thead kept its steel #DFE3E9 background — identical hex, 1:1 contrast, the
   header row rendered as blank steel cells on the government compliance table. The caption
   token is likewise a light-ground token and measured 3.46:1 on #0B0C0E.
   Tables on dark grounds get their own header surface and their own caption token. */
body .elementor [id^="elm-sec-black"] thead th,
body .elementor [id^="elm-sec-dark"] thead th,
body .elementor [id^="elm-sec-raised"] thead th{
background:var(--elm-surface-dark-hi);color:var(--elm-on-dark);}
body .elementor [id^="elm-sec-black"] caption,
body .elementor [id^="elm-sec-dark"] caption,
body .elementor [id^="elm-sec-raised"] caption{color:var(--elm-on-dark-muted);}
body .elementor [id^="elm-sec-black"] :is(th,td),
body .elementor [id^="elm-sec-dark"] :is(th,td),
body .elementor [id^="elm-sec-raised"] :is(th,td){border-bottom-color:var(--elm-border-dark);}

/* ============================ FAQ (C12) ============================ */
/* <details>/<summary> gives aria-expanded semantics and full keyboard operation with no
   JavaScript, which is a better outcome than the scripted accordion C12 describes. */
body .elementor [id^="elm-faq"] details{border-bottom:1px solid var(--elm-border-light);}
body .elementor [id^="elm-faq"] summary{cursor:pointer;padding:var(--elm-space-4) 0;
min-height:48px;display:flex;align-items:center;gap:var(--elm-space-3);list-style-position:outside;}
body .elementor [id^="elm-faq"] summary h3{margin:0;font-size:var(--elm-h4);
font-family:var(--elm-font-ui);font-weight:700;max-width:none;}
body .elementor [id^="elm-faq"] details > div{padding-block-end:var(--elm-space-4);}

/* ============================ FORMS (§5.4 / §9.4) ============================ */
body .elementor .elm-field{margin-block-end:var(--elm-space-5);max-width:34rem;}
body .elementor .elm-field label{display:block;font-weight:600;font-size:var(--elm-body-sm);
margin-block-end:var(--elm-space-2);}
body .elementor .elm-field :is(input,select,textarea){width:100%;min-height:48px;
padding:var(--elm-space-3) var(--elm-space-4);border-radius:var(--elm-radius-md);
font-size:1rem;/* >=16px — below this iOS zooms the viewport on focus */
font-family:var(--elm-font-ui);background:var(--elm-surface-white);color:var(--elm-on-light);
border:1px solid var(--elm-border-control-light);}/* 3:1 — never --elm-border-light */
body .elementor .elm-hint{display:block;font-size:var(--elm-caption);
color:var(--elm-on-light-muted);margin-block-start:var(--elm-space-2);}
body .elementor .elm-consent{display:flex;gap:var(--elm-space-3);align-items:flex-start;max-width:44rem;}
body .elementor .elm-consent input[type="checkbox"]{width:24px;height:24px;min-height:24px;flex:0 0 auto;margin-top:2px;}
body .elementor .elm-consent label{font-size:var(--elm-body-sm);font-weight:400;}
body .elementor .elm-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
body .elementor .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ============================ FOCUS (§9.3) ============================ */
body .elementor :where(a,button,[role="button"],input,select,textarea,summary,[tabindex]):focus-visible{
outline:3px solid var(--elm-focus-light);outline-offset:2px;}
body .elementor [id^="elm-sec-black"] :focus-visible,body .elementor [id^="elm-sec-dark"] :focus-visible,
body .elementor [id^="elm-sec-raised"] :focus-visible,body .elementor [id^="elm-hero"] :focus-visible,
body .elementor [id^="elm-header"] :focus-visible,body .elementor [id^="elm-sticky"] :focus-visible,
body .elementor [id^="elm-crumb"] :focus-visible{outline-color:var(--elm-focus-dark);}
/* outline:none is NEVER used without a visible replacement */

/* ============================ STICKY MOBILE CTA BAR (§3.5.2 C3, §5.5) ============================ */
html{scroll-padding-bottom:112px;}         /* helps DURING a scroll */
@media(max-width:767px){
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom));}
  /* ^ 104px is MEASURED, not guessed. The bar is specified at 64px (§5.5) but renders
     taller once real labels wrap: 81px in English at 360px, and 99px with the longest
     Spanish CTA ("Solicite una inspección gratuita", §5.2 A2). An earlier 72px reserve
     left the last footer links sitting behind the bar — the precise failure this rule
     exists to prevent. 104px clears the worst measured case with margin, and the extra
     space sits below the footer where it costs nothing.

     NOT redundant with scroll-padding-bottom. At the true bottom of a document scrollTop
     is already at maximum, so a scroll hint cannot manufacture clearance that does not
     exist — and the footer is where the phone number and the legal links live. Without
     this the last footer links sit behind the bar in every mobile keyboard session.
     Sharpest finding of review round 1. Do not "simplify" this away. */
  body .elementor .e-con[id^="elm-sticky"]{position:fixed;left:0;right:0;bottom:0;z-index:90;
  flex-wrap:nowrap;gap:var(--elm-space-2);
  padding:var(--elm-space-2) var(--elm-space-3) calc(var(--elm-space-2) + env(safe-area-inset-bottom));
  background-color:var(--elm-surface-dark-raised);border-top:1px solid var(--elm-border-dark);}
  body .elementor .e-con[id^="elm-sticky"] [id^="elm-btn"]{flex:1 1 42%;min-width:0;
  padding:var(--elm-space-2);font-size:var(--elm-body-sm);line-height:1.2;
  overflow-wrap:anywhere;}
  /* C3 visibility is driven by data-sticky on <body>, set by the enhancement script.
     §5.5: hidden until 250px of scroll, and hidden whenever a form field has focus so it
     cannot cover the on-screen keyboard or an error message. */
  /* C3 starts HIDDEN and the enhancement script reveals it after 250px of scroll (§5.5).
     `display` is used rather than opacity/visibility deliberately: it is a layout property,
     so its effect is measurable as a real height rather than as an animated value that a
     throttled or transitioning frame reports inconsistently. It also means that with
     scripting off the bar simply never appears, which is the safe failure — the spec's
     whole point is that it must not cover the hero CTA. */
  body .elementor .e-con[id^="elm-sticky"]{display:none;}
  body .elementor .e-con[id^="elm-sticky"] [id^="elm-btn-primary"]{flex:1 1 58%;}
}
@media(min-width:768px){body .elementor .e-con[id^="elm-sticky"]{display:none;}}

/* §3.2.6: "Minimum button width is set by the Spanish string, then applied to both
   languages", and the spec names the test case — the sticky bar must survive
   "Solicite una inspección gratuita" (33 chars) without wrapping to THREE lines. It did in
   the narrow slot; the caption size below 400px keeps it to two.
   NOTE: declared at TOP LEVEL, not nested inside the max-width:767px block. A nested
   @media is valid CSS, but Elementor's kit stylesheet did not apply the rules that
   followed it — the sticky bar's own visibility rules silently never took effect. Keep
   every @media in this file at the top level. */
@media(max-width:400px){
  body .elementor .e-con[id^="elm-sticky"] [id^="elm-btn"]{font-size:var(--elm-caption);}
}

/* ============================ FOOTER ============================ */
/* 2026-09-14: the footer columns inherited Elementor's atomic default `align-items:center`, so
   every heading and single-line link was centred while any link that WRAPPED ("Condados de
   Essex, Hudson, Union, Passaic, Middlesex y Somerset") filled the column and read left-aligned
   — a visible mismatch at every width, both languages. C22 specifies no alignment; the rest of
   the page is left-aligned, so the columns are too. */
body .elementor .e-con[id^="elm-footcol"]{align-items:flex-start;}
/* `[id^="elm-foot-"]` with the hyphen: the link ids are elm-foot-{key}-{n}. Without it this
   rule ALSO matched the elm-footcol-* columns and its `align-items:center` (same specificity,
   later in the file) was the actual source of the centring above. */
body .elementor [id^="elm-sec-black-footer"] [id^="elm-foot-"],
body .elementor [id^="elm-sec-black-footer"] [id^="elm-phone-footer"]{margin:0;
min-height:44px;display:flex;align-items:center;max-width:none;}

/* ============================ MOTION (§9.7) ============================ */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;}}

/* ============================ FORCED COLORS (§9.7) ============================ */
/* Windows High Contrast. This is the accessibility investment made instead of a dark-mode
   toggle (§3.1.6) — no information may be carried by a background or a glyph colour alone. */
@media(forced-colors:active){
body .elementor [id^="elm-btn"],body .elementor .e-con[id^="elm-card"],
body .elementor [id^="elm-pending"],body .elementor .e-con[id^="elm-sticky"],
body .elementor .elm-field :is(input,select,textarea){border:1px solid ButtonBorder;}
body .elementor .e-con[id^="elm-xlist"] p::before{color:CanvasText;}
body .elementor .e-con[id^="elm-hero"]::after{display:none;}
body .elementor :focus-visible{outline:3px solid Highlight;outline-offset:2px;}}

/* ============================ TEXT SPACING (§9.5 SC 1.4.12) ============================ */
/* No fixed heights on text-bearing components — the same constraint Spanish expansion
   imposes (§3.2.6), so one fix serves both. No ellipsis on anything a user must read. */
body .elementor .e-con[id^="elm-card"],body .elementor [id^="elm-btn"],
body .elementor [id^="elm-pending"],body .elementor .e-con[id^="elm-accent"]{height:auto;}

/* ============================ TAP TARGETS (§9.2 SC 2.5.8) ============================
   Elementor nests the link INSIDE a linked heading/paragraph (<h3 id=…><a>…</a></h3>), so
   the anchor is only as tall as its text — 26px. Inline links inside running prose are
   exempt under the WCAG inline exception, but a card title, a logo and a standalone
   "See all services →" are navigation, not prose. flex + min-height keeps normal wrapping
   while guaranteeing the target.
   NOTE (deviation from §3.5.2 C8): the spec wants the WHOLE card to be one <a>. The MCP
   connector cannot emit a card as an anchor, so the title carries the link instead. */
/* elm-card-*-h is the Spanish generator's id for a linked card heading; without it those
   titles were 26px targets on /servicios/ while the English equivalents were 44px. */
body .elementor :is([id^="elm-h2"],[id^="elm-h3"],[id^="elm-h4"],[id^="elm-logo"],
[id^="elm-link"],[id^="elm-navitem"],[id^="elm-foot"],[id^="elm-phone"],
[id^="elm-county"],[id^="elm-trust"],[id^="elm-card"],[id^="elm-cond"]) > a{
min-height:44px;display:flex;align-items:center;text-decoration-thickness:1px;}
/* Breadcrumb links are navigation too, but a 44px row would dominate the strip; give them
   padding so the target grows without the visual weight. */
body .elementor [id^="elm-breadcrumb"] a,
body .elementor .elm-breadcrumb-list a{display:inline-flex;align-items:center;min-height:44px;}

/* ============================ SKIP LINK (§9.3) ============================
   First focusable element on every page. The theme ships a .skip-link CSS rule but never
   emitted the element, so keyboard users tabbed the whole header on every page. */
body .elm-skip{position:absolute;left:-9999px;top:0;z-index:200;
background:var(--elm-surface-black);color:var(--elm-on-dark);
padding:var(--elm-space-3) var(--elm-space-4);border:2px solid var(--elm-focus-dark);
font-weight:700;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;}
body .elm-skip:focus{left:var(--elm-space-4);top:var(--elm-space-2);}

/* ============================ PHOTO BANDS (§3.5.2 C5 scrim logic, §3.6.2) ============================
   Stock photography is permitted ONLY below the fold, and may never be captioned or laid out
   to imply it depicts Eliminatis's own work (§3.6.2, §10.1 item 6). These are decorative
   context bands: the image carries no information, every word sits in real text above it, and
   the alt/attribution on each attachment records it as an illustrative placeholder for the
   §3.6.3 shoot.

   The scrim is a CONTRAST requirement, not styling. Against a worst-case white photo pixel,
   rgba(0,0,0,.78) composites to rgb(56,56,56) = 11.73:1 for white text — the same arithmetic
   the hero uses. Binding floor is .6; .78 is used so the county list and the credential
   strings clear AA with margin. A designer may not reduce it for a prettier image. */
body .elementor #elm-sec-dark-area,body .elementor #elm-sec-black-gov{position:relative;
isolation:isolate;background-size:cover;background-position:center;background-repeat:no-repeat;}
body .elementor #elm-sec-dark-area::before,body .elementor #elm-sec-black-gov::before,
body .elementor #elm-sec-dark-area-es::before,body .elementor #elm-sec-black-gov-es::before{
content:"";position:absolute;inset:0;z-index:0;
content:"";position:absolute;inset:0;z-index:0;background-color:rgba(0,0,0,.88);}
/* Scrim raised .78 -> .88, and red links on these bands drop to --red-300, because a photo
   is a VARIABLE ground and both had to be computed against the worst case a photograph can
   present (a pure white pixel). Measured on the built page, red-350 on the .78 composite
   rgb(56,56,56) came back at 3.32:1 — a real AA failure, found only because the sweep
   substituted the composite instead of the transparent section colour. Arithmetic:
       scrim .78 -> rgb(56,56,56):  red-350 3.32  red-300 4.20  white 11.73
       scrim .88 -> rgb(31,31,31):  red-350 4.67  red-300 5.91  white 16.48
   .88 with red-300 clears the 4.5 body threshold with margin and matches the hero's own
   heavy-zone alpha (§3.5.2 C5). Do not lighten either for a prettier image. */
body .elementor #elm-sec-dark-area a:not([id^="elm-btn"]),
body .elementor #elm-sec-black-gov a:not([id^="elm-btn"]){color:var(--elm-red-300);}
body .elementor #elm-sec-dark-area > *,body .elementor #elm-sec-black-gov > *{
position:relative;z-index:1;}
/* Responsive, and the sizes are chosen against a measured budget rather than by eye.
   §8.1's page-weight budget is stated for MOBILE, FIRST VIEW: at the 1024px variants the
   page measured ~1,053KB uncached against a 1.0MB ceiling — over. The 768px variants
   (114KB + 61KB, vs 198KB + 102KB) bring mobile to ~906KB, inside it. Desktop, which the
   budget does not govern, keeps the sharper 1024px pair.
   Every variant is also inside §8.4's 250KB per-image ceiling.
   No AVIF/WebP: this WordPress install generates neither, and §8.4's <picture> chain is not
   expressible through a CSS background. Recorded as a gap rather than papered over. */
body .elementor #elm-sec-dark-area{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-5847367-768x512.jpeg");}
body .elementor #elm-sec-black-gov{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-16924265-768x512.jpeg");}
@media(min-width:1024px){
  body .elementor #elm-sec-dark-area{
  background-image:url("/wp-content/uploads/2026/08/pexels-photo-5847367-1024x683.jpeg");}
  body .elementor #elm-sec-black-gov{
  background-image:url("/wp-content/uploads/2026/08/pexels-photo-16924265-1024x683.jpeg");}
}

/* ============================ PEST SELECTOR — C9 (§3.5.2, §4.1 §4) ============================
   "What did you see?" — the homeowner's fastest self-diagnosis route, and it targets the
   Group-1 keyword set directly. 4-across on mobile, 8-across on desktop per §4.1.
   Icons are flat steel silhouettes (§3.4.5): never red — red belongs to actions, not pests —
   and never photographic. */
body .elementor #elm-pestgrid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--elm-space-2);}
@media(min-width:768px){body .elementor #elm-pestgrid{grid-template-columns:repeat(8,minmax(0,1fr));
gap:var(--elm-space-3);}}
body .elementor #elm-pestgrid a{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:var(--elm-space-2);min-height:96px;padding:var(--elm-space-3)
var(--elm-space-1);text-decoration:none;border-radius:var(--elm-radius-md);
background:var(--elm-surface-dark-raised);border:1px solid var(--elm-border-dark);
color:var(--elm-on-dark-secondary);text-align:center;
transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease;}
body .elementor #elm-pestgrid a:hover{background:var(--elm-surface-dark-hi);
border-color:var(--elm-on-light-secondary);transform:translateY(-2px);color:var(--elm-on-dark);}
body .elementor #elm-pestgrid svg{width:34px;height:34px;flex:0 0 auto;
color:var(--elm-surface-steel);fill:currentColor;}
body .elementor #elm-pestgrid span{font-size:var(--elm-caption);font-weight:600;line-height:1.25;}

/* Service-card icons — C8 slot 1, 32px steel (§3.5.2 C8) */
body .elementor .elm-svcicon{width:32px;height:32px;display:block;fill:currentColor;
margin-block-end:var(--elm-space-2);}
body .elementor [id^="elm-sec-paper"] .elm-svcicon,
body .elementor [id^="elm-sec-white"] .elm-svcicon{color:var(--elm-on-light-secondary);}
body .elementor [id^="elm-sec-black"] .elm-svcicon,
body .elementor [id^="elm-sec-dark"] .elm-svcicon{color:var(--elm-surface-steel);}

/* Process numerals — C19: "numerals in the display serif at 48px in #22262C behind the step
   title". On a light ground #22262C at low opacity reads as the intended ghosted numeral. */
body .elementor .e-con[id^="elm-card-step"]{position:relative;overflow:hidden;}
/* Numerals are declared per card rather than read from a data-attribute: the connector
   cannot set arbitrary attributes on a container, and a JS-set attribute would make a
   decorative numeral depend on scripting. */
body .elementor .e-con#elm-card-step1::before{content:"1";}
body .elementor .e-con#elm-card-step2::before{content:"2";}
body .elementor .e-con#elm-card-step3::before{content:"3";}
body .elementor .e-con#elm-card-step4::before{content:"4";}
body .elementor .e-con[id^="elm-card-step"]::before{
position:absolute;top:-14px;right:2px;font-family:var(--elm-font-display);font-weight:800;
font-size:76px;line-height:1;color:var(--elm-surface-dark-hi);opacity:.13;
pointer-events:none;user-select:none;z-index:0;}
body .elementor .e-con[id^="elm-card-step"] > *{position:relative;z-index:1;}

/* The hero X device reads too faintly at .08 once photography sits elsewhere on the page. */
body .elementor .e-con[id^="elm-hero"]::after{opacity:.11;}

/* ============================================================================
   HERO PHOTOGRAPHY — §3.5.2 C5, implemented as specified
   ============================================================================
   C5 always described a photographic hero: a background image, a left-to-right
   gradient scrim of .88 / .78 / .60, and a text column capped at 60% so no
   text-bearing element can reach the gradient's thin end. The first build shipped the
   no-photo variant (§3.6.4) only because no photography existed.

   DEPARTURE FROM §3.6.2, ON MIKE'S EXPLICIT DIRECTION (recorded 2026-08-17):
   §3.6.2 says "no stock photography above the fold, on any page, ever." That rule exists
   to prevent the §10.1 item 6 exposure — stock presented as Eliminatis's own work. Every
   image used here is therefore deliberately chosen so it CANNOT be read that way: no
   people, no technicians, no vans, no branded gear, no pest-control activity of any kind.
   They are places and materials, not claims. Each attachment records itself as an
   illustrative placeholder for the §3.6.3 shoot.

   SCRIM ARITHMETIC (worst case a photograph can present = a pure white pixel):
     .88 -> rgb(31,31,31): white 16.48 : steel #DFE3E9 12.80
     .78 -> rgb(56,56,56): white 11.73 : steel #DFE3E9  9.10
   The text column is capped at 60% on desktop, so body copy only ever sits over the
   .88-.78 span. Both clear AA with very large margin. Do not lighten either. */

/* LAYERING. The photograph lives on ::before and the scrim on ::after, rather than the
   image being the element's own background. That separation is what makes §3.6.2's grading
   direction applyable — "high contrast, cool/neutral white balance to sit with steel. No
   warm filter" — because a filter on the element itself would also grade the text. The
   stock pool is inconsistently warm (the tools frame is gold-toned); this pulls every
   photograph on the site onto one cool, high-contrast grade so they read as one system. */
body .elementor .e-con[id^="elm-hero"]{position:relative;isolation:isolate;overflow:hidden;}
body .elementor .e-con[id^="elm-hero"]::before{content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  /* brightness >1 is deliberate and it is SAFE. The scrim on ::after composites to
     image*(1-alpha), so at alpha .88 the result can never exceed rgb(31,31,31) however
     bright the source is — the contrast guarantee is unaffected. What brightness does
     change is how much of the 12% that shows through is legible: at .86 the darker frames
     (the workbench, the tools) rendered as flat black and the page looked as empty as it
     did with no photograph at all. */
  filter:grayscale(.85) contrast(1.06) brightness(1.55);}
body .elementor .e-con[id^="elm-hero"]::after{content:"";position:absolute;inset:0;z-index:1;
  background-color:rgba(0,0,0,.88);opacity:1;font-size:0;}
body .elementor .e-con[id^="elm-hero"] > *{position:relative;z-index:2;}
@media(min-width:1024px){
  body .elementor .e-con[id^="elm-hero"]{min-height:76vh;justify-content:center;}
  body .elementor .e-con[id^="elm-hero"]::after{background-color:transparent;
    background-image:linear-gradient(90deg,
      rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.78) 62%, rgba(0,0,0,.60) 100%);}
}
/* Per-page hero art on ::before. 768px variants on mobile, 1024px above — §8.1's weight
   budget is stated for mobile first view, and these sizes were measured, not guessed. */
body .elementor #elm-hero-home::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4933643-768x513.jpeg");}
body .elementor #elm-hero-services::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4312855-768x512.jpeg");}
body .elementor #elm-hero-bb::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4177628-768x512.jpeg");}
body .elementor #elm-hero-nj::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-12654935-768x512.jpeg");}
body .elementor #elm-hero-contact::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-186077-768x524.jpeg");}
body .elementor #elm-hero-abt::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-7019373-768x512.jpeg");}
/* Spanish tree — the same art as its English twin, so a visitor who switches language sees
   the same page rather than a different brand. */
body .elementor #elm-hero-inicio::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4933643-768x513.jpeg");}
body .elementor #elm-hero-servicios::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4312855-768x512.jpeg");}
body .elementor #elm-hero-chinches::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4177628-768x512.jpeg");}
body .elementor #elm-hero-nj-es::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-12654935-768x512.jpeg");}
body .elementor #elm-hero-contacto::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-186077-768x524.jpeg");}
body .elementor #elm-hero-nosotros::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-7019373-768x512.jpeg");}
@media(min-width:1024px){
  body .elementor #elm-hero-home::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4933643-1024x684.jpeg");}
  body .elementor #elm-hero-services::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4312855-1024x683.jpeg");}
  body .elementor #elm-hero-bb::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4177628-1024x683.jpeg");}
  body .elementor #elm-hero-nj::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-12654935-1024x683.jpeg");}
  body .elementor #elm-hero-contact::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-186077-1024x698.jpeg");}
  body .elementor #elm-hero-abt::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-7019373-1024x683.jpeg");}
  body .elementor #elm-hero-inicio::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4933643-1024x684.jpeg");}
  body .elementor #elm-hero-servicios::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4312855-1024x683.jpeg");}
  body .elementor #elm-hero-chinches::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-4177628-1024x683.jpeg");}
  body .elementor #elm-hero-nj-es::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-12654935-1024x683.jpeg");}
  body .elementor #elm-hero-contacto::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-186077-1024x698.jpeg");}
  body .elementor #elm-hero-nosotros::before{background-image:url("/wp-content/uploads/2026/08/pexels-photo-7019373-1024x683.jpeg");}
}
/* Hero content sits on the SAME 1200px well as every section below it, or the headline
   starts 80px left of the h2 beneath it and the page reads as misaligned. */
@media(min-width:1281px){
  body .elementor .e-con[id^="elm-hero"]{
    padding-inline:calc((100% - var(--elm-content-max)) / 2);}
}

/* A hero needs to end somewhere. A short fade into the next section stops the photograph
   from colliding with the band beneath it. */
body .elementor .e-con[id^="elm-hero"]{position:relative;}
body .elementor .e-con[id^="elm-hero"] > *{position:relative;z-index:2;}

/* ============================================================================
   GOVERNMENT — keeps its register (§4.6: "a document, not a landing page")
   ============================================================================
   §4.6 states plainly that this page has NO hero photograph: paper ground, tabular
   figures, downloadable artifacts. That is §1.2 decision 4 — the procurement reader should
   feel they have arrived at a different kind of document — and it is the single structural
   idea that differentiates this tree. So it gets a framed civic image beside the facts
   panel instead of a full-bleed hero, which modernises it without dissolving the register. */
body .elementor #elm-img-govhero{display:block;width:100%;height:auto;
  border:1px solid var(--elm-border-light);border-radius:var(--elm-radius-lg);
  aspect-ratio:3/4;object-fit:cover;box-shadow:var(--elm-e2);}

/* Framed inline images elsewhere */
body .elementor .elm-figure{margin:0;}
body .elementor .elm-figure img{display:block;width:100%;height:auto;
  border-radius:var(--elm-radius-lg);border:1px solid var(--elm-border-dark);}
body .elementor [id^="elm-sec-paper"] .elm-figure img,
body .elementor [id^="elm-sec-white"] .elm-figure img{border-color:var(--elm-border-light);
  box-shadow:var(--elm-e1);}

/* ============================ SECTION PHOTO BANDS — remaining pages ============================
   Same contract as the homepage bands: below the fold, decorative context, scrim .88 so the
   worst case a photograph can present (a white pixel) composites to rgb(31,31,31), and links
   drop to --red-300 (5.91:1 there). All graded to the same cool/steel register as the heroes. */
body .elementor #elm-sec-dark-njlaw,body .elementor #elm-sec-dark-svcarea,
body .elementor #elm-sec-dark-abtcred,body .elementor #elm-sec-dark-njlaw-es,
body .elementor #elm-sec-dark-svcarea-es,body .elementor #elm-sec-dark-abtcred-es{position:relative;isolation:isolate;overflow:hidden;}
body .elementor #elm-sec-dark-njlaw::before,body .elementor #elm-sec-dark-svcarea::before,
body .elementor #elm-sec-dark-abtcred::before,body .elementor #elm-sec-dark-njlaw-es::before,
body .elementor #elm-sec-dark-svcarea-es::before,body .elementor #elm-sec-dark-abtcred-es::before{content:"";position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
filter:grayscale(.85) contrast(1.06) brightness(1.55);}
body .elementor #elm-sec-dark-njlaw::after,body .elementor #elm-sec-dark-svcarea::after,
body .elementor #elm-sec-dark-abtcred::after,body .elementor #elm-sec-dark-njlaw-es::after,
body .elementor #elm-sec-dark-svcarea-es::after,body .elementor #elm-sec-dark-abtcred-es::after{content:"";position:absolute;inset:0;z-index:1;
background-color:rgba(0,0,0,.88);}
body .elementor #elm-sec-dark-njlaw > *,body .elementor #elm-sec-dark-svcarea > *,
body .elementor #elm-sec-dark-abtcred > *,body .elementor #elm-sec-dark-njlaw-es > *,
body .elementor #elm-sec-dark-svcarea-es > *,body .elementor #elm-sec-dark-abtcred-es > *{position:relative;z-index:2;}
body .elementor #elm-sec-dark-njlaw a:not([id^="elm-btn"]),
body .elementor #elm-sec-dark-svcarea a:not([id^="elm-btn"]),
body .elementor #elm-sec-dark-abtcred a:not([id^="elm-btn"]),
body .elementor #elm-sec-dark-njlaw-es a:not([id^="elm-btn"]),
body .elementor #elm-sec-dark-svcarea-es a:not([id^="elm-btn"]),
body .elementor #elm-sec-dark-abtcred-es a:not([id^="elm-btn"]),
body .elementor #elm-sec-dark-area-es a:not([id^="elm-btn"]),
body .elementor #elm-sec-black-gov-es a:not([id^="elm-btn"]){color:var(--elm-red-300);}
body .elementor #elm-sec-dark-njlaw::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-5847367-768x512.jpeg");}
body .elementor #elm-sec-dark-svcarea::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-16924265-768x512.jpeg");}
body .elementor #elm-sec-dark-abtcred::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-5847367-768x512.jpeg");}
/* Deliberately NO 1024px upgrade for the bands. They sit under an .88 scrim AND
   grayscale(.85), so 1024px detail is not perceivable — it is 190KB of bytes nobody can
   see. Desktop drops from 1,113KB to ~989KB for zero visual cost. Heroes keep the
   responsive pair because their right-hand side sits at only .60 scrim and is legible. */
/* The homepage bands predate this block and set their image on the element itself; bring
   them onto the same graded ::before treatment so all photography matches. */
body .elementor #elm-sec-dark-area,body .elementor #elm-sec-black-gov,
body .elementor #elm-sec-dark-area-es,body .elementor #elm-sec-black-gov-es{background-image:none;
position:relative;isolation:isolate;overflow:hidden;}
body .elementor #elm-sec-dark-area::before,body .elementor #elm-sec-black-gov::before,
body .elementor #elm-sec-dark-area-es::before,body .elementor #elm-sec-black-gov-es::before{
content:"";position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
filter:grayscale(.85) contrast(1.06) brightness(1.55);background-color:transparent;}
body .elementor #elm-sec-dark-area::after,body .elementor #elm-sec-black-gov::after,
body .elementor #elm-sec-dark-area-es::after,body .elementor #elm-sec-black-gov-es::after{
content:"";position:absolute;inset:0;z-index:1;background-color:rgba(0,0,0,.88);}
body .elementor #elm-sec-dark-area > *,body .elementor #elm-sec-black-gov > *,
body .elementor #elm-sec-dark-area-es > *,body .elementor #elm-sec-black-gov-es > *{position:relative;z-index:2;}
/* The "where we work" band uses the residential-street frame rather than the brick facade:
   same subject class, contextually better for a service-area band, and 59KB instead of
   111KB. Under an .88 scrim with grayscale(.85) the two are visually indistinguishable, and
   the 52KB buys real headroom on /inicio/, which was the heaviest page at 986KB against a
   1.0MB ceiling. The brick frame is still used where it earns its weight — the landlord /
   tenant band and the About credentials band. */
body .elementor #elm-sec-dark-area::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-12654935-768x512.jpeg");}
body .elementor #elm-sec-black-gov::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-16924265-768x512.jpeg");}


/* Government civic strip — a wide crop, not a hero. §4.6's register is preserved: the page
   still opens on paper with the credential panel, and the photograph is a masthead band
   beneath it rather than a full-bleed consumer hero. */
body .elementor #elm-govstrip{display:block;width:100%;aspect-ratio:21/6;object-fit:cover;
object-position:center 62%;border-radius:var(--elm-radius-lg);
border:1px solid var(--elm-border-light);
filter:grayscale(.85) contrast(1.12) brightness(.92);}

/* Spanish band art — matches the English twin of each page. */
body .elementor #elm-sec-dark-njlaw-es::before,
body .elementor #elm-sec-dark-abtcred-es::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-5847367-768x512.jpeg");}
body .elementor #elm-sec-dark-area-es::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-12654935-768x512.jpeg");}
body .elementor #elm-sec-black-gov-es::before,body .elementor #elm-sec-dark-svcarea-es::before{
background-image:url("/wp-content/uploads/2026/08/pexels-photo-16924265-768x512.jpeg");}

/* ============================ C23 LANGUAGE SWITCHER (§3.5.2) ============================
   Text pills, never flags — flags denote countries, not languages, and are an accessibility
   and correctness failure. The inactive language is the link; the active one is plain text
   carrying aria-current. It points at the DIRECT equivalent of the current page. */
body .elementor .elm-langswitch{display:flex;align-items:center;gap:2px;margin:0;
font-size:var(--elm-caption);font-weight:700;letter-spacing:.06em;max-width:none;}
body .elementor .elm-langswitch a,body .elementor .elm-langswitch span{
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;padding:0 var(--elm-space-2);border-radius:var(--elm-radius-md);
text-decoration:none;}
body .elementor .elm-langswitch a{color:var(--elm-on-dark-muted);
border:1px solid var(--elm-border-control-dark);}
body .elementor .elm-langswitch a:hover{color:var(--elm-on-dark);
border-color:var(--elm-surface-steel);background:var(--elm-surface-dark-hi);}
body .elementor .elm-langswitch span{color:var(--elm-on-dark);
background:var(--elm-surface-dark-hi);border:1px solid var(--elm-border-dark);}

/* The C23 switcher is a fourth item in the header, and on a phone logo + switcher + phone
   button will not fit one row — it pushed the header to THREE rows and ~170px, undoing the
   earlier work that got it to 121px. Two rows, deliberately arranged:
       row 1  logo + phone button   (the two things a panicked caller needs)
       row 2  nav strip + switcher  (nav still scrolls horizontally, §1.2 decision 3)
   The nav takes a 60% basis so the switcher shares its row instead of forcing a third. */
@media(max-width:1023px){
  body .elementor .e-con[id^="elm-nav"]{flex:1 1 60%;order:3;width:auto;min-width:0;}
  /* The switcher is markup INSIDE an Elementor html widget, so the header's flex item is
     the widget wrapper, not the <p>. Ordering the <p> does nothing — target the wrapper. */
  body .elementor [id^="elm-header"] > *:has(.elm-langswitch){order:4;flex:0 0 auto;
  margin-left:auto;}
  body .elementor .elm-langswitch{flex:0 0 auto;}
  body .elementor [id^="elm-header"] [id^="elm-btn-primary"]{order:1;}
}/* End custom CSS */