/* Quatical.com rebuild prototype, brand system per CLAUDE.md */
:root{
  --bg:#FFFFFF;         /* brand background (white) */
  --card:#FFFFFF;
  --band:#F6F5F3;       /* faint neutral tint for alternating sections (no green) */
  --border:#E7E3DC;     /* warm neutral hairline */
  --text:#494A2F;      /* dark olive, all headings and body */
  --muted:#7D786D;     /* neutral warm gray for secondary text (not green) */
  --accent:#F79D0C;    /* logo orange/amber, the single brand accent */
  --accent2:#BD8118;   /* deep gold, reserved, not used as text */
  --accent3:#836623;   /* dark gold/brown, reserved, not used as text */
  --maxw:1120px;
  --radius:14px;
  --shadow:0 1px 2px rgba(73,74,47,.04), 0 8px 30px rgba(73,74,47,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center}
.brand img{height:38px;width:auto;display:block}
@media(max-width:760px){.brand img{height:32px}}
.navlinks{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500}
.navlinks a{white-space:nowrap}
.navlinks a:not(.btn){color:var(--muted);transition:color .15s}
.navlinks a:not(.btn):hover,.navlinks a:not(.btn).active{color:var(--text)}
.btn{display:inline-block;white-space:nowrap;background:var(--accent);color:var(--text);font-weight:700;font-size:14.5px;letter-spacing:.01em;padding:12px 24px;border-radius:999px;transition:transform .15s, background .15s;border:none;cursor:pointer}
.btn:hover{background:#e68f08;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);font-weight:600;border:1.5px solid var(--border)}
.btn.ghost:hover{border-color:var(--accent);color:var(--text);background:transparent}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;padding:0;background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .22s, opacity .22s}
.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)}
@media(max-width:980px){.nav .wrap{height:70px}.navlinks{gap:20px;font-size:14px}.brand img{height:34px}}
@media(max-width:860px){.navlinks{gap:14px}}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--border);box-shadow:0 14px 30px rgba(73,74,47,.10);padding:6px 0;display:none}
  .nav.open .navlinks{display:flex}
  .navlinks a:not(.btn){display:block;padding:14px 24px;font-size:16px;color:var(--text)}
  .navlinks a:not(.btn):hover{background:var(--band)}
  .navlinks a.btn{margin:10px 24px;text-align:center}
}

/* ---------- Sections ---------- */
section{padding:90px 0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
h1{font-weight:300;font-size:clamp(38px,5.3vw,62px);line-height:1.08;letter-spacing:-.01em;margin:18px 0 0}
h2{font-weight:300;font-size:clamp(28px,3.6vw,40px);line-height:1.14;letter-spacing:-.01em;margin:0 0 14px}
h3{font-weight:600;font-size:19px;margin:0 0 8px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:640px;margin:22px 0 0;font-weight:400}
.kicker{font-weight:600;color:var(--text)}
.section-intro{max-width:660px;margin-bottom:46px}

/* ---------- Hero ---------- */
.hero{padding:74px 0 60px;position:relative;overflow:hidden}
.hero h1 strong{font-weight:600;color:var(--text)}
.hero .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .subnote{font-size:13.5px;color:var(--muted)}
.proofstrip{margin-top:48px;border-top:1px solid var(--border);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px 40px}
.proofstrip .item{font-size:14px;color:var(--muted)}
.proofstrip .item b{color:var(--text);font-weight:600}
.proofstrip .item .num{color:var(--accent);font-weight:700}

/* ---------- Cards ---------- */
.grid{display:grid;gap:20px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g4{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.g3,.grid.g2,.grid.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.card .idx{font-weight:300;font-size:34px;color:var(--accent);line-height:1;margin-bottom:14px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card p b{color:var(--text);font-weight:600}

/* alt background band */
.band{background:var(--band);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- Distinction teaser ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split .col{padding:34px}
.split .col.left{border-right:1px solid var(--border)}
@media(max-width:760px){.split .col.left{border-right:none;border-bottom:1px solid var(--border)}}
.split .tag{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.split .col.left .tag{color:var(--muted)}
.split .col.right .tag{color:var(--accent)}
.split ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
.split ul li{margin-bottom:8px}

/* ---------- Services ---------- */
.svc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.svc .price{font-size:13.5px;font-weight:600;color:var(--text)}
.svc p{margin:6px 0 0;color:var(--muted);font-size:15px}
.svc .live{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.02em}

/* ---------- Proof / credibility ---------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.creds{grid-template-columns:repeat(2,1fr)}}
.cred{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.cred .role{font-weight:600;font-size:15px;margin-bottom:3px}
.cred .org{font-size:13.5px;color:var(--muted)}
.result-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media(max-width:760px){.result-row{grid-template-columns:1fr}}
.result{background:var(--text);color:#fff;border-radius:var(--radius);padding:30px}
.result .big{font-weight:300;font-size:40px;color:var(--accent);line-height:1}
.result .big span{font-size:20px}
.result .desc{margin-top:10px;font-size:15px;color:rgba(255,255,255,.82)}
.result .who{margin-top:4px;font-size:13px;color:rgba(255,255,255,.55)}

/* ---------- About ---------- */
.about-quote{font-weight:300;font-size:clamp(22px,3vw,30px);line-height:1.3;max-width:820px}
.about-quote em{font-style:normal;color:var(--accent)}

/* ---------- Canon / method chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:9px 16px;font-size:14px}
.chip b{font-weight:600}
.chip span{color:var(--muted)}

/* ---------- Contact ---------- */
.form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);max-width:560px}
.form label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--text)}
.form .field{margin-bottom:18px}
.form input,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;color:var(--text);background:#FdFCFA}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:110px;resize:vertical}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border);padding:56px 0 40px;background:#fff}
.footer-tag{font-weight:300;font-size:clamp(22px,3vw,30px);line-height:1.25;max-width:640px;margin-bottom:30px}
.footer-tag b{font-weight:600;color:var(--accent)}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--border);padding-top:24px}
.footer-row a{color:var(--muted)}
.footer-row a:hover{color:var(--text)}
@media(max-width:600px){.footer-row{flex-direction:column;align-items:flex-start}.footer-row > div{flex-wrap:wrap;gap:10px 18px}}

/* roles + tiers + proof (positioning v2) */
.role-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.card ul.mini,.svc ul.mini{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
.card ul.mini li,.svc ul.mini li{margin-bottom:6px}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 11px;border-radius:999px;margin-bottom:12px;align-self:flex-start}
.svc.feature{border-color:var(--accent);box-shadow:0 1px 2px rgba(247,157,12,.10),0 12px 34px rgba(247,157,12,.13)}
.note-line{margin-top:26px;color:var(--muted);font-size:15.5px;max-width:700px}
.note-line b{color:var(--text);font-weight:600}
.clientstrip{margin-top:44px;border-top:1px solid var(--border);padding-top:22px;font-size:14px;color:var(--muted)}
.clientstrip b{color:var(--text);font-weight:600}

/* client logo carousel (auto-scrolling marquee) */
.logo-carousel{margin-top:44px;border-top:1px solid var(--border);padding-top:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;align-items:center;gap:70px;width:max-content;animation:logoscroll 40s linear infinite}
.logo-carousel:hover .logo-track{animation-play-state:paused}
.logo-track img{height:52px;width:auto;opacity:.62;filter:grayscale(1);flex:none;display:block}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px 50px}}

/* podcast episodes */
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.ep-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ep-grid{grid-template-columns:1fr}}
.ep{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s}
.ep:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(73,74,47,.06),0 14px 34px rgba(73,74,47,.11)}
.ep .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;display:block;background:#e9e6e0}
.ep .body{padding:18px 20px}
.ep .date{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.ep h3{font-size:15.5px;font-weight:600;line-height:1.32;margin:0}
.subscribe{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.partner{margin-top:22px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:9px}
.partner img{height:22px;width:auto}

/* utility */
.center{text-align:center}
.mt-s{margin-top:14px}
.link-arrow{color:var(--accent);font-weight:700;font-size:15px}
.link-arrow:hover{color:#e08f07}
.prototype-banner{background:var(--text);color:#fff;text-align:center;font-size:12.5px;font-weight:500;padding:7px 16px;letter-spacing:.02em}
.prototype-banner b{font-weight:700}

/* About hero with photo */
.about-hero{display:flex;gap:48px;align-items:flex-end;flex-wrap:wrap}
.about-hero-text{flex:1 1 400px}
.about-hero-media{flex:0 0 280px;max-width:300px}
.about-hero-media img{width:100%;height:auto;display:block}
@media(max-width:760px){.about-hero{align-items:flex-start}.about-hero-media{flex-basis:200px;max-width:220px}}

/* Cookie consent banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;padding:0 16px 16px;transform:translateY(130%);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.cookie-banner.show{transform:translateY(0)}
.cookie-inner{max-width:900px;margin:0 auto;background:var(--text);color:#fff;border-radius:14px;box-shadow:0 12px 44px rgba(0,0,0,.24);padding:18px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cookie-text{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88);flex:1 1 340px}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-btn{font-family:inherit;font-weight:700;font-size:13.5px;letter-spacing:.01em;padding:10px 22px;border-radius:999px;border:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.cookie-decline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.38)}
.cookie-decline:hover{border-color:#fff}
.cookie-accept{background:var(--accent);color:var(--text)}
.cookie-accept:hover{background:#e68f08}
@media(max-width:560px){.cookie-inner{flex-direction:column;align-items:stretch;gap:14px}.cookie-actions{justify-content:flex-end}}

/* Podcast guest carousel (auto-scrolling, like the logo marquee) */
.guest-carousel{margin-top:10px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.guest-track{display:flex;align-items:stretch;gap:20px;width:max-content;animation:guestscroll 60s linear infinite}
.guest-carousel:hover .guest-track{animation-play-state:paused}
.guest-card{flex:none;width:208px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 22px;text-align:center}
.guest-ph{width:88px;height:88px;border-radius:999px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#FCE6BE,#F6CE86);color:#8a5a00;font-weight:600;font-size:28px;letter-spacing:.02em;
  overflow:hidden}
.guest-ph img{width:100%;height:100%;object-fit:cover;display:block}
.guest-name{font-weight:600;font-size:16px;line-height:1.2}
.guest-org{font-size:13px;color:var(--muted);margin-top:3px}
.guest-topic{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
@keyframes guestscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.guest-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* Home hero with speaking photo */
.hero-split{display:flex;gap:44px;align-items:flex-end;flex-wrap:wrap}
.hero-split .hero-text{flex:1 1 440px}
.hero-split .hero-media{flex:0 0 auto;align-self:flex-end;margin-left:auto}
.hero-split .hero-media img{display:block;width:auto;max-width:330px;max-height:540px}
@media(max-width:860px){.hero-split .hero-media{display:none}}