/* ==========================================================================
   QANDO QOACHING — DESIGN TOKENS
   Palette: Jade (trust, growth, longevity) + Gold (legacy, craft, value)
   Type: Fraunces (display serif, editorial character) + Inter (body/UI)
   Motif: concentric "generation rings" + relay hand-off, echoing the mark
   ========================================================================== */

:root{
  /* Jade */
  --jade-950:#081F19;
  --jade-900:#0C3129;
  --jade-800:#123F34;
  --jade-700:#175243;
  --jade-600:#1F6A57;
  --jade-500:#2C8770;
  --jade-300:#7FB6A5;
  --jade-150:#D9EBE4;
  --jade-100:#EEF6F3;

  /* Gold */
  --gold-800:#7A5B1A;
  --gold-700:#9A7521;
  --gold-600:#B98B2E;
  --gold-500:#CBA135;
  --gold-400:#D9B85B;
  --gold-300:#E6CC85;
  --gold-100:#F7EED0;

  /* Neutrals */
  --cream:#FBF8F1;
  --paper:#FFFFFF;
  --ink-900:#15201B;
  --ink-700:#33413B;
  --ink-500:#5C6B64;
  --ink-300:#9AA8A1;
  --line:#E4DFD1;

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

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px rgba(8,31,25,.04), 0 12px 32px -16px rgba(8,31,25,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@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, h1, h2, h3, h4, p, figure, blockquote{ margin:0; }
ul, ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
input, textarea, select{ font:inherit; }
svg{ display:block; }

body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink-900);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--gold-300); color:var(--jade-950); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--jade-950); color:var(--cream); padding:.85rem 1.25rem;
  border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ==========================================================================
   TYPE SYSTEM
   ========================================================================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--jade-950);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
}
h1{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); font-weight:500; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
h4{ font-size:1.05rem; }

.eyebrow{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:1.02rem;
  color:var(--gold-700);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px; background:var(--gold-600);
  display:inline-block;
}

.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--ink-700);
  max-width:52ch;
}

.pull-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  color:var(--jade-950);
  font-size:clamp(1.5rem, 2.6vw, 2.2rem);
  line-height:1.35;
  max-width:26ch;
}
.pull-quote cite{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-500);
  margin-top:1rem;
}

.chapter-num{
  font-family:var(--font-display);
  font-size:clamp(3.2rem, 7vw, 6rem);
  font-weight:300;
  color:transparent;
  -webkit-text-stroke:1.4px var(--gold-500);
  line-height:1;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); position:relative; }
.section--tint{ background:var(--jade-100); }
.section--dark{ background:var(--jade-950); color:var(--jade-100); }
.section--dark h2, .section--dark h3{ color:var(--paper); }
.section--dark .eyebrow{ color:var(--gold-400); }
.section-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section-head h2{ max-width:18ch; }
.section-head .lede{ margin-top:.75rem; }

.grid{ display:grid; gap:clamp(1.25rem,3vw,2rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
}

.hr-gold{
  height:1px; border:0;
  background:linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-500) 82%, transparent);
  margin-block:clamp(3rem,6vw,5rem);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:.9rem 1.6rem; border-radius:999px;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{
  background:var(--gold-500); color:var(--jade-950);
  box-shadow:0 10px 24px -10px rgba(203,161,53,.6);
}
.btn-primary:hover{ background:var(--gold-400); transform:translateY(-2px); }
.btn-ghost{
  border:1px solid rgba(21,32,27,.22); color:var(--jade-950);
}
.btn-ghost:hover{ border-color:var(--jade-950); background:rgba(21,32,27,.04); }
.section--dark .btn-ghost{ border-color:rgba(251,248,241,.35); color:var(--cream); }
.section--dark .btn-ghost:hover{ border-color:var(--gold-400); background:rgba(255,255,255,.06); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--jade-950);
  border-bottom:1px solid rgba(203,161,53,.25);
  transition:box-shadow .3s;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.85rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ width:200px; max-width:56vw; height:auto; display:block; }
@media (max-width:560px){
  .brand img{ width:140px; }
}

.primary-nav{ display:flex; align-items:center; gap:clamp(1.2rem,2vw,2.2rem); }
.primary-nav ul{ display:flex; align-items:center; gap:clamp(1.2rem,2vw,2.2rem); }
.primary-nav a{
  font-size:.92rem; font-weight:500; color:rgba(251,248,241,.85);
  position:relative; padding-block:.3rem;
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--gold-500); transition:right .3s var(--ease);
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after{ right:0; }
.primary-nav a:hover{ color:var(--cream); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; padding:.4rem;
}
.nav-toggle span{ width:22px; height:2px; background:var(--cream); border-radius:2px; }

@media (max-width:880px){
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background:var(--jade-950); color:var(--cream);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:3rem clamp(1.5rem,6vw,2.5rem);
    transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .primary-nav a{ color:var(--cream); font-size:1.15rem; }
  .primary-nav .btn-primary{ margin-top:1.5rem; }
  .nav-toggle{ display:flex; }
  .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); }
  .nav-toggle span{ transition:transform .3s var(--ease), opacity .2s; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-top:clamp(3.5rem,8vw,6rem);
  padding-bottom:clamp(3rem,7vw,5rem);
  background:
    radial-gradient(60% 60% at 82% 8%, var(--jade-150), transparent 60%),
    var(--cream);
}
.hero .wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero h1{ margin-block:1rem 1.25rem; }
.hero h1 em{ color:var(--gold-600); font-style:italic; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

.stat-strip{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.stat-strip .stat b{
  display:block; font-family:var(--font-display); font-size:2rem; color:var(--jade-800);
}
.stat-strip .stat span{ font-size:.85rem; color:var(--ink-500); max-width:20ch; display:block; }

.hero-mark{ position:relative; aspect-ratio:1/1; max-width:420px; margin-inline:auto; }
.rings{ width:100%; height:100%; }
.rings circle{ fill:none; }
.rings .ring-1{ stroke:var(--jade-200,#7FB6A5); stroke-opacity:.35; }
.rings .ring-2{ stroke:var(--gold-500); stroke-dasharray:2 7; }
.rings .ring-3{ stroke:var(--jade-500); }
.rings .spiral{ stroke:var(--gold-600); stroke-width:2.5; }
.hero-mark .gen-label{
  position:absolute; font-family:var(--font-display); font-style:italic;
  font-size:.85rem; color:var(--ink-500);
}
.hero-mark .gen-1{ top:6%; left:50%; transform:translateX(-50%); }
.hero-mark .gen-2{ top:50%; right:2%; transform:translateY(-50%); }
.hero-mark .gen-3{ bottom:4%; left:50%; transform:translateX(-50%); }
.hero-mark .icon-center{ position:absolute; inset:0; margin:auto; width:34%; }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-mark{ order:-1; max-width:260px; }
}

/* ==========================================================================
   STAT / DATA CARDS
   ========================================================================== */
.stat-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.75rem; box-shadow:var(--shadow-card);
}
.stat-card b{
  font-family:var(--font-display); font-size:clamp(2.1rem,4vw,2.8rem);
  color:var(--gold-700); display:block; line-height:1;
}
.stat-card p{ margin-top:.65rem; color:var(--ink-700); font-size:.95rem; }
.stat-card .stat-src{ display:block; margin-top:.6rem; font-size:.75rem; color:var(--ink-300); letter-spacing:.03em; text-transform:uppercase; }

/* ==========================================================================
   CHAPTER / PRINCIPLE ROWS  (numbered — content is a real sequence)
   ========================================================================== */
.principle{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line);
  align-items:flex-start;
}
.principle:last-child{ border-bottom:1px solid var(--line); }
.principle h3{ margin-bottom:.5rem; }
.principle p{ color:var(--ink-700); max-width:62ch; }

/* ==========================================================================
   CAUSE / CHECKLIST GRID
   ========================================================================== */
.check-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.6rem; display:flex; gap:1rem; align-items:flex-start;
}
.check-card .ico{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--jade-100); display:flex; align-items:center; justify-content:center;
  color:var(--jade-700);
}
.check-card h4{ margin-bottom:.35rem; }
.check-card p{ font-size:.9rem; color:var(--ink-500); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.service-card{
  background:var(--paper); border-radius:var(--radius-lg);
  padding:2rem; border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.service-card .num{
  font-family:var(--font-display); font-style:italic; color:var(--gold-500);
  font-size:.95rem; margin-bottom:1.25rem; display:block;
}
.service-card h3{ margin-bottom:.6rem; }
.service-card p{ color:var(--ink-500); font-size:.93rem; margin-bottom:1.4rem; }
.service-card ul li{
  font-size:.85rem; color:var(--ink-700); padding-left:1.2rem; position:relative; margin-bottom:.4rem;
}
.service-card ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%;
  background:var(--gold-500);
}

/* ==========================================================================
   TESTIMONIAL / QUOTE BANNER
   ========================================================================== */
.quote-banner{
  position:relative;
  background:var(--jade-950); color:var(--cream);
  border-radius:var(--radius-lg);
  padding:clamp(2.5rem,6vw,5rem);
  overflow:hidden;
}
.quote-banner::before{
  content:"“";
  font-family:var(--font-display); font-size:14rem; line-height:0;
  position:absolute; top:2.2rem; left:1.5rem; color:var(--gold-700); opacity:.5;
}
.quote-banner blockquote{
  position:relative; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.4rem); max-width:34ch; line-height:1.35;
}
.quote-banner cite{
  display:block; margin-top:1.5rem; font-family:var(--font-body); font-style:normal;
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-300);
}

/* ==========================================================================
   ABOUT / CURATOR
   ========================================================================== */
.curator{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,3.5rem);
  align-items:flex-start;
}
.curator-avatar{
  width:150px; height:150px; border-radius:50%;
  background:linear-gradient(160deg, var(--jade-800), var(--jade-950));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2.6rem; color:var(--gold-400);
  border:2px solid var(--gold-500);
}
.curator h3{ margin-bottom:.15rem; }
.curator .role{ color:var(--gold-700); font-size:.9rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-bottom:1.1rem; display:block; }
.curator p + p{ margin-top:1rem; }
.curator p{ color:var(--ink-700); max-width:65ch; }
@media (max-width:640px){ .curator{ grid-template-columns:1fr; } .curator-avatar{ margin-bottom:.5rem; } }

/* ==========================================================================
   LEAD MAGNET / DOWNLOAD FORM
   ========================================================================== */
.lead-magnet{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,3.5rem);
}
.book-cover{
  aspect-ratio:3/4.2; border-radius:var(--radius-md);
  background:linear-gradient(160deg, var(--jade-900), var(--jade-950));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:2rem; color:var(--cream); box-shadow:0 30px 60px -30px rgba(8,31,25,.5);
  border:1px solid rgba(203,161,53,.4);
}
.book-cover img{ width:64px; margin-bottom:1.5rem; }
.book-cover .bc-title{ font-family:var(--font-display); font-size:1.4rem; line-height:1.2; }
.book-cover .bc-sub{ font-size:.8rem; color:var(--gold-300); margin-top:.75rem; font-style:italic; font-family:var(--font-display); }
@media (max-width:760px){ .lead-magnet{ grid-template-columns:1fr; } .book-cover{ max-width:220px; margin-inline:auto; } }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-700); margin-bottom:.4rem; }
.form-field input, .form-field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--cream); color:var(--ink-900); transition:border-color .2s, background .2s;
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--gold-500); background:var(--paper); outline:none; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.78rem; color:var(--ink-500); margin-top:.85rem; }
.form-success{ background:var(--jade-100); color:var(--jade-900); padding:1rem 1.25rem; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:1.25rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.office-card{ padding-block:1.5rem; border-top:1px solid rgba(251,248,241,.15); }
.office-card:first-child{ border-top:none; padding-top:0; }
.office-card h4{ color:var(--gold-400); margin-bottom:.5rem; }
.office-card p{ color:rgba(251,248,241,.8); font-size:.95rem; }
.contact-link-list li{ display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.contact-link-list a{ color:var(--cream); font-weight:500; }
.contact-link-list a:hover{ color:var(--gold-400); }
.map-wrap{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
.map-wrap iframe{ width:100%; height:320px; border:0; display:block; filter:grayscale(.15) contrast(1.05); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--jade-950); color:rgba(251,248,241,.75); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-brand img{ width:200px; max-width:100%; height:auto; margin-bottom:1.1rem; }
.footer-brand p{ max-width:32ch; font-size:.9rem; }
.footer-col h5{ color:var(--gold-400); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
.footer-col li{ margin-bottom:.6rem; font-size:.9rem; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.75rem; border-top:1px solid rgba(251,248,241,.12);
  font-size:.8rem; color:rgba(251,248,241,.5);
}
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-2{ margin-top:2rem; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* Basic content styling for generic WP pages (page.php / posts) */
.entry-content h2{ margin-top:2.5rem; margin-bottom:1rem; }
.entry-content h3{ margin-top:2rem; margin-bottom:.75rem; }
.entry-content p{ margin-bottom:1.1rem; color:var(--ink-700); }
.entry-content ul, .entry-content ol{ margin-bottom:1.1rem; padding-left:1.4rem; list-style:disc; color:var(--ink-700); }
.entry-content a{ color:var(--jade-700); text-decoration:underline; text-underline-offset:2px; }
.entry-content img{ border-radius:var(--radius-md); margin-block:1.5rem; }
.page-header-simple{ padding-block:clamp(3rem,6vw,5rem) 2rem; border-bottom:1px solid var(--line); }