/* ============================================================
   Praveen Velu — Portfolio — Shared Stylesheet
   Used by every page: index.html, about.html, contact.html,
   and everything under /work/
   ============================================================ */

:root{
  color-scheme:light;
  --bg:#F6F4EE;
  --bg-card:#FFFFFF;
  --ink:#15140F;
  --ink-soft:#6B6A63;
  --ink-faint:#9C9A8E;
  --line:#E4E1D6;
  --accent:#FF5B39;
  --accent-ink:#7A2A18;
  --pill:#EDEAE0;
  --card-1:#E3EDE1; /* Event Emission Calculator — sage */
  --card-2:radial-gradient(ellipse 75% 80% at 50% 35%, #E3EFFC 0%, #BCD8F5 100%); /* GA Planner: sky blue, from the product's own #2499F9 */
  --card-3:radial-gradient(ellipse 75% 80% at 45% 35%, #F3F2FB 0%, #D9D7EF 100%); /* Policy Tracker: lavender, from Bevolve's logo #908EBF */
  --card-4:#F7DDD1; /* Agri-Drone Website — peach */
  --card-5:radial-gradient(ellipse 75% 80% at 50% 32%, #F3F6F7 0%, #D2DADE 100%); /* GHG Accounting: cool slate, lets the dashboard greens lead */
  --card-6:#EFE6D8; /* Automated Report Generator — cream-gold */
  --card-7:radial-gradient(ellipse 75% 80% at 50% 32%, #F1F7F7 0%, #CCE1E0 100%); /* Supplier module: mist teal, pairs with the blue dashboard */
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Satoshi', system-ui, -apple-system, sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Urbanist', system-ui, sans-serif; font-weight:400; letter-spacing:-0.005em;}
h1 em,h2 em,h3 em,h4 em{font-style:normal;}
button,input,textarea,select{font-family:inherit;}
.script{font-family:'Urbanist', system-ui, sans-serif; font-weight:500; color:var(--accent-ink);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
@media(prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* NAV: one floating capsule, always visible; slides away on scroll down, back on scroll up */
header{position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0; transition:transform .4s cubic-bezier(.22,.7,.2,1), padding .3s ease;}
header.scrolled{padding:10px 0;}
header.nav-hidden{transform:translateY(-120%);}
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:7px 7px 7px 22px; border-radius:100px; border:1px solid var(--line);
  background:rgba(255,255,255,.93); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 2px rgba(21,20,15,.04); transition:box-shadow .3s ease, background-color .3s ease;
}
header.scrolled .navbar{background:rgba(255,255,255,.96); box-shadow:0 8px 28px -12px rgba(21,20,15,.18);}
.logo{display:inline-flex; align-items:flex-end; font-family:'Urbanist', system-ui, sans-serif; font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--ink);}
.logo-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); margin:0 0 5px 2px;}
.nav-links{display:flex; align-items:center; gap:4px;}
.nav-link{
  display:inline-flex; align-items:center; gap:5px; padding:10px 15px; border-radius:100px;
  font-size:14px; font-weight:500; color:var(--ink-soft); transition:background-color .2s ease, color .2s ease;
}
.nav-link:hover{background:var(--pill); color:var(--ink);}
.nav-link.active{background:var(--pill); color:var(--ink); font-weight:600;}
.nav-ext{width:12px; height:12px; opacity:.6;}
.nav-cta{
  margin-left:6px; padding:10px 20px; border-radius:100px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; transition:background-color .2s ease, transform .2s ease;
}
.nav-cta:hover, .nav-cta.active{background:var(--accent);}
.nav-link:focus-visible, .nav-cta:focus-visible, .logo:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* HOME HERO */
.hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:110px; position:relative;}
.tab-row{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:640px; margin:0 auto 64px;}
.tab-indicator{
  position:absolute; top:0; left:0; background:var(--accent); border-radius:100px; z-index:0;
  pointer-events:none; box-shadow:0 6px 16px rgba(255,91,57,0.35);
}
.hero-tab{
  position:relative; z-index:1;
  border:none; background:var(--pill); color:var(--ink-soft); border-radius:100px; padding:11px 20px;
  font-size:13px; font-weight:600; letter-spacing:.03em; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.hero-tab:hover{background:var(--line); color:var(--ink);}
.hero-tab.active{background:transparent; color:#fff;}
.hero-statement{position:relative; min-height:220px; display:flex; align-items:center; justify-content:center;}
.hero-pane{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.hero-pane.active{opacity:1; pointer-events:auto; position:relative;}
.hero-pane h1,.hero-pane .hero-line{font-family:'Urbanist', system-ui, sans-serif; font-weight:400; letter-spacing:-0.005em; font-size:clamp(26px,4vw,46px); line-height:1.18; max-width:680px;}
.scroll-cue{
  display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; color:var(--ink-faint);
  margin-top:48px;
}
.scroll-cue .arrow{animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* SECTION HEAD */
section{padding:80px 0;}
#work, #why-me, #story{padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px);}
.sec-head{margin-bottom:48px; text-align:center;}
.sec-eyebrow{font-size:12px; letter-spacing:0.12em; color:var(--accent-ink); font-weight:600; margin-bottom:12px; text-transform:uppercase;}
.sec-head h2{font-size:clamp(24px,3.2vw,36px);}

/* WORK LIST — one card rhythm, image-forward */
.work-list{display:flex; flex-direction:column; gap:64px;}
.work-card{opacity:0; transform:translateY(30px); display:block;}
.work-visual{
  aspect-ratio:16/10; border-radius:20px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center; margin-bottom:28px;
  transform-style:preserve-3d; will-change:transform; box-shadow:0 0 0 rgba(21,20,15,0);
  transition:box-shadow .4s ease;
}
.work-card:hover .work-visual{box-shadow:0 30px 60px rgba(21,20,15,0.16);}

/* Peek-and-pop reveal (after sanvithi.com): at rest only the top of the product peeks out above a frosted
   glass panel that fades into the page; on hover the glass dissolves, the product rises past the card's
   top edge and tilted tag chips fly out left and right. Mouse/trackpad devices only. */
.pop-chips{display:none;}
@media (hover:hover) and (pointer:fine){
  .work-visual.reveal-pop{overflow:visible; transform-style:flat; transition:box-shadow .4s ease;}
  .work-visual.reveal-pop > .pop-main{z-index:2; transform:translateY(2%) scale(.94); transition:transform .75s cubic-bezier(.34,1.4,.64,1);}
  .work-visual.reveal-pop::before{content:''; position:absolute; left:0; right:0; top:var(--glass-top,36%); bottom:-1px; z-index:3; pointer-events:none;
    border-radius:20px 20px 20px 20px; border-top:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
    background:linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(246,244,238,.72) 55%, var(--bg) 100%);
    transition:opacity .45s ease, transform .6s ease;}
  .work-card:hover .work-visual.reveal-pop::before, .work-card:focus-visible .work-visual.reveal-pop::before{opacity:0; transform:translateY(8%);}
  .work-card:hover .work-visual.reveal-pop > .pop-main, .work-card:focus-visible .work-visual.reveal-pop > .pop-main{transform:translateY(-9%) scale(1.05);}

  .pop-chips{display:block; position:absolute; inset:0; z-index:4; pointer-events:none;}
  .pop-chips span{position:absolute; left:50%; top:62%; transform:translate(-50%,-50%) rotate(0deg) scale(.55); opacity:0; filter:blur(6px);
    padding:clamp(7px,.9vw,11px) clamp(14px,1.6vw,22px); border-radius:12px; white-space:nowrap;
    font-family:'Urbanist',system-ui,sans-serif; font-weight:600; font-size:clamp(13px,1.35vw,17px); letter-spacing:.01em;
    color:#fff; background:var(--chip,#7C9CC9); box-shadow:0 10px 24px -10px rgba(20,30,60,.45), inset 0 1px 0 rgba(255,255,255,.25);
    transition:left .7s cubic-bezier(.34,1.45,.64,1), top .7s cubic-bezier(.34,1.45,.64,1), transform .7s cubic-bezier(.34,1.45,.64,1), opacity .35s ease, filter .5s ease;}
  .work-card:hover .pop-chips span, .work-card:focus-visible .pop-chips span{left:var(--x); top:var(--y); transform:translate(-50%,-50%) rotate(var(--r)) scale(1); opacity:1; filter:none; transition-delay:var(--d,0s);}
}
@media (prefers-reduced-motion: reduce){ .work-visual.reveal-pop *, .work-visual.reveal-pop::before{transition:none !important;} }
.work-visual .mockframe{
  width:82%; border-radius:12px; border:1px solid rgba(21,20,15,0.12); background:rgba(255,255,255,0.65);
  padding:14px 18px; font-size:11px; color:var(--ink-soft); text-align:center;
  box-shadow:0 20px 50px rgba(21,20,15,0.08);
}
.work-visual::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
  pointer-events:none;
}
.work-visual.has-image::after{display:none;}
.work-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;}
.work-visual img.blend{mix-blend-mode:multiply; padding:3% 5%;}
.work-visual .browser{position:relative; width:84%; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(21,20,15,.08), 0 26px 50px -20px rgba(20,60,120,.35);}
.work-visual .browser img{position:static; width:100%; height:auto; object-fit:initial;}
.browser-bar{height:clamp(16px,2.4vw,26px); display:flex; align-items:center; gap:clamp(4px,.5vw,6px); padding:0 clamp(8px,1.2vw,14px); background:#EEF2F7; border-bottom:1px solid rgba(15,40,80,.06);}
.browser-bar i{width:clamp(6px,.7vw,9px); aspect-ratio:1; border-radius:50%; background:#C9D4E1;}
.work-desc{font-family:'Urbanist'; font-weight:400; font-size:clamp(19px,2.2vw,26px); line-height:1.4; max-width:760px; margin-bottom:16px; transition:color .3s ease;}
.work-card:hover .work-desc{color:var(--accent-ink);}
.work-tags{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;}
.work-tags span:not(:last-child)::after{content:'·'; margin:0 8px; color:var(--ink-faint);}

/* Cursor-follow "View" bubble (desktop hover only) */
.cursor-bubble{position:fixed; top:0; left:0; z-index:250; pointer-events:none;}
.cursor-bubble span{
  display:block; transform:translate(-50%,-50%) scale(.6);
  background:var(--accent); color:#fff; font-size:13px; font-weight:600;
  padding:11px 20px; border-radius:100px; opacity:0; white-space:nowrap;
  transition:opacity .25s ease, transform .25s ease;
}
.cursor-bubble.show span{opacity:1; transform:translate(-50%,-50%) scale(1);}
.work-note{
  font-family:'Urbanist'; font-weight:400; font-size:clamp(18px,2.2vw,22px); color:var(--accent-ink);
  text-align:center; opacity:0; transform:translateY(20px); line-height:1.5;
}

/* STRENGTHS GRID ("Why Me") */
.strengths-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.strength-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:28px;
  opacity:0; transform:translateY(20px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.strength-card.is-in{transform:none;}
.strength-card:hover, .strength-card.is-in:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(21,20,15,0.08); border-color:var(--accent);}
.strength-num{font-family:'Urbanist'; font-weight:600; color:var(--accent); font-size:15px; margin-bottom:14px;}
.strength-card h3{font-size:17px; margin-bottom:10px; font-weight:600;}
.strength-card p{font-size:14px; color:var(--ink-soft); line-height:1.6;}

/* STORY (home teaser) */
.story-text{font-size:clamp(20px,2.6vw,28px); line-height:1.5; max-width:760px; font-family:'Urbanist'; font-weight:500; margin:0 auto; text-align:center;}
.story-text .accent{color:var(--accent-ink);}

/* PAGE HERO (about / contact / plain page header) */
.page-hero{min-height:56vh; display:flex; flex-direction:column; justify-content:center; padding:150px 0 50px;}
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--ink-soft); margin-bottom:28px; opacity:0; transform:translateY(10px);
}
.back-link:hover{color:var(--accent);}
.page-eyebrow{font-size:12px; letter-spacing:0.14em; color:var(--accent-ink); font-weight:600; margin-bottom:16px; opacity:0; transform:translateY(10px); text-transform:uppercase;}
.page-hero h1{font-size:clamp(30px,5vw,54px); line-height:1.1; max-width:820px; opacity:0; transform:translateY(20px);}
.page-hero .lede{font-size:clamp(16px,1.6vw,19px); color:var(--ink-soft); max-width:640px; margin-top:20px; line-height:1.6; opacity:0; transform:translateY(20px);}

/* STORY page body */
.story-body{max-width:720px;}
.story-body p{font-size:16px; line-height:1.75; color:var(--ink-soft); margin-bottom:22px;}
.story-body p:first-child{font-size:19px; color:var(--ink); font-weight:500;}
.story-list{margin:32px 0; border-top:1px solid var(--line);}
.story-list-item{display:grid; grid-template-columns:160px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line);}
.story-list-item h4,.story-list-item h2{font-family:'Satoshi', system-ui, -apple-system, sans-serif; letter-spacing:normal; font-size:14px; font-weight:600; color:var(--accent-ink);}
.story-list-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0;}
.process-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:100%;}
.process-step{border-top:2px solid var(--line); padding-top:16px;}
.process-step .step-num{font-family:'Urbanist'; font-size:14px; color:var(--accent); font-weight:600; margin-bottom:8px;}
.process-step h4,.process-step h3{font-family:'Satoshi', system-ui, -apple-system, sans-serif; letter-spacing:normal; font-size:14.5px; margin-bottom:6px; font-weight:600;}
.process-step p{font-size:13px; color:var(--ink-soft); line-height:1.5;}

/* ===================== CASE STUDY PAGES ===================== */
.case-hero{
  min-height:70vh; padding:150px 0 0; position:relative; color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.case-hero .page-eyebrow{color:rgba(255,255,255,0.75); opacity:1; transform:none;}
.case-hero h1{font-family:'Urbanist'; font-weight:400; font-size:clamp(26px,4vw,44px); line-height:1.3; max-width:760px; margin:0 auto; opacity:1; transform:none;}
.case-hero .case-meta-line{margin-top:22px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.75); opacity:1;}
.case-hero .case-meta-line span:not(:last-child)::after{content:'·'; margin:0 10px;}
.case-hero .back-link{color:rgba(255,255,255,0.75); opacity:1; transform:none; align-self:flex-start;}
.case-hero .back-link:hover{color:#fff;}
.case-hero-visual{
  width:88%; max-width:960px; margin:40px auto 0; aspect-ratio:16/10; border-radius:20px 20px 0 0;
  background:rgba(255,255,255,0.92); box-shadow:0 30px 70px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px;
  will-change:transform; position:relative; overflow:hidden;
}

.case-cards{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:20px; padding-top:96px;}
.info-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:32px;
  opacity:0; transform:translateY(24px);
}
.info-row{padding:20px 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(10px);}
.info-row:first-child{padding-top:0;}
.info-row:last-child{padding-bottom:0; border-bottom:none;}
.info-row h4,.info-row h2{font-family:'Satoshi', system-ui, -apple-system, sans-serif; letter-spacing:normal; font-size:17px; font-weight:600; margin-bottom:8px;}
.info-row h4 em,.info-row h2 em{font-family:'Urbanist'; font-style:normal; color:var(--ink-soft); font-weight:400;}
.info-row p{font-size:14.5px; color:var(--ink-soft); line-height:1.65;}
.info-row .label{font-size:14.5px; font-weight:600; margin-bottom:3px;}
.info-row .caption{font-size:13px; color:var(--ink-faint);}
.impact-stat{font-family:'Urbanist'; font-weight:500; font-size:clamp(30px,4vw,44px); color:var(--accent-ink); margin-bottom:6px;}

.editorial{max-width:720px; margin:0 auto; padding:96px 0; opacity:0; transform:translateY(24px);}
.editorial .sec-eyebrow{text-align:left;}
.editorial h2{font-size:clamp(22px,3vw,32px); line-height:1.35; margin-bottom:24px;}
.editorial h2 em{font-family:'Urbanist'; font-style:normal; font-weight:600; color:var(--ink);}
.editorial h2 .dim{color:var(--ink-faint); font-style:normal; font-weight:400;}
.editorial p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:16px;}
.editorial ul{margin:16px 0 0 20px; color:var(--ink-soft); font-size:15px; line-height:1.8;}

.design-block{max-width:960px; margin:0 auto 96px; opacity:0; transform:translateY(24px);}
.design-block-text{max-width:720px; margin:0 auto;}
.design-block .sec-eyebrow{text-align:left;}
.design-block h3{font-family:'Urbanist'; font-weight:400; font-size:clamp(20px,2.6vw,28px); margin-bottom:6px;}
.design-block .tagline{color:var(--ink-faint); font-size:15px; margin-bottom:16px;}
.design-block p{font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:24px;}
.design-block .carousel-note{margin:20px 0 0; font-size:13.5px; color:var(--ink-faint); max-width:720px;}
.screens-carousel{position:relative;}
.screens-track{
  display:flex; align-items:flex-start; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; margin:0 -4px; padding:4px;
}
.screens-track::-webkit-scrollbar{display:none;}
.screen-thumb{
  flex:0 0 calc(50% - 10px); scroll-snap-align:start;
  aspect-ratio:16/9; border-radius:14px; background:var(--pill); will-change:transform; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-soft); text-align:center; padding:16px;
  transition:box-shadow .4s ease; min-width:0;
}
.screens-carousel.single .screen-thumb{flex-basis:100%;}
.screen-thumb:hover{box-shadow:0 20px 40px rgba(21,20,15,0.12);}
.case-hero-visual img, .screen-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;}

.carousel-arrow{
  position:absolute; top:50%; margin-top:-20px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 20px rgba(21,20,15,0.14); transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-arrow svg{width:16px; height:16px;}
.carousel-arrow:hover{background:var(--ink); color:var(--bg);}
.carousel-arrow.prev{left:8px;}
.carousel-arrow.next{right:8px;}
.carousel-arrow[disabled]{opacity:0; pointer-events:none;}
.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
.carousel-dots button{
  width:7px; height:7px; border-radius:50%; border:none; background:var(--line); padding:0; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.carousel-dots button.active{background:var(--accent); transform:scale(1.3);}

/* ---------------------------------------------------------------
   EventZero case-study mockup recreations — live HTML/CSS rebuilds
   of real screens from the product (no screenshot exists for most
   of them), scoped under .ez- so they can't leak into the rest of
   the site's styling. Sized to match a real captured screenshot's
   proportions (a wide, short "medium desktop viewport" shape) so
   every screen — hero, carousel, real screenshot — reads as one
   consistent set rather than mixed scales.
--------------------------------------------------------------- */
.screen-thumb:has(.ez-mock){padding:0; background:#eef1ef;}
.screens-carousel.wide .screen-thumb{flex-basis:100%; aspect-ratio:16/10;}
.screens-carousel.wide.r169 .screen-thumb{aspect-ratio:16/9;}
.screen-thumb.ez-shot{padding:0; background:#F9FAFB;}
.screen-thumb.ez-shot::after{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(21,20,15,.08); pointer-events:none;}
.screen-thumb.ez-shot img{object-fit:cover; object-position:top;}
.screen-thumb .ez-flow-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.screen-thumb .ez-phone-live-badge{top:auto; bottom:14px; right:14px;}
.case-hero-visual.ez-wide-frame{aspect-ratio:1887/867;}
.ez-mock{position:absolute; inset:0; background:#F9FAFB; display:flex; flex-direction:column; font-family:'Roboto','Roboto Fallback',system-ui,sans-serif; text-align:left;}
.ez-bar{flex-shrink:0; padding:14px 24px; background:#fff; border-bottom:1px solid #e5e7eb; font-family:'Roboto',system-ui,sans-serif; font-size:17px; font-weight:700; color:#111827;}
.ez-bar em{color:#5AC35D; font-style:normal;}
.ez-body{flex:1; min-height:0; padding:20px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;}
.ez-col{width:100%; max-width:460px; display:flex; flex-direction:column; gap:10px;}
.ez-step{align-self:center; font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.03em; color:#9ca3af; margin-bottom:4px; text-transform:uppercase;}
.ez-row{display:flex; align-items:flex-end; gap:8px;}
.ez-avatar{flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(90,195,93,.08); border:1px solid rgba(90,195,93,.2); display:flex; align-items:center; justify-content:center; margin-bottom:1px;}
.ez-avatar svg{width:12px; height:12px; color:#5AC35D;}
.ez-bubble{max-width:80%; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:14px 14px 14px 4px; padding:9px 12px; font-size:12.5px; line-height:1.5; color:#111928; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ez-bubble strong{font-weight:700;}
.ez-input-row{display:flex; gap:8px; margin-top:2px;}
.ez-input{flex:1; height:34px; border:1.2px solid rgba(0,0,0,.12); border-radius:100px; padding:0 14px; font-family:'Inter',system-ui,sans-serif; font-size:11.5px; color:#111928; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ez-btn{flex-shrink:0; height:34px; display:inline-flex; align-items:center; background:#5AC35D; color:#fff; border:none; border-radius:100px; padding:0 14px; font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:700; white-space:nowrap; box-shadow:0 2px 8px rgba(90,195,93,.3);}
.ez-options{display:flex; flex-direction:column; gap:8px; width:100%;}
.ez-option{display:flex; align-items:flex-start; gap:8px; border:1.2px solid rgba(0,0,0,.12); border-radius:12px; padding:9px 12px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); font-family:'Inter',system-ui,sans-serif;}
.ez-option svg{flex-shrink:0; width:14px; height:14px; color:#6B7280; margin-top:1px;}
.ez-option strong{display:block; font-weight:500; font-size:12px; color:#111928; margin-bottom:1px;}
.ez-option span{display:block; font-size:10px; font-weight:400; color:#4b5563;}
.ez-option.selected{border-color:#5AC35D; border-width:1.2px; background:#E8F8E9; box-shadow:0 0 0 3px rgba(90,195,93,.12);}
.ez-option.selected strong{font-weight:700; color:#3D9940;}
.ez-option.selected strong em{color:#5AC35D; font-style:normal; margin-left:4px;}
.ez-card-title{align-self:flex-start; font-family:'Inter',system-ui,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#9ca3af; text-transform:uppercase; margin-bottom:2px;}
.ez-slider-row{display:flex; align-items:center; gap:8px; font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:500; color:#374151;}
.ez-slider-row svg{width:13px; height:13px; color:#6B7280; flex-shrink:0;}
.ez-slider-row span{flex:0 0 84px; display:inline-flex; align-items:center; gap:5px;}
.ez-track{flex:1; height:6px; border-radius:3px; background:#e5e7eb; position:relative;}
.ez-fill{position:absolute; inset:0; width:0; border-radius:3px; background:#5AC35D;}
.ez-slider-row b{flex:0 0 32px; text-align:right; color:#3D9940; font-weight:700; font-size:11px;}
.ez-progress-total{width:100%; height:6px; border-radius:3px; background:#e5e7eb; margin-top:6px; overflow:hidden;}
.ez-progress-fill{height:100%; background:#5AC35D;}
.ez-complete{align-self:center; font-family:'Inter',system-ui,sans-serif; font-size:11px; color:#3D9940; font-weight:700; margin-top:2px;}
.ez-results{justify-content:center;}
.ez-result-title{align-self:center; font-family:'Inter',system-ui,sans-serif; font-size:21px; font-weight:700; color:#111928; text-align:center;}
.ez-result-sub{align-self:center; font-family:'Inter',system-ui,sans-serif; font-size:11px; color:#6B7280; text-align:center; margin-bottom:14px;}
.ez-stat-row{display:flex; gap:14px; width:100%;}
.ez-stat{flex:1; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ez-stat-label{font-family:'Inter',system-ui,sans-serif; font-size:9.5px; letter-spacing:.03em; color:#6B7280; font-weight:700; text-transform:uppercase;}
.ez-stat-num{font-family:'Inter',system-ui,sans-serif; font-size:28px; font-weight:700; color:#111928; line-height:1.15;}
.ez-stat.ez-stat-green .ez-stat-num{color:#3D9940;}
.ez-stat-unit{font-family:'Inter',system-ui,sans-serif; font-size:10.5px; color:#6B7280;}

/* Live auto-playing chat demo (stands in for a video — see js at the
   bottom of event-emission-calculator.html) */
.ez-live-badge{float:right; display:inline-flex; align-items:center; gap:5px; font-family:'Inter',system-ui,sans-serif; font-size:10px; font-weight:600; color:#9ca3af; text-transform:none;}
.ez-live-dot{width:6px; height:6px; border-radius:50%; background:#5AC35D; animation:ezPulse 1.6s infinite;}
@keyframes ezPulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.ez-demo-msg[data-role="user"]{align-self:flex-end;}
.ez-user-msg{background:#5AC35D; color:#fff; border-radius:14px 14px 4px 14px; padding:9px 12px; font-size:12.5px; font-weight:500; display:inline-block;}
.ez-typing{display:inline-flex; gap:3px; padding:11px 12px; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:14px 14px 14px 4px; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ez-typing span{width:5px; height:5px; border-radius:50%; background:#9ca3af; animation:ezTypingBounce 1s infinite ease-in-out;}
.ez-typing span:nth-child(2){animation-delay:.15s;}
.ez-typing span:nth-child(3){animation-delay:.3s;}
@keyframes ezTypingBounce{0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-4px); opacity:1;}}

/* Full-page auto-scroll recreation (homepage work-card) — a much taller
   version of the results report, scrolled top-to-bottom in a loop by JS
   (see the inline script at the bottom of index.html) rather than shown
   as one static crop. */
.ez-scroll-frame{flex:1; min-height:0; position:relative; overflow:hidden;}
.ez-scroll-inner{position:absolute; top:0; left:0; right:0; padding:20px 24px 32px; display:flex; flex-direction:column; align-items:center; gap:12px;}
.ez-report-card{width:100%; background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:16px; padding:16px 18px; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.ez-report-icon{width:28px; height:28px; border-radius:8px; background:rgba(90,195,93,.08); border:1px solid rgba(90,195,93,.2); display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
.ez-report-icon svg{width:15px; height:15px; color:#5AC35D;}
.ez-report-card .ez-stat-num{margin-top:2px;}
.ez-report-divider{border-top:1px solid rgba(0,0,0,.07); margin:12px 0 10px;}
.ez-report-link{font-family:'Inter',system-ui,sans-serif; font-size:11px; color:#374151; display:flex; align-items:center; gap:6px;}
.ez-report-link svg{width:13px; height:13px; color:#6B7280; flex-shrink:0;}
.ez-report-link span{display:block; font-size:9.5px; color:#9ca3af; font-weight:400;}
.ez-legend{align-self:flex-start; display:flex; gap:14px; font-family:'Inter',system-ui,sans-serif; font-size:9.5px; color:#9ca3af; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.ez-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; background:#d1d5db; font-style:normal;}
.ez-legend i.g{background:#5AC35D;}
.ez-footnote{align-self:center; font-family:'Inter',system-ui,sans-serif; font-size:9.5px; color:#9ca3af; text-align:center; max-width:340px;}
.ez-pill{align-self:center; border:1px solid rgba(26,122,74,.2); color:#5AC35D; background:rgba(90,195,93,.08); border-radius:100px; padding:6px 14px; font-family:'Roboto','Roboto Fallback',system-ui,sans-serif; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px;}
.ez-pill svg{width:12px; height:12px; color:#5AC35D;}
.ez-cta{align-self:center; background:#fff; color:#111928; border:1.2px solid rgba(0,0,0,.12); border-radius:100px; padding:10px 20px; font-family:'Roboto','Roboto Fallback',system-ui,sans-serif; font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.ez-cta svg{width:13px; height:13px; color:#111928;}

/* Homepage — real EventZero mobile screens in a silver three-device composition */
.ez-phone-stack{position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 50% 52%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);}
.ez-phone-live-badge{position:absolute; top:16px; right:18px; z-index:4; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:100px; padding:5px 11px; font-family:'Inter',system-ui,sans-serif; font-size:10px; font-weight:600; color:#4b5563; box-shadow:0 2px 10px rgba(0,0,0,.08);}
@media (max-width:600px){.ez-phone-live-badge{top:9px; right:10px; padding:3px 8px; font-size:9px; gap:5px;}}
.ez-device{
  position:absolute; top:50%; transform:translateY(-50%); aspect-ratio:9/19.5; padding:.72%;
  border-radius:15.5% / 7.2%;
  background:linear-gradient(135deg,#f7f7f9 0%,#cfd1d5 20%,#f2f2f4 46%,#b6b9be 76%,#e6e7ea 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 2px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.14), 0 34px 60px -22px rgba(18,24,18,.5);
}
.ez-device::before, .ez-device::after{content:''; position:absolute; width:1.4%; border-radius:2px; background:linear-gradient(90deg,#a3a6ab,#e1e2e5);}
.ez-device::before{left:-1.1%; top:19%; height:15%; background:linear-gradient(to bottom,#c3c5c9 0 42%,transparent 42% 58%,#c3c5c9 58% 100%);}
.ez-device::after{right:-1.1%; top:24%; height:10%;}
.ez-device.center{width:26%; left:37%; z-index:3;}
.ez-device.left{width:16%; left:22.8%; z-index:1; padding:.46%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 2px rgba(0,0,0,.07), 0 24px 44px -20px rgba(18,24,18,.4);}
.ez-device.right{width:16%; left:61.2%; z-index:1; padding:.46%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 2px rgba(0,0,0,.07), 0 24px 44px -20px rgba(18,24,18,.4);}
.pt-duo .browser{box-shadow:0 1px 2px rgba(30,25,70,.08), 0 26px 50px -20px rgba(40,30,110,.32);}

/* Desktop display mockup (GHG dashboard): black bezel, silver rim, aluminium stand */
.work-visual .monitor{position:relative; width:62%; display:flex; flex-direction:column; align-items:center; margin-top:-1.5%;}
.monitor-screen{width:100%; padding:1.3%; background:#0d0e10; border-radius:clamp(8px,1.3vw,16px);
  box-shadow:0 0 0 1.5px #C6CACF, 0 0 0 2.5px rgba(255,255,255,.7), 0 30px 60px -24px rgba(20,35,45,.55);}
.work-visual .monitor-screen img{position:static; display:block; width:100%; height:auto; object-fit:initial; border-radius:clamp(3px,.45vw,6px);}
.monitor-neck{width:15%; aspect-ratio:15/9; background:linear-gradient(90deg,#AEB2B8 0%,#E7E9EB 42%,#D4D7DB 60%,#A9ADB3 100%); clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);}
.monitor-foot{width:34%; height:clamp(5px,.8vw,9px); margin-top:-1px; border-radius:2px 2px 8px 8px; background:linear-gradient(180deg,#E9EBED,#B9BDC2); box-shadow:0 10px 18px -6px rgba(20,35,45,.45);}

/* Laptop mockup (Supplier module): black bezel with camera, aluminium base with thumb notch */
.work-visual .laptop{position:relative; width:80%; display:flex; flex-direction:column; align-items:center; margin-top:-1%;}
.laptop-screen{position:relative; width:84%; padding:1.6% 1.6% 1.8%; background:#0d0e10; border-radius:clamp(8px,1.2vw,15px) clamp(8px,1.2vw,15px) 3px 3px;
  box-shadow:0 0 0 1.5px #C6CACF, 0 0 0 2.5px rgba(255,255,255,.6);}
.laptop-screen::before{content:''; position:absolute; top:.55%; left:50%; transform:translateX(-50%); width:.6%; aspect-ratio:1; border-radius:50%; background:#2b2d31;}
.laptop-screen .ez-device-view{aspect-ratio:16/10; flex:none; border-radius:2px; background:#fff;}
.laptop-base{position:relative; width:100%; height:clamp(8px,1.3vw,15px); background:linear-gradient(180deg,#EDEEF0 0%,#CDD0D4 55%,#A6AAB0 100%);
  border-radius:0 0 50% 50% / 0 0 100% 100%; box-shadow:0 14px 22px -8px rgba(20,40,45,.45);}
.laptop-base::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:15%; height:45%; background:linear-gradient(180deg,#B9BDC2,#D9DBDE); border-radius:0 0 8px 8px;}

/* GHG case study: "what the module captures" widget anatomy grid */
.widget-anatomy{max-width:960px; margin:0 auto 96px; opacity:0; transform:translateY(24px);}
.widget-anatomy .design-block-text{margin-bottom:28px;}
.widget-anatomy .sec-eyebrow{text-align:left;}
.widget-anatomy h3{font-family:'Urbanist'; font-weight:400; font-size:clamp(20px,2.6vw,28px); margin-bottom:6px;}
.widget-anatomy .tagline{color:var(--ink-faint); font-size:15px;}
.widget-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.widget-tile{display:flex; flex-direction:column; gap:14px;}
.widget-tile.wide{grid-column:span 2;}
.widget-tile.full{grid-column:1 / -1;}
.widget-stage{display:flex; align-items:center; justify-content:center; height:clamp(260px,26vw,340px); padding:clamp(16px,2.2vw,28px); border-radius:18px; background:radial-gradient(ellipse 80% 80% at 50% 35%, #F4F7F6 0%, #E1E8E6 100%);}
.widget-stage img{max-width:100%; max-height:100%; width:auto; height:auto; display:block; border-radius:12px; box-shadow:0 1px 2px rgba(20,40,30,.08), 0 18px 36px -18px rgba(20,40,30,.35);}
.widget-tile h4{font-size:15px; font-weight:600; margin-bottom:4px;}
.widget-tile p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
@media (max-width:760px){ .widget-grid{grid-template-columns:1fr;} .widget-tile.wide, .widget-tile.full{grid-column:auto;} .widget-stage{height:300px;} }
.pt-duo .browser-bar{background:#F1F0F8;}
.pt-duo .browser-bar i{background:#CFCCE4;}
.ez-device-bezel{height:100%; padding:1.8%; background:#0c0c0d; border-radius:13.8% / 6.4%;}
.ez-device-screen{position:relative; height:100%; border-radius:12.2% / 5.7%; overflow:hidden; background:#fff; display:flex; flex-direction:column; container-type:inline-size;}
.ez-status{flex:none; height:12cqw; display:flex; align-items:center; justify-content:space-between; padding:1.5cqw 7cqw 0 11cqw; font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:4.3cqw; letter-spacing:-.01em; color:#0b0b0c; background:#fff;}
.ez-status svg{width:17cqw; height:auto; display:block;}
.ez-device-view{position:relative; flex:1; min-height:0; overflow:hidden;}
.ez-device-view img{position:absolute; inset:0 auto auto 0; width:100%; height:auto; object-fit:fill; display:block;}
.ez-device-view img.static{height:100%; object-fit:cover; object-position:top;}

/* Case-study hero and carousel — real EventZero report screenshots */
.ez-report-shot{position:absolute; inset:0; overflow:hidden; background:#fff;}
.ez-report-shot img{position:absolute; top:0; left:0; width:100%; height:auto; display:block;}
.ez-report-shot.static img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;}

.screen-thumb.has-preview{cursor:zoom-in;}

/* Screenshot lightbox — opens on click from any .screens-carousel image */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(10,9,6,0.92);
  display:flex; align-items:center; justify-content:center; padding:64px;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-frame{position:relative; max-width:min(1100px,100%); max-height:100%;}
.lightbox-frame img{
  display:block; max-width:100%; max-height:calc(100vh - 128px); border-radius:12px;
  box-shadow:0 40px 90px rgba(0,0,0,0.5); opacity:0; transform:scale(.98); transition:opacity .25s ease, transform .25s ease;
}
.lightbox-frame img.shown{opacity:1; transform:scale(1);}
.lightbox-caption{margin-top:16px; text-align:center; font-size:13px; color:rgba(246,244,238,0.65);}
.lightbox-close, .lightbox-arrow{
  position:fixed; border-radius:50%; border:1px solid rgba(246,244,238,0.25); background:rgba(246,244,238,0.08); color:var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, opacity .2s ease;
}
.lightbox-close:hover, .lightbox-arrow:hover{background:rgba(246,244,238,0.2);}
.lightbox-close{top:24px; right:24px; width:44px; height:44px;}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-arrow{top:50%; margin-top:-24px; width:48px; height:48px;}
.lightbox-arrow svg{width:18px; height:18px;}
.lightbox-arrow.prev{left:24px;}
.lightbox-arrow.next{right:24px;}
.lightbox-arrow[disabled]{opacity:0; pointer-events:none;}
@media(max-width:640px){
  .lightbox{padding:24px;}
  .lightbox-close{top:12px; right:12px; width:38px; height:38px;}
  .lightbox-arrow{width:40px; height:40px;}
  .lightbox-arrow.prev{left:8px;}
  .lightbox-arrow.next{right:8px;}
}

.case-close{text-align:center; max-width:640px; margin:0 auto; padding:40px 0 100px; opacity:0; transform:translateY(24px);}
.case-close .reflection-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:10px;}
.case-close .reflection{font-size:14.5px; color:var(--ink-soft); line-height:1.6; max-width:520px; margin:0 auto 40px;}
.case-close h2{font-family:'Urbanist'; font-weight:400; font-size:clamp(22px,3vw,30px); line-height:1.4;}
.case-close .fin{margin-top:14px; font-family:'Urbanist'; color:var(--ink-faint); font-size:16px;}

/* CONTACT FORM */
.contact-grid{display:grid; grid-template-columns:1fr 380px; gap:64px; align-items:start;}
.contact-form{display:flex; flex-direction:column; gap:20px;}
.form-row{display:flex; flex-direction:column; gap:8px;}
.form-row label{font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--ink-soft);}
.form-row input, .form-row textarea, .form-row select{
  background:var(--bg-card); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; font-family:'Satoshi', system-ui, sans-serif; font-size:14.5px; color:var(--ink);
  transition:border-color .2s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:none; border-color:var(--accent);}
.form-row textarea{resize:vertical; min-height:140px;}
.form-honeypot{position:absolute; left:-9999px; opacity:0; height:0; width:0;}
.submit-btn{
  align-self:flex-start; background:var(--ink); color:var(--bg); border:none; border-radius:100px;
  padding:15px 32px; font-family:'Satoshi', system-ui, sans-serif; font-weight:600; font-size:14.5px; cursor:pointer;
  transition:background .2s ease;
}
.submit-btn:hover{background:var(--accent);}
.submit-btn:disabled{opacity:.6; cursor:not-allowed;}
.form-status{font-size:13.5px; margin-top:4px; display:none;}
.form-status.show{display:block;}
.form-status.success{color:#2E6B3E;}
.form-status.error{color:var(--accent);}
.contact-side h5,.contact-side h2{font-family:'Satoshi', system-ui, -apple-system, sans-serif; font-size:11px; letter-spacing:0.1em; color:var(--ink-soft); font-weight:600; margin-bottom:14px; text-transform:uppercase;}
.contact-side a, .contact-side p{display:block; font-size:15px; margin-bottom:12px;}
.contact-side a:hover{color:var(--accent);}
.contact-side-block{margin-bottom:40px;}

/* FOOTER */
footer{padding:120px 0 40px; margin-top:40px; text-align:center;}
.footer-cta{font-family:'Urbanist'; font-weight:400; font-size:clamp(20px,2.6vw,28px); margin-bottom:40px;}
.footer-cta a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px;}
.footer-icons{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:56px;}
.footer-icons a{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:100px;
  padding:12px 22px; font-size:14px; font-weight:600; background:var(--bg-card);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-icons a svg{width:15px; height:15px;}
.footer-icons a:hover{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.ghost-logo-wrap{position:relative; display:inline-block; cursor:pointer;}
.ghost-logo{
  font-family:'Urbanist'; font-weight:700; font-size:clamp(56px,14vw,180px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--line); user-select:none;
  transition:color .5s ease, -webkit-text-stroke-color .5s ease, filter .5s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  display:inline-block;
}
.ghost-logo-wrap:hover .ghost-logo{transform:scale(1.035) skewX(-2deg); -webkit-text-stroke:1.5px var(--accent);}
.ghost-logo.tapped{
  color:var(--accent); -webkit-text-stroke:1.5px var(--accent-ink);
  filter:drop-shadow(0 10px 30px rgba(255,91,57,0.35));
}
.ghost-hint{
  position:absolute; right:-58px; bottom:10px; font-family:'Urbanist'; font-weight:400; font-size:15px; color:var(--ink-faint);
}
.footer-copy{margin-top:36px; font-size:12px; color:var(--ink-faint); display:flex; flex-direction:column; gap:4px;}
.footer-toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,10px); background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:100px; font-size:13px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:199; white-space:nowrap;
}
.footer-toast.show{opacity:1; transform:translate(-50%,0);}

/* SCROLL PROGRESS */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent);
  z-index:250; pointer-events:none;
}

/* PAGE TRANSITION CURTAIN */
.page-transition{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  transform:scaleY(1); transform-origin:bottom;
  animation:pt-reveal .7s cubic-bezier(.65,0,.35,1) forwards;
  pointer-events:none;
}
.page-transition.exiting{
  transform-origin:top;
  animation:pt-cover .5s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes pt-reveal{from{transform:scaleY(1);} to{transform:scaleY(0);}}
@keyframes pt-cover{from{transform:scaleY(0);} to{transform:scaleY(1);}}
@media(prefers-reduced-motion: reduce){ .page-transition{display:none !important;} }

@media(max-width:860px){
  .work-visual .mockframe{width:90%;}
  .footer-icons a span{display:none;}
  .strengths-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr 1fr;}
  .screen-thumb{flex-basis:100%;}
  .carousel-arrow{width:34px; height:34px; margin-top:-17px;}
  .carousel-arrow svg{width:14px; height:14px;}
  .contact-grid{grid-template-columns:1fr;}
  .story-list-item{grid-template-columns:1fr; gap:8px;}
  .case-cards{padding-top:64px;}
}



/* Phones: everything stays on one line, just tighter */
@media (max-width:600px){
  header .wrap{padding:0 12px;}
  .navbar{padding:5px 5px 5px 14px; gap:6px;}
  .logo{font-size:16px;}
  .nav-links{gap:0;}
  .nav-link{padding:9px 9px; font-size:13px;}
  .nav-cta{margin-left:3px; padding:9px 13px; font-size:13px;}
}
@media (max-width:400px){
  .nav-ext{display:none;}
  .logo{font-size:15px;}
  .navbar{padding-left:12px; gap:4px;}
  .nav-link{padding:9px 6px; font-size:12.5px;}
  .nav-cta{padding:9px 11px; font-size:12.5px;}
}

/* These sections set their own vertical padding, which also zeroed the .wrap side margin.
   Restore it so text never touches the screen edge on laptops, tablets and phones. */
.page-hero.wrap, .editorial.wrap, .case-close.wrap{padding-left:32px; padding-right:32px;}

/* HIRE ME page: hero actions, at-a-glance facts, recruiter form */
.hire-hero{min-height:auto; padding-bottom:36px;}
.hire-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;}
.hire-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:100px;
  font-size:15px; font-weight:600; background:var(--bg-card); border:1px solid var(--line); color:var(--ink);
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.hire-btn svg{width:16px; height:16px;}
.hire-btn:hover{border-color:var(--ink);}
.hire-btn.primary{background:var(--ink); border-color:var(--ink); color:#fff;}
.hire-btn.primary:hover{background:var(--accent); border-color:var(--accent);}
.hire-glance{padding-top:8px; padding-bottom:56px;}
.glance-title, .form-title{font-family:'Satoshi', system-ui, sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:16px;}
.glance-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.glance-item{background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:20px 20px 22px;}
.glance-item dt{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:8px;}
.glance-item dd{font-family:'Urbanist', system-ui, sans-serif; font-size:17px; line-height:1.35; color:var(--ink);}
.hire-form-section{padding-top:8px; padding-bottom:96px;}
.form-pair{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-row .optional{font-weight:500; color:var(--ink-faint); letter-spacing:0;}
.form-row select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6A63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.form-row select:invalid{color:var(--ink-faint);}
.form-row textarea::placeholder, .form-row input::placeholder{color:var(--ink-faint);}
@media (max-width:860px){ .glance-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .glance-grid, .form-pair{grid-template-columns:1fr;} .hire-btn{flex:1 1 auto; justify-content:center;} }

/* STORY page: experience timeline (titles and dates match LinkedIn) */
.timeline{list-style:none; max-width:880px; margin:0 auto; border-top:1px solid var(--line);}
.tl-item{display:grid; grid-template-columns:190px 1fr; gap:6px 32px; padding:26px 0; border-bottom:1px solid var(--line);}
.tl-dates{font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums; padding-top:5px; white-space:nowrap;}
.tl-item h3{font-family:'Urbanist', system-ui, sans-serif; font-size:21px; font-weight:600; line-height:1.3;}
.tl-org{font-size:15px; color:var(--accent-ink); margin:2px 0 8px;}
.tl-desc{font-size:15px; color:var(--ink-soft); line-height:1.65; max-width:62ch;}
@media (max-width:640px){ .tl-item{grid-template-columns:1fr; padding:22px 0;} .tl-dates{padding-top:0;} }

/* ---------- Process case study (research to final design) ---------- */
.proc-nav{max-width:960px; margin:72px auto 0; padding:0 32px;}
.proc-nav ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; counter-reset:step;}
.proc-nav li{counter-increment:step;}
.proc-nav a{display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border:1px solid var(--line); border-radius:100px; background:var(--bg-card); font-size:13.5px; color:var(--ink-soft); transition:border-color .2s ease, color .2s ease;}
.proc-nav a::before{content:counter(step, decimal-leading-zero); font-family:'Urbanist'; font-weight:600; font-size:12px; color:var(--accent-ink); font-variant-numeric:tabular-nums;}
.proc-nav a:hover, .proc-nav a:focus-visible{border-color:var(--ink-faint); color:var(--ink);}
.proc-label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-faint); margin:28px 0 12px;}
.design-block > .proc-body{max-width:720px; margin:0 auto;}
.design-block .proc-body p + p{margin-top:-8px;}
.method-list{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px;}
.method-list span{padding:6px 12px; border-radius:100px; background:var(--pill); font-size:13px; color:var(--ink);}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
.p-card{background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:22px;}
.p-card .k{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--accent-ink); margin-bottom:10px;}
.p-card h4{font-family:'Urbanist'; font-weight:600; font-size:18px; line-height:1.3; margin-bottom:8px; text-wrap:balance;}
.p-card p{font-size:14px !important; line-height:1.6 !important; color:var(--ink-soft); margin:0 0 10px !important;}
.p-card p:last-child{margin-bottom:0 !important;}
.p-card dl{display:grid; gap:10px; margin-top:12px; font-size:13.5px; line-height:1.5;}
.p-card dt{font-weight:600; color:var(--ink);}
.p-card dd{color:var(--ink-soft);}
.journey-scroll{overflow-x:auto; margin-top:8px; border:1px solid var(--line); border-radius:16px; background:var(--bg-card);}
.journey{width:100%; min-width:760px; border-collapse:collapse; font-size:13.5px; line-height:1.5;}
.journey th, .journey td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line);}
.journey tr:last-child th, .journey tr:last-child td{border-bottom:none;}
.journey thead th{font-family:'Urbanist'; font-weight:600; font-size:15px; color:var(--ink); background:#FBFAF6;}
.journey tbody th{width:118px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.journey td{color:var(--ink-soft);}
.journey tr.pain td{color:#8A3B22;}
.journey tr.response td{color:var(--ink);}
.hmw{margin:8px auto 0; max-width:820px; text-align:center; padding:44px 32px; border-radius:20px; background:#1F2A26; color:#F3F1EA;}
.hmw .k{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#A9C7B5; margin-bottom:14px;}
.hmw blockquote{font-family:'Urbanist'; font-size:clamp(20px,2.6vw,28px); line-height:1.4; text-wrap:balance;}
.scope-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; margin:20px auto 0;}
.scope-cols ul{margin:6px 0 0 18px; font-size:14px; color:var(--ink-soft); line-height:1.75;}
.flow{list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:8px; counter-reset:f;}
.flow li{position:relative; counter-increment:f; background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:16px 14px; font-size:13.5px; line-height:1.45; color:var(--ink-soft);}
.flow li strong{display:block; color:var(--ink); font-weight:600; margin-bottom:4px;}
.flow li::before{content:counter(f); display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--pill); font-size:11.5px; font-weight:600; color:var(--accent-ink); margin-bottom:10px;}
.flow li:not(:last-child)::after{content:""; position:absolute; top:26px; right:-9px; width:8px; height:2px; background:var(--ink-faint);}
.flow-note{margin-top:14px; font-size:13.5px; color:var(--ink-faint);}
.shot{border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(20,40,30,.08), 0 18px 36px -18px rgba(20,40,30,.35);}
.shot img{display:block; width:100%; height:auto;}
.decision{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:36px; align-items:center; margin-top:48px;}
.decision.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.decision.flip .decision-text{order:2;}
.decision .k{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--accent-ink); margin-bottom:8px;}
.decision h4{font-family:'Urbanist'; font-weight:600; font-size:clamp(19px,2.2vw,23px); line-height:1.3; margin-bottom:10px; text-wrap:balance;}
.decision p{font-size:14.5px !important; margin-bottom:12px !important;}
.decision-shots{display:grid; gap:14px;}
.iter{display:grid; gap:40px; margin-top:12px;}
.iter figure{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px; align-items:start;}
.iter figcaption .k{display:inline-block; padding:4px 10px; border-radius:100px; background:var(--pill); font-size:12px; font-weight:600; color:var(--accent-ink); margin-bottom:10px;}
.iter figcaption h4{font-family:'Urbanist'; font-weight:600; font-size:18px; margin-bottom:8px;}
.iter figcaption ul{margin:0 0 0 18px; font-size:14px; color:var(--ink-soft); line-height:1.65;}
.iter figcaption p{font-size:14px !important; margin:10px 0 0 !important;}
mark.draft{background:#FFF0B8; color:inherit; padding:0 2px; border-radius:3px; box-shadow:inset 0 -2px 0 #E5B92E;}
.draft-banner{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:200; background:#15140F; color:#F6F4EE; font-size:13px; padding:10px 16px; border-radius:100px; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); max-width:calc(100% - 32px); text-align:center;}
.draft-banner b{color:#FFE27A;}
@media (max-width:860px){
  .card-grid{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr 1fr;}
  .flow li::after{display:none;}
  .decision, .decision.flip, .iter figure{grid-template-columns:1fr; gap:18px;}
  .decision.flip .decision-text{order:0;}
  .scope-cols{grid-template-columns:1fr;}
}
@media (max-width:640px){ .proc-nav{padding:0 16px;} .hmw{padding:32px 20px;} }
/* Personas (tabs) and sketches */
.persona-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px;}
.persona-tabs button{font:inherit; font-size:14px; padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-soft); cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;}
.persona-tabs button span{color:var(--ink-faint); margin-left:6px;}
.persona-tabs button[aria-selected="true"]{background:#1F2A26; border-color:#1F2A26; color:#F3F1EA;}
.persona-tabs button[aria-selected="true"] span{color:#A9C7B5;}
.persona-tabs button:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px;}
.persona-panel{display:grid; gap:16px;}
.persona-panel[hidden]{display:none;}
.persona-panel img.has-preview, .sketch-grid img.has-preview{cursor:zoom-in;}
.persona-panel .meant{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:baseline; padding:16px 20px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card); font-size:14px; line-height:1.55; color:var(--ink-soft);}
.persona-panel .meant .k{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--accent-ink);}
.sketch-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; margin-top:8px;}
.sketch-grid figcaption{margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.sketch-grid figcaption b{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--pill); font-size:11px; color:var(--accent-ink); margin-right:6px; font-variant-numeric:tabular-nums;}
@media (max-width:760px){ .sketch-grid{grid-template-columns:1fr;} }
@media (max-width:560px){ .sketch-grid{grid-template-columns:1fr;} .persona-panel .meant{grid-template-columns:1fr;} }