@font-face {
    font-family: 'SF Pro Text';
    src: url(../fonts/sf-pro-text.otf) format('opentype');
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
  }


  :root{
    --bg:#ffffff;
    --dot: rgba(21,23,28,0.09);
    --ink:#15171c;
    --muted:#71757d;
    --faint:#a8abb1;
    --primary:#126DFB;
    --primary-light:#3683FC;
    --accent:#126DFB;
    --card-bg:#ffffff;
    --card-border: rgba(15,17,25,0.08);
    --chip-bg:#f1f1ee;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --font-title:'Yeseva One', 'Fraunces', Georgia, serif;
    --font-body:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  }
  *{box-sizing:border-box;}
  html, body{
    height:100%; margin:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    background-image: radial-gradient(circle, var(--dot) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
  }
  a{color:inherit;}

  /* ---------- FIXED NAV ---------- */
  header.nav{
    position:fixed; bottom:0; left:0; right:0; padding-bottom:calc(var(--safe-b) + 60px); z-index:900;
    display:flex; justify-content:center;
    transition:transform .3s ease, opacity .3s ease;
  }
  header.nav.nav-hidden{ transform:translateY(140%); opacity:0; pointer-events:none; }
  .nav-bar{
    display:flex; align-items:center; gap:6px;
    background:var(--bg);
    border:1px solid var(--card-border);
    border-radius:999px;
    padding:8px 10px;
  }
  .nav-divider{
    width:1px; height:22px; background:var(--card-border);
    margin:0 4px; flex-shrink:0;
  }
  .nav-item{ position:relative; }
  .nav-btn{
    all:unset; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:500; color:#3D3D3D;
    background:var(--bg);
    padding:9px 16px;
    border-radius:999px;
    font-family:var(--font-body);
    transition:color .2s ease;
  }
  .nav-btn:hover{ color:var(--primary); }
  .nav-btn svg, .nav-btn svg path{ fill:currentColor; stroke:none; transition:transform .2s ease; flex-shrink:0; }
  .nav-btn:hover svg{ transform:scale(1.1); }
  .nav-links{ display:flex; gap:2px; align-items:center; }

  .nav-icons{ display:flex; gap:2px; align-items:center; }
  .icon-btn{
    all:unset; cursor:pointer;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#3D3D3D;
    transition:color .2s ease;
  }
  .icon-btn:hover{ color:var(--primary); }
  .icon-btn svg, .icon-btn svg path{ fill:currentColor; stroke:none; transition:transform .2s ease; flex-shrink:0; }
  .icon-btn:hover svg{ transform:scale(1.1); }

  /* plain-text hover hints under nav items — not styled as buttons */
  .nav-hint{
    position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(4px);
    margin-bottom:10px;
    width:max-content; max-width:120px; text-align:center;
    background:#fff; color:var(--ink);
    border:1px solid var(--card-border);
    font-size:11px; font-weight:500; line-height:1.4;
    padding:6px 10px; border-radius:8px;
    box-shadow:0 10px 24px -10px rgba(15,17,25,0.18);
    opacity:0; transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  .nav-hint::after{
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:5px solid transparent; border-top-color:#fff;
  }
  .nav-item:hover .nav-hint{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- caption pill, above the stack ---------- */
  .stage-caption{
    position:fixed; left:50%; transform:translateX(-50%);
    z-index:900;
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--muted); font-weight:500;
    white-space:nowrap;
  }
  .cap-arrow{
    all:unset; cursor:pointer; position:relative;
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    color:var(--faint);
    transition:background .15s ease, color .15s ease;
  }
  .cap-arrow:hover{ background:var(--chip-bg); color:var(--ink); }
  .cap-arrow svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .cap-arrow.is-hidden{ visibility:hidden; pointer-events:none; }
  .cap-arrow .cap-tip{
    position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(4px);
    margin-bottom:10px; width:max-content; max-width:180px;
    background:#1f2024; color:#fff;
    font-size:11.5px; line-height:1.4; font-weight:500; text-align:center;
    padding:8px 12px; border-radius:9px;
    box-shadow:0 10px 24px -10px rgba(15,17,25,0.4);
    opacity:0; transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  .cap-arrow .cap-tip::after{
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    border:5px solid transparent; border-top-color:#1f2024;
  }
  .cap-arrow:hover .cap-tip{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- STACK VIEWPORT ---------- */
  #stack-viewport{ position:fixed; left:0; right:0; touch-action:none; }

  #stack-viewport{ opacity:0; }
  #stack-viewport.ready{ opacity:1; }
  #stack-viewport.stack-enter{ animation:stack-enter .8s cubic-bezier(.22,.9,.32,1) both; }
  @keyframes stack-enter{
    from{ opacity:0; transform:translateY(-56px); }
    to{ opacity:1; transform:none; }
  }
  @media (max-width:700px){
    #stack-viewport.stack-enter{ animation-duration:.7s; }
  }
  @media (prefers-reduced-motion: reduce){
    #stack-viewport.stack-enter{ animation:none; }
  }
  .deck-card{
    position:absolute; left:50%;
    width:88vw; max-width:1000px;
    border-radius:24px;
    border:1px solid transparent;
    box-shadow:0 40px 90px -30px rgba(15,17,25,0.32);
    will-change:transform, opacity;
    backface-visibility:hidden;
    overflow:hidden;
    display:flex;
    transition:border-color .2s ease;
  }
  .deck-card:hover{ border-color:rgba(21,23,28,0.22); }


  /* ---- intro card ---- */
  .intro-card{
    background:var(--card-bg); border:1px solid var(--card-border);
    flex-direction:column; justify-content:center; align-items:center; text-align:center;
    padding: clamp(22px,4.5vh,56px) clamp(24px,6vw,88px);
    /* no position override here — .deck-card's position:absolute already
       provides the positioning context .hover-hint needs */
  }
  .intro-card h1{
    font-family:var(--font-title); font-weight:400;
    font-size:clamp(24px,3.6vw,50px); line-height:1.22;
    margin:0 0 clamp(14px,2.6vh,30px) 0; max-width:680px;
  }
  .intro-card h1 .accent{ color:var(--accent); }
  /* The card itself is centered, but the meta row's own text (role/org/label) stays
     left-aligned within each column rather than inheriting the card's centered text-align. */
  .meta-row{ text-align:left; }
  .meta-row{ display:flex; gap:clamp(24px,5vw,60px); flex-wrap:wrap; }
  .meta-label{ font-size:11.5px; color:var(--faint); margin-bottom:8px; }
  .meta-item{ display:flex; align-items:center; gap:11px; }
  .meta-icon{
    width:34px; height:34px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; border:1px solid var(--card-border);
  }
  .meta-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
  .meta-text .role{ font-size:13.5px; color:var(--ink); font-weight:500; line-height:1.4; }
  .meta-text .org{ font-size:12.5px; color:var(--muted); line-height:1.4; }

  .hover-hint{
    position:absolute; left:50%; bottom:20px; transform:translate(-50%,0);
    display:flex; align-items:center; gap:7px;
    font-size:14px; color:var(--muted);
    opacity:1;
    pointer-events:none;
  }
  .hover-hint svg{ width:13px; height:13px; stroke:var(--muted); fill:none; stroke-width:1.8; animation:bob 1.6s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }

  /* ---- project cards ---- */
  .case-card{ align-items:center; justify-content:center; text-align:center; padding:0 40px; }
  /* Wraps the blurred blobs + veil. Safari can fail to clip blurred children to the card's rounded
     corner (the card is a GPU layer with overflow:hidden), so they leak past the corner. This hard-clips
     them to the card's OUTER rounded shape (1px outset = the border). The card's own overflow:hidden
     still decides the visible edge, so normal rendering is pixel-identical. */
  .case-card .case-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    -webkit-clip-path:inset(-1px round 24px); clip-path:inset(-1px round 24px);
    isolation:isolate;
  }
  .case-card .blob{ position:absolute; border-radius:38% 62% 55% 45% / 45% 40% 60% 55%; filter:blur(4px); }
  .case-card .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.4) 100%); z-index:1; pointer-events:none; }
  .case-content{ position:relative; z-index:2; color:#f5f5f3; max-width:520px; }
  .case-kicker{ font-size:12.5px; color:rgba(245,245,243,.62); margin-bottom:14px; }
  .case-content h2{ font-family:var(--font-title); font-weight:400; font-size:clamp(24px,4vw,44px); margin:0 0 12px 0; line-height:1.12; }
  .case-content p{ font-size:14.5px; color:rgba(245,245,243,.78); margin:0 0 24px 0; }
  .case-cta{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#15171c; font-weight:600; font-size:13.5px; padding:11px 22px; border-radius:999px; text-decoration:none; transition:background .2s ease, color .2s ease; }
  .case-cta:hover{ background:var(--primary); color:#fff; }
  .case-cta:hover svg{ stroke:#fff; }
  .case-cta svg{ width:13px; height:13px; stroke:#15171c; stroke-width:2; fill:none; }

  .theme-blue{ background:linear-gradient(125deg,#040707 0%, #0b1414 42%, #040707 100%); }
  .theme-blue .b1{ width:60%; height:80%; left:-8%; top:6%; background:radial-gradient(circle at 35% 30%, #7a9494, #0d1717 70%); }
  .theme-blue .b2{ width:38%; height:46%; right:-4%; top:2%; background:radial-gradient(circle at 60% 40%, #527474, #091010 75%); opacity:.7; }

  .theme-purple{ background:linear-gradient(125deg,#06060f 0%, #12112a 45%, #06060f 100%); }
  .theme-purple .b1{ width:55%; height:70%; left:-6%; bottom:-10%; background:radial-gradient(circle at 40% 40%, #8e8dd5, #141430 70%); }
  .theme-purple .b2{ width:42%; height:50%; right:-6%; top:-4%; background:radial-gradient(circle at 55% 35%, #6b69c9, #0f0e22 75%); opacity:.7; }

  .theme-red{ background:linear-gradient(125deg,#030409 0%, #090a19 45%, #030409 100%); }
  .theme-red .b1{ width:58%; height:74%; right:-8%; top:-4%; background:radial-gradient(circle at 45% 35%, #7578a2, #0a0c1c 70%); }
  .theme-red .b2{ width:40%; height:48%; left:-6%; bottom:-8%; background:radial-gradient(circle at 50% 50%, #4a4e85, #080814 75%); opacity:.7; }

  .theme-teal{ background:linear-gradient(125deg,#05100f 0%, #06231f 45%, #04100e 100%); }
  .theme-teal .b1{ width:58%; height:74%; left:-8%; top:-4%; background:radial-gradient(circle at 45% 35%, #16b8a0, #063a32 72%); }
  .theme-teal .b2{ width:40%; height:48%; right:-6%; bottom:-8%; background:radial-gradient(circle at 50% 50%, #0e9488, #052722 75%); opacity:.7; }

  .theme-amber{ background:linear-gradient(125deg,#160f04 0%, #33230a 45%, #100b03 100%); }
  .theme-amber .b1{ width:58%; height:74%; right:-8%; top:-4%; background:radial-gradient(circle at 45% 35%, #f0b64f, #47320c 70%); }
  .theme-amber .b2{ width:40%; height:48%; left:-6%; bottom:-8%; background:radial-gradient(circle at 50% 50%, #d99a2d, #2a1e08 75%); opacity:.7; }

  .theme-slate{ background:linear-gradient(125deg,#0a0d10 0%, #1d2733 45%, #080a0c 100%); }
  .theme-slate .b1{ width:58%; height:74%; left:-8%; top:-4%; background:radial-gradient(circle at 45% 35%, #7c93a8, #1e2a36 70%); }
  .theme-slate .b2{ width:40%; height:48%; right:-6%; bottom:-8%; background:radial-gradient(circle at 50% 50%, #5a6f82, #10161c 75%); opacity:.7; }

  /* ---- contact card ---- */
  .contact-card{
    background:var(--card-bg); border:1px solid var(--card-border);
    flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:0 32px;
  }
  .contact-card .case-kicker{ color:var(--faint); margin-bottom:14px; }
  .contact-card h2{ font-family:var(--font-title); font-weight:400; font-size:clamp(24px,4.2vw,46px); margin:0 0 14px 0; color:var(--ink); }
  .contact-card p{ color:var(--muted); font-size:14.5px; max-width:420px; margin:0 0 26px 0; }
  .email-row{ display:flex; align-items:center; gap:9px; border:1px solid var(--card-border); padding:7px 7px 7px 18px; border-radius:999px; margin-bottom:22px; }
  .email-row > span{ font-size:14px; font-weight:500; color:var(--ink); }
  .copy-btn{
    display:flex; align-items:center; gap:6px;
    background:var(--primary); color:#fff; border:none;
    padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:600;
    font-family:var(--font-body); cursor:pointer; min-width:88px; justify-content:center;
  }
  .copy-btn svg{ width:12px; height:12px; stroke:#fff; stroke-width:2; fill:none; }
  .contact-icons{ display:flex; gap:10px; }
  .contact-icons a{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:transform .2s ease;
  }
  .contact-icons a:hover{ transform:translateY(-2px); }
  .contact-icons svg{ width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:1.7; }
  .contact-icons svg.filled{ fill:var(--ink); stroke:none; }

  .contact-links{ display:flex; gap:12px; }
  .ext-btn{
    display:inline-flex; align-items:center; gap:7px;
    border:1px solid var(--card-border); border-radius:999px;
    padding:10px 18px; font-size:13.5px; font-weight:500; color:var(--ink);
    text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .ext-btn svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
  .ext-btn:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }

  /* ---------- PAGES (Repo / About) ---------- */
  /* each page is now its own HTML document, so no show/hide toggling is needed */
  #page-repo, #page-about, #page-case-ruta{
    position:fixed; left:0; right:0; top:0; bottom:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .page-inner{
    max-width:1000px; margin:0 auto;
    padding:164px 40px 160px;
  }
  .page-title{
    font-family:var(--font-title); font-weight:400;
    font-size:clamp(28px,4vw,44px); margin:0 0 10px 0; color:var(--ink);
  }
  .page-lede{ color:var(--muted); font-size:15px; max-width:60ch; margin:0 0 40px 0; }

  .filter-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
  .chip{
    all:unset; cursor:pointer;
    padding:8px 16px; border-radius:999px;
    border:1px solid var(--card-border);
    font-size:13px; font-weight:500; color:var(--muted);
    font-family:var(--font-body);
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .chip:hover{ border-color:var(--ink); color:var(--ink); }
  .chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
  .repo-empty{ color:var(--muted); font-size:14px; padding:40px 0; }
  .section-label{
    font-size:13px; color:var(--faint); text-transform:none;
    margin:0 0 18px 0; padding-top:8px;
  }

  /* ---- repo grid ---- */
  .repo-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .repo-card{
    display:block; position:relative; text-decoration:none; color:inherit;
    border-radius:18px; overflow:hidden;
    border:1px solid var(--card-border); background:var(--card-bg);
    box-shadow:0 20px 40px -24px rgba(15,17,25,0.18);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .repo-card:hover{ transform:translateY(-3px); box-shadow:0 24px 48px -20px rgba(15,17,25,0.28); }

  .repo-card-media{
    position:relative; height:190px; overflow:hidden;
    display:flex; align-items:center; justify-content:center; padding:22px;
  }
  .repo-card-media .mockup{
    width:100%; max-width:260px; background:#fff; border-radius:10px;
    box-shadow:0 24px 40px -14px rgba(15,17,25,0.28);
    overflow:hidden; transform:rotate(-1.4deg);
  }
  .repo-card-media .mockup-bar{ height:20px; background:var(--mockup-accent,#ccc); display:flex; align-items:center; gap:4px; padding:0 9px; }
  .repo-card-media .mockup-bar span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.65); }
  .repo-card-media .mockup-body{ padding:13px; display:flex; flex-direction:column; gap:7px; }
  .repo-card-media .mockup-line{ height:7px; border-radius:4px; background:#ecebe8; }

  .theme-pastel-blue{ background:linear-gradient(135deg, #eff2f2 0%, #dae1e1 100%); --mockup-accent:#a3b5b5; }
  .theme-pastel-purple{ background:linear-gradient(135deg, #f1f1fa 0%, #e0dff3 100%); --mockup-accent:#b1b0e2; }
  .theme-pastel-red{ background:linear-gradient(135deg, #eeeef4 0%, #d9dae5 100%); --mockup-accent:#9fa1bf; }
  .theme-pastel-teal{ background:linear-gradient(135deg, #ecf6f5 0%, #d4ecea 100%); --mockup-accent:#93cfc9; }
  .theme-pastel-amber{ background:linear-gradient(135deg, #fcf7ee 0%, #f8edd9 100%); --mockup-accent:#eed2a0; }
  .theme-pastel-slate{ background:linear-gradient(135deg, #f2f3f5 0%, #e1e5e8 100%); --mockup-accent:#b5bec7; }

  .repo-card-body{ padding:20px 20px 22px; }
  .repo-card-kicker{ font-size:11px; color:var(--faint); margin-bottom:8px; }
  .repo-card h3{ font-family:var(--font-body); font-weight:700; font-size:18px; margin:0 0 7px 0; color:var(--ink); }
  .repo-card p{ font-size:13.5px; color:var(--muted); margin:0 0 16px 0; line-height:1.5; }
  .repo-card-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .repo-card-tags span{
    font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    color:var(--muted); background:var(--chip-bg); padding:6px 12px; border-radius:999px;
  }

  .repo-card-external{
    position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
    background:#fff; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(4px);
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 10px 20px -8px rgba(15,17,25,0.35);
  }
  .repo-card:hover .repo-card-external{ opacity:1; transform:translateY(0); }
  .repo-card-external svg{ width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:2; }

  /* ---- about page ---- */
  .about-section{ margin-bottom:130px; }
  .about-inner{ max-width:800px; }

  /* Logos: bigger, tilted, white "card" treatment (border+shadow+padding) so a
     white-background logo still reads clearly against the page, and a scroll-reveal
     fade+rise the first time each one comes into view. */
  .about-inline-logo, .about-logo-grid-item{
    opacity:0; transition:opacity .6s ease;
  }
  .about-inline-logo.in-view, .about-logo-grid-item.in-view{
    opacity:1;
  }
  .about-inline-logo .logo-float, .about-logo-grid-item .logo-float{
    display:block; width:100%; height:100%; box-sizing:border-box;
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 20px 36px -14px rgba(15,17,25,.5), 0 6px 14px -6px rgba(15,17,25,.28);
    animation:logo-bob var(--dur, 3.4s) ease-in-out infinite;
    animation-delay:var(--delay, 0s);
    transform:rotate(var(--tilt, 0deg));
  }
  @keyframes logo-bob{
    0%,100%{ transform:translateY(0) rotate(var(--tilt, 0deg)); }
    50%{ transform:translateY(calc(-6px - 3px * var(--bob, 1))) rotate(var(--tilt, 0deg)); }
  }
  .about-inline-logo img, .about-logo-grid-item img{
    width:100%; height:100%; object-fit:contain; display:block;
  }

  /* small logo beside a paragraph, left or right — bigger + tilted */
  .about-icon-row{ display:flex; align-items:flex-start; gap:18px; }
  .about-icon-row.icon-right{ flex-direction:row-reverse; }
  .about-icon-row .about-body{ flex:1; min-width:0; }
  .about-inline-logo{ flex-shrink:0; width:64px; height:64px; margin-top:2px; }

  /* client-project logos beside a paragraph — scattered, tilted, not a uniform grid */
  .about-logo-grid-row{ display:flex; align-items:flex-start; gap:20px; }
  .about-logo-grid-row .about-body{ flex:1; min-width:0; }
  .about-logo-grid{ flex-shrink:0; position:relative; width:170px; height:150px; margin-top:2px; }
  .about-logo-grid-item{ position:absolute; width:56px; height:56px; }
  .about-logo-grid-item.lg1{ left:0; top:0; --tilt:-7deg; }
  .about-logo-grid-item.lg2{ left:100px; top:10px; --tilt:5deg; }
  .about-logo-grid-item.lg3{ left:10px; top:88px; --tilt:6deg; }
  .about-logo-grid-item.lg4{ left:108px; top:94px; --tilt:-5deg; }

  /* closing call-to-action section — "Say hi" merged inline, no accent color/underline */
  .about-closing p{ font-family:var(--font-body); font-size:15.5px; line-height:1.75; color:var(--muted); margin:0; max-width:62ch; }
  .about-closing p strong{ font-weight:700; color:var(--ink); }
  .about-closing a{ font-family:var(--font-body); font-weight:400; color:var(--primary); text-decoration:underline; }

  @media (max-width:640px){
    .about-icon-row, .about-icon-row.icon-right{ flex-direction:column; }
    .about-logo-grid-row{ flex-direction:column; }
  }

  .about-title{ font-family:var(--font-title); font-weight:400; font-size:38px; color:var(--ink); margin:0 0 24px 0; }
  .about-subheading{
    font-family:var(--font-title); font-weight:400; font-size:21px;
    color:var(--ink); margin:0 0 20px 0;
  }

  .about-body p{
    font-family:var(--font-body); font-size:15.5px; line-height:1.75;
    color:var(--muted); margin:0 0 16px 0;
  }
  .about-body p:last-child{ margin-bottom:0; }
  

  /* ---- section 1: text with a small overlapping photo-duo floating beside it ---- */
  .about-lead-row{ display:flex; align-items:flex-start; gap:40px; }
  .about-lead-row .about-body{ flex:1; min-width:0; }

  /* ---- "outside of work": alternating photo-duo / text rows ---- */
  .about-alt-row{ display:flex; align-items:center; gap:40px; margin-bottom:36px; }
  .about-alt-row.reverse{ flex-direction:row-reverse; }
  .about-alt-row .about-body{ flex:1; min-width:0; }
  .about-alt-row .about-body h4{ font-family:var(--font-body); font-weight:600; font-size:15.5px; margin:0 0 6px 0; color:var(--ink); }

  /* small overlapping photo-duo (compact, front card over back card) */
  .photo-duo{ position:relative; width:210px; height:150px; flex-shrink:0; }
  .photo-duo .photo-card{ width:120px; height:120px; }
  .photo-duo .photo-card.d1{ left:0; top:22px; transform:rotate(-7deg); z-index:1; }
  .photo-duo .photo-card.d2{ left:88px; top:0; transform:rotate(5deg); z-index:2; }

  .photo-card{
    position:absolute; background:#fff; padding:8px;
    border-radius:18px; box-shadow:0 18px 36px -18px rgba(15,17,25,0.3);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .photo-card-inner{ width:100%; height:100%; border-radius:12px; background:var(--chip-bg); overflow:hidden; }

  /* uniform 3-column photo row — equal size, no rotation, evenly spaced (section 1) */
  .photo-row{ display:flex; gap:12px; width:100%; margin-bottom:32px; }
  .photo-row .photo-card{
    position:static; flex:1; min-width:0; aspect-ratio:1/1; width:auto; height:auto; transform:none;
  }

  .about-org-float{
    position:absolute; width:48px; height:48px; border-radius:13px; overflow:hidden;
    border:3px solid #fff; box-shadow:0 14px 28px -10px rgba(15,17,25,0.35);
    z-index:6;
  }
  .about-org-float img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* moving carousel — straight-aligned photos, auto-scrolling loop (outside of work) */
  .photo-carousel{ width:100%; margin-top:28px; }
  .photo-carousel-track{ display:flex; gap:14px; width:100%; }
  .photo-carousel-track .photo-card{ position:static; flex:1; min-width:0; aspect-ratio:1/1; width:auto; height:auto; transform:none; }

  @media (max-width:820px){
    .about-lead-row{ flex-direction:column; gap:24px; }
    .about-alt-row, .about-alt-row.reverse{ flex-direction:column; align-items:flex-start; gap:20px; }
  }
  /* ---- two-column sections: image slot 50% / text 50%, alternating sides ---- */
  .about-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .about-split.reverse .about-media{ order:2; }
  .about-media-frame{
    width:100%; aspect-ratio:4/3; background:#fff; padding:8px; border-radius:18px;
    box-shadow:0 18px 36px -18px rgba(15,17,25,0.3); box-sizing:border-box;
  }
  .about-media-frame-inner{ width:100%; height:100%; border-radius:12px; background:var(--chip-bg); overflow:hidden; }
  .about-media-frame-inner img{ width:100%; height:100%; object-fit:cover; display:block; }
  .about-split .about-logo-grid-row{ flex-direction:column; gap:14px; }
  .about-split .about-icon-row + .about-icon-row{ margin-top:20px; }

  /* ---- intro: title on top, text left, tilted photo cluster right ---- */
  .about-intro-title{ font-family:var(--font-title); font-weight:400; font-size:46px; line-height:1.1; color:var(--ink); margin:0 0 36px 0; }
  .about-intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
  .about-intro-grid > .about-reveal:nth-child(2){ transition-delay:.12s; }
  .about-intro .about-body p strong{ color:#5a5f67; }
  .intro-cluster{ position:relative; width:100%; max-width:380px; aspect-ratio:1/0.95; margin-left:auto; }
  .intro-photo{
    position:absolute; background:#fff; padding:5px; border-radius:14px; box-sizing:border-box;
    box-shadow:0 14px 30px -14px rgba(15,17,25,.35), 0 0 0 1px rgba(15,17,25,.05);
  }
  .intro-photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:10px; }
  .intro-photo.ip-board{ left:0; bottom:2%; width:47%; aspect-ratio:5/4; transform:rotate(-9deg); z-index:1; }
  .intro-photo.ip-grad{ left:27%; top:15%; width:44%; aspect-ratio:3/4; transform:rotate(-4deg); z-index:2; }
  .intro-photo.ip-grad img{ object-position:50% 50%; }
  .intro-photo.ip-ruta{ right:0; top:0; width:36%; aspect-ratio:3/4; transform:rotate(3deg); z-index:3; }
  .intro-photo.ip-ruta img{ object-position:50% 30%; }
  .intro-bubble{
    position:absolute; left:0; top:34%; z-index:4; background:#fff; border:1px solid var(--card-border);
    border-radius:14px; padding:9px 14px; font-family:var(--font-body); font-size:12.5px; font-weight:500;
    color:var(--ink); white-space:nowrap; box-shadow:0 10px 22px -10px rgba(15,17,25,.3);
  }
  .intro-hearts{ position:absolute; right:1%; bottom:3%; z-index:4; display:flex; align-items:flex-end; gap:4px; }
  .intro-heart{
    display:block; fill:#c4d8f7; cursor:default;
    transition:transform .3s cubic-bezier(.3,1.5,.5,1), fill .3s ease;
  }
  .intro-heart.h1{ width:20px; height:20px; transform:rotate(-14deg); }
  .intro-heart.h2{ width:13px; height:13px; transform:rotate(12deg); margin-bottom:12px; }
  .intro-heart.h1:hover{ transform:rotate(-14deg) scale(1.8); fill:#126DFB; }
  .intro-heart.h2:hover{ transform:rotate(12deg) scale(1.9); fill:#126DFB; }
  @media (max-width:700px){
    .about-intro-title{ font-size:36px; margin-bottom:24px; }
    .about-intro-grid{ grid-template-columns:1fr; gap:28px; }
    .intro-cluster{ margin-left:0; max-width:340px; }
  }


  /* ---- doodle character accents: float continuously + fade/rise in on first scroll ---- */
  .doodle-reveal{ display:inline-block; }
  .doodle-float{ display:block; }
  .doodle-float img{ display:block; height:64px; width:auto; }
  @keyframes doodle-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
  @media (prefers-reduced-motion: reduce){ .doodle-float{ animation:none; } }

  /* ---- About hero: doodle + title, text below, photo pair beside ---- */
  .about-hero-row{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
  .about-hero-head{ display:flex; align-items:flex-end; gap:6px; margin-bottom:18px; }
  .about-hero-head .doodle-float img{ height:98px; }
  .about-title{ font-family:var(--font-title); font-weight:400; font-size:42px; color:var(--ink); margin:0; }
  .about-hero-photos{ position:relative; width:260px; height:225px; margin-left:auto; margin-top:82px; }
  .hero-photo{ position:absolute; background:#fff; padding:5px; border-radius:14px; box-sizing:border-box; box-shadow:0 14px 30px -14px rgba(15,17,25,.35), 0 0 0 1px rgba(15,17,25,.05); }
  .hero-photo .about-media-frame-inner{ width:100%; height:100%; border-radius:10px; background:var(--chip-bg); overflow:hidden; }
  .hero-photo.hp1{ left:0; top:0; width:180px; height:180px; transform:rotate(-10.77deg); z-index:1; }
  .hero-photo.hp2{ right:0; bottom:0; width:160px; height:160px; transform:rotate(9.95deg); z-index:2; }

  /* ---- section heading with a doodle walking/sitting/standing beside it ---- */
  .about-heading-row{ display:flex; align-items:flex-end; gap:10px; margin-bottom:22px; }
  .about-heading-row .about-subheading{ margin:0; }
  .about-heading-row .doodle-float{ display:block; height:74px; width:auto; max-height:74px; }
  .about-heading-row .doodle-float img{ height:74px; max-height:74px; width:auto; max-width:100px; display:block; }
  @media (max-width:700px){
    .about-heading-row .doodle-float{ height:52px; max-height:52px; }
    .about-heading-row .doodle-float img{ height:52px; max-height:52px; max-width:75px; }
  }

  /* ---- straight-line carousel: sharp corners, faded ends, caption, slows on hover ---- */
  .strip-carousel{
    --speed:42s; overflow:hidden; width:100%; margin-top:32px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .strip-track{ display:flex; gap:6px; width:max-content; animation:strip-scroll var(--speed) linear infinite; }
  .strip-item{ flex-shrink:0; width:170px; position:relative; }
  .strip-photo{ width:170px; height:170px; border-radius:0; background:var(--chip-bg); overflow:hidden; }
  .strip-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .strip-caption{
    position:absolute; left:0; right:0; bottom:0; margin:0; padding:8px 10px;
    font-family:var(--font-body); font-size:11.5px; color:#fff;
    background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
    opacity:0; transition:opacity .2s ease; pointer-events:none;
  }
  .strip-item:hover .strip-caption{ opacity:1; }
  .strip-carousel:has(.strip-item:hover) .strip-track{ animation-play-state:paused; }
  @keyframes strip-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .strip-track{ animation:none; } }

  @media (max-width:700px){
    .about-hero-row{ grid-template-columns:1fr; gap:28px; }
    .about-hero-photos{ margin:0 auto; max-width:280px; }
    .about-title{ font-size:34px; }
    .about-logo-grid{ width:608px !important; max-width:none !important; left:50%; margin:56px 0 0 -304px !important; transform:scale(var(--logo-scale, 0.6)); transform-origin:top center; margin-bottom:calc(-210px * (1 - var(--logo-scale, 0.6))) !important; }
  }

  /* appear-on-scroll */
  .about-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
  .about-reveal.in-view{ opacity:1; transform:none; }
  .about-split .about-text.about-reveal{ transition-delay:.12s; }

  @media (max-width:700px){
    .about-split{ grid-template-columns:1fr; gap:24px; }
    .about-split.reverse .about-media{ order:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .about-inline-logo, .about-logo-grid-item, .about-reveal{ opacity:1; transform:none; transition:none; }
  }

  .skyline-wrap{ position:relative; margin-top:4px; }
  .skyline-svg{ width:100%; height:auto; display:block; color:var(--ink); }
  .skyline-hotspots{ position:absolute; inset:0; display:flex; }
  .skyline-hotspot{
    all:unset; cursor:pointer; position:relative;
    flex:1; height:100%;
  }
  .skyline-card{
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%) translateY(-6px);
    width:210px; text-align:left;
    background:#fff; border:1px solid var(--card-border);
    border-radius:14px; padding:12px;
    box-shadow:0 20px 40px -18px rgba(15,17,25,0.25);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:5;
  }
  .skyline-hotspot:hover .skyline-card,
  .skyline-hotspot:focus-visible .skyline-card{
    opacity:1; transform:translateX(-50%) translateY(4px); pointer-events:auto;
  }
  .skyline-card-img{
    display:block; width:100%; height:88px; border-radius:9px;
    background:var(--chip-bg); margin-bottom:10px;
  }
  .skyline-card-name{ display:block; font-family:var(--font-title); font-weight:400; font-size:14.5px; color:var(--ink); margin-bottom:3px; }
  .skyline-card-years{ display:block; font-size:11px; color:var(--faint); margin-bottom:6px; }
  .skyline-card-text{ display:block; font-size:12px; line-height:1.5; color:var(--muted); }
  @media (max-width:640px){
    .skyline-card{ width:170px; }
  }

  .timeline{
    display:flex; flex-direction:column;
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
    padding:4px 20px;
  }
  .timeline-item{
    display:flex; align-items:flex-start; gap:16px;
    padding:18px 0;
    border-top:1px solid var(--card-border);
  }
  .timeline-item:first-child{ border-top:none; }
  .timeline-icon{
    width:40px; height:40px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; border:1px solid var(--card-border);
  }
  .timeline-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
  .timeline-body{ flex:1; min-width:0; }
  .timeline-role{ font-size:14.5px; color:var(--ink); font-weight:500; }
  .timeline-org{ font-size:12.5px; color:var(--muted); margin-top:1px; }
  .timeline-desc{ font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6; }
  .timeline-focus{ font-size:12px; color:var(--faint); margin-top:8px; }
  .timeline-focus b{ font-weight:600; color:var(--muted); }
  .timeline-date{ font-size:13px; color:var(--faint); white-space:nowrap; padding-top:2px; }

  /* ---------- CASE STUDY PAGE ---------- */
  #page-case-ruta{ background:#fff; }

  .case-hero{ padding-top:56px; text-align:center; }
  .case-hero-text{ max-width:780px; margin:0 auto; padding:0 40px 40px; }
  .case-title{
    font-family:var(--font-body); font-weight:600;
    font-size:15px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); margin:0 0 18px 0;
  }
  .case-study-sub{
    font-family:var(--font-title); font-weight:400;
    font-size:clamp(28px,4vw,44px); line-height:1.3;
    color:var(--ink); margin:0;
  }

  .case-meta-row{
    display:flex; flex-wrap:wrap; gap:40px;
    padding:24px 0;
    border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);
    margin-bottom:28px;
  }
  .case-meta-item{ display:flex; flex-direction:column; gap:5px; }
  .case-meta-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
  .case-meta-value{ font-size:14px; font-weight:500; color:var(--ink); }

  .case-hero-image{
    width:100%; aspect-ratio:21/9; margin-top:8px;
    background:var(--chip-bg); border-top:1px dashed var(--card-border); border-bottom:1px dashed var(--card-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--faint); font-size:13px;
  }

  .case-body{ padding-top:56px; }
  .case-body-inner{
    max-width:1200px; margin:0 auto; padding:0 40px calc(160px + 60vh);
    display:flex; align-items:flex-start; gap:64px;
  }

  .case-toc{ width:190px; flex-shrink:0; position:sticky; top:48px; display:flex; flex-direction:column; }
  .case-back{
    display:inline-flex; align-items:center; gap:7px; margin-bottom:24px;
    font-family:var(--font-body); font-size:14px; color:var(--faint); text-decoration:none;
    transition:color .18s ease;
  }
  .case-back:hover{ color:var(--ink); }
  .case-back svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
  .case-toc nav{ position:relative; padding-left:20px; }
  .case-toc nav::before{
    content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--card-border);
  }
  .toc-link{
    position:relative; display:block; padding:11px 0;
    font-family:var(--font-body); font-size:15px; color:var(--faint); text-decoration:none; line-height:1.3;
    transition:color .18s ease;
  }
  .toc-link::before{
    content:''; position:absolute; left:-20px; top:11px; bottom:11px; width:2px;
    background:transparent; transition:background .18s ease;
  }
  .toc-link:hover{ color:var(--muted); }
  .toc-link.active{ color:var(--ink); font-weight:600; }
  .toc-link.active::before{ background:var(--ink); }

  .case-content-col{ flex:1; min-width:0; max-width:800px; }

  .case-template-note{
    display:flex; gap:10px; align-items:flex-start;
    padding:14px 16px; margin-bottom:48px;
    border:1px dashed var(--card-border); border-radius:12px;
    background:var(--chip-bg); color:var(--muted); font-size:13px; line-height:1.55;
  }
  .case-template-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke:var(--faint); fill:none; stroke-width:1.8; }

  .case-section{ margin-bottom:64px; scroll-margin-top:48px; }
  .case-section h2{ font-family:var(--font-body); font-weight:700; font-size:clamp(22px,3vw,28px); margin:0 0 16px 0; color:var(--ink); }
  .case-section p{ font-family:var(--font-body); font-size:15.5px; line-height:1.75; color:var(--muted); margin:0 0 16px 0; }
  .case-section ul{ font-family:var(--font-body); margin:0 0 16px 0; padding-left:20px; color:var(--muted); font-size:15.5px; line-height:1.75; }
  .case-section li{ margin-bottom:8px; }
  .case-section li::marker{ color:var(--primary); }

  .case-img-placeholder{
    width:100%; aspect-ratio:16/9; margin:20px 0 8px;
    border-radius:16px; background:linear-gradient(155deg, var(--chip-bg) 0%, rgba(18,109,251,0.06) 100%);
    display:flex; align-items:center; justify-content:center;
    color:var(--faint); font-size:13px; text-align:center; padding:16px;
  }

  .case-metrics{ display:flex; flex-wrap:wrap; gap:40px; margin:24px 0 8px; }
  .case-metric-value{ font-family:var(--font-body); font-weight:700; font-size:clamp(30px,4vw,44px); color:var(--primary); line-height:1; }
  .case-metric-label{ font-size:12.5px; color:var(--muted); margin-top:8px; }

  .case-section h3{ font-family:var(--font-body); font-weight:700; font-size:18px; margin:40px 0 14px 0; color:var(--ink); }
  .case-section h4{ font-family:var(--font-body); font-weight:600; font-size:15.5px; margin:0 0 6px 0; color:var(--ink); }
  .case-eyebrow{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--primary); margin:0 0 10px 0; }

  .case-role-grid, .case-3col{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:20px; }
  .case-role-item .case-role-label{ font-weight:600; font-size:14px; color:var(--ink); margin-bottom:10px; }

  .case-overview-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:32px; }
  .case-overview-item{ padding:20px; border:1px solid var(--card-border); border-radius:14px; }
  .case-overview-item p{ font-size:14px; margin:0; }

  .case-principles-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:24px; }
  .case-principle{ padding:20px; border:1px solid var(--card-border); border-radius:14px; }
  .case-principle-num{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--primary); margin-bottom:10px; }
  .case-principle h4{ margin:0 0 8px 0; }
  .case-principle p{ font-size:14px; margin:0; }

  .case-decision{ margin:24px 0; padding-left:18px; border-left:2px solid var(--card-border); }
  .case-decision p{ margin:0 0 12px 0; }

  .case-outcome{
    margin:28px 0 8px; padding:18px 20px;
    background:var(--chip-bg); border-radius:14px;
  }
  .case-outcome-label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--primary); margin-bottom:8px; }
  .case-outcome p{ font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--ink); margin:0; }

  .case-section{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .case-section.in-view{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .case-section{ opacity:1; transform:none; transition:none; }
  }

  @media (max-width:640px){
    .case-role-grid, .case-3col, .case-overview-grid, .case-principles-grid{ grid-template-columns:1fr; }
  }

  @media (max-width:900px){
    .repo-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:820px){
    .case-body-inner{ flex-direction:column; gap:0; }
    .case-toc{
      position:sticky; top:0; z-index:5;
      width:100%; margin-bottom:36px; padding:14px 0;
      background:#fff;
      border-bottom:1px solid var(--card-border);
    }
    .case-toc nav{ display:flex; gap:4px; overflow-x:auto; padding-left:0; }
    .case-toc nav::before{ display:none; }
    .case-back{ margin-bottom:10px; }
    .toc-link{ white-space:nowrap; padding:8px 12px; }
    .toc-link::before{ left:0; right:0; top:auto; bottom:0; height:2px; width:auto; }
    .case-content-col{ max-width:none; }
  }
  @media (max-width:640px){
    .page-inner{ padding:90px 16px 60px; }
    .repo-grid{ grid-template-columns:1fr; }
    .timeline-item{ flex-wrap:wrap; }
    .timeline-date{ width:100%; padding-left:54px; }
    .case-hero-text{ padding:0 20px 24px; }
    .case-body-inner{ padding:0 20px calc(160px + 60vh); }
    .case-meta-row{ gap:20px; }
  }

  @media (max-width:700px){
    .deck-card{ width:92vw; }
    .nav-bar{ padding:6px 8px; gap:2px; }
    .case-card{ padding:0 22px; }
    .nav-links{ gap:2px; }
    .nav-icons{ gap:2px; }
    .nav-btn{ padding:8px 10px; }
    .nav-btn .btn-label{ display:none; }
    .nav-btn.active{ color:var(--primary); }
    .icon-btn{ width:38px; height:38px; }
    .nav-hint{ display:none; }
    header.nav{ padding-bottom:calc(var(--safe-b) + 22px); }
  }