/* Base styles — layout, components, typography, colors */

/* Global font override: Poppins Medium everywhere, no italics */
  *, *::before, *::after{
    font-family:'Poppins', sans-serif !important;
    font-weight:500 !important;
    font-style:normal !important;
  }
  :root{
    --gameart-hammer-bg: url('../assets/images/2828c5ea1565a0f9.jpg');
    --bg:#FAFAF8;
    --ink:#111111;
    --grey:#7A7A7A;
    --gold:#2F6FED;
    --gold-soft: rgba(47,111,237,0.14);
    --card-bg:#ffffff;
    --card-border: rgba(17,17,17,0.06);
    --shadow-soft: 0 30px 60px -20px rgba(17,17,17,0.14), 0 8px 20px -8px rgba(17,17,17,0.08);
    --shadow-lift: 0 45px 90px -25px rgba(17,17,17,0.22), 0 15px 35px -10px rgba(47,111,237,0.18);
    --radius-card: 26px;
    --radius-shell: 32px;
    --ease-premium: cubic-bezier(.16,.84,.28,1);
    --vh: 1vh;
    color-scheme: light;
    --bg:#EEF3FC;
    --bg-2:#F8FBFF;
    --cloud-blue-1: rgba(47,111,237,0.28);
    --cloud-blue-2: rgba(120,168,255,0.24);
    --cloud-blue-3: rgba(150,190,255,0.18);
    --cloud-white: rgba(255,255,255,0.95);
  }
  [data-theme="dark"]{
    --bg:#0D0D0C;
    --ink:#F3F1EC;
    --grey:#A3A199;
    --card-bg:#17170F;
    --card-border: rgba(243,241,236,0.08);
    --shadow-soft: 0 30px 60px -20px rgba(0,0,0,0.55);
    --shadow-lift: 0 45px 90px -25px rgba(0,0,0,0.6), 0 15px 35px -10px rgba(47,111,237,0.22);
    color-scheme: dark;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* Safety net: any <img> without its own explicit width/height (most here
     already use object-fit:cover with 100% dimensions) still can't force
     horizontal overflow on narrow screens. */
  img{ max-width:100%; height:auto; }
  /* scroll-behavior:smooth was removed on purpose: it fights GSAP ScrollTrigger's pinned
     sections and was the main cause of the page feeling "stuck" / skipping sections when
     scrolling back up. Anchor/button scrolls below now use GSAP's own smooth scrollTo. */
  html{background:var(--bg);}
  body{
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    color:var(--ink);
    font-family:'Sora', sans-serif;
    overflow-x:hidden;
    transition: background .5s var(--ease-premium), color .5s var(--ease-premium);
  }
  [data-theme="dark"] body{ background:var(--bg); }
  ::selection{ background: var(--gold-soft); color: var(--ink); }
  .display{ font-family:'Fraunces', serif; }
  .hero-heading, .about-heading, .test-heading, .projects-heading,
  .services-heading, .contact-heading, .tools-heading{
    font-family:'Fraunces', serif; font-style:italic; font-optical-sizing:auto;
  }
  a{color:inherit; text-decoration:none;}
  .gold{ color:var(--gold); font-weight:700 !important; }
  /* "& Concept Art." in the Game Art heading — matched to the page/game background
     so it reads as a cut-out against the glass panel behind it, instead of gold. */
  .gold-bg-match{ color:#9C8168; transition: color .5s var(--ease-premium); }

    /* Make the Game Art heading use black text in dark mode; leave the
      inner `.gold-bg-match` color unchanged so "Concept Art" keeps its tone */
    [data-theme="dark"] .gameart-heading{ color: #000000; }

  /* Ensure nav text remains readable on very small screens */
  .nav-links a, .mobile-nav-links a{ white-space:normal; }

  /* ---------- Ambient background: bluish-white cloudy, drifting motion ---------- */
  .ambient{
    position:fixed; inset:-10% -10% -10% -10%; z-index:0; pointer-events:none;
    background:
      radial-gradient(38vw 38vw at 15% 12%, var(--cloud-blue-1), transparent 62%),
      radial-gradient(46vw 46vw at 88% 8%, var(--cloud-white), transparent 58%),
      radial-gradient(42vw 42vw at 78% 78%, var(--cloud-blue-2), transparent 60%),
      radial-gradient(50vw 50vw at 8% 85%, var(--cloud-white), transparent 55%),
      radial-gradient(60vw 60vw at 50% 45%, var(--cloud-blue-3), transparent 65%);
    background-repeat:no-repeat;
    background-size:180% 180%;
    filter:blur(6px) saturate(115%);
    opacity:.95;
    animation: cloudDrift 34s ease-in-out infinite alternate;
    transition: opacity .5s;
  }
  @keyframes cloudDrift{
    0%{ background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
    25%{ background-position: 8% 6%, 92% 10%, 88% 92%, 10% 90%, 55% 42%; }
    50%{ background-position: 4% 14%, 96% 4%, 94% 86%, 4% 96%, 45% 55%; }
    75%{ background-position: 12% 2%, 86% 14%, 92% 96%, 14% 84%, 52% 48%; }
    100%{ background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
  }
  [data-theme="dark"] .ambient{
    background:
      radial-gradient(600px circle at 20% 10%, var(--gold-soft), transparent 60%),
      radial-gradient(700px circle at 85% 30%, rgba(47,111,237,0.08), transparent 55%);
    background-size:auto; filter:none; opacity:.9; animation:none;
  }
  
  .noise{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,4vw,56px);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border-bottom:1px solid var(--card-border);
  }
  .logo{ display:flex; align-items:center; }
  .logo img{ height:38px; width:auto; display:block; }
  .nav-links{ display:flex; gap:2.4rem; list-style:none; }
  .nav-links a{
    font-size:.92rem; font-weight:500; color:var(--grey);
    position:relative; transition: color .3s;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold);
    transition: width .35s var(--ease-premium);
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ width:100%; }
  .nav-right{ display:flex; align-items:center; gap:14px; }
  .icon-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:var(--card-bg); transition: all .3s var(--ease-premium);
  }
  .icon-btn:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
  .icon-btn svg{ width:16px; height:16px; stroke:var(--ink); }

  /* ---------------- Theme toggle (light/dark) ---------------- */
  .theme-toggle{ position:relative; }
  .theme-toggle svg{ position:absolute; transition: opacity .3s var(--ease-premium), transform .4s var(--ease-premium); }
  .theme-toggle .icon-sun{ opacity:0; transform:rotate(-90deg) scale(.6); }
  .theme-toggle .icon-moon{ opacity:1; transform:rotate(0) scale(1); }
  [data-theme="dark"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
  [data-theme="dark"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(90deg) scale(.6); }
  

  /* ---------------- Mobile nav (hamburger drawer) ---------------- */
  .nav-burger{ display:none; }
  
  .nav-burger svg{ width:18px; height:18px; stroke:var(--ink); }
  .nav-burger .b-top, .nav-burger .b-mid, .nav-burger .b-bot{
    transition: transform .35s var(--ease-premium), opacity .25s var(--ease-premium);
    transform-origin:center;
  }
  .nav-burger.open .b-top{ transform:translateY(5px) rotate(45deg); }
  .nav-burger.open .b-mid{ opacity:0; }
  .nav-burger.open .b-bot{ transform:translateY(-5px) rotate(-45deg); }

  .mobile-nav{
    position:fixed; inset:0; z-index:99; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition: opacity .4s var(--ease-premium), transform .4s var(--ease-premium), visibility 0s linear .4s;
  }
  .mobile-nav.open{
    opacity:1; visibility:visible; transform:translateY(0);
    transition: opacity .4s var(--ease-premium), transform .4s var(--ease-premium), visibility 0s;
  }
  .mobile-nav-links{ list-style:none; text-align:center; display:flex; flex-direction:column; gap:1.6rem; }
  .mobile-nav-links a{
    font-family:'Fraunces',serif; font-weight:700; font-size:1.6rem; color:var(--ink);
    letter-spacing:-0.01em; opacity:.85; transition: opacity .3s, color .3s;
  }
  .mobile-nav-links a:hover, .mobile-nav-links a:active{ opacity:1; color:var(--gold); }
  

  /* ============ HOME / PIN WRAPPER ============ */
  .pin-wrapper{
    position:relative; height:200vh; height:calc(var(--vh, 1vh) * 200); z-index:2;
  }
  .pin-stage{
    position:sticky; top:0; height:100vh; height:calc(var(--vh, 1vh) * 100); width:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    overflow:hidden;
  }
  /* NOTE: below 900px the sticky "pin" is turned off entirely and this section
     becomes a normal stacked flow — see the consolidated mobile/tablet block
     further down (after .about-copy), which is the single source of truth for
     .pin-wrapper/.pin-stage sizing on small screens. */

  .hero-copy{
    position:absolute; top:24%; left:50%; transform:translate(-50%,-50%);
    text-align:center; width:min(90vw, 780px); z-index:5;
  }
  .eyebrow{
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
    margin-bottom:18px; display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); display:inline-block; }
  .hero-heading{
    font-size:clamp(2.1rem, 5.4vw, 4.2rem);
    font-weight:700; line-height:1.08; letter-spacing:-0.02em;
  }

  /* card stage: the shell that later becomes the About right column */
  .card-stage{
    position:absolute; left:50%; top:64%;
    width:340px; height:440px;
    transform:translate(-50%,-50%);
    z-index:4;
  }
  .pcard{
    display:block; cursor:pointer;
    position:absolute; left:0; top:0; width:100%; height:100%;
    border-radius:var(--radius-card);
    background:linear-gradient(155deg, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 88%, var(--gold) 12%) 130%);
    border:none;
    box-shadow: var(--shadow-soft);
    overflow:hidden;
    will-change: transform, opacity;
    transform-style:preserve-3d;
  }
  .pcard-inner{
    position:absolute; inset:0; width:100%; height:100%;
    border-radius:inherit;
  }
  .pcard .art{
    position:absolute; inset:-16px;
    display:flex; align-items:flex-end;
    padding:22px;
  }
  .pcard .art-fill{
    position:absolute; inset:0; opacity:.96;
  }
  .pcard .art::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%);
  }
  .pcard .badge{
    position:relative; z-index:2;
    font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
    color:#fff; background:rgba(17,17,17,.28); backdrop-filter:blur(6px);
    padding:6px 12px; border-radius:99px; font-weight:600;
  }
  .pcard .meta{
    position:absolute; left:22px; right:22px; bottom:20px; z-index:2; color:#fff;
    opacity:0; transform:translateY(8px);
    transition: opacity .35s var(--ease-premium), transform .35s var(--ease-premium);
  }
  .pcard:hover .meta{ opacity:1; transform:translateY(0); }
  .pcard .meta h4{ font-family:'Fraunces',serif; font-size:1rem; font-weight:700; margin-bottom:3px; }
  .pcard .meta p{ font-size:.76rem; opacity:.85; }
  .pcard .view{ font-size:.72rem; margin-top:6px; display:inline-flex; align-items:center; gap:5px; color:var(--gold); font-weight:600; }
  .pcard .shine{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,.22) 0%, transparent 35%);
    opacity:.6;
  }
  .pcard.main{ z-index:10; }

  .float-label{
    position:absolute; z-index:3;
    font-size:.78rem; font-weight:600; color:var(--ink);
    background:color-mix(in srgb, var(--gold) 16%, var(--card-bg)); border:1px solid rgba(47,111,237,.4);
    padding:7px 14px; border-radius:99px; opacity:0;
    box-shadow: 0 10px 24px -12px rgba(17,17,17,.15);
    white-space:nowrap;
  }

  .scroll-hint{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    font-size:.72rem; color:var(--grey); letter-spacing:.1em; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:8px; z-index:6;
  }
  .scroll-hint .line{ width:1px; height:26px; background:linear-gradient(var(--gold), transparent); animation: pulseLine 1.8s ease-in-out infinite; }
  @keyframes pulseLine{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

  /* ---------------- Ribbon spread: role tags + CTA buttons ---------------- */
  .ribbon-tag{
    position:absolute; left:50%; top:58%; z-index:11;
    transform:translate(-50%,-50%); opacity:0; pointer-events:none;
    font-family:'Fraunces',serif; font-weight:700; font-size:.72rem; color:#fff;
    padding:8px 15px; border-radius:99px; white-space:nowrap;
    box-shadow:0 14px 26px -10px rgba(17,17,17,.35);
  }
  .ribbon-tag::after{
    content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px;
    background:inherit; transform:translateX(-50%) rotate(45deg); border-radius:2px; z-index:-1;
  }
  .ribbon-tag.tag-down::after{ bottom:auto; top:-5px; }
  .ribbon-tag.tag-blue{ background:#2F6FED; }
  .ribbon-tag.tag-green{ background:#1FAE7A; }
  .ribbon-tag.tag-orange{ background:#E85D2B; }
  .ribbon-tag.tag-purple{ background:#7C5CFC; }

  .ribbon-cta{
    position:absolute; left:50%; top:91%; transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:14px; z-index:11; opacity:0; visibility:hidden; pointer-events:auto;
  }
  .ribbon-btn{
    font-family:'Sora',sans-serif; font-weight:700; font-size:.86rem;
    padding:13px 24px; border-radius:99px; white-space:nowrap;
    transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
  }
  .ribbon-btn.primary{ background:var(--ink); color:var(--bg); }
  .ribbon-btn.primary:hover{ background:var(--gold); color:#111; transform:translateY(-2px); box-shadow:var(--shadow-soft); }
  .ribbon-btn.ghost{ border:1.4px solid var(--card-border); color:var(--ink); }
  .ribbon-btn.ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
  

  .peek-text{
    position:absolute; z-index:3; opacity:0;
    font-family:'Fraunces',serif; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(2.6rem, 7vw, 5.2rem); line-height:1; white-space:nowrap;
    pointer-events:none;
  }
  .peek-tr{
    top:50%; right:-2%; color:#2FC5C6;
    font-family:'Bungee', cursive; font-weight:400; letter-spacing:.01em;
    transform:rotate(-4deg);
  }
  .peek-bl{ bottom:24%; left:-3%; color:#2F6FED; transform:rotate(3deg); }
  

  /* ============ ABOUT (destination layout, lives inside pin stage) ============ */
  .about-copy{
    position:absolute; left:clamp(24px,7vw,88px); top:50%; transform:translateY(-50%);
    width:min(92vw, 460px); z-index:5; opacity:0;
  }
  .about-copy .eyebrow{ margin-bottom:20px; }
  .about-heading{
    font-family:'Fraunces',serif; font-weight:700; font-size:clamp(1.8rem,3.4vw,2.7rem);
    line-height:1.14; letter-spacing:-0.02em; margin-bottom:22px;
  }
  .about-para{ color:var(--grey); font-size:1rem; line-height:1.7; margin-bottom:38px; max-width:42ch; }

  .edu-block{ border-top:1px solid var(--card-border); padding-top:22px; }
  .edu-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:14px; }
  .edu-item{
    display:flex; flex-direction:column; gap:4px; padding:9px 0;
    font-size:clamp(.62rem, 1.3vw, .82rem);
  }
  .edu-item .degree{ font-weight:600; }
  .edu-item .edu-sub{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    white-space:nowrap; overflow-x:auto; scrollbar-width:none;
  }
  .edu-item .edu-sub::-webkit-scrollbar{ display:none; }
  .edu-item .school{ color:var(--grey); white-space:nowrap; }
  .edu-item .yr{ color:var(--grey); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }

  #about-anchor{ position:relative; height:1px; }

  /* ============ MOBILE/TABLET (≤900px): pin/sticky hero disabled ============
     The desktop version pins .pin-stage (position:sticky) for ~2 screens of
     scroll while GSAP scrubs the hero deck into a ribbon, then collapses it
     into a diagonal "About" staircase and drags .card-stage to an absolute
     74%/52% position next to the About copy. That absolute repositioning is
     inline (GSAP) and was overriding any CSS meant to stack things normally,
     which is what caused About to visually overlap the card deck on small
     screens. Below 900px we turn the whole pinned sequence off (see the
     matching `ScrollTrigger.matchMedia` split in the script) and lay hero,
     card deck and About copy out as a plain, non-overlapping vertical stack. */
  

  /* Short viewports (laptops in a small window, tablets in landscape) — the hero
     heading and the card below it are closest together here, so tighten things up
     rather than let them collide. */
  

  /* ============ GAME ART — real project grid from Behance, styled like game HUD panels ============ */
  .gameart-section{ position:relative; z-index:2; padding:16px clamp(12px,2.2vw,28px) 36px; }
  .gameart-shell{ max-width:1280px; margin:0 auto; }
  .gameart-banner{
    position:relative; border-radius:28px; overflow:hidden;
    padding:clamp(50px,8vw,90px) clamp(20px,4vw,60px);
    min-height:380px; display:flex; align-items:center; justify-content:center;
    margin-bottom:56px;
  }
  .gameart-banner::before{
    content:''; position:absolute; inset:0; z-index:0;
    background-image:var(--gameart-hammer-bg);
    background-repeat:no-repeat; background-position:center; background-size:cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .gameart-float-hammer{
    position:absolute; z-index:1; pointer-events:none;
    filter: drop-shadow(0 22px 26px rgba(0,0,0,.28));
  }
  .gameart-hammer-l{ left:1%; top:8%; width:clamp(90px,10vw,150px); animation: gaHammerFloat 4.6s ease-in-out infinite; }
  .gameart-hammer-r{ right:1%; top:16%; width:clamp(110px,12.5vw,190px); animation: gaHammerFloat 5.3s ease-in-out infinite .7s; }
  @keyframes gaHammerFloat{
    0%, 100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-16px) rotate(-2deg); }
  }
  

  .gameart-head{
    position:relative; z-index:2;
    text-align:center; max-width:640px; margin:0 auto;
    opacity:0; transform:translateY(20px);
    transition:opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
  }
  .gameart-head.in-view{ opacity:1; transform:translateY(0); }
  .gameart-head .eyebrow{ justify-content:center; }
  .gameart-heading{
    font-family:'Fraunces',serif; font-weight:700; font-size:clamp(1.9rem,3.6vw,2.9rem);
    line-height:1.14; letter-spacing:-0.02em; margin-bottom:16px;
  }
  .gameart-sub{ color:var(--grey); font-size:.98rem; line-height:1.7; }

  .gameart-arena{
    position:relative; border-radius:28px; padding:clamp(24px,4vw,44px);
    background-image:
      radial-gradient(900px circle at 15% -10%, rgba(47,111,237,.16), transparent 55%),
      radial-gradient(700px circle at 100% 100%, rgba(124,92,252,.12), transparent 55%),
      var(--gameart-hammer-bg);
    background-repeat:no-repeat, no-repeat, no-repeat;
    background-position:center, center, center;
    background-size:cover, cover, cover;
    border:1px solid rgba(47,111,237,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 40px 90px -50px rgba(0,0,0,.7);
    overflow:hidden;
  }
  .gameart-arena::before{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px);
  }

  .gameart-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:26px;
  }
  .gameart-card{
    position:relative; overflow:hidden;
    background: linear-gradient(155deg, #16161c, #1e1e26);
    border:1px solid rgba(47,111,237,.28);
    clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    box-shadow: 0 0 0 1px rgba(47,111,237,.06), 0 24px 50px -28px rgba(0,0,0,.7);
    opacity:0; transform:translateY(28px);
    transition:opacity .7s var(--ease-premium), transform .4s var(--ease-premium),
               box-shadow .4s ease, border-color .4s ease;
    text-decoration:none; color:inherit; display:block;
  }
  .gameart-card.in-view{ opacity:1; transform:translateY(0); }
  .gameart-card:hover{
    transform:translateY(-8px);
    border-color: rgba(47,111,237,.75);
    box-shadow: 0 0 0 1px rgba(47,111,237,.4), 0 0 42px -4px rgba(47,111,237,.5), 0 30px 60px -24px rgba(0,0,0,.8);
  }
  /* HUD targeting-reticle corner brackets */
  .gameart-card::before, .gameart-card::after{
    content:''; position:absolute; width:20px; height:20px; z-index:4; pointer-events:none;
    border-color: var(--gold); opacity:.75; transition: opacity .4s ease, width .4s ease, height .4s ease;
  }
  .gameart-card::before{ top:9px; left:9px; border-top:2px solid; border-left:2px solid; }
  .gameart-card::after{ bottom:9px; right:9px; border-bottom:2px solid; border-right:2px solid; }
  .gameart-card:hover::before, .gameart-card:hover::after{ opacity:1; width:26px; height:26px; }

  .gameart-thumb{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; background:#0d0d11; }
  .gameart-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(1.08) contrast(1.04);
    transition:transform .6s var(--ease-premium);
  }
  .gameart-card:hover .gameart-thumb img{ transform:scale(1.1); }
  .gameart-thumb::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(12,12,16,.85) 100%);
  }
  /* scanline sweep on hover */
  .gameart-thumb::before{
    content:''; position:absolute; left:0; right:0; top:-40%; height:40%; z-index:3; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(47,111,237,.28), transparent);
    opacity:0; transition: opacity .3s ease;
  }
  .gameart-card:hover .gameart-thumb::before{ opacity:1; animation: gaScan 1.1s ease-in-out; }
  @keyframes gaScan{ 0%{ top:-40%; } 100%{ top:100%; } }

  .gameart-info{ position:relative; z-index:1; padding:16px 18px 20px; }
  .gameart-info h4{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:.96rem; margin-bottom:8px; color:#F5F1E8;
    letter-spacing:.01em;
  }
  .gameart-info span{
    display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    color:#9DC0FF; background:rgba(47,111,237,.14); border:1px solid rgba(47,111,237,.4);
    padding:4px 9px; border-radius:4px;
  }

  

  /* ============ TESTIMONIALS ============ */
  .testimonial-section{ position:relative; z-index:2; padding:24px clamp(12px,2.2vw,28px) 34px; }
  .test-shell{
    max-width:1280px; margin:0 auto;
    background:color-mix(in srgb, var(--card-bg) 45%, transparent);
    backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px) saturate(160%);
    border:1px solid var(--card-border);
    border-radius:var(--radius-shell);
    box-shadow:var(--shadow-soft);
    padding:clamp(20px,3vw,40px);
    opacity:0; transform:translateY(50px);
  }

  .test-hero{ text-align:center; padding:20px 12px 0; }
  .test-hero .eyebrow{ justify-content:center; }
  .test-heading{
    font-family:'Fraunces',serif; font-weight:700; letter-spacing:-0.02em;
    font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.18; margin:16px auto 0; max-width:620px;
  }
  .test-heading .accent{ color:var(--gold); }
  /* ---------- floating photo cluster (replaces the flat testimonial picture) ---------- */
  .test-photo-cluster{
    position:relative; max-width:1080px; width:100%; margin:32px auto 0;
    aspect-ratio:1298/606;
  }
  .tpc-slot{
    position:absolute; animation-name:tpc-float; animation-timing-function:ease-in-out;
    animation-iteration-count:infinite; will-change:transform;
  }
  .tpc-card{
    display:block; width:100%; height:100%; border-radius:18px; overflow:hidden;
    box-shadow:0 20px 40px -14px rgba(17,17,17,.28), 0 6px 16px -8px rgba(17,17,17,.16);
    opacity:0; transform:scale(.85);
    transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
    cursor:pointer;
  }
  .tpc-card img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tpc-slot{ z-index:10; }
  .tpc-slot.tpc-center{ z-index:20; }
  .tpc-card:hover{
    transform:scale(1.09) translateY(-6px);
    box-shadow:0 34px 60px -16px rgba(17,17,17,.36), 0 10px 24px -6px rgba(47,111,237,.28);
    z-index:40; position:relative;
  }
  @keyframes tpc-float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
  }
  



  .test-cluster{ position:relative; max-width:760px; height:400px; margin:44px auto 0; }
  .avatar-chip{
    position:absolute; border-radius:50%; overflow:hidden;
    box-shadow:0 14px 30px -10px rgba(17,17,17,.25);
    border:3px solid var(--card-bg);
    opacity:0; transform:scale(.6);
    transition: transform .4s var(--ease-premium);
  }
  .avatar-chip:hover{ transform:scale(1.12) !important; z-index:15; }
  .avatar-chip img{ width:100%; height:100%; object-fit:cover; display:block; }

  .featured-card{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
    width:200px;
    background:color-mix(in srgb, var(--card-bg) 55%, transparent);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--card-border);
    border-radius:26px; box-shadow:var(--shadow-lift);
    padding:22px 18px 20px; text-align:center; z-index:20; opacity:0;
  }
  .feat-avatar{
    width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 14px;
    display:block; border:3px solid var(--card-bg); box-shadow:0 10px 22px -8px rgba(17,17,17,.3);
  }
  .feat-name{ font-weight:700; font-size:.94rem; }
  .feat-role{ font-size:.74rem; color:var(--grey); margin-top:2px; }
  .feat-nav{
    position:absolute; top:14px; width:26px; height:26px; border-radius:50%;
    background:var(--bg); border:1px solid var(--card-border); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-size:.9rem; transition: background .3s, transform .3s, color .3s;
  }
  .feat-nav:hover{ background:var(--gold); color:#fff; transform:scale(1.08); }
  .feat-nav.prev{ left:14px; }
  .feat-nav.next{ right:14px; }

  /* Scattered chip positions — two loose arcs left & right of the featured card,
     roughly matching the reference layout */
  .ac-1{ width:52px; height:52px; left:2%;   top:8%; }
  .ac-2{ width:64px; height:64px; left:0%;   top:42%; }
  .ac-3{ width:48px; height:48px; left:8%;   top:78%; }
  .ac-4{ width:56px; height:56px; left:20%;  top:4%; }
  .ac-5{ width:44px; height:44px; left:22%;  top:66%; }
  .ac-6{ width:56px; height:56px; right:20%; top:6%; }
  .ac-7{ width:44px; height:44px; right:22%; top:68%; }
  .ac-8{ width:52px; height:52px; right:2%;  top:10%; }
  .ac-9{ width:64px; height:64px; right:0%;  top:44%; }
  .ac-10{ width:48px; height:48px; right:8%; top:78%; }

  

  .marquee-wrap{
    position:relative; width:100%; overflow:hidden; cursor:grab; touch-action:pan-y;
    margin-top:40px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-wrap.dragging{ cursor:grabbing; }
  .marquee-track{ display:flex; gap:22px; width:max-content; will-change:transform; }

  .t-card{
    width:340px; flex:0 0 auto;
    background:color-mix(in srgb, var(--card-bg) 50%, transparent);
    backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid var(--card-border); border-radius:22px;
    padding:26px; box-shadow:var(--shadow-soft);
    transition: transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), border-color .4s;
    opacity:0; transform:translateY(30px);
  }
  .t-card:hover{ transform:translateY(-8px) scale(1.03) rotate(1deg); box-shadow:var(--shadow-lift); border-color:var(--gold); }
  .t-stars{ color:var(--gold); font-size:.9rem; letter-spacing:.14em; margin-bottom:14px; }
  .t-quote{ font-size:.92rem; line-height:1.65; color:var(--ink); margin-bottom:22px; min-height:96px; }
  .t-person{ display:flex; align-items:center; gap:12px; }
  .t-avatar{
    width:44px; height:44px; border-radius:50%; object-fit:cover;
    border:1px solid var(--card-border); transition: transform .35s var(--ease-premium);
  }
  .t-card:hover .t-avatar{ transform:scale(1.08); }
  .t-person-name{ font-weight:700; font-size:.9rem; }
  .t-person-role{ font-size:.78rem; color:var(--grey); }

  

  /* ============ TOOLS I USE ============ */
  .tools-section{ position:relative; z-index:2; padding:36px clamp(12px,2.2vw,28px) 54px; }
  .tools-shell{
    max-width:1280px; margin:0 auto; position:relative; overflow:hidden;
    background:linear-gradient(160deg, #ffffff 0%, #eef3fc 55%, #dfe9fb 100%); border:1px solid var(--card-border);
    border-radius:var(--radius-shell); box-shadow:var(--shadow-soft);
    padding:clamp(40px,5vw,72px) 0 clamp(50px,6vw,80px);
    opacity:0; transform:translateY(50px);
    --mx:50%; --my:20%;
  }
  .tools-shell::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(460px circle at var(--mx) var(--my), var(--gold-soft), transparent 62%);
  }
  [data-theme="dark"] .tools-shell{ background:var(--card-bg); }
  .tools-head{
    position:relative; z-index:2; text-align:center; margin:0 auto 8px;
  }
  .tools-head .eyebrow{ justify-content:center; opacity:0; transform:translateY(18px); }

  .tools-grid{
    position:relative; z-index:2;
    min-height:clamp(520px, 52vw, 620px);
    padding:0;
  }
  .tools-center{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    text-align:center; max-width:440px; z-index:3;
  }
  .tools-heading{
    font-family:'Fraunces',serif; font-weight:700; letter-spacing:-0.02em;
    font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.2; margin-bottom:12px;
    opacity:0; transform:translateY(18px);
  }
  .tools-sub{
    color:var(--grey); font-size:.9rem; line-height:1.65; max-width:44ch;
    opacity:0; transform:translateY(18px);
  }

  .tool-lane{
    /* overflow-x hidden keeps the endless horizontal loop clean; overflow-y is left
       open (not hidden) so a card's hover lift/scale and its glow box-shadow are
       never sliced flat by the lane's edge — that flat slice was the "colour/line
       cutting" artifact. The lane height plus the extra gap below (tools-grid's
       taller min-height) gives the wave motion + glow room to breathe without the
       two lanes' glows ever touching. */
    position:absolute; left:0; width:100%; height:196px;
    overflow-x:hidden; overflow-y:visible;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .lane-top{ top:0%; }
  .lane-bottom{ bottom:0%; }
  .tool-icon{ position:absolute; left:0; top:50%; margin-top:-54px; will-change:transform; }

  

  .tool-card{
    --mgx:0px; --mgy:0px; --glow:0; --brand:47,111,237;
    width:104px; height:108px; border-radius:22px; flex:0 0 auto;
    background:color-mix(in srgb, var(--card-bg) 62%, transparent);
    backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
    border:1px solid rgba(var(--brand), .12);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:12px 8px; position:relative; overflow:hidden;
    transform:translate(var(--mgx), var(--mgy));
    box-shadow: var(--shadow-soft),
      0 0 22px -4px rgba(var(--brand), .5),
      0 0 calc(var(--glow) * 30px) calc(var(--glow) * 2px) rgba(var(--brand), calc(var(--glow) * .55));
    transition: box-shadow .3s var(--ease-premium), border-color .3s;
    opacity:0; filter:blur(6px);
  }
  .tool-card:hover{
    transform: translate(var(--mgx), var(--mgy)) translateY(-10px) scale(1.08) rotate(-2deg);
    border-color:rgba(var(--brand), .8);
    box-shadow: var(--shadow-lift), 0 0 34px 0 rgba(var(--brand), .65);
    transition: transform .4s var(--ease-premium), border-color .4s, box-shadow .4s;
  }
  .tool-card .icon{ width:32px; height:32px; object-fit:contain; flex:0 0 auto; }
  .tool-card .badge-icon{ border-radius:8px; }
  .tool-card .t-name{
    font-size:.62rem; font-weight:700; color:var(--ink); margin-top:2px;
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tool-card .t-cat{
    font-size:.56rem; color:var(--grey); opacity:0; transform:translateY(3px);
    transition: all .3s var(--ease-premium);
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tool-card:hover .t-cat{ opacity:1; transform:translateY(0); }

  

  /* ============ PROJECTS (revolving coverflow carousel) ============ */
  .projects-section{
    position:relative; z-index:2; width:100%;
    padding:clamp(34px,5vh,56px) 0 clamp(28px,4vh,44px);
    display:flex; flex-direction:column; align-items:center;
  }
  .projects-head{ text-align:center; width:min(90vw,640px); position:relative; z-index:6; }
  .projects-head .eyebrow{ justify-content:center; opacity:0; transform:translateY(18px); }
  .projects-heading{
    font-family:'Fraunces',serif; font-weight:700; letter-spacing:-0.02em;
    font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; margin-bottom:14px;
    opacity:0; transform:translateY(24px);
  }
  .projects-sub{
    color:var(--grey); font-size:.95rem; line-height:1.6; max-width:48ch; margin:0 auto;
    opacity:0; transform:translateY(18px);
  }
  .projects-carousel{
    position:relative; width:100%; margin-top:clamp(20px,3vh,36px);
    display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.4vw,32px);
    opacity:0; transform:translateY(24px);
  }
  .carousel-arrow{
    flex:0 0 auto; width:52px; height:52px; border-radius:50%;
    border:1px solid var(--card-border); background:var(--card-bg);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:var(--shadow-soft); transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), background .3s;
    z-index:20;
  }
  .carousel-arrow:hover{ transform:translateY(-3px) scale(1.06); box-shadow:var(--shadow-lift); background:var(--gold); }
  .carousel-arrow:hover svg{ stroke:#111; }
  .carousel-arrow:active{ transform:translateY(-1px) scale(0.97); }
  .carousel-arrow svg{ width:19px; height:19px; stroke:var(--ink); transition: stroke .3s; }
  

  .projects-viewport{
    position:relative; overflow:hidden;
    width:min(96vw,1320px); height:clamp(320px,44vw,420px);
  }
  

  .proj-card{
    position:absolute; left:50%; top:50%; width:min(60vw,280px); aspect-ratio:4/5;
    margin-left:calc(min(60vw,280px) / -2);
    margin-top:calc(min(60vw,280px) * -0.625);
    border-radius:var(--radius-card); overflow:hidden; cursor:pointer;
    background:var(--card-bg); border:none;
    box-shadow:var(--shadow-soft);
    will-change:transform, opacity, filter;
    transition: box-shadow .4s var(--ease-premium);
  }
  
  .proj-card::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
    box-shadow: inset 0 0 0 0 rgba(47,111,237,0); transition: box-shadow .45s var(--ease-premium);
  }
  .proj-card.is-hover::after{ box-shadow: inset 0 0 0 1.5px rgba(47,111,237,.65); }
  .proj-card.is-hover{ box-shadow:var(--shadow-lift); }
  .proj-thumb{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
    transform:scale(1); transition: transform .6s var(--ease-premium), opacity .5s var(--ease-premium);
    opacity:0; background:linear-gradient(135deg, var(--gold-soft), var(--card-bg));
  }
  .proj-thumb.loaded{ opacity:1; }
  .proj-card.is-hover .proj-thumb{ transform:scale(1.1); }
  .proj-overlay{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(10,10,8,0) 30%, rgba(10,10,8,.86) 100%);
  }
  .proj-fieldtag{
    position:absolute; z-index:3; top:16px; left:16px;
    font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
    color:#fff; background:rgba(17,17,17,.32); backdrop-filter:blur(6px);
    padding:6px 12px; border-radius:99px;
    opacity:0; transform:translateY(-6px);
    transition: opacity .4s var(--ease-premium) .05s, transform .4s var(--ease-premium) .05s;
  }
  .proj-card.is-hover .proj-fieldtag{ opacity:1; transform:translateY(0); }
  .proj-extlink{
    position:absolute; z-index:3; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.7);
    transition: opacity .35s var(--ease-premium), transform .35s var(--ease-premium);
  }
  .proj-card.is-hover .proj-extlink{ opacity:1; transform:scale(1); }
  .proj-extlink svg{ width:13px; height:13px; stroke:#fff; }
  .proj-meta{ position:absolute; z-index:3; left:18px; right:18px; bottom:16px; color:#fff; }
  .proj-title{ font-family:'Fraunces',serif; font-weight:700; font-size:1rem; margin-bottom:4px; }
  .proj-desc{
    font-size:.76rem; line-height:1.45; opacity:.8; max-height:0; overflow:hidden;
    transition: max-height .4s var(--ease-premium), opacity .4s var(--ease-premium), margin .4s var(--ease-premium);
  }
  .proj-card.is-hover .proj-desc{ max-height:60px; opacity:.85; margin-bottom:8px; }
  .proj-stats{ display:flex; gap:14px; font-size:.7rem; opacity:.75; margin:6px 0 10px; }
  .proj-stats span{ display:inline-flex; align-items:center; gap:4px; }
  .proj-cta{
    display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700;
    color:#111; background:var(--gold); padding:8px 14px; border-radius:99px;
    transform:translateY(14px); opacity:0;
    transition: opacity .4s var(--ease-premium) .08s, transform .4s var(--ease-premium) .08s;
  }
  .proj-card.is-hover .proj-cta{ opacity:1; transform:translateY(0); }
  

  .carousel-dots{
    display:flex; align-items:center; justify-content:center; gap:9px;
    margin-top:clamp(24px,4vh,40px); opacity:0; transform:translateY(14px);
  }
  .c-dot{
    width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:var(--card-border); transition: all .35s var(--ease-premium);
  }
  .c-dot.active{ width:24px; border-radius:99px; background:var(--gold); }
  .c-dot:hover{ background:var(--gold); }

  /* ============ SERVICES — cinematic cream & orange ============ */
  :root{
    --orange-1:#5B8DF6;
    --orange-2:#2F6FED;
    --orange-3:#1E4FC4;
    --svc-cream-1:#EAF1FE;
    --svc-cream-2:#DCE9FD;
    --svc-cream-3:#C9DEFC;
    --svc-ink:#132049;
    --svc-glass-bg: rgba(244,249,255,.52);
    --svc-glass-bg-strong: rgba(244,249,255,.78);
    --svc-glass-border: rgba(255,255,255,.65);
    --svc-glow: rgba(47,111,237,.35);
  }
  [data-theme="dark"]{
    --svc-cream-1:#101A2E; --svc-cream-2:#0C1524; --svc-cream-3:#09101B;
    --svc-ink:#E7EEFC;
    --svc-glass-bg: rgba(16,26,46,.5);
    --svc-glass-bg-strong: rgba(16,26,46,.72);
    --svc-glass-border: rgba(180,210,255,.14);
    --svc-glow: rgba(47,111,237,.22);
  }
  .services-section{
    position:relative; z-index:2;
    padding: clamp(28px,4vw,50px) clamp(10px,2vw,28px) clamp(22px,3vw,44px);
  }
  .services-shell{
    max-width:1320px; margin:0 auto;
    background:
      radial-gradient(900px circle at 12% -6%, var(--svc-glow), transparent 55%),
      radial-gradient(700px circle at 96% 30%, rgba(255,180,120,.22), transparent 55%),
      linear-gradient(175deg, var(--svc-cream-1), var(--svc-cream-2) 55%, var(--svc-cream-3));
    border-radius:var(--radius-shell);
    position:relative;
    overflow:hidden;
    padding: clamp(20px,2.6vw,34px);
    border:1px solid var(--svc-glass-border);
    box-shadow: var(--shadow-soft);
  }
  .svc-particles{
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  .svc-particle{
    position:absolute; border-radius:50%;
    background: radial-gradient(circle, rgba(255,150,90,.9), rgba(255,150,90,0) 70%);
    opacity:.35; will-change:transform, opacity;
  }
  .services-top, .services-grid-lower, .services-bar{
    position:relative; z-index:2;
  }
  .services-top{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 190px;
    gap:16px;
    align-items:stretch;
    margin-bottom:16px;
  }
  .services-head{
    grid-column:1;
    display:flex; flex-direction:column; justify-content:center;
    padding-right:8px;
  }
  .services-head .eyebrow{ margin-bottom:16px; color:var(--orange-3); }
  .services-head .eyebrow::before{ background:var(--orange-2); }
  .services-head .eyebrow,
  .services-heading,
  .services-sub,
  .services-cta{
    opacity:0; transform:translateY(24px);
    transition: opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
  }
  .services-section.services-head-in .services-head .eyebrow{ opacity:1; transform:translateY(0); transition-delay:.05s; }
  .services-section.services-head-in .services-heading{ opacity:1; transform:translateY(0); transition-delay:.15s; }
  .services-section.services-head-in .services-sub{ opacity:1; transform:translateY(0); transition-delay:.25s; }
  .services-section.services-head-in .services-cta{ opacity:1; transform:translateY(0); transition-delay:.35s; }
  
  .services-heading{
    font-family:'Fraunces',serif; font-weight:800; letter-spacing:-0.02em;
    color:var(--svc-ink);
    font-size:clamp(1.5rem,2.1vw,2.15rem); line-height:1.15; margin-bottom:16px;
  }
  .services-sub{
    color: color-mix(in srgb, var(--svc-ink) 62%, transparent);
    font-size:.92rem; line-height:1.65; margin-bottom:26px; max-width:34ch;
  }
  .services-cta{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    width:fit-content; padding:13px 22px 13px 24px; border-radius:99px;
    background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
    color:#fff; font-size:.86rem; font-weight:700;
    overflow:hidden; isolation:isolate;
    transition: box-shadow .4s var(--ease-premium);
    box-shadow: 0 18px 34px -14px rgba(232,93,43,.55);
  }
  .services-cta::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5) 0%, transparent 60%);
    opacity:0; transition:opacity .4s;
  }
  .services-cta:hover{ box-shadow: 0 24px 46px -14px rgba(232,93,43,.65); }
  .services-cta:hover::before{ opacity:.6; }
  .services-cta .cta-arrow{ transition: transform .4s var(--ease-premium); display:inline-flex; }
  .services-cta:hover .cta-arrow{ transform:translateX(5px); }
  .services-doodle{
    width:34px; height:34px; margin-top:14px; color:var(--orange-2);
    animation: doodleFloat 3.6s ease-in-out infinite;
  }
  @keyframes doodleFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-6px) rotate(4deg);} }

  .services-grid-lower{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 190px;
    gap:16px;
  }

  /* card shell: static grid slot + hover chrome. Motion (deck burst / float / tilt / lift)
     lives entirely on .svc-inner so GSAP owns one transform layer with no CSS fights. */
  .svc-card{
    position:relative; display:block; border-radius:22px;
    cursor:pointer;
    perspective:900px;
  }
  .svc-inner{
    position:absolute; inset:0; border-radius:22px; overflow:hidden;
    background:var(--svc-glass-bg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border:1px solid var(--svc-glass-border);
    box-shadow:0 14px 34px -20px rgba(90,50,20,.35);
    transform-style:preserve-3d; will-change:transform;
    transition: box-shadow .45s var(--ease-premium), border-color .45s var(--ease-premium);
  }
  .svc-card:hover .svc-inner{
    box-shadow: 0 30px 60px -22px rgba(232,93,43,.4);
    border-color: rgba(255,255,255,.9);
  }
  /* permanent glossy glass sheen — a soft diagonal light streak sitting over
     the media, giving every card a subtle glass/plastic highlight at rest,
     independent of the .svc-shine hover-only effect below. */
  .svc-inner::before{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    border-radius:inherit;
    background:
      linear-gradient(135deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.14) 24%, rgba(255,255,255,0) 46%),
      linear-gradient(215deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.16) 100%);
    mix-blend-mode:overlay;
    transition: opacity .5s;
  }
  .svc-media{ position:absolute; inset:0; overflow:hidden; }
  .svc-media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:scale(1.06); transition:transform .7s var(--ease-premium), filter .5s var(--ease-premium);
    filter:saturate(1.05) blur(8px);
  }
  .svc-card:hover .svc-media img{ transform:scale(1.16); filter:saturate(1.05) blur(0px); }
  .svc-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(60,28,10,0) 30%, rgba(50,24,10,.74) 100%);
  }
  .svc-shine{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,.35) 0%, transparent 32%);
    opacity:0; transition:opacity .5s;
  }
  .svc-card:hover .svc-shine{ opacity:.55; }
  .svc-icon{
    position:absolute; top:14px; left:14px; z-index:3;
    width:34px; height:34px; border-radius:11px;
    background:rgba(255,255,255,.24); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.4);
    display:flex; align-items:center; justify-content:center;
    color:#fff; transition: transform .5s var(--ease-premium);
  }
  .svc-card:hover .svc-icon{ transform:rotate(18deg); }
  .svc-icon svg{ width:16px; height:16px; }
  .svc-glass-body{
    position:absolute; left:12px; right:12px; bottom:12px; z-index:3; color:#fff;
    background:rgba(30,16,6,.28);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px; padding:10px 12px;
  }
  .svc-glass-body h3{
    font-family:'Fraunces',serif; font-size:.95rem; font-weight:700;
    letter-spacing:-0.01em; transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .svc-glass-body p{
    font-size:.7rem; line-height:1.5; color:rgba(255,255,255,.85); margin-top:4px;
    max-height:0; opacity:0; overflow:hidden; transform:translateY(6px);
    transition: max-height .4s cubic-bezier(.34,1.56,.64,1), opacity .35s ease, margin-top .35s, transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .svc-card:hover .svc-glass-body h3{ transform:translateY(-3px); }
  .svc-card:hover .svc-glass-body p{ max-height:40px; opacity:1; margin-top:6px; transform:translateY(0); }

  .svc-link{
    display:inline-flex; align-items:center; gap:5px; margin-top:8px;
    font-size:.68rem; font-weight:700; color:#fff;
    padding:6px 11px; border-radius:99px; background:rgba(255,255,255,.2);
    opacity:0; transform:translateY(10px) scale(.9);
    transition: opacity .4s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1), background .3s;
  }
  .svc-card:hover .svc-link{ opacity:1; transform:translateY(0) scale(1); background:rgba(255,255,255,.32); }

  @media (hover: none){
    .svc-card{ touch-action: manipulation; }
    .svc-card:active .svc-media img,
    .svc-card:focus-within .svc-media img{
      transform:scale(1.16); filter:saturate(1.05) blur(0px);
    }
    .svc-card:active .svc-shine,
    .svc-card:focus-within .svc-shine{
      opacity:.55;
    }
    .svc-card:active .svc-link,
    .svc-card:focus-within .svc-link{
      opacity:1; transform:translateY(0) scale(1); background:rgba(255,255,255,.32);
    }
    .svc-card:active .svc-glass-body h3,
    .svc-card:focus-within .svc-glass-body h3{
      transform:translateY(-3px);
    }
    .svc-card:active .svc-glass-body p,
    .svc-card:focus-within .svc-glass-body p{
      max-height:40px; opacity:1; margin-top:6px; transform:translateY(0);
    }
  }

  /* featured card */
  .svc-card.featured{ grid-column: 3; grid-row: 1 / span 2; }
  .svc-card.featured .svc-inner{
    background:linear-gradient(155deg, var(--orange-1), var(--orange-2) 55%, var(--orange-3));
    border:1px solid rgba(255,255,255,.3);
  }
  .svc-card.featured .svc-media img{ opacity:.55; mix-blend-mode:luminosity; }
  .svc-card.featured .svc-media::after{
    background:linear-gradient(180deg, rgba(200,64,20,0) 20%, rgba(140,38,10,.86) 100%);
  }
  .svc-card.featured .svc-glow{
    position:absolute; z-index:1; width:70%; height:60%; left:15%; top:10%;
    background:radial-gradient(circle, rgba(255,190,140,.55), transparent 65%);
    filter:blur(30px); opacity:.85; pointer-events:none;
  }
  .svc-card.featured .badge{
    position:absolute; top:14px; right:14px; z-index:3;
    background:rgba(255,255,255,.26); backdrop-filter:blur(6px);
    color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.04em;
    padding:6px 12px; border-radius:99px; display:flex; align-items:center; gap:5px;
    animation: badgeBounce 2.4s ease-in-out infinite;
  }
  @keyframes badgeBounce{ 0%,80%,100%{ transform:translateY(0);} 90%{ transform:translateY(-3px);} }
  .svc-card.featured .svc-glass-body{ bottom:16px; left:16px; right:16px; background:rgba(90,30,8,.32); }
  .svc-card.featured .svc-glass-body h3{ font-size:1.26rem; margin-bottom:6px; }
  .svc-card.featured .svc-glass-body p{ max-height:60px; opacity:.94; font-size:.8rem; margin-top:0; transform:translateY(0); }
  .svc-card.featured .svc-explore{
    display:inline-flex; align-items:center; gap:6px; margin-top:12px;
    font-size:.76rem; font-weight:700; color:#fff;
    padding:9px 16px; border-radius:99px; background:rgba(255,255,255,.2);
    backdrop-filter:blur(6px);
    opacity:0; transform:translateY(10px) scale(.92);
    transition: opacity .4s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1), background .3s;
  }
  .svc-card.featured:hover .svc-explore{ opacity:1; transform:translateY(0) scale(1); background:rgba(255,255,255,.32); }

  .services-bar{
    margin-top:16px; display:flex; align-items:center; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
    background:var(--svc-glass-bg-strong);
    backdrop-filter: blur(14px);
    border:1px solid var(--svc-glass-border);
    border-radius:22px; padding:22px 28px;
    box-shadow:0 20px 50px -30px rgba(90,50,20,.3);
  }
  .services-bar .bar-left{ display:flex; align-items:center; gap:16px; }
  .services-bar .bar-icon{
    width:44px; height:44px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(135deg, var(--orange-1), var(--orange-2)); color:#fff;
    display:flex; align-items:center; justify-content:center;
    animation: doodleFloat 4s ease-in-out infinite;
  }
  .services-bar h4{ font-family:'Fraunces',serif; font-weight:700; font-size:1rem; margin-bottom:2px; color:var(--svc-ink); }
  .services-bar p{ color: color-mix(in srgb, var(--svc-ink) 62%, transparent); font-size:.86rem; }
  .bar-btn{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    padding:13px 22px; border-radius:99px;
    background: linear-gradient(135deg, var(--orange-1), var(--orange-2)); color:#fff;
    font-size:.86rem; font-weight:700; overflow:hidden;
    transition: box-shadow .4s var(--ease-premium);
    box-shadow: 0 16px 30px -14px rgba(232,93,43,.5);
  }
  .bar-btn span{ transition: transform .4s var(--ease-premium); }
  .bar-btn:hover{ box-shadow: 0 22px 40px -14px rgba(232,93,43,.62); }
  .bar-btn:hover span{ transform:translateX(4px) rotate(-45deg); }

  

  /* ============ CONTACT ============ */
  .contact-section{ position:relative; z-index:2; padding:0 clamp(10px,2vw,22px) clamp(36px,5vw,60px); }
  .contact-shell{
    max-width:1320px; margin:0 auto; border-radius:var(--radius-shell);
    background:var(--svc-cream-1); border:1px solid var(--svc-glass-border);
    box-shadow:var(--shadow-soft); overflow:hidden; position:relative;
    opacity:0; transform:translateY(40px) scale(.97);
  }
  .contact-sound-toggle{
    position:absolute; top:20px; right:20px; z-index:20; width:38px; height:38px; border-radius:50%;
    background:var(--svc-glass-bg-strong); backdrop-filter:blur(8px); border:1px solid var(--svc-glass-border);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--svc-ink);
  }
  .contact-sound-toggle svg{ width:16px; height:16px; stroke:currentColor; }

  .contact-banner{
    position:relative; overflow:hidden; padding:clamp(48px,7vw,80px) clamp(28px,6vw,64px) 44px;
    background:
      radial-gradient(120% 140% at 15% -10%, color-mix(in srgb, var(--orange-1) 26%, var(--svc-cream-1)) 0%, var(--svc-cream-2) 55%, var(--svc-cream-3) 100%);
    min-height:400px;
  }
  #marbleCanvas{ position:absolute; inset:0; z-index:2; touch-action:none; }
  .contact-heading-block{ position:relative; z-index:5; max-width:560px; }
  /* Nudge just the eyebrow + heading left so their left edge lines up with
     the "W" of "Whether..." below (the paragraph and button stay put). */
  .contact-heading-block > .eyebrow,
  .contact-heading-block > .contact-heading{ margin-left:-14px; }
  .contact-heading{
    font-family:'Fraunces',serif; font-weight:800; letter-spacing:-0.02em; color:var(--svc-ink);
    font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.1; margin-bottom:16px;
  }
  .contact-heading .split-word{ display:inline-block; overflow:hidden; padding-bottom:0.18em; margin-bottom:-0.18em; }
  .contact-heading .split-inner{ display:inline-block; transform:translateY(110%); }
  .contact-sub{
    color: color-mix(in srgb, var(--svc-ink) 62%, transparent);
    font-size:.98rem; line-height:1.65; max-width:46ch; margin-bottom:26px;
  }
  .contact-cta{
    position:relative; display:inline-flex; align-items:center; gap:10px; overflow:hidden;
    background:#141210; color:#fff; font-weight:700; font-size:.9rem;
    padding:15px 26px; border-radius:99px; border:none; cursor:pointer;
  }
  .contact-cta .arrow{ transition:transform .4s var(--ease-premium); }
  .contact-cta:hover .arrow{ transform:translateX(5px) rotate(-45deg); }
  .contact-cta .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); pointer-events:none; }

  .deco{ position:absolute; z-index:3; pointer-events:none; opacity:.9; }
  .deco svg{ width:100%; height:100%; display:block; }
  .deco-plane{ width:46px; height:46px; top:14%; right:30%; }
  .deco-paper{ width:38px; height:38px; top:8%; right:10%; }
  .deco-swatch{ width:44px; height:44px; bottom:14%; right:16%; }
  .deco-star{ width:16px; height:16px; }
  .deco-path{ width:220px; height:120px; top:38%; right:6%; opacity:.5; }

  .contact-buttons-row{
    position:relative; z-index:5; display:flex; gap:clamp(14px,3vw,30px); justify-content:center;
    flex-wrap:wrap; margin-top:36px;
  }
  .glass-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-decoration:none; }
  .glass-btn .circle{
    width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--svc-glass-bg-strong); backdrop-filter:blur(10px); border:1px solid var(--svc-glass-border);
    box-shadow:0 12px 30px -10px rgba(17,17,17,.18); position:relative;
    transition: box-shadow .4s var(--ease-premium);
  }
  .glass-btn .circle svg{ width:22px; height:22px; stroke:var(--svc-ink); position:relative; z-index:2; }
  .glass-btn .circle b{ font-family:'Fraunces',serif; font-size:.82rem; color:var(--svc-ink); position:relative; z-index:2; }
  .glass-btn span.label{ font-size:.68rem; color:color-mix(in srgb, var(--svc-ink) 62%, transparent); font-weight:600; }
  .glass-btn:hover .circle{ box-shadow:0 20px 44px -12px rgba(232,93,43,.5), 0 0 0 1px rgba(232,93,43,.4); }

  /* Brand-colored icon circles, so each social link reads as its own logo
     rather than a neutral outline glyph. */
  .glass-btn .circle.brand-email{ background:linear-gradient(135deg, var(--orange-1), var(--orange-2)); border-color:rgba(255,255,255,.5); }
  .glass-btn .circle.brand-email svg{ stroke:#fff; }
  .glass-btn:hover .circle.brand-email{ box-shadow:0 20px 44px -12px rgba(232,93,43,.6), 0 0 0 1px rgba(232,93,43,.5); }

  .glass-btn .circle.brand-whatsapp{ background:#25D366; border-color:rgba(255,255,255,.5); }
  .glass-btn .circle.brand-whatsapp svg{ stroke:none; }
  .glass-btn:hover .circle.brand-whatsapp{ box-shadow:0 20px 44px -12px rgba(37,211,102,.6), 0 0 0 1px rgba(37,211,102,.5); }

  .glass-btn .circle.brand-linkedin{ background:#0A66C2; border-color:rgba(255,255,255,.5); }
  .glass-btn .circle.brand-linkedin b{ color:#fff; font-weight:800; font-size:.98rem; letter-spacing:-0.02em; }
  .glass-btn:hover .circle.brand-linkedin{ box-shadow:0 20px 44px -12px rgba(10,102,194,.6), 0 0 0 1px rgba(10,102,194,.5); }

  .glass-btn .circle.brand-behance{ background:#1769FF; border-color:rgba(255,255,255,.5); }
  .glass-btn .circle.brand-behance b{ color:#fff; font-weight:800; font-size:.86rem; }
  .glass-btn:hover .circle.brand-behance{ box-shadow:0 20px 44px -12px rgba(23,105,255,.6), 0 0 0 1px rgba(23,105,255,.5); }

  .contact-lower{
    display:grid; grid-template-columns:1fr 1.2fr; gap:26px;
    padding:clamp(24px,4vw,40px) clamp(20px,5vw,56px) clamp(32px,5vw,56px);
  }
  

  .avatar-card{
    background:linear-gradient(165deg, color-mix(in srgb, var(--orange-1) 12%, var(--svc-cream-1)) 0%, var(--svc-cream-2) 100%);
    border:none; border-radius:26px; position:relative; overflow:hidden; min-height:420px;
    display:flex; flex-direction:column; justify-content:flex-end; padding:24px; opacity:0; transform:translateX(-24px);
    transition: box-shadow .45s var(--ease-premium);
  }
  .avatar-card:hover{ box-shadow:0 30px 60px -24px rgba(232,93,43,.28); }
  .avatar-bubble{
    position:absolute; top:22px; left:22px; background:var(--svc-glass-bg-strong); border-radius:16px 16px 16px 4px;
    padding:10px 14px; box-shadow:0 12px 24px -10px rgba(17,17,17,.18); transform:rotate(-3deg);
    font-size:.78rem; color:var(--svc-ink); font-weight:700;
  }
  .avatar-bubble small{ display:block; font-weight:500; color:color-mix(in srgb, var(--svc-ink) 62%, transparent); margin-top:2px; }
  .avatar-availability{
    display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.76rem; font-weight:600; color:var(--svc-ink);
  }
  .avail-dot{ width:9px; height:9px; border-radius:50%; background:#3FC978; position:relative; }
  .avail-dot::after{
    content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid #3FC978;
    animation:availPulse 2s ease-out infinite;
  }
  @keyframes availPulse{ 0%{ transform:scale(.5); opacity:.9;} 100%{ transform:scale(1.8); opacity:0; } }

  .avatar-photo-wrap{
    position:relative; width:100%; aspect-ratio:1/1; border-radius:20px; overflow:hidden;
    box-shadow:0 20px 40px -20px rgba(20,18,16,.35);
  }
  .avatar-photo{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }

  .quote-card{
    background:var(--svc-glass-bg-strong); backdrop-filter:blur(16px); border:none;
    border-radius:26px; padding:clamp(28px,4vw,44px); box-shadow:0 20px 50px -30px rgba(90,50,20,.3);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px;
    position:relative; overflow:hidden; opacity:0; transform:translateY(24px);
    transition: box-shadow .45s var(--ease-premium);
  }
  .quote-card:hover{ box-shadow:0 30px 60px -24px rgba(232,93,43,.28); }
  .quote-mark{ opacity:.9; }
  .quote-text{
    font-family:'Fraunces',serif; font-weight:700; letter-spacing:-0.01em;
    font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.35; color:var(--svc-ink);
  }
  .quote-author{ font-size:.9rem; font-weight:700; color:var(--orange-2); }
  .quote-sub{ font-size:.82rem; line-height:1.6; color:color-mix(in srgb, var(--svc-ink) 60%, transparent); max-width:40ch; }

  .cc-ring, .cc-dot{
    position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
    transform:translate(-50%,-50%); opacity:0; transition:opacity .25s ease;
  }
  .cc-ring{ width:34px; height:34px; border:1.4px solid var(--svc-ink); display:flex; align-items:center; justify-content:center; }
  .cc-ring span{ font-size:.56rem; font-weight:700; color:var(--svc-ink); opacity:0; letter-spacing:.02em; }
  .cc-dot{ width:6px; height:6px; background:var(--svc-ink); }
  .cc-ring.active, .cc-dot.active{ opacity:1; }
  .cc-ring.grow{ width:60px; height:60px; }
  .cc-ring.grow span{ opacity:1; }
  

  /* ============ FOOTER ============ */
  .site-footer{
    position:relative; z-index:2;
    padding:26px clamp(20px,4vw,56px);
    border-top:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  .site-footer p{
    margin:0; font-size:.8rem; color:var(--grey); letter-spacing:.01em;
  }
  .site-footer .footer-heart{ color:var(--gold); }
  .footer-social{ display:flex; align-items:center; gap:16px; order:2; }
  .footer-social a{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    color:var(--grey); border:1px solid var(--card-border);
    transition: color .3s var(--ease-premium), border-color .3s var(--ease-premium), transform .3s var(--ease-premium);
  }
  .footer-social a svg{ width:15px; height:15px; fill:currentColor; }
  .footer-social a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
  

  /* ============ CREATIVE PROCESS — staggered pastel step cards, an icon
     strip, and a "delivered" summary bar. Kept intentionally on the site's
     light gold/ink palette regardless of dark mode, same as before.
     Namespaced with proc- so nothing here collides with the rest of the site.
     Glass treatment: translucent + blurred panel, consistent with the
     .svc-glass-body language used in the services section. ============ */
  .proc-section{
    position:relative;
    max-width:1320px;
    margin:0 auto;
    padding:44px 20px;
    overflow:hidden;
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid rgba(255,255,255,.55);
    border-radius:40px;
    box-shadow:0 40px 90px -40px rgba(17,17,17,.18);
    color:#111111;
  }
  .proc-section::before,
  .proc-section::after{
    content:''; position:absolute; width:640px; height:640px; border-radius:50%;
    filter:blur(110px); z-index:0; pointer-events:none;
  }
  .proc-section::before{ background:radial-gradient(circle, rgba(47,111,237,0.16), transparent 70%); top:-220px; left:-160px; }
  .proc-section::after{ background:radial-gradient(circle, rgba(47,111,237,0.10), transparent 70%); bottom:-260px; right:-200px; }
  .proc-section > *{ position:relative; z-index:1; }
  

  .proc-head{
    position:relative;
    display:flex; align-items:flex-end; justify-content:space-between; gap:60px; margin-bottom:76px;
    min-height:340px;
    padding-right:8px;
  }
  .proc-head-illus{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 22%, #000 52%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 22%, #000 52%);
  }
  .proc-head-illus img{
    width:100%; height:100%; display:block;
    object-fit:fill; object-position:right center;
  }
  .proc-head-left{ max-width:640px; }
  .proc-eyebrow{
    display:inline-block; font-family:'Sora',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:4px; text-transform:uppercase; color:#2F6FED; margin-bottom:24px;
    opacity:0; transform:translateY(14px);
  }
  .proc-headline{
    font-family:'Poppins',sans-serif !important; font-style:normal !important; font-optical-sizing:auto;
    font-size:clamp(2.5rem, 6vw, 4.5rem); font-weight:500 !important; line-height:1;
    letter-spacing:-0.01em; color:#111111; margin-bottom:28px; opacity:0; transform:translateY(20px);
  }
  .proc-headline .proc-accent{ color:#2F6FED; font-weight:700 !important; }
  .proc-subcopy{
    max-width:420px; font-family:'Sora',sans-serif; font-size:18px; line-height:1.8;
    color:#666666; opacity:0; transform:translateY(20px);
  }
  .proc-head-right{ flex-shrink:0; padding-bottom:6px; opacity:0; transform:translateY(20px); }
  /* Nudge just the eyebrow + headline left so their left edge lines up with
     the "A" of "A thoughtful journey..." below (the paragraph stays put). */
  .proc-eyebrow, .proc-headline{ margin-left:-4px; }

  .proc-cta{
    display:inline-flex; align-items:center; gap:16px; height:56px; padding:0 10px 0 28px;
    border-radius:999px; background:#111111;
    box-shadow:0 15px 40px rgba(17,17,17,.22); color:#fff; font-family:'Sora',sans-serif;
    font-size:16px; font-weight:600; white-space:nowrap; cursor:pointer; border:none;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease;
  }
  .proc-cta .proc-arrow-wrap{
    width:38px; height:38px; border-radius:50%; background:#2F6FED; display:flex; align-items:center;
    justify-content:center; flex-shrink:0; transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .proc-cta .proc-arrow-wrap svg{ width:16px; height:16px; stroke:#111111; transition:transform .35s ease; }
  .proc-cta:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(17,17,17,.3); background:#000; }
  .proc-cta:hover .proc-arrow-wrap{ transform:rotate(45deg); }

  

  /* -------- top row: 6 staggered pastel "phone card" illustrations -------- */
  .proc-cards-row{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:22px;
    margin-bottom:64px; padding-top:24px;
  }
  

  .proc-card{
    position:relative; aspect-ratio:3/4.3; border-radius:22px; overflow:hidden;
    background:color-mix(in srgb, var(--pc-bg, #fff) 82%, transparent);
    backdrop-filter:blur(14px) saturate(190%); -webkit-backdrop-filter:blur(14px) saturate(190%);
    border:1px solid rgba(255,255,255,.5);
    box-shadow:0 18px 40px -18px rgba(17,17,17,.18);
    opacity:0; transform:translateY(36px);
    transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .45s ease, border-color .45s ease;
  }
  .proc-card.in-view{ opacity:1; transform:translateY(var(--pc-y, 0)); }
  .proc-card:hover{
    transform:translateY(calc(var(--pc-y, 0px) - 10px));
    background:color-mix(in srgb, var(--pc-bg, #fff) 96%, transparent);
    border-color:color-mix(in srgb, var(--pc-bg, #fff) 70%, white);
    box-shadow:
      0 30px 60px -20px color-mix(in srgb, var(--pc-bg, #111) 55%, transparent),
      0 10px 24px -8px color-mix(in srgb, var(--pc-bg, #111) 45%, transparent);
  }
  .proc-card:nth-child(1){ --pc-y:-14px; }
  .proc-card:nth-child(2){ --pc-y:16px; }
  .proc-card:nth-child(3){ --pc-y:-8px; }
  .proc-card:nth-child(4){ --pc-y:18px; }
  .proc-card:nth-child(5){ --pc-y:-16px; }
  .proc-card:nth-child(6){ --pc-y:10px; }
  

  .proc-card-icon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .proc-card-icon svg{ width:44%; height:44%; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
  .proc-card:hover .proc-card-icon svg{ transform:scale(1.08) rotate(-3deg); }
  .proc-card-photo{ position:absolute; inset:0; overflow:hidden; }
  .proc-card-photo img{
    position:absolute; left:50%; bottom:-4%; transform:translateX(-50%);
    height:106%; width:auto; max-width:none; object-fit:contain;
    filter:drop-shadow(0 16px 22px rgba(17,17,17,.16));
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .proc-card:hover .proc-card-photo img{ transform:translateX(-50%) scale(1.05); }
  .proc-card-tag{
    position:absolute; left:14px; top:14px; display:flex; align-items:center; gap:8px;
    font-family:'Sora',sans-serif; font-size:11px; font-weight:700; color:#ffffff;
    background:rgba(17,17,17,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
    padding:6px 10px 6px 8px; border-radius:99px;
  }
  .proc-card-tag em{
    font-style:normal; width:18px; height:18px; border-radius:50%; background:#ffffff; color:#111111;
    display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700;
  }

  /* -------- bottom row: 6 numbered step summaries -------- */
  .proc-steps-row{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:28px; margin-bottom:56px;
  }
  

  .proc-step{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-premium), transform .6s var(--ease-premium); }
  .proc-step.in-view{ opacity:1; transform:translateY(0); }
  .proc-step-icon{
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,247,228,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(47,111,237,.35);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
  .proc-step-icon svg{ width:16px; height:16px; stroke:#2F6FED; }
  .proc-step-title{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; font-weight:700; color:#111111; margin-bottom:6px; letter-spacing:-0.01em; }
  .proc-step-title span{ color:#2F6FED; margin-right:4px; }
  .proc-step-desc{ font-family:'Sora',sans-serif; font-size:13.5px; line-height:1.65; color:#6B6B6B; }

  /* -------- bottom summary bar -------- */
  .proc-summary{
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
    background:rgba(255,255,255,.4); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,.55); border-radius:24px;
    padding:26px 32px; opacity:0; transform:translateY(24px);
    transition:opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
  }
  .proc-summary.in-view{ opacity:1; transform:translateY(0); }
  .proc-summary-left{ display:flex; align-items:center; gap:18px; flex:1; min-width:280px; }
  .proc-summary-emoji{
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,243,214,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(47,111,237,.25); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .proc-summary-title{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; font-weight:700; color:#111111; margin-bottom:3px; }
  .proc-summary-sub{ font-family:'Sora',sans-serif; font-size:13px; color:#6B6B6B; }
  .proc-progress{
    width:min(220px, 30vw); height:6px; border-radius:99px; background:rgba(17,17,17,.08);
    position:relative; overflow:hidden; margin-left:12px; flex-shrink:0;
  }
  .proc-progress-fill{
    position:absolute; inset:0; width:0%; border-radius:99px; background:#2F6FED;
    transition:width 1.1s cubic-bezier(.2,.8,.2,1) .2s;
  }
  .proc-summary.in-view .proc-progress-fill{ width:100%; }
  .proc-progress-label{ font-family:'Sora',sans-serif; font-size:11px; font-weight:700; color:#2F6FED; margin-left:8px; white-space:nowrap; }
  .proc-summary-right{ display:flex; align-items:center; gap:18px; }
  .proc-summary-right span{ font-family:'Sora',sans-serif; font-size:14px; color:#111111; font-weight:600; white-space:nowrap; }
  .proc-summary-cta{
    display:inline-flex; align-items:center; gap:12px; height:48px; padding:0 8px 0 22px;
    border-radius:999px; background:#111111; color:#fff; font-family:'Sora',sans-serif;
    font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer;
    transition:transform .35s var(--ease-premium), box-shadow .35s ease;
  }
  .proc-summary-cta .proc-arrow-wrap{
    width:32px; height:32px; border-radius:50%; background:#2F6FED; display:flex; align-items:center;
    justify-content:center; flex-shrink:0; transition:transform .35s var(--ease-premium);
  }
  .proc-summary-cta .proc-arrow-wrap svg{ width:14px; height:14px; stroke:#111111; }
  .proc-summary-cta:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(17,17,17,.24); }
  .proc-summary-cta:hover .proc-arrow-wrap{ transform:rotate(45deg); }