/* ==========================================================================
   Section styles — follows document order
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
  background: linear-gradient(180deg, #fff 55%, rgb(255 255 255 / 0%));
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  background: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.975rem;
  color: #fff;
  letter-spacing: -0.01em;
  flex: none;
}

.brand img {
  width: 30px;
  height: 27px;
}

/* Center pill group */
.nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline: auto;
  padding: 0.3rem;
  background: rgb(255 255 255 / 12%);
  border-radius: var(--r-md);
}

.nav__links a {
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgb(255 255 255 / 82%);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__links a:hover {
  color: #fff;
  background: rgb(255 255 255 / 10%);
}

.nav__links a.is-active {
  color: #fff;
  background: var(--ink-900);
  font-weight: 600;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.nav__actions .btn {
  padding: 0.7rem 1.15rem;
}

.nav__actions .btn--resume {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1px solid rgb(255 255 255 / 22%);
}

.nav__actions .btn--resume:hover {
  --btn-bg: rgb(255 255 255 / 10%);
}

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  transform-origin: center;
}

.nav.is-open .nav__toggle span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.nav.is-open .nav__toggle span:nth-child(2) {
  opacity: 0;
}

.nav.is-open .nav__toggle span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 960px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .nav__toggle {
    display: flex;
    margin-left: auto;
  }

  .nav__links,
  .nav__actions {
    flex-basis: 100%;
    display: none;
    margin: 0;
  }

  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: none;
    padding: 0.75rem 0 0.25rem;
    gap: 0.15rem;
  }

  .nav.is-open .nav__actions {
    display: flex;
    padding-bottom: 0.35rem;
  }

  .nav.is-open .nav__actions .btn {
    flex: 1;
  }

  .nav__links a {
    padding: 0.7rem 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/*
 * Reference geometry (1440px artboard):
 *   H1 ink        x=98   y=179  h=91   → ~96px, avatar Ø117 at x=847
 *   subtitle ink  x=96   y=337  w=1032 → ~66px, right-aligned to x=1129
 *   body ink      x=192  y=523  w=975  → ~21px, indented 96px, opacity .8
 *   buttons       y=683  h=55, gold tile flush at x=276, ghost btn at x=353.5
 * The hero sits on plain white — no wash.
 */
.hero {
  position: relative;
  padding-block: clamp(2rem, 0.6rem + 3.2vw, 3.6rem) clamp(2.5rem, 1rem + 5vw, 5.25rem);
  isolation: isolate;
}

.hero__title {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.1rem + 3.4vw, 3.1rem);
  flex-wrap: wrap;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: max-content;
}

.hero__avatar {
  width: clamp(70px, 3rem + 4.8vw, 117px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.hero__subtitle {
  margin-top: clamp(1.5rem, 0.4rem + 4.2vw, 4.25rem);
  font-size: clamp(1.75rem, 0.55rem + 4.6vw, 4.125rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--slate);
  max-width: 1033px;
  text-align: right;
}

.hero__subtitle span {
  display: block;
}

.hero__text {
  margin-top: clamp(1.25rem, 0.4rem + 2.6vw, 2.9rem);
  max-width: 976px;
  margin-left: clamp(0rem, -2.2rem + 8.4vw, 6.6rem);
  color: var(--slate);
  font-weight: 500;
  font-size: clamp(1rem, 0.82rem + 0.55vw, 1.3125rem);
  line-height: 1.33;
  opacity: 0.8;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.47rem);
  flex-wrap: wrap;
  margin-top: clamp(2.25rem, 0.6rem + 5vw, 4.7rem);
}

/* Reference: dark button 180x55, outlined button 151x54 */
.hero__actions .btn {
  min-width: 180px;
  height: 55px;
}

.hero__actions .btn--ghost {
  min-width: 151px;
  height: 54px;
}

/* View Projects and the play tile read as one unit — zero gap in the reference */
.hero__group {
  display: flex;
  gap: 0;
}

.hero__play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--ink);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.hero__play:hover {
  background: var(--gold-600);
  transform: translateY(-2px);
}

.hero__play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/*
 * On narrow screens the reference's asymmetry (right-aligned subtitle, indented
 * body copy) reads as broken alignment rather than as art direction, so the
 * hero flattens to a single left-aligned column.
 */
@media (max-width: 760px) {
  .hero__title {
    max-width: none;
  }

  .hero__subtitle {
    text-align: left;
  }

  .hero__subtitle span {
    display: inline;
  }

  .hero__text {
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  /* Let the button pair fill the row instead of overflowing it */
  .hero__actions,
  .hero__group {
    width: 100%;
  }

  .hero__actions .btn,
  .hero__actions .btn--ghost {
    min-width: 0;
    flex: 1;
  }

  .hero__play {
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   Social row + slate panel (Vision / Goal)
   -------------------------------------------------------------------------- */
/*
 * "Follow Abir / online -" sits left, the three outlined pills right.
 * Reference: label ink x=97 y=864 h=59 (two lines ~27px each);
 * pills h=63 rx=31 with a 2px stroke, 201-217px wide, the middle one tilted.
 */
.social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-bottom: clamp(1.5rem, 0.5rem + 3vw, 3rem);
}

.social-row__label {
  font-size: clamp(1.15rem, 0.75rem + 1.5vw, 1.75rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.14;
}

.social-row__label strong {
  font-weight: 700;
}

.social-row__links {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.2rem + 0.6vw, 0.6rem);
  flex-wrap: wrap;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: clamp(46px, 2rem + 2.2vw, 63px);
  padding-inline: clamp(1rem, 0.2rem + 2.5vw, 1.75rem);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: clamp(1rem, 0.68rem + 1.2vw, 1.5rem);
  font-weight: 400;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.social-chip svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

/* The YouTube mark is a wide glyph (37.375 x 26.651), so it needs its own box
   or the shared 1em square above squashes it. */
.social-chip svg.social-chip__yt {
  width: 1.4em;
  height: 1em;
}

/* The middle chip sits rotated in the reference art */
.social-chip--tilt {
  transform: rotate(-11deg);
}

.social-chip:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-3px);
}

.social-chip--tilt:hover {
  transform: rotate(-11deg) translateY(-3px);
}

/*
 * Slate panel holding the giant wordmark + vision/goal cards.
 * Reference: panel x=18 y=940 w=1406 h=626 rx=20; wordmark ink 1246 x 240 at
 * y=1013; cards y=1330 h=174 rx=16 at x=71 (w=630) and x=725 (w=628) — so a
 * 53px side inset, a 24px gutter, and 62px below the cards.
 */
.panel {
  position: relative;
  background: var(--slate);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 0.5rem + 4.6vw, 4.1rem) clamp(1.25rem, 0.5rem + 3.3vw, 3.3rem)
    clamp(1.5rem, 0.6rem + 4.3vw, 3.9rem);
  overflow: hidden;
  isolation: isolate;
}

.panel__word {
  display: block;
  font-size: clamp(4rem, -1rem + 24.5vw, 21.05rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: rgb(255 255 255 / 30%);
  text-align: center;
  user-select: none;
  margin-bottom: clamp(1.5rem, 0.4rem + 3.4vw, 3rem);
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 0.55rem + 1.7vw, 1.5rem);
}

.vision-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 174px;
  background: var(--ink);
  border-radius: 16px;
  padding: clamp(1.25rem, 0.75rem + 1.9vw, 2rem);
  color: #fff;
}

.vision-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: 0.85rem;
}

.vision-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.vision-card__head img {
  width: 26px;
  height: 26px;
  flex: none;
}

.vision-card p {
  color: rgb(255 255 255 / 76%);
  font-size: var(--fs-sm);
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   Architecture ticker
   -------------------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  padding-block: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  width: max-content;
  animation: ticker-scroll 34s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  font-size: clamp(1.05rem, 0.85rem + 0.85vw, 1.6rem);
  font-weight: 400;
  color: var(--slate);
  white-space: nowrap;
}

.ticker__item--lead {
  font-weight: 700;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   Work process
   -------------------------------------------------------------------------- */
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 0.45rem + 1.1vw, 1.25rem);
  align-items: start;
}

.process-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--sh-md);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
}

/* Card image ratios follow the reference: 408x357, 415x503, 415x551. */
.process-card img {
  width: 100%;
  aspect-ratio: 408 / 357;
  object-fit: cover;
}

.process-card--tall img {
  aspect-ratio: 415 / 429;
}

.process-card--tallest img {
  aspect-ratio: 415 / 551;
}

.process-card__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.4rem 1.5rem;
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.1rem);
}

/*
 * Middle card: the gold panel runs *past* the bottom of the artwork in the
 * reference, so its caption sits in normal flow under the image rather than
 * overlaying it. The card itself carries the gold.
 */
.process-card--tall {
  background: var(--gold);
}

.process-card--tall .process-card__caption {
  position: static;
  background: none;
  padding-block: 1.5rem 2rem;
}

/* First card has no gold caption in the reference — it carries an arrow tile */
.process-card__arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  box-shadow: var(--sh-md);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.process-card__arrow:hover {
  background: var(--gold-600);
  transform: scale(1.08);
}

.process-card__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 780px) {
  .process__grid {
    grid-template-columns: 1fr;
  }

  .process-card img,
  .process-card--tall img {
    aspect-ratio: 16 / 10;
  }
}

/* --------------------------------------------------------------------------
   Certifications
   -------------------------------------------------------------------------- */
/*
 * The reference tucks this section into its neighbours: the heading sits just
 * above the bottom of the work-process cards, and the slate mastery panel
 * covers the lower edge of the certification circles.
 */
.certs {
  position: relative;
  isolation: isolate;
  padding-block: 0;
}

/* The circles only have room for the body copy on large screens; below that
   the layout switches to cards (see the max-width rule further down). */
@media (min-width: 1121px) {
  .certs {
    margin-top: calc(var(--section-y) * -1.2);
    margin-bottom: -44px;
  }
}

/* Two soft gradient washes sit behind this section in the reference:
   x=-196 y=2609 w=1051 h=346 and x=650 y=2885 w=892 h=397, both at 20%. */
.certs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(30% 40% at 10% 25%, rgb(198 214 255 / 45%) 0%, transparent 72%),
    radial-gradient(30% 40% at 88% 30%, rgb(255 226 196 / 45%) 0%, transparent 72%),
    radial-gradient(34% 44% at 60% 90%, rgb(232 220 255 / 40%) 0%, transparent 74%);
}

.certs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-5);
  margin-bottom: clamp(2rem, 1rem + 4vw, 4rem);
}

/* Thin bracket line that mirrors the reference layout */
.certs__rule {
  position: relative;
  height: 100%;
  min-height: 120px;
  margin-top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
}

/* Reference circles are 421px wide on a 422px pitch — they almost touch,
   spanning x=84..1349 (1265px), a little wider than the default shell. */
.certs > .shell {
  --shell-max: 1272px;
}

.certs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.cert-card {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  /* Content sits high in the circle in the reference: tile top at ~15.8%. */
  padding: 15.8% clamp(1rem, 0.4rem + 1.8vw, 2.25rem) 0;
  border-radius: 50%;
  aspect-ratio: 1;
  background: #fff;
  align-content: start;
}

/* The certification SVGs already bake in the 66x66 rounded tile and its
   drop shadow, so this wrapper must not add a second one. */
.cert-card__logo {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 1.25rem;
}

.cert-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cert-card h3 {
  font-size: 1.125rem;
  margin-bottom: 1.3rem;
  color: var(--slate);
}

/* Body copy is a left-aligned ragged column, centred within the circle. */
.cert-card p {
  font-size: var(--fs-xs);
  color: var(--slate);
  line-height: 1.31;
  max-width: 256px;
  text-align: left;
}

@media (max-width: 1120px) {
  /* The section loses its negative-margin overlap here, so it needs its own
     vertical rhythm back. */
  .certs {
    padding-block: var(--section-y);
  }

  .certs__head {
    grid-template-columns: 1fr;
  }

  .certs__rule {
    display: none;
  }

  .certs__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-5);
  }

  .cert-card {
    aspect-ratio: auto;
    padding: clamp(1.75rem, 1rem + 3vw, 2.5rem);
    border-radius: var(--r-xl);
    background: #fff;
    box-shadow: var(--sh-sm);
  }

  .cert-card p {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .certs__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Core mastery
   -------------------------------------------------------------------------- */
.mastery {
  position: relative;
  background: var(--slate);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1rem + 3.4vw, 6.75rem) clamp(1.75rem, 1rem + 3.4vw, 6.75rem);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Faint blueprint blocks in the background of the reference */
.mastery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
}

.mastery__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 72%);
  margin-bottom: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}

.mastery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
  align-items: center;
}

.mastery h2 {
  font-size: clamp(1.9rem, 1rem + 3.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.mastery__lead {
  color: rgb(255 255 255 / 78%);
  font-size: var(--fs-lead);
  margin-bottom: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  max-width: 46ch;
}

.mastery__lead strong {
  color: #fff;
  font-weight: 700;
}

.mastery__tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 34rem;
}

/* Reference stacks the icon above the label, two pills side by side. */
.mastery-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.mastery-tag img {
  width: 26px;
  height: 26px;
  flex: none;
}

.mastery__cards {
  display: grid;
  gap: clamp(0.85rem, 0.5rem + 1.2vw, 1.35rem);
}

/*
 * Reference: card x=734.5 w=583.5 h=176 rx=8, fill #22262F at 40% over the
 * panel, hairline stroke in cyan then lime. Padding derives from the title ink
 * at x=768.8 y=3275.3 and the meter at y=3372.8 (34px inline, ~34px block).
 */
.mastery-card {
  background: rgb(34 38 47 / 40%);
  border: 1px solid #81ecff;
  border-radius: var(--r-md);
  padding: clamp(1.1rem, 0.75rem + 1.3vw, 2.1rem);
}

.mastery-card:nth-child(2) {
  border-color: #9ffb00;
}

.mastery-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: 0.6rem;
}

.mastery-card h3 {
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
  color: #ecedf6;
}

.mastery-card__head img,
.mastery-card__head svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.mastery-card p {
  color: #a9abb3;
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

/* Track 517.5 x 6 rx=3 in #161A21. */
.meter {
  height: 6px;
  border-radius: var(--r-pill);
  background: #161a21;
  overflow: hidden;
}

.meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--meter-color, var(--gold));
  width: 0;
  transition: width 1.1s var(--ease);
}

.is-visible .meter__fill {
  width: var(--meter-value, 90%);
}

@media (max-width: 900px) {
  .mastery__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Featured projects (inside the slate panel)
   -------------------------------------------------------------------------- */
/* Panel x=16 y=3706 w=1408 h=564; title ink y=3762 (~48px, regular weight). */
.featured {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 3.5rem);
}

.featured__title {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem);
  font-weight: 400;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3.45rem);
}

/* Two 590x332 cards at x=120 and x=734 — a 24px gutter inside a 1204px band. */
.featured__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.5rem + 1.7vw, 1.5rem);
  max-width: 1204px;
  margin-inline: auto;
}

.article-card {
  display: grid;
  grid-template-columns: minmax(0, 293fr) minmax(0, 297fr);
  min-height: 332px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card-tint, var(--tint-cream));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
}

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

/*
 * Ink positions inside a card whose top is y=3873: kicker 3908.8, title 3951.2,
 * date 4046.6, excerpt 4100.6 (one line), pill 4143.5 — so ~36px of top padding
 * and roughly 15px between rows.
 */
.article-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.25rem + 0.7vw, 0.95rem);
  padding: clamp(1.1rem, 0.7rem + 1.5vw, 2.2rem) clamp(1rem, 0.8rem + 0.8vw, 1.55rem)
    clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
}

.article-card__kicker {
  font-size: clamp(0.75rem, 0.68rem + 0.3vw, 1.0625rem);
  font-weight: 600;
  color: var(--card-accent, var(--gold-600));
  letter-spacing: 0.01em;
}

.article-card h3 {
  font-size: clamp(1.15rem, 0.85rem + 1.2vw, 2rem);
  color: var(--navy);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.article-card__date {
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.375rem);
  color: var(--navy);
  font-weight: 500;
}

.article-card__excerpt {
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1.0625rem);
  color: var(--muted-plum);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pill 118 x 37 rx=18.5, white fill, 1px #33AA00 stroke. */
.article-card__link {
  display: inline-grid;
  place-items: center;
  margin-top: auto;
  min-width: 118px;
  height: 37px;
  padding-inline: 1rem;
  background: #fff;
  border: 1px solid #33aa00;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #33aa00;
  justify-self: start;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.article-card__link:hover {
  background: #33aa00;
  color: #fff;
}

@media (max-width: 900px) {
  .featured__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .article-card {
    grid-template-columns: 1fr;
  }

  .article-card img {
    aspect-ratio: 16 / 10;
  }
}

/* --------------------------------------------------------------------------
   Recent work
   -------------------------------------------------------------------------- */
/* Three 384px columns at x=105/531/957 — a 42px gutter, images 384x184. */
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.2rem + 2.9vw, 2.6rem);
}

.work-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.work-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
}

.work-card img {
  width: 100%;
  aspect-ratio: 384 / 184;
  object-fit: cover;
}

/* Body block y=4657 h=288; title ink 4685.1, date 4736.8, copy 4790.5. */
.work-card__body {
  padding: clamp(1.1rem, 0.7rem + 1.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.85rem);
  flex: 1;
}

.work-card h3 {
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.625rem);
  color: var(--navy);
  letter-spacing: -0.02em;
}

.work-card__date {
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1875rem);
  color: var(--navy);
  font-weight: 500;
}

.work-card p {
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  color: var(--muted-plum);
  line-height: 1.6;
}

.work-card__link {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-600);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.work-card__link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}

.work-card__link:hover svg {
  transform: translate(3px, -3px);
}

@media (max-width: 900px) {
  .work__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
/*
 * Quote cards on a dark panel: one featured review spanning two columns, four
 * supporting reviews around it. Star ratings are a masked SVG tile (see .stars)
 * so a single element renders five stars in any colour.
 */
.testimonials {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 90% at 88% 0%, rgb(244 163 0 / 16%) 0%, transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgb(129 236 255 / 10%) 0%, transparent 62%),
    var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.2rem + 3.4vw, 4rem) clamp(1.1rem, 0.4rem + 2.8vw, 3.25rem)
    clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  overflow: hidden;
}

.testimonials__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.testimonials .eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-xs);
}

.testimonials h2 {
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.25rem);
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Aggregate rating block, right-aligned against the heading */
.testimonials__score {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 4%);
}

.testimonials__score-value {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.testimonials__score-note {
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 62%);
}

/* --- star rating ---------------------------------------------------------
   One 24x19 tile per star (a 20-wide star with 2 units of gutter), repeated
   five times. Sizing comes from --star, colour from currentColor. */
.stars {
  --star: 15px;
  display: block;
  width: calc(var(--star) * 5 * 24 / 19);
  height: var(--star);
  background: var(--gold);
  -webkit-mask-image: var(--star-mask);
  mask-image: var(--star-mask);
  -webkit-mask-size: 20% 100%;
  mask-size: 20% 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

.stars--lg {
  --star: 18px;
}

:root {
  --star-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 19"><path d="m12 0 2.9 6.03 6.63.88-4.83 4.6 1.2 6.57L12 14.9l-5.9 3.18 1.2-6.57L2.47 6.91l6.63-.88z" fill="%23000"/></svg>');
}

/* --- grid ---------------------------------------------------------------- */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 0.5rem + 1.2vw, 1.35rem);
}

.tcard--featured {
  grid-column: span 2;
}

/* --- card ---------------------------------------------------------------- */
.tcard {
  --tcard-quote: rgb(255 255 255 / 82%);
  --tcard-name: #fff;
  --tcard-meta: rgb(255 255 255 / 55%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.15rem);
  padding: clamp(1.25rem, 0.85rem + 1.4vw, 2rem);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 5%);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

.tcard:hover {
  transform: translateY(-4px);
  border-color: rgb(244 163 0 / 55%);
  background: rgb(255 255 255 / 8%);
}

/* Featured card flips to cream, so its accents need the darker gold */
.tcard--featured {
  --tcard-quote: var(--ink);
  --tcard-name: var(--ink);
  --tcard-meta: var(--muted);
  background: var(--gold-100);
  border-color: transparent;
}

.tcard--featured:hover {
  background: #fff6e0;
}

.tcard--featured .stars {
  background: var(--gold-700);
}

.tcard__mark {
  position: absolute;
  top: -0.35em;
  right: 0.35em;
  font-size: 8rem;
  line-height: 1;
  font-weight: 800;
  color: rgb(244 163 0 / 22%);
  user-select: none;
  pointer-events: none;
}

.tcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.tcard__tag {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgb(244 163 0 / 16%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.tcard--featured .tcard__tag {
  background: rgb(168 110 0 / 14%);
  color: var(--gold-700);
}

.tcard__quote p {
  font-size: clamp(0.9375rem, 0.86rem + 0.35vw, 1.0625rem);
  line-height: 1.7;
  color: var(--tcard-quote);
}

.tcard--featured .tcard__quote p {
  font-size: clamp(1rem, 0.85rem + 0.8vw, 1.375rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.tcard__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: clamp(0.5rem, 0.3rem + 0.5vw, 0.75rem);
}

.tcard__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold-600) 100%);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.tcard__id {
  display: grid;
  min-width: 0;
}

.tcard__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--tcard-name);
}

.tcard__meta {
  font-size: var(--fs-xs);
  color: var(--tcard-meta);
}

/* Tablet: featured spans the full width, supporting cards pair up below */
@media (max-width: 1000px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tcard--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  .testimonials__head {
    align-items: flex-start;
  }

  .testimonials__score {
    width: 100%;
  }

  .tcard__mark {
    font-size: 5.5rem;
  }
}

/* --------------------------------------------------------------------------
   Deep knowledge
   -------------------------------------------------------------------------- */
.knowledge__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 2vw, 1.75rem);
}

.knowledge-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.knowledge-card__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.knowledge-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.knowledge-card:hover .knowledge-card__media img {
  transform: scale(1.04);
}

/* Medium wordmark badge, bottom-right of each thumbnail */
.knowledge-card__badge {
  position: absolute;
  right: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  bottom: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #000;
  border-radius: 50%;
  box-shadow: var(--sh-md);
}

.knowledge-card__badge img {
  width: 30px;
  height: 30px;
  aspect-ratio: auto;
}

.knowledge-card h3 {
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  color: var(--slate);
  letter-spacing: -0.025em;
}

.knowledge-card p {
  font-size: var(--fs-sm);
  color: var(--slate);
}

@media (max-width: 900px) {
  .knowledge__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
/* Reference leaves only 67px between the About box and the footer card, so this
   section keeps the standard top rhythm but a much tighter bottom. */
.about {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 4.2rem);
}

/* Reference gives About a slightly wider column than the default shell:
   the outlined box sits at x=82 w=1278, and the gallery at x=62..1344. */
.about > .shell {
  --shell-max: 1282px;
}

/* Ghost wordmark: reference ink is 1149.8 x 246.9, so ~340px cap height. */
.about__word {
  display: block;
  text-align: center;
  font-size: clamp(4.5rem, -2rem + 25.8vw, 21.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--gold-100);
  user-select: none;
  /* Pull the gallery up so it overlaps the lower third of the word. */
  margin-bottom: clamp(-5.5rem, -1rem - 5vw, -1rem);
}

/* Five items, 4px apart, filling the 1282px column (254px each at 1440). */
.about__gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: clamp(2rem, 1rem + 4.5vw, 5.5rem);
}

.about__gallery picture {
  flex: 1 1 0;
  min-width: 0;
  max-width: 254px;
}

.about__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid var(--gold);
  transition: transform 0.35s var(--ease);
}

/*
 * Alternating circle / rounded-square rhythm from the reference. Each image is
 * wrapped in its own <picture>, so the rhythm has to key off the wrappers —
 * nth-child on the img itself always matches the first (and only) child.
 */
.about__gallery picture:nth-child(odd) img {
  border-radius: 50%;
}

.about__gallery picture:nth-child(even) img {
  border-radius: 10px;
}

.about__gallery img:hover {
  transform: translateY(-8px) scale(1.04);
}

.about__box {
  border: 2px solid var(--slate);
  border-radius: 15px;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 1.9rem) clamp(1rem, 0.7rem + 0.9vw, 1.2rem);
  background: #fff;
}

.about__box-head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 2.8vw, 3rem);
  margin-bottom: 1.25rem;
}

.about__box h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  color: var(--ink);
}

.about__box-head img {
  width: 28px;
  height: 28px;
}

.about__box p + p {
  margin-top: 1rem;
}

.about__box p {
  color: var(--slate);
  font-size: var(--fs-sm);
  line-height: 1.75;
  max-width: 105ch;
}

@media (max-width: 860px) {
  .about__gallery {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* The flex item is the <picture>, so it has to stop shrinking here or the
     images collapse instead of scrolling. */
  .about__gallery picture {
    flex: none;
    width: clamp(140px, 42vw, 190px);
    scroll-snap-align: center;
  }
}

/* --------------------------------------------------------------------------
   Contact + footer
   -------------------------------------------------------------------------- */
/* Reference floats a rounded dark card that stops short of the viewport edges. */
.footer {
  padding-bottom: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem);
  color: #fff;
}

/* Reference: card x=79 w=1281 — a touch wider than the default shell. */
.footer > .shell {
  --shell-max: 1282px;
}

/*
 * Card x=79 y=7417 w=1281 h=444.9 rx=20; the slate panel inside sits at
 * x=142 y=7466 — a 63px inset on both sides and 49px from the top.
 */
.footer__card {
  background: var(--ink);
  border-radius: 20px;
  padding: clamp(1.5rem, 1rem + 2.2vw, 3.06rem) clamp(1.25rem, 0.4rem + 4.4vw, 3.94rem)
    clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Inner slate card: 1155 x 195.9, rx=20, 20px inline padding. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1.2rem + 1.4vw, 1.35rem);
  align-items: start;
  background: var(--slate);
  border-radius: 20px;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem) clamp(1rem, 0.85rem + 0.5vw, 1.25rem)
    clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 0.9rem + 2vw, 1.55rem);
}

/* Heading ink x=161.9 y=7500.4 w=547.8 h=87.1 — two lines at ~44px. */
.contact h2 {
  font-size: clamp(1.5rem, 0.95rem + 2.1vw, 2.75rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: clamp(0.85rem, 0.6rem + 1vw, 1.3rem);
}

.contact__list {
  display: flex;
  gap: clamp(1rem, 0.4rem + 2.4vw, 3.65rem);
  flex-wrap: wrap;
}

.contact__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  font-weight: 600;
}

.contact__list img {
  width: 22px;
  height: 22px;
  flex: none;
}

.contact__list a:hover {
  color: var(--gold);
}

/* Right column ink x=771.3 y=7496.1 w=482.3 h=56.6 — three lines at ~15px. */
.contact__aside p {
  color: rgb(255 255 255 / 88%);
  font-size: clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem);
  line-height: 1.55;
  max-width: 483px;
  margin-bottom: clamp(1rem, 0.6rem + 1.5vw, 1.9rem);
}

/* Outline button 174x53 rx=7 with the gold tile flush against it at x=947. */
.contact__cta {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}

.contact__cta .btn {
  min-width: 174px;
  height: 53px;
  padding: 0 1.4rem;
  border-width: 2px;
  border-radius: 7px;
  font-size: 1rem;
}

.contact__cta .btn-tile {
  width: 56px;
}

/* Bar sits between the slate card and the rule: pill y=7686.9, rule y=7760.2. */
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-bottom: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

/* Same pill as the header nav: 370 x 49 rx=8 slate, 78 x 37 rx=6 active chip. */
.footer__nav {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  background: var(--slate);
  border-radius: var(--r-md);
}

.footer__nav a {
  display: grid;
  place-items: center;
  height: 37px;
  padding-inline: clamp(0.75rem, 0.3rem + 1.3vw, 1.2rem);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: #fff;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.footer__nav a:hover,
.footer__nav a.is-active {
  color: #fff;
  background: var(--ink);
}

/* Three 48x48 rx=10 tiles on a 54px pitch. */
.footer__socials {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer__socials a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #d9d9d9;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}

.footer__socials a:hover {
  transform: translateY(-3px);
  background: var(--gold);
}

.footer__socials img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Rule y=7760.2 spans x=142..1297 at 1.5px; copyright ink y=7794.4, ~17px. */
.footer__copy {
  padding-top: clamp(1rem, 0.75rem + 1.2vw, 1.7rem);
  border-top: 1.5px solid #fff;
  text-align: center;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
  color: rgb(255 255 255 / 92%);
}

@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
  }

  .footer__bar {
    justify-content: center;
    text-align: center;
  }
}