/* Premium micro-interactions (vanilla, respectful of prefers-reduced-motion) */
:root{
  --glow: rgba(31,102,255,.18);
  --glow2: rgba(255,61,127,.10);
  --glass: rgba(255,255,255,.52);
  --glassLine: rgba(12,18,28,.10);
}

/* Prevent horizontal overflow on case study pages (mobile) */
.is-case{overflow-x: hidden;}
.is-case main, .is-case .wrap{max-width: 100%;}

@media (max-width: 1024px){
  /* Case-study full-bleed media (100vw) can create horizontal overflow due to rounding (common on iPad). */
  html, body{overflow-x:hidden;}
  .is-case{overflow-x:hidden;}
  .bleed{width:100% !important; margin-left:0 !important; margin-right:0 !important;}
  .is-case .bleed{width:100% !important; margin-left:0 !important; margin-right:0 !important;}
  .is-case main, .is-case .wrap{max-width: 100% !important;}
  .is-case .wrap{padding-left:16px !important; padding-right:16px !important;}
}

@media (max-width: 720px){
  .is-case .heroMedia{max-height: min(44vh, 340px) !important;}
}

  /* Full-bleed helper can cause horizontal scrolling on small screens due to 100vw rounding.
     On mobile we keep it simple and safe. */
  .is-case .bleed{width:100%; margin-left:0; margin-right:0;}
  .is-case .heroMedia{max-height: min(44vh, 340px) !important;}
  .is-case .wrap{padding-left:16px !important; padding-right:16px !important;}
  .is-case .wrap.caseWide{max-width: 100% !important;}

  /* Typography + spacing for dense case content */
  .is-case h1{font-size: clamp(28px, 7.4vw, 42px) !important; letter-spacing: -1px !important;}
  .is-case .lede{font-size: 13px !important;}
  .is-case .card{padding: 14px !important; border-radius: 18px !important;}
  .is-case .gItem{border-radius: 14px !important;}

  /* Make process steps usable instead of squished */
  .is-case .pSteps{
    display:flex !important;
    gap: 10px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }
  .is-case .pStep{min-width: 250px; scroll-snap-align: start;}
  .is-case .pStep::after{content:"" !important;}
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* Slight grain to make the background feel less flat (very subtle) */
.art::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Content visibility helpers */
.cv-auto{content-visibility:auto; contain-intrinsic-size: 900px 800px;}

/* Smart nav underline */
nav{position:relative;}
nav a.is-active{
  color: var(--text);
  background: rgba(255,255,255,.62);
  border-color: rgba(31,102,255,.16);
}
.navUnderline{
  position:absolute;
  height:2px;
  left:0; top: calc(100% - 2px);
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,102,255,.0), rgba(31,102,255,.65), rgba(255,61,127,.35));
  transform: translateX(0);
  transition: transform .22s ease, width .22s ease, opacity .22s ease;
  opacity:.0;
  pointer-events:none;
}

/* Editorial tiles */
.tileLink{
  position:relative;
  border-radius: var(--radius);
  transform: translateZ(0);
}
.tileLink::before{
  content:"";
  /* Keep the glow without creating a visible "frame" around the media */
  position:absolute; inset:0;
  border-radius: var(--radius);
  background: radial-gradient(420px 160px at 20% 20%, var(--glow), transparent 60%),
              radial-gradient(420px 160px at 80% 80%, var(--glow2), transparent 60%);
  opacity:0;
  transition: opacity .18s ease;
  z-index:0;
}
.tileLink > *{position:relative; z-index:1;}
.tileLink:hover{
  transform: translateY(-3px);
}
.tileLink:hover::before{opacity:1;}
.tileLink:hover{
  box-shadow: 0 26px 66px rgba(0,0,0,.14);
}
.tileLink{transition: transform .18s ease, box-shadow .18s ease, border-radius .18s ease;}
.tileLink:hover{border-radius: calc(var(--radius) - 6px);}
.tileLink:hover .tileMedia{border-radius: calc(var(--radius) - 6px);}
/* Remove the subtle "image frame" some browsers render on hover */
.tileMedia, .tileMedia img{border:0 !important; outline:0 !important;}
.tileLink:hover .tileMedia, .tileLink:hover .tileMedia img{box-shadow:none !important;}

/* Prevent hover artifacts in the 2-up grid by keeping the hovered card on top */
.workGrid .workShell{position:relative;}
.workGrid .tileLink{position:relative; z-index:1;}
.workGrid .tileLink:hover{z-index:3;}

/* Make 2-up grid cards behave like the featured tile (avoid grey "shadow slabs" on hover)
   by moving the chrome from the wrapper to the link itself. */
.workGrid .workShell{background:transparent !important; box-shadow:none !important; border:none !important; overflow:visible !important;}
.workGrid .tileLink{border:1px solid var(--line); background:#fff; border-radius: var(--radius); overflow:hidden;}

.tileMeta .tag{
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  will-change: transform;
}
.tileLink:hover .tileMeta .tag{
  transform: translateY(-1px);
  border-color: rgba(31,102,255,.16);
  background: rgba(255,255,255,.62);
}
.tileLink:hover .tileMeta .tag:nth-child(2){transform: translateY(-2px);}
.tileLink:hover .tileMeta .tag:nth-child(3){transform: translateY(-1px) translateX(1px);}
.tileLink:hover .tileMeta .tag:nth-child(4){transform: translateY(-2px) translateX(1px);}

.tilePeek{
  /* Hidden by default without reserving layout space */
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 12px;
  color: rgba(28,34,44,.72);
  padding: 0 10px;
  border-radius: 14px;
  border: 0 solid rgba(12,18,28,.10);
  background: rgba(255,255,255,.62);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, max-height .18s ease, margin .18s ease, padding .18s ease, border-width .18s ease;
}
.tileLink:hover .tilePeek{
  opacity: 1;
  transform: translateY(0);
  max-height: 80px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-width: 1px;
}

/* Cleaner sections (remove heavy shadows per request) */
.pStep{box-shadow:none !important;}
.pNum{box-shadow:none !important;}
.aboutCopy{box-shadow:none !important;}
.aboutCard{box-shadow:none !important;}
.row{box-shadow:none !important;}

/* Process rail line removed (homepage + case studies) */
.railLine,.railRunner{display:none !important;}
.process .pRail,.process .pDot{display:none !important;}
.card.process{box-shadow:none !important;}

/* Chat message soft reveal (homepage uses .msg, case pages use .m) */
.msg.softIn,.m.softIn{opacity:0; transform: translateY(6px);}
.msg.softIn.in,.m.softIn.in{opacity:1; transform: translateY(0); transition: opacity .22s ease, transform .22s ease;}

/* Case study 2-column sticky */
.caseLayout{
  display:grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px;
  align-items:start;
  margin-top: 14px;
}
.caseSummary{
  position:sticky;
  top: 86px;
}

/* Prevent long strings (URLs, tool lists, etc.) from blowing out the layout */
.is-case .caseSummary,
.is-case .caseContent{min-width:0;}
.is-case p, .is-case li, .is-case b, .is-case .gItem b{overflow-wrap:anywhere; word-break:break-word;}
/* Some mobile browsers (or "desktop site" mode) report wider viewports.
   Use a more forgiving breakpoint so case pages still collapse to one column. */
@media (max-width: 1200px){
  .caseLayout{grid-template-columns:1fr; gap:14px;}
  .caseSummary{position:static; top:auto;}
}
.caseSummary .card{backdrop-filter: blur(10px) saturate(150%); background: rgba(255,255,255,.78);}
.caseSummary .h{margin-bottom: 8px;}
.caseSummary .glance{grid-template-columns:1fr;}

/* Use more width on case study pages */
.wrap.caseWide{max-width: 1200px;}
/* Keep right column content breathing */
.caseContent .card{margin-top:14px;}

/* Blur-up images without drama */
img.blur-up{
  filter: blur(14px);
  transform: scale(1.02);
  transition: filter .28s ease, transform .28s ease;
}
img.blur-up.is-loaded{
  filter: blur(0);
  transform: scale(1);
}

/* Lightbox */
.lbOverlay{
  position:fixed; inset:0; z-index:1000;
  display:none;
  background: rgba(10,12,16,.78);
  backdrop-filter: blur(10px) saturate(140%);
}
.lbOverlay.open{display:block;}
.lbShell{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  padding: 18px;
}
.lbPanel{
  width: min(1120px, 94vw);
  height: min(78vh, 860px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,24,32,.52);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  overflow:hidden;
  display:grid;
  grid-template-rows: auto 1fr auto;
}
.lbTop{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 12px;
  color: rgba(255,255,255,.86);
  font-size: 12px;
}
.lbTop b{font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.lbBtn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.lbBtn:hover{background: rgba(255,255,255,.12);}
.lbStage{
  position:relative;
  overflow:hidden;
  background: rgba(0,0,0,.20);
  display:grid;
  place-items:center;
}
.lbStage img{
  max-width: 100%;
  max-height: 100%;
  transform-origin: center;
  transition: transform .12s ease;
  user-select:none;
}
.lbNav{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px;
  color: rgba(255,255,255,.80);
  font-size: 12px;
}
.lbCaption{opacity:.9; max-width: 70ch;}
.lbKeys{opacity:.6; font-size:11px;}
.lbArrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  display:grid; place-items:center;
  cursor:pointer;
}
.lbArrow:hover{background: rgba(255,255,255,.14);}
.lbPrev{left: 14px;}
.lbNext{right: 14px;}
@media (max-width:720px){
  .lbArrow{display:none;}
}

/* --- Mobile polish for case study layouts --- */
@media (max-width: 980px){
  /* Process steps: horizontal scroll instead of squished grid */
  .pRail,.pDot{display:none !important;}
  .pSteps{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto !important;
    padding: 6px 2px 10px !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .pSteps::-webkit-scrollbar{height:6px;}
  .pSteps > .pStep{min-width: 260px; scroll-snap-align:start;}

  /* Selected visuals: single column */
  .shots{grid-template-columns: 1fr !important;}

  /* Case header pills stay compact */
  .caseHeader{padding: 10px !important;}
}

/* About refresh */
.about5050{align-items:stretch;}
.aboutNew .aboutSplit{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.aboutBlock{
  border: 1px solid rgba(12,18,28,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 16px 46px rgba(0,0,0,.06);
  padding: 14px;
}
.aboutH{
  font-family: var(--serif);
  font-weight: 650;
  letter-spacing: -.4px;
  margin: 0 0 10px;
}
.aboutList{
  margin:0; padding-left: 18px;
  color: rgba(28,34,44,.78);
  font-size: 13px;
  line-height: 1.55;
}
.aboutList li{margin: 10px 0;}
.aboutList b{color: var(--text);}
.aboutList span{display:block; color: rgba(28,34,44,.68); margin-top: 3px;}
.aboutLooking{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(12,18,28,.10);
  background: rgba(255,255,255,.72);
  display:flex; gap:10px; align-items:flex-start;
}
.aboutLooking b{white-space:nowrap;}
.aboutLooking span{color: rgba(28,34,44,.72); font-size: 13px; line-height:1.5;}

.aboutCardNew{position:relative; overflow:hidden;}

/* About image should fill the whole visual card */
.aboutCardNew{min-height: 420px;}
@media (max-width: 900px){
  .aboutCardNew{min-height: 340px;}
}
.aboutCardNew #aboutChar{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.aboutCardNew #aboutChar:hover{transform:none !important; filter:none !important;}
.valueChips{
  position:absolute; left: 14px; top: 14px;
  display:flex; flex-wrap:wrap; gap:8px;
  z-index:2;
}
.vChip{
  font-size: 11px;
  color: rgba(28,34,44,.72);
  border: 1px solid rgba(12,18,28,.12);
  background: rgba(255,255,255,.72);
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(0,0,0,.06);
  transition: transform .16s ease;
}
#aboutVisual:hover .vChip:nth-child(1){transform: translateY(-1px);}
#aboutVisual:hover .vChip:nth-child(2){transform: translateY(-2px);}
#aboutVisual:hover .vChip:nth-child(3){transform: translateY(-1px) translateX(1px);}


/* Case Study: project-only navigation */
.caseHeader{
  position: sticky;
  top: 14px;
  z-index: 50;
  margin: 14px auto 0;
  width: min(1160px, calc(100% - 28px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glassLine);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.caseBack{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: #0b0f14;
  border: 1px solid rgba(12,18,28,.12);
  background: rgba(255,255,255,.70);
  transition: transform .18s ease, border-color .18s ease;
}
.caseBack:hover{transform: translateY(-1px); border-color: rgba(12,18,28,.18);}
.caseBack:focus-visible{outline: 2px solid rgba(31,102,255,.35); outline-offset: 2px;}

.caseSwitcher{position:relative;}
.caseSwitchBtn{
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12,18,28,.12);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.caseSwitchBtn:hover{transform: translateY(-1px); border-color: rgba(12,18,28,.18);}
.caseMenu{
  position:absolute;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  top: calc(100% + 10px);
  width: min(420px, calc(100vw - 36px));
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(12,18,28,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:none;
}
.caseMenu.open{display:block;}
.caseMenuItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: #0b0f14;
  border: 1px solid transparent;
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.caseMenuItem:hover{background: rgba(31,102,255,.06); border-color: rgba(31,102,255,.12); transform: translateY(-1px);}
.caseMenuItem.active{background: rgba(17,24,39,.06);}

.casePager{display:flex; align-items:center; gap: 8px;}
.casePrev,.caseNext{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  text-decoration:none;
  border-radius: 999px;
  border: 1px solid rgba(12,18,28,.12);
  background: rgba(255,255,255,.70);
  color:#0b0f14;
  transition: transform .18s ease, border-color .18s ease;
}
.casePrev:hover,.caseNext:hover{transform: translateY(-1px); border-color: rgba(12,18,28,.18);}

@media (max-width: 520px){
  .caseHeader{top: 10px; border-radius: 18px; padding: 10px;}
  .casePager{display:none;}
  .caseSwitchBtn{padding: 10px 12px;}
}

/* Remove editorial peek tooltip () */


/* --- Iteration: compact homepage header + better chat chip layout --- */
.topbar .wrap{padding:0 18px !important;} /* avoid huge header due to global .wrap bottom padding */

/* Chat: keep pills fully visible; scroll if needed */
.chatDock{display:flex; flex-direction:column;}
.stream{flex:1; height:auto !important; min-height: 240px;}
.chatChips{
  max-height: 160px;
  overflow:auto;
  padding: 0 14px 18px !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.chatChips::-webkit-scrollbar{height:10px; width:10px;}
.chatChips::-webkit-scrollbar-thumb{background: rgba(12,18,28,.18); border-radius:999px;}
.chatChips::-webkit-scrollbar-track{background: transparent;}

/* --- Process (homepage) placeholder visuals --- */
.processPlaceholders{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin: 10px auto 18px;
  max-width: 1200px;
}
.processPlaceholders img{
  width: clamp(220px, 28vw, 360px);
  height: auto;
  border-radius: 26px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.65);
  box-shadow: none;
}
@media (max-width: 720px){
  .processPlaceholders{gap:12px;}
  .processPlaceholders img{width: min(92vw, 420px);}
}



/* --- Case Study header back button --- */
.caseHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.caseBackBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: inherit;
  font-size: 12px;
  text-decoration:none;
  font-weight: 500;
  letter-spacing: 0;
}
.caseBackBtn:hover{
  background: rgba(255,255,255,.86);
}


/* --- Home: remove hover frame ring on tiles --- */
.home .tileLink::before{display:none !important;}

/* --- Chat (case studies): add breathing room between stream and chips --- */
.chatChips{
  padding-top: 12px !important;
  margin-top: 10px;
  border-top: 1px solid rgba(12,18,28,.06);
}

/* --- Homepage Process: editorial card strip (like reference) --- */
.processCards{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  margin: 14px auto 18px;
  max-width: 1280px;
}
.processCard{
  flex: 1 1 240px;
  max-width: 300px;
  border-radius: 26px;
  border: 1px solid rgba(12,18,28,.10);
  background: rgba(255,255,255,.72);
  overflow:hidden;
  position:relative;
  padding: 18px 18px 16px;
  box-shadow: none;
}
.processCard .badge{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 650;
  border: 1px solid rgba(12,18,28,.14);
  background: rgba(255,255,255,.78);
}
.processCard h4{margin: 14px 0 8px; font-size: 20px; letter-spacing: -0.02em;}
.processCard p{margin: 0; font-size: 13px; line-height: 1.45; color: rgba(28,34,44,.74);}
.processCard .illus{
  margin-top: 12px;
  height: 110px;
  border-radius: 18px;
  border: 1px dashed rgba(12,18,28,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  display:grid;
  place-items:center;
}
.processCard .illus svg{width: 86%; height: 86%; opacity:.85;}
@media (max-width: 780px){
  .processCards{gap:14px;}
  .processCard{max-width: 100%;}
}


/* Process card tones */
.processCard:nth-child(1){background: radial-gradient(800px 220px at 20% 10%, rgba(0,0,0,.06), transparent 55%), rgba(255,255,255,.72);}
.processCard:nth-child(2){background: radial-gradient(600px 240px at 30% 20%, rgba(255,220,40,.30), transparent 60%), rgba(255,255,255,.72);}
.processCard:nth-child(3){background: radial-gradient(600px 240px at 30% 20%, rgba(255,140,40,.22), transparent 60%), rgba(255,255,255,.72);}
.processCard:nth-child(4){background: radial-gradient(600px 240px at 30% 20%, rgba(255,60,60,.18), transparent 60%), rgba(255,255,255,.72);}


/* --- Case header: sticky --- */
.caseHeader{
  position: sticky;
  top: 14px;
  z-index: 60;
}

/* --- Chat chips: more breathing room + safe scroll --- */
.chatDock .chatChips{
  margin-top: 14px;
  padding-bottom: 10px;
  max-height: 132px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Theme tokens (light/dark) --- */
:root{
  /* Base palette */
  --bg:#f7f8fb;
  --bg2:#ffffff;
  --text:#0b0f1a;
  --muted: rgba(11,15,26,.68);
  --line: rgba(0,0,0,.10);

  /* Surfaces */
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.92);
  --chip: rgba(255,255,255,.70);

  /* Accents */
  --accent:#111827;
  --accent2:#1f66ff;
  --focus: rgba(31,102,255,.28);

  /* Glass */
  --glass: rgba(255,255,255,.52);
  --glassLine: rgba(12,18,28,.10);

  /* Shadows (kept subtle) */
  --shadow: 0 18px 50px rgba(0,0,0,.08);
  --shadow2: 0 12px 28px rgba(0,0,0,.06);
}

:root


/* Work grid shells should not clip or cast their own shadow (prevents grey hover artifacts on some tiles) */
.workGrid .workShell{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.workGrid .workShell .tileLink{
  display:block;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  overflow:hidden;
}


@media (max-width: 820px){
  .caseLayout{gap:14px !important;}
  .card{padding:14px !important;}
  .card .h{font-size: 20px !important; line-height:1.15;}
  .card .p, .card p, .card li{font-size: 15px !important; line-height:1.6;}
  .glance{grid-template-columns:1fr !important;}
  .gItem{padding:10px 10px !important;}
}
@media (max-width: 520px){
  .card{padding:13px !important;}
  .card .h{font-size: 19px !important;}
  .card ul{padding-left: 18px !important;}
}



/* ---------- Consent banner (optional Google Fonts) ---------- */
.consentBar{
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 1200;
  border-radius: 20px;
  border: 1px solid rgba(12,18,28,.14);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  padding: 12px 12px;
  animation: consentIn .22s ease-out both;
}
@keyframes consentIn{
  from{transform: translateY(10px); opacity:0;}
  to{transform: translateY(0); opacity:1;}
}
.consentBar.out{animation: consentOut .22s ease-in both;}
@keyframes consentOut{
  from{transform: translateY(0); opacity:1;}
  to{transform: translateY(10px); opacity:0;}
}
.consentInner{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
}
.consentText{
  font-size: 12px;
  color: rgba(28,34,44,.78);
  line-height: 1.35;
}
.consentText b{color: rgba(11,15,20,.92);}
.consentBtns{display:flex; gap:8px; align-items:center; flex: 0 0 auto;}
.consentBtn{
  border: 1px solid rgba(12,18,28,.16);
  background: rgba(11,15,20,.92);
  color: #fff;
  border-radius: 14px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor:pointer;
}
.consentBtn:hover{filter: brightness(1.05);}
.consentBtn.ghost{
  background: rgba(255,255,255,.72);
  color: rgba(11,15,20,.9);
}
@media (max-width: 520px){
  .consentInner{flex-direction:column; align-items:stretch;}
  .consentBtns{justify-content:stretch;}
  .consentBtn{width:100%;}
}

/* ---------- Lightbox tweaks: show full image + nicer motion ---------- */
.lbOverlay{opacity:0; transition: opacity .18s ease;}
.lbOverlay.open{opacity:1;}
.lbPanel{transform: translateY(8px) scale(.985); transition: transform .18s ease;}
.lbOverlay.open .lbPanel{transform: translateY(0) scale(1);}
.lbStage{overflow:auto;}
.lbStage img{
  max-height: none;
  height: auto;
}

/* ---------- About character hover / focus ---------- */
#aboutChar{
  transition: transform .22s ease, filter .22s ease;
  will-change: transform;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
#aboutChar:hover{
  transform: translateY(-6px) rotate(-1deg) scale(1.02);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.18));
}
#aboutChar:active{transform: translateY(-2px) rotate(0deg) scale(1.01);}
@media (prefers-reduced-motion: reduce){
  #aboutChar{transition:none;}
  #aboutChar:hover{transform:none; filter:none;}
  .consentBar, .lbOverlay, .lbPanel{transition:none; animation:none;}
}

/* ---------- Mobile polish: impact grid + hero spacing ---------- */
@media (max-width: 560px){
  .impactBar{grid-template-columns: 1fr 1fr !important; margin-top: 56px !important;}
  .impactMetric{padding: 14px 12px 12px !important; min-height: 84px !important;}
  .impactMetric b{font-size: 20px !important; letter-spacing: -.6px !important;}
  .impactMetric span{font-size: 11px !important; max-width: 30ch !important;}
  .hero{padding-top: 14px !important;}
}

/* Homepage: make offering scannable */
.servicePills{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
@media (max-width: 720px){
  .servicePills{gap:8px; margin-top:10px;}
}


/* --- v5: section rhythm + skill highlighting + capability cards --- */
.impactBar{ margin-bottom: clamp(4rem, 8vw, 8rem); }
#help{ margin-top: 0; }

/* Skill bubbles moved above work */
#workFilters{margin-top: 70px;}
.bubblePanelWork{min-height: unset !important; padding: 16px !important;}
.bubblePanelWork .bubbleCloud{min-height: unset !important;}

/* Case study: show skill chips + highlight on filter */
.caseSkillChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}
.caseSkillChip{
  font-size: 11px;
  color: rgba(28,34,44,.68);
  border: 1px solid rgba(12,18,28,.10);
  background: rgba(255,255,255,.56);
  padding: 7px 10px;
  border-radius: 999px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease, color .14s ease;
}
.caseSkillChip.isRest{opacity: .52;}
.caseSkillChip.isHit{
  opacity: 1;
  color: rgba(11,15,20,.92);
  border-color: rgba(31,102,255,.22);
  background: rgba(31,102,255,.08);
  transform: translateY(-1px);
}


/* Skill bubble -> highlight inside cards (no greying-out) */
.workShell.isDim{ opacity: 1 !important; filter: none !important; }
.workShell.isHi{ opacity: 1 !important; filter: none !important; transform: none !important; box-shadow: none !important; }

/* Case study hover: remove border "frame" */
.workGrid .tileLink:hover{border-color: transparent !important;}

/* Capability panels (replaces timeline) */
.tracks{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px){
  .tracks{ grid-template-columns: 1fr; }
}

.track{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
}

.capGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.capItem{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  padding: 12px 12px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.capItem b{ display:block; font-weight: 700; margin-bottom: 4px; }
.capItem span{ display:block; color: rgba(0,0,0,.68); font-size: .95rem; line-height: 1.35; }

.capItem.isSkillActive{
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .capItem, .capItem.isSkillActive{ transform:none; }
}

.bubble.isActive{ background: rgba(0,0,0,.88); color:#fff; border-color: rgba(0,0,0,.88); }

/* ---------- Hero overlay (case study cover) ---------- */
.heroMedia{position:relative;}
.heroMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
  pointer-events:none;
  opacity:.55;
}
.heroOverlay{
  position:absolute;
  left: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index:2;
  color:#fff;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 700ms ease;
  text-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.heroMedia.isLoaded .heroOverlay{
  opacity:1;
  transform: translateY(0);
}
.heroKicker{
  margin: 0 0 .35rem 0;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .86;
}
.heroTitle{
  margin: 0 0 .75rem 0;
  font-family: var(--serif, ui-serif, Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.06;
}
.heroChips{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.heroChip{
  display:inline-flex;
  align-items:center;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .9rem;
  line-height: 1;
}
.srOnly{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  .heroOverlay{transition:none; opacity:1; transform:none;}
}