:root {
      --apple-teal-light: #bfebe0;
      --apple-teal:       #2aba9e;
      --apple-teal-dark:  #178c9b;
      --apple-navy:       #12385a;
      --apple-gray-1:     #1d1d1f;
      --apple-gray-2:     #6e6e73;
      --apple-gray-3:     #86868b;
      --apple-gray-4:     #a1a1a6;
      --apple-white:      #f5f5f7;
      --chip-m5-grad:     linear-gradient(135deg, #bfebe0 0%, #2aba9e 40%, #178c9b 70%, #12385a 100%);
      --chip-dark-grad:   linear-gradient(135deg, #3a3a3c 0%, #2c2c2e 60%, #1c1c1e 100%);
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      background: #000;
      color: var(--apple-white);
      font-family: -apple-system, 'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a {
      color: var(--apple-teal);
      text-decoration: none;
      transition: color .2s;
    }
    a:hover { color: var(--apple-teal); text-decoration:undeline; }

    /* ── TYPOGRAPHY ── */
    /* ── Social icons ── */
    .section-hello-world { padding-top: 32px; padding-bottom: 8px; overflow: visible; }
    .social-icons {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      animation: fadeUpIn .9s ease forwards;
      animation-delay: 3s;
    }
    .social-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--apple-gray-4);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: border-color .25s, color .25s, background .25s, transform .2s;
    }
    .social-icon:hover {
      border-color: rgba(42,186,158,.4);
      color: var(--apple-teal);
      background: rgba(255,255,255,.12);
      transform: scale(1.08);
    }

    .eyebrow {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--apple-teal);
    }

    .headline-super {
      font-size: clamp(48px, 9vw, 96px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.0;
    }

    .headline-secondary {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 700;
      letter-spacing: -.025em;
      line-height: 1.05;
    }

    .section-copy {
      font-size: 17px;
      line-height: 1.7;
      color: var(--apple-gray-4);
    }

    .section-copy .highlight { color: #fff; font-weight: 500; }

    .subsection-headline {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 700;
      letter-spacing: -.025em;
      line-height: 1.1;
    }

    /* ── GRADIENT TEXT ── */
    .grad-text {
      background: var(--chip-m5-grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ─────────────────────────────────────
       HERO SECTION
    ───────────────────────────────────── */
    .section-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: end;
      text-align: left;
      overflow: hidden;
      padding: 80px 24px 100px;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 55% at 50% 40%, rgba(42,186,158,.13) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 20% 65%, rgba(23,140,155,.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 45% at 80% 25%, rgba(18,56,90,.18) 0%, transparent 55%),
        #000;
      animation: heroBgPulse 8s ease-in-out infinite alternate;
    }

    @keyframes heroBgPulse {
      from { opacity: .8; }
      to   { opacity: 1;  }
    }

    /* floating particles */
    .hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
    .particle {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: floatUp var(--dur, 6s) var(--delay, 0s) ease-in-out infinite;
    }
    @keyframes floatUp {
      0%,100% { opacity: 0; transform: translateY(0) scale(.6); }
      20%      { opacity: var(--op, .35); }
      80%      { opacity: var(--op, .35); }
      100%     { opacity: 0; transform: translateY(-110px) scale(1); }
    }

    .hero-content { position: relative; z-index: 2; }

    .hero-stat-number {
      font-size: clamp(44px, 7vw, 80px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1;
    }

    .hero-stat-label { font-size: 15px; color: var(--apple-gray-2); }



    /* fade-up animation for hero content */
    .fade-up {
      opacity: 0;
      animation: fadeUpIn .9s ease forwards;
    }
    .fade-up:nth-child(1) { animation-delay: .25s; }
    .fade-up:nth-child(2) { animation-delay: .45s; }
    .fade-up:nth-child(3) { animation-delay: .65s; }
    .fade-up:nth-child(4) { animation-delay: .85s; }
    .fade-up:nth-child(5) { animation-delay:1.05s; }
    @keyframes fadeUpIn {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0);    }
    }



    /* ─────────────────────────────────────
       HIGHLIGHTS GALLERY
    ───────────────────────────────────── */
    .section-highlights {
      padding-top: 80px;
      padding-bottom: 80px;
      background:
        radial-gradient(ellipse 80% 55% at 50% 40%, rgba(42,186,158,.13) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 20% 65%, rgba(23,140,155,.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 45% at 80% 25%, rgba(18,56,90,.18) 0%, transparent 55%),
        #000;
    }

    /* Header */
    .hl-header {
      padding: 0 0 48px;
    }
    .hl-headline {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 700;
      letter-spacing: -.025em;
      line-height: 1.1;
      color: #fff;
      margin: 0;
    }

    .section-highlights--no-bg {
      border-top: none;
      border-bottom: none;
      background:
        radial-gradient(ellipse 80% 55% at 50% 40%, rgba(42,186,158,.13) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 20% 65%, rgba(23,140,155,.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 45% at 80% 25%, rgba(18,56,90,.18) 0%, transparent 55%),
        #000;
    }


    /* Full-bleed card track */
    .hl-track-wrap {
      overflow: hidden;
      padding: 4px 0;
    }
    #hl-track-1-wrap,
    #hl-track-2-wrap {
    }
    .hl-track {
      display: flex;
      gap: 16px;
      padding-left: max(12px, calc((100vw - 1320px) / 2));
      padding-right: 40px;
      transition: transform .65s cubic-bezier(.16,1,.3,1);
      will-change: transform;
    }

    /* Card wrapper holds the gradient border */
    .hl-card-wrap {
      position: relative;
      border-radius: 21px;
      flex-shrink: 0;
      padding: 1px;
      /* Default mobile: fluid width, proportional height */
      flex: 0 0 calc(100vw - 24px);
      height: 72vh;
      min-height: 500px;
      max-height: 680px;
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
    }
   .hl-card-wrap.in-view,
    .hl-card-wrap.fully-visible {
      animation: cardIn .65s ease forwards;
    }

    /* Portfolio breakpoints */
    @media (min-width: 576px)  { .hl-card-wrap { flex: 0 0 calc(100vw - 24px); } .hl-track { padding-left: max(12px, calc((100vw - 540px) / 2)); } }
    @media (min-width: 768px)  { .hl-card-wrap { flex: 0 0 720px;  } .hl-track { padding-left: max(12px, calc((100vw - 720px)  / 2)); } }
    @media (min-width: 992px)  { .hl-card-wrap { flex: 0 0 960px;  } .hl-track { padding-left: max(12px, calc((100vw - 960px)  / 2)); } }
    @media (min-width: 1200px) { .hl-card-wrap { flex: 0 0 1140px; } .hl-track { padding-left: max(12px, calc((100vw - 1140px) / 2)); } }
    @media (min-width: 1400px) { .hl-card-wrap { flex: 0 0 1320px; } .hl-track { padding-left: max(12px, calc((100vw - 1320px) / 2)); } }

    /* ── Paddle nav ── */
    .paddlenav-wrap {
      display: flex;
      justify-content: flex-end;
      padding: 24px 0 56px;
    }
    .paddlenav-list {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .paddlenav-item { display: flex; }
    .paddlenav-arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.8);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
      backdrop-filter: blur(8px);
    }
    .paddlenav-arrow svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }
    .paddlenav-arrow:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(42,186,158,.4);
      color: var(--apple-teal);
      transform: scale(1.08);
    }
    .paddlenav-arrow:active { transform: scale(.93); }
    .paddlenav-arrow:disabled { opacity: .3; pointer-events: none; }

    /* Graphics section: ~half container so two cards fit */
    #hl-track-2 .hl-card-wrap { flex: 0 0 calc(100vw - 24px); height: 50vh; min-height: 280px; max-height: 420px; }
    #hl-track-2 .hl-card { height: 100%; }
    @media (min-width: 576px)  { #hl-track-2 .hl-card-wrap { flex: 0 0 calc((540px  - 12px) / 2); } #hl-track-2 { padding-left: max(12px, calc((100vw - 540px)  / 2)); } }
    @media (min-width: 768px)  { #hl-track-2 .hl-card-wrap { flex: 0 0 calc((720px  - 12px) / 2); } #hl-track-2 { padding-left: max(12px, calc((100vw - 720px)  / 2)); } }
    @media (min-width: 992px)  { #hl-track-2 .hl-card-wrap { flex: 0 0 calc((960px  - 12px) / 2); } #hl-track-2 { padding-left: max(12px, calc((100vw - 960px)  / 2)); } }
    @media (min-width: 1200px) { #hl-track-2 .hl-card-wrap { flex: 0 0 calc((1140px - 12px) / 2); } #hl-track-2 { padding-left: max(12px, calc((100vw - 1140px) / 2)); } }
    @media (min-width: 1400px) { #hl-track-2 .hl-card-wrap { flex: 0 0 calc((1320px - 12px) / 2); } #hl-track-2 { padding-left: max(12px, calc((100vw - 1320px) / 2)); } }

    .hl-card-wrap:not(.is-active) .hl-card {
      opacity: .5;
    }
    .hl-card-wrap.is-active .hl-card {
      opacity: 1;
    }

    /* Mobile height override */
    @media (max-width: 575.98px) {
      .hl-card-wrap { height: 56vw; min-height: 280px; max-height: 420px; }
      .hl-track { padding-left: 12px; padding-right: 12px; }
      .hl-card-caption { padding: 20px; }
      .hl-card-text { font-size: 18px; }
    }

    /* Show captions on touch devices (no hover) */
    @media (hover: none) {
      .hl-card-caption--bot,
      .card-gallery-body {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      .hl-card-wrap { height: 60vw; min-height: 300px; max-height: 460px; }
    }
    .hl-card-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 21px;
      background: transparent;
      pointer-events: none;
      transition: background .3s ease;
      z-index: 0;
    }
    .hl-card-wrap::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: 20px;
      background: #000;
      pointer-events: none;
      z-index: 0;
    }
    .hl-card-wrap:hover::before,
    .hl-card-wrap:focus-within::before {
      background: transparent;
    }
    .hl-card-wrap .hl-card {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      cursor: pointer;
      text-decoration: none;
    }

    .hl-card {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: #111;
      transition: opacity .5s ease;
      cursor: pointer;
      text-decoration: none;
      display: block;
    }

    .hl-card-caption .card-gallery-footer {
      margin-top: 0;
    }
    .card-gallery-footer .hl-card-text,
    .card-gallery-footer .chip-name-label,
    .card-gallery-footer .edu-source,
    .card-gallery-body .chip-name-label,
    .card-gallery-body .edu-source {
      margin: 0;
    }
    .card-gallery-footer .chip-name-label,
    .card-gallery-body .chip-name-label { margin-bottom: 2px; }

    .hl-card-caption .edu-source,
    .card-gallery-body .edu-source,
    .card-gallery-footer .edu-source { margin-bottom: 0; }

    /* Gallery card body — matches card-body-area from recent courses */
    .card-gallery-body {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 22px 28px 28px;
      background: rgba(0,0,0,.75);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .hl-card-wrap:hover .card-gallery-body {
      opacity: 1;
      transform: translateY(0);
    }

    .card-badge-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .card-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px 3px 5px;
      border-radius: 100px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.15);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .03em;
      color: #fff;
      white-space: nowrap;
    }
    .card-badge svg { flex-shrink: 0; }

    .card-tool-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px 4px 6px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.8);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .02em;
      text-decoration: none;
      white-space: nowrap;
      transition: border-color .25s, color .25s, background .25s, transform .2s;
    }
    .card-tool-badge:hover {
      border-color: rgba(42,186,158,.4);
      color: var(--apple-teal);
      background: rgba(255,255,255,.12);
      transform: scale(1.08);
    }

    .tool-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px 2px 5px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .02em;
      white-space: nowrap;
      vertical-align: middle;
    }
    .tool-badge--figma, .tool-badge--sketch, .tool-badge--bootstrap,
    .tool-badge--wordpress, .tool-badge--illustrator, .tool-badge--aftereffects,
    .tool-badge--photoshop, .tool-badge--html5, .tool-badge--css,
    .tool-badge--dalle, .tool-badge--lovable {
      background: rgba(42,186,158,.15);
      border: 1px solid rgba(42,186,158,.35);
      color: var(--apple-teal);
    }
    .tool-badge svg { flex-shrink: 0; }
    .tool-sep { margin: 0 2px; }

    /* Image fills card */
    .hl-card picture {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
    .hl-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Caption — top-left by default, center-bottom for chip card */
    .hl-card-caption {
      position: absolute;
      z-index: 2;
      padding: 28px 28px;
    }
    .hl-card-caption--top  { top: 0; left: 0; right: 0; }
    .hl-card-caption--bot  {
      bottom: 0; left: 0; right: 0;
      padding: 22px 28px 28px;
      background: rgba(0,0,0,.75);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .hl-card-wrap:hover .hl-card-caption--bot {
      opacity: 1;
      transform: translateY(0);
    }
    .hl-card-text {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.2;
      color: #fff;
      margin: 0;
    }
    .hl-card--light .hl-card-text { color: #1d1d1f; }

    /* Dotnav inside pill */
    .hl-dotnav {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 20px;
      height: 52px;
    }
    .hl-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,.35);
      border: none;
      padding: 0;
      cursor: pointer;
      position: relative;
      transition: background .3s;
      flex-shrink: 0;
    }
    /* Timed progress ring on active dot */
    .hl-dot.active {
      background: rgba(255,255,255,.35);
    }
    .hl-dot.active::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 2px solid var(--apple-teal);
      animation: dotRing var(--hl-interval, 4500ms) linear forwards;
    }
    @keyframes dotRing {
      from { clip-path: inset(0 100% 0 0); opacity: 1; }
      to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
    }

    /* ─────────────────────────────────────
       PORTFOLIO MODAL
    ───────────────────────────────────── */

    /* + button on card */
    .card-plus-btn {
      position: absolute;
      bottom: 28px;
      right: 28px;
      z-index: 10;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.3);
      background: rgba(0,0,0,.5);
      backdrop-filter: blur(8px);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
    }
    .card-plus-btn:hover,
    .hl-card-wrap:hover .card-plus-btn {
      background: rgba(255,255,255,.12);
      border-color: rgba(42,186,158,.4);
      color: var(--apple-teal);
      transform: scale(1.08);
    }

    /* Modal overlay */
    .pf-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,.75);
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease;
    }
    .pf-modal-overlay.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Modal panel */
    .pf-modal {
      background: #111;
      border: 1px solid #2c2c2e;
      border-radius: 24px;
      overflow: hidden;
      width: calc(100vw - 24px);
      max-height: 90vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      transform: translateY(24px) scale(.97);
      transition: transform .35s cubic-bezier(.16,1,.3,1);
      position: relative;
    }
    /* Stacked: image top, text centered below */
    .pf-modal--stacked {
      grid-template-columns: 1fr;
    }
    .pf-modal--stacked .pf-modal-img-wrap {
      min-height: 320px;
      max-height: 420px;
    }
    .pf-modal--stacked .pf-modal-body {
      align-items: stretch;
      max-width: none;
      margin: 0;
      padding: 0;
    }
    .pf-modal--stacked .modal-content-body {
      text-align: left;
      width: 100%;
    }
    /* Text sections stay in a centered column */
    .pf-modal--stacked .modal-section {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 40px;
      padding-right: 40px;
      width: 100%;
      box-sizing: border-box;
    }
    /* First section gets top padding */
    .pf-modal--stacked .modal-content-body > .modal-section:first-child {
      padding-top: 40px;
    }
    .pf-modal--stacked .modal-content-body > .modal-section:last-child {
      padding-bottom: 40px;
    }
    /* Images break out to full width */
    .pf-modal--stacked .modal-section img,
    .pf-modal--stacked .modal-section video,
    .pf-modal--stacked .modal-section iframe,
    .pf-modal--stacked .modal-section .container {
      max-width: none;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
    /* Full-bleed image sections */
    .pf-modal--stacked .modal-section:has(> img:only-child),
    .pf-modal--stacked .modal-section:has(> video:only-child) {
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }
    .pf-modal--stacked .pf-modal-cta {
      align-self: flex-start;
      margin-left: auto;
      margin-right: auto;
      max-width: 640px;
      width: 100%;
      padding: 0 40px 40px;
      box-sizing: border-box;
    }
    @media (min-width: 576px)  { .pf-modal { width: 540px; } }
    @media (min-width: 768px)  { .pf-modal { width: 720px; } }
    @media (min-width: 992px)  { .pf-modal { width: 960px; } }
    @media (min-width: 1200px) { .pf-modal { width: 1140px; } }
    @media (min-width: 1400px) { .pf-modal { width: 1320px; } }
    .pf-modal-overlay.is-open .pf-modal {
      transform: translateY(0) scale(1);
    }

    /* Close button */
    .pf-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(0,0,0,.5);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: background .2s, border-color .2s, color .2s, transform .2s;
    }
    .pf-modal-close:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(42,186,158,.4);
      color: var(--apple-teal);
      transform: scale(1.08);
    }

    /* Image side */
    .pf-modal-img-wrap {
      position: relative;
      overflow: hidden;
      min-height: 400px;
    }
    .pf-modal-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pf-modal--stacked #pf-modal-eyebrow,
    .pf-modal--stacked #pf-modal-title {
      max-width: 640px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 40px;
      padding-right: 40px;
      box-sizing: border-box;
    }
    .pf-modal--stacked #pf-modal-eyebrow { padding-top: 40px; }

    @media (max-width: 575.98px) {
      .pf-modal--stacked .modal-section,
      .pf-modal--stacked .pf-modal-cta,
      .pf-modal--stacked #pf-modal-eyebrow,
      .pf-modal--stacked #pf-modal-title { padding-left: 20px; padding-right: 20px; }
    }
      min-height: unset;
      height: auto;
    }
    .pf-modal--stacked .pf-modal-img {
      position: static;
      height: auto;
      object-fit: unset;
    }

    /* Content side */
    .pf-modal-body {
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 16px;
      overflow-y: auto;
      max-height: 90vh;
    }
    .pf-modal-title {
      font-size: clamp(22px, 2.5vw, 32px);
      font-weight: 700;
      letter-spacing: -.025em;
      color: #fff;
      margin: 0;
      line-height: 1.2;
    }
    .pf-modal-desc {
      font-size: 15px;
      line-height: 1.7;
      color: var(--apple-gray-4);
      margin: 0;
    }
    .pf-modal-cta {
      align-self: flex-start;
      margin-top: 8px;
    }

    /* Rich modal content styles */
    .modal-content-body { display: flex; flex-direction: column; gap: 28px; }
    .modal-content-body h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apple-teal); margin: 0 0 8px; }
    .modal-content-body p { font-size: 15px; line-height: 1.7; color: var(--apple-gray-4); margin: 0; }
    .modal-content-body ul { padding-left: 20px; margin: 0; }
    .modal-content-body ul li { font-size: 15px; line-height: 1.7; color: var(--apple-gray-4); margin-bottom: 4px; }
    .modal-content-body blockquote { border-left: 2px solid var(--apple-teal); padding-left: 16px; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: #fff; letter-spacing: -.01em; }
/*    .modal-content-body img { width: 100%; border-radius: 12px; display: block; } */
    .modal-section { display: flex; flex-direction: column; gap: 12px; }

    @media (max-width: 767.98px) {
      .pf-modal { grid-template-columns: 1fr; }
      .pf-modal-img-wrap { min-height: 240px; }
      .pf-modal-body { padding: 32px 24px; }
    }

    /* Graphics modal — smaller than portfolio */
    .g-modal {
      width: calc(100vw - 24px);
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: 576px)  { .g-modal { width: 480px; } }
    @media (min-width: 768px)  { .g-modal { width: 600px; } }
    @media (min-width: 992px)  { .g-modal { width: 680px; } }
    @media (min-width: 1200px) { .g-modal { width: 720px; } }
    .g-modal .pf-modal-img-wrap { min-height: 280px; }
    .g-modal .pf-modal-body { padding: 0px 0px; }
    .g-modal .pf-modal-title { font-size: clamp(18px, 2vw, 24px); }
    @media (max-width: 575.98px) {
      .g-modal { grid-template-columns: 1fr; }
      .g-modal .pf-modal-img-wrap { min-height: 180px; }
    }

    /* ── Footer ── */
    .site-footer {
      padding: 24px;
      text-align: center;
    }
    .site-footer p {
      font-size: 12px;
      color: var(--apple-gray-2);
      margin: 0;
      letter-spacing: .02em;
    }
    .site-footer a {
      color: var(--apple-teal);
      text-decoration: none;
      transition: color .2s;
    }
    .site-footer a:hover { color: var(--apple-teal); }

    /* ─────────────────────────────────────
       CONTACT SECTION
    ───────────────────────────────────── */
    .section-contact {
      background:
        radial-gradient(ellipse 80% 55% at 50% 40%, rgba(42,186,158,.13) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 20% 65%, rgba(23,140,155,.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 45% at 80% 25%, rgba(18,56,90,.18) 0%, transparent 55%),
        #000;
      padding: 80px 0 120px;
    }

    .contact-card {
      background: #0f0f0f;
      border: 1px solid #1c1c1e;
      border-radius: 24px;
      padding: 52px 56px;
      display: flex;
      flex-direction: column;
      gap: 28px;
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .contact-card.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .contact-field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .contact-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--apple-gray-4);
      text-transform: uppercase;
    }

    .contact-input {
      background: #1c1c1e;
      border: 1px solid #2c2c2e;
      border-radius: 12px;
      padding: 14px 18px;
      font-size: 16px;
      color: #fff;
      font-family: inherit;
      outline: none;
      transition: border-color .25s, box-shadow .25s;
      width: 100%;
    }
    .contact-input::placeholder { color: var(--apple-gray-2); }
    .contact-input:focus {
      border-color: rgba(42,186,158,.5);
      box-shadow: 0 0 0 3px rgba(42,186,158,.1);
    }

    .contact-textarea {
      resize: vertical;
      min-height: 140px;
      line-height: 1.6;
    }

    .contact-submit {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.8);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 16px;
      padding: 14px 28px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: background .2s, border-color .2s, color .2s, transform .2s;
    }
    .contact-submit:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(42,186,158,.4);
      color: var(--apple-teal);
      transform: scale(1.03);
    }
    .contact-submit:active { transform: scale(.97); }

    @media (max-width: 767.98px) {
      .contact-card { padding: 32px 24px; }
    }

    /* ─────────────────────────────────────
       CHIP FAMILY SECTION
    ───────────────────────────────────── */
    .section-family {
      background:
        radial-gradient(ellipse 80% 55% at 50% 40%, rgba(42,186,158,.13) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 20% 65%, rgba(23,140,155,.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 45% at 80% 25%, rgba(18,56,90,.18) 0%, transparent 55%),
        #000;
      padding: 80px 0 120px;
    }
    .section-family .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
      margin-bottom: 64px;
    }

    /* Chip cards */
    .chip-card {
      background: #0f0f0f;
      border: 1px solid #1c1c1e;
      border-radius: 20px;
      overflow: hidden;
      height: 100%;
      transition: transform .3s, box-shadow .3s, border-color .3s;
      opacity: 0;
      transform: translateY(28px);
    }
    .chip-card.in-view {
      animation: cardIn .65s ease forwards;
    }
    @keyframes cardIn {
      to { opacity: 1; transform: translateY(0); }
    }
    .chip-card:hover { }

    /* Education card elements */
    .edu-icon-wrap {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(42,186,158,.15), rgba(23,140,155,.1));
      border: 1px solid rgba(42,186,158,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--apple-teal);
      margin-bottom: 16px;
    }
    .edu-source {
      font-size: 13px;
      color: var(--apple-teal);
      font-weight: 500;
      margin-top: 4px;
      letter-spacing: .01em;
    }

    .card-header-area {
      background: #0a0a0a;
      padding: 28px 28px 20px;
      border-bottom: 1px solid #1c1c1e;
    }

    /* Chip badge icons (three stacked pills like Apple's icon row) */
    .chip-icons-row {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
    }
    .chip-pill-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      flex-shrink: 0;
    }
    .icon-m5   { background: var(--chip-m5-grad); }
    .icon-pro  { background: var(--chip-dark-grad); border: 1px solid #3a3a3c; opacity: .4; }
    .icon-max  { background: var(--chip-dark-grad); border: 1px solid #3a3a3c; opacity: .25; }
    /* active variant overrides */
    .icon-pro.active  { opacity: 1; }
    .icon-max.active  { opacity: 1; }
    .icon-m5.inactive { opacity: .25; }

    .chip-name-label {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--apple-white);
      margin: 0;
    }
    .hl-card-caption .chip-name-label { color: #fff; }
    .hl-card-caption .edu-source { margin-top: 4px; }

    .size-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .size-pill {
      padding: 3px 11px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 500;
      border: 1px solid #2c2c2e;
      color: var(--apple-gray-4);
      background: #1c1c1e;
    }

    .card-body-area { padding: 22px 28px 28px; }

    .chip-audience {
      font-size: 14px;
      line-height: 1.65;
      color: var(--apple-gray-3);
      margin-bottom: 20px;
    }

    .spec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .spec-item {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 14px;
      color: var(--apple-gray-4);
    }
    .spec-check {
      color: var(--apple-teal);
      flex-shrink: 0;
      margin-top: 1px;
    }
    .spec-item strong { color: var(--apple-white); font-weight: 500; }

    /* Mini screen mockups inside cards */
    .card-screen {
      height: 150px;
      margin: 0 28px 22px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #2c2c2e;
      background: #0a0a0a;
      position: relative;
    }

    /* Premiere / timeline style */
    .screen-premiere {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      justify-content: center;
      height: 100%;
      background: #1a1a2e;
    }
    .tl-bar {
      height: 8px;
      border-radius: 4px;
      animation: tlShimmer 2.2s ease-in-out infinite;
    }
    .tl-clips { display: flex; gap: 4px; margin-top: 4px; }
    .tl-clip { height: 36px; border-radius: 5px; flex: 1; }
    @keyframes tlShimmer { 0%,100%{opacity:.55} 50%{opacity:1} }

    /* VS Code style */
    .screen-code {
      padding: 10px 12px;
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 10px;
      line-height: 1.65;
      background: #1e1e1e;
      color: #6a9955;
      height: 100%;
      overflow: hidden;
    }
    .ck { color: #569cd6; }
    .cs { color: #ce9178; }
    .cf { color: #dcdcaa; }
    .ct { color: #4ec9b0; }

    /* Vectorworks style */
    .screen-vw {
      background: #0d1117;
      height: 100%;
      position: relative;
    }
    .vw-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(42,186,158,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,186,158,.06) 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .vw-shape {
      position: absolute;
      border: 1px solid rgba(42,186,158,.55);
      animation: vwSpin var(--sd,10s) linear infinite;
    }
    @keyframes vwSpin {
      from { transform: translate(-50%,-50%) rotate(0deg);   }
      to   { transform: translate(-50%,-50%) rotate(360deg); }
    }
    .vw-label {
      position: absolute; bottom: 8px; left: 10px;
      font-size: 9px; color: var(--apple-teal); font-family: monospace;
    }

    /* ── EXPLORE BUTTON ── */
    .explore-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      background: transparent;
      border: 1px solid #3a3a3c;
      border-radius: 100px;
      color: var(--apple-teal);
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all .3s ease;
      text-decoration: none;
    }
    .explore-btn:hover {
      background: rgba(42,186,158,.1);
      border-color: rgba(42,186,158,.5);
      transform: translateY(-2px);
      color: var(--apple-teal);
    }
    .explore-btn svg { transition: transform .3s; }
    .explore-btn:hover svg { transform: rotate(45deg); }

    /* ── UTILITY ── */
    .text-apple-gray { color: var(--apple-gray-4); }
    .divider-glow {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(42,186,158,.25), transparent);
    }
    .circle {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 205px;
    height: 203px;
    border-radius: 50%;
    z-index: 2;
    overflow: hidden;
    background: rgb(150, 219, 247);
    background: -moz-linear-gradient(0deg, rgba(150,219,247,1) 0%, rgba(95,175,226,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(150, 219, 247, 1) 0%, rgba(95, 175, 226, 1) 100%);
    background: linear-gradient(0deg, rgba(150, 219, 247, 1) 0%, rgba(95, 175, 226, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#96dbf7",endColorstr="#5fafe2",GradientType=1);
    }
    .carousel-control-next, .carousel-control-prev {
    width: 6%;
    }
    .coverage-boxes {
    background:#1c2940; 
    border-radius:6px;
    border:solid 1px #1c2940;
    cursor:pointer; font-family:'lato', sans-serif;
    transition: box-shadow 0.5s ease;}

    .coverage-boxes h3 {
    font-size:16px; 
    color:#ffffff; 
    font-weight:700; 
    text-transform:uppercase; 
    font-family:'lato', sans-serif;
    }
    .coverage-boxes p {
    margin-bottom:0px;
    color:#ffffff;
    font-size:14px;
    font-weight:200;
    line-height:18px;
    }
    .coverage-boxes .number {
    font-size:30px;
    color:#ffffff;
    font-weight:700;
    line-height:1.1;
    }
    .coverage-boxes:hover {
    box-shadow: 0 0 10px 2px rgba(52, 152, 219, 0.8); /* Blue glow effect */
    }
    .coverage-boxes:focus,.coverage-boxes:active {
    border:solid 1px #339CFF!important;
    }

.contact-feedback {display:none; background: linear-gradient(135deg, rgba(42, 186, 158, .15), rgba(23, 140, 155, .1));
    border: 1px solid rgba(42, 186, 158, .2); padding:12px 16px; border-radius:12px; color:#2aba9e}

    ol { counter-reset: list-item; }

  /*  @supports (-moz-appearance:none) {
  .ff-hack {
    display: none !important;
  }
} */

.modal-header-font {font-size:clamp(20px,2.5vw,28px);font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-.02em;}