/* ===========================================================================
   UD EDUCATION + TRUST LAYER  —  website/learn/learn.css
   Loaded AFTER ud.css on the /learn/* pages and /our-mission, so it can refine
   the shared chrome without touching it.

   COLOUR RULE: every colour here is either #fff, a declared ud.css token
   (--navy --navy2 --ink --body --red/--blue --blued --sky --ice --line --gold
   --green), an rgba() of one of those, or one of the three dark-surface text
   values the site already standardised on (#A9BDDC eyebrow, #C5D4EC body,
   #DCE7F8 emphasis). Deep red on navy fails contrast, so eyebrows on dark use
   #A9BDDC — never var(--red).

   MOTION: nothing here starts at opacity 0 outside a @supports gate. The two
   hero drifts are transform-only, so a browser that cannot animate them just
   leaves the image at its natural position.
   =========================================================================== */

/* ---------- HERO ------------------------------------------------------------
   Pages carry class="lhero phero" so they inherit ud.css's video ken-burns and
   h1 rise; the rules below win on cascade order (this file loads second). */
.lhero{position:relative;color:#fff;background:var(--navy);overflow:hidden;isolation:isolate}
.lhero .media{position:absolute;inset:-6% 0;will-change:transform}
.lhero .media img,.lhero .media video{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06)}
/* ud.css only drifts `.phero .media video`; still photography needs the same. */
@media (prefers-reduced-motion:no-preference){
  .lhero .media img{animation:pheroDrift 26s ease-in-out infinite alternate}
}
.lhero .veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,27,48,.95) 0%,rgba(8,27,48,.87) 42%,rgba(8,27,48,.44) 100%)}
.lhero .veil-b{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,27,48,0),rgba(8,27,48,.72))}
.lhero>.wrap{position:relative;z-index:1;padding:clamp(3rem,5.6vw,4.8rem) 0 clamp(2.2rem,4vw,3.2rem)}
.lhero h1{color:#fff;font-size:clamp(2rem,4.3vw,3.1rem);font-weight:700;line-height:1.08;
  max-width:24ch;margin:1rem 0 .85rem;text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.34)}
.lhero h1 em{font-style:italic}
.lhero .deck{color:#C5D4EC;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;max-width:62ch;margin:0}
.lhero .lacts{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
.lhero .lacts .btn{min-height:48px}
.lmeta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.5rem}
.lmeta span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:.4rem .9rem;font-size:.82rem;font-weight:500;color:#DCE7F8}

/* ---------- CREDENTIAL STRIP ---------------------------------------------- */
.ltrust{background:#fff;border-bottom:1px solid var(--line)}
.ltrust .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem clamp(.8rem,2.4vw,2.1rem);padding:1rem 0;color:var(--body);font-weight:600;font-size:.87rem}
.ltrust b{color:var(--navy)}
.ltrust .st{color:var(--gold);letter-spacing:1.5px}
.ltrust .dot{width:5px;height:5px;border-radius:50%;background:var(--line);flex:none}
@media(max-width:640px){.ltrust .dot{display:none}}

/* ---------- ARTICLE COLUMN ------------------------------------------------- */
.lart{max-width:840px;margin:0 auto}
.lart>h2{color:var(--navy);font-size:clamp(1.5rem,2.7vw,1.95rem);line-height:1.2;
  margin:3rem 0 .5rem;letter-spacing:-.012em;scroll-margin-top:5.5rem}
.lart>h2:first-child{margin-top:0}
.lart h3{color:var(--navy);font-size:1.07rem;margin:1.7rem 0 .3rem}
.lart p{color:var(--body);font-size:1.04rem;line-height:1.78;margin:.85rem 0}
.lart .lead{font-size:1.15rem;color:var(--ink);font-weight:500;line-height:1.68;margin-top:0}
.lart ul,.lart ol{margin:.8rem 0 1.1rem 1.35rem;color:var(--body)}
.lart li{margin:.42rem 0;line-height:1.72;font-size:1.01rem}
.lart li b,.lart p b,.lart p strong{color:var(--navy)}
.lart a:not(.btn):not(.lcard){color:var(--red);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.lart a:not(.btn):not(.lcard):hover{color:var(--blued)}

/* breadcrumbs */
.lcrumb{font-size:.82rem;color:var(--body);margin-bottom:.9rem}
.lcrumb a{color:var(--red);font-weight:600}
.lcrumb i{font-style:normal;margin:0 .4rem;color:var(--sky)}

/* ---------- THE DIRECT ANSWER (answer-engine extractable) ------------------ */
.ans{background:#fff;border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:0 var(--r) var(--r) 0;padding:1.5rem 1.7rem;box-shadow:var(--shm);margin:0 0 1.9rem}
.ans .k{display:block;font:700 .71rem/1 'Sora','Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:.55rem}
.ans h2{font-family:'Sora','Inter',sans-serif;font-size:1.14rem;font-weight:700;color:var(--navy);
  line-height:1.3;margin:0 0 .55rem;letter-spacing:-.015em}
.ans p{color:var(--ink);font-size:1.06rem;line-height:1.72;margin:0}

/* ---------- IN-PAGE NAV --------------------------------------------------- */
.ltoc{background:var(--ice);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.35rem;margin:0 0 2.2rem}
.ltoc b{display:block;color:var(--navy);font:700 .71rem/1 'Sora','Inter',sans-serif;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:.55rem}
.ltoc ol{list-style:none;counter-reset:ltoc;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0 1.5rem}
.ltoc li{counter-increment:ltoc;margin:0}
.ltoc a{display:block;padding:.42rem 0;color:var(--navy);font-weight:500;font-size:.95rem;
  border-bottom:1px solid rgba(228,234,244,.85);text-decoration:none}
.ltoc a::before{content:counter(ltoc) ". ";color:var(--red);font-weight:700}
.ltoc a:hover{color:var(--red)}

/* ---------- LABELLED ANATOMY ---------------------------------------------- */
.anat{margin:1.5rem 0 .4rem}
.anat-row{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:1.05rem;padding-bottom:1.3rem}
.anat-row::before{content:"";position:absolute;left:22px;top:52px;bottom:0;width:2px;background:var(--line)}
.anat-row:last-child{padding-bottom:0}
.anat-row:last-child::before{display:none}
.anat-n{width:46px;height:46px;border-radius:13px;background:var(--navy);color:#fff;
  font:700 .95rem/1 'Sora','Inter',sans-serif;display:grid;place-items:center;
  box-shadow:0 10px 22px -14px rgba(8,27,48,.6)}
.anat-b{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;box-shadow:var(--shm)}
.anat-b h3{color:var(--navy);font-size:1.04rem;margin:0 0 .28rem}
.anat-b p{color:var(--body);font-size:.96rem;line-height:1.66;margin:0}
.anat-b .fail{display:block;margin-top:.65rem;padding-top:.6rem;border-top:1px solid var(--line);
  color:var(--body);font-size:.9rem;line-height:1.6}
.anat-b .fail b{color:var(--red);font-weight:700}

/* ---------- COMPARISON TABLE ---------------------------------------------- */
.ctab-s{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0 .4rem;
  border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shm)}
.ctab{width:100%;min-width:620px;border-collapse:collapse;font-size:.93rem}
.ctab caption{caption-side:top;text-align:left;padding:1rem 1.1rem .1rem;color:var(--body);
  font-size:.87rem;line-height:1.55}
.ctab th{background:var(--navy);color:#fff;text-align:left;padding:.8rem 1.05rem;
  font:600 .8rem/1.35 'Sora','Inter',sans-serif;letter-spacing:.02em;vertical-align:bottom}
.ctab td{padding:.82rem 1.05rem;border-top:1px solid var(--line);color:var(--body);
  vertical-align:top;line-height:1.6}
.ctab tbody tr:nth-child(even) td{background:rgba(238,243,250,.6)}
.ctab td:first-child,.ctab th:first-child{position:relative}
.ctab tbody td:first-child{color:var(--navy);font-weight:600}

/* ---------- "IS THE CORNER BEING CUT" ------------------------------------- */
.tells{display:grid;grid-template-columns:repeat(auto-fit,minmax(284px,1fr));gap:1.1rem;margin:1.5rem 0 .4rem}
.tell{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:16px;padding:1.25rem 1.35rem;box-shadow:var(--shm)}
.tell .q{display:block;background:var(--ice);border-radius:10px;padding:.6rem .8rem;margin-bottom:.7rem;
  color:var(--navy);font:600 .93rem/1.5 'Inter',sans-serif}
.tell p{color:var(--body);font-size:.93rem;line-height:1.66;margin:0}
.tell p+p{margin-top:.5rem}
.tell .ask{display:block;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line);
  color:var(--navy);font-size:.9rem;font-weight:600;line-height:1.55}

/* ---------- THE SPEC PANEL ------------------------------------------------- */
.spec{background:var(--navy);border-radius:20px;padding:1.7rem 1.9rem;margin:2rem 0 .4rem;box-shadow:var(--shl)}
.spec .k{display:block;font:700 .71rem/1 'Sora','Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#A9BDDC;margin-bottom:.55rem}
.spec h3{color:#fff;font-size:1.22rem;margin:0 0 .3rem;line-height:1.25}
.spec>p{color:#C5D4EC;font-size:.94rem;line-height:1.6;margin:0 0 1.1rem;max-width:62ch}
.spec ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:.5rem 1.7rem}
.spec li{position:relative;padding-left:1.5rem;color:#DCE7F8;font-size:.95rem;line-height:1.58;margin:0}
.spec li::before{content:"";position:absolute;left:0;top:.56em;width:9px;height:9px;
  border-radius:3px;background:var(--sky)}
.spec li b{color:#fff}
.spec .fine{display:block;margin-top:1.1rem;color:#A9BDDC;font-size:.8rem;line-height:1.55}

/* ---------- PULL NOTE ----------------------------------------------------- */
.lnote{background:var(--ice);border-left:4px solid var(--navy);border-radius:0 12px 12px 0;
  padding:1.1rem 1.3rem;margin:1.7rem 0}
.lnote p{color:var(--ink);font-size:.98rem;line-height:1.7;margin:.2rem 0}
.lnote b{color:var(--navy)}
.lnote.warn{border-left-color:var(--red)}

/* ---------- CARD GRIDS (hub + related) ------------------------------------ */
.lcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem}
.lcard{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:1.55rem 1.65rem;box-shadow:var(--shm);text-decoration:none;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .3s ease}
.lcard:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:0 30px 60px -30px rgba(8,27,48,.42)}
.lcard .k{display:block;font:700 .7rem/1 'Sora','Inter',sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red)}
.lcard h3{color:var(--navy);font-size:1.16rem;line-height:1.3;margin:.55rem 0 .4rem}
.lcard p{color:var(--body);font-size:.94rem;line-height:1.62;margin:0}
.lcard .go{display:inline-block;margin-top:.8rem;color:var(--red);font-weight:600;font-size:.88rem}

/* ---------- FAQ ----------------------------------------------------------- */
/* ud.css styles .faq-item; these two rules only remove the default marker and
   keep the answer text measure sane. */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .a p{margin:.3rem 0;line-height:1.72}
.faq-item .a p:first-child{margin-top:0}

/* ---------- CAPTURE ------------------------------------------------------- */
.lcap{background:var(--ice);border-top:1px solid var(--line)}
.lcap .g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.6rem;align-items:start}
@media(max-width:900px){.lcap .g{grid-template-columns:1fr;gap:2rem}}
.lcap h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.15rem);margin:.5rem 0 .7rem;text-wrap:balance}
.lcap p{color:var(--body);line-height:1.72;max-width:58ch}
.lcap ul{list-style:none;margin:1rem 0 0;padding:0}
.lcap li{position:relative;padding-left:1.6rem;color:var(--body);line-height:1.75;margin:.35rem 0;font-size:.98rem}
.lcap li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:3px;background:var(--green)}
.lform{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.6rem 1.7rem;box-shadow:var(--shl)}
.lform h3{color:var(--navy);font-size:1.18rem;margin:0 0 .2rem}
.lform .sub{color:var(--body);font-size:.9rem;line-height:1.55;margin:.3rem 0 1rem}
.lform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lform .fld{margin-bottom:.8rem}
.lform label{display:block;font:600 .73rem/1 'Inter',sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--body);margin-bottom:.34rem}
.lform input{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:11px;
  font-family:inherit;color:var(--ink);background:#fff;min-height:48px}
.lform input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(179,36,36,.18)}
.lform .btn{width:100%;margin-top:.3rem}
.lform .msg{min-height:1.15rem;color:var(--red);font-size:.85rem;font-weight:600;margin:.4rem 0 0}
.lform .fine{color:var(--body);font-size:.75rem;line-height:1.6;margin:.7rem 0 0}
.lform .fine a{color:var(--red);font-weight:600}
.lform .done b{display:block;font-family:'Sora','Inter',sans-serif;font-size:1.1rem;color:var(--navy);margin-bottom:.3rem}
.lform .done p{color:var(--body);margin:0}

/* ===========================================================================
   MISSION SURFACE (/our-mission)
   =========================================================================== */
.mstate{position:relative;background:var(--navy);border-radius:24px;overflow:hidden;isolation:isolate;
  padding:clamp(1.9rem,4vw,3.1rem);box-shadow:var(--shl)}
.mstate::before{content:"";position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(42% 55% at 18% 26%,rgba(179,36,36,.28),transparent 70%),
             radial-gradient(38% 50% at 84% 72%,rgba(12,36,64,.9),transparent 72%)}
.mstate>*{position:relative;z-index:1}
.mstate .k{display:block;font:700 .71rem/1 'Sora','Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#A9BDDC;margin-bottom:1rem}
.mstate blockquote{margin:0;font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;font-size:clamp(1.45rem,3.2vw,2.25rem);line-height:1.25;color:#fff;text-wrap:balance}
.mstate blockquote em{font-style:italic}
.mstate .attr{display:block;margin-top:1.2rem;color:#C5D4EC;font-size:.94rem;line-height:1.6;max-width:62ch}
.mprin{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:1.25rem;margin-top:2.2rem}
.mprin>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.7rem;box-shadow:var(--shm)}
.mprin .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--ice);border:1px solid var(--line);color:var(--navy);
  font:700 1rem/1 'Sora','Inter',sans-serif;margin-bottom:.9rem}
.mprin h3{color:var(--navy);font-size:1.1rem;margin:0 0 .4rem;line-height:1.28}
.mprin p{color:var(--body);font-size:.96rem;line-height:1.68;margin:0}
.mprin p+p{margin-top:.55rem}
.mno{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem;margin-top:2rem}
.mno>div{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:0 16px 16px 0;padding:1.3rem 1.45rem;box-shadow:var(--shm)}
.mno h3{color:var(--navy);font-size:1.02rem;margin:0 0 .35rem;line-height:1.35}
.mno p{color:var(--body);font-size:.94rem;line-height:1.66;margin:0}
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.1rem;margin-top:2.2rem}
.proof{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.5rem;box-shadow:var(--shm)}
.proof .v{display:block;font:700 clamp(1.5rem,3vw,2rem)/1 'Sora','Inter',sans-serif;color:var(--navy);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof .l{display:block;color:var(--navy);font-weight:600;font-size:.98rem;margin-top:.5rem;line-height:1.35}
.proof p{color:var(--body);font-size:.9rem;line-height:1.62;margin:.4rem 0 0}
.proof a{display:inline-block;margin-top:.7rem;color:var(--red);font-weight:600;font-size:.85rem}
.proof .st{color:var(--gold);letter-spacing:2px}