.elementor-widget-theme-post-content{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 > 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-12232 .elementor-element.elementor-element-3efaecc .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-field-group.recaptcha_v3-bottomleft, .elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-field-type-html{padding-bottom:0px;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-button[type="submit"]{color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-12232 .elementor-element.elementor-element-3efaecc{--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-theme-post-content{font-size:var( --e-global-typography-text-font-size );}.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-theme-post-content{font-size:var( --e-global-typography-text-font-size );}.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 <img>: 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 <span> 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}}
/* 2026-09-01 (C), LiaD: "weird shadow ABOVE the floating book". The rule below
   only ever declared `bottom`, and that was the bug: Elementor's atomic base
   sheet styles `.e-con::before` with `top:0;left:0` for the container's own
   background overlay. Those declarations apply to OUR pseudo too (same element,
   we only add `content`), and an absolutely-positioned box with top, bottom AND
   a fixed height is over-constrained - `top` wins. So the cast shadow rendered
   at the TOP-LEFT of `.tools-media`, floating above the book.
   Every edge is now stated explicitly, physical rather than logical, so neither
   the base sheet nor the RTL over-constraint rule can move it: top:auto pins it
   to the bottom, and left/right 19% + width:auto centre it under the 62%-wide
   book without depending on which side `inset-inline-start` resolves to. */
.elementor .tools-media::before{content:"";position:absolute;
  top:auto;bottom:6%;left:19%;right:19%;width:auto;height:26px;
  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}

/* ---------- anti-spam rows (2026-09-08) --------------------------------- */
/* Three field groups ride at the end of every form on the site — a honeypot, a
   reCAPTCHA v3 and Google's attribution line. See forms.antispam_fields.

   The form above is `display:flex` with `row-gap:14px`. A field group that
   renders to NOTHING is still a flex item and still earns its full 14px, so
   left alone the two hidden rows open a blank 28px band between the consent
   checkbox and the SEND button on all ten forms. Neither rule below is
   cosmetic: they are what makes the two rows invisible rather than merely
   empty.

   They are hidden two DIFFERENT ways, on purpose.

   The honeypot is display:none — the classic technique, and the only one that
   also takes the input out of the accessibility tree. A screen-reader user who
   tabbed into a bait field and filled it would have their submission silently
   rejected as spam, which is the one failure this whole change must not add.
   Pro already puts `display:none !important` on the INPUT, but not on the div
   around it, and that div is a flex item: measured on /contact/ it stood 80px
   tall and stretched the consent row from 70px to 80px.

   That div is matched by what it LACKS. Pro renders the honeypot wrapper as a
   bare `.elementor-field-type-text` with no `.elementor-field-group` beside it
   — every real text field carries both — so the negation is the only stable
   handle on it. Matching `.elementor-field-type-honeypot` was the obvious first
   guess and it is wrong: Pro emits no such class, and the rule matched nothing
   while looking completely correct.

   The captcha is NOT display:none. Google renders its widget into that div and
   a display:none container is not reliably renderable — the token would stop
   being minted and every submission on the site would fail closed. Taking it
   out of flow instead keeps the box rendered and costs no space: an absolutely
   positioned child of a flex container is not a flex item at all, so it earns
   no row-gap. No offsets are set, so it stays at its static position; the badge
   Google appends is position:fixed and escapes the 0x0 box regardless, and the
   kit's own custom CSS hides that badge site-wide. */
.elementor .section-contact .elementor-form-fields-wrapper
  > .elementor-field-type-text:not(.elementor-field-group){display:none}
.elementor .section-contact .elementor-field-type-recaptcha_v3{
  position:absolute;width:0;height:0;padding:0;margin:0;
  overflow:hidden;pointer-events:none}

/* The attribution line. Visible copy, and required: the kit hides Google's
   floating badge, and the reCAPTCHA terms allow that only where the form
   carries the attribution instead. Sized well under the consent line so it
   reads as a footnote and not as a second thing to agree to. No margin of its
   own: it takes the form's own 14px row rhythm like every other row, which is
   the one spacing on this page that is already agreed.

   The link colour is set here rather than left to `.section-contact a`, which
   paints links neon green — correct for the consent line's privacy link, far
   too loud for a Google boilerplate footnote. Both tones clear 4.5:1 on the
   section's dark ground at this size.

   OPACITY, NOT A FLAT GREY, is deliberate: this block also renders on the
   English pages, where the whole form is re-pointed off Anomalia (see
   page_css_en_contact.FORM_SELECTORS — this rule is in that list). */
.elementor .section-contact .elementor-field-type-html{
  font-family:"Anomalia",sans-serif;font-size:clamp(0.75rem, 0.678rem + 0.112vw, 0.812rem);line-height:1.5;
  color:rgba(255,255,255,.55)}
.elementor .section-contact .elementor-field-type-html a{
  color:rgba(255,255,255,.72);text-decoration:underline}
/* 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 <style> element as its first
   child; corrections 2026-08-31 later,24 item 5). */
.elementor .cardlist-grid > .card-item:only-child{width:100%}

@media (min-width:1025px){
  .elementor .card-item:hover{background:var(--AY-green, #0afc08);border-color:var(--AY-green, #0afc08);
    transform:translateY(-2px)}
  .elementor .card-item:hover :is(.card-title,.card-index){color:#001400}
  .elementor .card-item:hover .card-go{color:#001400;transform:translateX(-8px)}
}

.elementor .card-item:focus-visible{outline:3px solid var(--AY-green, #0afc08);outline-offset:3px}


/* =======================================================================
   inner pages — contact / books / media / reports   (LiaD, 2026-08-30)
   ======================================================================= */

/* ---------- shared ------------------------------------------------------ */

/* The green square that leads a band title, on the LIGHT band. The identical
   decoration to .cardlist-title::before on the dark band, written out again
   rather than shared: the two titles are different classes — one is white, one
   is ink — and one class for both would have to carry a colour that is wrong on
   one of the bands. Sized in em so it tracks the line's own clamp.
   (And the word for a CSS rule's left-hand side cannot appear anywhere in this
   file, comments included — Elementor substitutes the element for it. See
   page_css.check.) */
.elementor .bandlight-title::before{content:"";flex:0 0 auto;
  width:.58em;height:.58em;border-radius:4px;background:var(--AY-green, #0afc08)}

/* One circle-arrow, three item shapes. Each of these boxes IS the arrow —
   masked off `currentColor`, exactly like .route-icon on the homepage and
   .card-go on the audience pages — which is what lets the icon invert with its
   card on hover from a single asset and no second request. `background` looks
   like a V4 prop that belongs in the pane, and it is one; the VALUE is not —
   the colour prop stores a hex or a variable id and cannot express an
   inherited keyword, and that inheritance is the whole mechanism. */
.elementor :is(.media-go,.report-go,.press-go-icon){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. /contact-new/ — the direct rail -------------------------- */

/* Hover and focus only. The rail's hairline, spacing and type are all on
   .contact-line / .contact-line-label / .contact-line-value. */
@media (min-width:1025px){
  .elementor .contact-line:hover .contact-line-value{color:var(--AY-green, #0afc08)}
  .elementor .contact-line:hover .contact-line-label{color:var(--AY-green, #0afc08)}
}
.elementor .contact-line:focus-visible{outline:3px solid var(--AY-green, #0afc08);
  outline-offset:4px}

/* ---------- B. /books-new/ — the showcase and the press band ------------ */

/* The logos are the outlets' own artwork at five different aspect ratios
   (jpost 150x20, ladyGlobes 147x68). The class pins the HEIGHT; contain is
   what stops the widget's own width:100% stretching them to match each other.
   No V4 prop expresses object-fit. */
.elementor .press-logo{object-fit:contain;object-position:right center}

/* The link row at the foot of a press card. The arrow is a sibling box, not a
   pseudo-element, because it has to shift on hover independently of the text. */
@media (min-width:1025px){
  .elementor .press-card:hover{border-color:#001400}
  .elementor .press-go:hover .press-go-text{color:#001400}
  .elementor .press-go:hover .press-go-icon{transform:translateX(-6px)}
}
.elementor .press-go:focus-visible{outline:3px solid var(--AY-green, #0afc08);outline-offset:3px}

/* ---------- C. /media-archive/ — the thumbnails ------------------------- */

/* The ten library images run from 350x203 to 1179x1401. A natural height would
   give ten different card heights in one wrapping row, so the frame fixes the
   ratio and the image fills it. Neither aspect-ratio nor object-fit has a V4
   prop. `object-position:center top` rather than plain center: several of these
   are portraits of a person and the crop should keep the head. */
.elementor .media-thumb{aspect-ratio:16/10}
.elementor .media-thumb-img{width:100%;height:100%;object-fit:cover;
  object-position:center top;display:block;transition:transform 420ms}

/* A lone card fills the row rather than sitting at a third of it with two
   thirds empty beside it. This one is not hypothetical: /media-archive/ becomes
   a LOOP, and a filtered archive returning one or two items is its normal
   state, not an edge case. V4 variant states are null/hover/focus only, so
   :only-child has no equivalent. 0-3-0, which beats the class's own width.
   Same rule, same reason, as .cardlist-grid .card-item:only-child. */
.elementor .media-grid .media-card:only-child{width:100%}
.elementor .press-grid .press-card:only-child{width:100%}

@media (min-width:1025px){
  .elementor .media-card:hover{border-color:var(--AY-green, #0afc08)}
  .elementor .media-card:hover .media-thumb-img{transform:scale(1.04)}
  .elementor .media-card:hover .media-title{color:var(--AY-green, #0afc08)}
  .elementor .media-card:hover .media-go{transform:translateX(-8px)}
}
.elementor .media-card:focus-visible{outline:3px solid var(--AY-green, #0afc08);outline-offset:3px}

/* ---------- D. /reports-archive/ — the ledger --------------------------- */

/* The rows share one hairline the way the homepage's two route panels do: each
   row draws only its own block-end border (that IS a real prop, on the class),
   and the last one drops it so the ledger does not end on a rule with nothing
   under it. There is no V4 variant for :last-child. */
.elementor .reportlist .report-row:last-child{border-block-end-width:0}

/* The hover. `border-end-end-radius` is LOGICAL — bottom-LEFT on the Hebrew
   ledger, bottom-RIGHT on the English one — so LiaD's "round bottom left" and
   his "flipped, round right bottom" are ONE declaration, not a mirrored pair.
   That is the same reasoning page_css_en_report_single's docstring records for
   the pdf panel's cut, and it is deliberately NOT the
   shared-memory/rtl-flip-class-mirrors-wrong case: there is one cut here that
   means "the far end of the reading direction", not two mirrored ones.

   It rides the row's existing `all 200ms` transition, so the corner rounds in
   with the fill rather than snapping. Desktop-only for the same reason every
   hover in this pipeline is: a V4 hover variant carries no media query and
   latches on iOS. */
@media (min-width:1025px){
  .elementor .report-row:hover{background:var(--AY-green, #0afc08);
    border-end-end-radius:clamp(1.25rem, 0.391rem + 1.341vw, 2.0rem)}
  .elementor .report-row:hover :is(.report-year,.report-name){color:#001400}
  .elementor .report-row:hover .report-go{color:#001400;transform:translateX(-10px)}
  .elementor .report-feature:hover{background:var(--AY-green, #0afc08)}
  .elementor .report-feature:hover
    :is(.report-kicker,.report-feature-title){color:#001400}
  .elementor .report-feature:hover .report-go{color:#001400;
    transform:translateX(-10px)}
}
.elementor :is(.report-row,.report-feature):focus-visible{
  outline:3px solid var(--AY-green, #0afc08);outline-offset:3px}


/* =======================================================================
   תחזיות single (9619) — the post body, rendered by a CLASSIC widget
   ======================================================================= */

/* The widget is a flex ITEM of `cardlist-inner`, which is align-items:start —
   so without this the whole report shrink-wraps its longest line. A classic
   widget has no width prop; this is the gap, not a preference. */
.elementor #reportbody .elementor-widget-theme-post-content{width:100%}

/* Vertical rhythm as a lobotomised owl rather than a flex column: pdf-embedder
   measures its own parent to size the canvas it draws into, and turning that
   parent into a flex container is a needless risk for spacing that one
   margin rule gives correctly. */
.elementor #reportbody .elementor-widget-theme-post-content > .elementor-widget-container > * + *{margin-block-start:clamp(1.25rem, 0.534rem + 1.117vw, 1.875rem)}

/* ---------- type on the dark band -------------------------------------- */

/* The report's own name. One scale for h1-h6 because the fifteen posts are
   inconsistent about which tag they used for the same line — 10502 says h2,
   9193 says h3 — and that inconsistency is content history, not intent. */
.elementor #reportbody .elementor-widget-theme-post-content :is(h1,h2,h3,h4,h5,h6){font-family:Anomalia,sans-serif;font-weight:900;
  font-size:clamp(1.625rem, 0.766rem + 1.341vw, 2.375rem);line-height:1.2;color:#FFFFFF;margin:0}

.elementor #reportbody .elementor-widget-theme-post-content :is(p,li){font-family:Anomalia,sans-serif;font-weight:400;
  font-size:clamp(1.062rem, 0.848rem + 0.335vw, 1.25rem);line-height:1.72;color:#EBEBFF;margin:0}

/* MEASURE. The band's content column is `content-regular` — up to 1180px — and
   at 20px that is 110-plus characters a line, which is a wall. The report ITSELF
   wants the whole column and keeps it; the prose around it is capped, at the
   same order as `pagehead-lead`'s 840px. Flat rather than per-breakpoint on
   purpose: below 880px the viewport is already the narrower constraint. */
.elementor #reportbody .elementor-widget-theme-post-content :is(p,ul,ol){max-width:880px}
.elementor #reportbody .elementor-widget-theme-post-content :is(h1,h2,h3,h4,h5,h6){max-width:980px}

.elementor #reportbody .elementor-widget-theme-post-content strong{font-weight:700;color:#FFFFFF}

.elementor #reportbody .elementor-widget-theme-post-content ul{margin:0;padding-inline-start:1.15em;list-style:disc}
.elementor #reportbody .elementor-widget-theme-post-content ol{margin:0;padding-inline-start:1.35em}
.elementor #reportbody .elementor-widget-theme-post-content li + li{margin-block-start:.5em}
.elementor #reportbody .elementor-widget-theme-post-content li::marker{color:var(--AY-green, #0afc08)}

/* The two stray links on שאגת הארי (10642), and any the client adds later.
   The pdf-embedder anchor is excluded — it is the viewer's mount point, not a
   link once the script has run. */
.elementor #reportbody .elementor-widget-theme-post-content a:not(.pdfemb-viewer){color:var(--AY-green, #0afc08);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em}
.elementor #reportbody .elementor-widget-theme-post-content a:not(.pdfemb-viewer):focus-visible{outline:3px solid var(--AY-green, #0afc08);
  outline-offset:3px}
/* 10642 also carries a bare inline chevron next to one of them. It is
   decoration on a link that already reads as one, and at the body colour it
   renders as a black lump on a black band. */
.elementor #reportbody .elementor-widget-theme-post-content a svg{width:.8em;height:.8em;fill:currentColor;vertical-align:-.05em}

/* ---------- the classic-editor leftovers -------------------------------- */

/* The only two !important rules in this file. An inline style attribute
   outranks every rule in this sheet at any specificity, and these two
   attributes are on content, not on markup we author. See the file header. */
.elementor #reportbody .elementor-widget-theme-post-content [style*="font-size"]{font-size:inherit !important}
.elementor #reportbody .elementor-widget-theme-post-content [style*="text-align"]{text-align:start !important}

/* ---------- the report itself ------------------------------------------ */

/* White paper on the near-black band: on this page the DOCUMENT is the
   artefact, and the band exists to frame it. The corner is the brand's own
   asymmetric one — written logically, so on this RTL document `end-end` is the
   bottom-LEFT corner, the same corner `report-feature` and `page-flag` cut. */
.elementor #reportbody .wp-block-pdfemb-pdf-embedder-viewer{width:100%;background:#FFFFFF;
  padding:clamp(0.625rem, 0.196rem + 0.67vw, 1.0rem);border-end-end-radius:clamp(1.25rem, 0.248rem + 1.564vw, 2.125rem);overflow:hidden}

/* Before the viewer script runs — and if it never does, or the reader has JS
   off — this anchor is the visible fallback and it sits on that white panel,
   so it cannot inherit the band's light-on-dark colour. */
.elementor #reportbody a.pdfemb-viewer{display:block;color:#001400;font-family:Anomalia,sans-serif;
  font-weight:700}

/* pdf-embedder sizes its canvas from the wrapper and then lets it overflow on
   a narrow viewport, which on a phone is a horizontally scrolling page rather
   than a scrolling embed. */
.elementor #reportbody .wp-block-pdfemb-pdf-embedder-viewer canvas{max-width:100%;height:auto}

/* ---------- 1. the faces, because /en/ ships none ----------------------- */

@font-face{font-family:"Archivo";font-style:normal;font-weight:500;
  font-display:swap;src:url("https://spotrend.com/wp-content/uploads/fonts/archivo-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;
  font-display:swap;src:url("https://spotrend.com/wp-content/uploads/fonts/archivo-black-400.woff2") format("woff2")}
/* page_css.py sets the buttons' "+" glyph and a few chrome marks in the
   stand-alone family name, so that name has to resolve too. Same file. */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;
  font-display:swap;src:url("https://spotrend.com/wp-content/uploads/fonts/archivo-black-400.woff2") format("woff2")}

/* ---------- every Anomalia class on this page -> Archivo ---------------- */

/* 0-3-0 and LATER in this blob than page_css._font_fallback_css()'s own
   0-3-0 rules, which is the only thing that beats them. The list is READ OFF
   THE DOCUMENT (page_css_en_common.classes_in), not hand-written, so a class
   added to the page cannot silently keep rendering in capitals. */
.elementor .page-flag-text.page-flag-text,
.elementor .title-lg.title-lg,
.elementor .pagehead-sub.pagehead-sub,
.elementor .report-kicker.report-kicker,
.elementor .report-feature-title.report-feature-title,
.elementor .contact-title.contact-title,
.elementor .text-md.text-md{font-family:"Archivo",sans-serif}

/* Hebrew has no descenders and Anomalia's line box reflects that; Archivo
   Black's do, and a wrapped English H1 at 84px collides at 1.02. Measured on
   /en/books/ 2026-09-06. */
.elementor .title-lg.title-lg{line-height:1.1}

/* ---------- the id-scoped typography, re-pointed at Archivo ------------- */

/* Each of these matches the specificity of the rule it overrides — see this
   module's docstring. A 0-3-0 rule, which is what latin_tail() emits, loses to
   every one of them and the forecast silently renders in capitals. */
.elementor #reportbody .elementor-widget-theme-post-content :is(p,li){font-family:"Archivo",sans-serif}
.elementor #reportbody .elementor-widget-theme-post-content :is(h1,h2,h3,h4,h5,h6){font-family:"Archivo",sans-serif}

/* pdf-embedder's pre-script fallback anchor, which sits on the white paper
   panel and is the visible label until the viewer draws. */
.elementor #reportbody a.pdfemb-viewer{font-family:"Archivo",sans-serif}

/* ---------- the brand shape, mask mirrored for LTR --------------------- */
.elementor .section-pagehead::before{
  -webkit-mask-position:top right;mask-position:top right}
@media (max-width:1024px){
  .elementor .section-pagehead::before{
    -webkit-mask-position:top right;mask-position:top right}
}
@media (max-width:767px){
  .elementor .section-pagehead::before{
    -webkit-mask-position:top right;mask-position:top right}
}

/* ---------- the lead form ---------------------------------------------- */

/* Same rules, same reason, as page_css_en_contact: without them the labels,
   placeholders, consent line and the button all render in capitals.
   font-family ONLY; nothing else about the form moves.
   (The word Elementor substitutes for the element must not appear in page CSS,
   even inside a comment — page_css.check refuses the whole sheet if it does,
   which is why this note is worded around it.) */
.elementor .section-contact .elementor-field-textual,
.elementor .section-contact .elementor-field-type-acceptance .elementor-field-option,
.elementor .section-contact .elementor-field-type-acceptance :is(label,span),
.elementor .section-contact .elementor-button[type="submit"],
.elementor .section-contact .elementor-message,
.elementor .section-contact .elementor-field-type-html{font-family:"Archivo",sans-serif}

/* LiaD's circle-arrow on the submit button: both half-discs bulge left, which
   is RTL-forward. Mirrored, not re-drawn. */
.elementor .section-contact .elementor-button[type="submit"] .elementor-button-content-wrapper::after{transform:scaleX(-1)}

/* ---------- the archive back-link's circle-arrow, mirrored for LTR ------ */
.elementor .report-go{transform:scaleX(-1)}

/* The -10px is kept verbatim from the Hebrew rule; the flip does the
   reversing. Desktop-only, like every other hover in this pipeline. */
@media (min-width:1025px){
  .elementor .report-feature:hover .report-go{transform:scaleX(-1) translateX(-10px)}
}/* End custom CSS */