/* fonts */
/* @font-face {
  font-family: degular-black;
  src: url(assets/degular-black.otf);
} */

@font-face {
  font-family: degular-bold;
  src: url(/assets/degular-bold.otf) format('opentype');
}

/*
@font-face {
  font-family: degular-light;
  src: url(assets/degular-light.otf);
}*/

@font-face {
  font-family: degular-medium;
  src: url(assets/degular-medium.otf) format('opentype');
}

/*
@font-face {
  font-family: degulardisplay-black;
  src: url(assets/degulardisplay-black.otf);
} */

@font-face {
  font-family: degular-thin;
  src: url('/assets/degular-thin.otf') format('opentype');
}

@font-face {
  font-family: "IamIanb";
  src: url('/assets/iamianb_variable.woff2') format('woff2-variations');
  font-weight: 50 900;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: IamIanb;
  src: url('assets/42dotsans-light.otf');
  font-weight: 50;
}
@font-face {
  font-family: IamIanb;
  src: url('assets/42dotsans-regular.otf');
  font-weight: 400;
}
@font-face {
  font-family: IamIanb;
  src: url('assets/42dotsans-bold.otf');
  font-weight: 700;
} */

:root {
  --outer-margin: 32px;
  --spacing: 24px;
  --gap: 16px;
  --gap-small: 8px;
  --card-padding: 24px;
  --padding: 12px;
  --max-width: 1040px;

  /* --text: #444444; */
  --text: #000000;
  --text-rgb: 0, 0, 0;
  --bg: #f1f1f1;
  --bg2: #fff;
  --img_bg: #e3e3e3;
  --brand: #28ab00;
  --logo-url: url("images/iamianb_light.svg");
  --badge-bg: #f2f4f7;
  --badge-ring: #e4e7ec;
  --badge-text: #0b1220;
  --badge-icon: #0b1220;
  --tile-bg: hsl(0 0% 0% / 0.04);
  --tile-bg-pop: hsl(0 0% 100% / 0.08);
  --tile-border: hsl(0 0% 0% / 0.04);
  --tile-shadow: 0 10px 24px hsl(0 0% 100% / 0.15);



  --brand-cs: #263238;
  --accent-cs: #90B9CD;


  --font-sans: IamIanb, Helvetica, 'Helvetica Neue', sans-serif;
  --font-head: IamIanb, Helvetica, 'Helvetica Neue', sans-serif;
  --font-sub: IamIanb, Helvetica, 'Helvetica Neue', sans-serif;
  ;
  --font-cta: degular-medium, Helvetica, 'Helvetica Neue', sans-serif;

  --font-size-titchy: 0.875rem;
  --font-size-teeny: 1rem;
  --font-size-base: 1.125rem;
  --font-size-semi: 1.375rem;
  --font-size-med: 1.5rem;
  --font-size-lg: 2.25rem;
  --font-size-lger: 3rem;
  --font-size-hippo: 4rem;

  --border-radius: 8px;
  --border-radius-small: 2px;



  --panel-pad: 96px;
  --col-gap: 48px;

  --panel-padding-block: clamp(20px, 96px, 96px);
  --panel-padding-block-med: clamp(20px, 60px, 60px);
  --panel-padding-block-small: clamp(20px, 48px, 48px);

  --playground-bg: --fancy-gradient: hsl(240 12% 8%);
  /* fallback solid */

  --fancy-gradient-webkit: -webkit-radial-gradient(1200px 800px at -20% -50%, hsla(127, 80%, 60%, .5), transparent),
    -webkit-radial-gradient(900px 600px at 100% 100%, hsl(190 80% 60% / .25), transparent),
    hsl(240 12% 8%);

  --fancy-gradient-moz: -moz-radial-gradient(1200px 800px at -20% -50%, hsla(127, 80%, 60%, .5), transparent),
    -moz-radial-gradient(900px 600px at 100% 100%, hsl(190 80% 60% / .25), transparent),
    hsl(240 12% 8%);

  --fancy-gradient-std: radial-gradient(1200px 800px at -20% -50%, hsla(127, 80%, 60%, .5), transparent),
    radial-gradient(900px 600px at 100% 100%, hsl(190 80% 60% / .25), transparent),
    hsl(240 12% 8%);

  /* IE legacy fallback (flat color only) */
  --fancy-gradient-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0D0D14", endColorstr="#0D0D14", GradientType=1);



}

@media (max-width: 767px) {
  :root {
    --font-size-titchy: 0.875rem;
    --font-size-teeny: 1rem;
    --font-size-base: 1.125rem;
    --font-size-semi: 1.375rem;
    --font-size-med: 1.25rem;
    --font-size-lg: 1.5rem;
    --font-size-lger: 2rem;
    --font-size-hippo: 2.5rem;

    --panel-pad: 48px;

  }
}

:root[data-theme="dark"] {
  /* dark tokens */
  --text: #fff;
  --text-rgb: 255, 255, 255;
  --bg: #111;
  --bg2: #000;
  --img_bg: #232323;
  --brand: #5eff00;
  --logo-url: url("images/iamianb_dark.svg");
  --badge-bg: #191a1c;
  --badge-ring: #2a2d31;
  --badge-text: #f5f7fa;
  --badge-icon: #b9e7eb;
  --tile-bg: hsl(0 0% 100% / 0.04);
  --tile-border: hsl(0 0% 100% / 0.14);
  --tile-shadow: 0 10px 24px hsl(0 0% 0% / 0.15);
}

/* Auto-dark ONLY if user has NOT explicitly forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --text: #fff;
    --text-rgb: 255, 255, 255;
    --bg: #111;
    --bg2: #000;
    --img_bg: #232323;
    --brand: #5eff00;
    --logo-url: url("images/iamianb_dark.svg");
    --badge-bg: #191a1c;
    --badge-ring: #2a2d31;
    --badge-text: #f5f7fa;
    --badge-icon: #b9e7eb;
    --tile-bg: hsl(0 0% 100% / 0.04);
    --tile-border: hsl(0 0% 100% / 0.14);
    --tile-shadow: 0 10px 24px hsl(0 0% 0% / 0.15);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  overflow-x: clip;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 16px;
}

h1,
h2,
#typed {
  font-family: var(--font-head);
  font-size: var(--font-size-lg);
  padding: 0 0 var(--padding) 0;
  margin: 0;
  line-height: 150%;
  text-align: left;
  font-weight: 200;
}

/* h3 {
  font-family: var(--font-sub);
  font-size: var(--font-size-med);
  padding: 36px 0 0 0;
  margin: 0;
  line-height: 135%;
  text-align: left;
  font-weight: 700;
} */

h3,
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 24px;
  padding: 24px 0 12px 0;
  margin: 0;
  text-align: left;
  font-weight: 900;
  line-height: 150%;
  letter-spacing: -0.05em;
}

@media (max-width: 767px) {
  h3 {
    padding-right: 25%;
    line-height: 120%;
  }
}

h3 span {
  margin-left: -0.1em;
}

h3 em {
  letter-spacing: 0.02em;
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-semi);
  padding: 12px 0 0 0;
  margin: 0;
  /* margin-bottom: .5rem; */
  text-align: left;
  line-height: 140%;
  font-weight: 600;
}

h5 {
  font-family: var(--font-sans);
  font-size: var(--font-size-semi);
  padding: 0;
  margin: 0;
  margin-bottom: .5rem;
  text-align: left;
  line-height: 140%;
  font-weight: 300;
}


body h4:first-of-type {
  padding-top: 0;
}

p {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 150%;
  padding: 0 0 24px 0;
  margin: 0;
  text-align: left;
  font-weight: 300;
}

.small {
  font-family: var(--font-sans);
  font-size: var(--font-size-teeny);
  line-height: 140%;
  padding: 0 0 0 0;
  margin: 0;
}

.smaller {
  font-family: var(--font-sans);
  font-size: var(--font-size-titchy);
  line-height: 140%;
  padding: 0 0 12px 0;
  margin: 0;
}

.hefty {
  font-weight: 900;
}

.centre {
  text-align: center;
}

a {
  text-decoration: none;
  color: var(--brand);
}

a:hover {
  color: var(--text);
}

/* CTA container (unchanged) */
.cta {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-cta);
  font-size: var(--font-size-lg);
  color: var(--brand);
  line-height: 50%;
}

/* Arrow – padded hit area, NO border by default */
.cta .cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  line-height: 1;
  border: 0;
  /* <- remove the always‑visible border */
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  cursor: pointer;
}


/* zap the global link hover color change just inside .cta */
.cta a:hover,
.cta a:focus-visible {
  color: var(--brand);
}

@media (pointer: coarse) {
  .cta .cta-arrow {
    padding: 10px;
  }
}

/* Keyboard focus ring only */
.cta .cta-arrow:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--border-radius-small);
  box-shadow: none;
}

/* If focus came from mouse, hide ring */
.cta .cta-arrow:focus:not(:focus-visible) {
  outline: none;
}


.left {
  justify-content: flex-start;
  padding-top: var(--spacing);
}


b {
  font-weight: 700;
}

/* page and layout */

body {
  background-color: var(--bg2);
}

html {
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  color: var(--text);
}

/* buttons */
/* base */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 1.1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  border: 2px solid transparent;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}


/* primary */
.btn--primary {
  background: linear-gradient(135deg, #28ab00, #24a000);
  color: #fff;
}

.btn--primary:hover {
  opacity: 0.9;
  background: linear-gradient(135deg, #24a000, #55e000);
  transform: translateY(-2px);
}

/* secondary */
.btn--secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn--secondary:hover {
  background: transparent;
  color: #5EFF00;
  border-color: #5EFF00;
  transform: translateY(-2px);
}

/* reset */
.btn--reset {
  position: fixed;
  top: 66vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: #fff;
}

.btn--reset:hover {
  background: linear-gradient(135deg, #d32f2f, #ff6b6b);
  transform: translate(-50%, -2px);
}

/* wrong you loser */
.btn--incorrect {
  background: transparent;
  color: #F17272;
  /* a coral-red; tweak as needed */
  border-color: #F17272;
  cursor: default;
}

/* correct you legend */
.btn--correct {
  background: transparent;
  color: #6ADA97;
  /* a minty-green; tweak as needed */
  border-color: #6ADA97;
  cursor: default;
}

/* theme toggle */
#themeToggle {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

#themeToggle:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* hover underline only on devices that have hover */
@media (hover: hover) and (pointer: fine) {
  #themeToggle:hover {
    text-decoration: underline;
  }
}

/* remove focus ring when using mouse but keep for keyboard */
#themeToggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#themeToggle:focus:not(:focus-visible) {
  outline: none;
}




/* Floating Logo/Menu (always on top) */
/* #logo-menu {
      position: fixed;
      top: 24px; left: 24px;
      width: 48px; height: 48px;
  background: var(--bg);
  color: var(--brand);
  font-size: var(--font-size-lg);
  font-family: var(--font-cta);
      display: flex; align-items: center; justify-content: center;
      z-index: 10001; border-radius: var(--border-radius-small);
        cursor: pointer;

    } */

/* floating menu */

#logo-float-menu {
  position: fixed;
  top: 16px;
  left: 60px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Prevents pointer from reaching through */
  pointer-events: auto;
  user-select: none;
}

/* with bg START */
/* #logo-float-menu {
  position: fixed;
  top: 16px;
  left: 60px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
  user-select: none;
} */

/* background block that extends 24px on L/R/B, not on top */
/* #logo-float-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--padding));
  right: calc(-1 * var(--padding));
  bottom: calc(-1 * var(--padding));
  background: var(--bg2);
  z-index: -1;
  pointer-events: none;
} */
 /* with bg END */

.logo-float {
  inline-size: 6rem;
  aspect-ratio: 3/1;
  background: var(--logo-url) no-repeat center/contain;
  opacity: 1;
}

.float-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.14em;
  padding-left: 2px;
}

.float-menu-list a {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 900;
  line-height: 110%;
  letter-spacing: -0.04em;
  text-decoration: none;
  opacity: 0.3;
  letter-spacing: -0.02em;
  transition: opacity 0.25s cubic-bezier(0.32, 1.56, 0.58, 1);
  will-change: opacity;
  pointer-events: auto;
  /* Prevent blue highlight on tap */
  -webkit-tap-highlight-color: transparent;
}



/* Only the hovered or focused item goes full opacity */
.float-menu-list a:hover {
  opacity: 1;
}

.float-menu-list a:focus-visible {
  opacity: 1;
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: var(--border-radius-small);
}

#logo-float-menu {
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.32, 1.56, 0.58, 1);
}

#logo-float-menu.menu-inactive {
  opacity: 0;
  pointer-events: none;
  /* optional, to make it untouchable when hidden */
}

.logo-float:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: var(--border-radius-small);
}

.float-menu-list.hide-links a {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.32, 1.56, 0.58, 1);
  /* ensures fade! */
}

.float-menu-list a.active {
  opacity: 0.66;
}

/* Responsive (hide or shrink on small screens) */
@media (max-width: 900px) {
  #logo-float-menu {
    top: 12px;
    left: 12px;
    /* Or just display: none; if you want to hide */
    /* display: none; */
  }

  /* .logo-float,
  .float-menu-list a {
    font-size: 2rem;
  } */
  .logo {
    visibility: visible;
  }
}

/* menu case_study_01 */
body.case-study-01 #logo-float-menu .float-menu-list a {
  color: #ffffff;
}

/* menu case_study_02 */
body.case-study-02 #logo-float-menu .float-menu-list a {
  color: #ffffff;
}

/* menu case_study_04 */
body.case-study-04 #logo-float-menu .float-menu-list a {
  color: #ffffff;
}

/* menu case_study_00 */
body.case-study-00 #logo-float-menu .float-menu-list a {
  color: #ffffff;
}



/* ── Header (sticky, full-width) ── */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  /* background-color: var(--bg); */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: 0;
}

/* ── Nav padding (16px top/bottom) ── */
.header nav {
  padding: 16px 0;

}

/* ── Flex container with 60px gutters ── */
.nav-container {
  display: flex;
  align-items: center;
  padding: 0 60px;
  box-sizing: border-box;
  width: 100%;
  gap: 12px;
}


/* ── Logo ── */
.logo {
  inline-size: 6rem;
  aspect-ratio: 3/1;
  background: var(--logo-url) no-repeat center/contain;
  flex: 0 0 auto;
  margin-right: auto;
  visibility: hidden;
}

/* ── Space between each icon button ── */
/* .nav-container button + button {
  margin-left: 12px;
} */

/* ── Icon buttons ── */
#themeToggle,
.header-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* ── Hover effects ── */

.header-button:hover .icon {
  filter: opacity(0.8);
}

/* —————————————————————————————————————————————
   LARGE SCREENS (≥1352px)
   Floating menu on left, no header bg
   ————————————————————————————————————————————— */
@media (min-width: 1352px) {

  /* keep your float-menu alive and transparent */
  #logo-float-menu {
    display: flex;
    background: transparent;
    top: 16px;
    left: 60px;
  }

  /* header nav sits “underneath” so we don’t need a bg */
  .header {
    background: transparent;
  }

  /* hide the in-header logo (we’re using the float-menu) */
  .logo {
    visibility: hidden;
  }

  /* keep your nav buttons wherever they were—no changes */
}

/* —————————————————————————————————————————————
   SMALLER SCREENS (<1352px)
   Float menu gone ➞ header logo + icons in a 1040px wrapper
   ————————————————————————————————————————————— */
@media (max-width:1351px) {

  /* anchor for absolute dropdown */
  .menu-anchor {
    position: relative;
  }

  /* float menu becomes dropdown, anchored to the button */
  #logo-float-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: -12px;
    /* left-align to the button */
    width: 350px;
    padding-left: 12px;
    z-index: 3000;

    /* only difference from desktop: dark overlay background */
    background: var(--bg);



    /* smooth show/hide (replaces display:none/block) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    pointer-events: none;
    /* avoid clicks while hidden */
    will-change: opacity, transform;
  }

  /* opened state */
  #logo-float-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s;
    pointer-events: auto;
  }

  /* hide the floating logo row; keep only the list */
  #logo-float-menu .logo-float {
    display: none;
  }

  /* list keeps desktop spacing and alignment */
  #logo-float-menu .float-menu-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Mobile/tablet: menu items always full opacity */
  #logo-float-menu .float-menu-list a,
  #logo-float-menu .float-menu-list a:hover,
  #logo-float-menu .float-menu-list a:focus-visible,
  #logo-float-menu .float-menu-list a.active {
    opacity: 1;
  }

  /* header stays solid for contrast */
  .logo {
    visibility: visible;
  }

  .header,
  .header nav {
    background: var(--bg);
  }

  .nav-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
  }
}

/* ——————————————————————————————————
   Header gutters: tablet + mobile
   —————————————————————————————————— */

/* Tablet: up to about 1024px wide */
@media (max-width: 1024px) {
  .nav-container {
    /* keep your max-width/margin-auto from the <1352px rule, but replace 0 padding with 20px left/right */
    padding: 0 20px !important;
  }
}

/* Mobile: up to about 767px wide */
@media (max-width: 767px) {
  .nav-container {
    padding: 0 16px !important;
  }
}

#start {
  overflow: hidden;
  /* so height collapse doesn’t spill */
  transition: height 0.6s ease, opacity 0.6s ease;
  height: auto;
  /* its natural height */
  opacity: 1;
}

#start,
#home,
#work,
#about,
#playground,
#contact {
  /* scroll-margin-top: 100px !important; */
  padding-top: 96px;
  padding-bottom: 96px;
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#home {
  min-height: 100vh;
}

/* Explicit dark mode */
:root[data-theme="dark"] #work,
:root[data-theme="dark"] #playground,
:root[data-theme="dark"] #story {
  background: var(--fancy-gradient);
  /* fallback solid */
  background: var(--fancy-gradient-webkit);
  background: var(--fancy-gradient-moz);
  background: var(--fancy-gradient-std);
  filter: var(--fancy-gradient-filter);
}

/* Auto-dark (only if user hasn’t forced light/dark) */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]):not([data-theme="dark"]) #work,
  :root:not([data-theme="light"]):not([data-theme="dark"]) #playground,
  :root:not([data-theme="light"]):not([data-theme="dark"]) #story {
    background: var(--fancy-gradient);
    /* fallback solid */
    background: var(--fancy-gradient-webkit);
    background: var(--fancy-gradient-moz);
    background: var(--fancy-gradient-std);
    filter: var(--fancy-gradient-filter);
  }
}


/* #work {
  background-attachment: fixed;

} */
#contact {
  padding-bottom: 520px;
}

:root[data-theme="dark"] #contact,
:root[data-theme="dark"] #snack {
  background: radial-gradient(900px 600px at 100% 100%,
      /* bottom-right corner */
      hsla(127, 80%, 60%, .5),
      /* soft purple glow */
      transparent),
    hsl(240 12% 8%);
  /* fallback base */
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]):not([data-theme="dark"]) #contact,
  :root:not([data-theme="light"]):not([data-theme="dark"]) #snack {
    background: radial-gradient(900px 600px at 100% 100%,
        hsla(280, 70%, 65%, 0.25),
        transparent),
      hsl(240 12% 8%);
  }
}

/* deprecated was hding the initial panel */
/* html.skip-start #start.section-panel.home {
  display: none;
} */

/* html.skip-start :target {
  scroll-margin-top: 56px;
 } */

@media (max-width: 767px) {

  #start,
  #home,
  #work,
  #about,
  #playground,
  #contact,
  .cs-results-panel {
    /* scroll-margin-top: 100px !important; */
    padding-top: 24px;
    padding-bottom: 24px;

  }
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header nav>div:last-child {
  /* ensure the button container doesn’t stretch */
  display: flex;
  align-items: center;
}


.hero-content {
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  display: grid;
}

.cta-button {
  background: white;
  color: black;
  padding: 12px 24px;
  border-radius: var(--border-radius-small);
  margin-top: 20px;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #ddd;
}

.card:focus {
  outline: none;
}

/* bc parallax doesnt work on mobile, lets disable */
@media only screen and (max-device-width: 1340px) {
  .parallax.hero {
    background-attachment: scroll;
  }

}

.spaced>*+* {
  margin-top: var(--spacing);
}

/* .container {
  margin: 0 auto;
  padding: var(--outer-margin) 0;
  max-width: var(--max-width);
  position: relative;
} */

#section-panel {
  max-width: var(--max-width);
  display: grid;
}


.main-container {
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* @media (max-width: 767px) {
  .main-container {
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }
} */

.block {
  margin: var(--padding) auto;
  width: 100%;
  max-width: var(--max-width);
  transition: transform 1s ease;
}

/* If a heading is the first thing in a .block, don't add extra top padding */
/* .block > :is(h2, h3, h4):first-child {
  padding-top: 0;
} */

img {
  max-width: 100%;
}

.cardsProject {
  display: flex;
  gap: var(--spacing);
  flex-wrap: wrap;
}

.card-project {
  flex: 1 1 35%;
  background: #e0e0e0;
  padding: var(--card-padding);
  border-radius: var(--border-radius);
  transition: transform 1s ease;
}

.cardsCareer {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
}

.card-career {
  flex: 1 1 10%;
  background: #e0e0e0;
  padding: var(--card-padding);
  border-radius: var(--border-radius);
  transition: transform 1s ease;
}

/* naviation + buttons */

/***********/
/* 02 work */
/***********/

.work,
.playground {
  background-color: var(--bg);
}

/* main cards grid */
.grid-container-work {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  overflow: visible;
  margin-bottom: var(--spacing);
}


.grid-container-work>.card {
  aspect-ratio: 1/1;
  background-color: var(--img_bg);
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  /* box-shadow: var(--tile-shadow); */
  border-radius: var(--border-radius);
  padding: var(--card-padding);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap);
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.grid-container-work>.card:hover {
  /* background-color: var(--bg2); */
  transform: translateX(2px);
  background: var(--tile-bg);
}


@media (max-width: 1120px) {
  .grid-container-work>.card {
    aspect-ratio: auto;
    height: auto;
  }
}

@media (max-width: 1024px) {
  .grid-container-work {
    grid-template-columns: 1fr;
    /* stack 'em tall */
  }

  .grid-container-work>.card {
    aspect-ratio: auto;
    /* let it grow naturally */
    height: auto;
    /* remove hard sizing */
  }
}

@media (max-width: 768px) {
  .grid-container-work {
    grid-template-columns: 1fr;
    gap: var(--gap);
    /* maybe tighter spacing for baby screens */
  }

  .grid-container-work>.card {
    padding: 24px;
    /* smaller padding = more space to breathe */
    gap: var(--gap);
  }
}

.feature {
  display: flex;
  align-items: center;
  gap: 4px;

  /* only as wide as its contents: */
  width: max-content;
  /* Chrome/Edge/Safari/modern Firefox */
  /* for broader Firefox support, you can also add:
  width: -moz-fit-content;
  width: fit-content;
  */

  /* reset any stray padding/margins that might’ve stretched it */
  padding: 4px;
  margin: 0;
}

.feature img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}


/* Only on desktop-style devices */
@media (hover: hover) and (pointer: fine) {

  /* Start features semi-transparent */
  .card .features .feature {
    opacity: 0.45;
    transition: opacity 0.3s ease;
  }

  /* On card hover, pop to full opacity */
  .card:hover .features .feature {
    opacity: 1;
  }
}


.tag {
  font-family: var(--font-sans);
  font-size: var(--font-size-teeny);
  font-weight: 300;
}

/* highlights horiz scroll gallery */
.scroll-gallery-highlights {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  /* padding: 24px; */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
}

.scroll-gallery-highlights::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.scroll-gallery-highlights .card {
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  width: 200px;
  background: var(--img_bg);
  border-radius: var(--border-radius);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  font-size: var(--font-size-base);
  padding: var(--card-padding);
  line-height: 140%;
}

/* .grid-container-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  border-radius: var(--border-radius);
  margin: 0 auto;
} */

/* .card-showcase {
  background: #232323;
  color: #eee;
  border-radius: var(--border-radius);
  padding: 24px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.1rem;
  display: flex;
  align-items: flex-start;
} */

/* Double-wide cards: just span two columns */
.card-showcase.span-2 {
  grid-column: span 2;
  /* Don't set aspect-ratio here! */
}


.card-showcase h5 {
  margin: 0;
  color: #eee;
  font-size: 1.2em;
  font-weight: 300;
}

.card-showcase:nth-child(4) {
  grid-column: 1 / span 2;
}

.card-showcase:nth-child(7) {
  grid-column: 2 / span 2;
}

/* Responsive */
@media (max-width: 900px) {
  .grid-container-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .card-showcase:nth-child(4),
  .card-showcase:nth-child(7) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .grid-container-showcase {
    grid-template-columns: 1fr;
    grid-auto-rows: 160px;
  }
}

/* case study cards animate in */
/* slide-in from the left for case study cards */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* reveal */
#cardBlockProject .card {
  opacity: 0;
  transform: translateX(-40px);
  transition: transform .25s ease;
  /* added: smooth hover/focus movement */
}

#cardBlockProject .card.in-view {
  animation: slideInLeft 0.6s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* stagger each card’s animation delay for sequential reveal */
#cardBlockProject .card:nth-child(1).in-view {
  animation-delay: 0ms;
}

#cardBlockProject .card:nth-child(2).in-view {
  animation-delay: 120ms;
}

#cardBlockProject .card:nth-child(3).in-view {
  animation-delay: 240ms;
}

/* add more nth-child rules if you add more cards */

/* Hover/focus: quick, smooth, no delay */
#cardBlockProject .card:is(:hover, :focus-visible) {
  transform: translateX(2px) !important;
  /* added: beat the animation-held transform */
  outline-offset: 0;
  background: var(--tile-bg);
}

/* design tiles */


/* Prevent background scroll when LightGallery is open */
html.lg-on,
body.lg-on {
  overflow: hidden !important;
  height: 100% !important;
}

/* some lil hacks to remove scrollbars and 💩 when lg loads iframes */
.lg-outer .lg-item iframe {
  border: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
  /* Firefox */
}

.lg-outer .lg-item iframe::-webkit-scrollbar {
  display: none;
  /* WebKit */
}

/* When gallery is active, force everything full-screen & no overflow */
/* .lg-on .lg-backdrop,
.lg-on .lg-outer,
.lg-on .lg-inner {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
} */

/* -------------------
       Page & Grid Layout
       ------------------- */

.grid-container-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 288px;
  gap: var(--gap);
  margin: 32px auto;
  max-width: 1200px;
  padding-bottom: 32px;
}

/* --------------
       Card & Overlay
       -------------- */
.card-showcase {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: #222;
  isolation: isolate
}

.card-showcase.span-2 {
  grid-column: span 2;
}

.card-showcase img {
  position: absolute;
  top: -1;
  left: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  min-width: 100%;
  min-height: 100%;

  object-fit: cover;
  border-radius: var(--border-radius);
  pointer-events: none;
}



.card-showcase a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 28, 0.83);
  color: #fff;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  font: 1.08rem/1.4 sans-serif;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* backdrop-filter: blur(4px); */
  border-radius: inherit;
  overflow: hidden;

}

.card-showcase:hover .card-overlay,
.card-showcase:focus-within .card-overlay {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) and (pointer: coarse) {
  .card-overlay {
    display: none !important;
  }
}

/* 2-col layout under 900px, force span-2 back to 1 */
@media (max-width: 900px) {
  .grid-container-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container-showcase .span-2 {
    grid-column: span 1 !important;
  }
}

/* 1-col layout under 600px */
@media (max-width: 600px) {
  .grid-container-showcase {
    grid-template-columns: 1fr;
  }

  /* spans are irrelevant now, but to be safe: */
  .grid-container-showcase .span-2 {
    grid-column: span 1 !important;
  }
}

.lg-toolbar .lg-download {
  display: none !important;
}

/************/
/* 03 about */
/************/

/* image sep fun */

/* DARK THEME — About: blue in top-left corner */
:root[data-theme="dark"] #about {
  background: hsl(127, 80%, 60%, .5);
  /* fallback solid */

  background:
    /* BLUE: large, top-left */
    -webkit-radial-gradient(1100px 720px at -12% -12%, hsl(190 80% 60% / .30), transparent),
    /* GREEN: gentle, bottom-right */
    -webkit-radial-gradient(900px 640px at 88% 118%, hsl(127, 80%, 60%, .5), transparent),
    hsl(240 12% 8%);
  background:
    -moz-radial-gradient(1100px 720px at -12% -12%, hsl(190 80% 60% / .30), transparent),
    -moz-radial-gradient(900px 640px at 88% 118%, hsl(127, 80%, 60%, .5), transparent),
    hsl(240 12% 8%);
  background:
    radial-gradient(1100px 720px at -12% -12%, hsl(190 80% 60% / .30), transparent),
    radial-gradient(900px 640px at 88% 118%, hsl(127, 80%, 60%, .5), transparent),
    hsl(240 12% 8%);

  /* IE legacy fallback (flat color only) */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0D0D14", endColorstr="#0D0D14", GradientType=1);
}

/* system-dark when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) #about {
    background: hsl(240 12% 8%);
    background:
      -webkit-radial-gradient(1100px 720px at -12% -12%, hsl(190 80% 60% / .30), transparent),
      -webkit-radial-gradient(900px 640px at 88% 118%, hsl(280 60% 65% / .18), transparent),
      hsl(240 12% 8%);
    background:
      -moz-radial-gradient(1100px 720px at -12% -12%, hsl(190 80% 60% / .30), transparent),
      -moz-radial-gradient(900px 640px at 88% 118%, hsl(280 60% 65% / .18), transparent),
      hsl(240 12% 8%);
    background:
      radial-gradient(1100px 720px at -12% -12%, hsl(190 80% 60% / .30), transparent),
      radial-gradient(900px 640px at 88% 118%, hsl(280 60% 65% / .18), transparent),
      hsl(240 12% 8%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0D0D14", endColorstr="#0D0D14", GradientType=1);
  }
}

.about-overlay-images {
  width: 280px;
  height: 280px;
  margin: 0 auto;
  position: relative;
}

.about-image-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 999px;
}

.about-image-wrapper img {
  position: absolute;
  width: 280px;
  height: 280px;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Explicit light theme */
:root[data-theme="light"] .about-image-wrapper {
  background: black;
  isolation: isolate;
  /* lets blend modes do their thing separately */
}

:root[data-theme="light"] .about-image-wrapper img {
  mix-blend-mode: screen;
}

/* Automatic light mode based on OS preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .about-image-wrapper {
    background: black;
    isolation: isolate;
    /* lets blend modes do their thing separately */
  }

  :root:not([data-theme="dark"]) .about-image-wrapper img {
    mix-blend-mode: screen;
  }
}

.top-padding {
  padding-top: var(--spacing);
}

/* ABOUT CARDS */

/* ── About cards grid ── */
.about-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin: var(--spacing);
  max-width: var(--max-width);
  padding: 0;
  box-sizing: border-box;
}

.about-container-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin: 0 0 var(--spacing) 0;
  max-width: var(--max-width);
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .about-container-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin: 0;
  max-width: var(--max-width);
  padding: 0;
  box-sizing: border-box;
  color: var(--bg2);
}

.contact-container a:focus-visible {
  outline: 2px solid var(--brand);
  /* outline-offset: 4px; */
  border-radius: var(--border-radius);
  box-shadow: none;
}

@media (max-width: 767px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}

/* ── Individual card styling ── */
.about-card {
  /* background: var(--bg); */
  padding-right: var(--card-padding);
  display: inline-flex;
  /* icon + text on one line */
  flex-direction: column;
  justify-content: flex-start;
}

.about-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  /* icon–text gap */
  margin-bottom: 4px;
  /* tiny breathing room above the paragraph */
}

.about-card-title .icon {
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
}

.about-card-title h5 {
  margin: 0;
  /* you already zeroed most h5s, this is just belt & braces */
}

.contact-card {
  background: var(--img_bg);
  padding: var(--card-padding);
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  /* box-shadow: var(--tile-shadow); */
  border-left: 4px solid var(--brand);
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  justify-content: flex-start;
}

/* explicit light theme */
:root[data-theme="light"] .contact-card {
  background: var(--bg);
}

/* optional: auto-light fallback if user hasn't forced theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .contact-card {
    background: var(--bg);
  }
}

.contact-card .icon {
  margin-right: 0.5rem;
  /* space between icon and text */
}

.contact-container a {
  color: var(--text);
  margin: 0;
}

/* move the ring to the card when the link gets focus */
.contact-container a:focus-visible .contact-card {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--border-radius);
  background: var(--tile-bg);
}

.contact-card p {
  margin: 0;
  padding: 0;
}

.contact-card h5 {
  margin: 0;
  padding: 0;
}

.contact-card:hover {
  transform: translateY(-2px);
  cursor: pointer;
  background: var(--tile-bg);
}

.contact-card:focus-visible {
  outline: 2px solid var(--brand);
  background: var(--tile-bg);
  border-radius: var(--border-radius);
}

/* Optional card headings */
.about-card h5 {
  margin: 0 0 0 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-semi);
  /* font-weight: 400; */
  line-height: 1.4;
  padding: 0;
}

/* Tidy up paragraphs inside cards */
.about-card p {
  margin: 0;
  line-height: 1.5;
  font-weight: 300;
}

/* good design */
/* 2×2 grid on ALL viewports */
.habits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  max-width: var(--max-width);
  margin: 0 !important;
  padding: 0;
}

/* individual tiles styled like other cards */
.habit {
  background: var(--tile-bg);
  /* border: 0.5px solid var(--tile-border); */
  border-radius: var(--border-radius);
  padding: var(--card-padding);
  min-width: 0; /* prevent overflow */
}

/* keep icon + headline alignment */
.habit-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.5rem;
}
.habit-title .icon { width: 24px; height: 24px; }
.habit-title h5 { margin: 0; line-height: 1; }

/* tidy paragraph spacing */
.habit p { margin: 0; padding: 0; }

/* remove the old crosshair dividers if present */
.habits::before,
.habits::after { display: none !important; }
.habits p {
  margin: 0;
  padding: 0;
  /* ← kills the global 24px bottom padding */
}

.habit> :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  /* belt-and-braces: no tail gap */
}

.habit {
  min-width: 0;
}

.habit-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.5rem;
}

.habit-title .icon {
  display: block;
  width: 24px;
  height: 24px;
  transform: translateY(-0.1em);
}

.habit-title h5 {
  margin: 0;
  line-height: 1;
}


/* tools strip */
.logo-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--border-radius);
}

/* .logo-card img.icon { width: 24px; height: 24px; }
.logo-card span { white-space: nowrap; font-size: var(--font-size-teeny); } */

/* optional: consistent spacing when following a .block header */
.block+.habits {
  margin-top: var(--spacing);
}

/* ----------------------------------------
   Tooltip base
---------------------------------------- */
.feature {
  position: relative;
  /* container for absolute tooltip */
  cursor: help;
  /* optional: show “?” cursor */
  outline: none;
  /* we’ll style focus next */
}

/* highlight on keyboard focus */
.feature:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


.tools-filter {
  margin: .75rem 0;
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--tile-border);
  border-radius: 999px;
  background: var(--tile-bg);
}

.hidden {
  display: none !important;
}

#tools .logo-card.hidden {
  display: none !important;
}

/* hide matched logo-cards */
.logo-card.is-hidden {
  display: none !important;
}


/* your existing .custom-tooltip styles, duplicated here: */
.custom-tooltip {
  position: fixed;
  max-width: 240px;
  padding: 8px 12px;
  background: #232323;
  /* darker but translucent */
  color: #fff;
  font-size: 1rem;
  line-height: 140%;
  /* more breathing room */
  border-radius: var(--border-radius-small);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* soft white outline */
  backdrop-filter: blur(4px);
  /* subtle frosted separation */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.95);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1000;
}

.custom-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* replace your existing focus rule with focus-visible for keyboard only */
.feature:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* remove the outline when focus comes from mouse click */
.feature:focus:not(:focus-visible) {
  outline: none;
}

/* if you’re using CSS to show the tooltip on focus, switch that too */
.feature:focus-visible[data-tooltip]::after {
  /* your tooltip-visible styles here */
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* and ensure click does not trigger tooltip via JS:
   in your showTooltip handler, check `element.matches(':focus-visible')`
   before displaying */

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


#about-img-x {
  z-index: 3;
}

#about-img-y {
  z-index: 2;
  opacity: 1 !important;
}

#about-img-z {
  z-index: 1;
}

/* 04 playground */


/* cards */
.grid-container-play {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* @media (max-width: 767px) {
  .grid-container-play {
    grid-template-columns: 1fr !important;
  }
} */

.card-play {
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: var(--img_bg);
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  /* box-shadow: var(--tile-shadow); */
  border-radius: var(--border-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* base: smooth hover motion */
.card-play {
  transition: translate .25s ease, scale .25s ease, box-shadow .25s ease;
}

/* hover/focus lift */
.card-play:is(:hover, :focus-within) {
  translate: 0 -4px;
  /* up a bit */
  scale: 1.02;
  /* tiny zoom */
  /* box-shadow: 0 12px 28px hsl(0 0% 0% / .25); */
  cursor: pointer;
}

/* fallback for older browsers */
@supports not (translate: 1px) {
  .card-play {
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .card-play:is(:hover, :focus-within) {
    transform: translateY(-4px) scale(1.02);
  }
}

.card-play h5 {
  margin: 0;
  padding-bottom: 16px;
  /* gap between title & image */
  font-size: 1.125rem;
  font-weight: 300;
}

.card-play .card-image {
  flex: 1;
  /* fill remaining space */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* clip any overflow inside the padding */
}

.card-play .card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* scale down to fit without distortion */
  display: block;
}

.card-play:focus-visible {
  outline: 2px solid var(--brand);
  /* outline-offset: 2px; */
  border-radius: var(--border-radius);
  background-color: var(--tile-bg);
}

.project-summary {
  flex: 1;
  padding: 24px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 300;
  max-width: 960px;
}

@media (hover: hover) and (pointer: fine) {
  .project-summary {
    transform: scale(0.995);
    opacity: 0.45;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  .project-summary:hover {
    opacity: 1;
    transform: scale(1);
  }
}


.project-summary p {
  font-size: 1.125rem;
  line-height: 150%;
  margin-top: 0;
  padding-bottom: 0;
  font-weight: 300;
}

.project-summary strong {
  font-weight: 700;
}


.project-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: start;
  gap: 16px;
}

.label {
  text-align: right;
  padding-top: 4px;
  font-weight: 700;
}

.text {
  font-weight: 300;
}


/* responsive fallbacks */
@media (max-width: 960px) {
  .grid-container-play {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .grid-container-play {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* @media (max-width: 500px) {
  .grid-container-play {
    grid-template-columns: 1fr;
  }
} */

.card-play:hover {
  transform: translateY(-2px);
  /* background: var(--bg2); */
}

.card-info {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-top: 8px;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.card-content h2 {
  padding: 0;
}

.card-content p {
  max-width: 66%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  flex: 0 1 auto;
}

.play-button {
  /* remove all native button styles */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  /* inherit the h3’s typography */
  font: inherit;
  color: var(--brand);
  text-decoration: none;
  cursor: pointer;
}

.play-button:hover,
.play-button:focus {
  color: var(--text);
  outline: none;
}

/* hover reveal on desktop only */
@media (hover: hover) and (pointer: fine) {
  .card-play:hover .card-info {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1) Base (closed) state */
.expander-play {
  grid-column: 1 / -1;
  color: var(--text);
  border-radius: var(--border-radius);
  /* overflow: hidden; */

  /* start “hidden” */
  max-height: 0;
  opacity: 0;
  padding: 0;
  transform: scaleY(0.95);

  /* animate all of these properties when they change */
  transition:
    max-height 0.5s ease-in-out,
    opacity 0.3s ease-in-out 0.2s,
    transform 0.3s ease-in-out,
    padding 0.4s ease-in-out;
}

/* 2) Open state (when you add .open) */
.expander-play.open {
  /* big enough for your largest content; you can tweak */
  max-height: 4000px;
  opacity: 1;
  transform: scaleY(1);
}

/* 3) Closed state (when you add .closed) */
.expander-play.closed {
  /* explicitly repeat the closed values so CSS knows what to animate back to */
  max-height: 0;
  opacity: 0;
  padding: 0;
  transform: scaleY(0.95);
}


/* gravity */
#gravityBtn #whiteSpaceDecreaseBtn #whiteSpaceIncreaseBtn {
  display: block;
  margin: 30px auto;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  /* border-radius: var(--border-radius-small); */
  background-color: #333;
  color: white;
  cursor: pointer;
}

/* #contact {
  height: 100vh;
} */

/* make it worse aniamted eyes */
.mask-container {
  position: relative;
  /* let it fill the card’s full height, width will auto-adjust */
  height: 100%;
  max-width: 100%;
  margin: auto;
  /* drop the forced square aspect-ratio */
}

.mask-image {
  /* match its container’s constraints */
  width: auto;
  height: 100%;
  display: block;
}

.eye-container {
  position: absolute;
  width: 15.23%;
  height: 15.23%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

#eye-left {
  left: 27.7%;
  top: 39.3%;
}

#eye-right {
  left: 55.4%;
  top: 39.3%;
}

/* PUPIL */
.eye {
  position: absolute;
  width: 27.3%;
  height: 27.3%;
  top: 36.35%;
  left: 36.35%;
  background: #DB352B;
  border-radius: 50%;
  transition: transform 0.05s ease-out;
}

@keyframes blink {

  0%,
  100% {
    transform: scaleY(1)
  }

  50% {
    transform: scaleY(0.1)
  }
}

.eye.blinking {
  animation: blink 0.25s ease-in-out;
}

.eye.squint {
  /* flatten the circle into a squinty line */
  transform: scaleY(0.2) !important;
  /* optional: tighten the border-radius if you want a flatter bar */
  border-radius: 3px;
}



/* ────────────────────────────────────────────────────────────────
   card-showcase base & image fill
   ──────────────────────────────────────────────────────────────── */
.card-showcase {
  position: relative;
  overflow: hidden;
  /* clip children to parent radius */
  border-radius: var(--border-radius);
}

/* make the img fill exactly the rounded box */
.card-showcase img {
  position: absolute;
  inset: 0;
  /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* match parent corners */
  pointer-events: none;
}

/* the dark overlay—no blur, just a semitransparent tint */
.card-showcase .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 28, 0.83);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ────────────────────────────────────────────────────────────────
   Hover effects (desktop only)
   ──────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {

  /* prep for a smooth lift */
  .card-showcase {
    will-change: transform;
    transition: transform 0.15s ease-in-out;
  }

  /* lift entire card (image + overlay + corners + shadow) */
  .card-showcase:hover {
    transform: translateY(-2px);
  }

  /* reveal overlay on hover or keyboard focus */
  .card-showcase:hover .card-overlay,
  .card-showcase:focus-within .card-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* hide some play cards under 1040px */
@media (max-width: 1040px) {
  .card-play[data-id="space"] {
    display: none !important;
  }

  /* .card-play[data-id="snake"] {
    display: none !important;
  } */
}


/* ===============================
   Case Studies Page Styles
   (Original + minimal parallax video additions)
================================== */

/* 1. Centered container */
.cs-container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  /* content above bleed bg */
}

/* 2. Hero panel */
.cs-hero-panel {
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: var(--bg2);
  color: var(--text);
  position: relative;
  overflow: hidden;
  padding-block: var(--panel-padding-block);
}

/* @media (max-width: 767px) {
  .cs-hero-panel {
  height: auto;
  padding: 48px 0;
}
} */

/* 3. Faux-parallax spacer (video stage) */
/* The faux-parallax window section: fully transparent background! */
.cs-parallax-spacer {
  height: 100vh;
  background: transparent !important;
  /* Or 'none' */
}

/* Sticky wrapper that “holds” the video in place while page scrolls */
.cs-parallax-spacer__media {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Background video itself */
.cs-parallax-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* fade in on activation */
  transition: opacity 0.9s ease;
  filter: brightness(.9) saturate(1.05);
  /* optional grading */
  pointer-events: none;
}

/* Activated by JS when hero < 20% visible */
.cs-parallax-video.is-active {
  opacity: 1;
}

/* (Legacy image element not used now, kept only if you reintroduce) */
.cs-parallax-spacer__inline {
  display: none;
  width: 100%;
  height: auto;
}

/* 4. Section base (scoped class, not global 'section') */
.cs-cs-section-base {
  position: relative;
  overflow: hidden;
}

/* A & C bleed images */
.cs-cs-section-bleed {
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  background-position: center;
}

/* make the bleed area hold a vertical stack up to 305px */
.cs-cs-section-bleed .ad-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* space between title / video / text */
  max-width: 305px;
  /* cap width */
  margin-left: auto;
  /* shove it to the right edge */
  padding: 0 var(--outer-margin);
  /* optional inner gutters */
  box-sizing: border-box;
  align-items: flex-start;

}

/* ensure the video (or image) fills that stack */
.cs-cs-section-bleed .ad-stack video,
.cs-cs-section-bleed .ad-stack img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-cs-section-bleed--left {
  left: 0;
  /* up to the 1/3 mark, minus 48px gap */
  width: calc((100vw - 1040px)/2 + 346.6667px - 48px);
  background-position: left center;
}

.cs-cs-section-bleed--right {
  right: 0;
  width: calc((100vw - 1040px)/2 + 346.6667px - 48px);
  background-position: right center;
}

/* section a+c */
.cs-section-a,
.cs-section-c {
  /* padding: 20px 0; */
  padding: 0;
  background: var(--bg);
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-section-x {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg);
}

/* Section A: text at right two-thirds */
.cs-section-a .cs-container {
  display: flex;
  justify-content: flex-end;
}

.cs-section-a .text {
  width: 66.6666%;
  padding: 40px 0;
  color: var(--text);
}

/* section b+d */
.cs-section-b,
.cs-section-d {
  /* padding: 20px 0; */
  padding: 0;
  background: var(--bg2);
  color: var(--text);
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--panel-padding-block-small);

}

.cs-section-b .cs-container,
.cs-section-d .cs-container {
  padding-block: 0;
  /* padding-inline: 16px; */
  text-align: left;
}

/* 1) Let sections own the vertical rhythm on mobile */
@media (max-width: 767px) {

  .cs-section-b .cs-container,
  .cs-section-d .cs-container {
    /* keep side gutters only */
    padding-inline: 16px;
    padding-block: 0;
    /* no inner top/bottom padding */
    text-align: left;
  }

  /* keep brand sections consistent with the token */
  .brand-green,
  .brand-lime,
  .brand-sea {
    padding-block: var(--panel-padding-block);
  }
}


/* Section C: text at left two-thirds */
.cs-section-c .cs-container {
  display: flex;
  justify-content: flex-start;
}

.cs-section-c .text {
  width: 66.6666%;
  padding: 40px 0;
}


/* kill trailing space inside case-study panels */
.cs-section-b .cs-container> :last-child,
.cs-section-d .cs-container> :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* lists: no extra bottom gap when they’re last */
.cs-section-b .cs-container :is(ul, ol):last-child,
.cs-section-d .cs-container :is(ul, ol):last-child {
  margin-bottom: 0;
}

/* also stop the last <li> from contributing a collapsing margin */
.cs-section-b .cs-container li:last-child,
.cs-section-d .cs-container li:last-child {
  margin-bottom: 0;
}

/* ensure the first element inside the panel doesn’t add top space */
.cs-section-b .cs-container> :first-child,
.cs-section-d .cs-container> :first-child {
  margin-top: 0;
  padding-top: 0;
  /* neutralize the global h4 top padding */
}

@media (min-width: 1040px) {

  /* hide the cs-section-d on wider viewports */
  .cs-section-d {
    display: contents;
  }
}

/* Case meta (hero tags) */
.cd-case-meta,
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-size: 1rem;
  color: rgba(var(--text-rgb), .75);
  padding-top: 24px;
  /* margin-bottom: 1.5em; */
}

/* Base: keep the grey you already set on .hero-meta */
.hero-meta .feature .tag {
  color: inherit;
}

/* Desktop hover/focus: turn the text to your theme color */
@media (hover: hover) and (pointer: fine) {
  .hero-meta .feature {
    transition: color .2s ease;
  }

  .hero-meta .feature:hover,
  .hero-meta .feature:focus-visible {
    color: var(--text);
    /* white in dark, black in light */
  }
}

/* Touch devices: always full strength (optional) */
@media (hover: none) {
  .hero-meta .feature {
    color: var(--text);
  }
}

.cs-nda-tag,
.hero-tag {
  color: var(--text);
  font-weight: 400;
  position: relative;
  cursor: help;
}

.cs-nda-tag[title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--text);
}

.cs-breather,
.breather {
  padding-top: 0;
}

/* ===============================
   Accessibility & Fallbacks
================================== */

/* Reduced motion: suppress video, show poster instead */
@media (prefers-reduced-motion: reduce) {
  .cs-parallax-video {
    display: none !important;
  }

  .cs-parallax-spacer {
    background: #000 url("/vids/background_poster.png") center/cover no-repeat;
  }
}

/* Optional small-screen data saver */
@media (max-width: 640px) {
  .cs-parallax-video {
    display: none;
  }

  .cs-parallax-spacer {
    background: #000 url("/vids/background_poster_mobile.png") center/cover no-repeat;
  }
}

/* ===============================
   Responsive Reflow (≤1200px)
================================== */

@media (max-width: 1200px) {

  /* Sections A & C single column */
  .cs-section-a,
  .cs-section-c {
    display: flex;
    flex-direction: column;
  }

  .cs-section-a .cs-container,
  .cs-section-c .cs-container {
    display: block;
    /* undo horizontal flex */
  }

  .cs-section-a .text,
  .cs-section-c .text {
    width: 100%;
  }

  /* Bleed images become aspect boxes */
  .cs-cs-section-bleed {
    position: relative !important;
    width: 100% !important;
    height: 0;
    padding-top: 56.25%;
    /* adjust ratio if needed */
    margin: 1rem 0;
    background-attachment: scroll;
    pointer-events: auto;
  }

  /* Parallax spacer collapses to static aspect */
  .cs-parallax-spacer {
    min-height: 0;
    height: auto !important;
    padding-top: 56.25% !important;
    overflow: hidden;
  }

  .cs-parallax-spacer__media {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .cs-parallax-video {
    position: absolute;
  }
}


/* cs one bg vid */
.cs-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.7s;
}

/* cs two bg himage */
.cs-bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.7s;
}

/* cs two inline himage */
.cs-section-x-fullbleed {
  width: 100%;
  height: 100vh;
  /* adjust as needed */
  padding: 0;
  /* prevent stray padding */
  margin: 0;
  /* prevent stray margin */
  overflow: hidden;
  background: none;
  /* just in case */
}

.cs-section-x-fullbleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* cs four bullets */
/* tried to avoid bullets, but sometimes you have to bite the bullet */
/* cs four bullets */
/* tried to avoid bullets, but sometimes you have to bite the bullet */
.cs-container ul,
.cs-container ol {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 32px 0;
  padding-left: 1rem;
  /* Nice, balanced indent */
  font-weight: 300;
  list-style: disc outside none;
}

li {
  margin-bottom: 0.4em;
  /* padding-left: 12px;
  margin-left: 12px; */
  position: relative;
  line-height: 140%;
}

.cs-container li {
  margin-bottom: 0.4em;
  padding-left: 0;
  position: relative;
}

/* Remove extra gap before bullets if directly after a p */
.cs-container p.intro {
  padding-bottom: 0;
}

.cs-container p+ul,
.cs-container p+ol {
  margin-top: 0;
}



/* overlays */

/* — Floating Logo/Menu — */
#logo-menu {
  position: fixed;
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  background: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  border-radius: 4px;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

#logo-menu:hover {
  opacity: 1;
}



/* — Close button — */
#overlay-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-lg);
  font-family: var(--font-cta);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
}

#overlay-close:hover {
  filter: opacity(0.8);
}



#overlay-close.show {
  display: flex;
}

/* hide the case study overlay close button when lightgallery is open */
/* html.lg-on #overlay-close,
body.lg-on #overlay-close,
html.lg-on #overlay-close.show,
body.lg-on #overlay-close.show {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
} */

/* Hide the case‑study overlay close button when the page is inside lightGallery's iframe */
/* html.in-iframe #overlay-close,
html.in-iframe #overlay-close.show {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
} */


/* (Optional, modern browsers) — hide while LG DOM exists */
/* body:has(.lg-outer) #overlay-close {
  display: none !important;
} */

/* — Overlay container — */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  /* hide overflow on container */
  z-index: 10000;
  transform: translateY(100vh);
  transition:
    transform 1s ease,
    opacity 0.3s ease;
  opacity: 1;
}

#overlay.fading {
  opacity: 0;
}

/* Slide-in from right or left: zero vertical */
#overlay.horizontal-right {
  transform: translateX(100vw) translateY(0);
}

#overlay.horizontal-left {
  transform: translateX(-100vw) translateY(0);
}

/* Final position */
#overlay.show {
  transform: translateX(0) translateY(0);
}


/* hide the page scrollbar when overlay is open */
html.no‐scroll,
html.no‐scroll body {
  overflow: hidden !important;
}

/* ── container + flex layout ── */
#overlay #case-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  z-index: 10002;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-teeny);
  transform: translateY(100%);
  opacity: 1;
  transition:
    transform 1.5s ease-out,
    /* ← slower, eased slide */
    opacity 0.5s ease;
  /* keep fade-in snappy */
}

#overlay #case-nav.show {
  transform: translateY(0);
  opacity: 1;
}

/* the inner 1040px wrapper */
#overlay #case-nav::before {
  content: '';
  flex: 0 0 1rem;
}

#overlay #case-nav::after {
  content: '';
  flex: 0 0 1rem;
}

#overlay #case-nav .case-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1040px;
}

/* heading on the left */
#overlay #case-nav .case-nav-heading {
  white-space: nowrap;
  color: #fff;
  /* no extra line-height needed in flex context */
}

/* links group on the right */
#overlay #case-nav .case-nav-links {
  display: flex;
  gap: 2rem;
}

#overlay #case-nav .case-nav-links a {
  white-space: nowrap;
  color: #53FF00;
}

#overlay #case-nav .case-nav-links a:hover {
  white-space: nowrap;
  color: white;
}

#case-nav .case-nav-links a {
  cursor: pointer;
}

/* full‐screen black layer, hidden by default */
#transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  pointer-events: none;
  /* clicks pass through */
  transition: opacity 0.2s ease;
  /* fade in/out */
  z-index: 10002;
  /* above overlay (10000) */
}

@media (max-width: 1039px) {

  /* hide case-nav on smaller viewports */
  #case-nav {
    display: none !important;
  }
}


/* case study storytelling scrolling */

/* -- scroll-story reset & base typography -- */
#scroll-storytelling {
  margin: 0;
  /* font-family: sans-serif;
      background: #111;
      color: #fff; */
  /* overflow-x: hidden; */
}

/* panels */

#scroll-storytelling .scroll-panel {
  position: relative;
  padding-block: var(--panel-padding-block-small);
  /* height: 100vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .8s ease, transform .8s ease;
}

#scroll-storytelling .scroll-panel.sticky {
  /* position: sticky; */
  top: 0;
}





/* visibility animation */
#scroll-storytelling .panel {
  opacity: 0;
  transform: translateY(50px);
}

#scroll-storytelling .panel.visible {
  opacity: 1;
  transform: translateY(0);
}

/* colour + padding variants */
#scroll-storytelling .bit1 {
  background: #004D40;
  padding: var(--panel-pad);
}

#scroll-storytelling .bit5 {
  background: #1B5E20;
  padding: var(--panel-pad);
}

#scroll-storytelling .bit6 {
  background: #263238;
  padding: var(--panel-pad);
}

.bit2 {
  background: var(--bg);
  padding-block: var(--panel-padding-block-small);
}

#scroll-storytelling .bit3 {
  background: #444;
}

#scroll-storytelling .bit4 {
  background: #222;
}

/* grid layout */
#scroll-storytelling .flow-grid {
  width: 100%;
  padding: var(--panel-pad);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 20px;
  align-items: start;
}



/* column spans + alignment baked into each class */
.cell-col1 {
  grid-column: 2 / 4;
  /* cols 2–3 */
  justify-self: start;
  /* always align left */
}

.cell-col2 {
  grid-column: 5 / 8;
  /* cols 5–7 */
  justify-self: end;
  /* always align right */
}

.cell-col3 {
  grid-column: 9 / 12;
  /* cols 9–11 */
  justify-self: start;
  /* always align left */
}

.cell-col4 {
  grid-column: 5 / 12;
  /* cols 5–11 */
  justify-self: start;
  /* always align left */
}

/* spans cols 2–8 and aligns left by default */
.cell-title {
  grid-column: 2 / 8;
  justify-self: start;
  /* change to center or end if you want */
}

.lime-highlight {
  color: #66C26D;
  font-weight: 500;
}

.sea-highlight {
  color: #90B9CD;
  font-weight: 500;
}


#scroll-storytelling .flow-grid>* {
  margin: 0;
  padding: 0;
}

/* helpers */
#scroll-storytelling .cell-left {
  justify-self: start;
}

#scroll-storytelling .cell-right {
  justify-self: end;
}

#scroll-storytelling .cell-center {
  justify-self: center;
}

/* phones */
#scroll-storytelling .phone {
  display: block;
  /* width: min(410px, 100%); */
  height: auto;
  max-height: calc(100vh - var(--panel-pad) - var(--panel-pad));
  object-fit: contain;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* eyebrow + fit-text */
#scroll-storytelling .eyebrow {
  color: #33CCCC;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 .5em 0;
  letter-spacing: 1 !important;
}

#scroll-storytelling .fit-text-container {
  width: 100vw;
  text-align: center;
}

#scroll-storytelling .fit-text-container h1 {
  font-family: var(--font-sans);
  letter-spacing: -0.17rem;
  margin: 0;
  font-weight: 900;
  white-space: nowrap;
}

/* responsive tweaks */
@media (max-width: 768px) {
  #scroll-storytelling .flow-grid {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 32px;
  }

  #scroll-storytelling .cell-left,
  #scroll-storytelling .cell-right {
    justify-self: center;
  }
}

.fit-text-container,
.fit-text-container .vertical-stack,
#fit-text {
  min-width: 1040px;
  display: block;
  width: 100%;
}

@media (max-width: 1040px) {

  .fit-text-container,
  .fit-text-container .vertical-stack,
  #fit-text {
    min-width: 0;
  }
}

h2.jumbo {
  font-size: 48px;
  padding-bottom: 8rem;
  letter-spacing: -0.2rem !important;
  font-weight: 900;
}

.stats {
  font-weight: 800;
  color: var(--accent-cs);
  /* default (dark mode / accent) */
}

/* Light mode override */
:root[data-theme="light"] .stats {
  color: #546E7A;
}


/* Light mode: use accent; Dark mode: use brand */
.brand-cs {
  background-color: rgba(38, 50, 56, 0.075);
}

:root[data-theme="dark"] .brand-cs {
  background-color: var(--brand-cs);
}

/* Auto-dark when user hasn’t explicitly chosen a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-cs {
    background-color: var(--brand-cs);
  }
}

/* .brand-lime {
  background-color: #1B5E20;
    color: #fff !important;
  padding-block: var(--panel-pad);
}
.brand-sea {
  background-color: #263238;
    color: #fff !important;
  padding-block: var(--panel-pad);
} */

/* only your Deliverables section */
.cs-section-b.brand-green ul,
.cs-section-b.brand-green ol,
.cs-section-b.brand-green ul,
.cs-section-b.brand-green ol,
.cs-section-b.brand-sea ul,
.cs-section-b.brand-sea ol {
  color: #fff;
}

.cs-section-b.brand-green li::marker {
  color: #fff;
}

.cs-section-b.brand-lime li::marker {
  color: #fff;
}

.cs-section-b.brand-sea li::marker {
  color: #fff;
}


.typed-cursor {
  font-size: var(--font-size-lg) !important;
  line-height: inherit;
  /* Aligns with text vertically */
  font-family: inherit;
  /* Use the same font for a smooth look */
  vertical-align: baseline;
  /* You can use 'middle' or 'text-bottom' for fine-tuning */
}


/* case studies deep dives */
.vertical-stack {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.results-title {
  font-weight: 800;
  margin: 0;
  padding: 0;
  text-align: center;
}

.metrics {
  display: flex;
  width: 100%;
  gap: 1rem;
  justify-content: center;
}

.metric-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.125rem;
  min-width: 300px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-sans);
}

.metric-card .value {
  font-size: 2rem;
  font-weight: 300;
  margin: 0.5rem 0;
}

.metric-card .label {
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
}

.results-container {
  display: inline-block;
  text-align: center;
  max-width: 1040px;
  width: 100%;
}

.results-container h2 {
  text-align: center;
  padding-bottom: 48px;
}

.results-container .results-title {
  margin-bottom: 1.5rem;
}

.highlight-wrap-min {
  display: inline-block !important;
  padding: 0.2em 0.4em !important;
  /* vertical/horizontal padding */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: inherit;
  /* ensure it stays aligned with surrounding text */

}

.mint {
  background: #42E2B8;
  /* your teal (or amber) */

}

.tangerine {
  background: #DB995A;
}

.black {
  color: #000
}





.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

@media (max-width:900px) {
  .skills {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    gap: 0;

  }

}

.skill {
  break-inside: avoid;
  /* keep each group intact */
  margin: 0 0 1.25rem;
  /* spacing between groups */
  opacity: .45;
}

.skill:hover {
  opacity: 1;
}

.skills h4 {
  padding: 0;
  /* override global h4 padding */
  margin: 0 0 .25rem;
  line-height: 1.3;
}

/* list formatting inside skills */
.skills ul {
  margin: 0;
  /* remove default top/bottom gap */
  padding-left: 1.1rem;
  /* balanced indent for bullets */
  list-style: disc;
}

.skills li {
  margin: 0 0 .25rem;
  /* compact rhythm */
  line-height: 1.45;
}

/* optional: tighten last item spacing per list */
.skills ul li:last-child {
  margin-bottom: 0;
}


/* tablets: keep 2 cols down to 900px */
@media (max-width: 900px) {
  .skills {
    column-count: 2;
  }
}

/* mobile: 1 col under 767px */
@media (max-width: 767px) {
  .skills {
    column-count: 1;
  }
}


/* Mobile gutters */
@media (max-width: 767px) {
  .main-container {
    padding: 0 16px;
  }
}

/* hide project-summary */
@media (max-width: 767px) {
  .project-summary {
    display: none;
  }
}



/* hide when viewport is narrower than 1040px */
@media (max-width: 1039px) {
  .hide-below-1040 {
    display: contents;
  }
}


/* screen reader – hide text when not needed */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}


/* kill any browser tooltip styling */
/* ===== Header icon focus — force visible, square, no glow ===== */
#themeToggle,
.header-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* kill rounded corners */
  line-height: 0;
  padding: 0;
  cursor: pointer;
}

#themeToggle .icon,
.header-button .icon {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: var(--border-radius-small);
  /* prevent rounded image corners */
}

/* show the same square ring for both focus & focus-visible */
/* Header icons — show ring for keyboard (focus-visible) only */
#themeToggle:focus-visible,
.header-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--border-radius-small) !important;
}

/* If focus came from mouse/touch, hide ring */
#themeToggle:focus:not(:focus-visible),
.header-button:focus:not(:focus-visible) {
  outline: none;
}




a.card:focus-visible {
  outline: 2px solid var(--brand);
  /* outline-offset: 2px; */
  border-radius: var(--border-radius);
  background-color: var(--bg2);
}

a.card:focus-visible .features .feature {
  opacity: 1;
}

a:focus-visible .contact-card {
  background-color: var(--bg2);
}



.skip-link {
  position: absolute;
  top: 50vh;
  left: 24px;
  padding: 12px 16px;
  background: var(--bg);
  /* match site background */
  color: var(--text);
  border: none;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  z-index: 999;
  transform: translateY(-200%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  outline: none;
  border-radius: var(--border-radius-small);
}

.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}




.float-menu-list a[aria-current="page"] {
  opacity: .5;
}


/* — Sticky panels hardening (scoped) — */
#scroll-storytelling {
  overflow: visible !important;
}

/* Don’t transform the sticky element itself */
#scroll-storytelling .scroll-panel.panel {
  transform: none !important;
  /* cancel transform on the sticky element */
  will-change: auto !important;
  /* avoid forcing a new layer */
}

/* Move the fade/slide to direct children instead */
#scroll-storytelling .scroll-panel.panel>* {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s ease, transform .8s ease;
}

#scroll-storytelling .scroll-panel.panel.visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* Be explicit about the sticky */
#scroll-storytelling .scroll-panel.sticky {
  /* position: -webkit-sticky;
  position: sticky; */
  top: 0;
}


/* lightGallery case studies */

.case-study .cs-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--outer-margin);
  padding-right: var(--outer-margin);
}

/* Gallery grid lives inside the container (so it’s constrained) */
.case-study .cs-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Stack on small screens */
@media (max-width: 1024px) {
  .case-study .cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .case-study .cs-container { padding-left: 16px; padding-right: 16px; }
  .case-study .cs-gallery   { grid-template-columns: 1fr; }
}
.case-study .cs-gallery-card {
  display: flex;
  flex-direction: column;
}


/* ===== Top copy (eyebrow + h3) ABOVE the thumbnail ===== */
/* These are kept in normal DOM order, but margin resets avoid “banana” spacing */
.case-study .cs-gallery-card .eyebrow,
.case-study .cs-gallery-card h3 {
  margin: 0;
  /* reset browser defaults */
  padding: 0;
}

/* small breathing room */
.case-study .cs-gallery-card .eyebrow {
  margin-bottom: .25rem;
}

.case-study .cs-gallery-card h3 {
  margin-bottom: .5rem;
}

/* Optional: fix min-height so all card tops align even if copy wraps */
.case-study .cs-gallery-card .cs-card-top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* top aligned */
  gap: .25rem;
  /* eyebrow ↔ h3 gap */
  min-height: clamp(112px, 8vw, 148px);
  /* not too small, not too big */
  margin-bottom: 8px;
  /* tiny, consistent gap above image */
}

/* ===== Thumb container stays fixed; image inside zooms ===== */
.case-study .cs-gallery-card .thumb {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--img_bg);
  border-radius: var(--border-radius);
}

/* Image content zooms on hover/focus */
.case-study .cs-gallery-card .thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: scale(1);
  transition: transform .35s ease;
  display: block;
  transform-origin: left center;
  will-change: transform;
}

.case-study .cs-gallery-card a:hover .thumb img,
.case-study .cs-gallery-card a:focus-visible .thumb img {
  transform: scale(1.06);
}

/* ===== Bottom copy under the image ===== */
.case-study .cs-gallery-card h5 {
  font-size: var(--font-size-med);
  margin: .75rem 0 0 0;
  padding: 0;
}

/* Accessible focus ring on the link */
.case-study .cs-gallery-card a:focus-visible {
  outline: 2px solid var(--brand, #28ab00);
  outline-offset: 4px;
}

/* reset eyebrow letter-spacing only in gallery cards */
.cs-gallery-card .eyebrow {
  letter-spacing: normal !important;
  /* overrides the global h3,.eyebrow rule */
}

/* add right margin to all text elements inside the card */
.cs-gallery-card :is(p, h2, h3, h4, h5, .eyebrow, .cta) {
  margin-right: 15% !important;
  /* margin-left: 5% !important; */
}

/* 1) Tighten the stat paragraph and add top padding to the bottom block */
.case-study .cs-gallery-card .cs-card-bottom {
  /* padding-top: var(--spacing); */
  padding-bottom: var(--spacing);
}

.case-study .cs-gallery-card .cs-card-bottom .stats {
  /* kill global paragraph spacing here */
  margin: 0;
  padding: 0;
}

/* 2) Arrow at the end of the H5 (decorative, inherits brand color) */
.cs-gallery-card .cs-card-bottom h5::after {
  content: "\00A0\2192";
  /* NBSP + → */
  display: inline-block;
  font-family: var(--font-cta);
  color: var(--brand);
  line-height: 1;
  transition: transform .2s ease;
}

.nowrap {
  white-space: nowrap;
  /* keeps the word + arrow together */
}

/* Nudge the arrow when the whole card (the <a>) is hovered or focused */
.case-study .cs-gallery-card>a.cs-gallery-item:hover h5::after,
.case-study .cs-gallery-card>a.cs-gallery-item:focus-visible h5::after {
  transform: translateX(.15em);
}


/* 1) Reset the link’s own focus ring */
.cs-gallery-card .cs-gallery-item:focus,
.cs-gallery-card .cs-gallery-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 2) Draw a single rounded ring on the CARD when anything inside is focused */
.cs-gallery-card {
  position: relative;
  /* anchor for the pseudo-element */
  border-radius: var(--border-radius);
}

.cs-gallery-card:focus-within::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  pointer-events: none;
  /* the ring */
  box-shadow:
    0 0 0 3px var(--brand);
  z-index: 2;
}

/* 🎯 only these specific links */
.cs-related li a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px !important;
  border-radius: var(--border-radius-small);
}

/* Optional: accessibility fallback for high-contrast/forced colors */
@media (forced-colors: active) {
  .cs-gallery-card:focus-within::after {
    box-shadow: none;
    outline: 2px solid CanvasText;
  }
}

/* if you keep the old standalone arrow, hide it */
.case-study .cs-gallery-card .cta {
  display: none;
}



/* inline highlight chips */
.highlight-wrap {
  /* keep as inline so it can wrap; clone applies padding per line */
  display: inline;
  padding: 0.25rem 0.5rem;
  /* ← tweak to taste */
  border-radius: .0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: inherit;
  /* don’t fight the paragraph */
}


/* ===== Kill legacy scroll-storytelling animations (scoped) ===== */
#scroll-storytelling .panel,
#scroll-storytelling .scroll-panel.panel,
#scroll-storytelling .scroll-panel.panel>* {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* case study image containers */
/* — PNG band behind transparent images — */
:root {
  --band-start: 33.333%;
  --band-end: 66.666%;
}

/* make sure we beat .cs-gallery-card .thumb and don't get overridden */
.case-study .cs-gallery-card .thumb.png-band {
  /* kill any solid bg from the base .thumb rule */
  background-color: transparent;

  /* THE BAND */
  /* default = light mode (20% tint) */
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent var(--band-start),
      rgba(38, 50, 56, 0.20) var(--band-start),
      rgba(38, 50, 56, 0.20) var(--band-end),
      transparent var(--band-end),
      transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

/* dark mode override */
:root[data-theme="dark"] .case-study .cs-gallery-card .thumb.png-band {
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent var(--band-start),
      var(--brand-cs) var(--band-start),
      var(--brand-cs) var(--band-end),
      transparent var(--band-end),
      transparent 100%);
}

/* auto-dark fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .case-study .cs-gallery-card .thumb.png-band {
    background-image:
      linear-gradient(to bottom,
        transparent 0%,
        transparent var(--band-start),
        var(--brand-cs) var(--band-start),
        var(--brand-cs) var(--band-end),
        transparent var(--band-end),
        transparent 100%);
  }
}


/* image stays above the gradient */
.case-study .cs-gallery-card .thumb.png-band>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* or "contain" if you prefer */
}


/* mobile: make banded thumbs 66% of the page and centre them */
@media (max-width: 900px) {
  .case-study .cs-gallery-card .thumb.png-band {
    align-self: flex-start;
    /* <- stops flex 'stretch' from forcing 100% */
    margin: 0 auto;
    /* belt + braces centring */
  }

  .case-study .cs-gallery-card .thumb.png-band img {
    width: 100%;
    /* image fills the container */
    height: auto;
  }
}

/* TESTING */
/* while we restore, no smooth scroll and no scroll anchoring nudges */
/* while we manually restore, cancel smooth scroll + anchoring */
html.restoring,
html.restoring body {
  scroll-behavior: auto !important;
  overflow-anchor: none !important;
}

html.skip-start #start.section-panel.home {
  display: none;
}

/* remove or keep commented-out any :target offset you had */





/* ===========================
   Case Studies — Results Panel
   One palette for ALL case studies
   - Light: 10% tint of brand-cs
   - Dark: solid brand-cs
   - Menus use accent-cs
   =========================== */


/* Panel layout (structure only) */
.cs-results-panel {
  padding-block: var(--panel-padding-block);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* value+label at top, kicker at bottom */
}

/* Panel colouring (single class, no calculations) */
.cs-results-panel.is-cs {
  /* Light mode: 10% of brand-cs */
  background-color: rgba(38, 50, 56, 0.075);
}

/* Explicit dark theme uses solid brand-cs */
:root[data-theme="dark"] .cs-results-panel.is-cs {
  background-color: var(--brand-cs);
}

/* Auto-dark when user hasn’t forced a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .cs-results-panel.is-cs {
    background-color: var(--brand-cs);
  }
}

/* Menu/link colour on all case-study pages (floater) */
/* body.case-study #logo-float-menu .float-menu-list a {
  color: var(--accent-cs);
} */

/* Inner layout: use your site container; no local padding */
.cs-results-panel .cs-container {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: inherit;
  /* lets the grid centering actually work */
  display: grid;
  align-content: center;
  /* keeps the block centred even if taller */
}

/* Head block – inherit your globals, just spacing */
.cs-results-panel header h2 {
  margin: 0 0 var(--spacing) 0;
}

.cs-results-panel header p {
  margin: 0 0 var(--spacing) 0;
  padding: 0;
}

/* Section kicker */
.cs-results-panel h4 {
  margin: var(--spacing) 0 0 0;
}

/* Results grid: 3 → 1 */
.cs-results-panel .results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--spacing);
  align-items: stretch;
}

@media (max-width: 900px) {
  .cs-results-panel .results-grid {
    grid-template-columns: 1fr;
  }
}

/* Metric tiles – match .card-play vibe (no border, 0 radius) */
.cs-results-panel .metric {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* kicker / value / label */
  min-height: 200px;
  padding: var(--card-padding);
  border: 0;
  border-radius: var(--border-radius);
  color: inherit;
}

/* Light theme: solid white */
:root[data-theme="light"] .cs-results-panel .metric {
  background-color: #fff;
}

/* Dark theme: semi-transparent tile over brand background */
:root[data-theme="dark"] .cs-results-panel .metric {
  background-color: rgba(255, 255, 255, 0.1);
}


/* Neutralise global <p> padding inside tiles */
.cs-results-panel .metric p {
  margin: 0;
  padding: 0;
}

/* Value (top aligned) */
.cs-results-panel .metric-value {
  font-family: var(--font-head);
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 1.25;
  opacity: .66;
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.25rem;
  /* breathing space before label */
}

/* Label (hugs value, top aligned) */
.cs-results-panel .metric-label {
  font-size: var(--font-size-teeny);
  opacity: .9;
  margin-bottom: auto;
  /* pushes kicker down */
}

/* Kicker (bottom aligned) */
.cs-results-panel .metric-kicker {
  font-weight: 400;
  opacity: .66;
  margin-top: 0.5rem;
}

/* TL;DR block */
.cs-results-panel .results-story {
  margin-top: var(--spacing);
}

.cs-results-panel .results-story h3 {
  margin: 0 0 .25rem 0;
}

.cs-results-panel .results-story p {
  margin: 0;
  padding: 0;
}




/* prevent any text styling in <a> on case study galleries */
/* Make the whole card a neutral, clickable link */
.cs-gallery-card>a.cs-gallery-item {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Keep headings white (inherit) even if you have brand-green heading rules */
.cs-results-panel .cs-gallery-card>a.cs-gallery-item .cs-card-bottom :is(h2, .stats) {
  color: inherit;
}

/* Keep the image zooming when you hover/focus the *text* too */
.cs-gallery-card>a.cs-gallery-item:is(:hover, :focus-visible) .thumb img {
  transform: scale(1.06);
}


/* cta arrows */

/* Reset the link-style arrows (like ↓) so they match the span arrows */
.cta.left a {
  display: inline-block;
  /* so transforms work */
  color: var(--brand);
  /* green by default */
  text-decoration: none;
  transition: transform 0.2s ease;
  /* smooth nudge */
}

/* Hover/focus: nudge downward instead of changing colour */
.cta.left a:hover,
.cta.left a:focus-visible {
  color: var(--brand);
  /* keep green */
  transform: translateY(0.15em);
  /* nudge down */
}


/* responsive padding hack. fix properly later and move */
/* give the main content breathing room between ~1120px and 768px */
@media (max-width: 1120px) {
  .main-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cs-container {
    padding-left: 24px;
    padding-right: 24px;
  }

}

/* slightly tighter on small screens */
@media (max-width: 768px) {
  .main-container {
    padding-left: 16px;
    padding-right: 16px;
    /* optional: respect notches/safe areas */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .cs-container {
    /* respect notches/safe areas */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

}

/* keep header/menu gutters in sync with content between 1120px–1025px */
@media (max-width: 1120px) and (min-width: 1025px) {
  .nav-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* hide the menu button + its anchor wrapper on desktop*/
.menu-anchor,
.header-button--menu {
  display: none;
}

/* handheld (≤1351px): show the menu button/anchor */
@media (max-width:1351px) {

  .menu-anchor,
  .header-button--menu {
    display: inline-block;
  }
}

/* mobile tightening for hero meta chips */
@media (max-width: 767px) {
  .hero-meta {
    row-gap: 0.4em;
    column-gap: 0.6em;
  }

  .hero-meta .feature {
    padding: 2px 6px;
  }

  .hero-meta .tag {
    line-height: 1;
  }
}

@media (max-width: 767px) {
  .cd-case-meta {
    gap: 0.4em 0.6em;
    /* row-gap then column-gap in one shorthand */
  }

  .cd-case-meta .feature {
    padding: 2px 6px;
    align-items: baseline;
  }

  .cd-case-meta .tag {
    line-height: 1;
  }
}


ul {
  margin: 0 0 1em 1.2em;
  /* consistent left indent */
  padding: 0;
  list-style-position: outside;
}

ul li {
  margin: 0 0 0.5em 0;
  /* breathing room between items */
  padding: 0;
}


/* lets knock back the colour of visited links in the snack footer of case studies */
/* Visited link colour tweak, scoped only to the "more case studies" section */
.cs-section-b.cs-section-base.brand-cs a:visited {
  opacity: 0.66 !important;
}


/* additional tag styling */
/* badge row */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* pill */
.feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  /* pill */
  background: var(--badge-bg);
  border: 1px solid var(--badge-ring);
  color: var(--badge-text);
  font-family: IamIanb;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  cursor: default;
  user-select: none;
}

/* icon size */
.feature .icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* sort case but fixing acronymns */
.tag {
  text-transform: lowercase;
}

[data-acronym="true"] {
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.5px;
}

/* shuzz up the case study cards */
/* add breathing space between pills inside work cards */
.grid-container-work .features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  /* 8px vertical, 10px horizontal */
}

/* fix spacing bug on mobe */

/* clients and sectors film strip */
.logo-filmstrip-wrap {
  max-width: 1040px;     /* let it shrink naturally */
  width: 100%;
  margin: 0 auto;

  /* mask + scroll cosmetics */
  --edge: 48px;            /* fade width on each side */
  --scrollbar-gap: 8px;    /* breathing room below content so bar isn’t overlapped */
}

.logo-filmstrip {
  font-family: var(--font-sans);
  color: var(--text);
}

/* the SCROLLER (keeps the scrollbar) */
.logo-strip {
  overflow-x: auto;
  margin: 0 0 var(--spacing) 0;
  background: transparent;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;

  /* keep custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(127,127,127,0.5) transparent;

  /* room for the bar */
  padding-bottom: var(--scrollbar-gap);

  /* smooth landing */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8px;
}
.logo-strip::-webkit-scrollbar { height: 6px; }
.logo-strip::-webkit-scrollbar-track { background: transparent; }
.logo-strip::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,0.5);
  border-radius: 3px;
}

/* the INNER flex row (this gets the MASK) */
.logo-strip-inner {
  display: inline-flex;            /* allow width to grow to content */
  gap: var(--gap-small);
  width: max-content;              /* one long row */

  /* ===== gradient mask (true transparency) =====
     - size = viewport width of the scroller (set via JS)
     - position = scrollLeft (set via JS)
     - the mask moves opposite the content, so fades stay pinned
   */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge),
    #000 calc(100% - var(--edge)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge),
    #000 calc(100% - var(--edge)),
    transparent 100%
  );
  -webkit-mask-size: var(--viewport, 100%) 100%;
  mask-size: var(--viewport, 100%) 100%;
  -webkit-mask-position: var(--scroll-x, 0px) 0;
  mask-position: var(--scroll-x, 0px) 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* drop the LEFT fade when there’s no left overflow */
.logo-filmstrip-wrap:not(.has-left) .logo-strip-inner {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--edge)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--edge)),
    transparent 100%
  );
}

/* drop the RIGHT fade when there’s no right overflow */
.logo-filmstrip-wrap:not(.has-right) .logo-strip-inner {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge),
    #000 100%
  );
}

/* no overflow at all → no fades */
.logo-filmstrip-wrap:not(.has-left):not(.has-right) .logo-strip-inner {
  -webkit-mask: none;
  mask: none;
}



/* cards */
.logo-card {
  background: var(--img_bg);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  /* box-shadow: var(--tile-shadow); */
  border-radius: var(--border-radius);
  min-width: 128px;
  /* peeking effect */
  padding: 10px 8px;
  text-align: center;

  font-size: 12px;
  line-height: 1.25;
  user-select: none;

  /* snap target */
  scroll-snap-align: start;
}

.logo-card .icon {
  display: block;
  opacity: 0.5;
  width: 100px;
  height: auto;
  margin: 6px auto 12px;
}

.logo-card span {
  opacity: 0.3;
  color: var(--text);
  white-space: nowrap;
}

/* increase dargability */
.logo-strip {
  cursor: grab;
}

.logo-strip.dragging {
  cursor: grabbing;
  user-select: none;
}

/* --- responsive tweaks --- */

/* medium screens: shrink card a little */
@media (max-width: 900px) {
  .logo-card {
    min-width: 112px;
    font-size: 11px;
  }

  .logo-card .icon {
    width: 90px;
  }
}

/* small screens: comfortable swipe targets */
@media (max-width: 640px) {
  .logo-card {
    min-width: 104px;
    font-size: 10px;
  }

  .logo-card .icon {
    width: 80px;
  }
}

/* manual override: grid version */
.logo-grid-wrap .logo-strip {
  overflow-x: hidden; /* no scroll bar */
}

.logo-grid-wrap .logo-strip-inner {
  -webkit-mask: none;
  mask: none;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--gap-small);
  width: 100%;
}

/* only this strip (tools + seven-cards) */
.logo-filmstrip-wrap.tools.seven-cards .logo-strip-inner .logo-card {
  /* give each card an exact column width */
  flex: 0 0 calc((1040px - (6 * var(--gap-small))) / 7) !important;
  width: calc((1040px - (6 * var(--gap-small))) / 7) !important;
  min-width: calc((1040px - (6 * var(--gap-small))) / 7) !important;
}
/* only this strip (tools + five-cards) */
.logo-filmstrip-wrap.tools.five-cards .logo-strip-inner .logo-card {
  /* give each card an exact column width */
  flex: 0 0 calc((1040px - (4 * var(--gap-small))) / 5) !important;
  width: calc((1040px - (4 * var(--gap-small))) / 5) !important;
  min-width: calc((1040px - (4 * var(--gap-small))) / 5) !important;
}

/* */
/* case study lightGallery overlays */
/* */
.cs-flex {
  margin-inline: auto;
  padding-inline: var(--panel-padding-block-med);
  padding-block: var(--panel-padding-block-small);

  display: flex;
  gap: var(--col-gap);
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.cs-flex .blk {
  min-width: 0;
  box-sizing: border-box;
}

/* layout-one: copy 25%, two images share remaining 75% */
.cs-flex.layout-one .copy {
  flex: 0 1 25%;
}

.cs-flex.layout-one .media {
  flex: 0 1 calc((75% - 2 * var(--col-gap)) / 2);
}

/* layout-two: copy 25%, wide image 75% */
.cs-flex.layout-two .copy {
  flex: 0 1 25%;
}

.cs-flex.layout-two .media {
  flex: 0 1 calc(75% - var(--col-gap));
}

/* media blocks align content; phones sized by viewport height */
.cs-flex .media {
  display: flex;
  align-items: center;
}

.cs-flex .media img,
.cs-flex .media video,
.cs-flex .media svg {
  width: auto;
  height: calc(100vh - 2 * var(--panel-padding-block-small));
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* alignment: middle phone → right edge; right phone → left edge */
.cs-flex.layout-one .media:first-of-type {
  justify-content: flex-end;
}

.cs-flex.layout-one .media:last-of-type {
  justify-content: flex-start;
}


/* ===== Hype embed: responsive, capped height (no padding/background) ===== */
.cs-flex .media .hype-embed {
  display: grid;
  /* easy centering of the Hype container */
  place-items: center;

  width: 100%;
  max-width: 100%;
  padding: 0;
  background: none;

  /* Phone-like ratio; tweak if your asset differs */
  aspect-ratio: 9 / 19.5;

  /* Desktop cap: full viewport minus page padding */
  max-height: calc(100vh - 2 * var(--panel-padding-block-small));
  overflow: hidden;
}

.cs-flex .media .hype-embed .HYPE_document {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1024px) {
  .cs-flex {
    flex-wrap: wrap;
  }

  /* allow two rows */

  /* layout-one: text full width, images split below */
  .cs-flex.layout-one .copy {
    flex: 0 1 100%;
  }

  .cs-flex.layout-one .media {
    flex: 0 1 calc(50% - var(--col-gap) / 2);
  }

  /* layout-two: both rows full width */
  .cs-flex.layout-two .copy,
  .cs-flex.layout-two .media {
    flex: 0 1 100%;
  }

  /* center single media nicely */
  .cs-flex .media {
    justify-content: center;
  }

  /* cap media height and let width auto */
  .cs-flex .media img,
  .cs-flex .media video,
  .cs-flex .media svg {
    max-height: calc(80vh - 2 * var(--panel-padding-block-small));
    width: auto;
    height: auto;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
  }

  /* Hype: same cap as other media; no background/padding */
  .cs-flex .media .hype-embed {
    max-height: calc(80vh - 2 * var(--panel-padding-block-small));
    background: none;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .cs-flex {
    flex-direction: column;
    /* stack vertically */
    padding-inline: var(--panel-padding-inline-mobile, 16px);
    padding-block: var(--panel-padding-block-mobile, 16px);
    gap: var(--gap-small, 12px);
  }
}

.cs-flex .blk {
  flex: 0 1 auto;
  width: 100%;
}

/* cap image height at 80% of viewport on phones */
.cs-flex .media img,
.cs-flex .media video,
.cs-flex .media svg {
  max-height: 80vh;
  width: auto;
  height: auto;
  margin-inline: auto;
}

/* Hype: same mobile cap; no background/padding */
.cs-flex .media .hype-embed {
  max-height: 80vh;
  background: none;
  padding: 0;
  margin-inline: auto;
}


/* case study b4-after slider */
/* phone-ish aspect: width / height = 609 / 1250 ≈ 0.4872 */
.stage {
  position: relative;
  width: 100%;
  /* height will be width / (609/1250).
     So choose max-width so height ≤ (100vh - padding) * 0.85 */
  max-width: calc((100vh - 2 * var(--panel-padding-block-small, 0px)) * (609 / 1250) * 0.85);

  aspect-ratio: 609 / 1250;
  /* keeps the phone shape correct */
  margin: 3rem auto;
}

.compare {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.after {
  position: absolute;
  inset: 0;
  will-change: clip-path;
  z-index: 1;
}

/* Overlay layer for the line — never clipped by the images */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.handle {
  position: absolute;
  width: 3px;
  /* line width */
  background: #3cc;
  border: 0;
  cursor: ew-resize;
  touch-action: none;
  pointer-events: auto;
  /* the button itself is draggable */
}

/* comfy hit area without changing visuals */
.handle::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -12px;
  right: -12px;
}

/* ===== outward by default (global) ===== */

/* grid/flex item alignment */
.col-two {
  justify-self: end;
  text-align: right;
}

.col-three {
  justify-self: start;
  text-align: left;
}

/* image behaviour inside those cols */
.col-two img,
.col-three img {
  margin-inline: inherit !important;
}

/* explicit margin fallbacks for safety */
.col-two img {
  margin-left: auto;
  margin-right: 0;
}

.col-three img {
  margin-left: 0;
  margin-right: auto;
}

/* reset any inherited centring that might sneak in */
.col-two,
.col-three {
  text-align: initial;
}

/* ===== tablet + mobile: centre both ===== */
@media (max-width: 1024px) {

  .col-two,
  .col-three {
    justify-self: center;
    /* grid */
    text-align: center;
    /* fallback */
  }

  .col-two img,
  .col-three img {
    margin-left: auto;
    margin-right: auto;
    /* centre in flex/block too */
  }
}

/* case study overlays; special hack for cs04c */
/* lock both screenshots to the same width */
.section-email-pair .email-shot {
  display: block;
  width: 320px;
  /* or whatever px value you want */
  max-width: 100%;
  /* still shrink on narrow screens */
  height: auto;
  /* keep aspect ratio */
  object-fit: contain;
}



/* mobile: swap the before image */
@media (max-width: 640px) {
  .section-email-pair .img--before {
    content: url("/images/p_301a_mob.png");
  }
}

/* motivator 9000 */
/* already running everywhere this class is used */
@keyframes floaty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.floaty .card-image img {
  animation: floaty 3.5s ease-in-out infinite;
}

/* one-shot “lift” on hover/focus */
@keyframes liftOnce {
  0% {
    transform: translateX(0) scale(1);
  }

  50% {
    transform: translateX(-4px) scale(1.05);
  }

  100% {
    transform: translateX(-2px) scale(1.1);
  }
}

.lift .card-image img {
  display: block;
  transform-origin: center center;
}

/* kill floaty + run liftOnce while hovered/focused */
.lift:hover .card-image img,
.lift:focus-within .card-image img {
  animation: liftOnce 400ms cubic-bezier(.28, .84, .42, 1) both !important;
  /* ↑ overrides the infinite floaty animation during hover */
}

/* pantone matcher */
@keyframes shimmer {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.85;
  }
}

.shimmer .card-image img {
  animation: shimmer 5s ease-in-out infinite;
}

/* snake */
@keyframes sway {

  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

.sway .card-image img {
  animation: sway 8s ease-in-out infinite;
}

/* sinking feeling */
@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* keep the pulse on the image itself */
.heartbeat .card-image img {
  animation: heartbeat 2.8s ease-in-out infinite;
  display: block;
  will-change: transform;
}

/* move the container down on hover/focus, smoothly */
.heartbeat .card-image {
  transition: transform 1s cubic-bezier(0.15, 0, 0.10, 0.05);
}

.heartbeat:hover .card-image,
.heartbeat:focus-within .card-image {
  transform: translateY(20px);
}

/* name that font */
@keyframes bounceOnce {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }

  60% {
    transform: translateY(4px);
  }

  100% {
    transform: translateY(0);
  }
}

.bounce .card-image img {
  display: block;
  transform-origin: bottom center;
}

.bounce:hover .card-image img,
.bounce:focus-within .card-image img {
  animation: bounceOnce 400ms cubic-bezier(.28, .84, .42, 1) both;
}

/* less white space */
.glow .card-image img {
  display: block;
  filter: drop-shadow(0 0 0 var(--accent, hsl(0 0% 100%)));
  transition: filter 0.3s ease-in-out;
  /* smooth fade-in/out */
}

.glow:hover .card-image img,
.glow:focus-within .card-image img {
  filter: drop-shadow(0 0 12px var(--accent, hsl(0 0% 100%)));
}

/* Pantone variant: just set the accent color on the card */
.glow[data-id="pantone"] {
  --accent: #FF5F99;
}

/* snake */
@keyframes wiggleOnce {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  40% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(-6deg);
  }

  80% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.hover-wiggle .card-image img {
  display: block;
  transform-origin: center center;
}

.hover-wiggle:hover .card-image img,
.hover-wiggle:focus-within .card-image img {
  animation: wiggleOnce 500ms ease-in-out;
}

/* secret london */
.zoom-tilt .card-image img {
  display: block;
  transform-origin: center center;
  transition: transform 300ms cubic-bezier(.2, .7, .3, 1.2);
}

.zoom-tilt:hover .card-image img,
.zoom-tilt:focus-within .card-image img {
  transform: scale(1.1) rotate(2deg);
}

/* pantone pink glow */
/* pantone pink glow */
.glow-pantone .card-image img {
  display: block;
  filter: drop-shadow(0 0 0 #FF5F99);
  /* baseline = no glow */
  transition: filter 0.3s ease-in-out;
}

.glow-pantone:hover .card-image img,
.glow-pantone:focus-within .card-image img {
  filter: drop-shadow(0 0 12px #FF5F99);
  /* pink neon pop */
}

/* playground card staggered popIn */
@keyframes popIn {
  0% {
    transform: translateY(18px) scale(.96);
    opacity: 0;
  }

  60% {
    transform: translateY(-6px) scale(1.02);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* initial hidden state */
.card-play.pop-in {
  opacity: 0;
  transform: translateY(18px) scale(.96);
  will-change: transform, opacity;
}

/* when JS adds .in-view, run the animation */
.card-play.pop-in.in-view {
  animation: popIn 520ms cubic-bezier(.2, .9, .2, 1.3) forwards;
}

/* optional: tweak spacing if the animation looks clipped */
#grid-container-play {
  overflow: visible;
}


/* ctas */
/* Make the CTAs look/act like the cards (no shadow, no bg change) */
.contact-card.cta-lite {
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--border-radius);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--gap);

  /* same snappy micro-motion as your tiles */
  transition: transform .15s ease-in-out;
}

/* hover/focus: tiny nudge only */
a:where(.block) .contact-card.cta-lite:is(:hover, :focus-within) {
  transform: translateY(-2px);
}


/* about > skills */
/* grid */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  max-width: var(--max-width);
  /* margin: var(--spacing) auto; */
  align-items: stretch;
  margin-bottom: var(--spacing);
}

@media (max-width: 900px) {
  .flip-grid {
    grid-template-columns: 1fr;
  }
}

/* button reset / card container */
.flip-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  color: var(--text);
  padding: 0;
  margin: 0;
  border-radius: var(--border-radius);
  cursor: pointer;
  width: 100%;
  perspective: 1000px;
  /* 3d stage */
  display: flex;
  height: 100%;
}

.flip-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 0;
}

/* 3d inner */
.flip-inner {
  flex: 1 1 auto;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.36s cubic-bezier(.2, .8, .2, 1);
  border-radius: inherit;
  min-height: 220px;
  padding: var(--card-padding);
}

/* hover “peek” (desktop only) */
@media (hover:hover) and (pointer:fine) {
  .flip-card:hover .flip-inner {
    transform: rotateY(6deg);
  }
}

/* faces */
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: inherit;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* top align content */
  gap: 8px;
  overflow: hidden;
}

.flip-front {
  transform: rotateY(0deg);
}

.flip-back {
  transform: rotateY(180deg);
}

/* title row */
.flip-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.5rem;
}

.flip-title h5 {
  margin: 0;
  line-height: 1;
  padding: 0;
}

.flip-title .icon {
  display: block;
  /* kill image baseline gap */
  width: 24px;
  height: 24px;
  transform: translateY(-0.1em);
  /* tiny nudge to match cap-height */
}

/* lists */
.flip-bullets,
.flip-list {
  margin: 0;
  padding-left: 1.25rem;
  /* gutter for bullet */
  list-style-position: outside;
  /* tidy alignment */
}

.flip-bullets li,
.flip-list li {
  line-height: 150%;
  text-align: left;
}

/* hint */
.flip-hint {
  margin-top: auto;
  font-size: var(--font-size-titchy);
  opacity: 0.66;
}

/* flipped state */
.flip-card[aria-expanded="true"] .flip-inner {
  transform: rotateY(180deg);
}

/* “+X more” meta item (no bullet, visually lighter) */
.flip-bullets .flip-more {
  list-style-type: none;
  margin-left: 0;
  margin-top: 0.25rem;
  font-size: var(--font-size-titchy);
  font-style: italic;
  opacity: 0.6;
  text-align: left;
}

.flip-card:focus-visible,
.flip-card-inner:focus-visible,
.flip-card-front:focus-visible,
.flip-card-back:focus-visible {
  border-radius: var(--border-radius);
}


/* initial hidden state */
.flip-grid>.flip-card {
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
}

/* when observed */
.flip-grid>.flip-card.in-view {
  animation: slideInLeft 0.6s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* stagger the three */
.flip-grid>.flip-card:nth-of-type(1).in-view {
  animation-delay: 0ms;
}

.flip-grid>.flip-card:nth-of-type(2).in-view {
  animation-delay: 120ms;
}

.flip-grid>.flip-card:nth-of-type(3).in-view {
  animation-delay: 240ms;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flip-grid>.flip-card {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

.pad {
  margin-bottom: 12px;
}

.pad2 {
  margin-top: 24px;
  margin-bottom: 12px;
}



/* case study cards */
.cs-pbb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 24px 0;
}

@media (max-width: 900px) {
  .cs-pbb {
    grid-template-columns: 1fr;
  }
}

.cs-pbb-card {
  position: relative;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
}

/* header row — same treatment as flip cards */
/* Make cs-pbb titles match flip-title EXACTLY */
.cs-pbb-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .5rem 0;
}

.cs-pbb-title .icon {
  display: block;
  /* kill image baseline gap */
  width: 24px;
  height: 24px;
  transform: translateY(-0.1em);
  /* tiny nudge to match cap-height */
}

.cs-pbb-title h5 {
  margin: 0;
  line-height: 1.2;
}

.cs-pbb-card>p {
  padding: 0 !important;
  margin-top: 12px;
  margin-bottom: 4px;
  font-weight: 600;
}

.cs-pbb-card>ul {
  margin-bottom: 0;
}

/* ==== Marker highlight ========================================== */
.marker {
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--brand) 55%, transparent) 0 58%,
      transparent 58% 100%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 2px;
  padding: 0 .18em;
}




/* pill chips under a heading */
.cs-pills {
  display: flex;
  flex-direction: column;
  /* stack vertically */
  gap: 8px;
  margin: .5rem 0 var(--gap);
}

.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 12px 16px;
  border: 1px solid var(--tile-border);
  background: var(--tile-bg);
  border-radius: 999px;
  font-size: var(--font-size-base);
  align-self: flex-start;
  /* <-- makes pill hug text, not stretch */
}

/* two-card 50:50 layout */
.cs-pbb-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: 24px 0;
}

@media (max-width: 900px) {
  .cs-pbb-two {
    grid-template-columns: 1fr;
  }
}

.cs-pbb-two .cs-pbb-card {
  position: relative;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
}

.cs-pbb-two .cs-pbb-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .5rem 0;
}

.cs-pbb-two .cs-pbb-title .icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  transform: translateY(-0.1em);
}

.cs-pbb-two .cs-pbb-card h5 {
  margin: 0;
}

.cs-pbb-wrap {
  display: grid;
  gap: var(--gap);
}

.cs-pbb-wrap>.cs-pbb,
.cs-pbb-wrap>.cs-pbb-two {
  margin: 0;
  /* remove the old 24px */
  padding: 0;
  /* safety, in case padding was added */
  gap: var(--gap);
  padding-top: 36px;
}


.cs-pbb-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

@media (max-width: 1000px) {
  .cs-pbb-three {
    grid-template-columns: 1fr;
  }
}


.cs-mini {
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
}

.cs-mini h6 {
  margin: 0 0 .5rem;
  font-weight: 700;
}

.cs-mini ul {
  margin: 0;
}

/* Single wide card */
.cs-onecard {
  background: none;
  border: 1px solid var(--tile-border);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
}

.bg-pop {
  background-color: var(--tile-bg-pop);
}

/* Header (matches your flip/cs-pbb title rhythm) */
.cs-onecard-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 var(--gap);
}

.cs-onecard-title .icon {
  display: block;
  width: 24px;
  height: 24px;
}

.cs-onecard-title h5 {
  margin: 0;
}

/* Inner 4-col grid (no separate cards) */
.cs-onecard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}

/* Column titles + lists (keep bullets standard) */
.cs-onecard-col h6 {
  margin: 0 0 .35rem 0;
  font-weight: 700;
}

.cs-onecard-col ul {
  margin: 0;
  /* no extra top gap */
  padding-left: 1.1em;
  /* normal bullet indent */
}

/* Responsive collapse */
@media (max-width: 1000px) {
  .cs-onecard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cs-onecard-grid {
    grid-template-columns: 1fr;
  }
}

/* MOBILE: tighten cs-onecard rhythm */
@media (max-width: 767px) {
  .cs-onecard {
    padding: 16px;               /* was var(--card-padding) */
  }
  .cs-onecard-title {
    gap: 8px;                    /* smaller icon/title gap */
    margin: 0 0 8px 0;           /* reduce title bottom space */
  }
  .cs-onecard-grid {
    gap: 12px;                   /* tighter column spacing */
  }
  .cs-onecard-col h6 {
    margin: 0 0 4px 0;           /* snug label → copy */
  }
  .cs-onecard-col p {
    margin: 0;                   /* kill global paragraph margins */
    padding: 0;                  /* kill global paragraph padding */
    line-height: 1.4;            /* slightly tighter leading */
  }
}

/* accordion collapsible */
.cs-accordion {
  max-width: var(--max-width);
  margin: var(--spacing) auto;
  display: grid;
  gap: var(--gap);
  width: 100%;
}

/* Each item */
.cs-acc-item {
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--border-radius);
  /* box-shadow: var(--tile-shadow); */
  overflow: hidden;
  /* smooth height animation */
  transition: max-height 0.5s ease;
}

/* clickable header */
.cs-acc-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--card-padding);
  cursor: pointer;
  user-select: none;
}

.cs-acc-summary::-webkit-details-marker {
  display: none;
}

/* title = normal h4 */
.cs-acc-summary h4 {
  margin: 0;
}

/* arrow uses .cta */
.cs-acc-summary .cta {
  flex: none;
  transition: transform .5s ease;
}

.cs-acc-item[open] .cta {
  transform: rotate(180deg);
}

/* content panel */
.cs-acc-content {
  padding: 0 var(--card-padding) var(--card-padding);
}

/* focus styles */
.cs-acc-summary:focus-visible {
  box-shadow: 0 0 0 2px var(--brand) inset;
  border-radius: var(--border-radius);
}