/*
 * I Love Sai — brand design system (official indigo + orange, Inter)
 * Applies the I Love Sai design system to WordPress: apply these classes
 * to blocks via the editor's "Additional CSS Class(es)" field, or use them
 * inside the block templates/patterns that ship with this theme.
 */

:root{
  --ilovesai-bg:#ffffff;
  --ilovesai-bg-soft:#f4f5fb;
  --ilovesai-surface:#ffffff;
  --ilovesai-ink:#2e3192;
  --ilovesai-ink-soft:#6d6e71;
  --ilovesai-line: rgba(24,27,82,0.12);
  --ilovesai-terracotta:#2e3192;
  --ilovesai-terracotta-deep:#1f2266;
  --ilovesai-maroon:#2e3192;
  --ilovesai-gold:#2e3192; /* legacy token name; now the official indigo */
  --ilovesai-shadow: 0 12px 32px -20px rgba(24,27,82,0.28);
}
/* Official I Love Sai palette (October 2026): Indigo #2E3192 primary,
 * Orange #F4A125 for calls to action only, Gray #6D6E71 body text, white
 * background, Inter throughout. Green #4FAF50 and Magenta #E5177D are for
 * the logo only. No black anywhere; no automatic dark mode. Legacy token
 * names (terracotta, maroon, gold) are kept so older rules keep working,
 * but they now all resolve to indigo. */
:root{ color-scheme: light; }

/* ---------- box-model safety net ----------
 * Root cause of the "alignment issue" report: several form fields use
 * width:100% together with their own padding/border (the contact/signup
 * form's inputs, selects and textareas; the location-search box). The
 * CSS default box-sizing is content-box, which means padding and border
 * are added ON TOP OF that 100% width rather than eaten out of it — so
 * those fields quietly rendered ~30px wider than their container/grid
 * cell, which pushed the whole page into horizontal overflow. On a
 * screenshot taken without scrolling right, every section (the mission
 * quote card, the form card below it, etc.) then reads as "cut off" at
 * the same right-hand edge, because the viewport's scrollable width grew
 * past what was visible — not because those other sections were
 * individually misaligned. A universal border-box reset is the standard
 * fix (used by virtually every modern CSS reset) and prevents this same
 * class of bug from recurring anywhere else width:100%-plus-padding gets
 * used later.
 */
*, *::before, *::after{ box-sizing:border-box; }

/* ---------- layout safety net ----------
 * Belt-and-suspenders alongside theme.json's settings.layout: guarantees
 * every wide/full-width section is centered with a sane max-width and
 * breathing room on the sides, even if a page/pattern ever overrides the
 * global content-size vars. Without this, sections render edge-to-edge
 * and text pins to the left edge of the viewport on wide screens.
 */
.wp-block-group.alignwide,
.wp-block-group.alignfull > .alignwide{
  max-width: min(var(--wp--style--global--wide-size, 1280px), 100% - 2rem);
  margin-left:auto; margin-right:auto;
}
.wp-block-group.alignfull{ max-width:none; }
/* The mobile overrides for .ilovesai-mission / .ilovesai-band /
   .ilovesai-impact (and the alt-teaser one) used to live in a media
   query right here. But CSS breaks a tie in specificity by whichever
   rule comes LAST in the file, regardless of which media query matches
   — and the unconditional desktop padding for those same selectors sits
   further down this file at equal (single-class) specificity, so it was
   silently winning even on mobile and these overrides never actually
   applied: those three sections have been rendering at full desktop
   padding (40–44px per side) on phones this whole time. Moved to the
   very end of this file, after every rule they need to beat, so they
   actually take effect now. See the bottom of this file. */

/* ---------- section rhythm ----------
 * Alternating tone + generous, consistent vertical spacing between
 * homepage sections so the page reads as distinct, breathing sections
 * rather than one continuous left-pinned column of text.
 */
.ilovesai-hero,
.ilovesai-mission,
.ilovesai-teaser,
.ilovesai-band,
.ilovesai-impact{ margin-bottom:8px; }
.ilovesai-mission,
.ilovesai-teaser--alt,
.ilovesai-band,
.ilovesai-impact{ margin-top:8px; }

/* ---------- shared type ---------- */
.ilovesai-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.76rem; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ilovesai-gold); margin-bottom:22px;
}
.ilovesai-eyebrow::before{content:""; width:22px; height:1px; background:var(--ilovesai-gold); display:inline-block;}

.ilovesai-btn{
  display:inline-block; padding:14px 26px; border-radius:6px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; text-decoration:none;
  font-size:0.95rem; letter-spacing:0.01em;
  background:var(--ilovesai-terracotta); color:#fff;
  /* Every button reserves the same 1.5px border box, transparent by
   * default, so a filled and an outline ("ghost") button are always
   * exactly the same size — only --ghost recolors the border, nothing
   * ever adds one. Without this, ghost buttons rendered ~3px taller and
   * wider than filled ones sitting right next to them. */
  border:1.5px solid transparent; box-sizing:border-box;
}
.ilovesai-btn:hover{background:var(--ilovesai-terracotta-deep); color:#fff;}
.ilovesai-btn--ghost{background:none; border-color:var(--ilovesai-line); color:var(--ilovesai-ink);}
.ilovesai-btn--ghost:hover{border-color:var(--ilovesai-terracotta); color:var(--ilovesai-terracotta-deep); background:none;}
.ilovesai-btn--light{background:#f4f5fb; color:var(--ilovesai-maroon);}

/* When ilovesai-btn/--ghost land on a Button block's OUTER wrapper div
 * (WordPress puts the block's className there, not on the link), the
 * link inside is what actually paints the visible fill — and WordPress's
 * own global button style ("wp-element-button") always gives that link
 * its own solid background, regardless of our "ghost = no fill" rule on
 * the div around it. That's what made every "ghost" button render solid
 * filled instead of outlined. Forcing the link to inherit its look from
 * the div it's actually inside fixes this — including on hover, since
 * "inherit" tracks the parent's current value live. */
.wp-block-button.ilovesai-btn > .wp-block-button__link{
  display:block; width:100%; height:100%; box-sizing:border-box;
  background:inherit; color:inherit; border:0; padding:0;
  border-radius:inherit; font:inherit; letter-spacing:inherit; text-decoration:inherit;
  outline:none; box-shadow:none;
}
/* The focus ring is drawn on the OUTER div (the element with the button's
 * real visible size) rather than the inner link. The link's own box can
 * end up sized to just its text in some flex contexts — drawing the ring
 * there produced a small dark box hugging the label instead of a ring
 * around the whole button. :focus-within promotes the link's focus up to
 * its parent, so the ring always traces the actual button, and the link's
 * own outline is suppressed above so there's never a second, mismatched
 * ring underneath it. */
.ilovesai-btn:focus-within{
  outline:2px solid var(--ilovesai-terracotta); outline-offset:2px;
}
.ilovesai-btn--light:hover{background:#fff; color:var(--ilovesai-maroon);}

/* ---------- header / nav ----------
 * The site has 11 top-level pages, which cannot fit on one line next to a
 * logo and a Donate button at any realistic width — trying to forces a
 * wrap that knocks the Donate button onto its own row. Instead the menu
 * is always the compact toggle (see "overlayMenu":"always" in
 * parts/header.html), so the header itself is always exactly one row,
 * on every screen size, no matter how many pages are ever added.
 */
.ilovesai-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--ilovesai-line);
}
.ilovesai-header img.ilovesai-logo{ height:52px; width:auto; }
.ilovesai-header .wp-block-buttons{ flex-shrink:0; }

/* Menu dropdown — plain <details>/<summary>, not the WordPress
 * navigation block. The block's built-in "always show a toggle" mode
 * renders its open panel as an internal modal/dialog that turned out to
 * behave unpredictably (wrong position, page content bleeding through,
 * a stray focus box, its own scrollbar) and couldn't be reliably fixed
 * from the outside with CSS alone. <details> is a native, universally
 * supported HTML control: the browser handles opening/closing and
 * keyboard access, so there's no framework behavior to fight — what you
 * see in this CSS is genuinely everything that renders. */
.ilovesai-menu{ position:relative; }
.ilovesai-menu__toggle{
  display:flex; align-items:center; gap:9px; width:fit-content;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:0.9rem; letter-spacing:0.02em;
  color:var(--ilovesai-ink); border:1.5px solid var(--ilovesai-line); border-radius:6px;
  padding:9px 16px; cursor:pointer; list-style:none; user-select:none;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.ilovesai-menu__toggle::-webkit-details-marker{ display:none; }
.ilovesai-menu__toggle svg{ transition:transform 0.15s ease; flex-shrink:0; }
.ilovesai-menu[open] .ilovesai-menu__toggle svg{ transform:rotate(180deg); }
.ilovesai-menu__toggle:hover{ border-color:var(--ilovesai-terracotta); color:var(--ilovesai-terracotta-deep); }
.ilovesai-menu__toggle:focus-visible{ outline:2px solid var(--ilovesai-terracotta); outline-offset:2px; }

.ilovesai-menu__panel{
  position:absolute; top:calc(100% + 10px); right:0;
  display:flex; flex-direction:column;
  width:260px; max-width:min(85vw, 300px);
  background:var(--ilovesai-surface);
  border:1px solid var(--ilovesai-line); border-radius:10px;
  box-shadow:0 24px 48px -20px rgba(24,27,82,0.32);
  padding:6px; z-index:200;
}
.ilovesai-menu__panel a{
  display:block; padding:11px 14px; border-radius:6px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.98rem; font-weight:500;
  color:var(--ilovesai-ink); text-decoration:none;
}
.ilovesai-menu__panel a:hover{ color:var(--ilovesai-terracotta-deep); background:var(--ilovesai-bg-soft); }
.ilovesai-menu__panel a:focus-visible{ outline:2px solid var(--ilovesai-terracotta); outline-offset:-2px; border-radius:6px; }

/* ---------- hero ---------- */
.ilovesai-hero{
  padding:56px 0; position:relative;
  background:
    radial-gradient(ellipse 60% 70% at 82% 20%, rgba(46,49,146,0.07), transparent 60%),
    radial-gradient(ellipse 50% 60% at 8% 90%, rgba(46,49,146,0.08), transparent 60%);
}
.ilovesai-hero-mark{ position:relative; }
.ilovesai-hero-mark::before{
  content:""; position:absolute; inset:-8%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(46,49,146,0.10) 0%, rgba(46,49,146,0.06) 45%, transparent 72%);
}
.ilovesai-hero-mark img{ filter:drop-shadow(0 18px 30px rgba(24,27,82,0.14)); }
.ilovesai-hero h1{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.18; letter-spacing:-0.01em; }
.ilovesai-hero h1 em{ color:var(--ilovesai-terracotta-deep); font-style:italic; }
.ilovesai-hero p.ilovesai-lede{ margin-top:22px; max-width:50ch; font-size:1.1rem; color:var(--ilovesai-ink-soft); }
.ilovesai-hero-signature{
  margin-top:18px; padding-left:18px; border-left:2px solid var(--ilovesai-gold);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-size:1.2rem; line-height:1.5;
  color:var(--ilovesai-terracotta-deep); max-width:46ch;
}

.ilovesai-pillars{ display:flex; margin-top:40px; border-top:1px solid var(--ilovesai-line); flex-wrap:wrap; }
.ilovesai-pillar{ flex:1; min-width:120px; padding:20px 20px 0 0; border-right:1px solid var(--ilovesai-line); margin-right:20px; }
.ilovesai-pillar:last-child{ border-right:none; margin-right:0; }
.ilovesai-pillar .num{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-size:0.82rem; color:var(--ilovesai-gold); display:block; margin-bottom:6px; }
.ilovesai-pillar b{ display:block; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ilovesai-ink); margin-bottom:4px; }
.ilovesai-pillar span.desc{ font-size:0.86rem; color:var(--ilovesai-ink-soft); }

/* ---------- program cards ---------- */
.ilovesai-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px;
  background:transparent; border:none;
}
/* auto-fit is normally the right call — it fits as many columns as the
 * space allows and lets the last row be however many cards are left
 * over. The problem is specifically 5-card grids ("The I Love Sai Way,"
 * plus the same 5-card layout reused on Become a Volunteer and Serve
 * Humanity): at typical desktop widths auto-fit lands on 4 columns,
 * which always strands exactly 1 card alone on its own row — no matter
 * how wide or narrow the window is, 5 never divides evenly by anything
 * except 1 or 5. Forcing 5 explicit columns fits every card on one row
 * at desktop width; below that it steps to 3 (a 3+2 split, which reads
 * as a deliberate pair rather than an orphan) and then to 1 on phones. */
.ilovesai-cards--5up{ grid-template-columns:repeat(5, 1fr); }
@media (max-width:1080px){ .ilovesai-cards--5up{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){ .ilovesai-cards--5up{ grid-template-columns:1fr; } }
/* Same reasoning for the 6-card Contact page grid: auto-fit can land on
 * 5 or 4 columns at common widths, stranding 1 or 2 cards. 3 columns
 * (3+3) at desktop and 2 (2+2+2) at tablet both divide evenly. */
.ilovesai-cards--6up{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:780px){ .ilovesai-cards--6up{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .ilovesai-cards--6up{ grid-template-columns:1fr; } }
.ilovesai-card{
  display:block; background:var(--ilovesai-surface); padding:30px 26px; border-radius:10px;
  border:1px solid var(--ilovesai-line); box-shadow:var(--ilovesai-shadow);
  border-top:3px solid var(--ilovesai-terracotta);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration:none; color:inherit;
}
/* Cards on Contact Us are real links (they jump to and pre-fill the form
 * below); cards elsewhere (About, Serve Humanity, etc.) are plain divs.
 * Both share the same look — only the ones that are actually clickable
 * get a focus ring and the "→" call-to-action line. */
a.ilovesai-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(24,27,82,0.35); }
a.ilovesai-card:focus-visible{ outline:2px solid var(--ilovesai-terracotta); outline-offset:3px; }
.ilovesai-card__cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.86rem; font-weight:600;
  color:var(--ilovesai-terracotta-deep);
}
a.ilovesai-card:hover .ilovesai-card__cta{ color:var(--ilovesai-terracotta); }
.ilovesai-card .tag{
  display:inline-block; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.7rem; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--ilovesai-gold); margin-bottom:14px;
}
.ilovesai-card h3{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.14rem; margin-bottom:10px; line-height:1.3; }
.ilovesai-card p{ font-size:0.94rem; color:var(--ilovesai-ink-soft); margin:0; }
.ilovesai-card .meta{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--ilovesai-line);
  font-size:0.82rem; color:var(--ilovesai-ink-soft); font-weight:500;
}
.ilovesai-card-icon{
  width:52px; height:52px; border-radius:50%; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:linear-gradient(140deg, var(--ilovesai-terracotta), var(--ilovesai-maroon));
  color:#fff; box-shadow:0 8px 18px -8px rgba(46,49,146,0.55);
}
.ilovesai-card-icon svg{ width:26px; height:26px; }

/* ---------- mission / pull-quote ---------- */
.ilovesai-mission{ background:var(--ilovesai-bg-soft); padding:56px 40px; border-radius:16px; box-shadow:var(--ilovesai-shadow); }
.ilovesai-mission blockquote{
  margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--ilovesai-ink); line-height:1.45; max-width:34ch;
}
/* These target the <p> inside the blockquote, not the blockquote itself.
 * The blockquote also wraps the <cite> caption below the quote — a
 * ::before/::after on the blockquote lands at the very start/end of ALL
 * its content, so the closing quote mark was rendering after the cite
 * line instead of right after the sentence it's meant to close. */
.ilovesai-mission blockquote p::before{ content:"\201C"; color:var(--ilovesai-terracotta); }
.ilovesai-mission blockquote p::after{ content:"\201D"; color:var(--ilovesai-terracotta); }
.ilovesai-mission cite{
  display:block; margin-top:18px; font-style:normal; font-size:0.84rem; color:var(--ilovesai-ink-soft);
  font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
}

/* ---------- teaser sections (homepage section previews) ---------- */
.ilovesai-teaser{
  padding:64px 0; border-top:1px solid var(--ilovesai-line);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start;
}
/* Nudge the icon+heading column down so its heading lines up with the
 * first line of body text on the right, instead of both columns being
 * vertically centered against each other — with align-items:center that
 * gap changed with every paragraph's length, which read as inconsistent
 * spacing from one section to the next. A small left gutter too: without
 * it the icon sits flush against whatever's to its left — the page edge
 * on a plain row, the soft card's rounded corner on an "alt" row — which
 * reads as cramped, especially obvious against the card's visible edge.
 * It's on this shared rule, not the alt variant alone, so every row gets
 * the identical gutter and they stay aligned to each other. */
.ilovesai-teaser__head{ padding-top:6px; padding-left:16px; }
@media (max-width:780px){ .ilovesai-teaser{ grid-template-columns:1fr; gap:20px; } }
/* The "alt" rows get inset padding so their soft background reads as a
 * card rather than a full-bleed strip. But that padding was pushing the
 * icon+heading column 40px to the right compared to every plain row next
 * to it — since teasers alternate plain/alt down the page, the row of
 * icons visibly zig-zagged left/right instead of sitting in one straight
 * line. The matching negative margin lets the soft card bleed outward by
 * the same amount, so the icon's actual x-position stays identical on
 * every row regardless of background style. */
/* Matches ".alignwide" on specificity (2 classes) so this rule actually
 * overrides the safety-net rule above (same max-width/margin properties),
 * instead of silently losing to it on source order.
 *
 * A first attempt at this "bleed the card outward by its own padding"
 * effect used a FIXED negative margin (margin:8px -40px) instead of
 * centering normally. That turns out to be unsafe at almost every screen
 * size, not just mobile: once both margins are fixed (not auto), the box
 * is positioned margin-left away from the container's own left edge —
 * not from wherever a centered box would have sat — so a -40px margin
 * put the card's left edge a real 40px off the LEFT of the viewport at
 * every width, including ordinary desktop widths (confirmed by measuring
 * its rendered position: left edge at -40px, not the ~120px-in it should
 * have been). It was invisible on a normal desktop screen only because
 * the clipped sliver happened to be the same cream color as the page
 * background; on a narrow phone viewport the clipping ate into real
 * content instead and was obvious.
 *
 * This version never overrides margin at all — margin stays auto (normal
 * centering, exactly like every other alignwide section) — and instead
 * grows max-width by twice a "bleed" amount, clamped with min() to
 * whatever gutter the safety-net rule actually left on each side. That
 * gutter is a flat 1rem (16px) any time the box is under its 1280px cap
 * (nearly every phone/tablet/laptop), and grows on wider screens. Padding
 * is set to that same clamped bleed value, so the icon column still
 * lines up exactly with the plain rows above/below at every width — the
 * card just bleeds by less on a narrow screen than a wide one, instead of
 * bleeding a fixed amount that can exceed the room available. */
.alignwide.ilovesai-teaser--alt{
  --ilovesai-aw: min(var(--wp--style--global--wide-size, 1280px), 100% - 2rem);
  --ilovesai-gutter: calc((100% - var(--ilovesai-aw)) / 2);
  --ilovesai-bleed: min(40px, var(--ilovesai-gutter));
  background:var(--ilovesai-bg-soft); border-top:none; border-radius:16px;
  max-width: calc(var(--ilovesai-aw) + (2 * var(--ilovesai-bleed)));
  margin:8px auto;
  padding:64px var(--ilovesai-bleed);
}
@media (max-width:640px){
  .alignwide.ilovesai-teaser--alt{ padding-top:44px; padding-bottom:44px; }
}
.ilovesai-teaser__head{ display:flex; flex-direction:column; align-items:flex-start; }
.ilovesai-teaser-icon{
  width:88px; height:88px; border-radius:24px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--ilovesai-terracotta) 0%, var(--ilovesai-maroon) 100%);
  color:#f4f5fb; box-shadow:0 16px 32px -14px rgba(46,49,146,0.5);
  position:relative;
}
.ilovesai-teaser-icon::after{
  content:""; position:absolute; inset:-8px; border-radius:28px;
  border:1.5px dashed var(--ilovesai-line); z-index:-1;
}
.ilovesai-teaser-icon svg{ width:42px; height:42px; }
.ilovesai-teaser--alt .ilovesai-teaser-icon{
  background:linear-gradient(150deg, var(--ilovesai-gold) 0%, var(--ilovesai-terracotta-deep) 100%);
}
.ilovesai-teaser h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.25; margin:0; }
.ilovesai-teaser .body p{ margin:0 0 14px; color:var(--ilovesai-ink-soft); font-size:1.02rem; line-height:1.7; }
.ilovesai-teaser .body p:last-of-type{ margin-bottom:22px; }
.ilovesai-teaser .body p.lead{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; color:var(--ilovesai-ink); font-size:1.1rem; }

/* ---------- get involved / CTA band ---------- */
.ilovesai-band{
  border:1px solid var(--ilovesai-line); border-radius:16px; padding:48px 44px; box-shadow:var(--ilovesai-shadow);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:var(--ilovesai-surface);
}
.ilovesai-band h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.5rem; margin:0; }
.ilovesai-band p{ margin:10px 0 0; color:var(--ilovesai-ink-soft); max-width:48ch; }

/* ---------- global impact ---------- */
.ilovesai-impact{
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,0.10) 0%, transparent 40%),
    radial-gradient(circle at 6% 96%, rgba(255,255,255,0.08) 0%, transparent 35%),
    var(--ilovesai-maroon);
  color:#f4f5fb; border-radius:16px; padding:52px 44px;
  /* justify-content:center (not space-between) keeps the number/label
   * and the button close together as one balanced group, instead of
   * pinning them to opposite edges of a wide band with a large empty
   * gap between them on wider screens. */
  display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap;
  box-shadow:0 24px 48px -24px rgba(46,49,146,0.5);
}
/* align-items:baseline previously matched the big number's baseline to
 * the BOTTOM line of the label+description text next to it (that text
 * block wraps onto two lines, and baseline alignment uses its last
 * line) — which is what made the number look like it was floating up
 * and down relative to the label instead of sitting evenly beside it.
 * Centering the two against each other fixes it regardless of how many
 * lines the label/description wraps to. */
.ilovesai-impact__stat{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ilovesai-impact__stat b{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem);
  letter-spacing:-0.01em; font-variant-numeric:tabular-nums; color:#fff;
}
.ilovesai-impact__stat span{ font-size:1rem; color:rgba(255,255,255,0.82); max-width:22ch; }
.ilovesai-impact__label{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.76rem; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ilovesai-gold); margin-bottom:10px; display:block;
}

/* ---------- region-aware facilities ---------- */
.ilovesai-region__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.ilovesai-region__head h4, .ilovesai-region__head .ilovesai-region__title{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ilovesai-gold); font-weight:600; margin:0;
}
.ilovesai-region__tabs{ display:inline-flex; border:1px solid var(--ilovesai-line); border-radius:7px; padding:3px; }
.ilovesai-region__tab{
  border:none; background:none; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:0.82rem;
  color:var(--ilovesai-ink-soft); padding:7px 14px; border-radius:5px; cursor:pointer;
}
.ilovesai-region__tab[aria-pressed="true"]{ background:var(--ilovesai-terracotta); color:#fff; }
.ilovesai-offices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px;
  padding-bottom:24px;
}
.ilovesai-offices[hidden]{ display:none; }
/* Each office is itself a 4-row grid (name / address / phone / "open
   since") that reads its row sizing from the shared parent grid via
   subgrid — the same physical row (e.g. "address") is one shared track
   across every column, sized to whichever office's address is actually
   tallest that time. This lines up phone/note rows across columns without
   ever reserving fixed blank space in the ones that don't need it: a
   one-line address costs nothing extra unless a sibling is genuinely
   two lines, and the layout adapts automatically if an address ever
   changes length again. */
.ilovesai-office{
  display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0;
}
.ilovesai-office h4{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ilovesai-gold); margin-bottom:10px; font-weight:600; align-self:start;
}
.ilovesai-office p{ margin:0; font-size:0.92rem; line-height:1.5; color:var(--ilovesai-ink-soft); align-self:start; }
.ilovesai-office__tel{ font-variant-numeric:tabular-nums; color:var(--ilovesai-ink); font-weight:500; margin-top:6px; }
.ilovesai-office__note{ margin-top:4px; font-size:0.82rem; font-style:italic; color:var(--ilovesai-terracotta-deep); }

/* ---------- events calendar ---------- */
.ilovesai-events-list{ display:flex; flex-direction:column; gap:1px; background:var(--ilovesai-line); border:1px solid var(--ilovesai-line); }
.ilovesai-event-card{ display:flex; gap:24px; background:var(--ilovesai-surface); padding:24px; align-items:flex-start; }
.ilovesai-event-date{
  flex:0 0 auto; width:64px; text-align:center; background:var(--ilovesai-bg-soft); border-radius:4px; padding:10px 0;
}
.ilovesai-event-date__day{ display:block; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:700; font-size:1.6rem; color:var(--ilovesai-terracotta-deep); line-height:1; }
.ilovesai-event-date__month{ display:block; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ilovesai-ink-soft); margin-top:4px; }
.ilovesai-event-body{ flex:1 1 auto; min-width:0; }
.ilovesai-event-body h3{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.15rem; margin:0 0 6px; }
.ilovesai-event-meta{ font-size:0.86rem; color:var(--ilovesai-ink-soft); margin:0 0 10px; font-weight:500; }
.ilovesai-event-excerpt p{ margin:0 0 14px; font-size:0.94rem; color:var(--ilovesai-ink-soft); }
.ilovesai-events-empty{ padding:24px; border:1px dashed var(--ilovesai-line); border-radius:4px; color:var(--ilovesai-ink-soft); }
@media (max-width:560px){ .ilovesai-event-card{ flex-direction:column; } .ilovesai-event-date{ width:auto; display:inline-flex; gap:6px; align-items:baseline; padding:4px 10px; } .ilovesai-event-date__day, .ilovesai-event-date__month{ display:inline; margin:0; } }

/* ---------- locations search ---------- */
.ilovesai-location-search{ margin-bottom:28px; }
.ilovesai-location-search input{
  width:100%; max-width:420px; padding:12px 16px; border:1px solid var(--ilovesai-line); border-radius:6px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.98rem; color:var(--ilovesai-ink);
}
.ilovesai-location-search input:focus{ outline:2px solid var(--ilovesai-terracotta); outline-offset:1px; }
.ilovesai-location-search__hint{ margin-top:8px; font-size:0.82rem; color:var(--ilovesai-ink-soft); }
.ilovesai-office[hidden]{ display:none; }
.ilovesai-locations-empty{ display:none; padding:20px; border:1px dashed var(--ilovesai-line); border-radius:4px; color:var(--ilovesai-ink-soft); }
.ilovesai-locations-empty.is-visible{ display:block; }
.ilovesai-geolocate{ margin-bottom:28px; }
.ilovesai-geolocate__hint{ margin:8px 0 0; font-size:0.82rem; color:var(--ilovesai-ink-soft); }
.ilovesai-geolocate__result{ margin-top:14px; padding:14px 18px; border:1px solid var(--ilovesai-line); border-radius:6px; background:var(--ilovesai-surface); font-size:0.94rem; }
.ilovesai-geolocate__result p{ margin:0 0 8px; }
.ilovesai-geolocate__result p:last-child{ margin-bottom:0; }

/* ---------- contact form ----------
 * Previously just labels and bordered inputs sitting directly on the
 * page background — functional, but the one place on the site with no
 * card treatment at all, which is exactly why it read as plain next to
 * every other panel (bands, cards, the mission quote) that gets a soft
 * surface, radius, and shadow. Wrapping the whole form in that same
 * treatment is what actually makes it feel designed rather than default.
 */
.ilovesai-contact-form{
  max-width:640px; margin-left:auto; margin-right:auto;
  background:var(--ilovesai-surface); border:1px solid var(--ilovesai-line);
  border-radius:16px; padding:40px 36px; box-shadow:var(--ilovesai-shadow);
}
@media (max-width:560px){ .ilovesai-contact-form{ padding:28px 22px; } }
.ilovesai-contact-form p{ margin:0 0 18px; }
.ilovesai-contact-form label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:6px; color:var(--ilovesai-ink); }
.ilovesai-contact-form input[type="text"],
.ilovesai-contact-form input[type="email"],
.ilovesai-contact-form input[type="tel"],
.ilovesai-contact-form input[type="date"],
.ilovesai-contact-form select,
.ilovesai-contact-form textarea{
  width:100%; padding:11px 14px; border:1px solid var(--ilovesai-line); border-radius:6px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.96rem; color:var(--ilovesai-ink); background:#fff;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.ilovesai-contact-form input:hover, .ilovesai-contact-form select:hover, .ilovesai-contact-form textarea:hover{
  border-color:var(--ilovesai-terracotta);
}
.ilovesai-contact-form textarea{ min-height:140px; resize:vertical; }
.ilovesai-contact-form input:focus, .ilovesai-contact-form select:focus, .ilovesai-contact-form textarea:focus{
  outline:none; border-color:var(--ilovesai-terracotta);
  box-shadow:0 0 0 3px rgba(46,49,146,0.16);
}
/* Native radio/checkbox accent — without this every radio button on the
 * form (the acknowledgment "Yes/No" choices) renders in the browser's
 * default blue, which clashes with the terracotta used everywhere else
 * on the page and is the kind of small mismatch that reads as
 * "unfinished" even when everything else is aligned correctly. */
.ilovesai-contact-form input[type="radio"],
.ilovesai-contact-form input[type="checkbox"]{ accent-color:var(--ilovesai-terracotta); }
.ilovesai-contact-form__hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.ilovesai-contact-form__notice{ padding:14px 18px; border-radius:6px; margin-bottom:20px; font-size:0.94rem; }
.ilovesai-contact-form__notice--success{ background:#eef6ee; color:#2a5c33; border:1px solid #bfe0c3; }
.ilovesai-contact-form__notice--error{ background:#fbeceb; color:#8a2e26; border:1px solid #f1c3bf; }
.ilovesai-contact-form > p:last-child{ margin-bottom:0; margin-top:8px; }

/* ---------- newsletter signup ---------- */
.ilovesai-newsletter-form{ max-width:480px; }
.ilovesai-newsletter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ilovesai-newsletter-row input[type="email"]{ flex:1 1 220px; min-width:200px; margin:0; }
.ilovesai-newsletter-row .ilovesai-btn{ flex-shrink:0; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------- signup / waiver ---------- */
.ilovesai-signup-form__heading{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.2rem; margin:32px 0 18px; padding-top:24px;
  border-top:1px solid var(--ilovesai-line); color:var(--ilovesai-maroon);
}
.ilovesai-signup-form > .ilovesai-signup-form__heading:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
/* Grid, not flex-basis math: a flex row with flex:1 1 220px approximates
 * an even split, but the exact widths still depend on how much space is
 * left over after each item's basis — small rounding differences between
 * a 2-field row and a 3-field row read as "not quite symmetric" even
 * though nothing is technically broken. Grid's 1fr columns are exactly
 * equal by definition, so every field in a row is guaranteed the same
 * width as its siblings, and the row itself carries the vertical gap
 * (rather than relying on the inner <p>'s own margin happening to be
 * counted correctly inside a flex line) so the spacing between every
 * field group — single or grouped — is identically 18px throughout. */
.ilovesai-signup-form__row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-bottom:18px; }
.ilovesai-signup-form__row > p{ margin-bottom:0; }
.ilovesai-signup-form__row--three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:560px){
  .ilovesai-signup-form__row,
  .ilovesai-signup-form__row--three{ grid-template-columns:1fr; }
}

/* These sit inside the form's own white card now, so giving them the
 * same white surface as the card would leave nothing but a thin border
 * distinguishing "a section" from "the card itself" — a cream tint
 * (the same one used for nested panels elsewhere on the site) reads as
 * a distinct sub-panel instead. */
.ilovesai-waiver-box{
  max-height:220px; overflow-y:auto; padding:16px 18px; margin:4px 0 18px;
  border:1px solid var(--ilovesai-line); border-radius:8px; background:var(--ilovesai-bg-soft);
  font-size:0.88rem; line-height:1.6; color:var(--ilovesai-ink-soft); white-space:normal;
}

.ilovesai-waiver-ack{
  border:1px solid var(--ilovesai-line); border-radius:8px; padding:16px 18px; margin:0 0 20px;
  background:var(--ilovesai-bg-soft);
}
/* A bare <legend> straddles its <fieldset>'s top border by default —
 * the browser draws the border right through the middle of it, leaving
 * a stray line fragment poking out on either side of the heading text.
 * display:block pulls the legend out of that border-straddling position
 * entirely, so it stacks like an ordinary heading. No border of its own
 * here — the "Parent/Legal Guardian Acknowledgment" and "Minor Media
 * Consent" questions further down this same form use a plain bold
 * paragraph with no line at all, so a real <legend> should match that,
 * not invent a new divider that isn't used anywhere else on the page. */
.ilovesai-waiver-ack legend{
  display:block; width:100%; font-weight:600; font-size:0.92rem; margin:0 0 12px;
}
.ilovesai-waiver-ack > p{ margin:0 0 10px; }
.ilovesai-radio{
  display:flex; align-items:flex-start; gap:10px; font-weight:500; font-size:0.92rem;
  cursor:pointer; margin:0 0 10px; padding:8px 10px; border-radius:6px;
  transition:background 0.15s ease;
}
.ilovesai-radio:hover{ background:rgba(46,49,146,0.06); }
.ilovesai-radio:last-child{ margin-bottom:0; }
.ilovesai-radio input[type="radio"]{ margin-top:4px; width:auto; flex-shrink:0; }

.ilovesai-signup-form__guardian{
  border:1.5px solid var(--ilovesai-terracotta); border-radius:8px;
  padding:20px 22px; margin:0 0 20px; background:var(--ilovesai-bg-soft);
}
.ilovesai-signup-form__guardian.is-hidden{ display:none; }
.ilovesai-signup-form__guardian legend{
  display:block; width:100%; font-weight:600; font-size:0.98rem; margin:0 0 12px;
}
.ilovesai-signup-form__guardian-note{ font-size:0.86rem; color:var(--ilovesai-ink-soft); margin:0 0 16px; }

/* ---------- generic page (Mission, About, etc.) ---------- */
.ilovesai-page{ padding:56px 0 64px; }
.ilovesai-page-title{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.18;
  letter-spacing:-0.01em; margin-bottom:8px;
}
.ilovesai-statement-list{ margin-top:12px; }
.ilovesai-statement{
  padding:36px 0; border-top:1px solid var(--ilovesai-line);
  /* align-items:start, not baseline: the left column is a short uppercase
     label and the right is a full paragraph at a different font size/
     line-height, so baseline-aligning them lines up the label against the
     paragraph's first line in a way that reads as offset rather than
     level — the same misalignment pattern already fixed on the impact
     band's stat rows. */
  display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start;
}
.ilovesai-statement:first-child{ border-top:none; padding-top:8px; }
@media (max-width:720px){ .ilovesai-statement{ grid-template-columns:1fr; gap:10px; } }
.ilovesai-statement h2{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ilovesai-gold); margin:0;
}
.ilovesai-statement .body{ max-width:66ch; }
.ilovesai-statement .body p{ margin:0; font-size:1.05rem; color:var(--ilovesai-ink-soft); line-height:1.7; }
.ilovesai-statement .body p.lead{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.28rem; font-style:italic; color:var(--ilovesai-ink); line-height:1.5; }

/* ---------- footer ---------- */
.ilovesai-footer{ padding:56px 0 32px; border-top:1px solid var(--ilovesai-line); }
.ilovesai-footer img.ilovesai-logo-full{ height:64px; width:auto; margin-bottom:24px; }
.ilovesai-social{ display:flex; gap:22px; margin:0 0 24px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:0.9rem; }
.ilovesai-social a{ color:var(--ilovesai-ink-soft); text-decoration:none; font-weight:600; }
.ilovesai-social a:hover{ color:var(--ilovesai-terracotta); }
.ilovesai-footbottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:10px;
  font-size:0.82rem; color:var(--ilovesai-ink-soft); border-top:1px solid var(--ilovesai-line); margin-top:24px;
}

/* ---------- mobile padding overrides ----------
 * Placed last on purpose: each selector below is also set, at the same
 * (single-class) specificity, by its own unconditional desktop rule
 * earlier in this file. CSS breaks a same-specificity tie by whichever
 * rule is declared LAST in the stylesheet, no matter which media query
 * actually matches — so these have to be the last word in the file or
 * the desktop padding silently wins on phones too, which is exactly
 * what was happening before this block moved down here.
 */
@media (max-width:640px){
  .ilovesai-mission{ padding:40px 22px; }
  .ilovesai-band{ padding:36px 24px; }
  .ilovesai-impact{ padding:36px 24px; }
}

/* =========================================================================
 * MEDIA (September 2026) — real I Love Sai service photos & film
 * -------------------------------------------------------------------------
 * Every image in these components is a genuine photo from I Love Sai
 * service (Georgia team 2019, family-shelter food drive, state archive
 * posters 2017–2019). Photos chosen focus on volunteers; recipients' faces
 * were deliberately left out, matching the org's own practice of blurring
 * beneficiaries in its posters. Files live in assets/img/photos/ and
 * assets/video/ — swap a file with the same name to update a slot.
 * ========================================================================= */

/* ---------- cinematic full-bleed hero ---------- */
.ilovesai-cinema{
  position:relative; isolation:isolate; overflow:hidden; margin:0 !important; max-width:none !important; width:100%;
  min-height:min(88vh, 860px); display:flex; align-items:flex-end;
  background:#1f2266; color:#fff;
}
.ilovesai-cinema__media{ position:absolute; inset:0; z-index:-2; }
.ilovesai-cinema__media video{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
.ilovesai-cinema::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(31,34,102,0.86) 0%, rgba(31,34,102,0.62) 38%, rgba(31,34,102,0.10) 72%),
    linear-gradient(0deg, rgba(31,34,102,0.75) 0%, transparent 42%),
    radial-gradient(ellipse 60% 50% at 12% 88%, rgba(46,49,146,0.35), transparent 70%);
}
.ilovesai-cinema__inner{
  width:min(1180px, 100% - 48px); margin:0 auto; padding:clamp(96px,14vh,160px) 0 clamp(64px,9vh,104px);
}
.ilovesai-cinema__eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:0.74rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:#c9cbf5; margin-bottom:22px;
}
.ilovesai-cinema__eyebrow::before{ content:""; width:28px; height:1px; background:#c9cbf5; }
.ilovesai-cinema__title{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; color:#fff; margin:0; max-width:14ch;
  font-size:clamp(2.6rem, 6.4vw, 5.4rem); line-height:1.02; letter-spacing:-0.02em;
  text-shadow:0 2px 30px rgba(24,27,82,0.35);
}
.ilovesai-cinema__title em{ font-style:italic; color:#c9cbf5; }
.ilovesai-cinema__signature{
  margin:26px 0 0; padding-left:18px; border-left:2px solid #c9cbf5; max-width:44ch;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.5; color:#eef0fb;
}
.ilovesai-cinema__lede{ margin:18px 0 0; max-width:54ch; font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.65; color:rgba(255,255,255,0.86); }
.ilovesai-cinema__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.ilovesai-cinema__btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; font-weight:600; font-size:0.98rem;
  text-decoration:none; transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.ilovesai-cinema__btn--primary{ background:linear-gradient(135deg,#2e3192,#1f2266); color:#fff; box-shadow:0 14px 34px -12px rgba(46,49,146,0.75); }
.ilovesai-cinema__btn--primary:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 18px 40px -12px rgba(59,63,174,0.9); }
.ilovesai-cinema__btn--glass{ background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ilovesai-cinema__btn--glass:hover{ background:rgba(255,255,255,0.22); color:#fff; transform:translateY(-2px); }
.ilovesai-cinema__btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.ilovesai-cinema__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:40px 0 0; }
.ilovesai-cinema__chips li{
  font-size:0.8rem; letter-spacing:0.04em; padding:7px 14px; border-radius:999px; color:rgba(255,255,255,0.92);
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ilovesai-cinema__scroll{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid rgba(255,255,255,0.55); border-radius:14px; }
.ilovesai-cinema__scroll span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:ilovesai-scrollcue 1.8s ease-in-out 3; }
@keyframes ilovesai-scrollcue{ 0%{opacity:0; transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0; transform:translateY(14px);} }
.ilovesai-hero-media__toggle{
  position:absolute; right:22px; bottom:22px; z-index:3; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.45); background:rgba(31,34,102,0.45); color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ilovesai-hero-media__toggle:hover{ background:rgba(31,34,102,0.72); }
.ilovesai-hero-media__toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ilovesai-hero-media__toggle .i-play{ display:none; }
.ilovesai-hero-media.is-paused .i-play{ display:block; }
.ilovesai-hero-media.is-paused .i-pause{ display:none; }
@media (max-width:781px){
  .ilovesai-cinema{ min-height:auto; }
  .ilovesai-cinema::before{ background:linear-gradient(0deg, rgba(31,34,102,0.92) 0%, rgba(31,34,102,0.7) 55%, rgba(31,34,102,0.35) 100%); }
  .ilovesai-cinema__inner{ width:calc(100% - 32px); padding:120px 0 72px; }
  .ilovesai-cinema__scroll{ display:none; }
  .ilovesai-cinema__btn{ flex:1 1 100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .ilovesai-cinema__scroll span{ animation:none; } }

/* ---------- states section (dark, immersive) ---------- */
.ilovesai-states-section{
  margin:0 !important; max-width:none !important; width:100%; padding:clamp(72px,10vw,120px) 0;
  background:radial-gradient(ellipse 80% 60% at 20% 0%, rgba(46,49,146,0.22), transparent 60%), #1f2266; color:#f4f5fb;
}
.ilovesai-states-section__head{ width:min(1180px,100% - 48px); margin:0 auto 44px; display:grid; grid-template-columns:1fr 1fr; gap:24px 64px; align-items:end; }
.ilovesai-states-section__head .ilovesai-eyebrow{ grid-column:1/-1; color:#c9cbf5; margin:0; }
.ilovesai-states-section__head .ilovesai-eyebrow::before{ background:#c9cbf5; }
.ilovesai-states-section__head h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.08; letter-spacing:-0.015em; margin:0; color:#fff; }
.ilovesai-states-section__head p{ margin:0; font-size:1.05rem; line-height:1.65; color:rgba(244,245,251,0.78); max-width:48ch; }
.ilovesai-states{ width:min(1180px,100% - 48px); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ilovesai-state{
  position:relative; display:block; aspect-ratio:3/4.3; border-radius:22px; overflow:hidden; text-decoration:none; color:#fff;
  box-shadow:0 30px 60px -30px rgba(24,27,82,0.7); isolation:isolate;
}
.ilovesai-state img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; filter:saturate(1.05); }
.ilovesai-state::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(31,34,102,0.05) 25%, rgba(31,34,102,0.88) 78%); transition:background .5s; }
.ilovesai-state:hover img, .ilovesai-state:focus-visible img{ transform:scale(1.08); }
.ilovesai-state:hover::after{ background:linear-gradient(180deg, rgba(24,27,82,0.15) 15%, rgba(31,34,102,0.92) 75%); }
.ilovesai-state:focus-visible{ outline:3px solid #c9cbf5; outline-offset:3px; }
.ilovesai-state__body{ position:absolute; left:0; right:0; bottom:0; padding:24px 22px 24px; display:flex; flex-direction:column; gap:8px; }
.ilovesai-state__kicker{ font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:#c9cbf5; }
.ilovesai-state__name{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:600; line-height:1.1; }
.ilovesai-state__text{ font-size:0.9rem; line-height:1.5; color:rgba(255,255,255,0.85); }
.ilovesai-state__cta{ margin-top:6px; font-size:0.84rem; font-weight:600; color:#c9cbf5; }
@media (max-width:1000px){ .ilovesai-states{ grid-template-columns:repeat(2,1fr); } .ilovesai-states-section__head{ grid-template-columns:1fr; } }
@media (max-width:560px){ .ilovesai-states{ grid-template-columns:1fr; width:calc(100% - 32px); } .ilovesai-state{ aspect-ratio:4/4.4; } .ilovesai-states-section__head{ width:calc(100% - 32px); } }

/* ---------- moving photo reel ---------- */
.ilovesai-reel{ margin:0 !important; max-width:none !important; width:100%; background:#1f2266; padding:0 0 clamp(64px,8vw,100px); overflow:hidden; display:flex; flex-direction:column; gap:16px; }
.ilovesai-reel__track{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ilovesai-reel__track ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; width:max-content; animation:ilovesai-reel 70s linear infinite; }
.ilovesai-reel__track--rev ul{ animation-direction:reverse; animation-duration:80s; }
.ilovesai-reel:hover ul, .ilovesai-reel:focus-within ul{ animation-play-state:paused; }
.ilovesai-reel__track li{ flex:0 0 auto; width:clamp(220px,24vw,340px); aspect-ratio:3/2; border-radius:16px; overflow:hidden; background:#1f2266; }
.ilovesai-reel__track img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease; }
.ilovesai-reel__track li:hover img{ transform:scale(1.06); }
@keyframes ilovesai-reel{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce){
  .ilovesai-reel__track{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .ilovesai-reel__track ul{ animation:none; }
  .ilovesai-reel__track li[aria-hidden="true"]{ display:none; }
}

/* ---------- immersive quote band ---------- */
.ilovesai-immersive{
  position:relative; isolation:isolate; overflow:hidden; margin:0 !important; max-width:none !important; width:100%;
  min-height:min(70vh,620px); display:grid; place-items:center; text-align:center; color:#fff; padding:96px 24px;
}
.ilovesai-immersive picture, .ilovesai-immersive__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.ilovesai-immersive__bg{ filter:blur(2px) saturate(1.1); }
.ilovesai-immersive::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, #1f2266 0%, rgba(31,34,102,0.62) 22%, rgba(31,34,102,0.62) 70%, rgba(31,34,102,0.92) 100%); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ilovesai-immersive__bg{ animation:ilovesai-parallax linear both; animation-timeline:view(); }
  }
}
@keyframes ilovesai-parallax{ from{ transform:scale(1.18) translateY(-6%); } to{ transform:scale(1.18) translateY(6%); } }
.ilovesai-immersive__quote{ margin:0 auto; width:min(920px,100%); border:none; padding:0; }
.ilovesai-immersive__quote p{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-weight:500; font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.18; letter-spacing:-0.01em; margin:0; text-shadow:0 4px 30px rgba(24,27,82,0.4); }
.ilovesai-immersive__quote footer{ margin-top:26px; font-size:0.78rem; letter-spacing:0.24em; text-transform:uppercase; color:#c9cbf5; }

/* ---------- photo mosaic (homepage "Service in Action") ---------- */
.ilovesai-mosaic-section{ padding:72px 0 24px; }
.ilovesai-mosaic-section > .ilovesai-eyebrow{ margin-bottom:12px; }
.ilovesai-mosaic-section h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 10px; }
.ilovesai-mosaic-section .ilovesai-lede{ max-width:62ch; color:var(--ilovesai-ink-soft); margin:0 0 32px; }
.ilovesai-mosaic{
  display:grid; gap:14px;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:230px 230px;
  grid-template-areas:
    "a a b c"
    "a a d e";
}
.ilovesai-mosaic figure{ position:relative; margin:0; border-radius:16px; overflow:hidden; background:var(--ilovesai-bg-soft); }
.ilovesai-mosaic figure:nth-child(1){ grid-area:a; }
.ilovesai-mosaic figure:nth-child(2){ grid-area:b; }
.ilovesai-mosaic figure:nth-child(3){ grid-area:c; }
.ilovesai-mosaic figure:nth-child(4){ grid-area:d; }
.ilovesai-mosaic figure:nth-child(5){ grid-area:e; }
.ilovesai-mosaic img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.ilovesai-mosaic figure:hover img{ transform:scale(1.045); }
.ilovesai-mosaic figcaption{
  position:absolute; inset:auto 0 0 0; padding:40px 16px 12px; color:#fff; font-size:0.82rem; line-height:1.35;
  background:linear-gradient(180deg, transparent, rgba(31,34,102,0.72));
}
.ilovesai-mosaic figure:nth-child(1) figcaption{ font-size:0.95rem; padding:60px 22px 18px; }
.ilovesai-mosaic figcaption b{ display:block; font-weight:600; }
@media (max-width:900px){
  .ilovesai-mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:280px 180px 180px; grid-template-areas:"a a" "b c" "d e"; }
}
@media (max-width:520px){
  .ilovesai-mosaic{ grid-template-columns:1fr; grid-template-rows:260px repeat(4, 200px); grid-template-areas:"a" "b" "c" "d" "e"; }
}

/* ---------- page photo banner ---------- */
.ilovesai-photo-banner{
  position:relative; margin:8px 0 40px; border-radius:20px; overflow:hidden;
  aspect-ratio:21/8; min-height:220px; background:var(--ilovesai-bg-soft);
  box-shadow:var(--ilovesai-shadow);
}
.ilovesai-photo-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ilovesai-photo-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(31,34,102,0.55) 0%, rgba(31,34,102,0.08) 55%, transparent 100%);
}
.ilovesai-photo-banner figcaption{
  position:absolute; left:28px; bottom:22px; right:28px; z-index:2; max-width:46ch;
  color:#fff; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.45;
  text-shadow:0 1px 10px rgba(24,27,82,0.35);
}
.ilovesai-photo-banner figcaption small{
  display:block; margin-top:6px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:normal; font-size:0.78rem;
  letter-spacing:0.08em; text-transform:uppercase; opacity:0.9;
}
@media (max-width:640px){
  .ilovesai-photo-banner{ aspect-ratio:4/3; }
  .ilovesai-photo-banner::after{ background:linear-gradient(180deg, transparent 35%, rgba(31,34,102,0.7) 100%); }
  .ilovesai-photo-banner figcaption{ left:18px; right:18px; bottom:16px; }
}

/* ---------- service archive (Impact page) ---------- */
.ilovesai-archive{ margin:48px 0; }
.ilovesai-archive__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.ilovesai-archive__chip{
  font:inherit; font-size:0.88rem; padding:8px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ilovesai-line); background:var(--ilovesai-surface); color:var(--ilovesai-ink);
}
.ilovesai-archive__chip[aria-pressed="true"]{ background:var(--ilovesai-terracotta); border-color:var(--ilovesai-terracotta); color:#fff; }
.ilovesai-archive__chip:focus-visible{ outline:2px solid var(--ilovesai-terracotta); outline-offset:2px; }
.ilovesai-archive__grid{ columns:4 220px; column-gap:14px; }
.ilovesai-archive__item{ break-inside:avoid; margin:0 0 14px; }
.ilovesai-archive__item[hidden]{ display:none; }
.ilovesai-archive__item a{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--ilovesai-line); background:var(--ilovesai-surface); }
.ilovesai-archive__item img{ width:100%; height:auto; display:block; transition:transform .5s ease, opacity .3s; }
.ilovesai-archive__item a:hover img{ transform:scale(1.03); }
.ilovesai-archive__item a:focus-visible{ outline:2px solid var(--ilovesai-terracotta); outline-offset:2px; }
.ilovesai-archive__item span{ display:block; padding:8px 12px 10px; font-size:0.78rem; color:var(--ilovesai-ink-soft); }

/* ---------- lightbox ---------- */
.ilovesai-lightbox{
  border:none; padding:0; background:transparent; max-width:min(1100px,94vw); max-height:92vh; overflow:visible;
}
.ilovesai-lightbox::backdrop{ background:rgba(31,34,102,0.9); backdrop-filter:blur(3px); }
.ilovesai-lightbox__figure{ margin:0; text-align:center; }
.ilovesai-lightbox__figure img{ max-width:94vw; max-height:82vh; border-radius:10px; display:block; margin:0 auto; }
.ilovesai-lightbox__figure figcaption{ color:#eef0fb; font-size:0.9rem; margin-top:12px; }
.ilovesai-lightbox__close, .ilovesai-lightbox__nav{
  position:fixed; border:none; background:rgba(255,255,255,0.14); color:#fff; cursor:pointer;
  width:46px; height:46px; border-radius:50%; font-size:1.7rem; line-height:1; display:grid; place-items:center;
}
.ilovesai-lightbox__close{ top:18px; right:18px; }
.ilovesai-lightbox__nav--prev{ left:14px; top:50%; transform:translateY(-50%); }
.ilovesai-lightbox__nav--next{ right:14px; top:50%; transform:translateY(-50%); }
.ilovesai-lightbox__close:hover, .ilovesai-lightbox__nav:hover{ background:rgba(255,255,255,0.28); }
.ilovesai-lightbox button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- Satcharita translations feature ---------- */
.ilovesai-books{ margin:56px 0; padding:48px 40px; border-radius:22px; background:var(--ilovesai-bg-soft); }
.ilovesai-books h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:clamp(1.6rem,2.8vw,2.1rem); margin:0 0 10px; }
.ilovesai-books > p{ max-width:66ch; color:var(--ilovesai-ink-soft); }
.ilovesai-books__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:32px 0; }
.ilovesai-book{ margin:0; background:var(--ilovesai-surface); border-radius:16px; overflow:hidden; border:1px solid var(--ilovesai-line); box-shadow:var(--ilovesai-shadow); display:flex; flex-direction:column; }
.ilovesai-book__cover{ aspect-ratio:4/5; background:#fff; display:grid; place-items:center; padding:18px; }
.ilovesai-book__cover img{ max-width:100%; max-height:100%; object-fit:contain; display:block; filter:drop-shadow(0 10px 18px rgba(24,27,82,0.18)); }
.ilovesai-book figcaption{ padding:18px 20px 22px; border-top:1px solid var(--ilovesai-line); }
.ilovesai-book figcaption b{ display:block; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.2rem; color:var(--ilovesai-ink); }
.ilovesai-book figcaption span{ display:block; font-size:0.86rem; color:var(--ilovesai-ink-soft); margin-top:4px; line-height:1.5; }
.ilovesai-books blockquote{
  margin:8px 0 0; padding:22px 26px; border-left:3px solid var(--ilovesai-gold); background:var(--ilovesai-surface); border-radius:0 12px 12px 0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-size:1.08rem; line-height:1.6; color:var(--ilovesai-ink);
}
.ilovesai-books blockquote cite{ display:block; margin-top:10px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:normal; font-size:0.84rem; color:var(--ilovesai-ink-soft); }
@media (max-width:820px){ .ilovesai-books__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ilovesai-books{ padding:32px 20px; } .ilovesai-books__grid{ grid-template-columns:1fr; } }

/* ---------- gentle reveal on scroll (only where supported, never for reduced-motion) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ilovesai-mosaic figure, .ilovesai-photo-banner, .ilovesai-book, .ilovesai-archive__item{
      animation:ilovesai-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 100%;
    }
  }
}
@keyframes ilovesai-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* ---------- teaser photos (homepage) ---------- */
.ilovesai-teaser__photo{ margin:22px 0 0; border-radius:18px; overflow:hidden; aspect-ratio:4/3; max-width:420px; box-shadow:0 24px 48px -28px rgba(24,27,82,0.55); background:var(--ilovesai-bg-soft); }
.ilovesai-teaser__photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.ilovesai-teaser:hover .ilovesai-teaser__photo img{ transform:scale(1.04); }
@media (max-width:781px){ .ilovesai-teaser__photo{ max-width:none; } }

/* =========================================================================
 * CONVERSION + ACCESSIBILITY (September 26, 2026)
 * Pathways (Give / Volunteer / Join), monthly giving + employer matching,
 * sticky mobile actions, reel pause control, skip link, dark-mode button
 * contrast. All text colors below were checked against WCAG 2.1 AA
 * (4.5:1 normal text, 3:1 large text / UI components).
 * ========================================================================= */

/* ---------- dark mode: filled buttons get dark text (white on #3b3fae was 2.96:1) ---------- */
@media (prefers-color-scheme: dark) and (min-width:100000px){
  :root:not([data-theme="light"]) .ilovesai-btn:not(.ilovesai-btn--ghost):not(.ilovesai-btn--light),
  :root:not([data-theme="light"]) .wp-block-button.ilovesai-btn:not(.ilovesai-btn--ghost):not(.ilovesai-btn--light) > .wp-block-button__link{ color:#1f2266; }
}
:root[data-theme="dark"] .ilovesai-btn:not(.ilovesai-btn--ghost):not(.ilovesai-btn--light),
:root[data-theme="dark"] .wp-block-button.ilovesai-btn:not(.ilovesai-btn--ghost):not(.ilovesai-btn--light) > .wp-block-button__link{ color:#1f2266; }

/* ---------- skip link ---------- */
.ilovesai-skip{
  position:absolute; left:16px; top:-100px; z-index:10000; padding:12px 20px; border-radius:8px;
  background:#1f2266; color:#fff; font-weight:600; text-decoration:none; transition:top .15s;
}
.ilovesai-skip:focus{ top:12px; outline:3px solid #c9cbf5; outline-offset:2px; }

/* ---------- header: volunteer + donate ---------- */
.ilovesai-header .wp-block-buttons{ gap:10px; flex-wrap:nowrap; }
@media (max-width:600px){ .ilovesai-header .ilovesai-header__volunteer{ display:none; } }

/* ---------- hero impact line + third link ---------- */
.ilovesai-cinema__impact{
  display:flex; width:fit-content; align-items:center; gap:12px; margin:0 0 22px; padding:8px 16px 8px 8px; border-radius:999px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:0.9rem; color:#fff;
}
.ilovesai-cinema__impact b{ background:#2e3192; color:#fff; border-radius:999px; padding:4px 12px; font-weight:700; letter-spacing:0.01em; }
.ilovesai-cinema__textlink{ align-self:center; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; padding:10px 4px; }
.ilovesai-cinema__textlink:hover{ color:#c9cbf5; }
.ilovesai-cinema__textlink:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:4px; }

/* ---------- pathways: Give / Volunteer / Join ---------- */
.ilovesai-paths{ margin:0 !important; max-width:none !important; width:100%; padding:clamp(64px,8vw,104px) 0; background:var(--ilovesai-bg); }
.ilovesai-paths__head{ width:min(1180px,100% - 48px); margin:0 auto 40px; text-align:center; }
.ilovesai-paths__head h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:clamp(2rem,4vw,3.1rem); line-height:1.1; letter-spacing:-0.015em; margin:10px 0 14px; color:var(--ilovesai-ink); }
.ilovesai-paths__head p{ max-width:60ch; margin:0 auto; font-size:1.08rem; line-height:1.65; color:var(--ilovesai-ink-soft); }
.ilovesai-paths__head .ilovesai-eyebrow{ justify-content:center; }
.ilovesai-paths__grid{ width:min(1180px,100% - 48px); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ilovesai-path{
  position:relative; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--ilovesai-surface);
  border:1px solid var(--ilovesai-line); box-shadow:0 30px 60px -36px rgba(24,27,82,0.5); transition:transform .35s ease, box-shadow .35s ease;
}
.ilovesai-path:hover{ transform:translateY(-4px); box-shadow:0 40px 70px -36px rgba(24,27,82,0.6); }
.ilovesai-path__media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.ilovesai-path__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.ilovesai-path:hover .ilovesai-path__media img{ transform:scale(1.05); }
.ilovesai-path__tag{
  position:absolute; left:16px; top:16px; padding:6px 12px; border-radius:999px; font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  background:#fff; color:#2e3192; box-shadow:0 6px 16px -6px rgba(24,27,82,0.35);
}
.ilovesai-path--give .ilovesai-path__tag{ background:#2e3192; color:#fff; }
.ilovesai-path__body{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.ilovesai-path__body h3{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:1.55rem; line-height:1.15; margin:0; color:var(--ilovesai-ink); }
.ilovesai-path__body p{ margin:0; font-size:1rem; line-height:1.6; color:var(--ilovesai-ink-soft); }
.ilovesai-path__body .ilovesai-path__note{ font-size:0.88rem; color:var(--ilovesai-ink-soft); }
.ilovesai-path__cta{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px;
  font-weight:600; text-decoration:none; background:var(--ilovesai-ink); color:var(--ilovesai-bg); transition:background .25s, transform .25s;
}
.ilovesai-path--give .ilovesai-path__cta{ background:#2e3192; color:#fff; }
.ilovesai-path__cta:hover{ transform:translateX(3px); }
.ilovesai-path--give .ilovesai-path__cta:hover{ background:#1f2266; color:#fff; }
.ilovesai-path__cta:focus-visible{ outline:3px solid var(--ilovesai-terracotta); outline-offset:3px; }
.ilovesai-path--give{ border:2px solid #2e3192; }
@media (max-width:900px){ .ilovesai-paths__grid{ grid-template-columns:1fr; max-width:560px; } }

/* ---------- monthly giving + matching band ---------- */
.ilovesai-giving{
  margin:0 !important; max-width:none !important; width:100%; padding:clamp(64px,8vw,104px) 0; color:#fff;
  background:radial-gradient(ellipse 70% 80% at 85% 10%, rgba(201,203,245,0.22), transparent 60%), linear-gradient(135deg,#2e3192 0%,#24277a 55%,#1a1c55 100%);
}
.ilovesai-giving__inner{ width:min(1180px,100% - 48px); margin:0 auto; display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.ilovesai-giving .ilovesai-eyebrow{ color:#c9cbf5; }
.ilovesai-giving .ilovesai-eyebrow::before{ background:#c9cbf5; }
.ilovesai-giving h2{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; letter-spacing:-0.015em; margin:12px 0 18px; color:#fff; }
.ilovesai-giving p{ font-size:1.08rem; line-height:1.7; color:rgba(255,255,255,0.9); margin:0 0 14px; max-width:56ch; }
.ilovesai-giving__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.ilovesai-giving__btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:999px; font-weight:700; text-decoration:none;
  background:#fff; color:#2e3192; box-shadow:0 18px 36px -16px rgba(24,27,82,0.55); transition:transform .25s;
}
.ilovesai-giving__btn:hover{ transform:translateY(-2px); color:#2e3192; }
.ilovesai-giving__btn--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.6); box-shadow:none; }
.ilovesai-giving__btn--ghost:hover{ color:#fff; background:rgba(255,255,255,0.1); }
.ilovesai-giving__btn:focus-visible{ outline:3px solid #c9cbf5; outline-offset:3px; }
.ilovesai-giving__card{
  border-radius:24px; padding:30px 30px 28px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ilovesai-giving__card h3{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.5rem; font-weight:600; margin:0 0 12px; color:#fff; }
.ilovesai-giving__card ul{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px; }
.ilovesai-giving__card li{ position:relative; padding-left:30px; line-height:1.55; color:rgba(255,255,255,0.92); }
.ilovesai-giving__card li::before{ content:"\2713"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:0.8rem; font-weight:700; background:#c9cbf5; color:#24277a; }
.ilovesai-giving__ein{ display:inline-block; margin-top:4px; padding:10px 14px; border-radius:12px; background:rgba(24,27,82,0.22); font-size:0.95rem; color:#fff; }
.ilovesai-giving__ein b{ letter-spacing:0.04em; }
.ilovesai-giving__card a{ color:#dfe0fa; font-weight:600; }
.ilovesai-giving__card a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ilovesai-giving__fine{ font-size:0.85rem !important; color:rgba(255,255,255,0.78) !important; margin-top:18px !important; }
@media (max-width:900px){ .ilovesai-giving__inner{ grid-template-columns:1fr; } }

/* ---------- reel pause control ---------- */
.ilovesai-reel{ position:relative; }
.ilovesai-reel__toggle{
  align-self:center; margin-top:6px; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:0.86rem; font-weight:600; color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.3);
}
.ilovesai-reel__toggle:hover{ background:rgba(255,255,255,0.16); }
.ilovesai-reel__toggle:focus-visible{ outline:2px solid #c9cbf5; outline-offset:2px; }
.ilovesai-reel.is-paused ul{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){ .ilovesai-reel__toggle{ display:none; } }

/* ---------- state card heading ---------- */
h3.ilovesai-state__name{ margin:0; color:#fff; }

/* ---------- sticky mobile action bar ---------- */
.ilovesai-actionbar{ display:none; }
@media (max-width:781px){
  .ilovesai-actionbar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,0.96); border-top:1px solid var(--ilovesai-line);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 -10px 30px -20px rgba(24,27,82,0.4);
  }
  .ilovesai-actionbar a{ display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:999px; font-weight:700; text-decoration:none; font-size:1rem; }
  .ilovesai-actionbar__donate{ background:#2e3192; color:#fff; }
  .ilovesai-actionbar__volunteer{ background:transparent; color:#2e3192; border:1.5px solid #2e3192; }
  .ilovesai-actionbar a:focus-visible{ outline:3px solid #2e3192; outline-offset:2px; }
  body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width:781px) and (prefers-color-scheme: dark) and (min-width:100000px){
  :root:not([data-theme="light"]) .ilovesai-actionbar{ background:rgba(24,27,82,0.96); }
  :root:not([data-theme="light"]) .ilovesai-actionbar__volunteer{ color:#eef0fb; border-color:#eef0fb; }
}

/* ---------- Make It Possible: ways to give ---------- */
.ilovesai-ways{ margin:40px 0 56px; }
.ilovesai-ways__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px; }
.ilovesai-way{ border-radius:20px; padding:28px; background:var(--ilovesai-surface); border:1px solid var(--ilovesai-line); box-shadow:var(--ilovesai-shadow); scroll-margin-top:100px; }
.ilovesai-way--featured{ grid-column:1/-1; border:2px solid var(--ilovesai-terracotta); background:linear-gradient(135deg,var(--ilovesai-surface),var(--ilovesai-bg-soft)); }
.ilovesai-way h3{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.45rem; margin:0 0 10px; color:var(--ilovesai-ink); }
.ilovesai-way p, .ilovesai-way li{ color:var(--ilovesai-ink-soft); line-height:1.65; }
.ilovesai-way ol{ margin:10px 0 16px; padding-left:22px; }
.ilovesai-way li{ margin:6px 0; }
.ilovesai-way .ilovesai-way__ein{ display:inline-block; padding:8px 14px; border-radius:10px; background:var(--ilovesai-bg-soft); color:var(--ilovesai-ink); font-weight:600; }
.ilovesai-way .ilovesai-way__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:14px 24px; border-radius:999px; background:var(--ilovesai-terracotta); color:#fff; font-weight:700; text-decoration:none; }
.ilovesai-way .ilovesai-way__cta:hover{ background:var(--ilovesai-terracotta-deep); color:#fff; }
.ilovesai-way .ilovesai-way__cta:focus-visible{ outline:3px solid var(--ilovesai-ink); outline-offset:3px; }
.ilovesai-way .ilovesai-way__link{ color:var(--ilovesai-terracotta-deep); font-weight:600; }
@media (prefers-color-scheme: dark) and (min-width:100000px){ :root:not([data-theme="light"]) .ilovesai-way .ilovesai-way__cta{ color:#1f2266; } }
:root[data-theme="dark"] .ilovesai-way .ilovesai-way__cta{ color:#1f2266; }
@media (max-width:720px){ .ilovesai-ways__grid{ grid-template-columns:1fr; } }
.ilovesai-main{ margin:0 !important; max-width:none !important; padding:0 !important; }

/* =========================================================================
 * HOMEPAGE REDESIGN (September 26, 2026) — "ilv-" components
 * Compact 5-section homepage. Colors resolve to the official indigo palette.
 * No black. All text pairs meet WCAG 2.1 AA (checked).
 * ========================================================================= */
:root{
  --ilv-cream:#ffffff; --ilv-sand:#f4f5fb; --ilv-sand-2:#e8eaf6;
  --ilv-terra:#2e3192; --ilv-terra-d:#1f2266; --ilv-maroon:#2e3192; --ilv-maroon-d:#1f2266;
  --ilv-glow:#c9cbf5; --ilv-gold-light:#c9cbf5;
  --ilv-ink:#2e3192; --ilv-ink-2:#6d6e71;
  --ilv-radius:24px; --ilv-wrap:min(1200px, 100% - 48px);
  --ilv-shadow:0 30px 60px -34px rgba(46,49,146,0.45), 0 2px 6px -2px rgba(46,49,146,0.08);
}
.ilovesai-main{ background:var(--ilv-cream); }
.ilv-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font-size:0.76rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ilv-terra); }
.ilv-eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:currentColor; }
.ilv-eyebrow--light{ color:var(--ilv-gold-light); }

/* buttons */
.ilv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border-radius:999px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:1rem; line-height:1.2; text-decoration:none; white-space:nowrap;
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease; border:1.5px solid transparent;
}
.ilv-btn:hover{ transform:translateY(-2px); }
.ilv-btn:focus-visible{ outline:3px solid var(--ilv-glow); outline-offset:3px; }
.ilv-btn--primary{ background:var(--ilv-terra); color:#fff; box-shadow:0 16px 32px -14px rgba(46,49,146,0.7); }
.ilv-btn--primary:hover{ background:var(--ilv-terra-d); color:#fff; }
.ilv-btn--glass{ background:rgba(255,255,255,0.14); color:#fff; border-color:rgba(255,255,255,0.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ilv-btn--glass:hover{ background:rgba(255,255,255,0.26); color:#fff; }
.ilv-btn--soft{ background:var(--ilv-cream); color:var(--ilv-maroon); border-color:rgba(46,49,146,0.28); }
.ilv-btn--soft:hover{ border-color:var(--ilv-terra); color:var(--ilv-terra-d); background:#fff; }
.ilv-work .ilv-btn:focus-visible, .ilv-give .ilv-btn:focus-visible, .ilv-close .ilv-btn:focus-visible{ outline-color:var(--ilv-terra); }

/* ---------- 1. hero ---------- */
.ilv-hero{
  position:relative; isolation:isolate; overflow:hidden; min-height:min(90vh, 880px);
  display:flex; align-items:flex-end; color:#fff; background:var(--ilv-maroon-d);
}
.ilv-hero__media{ position:absolute; inset:0; z-index:-2; }
.ilv-hero__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.ilv-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(31,34,102,0.94) 0%, rgba(46,49,146,0.80) 34%, rgba(31,34,102,0.30) 64%, rgba(31,34,102,0.05) 100%),
    linear-gradient(0deg, rgba(31,34,102,0.70) 0%, rgba(31,34,102,0) 38%);
}
.ilv-hero__inner{ width:var(--ilv-wrap); margin:0 auto; padding:clamp(110px,16vh,170px) 0 clamp(150px,19vh,190px); }
.ilv-hero__impact{
  display:flex; width:fit-content; align-items:center; gap:12px; margin:0 0 26px; padding:7px 18px 7px 7px; border-radius:999px;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:0.92rem; font-weight:500;
}
.ilv-hero__impact b{ background:var(--ilv-terra); color:#fff; padding:6px 14px; border-radius:999px; font-weight:700; }
.ilv-hero__title{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; color:#fff; margin:0; max-width:13ch;
  font-size:clamp(2.7rem, 6.4vw, 5.6rem); line-height:1.02; letter-spacing:-0.022em; text-shadow:0 2px 30px rgba(31,34,102,0.4);
}
.ilv-hero__title em{ font-style:italic; color:var(--ilv-glow); }
.ilv-hero__signature{ margin:24px 0 0; max-width:40ch; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.5; color:#eef0fb; }
.ilv-hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.ilv-hero .ilovesai-hero-media__toggle{ right:24px; bottom:auto; top:24px; }

/* ---------- 1b. pathways (overlap the hero) ---------- */
.ilv-paths{ position:relative; z-index:3; width:var(--ilv-wrap); margin:-104px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ilv-path{
  display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:16px; padding:14px 16px 14px 14px;
  background:#fff; border-radius:22px; text-decoration:none; color:var(--ilv-ink); box-shadow:var(--ilv-shadow);
  border:1.5px solid rgba(46,49,146,0.08); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ilv-path:hover{ transform:translateY(-4px); border-color:rgba(46,49,146,0.35); box-shadow:0 40px 70px -34px rgba(46,49,146,0.55); }
.ilv-path:focus-visible{ outline:3px solid var(--ilv-terra); outline-offset:3px; }
.ilv-path__img{ width:92px; height:92px; border-radius:16px; overflow:hidden; background:var(--ilv-sand); }
.ilv-path__img picture, .ilv-path__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.ilv-path__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ilv-path__kicker{ font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ilv-terra); }
.ilv-path__title{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:1.22rem; line-height:1.2; color:var(--ilv-ink); }
.ilv-path__desc{ font-size:0.9rem; line-height:1.45; color:var(--ilv-ink-2); }
.ilv-path__arrow{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ilv-sand); color:var(--ilv-maroon); font-size:1.1rem; transition:background .3s, color .3s, transform .3s; }
.ilv-path:hover .ilv-path__arrow{ background:var(--ilv-terra); color:#fff; transform:translateX(3px); }
.ilv-path--give{ border-color:var(--ilv-terra); }
.ilv-path--give .ilv-path__arrow{ background:var(--ilv-terra); color:#fff; }

/* ---------- 2. our work (bento) ---------- */
.ilv-work{ width:var(--ilv-wrap); margin:0 auto; padding:clamp(80px,10vw,120px) 0 clamp(70px,8vw,100px); }
.ilv-work__intro{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px 64px; align-items:end; margin-bottom:40px; }
.ilv-work__intro .ilv-eyebrow{ grid-column:1/-1; margin:0; }
.ilv-work__intro h2{ margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; letter-spacing:-0.015em; color:var(--ilv-maroon); }
.ilv-work__intro p{ margin:0; font-size:1.08rem; line-height:1.7; color:var(--ilv-ink-2); }
.ilv-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(210px,20vw,260px); gap:16px; }
.ilv-tile{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--ilv-radius); text-decoration:none; color:#fff; background:var(--ilv-maroon); box-shadow:var(--ilv-shadow); }
.ilv-tile--xl{ grid-column:span 2; grid-row:span 2; }
.ilv-tile picture, .ilv-tile > picture img{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.ilv-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.ilv-tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(31,34,102,0) 30%, rgba(31,34,102,0.9) 100%); transition:background .4s; }
.ilv-tile:hover img{ transform:scale(1.06); }
.ilv-tile:hover::after{ background:linear-gradient(180deg, rgba(31,34,102,0.12) 10%, rgba(31,34,102,0.94) 100%); }
.ilv-tile:focus-visible{ outline:3px solid var(--ilv-terra); outline-offset:3px; }
.ilv-tile__body{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; display:flex; flex-direction:column; gap:6px; }
.ilv-tile__title{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:1.3rem; line-height:1.15; }
.ilv-tile__title::after{ content:" \2192"; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:500; opacity:0; transition:opacity .3s, margin .3s; }
.ilv-tile:hover .ilv-tile__title::after, .ilv-tile:focus-visible .ilv-tile__title::after{ opacity:1; }
.ilv-tile__desc{ font-size:0.9rem; line-height:1.45; color:rgba(255,255,255,0.92); }
.ilv-tile--xl .ilv-tile__body{ padding:32px; }
.ilv-tile--xl .ilv-tile__title{ font-size:clamp(1.7rem,2.6vw,2.3rem); }
.ilv-tile--xl .ilv-tile__desc{ font-size:1.05rem; max-width:40ch; }
.ilv-tile--book{ background:radial-gradient(circle at 70% 20%, #3b3fae 0%, var(--ilv-terra-d) 45%, var(--ilv-maroon-d) 100%); }
.ilv-tile--book::after{ background:linear-gradient(180deg, transparent 45%, rgba(31,34,102,0.75) 100%); }
.ilv-tile__cover{ position:absolute; left:50%; top:16px; width:34%; transform:translateX(-50%) rotate(-4deg); z-index:-1; border-radius:6px; overflow:hidden; box-shadow:0 18px 30px -12px rgba(31,34,102,0.8); background:#fff; transition:transform .6s ease; }
.ilv-tile__cover img{ height:auto; }
.ilv-tile--book:hover .ilv-tile__cover{ transform:translateX(-50%) rotate(0deg) scale(1.04); }
.ilv-tile--book:hover img{ transform:none; }

/* ---------- 3. impact ---------- */
.ilv-impact{
  position:relative; overflow:hidden; color:#fff; padding:clamp(80px,9vw,110px) 0 clamp(56px,6vw,72px);
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(201,203,245,0.22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(46,49,146,0.45), transparent 65%),
    linear-gradient(135deg, var(--ilv-terra-d) 0%, var(--ilv-maroon) 55%, var(--ilv-maroon-d) 100%);
}
.ilv-impact__inner{ width:var(--ilv-wrap); margin:0 auto; display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
.ilv-impact h2{ margin:0 0 18px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.2; color:#fff; }
.ilv-impact__num{ display:block; font-size:clamp(3.6rem,8.5vw,7rem); line-height:0.95; letter-spacing:-0.03em; color:var(--ilv-glow); margin-bottom:8px; }
.ilv-impact__stat p:not(.ilv-eyebrow){ margin:0; font-size:1.06rem; line-height:1.7; color:rgba(255,255,255,0.9); max-width:52ch; }
.ilv-states{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ilv-states a{
  display:flex; flex-direction:column; gap:4px; padding:20px 20px 18px; border-radius:18px; text-decoration:none; color:#fff; height:100%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); transition:background .3s, transform .3s, border-color .3s;
}
.ilv-states a:hover{ background:rgba(255,255,255,0.16); border-color:rgba(201,203,245,0.6); transform:translateY(-3px); }
.ilv-states a:focus-visible{ outline:3px solid var(--ilv-glow); outline-offset:3px; }
.ilv-states b{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1.25rem; font-weight:600; }
.ilv-states b::after{ content:" \2192"; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:400; color:var(--ilv-glow); }
.ilv-states span{ font-size:0.88rem; color:rgba(255,255,255,0.85); }
.ilv-reel.ilovesai-reel{ background:transparent; padding:52px 0 0; }
.ilv-reel .ilovesai-reel__track li{ width:clamp(200px,20vw,300px); }

/* ---------- 4. monthly giving ---------- */
.ilv-give{ width:var(--ilv-wrap); margin:clamp(70px,8vw,100px) auto; display:grid; grid-template-columns:1fr 1.1fr; gap:0; border-radius:32px; overflow:hidden; background:var(--ilv-sand); box-shadow:var(--ilv-shadow); }
.ilv-give__photo{ position:relative; min-height:420px; }
.ilv-give__photo picture, .ilv-give__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ilv-give__content{ padding:clamp(34px,4.5vw,60px); }
.ilv-give h2{ margin:0 0 14px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-0.015em; color:var(--ilv-maroon); }
.ilv-give__content > p{ margin:0; font-size:1.06rem; line-height:1.7; color:var(--ilv-ink-2); }
.ilv-give__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 26px; }
.ilv-match{ padding:18px 20px; border-radius:16px; background:#fff; border-left:4px solid var(--ilv-terra); }
.ilv-match p{ margin:0; font-size:0.95rem; line-height:1.6; color:var(--ilv-ink-2); }
.ilv-match .ilv-match__title{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:600; font-size:1.15rem; color:var(--ilv-ink); margin-bottom:6px; }
.ilv-match__ein{ display:inline-block; padding:2px 10px; border-radius:8px; background:var(--ilv-sand); color:var(--ilv-maroon); font-weight:700; white-space:nowrap; }
.ilv-match a{ color:var(--ilv-terra-d); font-weight:600; }
.ilv-match a:focus-visible{ outline:2px solid var(--ilv-terra); outline-offset:2px; }
.ilv-give__fine{ margin-top:16px !important; font-size:0.86rem !important; color:var(--ilv-ink-2) !important; }

/* ---------- 5. closing ---------- */
.ilv-close{ padding:0 0 clamp(80px,9vw,110px); }
.ilv-close__inner{ width:min(900px, 100% - 48px); margin:0 auto; text-align:center; }
.ilv-close h2{ position:relative; margin:0 0 14px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-style:italic; font-weight:500; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.3; color:var(--ilv-maroon); }
.ilv-close h2::before{ content:"\201C"; display:block; font-size:4.5rem; line-height:0.6; color:var(--ilv-terra); opacity:0.35; margin-bottom:12px; }
.ilv-close p{ margin:0 0 26px; font-size:1.08rem; color:var(--ilv-ink-2); }
.ilv-close__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .ilv-paths{ grid-template-columns:1fr; max-width:640px; margin-top:-80px; }
  .ilv-bento{ grid-template-columns:repeat(2,1fr); }
  .ilv-tile--xl{ grid-column:span 2; grid-row:span 1; }
  .ilv-impact__inner, .ilv-work__intro{ grid-template-columns:1fr; }
  .ilv-give{ grid-template-columns:1fr; }
  .ilv-give__photo{ min-height:300px; }
}
@media (max-width:640px){
  :root{ --ilv-wrap:calc(100% - 32px); }
  .ilv-hero{ min-height:auto; }
  .ilv-hero::before{ background:linear-gradient(0deg, rgba(31,34,102,0.95) 0%, rgba(46,49,146,0.82) 55%, rgba(46,49,146,0.5) 100%); }
  .ilv-hero__inner{ padding:96px 0 110px; }
  .ilv-hero__ctas .ilv-btn{ flex:1 1 100%; }
  .ilv-paths{ margin-top:-64px; gap:12px; }
  .ilv-path{ grid-template-columns:60px 1fr auto; }
  .ilv-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; gap:10px; }
  .ilv-tile--xl{ grid-column:span 2; grid-row:span 1; }
  .ilv-tile:not(.ilv-tile--xl) .ilv-tile__desc{ display:none; }
  .ilv-tile__body{ padding:14px; }
  .ilv-tile__title{ font-size:1.05rem; }
  .ilv-tile--xl .ilv-tile__body{ padding:20px; }
  .ilv-tile--xl .ilv-tile__desc{ font-size:0.92rem; }
  .ilv-path{ padding:12px 14px; }
  .ilv-path__img{ width:60px; height:60px; }
  .ilv-path__desc{ display:none; }
  .ilv-states{ grid-template-columns:1fr; }
  .ilv-give{ border-radius:24px; }
  .ilv-close__links .ilv-btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  .ilv-btn, .ilv-path, .ilv-tile img, .ilv-states a{ transition:none; }
  .ilv-btn:hover, .ilv-path:hover, .ilv-states a:hover{ transform:none; }
}

/* No-black sweep: form fields and dialogs inherit the brand ink instead of browser-default black */
input, select, textarea{ color:var(--ilovesai-ink,#2e3192); }
.ilovesai-lightbox{ color:#ffffff; }

/* =========================================================================
 * BRAND LAYER (October 2026) — official I Love Sai design system
 * -------------------------------------------------------------------------
 * Indigo #2E3192 primary · Orange #F4A125 for giving actions ONLY ·
 * Gray #6D6E71 body text · White background · Inter throughout.
 * Also applies the October 11 QA/UX review fixes: desktop top-level
 * navigation, two-tier buttons, fewer competing CTAs, stronger hero
 * overlay, a labeled hero pause control, and inline form errors.
 * Contrast (WCAG 2.1 AA): deep indigo on orange 6.7:1 (hover 5.8:1),
 * gray on white 5.1:1, indigo on white 10.7:1, white on indigo 10.7:1,
 * periwinkle #C9CBF5 on indigo 6.8:1.
 * ========================================================================= */
:root{
  --ils-indigo:#2e3192; --ils-indigo-deep:#1f2266; --ils-indigo-mid:#3b3fae;
  --ils-orange:#f4a125; --ils-orange-hover:#e8920f;
  --ils-gray:#6d6e71; --ils-mist:#f4f5fb; --ils-mist-2:#e8eaf6; --ils-line:#e1e3f0;
  --ils-periwinkle:#c9cbf5; --ils-white:#ffffff;
  --ils-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- type ---------- */
body{ font-family:var(--ils-font); color:var(--ils-gray); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ font-family:var(--ils-font); font-weight:700; letter-spacing:-0.018em; color:var(--ils-indigo); }
.ilv-hero__title{ font-weight:800; letter-spacing:-0.03em; line-height:1.0; }
.ilv-hero__title em{ font-style:normal; color:var(--ils-periwinkle); }
.ilv-hero__signature, .ilovesai-cinema__signature{ font-style:normal; font-weight:400; }
.ilv-close h2{ font-style:normal; font-weight:600; letter-spacing:-0.02em; color:var(--ils-indigo); }
.ilv-close h2::before{ color:var(--ils-indigo); opacity:0.2; }
.ilv-work__intro h2, .ilv-give h2, .ilv-impact h2{ font-weight:700; letter-spacing:-0.025em; }
.ilv-path__title, .ilv-tile__title, .ilv-states b{ font-weight:700; letter-spacing:-0.01em; }
.ilv-eyebrow, .ilovesai-eyebrow, .ilv-path__kicker{ color:var(--ils-indigo); }
.ilv-eyebrow--light{ color:var(--ils-periwinkle); }
.ilv-impact__num{ color:var(--ils-white); font-weight:800; }

/* ---------- buttons: exactly two tiers ----------
 * Tier 1 (give): solid orange, used only for money — Donate, PayPal,
 *   monthly gifts. Orange appears nowhere else on the site.
 * Tier 2 (everything else): indigo outline on light backgrounds, white
 *   outline on dark ones. Fills indigo on hover.
 * Form submit buttons are a separate, solid-indigo control (they act on a
 *   form rather than inviting a choice). */
.ilv-btn, .ilv-btn--primary, .ilv-btn--soft, .ilv-btn--line,
.ilovesai-btn, .ilovesai-btn--ghost,
.wp-block-button.ilovesai-btn,
.wp-block-button:not(.ilovesai-btn) > .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px; border-radius:999px;
  font-family:var(--ils-font); font-weight:600; font-size:1rem; line-height:1.2; letter-spacing:0;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  background:transparent !important; color:var(--ils-indigo) !important;
  border:1.5px solid var(--ils-indigo) !important; box-shadow:none !important;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wp-block-button.ilovesai-btn{ padding:0; }
.wp-block-button.ilovesai-btn > .wp-block-button__link{ display:flex; align-items:center; justify-content:center; padding:0 26px; min-height:45px; }
.ilv-btn:hover, .ilv-btn--primary:hover, .ilv-btn--soft:hover, .ilv-btn--line:hover,
.ilovesai-btn:hover, .ilovesai-btn--ghost:hover, .wp-block-button.ilovesai-btn:hover,
.wp-block-button:not(.ilovesai-btn) > .wp-block-button__link:hover{
  background:var(--ils-indigo) !important; color:var(--ils-white) !important; border-color:var(--ils-indigo) !important; transform:none;
}
/* on dark backgrounds */
.ilv-btn--line-light, .ilv-btn--glass, .ilovesai-btn--light, .ilovesai-giving__btn--ghost{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:999px;
  font-family:var(--ils-font); font-weight:600; font-size:1rem; text-decoration:none; white-space:nowrap;
  background:transparent !important; color:var(--ils-white) !important; border:1.5px solid rgba(255,255,255,0.85) !important;
  box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.ilv-btn--line-light:hover, .ilv-btn--glass:hover, .ilovesai-btn--light:hover, .ilovesai-giving__btn--ghost:hover{
  background:var(--ils-white) !important; color:var(--ils-indigo) !important; border-color:var(--ils-white) !important;
}
/* Tier 1 — giving. Explicit class, plus any button that leads to PayPal
 * or the Make It Possible page (so editors can't accidentally make a
 * donate button look secondary, or a secondary button look like money). */
.ilv-btn--give, a.ilv-btn--give,
.ilovesai-header__donate,
.ilovesai-actionbar a.ilovesai-actionbar__donate,
.ilovesai-way a.ilovesai-way__cta,
.ilovesai-giving__btn:not(.ilovesai-giving__btn--ghost),
.wp-block-button.ilovesai-btn:has(> a[href*="paypal.com/donate"]),
.wp-block-button.ilovesai-btn:has(> a[href*="/make-it-possible"]),
.wp-block-button:not(.ilovesai-btn) > .wp-block-button__link[href*="paypal.com/donate"],
.wp-block-button:not(.ilovesai-btn) > .wp-block-button__link[href*="/make-it-possible"]{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:999px;
  font-family:var(--ils-font); font-weight:700; font-size:1rem; text-decoration:none; white-space:nowrap;
  background:var(--ils-orange) !important; color:var(--ils-indigo-deep) !important; border:1.5px solid var(--ils-orange) !important;
  box-shadow:0 10px 24px -14px rgba(232,146,15,0.9) !important;
}
.wp-block-button.ilovesai-btn:has(> a[href*="paypal.com/donate"]),
.wp-block-button.ilovesai-btn:has(> a[href*="/make-it-possible"]){ padding:0; }
.ilv-btn--give:hover, .ilovesai-header__donate:hover, .ilovesai-actionbar a.ilovesai-actionbar__donate:hover,
.ilovesai-way a.ilovesai-way__cta:hover, .ilovesai-giving__btn:not(.ilovesai-giving__btn--ghost):hover,
.wp-block-button.ilovesai-btn:has(> a[href*="paypal.com/donate"]):hover,
.wp-block-button.ilovesai-btn:has(> a[href*="/make-it-possible"]):hover,
.wp-block-button:not(.ilovesai-btn) > .wp-block-button__link[href*="paypal.com/donate"]:hover,
.wp-block-button:not(.ilovesai-btn) > .wp-block-button__link[href*="/make-it-possible"]:hover{
  background:var(--ils-orange-hover) !important; color:var(--ils-indigo-deep) !important; border-color:var(--ils-orange-hover) !important;
}
/* focus: one consistent ring everywhere */
.ilv-btn:focus-visible, .ilovesai-btn:focus-within, .wp-block-button__link:focus-visible,
.ilovesai-header__donate:focus-visible, .ilovesai-actionbar a:focus-visible, .ilovesai-way a:focus-visible{
  outline:3px solid var(--ils-indigo) !important; outline-offset:3px !important;
}
.ilv-hero .ilv-btn:focus-visible, .ilv-impact .ilv-btn:focus-visible{ outline-color:var(--ils-white) !important; }
/* form submit buttons: solid indigo */
button[type="submit"].ilovesai-btn, input[type="submit"]{
  background:var(--ils-indigo) !important; color:var(--ils-white) !important; border-color:var(--ils-indigo) !important;
}
button[type="submit"].ilovesai-btn:hover, input[type="submit"]:hover{ background:var(--ils-indigo-deep) !important; border-color:var(--ils-indigo-deep) !important; }
.ilv-textlink{ align-self:center; color:var(--ils-indigo); font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.ilv-textlink:hover{ color:var(--ils-indigo-deep); text-decoration-thickness:2px; }
.ilv-textlink:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:3px; border-radius:4px; }
/* cards and arrows that used the old accent */
.ilv-path--give{ border-color:var(--ils-mist-2); }
.ilv-path--give .ilv-path__arrow, .ilv-path__arrow{ background:var(--ils-mist); color:var(--ils-indigo); }
.ilv-path:hover .ilv-path__arrow{ background:var(--ils-indigo); color:var(--ils-white); }
.ilovesai-path--give, .ilovesai-way--featured{ border-color:var(--ils-indigo); }

/* ---------- header: desktop top-level navigation ---------- */
.ilovesai-header{ gap:24px; padding:16px 0; }
.ilovesai-topnav{ display:none; margin-left:auto; }
.ilovesai-topnav__list{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.ilovesai-topnav__list > li{ position:relative; }
.ilovesai-topnav__link{
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:8px; cursor:pointer;
  font-family:var(--ils-font); font-size:0.97rem; font-weight:600; color:var(--ils-indigo); text-decoration:none; list-style:none;
  border:0; background:none; white-space:nowrap;
}
.ilovesai-topnav__summary::-webkit-details-marker{ display:none; }
.ilovesai-topnav__link:hover, .ilovesai-topnav__group[open] > .ilovesai-topnav__summary{ background:var(--ils-mist); color:var(--ils-indigo-deep); }
.ilovesai-topnav__link:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:1px; }
.ilovesai-topnav__summary svg{ transition:transform .15s ease; }
.ilovesai-topnav__group[open] > .ilovesai-topnav__summary svg{ transform:rotate(180deg); }
.ilovesai-topnav__link[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--ils-indigo); border-radius:8px 8px 0 0; }
.ilovesai-topnav__panel{ left:0; right:auto; width:320px; max-width:none; padding:8px; border-radius:14px; border:1px solid var(--ils-line); box-shadow:0 24px 48px -18px rgba(24,27,82,0.28); }
.ilovesai-topnav__panel a{ display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:10px; font-weight:600; color:var(--ils-indigo); }
.ilovesai-topnav__panel a span{ font-size:0.84rem; font-weight:400; color:var(--ils-gray); }
.ilovesai-topnav__panel a:hover{ background:var(--ils-mist); color:var(--ils-indigo-deep); }
.ilovesai-menu__label{ display:block; padding:12px 14px 4px; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ils-gray); }
.ilovesai-menu--mobile{ margin-left:auto; }
.ilovesai-menu__panel a{ color:var(--ils-indigo); }
.ilovesai-header__donate{ min-height:44px; padding:0 24px; flex-shrink:0; }
@media (min-width:1080px){
  .ilovesai-topnav{ display:block; }
  .ilovesai-menu--mobile{ display:none; }
}
@media (max-width:600px){
  .ilovesai-header__donate{ min-height:42px; padding:0 18px; }
  .ilovesai-header{ gap:12px; }
}

/* ---------- hero: readable over busy photos ---------- */
.ilv-hero{ background:var(--ils-indigo-deep); }
.ilv-hero__media video{ filter:blur(2px) saturate(0.85); transform:scale(1.03); }
.ilv-hero::before{
  background:
    linear-gradient(100deg, rgba(31,34,102,0.95) 0%, rgba(31,34,102,0.88) 38%, rgba(46,49,146,0.62) 70%, rgba(46,49,146,0.45) 100%),
    linear-gradient(0deg, rgba(31,34,102,0.75) 0%, rgba(31,34,102,0) 40%);
}
.ilv-hero__impact{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:var(--ils-white); }
.ilv-hero__impact b{ background:var(--ils-white); color:var(--ils-indigo); }
.ilv-hero__signature{ color:#eef0fb; }
/* pause control: a labeled pill aligned with the hero content, not a stray icon */
.ilv-hero .ilovesai-hero-media__toggle{
  top:24px; bottom:auto; left:auto; right:max(16px, calc((100% - 1200px) / 2));
  width:auto; height:36px; padding:0 14px 0 12px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ils-font); font-size:0.82rem; font-weight:600; color:var(--ils-white);
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.4);
}
.ilv-hero .ilovesai-hero-media__toggle:hover{ background:rgba(255,255,255,0.22); }
.ilovesai-hero-media__toggle .i-play, .ilovesai-hero-media__toggle .i-pause{ flex:none; }
@media (max-width:640px){ .ilv-hero .ilovesai-hero-media__toggle{ top:16px; right:16px; } }
@media (max-width:640px){
  .ilv-hero::before{ background:linear-gradient(0deg, rgba(31,34,102,0.96) 0%, rgba(31,34,102,0.88) 60%, rgba(46,49,146,0.62) 100%); }
}

/* ---------- impact band, giving card, footer ---------- */
.ilv-impact{
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(201,203,245,0.18), transparent 60%),
    linear-gradient(135deg, var(--ils-indigo-mid) 0%, var(--ils-indigo) 50%, var(--ils-indigo-deep) 100%);
}
.ilv-states b::after{ color:var(--ils-periwinkle); }
.ilv-give{ background:var(--ils-mist); }
.ilv-give h2{ color:var(--ils-indigo); }
.ilv-match{ border-left-color:var(--ils-indigo); }
.ilv-match__ein{ background:var(--ils-mist-2); color:var(--ils-indigo); }
.ilovesai-footer-wrap{ background:var(--ils-mist); }
.ilovesai-footer{ border-top:0; }
.ilovesai-footnav{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; padding:36px 0 32px; margin:8px 0 28px; border-top:1px solid var(--ils-line); border-bottom:1px solid var(--ils-line); }
.ilovesai-footnav div{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ilovesai-footnav__title{ margin:0 0 4px; font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ils-indigo); }
.ilovesai-footnav a{ color:var(--ils-gray); text-decoration:none; font-size:0.95rem; }
.ilovesai-footnav a:hover{ color:var(--ils-indigo); text-decoration:underline; text-underline-offset:3px; }
.ilovesai-footnav a:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; border-radius:3px; }
@media (max-width:781px){ .ilovesai-footnav{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ilovesai-social a{ color:var(--ils-indigo); }
.ilovesai-actionbar__volunteer{ color:var(--ils-indigo) !important; border-color:var(--ils-indigo) !important; }
.ilovesai-skip{ background:var(--ils-indigo); }
.ilovesai-skip:focus{ outline-color:var(--ils-orange); }

/* ---------- inline form errors (replaces browser tooltips) ---------- */
.ilovesai-field-error{ display:block; margin-top:6px; font-size:0.88rem; font-weight:500; color:#a3261c; }
.ilovesai-field-error::before{ content:"! "; font-weight:700; }
[aria-invalid="true"]{ border-color:#a3261c !important; box-shadow:0 0 0 1px #a3261c !important; }
.ilovesai-form-summary{ margin:0 0 18px; padding:14px 16px; border-radius:10px; background:#fbeceb; color:#8a2e26; border:1px solid #f1c3bf; font-weight:500; }
.ilovesai-form-summary:focus{ outline:3px solid #a3261c; outline-offset:2px; }

/* ---------- other ways to give (Make It Possible) ---------- */
.ilovesai-way__steps{ margin:10px 0 0; padding-left:20px; }
.ilovesai-way__steps li{ margin:6px 0; }

/* ---------- add to calendar (Events) ---------- */
.ilovesai-addcal{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:0.9rem; }
.ilovesai-addcal a{ color:var(--ils-indigo); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ilovesai-addcal a:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; border-radius:3px; }
.ilovesai-topnav__summary[data-current="true"]{ box-shadow:inset 0 -2px 0 var(--ils-indigo); border-radius:8px 8px 0 0; }

/* ---------- small content helpers (Oct 2026) ---------- */
.ilovesai-card__link{ display:inline-block; margin-top:12px; color:var(--ils-indigo); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.ilovesai-card__link:hover{ color:var(--ils-indigo-deep); }
.ilovesai-card__link:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; border-radius:3px; }
.ilovesai-crosslink, .ilovesai-orgline, .ilovesai-way__howto{
  margin:28px 0; padding:16px 20px; border-radius:12px; background:var(--ils-mist); color:var(--ils-gray); border-left:4px solid var(--ils-indigo);
}
.ilovesai-crosslink a, .ilovesai-orgline a{ color:var(--ils-indigo); font-weight:600; }
.ilovesai-form-note{ margin:0 0 14px; font-size:0.9rem; color:var(--ils-gray); }

/* eyebrows inside intro blocks were picking up the paragraph gray */
.ilv-work__intro .ilv-eyebrow, .ilv-give__content .ilv-eyebrow, p.ilv-eyebrow{ color:var(--ils-indigo); }
.ilv-impact .ilv-eyebrow--light, .ilv-impact__stat p.ilv-eyebrow{ color:var(--ils-periwinkle); }
/* long button labels wrap on phones instead of pushing the page sideways */
@media (max-width:640px){
  .ilv-btn, .ilovesai-btn, .wp-block-button.ilovesai-btn, .wp-block-button__link{ white-space:normal !important; text-align:center; max-width:100%; height:auto; }
  .wp-block-button.ilovesai-btn > .wp-block-button__link{ padding:12px 22px; line-height:1.3; }
}
button, input, select, textarea{ font-family:inherit; }

/* ---------- Zelle addresses (Make It Possible) ---------- */
.ilovesai-zelle{ list-style:none; margin:12px 0 14px; padding:0; display:grid; gap:8px; }
.ilovesai-zelle li{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 12px; padding:10px 14px; border-radius:10px; background:var(--ils-mist); }
.ilovesai-zelle span{ color:var(--ils-gray); }
.ilovesai-zelle strong{ color:var(--ils-indigo); font-weight:700; user-select:all; overflow-wrap:anywhere; }

/* =========================================================================
 * READABILITY (October 2026) — At a glance, On this page, Read more, FAQ
 * Long pages lead with a short summary and one next step; long sections
 * fold behind "Read more" (assets/js/ilovesai-readability.js).
 * ========================================================================= */
.ilovesai-glance{
  position:relative; margin:8px 0 22px; padding:28px 30px 26px; border-radius:20px;
  background:linear-gradient(180deg, var(--ils-mist) 0%, #ffffff 100%);
  border:1px solid var(--ils-line); box-shadow:0 20px 44px -30px rgba(31,34,102,0.35);
}
.ilovesai-glance::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:4px; border-radius:0 4px 4px 0; background:var(--ils-indigo); }
.ilovesai-glance__title{ margin:0 0 10px !important; font-size:0.78rem !important; font-weight:700 !important; letter-spacing:0.16em !important; text-transform:uppercase; color:var(--ils-indigo) !important; }
.ilovesai-glance__lead{ margin:0 0 16px !important; font-size:1.18rem; line-height:1.55; color:var(--ils-indigo-deep); font-weight:500; max-width:62ch; }
.ilovesai-glance__points{ list-style:none; margin:0 0 20px !important; padding:0 !important; display:grid; gap:10px; }
.ilovesai-glance__points li{ position:relative; margin:0 !important; padding-left:28px; line-height:1.55; color:var(--ils-gray); }
.ilovesai-glance__points li::before{
  content:""; position:absolute; left:2px; top:0.42em; width:14px; height:14px; border-radius:50%;
  background:var(--ils-indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ilovesai-glance__points strong{ color:var(--ils-indigo); font-weight:700; }
.ilovesai-glance__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:0 !important; }
@media (max-width:640px){ .ilovesai-glance{ padding:22px 20px 20px; } .ilovesai-glance__lead{ font-size:1.06rem; } }

.ilovesai-jumpnav{ margin:0 0 36px; }
.ilovesai-jumpnav__label{ margin:0 0 8px !important; font-size:0.75rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ils-gray); }
.ilovesai-jumpnav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ilovesai-jumpnav li{ margin:0; }
.ilovesai-jumpnav a{
  display:inline-flex; align-items:center; min-height:36px; padding:6px 14px; border-radius:999px; font-size:0.9rem; font-weight:600;
  color:var(--ils-indigo); background:#ffffff; border:1px solid var(--ils-line); text-decoration:none; transition:background .2s, border-color .2s;
}
.ilovesai-jumpnav a:hover{ background:var(--ils-mist); border-color:var(--ils-indigo); }
.ilovesai-jumpnav a:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; }
.wp-block-post-content h2[id], .wp-block-post-content [id]{ scroll-margin-top:24px; }

.ilovesai-fold__toggle{
  display:inline-flex; align-items:center; gap:6px; margin:4px 0 8px; padding:6px 2px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:0.95rem; font-weight:600; color:var(--ils-indigo); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px;
}
.ilovesai-fold__toggle::after{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.ilovesai-fold__toggle[aria-expanded="true"]::after{ transform:translateY(1px) rotate(-135deg); }
.ilovesai-fold__toggle:hover{ color:var(--ils-indigo-deep); }
.ilovesai-fold__toggle:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; border-radius:4px; }
.ilovesai-fold > :first-child{ margin-top:0; }

.ilovesai-soon{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; color:var(--ils-gray); background:var(--ils-mist); border:1px solid var(--ils-line); vertical-align:middle; }

/* FAQ */
.ilovesai-faq-tools{ margin:8px 0 22px; padding:18px 20px; border-radius:16px; background:var(--ils-mist); border:1px solid var(--ils-line); }
.ilovesai-faq-tools__label{ display:block; margin-bottom:8px; font-weight:700; color:var(--ils-indigo); }
.ilovesai-faq-tools__row{ display:flex; flex-wrap:wrap; gap:10px; }
.ilovesai-faq-tools input[type="search"]{ flex:1 1 240px; min-height:46px; padding:10px 14px; border-radius:10px; border:1.5px solid var(--ils-line); background:#fff; font:inherit; color:var(--ils-indigo); }
.ilovesai-faq-tools input[type="search"]:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:1px; border-color:var(--ils-indigo); }
.ilovesai-faq-tools__all{ min-height:46px; padding:0 18px; border-radius:999px; border:1.5px solid var(--ils-indigo); background:#fff; color:var(--ils-indigo); font:inherit; font-weight:600; cursor:pointer; }
.ilovesai-faq-tools__all:hover{ background:var(--ils-indigo); color:#fff; }
.ilovesai-faq-tools__all:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; }
.ilovesai-faq-tools__status{ margin:10px 0 0 !important; font-size:0.92rem; color:var(--ils-gray); min-height:1em; }
.ilovesai-faq-tools__status:empty{ display:none; }
.ilovesai-faq-tools__status a{ color:var(--ils-indigo); font-weight:600; }
.ilovesai-faq__item{ border-bottom:1px solid var(--ils-line); padding:0 !important; margin:0 !important; }
.ilovesai-faq__item h2{ margin:0 !important; font-size:1.12rem !important; }
.ilovesai-faq__q{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; font-weight:700; color:var(--ils-indigo); line-height:1.35;
}
.ilovesai-faq__q svg{ flex:none; transition:transform .2s; }
.ilovesai-faq__item.is-open .ilovesai-faq__q svg{ transform:rotate(180deg); }
.ilovesai-faq__q:hover{ color:var(--ils-indigo-deep); }
.ilovesai-faq__q:focus-visible{ outline:3px solid var(--ils-indigo); outline-offset:2px; border-radius:6px; }
.ilovesai-faq__item .body{ padding:0 4px 18px; }
.ilovesai-faq__item .body > :first-child{ margin-top:0; }

/* Impact archive "Show more" */
.ilovesai-archive__more{ display:flex !important; margin:22px auto 0 !important; }
.ilovesai-archive__more[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .ilovesai-fold__toggle::after, .ilovesai-faq__q svg, .ilovesai-jumpnav a{ transition:none; }
}
.ilovesai-statement .body > * + *, .ilovesai-fold > * + *{ margin-top:14px; }
.ilovesai-statement .body > .ilovesai-fold{ margin-top:14px; }
.ilovesai-statement .body .ilovesai-fold__toggle{ margin-top:10px; }
.ilovesai-statement-list .ilovesai-faq__item{ display:block; padding:0; border-top:0; }
.ilovesai-statement-list .ilovesai-faq__item:first-child{ border-top:1px solid var(--ils-line); }
.ilovesai-faq__item h2{ text-transform:none !important; letter-spacing:-0.01em !important; color:var(--ils-indigo) !important; font-weight:700 !important; }

/* Touch targets (WCAG 2.2 AA 2.5.8): footer social links were 22px tall. */
.ilovesai-social{ flex-wrap:wrap; gap:8px 18px; }
.ilovesai-social a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; }

/* About: guiding statement after Purpose / Mission / Vision. */
.ilovesai-statement-close{ margin:28px 0 0; padding:20px 24px; border-left:4px solid var(--ils-indigo,#2e3192); background:var(--ils-mist,#f4f5fb); border-radius:0 12px 12px 0; color:var(--ils-indigo,#2e3192); font-size:1.15rem; font-style:italic; line-height:1.6; max-width:880px; }
@media (max-width:640px){ .ilovesai-statement-close{ padding:16px 18px; font-size:1.05rem; } }