/* ============================================================
   Nathan E Sansing — AUTHOR WEBSITE (AWARD-WINNING)
   Design language: "Broken Chain" — dark navy/ink grounding,
   antique gold light breaking through, warm ivory paper for
   reading sections. Fraunces (display) + Inter (body/utility).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* --- Palette --- */
  --navy-deep:#0a1420;
  --navy:#101d30;
  --navy-soft:#16273f;
  --ink:#1c1a16;
  --ivory:#f6f1e6;
  --ivory-dim:#ece4d3;
  --paper:#fbf8f1;
  --gold:#c6a15b;
  --gold-bright:#e8cc8e;
  --gold-dim:#8a713f;
  --slate:#9aa3b5;
  --slate-dark:#5b6478;
  --line-dark:rgba(198,161,91,.18);
  --line-light:rgba(28,26,22,.12);

  /* --- Type --- */
  --f-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body:'Inter', -apple-system, sans-serif;

  /* --- Motion --- */
  --ease:cubic-bezier(.16,.8,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}

/* LENIS */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

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

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

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--navy-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:32px;
}
.preloader-brand{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:500;
  color:var(--ivory);
  display:flex;
  align-items:baseline;
  gap:12px;
  opacity:0;
  transform:translateY(20px);
}
.preloader-brand.loaded{
  animation:preloaderFadeIn 0.8s var(--ease) forwards;
}
.preloader-brand .brand-mark ellipse{stroke:var(--gold); fill:none; stroke-width:1.4;}
.preloader-bar-wrap{
  width:200px;
  height:1px;
  background:rgba(198,161,91,0.15);
  overflow:hidden;
  border-radius:1px;
}
.preloader-bar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  transition:width 0.3s var(--ease);
}
.preloader-tagline{
  font-family:var(--f-body);
  font-size:11px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--slate);
  opacity:0;
}
.preloader-tagline.loaded{
  animation:preloaderFadeIn 0.6s var(--ease) 0.3s forwards;
}
@keyframes preloaderFadeIn{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}
.preloader.out{
  animation:preloaderOut 0.8s var(--ease) forwards;
}
@keyframes preloaderOut{
  0%{opacity:1; transform:scale(1);}
  50%{opacity:0.8; transform:scale(0.98);}
  100%{opacity:0; transform:scale(1.02); visibility:hidden;}
}

/* ---------- Eyebrow / utility labels ---------- */
.eyebrow{
  font-family:var(--f-body);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.center{justify-content:center;}
.eyebrow.on-dark{color:var(--gold-bright);}

/* ---------- Headline scale ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.05;
  margin:0;
  color:var(--ink);
  letter-spacing:-.01em;
}
.on-dark h1,.on-dark h2,.on-dark h3,h1.on-dark,h2.on-dark,h3.on-dark{color:var(--ivory);}

h1{font-size:clamp(2.6rem,5.4vw,4.6rem); font-weight:500;}
h2{font-size:clamp(2rem,3.6vw,3rem);}
h3{font-size:clamp(1.3rem,2vw,1.7rem); font-weight:600;}

p{line-height:1.75; color:var(--slate-dark); margin:0 0 1em;}
.on-dark p{color:var(--slate);}

.lede{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem,1.6vw,1.5rem);
  line-height:1.55;
  color:var(--ink);
}
.on-dark .lede{color:var(--ivory-dim);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .5s var(--ease), background .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn-gold{
  background:var(--gold);
  color:var(--navy-deep);
}
.btn-gold:hover{background:var(--gold-bright); transform:translateY(-2px);}
.btn-line{
  border-color:var(--line-dark);
  color:var(--ivory);
}
.btn-line:hover{border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px);}
.btn-line-dark{
  border-color:var(--line-light);
  color:var(--ink);
}
.btn-line-dark:hover{border-color:var(--gold-dim); color:var(--gold-dim); transform:translateY(-2px);}
.btn svg{width:14px;height:14px; transition:transform .4s var(--ease);}
.btn:hover svg{transform:translateX(4px);}

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:26px 0;
  transition:padding .4s var(--ease-soft), background .4s var(--ease-soft), box-shadow .4s;
}
.site-nav .container{display:flex; align-items:center; justify-content:space-between;}
.site-nav.scrolled{
  padding:14px 0;
  background:rgba(10,20,32,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line-dark);
}
.brand{
  font-family:var(--f-display);
  font-size:1.35rem;
  font-weight:600;
  color:var(--ivory);
  display:flex;
  align-items:baseline;
  gap:10px;
}
.brand .brand-mark{
  width:11px;height:11px;
  display:inline-block;
  position:relative;
  top:1px;
}
.brand small{
  font-family:var(--f-body);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.nav-links{display:flex; align-items:center; gap:38px;}
.nav-links a{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--slate);
  position:relative;
  padding:4px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--ivory);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:24px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:1100;}
.nav-toggle span{width:22px; height:1px; background:var(--ivory); transition:transform .35s var(--ease), opacity .3s;}

.mobile-menu{
  position:fixed; inset:0; z-index:1050;
  background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; visibility:hidden; transform:translateY(-16px);
  transition:opacity .45s var(--ease-soft), transform .45s var(--ease-soft), visibility .45s;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu a{
  font-family:var(--f-display);
  font-size:2rem;
  color:var(--ivory);
}
.mobile-menu a:hover{color:var(--gold);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  background:var(--navy-deep);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 30%;
  transform:scale(1.08);
  will-change:transform;
}
.hero-bg::after{content:'';}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,14,22,.55) 0%, rgba(8,14,22,.35) 35%, rgba(8,14,22,.85) 100%),
    linear-gradient(90deg, rgba(8,14,22,.75) 0%, rgba(8,14,22,.15) 55%);
}
.hero-rays{
  position:absolute; inset:0;
  mix-blend-mode:screen;
  opacity:.55;
  pointer-events:none;
  background:conic-gradient(from 0deg at 28% 38%,
    transparent 0deg, rgba(232,204,142,.45) 4deg, transparent 14deg,
    transparent 60deg, rgba(232,204,142,.3) 65deg, transparent 78deg,
    transparent 150deg, rgba(232,204,142,.35) 156deg, transparent 168deg,
    transparent 360deg);
  animation:raysRotate 50s linear infinite;
  transform-origin:28% 38%;
}
@keyframes raysRotate{ to{ transform:rotate(360deg); } }
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding-bottom:9vh;
}
.hero-eyebrow{margin-bottom:22px; opacity:0;}
.hero h1{
  color:var(--ivory);
  max-width:14ch;
  opacity:0;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-bright);
  font-weight:500;
}
.hero .lede{
  max-width:46ch;
  margin-top:22px;
  color:var(--ivory-dim);
  opacity:0;
}
.hero-actions{
  display:flex; gap:18px; margin-top:38px; flex-wrap:wrap;
  opacity:0;
}
.reveal-up{animation:heroUp .95s var(--ease) forwards;}
@keyframes heroUp{
  from{opacity:0; transform:translateY(26px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-scroll{
  position:absolute; right:32px; bottom:38px; z-index:2;
  display:flex; align-items:center; gap:12px;
  color:var(--slate); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  writing-mode:vertical-rl;
  opacity:0;
}
.hero-scroll .line{
  width:1px; height:60px;
  background:linear-gradient(var(--gold), transparent);
  writing-mode:horizontal-tb;
}

/* Chain mark used as brand glyph + signature motif */
.brand-mark{display:inline-block; overflow:visible;}
.brand-mark ellipse{stroke:var(--gold); fill:none; stroke-width:1.4;}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{position:relative;}
.section{padding:130px 0;}
.section-sm{padding:90px 0;}
.on-dark{background:var(--navy-deep); color:var(--ivory);}
.on-paper{background:var(--paper);}
.on-ivory{background:var(--ivory);}

.section-head{max-width:640px; margin-bottom:64px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{margin-top:18px;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}

/* reveal-on-scroll (JS toggles .in) */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal.delay-1{transition-delay:.12s;}
.reveal.delay-2{transition-delay:.24s;}
.reveal.delay-3{transition-delay:.36s;}

/* ---------- Divider with animated breaking chain ---------- */
.chain-divider{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin:0 auto; padding:70px 0;
}
.chain-divider .seg{width:64px; height:1px; background:var(--line-dark); transition:width .8s var(--ease) .2s;}
.on-paper .chain-divider .seg,.on-ivory .chain-divider .seg{background:var(--line-light);}

.chain-anim .link-l{transition:transform 1s var(--ease);}
.chain-anim .link-r{transition:transform 1s var(--ease);}
.chain-anim.break .link-l{transform:translate(-9px,-4px) rotate(-8deg);}
.chain-anim.break .link-r{transform:translate(9px,4px) rotate(8deg);}
.chain-anim .spark{opacity:0; transition:opacity .5s ease .6s, transform 1s var(--ease) .6s; transform:scale(.4);}
.chain-anim.break .spark{opacity:1; transform:scale(1);}

/* ============================================================
   IMAGE FRAME (gold hairline offset frame)
   ============================================================ */
.frame{position:relative; isolation:isolate;}
.frame img{position:relative; z-index:2; width:100%; height:auto;}
/* .frame::before{
  content:'';
  position:absolute;
  top:12px; left:-22px;
  width:100%; height:100%;
  border:1px solid var(--gold);
  z-index:1;
  transition:transform .6s var(--ease);
}
.frame:hover::before{transform:translate(-6px,6px);} */

/* ============================================================
   HOME GALLERY
   ============================================================ */
.gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.gallery-frame{overflow:hidden; border:1px solid var(--line-light);}
.gallery-frame img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  display:block; transition:transform .8s var(--ease), filter .8s var(--ease);
}
.gallery-frame:hover img{transform:scale(1.05); filter:saturate(1.05);}
@media (max-width:820px){
  .gallery-grid{grid-template-columns:1fr;}
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--navy-soft);
  border:1px solid var(--line-dark);
  padding:40px 34px;
  transition:transform .5s var(--ease), border-color .4s;
}
.card:hover{transform:translateY(-6px); border-color:var(--gold-dim);}
.card .num{
  font-family:var(--f-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.1rem;
  margin-bottom:18px;
  display:block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position:relative;
  background:var(--navy-deep) url('footer-bg.jpeg') center/cover no-repeat;
  color:var(--ivory);
  padding:110px 0 34px;
}
.site-footer::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,13,20,.55), rgba(8,13,20,.94));
}
.footer-inner{position:relative; z-index:1;}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:50px;
  padding-bottom:70px;
  border-bottom:1px solid var(--line-dark);
}
.footer-brand .brand{margin-bottom:18px;}
.footer-brand p{max-width:34ch; font-size:14px;}
.footer-col h4{
  font-family:var(--f-body);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
  font-weight:600;
}
.footer-col a{
  display:block;
  color:var(--slate);
  font-size:14px;
  margin-bottom:13px;
  transition:color .3s, transform .3s;
}
.footer-col a:hover{color:var(--ivory); transform:translateX(4px);}
.footer-social{display:flex; gap:14px; margin-top:6px;}
.footer-social a{
  width:38px; height:38px;
  border:1px solid var(--line-dark);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, transform .3s;
}
.footer-social a:hover{border-color:var(--gold); transform:translateY(-3px);}
.footer-social svg{width:15px; height:15px; stroke:var(--ivory);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; font-size:12px; color:var(--slate-dark); flex-wrap:wrap; gap:12px;
}

/* ============================================================
   MISC COMPONENTS shared across pages
   ============================================================ */
.stat-row{display:flex; gap:60px; margin-top:50px; flex-wrap:wrap;}
.stat b{
  display:block; font-family:var(--f-display); font-size:2.6rem; color:var(--gold); font-weight:500;
}
.stat span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate);}
.on-paper .stat span,.on-ivory .stat span{color:var(--slate-dark);}

.page-header{
  position:relative;
  padding:200px 0 100px;
  background:var(--navy-deep);
  overflow:hidden;
}
.page-header .hero-bg{transform:scale(1.05);}
.page-header-inner{position:relative; z-index:2;}
.page-header h1{color:var(--ivory); max-width:16ch;}
.breadcrumb{
  display:flex; gap:8px; align-items:center;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate);
  margin-bottom:22px;
}
.breadcrumb a:hover{color:var(--gold-bright);}

/* Quote mark */
.quote-mark{
  font-family:var(--f-display);
  font-size:5.5rem;
  color:var(--gold);
  line-height:1;
  opacity:.8;
  font-style:italic;
}

/* Cursor glow (hero only, desktop) */
.cursor-glow{
  position:fixed; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(198,161,91,.16), transparent 70%);
  pointer-events:none; z-index:5; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s; will-change:transform;
}

/* Progress bar (chain scroll indicator) */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  z-index:2000; transition:width .1s linear;
}

/* Tag pill */
.tag{
  display:inline-block; padding:6px 14px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-light); color:var(--slate-dark); font-weight:600;
}
.on-dark .tag{border-color:var(--line-dark); color:var(--slate);}

/* Book tilt */
.book-tilt-wrap{perspective:1400px;}
.book-tilt{
  transition:transform .25s ease-out;
  transform-style:preserve-3d;
  will-change:transform;
}

/* ============================================================
   PAGE HEADER extras (breadcrumb arrow, kicker image)
   ============================================================ */
.page-header .hero-scrim{background:
    linear-gradient(180deg, rgba(8,14,22,.65) 0%, rgba(8,14,22,.55) 40%, rgba(8,14,22,.96) 100%),
    linear-gradient(90deg, rgba(8,14,22,.7) 0%, rgba(8,14,22,.1) 60%);}
.breadcrumb .sep{opacity:.5;}
.page-header p.lede{max-width:56ch; margin-top:20px; color:var(--ivory-dim);}

/* ============================================================
   TIMELINE (About page)
   ============================================================ */
.timeline-item{
  display:grid; grid-template-columns:110px 1px 1fr; gap:0 40px;
  padding:38px 0; position:relative;
}
.timeline-item + .timeline-item{border-top:1px solid var(--line-light);}
.on-dark .timeline-item + .timeline-item{border-top-color:var(--line-dark);}
.timeline-year{
  font-family:var(--f-display); font-style:italic; color:var(--gold);
  font-size:1.5rem; padding-top:4px;
}
.timeline-rule{background:var(--line-light); position:relative;}
.on-dark .timeline-rule{background:var(--line-dark);}
.timeline-rule::before{
  content:''; position:absolute; top:8px; left:-3.5px; width:8px; height:8px;
  border-radius:50%; background:var(--gold);
}
.timeline-item h3{margin-bottom:10px;}
.timeline-item p{margin-bottom:0; max-width:60ch;}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.blog-grid.featured-layout{grid-template-columns:1.3fr 1fr; gap:48px; margin-bottom:70px;}
.blog-card{display:flex; flex-direction:column;}
.blog-card .frame{margin-bottom:26px;}
.blog-card .frame img{aspect-ratio:4/3; object-fit:cover;}
.blog-card .frame::before{top:14px; left:-14px;}
.blog-meta{
  display:flex; gap:16px; align-items:center;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate-dark); margin-bottom:14px; font-weight:600;
}
.on-dark .blog-meta{color:var(--slate);}
.blog-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--gold-dim);}
.blog-card h3{margin-bottom:14px;}
.blog-card p{font-size:14.5px;}
.read-more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-dim); margin-top:auto; padding-top:6px;
  transition:gap .35s var(--ease), color .3s;
}
.on-dark .read-more{color:var(--gold);}
.read-more svg{width:13px; height:13px; transition:transform .4s var(--ease);}
.read-more:hover{gap:13px; color:var(--gold);}
.blog-card.featured{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.blog-card.featured .frame{margin-bottom:0;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px;}
.testi-card{
  background:var(--paper); border:1px solid var(--line-light);
  padding:44px 40px; position:relative;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.on-dark .testi-card{background:var(--navy-soft); border-color:var(--line-dark);}
.testi-card:hover{transform:translateY(-6px); border-color:var(--gold-dim); box-shadow:0 24px 50px -30px rgba(10,20,32,.35);}
.testi-card .quote-mark{font-size:2.6rem; margin-bottom:8px; display:block;}
.testi-card p{font-family:var(--f-display); font-style:italic; font-size:1.05rem; color:var(--ink); line-height:1.6;}
.on-dark .testi-card p{color:var(--ivory-dim);}
.testi-who{display:flex; align-items:center; gap:14px; margin-top:22px;}
.testi-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--navy-soft); color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-style:italic; font-size:1rem;
  border:1px solid var(--gold-dim);
}
.testi-who strong{display:block; font-family:var(--f-display); font-size:.95rem; font-weight:600;}
.testi-who span{font-size:12px; color:var(--slate-dark);}
.on-dark .testi-who span{color:var(--slate);}
.testi-card.large{grid-column:1/-1; padding:60px; text-align:center;}
.testi-card.large p{font-size:clamp(1.2rem,2vw,1.55rem); max-width:780px; margin:0 auto;}
.testi-card.large .testi-who{justify-content:center; margin-top:28px;}

/* ============================================================
   BOOK DETAIL
   ============================================================ */
.book-detail-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:90px; align-items:start;}
.format-pills{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 32px;}
.format-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line-dark); color:var(--slate);
}
.on-paper .format-pill,.on-ivory .format-pill{border-color:var(--line-light); color:var(--slate-dark);}
.book-toc{margin-top:20px;}
.book-toc>li{padding:16px 0; border-bottom:1px solid var(--line-light);}
.on-dark .book-toc>li{border-bottom-color:var(--line-dark);}
.book-toc .toc-row{
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--f-display); font-size:1.02rem;
}
.book-toc .toc-row span:last-child{color:var(--gold-dim); font-family:var(--f-body); font-size:12px; letter-spacing:.08em; padding-top:3px; white-space:nowrap;}
.book-toc .toc-row em{font-style:italic; opacity:.72; font-size:.88em;}
.book-toc-sub{margin:12px 0 0; padding-left:24px; border-left:1px solid var(--line-light); display:flex; flex-direction:column; gap:2px;}
.on-dark .book-toc-sub{border-left-color:var(--line-dark);}
.book-toc-sub li{display:flex; justify-content:space-between; gap:16px; padding:6px 0; font-family:var(--f-body); font-size:.85rem; color:var(--slate-dark);}
.on-dark .book-toc-sub li{color:var(--slate);}
.book-toc-sub li span:last-child{color:var(--gold-dim); font-size:11px; letter-spacing:.05em; white-space:nowrap; padding-top:1px;}
.takeaway-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.book-sticky{position:sticky; top:120px;}

/* ============================================================
   ACCORDION / FAQ
   ============================================================ */
.accordion-item{border-bottom:1px solid var(--line-light);}
.on-dark .accordion-item{border-bottom-color:var(--line-dark);}
.accordion-item:first-child{border-top:1px solid var(--line-light);}
.on-dark .accordion-item:first-child{border-top-color:var(--line-dark);}
.accordion-q{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  width:100%; background:none; border:none; text-align:left;
  padding:28px 0; font-family:var(--f-display); font-size:1.15rem; color:var(--ink);
}
.on-dark .accordion-q{color:var(--ivory);}
.accordion-icon{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; position:relative; transition:transform .45s var(--ease), border-color .3s;
}
.accordion-icon::before,.accordion-icon::after{content:''; position:absolute; background:var(--gold-dim); transition:transform .35s var(--ease);}
.accordion-icon::before{width:11px; height:1px;}
.accordion-icon::after{width:1px; height:11px;}
.accordion-item.open .accordion-icon{transform:rotate(180deg); border-color:var(--gold);}
.accordion-item.open .accordion-icon::after{transform:scaleY(0);}
.accordion-a{max-height:0; overflow:hidden; transition:max-height .55s var(--ease);}
.accordion-a-inner{padding-bottom:28px; max-width:70ch;}
.accordion-a-inner p{margin-bottom:0;}

/* ============================================================
   CONNECT STRIP (About page)
   ============================================================ */
.connect-strip{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding:54px 56px; border:1px solid var(--line-dark); background:var(--navy-soft);
}
.connect-strip .lede{margin:0; max-width:38ch;}

/* ============================================================
   ABOUT AUTHOR IMAGE SECTION
   ============================================================ */
.author-portrait{
  position:relative;
  overflow:hidden;
}
.author-portrait img{
  width:100%;
  height:auto;
  transition:transform 0.8s var(--ease);
}
.author-portrait:hover img{
  transform:scale(1.03);
}
.author-portrait::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(10,20,32,0.3) 100%);
  pointer-events:none;
}

/* ============================================================
   MAGNETIC CURSOR EFFECT (Desktop)
   ============================================================ */
.magnetic-wrap{
  display:inline-block;
}

/* ============================================================
   AWARD BADGE
   ============================================================ */
.award-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  background:rgba(198,161,91,0.08);
  border:1px solid var(--line-dark);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.award-badge svg{
  width:16px;
  height:16px;
  fill:var(--gold);
}

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-embed{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:4px;
  border:1px solid var(--line-dark);
}
.video-embed iframe{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:none;
}
.video-thumb{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  border-radius:4px;
}
.video-thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform 0.6s var(--ease);
}
.video-thumb:hover img{
  transform:scale(1.05);
}
.video-play-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px;
  border-radius:50%;
  background:rgba(198,161,91,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.4s var(--ease), background 0.3s;
}
.video-play-btn:hover{
  transform:translate(-50%,-50%) scale(1.1);
  background:var(--gold-bright);
}
.video-play-btn svg{
  width:20px; height:20px;
  fill:var(--navy-deep);
  margin-left:3px;
}

/* ============================================================
   SPEAKING TOPICS
   ============================================================ */
.topic-card{
  padding:36px 32px;
  border:1px solid var(--line-light);
  background:var(--paper);
  transition:transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.topic-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-dim);
  box-shadow:0 20px 50px -20px rgba(10,20,32,0.15);
}
.topic-card h3{
  margin-bottom:12px;
  color:var(--ink);
}
.topic-card p{
  font-size:14px;
  margin-bottom:0;
}
.topic-icon{
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  color:var(--gold);
}
.topic-icon svg{
  width:20px; height:20px;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form-group{
  margin-bottom:24px;
}
.form-group label{
  display:block;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
  font-weight:600;
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:14px 18px;
  background:transparent;
  border:1px solid var(--line-dark);
  color:var(--ivory);
  font-family:var(--f-body);
  font-size:14px;
  transition:border-color 0.3s, box-shadow 0.3s;
  outline:none;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,161,91,0.08);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--slate-dark);
}
.form-group textarea{
  min-height:140px;
  resize:vertical;
}

/* Split-text helper: lines mask their own overflow while GSAP animates them in */
.split-line{overflow:hidden; display:block;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr; gap:48px;}
  .grid-3{grid-template-columns:1fr; gap:24px;}
  .footer-top{grid-template-columns:1fr 1fr; gap:40px;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .frame::before{left:-14px; top:14px;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .blog-grid.featured-layout{grid-template-columns:1fr;}
  .blog-card.featured{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .book-detail-grid{grid-template-columns:1fr; gap:56px;}
  .book-sticky{position:static;}
  .takeaway-grid{grid-template-columns:1fr 1fr;}
  .connect-strip{padding:40px;}
}
@media (max-width:640px){
  .container{padding:0 22px;}
  .section{padding:90px 0;}
  .footer-top{grid-template-columns:1fr;}
  .hero-inner{padding-bottom:14vh;}
  .stat-row{gap:34px;}
  .page-header{padding:160px 0 70px;}
  .blog-grid{grid-template-columns:1fr;}
  .timeline-item{grid-template-columns:60px 1px 1fr; gap:0 20px;}
  .timeline-year{font-size:1.1rem;}
  .takeaway-grid{grid-template-columns:1fr;}
  .testi-card.large{padding:36px 26px;}
  .connect-strip{flex-direction:column; align-items:flex-start; padding:34px 28px;}
}

.takeaway-grid .card h3 {
  color: var(--ivory);
  margin-bottom: 1rem;
}

.speaking-cta .hero-bg {
  transform: none !important;
}