/* ============================================================
   YORSTAFF — Global Design System
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Brand palette */
  --color-bg:          #111111;
  --color-bg-elevated: #1a1a1a;
  --color-bg-card:     #222222;
  --color-surface:     #2a2a2a;
  --color-border:      rgba(255, 255, 255, 0.08);
  --color-text:        #f5f5f5;
  --color-text-muted:  #999999;
  --color-accent:      #e8a020;          /* warm gold / amber */
  --color-accent-hover:#f0b840;
  --color-white:       #ffffff;
  --color-client-tile: #f2efe9;          /* warm bone — client logo tiles */
  --color-light-bg:    #f2efe9;          /* light band background */
  --color-light-card:  #ffffff;
  --color-accent-deep: #8a5a0d;          /* deep gold — AA on bone and white */

  /* Typography */
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

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

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out-expo);
  --transition-mid:  0.4s var(--ease-out-expo);
  --transition-slow: 0.7s var(--ease-out-expo);

  /* Layout */
  --max-width: 1280px;
  --header-height: 96px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
}
.skip-link:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  padding: 0.7rem 1.4rem;
  background: var(--color-accent);
  color: #111;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- Reveal-on-scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.reveal-stagger.visible > *:nth-child(1)  { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 0.56s; }
.reveal-stagger.visible > *:nth-child(9)  { transition-delay: 0.64s; }
.reveal-stagger.visible > *:nth-child(10) { transition-delay: 0.72s; }
.reveal-stagger.visible > *:nth-child(11) { transition-delay: 0.80s; }
.reveal-stagger.visible > *:nth-child(12) { transition-delay: 0.88s; }
.reveal-stagger.visible > *:nth-child(13) { transition-delay: 0.96s; }
.reveal-stagger.visible > *:nth-child(14) { transition-delay: 1.04s; }
.reveal-stagger.visible > *:nth-child(15) { transition-delay: 1.12s; }
.reveal-stagger.visible > *:nth-child(16) { transition-delay: 1.20s; }
.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HEADER — Floating pill
   ============================================================ */
.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1280px;
  height: 64px;
  z-index: 1000;
  background: rgba(14, 14, 14, 0.72);
  /* Kept deliberately cheap: a 32px blur plus saturate + brightness is
     three filter passes recomputed on every scroll frame, which is what
     made the gallery stutter. */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
}

/* Once scrolled the bar tightens and sits closer to the top edge, so the
   page feels like it is moving underneath a fixed control rather than
   dragging a floating slab along with it. */
.site-header.scrolled {
  top: 10px;
  height: 58px;
  background: rgba(12, 12, 12, 0.9);
  border-color: rgba(232, 160, 32, 0.18);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.site-header {
  transition: background var(--transition-mid), box-shadow var(--transition-mid),
              border-color var(--transition-mid), height var(--transition-mid),
              top var(--transition-mid);
}

/* Three columns: logo left, nav optically centred, action right. The
   outer columns are equal so the nav sits on the true centre of the bar
   regardless of how wide the logo or the button are. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-md) 0 var(--space-lg);
  gap: var(--space-md);
}
.header-logo   { justify-self: start; }
.header-nav    { justify-self: center; }
.header-inner > .nav-cta { justify-self: end; }
.menu-toggle   { justify-self: end; grid-column: 3; }

/* Logo */
.header-logo {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}
.header-logo:hover { opacity: 0.8; }
.header-logo .dot {
  color: var(--color-accent);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 0;
  vertical-align: -2px;
}

/* "LTD" superscript. Per the client's reference the block sits between
   the cap line and the top of the F's crossbar: measured in Inter, the
   crossbar starts at 44.7% of cap height, so LTD's cap height is
   0.447 x cap, i.e. font-size 0.443em. The raise that lands its cap-top
   on the wordmark's cap-top is top = -0.7344 x (1 - size) / size. */
.header-logo .ltd,
.footer-logo .ltd,
.loader-logo .ltd,
.hero-title .ltd {
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  position: relative;
  color: inherit;
}
.header-logo .ltd,
.footer-logo .ltd,
.loader-logo .ltd,
.hero-title .ltd {
  font-size: 0.443em;
  top: -0.923em;
}
.header-logo .ltd { margin-left: -0.18em; }   /* wordmark tracks 0.18em */
.footer-logo .ltd,
.loader-logo .ltd,
.hero-title  .ltd { margin-left: -0.11em; }   /* wordmark tracks 0.15em */
.hero-title .ltd { font-weight: 400; }

/* Pull the full stop tight to the F (the wordmark's own tracking would
   otherwise leave a full letter-space in front of it). */
.header-logo .dot { margin-left: -0.168em; }
.footer-logo .dot,
.loader-logo .dot,
.hero-title  .dot { margin-left: -0.138em; }

/* Nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Nav items sit in their own soft pill on hover rather than growing an
   underline — quieter, and it gives the active item a real home. */
.header-nav a {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header-nav a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: -1;
}

.header-nav a:hover {
  color: var(--color-white);
}
.header-nav a:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Current page: a small gold dot rather than a full underline */
.header-nav a.active {
  color: var(--color-white);
}
.header-nav a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateX(-50%);
}

.header-nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* CTA in nav */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1.35rem;
  background: var(--color-accent);
  color: #111 !important;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(232, 160, 32, 0.28);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232, 160, 32, 0.42);
}

/* Mobile hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px 0;
  z-index: 1001;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition-mid), opacity var(--transition-fast);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.97);
  backdrop-filter: blur(30px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-mid);
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-nav a {
  position: relative;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast), transform var(--transition-fast);
  /* staggered entrance, driven by --i on each link */
  opacity: 0;
  transform: translateY(14px);
}
.mobile-nav.open a {
  animation: mobileNavIn 0.5s var(--ease-out-expo) forwards;
  animation-delay: calc(0.06s * var(--i, 0) + 0.08s);
}
@keyframes mobileNavIn {
  to { opacity: 1; transform: translateY(0); }
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: var(--color-white);
}
/* Gold rule that draws in under the item being touched */
.mobile-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width var(--transition-mid);
}
.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after { width: 42px; }

/* Contact reads as the action, not another list item */
.mobile-nav a:last-child {
  margin-top: var(--space-md);
  padding: 0.7rem 2.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: var(--radius-full);
}
.mobile-nav a:last-child::after { display: none; }
.mobile-nav a:last-child:hover { background: var(--color-accent-hover); }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.open a { animation-duration: 0.01s; }
}

/* 900px (not 768px): the nav + CTA + LTD wordmark overflow the pill below ~900px */
@media (max-width: 900px) {
  .header-nav,
  .header-inner > .nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-height);
  user-select: none;
  -webkit-user-select: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.60);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.4) 0%,
    rgba(17, 17, 17, 0.1) 40%,
    rgba(17, 17, 17, 0.8) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  padding: var(--space-xl) var(--space-lg);
}

.hero-tagline {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out-expo) 0.3s forwards;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 8vw, 7rem);
  font-weight: 200;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s var(--ease-out-expo) 0.5s forwards;
}
.hero-title .dot {
  color: var(--color-accent);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out-expo) 0.8s forwards;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out-expo) 1.1s forwards;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  animation: heroScrollFade 0.8s var(--ease-out-expo) 1.5s forwards;
}
.hero-scroll span {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-scroll .scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Tighter tracking on small phones so the wordmark never clips */
@media (max-width: 480px) {
  .hero-title { letter-spacing: 0.08em; }
  .hero-subtitle { letter-spacing: 0.15em; }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroScrollFade {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 2rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232, 160, 32, 0.3);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}
.btn-outline:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.btn-arrow::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* ============================================================
   SECTIONS — General
   ============================================================ */
section {
  padding: var(--space-3xl) 0;
}

/* Keep anchor targets clear of the fixed header */
section[id],
footer[id] {
  scroll-margin-top: calc(var(--header-height) + 8px);
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.section-text {
  max-width: 700px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.section-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Divider line */
.section-divider {
  width: 60px;
  height: 2px;
  background: var(--color-accent);
  margin: var(--space-lg) 0;
}

/* ============================================================
   ABOUT / INTRO
   ============================================================ */
.about {
  background: var(--color-bg);
}

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

/* Portrait frame — the team photo is a full-length shot, so a landscape
   crop would cut everything below the shoulders. */
.about-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.6s var(--ease-out-expo);
}
.about-visual:hover img {
  transform: scale(1.03);
}
.about-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  background: var(--color-bg-elevated);
}

.services-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.services-header .section-text {
  margin: 0 auto;
}
.services-header .section-divider {
  margin: var(--space-lg) auto;
}

.services-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.service-box {
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: center;
  transition: transform var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid);
  overflow: hidden;
}
.service-box::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-mid);
}
.service-box:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 160, 32, 0.25);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.service-box:hover::before {
  transform: scaleX(1);
}

.service-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(232, 160, 32, 0.08);
  border: 1px solid rgba(232, 160, 32, 0.15);
  margin: 0 auto var(--space-lg);
  font-size: 1.6rem;
  color: var(--color-accent);
  transition: background var(--transition-mid), transform var(--transition-mid);
}
.service-box:hover .service-box-icon {
  background: rgba(232, 160, 32, 0.15);
  transform: scale(1.1);
}

.service-box h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.service-box p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .services-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .services-boxes {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CLIENTS — Horizontal scroll gallery
   ============================================================ */
.clients {
  background: var(--color-bg);
  overflow: hidden;
  padding-bottom: var(--space-xl);
}

.clients-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.clients-header .section-text {
  margin: 0 auto;
}
.clients-header .section-divider {
  margin: var(--space-lg) auto;
}

/* Static wall — flex so a short final row centres itself instead of
   orphaning left (the count rarely divides evenly). */
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl) var(--space-lg);
}

.client-card {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
}

/* The tile is the only chrome: one surface, one radius, no border,
   no resting shadow. Identical for all 13 so the wall reads as a set. */
.client-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--color-client-tile);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 15%;
  transition: transform 0.45s var(--ease-out-expo),
              box-shadow 0.45s var(--ease-out-expo);
}

/* Gold wash that wipes up over the tile on hover */
.client-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(232, 160, 32, 0.22), transparent 70%);
  opacity: 0;
  transform: translateY(35%);
  transition: opacity 0.45s var(--ease-out-expo),
              transform 0.45s var(--ease-out-expo);
  pointer-events: none;
  z-index: 2;
}

/* Logos are artwork on white; multiply dissolves that white into the
   tile so the mark floats with no visible seam or inner frame. */
.client-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.5s var(--ease-out-expo);
}

/* Three brands are a solid colour field that can never be dropped out —
   so their colour becomes the tile itself rather than sitting in a box. */
.client-tile--bleed {
  padding: 0;
}
.client-tile--bleed img {
  mix-blend-mode: normal;
  object-fit: cover;
}

.client-name {
  margin-top: var(--space-md);
  /* Two-line box for every card so names that wrap (Yorkshire Tipsy
     Trailer) keep the sector lines aligned across the row. */
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
  color: #b4b4b4;
  transition: color var(--transition-fast);
}

.client-sector {
  margin-top: 5px;
  font-size: 0.75rem;
  font-weight: 400;
  color: #7d7d7d;
}

.client-card:hover .client-tile,
.client-card:focus-visible .client-tile {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(232, 160, 32, 0.35);
}
.client-card:hover .client-tile::after,
.client-card:focus-visible .client-tile::after {
  opacity: 1;
  transform: translateY(0);
}
.client-card:hover .client-tile img,
.client-card:focus-visible .client-tile img {
  transform: scale(1.06);
}
.client-card:hover .client-name,
.client-card:focus-visible .client-name {
  color: var(--color-accent);
}
.client-card:hover .client-sector,
.client-card:focus-visible .client-sector {
  color: #a5a5a5;
}
.client-sector { transition: color var(--transition-fast); }

/* Press: the tile settles back down so a tap feels physical */
.client-card:active .client-tile {
  transform: translateY(-3px) scale(0.985);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(232, 160, 32, 0.5);
  transition-duration: 0.12s;
}
.client-card:active .client-tile img {
  transform: scale(1.01);
  transition-duration: 0.12s;
}

.client-card:focus-visible {
  outline: none;
}
.client-card:focus-visible .client-tile {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .clients-grid { gap: var(--space-lg) var(--space-md); }
  .client-card  { flex-basis: 170px; }
}
@media (max-width: 600px) {
  .client-card  { flex-basis: 132px; }
  .client-name  { font-size: 0.68rem; letter-spacing: 0.1em; }
  .client-sector { font-size: 0.7rem; }
}

/* ============================================================
   REVIEWS — Light band, all four visible
   ============================================================ */
.testimonials {
  background: var(--color-light-bg);
}

.testimonials-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.testimonials-header .section-divider {
  margin: var(--space-lg) auto;
}
.testimonials .section-label { color: var(--color-accent-deep); }
.testimonials .section-title { color: #161616; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.review-card {
  position: relative;
  background: var(--color-light-card);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06);
  transition: transform var(--transition-mid), box-shadow var(--transition-mid);
  overflow: hidden;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(17, 17, 17, 0.11);
}

/* Oversized quote mark as a watermark */
.review-quote-icon {
  position: absolute;
  top: -16px;
  left: 20px;
  font-size: 6.5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.review-stars {
  position: relative; /* paints above the watermark quote */
  display: flex;
  gap: 5px;
  margin-bottom: var(--space-lg);
}
.review-stars i {
  font-size: 0.8rem;
  color: var(--color-accent);
}

.review-card blockquote {
  position: relative;
  margin: 0;
}
/* The reviews vary wildly in length; long ones clamp to an even height
   and open in place so the grid stays calm. */
.review-card blockquote .review-body {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card blockquote.expanded .review-body {
  display: block;
}
.review-card blockquote p {
  font-size: 0.98rem;
  line-height: 1.8;
  color: #3f3f3f;
  font-style: normal;
}
.review-card blockquote p + p {
  margin-top: var(--space-md);
}

.review-more {
  margin-top: var(--space-md);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.review-more:hover { border-bottom-color: var(--color-accent-deep); }
.review-more:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 3px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(232, 160, 32, 0.16);
  color: var(--color-accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.review-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.review-info strong {
  font-size: 1rem;
  color: #161616;
  font-style: normal;
}
.review-info span {
  font-size: 0.8rem;
  color: var(--color-accent-deep);
  letter-spacing: 0.02em;
  font-style: normal;
}

@media (max-width: 860px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { padding: var(--space-lg); }
}

/* ============================================================
   WHY US — Stats / Features
   ============================================================ */
.why-us {
  background: var(--color-bg-elevated);
}

.why-us-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.why-us-header .section-text {
  margin: 0 auto;
}
.why-us-header .section-divider {
  margin: var(--space-lg) auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.feature-item {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-mid), transform var(--transition-mid);
}
.feature-item:hover {
  border-color: rgba(232, 160, 32, 0.15);
  transform: translateY(-3px);
}

.feature-number {
  font-size: 2.5rem;
  font-weight: 200;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.feature-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.feature-item p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative;
  padding: var(--space-3xl) 0;
  background: linear-gradient(135deg, var(--color-accent), #d4901a);
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.cta-inner {
  position: relative;
  text-align: center;
}

.cta-banner .section-title {
  color: var(--color-bg);
  margin-bottom: var(--space-md);
}

.cta-banner .section-text {
  color: rgba(17, 17, 17, 0.7);
  margin: 0 auto var(--space-xl);
}

.btn-dark {
  background: var(--color-bg);
  color: var(--color-white);
}
.btn-dark:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: #0c0c0c;
  border-top: 1px solid var(--color-border);
  padding: var(--space-2xl) 0 var(--space-lg);
}
/* Gold hairline centred on the seam */
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 42%);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 160, 32, 0.55), transparent);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.footer-logo {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white);
}
.footer-logo .dot { color: var(--color-accent); }

.footer-tagline {
  margin-top: var(--space-sm);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #8d8d8d;
  max-width: 360px;
}

.footer-socials {
  display: flex;
  gap: var(--space-sm);
}
.footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: #9a9a9a;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}
.footer-socials a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(232, 160, 32, 0.08);
  transform: translateY(-3px);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a,
.footer-col p {
  font-size: 0.9rem;
  color: #9a9a9a;
  line-height: 1.6;
}
.footer-col a { transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--color-accent); }
.footer-col .footer-note {
  margin-top: var(--space-sm);
  font-size: 0.82rem;
  color: #8d8d8d;
}

/* Registered details — company + insurance */
.footer-legal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}
.footer-legal-item span {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8d8d8d;
  margin-bottom: 6px;
}
.footer-legal-item p {
  font-size: 0.88rem;
  color: #a8a8a8;
}
.footer-legal-item i {
  color: var(--color-accent);
  margin-right: 8px;
  font-size: 0.8rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: 0.8rem;
  color: #7a7a7a;
}
.footer-devby a {
  color: var(--color-accent);
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}
.footer-devby a:hover { opacity: 1; }
.footer-devby i {
  color: var(--color-accent);
  font-size: 0.7rem;
  margin: 0 2px;
}

@media (max-width: 800px) {
  /* comfortable tap targets for the stacked link columns */
  .footer-col ul { gap: 0; }
  .footer-col li a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-top { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-legal { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GRAIN OVERLAY (subtle texture)
   ============================================================ */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* ============================================================
   PAGE LOADER
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s;
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}
.loader-logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white);
  animation: pulse 1.5s ease-in-out infinite;
}
.loader-logo .dot {
  color: var(--color-accent);
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============================================================
   SMOOTH SCROLL TOP BUTTON
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 100;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--transition-mid), transform var(--transition-mid), background var(--transition-fast);
  box-shadow: 0 4px 20px rgba(232, 160, 32, 0.3);
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.scroll-top:hover {
  background: var(--color-accent-hover);
  transform: translateY(-3px);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .client-card:hover .client-tile,
  .client-card:focus-visible .client-tile,
  .client-card:active .client-tile,
  .client-card:hover .client-tile img,
  .client-card:focus-visible .client-tile img {
    transform: none;
  }
  .hero-tagline,
  .hero-title,
  .hero-subtitle,
  .hero-cta-group,
  .hero-scroll {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
  .reveal,
  .reveal-stagger > * {
    transition-duration: 0.01s;
  }
  html {
    scroll-behavior: auto;
  }
}