/* The Counselors Institute — core design system (shared across all templates) */
:root{
  --navy:#14213A; --navy-2:#1C2C4C; --navy-3:#0E1626;
  --parchment:#F4F1EA; --parchment-2:#ECE6D8;
  --brass:#B08D4C; --brass-2:#C7A768; --brass-lo:#8C6E37;
  --slate:#3A3F4B; --ink:#111827;
  --line:rgba(20,33,58,.14); --line-navy:rgba(244,241,234,.18);
  --display:"Playfair Display",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
  --wrap:1200px; --gutter:clamp(1.25rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--parchment);color:var(--slate);line-height:1.6;font-size:clamp(1rem,.96rem + .2vw,1.075rem)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);line-height:1.05;letter-spacing:-.012em;font-optical-sizing:auto}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lo)}
.eyebrow--onnavy{color:var(--brass-2)}
.serif-i{font-family:var(--display);font-style:italic}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--brass);color:#fff;padding:.6rem 1rem;border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;padding:1rem 1.6rem;border-radius:2px;border:1.5px solid transparent;text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;cursor:pointer}
.btn--brass{background:var(--brass);color:#fff;border-color:var(--brass)}
.btn--brass:hover{background:var(--brass-lo);border-color:var(--brass-lo);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--parchment);border-color:var(--line-navy)}
.btn--ghost:hover{border-color:var(--brass-2);color:#fff}
.btn--ink{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ink:hover{border-color:var(--brass);color:var(--brass-lo)}
.btn--lg{padding:1.15rem 2rem;font-size:1rem}

/* masthead */
.masthead{position:sticky;top:0;z-index:20;background:rgba(20,33,58,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-navy)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:1.5rem}
.brandmark{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--parchment)}
.brandmark .seal{width:34px;height:34px;flex:none}
.brandmark .wm{font-family:var(--display);font-weight:500;font-size:1.06rem;letter-spacing:.02em;line-height:1;color:var(--parchment)}
.brandmark .wm small{display:block;font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass-2);margin-top:.28rem}
.mainnav{display:flex;align-items:center;gap:1.9rem}
.mainnav a{font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.02em;color:rgba(244,241,234,.82);text-decoration:none;padding:.4rem 0;position:relative}
.mainnav a:hover{color:#fff}
.mainnav a[aria-current]{color:#fff}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--brass-2);transition:right .22s ease}
.mainnav a:hover::after,.mainnav a[aria-current]::after{right:0}
.nav-cta{display:flex;align-items:center;gap:.9rem}
.nav-cta .assess{font-family:var(--sans);font-weight:500;font-size:.86rem;color:rgba(244,241,234,.82);text-decoration:none}
.nav-cta .assess:hover{color:#fff}

/* section heads */
.sec-head{max-width:62ch}
.sec-head .eyebrow{margin-bottom:1rem}
.sec-head h2{font-size:clamp(2rem,1.6rem + 2.2vw,3.2rem);letter-spacing:-.02em}
.sec-head h2 em{font-family:var(--display);font-style:italic;color:var(--brass-lo)}
.sec-head p{margin-top:1.3rem;max-width:52ch;font-size:1.08rem}

/* FAQ accordion (ARIA) */
.faq{margin-top:2.5rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;font-family:var(--display);font-size:1.2rem;color:var(--ink);line-height:1.25}
.faq-q::after{content:"+";position:absolute;right:.25rem;top:1.2rem;font-family:var(--sans);font-weight:400;font-size:1.5rem;color:var(--brass-lo);transition:transform .2s ease}
.faq-q[aria-expanded="true"]::after{content:"\2013"}
.faq-a{overflow:hidden;max-height:0;transition:max-height .28s ease}
.faq-a-inner{padding:0 3rem 1.5rem 0;max-width:64ch;color:var(--slate)}
.faq-q[aria-expanded="true"] + .faq-a{max-height:600px}

/* footer */
.foot{background:var(--navy);color:rgba(244,241,234,.72);padding-block:3.5rem 2.5rem;border-top:1px solid var(--line-navy)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot h4{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-bottom:1rem}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.foot a{color:rgba(244,241,234,.72);text-decoration:none;font-size:.92rem}
.foot a:hover{color:#fff}
.foot .brandmark{margin-bottom:1rem}
.foot .about{font-size:.9rem;max-width:34ch;color:rgba(244,241,234,.6)}
.legal{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line-navy);font-size:.78rem;color:rgba(244,241,234,.5);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.legal p{max-width:70ch}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:900px){
  .mainnav,.nav-cta{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .foot-top{grid-template-columns:1fr}
}

/* ---- shared page components (used across secondary pages) ---- */
.section{padding-block:clamp(3.5rem,6vw,6rem)}
.section--parch{background:var(--parchment)}
.section--parch2{background:var(--parchment-2)}
.section--navy{background:var(--navy);color:var(--parchment)}
.section--navy .sec-head h2{color:var(--parchment)}
.section--navy .sec-head h2 em{color:var(--brass-2)}
.section--navy .sec-head p{color:rgba(244,241,234,.82)}
.statement{max-width:24ch;font-family:var(--display);font-size:clamp(1.8rem,1.4rem + 2.4vw,3rem);line-height:1.12;color:var(--ink)}
.statement em{font-style:italic;color:var(--brass-lo)}
.meta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem}
.chip{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-lo);border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem}
.section--navy .chip{color:var(--brass-2);border-color:var(--line-navy)}
.modules{margin-top:3rem;display:grid;gap:1rem}
.module{display:grid;grid-template-columns:4.5rem 1fr;gap:clamp(1rem,2.5vw,2rem);padding:1.8rem;border:1px solid var(--line);border-radius:4px;background:var(--parchment);transition:border-color .2s,box-shadow .2s;text-decoration:none;color:inherit}
.module:hover{border-color:var(--brass);box-shadow:0 20px 40px -30px rgba(20,33,58,.5)}
.module .num{font-family:var(--display);font-size:1.7rem;color:var(--brass-lo);font-variant-numeric:tabular-nums}
.module h3{font-size:1.4rem}
.module .lead{margin-top:.5rem;font-size:1rem;max-width:60ch}
.module .go{margin-top:.9rem;display:inline-block;font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lo)}
.fac-grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.fac-card{border:1px solid var(--line-navy);border-radius:3px;padding:1.6rem;background:linear-gradient(180deg,rgba(244,241,234,.03),transparent)}
.fac-card .badge{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--brass-2);display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--brass-2);font-size:1.05rem;margin-bottom:1.1rem}
.fac-card .role{font-family:var(--display);font-size:1.2rem;color:var(--parchment)}
.fac-card p{margin-top:.6rem;font-size:.92rem;color:rgba(244,241,234,.72)}
.fac-note{margin-top:1.6rem;font-size:.82rem;color:rgba(244,241,234,.55)}
.applyband{background:linear-gradient(rgba(14,22,38,.90),rgba(14,22,38,.94)),var(--navy-3);color:var(--parchment);padding-block:clamp(4rem,7vw,7rem);text-align:center}
.applyband .eyebrow{color:var(--brass-2)}
.applyband h2{color:var(--parchment);font-size:clamp(2rem,1.6rem + 2.2vw,3.2rem);margin-top:1rem;max-width:22ch;margin-inline:auto}
.applyband h2 em{font-style:italic;color:var(--brass-2)}
.applyband p{margin:1.3rem auto 0;max-width:52ch;color:rgba(244,241,234,.82);font-size:1.06rem}
.applyband .actions{margin-top:2.2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.93) 42%,rgba(20,33,58,.7) 100%),var(--navy-3);color:var(--parchment);padding-block:clamp(3.5rem,7vw,6rem)}
.page-hero .eyebrow{color:var(--brass-2);margin-bottom:1.2rem}
.page-hero h1{color:var(--parchment);font-weight:300;font-size:clamp(2.3rem,1.9rem + 3vw,4rem);max-width:20ch;line-height:1.03}
.page-hero h1 em{font-style:italic;color:var(--brass-2);font-weight:400}
.page-hero p{margin-top:1.5rem;max-width:52ch;font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:rgba(244,241,234,.86)}
.page-hero .actions{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
@media(max-width:820px){.fac-grid{grid-template-columns:1fr}.module{grid-template-columns:3rem 1fr}}

/* ---- per-page hero background images ---- */
.tci-the-spine .page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.92) 46%,rgba(20,33,58,.76) 100%),var(--navy-3) url("../img/hero-the-spine.webp") center right/cover no-repeat}
.tci-guides .page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.92) 46%,rgba(20,33,58,.76) 100%),var(--navy-3) url("../img/hero-guides.webp") center right/cover no-repeat}
.tci-faculty .page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.92) 46%,rgba(20,33,58,.76) 100%),var(--navy-3) url("../img/hero-faculty.webp") center right/cover no-repeat}
.tci-law-firm-business-plan-workbook .page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.92) 46%,rgba(20,33,58,.76) 100%),var(--navy-3) url("../img/hero-workbook.webp") center right/cover no-repeat}
.tci-blog .page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.92) 46%,rgba(20,33,58,.76) 100%),var(--navy-3) url("../img/hero-journal.webp") center right/cover no-repeat}
.tci-guide-article .page-hero{background:linear-gradient(90deg,var(--navy) 0%,rgba(20,33,58,.92) 46%,rgba(20,33,58,.76) 100%),var(--navy-3) url("../img/hero-guides.webp") center right/cover no-repeat}

/* ---- mobile navigation ---- */
.nav-toggle{display:none;background:none;border:0;padding:.55rem .4rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--parchment);margin:5px 0;border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilenav{display:none}
@media(max-width:900px){
  .nav-toggle{display:block}
  .masthead .wrap{min-height:90px}
  .brandmark .wm{white-space:nowrap;font-size:1rem}
  .brandmark .wm small{letter-spacing:.26em}
  .mobilenav{display:block;background:var(--navy);border-top:1px solid rgba(199,167,104,.25);padding:.4rem 1.4rem 1.4rem}
  .mobilenav[hidden]{display:none}
  .mobilenav a{display:block;padding:.85rem 0;font-family:var(--sans);font-weight:500;font-size:1rem;color:rgba(244,241,234,.9);text-decoration:none;border-bottom:1px solid rgba(244,241,234,.08)}
  .mobilenav a:hover{color:#fff}
  .mobilenav a[aria-current]{color:var(--brass-2)}
  .mobilenav .btn{margin-top:1.1rem;text-align:center;border-bottom:0}
}