/* ============================================================
   Caya website - main stylesheet
   Brand tokens live in :root. Do not hardcode brand colors.
   ============================================================ */

:root{
  --pulse:#00587C; --splash:#1F9FB8; --spark:#FAA52A; --sun:#FFCD57;
  --pulse-l:#7EC6E2; --splash-l:#D2EDF5; --spark-l:#FFF0BF;
  --ink:#192F34; --cream:#F9F7F2;
  --nav-h:74px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Figtree',system-ui,sans-serif; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased;}
a{color:inherit;}
img,svg{max-width:100%;}
.wrap{max-width:1100px; margin:0 auto; padding:0 40px;}

a:focus-visible, button:focus-visible{outline:3px solid var(--splash); outline-offset:3px; border-radius:6px;}

/* ---------- Nav ---------- */
.site-nav{position:sticky; top:0; z-index:50; background:var(--cream); transition:box-shadow .25s ease;}
.site-nav.scrolled{box-shadow:0 1px 0 rgba(25,47,52,.08), 0 8px 24px rgba(25,47,52,.06);}
nav{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h);}
.brand-lockup{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand-logo{height:28px; width:auto; display:block;}
.formerly{font-family:Georgia,serif; font-size:11.5px; color:#5c6f74; line-height:1.2; border-left:1.5px solid #C7D0D2; padding-left:11px;}
.formerly span{display:block; font-size:14.5px; font-weight:700; color:var(--ink);}
.nav-cta{background:var(--ink); color:var(--spark); font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:100px; text-decoration:none; white-space:nowrap; transition:transform .15s ease, filter .15s ease;}
.nav-cta:hover{transform:translateY(-1px); filter:brightness(1.08);}

/* ---------- Hero ---------- */
.hero-band{position:relative; overflow:hidden; background:var(--splash-l);}
.hero-circle{position:absolute; border-radius:50%; z-index:0;}
.hc1{width:300px; height:300px; background:var(--sun); top:-140px; right:-100px; opacity:.8;}
.hc3{width:120px; height:120px; background:var(--pulse-l); bottom:-60px; left:-60px;}
.hero-inner{position:relative; z-index:1; max-width:720px; padding:60px 0 96px;}
.eyebrow{font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--pulse); margin-bottom:18px;}
h1{font-size:clamp(40px, 7.5vw, 60px); line-height:1.05; font-weight:900; letter-spacing:-.02em; margin:0 0 22px;}
h1 .accent{color:var(--spark);}
.hero-sub{font-size:clamp(16px,2.4vw,18px); line-height:1.55; color:#243b40; max-width:560px; margin:0 0 32px;}
.hero-ctas{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.btn-primary{background:var(--ink); color:var(--spark); font-weight:800; font-size:15px; padding:15px 28px; border-radius:100px; text-decoration:none; border:none; cursor:pointer; font-family:inherit; transition:transform .15s ease, filter .15s ease;}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.08);}
.btn-secondary{font-weight:700; font-size:15px; color:var(--ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer;}

/* ---------- Sections ---------- */
.band{padding-top:72px; padding-bottom:72px;}
.section-eyebrow{font-weight:800; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pulse); margin-bottom:14px;}
h2{font-size:clamp(26px,4.5vw,33px); font-weight:900; letter-spacing:-.01em; margin:0 0 14px; max-width:640px;}
.section-sub{font-size:16px; color:#33474c; max-width:600px; line-height:1.55; margin:0 0 38px;}

.roles-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.role-card{background:#fff; border:1.5px solid var(--splash-l); border-top:4px solid var(--splash); border-radius:18px; padding:24px 20px; transition:transform .2s ease, box-shadow .2s ease;}
.role-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(25,47,52,.08);}
.role-card .r-title{font-weight:800; font-size:17px; margin-bottom:8px;}
.role-card .r-sub{font-size:13.5px; color:#5c6f74; line-height:1.5;}

.whatif-band{background:var(--ink); color:var(--cream); position:relative; overflow:hidden;}
.db-circle{position:absolute; border-radius:50%; opacity:.16; background:var(--splash);}
.dbc1{width:280px; height:280px; top:-120px; left:-90px;}
.dbc2{width:160px; height:160px; bottom:-90px; right:-50px;}
.whatif-list{list-style:none; margin:0; padding:0; position:relative; z-index:1;}
.whatif-list li{display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14);}
.whatif-list li:last-child{border-bottom:none;}
.whatif-q{font-size:clamp(16px,2.6vw,19px); font-weight:600; color:var(--splash-l);}
.whatif-a{font-size:clamp(16px,2.6vw,19px); font-weight:900; color:var(--sun); white-space:nowrap; margin-left:auto;}

.values-band{padding:78px 0;}
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.value-card{padding-left:16px; border-left:3px solid var(--spark);}
.value-card .v-title{font-weight:800; font-size:16px; color:var(--pulse); margin-bottom:8px;}
.value-card .v-sub{font-size:13.5px; color:#33474c; line-height:1.55;}

.testimonials-band{padding:20px 0 84px;}
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px;}
.t-card{background:#fff; border:1.5px solid var(--splash-l); border-top:3px solid var(--splash); border-radius:18px; padding:24px 22px; display:flex; flex-direction:column; min-height:210px;}
.t-card .t-mark{font-size:34px; font-weight:900; color:var(--splash); line-height:1; margin-bottom:8px;}
.t-card .t-quote{font-size:13.5px; line-height:1.55; color:#33474c; margin-bottom:0;}
.t-quote.clamp{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.t-readmore{ align-self:flex-start; margin-top:8px; padding:0; background:none; border:none; color:var(--splash); font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.t-readmore:hover{ text-decoration:underline; }
.t-card .t-name{font-weight:800; font-size:13px; color:var(--ink); margin-top:auto;}
.t-card .t-role{font-size:12px; color:#5c6f74; min-height:2.6em;}
.testimonials-note{font-size:13px; color:#5c6f74; text-align:center; font-style:italic;}

/* ---------- Final CTA + Calendly ---------- */
.final-cta{background:var(--pulse); color:var(--cream); border-radius:28px; margin:0 40px 60px; padding:58px; text-align:center; position:relative; overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 16px);}
.final-cta h2{color:var(--cream); margin:0 auto 14px; max-width:600px;}
.final-cta p{color:var(--splash-l); font-size:16px; max-width:520px; margin:0 auto 28px;}
.cal-shell{background:#fff; border-radius:20px; padding:8px; max-width:720px; margin:0 auto; box-shadow:0 18px 44px rgba(0,0,0,.18); overflow:hidden;}
.calendly-inline-widget{min-width:280px; height:700px;}

/* ---------- Footer ---------- */
.site-footer{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:36px 0 52px; font-size:13px; color:#5c6f74;}
.foot-brand{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.foot-brand .brand-logo{height:22px; opacity:.85;}
.foot-tag{margin:0; max-width:230px;}
.foot-legal{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px;}
.foot-legal a{color:#5c6f74; text-decoration:none;}
.foot-legal a:hover{color:var(--pulse); text-decoration:underline;}
.foot-social{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.foot-socials{display:flex; gap:8px;}
.foot-socials a{width:24px; height:24px; border-radius:50%; background:var(--splash-l); display:flex; align-items:center; justify-content:center; transition:transform .15s ease;}
.foot-socials a:hover{transform:translateY(-2px);}
.foot-socials svg{width:12px; height:12px; fill:var(--pulse);}
.foot-copy{margin:0;}

/* ---------- Cookie consent ---------- */
.cookie-bar{position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto; background:var(--ink); color:var(--cream); padding:16px 18px; border-radius:14px; display:flex; gap:14px; align-items:center; justify-content:space-between; box-shadow:0 12px 40px rgba(0,0,0,.25); z-index:80; font-size:13.5px;}
.cookie-bar a{color:var(--sun); text-decoration:underline;}
.cookie-bar button{background:var(--spark); color:var(--ink); border:none; font-weight:800; padding:9px 18px; border-radius:100px; cursor:pointer; white-space:nowrap; font-family:inherit;}
.cookie-bar.hidden{display:none;}

/* ---------- Legal pages ---------- */
.legal-main{max-width:760px; margin:0 auto; padding:56px 40px 84px;}
.legal-main h1{font-size:clamp(30px,5vw,42px); color:var(--pulse); margin:0 0 8px; max-width:none;}
.legal-updated{color:#5c6f74; font-size:13px; margin:0 0 30px;}
.legal-main h2{font-size:20px; color:var(--pulse); margin:34px 0 10px; max-width:none;}
.legal-main p, .legal-main li{font-size:15px; line-height:1.65; color:#33474c;}
.legal-main a{color:var(--splash);}
.legal-note{background:var(--spark-l); border-left:4px solid var(--spark); padding:14px 16px; border-radius:8px; font-size:13.5px; color:#4a3a10; margin:22px 0;}

/* ---------- Scroll reveal (JS only) ---------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in{opacity:1; transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .roles-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .testimonials-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .wrap{padding:0 20px;}
  .hero-inner{padding:44px 0 68px;}
  .band{padding-top:54px; padding-bottom:54px;}
  .values-band{padding:56px 0;}
  .roles-grid, .values-grid, .testimonials-grid{grid-template-columns:1fr;}
  .whatif-list li{flex-direction:column; gap:4px; align-items:flex-start;}
  .whatif-a{margin-left:0;}
  .final-cta{margin:0 12px 44px; padding:32px 14px; border-radius:22px;}
  .cal-shell{padding:6px;}
  .calendly-inline-widget{min-width:0; width:100%;}
  .legal-main{padding:44px 20px 64px;}
  .formerly{display:none;}
  .nav-cta{font-size:12.5px; padding:10px 16px;}
  .site-footer{flex-direction:column; align-items:flex-start;}
  .foot-social{align-items:flex-start;}
  .cookie-bar{flex-direction:column; align-items:stretch; text-align:center;}
}

@media (prefers-reduced-motion: reduce){
  html, *{scroll-behavior:auto;}
  .js .reveal{opacity:1; transform:none; transition:none;}
}