.elementor-2380 .elementor-element.elementor-element-5a1234a{--display:flex;--position:fixed;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}.elementor-2380 .elementor-element.elementor-element-5a1234a.e-con{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-2380 .elementor-element.elementor-element-5a1234a{left:0px;}body.rtl .elementor-2380 .elementor-element.elementor-element-5a1234a{right:0px;}.elementor-widget-theme-site-logo .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2380 .elementor-element.elementor-element-5bc18b0{background-color:var( --e-global-color-primary );padding:10px 10px 10px 10px;text-align:center;}.elementor-2380 .elementor-element.elementor-element-5bc18b0.elementor-element{--align-self:flex-start;}.elementor-2380 .elementor-element.elementor-element-5bc18b0 img{width:14rem;}.elementor-2380 .elementor-element.elementor-element-a3c5232{--display:flex;--position:fixed;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}.elementor-2380 .elementor-element.elementor-element-a3c5232.e-con{--align-self:center;}body:not(.rtl) .elementor-2380 .elementor-element.elementor-element-a3c5232{left:0px;}body.rtl .elementor-2380 .elementor-element.elementor-element-a3c5232{right:0px;}.elementor-2380 .elementor-element.elementor-element-240a36f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;top:-8px;}.elementor-2380 .elementor-element.elementor-element-240a36f.elementor-element{--align-self:center;}body:not(.rtl) .elementor-2380 .elementor-element.elementor-element-240a36f{left:23px;}body.rtl .elementor-2380 .elementor-element.elementor-element-240a36f{right:23px;}@media(max-width:1024px){.elementor-2380 .elementor-element.elementor-element-5a1234a{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2380 .elementor-element.elementor-element-5bc18b0{padding:15px 15px 15px 15px;z-index:15;}body:not(.rtl) .elementor-2380 .elementor-element.elementor-element-240a36f{left:2px;}body.rtl .elementor-2380 .elementor-element.elementor-element-240a36f{right:2px;}.elementor-2380 .elementor-element.elementor-element-240a36f{top:-1px;}}@media(min-width:768px){.elementor-2380 .elementor-element.elementor-element-5a1234a{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2380 .elementor-element.elementor-element-5a1234a{--width:100%;}.elementor-2380 .elementor-element.elementor-element-a3c5232{--content-width:100%;}}@media(max-width:767px){.elementor-2380 .elementor-element.elementor-element-5a1234a{--min-height:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-2380 .elementor-element.elementor-element-5bc18b0{width:100%;max-width:100%;text-align:center;}.elementor-2380 .elementor-element.elementor-element-a3c5232{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:5;}.elementor-2380 .elementor-element.elementor-element-240a36f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;top:0%;z-index:4;}body:not(.rtl) .elementor-2380 .elementor-element.elementor-element-240a36f{left:-0.58%;}body.rtl .elementor-2380 .elementor-element.elementor-element-240a36f{right:-0.58%;}}/* Start custom CSS for html, class: .elementor-element-240a36f */.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}/* End custom CSS */
/* Start custom CSS */<style>
/* =========================================================
   Bento Grid – CSS (desktop + mobile + stable landscape)
   (Consolidated — no duplicate blocks; title-stack-first stagger)
   ========================================================= */

/* ---------- ROOT VARS ---------- */
:root{
  --radius:4px;
  --shadow:0 6px 16px rgba(0,0,0,.25);

  --gap:80px;                   /* default; grid overrides its own below */
  --small:90px;

  --dur:750ms;
  --dur-collapse:750ms;
  --fade:220ms;
  --ease:cubic-bezier(0.16,1,0.3,1);

  --grow-dur:1500ms;
  --fps-frame:16.666ms;
  --stagger-frames:5;
  --cw-step:calc(var(--stagger-frames) * var(--fps-frame));

  /* icon scale knobs */
  --iconScale-d-reset: 1;
  --iconScale-d-active: 1;
  --iconScale-m-reset: 1;
  --iconScale-m-active: 1;

  --icon-scale-desktop: 1;
  --icon-scale-closed:  1;
  --icon-scale-mobile-reset: 1;
  --icon-scale-mobile-active: 1;

  /* mobile layout knobs */
  --mobile-mini-scale: 1;
  --mobile-gap: 20px;
  --mobile-gap-active: 8px;

  /* content padding */
  --bento-content-pad: 28px;

  /* Typography (Poppins roles) */
  --bento-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --bento-wt-primary:   700;
  --bento-wt-secondary: 400;
  --bento-wt-text:      300;
  --bento-wt-accent:    500;

  --bento-fs-title: clamp(2rem, 1.05rem + 1.6vw, 3rem);
  --bento-fs-sub:   clamp(1.05rem, 0.95rem + 0.7vw, 1.25rem);
  --bento-fs-body:  1rem;
  --bento-fs-small: 0.875rem;
  --bento-fs-accent: calc(var(--bento-fs-body) * 1.06);
}

/* Page base */
body{ background:#111; color:#fff; font-family:system-ui }

/* ---------- GRID (3×3) ---------- */
.bento{
  --gap: 20px; /* keep this grid’s gap predictable */
  display:grid;
  grid:repeat(3,1fr)/repeat(3,1fr);
  gap:var(--gap);
  width:min(100%,780px);
  aspect-ratio:1;
  margin:40px auto;
  position:relative;
  transition:
    grid-template-columns var(--dur) var(--ease),
    grid-template-rows  var(--dur) var(--ease),
    gap var(--dur) var(--ease);
}
.bento[data-active][data-col="1"]{grid-template-columns:5fr 1fr 1fr}
.bento[data-active][data-col="2"]{grid-template-columns:1fr 5fr 1fr}
.bento[data-active][data-col="3"]{grid-template-columns:1fr 1fr 5fr}
.bento[data-active][data-row="1"]{grid-template-rows:5fr 1fr 1fr}
.bento[data-active][data-row="2"]{grid-template-rows:1fr 5fr 1fr}
.bento[data-active][data-row="3"]{grid-template-rows:1fr 1fr 5fr}

/* ---------- TILES ---------- */
.tile{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--radius);
  cursor:pointer;

  --cw-delay:0ms;
  transform:translate3d(0,0,0) scale(1);
  opacity:1;

  transition-property:transform, opacity;
  transition-duration:var(--grow-dur);
  transition-timing-function:var(--ease);
  transition-delay:var(--cw-delay);
  will-change:transform, opacity;
  backface-visibility:hidden;
}

/* vector from centre (r2c2) + clockwise index */
.tile[data-pos="r1c1"]{ --dx:-1; --dy:-1; --i:7 }
.tile[data-pos="r1c2"]{ --dx: 0; --dy:-1; --i:0 }
.tile[data-pos="r1c3"]{ --dx: 1; --dy:-1; --i:1 }
.tile[data-pos="r2c1"]{ --dx:-1; --dy: 0; --i:6 }
.tile[data-pos="r2c2"]{ --dx: 0; --dy: 0; }
.tile[data-pos="r2c3"]{ --dx: 1; --dy: 0; --i:2 }
.tile[data-pos="r3c1"]{ --dx:-1; --dy: 1; --i:5 }
.tile[data-pos="r3c2"]{ --dx: 0; --dy: 1; --i:4 }
.tile[data-pos="r3c3"]{ --dx: 1; --dy: 1; --i:3 }



/* OPEN → normal grid */
.bento[data-open] .tile{
  --cw-delay: calc(var(--i,0) * var(--cw-step));
  transition-delay: var(--cw-delay) !important;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* FLIP helpers */
.bento.measure .tile{ transition: none !important; transform: none !important; opacity: 1 !important; }
.bento.freeze{ transition: none !important; }
.bento.nodelay .tile{ transition-delay: 0ms !important; transition-duration: var(--dur) !important; }

/* ---------- Small icon squares ---------- */
.square{
  width:var(--small);
  aspect-ratio:1;
  background:#222;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  padding:8px;
  color:#fff;
  container-type:size;
  transition: transform var(--dur) var(--ease), opacity var(--fade) var(--ease);
  z-index:1;
}
.label{display:grid;gap:6px;text-align:center}
.label i{ font-size: 22px; line-height: 1; transition: transform var(--dur) var(--ease); transform: scale(1); }
.label span{ display:none; }

.bento[data-active] .tile:not(.active) .square{ transform:none; opacity:1; }
.tile.center .square{ width:var(--small)!important; height:auto!important; aspect-ratio:1!important; }

/* --- Growing panel background (neutral grey) --- */
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;           /* desktop/tablet card shape */
  margin:auto;
  transform:scale(0);
  transform-origin:center center;
  border-radius:var(--radius);
  background:var(--panel-bg, #2a2a2a); /* keep content white; buttons use --color */
  z-index:2;
  opacity:0;
  pointer-events:none;
}
.tile.active::before{ animation: expandSquare var(--dur) var(--ease) forwards; }
.tile.shrinking::before{ animation: collapseSquare var(--dur-collapse) var(--ease) forwards; }

@keyframes expandSquare{ from{ transform:scale(var(--seed,.2)); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes collapseSquare{ from{ transform:scale(1); opacity:1; } to{ transform:scale(var(--seed,.2)); opacity:0; } }

/* Hide icon label when expanded */
.tile.active .label{
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--fade) var(--ease), transform var(--fade) var(--ease);
}

/* ---------- CONTENT ---------- */
.content{
  position:absolute; inset:0;
  display:grid; place-content:center;
  padding:0; text-align:left;
  opacity:0; transform:translateY(8px);
  transition: opacity var(--fade) var(--ease), transform var(--fade) var(--ease);
  pointer-events:none;
  z-index:3;
  color:#fff; /* all window text white */
}
.tile.active .content{
  opacity:1; transform:translateY(0); pointer-events:auto;
  transition-delay: calc(var(--dur) * .45);
}
.tile.shrinking .content{ transition-delay:0ms; }

/* Inner padded box mirrors the panel geometry */
.bento#bentoGrid .content{
  font-family: var(--bento-font);
  font-weight: var(--bento-wt-text);
  font-size: var(--bento-fs-body);
  line-height: 1;
  color: inherit;

  display: grid;
  place-content: center;
  text-align: left;
  padding: 0;
  justify-items: start;
  align-items: start;
}
.bento#bentoGrid .content .panel-box{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;        /* desktop/tablet */
  margin: auto;
  padding: var(--bento-content-pad, 28px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--bento-flow-gap, 0.75em);
}

/* Headings + text roles */
.bento#bentoGrid .content h3{
  font-weight: var(--bento-wt-primary);
  font-size: var(--bento-fs-title);
  line-height: 1.2;
  margin: 0 0 0.35em;
}
.bento#bentoGrid .content h4{
  font-weight: var(--bento-wt-secondary);
  font-size: var(--bento-fs-sub);
  line-height: 1.2;
  margin: 0.5em 0 0.25em;
}
.bento#bentoGrid .content p,
.bento#bentoGrid .content li{
  font-weight: var(--bento-wt-text);
  font-size: var(--bento-fs-body);
  line-height: 1.55;
}
.bento#bentoGrid .content small{ font-size: var(--bento-fs-small); }

/* Buttons */
.bento#bentoGrid .content .btn,
.bento#bentoGrid .content .accent{
  font-weight: var(--bento-wt-accent);
  font-size: var(--bento-fs-accent);
}
.bento#bentoGrid .content .btn{
  background: var(--color) !important;
  border: 2px solid var(--color) !important;
  color:#111 !important;
}
.bento#bentoGrid .content .btn:hover,
.bento#bentoGrid .content .btn:focus-visible{ filter: brightness(0.92); outline: none; }
.bento#bentoGrid .content .btn.btn--outline{
  background: transparent !important;
  border: 2px solid var(--color) !important;
  color: var(--color) !important;
}

/* Utilities */
.bento#bentoGrid .content .u-primary   { font-weight: var(--bento-wt-primary); }
.bento#bentoGrid .content .u-secondary { font-weight: var(--bento-wt-secondary); }
.bento#bentoGrid .content .u-text      { font-weight: var(--bento-wt-text); }
.bento#bentoGrid .content .u-accent    { font-weight: var(--bento-wt-accent); }

.bento#bentoGrid .content .fs-xs{ font-size: 0.825rem; }
.bento#bentoGrid .content .fs-sm{ font-size: 0.925rem; }
.bento#bentoGrid .content .fs-md{ font-size: 1rem; }
.bento#bentoGrid .content .fs-lg{ font-size: 1.125rem; }
.bento#bentoGrid .content .fs-xl{ font-size: 1.35rem; }

/* Keep FA icons intact in buttons */
.bento .label i[class*="fa-"]{
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
}

/* Make links/buttons sit flush left */
.bento#bentoGrid .content .btn,
.bento#bentoGrid .content form,
.bento#bentoGrid .content ul,
.bento#bentoGrid .content ol{ justify-self: start; }

/* Tap highlight + focus styles */
.bento .tile, .bento .square, .bento .label, .bento .content a, .bento .content button{ -webkit-tap-highlight-color:transparent; }
.bento .content a, .bento .content button{ color:inherit; background-color:transparent; text-decoration:none; }
.bento .tile:focus{ outline:none; }
.bento .tile:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.7) inset, 0 0 0 2px rgba(255,255,255,.7);
  border-radius:var(--radius);
}
.bento .content a:focus-visible, .bento .content button:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.7); border-radius:6px;
}

/* ---------- per-tile colours (used by buttons) ---------- */
.tile[data-pos="r1c1"]{--color:#FF00FF}
.tile[data-pos="r1c2"]{--color:#FFFF00}
.tile[data-pos="r1c3"]{--color:#3c6}
.tile[data-pos="r2c1"]{--color:#39e}
.tile[data-pos="r2c2"]{--color:#a6c}
.tile[data-pos="r2c3"]{--color:#09c}
.tile[data-pos="r3c1"]{--color:#fb3}
.tile[data-pos="r3c2"]{--color:#9c0}
.tile[data-pos="r3c3"]{--color:#f44}

/* =========================================================
   MOBILE PORTRAIT (≤640px): decouple size from grid scale
   ========================================================= */
@media (max-width:640px){
  .bento{ gap:6px; }
  .bento .tile{ display:grid; place-items:center; }

  .bento .tile .square{
    width: var(--mini, var(--small)) !important;
    height: var(--mini, var(--small)) !important;
    min-width: var(--mini, var(--small)) !important;
    max-width: var(--mini, var(--small)) !important;
    min-height: var(--mini, var(--small)) !important;
    max-height: var(--mini, var(--small)) !important;
    aspect-ratio: 1 / 1 !important;
    transform: none !important; flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  .bento[data-open][data-active] .tile.active .square{
    opacity:0 !important; pointer-events:none !important;
  }

  /* portrait card = 2:3 */
  .tile.active::before,
  .tile.shrinking::before{
    inset:0; margin:auto; width:auto; height:100%;
    aspect-ratio:2 / 3 !important;
  }

  .bento{ gap: var(--mobile-gap, 6px) !important; }
  .bento[data-open][data-active]{ gap: var(--mobile-gap-active, var(--mobile-gap, 6px)) !important; }

  .bento[data-open]:not([data-active]) .label i{ transform: scale(var(--icon-scale-mobile-reset, 1)); }
  .bento[data-open][data-active] .tile:not(.active) .label i{ transform: scale(var(--icon-scale-mobile-active, 1)); }
  .bento[data-open][data-active] .tile:not(.active) .square{ overflow: visible; padding: 6px; }

  .bento .tile:not(.active) .square,
  .bento .tile.center .square,
  .bento[data-open][data-active] .tile:not(.active) .square{
    width:  calc(var(--mini, var(--small)) * var(--mobile-mini-scale, 1)) !important;
    height: calc(var(--mini, var(--small)) * var(--mobile-mini-scale, 1)) !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* portrait type scale for .u-text (body copy) */
  #bentoGrid.bento .content .u-text{
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* content box aspect in portrait (already set above) */
  .bento#bentoGrid .content .panel-box{ aspect-ratio: 2 / 3; }

  /* content padding scale */
  :root{ --bento-content-pad: 20px; }
}

/* ---------- Desktop icon sizing modes ---------- */
@media (min-width:641px){
  .bento[data-mode="open-reset"] .tile .square{
    width:  calc(var(--small) * var(--iconScale-d-reset)) !important;
    height: calc(var(--small) * var(--iconScale-d-reset)) !important;
    aspect-ratio:1/1 !important;
  }
  .bento[data-mode="open-active"] .tile:not(.active) .square{
    width:  calc(var(--small) * var(--iconScale-d-active)) !important;
    height: calc(var(--small) * var(--iconScale-d-active)) !important;
    aspect-ratio:1/1 !important;
  }
}

/* ===== TABLET CENTERING (641–1023px) ===== */
@media (min-width: 641px) and (max-width: 1023px){
  .bento-wrap{
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;

    --pad: 24px;
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    padding:
      max(var(--pad), var(--safe-top))
      max(var(--pad), var(--safe-right))
      max(var(--pad), var(--safe-bottom))
      max(var(--pad), var(--safe-left));
    box-sizing: border-box;
  }
  #bentoGrid.bento{ margin: 0 auto !important; }
}

/* =========================================================
   HARD OVERRIDE — Mobile LANDSCAPE (phones/tablets ≤900px tall)
   - Centers grid in a fixed stage sized by the short side
   - Portrait-like spacing before open
   - Icons capped so they never look huge
   - Open panel uses a 1:1 square card (per latest build)
   ========================================================= */
@media (max-height: 900px) and (orientation: landscape) and (pointer: coarse){

  /* knobs */
  :root{
    --ml-gap: 12px;
    --ml-iconMax: 88px;
    --ml-iconVmin: 23vmin;
  }

  .bento-wrap{
    --pad: 16px;
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);

    position: fixed !important;
    inset: 0 !important;
    z-index: 1;
    display: grid !important;
    place-items: center !important;
    padding:
      max(var(--pad), var(--safe-top))
      max(var(--pad), var(--safe-right))
      max(var(--pad), var(--safe-bottom))
      max(var(--pad), var(--safe-left));
    background: transparent;
  }

  #bentoGrid.bento{
    width:  min(
      calc(100svh - max(var(--pad),var(--safe-top))  - max(var(--pad),var(--safe-bottom))),
      calc(100svw - max(var(--pad),var(--safe-left)) - max(var(--pad),var(--safe-right)))
    ) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap: var(--ml-gap) !important;

    --mini: calc((100vmin - 2 * var(--ml-gap)) / 3);
  }

  #bentoGrid.bento[style*="height"]{
    max-height: calc(100svh - max(var(--pad),var(--safe-top)) - max(var(--pad),var(--safe-bottom))) !important;
  }

  #bentoGrid.bento .tile .square,
  #bentoGrid.bento .tile.center .square,
  #bentoGrid.bento[data-open][data-active] .tile:not(.active) .square{
    width:  min(var(--ml-iconVmin), var(--mini), var(--ml-iconMax)) !important;
    height: min(var(--ml-iconVmin), var(--mini), var(--ml-iconMax)) !important;
    aspect-ratio: 1 / 1 !important;
  }
  #bentoGrid.bento[data-open][data-active] .tile.active .square{
    opacity: 0 !important; pointer-events: none !important;
  }

  /* 1:1 panel & content box */
  #bentoGrid.bento[data-open][data-active] .tile.active::before{
    inset: 0 !important;
    margin: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    transform-origin: center center !important;
    background: var(--panel-bg, #2a2a2a) !important;
  }
  #bentoGrid.bento .content .panel-box{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: auto !important;
    transform: none !important;
  }

  /* landscape type scale (window content) */
  :root{
    --ml-title: clamp(1.6rem, 1.1rem + 2.6vw, 2.2rem);
    --ml-sub:   clamp(0.95rem, 0.8rem + 1.2vw, 1.2rem);
    --ml-body:  0.95rem;
    --ml-small: 0.85rem;
    --ml-cta:   calc(var(--ml-body) * 1.06);
  }
  #bentoGrid.bento .tile[data-pos] .content{
    font-size: var(--ml-body) !important;
    line-height: 1.35 !important;
  }
  #bentoGrid.bento .tile[data-pos] .content h3{
    font-size: var(--ml-title) !important;
    line-height: 1.35 !important;
  }
  #bentoGrid.bento .tile[data-pos] .content h4{
    font-size: var(--ml-sub) !important;
  }
  #bentoGrid.bento .tile[data-pos] .content small{
    font-size: var(--ml-small) !important;
  }
  #bentoGrid.bento .tile[data-pos] .content .btn{
    font-size: var(--ml-cta) !important;
  }
}
/* ==== STACK STAGGER — single source of truth ===================== */
/* timing knobs */
:root{
  --reveal-base: calc(var(--dur, 600ms) * .55); /* start when panel mostly grown */
  --stack-step: 200ms;                          /* gap between lines (incl. p/btn) */
  --stack-line-dur: 2400ms;                      /* each line animation duration   */
}

@keyframes bentoFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Every child of .title-stack is a "line" that staggers in order */
.bento#bentoGrid .tile.active .content.reveal .title-stack > *{
  opacity: 0;
  transform: translateY(16px);
  animation: bentoFadeUp var(--stack-line-dur) var(--ease) both;
}

/* up to 8 lines; add more if needed */
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(1){ animation-delay: calc(var(--reveal-base) + 0 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(2){ animation-delay: calc(var(--reveal-base) + 1 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(3){ animation-delay: calc(var(--reveal-base) + 2 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(4){ animation-delay: calc(var(--reveal-base) + 3 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(5){ animation-delay: calc(var(--reveal-base) + 4 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(6){ animation-delay: calc(var(--reveal-base) + 5 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(7){ animation-delay: calc(var(--reveal-base) + 6 * var(--stack-step)); }
.bento#bentoGrid .tile.active .content.reveal .title-stack > *:nth-child(8){ animation-delay: calc(var(--reveal-base) + 7 * var(--stack-step)); }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .bento#bentoGrid .tile.active .content.reveal .title-stack > *{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
/* === Landscape-only typography (phones/tablets in landscape) === */
@media (max-height: 900px) and (orientation: landscape) and (pointer: coarse){
  /* Tweak these to taste */
  :root{
    --land-fs-title: clamp(0.45rem, 0.45rem + 2.6vw, 2.3rem);
    --land-fs-sub:   clamp(0.45rem, 0.45rem + 1.2vw, 1.25rem);
    --land-fs-body:  0rem;
    --land-fs-small: 0.5rem;
    --land-fs-cta:   calc(var(--land-fs-body) * 1.06);
  }

  /* Apply only in landscape; leave portrait/desktop intact */
  #bentoGrid.bento .tile[data-pos] .content h3{
    font-size: var(--land-fs-title) !important;
    line-height: 1.3 !important;
  }
  #bentoGrid.bento .tile[data-pos] .content h4{
    font-size: var(--land-fs-sub) !important;
    line-height: 1 !important;
  }
  #bentoGrid.bento .tile[data-pos] .content .u-text,
  #bentoGrid.bento .tile[data-pos] .content p,
  #bentoGrid.bento .tile[data-pos] .content li{
    font-size: var(--land-fs-body) !important;
    line-height: 0 !important;
  }
  #bentoGrid.bento .tile[data-pos] .content small{
    font-size: var(--land-fs-small) !important;
  }
  #bentoGrid.bento .tile[data-pos] .content .btn,
  #bentoGrid.bento .tile[data-pos] .content .accent{
    font-size: var(--land-fs-cta) !important;
  }
}

@media (max-width:640px){
  /* tighter or looser stack lines on mobile portrait */
  #bentoGrid.bento .content .title-stack h3{
    line-height: 1.1 !important;  /* tweak this value */
  }

  /* optional: adjust the gap between lines in the stack */
  #bentoGrid.bento .content .title-stack{
    gap: 0.06em;  /* tweak spacing between lines */
  }
}

/* === DESKTOP TITLE-STACK SPACING — hard override (paste last) === */
@media (min-width:641px){
  /* Control spacing BETWEEN lines inside the stack */
  #bentoGrid.bento .tile .content .panel-box > section .title-stack{
    display: flex;
    flex-direction: column;
    gap: var(--ts-gap, 0.10em);          /* adjust line-to-line spacing */
  }

  /* Kill the global h3 margin so only the stack 'gap' applies */
  #bentoGrid.bento .tile .content .panel-box > section .title-stack > h3{
    margin: 0 !important;
    line-height: var(--ts-line, 1.06) !important;  /* per-line tightness */
  }

  /* Control the spacing AFTER the whole title stack (to p/button) */
  #bentoGrid.bento .content .panel-box{
    --bento-flow-gap: var(--ts-after, 0.9em);      /* stack → paragraph/button gap */
  }
}

/* Base modal (add once) */
.modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); z-index:999;
  -webkit-backdrop-filter:saturate(120%) blur(4px);
  backdrop-filter:saturate(120%) blur(4px);
}
.modal.is-open{ display:flex; }
.modal__dialog{
  position:relative;
  width:100%; max-width:min(720px,92vw);
  background:#1a1a1a; color:#fff; border-radius:12px;
  padding:24px; box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.modal__close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer;
}
/* Elementor adds this class when a popup opens */
html.dialog-prevent-scroll,
body.dialog-prevent-scroll{
  overflow: hidden !important;
  overscroll-behavior: contain;   /* prevent background bounce on mobile */
}

.contact-form-wrap{ position:relative; z-index:10; }
.showreel-bg{ position:relative; z-index:0; }
.showreel-bg video{ pointer-events:none; } /* clicks pass through *//* End custom CSS */