/* ============================================================
   PEPPER SERV — Design tokens
   ============================================================ */
:root {
  /* Color */
  --void:        #0a1220;
  --void-soft:    #101b30;
  --navy:        #1d3558;
  --navy-soft:    #26436d;
  --pepper:      #e63946;
  --pepper-dim:   #b32a35;
  --ember:       #ffb238;
  --mist:        #eef1f6;
  --steel:       #93a2b8;
  --steel-dim:    #5c6b83;
  --line:        rgba(238, 241, 246, 0.10);
  --line-soft:    rgba(238, 241, 246, 0.06);

  /* Type */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif; /* Arial is width-matched to Plex Sans (100.25%), so text does not re-wrap when the font loads */

  /* Layout */
  --wrap: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bricolage Grotesque and IBM Plex Sans (SIL Open Font License), self-hosted from
   Google Fonts' Latin and Latin Extended files so the first paint never waits on a
   third-party font server. The @font-face rules are Google's own, with local URLs. */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-v9-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-v9-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-v23-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-v23-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-v23-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-v23-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-v23-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-v23-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Width-matched stand-in for Bricolage Grotesque while the web font loads, so headings
   wrap the same way before and after it arrives (no layout shift). Measured: Bricolage
   renders at ~91.5% of Arial Bold's width at heading weights. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 91.5%;
}

/* ============================================================
   Reset
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--void);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input { font: inherit; }

::selection { background: var(--pepper); color: var(--mist); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* subtle grain overlay for texture / futuristic depth */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--pepper), var(--ember));
  z-index: 1000;
  transition: width 0.1s linear;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--mist);
}

.section-title {
  font-size: clamp(34px, 5.4vw, 66px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 16ch;
}
.section-sub {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--steel);
  font-size: 17px;
}
.section-head { margin-bottom: 76px; }

/* ============================================================
   Buttons — neubrutalist, hard-shadow, kinetic
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--mist);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
  white-space: nowrap;
}
.btn__arrow { flex-shrink: 0; transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }
.btn--primary {
  background: var(--pepper);
  color: #fff;
  box-shadow: 5px 5px 0 var(--ember);
}
.btn--primary:hover {
  background: #f0434f;
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ember);
}
.btn--primary:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ember);
}
.btn--ghost {
  border: 2px solid var(--line);
  color: var(--mist);
  box-shadow: 5px 5px 0 rgba(230, 57, 70, 0.35);
}
.btn--ghost:hover {
  border-color: var(--mist);
  background: rgba(238, 241, 246, 0.06);
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 rgba(230, 57, 70, 0.45);
}
.btn--ghost:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(230,57,70,0.45); }
.btn--sm { padding: 10px 16px 10px 20px; font-size: 14px; box-shadow: 3px 3px 0 var(--ember); }
.btn--sm:hover { box-shadow: 5px 5px 0 var(--ember); }

/* ============================================================
   Marquee — signature fast-forward tape
   ============================================================ */
.marquee {
  position: relative;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid var(--void);
  border-bottom: 2px solid var(--void);
  background: var(--navy);
}
.marquee--coral { background: var(--pepper); }
.marquee--tilt {
  transform: rotate(-1.4deg) scale(1.03);
  margin: -2px 0;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
}
.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marquee-scroll 24s linear infinite;
  padding: 13px 0;
}
.marquee--coral .marquee__track { animation-duration: 20s; animation-direction: reverse; }
.marquee__track span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--mist);
  padding-right: 0;
}
.marquee--coral .marquee__track span { color: #000; } /* --void on --pepper is 4.497:1, just under AA */
.marquee__track span em {
  font-style: normal;
  color: var(--ember);
  margin: 0 26px;
}
.marquee--coral .marquee__track span em { color: var(--mist); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Starburst accents — a callback to Pixis's "explosion" headline decoration,
   reworked as a small ambient twinkle in brand color rather than a literal copy. */
.hero__copy { position: relative; }
.burst {
  position: absolute;
  pointer-events: none;
  animation: burst-twinkle 3.4s var(--ease) infinite;
}
.burst--sm { width: 22px; height: 22px; top: -6px; left: -2px; }
.burst--lg { width: 30px; height: 30px; top: 14px; right: -12px; animation-delay: 1.1s; }
.burst--amber { color: var(--ember); }
.burst--coral { color: var(--pepper); }
@keyframes burst-twinkle {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.65; }
  50% { transform: scale(1.05) rotate(12deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .burst { animation: none; opacity: 0.85; }
}
@media (max-width: 620px) {
  .burst--lg { top: -20px; right: 4px; left: auto; }
}

/* ============================================================
   Search mock — SEO page's hero visual (honest: shows generic,
   real search-intent phrases, never client-specific or fabricated data)
   ============================================================ */
.search-mock {
  --rot: 1.6deg;
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--void-soft) 82%);
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: 10px 10px 0 rgba(230, 57, 70, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.search-mock:hover {
  --rot: 0deg;
  --hover-x: -4px;
  --hover-y: -4px;
  box-shadow: 14px 14px 0 rgba(255, 178, 56, 0.45);
}
.search-mock__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(238, 241, 246, 0.06);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 16px 22px;
  margin-bottom: 24px;
}
.search-mock__icon { color: var(--pepper); flex-shrink: 0; }
.search-mock__query {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
}
.search-mock__cursor {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--ember);
  margin-left: 2px;
  vertical-align: middle;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  50% { opacity: 0; }
}
.search-mock__label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--steel-dim);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.search-mock__suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-mock__suggestions li {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--steel);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(238, 241, 246, 0.03);
}
@media (prefers-reduced-motion: reduce) {
  .search-mock__cursor { animation: none; }
}
@media (max-width: 900px) {
  .search-mock { max-width: 460px; }
}

/* ============================================================
   AI mock — GEO page's hero visual (a chat exchange demonstrating
   the concept itself; sources shown are illustrative placeholders,
   never presented as a real, verified citation)
   ============================================================ */
.ai-mock {
  --rot: -1.4deg;
  background: linear-gradient(160deg, var(--navy) 0%, var(--void-soft) 82%);
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: 10px 10px 0 rgba(255, 178, 56, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.ai-mock:hover {
  --rot: 0deg;
  --hover-x: -4px;
  --hover-y: -4px;
  box-shadow: 14px 14px 0 rgba(230, 57, 70, 0.45);
}
.ai-mock__row { display: flex; margin-bottom: 16px; }
.ai-mock__row--user { justify-content: flex-end; }
.ai-mock__row--ai { align-items: flex-start; gap: 10px; }
.ai-mock__bubble {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  max-width: 88%;
}
.ai-mock__bubble--user {
  background: var(--pepper);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-mock__bubble--ai {
  background: rgba(238, 241, 246, 0.07);
  border: 1px solid var(--line);
  color: var(--mist);
  border-bottom-left-radius: 4px;
  min-height: 3.2em;
}
.ai-mock__avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ember);
  color: var(--void);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
}
.ai-mock__cited {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
}
.ai-mock__cited-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--steel-dim);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.ai-mock__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-mock__chip {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--steel);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(238, 241, 246, 0.03);
}
@media (max-width: 900px) {
  .ai-mock { max-width: 460px; }
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 18, 32, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.3s;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav__logo { height: 30px; width: auto; }
.nav__links {
  display: flex;
  gap: 28px;
  margin-right: auto;
  margin-left: 48px;
  font-size: 14.5px;
  color: var(--steel);
}
.nav__links a { transition: color 0.2s; }
.nav__links a:hover { color: var(--mist); }

.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__chevron { transition: transform 0.3s var(--ease); }
.nav__item:hover .nav__chevron { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  min-width: 240px;
  background: var(--void-soft);
  border: 2px solid var(--mist);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--pepper);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown li a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--steel);
  white-space: normal;
}
.nav__dropdown li a:hover {
  background: rgba(230, 57, 70, 0.12);
  color: var(--mist);
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  margin-left: auto;
}
.nav__burger span {
  height: 2px;
  width: 100%;
  background: var(--mist);
  transition: transform 0.25s, opacity 0.25s;
}
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 32px 24px;
  border-top: 1px solid var(--line-soft);
}
.nav__mobile a { padding: 12px 0; color: var(--steel); border-bottom: 1px solid var(--line-soft); }
.nav__mobile .btn { margin-top: 14px; }
.nav.is-open .nav__mobile { display: flex; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner > .btn--sm { display: none; }
  .nav__burger { display: flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 104px 0 140px;
  overflow: hidden;
  /* Brand gradient callback — the old site ran this same navy→coral diagonal
     (linear-gradient(160deg, #1d3557, #e63946)) as the hero background;
     darkened here to hold up against white text in the dark system. */
  background: linear-gradient(160deg, var(--void) 0%, var(--navy) 42%, var(--pepper-dim) 130%);
}
.hero__scan {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 30% 35%, black, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 55% at 30% 35%, black, transparent 70%);
  opacity: 0.9;
}
.hero__scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 40% at 78% 20%, rgba(230, 57, 70, 0.18), transparent 70%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 980px;
}
/* Two-column variant for pages with a supporting visual (e.g. seo.html) —
   kept separate from the homepage's single-column hero. */
.hero__grid--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  max-width: 1180px;
}
@media (max-width: 900px) {
  .hero__grid--split { grid-template-columns: 1fr; gap: 48px; }
}

.hero__headline {
  font-size: clamp(52px, 7.2vw, 104px);
  font-weight: 800;
  margin-bottom: 36px;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
/* For longer exact-match keyword phrases (e.g. "healthcare digital
   marketing agency") that would otherwise wrap across too many lines. */
.hero__headline--long { font-size: clamp(38px, 5vw, 68px); }
/* Highlighter-marker treatment — a callback to the marker-swipe headline
   move on Envigo's site, reworked in brand coral against the dark system. */
mark {
  background: none;
  color: inherit;
}
.hero__headline mark,
.cta__headline mark {
  font-style: normal;
  display: inline-block;
  background: var(--pepper);
  color: var(--void);
  padding: 0.03em 0.22em 0.08em;
  border-radius: 4px 18px 4px 18px;
  transform: rotate(-1.4deg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__sub {
  font-size: 19px;
  color: var(--steel);
  max-width: 46ch;
  margin-bottom: 48px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   Mission
   ============================================================ */
.mission { padding: 96px 0; }
.mission__inner { max-width: 820px; }
.mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.feature-art {
  --rot: 1.2deg;
  margin: 0;
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 10px 10px 0 rgba(230, 57, 70, 0.4);
  aspect-ratio: 4 / 3;
  background: var(--navy);
}
.feature-art img { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .mission__grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-art { box-shadow: 6px 6px 0 rgba(230, 57, 70, 0.4); }
}
.mission__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 24px;
}
.mission__body {
  font-size: 18px;
  color: var(--steel);
  max-width: 62ch;
}

/* ============================================================
   Services
   ============================================================ */
.services { padding: 60px 0 140px; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}
.svc-grid--triple { grid-template-columns: repeat(3, 1fr); }
.svc-card {
  background: var(--void-soft);
  border: 2px solid var(--mist);
  border-radius: var(--radius-md);
  padding: 34px 32px;
  box-shadow: 8px 8px 0 var(--ember);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
}
.svc-card:nth-child(4n+1) { --rot: -1.4deg; }
.svc-card:nth-child(4n+2) { --rot: 1.1deg; }
.svc-card:nth-child(4n+3) { --rot: -0.8deg; }
.svc-card:nth-child(4n+4) { --rot: 1.4deg; }
.svc-card:hover {
  --rot: 0deg;
  --hover-x: -5px;
  --hover-y: -5px;
  background: var(--navy);
  box-shadow: 12px 12px 0 var(--pepper);
}
.svc-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.svc-card__intro { color: var(--steel); font-size: 14.5px; margin-bottom: 18px; }
.svc-card ul { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-card li {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--mist);
  background: rgba(238, 241, 246, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ============================================================
   Growth outcomes
   ============================================================ */
.growth { padding: 60px 0 140px; }
.growth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.growth-card {
  border-top: 3px solid var(--pepper);
  padding-top: 22px;
}
.growth-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }
.growth-card p { color: var(--steel); font-size: 14.5px; }

/* ============================================================
   Process / Loop
   ============================================================ */
.process { padding: 60px 0 140px; }
.loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 18px;
}
.loop__stage { padding-top: 4px; }
.loop__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pepper-dim); /* white on --pepper is 4.2:1; --pepper-dim gives 6.4:1 (WCAG AA) */
  border: 2px solid var(--mist);
  box-shadow: 4px 4px 0 var(--ember);
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  margin-bottom: 16px;
}
.loop__stage h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.loop__stage p { color: var(--steel); font-size: 14px; }
.loop__arrow {
  align-self: center;
  color: var(--steel-dim);
  font-size: 22px;
  padding-top: 30px;
}
.loop__arrow--return { color: var(--ember); }

/* ============================================================
   Results (case studies)
   ============================================================ */
.results { padding: 60px 0 120px; }
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 28px;
}
.results-card {
  background: linear-gradient(150deg, var(--navy) 0%, var(--void-soft) 80%);
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 8px 8px 0 rgba(255, 178, 56, 0.35);
}
.results-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.6vw, 60px);
  font-weight: 800;
  background: linear-gradient(100deg, var(--ember), var(--pepper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.results-card p { color: var(--steel); font-size: 14.5px; }
.results-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--steel-dim);
}

/* ============================================================
   Why Pepper Serv
   ============================================================ */
.why { padding: 60px 0 140px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
}
.why-item {
  padding: 28px 0;
  border-bottom: 2px solid var(--line);
}
.why-item__index {
  display: block;
  font-family: var(--font-body);
  color: var(--steel-dim);
  font-size: 13px;
  margin-bottom: 10px;
}
.why-item h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.why-item p { color: var(--steel); font-size: 14.5px; }

/* ============================================================
   Reach
   ============================================================ */
.reach { padding: 60px 0 130px; }
.reach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.reach__grid li {
  background: var(--void-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mist);
  transition: border-color 0.25s, transform 0.25s;
}
.reach__grid li:hover { border-color: var(--pepper); transform: translateY(-3px); }
.reach__flag {
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 60px 0 130px; }
.faq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
}
.faq__item { border-bottom: 2px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  text-align: left;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--mist);
}
.faq__icon {
  font-family: var(--font-body);
  color: var(--pepper);
  font-size: 20px;
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
  margin-left: 20px;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.faq__a p { padding-bottom: 22px; color: var(--steel); max-width: 60ch; font-size: 15px; }

/* ============================================================
   CTA
   ============================================================ */
.cta {
  padding: 150px 0 160px;
  /* Bookends the hero's brand gradient — old site ran this same coral→navy
     diagonal (180deg) further down the homepage. */
  background: linear-gradient(180deg, var(--pepper-dim) -40%, var(--navy) 55%, var(--void) 130%);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta__headline {
  font-size: clamp(38px, 6.4vw, 76px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 52px;
}
.cta__note {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--steel);
}
.cta__note a { color: var(--mist); font-weight: 500; }

/* ============================================================
   Contact page — note badge, address, and the multi-field form
   ============================================================ */
.contact-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--steel);
  margin-top: 8px;
}
.contact-note__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pepper);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
  animation: contact-pulse 2.2s var(--ease) infinite;
}
@keyframes contact-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.contact-address {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--steel-dim);
  margin-top: 12px;
}
.contact-address svg { color: var(--ember); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .contact-note__dot { animation: none; }
}

.contact-form {
  --rot: -1.2deg;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--void-soft) 85%);
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: 10px 10px 0 rgba(230, 57, 70, 0.4);
  transition: box-shadow 0.4s var(--ease);
}
.contact-form:focus-within {
  --rot: 0deg;
  --hover-x: -4px;
  --hover-y: -4px;
  box-shadow: 14px 14px 0 rgba(255, 178, 56, 0.45);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form__field span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--steel-dim);
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: rgba(238, 241, 246, 0.05);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 14.5px;
  resize: vertical;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--pepper);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--steel-dim);
}
.contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2393a2b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.contact-form__submit { width: 100%; }
.contact-form__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--steel-dim);
  text-align: center;
}

.footer__address {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--steel-dim);
  margin-top: 8px;
}

/* ============================================================
   Calendar embed — themed frame around Google's scheduling widget.
   The widget itself renders on Google's domain (cross-origin, so its
   internal colors/fonts can't be restyled) — theming is applied to
   the frame around it instead.
   ============================================================ */
.calendar-section { padding: 20px 0 130px; }
.calendar-embed {
  --rot: 0.5deg;
  background: linear-gradient(155deg, var(--navy) 0%, var(--void-soft) 85%);
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 10px 10px 0 rgba(255, 178, 56, 0.4);
  transition: box-shadow 0.4s var(--ease);
}
.calendar-embed:hover {
  --rot: 0deg;
  --hover-x: -3px;
  --hover-y: -3px;
  box-shadow: 14px 14px 0 rgba(230, 57, 70, 0.45);
}
.calendar-embed__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--steel);
  padding: 6px 6px 16px;
}
.calendar-embed__title { text-transform: uppercase; }
.calendar-embed__tag {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--amber);
  color: var(--amber);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.calendar-embed__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pepper);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
  animation: contact-pulse 2.2s var(--ease) infinite;
}
.calendar-embed__frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.calendar-embed__frame iframe { display: block; }
@media (max-width: 620px) {
  .calendar-embed { padding: 14px; }
  .calendar-embed__frame iframe { height: 520px; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { padding: 64px 0 0; border-top: 1px solid var(--line-soft); }
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 56px;
  flex-wrap: wrap;
}
.footer__logo { height: 26px; width: auto; margin-bottom: 14px; }
.footer__brand p { color: var(--steel); font-size: 14px; max-width: 26ch; }
.footer__links { display: flex; gap: 64px; }
.footer__links h2 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.55;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin-bottom: 14px;
}
.footer__links a { display: block; color: var(--steel); font-size: 14.5px; padding: 5px 0; transition: color 0.2s; }
.footer__links a:hover { color: var(--mist); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--steel-dim);
}

/* ============================================================
   Lead popup
   ============================================================ */
.popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.popup.is-open { visibility: visible; opacity: 1; }
.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 32, 0.78);
  backdrop-filter: blur(6px) saturate(120%);
}
.popup__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(160deg, var(--navy) 0%, var(--void-soft) 82%);
  border: 2px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: 12px 12px 0 rgba(230, 57, 70, 0.4);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.35s var(--ease);
}
.popup.is-open .popup__panel { transform: translateY(0) scale(1); }
.popup__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--steel);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.popup__close:hover { border-color: var(--pepper); color: var(--mist); transform: rotate(90deg); }
.popup__headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  padding-right: 20px;
}
.popup__sub { color: var(--steel); font-size: 15px; margin-bottom: 26px; }
.popup__form { display: flex; flex-direction: column; gap: 16px; }
.popup__form input {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: rgba(238, 241, 246, 0.05);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 15px;
}
.popup__form input::placeholder { color: var(--steel-dim); }
.popup__form input:focus { border-color: var(--pepper); }
.popup__form .btn { width: 100%; }
.popup__note {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--steel-dim);
}
@media (prefers-reduced-motion: reduce) {
  .popup, .popup__panel, .popup__close { transition: none; }
}
@media (max-width: 480px) {
  .popup__panel { padding: 32px 24px; }
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
/* Composed via custom properties so entrance motion never fights a
   component's own rotate/hover transform (only one `transform` writer). */
[data-reveal] {
  --entrance-y: 0px;
  --rot: 0deg;
  --hover-x: 0px;
  --hover-y: 0px;
  transform: translate(var(--hover-x), calc(var(--entrance-y) + var(--hover-y))) rotate(var(--rot));
}
html.js [data-reveal] {
  --entrance-y: 24px;
  --reveal-delay: 0ms;
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay);
}
html.js [data-reveal].is-visible {
  --entrance-y: 0px;
  opacity: 1;
}

/* Staggered cascade — each grid/list gets a per-item delay so groups
   reveal in sequence rather than all at once. */
.svc-card:nth-child(1), .growth-card:nth-child(1),
.results-card:nth-child(1), .why-item:nth-child(1), .reach__grid li:nth-child(1),
.faq__item:nth-child(1), .loop__stage:nth-child(1) { --reveal-delay: 0ms; }
.svc-card:nth-child(2), .growth-card:nth-child(2),
.results-card:nth-child(2), .why-item:nth-child(2), .reach__grid li:nth-child(2),
.faq__item:nth-child(2), .loop__stage:nth-child(3) { --reveal-delay: 90ms; }
.svc-card:nth-child(3), .growth-card:nth-child(3),
.results-card:nth-child(3), .why-item:nth-child(3), .reach__grid li:nth-child(3),
.faq__item:nth-child(3), .loop__stage:nth-child(5) { --reveal-delay: 180ms; }
.svc-card:nth-child(4), .growth-card:nth-child(4),
.why-item:nth-child(4), .reach__grid li:nth-child(4),
.faq__item:nth-child(4), .loop__stage:nth-child(7) { --reveal-delay: 270ms; }
.svc-card:nth-child(5), .reach__grid li:nth-child(5),
.faq__item:nth-child(5) { --reveal-delay: 360ms; }
.svc-card:nth-child(6), .reach__grid li:nth-child(6) { --reveal-delay: 450ms; }
.reach__grid li:nth-child(7) { --reveal-delay: 540ms; }
.reach__grid li:nth-child(8) { --reveal-delay: 630ms; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: 1fr; }
  .growth-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .results-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .loop { grid-template-columns: 1fr 1fr; }
  .loop__arrow { display: none; }
  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .reach__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__links { gap: 40px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .svc-card { padding: 26px 22px; box-shadow: 5px 5px 0 var(--ember); }
  .svc-card:hover { --hover-x: -2px; --hover-y: -2px; }
  .growth-grid { grid-template-columns: 1fr; gap: 24px; }
  .results-card { box-shadow: 5px 5px 0 rgba(255, 178, 56, 0.35); }
  .marquee--tilt { transform: rotate(-0.8deg) scale(1.02); }
  .marquee__track span { font-size: 12.5px; }
  .loop { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; gap: 32px; }
  .footer__links { flex-direction: column; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
  .contact-form { padding: 26px 22px; box-shadow: 6px 6px 0 rgba(230, 57, 70, 0.4); }
  .contact-form__row { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   Legal pages
   ============================================================ */
.legal { padding: 72px 0 110px; }
.legal__inner { max-width: 820px; }
.legal__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 18px 0 44px;
}
.legal__body h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
}
.legal__body p, .legal__body li { color: var(--steel); font-size: 16.5px; max-width: 70ch; }
.legal__body p { margin-bottom: 14px; }
.legal__body ul { margin: 0 0 14px 20px; display: grid; gap: 8px; }
.legal__body li { list-style: disc; }
.legal__body strong { color: var(--mist); font-weight: 600; }
.legal__body a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Home page — real photos, real facts (2026-10 rebuild)
   ============================================================ */
.section-title--md { font-size: clamp(30px, 4vw, 48px); max-width: 22ch; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ef4f5b; /* --pepper on --void is 4.497:1, just under AA; this red gives 5.3:1 */
  margin-bottom: 14px;
}
.text-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--ember);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.photo {
  margin: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--navy);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Hero */
.hero--home { padding: 88px 0 96px; }
.hero--home .hero__headline--long { font-size: clamp(36px, 4.6vw, 62px); margin-bottom: 28px; }
.hero--home .hero__sub { margin-bottom: 36px; }
.hero__kicker {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 22px;
}
.hero__tagline {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mist);
}
.hero__tagline span { color: var(--pepper); }
.hero__photo { box-shadow: 10px 10px 0 rgba(230, 57, 70, 0.35); }

/* Facts strip */
.facts { padding: 44px 0; border-bottom: 1px solid var(--line-soft); }
.facts__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.facts__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  background: linear-gradient(100deg, var(--ember), var(--pepper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.facts__label { color: var(--steel); font-size: 14.5px; max-width: 24ch; display: block; }

/* Service tiles */
.home-services { padding: 110px 0 120px; }
.svc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--void-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease);
}
.svc-tile:hover { --hover-y: -4px; border-color: var(--pepper); background: var(--navy); }
.svc-tile__num { font-family: var(--font-body); font-size: 13px; color: var(--pepper); }
.svc-tile h3 { font-size: 22px; }
.svc-tile p { color: var(--steel); font-size: 14.5px; }
.svc-tile__more { margin-top: auto; padding-top: 8px; font-family: var(--font-body); font-size: 13px; color: var(--ember); }
.svc-tile--cta { background: linear-gradient(150deg, var(--navy) 0%, var(--pepper-dim) 140%); border-color: var(--mist); }

/* Work + results */
.work { padding: 40px 0 120px; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.work-card {
  background: var(--void-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.work-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.work-card__body { padding: 22px 24px 26px; }
.work-card h3 { font-size: 22px; margin-bottom: 8px; }
.work-card p { color: var(--steel); font-size: 14.5px; margin-bottom: 14px; }
.work-card__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.work__results-title { font-size: clamp(24px, 3vw, 32px); margin: 80px 0 28px; }

/* About + why splits */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-split { padding: 40px 0 120px; }
.about-split p:not(.eyebrow) { color: var(--steel); font-size: 17px; max-width: 60ch; margin-bottom: 16px; }
.about-split h2 { margin-bottom: 26px; }
.why__split { align-items: start; }
.why-grid--stack { grid-template-columns: 1fr; }

/* Founder */
.founder { padding: 40px 0 120px; }
.founder__grid { grid-template-columns: 0.8fr 1.2fr; }
.founder__photo { margin: 0; text-align: center; }
.founder__photo img {
  width: 100%;
  height: auto;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid var(--pepper);
}
.founder__photo figcaption {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--mist);
}
.founder__quote {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 3px solid var(--pepper);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
}
.founder__copy > p:not(.eyebrow) { color: var(--steel); font-size: 16.5px; max-width: 58ch; margin-bottom: 26px; }

/* Industries */
.industries { padding: 40px 0 120px; }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Client logos */
.clients { padding: 40px 0 120px; }
.clients .section-head { margin-bottom: 44px; }
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.logo-grid li { background: #fff; border-radius: var(--radius-sm); padding: 8px 12px; }
.logo-grid img { width: 100%; height: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.25s, opacity 0.25s; }
.logo-grid li:hover img { filter: none; opacity: 1; }

/* Offices */
.offices { padding: 40px 0 120px; }
.offices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.office-card { border: 2px solid var(--line); border-radius: var(--radius-md); padding: 26px 24px; }
.office-card h3 { font-size: 22px; margin-bottom: 10px; }
.office-card address, .office-card p { font-style: normal; color: var(--steel); font-size: 15px; }
.office-card a { color: var(--ember); }

/* Bottom copy */
.seo-copy { padding: 20px 0 110px; }
.seo-copy__inner { max-width: 820px; }
.seo-copy h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 20px; }
.seo-copy p { color: var(--steel); font-size: 16.5px; margin-bottom: 14px; }

.cta__note a, .footer__contact a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .facts__list { grid-template-columns: repeat(2, 1fr); }
  .svc-tiles { grid-template-columns: repeat(2, 1fr); }
  .split, .founder__grid { grid-template-columns: 1fr; gap: 40px; }
  .industry-grid, .offices__grid { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .hero--home { padding: 56px 0 72px; }
  .home-services, .work, .about-split, .founder, .industries, .clients, .offices { padding-bottom: 88px; }
  .svc-tiles, .work-grid { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__photo { box-shadow: 6px 6px 0 rgba(230, 57, 70, 0.35); }
}

/* ============================================================
   Portfolio page
   ============================================================ */
.hero--page { padding: 80px 0 72px; }
.hero--page .hero__headline--long { font-size: clamp(36px, 4.8vw, 64px); margin-bottom: 24px; }
.chip-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-nav a {
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  transition: border-color 0.2s, background 0.2s;
}
.chip-nav a:hover { border-color: var(--pepper); background: rgba(230, 57, 70, 0.12); }
.portfolio-section { padding: 100px 0 40px; scroll-margin-top: 80px; }
.work-card--shot img { object-fit: contain; background: #fff; }
.work-card__meta { font-family: var(--font-body); font-size: 12.5px; color: var(--steel); margin-bottom: 6px; }
.work-card__metric {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  margin: 4px 0 12px;
  background: linear-gradient(100deg, var(--ember), var(--pepper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.source-note { margin-top: 28px; font-family: var(--font-body); font-size: 12.5px; color: var(--steel); max-width: 80ch; }
@media (max-width: 620px) {
  .hero--page { padding: 56px 0 56px; }
  .portfolio-section { padding-top: 72px; }
}

/* Featured case study (portfolio) */
.case-study__brand {
  display: inline-flex;
  align-items: center;
  background: #2e5af2;
  border-radius: var(--radius-md);
  padding: 14px 22px;
  margin-bottom: 26px;
}
.case-study__brand img { height: 40px; width: auto; }
.case-study .section-head { margin-bottom: 40px; }
.case-study .facts__list { margin-bottom: 56px; }
.case-study__copy { color: var(--steel); font-size: 16.5px; max-width: 70ch; margin-bottom: 40px; }
.case-study__split { grid-template-columns: 0.9fr 1.1fr; align-items: start; margin-bottom: 40px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rank-table caption { text-align: left; font-family: var(--font-body); font-size: 12.5px; color: var(--steel); padding-bottom: 12px; }
.rank-table th, .rank-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.rank-table th { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--steel); text-transform: uppercase; letter-spacing: 0.06em; }
.rank-table td:nth-child(n+2), .rank-table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.rank-table strong { color: var(--ember); font-size: 17px; }
.rank-table__note { margin-top: 12px; font-family: var(--font-body); font-size: 12px; color: var(--steel); }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: var(--radius-md); border: 2px solid var(--line); background: #fff; }
.shot figcaption { margin-top: 10px; color: var(--steel); font-size: 13.5px; }
.shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) {
  .case-study__split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .shot-grid { grid-template-columns: 1fr; }
  .rank-table { font-size: 14px; }
}

/* Case study pages + clickable portfolio cards */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-body); font-size: 12.5px; color: var(--steel); margin-bottom: 22px; }
.crumbs a { color: var(--mist); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { color: var(--steel); }
.work-card { position: relative; }
.work-card__link { color: inherit; }
.work-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.work-card__link:focus-visible { outline: none; }
.work-card__link:focus-visible::after { outline: 2px solid var(--ember); outline-offset: 3px; }
.work-card:has(.work-card__link):hover { border-color: var(--pepper); }
.work-card__more { display: inline-block; margin-top: 2px; font-family: var(--font-body); font-size: 13px; color: var(--ember); }
.case-section { padding: 90px 0 0; }
.case-section h2 { margin-bottom: 22px; }
.case-section > .wrap > p { color: var(--steel); font-size: 16.5px; max-width: 70ch; margin-bottom: 16px; }
.case-focus { display: grid; gap: 14px; max-width: 72ch; margin-top: 8px; }
.case-focus li { color: var(--steel); font-size: 16px; padding-left: 18px; border-left: 3px solid var(--pepper); }
.case-focus strong { color: var(--mist); }
.case-cta { margin-top: 8px; }
.related { padding: 110px 0 120px; }
@media (max-width: 620px) {
  .case-section { padding-top: 64px; }
  .related { padding: 80px 0 88px; }
}
.shot > a { display: block; }
.shot > a img { transition: border-color 0.2s; }
.shot > a:hover img { border-color: var(--pepper); }
.case-study__shot { max-width: 900px; margin-bottom: 36px; }

/* Falling service tags (home). The canvas spans the services section behind the heading and
   cards; tags fall in from above, pass behind the cards and land in .tag-drop below them.
   Without motion (or if the library fails) the tags are a plain list of pills. */
.svc-stage { position: relative; }
.svc-stage > .section-head, .svc-stage > .svc-tiles, .svc-stage > .tag-drop, .svc-stage > .tag-drop__hint { position: relative; z-index: 1; }
.tag-drop { margin-top: 56px; }
.tag-drop__canvas { display: none; }
.tag-drop__list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-drop__list li {
  background: linear-gradient(90deg, var(--pepper), var(--navy-soft));
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 15px;
}
.tag-drop__hint { margin-top: 12px; font-family: var(--font-body); font-size: 12.5px; color: var(--steel); }
@media (prefers-reduced-motion: no-preference) {
  html.js .svc-stage:not(.is-static) .tag-drop { height: 360px; pointer-events: none; }
  html.js .svc-stage:not(.is-static) .tag-drop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--pepper-dim), var(--pepper) 50%, #ff6b74);
    box-shadow: 0 0 16px rgba(230, 57, 70, 0.5);
  }
  html.js .svc-stage:not(.is-static) .tag-drop__canvas { display: block; position: absolute; left: 0; width: 100%; top: 0; height: 100%; z-index: 0; touch-action: pan-y; }
  html.js .svc-stage:not(.is-static) .tag-drop__list {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 620px) {
  html.js .svc-stage:not(.is-static) .tag-drop { height: 320px; }
}
.area-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.area-list li { font-family: var(--font-body); font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--mist); }
.feature-art img { object-fit: cover; }
.work-grid--triple { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
  .work-grid--triple { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME PAGE — featured result cards
   ============================================================ */
.home-results-grid { margin-bottom: 28px; }
.home-results-grid .work-card { display: flex; flex-direction: column; }
.home-results-grid .work-card__body { display: flex; flex: 1; flex-direction: column; }
.home-results-grid .work-card__more { margin-top: auto; }
.work__results-title--secondary { margin-top: 64px; }
.btn--primary { background: #c92e3d; }
.btn--primary:hover { background: #d13240; }
.results-note, .footer__links h2, .footer__bottom { color: #71829d; }

@media (max-width: 620px) {
  .work__results-title--secondary { margin-top: 52px; }
}
@keyframes signal-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes cue-float { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  [data-cinematic-shift], [data-cinematic-shift] img { transform: none !important; transition: none !important; }
}

/* ============================================================
   PAGE IMAGES — exact PepperServ office branding
   ============================================================ */
.feature-art {
  position: relative;
}
.feature-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  width: 112px;
  height: 44px;
  border: 1px solid rgba(10, 18, 32, .14);
  border-radius: 8px;
  background: rgba(248, 249, 251, .94) url("assets/pepperserv-logo-transparent.png") center / 92px auto no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.feature-art img { object-fit: cover; }
@media (max-width: 620px) {
  .feature-art::before {
    top: 10px;
    right: 10px;
    width: 88px;
    height: 35px;
    background-size: 72px auto;
  }
}

/* ============================================================
   CINEMATIC HOMEPAGE COPY — home-cinematic.html only
   Native scroll, pinned portfolio reel, PepperServ office imagery.
   ============================================================ */
body.cinema-page {
  --film-bg: #080c12;
  --film-surface: #11161e;
  --film-ink: #f3f2ee;
  --film-muted: #a6afb9;
  --film-red: #f34c58;
  --film-line: rgba(243, 242, 238, .16);
  background: var(--film-bg);
  color: var(--film-ink);
}
.cinema-page .wrap { max-width: 1440px; padding-inline: clamp(24px, 5.2vw, 88px); }
.cinema-page main { position: relative; }
body.cinema-page [data-reveal] { opacity: 1; transition: transform .8s var(--ease); }
.cinema-page .scroll-progress { background: var(--film-red); height: 2px; box-shadow: 0 0 12px rgba(243, 76, 88, .6); }
.cinema-page .btn { border-radius: 999px; box-shadow: none; border-width: 1px; padding: 15px 24px; transform: none; font-size: 14px; }
.cinema-page .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(243, 76, 88, .16); }
.cinema-page .btn--primary { background: #d63342; color: #fff; border-color: #e34a57; }
.cinema-page .btn--primary:hover { background: #b92534; }
.cinema-page .btn--ghost { background: rgba(13, 18, 26, .48); border-color: rgba(255,255,255,.34); color: #fff; }
.cinema-page .nav .btn--sm { padding: 11px 18px; }
.cinema-page .section-title { max-width: 15ch; font-size: clamp(38px, 5.7vw, 80px); line-height: 1.02; letter-spacing: -.055em; }
.cinema-page .section-title--md { font-size: clamp(36px, 4.4vw, 62px); }
.cinema-page .section-title mark { color: var(--film-red); }
.cinema-page .section-sub { color: var(--film-muted); font-size: 17px; line-height: 1.7; }
.cinema-page .section-head { margin-bottom: 52px; }
.cinema-page .text-link { color: #f56d78; }
.cinema-page .facts { background: var(--film-bg); padding: 42px 0; border-block: 1px solid var(--film-line); }
.cinema-page .facts__num { color: var(--film-ink); background: none; -webkit-text-fill-color: initial; font-size: clamp(28px, 3vw, 44px); }
.cinema-page .facts__label { font-size: 10px; letter-spacing: .08em; color: var(--film-muted); }

/* Capability rows sit beside a sticky introduction. */
.cinema-page .film-services { padding: 140px 0 90px; background: var(--film-bg); }
.cinema-page .film-services .svc-stage { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 100px; }
.cinema-page .film-services .section-head { position: sticky; top: 136px; align-self: start; margin: 0 0 48px; }
.cinema-page .film-services .section-title { font-size: clamp(42px, 4.8vw, 69px); }
.cinema-page .film-services .section-sub { margin-top: 24px; }
.cinema-page .film-services .svc-tiles { display: block; }
.cinema-page .film-services .svc-tile { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 20px; min-height: 0; padding: 25px 0 28px; border: 0; border-top: 1px solid var(--film-line); border-radius: 0; background: none; box-shadow: none; transform: none; transition: color .2s, padding .25s; }
.cinema-page .film-services .svc-tile:hover { padding-left: 10px; color: #ff7782; }
.cinema-page .film-services .svc-tile__num { grid-column: 1; grid-row: 1 / 4; padding-top: 7px; color: #f16b76; font-size: 11px; }
.cinema-page .film-services .svc-tile h3 { grid-column: 2; font-size: 25px; line-height: 1.15; letter-spacing: -.04em; max-width: 26ch; }
.cinema-page .film-services .svc-tile p { grid-column: 2; color: var(--film-muted); font-size: 14px; margin-top: 12px; max-width: 46ch; }
.cinema-page .film-services .svc-tile__more { grid-column: 2; margin-top: 12px; color: #d3d8de; font-size: 11px; }
.cinema-page .film-services .svc-tile--cta .svc-tile__num { font-size: 8px; }
.cinema-page .film-services .tag-drop { grid-column: 1 / -1; }
.cinema-page .film-services .tag-drop__hint { grid-column: 1 / -1; }
.cinema-page .film-services .tag-drop__canvas { z-index: 0; visibility: hidden; }
.cinema-page .film-services .section-head, .cinema-page .film-services .svc-tiles { z-index: 1; }
.film-work__pin { padding: 100px 0 48px; }
.film-work__window { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d94452 #171d26; scroll-snap-type: x mandatory; scroll-padding-left: 5.2vw; overscroll-behavior-x: contain; }
.cinema-page .film-reel { display: flex; gap: 28px; width: max-content; padding: 0 5.2vw 16px; margin: 0; perspective: 1400px; }
.cinema-page .film-reel > .work-card { position: relative; flex: 0 0 auto; width: min(69vw, 900px); margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; box-shadow: none; background: var(--film-surface); scroll-snap-align: start; transform: none; }
.cinema-page .film-reel > .work-card:hover { transform: none; box-shadow: none; }
.cinema-page .film-reel > .work-card > img { display: block; width: 100%; height: clamp(210px, 31svh, 380px); object-fit: cover; object-position: top; border-radius: 4px 4px 0 0; }
.cinema-page .film-reel .work-card__body { display: grid; grid-template-columns: 1fr auto; padding: 22px 26px; gap: 8px 24px; align-items: center; }
.cinema-page .film-reel .work-card__body h3 { font-size: 27px; font-weight: 500; letter-spacing: -.04em; margin: 0; }
.cinema-page .film-reel .work-card__body p { font-size: 13px; color: var(--film-muted); margin: 0; max-width: 50ch; grid-row: 2; }
.cinema-page .film-reel .work-card__tag { grid-column: 2; grid-row: 1 / 3; border-color: var(--film-line); color: #c0c7d1; background: none; font-size: 10px; border-radius: 999px; }
.cinema-page .home-results-grid { gap: 24px; }
.cinema-page .home-results-grid .work-card { border: 1px solid var(--film-line); border-radius: 5px; background: #11161e; box-shadow: none; transform: none; }
.cinema-page .home-results-grid .work-card > img { aspect-ratio: 2.4 / 1; object-fit: contain; height: auto; width: 100%; }
.cinema-page .home-results-grid .work-card__body { padding: 24px; }
.cinema-page .work-card__metric { font-size: clamp(25px, 2.4vw, 35px); color: #fc7882; background: none; -webkit-text-fill-color: initial; }
.cinema-page .results-grid { gap: 26px; }
.cinema-page .results-card { border: 0; border-top: 1px solid var(--film-line); border-radius: 0; box-shadow: none; transform: none; padding: 27px 0; background: transparent; }
.cinema-page .results-card__num { color: #f77782; background: none; -webkit-text-fill-color: initial; font-size: 56px; }
.cinema-page .results-note { margin-top: 20px; }

/* The team and founder remain human within the cinematic treatment. */
.cinema-page .about-split { padding: 140px 0; background: #eeeae3; color: #18202c; }
.cinema-page .about-split .section-title { color: #18202c; }
.cinema-page .about-split .section-title mark { color: #b42d3c; }
.cinema-page .about-split .eyebrow, .cinema-page .about-split p:not(.eyebrow) { color: #4e5763; }
.cinema-page .about-split .text-link { color: #a32332; }
.cinema-page .split { gap: clamp(40px, 7vw, 110px); }
.cinema-page .photo { position: relative; border: 0; border-radius: 3px; box-shadow: none; background: #11161e; }
.cinema-page .film-depth { aspect-ratio: 4 / 4.7; overflow: hidden; }
.film-depth img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--film-depth, 0px), 0) scale(1.16); }
.cinema-page .founder { padding: 140px 0 80px; }
.cinema-page .founder__photo { border: 0; background: none; box-shadow: none; border-radius: 0; max-width: 430px; padding-top: 32px; border-top: 1px solid var(--film-line); }
.cinema-page .founder__photo img { border-radius: 3px; filter: saturate(.72); }
.cinema-page .founder__photo figcaption { padding-top: 15px; text-align: left; font-size: 12px; color: var(--film-muted); }
.cinema-page .founder__quote { font-size: clamp(23px, 2.8vw, 37px); font-weight: 400; letter-spacing: -.03em; color: #e2e3e3; line-height: 1.4; }
.cinema-page .founder__copy > p:not(.eyebrow) { color: var(--film-muted); }
.cinema-page .growth { padding: 80px 0 140px; }
.cinema-page .growth-grid { gap: 32px; }
.cinema-page .growth-card { border-top: 1px solid var(--film-red); }
.cinema-page .growth-card h3 { font-size: 22px; font-weight: 500; }
.cinema-page .growth-card p { color: var(--film-muted); }
.cinema-page .why { padding: 120px 0; border-top: 1px solid var(--film-line); }
.cinema-page .why .section-head { margin-bottom: 64px; }
.cinema-page .why__split { align-items: center; }
.cinema-page .why-item { border: 0; border-top: 1px solid var(--film-line); background: none; padding: 26px 0; border-radius: 0; box-shadow: none; transform: none; }
.cinema-page .why-item__index { color: #f77782; }
.cinema-page .why-item h3 { font-weight: 500; }
.cinema-page .why-item p { color: var(--film-muted); }
.cinema-page .industries { padding: 100px 0; background: #11161e; }
.cinema-page .industry-grid { gap: 0; border-top: 1px solid var(--film-line); }
.cinema-page .industry-grid .svc-tile { border: 0; border-right: 1px solid var(--film-line); border-radius: 0; background: none; box-shadow: none; padding: 38px 30px; transform: none; }
.cinema-page .industry-grid .svc-tile:first-child { padding-left: 0; }
.cinema-page .industry-grid .svc-tile:last-child { border-right: 0; }
.cinema-page .industry-grid h3 { font-weight: 500; font-size: 26px; }
.cinema-page .industry-grid p { color: var(--film-muted); }
.cinema-page .clients { padding: 120px 0; }
.cinema-page .logo-grid { gap: 1px; background: var(--film-line); border: 1px solid var(--film-line); }
.cinema-page .logo-grid li { padding: 20px; border-radius: 0; background: #f1eee8; }
.cinema-page .logo-grid img { opacity: .8; }
.cinema-page .offices { padding: 80px 0 110px; }
.cinema-page .office-card { padding: 25px 0; border: 0; border-top: 1px solid var(--film-line); background: none; border-radius: 0; box-shadow: none; transform: none; }
.cinema-page .office-card h3 { font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.cinema-page .office-card address { color: var(--film-muted); }
.cinema-page .faq { border-top: 1px solid var(--film-line); padding: 100px 0; }
.cinema-page .faq__q { color: var(--film-ink); }
.cinema-page .faq__a { color: var(--film-muted); }
.cinema-page .seo-copy { padding: 70px 0; background: #0d121a; }
.cinema-page .seo-copy h2 { font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.cinema-page .seo-copy p { color: var(--film-muted); }
.cinema-page .cta { position: relative; padding: 140px 0 150px; overflow: hidden; background: #ddd9d1; color: #151d29; }
.cinema-page .cta::before { content: ""; position: absolute; width: 52vw; height: 52vw; border: 1px solid rgba(21,29,41,.12); border-radius: 50%; top: -24vw; right: -8vw; pointer-events: none; }
.cinema-page .cta::after { content: "+"; position: absolute; right: 8vw; bottom: 60px; color: #b32a35; font-size: 90px; font-weight: 300; line-height: 1; }
.cinema-page .cta__headline { max-width: 16ch; margin-inline: auto; color: #151d29; font-size: clamp(48px, 7vw, 100px); letter-spacing: -.06em; line-height: 1; }
.cinema-page .cta__headline mark { color: #b32a35; background: none; transform: none; padding: 0; }
.cinema-page .cta__note { color: #4c5663; }
.cinema-page .cta__note a { color: #38414d; }
.cinema-page .footer { background: #080c12; }

@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .cinema-page.film-motion .film-work__pin { position: sticky; top: 78px; height: calc(100svh - 78px); min-height: 650px; display: flex; flex-direction: column; justify-content: center; padding-top: 36px; padding-bottom: 30px; }
  .cinema-page.film-motion .film-work__window { overflow-x: clip; scroll-snap-type: none; }
  .cinema-page.film-motion .film-reel { transform: translate3d(var(--reel-x, 0px), 0, 0); will-change: transform; }
  .cinema-page.film-motion .film-reel > .work-card { transform: perspective(1400px) rotateY(var(--card-turn, 0deg)); transform-origin: center; }
}
@media (min-width: 1001px) and (max-height: 760px) {
  .cinema-page .film-reel > .work-card > img { height: 27svh; }
}
@media (max-width: 1000px) {
  .cinema-page .film-services .svc-stage { column-gap: 40px; }
  .cinema-page .film-services .section-head { top: 110px; }
  .film-work__pin { padding-top: 80px; }
  .cinema-page .film-reel > .work-card { width: 80vw; }
  .cinema-page .film-reel .work-card__body { grid-template-columns: 1fr; }
  .cinema-page .film-reel .work-card__tag { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 6px; }
  .cinema-page .film-reel .work-card__body h3 { font-size: 24px; }
  .cinema-page .film-depth { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 760px) {
  .cinema-page .facts { padding: 28px 0; }
  .cinema-page .facts__list { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cinema-page .facts__num { font-size: 32px; }
  .cinema-page .facts__label { font-size: 9px; }
  .cinema-page .film-services { padding: 85px 0 60px; }
  .cinema-page .film-services .svc-stage { display: block; }
  .cinema-page .film-services .section-head { position: static; margin-bottom: 38px; }
  .cinema-page .film-services .section-title { font-size: 43px; max-width: 15ch; }
  .cinema-page .film-services .svc-tile h3 { font-size: 23px; }
  .cinema-page .film-reel { gap: 16px; padding-inline: 24px; }
  .cinema-page .film-reel > .work-card { width: calc(100vw - 64px); }
  .cinema-page .film-reel > .work-card > img { height: 205px; }
  .cinema-page .film-reel .work-card__body { padding: 20px; }
  .cinema-page .home-results-grid, .cinema-page .results-grid { grid-template-columns: 1fr; }
  .cinema-page .home-results-grid { gap: 24px; }
  .cinema-page .home-results-grid .work-card > img { aspect-ratio: 2 / 1; }
  .cinema-page .results-card__num { font-size: 48px; }
  .cinema-page .about-split, .cinema-page .founder, .cinema-page .why { padding: 80px 0; }
  .cinema-page .split { grid-template-columns: 1fr; gap: 40px; }
  .cinema-page .film-depth { aspect-ratio: 1.15 / 1; }
  .cinema-page .about-split .section-title { font-size: 52px; }
  .cinema-page .founder__photo { width: 100%; max-width: none; }
  .cinema-page .founder__photo img { max-width: 350px; width: 100%; }
  .cinema-page .founder__quote { font-size: 25px; }
  .cinema-page .growth { padding: 20px 0 80px; }
  .cinema-page .growth-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .cinema-page .growth-card h3 { font-size: 20px; }
  .cinema-page .growth-card p { font-size: 13px; }
  .cinema-page .industries, .cinema-page .clients, .cinema-page .offices, .cinema-page .faq { padding: 80px 0; }
  .cinema-page .industry-grid { grid-template-columns: 1fr; }
  .cinema-page .industry-grid .svc-tile, .cinema-page .industry-grid .svc-tile:first-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--film-line); }
  .cinema-page .logo-grid { grid-template-columns: 1fr 1fr; }
  .cinema-page .logo-grid li { padding: 14px; }
  .cinema-page .faq__grid { grid-template-columns: 1fr; gap: 20px; }
  .cinema-page .cta { padding: 100px 0; }
  .cinema-page .cta__headline { font-size: 52px; }
  .cinema-page .cta::after { font-size: 42px; bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-page .film-hero, .cinema-page .film-studio__pin, .cinema-page .film-work__pin { position: relative; top: auto; }
  .cinema-page .film-hero__scene img, .cinema-page .film-hero .hero__copy, .cinema-page .film-studio__image img, .cinema-page .film-studio__copy, .cinema-page .film-depth img { transform: none; }
}

/* ============================================================
   BRANDED IMAGE REFRESH — existing page layouts, October 2026
   The supplied logo is part of the new office images themselves.
   ============================================================ */
.feature-art.brand-photo::before { content: none; }
.brand-photo img { object-fit: cover; object-position: center; }
.brand-founder-note {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 410px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.brand-founder-note > img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid rgba(238, 241, 246, .24);
  border-radius: 50%;
}
.brand-founder-note figcaption { font-size: 13px; line-height: 1.5; }
.brand-founder-note strong { display: block; color: var(--mist); font-size: 16px; font-weight: 600; }
.brand-founder-note span { display: block; color: var(--steel); }
.brand-founder-note a { display: inline-block; margin-top: 4px; color: var(--ember); font-size: 12px; text-underline-offset: 3px; }
.brand-founder-note a:hover { text-decoration: underline; }
.brand-case-hero { isolation: isolate; }
.brand-case-art {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  margin: 0;
  opacity: .19;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.brand-case-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-case-hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 620px) {
  .brand-founder-note { gap: 12px; margin-top: 24px; }
  .brand-case-art { width: 100%; opacity: .12; }
}

/* ============================================================
   QREWZ CASE STUDY — full-card links and project page details
   ============================================================ */
a.work-card--case-link { display: block; transition: border-color .2s; }
a.work-card--case-link:hover { border-color: var(--pepper); }
a.work-card--case-link:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; }
.work-card--case-link .work-card__more { display: block; margin-top: 14px; }
.qrewz-case-study .hero__photo { aspect-ratio: 16 / 9; }
.qrewz-case-study .hero__photo img { object-fit: contain; }
.qrewz-project-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.qrewz-project-facts dt { margin-bottom: 8px; color: var(--steel); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.qrewz-project-facts dd { margin: 0; color: var(--mist); font-size: 20px; font-weight: 600; }
.qrewz-page-design { margin-top: 40px; scroll-margin-top: 100px; }
.qrewz-page-design h3 { margin-bottom: 16px; font-size: 26px; }
.qrewz-page-design .shot { margin: 0; }
.qrewz-case-study .case-focus li { color: var(--steel); }
.qrewz-case-study .case-focus strong { color: var(--mist); }
@media (max-width: 620px) {
  .qrewz-project-facts { grid-template-columns: 1fr; gap: 22px; }
  .qrewz-page-design { margin-top: 30px; }
}

/* ============================================================
   META ADS RESULTS — client cards and Tribuz screenshot case study
   ============================================================ */
#meta-ads, #campaign-screenshots { scroll-margin-top: 100px; }
.meta-ads-grid .work-card { display: flex; flex-direction: column; }
.meta-ads-grid .work-card > img { display: block; aspect-ratio: 1600 / 672; object-fit: contain; }
.meta-ads-grid .work-card__body { display: flex; flex: 1; flex-direction: column; }
.meta-ads-grid .work-card__metric { font-size: clamp(26px, 2.4vw, 32px); }
.meta-ads-grid .meta-ads-card__cost { color: var(--mist); font-size: 18px; font-weight: 600; }
.meta-ads-grid .work-card__more { margin-top: auto; padding-top: 12px; }
.meta-ads-grid .work-card__body > p { overflow-wrap: anywhere; }
.tribuz-hero-shot { align-self: center; }
.tribuz-case-study .shot img { display: block; }
.tribuz-evidence { display: grid; gap: 36px; }
.tribuz-case-study .shot a:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; border-radius: var(--radius-md); }
.tribuz-results-table { overflow-x: auto; }
.tribuz-results-table .rank-table { min-width: 660px; }
.tribuz-results-table tbody th { width: 52%; color: var(--mist); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.tribuz-results-table tbody th span { display: block; margin-top: 5px; color: var(--steel); font-size: 12px; }
.tribuz-case-study .case-section > .wrap > .source-note { margin-top: 24px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .meta-ads-grid a.work-card--case-link { transition: none; }
}

/* ============================================================
   GOOGLE ADS RESULTS — portfolio and service page dashboard cards
   ============================================================ */
#google-ads-results { scroll-margin-top: 100px; }
.google-ads-grid .work-card { display: flex; flex-direction: column; }
.google-ads-grid .work-card > img { display: block; aspect-ratio: 2 / 1; object-fit: contain; }
.google-ads-grid .work-card__body { display: flex; flex: 1; flex-direction: column; }
.google-ads-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 24px; }
.google-ads-metrics dt { color: var(--steel); font-size: 12px; margin-bottom: 6px; }
.google-ads-metrics dd { margin: 0; color: var(--mist); font-size: clamp(18px, 2vw, 24px); font-weight: 600; }
.google-ads-grid .work-card__more { margin-top: auto; }
.google-ads-results__portfolio { margin: 24px 0 40px; }
@media (prefers-reduced-motion: reduce) {
  .google-ads-grid a.work-card--case-link { transition: none; }
}

/* MORANDI CASE STUDY — match the website project layout used for Qrewz */
#morandi-work { scroll-margin-top: 100px; }
.morandi-case-study .hero__photo { aspect-ratio: 1600 / 771; }
.morandi-case-study .hero__photo img { object-fit: contain; }
.morandi-project-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.morandi-project-facts dt { margin-bottom: 8px; color: var(--steel); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.morandi-project-facts dd { margin: 0; color: var(--mist); font-size: 20px; font-weight: 600; }
.morandi-page-design { margin-top: 40px; scroll-margin-top: 100px; }
.morandi-page-design h3 { margin-bottom: 16px; font-size: 26px; }
.morandi-page-design .shot { margin: 0; }
@media (max-width: 620px) {
  .morandi-project-facts { grid-template-columns: 1fr; gap: 22px; }
  .morandi-page-design { margin-top: 30px; }
}

/* HOME WEBSITE PORTFOLIO — link to the remaining website projects */
.work__more-sites { margin-top: 28px; }
.work__more-sites .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.4; }

/* ============================================================
   Blog (listing + posts)
   ============================================================ */
.blog-list { padding: 64px 0 40px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--void-soft);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.3s var(--ease);
}
.blog-card:hover { border-color: var(--pepper); transform: translateY(-4px); }
.blog-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: left center; }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.blog-card__meta { color: var(--steel); font-size: 13.5px; }
.blog-card__title { font-size: 21px; line-height: 1.25; }
.blog-card__excerpt { color: var(--steel); font-size: 14.5px; }
.blog-card__more { margin-top: auto; padding-top: 6px; color: var(--ember); font-size: 14px; font-weight: 600; }

.post__hero { padding: 72px 0 8px; }
.post__wrap { max-width: 820px; }
.post__title { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin-bottom: 18px; }
.post__byline { color: var(--steel); font-size: 15px; }
.post__cover { max-width: 1040px; margin: 36px auto 0; padding: 0 32px; }
.post__cover img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 2px solid var(--line); }
.post__body { padding-top: 48px; padding-bottom: 32px; font-size: 18px; line-height: 1.75; color: #d6dce6; }
.post__body h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 48px 0 16px; }
.post__body h3 { font-size: 22px; line-height: 1.3; margin: 32px 0 12px; }
.post__body h4 { font-size: 19px; line-height: 1.35; margin: 26px 0 10px; }
.post__body p, .post__body ul, .post__body ol, .post__body table, .post__body blockquote { margin-bottom: 18px; }
.post__body ul, .post__body ol { padding-left: 24px; }
.post__body ul li { list-style: disc; margin-bottom: 8px; }
.post__body ol li { list-style: decimal; margin-bottom: 8px; }
.post__body strong { color: var(--mist); }
.post__body a:not(.btn) { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.post__body blockquote { border-left: 3px solid var(--pepper); padding: 4px 0 4px 22px; color: var(--mist); }
.post__body blockquote p:first-child { font-family: var(--font-display); font-size: 22px; line-height: 1.35; }
.post__body table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.post__body th, .post__body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.post__body th { background: var(--void-soft); color: var(--mist); }
.post__figure { margin: 28px 0; }
.post__figure img { max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); background: #fff; }
.post-cta {
  margin: 36px 0;
  padding: 28px 28px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--mist);
  background: linear-gradient(150deg, var(--navy) 0%, var(--pepper-dim) 140%);
}
.post-cta__title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #fff; }

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post__hero { padding-top: 52px; }
  .post__cover { padding: 0 20px; margin-top: 28px; }
  .post__body { font-size: 17px; padding-top: 36px; }
}

/* TUSHAR SALUJA AUTHOR PROFILE — founder biography and blog discovery */
.blog-founder-link { margin-top: 24px; }
.author-profile__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 64px; }
.author-profile__grid .hero__copy { max-width: none; }
.author-profile__role { margin: 0 0 18px; color: var(--ember); font-size: 19px; font-weight: 600; }
.author-profile__hero .hero__actions { margin-top: 28px; }
.author-profile__portrait { margin: 0; width: 320px; max-width: 100%; justify-self: center; }
.author-profile__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--line); border-radius: 50%; box-shadow: 10px 10px 0 rgba(230, 57, 70, .22); }
.author-profile__about { padding: 72px 0 0; }
.author-profile__bio { max-width: 800px; }
.author-profile__bio > p:not(.eyebrow) { margin-top: 22px; color: var(--steel); font-size: 17px; line-height: 1.7; }
.author-profile__quote { margin: 32px 0; padding: 20px 24px; border-left: 3px solid var(--pepper); background: var(--void-soft); }
.author-profile__quote p { color: var(--mist); font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.4; }
.author-profile__quote cite { display: block; margin-top: 16px; color: var(--steel); font-size: 13px; font-style: normal; }
.author-profile__topics-title { margin-bottom: 18px; font-size: 22px; }
.author-profile__articles { padding: 80px 0 100px; scroll-margin-top: 90px; }
.author-profile__articles .section-head { margin-bottom: 32px; }
.author-profile__all-posts { margin-top: 32px; }
@media (max-width: 760px) {
  .author-profile__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .author-profile__portrait { grid-row: 1; width: 220px; }
  .author-profile__about { padding-top: 56px; }
  .author-profile__articles { padding: 64px 0 72px; }
}

/* BLOG TABLE OF CONTENTS — every article H2, with native section links */
.post-toc { margin: 0 0 36px; padding: 24px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--void-soft); scroll-margin-top: 110px; }
.post-toc summary { display: list-item; list-style: revert; color: var(--mist); font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.post-toc summary::marker { color: var(--ember); }
.post-toc .post-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 22px 0 0; padding: 0; }
.post-toc .post-toc__list > li { min-width: 0; margin: 0; list-style: none; }
.post-toc .post-toc__list a { display: block; padding-left: 12px; border-left: 2px solid var(--line); color: var(--mist); font-size: 15px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.post-toc .post-toc__list a:hover { color: var(--ember); border-color: var(--pepper); }
.post__body h2[id] { scroll-margin-top: 110px; }
@media (max-width: 620px) {
  .post-toc { padding: 20px; }
  .post-toc .post-toc__list { grid-template-columns: minmax(0, 1fr); }
}

/* ARTICLE AUTHOR — Tushar Saluja byline and on-page profile */
.post__byline a { color: var(--ember); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.post-author { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 24px; margin-top: 40px; padding: 24px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--void-soft); scroll-margin-top: 110px; }
.post-author__photo { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 50%; }
.post-author__label { margin-bottom: 8px; color: var(--steel); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.post-author__name { margin-bottom: 8px; font-size: 24px; }
.post-author__role { margin-bottom: 14px; color: var(--ember); font-size: 14px; font-weight: 600; }
.post-author__bio { margin-bottom: 18px; color: var(--steel); font-size: 15.5px; line-height: 1.65; }
@media (max-width: 620px) {
  .post-author { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .post-author__photo { width: 64px; height: 64px; }
  .post-author__name { font-size: 22px; }
}