/* ============================================================
   Vikash Karuna — Personal Brand Site
   System: warm sand + terracotta · technical mono accents
   ============================================================ */

:root{
  /* palette */
  --paper:    #F4EEE2;   /* warm sand canvas */
  --paper-2:  #ECE3D3;   /* deeper sand, alt sections */
  --surface:  #FBF8F1;   /* card surface */
  --ink:      #241E18;   /* espresso near-black */
  --ink-2:    #5C5246;   /* muted text */
  --ink-3:    #8A7F70;   /* faint / meta */
  --line:     rgba(36,30,24,.14);
  --line-2:   rgba(36,30,24,.08);
  --terra:    #AF4F2E;   /* terracotta accent */
  --terra-d:  #8E3D20;   /* darker terracotta */
  --terra-t:  rgba(175,79,46,.10);
  --terra-light: #E0926F; /* light accent on dark surfaces */

  /* type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* metrics */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--terra); color:var(--paper); }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,128px); position:relative; }
.section--alt{ background:var(--paper-2); }
.divider{ height:1px; background:var(--line); border:0; }

/* ---------- eyebrow / kicker ---------- */
.kicker{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terra);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.kicker::before{
  content:"";
  width:26px; height:1.5px;
  background:var(--terra);
  display:inline-block;
}
.kicker--plain::before{ display:none; }

/* ---------- headings ---------- */
.h-sec{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin-top:18px;
  max-width:18ch;
  text-wrap:balance;
}
.lead{
  font-size:clamp(17px,1.6vw,20px);
  color:var(--ink-2);
  max-width:62ch;
  margin-top:22px;
  line-height:1.7;
  text-wrap:pretty;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); }
.nav__in{
  max-width:var(--maxw); margin:0 auto;
  padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; letter-spacing:-.01em; }
.brand__mk{
  width:34px; height:34px; border-radius:7px;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:-.02em;
}
.brand__name{ font-size:17px; }
.brand__name small{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:400; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink-2); transition:color .2s; position:relative; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--terra); transition:width .25s; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.03em;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:8px; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:transform .15s, background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); background:var(--terra); border-color:var(--terra); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.btn--terra{ background:var(--terra); border-color:var(--terra); }
.btn--terra:hover{ background:var(--terra-d); border-color:var(--terra-d); }
.btn svg{ width:15px; height:15px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(48px,7vw,92px); padding-bottom:clamp(40px,5vw,64px); }
.hero__grid{
  display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero__loc{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px; }
.hero__loc .dot{ width:7px; height:7px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px var(--terra-t); }
.hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(44px,7.6vw,92px); line-height:.95; letter-spacing:-.035em;
}
.hero h1 .ln2{ color:var(--terra); }
.hero__role{
  font-family:var(--mono); font-size:clamp(13px,1.5vw,15.5px);
  letter-spacing:.04em; color:var(--ink-2); margin-top:26px;
  display:flex; flex-wrap:wrap; gap:8px 0; align-items:center;
}
.hero__role span{ white-space:nowrap; }
.hero__role i{ color:var(--terra); margin:0 14px; font-style:normal; }
.hero__desc{ font-size:clamp(16px,1.5vw,18.5px); color:var(--ink-2); max-width:54ch; margin-top:26px; line-height:1.7; text-wrap:pretty; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* hero entrance stagger + cursor parallax */
.hero__intro{ transform:translate(var(--mx,0px), var(--my,0px)); transition:transform .3s ease-out; }
.hero__intro > *{ animation:heroRise .85s cubic-bezier(.2,.7,.2,1) both; }
.hero__intro > *:nth-child(1){ animation-delay:.05s; }
.hero__intro > *:nth-child(2){ animation-delay:.14s; }
.hero__intro > *:nth-child(3){ animation-delay:.23s; }
.hero__intro > *:nth-child(4){ animation-delay:.32s; }
.hero__intro > *:nth-child(5){ animation-delay:.41s; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

.hero__photo{ position:relative; will-change:transform; }
.hero__photo-frame{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:690/940; background:var(--paper-2);
  box-shadow:0 30px 60px -28px rgba(36,30,24,.5);
  --ph:1; --lift:0px; --rx:0deg; --ry:0deg;
  transform:translateY(var(--lift)) perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1);
  animation:frameWipe 1.15s cubic-bezier(.2,.7,.2,1) .12s both;
}
.hero__photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  transform:scale(calc(var(--pz,1) * var(--ph,1)));
  transform-origin:center 30%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.hero__photo-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 32%, rgba(255,242,228,.20) 48%, transparent 62%);
  transform:translateX(-130%);
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.hero__photo:hover .hero__photo-frame{
  --lift:-7px;
  box-shadow:0 48px 90px -30px rgba(36,30,24,.62);
  --ph:1.05;
}
.hero__photo:hover .hero__photo-frame::after{ transform:translateX(130%); }
.hero__photo:hover .hero__deco{ transform:translate(-4px,-4px); }
.hero__photo:hover .hero__tag{ transform:translateY(-3px); }
@keyframes frameWipe{
  from{ clip-path:inset(8% 8% 100% 8%); opacity:.4; }
  to{ clip-path:inset(0 0 0 0); opacity:1; }
}
.hero__tag{
  position:absolute; left:-14px; bottom:26px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:13px 16px; box-shadow:0 14px 30px -16px rgba(36,30,24,.4);
  z-index:3; transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero__tag b{ font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; }
.hero__tag small{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.hero__deco{ position:absolute; inset:-12px auto auto -12px; width:56px; height:56px; border-top:2px solid var(--terra); border-left:2px solid var(--terra); border-radius:14px 0 0 0; z-index:3; transition:transform .5s cubic-bezier(.2,.7,.2,1); }

/* ============================================================
   METRICS BAND
   ============================================================ */
.metrics{ background:transparent; color:var(--paper); padding-block:clamp(20px,4vw,48px); padding-inline:var(--gut); }
.metrics__in{ max-width:var(--maxw); margin:0 auto; background:var(--ink); border-radius:16px; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.metric{ padding:clamp(28px,3.4vw,46px) clamp(22px,2.6vw,40px); border-right:1px solid rgba(244,238,226,.13); transition:background .35s ease; position:relative; }
.js .metric{ opacity:0; transform:translateY(20px); }
.metric.in{ animation:metricRise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0s); }
.metric:last-child{ border-right:0; }
.metric:hover{ background:rgba(244,238,226,.04); }
.metric b{ font-family:var(--display); font-weight:600; font-size:clamp(30px,3.6vw,44px); letter-spacing:-.02em; display:flex; align-items:baseline; gap:1px; transition:transform .4s cubic-bezier(.2,.7,.2,1), color .35s ease; transform-origin:left center; }
.metric:hover b{ transform:scale(1.07); color:var(--terra-light); }
.metric:hover .u{ color:var(--paper); }
@keyframes metricRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
.metric .u{ font-size:.5em; color:var(--terra-light); font-weight:500; transform:translateY(-.15em); white-space:nowrap; }
.metric .accent{ color:var(--terra-light); }
.metric span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(244,238,226,.62); margin-top:10px; line-height:1.5; }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,90px); align-items:start; }
.about__aside{ position:sticky; top:96px; }
.about__quote{
  font-family:var(--display); font-weight:500;
  font-size:clamp(22px,2.5vw,30px); line-height:1.3; letter-spacing:-.015em;
  text-wrap:balance;
}
.about__quote .mark{ color:var(--terra); }
.about__sig{ margin-top:28px; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; }
.about__body p{ color:var(--ink-2); margin-bottom:20px; font-size:clamp(16px,1.5vw,18px); line-height:1.75; }
.about__body p strong{ color:var(--ink); font-weight:600; }
.about__pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.pill{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; padding:7px 13px; border:1px solid var(--line); border-radius:100px; color:var(--ink-2); background:var(--surface); }

/* ============================================================
   EXPERIENCE (timeline)
   ============================================================ */
.exp__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:54px; }
.timeline{ display:grid; gap:0; }
.job{
  display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,56px);
  padding:38px 0; border-top:1px solid var(--line); position:relative;
}
.job:last-child{ border-bottom:1px solid var(--line); }
.job__when{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-3); }
.job__when b{ display:block; color:var(--terra); font-weight:500; margin-bottom:6px; font-size:12px; letter-spacing:.13em; }
.job__role{ font-family:var(--display); font-weight:600; font-size:clamp(20px,2.3vw,27px); letter-spacing:-.015em; line-height:1.15; }
.job__co{ font-family:var(--mono); font-size:13px; color:var(--ink-2); margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.job__co .badge{ color:var(--terra); }
.job__tags{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); margin-top:14px; line-height:1.7; }
.job__points{ list-style:none; margin-top:20px; display:grid; gap:13px; }
.job__points li{ position:relative; padding-left:26px; color:var(--ink-2); font-size:15.5px; line-height:1.6; }
.job__points li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--terra); transform:rotate(45deg); }
.job__points li b{ color:var(--ink); font-weight:600; }
.job__more{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); margin-top:18px; line-height:1.7; }

/* ============================================================
   INITIATIVES / PROJECTS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:54px; }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(36,30,24,.45); border-color:var(--terra); }
.card__no{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--terra); }
.card__t{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2vw,24px); letter-spacing:-.015em; line-height:1.18; }
.card__d{ color:var(--ink-2); font-size:15.5px; line-height:1.62; }
.card__stats{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-2); }
.card__stat b{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--terra); letter-spacing:-.02em; }
.card__stat span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }

/* ============================================================
   EXPERTISE
   ============================================================ */
.exp2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); margin-top:54px; }
.comp{ columns: 1; }
.comp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:8px; }
.comp__item{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-2); font-size:15px; line-height:1.4; padding:7px 0; border-bottom:1px solid var(--line-2); }
.comp__item svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--terra); }
.dom{ display:grid; gap:16px; margin-top:8px; }
.dom__row{ padding:16px 0; border-bottom:1px solid var(--line); }
.dom__row:first-child{ border-top:1px solid var(--line); }
.dom__k{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:500; margin-bottom:8px; }
.dom__v{ font-size:14px; color:var(--ink-2); line-height:1.6; }
.subhead{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.01em; margin-bottom:14px; }

/* ============================================================
   CREDENTIALS
   ============================================================ */
.creds__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; }
.cred{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px 20px; text-align:left; }
.cred b{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,38px); letter-spacing:-.02em; color:var(--terra); display:block; }
.cred span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); display:block; margin-top:8px; line-height:1.5; }
.cred-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chip{ font-family:var(--mono); font-size:12.5px; padding:9px 15px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.chip svg{ width:13px; height:13px; color:var(--terra); }

/* ============================================================
   SPEAKING / RECOGNITION
   ============================================================ */
.speak__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); margin-top:50px; align-items:start; }
.feature-list{ display:grid; gap:0; }
.feature-list .fl{ padding:20px 0; border-top:1px solid var(--line); display:flex; gap:18px; align-items:flex-start; }
.feature-list .fl:last-child{ border-bottom:1px solid var(--line); }
.fl__ic{ width:38px; height:38px; flex:none; border-radius:9px; background:var(--terra-t); display:grid; place-items:center; color:var(--terra); }
.fl__ic svg{ width:18px; height:18px; }
.fl__t{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.fl__d{ font-size:14.5px; color:var(--ink-2); margin-top:4px; line-height:1.55; }
.award{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); }
.award:last-child{ border-bottom:1px solid var(--line); }
.award__y{ font-family:var(--mono); font-size:12px; color:var(--terra); flex:none; padding-top:2px; }
.award__t{ font-size:15.5px; color:var(--ink); font-weight:500; }
.award__o{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:3px; }

/* ============================================================
   EDUCATION
   ============================================================ */
.edu{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.edu__card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:30px 26px; }
.edu__deg{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.01em; line-height:1.2; }
.edu__field{ color:var(--ink-2); font-size:15px; margin-top:10px; line-height:1.55; }
.edu__inst{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--terra); margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); }
.edu__inst span{ display:block; color:var(--ink-3); margin-top:3px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:50px; }
.quote{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:clamp(28px,3vw,40px); position:relative; }
.quote__mk{ font-family:var(--display); font-size:64px; line-height:.6; color:var(--terra); opacity:.5; }
.quote__t{ font-size:17.5px; line-height:1.6; color:var(--ink); margin-top:10px; font-weight:400; text-wrap:pretty; }
.quote__by{ display:flex; align-items:center; gap:13px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line-2); }
.quote__av{ width:42px; height:42px; border-radius:50%; background:var(--terra-t); color:var(--terra); display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:14px; flex:none; }
.quote__nm{ font-weight:600; font-size:15px; }
.quote__rl{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.03em; margin-top:2px; }
.note{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:24px; padding:14px 16px; border:1px dashed var(--line); border-radius:9px; background:var(--terra-t); }

/* references-on-request */
.refs{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(30px,5vw,72px); align-items:center; margin-top:50px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(30px,4vw,52px); }
.refs__lead{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2.3vw,28px); line-height:1.35; letter-spacing:-.015em; text-wrap:pretty; }
.refs__stat{ display:grid; gap:0; }
.refs__stat-row{ display:flex; align-items:baseline; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.refs__stat-row:first-child{ border-top:0; }
.refs__stat-row b{ font-family:var(--display); font-weight:600; font-size:clamp(24px,2.6vw,32px); color:var(--terra); letter-spacing:-.02em; min-width:84px; }
.refs__stat-row span{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-2); line-height:1.5; }
@media (max-width:760px){ .refs{ grid-template-columns:1fr; gap:28px; } }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{ background:var(--ink); color:var(--paper); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start; }
.contact .kicker{ color:var(--terra-light); }
.contact .kicker::before{ background:var(--terra-light); }
.contact h2{ font-family:var(--display); font-weight:600; font-size:clamp(32px,4.4vw,56px); line-height:1.02; letter-spacing:-.025em; margin-top:18px; }
.contact__lead{ color:rgba(244,238,226,.72); font-size:18px; line-height:1.7; margin-top:22px; max-width:42ch; }
.contact__direct{ margin-top:36px; display:grid; gap:2px; }
.contact__direct a{ display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid rgba(244,238,226,.14); font-family:var(--mono); font-size:14.5px; transition:padding .2s, color .2s; }
.contact__direct a:last-child{ border-bottom:1px solid rgba(244,238,226,.14); }
.contact__direct a:hover{ padding-left:10px; color:var(--terra-light); }
.contact__direct a svg{ width:17px; height:17px; color:var(--terra-light); }
.contact__direct a .arr{ margin-left:auto; opacity:.4; }

.form{ display:grid; gap:16px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,238,226,.6); }
.field input, .field textarea{
  background:rgba(244,238,226,.06); border:1px solid rgba(244,238,226,.16);
  border-radius:9px; padding:13px 15px; color:var(--paper);
  font-family:var(--body); font-size:15.5px; transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--terra-light); background:rgba(244,238,226,.1); }
.field textarea{ resize:vertical; min-height:120px; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .btn--terra{ justify-content:center; padding:14px; margin-top:4px; }
.form__msg{ font-family:var(--mono); font-size:13px; color:var(--terra-light); min-height:18px; }

.footer{ background:var(--ink); color:rgba(244,238,226,.6); border-top:1px solid rgba(244,238,226,.12); }
.footer__in{ max-width:var(--maxw); margin:0 auto; padding:34px var(--gut); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; }
.footer__in a:hover{ color:var(--terra-light); }
.footer__soc{ display:flex; gap:22px; }

/* ---------- reveal animation ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hero__photo-frame{ animation:none; }
  .hero__intro > *{ animation:none; }
  .hero__intro{ transform:none !important; }
  .hero__photo, .hero__photo-frame, .hero__photo-frame img, .hero__photo-frame::after,
  .hero__tag, .hero__deco, .reveal{ transition:none !important; }
  .metric{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__photo{ max-width:420px; }
  .about__grid{ grid-template-columns:1fr; }
  .about__aside{ position:static; }
  .exp2{ grid-template-columns:1fr; }
  .speak__grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  body{ font-size:16px; }
  .nav__links{ display:none; }
  .menu-btn{ display:grid; place-items:center; }
  .metrics__in{ grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(2n){ border-right:0; }
  .metric:not(:nth-last-child(-n+1)){ border-bottom:1px solid rgba(244,238,226,.13); }
  .cards{ grid-template-columns:1fr; }
  .creds__grid{ grid-template-columns:repeat(2,1fr); }
  .comp__grid{ grid-template-columns:1fr; }
  .edu{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
  .job{ grid-template-columns:1fr; gap:10px; }
  .form .row2{ grid-template-columns:1fr; }
  .footer__in{ flex-direction:column; text-align:center; }
}
@media (max-width: 460px){
  .metrics__in{ grid-template-columns:1fr; }
  .metric{ border-right:0; border-bottom:1px solid rgba(244,238,226,.13); }
  .metric:last-child{ border-bottom:0; }
  .creds__grid{ grid-template-columns:1fr; }
}

/* ---------- mobile menu ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:80; background:var(--paper); display:none; flex-direction:column; padding:24px var(--gut); }
.mobile-menu.open{ display:flex; }
.mobile-menu__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.mobile-menu a{ font-family:var(--display); font-weight:500; font-size:30px; padding:14px 0; border-bottom:1px solid var(--line); letter-spacing:-.01em; }
.mobile-menu a .n{ font-family:var(--mono); font-size:13px; color:var(--terra); margin-right:16px; }

/* ============================================================
   VISION / FORWARD MANDATE (dark band)
   ============================================================ */
.vision{ background:var(--ink); color:var(--paper); }
.kicker--light{ color:var(--terra-light); }
.kicker--light::before{ background:var(--terra-light); }
.lead--light{ color:rgba(244,238,226,.7); }
.vision__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
.vis{
  border:1px solid rgba(244,238,226,.14); border-radius:14px;
  padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:14px;
  background:rgba(244,238,226,.03);
  transition:transform .25s, border-color .25s, background .25s;
}
.vis:hover{ transform:translateY(-4px); border-color:var(--terra-light); background:rgba(244,238,226,.06); }
.vis__no{ font-family:var(--mono); font-size:13px; color:var(--terra-light); letter-spacing:.16em; }
.vis__t{ font-family:var(--display); font-weight:600; font-size:clamp(19px,1.9vw,23px); letter-spacing:-.015em; line-height:1.2; }
.vis__d{ color:rgba(244,238,226,.72); font-size:15px; line-height:1.65; }
.vis__proof{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(244,238,226,.12); font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:rgba(244,238,226,.55); line-height:1.6; }

/* ============================================================
   EXPERIENCE — compact executive timeline
   ============================================================ */
.xp-list{ display:grid; }
.xp{
  display:grid; grid-template-columns:215px 1fr 235px; gap:clamp(18px,3vw,44px);
  align-items:start; padding:30px 0; border-top:1px solid var(--line);
}
.xp:last-child{ border-bottom:1px solid var(--line); }
.xp__when{ font-family:var(--mono); font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.xp__when b{ display:block; color:var(--terra); font-weight:500; font-size:12px; letter-spacing:.12em; margin-bottom:5px; }
.xp__role{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2vw,24px); letter-spacing:-.015em; line-height:1.15; }
.xp__line{ color:var(--ink-2); font-size:15px; line-height:1.6; margin-top:9px; max-width:58ch; text-wrap:pretty; }
.xp__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.xp__chips span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  padding:7px 11px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink-2); white-space:nowrap;
}
.xp__chips span b{ color:var(--terra); font-weight:600; }
.xp__earlier{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); margin-top:22px; line-height:1.7; }

/* ============================================================
   AI SHOWCASE — auto-advancing carousel
   ============================================================ */
.ai-show{
  margin-top:54px; background:var(--ink); color:var(--paper);
  border-radius:18px; overflow:hidden; position:relative;
}
.ai-show__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px clamp(24px,3.4vw,44px); border-bottom:1px solid rgba(244,238,226,.12);
}
.ai-show__label{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--terra-light); display:flex; align-items:center; gap:10px; }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--terra-light); flex:none; animation:aiPulse 2.2s ease-in-out infinite; }
@keyframes aiPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,146,111,.5);} 55%{ box-shadow:0 0 0 7px rgba(224,146,111,0);} }
.ai-show__nav{ display:flex; gap:8px; }
.ai-btn{
  width:38px; height:38px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(244,238,226,.2); background:transparent; color:inherit;
  display:grid; place-items:center; transition:background .2s, border-color .2s, transform .15s;
}
.ai-btn:hover{ background:rgba(244,238,226,.1); border-color:rgba(244,238,226,.4); transform:translateY(-1px); }
.ai-btn svg{ width:17px; height:17px; }
.media__nav .ai-btn{ border-color:var(--line); color:var(--ink); }
.media__nav .ai-btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.ai-stage{ position:relative; min-height:340px; }
.ai-slide{
  position:absolute; inset:0; padding:clamp(28px,3.6vw,48px) clamp(24px,3.4vw,44px);
  display:none; flex-direction:column; gap:22px;
}
.ai-slide.active{ display:flex; }
.ai-slide.from-left.active{ animation:aiEnter .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes aiEnter{ from{ opacity:0; transform:translateX(-46px); } to{ opacity:1; transform:translateX(0); } }
.ai-slide__meta{ display:flex; align-items:center; gap:16px; }
.ai-no{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; color:rgba(244,238,226,.5); }
.ai-status{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; border:1px solid transparent;
}
.s-live{ color:#8FD6A8; border-color:rgba(143,214,168,.4); background:rgba(143,214,168,.1); }
.s-build{ color:var(--terra-light); border-color:rgba(224,146,111,.4); background:rgba(224,146,111,.1); }
.s-up{ color:rgba(244,238,226,.65); border-color:rgba(244,238,226,.25); background:rgba(244,238,226,.05); }
.ai-slide__grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(24px,4vw,64px); align-items:start; }
.ai-slide__t{
  font-family:var(--display); font-weight:600;
  font-size:clamp(26px,3.4vw,44px); line-height:1.05; letter-spacing:-.025em; text-wrap:balance;
}
.ai-slide__d{ color:rgba(244,238,226,.72); font-size:clamp(15px,1.5vw,17.5px); line-height:1.7; margin-top:16px; max-width:52ch; text-wrap:pretty; transition:color .3s; }
.ai-show.paused .ai-slide__d{ color:rgba(244,238,226,.92); }
.ai-slide__link{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--terra-light); border-bottom:1px solid rgba(224,146,111,.4); padding-bottom:2px; transition:color .2s, border-color .2s; }
.ai-slide__link:hover{ color:var(--paper); border-color:var(--paper); }
.ai-slide__caps{ display:grid; gap:0; }
.ai-caps__k{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,238,226,.45); padding-bottom:12px; }
.ai-cap{
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-top:1px solid rgba(244,238,226,.12);
  font-size:15px; color:rgba(244,238,226,.85);
}
.ai-slide.active .ai-cap{ animation:aiCapIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(.25s + var(--ci) * .12s); }
@keyframes aiCapIn{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:translateX(0); } }
.ai-cap i{ width:7px; height:7px; flex:none; border-radius:2px; background:var(--terra-light); transform:rotate(45deg); }
.ai-dots{ display:flex; gap:10px; padding:0 clamp(24px,3.4vw,44px) 26px; }
.ai-dot{
  position:relative; height:4px; flex:1; max-width:90px; border:0; border-radius:100px;
  background:rgba(244,238,226,.18); cursor:pointer; overflow:hidden; padding:0;
  transition:background .2s;
}
.ai-dot:hover{ background:rgba(244,238,226,.35); }
.ai-dot i{ position:absolute; inset:0; width:0; background:var(--terra-light); border-radius:100px; display:block; }
@keyframes aiFill{ from{ width:0; } to{ width:100%; } }
.ai-dot.on i{ width:0; }
.ai-show.paused .ai-dot.on i{ background:rgba(224,146,111,.55); }

.prog-head{ display:flex; align-items:baseline; gap:18px; margin-top:64px; flex-wrap:wrap; }
.prog-head__note{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cards{ margin-top:24px; }
.card--link{ cursor:pointer; }
.card__no{ display:flex; align-items:center; justify-content:space-between; }
.card__arr{ font-style:normal; color:var(--ink-3); transition:color .2s, transform .2s; }
.card--link:hover .card__arr{ color:var(--terra); transform:translate(2px,-2px); }

/* ============================================================
   CREDENTIAL / CHIP LINKS
   ============================================================ */
.cred--link{ position:relative; transition:transform .2s, border-color .2s, box-shadow .2s; }
.cred--link:hover{ transform:translateY(-3px); border-color:var(--terra); box-shadow:0 16px 32px -22px rgba(36,30,24,.4); }
.cred__arr{ position:absolute; top:14px; right:16px; font-style:normal; font-family:var(--mono); font-size:13px; color:var(--ink-3); transition:color .2s, transform .2s; }
.cred--link:hover .cred__arr{ color:var(--terra); transform:translate(2px,-2px); }
.chip--link{ transition:border-color .2s, color .2s, transform .15s; }
.chip--link i{ font-style:normal; color:var(--ink-3); font-size:11px; transition:color .2s; }
.chip--link:hover{ border-color:var(--terra); color:var(--ink); transform:translateY(-1px); }
.chip--link:hover i{ color:var(--terra); }

/* ============================================================
   MEDIA RAIL
   ============================================================ */
.media__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.media__nav{ display:flex; gap:8px; }
.media-rail-wrap{ margin-top:46px; }
.media-rail{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:6px var(--gut) 22px;
  padding-left:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.mcard{
  flex:0 0 290px; scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:12px; display:flex; flex-direction:column; gap:0;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.mcard:hover{ transform:translateY(-5px); border-color:var(--terra); box-shadow:0 24px 46px -30px rgba(36,30,24,.5); }
.mcard image-slot{ width:100%; height:330px; display:block; }
.mcard__cap{ display:flex; flex-direction:column; gap:6px; padding:14px 8px 8px; }
.mcard__tag{
  align-self:flex-start; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terra); border:1px solid rgba(175,79,46,.35); background:var(--terra-t);
  padding:3px 9px; border-radius:100px;
}
.mcard--award .mcard__tag{ color:var(--paper); background:var(--terra); border-color:var(--terra); }
.mcard__txt{ font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.01em; margin-top:4px; }
.mcard__link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--ink-2); margin-top:4px; transition:color .2s; }
.mcard__link i{ font-style:normal; }
.mcard__link:hover{ color:var(--terra); }
.mcard__link--off{ color:var(--ink-3); opacity:.7; cursor:default; }

@media (prefers-reduced-motion: reduce){
  .ai-slide.from-left.active, .ai-slide.active .ai-cap{ animation:none !important; }
  .pulse{ animation:none; }
}
@media (max-width: 1000px){
  .vision__grid{ grid-template-columns:1fr; }
  .xp{ grid-template-columns:180px 1fr; }
  .xp__chips{ grid-column:2; justify-content:flex-start; margin-top:4px; }
  .ai-slide__grid{ grid-template-columns:1fr; gap:26px; }
  .ai-stage{ min-height:520px; }
}
@media (max-width: 760px){
  .xp{ grid-template-columns:1fr; gap:8px; }
  .xp__chips{ grid-column:auto; }
  .ai-stage{ min-height:600px; }
  .mcard{ flex-basis:250px; }
  .mcard image-slot{ height:290px; }
}