/* ============================================================
   Components — the glass system
   ============================================================ */

/* ---------- the glass primitive ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow: hidden;
}

/* the lit top-left edge that reads as a pane catching light */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-sheen);
  opacity: 0.55;
  pointer-events: none;
}

.glass--strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(165%);
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}
.glass--tint { background: var(--glass-bg-tint); }

/* Where the browser cannot blur, glass must still be legible: fall back to
   an opaque tint rather than washed-out text on a busy field. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface-solid); }
  .glass--strong { background: var(--surface-solid-strong); }
  .site-header__inner { background: var(--surface-solid-deep); }
  /* Every other surface that hand-rolls backdrop-filter needs the same
     treatment, or it renders as near-transparent text on the busy field. */
  .btn--glass { background: var(--surface-solid-strong); }
  .subnav { background: var(--surface-solid-panel); }
  .nav { background: var(--surface-solid-deep); }
  .hero__badge { background: var(--surface-solid-strong); }
  .hero__pills li { background: var(--surface-solid); }
  .prose blockquote { background: var(--surface-solid); }
  .field input, .field textarea, .field select { background: var(--surface-solid-field); }
  .to-top { background: var(--surface-solid-strong); }
  .site-footer { background: var(--surface-solid-footer); }
  .hero__float { background: var(--surface-solid-footer); }
}

/* interactive glass — lifts and lights up */
.glass--hover {
  transition:
    transform var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}
.glass--hover:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-lit);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-lg), var(--glass-inset), 0 0 0 1px rgba(255, 201, 6, 0.14);
}

/* pointer-tracked spotlight (set by app.js) */
.glass--spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 201, 6, 0.14),
    transparent 62%
  );
}
.glass--spot:hover::after { opacity: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.95rem 1.9rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--gold {
  background: var(--grad-gold);
  color: var(--ink-900);
  box-shadow: 0 8px 26px rgba(229, 156, 2, 0.32);
}
.btn--gold:hover {
  color: var(--ink-900);
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(229, 156, 2, 0.46);
}
/* sheen sweep on hover */
.btn--gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn--gold:hover::before { transform: translateX(110%) skewX(-18deg); }

.btn--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--glass-border-lit);
  color: var(--fg);
}
.btn--glass:hover {
  background: var(--glass-bg-strong);
  border-color: var(--gold-200);
  color: var(--gold-100);
  transform: translateY(-3px);
}

.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.72rem; }
.btn--lg { padding: 1.15rem 2.5rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-block: var(--sp-3);
  transition: padding var(--dur-mid) var(--ease-out);
}
.site-header.is-stuck { padding-block: var(--sp-2); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0.7rem 0.7rem 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  background: rgba(11, 4, 20, 0.5);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: background-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.site-header.is-stuck .site-header__inner {
  background: rgba(8, 3, 16, 0.82);
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
/* Header mark. The file is 250x122 (2.05:1), so height drives width. */
.brand img { height: 52px; width: auto; }
.brand__text { font-family: var(--font-display); font-weight: 800; font-size: var(--step-0); color: var(--white); letter-spacing: -0.02em; line-height: 1.1; }
.brand__text span { color: var(--gold-200); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--white); background: var(--glass-bg-strong); }
.nav__link[aria-current="page"] { color: var(--gold-200); background: rgba(255, 201, 6, 0.10); }

.nav__list > li, .subnav li { margin: 0; }
/* The header CTA is hidden below 1140px; this duplicate lives in the nav panel
   so the primary action is still reachable on a phone. */
.nav__cta { display: none; }
.nav__cta .btn { width: 100%; }
.nav__item { position: relative; }
.nav__item--has-menu > .nav__link::after {
  content: "";
  display: inline-block;
  width: 0.36em; height: 0.36em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__item--has-menu:hover > .nav__link::after { transform: translateY(0) rotate(225deg); }

.subnav {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  translate: -50% 0;
  min-width: 250px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: var(--sp-3);
  list-style: none;
  margin: 0;
  border-radius: var(--r-md);
  background: rgba(14, 5, 26, 0.9);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav__item--has-menu:hover .subnav,
.nav__item--has-menu:focus-within .subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.subnav a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}
.subnav a:hover { background: var(--glass-bg-strong); color: var(--gold-100); }

.header__cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 11px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--white); border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ----------
   The top padding was 144px on top of a 97px sticky header, which pushed the
   H1 to y=309 and the CTAs to y=799 — below the fold on a 588px viewport.
   The headline, the image and the buttons all belong in the first screen. */
.hero { position: relative; padding-block: clamp(1rem, 0.5rem + 1.6vw, 2.25rem) var(--section-y); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-lit);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); margin-bottom: var(--sp-4);
}
.hero__badge b { color: var(--ink-900); background: var(--grad-gold); padding: 0.2rem 0.6rem; border-radius: var(--r-pill); font-size: 0.68rem; }
.hero h1 { margin-bottom: var(--sp-4); }
.hero__sub { font-size: var(--step-2); font-weight: 600; color: var(--gold-200); font-family: var(--font-display); margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

.hero__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.hero__pills li {
  margin: 0;
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-muted);
}

.hero__visual { position: relative; }
.hero__visual img { border-radius: var(--r-xl); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; max-height: min(58vh, 460px); }
.hero__visual::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--glass-inset), var(--glass-shadow-lg);
  border: 1px solid var(--glass-border);
  pointer-events: none;
}

/* Floating glass stat over the hero image.
   It used to sit at left:-8%, which hung it 40px off the image's left edge and
   read as broken. It now tucks INSIDE the image's bottom-left corner, is
   width-capped so it cannot spill past the image, and animates in with the
   hero rather than appearing statically. */
.hero__float {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  right: auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  min-width: 0;
  max-width: calc(100% - var(--sp-4) * 2);
  text-align: left;
  animation: float-slow 7s var(--ease-in-out) infinite;
  /* This panel sits over a photograph, not over the page field. A white glass
     wash there is not a scrim: the label measured 1.08:1 against the bright
     part of the hero image. It needs its own dark backing. */
  background: var(--scrim-over-photo);
  border-color: var(--glass-border-lit);
}
.hero__float .stat__num { font-size: var(--step-2); margin-bottom: 0; }
.hero__float .stat__label { font-size: 0.68rem; letter-spacing: 0.08em; }

/* ---------- stats ---------- */
.stat { padding: var(--sp-6) var(--sp-5); text-align: center; }
/* The "Over" qualifier is part of the claim, so it is rendered, not implied. */
.stat__pre {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-1);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-text-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-2);
}
.stat__label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }

/* ---------- cards ---------- */
.card { padding: var(--sp-6); height: 100%; display: flex; flex-direction: column; }
.card h2, .card h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); letter-spacing: -0.015em; }
.card p { font-size: var(--step-0); margin-bottom: 0; }
.card p + p { margin-top: var(--sp-4); }
.card__link { margin-top: auto; padding-top: var(--sp-4); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; }
.card__media { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* portfolio / case tiles */
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.tile:hover img { transform: scale(1.06); }
.tile__body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: linear-gradient(to top, var(--surface-solid-footer) 12%, rgba(6, 2, 16, 0.6) 55%, transparent);
}
.tile__body h2, .tile__body h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); color: var(--white); }
.tile__body p { font-size: var(--step--1); margin: 0; color: var(--fg-muted); }

/* ---------- testimonials ---------- */
.review { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; }
.review__stars { color: var(--gold-200); font-size: var(--step-0); letter-spacing: 0.14em; }
.review__text { font-size: var(--step-0); color: var(--fg-muted); margin: 0; flex: 1; }
.review__who { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.review__avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-violet);
  border: 1px solid var(--glass-border-lit);
  font-family: var(--font-display); font-weight: 800; font-size: var(--step--1);
  color: var(--white);
}
.review__name { font-weight: 700; color: var(--fg); font-size: var(--step--1); margin: 0; line-height: 1.3; }
.review__src { font-size: 0.72rem; color: var(--fg-muted); margin: 0; }

.rating-badge { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); }
.rating-badge__score { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; line-height: 1; color: var(--gold-200); }

/* ---------- team ---------- */
.person { padding: var(--sp-5); text-align: center; }
.person__photo {
  width: 100px; height: 100px;
  border-radius: 50%;
  margin: 0 auto var(--sp-4);
  object-fit: cover;
  border: 2px solid var(--glass-border-lit);
  box-shadow: 0 8px 26px rgba(6, 2, 16, 0.5);
}
.person__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-0); color: var(--white); margin: 0 0 var(--sp-1); letter-spacing: 0.02em; }
.person__role { font-size: var(--step--1); color: var(--gold-200); margin: 0; }

/* ---------- logo marquee ---------- */
.marquee { position: relative; overflow: hidden; padding-block: var(--sp-5); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-8); width: max-content; align-items: center; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: 46px; width: auto; object-fit: contain; opacity: 0.62; filter: grayscale(1) brightness(1.9); transition: opacity var(--dur-mid) var(--ease-out), filter var(--dur-mid) var(--ease-out); }
.marquee img:hover { opacity: 1; filter: grayscale(0) brightness(1); }

/* ---------- prose (articles) ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--step-3); margin-top: var(--sp-8); }
.prose h3 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h4 { font-size: var(--step-1); margin-top: var(--sp-6); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { font-size: var(--step-0); line-height: var(--lh-body); }
.prose img { border-radius: var(--r-md); margin-block: var(--sp-6); border: 1px solid var(--glass-border); }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--gold-300);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--step-1);
  color: var(--fg);
}
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem); text-align: center; border-radius: var(--r-xl); }
.cta-band h2 { margin-bottom: var(--sp-4); }
.cta-band > p, .cta-band__body > p { font-size: var(--step-1); max-width: 620px; margin-inline: auto; margin-bottom: var(--sp-6); }
.cta-band .cluster { justify-content: center; }

/* ---------- breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-5); padding: 0; font-size: var(--step--1); color: var(--fg-dim); }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--fg-dim); opacity: 0.6; }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--gold-200); }

/* ---------- page hero (inner pages) ---------- */
.page-hero { position: relative; padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) var(--sp-7); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: -1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.30; }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,2,16,0.72) 0%, rgba(6,2,16,0.5) 45%, var(--bg-deep) 100%); }
.page-hero h1 { font-size: var(--step-5); }

/* ---------- contact / forms ---------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--sp-2); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); }
/* Removing the outline entirely also removed the only focus signal that
   survives forced-colors mode, where border-color is overridden by the OS. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--gold-200);
  outline-offset: 2px;
  border-color: var(--gold-200);
  background: rgba(255, 255, 255, 0.08);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold-200);
  background: rgba(255, 255, 255, 0.08);
}
.field textarea { min-height: 140px; resize: vertical; }

.form-note { font-size: var(--step--1); color: var(--fg-muted); margin-top: var(--sp-3); }

.contact-line { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; }
.contact-line + .contact-line { border-top: 1px solid var(--glass-border); }
.contact-line__icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); background: var(--grad-violet); border: 1px solid var(--glass-border-lit); }
.contact-line__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }
.contact-line__value { font-weight: 700; color: var(--fg); margin: 0; font-size: var(--step-0); }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: var(--z-content); margin-top: var(--section-y); padding-block: var(--sp-8) var(--sp-6); border-top: 1px solid var(--glass-border); background: rgba(6, 2, 16, 0.6); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.site-footer .brand img { height: 68px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-7); }
.site-footer .site-footer__title, .site-footer h4 { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-200); margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: var(--fg-muted); font-size: var(--step--1); }
.site-footer a:hover { color: var(--gold-100); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; padding-top: var(--sp-5); border-top: 1px solid var(--glass-border); font-size: var(--step--1); color: var(--fg-dim); }

/* ---------- misc ---------- */
.chip { display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-lit);
  color: var(--fg);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
  z-index: var(--z-header);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--gold-200); color: var(--gold-200); }

/* ---------- responsive ---------- */
/* No lower bound: below 1140px the hamburger takes over, so a `min-width` here
   is redundant — and at exactly the boundary it failed to match, leaving a 1px
   band where the desktop bar rendered untightened and the CTA overflowed. */
@media (max-width: 1400px) {
  .nav__list { gap: 0; }
  .nav__link { padding-inline: 0.6rem; letter-spacing: 0.03em; }
  .site-header__inner { gap: var(--sp-3); padding-left: 1rem; }
  .brand img { height: 52px; }
}

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; margin-inline: auto; }
  .hero__float { left: var(--sp-3); bottom: var(--sp-3); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1140px) {
  .nav-toggle { display: flex; }
  .header__cta { display: none; }
  .nav {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0; right: 0;
    margin-left: 0;
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    /* OPAQUE, deliberately — this is the one glass surface that cannot be glass.
       Its parent `.site-header__inner` already carries a backdrop-filter, and an
       element with one becomes the backdrop root for its descendants: the drawer's
       own blur can only sample inside that root, never the page behind the header.
       So the blur silently does nothing, the 6% transmitted through a 0.94 fill
       stays SHARP, and the hero headline reads straight through the nav labels.
       Measured at 390px: hero H1 and the service pills legible through the panel.
       A solid fill is the fix; the glass read is carried by the border + shadow. */
    background: var(--bg-deep);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    max-height: min(74vh, 560px);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__cta { display: block; margin-top: var(--sp-3); }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .nav__link { padding: 0.7rem 0.9rem; }
  .subnav {
    position: static;
    translate: none;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    max-height: none; padding: var(--sp-1) 0 var(--sp-2) var(--sp-4);
    display: none;
  }
  .nav__item--has-menu.is-open .subnav { display: block; }
  .nav__item--has-menu > .nav__link::after { float: right; margin-top: 0.55em; }
}

@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero__float { position: static; margin-top: var(--sp-3); max-width: 100%; animation: none; background: var(--glass-bg-strong); }
  .hero__visual::after { display: none; }
  .stat { padding: var(--sp-5) var(--sp-3); }
}

/* Overflow reviews stay in the DOM (crawlable, no content lost) and are
   collapsed only for reading comfort. Without JS they are all visible. */
.js .reviews-grid.is-collapsed .review--overflow { display: none; }

/* ---------- founder figure ----------
   Real cut-out photographs of the founder from the source, which the rebuild
   was not surfacing. The portrait leads; the magazine cover sits as a proof
   inset. Cut-outs are transparent PNGs, so they get a glow rather than a frame. */
.hero__visual--founder::after { display: none; }

.founder-figure { position: relative; }

/* The magazine cover is the founder section's image now, sized to sit level
   with the copy beside it instead of tucked in as a 150px inset. It is a
   380x430 original, so it is capped at 1.2x to stay sharp — the no-upscale
   guard in the layout sweep fails anything past 1.25x. */
.hero__visual .founder-figure__cover,
.founder-figure__cover {
  width: 100%;
  /* The only cover in the harvest is 380x430; the larger MyVegasMag mockup is
     among the dead GCS assets. 475px is 1.25x — the limit the layout sweep's
     no-upscale check allows — which lands it at ~537px tall, level with the
     copy beside it. Past that it would visibly soften. */
  max-width: 475px;
  height: auto;
  /* `.hero__visual img` caps height at min(58vh, 460px), which was clamping
     this to 341px and letterboxing it. */
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  margin-inline: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border-lit);
  box-shadow: var(--glass-shadow-lg);
}

/* ---------- About Us with the founder beside it ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: stretch;
}
.about-grid__panel { display: flex; flex-direction: column; justify-content: center; }
.about-figure { position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* a soft violet pool so the cut-out is not floating on nothing */
.about-figure::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 84%; height: 44%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(139, 63, 174, 0.5), transparent 70%);
  filter: blur(34px);
  z-index: -1;
}
.about-figure__cut {
  width: 100%;
  max-width: 420px;
  max-height: 560px;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 26px 46px rgba(6, 2, 16, 0.72));
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { order: -1; }
  .about-figure__cut { max-width: 300px; max-height: 400px; margin-inline: auto; }
}

/* ---------- CTA band with a figure ---------- */
.cta-band__body { position: relative; z-index: 1; }
.cta-band--figure {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: end;
  text-align: left;
}
.cta-band--figure .cta-band__body { text-align: left; }
.cta-band--figure > p, .cta-band--figure .cta-band__body > p { margin-inline: 0; }
.cta-band--figure .cluster { justify-content: flex-start; }
/* `align-self: end` stops at the bottom of the band's CONTENT box, which left
   the figure floating 81px above the band's edge — the band's own 80px bottom
   padding. A negative bottom margin of exactly that padding carries him down to
   the border edge, and `.glass`'s overflow:hidden crops him there, so the torso
   meets the bottom of the card instead of hovering over it.
   The original is 571x462 and was rendering at 0.46x, so the width can grow a
   long way before the no-upscale guard (1.25x) is anywhere near. */
.cta-band__figure {
  position: relative;
  z-index: 1;
  width: clamp(200px, 32vw, 420px);
  height: auto;
  align-self: end;
  margin-bottom: calc(clamp(2.5rem, 1.5rem + 4vw, 5rem) * -1);
  filter: drop-shadow(0 20px 40px rgba(6, 2, 16, 0.66));
}

@media (max-width: 760px) {
  .cta-band--figure { grid-template-columns: 1fr; text-align: center; }
  .cta-band--figure .cta-band__body { text-align: center; }
  .cta-band--figure .cluster { justify-content: center; }
  .cta-band__figure { margin: 0 auto calc(clamp(2.5rem, 1.5rem + 4vw, 5rem) * -1); width: clamp(180px, 52vw, 300px); }
}


/* The ring used to animate box-shadow on the button itself, which overwrote
   .btn--gold's own shadow (including its hover shadow). It rides a pseudo-
   element now so the two do not fight. */
.pulse { position: relative; }
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; } }

/* ---------- Full Suite mega-menu ----------
   SEO / WEB / CRO were three separate top-level items, crowding the bar to ten.
   They live inside the suite they belong to; the bar is down to seven. */
.megamenu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  translate: -50% 0;
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-solid-panel);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  text-align: left;
}
.nav__item--mega:hover .megamenu,
.nav__item--mega:focus-within .megamenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.megamenu__lead { padding-right: var(--sp-4); border-right: 1px solid var(--glass-border); }
.megamenu__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--white);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-2);
}
.megamenu__title:hover { color: var(--gold-200); }
.megamenu__lead p { font-size: var(--step--1); margin-bottom: var(--sp-4); }

.megamenu__heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-200);
  margin-bottom: var(--sp-3);
}
.megamenu ul { list-style: none; margin: 0; padding: 0; }
.megamenu li { margin: 0 0 var(--sp-2); }
.megamenu a:not(.btn):not(.megamenu__title) {
  display: block;
  padding: 0.35rem 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-muted);
  line-height: 1.35;
}
.megamenu a:not(.btn):not(.megamenu__title):hover { color: var(--gold-100); }
/* these five have no page of their own, so they are text, not dead links */
.megamenu__plain li {
  font-size: var(--step--1);
  color: var(--fg-muted);
  padding: 0.35rem 0;
  line-height: 1.35;
}

@media (max-width: 1140px) {
  /* inside the mobile panel the mega-menu becomes a plain stacked block */
  .megamenu {
    position: static;
    translate: none;
    width: auto;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-3) 0 var(--sp-2) var(--sp-4);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav__item--mega.is-open .megamenu { display: grid; }
  .megamenu__lead { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--glass-border); padding-bottom: var(--sp-4); }
}

/* ---------- reviews carousel ----------
   50 stacked cards made the section enormous. It scrolls as a seamless loop
   instead; "See all reviews" expands it back to the full readable grid. */
@keyframes reviews-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.reviews__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews__track {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  align-items: stretch;
}
.reviews.is-looping .reviews__track {
  animation: reviews-scroll var(--reviews-duration, 180s) linear infinite;
}
/* pause when someone is reading or tabbing through */
.reviews.is-looping:hover .reviews__track,
.reviews.is-looping:focus-within .reviews__track { animation-play-state: paused; }

.reviews__track > .review {
  flex: 0 0 clamp(260px, 30vw, 360px);
  height: auto;
}

/* expanded: the loop stops and every review is readable in a grid */
.reviews.is-expanded .reviews__viewport {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.reviews.is-expanded .reviews__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: start;   /* do not stretch short cards to the tallest in the row */
  width: auto;
  animation: none;
  transform: none;
}
.reviews.is-expanded .reviews__track > .review { flex: initial; }

@media (prefers-reduced-motion: reduce) {
  /* no auto-scroll; the section is a normal scrollable row */
  .reviews.is-looping .reviews__track { animation: none; }
  .reviews:not(.is-expanded) .reviews__viewport { overflow-x: auto; }
}

/* One 963-character review was forcing every card in the flex row to 1038px.
   In loop mode the text is clamped to a uniform block; the full string stays
   in the DOM (crawlable, and read in full once "See all reviews" expands the
   section), so nothing is dropped — only visually truncated. */
.reviews:not(.is-expanded) .review {
  min-height: 0;
}
.reviews:not(.is-expanded) .review__text {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 1 auto;
}
.reviews:not(.is-expanded) .reviews__track > .review {
  align-self: start;
  height: auto;
}

/* ---------- section alignment and image sizing ----------
   Audited at 1440px: the case-study grid put a 698px text column beside a 324px
   stats column, top-aligned, leaving 374px of dead space under the stats. The
   two-column media rows also centred columns of unequal height, so the image
   and the copy read as unaligned. */

/* Media rows: let the image column fill the row so its top and bottom line up
   with the text instead of floating in the middle of it. */
.hero__grid > .hero__visual { align-self: start; }


/* The case study's stats sit beside a much taller body column; centring them
   against it reads as deliberate instead of top-stranded. */
.case-stats { align-content: center; align-self: stretch; }

/* Team portraits were 100px circles cropped from 350x400 originals — small
   enough to read as thumbnails rather than as the team. */
.person__photo { width: 148px; height: 148px; }
.person { padding: var(--sp-6) var(--sp-5); }


/* Press logos were 46px tall in a 1160px-wide strip. */
.marquee img { height: 62px; }

@media (max-width: 760px) {
  .person__photo { width: 120px; height: 120px; }
  .marquee img { height: 48px; }
  .hero__grid > .hero__visual { align-self: auto; }
}

/* ============================================================
   MOBILE OPTIMISATION (<= 640px)
   Measured on a 375px viewport before this block existed:
     · footer links were 16px tall and the phone link 19px — far under the
       44px a thumb needs, and under even the 24px WCAG 2.5.8 floor;
     · body and nav text sat at 12.9px, buttons at 11.5px, section labels
       and mega-menu headings at 10.9px;
     · every section carried 56px of padding top AND bottom — ~1,680px of
       pure padding across the homepage's 15 sections;
     · the H1 rendered 42.9px on a 375px screen.
   Scoped to small screens so the verified desktop layout is untouched.
   ============================================================ */
@media (max-width: 640px) {
  :root {
    /* a touch more breathing room at the screen edge than the 17px the
       fluid gutter resolved to */
    --gutter: 1.25rem;
    /* sections were eating the screen; this keeps rhythm without the waste */
    --section-y: 2.75rem;
    /* nothing under 14px: 12.8px body copy is a squint on a phone */
    --step--1: 0.875rem;
    /* 42.9px headline on a 375px screen wraps to four words a line */
    --step-6: 2.2rem;
    --step-5: 1.95rem;
    --step-4: 1.75rem;
  }

  /* ---- tap targets ----
     Links in the footer, breadcrumbs and contact rows are text-sized by
     default, which makes them 16-22px tall. Vertical padding brings the hit
     area up without changing the type or the visual rhythm much. */
  .site-footer a,
  .crumbs a,
  .contact-line__value a,
  .megamenu a:not(.btn) {
    display: inline-block;
    padding-block: 0.55rem;
    min-height: 44px;
  }
  /* a link that IS the whole paragraph is a CTA, not a word in a sentence */
  .prose p > a:only-child { display: inline-block; padding-block: 0.6rem; min-height: 44px; }
  .site-footer li { margin-bottom: 0; }
  .site-footer ul { display: flex; flex-direction: column; }

  /* ---- type that was too small to read ---- */
  .btn--sm { font-size: 0.82rem; padding: 0.7rem 1.2rem; }
  .btn { font-size: 0.82rem; }
  .btn--lg { font-size: var(--step-0); padding: 1rem 1.75rem; }
  .megamenu__heading { font-size: 0.86rem; }
  .stat__label,
  .hero__float .stat__label,
  .review__src,
  .contact-line__label,
  .person__role { font-size: 0.8rem; }
  /* the hero stat panel also needs room for the larger label */
  .hero__float { padding: var(--sp-3) var(--sp-4); }
  .hero__pills li { font-size: 0.84rem; padding: 0.5rem 1rem; }
  .chip { font-size: 0.8rem; }

  /* ---- stacking rhythm ---- */
  .section-head { margin-bottom: var(--sp-5); }
  .grid { gap: var(--sp-4); }
  .hero__actions .btn { width: 100%; }        /* full-width CTAs are easier to hit */
  .cta-band .cluster .btn { width: 100%; }
}