/* =====================================================================
   uefoundation.ai — site stylesheet
   Recreated from the Squarespace 7.1 build (measured 1 Nov 2026 at
   1440 / 390 px). Values in comments are the live-site measurements.
   ===================================================================== */

:root {
  /* palette (from live computed styles) */
  --blue: #1e89a9;        /* "dark" theme section bg  rgb(30,137,169) */
  --ice: #e5f0f5;         /* "white" theme bg / text on blue  rgb(229,240,245) */
  --pale: #afd6de;        /* "light" theme bg, body bg, footer buttons  rgb(175,214,222) */
  --ink: #383838;         /* body text on light, dark buttons  rgb(56,56,56) */
  --stone: #a2a8a9;       /* muted headings / buttons on dark  rgb(162,168,169) */
  --slate: #314554;       /* header bar */
  --charcoal: #383838;

  /* type */
  --f-head: "Playfair Display", Georgia, serif;
  --f-body: "Lora", Georgia, serif;
  --f-meta: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* fluid heading sizes: exact at 1440px, tracks the live site's scaling
     (1920 → ~1.19×, 1024 → ~0.79×, 800 → ~0.66×) */
  --h1: calc(69.84px * 0.29 + 69.84 * 0.71 * 100vw / 1440);
  --h2: calc(49.104px * 0.29 + 49.104 * 0.71 * 100vw / 1440);
  --h3: calc(38.736px * 0.29 + 38.736 * 0.71 * 100vw / 1440);
  --h4: calc(21.456px * 0.45 + 21.456 * 0.55 * 100vw / 1440);
  --large: calc(26.64px * 0.5 + 26.64 * 0.5 * 100vw / 1440);
  --body: 16.2px;          /* "small" text, used for most paragraphs */
  --normal: 18px;          /* "normal" text, blockquotes, base */
  --btn: 16.2px;

  --gutter: 3vw;           /* 43.2px @1440 */
  --col-gap: 11px;
  --header-h: 96px;
}

@media (max-width: 767px) {
  :root {
    --h1: 46.384px; --h2: 34.23px; --h3: 28.15px; --h4: 18.03px;
    --large: 21.06px; --body: 14.99px; --normal: 16px; --btn: 14.99px;
    --gutter: 6vw;         /* 23.4px @390 */
    --header-h: 84px;
  }
}
@media (min-width: 1920px) { :root { --body: 15.7px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pale); color: var(--ink);
  font: 400 var(--normal)/1.8 var(--f-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-head); font-weight: 500; margin: 0;
  text-transform: capitalize;            /* live theme setting */
}
h1 { font-size: var(--h1); line-height: 1.32; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); line-height: 1.392; letter-spacing: -0.02em; }
h3 { font-size: var(--h3); line-height: 1.428; letter-spacing: -0.02em; }
h4 { font-size: var(--h4); line-height: 1.488; letter-spacing: -0.02em; }
.nocap { text-transform: none; }

.t-body  { font-size: var(--body); line-height: 1.8; }
.t-normal{ font-size: var(--normal); line-height: 1.8; }
.t-large { font-size: var(--large); line-height: 1.8; }
.meta    { font-family: var(--f-meta); font-size: 15px; font-weight: 400; letter-spacing: .02em; line-height: 1.6; }
.center  { text-align: center; }
.justify { text-align: justify; }
em, i { font-style: italic; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ice); color: var(--ink); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- section themes ---------- */
.section { position: relative; overflow: hidden; }
.section > .inner { position: relative; z-index: 2; padding: 0 var(--gutter); }
.theme-blue  { background: var(--blue); color: var(--ice); }
.theme-ice   { background: var(--ice);  color: var(--ink); }
.theme-pale  { background: var(--pale); color: var(--ink); }
.theme-dark  { background: var(--charcoal); color: var(--ice); }
.theme-dark h1, .theme-dark h2, .theme-dark h3 { color: var(--stone); }

/* the 24-column Fluid Engine grid (desktop) */
.grid {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: var(--col-gap); align-items: start;
}
@media (max-width: 767px) {
  .grid { display: block; }
  .grid > * + * { margin-top: 24px; }
}

/* horizontal rules */
.rule { height: 1px; border: 0; margin: 9px 0; background: currentColor; opacity: .55; }
.theme-ice .rule, .theme-pale .rule { background: var(--ink); opacity: 1; }
.theme-blue .rule { background: var(--ice); opacity: .75; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 var(--btn)/1.2 var(--f-meta); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 0; text-align: center;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .8; }
/* "small" = text + 2px underline, 69px tall at 1440 */
.btn-line { min-height: 69px; padding: 0 23.4px; border-bottom: 2px solid currentColor; background: none; color: var(--stone); }
.theme-blue .btn-line, .footer .btn-line { color: var(--pale); }
/* "medium" = solid */
.btn-solid { padding: 18px 23.4px; font-size: calc(var(--btn) * 1.111); background: var(--stone); color: var(--ink); }
.btn-dark  { padding: 18px 23.4px; font-size: calc(var(--btn) * 1.111); background: var(--ink); color: var(--ice); }
@media (max-width: 767px) { .btn-line { min-height: 59px; padding: 0 20.8px; } .btn-solid, .btn-dark { padding: 16px 20.8px; } }

/* ---------- header ---------- */
.header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--header-h); background: var(--slate);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: space-between;
  padding: 7.2px var(--gutter);
}
.header .logo img { width: 82px; height: 82px; }
.nav { display: flex; gap: 28.8px; }
.nav a {
  color: var(--ice); text-decoration: none; font: 400 18px/32.4px var(--f-body);
  padding: 1.8px 0;
  background: linear-gradient(var(--ice), var(--ice)) no-repeat left bottom / 0 1px;
  transition: background-size .25s ease;
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; }
.burger { display: none; }
/* mobile header + overlay menu */
@media (max-width: 767px) {
  .header { padding: 23.4px; }
  .header .logo img { width: 30px; height: 30px; }
  .nav { display: none; }
  .burger { display: block; background: none; border: 0; width: 47px; height: 37px; padding: 8px; cursor: pointer; position: relative; z-index: 31; }
  .burger span { display: block; height: 1px; background: var(--ice); margin: 7px 0; transition: transform .25s, opacity .25s; }
  .menu-open .burger span { background: var(--ink); }
  .menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu {
    position: fixed; inset: 0; background: var(--pale); z-index: 30;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
  }
  .menu-open .menu { opacity: 1; visibility: visible; }
  .menu a { color: var(--ink); text-decoration: none; font: 400 33.15px/1 var(--f-body); margin: 11.7px 19.5px; }
  .menu-open .header .logo { position: relative; z-index: 31; }
}
@media (min-width: 768px) { .menu { display: none; } }

/* first section clears the absolute header (live: 96px + 43.2px top pad) */
.first > .inner { padding-top: calc(var(--header-h) + 43.2px); }
@media (max-width: 767px) { .first > .inner { padding-top: calc(var(--header-h) + 11.7px); } }

/* ---------- footer (identical on every page) ---------- */
.footer { background: var(--blue); color: var(--ice); padding: 6px var(--gutter) 46px; }
.footer .links {
  display: grid; grid-template-columns: repeat(24, minmax(0,1fr)); column-gap: var(--col-gap);
  align-items: start;
}
.footer .links .btn-line { min-height: 69px; margin-top: 34px; line-height: 1.25; padding: 0 12px; }
/* live positions @1440: buttons x=100/384/896/1180 (160w), logo x=612 (216w) */
.footer .f1 { grid-column: 2 / span 3; }
.footer .f2 { grid-column: 7 / span 3; }
.footer .flogo { grid-column: 11 / span 4; }
.footer .flogo img { width: 100%; max-width: 216px; height: auto; aspect-ratio: 1; }
.footer .f3 { grid-column: 16 / span 3; }
.footer .f4 { grid-column: 21 / span 3; }
.footer .tagline { max-width: 1126px; margin: -18px auto 0; text-align: center; font-size: var(--body); line-height: 1.8; font-style: italic; }
@media (max-width: 767px) {
  .footer { padding: 0 var(--gutter) 40px; }
  .footer .links { display: flex; flex-direction: column; align-items: stretch; }
  .footer .links .btn-line { width: 100%; margin-top: 0; min-height: 59px; }
  .footer .flogo { margin: 20px auto; }
  .footer .btn-line br, .philosophy .label br { display: none; }
  .footer .flogo img { width: 199px; height: 199px; }
  .footer .tagline { margin-top: 16px; }
}

/* ---------- animated backgrounds (replace Squarespace stock video) ---------- */
.bg-particles, .bg-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-particles {
  background:
    radial-gradient(ellipse 40% 55% at 58% 0%, rgba(58,140,168,.35), transparent 70%),
    radial-gradient(ellipse 30% 40% at 85% 10%, rgba(58,140,168,.18), transparent 70%),
    #383838;
}
.bg-particles canvas { width: 100%; height: 100%; display: block; }
.bg-veil {
  background:
    radial-gradient(ellipse 18% 22% at 52% 45%, rgba(36,150,190,.85), transparent 70%),
    radial-gradient(ellipse 55% 35% at 30% 60%, rgba(205,210,214,.75), transparent 70%),
    radial-gradient(ellipse 55% 35% at 75% 35%, rgba(205,210,214,.65), transparent 70%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(120,128,132,.6), transparent 80%),
    #3a3d3f;
  filter: blur(30px); transform: scale(1.15);
  animation: veil 24s ease-in-out infinite alternate;
}
@keyframes veil {
  0%   { transform: scale(1.15) rotate(0deg); }
  100% { transform: scale(1.25) rotate(4deg); }
}
.bg-pause {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 0; color: #fff; font-size: 10px; cursor: pointer; line-height: 24px; padding: 0;
}
@media (prefers-reduced-motion: reduce) { .bg-veil { animation: none; } }

/* ---------- accordions (Partnership, Attribution) ---------- */
.acc { border-top: 1px solid currentColor; }
.acc details { border-bottom: 1px solid currentColor; }
.acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: 0 0 9px; height: 9px; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.acc details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.acc .desc { padding-bottom: 30px; }

/* ---------- forms ---------- */
.form label { display: block; font-size: 12px; margin: 0 0 6px; }
.form .req { opacity: .7; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%; font: 400 var(--normal)/1.8 var(--f-body); color: #000;
  background: rgba(250,250,250,.8); border: 0; border-bottom: 1px solid transparent; padding: 5px 10px; border-radius: 0;
}
.form select { font-size: var(--body); color: rgba(0,0,0,.55); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #383838 50%), linear-gradient(135deg, #383838 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
.form textarea { min-height: 100px; resize: vertical; }
.form .field { margin-bottom: 22px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form .legend { font-size: 14px; margin-bottom: 8px; }
.form .opt { display: flex; align-items: center; gap: 11px; font-size: var(--body); margin: 2px 0; }
.form .status { font-size: var(--body); margin-top: 12px; min-height: 1.5em; }

/* ---------- utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .hide-m { display: none !important; } }
@media (min-width: 768px) { .hide-d { display: none !important; } }