/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Oct 21 2026 | 06:20:52 */
/* ==========================================================================
   AL13 – Our Story (new page)
   Every property is !important so Elementor / theme rules cannot override it;
   CSS variables (--*) are left as they are.
   Content: Elementor containers + widgets (template al13-our-story.json)
   Styles: this file only. Desktop = Figma frame "1920",
   tablet = Figma "Tablet" (768), mobile = Figma "Mobile" (375).
   Breakpoints match Elementor defaults: tablet <= 1024px, mobile <= 767px.

   Every section (Who / What / When / Where / Why) has the same structure:
     .story-sec
       .story-sec__top          title + photo + number + shield
         .story-sec__title
         .story-media           photo container, clips the photo, owns the radius
           .story-media__photo
           (.story-quote)       What / Why quote sits on the photo
         .story-sec__num
         .story-sec__shield
       (.story-sec__body / .story-certs / .story-quote)
   Positions inside .story-sec__top are measured from the photo's top edge
   and from the right edge of the screen, exactly as in Figma.
   ========================================================================== */

:root {
  --story-yellow: #FFC556;
  --story-yellow-2: #FBC658;
  --story-grey-dark: #4A4A4C;
  --story-grey: #414143;
  --story-text: #2B2B2B;
  --story-light: #E5E5E5;
  --story-pill: #E5E5E5;
  --story-white: #FFFFFF;

  /* System Helvetica stack, same as the live desktop page. The site's web fonts
     "hel" / "HelveticaNeueLTStd" are ~8% wider than Figma's Helvetica and break
     the line wrapping from the design. */
 --story-font-neue: Helvetica;
  --story-font-helv: Helvetica;
  --story-font-arial: Arial;

  --story-radius: 32px;
}

/* ---------- Reset Elementor container / widget spacing for our blocks ---------- */

.e-con.story-hero,
.e-con.story-sec,
.e-con.story-sec__top,
.e-con.story-media,
.e-con.story-sec__body,
.e-con.story-certs,
.e-con.story-cert {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --margin-top: 0px;
  --margin-bottom: 0px;
  --display: flex;
  display: flex !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
}

.e-con.story-hero,
.e-con.story-sec {
  position: relative !important;
  flex-direction: column !important;
  width: 100% !important;
}

.story-hero .elementor-widget,
.story-sec .elementor-widget {
  margin: 0 !important;
}

.story-hero .elementor-widget-container,
.story-sec .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* The site theme forces font-family "hel" on spans */
.e-con.story-hero span,
.e-con.story-sec span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* ---------- Line breaks from the design ----------
   .story-line flows as normal text unless the widget asks for separate lines
   on the current breakpoint (story-br-d / story-br-t / story-br-m). */

.story-line {
  display: inline !important;
}

@media (min-width: 1025px) {
  .story-br-d .story-line { display: block !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .story-br-t .story-line { display: block !important; }
}

@media (max-width: 767px) {
  .story-br-m .story-line { display: block !important; }
}

/* ==========================================================================
   DESKTOP (Figma 1920)
   ========================================================================== */

/* ---------- Hero ---------- */

.e-con.story-hero {
  padding: 261px 160px 0 !important;
}

.elementor-widget.story-hero__title .elementor-heading-title {
  max-width: 1232px !important;
  margin: 0 !important;
  font-family: var(--story-font-neue) !important;
  font-size: 96px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 117px !important;
  letter-spacing: 0 !important;
  color: var(--story-grey-dark) !important;
}

.story-hero__accent {
  color: var(--story-yellow) !important;
}

/* Note (desktop): Figma uses Helvetica / Helvetica Neue; on Windows the browser
   draws Arial, whose glyphs sit a few px higher in the same line box. Hero top
   261 (Figma 258), Who title-top +11 and the other titles +4 compensate for it,
   measured with PerfectPixel at 1920. */

/* Grey pill behind "here." — the span's own background + padding.
   Figma has two spaces before "here." (HTML collapses them to one), so the
   left padding also restores the second space.
   Vertical maths keep the text on the line's baseline for any font:
     vertical-align: top + margin-top  -> pill top sits --pill-top below the line top
     line-height = line - 2 × top      -> text baseline stays where the line's is
     padding-bottom / margin-bottom    -> pill height = --pill-h, line height unchanged
   --pill-lh must equal the H1 line-height on each breakpoint.
   Variables live on .story-hero__pill (breakpoints override them there);
   the properties use a stronger selector to beat the span reset above. */
.story-hero__pill {
  --pill-lh: 117px;
  --pill-top: 9px;
  --pill-h: 107px;
  --pill-ml: -9px;
  --pill-pl: 36px;
  --pill-pr: 14px;
}

.e-con.story-hero .story-hero__pill {
  display: inline-block !important;
  vertical-align: top !important;
  margin: var(--pill-top) 0 calc(var(--pill-lh) - var(--pill-top) - var(--pill-h)) var(--pill-ml) !important;
  padding: 0 var(--pill-pr) calc(var(--pill-h) - var(--pill-lh) + 2 * var(--pill-top)) var(--pill-pl) !important;
  line-height: calc(var(--pill-lh) - 2 * var(--pill-top)) !important;
  border-radius: 1000px !important;
  background: var(--story-pill) !important;
}

/* ---------- Section skeleton ---------- */

.e-con.story-sec__top {
  position: relative !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}

.elementor-widget.story-sec__title {
  position: absolute !important;
  top: var(--title-top) !important;
  left: var(--title-left, 8.333%) !important; /* 160 / 1920 */
  z-index: 3 !important;
  width: auto !important;
}

.elementor-widget.story-sec__title .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--title-font, var(--story-font-helv)) !important;
  font-size: 280px !important;
  font-weight: 700 !important;
  line-height: var(--title-lh, 322px) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  color: var(--title-color) !important;
}

.elementor-widget.story-sec__num {
  position: absolute !important;
  top: var(--num-top) !important;
  right: var(--num-right, 151px) !important;
  z-index: 3 !important;
  width: auto !important;
}

.elementor-widget.story-sec__num .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--story-font-helv) !important;
  font-size: 160px !important;
  font-weight: 700 !important;
  line-height: 184px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  color: var(--num-color, var(--story-white)) !important;
}

.elementor-widget.story-sec__num .elementor-heading-title span {
  color: var(--slash-color, var(--story-yellow-2)) !important;
}

.elementor-widget.story-sec__shield {
  position: absolute !important;
  top: var(--shield-top) !important;
  right: var(--shield-right, 225px) !important;
  z-index: 3 !important;
  width: 26px !important;
  height: 31px !important;
  color: var(--shield-color, var(--story-yellow-2)) !important;
}

.story-shield-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* ---------- Photo container ---------- */

.e-con.story-media {
  --width: var(--media-w);
  position: relative !important;
  flex: 0 0 auto !important;
  width: var(--media-w) !important;
  /* Fixed heights from Figma: the page stays the same height when the
     browser scrollbar makes the viewport ~12px narrower than 1920 */
  height: var(--media-h) !important;
  overflow: hidden !important;
}

/* Photo runs off the right edge of the screen: only the left side is rounded */
.e-con.story-media--bleed-right {
  margin-left: auto !important;
  border-radius: var(--story-radius) 0 0 var(--story-radius) !important;
}

/* Photo runs off the left edge of the screen: only the right side is rounded */
.e-con.story-media--bleed-left {
  margin-right: auto !important;
  border-radius: 0 var(--story-radius) var(--story-radius) 0 !important;
}

.e-con.story-media--full {
  border-radius: 0 !important;
}

.elementor-widget.story-media__photo,
.elementor-widget.story-media__photo .elementor-widget-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Stronger selector: the child theme has
   img.attachment-full.size-full[class*="wp-image-"] { height: auto; }
   which otherwise shrinks the photo on tablet / mobile */
.e-con.story-media .elementor-widget.story-media__photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--photo-pos, center) !important;
  border-radius: 0 !important;
}

/* ---------- Text ---------- */

.elementor-widget.story-text,
.elementor-widget.story-text p {
  font-family: var(--story-font-arial) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
  color: var(--story-text) !important;
}

.elementor-widget.story-text p {
  margin: 0 0 28px !important;
}

.elementor-widget.story-text p:last-child {
  margin-bottom: 0 !important;
}

.e-con.story-cols {
  flex-direction: row !important;
  align-items: flex-start !important;
}

/* Quotes */
.elementor-widget.story-quote,
.elementor-widget.story-quote p {
  margin: 0 !important;
  font-family: var(--story-font-arial) !important;
  font-size: var(--quote-size, 72px) !important;
  font-weight: 400 !important;
  line-height: var(--quote-lh, 83px) !important;
  letter-spacing: 0 !important;
  color: var(--quote-color) !important;
}

.story-quote .story-accent {
  color: var(--story-yellow) !important;
}

/* Quote placed over the photo */
.elementor-widget.story-quote--what,
.elementor-widget.story-quote--why {
  position: absolute !important;
  left: var(--quote-left, 8.333%) !important;
  bottom: var(--quote-bottom) !important;
  z-index: 2 !important;
  width: auto !important;
}

/* max-width on the inner paragraph: Elementor resets it on the widget wrapper */
.elementor-widget.story-quote--what p,
.elementor-widget.story-quote--why p {
  max-width: var(--quote-max, none) !important;
}

/* ---------- Who ---------- */

.e-con.story-sec--who {
  --media-w: 63.333%; /* 1216 / 1920 */
  --media-ratio: 1216 / 837;
  --media-h: 837px;
  --title-top: 65px;
  --title-left: 7.708%; /* 148 / 1920 */
  --title-font: var(--story-font-neue);
  --title-lh: 342px;
  --title-color: var(--story-yellow);
  --num-top: 78px;
  --num-right: 7.865%; /* 151 / 1920 */
  --shield-top: 247px;
  --shield-right: calc(var(--num-right) + 74px);
  --shield-color: var(--story-white);
  padding: 235px 0 300px !important;
}

/* 160 + 425 + 151 + 402 = 1138px at 1920; gap and columns shrink on narrower
   laptops so the text never causes horizontal scrolling.
   The % gap is taken from the content width (100% - 8.333% padding):
   151 / 1760 = 8.58% */
.e-con.story-sec--who .story-sec__body {
  gap: min(151px, 8.58%) !important;
  padding: 76px 0 0 8.333% !important;
}

.story-sec--who .elementor-widget.story-cols__col--1 {
  flex: 0 1 425px !important;
  max-width: 425px !important;
}

.story-sec--who .elementor-widget.story-cols__col--2 {
  flex: 0 1 402px !important;
  max-width: 402px !important;
}

/* ---------- What ---------- */

.e-con.story-sec--what {
  --media-w: 80.833%; /* 1552 / 1920 */
  --media-ratio: 1552 / 1036;
  --media-h: 1036px;
  --title-top: 26px;
  --title-color: var(--story-white);
  --num-top: 64px;
  --num-right: 4.531%; /* 87 / 1920 */
  --num-color: var(--story-grey);
  --shield-top: 233px;
  --shield-right: calc(var(--num-right) + 74px);
  --quote-color: var(--story-white);
  --quote-left: 10.309%; /* 160 / 1552 — the quote is positioned inside the photo */
  --quote-bottom: 115px;
  --quote-max: 1062px;
  padding: 0 0 215px !important;
}

/* Certifications. In Figma every line is a separate text layer placed 30px
   apart, so the list uses a 30px line-height (23px text box + spacing). */
.e-con.story-certs {
  flex-direction: column !important;
  gap: 30px !important;
  padding: 40px 0 0 8.333% !important;
}

.e-con.story-cert {
  flex-direction: row !important;
  align-items: flex-start !important;
}

.elementor-widget.story-cert__label {
  flex: 0 0 98px !important;
  width: 98px !important;
  padding-top: 10px !important;
}

.elementor-widget.story-cert__label .elementor-heading-title {
  margin: 0 !important;
  font-family: var(--story-font-arial) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  color: var(--story-yellow-2) !important;
}

.elementor-widget.story-cert__list,
.elementor-widget.story-cert__list p {
  margin: 0 !important;
  font-family: var(--story-font-arial) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  color: var(--story-text) !important;
}

/* ---------- When ---------- */

.e-con.story-sec--when {
  --media-w: 63.333%; /* 1216 / 1920 */
  --media-ratio: 1216 / 1293;
  --media-h: 1293px;
  --title-top: 353px;
  --title-color: var(--story-yellow-2);
  --num-top: 1px;
  --num-right: 7.865%; /* 151 / 1920 */
  --shield-top: 170px;
  --shield-right: calc(var(--num-right) + 72px);
  padding: 0 0 383px !important;
}

/* On desktop the text sits to the left of the photo and never runs into it.
   Top is 763px from the photo top (laptops: follows the photo height in vw). */
.e-con.story-cols--when {
  position: absolute !important;
  top: 763px !important;
  left: 8.333% !important;
  z-index: 2 !important;
  flex-direction: column !important;
  gap: 28px !important;
  width: min(346px, calc(28.333% - 24px)) !important;
}

/* ---------- Where ---------- */

.e-con.story-sec--where {
  --media-w: 77.5%; /* 1488 / 1920 */
  --media-ratio: 1488 / 876;
  --media-h: 876px;
  --title-top: 56px;
  --title-color: var(--story-white);
  --num-top: 24px;
  --num-right: 7.865%; /* 151 / 1920 */
  --num-color: var(--story-grey);
  --shield-top: 193px;
  --shield-right: calc(var(--num-right) + 77px);
  --quote-color: var(--story-grey);
  padding: 0 0 383px !important;
}

.elementor-widget.story-quote--where {
  max-width: calc(1150px + 8.333%) !important;
  padding: 49px 0 0 8.333% !important;
}

/* ---------- Why ---------- */

.e-con.story-sec--why {
  --media-w: 100%;
  --media-ratio: 1920 / 1431;
  --media-h: 1431px;
  --title-top: 67px;
  --title-color: var(--story-yellow-2);
  --num-top: 70px;
  --num-right: 7.865%; /* 151 / 1920 */
  --num-color: var(--story-yellow-2);
  --slash-color: var(--story-white);
  --shield-top: 239px;
  --shield-right: calc(var(--num-right) + 74px);
  --shield-color: var(--story-white);
  --quote-color: var(--story-light);
  --quote-size: 88px;
  --quote-lh: 101px;
  --quote-bottom: 164px;
  --quote-max: 1033px;
}

/* ==========================================================================
   LAPTOP (no Figma frame): same desktop layout, smaller type.
   Below ~1600px the 1920 type sizes start to collide (dark numbers on the
   photo from ~1660, What quote over its title from ~1465), so:
     1280–1599  — midway between desktop and tablet sizes
     1025–1279  — tablet sizes
   Line-heights follow Figma "Auto": Helvetica ×1.15, Helvetica Neue ×1.214.
   The shield stays under the number: top = number top + 0.92 × number line-height,
   right = number right + 0.46 × number size.
   ========================================================================== */

@media (min-width: 1280px) and (max-width: 1599px) {
  .elementor-widget.story-hero__title .elementor-heading-title {
    font-size: 72px !important;
    line-height: 87px !important;
  }

  .story-hero__pill {
    --pill-lh: 87px;
    --pill-top: 6px;
    --pill-h: 82px;
    --pill-ml: -9px;
    --pill-pl: 29px;
    --pill-pr: 14px;
  }

  .e-con.story-sec {
    --title-lh: 242px;
    --shield-top: calc(var(--num-top) + 127px);
    --shield-right: calc(var(--num-right) + 56px);
  }

  .e-con.story-sec--who {
    --title-lh: 255px;
  }

  .elementor-widget.story-sec__title .elementor-heading-title {
    font-size: 210px !important;
  }

  .elementor-widget.story-sec__num .elementor-heading-title {
    font-size: 120px !important;
    line-height: 138px !important;
  }

  .elementor-widget.story-sec__shield {
    width: 20px !important;
    height: 24px !important;
  }

  .elementor-widget.story-quote,
  .elementor-widget.story-quote p {
    font-size: var(--quote-size, 56px) !important;
    line-height: var(--quote-lh, 64px) !important;
  }

  .e-con.story-sec--why {
    --quote-size: 66px;
    --quote-lh: 76px;
  }
}




/* Large Devices, Wide Screens */
@media only screen and (max-width : 1600px) {
    .e-con.story-sec--when {
   
    --title-top: 100px;
    
}
	
	
	.e-con.story-cols--when {
    top: 400px !important;
}
	
	
	
} /* end 1600 */


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1440px) {
    .e-con.story-hero {
    padding: 261px 70px 0 !important;
}
	
	.e-con.story-sec--when {
    
    --title-top: 105px;
   
}
	
} /* end 1440 */




/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .e-con.story-cols--when {
    top: 250px !important;
}
	.e-con.story-sec--when {
    --title-top: 26px;
}
} /* end 1200 */











@media (min-width: 1025px) and (max-width: 1279px) {
  .elementor-widget.story-hero__title .elementor-heading-title {
    font-size: 56px !important;
    line-height: 68px !important;
  }

  .story-hero__pill {
    --pill-lh: 68px;
    --pill-top: 3px;
    --pill-h: 65px;
    --pill-ml: -9px;
    --pill-pl: 25px;
    --pill-pr: 14px;
  }

  .e-con.story-sec {
    --title-lh: 184px;
    --shield-top: calc(var(--num-top) + 93px);
    --shield-right: calc(var(--num-right) + 41px);
  }

  .e-con.story-sec--who {
    --title-lh: 195px;
  }

  .elementor-widget.story-sec__title .elementor-heading-title {
    font-size: 160px !important;
  }

  .elementor-widget.story-sec__num .elementor-heading-title {
    font-size: 88px !important;
    line-height: 101px !important;
  }

  .elementor-widget.story-sec__shield {
    width: 14px !important;
    height: 17px !important;
  }

  .elementor-widget.story-quote,
  .elementor-widget.story-quote p {
    font-size: var(--quote-size, 40px) !important;
    line-height: var(--quote-lh, 46px) !important;
  }

  .e-con.story-sec--why {
    --quote-size: 44px;
    --quote-lh: 51px;
  }
}

/* Body text, certifications: 18px on every laptop width.
   Photos scale with the width on laptops (fixed Figma heights only ≥1600). */
@media (min-width: 1025px) and (max-width: 1599px) {
  .e-con.story-media {
    height: auto !important;
    aspect-ratio: var(--media-ratio) !important;
  }

 

  .elementor-widget.story-text,
  .elementor-widget.story-text p {
    font-size: 18px !important;
    line-height: 26px !important;
  }

  .elementor-widget.story-text p {
    margin-bottom: 26px !important;
  }

  .e-con.story-cols--when {
    gap: 26px !important;
  }

  .elementor-widget.story-cert__list,
  .elementor-widget.story-cert__list p {
    font-size: 18px !important;
    line-height: 27px !important;
  }

  .elementor-widget.story-cert__label {
    padding-top: 9px !important;
  }

  .elementor-widget.story-cert__label .elementor-heading-title {
    font-size: 12px !important;
    line-height: 14px !important;
  }
}

/* ==========================================================================
   TABLET (Figma Tablet, 768)
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --story-radius: 20px;
  }

  /* Hero */
  .e-con.story-hero {
    padding: 128px 40px 0 !important;
  }

  .elementor-widget.story-hero__title .elementor-heading-title {
    max-width: 688px !important;
    font-size: 56px !important;
    line-height: 68px !important;
  }

  .story-hero__pill {
    --pill-lh: 68px;
    --pill-top: 3px;
    --pill-h: 65px;
    --pill-ml: -9px;
    --pill-pl: 25px;
    --pill-pr: 14px;
  }

  /* Shared */
  .e-con.story-sec {
    --title-left: 40px;
    --title-font: var(--story-font-helv);
    --title-lh: 184px;
    --num-top: 7px;
    --num-right: 59px;
    --shield-top: 108px;
    --shield-right: 100px;
    --media-ratio: auto;
  }

  .elementor-widget.story-sec__title .elementor-heading-title {
    font-size: 160px !important;
  }

  .elementor-widget.story-sec__num .elementor-heading-title {
    font-size: 88px !important;
    line-height: 101px !important;
  }

  .elementor-widget.story-sec__shield {
    width: 14px !important;
    height: 17px !important;
  }

  .e-con.story-media {
    height: var(--media-h) !important;
  }

  .elementor-widget.story-text,
  .elementor-widget.story-text p {
    font-size: 18px !important;
    line-height: 26px !important;
  }

  .elementor-widget.story-text p {
    margin-bottom: 26px !important;
  }

  .elementor-widget.story-quote,
  .elementor-widget.story-quote p {
    font-size: var(--quote-size, 40px) !important;
    line-height: var(--quote-lh, 46px) !important;
  }

  .elementor-widget.story-quote--what,
  .elementor-widget.story-quote--why {
    left: 40px !important;
  }

  /* Who */
  .e-con.story-sec--who {
    --media-w: calc(100% - 40px);
    --media-h: 420px;
    --title-top: -128px;
    --title-color: var(--story-yellow-2);
    padding: 211px 0 136px !important;
  }

  .e-con.story-sec--who .story-sec__body {
    gap: 30px !important;
    padding: 43px 40px 0 !important;
  }

  .story-sec--who .elementor-widget.story-cols__col--1,
  .story-sec--who .elementor-widget.story-cols__col--2 {
    flex: 1 1 0 !important;
    max-width: none !important;
  }

  /* What */
  .e-con.story-sec--what {
    --media-w: calc(100% - 20px);
    --media-h: 600px;
    --title-top: -13px;
    --num-color: var(--story-white);
    --quote-bottom: 35px;
    --quote-max: 590px;
    padding: 0 0 209px !important;
  }

  .e-con.story-certs {
    gap: 27px !important;
    padding: 40px 40px 0 !important;
  }

  .elementor-widget.story-cert__label {
    flex-basis: 85px !important;
    width: 85px !important;
    padding-top: 9px !important;
  }

  .elementor-widget.story-cert__label .elementor-heading-title {
    font-size: 12px !important;
    line-height: 14px !important;
  }

  .elementor-widget.story-cert__list,
  .elementor-widget.story-cert__list p {
    font-size: 18px !important;
    line-height: 27px !important;
  }

  /* When */
  .e-con.story-sec--when {
    --media-w: calc(100% - 40px);
    --media-h: 520px;
    --title-top: -128px;
    padding: 0 0 130px !important;
  }

  .e-con.story-cols--when {
    position: static !important;
    flex-direction: row !important;
    gap: 38px !important;
    width: auto !important;
    padding: 43px 40px 0 !important;
  }

  .story-cols--when .elementor-widget.story-cols__col--1 {
    flex: 0 0 331px !important;
    max-width: 331px !important;
  }

  .story-cols--when .elementor-widget.story-cols__col--2 {
    flex: 1 1 0 !important;
  }

  /* Where */
  .e-con.story-sec--where {
    --media-w: calc(100% - 40px);
    --media-h: 460px;
    --title-top: -13px;
    --num-color: var(--story-white);
    padding: 0 0 71px !important;
  }

  .elementor-widget.story-quote--where {
    max-width: none !important;
    padding: 37px 40px 0 !important;
  }

  /* Why */
  .e-con.story-sec--why {
    --media-w: 100%;
    --media-h: 760px;
    --title-top: 19px;
    --num-top: 39px;
    --shield-top: 140px;
    --quote-size: 44px;
    --quote-lh: 51px;
    --quote-bottom: 67px;
    --quote-max: 688px;
  }
}

/* ==========================================================================
   MOBILE (Figma Mobile, 375)
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --story-radius: 16px;
  }

  /* Hero */
  .e-con.story-hero {
    padding: 99px 20px 0 !important;
  }

  .elementor-widget.story-hero__title .elementor-heading-title {
    max-width: 335px !important;
    font-size: 36px !important;
    line-height: 44px !important;
  }

  .story-hero__pill {
    --pill-lh: 44px;
    --pill-top: 5px;
    --pill-h: 42px;
    --pill-ml: -7px;
    --pill-pl: 17px;
    --pill-pr: 8px;
  }

  /* Shared */
  .e-con.story-sec {
    --title-left: 20px;
    --title-lh: 83px;
    --num-top: 7px;
    --num-right: 33px;
    --shield-top: 63px;
    --shield-right: 53px;
  }

  .elementor-widget.story-sec__title .elementor-heading-title {
    font-size: 72px !important;
  }

  .elementor-widget.story-sec__num .elementor-heading-title {
    font-size: 48px !important;
    line-height: 55px !important;
  }

  .elementor-widget.story-sec__shield {
    width: 13px !important;
    height: 16px !important;
  }

  .elementor-widget.story-quote,
  .elementor-widget.story-quote p {
    font-size: var(--quote-size, 26px) !important;
    line-height: var(--quote-lh, 30px) !important;
  }

  .elementor-widget.story-quote--what,
  .elementor-widget.story-quote--why {
    left: 20px !important;
    right: 20px !important;
  }

  /* Who */
  .e-con.story-sec--who {
    --media-w: calc(100% - 20px);
    --media-h: 240px;
    --title-top: -52px;
    padding: 115px 0 89px !important;
  }

  .e-con.story-sec--who .story-sec__body {
    flex-direction: column !important;
    gap: 26px !important;
    padding: 27px 20px 0 !important;
  }

  .story-sec--who .elementor-widget.story-cols__col--1,
  .story-sec--who .elementor-widget.story-cols__col--2 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* What */
  .e-con.story-sec--what {
    --media-w: calc(100% - 20px);
    --media-h: 440px;
    --title-top: 0px;
    --quote-bottom: 22px;
    --quote-max: 335px;
    padding: 0 0 110px !important;
  }

  .e-con.story-certs {
    gap: 15px !important;
    padding: 29px 20px 0 !important;
  }

  .e-con.story-cert {
    flex-direction: column !important;
  }

  .elementor-widget.story-cert__label {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-top: 0 !important;
  }

  /* Higher specificity: Elementor's own widget margin rules load after this file */
  .e-con.story-cert > .elementor-widget.story-cert__label {
    margin-bottom: -2px !important;
  }

  /* When */
  .e-con.story-sec--when {
    --media-w: calc(100% - 20px);
    --media-h: 320px;
    --title-top: -52px;
    padding: 0 0 60px !important;
  }

  .e-con.story-cols--when {
    flex-direction: column !important;
    gap: 26px !important;
    padding: 27px 20px 0 !important;
  }

  .story-cols--when .elementor-widget.story-cols__col--1,
  .story-cols--when .elementor-widget.story-cols__col--2 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Where */
  .e-con.story-sec--where {
    --media-w: calc(100% - 20px);
    --media-h: 280px;
    --title-top: 0px;
    padding: 0 0 46px !important;
  }

  .elementor-widget.story-quote--where {
    padding: 27px 20px 0 !important;
  }

  /* Why */
  .e-con.story-sec--why {
    --media-h: 560px;
    --title-top: 20px;
    --num-top: 27px;
    --shield-top: 83px;
    --quote-size: 28px;
    --quote-lh: 32px;
    --quote-bottom: 34px;
    --quote-max: 329px;
  }
}