/* ════════════════════════════════════════════════════════════════
   REMAKING SCHOOL — STYLES
   ════════════════════════════════════════════════════════════════

   HOW THIS FILE WORKS
   The block right below (:root) holds every color, typeface, and key
   spacing value the site uses — each defined exactly once. Change a
   value here and it updates everywhere automatically. You almost never
   need to touch anything below the token block to restyle the site.

   These values are lifted directly from your brand palette document.
   ════════════════════════════════════════════════════════════════ */

/* ▼▼▼  BRAND TOKENS — EDIT HERE TO RESTYLE THE WHOLE SITE  ▼▼▼ */
:root{
  /* ---- The two anchors ---- */
  --maroon:#6E1B2C;        /* Heritage Maroon — primary accent */
  --maroon-900:#4E1320;    /* darkest maroon — the quote band */
  --maroon-500:#8C2A3C;    /* lighter maroon */
  --maroon-wash:#F0E2E3;   /* faint maroon tint */
  --navy:#232D4B;          /* Jefferson Navy — headings, buttons */
  --navy-900:#161D33;
  --navy-400:#4A5575;      /* softer navy — body-adjacent text */
  --navy-mist:#C8CBD2;

  /* ---- Ground & ink ---- */
  --parchment:#F3EEE2;     /* page background */
  --parchment-deep:#E9E2D2;/* portrait frame fill */
  --ink:#1F242B;           /* body text */

  /* ---- Accents (use sparingly) ---- */
  --gold:#998542;          /* hairlines, eyebrows, rules — never body text */
  --gold-bright:#B59A4E;
  --boxwood:#5F6E54;       /* second accent, rarely used */

  /* ---- Neutrals ---- */
  --mortar:#8C8179;        /* small labels, captions */
  --slate:#8996A0;

  /* ---- Type ---- */
  --serif:"Hoefler Text",Georgia,"Garamond","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* ---- Layout dials ---- */
  --maxw:1040px;                  /* max content width */
  --pad-x:clamp(22px,6vw,56px);   /* left/right page margins */
  --pad-y:clamp(60px,10vw,116px); /* vertical space between sections */
}
/* ▲▲▲  END BRAND TOKENS — everything below is layout & detail  ▲▲▲ */


/* ---------- base ---------- */
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.7;
  font-size:17px;
}
a{color:inherit;}

/* ---------- shared type devices ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin:0 0 20px;
}
.rule-gold{height:1px;background:var(--gold);opacity:.85;border:0;}
.section-head{
  font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.25rem);
  line-height:1.12;
  letter-spacing:.005em;
  margin:0 0 22px;
  color:var(--navy);
}
.lede{
  font-size:clamp(1.06rem,1.7vw,1.2rem);
  color:var(--ink);
  max-width:64ch;
  margin:0 0 18px;
}
p{margin:0 0 18px;}
p:last-child{margin-bottom:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);}

/* ---------- header ---------- */
.topbar{height:4px;background:var(--gold);}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(243,238,226,.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(31,36,43,.10);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:14px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.mono{
  width:42px;height:42px;flex:none;
  border:1.3px solid var(--maroon);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:.03em;color:var(--maroon);
}
.brand-name{
  font-family:var(--serif);
  font-size:17px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  line-height:1;
}
.nav{display:flex;gap:28px;align-items:center;}
.nav a{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-400);text-decoration:none;font-weight:600;
  padding:6px 0;position:relative;transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);
  transition:right .25s ease;
}
.nav a:hover{color:var(--navy);}
.nav a:hover::after{right:0;}
.nav a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero .wrap{padding-top:clamp(64px,11vw,128px);padding-bottom:clamp(56px,9vw,104px);position:relative;z-index:2;}
.hero--short .wrap{padding-top:clamp(48px,8vw,80px);padding-bottom:clamp(40px,6vw,64px);}
.hero-headline{
  font-weight:500;
  font-size:clamp(2.3rem,6vw,4.1rem);
  line-height:1.07;
  letter-spacing:-.005em;
  color:var(--navy);
  margin:0 0 30px;
  max-width:20ch;
}
.hero-headline--small{
  font-size:clamp(1.8rem,4vw,2.8rem);
  max-width:26ch;
}
.hero-headline em{font-style:normal;color:var(--maroon);}
.hero-sub{
  font-size:clamp(1.1rem,1.9vw,1.32rem);
  color:var(--navy-400);
  max-width:58ch;
  margin:0 0 36px;
}
.hero-rule{display:flex;align-items:center;gap:18px;max-width:520px;}
.hero-rule .line{flex:1;height:1px;background:var(--gold);opacity:.8;}
.hero-rule .tag{
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mortar);
  white-space:nowrap;
}
.watermark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-weight:500;
  font-size:clamp(18rem,32vw,30rem);line-height:1;
  color:var(--maroon);opacity:.05;z-index:1;pointer-events:none;user-select:none;
}

/* ---------- generic section ---------- */
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y);}
.section--line{border-top:1px solid rgba(31,36,43,.12);}

/* ---------- approach / cycle ---------- */
.cycle{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:46px;border:1px solid rgba(31,36,43,.12);
}
.phase{
  padding:26px 24px 30px;position:relative;
  border-right:1px solid rgba(31,36,43,.12);
}
.phase:last-child{border-right:0;}
.phase .ord{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;color:var(--gold);font-weight:700;
  margin:0 0 16px;text-transform:uppercase;
}
.phase h3{
  font-family:var(--serif);font-weight:500;font-size:1.32rem;color:var(--navy);margin:0 0 10px;letter-spacing:.01em;
}
.phase p{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--navy-400);margin:0;}
.cycle-foot{
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mortar);
  margin:18px 0 0;display:flex;align-items:center;gap:10px;
}
.cycle-foot .arrow{color:var(--gold);font-size:15px;}

/* ---------- founder ---------- */
.founder-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:8px;}
.portrait{
  border:1px solid var(--gold);background:var(--parchment-deep);
  aspect-ratio:4/5;position:relative;overflow:hidden;
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.portrait::after{content:"";position:absolute;inset:7px;border:1px solid rgba(153,133,66,.45);pointer-events:none;}
.founder-role{
  font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--navy-400);
  margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid rgba(31,36,43,.10);
}
.founder-body p{font-size:1.05rem;}
.honors{margin-top:30px;padding-top:24px;border-top:1px solid rgba(31,36,43,.10);}
.honors .hlabel{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mortar);
  margin:0 0 14px;
}
.honors ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.honors li{
  font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--navy);
  padding-left:18px;position:relative;
}
.honors li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--gold);}

/* ---------- engagements ---------- */
.engage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;}
.eng-card{border-top:2px solid var(--maroon);padding:20px 0 0;}
.eng-card h3{font-family:var(--serif);font-weight:500;font-size:1.18rem;color:var(--navy);margin:0 0 9px;}
.eng-card p{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--navy-400);margin:0;}
.partners{margin-top:56px;padding-top:30px;border-top:1px solid rgba(31,36,43,.12);}
.partners .plabel{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mortar);
  margin:0 0 18px;
}
.partner-list{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;}
.partner-list span{
  font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--navy);letter-spacing:.01em;
}

/* ---------- quote band ---------- */
.band{background:var(--maroon-900);color:var(--parchment);}
.band .wrap{padding-top:clamp(72px,10vw,120px);padding-bottom:clamp(72px,10vw,120px);text-align:center;}
.band .qrule{width:64px;height:1px;background:var(--gold);margin:0 auto 34px;opacity:.9;}
.band blockquote{
  margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.45rem,3.2vw,2.05rem);line-height:1.4;letter-spacing:.005em;
  max-width:24ch;margin-left:auto;margin-right:auto;
}
.band cite{
  display:block;margin-top:30px;font-family:var(--sans);font-style:normal;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);
}

/* ---------- contact (home page version) ---------- */
.contact-inner{max-width:660px;}
.btn{
  display:inline-block;margin-top:14px;
  font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--parchment);background:var(--navy);text-decoration:none;
  padding:15px 30px;border:1px solid var(--navy);
  transition:background .2s ease,color .2s ease;
  cursor:pointer;
}
.btn:hover{background:var(--maroon);border-color:var(--maroon);}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.contact-meta{
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--navy-400);
  margin-top:34px;line-height:1.8;
}
.contact-meta a{color:var(--maroon);text-decoration:none;border-bottom:1px solid rgba(110,27,44,.3);}
.contact-meta a:hover{border-bottom-color:var(--maroon);}

/* ---------- contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:clamp(40px,6vw,80px);
  align-items:start;
}
.contact-form-wrap{
  background:#fff;
  border:1px solid rgba(31,36,43,.10);
  padding:clamp(28px,4vw,44px);
}
.contact-form{display:flex;flex-direction:column;gap:24px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:600;
}
.form-group input,
.form-group select,
.form-group textarea{
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:var(--parchment);
  border:1px solid rgba(31,36,43,.18);
  padding:14px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(153,133,66,.15);
}
.form-group textarea{resize:vertical;min-height:120px;}
.form-group select{cursor:pointer;}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--mortar);
  opacity:0.7;
}
.contact-form .btn{
  align-self:flex-start;
  margin-top:8px;
}

/* contact sidebar */
.contact-sidebar{display:flex;flex-direction:column;gap:32px;}
.sidebar-block{
  padding-bottom:28px;
  border-bottom:1px solid rgba(31,36,43,.10);
}
.sidebar-block:last-child{border-bottom:0;padding-bottom:0;}
.sidebar-label{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin:0 0 12px;
}
.sidebar-text{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.65;
  color:var(--navy-400);
  margin:0 0 14px;
}
.sidebar-text:last-child{margin-bottom:0;}
.sidebar-link{
  font-family:var(--sans);
  font-size:14px;
  color:var(--maroon);
  text-decoration:none;
  border-bottom:1px solid rgba(110,27,44,.3);
  transition:border-color .2s ease;
}
.sidebar-link:hover{border-bottom-color:var(--maroon);}
.sidebar-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sidebar-list li{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--navy-400);
  padding-left:16px;
  position:relative;
}
.sidebar-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:6px;
  height:6px;
  background:var(--gold);
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(31,36,43,.12);}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:40px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:13px;}
.footer-brand .mono{width:34px;height:34px;font-size:15px;}
.footer-brand .fn{font-family:var(--serif);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);}
.footer-meta{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--mortar);line-height:1.7;text-align:right;}

/* ---------- reveal-on-scroll animation ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.js .reveal.is-visible{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .founder-grid{grid-template-columns:1fr;}
  .portrait{max-width:280px;}
  .engage-grid{grid-template-columns:1fr;gap:0;}
  .eng-card{border-top:0;border-bottom:1px solid rgba(31,36,43,.12);padding:22px 0;}
  .eng-card:first-child{border-top:2px solid var(--maroon);}
  .cycle{grid-template-columns:1fr 1fr;}
  .phase:nth-child(2){border-right:0;}
  .phase:nth-child(1),.phase:nth-child(2){border-bottom:1px solid rgba(31,36,43,.12);}
  .contact-grid{grid-template-columns:1fr;}
  .contact-sidebar{
    order:-1;
    flex-direction:row;
    flex-wrap:wrap;
    gap:24px;
    padding-bottom:32px;
    border-bottom:1px solid rgba(31,36,43,.12);
    margin-bottom:8px;
  }
  .sidebar-block{
    flex:1 1 200px;
    border-bottom:0;
    padding-bottom:0;
  }
}
@media (max-width:600px){
  body{font-size:16px;}
  .nav{display:none;}
  .cycle{grid-template-columns:1fr;}
  .phase{border-right:0;border-bottom:1px solid rgba(31,36,43,.12);}
  .phase:last-child{border-bottom:0;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
  .footer-meta{text-align:left;}
  .watermark{display:none;}
  .contact-sidebar{flex-direction:column;}
  .sidebar-block{flex:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .nav a::after{transition:none;}
}