.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-field-type-html{padding-bottom:0px;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-button[type="submit"]{color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-11934 .elementor-element.elementor-element-391ad93{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}@media(max-width:1024px){.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS *//* ======================================================================= Spotrend page sections - hero through contact Schema-gap CSS only: pseudo-element decoration, clip-path, keyframes, mask-image, conic-gradient backgrounds, desktop-only hover. Rules are prefixed .elementor - page CSS loads BEFORE the atomic base sheets, so an unprefixed rule loses every specificity tie. ======================================================================= */ /* The two `white-space` rules that used to sit in the topbar block. They name SECTION classes (.title-xl is the hero wordmark, .stat-label is #meet), so they belong to the page, not to the chrome. `white-space` VALIDATES as a V4 prop and then compiles to nothing - see ~/.claude/shared-memory/elementor-v4-props-validate-but-never-emit.md */ .elementor .title-xl{white-space:nowrap} .elementor .stat-label{white-space:nowrap} @media (max-width:767px){.elementor .stat-label{white-space:normal}} /* ---------- 1. HERO ---------------------------------------------------- */ /* Portrait placement. `position` compiles from the class, but top/right/ bottom/left/inset are a V4 schema gap: the global-classes endpoint accepts them and the compiler then drops them, at any unit. Offsets only. */ /* pointer-warped grid (canvas is created by the page script) */ .elementor .sp-warp{position:absolute;inset:0;z-index:3;width:100%;height:100%; mix-blend-mode:multiply;pointer-events:none} /* blinking status square */ @keyframes sp-blink{0%,49%{opacity:1}50%,100%{opacity:.15}} .elementor .hero-eyebrow-dot{animation:sp-blink 1.1s steps(1) infinite} /* wordmark: skew + entrance + broadcast glitch */ @keyframes sp-rise{ from{opacity:0;transform:translateX(calc(-0.1em + 28px)) skewX(-9deg)} to {opacity:1;transform:translateX(-0.1em) skewX(-9deg)}} /* Only the skew + the entrance animation are left here. The transform CANNOT move to the class: `animation: ... both` holds sp-rise's own end state, so a class transform would be overridden by the animation anyway and the two have to stay written together. position/display/white-space/text-align went to the title-xl class on 2026-08-30 — as `.hero-wordmark :is(h1,h2,h3)` they were 0-2-1, which beat a local style, so the settings pane could not touch the wordmark at all. No direction:ltr here — the whole page is RTL and "ADI YOFFE" is a strong Latin run, so bidi keeps it in order anyway. Forcing ltr only made Elementor's side controls land on the wrong edge of this very element. */ .elementor .hero-wordmark{transform:translateX(-0.1em) skewX(-9deg); transform-origin:right bottom; animation:sp-rise .55s cubic-bezier(0.23,1,0.32,1) both} .elementor .hero-wordmark :is(h1,h2,h3)::before, .elementor .hero-wordmark :is(h1,h2,h3)::after{content:"ADI YOFFE";position:absolute;inset:0; color:var(--AY-green, #0afc08);opacity:0;pointer-events:none} .elementor .hero-wordmark :is(h1,h2,h3)::before{clip-path:inset(14% 0 56% 0); animation:sp-glitchA 7.3s steps(1,end) infinite} .elementor .hero-wordmark :is(h1,h2,h3)::after{clip-path:inset(58% 0 12% 0); animation:sp-glitchB 11.9s steps(1,end) infinite} @keyframes sp-glitchA{0%,92.5%{opacity:0}93%{opacity:1;transform:translate(-.02em,-.006em)} 94.5%{opacity:1;transform:translate(.024em,.005em)}96%,100%{opacity:0}} @keyframes sp-glitchB{0%,90%{opacity:0}90.5%{opacity:1;transform:translate(.022em,.006em)} 92%{opacity:1;transform:translate(-.018em,-.005em)}93.5%,100%{opacity:0}} .elementor .hero-wordmark::after{content:"";position:absolute;inset:-2% -1%; pointer-events:none;background:repeating-linear-gradient(#fff 0 2px,transparent 2px 7px); opacity:0;animation:sp-static 7.3s steps(1,end) infinite} @keyframes sp-static{0%,91.5%{opacity:0;background-position:0 0} 92%{opacity:.85;background-position:0 -5px}93.5%{opacity:.5;background-position:0 -11px} 95%{opacity:.8;background-position:0 -3px}96.5%,100%{opacity:0}} /* checkerboard end-caps on the banner strip — five layers on one element instead of five empty divs; positioned from the right (RTL start edge) */ .elementor .hero-checks{ background-image: repeating-linear-gradient(#001400 0 13px,transparent 13px 26px), repeating-conic-gradient(#001400 0% 25%,transparent 0% 50%), repeating-linear-gradient(#001400 0 13px,transparent 13px 26px), repeating-conic-gradient(#001400 0% 25%,transparent 0% 50%), repeating-conic-gradient(#001400 0% 25%,transparent 0% 50%); background-size:13px 26px,26px 26px,13px 26px,26px 26px,26px 26px; background-position:right 0 top 13px,right 13px top 13px, right 39px top 0,right 52px top 0,right 78px top 0; background-repeat:repeat-y} /* ---------- 2. #future ------------------------------------------------- */ /* The giant rotated AY watermark that used to sit here (three stroke layers, parallaxed against the ghost button) was removed 2026-08-13 at LiaD's request. Its CSS, its page.js builder and the .sp-ay* classes all went with it — backup in build-assets/backup-2026-08-13-sections-2-3/. */ /* ...and this is what went back into that space, 2026-08-31: the same brand asterisk as the primary button, huge and nearly invisible. One mark at two scales rather than a second decorative language. No position/overflow needed here — section-future is already relative + overflow:hidden on its class, and future-inner already carries z-index 2, so a z-index 0 pseudo lands behind the copy without touching a single class. DESKTOP ONLY: below 1025 the section is a single column, so there is no empty left region to fill — the mark just lands behind the headline. Verified at 375 and 768 before this query was added, and it looked like a smudge in both. */ @media (min-width:1025px){ .elementor .section-future::after{content:"";position:absolute;z-index:0; pointer-events:none;inset-inline-end:clamp(2.5rem, -3.226rem + 8.939vw, 7.5rem);top:clamp(2.5rem, -1.079rem + 5.587vw, 5.625rem); width:clamp(11.25rem, 2.661rem + 13.408vw, 18.75rem);height:clamp(11.25rem, 2.661rem + 13.408vw, 18.75rem); background:#FFFFFF;opacity:.055; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2097.67%20100.00%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M35.2%2099.6L28.7%2095.5L13.8%2087.3L11.7%2085.6L11.8%2084.6L21.9%2067.3L22.1%2065.5L0%2065.3L0%2035.5L22%2035.2L21.9%2033.6L11.9%2016.5L11.8%2015L35.7%201.1L36.4%200.1L38.3%201.9L46.8%2016.9L48.1%2019L48.9%2019.5L50.9%2017.2L58.3%203.8L61%200L62%201.1L85.2%2014.2L86%2015.3L85.8%2016.4L75.8%2033.6L75.8%2035.2L97.7%2035.5L97.7%2065.3L75.6%2065.6L75.8%2067.3L85.7%2084.2L86%2085.7L78.2%2090.6L63%2099L62.2%2099.9L60.2%20100L49.8%2081.6L48.8%2081.3L47.9%2081.6L39.8%2095.6L37.8%2099.8L35.8%20100L35.2%2099.6Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2097.67%20100.00%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M35.2%2099.6L28.7%2095.5L13.8%2087.3L11.7%2085.6L11.8%2084.6L21.9%2067.3L22.1%2065.5L0%2065.3L0%2035.5L22%2035.2L21.9%2033.6L11.9%2016.5L11.8%2015L35.7%201.1L36.4%200.1L38.3%201.9L46.8%2016.9L48.1%2019L48.9%2019.5L50.9%2017.2L58.3%203.8L61%200L62%201.1L85.2%2014.2L86%2015.3L85.8%2016.4L75.8%2033.6L75.8%2035.2L97.7%2035.5L97.7%2065.3L75.6%2065.6L75.8%2067.3L85.7%2084.2L86%2085.7L78.2%2090.6L63%2099L62.2%2099.9L60.2%20100L49.8%2081.6L48.8%2081.3L47.9%2081.6L39.8%2095.6L37.8%2099.8L35.8%20100L35.2%2099.6Z%22/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}} /* pixel-dissolve edge into the next section. The canvas is created by the page script, which redraws the noise field every 90px of scroll — full-bleed at any width, so no tiling seam. Height is set here; the script reads clientHeight. */ .elementor .sp-dissolve{position:absolute;left:0;bottom:0;width:100%;height:208px; pointer-events:none;z-index:1} /* ---------- 3. #meet (stats) ------------------------------------------- */ /* dot field over the whole section */ .elementor .section-stats::before{content:"";position:absolute;inset:0;pointer-events:none; z-index:0;opacity:.36; background:radial-gradient(circle,rgba(0,20,0,.2) 1px,transparent 1.1px) 0 0/26px 26px} /* Portrait offsets are a schema gap, so the placement lives here rather than half in the class. The green glow silhouette that used to stack behind it, the chamfered panel it sat on and the hairline between cell columns all went in the 2026-08-13 simplification — each stat is its own box now, and the box carries its own fill and border. */ .elementor .stats-portrait{bottom:0;right:0;pointer-events:none} /* No band across the bottom of this section (LiaD, 2026-08-13) — a tone change separates it instead, and her cropped feet read as standing on the edge of the grey field. The tone is a GRADIENT, not the flat grey it started as: #future's pixel dissolve paints in #fbfbfd, so a section that begins in grey met the fade with a hard horizontal cut right where the dissolve is at its densest. The ramp starts on exactly the dissolve's colour, so that join disappears, and is fully grey well before her legs reach the bottom edge. background-image, layered over the class's background-color, because a gradient is not expressible as a V4 background prop. */ .elementor .section-stats{background-image:linear-gradient(180deg, #fbfbfd 0%,#fbfbfd 6%,#ececf2 62%,#ececf2 100%)} /* The radar rings, the ECG pulse rule that split the two stat rows and the blinking pixel clusters were all removed 2026-08-13 — they hung off the shared panel, which no longer exists. */ /* ---------- 3a. #routes (alternative to #paths) -------------------------- */ .elementor .route-go::after{content:"";flex:0 0 auto;width:1.5em;height:1.5em;background:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2081.16%2081.16%22%3E%3Cpath%20d=%22M0,40.58c0,22.41,18.17,40.58,40.58,40.58V0C18.17,0,0,18.17,0,40.58Z%22/%3E%3Cpath%20d=%22M40.58,40.58c0,22.41,18.17,40.58,40.58,40.58V0c-22.41,0-40.58,18.17-40.58,40.58Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2081.16%2081.16%22%3E%3Cpath%20d=%22M0,40.58c0,22.41,18.17,40.58,40.58,40.58V0C18.17,0,0,18.17,0,40.58Z%22/%3E%3Cpath%20d=%22M40.58,40.58c0,22.41,18.17,40.58,40.58,40.58V0c-22.41,0-40.58,18.17-40.58,40.58Z%22/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;transition:transform 200ms} /* The brand marks. Masked, not : they take currentColor, so they invert with the panel on hover exactly like the arrow does — one asset, both states. Inline data URIs, so no SVG upload and no extra request. */ .elementor .route-icon{background:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center} .elementor .route-icon-lectures{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2096%2096%22%3E%3Cg%20fill=%22%23000%22%3E%3Cpath%20d=%22M7%2036%2027%2025v46L7%2060V36Z%22/%3E%3Cpath%20d=%22M35%2013h26v70H35V13Z%22/%3E%3Cpath%20d=%22m69%2025%2020%2011v24L69%2071V25Z%22/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2096%2096%22%3E%3Cg%20fill=%22%23000%22%3E%3Cpath%20d=%22M7%2036%2027%2025v46L7%2060V36Z%22/%3E%3Cpath%20d=%22M35%2013h26v70H35V13Z%22/%3E%3Cpath%20d=%22m69%2025%2020%2011v24L69%2071V25Z%22/%3E%3C/g%3E%3C/svg%3E")} .elementor .route-icon-workshops{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2076%2061%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M0,0h36v17h-18v17H0V0ZM39,0h37v34h-18v-17h-19V0Z%22/%3E%3Cpath%20d=%22M0,37h18v7h19v17H0v-24ZM58,37h18v24h-36v-17h18v-7Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2076%2061%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M0,0h36v17h-18v17H0V0ZM39,0h37v34h-18v-17h-19V0Z%22/%3E%3Cpath%20d=%22M0,37h18v7h19v17H0v-24ZM58,37h18v24h-36v-17h18v-7Z%22/%3E%3C/svg%3E")} /* Stretched hit area — the bar is the link. ::after is the arrow, so the hit area is ::before; the anchor must stay static or inset resolves against it. */ .elementor .route-go::before{content:"";position:absolute;inset:0;z-index:3} @media (min-width:1025px){ .elementor .route-bar:hover{background:#001400;z-index:2} .elementor .route-bar:hover :is(.route-title,.route-go,.route-icon){color:#fbfbfd} .elementor .route-bar:hover .route-note{color:rgba(255,255,255,.72)} .elementor .route-bar:hover .route-go::after{transform:translateX(-10px)} } .elementor .section-routes a:focus-visible{outline:3px solid var(--AY-green, #0afc08);outline-offset:3px} /* ---------- 4. #tools -------------------------------------------------- */ /* isometric grid, faded from the left of the copy */ .elementor .section-tools::before{content:"";position:absolute;inset:0;pointer-events:none; z-index:0;opacity:.5; background-image: repeating-linear-gradient(60deg,rgba(255,255,255,.85) 0 1px,transparent 1px 58px), repeating-linear-gradient(-60deg,rgba(255,255,255,.85) 0 1px,transparent 1px 58px), repeating-linear-gradient(0deg,rgba(255,255,255,.85) 0 1px,transparent 1px 50px); -webkit-mask-image:radial-gradient(80% 90% at 26% 46%,#000 0 12%,rgba(0,0,0,.45) 42%,transparent 78%); mask-image:radial-gradient(80% 90% at 26% 46%,#000 0 12%,rgba(0,0,0,.45) 42%,transparent 78%)} /* the knocked-out second line. A bare in the rich text carries no class (Elementor strips attributes there), so it is targeted off the parent. */ .elementor .tools-title span{display:inline-block;background:#001400;color:var(--AY-green, #0afc08); padding:6px 18px 10px;transform:rotate(-1.4deg)} /* book: floats, with its cast shadow breathing in counterpoint */ @keyframes bookFloat{0%,100%{transform:translateY(-6px) rotate(-1.2deg)} 50%{transform:translateY(-26px) rotate(1deg)}} @keyframes bookShadow{0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(.86);opacity:.55}} .elementor .tools-media::before{content:"";position:absolute;width:62%;height:26px;bottom:6%; background:radial-gradient(closest-side,rgba(0,20,0,.28),transparent); filter:blur(6px);animation:bookShadow 7.5s ease-in-out infinite;pointer-events:none} .elementor .tools-book{filter:drop-shadow(0 26px 40px rgba(0,20,0,.32)); animation:bookFloat 7.5s ease-in-out infinite} /* ---------- 5. #contact ------------------------------------------------- */ /* Same mark again, small and green, in the right column's empty half. contact-inner is already relative + z-index 1, so z-index 0 sits behind it. Desktop only, same reason as #future: stacked, it collides with the submit button and the acceptance line. */ @media (min-width:1025px){ .elementor .section-contact::after{content:"";position:absolute;z-index:0; pointer-events:none;inset-inline-start:clamp(4.375rem, -3.499rem + 12.291vw, 11.25rem);bottom:clamp(4.375rem, -1.351rem + 8.939vw, 9.375rem); width:clamp(6.875rem, 2.938rem + 6.145vw, 10.312rem);height:clamp(6.875rem, 2.938rem + 6.145vw, 10.312rem); background:var(--AY-green, #0afc08);opacity:.07; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2097.67%20100.00%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M35.2%2099.6L28.7%2095.5L13.8%2087.3L11.7%2085.6L11.8%2084.6L21.9%2067.3L22.1%2065.5L0%2065.3L0%2035.5L22%2035.2L21.9%2033.6L11.9%2016.5L11.8%2015L35.7%201.1L36.4%200.1L38.3%201.9L46.8%2016.9L48.1%2019L48.9%2019.5L50.9%2017.2L58.3%203.8L61%200L62%201.1L85.2%2014.2L86%2015.3L85.8%2016.4L75.8%2033.6L75.8%2035.2L97.7%2035.5L97.7%2065.3L75.6%2065.6L75.8%2067.3L85.7%2084.2L86%2085.7L78.2%2090.6L63%2099L62.2%2099.9L60.2%20100L49.8%2081.6L48.8%2081.3L47.9%2081.6L39.8%2095.6L37.8%2099.8L35.8%20100L35.2%2099.6Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2097.67%20100.00%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M35.2%2099.6L28.7%2095.5L13.8%2087.3L11.7%2085.6L11.8%2084.6L21.9%2067.3L22.1%2065.5L0%2065.3L0%2035.5L22%2035.2L21.9%2033.6L11.9%2016.5L11.8%2015L35.7%201.1L36.4%200.1L38.3%201.9L46.8%2016.9L48.1%2019L48.9%2019.5L50.9%2017.2L58.3%203.8L61%200L62%201.1L85.2%2014.2L86%2015.3L85.8%2016.4L75.8%2033.6L75.8%2035.2L97.7%2035.5L97.7%2065.3L75.6%2065.6L75.8%2067.3L85.7%2084.2L86%2085.7L78.2%2090.6L63%2099L62.2%2099.9L60.2%20100L49.8%2081.6L48.8%2081.3L47.9%2081.6L39.8%2095.6L37.8%2099.8L35.8%20100L35.2%2099.6Z%22/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}} /* The fields belong to an Elementor Pro `form` widget (classic), so every one of these is a schema gap by definition — none of it is reachable from a V4 class. Styling the widget through its own controls would be ~40 keys and still could not express the focus and hover states. */ /* Gutters the way Elementor itself does it — negative inline margin on the form, matching inline padding on each group — instead of `gap`. `gap` looked fine on the full-width rows but never landed between the two 50% fields, so they sat flush against each other and the whole 14px turned up outside the pair: the phone field's outer edge missed the email field's by exactly the gutter. With this model the group boxes align by construction. */ .elementor .section-contact .elementor-form{ display:flex;flex-wrap:wrap;gap:0;row-gap:14px; margin-inline:-7px;width:calc(100% + 14px)} .elementor .section-contact .elementor-field-group{ margin-bottom:0;padding-inline:7px;box-sizing:border-box} .elementor .section-contact .elementor-field-group.elementor-col-50{ flex:0 0 50%;max-width:50%} .elementor .section-contact .elementor-field-group.elementor-col-100{ flex:0 0 100%;max-width:100%} .elementor .section-contact .elementor-field-group > label{display:none} /* The fill is painted with an inset box-shadow, not background-color. A plain background loses here — Chrome autofills name/tel/email on sight and its autofill layer ignores background-color at ANY specificity, !important included, which is why the fields came back solid white. An inset shadow 1000px deep is the one thing that paints over it, and -webkit-text-fill-color is the matching override for the text. It renders as DARK-on-DARK, i.e. exactly the transparent field the design asks for. */ .elementor .section-contact .elementor-field-textual{ width:100%;background-color:var(--AY-transparent, transparent);background-image:none; border:2px solid #FFFFFF;border-radius:0; color:#FFFFFF;-webkit-text-fill-color:#FFFFFF; padding:16px 18px;font-family:"Anomalia",sans-serif; font-size:clamp(1.0rem, 0.928rem + 0.112vw, 1.062rem);line-height:1.4; box-shadow:inset 0 0 0 1000px var(--AY-black, #07070f); transition:border-color 160ms} .elementor .section-contact .elementor-field-textual:-webkit-autofill, .elementor .section-contact .elementor-field-textual:-webkit-autofill:hover, .elementor .section-contact .elementor-field-textual:-webkit-autofill:focus{ -webkit-text-fill-color:#FFFFFF;box-shadow:inset 0 0 0 1000px var(--AY-black, #07070f); transition:background-color 9999s ease-out} .elementor .section-contact textarea.elementor-field-textual{resize:vertical;min-height:150px} .elementor .section-contact .elementor-field-textual:focus{ border-color:var(--AY-green, #0afc08);outline:none;box-shadow:inset 0 0 0 1000px #0c1a0c} .elementor .section-contact .elementor-field-textual::placeholder{color:rgba(255,255,255,.62);opacity:1} /* consent row */ /* The colour has to be set on the label and span, not just the option wrapper: the kit paints the label directly, so a colour on the wrapper alone left this row a barely-legible grey (LiaD, 2026-08-13). */ .elementor .section-contact .elementor-field-type-acceptance .elementor-field-option{ display:flex;gap:12px;align-items:flex-start} .elementor .section-contact .elementor-field-type-acceptance .elementor-field-option, .elementor .section-contact .elementor-field-type-acceptance :is(label,span){ font-family:"Anomalia",sans-serif;font-size:clamp(0.938rem, 0.866rem + 0.112vw, 1.0rem);line-height:1.55; font-weight:400;color:rgba(255,255,255,.9)} .elementor .section-contact .elementor-field-type-acceptance input{ margin-top:3px;accent-color:var(--AY-green, #0afc08);width:17px;height:17px;flex:0 0 auto} .elementor .section-contact a{color:var(--AY-green, #0afc08)} /* Submit: the house button geometry, but filled neon green and inverting on hover (LiaD, 2026-08-13). Same 240x65 box, 2px border and hard-shadow lift as .button-primary — it just starts filled instead of ending filled. */ .elementor .section-contact .elementor-button[type="submit"]{ display:flex;justify-content:space-between;align-items:center;gap:38px; min-width:240px;width:auto;min-height:clamp(3.75rem, 3.392rem + 0.559vw, 4.062rem); padding:16px 34px;border:2px solid var(--AY-green, #0afc08);border-radius:0; background:var(--AY-green, #0afc08);color:#001400; font-family:"Anomalia",sans-serif;font-weight:900;font-size:clamp(1.125rem, 0.982rem + 0.223vw, 1.25rem); line-height:1.45;text-align:start;transition:all 160ms;cursor:pointer} .elementor .section-contact .elementor-button[type="submit"] .elementor-button-content-wrapper{ display:flex;justify-content:space-between;align-items:center;gap:38px;width:100%} /* the kit paints .elementor-button-text directly, which beats a colour set on the button element — so the label has to be told explicitly, both states */ .elementor .section-contact .elementor-button[type="submit"] .elementor-button-text, .elementor .section-contact .elementor-button[type="submit"] .elementor-button-content-wrapper{color:#001400} /* Thick left arrow, same role as the * and + on the other buttons — drawn as a clip-path block rather than a glyph, because no arrow in the brand faces is heavy enough to sit next to Archivo Black. currentColor, so it inverts with the button for free. */ .elementor .section-contact .elementor-button[type="submit"] .elementor-button-content-wrapper::after{ content:"";flex:0 0 auto;width:1.5em;height:1.5em;background:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2081.16%2081.16%22%3E%3Cpath%20d=%22M0,40.58c0,22.41,18.17,40.58,40.58,40.58V0C18.17,0,0,18.17,0,40.58Z%22/%3E%3Cpath%20d=%22M40.58,40.58c0,22.41,18.17,40.58,40.58,40.58V0c-22.41,0-40.58,18.17-40.58,40.58Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2081.16%2081.16%22%3E%3Cpath%20d=%22M0,40.58c0,22.41,18.17,40.58,40.58,40.58V0C18.17,0,0,18.17,0,40.58Z%22/%3E%3Cpath%20d=%22M40.58,40.58c0,22.41,18.17,40.58,40.58,40.58V0c-22.41,0-40.58,18.17-40.58,40.58Z%22/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center} @media (min-width:1025px){ .elementor .section-contact .elementor-button[type="submit"]:hover{ background:#001400;color:var(--AY-green, #0afc08);border-color:var(--AY-green, #0afc08); transform:translate(-7px,-7px);box-shadow:9px 9px 0 var(--AY-green, #0afc08)} .elementor .section-contact .elementor-button[type="submit"]:hover .elementor-button-text, .elementor .section-contact .elementor-button[type="submit"]:hover .elementor-button-content-wrapper{color:var(--AY-green, #0afc08)} } .elementor .section-contact .elementor-button[type="submit"]:active{transform:scale(.97)} .elementor .section-contact a:focus-visible, .elementor .section-contact .elementor-field:focus-visible{outline:3px solid var(--AY-green, #0afc08);outline-offset:3px} /* Elementor's own message rows */ .elementor .section-contact .elementor-message{font-family:"Anomalia",sans-serif; font-size:15px;margin-top:10px} .elementor .section-contact .elementor-message.elementor-message-success{color:var(--AY-green, #0afc08)} /* ---------- buttons ---------------------------------------------------- */ /* the trailing glyph is decoration, so it is a pseudo-element rather than markup inside the rich text (Elementor strips attributes there on save) */ .elementor :is(.button-primary,.button-secondary,.button-ghost,.button-ink)::after{font-family:'Archivo Black',sans-serif;line-height:1; display:inline-block;flex:0 0 auto} /* The brand asterisk, not U+2731. Sized to the ink box the character actually painted — measured off Archivo Black via canvas metrics at the clamp anchors (12.25px at 1025, 14.42px at 1920, i.e. 0.721 x font-size), so the swap is invisible in size and only the drawing changes. The mark fills its viewBox, so the mask box IS the ink box. */ .elementor .button-primary::after{content:"";display:block;width:clamp(0.766rem, 0.61rem + 0.242vw, 0.901rem);height:clamp(0.766rem, 0.61rem + 0.242vw, 0.901rem);background:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2097.67%20100.00%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M35.2%2099.6L28.7%2095.5L13.8%2087.3L11.7%2085.6L11.8%2084.6L21.9%2067.3L22.1%2065.5L0%2065.3L0%2035.5L22%2035.2L21.9%2033.6L11.9%2016.5L11.8%2015L35.7%201.1L36.4%200.1L38.3%201.9L46.8%2016.9L48.1%2019L48.9%2019.5L50.9%2017.2L58.3%203.8L61%200L62%201.1L85.2%2014.2L86%2015.3L85.8%2016.4L75.8%2033.6L75.8%2035.2L97.7%2035.5L97.7%2065.3L75.6%2065.6L75.8%2067.3L85.7%2084.2L86%2085.7L78.2%2090.6L63%2099L62.2%2099.9L60.2%20100L49.8%2081.6L48.8%2081.3L47.9%2081.6L39.8%2095.6L37.8%2099.8L35.8%20100L35.2%2099.6Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2097.67%20100.00%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M35.2%2099.6L28.7%2095.5L13.8%2087.3L11.7%2085.6L11.8%2084.6L21.9%2067.3L22.1%2065.5L0%2065.3L0%2035.5L22%2035.2L21.9%2033.6L11.9%2016.5L11.8%2015L35.7%201.1L36.4%200.1L38.3%201.9L46.8%2016.9L48.1%2019L48.9%2019.5L50.9%2017.2L58.3%203.8L61%200L62%201.1L85.2%2014.2L86%2015.3L85.8%2016.4L75.8%2033.6L75.8%2035.2L97.7%2035.5L97.7%2065.3L75.6%2065.6L75.8%2067.3L85.7%2084.2L86%2085.7L78.2%2090.6L63%2099L62.2%2099.9L60.2%20100L49.8%2081.6L48.8%2081.3L47.9%2081.6L39.8%2095.6L37.8%2099.8L35.8%20100L35.2%2099.6Z%22/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center} .elementor :is(.button-secondary,.button-ghost,.button-ink)::after{content:"+";font-size:clamp(1.5rem, 1.142rem + 0.559vw, 1.812rem)} @media (min-width:1025px){ .elementor .button-primary:hover{background-color:var(--AY-green, #0afc08);border-color:#001400; transform:translate(-7px,-7px);box-shadow:9px 9px 0 #001400} .elementor .button-secondary:hover{background-color:var(--AY-blue, #0500fc);color:#FFFFFF; border-color:#001400;transform:translate(-7px,-7px);box-shadow:9px 9px 0 #001400} .elementor .button-ghost:hover{color:var(--AY-green, #0afc08);border-color:#FFFFFF; transform:translate(-7px,-7px);box-shadow:9px 9px 0 var(--AY-green, #0afc08)} /* LiaD, 2026-08-14: transparent -> white fill on hover; text stays ink, never green, in both states */ .elementor .button-ink:hover{background-color:#FFFFFF; border-color:#001400;transform:translate(-7px,-7px);box-shadow:9px 9px 0 #001400} .elementor :is(.button-primary,.button-secondary,.button-ghost,.button-ink):hover::after{animation:sp-spin .55s cubic-bezier(0.23,1,0.32,1) 1} } @keyframes sp-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} .elementor :is(.button-primary,.button-secondary,.button-ghost,.button-ink):active{transform:scale(.97)} .elementor .section-hero a:focus-visible, .elementor .section-future a:focus-visible{outline:3px solid var(--AY-green, #0afc08);outline-offset:2px} /* ---------- responsive: decoration only -------------------------------- */ @media (max-width:1024px){ .elementor .sp-dissolve{height:150px} .elementor .hero-checks{background-position:right 0 top 13px,right 13px top 13px, right 39px top 0,right 52px top 0,right 78px top 0} } @media (max-width:767px){ .elementor .sp-dissolve{height:104px} /* Smaller checker CELLS on mobile, not just a narrower block — LiaD asked for "a little smaller" and the block width alone cannot deliver it: the motif is built from 13px/26px cells pinned to the right, so any width that is not a column edge cuts a column in half (26px rendered as two solid bars). At 10px cells the same stripe+checker pair fits in 30px instead of 39px and still reads as a checkerboard. The .hero-checks WIDTH is 30px in the class — these two numbers are a pair, change them together. */ .elementor .hero-checks{ background-image: repeating-linear-gradient(#001400 0 10px,transparent 10px 20px), repeating-conic-gradient(#001400 0% 25%,transparent 0% 50%), repeating-linear-gradient(#001400 0 10px,transparent 10px 20px); background-size:10px 20px,20px 20px,10px 20px; background-position:right 0 top 10px,right 10px top 10px,right 30px top 0} } @media (prefers-reduced-motion:reduce){ .elementor .section-hero *,.elementor .section-stats *{animation:none !important; transition:none !important} .elementor .stats-host[data-stats-ready] > .stat-block{opacity:1} } /* ---------- font fallbacks (generated) ---------------------------------- */ .elementor .title-xl.title-xl{font-family:"Clan SC Black",sans-serif} .elementor .title-lg.title-lg{font-family:"Anomalia",sans-serif} .elementor .title-md.title-md{font-family:"Anomalia",sans-serif} .elementor .text-lg.text-lg{font-family:"Anomalia",sans-serif} .elementor .text-md.text-md{font-family:"Anomalia",sans-serif} .elementor .text-sm.text-sm{font-family:"Anomalia",sans-serif} .elementor .text-xs.text-xs{font-family:"Archivo",sans-serif} .elementor .button-primary.button-primary{font-family:"Anomalia",sans-serif} .elementor .button-secondary.button-secondary{font-family:"Anomalia",sans-serif} .elementor .button-ghost.button-ghost{font-family:"Anomalia",sans-serif} .elementor .button-ink.button-ink{font-family:"Anomalia",sans-serif} .elementor .nav-link.nav-link{font-family:"Anomalia",sans-serif} .elementor .topbar-eyebrow.topbar-eyebrow{font-family:"Archivo",sans-serif} .elementor .topbar-wordmark.topbar-wordmark{font-family:"Anomalia",sans-serif} .elementor .offcanvas-utility-link.offcanvas-utility-link{font-family:"Anomalia",sans-serif} .elementor .menu-col-title.menu-col-title{font-family:"Anomalia",sans-serif} .elementor .menu-group-title.menu-group-title{font-family:"Anomalia",sans-serif} .elementor .menu-link.menu-link{font-family:"Anomalia",sans-serif} .elementor .strip-title.strip-title{font-family:"Anomalia",sans-serif} .elementor .strip-link.strip-link{font-family:"Anomalia",sans-serif} .elementor .forecast-year.forecast-year{font-family:"Anomalia",sans-serif} .elementor .forecast-label.forecast-label{font-family:"Anomalia",sans-serif} .elementor .stat-idx.stat-idx{font-family:"Archivo",sans-serif} .elementor .stat-plus.stat-plus{font-family:"Archivo",sans-serif} .elementor .stat-number.stat-number{font-family:'Archivo Black',sans-serif} .elementor .stat-label.stat-label{font-family:"Anomalia",sans-serif} .elementor .route-title.route-title{font-family:"Anomalia",sans-serif} .elementor .route-note.route-note{font-family:"Anomalia",sans-serif} .elementor .route-go.route-go{font-family:"Anomalia",sans-serif} .elementor .tools-title.tools-title{font-family:"Anomalia",sans-serif} .elementor .tools-lead.tools-lead{font-family:"Anomalia",sans-serif} .elementor .contact-title.contact-title{font-family:"Anomalia",sans-serif} .elementor .footer-quote-text.footer-quote-text{font-family:"Anomalia",sans-serif} .elementor .footer-copy.footer-copy{font-family:"Anomalia",sans-serif} .elementor .footer-legal-link.footer-legal-link{font-family:"Anomalia",sans-serif} .elementor .page-flag-text.page-flag-text{font-family:"Anomalia",sans-serif} .elementor .pagehead-sub.pagehead-sub{font-family:"Anomalia",sans-serif} .elementor .pagehead-lead.pagehead-lead{font-family:"Anomalia",sans-serif} .elementor .cardlist-title.cardlist-title{font-family:"Anomalia",sans-serif} .elementor .card-index.card-index{font-family:'Archivo Black',sans-serif} .elementor .card-title.card-title{font-family:"Anomalia",sans-serif} .elementor .post-lead.post-lead{font-family:"Anomalia",sans-serif} .elementor .post-para.post-para{font-family:"Anomalia",sans-serif} .elementor .skills-title.skills-title{font-family:"Anomalia",sans-serif} .elementor .skill-name.skill-name{font-family:"Anomalia",sans-serif} .elementor .skill-note.skill-note{font-family:"Anomalia",sans-serif} .elementor .bandlight-title.bandlight-title{font-family:"Anomalia",sans-serif} .elementor .contact-line-label.contact-line-label{font-family:"Anomalia",sans-serif} .elementor .contact-line-value.contact-line-value{font-family:"Archivo",sans-serif} .elementor .book-badge-text.book-badge-text{font-family:"Anomalia",sans-serif} .elementor .book-lead.book-lead{font-family:"Anomalia",sans-serif} .elementor .press-quote.press-quote{font-family:"Anomalia",sans-serif} .elementor .press-go-text.press-go-text{font-family:"Anomalia",sans-serif} .elementor .media-source.media-source{font-family:"Anomalia",sans-serif} .elementor .media-title.media-title{font-family:"Anomalia",sans-serif} .elementor .report-year.report-year{font-family:'Archivo Black',sans-serif} .elementor .report-name.report-name{font-family:"Anomalia",sans-serif} .elementor .report-kicker.report-kicker{font-family:"Anomalia",sans-serif} .elementor .report-feature-title.report-feature-title{font-family:"Anomalia",sans-serif} .elementor .about-thesis.about-thesis{font-family:"Anomalia",sans-serif} .elementor .about-invite.about-invite{font-family:"Anomalia",sans-serif} .elementor .about-signature.about-signature{font-family:"Anomalia",sans-serif} /* ======================================================================= audience pages — head + card list (LiaD, 2026-08-30) ======================================================================= */ /* ---------- A. page head ------------------------------------------------ */ /* ---------- B. the lectures -------------------------------------------- */ /* The green square that leads the section title. Decoration, so a pseudo- element rather than an extra box in the tree. Sized in em so it tracks the line's own clamp. */ .elementor .cardlist-title::before{content:"";flex:0 0 auto; width:.58em;height:.58em;border-radius:4px;background:var(--AY-green, #0afc08)} /* The brand book's green haze at the foot of the light block, running into the dark band below it. A gradient is not expressible as a V4 background prop (the schema takes a flat colour object), so it is painted here. */ .elementor .section-pagehead::after{content:"";position:absolute; left:0;right:0;bottom:0;height:clamp(4.375rem, 0.796rem + 5.587vw, 7.5rem);pointer-events:none; background:linear-gradient(180deg,rgba(10,252,8,0) 0%,rgba(10,252,8,.15) 100%)} /* card-go IS the circle-arrow — masked off currentColor exactly like the homepage's route icons, so one asset serves both the rest and hover states and there is no second request. Written out rather than reusing arrow(): that helper is a pseudo-element BODY and leads with `content:""`, which on a real element replaces its contents and is not what is wanted here. `background` IS a V4 prop, so this one line looks like it belongs in the style pane — it does not: the value is `currentColor`, and the colour prop stores a hex or a variable id, it cannot express an inherited keyword. That inheritance is the whole mechanism — it is what lets the icon flip to ink with the card from a single asset — and it is inseparable from the mask, which has no V4 prop at all. Same pattern as .route-icon on the homepage. */ .elementor .card-go{background:currentColor; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2081.16%2081.16%22%3E%3Cpath%20d=%22M0,40.58c0,22.41,18.17,40.58,40.58,40.58V0C18.17,0,0,18.17,0,40.58Z%22/%3E%3Cpath%20d=%22M40.58,40.58c0,22.41,18.17,40.58,40.58,40.58V0c-22.41,0-40.58,18.17-40.58,40.58Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2081.16%2081.16%22%3E%3Cpath%20d=%22M0,40.58c0,22.41,18.17,40.58,40.58,40.58V0C18.17,0,0,18.17,0,40.58Z%22/%3E%3Cpath%20d=%22M40.58,40.58c0,22.41,18.17,40.58,40.58,40.58V0c-22.41,0-40.58,18.17-40.58,40.58Z%22/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center} /* A lone card fills the row rather than sitting at half width with an empty half beside it — ריטריט יום has exactly one option today. `:only-child` has no V4 state equivalent (variants are null/hover/focus only), so it belongs here. 0-3-0, which beats the class's own width. The `>` is LOAD-BEARING, added 2026-08-31 when the lectures and workshops bands became loops. Inside a loop grid every .card-item is the only child of its own .e-loop-item wrapper, so the descendant form matched EVERY looped card and blew the two-column band to one column — the same trap page_css_archive documents for .media-card. Direct-child keeps this rule on the STATIC pages, where card-item really is a child of the row; the loop's own single-item rule lives in page_css_audience_loop and names .e-loop-item:only-of-type instead — NOT :only-child, which can never match inside a loop container (Elementor emits a