/* ═══════════════════════════════════════════════════════════════
   Nelson Sarma: portfolio
   Built from Figma: DjwIRIyFRAjUkQiKT5whZh, node 6:2 (1512px frame).
   Absolute frame coordinates are converted to fluid values that
   preserve the original proportions at 1512px and collapse cleanly.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* body's overflow propagates to the viewport, so it must be set
     here too or the bleeding portrait widens the page */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }


/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg-hero: #eee;
  --bg-band: #f4f4f4;
  --bg-card: #fff;

  /* Ink */
  --ink:        #404040;          /* hero display + stats            */
  --ink-nav:    #4d4d4d;          /* nav links                       */
  --ink-strong: #000;             /* band headline                   */
  --ink-soft:   rgba(0, 0, 0, .7);/* band body + framework rows      */
  --accent:     #1a1a1a;          /* the asterisk mark, monochrome  */

  /* Rules: hero hairlines are 0.5px #929292, row rules are darker.
     --rule-hair (#c4c4c4 over #eee) is ~24% ink; the hero runs at
     roughly half that so its grid sits further back. */
  --rule-hair: #c4c4c4;
  --rule-hero: rgba(64, 64, 64, .12);
  --rule-row:  rgba(0, 0, 0, .45);

  /* Type */
  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:      "Noto Sans", "Inter", system-ui, sans-serif;

  --fs-hero:     clamp(3.25rem, 6.08vw, 5.75rem);   /* 92px  */
  --fs-h2:       clamp(1.9rem,  3.44vw, 3.25rem);   /* 52px  */
  --fs-stat:     clamp(1.85rem, 2.78vw, 2.625rem);  /* 42px  */
  --fs-brand:    clamp(1.125rem, 1.46vw, 1.375rem); /* 22px  */
  --fs-intro:    clamp(1rem,    1.19vw, 1.125rem);  /* 18px  */
  --fs-label:    clamp(0.9375rem, 1.19vw, 1.125rem);/* 18px  */
  --fs-row:      clamp(1.125rem, 1.39vw, 1.3125rem);/* 21px  */
  --fs-body:     clamp(0.9375rem, 1.06vw, 1rem);    /* 16px  */

  /* Layout: frame gutter is 119/1512 = 7.87% */
  --frame: 1512px;
  --gut:   clamp(1.25rem, 7.87vw, 7.4375rem);

  /* Column the hero rules span: 1000/1512 */
  --hero-col:  min(1000px, 100%);
  /* Column the framework rows span: 721.5px */
  --row-col:   min(722px, 100%);

  /* Hero vertical rhythm, from the frame */
  /* Nav pill height is fixed by its own padding + control height, so
     the hero can reserve exactly the space the bar used to occupy. */
  --nav-h: 88px;

  /* Greeting cycle: six words, one slot each */
  --greet-slot: 2.6s;
  --greet-cycle: 15.6s;

  --hero-pad-top:    clamp(1.5rem,  2.51vw, 2.375rem);  /* 38    */
  --hero-nav-gap:    clamp(1.75rem, 3.57vw, 3.375rem);  /* 54    */
  --hero-rule-gap:   clamp(1.75rem, 3.57vw, 3.375rem);  /* 54    */
  --hero-pad-bottom: clamp(4rem,   11.38vw, 10.75rem);  /* 172   */
}


/* ── Base ──────────────────────────────────────────────────────── */
body {
  background: var(--bg-hero);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.shell {
  width: min(100%, var(--frame));
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 12px 0;
  font-family: var(--font-ui);
}
.skip:focus-visible { left: 0; }

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


/* ═══ HERO ═════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--bg-hero);
  overflow: clip;          /* crops the portrait flat at the seam */
}

/* Portrait: 1245.7px square, rotated 3.88deg, bleeding past the
   right edge by 500.7px and below the hero by 143.7px (frame 6:2).
   It lives inside .hero__in so that it drops into the flow between
   the copy and the stats once it goes static on small screens; the
   negative right offset cancels the shell gutter to reach the edge. */
.hero__photo {
  position: absolute;
  right: calc(var(--gut) * -1);
  bottom: 0;
  /* 1245.7px at the 1512 frame, scaled +30% from the 70% baseline,
     capped, so past the frame width the portrait keeps its scale */
  width: min(74.98vw, 1134px);
  aspect-ratio: 1;
  transform: translate(40.2%, 11.5%) rotate(3.88deg);
  transform-origin: center;
  pointer-events: none;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__in {
  position: relative;
  z-index: 1;
  /* reserves the space the now-fixed bar used to take in flow, so
     "Hello" still starts on the frame's y=178 */
  padding-top: calc(var(--hero-pad-top) + var(--nav-h) + var(--hero-nav-gap));
  padding-bottom: var(--hero-pad-bottom);
}

/* The tall hairline at 63.4% of the rule span, running from the very
   top of the frame down to the lower stats rule (frame 6:43). */
.hero__in::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--hero-pad-bottom);
  left: min(634px, 63.4%);
  width: 1px;
  background: var(--rule-hero);
}

@media (max-width: 900px) {
  .hero__in::after { display: none; }
}


/* ── Shared glass surface (nav, FAB, ask panel) ─────────────────── */
/* Figma (7:90) gives radius 20, a light white fill and soft shadow,
   but no blur node. 10% white over #eee is invisible, so the fill is
   carried up and the glass is built the way a system bar does it:
   heavy backdrop blur, saturation lift, a bright top edge and rim. */
.glass {
  background: rgba(255, 255, 255, .44);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 0;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),   /* lit top edge        */
    inset 0 0 0 1px rgba(255, 255, 255, .35), /* rim                 */
    0 1px 1px rgba(0, 0, 0, .04),
    0 11px 24px rgba(0, 0, 0, .06);           /* frame shadow, lifted */
  overflow: clip;
}
/* Without backdrop-filter the 44% fill reads as murk, go opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .88); }
}


/* ── Nav: glass pill ──────────────────────────────────────────── */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: var(--hero-pad-top);
  pointer-events: none;   /* only the pill itself is interactive */
}

.nav {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  /* pill sits 17px left of the text column so its padding optically
     aligns the wordmark with the body copy below */
  margin-left: clamp(-1.0625rem, -1.12vw, -0.5rem);
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.71vw, 2.5625rem);
  padding: 22px 18px;
  /* glass surface: same recipe as .glass */
  background: rgba(255, 255, 255, .44);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-radius: 20px;
  overflow: clip;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 1px 1px rgba(0, 0, 0, .04),
    0 11px 24px rgba(0, 0, 0, .06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(255, 255, 255, .88); }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-brand);
  color: var(--ink);
  white-space: nowrap;
}
/* The one piece of colour left in the UI: the mark is the wordmark, not
   chrome, so it keeps its teal while everything else stays monochrome. */
.nav__mark {
  width: 23px;
  height: 22px;
  flex: none;
  color: #08a3a8;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.71vw, 2.5625rem);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-nav);
}
.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--ink); }

.nav__cta {
  padding: 10px 40px;
  border-radius: 12px;
  background: var(--bg-card);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .05));
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease;
}
.nav__cta:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .09));
}


/* ── Hero copy ─────────────────────────────────────────────────── */
.hero__copy { max-width: var(--hero-col); }

/* anchors must clear the fixed bar */
[id] { scroll-margin-top: calc(var(--hero-pad-top) + var(--nav-h) + 1.5rem); }

.hero__hi {
  position: relative;
  height: 1.2em;          /* frame 6:44, 110px at the 92px size */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── The cycling greeting ──────────────────────────────────────── */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.greet {
  position: absolute;
  inset: 0;
}

.greet__w {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  animation: greet-cycle var(--greet-cycle) infinite backwards;
  animation-delay: calc(var(--i) * var(--greet-slot));
}

/* Scripts Bricolage Grotesque has no glyphs for */
.greet__w[lang="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }
.greet__w[lang="bn"] { font-family: "Noto Sans Bengali", sans-serif; }
.greet__w[lang="ar"] { font-family: "Noto Sans Arabic", sans-serif; }

/* Each word owns one 16.667% slot (six words): fade in, hold, fade out.
   A word is fully gone at 16.667%, exactly when the next one starts
   fading in: so two words are never superimposed, and there is no dead
   beat either. */
@keyframes greet-cycle {
  0%      { opacity: 0; }
  4%      { opacity: 1; }
  13.33%  { opacity: 1; }
  16.667% { opacity: 0; }
  100%    { opacity: 0; }
}

.hero__intro {
  margin-top: 11px;
  max-width: 500px;   /* frame 6:28, holds the copy to four lines */
  font-size: var(--fs-intro);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}

/* ── FAB bar: bottom-right glass, slides in after load ─────────── */
.askfab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.7rem 0.85rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.25rem);
  transition: opacity .4s ease, transform .4s ease;
  /* glass: shared with nav */
  background: rgba(255, 255, 255, .44);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-radius: 20px;
  overflow: clip;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 1px 1px rgba(0, 0, 0, .04),
    0 11px 24px rgba(0, 0, 0, .06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .askfab { background: rgba(255, 255, 255, .88); }
}
.askfab.is-in {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.askfab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.25rem);
}

.askfab__eyebrow {
  margin: 0;
  padding: 0.15rem 0.35rem 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
}

.askfab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 2px rgba(0, 0, 0, .04);
  filter: none;
  transition: background .18s ease, transform .18s ease;
}
.askfab__btn:hover {
  background: rgba(255, 255, 255, .78);
  transform: translateY(-1px);
}
.askfab__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.askfab__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--ink);
  display: block;
  animation: ask-pulse 2.6s ease-in-out infinite;
}
@keyframes ask-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .askfab { transition: none; transform: none; }
  .askfab__icon { animation: none; opacity: 1; }
  .askfab__btn:hover { transform: none; }
}


/* ── Ask panel (wingman): glass like nav ───────────────────────── */
.askai {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  /* clears the FAB bar when both are on screen */
  bottom: calc(clamp(1rem, 3vw, 1.5rem) + 6.5rem);
  z-index: 95;
  width: min(24.5rem, calc(100vw - 2rem));
  height: min(34rem, calc(72vh - 2rem));
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .44);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 0;
  border-radius: 20px;
  overflow: clip;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 1px 1px rgba(0, 0, 0, .04),
    0 11px 24px rgba(0, 0, 0, .06);
  opacity: 0;
  pointer-events: none;
  /* no panel motion: only chips / AI replies cascade */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .askai { background: rgba(255, 255, 255, .88); }
}
.askai.open {
  opacity: 1;
  pointer-events: auto;
}

/* Cascade from the left: question chips (on open) + AI replies (on arrive) */
.askai__chip.askai__cascade {
  opacity: 0;
  transform: translateX(-12px);
}
.askai.is-cascading .askai__chip.askai__cascade {
  animation: askai-cascade 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.msg--ai.is-in {
  animation: askai-cascade 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes askai-cascade {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .askai__chip.askai__cascade {
    opacity: 1;
    transform: none;
  }
  .askai.is-cascading .askai__chip.askai__cascade,
  .msg--ai.is-in {
    animation: none;
  }
}

.askai__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .18);
}
.askai__title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.askai__head .lbl {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Lucide bot head: black, idle antenna + blink + ear pulse */
.askai__bot,
.msg__ico {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #000;
  line-height: 0;
}
.askai__bot {
  width: 22px;
  height: 22px;
}
.askai__bot .msg__svg,
.msg__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.askai__bot-idle {
  transform-box: fill-box;
  transform-origin: center center;
  animation: bot-bob 2s ease-in-out infinite;
}
.askai__bot-ant {
  transform-box: fill-box;
  transform-origin: 12px 8px;
  animation: bot-ant 1.6s ease-in-out infinite;
}
.askai__bot-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: bot-blink 3.4s step-end infinite;
}
.askai__bot-eye--r {
  animation-delay: 0.04s;
}
.askai__bot-ear--l {
  transform-box: fill-box;
  transform-origin: right center;
  animation: bot-ear-l 1.8s ease-in-out infinite;
}
.askai__bot-ear--r {
  transform-box: fill-box;
  transform-origin: left center;
  animation: bot-ear-r 1.8s ease-in-out infinite;
}

/* Tabler spy: detective hat + glasses (user messages) */
.msg__det {
  transform-box: fill-box;
  transform-origin: center center;
  animation: bot-bob 2.2s ease-in-out infinite;
}
.msg__det-lens {
  transform-box: fill-box;
  transform-origin: center;
  animation: det-lens 3.6s ease-in-out infinite;
}
.msg__det-lens--r { animation-delay: 0.12s; }
.msg__det-hat {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: det-hat 2.4s ease-in-out infinite;
}
@keyframes bot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.6px); }
}
@keyframes bot-ant {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
@keyframes bot-blink {
  0%, 40%, 44%, 100% { transform: scaleY(1); opacity: 1; }
  42% { transform: scaleY(0.12); opacity: 0.85; }
}
@keyframes bot-ear-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-0.6px); }
}
@keyframes bot-ear-r {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.6px); }
}
@keyframes det-lens {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes det-hat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .askai__bot-idle,
  .askai__bot-ant,
  .askai__bot-eye,
  .askai__bot-ear--l,
  .askai__bot-ear--r,
  .msg__det,
  .msg__det-lens,
  .msg__det-hat {
    animation: none;
  }
}

.askai__close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink-soft);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0;
}
.askai__close:hover { color: var(--ink); }
.askai__close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.askai__msgs {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.askai__intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.askai__chips {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.askai__chip {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  background: rgba(255, 255, 255, .45);
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: background .2s ease;
}
.askai__chip:hover {
  background: rgba(255, 255, 255, .72);
}
.askai__chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 100%;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.msg__body {
  min-width: 0;
  flex: 1 1 auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg--user {
  flex-direction: row-reverse;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.msg--user .msg__body {
  text-align: right;
}
.msg--user .msg__ico {
  color: var(--ink);
}
.msg--ai {
  align-self: stretch;
}
.msg--ai .msg__ico {
  margin-top: 0.1rem;
}
.msg--err {
  align-self: flex-start;
  color: #1a1a1a;
  font-size: 0.875rem;
}
.msg--err a { text-decoration: underline; }

.askai__typing {
  display: inline-flex;
  gap: 5px;
  align-self: flex-start;
  padding: 6px 0;
}
.askai__typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: ask-blink 1.2s infinite;
}
.askai__typing i:nth-child(2) { animation-delay: .2s; }
.askai__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ask-blink {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

.askai__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.05rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .18);
  flex: 0 0 auto;
}
.askai__form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.4rem 0.15rem;
  outline: none;
}
.askai__form input:focus { border-bottom-color: var(--ink); }
.askai__form button {
  border: 0;
  background: rgba(255, 255, 255, .65);
  color: var(--ink);
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.askai__form button:disabled { opacity: .35; cursor: default; }
.askai__form button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.askai__form button svg { width: 15px; height: 15px; }

.askai__foot {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 0 0.85rem 0.75rem;
  flex: 0 0 auto;
}

@media (max-width: 620px) {
  .askai {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    height: min(82vh, 34rem);
    border-radius: 20px;
  }
  .askfab {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .askai { transition: none; }
  .askai__typing i { animation: none; }
}


/* ── Stats row ─────────────────────────────────────────────────── */
.stats {
  margin-top: var(--hero-rule-gap);
  max-width: var(--hero-col);
  display: grid;
  /* frame column boundaries: 279, 516, 753 across a 1000px span */
  grid-template-columns: 16fr 23.7fr 23.7fr 36.6fr;
  border-top: 1px solid var(--rule-hero);
  border-bottom: 1px solid var(--rule-hero);
}

.stat {
  padding-block: clamp(1.5rem, 2.74vw, 2.59375rem) clamp(1.5rem, 2.94vw, 2.78125rem);
  padding-inline-start: clamp(0.875rem, 4.1vw, 3.875rem);
  border-left: 1px solid var(--rule-hero);
}
.stat:first-child {
  padding-inline-start: 0;
  border-left: 0;
}

.stat__v {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.19;
  color: var(--ink);
}

.stat__k {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  line-height: 1.39;
  color: var(--ink);
}


/* ═══ ABOUT ════════════════════════════════════════════════════ */
/* Sits on the band surface so the seam under the hero, where the
   portrait is cut flat, still lands on a change of colour. */
/* ═══ ARC: graphic designer → UI designer → manager ═══════════ */
.arc {
  background: var(--bg-band);
  padding-block: clamp(3.5rem, 7.01vw, 6.625rem) 0;
}

/* Same three-column rule frame the About cells use, so the two read
   as one system rather than two separate ideas stacked up. */
.arc__steps {
  margin-top: clamp(2rem, 3.6vw, 3.4375rem);
  max-width: var(--hero-col);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, auto);
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
  list-style: none;
}

/* Subgrid so the marks, the turn rules and both lists sit on the same
   baselines across all three columns however long the copy runs.
   Without subgrid support each step is still a plain stack. */
.arc__step {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  padding-block: clamp(1.5rem, 2.6vw, 2.4375rem);
  padding-inline-start: clamp(1rem, 2.6vw, 2.4375rem);
  border-left: 1px solid var(--rule-hair);
}
.arc__step:first-child {
  padding-inline-start: 0;
  border-left: 0;
}
.arc__step:last-child { padding-inline-end: 0; }

.arc__n {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-nav);
}

.arc__role {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-row);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.19;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.arc__claim {
  margin-top: 8px;
  max-width: 24ch;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Two lists per step: what the job was, then what it left behind. */
.arc__did,
.arc__kept {
  list-style: none;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.arc__did {
  margin-top: 18px;
  color: var(--ink-soft);
}
.arc__kept {
  margin-top: 16px;
  color: var(--ink-strong);
}

/* The turn: surface work above it, the part that carried forward below. */
.arc__turn {
  margin-top: 22px;
  padding-inline-end: clamp(1rem, 2.6vw, 2.4375rem);
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--rule-hair);
}
.arc__step:last-child .arc__turn { padding-inline-end: 0; }
.arc__rule {
  flex: 1;
  border-top: 1px solid currentColor;
}
.arc__tip {
  flex: none;
  width: 9px;
  height: 9px;
  color: var(--ink-nav);
}

/* Today is a fourth column but not a fourth step: it skips the number
   row and takes the role slot, so its heading sits level with the three
   job titles and its figures line up with the three first lists. */
.arc__step--now .arc__role { grid-row: 2; }
.arc__step--now .arc__now  { grid-row: 4; }

.arc__now {
  margin-top: 18px;
  list-style: none;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-strong);
}

/* Four columns of this much copy give out well before the About cells
   do, so the arc breaks in two stages: two up, then stacked. */
@media (max-width: 1080px) {
  .arc__steps { grid-template-columns: repeat(2, 1fr); }
  /* Rows 1 and 3 start a new pair, so they lose the dividing rule. */
  .arc__step:nth-child(odd) {
    padding-inline-start: 0;
    border-left: 0;
  }
  .arc__step:nth-child(-n + 2) { padding-bottom: clamp(1.5rem, 2.6vw, 2.4375rem); }
  .arc__step:nth-child(n + 3) { border-top: 1px solid var(--rule-hair); }
}

@media (max-width: 700px) {
  .arc__steps {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .arc__step {
    grid-row: auto;
    display: block;
    padding-inline-start: 0;
    border-left: 0;
  }
  .arc__step + .arc__step { border-top: 1px solid var(--rule-hair); }
  .arc__step--now .arc__role,
  .arc__step--now .arc__now { grid-row: auto; }
  .arc__turn { padding-inline-end: 0; }
}


.about {
  background: var(--bg-band);
  padding-block: clamp(3.5rem, 7.01vw, 6.625rem) 0;
}

.about__grid {
  margin-top: clamp(2.5rem, 4.56vw, 4.3125rem);
  max-width: var(--hero-col);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
}

.about__cell {
  padding-block: clamp(1.5rem, 2.6vw, 2.4375rem);
  padding-inline-start: clamp(1rem, 2.6vw, 2.4375rem);
  border-left: 1px solid var(--rule-hair);
}
.about__cell:first-child {
  padding-inline-start: 0;
  border-left: 0;
}
.about__cell:last-child { padding-inline-end: 0; }

.about__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-row);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.19;
  color: var(--ink-strong);
  text-wrap: balance;
}

.about__d {
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: pretty;
}


/* ═══ HANDS-ON: product surfaces ══════════════════════════════ */
.hands {
  background: var(--bg-band);
  padding-block: clamp(3.5rem, 7.01vw, 6.625rem) 0;
}

.hands__grid {
  margin-top: clamp(2.5rem, 4.56vw, 4.3125rem);
  max-width: var(--hero-col);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.2vw, 3rem) clamp(1.5rem, 2.6vw, 2.4375rem);
}

/* Screens are 1440×900; the window crops from the top so the product
   chrome and first content row survive at thumbnail size. */
.hands__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-card);
  box-shadow:
    0 0 0 1px var(--rule-hair),
    0 6px 18px rgba(0, 0, 0, .06);
}
.hands__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hands__k {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-nav);
}

.hands__t {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-row);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.19;
  color: var(--ink-strong);
}

.hands__d {
  margin-top: 6px;
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Each card is one link: same behaviour as a framework row, plus a
   thumbnail that has to react too. */
/* Column layout so the three "read this" cues line up across the row
   however long each description runs. */
.hands__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hands__link .hands__thumb img { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.hands__item:hover .hands__thumb img { transform: scale(1.03); }

.hands__item:hover .hands__t {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, .35);
}

.hands__go {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--accent);
}
.hands__go svg {
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}
.hands__item:hover .hands__go svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .hands__item:hover .hands__thumb img,
  .hands__item:hover .hands__go svg { transform: none; }
}


/* ═══ BAND: "From a designer to managing designer." ═══════════ */
.band {
  position: relative;
  background: var(--bg-band);
  overflow-x: clip;
  padding-block: clamp(2.25rem, 3.44vw, 3.25rem) clamp(2.5rem, 3.7vw, 3.5rem);
}

/* Section eyebrow + headline + lede, shared by About and the frameworks band */
.sec-eyebrow {
  margin-bottom: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sec-h2 {
  max-width: 1160px;   /* wide enough that the frameworks headline keeps to one line */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.19;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  text-wrap: balance;
}

.sec-lede {
  margin-top: 10px;
  max-width: 941px;    /* frame 7:46 */
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.38;
  color: var(--ink-strong);
  text-wrap: pretty;
}

.band__body {
  margin-top: clamp(1rem, 1.32vw, 1.25rem);
  display: grid;
  grid-template-columns: var(--row-col) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}


/* ── Framework rows ────────────────────────────────────────────── */
.frame {
  padding-bottom: clamp(0.625rem, 0.79vw, 0.75rem);
  border-bottom: 1px solid var(--rule-row);
}
.frame + .frame { margin-top: clamp(0.625rem, 0.79vw, 0.75rem); }

/* Hovering a row underlines both lines of it and darkens the ink */
/* the whole row is the target for its episode */
.frame__link { display: block; }

.frame:hover .frame__t,
.frame:hover .frame__d {
  color: var(--ink-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, .35);
}
.frame__t,
.frame__d { transition: color .2s ease; }

.frame__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-row);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.19;
  color: var(--ink-soft);
}

.frame__d {
  margin-top: 7px;
  max-width: 66ch;
  font-size: var(--fs-body);
  line-height: 1.21;
  color: var(--ink-soft);
  text-wrap: pretty;
}


/* ── The deck ──────────────────────────────────────────────────── */
.stack {
  position: relative;
  justify-self: end;
  width: clamp(15rem, 24.4vw, 23.0625rem);   /* 369px */
  aspect-ratio: 369 / 493;
  margin-top: clamp(1rem, 1.98vw, 1.875rem); /* card top sits 30px below the first row */

  /* One front seat and four seats behind it, fanning right the way
     the two placeholder cards do in the frame (6.73deg and 9.42deg). */
  --seat-front: translate(0, 0) rotate(0deg);
  --seat-1: translate(4.6%, 1.2%) rotate(4deg);
  --seat-2: translate(9.2%, 1.6%) rotate(6.73deg);
  --seat-3: translate(13.8%, 2%) rotate(9.42deg);
  --seat-4: translate(18.4%, 2.4%) rotate(12deg);
}

.deck__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
  transform-origin: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  /* No transition: the swap is a cut, not a move. */
}

/* Cards behind the front one are washed back toward the frame's greys */
.deck__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #cfcfcf;
  opacity: .82;
}

.deck__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The illustration is the one asset with a designed crop: a 369×493
   window at (61, 34) inside a 485×620 box (mask 7:75). */
.deck__card:nth-child(1) img {
  position: absolute;
  left: -16.53%;
  top: -6.9%;
  width: 131.44%;
  height: 125.76%;
  max-width: none;
}

/* Resting order: the illustration is dealt face up, matching the frame */
.deck__card:nth-child(1) { z-index: 5; transform: var(--seat-front); }
.deck__card:nth-child(2) { z-index: 4; transform: var(--seat-1); }
.deck__card:nth-child(3) { z-index: 3; transform: var(--seat-2); }
.deck__card:nth-child(4) { z-index: 2; transform: var(--seat-3); }
.deck__card:nth-child(5) { z-index: 1; transform: var(--seat-4); }
.deck__card:nth-child(1)::after { opacity: 0; }

/* Hovering row N deals card N to the front; the card that was there
   takes the seat N just left, so it stacks in behind. */
.band__body:has(.frame:nth-child(2):hover) .deck__card:nth-child(2) { z-index: 6; transform: var(--seat-front); }
.band__body:has(.frame:nth-child(2):hover) .deck__card:nth-child(1) { z-index: 4; transform: var(--seat-1); }
.band__body:has(.frame:nth-child(3):hover) .deck__card:nth-child(3) { z-index: 6; transform: var(--seat-front); }
.band__body:has(.frame:nth-child(3):hover) .deck__card:nth-child(1) { z-index: 3; transform: var(--seat-2); }
.band__body:has(.frame:nth-child(4):hover) .deck__card:nth-child(4) { z-index: 6; transform: var(--seat-front); }
.band__body:has(.frame:nth-child(4):hover) .deck__card:nth-child(1) { z-index: 2; transform: var(--seat-3); }
.band__body:has(.frame:nth-child(5):hover) .deck__card:nth-child(5) { z-index: 6; transform: var(--seat-front); }
.band__body:has(.frame:nth-child(5):hover) .deck__card:nth-child(1) { z-index: 1; transform: var(--seat-4); }

/* …and only the front card loses the grey wash */
.band__body:has(.frame:nth-child(2):hover) .deck__card:nth-child(2)::after,
.band__body:has(.frame:nth-child(3):hover) .deck__card:nth-child(3)::after,
.band__body:has(.frame:nth-child(4):hover) .deck__card:nth-child(4)::after,
.band__body:has(.frame:nth-child(5):hover) .deck__card:nth-child(5)::after { opacity: 0; }

.band__body:has(.frame:nth-child(2):hover) .deck__card:nth-child(1)::after,
.band__body:has(.frame:nth-child(3):hover) .deck__card:nth-child(1)::after,
.band__body:has(.frame:nth-child(4):hover) .deck__card:nth-child(1)::after,
.band__body:has(.frame:nth-child(5):hover) .deck__card:nth-child(1)::after { opacity: .82; }


/* ═══ Responsive ═══════════════════════════════════════════════ */

/* Tablet: portrait shrinks back, band goes single column */
@media (max-width: 1080px) {
  /* three case-study thumbnails get too small to read side by side */
  .hands__grid {
    grid-template-columns: 1fr;
    max-width: min(560px, 100%);
  }

  .band__body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  .stack {
    justify-self: center;
    margin-top: 0;
    width: min(20rem, 72%);
  }
}

@media (max-width: 780px) {
  .about__grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .about__cell {
    padding-inline-start: 0;
    border-left: 0;
  }
  .about__cell + .about__cell { border-top: 1px solid var(--rule-hair); }
}

@media (max-width: 900px) {
  .hero__photo {
    position: static;
    width: min(20.93rem, 71%);
    margin: clamp(1.5rem, 5vw, 2.5rem) calc(var(--gut) * -0.5) clamp(1.5rem, 5vw, 2.5rem) auto;
    transform: rotate(3.88deg);
  }

  .hero__in { padding-bottom: clamp(2.5rem, 8vw, 4rem); }

  .hero__copy { max-width: none; }
  .hero__intro { max-width: 46ch; }

  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stat {
    padding-inline-start: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.125rem, 4vw, 1.75rem);
  }
  .stat:nth-child(odd) {
    padding-inline-start: 0;
    border-left: 0;
  }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--rule-hero); }
  .stat__k { max-width: none; }
}

/* Phone: nav pill wraps, everything goes full width */
@media (max-width: 620px) {
  :root { --nav-h: 111px; }

  .nav {
    width: auto;
    margin-inline: -16px;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 14px 16px;
  }
  .nav__links {
    width: 100%;
    gap: 20px;
  }
  .nav__cta {
    margin-left: auto;
    padding: 9px 24px;
  }

  .hero__photo { width: 78.3%; margin-right: calc(var(--gut) * -1); }

  .hero__hi { line-height: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* Settle on the English greeting rather than flashing all eight */
  .greet__w { display: none; }
  .greet__w:first-child {
    display: block;
    opacity: 1;
    animation: none !important;
  }
}


/* ═══ FOOTER CTA ═══════════════════════════════════════════════ */
/* Returns to the hero surface, so the page closes on the tone it
   opened with rather than trailing off the band. */
.cta {
  background: var(--bg-hero);
  padding-block: clamp(3.5rem, 7.01vw, 6.625rem) clamp(1.75rem, 3vw, 2.5rem);
}

.cta__h {
  margin-top: 14px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  font-variation-settings: "opsz" 14, "wdth" 100;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  text-wrap: balance;
}

.cta__sub {
  margin-top: 18px;
  max-width: 56ch;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.cta__row {
  margin-top: clamp(1.75rem, 3.2vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn--solid {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.btn--solid:hover { background: #1c1c1c; }

.btn--line {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-hair);
}
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.colophon {
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  padding-top: 18px;
  border-top: 1px solid var(--rule-hero);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-nav);
}