:root{
    --ink:#12172A;
    --ink-soft:#232A44;
    --paper:#F5F1E7;
    --paper-dim:#EAE4D4;
    --line: rgba(245,241,231,0.14);
    --line-paper: rgba(18,23,42,0.12);
    --green:#1F7A4D;
    --green-soft: rgba(31,122,77,0.14);
    /* the base green is too dark to read on the navy sections */
    --green-bright:#3FAE72;
    --amber:#B9791F;
    --amber-soft: rgba(185,121,31,0.15);
    --slate:#8A90A6;
    --slate-soft: rgba(138,144,166,0.18);
    --cream-text: #F5F1E7;
    --muted: #A9AFC4;
    --muted-paper: #5B5F72;
    --display: 'Fraunces', serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --max: 1120px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block; max-width:100%; height:auto;}
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

  ::selection{background:var(--green); color:var(--paper);}

  /* ---------- NAV ---------- */
  nav.top{
    position:sticky; top:0; z-index:50;
    background:rgba(245,241,231,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-paper);
  }
  nav.top .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
  }
  .brand{
    font-family:var(--mono); font-size:14px; font-weight:600;
    letter-spacing:0.02em;
    display:flex; align-items:center; gap:10px;
  }
  .brand .dot{width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block;}
  nav.top ul{list-style:none; display:flex; gap:28px;}
  nav.top a{
    font-family:var(--mono); font-size:13px; text-decoration:none;
    color:var(--muted-paper); letter-spacing:0.01em;
    padding:6px 0; border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.top a:hover{color:var(--ink); border-color:var(--green);}
  .nav-cta{
    font-family:var(--mono); font-size:13px;
    background:var(--ink); color:var(--paper);
    padding:9px 16px; border-radius:3px; text-decoration:none;
    white-space:nowrap;
    flex-shrink:0;
    line-height:1.4;
  }
  .nav-toggle{display:none;}

  /* ---------- HERO ---------- */
  header.hero{
    background:var(--ink);
    color:var(--cream-text);
    position:relative;
    overflow:hidden;
    border-bottom: 1px solid var(--line);
  }
  header.hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity:0.5;
    pointer-events:none;
  }
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap:56px;
    align-items:center;
    padding:88px 0 64px;
  }
  .eyebrow{
    font-family:var(--mono); font-size:13px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--green); opacity:0.95;
    display:flex; align-items:center; gap:10px; margin-bottom:22px;
  }
  .eyebrow::before{content:"■"; font-size:9px; color:var(--green);}
  h1.headline{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(2.4rem, 4.6vw, 3.8rem);
    line-height:1.06;
    letter-spacing:-0.01em;
    max-width:12ch;
  }
  h1.headline em{
    font-style:italic; font-weight:500; color:var(--green);
  }
  .hero-sub{
    margin-top:24px;
    font-size:1.08rem;
    color:var(--muted);
    max-width:46ch;
    line-height:1.65;
  }
  .hero-ctas{
    margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;
  }
  .btn{
    font-family:var(--mono); font-size:13.5px;
    padding:13px 22px; border-radius:3px;
    text-decoration:none; letter-spacing:0.01em;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn-primary{ background:var(--green); color:#F5F1E7; }
  .btn-primary:hover{ transform:translateY(-1px); background:#25904F;}
  .btn-ghost{ border:1px solid var(--line); color:var(--cream-text); }
  .btn-ghost:hover{ border-color:var(--green); color:var(--green);}

  .hero-photo{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  }
  .hero-photo img{
    width:100%; height:100%; object-fit:cover;
    filter: saturate(1.02) contrast(1.02);
  }
  .hero-photo-tag{
    position:absolute; left:16px; bottom:16px;
    background:rgba(18,23,42,0.72);
    backdrop-filter:blur(6px);
    border:1px solid var(--line);
    border-radius:4px;
    padding:10px 14px;
    font-family:var(--mono); font-size:12px;
    color:var(--cream-text);
    line-height:1.5;
  }
  .hero-photo-tag b{color:var(--green); display:block; font-size:13px; margin-bottom:2px;}

  /* rank ladder strip */
  .ladder-strip{
    position:relative;
    border-top:1px solid var(--line);
    padding:26px 0 34px;
  }
  .ladder-strip .strip-label{
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--muted); margin-bottom:18px;
  }
  .ladder-list{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
  .ladder-item{ }
  .ladder-item .lk-name{
    font-size:12.5px; color:var(--muted); margin-bottom:9px;
    min-height:32px; line-height:1.35;
  }
  .ladder-track{
    position:relative;
    height:6px; border-radius:3px;
    background:rgba(245,241,231,0.10);
    margin-bottom:9px;
  }
  .ladder-track .fill{
    position:absolute; top:0; left:0; height:100%;
    background:linear-gradient(90deg, rgba(138,144,166,0.5), var(--green));
    border-radius:3px;
  }
  .ladder-track .dot{
    position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
    transform:translate(-50%,-50%);
    border:2px solid var(--ink);
  }
  .ladder-track .dot.start{ background:var(--slate); }
  .ladder-track .dot.now{ background:var(--green); }
  .ladder-meta{
    display:flex; justify-content:space-between;
    font-family:var(--mono); font-size:11px; color:var(--muted);
  }
  .ladder-meta .now-val{ color:var(--green); font-weight:600; }

  /* ---------- SECTION SHELLS ---------- */
  section{ padding:88px 0; }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:24px; margin-bottom:48px; flex-wrap:wrap;
  }
  .section-eyebrow{
    font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--green);
    display:flex; align-items:center; gap:8px;
  }
  .section-eyebrow::before{content:"■"; font-size:8px;}
  h2.section-title{
    font-family:var(--display); font-weight:600;
    font-size:clamp(1.9rem, 3vw, 2.6rem);
    letter-spacing:-0.01em; margin-top:8px;
  }
  .section-note{ font-size:0.95rem; color:var(--muted-paper); max-width:34ch; }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--paper); }
  .about-grid{
    display:grid; grid-template-columns: 0.7fr 1.3fr; gap:56px; align-items:start;
  }
  .about-photo{
    border-radius:6px; overflow:hidden;
    border:1px solid var(--line-paper);
    box-shadow: 0 20px 40px -24px rgba(18,23,42,0.35);
  }
  .about-text p{
    font-size:1.12rem; line-height:1.75; color:var(--ink);
  }
  .about-text p + p{ margin-top:18px; }
  .about-facts{
    margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    padding-top:28px; border-top:1px solid var(--line-paper);
  }
  .fact b{
    display:block; font-family:var(--mono); font-size:1.5rem; color:var(--green); font-weight:600;
  }
  .fact span{ font-size:0.85rem; color:var(--muted-paper); }

  /* ---------- SERVICES ---------- */
  .services{ background:var(--ink); color:var(--cream-text); }
  .services .section-eyebrow{ color:var(--green); }
  .services .section-note{ color:var(--muted); }
  .service-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  }
  .service-card{
    background:var(--ink); padding:28px 22px; min-height:210px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .service-card .num{ font-family:var(--mono); font-size:12px; color:var(--green); }
  .service-card h3{
    font-family:var(--display); font-weight:600; font-size:1.15rem; margin-top:26px; line-height:1.25;
  }
  .service-card p{ font-size:0.86rem; color:var(--muted); margin-top:10px; line-height:1.55; }

  /* ---------- CASE STUDIES ---------- */
  .cases{ background:var(--paper); }
  .case-grid{ display:flex; flex-direction:column; gap:1px; background:var(--line-paper); border:1px solid var(--line-paper); border-radius:6px; overflow:hidden; }
  .case{
    background:var(--paper);
    display:grid; grid-template-columns: 1.15fr 0.85fr;
    gap:36px; padding:38px 34px;
  }
  .case-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
  .case-industry{
    font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--muted-paper); border:1px solid var(--line-paper); border-radius:20px; padding:4px 11px;
  }
  .case h3{
    font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:-0.01em;
  }
  .case p.desc{ color:var(--muted-paper); font-size:0.98rem; margin-top:12px; line-height:1.65; max-width:52ch;}
  .case .services-tag{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
  .case .services-tag span{
    font-family:var(--mono); font-size:11px; color:var(--green);
    background:var(--green-soft); padding:4px 9px; border-radius:3px;
  }
  .case-result{
    background:var(--ink); color:var(--cream-text); border-radius:5px; padding:22px 22px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .case-result .rlabel{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
  .case-result .rstat{ font-family:var(--mono); font-size:1.9rem; font-weight:600; color:var(--green); line-height:1.15;}
  .case-result .rstat small{ font-family:var(--body); font-size:0.62em; font-weight:500; color:var(--muted); display:block; margin-top:4px;}
  .case-result .rdetail{ font-size:0.85rem; color:var(--muted); margin-top:12px; line-height:1.5; }
  .case-result .rbadge{
    margin-top:14px; display:inline-flex; align-items:center; gap:6px;
    font-family:var(--mono); font-size:11px; color:var(--green);
  }
  .case-result .rbadge::before{content:"●"; font-size:8px;}

  /* mini ladder inside cases (paper theme) */
  .mini-ladders{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
  .mini-ladder .mlk-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted-paper); margin-bottom:6px;}
  .mini-ladder .mlk-top b{ color:var(--ink); font-weight:600; }
  .mini-track{ position:relative; height:5px; border-radius:3px; background:var(--paper-dim); }
  .mini-track .fill{ position:absolute; top:0; left:0; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--slate), var(--green)); }
  .mini-track .dot{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--paper); }
  .mini-track .dot.start{ background:var(--slate); }
  .mini-track .dot.now{ background:var(--green); }

  /* ---------- EXPERIENCE ---------- */
  .experience{ background:var(--paper-dim); }
  .timeline{ position:relative; padding-left:28px; border-left:1px solid var(--line-paper); }
  .tl-item{ position:relative; padding-bottom:44px; }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{
    content:""; position:absolute; left:-33px; top:5px; width:9px; height:9px; border-radius:50%;
    background:var(--paper-dim); border:2px solid var(--green);
  }
  .tl-date{ font-family:var(--mono); font-size:12px; color:var(--green); letter-spacing:0.02em; }
  .tl-item h3{ font-family:var(--display); font-size:1.3rem; font-weight:600; margin-top:6px; }
  .tl-item .tl-org{ font-size:0.95rem; color:var(--muted-paper); margin-top:2px; }
  .tl-item ul{ margin-top:12px; padding-left:18px; }
  .tl-item li{ font-size:0.93rem; color:var(--ink); margin-bottom:6px; line-height:1.55; }
  .tl-item li::marker{ color:var(--green); }

  /* ---------- SKILLS ---------- */
  .skills{ background:var(--paper); }
  .skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
  .skill-col h4{
    font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--green); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line-paper);
  }
  .skill-col ul{ list-style:none; }
  .skill-col li{ font-size:0.98rem; padding:7px 0; color:var(--ink); border-bottom:1px dashed var(--line-paper);}
  .skill-col li:last-child{ border-bottom:none; }

  /* ---------- CONTACT / FOOTER ---------- */
  footer{ background:var(--ink); color:var(--cream-text); padding:90px 0 40px; }
  .contact-inner{ text-align:center; max-width:640px; margin:0 auto; }
  footer .section-eyebrow{ justify-content:center; }
  footer h2.section-title{ margin-top:14px; }
  footer p.foot-sub{ color:var(--muted); margin-top:18px; font-size:1.05rem; }
  .contact-ctas{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .foot-meta{
    margin-top:80px; padding-top:28px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  }
  .foot-meta span{ font-family:var(--mono); font-size:12px; color:var(--muted); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    nav.top ul{ display:none; }
    .hero-grid{ grid-template-columns:1fr; padding-top:56px; }
    .hero-photo{ order:-1; max-width:320px; }
    .ladder-list{ grid-template-columns:repeat(2,1fr); }
    .about-grid{ grid-template-columns:1fr; }
    .about-photo{ max-width:280px; }
    .about-facts{ grid-template-columns:repeat(3,1fr); }
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .case{ grid-template-columns:1fr; }
    .skills-grid{ grid-template-columns:1fr; gap:28px; }
    section{ padding:64px 0; }
    .wrap{ padding:0 20px; }
    .foot-meta{ flex-direction:column; text-align:center; }
  }
  @media (max-width:520px){
    .service-grid{ grid-template-columns:1fr; }
    .ladder-list{ grid-template-columns:1fr 1fr; }
    .about-facts{ grid-template-columns:1fr; gap:16px; }
  }

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

  /* ---------- MOBILE NAV ---------- */
  .nav-toggle{
    display:none;
    background:none; border:1px solid var(--line-paper); border-radius:3px;
    width:40px; height:36px; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:4px;
    flex-shrink:0;
  }
  .nav-toggle span{
    display:block; width:18px; height:1.5px; background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

  .mobile-menu{
    display:none;
    flex-direction:column;
    border-top:1px solid var(--line-paper);
    background:rgba(245,241,231,0.98);
    backdrop-filter:blur(10px);
    padding:8px 20px 16px;
  }
  .mobile-menu[hidden]{ display:none; }
  .mobile-menu a{
    font-family:var(--mono); font-size:14px; text-decoration:none;
    color:var(--ink); padding:13px 0;
    border-bottom:1px solid var(--line-paper);
  }
  .mobile-menu a:last-child{ border-bottom:none; color:var(--green); }

  /* ---------- CONTACT FORM ---------- */
  .contact-form-section{ background:var(--paper-dim); border-top:1px solid var(--line-paper); }
  .cf-grid{
    display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:start;
  }
  .cf-lead{ font-size:1.05rem; color:var(--muted-paper); margin-top:18px; line-height:1.7; max-width:38ch; }
  .cf-points{ list-style:none; margin-top:26px; }
  .cf-points li{
    font-size:0.93rem; color:var(--ink); padding:9px 0 9px 24px; position:relative;
  }
  .cf-points li::before{
    content:"✓"; position:absolute; left:0; top:9px;
    color:var(--green); font-size:12px; font-weight:700;
  }
  .cf-direct{
    margin-top:32px; padding-top:24px; border-top:1px solid var(--line-paper);
    display:flex; flex-direction:column; gap:7px;
  }
  .cf-direct-label{
    font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--muted-paper); margin-bottom:4px;
  }
  .cf-direct a{
    font-family:var(--mono); font-size:14px; color:var(--ink);
    text-decoration:none; border-bottom:1px solid var(--green-soft);
    align-self:flex-start; padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .cf-direct a:hover{ color:var(--green); border-color:var(--green); }

  .cf-form{
    background:var(--paper); border:1px solid var(--line-paper);
    border-radius:6px; padding:34px 32px;
    box-shadow: 0 20px 40px -28px rgba(18,23,42,0.30);
  }
  .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .cf-field{ margin-bottom:18px; display:flex; flex-direction:column; }
  .cf-field label{
    font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--muted-paper); margin-bottom:8px;
  }
  .cf-field label span{ color:var(--green); }
  .cf-field input,
  .cf-field select,
  .cf-field textarea{
    font-family:var(--body); font-size:0.97rem; color:var(--ink);
    background:var(--paper); width:100%;
    border:1px solid var(--line-paper); border-radius:3px;
    padding:12px 13px; line-height:1.5;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .cf-field textarea{ resize:vertical; min-height:120px; }
  .cf-field select{
    appearance:none; cursor:pointer; padding-right:36px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235B5F72' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center;
  }
  .cf-field input::placeholder,
  .cf-field textarea::placeholder{ color:var(--slate); }
  .cf-field input:focus,
  .cf-field select:focus,
  .cf-field textarea:focus{
    outline:none; border-color:var(--green);
    box-shadow:0 0 0 3px var(--green-soft);
  }
  .cf-field.has-error input,
  .cf-field.has-error select,
  .cf-field.has-error textarea{ border-color:#C0392B; }
  .cf-error{
    font-size:0.8rem; color:#C0392B; margin-top:6px; display:none;
  }
  .cf-field.has-error .cf-error{ display:block; }

  /* honeypot — off-screen, never display:none (bots skip hidden fields) */
  .cf-hp{
    position:absolute; left:-9999px; top:auto;
    width:1px; height:1px; overflow:hidden;
  }

  .cf-submit{
    border:none; cursor:pointer; margin-top:6px; width:100%;
    justify-content:center; font-size:14px; padding:15px 22px;
  }
  .cf-submit:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
  .cf-spinner{
    width:13px; height:13px; border-radius:50%;
    border:2px solid rgba(245,241,231,0.35); border-top-color:var(--paper);
    animation:cf-spin .7s linear infinite;
  }
  .cf-spinner[hidden]{ display:none; }
  @keyframes cf-spin{ to{ transform:rotate(360deg); } }

  .cf-status{
    margin-top:16px; font-size:0.92rem; line-height:1.55;
    padding:13px 15px; border-radius:4px; display:none;
  }
  .cf-status.is-ok{
    display:block; color:var(--green);
    background:var(--green-soft); border:1px solid rgba(31,122,77,0.3);
  }
  .cf-status.is-err{
    display:block; color:#C0392B;
    background:rgba(192,57,43,0.10); border:1px solid rgba(192,57,43,0.28);
  }
  .cf-privacy{
    margin-top:14px; font-size:0.8rem; color:var(--muted-paper);
    line-height:1.5; text-align:center;
  }

  @media (max-width: 900px){
    .nav-toggle{ display:flex; }
    .nav-cta{ display:none; }
    .mobile-menu:not([hidden]){ display:flex; }
    /* the eyebrow line was overflowing the viewport on phones */
    .eyebrow{ flex-wrap:wrap; font-size:11.5px; letter-spacing:0.06em; row-gap:4px; }
    .section-eyebrow{ flex-wrap:wrap; row-gap:4px; }
    .cf-grid{ grid-template-columns:1fr; gap:36px; }
    .cf-form{ padding:26px 20px; }
  }
  @media (max-width:520px){
    .cf-row{ grid-template-columns:1fr; gap:0; }
  }

  /* ==========================================================
     REFINEMENTS — images, buttons, hover states, focus, rhythm
     ========================================================== */

  /* ---------- IMAGES: lock aspect ratios so nothing distorts ---------- */
  .hero-photo{ aspect-ratio: 704 / 1000; }
  .about-photo{
    aspect-ratio: 4 / 5;
    position:sticky; top:96px;
  }
  .about-photo img,
  .hero-photo img{
    width:100%; height:100%;
    object-fit:cover; object-position:center 22%;
  }

  /* ---------- ANCHORS: stop the sticky nav covering section headings ---------- */
  section[id], header[id], footer[id]{ scroll-margin-top:84px; }

  /* ---------- BUTTONS ---------- */
  .btn{
    position:relative;
    font-weight:500;
    padding:14px 24px;
    border:1px solid transparent;
    border-radius:4px;
    cursor:pointer;
    will-change:transform;
    transition:transform .18s cubic-bezier(.2,.7,.3,1),
               background .18s ease, border-color .18s ease,
               box-shadow .18s ease, color .18s ease;
  }
  .btn .arw{
    display:inline-block;
    transition:transform .18s cubic-bezier(.2,.7,.3,1);
  }
  .btn:hover .arw{ transform:translateX(3px); }
  .btn:hover .arw.down{ transform:translateY(3px); }

  .btn-primary{
    background:var(--green); color:#F5F1E7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                0 6px 16px -9px rgba(31,122,77,0.95);
  }
  .btn-primary:hover{
    background:#238A57;
    transform:translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
                0 12px 24px -10px rgba(31,122,77,0.95);
  }
  .btn-primary:active{ transform:translateY(0); box-shadow:inset 0 2px 5px rgba(0,0,0,0.18); }

  .btn-ghost{
    border-color:var(--line);
    color:var(--cream-text);
    background:rgba(245,241,231,0.03);
  }
  .btn-ghost:hover{
    border-color:var(--green);
    color:var(--green);
    background:var(--green-soft);
    transform:translateY(-2px);
  }
  .btn-ghost:active{ transform:translateY(0); }

  /* keyboard focus — visible on both the dark and the paper sections */
  .btn:focus-visible,
  .nav-cta:focus-visible,
  .nav-toggle:focus-visible,
  nav.top a:focus-visible,
  .mobile-menu a:focus-visible,
  .cf-direct a:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- NAV ---------- */
  nav.top .wrap{ gap:24px; }
  nav.top ul{ margin-left:auto; }
  .nav-cta{
    margin-left:4px;
    border:1px solid var(--ink);
    transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .nav-cta:hover{
    background:var(--green);
    border-color:var(--green);
    transform:translateY(-1px);
    box-shadow:0 6px 14px -8px rgba(31,122,77,0.9);
  }

  /* ---------- SERVICE CARDS ---------- */
  .service-card{
    position:relative;
    transition:background .2s ease;
  }
  .service-card::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--green);
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s cubic-bezier(.2,.7,.3,1);
  }
  .service-card:hover{ background:var(--ink-soft); }
  .service-card:hover::after{ transform:scaleX(1); }
  .service-card:hover .num{ color:var(--cream-text); }
  .service-card .num{ transition:color .2s ease; }

  /* ---------- CASE STUDIES ---------- */
  .case{ transition:background .2s ease; }
  .case:hover{ background:#FAF8F1; }
  .case-result{
    box-shadow:0 18px 34px -26px rgba(18,23,42,0.6);
  }

  /* ---------- TIMELINE ---------- */
  .tl-item::before{ transition:transform .2s ease, background .2s ease; }
  .tl-item:hover::before{ transform:scale(1.35); background:var(--green); }

  /* ---------- SKILLS ---------- */
  .skill-col li{ transition:color .15s ease, padding-left .15s ease; }
  .skill-col li:hover{ color:var(--green); padding-left:5px; }

  /* ---------- LADDER STRIP: it was cramped at 4 columns ---------- */
  .ladder-strip{ padding-top:34px; }
  .ladder-list{ gap:28px; }
  .ladder-item .lk-name{ min-height:36px; padding-right:8px; }

  @media (max-width: 900px){
    /* sticky about photo fights the single-column layout */
    .about-photo{ position:static; }
    .btn{ padding:13px 20px; }
  }

  /* ---------- SERVICE CARDS: kill the dead space under the number ----------
     space-between + min-height was pushing "01" and the heading apart, and the
     gap changed per card because the copy lengths differ. The grid already
     equalises card heights, so the card just needs normal top-down flow. */
  .service-card{
    justify-content:flex-start;
    min-height:0;
    padding:26px 22px 30px;
  }
  .service-card .num{
    display:block;
    margin-bottom:14px;
    letter-spacing:0.06em;
  }
  .service-card h3{ margin-top:0; }
  .service-card p{ margin-top:9px; }

  /* ---------- NAV SPECIFICITY FIX ----------
     `nav.top a` (0,1,2) was beating `.nav-cta` (0,1,0) and `.mobile-menu a`
     (0,1,1), so both were inheriting padding:6px 0 and the muted link colour.
     That squashed the CTA text and, on hover, painted dark ink on the dark
     button. Scoping these selectors to nav.top puts them back in charge. */

  nav.top a.nav-cta{
    padding:11px 20px;
    color:var(--paper);
    background:var(--ink);
    border:1px solid var(--ink);
    border-bottom-color:var(--ink);
    border-radius:4px;
    font-weight:500;
    letter-spacing:0.02em;
  }
  nav.top a.nav-cta:hover{
    background:var(--green);
    border-color:var(--green);
    color:#F5F1E7;
    transform:translateY(-1px);
    box-shadow:0 6px 14px -8px rgba(31,122,77,0.9);
  }
  nav.top a.nav-cta:active{ transform:translateY(0); }

  nav.top .mobile-menu a{
    padding:14px 2px;
    color:var(--ink);
    border-bottom:1px solid var(--line-paper);
  }
  nav.top .mobile-menu a:last-child{ border-bottom:none; color:var(--green); }
  nav.top .mobile-menu a:hover{ color:var(--green); }

  /* ---------- CONTRAST ON DARK SECTIONS ----------
     var(--green) on var(--ink) is only ~3.4:1 — under the 4.5:1 minimum.
     Dark-background text uses the brighter green instead. */
  .btn-ghost:hover{ color:var(--green-bright); border-color:var(--green-bright); }
  .services .service-card .num{ color:var(--green-bright); }
  .case-result .rstat{ color:var(--green-bright); }
  .case-result .rbadge{ color:var(--green-bright); }
  .ladder-meta .now-val{ color:var(--green-bright); }
  header.hero .eyebrow{ color:var(--green-bright); }
  header.hero .eyebrow::before{ color:var(--green-bright); }
  .services .section-eyebrow{ color:var(--green-bright); }
  footer .section-eyebrow{ color:var(--green-bright); }
  .hero-photo-tag b{ color:var(--green-bright); }
  h1.headline em{ color:var(--green-bright); }

  /* ---------- ABOUT PHOTO: show the whole frame ----------
     aspect-ratio 4/5 + object-fit:cover was cropping this 437x1000 portrait
     heavily. Dropping the ratio lock and letting height follow width keeps the
     image at its natural proportions: nothing stretched, nothing cut off. */
  .about-photo{
    aspect-ratio:auto;
    align-self:start;
  }
  .about-photo img{
    width:100%;
    height:auto;
    object-fit:fill;
    object-position:center;
  }

  /* ==========================================================
     SCROLL ANIMATIONS
     The hidden state is scoped to .js so that if JavaScript never
     runs, nothing is left invisible — content degrades to static.
     ========================================================== */
  @media (prefers-reduced-motion: no-preference){
    .js .reveal{
      opacity:0;
      transform:translateY(20px);
      transition:opacity .75s cubic-bezier(.16,.8,.3,1),
                 transform .75s cubic-bezier(.16,.8,.3,1);
      transition-delay:var(--d, 0ms);
    }
    .js .reveal.in{ opacity:1; transform:none; }

    /* photos settle in with a touch of scale */
    .js .reveal-img{
      opacity:0; transform:scale(1.04);
      transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1);
    }
    .js .reveal-img.in{ opacity:1; transform:none; }

    /* rank ladders draw themselves when scrolled to */
    .js .ladder-track .fill,
    .js .mini-track .fill{
      transition:width .9s cubic-bezier(.16,.8,.3,1) var(--d, 0ms);
    }
    .js .ladder-track .dot,
    .js .mini-track .dot{
      transition:left .9s cubic-bezier(.16,.8,.3,1) var(--d, 0ms),
                 transform .2s ease, background .2s ease;
    }

    /* the headline arrives a word-block at a time */
    .js .hero-stagger{
      opacity:0; transform:translateY(24px);
      transition:opacity .8s cubic-bezier(.16,.8,.3,1) var(--d, 0ms),
                 transform .8s cubic-bezier(.16,.8,.3,1) var(--d, 0ms);
    }
    .js .hero-stagger.in{ opacity:1; transform:none; }
  }

  /* nav gets a subtle shadow once the page is scrolled */
  nav.top{ transition:box-shadow .25s ease, background .25s ease; }
  nav.top.scrolled{ box-shadow:0 6px 24px -18px rgba(18,23,42,0.7); }