:root{
    --bg:#0A0A09;
    --bg-alt:#0E1712;
    --bg-raise:#122019;
    --ink:#FFFFFF;
    --ink-dim:#A9B7AC;
    --ink-faint:#586158;
    --accent:#8FD14F;
    --accent-deep:#1F5C3D;
    --accent-dim:#274430;
    --line:rgba(255,255,255,0.11);
    --line-strong:rgba(255,255,255,0.22);
    --ease:cubic-bezier(.16,.84,.32,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{background:var(--bg);}
  html,body{height:100%;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Instrument Sans', sans-serif;
    font-size:16px;
    line-height:1.5;
    overflow-x:hidden;
    cursor:none;
  }
  ::selection{background:var(--accent);color:#0B0B0A;}

  h1,h2,h3,.display{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:0.98;
    text-transform:none;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }

  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  button{font:inherit;color:inherit;background:none;border:none;cursor:none;}

  .wrap{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,64px);
  }

  /* ---------- grain ---------- */
  .grain{
    position:fixed; inset:0; z-index:9998; pointer-events:none;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
    animation:grain 1s steps(4) infinite;
  }
  @keyframes grain{
    0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
    50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}
    100%{transform:translate(0,0)}
  }

  /* ---------- custom cursor ---------- */
  .cursor-dot,.cursor-ring{
    position:fixed; top:0; left:0; pointer-events:none; z-index:10500;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--accent);
  }
  .cursor-ring{
    width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;
    transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  }
  .cursor-ring span{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
    opacity:0; transition:opacity .25s var(--ease);
    white-space:nowrap; color:#0B0B0A;
  }
  .cursor-ring.big{
    width:96px;height:96px;
    background:var(--accent);
    border-color:var(--accent);
  }
  .cursor-ring.big span{opacity:1;}
  @media (hover:none), (pointer:coarse){
    .cursor-dot,.cursor-ring{display:none;}
    body{cursor:auto;}
    a,button{cursor:pointer;}
  }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:500;
    padding:22px 0;
    transition:background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease), backdrop-filter .5s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(11,11,10,0.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--line);
    padding:16px 0;
  }
  nav.wrap{display:flex;align-items:center;justify-content:space-between;}
  .logo{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:700; font-size:1.05rem; letter-spacing:0.02em;
  }
  .logo sup{font-size:0.55em; top:-0.9em;}
  .nav-links{display:flex; gap:40px; align-items:center;}
  .nav-links a{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-dim); position:relative; padding:4px 0;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--accent); transition:width .35s var(--ease);
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
    border:1px solid var(--line-strong); padding:10px 18px; border-radius:999px;
    transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  }
  .nav-cta:hover{background:var(--accent); border-color:var(--accent); color:#0B0B0A;}
  .burger{display:none; flex-direction:column; gap:5px; width:26px;}
  .burger span{display:block; height:1px; background:var(--ink); width:100%;}
  @media (max-width:1024px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .burger{display:flex;}
  }

  .mobile-menu{
    position:fixed; inset:0; background:var(--bg); z-index:600;
    display:flex; flex-direction:column; justify-content:center; padding:0 28px;
    transform:translateY(-100%); transition:transform .6s var(--ease);
  }
  .mobile-menu.open{transform:translateY(0);}
  .mobile-menu a{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
    font-size:2.6rem; padding:14px 0; border-bottom:1px solid var(--line);
  }
  .mobile-close{position:absolute; top:22px; right:28px; font-family:'IBM Plex Mono',monospace; font-size:0.8rem; letter-spacing:0.1em;}

  /* guaranteed above-the-fold fade-in, no JS/IntersectionObserver dependency */
  .hero-fade{opacity:0; animation:heroFadeIn .8s var(--ease) forwards;}
  @keyframes heroFadeIn{ to{opacity:1;} }
  @media (prefers-reduced-motion:reduce){ .hero-fade{opacity:1; animation:none;} }

  @keyframes badgePulse{
    0%{transform:scale(0.6); opacity:0.9;}
    100%{transform:scale(2.2); opacity:0;}
  }

  /* ---------- single floating live-metrics card (fills right-side hero space) ---------- */
  .hero-metrics-single{
    position:absolute; z-index:2; top:26%; right:clamp(20px,6vw,80px);
    width:264px; padding:24px; border-radius:14px;
    background:linear-gradient(165deg, rgba(20,28,20,0.75), rgba(10,10,9,0.7));
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(143,209,79,0.22);
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
    animation:hmFloat 6.5s ease-in-out infinite;
  }
  @keyframes hmFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
  .hero-metrics-single .hm-head{display:flex; align-items:center; gap:8px; margin-bottom:18px;}
  .hero-metrics-single .hm-live-dot{width:6px; height:6px; border-radius:50%; background:#5FEA6A; position:relative; flex-shrink:0;}
  .hero-metrics-single .hm-live-dot::after{
    content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid #5FEA6A;
    animation:badgePulse 1.8s ease-out infinite;
  }
  .hero-metrics-single .hm-head span{
    font-family:'IBM Plex Mono',monospace; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(255,255,255,0.65);
  }
  .hero-metrics-single .hm-chart{width:100%; height:50px; margin-bottom:18px; display:block;}
  .hero-metrics-single .hm-chart path:not(.hm-fill){
    fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:220; stroke-dashoffset:220; animation:drawChart2 2.4s ease-out 0.6s forwards;
  }
  @keyframes drawChart2{ to{stroke-dashoffset:0;} }
  .hero-metrics-single .hm-row{
    display:flex; justify-content:space-between; align-items:center; padding:10px 0;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  .hero-metrics-single .hm-row:first-of-type{border-top:none;}
  .hero-metrics-single .hm-row .hm-label{font-family:'Instrument Sans',sans-serif; font-size:0.8rem; color:rgba(255,255,255,0.6);}
  .hero-metrics-single .hm-row .hm-value{
    display:flex; align-items:center; gap:5px;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.05rem; color:#fff;
  }
  .hero-metrics-single .hm-value.up{color:#5FEA6A;}
  .hero-metrics-single .hm-value .hm-arrow{font-size:0.75rem;}
  @media (max-width:1399px){ .hero-metrics-single{display:none;} }
  @media (prefers-reduced-motion:reduce){
    .hero-metrics-single{animation:none;}
    .hero-metrics-single .hm-chart path{animation:none; stroke-dashoffset:0;}
  }

  /* ---------- hero v3: cinematic full-bleed with overlapping type ---------- */
  .hero{
    position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; padding-top:120px; padding-bottom:64px;
  }
  .hero-media{
    position:absolute; inset:0; z-index:0; overflow:hidden;
    background:var(--bg);
  }
  .hero-grid{
    position:absolute; inset:0; z-index:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 85% 70% at 60% 45%, black 20%, transparent 80%);
    mask-image:radial-gradient(ellipse 85% 70% at 60% 45%, black 20%, transparent 80%);
  }
  .hero-glow{
    position:absolute; top:45%; left:68%; transform:translate(-50%,-50%);
    width:900px; height:700px; max-width:90vw;
    background:radial-gradient(ellipse at center, rgba(143,209,79,0.16), transparent 68%);
    filter:blur(20px);
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(10,10,9,0) 0%, rgba(10,10,9,0.06) 50%, rgba(10,10,9,0.7) 100%);
  }

  .hero-top, .hero-giant-wrap, .hero-bottom{position:relative; z-index:2;}
  .hero-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto;}
  .hero-top .loc{text-align:right;}

  /* spinning badge */
  .hero-spin{
    position:absolute; z-index:2; top:150px; right:clamp(20px,5vw,64px);
    width:120px; height:120px; pointer-events:none;
  }
  .hero-spin svg{width:100%; height:100%; animation:spin 16s linear infinite;}
  .hero-spin .spin-dot{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:8px; height:8px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 16px 4px rgba(143,209,79,0.6);
  }
  @keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  @media (max-width:900px){ .hero-spin{display:none;} }

  /* ---------- auto-cycling trending showcase card ---------- */
  .trend-showcase{
    position:absolute; z-index:2; top:270px; right:clamp(20px,5vw,64px);
    width:250px; padding:18px; border-radius:16px;
    background:linear-gradient(165deg, rgba(20,28,20,0.78), rgba(10,10,9,0.72));
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
    animation:metricsFloat 6s ease-in-out infinite;
  }
  @keyframes metricsFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
  .trend-head{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
  .trend-head svg{width:16px; height:16px; flex-shrink:0; transition:opacity .3s var(--ease);}
  .trend-head .trend-platform-name{
    font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(255,255,255,0.7); transition:opacity .3s var(--ease);
  }
  .trend-head .trend-tag{
    margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase;
    padding:3px 9px; border-radius:999px; background:rgba(231,84,128,0.22); color:#ff9fb8;
    display:flex; align-items:center; gap:4px;
  }
  .trend-head .trend-tag .live-dot{
    width:5px; height:5px; border-radius:50%; background:#ff4d6d; animation:badgePulse 1.6s ease-out infinite;
  }
  .trend-media{
    position:relative; width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; margin-bottom:12px;
    background:#111;
  }
  .trend-media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:grayscale(0.15) contrast(1.05) brightness(0.85);
    opacity:1; transition:opacity .5s var(--ease);
  }
  .trend-media img.fading{opacity:0;}
  .trend-media::after{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.35; pointer-events:none;}
  .trend-stat{
    display:flex; align-items:center; gap:6px;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.95rem; color:#fff;
    transition:opacity .3s var(--ease);
  }
  .trend-stat.fading, .trend-head.fading > *{opacity:0;}
  .trend-dots{display:flex; gap:5px; margin-top:12px;}
  .trend-dots span{width:14px; height:2px; background:rgba(255,255,255,0.2); border-radius:2px; transition:background .3s var(--ease);}
  .trend-dots span.active{background:var(--accent);}

  @media (max-width:1150px){ .trend-showcase{display:none;} }
  @media (prefers-reduced-motion:reduce){
    .trend-showcase{animation:none;}
    .trend-head .trend-tag .live-dot{animation:none;}
  }



  .hero-giant-wrap{margin-top:60px; margin-bottom:30px;}
  .hero-giant{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-0.02em;
    line-height:1.02; color:#fff;
    font-size:clamp(2.8rem, 7.6vw, 7.2rem);
    max-width:960px;
  }
  .hero-giant .accent{
    color:var(--accent); font-style:italic; font-weight:400;
    font-family:'Bricolage Grotesque',serif;
  }

  .hero-bottom{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
    border-top:1px solid rgba(255,255,255,0.15); padding-top:30px;
  }
  .hero-bottom-left{max-width:480px;}
  .hero-sub{color:var(--ink-dim); font-size:1.05rem; margin-bottom:0;}
  .hero-stats{display:flex; gap:0;}
  .hero-stats .s{padding-right:26px; margin-right:26px; border-right:1px solid rgba(255,255,255,0.15);}
  .hero-stats .s:last-child{border-right:none; margin-right:0; padding-right:0;}
  .hero-stats .s strong{display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.7rem; color:#fff;}
  .hero-stats .s span{display:block; margin-top:2px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}

  @media (max-width:900px){
    .hero{padding-top:110px; padding-bottom:50px;}
    .hero-top{flex-direction:column; gap:8px;}
    .hero-top .loc{text-align:left;}
    .hero-bottom{flex-direction:column; align-items:flex-start; gap:26px;}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-spin svg{animation:none;}
  }


  /* ---------- buttons (shared) ---------- */
  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:#0A0A09;
    padding:16px 30px; border-radius:999px;
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(143,209,79,0.25);}
  .btn-ghost{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid var(--line-strong); color:var(--ink);
    padding:16px 30px; border-radius:999px;
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    transition:border-color .3s var(--ease);
  }
  .btn-ghost:hover{border-color:var(--ink);}

  /* ---------- section shell ---------- */
  section{position:relative;}
  .section-pad{padding:150px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:80px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(2.2rem,5.2vw,4.4rem);}
  .section-head .sub{max-width:280px; color:var(--ink-dim); font-size:0.98rem;}
  .eyebrow{display:block; margin-bottom:18px;}

  /* ---------- work ---------- */
  .work-list{display:flex; flex-direction:column;}
  .work-item{
    display:grid; grid-template-columns:0.9fr 1.4fr; gap:50px; align-items:center;
    padding:60px 0; border-top:1px solid var(--line);
    position:relative;
  }
  .work-item:last-child{border-bottom:1px solid var(--line);}
  .work-item:nth-child(even){grid-template-columns:1.4fr 0.9fr;}
  .work-item:nth-child(even) .work-visual{order:2;}
  .work-visual{
    position:relative; aspect-ratio:4/3; border-radius:4px; overflow:hidden;
    background:linear-gradient(135deg,#1b1a16,#0d0c0a);
  }
  .work-visual .fill{
    position:absolute; inset:0;
    transform:scale(1.08); transition:transform .8s var(--ease);
  }
  .work-visual .fill img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(0.25) contrast(1.05) brightness(0.92);
  }
  .work-item:hover .fill{transform:scale(1);}
  .work-visual::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:var(--accent-deep); mix-blend-mode:color; opacity:0.55;
  }
  .work-visual::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(10,10,9,0) 40%, rgba(10,10,9,0.6));
  }
  .work-index{
    position:absolute; top:18px; left:18px; z-index:2;
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink); letter-spacing:0.08em;
  }
  /* ---------- client mentions list (subtle, not heavily highlighted) ---------- */
  .client-list{border-top:1px solid var(--line);}
  .client-row{
    display:flex; align-items:center; gap:22px; padding:20px 4px;
    border-bottom:1px solid var(--line); color:var(--ink-dim);
    transition:background .3s var(--ease), padding-left .3s var(--ease);
  }
  .client-row .num{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-faint);
    width:28px; flex-shrink:0;
  }
  .client-row .name{
    font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:1.08rem; color:var(--ink);
    transition:color .3s var(--ease);
  }
  .client-row .industry{
    margin-left:auto; text-align:right;
    font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .client-row:hover{background:rgba(255,255,255,0.025); padding-left:12px;}
  .client-row:hover .name{color:var(--accent);}
  @media (max-width:640px){
    .client-row{gap:14px;}
    .client-row .industry{display:none;}
  }

  /* ---------- work list hover-preview (cursor-following thumbnail) ---------- */
  .work-hover-preview{
    position:fixed; top:0; left:0; width:220px; height:280px; border-radius:8px; overflow:hidden;
    pointer-events:none; z-index:400; opacity:0; transform:translate(-50%,-50%) scale(0.9);
    transition:opacity .35s var(--ease), transform .35s var(--ease); box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  .work-hover-preview.active{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .work-hover-preview img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.2) contrast(1.05) brightness(0.85);}
  .work-hover-preview::after{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.45;}
  .work-hover-preview .wp-tag{
    position:absolute; bottom:12px; left:12px; z-index:2;
    font-family:'IBM Plex Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
    color:#fff; background:rgba(10,10,9,0.55); padding:5px 10px; border-radius:999px;
  }
  @media (hover:none), (max-width:900px){ .work-hover-preview{display:none;} }

  /* ---------- inspiration marquee (big brands we admire) ---------- */
  .inspire-section{
    padding:80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    overflow:hidden; position:relative;
  }
  .inspire-label{text-align:center; margin-bottom:34px;}
  .inspire-label .mono{color:var(--ink-faint);}
  .inspire-label h3{
    font-size:clamp(1.3rem,2.6vw,1.8rem); margin-top:10px; color:var(--ink-dim); font-weight:600;
  }
  .inspire-track-wrap{overflow:hidden; white-space:nowrap;}
  .inspire-track{display:inline-flex; align-items:center; animation:marquee 34s linear infinite;}
  .inspire-track span.b-apple{color:#E8E8E8;}
  .inspire-track span.b-nike{color:#FF6A13;}
  .inspire-track span.b-airbnb{color:#FF5A5F;}
  .inspire-track span.b-spotify{color:#1DB954;}
  .inspire-track span.b-netflix{color:#E50914;}
  .inspire-track span.b-cocacola{color:#F40000;}
  .inspire-track span[class^="b-"]{opacity:0.85; transition:opacity .3s var(--ease), transform .3s var(--ease);}
  .inspire-track span[class^="b-"]:hover{opacity:1; transform:translateY(-3px);}
  .inspire-track span{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,3rem);
    color:var(--ink-faint); padding:0 34px; white-space:nowrap; letter-spacing:-0.01em;
    transition:color .3s var(--ease);
  }
  .inspire-track span:hover:not([class^="b-"]){color:var(--accent);}
  .inspire-track .dot{color:var(--accent); font-family:'Instrument Sans',sans-serif; font-weight:400;}

  /* ---------- animated social icons (footer) ---------- */
  .social-icons{display:flex; gap:14px; margin-top:8px;}
  .social-icons a{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-dim); transition:all .35s var(--ease);
  }
  .social-icons a svg{width:18px; height:18px; transition:transform .35s var(--ease);}
  .social-icons a:hover{background:var(--accent); border-color:var(--accent); color:#0A0A09; transform:translateY(-4px);}
  .social-icons a:hover svg{transform:scale(1.1) rotate(-6deg);}

  @media (prefers-reduced-motion:reduce){
    .inspire-track{animation:none;}
  }

  .media-tag{
    position:absolute; top:18px; right:18px; z-index:2;
    font-family:'IBM Plex Mono',monospace; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--bg); background:var(--accent); padding:5px 10px; border-radius:999px;
  }
  .work-info .client{font-size:clamp(1.7rem,3.4vw,2.7rem); margin-bottom:16px; transition:transform .4s var(--ease), color .4s var(--ease);}
  .work-item:hover .work-info .client{color:var(--accent); transform:translateX(10px);}
  .work-meta-row{display:flex; gap:28px; margin-bottom:20px; flex-wrap:wrap;}
  .work-meta-row .m{display:flex; flex-direction:column; gap:6px;}
  .work-meta-row .m .lbl{font-family:'IBM Plex Mono',monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}
  .work-meta-row .m .val{font-size:0.92rem; color:var(--ink-dim);}
  .work-impact{color:var(--ink-dim); max-width:420px; margin-bottom:22px; font-size:0.98rem;}
  .view-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    border-bottom:1px solid var(--line-strong); padding-bottom:4px;
  }

  /* ---------- services ---------- */
  .services-list{border-top:1px solid var(--line);}
  .service-row{
    display:grid; grid-template-columns:90px 1fr 40px; align-items:center;
    padding:36px 0; border-bottom:1px solid var(--line);
    cursor:none; position:relative; transition:padding .4s var(--ease);
  }
  .service-row .num{font-family:'IBM Plex Mono',monospace; color:var(--ink-faint); font-size:0.9rem;}
  .service-row h3{
    font-size:clamp(1.7rem,4.4vw,3.6rem); font-weight:600; color:var(--ink-dim);
    transition:color .4s var(--ease), transform .4s var(--ease);
  }
  .service-row .arrow{
    font-size:1.4rem; opacity:0; transform:translateX(-10px) rotate(-45deg);
    transition:opacity .4s var(--ease), transform .4s var(--ease); color:var(--accent);
  }
  .service-row:hover{padding-left:14px; padding-right:14px;}
  .service-row:hover h3{color:var(--ink); transform:translateX(8px);}
  .service-row:hover .arrow{opacity:1; transform:translateX(0) rotate(0deg);}
  .service-row:hover .num{color:var(--accent);}
  .service-desc{
    grid-column:2/3; max-height:0; overflow:hidden; opacity:0;
    transition:max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
    color:var(--ink-dim); font-size:0.95rem; max-width:520px;
  }
  .service-row.active .service-desc{max-height:80px; opacity:1; margin-top:14px;}

  /* ---------- big statement ---------- */
  .statement{
    padding:220px 0; display:flex; align-items:center; justify-content:center; text-align:center;
    overflow:hidden;
  }
  .statement h2{
    font-size:clamp(2.6rem,9vw,9rem); letter-spacing:-0.03em;
  }
  .statement h2 .dim{color:var(--ink-faint);}
  .statement h2 .accent{color:var(--accent); font-style:italic; font-family:'Bricolage Grotesque',serif; font-weight:400;}

  /* ---------- about ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
  .about-visual{
    aspect-ratio:3/4; border-radius:4px; overflow:hidden; position:relative;
    background:var(--bg-raise);
  }
  .about-visual video, .about-visual img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.2) contrast(1.05) brightness(0.85);}
  .about-visual::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:var(--accent-deep); mix-blend-mode:color; opacity:0.5;
  }
  .about-visual.real::before{opacity:0.12;}
  .about-visual.real img{filter:contrast(1.04) brightness(0.98) saturate(1.02);}
  .about-visual::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(10,10,9,0) 55%, rgba(10,10,9,0.65));
  }
  .about-copy .eyebrow{margin-bottom:22px;}
  .about-copy h2{font-size:clamp(2.1rem,4.6vw,3.6rem); margin-bottom:30px;}
  .about-copy p{color:var(--ink-dim); font-size:1.05rem; margin-bottom:20px; max-width:480px;}
  .formula{
    margin-top:36px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace; letter-spacing:0.06em; font-size:0.85rem;
  }
  .formula span{padding:10px 16px; border:1px solid var(--line-strong); border-radius:999px;}
  .formula .x{color:var(--accent);}

  /* ---------- process ---------- */
  .process-track{position:relative; padding-left:2px;}
  .process-line{
    position:absolute; left:29px; top:0; bottom:0; width:1px; background:var(--line);
  }
  .process-line-fill{
    position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent);
    transform-origin:top;
  }
  .process-step{display:grid; grid-template-columns:60px minmax(0,1fr) minmax(280px,430px); gap:34px; padding:48px 0; align-items:center;}
  .process-step .dot{align-self:start;}
  .process-step .dot{
    width:12px; height:12px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong);
    justify-self:center; margin-top:8px; position:relative; z-index:2; transition:background .4s var(--ease), border-color .4s var(--ease);
  }
  .process-step.in-view .dot{background:var(--accent); border-color:var(--accent);}
  .process-icon{
    width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:20px;
    transition:border-color .4s var(--ease), background .4s var(--ease);
  }
  .process-icon svg{width:22px; height:22px;}
  .process-step.in-view .process-icon{border-color:var(--accent); background:rgba(143,209,79,0.08);}
  .process-step h3{font-size:clamp(1.6rem,3.4vw,2.6rem); margin-bottom:12px; color:var(--ink-dim); transition:color .4s var(--ease);}
  .process-step.in-view h3{color:var(--ink);}
  .process-step p{color:var(--ink-dim); max-width:480px; margin-bottom:18px;}
  .process-points{list-style:none; display:flex; flex-direction:column; gap:10px; max-width:460px;}
  .process-points li{
    position:relative; padding-left:22px; color:var(--ink-dim); font-size:0.92rem;
    font-family:'IBM Plex Mono',monospace;
  }
  .process-points li::before{
    content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%;
    border:1px solid var(--accent);
  }

  /* ---------- results ---------- */
  .results-section{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .results-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:50px 40px;}
  .result{text-align:left; padding:0; border-left:1px solid var(--line); padding-left:26px;}
  .result:nth-child(3n+1){border-left:none; padding-left:0;}
  .result .num{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:clamp(2.6rem,5.6vw,4.6rem); color:var(--ink);
  }
  .result .num .accent{color:var(--accent);}
  .result .lbl{margin-top:10px; color:var(--ink-dim);}

  /* ---------- testimonials ---------- */
  .testi-wrap{max-width:920px;}
  .testi-slide{display:none;}
  .testi-slide.active{display:block; animation:fadeUp .8s var(--ease);}
  @keyframes fadeUp{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:translateY(0);}}
  .testi-avatar{
    width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:24px;
    border:2px solid var(--accent); background:var(--bg-raise);
  }
  .testi-quote{font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.25; margin-bottom:36px;}
  .testi-quote::before{content:'“'; color:var(--accent);}
  .testi-quote::after{content:'”'; color:var(--accent);}
  .testi-person .name{font-weight:600;}
  .testi-person .role{color:var(--ink-dim); font-size:0.9rem;}
  .testi-dots{display:flex; gap:10px; margin-top:50px;}
  .testi-dots button{width:26px; height:2px; background:var(--line-strong); transition:background .3s var(--ease);}
  .testi-dots button.active{background:var(--accent);}

  /* ---------- insights ---------- */
  .insights-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line);}
  .insight-card{background:var(--bg); padding:40px; display:flex; flex-direction:column; justify-content:space-between; min-height:340px; position:relative; overflow:hidden;}
  .insight-thumb{position:absolute; inset:0; z-index:0;}
  .insight-thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.3) contrast(1.05) brightness(0.4);}
  .insight-thumb::after{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.55;}
  .insight-card .cat, .insight-card h3, .insight-card .foot, .insight-card .media-tag{position:relative; z-index:1;}
  .insight-card .cat{color:var(--accent); margin-bottom:24px;}
  .insight-card h3{font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:600; max-width:380px;}
  .insight-card .foot{display:flex; justify-content:space-between; align-items:center; margin-top:30px; color:var(--ink-dim); font-size:0.85rem;}
  .insight-card::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
    transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
  }
  .insight-card:hover::after{transform:scaleX(1);}

  /* ---------- cta ---------- */
  .cta-section{
    padding:220px 0 180px; text-align:center; position:relative; overflow:hidden;
  }
  .cta-section h2{font-size:clamp(2.6rem,7.6vw,6.6rem); margin-bottom:10px;}
  .cta-section h2.dim{color:var(--ink-faint);}
  .cta-section .btn-primary{margin-top:50px; padding:20px 42px; font-size:0.85rem;}
  .cta-glow{
    position:absolute; left:50%; top:20%; transform:translateX(-50%);
    width:60vw; height:60vw; border-radius:50%;
    background:radial-gradient(circle, rgba(143,209,79,0.16), transparent 65%);
    pointer-events:none;
  }

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line); padding:80px 0 34px;}
  .footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px;}
  .footer-brand .logo{font-size:1.6rem; margin-bottom:16px;}
  .footer-brand p{color:var(--ink-dim); max-width:280px;}
  .footer-col .mono.head{color:var(--ink); margin-bottom:20px; display:block;}
  .footer-col a{display:block; color:var(--ink-dim); padding:6px 0; font-size:0.95rem; transition:color .3s var(--ease);}
  .footer-col a:hover{color:var(--accent);}
  .footer-bottom{
    border-top:1px solid var(--line); padding-top:26px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  }

  /* ---------- marquee strip ---------- */
  .marquee-strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:22px 0; overflow:hidden; white-space:nowrap; background:var(--bg-alt);
  }
  .marquee-track{display:inline-flex; align-items:center; animation:marquee 28s linear infinite;}
  .marquee-track span{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.1rem;
    color:var(--ink-dim); padding:0 20px; white-space:nowrap;
  }
  .marquee-track .dot{color:var(--accent); font-family:'Instrument Sans',sans-serif;}
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- clients wall ---------- */
  .clients-grid{
    display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line);
  }
  .clients-grid span{
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:38px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace; font-size:0.82rem; letter-spacing:0.04em;
    color:var(--ink-faint); transition:color .35s var(--ease), background .35s var(--ease);
  }
  .clients-grid span:hover{color:var(--ink); background:var(--bg-alt);}
  @media (max-width:900px){
    .clients-grid{grid-template-columns:repeat(2,1fr);}
  }
  .reveal{opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .work-item, .work-item:nth-child(even){grid-template-columns:1fr; gap:24px;}
    .work-item:nth-child(even) .work-visual{order:0;}
    .about-grid{grid-template-columns:1fr;}
    .results-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .result{border-left:none !important; padding-left:0 !important;}
    .result:nth-child(odd){border-right:1px solid var(--line); padding-right:20px;}
    .result:nth-child(even){padding-left:20px !important;}
    .insights-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr; row-gap:40px;}
    .section-pad{padding:100px 0;}
    .statement{padding:120px 0;}
  }
  @media (max-width:520px){
    .footer-top{grid-template-columns:1fr;}
    .hero-meta{flex-direction:column; align-items:flex-start; gap:10px;}
    .hero-meta .loc{text-align:left;}
    .formula{font-size:0.75rem;}
  }

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

/* ================= DETAIL PAGE TEMPLATES ================= */
.breadcrumb{
  padding:150px 0 0; font-family:'IBM Plex Mono',monospace; font-size:0.75rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);
}
.breadcrumb a{color:var(--ink-dim); transition:color .3s var(--ease);}
.breadcrumb a:hover{color:var(--accent);}

/* --- case study page --- */
.case-hero{padding:26px 0 60px;}
.case-hero .tag-row{display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap;}
.case-hero .tag-row span{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:7px 14px; border-radius:999px; color:var(--ink-dim);
}
.case-hero h1{font-size:clamp(2.4rem,7vw,6.4rem); max-width:1100px;}
.case-cover{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; margin-top:50px;
}
.case-cover img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.25) contrast(1.05) brightness(0.92);}
.case-cover::before{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.5;}
.case-cover .media-tag{position:absolute; top:18px; right:18px; z-index:2;}
.case-meta-strip{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:70px 0;
}
.case-meta-strip .m{padding:30px 26px; border-left:1px solid var(--line);}
.case-meta-strip .m:first-child{border-left:none;}
.case-meta-strip .lbl{font-family:'IBM Plex Mono',monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:10px;}
.case-meta-strip .val{font-size:1.1rem;}
.case-body{display:grid; grid-template-columns:220px 1fr; gap:60px; padding-bottom:100px;}
.case-body .side{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); padding-top:6px;}
.case-body .content h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:44px 0 18px;}
.case-body .content h2:first-child{margin-top:0;}
.case-body .content p{color:var(--ink-dim); font-size:1.05rem; max-width:640px; margin-bottom:18px;}
.case-gallery{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:50px 0;}
.case-gallery .g{position:relative; aspect-ratio:4/3; border-radius:4px; overflow:hidden;}
.case-gallery .g img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.25) contrast(1.05) brightness(0.9);}
.case-gallery .g::before{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.5;}
.case-gallery .g .media-tag{position:absolute; top:14px; right:14px; z-index:2;}
.case-nav{
  display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:50px 0; gap:30px; flex-wrap:wrap;
}
.case-nav a{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); transition:color .3s var(--ease);}
.case-nav a:hover{color:var(--accent);}
.case-nav .next{text-align:right;}

/* --- service page --- */
.service-hero{padding:26px 0 70px;}
.service-hero .num-big{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:1rem; margin-bottom:20px; display:block;}
.service-hero h1{font-size:clamp(2.4rem,7vw,6rem); max-width:900px;}
.service-hero p{color:var(--ink-dim); max-width:520px; margin-top:30px; font-size:1.1rem;}
.service-points{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); margin:70px 0;}
.service-points .p{background:var(--bg); padding:36px; }
.service-points .p .n{font-family:'IBM Plex Mono',monospace; color:var(--ink-faint); font-size:0.75rem; display:block; margin-bottom:14px;}
.service-points .p h3{font-size:1.3rem; margin-bottom:10px;}
.service-points .p p{color:var(--ink-dim); font-size:0.95rem;}
.service-related{padding:60px 0 100px; border-top:1px solid var(--line);}
.service-related .row{display:flex; gap:18px; flex-wrap:wrap; margin-top:30px;}
.service-related a{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:12px 20px; border-radius:999px; color:var(--ink-dim); transition:all .3s var(--ease);
}
.service-related a:hover{border-color:var(--accent); color:var(--accent);}

/* --- insight article page --- */
.article-hero{padding:26px 0 40px;}
.article-hero .cat{color:var(--accent); display:block; margin-bottom:22px;}
.article-hero h1{font-size:clamp(2.2rem,6vw,4.6rem); max-width:900px;}
.article-meta{display:flex; gap:26px; margin-top:30px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.05em;}
.article-cover{position:relative; width:100%; aspect-ratio:16/8; border-radius:4px; overflow:hidden; margin:50px 0;}
.article-cover img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.3) contrast(1.05) brightness(0.85);}
.article-cover::before{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.55;}
.article-cover .media-tag{position:absolute; top:18px; right:18px; z-index:2;}
.article-body{max-width:720px; margin:0 auto; padding-bottom:80px;}
.article-body h2{font-size:clamp(1.5rem,3vw,2rem); margin:44px 0 16px;}
.article-body p{color:var(--ink-dim); font-size:1.08rem; margin-bottom:20px; line-height:1.7;}
.article-body blockquote{
  border-left:2px solid var(--accent); padding-left:24px; margin:36px 0; font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.3rem; color:var(--ink);
}
.related-articles{border-top:1px solid var(--line); padding:70px 0 100px;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:34px;}
.related-grid a{background:var(--bg); padding:30px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between;}
.related-grid a .cat{color:var(--accent); font-size:0.68rem; margin-bottom:14px;}
.related-grid a h3{font-size:1.15rem;}

@media (max-width:900px){
  .case-meta-strip{grid-template-columns:1fr 1fr;}
  .case-meta-strip .m:nth-child(3){border-left:none;}
  .case-body{grid-template-columns:1fr;}
  .case-gallery{grid-template-columns:1fr;}
  .service-points{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
}

/* ================= DEMO SHOWCASE: SIDEBAR-LIST LAYOUT ================= */
.showcase-layout{display:grid; grid-template-columns:280px 1fr; gap:50px; align-items:start;}
.showcase-sidebar{
  display:flex; flex-direction:column; border-top:1px solid var(--line);
  position:sticky; top:110px;
}
.sidebar-item{
  display:flex; align-items:center; gap:14px; padding:18px 4px;
  border-bottom:1px solid var(--line); text-align:left; cursor:none;
  transition:padding-left .3s var(--ease), background .3s var(--ease);
}
.sidebar-item .si-num{color:var(--ink-faint); font-size:0.7rem; flex-shrink:0;}
.sidebar-item .si-label{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink-dim);
  transition:color .3s var(--ease);
}
.sidebar-item .si-arrow{margin-left:auto; opacity:0; transform:translateX(-6px); color:var(--accent); transition:all .3s var(--ease);}
.sidebar-item:hover{padding-left:12px;}
.sidebar-item:hover .si-label{color:var(--ink);}
.sidebar-item.active{background:rgba(143,209,79,0.06); padding-left:16px;}
.sidebar-item.active .si-num{color:var(--accent);}
.sidebar-item.active .si-label{color:var(--ink);}
.sidebar-item.active .si-arrow{opacity:1; transform:translateX(0);}

.showcase-content{position:relative; min-height:400px;}
.demo-panel{display:none;}
.demo-panel.active{display:block; animation:panelFadeSimple .35s var(--ease);}
@keyframes panelFadeSimple{ from{opacity:0;} to{opacity:1;} }
.demo-caption{margin-top:20px; color:var(--ink-faint);}

@media (max-width:900px){
  .showcase-layout{grid-template-columns:1fr; gap:0;}
  .showcase-sidebar{
    position:static; flex-direction:row; overflow-x:auto; border-top:none; border-bottom:1px solid var(--line);
    margin-bottom:34px; padding-bottom:2px;
  }
  .sidebar-item{border-bottom:none; border-right:1px solid var(--line); padding:14px 18px; white-space:nowrap; flex-shrink:0;}
  .sidebar-item .si-arrow{display:none;}
  .sidebar-item:hover{padding-left:18px;}
}
.ds-block{margin-bottom:56px;}
.ds-block:last-child{margin-bottom:0;}
.ds-subhead{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:24px;
}

.demo-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.demo-g-item{position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; border:1px solid var(--line); opacity:0; transform:translateY(12px);}
.demo-g-item.in{opacity:1; transform:translateY(0); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.demo-g-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.demo-g-item:hover img{transform:scale(1.05);}

.demo-video-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:#000; opacity:0; transform:translateY(12px); }
.demo-video-wrap.in{opacity:1; transform:translateY(0); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.demo-video-wrap video{width:100%; height:100%; object-fit:cover; display:block;}

.video-motion-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:30px; align-items:start;}
.vm-reels .demo-reels{grid-template-columns:repeat(2,1fr); max-width:none;}
@media (max-width:900px){
  .video-motion-grid{grid-template-columns:1fr;}
}

.demo-reels{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:820px;}
.reel-frame{position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); opacity:0; transform:translateY(12px);}
.reel-frame.in{opacity:1; transform:translateY(0); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.reel-frame video{width:100%; height:100%; object-fit:cover;}
.reel-frame::after{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.3; pointer-events:none;}
.reel-frame .media-tag{position:absolute; bottom:14px; left:14px; top:auto; right:auto; z-index:2;}

@media (max-width:700px){
  .demo-gallery{grid-template-columns:repeat(2,1fr);}
  .demo-reels{grid-template-columns:repeat(2,1fr); max-width:none;}
}

  .team-photo.real::after{opacity:0.12;}
  .team-photo.real img{filter:contrast(1.04) brightness(0.98) saturate(1.02);}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
.team-card{background:var(--bg); padding:0 0 30px;}
.team-photo{position:relative; aspect-ratio:4/5; overflow:hidden; margin-bottom:22px;}
.team-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.3) contrast(1.05) brightness(0.85); transition:transform .6s var(--ease);}
.team-card:hover .team-photo img{transform:scale(1.06);}
.team-photo::after{content:''; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:0.5;}
.team-card h3{font-size:1.15rem; padding:0 22px; margin-bottom:6px;}
.team-card .role{display:block; padding:0 22px; color:var(--accent); margin-bottom:14px;}
.team-card p{padding:0 22px; color:var(--ink-dim); font-size:0.9rem; line-height:1.55;}

@media (max-width:1100px){
  .team-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= CALLING / INVITATION SECTION ================= */
/* ================= REUSABLE AMBIENT BEACON (background motion) ================= */
.ambient-beacon{
  position:absolute; width:0; height:0; z-index:0; pointer-events:none;
}
.ambient-beacon .ring{
  position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--accent); transform:translate(-50%,-50%);
  opacity:0; animation:pulseRing 4.5s ease-out infinite;
}
.ambient-beacon .ring.r2{animation-delay:1.5s;}
.ambient-beacon .ring.r3{animation-delay:3s;}
.ambient-beacon .core{
  position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%);
  box-shadow:0 0 60px 14px rgba(143,209,79,0.4);
  animation:coreGlow 2.6s ease-in-out infinite;
}
.ambient-beacon.subtle .ring{opacity:0.6;}
.ambient-beacon.subtle .core{box-shadow:0 0 40px 10px rgba(143,209,79,0.28);}
@media (prefers-reduced-motion:reduce){
  .ambient-beacon .ring{animation:none; opacity:0.1; width:300px; height:300px;}
  .ambient-beacon .core{animation:none;}
}

/* ================= BOOK A CALL (Cal.com) ================= */
.book-section{position:relative;}
.cal-embed-wrap{
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--bg-raise); min-height:680px;
}
.cal-embed-wrap #cal-inline-embed{width:100%; height:680px;}
.cal-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  height:680px; text-align:center; padding:40px;
}
.cal-fallback p{color:var(--ink-dim); max-width:380px;}
@media (max-width:700px){
  .cal-embed-wrap, .cal-embed-wrap #cal-inline-embed, .cal-fallback{height:600px; min-height:600px;}
}

/* ================= EMAIL CONTACT FORM ================= */
.email-form{max-width:640px;}
.ef-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.ef-field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.ef-field label{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.ef-field input, .ef-field textarea{
  background:rgba(255,255,255,0.03); border:1px solid var(--line-strong); border-radius:8px;
  padding:14px 16px; color:var(--ink); font-family:'Instrument Sans',sans-serif; font-size:0.98rem;
  outline:none; transition:border-color .3s var(--ease), background .3s var(--ease); resize:vertical;
}
.ef-field input::placeholder, .ef-field textarea::placeholder{color:var(--ink-faint);}
.ef-field input:focus, .ef-field textarea:focus{border-color:var(--accent); background:rgba(143,209,79,0.05);}
.ef-note{margin-top:18px; color:var(--ink-faint);}
@media (max-width:640px){ .ef-row{grid-template-columns:1fr;} }

/* ================= GOOGLE RATING BADGE ================= */
.google-rating-badge{
  display:inline-flex; align-items:center; gap:10px; margin:20px 0 40px;
  padding:10px 18px; border:1px solid var(--line-strong); border-radius:999px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.google-rating-badge:hover{border-color:var(--accent); background:rgba(143,209,79,0.05);}
.google-rating-badge .grb-stars{color:#FBBC05; font-size:0.95rem; letter-spacing:1px;}
.google-rating-badge .grb-text{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--ink-dim);}

.call-section{
  position:relative; padding:200px 0 180px; text-align:center; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, var(--bg-alt) 0%, var(--bg) 65%);
}
.call-beacon{position:absolute; left:50%; top:34%; width:0; height:0; z-index:0; pointer-events:none;}
.call-beacon .ring{
  position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--accent); transform:translate(-50%,-50%);
  opacity:0; animation:pulseRing 4.5s ease-out infinite;
}
.call-beacon .ring.r2{animation-delay:1.5s;}
.call-beacon .ring.r3{animation-delay:3s;}
.call-beacon .core{
  position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%);
  box-shadow:0 0 60px 14px rgba(143,209,79,0.45);
  animation:coreGlow 2.6s ease-in-out infinite;
}
@keyframes pulseRing{
  0%{width:14px; height:14px; opacity:0.85; border-width:1.5px;}
  70%{opacity:0.12;}
  100%{width:820px; height:820px; opacity:0; border-width:1px;}
}
@keyframes coreGlow{
  0%,100%{box-shadow:0 0 60px 14px rgba(143,209,79,0.45);}
  50%{box-shadow:0 0 90px 22px rgba(143,209,79,0.7);}
}
.call-content{position:relative; z-index:1;}
.call-line{font-size:clamp(2.1rem,6.4vw,5rem); margin-bottom:4px; letter-spacing:-0.02em;}
.call-line.dim{color:var(--ink-faint);}
.call-line.accent{
  color:var(--accent); font-style:italic; font-family:'Bricolage Grotesque',serif; font-weight:400;
  margin-top:26px; font-size:clamp(1.9rem,5.4vw,4.2rem);
}
.call-sub{color:var(--ink-dim); max-width:480px; margin:36px auto 0; font-size:1.05rem;}
.call-section .btn-primary{margin-top:44px;}

@media (prefers-reduced-motion:reduce){
  .call-beacon .ring{animation:none; opacity:0.15; width:400px; height:400px;}
}

/* ================= INTRO GATE ================= */
body.gate-active{overflow:hidden;}
.intro-gate{
  position:fixed; inset:0; z-index:10000; background:#0A0A09;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px; cursor:none;
  transition:transform .9s var(--ease), opacity .9s var(--ease);
}
.intro-gate.hidden{transform:translateY(-100%); opacity:0; pointer-events:none;}
.intro-gate .ig-logo{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:0.02em;
  color:var(--ink-dim); margin-bottom:70px;
}
.intro-gate .ig-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:28px;
}
.intro-gate h2{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.05;
  font-size:clamp(1.8rem, 5.4vw, 3.6rem); max-width:920px; color:var(--ink);
}
.intro-gate h2 .accent{
  color:var(--accent); font-style:italic; font-weight:400; font-family:'Bricolage Grotesque',serif;
}
.intro-gate .ig-sub{
  margin-top:26px; color:var(--ink-faint); font-size:0.95rem; max-width:420px;
  font-family:'Instrument Sans',sans-serif;
}
.intro-gate .ig-cta{
  margin-top:56px; display:inline-flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line-strong); padding:16px 30px; border-radius:999px;
  background:transparent; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.intro-gate .ig-cta:hover{border-color:var(--accent); background:rgba(143,209,79,0.06);}
.intro-gate .ig-cta .arrow{
  display:inline-block; animation:igBounce 1.6s ease-in-out infinite;
}
@keyframes igBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(6px);}
}
@media (max-width:600px){
  .intro-gate .ig-logo{margin-bottom:44px;}
  .intro-gate .ig-cta{margin-top:40px;}
}
@media (prefers-reduced-motion:reduce){
  .intro-gate .ig-cta .arrow{animation:none;}
}

.clg-marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; display:flex; flex-direction:column; gap:20px;}
.clg-marquee-track{display:inline-flex; align-items:center; width:max-content;}
.clg-marquee-track.row1{animation:marquee 24s linear infinite;}
.clg-marquee-track.row2{animation:marqueeReverse 32s linear infinite;}
@keyframes marqueeReverse{ from{transform:translateX(-50%);} to{transform:translateX(0);} }
.clg-item{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  padding:0 clamp(28px,5vw,56px); height:100px;
}
.clg-item img{
  max-height:80px; max-width:220px; width:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.8) opacity(0.6);
  transition:filter .3s ease, transform .3s ease;
}
.clg-item:hover img{filter:grayscale(0) brightness(1) opacity(1); transform:scale(1.1);}
.clg-marquee-wrap:hover .clg-marquee-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .clg-marquee-track{animation:none;} }

/* ================= VIDEO TESTIMONIALS ================= */
.vt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.vt-card{display:flex; flex-direction:column; gap:18px;}
.vt-video-wrap{
  position:relative; width:100%; aspect-ratio:9/16; border-radius:10px; overflow:hidden;
  background:#000; border:1px solid var(--line);
}
.vt-video-wrap video{width:100%; height:100%; object-fit:cover; display:block;}
.vt-person{display:flex; align-items:center; gap:12px;}
.vt-person img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--accent);}
.vt-person .name{font-weight:600; font-size:0.98rem;}
.vt-person .role{color:var(--ink-faint); font-size:0.78rem; margin-top:2px;}
@media (max-width:900px){ .vt-grid{grid-template-columns:1fr; max-width:380px; margin:0 auto;} }

/* ================= SITE-WIDE VISUAL EFFECTS & MOTION ================= */
body{animation:pageFade .7s var(--ease) both;}
@keyframes pageFade{ from{opacity:0;} to{opacity:1;} }

.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:2px; z-index:10600; pointer-events:none;
  transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),#5FEA6A);
  box-shadow:0 0 10px rgba(143,209,79,0.6);
}

.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:4; will-change:transform;
  background:radial-gradient(circle, rgba(143,209,79,0.10), transparent 65%);
}

/* heading word-mask reveal */
.wmask{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em;}
.wmask .w{display:inline-block; transform:translateY(112%); transition:transform .9s var(--ease);}
.words-in .w{transform:translateY(0);}

/* ambient orbs behind sections */
.has-orbs{position:relative; isolation:isolate; overflow:clip;}
.ambient-orb{
  position:absolute; z-index:-1; width:380px; height:380px; border-radius:50%; pointer-events:none;
  filter:blur(90px); opacity:.22; background:radial-gradient(circle, var(--accent-deep), transparent 70%);
  animation:orbFloat 16s ease-in-out infinite;
}
.ambient-orb.o1{top:-80px; left:-100px;}
.ambient-orb.o2{bottom:-100px; right:-80px; animation-duration:21s; animation-delay:-6s; background:radial-gradient(circle, rgba(143,209,79,0.55), transparent 70%); opacity:.12;}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(50px,40px) scale(1.15);}
}

/* parallax images */
.parallax-img{will-change:transform; transform:scale(1.15);}

/* spotlight cards */
.spot{position:relative;}
.spot::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(143,209,79,0.13), transparent 60%);
  transition:opacity .35s var(--ease);
}
.spot:hover::before{opacity:1;}

/* tilt cards */
.tilt{transition:transform .25s var(--ease); transform-style:preserve-3d; will-change:transform;}

/* button shine sweep */
.btn-primary::after{
  content:''; position:absolute; top:0; left:-70%; width:40%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn-primary:hover::after{left:135%;}

/* service row hover fill */
.service-row::before{
  content:''; position:absolute; inset:0; background:rgba(143,209,79,0.06); z-index:0;
  transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease); pointer-events:none;
}
.service-row:hover::before{transform:scaleY(1);}
.service-row > *{position:relative; z-index:1;}

/* shimmering accent words */
.hero-giant .accent, .statement h2 .accent, .call-line.accent{
  background:linear-gradient(100deg, var(--accent) 20%, #d9f7b0 45%, var(--accent) 70%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:accentShimmer 6s linear infinite;
}
@keyframes accentShimmer{ from{background-position:120% 0;} to{background-position:-100% 0;} }

@media (prefers-reduced-motion:reduce){
  body{animation:none;}
  .ambient-orb, .hero-giant .accent, .statement h2 .accent, .call-line.accent{animation:none;}
  .wmask .w{transform:none; transition:none;}
}


/* ================= PROCESS STEP VISUALS ================= */
.process-visual{
  position:relative; min-height:250px; border-radius:16px; padding:20px 22px 22px; overflow:hidden;
  border:1px solid var(--line-strong);
  background:linear-gradient(165deg, rgba(20,28,20,0.75), rgba(10,10,9,0.7));
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
  opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .5s var(--ease);
}
.process-step.in-view .process-visual{opacity:1; transform:translateY(0); border-color:rgba(143,209,79,0.28);}
.pv-label{display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--ink-faint); font-size:0.66rem;}
.pv-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent);}

/* 01 radar */
.pv-radar{position:relative; height:200px;}
.pv-radar i{position:absolute; top:50%; left:50%; border-radius:50%; border:1px solid rgba(143,209,79,0.28); transform:translate(-50%,-50%);}
.pv-radar .r1{width:190px; height:190px;} .pv-radar .r2{width:126px; height:126px;} .pv-radar .r3{width:62px; height:62px;}
.pv-sweep{
  position:absolute; top:50%; left:50%; width:190px; height:190px; margin:-95px 0 0 -95px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(143,209,79,0.38), transparent 28%); animation:pvSpin 4.5s linear infinite;
}
.pv-core{position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent);}
.pv-blip{position:absolute; width:8px; height:8px; border-radius:50%; background:#5FEA6A; animation:pvPing 2.6s ease-out infinite;}
.pv-blip.b1{top:30%; left:58%;} .pv-blip.b2{top:64%; left:40%; animation-delay:.9s;} .pv-blip.b3{top:48%; left:70%; animation-delay:1.7s;}
.pv-chip{
  position:absolute; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:0.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:rgba(143,209,79,0.12); border:1px solid rgba(143,209,79,0.3); color:var(--ink);
  animation:pvBob 5s ease-in-out infinite;
}
.pv-chip.c1{top:8%; left:0;} .pv-chip.c2{bottom:8%; left:2%; animation-delay:-1.5s;} .pv-chip.c3{top:22%; right:0; animation-delay:-3s;}
@keyframes pvSpin{ to{transform:rotate(360deg);} }
@keyframes pvPing{ 0%{transform:scale(.6); opacity:1;} 70%,100%{transform:scale(2.2); opacity:0;} }
@keyframes pvBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* 02 roadmap */
.pv-road{width:100%; height:200px; display:block;}
.pv-road-path{fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 8; animation:pvDash 1.4s linear infinite;}
.pv-node circle{fill:var(--bg); stroke:var(--accent); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:pvPulseNode 2.8s ease-in-out infinite;}
.pv-node.n2 circle{animation-delay:.5s;} .pv-node.n3 circle{animation-delay:1s;} .pv-node.n4 circle{animation-delay:1.5s; fill:var(--accent);}
.pv-node text{fill:rgba(255,255,255,0.75); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
@keyframes pvDash{ to{stroke-dashoffset:-28;} }
@keyframes pvPulseNode{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.25);} }

/* 03 create */
.pv-canvas{position:relative; display:flex; gap:16px; height:200px; align-items:stretch;}
.pv-poster{
  position:relative; flex:1.3; border-radius:10px; overflow:hidden;
  background:linear-gradient(150deg, #1F5C3D, #0E1712 70%); border:1px solid rgba(255,255,255,0.12);
}
.pv-circle{position:absolute; top:-26px; right:-22px; width:110px; height:110px; border-radius:50%; background:var(--accent); opacity:.9; animation:pvBob 6s ease-in-out infinite;}
.pv-bar{position:absolute; left:14px; height:9px; border-radius:6px; background:rgba(255,255,255,0.85);}
.pv-bar.b1{bottom:64px; width:62%;} .pv-bar.b2{bottom:46px; width:42%; background:rgba(255,255,255,0.35);}
.pv-btn{position:absolute; left:14px; bottom:14px; font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:#0A0A09; color:var(--accent);}
.pv-side{flex:.7; display:flex; flex-direction:column; justify-content:space-between;}
.pv-type{
  flex:1; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px dashed rgba(255,255,255,0.2);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:3.2rem; color:var(--ink);
}
.pv-swatches{display:flex; gap:8px; margin-top:12px;}
.pv-swatches i{flex:1; height:30px; border-radius:8px; display:block; transition:transform .3s var(--ease);}
.pv-swatches i:hover{transform:translateY(-4px);}
.pv-cursor{position:absolute; width:22px; height:22px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); animation:pvCursor 6s ease-in-out infinite;}
@keyframes pvCursor{ 0%,100%{top:20%; left:30%;} 33%{top:62%; left:48%;} 66%{top:30%; left:84%;} }

/* 04 launch */
.pv-launch-wrap{display:flex; gap:18px; align-items:flex-end; height:210px;}
.pv-phone{
  position:relative; width:128px; height:100%; border-radius:20px; border:2px solid rgba(255,255,255,0.28);
  background:#0A0A09; padding:16px 10px 10px; display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.pv-notch{position:absolute; top:5px; left:50%; width:34px; height:5px; margin-left:-17px; border-radius:6px; background:rgba(255,255,255,0.25);}
.pv-post{position:relative; flex:1; border-radius:10px; overflow:hidden; background:linear-gradient(145deg, var(--accent), #1F5C3D);}
.pv-post-shape{position:absolute; bottom:-20px; right:-14px; width:70px; height:70px; border-radius:50%; background:rgba(10,10,9,0.4);}
.pv-live{position:absolute; top:6px; left:6px; z-index:1; font-family:'IBM Plex Mono',monospace; font-size:.5rem; letter-spacing:.08em; padding:3px 6px; border-radius:6px; background:rgba(10,10,9,0.75); color:#ff6b6b; animation:pvBlink 1.4s ease-in-out infinite;}
.pv-lines i{display:block; height:5px; border-radius:4px; background:rgba(255,255,255,0.25); margin-bottom:5px;} .pv-lines i + i{width:60%;}
.pv-react{font-size:.55rem; color:var(--ink-dim);}
.pv-stats{flex:1; display:flex; flex-direction:column; justify-content:space-between; height:100%; min-width:0;}
.pv-reach{align-self:flex-start; font-size:.68rem; padding:7px 12px; border-radius:999px; background:rgba(143,209,79,0.14); border:1px solid rgba(143,209,79,0.35); color:var(--ink-dim); animation:pvBob 4.5s ease-in-out infinite;}
.pv-reach strong{color:var(--accent); font-family:'Bricolage Grotesque',sans-serif; font-size:.95rem; margin-left:4px;}
.pv-bars{display:flex; align-items:flex-end; gap:8px; height:120px;}
.pv-bars i{flex:1; height:var(--h); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--accent), rgba(31,92,61,0.6)); transform-origin:bottom; transform:scaleY(.1); transition:transform 1s var(--ease);}
.process-step.in-view .pv-bars i{transform:scaleY(1);}
.process-step.in-view .pv-bars i:nth-child(2){transition-delay:.1s;} .process-step.in-view .pv-bars i:nth-child(3){transition-delay:.2s;}
.process-step.in-view .pv-bars i:nth-child(4){transition-delay:.3s;} .process-step.in-view .pv-bars i:nth-child(5){transition-delay:.4s;} .process-step.in-view .pv-bars i:nth-child(6){transition-delay:.5s;}
@keyframes pvBlink{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* 05 growth chart */
.pv-chart{width:100%; height:190px; display:block;}
.pv-grid line{stroke:rgba(255,255,255,0.08); stroke-width:1;}
.pv-area{opacity:0; transition:opacity 1.2s var(--ease) .8s;}
.process-step.in-view .pv-area{opacity:1;}
.pv-line{fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520;}
.process-step.in-view .pv-line{animation:pvDraw 2.2s var(--ease) .2s forwards;}
@keyframes pvDraw{ to{stroke-dashoffset:0;} }
.pv-end{fill:var(--accent); opacity:0; transform-box:fill-box; transform-origin:center;}
.process-step.in-view .pv-end{opacity:1; transition:opacity .4s ease 2s; animation:pvPulseNode 2s ease-in-out 2.2s infinite;}
.pv-growth{position:absolute; top:46px; right:22px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.7rem; color:var(--accent); letter-spacing:-.02em;}
.pv-growth span{font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:.6rem; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; margin-left:4px;}

@media (max-width:1000px){
  .process-step{grid-template-columns:60px minmax(0,1fr);}
  .process-visual{grid-column:2; margin-top:6px;}
}
@media (max-width:520px){
  .process-step{grid-template-columns:36px minmax(0,1fr); gap:18px;}
  .process-line{left:17px;}
  .pv-launch-wrap{gap:12px;} .pv-phone{width:108px;}
}
@media (prefers-reduced-motion:reduce){
  .process-visual{opacity:1; transform:none;}
  .pv-sweep,.pv-blip,.pv-chip,.pv-road-path,.pv-node circle,.pv-circle,.pv-cursor,.pv-live,.pv-reach,.pv-end{animation:none;}
  .pv-bars i{transform:scaleY(1);} .pv-line{stroke-dashoffset:0;} .pv-area{opacity:1;}
}

/* ================= REAL CLIENT CREATIVES (portrait 4:5 posters, no crop / no tint) ================= */
.case-cover.creatives{aspect-ratio:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; overflow:visible;}
.case-cover.creatives::before{display:none;}
.case-cover.creatives img{display:block; width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; border-radius:4px; border:1px solid var(--line); filter:none; transition:transform .6s var(--ease);}
.case-cover.creatives img:hover{transform:translateY(-6px);}
@media (max-width:900px){ .case-cover.creatives{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;} }
@media (prefers-reduced-motion:reduce){ .case-cover.creatives img{transition:none;} .case-cover.creatives img:hover{transform:none;} }
/* full poster, no crop (for creatives taller than the 3:4 frame) */
.demo-g-item.fit-contain{background:#ececee;}
.demo-g-item.fit-contain img{object-fit:contain;}

/* ================= CREATIVE SLIDER (See It In Action: 2 rows, opposite directions) ================= */
.showcase-content{min-width:0;}
.demo-slider{
  display:flex; flex-direction:column; gap:16px; min-width:0; max-width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ds-row{overflow:hidden; width:100%;}
.ds-track{display:flex; width:max-content; will-change:transform;}
.ds-track.row1{animation:marquee var(--dur,42s) linear infinite;}
.ds-track.row2{animation:marqueeReverse var(--dur,42s) linear infinite;}
.ds-row:hover .ds-track{animation-play-state:paused;}
/* margin, not gap: keeps the two halves exactly equal so the -50% loop has no jump */
.demo-slider .demo-g-item{flex:0 0 auto; width:clamp(150px,17vw,210px); margin-right:16px; aspect-ratio:3/4;}
.demo-slider.is-portrait .demo-g-item{aspect-ratio:4/5;}
@media (max-width:640px){
  .demo-slider{gap:12px;}
  .demo-slider .demo-g-item{width:42vw; max-width:170px; margin-right:12px;}
}
@media (prefers-reduced-motion:reduce){
  .ds-track{animation:none !important;}
  .ds-row{overflow-x:auto;}
  .ds-track [aria-hidden="true"]{display:none;}
  .demo-slider{-webkit-mask-image:none; mask-image:none;}
}

/* ================= VIEW ALL button + CREATIVE VIEWER ================= */
.ds-viewall{margin-top:18px; cursor:pointer; background:transparent;}
.ds-viewall:hover{border-color:var(--accent); color:var(--accent);}
.ds-viewall:focus-visible, .cv-btn:focus-visible, .cv-thumb:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.demo-slider .demo-g-item{cursor:zoom-in;}
html.cv-open, html.cv-open body{overflow:hidden;}

.cv{position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s var(--ease);}
.cv.in{opacity:1;}
.cv[hidden]{display:none;}
.cv-backdrop{position:absolute; inset:0; background:rgba(6,10,8,0.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.cv-shell{position:relative; width:min(1100px,100%); height:100%; max-height:100dvh; display:flex; flex-direction:column; padding:18px clamp(12px,3vw,32px) 16px; gap:14px;}
.cv-top{display:flex; align-items:center; gap:16px;}
.cv-title{color:var(--accent); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;}
.cv-count{color:var(--ink-dim); font-size:0.72rem; letter-spacing:0.08em; margin-left:auto;}
.cv-btn{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(14,23,18,0.85); color:var(--ink); font-size:1.1rem; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.cv-btn:hover{border-color:var(--accent); color:var(--accent);}
.cv-close{width:42px; height:42px; font-size:0.95rem;}
.cv-stage{flex:1; min-height:0; display:flex; align-items:center; gap:clamp(8px,2vw,24px);}
.cv-figure{flex:1; min-width:0; height:100%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;}
.cv-figure img{max-width:100%; max-height:calc(100% - 44px); width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,0.55);}
.cv-cap{color:var(--ink-dim); font-size:0.85rem; text-align:center; max-width:640px; line-height:1.4;}
.cv-thumbs{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 6px; scrollbar-width:thin; justify-content:safe center;}
.cv-thumb{flex:0 0 auto; width:56px; aspect-ratio:3/4; padding:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#000; cursor:pointer; opacity:0.5; transition:opacity .2s var(--ease), border-color .2s var(--ease);}
.cv-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.cv-thumb:hover{opacity:0.85;}
.cv-thumb.active{opacity:1; border-color:var(--accent);}
@media (max-width:640px){
  .cv-stage{position:relative;}
  .cv-prev, .cv-next{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px;}
  .cv-prev{left:0;} .cv-next{right:0;}
  .cv-thumb{width:46px;}
}
@media (prefers-reduced-motion:reduce){ .cv{transition:none;} }


/* ---------- showcase tabs on tablet/mobile: wrap so every category (incl. Jewellery) is visible, no hidden side-scroll ---------- */
@media (max-width:900px){
  .showcase-sidebar{flex-wrap:wrap; overflow:visible; gap:8px; border-bottom:none; padding-bottom:0;}
  .sidebar-item{border:1px solid var(--line); border-radius:999px; padding:10px 16px; gap:10px;}
  .sidebar-item:hover{padding-left:16px;}
  .sidebar-item.active{padding-left:16px; border-color:var(--accent);}
  .sidebar-item .si-label{font-size:0.95rem;}
}

/* ================= SERVICES: visuals (real client work fan + website mockup) and deliverable tags ================= */
.service-row{grid-template-columns:90px 1fr auto 40px; column-gap:24px;}
.svc-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; list-style:none; padding:0;}
.svc-tags li{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.service-row:hover .svc-tags li, .service-row.active .svc-tags li{color:var(--ink-dim); border-color:var(--line-strong);}

/* custom animated visual per discipline (drawn in SVG, site palette only) */
.svc-visual{position:relative; width:230px; height:132px; display:block; pointer-events:none;}
.svc-art svg{width:100%; height:100%; display:block; overflow:visible; opacity:.62; transition:opacity .5s var(--ease), transform .6s var(--ease);}
.service-row:hover .svc-art svg, .service-row.active .svc-art svg{opacity:1; transform:scale(1.04);}
.svc-art svg *{transform-box:fill-box;}
.svc-art .a-spin{transform-origin:center; animation:svcSpin 18s linear infinite;}
.svc-art .a-aim{animation:svcAim 4s ease-in-out infinite;}
.svc-art .a-ping{transform-origin:center; opacity:0; animation:svcPing 4s ease-out infinite;}
.svc-art .a-sw{transform-origin:center; animation:svcPop 3s ease-in-out infinite;}
.svc-art .a-feed{animation:svcFeed 6s linear infinite;}
.svc-art .a-heart{transform-origin:center; opacity:0; animation:svcHeart 2.4s ease-out infinite;}
.svc-art .a-wave{transform-origin:left center; animation:svcWave 1.8s ease-in-out infinite;}
.svc-art .a-spark{transform-origin:center; animation:svcSpark 2s ease-in-out infinite;}
.svc-art .a-bar{transform-origin:bottom; animation:svcBar 3.4s var(--ease) infinite;}
.svc-art .a-line{animation:svcLine 3.4s ease-in-out infinite;}
.svc-art .a-arrow{opacity:0; animation:svcArrow 3.4s ease-in-out infinite;}
.svc-art .a-focus{transform-origin:center; animation:svcFocus 2.6s var(--ease) infinite;}
.svc-art .a-rec{animation:svcRec 1.2s steps(1) infinite;}
@keyframes svcSpin{to{transform:rotate(360deg);}}
@keyframes svcAim{0%,100%{transform:translate(30px,-28px);} 30%{transform:translate(-22px,18px);} 55%,85%{transform:translate(0,0);}}
@keyframes svcPing{0%,55%{opacity:0; transform:scale(1);} 60%{opacity:1;} 85%,100%{opacity:0; transform:scale(3.4);}}
@keyframes svcPop{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}
@keyframes svcFeed{from{transform:translateY(0);} to{transform:translateY(-84px);}}
@keyframes svcHeart{0%{opacity:0; transform:translateY(0) scale(.4);} 20%{opacity:1; transform:translateY(-8px) scale(1.25);} 100%{opacity:0; transform:translateY(-58px) scale(1);}}
@keyframes svcWave{0%,100%{opacity:.15; transform:scale(.92);} 45%{opacity:1; transform:scale(1);}}
@keyframes svcSpark{0%,100%{opacity:.15; transform:scale(.6);} 50%{opacity:1; transform:scale(1.3);}}
@keyframes svcBar{0%{transform:scaleY(.15);} 40%,85%{transform:scaleY(1);} 100%{transform:scaleY(.15);}}
@keyframes svcLine{0%{stroke-dashoffset:180;} 45%,85%{stroke-dashoffset:0;} 100%{stroke-dashoffset:180;}}
@keyframes svcArrow{0%,40%{opacity:0;} 50%,85%{opacity:1;} 100%{opacity:0;}}
@keyframes svcFocus{0%{transform:scale(1.5); opacity:.25;} 35%,100%{transform:scale(1); opacity:1;}}
@keyframes svcRec{0%{opacity:1;} 50%{opacity:.15;}}

/* website & digital experience: browser + phone mockup */
.svc-web .svc-browser, .svc-web .svc-phone{
  position:absolute; display:flex; flex-direction:column; gap:6px; background:#121513;
  border:1px solid var(--line-strong); box-shadow:0 14px 30px rgba(0,0,0,.45); overflow:hidden;
  transition:transform .6s var(--ease), border-color .5s var(--ease);
}
.svc-web .svc-browser{left:6px; top:10px; width:180px; height:112px; border-radius:8px; padding:0 0 8px;}
.svc-web .svc-phone{right:6px; bottom:0; width:58px; height:104px; border-radius:12px; padding:14px 6px 6px; z-index:2;}
.sb-bar{display:flex; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line);}
.sb-bar i{width:5px; height:5px; border-radius:50%; background:var(--ink-faint);}
.sb-bar b{flex:1; height:6px; margin-left:6px; border-radius:4px; background:rgba(255,255,255,.07);}
.sb-hero{display:block; height:30px; margin:0 8px; border-radius:4px; background:linear-gradient(110deg, var(--accent-deep), rgba(143,209,79,.55));}
.svc-phone .sb-hero{margin:0; height:34px;}
.sb-line{display:block; height:5px; margin:0 8px; border-radius:3px; background:rgba(255,255,255,.12);}
.svc-phone .sb-line{margin:0;}
.sb-line.w80{width:70%;} .sb-line.w55{width:45%;}
.sb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:2px 8px 0;}
.sb-grid i{height:16px; border-radius:3px; background:rgba(255,255,255,.07);}
.sp-notch{position:absolute; top:5px; left:50%; width:18px; height:4px; margin-left:-9px; border-radius:3px; background:var(--line-strong);}
.svc-web .sb-hero, .svc-web .sb-line, .svc-web .sb-grid i{animation:svcShimmer 2.4s ease-in-out infinite;}
.svc-web .sb-line{animation-delay:.3s;} .svc-web .sb-grid i{animation-delay:.6s;}
@keyframes svcShimmer{0%,100%{opacity:.55;}50%{opacity:1;}}
.service-row:hover .svc-browser, .service-row.active .svc-browser{transform:translate(-14px,-4px) rotate(-3deg); border-color:rgba(143,209,79,.45);}
.service-row:hover .svc-phone, .service-row.active .svc-phone{transform:translate(10px,4px) rotate(5deg); border-color:rgba(143,209,79,.45);}

@media (max-width:900px){
  .service-row{grid-template-columns:44px minmax(0,1fr) 24px; column-gap:12px;}
  .service-row .num{grid-column:1; grid-row:1;}
  .service-row > div{grid-column:2; grid-row:1;}
  .service-row .arrow{grid-column:3; grid-row:1;}
  .svc-visual{grid-column:2/3; grid-row:2; width:220px; max-width:100%; height:124px; margin-top:22px;}
  .svc-art svg{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .svc-art svg, .svc-web .svc-browser, .svc-web .svc-phone{transition:none;}
  .svc-art svg *{animation:none !important;}
  .svc-art .a-ping, .svc-art .a-heart{opacity:0;} .svc-art .a-line{stroke-dashoffset:0;} .svc-art .a-arrow{opacity:1;}
  .svc-web .sb-hero, .svc-web .sb-line, .svc-web .sb-grid i{animation:none;}
}

/* ---------- See It In Action: Video & Reels switched off for now (kept in the HTML).
   To turn one back on, remove `data-off` from its <div class="ds-block ds-video" data-off>. ---------- */
.ds-block.ds-video[data-off]{display:none;}
.demo-panel .ds-block:has(+ .ds-video[data-off]){margin-bottom:0;}

/* ---------- About: brighter founder photo + founder socials ---------- */
.about-visual.real::before{opacity:0;}
.about-visual.real::after{background:linear-gradient(180deg, rgba(10,10,9,0) 72%, rgba(10,10,9,0.35));}
.about-visual.real img{filter:brightness(1.14) contrast(1.06) saturate(1.06);}
.about-founder{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); max-width:480px;}
.about-founder .af-name{display:flex; flex-direction:column; gap:6px;}
.about-founder .af-label{font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);}
.about-founder strong{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.25rem; color:var(--ink);}
.about-founder .social-icons{margin-top:0;}

/* ================= INDUSTRY / AREA LANDING PAGES (marketing/*.html) ================= */
.lp-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.lp-section{padding:20px 0 70px;}
.lp-section > h2{font-size:clamp(1.6rem,3.4vw,2.6rem); margin:14px 0 28px; max-width:820px;}
.case-body .content{max-width:680px;}
.lp-area-group{margin-bottom:22px;}
.lp-area-group > .mono{display:block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;}
.lp-chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0;}
.lp-chips li{font-size:0.92rem; color:var(--ink-dim); border:1px solid var(--line); border-radius:999px; padding:7px 14px;}
.lp-faq-list{border-top:1px solid var(--line); max-width:820px;}
.lp-faq-list details{border-bottom:1px solid var(--line); padding:22px 0;}
.lp-faq-list summary{cursor:pointer; list-style:none; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.15rem; color:var(--ink); display:flex; justify-content:space-between; gap:20px;}
.lp-faq-list summary::-webkit-details-marker{display:none;}
.lp-faq-list summary::after{content:'+'; color:var(--accent); font-size:1.4rem; line-height:1; transition:transform .3s var(--ease);}
.lp-faq-list details[open] summary::after{transform:rotate(45deg);}
.lp-faq-list details p{color:var(--ink-dim); margin-top:12px; max-width:680px;}
.footer-address{font-style:normal; color:var(--ink-dim); font-size:0.9rem; line-height:1.5; margin-top:4px;}
.footer-col.footer-wide a{display:block;}
@media (min-width:1025px){ .footer-top{grid-template-columns:1.3fr 0.9fr 1.3fr 0.9fr 1.2fr; gap:36px;} }
.ds-more{display:inline-block; margin:18px 0 0 18px; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease);}
.ds-more:hover{color:var(--accent); border-color:var(--accent);}
@media (max-width:640px){ .ds-more{margin-left:0; display:block; width:max-content;} }
/* subpage sections use .wrap together with a padding shorthand that wiped the side gutter: restore it */
.wrap.service-hero, .wrap.case-hero, .wrap.service-related, .wrap.breadcrumb, .wrap.lp-section, .wrap.article-hero{padding-left:clamp(20px,5vw,64px); padding-right:clamp(20px,5vw,64px);}
/* footer social circles: .footer-col a (display:block; padding) was overriding the centred flex layout */
.footer-col .social-icons a, .about-founder .social-icons a{display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 42px; line-height:0;}
.footer-col .social-icons a svg{display:block;}
.lp-note{color:var(--ink-dim); font-size:1.05rem; max-width:680px;}
.footer-legal{display:inline-flex; gap:18px;}
.footer-legal a{color:var(--ink-faint); transition:color .3s var(--ease);}
.footer-legal a:hover{color:var(--accent);}
.legal-body h2:first-child{margin-top:0;}
.legal-list{margin:0 0 20px 1.1em; color:var(--ink-dim); font-size:1.02rem; line-height:1.7;}
.legal-list li{margin-bottom:8px;}
.legal-body a{color:var(--accent);}

/* ================= BOOK A CALL: calendar that sends the request to WhatsApp (temporary, Cal.com parked) ================= */
.book-widget{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); border:1px solid var(--line); border-radius:12px; background:var(--bg-raise); overflow:hidden;}
.bw-cal{padding:32px; border-right:1px solid var(--line);}
.bw-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.bw-month{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.3rem; color:var(--ink);}
.bw-nav{width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); color:var(--ink); background:transparent; display:flex; align-items:center; justify-content:center; transition:border-color .3s var(--ease), background .3s var(--ease);}
.bw-nav:hover:not(:disabled){border-color:var(--accent); background:rgba(143,209,79,.08);}
.bw-nav:disabled{opacity:.3; cursor:not-allowed;}
.bw-week, .bw-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.bw-week{margin-bottom:8px;}
.bw-week span{font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); text-align:center;}
.bw-day{aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:rgba(255,255,255,.03); color:var(--ink); font-size:0.95rem; font-family:'Instrument Sans',sans-serif; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);}
.bw-day:hover:not(:disabled){border-color:var(--accent); background:rgba(143,209,79,.08);}
.bw-day.is-today{border-color:var(--line-strong);}
.bw-day.is-selected{background:var(--accent); border-color:var(--accent); color:#0A0A09; font-weight:600;}
.bw-day:disabled{background:transparent; color:var(--ink-faint); opacity:.45; cursor:not-allowed;}
.bw-day:focus-visible, .bw-nav:focus-visible, .bw-chips input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.bw-hint{margin-top:18px; font-size:0.68rem; letter-spacing:0.08em; color:var(--ink-faint);}
.bw-form{padding:32px; display:flex; flex-direction:column;}
.bw-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; min-height:320px; color:var(--ink-dim);}
.bw-empty-icon{font-size:2.2rem; filter:grayscale(.3);}
.bw-empty p{max-width:260px;}
.bw-date{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1.25rem; color:var(--ink); margin-bottom:22px;}
.bw-group{border:0; padding:0; margin:0 0 22px;}
.bw-group legend{font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; padding:0;}
.bw-chips{display:flex; flex-wrap:wrap; gap:8px;}
.bw-chips label{position:relative; cursor:pointer;}
.bw-chips input{position:absolute; opacity:0; width:1px; height:1px;}
.bw-chips span{display:inline-block; padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; font-size:0.88rem; color:var(--ink-dim); transition:all .25s var(--ease);}
.bw-chips label:hover span{border-color:var(--accent); color:var(--ink);}
.bw-chips input:checked + span{background:var(--accent); border-color:var(--accent); color:#0A0A09; font-weight:600;}
.bw-chips label.is-off{cursor:not-allowed;}
.bw-chips label.is-off span{opacity:.3; text-decoration:line-through;}
.bw-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.bw-error{min-height:1.2em; color:#ff8a7a; font-size:0.9rem; margin:2px 0 12px;}
.bw-submit{align-self:flex-start;}
.bw-note{margin-top:14px; font-size:0.85rem; color:var(--ink-faint); max-width:420px;}
@media (max-width:900px){
  .book-widget{grid-template-columns:1fr;}
  .bw-cal{border-right:0; border-bottom:1px solid var(--line);}
}
@media (max-width:520px){
  .bw-cal, .bw-form{padding:22px 18px;}
  .bw-row{grid-template-columns:1fr; gap:0;}
  .bw-week, .bw-days{gap:4px;}
  .bw-empty{min-height:180px;}
}
.bw-empty[hidden], .bw-fields[hidden]{display:none;}
.bw-row .ef-field{min-width:0;}
.bw-row .ef-field input{width:100%; min-width:0; box-sizing:border-box;}

/* ================= INTRO GATE v2: motion layer, staggered entrance, smooth curtain exit ================= */
.intro-gate{
  overflow:hidden; isolation:isolate;
  transition:transform 1.15s cubic-bezier(.77,0,.18,1), visibility 0s linear 1.2s;
  will-change:transform;
}
/* curved bottom edge that trails the curtain while it lifts */
.intro-gate::after{
  content:""; position:absolute; left:-10%; right:-10%; top:100%; height:18vh;
  background:#0A0A09; border-radius:0 0 50% 50%; transform:scaleY(0); transform-origin:top;
  transition:transform 1.15s cubic-bezier(.77,0,.18,1); pointer-events:none;
}
.intro-gate.hidden{transform:translateY(calc(-100% - 18vh)); opacity:1; visibility:hidden; pointer-events:none;}
.intro-gate.hidden::after{transform:scaleY(1);}
.intro-gate > *:not(.ig-bg){position:relative; z-index:2;}

/* ---- background layer ---- */
.ig-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  --mx:0; --my:0; transition:opacity .6s var(--ease);}
.ig-grid{position:absolute; inset:-64px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
  animation:igGrid 14s linear infinite; opacity:0;}
@keyframes igGrid{to{transform:translate(64px,64px);}}
.ig-glow{position:absolute; border-radius:50%; filter:blur(70px); opacity:0; will-change:transform;}
.ig-glow.g1{width:46vmax; height:46vmax; left:-14vmax; top:-16vmax; background:radial-gradient(circle, rgba(31,92,61,.75), transparent 65%);
  translate:calc(var(--mx) * -30px) calc(var(--my) * -30px); animation:igDrift1 18s ease-in-out infinite alternate;}
.ig-glow.g2{width:38vmax; height:38vmax; right:-12vmax; bottom:-14vmax; background:radial-gradient(circle, rgba(143,209,79,.28), transparent 65%);
  translate:calc(var(--mx) * 40px) calc(var(--my) * 40px); animation:igDrift2 22s ease-in-out infinite alternate;}
.ig-glow.g3{width:22vmax; height:22vmax; left:50%; top:50%; margin:-11vmax 0 0 -11vmax; background:radial-gradient(circle, rgba(143,209,79,.16), transparent 70%);
  translate:calc(var(--mx) * 70px) calc(var(--my) * 70px); animation:igBreath 7s ease-in-out infinite;}
@keyframes igDrift1{to{transform:translate(9vmax,7vmax) scale(1.12);}}
@keyframes igDrift2{to{transform:translate(-8vmax,-6vmax) scale(1.18);}}
@keyframes igBreath{0%,100%{transform:scale(.85);}50%{transform:scale(1.15);}}
.ig-orbit{position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.06); border-radius:50%; opacity:0;}
.ig-orbit.o1{width:min(88vw,980px); height:min(88vw,980px); margin:calc(min(88vw,980px) / -2) 0 0 calc(min(88vw,980px) / -2); animation:igSpin 40s linear infinite;}
.ig-orbit.o2{width:min(64vw,700px); height:min(64vw,700px); margin:calc(min(64vw,700px) / -2) 0 0 calc(min(64vw,700px) / -2); animation:igSpin 28s linear infinite reverse; border-style:dashed; border-color:rgba(143,209,79,.08);}
.ig-orbit i{position:absolute; top:-4px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px 3px rgba(143,209,79,.55);}
.ig-orbit.o2 i{width:5px; height:5px; margin-left:-2.5px; top:-3px; background:#99E0BE; box-shadow:0 0 10px 2px rgba(153,224,190,.5);}
@keyframes igSpin{to{transform:rotate(360deg);}}
.ig-corner{position:absolute; width:22px; height:22px; border-color:rgba(255,255,255,.22); border-style:solid; border-width:0; opacity:0;}
.ig-corner.c1{top:28px; left:28px; border-top-width:1px; border-left-width:1px;}
.ig-corner.c2{top:28px; right:28px; border-top-width:1px; border-right-width:1px;}
.ig-corner.c3{bottom:28px; left:28px; border-bottom-width:1px; border-left-width:1px;}
.ig-corner.c4{bottom:28px; right:28px; border-bottom-width:1px; border-right-width:1px;}
.ig-hint{position:absolute; left:50%; bottom:30px; width:1px; height:56px; margin-left:-.5px; background:rgba(255,255,255,.1); overflow:hidden; opacity:0;}
.ig-hint i{position:absolute; left:0; top:-40%; width:1px; height:40%; background:linear-gradient(transparent, var(--accent)); animation:igHint 2s cubic-bezier(.6,0,.4,1) infinite;}
@keyframes igHint{to{top:100%;}}

/* ---- the logo eyes ---- */
.ig-eyes{width:clamp(64px,7vw,84px); margin-bottom:18px; opacity:0;}
.ig-eyes-svg{display:block; width:100%; height:auto; overflow:visible; animation:igBlink 5.5s ease-in-out 2.4s infinite; transform-origin:50% 50%;}
@keyframes igBlink{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.08);}}
.intro-gate .ig-logo{margin-bottom:56px;}

/* ---- staggered entrance (starts when the page loader is gone) ---- */
.intro-gate .ig-eyes, .intro-gate .ig-logo, .intro-gate .ig-eyebrow, .intro-gate .ig-sub, .intro-gate .ig-cta{
  opacity:0; transform:translateY(18px); filter:blur(6px);
  transition:opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease);
}
.intro-gate h2 .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .08em; margin-bottom:-.08em;}
.intro-gate h2 .wi{display:inline-block; transform:translateY(110%) rotate(4deg); transform-origin:0 100%;
  transition:transform 1s cubic-bezier(.16,.84,.32,1); transition-delay:calc(.55s + var(--i) * 45ms);}
.fi-loaded .intro-gate.ig-ready .ig-eyes{opacity:1; transform:none; filter:none; transition-delay:.05s;}
.fi-loaded .intro-gate.ig-ready .ig-logo{opacity:1; transform:none; filter:none; transition-delay:.18s;}
.fi-loaded .intro-gate.ig-ready .ig-eyebrow{opacity:1; transform:none; filter:none; transition-delay:.35s;}
.fi-loaded .intro-gate.ig-ready h2 .wi{transform:none;}
.fi-loaded .intro-gate.ig-ready .ig-sub{opacity:1; transform:none; filter:none; transition-delay:1.35s;}
.fi-loaded .intro-gate.ig-ready .ig-cta{opacity:1; transform:none; filter:none; transition-delay:1.55s;}
.fi-loaded .intro-gate.ig-ready .ig-grid{animation:igGrid 14s linear infinite, igFadeIn 1.6s .2s var(--ease) forwards;}
.fi-loaded .intro-gate.ig-ready .ig-glow.g1{animation:igDrift1 18s ease-in-out infinite alternate, igFadeIn 2s var(--ease) forwards;}
.fi-loaded .intro-gate.ig-ready .ig-glow.g2{animation:igDrift2 22s ease-in-out infinite alternate, igFadeIn 2s .3s var(--ease) forwards;}
.fi-loaded .intro-gate.ig-ready .ig-glow.g3{animation:igBreath 7s ease-in-out infinite, igFadeIn 2s .6s var(--ease) forwards;}
.fi-loaded .intro-gate.ig-ready .ig-orbit{animation-name:igSpin; transition:opacity 2s .5s var(--ease); opacity:1;}
.fi-loaded .intro-gate.ig-ready .ig-corner{opacity:1; transition:opacity 1s 1.2s var(--ease);}
.fi-loaded .intro-gate.ig-ready .ig-hint{opacity:1; transition:opacity 1s 2s var(--ease);}
@keyframes igFadeIn{from{opacity:0;}to{opacity:1;}}

/* "Fool": a little hand-drawn underline + a lazy wobble */
.intro-gate h2 .accent{position:relative; display:inline-block;}
.intro-gate h2 .accent .ig-squiggle{position:absolute; left:-4%; bottom:-.16em; width:108%; height:.32em; overflow:visible; pointer-events:none;}
.intro-gate h2 .accent .ig-squiggle path{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:140; stroke-dashoffset:140;
  transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) 1.25s;}
.fi-loaded .intro-gate.ig-ready h2 .accent .ig-squiggle path{stroke-dashoffset:0;}
.fi-loaded .intro-gate.ig-ready h2 .accent .wi{animation:igWobble 4.8s ease-in-out 2.6s infinite;}
@keyframes igWobble{0%,84%,100%{transform:none;}88%{transform:rotate(-6deg) translateY(-2px);}92%{transform:rotate(5deg);}96%{transform:rotate(-2deg);}}

/* CTA: soft pulse ring + light sweep */
.intro-gate .ig-cta{position:relative; overflow:visible;}
.intro-gate .ig-cta::before{content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid var(--accent); opacity:0; pointer-events:none;}
.fi-loaded .intro-gate.ig-ready .ig-cta::before{animation:igPulse 2.6s ease-out 2.4s infinite;}
@keyframes igPulse{0%{opacity:.7; transform:scale(1);}100%{opacity:0; transform:scale(1.35,1.6);}}
.intro-gate .ig-cta::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(143,209,79,.22) 50%, transparent 65%); background-size:250% 100%; background-position:120% 0;}
.fi-loaded .intro-gate.ig-ready .ig-cta::after{animation:igSweep 3.4s ease-in-out 2.2s infinite;}
@keyframes igSweep{0%{background-position:120% 0;}45%,100%{background-position:-120% 0;}}

/* ---- exit: content lifts away first, then the curtain rises ---- */
.intro-gate.leaving .ig-eyes, .intro-gate.leaving .ig-logo, .intro-gate.leaving .ig-eyebrow, .intro-gate.leaving h2, .intro-gate.leaving .ig-sub, .intro-gate.leaving .ig-cta{
  opacity:0 !important; transform:translateY(-40px) !important; filter:blur(8px) !important;
  transition:opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease) !important;}
.intro-gate.leaving .ig-logo{transition-delay:.04s !important;}
.intro-gate.leaving .ig-eyebrow{transition-delay:.08s !important;}
.intro-gate.leaving h2{transition-delay:.12s !important;}
.intro-gate.leaving .ig-sub{transition-delay:.16s !important;}
.intro-gate.leaving .ig-cta{transition-delay:.2s !important;}
.intro-gate.leaving .ig-bg{opacity:.35;}

/* hero waits behind the gate, then rises in as the curtain lifts */
body.gate-active .hero-fade{animation-play-state:paused;}
.hero-fade{animation-name:heroRiseIn; animation-duration:1.1s;}
@keyframes heroRiseIn{from{opacity:0; transform:translateY(34px);}to{opacity:1; transform:none;}}

@media (max-width:600px){
  .ig-corner{display:none;}
  .ig-eyes{margin-bottom:14px;}
  .intro-gate .ig-logo{margin-bottom:38px;}
  .ig-hint{bottom:22px; height:44px;}
}
@media (prefers-reduced-motion:reduce){
  .ig-grid, .ig-glow, .ig-orbit, .ig-eyes-svg, .ig-hint i{animation:none !important;}
  .intro-gate .ig-eyes, .intro-gate .ig-logo, .intro-gate .ig-eyebrow, .intro-gate .ig-sub, .intro-gate .ig-cta,
  .intro-gate h2 .wi{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
  .ig-glow, .ig-grid, .ig-orbit, .ig-corner{opacity:1;}
  .intro-gate h2 .accent .ig-squiggle path{stroke-dashoffset:0; transition:none;}
  .intro-gate .ig-cta::before, .intro-gate .ig-cta::after, .intro-gate h2 .accent .wi{animation:none !important;}
  .intro-gate, .intro-gate::after{transition:opacity .4s, visibility 0s .4s;}
  .intro-gate.hidden{transform:none; opacity:0;}
  .hero-fade{animation:none; opacity:1;}
}
.intro-gate h2 .w:has(.accent){padding-right:.16em; margin-right:-.16em; padding-bottom:.32em; margin-bottom:-.32em;}

/* About: founder cutout shown smaller, standing on a soft green glow (Nov 2026) */
.about-visual.real{max-width:400px; width:100%; justify-self:center; aspect-ratio:4/5;
  background:radial-gradient(70% 60% at 50% 62%, rgba(143,209,79,.22), transparent 70%), linear-gradient(180deg, #122019 0%, #0E1712 100%);
  border:1px solid var(--line); border-radius:18px;}
.about-visual.real img{object-fit:contain; object-position:50% 100%; height:94%; position:absolute; left:0; right:0; bottom:0; margin:0 auto;}
.about-visual.real::after{background:linear-gradient(180deg, rgba(10,10,9,0) 80%, rgba(10,10,9,0.45));}
@media (max-width:1024px){ .about-visual.real{max-width:340px;} }
/* About founder card: black with a soft neutral glow instead of green (user request) */
.about-visual.real{
  background:radial-gradient(60% 52% at 50% 58%, rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, transparent 72%), linear-gradient(180deg, #121212 0%, #070707 100%);
  border-color:rgba(255,255,255,.08); box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);}
.about-visual.real img{height:88%;}
/* About: founder photo with its own studio backdrop fills the card (7 Nov 2026) */
.about-visual.real img{position:static; height:100%; width:100%; object-fit:cover; object-position:50% 20%; margin:0;}
.about-visual.real{background:#0b0b0a;}
.about-visual.real::after{background:linear-gradient(180deg, rgba(10,10,9,0) 78%, rgba(10,10,9,0.35));}
.sidebar-item[data-off], .demo-panel[data-off]{display:none !important;}