/* ===========================================================
   MAHENDRA JANGIR — SITE DESIGN SYSTEM
   Protect · Build · Multiply

   Load order matters:
     1. site.css                  (this file — tokens + layout)
     2. protected-components.css  (verbatim from original source)

   The :root tokens below are the same values used by the original
   inline stylesheet. protected-components.css depends on them.
   =========================================================== */

:root{
  --navy-deep:#0a1522;
  --navy:#0f1e30;
  --navy-alt:#16283c;
  --gold:#c9a24b;
  --gold-light:#e7ca82;
  --ivory:#f7f3ea;
  --ivory-dim:#efe8d8;
  --ink:#1e2a36;
  --ink-soft:#4a5866;
  --sky:#a9c3d6;
  --line: rgba(201,162,75,0.28);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1180px;
  --measure: 68ch;
  --radius: 2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto is required so that width/height attributes used for
   layout stability don't override CSS aspect-ratio and sizing. */
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  margin:0;
  letter-spacing:0.01em;
}
h1{font-size:clamp(2.6rem,7vw,5rem);}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);}
h3{font-size:clamp(1.15rem,2vw,1.45rem);}
em{font-style:italic; color:var(--gold);}

p{line-height:1.75; color:var(--ink-soft); font-weight:400;}
p.lede{font-size:1.15rem; color:var(--ink);}

.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}
.wrap-narrow{max-width:820px;}

section{position:relative;}
.section-pad{padding:clamp(4.5rem,9vw,8rem) 0;}
.section-pad-sm{padding:clamp(3rem,6vw,5rem) 0;}

.on-navy{background:var(--navy); color:var(--ivory);}
.on-navy h1,.on-navy h2,.on-navy h3{color:var(--ivory);}
.on-navy p{color:rgba(247,243,234,0.72);}
.on-navy-deep{background:var(--navy-deep); color:var(--ivory);}
.on-navy-deep h1,.on-navy-deep h2,.on-navy-deep h3{color:var(--ivory);}
.on-navy-deep p{color:rgba(247,243,234,0.72);}
.on-tint{background:var(--ivory-dim);}

/* Skip link ------------------------------------------------ */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--gold); color:var(--navy-deep);
  padding:0.8rem 1.4rem; font-size:0.8rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.95rem 1.9rem;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline-dark{border-color:rgba(15,30,48,0.35); color:var(--navy);}
.btn-outline-dark:hover{border-color:var(--navy); background:rgba(15,30,48,0.04);}
.btn-outline-light{border-color:rgba(247,243,234,0.4); color:var(--ivory);}
.btn-outline-light:hover{border-color:var(--gold); color:var(--gold-light);}
.btn-ghost{
  display:inline-block;
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); padding:0.5rem 0;
}
.btn-ghost:after{content:"\2192"; margin-left:0.5rem; display:inline-block; transition:margin .3s ease;}
.btn-ghost:hover:after{margin-left:0.9rem;}
.btn-row{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem;}

.divider-gold{width:56px; height:2px; background:var(--gold); border:none; margin:0;}
.divider-gold.center{margin:0 auto;}

/* Topographic background ------------------------------------ */
.topo{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0.5;}
.topo svg{width:100%; height:100%;}
.topo-line{fill:none; stroke:var(--gold); stroke-width:1; opacity:0.16;}
.topo-line.b{opacity:0.1;}
.topo-line.c{opacity:0.07;}

/* Reveal animation ------------------------------------------ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}

/* ===========================================================
   NAVIGATION
   Element IDs here (hamburgerBtn, mobileMenu, mobileCloseBtn)
   and the .site-nav class are referenced by protected.js.
   Do not rename them.
   =========================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(10,21,34,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(247,243,234,0.08);
  transition:background .4s ease;
}
.nav-inner{
  max-width:var(--max); margin:0 auto;
  padding:0.85rem clamp(1.25rem,4vw,3rem);
  display:flex; align-items:center; gap:1.5rem;
}
.nav-logo{display:flex; align-items:center; gap:0.7rem; flex-shrink:0;}
.nav-logo img{height:34px; width:auto;}
.nav-logo .name{
  font-family:var(--serif); color:var(--ivory); font-size:1rem; letter-spacing:0.06em; line-height:1.1;
}
.nav-logo .name small{
  display:block; font-family:var(--sans); font-size:0.56rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold); margin-top:0.2rem;
}
.site-nav .links{display:flex; gap:1.6rem; margin-left:auto;}
.site-nav .links a{
  font-size:0.8rem; color:rgba(247,243,234,0.75); letter-spacing:0.04em;
  padding:0.3rem 0; border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease;
}
.site-nav .links a:hover{color:var(--gold-light);}
.site-nav .links a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold);}
.nav-cta{padding:0.7rem 1.3rem; font-size:0.7rem;}

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:0.4rem; margin-left:auto;
}
.hamburger span{display:block; width:24px; height:1.5px; background:var(--ivory);}

.mobile-menu{
  position:fixed; inset:0; z-index:950; background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transform:translateX(100%); transition:transform .4s ease;
}
.mobile-menu.open{transform:none;}
.mobile-menu a{font-family:var(--serif); font-size:1.5rem; color:var(--ivory);}
.mobile-menu a.btn{font-family:var(--sans); font-size:0.78rem; margin-top:1rem;}
.mobile-close{
  position:absolute; top:1.4rem; right:1.4rem; background:none; border:none;
  color:var(--ivory); font-size:2.2rem; line-height:1; cursor:pointer;
}

@media(max-width:980px){
  .site-nav .links, .nav-cta{display:none;}
  .hamburger{display:flex;}
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  background:var(--navy-deep); color:var(--ivory);
  padding:clamp(8rem,15vw,11rem) 0 clamp(4rem,8vw,6rem);
  overflow:hidden;
}
.hero-inner{
  max-width:var(--max); margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  position:relative; z-index:2;
}
.hero h1{color:var(--ivory); margin:1.2rem 0 0;}
.hero .role-line{
  font-family:var(--serif); font-size:clamp(1.05rem,1.9vw,1.3rem); font-style:italic;
  color:var(--gold-light); margin:1.4rem 0 0; line-height:1.6;
}
.hero .body{color:rgba(247,243,234,0.72); max-width:52ch; margin-top:1.5rem;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem;}
.hero-tagline{
  display:flex; align-items:center; gap:1rem; margin-top:3rem;
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold);
}
.hero-tagline .rule{display:block; width:48px; height:1px; background:var(--gold); opacity:0.6;}
.hero-portrait .frame{
  position:relative; border:1px solid rgba(201,162,75,0.32); padding:0.7rem;
}
.hero-portrait .frame:before{
  content:""; position:absolute; inset:-14px -14px 14px 14px; border:1px solid rgba(201,162,75,0.16); pointer-events:none;
}
.hero-portrait img{width:100%; object-fit:cover; aspect-ratio:4/5;}

/* Compact hero for interior pages */
.page-hero{
  background:var(--navy-deep); color:var(--ivory);
  padding:clamp(7.5rem,13vw,9.5rem) 0 clamp(3rem,6vw,4.5rem);
  overflow:hidden;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{color:var(--ivory); font-size:clamp(2.2rem,5vw,3.6rem); margin-top:1.1rem; max-width:20ch;}
.page-hero p{color:rgba(247,243,234,0.72); max-width:var(--measure); margin-top:1.5rem;}
.page-hero .lede{color:var(--ivory);}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  /* Name and headline lead on mobile; the portrait follows so the H1 is
     never pushed below the fold. */
  .hero-portrait{max-width:300px; margin-top:1rem;}
  .hero-tagline{margin-top:2rem;}
}

/* Breadcrumbs ------------------------------------------------ */
.crumbs{font-size:0.74rem; letter-spacing:0.08em; color:rgba(247,243,234,0.5);}
.crumbs a{color:rgba(247,243,234,0.7);}
.crumbs a:hover{color:var(--gold-light);}
.crumbs span{margin:0 0.5rem; opacity:0.5;}

/* ===========================================================
   SECTION HEADS + GENERIC LAYOUT
   =========================================================== */
.section-head{max-width:var(--measure); margin-bottom:3rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{margin-top:1rem;}
.section-head p{margin-top:1.2rem;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;}
.split.narrow-left{grid-template-columns:0.85fr 1.15fr;}
@media(max-width:900px){.split, .split.narrow-left{grid-template-columns:1fr;}}

.imgwrap{position:relative; overflow:hidden; border:1px solid var(--line); padding:0.6rem;}
.imgwrap img{width:100%; object-fit:cover;}
.imgwrap .tag{
  position:absolute; left:0.6rem; bottom:0.6rem; background:var(--navy-deep); color:var(--gold);
  font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase; padding:0.5rem 0.9rem;
}

.prose > * + *{margin-top:1.3rem;}
.prose h2{margin-top:3rem;}
.prose h3{margin-top:2.2rem;}
.prose p{max-width:var(--measure);}
.prose ul, .prose ol{max-width:var(--measure); color:var(--ink-soft); line-height:1.8; padding-left:1.2rem;}
.prose li + li{margin-top:0.5rem;}
.prose blockquote{
  margin:2.5rem 0; padding:0 0 0 1.6rem; border-left:2px solid var(--gold);
  font-family:var(--serif); font-size:1.2rem; font-style:italic; color:var(--navy); line-height:1.6;
  max-width:var(--measure);
}
.on-navy .prose blockquote, .on-navy-deep .prose blockquote{color:var(--ivory);}

/* ===========================================================
   PATHWAY CARDS (two doors on the homepage)
   =========================================================== */
.pathways{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2rem);}
@media(max-width:820px){.pathways{grid-template-columns:1fr;}}
.pathway{
  position:relative; background:#fff; border:1px solid var(--line);
  padding:clamp(2rem,4vw,3rem); display:flex; flex-direction:column;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.pathway:hover{transform:translateY(-4px); box-shadow:0 22px 55px rgba(10,21,34,0.10); border-color:var(--gold);}
.pathway h3{margin:1rem 0 0; font-size:clamp(1.4rem,2.4vw,1.8rem); color:var(--navy);}
.pathway p{margin-top:1rem; flex-grow:1;}
.pathway .btn-ghost{margin-top:1.6rem;}
.pathway .who{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(15,30,48,0.08);
  font-size:0.82rem; color:var(--ink-soft);
}

/* ===========================================================
   5F GRID
   =========================================================== */
.f-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:3.5rem;}
@media(max-width:1000px){.f-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr;}}
.f-card{
  position:relative; border:1px solid rgba(247,243,234,0.14); padding:2rem 1.4rem 1.8rem;
  background:rgba(247,243,234,0.03); transition:border-color .4s ease, background .4s ease;
}
.f-card:hover{border-color:var(--gold); background:rgba(247,243,234,0.06);}
.f-card .num{
  font-family:var(--serif); font-size:0.8rem; color:var(--gold); letter-spacing:0.1em; display:block;
}
.f-card .ic{width:28px; height:28px; color:var(--gold-light); margin:1.2rem 0 1rem;}
.f-card h3{color:var(--ivory); font-size:1.25rem;}
.f-card p{font-size:0.86rem; margin-top:0.7rem; color:rgba(247,243,234,0.66); line-height:1.65;}

.believe-close{margin-top:3.5rem; max-width:var(--measure);}
.f-summary{
  font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.4rem); font-style:italic;
  color:var(--gold-light); line-height:1.6;
}

/* 5F detail sections ---------------------------------------- */
.f-detail{border-top:1px solid rgba(15,30,48,0.1); padding:clamp(2.5rem,5vw,4rem) 0;}
.f-detail:first-of-type{border-top:none;}
.f-detail .split{align-items:start;}
.f-detail .marker{
  font-family:var(--serif); font-size:clamp(3rem,7vw,5rem); color:var(--gold); opacity:0.28; line-height:1;
}

/* ===========================================================
   CHIPS + THEMES
   =========================================================== */
.chip-row{display:flex; flex-wrap:wrap; gap:0.6rem;}
.chip{
  border:1px solid var(--line); padding:0.6rem 1.1rem; font-size:0.78rem; color:var(--ink-soft);
  letter-spacing:0.04em; background:#fff;
}
.on-navy .chip, .on-navy-deep .chip{
  border-color:rgba(247,243,234,0.18); color:rgba(247,243,234,0.8); background:rgba(247,243,234,0.03);
}
.themes{display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem 2.5rem; margin-top:2.5rem;}
@media(max-width:700px){.themes{grid-template-columns:1fr;}}
.theme-item{display:flex; gap:0.9rem; align-items:baseline; padding-bottom:0.9rem; border-bottom:1px solid rgba(15,30,48,0.08);}
.theme-item .mark{color:var(--gold); flex-shrink:0;}
.theme-item .txt{font-size:0.94rem; color:var(--ink-soft);}
.together-note{
  margin-top:2.5rem; font-size:0.82rem; font-style:italic; color:var(--ink-soft); opacity:0.8; max-width:var(--measure);
}

/* Question list (Financial Guidance) -------------------------- */
.q-list{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2.5rem;}
@media(max-width:820px){.q-list{grid-template-columns:1fr;}}
.q-item{
  background:#fff; border:1px solid var(--line); border-left:2px solid var(--gold);
  padding:1.5rem 1.6rem;
}
.q-item p{margin:0; font-family:var(--serif); font-size:1.05rem; font-style:italic; color:var(--navy); line-height:1.5;}

/* ===========================================================
   TIMELINE (journey)
   =========================================================== */
.timeline{position:relative; margin-top:3rem;}
.elevation-svg{width:100%; height:90px; display:block; opacity:0.6;}
.tl-items{display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; margin-top:1rem;}
@media(max-width:1000px){.tl-items{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.tl-items{grid-template-columns:1fr;}}
.tl-item{border-top:1px solid var(--line); padding-top:1.2rem;}
.tl-item .yr{
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); display:block;
}
.tl-item h3{font-size:1.1rem; color:var(--navy); margin-top:0.6rem;}
.tl-item p{font-size:0.86rem; margin-top:0.5rem; line-height:1.6;}

/* Narrative chapters ----------------------------------------- */
.chapter{
  position:relative; padding:0 0 clamp(2.5rem,5vw,4rem) clamp(2rem,5vw,4rem);
  border-left:1px solid var(--line);
}
.chapter:last-child{border-left-color:transparent;}
.chapter:before{
  content:""; position:absolute; left:-5px; top:0.4rem; width:9px; height:9px;
  background:var(--gold); border-radius:50%;
}
.chapter .step{
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); display:block;
}
.chapter h3{margin-top:0.8rem; color:var(--navy); font-size:clamp(1.3rem,2.4vw,1.7rem);}
.chapter p{margin-top:1rem; max-width:var(--measure);}
.chapter .took-away{
  margin-top:1.4rem; padding-left:1.1rem; border-left:2px solid rgba(201,162,75,0.4);
  font-family:var(--serif); font-style:italic; color:var(--navy); font-size:1.02rem; line-height:1.6;
}

/* ===========================================================
   LICENSING
   =========================================================== */
.licensing{background:var(--navy); color:var(--ivory);}
.lic-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); margin-top:1rem;}
@media(max-width:700px){.lic-grid{grid-template-columns:1fr;}}
.lic-col h3{color:var(--gold-light); font-size:1.1rem;}
.lic-col ul{list-style:none; padding:0; margin:1.2rem 0 0;}
.lic-col li{
  padding:0.7rem 0; border-bottom:1px solid rgba(247,243,234,0.1);
  font-size:0.94rem; color:rgba(247,243,234,0.8);
}
.lic-disclaimer{
  margin-top:2.5rem; font-size:0.78rem; line-height:1.8; color:rgba(247,243,234,0.45); max-width:80ch;
}

/* ===========================================================
   RESOURCE CARDS
   The data-resource-link attribute on the link inside each card
   is read by protected.js. Do not remove it.
   =========================================================== */
.res-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;}
@media(max-width:1000px){.res-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.res-grid{grid-template-columns:1fr;}}
.res-card{
  background:#fff; border:1px solid var(--line); padding:2rem 1.6rem;
  display:flex; flex-direction:column;
  transition:transform .4s ease, box-shadow .4s ease;
}
.res-card:hover{transform:translateY(-4px); box-shadow:0 18px 45px rgba(10,21,34,0.09);}
.res-card h3{margin:0.9rem 0 0; font-size:1.12rem; color:var(--navy); line-height:1.3;}
.res-card p{font-size:0.88rem; margin-top:0.8rem; flex-grow:1; line-height:1.65;}
.res-card .btn-ghost{margin-top:1.3rem;}
.res-meta{
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(15,30,48,0.08);
  font-size:0.76rem; color:var(--ink-soft); line-height:1.6;
}
.res-meta strong{color:var(--navy); font-weight:600;}
.res-gated{
  display:inline-block; margin-top:0.8rem; font-size:0.66rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gold);
}

/* ===========================================================
   BLIND SPOT CTA + BUILDER BAND
   =========================================================== */
.blindspot{background:var(--ivory-dim); text-align:center;}
.blindspot h2{margin-top:1rem;}
.blindspot p{max-width:var(--measure); margin:1.3rem auto 0;}
.blindspot .btn{margin-top:2rem;}
.blindspot .fine{font-size:0.78rem; font-style:italic; opacity:0.8; margin-top:1.6rem;}

.builder{background:var(--navy-alt); color:var(--ivory);}
.builder-inner{
  display:grid; grid-template-columns:1.4fr 0.6fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
@media(max-width:820px){.builder-inner{grid-template-columns:1fr;}}
.builder h2{color:var(--ivory);}
.builder p{color:rgba(247,243,234,0.75);}
.builder-side{display:flex; justify-content:flex-end;}
@media(max-width:820px){.builder-side{justify-content:flex-start;}}

/* Transparency block (Build a Business) ---------------------- */
.transparency{
  border:1px solid var(--line); background:#fff; padding:clamp(1.8rem,4vw,2.6rem); margin-top:3rem;
}
.transparency h3{color:var(--navy); font-size:1.2rem;}
.transparency ul{margin:1.3rem 0 0; padding-left:1.2rem; color:var(--ink-soft); line-height:1.85;}
.transparency li + li{margin-top:0.6rem;}

/* ===========================================================
   BEYOND BUSINESS
   =========================================================== */
.beyond-tags{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:2rem;}
.beyond-tags span{
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--ink-soft); padding:0.45rem 0.9rem;
}
.beyond-optional-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.5rem;}
@media(max-width:700px){.beyond-optional-grid{grid-template-columns:1fr;}}

/* ===========================================================
   CONNECT
   =========================================================== */
.connect{background:var(--navy); color:var(--ivory); overflow:hidden;}
.connect-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start;
}
@media(max-width:920px){.connect-grid{grid-template-columns:1fr;}}
.connect h2{color:var(--ivory);}
.connect-intro p{color:rgba(247,243,234,0.72); max-width:46ch;}
.social-row{display:flex; gap:0.9rem; margin-top:2rem;}
.social-row a{
  width:42px; height:42px; border:1px solid rgba(247,243,234,0.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .3s ease, color .3s ease;
  color:rgba(247,243,234,0.8);
}
.social-row a:hover{border-color:var(--gold); color:var(--gold-light);}
.social-row svg{width:19px; height:19px; stroke:currentColor;}
.contact-details{display:flex; flex-direction:column; gap:0.8rem; margin-top:2rem;}
.contact-details a{
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--gold-light);
  border-bottom:1px solid rgba(231,202,130,0.25); padding-bottom:0.3rem; width:fit-content;
  transition:border-color .3s ease, color .3s ease;
}
.contact-details a:hover{border-color:var(--gold-light); color:var(--ivory);}

/* Intent chooser (routes to the right conversation) ----------- */
.intent-list{display:grid; gap:0.8rem; margin-top:2rem;}
.intent-item{
  display:flex; gap:1rem; align-items:flex-start;
  border:1px solid rgba(247,243,234,0.16); background:rgba(247,243,234,0.03);
  padding:1.1rem 1.3rem;
}
.intent-item .n{font-family:var(--serif); color:var(--gold); font-size:0.9rem; flex-shrink:0; padding-top:0.15rem;}
.intent-item p{margin:0; font-size:0.9rem; color:rgba(247,243,234,0.78); line-height:1.6;}
.intent-item strong{color:var(--ivory); font-weight:600; display:block; margin-bottom:0.25rem; font-size:0.94rem;}

/* Booking band ------------------------------------------------ */
.booking{
  border:1px solid rgba(247,243,234,0.16); background:rgba(247,243,234,0.03);
  padding:clamp(1.5rem,3vw,2rem); margin-top:2.5rem;
}
.booking h3{color:var(--ivory); font-size:1.15rem;}
.booking p{margin-top:0.7rem; font-size:0.9rem;}
.booking .btn{margin-top:1.3rem;}

/* ===========================================================
   IDEAS & LESSONS
   =========================================================== */
.topic-nav{display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem;}
.topic-nav a, .topic-nav span{
  font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--line); padding:0.5rem 1rem; color:var(--ink-soft);
}
.topic-nav a:hover{border-color:var(--gold); color:var(--navy);}

.article-list{display:grid; gap:1.2rem; margin-top:2.5rem;}
.article-card{
  background:#fff; border:1px solid var(--line); padding:clamp(1.6rem,3vw,2.2rem);
  display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center;
  transition:border-color .35s ease, transform .35s ease;
}
.article-card:hover{border-color:var(--gold); transform:translateY(-2px);}
@media(max-width:700px){.article-card{grid-template-columns:1fr;}}
.article-card h3{color:var(--navy); font-size:clamp(1.15rem,2.2vw,1.4rem); line-height:1.3; margin-top:0.7rem;}
.article-card p{font-size:0.9rem; margin-top:0.8rem; max-width:62ch;}
.article-meta{
  font-size:0.74rem; letter-spacing:0.06em; color:var(--ink-soft); opacity:0.8; margin-top:1rem;
}
.article-card .btn-ghost{white-space:nowrap;}

.article-card.planned{background:transparent; border-style:dashed; opacity:0.85;}
.article-card.planned:hover{transform:none; border-color:var(--line);}
.planned-flag{
  font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid rgba(15,30,48,0.16); padding:0.35rem 0.7rem; white-space:nowrap;
}

/* Article page ------------------------------------------------ */
.article-head{max-width:var(--measure);}
.article-byline{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; align-items:center;
  margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid rgba(247,243,234,0.14);
  font-size:0.8rem; color:rgba(247,243,234,0.6);
}
.article-byline .author{color:var(--gold-light);}
.answer-box{
  background:var(--ivory-dim); border-left:2px solid var(--gold);
  padding:clamp(1.4rem,3vw,2rem); margin-bottom:2.5rem;
}
.answer-box .eyebrow{margin-bottom:0.8rem;}
.answer-box p{margin:0; font-size:1.05rem; color:var(--navy); line-height:1.7;}
.takeaways{
  border:1px solid var(--line); background:#fff; padding:clamp(1.5rem,3vw,2.2rem); margin-top:3rem;
}
.takeaways h2{font-size:1.3rem; color:var(--navy); margin:0;}
.takeaways ol{margin:1.3rem 0 0; padding-left:1.3rem; color:var(--ink-soft); line-height:1.85;}
.takeaways li + li{margin-top:0.7rem;}
.article-disclaimer{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(15,30,48,0.1);
  font-size:0.8rem; font-style:italic; color:var(--ink-soft); opacity:0.85; line-height:1.7;
}
.related{margin-top:3rem;}
.related h2{font-size:1.2rem; color:var(--navy);}
.related ul{list-style:none; padding:0; margin:1.2rem 0 0;}
.related li{padding:0.8rem 0; border-bottom:1px solid rgba(15,30,48,0.08);}
.related a{color:var(--navy); font-family:var(--serif); font-size:1.02rem;}
.related a:hover{color:var(--gold);}

/* ===========================================================
   FOOTER
   #year is written to by protected.js — keep the element.
   =========================================================== */
footer{background:var(--navy-deep); color:rgba(247,243,234,0.55); padding:3.5rem 0 2rem;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(247,243,234,0.1);
}
.footer-brand span{font-family:var(--serif); color:var(--ivory); font-size:1.1rem; letter-spacing:0.08em;}
.footer-brand .tag{color:var(--gold); font-size:0.72rem; letter-spacing:0.2em; margin-top:0.6rem; display:block;}
.footer-brand .sub{font-size:0.78rem; margin-top:0.5rem; color:rgba(247,243,234,0.4);}
.footer-nav{display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.6rem;}
.footer-nav a{font-size:0.8rem; color:rgba(247,243,234,0.65);}
.footer-nav a:hover{color:var(--gold-light);}
.footer-links{display:flex; gap:1.8rem; flex-wrap:wrap;}
.footer-links a{font-size:0.8rem; color:rgba(247,243,234,0.6); transition:color .25s ease;}
.footer-links a:hover{color:var(--gold-light);}
.footer-legal{margin-top:2rem; font-size:0.74rem; line-height:1.8; color:rgba(247,243,234,0.35); max-width:80ch;}
.footer-bottom{margin-top:1.8rem; font-size:0.72rem; color:rgba(247,243,234,0.3);}