/* =========================================================
   THE RHEMA INSTITUTE — DESIGN TOKENS
   Palette:  Parchment #F6F1E4 · Ink Navy #1C2B45 · Study Blue #24365A
             Anointing Gold #B6862C · Ember #7C1F1A · Charcoal #2A2621
   Type:     Display  — 'Fraunces'      (headlines)
             Body     — 'Source Sans 3' (paragraphs)
             Utility  — 'IBM Plex Mono' (eyebrows / labels)
   ========================================================= */

:root{
  --parchment:#F6F1E4;
  --parchment-dim:#EFE7D3;
  --ink:#1C2B45;
  --study-blue:#24365A;
  --gold:#B6862C;
  --gold-light:#D9B36B;
  --ember:#7C1F1A;
  --charcoal:#2A2621;
  --charcoal-soft:#514A40;
  --white:#FFFDF8;

  --display:'Manrope', sans-serif;
  --body:'Source Sans 3', sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --radius:4px;
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--charcoal);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

h1,h2,h3{
  font-family:var(--display);
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-0.015em;
}
h1{font-size:clamp(2.3rem,4.8vw,3.8rem);line-height:1.08;font-weight:800;}
h2{font-size:clamp(1.75rem,3vw,2.4rem);line-height:1.18;}
h3{font-size:1.2rem;font-weight:700;}
p{margin:0 0 1em;color:var(--charcoal-soft);}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin:0 0 .9em;
}
.eyebrow.center{text-align:center;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

.section{padding:96px 0;}
.section-alt{background:var(--parchment-dim);}
.section-lede{max-width:620px;margin:0 auto 48px;color:var(--charcoal-soft);}

.fine-note{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--charcoal-soft);
  opacity:.65;
  text-align:center;
  margin-top:28px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:var(--radius);
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:600;
  border:1.5px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--ember);color:var(--white);}
.btn-primary:hover{background:#601510;}
.btn-ghost{border-color:var(--ink);color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--white);}
.btn-full{width:100%;text-align:center;border:none;cursor:pointer;}
.btn-large{padding:20px 46px;font-size:.95rem;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,228,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(28,43,69,.1);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 28px;
}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;}
.brand-mark{height:76px;width:76px;object-fit:contain;flex-shrink:0;display:block;}
.brand-mark.small{height:56px;width:56px;}
.brand-word strong{
  display:block;font-family:var(--body);font-weight:700;font-size:1.28rem;
  color:var(--ink);line-height:1.15;letter-spacing:-0.01em;
}
.brand-word em{
  display:block;font-family:var(--mono);font-style:normal;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:2px;
}
.main-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end;}
.main-nav a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.main-nav a:hover{border-color:var(--gold);}
.nav-cta{
  background:var(--ink);color:var(--white)!important;
  padding:15px 34px!important;border-radius:999px!important;border-bottom:none!important;
  line-height:1;font-size:.85rem!important;
}
.nav-cta:hover{background:var(--study-blue);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{width:24px;height:2px;background:var(--ink);display:block;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(182,134,44,.16), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--study-blue) 100%);
  color:var(--white);
  padding:120px 0 130px;
  overflow:hidden;
}
.hero-inner{max-width:760px;position:relative;z-index:2;}
.hero .eyebrow{color:var(--gold-light);}
.hero h1{color:var(--white);}
.hero-lede{color:rgba(255,253,248,.82);font-size:1.08rem;max-width:560px;}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero .btn-ghost{border-color:rgba(255,253,248,.5);color:var(--white);}
.hero .btn-ghost:hover{background:var(--white);color:var(--ink);}
.hero-ribbon{
  position:absolute;top:26px;right:-64px;
  background:var(--gold);color:var(--ink);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 70px;transform:rotate(35deg);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/* ---------- two-col layout ---------- */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.mission-stack{display:flex;flex-direction:column;gap:24px;max-width:760px;margin:0 auto;}
.mission-box{
  background:var(--white);border:1px solid rgba(28,43,69,.1);
  border-radius:var(--radius);padding:36px 34px;
  box-shadow:0 10px 28px rgba(28,43,69,.06);
}
.mission-box p:last-child{margin-bottom:0;}
.two-col.reverse{grid-template-columns:.9fr 1.1fr;}
.two-col.reverse .col-art{order:1;}
.two-col.reverse .col-copy{order:2;}
.col-art img{border-radius:var(--radius);box-shadow:0 18px 40px rgba(28,43,69,.18);}
.dropcap{
  font-size:1em;color:var(--gold);
}
.pillars{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;}
.pillars li{
  border-left:3px solid var(--gold);padding-left:14px;color:var(--charcoal-soft);
}
.pillars span{display:block;font-family:var(--display);color:var(--ink);font-weight:600;}
.signature{font-family:var(--mono);font-size:.85rem;color:var(--ink);margin-top:24px;}

/* ---------- cards / grids ---------- */
.card-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:20px;
}
.card{
  background:var(--white);border:1px solid rgba(28,43,69,.08);
  border-radius:var(--radius);padding:28px 22px;
  box-shadow:0 8px 24px rgba(28,43,69,.05);
}
.card-index{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.card h3{margin-top:8px;}
.card p{font-size:.94rem;margin-bottom:0;}

.study-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:rgba(28,43,69,.1);border:1px solid rgba(28,43,69,.1);
  border-radius:var(--radius);overflow:hidden;
}
.study-item{
  background:var(--white);padding:30px 22px;
}
.study-item h3{margin:0 0 8px;font-size:1.08rem;}
.study-item p{font-size:.9rem;margin:0;color:var(--charcoal-soft);}
.gain-grid .study-item{padding:32px 24px;}

.card-grid-wide{grid-template-columns:1fr;margin-top:18px;}
.card-highlight{
  background:linear-gradient(135deg, var(--ink), var(--study-blue));
  border:none;
}
.card-highlight .card-index{color:var(--gold-light);}
.card-highlight h3,.card-highlight p{color:var(--white);}

.cta-band{
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(182,134,44,.14), transparent 60%),
    var(--ink);
  padding:100px 0;
}
.cta-band .eyebrow{color:var(--gold-light);}
.cta-band h2{color:var(--white);}
.cta-band .section-lede{color:rgba(255,253,248,.78);}

/* ---------- booklet embeds ---------- */
.booklet-frame{
  width:100%;aspect-ratio:16/10;background:var(--white);
  border:1px solid rgba(28,43,69,.12);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 20px 44px rgba(28,43,69,.12);
}
.booklet-frame iframe{width:100%;height:100%;border:0;display:block;}
.booklet-frame.form-frame{aspect-ratio:auto;height:auto;}
.booklet-actions{text-align:center;margin-top:24px;}

/* ---------- contact ---------- */
.contact-details{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;color:var(--charcoal-soft);}
.inquiry-form{background:var(--white);border:1px solid rgba(28,43,69,.1);border-radius:var(--radius);padding:28px;box-shadow:0 12px 30px rgba(28,43,69,.08);}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:6px;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:12px 14px;border:1px solid rgba(28,43,69,.2);
  border-radius:var(--radius);font-family:var(--body);font-size:.96rem;background:var(--parchment);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:2px solid var(--gold);outline-offset:1px;
}
.hp-field{position:absolute;left:-9999px;}
.form-status{margin-top:14px;font-family:var(--mono);font-size:.82rem;text-align:center;min-height:1.2em;}
.form-status.success{color:#2E6B3E;}
.form-status.error{color:var(--ember);}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,253,248,.8);padding:56px 0 26px;}
.footer-inner{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:30px;padding-bottom:34px;border-bottom:1px solid rgba(255,253,248,.12);
}
.footer-brand{display:flex;gap:14px;align-items:center;max-width:340px;}
.footer-brand p{color:rgba(255,253,248,.7);font-size:.88rem;margin:0;}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap;}
.footer-nav a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,253,248,.75);
}
.footer-nav a:hover{color:var(--gold-light);}
.site-footer .fine-note{color:rgba(255,253,248,.45);margin-top:22px;opacity:1;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .two-col,.two-col.reverse,.two-col.even{grid-template-columns:1fr;}
  .two-col.reverse .col-art{order:0;}
  .two-col.even{gap:36px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .study-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1000px){
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--parchment);flex-direction:column;align-items:flex-start;
    padding:18px 28px 26px;gap:14px;border-bottom:1px solid rgba(28,43,69,.1);
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-cta{width:100%;text-align:center;}
}
@media (max-width:760px){
  .card-grid{grid-template-columns:1fr;}
  .study-grid{grid-template-columns:1fr;}
  .hero{padding:100px 0 90px;}
  .section{padding:64px 0;}
}

/* =========================================================
   ANIMATION
   ========================================================= */

/* Hero entrance */
.hero-inner > *{
  opacity:0;
  animation:heroRise .7s cubic-bezier(.22,.68,.35,1) forwards;
}
.hero .eyebrow{animation-delay:.05s;}
.hero h1{animation-delay:.15s;}
.hero-lede{animation-delay:.28s;}
.hero-actions{animation-delay:.4s;}
.hero-ribbon{
  opacity:0;
  animation:ribbonIn .6s cubic-bezier(.22,.68,.35,1) .5s forwards;
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes ribbonIn{
  from{opacity:0;transform:rotate(35deg) translateY(-10px);}
  to{opacity:1;transform:rotate(35deg) translateY(0);}
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.68,.35,1) var(--d, 0s),
             transform .7s cubic-bezier(.22,.68,.35,1) var(--d, 0s);
}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* Hover micro-interactions (combined with .reveal's transition so the
   shorthand below doesn't strip out the fade-in defined above) */
.card,.study-item,.mission-box{
  transition:opacity .7s cubic-bezier(.22,.68,.35,1) var(--d, 0s),
             transform .3s ease,
             box-shadow .3s ease,
             border-color .3s ease;
}
.card:hover,.study-item:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(28,43,69,.12);
}
.mission-box:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(28,43,69,.1);
}
.brand-mark{transition:transform .3s ease;}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.04);}

/* Nav underline sweep */
.main-nav a{position:relative;}
.main-nav a:not(.nav-cta)::after{
  content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--gold);transition:right .25s ease;
}
.main-nav a:not(.nav-cta):hover::after{right:0;}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  .hero-inner > *, .hero-ribbon, .reveal{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .card:hover,.study-item:hover,.mission-box:hover,.brand:hover .brand-mark{
    transform:none;
  }
}