:root{
  --night:#110A2C; --night-2:#1C1248; --night-3:#2C1A62;
  --joy:#FFD84A; --gold:#FFE7B0; --ember:#FF8A3D;
  --star:#FFF3DC; --lilac:#D9C2FF; --muted:#B5ABD6; --dim:#8E84B5;
  --line:rgba(255,243,220,.12); --glass:rgba(255,255,255,.045);
  --serif:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --label:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{background:var(--night);color:var(--star);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
main,header,section,footer{position:relative;z-index:2}

/* cursor light: a fixed canvas that lightens what sits under it */
#light{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen}

/* ---------- nav ---------- */
nav{position:absolute;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.wm{position:relative;font-family:var(--body);font-weight:500;font-size:32px;letter-spacing:-.5px;text-decoration:none;
  text-shadow:0 0 16px rgba(255,230,180,.35);padding-right:14px}
.wm svg{position:absolute;right:-6px;top:-6px;width:17px;height:17px;filter:drop-shadow(0 0 6px rgba(255,230,170,.9))}
.links{display:flex;gap:38px;list-style:none;align-items:center}
.links > li{position:relative}
.links a,.links button{color:var(--muted);text-decoration:none;font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.links a:hover,.links button:hover,.links button[aria-expanded="true"]{color:var(--star)}
.chev{width:9px;height:9px;transition:transform .2s}
button[aria-expanded="true"] > .chev{transform:rotate(180deg)}
.menu{position:absolute;right:-14px;top:calc(100% + 16px);min-width:230px;padding:8px;border-radius:16px;list-style:none;
  background:rgba(28,18,72,.96);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:.18s}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.menu a{display:block;padding:12px 14px;border-radius:10px;letter-spacing:.02em;text-transform:none;font-family:var(--body);font-size:14px;color:var(--star)}
.menu a small{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.menu a:hover{background:rgba(255,255,255,.06)}

/* ---------- headings ---------- */
/* Fonts: Fraunces only for big display headings (h1, section h2). Everything else is Inter. */
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
h3,h4{font-family:var(--body);font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(40px,5.6vw,70px);line-height:1.06;margin:6px 0 20px}
h1 .glow{color:var(--gold);text-shadow:0 0 30px rgba(255,220,150,.35)}
h2{font-size:clamp(32px,4vw,50px);line-height:1.1;margin-bottom:18px}
.kicker{font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--joy);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.kicker svg{width:12px;height:12px;filter:drop-shadow(0 0 5px rgba(255,220,140,.9))}
.lead{color:var(--muted);font-size:18px;line-height:1.65;max-width:640px}
.draft{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:6px;font-family:var(--label);font-size:10.5px;letter-spacing:.1em;
  color:#FFB58A;border:1px dashed rgba(255,138,61,.5);vertical-align:middle}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:max(100vh,720px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:120px 0 60px;
  background:
    radial-gradient(60% 45% at 50% 22%, rgba(255,214,140,.09) 0%, transparent 70%),
    radial-gradient(90% 70% at 80% 95%, rgba(120,60,180,.32) 0%, transparent 70%),
    radial-gradient(70% 60% at 10% 75%, rgba(70,40,150,.32) 0%, transparent 70%),
    linear-gradient(180deg,var(--night) 0%,var(--night-2) 70%,var(--night-3) 100%)}
.hero.short{min-height:auto;padding:170px 0 90px}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;animation:tw 5s ease-in-out infinite}
.stars i.big{width:3px;height:3px;background:var(--gold);box-shadow:0 0 6px var(--gold)}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.85}}

.northstar{position:relative;z-index:3;width:150px;height:150px;margin:0 auto 4px}
.northstar .halo{position:absolute;inset:-40px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,232,180,.42) 0%, rgba(255,200,120,.16) 30%, rgba(180,120,255,.07) 55%, transparent 70%);
  animation:pulse 6s ease-in-out infinite}
.northstar .ring{position:absolute;inset:38px;border-radius:50%;border:1px solid rgba(255,232,190,.16)}
.northstar .ray{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.northstar .ray.h{width:420px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,240,210,.5),transparent)}
.northstar .ray.v{width:1px;height:280px;background:linear-gradient(180deg,transparent,rgba(255,240,210,.5),transparent)}
.northstar svg{position:absolute;inset:27px;width:96px;height:96px;
  filter:drop-shadow(0 0 8px rgba(255,240,200,.95)) drop-shadow(0 0 24px rgba(255,200,110,.6));animation:glint 6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes glint{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.04) rotate(2deg)}}

.hero .copy{position:relative;z-index:4;text-align:center;max-width:900px;margin:0 auto;padding:0 24px}
.hero .sub{color:var(--muted);font-size:clamp(16px,1.6vw,19px);line-height:1.6;max-width:700px;margin:0 auto}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(transparent,var(--night-2));pointer-events:none;z-index:1}

/* snippet accordion inside the first fold */
.snippet{position:relative;z-index:4;max-width:777px;width:calc(100% - 48px);margin:56px auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(rgba(255,243,220,.09) 1px, transparent 1.2px) 0 0/22px 22px}
.acc-head{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:28px 4px;background:none;border:0;color:inherit;text-align:left;cursor:pointer}
.acc-text{flex:1 1 auto;text-align:center;padding-left:34px}
.acc-label{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--star);display:block;margin-bottom:6px}
.acc-sub{display:block;font-family:var(--label);font-weight:500;font-size:19px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.acc-title{font-size:19px;line-height:1.5;color:var(--muted)}
.acc-title b{font-weight:500;color:var(--gold)}
.acc-head > .chev{width:14px;height:14px;margin-top:4px;color:var(--joy);flex:none;transition:transform .25s}
.acc-head[aria-expanded="true"] > .chev{transform:rotate(180deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-body > div{overflow:hidden}
.acc-head[aria-expanded="true"] + .acc-body{grid-template-rows:1fr}
.placeholder{margin:0 0 32px;min-height:400px;border-radius:22px;border:1.5px dashed rgba(255,231,176,.35);
  background:radial-gradient(60% 80% at 50% 50%, rgba(255,214,140,.08), transparent 70%), rgba(17,10,44,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px}
.placeholder .ph-tag{font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--joy)}
.placeholder h3{font-size:28px}
.placeholder p{color:var(--dim);max-width:460px;line-height:1.6}
.ph-grid{display:flex;gap:12px;margin-top:10px}
.ph-grid span{width:120px;height:64px;border-radius:12px;border:1px dashed rgba(255,243,220,.18)}
.ph-grid span:nth-child(1){border-color:rgba(255,216,74,.45)}
.ph-grid span:nth-child(2){border-color:rgba(255,138,61,.45)}
.ph-grid span:nth-child(3){border-color:rgba(217,194,255,.45)}

/* ---------- sections ---------- */
section.block{padding:120px 0}
.advisory{background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%)}
.cases,.prods,.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cases,.prods{margin-top:56px}
.card{position:relative;display:flex;flex-direction:column;padding:28px 26px 30px;border-radius:22px;background:var(--glass);border:1px solid var(--line);overflow:hidden;text-decoration:none;transition:transform .25s,border-color .25s}
a.card:hover{transform:translateY(-4px);border-color:rgba(255,231,176,.35)}
.case::before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--c,rgba(255,216,74,.22)),transparent 70%)}
.case .meta{font-family:var(--label);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:22px;line-height:1.7}
.card h3{font-size:23px;line-height:1.25;margin-bottom:12px}
.card p{color:var(--muted);font-size:15px;line-height:1.6;flex:1}
.case .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.case .tags span{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--lilac)}

/* second opinion */
.opinion{background:radial-gradient(40% 50% at 72% 60%, rgba(255,170,90,.08), transparent 70%),var(--night)}
section.block.opinion{padding-top:40px}
.op-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.op-copy h2{font-size:50px;line-height:1.06}
.op-chat{border-radius:28px;border:1px solid var(--line);background:rgba(28,18,72,.55);box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 60px rgba(255,170,90,.06);padding:28px}
.op-q{margin-left:auto;width:fit-content;max-width:85%;padding:14px 20px;border-radius:20px;background:rgba(255,231,176,.1);border:1px solid rgba(255,231,176,.3);color:var(--star);font-size:16px;line-height:1.5}
.op-a{margin-top:16px;max-width:88%;padding:20px 22px;border-radius:20px;border:1px solid var(--line);background:rgba(17,10,44,.5)}
.op-a p{color:var(--muted);font-size:15.5px;line-height:1.7}
.op-dots{display:flex;gap:8px;margin-bottom:12px}
.op-dots span,.op-btn .dot{width:12px;height:12px;border-radius:50%;flex:none}
.d1{background:radial-gradient(circle at 40% 35%,#FFF4C8,#FFC54A 60%,#FF9B2E)}
.d2{background:radial-gradient(circle at 40% 35%,#FFE0C2,#FF8A3D 60%,#E2552B)}
.d3{background:radial-gradient(circle at 40% 35%,#FFFFFF,#D9C2FF 60%,#9B7BF0)}
.op-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.op-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,243,220,.2);background:rgba(255,255,255,.04);color:var(--star);font-family:var(--label);font-weight:500;font-size:15px;text-decoration:none;transition:border-color .2s,background .2s}
.op-btn:hover{border-color:rgba(255,231,176,.5);background:rgba(255,231,176,.08)}
.op-logo{width:18px;height:18px;flex:none}
.op-dots img{width:14px;height:14px}
a.case .go{color:var(--gold)}

.products-sec{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%)}
.orb{width:46px;height:46px;border-radius:50%;margin-bottom:26px}
.orb.lantern{background:radial-gradient(circle at 40% 35%,#FFF4C8,#FFC54A 60%,#FF9B2E);box-shadow:0 0 26px rgba(255,190,70,.7)}
.orb.ember{background:radial-gradient(circle at 40% 35%,#FFE0C2,#FF8A3D 60%,#E2552B);box-shadow:0 0 26px rgba(255,120,50,.6)}
.orb.ron{background:radial-gradient(circle at 40% 35%,#FFFFFF,#D9C2FF 60%,#9B7BF0);box-shadow:0 0 26px rgba(200,170,255,.6)}
.prod h3{font-size:27px}
.prod .go{margin-top:24px;font-size:14px;color:var(--gold)}
.prod.dim .go{color:var(--dim)}
.case .go{margin-top:24px;font-size:14px;color:var(--dim)}
.card p.tagline{flex:none;font-size:18px;line-height:1.3;font-weight:500;color:var(--star);margin:-4px 0 12px}

/* skills page */
.skills-body{background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%);padding:40px 0 120px}
.cat{margin-top:70px}
.cat:first-child{margin-top:0}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.cat-head h2{font-family:var(--body);font-size:44px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--star);margin:0}
.cat-head span{color:var(--muted);font-size:15px}
.pack{padding:24px 24px 22px;border-radius:18px}
.pack .kw{flex:none;margin-bottom:14px;font-family:var(--label);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--joy)}
.pack h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.pack p{color:var(--dim);font-size:14px;line-height:1.55}
.pack .go{margin-top:16px;font-size:13.5px;color:var(--gold)}

footer{border-top:1px solid var(--line);padding:40px 0;color:var(--dim);font-size:13px;background:var(--night)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .wm{font-size:24px}


@media (max-width:900px){
  .cases,.prods,.packs{grid-template-columns:1fr 1fr}
  .op-grid{grid-template-columns:1fr;gap:40px}
  .cat-head h2{font-size:34px}
}
@media (max-width:680px){
  .links{gap:16px}
  .links a,.links button{font-size:10.5px;letter-spacing:.1em}
  .wm{font-size:26px}
  .menu{right:-8px}
  .cases,.prods,.packs{grid-template-columns:1fr}
  section.block{padding:112px 0 84px}
  .northstar{transform:scale(.85)}
  .acc-title{font-size:16.5px}
  .ph-grid span{width:80px}
  .snippet{margin-top:40px}
  .acc-sub{font-size:15px}
  .op-btns{grid-template-columns:1fr}
  .op-a,.op-q{max-width:100%}
  .op-copy h2{font-size:38px}
}