/* Good Tech Studio — Editorial theme (orange-primary, magenta on CTA only) */

:root {
  --paper: #F5F4F0;
  --paper-2: #ECEAE3;
  --paper-3: #E4E1D8;
  --ink: #0E0E0C;
  --ink-soft: #45433E;
  --ink-mid: #8A8780;

  /* Brand accent */
  --orange: #FF3D00;
  --orange-soft: #FF6A36;

  /* Reserved for the CTA "Got an idea?" wow moment */
  --magenta: #FF5BB0;
  --violet:  #6A4BFF;

  /* Hero gradient — orange family */
  --grad-hero: linear-gradient(95deg, #FF3D00 0%, #FF7A33 55%, #FFA85B 100%);
}

body.theme-editorial {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Hero (compact) ---------- */
.hero {
  padding: clamp(120px, 16vh, 160px) var(--gutter) clamp(32px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.hero__inner { max-width: var(--max-w); margin-inline: auto; }
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  max-width: 26ch;
}
.hero__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--orange);
}
.hero__title .grad {
  color: var(--orange);
}
.hero__title .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: -0.02em;
  color: var(--orange);
  vertical-align: 0.06em;
}
.hero__lede {
  font-size: clamp(16px, 1.4vw, 20px);
  max-width: 54ch;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out-expo), background var(--dur-fast), color var(--dur-fast);
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { transform: translateY(-2px); background: var(--orange); color: var(--ink); }
.btn--ghost {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn__arrow { transition: transform var(--dur-med) var(--ease-out-expo); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Floating AI badge */
.hero__badge {
  position: absolute;
  top: clamp(140px, 22vh, 220px);
  right: var(--gutter);
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  border-radius: 14px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  rotate: 4deg;
  animation: float 6s ease-in-out infinite;
}
.hero__badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--orange) 22%, transparent);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (max-width: 880px) {
  .hero__badge { display: none; }
}

/* ======================================================================
   TRANSFORM SECTION — headline + scrolling logo marquee + service tiles
   ====================================================================== */
.transform {
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 10vw, 100px);
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  background: var(--paper);
}
.transform__head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 6vw, 80px);
}
.transform__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(36px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  max-width: 22ch;
  margin-bottom: 24px;
}
.transform__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.transform__sublead {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* Logo marquee — uses the shared .marquee + .marquee__track infra */
.transform__logos {
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  margin-bottom: clamp(48px, 7vw, 96px);
}
.transform__logos .marquee__track {
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.transform__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  opacity: 0.7;
  transition: opacity 220ms var(--ease-out-expo);
}
.transform__logo .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.transform__logo:hover { opacity: 1; }
.transform__logo--img img {
  display: block;
  height: clamp(24px, 2.4vw, 36px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.4) contrast(1.1);
  transition: filter 220ms var(--ease-out-expo);
}
.transform__logo--img:hover img { filter: none; }

/* Service tiles grid */
.transform__services {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.service-tile {
  padding: clamp(28px, 3vw, 44px);
  border-right: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background 240ms var(--ease-out-expo);
  cursor: default;
}
.service-tile:hover { background: var(--paper-2); }
.service-tile__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 8px;
}
.service-tile__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.service-tile__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.service-tile__desc {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 32ch;
}
.service-tile__arrow {
  position: absolute;
  top: clamp(20px, 2vw, 32px);
  right: clamp(20px, 2vw, 32px);
  font-family: var(--font-mono);
  color: var(--orange);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 220ms var(--ease-out-expo), transform 220ms var(--ease-out-expo);
}
.service-tile:hover .service-tile__arrow {
  opacity: 1;
  transform: none;
}

@media (max-width: 960px) {
  .transform__services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .transform__services { grid-template-columns: 1fr; }
}

/* ---------- Section heading ---------- */
.section { padding: clamp(80px, 12vw, 160px) var(--gutter); }
.section__head {
  max-width: var(--max-w);
  margin: 0 auto clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
}
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.section__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  max-width: 18ch;
}
.section__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.section__aside {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 32ch;
}

/* ======================================================================
   WORK — Editorial Index with cursor-following preview
   ====================================================================== */
.work-index {
  max-width: var(--max-w);
  margin-inline: auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  position: relative;
  cursor: none; /* hide native cursor on touch-capable + hover devices */
}
@media (hover: none) {
  .work-index { cursor: auto; }
}

.work-index__row {
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  position: relative;
  overflow: hidden;
}
.work-index__row > a {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(28px, 3.6vw, 56px) clamp(8px, 1.4vw, 24px);
  color: var(--ink);
  transition: padding var(--dur-med) var(--ease-out-expo);
}
.work-index__row > a:hover {
  padding-left: clamp(20px, 3vw, 48px);
}
.work-index__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  transition: color var(--dur-med) var(--ease-out-expo);
}
.work-index__title {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  transition: color var(--dur-med) var(--ease-out-expo);
}
.work-index__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.work-index__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: color var(--dur-med) var(--ease-out-expo);
}
.work-index__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-out-expo), color var(--dur-med);
  color: var(--orange);
}

/* Hover state — orange title, CTA fades in */
.work-index__row:hover .work-index__title { color: var(--orange); }
.work-index__row:hover .work-index__num   { color: var(--ink); }
.work-index__row:hover .work-index__cta   { opacity: 1; transform: none; }

/* Sliding underline accent on hover (subtle) */
.work-index__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out-expo);
}
.work-index__row:hover::after { transform: scaleX(1); }

@media (max-width: 880px) {
  .work-index__row > a {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 20px;
    padding-block: 28px;
  }
  .work-index__num { grid-row: 1; grid-column: 1; }
  .work-index__title { grid-row: 1; grid-column: 2; font-size: clamp(22px, 6vw, 32px); }
  .work-index__meta { grid-row: 2; grid-column: 2; }
  .work-index__cta { display: none; }
}

/* ---------- Floating cursor preview ---------- */
.work-preview {
  --x: 50vw;
  --y: 50vh;
  --scale: 0.85;
  position: fixed;
  top: 0; left: 0;
  width: clamp(240px, 22vw, 380px);
  aspect-ratio: 4/3;
  border-radius: var(--rad-lg);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%) scale(var(--scale));
  transition: opacity 220ms var(--ease-out-expo), --scale 380ms var(--ease-out-expo);
  z-index: 40;
  background: var(--paper-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 8px 22px rgba(0,0,0,0.10);
  will-change: transform, opacity;
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.work-preview.is-visible {
  --scale: 1;
  opacity: 1;
}
/* Each project's image is its own background-positioned layer */
.work-preview__img {
  position: absolute;
  inset: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-color: var(--paper-2);
  opacity: 0;
  transition: opacity 280ms var(--ease-out-expo);
}
.work-preview__img.is-current {
  opacity: 1;
  /* Auto-scroll the long page screenshot from top → bottom → top, looping */
  animation: work-preview-scroll 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes work-preview-scroll {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
/* Subtle frame chrome */
.work-preview::before {
  content: "● ● ●";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: color-mix(in oklab, var(--ink) 40%, transparent);
  background: color-mix(in oklab, var(--paper) 96%, transparent);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  z-index: 2;
}
.work-preview__img { top: 22px; } /* leave room for the chrome bar */

/* Close button: hidden on desktop, shown on mobile modal */
.work-preview__close {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 4;
  padding: 0;
}

/* Meta panel: hidden on desktop, shown on mobile modal */
.work-preview__meta {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 18px 16px;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--paper) 96%, transparent) 55%,
    transparent 100%);
  z-index: 3;
}
.work-preview__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.work-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
}

/* Backdrop (mobile modal only) */
.work-preview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out-expo);
}
.work-preview-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Touch / no-hover: turn preview into a centered tap-to-peek modal */
@media (hover: none) {
  .work-preview {
    width: min(86vw, 420px);
    aspect-ratio: 3/4;
    --x: 50vw;
    --y: 50vh;
    --scale: 0.92;
    pointer-events: none;
  }
  .work-preview.is-visible {
    --scale: 1;
    pointer-events: auto;
  }
  .work-preview__meta { display: flex; }
  .work-preview__close { display: inline-flex; }
}

/* "View all" cta */
.work__viewall {
  max-width: var(--max-w);
  margin: clamp(40px, 5vw, 80px) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* ---------- Capabilities ---------- */
.capabilities {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2vw, 32px);
}
.cap {
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: var(--rad-lg);
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 400ms var(--ease-out-expo), background 400ms;
}
.cap:hover {
  transform: translateY(-3px);
  background: var(--paper-3);
}
.cap__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: 24px;
}
.cap__title {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
  max-width: 14ch;
}
.cap__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.cap__desc {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 32ch;
  flex: 1;
}
.cap__tag {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* ---------- Process ---------- */
.process {
  max-width: var(--max-w);
  margin-inline: auto;
}
.process__row {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(28px, 3vw, 56px) 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  align-items: start;
}
.process__row:last-child { border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }
.process__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--orange);
}
.process__title {
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.process__desc {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
}
@media (max-width: 880px) {
  .process__row { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- CTA Book — magenta moment ---------- */
.cta-block {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(48px, 8vw, 120px);
  border-radius: var(--rad-xl);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 80% 20%, color-mix(in oklab, var(--magenta) 65%, transparent), transparent 55%),
    radial-gradient(ellipse at 20% 90%, color-mix(in oklab, var(--violet)  55%, transparent), transparent 55%);
  pointer-events: none;
  opacity: 0.9;
  filter: blur(8px);
}
.cta-block__inner { position: relative; z-index: 1; }
.cta-block__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  max-width: 16ch;
  margin-bottom: 24px;
}
.cta-block__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, var(--magenta), #FFB0A0);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Override the gradient when .accent-orange is added — solid orange that matches
   the wordmark's middle O */
.cta-block__title .serif.accent-orange {
  background: none;
  color: var(--accent-orange);
  -webkit-text-fill-color: var(--accent-orange);
}
.cta-block__desc {
  font-size: clamp(15px, 1.4vw, 19px);
  opacity: 0.75;
  max-width: 48ch;
  margin-bottom: 40px;
}
.cta-block .btn--primary {
  background: var(--paper);
  color: var(--ink);
}
.cta-block .btn--primary:hover {
  background: var(--orange);
  color: var(--ink);
}

/* ======================================================================
   HERO REEL — auto-scrolling horizontal strip of all projects
   ====================================================================== */
.hero-reel {
  margin-top: clamp(40px, 6vw, 72px);
  /* Break out of hero gutter for true full-bleed */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.hero-reel__track {
  display: flex;
  gap: clamp(16px, 1.4vw, 24px);
  width: max-content;
  animation: hero-reel-scroll 70s linear infinite;
  will-change: transform;
}
.hero-reel:hover .hero-reel__track {
  animation-play-state: paused;
}
@keyframes hero-reel-scroll {
  to { transform: translateX(-50%); }
}

.hero-reel__card {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 320px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--rad-lg);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms;
}
.hero-reel__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* Desktop chrome bar — mac-style three dots */
.hero-reel__chrome {
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  flex: 0 0 auto;
}
.hero-reel__chrome > i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
}

/* Variable shape (page length) */
.hero-reel__card[data-shape="short"]  .hero-reel__media { aspect-ratio: 16/10; }
.hero-reel__card[data-shape="medium"] .hero-reel__media { aspect-ratio: 4/5;  }
.hero-reel__card[data-shape="long"]   .hero-reel__media { aspect-ratio: 4/7;  }
.hero-reel__card[data-shape="xlong"]  .hero-reel__media { aspect-ratio: 4/10; }

/* Mobile card — narrower, phone bezel, no chrome bar */
.hero-reel__card[data-device="mobile"] {
  width: clamp(140px, 14vw, 200px);
  background: #0E0E0C;
  padding: 8px 8px 0;
  border-radius: 32px;
  border-color: #1c1c1a;
  overflow: hidden;
}
.hero-reel__card[data-device="mobile"] .hero-reel__chrome { display: none; }
.hero-reel__card[data-device="mobile"] .hero-reel__media {
  border-radius: 22px;
  aspect-ratio: 9/18;
}
.hero-reel__card[data-device="mobile"][data-shape="medium"] .hero-reel__media { aspect-ratio: 9/22; }
.hero-reel__card[data-device="mobile"][data-shape="long"]   .hero-reel__media { aspect-ratio: 9/26; }
.hero-reel__card[data-device="mobile"][data-shape="xlong"]  .hero-reel__media { aspect-ratio: 9/32; }
.hero-reel__card[data-device="mobile"] .hero-reel__meta {
  background: transparent;
  border-top: 0;
  color: #F5F4F0;
  padding: 12px 6px 12px;
}
.hero-reel__card[data-device="mobile"] .hero-reel__num,
.hero-reel__card[data-device="mobile"] .hero-reel__title { color: #F5F4F0; }
.hero-reel__card[data-device="mobile"] .hero-reel__cat   { color: #FF7A33; }
.hero-reel__media {
  aspect-ratio: 4/3;
  background-size: 100% auto;     /* image is 100% wide, height auto-scales */
  background-repeat: no-repeat;
  background-position: 0% 0%;     /* show top by default */
  background-color: var(--paper-2);
  position: relative;
  overflow: hidden;
  /* Slow pan to the bottom of the page screenshot on hover */
  transition: background-position 9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-reel__card:hover .hero-reel__media {
  background-position: 0% 100%;
}
/* Tiny "scroll" indicator pill that appears on hover */
.hero-reel__media::before {
  content: "↓ Preview";
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease-out-expo), transform 220ms var(--ease-out-expo);
}
.hero-reel__card:hover .hero-reel__media::before { opacity: 1; transform: none; }
.hero-reel__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.hero-reel__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.hero-reel__title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.hero-reel__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ======================================================================
   LOGO WALL — band with mock company wordmarks
   ====================================================================== */
.logo-wall {
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  background: var(--paper-2);
}
.logo-wall__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
}
.logo-wall__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  flex: 0 0 auto;
}
.logo-wall__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  flex: 1 1 auto;
  justify-content: center;
}
.logo-wall__item {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  opacity: 0.7;
  transition: opacity 220ms var(--ease-out-expo), color 220ms;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.logo-wall__item:hover { opacity: 1; color: var(--ink); }
.logo-wall__item .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
/* Image-based logos — sized to the row, monochromatic via filter, hover restores */
.logo-wall__item--img {
  opacity: 0.7;
}
.logo-wall__item--img img {
  display: block;
  height: clamp(20px, 2vw, 28px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.4) contrast(1.1);
  transition: filter 220ms var(--ease-out-expo);
}
.logo-wall__item--img:hover { opacity: 1; }
.logo-wall__item--img:hover img { filter: none; }

/* Mobile: row becomes a horizontal scroll strip so logos stay in one neat line */
@media (max-width: 720px) {
  .logo-wall__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .logo-wall__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin: 0 calc(var(--gutter) * -1);
    padding: 4px var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Edge fade hints there's more */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .logo-wall__row::-webkit-scrollbar { display: none; }
  .logo-wall__item { scroll-snap-align: start; }
}

/* ======================================================================
   TESTIMONIAL BAND
   ====================================================================== */
.testimonial {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
}
.testimonial__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.testimonial__mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.7;
  color: var(--orange);
  user-select: none;
}
.testimonial__body { padding-top: clamp(10px, 2vw, 24px); }
.testimonial__quote {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 36px;
}
.testimonial__quote em,
.testimonial__quote .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.testimonial__attrib {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--magenta));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
}
.testimonial__name { color: var(--ink); }
.testimonial__role { color: var(--ink-mid); }
@media (max-width: 720px) {
  .testimonial__inner { grid-template-columns: 1fr; }
  .testimonial__mark { font-size: 80px; line-height: 1; }
}

/* ======================================================================
   MANIFESTO / WHY-US
   ====================================================================== */
.manifesto {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  background: var(--paper-2);
  border-top: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.manifesto__inner {
  max-width: 1080px;
  margin-inline: auto;
}
.manifesto__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.manifesto__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}
.manifesto__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.manifesto__text .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
/* When using <strong class="serif"> we want serif italic + bold weight */
.manifesto__text strong.serif {
  font-weight: 700;
}
.manifesto__signature {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.manifesto__signature::before {
  content: "";
  width: 36px; height: 1px; background: var(--ink-mid);
}

/* ======================================================================
   CAPABILITIES — add glyph + hover detail
   ====================================================================== */
.cap__glyph {
  width: 44px; height: 44px;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--orange) 14%, transparent);
  color: var(--orange);
}
.cap__glyph svg { width: 22px; height: 22px; }
.cap { padding-top: clamp(28px, 2.8vw, 40px); }
.cap__num { position: absolute; top: 18px; right: 22px; margin-bottom: 0; }

/* ======================================================================
   PROCESS — add timeline tag + tick
   ====================================================================== */
.process__row {
  position: relative;
  grid-template-columns: 80px 240px 1fr 130px;
  gap: clamp(20px, 2.4vw, 44px);
}
.process__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 36px;
  background: var(--orange);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 360ms var(--ease-out-expo);
}
.process__row:hover::before { transform: translateY(-50%) scaleY(1); }
.process__week {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-align: right;
  align-self: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 880px) {
  .process__row { grid-template-columns: 1fr; gap: 8px; }
  .process__week { justify-self: start; }
}

/* ---------- Footer (editorial-specific overrides) ---------- */
body.theme-editorial .site-footer {
  background: var(--paper);
}
body.theme-editorial .site-footer .massive-wordmark .extra-o {
  color: var(--orange);
  font-style: italic;
}