:root{
    --ink:#292F36;
    --paper:#F7FFF7;
    --sage:#AEB8A0;
    --volt:#E1FF72;
    --sage-tint:#e7ebe1;
    --ink-soft:rgba(41,47,54,0.62);
    --paper-soft:rgba(247,255,247,0.6);
    --border-ink:rgba(41,47,54,0.14);
    --border-paper:rgba(247,255,247,0.18);
    --max:1160px;
    --gutter:clamp(24px, 5vw, 72px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  svg{ display:block; }
  a{ color:inherit; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--volt);
    display:inline-block;
    border-radius:1px;
  }

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    padding:18px var(--gutter);
    display:flex;
    align-items:center;
    justify-content:space-between;
    mix-blend-mode:normal;
    background:rgba(41,47,54,0.55);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid rgba(247,255,247,0.08);
    transition:background .3s ease, border-color .3s ease;
  }
  header.site-nav.on-light{
    background:rgba(247,255,247,0.7);
    border-bottom:1px solid rgba(41,47,54,0.08);
  }
  header.site-nav .logo-mark{ width:118px; height:auto; }
  header.site-nav .logo-mark.dark-logo{ display:none; }
  header.site-nav nav{
    display:flex;
    gap:32px;
    font-size:14px;
  }
  header.site-nav nav a{
    text-decoration:none;
    color:var(--paper);
    opacity:0.72;
    transition:opacity .2s ease;
    position:relative;
  }
  header.site-nav nav a:hover, header.site-nav nav a:focus-visible{ opacity:1; }
  header.site-nav.on-light .logo-mark.light-logo{ display:none; }
  header.site-nav.on-light .logo-mark.dark-logo{ display:block; }
  header.site-nav.on-light nav a{ color:var(--ink); }
  header.site-nav nav a.current{ opacity:1; }
  header.site-nav nav a.current::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-8px;
    height:2px;
    background:var(--volt);
  }

  /* ---------- PAGE HEADER (About / Portfolio / Contact) ---------- */
  .page-header{
    background:var(--ink);
    color:var(--paper);
    padding:190px 0 90px;
    position:relative;
    overflow:hidden;
  }
  .page-header .eyebrow{ color:var(--paper-soft); margin-bottom:22px; }
  .page-header h1{
    font-size:clamp(34px, 5.2vw, 62px);
    line-height:1.05;
    letter-spacing:-0.02em;
    font-weight:600;
    margin:0 0 22px;
    max-width:18ch;
  }
  .page-header h1 em{
    font-style:normal;
    color:var(--volt);
  }
  .page-header p.lede{
    max-width:52ch;
    font-size:clamp(16px, 1.6vw, 19px);
    line-height:1.6;
    color:var(--paper-soft);
    margin:0;
  }
  .page-header-crumb{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.08em;
    color:var(--paper-soft);
    margin-bottom:34px;
  }
  .page-header-crumb a{
    text-decoration:none;
    color:var(--paper-soft);
    border-bottom:1px solid rgba(247,255,247,0.25);
  }
  .page-header-crumb a:hover{ color:var(--volt); border-color:var(--volt); }

  /* ---------- HOME: explore link cards ---------- */
  .explore{ background:var(--paper); }
  .explore-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
    background:var(--border-ink);
    border:1px solid var(--border-ink);
  }
  .explore-card{
    background:var(--paper);
    padding:40px 36px;
    text-decoration:none;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:230px;
    transition:background .25s ease;
  }
  .explore-card:hover{ background:var(--sage-tint); }
  .explore-card .ec-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .explore-card .ec-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--ink-soft);
  }
  .explore-card .ec-arrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:15px;
    opacity:0;
    transform:translate(-4px, 4px);
    transition:opacity .2s ease, transform .2s ease;
    color:var(--ink);
  }
  .explore-card:hover .ec-arrow{ opacity:1; transform:translate(0,0); }
  .explore-card h3{
    font-size:26px;
    margin:18px 0 10px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .explore-card p{
    font-size:14.5px;
    line-height:1.55;
    color:var(--ink-soft);
    margin:0;
    max-width:32ch;
  }

  .portfolio-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
  .portfolio-grid.cols-4{ grid-template-columns:repeat(2, 1fr); }

  @media (max-width: 760px){
    .explore-grid{ grid-template-columns:1fr; }
    .portfolio-grid.cols-3, .portfolio-grid.cols-4{ grid-template-columns:1fr; }
    .page-header{ padding:150px 0 60px; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--ink);
    color:var(--paper);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    padding-top:110px;
    padding-bottom:80px;
  }
  .hero-growth{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0.9;
    pointer-events:none;
  }
  .hero-growth path{
    fill:none;
    stroke:var(--volt);
    stroke-width:1.4;
    stroke-linecap:round;
    opacity:0.55;
  }
  .hero-growth circle{
    fill:var(--volt);
  }
  .hero-content{
    position:relative;
    z-index:2;
  }
  .hero .eyebrow{ color:var(--paper-soft); margin-bottom:26px; }
  .hero h1{
    font-size:clamp(38px, 6.4vw, 84px);
    line-height:1.03;
    letter-spacing:-0.02em;
    font-weight:600;
    margin:0 0 30px;
    max-width:15ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--volt);
  }
  .hero p.lede{
    max-width:46ch;
    font-size:clamp(16px, 1.6vw, 19px);
    line-height:1.6;
    color:var(--paper-soft);
    margin:0 0 44px;
  }
  .hero .cta-row{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:0.04em;
    text-decoration:none;
    padding:14px 24px;
    border-radius:2px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:transform .2s ease, background .2s ease, color .2s ease;
  }
  .btn-solid{
    background:var(--volt);
    color:var(--ink);
  }
  .btn-solid:hover{ transform:translateY(-2px); }
  .btn-outline{
    border:1px solid var(--border-paper);
    color:var(--paper);
  }
  .btn-outline:hover{
    background:rgba(247,255,247,0.06);
    transform:translateY(-2px);
  }

  .scroll-cue{
    position:absolute;
    bottom:36px;
    left:var(--gutter);
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    color:var(--paper-soft);
    z-index:2;
  }
  .scroll-cue .line{
    width:32px; height:1px;
    background:var(--paper-soft);
  }

  /* ---------- SECTION SHELL ---------- */
  section{ padding:110px 0; }
  .section-head{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:var(--gutter);
    margin-bottom:56px;
    align-items:end;
  }
  .section-head h2{
    font-size:clamp(28px, 3.4vw, 42px);
    line-height:1.12;
    letter-spacing:-0.01em;
    font-weight:600;
    margin:14px 0 0;
  }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--paper); }
  .about-body{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:var(--gutter);
  }
  .about-body p{
    font-size:clamp(17px, 1.8vw, 21px);
    line-height:1.65;
    color:var(--ink);
    margin:0 0 22px;
    max-width:56ch;
  }
  .about-body p:last-child{ margin-bottom:0; }
  .about-fact{
    border-top:1px solid var(--border-ink);
    padding-top:18px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.7;
  }
  .about-fact strong{
    display:block;
    font-family:'Space Grotesk', sans-serif;
    font-size:15px;
    color:var(--ink);
    margin-bottom:4px;
    font-weight:600;
  }

  /* ---------- PORTFOLIO ---------- */
  .portfolio{ background:var(--sage-tint); }
  .portfolio-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
    background:var(--border-ink);
    border:1px solid var(--border-ink);
  }
  .p-card{
    background:var(--sage-tint);
    padding:44px;
    position:relative;
    transition:background .25s ease;
  }
  .p-card:hover{ background:var(--paper); }
  .p-card .p-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:22px;
    display:block;
  }
  .p-card h3{
    font-size:clamp(26px, 2.6vw, 34px);
    margin:0 0 16px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .p-card p{
    font-size:16px;
    line-height:1.6;
    color:var(--ink);
    margin:0;
    max-width:38ch;
  }
  .p-card .p-index{
    position:absolute;
    top:44px; right:44px;
    width:26px; height:26px;
    border-radius:50%;
    background:var(--volt);
    opacity:0;
    transform:scale(0.6);
    transition:opacity .25s ease, transform .25s ease;
  }
  .p-card:hover .p-index{ opacity:1; transform:scale(1); }

  /* ---------- CONTACT ---------- */
  .contact{
    background:var(--ink);
    color:var(--paper);
    padding-bottom:52px;
  }
  .contact .section-head h2{ color:var(--paper); }
  .contact .eyebrow{ color:var(--paper-soft); }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--gutter);
  }
  .contact-link{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:26px 0;
    border-top:1px solid var(--border-paper);
    text-decoration:none;
    color:var(--paper);
    font-size:clamp(19px, 2.2vw, 26px);
    transition:padding-left .2s ease, color .2s ease;
  }
  .contact-link:last-child{ border-bottom:1px solid var(--border-paper); }
  .contact-link:hover, .contact-link:focus-visible{
    color:var(--volt);
    padding-left:10px;
  }
  .contact-link span.arrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    opacity:0.7;
  }
  .contact-note{
    font-size:15px;
    line-height:1.7;
    color:var(--paper-soft);
    max-width:42ch;
  }

  footer.site-footer{
    border-top:1px solid var(--border-paper);
    margin-top:70px;
    padding-top:26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }
  footer.site-footer .logo-mark{ width:96px; height:auto; }
  footer.site-footer small{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--paper-soft);
  }
  footer.site-footer.on-light{
    background:var(--paper);
    border-top-color:var(--border-ink);
    padding-bottom:64px;
  }
  footer.site-footer.on-light small{ color:var(--ink-soft); }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--volt);
    outline-offset:3px;
  }

  @media (max-width: 760px){
    header.site-nav nav{ gap:18px; font-size:12.5px; }
    .section-head, .about-body, .portfolio-grid, .contact-grid{
      grid-template-columns:1fr;
    }
    .section-head{ margin-bottom:36px; }
    .about-fact{ margin-top:8px; }
    section{ padding:76px 0; }
    .p-card{ padding:32px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }