/* ---------- ORIGINAL CSS (kept intact from your file) ---------- */
  :root{
    --bg:#FFF7EF; --ink:#1B1B1B; --muted:#6B7280; --surface:#FFFFFF;
    --accent:#D70654; --mint:#00BFA6; --sun:#FFD166;
    --r:16px; --card-r:24px; --hairline:1px solid rgba(0,0,0,.06); --shadow:0 10px 26px rgba(0,0,0,.08);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}
  @media (pointer:fine){ body{ cursor:url("assets/cursor-robot-open.png") 12 12, auto } }
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  h1,h2,h3{margin:0 0 .6rem}
  h1{font-size:clamp(28px,6vw,48px);line-height:1.1}
  h2{font-size:clamp(22px,3.2vw,28px)}
  p{margin:.4rem 0 1rem}
  .skip{position:absolute;left:-9999px;top:auto}
  .skip:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 10px;border-radius:8px;z-index:999}

  /* Header */
  .site-header{position:sticky;top:0;z-index:60;-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);
    background:color-mix(in srgb, var(--surface) 78%, transparent);border-bottom:var(--hairline)}
  .wrap{max-width:1120px;margin:0 auto;padding:6px 14px}
  .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .brand img{height:clamp(36px,7vw,80px);width:auto;display:block}
  .controls{display:flex;gap:8px;align-items:center}
  .icon-btn{appearance:none;border:0;background:#fff;color:var(--ink);width:36px;height:36px;border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow);
    transition:transform .12s ease, background .2s ease}
  .icon-btn:hover{background:#FDF2F6}
  .icon-btn:active{transform:scale(.96)}
  .ic{display:none}
  .icon-btn[data-state="on"] .ic-on{display:block}
  .icon-btn[data-state="off"] .ic-off{display:block}
  /* Pulse if needs user interaction for autoplay */
  .icon-btn.needs-interaction{position:relative}
  .icon-btn.needs-interaction::after{content:"";position:absolute;inset:-4px;border-radius:14px;border:2px solid rgba(215,6,84,.45);animation:pulse 1.4s infinite}
  @keyframes pulse{0%{opacity:.5;transform:scale(.98)}70%{opacity:0;transform:scale(1.15)}100%{opacity:0}}

  
  /* Hamburger animation */
  .hamburger,.hamburger::before,.hamburger::after{content:"";display:block;width:18px;height:2px;background:currentColor;position:relative;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
  .hamburger::before{position:absolute;top:-6px}.hamburger::after{position:absolute;top:6px}
  .icon-btn[aria-expanded="true"] .hamburger{transform:rotate(45deg)}
  .icon-btn[aria-expanded="true"] .hamburger::before{transform:rotate(90deg) translateX(-6px)}
  .icon-btn[aria-expanded="true"] .hamburger::after{opacity:0}

  /* Drawer */
  .drawer{position:fixed;inset:0;pointer-events:none;z-index:55}
  .drawer .scrim{position:absolute;inset:0;background:#0006;opacity:0;transition:opacity .28s ease}
  .drawer .panel{position:absolute;top:0;right:0;width:min(340px,90vw);height:100%;background:#fff;border-left:var(--hairline);
    box-shadow:-20px 0 50px rgba(0,0,0,.08);transform:translateX(105%);transition:transform .36s cubic-bezier(.22,1,.36,1);
    padding:20px;display:flex;flex-direction:column;gap:10px}
  .drawer .panel h2{font-size:14px;text-transform:uppercase;letter-spacing:.18em;color:#9CA3AF;margin-bottom:6px}
  .drawer .panel a{padding:12px 10px;border-radius:12px;color:var(--ink);font-weight:600}
  .drawer .panel a:hover{background:#FDF2F6}
  .drawer.open{pointer-events:auto}.drawer.open .panel{transform:translateX(0)}.drawer.open .scrim{opacity:1}

  /* Hero */
  .hero{position:relative;max-width:1120px;margin:0 auto;padding:40px 14px 20px;min-height:clamp(520px,72vh,760px);
    display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:16px}
  @media (max-width:920px){ .hero{grid-template-columns:1fr; padding:18px} }
  .hero-copy .eyebrow{color:#8b6b52;font-weight:700;text-transform:uppercase;letter-spacing:.2px;font-size:12px}
  .hero .lede{color:var(--muted)}
  .cta-row{display:flex;gap:10px;margin-top:12px}
  .btn{display:inline-block;border:0;background:var(--accent);color:#fff;padding:12px 16px;border-radius:14px;font-weight:700;
    box-shadow:0 12px 26px rgba(215,6,84,.28);transition:transform .15s ease,box-shadow .2s ease}
  .btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(215,6,84,.36)}
  .btn.ghost{background:#fff;color:var(--ink);border:1px solid #eee}
  .btn-magnetic{position:relative;will-change:transform}
  /* Alpha video */
  .hero-media{position:absolute;inset:0;pointer-events:none}
  .hero-media video{position:absolute;right:max(2vw,20px);bottom:0;width:clamp(320px,46vw,720px);height:auto;object-fit:contain}

  /* Sections */
  .section{max-width:1120px;margin:36px auto;padding:0 14px}
  .section-head{margin-bottom:18px}
  .pills{display:flex;gap:8px;flex-wrap:wrap}
  .pill{background:#E7FAF5;color:#0b6b5f;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}
  .kicker{color:var(--muted);margin:.2rem 0 .4rem}

  /* ======== WORK: 4 cards (2 x 2), Aha interactions ======== */
  .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  @media (max-width:860px){.work-grid{grid-template-columns:1fr}}
  .work-card{
    --rx:0deg;--ry:0deg;--px:50%;--py:50%;
    position:relative;background:var(--surface);border-radius:var(--card-r);border:var(--hairline);box-shadow:var(--shadow);
    padding:18px 18px 22px;cursor:pointer;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
    transition:box-shadow .25s ease,transform .2s ease;will-change:transform;overflow:hidden
  }
  .work-card:hover{box-shadow:0 18px 44px rgba(0,0,0,.10)}
  .badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  .capsule{background:#dff4e9;color:#0b6b5f;padding:8px 12px;border-radius:999px;font-weight:700;font-size:12.5px}
  .work-card .title{font-size:clamp(22px,3.5vw,32px)}
  .work-card .desc{color:var(--muted);max-width:60ch;margin:.4rem 0 .6rem}
  .mock{position:relative;isolation:isolate;margin:10px 0 0}
  .work-card[data-device="mobile"] .mock{aspect-ratio:9/16;border-radius:22px}
  .work-card[data-device="laptop"] .mock{aspect-ratio:16/10;border-radius:18px}
  .mock img,.mock video{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;box-shadow:0 20px 40px rgba(0,0,0,.20)}
  /* Diagonal pose → upright on hover (echoes your screenshot) */
  .diagonal-left .mock img{transform:rotate(-8deg) translateY(8px);transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .diagonal-right .mock img{transform:rotate(6deg) translateY(8px); transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .work-card:hover .mock img{transform:rotate(-1deg) translateY(0)}
  /* Gradient frame + shine */
  .work-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(120deg,var(--accent) 0%,var(--sun) 45%,var(--mint) 100%);
    opacity:0;transition:opacity .35s ease}
  .work-card:hover::before{opacity:1}
  .work-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
    background:radial-gradient(460px 260px at var(--px) var(--py), rgba(255,255,255,.55), transparent 60%);
    opacity:0;transition:opacity .25s ease}
  .work-card:hover::after{opacity:.85}
  /* Glint trail pops on hover (Aha moment) */
  .work-card .glint{pointer-events:none;position:absolute;top:0;left:-40%;width:40%;height:100%;
    background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
    transform:skewX(-20deg);opacity:0}
  .work-card:hover .glint{animation:glint-slide .8s ease}
  @keyframes glint-slide{0%{opacity:0;left:-40%}10%{opacity:.9}100%{opacity:0;left:140%}}

  /* ======== FAQ ======== */
  .faq .section-head{display:flex;align-items:center;gap:12px}
  .chillbot{width:36px;height:36px;border-radius:50%;background:radial-gradient(#EAF6FF,#C5E7FF);position:relative;box-shadow:var(--shadow)}
  .chillbot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
  .bot-eye{position:absolute;left:50%;top:50%;width:10px;height:10px;background:#0ea5e9;border-radius:999px;transform:translate(-50%,-50%);animation:blink 4s infinite}
  @keyframes blink{0%,97%,100%{height:10px}98%{height:2px}}
  .faq-list{display:grid;gap:12px}
  .faq-item{background:#fff;border:var(--hairline);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
  .faq-item summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary svg{margin-left:auto;transition:transform .25s ease}
  .faq-item[open] summary svg{transform:rotate(180deg)}
  .answer{padding:12px 14px;border-top:var(--hairline);background:linear-gradient(#fff,#fff), radial-gradient(120px 60px at 10% -10%, #FFF1F7, transparent 60%);background-blend-mode:multiply}
  .typing{display:flex;gap:6px;height:18px;margin:.2rem 0}
  .typing span{width:6px;height:6px;background:#9ca3af;border-radius:50%;animation:dot 1.2s infinite ease-in-out}
  .typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
  @keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
  .faq-item .answer p{margin:.4rem 0 0;color:#374151}

  /* Footer */
  .site-footer{margin-top:40px;border-top:var(--hairline);background:#FFF1F7}
  .site-footer .wrap{max-width:1120px;margin:0 auto;padding:18px 14px;text-align:center}
  .site-footer .sig{color:#c22f62;font-style:italic;margin:.2rem 0}
  .site-footer .collab{color:#4b5563;margin:.2rem 0 .6rem}
  .links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .icon-btn span{margin-left:6px;font-size:14px;color:#333}
  .site-footer .rights{color:#777;font-size:13px}

  /* Toast */
  .toast{position:fixed;left:16px;bottom:16px;background:#111;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow);display:none;z-index:70}

  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(16px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .45s ease, transform .45s ease}

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
    .work-card{transform:none!important}
  }

  /* ---------- END ORIGINAL CSS ---------- */
  /* 1) Uniform work cards — force same aspect, keep images neat */
  .work-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height: 520px;
    transition: transform .22s ease, box-shadow .22s ease;
  }
  /* uniform rectangular mock/screenshot area; override inconsistent image sizes */
  .work-card .mock {
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
  }

  /* force images to cover and align center */
  .work-card .mock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
  }
  .work-card:hover .mock img { transform: scale(1.03) translateY(-6px); }

  /* reset heavy overlay gradients from earlier (safe) */
  .work-card::before, .work-card::after { opacity: 0 !important; }

  /* subtle accent border on hover (uses your --accent variable) */
  .work-card:hover { border-left: 4px solid var(--accent); transform: translateY(-6px); }

  /* glint (very subtle) */
  .work-card .glint {
    position:absolute; left:-30%; top:0; height:6px; width:40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    opacity:0; pointer-events:none;
  }
  .work-card:hover .glint { animation: glint 0.9s ease forwards; }
  @keyframes glint { 0%{left:-30%;opacity:0} 10%{opacity:1} 100%{left:140%;opacity:0} }

  /* 2) Playful cursor dot (non-intrusive) */
  .cursor-dot {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(215,6,84,0.95); /* uses your accent */
    box-shadow: 0 6px 20px rgba(215,6,84,0.14);
    transition: transform .12s ease, width .12s ease, height .12s ease, background .12s ease, opacity .18s ease;
    opacity: 0;
  }
  .cursor-dot.active { width: 18px; height: 18px; transform: translate(-50%,-50%) scale(1.02); opacity: 1; }
  .cursor-dot.btn-hover { background: rgba(215,6,84,1); width: 22px; height: 22px; box-shadow: 0 12px 30px rgba(215,6,84,0.18); }

  /* 3) Section enter highlight animation (micro animation when nav jump happens) */
  .section-highlight {
    animation: sectionPop .54s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 14px 44px rgba(215,6,84,0.06);
    border-radius: 14px;
  }
  @keyframes sectionPop {
    0% { transform: translateY(10px); opacity: 0.0; }
    40% { transform: translateY(0); opacity: 1; }
    100% { transform: none; opacity: 1; }
  }

  /* 4) Slight header polish (additive) */
  .site-header .brand-name { line-height:1; font-size:15px; margin-left:6px; }
  .icon-btn.needs-interaction { box-shadow: 0 8px 30px rgba(215,6,84,0.06); }

  /* 5) Smooth scroll already present via html { scroll-behavior: smooth } */

  /* 6) Responsive: hide fancy cursor on touch */
  @media (max-width:860px){ .work-card { max-height: none; } .cursor-dot { display: none; } }

/* PATCH: keep brand inline with logo (horizontal), centered vertically */
.brand {
  display: inline-flex;         /* horizontal layout */
  align-items: center;          /* vertical centering */
  gap: 10px;                    /* space between logo & name */
  text-decoration: none;
  vertical-align: middle;
}

.brand img {
  display: block;
  height: 48px;                 /* match the HTML height attribute */
  width: auto;
}

/* name styling — tweak to taste */
.brand-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* optional: hide name on very small screens to avoid layout issues */
@media (max-width: 420px) {
  .brand-name { display: none; }
}


/* put bg video inside hero but behind content */
.hero { position: relative; overflow: visible; }

/* ---- Hero video offset (non-destructive tweak) ---- */
#hero{ --video-shift-x: 90px; }            /* adjust this value to taste */

.hero-copy{ position: relative; z-index: 2; }   /* make sure copy sits above */
.hero-bg-video{ position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-bg-video video{
  position: absolute;
  bottom: 0;
  right: max(2vw, 20px);
  width: clamp(340px, 46vw, 760px);
  height: auto;
  object-fit: contain;
  transform: translateX(var(--video-shift-x));  /* >>> pushes video to the right */
  will-change: transform;
}

/* On narrower screens, reduce the shift so it doesn’t hang off-screen */
@media (max-width: 960px){
  #hero{ --video-shift-x: 24px; }
}


/* Make the wrapper anchor behave like a block and keep your card styling */
.work-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.work-link:focus-visible .work-card{
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, white 30%);
  outline-offset: 3px;
  border-radius: var(--card-r);
}

/* No underline on card links */
.work-link { text-decoration: none; color: inherit; display: block; }
.work-link * { text-decoration: none; }

/* Keep an accessible focus style for keyboard users */
.work-link:focus-visible .work-card { outline: 2px solid var(--accent); outline-offset: 4px; }

/* --- Card links: no underline, keep if you removed earlier --- */
.work-link{ text-decoration:none; color:inherit; display:block; }
.work-link:hover, .work-link:focus{ text-decoration:none; }

/* --- Smoother page transition (radial wipe) --- */
/* Your transition overlay MUST NOT capture clicks */
.page-wipe { 
  pointer-events: none;     /* <- important */
  position: fixed; inset: 0;
  z-index: 9999;
  opacity: 0; transform: scale(.98);
  transition: opacity .35s ease, transform .35s ease;
}

.page-wipe.in {
  opacity: 1; transform: none;
}

/* Just to be safe: the hero background video should not block clicks either */
.hero-bg-video { pointer-events: none; }

.site-footer{
    margin-top:40px;
    border-top: var(--hairline);
    background:
      radial-gradient(1200px 400px at 50% 0%, var(--footer-grad-a), transparent 60%),
      var(--footer-surface);
    color: var(--footer-ink);
  }
  .site-footer .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:24px 14px 36px;
    text-align:center;
  }
  .site-footer .sig{
    color: var(--footer-accent);
    font-style: italic;
    font-weight: 700;
    margin:.2rem 0 .2rem;
  }
  .site-footer .collab{
    color:#4b5563;
    margin:.2rem 0 1rem;
  }

  .site-footer .links{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin: 10px 0 14px;
  }
  .site-footer a{ text-decoration: none; } /* never show underlines in footer icons */

  .site-footer .icon-btn{
    appearance:none;
    border:0;
    background:#fff;
    width:44px; height:44px;
    display:grid; place-items:center;
    border-radius:14px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  }

  .site-footer .icon-btn:active{ transform: translateY(0); }

  /* Make sure clicks register on the <a>, not the inner SVG */
  .site-footer .links .icon-btn svg{ pointer-events:none; }

  .site-footer .rights{
    color: var(--footer-muted);
    font-size:13px;
    margin-top:8px;
  }