:root{
  --bg:#15171c;
  --surface:#1b1e24;
  --surface-2:#20242b;
  --line:#2b2f37;
  --text:#e9e7e1;
  --muted:#9b9a92;
  --ember:#2b9c2b;
  --ember-soft:#38c4a5;
  --steel:#6f7d8c;
}
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none!important;transition:none!important;}
  }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans',system-ui,sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1060px;margin:0 auto;padding:0 24px;}
  a{color:inherit;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px;}

  /* ---------- heat line: the signature divider ---------- */
  .heatline{
    height:2px;border:0;
    background:linear-gradient(90deg, var(--line) 0%, var(--line) 55%, var(--ember) 100%);
  }

  /* ---------- nav ---------- */
  header{
    border-bottom:1px solid var(--line);
    position:sticky;top:0;background:rgba(21,23,28,.92);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    z-index:10;
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 0;
  }
  .brand{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:800;font-size:22px;letter-spacing:.06em;
    text-decoration:none;text-transform:uppercase;
  }
  .brand span{color:var(--ember);}
  .nav-links{display:flex;gap:28px;list-style:none;}
  .nav-links a{
    text-decoration:none;color:var(--muted);
    font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  }
  .nav-links a:hover{color:var(--text);}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 88px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ember-soft);
  }
  .hero h1{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:800;
    font-size:clamp(56px, 11vw, 124px);
    line-height:.94;
    letter-spacing:.01em;
    text-transform:uppercase;
    margin:18px 0 28px;
  }
  .hero .lede{
    max-width:560px;
    font-size:19px;
    color:var(--muted);
  }
  .hero .lede strong{color:var(--text);font-weight:600;}
  .hero-actions{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    display:inline-block;text-decoration:none;
    font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
    padding:14px 26px;border:1px solid var(--line);
    transition:border-color .15s ease, background .15s ease;
  }
  .btn-primary{background:var(--ember);border-color:var(--ember);color:#16120e;font-weight:500;}
  .btn-primary:hover{background:var(--ember-soft);border-color:var(--ember-soft);}
  .btn-ghost:hover{border-color:var(--steel);}

  /* ---------- sections ---------- */
  section{padding:80px 0;}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:48px;gap:16px;flex-wrap:wrap;
  }
  .section-head h2{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:700;font-size:42px;text-transform:uppercase;letter-spacing:.02em;
  }
  .section-head .tag{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  }

  /* ---------- work ---------- */
  .project{
    border:1px solid var(--line);
    background:var(--surface);
    padding:36px;
    display:grid;grid-template-columns:1fr 1fr;gap:36px;
    transition:border-color .15s ease;
  }
  .project:hover{border-color:var(--steel);}
  .project h3{
    font-family:'Big Shoulders Display',sans-serif;
    font-size:30px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
    margin-bottom:14px;
  }
  .project p{color:var(--muted);margin-bottom:18px;}
  .meta{
    display:flex;gap:18px;flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);
  }
  .project-visual{
    background:
      linear-gradient(180deg, rgba(217,96,31,.10), rgba(217,96,31,0) 50%),
      repeating-linear-gradient(90deg, #21252c 0 2px, #1d2127 2px 4px);
    border:1px solid var(--line);
    min-height:220px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .project-visual img{
    width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  }
  .project-visual span{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  .work-note{
    margin-top:20px;
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);letter-spacing:.04em;
  }
  .work-note b{color:var(--ember-soft);font-weight:500;}

  /* ---------- services ---------- */
  .service-row{
    display:grid;grid-template-columns:1.2fr 2.8fr;gap:24px;
    padding:28px 8px;border-top:1px solid var(--line);
    align-items:baseline;
  }
  .service-row:last-of-type{border-bottom:1px solid var(--line);}
  .service-row h3{
    font-family:'Big Shoulders Display',sans-serif;
    font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  }
  .service-row p{color:var(--muted);font-size:16px;}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;}
  .portrait{
    aspect-ratio:4/5;
    border:1px solid var(--line);
    background:
      linear-gradient(160deg, #262a32 0%, #1a1d23 60%, #15171c 100%);
    position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .portrait::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
    pointer-events:none;
  }
  .portrait .stamp{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:800;font-size:84px;letter-spacing:.04em;
    color:#2e333c;
    -webkit-user-select:none;
    user-select:none;
  }
  .portrait img{width:100%;height:100%;object-fit:cover;display:block;}
  .about-copy p{color:var(--muted);margin-bottom:18px;}
  .about-copy p strong{color:var(--text);font-weight:600;}
  .about-copy .principles{
    margin-top:28px;display:grid;gap:0;
  }
  .principle{
    display:flex;gap:16px;align-items:baseline;
    padding:14px 0;border-top:1px solid var(--line);
  }
  .principle:last-child{border-bottom:1px solid var(--line);}
  .principle .k{
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ember-soft);
    letter-spacing:.08em;text-transform:uppercase;min-width:120px;
  }
  .principle .v{color:var(--muted);font-size:15.5px;}

  /* ---------- contact ---------- */
  .contact{padding:88px 0 72px;}
  .contact h2{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:800;font-size:clamp(40px,7vw,72px);text-transform:uppercase;line-height:1;
    margin-bottom:20px;
  }
  .contact p{color:var(--muted);max-width:520px;margin-bottom:36px;}
  .contact-links{display:flex;gap:16px;flex-wrap:wrap;}
  .contact-email{
    margin-top:24px;
    font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--muted);letter-spacing:.03em;
  }
  .contact-email a{color:var(--ember-soft);text-decoration:none;border-bottom:1px solid var(--ember-soft);}
  .contact-email a:hover{color:var(--text);border-color:var(--text);}

  footer{
    border-top:1px solid var(--line);
    padding:28px 0;
  }
  .foot{
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);letter-spacing:.06em;
  }
  .foot a{color:var(--muted);text-decoration:none;}
  .foot a:hover{color:var(--text);}

  /* ---------- responsive ---------- */
  @media (max-width:840px){
    .project{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;}
    .portrait{max-width:300px;}
    .service-row{grid-template-columns:1fr;gap:8px;}
  }
  @media (max-width:560px){
    .nav-links{display:none;}
    section{padding:60px 0;}
    .hero{padding:72px 0 64px;}
  }