/* ======================================================
   PROXIMA NOVA — self-hosted web fonts
====================================================== */
@font-face {
  font-family: 'Proxima Nova';
  src: url('Assets/Fonts/proximanova-light-webfont.woff2') format('woff2'),
       url('Assets/Fonts/proximanova-light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('Assets/Fonts/proximanova-lightitalic-webfont.woff2') format('woff2'),
       url('Assets/Fonts/proximanova-lightitalic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('Assets/Fonts/proximanova-regular-webfont.woff2') format('woff2'),
       url('Assets/Fonts/proximanova-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('Assets/Fonts/proximanova-regularitalic-webfont.woff2') format('woff2'),
       url('Assets/Fonts/proximanova-regularitalic-webfont.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('Assets/Fonts/proximanova-semibold-webfont.woff2') format('woff2'),
       url('Assets/Fonts/proximanova-semibold-webfont.woff') format('woff');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('Assets/Fonts/proximanova-semibolditalic-webfont.woff2') format('woff2'),
       url('Assets/Fonts/proximanova-semibolditalic-webfont.woff') format('woff');
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}

:root {
      /* — Colors — */
      --color-bg:          #fdfdfd;   /* Page / hero background */
      --color-green:       #549865;   /* Brand green: name, hover accents */
      --color-peach:       #ffe8d1;   /* Product Design section background */
      --color-dark:        #363636;   /* Architecture section bg, dark text */
      --color-dark-alt:    #454545;   /* Dividers, secondary buttons */
      --color-gray-section:#ebebeb;   /* About Me section background */
      --color-orange:      #ff5b00;   /* Totim "View Case Study" button */
      --color-green-pill:  #63a86d;   /* CTA banner pill strip */
      --color-near-black:  #0a0a0a;   /* Body / tag text */
      --color-off-white:   #f5f5f5;   /* Text on dark backgrounds */

      /* — Fonts — */
      --font-primary:       'Proxima Nova', Arial, sans-serif;
      --font-body:          'Proxima Nova', Arial, sans-serif;
      --font-serif-display: 'DM Serif Text', Georgia, serif;
      --font-serif-body:    'Noto Serif', Georgia, serif;

      /* — Typography — */
      /* Edit this one value to resize all body text at once */
      --font-size-body: clamp(17px, 1.49vw, 21px); /* max reduced ~10% for desktop; mobile floor unchanged */

      /* — Layout — */
      --nav-h:     72px;
      --pad-h:     clamp(40px, 8.2%, 142px); /* horizontal section padding */
    }


    /* ======================================================
       RESET & BASE
    ====================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
    }

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

    img { display: block; max-width: 100%; }
    a   { text-decoration: none; color: inherit; }


    /* ======================================================
       NAV — Sticky top bar
       Transparent over hero; gains background once scrolled.
       JS adds .scrolled class — see bottom of file.
    ====================================================== */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(24px, 4%, 60px);
      opacity: 0;
      pointer-events: none;
      transition: background 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
    }
    .nav.scrolled {
      background: rgba(253, 253, 253, 0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
      opacity: 1;
      pointer-events: auto;
    }

    /* "Tai Disla" wordmark in nav */
    .nav__name {
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -0.02em;
    }
    .nav__name:hover { color: var(--color-green); }

    /* Nav link list */
    .nav__links {
      display: flex;
      gap: 36px;
      list-style: none;
      font-size: 16px;
      font-weight: 400;
    }
    .nav__links a { transition: color 0.2s; }
    .nav__links a:hover { color: var(--color-green); }

    /* Hamburger button — hidden on desktop, shown on mobile */
    .nav__hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      width: 40px;
      height: 40px;
      color: var(--color-near-black);
      flex-shrink: 0;
    }
    .nav__hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: opacity 0.2s;
    }

    /* Mobile nav panel — hidden on desktop */
    .nav__mobile-menu {
      display: none;
    }


    /* ======================================================
       HERO / LANDING
       Full-viewport intro with logo, name, disciplines.
    ====================================================== */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 var(--pad-h);
      gap: clamp(60px, 10vw, 160px);
      overflow: hidden;
    }

    /* Left group: alien logo + name block side by side */
    .hero__left {
      display: flex;
      align-items: center;
      gap: clamp(18px, 2vw, 36px);
      flex-shrink: 0;
    }

    /* AlienSolid mascot */
    .hero__logo {
      width: clamp(70px, 7vw, 112px);
      flex-shrink: 0;
    }

    /* Name + "About Me" stacked vertically */
    .hero__name-block {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    /* "Tai Disla" — large green heading */
    .hero__name {
      font-family: var(--font-primary);
      font-weight: 700;
      font-size: clamp(50px, 6.75vw, 86px);
      color: var(--color-green);
      line-height: 1;
      white-space: nowrap;
    }

    /* "About Me" — small link directly below name */
    .hero__about-link {
      display: inline-block;
      font-size: clamp(18px, 0.9vw, 15px);
      transition: color 0.2s;
      margin-left: 15px;
    }
    .hero__about-link:hover { color: var(--color-green); }

    /* Disciplines — clickable nav links, right of left group */
    .hero__disciplines {
      display: flex;
      flex-direction: column;
      font-size: clamp(18px, 2.52vw, 43px);
      line-height: 1.35;
      white-space: nowrap;
    }
    .hero__disciplines a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s;
    }
    .hero__disciplines a:hover { color: var(--color-green); }

    /* Social icons — bottom-right cluster */
    .hero__socials {
      position: absolute;
      bottom: clamp(80px, 13svh, 155px);
      right: var(--pad-h);
      display: flex;
      gap: 16px;
      align-items: center;
    }
    .hero__socials a {
      display: flex;
      width: 34px;
      height: 34px;
      transition: opacity 0.2s;
    }
    .hero__socials a:hover { opacity: 0.55; }
    .hero__socials img { width: 100%; height: 100%; object-fit: contain; }

    /* Scroll-down chevron — bottom-center, bounces */
    .hero__scroll-cue {
      position: absolute;
      bottom: clamp(32px, 6svh, 72px);
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: auto;
      cursor: pointer;
      animation: bounce 2.2s ease-in-out infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%        { transform: translateX(-50%) translateY(9px); }
    }


    /* ======================================================
       WAVE TRANSITION ELEMENTS
       Inline SVG banners that create the curved color
       transitions between sections (matching Figma design).

       .wave           — normal orientation
       .wave--flip     — flipped vertically (scaleY -1)
    ====================================================== */
    .wave-wrap {
      display: block;
      line-height: 0; /* eliminate inline-block gap */
    }
    .wave-wrap img {
      width: 100%;
      /* Height is proportional to design: 193px at 1728px wide ≈ 11.2% */
      height: clamp(60px, 10vw, 155px);
    }
    .wave-wrap--flip img { transform: scaleY(-1); }


    /* ======================================================
       SHARED SECTION STYLES
    ====================================================== */

    /* Section header label (e.g. "Product Design", "Spacial Design") */
    .section-label {
      font-family: var(--font-primary);
      font-weight: 600;
      font-size: clamp(27px, 2.52vw, 43px);
      line-height: 1;
      color: var(--color-dark);
    }
    .section-label--right  { text-align: right; }
    .section-label--light  { color: var(--color-off-white); }
    .section-label--vertical {
      writing-mode: vertical-lr;
      position: absolute;
      left: clamp(10px, 1.2vw, 20px);
      top: clamp(24px, 3vw, 48px);
      font-size: clamp(14px, 1.4vw, 22px);
      font-weight: 600;
      margin: 0;
      letter-spacing: 0.05em;
      opacity: 0.75;
    }

    /* Two-column project card
       Edit grid-template-columns below to change the image/content ratio */
    .project-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(28px, 4vw, 80px);
    }
    /* Reverses column order — used when image should appear on right */
    .project-card--flip { direction: rtl; }
    .project-card--flip > * { direction: ltr; }

    /* Category label "(Architecture)" "(Product Design)" */
    .project-category {
      font-style: italic;
      font-size: clamp(12px, 1.05vw, 18px);
      margin-bottom: 6px;
    }
    .project-category--light { color: var(--color-off-white); }

    /* Project name heading */
    .project-title {
      font-family: var(--font-primary);
      font-size: clamp(32px, 4vw, 68px);
      line-height: 1;
      color: var(--color-dark);
      margin-bottom: 10px;
    }
    /* Variant for architecture projects (sans-serif, light text) */
    .project-title--sans {
      font-family: var(--font-primary);
      font-weight: 600;
      font-size: clamp(26px, 3.2vw, 52px);
      color: var(--color-off-white);
    }

    /* Project body text */
    .project-desc {
      font-family: var(--font-body);
      font-size: var(--font-size-body);
      line-height: 1.55;
      margin-bottom: 24px;
    }
    .project-desc--light { color: var(--color-off-white); }
    .project-desc--serif { font-family: var(--font-primary); }

    /* Thin horizontal rule between projects within a section */
    .project-rule {
      height: 4px;
      border-radius: 2px;
      background: var(--color-dark-alt);
      margin: 64px 0;
    }
    .project-rule--dark { background: #4a4a4a; }

    /* CTA / action buttons */
    .btn {
      display: inline-block;
      font-family: var(--font-body);
      font-size: clamp(14px, 1.08vw, 20px);
      padding: 11px 28px;
      border-radius: 10px;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.15s;
    }
    .btn:hover { opacity: 0.82; transform: translateY(-2px); }
    /* Edit button colors here */
    .btn--orange  { background: var(--color-orange);   color: #fff; }
    .btn--gray    { background: var(--color-dark-alt); color: #fff; }
    .btn--outline { border: 1.5px solid var(--color-off-white); color: var(--color-off-white); }


    /* ======================================================
       PRODUCT DESIGN SECTION
    ====================================================== */
    .product-design {
      background: var(--color-peach);
      padding: clamp(36px, 4.5vw, 72px) var(--pad-h) 0;
      position: relative;
    }

    /* iPhone frame around Totim app screenshot */
    .iphone-frame {
      /* Adjust width to resize the phone mockup */
      width: clamp(162px, 19.5vw, 300px);
      border-radius: 60px;
      border: 10px solid var(--color-dark);
      overflow: hidden;
      background: #fff;
      margin: 0 auto;
    }
    .iphone-frame img { width: 100%; display: block; }

    /* Container for phone + Totim wordmark stacked */
    .totim-media {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }
    .totim-logo {
      /* Adjust width to resize the Totim logo */
      width: clamp(144px, 18vw, 252px);
    }

    /* MacBook frame around 440 website screenshot */
    .macbook-frame {
      border-radius: 20px;
      border: 10px solid var(--color-dark);
      overflow: hidden;
      background: #fff;
      /* Fixed widescreen ratio so a tall screenshot never expands the carousel */
      aspect-ratio: 16 / 10;
    }
    .macbook-frame img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: top center; /* show the top of the site, not the middle */
    }


    /* ======================================================
       CTA BANNER — "View More Product Design and Web stuff!"
    ====================================================== */
    .cta-banner {
      display: flex;
      align-items: center;
      justify-content: flex-end; /* text sits on the right */
      position: relative;
      overflow: hidden;
      background: var(--color-peach);
      padding: 75px var(--pad-h);
    }

    /* Green pill — anchored right, bleeds off the right edge */
    /* ↓ increase 'left' (e.g. 60%, 65%) to shorten the pill and cut left green space */
    .cta-banner__pill {
      position: absolute;
      top: 50%;
      left: 60%;
      right: -80px;
      transform: translateY(-50%);
      height: 86px; /* fixed px — increase/decrease to resize pill; adjust padding on .cta-banner to add space above/below */
      background: var(--color-green-pill);
      border-radius: 100px;
      transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    .cta-banner:has(.cta-banner__action:hover) .cta-banner__pill {
      transform: translateY(-50%) translateX(-28px);
    }

    /* Covers exactly the pill area — left must match .cta-banner__pill left value */
    .cta-banner__action {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 60%; /* keep in sync with .cta-banner__pill left */
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 0 var(--pad-h);
      z-index: 1;
      text-decoration: none;
    }
    .cta-banner__text,
    .cta-banner__arrow {
      transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    .cta-banner__action:hover .cta-banner__text,
    .cta-banner__action:hover .cta-banner__arrow {
      transform: translateX(-28px);
    }

    /* Underlined peach text over the green pill */
    .cta-banner__text {
      font-family: var(--font-primary);
      font-weight: 600;
      font-style: italic;
      font-size: clamp(15px, 2vw, 32px);
      color: var(--color-peach);
      text-decoration: underline;
      text-align: left;
      line-height: 1.1;
      white-space: nowrap;
    }

    /* Double chevron arrow */
    .cta-banner__arrow {
      width: clamp(24px, 2.8vw, 44px);
      flex-shrink: 0;
    }


    /* Dark variant — used at bottom of Spacial Design section */
    .cta-banner--dark {
      background: var(--color-dark);
    }
    .cta-banner--dark .cta-banner__text {
      color: var(--color-off-white);
    }
    /* Arrow SVG is peach by default; invert to white for the dark banner */
    .cta-banner--dark .cta-banner__arrow {
      filter: brightness(0) invert(1);
    }


    /* ======================================================
       SPACIAL DESIGN / ARCHITECTURE SECTION
    ====================================================== */
    .spacial-design {
      background: var(--color-dark);
      padding: clamp(60px, 7vw, 112px) var(--pad-h) 0;
      position: relative;
    }
    .spacial-design .section-label--vertical { margin-bottom: 0; }

    /* Tall building photo */
    .arch-photo {
      width: 100%;
      /* Edit height values here to adjust photo aspect ratio */
      height: clamp(300px, 38vw, 720px);
      object-fit: cover;
      border-radius: 8px;
    }


    /* ======================================================
       PHOTOGRAPHY SECTION
    ====================================================== */
    .photography {
      background: var(--color-bg);
      /* Left padding removed — label provides its own */
      padding: clamp(28px, 3.5vw, 56px) var(--pad-h) 80px 0;
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
    }

    /* In-flow label sits as the leftmost flex item — avoids position:absolute browser quirks */
    .photography > .section-label--vertical {
      position: relative;
      flex-shrink: 0;
      align-self: flex-start;
      padding-top: clamp(24px, 3vw, 48px);
      padding-left: clamp(10px, 1.2vw, 20px);
      padding-right: clamp(24px, 6vw, 95px); /* widens label column to balance the right padding */
      margin: 0;
    }

    /* Photo mosaic fills remaining width */
    .photo-mosaic {
      flex: 1;
      min-width: 0;
    }

    /*
      PHOTO GRID — repeating pattern: 1 wide landscape, 2 portrait, 1 wide, 2 portrait…
      Every 3rd item starting from 1 (1, 4, 7, 10…) spans full width.
      Remaining items are portrait pairs.
      To reorder photos, change the order of .photo-mosaic__item divs in the HTML.
    */
    .photo-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(14px, 1.5vw, 24px);
    }

    /* Wide landscape — every 1st, 4th, 7th, 10th photo */
    .photo-mosaic__item:nth-child(3n+1) {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
    }

    /* Portrait pair — all others */
    .photo-mosaic__item:nth-child(3n+2),
    .photo-mosaic__item:nth-child(3n) {
      aspect-ratio: 3 / 4;
    }

    .photo-mosaic__item {
      overflow: hidden;
      border-radius: 8px;
      background: #d9d9d9;
    }
    .photo-mosaic__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;  /* fills cell without distortion */
      display: block;
      transition: transform 0.45s ease;
    }
    .photo-mosaic__item:hover img { transform: scale(1.04); }

    /* "View More..." text link — hidden; hopout bubble serves this role */
    .photo-more { display: none; }

    /* Desktop shows flipped HopOut; mobile shows alien — toggled below */
    /* Double-class for higher specificity than .hopout-figure { display: block } */
    .hopout-figure.hopout-figure--mobile { display: none; }


    /* ======================================================
       HOPOUT INTERSTITIAL
       Decorative mascot + clickable speech bubble that sits
       between the Photography section and About Me.
    ====================================================== */
    .hopout-section {
      background: var(--color-bg);
      padding: clamp(32px, 4vw, 64px) var(--pad-h);
      display: flex;
      justify-content: center;
    }

    .hopout-inner {
      display: flex;
      align-items: flex-end;
      gap: clamp(8px, 1.5vw, 24px);
    }

    .hopout-figure {
      width: clamp(150px, 19vw, 300px);
      flex-shrink: 0;
      display: block;
    }

    /* Clickable speech bubble — text overlaid on the SVG shape */
    .hopout-bubble {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--color-near-black);
      transition: transform 0.2s ease;
      margin-bottom: clamp(16px, 2vw, 32px); /* lifts bubble above the mascot feet */
    }
    .hopout-bubble:hover { transform: scale(1.07); }

    .hopout-bubble img {
      display: block;
      width: clamp(100px, 15vw, 200px);
      padding-bottom: 100px;
    }

    .hopout-bubble-text {
      position: absolute;
      /* Sits in the upper body of the bubble (above the pointer tail) */
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-primary);
      font-size: clamp(11px, 1.1vw, 16px);
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
    }


    /* ======================================================
       ABOUT ME SECTION
    ====================================================== */
    .about {
      background: var(--color-gray-section);
      /* Left padding removed — in-flow label provides its own left offset */
      padding: 80px clamp(44px, 9%, 156px) 40px 0; /* right: --pad-h + 10% */
      display: grid;
      /* Col 1: vertical label · Col 2: photo · Col 3: bio */
      grid-template-columns: auto auto 1fr;
      column-gap: 0;
      row-gap: clamp(24px, 3.5vw, 56px);
      align-items: start;
    }

    /* In-flow label: avoids position:absolute browser quirks inside grid containers */
    .about > .section-label--vertical {
      position: relative;
      grid-column: 1;
      grid-row: 1 / 3;
      align-self: start;
      padding-left: clamp(10px, 1.2vw, 20px);
      padding-right: clamp(24px, 6.4vw, 116px); /* matches right padding so content is centred */
      margin: 0;
    }

    /* Full-width lower row — spans photo and bio columns, skips the label column */
    .about__lower {
      grid-column: 2 / -1;
      padding: 0 0 80px;
    }

    .about__image-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
      grid-column: 2;
      /* Right padding creates the visual gap between photo and bio text */
      padding-right: clamp(40px, 7vw, 140px);
    }

    .about__content { grid-column: 3; }

    /* Rounded profile photo — matches Figma's 591×591 rounded-[90px] */
    .about__photo {
      /* Adjust width to resize the photo */
      width: clamp(200px, 28vw, 440px);
      aspect-ratio: 1;
      border-radius: 60px;
      overflow: hidden;
    }
    .about__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about__name {
      font-size: clamp(40px, 4.5vw, 64px);
      font-weight: 400;
      line-height: 1;
      margin-bottom: 20px;
    }

    .about__bio {
      font-family: var(--font-primary);
      font-size: var(--font-size-body);
      line-height: 1.8;
      margin-bottom: 36px;
    }

    /* Shared section header — used for Skills, Experience, Reference, Contact Me */
    .about__section-title {
      font-family: var(--font-primary);
      font-size: clamp(18px, 1.55vw, 24px);
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      margin-top: 36px;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(0,0,0,0.15);
    }

    /* Skills list */
    .about__skills-list {
      list-style: none;
      font-family: var(--font-body);
      font-size: var(--font-size-body);
      line-height: 1.8;
    }

    /* Experience list — nested structure */
    .about__exp-list {
      list-style: none;
      font-family: var(--font-body);
    }

    .about__exp-entry {
      padding-bottom: 20px;
      margin-bottom: 20px;
    }
    .about__exp-entry:last-child { margin-bottom: 0; padding-bottom: 0; }

    .about__exp-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 8px;
      font-size: var(--font-size-body);
    }

    .about__exp-date {
      font-size: clamp(12px, 1vw, 15px);
      color: rgba(0,0,0,0.5);
      font-style: italic;
    }

    .about__exp-bullets {
      list-style: disc;
      padding-left: 18px;
      font-size: var(--font-size-body);
      line-height: 1.7;
      color: rgba(0,0,0,0.75);
    }
    .about__exp-bullets li { margin-bottom: 4px; }

    /* Reference list */
    .about__ref-list {
      list-style: none;
      font-family: var(--font-body);
      font-size: var(--font-size-body);
      line-height: 1.8;
    }
    .about__ref-list li { margin-bottom: 12px; }

    /* Contact Me block */
    .about__contact {
      font-family: var(--font-body);
      font-size: var(--font-size-body);
      line-height: 1.8;
    }
    .about__contact a { color: var(--color-near-black); }
    .about__contact a:hover { color: var(--color-green); }


    /* ======================================================
       FOOTER
    ====================================================== */
    footer {
      background: var(--color-dark);
      color: var(--color-off-white);
      padding: 36px var(--pad-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--font-body);
      font-size: clamp(14px, 1.1vw, 16px);
    }
    footer a { opacity: 0.65; transition: opacity 0.2s; }
    footer a:hover { opacity: 1; }
    .footer__socials { display: flex; gap: 20px; }
    .footer__socials img { width: 22px; height: 22px; filter: invert(1); opacity: 0.65; }
    .footer__socials a:hover img { opacity: 1; }


    /* ======================================================
       CAROUSEL
       Used in Product Design and Spacial Design sections.
       On mobile (< 768px) slides stack vertically and
       arrows / dots are hidden — see the mobile block below.
    ====================================================== */
    .carousel {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 28px;
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }

    .carousel__viewport {
      overflow: hidden;
      width: 100%;
    }

    .carousel__track {
      display: flex;
      will-change: transform;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .carousel__slide {
      /* width is set explicitly via JS (see Carousel class) */
      flex-shrink: 0;
      min-width: 0;   /* prevent intrinsic size from overflowing */
      overflow: hidden;
    }

    /* Grid / flex children inside a slide must not push past slide width */
    .carousel__slide > *,
    .carousel__slide .project-card > * {
      min-width: 0;
    }

    /* Arrow buttons — positioned in the section's horizontal padding */
    .carousel__btn {
      position: absolute;
      top: 42%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-dark);
      padding: 14px;
      z-index: 2;
      opacity: 0.5;
      transition: opacity 0.2s;
      line-height: 0;
    }
    .carousel__btn:hover:not(:disabled) { opacity: 0.95; }
    .carousel__btn:disabled { opacity: 0.12; pointer-events: none; }
    /* Larger negative offset = more breathing room between arrow and slide content */
    .carousel__btn--prev { left: calc(-1 * clamp(44px, 5vw, 68px)); }
    .carousel__btn--next { right: calc(-1 * clamp(44px, 5vw, 68px)); }

    /* Light variant (on dark backgrounds) */
    .carousel--light .carousel__btn { color: var(--color-off-white); }

    /* Dots */
    .carousel__dots {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .carousel__dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1.5px solid var(--color-dark);
      background: transparent;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s;
    }
    .carousel__dot--active,
    .carousel__dot:hover { background: var(--color-dark); }

    .carousel__dots--light .carousel__dot { border-color: rgba(245,245,245,0.6); }
    .carousel__dots--light .carousel__dot--active,
    .carousel__dots--light .carousel__dot:hover { background: var(--color-off-white); border-color: var(--color-off-white); }


    @media (prefers-reduced-motion: reduce) {
      .carousel__track { transition: none; }
    }


    /* ======================================================
       LIGHTBOX
       Vanilla implementation — no external library.
       pointer-events: none + contextmenu prevention on the
       image provides basic protection against right-click save.
    ====================================================== */
    .lb-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.92);
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .lb-overlay--open { opacity: 1; }
    .lb-wrap {
      transform: scale(0.94);
      transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
    }
    .lb-overlay--open .lb-wrap { transform: scale(1); }

    .lb-wrap {
      position: relative;
      max-width: min(92vw, 1200px);
      max-height: 92vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lb-img {
      display: block;
      max-width: 100%;
      max-height: 88vh;
      object-fit: contain;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .lb-close {
      position: absolute;
      top: -42px;
      right: 0;
      background: none;
      border: none;
      color: #fff;
      font-size: 34px;
      line-height: 1;
      cursor: pointer;
      opacity: 0.65;
      transition: opacity 0.2s;
      padding: 4px 8px;
    }
    .lb-close:hover { opacity: 1; }


    /* ======================================================
       MOBILE GLOBE SOCIAL MENU
       Hidden on desktop; visible on mobile (< 768px).
       The globe button reveals social icons on tap.
    ====================================================== */
    .hero__globe-wrap {
      display: none; /* shown only on mobile via @media below */
      position: absolute;
      bottom: clamp(76px, 12svh, 120px);
      right: var(--pad-h);
      /* row-reverse so globe icon stays on the right, links expand left */
      flex-direction: row-reverse;
      align-items: center;
      gap: 18px;
    }

    .hero__globe-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      opacity: 0.75;
      transition: opacity 0.2s;
    }
    .hero__globe-btn:hover { opacity: 1; }
    .hero__globe-btn img { width: 34px; height: 34px; object-fit: contain; }

    .hero__globe-links {
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: center;
      opacity: 0;
      transform: translateX(8px); /* slides in from right since globe is now right-anchored */
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: none;
    }
    .hero__globe-links.is-open {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .hero__globe-links a {
      display: flex;
      width: 28px;
      height: 28px;
      opacity: 0.75;
      transition: opacity 0.2s;
    }
    .hero__globe-links a:hover { opacity: 1; }
    .hero__globe-links img { width: 100%; height: 100%; object-fit: contain; }

    /* "About Me" discipline link is mobile-only */
    .hero__discipline-about { display: none; }


    /* ======================================================
       DESKTOP LINE-HEIGHT ADJUSTMENTS  (>= 768px)
       Edit values here to adjust line-height on desktop only.
    ====================================================== */
    @media (min-width: 48rem) {
      .project-desc        { line-height: 1.47; } /* was 1.55, -5% */
      .about__bio          { line-height: 1.71; } /* was 1.80, -5% */
      .about__exp-bullets  { line-height: 1.62; } /* was 1.70, -5% */
      .about__ref-list     { line-height: 1.71; } /* was 1.80, -5% */
      .about__contact      { line-height: 1.71; } /* was 1.80, -5% */

      /* About Me: -10% font sizes on desktop */
      .about__name          { font-size: clamp(36px, 4.05vw, 58px); } /* was clamp(40px,4.5vw,64px) */
      .about__section-title { font-size: clamp(16px, 1.4vw, 22px);  } /* was clamp(18px,1.55vw,24px) */
      /* Body text -10% — exp-date (location/period) is excluded as it has its own rule */
      .about__bio,
      .about__skills-list,
      .about__exp-header,
      .about__exp-bullets,
      .about__ref-list,
      .about__contact       { font-size: clamp(15px, 1.34vw, 19px); } /* was clamp(17px,1.49vw,21px) */
    }


    /* ======================================================
       MOBILE RESPONSIVE  (< 768px)
    ====================================================== */
    @media (max-width: 47.999rem) {

      /* Tighter horizontal padding on mobile — edit this one value to adjust
         left/right spacing across every section at once */
      :root { --pad-h: 20px; }

      /* Mobile: nav always at opacity 1 so hamburger is accessible.
         The frosted-glass background still fades in via .scrolled.
         The name fades in separately on scroll so it's not visible at top. */
      .nav { opacity: 1; pointer-events: auto; }
      .nav__name {
        color: var(--color-green);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .nav.scrolled .nav__name { opacity: 1; pointer-events: auto; }

      /* Hide desktop links; show hamburger instead */
      .nav__links { display: none; }
      .nav__hamburger { display: flex; }

      /* Mobile nav panel — centered lower on screen, with drop shadow */
      .nav__mobile-menu {
        display: block;
        position: fixed;
        top: clamp(200px, 30svh, 300px); /* positioned toward center of screen */
        left: var(--pad-h);
        right: var(--pad-h);
        background: var(--color-green);
        border-radius: 20px;
        padding: 36px 40px;
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        box-shadow: 0 6px 32px rgba(0, 0, 0, 0.22);
        transition: opacity 0.25s ease, transform 0.25s ease;
      }
      .nav__mobile-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .nav__mobile-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .nav__mobile-links a {
        color: #fff;
        font-family: var(--font-primary);
        font-size: clamp(22px, 6vw, 28px);
        font-weight: 400;
        text-decoration: none;
        transition: opacity 0.2s;
      }
      .nav__mobile-links a:active { opacity: 0.65; }

      /* Hero: stack vertically, left-aligned */
      .hero {
        flex-direction: column;
        justify-content: flex-start; /* anchors content to top so name sits high */
        align-items: flex-start;
        gap: clamp(36px, 7svh, 72px); /* generous gap between name and links */
        padding-top: clamp(96px, 18svh, 140px); /* controls how high name appears */
      }

      /* Show name but hide alien on mobile — hero__left becomes name-only */
      .hero__left { display: flex; gap: 0; }
      .hero__logo { display: none; }
      .hero__about-link { display: none; } /* redundant — it's in disciplines */

      /* Larger name now that alien is gone */
      .hero__name { font-size: clamp(52px, 14vw, 70px); }

      /* Show "About Me" as 4th discipline link on mobile */
      .hero__discipline-about { display: block; }

      /* Larger, bolder discipline links with breathing room between each */
      .hero__disciplines {
        font-size: clamp(26px, 7.5vw, 38px);
        font-weight: 600;
        gap: clamp(10px, 2.5vw, 20px);
      }

      /* Hide desktop social icons cluster on mobile */
      .hero__socials { display: none; }

      /* Show globe wrap on mobile */
      .hero__globe-wrap { display: flex; }

      /* Carousel on mobile: collapse to stacked layout */
      .carousel__track {
        flex-wrap: wrap;
        transform: none !important;
        transition: none !important;
      }
      .carousel__slide { min-width: 100%; }
      /* Center Totim media (phone + logo) on mobile */
      .totim-media { width: 100%; align-items: center; }
      .totim-logo  { margin: 0 auto; }
      /* Thin divider line between stacked projects */
      .carousel__slide:not(:last-child) {
        padding-bottom: clamp(28px, 5vw, 44px);
        margin-bottom: clamp(28px, 5vw, 44px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      }
      /* Light variant — on dark section backgrounds */
      .carousel--light .carousel__slide:not(:last-child) {
        border-bottom-color: rgba(255, 255, 255, 0.2);
      }
      .carousel__btn { display: none; }
      .carousel__dots { display: none; }

      /* Section labels: stay vertical on mobile, pinned to the left padding gutter */
      .section-label--vertical {
        writing-mode: vertical-lr;
        position: absolute;
        left: 10px;
        top: clamp(20px, 4vw, 40px);
        font-size: clamp(13px, 3.5vw, 17px);
        margin: 0;
        letter-spacing: 0.04em;
      }

      /* Project cards: single column on mobile */
      .project-card {
        grid-template-columns: 1fr;
        gap: clamp(20px, 4vw, 36px);
      }
      /* Reset the RTL flip — images appear above text on mobile */
      .project-card--flip { direction: ltr; }

      /* Arch photos: portrait style on mobile — see further down in this block */

      /* Space below product-design CTA (dark bg) and below spacial-design CTA (white bg) */
      .spacial-design { padding-top: 24px; }
      .photography { padding-top: 24px; }

/* Photography section: single column on mobile, full images */
      /* Indent mosaic so images clear the vertical label (~32px from left edge) */
      .photo-mosaic { grid-template-columns: 1fr; padding: 0 clamp(12px, 3vw, 20px); }
      /* Single column on mobile — all photos use a consistent landscape ratio */
      .photo-mosaic__item:nth-child(3n+1),
      .photo-mosaic__item:nth-child(3n+2),
      .photo-mosaic__item:nth-child(3n) { aspect-ratio: 4 / 3; grid-column: auto; }

      /* Mobile: show alien, hide HopOut; center the whole interstitial */
      .hopout-figure--desktop { display: none; }
      /* Double-class matches specificity of the base hide rule so it wins */
      .hopout-figure.hopout-figure--mobile { display: block; width: clamp(80px, 22vw, 140px); }
      /* Remove the large padding-bottom that causes the bubble to float above the alien */
      .hopout-bubble img { width: clamp(100px, 28vw, 130px); padding-bottom: 0; }
      /* Scale text to fit the smaller bubble */
      .hopout-bubble-text { font-size: clamp(11px, 3vw, 13px); }

      /* About Me: single column on mobile — reset desktop 3-col grid */
      .about {
        grid-template-columns: 1fr;
        padding: clamp(36px, 6vw, 60px) var(--pad-h) clamp(20px, 3vw, 32px);
        column-gap: 0;
        row-gap: clamp(28px, 5vw, 44px);
        position: relative; /* anchors the absolute label on mobile */
      }
      /* Label reverts to absolute positioning within the section on mobile */
      .about > .section-label--vertical {
        position: absolute;
        grid-column: auto;
        grid-row: auto;
        padding: 0;
      }
      /* Reset desktop explicit column placements for single-column flow */
      .about__image-col {
        grid-column: auto;
        /* Indent so profile pic clears the vertical label (~32px from left edge) */
        padding-right: clamp(12px, 3vw, 20px);
        padding-left: clamp(12px, 3vw, 20px);
        align-items: center; /* centres the profile photo horizontally */
      }
      .about__content { grid-column: auto; }
      .about__lower {
        grid-column: auto;
        padding: 0 0 clamp(36px, 6vw, 60px);
      }
      .about__photo { width: 100%; max-width: 380px; }

      /* Footer: stack on mobile */
      footer { flex-direction: column; gap: 16px; text-align: center; }

      /* Thinner phone frame on mobile */
      .iphone-frame {
        border-width: 6px;
        border-radius: 20px;
      }

      /* Smaller scroll-down arrow */
      .hero__scroll-cue { width: 28px; }

      /* Center action buttons inside project cards on mobile */
      .btn { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

      /* Photography mobile: block layout so photos fill the full width and are centred */
      .photography {
        display: block;
        position: relative; /* anchors the absolute label */
        min-height: 0;
        padding-left: var(--pad-h);
        padding-right: var(--pad-h);
        padding-bottom: 32px;
      }
      /* Label back to absolute so it doesn't steal horizontal space from the photos */
      .photography > .section-label--vertical {
        position: absolute;
        padding: 0; /* left/top come from the global mobile .section-label--vertical rule */
      }

      /* Thinner macbook frame */
      .macbook-frame {
        border-width: 6px;
        border-radius: 20px; 
      }

      /* Fix text overflow in project cards — force text to wrap */
      .project-desc { overflow-wrap: break-word; word-break: break-word; }
      /* Ensure carousel track and slides don't overflow viewport */
      .carousel__track { width: 100%; }
      .carousel__slide { width: 100%; box-sizing: border-box; }
      /* Arch photos fill the column width properly on mobile */
      /* Portrait building photos — offset right to clear the vertical section label */
      .arch-photo {
        width: calc(100% - 22px); /* leave room for the label on the left */
        margin-left: 22px;
        height: auto;
        aspect-ratio: 4 / 5; /* portrait orientation suits tall buildings */
        object-fit: cover;
      }

      /* Padding-bottom on the section creates space above the CTA in the section's
         own background colour — no white gaps from margin */
      .product-design { min-height: 0; padding-bottom: 24px; }
      .spacial-design { padding-bottom: 24px; }

      /* CTA banner: right-aligned with pill bleeding off the right edge on mobile */
      .cta-banner {
        justify-content: flex-end;
        padding: 50px var(--pad-h);
      }
      .cta-banner__pill {
        left: 28%;   /* ← increase to shrink green space left of text; decrease to expand it */
        right: -50px;
        width: auto;
        height: 44px; /* fixed px — increase/decrease to resize pill; adjust padding on .cta-banner to add space above/below */
        transform: translateY(-50%);
      }
      .cta-banner:has(.cta-banner__action:hover) .cta-banner__pill {
        transform: translateY(-50%) translateX(-16px);
      }
      /* Match action left to mobile pill left so only the green area is clickable */
      .cta-banner__action { left: 28%; }
    }