:root{
  --bg:#fff; --ink:#0b0b10; --muted:#4b5563;
  --line:rgba(15,23,42,.10); --shadow:0 20px 60px rgba(2,6,23,.12);
  --r:26px; --max:1600px;
  --purple:#340231; --purple2:#4a0350; --orange:#FF8C30; --orange2:#ff6a00;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  letter-spacing:-.01em;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(52,2,49,.18)}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 18px}}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(2,6,23,.10);
  border-color:rgba(48,0,48,.22)
}
.btn.primary{
  border:none;color:#fff;background:var(--purple);
  box-shadow:0 14px 40px rgba(52,2,49,.25)
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  color:rgba(11,11,16,.78);
  font-size:13px
}

/* ===== Topbar / Nav ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.03em}
.brand img{height:28px;width:auto}
.brand .sub{font-weight:700;color:rgba(11,11,16,.60);font-size:12px;letter-spacing:.02em}
.navlinks{display:flex;gap:16px;align-items:center}
.navlinks a{
  padding:10px 12px;border-radius:12px;color:rgba(11,11,16,.70);
  transition:background .18s ease,color .18s ease
}
.navlinks a:hover{background:rgba(48,0,48,.06);color:rgba(11,11,16,.92)}
.navcta{display:flex;gap:10px;align-items:center}
.burger{
  display:none;width:42px;height:42px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.8)
}
@media (max-width:900px){
  .navlinks{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
}

/* ===== Drawer ===== */
.drawerMask{
  position:fixed;inset:0;
  background:rgba(2,6,23,.32);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
  z-index:80
}
.drawer{
  position:fixed;top:14px;right:14px;left:14px;
  transform:translateY(-8px) scale(.98);
  opacity:0;pointer-events:none;
  transition:transform .2s ease,opacity .2s ease;
  z-index:90;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--shadow)
}
.drawerHead{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 6px}
.drawerBody{padding:10px 14px 14px;display:grid;gap:10px}
.drawer a{
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72)
}
.drawerOpen .drawerMask{opacity:1;pointer-events:auto}
.drawerOpen .drawer{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}

/* ===== Hero (general pages) ===== */
.hero{padding:70px 0 38px;position:relative;overflow:hidden}
.hero:before{content:none}
.heroRow{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:end}
@media (max-width:980px){
  .hero{padding:56px 0 28px}
  .heroRow{grid-template-columns:1fr;align-items:start}
}

.hTitle{
  font-size:clamp(44px,5.4vw,92px);
  line-height:.92;font-weight:900;
  letter-spacing:-.05em;
  margin:10px 0 0
}
.hTitle span{color:var(--purple)}
.hDesc{
  max-width:64ch;color:rgba(11,11,16,.70);
  font-size:16px;line-height:1.6;margin:14px 0 0
}

/* ===== Stats ===== */
.statsBar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding:16px;border-radius:24px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(2,6,23,.08)
}
@media (max-width:700px){.statsBar{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-weight:900;letter-spacing:-.03em;font-size:20px}
.stat .l{color:rgba(11,11,16,.60);font-size:12px}

/* ===== Split cards ===== */
.split{padding:26px 0 70px}
.splitGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:980px){.splitGrid{grid-template-columns:1fr}}
.splitCard{
  position:relative;border-radius:34px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;overflow:hidden;min-height:420px;
  box-shadow:0 24px 70px rgba(2,6,23,.10);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.splitCard:hover{
  transform:translateY(-4px);
  box-shadow:0 38px 100px rgba(2,6,23,.14);
  border-color:rgba(48,0,48,.18)
}
.splitCard .bg{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 520px at 20% 20%,rgba(255,142,48,.20),transparent 60%),
    radial-gradient(900px 520px at 80% 30%,rgba(48,0,48,.22),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,1))
}
.splitCard.software .bg{
  background:
    radial-gradient(1000px 520px at 10% 20%,rgba(48,0,48,.22),transparent 60%),
    radial-gradient(900px 520px at 70% 40%,rgba(255,142,48,.18),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,1))
}
.splitInner{position:relative;display:flex;flex-direction:column;height:100%;padding:26px;gap:18px;transition:transform .25s ease}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70)
}
.badge .dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--orange));
  box-shadow:0 0 0 4px rgba(255,142,48,.12)
}
.splitTitle{margin:0;font-size:34px;line-height:1.05;letter-spacing:-.04em}
.splitTitle b{color:var(--purple)}
.splitList{display:grid;gap:10px;color:rgba(11,11,16,.72)}
.splitList .li{display:flex;gap:10px;align-items:flex-start}
.li .ic{
  width:22px;height:22px;border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.8)
}
.splitFoot{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.preview{
  position:absolute;right:-22px;bottom:-22px;
  width:56%;max-width:430px;border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  overflow:hidden;background:#fff;
  box-shadow:0 24px 70px rgba(2,6,23,.18);
  transform:rotate(1.2deg)
}

/* ===== Sections ===== */
.section{padding:70px 0}
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sectionHead h2{margin:0;font-size:44px;letter-spacing:-.05em;line-height:1}
.sectionHead p{margin:0;color:rgba(11,11,16,.68);max-width:60ch;line-height:1.6}
@media (max-width:800px){
  .sectionHead{flex-direction:column;align-items:flex-start}
  .sectionHead h2{font-size:36px}
}

/* ===== Marquee ===== */
.marquee{
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.9);
  overflow:hidden
}
.marqueeTrack{display:flex;gap:28px;padding:16px 0;width:max-content;animation:mar 22s linear infinite}
@keyframes mar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee span{font-weight:900;letter-spacing:-.03em;color:rgba(11,11,16,.70)}
.marquee span b{color:rgba(11,11,16,.92)}

/* ===== Tabs ===== */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tab{
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.8);
  color:rgba(11,11,16,.75);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease
}
.tab:hover{transform:translateY(-1px);border-color:rgba(48,0,48,.18)}
.tab.active{
  background:linear-gradient(135deg,rgba(48,0,48,.10),rgba(255,142,48,.10));
  border-color:rgba(48,0,48,.22);
  color:rgba(11,11,16,.92)
}

/* ===== Work cards ===== */
.workGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:18px}
.workCard{
  grid-column:span 6;
  padding:16px;border-radius:28px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 55px rgba(2,6,23,.08);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.workCard:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 90px rgba(2,6,23,.12);
  border-color:rgba(48,0,48,.18)
}
.workCard .thumb{
  border-radius:20px;
  border:1px solid rgba(15,23,42,.10);
  overflow:hidden;background:#fff
}
.workCard .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.workCard .meta h3{margin:0;font-size:22px;letter-spacing:-.03em}
.workCard .meta .tag{
  font-size:12px;color:rgba(11,11,16,.65);
  border:1px solid rgba(15,23,42,.10);
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.75)
}
.workCard p{margin:10px 0 0;color:rgba(11,11,16,.70);line-height:1.55}
.workCard .actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){.workCard{grid-column:span 12}}

/* ===== Gallery + Lightbox ===== */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:18px}
.gItem{
  grid-column:span 3;border-radius:22px;overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow:0 12px 38px rgba(2,6,23,.06);
  cursor:zoom-in;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.gItem:hover{transform:translateY(-2px);box-shadow:0 22px 64px rgba(2,6,23,.10);border-color:rgba(48,0,48,.18)}
.gItem img{width:100%;height:240px;object-fit:cover}
@media (max-width:1000px){.gItem{grid-column:span 4}}
@media (max-width:640px){.gItem{grid-column:span 6}.gItem img{height:180px}}

.lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;place-items:center;
  background:rgba(2,6,23,.65);
  backdrop-filter:blur(10px);
  padding:18px
}
.lightbox.open{display:grid}
.lightboxCard{
  width:min(1100px,100%);
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:#0b0b10;
  box-shadow:0 30px 120px rgba(0,0,0,.45);
  position:relative
}
.lbClose{
  position:absolute;top:12px;right:12px;width:42px;height:42px;
  border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer
}

/* ===== Footer ===== */
.footer{padding:40px 0 60px;border-top:1px solid rgba(15,23,42,.08)}
.footerGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.footerLinks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.footerLinks a{
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:rgba(255,255,255,.75)
}
@media (max-width:900px){.footerGrid{grid-template-columns:1fr}}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:translateY(0)}

/* ===== 2026 polish ===== */
.sectionTitle span,
.kicker b,
.hKicker b{ color: var(--purple); }

.kicker{
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(11,11,16,.55);
  font-size:12px
}

/* ===== Studio cards (keep stable: NO conflicting duplicate overrides) ===== */
.studioPick{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media (max-width: 980px){.studioPick{grid-template-columns:1fr}}

.studioCard{
  position:relative;overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(52,2,49,.035), rgba(255,255,255,1));
  box-shadow:0 18px 60px rgba(2,6,23,.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease
}
.studioCard:hover{
  transform:translateY(-4px);
  box-shadow:0 44px 140px rgba(2,6,23,.14);
  border-color: rgba(52,2,49,.20);
}
.studioCardInner{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:22px;align-items:stretch}
@media (max-width:980px){.studioCardInner{grid-template-columns:1fr;}}

.studioMedia{
  position:relative;border-radius:22px;overflow:hidden;
  min-height:240px;background:#fff;
  border:1px solid rgba(52,2,49,.10);
  box-shadow:0 18px 70px rgba(2,6,23,.10)
}
.studioMedia img{
  width:100%;height:100%;
  object-fit:cover;
  transform:none; /* stable */
}

/* Keep ONE overlay (subtle brand wash, not white glare) */
.studioMedia:after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(52,2,49,0) 40%,
    rgba(52,2,49,.10) 72%,
    rgba(52,2,49,.18) 100%
  );
}
@media (max-width:980px){
  .studioMedia:after{
    background: linear-gradient(
      180deg,
      rgba(52,2,49,0) 45%,
      rgba(52,2,49,.12) 78%,
      rgba(52,2,49,.20) 100%
    );
  }
}

.studioPills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.studioPills .pill{background:rgba(52,2,49,.06);border:1px solid rgba(52,2,49,.10)}
.studioCard h3{margin:0;font-size:36px;line-height:1.05;letter-spacing:-.04em}
.studioCard h3 b{color:var(--purple)}
.studioBullets{margin:14px 0 0;display:grid;gap:10px;color:rgba(11,11,16,.74)}
.studioBullets .li{display:flex;gap:10px;align-items:flex-start}
.studioBullets .dot{
  width:18px;height:18px;border-radius:999px;
  background: rgba(255,140,48,.14);
  border: 1px solid rgba(255,140,48,.40);
  display:grid;place-items:center;
  flex:0 0 auto;margin-top:2px
}
.studioBullets .dot:before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background: var(--purple);
}
.studioActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ===== Banner hero (general usage) ===== */
.bannerHero{padding:32px 0 10px}
.bannerWrap{
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  position:relative;
  min-height:360px
}
.bannerWrap img{
  width:100%;height:100%;
  object-fit:cover;
  position:absolute;inset:0
}
.bannerWrap:after{
  content:"";
  position:absolute;inset:0;
  /* default: gentle readability (works for other pages too) */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.70) 42%,
    rgba(255,255,255,.18) 72%,
    rgba(255,255,255,0) 100%
  );
}
.bannerContent{position:relative;z-index:2;padding:44px;max-width:760px}
@media (max-width: 760px){
  .bannerWrap{min-height:420px}
  .bannerContent{padding:26px}
  .bannerWrap:after{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.70) 55%,
      rgba(255,255,255,.10) 100%
    );
  }
}

/* ===== Founder ===== */
.founderCard{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:center}
@media (max-width: 980px){.founderCard{grid-template-columns:1fr}}
.founderPhoto{
  border-radius:28px;
  background:radial-gradient(circle at 30% 20%, rgba(52,2,49,.18), rgba(52,2,49,.08) 55%, rgba(255,255,255,1) 100%);
  border:1px solid rgba(52,2,49,.14);
  padding:18px
}
.founderPhoto img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(2,6,23,.25))}

/* ===== Tiles (offerings) ===== */
.tileGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:18px}
.tile{grid-column:span 3;display:flex;flex-direction:column;gap:12px}
@media (max-width:1100px){.tile{grid-column:span 6}}
@media (max-width:640px){.tile{grid-column:span 12}}

.tileMedia{
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow:0 18px 55px rgba(2,6,23,.08)
}
.tileMedia img{
  width:100%;
  height:320px;
  object-fit:cover;
  transform:none; /* stable */
}
.tileTitle{margin:0;font-size:22px;letter-spacing:-.03em;line-height:1.05}
.tileTitle span{color:var(--purple)}
.tileDesc{margin:0;color:rgba(11,11,16,.70);line-height:1.55;font-size:14px}

.logoWall{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:18px}
.logoPill{
  grid-column:span 3;
  display:flex;align-items:center;justify-content:center;
  height:72px;border-radius:18px;
  border:1px dashed rgba(52,2,49,.25);
  background:rgba(255,255,255,.9);
  color:rgba(11,11,16,.60);
  font-weight:800;letter-spacing:-.02em
}
@media (max-width:1000px){.logoPill{grid-column:span 4}}
@media (max-width:640px){.logoPill{grid-column:span 6;height:64px}}
.heroPlain{background:linear-gradient(180deg, rgba(52,2,49,.06), rgba(255,255,255,1) 55%)}

/* ======================================================================
   STORYTELLING PAGE ONLY (scoped)
   Nothing here should affect other pages.
====================================================================== */

/* Flush banner to topbar on storytelling page */
.page-storytelling .bannerHero{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Full-width storytelling banner */
.page-storytelling .bannerHero.bannerFull{
  padding-left:0;
  padding-right:0;
}
.page-storytelling .bannerHero.bannerFull .bannerWrap{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  border-left:0;
  border-right:0;
  border-top:0;
  overflow:hidden;
}

/* Ensure image behaves perfectly inside the banner */
.page-storytelling .bannerHero.bannerFull .bannerWrap > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ✅ Banner height (keep your 525px) */
.page-storytelling .bannerHero.bannerFull .bannerWrap{
  min-height:525px !important;
}
@media (max-width:760px){
  .page-storytelling .bannerHero.bannerFull .bannerWrap{
    min-height:525px !important;
  }
}

/* ✅ Align banner text flush with the logo/wrap (remove extra left padding) */
.page-storytelling .bannerHero.bannerFull .bannerContent{
  padding:44px 0 !important;  /* left/right = 0 so it aligns with .wrap */
  max-width:760px;
}
@media (max-width:760px){
  .page-storytelling .bannerHero.bannerFull .bannerContent{
    padding:26px 0 !important;
  }
}

/* Storytelling banner overlay (keep for readability) */
.page-storytelling .bannerHero .bannerWrap:after{
  background: linear-gradient(
    90deg,
    rgba(52,2,49,.24) 0%,
    rgba(52,2,49,.16) 46%,
    rgba(52,2,49,.08) 72%,
    rgba(52,2,49,0) 100%
  ) !important;
}
@media (max-width:760px){
  .page-storytelling .bannerHero .bannerWrap:after{
    background: linear-gradient(
      180deg,
      rgba(52,2,49,.26) 0%,
      rgba(52,2,49,.14) 62%,
      rgba(52,2,49,0) 100%
    ) !important;
  }
}

/* Storytelling banner text readability */
.page-storytelling .bannerHero .bannerContent .hTitle{
  color:#fff !important;
  text-shadow:0 18px 60px rgba(0,0,0,.55) !important;
}
.page-storytelling .bannerHero .bannerContent .hDesc{
  color:rgba(255,255,255,.88) !important;
  text-shadow:0 14px 40px rgba(0,0,0,.45) !important;
}
.page-storytelling .bannerHero .bannerContent .hTitle span{
  color:var(--orange) !important;
}
.page-storytelling .bannerHero .bannerContent .pill{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.20) !important;
  color:rgba(255,255,255,.92) !important;
}
.page-storytelling .bannerHero .bannerContent .btn{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.page-storytelling .bannerHero .bannerContent .btn.primary{
  background:var(--orange2) !important;
  border:none !important;
  color:#fff !important;
}

/* ======================================================================
   ✅ STORYTELLING COLLAGE (FIXED)
   - Works with your existing HTML:
     <div class="collage" data-collage> ... <button class="collageItem" style="--bg:url(...)">
   - NO gradients/filters on artwork
   - Scoped to .page-storytelling only
====================================================================== */

.page-storytelling .collage[data-collage],
.page-storytelling .collage{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  margin-top:18px;
}

.page-storytelling .collage .collageItem{
  grid-column:span 4;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background-color:#0b0b10;
  /* ✅ this is the missing link: your tiles use --bg */
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  box-shadow:0 18px 60px rgba(2,6,23,.10);
  cursor:pointer;
  min-height:240px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-storytelling .collage .collageItem:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 90px rgba(2,6,23,.14);
  border-color:rgba(52,2,49,.22);
}

/* ✅ No overlays, no gradients, no image filters. Keep titles readable only. */
.page-storytelling .collage .collageTitle{
  position:absolute;
  left:16px; right:16px; bottom:14px;
  color:#fff;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:22px;
  line-height:1.05;
  z-index:2;
  text-shadow:0 14px 40px rgba(0,0,0,.55);
}

/* Responsive spans (keeps your nice layout) */
.page-storytelling .collage .collageItem:nth-child(1){grid-column:span 4}
.page-storytelling .collage .collageItem:nth-child(2){grid-column:span 8}
@media (max-width:1000px){
  .page-storytelling .collage .collageItem{grid-column:span 6}
  .page-storytelling .collage .collageItem:nth-child(2){grid-column:span 6}
}
@media (max-width:640px){
  .page-storytelling .collage .collageItem{grid-column:span 12}
}

/* ======================================================================
   ✅ PRODUCT MODAL (SCOPED + CENTERED + NO IMAGE OVERLAY)
====================================================================== */

.page-storytelling .modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:250;

  /* ✅ true vertical centering */
  align-items:center;
  justify-content:center;

  padding:18px;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(10px);
}
.page-storytelling .modal.open{display:flex}

.page-storytelling .modalCard{
  width:min(1100px, 100%);
  max-height:calc(100vh - 36px); /* ✅ prevents “pushed-up” feeling */
  overflow:auto;                /* ✅ scroll inside if needed */
  border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.94);
  box-shadow:0 40px 160px rgba(0,0,0,.45);
  position:relative;
}

.page-storytelling .modalClose{
  position:absolute;top:12px;right:12px;
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;
}

.page-storytelling .modalGrid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
}

.page-storytelling .modalMedia{
  position:relative;
  min-height:340px;
  background:#0b0b10;
}
.page-storytelling .modalMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;          /* ✅ no fade */
  filter:none;        /* ✅ no distortion */
}

/* ✅ remove any overlay on modal image */
.page-storytelling .modalMedia:after{ content:none !important; }

.page-storytelling .modalBody{
  padding:22px 22px 24px;
}

.page-storytelling .modalTitle{
  margin:10px 0 0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.page-storytelling .modalDesc{
  margin:12px 0 0;
  color:rgba(11,11,16,.72);
  line-height:1.6;
}
.page-storytelling .modalBullets{
  margin-top:14px;
  display:grid;
  gap:10px;
  color:rgba(11,11,16,.78);
}
.page-storytelling .modalBullets .li{display:flex;gap:10px;align-items:flex-start}
.page-storytelling .modalBullets .dot{
  width:18px;height:18px;border-radius:999px;
  background:rgba(255,140,48,.16);
  border:1px solid rgba(255,140,48,.40);
  flex:0 0 auto;margin-top:2px;
}
.page-storytelling .modalActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

@media (max-width:980px){
  .page-storytelling .modalGrid{grid-template-columns:1fr}
  .page-storytelling .modalMedia{min-height:260px}
}

/* ======================================================================
   STORYTELLING COLLAGE FIX ONLY (SAFE + SCOPED)
   Uses your existing HTML: style="--bg:url('...')"
   No gradients, no overlays, no filters.
   Will NOT affect other pages.
====================================================================== */

.page-storytelling .collage[data-collage],
.page-storytelling .collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* ✅ The actual fix: apply the CSS variable as the background image */
.page-storytelling .collage .collageItem {
  grid-column: span 4;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);

  background-color: #0b0b10;
  background-image: var(--bg);      /* ✅ THIS makes images show */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 240px;
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-storytelling .collage .collageItem:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 90px rgba(2,6,23,.14);
  border-color: rgba(52,2,49,.22);
}

/* ✅ No overlays at all */
.page-storytelling .collage .collageItem::before,
.page-storytelling .collage .collageItem::after {
  content: none !important;
}

/* Title stays readable without changing the artwork */
.page-storytelling .collage .collageTitle {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: 22px;
  line-height: 1.05;
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

/* Keep your nice “wide second tile” layout */
.page-storytelling .collage .collageItem:nth-child(1) { grid-column: span 4; }
.page-storytelling .collage .collageItem:nth-child(2) { grid-column: span 8; }

@media (max-width: 1000px) {
  .page-storytelling .collage .collageItem { grid-column: span 6; }
  .page-storytelling .collage .collageItem:nth-child(2) { grid-column: span 6; }
}
@media (max-width: 640px) {
  .page-storytelling .collage .collageItem { grid-column: span 12; }
}


/* ======================================================================
   STORYTELLING COLLAGE (PURPLE OVERLAY FOR TEXT)
   - Works with your current HTML (inline background-image:url(...))
   - Overlay ONLY on collage tiles (NOT modal)
   - Darker purple on hover
   - Fully scoped so other pages remain unchanged
====================================================================== */

.page-storytelling .collage[data-collage],
.page-storytelling .collage{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  margin-top:18px;
}

.page-storytelling .collage .collageItem{
  grid-column:span 4;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);

  /* IMPORTANT:
     Do NOT set background-image here.
     Your HTML already sets background-image inline. */
  background-color:#0b0b10;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  min-height:240px;
  box-shadow:0 18px 60px rgba(2,6,23,.10);
  cursor:pointer;

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-storytelling .collage .collageItem:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 90px rgba(2,6,23,.14);
  border-color:rgba(52,2,49,.26);
}

/* ✅ Purple overlay for readability (ONLY collage) */
.page-storytelling .collage .collageItem::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* Similar spirit to banner overlay: purple wash */
  background: linear-gradient(
    180deg,
    rgba(52,2,49,0.10) 0%,
    rgba(52,2,49,0.22) 45%,
    rgba(52,2,49,0.55) 100%
  );

  transition: background .18s ease;
}

/* ✅ Darker on hover */
.page-storytelling .collage .collageItem:hover::after{
  background: linear-gradient(
    180deg,
    rgba(52,2,49,0.16) 0%,
    rgba(52,2,49,0.32) 45%,
    rgba(52,2,49,0.70) 100%
  );
}

.page-storytelling .collage .collageTitle{
  position:absolute;
  left:16px; right:16px; bottom:14px;
  z-index:2;

  color:#fff;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:22px;
  line-height:1.05;
  text-shadow:0 14px 40px rgba(0,0,0,.55);
}

/* Layout (same as before) */
.page-storytelling .collage .collageItem:nth-child(1){grid-column:span 4}
.page-storytelling .collage .collageItem:nth-child(2){grid-column:span 8}

@media (max-width:1000px){
  .page-storytelling .collage .collageItem{grid-column:span 6}
  .page-storytelling .collage .collageItem:nth-child(2){grid-column:span 6}
}
@media (max-width:640px){
  .page-storytelling .collage .collageItem{grid-column:span 12}
}

/* ✅ Storytelling collage: remove border lines on tiles only (does not affect modal) */
.page-storytelling .collage .collageItem{
  border: none !important;
}

/* ======================================================================
   WHY-US PAGE ONLY (scoped)
   - Borderless tall founder photo (newspaper feel)
   - Cleaner article typography
   - Clickable product tiles
====================================================================== */

.page-whyus .founderCardNews{
  align-items:stretch;            /* makes photo match text height */
  grid-template-columns:420px 1fr;
}
@media (max-width: 980px){
  .page-whyus .founderCardNews{
    grid-template-columns:1fr;
  }
}

/* Borderless, tall photo like a newspaper spread */
.page-whyus .founderPhotoNews{
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:hidden;
  min-height:520px;               /* ensures “tall enough” on desktop */
}
.page-whyus .founderPhotoNews img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 !important;     /* borderless */
  filter:none !important;         /* remove drop shadow “card” feel */
  display:block;
}
@media (max-width: 980px){
  .page-whyus .founderPhotoNews{
    min-height:420px;
  }
}

/* Founder typography: nicer reading, more “article” */
.page-whyus .founderBody{padding-top:4px}
.page-whyus .founderName{
  margin:0 0 10px;
  font-size:36px;
  letter-spacing:-.03em;
  line-height:1.05;
}
.page-whyus .founderPills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

.page-whyus .founderArticle{
  color:rgba(11,11,16,.76);
  line-height:1.75;
  font-size:15.5px;
}
.page-whyus .founderArticle p{margin:0 0 12px}
.page-whyus .founderLead{
  font-size:16.5px;
  color:rgba(11,11,16,.82);
}
.page-whyus .founderClose{margin-top:2px}

/* Optional newspaper columns on big screens (keeps mobile clean) */
@media (min-width: 1180px){
  .page-whyus .founderArticle{
    column-count:2;
    column-gap:26px;
  }
  .page-whyus .founderArticle p{
    break-inside:avoid;
  }
  .page-whyus .founderLead{
    column-span:all;
    padding-bottom:2px;
  }
}

/* Clickable tiles (whole tile becomes link) */
.tileGridClickable .tileLink{
  cursor:pointer;
  position:relative;
  border-radius:26px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tileGridClickable .tileLink:hover{
  transform:translateY(-3px);
}

/* Add a tidy meta row: title + CTA */
.tileGridClickable .tileMeta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.tileGridClickable .tileCta{
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(11,11,16,.62);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.75);
}
.tileGridClickable .tileLink:hover .tileCta{
  color:rgba(11,11,16,.85);
  border-color:rgba(52,2,49,.20);
}
.tileGridClickable .tileLink:focus-visible{
  outline:3px solid rgba(52,2,49,.25);
  outline-offset:3px;
}

/* ======================================================================
   WHY-US: Founder lead + two-column justified layout (scoped)
   - Strong “lede” subheading
   - Justified text
   - Left column carries more text
   - Right column feels airier (more space)
====================================================================== */

.page-whyus .founderLead{
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(11,11,16,.88);
  font-weight: 650;
  letter-spacing: -.01em;

  /* “worthy of attention” treatment */
  padding: 12px 14px;
  border-left: 4px solid rgba(52,2,49,.55);
  background: linear-gradient(90deg, rgba(52,2,49,.06), rgba(255,255,255,0));
  border-radius: 14px;
}

.page-whyus .founderCols{
  display: grid;
  grid-template-columns: 1.25fr 0.95fr; /* left more content, right more airy */
  gap: 32px;
  align-items: start;
}

/* Justify both columns */
.page-whyus .founderCol{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.page-whyus .founderCol p{
  margin: 0 0 12px;
}

/* Make the right column feel like it has more “space” */
.page-whyus .founderColRight{
  padding-left: 10px;
  border-left: 1px solid rgba(15,23,42,.10);
  opacity: .98;
}

.page-whyus .founderClose{
  margin-top: 2px;
}

/* Responsive: collapse to one column on smaller screens */
@media (max-width: 980px){
  .page-whyus .founderCols{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-whyus .founderColRight{
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(15,23,42,.10);
    padding-top: 14px;
  }
}


/* =========================================================
   WHY-US FIX: force TWO columns (not 4)
   - We keep the clean justified look
   - Disable the older column-count newspaper rule
========================================================= */

/* Kill the old "column-count" layout on why-us */
@media (min-width: 1180px){
  .page-whyus .founderArticle{
    column-count: initial !important;
    column-gap: initial !important;
  }
  .page-whyus .founderLead{
    column-span: initial !important;
  }
}

/* Keep it to exactly 2 columns using the grid */
.page-whyus .founderCols{
  grid-template-columns: 1.25fr 0.95fr; /* 2 columns only */
  gap: 32px;
}

/* Keep text looking nice */
.page-whyus .founderCol{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* WHY-US: single-column readable paragraphs on mobile */
@media (max-width: 980px){
  .page-whyus .founderCols{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .page-whyus .founderCol{
    text-align: left;     /* better readability on mobile */
    hyphens: none;
  }
}


/* ===== Index: Wide brand intro paragraph (scoped) ===== */
.sectionHead.wideHead{
  display:block; /* stop the split “justify-content:space-between” layout */
}

.sectionHead.wideHead h2{
  margin-bottom: 10px;
}

.sectionHead.wideHead .brandIntro p{
  max-width:none;                 /* ✅ allow full width */
  margin:0;
  color:rgba(11,11,16,.74);
  font-size:clamp(15.5px, 1.05vw, 18px);
  line-height:1.85;
  letter-spacing:-.01em;
}

/* Optional: makes long copy feel premium on wide screens */
@media (min-width: 1100px){
  .sectionHead.wideHead .brandIntro p{
    column-count:2;
    column-gap:28px;
  }
}

/* Mobile readability */
@media (max-width: 800px){
  .sectionHead.wideHead .brandIntro p{
    column-count:1;
    line-height:1.75;
  }
}

/* ===== Index: keep brand intro as ONE paragraph (no columns) ===== */
.sectionHead.wideHead .brandIntro p{
  column-count: 1 !important;
  column-gap: 0 !important;
}

/* ===== Index: Innovating for the future (stack cards on mobile) ===== */
@media (max-width: 760px){
  .workGrid{
    grid-template-columns: 1fr;  /* single column */
    gap: 14px;
  }

  .workCard{
    grid-column: 1 / -1 !important; /* override inline spans (7 / 5) */
  }
}

/* ===== Footer: Social icons (NEW) ===== */
.footerSocial{
  display:flex;
  gap:10px;
  margin-top:14px;
  align-items:center;
  flex-wrap:wrap;
}

.socialBtn{
  width:42px;height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(2,6,23,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.socialBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 55px rgba(2,6,23,.10);
  border-color:rgba(52,2,49,.22);
  background:linear-gradient(135deg, rgba(52,2,49,.06), rgba(255,142,48,.06));
}

.socialBtn:focus-visible{
  outline:3px solid rgba(52,2,49,.25);
  outline-offset:3px;
}

.socialBtn svg{
  width:20px;height:20px;
  fill:rgba(11,11,16,.78);
}

.socialBtn:hover svg{
  fill:rgba(11,11,16,.92);
}

/* ✅ Mobile header: hide CTA buttons, keep burger */
@media (max-width:900px){
  .navcta .btn{ display:none; }   /* hides Explore + Let’s build */
  .navcta .burger{ display:inline-flex; } /* ensure burger still shows */
}