:root{
    --emerald:#15803d;
    --emerald-deep:#0a3d1f;
    --forest-950:#07150d;
    --ivory:#FAF8F3;
    --gold:#C9A227;
    --ink:#0f1a14;
  }
  *{ scroll-behavior: smooth; }
  html{ scroll-behavior: smooth; }
  body{
    font-family:'Inter', sans-serif;
    background:var(--ivory);
    color:var(--ink);
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.font-display{ font-family:'Fraunces', serif; }
  .mono{ font-family:'IBM Plex Mono', monospace; }

  ::selection{ background:var(--emerald); color:#fff; }

  /* Scroll progress bar */
  #scroll-progress{
    position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--emerald));
    z-index:100; width:0%; transition:width .1s linear;
  }

  /* Reveal on scroll */
  .reveal{ opacity:1; transform:translateY(0); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.08s; }
  .reveal-delay-2{ transition-delay:.16s; }
  .reveal-delay-3{ transition-delay:.24s; }
  .reveal-delay-4{ transition-delay:.32s; }
  .reveal-delay-5{ transition-delay:.4s; }
  .reveal-delay-6{ transition-delay:.48s; }

  /* Nav link underline */
  .nav-link{ position:relative; }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:var(--emerald);
    transition:width .3s ease;
  }
  .nav-link:hover::after, .nav-link.active::after{ width:100%; }
  .nav-link.active{ color:var(--emerald-deep); }

  /* Floating shapes */
  @keyframes float-slow{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-22px) rotate(3deg);} }
  @keyframes float-slower{ 0%,100%{ transform:translateY(0) translateX(0);} 50%{ transform:translateY(18px) translateX(-14px);} }
  .float-a{ animation:none; }
  .float-b{ animation:none; }

  /* Gradient animated backdrop */
  @keyframes gradient-shift{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  .animated-gradient{
    background:linear-gradient(120deg,#07150d, #0a3d1f 35%, #124d29 55%, #07150d 100%);
    background-size:100% 100%;
    animation:none;
  }

  #cf-status{
    padding:1rem;
    border:1px solid rgba(255,255,255,.22);
    border-radius:.75rem;
    background:rgba(255,255,255,.1);
    color:#fff;
  }
  #cf-status[data-state="success"]{
    border-color:rgba(134,239,172,.65);
    background:rgba(21,128,61,.32);
    color:#fff;
  }
  #cf-status[data-state="error"]{
    border-color:rgba(252,165,165,.7);
    background:rgba(153,27,27,.38);
    color:#fff;
  }

  /* Woven / imigongo-inspired geometric motif — used as signature texture */
  .weave-pattern{
    background-image:
      repeating-linear-gradient(60deg, rgba(201,162,39,0.10) 0px, rgba(201,162,39,0.10) 1.5px, transparent 1.5px, transparent 26px),
      repeating-linear-gradient(-60deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1.5px, transparent 1.5px, transparent 26px);
  }

  /* Card hover lift */
  .lift{ transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease; }
  .lift:hover{ transform:translateY(-8px); box-shadow:0 24px 60px -20px rgba(10,61,31,0.35); border-color:rgba(21,128,61,0.35); }

  /* Ripple button */
  .btn-ripple{ position:relative; overflow:hidden; }
  .ripple-el{
    position:absolute; border-radius:9999px; transform:scale(0); animation:ripple .7s ease-out;
    background:rgba(255,255,255,0.5); pointer-events:none;
  }
  @keyframes ripple{ to{ transform:scale(3.5); opacity:0; } }

  /* glass */
  .glass{
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.12);
  }
  .glass-light{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(15,26,20,0.06);
  }

  /* gold underline accent */
  .accent-mark{ position:relative; display:inline-block; }
  .accent-mark::after{
    content:''; position:absolute; left:0; right:0; bottom:.08em; height:.3em; background:rgba(201,162,39,.28); z-index:-1;
    transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.16,1,.3,1);
  }
  .is-visible .accent-mark::after{ transform:scaleX(1); }

  /* marquee for tech badges */
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .marquee-track{ animation:none; }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

  /* number counter font */
  .stat-num{ font-variant-numeric:tabular-nums; }

  /* custom scrollbar */
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--ivory); }
  ::-webkit-scrollbar-thumb{ background:#c8d3ca; border-radius:8px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--emerald); }

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  @media (max-width:639px){
    .marquee-wrap{ overflow:hidden; }
    #tech-track{
      display:grid;
      grid-auto-flow:column;
      grid-template-rows:repeat(2, max-content);
      width:max-content;
      animation:marquee 28s linear infinite;
    }
  }

  @media (prefers-reduced-motion: reduce) and (max-width:639px){
    .marquee-wrap{ overflow-x:auto; }
    #tech-track{ animation:none; }
  }

  .section-divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(15,26,20,.12), transparent); }

  .timeline-line{ background:linear-gradient(180deg, var(--gold) 0%, var(--emerald) 100%); }

  /* Case studies */
  .portfolio-scroller{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    padding:2px 2px 12px;
  }
  .project-card{
    min-width:0;
    display:flex;
    align-items:stretch;
    border:1px solid rgba(15,26,20,.09);
    border-radius:18px;
    background:#fff;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .project-card:hover{ border-color:rgba(21,128,61,.3); box-shadow:0 8px 24px -18px rgba(10,61,31,.35); }
  .project-card-content{ display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:24px; }
  .project-category{ color:var(--emerald); font:500 10px/1.3 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
  .project-card-content h3{ margin-top:10px; color:var(--emerald-deep); font-size:23px; line-height:1.25; }
  .project-client{ margin-top:4px; color:#647067; font-size:12px; }
  .project-cover{ width:100%; aspect-ratio:16/9; margin-top:14px; object-fit:cover; border-radius:10px; background:#edf2ee; }
  .project-summary{ margin-top:8px; color:#647067; font-size:14px; line-height:1.6; }
  .project-details{ display:grid; gap:13px; margin-top:19px; width:100%; }
  .project-details dt{ color:var(--emerald); font:500 10px/1.3 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
  .project-details dd{ margin-top:4px; color:#647067; font-size:13px; line-height:1.55; }
  .project-metrics,.project-tech{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
  .project-metrics li{ display:flex; flex-direction:column; gap:2px; min-width:100px; padding:10px 12px; border-radius:10px; background:#eef6f0; }
  .project-metrics strong{ color:var(--emerald-deep); font-size:16px; }
  .project-metrics span{ color:#647067; font-size:11px; }
  .project-metrics small{ color:#647067; font-size:10px; line-height:1.4; }
  .project-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; margin-top:16px; }
  .project-gallery figure img{ width:100%; aspect-ratio:4/3; border-radius:9px; object-fit:cover; background:#edf2ee; }
  .project-gallery figcaption{ margin-top:4px; color:#647067; font-size:10px; }
  .project-tech li{ padding:5px 9px; border-radius:999px; background:#f2f3ef; color:#536158; font-size:11px; }
  .project-link{ margin-top:18px; color:var(--emerald); font-size:13px; font-weight:600; }
  .project-dates{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; color:#647067; font-size:11px; }
  .service-deliverables{ display:grid; gap:6px; margin-top:14px; color:rgba(255,255,255,.7); font-size:12px; }
  .service-deliverables li::before{ content:'•'; color:var(--gold); margin-right:8px; }
  .testimonial-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .testimonial-card{ padding:24px; border:1px solid rgba(15,26,20,.09); border-radius:18px; background:var(--ivory); }
  .testimonial-card blockquote{ color:var(--emerald-deep); font-family:'Fraunces',serif; font-size:20px; line-height:1.45; }
  .testimonial-card figcaption{ display:flex; align-items:center; gap:12px; margin-top:20px; color:var(--ink); font-size:13px; }
  .testimonial-card figcaption img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
  .testimonial-card figcaption span{ display:grid; gap:3px; }
  .testimonial-card figcaption small{ color:#647067; font-size:11px; }
  .testimonial-source{ display:inline-block; margin-top:14px; color:var(--emerald); font-size:11px; font-weight:600; }
  .project-download{
    display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding:7px 11px;
    border-radius:999px; background:var(--emerald-deep); color:#fff; font-size:11px; font-weight:500;
  }
  @media (max-width:639px){
    .portfolio-scroller{ grid-template-columns:minmax(0, 1fr); gap:12px; }
    .project-card-content{ padding:20px; }
    .project-card-content h3{ font-size:20px; }
    .testimonial-grid{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  }