/* ── Reset & base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Typography tokens — colours live in variables.css */
      --font:     'Inter', system-ui, sans-serif;
      --font-alt: 'Montserrat Alternates', sans-serif;
    }

    html {
      scroll-behavior: smooth;
      background-color: #141526;
      overscroll-behavior-y: none;
      /* clip instead of hidden — doesn't create a scroll container, so position:sticky works */
      overflow-x: clip;
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--white);
      overflow-x: hidden;
    }

    /* Navigation & footer → css/common.css */


    /* ─────────────────────────────────────────
       1. HERO  (mobile-first, 3 breakpoints)
    ───────────────────────────────────────── */

    /* ── Mobile default (<640px) ── */
    #hero {
      height: 100dvh;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 40px 60px;
      position: relative;
      overflow: hidden;
      background: var(--bg);
    }

    /* Glow orbs from Figma */
    .hero-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-glow-1 {
      width: 1028px; height: 1028px;
      left: -180px; top: -346px;
      background: radial-gradient(circle, rgba(118,165,255,.18) 0%, rgba(118,165,255,.06) 35%, transparent 70%);
    }
    .hero-glow-2 {
      width: 831px; height: 831px;
      right: -239px; bottom: -102px;
      background: radial-gradient(circle, rgba(121,248,248,.15) 0%, rgba(121,248,248,.05) 35%, transparent 70%);
    }

    /* Brand: stack on mobile, row on tablet/desktop */
    .hero-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      position: relative;
      z-index: 1;
      white-space: nowrap;
      line-height: 1;
    }

    /* "wuruw." — Montserrat Alternates */
    .hero-wordmark-text {
      font-family: var(--font-alt);
      font-weight: 400;
      font-size: clamp(44px, 11.6vw, 56px);
      letter-spacing: -0.02em;
      color: var(--white);
      line-height: 1;
    }

    /* Animated accent wrap — Figma: Inter Regular 50/47.5/-2px on desktop,
       scales proportionally on smaller breakpoints.
       Width/height/baseline is set by hidden sizer inside — this allows
       align-items: baseline on .hero-brand to correctly align the accent with 'wuruw.'. */
    .hero-accent-wrap {
      position: relative;
      display: inline-block;
      overflow: visible;
      font-family: var(--font); /* Inter */
      font-weight: 400;          /* Figma: Regular */
      font-size: clamp(28px, 7.25vw, 35px);
      /* Figma line-height = 47.5/50 = 0.95, but that's line-spacing.
         In CSS, line-height sets the line-box size, to which
         background-clip: text is tied. Inter has natural glyph height ~1.21em,
         so at 0.95 the descender 'g' falls outside the background-area and
         gets visually clipped. For single-line, override to 1.25 — it doesn't
         affect glyph position, but the gradient covers all text. */
      line-height: 1.25;
      letter-spacing: -0.04em;   /* Figma: -2px @ 50px */
    }

    /* Hidden sizer: holds the real text baseline for inline-block wrap
       and reserves width for the longest phrase. */
    .hero-accent-sizer {
      display: inline-block;
      visibility: hidden;
      font: inherit;
      letter-spacing: inherit;
      white-space: nowrap;
    }

    .hero-accent {
      position: absolute;
      left: 0; top: 0;            /* over the sizer, baseline aligned */
      white-space: nowrap;
      display: block;
      font: inherit;
      letter-spacing: inherit;
      background: linear-gradient(90deg, var(--blue), var(--aqua));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Animation states: text always slides up and enters from below */
    .hero-accent.exit-up          { opacity:0; transform:translateY(-60%); transition:opacity .35s ease,transform .35s ease; -webkit-text-fill-color:transparent; }
    .hero-accent.enter-from-below { opacity:0; transform:translateY( 60%); transition:none; -webkit-text-fill-color:transparent; }
    .hero-accent.enter-active     { opacity:1; transform:translateY(0);    transition:opacity .4s ease .05s,transform .4s ease .05s; -webkit-text-fill-color:transparent; }

    .hero-scroll {
      margin-top: 40px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--color-divider-light);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.154em;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }
    .hero-scroll::before {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: var(--color-divider-light);
    }

    /* ── Tablet ≥640px ── */
    @media (min-width: 640px) and (min-height: 600px) {
      #hero {
        padding: 0 48px 80px;
      }
    }

    /* ── Tablet ≥768px — переключение на строку ── */
    @media (min-width: 768px) and (min-height: 600px) {
      .hero-brand {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
      }
      /* clamp: 56px at 768 → плавно растёт → 80px cap at ~1095px */
      .hero-wordmark-text {
        font-size: clamp(56px, 7.3vw, 80px);
      }
      /* Accent: 35px at 768 → 50px cap at ~1095px (Figma desktop reference) */
      .hero-accent-wrap {
        font-size: clamp(35px, 4.5625vw, 50px);
      }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      #hero {
        padding: 0 120px 120px;
      }
    }


    /* ─────────────────────────────────────────
       2. TAGLINE  (mobile-first, white section)
    ───────────────────────────────────────── */

    /* ── Mobile default (<640px) ── */
    #tagline {
      background: var(--white);
      padding: 80px 24px 60px;
    }

    .tagline-text {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.25;
      color: var(--bg);
      margin-bottom: 20px;
    }
    .tagline-text:last-of-type { margin-bottom: 0; }

    .tagline-accent { color: var(--blue); font-weight: 600; }

    .tagline-image {
      margin-top: 40px;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 19/9;
    }
    .tagline-image img,
    .tagline-image video {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .tagline-image .img-placeholder {
      width: 100%; height: 100%;
      background: var(--color-surface-light);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-cursive); font-size: 14px;
    }

    /* ── Tablet ≥640px ── */
    @media (min-width: 640px) and (min-height: 600px) {
      #tagline {
        padding: 80px 48px 60px;
      }
      .tagline-text {
        margin-bottom: 24px;
      }
      .tagline-image {
        margin-top: 48px;
        border-radius: 10px;
      }
    }

    /* ── Tablet ≥768px — grid, текст в 8 кол., картинка на всю ширину ── */
    @media (min-width: 768px) and (min-height: 600px) {
      #tagline {
        padding: 80px 48px 60px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 24px;
      }
      .tagline-text {
        grid-column: 1 / span 8;
        font-size: 24px;
      }
      .tagline-image {
        grid-column: 1 / -1;
        margin-top: 60px;
        border-radius: 12px;
      }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      #tagline {
        padding: 120px 120px 200px;
        column-gap: 48px;
      }
      .tagline-text {
        font-size: 32px;
        margin-bottom: 24px;
      }
      .tagline-image {
        margin-top: 82px;
      }
    }


    /* ─────────────────────────────────────────
       3. WORK  (mobile-first, 3 breakpoints)
    ───────────────────────────────────────── */

    /* ── Mobile default (<640px) ── */
    #work {
      padding: 44px 24px;
      text-align: center;
    }

    .work-title {
      font-family: var(--font-alt);
      font-weight: 400;
      font-size: clamp(100px, 16.7vw, 240px);
      line-height: 1.1;
      color: var(--white);
      margin-bottom: 32px;
    }

    /* No grid at mobile — card is a simple block */
    .work-grid { }

    /* ── Gradient border wrapper ──
       Technique: padding:1px + background-gradient = visible 1px border.
       overflow:hidden remains on .work-card to clip the image. */
    /* Gradient border: cross-fade via opacity of two pseudo-elements,
       because CSS can't smoothly animate between different gradients */
    .work-card-wrap {
      border-radius: 9px; /* 8px card + 1px border */
      padding: 1px;
      position: relative;
    }

    .work-card-wrap::before,
    .work-card-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      transition: opacity 0.48s cubic-bezier(0.37, 0, 0.63, 1);
    }

    /* Default border: divider-dark → black → black → sky-blue */
    .work-card-wrap::before {
      background: linear-gradient(135deg,
        var(--color-divider-dark) 0%,
        #000 32%,
        #000 68%,
        var(--color-sky-blue) 100%
      );
      opacity: 1;
    }

    /* Hover border: sky-blue → pastel-lilac */
    .work-card-wrap::after {
      background: linear-gradient(135deg, var(--color-sky-blue), var(--color-pastel-lilac));
      opacity: 0;
    }

    .work-card-wrap:hover::before { opacity: 0; }
    .work-card-wrap:hover::after  { opacity: 1; }

    .work-card {
      display: block; /* <a> is inline by default */
      aspect-ratio: 16/9;
      border-radius: 8px; /* 1px less than wrapper */
      overflow: hidden;
      position: relative;
      z-index: 1; /* above wrapper's ::before/::after pseudo-elements */
      text-decoration: none;
    }

    /* ── Tablet ≥640px ── */
    @media (min-width: 640px) and (min-height: 600px) {
      #work {
        padding: 40px 24px;
      }
      .work-card-wrap { border-radius: 11px; }
      .work-card      { border-radius: 10px; }
    }

    /* ── Tablet ≥768px — 12-column grid ── */
    @media (min-width: 768px) and (min-height: 600px) {
      #work {
        padding: 100px 48px 60px;
      }
      .work-title {
        margin-bottom: 40px;
      }
      .work-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 24px;
      }
      /* grid-column on wrapper, not card */
      .work-card-wrap {
        grid-column: 3 / span 8;
        border-radius: 13px;
      }
      .work-card { border-radius: 12px; }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      #work {
        padding: 200px 120px 120px;
      }
      .work-title {
        margin-bottom: 82px;
      }
      .work-grid {
        column-gap: 48px;
      }
    }

    .work-card img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }

    /* Hover effects moved to .work-card-wrap:hover */
    .work-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--bg) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .work-card-wrap:hover .work-card-overlay { opacity: 1; }

    .work-card-tags {
      position: absolute;
      bottom: 40px; left: 40px; right: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .work-card-wrap:hover .work-card-tags { opacity: 1; transform: translateY(0); }

    .tag-filled {
      background: var(--blue);
      border: 1px solid var(--blue);
      color: var(--white);
      padding: 8px 18px;
      border-radius: 100px;
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
    }

    .tag-group { display: flex; gap: 12px; }

    .tag-outlined {
      border: 1px solid var(--white);
      color: var(--white);
      padding: 8px 14px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1;
    }


    /* ─────────────────────────────────────────
       4. APPROACH  (sticky scroll stacking)
    ───────────────────────────────────────── */

    /* ── Mobile default (<640px) ── */
    #approach { padding: 60px 0 0; position: relative; }

    /* Sticky wrapper — block on mobile, sticky on tablet+ (via JS + media query) */
    .approach-sticky { display: block; }

    .approach-head {
      padding: 0 24px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
    }

    .approach-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.12em;
      color: var(--muted);
      text-transform: uppercase;
    }

    .approach-nav {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .approach-nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .approach-nav-num {
      font-size: 14px;
      font-weight: 500;
      color: var(--blue);
      min-width: 22px;
      opacity: 0.45;
      transition: opacity 0.3s ease;
    }

    .approach-nav-label {
      font-size: 14px;
      font-weight: 400;
      color: var(--white);
      opacity: 0.45;
      transition: opacity 0.3s ease;
    }

    .approach-nav-item.is-active .approach-nav-label,
    .approach-nav-item.is-active .approach-nav-num {
      opacity: 1;
    }

    /* Mobile items: regular scroll without pinning */
    .approach-item {
      position: relative;
      background: var(--bg);
      padding: 40px 24px 48px;
      min-height: auto;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "num arrow"
        "content content";
      column-gap: 16px;
      row-gap: 12px;
      align-content: start;
    }

    .approach-num {
      grid-area: num;
      font-size: 72px;
      font-weight: 600;
      line-height: 1;
      background: linear-gradient(90deg, var(--blue), var(--aqua));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .approach-arrow {
      grid-area: arrow;
      align-self: center;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrow-svg {
      display: block;
      width: 38px;
      height: 42px;
    }

    .approach-content {
      grid-area: content;
      min-width: 0;
    }

    .approach-item-title {
      font-size: 22px;
      font-weight: 400;
      line-height: 1.15;
      margin-bottom: 10px;
      color: var(--white);
    }

    /* First item gradient title */
    .approach-item:first-child .approach-item-title {
      background: linear-gradient(90deg, var(--color-white) 0%, var(--color-cursive) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .approach-item-desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--white);
    }

    /* ── Tablet ≥640px — JS-driven sticky scroll stacking mode ── */
    @media (min-width: 640px) and (min-height: 600px) {
      /* Section has no top padding — panel starts flush */
      #approach { padding: 0; }

      .approach-head { padding: 48px 40px 40px; }

      /* Panel: relative by default, JS switches to fixed/absolute.
         Height fits BETWEEN the pinned top (just under the header menu) and
         the viewport bottom. Pin offset is shared with js/main.js via
         --approach-pin-top so the two stay in sync. */
      .approach-sticky {
        position: relative;
        height: calc(100vh - var(--approach-pin-top));
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: var(--bg);
      }

      /* List fills remaining height below the head */
      .approach-list {
        position: relative;
        flex: 1;
        overflow: hidden;
      }

      /* Items are layered; transform is set directly by JS (scroll-linked) */
      .approach-item {
        position: absolute;
        inset: 0;
        pointer-events: none;
        padding: 48px 40px 48px;
        column-gap: 24px;
        row-gap: 16px;
        background: var(--bg);
        transform: translateY(100%); /* initial state; JS overrides inline */
        will-change: transform;      /* hint compositor — cards animate every scroll tick */
      }

      .approach-num { font-size: 80px; }
      .approach-arrow .arrow-svg { width: 48px; height: 54px; }

      .approach-item-title { font-size: 26px; }
      .approach-item-desc  { font-size: 15px; }
    }

    /* ── Tablet ≥768px ── */
    @media (min-width: 768px) and (min-height: 600px) {
      .approach-head { padding: 60px 48px 48px; gap: 24px; }

      .approach-label { font-size: 14px; }
      .approach-nav-num   { font-size: 16px; }
      .approach-nav-label { font-size: 15px; }

      .approach-item {
        padding: 60px 48px 60px;
        column-gap: 32px;
        row-gap: 20px;
      }

      .approach-num { font-size: 96px; }
      .approach-arrow .arrow-svg { width: 57px; height: 64px; }

      .approach-item-title { font-size: 30px; }
      .approach-item-desc  { font-size: 16px; }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      .approach-head {
        padding: 48px 120px 32px;
        flex-direction: row;
        gap: 48px;
      }

      .approach-label { font-size: 40px; letter-spacing: 0; }

      .approach-nav { gap: 12px; }
      .approach-nav-num   { font-size: 24px; min-width: 36px; }
      .approach-nav-label { font-size: 20px; }

      /* Switch to horizontal layout: num | content | arrow */
      .approach-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 48px;
        padding: 0 120px;
      }

      .approach-num {
        font-size: 120px;
        width: 320px;
        flex-shrink: 0;
        line-height: 1;
      }

      .approach-content { flex: 1; }

      .approach-item-title { font-size: 44px; margin-bottom: 12px; }
      .approach-item-desc  { font-size: 19px; line-height: 1.4; }

      .approach-arrow { align-self: center; flex-shrink: 0; }
      .approach-arrow .arrow-svg { width: 57px; height: 64px; }
    }


    /* ─────────────────────────────────────────
       5. STUDIO  (mobile-first, 3 breakpoints)
    ───────────────────────────────────────── */

    /* ── Mobile default (<640px) ── */
    #studio {
      padding: 48px 24px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .studio-text {
      font-size: 22px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--white);
      text-align: center;
    }

    .studio-image {
      aspect-ratio: 19/9;
      border-radius: 8px;
      overflow: hidden;
    }
    .studio-image img,
    .studio-image video {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .studio-image .img-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--color-bg-deep), var(--color-bg-navy));
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.2); font-size: 14px;
    }

    /* ── Tablet ≥640px ── */
    @media (min-width: 640px) and (min-height: 600px) {
      #studio {
        padding: 60px 48px;
        gap: 48px;
      }
      .studio-text {
        font-size: 28px;
      }
      .studio-image {
        border-radius: 10px;
      }
    }

    /* ── Tablet ≥768px — switch to 12-column grid ── */
    @media (min-width: 768px) and (min-height: 600px) {
      #studio {
        padding: 80px 48px 60px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 24px;
        row-gap: 60px;
      }
      .studio-text {
        grid-column: 2 / span 10;
        grid-row: 1;
        font-size: 32px;
      }
      .studio-image {
        /* 9 cols centered: at 980px → ~657px wide → height ~311px */
        grid-column: 2 / span 9;
        grid-row: 2;
        border-radius: 12px;
      }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      #studio {
        padding: 200px 120px 120px;
        column-gap: 48px;
        row-gap: 82px;
      }
      .studio-text {
        grid-column: 2 / span 10;
        font-size: 40px;
      }
      .studio-image {
        grid-column: 4 / span 6;
      }
    }


    /* ─────────────────────────────────────────
       6. BIG TAGLINE  (mobile-first, 3 breakpoints)
    ───────────────────────────────────────── */

    /* ── Mobile default (380–767px) ── */
    #big-tagline {
      padding: 24px;
      text-align: center;
    }

    .big-tagline-text {
      font-family: var(--font-alt);
      font-weight: 400;
      font-size: 54px;
      /* line-height 1.2 — Montserrat Alternates descenders ('g', 'y', 'p')
         extend beyond em-box, at 1.1 the 'g' tail in 'big' gets visually clipped */
      line-height: 1.2;
      color: var(--white);
    }

    .big-tagline-text .t-blue   { font-weight: 500; color: var(--blue); }
    .big-tagline-text .t-orange { font-weight: 600; color: var(--orange); }

    /* ── Tablet ≥768px ── */
    @media (min-width: 768px) and (min-height: 600px) {
      #big-tagline {
        padding: 60px 48px;
      }
      .big-tagline-text {
        /* at 768px → ~89px; at 980px → 114px (capped) */
        font-size: clamp(54px, 11.6vw, 114px);
      }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      #big-tagline {
        padding: 120px;
      }
      .big-tagline-text {
        /* at 1280px → 114px; at 1440px → 128px (capped) */
        font-size: clamp(114px, 8.9vw, 128px);
      }
    }


    /* ─────────────────────────────────────────
       7. ABOUT US  (mobile-first, 3 breakpoints)
    ───────────────────────────────────────── */

    /* ── Mobile <640px ── */
    #about {
      padding: 48px 24px 64px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 12px;
      row-gap: 24px;
    }

    .about-label {
      grid-column: 1 / -1;
      grid-row: 1;
      font-size: clamp(24px, 6vw, 40px);
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
    }

    .about-text {
      grid-column: 1 / -1;
      grid-row: 2;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.667;
      color: var(--white);
    }

    .about-photo {
      aspect-ratio: 16/9;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      background: rgba(255,255,255,.05);
    }
    .about-photo img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }

    /* Mobile: 2-column photo grid */
    .about-p1 { grid-column: 1; grid-row: 3; }
    .about-p2 { grid-column: 2; grid-row: 3; }
    .about-p3 { grid-column: 1; grid-row: 4; }
    .about-p4 { grid-column: 2; grid-row: 4; }
    .about-p5 { grid-column: 1; grid-row: 5; }

    /* ── Tablet ≥640px ── */
    @media (min-width: 640px) and (min-height: 600px) {
      #about {
        padding: 60px 48px 80px;
      }

      .about-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 24px;
        row-gap: 32px;
      }

      .about-text { font-size: 18px; }

      .about-photo { border-radius: 10px; }

      /* Tablet: label+text full-width, photos 2+3 */
      .about-label { grid-column: 1 / -1; grid-row: 1; }
      .about-text  { grid-column: 1 / -1; grid-row: 2; }
      .about-p1    { grid-column: 1; grid-row: 3; }
      .about-p2    { grid-column: 2; grid-row: 3; }
      .about-p3    { grid-column: 1; grid-row: 4; }
      .about-p4    { grid-column: 2; grid-row: 4; }
      .about-p5    { grid-column: 3; grid-row: 4; }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      #about {
        padding: 80px 120px 120px;
      }

      .about-grid {
        column-gap: 48px;
        row-gap: 82px;
      }

      .about-text { font-size: 24px; }

      .about-photo { border-radius: 12px; }

      /* Desktop: label left column 1, text columns 2-3 */
      .about-label { grid-column: 1;          grid-row: 1; }
      .about-text  { grid-column: 2 / span 2; grid-row: 1; }
      .about-p1    { grid-column: 1;          grid-row: 2; }
      .about-p2    { grid-column: 2;          grid-row: 2; }
      .about-p3    { grid-column: 1;          grid-row: 3; }
      .about-p4    { grid-column: 2;          grid-row: 3; }
      .about-p5    { grid-column: 3;          grid-row: 3; }
    }