/* =======================================================================
   About page - Tweak overrides · animation polish · discovery booking
   Loads AFTER home.css so these win the cascade.
   ======================================================================= */

/* ---------- Display-font swap (Voice tweak) ---------- */
:root{ --font-display:'Space Grotesk'; }
h1,h2,h3,h4,
.stat .big,.case-stat .big,.num,.avatar,.quote blockquote,
.compare thead th,.disc-meet .big{
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif;
}
html[data-voice="rounded"]{ --font-display:'Fredoka'; }
html[data-voice="rounded"] h1,html[data-voice="rounded"] h2,html[data-voice="rounded"] h3{ letter-spacing:-.005em; }
html[data-voice="serif"]{ --font-display:'Newsreader'; }
html[data-voice="serif"] h1,html[data-voice="serif"] h2{ letter-spacing:-.012em; font-weight:600; }
html[data-voice="serif"] .quote blockquote{ font-style:italic; }

/* ---------- Brand mood (gradient atmosphere + accents) ---------- */
html[data-mood="emerald"]{
  --green:#10B981; --green-bright:#34D399; --green-deep:#0E8C63; --teal:#0E7C66; --navy:#063B2E; --navy-2:#0A4A3A;
  --grad:linear-gradient(135deg,#10B981 0%,#0E7C66 46%,#063B2E 100%);
  --grad-soft:linear-gradient(135deg,#10B981 0%,#0E7C66 60%,#063B2E 100%);
  --grad-bright:linear-gradient(120deg,#34D399 0%,#10B981 55%,#0E8C63 100%);
  --grad-cta:linear-gradient(135deg,#10B981 0%,#0E7C66 100%);
  --grad-cta-hover:linear-gradient(135deg,#34D399 0%,#10B981 100%);
  --bg-soft:#F0FBF6; --bg-soft-2:#E7F7EF; --line:#D9F0E4;
}
html[data-mood="midnight"]{
  --green:#36A86F; --green-bright:#46C083; --green-deep:#1C6547; --teal:#0E4A4A; --navy:#041A28; --navy-2:#082A38;
  --grad:linear-gradient(135deg,#1C6547 0%,#0C3B47 46%,#041A28 100%);
  --grad-soft:linear-gradient(135deg,#1C6547 0%,#0C3B47 60%,#041A28 100%);
  --grad-bright:linear-gradient(120deg,#46C083 0%,#1C6547 55%,#0E4A4A 100%);
  --grad-cta:linear-gradient(135deg,#1C6547 0%,#0C3B47 100%);
  --grad-cta-hover:linear-gradient(135deg,#46C083 0%,#1C6547 100%);
  --bg-soft:#F2F6F5; --bg-soft-2:#E9F0EF; --line:#DCE8E5;
}
html[data-mood="emerald"] .orb.o1{ background:radial-gradient(circle,#34D399,transparent 70%)!important; }
html[data-mood="emerald"] .orb.o2{ background:radial-gradient(circle,#22D3EE,transparent 70%)!important; }
html[data-mood="midnight"] .orb.o1{ background:radial-gradient(circle,#36A86F,transparent 70%)!important; opacity:.42!important; }
html[data-mood="midnight"] .orb.o2{ background:radial-gradient(circle,#0E5C5C,transparent 70%)!important; opacity:.34!important; }

/* ---------- Form (corner language across cards & buttons) ---------- */
html[data-form="sharp"]{ --r-sm:3px; --r:5px; --r-lg:7px; --r-xl:9px; }
html[data-form="sharp"] .btn,
html[data-form="sharp"] .chip,
html[data-form="sharp"] .pill-tag,
html[data-form="sharp"] .num,
html[data-form="sharp"] .avatar,
html[data-form="sharp"] .member image-slot,
html[data-form="sharp"] .ic,
html[data-form="sharp"] .ic-mini,
html[data-form="sharp"] .tk,
html[data-form="sharp"] .disc-meet .big{ border-radius:4px!important; }
html[data-form="pill"]{ --r-sm:16px; --r:22px; --r-lg:28px; --r-xl:38px; }
html[data-form="pill"] .ic,html[data-form="pill"] .ic-mini{ border-radius:16px!important; }

/* ---------- Animation polish ---------- */
@keyframes gradFlow{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@keyframes floatA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(26px,-28px); } }
@keyframes floatB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-24px,22px); } }
@keyframes shimmer{ 0%{ background-position:-150% 0; } 100%{ background-position:250% 0; } }

@media (prefers-reduced-motion: no-preference){
  .page-header, .section.gradient, .cta-band, .disc-card{
    background-size:180% 180%; animation:gradFlow 18s ease-in-out infinite;
  }
  .page-header .orb.o1, .cta-bg .orb.o1{ animation:floatA 13s ease-in-out infinite; }
  .page-header .orb.o2, .cta-bg .orb.o2{ animation:floatB 17s ease-in-out infinite; }
}

/* hover life */
.member{ transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .32s; }
.member:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#CFE6D7; }
.member image-slot{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.member:hover image-slot{ transform:scale(1.05) rotate(-2deg); }
.case-stat{ transition:transform .32s cubic-bezier(.2,.8,.2,1), background .32s, border-color .32s; }
.case-stat:hover{ transform:translateY(-5px); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); }
.compare tbody tr{ transition:background .2s; }
.compare tbody tr:hover{ background:rgba(52,163,86,.045); }
.stat-band{ gap:18px; }
.stat-band .stat{
  position:relative; padding:24px 22px 22px; border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line); cursor:default;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .32s;
}
.stat-band .stat::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--grad-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.stat-band .stat:hover, .stat-band .stat:focus-visible{
  transform:translateY(-6px); box-shadow:var(--shadow); border-color:#CFE6D7; outline:none;
}
.stat-band .stat:hover::after, .stat-band .stat:focus-visible::after{ transform:scaleX(1); }
.stat-ic{
  width:48px; height:48px; border-radius:13px; margin:0 0 16px;
  background:var(--bg-soft); color:var(--green-deep); display:grid; place-items:center;
  transition:background .35s cubic-bezier(.2,.8,.2,1), color .35s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.stat-ic svg{ width:24px; height:24px; }
.stat-band .stat:hover .stat-ic, .stat-band .stat:focus-visible .stat-ic{
  background:var(--grad-bright); color:#fff; transform:rotate(-8deg) scale(1.08);
}
.stat-band .stat .big{ transition:transform .3s; }

/* value-note variant of the stat cards - stacked rows, icon left, text right */
.note-band{ grid-template-columns:1fr; gap:14px; }
.note-band .stat{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:2px; align-content:center; padding:18px 20px; }
.note-band .stat-ic{ grid-row:1 / span 2; align-self:center; margin:0; }
.note-title{ grid-column:2; font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:1.1rem; line-height:1.2; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.note-title span[data-count]{ color:var(--green-deep); }
.note-sub{ grid-column:2; }
.note-sub{ grid-column:2; margin-top:4px; font-size:.96rem; line-height:1.5; color:var(--ink-soft); }

/* who we are - intro + founder quote */
.who-split{ align-items:start; }
.who-note{ color:var(--green-deep); font-weight:600; font-size:1.06rem; line-height:1.5; margin:0 0 22px; }
.who-checks li{ color:var(--ink-soft); }
.who-checks strong{ color:var(--ink); }
.founder-quote{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:38px 36px; box-shadow:var(--shadow-sm,var(--shadow)); }
.founder-quote .fq-mark{ font-family:'Space Grotesk',sans-serif; font-size:5rem; line-height:.6; color:var(--green); opacity:.2; display:block; height:42px; }
.founder-quote blockquote{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.4; letter-spacing:-.015em; color:var(--ink); margin:8px 0 26px; }
.founder-quote figcaption{ display:flex; align-items:center; gap:14px; }
.founder-quote .fq-avatar{ width:54px; height:54px; flex:none; border-radius:50%; overflow:hidden; box-shadow:0 6px 16px -8px rgba(5,25,19,.5); background:linear-gradient(180deg,#E7F0F8 0%,#D6E6F3 100%); }
.founder-quote .fq-avatar::part(button){ border-radius:50%; }
.founder-quote .fq-meta strong{ display:block; color:var(--ink); }
.founder-quote .fq-meta span{ display:block; color:var(--ink-faint); font-size:.92rem; }

/* methodology emphasis under the comparison table */
.method-block{ margin-top:24px; text-align:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 32px; }
.method-ic{ display:grid; place-items:center; width:54px; height:54px; margin:0 auto 16px; border-radius:15px; background:var(--grad-bright); color:#fff; box-shadow:0 10px 22px -10px rgba(34,120,58,.55); }
.method-ic svg{ width:27px; height:27px; }
.method-eyebrow{ display:inline-block; font-family:'Plus Jakarta Sans','Space Grotesk',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); margin:0 0 12px; }
.method-label{ max-width:60ch; margin:0 auto 22px; color:var(--ink-soft); font-size:1.02rem; line-height:1.6; }
.method-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.method-chip{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.92rem; letter-spacing:-.01em; color:var(--green-deep); background:#fff; border:1px solid var(--line); padding:10px 18px; border-radius:999px; box-shadow:0 1px 2px rgba(20,60,45,.04); transition:background .25s, color .25s, transform .25s, border-color .25s, box-shadow .25s; }
.method-chip:hover{ background:var(--grad-bright); color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(34,120,58,.5); }

/* note icons - premium gradient tiles, on-theme with the methodology icon, gentle idle float */
.note-band .stat-ic{ background:var(--grad-bright); color:#fff; box-shadow:0 10px 22px -11px rgba(34,120,58,.5); }
.note-band .stat-ic svg{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: no-preference){
  .note-band .stat-ic{ animation:noteFloat 4.2s ease-in-out infinite; }
  .note-band .stat:nth-child(2) .stat-ic{ animation-delay:.5s; }
  .note-band .stat:nth-child(3) .stat-ic{ animation-delay:1s; }
}
@keyframes noteFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
/* float owns the tile transform; deepen the glow and animate the glyph on hover */
.note-band .stat:hover .stat-ic, .note-band .stat:focus-visible .stat-ic{
  background:var(--grad-bright); color:#fff; transform:none;
  box-shadow:0 16px 30px -12px rgba(34,120,58,.65);
}
.note-band .stat:hover .stat-ic svg, .note-band .stat:focus-visible .stat-ic svg{ transform:rotate(-8deg) scale(1.12); }

/* ---------- Discovery booking section ---------- */
.disc-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:stretch; }
@media(max-width:880px){ .disc-layout{ grid-template-columns:1fr; } }
.disc-info .what{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.disc-info .what li{ display:flex; gap:14px; align-items:flex-start; }
.disc-info .what .tk{ flex:none; width:30px; height:30px; border-radius:10px; background:var(--grad-bright); color:#fff; display:grid; place-items:center; }
.disc-info .what .tk svg{ width:15px; height:15px; }
.disc-info .what strong{ display:block; }
.disc-info .what span{ color:var(--ink-soft); font-size:.95rem; }

.disc-card{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--grad); color:#fff; padding:clamp(30px,4vw,44px); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.disc-card .disc-bg{ position:absolute; inset:0; pointer-events:none; }
.disc-card .orb{ position:absolute; border-radius:50%; filter:blur(70px); }
.disc-card .orb.o1{ width:340px; height:340px; background:radial-gradient(circle,#4EAE66,transparent 70%); top:-120px; right:-70px; opacity:.5; }
.disc-card .orb.o2{ width:320px; height:320px; background:radial-gradient(circle,#0EA5A5,transparent 70%); bottom:-140px; left:-60px; opacity:.36; }
.disc-card > *{ position:relative; z-index:1; }
.disc-meet{ display:flex; gap:24px; flex-wrap:wrap; margin:6px 0 22px; }
.disc-meet .item{ display:flex; gap:12px; align-items:center; }
.disc-meet .ic{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.14); display:grid; place-items:center; flex:none; }
.disc-meet .ic svg{ width:20px; height:20px; }
.disc-meet .big{ font-weight:700; font-size:1.05rem; line-height:1.1; }
.disc-meet .sub{ font-size:.8rem; color:rgba(255,255,255,.72); }
.disc-divider{ height:1px; background:rgba(255,255,255,.16); margin:4px 0 22px; }
.disc-card .btn{ animation:none; }
.disc-card .calendly-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.82rem; color:rgba(255,255,255,.7); }
.disc-card .calendly-badge svg{ width:15px; height:15px; }
.disc-avail{ margin-top:auto; }
.disc-card h3{ color:#fff; font-size:clamp(1.5rem,2.4vw,2rem); }