/* ==========================================================================
   Optivro ISPU Pages — core.css
   Tokens, scoped reset, shared type, buttons, reveal. Copied VERBATIM from the
   approved HTML (new-pages/source/amp-hub/index.html). Every rule is scoped under
   .amp (each widget root is <div class="oip-scope amp oip-amp-…">); nothing leaks.
   Reveal keys off html.oip-anim (frontend only) instead of the HTML's html.amp-js.
   ========================================================================== */
@font-face{font-family:"OrpheusPro Regular";src:url("https://ispu.org/wp-content/uploads/2025/10/OrpheusPro.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}

.amp{
  --navy:#001D3A;
  --navy-2:#033056;
  --blue:#003278;
  --blue-2:#587AB5;
  --steel:#7AA1BF;
  --sky:#7BAAC9;
  --accent:#FF7043;
  --accent-2:#FF7143;
  --gold:#FFC03A;
  --mist:#EBEFF2;
  --cream:#F5F7FA;
  --border:#E4E8ED;
  --ink:rgb(25,25,35);
  --ink-2:rgb(45,45,45);
  --muted:#5B6776;
  --white:#FFFFFF;
  --serif:"OrpheusPro Regular","orpheus pro",orpheus,Georgia,"Times New Roman",serif;
  --sans:Lato,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px;
  --gutter:clamp(20px,4vw,40px);
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,29,58,.06),0 4px 14px rgba(0,29,58,.06);
  --shadow-md:0 10px 30px rgba(0,29,58,.10),0 2px 6px rgba(0,29,58,.06);
  --shadow-lg:0 30px 60px -20px rgba(0,29,58,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--sans);color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px;
}
.amp *,.amp *::before,.amp *::after{box-sizing:border-box;}
.amp h1,.amp h2,.amp h3,.amp h4,.amp h5,.amp h6,.amp p,.amp ul,.amp ol,.amp li,.amp figure,.amp blockquote,.amp dl,.amp dd{margin:0;padding:0;}
.amp h1,.amp h2,.amp h3,.amp h4,.amp h5,.amp h6{text-transform:none;}
.amp ul,.amp ol{list-style:none;}
/* theme resets found on live ispu.org (2026-10-10 parity check): the theme makes figcaption italic
   and gives sup/sub line-height:0 + a relative offset; the approved HTML has neither.
   !important on font-style/font-size: the site's Customizer "Additional CSS" (wp-custom-css) sets
   `.caption, figcaption{font-style:italic !important;font-size:14px !important}`, which nothing else can beat.
   The caption's own texts (name/role) keep their sizes and typography controls — they style the children. */
.amp figcaption{font-style:normal !important;line-height:inherit;font-size:inherit !important;margin:0;padding:0;text-align:inherit;}
.amp sup,.amp sub{line-height:inherit;position:static;top:auto;bottom:auto;}
.amp img{max-width:100%;display:block;}
.amp a{color:inherit;text-decoration:none;}
.amp a:hover,.amp a:focus{text-decoration:none;}
.amp button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
.amp [role="button"],.amp [role="tab"]{cursor:pointer;-webkit-user-select:none;user-select:none;}
.amp :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}
.amp .amp-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.amp .amp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- shared type ---------- */
.amp .amp-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);}
.amp .amp-eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px;}
/* "To confirm" marker — draft only, removed before launch */
.amp .amp-todo{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:10.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#6B4E00;background:#FFE9A8;border:1px dashed #D9A300;border-radius:100px;padding:4px 10px;vertical-align:middle;line-height:1.3;}
.amp .amp-todo::before{content:"!";display:grid;place-items:center;flex:none;width:14px;height:14px;border-radius:50%;background:#D9A300;color:#fff;font-size:10px;}
.amp .amp-h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,52px);line-height:1.08;letter-spacing:-.5px;color:var(--navy);margin-top:18px;}
.amp .amp-h2 em{font-style:italic;color:var(--blue-2);}
.amp .amp-lede{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:var(--muted);max-width:640px;margin-top:18px;}
.amp .amp-sec{padding-block:clamp(72px,9vw,120px);position:relative;}
.amp .amp-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,56px);}

/* ---------- buttons ---------- */
.amp .amp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:17px 30px;border-radius:100px;border:2px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s,gap .3s var(--ease);white-space:nowrap;}
.amp .amp-btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease);}
.amp .amp-btn:hover{transform:translateY(-2px);}
.amp .amp-btn:hover svg{transform:translateX(3px);}
.amp .amp-btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(255,112,67,.65);}
.amp .amp-btn--accent:hover{background:#ff5f2c;box-shadow:0 16px 30px -10px rgba(255,112,67,.75);color:#fff;}
.amp .amp-btn--navy{background:var(--navy);color:#fff;}
.amp .amp-btn--navy:hover{background:var(--blue);box-shadow:var(--shadow-md);color:#fff;}
.amp .amp-btn--ghost{border-color:rgba(255,255,255,.35);color:#fff;}
.amp .amp-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;}
.amp .amp-btn--line{border-color:var(--navy);color:var(--navy);}
.amp .amp-btn--line:hover{background:var(--navy);color:#fff;}
.amp .amp-btn--white{background:#fff;color:var(--navy);}
.amp .amp-btn--white:hover{box-shadow:0 16px 30px -12px rgba(0,29,58,.5);color:var(--navy);}
.amp .amp-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);transition:gap .3s var(--ease),color .3s;}
.amp .amp-link svg{width:15px;height:15px;}
.amp .amp-link:hover{gap:13px;color:var(--accent);}

/* tooltip (charts) — one per page, appended to <body> by oip-core.js */
.oip-tip{position:fixed;z-index:9999;pointer-events:none;background:#001D3A;color:#fff;border-radius:10px;padding:10px 13px;font-family:Lato,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.4;box-shadow:0 30px 60px -20px rgba(0,29,58,.35);opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(.96);transition:opacity .15s,transform .15s;max-width:240px;}
.oip-tip.is-on{opacity:1;transform:translate(-50%,calc(-100% - 14px)) scale(1);}
.oip-tip b{display:block;font-family:"OrpheusPro Regular","orpheus pro",orpheus,Georgia,"Times New Roman",serif;font-weight:400;font-size:22px;line-height:1.1;color:#FFC03A;}

/* ==========================================================================
   REVEAL — hidden state only on the live frontend (html.oip-anim), never in the
   editor, never without JS. oip-core.js reveals everything if the observer
   doesn't run within 1.5 s.
   ========================================================================== */
/* uses the independent `translate` property (not transform) so it never cancels the cards'
   own hover lifts / offsets, which are written with `transform` (fixed 2026-10-10) */
html.oip-anim .amp .amp-rv{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate .9s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;}
html.oip-anim .amp .amp-rv.is-in{opacity:1;translate:none;}
html.oip-anim .amp .amp-rv[data-d="1"]{transition-delay:.08s,.08s,0s,0s,0s;}
html.oip-anim .amp .amp-rv[data-d="2"]{transition-delay:.16s,.16s,0s,0s,0s;}
html.oip-anim .amp .amp-rv[data-d="3"]{transition-delay:.24s,.24s,0s,0s,0s;}
html.oip-anim .amp .amp-rv[data-d="4"]{transition-delay:.32s,.32s,0s,0s,0s;}

@media (prefers-reduced-motion:reduce){
  .amp *,.amp *::before,.amp *::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important;}
  .oip-tip{transition:none;}
}