/* assets/css/pages/policy-and-educators.css */

.page-policy{
  /* page-specific background feel (core already sets base tokens/colors) */
  background:
    radial-gradient(circle at top, rgba(166,255,181,0.10) 0, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(142,153,251,0.14) 0, transparent 60%),
    var(--bg);
}

.page-policy .policy-main{ padding: 0 0 40px; }

.page-policy .container{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}




/* Typography */
.page-policy h1{
  font-size: clamp(2.6rem,5.4vw,3.9rem);
  line-height: 1.05;
  margin: 0 0 1.2rem;
  font-weight: 900;
}
.page-policy h2{
  font-size: clamp(2rem,3.6vw,2.6rem);
  margin: 0 0 .8rem;
  font-weight: 800;
}
.page-policy h3{ font-size: 1.15rem; margin: 0 0 .5rem; font-weight: 750; }
.page-policy h4{ margin: 0 0 .35rem; }

.page-policy .eyebrow{
  font-size: .80rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .88;
}

.page-policy .muted{ color: rgba(154,164,173,0.95); }
.page-policy .micro{ font-size: .92rem; }

/* Reveal (match core.js convention: .reveal + .show) */
.page-policy .reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity .70s ease,
    transform .70s ease,
    filter .70s ease;
  will-change: opacity, transform, filter;
}
.page-policy .reveal.show{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .page-policy .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* Sections */
.page-policy .section{
  padding: 110px 0;
  position: relative;
  scroll-margin-top: 96px;
}
.page-policy .section + .section{
  border-top: 1px solid rgba(255,255,255,0.03);
}
.page-policy .section-inner{
  max-width: 880px;
  margin: 0 auto;
}
.page-policy .section-head{
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: left;
}
.page-policy .section-lead{
  margin-top: .9rem;
  color: rgba(226,231,242,.85);
  font-size: 1.03rem;
  line-height: 1.7;
}

/* Island */
.page-policy .island{
  border-radius: 28px;
  padding: 32px 32px 36px;
  background:
    radial-gradient(circle at 0 0, rgba(166,255,181,.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(142,153,251,.08), transparent 55%),
    rgba(10,12,20,.47);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 18px 46px rgba(0,0,0,.65);
}

/* HERO */
.page-policy .hero-bleed{
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: 96px;
}
.page-policy .hero-bleed::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1300px 560px at 0% -10%, rgba(166,255,181,.12), transparent 65%),
    radial-gradient(1100px 620px at 120% 70%, rgba(142,153,251,.12), transparent 65%),
    url("/assets/img/photos/screenaddiction.jpg") center/cover no-repeat;
  filter:saturate(1.02) contrast(1.03) brightness(.8);
  transform:scale(1.04);
  opacity:.6;
}
.page-policy .hero-bleed::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(
    to bottom,
    rgba(11,13,18,1) 0%,
    rgba(11,13,18,0) 22%,
    rgba(11,13,18,0) 78%,
    rgba(11,13,18,1) 100%
  );
}
.page-policy .hero-inner{ padding:96px 16px 94px; }

.page-policy .hero-article-grid{
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0,2.1fr) minmax(0,1.2fr);
  gap: 40px;
  max-width: 940px;
}
.page-policy .hero-article-main p{
  margin: 0 0 1.2rem;
  font-size: 1.0rem;
  line-height: 1.8;
  color: rgba(235,239,247,.9);
}
.page-policy .hero-article-side{
  padding: 22px 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 0 0, rgba(166,255,181,.08), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(142,153,251,.10), transparent 55%),
    rgba(6,9,18,.94);
  box-shadow: 0 20px 54px rgba(0,0,0,.7);
  font-size: .94rem;
}
.page-policy .hero-article-side ul{
  padding-left: 1.15rem;
  margin: .5rem 0 0;
  line-height: 1.7;
  color: rgba(230,235,244,.9);
}

/* BENEFITS */
.page-policy .section-benefits{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.page-policy .section-benefits::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url("/assets/img/photos/rural.jpg") center/cover no-repeat;
  opacity:.80;
  filter:saturate(1.0) contrast(1.05) brightness(.70);
  transform:scale(1.02);
  pointer-events:none;
}
.page-policy .section-benefits::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 640px at 15% 20%, rgba(166,255,181,.06), transparent 60%),
    radial-gradient(1000px 620px at 110% 70%, rgba(142,153,251,.06), transparent 60%),
    linear-gradient(
      to bottom,
      rgba(11,13,18,1) 0%,
      rgba(11,13,18,.58) 20%,
      rgba(11,13,18,.58) 80%,
      rgba(11,13,18,1) 100%
    );
}
.page-policy .benefits-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:34px;
  margin-top:26px;
}
.page-policy .benefits-list{
  padding-left:1.15rem;
  margin:.4rem 0 0;
  font-size:.98rem;
  line-height:1.85;
  color:rgba(230,235,244,.92);
}
.page-policy .benefits-card{
  border-radius:24px;
  padding:22px 22px 24px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(20,24,36,0.92);
  box-shadow:0 18px 46px rgba(0,0,0,.65);
  font-size:.96rem;
  line-height:1.85;
}
.page-policy .benefits-card .pill{
  display:inline-block;
  margin-top:12px;
  border-radius:999px;
  padding:.32rem .9rem;
  border:1px solid rgba(255,255,255,.18);
  font-size:.75rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  background:rgba(12,16,26,.95);
  opacity:.92;
}

/* POLICY */
.page-policy .section-policy{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.page-policy .section-policy::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:url("/assets/img/photos/benefit.jpg") center/cover no-repeat;
  opacity:.22;
  filter:saturate(1.0) contrast(1.05) brightness(.75);
  transform:scale(1.02);
}
.page-policy .section-policy::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 10% 15%, rgba(166,255,181,.06), transparent 60%),
    radial-gradient(1000px 650px at 110% 70%, rgba(142,153,251,.06), transparent 60%),
    linear-gradient(
      to bottom,
      rgba(11,13,18,1) 0%,
      rgba(11,13,18,.55) 18%,
      rgba(11,13,18,.55) 82%,
      rgba(11,13,18,1) 100%
    );
}
.page-policy .policy-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr);
  gap:40px;
}
.page-policy .policy-grid ul{
  padding-left:1.15rem;
  margin:.4rem 0 0;
  font-size:.97rem;
  line-height:1.8;
  color:rgba(230,235,244,.9);
}
.page-policy .quote-card{
  border-radius:24px;
  padding:22px 22px 24px;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(20,24,36,0.92);
  box-shadow:0 18px 46px rgba(0,0,0,.65);
  font-size:.96rem;
  line-height:1.8;
}

/* WHY / PILLARS */
.page-policy .section-bg{
  position: relative;
  overflow: hidden;
  --bg-image: none;
}
.page-policy .section-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.35;
  z-index:-1;
}
.page-policy .section-bg::after{
  content:"";
  position:absolute;
  bottom:0;
  width:100%;
  height:160px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index:-1;
}
.page-policy .pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin-top:34px;
  margin-bottom: 15%;
}
.page-policy .pillar{
  border-radius:24px;
  padding:22px 22px 24px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.page-policy .pillar p{
  font-size:.97rem;
  line-height:1.8;
  color:rgba(226,231,242,.9);
  margin:0 0 .7rem;
}

.page-policy .section-why{
  --bg-image: url("/assets/img/photos/schooltop.jpg");
}

.page-policy .section-training{
  --bg-image: url("/assets/img/photos/teacherclassroom.jpg");
}

.page-policy .section-procurement{
  --bg-image: url("/assets/img/photos/hallway.jpg");
}

/* Museums + shared card */
.page-policy .section-museums .section-inner{ max-width:920px; }
.page-policy .row-museums{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr);
  gap:32px;
  align-items:start;
}
.page-policy .card-soft{
  border-radius:24px;
  padding:22px 22px 24px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  font-size:.96rem;
  line-height:1.8;
}
.page-policy .card-soft ul{ padding-left:1.15rem; margin:.4rem 0 0; }

/* Safety badges + split */
.page-policy .badges-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.1rem 0 0;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.page-policy .badge{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  border-radius:999px;
  padding:.26rem 1rem;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(9,12,20,.9);
  opacity:.92;
}
.page-policy .split-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;
  margin-top:34px;
}
.page-policy .split-2 ul{
  padding-left:1.15rem;
  margin:.4rem 0 0;
  font-size:.96rem;
  line-height:1.8;
  color:rgba(230,235,244,.9);
}

/* Training tiers */
.page-policy .tiers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  margin-top:30px;
}
.page-policy .tier{
  border-radius:24px;
  padding:20px 20px 22px;
  border:1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,.04);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  font-size:.96rem;
  line-height:1.8;
}

/* Data */
.page-policy .section-data .section-inner{ max-width:900px; }
.page-policy .data-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr);
  gap:34px;
}
.page-policy .metric-list{
  padding-left:1.15rem;
  margin:.5rem 0 0;
  font-size:.96rem;
  line-height:1.8;
}
.page-policy .dash-mock{
  border-radius:24px;
  padding:20px 20px 22px;
  background:
    radial-gradient(circle at 0 0, rgba(166,255,181,.10), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(142,153,251,.10), transparent 55%),
    rgba(8,11,20,.95);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 20px 50px rgba(0,0,0,.72);
  font-size:.88rem;
}
.page-policy .dash-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:.45rem;
  opacity:.9;
}

/* Procurement bands */
.page-policy .bands{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin-top:36px;
}
.page-policy .band{
  border-radius:24px;
  padding:18px 18px 20px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,0.09);
  font-size:.9rem;
  line-height:1.7;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.page-policy .band h4{
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin-bottom:.35rem;
  opacity:.96;
}

/* Bottom expander */
.page-policy .section-bottom{ padding-top:80px; padding-bottom:80px; }
.page-policy .bottom-toggle{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(6,9,18,.97);
  padding:16px 22px;
  color:var(--fg);
  font-size:.86rem;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.page-policy .bottom-toggle span.label{ opacity:.9; }
.page-policy .bottom-toggle span.chevron{
  font-size:1.2rem;
  transition:transform .28s ease;
}
.page-policy .bottom-toggle.open span.chevron{ transform:rotate(180deg); }
.page-policy .bottom-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .55s ease, opacity .55s ease;
  margin-top:20px;
}
.page-policy .bottom-panel.open{ max-height:1400px; opacity:1; }
.page-policy .bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr);
  gap:34px;
  border-radius:24px;
  padding:24px 24px 28px;
  background:rgba(20,24,36,0.94);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 22px 58px rgba(0,0,0,.7);
  font-size:.96rem;
  line-height:1.8;
}
.page-policy .testimonial-item{ margin-bottom:1.1rem; }

.page-policy .brief-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* CTA */
.page-policy .cta-section{
  text-align: center;
  padding: 90px 0 70px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mint) 10%, transparent),
    color-mix(in srgb, var(--peri) 10%, transparent));
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top:40px;
}
.page-policy .cta-title{
  font-size: clamp(2.1rem, 4.1vw, 3.1rem);
  margin-bottom: 16px;
  font-weight: 850;
  background: linear-gradient(90deg, var(--peri), var(--mint));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.page-policy .cta-subtext{
  opacity: 0.86;
  max-width: 640px;
  margin: 0 auto 38px;
  font-size: 1.03rem;
  line-height: 1.8;
}
.page-policy .cta-buttons{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Small link helper */
.page-policy .link{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width:980px){
  .page-policy .hero-inner{ padding:80px 16px 80px; }
  .page-policy .hero-article-grid{ grid-template-columns:1fr; gap:32px; }
  .page-policy .hero-article-side{ order:-1; }
  .page-policy .section{ padding:86px 0; }
  .page-policy .pillars{ grid-template-columns:1fr; }
  .page-policy .policy-grid,
  .page-policy .row-museums,
  .page-policy .split-2,
  .page-policy .tiers,
  .page-policy .data-grid,
  .page-policy .bands,
  .page-policy .bottom-grid,
  .page-policy .benefits-grid{ grid-template-columns:1fr; }
  .page-policy .bands{ gap:18px; }
}
@media (max-width:640px){
  .page-policy .container{ padding:0 12px; }
  .page-policy .island{ padding:24px 20px 26px; }
  .page-policy .bottom-toggle{ font-size:.78rem; padding:14px 16px; }
}