/* ==========================================================================
   Kabinart Ghana Ltd — corporate site
   Palette + type from the 2023 Kabinart brand guide.
   Heading font is a free stand-in for Forma DJR Display; body is a free
   stand-in for Proxima Nova (both are paid fonts and weren't supplied) —
   swap the two @import/--font values below once licensed files are on hand.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/archivo-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --red: #E13028;
  --red-deep: #972727;
  --ink: #414042;
  --cream: #E8E5DE;
  --grey-light: #E3E4E5;
  --grey: #DCDBDC;
  --white: #FFFFFF;

  /* Subtle per-brand accents (Our Brands page only) — distinct enough to
     tell the three Enzo brands apart at a glance without competing with
     the site's own red brand colour used everywhere else. */
  --accent-living: #B8863B;
  --accent-living-tint: #F7F1E6;
  --accent-spaces: #35618C;
  --accent-spaces-tint: #EDF2F6;
  --accent-mist: #4C7A5A;
  --accent-mist-tint: #EEF4EF;

  --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --max-width: 1180px;
  --radius: 14px;
}

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

html { scroll-behavior: smooth; }

/* Focus visibility — consistent, branded, keyboard-only indicator
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — hidden until keyboard-focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 300;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: top 0.2s var(--ease-soft, ease);
}

.skip-link:focus {
  top: 16px;
}

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

html.is-loading, html.is-loading body {
  overflow: hidden;
  height: 100%;
}

/* Preloader
   ========================================================================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

#preloader.preloader-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Loading screen: the Kabinart mark opens, the left piece sliding left and the right piece sliding right,
   and "kabinart" comes out in the middle. Plays once on a visitor's first page of the session. */
.preloader-logo {
  width: min(88vw, 760px);
  height: auto;
  display: block;
  overflow: visible;
  transform-origin: 50% 50%;
  animation: plPull 1.15s 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.pl-piece { fill: var(--white); }
.pl-wipe, .pl-word { transform-box: fill-box; transform-origin: 50% 50%; }
.pl-intro { transform-box: view-box; transform-origin: 2115.5px 312px; animation: plIntro 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pl-L { animation: plOpenL 1.15s 0.9s cubic-bezier(0.76, 0, 0.24, 1) both; }
.pl-R { animation: plOpenR 1.15s 0.9s cubic-bezier(0.76, 0, 0.24, 1) both; }
.pl-wipe { animation: plWipe 1.15s 0.9s cubic-bezier(0.76, 0, 0.24, 1) both; }
.pl-word { animation: plPop 0.9s 1.05s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes plPull { from { transform: scale(2.6); } to { transform: scale(1); } }
@keyframes plIntro { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes plOpenL { from { transform: translate(1894.5px, -93px); } to { transform: translate(0, 0); } }
@keyframes plOpenR { from { transform: translate(-1894.5px, -93px); } to { transform: translate(0, 0); } }
@keyframes plWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes plPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .preloader-logo, .pl-intro, .pl-L, .pl-R, .pl-wipe, .pl-word { animation: none; }
  #preloader { transition: opacity 0.3s ease; }
  #preloader.preloader-hidden { transform: none; opacity: 0; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

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

/* Wider variant for sections that feel too hemmed-in on large screens at
   the standard --max-width (e.g. the Our Brands card row). */
.container-wide { max-width: 1440px; }

section { padding: 72px 0; }

.section-tight { padding: 48px 0; }

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--red-deep);
  margin-bottom: 0.75em;
  display: block;
}

.eyebrow-light { color: var(--white) !important; opacity: 0.92; }

.lede {
  font-size: 1.15rem;
  color: var(--ink);
  max-width: 640px;
}

.bg-cream { background: var(--cream); }
.bg-grey { background: var(--grey-light); }

/* Thin top rule for a section that needs a visible break from the one
   before it without a full background-color change (e.g. two plain-white
   sections stacked back to back). */
.section-divider { border-top: 1px solid var(--grey); }
.bg-ink { background: var(--ink); color: var(--white); }
.bg-ink h2, .bg-ink h3 { color: var(--white); }
.bg-red { background: var(--red); color: var(--white); }
.bg-red h2, .bg-red h3 { color: var(--white); }

.text-center { text-align: center; }

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover { background: var(--white); color: var(--red); }

.btn-white {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn-white:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.75em; }

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

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  max-width: 1440px;
}

.site-logo img { height: 34px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 6px;
  background: var(--grey-light);
  border-radius: 999px;
}

.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
}

.main-nav a:hover {
  color: var(--red-deep);
  background: rgba(65, 64, 66, 0.06);
}

.main-nav a[aria-current="page"] {
  color: var(--red-deep);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(65, 64, 66, 0.1);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--ink);
  display: block;
}

/* Hero
   ========================================================================== */
.hero {
  background: var(--cream);
  padding: 96px 0;
}

.hero h1 { max-width: 780px; }

.hero .lede { margin-top: 1em; }

/* Hero with supporting photo (About page) */
.hero-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.hero-photo-wrap {
  position: relative;
}

.hero-photo-frame {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(65, 64, 66, 0.18);
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-photo-book {
  position: absolute;
  z-index: 3;
  display: flex;
  width: 64%;
  aspect-ratio: 16 / 7;
  bottom: -32px;
  right: -38px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(65, 64, 66, 0.26);
  background: var(--white);
}

.hero-photo-book::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(20, 16, 16, 0.16), rgba(20, 16, 16, 0.04), rgba(20, 16, 16, 0.16));
  pointer-events: none;
}

.hero-photo-accent {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  cursor: pointer;
}

.hero-photo-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-photo-accent:hover img {
  transform: scale(1.08);
}

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo-frame { aspect-ratio: 16 / 10; }
  .hero-photo-book { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-accent img { transition: none; }
}

/* Cards / grid
   ========================================================================== */
.grid {
  display: grid;
  gap: 28px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card h3 { margin-bottom: 0.5em; }

.card p { color: var(--ink); flex-grow: 1; }

/* Brand card (Our Brands section) */
.brand-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-margin-top: 104px;
}

.brand-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.brand-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}


.brand-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  flex-grow: 1;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.brand-lockup img.brand-wordmark { height: 28px; width: auto; }

/* Department word set next to the "enzo" wordmark itself, so each brand
   reads as one lockup (enzo Living / enzo Spaces / enzo Mist) instead of
   the logo repeating the word "Enzo" a second time right underneath it. */
.brand-lockup-dept {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}

.brand-card p { color: var(--ink); }

.brand-card .btn { margin-top: auto; }

/* Brand stagger row — compact homepage preview, links through to the full Our Brands page.
   Static equal-width cards; the hover/zoom "which one are you looking at"
   treatment lives on the Our Brands page itself instead. */
.brand-stagger-row {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.brand-stagger-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(65, 64, 66, 0.08);
}

.brand-stagger-photo {
  width: 100%;
  height: 320px;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-stagger-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-stagger-body {
  padding: 20px 22px 24px;
  background: var(--cream);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.brand-stagger-body .brand-lockup { margin-bottom: 0; justify-content: flex-start; gap: 8px; }
.brand-stagger-body .brand-lockup img.brand-wordmark { height: 20px; }
.brand-stagger-body .brand-lockup-dept { font-size: 0.78rem; white-space: nowrap; }

/* Our Brands page — split hero, intro, and premium three-up cards
   ========================================================================== */
.brands-hero {
  position: relative;
  background: var(--cream);
  padding: 72px 0;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Three brand photos on the right, each labelled in its brand colour and linking to its card below. */
.brands-hero-collage {
  position: absolute;
  z-index: 1;
  right: max(24px, calc((100% - 1440px) / 2 + 24px));
  top: 56px;
  bottom: 56px;
  width: min(44%, 620px);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: 1.25fr 1fr;
  gap: 14px;
}
.bh-tile { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--grey); }
.bh-tile.k { grid-row: 1 / 3; }
.bh-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-tile.mist img { object-position: 50% 100%; }
.bh-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.bh-label i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Anchored near the real left edge with a capped gutter — a centered
   .container would drift the text further and further from the edge as
   the viewport gets wider, reading as "stuck in the middle" on big
   screens. clamp() keeps the gap sane instead of scaling with vw. */
.brands-hero-text {
  position: relative;
  z-index: 1;
  max-width: min(540px, 46%);
  /* Matches the header's own container math exactly (max-width:1440px,
     24px padding) so this lines up with the logo's left edge, not an
     arbitrary offset. */
  margin-left: max(24px, calc((100% - 1440px) / 2 + 24px));
}

.brands-hero-text .eyebrow { margin-bottom: 0.9em; }
.brands-hero-text .lede { margin-top: 1em; max-width: 460px; }

/* Eyebrow with a trailing rule line, e.g. "OUR BRANDS ———" */
.eyebrow-ruled {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow-ruled::after {
  content: '';
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.brands-hero-logos {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 2.2em;
  flex-wrap: wrap;
}

/* Stacked lockup for the hero only — wordmark above, department name
   below, unlike the inline lockup used on the brand cards elsewhere. */
.brands-hero-logos .brand-lockup {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 0;
}

.brands-hero-logos .brand-lockup img.brand-wordmark { height: 24px; }
.brands-hero-logos .brand-lockup-dept { font-size: 0.72rem; }

.brands-hero-logo-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(65, 64, 66, 0.3);
}

@media (max-width: 900px) {
  .brands-hero { display: block; padding: 36px 0; min-height: 0; }
  .brands-hero-text { max-width: none; margin-right: 24px; }
  .brands-hero-collage { position: relative; inset: auto; width: auto; height: clamp(170px, 46vw, 320px); margin: 32px 24px 0; grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: 1fr; gap: 10px; }
  .bh-tile.k { grid-row: auto; }
  .bh-label { left: 8px; bottom: 8px; font-size: 0.62rem; padding: 5px 8px 5px 7px; gap: 6px; }
  .bh-label i { width: 7px; height: 7px; }
}

@media (max-width: 420px) {
  .bh-enzo { display: none; }
}

@media (max-width: 480px) {
  .brands-hero-logos { flex-wrap: nowrap; gap: 16px; margin-top: 1.6em; }
  .brands-hero-logos .brand-lockup img.brand-wordmark { height: 20px; }
  .brands-hero-logos .brand-lockup-dept { font-size: 0.6rem; }
}

/* Premium brand cards — top image, lockup, tagline, category tags,
   description, per-brand accent button, subtle URL, coloured top edge. */
.brand-card-v2 {
  border-top: 4px solid var(--grey);
  box-shadow: 0 4px 24px rgba(65, 64, 66, 0.06);
  transition: box-shadow 0.25s var(--ease-soft);
}

.brand-card-v2:hover {
  box-shadow: 0 16px 40px rgba(65, 64, 66, 0.14);
}

.brand-card-v2.brand-card-living { border-top-color: var(--accent-living); }
.brand-card-v2.brand-card-spaces { border-top-color: var(--accent-spaces); }
.brand-card-v2.brand-card-mist { border-top-color: var(--accent-mist); }

.brand-card-v2 .brand-card-photo { aspect-ratio: 16 / 11; }

.brand-card-tagline { font-size: 1.15rem; margin: 0; }

.brand-card-categories {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}

.brand-card-living .brand-card-categories { color: var(--accent-living); }
.brand-card-spaces .brand-card-categories { color: var(--accent-spaces); }
.brand-card-mist .brand-card-categories { color: var(--accent-mist); }

.brand-card-v2 p.brand-card-desc { color: var(--ink); margin: 0; }

.brand-card-url {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.55;
  margin-top: -6px;
}

.btn-accent-living, .btn-accent-spaces, .btn-accent-mist { color: var(--white); }
.btn-accent-living:hover, .btn-accent-spaces:hover, .btn-accent-mist:hover { color: var(--white); }

.btn-accent-living { background: var(--accent-living); border-color: var(--accent-living); }
.btn-accent-living:hover { background: #9C7130; border-color: #9C7130; }
.btn-accent-spaces { background: var(--accent-spaces); border-color: var(--accent-spaces); }
.btn-accent-spaces:hover { background: #294C70; border-color: #294C70; }
.btn-accent-mist { background: var(--accent-mist); border-color: var(--accent-mist); }
.btn-accent-mist:hover { background: #3D6349; border-color: #3D6349; }

/* Feature list (About / Trade pages) */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feature-list .marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--red);
  border-radius: 2px;
}

.feature-list strong {
  font-family: var(--font-heading);
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: 4px 24px;
  transition: border-color 0.2s var(--ease-soft);
}

.faq-item[open] { border-color: var(--red-deep); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 28px 18px 0;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
}

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

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--red-deep);
  transition: transform 0.2s var(--ease-soft);
}

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

.faq-item p {
  margin: 0 0 20px;
  color: var(--ink);
  opacity: 0.85;
  max-width: 68ch;
}

/* Stat / capability strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-strip .stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--red);
}

.stat-strip .stat-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* Stat section — soft brand-color "bubbles" behind a ringed stat strip */
.stat-section {
  position: relative;
  overflow: hidden;
}

.stat-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.stat-bubbles .bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  animation: drift 18s ease-in-out infinite;
}

.bubble-1 { width: 220px; height: 220px; background: var(--red); opacity: 0.12; top: -70px; left: 4%; }
.bubble-2 { width: 150px; height: 150px; background: var(--red-deep); opacity: 0.12; bottom: -50px; left: 28%; animation-delay: -5s; }
.bubble-3 { width: 260px; height: 260px; background: var(--red); opacity: 0.08; top: -90px; right: 6%; animation-delay: -10s; }
.bubble-4 { width: 120px; height: 120px; background: var(--red-deep); opacity: 0.14; bottom: -30px; right: 24%; animation-delay: -3s; }

.stat-section .container { position: relative; z-index: 1; }

.stat-item { display: flex; justify-content: center; }

/* Dark glass stat card — same frosted-card language as the homepage's
   hero-float-card, reused here for a consistent, modern "vibe" site-wide. */
.stat-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 168px;
  background: rgba(20, 16, 16, 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 22px 28px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s var(--ease-soft);
}

.stat-item:hover .stat-card { transform: translateY(-4px); }

.stat-card .stat-number {
  font-size: 2rem;
  color: var(--red);
  line-height: 1;
}

.stat-card .stat-label {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 860px) {
  .stat-card { min-width: 0; width: 100%; padding: 18px 24px; }
  .stat-card .stat-number { font-size: 1.6rem; }
  .bubble-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-bubbles .bubble { animation: none; }
}

/* Leadership — small founder note on the About page */
.leader-card {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 640px;
}

.leader-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid var(--white);
  box-shadow: 0 6px 16px rgba(65, 64, 66, 0.18);
}

.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leader-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red-deep);
  margin-bottom: 2px;
}

.leader-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.leader-bio {
  color: var(--ink);
  opacity: 0.85;
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 600px) {
  .leader-card { gap: 16px; }
  .leader-photo { width: 64px; height: 64px; }
}

/* Capability grid — dense "what we do" tile set */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--grey);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  overflow: hidden;
}

.capability-item {
  background: var(--white);
  padding: 26px 24px;
  transition: background-color 0.2s var(--ease-soft);
}

.capability-item:hover { background: var(--cream); }

.capability-item .marker-sq {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--red);
  border-radius: 2px;
  margin-bottom: 14px;
}

.capability-item h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.capability-item p {
  font-size: 0.88rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}

/* Photo stack — stacked rectangular photo cards with caption overlay */
.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.photo-card {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.photo-card:hover img { transform: scale(1.05); }

.photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(65,64,66,0.82) 0%, rgba(65,64,66,0.25) 45%, transparent 75%);
}

.photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 20px;
}

.photo-caption .photo-tag {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-light);
  margin-bottom: 4px;
}

.photo-caption h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  margin: 0;
}

/* Timeline — icon markers sitting directly on the line, content branching
   straight off them, alternating above/below
   ========================================================================== */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;
  margin-top: 64px;
}

.tl-item { display: contents; }
.tl-item-1 > * { grid-column: 1; }
.tl-item-2 > * { grid-column: 2; }
.tl-item-3 > * { grid-column: 3; }
.tl-item-4 > * { grid-column: 4; }

.tl-spine {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 2px;
  background: var(--grey);
  align-self: center;
}

.tl-icon {
  grid-row: 2;
  justify-self: center;
  align-self: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(225, 48, 40, 0.3);
  z-index: 1;
}

.tl-icon img { width: 34px; height: 34px; object-fit: contain; display: block; }

.tl-content {
  justify-self: center;
  max-width: 210px;
  text-align: center;
}
.tl-up .tl-content { grid-row: 1; align-self: end; padding-bottom: 14px; }
.tl-down .tl-content { grid-row: 3; align-self: start; padding-top: 14px; }

.timeline-year {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: 6px;
}

.timeline-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 0.78rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
}

/* Forms
   ========================================================================== */
.form-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--red);
}

.form-field textarea { resize: vertical; min-height: 120px; }

.form-honeypot { position: absolute; left: -9999px; }

/* Contact info block */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

/* Contact page — details as tidy cards on the left, form on the right */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.contact-title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 0 0 0.35em; }
.contact-sub { margin: 0 0 26px; color: var(--ink); }

.contact-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); color: var(--ink); transition: border-color 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft); }
.contact-item:hover { border-color: var(--red); box-shadow: 0 8px 22px rgba(65, 64, 66, 0.08); color: var(--ink); }
.contact-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(225, 48, 40, 0.1); color: var(--red); display: grid; place-items: center; }
.contact-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-body .label, .contact-note .label {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--red-deep);
}
.contact-body .value { font-size: 1.05rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }

.contact-note { background: var(--grey-light); border-radius: var(--radius); padding: 20px 22px; }
.contact-note .label { display: block; margin-bottom: 6px; }
.contact-note p { margin: 0; font-size: 0.97rem; }
.contact-note a { overflow-wrap: anywhere; }

.form-card .contact-title { margin-bottom: 24px; }
.form-grid .form-field { margin-bottom: 0; }
.form-field .req { color: var(--red); }
.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.form-hint { font-size: 0.85rem; color: #5d5c5f; }
.form-hint span { color: var(--red); }

/* CTA band
   ========================================================================== */
.cta-band {
  padding: 64px 0;
  text-align: center;
}

.cta-band h2 { margin-bottom: 0.3em; }
.cta-band p { max-width: 560px; margin: 0 auto 0; }
.cta-band .btn-row { justify-content: center; }
.cta-band .eyebrow { margin-bottom: 0.5em; }

/* Full-bleed photo CTA — "Let's Connect" closing banner */
.connect-banner {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.connect-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 16, 0.5) 0%, rgba(20, 16, 16, 0.72) 100%);
}

.connect-banner-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 0 24px;
}

.connect-banner h2 {
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 0.35em;
}

.connect-banner p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  margin: 0 auto 1.75em;
  max-width: 480px;
}

.connect-banner .btn-row { margin-top: 0; }

.connect-banner-email {
  display: block;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.connect-banner-email:hover { color: var(--white); }

@media (max-width: 640px) {
  .connect-banner { min-height: 380px; }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1.5em 0 0;
}

.tag-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 7px 16px;
}

/* Footer
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--grey-light);
  padding: 56px 0 28px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 280px;
}

.footer-logo img { height: 40px; width: auto; }

.footer-tagline {
  margin: 0;
  color: var(--grey-light);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-social { display: flex; gap: 10px; }

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--grey-light);
  transition: background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
}

.footer-social a:hover { background: var(--red); color: var(--white); }
.footer-social svg { width: 17px; height: 17px; }

.footer-nav {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-col h4 {
  color: var(--white);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--grey-light); font-size: 0.95rem; }
.footer-col a:hover { color: var(--white); }

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Static "visit us" card instead of a live embedded map — an embedded
   Google Maps iframe renders blank wherever the page is sandboxed (e.g.
   the Artifact preview's content-security policy blocks cross-origin
   frames), so a plain map-styled card that links out is more reliable
   than a live embed that only sometimes loads. */
.footer-map {
  position: relative;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 32px),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color 0.2s var(--ease-soft), background-color 0.2s var(--ease-soft);
}

.footer-map:hover { border-color: rgba(255,255,255,0.28); }

.footer-map-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-map-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
}

.footer-map-icon svg { width: 24px; height: 24px; }

.footer-map-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-map-text strong {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

.footer-map-text span { color: var(--grey-light); font-size: 0.88rem; }

.footer-map-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease-soft);
}

.footer-map:hover .footer-map-cta { background: var(--red); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.85rem;
  color: var(--grey);
}

/* Motion primitives
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll progress bar
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--red-deep));
  z-index: 200;
  transition: width 0.1s linear;
}

/* Header scroll state
   ========================================================================== */
.site-header {
  transition: height 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(65, 64, 66, 0.08);
}

.site-header.is-scrolled .container { height: 68px; }

.site-logo img { transition: height 0.25s var(--ease-soft); }


/* Hamburger -> X morph */
.nav-toggle span { transition: transform 0.25s var(--ease-soft), opacity 0.2s ease, width 0.25s var(--ease-soft); }

.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons — sweep fill + arrow slide
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.btn-primary::before { background: var(--red-deep); }
.btn-outline::before { background: var(--ink); }
.btn-outline-white::before { background: var(--white); }
.btn-white::before { background: var(--cream); }

.btn-primary:hover::before,
.btn-outline:hover::before,
.btn-outline-white:hover::before,
.btn-white:hover::before { transform: scaleX(1); }

.btn-outline-white:hover { color: var(--red); }

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(65, 64, 66, 0.14); }
.btn:active { transform: translateY(0); }

.btn-arrow::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(5px); }

/* Cards — lift + accent bar + tilt
   ========================================================================== */
.card, .brand-card {
  position: relative;
  transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

/* Keep the shadow/border hover transition alongside the entrance animation. */
.card[data-reveal], .brand-card[data-reveal] {
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.card::before, .brand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 2;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.card:hover, .brand-card:hover {
  box-shadow: 0 20px 40px rgba(65, 64, 66, 0.12);
}

.card:hover, .brand-card:not(.brand-card-v2):hover { border-color: transparent; }

.card:hover::before, .brand-card:not(.brand-card-v2):hover::before { transform: scaleX(1); }

/* Our Brands cards stay perfectly still on hover: only the shadow deepens, and the
   brand-coloured top edge stays as it is (no sweeping bar). */
.brand-card-v2::before { display: none; }

.brand-card .brand-lockup img { transition: transform 0.3s var(--ease-out); }

/* Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Photos rise and settle in with a slight scale. */
.hero-photo-wrap[data-reveal],
.bh-tile[data-reveal],
.hero-tile[data-reveal],
.about-tile[data-reveal] { transform: translateY(40px) scale(0.96); }

.hero-photo-wrap[data-reveal].is-visible,
.bh-tile[data-reveal].is-visible,
.hero-tile[data-reveal].is-visible,
.about-tile[data-reveal].is-visible { transform: none; }

.grid [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.grid [data-reveal]:nth-child(3) { transition-delay: 0.16s; }

/* Hero decoration
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-decor .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: drift 16s ease-in-out infinite;
}

.hero-decor .blob-1 {
  width: 420px; height: 420px;
  background: var(--red);
  top: -140px; right: -100px;
  opacity: 0.18;
}

.hero-decor .blob-2 {
  width: 260px; height: 260px;
  background: var(--red-deep);
  bottom: -100px; right: 18%;
  opacity: 0.12;
  animation-delay: -6s;
}

.hero-decor .hero-mark {
  position: absolute;
  top: 50%;
  right: -60px;
  width: 380px;
  height: 380px;
  transform: translateY(-50%);
  opacity: 0.06;
  background-image: url('../assets/img/logos/kabinart-icon-red.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s linear;
}

.hero .container { position: relative; z-index: 1; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 26px) scale(1.06); }
}

/* Angled section edge (hero -> next section) */
.hero-edge {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 48px;
  background: var(--white);
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
  z-index: 1;
}

/* About page: the next section is cream too, so the angled edge takes that colour instead of white. */
.hero-edge.to-cream { background: var(--cream); }

@media (max-width: 860px) {
  .hero-edge { height: 28px; }
  .stat-section { padding-top: 40px; }
}

/* Home hero — statement on the left, three real project photos on the right, facts strip along the bottom.
   ========================================================================== */
.hero-single {
  position: relative;
  height: 100vh;
  min-height: 640px;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(225, 48, 40, 0.14), transparent 55%),
    #1B1A1C;
}

/* Photos sit right-aligned to the same edge as the header's Contact button, between the header and the strip. */
.hero-collage {
  position: absolute;
  z-index: 1;
  right: max(24px, calc((100% - 1440px) / 2 + 24px));
  top: 112px;
  bottom: 124px;
  max-height: 720px;
  margin-block: auto;
  width: min(44%, 640px);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-rows: 1.25fr 1fr;
  gap: 14px;
}
.hero-tile { overflow: hidden; border-radius: 10px; min-height: 0; background: #2a282a; }
.hero-tile.k { grid-row: 1 / 3; }
.hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 110px 0 120px;
  pointer-events: none;
}

/* Left edge lines up exactly with the header logo, as on the Our Brands page. */
.hero-text {
  pointer-events: auto;
  margin-left: max(24px, calc((100% - 1440px) / 2 + 24px));
  max-width: min(780px, 50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  color: var(--white);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.hero-kicker::after {
  content: '';
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.hero-title {
  margin: 0;
  color: var(--white);
  font-size: clamp(2.4rem, 4.9vw, 4.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.hero-title span { display: block; }

.hero-lede {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.hero-strip {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 24px;
  /* extra right padding keeps the last item clear of the floating WhatsApp button */
  padding: 22px max(96px, calc((100% - 1440px) / 2 + 96px)) 22px max(24px, calc((100% - 1440px) / 2 + 24px));
  background: rgba(14, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
}
.hero-strip div { display: flex; flex-direction: column; gap: 5px; }
.hero-strip b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-strip span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* Narrow desktops and landscape tablets: a little less headline and photo so they never touch. */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-collage { width: 40%; }
  .hero-title { font-size: clamp(2.2rem, 4.4vw, 3rem); }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-strip { background: rgb(20, 16, 16); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Homepage-only floating pill header, overlaid on the hero photo. It's
   fixed (out of document flow) rather than sticky, so the hero never needs
   a negative-margin offset to sit underneath it — and every readable piece
   (nav pill, CTA, toggle) carries its own contrasting background rather
   than relying on a transparent bar matching whatever happens to render
   behind it. */
.logo-overlay { display: none; }

.page-home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  padding: 20px 0;
}

.page-home .site-header .container,
.page-home .site-header.is-scrolled .container { height: auto; }

/* Pill-shaped nav-link list — desktop only. On mobile, .main-nav becomes
   the full-width dropdown panel instead, styled separately below. */
@media (min-width: 861px) {
  .page-home .main-nav { gap: 20px; }

  .page-home .main-nav ul {
    background: rgba(20, 16, 16, 0.78);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 6px;
    gap: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    transition: background-color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft);
  }

  .page-home .main-nav a {
    color: var(--white);
    padding: 8px 18px;
    border-radius: 999px;
    border-bottom: none;
    transition: background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
  }
  .page-home .main-nav a::after { display: none; }
  .page-home .main-nav a:hover { background: rgba(255,255,255,0.16); color: var(--white); }
  .page-home .main-nav a[aria-current="page"] { background: var(--white); color: var(--ink); }

  .page-home .site-header.is-scrolled .main-nav ul {
    background: rgba(255,255,255,0.94);
    border-color: var(--grey);
    box-shadow: 0 8px 24px rgba(65,64,66,0.1);
  }
  .page-home .site-header.is-scrolled .main-nav a { color: var(--ink); }
  .page-home .site-header.is-scrolled .main-nav a:hover { background: rgba(65,64,66,0.08); color: var(--red-deep); }
  .page-home .site-header.is-scrolled .main-nav a[aria-current="page"] { background: var(--red-deep); color: var(--white); }
}

.page-home .site-header .nav-toggle {
  background: rgba(20, 16, 16, 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: background-color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft);
}
.page-home .site-header .nav-toggle span { background: var(--white); }
.page-home .site-header .logo-default { display: none; }
.page-home .site-header .logo-overlay {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) drop-shadow(0 2px 10px rgba(0,0,0,0.3));
}

/* Once the hero has fully scrolled past, the header stops floating over a
   photo and starts floating over ordinary page content (headings, text) —
   give it a solid backdrop here so the logo and nav never sit directly on
   top of that content. */
.page-home .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(65, 64, 66, 0.08);
}
.page-home .site-header.is-scrolled .nav-toggle {
  background: var(--white);
  border-color: var(--grey);
}
.page-home .site-header.is-scrolled .nav-toggle span { background: var(--ink); }
.page-home .site-header.is-scrolled .logo-default { display: block; }
.page-home .site-header.is-scrolled .logo-overlay { display: none; }

/* Mobile dropdown is always a solid white panel — force dark text/icon
   regardless of scroll position. */
.page-home .site-header.nav-open .main-nav a { color: var(--ink); }
.page-home .site-header.nav-open .main-nav a:hover,
.page-home .site-header.nav-open .main-nav a[aria-current="page"] { color: var(--red-deep); background: transparent; }
.page-home .site-header.nav-open .nav-toggle span { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow { animation: none; }
}

/* Marquee heading — introduces the client-logo strip so it reads as
   "who we've worked with" rather than an unexplained row of logos */
.marquee-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 64px 24px 0;
  background: var(--white);
}

.marquee-heading::before,
.marquee-heading::after {
  content: '';
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, transparent, var(--grey));
}

.marquee-heading::after { background: linear-gradient(90deg, var(--grey), transparent); }

.marquee-heading-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .marquee-heading { padding-top: 40px; }
  .marquee-heading::before,
  .marquee-heading::after { width: 28px; }
  .marquee-heading-text { font-size: 0.72rem; letter-spacing: 0.06em; }

  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
}

/* Logo marquee
   ========================================================================== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--grey);
  border-bottom: 1px solid var(--grey);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marquee 26s linear infinite;
}

.marquee-track span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.marquee-track span em {
  font-style: normal;
  color: var(--red-deep);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Client logo marquee (homepage) */
.logo-marquee {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.logo-marquee .marquee-track { gap: 0; }

.logo-marquee-set {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-shrink: 0;
  padding-right: 48px;
}

.client-logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-soft);
}

.client-logo-chip:hover { transform: scale(1.06); }

.client-logo-chip img {
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* Animated stat numbers */
.stat-strip .stat-number { font-variant-numeric: tabular-nums; }

/* Form focus glow */
.form-field input,
.form-field select,
.form-field textarea {
  transition: border-color 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(225, 48, 40, 0.12);
}

/* Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-decor .blob { animation: none; }
  .marquee-track { animation: none; }
  .btn:hover { transform: none; }
  .card:hover, .brand-card:hover { transform: none; }
}

/* Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .footer-map { padding: 22px; }
  .footer-map-cta { width: 100%; justify-content: center; }

  /* Phones: text first, the three photos as a row beneath it, then the facts strip in two columns. */
  .hero-single { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero-inner { position: relative; inset: auto; flex: none; align-items: flex-start; padding: 112px 0 24px; }
  .hero-text { margin-left: 24px; margin-right: 24px; max-width: none; gap: 18px; }
  .hero-title { font-size: clamp(2rem, 8.6vw, 3.2rem); }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-collage { position: relative; inset: auto; right: auto; width: auto; height: clamp(160px, 46vw, 300px); margin: 0 24px 32px; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: 1fr; gap: 10px; }
  .hero-tile.k { grid-row: auto; }
  .hero-strip { position: relative; margin-top: auto; grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 18px 16px; padding: 20px 76px 20px 24px; }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    animation: navDrop 0.3s var(--ease-out);
  }

  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .site-header.nav-open .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .site-header.nav-open .main-nav a {
    padding: 6px 0;
    border-radius: 0;
  }

  .site-header.nav-open .main-nav a:hover,
  .site-header.nav-open .main-nav a[aria-current="page"] {
    background: none;
    box-shadow: none;
  }

  .site-header.nav-open .main-nav li {
    opacity: 0;
    animation: navItemIn 0.35s var(--ease-out) forwards;
  }
  .site-header.nav-open .main-nav li:nth-child(1) { animation-delay: 0.05s; }
  .site-header.nav-open .main-nav li:nth-child(2) { animation-delay: 0.1s; }
  .site-header.nav-open .main-nav li:nth-child(3) { animation-delay: 0.15s; }
  .site-header.nav-open .main-nav li:nth-child(4) { animation-delay: 0.2s; }
  .site-header.nav-open .main-nav li:nth-child(5) { animation-delay: 0.25s; }

  @keyframes navItemIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .hero-decor .hero-mark { width: 220px; height: 220px; right: -80px; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; gap: 24px; }

  .brand-stagger-row { flex-direction: column; gap: 20px; }
  .brand-stagger-card { flex: none; }
  .brand-stagger-photo { height: 220px; }
  .capability-grid { grid-template-columns: 1fr; }

  .timeline-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
    position: relative;
    padding-left: 0;
    background-image: linear-gradient(var(--grey), var(--grey));
    background-size: 2px calc(100% - 44px);
    background-position: 21px 22px;
    background-repeat: no-repeat;
  }
  .tl-spine { display: none; }
  .tl-item {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
  }
  .tl-item-1 > *, .tl-item-2 > *, .tl-item-3 > *, .tl-item-4 > * { grid-column: auto; }
  .tl-up { flex-direction: row-reverse; justify-content: flex-end; }
  .tl-down { flex-direction: row; }
  .tl-icon { flex-shrink: 0; width: 52px; height: 52px; }
  .tl-icon img { width: 28px; height: 28px; }
  .tl-content {
    text-align: left;
    max-width: none;
    align-self: auto;
    padding: 0 !important;
    flex: 1;
  }
  .contact-info-grid { grid-template-columns: 1fr; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .form-card { padding: 28px 22px; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 44px; }
}

/* Trade Enquiries CTA override
   ========================================================================== */
/* The "Trade Enquiries" CTA is a .btn-primary that happens to live inside
   .main-nav alongside the plain text nav links. The nav's own generic
   link hover/current-page styling (dark or red-deep text, translucent
   washes) has higher specificity than .btn-primary in several header
   states (default, scrolled, mobile dropdown, homepage floating nav) and
   was winning — on hover the text color and the button's own red-deep
   fill converged to nearly the same tone, making the label unreadable.
   This button should always look like a button, so it's pinned back to
   its own colors in every state, in every header context. */
.main-nav a.btn-primary,
.main-nav a.btn-primary[aria-current="page"] {
  color: var(--white) !important;
  background: var(--red) !important;
}

.main-nav a.btn-primary:hover {
  color: var(--white) !important;
  background: var(--red-deep) !important;
}

/* Interaction polish — instant response, material header, size-aware type
   ========================================================================== */

/* Response: no tap delay, no grey flash — feedback comes from our own :active states. */
a, button, .btn, summary, label, select, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Press feedback lands on pointer-down, in ~100ms. */
.btn:active,
.btn-primary:active,
.btn-outline:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(65, 64, 66, 0.12);
  transition-duration: 0.1s;
}
.main-nav a:active { transform: scale(0.96); transition: transform 0.1s var(--ease-soft), background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft); }
.nav-toggle:active { transform: scale(0.94); transition: transform 0.1s var(--ease-soft); }

/* Header becomes a translucent material once content scrolls beneath it,
   with a hairline edge instead of a hard divider. */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(65, 64, 66, 0.08);
}

/* Type: tracking tightens as size grows, body stays neutral. */
h1 { letter-spacing: -0.02em; line-height: 1.1; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.01em; }
h1, h2, h3, h4 { font-optical-sizing: auto; }

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .main-nav a:active,
  .nav-toggle:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled,
  .page-home .site-header.is-scrolled {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-header.is-scrolled { border-bottom-color: var(--ink); }
}

/* Let grid children shrink below their content width so narrow phones (320px) don't scroll sideways. */
.grid > * { min-width: 0; }

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft);
}
.whatsapp-float:hover { color: #fff; transform: scale(1.08); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
.whatsapp-float:active { transform: scale(0.94); transition-duration: 0.1s; }
.whatsapp-float svg { width: 30px; height: 30px; }
@media (max-width: 860px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float:hover, .whatsapp-float:active { transform: none; }
}
.footer-bottom { padding-right: 76px; }

/* Home About Us — copy with three proof points on the left, four product photos on the right.
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }

.proof { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.proof li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.proof .ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(225, 48, 40, 0.1); color: var(--red); display: grid; place-items: center; }
.proof .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.proof b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.proof div > span { font-size: 0.95rem; }

.about-visual { position: relative; }
.about-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.about-col { display: flex; flex-direction: column; gap: 14px; }
.about-col + .about-col { margin-top: 44px; }
.about-tile { border-radius: 12px; overflow: hidden; background: var(--grey-light); }
.about-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-tile.tall { aspect-ratio: 4 / 5; }
.about-tile.sq { aspect-ratio: 1 / 1; }
.about-tile.wide { aspect-ratio: 4 / 3; }
.about-tile.mist img { object-position: 50% 100%; }

.about-badge { position: absolute; z-index: 2; top: -16px; left: -16px; background: var(--red); color: var(--white); border-radius: 10px; padding: 14px 18px; box-shadow: 0 10px 24px rgba(225, 48, 40, 0.3); }
.about-badge b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
.about-badge span { font-family: var(--font-heading); font-weight: 600; font-size: 0.7rem; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-badge { left: 8px; top: -14px; }
}

/* Privacy page and cookie banner
   ========================================================================== */
.legal-hero { background: var(--cream); padding: 72px 0 48px; }
.legal-hero h1 { margin: 8px 0 0; }
.legal-updated { margin: 12px 0 0; color: var(--ink); opacity: 0.7; font-size: 0.95rem; }
.legal { padding: 56px 0 96px; }
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.legal-body h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.legal-body p, .legal-body li { line-height: 1.7; }
.legal-body ul { padding-left: 1.25em; margin: 0 0 1em; }
.legal-body a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }

.footer-legal { display: inline-flex; align-items: center; gap: 18px; }
.footer-legal a, .cookie-settings { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .cookie-settings:hover { color: var(--white); }

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300;
  max-width: 560px; margin-right: auto;
  background: var(--ink); color: var(--white);
  border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
  transform: translateY(24px); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-soft);
}
.cookie-banner.is-open { transform: none; opacity: 1; }
.cookie-banner p { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.55; }
.cookie-banner a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions button { font: 600 0.9rem/1 var(--font-heading); border-radius: 999px; padding: 12px 22px; cursor: pointer; border: 1.5px solid var(--white); background: transparent; color: var(--white); }
.cookie-actions button[data-cookie="accept"] { background: var(--white); color: var(--ink); }
.cookie-actions button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
html.cookie-open .whatsapp-float { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* Email shortcuts under the Contact page email card
   ========================================================================== */
.email-extras { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 20px 0; }
.email-extras a { font: 600 0.88rem/1.4 var(--font-heading); color: var(--red-deep); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.email-extras a:hover { color: var(--red); }
.email-extras a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

.form-status { margin: 14px 0 0; font-size: 0.95rem; color: var(--red-deep); }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Where we work — four countries set as plain type, no map
   ========================================================================== */
.reach { padding: 88px 0; background: var(--white); text-align: center; }
.reach .lede { max-width: 62ch; margin-left: auto; margin-right: auto; }
.reach-list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.reach-list li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 22px; border-top: 2px solid var(--ink); min-width: 0; }
.reach-list li:first-child { border-top-color: var(--red); }
.reach-country { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.reach-note { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 0.65; }
.reach-cta { margin: 44px 0 0; }
@media (max-width: 860px) {
  .reach { padding: 64px 0; }
  .reach-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}