:root { --teal:#0E4F52; --teal-deep:#093B3E; --coral:#D85A30; --coral-deep:#B84A26; --cream:#FAF7F2; --ink:#292524; --grey:rgba(41,37,36,.74); --line:rgba(41,37,36,.14); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Open Sans','Inter','Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; animation:pagein .4s ease; }
@keyframes pagein { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:none; } }
body.exit-l, body.exit-r { transition:opacity .26s ease, transform .26s ease; opacity:0; }
body.exit-l { transform:translateX(-30px); }
body.exit-r { transform:translateX(30px); }
a { text-decoration:none; color:inherit; }
h1,h2,h3,h4,.big,.mid,.kick,.pillnav,.pillbtn,summary,.mrow h3,.arc h3 { font-family:'Inter','Helvetica Neue',Arial,sans-serif; }

/* pill nav */
.pillnav { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:100; display:flex; align-items:center; gap:4px;
  background:rgba(250,247,242,.92); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:40px; padding:7px 9px;
  box-shadow:0 8px 30px rgba(14,79,82,.10); max-width:96vw; }
.pillnav .plogo { display:flex; align-items:center; gap:8px; padding:0 10px; font-weight:700; font-size:17px; }
.pillnav .plogo svg { height:26px; width:auto; }
.pillnav a.pl { font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:24px; transition:all .25s; white-space:nowrap; }
.pillnav a.pl:hover { background:var(--teal); color:var(--cream); }
.pillnav a.pl.active { background:var(--teal); color:var(--cream); }
.pillnav a.pcta { background:var(--coral); color:#fff; font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:24px; transition:all .25s; white-space:nowrap; }
.pillnav a.pcta:hover { background:var(--coral-deep); }
@media (max-width:820px){
  .pillnav .plogo span { display:none; }
  .pillnav a.pl { font-size:11px; padding:8px 8px; }
  .pillnav a.pcta { font-size:11px; padding:8px 12px; }
}

section { padding:130px 7vw 90px; position:relative; overflow:hidden; }
.big { font-size:clamp(34px,5.6vw,72px); font-weight:800; line-height:1.06; letter-spacing:-1.2px; }
.mid { font-size:clamp(24px,3.2vw,42px); font-weight:800; letter-spacing:-0.7px; line-height:1.15; }
.kick { font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--coral); margin-bottom:18px; }
.lede { font-size:clamp(15.5px,1.6vw,19px); color:var(--grey); max-width:680px; }
.pillbtn { display:inline-block; background:var(--coral); color:#fff; font-weight:700; font-size:16px; padding:15px 36px; border-radius:40px; margin-top:32px; transition:all .25s; border:none; cursor:pointer; }
.pillbtn:hover { background:var(--coral-deep); transform:translateY(-2px); box-shadow:0 10px 30px rgba(216,90,48,.35); }
.pillbtn.ghost { background:transparent; border:2px solid var(--teal); color:var(--teal); }
.pillbtn.ghost:hover { background:var(--teal); color:var(--cream); box-shadow:none; }
.dotc { color:var(--coral); }
.center { text-align:center; }

/* reveal */
.rv { opacity:0; transform:translateY(50px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.rvl { opacity:0; transform:translateX(-70px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.rvr { opacity:0; transform:translateX(70px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.rv.on,.rvl.on,.rvr.on { opacity:1; transform:none; }

/* hero */
.hero { min-height:100vh; display:flex; align-items:center; background:linear-gradient(120deg,#0F5356 0%,#0B4548 50%,#093B3E 100%); color:var(--cream); padding-top:130px; }
.beam { position:absolute; top:-40%; height:200%; pointer-events:none; transform:rotate(20deg); animation:beamdrift 16s ease-in-out infinite; z-index:1; }
.b1 { left:-8%; width:48%; background:linear-gradient(90deg,transparent,rgba(26,110,114,.42),transparent); }
.b2 { left:28%; width:42%; background:linear-gradient(90deg,transparent,rgba(9,59,62,.6),transparent); animation-duration:20s; animation-delay:-7s; }
.b3 { left:58%; width:40%; background:linear-gradient(90deg,transparent,rgba(23,100,104,.34),transparent); animation-duration:24s; animation-delay:-3s; }
.bs { left:56%; width:3px; background:linear-gradient(180deg,transparent,rgba(216,90,48,.55),transparent); animation-duration:22s; animation-delay:-10s; }
@keyframes beamdrift { 0%,100%{transform:rotate(20deg) translateX(0);} 50%{transform:rotate(20deg) translateX(46px);} }
.herogrid { display:grid; grid-template-columns:1.15fr .85fr; gap:5vw; align-items:center; position:relative; z-index:2; width:100%; }
.herogrid h1 { font-size:clamp(25px,4vw,52px); font-weight:800; line-height:1.16; letter-spacing:-0.6px; }
.herogrid h1 span { display:block; white-space:nowrap; }
.herosub { font-size:clamp(17px,1.75vw,21px); color:rgba(250,247,242,.78); margin-top:22px; }
.heromark { position:relative; }
.heromark::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px,96vw); height:min(640px,96vw); border-radius:50%;
  background:radial-gradient(circle,#12100E 0%,#0A3D40 52%,rgba(10,61,64,0) 72%); opacity:.5; }
.heromark svg { position:relative; width:min(540px,100%); height:auto; display:block; margin:0 auto; z-index:2; }
.hm line { stroke:rgba(250,247,242,.92); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:32; stroke-dashoffset:32; animation:hdraw .45s ease-out forwards; }
.hm circle { opacity:0; transform-box:fill-box; transform-origin:center; animation:hpop .35s ease-out forwards; }
.hm .tip { animation:hpop .35s ease-out forwards, hpulse 3.2s ease-in-out 2.8s infinite; }
@keyframes hdraw { to{stroke-dashoffset:0;} }
@keyframes hpop { from{opacity:0;transform:scale(.4);} to{opacity:1;transform:scale(1);} }
@keyframes hpulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.22);} }
@media (max-width:860px){ .herogrid{grid-template-columns:1fr;text-align:center;} .herosub{margin-inline:auto;} }

/* practice cards */
.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.bigcard { background:var(--teal); color:var(--cream); border-radius:28px; padding:40px 32px; border-top:6px solid var(--coral);
  transition:transform .35s ease, box-shadow .35s ease; display:block; }
.bigcard:hover { transform:translateY(-10px); box-shadow:0 24px 54px rgba(18,16,14,.5); }
.bigcard h3 { color:var(--cream); font-size:23px; font-weight:800; margin-bottom:12px; letter-spacing:-0.4px; }
.bigcard p { color:rgba(250,247,242,.9); font-size:15px; }
@media (max-width:860px){ .cards3{grid-template-columns:1fr;} }

/* markets */
.mkts { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.mkt { background:#fff; border:1px solid var(--line); border-radius:28px; padding:38px 30px; border-top:6px solid var(--coral); transition:transform .3s, box-shadow .3s; }
.mkt:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(14,79,82,.12); }
.mkt.t-ink { border-top-color:var(--ink); }
.mkt.t-teal { border-top-color:var(--teal); }
.mkt h3 { color:var(--teal); font-size:21px; font-weight:800; margin-bottom:10px; }
.mkt p { color:var(--grey); font-size:14.5px; }
@media (max-width:860px){ .mkts{grid-template-columns:1fr;} }
.mdots { display:inline-flex; gap:7px; margin-right:12px; align-items:center; }
.mdots i { width:16px; height:16px; border-radius:50%; display:inline-block; animation:mdot 1.6s ease-in-out infinite; }
.mdots i:nth-child(1){ background:var(--ink); } .mdots i:nth-child(2){ background:var(--teal); animation-delay:.25s; } .mdots i:nth-child(3){ background:var(--coral); animation-delay:.5s; }
@keyframes mdot { 0%,100%{transform:scale(1);opacity:.75;} 50%{transform:scale(1.4);opacity:1;} }

/* values */
.vband { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
.vb { border-radius:24px; padding:28px 22px; background:#fff; border:1px solid var(--line); transition:all .35s; }
.vb h4 { font-size:clamp(11px,0.95vw,13.5px); font-weight:800; color:var(--teal); margin-bottom:10px; transition:color .35s; white-space:nowrap; letter-spacing:-0.2px; }
.vb p { font-size:13px; color:var(--grey); transition:color .35s; }
.vb.root:hover { background:var(--coral); border-color:var(--coral); } .vb.root:hover h4,.vb.root:hover p { color:var(--cream); }
.vb.branch:hover { background:var(--teal); border-color:var(--teal); } .vb.branch:hover h4,.vb.branch:hover p { color:var(--cream); }
.vb.weave:hover { background:var(--ink); border-color:var(--ink); } .vb.weave:hover h4,.vb.weave:hover p { color:var(--cream); }
.vb.canopy:hover { background:var(--teal); border-color:var(--teal); } .vb.canopy:hover h4,.vb.canopy:hover p { color:var(--cream); }
@media (max-width:1150px){ .vband{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .vband{grid-template-columns:1fr;} .vb h4{white-space:normal;} }

/* services accordions */
.svccols { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; align-items:start; }
.svccols .bigcard { min-height:240px; }
@media (max-width:900px){ .svccols{grid-template-columns:1fr;} }
details.svcd { background:#fff; border:1px solid var(--line); border-radius:16px; margin-top:12px; overflow:hidden; transition:border-color .3s; }
details.svcd[open] { border-color:var(--teal); }
details.svcd summary { cursor:pointer; padding:16px 20px; font-weight:700; font-size:14.5px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
details.svcd summary::-webkit-details-marker { display:none; }
details.svcd summary::after { content:"+"; font-size:22px; font-weight:400; color:var(--coral); transition:transform .35s ease; flex-shrink:0; }
details.svcd[open] summary::after { transform:rotate(45deg); }
details.svcd .db { padding:0 20px 16px; color:var(--grey); font-size:13.5px; animation:accIn .4s ease; }
@keyframes accIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:none;} }

/* methodology */
.jgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px; }
.jcard { background:#fff; border:1px solid var(--line); border-radius:24px; padding:32px 26px; border-top:6px solid var(--coral); transition:transform .3s, box-shadow .3s; }
.jcard:hover { transform:translateY(-8px); box-shadow:0 18px 40px rgba(14,79,82,.13); }
.jcard .n { font-size:40px; font-weight:800; color:var(--coral); line-height:1; letter-spacing:-2px; }
.jcard h4 { font-size:17px; font-weight:800; color:var(--teal); margin:14px 0 8px; }
.jcard p { font-size:13.5px; color:var(--grey); }
@media (max-width:1000px){ .jgrid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .jgrid{grid-template-columns:1fr;} }
.arc { padding:26px 6px 6px; border-top:3px solid var(--teal); }
.arc h3 { font-size:19px; font-weight:800; color:var(--teal); margin-bottom:10px; }
.arc h3 em { font-style:normal; color:var(--coral); }
.arc p { font-size:14px; color:var(--grey); }
.mrow { display:grid; grid-template-columns:150px 1fr; gap:4vw; align-items:baseline; padding:38px 0; border-bottom:1px solid var(--line); }
.mrow .mnum { font-size:clamp(52px,8vw,100px); font-weight:800; color:var(--teal); opacity:.16; line-height:1; letter-spacing:-4px; }
.mrow h3 { font-size:clamp(21px,2.4vw,30px); font-weight:800; color:var(--teal); margin-bottom:8px; }
.mrow h3 em { font-style:normal; color:var(--coral); }
.mrow p { color:var(--grey); max-width:640px; font-size:15.5px; }
@media (max-width:700px){ .mrow{grid-template-columns:1fr; gap:6px;} }

/* about vine */
.storygrid { display:grid; grid-template-columns:.95fr 1.05fr; gap:4vw; align-items:center; }
.vinewrap { position:relative; z-index:5; }
.vinewrap svg { width:100%; height:auto; display:block; }
@media (max-width:900px){ .storygrid{grid-template-columns:1fr;} .vinewrap{max-width:480px; margin:30px auto 0;} }
.twocol { display:grid; grid-template-columns:1fr 1fr; gap:5vw; }
@media (max-width:820px){ .twocol{grid-template-columns:1fr;} }

/* connect */
.teal-sec { background:var(--teal); color:var(--cream); }
.teal-sec .big,.teal-sec .mid { color:var(--cream); }
.teal-sec .lede { color:rgba(250,247,242,.78); }
.congrid { display:grid; grid-template-columns:.85fr 1.15fr; gap:5vw; margin-top:44px; }
@media (max-width:820px){ .congrid{grid-template-columns:1fr;} }
.coninfo p { font-size:16.5px; margin-bottom:16px; }
.coninfo strong { color:#D85A30; display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:2px; }
.socialrow { display:flex; gap:14px; margin-top:18px; }
.socialrow a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(250,247,242,.4); transition:all .25s; }
.socialrow a svg { width:20px; height:20px; fill:var(--cream); }
.socialrow a:hover { background:var(--coral); border-color:var(--coral); transform:translateY(-3px); }
.formcard { background:rgba(250,247,242,.06); border:1px solid rgba(250,247,242,.18); border-radius:28px; padding:34px 30px; }
.formcard label { display:block; font-size:14.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cream); font-weight:700; margin:16px 0 6px; }
.formcard input, .formcard textarea { width:100%; background:rgba(250,247,242,.08); border:1px solid rgba(250,247,242,.25); border-radius:12px;
  padding:12px 14px; color:var(--cream); font-family:inherit; font-size:15px; transition:border-color .25s; }
.formcard input:focus, .formcard textarea:focus { outline:none; border-color:var(--coral); }
.formcard textarea { min-height:110px; resize:vertical; }

/* footer */
footer { background:var(--teal-deep); color:rgba(250,247,242,.8); padding:48px 7vw 38px; text-align:center; }
.fbrand { font-weight:800; font-size:21px; color:var(--cream); letter-spacing:.5px; }
.fsmall { font-size:13px; margin-top:8px; }
.fsocial { display:flex; justify-content:center; gap:20px; margin:24px 0 12px; }
.fsocial a svg { width:20px; height:20px; fill:var(--cream); transition:all .25s; }
.fsocial a:hover svg { fill:var(--coral); transform:translateY(-3px); }
.weave-bg { position:relative; }
.weave-bg > .rvl, .weave-bg > .jgrid { position:relative; z-index:2; }
.weave-drift { position:absolute; top:-70px; left:-70px; right:-70px; bottom:-70px; z-index:1; pointer-events:none; animation:wdrift 14s linear infinite; }
@keyframes wdrift { 0%{transform:translate(0,0);} 100%{transform:translate(-64px,-64px);} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }