/* ═══════════════════════════════════════════════════════════════
   amritasvenu.com — Deep Ocean
   Amrita S Venu · full-stack growth marketer

   One dark palette, layered. The page never uses pure black or a
   flat surface: five elevation steps (bg-deep → bg → surface →
   surface-2 → line) give the sections their rhythm, and the single
   ice-blue accent carries a four-step ramp so it reads as a system
   rather than a highlighter.

   Chosen deliberately against amber: eldhosepeter.com owns that, and
   these two sites must not read as one person's template. It also sits
   in the same family as the blue on Amrita's own LinkedIn banner.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* elevation, deepest → highest */
  --bg-deep:#0A1219;
  --bg:#0C151C;
  --surface:#121D26;
  --surface-2:#18242F;
  --line:#1D2A35;
  --line-2:#2A3A47;

  /* text, strongest → faintest. Every tier clears WCAG AA on its
     own background at the size it is actually used. */
  --txt:#E7EDF2;
  --txt-2:#AEC0CD;
  --mute:#8FA1B0;
  --faint:#7E909E;

  /* accent ramp */
  --acc:#38BDF8;
  --acc-2:#0EA5E9;
  --acc-deep:#0369A1;
  --acc-soft:rgba(56,189,248,.13);
  --acc-bd:rgba(56,189,248,.27);
  --on-acc:#04202E;

  --hairline:rgba(255,255,255,.10);
  --glow:rgba(56,189,248,.11);
  --shadow:0 18px 44px -22px rgba(0,0,0,.82);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.9);

  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* 8px spacing scale. --s6 is the section rhythm: two stacked
     sections read as one continuous page at 68px each, where the
     old 120px made every fold feel like a separate document. */
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:46px; --s6:62px; --s7:88px;
  --rad:14px;
  --nav-h:66px;

  /* Page measure. Every full-width container reads this — the recognition
     strip sits outside .wrap and would otherwise drift out of alignment the
     next time this changes. */
  --wrap:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
html,body{margin:0}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.06;letter-spacing:-.03em;font-weight:700}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:520px){.wrap{padding:0 20px}}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--on-acc);
  padding:12px 20px;font-weight:700;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ── reveal-on-scroll ─────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  /* Marquees must not creep: kill the transform animation outright and let
     the track wrap into a static list instead of scrolling forever. */
  .mq-track{animation:none!important;flex-wrap:wrap;width:auto!important;justify-content:center}
  .mq{-webkit-mask-image:none;mask-image:none}
}

/* ═══ navigation ══════════════════════════════════════════════ */
#nav{position:sticky;top:0;z-index:60;background:rgba(10,18,25,.72);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
#nav.stuck{border-bottom-color:var(--hairline);background:rgba(10,18,25,.92)}
.nav-in{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
/* padding, not height: the row is 66px but the link's own hit area was only
   as tall as its text (26px), which is well under a comfortable thumb target */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;
  padding:9px 0;font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:-.035em;color:#fff}
.logo .badge{width:26px;height:26px;border-radius:7px;background:var(--acc);color:var(--on-acc);
  display:grid;place-items:center;font-size:12.5px;font-weight:800;flex-shrink:0}
.logo .sub{color:var(--mute);font-weight:500;font-family:var(--sans);font-size:13px;letter-spacing:0;
  padding-left:11px;border-left:1px solid var(--line-2);display:none}
@media(min-width:1080px){.logo .sub{display:inline}}

.nav-l{display:none;align-items:center;gap:26px}
@media(min-width:940px){.nav-l{display:flex}}
.nav-l a{font-size:13.5px;color:var(--txt-2);text-decoration:none;position:relative;
  padding:4px 0;transition:color .18s}
.nav-l a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.nav-l a:hover{color:#fff}
.nav-l a.active{color:#fff}
.nav-l a.active::after{transform:scaleX(1)}

.nav-cta{display:none;font-size:13px;font-weight:600;color:var(--on-acc);background:var(--acc);
  padding:9px 17px;border-radius:9px;text-decoration:none;transition:background .18s,transform .18s}
@media(min-width:940px){.nav-cta{display:inline-block}}
.nav-cta:hover{background:var(--acc-2);transform:translateY(-1px)}

.nav-toggle{display:grid;place-items:center;gap:5px;width:44px;height:44px;margin-left:auto;
  background:transparent;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;padding:0}
@media(min-width:940px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--txt);border-radius:2px;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

#navMobile{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:55;background:var(--bg-deep);
  border-bottom:1px solid var(--line);padding:var(--s2) 28px var(--s3);
  transform:translateY(-102%);transition:transform .34s cubic-bezier(.2,.7,.3,1);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto}
#navMobile.open{transform:translateY(0)}
@media(min-width:940px){#navMobile{display:none}}
#navMobile a{display:block;padding:15px 0;font-size:17px;font-weight:600;text-decoration:none;
  color:var(--txt);border-bottom:1px solid var(--line)}
#navMobile a:last-of-type{border-bottom:0}
#navMobile .m-cta{margin-top:var(--s3);background:var(--acc);color:var(--on-acc);text-align:center;
  border-radius:11px;padding:15px;border:0;font-size:15.5px}

/* ═══ hero ════════════════════════════════════════════════════ */
.hero{background:var(--bg-deep);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-200px 0 auto 0;height:720px;pointer-events:none;
  background:radial-gradient(760px 340px at 16% 4%,var(--glow),transparent 70%)}
.hero-in{position:relative;display:grid;grid-template-columns:1fr;gap:var(--s5);
  padding:var(--s7) 0 var(--s7)}
@media(min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:center;
    padding:104px 0 96px}
}

.avail{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-bd);
  border-radius:99px;padding:6px 15px;margin-bottom:var(--s3)}
.avail .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);
  animation:pulse 2.6s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--acc-bd)}50%{opacity:.45;box-shadow:0 0 0 5px transparent}}

.hero h1{font-size:clamp(40px,6.1vw,72px);color:#fff}
.hero h1 span{color:var(--acc)}
.hero .lede{font-size:clamp(16px,1.55vw,18.5px);color:var(--txt-2);max-width:52ch;
  margin-top:var(--s3);line-height:1.62}
.hero .lede b{color:#fff;font-weight:600}

.acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:var(--s4)}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14.5px;
  font-weight:600;padding:14px 24px;border-radius:10px;cursor:pointer;border:1px solid transparent;
  background:transparent;color:var(--txt);
  font-family:var(--sans);transition:transform .18s,box-shadow .22s,background .2s,border-color .2s,color .2s}
.btn.primary{background:var(--acc);color:var(--on-acc)}
.btn.primary:hover{background:var(--acc-2);transform:translateY(-2px);box-shadow:0 14px 32px -14px var(--acc)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--txt-2)}
.btn.ghost:hover{border-color:var(--txt-2);color:#fff;transform:translateY(-2px)}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* markets + company lineage, sharing one hairline rule */
.hero-foot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.hero-foot .lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin-bottom:8px}
@media(min-width:1000px){.hero-foot .lbl{font-size:10.5px}}
.hero-foot .markets b{color:var(--txt);font-weight:600;font-size:13.5px;letter-spacing:.01em}
/* Understated wordmarks, not a sentence — reads as a lineage strip. */
.lineage{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.lineage li{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--txt-2);
  letter-spacing:-.02em;padding:0 14px;border-left:1px solid var(--line-2);line-height:1.2;
  transition:color .2s}
.lineage li:first-child{padding-left:0;border-left:0;color:#fff}
.lineage li:hover{color:#fff}
@media(max-width:420px){.lineage li{padding:0 10px;font-size:13px}}

/* ── hero metrics: cards, not bars ────────────────────────────
   The previous treatment drew a progress bar per metric, which made
   $5.5M look "fuller" than +22% — an accidental ranking of unrelated
   quantities that read as declining performance. Cards state each
   number at equal weight and imply no comparison. */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:400px){.metrics{grid-template-columns:1fr}}
.metric{background:linear-gradient(160deg,var(--surface),var(--bg-deep));
  border:1px solid var(--line);border-radius:var(--rad);padding:22px 20px;position:relative;
  overflow:hidden;transition:border-color .26s,transform .26s}
.metric::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.metric:hover{border-color:var(--line-2);transform:translateY(-2px)}
.metric:hover::after{transform:scaleX(1)}
.metric .mv{font-family:var(--disp);font-size:clamp(28px,3.2vw,36px);font-weight:700;color:#fff;
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.metric .mv em{font-style:normal;color:var(--acc)}
.metric .ml{margin-top:10px;font-size:12.5px;color:var(--txt-2);line-height:1.4}
.metric .ms{margin-top:5px;font-size:11px;color:var(--faint)}
.metrics-cap{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);font-weight:700}
@media(min-width:1000px){.metrics-cap{font-size:10.5px}}
.metrics-cap::after{content:"";flex:1;height:1px;background:var(--line)}

/* ═══ marquee (recognition + endorsements) ════════════════════ */
.mq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq:hover .mq-track{animation-play-state:paused}
/* Shift by exactly one copy of the content, measured in JS and written to
   --mq-shift. A percentage cannot be used: `width:max-content` on a flex row
   resolves wider than the sum of its items, so -50% lands short of the seam
   and the loop visibly jumps. The 50% fallback only applies if JS is absent,
   in which case nothing animates anyway. */
@keyframes mq-left{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--mq-shift, 50%)))}
}
@keyframes mq-right{
  from{transform:translateX(calc(-1 * var(--mq-shift, 50%)))}
  to{transform:translateX(0)}
}

/* Recognition strip, directly under the hero.
   Readability at speed is the whole job here: three short items instead of
   five long ones, a fixed year column so the dates line up as they pass
   rather than jittering, and a slow scroll. */
.recog{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s3) 0}
.recog-in{display:flex;align-items:center;gap:var(--s3);max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:520px){.recog-in{padding:0 20px}}
/* Carries the employer for the whole strip, so no award has to repeat it. */
.recog-lbl{flex-shrink:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);font-weight:700;display:none;max-width:120px;line-height:1.5}
@media(min-width:700px){.recog-lbl{display:block}}
.recog .mq{flex:1;min-width:0}
.recog .mq-track{animation:mq-left 58s linear infinite;gap:0}
.recog-item{display:flex;align-items:center;gap:13px;padding:2px 30px;white-space:nowrap;
  border-left:1px solid var(--line-2)}
.recog-item .yr{font-size:11.5px;color:var(--acc);font-weight:700;font-variant-numeric:tabular-nums;
  min-width:56px}
.recog-item .nm{font-size:14.5px;color:var(--txt);font-weight:600;letter-spacing:-.01em}

/* Three short awards fit a desktop row with room to spare, so above this
   width the strip stops moving and simply reads. Scrolling text you cannot
   finish before it leaves is a worse strip than a still one — motion only
   earns its place below, where the items genuinely do not fit. */
@media(min-width:1000px){
  .recog .mq{-webkit-mask-image:none;mask-image:none}
  .recog .mq-track{animation:none;width:100%!important;justify-content:space-between}
  .recog .mq-track > [aria-hidden="true"]{display:none}
  .recog-item{padding:2px 0}
  .recog-item + .recog-item{padding-left:30px}
  .recog-item:first-child{border-left:0}
}

/* ═══ section furniture ═══════════════════════════════════════ */
section{padding:var(--s6) 0}
@media(max-width:640px){section{padding:var(--s5) 0}}
.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kick{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--acc);
  margin-bottom:var(--s2);display:flex;align-items:center;gap:11px}
.kick::before{content:"";width:24px;height:1px;background:var(--acc);flex-shrink:0}
.s-head h2{font-size:clamp(27px,3.3vw,40px);color:#fff;max-width:20ch}
.s-head .dek{font-size:16px;color:var(--mute);max-width:58ch;margin-top:14px}
.s-head{margin-bottom:var(--s4)}

/* ═══ operating range ═════════════════════════════════════════ */
.cap-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.cap-grid{grid-template-columns:1fr 1fr}}
.cap{border:1px solid var(--line);border-radius:15px;padding:var(--s3) var(--s3) 26px;
  background:var(--bg-deep);transition:border-color .26s,transform .26s,background .26s,box-shadow .26s}
.cap:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2);box-shadow:var(--shadow)}
.cap .ci{width:38px;height:38px;border-radius:11px;background:var(--acc-soft);border:1px solid var(--acc-bd);
  display:grid;place-items:center;color:var(--acc);font-size:13px;font-weight:800;
  font-family:var(--disp);margin-bottom:var(--s2)}
.cap h3{font-size:20px;color:#fff;margin-bottom:10px}
.cap p{font-size:14.5px;color:var(--txt-2);line-height:1.62;margin-bottom:var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:11.5px;color:var(--mute);background:var(--surface-2);border:1px solid var(--line);
  border-radius:7px;padding:4px 10px}

/* ═══ the record — expandable case rows ═══════════════════════ */
/* Capped short of the full container: at 1140px the chevron sat against the
   far right edge with ~200px of dead air between it and the text it belongs
   to. Narrowing the rows pulls the two back into one visual unit. */
.cases{border-top:1px solid var(--line);max-width:1000px}
.case{border-bottom:1px solid var(--line)}
/* Mobile: three children in a two-column grid would flow the chevron onto a
   second row, leaving it dangling under the figure. Place each child
   explicitly — key and chevron share row 1, the title spans row 2. */
.case-head{display:grid;grid-template-columns:1fr auto;gap:var(--s2);width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--sans);
  padding:var(--s3) var(--s2);color:inherit;transition:background .22s;align-items:start}
.case-key{grid-column:1;grid-row:1}
.case-chev{grid-column:2;grid-row:1}
.case-main{grid-column:1 / -1;grid-row:2}
@media(min-width:900px){
  .case-head{grid-template-columns:170px minmax(0,1fr) 30px;gap:var(--s3);align-items:center}
  /* back to a single row, in source order */
  .case-key{grid-column:1;grid-row:1}
  .case-main{grid-column:2;grid-row:1}
  .case-chev{grid-column:3;grid-row:1}
}
.case-head:hover{background:var(--surface)}
.case[open] .case-head,.case.on .case-head{background:var(--surface)}

.case-key{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
@media(min-width:900px){.case-key{display:block}}
/* Every outcome reads at the same weight, numeric or not — "Cited" in accent
   made the one case without a figure look like the most important row. */
.case-num{font-family:var(--disp);font-size:clamp(26px,3vw,32px);font-weight:700;color:#fff;
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.case-disc{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);margin-top:0}
@media(min-width:900px){.case-disc{margin-top:11px}}

.case-main h3{font-size:20px;color:#fff;margin-bottom:7px}
@media(min-width:900px){.case-main h3{font-size:21px}}
.case-sum{font-size:14.5px;color:var(--txt-2);line-height:1.6;max-width:62ch}

/* Hover target for open-on-hover (see site.js). Padding-free box with a
   generous invisible hit area so the pointer doesn't have to be precise. */
.case-chev{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);
  display:grid;place-items:center;flex-shrink:0;justify-self:end;align-self:start;position:relative;
  transition:border-color .22s,background .22s,transform .28s cubic-bezier(.2,.7,.3,1)}
.case-chev::before{content:"";position:absolute;inset:-10px}
@media(min-width:900px){.case-chev{align-self:center}}
.case-chev svg{width:13px;height:13px;color:var(--mute);transition:color .22s}
.case-head:hover .case-chev{border-color:var(--acc-bd)}
.case-head:hover .case-chev svg{color:var(--acc)}
.case-head[aria-expanded="true"] .case-chev{transform:rotate(45deg);background:var(--acc-soft);border-color:var(--acc-bd)}
.case-head[aria-expanded="true"] .case-chev svg{color:var(--acc)}

/* Height is animated via max-height rather than `hidden`, so the row
   opens smoothly. Content stays in the DOM and readable to AT; the
   panel is aria-hidden only while collapsed. */
.case-body{overflow:hidden;max-height:0;transition:max-height .42s cubic-bezier(.2,.7,.3,1)}
.case-body-in{padding:0 var(--s2) var(--s4)}
@media(min-width:900px){.case-body-in{padding-left:calc(170px + var(--s3) + var(--s2));padding-right:50px}}
.cb-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);
  border-left:2px solid var(--acc-bd);padding-left:var(--s3)}
.cb-grid h4{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.cb-grid p{font-size:14.5px;color:var(--txt-2);line-height:1.66;max-width:64ch}
.cb-meta{margin-top:var(--s3);font-size:11.5px;color:var(--faint);letter-spacing:.02em}

/* ═══ career — one block per company, toolkit alongside ═══════ */
.career-grid{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media(min-width:1000px){
  /* Wide gutter so the employer dividers clearly end in their own column
     rather than appearing to run into the card. The column is wide enough
     that chip groups fit two or three to a row — at 296px nearly every group
     wrapped to three rows and the card became a tower of white space. */
  .career-grid{grid-template-columns:minmax(0,1fr) 352px;gap:72px;align-items:start}
}
@media(min-width:1240px){.career-grid{grid-template-columns:minmax(0,1fr) 380px}}
.career-side{align-self:start}
@media(min-width:1000px){
  /* Follows the employer list down instead of stranding a short column
     beside a tall one. */
  .career-side{position:sticky;top:calc(var(--nav-h) + 20px)}
}
.side-h{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.02em;
  text-transform:none;color:#fff;padding-bottom:13px;margin-bottom:18px;
  border-bottom:1px solid var(--line)}

.emp{border-top:1px solid var(--line);padding:var(--s3) 0}
.emp:first-child{border-top:0;padding-top:0}
.emp-in{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media(min-width:700px){.emp-in{grid-template-columns:200px minmax(0,1fr);gap:var(--s4)}}
.emp-id{display:flex;flex-direction:column;gap:6px}
.emp-name{font-family:var(--disp);font-size:21px;font-weight:700;color:#fff;letter-spacing:-.03em;
  display:flex;align-items:center;gap:10px}
.emp-name .now{width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft);flex-shrink:0}
.emp-when{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.emp-len{font-size:11.5px;color:var(--acc);font-weight:600}
/* Role progression inside the company, on a single rail — three rows at
   Freshworks is a promotion track, not three employers. Titles only: what
   each role achieved is already told once by Operating range and again, with
   outcomes, by The record. A third telling here was the repetition. */
.roles{position:relative;padding-left:22px}
.roles::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:1px;background:var(--line-2)}
.role{position:relative;padding-bottom:14px}
.role:last-child{padding-bottom:0}
.role::before{content:"";position:absolute;left:-22px;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--line-2)}
/* Only the role she left with carries full weight; the rungs below it are
   the ladder, not the headline. */
.role:first-child::before{background:var(--acc);top:7px}
.role-t{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--mute);letter-spacing:-.015em}
.role:first-child .role-t{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.025em}
.emp-cap{margin-top:var(--s4);font-size:13.5px;color:var(--mute);max-width:66ch}
.emp-cap b{color:var(--txt-2)}

/* ═══ vouched for — running endorsements ══════════════════════ */
.vq-rows{display:flex;flex-direction:column;gap:14px}
/* Spacing lives on the card, not as track `gap`. With gap, the track measures
   n*(w+g) − g, so translating -50% lands half a gap short of the seam and the
   loop visibly jumps. Baking it into each card makes every copy exactly the
   same width and the seam exact. */
.vq-rows .mq-track{gap:0}
.vq-rows .mq:nth-child(1) .mq-track{animation:mq-left 62s linear infinite}
.vq-rows .mq:nth-child(2) .mq-track{animation:mq-right 74s linear infinite}
.vq{width:352px;flex-shrink:0;margin-right:14px;border:1px solid var(--line);border-radius:14px;
  padding:var(--s3);background:var(--bg-deep);white-space:normal;
  transition:border-color .24s,background .24s}
@media(max-width:480px){.vq{width:280px}}
.vq:hover{border-color:var(--acc-bd);background:var(--surface-2)}
.vq q{quotes:none;display:block;font-size:14.8px;color:var(--txt);line-height:1.6}
.vq q::before{content:"\201C";color:var(--acc);font-family:var(--disp);font-weight:700;
  font-size:30px;line-height:0;vertical-align:-10px;margin-right:3px}
.vq .who{margin-top:var(--s2);padding-top:13px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mute);letter-spacing:.02em}

/* ═══ the stack (sidebar of the career section) ═══════════════
   A single bordered card rather than a run of divided rows. Divided rows
   put a second ladder of horizontal rules directly beside the employer
   list's own rules, and the two competing rhythms were what made the
   company dividers look like they ran into this column. One object beside
   a list reads cleanly; two lists side by side do not. */
.stack-card{border:1px solid var(--line);border-radius:16px;background:var(--bg-deep);
  padding:var(--s3) var(--s3) 26px;box-shadow:var(--shadow)}
.tool-group{padding:0;margin-bottom:18px}
.tool-group:last-child{margin-bottom:0}
.tool-group h4{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);margin-bottom:9px}
.tool-group ul{display:flex;flex-wrap:wrap;gap:6px}
.tool-group li{font-size:12px;line-height:1.35;color:var(--txt-2);background:var(--surface);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;
  transition:border-color .2s,color .2s,background .2s}
.tool-group li:hover{border-color:var(--acc-bd);color:#fff;background:var(--surface-2)}
/* Below the two-column breakpoint the card spans the page, so the chips get
   the room to breathe that the narrow sidebar could not afford. */
@media(max-width:999px){
  .stack-card{padding:var(--s3)}
  .tool-group{margin-bottom:var(--s3)}
  /* 10px group labels are legible in a tight desktop sidebar but not on a
     phone held at arm's length */
  .tool-group h4{font-size:11px;letter-spacing:.14em}
  .tool-group li{font-size:13px;padding:6px 13px}
}

/* ═══ about ═══════════════════════════════════════════════════ */
.about{background:var(--bg-deep);border-top:1px solid var(--line)}
.about-in{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:860px){.about-in{grid-template-columns:260px minmax(0,1fr);gap:var(--s6);align-items:start}}
.about figure{margin:0}
.about img{border-radius:var(--rad);border:1px solid var(--line);width:100%;max-width:260px}
.about figcaption{margin-top:13px;font-size:12px;color:var(--faint);line-height:1.55}
.about-body p{font-size:17px;color:var(--txt-2);line-height:1.72;margin-bottom:var(--s3);max-width:60ch}
.about-body p:last-child{margin-bottom:0}
.about-body p b{color:#fff;font-weight:600}
.about-body .first{font-size:19.5px;color:var(--txt)}

/* ═══ contact ═════════════════════════════════════════════════ */
.contact{background:var(--bg-deep);position:relative;overflow:hidden;border-top:1px solid var(--line)}
/* Every other section boundary is also a background change, which earns the
   full rhythm. About and Contact share --bg-deep, so the same gap reads as
   empty rather than deliberate — close it up. */
.about + .contact{padding-top:var(--s5)}
.contact::before{content:"";position:absolute;inset:auto 0 -260px 0;height:520px;pointer-events:none;
  background:radial-gradient(620px 300px at 50% 100%,var(--glow),transparent 72%)}
.contact-in{position:relative;text-align:center;max-width:660px;margin:0 auto}
.contact h2{font-size:clamp(29px,4.1vw,48px);color:#fff}
/* Availability leads: it is the reason to make contact, not a footnote. */
.contact .avail{margin:var(--s3) 0 0}
.contact .dek{font-size:16.5px;color:var(--txt-2);margin-top:var(--s2);line-height:1.62}
.contact .acts{justify-content:center;margin-top:var(--s4)}

/* ═══ footer ══════════════════════════════════════════════════ */
footer{border-top:1px solid var(--line);background:var(--bg-deep);padding:var(--s3) 0}
.foot-in{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--faint)}
.foot-links{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}
/* 20px-tall text links are an awkward thumb target. min-height plus a little
   horizontal padding gets short labels like "Email" to a full 44×44 without
   changing where they sit — the gap shrinks by what the padding adds. */
.foot-links a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 6px;
  text-decoration:none;color:var(--mute);transition:color .18s}
.foot-links a:hover{color:var(--acc)}

/* ═══ back to top ═════════════════════════════════════════════ */
#toTop{position:fixed;right:22px;bottom:22px;z-index:50;width:44px;height:44px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .26s,transform .26s,border-color .2s,background .2s}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{border-color:var(--acc-bd);background:var(--surface)}
#toTop svg{width:16px;height:16px}
@media(max-width:520px){#toTop{right:16px;bottom:16px}}