/* ============================================================
   keshin.work — Home page (Figma: 1.0 UI - Home, Web/Tablet/Mobile)
   ------------------------------------------------------------
   Section-by-section translation of the updated Figma home page.
   Colors and the responsive type scale come from css/tokens.css;
   buttons, cta-links, tags and the footer from css/components.css.
   Loaded only by index.html, after style.css (fonts/base live
   there) — all class names here are new, so legacy rules stay
   inert on this page.
   ============================================================ */

/* The home sections own their spacing — the footer sits flush. */
body.home .site-footer { margin-top: 0; }

/* ============================================================
   1.0 — HERO  (centered, no accent color in the H1)
   ============================================================ */
.home-hero {
  /* Fill the first viewport (minus the 104px header), but stay sane
     on very tall windows — a hero should never be 2000px deep. */
  min-height: min(calc(100vh - 104px), 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--page-gutter);
  position: relative;
}

.home-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
  padding-bottom: 56px;            /* room for the scroll indicator */
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  width: 100%;
}

.home-hero-heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Hairline/Hairline - 12 */
.home-hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-60);
}

/* 1. Display/D1 — Web 112 / Tablet 72 / Mobile 56 */
.home-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d1);
  line-height: var(--lh-d1);
  letter-spacing: var(--ls-d1);
  color: var(--color-gray-80);
}

/* 4. Body/M - 18/Regular */
.home-hero-body {
  margin: 0;
  max-width: 732px;
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--ls-body-m);
  color: var(--color-gray-60);
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* 2. scroll-to-explore */
.home-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: var(--lh-caption);
  color: var(--color-gray-60);
  white-space: nowrap;
}

.home-hero-scroll .scroll-dot { animation: scroll-nudge 2s ease-in-out infinite; }

@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-scroll .scroll-dot { animation: none; }
}

/* ============================================================
   2.0 — PROJECT SNAPSHOT (base styles in style.css)
   ------------------------------------------------------------
   Tablet/mobile zoom into the collage the way the Figma frames
   do: the grid renders larger than the viewport and hangs left.
   Percentages derive from the frames' grid scale and offsets.
   ============================================================ */
@media (max-width: 1024px) {
  .snapshot-img { width: 140.6vw; margin-left: -15.1vw; }
}
@media (max-width: 767px) {
  .snapshot-img { width: 292.6vw; margin-left: -106.9vw; }
}

/* ============================================================
   3.0 — ABOUT ME
   ============================================================ */
.home-about {
  padding: 0 var(--page-gutter) var(--section-pad-b);
}

.home-about-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.home-about-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-about-header hr {
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-border);
  opacity: 1;
}

/* 2. Heading/H4 */
.home-about-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-gray-80);
}

.home-about-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.home-about-photo {
  width: 302px;
  flex-shrink: 0;
}

.home-about-photo img {
  width: 100%;
  height: 416px;
  object-fit: cover;
  display: block;
}

.home-about-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 64px;
}

/* 4. Body/XXL - 28/Medium → XL on tablet → L on mobile */
.home-about-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-xxl);
  font-weight: 500;
  line-height: var(--lh-body-xxl);
  letter-spacing: var(--ls-body-xxl);
  color: var(--color-gray-80);
}

.home-about-sub {
  margin-left: 326px;
  max-width: 628px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.home-about-cols {
  display: flex;
  gap: 24px;
}

/* 4. Body/S - 15/Regular */
.home-about-cols p {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
  color: var(--color-gray-60);
}

/* 3. Stats */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 80px;
}

.home-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-display);
  color: var(--color-gray-80);
}

/* 5. Stat/Label (H5 on web) */
.home-stat-label {
  font-size: var(--text-stat-label);
  line-height: var(--lh-stat-label);
  letter-spacing: 0.2px;
}

/* 5. Stat/Number (D2 on web) */
.home-stat-value {
  font-size: var(--text-stat-num);
  line-height: var(--lh-stat-num);
  letter-spacing: var(--ls-stat-num);
}

.home-stat-value img { display: block; height: 40px; width: auto; margin: 16px 0; }

/* ============================================================
   4.0 — CAPABILITIES  (hairline-ruled, staggered 2-col grid)
   ============================================================ */
.caps {
  padding-bottom: var(--section-pad-b);
}

.caps-frame {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--page-gutter);
}

.caps-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 128px;
}

.caps-header {
  width: 416px;
  flex-shrink: 0;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* 1. Display/D2 + brand dot */
.caps-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--color-gray-80);
}

.caps-title .dot { color: var(--color-brand); }

/* 4. Body/M - 18/Regular */
.caps-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--ls-body-m);
  color: var(--color-gray-60);
}

.caps-grid {
  flex: 1;
  min-width: 0;
  display: flex;
  border-right: 1px solid var(--color-border);
}

.caps-col {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.caps-spacer { height: 264px; }

.caps-card {
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.caps-col .caps-card:last-child { border-bottom: 0; }
.caps-spacer + .caps-card { border-top: 1px solid var(--color-border); }

.caps-card-media {
  height: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.caps-card-media img {
  height: 80px;
  width: auto;
  display: block;
}

/* 2. Heading/H5 index number */
.caps-card-num {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  color: var(--color-gray-60);
}

.caps-card-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 2. Heading/H4 */
.caps-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-gray-80);
}

/* 4. Body/S - 15/Regular */
.caps-card-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
  color: var(--color-gray-60);
}

/* ============================================================
   5.0 — WORK
   ============================================================ */
.home-work {
  padding-bottom: var(--section-pad-b);
}

.home-work-header {
  padding: 40px var(--page-gutter);
}

.home-work-title {
  margin: 0;
  max-width: 1280px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--color-gray-80);
}

.home-work-title .dot { color: var(--color-brand); }

.home-work-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Card shell — whole card is the link */
.work-card {
  display: block;
  padding: 0 24px;
  text-decoration: none;
}

.work-card-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1392px;
  margin: 0 auto;
}

/* Left: media panel (fixed 901:704 aspect, tinted background) */
.work-media {
  flex: 1 1 0;
  min-width: 480px;
  max-width: 901px;
  aspect-ratio: 901 / 704;
  position: relative;
  overflow: hidden;
  background: var(--card-bg, #E2E2E2);
}

/* Gradient watermark behind the thumbnail */
.work-watermark {
  position: absolute;
  top: 6.8%;
  left: var(--wm-left, 12.9%);
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(72px, 12.64vw, 182px);
  line-height: 0.824;
  letter-spacing: -0.07em;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--wm-from), var(--wm-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

.work-media--center .work-watermark {
  left: 50%;
  transform: translateX(-50%);
}

/* Thumbnail slot — per-card geometry via CSS vars */
.work-thumb {
  position: absolute;
  overflow: hidden;
}

.work-thumb img {
  position: absolute;
  max-width: none;
  display: block;
}

/* midlane — dashboard in a 22px-radius frame */
.work-card--midlane { --card-bg: #EDE3D7; --wm-from: rgba(39, 62, 61, 0.2); --wm-to: rgba(62, 62, 62, 0.02); }
.work-card--midlane .work-thumb {
  left: 6.2%; top: 24.4%; width: 81.8%; height: 68.75%;
  border-radius: clamp(10px, 1.5vw, 22px);
}
.work-card--midlane .work-thumb img {
  width: 145.73%; height: 184.92%; left: -22.8%; top: -42.51%;
}

/* Cygnus — portrait site screenshot, centered */
.work-card--cygnus { --card-bg: #E2E2E2; --wm-from: rgba(3, 51, 115, 0.2); --wm-to: rgba(62, 62, 62, 0.02); }
.work-card--cygnus .work-thumb {
  left: 50%; top: 24.8%; width: 55%; transform: translateX(-50%);
  border-radius: 12px; aspect-ratio: 720 / 856; height: auto;
}
.work-card--cygnus .work-thumb img { width: 100%; height: 100%; object-fit: cover; position: static; }

/* Holon IQ — oversized laptop mock bleeding off-canvas */
.work-card--holoniq { --card-bg: #E2E2E2; --wm-from: rgba(3, 51, 115, 0.2); --wm-to: rgba(62, 62, 62, 0.02); }
.work-card--holoniq .work-thumb {
  left: 71.5%; top: 17.5%; width: 170.8%; height: 166.9%;
  transform: translateX(-50%);
  overflow: visible;
}
.work-card--holoniq .work-thumb img { width: 100%; height: 100%; object-fit: cover; position: static; }

/* Comersio — phone in a 44px-radius frame, centered */
.work-card--comersio { --card-bg: #E9EFE8; --wm-left: 7.2%; --wm-from: #DBE3DC; --wm-to: rgba(231, 236, 230, 0.8); }
.work-card--comersio .work-thumb {
  left: 50%; top: 15.3%; width: 29.5%; height: 78.1%; transform: translateX(-50%);
  border-radius: clamp(20px, 3vw, 44px);
}
.work-card--comersio .work-thumb img {
  width: 545.45%; height: 548.73%; left: -131.06%; top: -25.09%;
}

/* Right: copy panel (same tint, stretches to media height) */
.work-copy {
  flex: 1 1 0;
  min-width: 360px;
  max-width: 491px;
  align-self: stretch;
  background: var(--card-bg, #E2E2E2);
  padding: 80px 56px 80px 24px;
  display: flex;
}

.work-copy-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;      /* cta-link underline hugs its label */
  gap: 32px;
}
.work-copy-inner > * { max-width: 100%; }
.work-tags { align-self: stretch; }

.work-heading-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Display/D3 — brand name dark, descriptor muted */
.work-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d3);
  line-height: var(--lh-d3);
  letter-spacing: var(--ls-d3);
  color: var(--color-gray-80);
}

.work-title .muted { color: var(--color-gray-60); }

/* 4. Body/S - 15/Medium */
.work-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: 500;
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
  color: var(--color-gray-60);
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: center;
}

/* 3. Work Actions */
.home-work-actions {
  display: flex;
  justify-content: center;
  padding-top: 32px;
}

/* ============================================================
   6.0 — EXPERIENCE
   ============================================================ */
.exp {
  background: var(--surface-10);
  padding: var(--section-pad-b) var(--page-gutter);
}

.exp-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.exp-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--color-gray-80);
}

.exp-title .dot { color: var(--color-brand); }

.exp-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* 1. experience-gallery-card — collage + scrims + caption */
.exp-gallery {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 421.33px;
  aspect-ratio: 421.33 / 526;
  position: relative;
  overflow: hidden;
}

.exp-gallery > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* scrim-shape-a (#111112) + scrim-shape-b (brand blue), 0 → 80% */
.exp-gallery::before,
.exp-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
}
.exp-gallery::before { background: linear-gradient(180deg, rgba(17, 17, 18, 0) 0%, rgba(17, 17, 18, 0.8) 100%); }
.exp-gallery::after  { background: linear-gradient(180deg, rgba(0, 47, 167, 0) 0%, rgba(0, 47, 167, 0.8) 100%); }

.exp-gallery-caption {
  position: absolute;
  left: 7.6%;
  right: 7.6%;
  bottom: 6%;
  margin: 0;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.21;
  color: #FFFFFF;
}

/* 2. testimonial-card */
.exp-testimonial {
  flex: 1 1 0;
  min-width: 300px;
  background: var(--surface-20);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.exp-testimonial-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.exp-dots { display: flex; gap: 8px; }

.exp-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-gray-60);
  cursor: pointer;
  transition: background-color .2s ease;
}

.exp-dots button.active { background: var(--color-brand); }

/* 4. Body/L - 20/Medium */
.exp-quote {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-l);
  font-weight: 500;
  line-height: var(--lh-body-l);
  letter-spacing: var(--ls-body-l);
  color: var(--color-gray-80);
}

.exp-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.exp-author-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.exp-author-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-title-2);       /* 3. Title/Title - 2 - 20 */
  font-weight: 600;
  line-height: var(--lh-title-2);
  letter-spacing: var(--ls-title-2);
  color: var(--color-gray-80);
}

.exp-author-name img { width: 20px; height: 20px; }

.exp-author-role {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: 500;
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
  color: var(--color-gray-60);
}

/* 3. stats-cards */
.exp-stats {
  flex: 1 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-rating {
  height: 274px;
  background: var(--color-brand-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.exp-rating-value {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 72px;
  letter-spacing: 0.2px;
  color: var(--color-brand);
}

.exp-rating-stars { display: flex; gap: 1px; }
.exp-rating-stars img { width: 24px; height: 24px; }

.exp-rating-count {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-80);
}

.exp-clients {
  flex: 1;
  min-height: 180px;
  background: var(--color-brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-gray-10);
}

.exp-clients-label {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
}

.exp-clients-value {
  font-family: var(--font-display);
  font-size: 112px;
  line-height: 112px;
  letter-spacing: -0.4px;
}

/* ============================================================
   RESPONSIVE — Tablet (≤1024, mirrors the 1024 frame)
   ============================================================ */
@media (max-width: 1024px) {
  .home-hero-body { max-width: 554px; }

  .home-about-inner { gap: 48px; }
  .home-about-photo { width: 218px; }
  .home-about-photo img { height: 323px; }
  .home-about-sub { margin-left: 242px; max-width: 621px; }
  .home-stats { padding-top: 72px; }

  .caps-inner { gap: 0; }
  .caps-header { width: 299px; padding-top: 80px; padding-right: 24px; }
  .caps-spacer { height: 252px; }

  .work-media { min-width: 400px; }
  .work-copy { min-width: 320px; padding: 56px 40px 56px 16px; }

  .exp-gallery-caption { font-size: 20px; }
  .exp-rating { height: 240px; }
  .exp-clients-value { font-size: 72px; line-height: 72px; letter-spacing: 0.2px; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤767, mirrors the 375 frame)
   ============================================================ */
@media (max-width: 767px) {
  .home-hero { min-height: calc(100vh - 80px); }
  .home-hero-content { gap: 32px; padding-bottom: 72px; }
  .home-hero-copy { gap: 20px; }

  /* Hairline - Mobile - 13 */
  .home-hero-eyebrow { font-size: var(--text-hairline-13); }

  .home-hero-body {
    font-size: var(--text-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
  }

  .home-hero-actions {
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
  }
  .home-hero-actions .k-btn { width: 100%; min-height: 48px; }
  .home-hero-scroll { bottom: 24px; }

  /* About: heading → photo → intro → columns */
  .home-about-inner { gap: 40px; }
  .home-about-row { flex-direction: column; gap: 24px; }
  .home-about-photo { width: 100%; }
  .home-about-photo img { height: 504px; }
  .home-about-copy { gap: 48px; }
  .home-about-sub { margin-left: 0; max-width: none; }
  .home-about-cols { flex-direction: column; gap: 24px; }

  .home-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
    padding-top: 32px;
  }
  .home-stat-value img { height: 24px; margin: 12px 0; }

  /* Capabilities: single stacked column, cards back in 01–07 order */
  .caps-frame { padding: 40px var(--page-gutter); border-top: 0; border-bottom: 0; }
  .caps-inner { flex-direction: column; gap: 40px; }
  .caps-header { width: 100%; padding-top: 0; padding-right: 0; }
  .caps-grid {
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-bottom: 0;
  }
  /* Dissolve the two desktop columns so the cards interleave 01–07 */
  .caps-col { display: contents; }
  .caps-card { border-bottom: 1px solid var(--color-border); order: 9; }
  .caps-col:first-child .caps-card:nth-child(1) { order: 1; }  /* 01 */
  .caps-col:first-child .caps-card:nth-child(2) { order: 2; }  /* 02 */
  .caps-col:first-child .caps-card:nth-child(3) { order: 4; }  /* 04 */
  .caps-col:first-child .caps-card:nth-child(4) { order: 6; }  /* 06 */
  .caps-col:last-child  .caps-card:nth-child(2) { order: 3; }  /* 03 */
  .caps-col:last-child  .caps-card:nth-child(3) { order: 5; }  /* 05 */
  .caps-col:last-child  .caps-card:nth-child(4) { order: 7; }  /* 07 */
  .caps-spacer { display: none; }
  .caps-spacer + .caps-card { border-top: 0; }
  .caps-card-media { align-items: center; }

  /* Work */
  .home-work-header { padding: 40px var(--page-gutter) 24px; }
  .work-card { padding: 0; }
  .work-media { min-width: 100%; }
  .work-copy { min-width: 100%; max-width: none; align-self: auto; padding: 24px 16px; }
  .work-copy-inner { justify-content: flex-start; }
  .work-heading-block { gap: 16px; }
  .home-work-actions { padding-top: 40px; }

  /* Experience */
  .exp-row { flex-direction: column; }
  .exp-gallery { max-width: none; aspect-ratio: 343 / 430; }
  .exp-gallery-caption { left: 14px; right: 14px; bottom: 24px; font-size: 20px; line-height: 24px; }

  .exp-dots button { width: 8px; height: 8px; }
  .exp-quote { font-weight: 400; }
  .exp-author-avatar { width: 48px; height: 48px; }
  .exp-author { gap: 12px; }
  .exp-author-name { font-size: var(--text-body-s); line-height: var(--lh-body-s); letter-spacing: var(--ls-body-s); font-weight: 500; gap: 4px; }
  .exp-author-role { font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: 0; font-weight: 400; }
  .exp-testimonial { gap: 120px; justify-content: flex-start; }

  .exp-rating { height: 228px; }
  .exp-rating-value { font-size: 56px; line-height: 56px; letter-spacing: -0.4px; color: var(--color-gray-80); }
  .exp-rating-stars img { width: 16px; height: 16px; }
  .exp-rating-count { font-size: var(--text-hairline-13); color: var(--color-gray-60); }
  .exp-clients { min-height: 228px; flex: none; }
  .exp-clients-label { font-size: var(--text-hairline-13); }
  .exp-clients-value { font-size: 72px; line-height: 72px; letter-spacing: 0.2px; }
}