/* ===========================================================
   Marketing Studio — shared styles
   Style direction: Bold & Editorial
   =========================================================== */

:root {
  /* Palette 2: black / gold / cream — see README for the palette-1 (blue) swap */
  --bg: #181818;
  --bg-alt: #212121;
  --fg: #f5f3ed;
  --muted: #b8b4a8;
  --accent: #f5c518;
  --accent-dark: #d9ad16;
  --on-accent: #151512;   /* text and icons placed on top of --accent */
  --border: #2c2c2a;
  --radius: 0.625rem;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --container: max(90rem, 80vw);               /* max page width, side gutters included — ~80% of big screens */
  --gutter: clamp(1.5rem, 4vw, 4rem);          /* page side padding: 24px on phones, grows with the screen */
}

* { box-sizing: border-box; }

/* Every size in this file is in rem, so the whole design scales off this one value.
   Up to a 1440px-wide window it's the normal 16px; past that it grows with the screen,
   reaching 1.25x (20px) at 2560px — big monitors get a bigger site instead of wide empty margins.
   To make big screens larger/smaller, change the last value (1.25rem) and the slope together:
   middle term = 16px - 1440px * s + s * 100vw, where s = (max px - 16) / 1120. */
html {
  font-size: clamp(1rem, 0.6786rem + 0.3571vw, 1.25rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
}
body.nav-open { overflow: hidden; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h2 { text-wrap: balance; }   /* no lone word on the last line of a section heading */

p { margin: 0 0 1em; color: var(--muted); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

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

/* ---------- header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(21, 21, 18, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 50;
}
.nav { display: flex; align-items: center; justify-content: space-between; padding-top: 1.375rem; padding-bottom: 1.375rem; }   /* keeps .container's side padding */
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--fg);
}
.logo-link { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.logo-mark { height: 1.625rem; width: auto; display: block; }
.footer-logo .logo-mark { height: 1.875rem; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.875rem); list-style: none; margin: 0; padding: 0; }
/* .btn is excluded so the "Get a quote" button keeps its own colors */
.nav-links a:not(.btn) {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"] { color: var(--accent); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 6.25rem;
  padding: 0.875rem 1.625rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-outline:hover { background: var(--fg); color: var(--bg); }
.btn-sm { padding: 0.625rem 1.125rem; font-size: 0.8125rem; }

.text-link {
  color: var(--fg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.3125rem;
  white-space: nowrap;
}
.text-link:hover { color: var(--accent); }

/* ---------- layout helpers ---------- */
.section { padding: 6rem 0; }
.section-alt { background: var(--bg-alt); }
.section-title { font-size: clamp(1.875rem, 4.2vw, 2.75rem); max-width: 45rem; }
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.875rem;
  display: block;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: center; }
.card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }

/* ---------- service (a la carte) cards ---------- */
.service-card { padding: 2.5rem 2.25rem; }
.service-card h3 { font-size: 1.3125rem; }
.card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  margin-bottom: 1.375rem;
  flex-shrink: 0;
}
.card-icon svg { width: 1.75rem; height: 1.75rem; display: block; }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.hero + .section { padding-top: 5rem; }   /* the section right under the hero starts closer */
.hero h1 { font-size: clamp(2.375rem, 5.5vw, 4.25rem); }
.hero-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.75rem; flex-wrap: wrap; }
.tag-row { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* "Built for <trade>" line above the home headline; the trade word cycles with the hero picture (js/hero-work.js) */
.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35em;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
  color: var(--fg);
}
.rotator { display: inline-grid; overflow: hidden; padding-bottom: 0.14em; color: var(--accent); }
.rotator > span {
  grid-area: 1 / 1;           /* all words share one cell, so the line never jumps */
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  opacity: 0;
  transform: translateY(105%);
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
}
.rotator > .is-active { opacity: 1; transform: none; }
.rotator > .is-leaving { opacity: 0; transform: translateY(-105%); }
.hero-lead { max-width: 33rem; font-size: 1.125rem; }
.hero-lead strong { font-weight: 600; color: var(--fg); }
/* The stat card under the hero buttons cycles through several stats, like the "Built for ..." line
   (js/hero-stats.js). The segmented gold bar sets the pace: when a segment fills, the next stat
   slides in with its number counting up. Hovering (or keyboard focus) pauses it; segments are buttons. */
.hero-stat {
  max-width: 33rem;
  margin-top: 2rem;
  padding: 1.125rem 1.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent);   /* gold edge on the left */
}
.hero-stat-slides { display: grid; }
.hero-stat-slide {
  grid-area: 1 / 1;            /* all stats share one cell, so the card never changes height */
  display: grid;
  /* fixed column for the number: the sentence never shifts while a number counts up
     (e.g. "3.0x" -> "3x"), and it starts at the same place for every stat.
     Widen it if a stat number ever gets longer than three characters. */
  grid-template-columns: auto 6.25rem 1fr;
  align-items: center;
  gap: 0 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.hero-stat-slide.is-active,
.hero-stat-slide.is-leaving { visibility: visible; transition-delay: 0s; }
.hero-stat-slide.is-active { opacity: 1; transform: none; transition-delay: 0.15s; }   /* arrives just after the old one clears */
.hero-stat-slide.is-leaving { transform: translateY(-0.75rem); transition-duration: 0.25s; }
.hero-stat-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.hero-stat-icon svg { width: 1.25rem; height: 1.25rem; }
.hero-stat-icon::after {   /* ring that pings out when a stat arrives */
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.hero-stat-slide.is-active .hero-stat-icon svg { animation: stat-icon-in 0.6s var(--ease-out) 0.1s both; }
.hero-stat-slide.is-active .hero-stat-icon::after { animation: stat-ping 1.2s ease-out 0.3s; }
@keyframes stat-icon-in { from { opacity: 0; transform: scale(0.4) rotate(-25deg); } }
@keyframes stat-ping { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.hero-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.hero-stat p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--fg); }
.hero-stat-dots { display: none; gap: 0.375rem; margin-top: 0.75rem; }
.hero-stat.is-ready .hero-stat-dots { display: flex; }   /* only once the script is running */
.hero-stat-dots button {
  display: flex;
  align-items: center;
  flex: 1;
  height: 1rem;                /* bigger than the bar, so it's easy to tap */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-stat-dots i {
  position: relative;
  display: block;
  width: 100%;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 1rem;
  background: #3a3a37;
  transition: background-color 0.2s ease;
}
.hero-stat-dots button:hover i { background: #4a4a46; }
.hero-stat-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hero-stat-dots i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-stat-dots .is-done i::after { transform: scaleX(1); }
.hero-stat-dots .is-current i::after { animation: stat-progress 5s linear forwards; }   /* how long each stat stays */
.hero-stat:is(:hover, :has(:focus-visible)) .is-current i::after { animation-play-state: paused; }
.hero-stat.is-manual .is-current i::after { animation: none; transform: scaleX(1); }   /* reduced motion: no auto-advance */
@keyframes stat-progress { to { transform: scaleX(1); } }
@media (max-width: 480px) {
  .hero-stat-slide { grid-template-columns: auto 1fr; }
  .hero-stat p { grid-column: 1 / -1; margin-top: 0.75rem; }   /* text gets its own row under icon + number */
}

/* The home hero's picture: the site we built for the trade named in the headline.
   The trade word and both screenshots change together (js/hero-work.js). */
.hero-work { position: relative; padding: 0 3rem 2.75rem 0; }   /* room for the phone to hang off the corner */
.hero-work-browser {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: #0f0f0f;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
}
.hero-work-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: #1c1c1a;
}
.hero-work-bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3a3a37; }
.hero-work-url {
  margin-left: 0.5rem;
  padding: 0.1875rem 0.75rem;
  border-radius: 6.25rem;
  background: #0f0f0f;
  font-size: 0.75rem;
  color: var(--muted);
  transition: opacity 0.3s ease;
}
/* All the screenshots share one cell; the new one fades in on top of the old. `isolation` keeps
   the z-index juggling inside this box — without it the active desktop screenshot lifts itself
   above the phone that overlaps the frame, and the phone's body vanishes behind it. */
.hero-shots { position: relative; aspect-ratio: 16 / 10; isolation: isolate; }
.hero-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero-shots img.is-on { opacity: 1; }
/* The phone mockup, shared by the hero and the portfolio: a near-black bezel inside a metal rim,
   with a notch and a home bar. Every part is sized in % of the phone itself, so it reads the same
   whether the phone is drawn 130px or 220px wide. */
.hero-work-phone,
.project-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.5rem 0.4375rem 0.5625rem;   /* bezel — not %, which would resolve against the parent */
  /* Grey body, not black: half the sites we show are near-black, and a black phone in front of a
     black screenshot has no edges at all — the frame simply vanishes on those slides. */
  border: 0.125rem solid #8e8c83;                /* rim */
  border-radius: 15% / 7%;
  background: #2c2c29;                           /* bezel around the screen */
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.85);
}
/* a line where the screen meets the bezel, so the screenshot never bleeds into the body */
.hero-work-phone .hero-shots,
.project-phone img {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.hero-work-phone::before,
.project-phone::before {                         /* speaker slit in the top bezel */
  content: "";
  position: absolute;
  z-index: 2;
  top: 0.1875rem;
  left: 50%;
  width: 22%;
  height: 0.1875rem;
  transform: translateX(-50%);
  border-radius: 6.25rem;
  background: #615f56;
}
.hero-work-phone::after,
.project-phone::after {                          /* home bar in the bottom bezel */
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0.1875rem;
  left: 50%;
  width: 30%;
  height: 0.1875rem;
  transform: translateX(-50%);
  border-radius: 6.25rem;
  background: #615f56;
}
.hero-work-phone { width: 23%; }
.hero-work-phone .hero-shots { aspect-ratio: 390 / 844; border-radius: 11% / 5.5%; overflow: hidden; }
.hero-work-caption {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.125rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.hero-work-caption::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.hero-work-caption b { color: var(--fg); font-weight: 600; }
@media (max-width: 900px) {
  /* Phones: the picture goes above the headline, not below the whole text block — it is the proof,
     and a stacked hero would bury it. The browser frame is short enough to sit there; the phone
     mockup is not, so it steps aside. */
  .hero .grid-2 > div:last-child { order: -1; }
  .hero-work { padding: 0; margin-bottom: 0.5rem; }
  .hero-work-phone { display: none; }
  .hero-work-caption { margin: 0.875rem 0 1.75rem; }
}
.tag {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 6.25rem;
  color: var(--muted);
}

/* 3D gold logo (drawn by js/hero-3d.js) — used on the About page */
.hero-3d { position: relative; aspect-ratio: 1.35; }
.hero-3d::before {   /* soft gold glow behind the letters */
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
  pointer-events: none;
}
.hero-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* flat logo: shown until the 3D version is ready, and kept if the device can't do 3D */
.hero-3d-fallback { position: absolute; inset: 0; width: 62%; height: auto; margin: auto; }
.hero-3d.is-3d .hero-3d-fallback { display: none; }
@media (max-width: 900px) {
  .hero-3d { aspect-ratio: 1.6; }
}

/* ---------- placeholder media ---------- */
.media-placeholder {
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.875rem;
  min-height: 16.25rem;
  text-align: center;
  padding: 1.5rem;
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 3.5rem 0 2.5rem; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-size: 0.875rem; color: var(--muted); }
.footer-links a:hover { color: var(--fg); }
.fine-print { color: var(--muted); font-size: 0.8125rem; margin-top: 2rem; }

/* ---------- why us: numbered list (services page) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; }
.why-item { display: flex; gap: 1.125rem; align-items: flex-start; }
.why-number { font-family: var(--font-display); font-weight: 800; font-size: 1.625rem; color: var(--accent); line-height: 1.1; flex-shrink: 0; min-width: 2.25rem; }
.why-item h3 { font-size: 1.125rem; margin-bottom: 0.375rem; }
.why-item p { margin-bottom: 0; }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ---------- growth chart (home) ----------
   Drag the slider (or the chart) through the first year: the curve, the big number and the
   "what we're doing this month" line all follow. The numbers come from the table in the markup,
   which is what shows if JavaScript never runs (js/growth.js). */
.growth-lead { max-width: 42rem; font-size: 1.125rem; }
.growth {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 2rem;
  margin-top: 2.5rem;
}
.growth-chart { margin: 0; }
.growth-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: ew-resize; }
.growth-caption { margin: 0.875rem 0 0; font-size: 0.875rem; color: var(--muted); }

.growth-grid line { stroke: var(--border); stroke-width: 1; }
.growth-ylabel { fill: var(--muted); font-family: var(--font-body); font-size: 12px; }
.growth-xlabel { fill: var(--muted); font-family: var(--font-body); font-size: 12px; }
.growth-base { stroke: color-mix(in srgb, var(--fg) 45%, transparent); stroke-width: 1; stroke-dasharray: 4 5; }
.growth-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 0; transition: opacity 0.8s ease 0.4s; }
.growth.is-drawn .growth-area,
.growth:not(.is-ready) .growth-area { opacity: 1; }
.growth-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.growth-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; transition: r 0.2s ease; }
.growth-dot.is-current { fill: var(--accent); }
.growth-mark line { stroke: color-mix(in srgb, var(--fg) 35%, transparent); stroke-width: 1; }
.growth-mark circle { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }

.growth-panel {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.growth-panel input[type="range"] {
  width: 100%;
  margin: 0 0 1.5rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.growth-month {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.growth-value { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.growth-value b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.growth-value span { font-size: 1rem; color: var(--muted); }
.growth-multi { margin: 0.625rem 0 0; font-weight: 600; color: var(--fg); }
.growth-step {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 1rem;
}
.growth-panel :last-child { margin-bottom: 0; }
.growth-cta { margin-top: auto; align-self: flex-start; }   /* sits at the bottom of the panel */

/* the data table: the whole story without JavaScript, hidden once the chart is drawn */
.growth-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.9375rem; }
.growth-table caption { text-align: left; padding-bottom: 0.75rem; color: var(--muted); }
.growth-table th, .growth-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; }
.growth-table tbody th { color: var(--accent); }
.growth-table td { color: var(--muted); }
.growth.is-ready .growth-table {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .growth { grid-template-columns: 1fr; gap: 1.5rem; }
  .growth-panel { padding: 1.5rem; }
  /* the svg scales down with the column, so the labels need bigger viewBox units to stay readable */
  .growth-ylabel, .growth-xlabel { font-size: 21px; }
  .growth-line { stroke-width: 3.5; }
  .growth-dot { stroke-width: 2.5; }
}

/* ---------- recent work strip (home) ----------
   Four real sites as small browser thumbnails; the whole card links to the portfolio. */
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: 2.75rem;
}
.work-head p { max-width: 38rem; margin: 0.75rem 0 0; }
.work-head > div { max-width: 45rem; }
.work-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.work-shot {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: #0f0f0f;
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease;
}
.work-bar {
  display: flex;
  gap: 0.25rem;
  padding: 0.4375rem 0.625rem;
  border-bottom: 1px solid var(--border);
  background: #1c1c1a;
}
.work-bar i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #3a3a37; }
.work-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.work-card:hover .work-shot,
.work-card:focus-visible .work-shot {
  transform: translateY(-0.375rem);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.work-card:focus-visible { outline: none; }
.work-card:focus-visible .work-shot { outline: 2px solid var(--accent); outline-offset: 3px; }
.work-name {
  display: block;
  margin-top: 0.875rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
}
.work-trade { display: block; margin-top: 0.125rem; font-size: 0.9375rem; color: var(--muted); }

/* ---------- how it works (home) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 2rem 1.75rem 1.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
}
/* the line linking one step to the next */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.375rem;
  left: calc(100% + 1px);
  width: 1.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
}
.step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.step p { margin: 0; }
.steps-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2.25rem;
}
.steps-note p { margin: 0; }
.steps-note strong { color: var(--fg); font-weight: 600; }

/* one line of reassurance under the hero buttons */
.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.125rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--muted);
}
.hero-note li { display: flex; align-items: center; gap: 0.5rem; }
.hero-note li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1100px) {
  .work-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .work-head { margin-bottom: 2rem; }
}
@media (max-width: 560px) {
  .work-strip { gap: 1.25rem 1rem; }
  .work-name { font-size: 1rem; }
  .work-trade { font-size: 0.875rem; }
}

/* ---------- pricing table (home + services) ---------- */
.pricing-scroll { overflow-x: auto; padding-top: 1rem; }   /* top room for the .tier-badge */
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.pricing-table th,
.pricing-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.pricing-table thead th {
  position: relative;
  vertical-align: top;
  padding-top: 2rem;
  padding-bottom: 1.625rem;
  font-weight: 400;
}
.pricing-table thead th:first-child {
  width: 40%;
  vertical-align: bottom;
  text-align: left;
  padding-left: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.pricing-table tbody th {
  text-align: left;
  padding-left: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
}
.tier-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--fg);
}
.tier-price {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.col-pro .tier-price { color: var(--accent); }
.tier-note {
  display: block;
  max-width: 11.875rem;
  margin: 0.625rem auto 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}
.tier-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3125rem 0.75rem;
  border-radius: 6.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing-table .col-pro { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pricing-table thead .col-pro { border-radius: 0.875rem 0.875rem 0 0; box-shadow: inset 0 0.125rem 0 var(--accent); }
.pricing-table > :last-child > tr:last-child > .col-pro { border-radius: 0 0 0.875rem 0.875rem; }
.pricing-table > :last-child > tr:last-child > * { border-bottom: 0; }
.pricing-table .yes,
.pricing-table .no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  vertical-align: middle;
}
.pricing-table .yes { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.pricing-table .col-pro .yes { background: var(--accent); color: var(--on-accent); }
.pricing-table .yes::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-table .no::before {
  content: "";
  width: 0.75rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--muted);
  opacity: 0.45;
}
.pricing-table tfoot td { padding: 1.625rem 0.75rem 1.875rem; }

/* ---------- services page: bundle kit in the hero ----------
   Cycles Basic -> Pro -> Premium (js/services.js): chips light up, the price counts to the tier.
   The bar under the active tab is the timer; hovering or focusing pauses it. */
.bundle-kit {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background:
    radial-gradient(110% 80% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg-alt);
}
.bundle-tabs { display: flex; gap: 0.5rem; }
.bundle-tab {
  position: relative;
  overflow: hidden;
  flex: 1;
  padding: 0.6875rem 0.5rem 0.8125rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.bundle-tab:hover { color: var(--fg); }
.bundle-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bundle-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bundle-tab i {   /* the timer bar */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1875rem;
  background: color-mix(in srgb, var(--on-accent) 40%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}
.bundle-tab.is-active i { animation: kit-progress 4.5s linear forwards; }
.bundle-kit:is(:hover, :has(:focus-visible)) .bundle-tab.is-active i { animation-play-state: paused; }
.bundle-kit.is-manual .bundle-tab.is-active i { animation: none; transform: scaleX(1); }
@keyframes kit-progress { to { transform: scaleX(1); } }

.bundle-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.bundle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed var(--border);
  border-radius: 6.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.35s var(--ease-out);
}
.bundle-chip::before {   /* empty circle -> gold tick */
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
}
.bundle-chip.is-in {
  color: var(--fg);
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bundle-chip.is-in::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151512' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}
.bundle-chip.just-added { animation: chip-pop 0.5s var(--ease-out); }
@keyframes chip-pop { 0% { transform: scale(0.92); } 55% { transform: scale(1.07); } }
.bundle-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.875rem; margin-top: 1.5rem; }
.bundle-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.bundle-note { font-size: 0.9375rem; color: var(--muted); }

/* ---------- services page: "build your own kit" ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--ease-out);
}
.svc-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-0.25rem); }
.svc-card:has(:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-alt)); }
.svc-card:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.svc-check {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.svc-card:has(:checked) .svc-check {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151512' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}
.svc-card h3 { margin: 0; padding-right: 2rem; font-size: 1.25rem; }
.svc-tier { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.svc-card p { margin: 0; font-size: 0.9375rem; }
.svc-list { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; color: var(--muted); }
.svc-list li + li { margin-top: 0.25rem; }
.svc-hint { margin: 0.75rem 0 0; font-size: 0.9375rem; }

.svc-summary {
  position: sticky;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding: 1.125rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 1rem;
  background: rgba(18, 18, 18, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}
.svc-summary-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.svc-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.svc-summary p { margin: 0; font-size: 0.9375rem; }
.svc-summary b { color: var(--accent); }
.svc-actions { display: flex; align-items: center; gap: 1rem; }
.svc-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.svc-clear:hover { color: var(--fg); }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-summary { flex-direction: column; align-items: stretch; text-align: center; padding: 1rem; }
  .svc-summary-main { justify-content: center; }
  .svc-actions { justify-content: center; }
  .bundle-tab { font-size: 0.6875rem; letter-spacing: 0.04em; }
}

/* home page: text + button under the bundle table */
.bundle-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}
.bundle-foot p { margin: 0; max-width: 40rem; }
.bundle-foot .btn { display: none; }   /* phones only — the table's own buttons are hidden there */

@media (max-width: 899px) {
  .btn-prefix { display: none; }   /* "Choose Basic" -> "Basic" when the columns get narrow */
}
@media (max-width: 640px) {
  .pricing-table thead th:first-child { width: 36%; font-size: 0.6875rem; }
  .pricing-table th,
  .pricing-table td { padding: 0.875rem 0.25rem; }
  .pricing-table thead th { padding-top: 1.5rem; padding-bottom: 1.125rem; }
  .pricing-table tbody th { font-size: 0.9375rem; padding-right: 0.625rem; }
  .tier-name { font-size: 0.875rem; }
  .tier-price { margin-top: 0.375rem; font-size: 1.0625rem; }
  .tier-note { display: none; }
  .tier-badge { padding: 0.25rem 0.4375rem; font-size: 0.5625rem; letter-spacing: 0.04em; }
  .pricing-table .yes,
  .pricing-table .no { width: 1.5rem; height: 1.5rem; }
  .pricing-table .yes::before { width: 0.75rem; height: 0.75rem; }
  .pricing-table tfoot { display: none; }
  .pricing-table tbody tr:last-child > .col-pro { border-radius: 0 0 0.875rem 0.875rem; }
  .bundle-foot .btn { display: inline-flex; width: 100%; }
}

/* ---------- FAQ (home page) ----------
   Native <details> accordion: works without JS, and name="faq" keeps one answer open at a time. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem 4rem;
  align-items: start;
}
.faq-intro { position: sticky; top: 7rem; }   /* stays in view while you scroll the questions */
.faq-intro p { max-width: 26rem; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--fg);
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.875rem;
  height: 0.125rem;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }   /* "+" becomes "−" */
.faq-answer { padding: 0 3.75rem 1.75rem 0; }
.faq-answer p { max-width: 38rem; margin: 0; font-size: 1.0625rem; }   /* comfortable line length on wide screens */
.faq-answer strong { font-weight: 600; color: var(--fg); }
/* smooth open/close where the browser supports it (Chrome/Edge); elsewhere it simply opens */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .faq-item summary { font-size: 1.125rem; }
  .faq-answer { padding-right: 0; }
}

/* ---------- reviews (home page) ----------
   Two rows of cards drifting in opposite directions; hover a row to pause it. Each track holds
   its cards twice (the copies are aria-hidden), so sliding it by half its width loops seamlessly. */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.reviews-head .section-title { margin-bottom: 0; }
.reviews-score { display: flex; align-items: center; gap: 1rem; }
.reviews-score-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.reviews-score small { display: block; margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted); }
.stars {
  display: inline-block;
  width: 5.5rem;
  height: 1rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.8-6.3 3.8 1.7-7L2 9.5l7.1-.6Z'/%3E%3C/svg%3E") 0 50% / 1.1rem 1rem repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7-6.3-3.8-6.3 3.8 1.7-7L2 9.5l7.1-.6Z'/%3E%3C/svg%3E") 0 50% / 1.1rem 1rem repeat-x;
}
.reviews-marquee { display: grid; gap: 1rem; margin-top: 3rem; }
.reviews-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: reviews-scroll 80s linear infinite;
}
.reviews-row + .reviews-row .reviews-track { animation-duration: 95s; animation-direction: reverse; }
.reviews-row:hover .reviews-track { animation-play-state: paused; }
@keyframes reviews-scroll { to { transform: translateX(calc(-50% - 0.5rem)); } }   /* half the track + half a gap */
.review-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex-shrink: 0;
  width: 22rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-tag {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 6.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.review-card blockquote { flex: 1; margin: 0; }
.review-card blockquote p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--fg); }
.review-author { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
}
.review-author b { display: block; font-weight: 600; color: var(--fg); }
.review-author small { display: block; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 640px) {
  .review-card { width: 17.5rem; padding: 1.5rem; }
  .reviews-score-num { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
  .reviews-track > [aria-hidden="true"] { display: none; }
  .reviews-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- stats (home results panel + results page) ---------- */
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.stat-num .unit { margin-left: 0.15em; font-size: 0.45em; letter-spacing: 0; }
.stat-label {
  display: block;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.btn svg { width: 1em; height: 1em; flex-shrink: 0; }

/* home: results panel (Lazarev's "success stories" block, in our colors) */
.section-flush { padding-top: 0; }
.results-panel {
  padding: clamp(1.25rem, 5vw, 4.5rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background:
    radial-gradient(120% 85% at 50% 118%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    #121212;
}
.results-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.result-stat {
  padding: 2rem;
  border: 1px solid rgba(245, 243, 237, 0.08);
  border-radius: var(--radius);
  background: rgba(245, 243, 237, 0.03);
}
.result-stat p { margin: 0.75rem 0 0; }
.results-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 3rem auto 0;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  border: 1px solid rgba(245, 243, 237, 0.14);
  border-radius: 6.25rem;
  background: rgba(18, 18, 18, 0.7);
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
}
.results-link:hover .btn-primary { background: var(--accent-dark); }
.results-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- results page ---------- */
.page-hero { position: relative; overflow: hidden; padding: 3rem 0 9rem; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); max-width: 16ch; }
.page-hero p { max-width: 36rem; font-size: 1.125rem; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--fg); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
/* giant faint word behind the page title */
.bg-word {
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21vw;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 243, 237, 0.035);
  pointer-events: none;
  user-select: none;
}

/* two crossing caution-tape ribbons that scroll in opposite directions
   (a light take on Lazarev's 3D ribbon). Each track holds its text twice,
   so sliding it by -50% loops seamlessly. */
.ribbons { position: relative; z-index: 2; height: calc(6vw + 4.5rem); margin-top: -4rem; overflow-x: clip; }
.ribbon {
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  padding: 0.875rem 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon-gold { z-index: 1; background: var(--accent); color: var(--on-accent); transform: translateY(-50%) rotate(-3deg); }
.ribbon-dark { background: #0e0e0e; color: var(--accent); border-block: 1px solid var(--border); transform: translateY(-50%) rotate(2.5deg); }
.ribbon-track { display: flex; width: max-content; animation: ribbon-scroll 45s linear infinite; }
.ribbon-dark .ribbon-track { animation-duration: 60s; animation-direction: reverse; }
.ribbon-track span { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; }
.ribbon-track span::after { content: ""; width: 0.5rem; height: 0.5rem; background: currentColor; transform: rotate(45deg); }
@keyframes ribbon-scroll { to { transform: translateX(-50%); } }

/* outreach -> leads -> booked jobs, with arrows between the steps */
.funnel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.funnel-step {
  position: relative;
  padding: 2.25rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.funnel-step p { margin: 0.75rem 0 0; }
.funnel-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -0.75rem;             /* middle of the 1.5rem gap */
  translate: 50% -50%;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 50% no-repeat;
}

/* client result cards */
.outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.outcome-card {
  display: flex;
  flex-direction: column;
  min-height: 25rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.outcome-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-0.25rem); }
.outcome-card .stat-num { font-size: clamp(2.5rem, 3.6vw, 3.75rem); color: var(--accent); }
.outcome-title { margin: 1rem 0 0; font-size: 1.3125rem; line-height: 1.15; }
.outcome-trade {
  margin-top: auto;              /* pins trade, text and tags to the bottom of the card */
  padding-top: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
.outcome-card p { margin: 0.625rem 0 0; font-size: 0.9375rem; }
.outcome-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.outcome-tags li {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 6.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.measure-note { max-width: 48rem; margin: 2.5rem 0 0; font-size: 0.9375rem; }
.measure-note strong { color: var(--fg); }

.cta { text-align: center; }
.cta h2 { font-size: clamp(1.875rem, 3.6vw, 2.5rem); }
.cta p { max-width: 30rem; margin: 0 auto 2rem; }

@media (max-width: 1199px) {
  .outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* narrower screens need steeper angles, or the two ribbons overlap instead of crossing */
  .ribbons { height: calc(9vw + 4.5rem); }
  .ribbon-gold { transform: translateY(-50%) rotate(-5deg); }
  .ribbon-dark { transform: translateY(-50%) rotate(4deg); }
}
@media (max-width: 900px) {
  .results-stats,
  .funnel { grid-template-columns: 1fr; }
  .funnel-step:not(:last-child)::after { top: auto; right: 50%; bottom: -0.75rem; translate: 50% 50%; rotate: 90deg; }
}
@media (max-width: 640px) {
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-card { min-height: 0; }
  .result-stat,
  .funnel-step { padding: 1.5rem; }
  .results-link { flex-direction: column; padding: 1.25rem; border-radius: var(--radius); text-align: center; }
  .results-link .btn { width: 100%; }
  .ribbons { height: calc(16vw + 4.5rem); }
  .ribbon { font-size: 1.0625rem; }
  .ribbon-gold { transform: translateY(-50%) rotate(-8deg); }
  .ribbon-dark { transform: translateY(-50%) rotate(7deg); }
}

/* ---------- portfolio page ----------
   Each project: its live site's hero in a browser frame, the phone version overlapping,
   both tilting toward the mouse (js/portfolio.js). Clicking the frame opens the live site. */
.projects { display: grid; gap: 7rem; }
.project {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 3rem 4rem;
}
.project:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }   /* alternate sides, mockup stays the wide column */
.project:nth-child(even) .project-visual { order: 2; }
.project-visual {
  position: relative;
  display: block;
  padding: 0 3.5rem 3rem 0;
  perspective: 90rem;
  color: inherit;
  text-decoration: none;
}
.project-browser {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: #0f0f0f;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out), border-color 0.3s ease;
}
.project-visual:hover .project-browser,
.project-visual:focus-visible .project-browser { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.project-visual:focus-visible { outline: none; }
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: #1c1c1a;
}
.browser-bar i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #3a3a37; }
.browser-url {
  margin-left: 0.5rem;
  padding: 0.25rem 0.875rem;
  border-radius: 6.25rem;
  background: #0f0f0f;
  font-size: 0.75rem;
  color: var(--muted);
}
.project-browser img { display: block; width: 100%; height: auto; }
.project-phone {   /* body comes from the shared rule up in the hero section */
  width: 22%;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.5s var(--ease-out);
}
.project-phone img { display: block; width: 100%; height: auto; border-radius: 11% / 5.5%; }
.project-body h2 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); }
.project-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0;
  padding: 1.25rem 0;
  border-block: 1px solid var(--border);
  list-style: none;
}
.project-stats b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}
.project-stats span { display: block; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.35; color: var(--muted); }
.project-body .tag-row { margin-bottom: 1.75rem; }
.next-trade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: 2.5rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 1.25rem;
}
.next-trade h2 { margin-bottom: 0.35em; font-size: clamp(1.625rem, 3vw, 2.125rem); }
.next-trade p { max-width: 34rem; margin: 0; }
@media (max-width: 900px) {
  .project, .project:nth-child(even) { grid-template-columns: 1fr; }
  .project:nth-child(even) .project-visual { order: 0; }
  .project-visual { padding: 0 1.75rem 2rem 0; }
  .projects { gap: 5rem; }
  .next-trade { padding: 1.75rem; }
}

/* ---------- forms ---------- */
label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
input, textarea, select {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  /* Full-height panel under the header. It's positioned against the header (sticky), so
     100% = the header's height — no hard-coded offset to drift out of sync. */
  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    height: calc(100vh - 100% - 1px);
    height: calc(100dvh - 100% - 1px);
    overflow-y: auto;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--gutter);
    gap: 1.5rem;
    transform: translateY(-0.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .nav-toggle { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;   /* stops looping animations (ribbons) instead of flickering them */
  }
}