/* ============================================================
   JCI IMMERSIVE LEADERSHIP ACADEMY 2026

   Palette + type: Immersive Leadership Academy by JCI, Brand
   Guidelines (supplied 2026-07-21).
   Ripple motif + parent-brand body face: JCI Brand Guidelines
   v1.4, 18 Dec 2025.
   Section architecture mirrors jci.cc/events/global-youth-summit-2026/
   ============================================================ */

.ila{
  /* ILA primary */
  --black:#17132B;
  --magenta:#E6007E;
  --yellow:#EFC40F;
  --white:#FFFFFF;
  /* ILA secondary */
  --navy:#1F4789;
  --blue:#0097D7;
  /* ILA alternative */
  --teal:#57BCBC;

  /* Documented gradients */
  --grad-main:linear-gradient(100deg,#17132B 10%,#E6007E 50%,#EFC40F 90%);
  /* ---- Hosted assets. Swap these URLs, not the markup. ----
     ila-logo-white.svg ................ nav + footer wordmark
     ila-logo-inverted-scaled.png ...... hero logo, dark ground
     ila-logo-default-scaled.png ....... About section logo, light ground
     ila-ripple-faded-gradient.png ..... ripple motif, all three placements
     ila-patternband.svg .............. footer strip                        */
  --ripple:url("/wp-content/uploads/2026/08/ila-ripple-faded-gradient.png");
  --pat:url("/wp-content/uploads/2026/08/ila-patternband.svg");
  /* Text-safe variant: the Main Gradient's black stop matches the dark ground
     (1.00:1), so gradient-filled type drops the black and runs magenta to yellow.
     Lowest point measures 4.01:1, used only at display sizes. */
  --grad-text:linear-gradient(100deg,#E6007E 0%,#F0459B 30%,#EFC40F 95%);
  --grad-blue:linear-gradient(100deg,#1F4789 10%,#0097D7 90%);

  /* Derived neutrals */
  --ink:#17132B;
  --ink-70:rgba(23,19,43,.70);
  --ink-55:rgba(23,19,43,.55);
  --rule:rgba(23,19,43,.14);
  --paper:#FFFFFF;
  --paper-2:#F3FAF9;               /* light neutral used in the ILA guide */
  --on-dark-70:rgba(255,255,255,.72);
  --on-dark-45:rgba(255,255,255,.45);

  --display:"Zalando Sans SemiExpanded","Zalando Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1200px;
  --gut:clamp(20px,5vw,48px);
  --band:clamp(64px,9vw,132px);
  --r:4px;
}

.ila *,.ila *::before,.ila *::after{box-sizing:border-box}
/* Bricks Theme Styles and utility frameworks often set -webkit-text-fill-color
   on headings. That property overrides `color` at ANY specificity - an inline
   style attribute included - so a white heading can still paint dark. Make
   `color` authoritative inside the component; the gradient treatments below
   opt back out explicitly. */
.ila,.ila *{-webkit-text-fill-color:currentColor}
/* Headings must keep taking their colour from the band they sit in. A bare
   `h2{color:...}` from the theme would otherwise beat inheritance, because any
   direct rule outranks an inherited value however specific its source. */
.ila h1,.ila h2,.ila h3,.ila h4,.ila h5,.ila h6{color:inherit}
/* Automatic.css turns every <section> and its direct <div> into a flex column
   with a gap:
     section:where(:not(.bricks-shape-divider)){display:flex;...}
     section>div:where(:not(.bricks-shape-divider)){display:flex;align-items:flex-start;...}
   align-items:flex-start shrinks every block to its own content width, which
   breaks equal-width rows and leaves justify-content centring no free space to
   distribute. This layout is authored in normal block flow, so opt out.
   :where() contributes no specificity, so one class is enough to win. */
.ila section,.ila section > .wrap{display:block;gap:normal}
html:has(.ila){scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.ila{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
.ila img{max-width:100%;display:block}
.ila a{color:inherit}

.ila .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.ila .band{padding-block:var(--band)}
.ila .band--tight{padding-block:clamp(48px,6vw,84px)}
.ila .band--dark{background:var(--black);color:var(--white)}
.ila .band--wash{background:var(--paper-2)}

/* ---------- type ---------- */
.ila .eyebrow{
  font-family:var(--display);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 20px;display:flex;align-items:center;gap:12px;
}
.ila .eyebrow::after{content:"";height:1px;flex:1;background:currentColor;opacity:.35;max-width:80px}
/* Magenta on ILA Black measures 4.0:1, under WCAG AA for small text.
   ILA Teal is the guide's alternative colour and measures 8.0:1. */
.ila .band--dark .eyebrow,.ila .fee__amt span,.ila .tbl thead th{color:var(--teal)}

.ila .h2{
  font-family:var(--display);
  font-size:clamp(28px,4vw,46px);font-weight:400;line-height:1.14;
  letter-spacing:-.02em;margin:0 0 20px;max-width:21ch;
}
.ila .h2 strong{font-weight:800}
.ila .h3{font-family:var(--display);font-size:clamp(19px,2.3vw,25px);font-weight:700;line-height:1.28;letter-spacing:-.01em;margin:0 0 12px}
.ila .h4{font-family:var(--display);font-size:16px;font-weight:700;line-height:1.35;margin:0 0 8px}
.ila .lede{font-size:clamp(17px,1.7vw,21px);font-weight:300;line-height:1.55;color:var(--ink-70);margin:0 0 20px;max-width:62ch}
.ila .band--dark .lede{color:var(--on-dark-70)}
.ila .p{font-size:16px;line-height:1.65;color:var(--ink-70);margin:0 0 16px;max-width:66ch}
.ila .band--dark .p{color:var(--on-dark-70)}
.ila .small{font-size:13px;line-height:1.6;color:var(--ink-55)}

/* ---------- buttons ---------- */
.ila .btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}
.ila .btn:hover{transform:translateY(-2px)}
.ila .btn--grad{background:var(--grad-main);background-size:150% 100%;background-position:0% 50%;color:var(--white);transition:transform .18s ease,background-position .5s ease}
.ila .btn--grad:hover{background-position:100% 50%}
.ila .btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.ila .btn--ghost:hover{border-color:var(--magenta);color:var(--magenta)}
.ila .band--dark .btn--ghost{color:var(--white);border-color:rgba(255,255,255,.3)}
.ila .band--dark .btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.06);color:var(--white)}
.ila .btn--yellow{background:var(--yellow);color:var(--black)}
.ila .btn--yellow:hover{background:#f7d33c}
.ila .btn-row{display:flex;flex-wrap:wrap;gap:14px}

.ila a:focus-visible,.ila button:focus-visible,.ila summary:focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px;
}


/* ============================================================ NAV */
.ila .nav{position:sticky;top:0;z-index:60;background:rgba(23,19,43,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
.ila .nav__in{display:flex;align-items:center;gap:24px;height:70px;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.ila .nav__mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--white);flex-shrink:0}
.ila .nav__mark .ila-logo{height:32px;width:auto;color:var(--white)}
.ila .nav__mark .rule{width:1px;height:26px;background:rgba(255,255,255,.28)}
.ila .nav__mark .jci{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--on-dark-45)}
.ila .nav__links{display:flex;gap:24px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.ila .nav__links a{font-family:var(--display);font-size:12.5px;font-weight:500;color:var(--on-dark-70);text-decoration:none;transition:color .15s}
.ila .nav__links a:hover{color:var(--white)}
@media(max-width:980px){.ila .nav__links{display:none}.ila .nav__cta{margin-left:auto}}
@media(max-width:520px){.ila .nav__mark .rule,.ila .nav__mark .jci{display:none}}

/* ============================================================ HERO */
.ila .hero{position:relative;background:var(--black);color:var(--white);overflow:hidden}
.ila .hero__ripple{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:min(900px,94vw);aspect-ratio:1;opacity:.7;pointer-events:none;
  /* inside the hero, not bleeding past it: the fade ends the graphic
     rather than the hero's overflow clip */
  background:var(--ripple) center/contain no-repeat;
}
/* Scrim: keeps the ripple off the copy column so type sits on flat ground */
.ila .hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(95deg,#17132B 0%,#17132B 30%,rgba(23,19,43,.78) 50%,rgba(23,19,43,0) 76%);
}
@media(max-width:900px){
  .ila .hero__ripple{right:-38%;opacity:.42}
  .ila .hero::after{background:linear-gradient(180deg,rgba(23,19,43,.9) 0%,rgba(23,19,43,.72) 60%,rgba(23,19,43,.9) 100%)}
}
.ila .hero__in{position:relative;z-index:3;padding-block:clamp(64px,10vw,120px) clamp(40px,5vw,64px)}
.ila .hero__logo{width:min(390px,74vw);margin:0 0 clamp(32px,5vw,52px)}
.ila .hero h1{
  color:var(--white);
  font-family:var(--display);
  font-size:clamp(48px,9.6vw,104px);font-weight:900;line-height:.95;letter-spacing:-.035em;margin:0 0 26px;
}
.ila .hero h1 .g{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ila .hero h1 .g{color:var(--yellow);-webkit-text-fill-color:var(--yellow);background:none}
}
.ila .hero__sub{font-size:clamp(18px,2.1vw,23px);font-weight:400;line-height:1.5;color:rgba(255,255,255,.88);max-width:38ch;margin:0 0 36px}
.ila .hero__note{margin-top:26px;font-size:13px;color:rgba(255,255,255,.66);letter-spacing:.04em}

.ila .facts{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(4,1fr)}
.ila .fact{padding:26px 0 34px;border-right:1px solid rgba(255,255,255,.16);position:relative}
.ila .fact:last-child{border-right:0}
.ila .fact::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--grad-main)}
.ila .fact__k{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);margin:0 0 8px}
.ila .fact__v{font-family:var(--display);font-size:clamp(15px,1.7vw,19px);font-weight:600;line-height:1.25;margin:0;padding-right:16px}
@media(max-width:760px){
  .ila .facts{grid-template-columns:repeat(2,1fr)}
  .ila .fact{padding:20px 0 24px}
  .ila .fact:nth-child(2n){border-right:0}
  .ila .fact:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
}

/* ============================================================ GRIDS */
.ila .grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px}
.ila .grid--4{grid-template-columns:repeat(4,1fr)}
.ila .grid--3{grid-template-columns:repeat(3,1fr)}
.ila .grid--2{grid-template-columns:repeat(2,1fr)}
.ila .cell{background:var(--paper);padding:32px 26px}
.ila .band--wash .cell{background:var(--paper-2)}
.ila .cell__n{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--magenta);margin:0 0 16px}
.ila .cell p{font-size:14.5px;line-height:1.6;color:var(--ink-70);margin:0}
@media(max-width:1000px){.ila .grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.ila .grid--4,.ila .grid--3,.ila .grid--2{grid-template-columns:1fr}}

.ila .split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){.ila .split{grid-template-columns:1fr}}

/* ============================================================ DAYS */
.ila .day{display:grid;grid-template-columns:130px minmax(0,1fr);gap:clamp(20px,4vw,56px);padding-block:clamp(32px,4vw,48px);border-top:1px solid var(--rule)}
.ila .day:last-of-type{border-bottom:1px solid var(--rule)}
.ila .day__n{
  font-family:var(--display);font-size:clamp(42px,5.2vw,66px);font-weight:800;line-height:.9;letter-spacing:-.05em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.ila .day__label{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin-top:12px}
.ila .day h3{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
.ila .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.ila .tags li{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:6px 13px;border:1px solid var(--rule);border-radius:100px;color:var(--ink-70)}
@media(max-width:700px){.ila .day{grid-template-columns:1fr;gap:16px}.ila .day__label{margin-top:6px}}

.ila .ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ila .ticks li{position:relative;padding-left:28px;font-size:16px;line-height:1.5}
.ila .ticks li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%;background:var(--grad-main)}

.ila .panel{border:1px solid rgba(255,255,255,.2);padding:clamp(28px,4vw,52px);position:relative;overflow:hidden}
.ila .panel__mark{
  position:absolute;right:0;bottom:0;z-index:0;
  width:clamp(200px,42%,300px);aspect-ratio:1;
  opacity:.65;pointer-events:none;
  /* contain and fully inside the panel: the fade ends the graphic,
     not the panel's overflow clip */
  background:var(--ripple) center/contain no-repeat;
}
/* keep panel copy above the mark, which is absolutely positioned */
.ila .panel > :not(.panel__mark){position:relative;z-index:1}

.ila .profile{border-top:3px solid transparent;border-image:var(--grad-main) 1;padding-top:24px}
.ila .profile:nth-child(2){border-image:var(--grad-blue) 1}
.ila .profile:nth-child(3){border-image:linear-gradient(100deg,#E6007E,#EFC40F) 1}

/* ============================================================ FEE */
.ila .fee{background:var(--black);color:var(--white);padding:clamp(30px,4vw,48px);position:relative;overflow:hidden}
.ila .fee::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-main)}
.ila .fee__amt{font-family:var(--display);font-size:clamp(40px,5.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 6px}
.ila .fee__amt span{font-size:.38em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:10px}
/* ---------- trainer team ---------- */
.ila .strip-rule{height:22px;background:var(--black) var(--pat) repeat-x left bottom;background-size:auto 22px}
.ila .trainers{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px}
.ila .trainer{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(22px,3vw,42px);background:var(--paper);padding:clamp(24px,3vw,38px)}
.ila .trainer__ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--black)}
.ila .trainer__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--grad-main)}
.ila .trainer__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ila .trainer__name{font-family:var(--display);font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 6px}
.ila .trainer__title{font-family:var(--display);font-size:13px;font-weight:600;line-height:1.45;color:var(--magenta);margin:0 0 16px;max-width:52ch}
.ila .trainer__more{border-bottom:0;border-top:1px solid var(--rule);margin-top:4px}
.ila .trainer__more summary{font-size:13.5px;padding:16px 34px 0 0;color:var(--ink-70)}
.ila .trainer__more summary::after{width:9px;height:9px;right:6px;top:calc(50% + 8px)}
.ila .trainer__more > div{padding:16px 0 4px}
.ila .trainer__more .p{font-size:15px;max-width:74ch}
@media(max-width:760px){
  .ila .trainer{grid-template-columns:1fr;gap:20px}
  .ila .trainer__ph{max-width:230px}
}
.ila .pkgs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
.ila .pkg{background:var(--paper-2);padding:26px 24px}
.ila .pkg__k{font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);margin:0 0 12px}
@media(max-width:700px){.ila .pkgs{grid-template-columns:1fr}}
.ila .hotel{margin-top:40px;padding:clamp(24px,3vw,34px);border:1px solid var(--rule);background:var(--paper-2)}
.ila .todo{display:inline-block;padding:2px 8px;margin-left:6px;border-radius:2px;background:var(--yellow);color:var(--black);font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
.ila .fee__head{font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:30px 0 0}
.ila .fee__inc{list-style:none;padding:0;margin:12px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.ila .fee__inc li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.ila .fee__inc b{font-weight:600;color:var(--white)}
.ila .fee__inc span{font-family:var(--display);color:var(--teal);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.ila .fee__inc .no{color:rgba(255,255,255,.35)}

/* ============================================================ TABLE */
.ila .tbl{width:100%;border-collapse:collapse;margin-top:40px;font-size:14.5px}
.ila .tbl thead th{font-family:var(--display);text-align:left;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:0 20px 14px 0;border-bottom:1px solid rgba(255,255,255,.26)}
.ila .tbl td{padding:20px 20px 20px 0;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top;color:var(--on-dark-70);line-height:1.55}
.ila .tbl td:first-child{font-family:var(--display);color:var(--white);font-weight:700;width:22%}
.ila .tbl td:last-child{padding-right:0;color:var(--teal)}
@media(max-width:820px){
  .ila .tbl,.ila .tbl tbody,.ila .tbl tr,.ila .tbl td{display:block;width:100%}
  .ila .tbl thead{display:none}
  .ila .tbl tr{border-bottom:1px solid rgba(255,255,255,.18);padding-block:20px}
  .ila .tbl td{border:0;padding:0 0 8px}
  .ila .tbl td:first-child{width:auto;font-size:17px;margin-bottom:6px}
  .ila .tbl td:last-child::before{content:"Outcome: ";font-weight:700}
}

/* ============================================================ QUOTE */
.ila .quote{text-align:center;max-width:900px;margin:0 auto}
.ila .quote blockquote{font-family:var(--display);font-size:clamp(22px,3.2vw,36px);line-height:1.32;font-weight:400;margin:0 0 28px;letter-spacing:-.015em;color:var(--ink)}
.ila .quote figcaption{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.ila .quote__ripple{
  width:clamp(130px,16vw,170px);aspect-ratio:1;margin:0 auto 26px;
  /* contain, not a zoom: the faded artwork must show whole or the fade is clipped */
  background:var(--ripple) center/contain no-repeat;
}

.ila .values{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:28px 0 0}
.ila .values li{font-family:var(--display);padding:10px 20px;border:1px solid var(--rule);border-radius:100px;font-size:13.5px;font-weight:700;letter-spacing:.03em}

/* ============================================================ FAQ */
/* One measure for every question row, so the chevrons line up. max-width (not
   width) keeps it fluid below 880px. */
.ila .faq-group{margin-top:44px;max-width:880px}
.ila .faq-group__t{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 6px;padding-bottom:14px;border-bottom:3px solid transparent;border-image:var(--grad-main) 1}
.ila details{border-bottom:1px solid var(--rule)}
.ila summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.4}
.ila summary::-webkit-details-marker{display:none}
.ila summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2px solid var(--magenta);border-bottom:2px solid var(--magenta);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.ila details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.ila details > div{padding:0 44px 24px 0}
.ila details p{font-size:15px;line-height:1.68;color:var(--ink-70);margin:0 0 12px;max-width:74ch}
.ila details p:last-child{margin-bottom:0}
.ila details ul{margin:0 0 12px;padding-left:20px;font-size:15px;line-height:1.68;color:var(--ink-70)}
.ila details li{margin-bottom:6px}

/* ============================================================ CLOSE + FOOT */
.ila .close{text-align:center}
.ila .close .h2{margin-inline:auto;max-width:17ch}
.ila .close .lede{margin-inline:auto;text-align:center}
.ila .close .btn-row{justify-content:center}
.ila .close .eyebrow{justify-content:center}
/* The eyebrow rule is a trailing flourish; hanging off one side of centred
   text it reads as a mistake, so drop it in this section only. */
.ila .close .eyebrow::after{display:none}

.ila .foot{background:var(--black);color:var(--on-dark-45);padding-block:44px;font-size:12.5px}
/* Pattern band. Tile aspect is exactly 9:1, so the height is fixed in px
   and the width is left to resolve from it. Never scale both axes. */
.ila .foot__strip{
  height:36px;
  background-color:var(--black);
  background-image:var(--pat);
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto 36px;
}
@media(max-width:700px){
  .ila .foot__strip{height:28px;background-size:auto 28px}
}
.ila .foot__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.ila .foot a{color:var(--on-dark-70)}
.ila .foot .ila-logo{height:36px;width:auto;color:var(--white)}

/* Nothing is hidden by the stylesheet alone. The script hides only the blocks
   that are still below the fold when it runs, so content that has already been
   painted can never be pulled back out of view - and if the script never runs
   at all, the page is simply static rather than blank. */
.ila .reveal{transition:opacity .6s ease-out,transform .6s ease-out}
.ila .reveal.ila-hide{opacity:0;transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){
  html:has(.ila){scroll-behavior:auto}
  .ila .reveal{opacity:1!important;transform:none!important;transition:none}
  .ila .btn:hover{transform:none}
}