/* ── HERO ── */
    .ttk-hero {
      padding-top: calc(var(--nav-h) + 96px);
      padding-bottom: 80px;
      border-bottom: 1px solid #eee;
    }

    .ttk-hero__label {
      font-size: 10px; letter-spacing: .26em;
      text-transform: uppercase; color: var(--light);
      margin-bottom: 24px; display: block;
    }

    .ttk-hero__h1 {
      font-family: var(--display);
      font-size: clamp(56px, 8vw, 110px);
      line-height: .9; letter-spacing: .02em;
      color: var(--navy); margin-bottom: 40px;
    }

    .ttk-hero__body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: end;
    }

    .ttk-hero__p {
      font-size: 17px; font-weight: 300;
      line-height: 1.8; color: var(--mid);
    }

    .ttk-hero__statement {
      font-family: var(--display);
      font-size: clamp(28px, 3vw, 40px);
      line-height: .96; letter-spacing: .02em;
      color: var(--navy);
      border-left: 3px solid var(--navy);
      padding-left: 24px;
    }

    /* ── GRID ── */
    .ttk-grid-section {
      padding: 80px 0 120px;
    }

    .ttk-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: #eee;
    }

    .ttk-card {
      background: var(--white);
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      transition: background .2s;
      position: relative;
      overflow: hidden;
    }

    .ttk-card:hover { background: var(--off); }

    /* Photo */
    .ttk-card__photo {
      position: relative;
      aspect-ratio: 9/10;
      overflow: hidden;
      background: var(--off);
      flex-shrink: 0;
    }

    .ttk-card__photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(15%);
      transition: transform .6s var(--ease), filter .4s;
    }

    .ttk-card:hover .ttk-card__photo img {
      transform: scale(1.04);
      filter: grayscale(0%);
    }

    /* Body */
    .ttk-card__body {
      padding: 28px 28px 32px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .ttk-card__num {
      font-size: 10px; letter-spacing: .2em;
      text-transform: uppercase; color: var(--light);
      margin-bottom: 12px; display: block;
    }

    .ttk-card__title {
      font-family: var(--display);
      font-size: clamp(20px, 2vw, 26px);
      line-height: .96; letter-spacing: .02em;
      color: var(--ink); margin-bottom: 14px;
    }

    .ttk-card__excerpt {
      font-size: 13px; font-weight: 300;
      line-height: 1.7; color: var(--mid);
      flex: 1; margin-bottom: 24px;
    }

    .ttk-card__link {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 400;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink); transition: gap .2s;
      margin-top: auto;
    }

    .ttk-card:hover .ttk-card__link { gap: 14px; }

    /* Arrow top-right */
    .ttk-card__arrow {
      position: absolute; top: 16px; right: 16px;
      width: 32px; height: 32px;
      background: var(--white);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: translate(-4px, 4px);
      transition: opacity .25s, transform .25s;
    }

    .ttk-card:hover .ttk-card__arrow {
      opacity: 1; transform: translate(0, 0);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .ttk-grid { grid-template-columns: 1fr 1fr; }
      .ttk-hero__body { grid-template-columns: 1fr; gap: 32px; }
    }

    @media (max-width: 640px) {
      .ttk-grid { grid-template-columns: 1fr; background: none; gap: 24px; }
    }