/* Capital Legacy Counseling. Colours measured from the firm's logo (sun gold, teal, mint, green) and its site's ink.
   Type: Playfair Display and Roboto, the two families the firm's own site loads (OFL and Apache 2.0, self hosted). */
@font-face{font-family:"Playfair Display";src:url(fonts/PlayfairDisplay-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/PlayfairDisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Roboto;src:url(fonts/Roboto-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url(fonts/Roboto-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url(fonts/Roboto-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --ink:#191628;--text:#2C2A3A;--muted:#5D5A6B;--cream:#FBF7EE;--tint:#F4EEDF;--paper:#fff;--line:#E7DFCC;
  --gold:#CFAA39;--gold-d:#866611;--teal:#43CFC6;--teal-d:#117771;--teal-dd:#0B5551;--mint:#ABF1D5;--green:#34A976;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:18px;--shadow:0 18px 44px rgba(25,22,40,.09);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--text);font:400 17px/1.65 var(--sans);overflow-x:hidden}
img,svg,video{max-width:100%}
a{color:var(--teal-d);text-underline-offset:3px}
a:hover{color:var(--teal-dd)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.15;margin:0 0 14px}
h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.01em}
h2{font-size:clamp(29px,3.2vw,42px)}
h3{font-size:21px}
h4{font:700 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
p{margin:0 0 14px}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:700 12.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin:0 0 12px}
.intro{font-size:18.5px;color:var(--muted);max-width:720px}
.lead{font-family:var(--serif);font-size:clamp(21px,2vw,25px);line-height:1.4;color:var(--ink)}
.fine{font-size:13.5px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:500 15.5px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--teal-d);color:var(--teal-dd)}
.btn.solid{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.btn.solid:hover{background:var(--teal-dd);border-color:var(--teal-dd);color:#fff;box-shadow:0 10px 24px rgba(17,119,113,.25)}
.btn.big{padding:14px 24px;font-size:16.5px}
.btn.small{padding:7px 13px;font-size:13.5px}
.btn .arr{width:18px;height:18px;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* utility strip and header */
.util{background:var(--ink);color:#E9E5D8;font-size:13.5px}
.util .wrap{display:flex;justify-content:space-between;gap:16px;height:36px;align-items:center}
.util a{color:#E9E5D8;text-decoration:none}
.util a:hover{color:var(--mint)}
.u-r{display:flex;gap:22px}
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.top.scrolled{box-shadow:0 8px 26px rgba(25,22,40,.08)}
.top .wrap{display:flex;align-items:center;gap:20px;height:84px}
.brand{display:block;flex:none}
.brand img{display:block;width:216px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15.5px;padding:8px 13px;border-radius:999px}
.nav a:hover,.nav a[aria-current]{background:var(--tint);color:var(--teal-dd)}
.nav a.cta{background:var(--teal-d);color:#fff;margin-left:8px;padding:10px 18px}
.nav a.cta:hover{background:var(--teal-dd);color:#fff}
.menu{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;position:relative}
.menu span:not(.vh){position:absolute;left:13px;right:13px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
.menu span:nth-child(1){top:18px}.menu span:nth-child(2){top:25px}
.menu[aria-expanded=true] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu[aria-expanded=true] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:0 50%;transform:scaleX(0);will-change:transform}

/* hero: cream sky, the logo's sun, three waves */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFDF8 0%,var(--cream) 70%);padding:64px 0 120px}
.hero.short{padding:44px 0 110px}
.hero-sun{position:absolute;width:420px;height:420px;border-radius:50%;right:-80px;top:-150px;background:radial-gradient(circle,rgba(207,170,57,.32) 0%,rgba(207,170,57,.14) 45%,transparent 70%);pointer-events:none}
.hero-sea{position:absolute;left:0;bottom:0;width:calc(100% + 48px);max-width:none;height:150px;pointer-events:none}
.hero-sea .w1{fill:var(--mint);opacity:.55}
.hero-sea .w2{fill:var(--teal);opacity:.35}
.hero-sea .w3{fill:var(--green);opacity:.22}
.hgrid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:start}
.htext{padding-top:22px}
.htext p:not(.eyebrow):not(.lead){font-size:18px;color:var(--muted);max-width:600px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-current]{color:var(--ink)}

/* sections */
.sec{padding:84px 0;position:relative}
.sec.tint{background:var(--tint)}
.sec h2{max-width:820px}
.mgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:30px}
.mcard{grid-column:span 2;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-decoration:none;color:var(--text);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.mcard:nth-child(4),.mcard:nth-child(5){grid-column:span 3}
.mcard .mk{font-size:13px;font-weight:500;color:var(--gold-d);margin-bottom:8px}
.mcard p{color:var(--muted);font-size:16px}
.more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--teal-d);font-weight:500;font-size:15px}
.more .arr{width:17px;height:17px;transition:transform .2s}
.mcard:hover,.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D9CDB0}
.mcard:hover .arr,.scard:hover .arr{transform:translateX(4px)}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.sgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.scard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;color:var(--text);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.scard .ico{width:44px;height:44px;padding:9px;border-radius:12px;background:#E3F7F1;color:var(--teal-d);margin-bottom:14px;transition:transform .3s,background-color .3s}
.scard:hover .ico{transform:rotate(-6deg) scale(1.06);background:var(--mint)}
.scard h3{font-size:19px;margin-bottom:8px}
.scard p{font-size:15px;color:var(--muted)}
.scard.sm h3{margin-bottom:14px}
.allsvc{margin:24px 0 0}
.allsvc a{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.allsvc .arr{width:17px;height:17px}

/* film */
.film-sec{background:var(--ink);color:#E9E5D8}
.film-sec h2{color:#fff}
.film-sec .eyebrow{color:var(--gold)}
.film-sec .intro,.film-sec .fine{color:#C9C4D6}
.filmgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.film{position:relative;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.film video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.film-soon{aspect-ratio:16/9;display:grid;place-items:center;color:#fff;position:relative}
.film-soon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.film-soon span{position:relative;background:rgba(0,0,0,.6);padding:8px 14px;border-radius:999px;font-size:14px}
.film .dl{display:flex;gap:10px;padding:12px 14px;background:#221F33;flex-wrap:wrap}
.film .dl a{color:var(--mint);font-size:14px}
.script p{font-family:var(--serif);font-size:19px;line-height:1.45;color:#fff;margin:0 0 10px;padding-left:16px;border-left:3px solid var(--gold)}

/* four steps */
.apgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.boat{width:200px;margin-top:20px}
.boat .bw{animation:bob 5s ease-in-out infinite}
.boat .bw2{animation:bob 6.5s ease-in-out infinite reverse}
@keyframes bob{50%{transform:translateX(-8px)}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);transition:border-color .3s,box-shadow .3s}
.steps li.open{border-color:var(--teal);box-shadow:var(--shadow)}
.step{width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px;background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.step .num{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 19px var(--serif);background:var(--tint);color:var(--gold-d);transition:background-color .3s,color .3s,transform .3s}
.steps li.open .num{background:var(--gold);color:#fff}
.step .st{font:700 20px/1.25 var(--serif);flex:1}
.step .chev{width:10px;height:10px;border-right:2px solid var(--teal-d);border-bottom:2px solid var(--teal-d);transform:rotate(45deg);transition:transform .25s;margin-right:6px}
.steps li.open .chev{transform:rotate(225deg)}
.sbody{display:none;padding:0 22px 18px 80px;color:var(--muted);font-size:16px}
.steps li.open .sbody{display:block;animation:fadeUp .35s ease both}
.js .steps:not(.go) li{opacity:.35;transform:translateX(-10px)}
.js .steps li{transition:opacity .5s ease calc(var(--i) * 150ms),transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 150ms),border-color .3s,box-shadow .3s}
.vlink{margin-top:16px;display:inline-flex;align-items:center;gap:8px;border:0;background:#E3F7F1;color:var(--teal-dd);font:500 14px/1.2 var(--sans);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background-color .2s,transform .14s}
.vlink::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal-d);box-shadow:0 0 0 3px rgba(67,207,198,.3)}
.vlink:hover{background:var(--mint)}

/* who we serve, focus lists */
.groups,.focus{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.groups li,.focus li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:6px;transition:transform .25s,box-shadow .25s}
.groups li:hover,.focus li:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.groups b,.focus b{font:700 18.5px/1.3 var(--serif);color:var(--ink)}
.groups span,.focus span{color:var(--muted);font-size:15.5px}
.focus li{border-top:3px solid var(--teal)}
.focus li:nth-child(3n+2){border-top-color:var(--gold)}
.focus li:nth-child(3n){border-top-color:var(--green)}

/* about and Ruby */
.aboutgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.aboutgrid > div > p{color:var(--muted)}
.ruby{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.ruby::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(207,170,57,.22),transparent 70%)}
.ruby h3{font-size:28px;margin-bottom:2px}
.ruby .rt{color:var(--gold-d);font-weight:500;margin-bottom:14px}
.ruby p{font-size:16px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 16px}
.tags .tl{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.tag{background:#E3F7F1;color:var(--teal-dd);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:500}
.edu{margin:0 0 14px;padding-left:18px;font-size:15.5px}
.mail{font-weight:500}
.ruby h4{margin-top:22px;color:var(--ink)}
.team{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.team li{display:flex;flex-direction:column;border-left:3px solid var(--mint);padding-left:12px}
.team b{color:var(--ink);font-weight:500}
.team span{font-size:14.5px;color:var(--muted)}

/* the free meeting */
.meet{background:linear-gradient(180deg,#E9F8F2,#F2FBF7)}
.meetgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.formcard{background:var(--paper);border-radius:22px;padding:28px;box-shadow:var(--shadow);border:1px solid #D5EEE5}
.formcard h3{margin-bottom:14px}
.formqs{margin:0;padding:0;list-style:none;counter-reset:q;display:grid;gap:14px}
.formqs li{counter-increment:q;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px}
.formqs li::before{content:counter(q);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font:700 15px var(--serif)}
.formqs b{color:var(--ink);font-weight:500}
.formqs span{color:var(--muted);font-size:15px}

/* seminars */
.semgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.libs{background:var(--paper);border:1px dashed #D8CCAE;border-radius:var(--r);padding:26px}
.libs h3{font-size:19px}
.libs p{color:var(--muted);font-size:16px}

/* questions */
.qgrid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;align-items:start}
.qas{display:grid;gap:10px}
.qa{background:var(--paper);border:1px solid var(--line);border-radius:14px;transition:border-color .25s,box-shadow .25s}
.qa[open]{border-color:var(--teal);box-shadow:var(--shadow)}
.qa summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;font:700 17.5px/1.35 var(--serif);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
.qa summary i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--tint);position:relative;transition:transform .3s,background-color .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:8px;right:8px;top:12px;height:2px;background:var(--teal-d);border-radius:2px}
.qa summary i::after{transform:rotate(90deg);transition:transform .3s}
.qa[open] summary i{background:var(--mint)}
.qa[open] summary i::after{transform:rotate(0)}
.qab{padding:0 20px 18px;color:var(--muted);font-size:16px}
.qa[open] .qab{animation:fadeUp .3s ease both}
.qab .vlink{margin-top:0}

/* For BNI */
.refs{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ref{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .25s,box-shadow .25s}
.ref:first-child{grid-column:1 / -1;background:linear-gradient(120deg,#FFF8E6,#fff 60%);border-color:#E6D49B}
.ref:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal-d);color:#fff;font:700 18px var(--serif)}
.ref:first-child .rn{background:var(--gold)}
.ref h3{font-size:20px;margin-bottom:6px}
.ref h3 span{font-family:var(--sans);font-weight:400;font-size:17px;color:var(--muted)}
.ref p{font-size:15px;color:var(--muted);margin-bottom:6px}
.ref a{font-size:14.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.ref a .arr{width:16px;height:16px}
.lgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.listen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.listen li{background:var(--paper);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 18px;font:400 18px/1.35 var(--serif);color:var(--ink);transition:transform .25s}
.listen li:nth-child(even){border-radius:18px 18px 4px 18px;background:#E9F8F2;border-color:#CDEDE2}
.listen li:hover{transform:translateY(-3px) rotate(-.5deg)}
.intro3{list-style:none;margin:28px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.intro3 li{counter-increment:s;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:6px}
.intro3 li::before{content:counter(s);font:700 34px/1 var(--serif);color:var(--gold)}
.intro3 b{font:700 19px var(--serif);color:var(--ink)}
.intro3 span{color:var(--muted);font-size:15.5px}

/* notices */
.prose{max-width:820px}
.prose h2{font-size:26px;margin-top:34px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted)}

/* footer */
.foot{position:relative;background:var(--ink);color:#D8D3E3;padding:60px 0 0;margin-top:0}
.foot-wave{position:absolute;left:0;right:0;top:-59px;width:100%;height:60px;fill:var(--ink)}
.meet + .foot .foot-wave,.sec.tint + .foot .foot-wave{background:transparent}
.fgrid{display:grid;grid-template-columns:1.3fr 1.2fr 1fr 1fr;gap:34px}
.foot h4{color:var(--gold)}
.foot h4.sp{margin-top:22px}
.foot a,.foot span{display:block;color:#D8D3E3;text-decoration:none;font-size:15px;margin-bottom:7px}
.foot a:hover{color:var(--mint)}
.foot .btn.solid{display:inline-flex;color:#fff;margin-top:6px}
.plate{display:inline-block!important;background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:12px}
.plate img{display:block;width:200px;height:auto}
.fbrand p{font-family:var(--serif);font-style:italic;font-size:18px;color:#fff}
.fnote{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.fnote p{font-size:13.5px;line-height:1.6;color:#B8B2C8;margin:0}
.fnote a{display:inline;color:var(--mint);font-size:13.5px}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 28px 18px}
.fbase span{font-size:13px;color:#9E98B0;margin:0}
.credit{text-align:center;padding:14px 0 18px;border-top:1px solid rgba(255,255,255,.08)}
.credit a{display:inline;color:#9E98B0;font-size:12.5px;letter-spacing:.04em}
.credit a:hover{color:var(--mint)}

/* booking panel */
.bookp{width:min(560px,calc(100vw - 32px));border:0;border-radius:22px;padding:30px;color:var(--text);background:#fff;box-shadow:0 40px 90px rgba(25,22,40,.35)}
.bookp::backdrop{background:rgba(25,22,40,.5)}
.bookp[open]{animation:panelIn .3s cubic-bezier(.2,.7,.2,1) both}
.bookp[open]::backdrop{animation:fadeIn .3s ease both}
.bookp h2{font-size:28px}
.bookp .formqs{margin:16px 0 6px}
.bookp-x{position:absolute;right:14px;top:14px;margin:0}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}}

/* ---------- Clara, the AI guide ---------- */
.clara{background:var(--paper);color:var(--text);border-radius:24px;padding:22px;box-shadow:0 30px 70px rgba(25,22,40,.14),0 0 0 1px var(--line);position:relative}
.clara-top{display:flex;gap:16px;align-items:center}
.clara-face{flex:none;width:112px;height:112px;display:block}
.clara-id{min-width:0}
.clara-id h2{font-size:26px;margin:0 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clara-id .ai{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:#E3F7F1;color:var(--teal-dd);border-radius:999px;padding:5px 9px}
.clara-id p{font-size:14px;color:var(--muted);margin:0 0 8px;line-height:1.4}
.state{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 9px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--muted)}
.state i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.state[data-state=idle] i{background:var(--green)}
.state[data-state=loading] i,.state[data-state=thinking] i,.state[data-state=fetching] i,.state[data-state=listening] i,.state[data-state=writing] i,.state[data-state=voicing] i{background:var(--gold);animation:pulse 1s ease-in-out infinite}
.state[data-state=speaking],.state[data-state=thinking],.state[data-state=listening]{color:var(--ink);border-color:var(--teal)}
.state[data-state=speaking] i{background:var(--teal-d);animation:pulse .5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.55);opacity:.45}}
.capw{position:relative;overflow:hidden}
.cap{font:500 18.5px/1.5 var(--sans);margin:16px 0 6px;min-height:4.5em;color:var(--ink)}
.cap.asked{color:var(--muted);font-weight:400;font-style:italic}
.cap .w{color:rgba(25,22,40,.38);transition:color .12s}
.cap .w.on{color:var(--ink)}
.vsrc{font-size:13px;color:var(--muted);min-height:1.3em;margin:0 0 10px}
.vchips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.vchips:empty{margin:0}
.vchip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:500 14px/1.3 var(--sans);cursor:pointer;text-align:left;transition:transform .14s,background-color .18s,border-color .18s,color .18s;animation:chipIn .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.vchip:hover{border-color:var(--teal-d);color:var(--teal-dd);background:#fff}
.vchip.alt{background:#fff;border-style:dashed}
@keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.vask{display:flex;gap:8px;margin-top:6px}
.vask input{flex:1;min-width:0;padding:12px 16px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);font:16px var(--sans)}
.vask input:focus{outline:none;border-color:var(--teal-d);box-shadow:0 0 0 3px rgba(67,207,198,.25)}
.vbtn{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:16px;transition:transform .14s,background-color .18s}
.vbtn svg{width:20px;height:20px}
.vbtn.go{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.vbtn.go:hover{background:var(--teal-dd)}
.vbtn.on{background:#B23A3A;border-color:#B23A3A;color:#fff}
.vrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.vmail{display:none;margin:10px 0 2px;padding:14px;border-radius:14px;background:#FFF6DD;border:1px solid #EBD9A2;font-size:14px;color:var(--text)}
.vmail.show{display:block;animation:fadeUp .3s ease both}
.vmail a{display:inline-flex;margin:0 8px 8px 0;padding:8px 14px;border-radius:999px;font-weight:500;text-decoration:none}
.vmail .vbook{background:var(--teal-d);color:#fff}
.vmail .vcall{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.vmail span{display:block;color:var(--muted)}
.vmore{margin-top:12px;font-size:13.5px;color:var(--muted)}
.vmore summary{cursor:pointer;font-weight:500;color:var(--teal-dd);width:max-content;max-width:100%}
.vmodel{display:flex;align-items:center;gap:10px;margin-top:10px}
.vmodel label{flex:none;font-weight:500}
.vmodel select{flex:1;min-width:0;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:14px var(--sans)}
.vdl{margin:10px 0 0;padding:14px;border-radius:14px;border:1px solid #CDEDE2;background:#F2FBF7;animation:fadeUp .3s ease both}
.vdl-t{font-size:14px;line-height:1.5;margin:0 0 8px;color:var(--ink)}
.vbar{height:3px;border-radius:2px;background:var(--line);margin:12px 0 0;overflow:hidden;transition:opacity .6s}
.vbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .25s}
.vbar.done{opacity:0}
.vfine{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.45}
.vtts{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.vtts input{margin:2px 0 0;flex:none}
.vnote{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.vdots{position:absolute;left:0;bottom:-2px;display:flex;gap:5px;opacity:0;transition:opacity .2s;pointer-events:none}
.vdots i{width:7px;height:7px;border-radius:50%;background:var(--teal-d);opacity:.3}
.clara.busy .vdots{opacity:1}
.clara.busy .vdots i{animation:dot 1s ease-in-out infinite}
.clara.busy .vdots i:nth-child(2){animation-delay:.15s}
.clara.busy .vdots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.capw::after{content:"";position:absolute;inset:0 -6px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-100%);opacity:0;pointer-events:none}
.clara.busy .capw::after{opacity:1;animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.vsnd[aria-pressed=true]{background:#E3F7F1;border-color:var(--teal-d);color:var(--teal-dd)}
#vhead,#veyes,#vbrows{will-change:transform}
#vhead{transform-box:view-box;transform-origin:100px 150px}
#veyes,#vbrows{transform-box:fill-box;transform-origin:center}
.pill{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:999px;background:var(--ink);color:#fff;border:0;box-shadow:0 14px 34px rgba(25,22,40,.35);font:500 15px var(--sans);cursor:pointer;transform:translateY(120px);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pill.show{transform:none}
.pill svg{width:40px;height:40px}

/* interactions */
:target,.sec{scroll-margin-top:110px}
#clara{scroll-margin-top:110px}
:focus{outline:none}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px;border-radius:6px}
.foot :focus-visible,.util :focus-visible,.film-sec :focus-visible,.pill:focus-visible{outline-color:var(--mint)}
.btn,.vchip,.vbtn,.nav a,.pill,.vlink,.step{-webkit-tap-highlight-color:transparent}
.btn{transition:transform .14s ease,background-color .18s,border-color .18s,color .18s,box-shadow .18s}
.btn:active,.vchip:active,.vbtn:active,.nav a:active,.vlink:active,.step:active{transform:scale(.97)}
.pill.show:active{transform:scale(.96)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.hero-sea .w1{animation:drift 14s ease-in-out infinite alternate}
.hero-sea .w2{animation:drift 18s ease-in-out infinite alternate-reverse}
.hero-sea .w3{animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-36px)}}

@media (max-width:1060px){
  .hgrid,.filmgrid,.apgrid,.aboutgrid,.meetgrid,.semgrid,.qgrid,.lgrid{grid-template-columns:minmax(0,1fr);gap:34px}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .htext{padding-top:0}
  .boat{display:none}
  .nav a:not(.cta){padding:8px 9px}
}
@media (max-width:860px){
  .menu{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px 16px;box-shadow:0 20px 30px rgba(25,22,40,.1);opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .22s,transform .22s,visibility 0s .22s}
  .nav.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s,transform .22s}
  .nav a{padding:12px 14px;font-size:17px}
  .nav a.cta{margin:8px 0 0;text-align:center;justify-content:center}
  .mgrid{grid-template-columns:minmax(0,1fr)}
  .mcard,.mcard:nth-child(4),.mcard:nth-child(5){grid-column:auto}
  .groups,.focus,.refs,.intro3{grid-template-columns:minmax(0,1fr)}
  .sgrid.three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .util .u-m{display:none}
  .util .wrap{font-size:12.5px}
  .top .wrap{height:68px}
  .brand img{width:168px}
  .hero{padding:30px 0 96px}
  .hero.short{padding:24px 0 92px}
  .hero-sea{height:100px}
  .sec{padding:56px 0}
  .sgrid{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:minmax(0,1fr);gap:24px}
  .fbase{padding:16px}
  .clara{padding:18px;border-radius:20px}
  .clara-face{width:88px;height:88px}
  .cap{font-size:17px}
  .step{padding:14px 16px;gap:12px}
  .step .num{width:38px;height:38px;font-size:17px}
  .step .st{font-size:18px}
  .sbody{padding:0 16px 16px 66px}
  .bookp{margin:auto auto 0;width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:26px 18px 30px}
  .row .btn.big{width:100%;justify-content:center}
  .pill{right:12px;bottom:12px}
  .ref{padding:18px;gap:12px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .js .steps:not(.go) li{opacity:1;transform:none}
  .capw::after{display:none}
  .mcard:hover,.scard:hover,.groups li:hover,.focus li:hover,.ref:hover,.listen li:hover{transform:none}
}
[hidden]{display:none!important}
.aboutgrid > div > p.eyebrow,.ruby p.eyebrow{color:var(--gold-d)}
.formcard > .fine{margin:16px 0 0}
@media (min-width:1061px){.qgrid > div:first-child,.apgrid > div:first-child{position:sticky;top:130px}}