:root{
    --paper:#f4f5f1;
    --paper-dim:#e9ebe3;
    --ink:#14181a;
    --ink-soft:#5b6469;
    --signal:#1b6e63;
    --signal-bright:#279c8c;
    --coral:#ff6b45;
    --deep:#0f1618;
    --line: rgba(20,24,26,0.13);
    --line-deep: rgba(244,245,241,0.14);
    --radius:6px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif; font-weight:600; margin:0;
    line-height:1.1; letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--signal); display:flex; align-items:center; gap:0.6em;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--signal); display:inline-block; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
  section{ position:relative; }

  .skip-link{ position:absolute; left:-999px; top:0; background:var(--deep); color:var(--paper); padding:10px 18px; z-index:999; }
  .skip-link:focus{ left:16px; top:16px; }

  /* Header */
  header{ position:sticky; top:0; z-index:50; background:rgba(244,245,241,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:1180px; margin:0 auto; }
  .brand{ display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; }
  .brand-mark{
    width:40px; height:40px; border-radius:50%;
    border:2px solid var(--ink); position:relative; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:600;
  }
  .brand-mark::after{
    content:""; position:absolute; width:8px; height:2px; background:var(--ink);
    right:-6px; bottom:6px; transform:rotate(45deg); transform-origin:left center;
  }
  .brand small{ display:block; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.12em; color:var(--ink-soft); text-transform:uppercase; font-weight:500; }
  nav ul{ list-style:none; display:flex; gap:34px; margin:0; padding:0; font-size:0.88rem; font-weight:500; }
  nav a{ position:relative; padding-bottom:4px; color:var(--ink-soft); transition:color .2s ease; }
  nav a:hover, nav a:focus-visible{ color:var(--ink); }
  nav a.active{ color:var(--ink); }
  nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--coral); }
  .nav-actions{ display:flex; align-items:center; gap:18px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace;
    font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; padding:13px 22px;
    border:1px solid var(--ink); border-radius:var(--radius); background:transparent; cursor:pointer;
    transition:all .2s ease; font-weight:500;
  }
  .btn-solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .btn-solid:hover{ background:var(--deep); }
  .btn-coral{ background:var(--coral); color:#fff; border-color:var(--coral); }
  .btn-coral:hover{ filter:brightness(1.08); }
  .btn-ghost:hover{ background:var(--ink); color:var(--paper); }
  .menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
  .menu-toggle span{ width:22px; height:2px; background:var(--ink); display:block; }
  #mobile-menu{ display:none; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); }
  #mobile-menu.open{ display:flex; }
  #mobile-menu a{ padding:16px 32px; border-top:1px solid var(--line); font-size:0.92rem; font-weight:500; }

  /* Hero */
  .hero{ padding:88px 0 0; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; padding-bottom:80px; }
  .hero h1{ font-size:clamp(2.6rem,4.4vw,4rem); margin-top:16px; }
  .hero h1 span{ color:var(--signal); }
  .hero .role{ font-family:'JetBrains Mono',monospace; font-size:1.02rem; color:var(--ink-soft); margin-top:10px; }
  .hero p.lede{ margin-top:22px; max-width:48ch; color:var(--ink-soft); font-size:1.02rem; }
  .hero-cta{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
  .hero-email{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:0.85rem; color:var(--signal); border-bottom:1px dashed var(--signal); padding-bottom:2px; }

  /* SERP signature card */
  .serp{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; box-shadow:0 26px 60px rgba(15,22,24,0.12);
  }
  .serp-bar{
    display:flex; align-items:center; gap:10px; border:1px solid var(--line);
    border-radius:999px; padding:10px 16px; color:var(--ink-soft); font-size:0.86rem;
  }
  .serp-bar svg{ flex:none; }
  .serp-result{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
  .serp-url{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--signal); }
  .serp-title{ font-size:1.12rem; color:#1a0dab; margin-top:4px; font-family:'Inter',sans-serif; font-weight:600; }
  .serp-desc{ font-size:0.88rem; color:var(--ink-soft); margin-top:6px; }
  .serp-meta{
    margin-top:18px; display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; border-top:1px dashed var(--line);
  }
  .rank-pill{
    display:inline-flex; align-items:center; gap:8px; background:rgba(27,110,99,0.09);
    color:var(--signal); font-family:'JetBrains Mono',monospace; font-size:0.76rem;
    padding:7px 12px; border-radius:999px; font-weight:600;
  }
  .serp-meta .trend-label{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--ink-soft); }

  /* Section heads */
  .section-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(1.7rem,2.6vw,2.3rem); margin-top:14px; }
  .section-head p{ color:var(--ink-soft); max-width:44ch; }
  .section-pad{ padding:100px 0; }
  .section-pad-btm{padding:0 0 100px}
  .rule-top{ border-top:1px solid var(--line); }

  /* What I do cards */
  .do-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .do-card{ background:var(--paper); padding:34px 30px; min-height:200px; display:flex; flex-direction:column; gap:14px; }
  .do-card .icon{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--signal); display:flex; align-items:center; justify-content:center; color:var(--signal); font-family:'JetBrains Mono',monospace; font-size:0.78rem; font-weight:600; }
  .do-card h3{ font-size:1.08rem; }
  .do-card p{ color:var(--ink-soft); font-size:0.92rem; margin:0; }

  /* Approach - numbered steps (real sequence) */
  .approach{ background:var(--deep); color:var(--paper); }
  .approach .eyebrow{ color:var(--signal-bright); }
  .approach .eyebrow::before{ background:var(--signal-bright); }
  .approach h2{ color:var(--paper); }
  .approach p.lede{ color:rgba(244,245,241,0.68); max-width:56ch; margin-top:16px; }
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--line-deep); border:1px solid var(--line-deep); }
  .step{ background:var(--deep); padding:34px 30px; }
  .step .num{ font-family:'JetBrains Mono',monospace; font-size:2.2rem; color:var(--signal-bright); font-weight:600; }
  .step h4{ color:var(--paper); font-size:1.05rem; margin-top:16px; }
  .step p{ color:rgba(244,245,241,0.66); font-size:0.9rem; margin-top:10px; }

  /* Skills / rank meters */
  .skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .meter-row{ margin-bottom:26px; }
  .meter-label{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:0.82rem; margin-bottom:8px; }
  .meter-label .pct{ color:var(--signal); font-weight:600; }
  .meter-track{ height:8px; border-radius:999px; background:var(--paper-dim); overflow:hidden; }
  .meter-fill{ height:100%; background:linear-gradient(90deg, var(--signal), var(--signal-bright)); border-radius:999px; width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
  .exp-card{ padding:22px 0; border-bottom:1px solid var(--line); }
  .exp-card:first-child{ padding-top:0; }
  .exp-card h4{ font-size:1rem; }
  .exp-card p{ color:var(--ink-soft); font-size:0.9rem; margin-top:6px; }

  /* Portfolio */
  .portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .portfolio-item{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; position:relative; }
  .portfolio-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .portfolio-item:hover img{ transform:scale(1.05); }
  .portfolio-item .tag{
    position:absolute; left:12px; bottom:12px; background:rgba(15,22,24,0.78); color:var(--paper);
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; padding:5px 10px; border-radius:999px; letter-spacing:0.04em;
  }

  /* Why choose */
  .why-list{ display:flex; flex-direction:column; }
  .why-item{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); align-items:flex-start; }
  .why-item:last-child{ border-bottom:1px solid var(--line); }
  .why-item .glyph{ font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--signal); padding-top:4px; }
  .why-item h3{ font-size:1.08rem; }
  .why-item p{ color:var(--ink-soft); font-size:0.94rem; margin-top:8px; max-width:60ch; }

  /* Closing */
  .closing{ background:var(--deep); color:var(--paper); text-align:center; padding:100px 0; }
  .closing .eyebrow{ justify-content:center; color:var(--signal-bright); }
  .closing .eyebrow::before{ background:var(--signal-bright); }
  .closing h2{ color:var(--paper); font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:20ch; margin:18px auto 0; }
  .closing p{ color:rgba(244,245,241,0.66); max-width:56ch; margin:20px auto 0; }
  .closing .hero-cta{ justify-content:center; margin-top:34px; }

  /* Footer */
  footer{ background:#0b1112; color:rgba(244,245,241,0.55); }
  .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding:64px 0 36px; }
  .footer-col h4{ color:var(--paper); font-size:0.82rem; font-family:'JetBrains Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; }
  .footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; font-size:0.9rem; }
  .footer-col a:hover{ color:var(--paper); }
  .footer-bottom{ border-top:1px solid rgba(244,245,241,0.1); padding:22px 0; font-size:0.8rem; text-align:center; }

  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

  @media (max-width:980px){
    .hero-grid, .skills-grid{ grid-template-columns:1fr; }
    .do-grid, .steps{ grid-template-columns:1fr 1fr; }
    .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
    .section-head{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:680px){
    .wrap{ padding:0 20px; }
    nav, .nav-actions .btn-ghost{ display:none; }
    .menu-toggle{ display:flex; }
    .do-grid, .steps, .portfolio-grid, .footer-grid{ grid-template-columns:1fr; }
    .why-item{ grid-template-columns:40px 1fr; }
    .hero{ padding-top:36px; }
  }