/* Design tokens now live in /styles/tokens.css (loaded globally).
           This page inherits --paper, --ink, --line, --sage, --serif (Lora),
           --thai, --impodi, spacing and type scale from there. */

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            overflow-x: hidden;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--serif)
        }

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

        button, input {
            font: inherit
        }

        .shell {
            width: min(var(--max), calc(100% - 2 * var(--gutter)));
            margin: auto
        }

        .brand {
            display: inline-block
        }

        .logo-image {
            display: block;
            width: 120px;
            height: auto
        }

        .hero {
            position: relative;
            min-height: 500px;
            overflow: hidden;
            background: var(--paper)
        }

        .hero-asset {
            position: absolute;
            inset: 0;
            background: url("/assets/hero-krabi3.png") center center/cover no-repeat
        }

        .hero:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, var(--paper) 0%, rgba(251, 246, 239, 1) 30%, rgba(251, 246, 239, .8) 37%, rgba(251, 246, 239, .4) 44%, rgba(251, 246, 239, 0) 53%)
        }

        /* Old header rules removed — the header is now <SiteHeader> (.site-header*)
           styled globally in /styles/header.css. */

        .hero-copy {
            position: relative;
            z-index: 1;
            width: min(390px, 45vw);
            margin: 42px 0 0 max(42px, calc((100vw - 936px) / 2))
        }

        .hero h1 {
            margin: 0;
            font: 400 clamp(52px, 4vw, 66px)/.82 var(--serif);
            letter-spacing: -1px;
            line-height: 1em;
        }

        .hero-lead {
            margin: 20px 0 15px;
            font-size: 20px;
            line-height: 1.1
        }

        .rule {
            width: 24px;
            margin: 17px 0 13px;
            border-top: 2px solid #E0918D
        }

        .thai {
            margin: 0 0 26px;
            font: 400 16px/1.55 var(--thai)
        }

        .button {
            display: inline-block;
            padding: 7px 20px 9px;
            border: 0;
            border-radius: 9px;
            background: var(--button);
            font-size: 15px
        }

        main {
            padding-top: 20px
        }

        .section-title {
            margin: 0 0 20px;
            text-align: center;
            font-size: 21px;
            font-weight: 500
        }

        .category-grid {
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: 20px
        }

        .category {
            min-width: 0;
            height: 109px;
            padding: 20px 14px;
            display: flex;
            align-items: center;
            gap: 15px;
            border: 1px solid var(--line);
            border-radius: 12px
        }

        .category-1{
            background-color: #f3eee5;
        }
        .category-2{
            background-color: #f9ebdf;
        }
        .category-3{
            background-color: #faeae1;
        }
        .category-4{
            background-color: #f1ede7;
        }

        .category>div {
            min-width: 0
        }

        .asset-mark {
            display: block;
            width: 69px;
            height: 68px;
            flex: 0 0 69px;
            border-radius: 8px;
            background: var(--stone)
        }

        .category-image {
            display: block;
            width: 69px;
            height: 68px;
            flex: 0 0 69px;
            object-fit: contain
        }

        .category h3 {
            margin: 0 0 6px;
            color: #4f3425;
            font-size: 18px;
            font-weight: 500;
            white-space: nowrap
        }

        .category p {
            margin: 0;
            font-size: 11.5px;
            line-height: 1.18;
            white-space: nowrap
        }

        .impodi {
            position: relative;
            display: block;
            min-height: 184px;
            overflow: hidden;
            margin-top: 20px;
            border: 1px solid var(--line);
            border-radius: 12px;
            color: #626262;
            background: url("/assets/impodi-seascape1.png") center center/cover no-repeat
        }

        .impodi:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(251, 246, 239, 0) 0%, rgba(251, 246, 239, .2) 25%, rgba(251, 246, 239, .82) 39%, rgba(251, 246, 239, .95) 50%, rgba(251, 246, 239, .82) 61%, rgba(251, 246, 239, .2) 75%, rgba(251, 246, 239, 0) 100%)
        }

        .impodi-asset {
            display: none
        }

        .impodi-copy {
            position: relative;
            z-index: 1;
            display: flex;
            min-height: 210px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center
        }

        .impodi-copy h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 500
        }

        .impodi-copy p {
            margin: 3px 0 9px;
            font-size: 15px
        }

        .impodi-name {
            margin: 0;
            letter-spacing: 6px;
            font-size: 31px;
            font-family: var(--impodi);
        }

        .impodi-copy .button {
            padding: 5px 18px 6px;
            font-size: 12px
        }

        .stories-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 25px 4px 8px
        }

        .stories-heading h2 {
            margin: 0;
            font-size: 21px;
            font-weight: 500
        }

        .stories-heading a {
            font-size: 13px
        }

        .stories-layout {
            position: relative;
            /*height: 204px*/
        }

        .story-grid {
            display: grid;
            /*width: calc(100% - 190px);*/
            grid-template-columns:194fr 181fr 168fr 173fr;
            gap: 8px
        }

        .story-card {
            overflow: hidden;
            /*height: 204px;*/
            border: 1px solid var(--line);
            border-radius: 11px
        }

        .story-image {
            display: block;
            width: 100%;
            height: 145px;
            object-fit: cover;
            border-radius: 11px;
        }

        .story-body {
            padding: 0 12px 12px;
            position: relative;
            min-height: 80px;
        }

        .tag {
            display: inline-block;
            position: relative;
            top: -30px;
            padding: 2px 6px;
            border: 1px solid var(--line);
            border-radius: 7px;
            background: var(--paper);
            font-size: 8px;
            line-height: 1
        }

        .story-card h3 {
            margin: 0;
            margin-top: -5px;
            /*margin: 8px 0 2px;*/
            font-size: 16px;
            font-weight: 500;
            line-height: 1.1;
            letter-spacing: -.15px;
            /*white-space: nowrap;*/
            font-family: var(--thai);
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            overflow: hidden;

        }

        .story-card p {
            margin: 0 0 3px;
            font: 400 8px/1.22 var(--thai)
        }

        .date {
            font-size: 8px;
            line-height: 1
        }

        .story-aside {
            position: absolute;
            top: -34px;
            right: 0;
            width: 176px;
            height: 238px;
            overflow: hidden;
            padding: 30px 20px 16px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background-color: #f7ede1;
        }

        .story-aside h2 {
            margin: 0 0 13px;
            font-size: 22px;
            line-height: .98;
            font-weight: 500
        }

        .story-aside p {
            margin: 0;
            font-size: 13px;
            line-height: 1.2
        }

        .story-aside a {
            position: absolute;
            left: 20px;
            bottom: 16px;
            font-size: 13px
        }

        .story-aside-image {
            position: absolute;
            right: 9px;
            bottom: 37px;
            width: 146px;
            height: 83px;
            object-fit: contain;
            object-position: right bottom
        }

        .lower-grid {
            display: grid;
            grid-template-columns:1fr 1fr 1fr 1.15fr;
            gap: 8px;
            margin-top: 17px
        }

        .lower-card {
            min-height: 226px;
            padding: 15px 16px;
            border: 1px solid var(--line);
            border-radius: 11px
        }

        .lower-card h2 {
            margin: 0 0 10px;
            color: #4d5b37;
            font-size: 20px;
            font-weight: 500;
            line-height: 1
        }

        .mini-list {
            display: grid;
            gap: 8px
        }

        .mini {
            display: grid;
            grid-template-columns:45px 1fr;
            gap: 8px;
            align-items: center
        }

        .mini-asset {
            width: 45px;
            height: 34px;
            border-radius: 4px;
            background: var(--dark-stone)
        }

        .mini strong, .mini span {
            display: block
        }

        .mini strong {
            font-size: 11px;
            line-height: 1.08;
            font-weight: 500
        }

        .mini span {
            margin-top: 2px;
            font-size: 8px
        }

        .panel-link {
            display: block;
            margin-top: 12px;
            font-size: 12px
        }

        .people .mini {
            grid-template-columns:39px 1fr
        }

        .portrait {
            width: 39px;
            height: 39px;
            border-radius: 50%;
            background: var(--dark-stone)
        }

        .meet {
            /* Keep the four-column grid: the three editorial panels above remain
               intentionally commented out in the HTML for a future return. */
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr);
            min-height: 244px;
            padding: 0;
            overflow: hidden;
            background: rgb(255 252 246 / .28)
        }

        .meet-copy {
            display: grid;
            align-content: center;
            padding: 28px 38px 28px 28px;
            border-right: 1px solid var(--line)
        }

        .meet .meet-title {
            margin: 0 0 22px;
            color: #4d5b37;
            font-size: 29px;
            font-weight: 500;
            line-height: .98;
            letter-spacing: -.6px
        }

        .meet-prose {
            max-width: 35ch
        }

        .meet p {
            margin: 0 0 14px;
            font-size: 13px;
            line-height: 1.3
        }

        .meet p:last-child {
            margin-bottom: 0
        }

        .meet-illustration {
            position: relative;
            min-height: 244px;
            margin: 0;
            overflow: hidden
        }

        .meet-image {
            position: absolute;
            right: 22px;
            bottom: 15px;
            width: 370px;
            height: 278px;
            object-fit: contain;
            object-position: right bottom
        }

        .newsletter-panel {
            display: grid;
            grid-template-columns:250px 1fr 250px;
            align-items: center;
            min-height: 72px;
            margin-top: 10px;
            padding: 12px 22px;
            border: 1px solid var(--line);
            border-radius: 11px;
            background: #f7f0e6;
        }

        .newsletter-panel h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 500
        }

        .newsletter-panel p {
            margin: 1px 0 0;
            font-size: 11px
        }

        .signup {
            display: flex;
            height: 33px
        }

        .signup input {
            min-width: 0;
            width: 100%;
            padding: 0 13px;
            border: 1px solid var(--line);
            border-radius: 7px 0 0 7px;
            background: #fffaf4
        }

        .signup button {
            width: 130px;
            border: 0;
            border-radius: 8px;
            background: var(--sage);
            color: #fff;
            margin-left: -18px;
        }

        .newsletter-panel .asset-mark {
            justify-self: end;
            width: 100px;
            height: 44px
        }

        /* Footer + legal styles moved to the global /styles/footer.css. */

        @media (max-width: 767px) {
            :root {
                --gutter: 20px
            }

            .hero {
                min-height: 535px
            }

            .hero-asset {
                inset: 0;
                background: url("/assets/hero-krabi-mobile.png") center center/cover no-repeat
            }

            .hero:after {
                inset: 61px 0 0;
                background: linear-gradient(90deg, var(--paper) 0%, rgba(251, 246, 239, 0.6) 30%, rgba(251, 246, 239, .54) 40%, rgba(251, 246, 239, .32) 49%, rgba(251, 246, 239, 0) 64%)
            }

            .hero-copy {
                width: 265px;
                margin: 48px 0 0 20px
            }

            .hero h1 {
                font-size: 40px;
            }

            .hero-lead {
                width: 220px;
                margin-top: 18px;
                font-size: 19px
            }

            .section-title {
                margin-bottom: 16px;
                font-size: 25px
            }

            .category-grid {
                grid-template-columns:1fr 1fr;
                gap: 10px
            }

            .category {
                min-height: 101px;
                padding: 12px;
                gap: 8px
            }

            .asset-mark {
                width: 43px;
                height: 53px;
                flex-basis: 43px
            }

            .category-image {
                width: 43px;
                height: 53px;
                flex-basis: 43px
            }

            .category h3 {
                margin-bottom: 4px;
                font-size: 16px
            }

            .category p {
                font-size: 10px
            }

            .impodi {
                min-height: 145px;
                margin-top: 12px;
                background-position: center center
            }

            .impodi-copy {
                min-height: 143px
            }

            .impodi-copy h2 {
                font-size: 14px
            }

            .impodi-copy p {
                font-size: 10px
            }

            .impodi-name {
                letter-spacing: 4px;
                font-size: 20px
            }

            .impodi-copy .button {
                display: none
            }

            .stories-heading {
                margin: 28px 1px 12px
            }

            .stories-heading h2 {
                font-size: 25px
            }

            .stories-layout {
                display: block;
                height: auto
            }

            .story-grid {
                width: auto;
                grid-template-columns:1fr 1fr;
                gap: 12px
            }

            .story-card {
                height: auto;
                min-height: 0
            }

            .story-image {
                height: 120px
            }

            .story-aside {
                position: relative;
                width: auto;
                height: auto;
                min-height: 235px;
                margin-top: 12px;
                padding: 28px 20px
            }

            .story-aside p {
                margin: 0
            }

            .story-aside-image {
                right: 14px;
                bottom: 38px;
                width: 190px;
                height: 82px
            }

            .lower-grid {
                grid-template-columns:1fr 1fr;
                gap: 12px;
                margin-top: 12px
            }

            .lower-card {
                min-height: 200px;
                padding: 13px
            }

            .lower-card h2 {
                font-size: 16px
            }

            .meet {
                grid-template-columns: 1fr;
                min-height: 0
            }

            .meet-copy {
                padding: 24px 20px 22px;
                border-right: 0;
                border-bottom: 1px solid var(--line)
            }

            .meet .meet-title {
                margin-bottom: 16px;
                font-size: 25px
            }

            .meet-illustration {
                min-height: 210px
            }

            .meet-image {
                right: 50%;
                bottom: -28px;
                width: 308px;
                height: 232px;
                transform: translateX(50%)
            }

            .newsletter-panel {
                grid-template-columns:1fr;
                gap: 10px;
                margin-top: 20px;
                padding: 20px;
                text-align: center
            }

            .newsletter-panel p {
                font: 11px/1.4 var(--thai)
            }

            .newsletter-panel .asset-mark {
                display: none
            }
        }

    /* September 2026 home composition: a real gathering photo replaces the former illustration. */
    .meet {
      grid-template-columns: minmax(18rem, .84fr) minmax(0, 1.16fr);
      height: 218px;
      min-height: 218px;
      background: #fbf8f1;
    }

    .meet-copy {
      padding: 30px 34px 30px 30px;
    }

    .meet .meet-title {
      position: relative;
      margin: 0 0 20px;
      padding-bottom: 14px;
      color: var(--ink);
      font-size: 27px;
      letter-spacing: -.55px;
    }

    .meet .meet-title::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 22px;
      height: 1px;
      background: var(--sage);
      content: "";
    }

    .meet-illustration {
      height: 218px;
      min-height: 218px;
    }

    .meet-image {
      position: static;
      display: block;
      width: 100%;
      height: 218px;
      min-height: 0;
      object-fit: cover;
      object-position: center 53%;
      transform: none;
    }

    @media (max-width: 700px) {
      .meet { grid-template-columns: 1fr; height: auto; min-height: 0; }
      .meet-copy { padding: 25px 20px 23px; }
      .meet .meet-title { margin-bottom: 16px; font-size: 25px; }
      .meet-illustration, .meet-image { min-height: 205px; height: 205px; }
    }

    /* The life areas are an editorial index, not four cards. */
    .category-grid {
      gap: 0;
    }

    .category,
    .category-1,
    .category-2,
    .category-3,
    .category-4 {
      display: flex;
      height: 140px;
      padding: 9px 16px 6px;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 3px;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      text-align: center;
    }

    .category:last-child {
      border-right: 0;
    }

    .category-image {
      width: 68px;
      height: 62px;
      flex-basis: 62px;
      margin-bottom: 0;
    }

    .category h3 {
      margin: 0 0 4px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.1;
    }

    .category p {
      font-size: 11px;
      line-height: 1.35;
      white-space: normal;
    }

    @media (max-width: 700px) {
      .category-grid { gap: 0; }
      .category,
      .category-1,
      .category-2,
      .category-3,
      .category-4 {
        min-height: 146px;
        height: auto;
        padding: 14px 8px 12px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }
      .category:nth-child(2n) { border-right: 0; }
      .category:nth-child(n + 3) { border-bottom: 0; }
      .category-image { width: 58px; height: 55px; flex-basis: 55px; }
      .category h3 { font-size: 16px; }
      .category p { font-size: 10px; }
    }

    .hero-cta.button {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 0 0 4px;
      border: 0;
      border-bottom: 1px solid #9d7654;
      border-radius: 0;
      background: transparent;
      color: #856043;
      font: 400 16px/1.2 var(--serif);
      text-decoration: none;
      transition: color 180ms ease, transform 180ms ease;
    }

    .hero-cta.button:hover { color: var(--ink); transform: translateX(2px); }
    .hero-cta.button:active { transform: translateX(1px); }
    .hero-cta.button:focus-visible { outline: 2px solid #9d7654; outline-offset: 4px; }

    /* =====================================================================
       DESIGN SYSTEM APPLICATION  (see design-system/the-human-need/MASTER.md)
       Quiet editorial: serif display headings, sans body, 13px type floor,
       token-based rhythm. Appended so the original layout above is untouched
       and this pass is easy to review or revert as one block.
       ===================================================================== */

    /* Serif display for headings, clean sans for body/UI/meta */
    body { font-family: var(--font-sans); }

    .hero h1,
    .section-title,
    .stories-heading h2,
    .impodi-copy h2,
    .meet .meet-title,
    .story-aside h2,
    .lower-card h2,
    .newsletter-panel h2 {
      font-family: var(--font-display);
      font-weight: 500;
    }

    /* Hero: relax the over-tight line-height so descenders/Thai don't clip */
    .hero h1 { line-height: var(--leading-tight); letter-spacing: -0.02em; }

    /* Type floor: nothing ships below 13px (was 8–11px) */
    .tag { font-size: var(--text-xs); padding: 3px 8px; }
    .date { font-size: var(--text-xs); color: var(--ink-muted); }
    .category p { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--ink-muted); }
    .stories-heading a { color: var(--clay-ink); }

    /* Section rhythm: let the page breathe (tokenized, replaces ad-hoc px) */
    main { padding-top: var(--space-6); }
    .section-title { margin-bottom: var(--space-5); font-size: var(--text-xl); }
    .impodi { margin-top: var(--space-6); }
    .stories-heading { margin: var(--space-7) var(--space-1) var(--space-4); }
    .lower-grid { margin-top: var(--space-6); }

    /* Consistent card-image reveal on hover, matching the Instagram panel */
    .story-card { transition: transform var(--dur) var(--ease); }
    .story-image { transition: transform var(--dur-slow) var(--ease); }
    .story-card:hover .story-image { transform: scale(1.03); }
    .story-card a:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

    @media (prefers-reduced-motion: reduce) {
      .story-card, .story-image { transition: none; }
      .story-card:hover .story-image { transform: none; }
    }

    /* ---- Fixed-header + responsive fixes (2026-09-15) ---- */

    /* Hero composition: center the copy vertically at EVERY width. The hero is a
       flex box whose padding-top clears the fixed header, so the copy is centred
       in the area below the header and needs no margin-top offset. */
    .hero {
      display: flex;
      align-items: center;
      padding-top: var(--header-h);
      min-height: min(80vh, 580px);
    }
    .hero-copy { margin-top: 0; }

    .hero-lead { line-height: var(--leading-snug); }

    /* IMPODI: restore the "working on" button on tablet/mobile (was hidden). */
    @media (max-width: 767px) {
      .impodi-copy .button {
        display: inline-block;
        margin-top: var(--space-2);
        padding: 6px 16px 7px;
        font-size: var(--text-xs);
      }
    }

    /* Tablet: stack the two-up panels so their images span the full width
       instead of being pinched into a narrow column. */
    @media (max-width: 860px) {
      .hero-copy {
        width: min(62%, 26rem);
        margin-left: var(--gutter);
        padding-right: var(--space-4);
      }

      /* Tablet: two-up stories (four-up is too small below the desktop width). */
      .story-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
      }

      .meet {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
      }

      .meet-copy {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .meet-illustration,
      .meet-image {
        height: 240px;
        min-height: 240px;
        width: 100%;
      }
    }

    /* Mobile: larger, single-column story cards (the 2-up grid felt cramped);
       give the hero copy a touch more room from the image edge. */
    @media (max-width: 640px) {
      .story-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      .story-image {
        height: 200px;
      }

      .hero-copy {
        width: min(84%, 20rem);
        margin-left: var(--gutter);
        padding-right: var(--space-5);
      }
    }

    /* Tablet & phone hero legibility: at these widths the image subject sits
       center/right and the copy was overlapping it. Extend the paper fade so the
       copy always sits on a protected zone, and force the (space-less) Thai line
       to wrap instead of running onto the photo. */
    @media (max-width: 860px) {
      .hero::after {
        inset: 0;
        background: linear-gradient(90deg,
          var(--paper) 0%,
          var(--paper) 44%,
          rgba(251, 246, 239, 0.82) 58%,
          rgba(251, 246, 239, 0.3) 72%,
          rgba(251, 246, 239, 0) 88%);
      }

      .hero .thai { overflow-wrap: anywhere; }
    }

    /* Tablet only: keep the copy inside the protected zone (phone keeps its own
       wider measure defined above). */
    @media (min-width: 641px) and (max-width: 860px) {
      .hero-copy { width: min(56%, 23rem); }
    }

    /* ---- Polish pass (2026-11-02) ----
       One section rhythm, readable panel copy, and a shared seam for the two
       closing panels so they read as a pair rather than two unrelated boxes. */

    /* Hero emphasis: tokenized terracotta that clears large-text contrast
       (was an inline #E0918D at 2.3:1 on paper). */
    .hero-emphasis { color: var(--terracotta-ink); }
    .hero-lead, .hero .thai { text-wrap: pretty; }

    /* Section rhythm: one step between every block (was 48/32/32/12/64px). */
    .stories-heading { margin-top: var(--space-8); }
    .impodi,
    .lower-grid { margin-top: var(--space-8); }

    /* Type floor: the IMPODI status button was 12px. */
    .impodi-copy .button { font-size: var(--text-xs); }

    /* "Someday, we'll meet.": body copy at reading size, height follows content,
       and the 1:1 split mirrors the Walk with us panel below it. */
    .meet {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      height: auto;
      min-height: 19rem;
    }
    .meet-copy { padding: var(--space-7) var(--space-7) var(--space-7) var(--space-6); }
    .meet .meet-title { font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: var(--leading-tight); }
    .meet p { font-size: var(--text-base); line-height: var(--leading-normal); }
    .meet-illustration,
    .meet-image { height: 100%; min-height: 19rem; }

    @media (max-width: 860px) {
      .meet { grid-template-columns: 1fr; min-height: 0; }
      .meet-copy { padding: var(--space-6) var(--space-5); }
      .meet-illustration,
      .meet-image { height: 240px; min-height: 240px; }
    }

    /* Mobile: the hard <br> in the hero lead stranded "intentional," on its own
       line; let it wrap naturally. Stack the stories heading over its link. */
    @media (max-width: 640px) {
      .hero-lead br { display: none; }
      .impodi-copy p { font-size: var(--text-xs); }
      .stories-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-7);
      }
      .impodi,
      .lower-grid { margin-top: var(--space-7); }
    }