/* ================================================================
   Reen Advertising - stylesheet
   Written by hand without Tailwind. The colors are defined once below
   so they are easy to change later.
   ================================================================ */

/* ===== Variables: colors and fonts ===== */
:root {
  --brand-red: #ee5a53;         /* Primary brand red */
  --brand-red-dark: #e04a42;    /* Red on hover */
  --brand-orange: #f59734;      /* Brand orange */
  --brand-dark: #2b2420;        /* Loading screen background (unchanged) */

  /* ===== Dark sections (same background as the Hero) ===== */
  --ink: #1e1810;               /* Dark section background - exactly the Hero background */
  --ink-soft: #26201a;          /* Cards on top of the dark background */
  --on-ink: #f5f1ec;            /* Light text on dark */
  --on-ink-muted: #a89a92;      /* Secondary text on dark */
  --on-ink-dim: #8d817a;        /* Dim text on dark */
  --line-dark: rgba(245,241,236,0.10);   /* Hairline on dark */

  /* ===== Light sections (warm white) ===== */
  --cream: #f7f2ec;             /* Light section background */
  --cream-alt: #f2ebe3;         /* Slight variation of the light background */
  --card: #fdfaf6;              /* Card background on light */
  --on-cream: #2a2320;          /* Headings on light */
  --on-cream-muted: #6f655c;    /* Body text on light */
  --line-light: rgba(42,35,32,0.10);     /* Hairline on light */

  /* ===== Brand accent gradient ===== */
  --brand-gradient: linear-gradient(100deg, var(--brand-red) 10%, var(--brand-orange) 90%);

  /* ===== Navbar: warm background, two states ===== */
  --nav-bg-top: rgba(250,245,237,0.84);      /* At the top: light and quiet */
  --nav-bg-scrolled: rgba(250,244,235,0.95); /* After scrolling: clearer warm cream */
  --nav-shadow: 0 1px 0 rgba(42,35,32,0.05), 0 12px 28px -20px rgba(42,35,32,0.45);

  --radius-card: 1.25rem;
  --shadow-card: 0 1px 2px rgba(42,35,32,0.04), 0 12px 32px -20px rgba(42,35,32,0.35);
  --shadow-card-hover: 0 2px 4px rgba(42,35,32,0.05), 0 26px 50px -24px rgba(42,35,32,0.45);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", ui-serif, Georgia, serif;

  --container: 80rem;           /* Max content width (1280px) */
}

/* ===== Global reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Smooth scrolling for in-page links is handled in script.js so it can
   subtract the fixed navbar height; we don't use scroll-behavior here
   to avoid two competing scroll methods. */

body {
  font-family: var(--font-sans);
  color: var(--on-cream-muted);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
/* Clear focus ring on every link and button - keyboard navigation only */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-orange); outline-offset: 3px;
}
::selection { background: rgba(238, 90, 83, 0.3); color: var(--brand-red); }

.icon { width: 1.25rem; height: 1.25rem; }

/* Container that centers the content */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ===== Text helpers ===== */
.text-muted { color: var(--on-cream-muted); }
.text-dim { color: var(--on-ink-muted); }
.serif { font-family: var(--font-serif); }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

/* ================================================================
   Logo: the two colored bars + the "reen" wordmark
   ================================================================ */
.logo-mark { display: flex; gap: 0.25rem; height: 2.5rem; align-items: flex-start; }
.logo-bar { width: 0.875rem; height: 80%; display: block; }
.logo-bar--red {
  background: var(--brand-red);
  border-radius: 1rem 0.125rem 0.125rem 0.125rem;
}
.logo-bar--orange {
  background: var(--brand-orange);
  border-radius: 0.125rem 1rem 0.125rem 0.125rem;
  align-self: flex-end;
}
.logo-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; margin-left: 0.25rem; }
.logo-name { font-size: 1.875rem; font-weight: 500; color: #fff; letter-spacing: 0.025em; }
.logo-name--dark { color: var(--on-cream); }
.logo-tagline { font-size: 10px; font-style: italic; margin-top: 0.25rem; font-family: var(--font-serif); letter-spacing: -0.01em; color: var(--brand-red); }
.logo-tagline--brown { color: #8b3a36; }
.logo-tagline--red { color: var(--brand-red); }

/* ================================================================
   Buttons
   ================================================================ */
/* Same language as the Hero buttons: pill shape, red with a soft shadow, or ghost with a hairline border */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  font-family: var(--font-sans); font-weight: 500; font-size: 0.9375rem;
  cursor: pointer; border: 1px solid transparent; border-radius: 9999px;
  padding: 0.8125rem 1.75rem;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.btn--pill { border-radius: 9999px; }
.btn--red {
  background: var(--brand-red); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(238,90,83,0.65);
}
/* Gentle lift + very slight scale, and the red shadow deepens a little */
.btn--red:hover {
  background: var(--brand-red-dark); transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px -12px rgba(238,90,83,0.75);
}
/* On press: settles back down slightly (tactile feedback) */
.btn--red:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 8px 22px -10px rgba(238,90,83,0.6);
  transition-duration: 110ms;
}
.btn--lg { padding: 0.9375rem 2rem; font-size: 0.9375rem; }
/* The arrow shifts slightly on hover - same behavior as the Hero */
.btn .icon { transition: transform 220ms ease-out; }
.btn--red:hover .icon { transform: translateX(4px); }
.btn--ghost {
  background: transparent; color: var(--on-ink);
  border: 1px solid rgba(245,241,236,0.18);
}
.btn--ghost:hover {
  background: rgba(245,241,236,0.05); border-color: rgba(245,241,236,0.38);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0) scale(0.99); transition-duration: 110ms; }
.btn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

/* ===== Eyebrow line above every heading - same detail as the Hero ===== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #8a7d73; margin-bottom: 1.5rem;
}
.eyebrow--light { color: var(--on-ink-muted); }
.eyebrow-dash {
  flex-shrink: 0; width: 2.25rem; height: 1px; border-radius: 1px;
  background: linear-gradient(to right, transparent, var(--brand-red), var(--brand-orange));
}

/* ===== Shared section headings ===== */
.section { padding: 7rem 0; }
@media (min-width: 1024px) { .section { padding: 9rem 0; } }
.section-head { text-align: center; max-width: 48rem; margin: 0 auto 4.5rem; display: flex; flex-direction: column; align-items: center; }
.section-title {
  font-family: var(--font-serif); font-weight: 600; color: var(--on-cream);
  font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em;
  margin-bottom: 1.5rem; line-height: 1.08;
}
.section-title--light { color: var(--on-ink); }
/* One word in each heading uses the brand gradient */
.title-accent {
  font-style: italic; font-weight: 500;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.section-title--light .title-accent {
  filter: drop-shadow(0 0 22px rgba(238,90,83,0.30));
}
.section-desc { font-size: 1.1875rem; font-weight: 300; color: var(--on-cream-muted); line-height: 1.75; }
.section-desc--light { color: var(--on-ink-muted); }

/* ===== Warm glow behind headings in dark sections ===== */
.section-glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(60rem, 130vw); height: 32rem;
  background: radial-gradient(50% 50% at 50% 40%, rgba(238,90,83,0.18), transparent 70%),
              radial-gradient(40% 45% at 62% 45%, rgba(245,151,52,0.12), transparent 72%);
  filter: blur(80px); pointer-events: none; z-index: 0;
}
.section-glow--left { left: 20%; }

/* ================================================================
   Loading screen
   ================================================================ */
.loading-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dark);
  transition: opacity 0.5s ease;
}
.loading-screen.is-hidden { opacity: 0; pointer-events: none; }
.loading-inner { display: flex; flex-direction: column; align-items: center; animation: pop-in 0.5s ease-out; }
.loading-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.logo-mark--big { height: 5rem; gap: 0.375rem; }
.logo-mark--big .logo-bar { width: 1.5rem; }
.logo-mark--big .logo-bar--red { animation: grow-bar 0.6s ease-out 0.2s both; }
.logo-mark--big .logo-bar--orange { animation: grow-bar 0.6s ease-out 0.4s both; }
.logo-text--big .logo-name { font-size: 3.75rem; }
.logo-text--big .logo-tagline { font-size: 1.125rem; margin-top: 0.5rem; }
.loading-bar-track { width: 12rem; height: 0.25rem; background: rgba(255,255,255,0.1); border-radius: 9999px; overflow: hidden; }
.loading-bar-fill { height: 100%; background: var(--brand-red); border-radius: 9999px; width: 0; animation: fill-bar 1.5s ease-in-out 0.8s forwards; }

@keyframes pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes grow-bar { from { height: 0; } to { height: 80%; } }
@keyframes fill-bar { from { width: 0; } to { width: 100%; } }

/* ================================================================
   Navigation bar (Navbar)
   ================================================================ */
/* Two states for the bar:
   - At the very top: taller, light cream background, no shadow or bottom line.
   - After scrolling ~40px: script.js adds the is-scrolled class, so it gets a bit
     shorter, a clearer cream background with stronger blur + a soft shadow and hairline below.
   The background is warm (cream, not grey): we pair saturate with the blur so
   the colors passing under the bar stay warm instead of washing out to grey. */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--nav-bg-top);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  border-bottom: 1px solid transparent;   /* Kept transparent so the height doesn't change */
  box-shadow: none;
  transition:
    background-color 250ms ease,
    backdrop-filter 250ms ease,
    -webkit-backdrop-filter 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease;
}
.navbar.is-scrolled {
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  border-bottom-color: var(--line-light);
  box-shadow: var(--nav-shadow);
}
.navbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 5.5rem;                          /* Taller and airier at the top of the page */
  transition: height 250ms ease;
}
.navbar.is-scrolled .navbar-inner { height: 4.75rem; }   /* A bit shorter after scrolling */
.brand { display: flex; align-items: center; gap: 0.5rem; }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links > a { color: var(--on-cream-muted); font-weight: 500; font-size: 0.9375rem; transition: color 0.2s; }
/* Resting color of the plain nav links: near-black so they read more clearly.
   :not(.btn) leaves the "Get in Touch" button exactly as it was. Hover and the
   .is-active red both come later in this file, so they still win. */
.nav-links > a:not(.btn) { color: var(--on-cream); }
.nav-links > a:hover { color: var(--brand-red); }

/* Link for the section we are in: red text + a thin brand-gradient underline.
   The line is an absolutely positioned ::after, so it takes no space and shifts nothing. */
.nav-links > a:not(.btn) { position: relative; }
.nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.5rem;
  height: 2px; border-radius: 9999px; background: var(--brand-gradient);
  opacity: 0; transform: scaleX(0.4); transform-origin: center;
  transition: transform 200ms ease, opacity 200ms ease;
  pointer-events: none;
}
.nav-links > a.is-active { color: var(--brand-red); }
.nav-links > a.is-active::after { opacity: 1; transform: scaleX(1); }
.nav-links .btn--red { padding: 0.625rem 1.375rem; font-size: 0.875rem; }
/* The nav-link color rules above outrank .btn--red on its own, so restate the
   button's white here at matching specificity - this rule comes later in the
   file, so it wins the tie at rest and on hover. No !important needed. */
.nav-links a.btn--red { color: #fff; }
@media (min-width: 768px) { .nav-links { display: flex; } }

.nav-toggle { display: flex; background: none; border: none; color: var(--on-cream); cursor: pointer; }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-open .icon-menu { display: none; }
.nav-toggle.is-open .icon-close { display: block; }
@media (min-width: 768px) { .nav-toggle { display: none; } }

.mobile-menu {
  display: none; flex-direction: column;
  background: var(--cream); border-top: 1px solid var(--line-light);
  padding: 0.5rem 1rem 1.5rem;
  box-shadow: 0 20px 40px -24px rgba(42,35,32,0.5);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 0.875rem 0.75rem; border-radius: 0.5rem;
  font-weight: 500; color: var(--on-cream); transition: all 0.2s;
}
.mobile-menu a + a { border-top: 1px solid var(--line-light); }
.mobile-menu a:hover { color: var(--brand-red); background: rgba(238,90,83,0.06); }
/* Same highlight in the mobile menu (matching its existing hover style) */
.mobile-menu a.is-active { color: var(--brand-red); background: rgba(238,90,83,0.06); }

/* ================================================================
   Hero section
   ================================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #1e1810;                       /* Warm black */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 9rem 0 4rem;                      /* Enough top space to clear the fixed navbar */
}
@media (min-width: 1024px) { .hero { padding: 12rem 0 6rem; } }

/* ===== Background layers ===== */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Soft glow behind the heading (as if the panel is backlit) */
.hero-glow {
  position: absolute; left: 50%; top: 42%;
  width: min(78rem, 150vw); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(45% 55% at 42% 50%, rgba(238,90,83,0.30), transparent 70%),
    radial-gradient(42% 52% at 62% 55%, rgba(245,151,52,0.22), transparent 72%);
  filter: blur(90px);
  opacity: 0.85;
}

/* Very subtle grain (dots) to break up the gradient */
.hero-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.5) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.035;
}

/* ===== Content ===== */
.hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 100%;
}

/* Main heading */
.hero-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.25rem, 8.5vw, 6rem);
  line-height: 1.02; letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
  animation: hero-rise 0.7s ease-out 0.08s both;
}
.hero-title-line { display: block; color: #f5f1ec; }
.hero-title-accent {
  font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, var(--brand-red) 10%, var(--brand-orange) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(238,90,83,0.35)) drop-shadow(0 0 60px rgba(245,151,52,0.18));
  padding-bottom: 0.08em;                    /* So the descenders of italic letters are not clipped */
}

/* Description */
.hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.125rem); font-weight: 300; line-height: 1.75;
  color: #a89a92; max-width: 34rem; margin-bottom: 2.75rem;
  animation: hero-rise 0.7s ease-out 0.16s both;
}

/* ===== Buttons ===== */
.hero-actions {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.875rem; margin-bottom: 4.5rem;
  animation: hero-rise 0.7s ease-out 0.24s both;
}
@media (min-width: 640px) { .hero-actions { flex-direction: row; align-items: center; } }

.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500;
  padding: 0.9375rem 2rem; border-radius: 9999px;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.hero-btn--primary {
  background: var(--brand-red); color: #fff; border: 1px solid transparent;
  box-shadow: 0 10px 30px -10px rgba(238,90,83,0.65);
}
.hero-btn--primary:hover {
  background: var(--brand-red-dark);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px -12px rgba(238,90,83,0.75);
}
.hero-btn--primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 8px 22px -10px rgba(238,90,83,0.6);
  transition-duration: 110ms;
}
.hero-btn-arrow { width: 1rem; height: 1rem; transition: transform 220ms ease-out; }
.hero-btn--primary:hover .hero-btn-arrow { transform: translateX(4px); }

.hero-btn--ghost {
  background: transparent; color: #e9e2db;
  border: 1px solid rgba(245,241,236,0.18);
}
.hero-btn--ghost:hover {
  border-color: rgba(245,241,236,0.38);
  background: rgba(245,241,236,0.05);
  transform: translateY(-2px);
}
.hero-btn--ghost:active { transform: translateY(0) scale(0.99); transition-duration: 110ms; }
.hero-btn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

/* ===== Capabilities strip at the bottom ===== */
.hero-capabilities {
  list-style: none; width: 100%; max-width: 60rem;
  padding-top: 2rem; border-top: 1px solid rgba(245,241,236,0.10);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem 1.5rem;
  animation: hero-rise 0.7s ease-out 0.32s both;
}
.hero-capabilities li {
  display: inline-flex; align-items: center;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8d817a;
}
.hero-capabilities li:not(:last-child)::after {
  content: ""; width: 3px; height: 3px; border-radius: 9999px;
  background: var(--brand-red); margin-left: 1.5rem;
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-subtitle, .hero-actions, .hero-capabilities { animation: none; opacity: 1; transform: none; }
  .hero-btn:hover, .hero-btn:hover .hero-btn-arrow { transform: none; }
}

/* ================================================================
   About section - light
   ================================================================ */
.about { background: var(--cream); }
.about .section-title { margin-bottom: 1.75rem; }
.about p { max-width: 38rem; }

/* Heading block sits above the two-column row */
.about-head { margin-bottom: 1.5rem; }

/* Top row: text card + image. Stacks on mobile (text first). */
.about-top { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 1024px) { .about-top { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }

/* Left column: the story inside a clean white card */
.about-card {
  background: var(--card); border: 1px solid var(--line-light);
  border-radius: var(--radius-card); padding: 2.5rem;
  box-shadow: var(--shadow-card);
}
@media (max-width: 480px) { .about-card { padding: 1.75rem; } }
.about-card-title {
  font-family: var(--font-serif); font-weight: 600; color: var(--on-cream);
  font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: 1.25rem;
}

/* Right column: the Reen logo above a pull-quote, stacked and centered.
   Stretches to the text card height on desktop; min-height keeps it
   reasonable once the columns stack on mobile. */
.about-media {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 16rem; padding: 2.5rem;
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-card);
}
/* Contained, never stretched or cropped. The logo file is a JPEG, so it has
   no alpha and its white background is baked in - multiply blends that white
   into the warm card color instead of showing a white rectangle.
   Sized a little larger than the old mark because this lockup is taller and
   carries two lines of tagline that need to stay readable. */
.about-media img {
  width: auto; height: auto;
  max-width: 80%; max-height: 20rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Hairline separating the logo from the quote */
.about-media-rule {
  display: block; width: 4rem; height: 1px;
  background: var(--line-light);
  margin: 1.75rem 0 1.25rem;
}
/* Caption-style pull-quote: italic Playfair, warm and understated */
.about-media .about-quote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.7; color: var(--on-cream-muted);
  text-align: center; max-width: 26rem; margin: 0;
}
@media (max-width: 480px) {
  .about-media { padding: 1.75rem; }
  .about-media img { max-width: 88%; }
  .about-media-rule { margin: 1.5rem 0 1rem; }
}

/* Team box: a thin gradient line on the left instead of a thick border */
.team-box {
  margin-top: 2rem; padding: 1.5rem 1.75rem;
  background: var(--cream); border: 1px solid var(--line-light);
  border-radius: var(--radius-card);
  position: relative; overflow: hidden;
}
.team-box::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: var(--brand-gradient);
}
.team-title {
  font-family: var(--font-serif); font-weight: 600; color: var(--on-cream);
  font-size: 1.375rem; letter-spacing: -0.02em; margin-bottom: 0.5rem;
}

/* Stat cards: full-width row below the top row (2 per row on mobile) */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
/* Two cards, so the desktop row stays 2 columns and is capped and centred
   rather than stretching each card across half the container. */
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); max-width: 44rem; margin: 3rem auto 0; } }
/* Column layout keeps the icon/number/label as one snug group and centers
   it vertically when a neighbouring card is taller than this one. */
.stat-card {
  background: var(--card); border: 1px solid var(--line-light);
  border-radius: var(--radius-card); padding: 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Thin brand-gradient accent along the top edge. overflow:hidden on the card
   clips it to the rounded corners, and it sits inside the 1.5rem top padding
   so it never touches the icon, number or label. */
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gradient);
  opacity: 0.35;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The whole hover choreography - lift, shadow, border tint and the top accent
   line - shares one duration and easing curve so it moves as a single gesture.
   Pointer devices only, so a tap can't leave the card raised. */
@media (hover: hover) and (pointer: fine) {
  .stat-card:hover {
    transform: translateY(-6px); border-color: rgba(238,90,83,0.28);
    box-shadow: var(--shadow-card-hover);
  }
  .stat-card:hover::before { opacity: 1; height: 3px; }
}
.stat-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.875rem; color: var(--brand-red);
  background: rgba(238,90,83,0.08); border: 1px solid rgba(238,90,83,0.16);
  transition: background 300ms cubic-bezier(0.22, 1, 0.36, 1),
              color 300ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-icon .icon { width: 1.25rem; height: 1.25rem; }
/* The chip fills with the brand gradient and the icon flips to white when the
   card is hovered. Pointer devices only, so a tap can't leave it stuck filled. */
@media (hover: hover) and (pointer: fine) {
  .stat-card:hover .stat-icon { background: var(--brand-gradient); border-color: transparent; color: #fff; }
}
.stat-value {
  font-family: var(--font-serif); font-weight: 600; color: var(--on-cream);
  font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1;
  letter-spacing: -0.03em; margin-bottom: 0.5rem;
}
/* The border-top is the hairline between the number and the label. Its own
   margin-top plus the number's 0.5rem margin-bottom put 0.875rem above the
   line, matching the 0.875rem below it, so it sits evenly between the two
   instead of hugging the number. Full width to match the card's left-aligned
   icon / number / label stack. */
.stat-label {
  font-size: 0.6875rem; font-weight: 500; color: var(--on-cream-muted);
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5;
  margin-top: 0.375rem;
  padding-top: 0.875rem; border-top: 1px solid var(--line-light);
}

/* ================================================================
   Leadership section (CEO) - light
   ================================================================ */
.ceo { background: var(--cream-alt); border-top: 1px solid var(--line-light); overflow: hidden; }
.ceo-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .ceo-grid { grid-template-columns: 1fr 1.1fr; gap: 5rem; } }
.ceo-image-wrap { position: relative; }
.ceo-shadow { position: absolute; inset: 0; border-radius: 1.5rem; }
.ceo-shadow--orange { background: rgba(245,151,52,0.14); transform: translate(0.875rem, 0.875rem); }
.ceo-shadow--red { background: rgba(238,90,83,0.12); transform: translate(-0.875rem, -0.875rem); }
.ceo-image {
  position: relative; aspect-ratio: 4/5; border-radius: 1.5rem; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-light);
  box-shadow: var(--shadow-card-hover);
}
.ceo-image img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);                 /* Starting point */
  transform-origin: center center;
  transition: transform 700ms ease-out;
}
/* Same idea as the project cards: a slow subtle zoom, mouse only */
@media (hover: hover) and (pointer: fine) {
  .ceo-image:hover img { transform: scale(1.05); }
}
.ceo-image-overlay {
  position: absolute; inset: 0; z-index: 1;                    /* Above the image */
  background: linear-gradient(to top, rgba(30,24,21,0.88), rgba(30,24,21,0.15) 55%, transparent);
}
.ceo-image-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; color: var(--on-ink); z-index: 2; }
.ceo-caption-title {
  font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 0.75rem;
}
.ceo-caption-sub {
  display: inline-block; color: var(--on-ink-muted);
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding-top: 0.75rem; border-top: 1px solid var(--line-dark);
}

/* Quote styled in a refined editorial manner */
.ceo-text { display: flex; flex-direction: column; justify-content: center; }
.ceo-quote-wrap { position: relative; padding-left: 1.75rem; }
.ceo-quote-wrap::before {
  content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 1px;
  background: linear-gradient(to bottom, var(--brand-red), var(--brand-orange), transparent);
}
.ceo-quote-mark { position: absolute; top: -0.75rem; left: 1.25rem; width: 2.5rem; height: 2.5rem; color: rgba(238,90,83,0.13); z-index: 0; }
.ceo-quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.65;
  color: var(--on-cream); position: relative; z-index: 1;
}
.ceo-signature {
  border-top: 1px solid var(--line-light); padding-top: 2rem; margin-top: 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.ceo-name { font-family: var(--font-serif); font-weight: 600; color: var(--on-cream); font-size: 1.5rem; letter-spacing: -0.02em; }
.ceo-signature .text-muted {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.5rem;
}
.ceo-social { display: flex; gap: 0.75rem; }
.social-circle {
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--card);
  border: 1px solid var(--line-light); display: flex; align-items: center; justify-content: center;
  color: var(--on-cream-muted); transition: all 0.3s ease;
}
.social-circle:hover {
  color: #fff; background: var(--brand-red); border-color: transparent;
  transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(238,90,83,0.9);
}
.social-circle--orange:hover { background: var(--brand-orange); box-shadow: 0 14px 26px -14px rgba(245,151,52,0.9); }

/* ================================================================
   Services section - light
   ================================================================ */
.services { background: var(--cream); border-top: 1px solid var(--line-light); }
/* The tab row takes over the space under the section head, so the head's own
   4.5rem bottom margin is trimmed here to keep the vertical rhythm. */
.services .section-head { margin-bottom: 2.75rem; }

/* Category tabs: same pill geometry as the Projects filter buttons, recoloured
   for the light section. aria-selected is the single styling hook, so the JS
   only has to keep the ARIA state correct and the visuals follow. */
.service-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.625rem; margin-bottom: 3rem;
}
.service-tab {
  padding: 0.6875rem 1.5rem; border-radius: 9999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent; color: var(--on-cream-muted);
  border: 1px solid var(--line-light);
  /* Named properties rather than `all`, so only the four things that actually
     change are animated. The fill settles over 250ms ease-out; the press is
     quicker so it reads as a response to the click, not part of the fill. */
  transition: background-color 250ms ease-out, color 250ms ease-out,
              border-color 250ms ease-out, box-shadow 250ms ease-out,
              transform 150ms ease-out;
}
/* Press feedback. Pure CSS on purpose: :active is bound to the pointer being
   down, so it cannot be left stuck by rapid clicking the way a JS-applied
   class could, and it cancels itself the moment the button is released. */
.service-tab:active { transform: scale(0.97); }
/* Pointer devices only, so a tap doesn't leave an unselected tab looking hovered */
@media (hover: hover) and (pointer: fine) {
  .service-tab:not([aria-selected="true"]):hover {
    color: var(--on-cream); background: rgba(42,35,32,0.04);
    border-color: rgba(42,35,32,0.22);
  }
}
.service-tab[aria-selected="true"] {
  background: var(--brand-red); color: #fff; border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(238,90,83,0.65);
}
.service-tab:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }
@media (max-width: 479px) {
  .service-tab { padding: 0.625rem 1.125rem; letter-spacing: 0.12em; }
}

/* Panels. The inactive ones carry the hidden attribute, so only one panel is
   in the layout at a time and there is no cross-fade overlap to jump through.
   The lift is deliberately small: the cards inside are already staggering in
   from 24px, and at the panel's old 8px the two stacked up to ~32px of travel
   on the first card, which read as two separate movements. At 4px the panel
   just carries the surface change and the card stagger does the choreography.
   300ms so the fade lands under the first card's arrival rather than with it. */
.service-panel {
  opacity: 0; transform: translateY(4px);
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.service-panel.is-active { opacity: 1; transform: none; }
.service-panel[hidden] { display: none; }
/* Panel is focusable (it holds no focusable children), but it is a scroll
   target, not a button - no focus ring styling beyond the browser default. */
.service-panel:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 6px; }
/* Nothing moves or fades for anyone who asked for less motion: the panel just
   swaps, the pill just changes colour, and the press feedback is dropped. */
@media (prefers-reduced-motion: reduce) {
  .service-panel { transition: none; transform: none; }
  .service-tab { transition: none; }
  .service-tab:active { transform: none; }
}

/* One column on mobile, two on tablet, three from 1024px up - every card the
   same size, inside whichever panel is showing. Gap stays 1.25rem at every
   breakpoint. */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
/* The brand tint that used to sit on the inner media box is now the card's own
   surface, so the badge, icon, title and description all sit on one gradient
   instead of on two stacked panels. The tint is still the one .project-card
   falls back to when its image fails to load, so the two sections stay in the
   same visual family. Dark tiles on a light section, so the shadow tokens stay
   the light-section ones - the shadow is cast onto the cream background, not
   onto the card. The 3.75rem top padding is what clears the absolutely
   positioned badge. */
.service-card {
  background:
    linear-gradient(140deg, rgba(238,90,83,0.20), rgba(245,151,52,0.12)),
    var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-card); padding: 3.75rem 2rem 2rem;
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Thin brand-gradient accent along the very top edge, same treatment as
   .stat-card. overflow:hidden on the card clips it to the rounded corners. */
.service-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: var(--brand-gradient);
  opacity: 0.35;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Order number, back on the card now that the media box is gone. It sits in the
   empty band on the right, level with the icon chip: below the badge, above the
   title, and clear of the icon. The bottom-right corner was the obvious spot,
   but the description would then run across it, and measured against this
   lighter gradient that dropped the body text to 3.6:1 - under AA. Here nothing
   overlaps it, so the text keeps its full contrast. */
.service-card::after {
  content: attr(data-index);
  position: absolute; top: 3.5rem; right: 1.25rem; z-index: 0;
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--on-ink);
  opacity: 0.10; pointer-events: none; user-select: none;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Content paints above the watermark. The badge is excluded on purpose: it is
   already absolutely positioned with its own z-index, and this rule would
   otherwise overwrite that position and drop it into the flow. */
.service-card > *:not(.service-badge) { position: relative; z-index: 1; }
/* 0.30 red on the border, matching what .project-card uses on dark. */
.service-card:hover { transform: translateY(-6px); border-color: rgba(238,90,83,0.30); box-shadow: var(--shadow-card-hover); }
/* Pointer devices only, so a tap can't leave the card lit up. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover::before { opacity: 1; height: 3px; }
  .service-card:hover::after { opacity: 0.16; }
}

/* Category badge in the top-left corner, same treatment as .project-badge. Its
   containing block is the card itself now that the media box is gone. Kept as
   its own rule rather than joined onto that selector so the Projects section is
   not touched. */
.service-badge {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 1;
  padding: 0.375rem 0.75rem; border-radius: 9999px;
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--on-ink);
  background: rgba(20,16,14,0.55);
  border: 1px solid rgba(245,241,236,0.20);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* The chip's fill is dark rather than red-tinted, because the card behind it is
   already brand-tinted - a red chip on a red wash would disappear. It sits
   directly on the card now, so it carries the margin that separates it from the
   title (it used to be centred in a box of its own). */
.service-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--brand-red);
  background: rgba(20,16,14,0.45); border: 1px solid rgba(238,90,83,0.28);
  transition: background 0.4s ease, color 0.4s ease,
              border-color 0.4s ease, transform 0.4s ease;
}
.service-icon .icon { width: 1.125rem; height: 1.125rem; }
/* Stands in for the project image's zoom: the chip fills with the gradient and
   grows very slightly. Pointer devices only, so a tap leaves nothing stuck. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-icon {
    background: var(--brand-gradient); border-color: transparent; color: #fff;
    transform: scale(1.05);
  }
}
/* The colour change still happens for reduced motion, the movement does not. */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover .service-icon { transform: none; }
}

/* Title and description keep the type they had, now on the card's own padding
   rather than inside a text block of their own. */
.service-name {
  font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600;
  color: var(--on-ink); letter-spacing: -0.02em;
  line-height: 1.3; margin-bottom: 0.5rem;
}
/* .text-muted is the light-section body colour by default, so it is overridden
   here - scoped to the card, so the class keeps its normal meaning elsewhere. */
.service-card .text-muted { font-size: 1rem; line-height: 1.75; color: var(--on-ink-muted); }

/* ---- Entrances, both riding on the shared .reveal system ----------------
   The cards already fade and lift; this only overrides the transform so they
   also settle in from a slight scale. Duration, easing and the --reveal-delay
   stagger all still come from .reveal itself, so nothing is duplicated. */
.service-card.reveal { transform: translateY(24px) scale(0.96); }
.service-card.reveal.is-visible { transform: none; }

/* The gradient word in "Our Services" trails the rest of the heading by 130ms.
   Opacity only, deliberately: .title-accent is an inline element, so a
   transform would not apply to it, and making it inline-block to enable one
   would let its 0.06em bottom padding grow the line box - a few pixels of
   layout shift when the reveal classes come off. 500ms so it finishes inside
   the window before script.js strips those classes at delay + 720ms. */
.services .section-head.reveal .title-accent { opacity: 0; }
.services .section-head.reveal.is-visible .title-accent {
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1)
              calc(var(--reveal-delay, 0ms) + 130ms);
}
/* Reduced motion: both entrances collapse to their finished state. script.js
   also strips .reveal entirely in that mode, so these are a second line of
   defence rather than the only one. */
@media (prefers-reduced-motion: reduce) {
  .service-card.reveal,
  .service-card.reveal.is-visible { transform: none !important; }
  .services .section-head.reveal .title-accent,
  .services .section-head.reveal.is-visible .title-accent {
    opacity: 1 !important; transition: none !important;
  }
}

/* ================================================================
   Projects section - dark
   ================================================================ */
.projects { background: var(--ink); position: relative; overflow: hidden; border-top: 1px solid var(--line-dark); }
.projects .container { position: relative; z-index: 1; }

/* Filter buttons in the same style as the Hero buttons */
.filter-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 0.75rem; }
.filter-btn {
  padding: 0.6875rem 1.5rem; border-radius: 9999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent; color: var(--on-ink-muted);
  border: 1px solid rgba(245,241,236,0.18);
  transition: all 0.3s ease;
}
.filter-btn:hover { color: var(--on-ink); background: rgba(245,241,236,0.05); border-color: rgba(245,241,236,0.38); }
.filter-btn.is-active {
  background: var(--brand-red); color: #fff; border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(238,90,83,0.65);
}
.filter-btn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

/* Projects header: title block on the left, filter buttons on the right.
   Own class instead of .section-head, because that one is shared with the
   Services section, which stays centered. */
.projects-head { margin-bottom: 4.5rem; }
/* flex-end anchors the buttons to the bottom of the title block, so they sit
   on the heading's line instead of floating up beside the eyebrow. */
.projects-head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem 2rem;
}
.projects-head-text { text-align: left; }
.projects-head .section-title { margin-bottom: 0; }
.projects-head .section-desc { max-width: 42rem; margin-top: 1.5rem; }
.projects-head .filter-buttons { justify-content: flex-end; margin-top: 0; }

/* Below ~900px the row stacks: title block on top, filters underneath as a
   single row that scrolls sideways instead of overflowing the page. */
@media (max-width: 899px) {
  .projects-head-row { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .projects-head .filter-buttons {
    justify-content: flex-start; width: 100%;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.375rem;
    scrollbar-width: none;
  }
  .projects-head .filter-buttons::-webkit-scrollbar { display: none; }
  .projects-head .filter-btn { flex: 0 0 auto; }
}

.projects-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } }
/* Portfolio card: image box on top, title + description below on the
   card surface (the panel keeps the text readable on the dark section). */
.project-card {
  position: relative; overflow: hidden; border-radius: var(--radius-card);
  background: var(--ink-soft); border: 1px solid var(--line-dark);
  padding: 0.75rem;
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  animation: pop-scale 0.35s ease;
}
.project-card.is-hidden { display: none; }
.project-card:hover {
  transform: translateY(-6px); border-color: rgba(238,90,83,0.30);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9);
}

/* Rounded image box - keeps the zoom clipped inside its corners */
.project-media {
  position: relative; overflow: hidden;
  border-radius: 1rem; aspect-ratio: 4/3;
  background: var(--ink);
}
.project-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35);
  transform: scale(1);                 /* Starting point */
  transform-origin: center center;
  transition: transform 700ms ease-out, filter 0.7s ease;
}
.project-card:hover .project-media img { filter: grayscale(0); }
/* Zoom only on devices with a real mouse.
   On touch the image stays at its normal size with no stuck hover effect. */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-media img { transform: scale(1.06); }
}

/* Category badge over the top-left corner of the image */
.project-badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
  padding: 0.375rem 0.75rem; border-radius: 9999px;
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-ink);
  background: rgba(20,16,14,0.55);
  border: 1px solid rgba(245,241,236,0.20);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Text block under the image */
.project-body { padding: 1.25rem 0.75rem 0.625rem; }
.project-title {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600;
  color: var(--on-ink); letter-spacing: -0.02em;
  line-height: 1.3; margin-bottom: 0.5rem;
}
.project-desc { font-size: 0.875rem; line-height: 1.7; color: var(--on-ink-muted); }

/* Fallback state (set by script.js when a photo fails to load): the broken
   image is hidden and its box keeps a soft brand tint, while the title and
   description underneath stay readable. */
.project-card.is-image-missing .project-media img { display: none; }
.project-card.is-image-missing .project-media {
  background:
    linear-gradient(140deg, rgba(238,90,83,0.20), rgba(245,151,52,0.12)),
    var(--ink-soft);
}

@keyframes pop-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ================================================================
   Clients section - light + the marquee
   ================================================================ */
/* Light section again, with the dark glowing chips reading as tiles on top of
   it. The heading needs no rules of its own: the markup already carries the
   plain .eyebrow / .section-title / .section-desc classes, so removing the
   dark overrides that used to sit here puts it back on the same light-section
   colours About and Services use. */
.clients { background: var(--cream-alt); border-top: 1px solid var(--line-light); overflow: hidden; }
.clients-head { text-align: center; max-width: 48rem; margin: 0 auto 3.5rem; display: flex; flex-direction: column; align-items: center; }
.marquee { position: relative; padding: 0.875rem 0; }  /* room for the chip shadow + hover lift */
.marquee-fade { position: absolute; top: 0; bottom: 0; width: 10rem; z-index: 10; pointer-events: none; }
.marquee-fade--left { left: 0; background: linear-gradient(to right, var(--cream-alt), transparent); }
.marquee-fade--right { right: 0; background: linear-gradient(to left, var(--cream-alt), transparent); }
.marquee-track {
  display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center;
  gap: 1.25rem; padding: 0 0.625rem; width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Warm lamp-lit tile: an amber pool of light over a cool gray base, softened by
   a frosted overlay. No border - the glow alone defines the edge.
   position:relative is what the ::before overlay insets against; it changes
   nothing about the layout. */
.client-chip {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  min-width: 12rem; height: 6rem; padding: 0 1.75rem;
  background:
    radial-gradient(ellipse 90% 80% at 55% 55%,
      rgba(255,180,110,0.62) 0%,
      rgba(200,120,75,0.32) 32%,
      rgba(90,65,50,0.12) 60%,
      transparent 80%),
    linear-gradient(160deg, #46454a 0%, #3e3d41 100%);
  border: 1px solid #debeae;
  border-radius: 1.125rem;
  box-shadow: 0 0 46px rgba(230,150,85,0.20);
  filter: saturate(0.9);
  font-family: var(--font-serif);
  font-size: 1.125rem; font-weight: 700; letter-spacing: 0.01em;
  text-align: center; color: #fff;
  transition: transform 300ms ease, box-shadow 300ms ease,
              border-color 300ms ease;
}
/* Frosted softening over the gradient. The label is a bare text node inside the
   chip, so it cannot be given a z-index of its own; instead the overlay takes a
   negative one. filter: saturate() above makes the chip a stacking context, and
   inside one the paint order is: chip background, then negative-z children,
   then inline text - so the frost still lands on the gradient and the label
   still sits crisp on top, exactly as intended. */
.client-chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: rgba(60,50,45,0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Lift only where there is a real pointer, so a tap can't leave a chip
   stuck in its hover state on touch screens. */
@media (hover: hover) and (pointer: fine) {
  .client-chip:hover {
    transform: translateY(-4px);
    border-color: #ecd4bd;
    box-shadow: 0 0 60px rgba(230,150,85,0.32);
  }
}
/* Reduced motion: the hover state still changes, it just arrives instantly and
   without the lift (the lift is also dropped by the shared block further down). */
@media (prefers-reduced-motion: reduce) {
  .client-chip { transition: none; }
}
/* Slightly smaller tiles on small phones so more of the row is visible */
@media (max-width: 480px) {
  .client-chip {
    min-width: 10.5rem; height: 5.25rem;
    padding: 0 1.25rem; font-size: 1rem;
  }
}
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================================
   Contact section - dark
   ================================================================ */
.contact { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; border-top: 1px solid var(--line-dark); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; position: relative; z-index: 1; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.contact-intro { color: var(--on-ink-muted); margin-bottom: 3rem; font-size: 1.0625rem; font-weight: 300; max-width: 34rem; }
.contact-intro.serif, .section-desc.serif { font-weight: 400; }

/* Contact details separated by hairlines */
.contact-info { display: flex; flex-direction: column; }
.contact-item { display: flex; align-items: flex-start; padding: 1.75rem 0; border-top: 1px solid var(--line-dark); }
.contact-item:last-child { border-bottom: 1px solid var(--line-dark); }
.contact-item-icon {
  flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  background: rgba(238,90,83,0.10); border: 1px solid rgba(238,90,83,0.22);
  display: flex; align-items: center; justify-content: center;
  margin-right: 1.5rem; color: var(--brand-red);
}
.contact-item-icon .icon { width: 1.125rem; height: 1.125rem; }
.contact-item-title {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: 0.625rem;
}
.contact-item p, .contact-item a { font-size: 0.9375rem; line-height: 1.7; }
.contact-phones { display: flex; flex-direction: column; gap: 0.25rem; }
.contact-phones a:hover, .link-hover:hover { color: var(--brand-red); transition: color 0.2s; }

/* Form card */
.contact-form-card {
  background: rgba(245,241,236,0.04); backdrop-filter: blur(24px);
  padding: 2rem; border-radius: 1.5rem; border: 1px solid var(--line-dark);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.85);
  position: relative; overflow: hidden; z-index: 1;
}
@media (min-width: 768px) { .contact-form-card { padding: 2.5rem; } }
.contact-form-glow {
  position: absolute; top: 0; right: 0; width: 18rem; height: 18rem;
  background: rgba(238,90,83,0.16); border-radius: 9999px; filter: blur(70px);
  margin: -9rem -9rem 0 0; pointer-events: none;
}
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 1; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: 0.625rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: rgba(245,241,236,0.04); border: 1px solid var(--line-dark);
  border-radius: 0.875rem; padding: 0.9375rem 1.125rem; color: var(--on-ink);
  font-family: var(--font-sans); font-size: 0.9375rem;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group textarea { resize: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: #6b5f58; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: rgba(238,90,83,0.6);
  background: rgba(245,241,236,0.07);
  box-shadow: 0 0 0 3px rgba(238,90,83,0.12);
}
/* Validation states. These come after the :focus rules on purpose: a field that
   is still wrong stays outlined in red while it is focused, rather than the
   focus ring hiding the problem. */
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(238,90,83,0.14);
}
.form-group input[aria-invalid="true"]:focus,
.form-group select[aria-invalid="true"]:focus,
.form-group textarea[aria-invalid="true"]:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(238,90,83,0.24);
}
/* Message under the field. An animation rather than a transition, so it simply
   plays when JS drops the hidden attribute - no reflow juggling needed. */
.form-error {
  margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.5;
  color: var(--brand-red);
  animation: form-msg-in 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form-error[hidden] { display: none; }
/* Confirmation by the submit button. Sage green rather than the brand red, so
   it reads as "went well" instead of "something is wrong", but muted enough to
   sit in the warm palette. The flex gap on .contact-form spaces it. */
.form-success {
  padding: 0.875rem 1.125rem; border-radius: 0.875rem;
  font-size: 0.9375rem; line-height: 1.6;
  color: #a7d9ba;
  background: rgba(122,190,152,0.10);
  border: 1px solid rgba(122,190,152,0.30);
  animation: form-msg-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form-success[hidden] { display: none; }
/* Failure notice: same shape as the confirmation above, in the brand red, so a
   send that did not go through reads as a problem rather than a result. */
.form-send-error {
  padding: 0.875rem 1.125rem; border-radius: 0.875rem;
  font-size: 0.9375rem; line-height: 1.6;
  color: #f2b0ab;
  background: rgba(238,90,83,0.10);
  border: 1px solid rgba(238,90,83,0.32);
  animation: form-msg-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form-send-error[hidden] { display: none; }
.form-send-error a { color: inherit; text-decoration: underline; }
/* While the message is in flight the button is inert; it keeps its shape and
   colour, just dimmed, so the row does not shift. */
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
@keyframes form-msg-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* The messages still appear, they just do not move or fade in. */
@media (prefers-reduced-motion: reduce) {
  .form-error, .form-success, .form-send-error { animation: none; }
}

.select-wrap { position: relative; }
.select-wrap select { appearance: none; }
.select-wrap select option { background: var(--ink); color: var(--on-ink); }
.select-arrow { position: absolute; top: 50%; right: 1.125rem; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--on-ink-dim); pointer-events: none; }
.form-submit { width: 100%; margin-top: 0.5rem; }

/* Map */
.map-card {
  position: relative; z-index: 1;
  width: calc(100% - 2rem); max-width: var(--container); margin: 5rem auto 0;
  border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--line-dark);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.85); height: 450px;
}
.map-frame { width: 100%; height: 100%; filter: grayscale(1); opacity: 0.55; transition: filter 0.7s ease, opacity 0.7s ease; }
.map-card:hover .map-frame { filter: grayscale(0); opacity: 1; }
.map-info { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 20; }
@media (min-width: 768px) { .map-info { bottom: 2.5rem; left: 2.5rem; right: auto; } }
.map-info-box {
  background: rgba(30,24,21,0.82); backdrop-filter: blur(12px);
  padding: 1.75rem; border-radius: 1.25rem; border: 1px solid var(--line-dark);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.85); max-width: 24rem;
}
.map-info-title { font-family: var(--font-serif); color: var(--on-ink); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 0.625rem; }
.map-info-address { font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.25rem; }
.map-info-btn { width: 100%; }

/* ================================================================
   Footer - dark
   ================================================================ */
.footer { background: var(--ink); padding: 6rem 0 2.5rem; border-top: 1px solid var(--line-dark); position: relative; overflow: hidden; }
.footer-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.16; }
.footer-glow::before { content: ""; position: absolute; top: -8rem; right: -6rem; width: 26rem; height: 26rem; background: var(--brand-red); border-radius: 9999px; filter: blur(90px); }
.footer-glow::after { content: ""; position: absolute; bottom: -6rem; left: 20%; width: 18rem; height: 18rem; background: var(--brand-orange); border-radius: 9999px; filter: blur(90px); }
.footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 3.5rem; } }
.footer-brand .brand { margin-bottom: 1.5rem; }
.footer-about { color: var(--on-ink-muted); font-size: 0.9375rem; font-weight: 300; line-height: 1.8; margin-bottom: 2rem; padding-right: 1rem; }
.footer-social { display: flex; gap: 0.75rem; }
.social-sq {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: transparent; border: 1px solid rgba(245,241,236,0.18);
  display: flex; align-items: center; justify-content: center; color: var(--on-ink-muted);
  transition: all 0.3s ease;
}
.social-sq .icon { width: 1rem; height: 1rem; }
.social-sq:hover {
  background: var(--brand-red); border-color: transparent; color: #fff;
  transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(238,90,83,0.9);
}
.footer-heading {
  color: var(--on-ink); font-weight: 500; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding-bottom: 0.875rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.footer-links a { display: flex; align-items: center; gap: 0.75rem; color: var(--on-ink-muted); font-size: 0.9375rem; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--brand-red); }
.footer-dot { width: 0.3125rem; height: 0.3125rem; border-radius: 9999px; background: rgba(245,241,236,0.22); transition: all 0.3s ease; flex-shrink: 0; }
.footer-links a:hover .footer-dot { background: var(--brand-red); transform: scale(1.4); }
.footer-links a span:last-child { transition: transform 0.3s ease; }
.footer-links a:hover span:last-child { transform: translateX(0.25rem); }
.footer-contact { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: 1rem; color: var(--on-ink-muted); font-size: 0.9375rem; line-height: 1.7; }
.footer-contact-icon {
  width: 2rem; height: 2rem; border-radius: 9999px; flex-shrink: 0;
  background: rgba(238,90,83,0.10); border: 1px solid rgba(238,90,83,0.20);
  display: flex; align-items: center; justify-content: center;
}
.footer-contact-icon .icon { width: 0.875rem; height: 0.875rem; color: var(--brand-red); }
.footer-phones { display: flex; flex-direction: column; gap: 0.25rem; }
.footer-contact a:hover { color: var(--on-ink); transition: color 0.2s; }
.footer-bottom {
  padding-top: 2rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom p { color: var(--on-ink-dim); font-size: 0.75rem; letter-spacing: 0.06em; text-align: center; }
.footer-bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.footer-bottom-links a { color: var(--on-ink-dim); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.2s; }
.footer-bottom-links a:hover { color: var(--on-ink); }
.footer-bottom-sep { width: 3px; height: 3px; border-radius: 9999px; background: var(--brand-red); }

/* ================================================================
   Back to top button
   ================================================================ */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  padding: 0.8125rem; border-radius: 9999px; background: var(--brand-red); color: #fff;
  border: none; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(238,90,83,0.75);
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.9);
  transition: all 0.3s ease;
}
.back-to-top .icon { width: 1.25rem; height: 1.25rem; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--brand-red-dark); transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(238,90,83,0.85); }
.back-to-top:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

/* ================================================================
   Scroll reveal animation
   Fades in + slides up 24px, once per element only.
   Uses opacity + transform only (light on the GPU).
   The --reveal-delay value is set by script.js to create a gentle stagger
   across the grids (stat / service / project cards and client chips).
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   Respect the reduced-motion preference (for devices that disable animation)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  /* The bar still changes state, just with no transition */
  .navbar, .navbar-inner { transition: none !important; }
  /* Link highlighting still works, the underline just appears and hides instantly */
  .nav-links > a:not(.btn)::after { transform: scaleX(1) !important; transition: none !important; }
  /* No reveal animation: everything shows immediately */
  .reveal {
    opacity: 1 !important; transform: none !important;
    transition: none !important; --reveal-delay: 0ms !important;
  }
  .marquee-track { animation: none; }
  /* No lift or scale on hover */
  .btn:hover, .btn:active, .hero-btn:hover, .hero-btn:active, .btn--red:hover .icon,
  .stat-card:hover, .service-card:hover, .project-card:hover,
  .client-chip:hover, .social-circle:hover, .social-sq:hover,
  .footer-links a:hover .footer-dot, .footer-links a:hover span:last-child,
  .back-to-top:hover { transform: none; }
  /* No image zoom on hover */
  .project-card:hover .project-media img, .ceo-image:hover img { transform: none !important; }
}