/* ==========================================================
   JV METHOD — LINKS
   Inter (display + body) / IBM Plex Mono (technical labels)
   ========================================================== */

:root{
  --field:#FBFAF6;
  --cream:#F4F1EA;
  --paper:#FFFFFF;
  --ink:#101418;
  --muted:#5C666E;
  --line:#E6E2D9;
  --line-2:#D3CEC2;
  --accent:#115F90;
  --accent-lo:rgba(17,95,144,.10);
  --accent-hi:#1B79B6;
  --deep:#0B2E45;

  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:600px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--field);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  min-height:100dvh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- ambient ---------- */
.glow{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 460px at 50% -8%, rgba(17,95,144,.13), transparent 62%),
    radial-gradient(560px 400px at 88% 24%, rgba(27,121,182,.07), transparent 60%),
    radial-gradient(600px 420px at 6% 72%, rgba(17,95,144,.055), transparent 60%);
}

.shell{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(30px,6vw,58px) clamp(18px,5vw,24px) 56px;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);
  animation:rise .8s var(--ease) forwards;
  animation-delay:calc(var(--i,0)*85ms + 90ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;animation:none}
  *{transition:none!important}
}

/* ---------- identity ---------- */
.id{display:flex;flex-direction:column;align-items:center;text-align:center}

.mark{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  color:var(--muted);margin-bottom:clamp(26px,5vw,38px);
  padding:7px 15px 7px 11px;border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  transition:border-color .3s ease,color .3s ease,transform .3s var(--ease);
  opacity:0;animation:rise .8s var(--ease) forwards
}
.mark svg{width:15px;height:15px;color:var(--accent);flex:none}
.mark:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}

.pfp{position:relative;width:132px;height:132px;margin-bottom:22px}
.pfp::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--accent),var(--accent-hi),rgba(17,95,144,.12),var(--accent));
  opacity:.5;
}
.pfp::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--field);
}
.pfp img{
  position:relative;z-index:1;width:100%;height:100%;
  border-radius:50%;object-fit:cover;object-position:50% 22%;
  box-shadow:0 22px 46px -26px rgba(11,46,69,.55);
}

h1{
  font-size:clamp(1.95rem,6vw,2.6rem);line-height:1.06;
  letter-spacing:-.035em;font-weight:800;
}
.handle{
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;
  color:var(--accent);margin-top:9px;
  border-bottom:1px solid var(--accent-lo);padding-bottom:2px;
  transition:border-color .3s ease
}
.handle:hover{border-color:var(--accent)}

/* ---------- socials ---------- */
.socials{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.socials a{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--paper);color:var(--ink);
  transition:transform .35s var(--ease),border-color .3s ease,background-color .3s ease,color .3s ease,box-shadow .35s ease;
}
.socials svg{width:19px;height:19px;fill:currentColor}
.socials a:hover{
  transform:translateY(-3px);
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 16px 26px -16px rgba(17,95,144,.75);
}

/* ---------- followers ---------- */
.followers{margin-top:26px;width:100%;display:flex;flex-direction:column;align-items:center}
.fol-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border:1px solid var(--line);border-radius:100px;
  background:var(--paper);font-size:13.5px;color:var(--muted);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease);
}
.fol-toggle strong{color:var(--ink);font-weight:700;font-size:15px;letter-spacing:-.01em}
.fol-toggle:hover{border-color:var(--line-2);transform:translateY(-1px);
  box-shadow:0 12px 22px -18px rgba(11,46,69,.45)}
.fol-toggle .chev{width:15px;height:15px;color:var(--muted);
  transition:transform .35s var(--ease)}
.fol-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.fol-panel{
  width:100%;margin-top:12px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.fol-panel[hidden]{display:none}
.fol-cell{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:12px 6px;text-align:center;
  opacity:0;transform:translateY(8px);
  animation:rise .5s var(--ease) forwards;
  animation-delay:calc(var(--j,0)*55ms);
}
.fol-cell svg{width:16px;height:16px;margin:0 auto 7px;fill:var(--accent);opacity:.85}
.fol-cell b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.fol-cell span{display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;color:var(--muted);margin-top:3px;text-transform:uppercase}

/* ---------- blocks ---------- */
.block{margin-top:clamp(34px,6vw,46px)}
.label{
  font-family:var(--mono);font-size:10px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);margin-bottom:13px;padding-left:2px;
  display:flex;align-items:center;gap:9px;
}
.label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- video ---------- */
.video{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--deep);
  aspect-ratio:16/9;
  box-shadow:0 34px 64px -44px rgba(11,46,69,.6);
}
.video-play{
  position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;
}
.video-play img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),opacity .4s ease;
}
.video-play::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,24,36,.72),rgba(6,24,36,.06) 55%);
  transition:opacity .4s ease;
}
.video-play:hover img{transform:scale(1.045)}
.video-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;z-index:2;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  box-shadow:0 16px 34px -12px rgba(17,95,144,.8);
  transition:transform .4s var(--ease),background-color .3s ease;
}
.video-btn svg{width:26px;height:26px;margin-left:3px}
.video-play:hover .video-btn{transform:translate(-50%,-50%) scale(1.09);background:var(--accent-hi)}
.video-cap{
  position:absolute;left:18px;bottom:15px;z-index:2;color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* ---------- link cards ---------- */
.link-card{
  display:block;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;overflow:hidden;position:relative;
  transition:border-color .35s ease,transform .4s var(--ease),box-shadow .4s ease;
}
.link-card::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;
  opacity:0;transform:scaleY(.4);
  transition:opacity .35s ease,transform .35s var(--ease);
}
.link-card:hover{
  border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 22px 40px -32px rgba(11,46,69,.5);
}
.link-card:hover::before{opacity:1;transform:scaleY(1)}

.link-row{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 16px;text-align:left;
}
.ic{
  width:44px;height:44px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  transition:transform .4s var(--ease);
}
.ic svg{width:22px;height:22px}
.link-card:hover .ic{transform:scale(1.06)}
.ic-accent{background:var(--accent-lo);color:var(--accent)}
.ic-brand{background:var(--accent);color:#fff}
.ic-brand svg{width:24px;height:24px}
.ic-yt{background:rgba(255,0,0,.09);color:#FF0000}
.ic-mail{background:var(--cream);color:var(--ink)}

.txt{flex:1;min-width:0}
.txt .t{display:block;font-weight:700;font-size:15.5px;letter-spacing:-.015em;line-height:1.3}
.txt .s{display:block;color:var(--muted);font-size:12.8px;line-height:1.42;margin-top:2px}

.cta{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:100px;
  padding:7px 11px;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.cta svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.link-card:hover .cta{background:var(--accent);border-color:var(--accent);color:#fff}
.link-card:hover .arr{transform:translateX(2px)}
.link-row[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ---------- calendly ---------- */
.cal-panel{border-top:1px solid var(--line);background:var(--field)}
.cal-panel[hidden]{display:none}
.cal-embed{min-width:280px;height:760px;position:relative}
.cal-embed::after{
  content:"Loading calendar…";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);pointer-events:none;
}
.cal-embed.ready::after{display:none}
.cal-embed iframe{position:relative;z-index:1}

/* ---------- footer ---------- */
.foot{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);flex-wrap:wrap;
}
.foot a{transition:color .3s ease}
.foot a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:420px){
  .pfp{width:112px;height:112px}
  .socials a{width:43px;height:43px}
  .link-row{padding:13px 13px;gap:11px}
  .ic{width:40px;height:40px;border-radius:10px}
  .txt .t{font-size:14.5px}
  .txt .s{font-size:12px}
  .cta{padding:8px;border-radius:50%}
  .cta-t{display:none}
  .cta svg{width:14px;height:14px}
  .fol-panel{grid-template-columns:repeat(2,1fr)}
  .cal-embed{height:700px}
}