/* ============================================================
   Israel Pascual — Portfolio
   Editorial theme adapted from the socialtale.co design system
   ============================================================ */

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

:root {
  /* Layout */
  --container: 1180px;

  /* Surfaces */
  --paper: #f4f1ea;
  --surface: #ffffff;
  --panel: #141414;
  --panel-ink: #f2eee4;
  --panel-faint: #8e877a;
  --panel-hair: rgba(255, 255, 255, .09);

  /* Text */
  --ink: #141414;
  --mute: #6e685c;
  --mute-d: #8e877a;

  /* Accent */
  --clay: #e8512a;
  --clay-text: #2a0d04;
  --accent-soft: rgba(232, 81, 42, .16);

  /* Lines */
  --hair: rgba(20, 20, 20, .10);
  --hair-card: rgba(20, 20, 20, .16);
  --hair-d: rgba(255, 255, 255, .09);

  /* Buttons */
  --btn-bg: #e8512a;
  --btn-fg: #2a0d04;
  --btn-hover-bg: #141414;
  --btn-hover-fg: #f2eee4;
  --btn-glow: none;

  /* Fields */
  --field-bg: #f4f1ea;
  --field-border: rgba(20, 20, 20, .10);
  --field-focus: rgba(232, 81, 42, .45);

  /* Elevation */
  --shadow-card-idle: 0 10px 25px rgba(16, 18, 20, .05);
  --shadow-card: 0 16px 34px rgba(20, 20, 20, .09);
  --shadow-panel: 0 18px 44px -26px rgba(20, 20, 20, .35);

  /* Page backdrop */
  --page-image: none;
  --page-size: auto;
  --glow-rgb: 232, 81, 42;

  /* Footer */
  --footer-bg: #141414;
  --footer-fg: #f2eee4;
  --footer-faint: #8e877a;
  --footer-hair: rgba(255, 255, 255, .09);

  /* Misc */
  --nav-hover: #eae5da;
  --danger: #e8512a;

  color-scheme: light;
}

/* ------------------------------------------------------------
   Themes. "paper" is the default above; the four below are the
   dark palettes carried over from the Kape Tools board.
   ------------------------------------------------------------ */

html[data-theme="glass"] {
  color-scheme: dark;

  --paper: #0a1120;
  --surface: rgba(22, 31, 52, .74);
  --panel: #060b16;
  --panel-ink: #e9eefb;
  --panel-faint: rgba(233, 238, 251, .56);
  --panel-hair: rgba(255, 255, 255, .12);

  --ink: #e9eefb;
  --mute: rgba(233, 238, 251, .80);
  --mute-d: rgba(233, 238, 251, .56);

  --clay: #5b8cff;
  --clay-text: #07101f;
  --accent-soft: rgba(91, 140, 255, .16);

  --hair: rgba(255, 255, 255, .12);
  --hair-card: rgba(255, 255, 255, .12);
  --hair-d: rgba(255, 255, 255, .12);

  --btn-bg: #5b8cff;
  --btn-fg: #07101f;
  --btn-hover-bg: #e9eefb;
  --btn-hover-fg: #0a1120;
  --btn-glow: 0 0 22px rgba(91, 140, 255, .45);

  --field-bg: rgba(22, 31, 52, .55);
  --field-border: rgba(255, 255, 255, .14);
  --field-focus: rgba(91, 140, 255, .45);

  --shadow-card-idle: none;
  --shadow-card: none;
  --shadow-panel: none;

  --page-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(91, 140, 255, .16), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(139, 92, 246, .13), transparent 55%);
  --page-size: auto;
  --glow-rgb: 91, 140, 255;

  --footer-bg: #060b16;
  --footer-fg: #e9eefb;
  --footer-faint: rgba(233, 238, 251, .56);
  --footer-hair: rgba(255, 255, 255, .12);

  --nav-hover: rgba(255, 255, 255, .08);
  --danger: #ff8b8b;
}

html[data-theme="tron"] {
  color-scheme: dark;

  --paper: #02060c;
  --surface: rgba(3, 12, 24, .82);
  --panel: #01040a;
  --panel-ink: #d6f9ff;
  --panel-faint: rgba(214, 249, 255, .58);
  --panel-hair: rgba(0, 229, 255, .34);

  --ink: #d6f9ff;
  --mute: rgba(214, 249, 255, .82);
  --mute-d: rgba(214, 249, 255, .58);

  --clay: #00e5ff;
  --clay-text: #041014;
  --accent-soft: rgba(0, 229, 255, .16);

  --hair: rgba(0, 229, 255, .34);
  --hair-card: rgba(0, 229, 255, .34);
  --hair-d: rgba(0, 229, 255, .34);

  --btn-bg: #00e5ff;
  --btn-fg: #041014;
  --btn-hover-bg: #d6f9ff;
  --btn-hover-fg: #02060c;
  --btn-glow: 0 0 22px rgba(0, 229, 255, .50);

  --field-bg: rgba(3, 12, 24, .60);
  --field-border: rgba(0, 229, 255, .52);
  --field-focus: rgba(0, 229, 255, .45);

  --shadow-card-idle: none;
  --shadow-card: none;
  --shadow-panel: none;

  --page-image:
    linear-gradient(rgba(0, 229, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .045) 1px, transparent 1px);
  --page-size: 42px 42px;
  --glow-rgb: 0, 229, 255;

  --footer-bg: #01040a;
  --footer-fg: #d6f9ff;
  --footer-faint: rgba(214, 249, 255, .58);
  --footer-hair: rgba(0, 229, 255, .34);

  --nav-hover: rgba(0, 229, 255, .10);
  --danger: #ff7b7b;
}

html[data-theme="tron-purple"] {
  color-scheme: dark;

  --paper: #08050f;
  --surface: rgba(18, 10, 32, .82);
  --panel: #05030b;
  --panel-ink: #f4eaff;
  --panel-faint: rgba(244, 234, 255, .58);
  --panel-hair: rgba(168, 85, 247, .34);

  --ink: #f4eaff;
  --mute: rgba(244, 234, 255, .82);
  --mute-d: rgba(244, 234, 255, .58);

  --clay: #a855f7;
  --clay-text: #12061f;
  --accent-soft: rgba(168, 85, 247, .16);

  --hair: rgba(168, 85, 247, .34);
  --hair-card: rgba(168, 85, 247, .34);
  --hair-d: rgba(168, 85, 247, .34);

  --btn-bg: #a855f7;
  --btn-fg: #12061f;
  --btn-hover-bg: #f4eaff;
  --btn-hover-fg: #08050f;
  --btn-glow: 0 0 22px rgba(168, 85, 247, .50);

  --field-bg: rgba(18, 10, 32, .60);
  --field-border: rgba(168, 85, 247, .52);
  --field-focus: rgba(168, 85, 247, .45);

  --shadow-card-idle: none;
  --shadow-card: none;
  --shadow-panel: none;

  --page-image:
    linear-gradient(rgba(168, 85, 247, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, .045) 1px, transparent 1px);
  --page-size: 42px 42px;
  --glow-rgb: 168, 85, 247;

  --footer-bg: #05030b;
  --footer-fg: #f4eaff;
  --footer-faint: rgba(244, 234, 255, .58);
  --footer-hair: rgba(168, 85, 247, .34);

  --nav-hover: rgba(168, 85, 247, .10);
  --danger: #ff7b7b;
}

html[data-theme="tron-red"] {
  color-scheme: dark;

  --paper: #0c0507;
  --surface: rgba(30, 8, 12, .82);
  --panel: #080306;
  --panel-ink: #ffe9ee;
  --panel-faint: rgba(255, 233, 238, .58);
  --panel-hair: rgba(255, 59, 92, .34);

  --ink: #ffe9ee;
  --mute: rgba(255, 233, 238, .82);
  --mute-d: rgba(255, 233, 238, .58);

  --clay: #ff3b5c;
  --clay-text: #1c0509;
  --accent-soft: rgba(255, 59, 92, .16);

  --hair: rgba(255, 59, 92, .34);
  --hair-card: rgba(255, 59, 92, .34);
  --hair-d: rgba(255, 59, 92, .34);

  --btn-bg: #ff3b5c;
  --btn-fg: #1c0509;
  --btn-hover-bg: #ffe9ee;
  --btn-hover-fg: #0c0507;
  --btn-glow: 0 0 22px rgba(255, 59, 92, .50);

  --field-bg: rgba(30, 8, 12, .60);
  --field-border: rgba(255, 59, 92, .52);
  --field-focus: rgba(255, 59, 92, .45);

  --shadow-card-idle: none;
  --shadow-card: none;
  --shadow-panel: none;

  --page-image:
    linear-gradient(rgba(255, 59, 92, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 59, 92, .045) 1px, transparent 1px);
  --page-size: 42px 42px;
  --glow-rgb: 255, 59, 92;

  --footer-bg: #080306;
  --footer-fg: #ffe9ee;
  --footer-faint: rgba(255, 233, 238, .58);
  --footer-hair: rgba(255, 59, 92, .34);

  --nav-hover: rgba(255, 59, 92, .10);
  --danger: #ff7b7b;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Android Chrome / iOS Safari paint a translucent rectangle over anything
     tapped; this is the loudest "this is a website" tell. */
  -webkit-tap-highlight-color: transparent;
}

/* Controls respond on press, not on release, and never select their label. */
a,
button,
summary {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--paper);
  background-image: var(--page-image);
  background-size: var(--page-size);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

img {
  max-width: 100%;
}

/* Shared display face */
.hero h1,
.section-heading,
.service-card h2,
.service-card h3,
.challenge-panel h3,
.action-section h3,
.result-num,
.footer-wordmark {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
}

/* Skip link */
.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ============================================================
   Header / navigation
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100% - 80px, var(--container));
  min-height: 78px;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-accent {
  color: var(--clay);
}

/* Diamond mark carried over from the reference logo; currentColor lets the
   theme accent drive both the stroke and its glow. */
.brand-mark {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  overflow: visible;
  color: var(--clay);
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.primary-nav a {
  color: var(--mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .15s ease;
}

.primary-nav a:focus-visible {
  color: var(--ink);
}

/* Desktop nav, the same treatment as the pill buttons: each item is a pill that
   is invisible at rest, so the only thing the pointer ever paints is the rising
   blob. Scoped to a fine pointer and up past the burger breakpoint, so the
   dropdown rows below 961px keep their own quiet hover. The 2px gap plus the
   16px of side padding on each item leaves the labels 34px apart, exactly as
   they sat before the pills existed. */
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .primary-nav {
    gap: 2px;
  }

  .primary-nav a {
    position: relative;
    /* Paints the fill above the pill's (transparent) background but under the
       label, so the text is never covered. */
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 100px;
    line-height: 1;
    /* The label waits .15s so it flips exactly as the fill's edge reaches it. */
    transition: color .15s linear .15s;
  }

  .primary-nav a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--btn-hover-bg);
    transform: translateY(103%) scale(1);
    transition: transform .6s cubic-bezier(.25, .1, .25, 1);
    pointer-events: none;
  }

  /* Hover and the section you are actually reading share one end state. */
  .primary-nav a:hover,
  .primary-nav a[aria-current="true"] {
    color: var(--btn-hover-fg);
  }

  .primary-nav a:hover::after,
  .primary-nav a[aria-current="true"]::after {
    transform: translateY(0) scale(1.47);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

/* Pill buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  /* Keeps the hover fill above the button's own background but under the
     label, so the text is never covered. */
  isolation: isolate;
  overflow: hidden;
  padding: 13px 28px;
  border: none;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* The colour flip waits .15s so the label only changes once the hover fill
     has reached it — the delay lives here so it applies both ways. */
  /* No shadow at rest. The glow arrives on hover over the fill's own duration and
     curve, so the pill brightens as it fills and dims as it drains; the shadow
     transition lives here because transitions apply both ways. */
  transition: box-shadow .6s cubic-bezier(.25, .1, .25, 1), background-color .33s linear,
    color .15s linear .15s, border-color .5s ease-out, transform .15s ease;
}

/* The WhatsApp hover fill: a round blob parked below the pill, clipped by
   overflow, that rises and swells until it swallows the button. Parked at
   103% — tight enough that the rise begins the instant the pointer arrives,
   with enough clearance that no hairline shows at rest. */
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--btn-hover-bg);
  transform: translateY(103%) scale(1);
  /* Front-loaded: initial slope 0.4 rather than 0, so it leaves the gate at
     once and then decelerates into place. */
  transition: transform .6s cubic-bezier(.25, .1, .25, 1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  /* Only the label and the glow change here — the rising fill is the colour
     change. If the pill's own background swapped too, it would land on the fill's
     colour in 0.33s, well before the blob clears the bottom edge, and the entry
     would read as a flat fade with the motion only visible on the way out.
     :not(:disabled) so a pill that is mid-submit never lights up. */
  .button:not(:disabled):hover {
    color: var(--btn-hover-fg);
    box-shadow: var(--btn-glow);
  }

  .button:hover::after {
    transform: translateY(0) scale(1.47);
  }
}

/* A button that is mid-submit keeps its own colour and no fill. */
.button:disabled::after {
  content: none;
}

.button:active {
  transform: scale(.97);
}

.site-header .button {
  padding: 12px 22px;
}

/* Mobile burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}

.site-header.nav-open .nav-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header.nav-open .nav-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Layout utilities
   ============================================================ */
.site-main {
  min-height: 1px;
}

.section-shell {
  width: min(100% - 80px, var(--container));
  margin-inline: auto;
}

/* Keep in-page anchors clear of the sticky header. */
section[id],
main[id] {
  scroll-margin-top: 88px;
}

/* Kicker */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  color: var(--mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.section-eyebrow::before {
  display: inline-block;
  width: 26px;
  height: 2px;
  flex-shrink: 0;
  background: var(--clay);
  content: "";
}

.section-heading {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 5vw, 58px);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 52px 0 44px;
  background: var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: 48px;
  width: min(100% - 80px, var(--container));
  min-height: 560px;
  margin-inline: auto;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.tiktok-mark {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 17px;
  object-fit: contain;
}

/* The mark is drawn in black, so it disappears against the dark themes. */
html[data-theme="glass"] .tiktok-mark,
html[data-theme="tron"] .tiktok-mark,
html[data-theme="tron-purple"] .tiktok-mark,
html[data-theme="tron-red"] .tiktok-mark {
  filter: invert(1);
}

.hero h1 {
  margin: 24px 0 0;
  color: var(--ink);
  font-size: clamp(40px, 4.8vw, 68px);
}

.hero h1 span {
  display: block;
}

.hero-heading-accent {
  color: var(--clay);
}

.hero-body {
  max-width: 54ch;
  margin-top: 18px;
  color: var(--mute);
  font-size: 16px;
  line-height: 1.7;
}

.hero-body p {
  margin: 0;
}

.hero-body p + p {
  margin-top: 10px;
}

.hero-cta {
  margin-top: 26px;
}

.hero-cta-arrow {
  font-size: 14px;
  line-height: 1;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
}

.hero-phone-art {
  display: block;
  width: min(100%, 560px);
  height: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* The hero's second option: same pill, no fill of its own, so the pair reads as
   one primary and one secondary. It keeps the rise-and-swell on hover. */
.button-quiet {
  padding: 12px 27px;
  /* --hair-card, not --hair-d: the latter is a white hairline for dark surfaces
     and disappears on the paper theme. */
  border: 1px solid var(--hair-card);
  background: transparent;
  color: var(--clay);
}

/* The service list, repeated from the panel so it is readable without it. */
.hero-service-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  color: var(--mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-service-line li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-service-line li::before {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--clay);
  content: "";
}

/* The operations panel: a decorative readout of the same services. It is
   aria-hidden, so nothing here carries meaning the copy does not already. */
.ops-panel {
  width: min(100%, 520px);
  padding: 22px 22px 8px;
  border: 1px solid var(--hair-card);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card-idle);
}

.ops-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ops-mark {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--clay);
}

.ops-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ops-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
}

.ops-row:first-child {
  border-top: 0;
}

.ops-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
}

.ops-name {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ops-meter {
  height: 2px;
  background: var(--hair);
}

/* Each bar fills once on load, staggered down the panel. Decorative widths, not
   claims. Reduced motion collapses the animation globally, so the bars simply
   appear at full width. */
.ops-meter > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--clay);
  animation: ops-fill .9s cubic-bezier(.25, .1, .25, 1) forwards;
}

@keyframes ops-fill {
  to {
    width: var(--fill);
  }
}

.ops-row:nth-child(1) .ops-meter > span { --fill: 92%; animation-delay: 0ms; }
.ops-row:nth-child(2) .ops-meter > span { --fill: 86%; animation-delay: 70ms; }
.ops-row:nth-child(3) .ops-meter > span { --fill: 78%; animation-delay: 140ms; }
.ops-row:nth-child(4) .ops-meter > span { --fill: 84%; animation-delay: 210ms; }
.ops-row:nth-child(5) .ops-meter > span { --fill: 74%; animation-delay: 280ms; }
.ops-row:nth-child(6) .ops-meter > span { --fill: 96%; animation-delay: 350ms; }
.ops-row:nth-child(7) .ops-meter > span { --fill: 88%; animation-delay: 420ms; }

/* ============================================================
   Services
   ============================================================ */
.services {
  padding: 64px 0;
  border-top: 1px solid var(--hair);
  background: var(--paper);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.service-card {
  padding: 22px;
  border: 1px solid var(--hair-card);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card-idle);
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
  }

  .service-card:hover .service-card-link::after {
    transform: translateX(3px);
  }
}

.service-card h2,
.service-card h3 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.08;
}

/* The My Services hub describes each service in a sentence instead of the
   homepage's check list, and links to the service's own page. */
.service-card p {
  margin: 0 0 18px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.6;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clay);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.service-card-link:hover {
  text-decoration: underline;
}

.service-card-link::after {
  content: "\2192";
  transition: transform .2s ease;
}

.service-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.55;
}

.check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

/* ============================================================
   Case study / results
   ============================================================ */
.case-study {
  padding: 64px 0;
  border-top: 1px solid var(--hair);
  background: var(--paper);
}

.results-intro {
  max-width: 900px;
}

.results-subtitle {
  max-width: 60ch;
  margin: 22px 0 0;
  color: var(--mute);
  font-size: 16px;
  line-height: 1.7;
}

/* Metrics strip */
.results-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 38px;
  border-top: 1px solid var(--hair);
}

.result-stat {
  flex: 1;
  min-width: 220px;
  padding: 22px 0;
}

.result-stat + .result-stat {
  padding-left: 34px;
  border-left: 1px solid var(--hair);
}

.result-num {
  display: block;
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
}

.result-label {
  display: block;
  margin-top: 7px;
  color: var(--mute);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Dark media panel */
.case-media-panel {
  margin-top: 44px;
  padding: 30px;
  border: 1px solid var(--panel-hair);
  border-radius: 18px;
  background: var(--panel);
  color: var(--panel-ink);
  box-shadow: var(--shadow-panel);
}

.case-media-item {
  margin: 0;
}

.case-media-item + .case-media-item {
  margin-top: 26px;
}

.case-media-item figcaption {
  margin-bottom: 10px;
  color: var(--panel-faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.case-media-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--panel-hair);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .55);
}

/* Challenge + actions */
.case-story {
  display: grid;
  gap: 48px;
  margin-top: 54px;
}

.challenge-panel {
  padding: 26px 28px 28px;
  border: 1px solid var(--hair-card);
  border-radius: 18px;
  background: var(--surface);
}

.challenge-panel h3,
.action-section h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.08;
}

.challenge-panel p {
  max-width: 78ch;
  margin: 0;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.65;
}

.action-section h3 {
  margin-bottom: 22px;
  font-size: 30px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--hair-card);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card-idle);
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
  }
}

.action-card p {
  margin: 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.6;
}

.action-card strong {
  color: var(--ink);
  font-weight: 600;
}

/* ============================================================
   Contact
   ============================================================ */
.contact {
  padding: 64px 0;
  border-top: 1px solid var(--hair);
  background: var(--paper);
}

.contact .section-eyebrow {
  justify-content: center;
}

.contact .section-heading {
  text-align: center;
}

/* Centre the label itself: the tick (26px) plus the 12px gap hang outside the
   flow so "Get Started" lands on the centre line, not 19px right of it. */
.contact .section-eyebrow::before {
  margin-left: -38px;
}

.contact-form {
  max-width: 900px;
  margin: 38px auto 0;
  padding: 2.5rem 2rem;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--surface);
}

.contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.contact-field {
  display: grid;
  gap: 8px;
}

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

.contact-field label {
  color: var(--mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: .88rem;
  outline: none;
  transition: border-color .2s;
}

.contact-field textarea {
  min-height: 148px;
  line-height: 1.6;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--field-focus);
}

.contact-actions {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.contact-submit {
  width: 100%;
  padding: 1rem 2.5rem;
  font-size: .8rem;
  letter-spacing: .14em;
}

.contact-submit:disabled {
  cursor: progress;
  opacity: .72;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact-submit:disabled:hover {
    background: var(--clay);
    color: var(--clay-text);
  }
}

/* Submission feedback */
.form-status {
  min-height: 1.35em;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.form-status--success {
  color: var(--ink);
}

.form-status--error {
  color: var(--danger);
}

/* Floating theme switcher */
.theme-toggle {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--hair-card);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-card-idle);
  backdrop-filter: blur(10px);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    border-color: var(--clay);
    color: var(--clay);
    box-shadow: var(--btn-glow), var(--shadow-card);
    transform: translateY(-2px);
  }
}

.theme-toggle:active {
  transform: translateY(0);
}

.theme-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

@media (max-width: 960px) {
  .theme-toggle {
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .theme-toggle {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
  }
}

/* Spam trap — kept off-screen and out of the layout */
.contact-field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 64px 0;
  border-top: 1px solid var(--hair);
  background: var(--paper);
}

.faq-lead {
  max-width: 60ch;
  margin: 22px auto 0;
  color: var(--mute);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

.faq .section-eyebrow {
  justify-content: center;
}

/* Same trick as the contact section: the tick hangs outside the flow so the
   "FAQ" label itself sits on the centre line. */
.faq .section-eyebrow::before {
  margin-left: -38px;
}

.faq .section-heading {
  text-align: center;
}

.faq-list {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 36px auto 0;
}

.faq-item {
  border: 1px solid var(--hair-card);
  border-radius: 18px;
  background: var(--surface);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  flex-shrink: 0;
  color: var(--clay);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  content: "+";
}

.faq-item[open] > summary::after {
  content: "−";
}

.faq-item > summary:focus-visible {
  border-radius: 18px;
  outline: 2px solid var(--clay);
  outline-offset: -4px;
}

.faq-answer {
  padding: 0 22px 22px;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.7;
}

.faq-answer p {
  margin: 0;
}

.faq-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-steps li {
  position: relative;
  padding-left: 20px;
}

.faq-steps li::before {
  position: absolute;
  top: .68em;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--clay);
  content: "";
}

.faq-steps strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .faq-item > summary {
    padding: 18px 18px;
    font-size: 15px;
  }

  .faq-answer {
    padding: 0 18px 20px;
  }

  .faq-list {
    gap: 12px;
    margin: 30px auto 0;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: 56px 0 30px;
  border-top: 1px solid var(--footer-hair);
  background: var(--footer-bg);
  color: var(--footer-fg);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer-brand {
  display: grid;
  gap: 10px;
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  line-height: 1;
}

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

.footer-tagline {
  margin: 0;
  color: var(--footer-faint);
  font-size: 13px;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--footer-hair);
  border-radius: 50%;
  color: var(--footer-fg);
  -webkit-touch-callout: none;
  transition: border-color .2s, color .2s;
}

.footer-social a:focus-visible {
  border-color: var(--clay);
  color: var(--clay);
}

.footer-social a:active {
  border-color: var(--clay);
  color: var(--clay);
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    border-color: var(--clay);
    color: var(--clay);
  }
}

.footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-copyright {
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--footer-hair);
  color: var(--footer-faint);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .header-inner {
    grid-template-columns: auto 1fr;
    gap: 12px;
    width: min(100% - 64px, var(--container));
    min-height: 68px;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: grid;
    justify-content: stretch;
    justify-items: stretch;
    gap: 0;
    padding: 6px;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 44px -26px rgba(20, 20, 20, .35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }

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

  .primary-nav a {
    padding: 14px 16px;
    border-radius: 9px;
    font-size: 12px;
    text-align: left;
    transition: background-color .15s, color .15s;
  }

  .primary-nav a:focus-visible,
  .primary-nav a:active {
    background: var(--nav-hover);
    color: var(--ink);
  }

  @media (hover: hover) and (pointer: fine) {
    .primary-nav a:hover {
      background: var(--nav-hover);
      color: var(--ink);
    }
  }

  .nav-toggle {
    display: flex;
  }

  .section-shell,
  .hero-grid {
    width: min(100% - 64px, var(--container));
  }

  .hero {
    padding: 44px 0 40px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: auto;
  }

  .hero-copy {
    max-width: 640px;
  }

  .hero h1 {
    font-size: clamp(38px, 7vw, 64px);
  }

  .hero-phone-art {
    width: min(100%, 520px);
  }

  .services,
  .case-study,
  .contact,
  .faq {
    padding: 52px 0;
  }

  .case-media-panel {
    padding: 20px;
  }

  .case-story {
    gap: 40px;
    margin-top: 44px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .site-footer {
    padding: 44px 0 28px;
  }
}

@media (max-width: 720px) {
  .services-grid,
  .action-grid,
  .contact-fields {
    grid-template-columns: 1fr;
  }

  .section-heading {
    font-size: clamp(32px, 9vw, 44px);
  }

  .results-stats {
    display: grid;
    margin-top: 32px;
  }

  .result-stat {
    padding: 20px 0;
  }

  .result-stat + .result-stat {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
  }

  .result-num {
    font-size: 28px;
  }

  .challenge-panel {
    padding: 24px 22px 26px;
  }

  .action-section h3 {
    font-size: 26px;
  }

  .case-media-item + .case-media-item {
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    width: min(100% - 40px, var(--container));
  }

  .brand {
    gap: 4px;
    font-size: 12px;
    letter-spacing: .2em;
  }

  /* Keep the brand + actions inside the 320px header at this size. */
  .brand-mark {
    width: 16px;
    height: 16px;
    margin-right: 1px;
  }

  .nav-toggle {
    margin-right: 0;
  }

  .site-header .button {
    padding: 11px 16px;
    font-size: 10px;
  }

  .section-shell,
  .hero-grid {
    width: min(100% - 40px, var(--container));
  }

  .hero {
    padding: 36px 0 32px;
  }

  .hero h1 {
    margin-top: 20px;
    font-size: clamp(34px, 10vw, 46px);
  }

  .tiktok-mark {
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
  }

  .hero-body {
    font-size: 15px;
  }

  .services,
  .case-study,
  .contact,
  .faq {
    padding: 44px 0;
  }

  .services-grid {
    margin-top: 28px;
  }

  .service-card {
    padding: 20px;
  }

  .case-media-panel {
    padding: 13px;
  }

  .case-media-item img {
    border-radius: 10px;
  }

  .contact-form {
    padding: 1.8rem 1.2rem;
  }

  .footer-wordmark {
    gap: 6px;
    font-size: 21px;
  }

  .footer-social {
    gap: 10px;
  }

  .footer-social a {
    width: 38px;
    height: 38px;
  }

  .footer-social svg {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}