@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@200&display=swap');

/* Decorative type-specimen fonts (Logos & Branding case studies) */
@font-face { font-family: 'Danube'; src: url('assets/fonts/danube.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Century Gothic'; src: url('assets/fonts/century-gothic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Bank Gothic'; src: url('assets/fonts/bank-gothic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Code Bold'; src: url('assets/fonts/code-bold.otf') format('opentype'); font-display: swap; }

/* ==============================
   TOKENS
============================== */
:root {
  --bg: #04081c;
  --bg-deep: #020512;
  --bg-gradient: linear-gradient(-18deg, #010c26 44%, #031745 70%, #010c26 100%);
  --teal: #01ccca;
  --lavender: #b999f0;
  --white: #FFFFFF;

  --lavender-soft-bg: rgba(185, 153, 240, 0.1);
  --lavender-pill-bg: rgba(185, 153, 240, 0.15);
  --lavender-pill-border: #b999f0;
  --teal-pill-bg: rgba(1, 204, 202, 0.25);
  --teal-pill-border: #01ccca;
  --card-navy: #031745;
  --border-violet: #b08dfd;
  --border-soft: rgba(185, 153, 240, 0.18);
  --border-soft-hover: rgba(185, 153, 240, 0.35);
  /* Stronger hairline used for the footer rules on the homepage */
  --border-hairline: rgba(185, 153, 240, 0.5);
  /* Flat tint multiplied over the hero slide-wall montage */
  --hero-tint: #02133b;

  --grad-heading: linear-gradient(90deg, #67e2f3 0%, #739fef 55%, #7f5dea 100%);
  --grad-heading-v: linear-gradient(180deg, #7b74eb 0%, #71abef 50%, #67e2f3 100%);
  --grad-btn-violet: linear-gradient(135deg, #5f47f6 0%, #834afb 100%);
  --grad-btn-teal: linear-gradient(101.6deg, #02cbca 0%, #1276a6 50%, #212082 100%);
  --grad-overlay-card: linear-gradient(to bottom, rgba(3, 23, 69, 0) 0%, rgba(3, 23, 69, 0.92) 47%);

  --font-display: 'Sora', sans-serif;

  --section-pad: clamp(80px, 9vw, 120px) 0;
  --container: 1240px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;

  --trans: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================
   RESET & BASE
============================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (not just body overflow-x hidden) so intentional
   full-bleed overhangs can't widen the layout viewport on phones,
   which would push the fixed nav (and kebab menu) off-screen */
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
/* With overflow-x: clip on html, body overflow no longer propagates to the
   viewport, so the JS scroll lock (body.style.overflow) went dead — lock the
   real scroller here whenever the drawer or a modal is open */
html:has(.mobile-menu.is-open),
html:has(.modal-overlay.is-open) { overflow-y: hidden; }
body { font-family: var(--font-display); background: var(--bg-gradient) var(--bg); color: var(--white); overflow-x: hidden; line-height: 1.6; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--trans); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

/* Project case-study pages use a narrower content margin (~196px at 1440)
   matching their Figma frames exactly, distinct from the homepage's container. */
.project-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 13.6vw, 200px);
}

/* The homepage frame sits at exactly 200px margins at 1440 (1040px of content,
   giving 331px stat cards), where the case-study frames sit at ~196px.
   200/1440 = 13.889vw. */
.page-home .project-container {
  padding: 0 clamp(20px, 13.889vw, 200px);
}

/* ==============================
   TYPOGRAPHY
============================== */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; color: var(--white); }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.25rem); font-weight: 700; }
p { line-height: 1.7; color: var(--lavender); font-weight: 300; }

.gradient-text {
  background: var(--grad-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--v {
  background: var(--grad-heading-v);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-tag {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

.section-header { margin-bottom: clamp(40px, 6vw, 64px); }
.section-header h2 { margin-top: 8px; }

/* ==============================
   PILLS / TAGS
============================== */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill--teal {
  background: var(--teal-pill-bg);
  border: 1px solid var(--teal-pill-border);
  color: var(--teal);
}
.pill--lavender {
  background: var(--lavender-pill-bg);
  border: 1px solid var(--lavender-pill-border);
  color: var(--lavender);
}

/* ==============================
   BUTTONS
============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 19px 38px;
  border-radius: var(--radius-pill);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
  position: relative;
}

.btn--violet {
  width: 306px;
  height: 63px;
  padding: 0 20px;
  background: var(--grad-btn-violet);
  border: 0.5px solid var(--border-violet);
}
.btn--violet:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(95, 71, 246, 0.4); }

/* Sized by content rather than a fixed width — the action row carries four
   buttons now, and 4 x 210px overflows the 1040px frame. */
.btn--teal {
  height: 63px;
  padding: 0 32px;
  background: var(--grad-btn-teal);
  border: 0.5px solid var(--border-violet);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.btn--teal:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(2, 203, 202, 0.35); }

.btn--outline {
  height: 63px;
  padding: 0 32px;
  background: transparent;
  border: 0.5px solid var(--border-violet);
}
.btn--outline:hover { background: rgba(185, 153, 240, 0.08); transform: translateY(-2px); }

.btn__icon { width: 22px; height: 22px; flex-shrink: 0; }
.btn__icon--linkedin { width: 40px; height: 40px; }
.btn__icon--whatsapp { width: 36px; height: 36px; }
.btn__arrow { width: 16px; height: 14px; flex-shrink: 0; }

/* ==============================
   NAVIGATION
============================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 26px 0;
  transition: all var(--trans);
}
.nav--scrolled {
  padding: 14px 0;
  background: rgba(3, 23, 69, 0.85);
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  border-bottom: 1px solid var(--border-soft);
}

.nav__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.nav__logo img { width: 48px; height: 48px; object-fit: contain; }
.nav__logo-fallback {
  display: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--grad-btn-violet);
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--bg);
  flex-shrink: 0;
}
.nav__logo-text-wrap { display: flex; flex-direction: column; gap: 6px; }
.nav__logo-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
}
.nav__logo-sub {
  font-size: 0.6875rem;
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
}

.nav__links { display: flex; align-items: center; gap: 44px; }
.nav__links a {
  font-size: 24px;
  font-weight: 200;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.nav__links a:hover { color: var(--teal); }

/* Projects dropdown */
.nav__dropdown { position: relative; }
.nav__dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  font-weight: 200;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.nav__dropdown-btn::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
.nav__dropdown:hover .nav__dropdown-btn,
.nav__dropdown-btn:hover { color: var(--teal); }
.nav__dropdown:hover .nav__dropdown-btn::after,
.nav__dropdown-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(2px); }
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #071430;
  border-radius: 12px;
  padding: 8px;
  list-style: none;
  min-width: 210px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
  z-index: 200;
  border: 1px solid var(--border-soft);
  box-shadow: 0 16px 40px rgba(2, 5, 18, 0.8);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
}
.nav__dropdown-menu li { list-style: none; }
.nav__dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 300;
  color: var(--lavender);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav__dropdown-menu a:hover {
  color: var(--white);
  background: var(--lavender-soft-bg);
}
/* Mobile menu section label — styled like the desktop PROJECTS nav item */
.mobile-menu__section {
  font-size: 24px;
  font-weight: 200;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}
.nav__hamburger span {
  width: 4px; height: 4px;
  background: var(--white);
  border-radius: 50%;
  transition: all var(--trans);
  display: block;
}

/* Drawer: slides in from the right over ~75% of the screen,
   above the nav (z 120 > 100) so the close button is clickable */
.mobile-menu {
  display: flex;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  width: 75%;
  z-index: 120;
  background: rgba(4, 8, 28, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--border-soft);
  box-shadow: -24px 0 60px rgba(2, 5, 18, 0.6);
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: right;
  gap: 24px;
  padding: 110px 36px 40px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 0.35s;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 0s;
}
/* Dimmed backdrop over the page sliver left of the drawer; blocks clicks
   on the page and closes the menu when tapped (see page scripts) */
.mobile-menu::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: 100%;
  width: 100vw;
  background: rgba(1, 5, 16, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-menu.is-open::before { opacity: 1; }
/* Top-level items match the desktop nav links */
.mobile-menu a {
  font-size: 24px;
  font-weight: 200;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.mobile-menu a:hover { color: var(--teal); }
/* Project sub-links match the desktop Projects dropdown items */
.mobile-menu a.mobile-menu__sub {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lavender);
  margin: -6px 0;
}
.mobile-menu a.mobile-menu__sub:hover { color: var(--white); }
/* Close button replaces the kebab: same top-right spot in the nav */
.mobile-menu__close {
  position: absolute;
  top: 34px; right: 12px;
  padding: 0 8px;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--white);
  cursor: pointer;
  transition: color var(--trans);
}
/* Keep the X on the kebab when the nav is in its compact scrolled state */
html:has(.nav--scrolled) .mobile-menu__close { top: 16px; }
.mobile-menu__close:hover { color: var(--teal); }
/* Hide the kebab while the drawer is open so the X takes its place */
.nav__hamburger { transition: opacity var(--trans); }
.nav__hamburger[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* ==============================
   HERO
============================== */
/* The hero is a full-bleed band of presentation slides sitting below the
   fixed nav, with the headline centred over it. */
.hero {
  position: relative;
  margin-top: clamp(120px, 13vw, 188px);
  height: clamp(360px, 36vw, 520px);
  display: flex;
  justify-content: center;
}

.hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* The montage is dropped well back so the headline carries the band — in
   Figma this reads as a heavy navy multiply; as a low-opacity layer over the
   page gradient it stays resolution-independent. */
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.25;
  /* Soften both ends so the band melts into the page gradient rather than
     cutting off, which is how the masked group reads in Figma. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 78%, transparent 100%);
}
.hero__tint {
  position: absolute;
  inset: 0;
  background: var(--hero-tint);
  opacity: 0.35;
  mix-blend-mode: multiply;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1073px;
  padding: 105px clamp(20px, 5vw, 60px) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.hero__headline {
  margin: 0;
  font-size: clamp(1.75rem, 3.9vw, 3.5rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero__sub {
  margin: 0;
  font-size: clamp(1.0625rem, 2.5vw, 2.25rem);
  font-weight: 200;
  line-height: 1.3;
  color: var(--white);
}
.hero__br--mobile { display: none; }
.br--mobile { display: none; }

/* Responsive line-break helpers: .br-mobile shows only ≤768px,
   .br-desktop shows only >768px. */
.br-mobile { display: none; }

/* ==============================
   STATS
============================== */
.stats { padding-top: 73px; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 204px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  background: var(--lavender-soft-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background var(--trans), transform var(--trans);
}
.stat-card:hover { background: var(--lavender-pill-bg); transform: translateY(-5px); }

/* The icon is an oversized watermark behind the label, not an inline glyph. */
.stat-card__icon {
  position: absolute;
  left: 24px;
  top: 28px;
  width: 106px;
  height: 106px;
  /* Deliberately stronger than the Figma render (~6%), which was too faint to
     read on screen. Raise this value if the watermark should sit forward more. */
  opacity: 0.2;
  pointer-events: none;
}

.stat-card__title {
  position: relative;
  margin: 0;
  font-size: clamp(1.25rem, 1.95vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

/* ==============================
   SELECTED PROJECTS
============================== */
/* Homepage sections carry their gap as top padding only — adding a bottom
   pad as well double-spaces them against the Figma frame. */
.projects { padding-top: 122px; }
.projects .section-header { margin-bottom: 62px; }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 508px);
  gap: 24px;
}

.project-card {
  position: relative;
  grid-column: span 2;
  min-width: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1040 / 400;
  display: block;
  cursor: pointer;
  transition: transform var(--trans);
}
.project-card--half {
  grid-column: span 1;
  width: 508px;
  height: 400px;
  aspect-ratio: auto;
}
.project-card:hover { transform: translateY(-6px); }

.project-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform var(--trans-slow);
}
.project-card:hover .project-card__bg { transform: scale(1.04); }

/* The scrim grows as the hover content is revealed, so the gradient always
   sits behind whatever text is showing. */
.project-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: var(--grad-overlay-card);
  transition: height var(--trans);
}
.project-card--half .project-card__overlay { height: 65%; }

.project-card__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 46px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.project-card__title {
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin: 0;
}
/* Half cards carry only a title, so it is set slightly larger. */
.project-card--half .project-card__title { font-size: clamp(1.5rem, 2.8vw, 2.5rem); }

.project-card__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--lavender);
  font-weight: 300;
  margin: 0;
}

.project-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--teal);
}

/* Subtitle + CTA are height-collapsed by default so the title sits flush at
   the bottom of the card, then pushed upward as this area expands on hover. */
.project-card__hover-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--trans);
}
.project-card__hover-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hover-reveal is a desktop-only enhancement — devices without a precise
   pointer get the subtitle and CTA statically, since :hover is not a
   reliable affordance there. */
@media (hover: hover) and (pointer: fine) {
  .project-card__overlay { height: 55%; }
  .project-card--half .project-card__overlay { height: 45%; }
  .project-card:hover .project-card__overlay { height: 100%; }
  .project-card--half:hover .project-card__overlay { height: 65%; }

  .project-card__hover-wrap { grid-template-rows: 0fr; }
  .project-card:hover .project-card__hover-wrap { grid-template-rows: 1fr; }

  .project-card__subtitle {
    opacity: 0;
    transition: opacity var(--trans);
  }
  .project-card:hover .project-card__subtitle { opacity: 1; }

  .project-card__cta {
    opacity: 0;
    transition: opacity var(--trans) 0.05s;
  }
  .project-card:hover .project-card__cta { opacity: 1; }
}

/* ==============================
   ABOUT
============================== */
.about { padding-top: 122px; }

.about__grid {
  display: grid;
  grid-template-columns: 512px 495px;
  gap: 33px;
  align-items: start;
}

.about__content { display: flex; flex-direction: column; gap: 48px; }
.about__headline { margin: 0; font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.1; }
.about__body { display: flex; flex-direction: column; gap: 14px; }
.about__body p { font-size: 1.25rem; line-height: 1.3; color: var(--lavender); font-weight: 300; }

.about__visual { position: relative; }
.about__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}


/* ==============================
   CTA BANNER
============================== */
.cta { padding-top: 122px; padding-bottom: 122px; }
.cta__inner {
  background: var(--card-navy);
  border-radius: var(--radius-xl);
  padding: clamp(44px, 5.6vw, 81px) clamp(32px, 6vw, 80px) clamp(36px, 4.1vw, 59px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta__inner::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(123, 97, 255, 0.14), transparent 60%);
  pointer-events: none;
}

.cta__headline {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.cta__sub {
  font-size: 1.25rem;
  font-weight: 300;
  max-width: 650px;
  margin: 0 auto 44px;
  position: relative;
  z-index: 1;
}
.cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* The four actions hold a single row at full width. Below that they are
   tightened to stay on one line as long as possible, then wrap to an even
   2x2 rather than a lopsided 3+1. */
@media (max-width: 1330px) {
  .cta__actions { gap: 12px; }
  .cta__actions .btn { padding: 0 22px; font-size: 1.125rem; }
  .cta__actions .btn__icon--linkedin { width: 32px; height: 32px; }
  .cta__actions .btn__icon--whatsapp { width: 30px; height: 30px; }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .cta__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 440px;
    margin-inline: auto;
  }
  .cta__actions .btn { width: 100%; }
}

/* ==============================
   FOOTER
============================== */
.footer { padding: 56px 0 0; border-top: 1px solid var(--border-hairline); }
.footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 52px;
}
.footer__grid > * { min-width: 0; }

.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__logo { display: flex; align-items: center; gap: 14px; }
.footer__logo img { width: 40px; height: 40px; }
.footer__logo-fallback {
  display: none;
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--grad-btn-violet);
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--bg);
}
.footer__logo-text-wrap { display: flex; flex-direction: column; gap: 2px; }
.footer__logo-name { font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.footer__logo-sub { font-size: 0.75rem; font-weight: 200; letter-spacing: 0.06em; text-transform: uppercase; }

.footer__col-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
}

.footer__links { display: flex; flex-direction: column; gap: 14px; }
.footer__links a { font-size: 1rem; font-weight: 200; color: var(--lavender); }
.footer__links a:hover { color: var(--teal); }

.footer__bottom {
  max-width: var(--container);
  margin: 40px auto 0;
  padding: 24px clamp(20px, 5vw, 60px);
  border-top: 1px solid var(--border-hairline);
  text-align: center;
}
.footer__copy { font-size: 1rem; font-weight: 200; color: var(--lavender); }

/* ==============================
   TOAST
   Transient confirmation shown after the e-mail address is copied.
============================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 300;
  transform: translateX(-50%) translateY(12px);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: var(--card-navy);
  border: 1px solid var(--lavender-pill-border);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 300;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
}
.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==============================
   CV MODAL
============================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 8, 28, 0.88);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--trans);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }

.modal {
  background: var(--card-navy);
  border: 1px solid var(--border-violet);
  border-radius: var(--radius-xl);
  padding: 48px;
  max-width: 480px;
  width: 100%;
  position: relative;
  transform: translateY(24px) scale(0.98);
  transition: all var(--trans);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--lavender);
  transition: color var(--trans);
}
.modal__close:hover { color: var(--white); }

.modal__title { font-size: 1.875rem; font-weight: 700; margin-bottom: 8px; }
.modal__sub { font-size: 0.9375rem; color: var(--lavender); margin-bottom: 36px; }
.modal--contact { max-width: 620px; text-align: center; }
.modal--contact .modal__title { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; }
.modal--contact .modal__sub { max-width: 500px; margin-left: auto; margin-right: auto; }
.modal__options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal__option {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--lavender-soft-bg);
  color: var(--white);
  transition: all var(--trans);
}
.modal__option:hover { border-color: var(--border-violet); background: rgba(185, 153, 240, 0.18); transform: translateY(-2px); }
.modal__option-flag { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.modal__option-lang { font-size: 0.9375rem; font-weight: 700; }
.modal__option-sub { display: none; }

.email-options { display: flex; flex-direction: column; gap: 12px; }
.email-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--lavender-soft-bg);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  transition: all var(--trans);
}
.email-option:hover { border-color: var(--border-violet); background: rgba(185, 153, 240, 0.18); transform: translateY(-2px); }
.email-option__icon { width: 24px; height: 24px; flex-shrink: 0; }

.email-modal__copy {
  margin-top: 24px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--lavender);
}
.email-modal__copy-btn {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.email-modal__copy-btn:hover { color: var(--white); }

/* ==============================
   SCROLL REVEAL
============================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ==============================
   PROJECT PAGE — HEADER / HERO
============================== */
.project-header { padding-top: 178px; }

.project-header__tags { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pill--lg { height: 40px; padding: 8px 32px; font-size: 1rem; }

.project-header__title {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 56px;
}

.project-header__brief {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--lavender);
  max-width: 948px;
  margin-bottom: 56px;
}

.project-hero { position: relative; }
.project-hero__img {
  display: block;
  width: 100%;
  max-width: 1041px;
  aspect-ratio: 1041 / 586;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
  box-shadow: 2px -4px 16px 8px #0a1c46;
}

.project-hero__stats {
  background: var(--card-navy);
  box-shadow: 0 6px 10px rgba(0, 8, 27, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px clamp(20px, 13.6vw, 200px);
}
.project-hero__stat { display: flex; flex-direction: column; gap: 16px; }
.project-hero__stat-label { font-size: 1rem; font-weight: 700; color: var(--lavender); }
.project-hero__stat-value { font-size: 1rem; font-weight: 700; color: var(--white); white-space: nowrap; }

/* ==============================
   PROJECT PAGE — DAF KESHER HERO
   (image overlaps the navy stats strip; coordinates below are
   local to this block, rebased so the hero image top = 0)
============================== */
.dk-hero-wrap { position: relative; max-width: 1440px; margin: 0 auto; overflow: hidden; }
.dk-hero { position: relative; width: 1440px; height: 472px; transform-origin: top left; }
.dk-hero__brief {
  position: absolute; top: 64px; left: 200px; width: 443px;
  font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.25;
}
.dk-hero__img-wrap {
  position: absolute; top: 0; left: 633px; width: 701px; height: 434px;
  overflow: hidden; z-index: 2;
}
.dk-hero__img-wrap img { position: absolute; max-width: none; display: block; left: -0.02%; top: -3.92%; width: 100.05%; height: 121.2%; }
.dk-hero__reflection {
  position: absolute; top: 434px; left: 633px; width: 701px; height: 22px;
  overflow: hidden; transform: scaleY(-1); filter: blur(5.85px); opacity: 0.5; z-index: 1;
}
.dk-hero__reflection-img { position: absolute; max-width: none; display: block; left: -0.02%; top: -1950.01%; width: 100.05%; height: 2390.92%; }
.dk-hero__navy {
  position: absolute; top: 281px; left: 0; width: 100%; height: 191px;
  background: var(--card-navy); box-shadow: 0 6px 10.1px rgba(0, 8, 27, 1);
}
.dk-hero__stats {
  position: absolute; top: 295px; left: 200px;
  display: grid; grid-template-columns: 176px auto; column-gap: 22px; row-gap: 24px;
}
.dk-hero__stats .project-hero__stat-label,
.dk-hero__stats .project-hero__stat-value { line-height: 1.25; }

/* ==============================
   PROJECT PAGE — SHARED SECTION
============================== */
.project-section { padding: 100px 0; }
.project-section__header { margin-bottom: 32px; }
.project-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin-top: 8px; }
.project-section__body {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--lavender);
  max-width: 859px;
  margin-bottom: 20px;
}
.project-section__body strong { font-weight: 700; color: var(--lavender); }

/* ==============================
   PROJECT PAGE — DAF KESHER PROBLEM
============================== */
.dk-problem__body { max-width: 774px; margin-bottom: 40px; line-height: 1.25; }
.dk-problem__img-wrap { position: relative; width: 1035px; max-width: 100%; height: 345px; border-radius: 16px; overflow: hidden; }
.dk-problem__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-problem__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; height: 29%;
  background: linear-gradient(to bottom, rgba(3, 23, 69, 0) 0%, var(--card-navy) 95%);
}
.dk-problem__caption {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-size: 1.25rem; font-weight: 300; color: var(--lavender); margin: 0;
}

/* ==============================
   PROJECT PAGE — THE PROBLEM
============================== */
.problem-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; max-width: 1044px; }
.problem-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 509 / 345; min-width: 0; }
.problem-card__crop { position: absolute; inset: 0; overflow: hidden; }
.problem-card__crop img { position: absolute; max-width: none; display: block; }
.problem-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(to bottom, rgba(3, 23, 69, 0) 0%, var(--card-navy) 95%);
}
.problem-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--lavender);
}
.problem-card__caption strong { font-weight: 700; color: var(--lavender); }

/* ==============================
   PROJECT PAGE — DAF KESHER PRODUCT STRATEGY
============================== */
.dk-strategy__row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 56px; align-items: flex-start; }
.dk-strategy__text { flex: 1 1 419px; max-width: 419px; font-size: 1.25rem; font-weight: 300; color: var(--lavender); margin: 22px 0 0; line-height: 1.25; }
.dk-decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 1 1 606px; max-width: 606px; min-width: 280px; }
.dk-decision-card {
  background: rgba(185, 153, 240, 0.1); border-radius: 32px;
  padding: 0 40px; display: flex; flex-direction: column; justify-content: center;
  gap: 16px; min-height: 138px; width: 100%; min-width: 0;
}
.dk-decision-card__head { display: flex; align-items: flex-start; gap: 16px; }
.dk-decision-card__icon { width: 24px; height: 24px; flex-shrink: 0; }
.dk-decision-card h3 { font-size: 1.25rem; }
.dk-decision-card p { font-size: 0.875rem; font-weight: 300; color: var(--lavender); margin: 0; line-height: 1.25; }

/* ==============================
   PROJECT PAGE — THE PROCESS
============================== */
.process-step { margin-top: 56px; }
.process-step__title { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 20px; }
.process-step__lead { font-size: 1.25rem; font-weight: 700; color: var(--lavender); margin-bottom: 24px; }

.market-table { display: flex; flex-direction: column; border-top: 1px solid var(--border-soft); max-width: 942px; }
.market-table__row {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 1.6fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--lavender);
}
.market-table__row--head { font-weight: 700; color: var(--white); }

.flow-diagram { display: flex; width: 100%; max-width: 1047px; margin-top: 40px; }
.flow-step {
  flex-shrink: 1;
  min-width: 0;
  height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lavender);
  padding: 0 16px;
}
.flow-step:not(:first-child) { margin-left: -2.5%; }
.flow-step--start { flex: 206 1 0; background-image: url('assets/icons/brownie-flow-start.svg'); padding-left: 8px; }
.flow-step--mid { flex: 212 1 0; background-image: url('assets/icons/brownie-flow-mid.svg'); }
.flow-step--end { flex: 173 1 0; background-image: url('assets/icons/brownie-flow-end.svg'); padding-left: 24px; }
.flow-step--start span { transform: translateX(-9%); }
.flow-step--mid span { transform: translateX(9%); }
.flow-step--end span { transform: translateX(20%); }

.decision-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin: 32px auto 0; max-width: 832px; }
.decision-card {
  background: var(--lavender-soft-bg);
  border-radius: 32px;
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.decision-card__icon { width: 24px; height: 24px; }
.decision-card__title { font-size: 1.25rem; font-weight: 700; color: var(--white); }
.decision-card__desc { font-size: 0.875rem; font-weight: 300; color: var(--lavender); max-width: 315px; }

/* ==============================
   PROJECT PAGE — THE SOLUTION
============================== */
.solution-point { margin-top: 40px; }
.solution-point--banner { margin-top: 66px; }
.solution-point__title { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 56px; }
.solution-point__row { display: flex; gap: 0; align-items: flex-start; }
.solution-point--img-left .solution-point__text { margin-left: -71px; margin-top: 89px; }
.solution-point--img-right .solution-point__img {
  position: absolute;
  top: 78px;
  right: -6px;
  width: 532px;
  height: 396px;
}
.solution-point--img-right .solution-point__text { margin-top: 4px; flex-basis: 530px; max-width: 530px; }
.solution-point--img-right { position: relative; min-height: 474px; }
.solution-point__text { display: flex; flex-direction: column; gap: 20px; font-size: 1.25rem; font-weight: 300; color: var(--lavender); flex: 0 0 472px; max-width: 472px; }
.solution-point--img-left-small .solution-point__text { margin-left: 27px; margin-top: 27px; flex-basis: 457px; max-width: 457px; }
.solution-point__text strong { font-weight: 700; color: var(--white); }
.solution-point__img { flex-shrink: 0; border-radius: 16px; object-fit: cover; min-width: 0; }
.solution-point--img-left .solution-point__img { width: 605px; aspect-ratio: 605 / 454; margin-left: -142px; }
.solution-point--img-left-small .solution-point__img--small { width: 455px; height: 229px; aspect-ratio: auto; margin-left: -12px; }

/* Point 3 ("Calendar as an anchor") has a different composition: the image
   aligns with the TITLE's top edge (not the text), and title+gap+text must
   fit within the image's 229px height. */
.solution-point--pt3 { position: relative; }
.solution-point--pt3 .solution-point__title { margin-bottom: 0; }
.solution-point--img-left-small .solution-point__title { margin-bottom: 43px; }
.solution-point--pt3 .solution-point__text { margin-top: 24px; max-width: 545px; }
.solution-point--pt3 .solution-point__img {
  position: absolute;
  top: 0;
  right: 34px;
  width: 458px;
  height: 229px;
  aspect-ratio: auto;
}

.solution-point__img-crop { position: relative; overflow: hidden; min-width: 0; z-index: 2; }
.solution-point__img-crop img { position: absolute; max-width: none; display: block; }

.solution-feature-row {
  display: flex;
  justify-content: flex-start;
  background: var(--lavender-soft-bg);
  border-radius: 16px;
  padding: 28px 0 28px 26px;
  gap: 24px;
  width: 926px;
  max-width: 100%;
  position: absolute;
  top: 263px;
  left: 0;
  z-index: 1;
}
.solution-feature { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 152px; flex-shrink: 0; }
.solution-feature__icon { width: 48px; height: 48px; }
.solution-feature span { font-size: 1.25rem; font-weight: 300; color: var(--lavender); }

.solution-point--banner { position: relative; min-height: 219px; }
.solution-point--banner .solution-point__title { margin-bottom: 0; }
.solution-point--banner .solution-point__banner-img {
  position: absolute;
  top: 71px;
  left: 234px;
  width: 563px;
  height: 148px;
  border-radius: 16px;
  z-index: 1;
  overflow: hidden;
}
.solution-banner {
  position: absolute;
  top: 65px;
  left: 0;
  width: 1043px;
  height: 154px;
  background: var(--lavender-soft-bg);
  border-radius: 16px;
}
.solution-banner p {
  position: absolute;
  top: 16px;
  width: 241px;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 300;
  color: var(--lavender);
  margin: 0;
}
.solution-banner p:first-child { left: 14px; }
.solution-banner p:last-child { left: 791px; }

/* Mobile-only split banners for Solution point 4 (shown ≤768px) */
.solution-banner-m { display: none; }

.project-closing { padding: 0 0 100px; }
.project-closing__img { display: block; max-width: 1003px; width: calc(100% - 40px); margin: 0 auto; border-radius: 16px; }

/* ==============================
   PROJECT PAGE — DAF KESHER SOLUTION STEPS
============================== */
.dk-step { margin-top: 40px; }
.dk-step:first-of-type { margin-top: 8px; }
.dk-step__title { font-size: 1.25rem; font-weight: 700; color: var(--white); margin: 0 0 16px; }
.dk-step__intro { font-size: 1.25rem; font-weight: 300; color: var(--lavender); max-width: 861px; margin: 0 0 40px; line-height: 1.25; }
.dk-step__screens { display: flex; gap: 6.5483%; margin-left: 7.1154%; width: 86.4423%; }
.dk-step__screen { flex: 1 1 0; max-width: 261px; aspect-ratio: 261 / 565; border-radius: 16px; overflow: hidden; min-width: 0; }
.dk-step__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-step__captions {
  display: flex; gap: 6.5483%; margin-top: 16px; margin-left: 7.1154%; width: 86.4423%;
  font-size: 1.25rem; font-weight: 300; color: var(--lavender); text-align: center;
}
.dk-step__captions span { flex: 1 1 0; max-width: 261px; min-width: 0; overflow-wrap: break-word; }
.dk-step__captions span.dk-step__caption--wide { max-width: 284px; }
.dk-step__box {
  display: flex; align-items: center; margin-top: 40px; margin-left: 5.9615%; width: 926px; max-width: calc(100% - 5.9615%);
  min-height: 154px; background: var(--lavender-soft-bg); border-radius: 16px; padding: 16px 0;
}
.dk-step__box ul {
  flex: 1 1 50%; max-width: 454px; min-width: 0; margin: 0; padding: 0 0 0 46px;
  list-style: disc; font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.25; overflow-wrap: break-word;
}
.dk-step__box li { margin-bottom: 16px; }
.dk-step__box li:last-child { margin-bottom: 0; }

/* ==============================
   PROJECT PAGE — DAF KESHER REFLECTION
============================== */
.dk-reflection__header { padding-left: 25px; }
.dk-reflection__body { max-width: 861px; margin-left: 25px; margin-bottom: 40px; line-height: 1.25; }
.dk-reflection-cards { display: flex; gap: 23px; }
.dk-decision-card--reflection { width: 331px; height: 138px; padding: 0 40px; text-align: center; }
.dk-decision-card--reflection h3 { white-space: normal; }
.dk-decision-card--reflection p { font-size: 0.875rem; }

/* ==============================
   PROJECT PAGE — DAF KESHER CLOSING IMAGE
============================== */
.dk-closing { max-width: 1440px; margin: 81px auto 0; padding: 0 0 0 33px; }
.dk-closing img { display: block; width: 100%; aspect-ratio: 1407 / 1055; object-fit: cover; }

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 1024px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .projects__grid { grid-template-columns: 1fr 1fr; }
  .project-card--half { width: auto; height: auto; aspect-ratio: 4/3; }
  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__visual { order: -1; max-width: 460px; margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  .problem-cards { grid-template-columns: 1fr; }
  .decision-cards { grid-template-columns: 1fr; max-width: none; }
  .market-table__row { grid-template-columns: 1fr; gap: 4px; }
  .solution-point__row { flex-direction: column; gap: 24px; }
  .solution-point__img,
  .solution-point--img-right .solution-point__img,
  .solution-point--img-left-small .solution-point__img--small { width: 100%; }
  .solution-feature-row { flex-direction: column; align-items: center; }
  .solution-point--banner .solution-point__banner-img { width: 100%; }
  .solution-banner { flex-direction: column; }
  .project-hero__stats { justify-content: flex-start; }

  /* ---- Mobile layout, matched to the Figma mobile frame (393px, node 6:2) ---- */

  .br-mobile { display: inline; }
  .br-desktop { display: none; }

  /* Header: 31px logo, 15.5px name, 7px subtitle, kebab dots flush right */
  .nav { padding: 30px 0; }
  .nav--scrolled { padding: 12px 0; }
  .nav__logo { gap: 13px; }
  .nav__logo img { width: 31px; height: 31px; }
  .nav__logo-text-wrap { gap: 5px; }
  .nav__logo-name { font-size: 15.5px; }
  .nav__logo-sub { font-size: 7px; }
  .nav__hamburger { margin-right: -8px; }

  /* Hero: shorter slide band, headline centred over it */
  .hero { margin-top: 97px; height: 300px; }
  .hero__inner { padding: 42px 16px 0; gap: 18px; }
  .hero__headline { font-size: 24px; line-height: 1.26; }
  .hero__sub { font-size: 14px; line-height: 1.35; }
  .hero__br--desktop { display: none; }
  .hero__br--mobile { display: inline; }
  .br--mobile { display: inline; }

  /* Section headers: 12px tag, 32px headline, 12px between */
  .section-tag { font-size: 12px; margin-bottom: 12px; }
  .section-header { margin-bottom: 48px; }
  .section-header h2 { margin-top: 0; font-size: 32px; }

  /* Stats: stacked cards, icon watermark scaled down to match */
  .stats { padding: 56px 0 0; }
  .stats__grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-card { min-height: 128px; padding: 24px; }
  .stat-card__icon { left: 20px; top: 20px; width: 76px; height: 76px; }
  .stat-card__title { font-size: 18px; }

  /* Projects: 56px above, 353x320-proportioned cards, 16px apart */
  .projects { padding: 56px 0 0; }
  .projects .section-header { margin-bottom: 32px; }
  .projects__grid { grid-template-columns: 1fr; gap: 16px; }
  .project-card { grid-column: span 1; border-radius: 25.6px; }
  .project-card:not(.project-card--half) { aspect-ratio: 353 / 320; min-height: 0; }
  .project-card--half { width: auto; height: auto; aspect-ratio: 353 / 320; min-height: 0; }
  /* No hover on touch, so the subtitle and CTA are always showing — the scrim
     has to cover them. */
  .project-card--half .project-card__overlay { height: 70%; }
  .project-card__content { padding: 0 28px 24px; gap: 8px; }
  .project-card__title { font-size: 24px; }
  .project-card--half .project-card__title { font-size: 24px; }
  .project-card__subtitle { font-size: 14px; }
  .project-card__cta { font-size: 12px; }
  .project-card__hover-inner { gap: 8px; }

  /* Mobile-specific image crops from the Figma mobile frame (card = 353x320).
     These override the desktop crop offsets set as inline styles. */
  .project-card[href="project-politics.html"] .project-card__bg:nth-of-type(1) { left: -12.56% !important; top: 0 !important; width: 161.07% !important; height: 100% !important; }
  .project-card[href="project-politics.html"] .project-card__bg:nth-of-type(2) { left: -43.34% !important; top: -16.46% !important; width: 191.69% !important; height: 120.1% !important; }
  .project-card[href="project-logos-branding.html"] .project-card__bg:nth-of-type(1) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  .project-card[href="project-logos-branding.html"] .project-card__bg:nth-of-type(2) { left: -10.49% !important; top: -2.67% !important; width: 121.2% !important; height: 105.31% !important; }
  .project-card[href="project-hst.html"] .project-card__bg { left: -30.86% !important; top: -0.07% !important; width: 155.42% !important; height: 100.25% !important; }

  /* About: text first, 28px headline, 14px body, full-bleed skills card */
  .about { padding: 56px 0 0; }
  .about__grid { gap: 20px; }
  .about__content { gap: 12px; }
  .about__content .section-tag { margin-bottom: 0; }
  .about__headline { font-size: 28px; line-height: 1.26; }
  .about__body { gap: 18px; }
  .about__body p { font-size: 14px; line-height: 1.3; }
  .about__visual { order: 0; margin-top: 4px; max-width: none; }

  /* CTA box: 24px headline, 294px-wide sub, 245x50 stacked buttons */
  .cta { padding: 56px 0 56px; }
  .cta__inner { padding: 22px 20px 25px; border-radius: 25.6px; }
  .cta__headline { font-size: 24px; margin-bottom: 14px; }
  .cta__sub { font-size: 14px; line-height: 1.3; max-width: 294px; margin-bottom: 16px; }
  .cta__actions { flex-direction: column; align-items: center; gap: 16px; }
  .cta__actions .btn { width: 245px; max-width: none; height: 50px; padding: 0; font-size: 16px; }
  .btn__icon { width: 19px; height: 19px; }
  .btn__icon--linkedin { width: 32px; height: 32px; }
  .btn__icon--whatsapp { width: 28px; height: 28px; }
  .toast { bottom: 20px; left: 16px; right: 16px; transform: translateY(12px); text-align: center; font-size: 13px; padding: 12px 18px; }
  .toast.is-visible { transform: translateY(0); }

  /* Footer: brand + two indented columns, 12px links, 10px copyright */
  .footer { padding: 16px 0 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; text-align: left; padding: 0 20px 0 82px; }
  .footer__brand { grid-column: 1 / -1; align-items: flex-start; }
  .footer__logo img { width: 32px; height: 32px; }
  .footer__logo-name { font-size: 16px; }
  .footer__logo-sub { font-size: 9.6px; }
  .footer__col-title { font-size: 12px; margin-bottom: 16px; }
  .footer__links { gap: 8px; }
  .footer__links li { font-size: 12px; line-height: 1.25; }
  .footer__links a { font-size: 12px; line-height: 1.25; }
  .footer__bottom { margin-top: 16px; padding: 16px 20px 20px; }
  .footer__copy { font-size: 10px; }

  .modal__options { grid-template-columns: 1fr; }

  /* ---- Project pages mobile, matched to the Figma mobile frame
          (393px, Brownie node 669:359) ---- */

  .project-container { padding: 0 20px; }

  /* Header: 8px pills, 32px two-line title, 14px brief */
  .project-header { padding-top: 97px; }
  .project-header__tags { gap: 10px; margin-bottom: 10px; }
  .project-header__tags .pill { height: 25.6px; padding: 0 10px; font-size: 8px; border-width: 0.64px; }
  .project-header__tags .pill--teal { background: rgba(1, 204, 202, 0.15); }
  .project-header__title { font-size: 32px; line-height: 1.26; margin-bottom: 24px; }
  .project-header__brief { font-size: 14px; line-height: 1.3; margin-bottom: 40px; }

  /* Hero: full-bleed image (20px overhang each side), navy strip overlaps
     its bottom edge; stats become label+value rows (ROLE | YEAR, then STACK, TYPE) */
  .project-hero__img {
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 -20px;
    border-radius: 6.65px 6.65px 0 0;
    box-shadow: 0.8px -1.7px 6.7px 3.3px #0a1c46;
  }
  .project-hero__stats {
    position: relative;
    display: grid;
    grid-template-columns: 62% 38%;
    gap: 8px 0;
    padding: 13px 20px 16px;
    margin-top: -17px;
    box-shadow: 0 4.8px 8.1px #00081b;
  }
  .project-hero__stat { flex-direction: row; gap: 8px; }
  .project-hero__stat:nth-child(3),
  .project-hero__stat:nth-child(4) { grid-column: 1 / -1; }
  .project-hero__stat-label,
  .project-hero__stat-value { font-size: 12px; line-height: 1.25; }

  /* Sections: 56px rhythm, 24px headlines, 14px body */
  .project-section { padding: 56px 0 0; }
  .project-section__header { margin-bottom: 24px; }
  .project-section__title { font-size: 24px; margin-top: 0; }
  .project-section__body { font-size: 14px; line-height: 1.3; margin-bottom: 18px; }

  .problem-cards { gap: 24px; margin-top: 32px; }
  .problem-card { border-radius: 11px; }
  .problem-card__caption { font-size: 12px; bottom: 12px; }

  .process-step { margin-top: 32px; }
  .process-step__title { font-size: 14px; margin-bottom: 16px; }
  .process-step__lead { font-size: 14px; line-height: 1.3; margin-bottom: 16px; }

  /* Market table keeps its 3 columns at micro type size */
  .market-table { border-top: none; max-width: none; }
  .market-table__row {
    grid-template-columns: 23% 33.5% 43.5%;
    gap: 0;
    padding: 3px 0;
    font-size: 7.5px;
    line-height: 1.25;
  }
  .market-table__row--head { color: var(--lavender); border-bottom-width: 2px; }

  .flow-diagram { margin-top: 32px; }
  .flow-step { height: 52px; font-size: 6.8px; padding: 0 8px; }

  /* Decision cards: 2x2 grid, icon inline with the title */
  .decision-cards { grid-template-columns: 1fr 1fr; gap: 16px 14px; margin-top: 8px; }
  .decision-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 7px;
    align-content: center;
    align-items: center;
    min-height: 85px;
    padding: 12px 17px;
    border-radius: 13.5px;
  }
  .decision-card__icon { width: 10px; height: 10px; }
  .decision-card__title { font-size: 10px; line-height: 1.25; }
  .decision-card__desc { grid-column: 1 / -1; font-size: 8px; line-height: 1.25; max-width: none; }

  .solution-point__title { font-size: 14px; margin-bottom: 16px; }
  .solution-point__text { flex: none; max-width: none; font-size: 14px; gap: 18px; }
  .solution-point__text p { line-height: 1.3; }

  /* Point 1: full-bleed illustration, text below */
  .solution-point--img-left .solution-point__title { margin-bottom: 24px; }
  .solution-point--img-left .solution-point__img {
    width: calc(100% + 130px);
    max-width: none;
    margin: 0 -65px;
  }
  .solution-point--img-left .solution-point__text { margin: 0; }

  /* Point 2: text, wide image, feature card tucked under the image bottom */
  .solution-point--img-right { min-height: 0; }
  .solution-point--img-right .solution-point__img {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + 72px);
    height: auto;
    aspect-ratio: 532 / 396;
    margin: 0 -36px;
  }
  .solution-point--img-right .solution-point__text { margin: 0; flex-basis: auto; max-width: none; }
  .solution-feature-row {
    position: static;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    width: calc(100% + 60px);
    max-width: none;
    margin: -98px -30px 0;
    padding: 100px 10px 20px;
    border-radius: 12.8px;
    gap: 0;
  }
  .solution-feature { width: auto; gap: 12px; }
  .solution-feature__icon { width: 38px; height: 38px; }
  .solution-feature span { font-size: 12px; line-height: 1.25; }

  /* Point 3: text above, image below */
  .solution-point--pt3 .solution-point__text { margin-top: 16px; max-width: none; }
  .solution-point--pt3 .solution-point__img {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    margin-top: 24px;
  }

  /* Point 4: desktop banner swaps for two stacked half-image banners */
  .solution-point--banner { min-height: 0; }
  .solution-point--banner .solution-point__title { margin-bottom: 16px; }
  .solution-point--banner .solution-point__banner-img,
  .solution-banner { display: none; }
  .solution-banner-m {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 99px;
    width: calc(100% + 64px);
    margin: 0 -32px;
    padding: 2px 30px 2px 34px;
    background: var(--lavender-soft-bg);
    border-radius: 10.3px;
  }
  .solution-banner-m + .solution-banner-m { margin-top: 16px; }
  .solution-banner-m p { flex: 1; font-size: 14px; line-height: 1.25; font-weight: 300; color: var(--lavender); margin: 0; }
  .solution-banner-m__img { position: relative; flex: 0 0 49%; height: 95px; overflow: hidden; }
  .solution-banner-m__img img { position: absolute; max-width: none; display: block; }

  /* Point 5: title, image, text stacked; body stays light-weight in Figma */
  .solution-point--img-left-small .solution-point__title { margin-bottom: 16px; }
  .solution-point--img-left-small .solution-point__row { gap: 16px; }
  .solution-point--img-left-small .solution-point__img--small {
    height: auto;
    aspect-ratio: 455 / 229;
    margin: 0;
  }
  .solution-point--img-left-small .solution-point__text { margin: 0; flex-basis: auto; }
  .solution-point--img-left-small .solution-point__text strong { font-weight: 300; color: var(--lavender); }

  .project-closing { padding: 56px 0 56px; }
  .project-closing__img { width: 100%; max-width: none; border-radius: 0; }

  /* ---- Daf Kesher mobile, matched to the Figma mobile frame
          (393px, node 679:175) ---- */

  /* Hero: the 1440px scaled canvas becomes a static stacked layout —
     brief, full-bleed image, reflection, stats; navy strip pins to the
     bottom and overlaps the image bottom edge */
  .dk-hero-wrap { max-width: none; }
  .dk-hero {
    display: flex; flex-direction: column;
    width: auto; height: auto; transform: none !important;
    padding-bottom: 20px;
  }
  .dk-hero__brief { position: static; width: auto; margin: 0 20px 33px; font-size: 14px; line-height: 1.3; }
  .dk-hero__img-wrap { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 701 / 434; }
  .dk-hero__reflection { position: relative; top: auto; left: auto; width: 100%; height: 12.4px; filter: blur(3.3px); }
  .dk-hero__navy { top: auto; bottom: 0; height: 158px; }
  .dk-hero__stats {
    position: relative; z-index: 2; top: auto; left: auto;
    margin: 16px 20px 0;
    grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 8px;
  }
  .dk-hero__stats .project-hero__stat:nth-child(3) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .dk-hero__stats .project-hero__stat:nth-child(4) { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  .dk-hero__stats .project-hero__stat-label { text-transform: uppercase; }

  /* The Problem: 353x211 image, 9.7px radius, caption at 12px */
  .dk-problem__body { margin-bottom: 8px; }
  .dk-problem__img-wrap { width: 100%; height: auto; aspect-ratio: 353 / 211; border-radius: 9.7px; }
  .dk-problem__img { object-position: 15% top; }
  .dk-problem__overlay { height: 61px; background: linear-gradient(to bottom, rgba(3, 23, 69, 0) 0%, var(--card-navy) 49.5%); }
  .dk-problem__caption { font-size: 12px; bottom: 15px; }

  /* Product strategy: text above a 2x2 grid of compact 80px cards */
  .dk-strategy__row { margin-top: 0; gap: 21px; }
  .dk-strategy__text { flex-basis: auto; max-width: none; margin: 0; font-size: 14px; line-height: 1.3; }
  .dk-decision-grid { flex: none; width: 100%; max-width: none; min-width: 0; gap: 9px 10px; }
  .dk-decision-card { min-height: 80px; padding: 0 23px; gap: 9px; border-radius: 18.6px; }
  .dk-decision-card__head { align-items: center; gap: 8px; }
  .dk-decision-card__icon { width: 14px; height: 14px; }
  .dk-decision-card h3 { font-size: 12px; }
  .dk-decision-card p { font-size: 8px; }

  /* Solution steps: screens stack vertically, each with its caption
     directly underneath (screens/captions containers dissolve and their
     children interleave via order) */
  .dk-step { display: flex; flex-direction: column; margin-top: 36px; }
  .dk-step:first-of-type { margin-top: 16px; }
  .dk-step__title { order: 1; font-size: 14px; }
  .dk-step__intro { order: 2; font-size: 14px; line-height: 1.3; margin-bottom: 24px; }
  .dk-step__screens,
  .dk-step__captions { display: contents; }
  .dk-step__screen { flex: none; width: 208px; margin: 0 auto; border-radius: 12.8px; }
  .dk-step__captions span { max-width: none; font-size: 14px; margin: 16px auto 0; }
  .dk-step__captions span.dk-step__caption--wide { max-width: none; }
  .dk-step__screen:nth-child(1) { order: 3; }
  .dk-step__captions span:nth-child(1) { order: 4; }
  .dk-step__screen:nth-child(2) { order: 5; margin-top: 24px; }
  .dk-step__captions span:nth-child(2) { order: 6; }
  .dk-step__screen:nth-child(3) { order: 7; margin-top: 24px; }
  .dk-step__captions span:nth-child(3) { order: 8; }
  .dk-step__box {
    order: 9; flex-direction: column; align-items: stretch;
    width: 100%; max-width: none; margin: 24px 0 0;
    min-height: 0; padding: 26px 16px 24px;
  }
  .dk-step__box ul { flex: none; max-width: none; padding: 0 0 0 21px; font-size: 14px; line-height: 1.3; }
  .dk-step__box ul + ul { margin-top: 16px; }

  /* Reflection: centered 331px cards stacked with 16px gaps */
  .dk-reflection__header { padding-left: 0; }
  .dk-reflection__body { margin-left: 0; margin-bottom: 24px; }
  .dk-reflection-cards { flex-direction: column; align-items: center; gap: 16px; }
  .dk-decision-card--reflection {
    width: 331px; max-width: 100%; height: 138px;
    padding: 0 40px; gap: 16px; border-radius: 32px;
  }
  .dk-decision-card--reflection h3 { font-size: 14px; }
  .dk-decision-card--reflection p { font-size: 14px; }

  /* Closing mockup: full-bleed 4:3 crop, zoomed to the Figma window */
  .dk-closing { position: relative; margin: 56px auto 0; padding: 0; overflow: hidden; aspect-ratio: 392 / 294; }
  .dk-closing img { position: absolute; width: 109.42%; height: 107.96%; left: -9.42%; top: -7.93%; max-width: none; aspect-ratio: auto; }
}

/* ==============================
   PROJECT PAGE — POLITICS. SORTED.
============================== */

/* Problem cards */
.ps-problem__body,
.ps-research__intro,
.ps-solution__intro,
.ps-point__intro { font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.25; }
.ps-problem__body { max-width: 951px; }

.ps-problem-cards { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 40px; align-items: stretch; }
.ps-problem-card {
  flex: 1 1 160px; min-width: 0; max-width: 332px;
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: var(--card-navy);
}
.ps-problem-card__img-crop { position: relative; width: 100%; aspect-ratio: 332 / 331; flex-shrink: 0; }
.ps-problem-card__img-crop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-problem-card__img-crop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to bottom, rgba(3, 23, 69, 0) 0%, var(--card-navy) 92%);
}
.ps-problem-card__caption {
  padding: 24px 16px 40px; text-align: center; color: var(--lavender);
  font-size: 1.25rem; font-weight: 300; line-height: 1.25;
}
.ps-problem-card__caption strong { font-weight: 600; color: var(--lavender); }

/* Research: persona + competitive landscape */
.ps-research-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.ps-persona { position: relative; flex: 1 1 460px; max-width: 507px; min-width: 0; }
.ps-persona__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
.ps-persona__title {
  position: absolute; left: 52.27%; top: 48px; width: 242px; max-width: 47.73%;
  font-size: 1.25rem; font-weight: 700; color: var(--lavender); line-height: 1.25; overflow-wrap: break-word;
}
.ps-persona__traits {
  position: absolute; left: 58.58%; top: 142px; width: 41.42%; min-width: 160px;
  display: flex; flex-direction: column; gap: 16px;
}
.ps-persona__trait { display: flex; gap: 8px; align-items: center; }
.ps-persona__icon { width: 24px; height: 24px; flex-shrink: 0; }
.ps-persona__trait span { font-size: 0.875rem; font-weight: 300; color: var(--lavender); line-height: 1.25; }

.ps-competitive { flex: 1 1 460px; max-width: 510px; min-width: 0; }
.ps-competitive__intro { font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.25; margin-bottom: 24px; }
.ps-competitive__intro strong { font-weight: 700; color: var(--lavender); }
.ps-competitive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ps-competitive-card {
  background: rgba(185, 153, 240, 0.1); border-radius: 32px; padding: 20px; min-width: 0;
  display: flex; flex-direction: column; gap: 16px; justify-content: center; min-height: 206px;
}
.ps-competitive-card__head { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ps-competitive-card__icon { width: 24px; height: 24px; flex-shrink: 0; }
.ps-competitive-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.25; margin: 0; min-width: 0; overflow-wrap: break-word; }
.ps-competitive-card p { font-size: 0.875rem; font-weight: 300; color: var(--lavender); line-height: 1.25; margin: 0; overflow-wrap: break-word; }
.ps-competitive-card p strong { font-weight: 700; color: var(--lavender); }

/* Opportunity flow */
.ps-opportunity__title { max-width: 863px; }
.ps-opportunity-row { position: relative; margin: 56px auto 0; max-width: 988px; min-height: 190px; }
.ps-opportunity-point {
  position: absolute; top: 0; width: 12.55%; /* 124px / 988px */
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ps-opportunity-point--1 { left: 0%; }
.ps-opportunity-point--2 { left: 21.86%; }
.ps-opportunity-point--3 { left: 43.73%; }
.ps-opportunity-point--4 { left: 65.68%; }
.ps-opportunity-point--5 { left: 87.44%; }
.ps-opportunity-point__circle {
  position: relative; width: 100%; height: 0; padding-bottom: 100%;
  border-radius: 50%; background: rgba(185, 153, 240, 0.15); flex-shrink: 0;
}
.ps-opportunity-point__circle img {
  position: absolute; top: 50%; left: 50%; width: 45.16%; height: 45.16%; transform: translate(-50%, -50%);
}
.ps-opportunity-point span { font-size: 1.25rem; font-weight: 300; color: var(--lavender); text-align: center; line-height: 1.25; white-space: nowrap; }
.ps-opportunity-line { position: absolute; width: 7.56%; height: 10.6667px; top: 56.67px; }
.ps-opportunity-line--1 { left: 13.53%; }
.ps-opportunity-line--2 { left: 35.29%; }
.ps-opportunity-line--3 { left: 57.15%; }
.ps-opportunity-line--4 { left: 79.12%; }

/* Solution wide wrapper for Point 1 & 2 (Figma frame breaks out wider than standard container) */
.ps-point1 { margin-top: 40px; }
.ps-point2 { margin-top: 80px; }
.ps-point3 { margin-top: 80px; }
.ps-point__title { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 41px; }
.ps-point3 .ps-point__title { margin-bottom: 0; }

/* Point 1: Information Architecture diagram */
.ps-ia {
  position: relative; margin: 0 auto; width: 100%; max-width: 1100px;
  aspect-ratio: 1100.5 / 685;
}
.ps-ia__connectors { position: absolute; left: 0; top: 17.08%; width: 100%; height: 78.91%; }
.ps-ia__label { position: absolute; font-size: 1.25rem; font-weight: 700; color: var(--white); white-space: nowrap; }
.ps-ia__label--first { left: 50%; top: 0; transform: translateX(-50%); }
.ps-ia__label--returning { left: 27.71%; top: 31.39%; }
.ps-ia__node {
  position: absolute; width: 18.36%; min-height: 10.51%; box-sizing: border-box;
  background: rgba(185, 153, 240, 0.2); border: 1px solid var(--lavender); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; padding: 8px 16px;
}
.ps-ia__node p { font-size: 1rem; font-weight: 300; color: var(--lavender); text-align: center; line-height: 1.25; margin: 0; overflow-wrap: break-word; }
.ps-ia__node--signup    { left: 40.80%; top: 6.57%; }
.ps-ia__node--connect   { left: 40.80%; top: 19.42%; }
.ps-ia__node--myprofile { left: 1.18%;  top: 38.10%; }
.ps-ia__node--compare   { left: 20.99%; top: 38.10%; }
.ps-ia__node--home      { left: 40.80%; top: 38.10%; }
.ps-ia__node--quiz      { left: 60.60%; top: 38.10%; }
.ps-ia__node--settings  { left: 80.42%; top: 38.10%; }
.ps-ia__node--favrep      { left: 1.18%;  top: 50.95%; }
.ps-ia__node--compresults { left: 20.99%; top: 50.95%; }
.ps-ia__node--article     { left: 40.80%; top: 50.95%; }
.ps-ia__node--quizresults { left: 60.60%; top: 50.95%; }
.ps-ia__node--alerts      { left: 80.42%; top: 50.95%; }
.ps-ia__node--favbills { left: 1.18%;  top: 63.80%; }
.ps-ia__node--rep1     { left: 20.99%; top: 63.80%; }
.ps-ia__node--rep2     { left: 40.80%; top: 63.80%; }
.ps-ia__node--rep3     { left: 60.60%; top: 63.80%; }
.ps-ia__node--personalinfo { left: 80.42%; top: 63.80%; }
.ps-ia__node--rep4          { left: 1.18%;  top: 76.64%; }
.ps-ia__node--homebillspage { left: 40.80%; top: 76.64%; }
.ps-ia__node--rateus    { left: 80.42%; top: 76.64%; }
.ps-ia__node--billspage { left: 1.18%;  top: 89.49%; }
.ps-ia__node--contactus { left: 80.42%; top: 89.49%; }

/* Point 2: Early Concepts — frame breaks out beyond the standard container
   (left -7.63%, total width 116.22% of container) and the caption box
   overlaps the bottom of the images by design. */
.ps-concepts-wide {
  position: relative; margin: 75px 0 0 -7.63%; width: 116.22%;
  aspect-ratio: 1218 / 893;
}
.ps-concepts { position: absolute; left: 0; top: 0; width: 100%; height: 80.52%; }
.ps-concepts__img { position: absolute; top: 0; height: 100%; border-radius: 16px; display: block; object-fit: cover; }
.ps-concepts__img--1 { left: 2.79%; width: 31.28%; }
.ps-concepts__img--2 { left: 35.38%; width: 29.15%; }
.ps-concepts__img--3 { left: 65.85%; width: 30.54%; }
.ps-concepts__box {
  position: absolute; left: 0; top: 68.87%; width: 100%; height: 31.13%;
  background: rgba(185, 153, 240, 0.1); border-radius: 16px;
}
.ps-concepts__col {
  position: absolute; top: 43.17%; width: 22.99%; transform: translateX(-50%);
  text-align: center;
}
.ps-concepts__col--1 { left: 18.47%; }
.ps-concepts__col--2 { left: 50%; }
.ps-concepts__col--3 { left: 81.12%; }
.ps-concepts__col p { font-size: 1rem; font-weight: 300; color: var(--lavender); line-height: 1.25; margin: 0; }
.ps-concepts__col p strong { font-size: 1.25rem; font-weight: 700; color: var(--white); }

/* Point 3: feature deep-dives — each block is a fixed-aspect canvas;
   the soft box stays at its own Figma height while images may overflow it. */
.ps-feature { position: relative; width: 100%; }
.ps-feature--bills { margin-top: 24px; }
.ps-feature--comparison { margin-top: -125px; z-index: 1; }
.ps-feature--quiz { margin-top: 38px; }
.ps-feature--rep { margin-top: -34px; z-index: 1; }
.ps-feature__box { position: absolute; left: 0; width: 100%; background: rgba(185, 153, 240, 0.1); border-radius: 16px; z-index: 0; }
.ps-feature__text { position: absolute; z-index: 1; max-width: 468px; box-sizing: border-box; overflow-wrap: break-word; }
.ps-feature__text p { font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.25; margin: 0; }
.ps-feature__text strong { font-weight: 700; color: var(--white); }
.ps-feature__img-crop { position: absolute; z-index: 1; border-radius: 16px; overflow: hidden; }
.ps-feature__img-crop img { position: absolute; max-width: none; display: block; }

.ps-feature--bills { aspect-ratio: 1040 / 498; }
.ps-feature--bills .ps-feature__box { top: 6.02%; height: 55.82%; }
.ps-feature--bills .ps-feature__text { left: 3.85%; top: 14.26%; width: 45%; }
.ps-feature--bills .ps-feature__imgs { position: absolute; left: 51.83%; top: 0; width: 46.54%; height: 100%; display: flex; gap: 0.96%; }
.ps-feature--bills .ps-feature__img-crop { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 237 / 498; }

.ps-feature--comparison { aspect-ratio: 1040 / 465; }
.ps-feature--comparison .ps-feature__box { top: 30.54%; height: 69.46%; }
.ps-feature--comparison .ps-feature__img-crop--single { left: 3.85%; top: 0; width: 41.25%; aspect-ratio: 429 / 450; }
.ps-feature--comparison .ps-feature__text { left: 50.67%; top: 38.71%; width: 45.4%; }

.ps-feature--quiz { aspect-ratio: 1040 / 466; }
.ps-feature--quiz .ps-feature__box { top: 14.16%; height: 60.3%; }
.ps-feature--quiz .ps-feature__text { left: 3.85%; top: 22.96%; width: 45%; }
.ps-feature--quiz .ps-feature__img-crop--single { left: 50.48%; top: 0; width: 49.52%; aspect-ratio: 523 / 466; }

.ps-feature--rep { aspect-ratio: 1040 / 400; }
.ps-feature--rep .ps-feature__box { top: 18%; height: 73.25%; }
.ps-feature--rep .ps-feature__img-crop--single { left: 2.21%; top: 0; width: 45%; aspect-ratio: 468 / 400; }
.ps-feature--rep .ps-feature__text { left: 50.67%; top: 26.5%; width: 45.4%; }

/* Closing */
.ps-closing__title { max-width: 934px; margin: 0 auto 40px; text-align: center; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--white); line-height: 1.25; }
.ps-closing__img { display: block; width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; }

@media (max-width: 900px) {
  .ps-ia__node p { font-size: 0.75rem; }
  .ps-ia__node { padding: 4px 2px; }
  .ps-opportunity-row {
    position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; min-height: 0;
  }
  .ps-opportunity-line { display: none; }
  .ps-opportunity-point {
    position: static; width: 124px;
  }
  .ps-opportunity-point span { white-space: normal; }
  .ps-feature__text { font-size: 0.875rem; padding: 16px; }
  .ps-feature {
    display: flex; flex-direction: column; aspect-ratio: auto; margin-top: 32px; z-index: auto;
  }
  .ps-feature--bills:first-child { margin-top: 0; }
  .ps-feature__box { display: none; }
  .ps-feature__text {
    position: static; max-width: none; width: 100% !important; order: 2;
    background: rgba(185, 153, 240, 0.1); border-radius: 16px; padding: 24px; margin-top: 16px; box-sizing: border-box;
  }
  .ps-feature__imgs { position: static !important; width: 100% !important; height: auto !important; order: 1; }
  .ps-feature__img-crop {
    position: relative !important; width: 100% !important; height: auto !important;
    top: auto !important; left: auto !important; order: 1;
  }
  .ps-feature--bills .ps-feature__img-crop { aspect-ratio: 237 / 498; }
  .ps-feature--comparison .ps-feature__img-crop--single { aspect-ratio: 429 / 450; }
  .ps-feature--quiz .ps-feature__img-crop--single { aspect-ratio: 523 / 466; }
  .ps-feature--rep .ps-feature__img-crop--single { aspect-ratio: 468 / 400; }
  .ps-concepts-wide { margin: 40px 0 0; width: 100%; aspect-ratio: auto; }
  .ps-concepts { position: static; display: flex; flex-direction: column; gap: 16px; height: auto; }
  .ps-concepts__img { position: static; width: 100%; height: auto; aspect-ratio: 381 / 719; }
  .ps-concepts__box {
    position: static; width: 100%; height: auto; display: flex; flex-direction: column; margin-top: 16px;
  }
  .ps-concepts__col {
    position: static; width: 100%; transform: none; padding: 24px; text-align: left;
  }
  .ps-competitive-grid { grid-template-columns: 1fr; }
  .ps-persona { display: flex; flex-direction: column; }
  .ps-persona__img { aspect-ratio: 1 / 1; }
  .ps-persona__title { position: static; width: auto; max-width: none; margin-top: 16px; }
  .ps-persona__traits { position: static; width: auto; min-width: 0; margin-top: 12px; }
  .ps-problem-card { flex-basis: 100%; max-width: 332px; }
}

/* Mobile-only connector artwork (shown ≤768px) */
.ps-opportunity-line-m,
.ps-ia__connectors--m { display: none; }

/* ---- Politics. Sorted. mobile, matched to the Figma mobile frame
        (393px, node 679:510). Placed after the generic ≤768/≤900 blocks
        so these rules win. ---- */
@media (max-width: 768px) {

  /* Hero: 439x247 image overhanging the screen (27px left / 19px right),
     navy strip overlaps the image bottom by 8px */
  .page-politics .project-hero__img {
    width: calc(100% + 46px);
    margin: 0 -19px 0 -27px;
    border-radius: 12.8px 12.8px 0 0;
    box-shadow: 1.6px -3.2px 12.8px 6.4px #0a1c46;
  }
  .page-politics .project-hero__stats {
    grid-template-columns: 52.4% 47.6%;
    margin-top: -8px;
    padding: 21px 20px 20px;
  }
  .page-politics .project-hero__stat-label { text-transform: uppercase; }

  /* Body copy runs at 14px on mobile (base ps rules set 20px) */
  .ps-problem__body,
  .ps-research__intro,
  .ps-solution__intro,
  .ps-point__intro,
  .ps-competitive__intro { font-size: 14px; line-height: 1.3; }

  /* Problem cards: 332px centered, caption tucked into the gradient */
  .ps-problem-cards { margin-top: 32px; gap: 24px; }
  .ps-problem-card { margin: 0 auto; }
  .ps-problem-card__caption {
    position: relative;
    margin-top: -12px;
    padding: 0 16px 38px;
    font-size: 14px;
  }

  /* Research: persona keeps its overlay layout at phone scale */
  .ps-research-row { margin-top: 28px; gap: 24px; }
  .ps-persona__title { position: absolute; left: 52.7%; top: 33px; width: 167px; max-width: none; margin: 0; font-size: 14px; }
  .ps-persona__traits { position: absolute; left: 58.8%; top: 99px; width: 41.5%; min-width: 0; margin: 0; gap: 11px; }
  .ps-persona__icon { width: 17px; height: 17px; }
  .ps-persona__trait span { font-size: 10px; }

  /* Competitive landscape: 2x2 grid of compact cards */
  .ps-competitive__intro { margin-bottom: 16px; }
  .ps-competitive-grid { grid-template-columns: 1fr 1fr; gap: 11px 17px; }
  .ps-competitive-card { min-height: 143px; padding: 14px; border-radius: 22px; gap: 11px; }
  .ps-competitive-card__icon { width: 17px; height: 17px; }
  .ps-competitive-card h3 { font-size: 12px; }
  .ps-competitive-card p { font-size: 10px; }

  /* Opportunity: fixed 353px zig-zag canvas with connector lines */
  .ps-opportunity-row {
    position: relative; display: block;
    width: 353px; max-width: 100%; height: 326px; min-height: 0;
    margin: 16px auto 0;
  }
  .ps-opportunity-point { position: absolute; width: 87px; gap: 11px; }
  .ps-opportunity-point--1 { left: -1px; top: 0; }
  .ps-opportunity-point--2 { left: 152px; top: 0; }
  .ps-opportunity-point--3 { left: 266px; top: 65px; }
  .ps-opportunity-point--4 { left: 153px; top: 196px; }
  .ps-opportunity-point--5 { left: -1px; top: 192px; }
  .ps-opportunity-point span { font-size: 14px; white-space: normal; margin: 0 -6px; }
  .ps-opportunity-line-m { display: block; position: absolute; }
  .ps-opportunity-line-m--1 { left: 94px; top: 40px; width: 52.3px; height: 7.5px; }
  .ps-opportunity-line-m--2 { left: 245px; top: 40px; width: 69.3px; height: 17.1px; }
  .ps-opportunity-line-m--3 { left: 94px; top: 239px; width: 52.3px; height: 7.5px; }
  .ps-opportunity-line-m--4 { left: 247px; top: 225px; width: 67.5px; height: 20.3px; }

  /* Solution rhythm */
  .ps-point1 { margin-top: 36px; }
  .ps-point2 { margin-top: 24px; }
  .ps-point3 { margin-top: 56px; }
  .ps-point__title { font-size: 14px; margin-bottom: 16px; }
  .ps-point3 .ps-point__title { margin-bottom: 24px; }

  /* Point 1: IA transposes — each desktop column becomes a row of
     small 8px nodes, with its own connector artwork */
  .ps-ia { width: 353px; max-width: 100%; height: 316px; margin: 0 auto; aspect-ratio: auto; }
  .ps-ia__connectors--d { display: none; }
  .ps-ia__connectors--m { display: block; left: 21px; top: 54px; width: 313.3px; height: 261.3px; }
  .ps-ia__label { font-size: 11.6px; }
  .ps-ia__label--first { left: 1px; top: 0; transform: none; }
  .ps-ia__label--returning { left: 25px; top: 101px; }
  .ps-ia__node { width: max-content; max-width: 78px; min-height: 31px; padding: 4px 6px; border-radius: 9.3px; border-width: 0.6px; }
  .ps-ia__node p { font-size: 7.5px; letter-spacing: -0.01em; }
  .ps-ia__node--signup,
  .ps-ia__node--connect,
  .ps-ia__node--myprofile,
  .ps-ia__node--compare,
  .ps-ia__node--home,
  .ps-ia__node--quiz,
  .ps-ia__node--settings { width: 64px; }
  .ps-ia__node--favrep { width: 77px; }
  .ps-ia__node--compresults { width: 62px; }
  .ps-ia__node--alerts { width: 71px; }
  .ps-ia__node--rep1,
  .ps-ia__node--rep2,
  .ps-ia__node--rep3,
  .ps-ia__node--rep4 { width: 82px; max-width: 82px; }
  .ps-ia__node--signup    { left: 1px;   top: 23px; }
  .ps-ia__node--connect   { left: 1px;   top: 62px; }
  .ps-ia__node--myprofile { left: 1px;   top: 124px; }
  .ps-ia__node--favrep    { left: 69px;  top: 124px; }
  .ps-ia__node--favbills  { left: 150px; top: 124px; }
  .ps-ia__node--rep4      { left: 216px; top: 124px; }
  .ps-ia__node--billspage { left: 303px; top: 124px; }
  .ps-ia__node--compare     { left: 1px;   top: 163px; }
  .ps-ia__node--compresults { left: 69px;  top: 163px; }
  .ps-ia__node--rep1        { left: 139px; top: 163px; }
  .ps-ia__node--home          { left: 1px;   top: 202px; }
  .ps-ia__node--article       { left: 69px;  top: 202px; }
  .ps-ia__node--rep2          { left: 138px; top: 202px; }
  .ps-ia__node--homebillspage { left: 224px; top: 202px; }
  .ps-ia__node--quiz        { left: 1px;   top: 241px; }
  .ps-ia__node--quizresults { left: 69px;  top: 241px; }
  .ps-ia__node--rep3        { left: 139px; top: 241px; }
  .ps-ia__node--settings     { left: 1px;   top: 280px; }
  .ps-ia__node--alerts       { left: 69px;  top: 280px; }
  .ps-ia__node--personalinfo { left: 142px; top: 280px; }
  .ps-ia__node--rateus       { left: 215px; top: 280px; }
  .ps-ia__node--contactus    { left: 266px; top: 280px; }

  /* Point 2: sketches interleave with their full-bleed caption boxes;
     each box slides up behind the bottom of its sketch */
  .ps-concepts-wide { display: flex; flex-direction: column; margin: 24px 0 0; width: auto; aspect-ratio: auto; }
  .ps-concepts,
  .ps-concepts__box { display: contents; }
  .ps-concepts__img {
    position: relative; z-index: 1; left: 0; top: 0;
    width: auto; height: 575px; aspect-ratio: auto;
    align-self: center; object-fit: contain;
  }
  .ps-concepts__img--1 { order: 1; }
  .ps-concepts__col--1 { order: 2; margin-top: -139px; padding-top: 155px; }
  .ps-concepts__img--2 { order: 3; margin-top: 24px; }
  .ps-concepts__col--2 { order: 4; margin-top: -127px; padding-top: 143px; }
  .ps-concepts__img--3 { order: 5; margin-top: 24px; }
  .ps-concepts__col--3 { order: 6; margin-top: -128px; padding-top: 144px; }
  .ps-concepts__col {
    position: relative; z-index: 0; left: 0 !important; top: 0;
    width: auto; height: 278px; transform: none;
    margin-left: -36px; margin-right: -36px;
    padding-left: 36px; padding-right: 36px; padding-bottom: 0;
    background: rgba(185, 153, 240, 0.1); border-radius: 16px;
    text-align: center; box-sizing: border-box;
  }
  .ps-concepts__col p { font-size: 14px; width: 280px; max-width: 100%; margin: 0 auto; }
  .ps-concepts__col--3 p { width: 250px; }
  .ps-concepts__col p strong { font-size: 16px; }

  /* Point 3: phone screens sit on top of full-bleed text boxes */
  .ps-feature--bills { margin-top: 0; }
  .ps-feature--comparison,
  .ps-feature--quiz,
  .ps-feature--rep { margin-top: 24px; }
  .ps-feature__text {
    width: calc(100% + 40px) !important;
    margin-left: -20px; margin-right: -20px;
    padding: 16px 20px 24px;
    position: relative; z-index: 0;
    left: auto !important; top: auto !important;
  }
  .ps-feature__text p { font-size: 14px; line-height: 1.3; }
  .ps-feature__imgs {
    position: relative !important; z-index: 1;
    display: flex; gap: 2px;
    width: calc(100% + 28px) !important;
    margin: 0 -14px;
    left: auto !important; top: auto !important;
  }
  .ps-feature__img-crop { position: relative !important; z-index: 1; }
  .ps-feature--bills .ps-feature__text { margin-top: -104px; padding-top: 110px; }
  .ps-feature--comparison .ps-feature__img-crop--single { width: 343px !important; max-width: 97%; margin: 0 auto; }
  .ps-feature--comparison .ps-feature__text { margin-top: -140px; padding-top: 156px; }
  .ps-feature--quiz .ps-feature__img-crop--single { width: calc(100% + 13px) !important; margin: 0 -6.5px; }
  .ps-feature--quiz .ps-feature__text { margin-top: -95px; padding-top: 111px; }
  .ps-feature--rep .ps-feature__img-crop--single { width: calc(100% + 21px) !important; margin: 0 -11px; }
  .ps-feature--rep .ps-feature__text { margin-top: -96px; padding-top: 112px; }

  /* Closing */
  .ps-closing__title { font-size: 24px; padding: 0 20px; margin-bottom: 36px; }
  .ps-closing__img {
    width: 100%; max-width: none;
    aspect-ratio: 393 / 233.5;
    object-fit: cover; object-position: 47% 100%;
  }
}

/* ==============================
   PROJECT PAGE — LOGOS & BRANDING
============================== */
.lb-tabnav { margin-top: 56px; }
.lb-tabnav__buttons { display: flex; gap: 24px; margin-top: 24px; }
.lb-tab-btn {
  flex: 1; height: 96px; min-width: 0;
  border-radius: 16px; background: rgba(185, 153, 240, 0.1);
  border: 1px solid transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0 16px; transition: border-color 0.25s ease; box-sizing: border-box;
}
.lb-tab-btn img { max-height: 45px; max-width: 100%; width: auto; object-fit: contain; }
.lb-tab-btn[data-tab="upmarketing"].is-active { border-color: #1680a7; }
.lb-tab-btn[data-tab="tianran"].is-active { border-color: #d61327; }
.lb-tab-btn[data-tab="lucasmuro"].is-active { border-color: #c0ff33; }
.lb-tab-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.lb-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(185, 153, 240, 0.3); transition: transform 0.3s ease, background 0.3s ease; }
.lb-tab-dot.is-active { background: var(--white); transform: scale(1.3); }

.lb-panel { display: none; }
.lb-panel.is-active { display: block; padding-bottom: 122px; }

.lb-hero { position: relative; margin-top: 108px; aspect-ratio: 1040 / 664; }
.lb-hero__img { position: absolute; top: 0; right: 0; width: 65.48%; height: 100%; border-radius: 32px; object-fit: cover; }
.lb-hero__card {
  position: absolute; left: 0; width: 52.69%; padding: 40px; border-radius: 16px;
  background: rgba(1, 12, 38, 0.5); backdrop-filter: blur(12px); border: 1px solid var(--lavender);
  box-sizing: border-box;
}
.lb-hero__card--offset-sm { top: 6.02%; }
.lb-hero__card--offset-lg { top: 34.94%; }
.lb-hero__name { font-size: 2.5rem; font-weight: 700; color: var(--white); margin-bottom: 8px; line-height: 1.25; }
.lb-hero__role { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 16px; line-height: 1.25; }
.lb-hero__desc { font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.25; }

.lb-card {
  margin-top: 40px; background: rgba(185, 153, 240, 0.1); border: 1px solid var(--lavender);
  border-radius: 16px; padding: 29px 40px 32px; box-sizing: border-box;
}
.lb-card-row { display: flex; gap: 24px; margin-top: 40px; }
.lb-card-row .lb-card { margin-top: 0; flex: 1 1 0; min-width: 0; height: 374px; overflow: hidden; }
.lb-card--blur { background: rgba(1, 12, 38, 0.7); backdrop-filter: blur(12px); padding: 25px 40px 40px; }
.lb-card--abs { position: relative; padding: 0; }
.lb-card__label {
  display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 16px;
}
.lb-card__desc { font-size: 1rem; font-weight: 300; color: var(--lavender); line-height: 1.25; max-width: 731px; }

.lb-suite__row { display: flex; margin-top: 40px; }
.lb-suite__col { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; gap: 16px; padding: 0 20px; }
.lb-suite__col:not(:first-child) { border-left: 1px solid rgba(185, 153, 240, 0.4); }
.lb-suite__col-icon { display: flex; align-items: center; justify-content: center; height: 140px; }
.lb-suite__col-icon img { object-fit: contain; max-width: 100%; max-height: 100%; }
.lb-suite__col h4 { font-size: 1.25rem; font-weight: 700; color: var(--white); }
.lb-suite__col p { font-size: 1rem; font-weight: 300; color: var(--lavender); line-height: 1.25; }

.lb-palette-row { min-height: 88px; border-radius: 8px; display: flex; }
.lb-palette-row + .lb-palette-row { margin-top: 16px; }
.lb-palette-swatch { flex: 1; min-width: 0; display: flex; align-items: flex-end; padding: 12px; font-size: 0.875rem; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-palette-swatch:first-child { border-radius: 8px 0 0 8px; }
.lb-palette-swatch:last-child { border-radius: 0 8px 8px 0; }
.lb-palette-row--gradient { margin-bottom: 16px; justify-content: flex-end; align-items: flex-end; padding: 12px; }
.lb-palette-row--gradient span { font-size: 0.875rem; font-weight: 300; color: #010c26; }

.lb-type-row { display: flex; margin-top: 24px; }
.lb-type-col { flex: 1; min-width: 0; padding: 0 24px; }
.lb-type-col:first-child { padding-left: 0; }
.lb-type-col:last-child { padding-right: 0; }
.lb-type-col:not(:first-child) { border-left: 1px solid rgba(185, 153, 240, 0.4); }
.lb-type-col h4 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.lb-type-sample-name { font-size: 1rem; color: var(--lavender); margin-bottom: 4px; }
.lb-type-sample-az { font-size: 0.875rem; color: var(--lavender); letter-spacing: 0.05em; line-height: 1.2; }

.lb-tile { position: relative; border-radius: 8px; overflow: hidden; background: rgba(185, 153, 240, 0.05); }
.lb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(3, 23, 69, 0) 0%, rgba(3, 23, 69, 0.85) 99%);
}
.lb-tile__label { position: absolute; left: 20px; bottom: 16px; font-size: 1rem; font-weight: 300; color: var(--white); z-index: 1; }
.lb-tile--bordered {
  border: 1px solid rgba(185, 153, 240, 0.5); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.lb-tile--bordered::after { content: none; }
.lb-tile--pattern::after {
  top: 0; bottom: auto;
  background: linear-gradient(to top, rgba(3, 23, 69, 0) 0%, rgba(3, 23, 69, 0.85) 99%);
}
.lb-tile--pattern .lb-tile__label { top: 12px; bottom: auto; left: 16px; }
.lb-tile--bordered img { width: auto; height: auto; max-width: 60%; max-height: 60%; object-fit: contain; }

.lb-apps { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.lb-apps__row { display: flex; gap: 24px; }
.lb-apps__row .lb-tile { flex: 1; min-width: 0; aspect-ratio: 466 / 349; }
.lb-apps__main { aspect-ratio: 952 / 534; }
.lb-apps__main--tall { aspect-ratio: 952 / 499; }

@media (min-width: 769px) and (max-width: 900px) {
  .lb-tabnav__buttons { flex-wrap: wrap; }
  .lb-tab-btn { flex: 1 1 100%; }
  .lb-hero { aspect-ratio: auto; height: auto; }
  .lb-hero__img { position: static; width: 100%; height: 280px; }
  .lb-hero__card { position: static; width: 100%; margin-top: 16px; }
  .lb-card-row { flex-direction: column; }
  .lb-suite__row { flex-direction: column; gap: 32px; }
  .lb-suite__col { border-left: none !important; padding: 0; }
  .lb-suite__col:not(:first-child) { border-top: 1px solid rgba(185, 153, 240, 0.4); padding-top: 24px; }
  .lb-palette-row { flex-wrap: wrap; height: auto; gap: 4px; }
  .lb-palette-swatch { flex: 1 1 50%; height: 60px; border-radius: 8px !important; }
  .lb-type-row { flex-direction: column; gap: 24px; }
  .lb-type-col { border-left: none !important; padding: 0 !important; }
  .lb-apps__row { flex-direction: column; }
}

/* ---- Logos & Branding mobile, matched to the Figma mobile frame
        (393px, nodes 685:1285 / 714:1697 / 716:1969). ---- */
@media (max-width: 768px) {

  /* Explore Projects: three 98x77 logo buttons in one row + dots */
  .lb-tabnav { margin-top: 84px; }
  .lb-tabnav__buttons { flex-wrap: nowrap; gap: 30px; margin-top: 16px; }
  .lb-tab-btn { flex: 1 1 0; height: 77px; padding: 0 7px; }
  .lb-tab-btn img { margin: 0 !important; }
  .lb-tab-btn[data-tab="upmarketing"] img + img { display: none; }
  /* Figma crops the lockup to its left 37% — the lotus mark only */
  .lb-tab-btn[data-tab="tianran"] img {
    width: 81px; height: 32px; max-height: none;
    object-fit: cover; object-position: 0 50%;
  }
  .lb-tab-btn[data-tab="lucasmuro"] img {
    width: 45px !important; height: 65px !important; max-height: none;
    object-fit: cover; object-position: 100% 50%;
  }
  .lb-tab-dots { margin-top: 16px; }

  /* Hero: intro card first, full-bleed image slides up behind it,
     and the Logo Suite card overlaps the image bottom */
  .lb-hero { display: flex; flex-direction: column; margin-top: 56px; aspect-ratio: auto; height: auto; }
  .lb-hero__card {
    position: relative; z-index: 1; order: -1;
    width: 100%; margin-top: 0; padding: 36px 40px;
  }
  .lb-hero__img {
    position: relative; z-index: 0; order: 1;
    width: calc(100% + 40px); max-width: none; margin: -90px -20px 0;
    height: 378px; border-radius: 18px;
  }
  .lb-panel[data-panel="lucasmuro"] .lb-hero__img { height: 372px; border-radius: 32px; margin-top: -86px; }
  .lb-hero__name { font-size: 24px; }
  .lb-hero__role { font-size: 14px; }
  .lb-hero__desc { font-size: 14px; }
  .lb-panel[data-panel="tianran"] .lb-hero__role { margin-bottom: 30px; }

  /* Cards: 32px rhythm, 20px shell padding, text inset to 40px */
  .lb-card { margin-top: 32px; padding: 24px 20px 32px; }
  .lb-card-row { flex-direction: column; margin-top: 32px; gap: 32px; }
  .lb-card-row .lb-card { height: auto; overflow: visible; }
  .lb-card__label { font-size: 14px; margin: 0 20px 16px; }
  .lb-card__desc { font-size: 14px; margin-left: 20px; margin-right: 20px; }
  .lb-card--blur {
    position: relative; z-index: 1;
    margin-top: -56px !important; padding: 25px 20px 32px;
  }
  .lb-card--blur > .lb-card__label { margin: 0 2px 16px; }

  /* Logo Suite: 2x2 grid with a center divider */
  .lb-suite__row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 0; margin: 40px 2px 0; }
  .lb-suite__col { border: none !important; padding: 0 14px 0 0; gap: 12px; }
  .lb-suite__col:nth-child(even) { border-left: 1px solid rgba(185, 153, 240, 0.4) !important; padding: 0 0 0 18px; }
  .lb-suite__col-icon { height: 72px; flex-wrap: wrap; }
  /* webp logos keep their intrinsic ratio when auto-sized; the svg
     icons stretch (100%/100% + preserveAspectRatio=none), so they
     get explicit mobile sizes instead */
  .lb-suite__col-icon img[src*=".webp"] { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; }
  .lb-suite__col-icon img[src*="wordmark"] { height: 20px !important; }
  .lb-suite__col-icon img[src*="lb-um-suite-icon-1"] { width: 57px !important; height: 44px !important; }
  .lb-suite__col-icon img[src*="lb-um-suite-icon-3"] { width: 93px !important; height: 72px !important; }
  .lb-suite__col-icon img[src*="lb-um-suite-icon-4"] { width: 56px !important; height: 64px !important; }
  .lb-suite__col-icon img[src*="logomark-sm-group"] { width: 64px !important; height: 64px !important; }
  .lb-suite__col h4 { font-size: 14px; }
  .lb-suite__col p { font-size: 12px; }

  /* Color palette: single-row strips, hex labels inside */
  .lb-palette-row { flex-wrap: nowrap; gap: 0; min-height: 0; height: 60px; margin-left: 13px; margin-right: 13px; border-radius: 6px; }
  .lb-palette-row + .lb-palette-row { margin-top: 8px; }
  .lb-palette-swatch { flex: 1 1 0; height: auto; font-size: 12px; padding: 10px; border-radius: 0; }
  .lb-palette-swatch:first-child { border-radius: 6px 0 0 6px; }
  .lb-palette-swatch:last-child { border-radius: 0 6px 6px 0; }
  .lb-panel[data-panel="tianran"] .lb-palette-row { height: 128px !important; }
  .lb-panel[data-panel="upmarketing"] .lb-palette-swatch { font-size: 10px; padding: 8px; }
  .lb-palette-row--gradient { margin-bottom: 8px; }
  .lb-palette-row--gradient span { font-size: 12px; }

  /* Typography (flow cards): columns stack, 14px samples */
  .lb-type-row { flex-direction: column; gap: 24px; margin: 24px 20px 0 !important; }
  .lb-type-col { border-left: none !important; padding: 0 !important; }
  .lb-type-col .lb-card__desc { margin-left: 0; margin-right: 0; }
  .lb-type-sample-name, .lb-type-sample-az { font-size: 14px !important; }

  /* Absolutely-positioned cards (Tian Ran typography + supporting
     elements) restack as a flexbox column */
  .lb-card--abs { display: flex; flex-direction: column; padding: 24px 20px 32px; }
  .lb-card--abs > * { position: static !important; width: auto !important; }
  .lb-card--abs > .lb-card__label { margin: 0 20px 16px !important; order: 1; }
  .lb-card--abs > .lb-card__desc { margin: 0 20px !important; order: 2; }
  .lb-type-divider { display: none !important; }
  .lb-type-h { order: 3; margin: 32px 20px 0 !important; font-size: 14px !important; }
  .lb-type-h--secondary { order: 5; }
  .lb-type-sample { order: 4; margin: 8px 20px 0 !important; }
  .lb-type-sample--secondary { order: 6; }
  .lb-type-sample--secondary p { font-size: 20px !important; letter-spacing: 2px !important; line-height: 1.1 !important; }
  .lb-card--abs .lb-tile--bordered {
    position: relative !important; top: auto !important; left: auto !important; order: 3;
    width: 185px !important; height: 131px !important;
    margin: 24px auto 0 !important; gap: 2px !important;
  }
  .lb-card--abs .lb-tile--bordered p { line-height: 1.3; }
  .lb-card--abs .lb-tile--bordered img { width: 53px !important; height: 64px !important; margin: auto !important; }
  .lb-card--abs .lb-tile--pattern {
    position: relative !important; top: auto !important; left: auto !important; order: 4;
    width: 273px !important; height: 163px !important;
    margin: 24px auto 0 !important;
  }
  /* Pattern crops: the inline stretch percentages are tuned to the
     desktop tile shapes and distort at 273x163 — re-crop keeping the
     image's own aspect ratio (height set, width auto) */
  .lb-card--abs .lb-tile--pattern img {
    height: 178% !important; width: auto !important;
    left: -22% !important; top: -21% !important;
  }
  .lb-panel[data-panel="upmarketing"] .lb-tile--pattern img {
    height: 250% !important; width: auto !important;
    left: -25% !important; top: -40% !important;
  }

  /* Supporting elements (UpMarketing flow card) */
  .lb-support-split { flex-direction: column; gap: 24px; }
  .lb-support-mark { align-self: center; }
  .lb-tile--pattern { aspect-ratio: auto !important; width: 273px; height: 163px; margin: 24px auto 0 !important; }

  /* Brand applications: 322x349 tiles stacked inside a 16px shell */
  .lb-card--apps { padding: 24px 16px 16px; }
  .lb-card--apps > .lb-card__label { margin: 0 24px 16px; }
  .lb-card--apps > .lb-card__desc { margin-left: 24px; margin-right: 24px; }
  .lb-apps { margin-top: 24px; gap: 24px; }
  .lb-apps__row { flex-direction: column; gap: 24px; }
  .lb-apps .lb-tile { aspect-ratio: 322 / 349 !important; }
  .lb-apps .lb-tile__label { left: 37px; bottom: 22px; font-size: 14px; }

  .lb-panel.is-active { padding-bottom: 56px; }
}

/* ==============================
   PROJECT PAGE — HENRY STEWART TALKS
============================== */
.page-hst .project-header { padding-top: 210px; }

.hst-client-logo { display: block; width: 360px; height: auto; margin-bottom: 48px; }

.hst-title {
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 1038px;
}

.hst-meta { display: flex; gap: 72px; margin-top: 36px; }
.hst-meta__item {
  display: flex;
  gap: 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.hst-meta__label { color: var(--lavender); text-transform: uppercase; }

/* Hero — rounded at the top only, sitting on a deep drop shadow */
.hst-hero { padding-top: 46px; }
.hst-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 2px -4px 16px 8px #0a1c46;
}

/* Intro */
.hst-intro { padding-top: 74px; }
.hst-intro__body { display: flex; flex-direction: column; gap: 24px; }
.hst-intro__body p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 300;
  color: var(--lavender);
}
.hst-intro__lead { font-size: 1.5rem !important; font-weight: 800 !important; }

/* The main challenge */
.hst-challenge { padding-top: 96px; }
.hst-challenge .section-header { margin-bottom: 28px; }
.hst-challenge .section-header h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.hst-challenge__body {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 300;
  color: var(--lavender);
  max-width: 1027px;
}

.hst-challenge__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 58px;
}
.hst-challenge-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 138px;
  padding: 42px 24px;
  border-radius: var(--radius-xl);
  background: var(--lavender-soft-bg);
  color: var(--teal);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: background var(--trans), transform var(--trans);
}
.hst-challenge-card:hover { background: var(--lavender-pill-bg); transform: translateY(-5px); }

/* ---- Approach points ----------------------------------------------------
   The watermark overflows its head box upward by roughly 70-135px depending on
   the word, so this padding covers that overflow plus the 54-99px Figma leaves
   between the previous block and the top of the word. */
.hst-point { padding-top: 175px; }

/* Each point is introduced by an outsized word sitting behind the headline.
   The two overlap deliberately: the headline is centred on the word's
   midline, not stacked under it. --wm-size is set per point so every word
   spans a similar width, as drawn; Figma leads the word at 1.5x its size. */
/* The head box is sized by the headline alone — the watermark is absolutely
   positioned and overflows it top and bottom, exactly as in Figma. Giving the
   box the word's full height instead would push everything below it down by
   roughly 100px. */
.hst-point__head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hst-point__watermark {
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
  z-index: 0;
  font-family: 'Bungee', var(--font-display);
  font-size: var(--wm-size, clamp(72px, 14vw, 200px));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* Sized per word so each spans a similar width, matching the Figma frame.
   These must be classes: the point sections are the 4th-7th <section> on the
   page, so :nth-of-type() counts the wrong siblings and never matches. */
.hst-point--clarity    { --wm-size: clamp(72px, 15.3vw, 220px); }
.hst-point--impact     { --wm-size: clamp(80px, 17.6vw, 253px); }
.hst-point--strategy   { --wm-size: clamp(62px, 13.5vw, 194px); }
.hst-point--creativity { --wm-size: clamp(50px, 10.9vw, 157px); }

.hst-point__head > .hst-point__title,
.hst-point__head > .hst-point__intro { position: relative; z-index: 1; }

.hst-point__title {
  margin: 0;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 430px;
}
.hst-point__title--gradient { max-width: none; }

.hst-point__intro {
  margin: 12px 0 0;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 300;
  color: var(--lavender);
}

/* Headline left, framing sentence right */
@media (min-width: 901px) {
  /* Same two columns as the slides below, so the framing sentence lines up
     with the "after" slide and matches its width. */
  .hst-point__head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6.88%;
    align-items: center;
    align-content: center;
  }
  .hst-point__intro { margin-top: 0; }
  .hst-point--creativity .hst-point__head { grid-template-columns: 1fr; }
}

.hst-point__wide {
  position: relative;
  z-index: 1;
  margin: 68px 0 0;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 300;
  color: var(--lavender);
}

/* Shares the before/after column grid, so the Insight and Approach columns sit
   directly above their own slide and match its width. Figma puts these 99px
   below the headline; they deliberately overlap the tail of the watermark, so
   they need to sit above it in the paint order. */
.hst-point__cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 6.88%;
  row-gap: 42px;
  margin-top: 90px;
}
.hst-point__col {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 300;
  color: var(--lavender);
}
.hst-point__col strong { display: block; margin-bottom: 14px; font-weight: 800; }

/* ---- Before / after rows ----------------------------------------------- */
.hst-ba-list { display: flex; flex-direction: column; gap: 40px; margin-top: 56px; }

/* Two equal slides with the chevron floated over the seam — it deliberately
   overlaps both by ~40px rather than sitting in the gap between them.
   Figma: slides 46.56% each, 6.88% apart, chevron 14.63% wide. */
.hst-ba {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 6.88%;
  align-items: center;
}
.hst-ba__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.hst-ba__img--after { background: var(--bg-deep); }
.hst-ba__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 14.63%;
  height: auto;
  aspect-ratio: 152.635 / 182.216;
}

/* ---- Creativity showcase marquee ---------------------------------------- */
.hst-marquee { margin-top: 90px; }
.hst-marquee__row { overflow: hidden; }
.hst-marquee__row + .hst-marquee__row { margin-top: 24px; }

.hst-marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: hst-marquee-left 70s linear infinite;
}
.hst-marquee__row--reverse .hst-marquee__track { animation-name: hst-marquee-right; }
.hst-marquee:hover .hst-marquee__track { animation-play-state: paused; }

@keyframes hst-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}
@keyframes hst-marquee-right {
  from { transform: translateX(calc(-50% - 12px)); }
  to   { transform: translateX(0); }
}

.hst-marquee__slide {
  flex: 0 0 auto;
  width: 486px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Slides with a credit reveal it on hover; the marquee pauses at the same
   time, so the card is readable while the pointer is on it. */
.hst-marquee__slide--feature { position: relative; overflow: hidden; display: block; }
.hst-marquee__slide--feature > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hst-feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3, 23, 69, 0.75), var(--card-navy) 86%);
}
.hst-feature__scrim,
.hst-feature__body {
  opacity: 0;
  transition: opacity var(--trans);
}
.hst-marquee__slide--feature:hover .hst-feature__scrim,
.hst-marquee__slide--feature:hover .hst-feature__body,
.hst-marquee__slide--feature:focus-visible .hst-feature__scrim,
.hst-marquee__slide--feature:focus-visible .hst-feature__body { opacity: 1; }

/* Touch has no hover, so the card is shown permanently there instead */
@media (hover: none) {
  .hst-feature__scrim,
  .hst-feature__body { opacity: 1; }
}
.hst-feature__body {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hst-feature__title { font-size: 2rem; font-weight: 700; color: var(--white); line-height: 1.1; }
.hst-feature__meta { font-size: 1.25rem; font-weight: 300; color: var(--lavender); line-height: 1.35; }
.hst-feature__link { margin-top: 6px; font-size: 1rem; font-weight: 800; color: var(--teal); }

/* ---- Pull quote ---------------------------------------------------------
   Sits between the CREATIVITY description and the slide showcase. */
.hst-quote { padding-top: 54px; text-align: center; }
.hst-quote__text {
  margin: 0 auto;
  max-width: 1059px;
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}
.hst-quote__text + .hst-quote__text { margin-top: 30px; }

/* ---- Relevance in an AI reality ----------------------------------------- */
.hst-perspective { padding-top: 120px; padding-bottom: 96px; }
.hst-perspective__title {
  margin: 0 0 42px;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 700;
}
.hst-perspective__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 33px;
  align-items: start;
}
.hst-perspective__body { display: flex; flex-direction: column; gap: 18px; }
.hst-perspective__body p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 300;
  color: var(--lavender);
}
.hst-perspective__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 6.1px #020f2f;
}

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

/* ---- HSTalks responsive ------------------------------------------------- */
@media (max-width: 900px) {
  .hst-point__cols { grid-template-columns: 1fr; gap: 26px; }
  .hst-perspective__grid { grid-template-columns: 1fr; gap: 32px; }
  .hst-challenge__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .page-hst .project-header { padding-top: 120px; }
  .hst-client-logo { width: 210px; margin-bottom: 28px; }
  .hst-title { font-size: 28px; }
  .hst-meta { gap: 28px; margin-top: 24px; flex-wrap: wrap; }
  .hst-meta__item { font-size: 13px; gap: 10px; }

  .hst-hero { padding-top: 28px; }
  .hst-hero__img { border-radius: 10px 10px 0 0; box-shadow: 1px -2px 10px 4px #0a1c46; }

  .hst-intro { padding-top: 40px; }
  .hst-intro__body { gap: 16px; }
  .hst-intro__body p { font-size: 15px; line-height: 1.45; }
  .hst-intro__lead { font-size: 17px !important; }

  .hst-challenge { padding-top: 56px; }
  .hst-challenge__body { font-size: 15px; }
  .hst-challenge__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .hst-challenge-card { min-height: 88px; padding: 24px; font-size: 17px; }

  .hst-point { padding-top: 64px; }
  /* Driving --wm-size rather than font-size keeps min-height in step with it */
  .hst-point,
  .hst-point--creativity { --wm-size: 46px; }
  .hst-point__head { padding-top: 0; }
  .hst-point__watermark { left: 0; }
  .hst-point__title { font-size: 24px; max-width: none; }
  .hst-point__intro { font-size: 15px; margin-top: 10px; }
  .hst-point__wide { font-size: 16px; margin-top: 20px; }
  .hst-point__cols { margin-top: 34px; }
  .hst-point__col { font-size: 15px; }
  .hst-point__col strong { margin-bottom: 8px; }

  /* Before / after stacks, with the chevron back in flow and rotated to point
     downward — the overlap only makes sense side by side. */
  .hst-ba-list { gap: 28px; margin-top: 32px; }
  .hst-ba { grid-template-columns: 1fr; column-gap: 0; row-gap: 12px; justify-items: center; }
  .hst-ba__arrow {
    position: static;
    width: 34px;
    aspect-ratio: auto;
    transform: rotate(90deg);
  }

  .hst-marquee { margin-top: 40px; }
  .hst-marquee__row + .hst-marquee__row { margin-top: 14px; }
  .hst-marquee__track { gap: 14px; }
  .hst-marquee__slide { width: 260px; }
  .hst-feature__body { left: 20px; right: 20px; bottom: 18px; gap: 6px; }
  .hst-feature__title { font-size: 19px; }
  .hst-feature__meta { font-size: 13px; }
  .hst-feature__link { font-size: 13px; }

  .hst-quote { padding-top: 32px; }
  .hst-quote__text { font-size: 20px; }
  .hst-quote__text + .hst-quote__text { margin-top: 18px; }

  .hst-perspective { padding-top: 56px; padding-bottom: 56px; }
  .hst-perspective__title { font-size: 24px; margin-bottom: 24px; }
  .hst-perspective__body { gap: 14px; }
  .hst-perspective__body p { font-size: 15px; }
  .hst-perspective__visual img { border-radius: 11px; box-shadow: 0 11px 4.3px #020f2f; }
}