/* =========================================================
   Vikasa Strategic Partners — Design Tokens & Base Styles
   ========================================================= */

:root {
  /* Color */
  --color-ink: #17181b;
  --color-ink-muted: #55534d;
  --color-paper: #ffffff;
  --color-surface: #f4f3f1;
  --color-surface-2: #eae8e4;
  --color-line: #e2e0dc;
  --color-accent: #e33c2a;
  --color-accent-2: #e46e1f;
  --color-accent-ink: #ffffff;
  /* Darker variants of the brand red, used wherever it appears as TEXT on a
     light background or as a solid button fill under white text — the raw
     brand red (#e33c2a) reads great as a decorative fill but is a hair under
     WCAG AA (4.5:1) for text at those sizes, so interactive/text use gets
     these instead. --color-accent itself stays reserved for decorative fills
     (the pentagon mark, gradients) where contrast rules don't apply. */
  --color-accent-text: #ce2d1b;
  --color-accent-hover: #c12a19;
  /* Same idea in reverse: on the dark hero surface the raw brand red only
     hits ~4.05:1 (still under 4.5:1 AA) because it's a mid-value red losing
     contrast against near-black rather than white. A darker variant would
     make that worse, so this lightens the same hue/saturation instead,
     landing at ~4.9:1. Use for small red text sitting directly on
     --color-surface-dark, e.g. the hero eyebrow. */
  --color-accent-on-dark: #e75a4b;
  --color-surface-dark: #1b1b1d;
  --color-surface-dark-2: #232326;
  --color-on-dark: #f4f3f1;
  --color-on-dark-muted: #a9a7a2;
  --color-line-dark: #38383b;

  /* Type */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 14px;
  --shadow-sm: 0 1px 3px rgba(23, 24, 27, 0.08);
  --shadow-md: 0 12px 32px rgba(23, 24, 27, 0.12);

  --container-w: 1200px;
  --border-focus: 3px solid var(--color-accent-text);
}

/* =========================================================
   Reset
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0 0 var(--space-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-sm);
  max-width: 62ch;
}

a {
  color: var(--color-accent-text);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

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

ul, ol {
  padding-left: 1.2em;
}

button {
  font-family: inherit;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -60px;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-sm);
  color: #fff;
}

/* =========================================================
   Layout helpers
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-surface-dark);
  color: var(--color-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: #fff;
}

.section--dark p {
  color: var(--color-on-dark-muted);
}

/* Same ambient red/orange glow as the hero, applied as layered backgrounds
   so homepage dark bands (Featured Work, Final CTA) read as part
   of the same family rather than a new dark tone. */
.section--glow {
  background: radial-gradient(60% 60% at 85% 10%, rgba(227, 60, 42, 0.35), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(228, 110, 31, 0.2), transparent 65%),
    var(--color-surface-dark);
}

/* Section-level button row (mid-page "Let's Talk" CTAs). Deliberately
   just buttons -- no headline -- so it stays quieter than the final CTA. */
.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-sm);
}

.section--dark .eyebrow {
  color: var(--color-accent-2);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}

.section-head h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}

.section-intro {
  margin-top: var(--space-md);
  color: var(--color-ink-muted);
}

/* =========================================================
   Client logo strip (homepage, directly under the hero)
   A slow, never-pausing marquee. The logo set is duplicated end to end
   (second copy aria-hidden) and the track slides exactly one set width
   (-50%), so the loop restarts on an identical frame with no seam.
   ========================================================= */

.logo-strip {
  background: var(--color-paper);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
}

.logo-strip-label {
  max-width: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}

.logo-marquee {
  --logo-gap: 3.5rem;
  --logo-scale: 0.8;
  overflow: hidden;
  /* Soft fade at both edges so logos drift in and out rather than
     being cut off by a hard line. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
  display: flex;
  width: max-content;
  animation: logo-marquee 80s linear infinite;
}

.logo-set {
  list-style: none;
  margin: 0;
  /* Trailing padding equals the gap, so the join between the two copies
     is spaced exactly like every other pair of logos. */
  padding: 0 var(--logo-gap) 0 0;
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
}

.logo-set li {
  flex: none;
}

/* Width/height attributes carry each logo's area-balanced desktop size;
   --logo-scale shrinks them together on small screens. */
.logo-set img {
  width: auto;
  height: calc(var(--h, 60px) * var(--logo-scale));
  border-radius: 4px;
}

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 720px) {
  .logo-marquee {
    --logo-gap: 4rem;
    --logo-scale: 1;
  }
}

/* Reduced motion: no movement at all -- a static, centered, wrapped grid
   of a single copy of the logos. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logo-track {
    animation: none;
    width: auto;
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  .logo-set {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    gap: var(--space-md) var(--space-lg);
  }

  .logo-set[aria-hidden="true"] {
    display: none;
  }
}

/* Pentagon signature mark (used sparingly) */
.pentagon-clip {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.pentagon-bullet {
  flex: none;
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: linear-gradient(155deg, var(--color-accent-2), var(--color-accent));
  margin-top: 0.4em;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-accent-text);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn-secondary:hover {
  background: var(--color-ink);
  color: #fff;
}

.section--dark .btn-secondary,
.hero .btn-secondary {
  color: #fff;
  border-color: #fff;
}

.section--dark .btn-secondary:hover,
.hero .btn-secondary:hover {
  background: #fff;
  color: var(--color-ink);
}

.btn-block {
  width: 100%;
}

/* =========================================================
   Header / Nav
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

.brand:hover {
  color: var(--color-ink);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bars::before {
  content: "";
  position: absolute;
  top: -6px;
}

.nav-toggle-bars::after {
  content: "";
  position: absolute;
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--color-paper);
  padding: var(--space-lg) var(--space-md);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow-y: auto;
}

.site-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nav-list a {
  display: block;
  padding: var(--space-sm) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}

.nav-list a[aria-current="page"] {
  color: var(--color-accent-text);
}

.nav-list a:hover {
  color: var(--color-accent-text);
}

@media (min-width: 960px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: visible;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  /* min-height keeps the 44px minimum tap target; flex keeps the label
     vertically centered in the taller box. */
  .nav-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2xs) 0;
    font-size: 0.98rem;
    border-bottom: none;
    position: relative;
  }

  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--color-accent-text);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .nav-list a:hover::after,
  .nav-list a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  background: var(--color-surface-dark);
  color: #fff;
  padding-block: var(--space-2xl) var(--space-2xl);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(60% 60% at 85% 10%, rgba(227, 60, 42, 0.35), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(228, 110, 31, 0.2), transparent 65%);
  pointer-events: none;
}

/* Two-column layout: text column left, contained mockup image right.
   Both columns sit above the ambient radial glow (::before) via
   position + z-index, and never overlap one another. */
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-xl);
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    gap: var(--space-2xl);
  }

  /* Alternates the visual column order for scroll-rhythm variety between
     stacked step sections, without touching source order -- so the image
     still stacks below its own text on mobile/tablet regardless of which
     side it lands on at desktop. */
  .hero-grid--flip {
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  }

  .hero-grid--flip .hero-inner {
    order: 2;
  }

  .hero-grid--flip .hero-device-col {
    order: 1;
  }
}

.hero-inner {
  max-width: 34rem;
}

.hero .eyebrow {
  color: var(--color-accent-on-dark);
}

.hero h1 {
  font-size: clamp(2.3rem, 1.7rem + 3vw, 3.75rem);
  color: #fff;
}

.hero p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--color-on-dark-muted);
  max-width: 42ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Homepage hero composite (monitor + phone + camera on a desk). It's a wide
   ~2:1 banner, so it is never boxed: the edges are masked into the dark hero
   background, and a scrim on the inner edge keeps the copy readable.

   Tablet/phone: the image sits under the copy, full width and flush to the
   bottom of the hero, cropped from the right so the monitor and phone
   screens stay in frame.

   Desktop (960px+): it becomes a layer pinned to the right edge of the hero
   at full hero height; its left third fades to nothing, so the copy in the
   left column sits on dark background, not on the photo. */
.hero-media {
  position: relative;
  margin-top: var(--space-xl);
  aspect-ratio: 4 / 3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 76%, transparent 100%);
}

.hero-media picture,
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  /* Crop from the left so the phone at the far right stays whole. */
  object-position: 98% 50%;
}

@media (min-width: 600px) {
  .hero-media {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 960px) {
  /* The layer starts where the copy column ends (the column is ~46.7% of
     the 1152px container content) and runs to the viewport's right edge.
     The picture is 156.6% of the layer's width, right-aligned, which puts
     the monitor's left edge ~17% into the layer: exactly where the left
     fade finishes. So the fade only ever crosses the camera and plant, and
     the monitor and phone always sit clear of the text at any width. */
  .hero-media {
    --hero-content: min(100vw - 3rem, 1152px);
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc((100vw - var(--hero-content)) / 2 + var(--hero-content) * 0.4667);
    margin: 0;
    aspect-ratio: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17%);
    mask-image: linear-gradient(to right, transparent 0%, #000 17%);
  }

  /* Anchored to the bottom so the desk runs down to the section edge; the
     space left above the monitor is the photo's own dark backdrop plus the
     hero glow. */
  .hero-media picture {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(156.6%, 1600px);
    height: auto;
    /* Soft top and bottom edges on the photo itself. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  }

  .hero-media img {
    height: auto;
    object-fit: fill;
  }
}

/* =========================================================
   Compact hero (Our Work): a short intro band so the portfolio shows up
   sooner. Height comes from trimmed padding, not smaller type -- from
   960px the headline sits left and the copy right, tops aligned.
   ========================================================= */

.hero--compact {
  padding-block: var(--space-lg);
}

.hero-compact {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-sm);
}

.hero-compact .eyebrow {
  margin-bottom: 0;
}

.hero-compact h1 {
  margin-bottom: 0;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
}

.hero-compact-copy p {
  max-width: 46ch;
}

.hero-compact-copy p:last-child {
  margin-bottom: 0;
}

.hero-compact-arrow {
  display: inline-block;
  margin-left: 0.15em;
  color: var(--color-accent-on-dark);
}

@media (min-width: 640px) {
  .hero--compact {
    padding-top: var(--space-xl);
  }
}

/* Eyebrow on its own row; headline and copy share the row below, tops
   aligned. The headline column sizes to its longest line, so each
   sentence stays on one line; the copy takes the rest. */
@media (min-width: 960px) {
  .hero-compact {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "eyebrow ."
      "title   copy";
    align-items: start;
    column-gap: var(--space-xl);
  }

  .hero-compact .eyebrow {
    grid-area: eyebrow;
  }

  .hero-compact h1 {
    grid-area: title;
  }

  /* Optical alignment: drops the copy so its capitals line up with the
     lowercase (x-height) of "Local businesses." rather than the headline's
     cap tops, which read as too high. */
  .hero-compact-copy {
    grid-area: copy;
    padding-top: 0.75em;
  }
}

@media (min-width: 1200px) {
  .hero-compact {
    column-gap: var(--space-2xl);
  }
}

/* The gallery follows the compact hero directly, so it starts closer. */
.work-gallery-section {
  padding-top: var(--space-xl);
}

/* =========================================================
   Two-column hero variant (Website Promotion).
   Reuses .hero / .hero-grid from the main hero above. .hero-inner--wide and
   the .hero-device-col/.hero-device-visual pair below are shared by any
   interior-page hero that wants a laptop/screen photo on the right; the
   "approach" step row further down is specific to Website Promotion.
   ========================================================= */

.hero-inner--wide {
  max-width: 40rem;
}

/* Homepage hero: the headline is a four-part list plus two paragraphs, so
   the h1 runs a step smaller than other heroes and the band is a little
   less padded, keeping the buttons above the fold beside the photo. */
.hero--home {
  padding-block: var(--space-xl);
}

/* Stacked (below 960px) the photo ends the hero, so there's no bottom
   padding: it fades straight into the section edge. */
@media (max-width: 959px) {
  .hero--home {
    padding-bottom: 0;
  }
}

@media (min-width: 960px) {
  .hero--home {
    padding-block: var(--space-xl) var(--space-2xl);
  }
}

/* Phones (below 768px): the buttons move below the photo, so the order is
   eyebrow > headline > copy > photo > buttons. The markup has one set in
   the copy column and one after the photo; display:none keeps only one in
   view and in the accessibility tree at a time. */
.hero-actions--below {
  display: none;
}

@media (max-width: 767.98px) {
  .hero-actions--beside {
    display: none;
  }

  .hero-actions--below {
    display: block;
    position: relative;
    z-index: 2;
    padding-bottom: var(--space-xl);
  }

  .hero-actions--below .hero-actions {
    margin-top: var(--space-sm);
  }
}

/* Same idea for the Online Visibility step sections: on phones each step's
   button moves after its laptop/phone image. .hero-actions--beside (above)
   hides the copy in the text column; this is the copy that follows the
   image, as a third item in the stacked .hero-grid, whose 64px row gap
   spaces it from the image -- so no margin of its own. */
.hero-actions--after-media {
  display: none;
}

@media (max-width: 767.98px) {
  .hero-actions--after-media {
    display: flex;
    margin-top: 0;
  }
}

/* Sized so the longest phrase ("And Everything In Between.") fits on one
   line: stacked, the text gets the full column; side by side, the column
   is ~47% of the container, so the size tracks the viewport and caps at
   38.4px. */
.hero-inner--home h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.5rem);
}

@media (min-width: 960px) {
  .hero-inner--home h1 {
    font-size: clamp(1.75rem, 3.1vw - 0.2rem, 2.4rem);
  }
}

/* The headline is a list: each phrase starts its own line, and only wraps
   inside itself on narrow screens. */
.h1-stack span {
  display: block;
}

/* Side by side, "Custom Websites. Social Media." stays on one line: it runs
   slightly past the copy column into the empty gap before the hero image,
   rather than shifting the column (which would break its alignment with the
   logo and every section's left edge). Stacked, it breaks between the two
   phrases. */
@media (min-width: 960px) {
  .h1-stack span:first-child {
    white-space: nowrap;
  }
}

.hero p.hero-subhead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent-on-dark);
  margin: var(--space-lg) 0 var(--space-md);
}

.approach-steps {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
}

@media (min-width: 960px) {
  .approach-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}

.approach-step {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.approach-step-icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent-2);
  flex: none;
}

/* .hero p (font-size/color/max-width, for the hero's lead paragraph) is
   0,1,1 -- more specific than a single class -- so these need the extra
   .hero to reliably win instead of inheriting body-copy sizing. */
.hero p.approach-step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  max-width: none;
  margin: 0;
}

.hero p.approach-step-copy {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-on-dark-muted);
  max-width: none;
  margin: 0;
}

/* Right column: a soft ambient glow sits behind the photo, separate from the
   section-wide ambient glow (.hero::before), so the two columns read as
   layered rather than flat. Contained with no negative inset/rotation/
   overflow, so it can never bleed past the column at any width. */
.hero-device-col {
  position: relative;
}

.hero-device-col::before {
  content: "";
  position: absolute;
  inset: -6%;
  background: radial-gradient(55% 55% at 62% 32%, rgba(228, 110, 31, 0.35), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

/* The laptop photo itself: masked and scrimmed the same way .hero-media is
   (see above) so it fades into the dark hero instead of ending in a hard
   rectangle, just with an aspect ratio suited to this landscape photo
   instead of the homepage's portrait crop. */
.hero-device-visual {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 2;
  -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 92%,
      transparent 100%
    ),
    linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 92%,
      transparent 100%
    ),
    linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
}

.hero-device-visual picture,
.hero-device-visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-device-visual img {
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-device-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      115deg,
      rgba(27, 27, 29, 0.7) 0%,
      rgba(27, 27, 29, 0.3) 20%,
      rgba(27, 27, 29, 0) 50%
    ),
    linear-gradient(
      to bottom,
      rgba(27, 27, 29, 0.4) 0%,
      rgba(27, 27, 29, 0) 20%,
      rgba(27, 27, 29, 0) 80%,
      rgba(27, 27, 29, 0.4) 100%
    );
  pointer-events: none;
}

/* =========================================================
   Step feature panel (Website Promotion "Step 2: Promote It").
   A dark, hero-styled two-column block telling one step's full story --
   reuses .hero/.hero-grid/.hero-inner--wide/.hero-device-col/
   .hero-device-visual above, adds the icon+heading, subhead, and a 3-item
   stat row with dividers.
   ========================================================= */

.step-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
}

.step-heading-icon {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--color-accent-on-dark);
}

.hero p.step-subhead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  max-width: none;
  margin: 0 0 var(--space-sm);
}

.stat-row {
  list-style: none;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-xs);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: var(--space-md);
  border-left: 1px solid var(--color-line-dark);
}

.stat-item:first-child {
  padding-left: 0;
  border-left: none;
}

.stat-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-accent-on-dark);
}

.stat-item span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-on-dark);
  white-space: nowrap;
}

@media (max-width: 479px) {
  .stat-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-item {
    width: 100%;
    padding-inline: 0;
    padding-block: var(--space-2xs);
    border-left: none;
    border-top: 1px solid var(--color-line-dark);
  }

  .stat-item:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* =========================================================
   Outcome icon tiles (homepage "Why it matters")
   ========================================================= */

/* Lucide icon in a light-orange rounded tile above each card heading.
   Stroke is the brand red-orange: ~3.8:1 against the tile, above the 3:1
   non-text contrast minimum. */
.outcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fdf0e8;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.outcome-icon svg {
  width: 26px;
  height: 26px;
}

/* =========================================================
   Accordion ("Why it matters" on the homepage)
   Rows are separated by hairlines, not boxes. Panels collapse with the
   grid-template-rows 0fr -> 1fr technique, which animates to the content's
   real height without measuring it in JS. Collapsing only happens once JS
   adds .is-enhanced, so without JS every panel simply stays open.
   ========================================================= */

@media (min-width: 960px) {
  .why-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .why-layout .section-head {
    margin-bottom: 0;
  }
}

/* A fixed gap rather than centering against the accordion: the accordion's
   height changes as rows open, and a button that slid around with it would
   feel unstable. At desktop this gap brings the left column to within about
   a row's height of the collapsed accordion, so the two columns read as a
   matched pair. */
.why-cta {
  margin-top: var(--space-lg);
}

@media (min-width: 960px) {
  .why-cta {
    margin-top: var(--space-xl);
  }
}

/* Phones (below 768px): the button moves after the accordion, so the order
   is eyebrow > headline > intro > accordion > button. One copy sits under
   the intro, one after the accordion; display:none keeps only one in view
   and in the accessibility tree at a time. */
.why-cta--below {
  display: none;
}

@media (max-width: 767.98px) {
  .why-cta--beside {
    display: none;
  }

  .why-cta--below {
    display: block;
  }
}

.accordion {
  border-bottom: 1px solid var(--color-line);
}

.accordion-item {
  border-top: 1px solid var(--color-line);
}

.accordion-heading {
  margin: 0;
  font-size: inherit;
}

.accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
}

.accordion-trigger .outcome-icon {
  flex: none;
  margin-bottom: 0;
}

.accordion-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 800;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.accordion-trigger:hover .accordion-title {
  color: var(--color-accent-text);
}

/* Plus that becomes a minus: the vertical bar rotates flat onto the
   horizontal one when the row is open. */
.accordion-indicator {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline: var(--space-2xs);
}

.accordion-indicator::before,
.accordion-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--color-ink-muted);
  transition: transform 0.3s ease-in-out, background-color 0.2s ease;
}

.accordion-indicator::after {
  transform: rotate(90deg);
}

.accordion-trigger[aria-expanded="true"] .accordion-indicator::after {
  transform: rotate(0deg);
}

.accordion-trigger[aria-expanded="true"] .accordion-indicator::before,
.accordion-trigger[aria-expanded="true"] .accordion-indicator::after,
.accordion-trigger:hover .accordion-indicator::before,
.accordion-trigger:hover .accordion-indicator::after {
  background: var(--color-accent-text);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Copy lines up under the title (icon tile 48px + gap). */
.accordion-panel-inner p {
  margin: 0;
  padding: 0 0 var(--space-md) calc(48px + var(--space-sm));
  color: var(--color-ink-muted);
}

/* visibility flips at the end of a collapse (and at the start of an
   expand), so hidden copy is also hidden from screen readers. */
.accordion.is-enhanced .accordion-panel {
  transition: grid-template-rows 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.accordion.is-enhanced .accordion-item:not(.is-open) .accordion-panel {
  grid-template-rows: 0fr;
  visibility: hidden;
}

/* Set on first paint only, so the initial open/closed state doesn't animate. */
.accordion.is-initializing .accordion-panel,
.accordion.is-initializing .accordion-indicator::after {
  transition: none;
}

@media (max-width: 479px) {
  .accordion-panel-inner p {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion.is-enhanced .accordion-panel,
  .accordion-indicator::before,
  .accordion-indicator::after {
    transition: none;
  }
}

/* =========================================================
   Partnership / two-column with list
   ========================================================= */

.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: 1fr;
}

/* Top-align instead of center when one column (e.g. a longer bullet list)
   runs noticeably taller than the other, so the shorter column doesn't
   float in the middle of empty space. */
.split--top {
  align-items: start;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* "Services" (homepage): the six-item list is much taller than the intro,
   so on two-column screens the intro (headline, copy, button) sticks below
   the 76px header while the list scrolls past it -- the button stays a
   fixed distance under the paragraph rather than stranded at the list's
   foot. Sticky only on viewports tall enough to show the whole intro.
   Stacked, the button simply follows the paragraph. */
.partner-cta {
  margin-top: var(--space-lg);
}

/* Evens out the headline's line lengths so a short word isn't left alone
   on the last line. */
.partner-intro h2 {
  text-wrap: balance;
}

@media (min-width: 860px) {
  .partner-cta {
    margin-top: var(--space-xl);
  }
}

/* Phones (below 768px): the button moves after the six-item list, so the
   order is eyebrow > headline > copy > list > button. One copy sits in the
   intro, one after the list; display:none keeps only one in view and in
   the accessibility tree at a time. Stacked, .split's own 40px row gap
   spaces the lower copy from the last bullet, so it needs no margin. */
.partner-cta--below {
  display: none;
}

@media (max-width: 767.98px) {
  .partner-cta--beside {
    display: none;
  }

  .partner-cta--below {
    display: block;
    margin-top: 0;
  }

  /* With the button gone from under the copy, the copy-to-list gap would
     stack to 80px (paragraph margin + row gap + list margin); dropping the
     list's own margin keeps it at 56px. */
  .services-section .check-list {
    margin-top: 0;
  }
}

@media (min-width: 860px) and (min-height: 700px) {
  .partner-intro {
    position: sticky;
    top: calc(76px + var(--space-lg));
  }
}

.check-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.check-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* =========================================================
   Also Included (homepage, below Services)
   Twelve toggle pills share one explanation panel beneath them. Until
   main.js adds .is-enhanced, the pills/panel stay hidden and the copy
   shows as a plain list, so nothing is lost without JavaScript.
   ========================================================= */

.included {
  /* Sits between two white-adjacent bands (gray Services above, white About
     below), so a hairline marks where it ends. */
  border-bottom: 1px solid var(--color-line);
}

.included-pills,
.included-panel {
  display: none;
}

.included.is-enhanced .included-pills {
  display: flex;
}

.included.is-enhanced .included-panel {
  display: grid;
}

.included.is-enhanced .included-details {
  display: none;
}

.included-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.included-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 46px;
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.included-pill:hover {
  border-color: var(--color-ink-muted);
}

.included-pill:focus-visible {
  border-radius: 999px;
}

.included-pill[aria-expanded="true"] {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
  color: #fff;
}

.included-pill[aria-expanded="true"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* "+" drawn with two bars; the active pill rotates it 45deg into an "x". */
.included-pill-icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--color-accent-text);
  transition: transform 0.25s ease, color 0.2s ease;
}

.included-pill-icon::before,
.included-pill-icon::after {
  content: "";
  position: absolute;
  inset: 5px 0;
  background: currentColor;
  border-radius: 1px;
}

.included-pill-icon::after {
  transform: rotate(90deg);
}

.included-pill[aria-expanded="true"] .included-pill-icon {
  color: #fff;
  transform: rotate(45deg);
}

/* Open/close animates the panel's row height from 0fr to 1fr, so the page
   below eases down rather than jumping. Visibility keeps the closed panel
   out of the accessibility tree and tab order. */
.included-panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.included-panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0s;
}

.included-panel-clip {
  min-height: 0;
  overflow: hidden;
}

.included-panel-body {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: opacity 0.15s ease;
}

.included-panel-body.is-swapping {
  opacity: 0;
}

.included-panel-body p {
  margin: 0;
  max-width: 70ch;
}

.included-panel-body strong {
  font-family: var(--font-display);
  font-weight: 800;
}

/* No-JS fallback list */
.included-details {
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  max-width: 70ch;
}

.included-details dt {
  font-family: var(--font-display);
  font-weight: 800;
}

.included-details dd {
  margin: 0;
  color: var(--color-ink-muted);
}

/* Phones: pills just miss pairing up at natural width, so each one grows
   to fill its row -- pairs where two fit, full-width bars where they
   don't -- giving a clean right edge instead of a ragged column. */
@media (max-width: 767.98px) {
  .included-pills li {
    flex: 1 1 auto;
  }

  .included-pill {
    width: 100%;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .included-pills {
    gap: var(--space-sm);
  }

  .included-pill {
    gap: var(--space-xs);
    min-height: 48px;
    padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
    font-size: 1rem;
  }

  .included-panel-body {
    padding: var(--space-md) var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .included-pill,
  .included-pill-icon,
  .included-panel,
  .included-panel.is-open,
  .included-panel-body {
    transition: none;
  }
}

/* =========================================================
   Work / Portfolio cards
   ========================================================= */

.work-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .work-grid.work-grid--full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .work-grid.work-grid--featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper);
}

.work-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
}

.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body fills the card so the "Visit" link can sit on the bottom edge --
   cards in a row share a height, and their links line up even when one
   card's copy runs longer. */
.work-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-lg);
}

.work-card-industry {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-text);
}

.work-card h3 {
  font-size: 1.5rem;
  margin-top: var(--space-2xs);
}

.work-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
}

.tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-line);
}

.work-card-field {
  margin-bottom: var(--space-sm);
}

.work-card-field h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  margin: 0 0 0.2rem;
}

.work-card-field p {
  margin: 0;
}

.work-card-field p + p {
  margin-top: var(--space-xs);
}

.work-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: auto;
  padding-top: var(--space-sm);
  text-decoration: none;
}

.work-card-link::after {
  content: "\2197";
}

/* Work cards are light panels; when they sit in a dark band, undo the
   band's white-heading / muted-paragraph colors inside the card. */
.section--dark .work-card h3 {
  color: var(--color-ink);
}

.section--dark .work-card p {
  color: var(--color-ink);
}

.section--dark .work-card .work-card-industry {
  color: var(--color-accent-text);
}

/* =========================================================
   Work Gallery — device-framed previews (Our Work page)
   ========================================================= */

.pf {
  display: flex;
  flex-direction: column;
}

.pf-head {
  display: flex;
  align-items: center; /* centre the logo against the full name + meta block */
  gap: 1.25rem;
  margin-bottom: var(--space-md);
}

/* Supporting client mark to the left of the text. A shared height keeps every
   logo at a consistent visual scale despite differing aspect ratios (square
   emblems through to wide wordmarks); max-width is a safety cap only. */
.pf-logo {
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  max-width: 150px;
  object-fit: contain;
}

.pf-headtext {
  min-width: 0;
}

.pf-name {
  font-size: 1.4rem;
  margin: 0 0 0.15rem;
}

.pf-meta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0;
  max-width: none;
}

.pf-sep {
  color: var(--color-line);
  margin: 0 0.3em;
}

/* Composition: browser fills most of the width, phone leans against its
   lower-right corner. Both frames are pure CSS — no device photography. */
.pf-devices {
  position: relative;
  margin-bottom: var(--space-xs);
}

.pf-browser {
  position: relative;
  width: 82%;
  border: 1px solid var(--color-line-dark);
  border-radius: 10px;
  background: var(--color-surface-dark);
  box-shadow: 0 18px 40px -12px rgba(23, 24, 27, 0.28);
  overflow: hidden;
  z-index: 1;
}

.pf-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 30px;
  padding: 0 0.7rem;
  background: var(--color-surface-dark-2);
  border-bottom: 1px solid var(--color-line-dark);
}

.pf-dots {
  display: flex;
  gap: 5px;
  flex: none;
}

.pf-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4c4c52;
}

.pf-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-on-dark-muted);
  background: #303035;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-phone {
  position: absolute;
  left: 62%;
  bottom: 0;
  width: 33%;
  max-width: 140px;
  padding: 5px;
  border: 1px solid var(--color-line-dark);
  border-radius: 20px;
  background: var(--color-surface-dark);
  box-shadow: -14px 18px 36px -12px rgba(23, 24, 27, 0.32);
  transform: rotate(2.4deg);
  transform-origin: bottom left;
  z-index: 2;
}

.pf-phone-island {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 30%;
  height: 5px;
  border-radius: 999px;
  background: #000;
  opacity: 0.5;
  transform: translateX(-50%);
  z-index: 3;
}

.pf-viewport {
  position: relative;
  overflow: hidden;
  background: var(--color-paper);
}

.pf-viewport--desktop {
  aspect-ratio: 16 / 11;
}

.pf-viewport--mobile {
  aspect-ratio: 9 / 19.3;
  border-radius: 14px;
}

.pf-viewport picture {
  display: block;
}

.pf-shot {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
}

/* Promote to its own layer only while it's actually being scrolled, so a
   long gallery doesn't carry a dozen idle composited layers. */
@media (hover: hover) {
  .pf-viewport:hover .pf-shot {
    will-change: transform;
  }
}

.pf-hint {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: var(--space-xs) 0 0;
}

.pf-hint::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--color-accent-2);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.pf-link {
  align-self: flex-start;
  margin-top: var(--space-md);
}

@media (min-width: 720px) {
  .pf-browser {
    width: 78%;
  }
  .pf-phone {
    left: 70%;
    width: 23%;
    max-width: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-shot {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   About
   ========================================================= */

/* Founder photo sits first in source order so it lands above the copy on
   mobile and to the left on desktop. Cropped to 4:5 so it doesn't run
   taller than the copy beside it. */
.about-photo {
  margin: 0;
  max-width: 220px;
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Names the "I" in the first-person founder copy beside the photo. */
.about-caption {
  margin-top: var(--space-xs);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

.about-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
}

@media (min-width: 860px) {
  .split--about {
    grid-template-columns: 297px 1fr;
    gap: var(--space-xl);
  }

  .about-photo {
    max-width: none;
  }
}

/* =========================================================
   Final CTA
   ========================================================= */

.cta-final {
  text-align: center;
}

.cta-final .section-head {
  margin-inline: auto;
  text-align: center;
  max-width: 40rem;
}

.cta-final-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.cta-final .section-head p {
  margin-inline: auto;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Brand red text falls under AA on the dark surface; white keeps the
   number readable and lets the red button stay the focal point. */
.section--dark .phone-link {
  color: #fff;
}

.section--dark .phone-link:hover {
  color: var(--color-accent-on-dark);
}

/* "Services" nav link jumps here (#services), including from other pages
   via index.html#services; stop the scroll below the sticky 76px header. */
.services-section {
  scroll-margin-top: 76px;
}

/* Homepage final CTA: warm message on the left, contact form in a light
   card on the right. Stacks message-over-form below 960px. */
.cta-final--split {
  text-align: left;
  /* The homepage "Let's Talk" buttons jump here (#contact); stop the scroll
     below the sticky 76px header. */
  scroll-margin-top: 76px;
}

.cta-split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 960px) {
  .cta-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-2xl);
  }
}

.cta-message h2 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  text-wrap: balance;
}

.cta-message p {
  font-size: 1.1rem;
}

.cta-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-dark);
}

.cta-phone .phone-link {
  font-size: 1.35rem;
  min-height: 44px;
}

.cta-form-card {
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: var(--space-md);
}

@media (min-width: 480px) {
  .cta-form-card {
    padding: var(--space-lg);
  }
}

/* Card-width driven, not viewport driven: Name spans the card, Email and
   Phone share a row once the card is wide enough, Message spans again. */
.cta-form-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .cta-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cta-form-grid .form-field--full {
    grid-column: 1 / -1;
  }
}

.form-optional {
  font-weight: 500;
  color: var(--color-ink-muted);
}

.cta-form-footer {
  margin-top: var(--space-md);
}

/* The card is light, so undo the dark band's muted paragraph color. */
.cta-form-card p,
.section--dark .cta-form-card p {
  color: var(--color-ink-muted);
}

.form-required-note {
  margin: var(--space-xs) 0 0;
  font-size: 0.85rem;
}

/* Separates a dark final CTA from the dark footer directly below it. */
.cta-final.section--dark {
  border-bottom: 1px solid var(--color-line-dark);
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-on-dark-muted);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-lg);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  margin-bottom: var(--space-sm);
}

.footer-brand .brand-mark {
  width: 30px;
  height: 30px;
}

.footer-heading {
  font-family: var(--font-display);
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-list a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

.footer-list a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid var(--color-line-dark);
  padding-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: 0.85rem;
}

/* =========================================================
   Reveal-on-scroll (guarded by JS + reduced motion)
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Forms
   ========================================================= */

.form-field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-ink);
  min-height: 44px;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-accent-text);
}

.form-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: none;
  /* The error message includes the email address, one long unbreakable
     word that would otherwise push past the card on phones. */
  overflow-wrap: anywhere;
}

.form-status.is-success {
  display: block;
  background: #e7f4ea;
  color: #1c6b32;
}

.form-status.is-error {
  display: block;
  background: #fbe8e6;
  color: #a12c1d;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   404 page
   ========================================================= */

.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.error-page h1 {
  font-size: clamp(3rem, 2.4rem + 3vw, 6rem);
  color: var(--color-accent);
}

/* =========================================================
   Utility
   ========================================================= */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}