/* ==========================================================================
   Lori Priller Consultancy — stylesheet
   Palette: Deep Navy #163A5F · Executive Blue #2C5F9E · Royal Purple #6B4EFF (sparing)
   Type: Manrope (headings) + Inter (body)
   ========================================================================== */

:root{
  --navy:#163A5F;
  --navy-dark:#0f2a45;
  --blue:#2C5F9E;
  --purple:#6B4EFF;
  --gray:#F5F7FA;
  --ink:#2E3440;
  --muted:#5b6b7d;
  --border:#e3e8ef;
  --white:#ffffff;
  --radius:9px;
  --shadow:0 4px 18px rgba(22,58,95,.07);
  --shadow-lg:0 14px 40px rgba(22,58,95,.14);
  --maxw:1180px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

img, svg, video, canvas{ max-width:100%; height:auto; }

h1,h2,h3,h4{
  font-family:"Manrope",system-ui,sans-serif;
  color:var(--navy);
  line-height:1.2;
  margin:0 0 .6rem;
  font-weight:700;
}
h1{ font-size:clamp(2.1rem,4vw,3.1rem); font-weight:800; letter-spacing:-.01em; }
h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.01em; }
h3{ font-size:1.15rem; }
h4{ font-size:1rem; }
p{ margin:0 0 1rem; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem;
  border-radius:var(--radius);
  font-weight:600; font-size:.95rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration:none;
  max-width:100%;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-dark); box-shadow:var(--shadow-lg); }
.btn-secondary{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-secondary:hover{ background:var(--navy); color:#fff; }
.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ background:var(--gray); }
.btn-arrow::after{ content:"→"; font-weight:700; transition:transform .15s ease; }
.btn-arrow:hover::after{ transform:translateX(3px); }

/* ---------- Header / Nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; gap:1.4rem;
  padding:.9rem 1.5rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  font-family:"Manrope",sans-serif; font-weight:700; color:var(--navy);
  font-size:1rem; line-height:1.2; margin-right:auto;
}
.brand .mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:var(--navy); color:#fff; font-weight:800; font-size:.85rem;
  flex:none;
}
.brand small{ display:block; font-weight:500; color:var(--muted); font-size:.72rem; }
.nav-links{ display:flex; align-items:center; gap:1.3rem; }
.nav-links a{
  color:var(--ink); font-weight:600; font-size:.92rem;
  padding:.4rem 0; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{ color:var(--navy); border-color:var(--navy); text-decoration:none; }
.nav-cta{ flex:none; }
.nav-cta .btn{ white-space:nowrap; }
.nav-toggle{
  display:none; flex-direction:column; gap:4px; background:none; border:0; padding:.4rem; cursor:pointer; flex:none;
}
.nav-toggle span{ width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero (premium dark, animated) ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(107,78,255,.35), transparent 60%),
    radial-gradient(55% 70% at 10% 100%, rgba(44,95,158,.4), transparent 60%),
    linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 55%,#1b2f5c 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(80% 80% at 50% 0%, #000 40%, transparent 100%);
}
.orb{
  position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  filter:blur(3px); mix-blend-mode:screen; will-change:transform;
  animation:orbFloat 9s ease-in-out infinite;
}
.orb-1{ width:220px; height:220px; top:-60px; right:8%; background:radial-gradient(circle at 35% 35%,rgba(107,78,255,.55),rgba(107,78,255,0) 70%); animation-delay:0s; }
.orb-2{ width:160px; height:160px; bottom:-40px; left:6%; background:radial-gradient(circle at 35% 35%,rgba(44,95,158,.55),rgba(44,95,158,0) 70%); animation-delay:1.4s; }
.orb-3{ width:120px; height:120px; top:35%; right:28%; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.3),rgba(255,255,255,0) 70%); animation-delay:2.6s; }
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-14px,18px) scale(1.06); }
}

.hero .wrap{ position:relative; z-index:1; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#dbe4f5; padding:.4rem .9rem; border-radius:999px;
  backdrop-filter:blur(6px);
}
.hero .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:#8fb4ff; box-shadow:0 0 8px 2px rgba(143,180,255,.7); }
.hero h1{ color:#fff; }
.hero .lead{ color:#c3cfe6; }
.hero .hero-note{ color:#93a3bf; }
.hero .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.4); }
.hero .btn-secondary:hover{ background:#fff; color:var(--navy); }
.hero .callout{ background:rgba(255,255,255,.06); border-left-color:#8fb4ff; }
.hero .callout p{ color:#c3cfe6; }
.hero .callout strong{ color:#fff; }
.hero .field label{ color:#fff; }
.hero .req{ color:#ff9d8a; }
.hero .consent{ color:#c3cfe6; }
.hero .consent a{ color:#9fc4ff; }

.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.eyebrow{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin:0 0 .8rem; width:fit-content;
}
.lead{ font-size:1.12rem; color:var(--muted); max-width:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem; }
.hero-note{ font-size:.8rem; color:var(--muted); margin-top:.7rem; }

/* Entrance animation for above-the-fold hero content */
.hero .eyebrow, .hero h1, .hero .lead, .hero .hero-cta, .hero .hero-visual,
.hero .callout, .hero form, .hero .hero-note{
  animation:heroUp .7s cubic-bezier(.22,.9,.3,1) both;
}
.hero .eyebrow{ animation-delay:.02s; }
.hero h1{ animation-delay:.1s; }
.hero .lead{ animation-delay:.2s; }
.hero .hero-cta{ animation-delay:.3s; }
.hero .callout{ animation-delay:.34s; }
.hero form{ animation-delay:.3s; }
.hero .hero-visual{ animation-delay:.28s; }
.hero .hero-note{ animation-delay:.4s; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .orb, .hero .eyebrow, .hero h1, .hero .lead, .hero .hero-cta, .hero .hero-visual,
  .hero .callout, .hero form, .hero .hero-note{ animation:none !important; }
}

.hero-visual{
  position:relative; overflow:hidden; z-index:1;
  aspect-ratio:4/3.1; border-radius:18px;
  background:linear-gradient(135deg,var(--navy),var(--blue) 65%,var(--purple));
  display:flex; align-items:flex-end; padding:2rem;
  box-shadow:0 20px 60px rgba(6,14,30,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.hv-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:34px 34px;
}
.hv-inner{ position:relative; color:#fff; }
.hv-inner .k{ display:block; font-size:.85rem; color:#d8e2f0; margin-bottom:.3rem; }
.hv-inner strong{ font-family:"Manrope",sans-serif; font-size:1.7rem; font-weight:800; line-height:1.25; }

.hv-network{ position:absolute; top:1.3rem; right:1.3rem; width:110px; height:110px; opacity:.9; }
.hv-network circle{ fill:#fff; }
.hv-network .node{ animation:nodePulse 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.hv-network .node:nth-child(2){ animation-delay:.4s; }
.hv-network .node:nth-child(3){ animation-delay:.8s; }
.hv-network .node:nth-child(4){ animation-delay:1.2s; }
.hv-network line{ stroke:rgba(255,255,255,.35); stroke-width:1; }
@keyframes nodePulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.35); } }

.hv-badge{
  position:absolute; top:1.3rem; left:1.3rem; z-index:2;
  display:flex; align-items:center; gap:.4rem;
  max-width:calc(100% - 2.6rem);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px); border-radius:999px; padding:.5rem .85rem;
  font-size:.7rem; font-weight:700; color:#fff;
  animation:floatSlow 5s ease-in-out infinite;
}
.hv-badge span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:680px){
  .hv-network{ display:none; }
}
.hv-badge svg{ width:14px; height:14px; stroke:#8fe3b0; flex:none; }
@keyframes floatSlow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){
  .hv-network .node, .hv-badge{ animation:none !important; }
}

/* ---------- Trust bar ---------- */
.trust{ background:var(--gray); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-inner{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.2rem;
  padding:1rem 1.5rem; font-size:.85rem; font-weight:600; color:var(--navy); text-align:center;
}

/* ---------- Sections ---------- */
.section{ padding:4.5rem 0; }
.section-gray{ background:var(--gray); }
.section-head{ max-width:70ch; margin-bottom:2.6rem; }
.section-head p:not(.eyebrow){ color:var(--muted); }
.statement h2{ max-width:22ch; }
.statement p:not(.eyebrow){ color:var(--muted); max-width:70ch; }

/* ---------- Framework ---------- */
.framework{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  margin-top:1rem;
}
.fstep{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow);
}
.fstep .num{
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
  font-family:"Manrope",sans-serif;
}
.fstep p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ---------- Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.cards.two{ grid-template-columns:repeat(2,1fr); }
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.card .ico{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, rgba(44,95,158,.14), rgba(107,78,255,.14));
  color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.card .ico svg{ width:22px; height:22px; stroke:currentColor; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.93rem; flex:1; }
.card ul{ margin:.6rem 0 0; }
.card ul li{ color:var(--muted); font-size:.85rem; padding:.15rem 0; }
.card-link{ font-weight:600; color:var(--blue); margin-top:1rem; display:inline-block; }
.card-link::after{ content:"→"; margin-left:.35rem; transition:transform .15s ease; display:inline-block; }
.card-link:hover::after{ transform:translateX(3px); }

/* ---------- Journey ---------- */
.journey{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; position:relative;
}
.jstep{ text-align:center; }
.jn{
  width:40px; height:40px; margin:0 auto .8rem; border-radius:50%;
  background:#fff; border:2px solid var(--navy); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:"Manrope",sans-serif; font-weight:700; font-size:.85rem;
}
.jstep h4{ margin-bottom:.2rem; font-size:.95rem; }
.jstep p{ color:var(--muted); font-size:.82rem; margin:0; }

/* ---------- People ---------- */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.person{ display:flex; gap:1.4rem; }
.avatar{
  flex:none; width:64px; height:64px; border-radius:50%;
  background:var(--navy); color:#fff; font-family:"Manrope",sans-serif; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.avatar.blue{ background:var(--blue); }
.role{ color:var(--blue); font-weight:600; font-size:.88rem; margin-bottom:.5rem; }
.person p{ color:var(--muted); font-size:.92rem; }
.creds{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.creds li{
  background:var(--gray); color:var(--navy); font-size:.76rem; font-weight:600;
  padding:.3rem .65rem; border-radius:999px;
}

/* ---------- Posts / Insights ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.post{
  display:block; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); color:inherit; max-width:none;
  transition:box-shadow .2s ease, transform .2s ease;
}
.post:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); text-decoration:none; }
.post .thumb{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--navy),var(--blue));
}
.post .body{ padding:1.3rem; }
.post .cat{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:.5rem; }
.post h3{ font-size:1rem; margin:0; }

/* ---------- CTA navy band ---------- */
.cta-navy{
  background:linear-gradient(120deg,var(--navy),var(--navy-dark));
  color:#fff; text-align:center; padding:4rem 0;
}
.cta-navy h2{ color:#fff; max-width:26ch; margin-inline:auto; }
.cta-navy p{ color:#c2d0e0; max-width:56ch; margin:0 auto 1.7rem; }

/* ---------- Footer ---------- */
.footer{ background:var(--navy-dark); color:#c2d0e0; padding:3.5rem 0 1.6rem; }
.footer .brand{ color:#fff; }
.footer .brand .mark{ background:#fff; color:var(--navy); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem;
  padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.fsummary{ font-size:.88rem; color:#a9bace; max-width:38ch; margin:1rem 0; }
.footer h4{ color:#fff; font-size:.85rem; letter-spacing:.03em; margin-bottom:.9rem; }
.footer ul li{ margin-bottom:.55rem; }
.footer ul li a{ color:#a9bace; font-size:.88rem; }
.footer ul li a:hover{ color:#fff; }
.footer a{ color:#a9bace; }
.footer a:hover{ color:#fff; }
.footer-legal{ padding-top:1.6rem; font-size:.76rem; color:#8298ae; }
.footer-legal p{ margin:0 0 .5rem; max-width:90ch; }

/* ---------- Table ---------- */
.spec-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.spec-table th, .spec-table td{
  text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--border); vertical-align:top;
}
.spec-table th{ color:var(--navy); font-family:"Manrope",sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.spec-table td{ color:var(--muted); }
.spec-table td strong{ color:var(--ink); }

/* ---------- Values (About) ---------- */
.values{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem; }
.value{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; text-align:center; box-shadow:var(--shadow);
}
.value p{ color:var(--muted); font-size:.85rem; margin:0; }

/* ---------- Callout ---------- */
.callout{
  background:var(--gray); border-left:3px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0; padding:1.1rem 1.4rem;
}
.callout p{ margin:0; font-size:.92rem; color:var(--muted); }
.callout strong{ color:var(--ink); }

/* ---------- Forms ---------- */
.form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--navy); }
.req{ color:#c0392b; }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:.95rem; padding:.75rem .9rem;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:#fff; color:var(--ink);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(44,95,158,.15);
}
.consent{ display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--muted); }
.consent input{ margin-top:.2rem; flex:none; }

/* ---------- Training: guarantee / schedule ---------- */
.guarantee{
  display:flex; align-items:flex-start; gap:1rem;
  background:#eef8f2; border:1px solid #cdeadd; border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin-bottom:2rem;
}
.g-ico{ flex:none; width:28px; height:28px; }
.g-ico svg{ width:100%; height:100%; }
.guarantee p{ margin:0; font-size:.92rem; color:#1c5c3d; }

.schedule{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.class-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.6rem;
}
.class-card .top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.class-card h3{ font-size:1rem; margin:0; }
.status{
  font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px; white-space:nowrap;
}
.status.enrolling{ background:#eaf3ea; color:#237A57; }
.status.few{ background:#fdf1de; color:#a3660f; }
.dates{ font-weight:700; color:var(--navy); font-size:.95rem; }
.meta{ color:var(--muted); font-size:.85rem; }
.price{ font-size:.92rem; font-weight:600; color:var(--ink); }
.price small{ display:block; font-weight:500; color:var(--muted); font-size:.76rem; }
.class-card .btn{ margin-top:.4rem; width:100%; }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:.8rem; max-width:760px; margin:0 auto; }
.faq details{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.3rem;
}
.faq summary{
  cursor:pointer; font-weight:600; color:var(--navy); list-style:none; font-size:.96rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; font-weight:700; color:var(--blue); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:.8rem 0 0; color:var(--muted); font-size:.92rem; }

/* ---------- Scroll reveal ---------- */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
html.js-ready .reveal{ opacity:0; transform:translateY(16px); }
html.js-ready .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Tables: scroll within their own box, never blow out the page ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
.table-scroll .spec-table{ min-width:640px; }

/* ---------- Pay Invoice page ---------- */
.payment-box{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:2.5rem; max-width:440px; margin:0 auto;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.payment-box stripe-buy-button{ display:block; width:100%; }
.payment-alt{
  display:flex; align-items:center; gap:.8rem; width:100%;
  color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
}
.payment-alt::before, .payment-alt::after{ content:""; flex:1; height:1px; background:var(--border); }

.hv-shield{ position:absolute; top:1.4rem; right:1.4rem; width:64px; height:64px; opacity:.95; }
.hv-shield .node{ animation:floatSlow 4s ease-in-out infinite; transform-origin:center; }
@media (prefers-reduced-motion:reduce){ .hv-shield .node{ animation:none !important; } }

/* ---------- Responsive ---------- */
/* Nav collapses to a hamburger below 1080px — this is the width nav-links + CTA
   actually need to fit on one line without wrapping/overflowing. */
@media (max-width:1080px){
  .nav-toggle{ display:flex; }
  .nav-inner{ flex-wrap:wrap; }

  /* Both collapsible pieces share the same slide+fade mechanics:
     always in the DOM/layout so height can be measured/animated,
     just clipped to 0 and non-interactive until .nav.open. */
  .nav-links, .nav-cta{
    flex-direction:column; width:100%;
    max-height:0; overflow:hidden;
    opacity:0; transform:translateY(-6px);
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, transform .3s ease;
  }
  .nav-links{ gap:0; order:3; }
  .nav-cta{ order:4; }

  .nav.open .nav-links{
    max-height:420px; opacity:1; transform:translateY(0);
    border-top:1px solid var(--border); padding:.5rem 0 .8rem;
  }
  .nav-links a{ padding:.7rem 0; border-bottom:1px solid var(--border); width:100%; }

  .nav.open .nav-cta{ max-height:100px; opacity:1; transform:translateY(0); padding-bottom:.8rem; }
  .nav-cta .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .nav-links, .nav-cta{ transition:none; }
}

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .framework{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .posts{ grid-template-columns:repeat(2,1fr); }
  .journey{ grid-template-columns:repeat(3,1fr); row-gap:1.6rem; }
  .people{ grid-template-columns:1fr; }
  .values{ grid-template-columns:repeat(3,1fr); }
  .schedule{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:680px){
  .framework{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .cards.two{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr; }
  .journey{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:1fr 1fr; }
  .schedule{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:1.8rem; }
  section.section, section.hero, .cta-navy{ padding-left:0; padding-right:0; }
  [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
}
/* ==========================================================================
   Premium layer — loaded ONLY on index.html and pay-invoice.html.
   Adds richer visual treatment on top of styles.css without touching it,
   so every other page on the site is completely unaffected.
   All effects are pure CSS/inline-SVG — zero extra image requests, so this
   stays lightweight and doesn't cost anything on page-speed/SEO.
   ========================================================================== */

/* ==========================================================================
   Premium layer — used only by index.html and pay-invoice.html.
   These classes aren't referenced in any other page's markup, so this
   section has zero visual effect anywhere else on the site.
   ========================================================================== */

/* Subtle film-grain texture for dark sections — inline SVG noise, ~0 bytes over the wire */
.noise{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Icon tiles: premium gradient-ring icon containers ---------- */
.icon-tile{
  width:52px; height:52px; border-radius:14px; flex:none;
  background:linear-gradient(135deg, rgba(44,95,158,.14), rgba(107,78,255,.16));
  border:1px solid rgba(44,95,158,.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--blue); position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.icon-tile svg{ width:24px; height:24px; }
.card:hover .icon-tile{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 24px rgba(44,95,158,.2); }

/* ---------- Eyebrow icon chip (light sections only — hero eyebrow stays as-is) ---------- */
.eyebrow-ico{ display:inline-flex; width:16px; height:16px; margin-right:.45rem; flex:none; }
.eyebrow-ico svg{ width:100%; height:100%; }

/* ---------- Premium stat strip (replaces plain trust bar text row) ---------- */
.stat-strip{ background:var(--gray); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.6rem; padding:1.6rem 1.5rem; }
.stat-item{ display:flex; align-items:center; gap:.8rem; text-align:left; }
.stat-item .icon-tile{ width:42px; height:42px; border-radius:11px; }
.stat-item .icon-tile svg{ width:20px; height:20px; }
.stat-item strong{ display:block; font-family:"Manrope",sans-serif; color:var(--navy); font-size:1rem; line-height:1.2; }
.stat-item span{ display:block; font-size:.78rem; color:var(--muted); }

/* ---------- Connector line threading through step/framework grids ---------- */
.connect{ position:relative; }
.connect::before{
  content:""; position:absolute; top:26px; left:9%; right:9%; height:2px; z-index:0;
  background:linear-gradient(90deg,transparent,rgba(44,95,158,.28),rgba(107,78,255,.28),transparent);
}
.connect > *{ position:relative; z-index:1; }
@media (max-width:680px){ .connect::before{ display:none; } }

/* ---------- Featured insight: illustrated document thumb instead of flat gradient ---------- */
.doc-thumb{ display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.doc-thumb svg{ width:25%; min-width:56px; max-width:96px; height:auto; color:rgba(255,255,255,.9); position:relative; z-index:1; }

/* ---------- Closing CTA band: grain + soft glow ---------- */
.cta-navy{ position:relative; overflow:hidden; isolation:isolate; }
.cta-navy .wrap{ position:relative; z-index:1; }

/* ---------- Process steps (Pay Invoice "how it works") ---------- */
.process-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.process-step{ text-align:center; }
.process-step .icon-tile{ margin:0 auto 1rem; }
.process-step h3{ font-size:1rem; margin-bottom:.35rem; }
.process-step p{ color:var(--muted); font-size:.88rem; margin:0; }
@media (max-width:680px){ .process-steps{ grid-template-columns:1fr; } }

/* ---------- Premium payment card: gradient-ring border + Stripe attribution ---------- */
.payment-box.premium{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--blue),var(--purple)) border-box;
  border:1.5px solid transparent; border-radius:18px;
  box-shadow:0 20px 50px rgba(22,58,95,.14);
}
.payment-box .powered-by{
  display:flex; align-items:center; gap:.4rem;
  font-size:.72rem; color:var(--muted); font-weight:600;
}
.payment-box .powered-by svg{ width:14px; height:14px; color:var(--blue); }

/* ---------- Hero shield ring animation accent (pay-invoice hero) ---------- */
.hv-ring{
  position:absolute; inset:0; margin:auto; width:90px; height:90px;
  border:1.5px dashed rgba(255,255,255,.35); border-radius:50%;
  animation:spinSlow 18s linear infinite;
}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .hv-ring{ animation:none; } }