:root{ color-scheme: light only; --bg:#FBFAF5; --ink:#304258; --ink-soft:#5C6B78; --line:#DEDBC7; --gold:#C4883F; --gold-bg:#F3E6D2; --pale-blue:#DCE9EE; --pale-blue-ink:#2F5871; }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{background:var(--bg);}
  body{background:var(--bg); color:var(--ink); font-family:'Source Sans 3', sans-serif;}
  .wrap{max-width:900px; margin:0 auto; padding:0 40px;}

  nav{display:flex; justify-content:space-between; align-items:center; padding:28px 0;}
  .logo{font-family:'JetBrains Mono'; font-size:13px; font-weight:500;}
  .nav-links{display:flex; gap:24px; font-size:13px; color:var(--ink-soft);}
  .nav-links a{color:inherit; text-decoration:none;}

  .hero{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; padding:40px 0 56px;}
  .tagline{font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:18px;}
  h1{font-family:'Fraunces'; font-weight:600; font-size:64px; line-height:0.95;}
  .hero-greeting{display:block; font-family:'Fraunces'; font-weight:500; font-size:26px; color:var(--ink-soft); letter-spacing:0.06em; margin-bottom:12px;}
  .role{font-family:'JetBrains Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-top:18px;}
  .subhead{font-size:15px; color:var(--ink-soft); margin-top:28px; line-height:1.6; max-width:400px;}
  .subhead + .subhead{margin-top:16px;}
  .cta-row{display:flex; gap:12px; margin-top:26px;}
  .btn{font-family:'Source Sans 3'; font-weight:500; font-size:14px; padding:12px 22px; text-decoration:none; border-radius:2px;}
  .btn-primary{background:var(--ink); color:#fff;} .btn-secondary{border:1px solid var(--ink); color:var(--ink);}

  .laptop-screen{background:#1a1a1a; border-radius:10px 10px 0 0; padding:10px 10px 0 10px; box-shadow:0 20px 40px rgba(48,66,88,0.2);}
  .laptop-screen img{width:100%; display:block; border-radius:3px 3px 0 0;}
  .laptop-base{height:14px; background:linear-gradient(#d8d5cc,#c2beb2); border-radius:0 0 8px 8px; position:relative;}
  .laptop-base::after{content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:60px; height:5px; background:#a8a49a; border-radius:0 0 4px 4px;}

  .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; overflow:hidden; white-space:nowrap; margin:0 -40px;}
  .marquee-track{display:inline-block; font-family:'JetBrains Mono'; font-size:12px; color:var(--ink-soft); animation:scroll 36s linear infinite; padding-left:40px;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  section{padding:44px 0; border-top:1px solid var(--line);}
  .section-label{display:inline-block; font-family:'JetBrains Mono'; font-size:15px; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink); background:var(--gold-bg); padding:5px 12px 6px; border-radius:6px; margin-bottom:18px;}

  .about-text{font-size:15px; max-width:600px; line-height:1.7;}
  .about-numbered{list-style:none; counter-reset:about-counter; padding:0; margin:16px 0 0; max-width:520px; display:flex; flex-direction:column; gap:10px;}
  .about-numbered li{counter-increment:about-counter; font-size:14px; line-height:1.5; padding-left:28px; position:relative;}
  .about-numbered li::before{content:counter(about-counter) "."; position:absolute; left:0; color:var(--gold); font-family:'JetBrains Mono'; font-weight:600;}
  .about-pills{margin-top:18px;}

  .svc-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
  .svc-title{font-family:'Fraunces'; font-weight:600; font-size:19px; margin-bottom:6px;}
  .svc-desc{font-size:13px; color:var(--ink-soft); line-height:1.5;}

  .case-card{padding:0; background:#fff; border-radius:16px; margin-bottom:20px; border:1px solid var(--line); overflow:hidden;}
  .case-img{width:100%; height:auto; display:block;}
  .case-img-illustrative{width:100%; height:auto; display:block;}
  .case-body{padding:26px 30px;}
  .case-top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
  .case-title{font-family:'Fraunces'; font-weight:600; font-size:23px; max-width:380px;}
  .pill-row{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
  .pill{font-size:11px; background:var(--pale-blue); color:var(--pale-blue-ink); padding:3px 10px; border-radius:20px; font-weight:600;}
  .big-stat{display:flex; flex-direction:column; align-items:flex-end; text-align:right;}
  .stat-num{font-family:'Fraunces'; font-weight:600; font-size:34px; color:var(--gold); line-height:1;}
  .stat-label{font-family:'JetBrains Mono'; font-size:10px; color:var(--ink-soft); margin-top:4px; max-width:150px; text-align:right;}
  .learned{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); font-size:13px; color:var(--ink-soft); font-style:italic;}
  .learned b{color:var(--ink); font-style:normal;}
  .illustrative-tag{font-family:'JetBrains Mono'; font-size:10px; color:var(--ink-soft); margin-top:8px;}

  .contact-title{font-family:'Fraunces'; font-weight:600; font-size:26px; margin-bottom:14px;}
  .contact-links{display:flex; gap:20px; margin-top:6px; font-family:'JetBrains Mono'; font-size:14px;}
  .contact-links a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink);}

  footer{padding:32px 0 48px; font-family:'JetBrains Mono'; font-size:12px; color:var(--ink-soft); text-align:right;}

  /* Clickable case card (Card 3 → detail modal) */
  .case-card--clickable{cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
  .case-card--clickable:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(48,66,88,0.12); border-color:var(--gold);}
  .case-card--clickable:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  .case-more{margin-top:14px; font-family:'JetBrains Mono'; font-size:12px; color:var(--gold); letter-spacing:0.02em;}
  .case-card--clickable:hover .case-more span{padding-left:4px;}

  /* Case studies stack full-width, one under another. .case-grid is just a
     plain block wrapper; cards keep their own margin-bottom spacing. */
  .case-line{font-size:13px; color:var(--ink-soft); line-height:1.6; margin-top:14px;}

  /* Detail modal */
  .modal-overlay{position:fixed; inset:0; background:rgba(48,66,88,0.55); display:none; align-items:center; justify-content:center; padding:24px; z-index:1000; overflow-y:auto;}
  .modal-overlay.is-open{display:flex;}
  .modal{background:var(--bg); border:1px solid var(--line); border-radius:16px; max-width:640px; width:100%; padding:40px 44px 44px; position:relative; box-shadow:0 24px 60px rgba(48,66,88,0.3); animation:modal-in .22s ease;}
  @keyframes modal-in{ from{opacity:0; transform:translateY(12px) scale(0.98);} to{opacity:1; transform:none;} }
  .modal-close{position:absolute; top:16px; right:18px; width:34px; height:34px; border:none; background:transparent; color:var(--ink-soft); font-size:26px; line-height:1; cursor:pointer; border-radius:50%; transition:background .15s ease, color .15s ease;}
  .modal-close:hover{background:var(--gold-bg); color:var(--ink);}
  .modal-close:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .modal-label{font-family:'JetBrains Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:10px;}
  .modal-title{font-family:'Fraunces'; font-weight:600; font-size:28px; line-height:1.1; margin-bottom:14px;}
  .modal-lead{font-size:16px; line-height:1.6; margin:16px 0 8px; color:var(--ink);}
  .modal-lead b{color:var(--gold); font-weight:600;}
  .modal-text{font-size:14px; line-height:1.7; color:var(--ink-soft); margin-top:14px;}
  .modal-list{margin:18px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:11px;}
  .modal-list li{font-size:14px; line-height:1.6; color:var(--ink-soft);}
  .modal-list li::marker{color:var(--gold);}
  .modal-list li b{color:var(--gold); font-weight:600;}

  /* ---- Layered interactions: scroll reveal + hover micro-motion ---- */
  /* .reveal is added by JS, so no-JS / reduced-motion visitors keep the
     final visible state (nothing is hidden without JS). */
  .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.is-visible{opacity:1; transform:none;}

  /* Case cards carry reveal + hover in one transition so neither clobbers
     the other (both animate `transform`). */
  .case-card{transition:transform .35s ease, box-shadow .25s ease, border-color .25s ease, opacity .6s ease;}
  .case-card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(48,66,88,0.14);}
  .btn{transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(48,66,88,0.18);}
  .nav-links a{transition:color .15s ease;}
  .nav-links a:hover{color:var(--gold);}
  .contact-links a{transition:color .15s ease, border-color .15s ease;}
  .contact-links a:hover{color:var(--gold); border-color:var(--gold);}

  /* Back-to-top button (shown by JS after scrolling past the first screen) */
  .to-top{position:fixed; right:24px; bottom:24px; width:46px; height:46px; border:none; border-radius:50%; background:var(--ink); color:var(--bg); font-size:22px; line-height:1; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease, color .15s ease; box-shadow:0 6px 18px rgba(48,66,88,0.28); z-index:900;}
  .to-top.is-visible{opacity:1; visibility:visible; transform:translateY(0);}
  .to-top:hover{transform:translateY(-3px); color:var(--gold); box-shadow:0 12px 24px rgba(48,66,88,0.34);}
  .to-top:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

  @media (prefers-reduced-motion: reduce){
    .modal{animation:none;}
    .reveal{opacity:1 !important; transform:none !important;}
    .reveal, .case-card, .case-card--clickable, .btn, .nav-links a, .contact-links a, .to-top{transition:none !important;}
    .case-card:hover, .case-card--clickable:hover, .btn:hover, .to-top:hover{transform:none !important; box-shadow:none !important;}
    .to-top.is-visible{transform:none !important;}
  }

  @media (max-width: 768px) {
    .wrap{padding:0 20px;}
    .hero{grid-template-columns:1fr; padding:24px 0 40px; gap:24px;}
    .hero > div:first-child{order:1;}
    .hero > div:last-child{order:2; max-width:100%;}
    h1{font-size:44px;}
    .subhead{max-width:100%;}
    .laptop-screen, .case-img{width:100%;}
    .svc-grid{grid-template-columns:1fr; gap:28px;}
    .case-top{flex-direction:column;}
    .big-stat{text-align:left; align-items:flex-start;}
    .stat-label{text-align:left; max-width:100%;}
    .marquee{margin:0 -20px;}
    nav{flex-wrap:wrap; gap:10px;}
    .nav-links{gap:16px; font-size:12px;}
    .modal-overlay{padding:0; align-items:flex-end;}
    .modal{padding:32px 24px 36px; border-radius:16px 16px 0 0; max-width:100%;}
    .modal-title{font-size:24px;}
  }