/* ============================================
   OLEO — Shared Styles
   ============================================ */

@font-face {
  font-family: 'Bogart';
  src: url('../fonts/Bogart-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* The trial Bogart file has no real digit glyphs (renders as a slashed-circle
     .notdef). Exclude U+0030–U+0039 so digits fall through to the serif fallback.
     Ranges below cover everything else we use: basic punctuation, A–Z/a–z,
     Latin supplement (incl. ×, →, em/en dashes, currency, math). */
  unicode-range:
    U+0020-002F, U+003A-007E,
    U+00A0-00FF, U+0100-024F,
    U+2010-205F, U+2070-2089,
    U+20A0-20CF, U+2100-214F,
    U+2190-21FF, U+2200-22FF;
}
@font-face {
  font-family: 'Mazzard';
  src: url('../fonts/Mazzard-L-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #e8e2d8;
  --cream-light: #f0ebe2;
  --ink: #0f1112;
  --ink-soft: #1a1d20;
  --blue: #5d71ff;
  --blue-dark: #4555e0;
  --orange: #d96935;
  --muted: #6b6b66;
  --line: rgba(15, 17, 18, 0.12);

  --font-display: 'Bogart', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Mazzard', -apple-system, 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container--narrow {
  max-width: 1040px;
}

/* ====== NAV ====== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 0;
}
.logo img {
  /* PNG is 500×500 with the wordmark occupying the center horizontal band
     and significant transparent padding above/below. object-fit: cover crops
     that padding so the wordmark itself reads at the right nav size. */
  width: 130px;
  height: 42px;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 900px) {
  .logo img { width: 108px; height: 36px; }
}
.nav__menu {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav__menu a {
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}
.nav__menu a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav__menu a:hover::after,
.nav__menu a.active::after { width: 100%; }

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}
.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ====== BUTTONS ====== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.78rem 1.5rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--cream);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--cream {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.btn--cream:hover {
  background: var(--blue);
  color: var(--cream);
  border-color: var(--blue);
}
.btn svg {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn:hover svg { transform: translateX(3px); }
/* Compact nav variant — slightly tighter padding so it sits naturally next to nav links */
.nav__menu .btn {
  padding: 0.7rem 1.35rem;
  font-size: 0.88rem;
}

/* ====== HERO ====== */
.hero {
  padding: 5rem 0 7rem;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-bottom: 2rem;
}

/* Refined underline — a thin animated line painted via pseudo-element.
   The legacy inline SVG inside .underlined is hidden via the rule below. */
.hero h1 .underlined,
.section__title .underlined,
.contact__heading .underlined,
.footer__heading .underlined,
.page-hero h1 .underlined {
  position: relative;
  display: inline-block;
  font-style: italic;
  padding-bottom: 0.06em;
}
.hero h1 .underlined::after,
.section__title .underlined::after,
.contact__heading .underlined::after,
.footer__heading .underlined::after,
.page-hero h1 .underlined::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: drawUnderline 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}
@keyframes drawUnderline {
  to { transform: scaleX(1); }
}
/* Hide all legacy brushstroke SVGs inside underlined spans */
.hero h1 .underlined svg,
.section__title .underlined svg,
.footer__heading .underlined svg,
.page-hero h1 .underlined svg,
.contact__heading .underlined svg {
  display: none;
}
/* Hide the heavy contact heading scribble entirely */
.contact__heading svg.scribble {
  display: none;
}
.hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 2rem;
  max-width: 36rem;
  color: var(--ink);
}
.hero__copy {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 32rem;
  color: var(--ink);
  margin-bottom: 2.5rem;
}
.hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 4.3;
  border-radius: 0 3rem 3rem 3rem;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
/* Bare variant: no panel, grid or accents — just the rolling reel,
   centred in the hero's right column on the page background. */
.hero__visual--bare {
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
}
.hero__visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 26% 22%, rgba(93, 113, 255, 0.28) 0%, transparent 52%),
    radial-gradient(circle at 82% 84%, rgba(217, 105, 53, 0.14) 0%, transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.hero__visual-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(232, 226, 216, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 226, 216, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 100%);
}
/* Subtle static brand-colour accent shapes — quiet, sit behind the stats */
.hero__accent {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.hero__accent--blue {
  top: 8%;
  right: 9%;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(140, 156, 255, 0.9), var(--blue) 72%);
  opacity: 0.4;
  filter: blur(1px);
}
.hero__accent--orange {
  bottom: 11%;
  right: 13%;
  width: 3rem;
  height: 3rem;
  border-radius: 0 0.9rem 0.9rem 0.9rem;
  background: var(--orange);
  opacity: 0.35;
  transform: rotate(-12deg);
}

/* Stats are the hero element — stacked, centered, large, with a count-up. */
.hero__stats {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.25rem;
  padding: clamp(2rem, 4vw, 3.25rem);
  color: var(--cream);
}
.hero__stat + .hero__stat {
  padding-top: 2.25rem;
  border-top: 1px solid rgba(232, 226, 216, 0.14);
}
.hero__stat-number {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6.5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.hero__stat-label {
  font-size: 0.95rem;
  opacity: 0.72;
  letter-spacing: 0.01em;
  line-height: 1.4;
  max-width: 19rem;
}

@media (max-width: 900px) {
  .hero__stat-number { font-size: clamp(3rem, 11vw, 4.5rem); }
}

/* hero__scribble removed — was reading as disconnected next to the CTAs */

/* ====== PAGE HERO (smaller hero for inner pages) ====== */
.page-hero {
  padding: 4rem 0 5rem;
  position: relative;
}
.page-hero__eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.25rem;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin-bottom: 1.75rem;
  max-width: 22ch;
}
.page-hero__copy {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 40rem;
  margin-bottom: 2rem;
}
.page-hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ====== SECTION ====== */
.section {
  padding: 7rem 0;
  position: relative;
}
.section--cream-light { background: var(--cream-light); }
.section--dark { background: var(--ink); color: var(--cream); }

.section__eyebrow {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin-bottom: 2.5rem;
  max-width: 18ch;
}
.section__intro {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 42rem;
  color: var(--ink);
  margin-bottom: 5rem;
}
.section--dark .section__intro { color: var(--cream); opacity: 0.85; }

/* ====== DIFFERENTIATOR CARDS ====== */
.diff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 5rem;
}
.diff-card {
  background: var(--cream);
  border-radius: 2rem;
  padding: 2.5rem 2rem 2rem;
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.diff-card:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-4px);
}
.diff-card__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diff-card__icon svg { width: 100%; height: 100%; }
.diff-card:hover .diff-card__icon .accent { fill: var(--blue); }
.diff-card:hover .diff-card__icon .line { stroke: var(--cream); }
.diff-card__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.diff-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: auto;
}
.diff-card__plus {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(15, 17, 18, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  transition: all 0.4s ease;
}
.diff-card:hover .diff-card__plus {
  background: var(--blue);
  transform: rotate(45deg);
}
.diff-card__plus svg path { stroke: var(--ink); transition: stroke 0.3s ease; }
.diff-card:hover .diff-card__plus svg path { stroke: var(--cream); }

.diff-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  flex-wrap: wrap;
}
.diff-footer__copy {
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 38rem;
}

/* ====== ACCORDION (dark) ====== */
.accordion {
  max-width: 56rem;
  margin: 4rem auto 0;
}
.accordion__item {
  border-bottom: 1px solid rgba(232, 226, 216, 0.25);
}
.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 0;
  cursor: pointer;
  transition: padding-left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--cream);
  user-select: none;
}
.accordion__header:hover { padding-left: 1.5rem; }
.accordion__arrow {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.accordion__item.open .accordion__arrow {
  transform: rotate(90deg);
}
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.accordion__body-inner {
  padding: 0.5rem 0 2.5rem;
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.85;
}
.accordion__body-inner p { margin-bottom: 1.5rem; }
.accordion__body-inner ul {
  columns: 2;
  list-style: none;
  margin-top: 1rem;
}
.accordion__body-inner ul li {
  padding: 0.4rem 0;
  position: relative;
  padding-left: 1.25rem;
  break-inside: avoid;
}
.accordion__body-inner ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue);
}

/* Light-themed FAQ accordion */
.accordion--light .accordion__item {
  border-bottom: 1px solid rgba(15, 17, 18, 0.18);
}
.accordion--light .accordion__header {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}
.accordion--light .accordion__arrow path {
  stroke: var(--ink) !important;
}
.accordion--light .accordion__body-inner {
  color: var(--ink);
  opacity: 0.85;
}

/* ====== CLIENT STRIP (static centered row) ====== */
.logo-strip {
  padding: 4.5rem 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-strip__label {
  text-align: center;
  font-family: 'Inter', var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2rem;
}
.logo-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3.5rem 5rem;
}
.logo-strip__item {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.3s ease;
  display: inline-flex;
  align-items: baseline;
  text-transform: none;
}
.logo-strip__item:hover { opacity: 1; }
.logo-strip__item span.brand-accent {
  color: var(--blue);
  margin-right: 0.5rem;
  font-size: 0.65em;
  transform: translateY(-0.18em);
  display: inline-block;
}

/* ====== CLIENT INTRO ====== */
.client-intro {
  padding: 5rem 0 2.5rem;
}
.client-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 70rem;
}

/* ====== CASE STUDIES ====== */
.cases {
  padding: 2rem 0 7rem;
}
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 7rem;
}
.case:nth-child(even) { direction: rtl; }
.case:nth-child(even) > * { direction: ltr; }
.case__visual {
  aspect-ratio: 4 / 5;
  border-radius: 0 2.5rem 2.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.case__visual--case-1 { background: linear-gradient(160deg, #2a2520 0%, #3d342a 100%); }
.case__visual--case-2 { background: linear-gradient(160deg, #1f2d24 0%, #2c4636 100%); }
.case__visual--case-3 { background: linear-gradient(160deg, #1b2540 0%, #2d3a5c 100%); }
.case__visual-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-family: var(--font-display);
}
.case__visual-mark {
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  opacity: 0.95;
  font-style: italic;
}
.case__visual-tag {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
}
.case__visual-stat {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  text-align: right;
  color: var(--cream);
}
.case__visual-stat .num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  line-height: 1;
}
.case__visual-stat .lbl {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.4rem;
}

.case__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.case__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.case__title em { font-style: italic; }
.case__copy {
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  color: var(--ink);
  max-width: 32rem;
}
.case__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.25rem;
  transition: all 0.3s ease;
}
.case__link:hover { color: var(--blue); border-color: var(--blue); gap: 1rem; }

/* ====== WORK GRID (for index) ====== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 3rem;
}
.work-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0 2rem 2rem 2rem;
  aspect-ratio: 5 / 6;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.work-card:hover { transform: translateY(-6px); }
.work-card__visual {
  position: absolute;
  inset: 0;
}
.work-card__content {
  position: absolute;
  inset: 0;
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--cream);
}
.work-card__tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}
.work-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.work-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 14ch;
}
.work-card__stat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  text-align: right;
}
.work-card__stat small {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.5rem;
}

/* ====== WHY OLEO ====== */
.why { padding: 7rem 0; }
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}
.why__item h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}
.why__item p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.why__icon {
  width: 3.5rem;
  height: 3.5rem;
}
.why__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 500;
  position: relative;
  padding-right: 2rem;
}
.why__link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: calc(100% - 2rem);
  height: 1px;
  background: var(--ink);
  transition: width 0.3s ease, background 0.3s ease;
}
.why__link:hover { color: var(--blue); }
.why__link:hover::before { background: var(--blue); width: calc(100% - 1.5rem); }
.why__link svg {
  position: absolute;
  right: 0.25rem;
  width: 1rem;
  transition: right 0.3s ease;
}
.why__link:hover svg { right: 0; }

/* ====== DELIVERABLES / PROCESS / NUMBERED LISTS ====== */
.deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 3rem;
  margin-top: 3rem;
}
.deliverables__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.section--dark .deliverables__item {
  border-bottom-color: rgba(232, 226, 216, 0.18);
}
.deliverables__item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.deliverables__item h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.deliverables__item p {
  font-size: 0.95rem;
  opacity: 0.8;
  line-height: 1.45;
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
.process__step {
  position: relative;
}
.process__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.process__step h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.process__step p {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.85;
}

/* Industries grid (Work page) */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.industry-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.75rem;
  background: rgba(15, 17, 18, 0.02);
  transition: background 0.25s ease, transform 0.25s ease;
}
.industry-card:hover {
  background: rgba(15, 17, 18, 0.05);
  transform: translateY(-2px);
}
.industry-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.industry-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.8;
}
@media (max-width: 800px) {
  .industries-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* ====== LOGO CAROUSELS (Work page) ======
   Infinite marquees. Each track holds the tile set twice so a -50%
   translate loops seamlessly. To swap a placeholder for a real logo,
   replace the inner <span class="logo-tile__placeholder">…</span> with
   <img src="assets/img/logos/your-logo.svg" alt="Brand name">. Keep the
   duplicate set ([data-dup]) in sync with the visible set. */
.logo-carousels { display: flex; flex-direction: column; gap: 2.75rem; margin-top: 3rem; }
.logo-carousel__label {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1rem;
}
.logo-carousel {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-carousel__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
}
.logo-carousel__track--ltr { animation: logoMarqueeLtr var(--speed, 40s) linear infinite; }
.logo-carousel__track--rtl { animation: logoMarqueeRtl var(--speed, 40s) linear infinite; }
.logo-carousel:hover .logo-carousel__track { animation-play-state: paused; }
@keyframes logoMarqueeLtr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes logoMarqueeRtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-tile {
  flex: 0 0 auto;
  width: 180px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 18, 0.03);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.5rem;
}
.logo-tile img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.logo-tile__placeholder {
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 17, 18, 0.35);
}
@media (max-width: 600px) {
  .logo-tile { width: 142px; height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-carousel { -webkit-mask-image: none; mask-image: none; }
  .logo-carousel__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .logo-carousel__track [data-dup] { display: none; }
}

/* ====== CREDIBILITY (paid ads capability) ====== */
.credibility {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}
.credibility__visual {
  aspect-ratio: 4 / 3;
  background: var(--cream-light);
  border: 1px solid rgba(232, 226, 216, 0.16);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}
.credibility__visual img {
  max-width: 80%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.credibility__logo-placeholder {
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.4;
  text-align: center;
  line-height: 1.7;
}
.credibility__copy p { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
.credibility__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.credibility__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.92;
}
.credibility__list svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.18rem; }
@media (max-width: 800px) {
  .credibility { grid-template-columns: 1fr; gap: 2rem; }
}

/* ====== TWO COLUMN INTRO ====== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.two-col__copy p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* ====== CONTACT ====== */
.contact {
  background: var(--cream-light);
  padding: 7rem 0 5rem;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
  position: relative;
}
.contact__heading svg.scribble {
  position: absolute;
  width: 30%;
  height: auto;
  bottom: -3rem;
  left: 0;
  pointer-events: none;
}
.contact__heading svg.scribble path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.contact__form { padding-top: 1rem; }
.contact__form label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.contact__form input,
.contact__form textarea,
.contact__form select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(15, 17, 18, 0.3);
  padding: 0.5rem 0 1.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  transition: border-color 0.3s ease;
  border-radius: 0;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder {
  color: rgba(15, 17, 18, 0.3);
}
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus {
  outline: none;
  border-color: var(--ink);
}
.contact__form textarea {
  resize: none;
  min-height: 4rem;
}
.contact__form select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%230f1112' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 1rem 1rem;
  padding-right: 2rem;
}

/* Contact details */
.contact-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}
.contact-details h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--blue);
}
.contact-details p, .contact-details a {
  font-size: 1.05rem;
  line-height: 1.55;
}
.contact-details a { border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.contact-details a:hover { color: var(--blue); border-color: var(--blue); }

.calendar-embed {
  margin-top: 4rem;
  padding: 2.5rem;
  background: var(--cream);
  border-radius: 4px;
  scroll-margin-top: 6rem; /* sticky-nav offset when scrolled via #book */
}
.calendar-embed__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
/* Calendly inline widget container — frame the iframe in a cream box that
   matches the surrounding card so the embed reads as part of the page.
   The Calendly iframe itself is themed via URL params (background_color,
   text_color, primary_color, hide_event_type_details, hide_gdpr_banner). */
.calendly-inline-widget {
  margin-top: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  /* Calendly's iframe is loaded by widget.js into this container. Forcing a
     transparent iframe gives the cream background underneath a chance to
     show through any white gutters Calendly leaves at the edges. */
}
.calendly-inline-widget iframe {
  background: transparent !important;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .calendly-inline-widget { min-height: 760px; }
}

/* Contact form, status messages */
.form-success,
.form-error {
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(15, 17, 18, 0.04);
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.form-success p,
.form-error p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
}
.form-success a,
.form-error a {
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}
.form-error {
  background: rgba(217, 105, 53, 0.08);
  border-color: rgba(217, 105, 53, 0.3);
}
.contact__form-btn-sending { font-style: italic; opacity: 0.85; }
.contact__form button[type="submit"]:disabled { opacity: 0.7; cursor: not-allowed; }

/* ====== TEAM ====== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 4rem;
}
.team-card {
  background: var(--cream);
  border-radius: 0 2rem 2rem 2rem;
  padding: 2.5rem;
}
.section--cream-light .team-card { background: var(--cream); }
.team-card__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.team-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}
.team-card__role {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.team-card p {
  font-size: 1rem;
  line-height: 1.55;
}

/* ====== VALUES ====== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
.value-card {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 0 1.5rem 1.5rem 1.5rem;
  transition: all 0.3s ease;
}
.value-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.value-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--blue);
  margin-bottom: 1rem;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.value-card p {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.85;
}

/* ====== CASE STUDY DETAIL ====== */
.cs-banner {
  position: relative;
  padding: 4rem 0 5rem;
  margin-bottom: 4rem;
  color: var(--cream);
  overflow: hidden;
  border-radius: 0 0 3rem 3rem;
}
.cs-banner--case-1 { background: linear-gradient(160deg, #2a2520 0%, #3d342a 100%); }
.cs-banner--case-2 { background: linear-gradient(160deg, #1f2d24 0%, #2c4636 100%); }
.cs-banner--case-3 { background: linear-gradient(160deg, #1b2540 0%, #2d3a5c 100%); }
.cs-banner__tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.5rem;
}
.cs-banner h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
  max-width: 18ch;
}
.cs-banner h1 em { font-style: italic; }
.cs-banner__copy {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 36rem;
  opacity: 0.85;
}

.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(232, 226, 216, 0.2);
}
.cs-meta__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.cs-meta__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
}

.cs-section {
  padding: 4rem 0;
}
.cs-section__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
}
.cs-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  position: sticky;
  top: 7rem;
}
.cs-section__copy p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.cs-section__copy ul {
  list-style: none;
  margin-top: 1.5rem;
}
.cs-section__copy ul li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  font-size: 1.05rem;
  line-height: 1.55;
}
.cs-section__copy ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue);
}

.cs-results {
  background: var(--cream-light);
  padding: 5rem 0;
}
.cs-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.cs-result {
  background: var(--cream);
  border-radius: 0 1.5rem 1.5rem 1.5rem;
  padding: 2.5rem 2rem;
}
.cs-result__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.cs-result__label {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
}

.cs-samples {
  padding: 5rem 0 7rem;
}
.cs-samples__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.cs-sample {
  aspect-ratio: 4 / 5;
  border-radius: 0 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
}
.cs-sample--1 { background: linear-gradient(160deg, #2a2520 0%, #5d71ff 200%); }
.cs-sample--2 { background: linear-gradient(160deg, #1f2d24 0%, #3d342a 100%); }
.cs-sample--3 { background: linear-gradient(160deg, #1b2540 0%, #d96935 200%); }
.cs-sample--4 { background: linear-gradient(160deg, #2c4636 0%, #5d71ff 200%); }
.cs-sample--5 { background: linear-gradient(160deg, #d96935 0%, #2a2520 100%); }
.cs-sample--6 { background: linear-gradient(160deg, #4555e0 0%, #1f2d24 100%); }
.cs-sample__label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
}

.cs-next {
  padding: 5rem 0 7rem;
}
.cs-next__inner {
  background: var(--ink);
  color: var(--cream);
  padding: 4rem 3rem;
  border-radius: 0 2.5rem 2.5rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.cs-next__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.cs-next__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* ====== FOOTER ====== */
footer.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 6rem 0 3rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 6rem;
}
.footer__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-bottom: 2.5rem;
}
.footer__heading em { font-style: italic; }
.footer__heading .underlined {
  position: relative;
  display: inline-block;
}
.footer__heading .underlined svg {
  position: absolute;
  left: -2%;
  bottom: -0.3em;
  width: 104%;
  height: 0.4em;
}
.footer__heading .underlined svg path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
}
.footer h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  color: rgba(232, 226, 216, 0.5);
  font-style: italic;
}
.footer__col ul {
  list-style: none;
}
.footer__col ul li { margin-bottom: 0.5rem; }
.footer__col ul a {
  font-size: 0.95rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.footer__col ul a:hover { opacity: 1; color: var(--blue); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(232, 226, 216, 0.15);
  font-size: 0.85rem;
  opacity: 0.6;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ====== MOBILE ====== */
@media (max-width: 900px) {
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 2rem 2rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav.open .nav__menu { display: flex; }
  .nav.open .nav__menu .btn { margin-top: 0.5rem; }
  .nav__toggle { display: flex; }

  .hero__grid, .case, .contact__grid, .footer__top, .why__grid, .diff-cards,
  .client-intro__grid, .work-grid, .process, .two-col, .deliverables,
  .cs-section__grid, .cs-results__grid, .cs-samples__grid, .cs-next__inner,
  .cs-meta, .team-grid, .values-grid, .contact-details {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero { padding: 3rem 0 5rem; }
  .page-hero { padding: 3rem 0 4rem; }
  .section { padding: 5rem 0; }
  .why { padding: 5rem 0; }
  .cases { padding: 0 0 4rem; }
  .case { margin-bottom: 4rem; }
  .case:nth-child(even) { direction: ltr; }
  .hero__scribble { display: none; }
  .accordion__header { font-size: 2rem; gap: 1rem; }
  .footer__top { gap: 2.5rem; }
  .footer__bottom { justify-content: flex-start; }
  .diff-card { min-height: 24rem; }
  .container { padding: 0 1.5rem; }
  .cs-section__title { position: static; }
  .accordion__body-inner ul { columns: 1; }
}

/* ============================================
   FORTEM PASS — editorial restraint overlay
   ============================================ */

/* Headings — Bogart, no synthesised italic (font is Regular-only). */
.hero h1,
.hero__subtitle,
.section__title,
.contact__heading,
.footer__heading,
.footer__heading em,
.diff-card__title,
.case__title,
.case__title em,
.case__visual-mark,
.cs-banner h1,
.cs-banner h1 em,
.cs-section__title,
.cs-result__num,
.cs-next__title,
.cs-next__title em,
.case__visual-stat .num,
.work-card__title,
.work-card__stat,
.team-card h3,
.team-card__avatar,
.value-card h3,
.value-card__num,
.process__step h3,
.process__num,
.calendar-embed__heading,
.page-hero h1,
.hero h1 .underlined,
.section__title .underlined,
.contact__heading .underlined,
.footer__heading .underlined,
.page-hero h1 .underlined,
.cs-meta__value,
.contact-details h4,
.why__item h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
}

/* Letter-spacing dial-in for the new face */
.hero h1, .page-hero h1, .section__title,
.cs-banner h1, .contact__heading {
  letter-spacing: -0.02em;
}

/* Mono caption / eyebrow system — the editorial clash against Bogart */
.section__eyebrow,
.page-hero__eyebrow,
.diff-card__eyebrow,
.case__eyebrow,
.cs-banner__tag,
.cs-meta__label,
.work-card__tag,
.cs-sample__label,
.cs-next__eyebrow,
.team-card__role,
.case__visual-tag,
.case__visual-stat .lbl,
.work-card__stat small,
.cs-result__label,
.hero__stat-label,
.footer__bottom,
.logo-strip__item,
.footer__col h4 {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-style: normal;
}
.section__eyebrow,
.page-hero__eyebrow,
.diff-card__eyebrow,
.case__eyebrow,
.cs-banner__tag,
.cs-next__eyebrow {
  font-size: 0.72rem;
}
.cs-meta__label,
.work-card__tag,
.cs-sample__label,
.team-card__role,
.case__visual-tag,
.case__visual-stat .lbl,
.work-card__stat small,
.cs-result__label,
.hero__stat-label,
.footer__bottom,
.footer__col h4 {
  font-size: 0.7rem;
  opacity: 0.7;
}
.footer__col h4 { opacity: 0.45; margin-bottom: 1.5rem; }

/* Logo strip items (kept for any future reuse) */
.logo-strip__item {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  text-transform: none;
  opacity: 0.55;
  font-weight: 400;
}
.logo-strip__item span.brand-accent {
  color: var(--blue);
  margin-right: 0.5rem;
}

/* Slightly tighter body leading for Mazzard Light at content sizes */
.hero__copy, .section__intro, .case__copy, .cs-banner__copy,
.cs-section__copy p, .cs-section__copy ul li,
.page-hero__copy, .two-col__copy p,
.diff-footer__copy, .team-card p, .value-card p,
.why__item p, .process__step p, .deliverables__item p,
.accordion__body-inner p, .accordion__body-inner ul li {
  font-family: var(--font-body);
  font-weight: 300;
}

/* Sharper corners — fortem-style restraint */
.diff-card,
.work-card,
.case__visual,
.hero__visual,
.cs-result,
.cs-sample,
.cs-next__inner,
.calendar-embed,
.calendar-embed__placeholder,
.team-card,
.value-card,
.cs-banner {
  border-radius: 4px;
}
.cs-banner { border-radius: 0 0 4px 4px; }

/* Form inputs use the body face — Bogart is reserved for headings only */
.contact__form input,
.contact__form textarea,
.contact__form select {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 300;
  font-size: 1.2rem;
}

/* ====== CUSTOM SELECT ====== */
.custom-select {
  position: relative;
  margin-bottom: 2rem;
}
.custom-select__trigger {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(15, 17, 18, 0.3);
  padding: 0.5rem 0 1.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--ink);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.3s ease;
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
}
.custom-select__trigger:hover { border-color: var(--ink); }
.custom-select__trigger:focus,
.custom-select.open .custom-select__trigger {
  outline: none;
  border-color: var(--ink);
}
.custom-select__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__value--placeholder { color: rgba(15, 17, 18, 0.45); }
.custom-select__arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.custom-select.open .custom-select__arrow {
  transform: rotate(180deg);
}
.custom-select__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0.35rem;
  list-style: none;
  margin: 0;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-height: 18rem;
  overflow-y: auto;
}
.custom-select.open .custom-select__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.custom-select__option {
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.18s ease, color 0.18s ease;
  outline: none;
  list-style: none;
}
.custom-select__option:hover,
.custom-select__option:focus,
.custom-select__option.active {
  background: var(--ink);
  color: var(--cream);
}
.custom-select__option.selected {
  background: var(--ink);
  color: var(--cream);
}

/* Section heading subtle spacing */
.section__title { margin-bottom: 3rem; }

/* Hero stat numbers: cleaner spacing */
.hero__stat-number,
.cs-result__num,
.work-card__stat,
.case__visual-stat .num,
.cs-meta__value {
  letter-spacing: -0.015em;
}

/* Logo overrides moved into base .logo above (now an SVG image) */

/* Nav links in body face — quieter so headings can sing */
.nav__menu a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* Mono on buttons — small tracking adjustment */
.btn { letter-spacing: 0.01em; }

/* Page hero spacing */
.page-hero__eyebrow { margin-bottom: 1.5rem; }
.page-hero h1 { margin-bottom: 1.75rem; }

/* Tighten case-study meta labels */
.cs-meta__value { font-size: 1.15rem; font-weight: 400; }
.cs-meta__label { margin-bottom: 0.6rem; opacity: 0.55; }

/* Diff card title — bigger, no italic */
.diff-card__title {
  font-size: 1.95rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Subtle border on case visuals so dark blocks read as "tiles" not floating colour */
.case__visual,
.work-card,
.hero__visual,
.cs-banner {
  border: 1px solid rgba(15, 17, 18, 0.08);
}
.section--dark .case__visual,
.cs-banner { border-color: rgba(232, 226, 216, 0.08); }

/* ============================================
   WORK CARDS — interactive hover (flair + CTA highlight)
   ============================================ */
.work-card {
  position: relative;
  transition:
    transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.work-card[href]:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -16px rgba(15, 17, 18, 0.18);
}

/* Spark flair top-right on hover, echoing the nav link mechanic */
.work-card__flair {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
  transform-origin: 60% 60%;
  transition:
    opacity 0.25s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}
.work-card__flair svg { width: 100%; height: 100%; display: block; overflow: visible; }
.work-card__flair svg line {
  stroke: var(--blue);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset 0.4s ease 0.06s;
}
.work-card[href]:hover .work-card__flair {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.work-card[href]:hover .work-card__flair svg line {
  stroke-dashoffset: 0;
}

/* "Read case study" CTA — colour, underline, arrow slide on hover */
.work-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  position: relative;
  color: var(--cream);
  transition: color 0.25s ease;
}
.work-card__cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.work-card__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.work-card[href]:hover .work-card__cta { color: var(--blue); }
.work-card[href]:hover .work-card__cta::after { transform: scaleX(1); }
.work-card[href]:hover .work-card__cta svg { transform: translateX(4px); }

/* ============================================
   NEWSLETTER (dark-section subscribe form)
   ============================================ */
.newsletter-wrap { text-align: center; }
/* The Pop bottom — balanced, centered vertical rhythm */
.newsletter-wrap .cs-next__eyebrow { margin-bottom: 0.85rem; }
.newsletter-wrap .cs-next__title { margin: 0 auto 1rem; max-width: 30rem; }
.newsletter-wrap .newsletter-copy { margin-top: 0; margin-bottom: 1.85rem; }
.newsletter-copy {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 36rem;
  margin: 1.25rem auto 2rem;
}
.newsletter-form {
  display: flex;
  gap: 0.6rem;
  max-width: 28rem;
  margin: 0 auto;
}
.newsletter-form input[type="email"] {
  flex: 1;
  background: rgba(232, 226, 216, 0.07);
  border: 1px solid rgba(232, 226, 216, 0.22);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(232, 226, 216, 0.48); }
.newsletter-form input[type="email"]:focus {
  border-color: var(--cream);
  background: rgba(232, 226, 216, 0.13);
}
.newsletter-form .btn {
  flex-shrink: 0;
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.newsletter-form .btn:hover {
  background: var(--blue);
  color: var(--cream);
  border-color: var(--blue);
}
.newsletter-wrap .form-success,
.newsletter-wrap .form-error {
  margin: 1.5rem auto 0;
  max-width: 32rem;
  background: rgba(232, 226, 216, 0.07);
  border-color: rgba(232, 226, 216, 0.18);
  color: var(--cream);
  text-align: left;
}
.newsletter-wrap .form-success h3 { color: var(--cream); }
@media (max-width: 600px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form input[type="email"] { padding: 0.95rem 1.25rem; }
}

/* Visually hidden helper (form labels we hide for design but keep for screen readers) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   ARTICLE PAGE (Spark blog posts)
   ============================================ */
.article {
  padding: 0 0 5rem;
  font-size: 1.13rem;
  line-height: 1.72;
}
.article__body {
  max-width: 38rem;
  margin: 0 auto;
}
.article__body p { margin-bottom: 1.5rem; }
.article__body p:first-child { font-size: 1.22rem; line-height: 1.6; opacity: 0.95; }
.article__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  letter-spacing: -0.02em;
  margin: 2.75rem 0 1rem;
  line-height: 1.2;
}
.article__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.6rem;
}
.article__body ul,
.article__body ol {
  margin: 0 0 1.5rem 1.5rem;
}
.article__body li { margin-bottom: 0.55rem; }
.article__body blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
}
.article__body a {
  color: var(--blue);
  border-bottom: 1px solid rgba(93, 113, 255, 0.4);
  transition: border-color 0.2s ease;
}
.article__body a:hover { border-color: var(--blue); }
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2rem;
}
.article__back:hover { opacity: 1; color: var(--blue); }
.article__back svg { width: 0.85rem; height: 0.85rem; transform: rotate(180deg); }

/* ============================================
   NAV — button underline suppression + The Pop flair
   ============================================ */

/* The "Book a call" CTA inside the nav is also an <a>, so it was picking up
   the underline pseudo-element. Suppress it on the button specifically. */
.nav__menu a.btn::after { display: none; }

/* "The Pop" nav link — sparkle flair on hover instead of an underline,
   echoing the blue spark marks on the Oleo wordmark. */
.nav__menu a.nav__pop {
  position: relative;
}
.nav__menu a.nav__pop::after { display: none; } /* no underline */
.nav__menu a.nav__pop:hover { color: var(--blue); }

.nav__pop-flair {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4) rotate(-25deg);
  transform-origin: 60% 60%;
  transition:
    opacity 0.2s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav__pop-flair svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nav__pop-flair svg line {
  stroke: var(--blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  transition: stroke-dashoffset 0.35s ease 0.05s;
}
.nav__menu a.nav__pop:hover .nav__pop-flair {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.nav__menu a.nav__pop:hover .nav__pop-flair svg line {
  stroke-dashoffset: 0;
}

/* ============================================
   THE POP — split hero (text left, graphic right)
   ============================================ */
.page-hero--split .page-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.page-hero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.page-hero__media img {
  width: 100%;
  max-width: 28rem;
  height: auto;
  display: block;
  /* Subtle floating idle motion so the graphic doesn't read as static */
  animation: popFloat 7s ease-in-out infinite;
}
@keyframes popFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}
/* Placeholder-only variant (no image yet) */
.page-hero__media--placeholder {
  min-height: 26rem;
  background: rgba(15, 17, 18, 0.04);
  border: 1px dashed rgba(15, 17, 18, 0.18);
  border-radius: 6px;
  color: rgba(15, 17, 18, 0.42);
  font-family: 'Inter', var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.page-hero__media--placeholder span { max-width: 12rem; line-height: 1.5; }
@media (max-width: 900px) {
  .page-hero--split .page-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .page-hero__media { padding: 0.5rem; }
  .page-hero__media img { max-width: 18rem; margin: 0 auto; }
  .page-hero__media--placeholder { min-height: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__media img { animation: none; }
}

/* ============================================
   THE SPARK — blog index
   ============================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.post-card {
  display: block;
  background: rgba(15, 17, 18, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.25rem;
  color: var(--ink);
  transition: background 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}
.post-card:hover { background: rgba(15, 17, 18, 0.07); transform: translateY(-2px); }
.post-card__meta {
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 1.25rem;
}
.post-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 1rem;
  font-weight: 400;
}
.post-card__excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.55;
  opacity: 0.85;
}
.post-card__read {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--blue);
}
.post-card__read svg { width: 0.9rem; height: 0.9rem; transition: transform 0.25s ease; }
.post-card:hover .post-card__read svg { transform: translateX(3px); }
@media (max-width: 800px) {
  .posts-grid { grid-template-columns: 1fr; }
}

/* The Spark nav link — lightning bolt flair (similar mechanic to The Pop,
   different shape so each link has its own visual identity). */
.nav__menu a.nav__spark {
  position: relative;
}
.nav__menu a.nav__spark::after { display: none; }
.nav__menu a.nav__spark:hover { color: var(--blue); }
.nav__spark-flair {
  position: absolute;
  top: -11px;
  right: -8px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px) scale(0.6) rotate(-12deg);
  transition:
    opacity 0.2s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav__spark-flair svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nav__spark-flair svg path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.45s ease 0.05s;
}
.nav__menu a.nav__spark:hover .nav__spark-flair {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}
.nav__menu a.nav__spark:hover .nav__spark-flair svg path {
  stroke-dashoffset: 0;
}

/* ============================================
   THE SPARK — hero flair cluster (decorative)
   A field of twinkling sparks filling the right side of the hero,
   echoing the nav spark style. Each spark scales + fades on its own
   stagger. Purely decorative (aria-hidden); frozen under reduced motion.
   ============================================ */
.spark-cluster {
  position: relative;
  width: 100%;
  min-height: 24rem;
  align-self: stretch;
}
.spark-cluster__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  color: var(--spark-color, var(--blue));
  opacity: 0.18;
  transform: scale(0.7);
  animation: sparkTwinkle var(--dur, 3.4s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.spark-cluster__item svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}
.spark-cluster__item--burst svg { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.spark-cluster__item--lead {
  filter: drop-shadow(0 0 14px rgba(93, 113, 255, 0.35));
}
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.16; transform: scale(0.65) rotate(-6deg); }
  50%      { opacity: 1;    transform: scale(1) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spark-cluster__item {
    animation: none;
    opacity: 0.7;
    transform: scale(0.92);
  }
}
@media (max-width: 900px) {
  .spark-cluster { min-height: 14rem; max-width: 22rem; margin: 0 auto; }
}

/* ============================================
   THE POP — culture page gallery placeholders
   ============================================ */
.pop-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 14rem;
  gap: 1.25rem;
  margin-top: 3rem;
}
.pop-gallery__tile {
  background: rgba(15, 17, 18, 0.06);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 17, 18, 0.45);
  font-family: 'Inter', var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  grid-column: span 2;
  transition: background 0.3s ease, color 0.3s ease;
}
.pop-gallery__tile:hover {
  background: rgba(15, 17, 18, 0.1);
  color: rgba(15, 17, 18, 0.7);
}
.pop-gallery__tile--lg { grid-column: span 4; grid-row: span 2; }
.pop-gallery__tile--wide { grid-column: span 6; }
@media (max-width: 900px) {
  .pop-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 11rem; }
  .pop-gallery__tile,
  .pop-gallery__tile--lg,
  .pop-gallery__tile--wide { grid-column: span 2; grid-row: auto; }
}

/* Footer logo */
.footer__logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 1.5rem;
}
.footer__logo img {
  width: 110px;
  height: 36px;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Inverted PNG sits on the dark footer — invert to cream for visibility */
  filter: invert(1) brightness(1.08);
}

/* ============================================
   CUSTOM CURSOR (desktop only)
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor textarea,
  body.has-custom-cursor select,
  body.has-custom-cursor .custom-select__trigger,
  body.has-custom-cursor .custom-select__option,
  body.has-custom-cursor .accordion__header,
  body.has-custom-cursor [role="button"] {
    cursor: none;
  }
  /* Keep text caret on actual text-entry controls so users know they can type */
  body.has-custom-cursor input[type="text"],
  body.has-custom-cursor input[type="email"],
  body.has-custom-cursor textarea {
    cursor: text;
  }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, width, height, background;
    transition:
      width 0.25s cubic-bezier(0.65, 0, 0.35, 1),
      height 0.25s cubic-bezier(0.65, 0, 0.35, 1),
      margin 0.25s cubic-bezier(0.65, 0, 0.35, 1),
      background 0.25s ease,
      opacity 0.25s ease;
    opacity: 0;
  }
  .cursor.is-visible { opacity: 1; }
  .cursor.is-hover {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    background: var(--blue);
    opacity: 0.55;
  }
  .cursor.is-dark { background: var(--cream); }
  .cursor.is-dark.is-hover { background: var(--blue); }
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}

/* Lenis smooth scroll hooks */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================
   FRIENDLIER CORNERS — soften case cards & logo tiles
   (overrides the earlier fortem 4px restraint for these elements)
   ============================================ */
.work-card { border-radius: 1.5rem; }
.case__visual { border-radius: 1.5rem; }
.logo-tile { border-radius: 1rem; }
.credibility__visual { border-radius: 1.25rem; }

/* ============================================
   HOMEPAGE — equestrian case horse graphic (clickable, pop on hover)
   ============================================ */
.case__horse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64%;
  max-width: 270px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.case__horse img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(15, 17, 18, 0.25));
}
.case__horse:hover { transform: scale(1.05) rotate(-2deg); }
.case__horse-flair {
  position: absolute;
  top: 2%;
  right: 4%;
  width: 46px;
  height: 46px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.5) rotate(-14deg);
  transition:
    opacity 0.2s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.case__horse-flair svg { width: 100%; height: 100%; display: block; overflow: visible; }
.case__horse-flair svg line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.45s ease 0.06s;
}
.case__horse:hover .case__horse-flair {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}
.case__horse:hover .case__horse-flair svg line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .case__horse, .case__horse:hover { transform: none; }
  .case__horse-flair { transition: opacity 0.2s ease; transform: none; }
  .case__horse:hover .case__horse-flair svg line { transition: none; }
}


/* ============================================
   HERO PANEL — rolling service reel (slot-machine)
   A vertical reel cycles service names inside the dark hero panel.
   Pure CSS: the list translates up one item at a time, holding on
   each, with a duplicate first item at the end so the loop is
   seamless. aria-hidden on the reel; a visually-hidden full list
   announces the real services to screen readers. Reduced-motion
   users see the first service, static.
   ============================================ */
.hero__reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  padding: 1rem;
  text-align: center;
}
.hero__reel-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.85;
}
.reel {
  display: inline-block;
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  color: var(--blue);
}
.reel--hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -0.025em;
  max-width: 100%;
}
.reel__list {
  display: flex;
  flex-direction: column;
  animation: reelRoll6 13s cubic-bezier(0.76, 0, 0.24, 1) infinite;
  will-change: transform;
}
.reel__item {
  height: 1.2em;
  line-height: 1.2em;
  white-space: nowrap;
}
/* 6 services + 1 duplicate first item = 7 rows; each row is 100/7%. */
@keyframes reelRoll6 {
  0%, 13%        { transform: translateY(0); }
  16.67%, 30%    { transform: translateY(-14.2857%); }
  33.33%, 46.67% { transform: translateY(-28.5714%); }
  50%, 63.33%    { transform: translateY(-42.8571%); }
  66.67%, 80%    { transform: translateY(-57.1429%); }
  83.33%, 96.67% { transform: translateY(-71.4286%); }
  100%           { transform: translateY(-85.7143%); }
}
@media (prefers-reduced-motion: reduce) {
  .reel__list { animation: none; transform: translateY(0); }
}