/* ====== Design Tokens (your “system”) ====== */
:root { /* Root scope for CSS variables */
    --bg: #f2f2f2; /* Light grey background like reference */
    --panel: #ffffff; /* Panel/card white */
    --text: #0a0a0a; /* Near-black text */
    --muted: #6b6b6b; /* Muted grey text */
    --line: rgba(0, 0, 0, 0.18); /* Soft borders */
    --shadow: rgba(0, 0, 0, 0.08); /* Soft shadow */
    --radius: 18px; /* Rounded corners (subtle premium) */
    --max: 560px; /* Mobile-first max width */
    --pad: 18px; /* Base padding */
  }
  
  /* ====== Global Reset-ish ====== */
  * { /* Targets every element */
    box-sizing: border-box; /* Makes sizing predictable */
  }
  
  html { /* Whole document */
    scroll-behavior: smooth; /* Smooth anchor scrolling */
  }
  
  body { /* Page background and base font */
    margin: 0; /* Remove default margin */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Clean sans font */
    background: var(--bg); /* Use background token */
    color: var(--text); /* Use text token */
  }
  
  /* ====== Layout Wrapper ====== */
  .page { /* Main page wrapper */
    width: 100%; /* Full width */
    max-width: var(--max); /* Limit width to keep it “mobile app” feeling */
    margin: 0 auto; /* Center horizontally */
    padding: calc(var(--pad) + 54px) var(--pad) var(--pad); /* Top padding accounts for sticky navbar */
  }
  
  /* ====== Top Navbar ====== */
  .topbar { /* Sticky top bar */
    position: sticky; /* Sticks to top when scrolling */
    top: 0; /* Stick at top */
    z-index: 50; /* Keep above content */
    background: rgba(242, 242, 242, 0.82); /* Slightly transparent */
    backdrop-filter: blur(12px); /* Frosted glass effect */
    border-bottom: 1px solid var(--line); /* Subtle line */
  }
  
  .topbar__inner { /* Inner alignment */
    max-width: var(--max); /* Match page width */
    margin: 0 auto; /* Center */
    padding: 14px var(--pad); /* Spacing */
    display: flex; /* Align items in a row */
    align-items: center; /* Vertically center */
    justify-content: space-between; /* Push left + right apart */
  }
  
  .wordmark { /* The “Creative Index” top-left */
    text-decoration: none; /* Remove underline */
    color: var(--text); /* Text color */
    font-weight: 600; /* Slightly bold */
    letter-spacing: 0.2px; /* Tiny tracking */
  }
  
  .menuBtn { /* Menu button top-right */
    border: 0; /* Remove default border */
    background: transparent; /* No background */
    color: var(--text); /* Text color */
    font-weight: 600; /* Bold */
    cursor: pointer; /* Hand cursor */
    padding: 8px 0; /* Tap target padding */
  }

  .menuDots { /* Three dot container */
    display: flex; /* Row layout */
    gap: 4px; /* Space between dots */
    align-items: center; /* Center vertically */
  }

  .menuDot { /* Each dot */
    display: block; /* Block element */
    width: 6px; /* Dot size */
    height: 6px; /* Dot size */
    background: var(--text); /* Black fill */
    border-radius: 50%; /* Perfect circle */
    transition: transform 250ms ease, opacity 250ms ease; /* Smooth animation */
  }

  .menuBtn.isActive .menuDot { /* Dots when menu is open */
    transform: scale(0.6); /* Shrink slightly */
    opacity: 0.5; /* Dim */
  }
  
  /* ====== Menu Overlay ====== */
  .menuOverlay { /* Fullscreen overlay container */
    position: fixed; /* Fixed to viewport */
    inset: 0; /* Top/right/bottom/left = 0 */
    background: rgba(242, 242, 242, 0.92); /* Light overlay */
    backdrop-filter: blur(14px); /* Blur behind */
    z-index: 100; /* Above everything */
    opacity: 0; /* Hidden state */
    pointer-events: none; /* Not clickable when hidden */
    transition: opacity 220ms ease; /* Fade animation */
  }
  
  .menuOverlay__inner { /* Content wrapper */
    max-width: var(--max); /* Match page width */
    margin: 0 auto; /* Center */
    padding: 90px var(--pad) var(--pad); /* Top padding to clear navbar */
    transform: translateY(12px); /* Starts slightly lower for slide effect */
    opacity: 0; /* Starts slightly transparent */
    transition: transform 260ms ease, opacity 260ms ease; /* Smooth slide + fade */
  }
  
  .menuOverlay.isOpen { /* When overlay is open */
    opacity: 1; /* Fully visible */
    pointer-events: auto; /* Clickable */
  }

  .menuOverlay.isOpen .menuOverlay__inner { /* When overlay is open, animate inner content */
    transform: translateY(0px); /* Move into final position */
    opacity: 1; /* Fully visible */
  }
  
  .menuClose { /* Close X button inside overlay */
    position: absolute; /* Position within inner container */
    top: 14px; /* Align with navbar height */
    right: var(--pad); /* Match page padding */
    border: 0; /* No border */
    background: transparent; /* No background */
    font-size: 28px; /* Large X */
    line-height: 1; /* Tight line height */
    color: var(--text); /* Text color */
    cursor: pointer; /* Hand cursor */
    padding: 8px; /* Tap target */
  }

  .menuOverlay__inner { /* Make inner a positioning context */
    position: relative; /* For close button positioning */
  }

  .menuOverlay__meta { /* Meta block */
    margin-bottom: 22px; /* Space below */
  }
  
  .menuOverlay__name { /* Studio name in overlay */
    margin: 0; /* Remove default margin */
    font-weight: 700; /* Bold */
  }
  
  .menuOverlay__role, .menuOverlay__location, .menuOverlay__theme { /* Meta lines */
    margin: 8px 0 0; /* Spacing */
    color: var(--muted); /* Muted */
    font-weight: 600; /* Semi-bold */
  }
  
  .menuOverlay__nav { /* Nav list container */
    border-top: 1px solid var(--line); /* Top divider */
  }
  
  .menuLink { /* Each nav row */
    display: grid; /* Grid layout */
    grid-template-columns: 56px 1fr 30px; /* Num / label / arrow */
    align-items: center; /* Center vertically */
    padding: 18px 0; /* Row padding */
    border-bottom: 1px solid var(--line); /* Divider line */
    text-decoration: none; /* No underline */
    color: var(--text); /* Text color */
  }
  
  .menuNum { /* Left numbers */
    font-weight: 800; /* Strong */
    color: var(--text); /* Black */
  }
  
  .menuText { /* Main label */
    font-weight: 700; /* Bold */
  }
  
  .menuArrow { /* Right arrow */
    text-align: right; /* Push arrow to right */
    opacity: 0.7; /* Slightly muted */
  }
  
  /* ====== Sections ====== */
  .section { /* Standard section */
    padding: 28px 0; /* Vertical space */
    scroll-margin-top: 54px; /* Offset for sticky navbar so heading sits just below it */
  }
  
  .sectionTitle { /* Section headings */
    margin: 0 0 16px; /* Spacing */
    font-size: 18px; /* Size */
    letter-spacing: 0.2px; /* Subtle tracking */
  }
  
  .sectionText { /* Paragraph text */
    margin: 0; /* Reset margin */
    color: var(--muted); /* Muted */
    line-height: 1.6; /* Readable line height */
  }
  
  /* ====== Hero ====== */
  .section--hero { /* Hero section tweaks */
    padding-top: 24px; /* Top padding */
    min-height: calc(100vh - 54px - var(--pad)); /* Fill exactly one screen minus navbar */
    min-height: calc(100dvh - 54px - var(--pad)); /* Dynamic viewport for mobile browsers */
    display: flex; /* Flex layout */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    gap: 24px; /* Even spacing between hero elements */
    padding-bottom: 24px; /* Breathing room at bottom */
  }
  
  .heroCard { /* Card container */
    padding: 22px; /* Inner spacing */
    width: 100%; /* Full width */
    max-width: 320px; /* Keep it small and centered */
    margin: 0 auto; /* Center horizontally */
  }
  
  .heroLogo { /* Logo image inside the hero card */
    width: 100%; /* Makes logo scale to card width */
    height: auto; /* Keeps logo proportions */
    display: block; /* Removes inline image gaps */
    object-fit: contain; /* Ensures logo fits without cropping */
  }
  
  .heroScroll { /* Scroll prompt container */
    display: flex; /* Side by side layout */
    align-items: center; /* Vertically center text and arrow */
    gap: 14px; /* Space between text and arrow */
    text-decoration: none; /* No underline */
    color: var(--text); /* Text color */
    margin: 0; /* No extra margin, flex gap handles spacing */
    align-self: flex-start; /* Align left */
  }

  .heroScroll__text { /* Vertical running text */
    writing-mode: vertical-rl; /* Text runs vertically */
    order: 2; /* Place text after (right of) the arrow */
    font-size: 11px; /* Small */
    font-weight: 700; /* Bold */
    letter-spacing: 1.2px; /* Spaced out */
    text-transform: uppercase; /* Caps */
    color: var(--muted); /* Muted tone */
    white-space: nowrap; /* Keep on one line */
  }

  .heroScroll__arrow { /* Big bold down arrow */
    order: 1; /* Place arrow first (left) */
    font-size: 64px; /* Large and prominent */
    font-weight: 900; /* As bold as possible */
    line-height: 1; /* Tight */
    animation: heroArrowBounce 2s ease-in-out infinite; /* Subtle bounce */
  }

  @keyframes heroArrowBounce { /* Bounce animation for arrow */
    0%, 100% { transform: translateY(0); } /* Start and end position */
    50% { transform: translateY(10px); } /* Move down slightly */
  }

  .heroWordmark { /* Large serif wordmark */
    margin: 0; /* No extra margin, sits naturally below arrow */
    align-self: flex-end; /* Push to the right side */
    font-family: ui-serif, Georgia, "Times New Roman", serif; /* Serif vibe */
    font-size: 44px; /* Big */
    font-weight: 500; /* Elegant */
    letter-spacing: -0.6px; /* Tight */
    overflow: hidden; /* Hide text that hasn't been "typed" yet */
  }

  .typewriter { /* Typing animation wrapper */
    display: inline-block; /* Needed for overflow + width animation */
    overflow: hidden; /* Clip untyped characters */
    white-space: nowrap; /* Keep on one line */
    width: 0; /* Start with no text visible */
    padding-right: 6px; /* Space between last letter and cursor */
    border-right: 3px solid rgba(10, 10, 10, 0.8); /* Cursor line at 80% opacity */
    animation:
      typing 2s steps(14) 0.5s forwards, /* 14 characters in "Creative Index", starts after 0.5s delay */
      blink 0.6s step-end infinite 2.5s; /* Cursor blinks after typing finishes */
  }

  @keyframes typing { /* Reveals text left to right */
    to { width: 100%; } /* Full width = all characters visible */
  }

  @keyframes blink { /* Cursor blink like a text editor */
    0%, 100% { border-color: rgba(10, 10, 10, 0.8); } /* Cursor visible at 80% opacity */
    50% { border-color: transparent; } /* Cursor hidden */
  }
  
  /* ====== Work List ====== */
  .list { /* List container */
    border-top: 1px solid var(--line); /* Top line */
  }
  
  .listItem { /* Row item */
    display: grid; /* Grid layout */
    grid-template-columns: 56px 1fr 30px; /* Num / title / arrow */
    align-items: center; /* Vertically centered */
    padding: 18px 0; /* Row padding */
    border-bottom: 1px solid var(--line); /* Divider */
    text-decoration: none; /* No underline */
    color: var(--text); /* Text color */
  }
  
  .listItem__left { /* Number */
    font-weight: 800; /* Bold */
  }
  
  .listItem__mid { /* Title */
    font-weight: 700; /* Bold */
  }
  
  .listItem__right { /* Arrow */
    text-align: right; /* Push arrow right */
    opacity: 0.7; /* Muted */
  }
  
  /* ====== Contact Form ====== */
  .form { /* Form container */
    display: grid; /* Grid layout */
    gap: 14px; /* Space between fields */
    margin-bottom: 14px; /* Space below form */
  }
  
  .formRow { /* Label wrapper */
    display: grid; /* Grid layout */
    gap: 8px; /* Spacing */
  }
  
  .formLabel { /* Label text */
    font-weight: 700; /* Bold */
    font-size: 13px; /* Small label */
    color: var(--muted); /* Muted */
  }
  
  .formInput, .formTextarea { /* Inputs + textarea */
    width: 100%; /* Full width */
    padding: 14px 14px; /* Inner spacing */
    border-radius: 14px; /* Rounded */
    border: 1px solid var(--line); /* Soft border */
    background: var(--panel); /* White background */
    font: inherit; /* Use same font as body */
    outline: none; /* Remove default outline */
  }
  
  .formInput:focus, .formTextarea:focus { /* Focus state */
    border-color: rgba(0, 0, 0, 0.35); /* Darker border on focus */
  }
  
  .formBtn { /* Submit button */
    padding: 14px 16px; /* Spacing */
    border-radius: 14px; /* Rounded */
    border: 1px solid var(--line); /* Border */
    background: #0a0a0a; /* Black */
    color: #ffffff; /* White text */
    font-weight: 700; /* Bold */
    cursor: pointer; /* Hand cursor */
  }
  
  .inlineLink { /* Inline links */
    color: var(--text); /* Black */
    text-decoration: none; /* No underline */
    border-bottom: 1px solid rgba(0,0,0,0.28); /* Minimal underline style */
  }
  
  /* ====== Footer ====== */
  .footer { /* Footer wrapper */
    padding: 22px 0 40px; /* Spacing */
    color: var(--muted); /* Muted */
    border-top: 1px solid var(--line); /* Divider */
    margin-top: 30px; /* Space above */
  }
  
  .footer__inner { /* Footer row layout */
    display: flex; /* Side by side */
    justify-content: space-between; /* Push apart */
    align-items: center; /* Vertically center */
  }

  .footerText { /* Footer text */
    margin: 0; /* Reset margin */
    font-weight: 600; /* Semi-bold */
  }

  .footerSocial { /* Instagram link */
    color: var(--muted); /* Muted to match footer */
    text-decoration: none; /* No underline */
    font-weight: 600; /* Semi-bold */
    border-bottom: 1px solid rgba(0,0,0,0.28); /* Subtle underline */
  }
  
  /* ====== Utilities ====== */
  .noScroll { /* Used to lock scroll when menu is open */
    overflow: hidden; /* Prevent scrolling */
  }

  .menuBtnLink { /* Simple right-side link in project nav */
    text-decoration: none; /* Removes underline */
    color: var(--text); /* Black text */
    font-weight: 600; /* Semi-bold */
  }
  
  .projectViewer { /* Viewer wrapper */
    padding: 18px 0 8px; /* Space around viewer */
  }
  
  .projectViewer__top { /* Back / Next row */
    display: flex; /* Places links on one line */
    justify-content: space-between; /* Pushes Back left and Next right */
    align-items: center; /* Centers vertically */
    margin-bottom: 14px; /* Space below */
  }
  
  .projectNav { /* Back / Next links */
    text-decoration: none; /* Removes underline */
    color: var(--muted); /* Muted like reference */
    font-weight: 700; /* Bold */
    letter-spacing: 0.2px; /* Subtle tracking */
  }
  
  .projectFrame { /* Big framed media area */
    background: var(--panel); /* White panel */
    border: 1px solid var(--line); /* Border like reference */
    border-radius: var(--radius); /* Rounded corners */
    box-shadow: 0 10px 26px var(--shadow); /* Soft shadow */
    padding: 14px; /* Frame padding */
  }
  
  .projectFrame__media { /* Placeholder media block */
    width: 100%; /* Full width */
    aspect-ratio: 16 / 10; /* Editorial wide ratio */
    background: linear-gradient(180deg, #e7e7e7, #cfcfcf); /* Grey gradient placeholder */
    border-radius: 14px; /* Rounded corners */
  }
  
  .projectInfo { /* Info block under media */
    margin-top: 16px; /* Space above */
  }
  
  .projectKicker { /* Small project label */
    margin: 0 0 6px; /* Spacing */
    color: var(--muted); /* Muted */
    font-weight: 800; /* Bold */
    font-size: 12px; /* Small */
    letter-spacing: 0.6px; /* Editorial spacing */
    text-transform: uppercase; /* Makes it feel like a label */
  }
  
  .projectTitle { /* Project title */
    margin: 0 0 10px; /* Spacing */
    font-size: 22px; /* Title size */
    font-weight: 800; /* Bold */
  }
  
  .projectDesc { /* Project description */
    margin: 0 0 12px; /* Spacing */
    color: var(--muted); /* Muted */
    line-height: 1.6; /* Readable */
    font-weight: 600; /* Slightly strong */
  }
  
  .projectMeta { /* Meta list */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    list-style: none; /* Remove bullets */
    border-top: 1px solid var(--line); /* Top divider */
  }
  
  .projectMeta__item { /* Each meta row */
    padding: 12px 0; /* Spacing */
    border-bottom: 1px solid var(--line); /* Divider */
    color: var(--text); /* Text color */
    font-weight: 700; /* Bold */
    font-size: 13px; /* Small */
  }

  /* ====== Tablet (768px+) ====== */
  @media (min-width: 768px) {
    :root {
      --max: 720px; /* Wider container for tablet */
      --pad: 32px; /* More breathing room */
    }

    .heroWordmark { /* Scale up wordmark */
      font-size: 56px; /* Bigger on tablet */
    }

    .heroCard { /* Larger logo card */
      max-width: 380px; /* Wider card */
    }

    .heroScroll__arrow { /* Slightly larger arrow */
      font-size: 72px;
    }

    .sectionTitle { /* Bigger section headings */
      font-size: 22px;
    }

    .menuLink { /* Wider number column */
      grid-template-columns: 64px 1fr 30px;
      padding: 22px 0;
      font-size: 18px;
    }

    .listItem { /* Wider number column */
      grid-template-columns: 64px 1fr 30px;
      padding: 22px 0;
      font-size: 17px;
    }

    .formInput, .formTextarea { /* Larger form fields */
      padding: 16px;
    }

    .projectTitle { /* Bigger project title */
      font-size: 26px;
    }
  }

  /* ====== Desktop (1024px+) ====== */
  @media (min-width: 1024px) {
    :root {
      --max: 900px; /* Desktop container width */
      --pad: 48px; /* Generous padding */
    }

    .heroWordmark { /* Full-size wordmark */
      font-size: 68px;
    }

    .heroCard { /* Larger logo area */
      max-width: 420px;
    }

    .heroScroll__arrow { /* Bigger arrow on desktop */
      font-size: 80px;
    }

    .heroScroll__text { /* Slightly larger scroll text */
      font-size: 12px;
      letter-spacing: 1.6px;
    }

    .section { /* More vertical space between sections */
      padding: 48px 0;
    }

    .sectionTitle { /* Larger headings */
      font-size: 24px;
      margin-bottom: 20px;
    }

    .menuLink { /* Roomier menu rows */
      grid-template-columns: 72px 1fr 36px;
      padding: 26px 0;
      font-size: 20px;
    }

    .listItem { /* Roomier list rows */
      grid-template-columns: 72px 1fr 36px;
      padding: 26px 0;
      font-size: 18px;
    }

    .form { /* More space between form fields */
      gap: 18px;
    }

    .formInput, .formTextarea { /* Larger inputs */
      padding: 18px;
      border-radius: 16px;
    }

    .formBtn { /* Larger button */
      padding: 16px 20px;
      font-size: 16px;
    }

    .projectTitle { /* Bigger project title */
      font-size: 28px;
    }

    .projectDesc { /* Larger description text */
      font-size: 16px;
    }

    .footer { /* More footer spacing */
      padding: 28px 0 48px;
      margin-top: 48px;
    }
  }

  /* ====== Large Desktop (1280px+) ====== */
  @media (min-width: 1280px) {
    :root {
      --max: 1080px; /* Max out container */
      --pad: 56px;
    }

    .heroWordmark {
      font-size: 78px;
    }

    .heroCard {
      max-width: 460px;
    }

    .section {
      padding: 56px 0;
    }

    .sectionTitle {
      font-size: 28px;
    }
  }