/* * elementor-bridge.css — operation-iron-gate (LIVE theme) * --------------------------------------------------------------------------- * Rules that exist ONLY to beat Elementor's own frontend resets, which target * elements inside .elementor and therefore outrank the design's plain classes. * * ⚠ THIS IS NOT A COPY OF THE LOCAL THEME'S elementor-bridge.css. * * The hello-elementor-oig bridge (8,824 B) also zeroes Elementor's default * container padding and gap: * .elementor .e-con { --padding-inline-start:0; --gap:0; ... } * That is ONLY safe there because json/convert.py emits layout-.css, * which re-supplies the design's own padding and gap afterwards. * THIS THEME HAS NO layout-.css. Copying those rules here would strip * padding and gap site-wide with nothing to restore them. Do not port them * without porting the generated layout files first. * * --------------------------------------------------------------------------- * RULE 1 — the brand mark rendering at natural size over the hero * * MEASURED LIVE 2026-08-17 at 1440px, on every page: * .nav__mark attr 38x34 natural 869x767 RENDERED 869x767 * top -425px, bottom 342px, hero top 184px -> 158px of hero overlap * * A ~869x767 navy family mark was hanging out of the header across the hero. * It is the SITE BRAND LOGO, not leftover content from an older build, and it * must not be deleted — .nav__brand would become an empty link on all six pages. * * CAUSE — a specificity loss, nothing more: * .elementor img { height:auto; max-width:100% } (0,1,1) custom-frontend.min.css * .nav__mark { height:46px; width:auto } (0,1,0) styles.css:4380 * Elementor's reset wins, height falls back to auto, and .nav__mark's own * width:auto then lets the image draw at its intrinsic 869x767. * * The header markup is an HTML widget inside a Theme Builder template, so the * mark is a descendant of .elementor on every page. There is no markup change * that avoids this — the fix belongs in CSS. * * Restores the design's declared sizes verbatim from styles.css:4380-4381 * (46px at rest, 35px condensed — both deliberately 25% up from 38/28, per the * source comment at styles.css:4371). width:auto preserves the aspect ratio. * * SPECIFICITY, not load order, is what makes these win: * .elementor .nav__mark (0,2,0) > .elementor img (0,1,1) * .elementor .nav.is-condensed .nav__mark (0,3,0) > the rule above * The condensed state therefore still overrides the resting state, exactly as * it does in styles.css. Do not "simplify" by dropping .elementor from the * first selector — at (0,1,0) it loses to Elementor's reset again. */ .elementor .nav__mark { height: 46px; width: auto; } .elementor .nav.is-condensed .nav__mark { height: 35px; } /* * --------------------------------------------------------------------------- * RULE 2 — heading widgets render at Elementor's sizes, not the design's * * In the source a heading carries its design class on the TAG: *

.display-hero{font-size:var(--fs-hero)} * Elementor's Heading widget cannot put a class on the tag. The class lands on * the widget WRAPPER and the tag renders with Elementor's classes only: *
<- 123.84px *

<- 40px * * MEASURED LIVE 2026-08-17, homepage at 1440px: 29 heading widgets, 0 correct. * Every tag rendered at a flat Elementor size regardless of intent: * H1 intended 123.84 -> 40 (--fs-hero clamp(46px,8.6vw,132px)) * H2 intended 120.96 / 77.76 / 68 / 67.68 / 54 / 31.68 / 12 -> all 32 * H3 intended 74 / 16 / 13 -> all 28 * and custom-frontend.min.css additionally forces line-height:1 on every one. * * SEVEN DISTINCT INTENDED SIZES FOR

ALONE. That is why this is fixed in * CSS and NOT by typing a px value into each widget: one number per tag is * wrong by construction. Setting "H2 = 68px" would be correct for one of the * fifteen H2s and would render .ledger__label and .cap__eyebrow — both * intended at 12px — at 68px. It would also freeze every clamp(), so the type * would stop scaling between 320px and widescreen, and would not touch * line-height at all. * * THE FIX — make the inner tag typographically transparent so the source class * on the wrapper governs, exactly as it does in the source markup. * * SCOPING IS THE LOAD-BEARING PART. Applies ONLY to widgets carrying .oig-ht, * which the generator adds only where the SOURCE class actually declares a * font-size. MEASURED on home: 21 widgets carry it (19 were wrong); the other * 8 do not, and 7 of those are ALREADY CORRECT — four

at 10.5px and three *

at 20px, styled by design descendant rules that target the bare tag * (ratios 0.656 and 1.25 against the 16px base, both matching source). A * blanket rule here would outrank those and break the seven while fixing the * nineteen. DO NOT WIDEN THIS SELECTOR. * * Specificity (0,3,0) beats hello-elementor's bare h1..h6 sizing and Elementor's * .elementor-heading-title, so this one does not depend on load order. */ .elementor-widget-heading.oig-ht > .elementor-heading-title { font: inherit; } /* * --------------------------------------------------------------------------- * RULE 3 — Elementor's forced line-height:1 on every heading title * * custom-frontend.min.css ships .elementor-heading-title{line-height:1}, which * discards the source line-heights. On this design they are mostly INHERITED * (body is 1.6) rather than set on the heading, so the forced 1 collapses them. * MEASURED live: every one of the 29 headings had line-height exactly equal to * its font-size, i.e. 1.0. * * ⚠ THE SELECTOR BELOW IS DELIBERATELY IDENTICAL TO ELEMENTOR'S, at the same * (0,1,0) specificity. It wins ONLY because this file is enqueued after * elementor-frontend. That is the whole point: * - it displaces Elementor's rule and nothing else * - it still LOSES to any design rule that is more specific, e.g. * `.foo h3{line-height:1.3}` at (0,1,1) — which is what keeps the unclassed * headings correct * * Do NOT "improve" this to .elementor-widget-heading .elementor-heading-title. * At (0,2,0) it outranks those design rules and breaks them — measured on the * local build: it fixed four headings and broke three. * * BECAUSE THIS RULE DEPENDS ON LOAD ORDER, verify it after any change to the * enqueue order in inc/asset-map.php. The theme's oig/*.css currently print * after uploads/elementor/css/custom-frontend.min.css, which is what makes it * work. */ .elementor-heading-title { line-height: inherit; } /* * --------------------------------------------------------------------------- * RULE 4 — nav overflows between 1081px and 1240px * * styles.css carries a FOUNDER RULING (see its own appended block, "NAV — LINKS * VISIBLE 1081-1240"): the eight nav items must stay on screen in that band * rather than collapse to the burger. Its companion rule tightens the links * "so they FIT between 1080 and 1240". MEASURED LIVE 2026-08-17 they do not: * * viewport 1100 -> .nav__in available 1019 * brand 241 (mark 52 + gap 11 + .nav__names 178 @16px) * + links 653 (ALREADY tightened: gap 10px, 12px type, 7 visible) * + cta 101 * + gaps 48 (24 x 2) * = 1043 needed -> 24px SHORT. The Donate button sat 23px off-screen and * body{overflow-x:clip} cut it. * * The links are already at their tightest, so the space has to come from the * brand. THE MARK IS NOT TOUCHED — styles.css:4371 records that 46/35px was a * deliberate 25% size-up, and this file's Rule 1 restores it. The wordmark text * beside it is the larger share (178px of the 241px) and carries the reduction. * * Scoped to the exact band that overflows. Below 1081 the burger takes over and * the nav is correct (measured at 1024: cta right 975 < 1024). Above 1240 the * design is untouched. * * Recovers ~38px against a 24px shortfall, leaving ~14px of headroom. */ @media (min-width: 1081px) and (max-width: 1240px) { .nav__in { gap: 12px; } .nav__names { font-size: 14px; } /* the design already tightens the CTA below 1080; do the same inside the band */ .nav__cta .btn { padding: 11px 16px; } } /* * --------------------------------------------------------------------------- * RULE 5 — the footer wordmark runs out of room below ~1085px * * .close__mark is `white-space:nowrap` with `font-size:clamp(34px,11.3vw,190px)` * (styles.css:1465 and :4341). Anton renders "Pathfinders for Hope" at almost * exactly 7.47x the font-size, so the line grows nearly as fast as the viewport * while the padding and the fixed 57.6px body inset do not. MEASURED headroom: * * 1440px text 1216 / avail 1259 +43 * 1280px text 1081 / avail 1106 +25 * 1100px text 929 / avail 931 +2 * 1024px text 865 / avail 861 -4 <- overflows its padding box * * At 1024 it spills 4px into its own padding rather than being cut by the * viewport, so the damage is small — but the margin is gone, and any fallback * font makes it severe: the same string in sans-serif measures 980 against * Anton's 865, a 115px penalty. During the font swap, or if Anton fails to * load, the line visibly overruns. (Verified Anton IS loading: document.fonts * reports "Anton 400 normal -> loaded" and the rendered width matches Anton.) * * Backing the coefficient off to 10.4vw ONLY where it is tight restores real * headroom (~66px at 1024) and absorbs the fallback penalty. Above 1240px the * design is untouched, so the desktop wordmark is unchanged. */ @media (max-width: 1240px) { .close__mark { font-size: clamp(34px, 10.4vw, 190px); } } /* * RULE 2 — Elementor's default container padding and gap, SITE-WIDE * * Elementor gives every .e-con a default 10px block padding and a 20px gap. * The design asks for neither: styles.css declares its own vertical rhythm * where it wants one (.sec is padding-block var(--section-y), .hero is 44/132, * .door is 16px). Nested up to five deep, Elementor's defaults compound on top * of the design's spacing on every container on every page. * * MEASURED LIVE 2026-08-17 at 1600x900, homepage, before this rule: * 157 containers * Elementor default padding 1,960px (98 containers x 20px) * Elementor default gap 2,380px (119 gaps x 20px) * ELEMENTOR DRIFT 4,340px * design padding 5,820px (.sec alone 2,544 - correct) * page height 21,644px * * After: page 18,866px. 2,778px reclaimed, 12.8% of the document. * * SCOPING, and both halves matter: * * 1. VERTICAL AXIS ONLY. The local hello-elementor-oig bridge also zeroes * --padding-inline-*, but it can only do that safely because * json/convert.py emits layout-.css to re-supply the design's inline * padding afterwards. THIS THEME HAS NO layout-.css, so zeroing the * inline axis would drop .shell's 24px gutter with nothing to restore it. * Verified after: .shell inline still 24px/24px, max-width still 1440px. * * 2. The Elementor VARIABLES are zeroed, not the padding property. Every rule * in styles.css that declares padding on a design class still wins, because * it sets the property directly rather than the variable. * * PROVEN, not assumed. The rule was injected into the live page and reverted to * measure the delta before anything was written. Seven containers were flagged * as losing 10px; all seven were then checked against styles.css and each landed * EXACTLY on its declared design value, because the design declares only one * side and Elementor's default was supplying the other: * * .crisis__top design padding-bottom:18px 28 -> 18 * .ctb__direct design padding-top:24px 34 -> 24 * .ev__grid design clamp(30px,3.6vw,46px) = 46 56 -> 46 * .fhud design padding-bottom:9px 19 -> 9 * .gpv__foot design padding-top:18px 28 -> 18 * .vch design padding-top:20px 30 -> 20 * * Preserved after the change: .sec 104/104 (and 160/160 where --section-y is at * its 160px cap), .shell gutter 24/24, .shell max-width 1440px, .hero 44/132, * .door 16/16, .door__head 28/30, container min-heights unchanged at 190px total. * * NO font size, colour or design token is touched by this rule. * * Supersedes the hero-only version of this rule (2026-08-17). The hero was the * proving ground; this is the same fix with the scope widened after every design * padding carrier was verified to survive it. */ .elementor .e-con, .elementor .e-con-full, .elementor .e-con-boxed { --padding-block-start: 0px; --padding-block-end: 0px; --gap: 0px; --row-gap: 0px; } /* * RULE 3 — Elementor wrappers break the design's grid and flex parents * * The design puts its layout on a parent and expects ITS OWN elements to be the * direct children. Elementor wraps every widget in a .elementor-element div, so * the div becomes the grid/flex item and the design element is one level down, * where flex/grid properties no longer reach it. * * `display:contents` removes the wrapper's box from the tree without removing * the element, so the design's children become the real grid/flex items and the * source markup is reproduced exactly. Safe here because these wrappers carry no * styling of their own - no background, no border, and RULE 2 already zeroes * their padding. * * --------------------------------------------------------------------------- * 3A — .vs__row (the "current system vs Operation Iron Gate" comparison) * * The design: * .vs__row { display:grid; grid-template-columns: 1fr auto 1fr } THREE columns * .vs__n { position:absolute; left:...; top:50% } NOT a grid item * so only three elements are grid items: .vs__then, .vs__arrow, .vs__now. * * In the build all FOUR children were bare Elementor wrappers. .vs__n's * position:absolute sat on an inner element and never reached the wrapper, so * the wrapper still consumed a column - four items in a three-column grid, and * the fourth (.vs__now) wrapped onto a second implicit row. * * MEASURED LIVE 2026-08-17 at 1600x900, all five rows: the .vs__now text sat * 47px BELOW its own .vs__then, so row 01's checkmark lined up beside row 02's * struck-through text. * * before row spread 47 47 47 47 47 * after row spread 0 0 0 0 0 * .vs__then left 342 - .vs__arrow left 802 - .vs__now left 872 * identical on all five rows; .vs__n position:absolute, out of flow * * --------------------------------------------------------------------------- * 3B — .sig__spine (the signature rail's vertical line) * * The design: * .sig { position:fixed; top:0; bottom:0; display:flex; flex-direction:column } * .sig__spine { flex:1 1 auto; width:1px; background:var(--hairline) } * .sig__spine::before { height: calc(var(--sig-p,0) * 100%) } progress fill * .sig__tok { top: calc(var(--sig-p,0) * 100%) } the orange diamond * * .sig__spine is a inside a text-editor widget, so it was never a flex * child of .sig. `flex:1 1 auto` did not apply and a bare is display:inline, * which ignores width and height. * * MEASURED before: .sig__spine display:inline, 0x0 - the vertical line was not * drawn at all, and because .sig__tok is positioned as a percentage OF THE SPINE, * a zero-height spine gave the diamond ZERO TRAVEL RANGE. That is why the rail * read as "too short" and why the marker did not track scroll. * * after .sig__spine display:block, 243x1 * 243px is exactly the design's clamp(170px,27vh,270px) at a 900px * viewport, so the spine is now at its declared height. * * NOT A BUG, do not "fix" it: .sig is position:fixed with top/bottom:0, so it * spans the VIEWPORT by design, not the document. Its height is 766px at a 900px * viewport (900 minus the 134px header offset from `body:has(.nav) .sig{top:var(--hdr-h)}`). * It is not meant to run the full page height and is unaffected by page height. * * signature.js computes --sig-p as scrollY / (scrollHeight - innerHeight), read * live on every scroll, so it self-corrects to the current page height. The * container-padding work in RULE 2 required no change here. */ .vs__row > .elementor-element, .sig > .elementor-element { display: contents; } /* * RULE 3C — three more wrapper-intercepts-item-property cases, found by sweep * * SWEEP METHOD (2026-08-17). A naive sweep for "design class with display:grid * or flex whose children are bare Elementor wrappers" returns 80 elements / 56 * signatures on the homepage. THAT LIST IS MOSTLY FALSE POSITIVES and applying * display:contents to it would wreck the page — measured: * .crisis__grid 621 -> 1383 (+762) the 2-column grid collapses * .dsrt__in 1031 -> 1579 (+548) * .gpv__in 592 -> 965 (+373) * .hero__doors 445 -> 691 (+246) * Those wrappers are correctly filling their columns already. * * The real signal is narrower: a bare wrapper is only a defect when the DESIGN * CHILD inside it carries a property that ONLY works on a real grid/flex item — * position:absolute, flex-grow, flex-basis, align-self, justify-self, * grid-column, grid-row, order. The wrapper intercepts it and the property never * applies. That criterion returns 18 on the homepage. * * SECOND GATE: display:contents promotes EVERY child of the wrapper, not just * the design element. It is only safe where each wrapper holds exactly ONE * child, otherwise the parent's item count changes and the layout breaks. Of the * 18, only these three pass both gates, and all three are genuinely defective: * * .fkey > .fkey__i--hollow grid-column:1/-1, must span the whole grid. * MEASURED 242px against a 503px grid — one column. * .vch__plot > .vch__stop position:absolute; offsetParent was the WRAPPER, * not .vch__plot, so it positioned against the * wrong box. * .pcm__panel > .pcm__num position:absolute; same — offsetParent was the * wrapper. It happens to land inside the panel * today, so this one is latent rather than visible. * * Height deltas 0 / 0 / -3, so none of these disturbs surrounding layout. * * THE OTHER SEVEN ARE LEFT ALONE ON PURPOSE — each has a wrapper holding 2-4 * children, so this pattern is the wrong tool and would change the item count: * .oig-header > .skip wrapper holds 2 * .hero__doors > .desc wrapper holds 2 (contents = +246px, worse) * .door > .door__d wrapper holds 2 * .rcpt__c > .stat__src wrapper holds 3 (contents = +43px, worse) * .vs__legend > .vs__key wrapper holds 3 (contents = +9px, worse) * .closer > .clbg / .clbk wrapper holds 4 * .vdt > .vdt__bk wrapper holds 2 * They need per-case fixes — put the property on the wrapper, or change the * markup — each measured on its own. Do NOT extend this selector to them. */ .fkey > .elementor-element, .vch__plot > .elementor-element, .pcm__panel > .elementor-element { display: contents; } /* * RULE 3E — .field Elementor wrapper must not consume flow in .hero__grid * * The source design: .field is position:absolute inside .hero__grid * (position:relative), overlaying the right side of the hero. The graphic * is NOT in document flow — it sits on top of the copy. * * In the Elementor build, .hero__grid has three children wrapped in * .elementor-element divs. Those wrappers ARE in flow (display:block). * The .field div inside its wrapper has position:absolute, but its wrapper * does not — so the wrapper consumes a full block row BELOW the copy and * doors, making the hero ~2x taller than the source. The graphic is there; * it just positions off the wrapper, not off .hero__grid. * * FIX: Apply position:absolute and the source geometry directly to the * Elementor wrapper for .field (element ID c029). This makes the wrapper * itself the absolute overlay, matching the source exactly. * * .field Elementor wrapper = .elementor-element-c029 * Source geometry from styles.css line 315: * position:absolute; right:-10%; top:-14%; * width:var(--field-w,68vw); min-width:620px; * z-index:1; pointer-events:none * * display:contents is NOT used here — it was tried and breaks the field * because the SVG canvas inside needs a sized positioned ancestor to * compute its own dimensions against. */ .elementor-element-c029 { position: absolute !important; right: -10% !important; top: -14% !important; width: var(--field-w, 68vw) !important; min-width: 620px !important; z-index: 1 !important; pointer-events: none !important; /* Elementor sets max-width on containers — override it */ max-width: none !important; } /* Hero headline — pull back ~10% from source spec (132px -> 116px max) */ body.home .display-hero { font-size: clamp(42px, 7.6vw, 116px); } /* .cap__head eyebrow — must be centred; Elementor default alignment overrides justify-content:center */ .cap__head { justify-content: center !important; } .cap__head .cap__eyebrow { justify-content: center; } /* .crisis__top — source: justify-content:space-between (left/right ends) * Elementor container c079 — target by both class and ID to win the specificity war */ .crisis__top, .elementor-element-c079 { justify-content: space-between !important; flex-direction: row !important; align-items: center !important; text-align: left !important; width: 100% !important; } /* .gband__title — source: max-width:min(23ch,88%), text-align:center, margin-inline:auto * Elementor stretches it full width. Enforce the source measure and centering. */ .gband__title { max-width: min(23ch, 88%) !important; text-align: center !important; margin-inline: auto !important; } /* .dsrt__cols — source uses CSS columns:2 for the two-column split with divider. * Elementor renders container c132 as a flex row, which destroys columns layout. * Force display:block on the wrapper so columns:2 on .dsrt__cols can work. */ .elementor-element-c132 { display: block !important; } .dsrt__cols { columns: 2 !important; column-gap: clamp(26px, 2.6vw, 44px) !important; column-rule: 1px solid var(--hairline) !important; } .dsrt__cols > .elementor-element { display: block; break-inside: avoid; margin-top: 15px; } .dsrt__cols > .elementor-element:first-child { margin-top: 0; } /* .fstage__ks — labels above each panel must be space-between not centered */ .fstage__ks { justify-content: space-between !important; width: 100% !important; } /* .fstage layout — Elementor wrappers break position:absolute on fstage__back * and fstage__front. Target by element ID to restore source geometry. * * fstage__back (c142): position:absolute, top:0, left:40%, right:0 * fstage__front (c170): position:relative, z-index:2, width:min(320px,86%) * fstage__figs (c180): display:grid, 3-column, sits below the stage */ .elementor-element-c142 { position: absolute !important; top: 0 !important; left: 40% !important; right: 0 !important; max-width: none !important; width: auto !important; } .elementor-element-c170 { position: relative !important; z-index: 2 !important; width: min(320px, 86%) !important; max-width: none !important; } /* fstage__figs — 3-column grid; Elementor wrappers inside it must be block */ /* Source targets .fstage__figs>div — bridge to .elementor-element wrappers */ .fstage__figs > .elementor-element { display: block !important; padding: clamp(15px,1.8vw,24px) clamp(10px,1.3vw,18px) !important; text-align: center !important; } .fstage__figs > .elementor-element + .elementor-element { border-left: 1px solid var(--hairline) !important; } /* b tags — navy extrusion text-shadow */ .fstage__figs b { text-shadow: -.5px -.5px 0 rgba(255,252,247,.55), 1px .6px 0 rgba(20,35,63,.26), 2px 1.2px 0 rgba(19,33,60,.2), 3px 1.8px 0 rgba(18,31,56,.15), 4px 2.4px 0 rgba(17,29,53,.1), 5px 3px 0 rgba(16,27,49,.07), 7px 4.5px 14px rgba(20,35,63,.14) !important; } /* Middle figure ($9.4B) — orange with orange extrusion */ .fstage__figs > .elementor-element:nth-child(2) b { color: #C25E14 !important; text-shadow: -.5px -.5px 0 rgba(255,250,243,.6), 1px .6px 0 rgba(120,52,12,.26), 2px 1.2px 0 rgba(116,50,11,.2), 3px 1.8px 0 rgba(110,47,10,.15), 4px 2.4px 0 rgba(104,44,10,.1), 5px 3px 0 rgba(97,41,9,.07), 7px 4.5px 14px rgba(120,52,12,.14) !important; } /* sec--center (system section c194) — Elementor overrides text-align:center */ .elementor-element-c194, .sec--center { text-align: center !important; } .sec--center .shell { text-align: center !important; } .sec--center .lede { margin-inline: auto !important; } /* Target the system section children directly by element ID */ #system-h, .elementor-element-w185, .elementor-element-w186, .elementor-element-w187 { text-align: center !important; margin-inline: auto !important; } /* The heading title inside the widget */ #system-h .elementor-heading-title, .elementor-element-w186 .elementor-heading-title { text-align: center !important; } /* shell container c193 inside system section — * Elementor flex column defaults align-items:flex-start which left-aligns children. * Must be center so every child widget sits centered. */ .elementor-element-c193 { align-items: center !important; text-align: center !important; } /* vch__plot — the bar chart columns need their Elementor wrappers transparent */ .vch__plot > .elementor-element, .vch__axis > .elementor-element { display: contents; } /* vch__col must be a real grid item — restore flex layout for the bar inside */ .vch__col { display: flex !important; align-items: flex-end !important; height: 100% !important; position: relative !important; } /* vch__bar — ensure scaleY(0) is set so animation works; reduced-motion skips */ .vch__bar { transform: scaleY(1) !important; } /* dsrt__h spacing — too much gap below THE DATA DESERT eyebrow in live site */ .dsrt__lead > .elementor-element:nth-child(2) { margin-top: clamp(8px, 1vw, 14px) !important; } /* fstage__ks — two labels, space-between */ .elementor-element-c136, .fstage__ks { justify-content: space-between !important; flex-direction: row !important; width: 100% !important; align-items: baseline !important; } /* Hero lede + 211 line — slightly smaller than source */ body.home .hero__sub { font-size: clamp(16px, 1.3vw, 20px); } body.home .hero__now { font-size: clamp(15px, 1.2vw, 19px); } /* * RULE 7 — .lock dividers missing: adjacent-sibling selector broken by Elementor wrappers * * Source: .lock__c+.lock__c { border-left:1px solid var(--hairline) } * .lock__c is inside an .elementor-element wrapper, so the + selector * never fires — the wrappers are the actual siblings, not .lock__c. * * Fix: apply the left border and top hairline to the Elementor wrappers * inside .lock directly, matching the source exactly. */ .lock > .elementor-element + .elementor-element > .lock__c { padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid var(--hairline); } .lock > .elementor-element + .elementor-element > .lock__c::before { left: calc(-1 * clamp(18px, 2vw, 30px) - 1px); } /* At ≤1180px the field stacks below (position:relative) — match source */ @media (max-width: 1180px) { .elementor-element-c029 { position: relative !important; right: auto !important; top: auto !important; width: 100% !important; min-width: 0 !important; margin-top: 44px !important; } } /* * RULE 3D — the same defect on ABOUT, found by the same sweep * * About uses absolutely-positioned decorative and structural layers inside * design parents. Each was positioning against its Elementor wrapper instead of * the design parent, and several were rendering at ZERO SIZE as a result. * * MEASURED LIVE 2026-08-17, before -> after: * .vfield > .vfield__fill 0x0 -> 0x210 * .portrait > .portrait__hint 271x0 -> 271x303 x6 instances * .bio-modal__panel > .bmx__grid 296x0 -> 946x160 * .nhd > .nhd__grid 864x80 -> 884x287 * .phz__rail > .phz__fill 0x0 -> 0x3 * .band.g-navy > .abg 516x189 -> 516x189 (offsetParent corrected) * .stage > .stage__node 14x14 -> 14x14 (offsetParent corrected, x4) * * All seven pass both gates: the child carries position:absolute, and each * wrapper holds exactly one child so display:contents is a clean 1:1 swap. * * .vfield WAS in this list and was REMOVED after measuring: applying it made * things worse, 0x0 -> 0x814. The real defect there is that .vfield ITSELF * renders 0 WIDE despite computed height:210px and position:relative, so * `#vision .vfield__fill{width:100%}` resolves against a zero-width containing * block. display:contents only let the fill escape to a taller positioned * ancestor. .vfield needs its own fix - do not re-add it here. * * About's OTHER 22 hits are left alone — their wrappers hold 2 or more children * (.band.g-stone > .abg/.mgrid, .hof__rail > four segments, .bio-modal__photo > * three, .msc__ph > two, .shell.bhd > two, and so on). They need per-case fixes. */ .band.g-navy > .elementor-element, .stage > .elementor-element, .portrait > .elementor-element, .bio-modal__panel > .elementor-element, .nhd > .elementor-element, .phz__rail > .elementor-element { display: contents; }