/*
Theme Name: PEMSEC SARL v5
Theme URI: https://pemsec-sarl.com
Author: PEMSEC SARL
Description: Pixel-perfect WordPress conversion of the AI Studio React site. Same layout, colors, fonts, spacing, animations.
Version: 5.0.0
Requires at least: 6.3
Requires PHP: 7.2
License: Proprietary
Text Domain: pemsec
*/

/* ============================================================
   DESIGN TOKENS — exact match from index.css @theme
   ============================================================ */
:root {
  --primary:        #D41920;
  --primary-dark:   #A8131A;
  --bg-black:       #0A0A0A;
  --dark-gray:      #1A1A1A;
  --light-gray:     #F8F8F8;
  --text:           #333333;
  --gray-500:       #6B7280;
  --gray-400:       #9CA3AF;
  --gray-800:       #1F2937;

  --font-display: 'Bebas Neue', sans-serif;
  --font-accent:  'Outfit', sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;

  --max-w: 80rem;   /* max-w-7xl = 1280px */
  --max-w-5xl: 64rem;
  --px: 1.5rem;     /* px-6 */

  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --trans: 300ms ease;
  --trans-500: 500ms ease;
  --trans-700: 700ms ease;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* h1-h6: font-display tracking-wider uppercase  */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
}
.container-5xl {
  max-width: var(--max-w-5xl);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* text-primary */
.text-primary { color: var(--primary); }

/* ============================================================
   NAV — exact Tailwind classes from App.tsx
   ============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 50;
  transition: background-color var(--trans-500), padding var(--trans-500), backdrop-filter var(--trans-500);
  /* default: bg-transparent py-6 */
  padding: 1.5rem 0;
  background: transparent;
}
/* scrolled or not home: bg-bg-black/90 backdrop-blur-md py-3 border-b border-white/10 shadow-2xl */
#site-header.scrolled {
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-2xl);
}
#site-header.solid {
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-2xl);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo: h-14 w-auto transition-transform duration-500 group-hover:scale-110 */
.site-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  text-decoration: none;
}
.site-logo img {
  height: 3.5rem;
  width: auto;
  transition: transform var(--trans-500);
}
.site-logo:hover img { transform: scale(1.1); }

.site-logo-fallback {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.site-logo-fallback span { color: var(--primary); }

/* Desktop nav: hidden md:flex items-center gap-10 */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 2.5rem;
}
/* Nav links: flex items-center gap-8 */
.nav-links { display: flex; align-items: center; gap: 2rem; }

/* Each nav link button: relative group */
.nav-link {
  position: relative;
  padding-bottom: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
}
/* font-accent text-xs uppercase tracking-[0.2em] transition-colors duration-300 */
.nav-link span {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: color var(--trans);
  color: rgba(255,255,255,0.7);
}
.nav-link:hover span,
.nav-link.current span { color: #fff; }
.nav-link.current span { color: var(--primary); font-weight: 700; }

/* Underline: absolute -bottom-2 left-0 w-full h-0.5 bg-primary transition-transform duration-300 origin-left */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans);
}
.nav-link:hover::after,
.nav-link.current::after { transform: scaleX(1); }

/* Lang switcher: flex items-center gap-3 border-l border-white/10 pl-8 */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 2rem;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.lang-switcher-globe { width: 1rem; height: 1rem; color: rgba(255,255,255,0.4); }

/* lang btn: text-[10px] font-bold tracking-widest transition-all px-2 py-1 rounded-sm */
.lang-btn {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  color: rgba(255,255,255,0.4);
  transition: all var(--trans);
}
.lang-btn.active { background: var(--primary); color: #fff; }
.lang-btn:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); }

/* Nav CTA: relative overflow-hidden bg-primary hover:bg-primary-dark text-white px-8 py-3 rounded-sm font-display text-sm tracking-[0.2em] */
.nav-cta {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--trans);
  display: inline-block;
}
.nav-cta:hover { background: var(--primary-dark); }
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
  transform: translateY(100%);
  transition: transform var(--trans);
}
.nav-cta:hover::after { transform: translateY(0); }

/* Mobile toggle: md:hidden text-white p-2 hover:bg-white/5 rounded-full */
.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0.5rem;
  border-radius: 9999px;
  transition: background var(--trans);
}
.mobile-toggle:hover { background: rgba(255,255,255,0.05); }
.mobile-toggle svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }

/* Mobile menu: absolute top-full left-0 w-full bg-dark-gray border-t border-white/10 p-6 */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--dark-gray);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem var(--px);
}
.mobile-menu.open { display: block; }
.mobile-menu-inner { display: flex; flex-direction: column; gap: 1rem; }

/* Mobile nav link: font-accent text-lg uppercase tracking-widest */
.mobile-nav-link {
  text-align: left;
  font-family: var(--font-accent);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 0.25rem 0;
}
.mobile-nav-link.current { color: var(--primary); }

/* Mobile lang: flex items-center gap-4 py-4 border-t border-white/10 mt-2 */
.mobile-lang {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.5rem;
}
.mobile-lang-btn {
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.mobile-lang-btn.active { color: var(--primary); }

/* Mobile CTA: bg-primary text-white py-3 rounded-sm font-display tracking-widest */
.mobile-cta {
  display: block;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem;
  border-radius: 2px;
  font-family: var(--font-display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* Primary: group relative bg-primary hover:bg-primary-dark text-white px-12 py-5 font-display text-lg tracking-[0.2em] transition-all overflow-hidden */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--primary);
  color: #fff;
  padding: 1.25rem 3rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--trans);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary .btn-shine {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-101%);
  transition: transform var(--trans-500);
}
.btn-primary:hover .btn-shine { transform: translateX(0); }
.btn-primary svg { transition: transform var(--trans); }
.btn-primary:hover svg { transform: translateX(0.5rem); }

/* Outline: border border-white/20 hover:border-white/40 text-white px-12 py-5 font-display text-lg tracking-[0.2em] transition-all bg-white/5 hover:bg-white/10 */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 1.25rem 3rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  transition: all var(--trans);
  cursor: pointer;
  text-decoration: none;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); }

/* Dark: bg-bg-black hover:bg-dark-gray text-white px-12 py-5 font-display text-lg tracking-[0.2em] */
.btn-dark {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--bg-black);
  color: #fff;
  padding: 1.25rem 3rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--trans);
}
.btn-dark:hover { background: var(--dark-gray); }
.btn-dark .btn-shine {
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateY(100%);
  transition: transform var(--trans);
}
.btn-dark:hover .btn-shine { transform: translateY(0); }
.btn-dark span { position: relative; z-index: 1; }

/* White: bg-white text-bg-black hover:text-white */
.btn-white {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #fff;
  color: var(--bg-black);
  padding: 1.5rem 4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: color var(--trans);
  box-shadow: var(--shadow-2xl);
}
.btn-white .btn-shine {
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-101%);
  transition: transform var(--trans-500);
  z-index: 0;
}
.btn-white:hover .btn-shine { transform: translateX(0); }
.btn-white:hover { color: #fff; }
.btn-white span { position: relative; z-index: 1; }

/* ============================================================
   EYEBROW / BADGE
   font-accent text-primary font-bold tracking-[0.3em] uppercase text-xs mb-6 block
   ============================================================ */
.eyebrow {
  display: block;
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}
/* tracking-[0.4em] variant */
.eyebrow--wide { letter-spacing: 0.4em; }

/* ============================================================
   HERO SECTION
   section relative h-screen flex items-center pt-20
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 5rem;
  overflow: hidden;
}

/* absolute inset-0 z-0 */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* w-full h-full object-cover brightness-[0.25] */
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.25);
  transform: scale(1.08);
  animation: heroKenBurns 12s ease-out forwards;
}
@keyframes heroKenBurns {
  to { transform: scale(1); }
}
/* bg-gradient-to-r from-bg-black via-bg-black/60 to-transparent */
.hero__grad {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg-black) 0%, rgba(10,10,10,0.6) 50%, transparent 100%);
}
/* Carbon fibre texture */
.hero__texture {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23000'/%3E%3Ccircle cx='1' cy='1' r='0.8' fill='%23ffffff0a'/%3E%3C/svg%3E");
  background-size: 30px 30px;
  opacity: 1;
}

/* relative z-10 max-w-7xl mx-auto px-6 w-full */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* max-w-4xl */
.hero__content { max-width: 56rem; }

/* text-6xl md:text-8xl lg:text-9xl text-white mb-8 leading-[0.85] font-display tracking-tighter */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 9rem);
  color: #fff;
  margin-bottom: 2rem;
  line-height: 0.85;
  letter-spacing: -0.02em;
  animation: fadeUp 0.8s 0.4s both;
}
.hero__title .text-primary { color: var(--primary); }

/* text-white/60 text-lg md:text-xl mb-12 max-w-2xl leading-relaxed font-sans */
.hero__desc {
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.6);
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 3rem;
  max-width: 42rem;
  line-height: 1.7;
  animation: fadeUp 0.8s 0.6s both;
}

/* flex flex-col sm:flex-row gap-6 */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  animation: fadeUp 0.8s 0.8s both;
}

/* Scroll indicator: absolute bottom-12 left-1/2 -translate-x-1/2 */
.hero__scroll {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1;
  animation: fadeIn 1s 1.5s both;
}
/* text-white/30 text-[10px] uppercase tracking-[0.4em] font-accent */
.hero__scroll-label {
  font-family: var(--font-accent);
  color: rgba(255,255,255,0.3);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  white-space: nowrap;
}
/* w-px h-16 bg-gradient-to-b from-primary to-transparent */
.hero__scroll-line {
  width: 1px;
  height: 4rem;
  background: linear-gradient(to bottom, var(--primary), transparent);
}

/* ============================================================
   TRUST SECTION (Heritage)
   section py-32 bg-white relative overflow-hidden
   ============================================================ */
.section-trust {
  padding: 8rem 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
/* absolute top-0 right-0 w-1/3 h-full bg-light-gray/50 -skew-x-12 translate-x-1/2 */
.section-trust::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 33.333%;
  height: 100%;
  background: rgba(248,248,248,0.5);
  transform: skewX(-12deg) translateX(50%);
  z-index: 0;
}

/* grid grid-cols-1 lg:grid-cols-2 gap-24 items-center */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* text-5xl md:text-6xl text-bg-black mb-8 leading-tight */
.trust__title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  color: var(--bg-black);
  margin-bottom: 2rem;
  line-height: 1.1;
}
/* text-gray-500 mb-12 text-lg leading-relaxed max-w-xl */
.trust__desc {
  font-family: var(--font-sans);
  color: var(--gray-500);
  margin-bottom: 3rem;
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 36rem;
}

/* grid grid-cols-2 gap-12 */
.trust-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
/* space-y-2 */
.trust-stat { display: flex; flex-direction: column; gap: 0.5rem; }
/* text-5xl font-display text-bg-black tracking-tighter */
.trust-stat__value {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--bg-black);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* text-[10px] uppercase tracking-[0.3em] text-primary font-bold font-accent */
.trust-stat__label {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--primary);
  font-weight: 700;
}

/* Trust image col: relative */
.trust-image { position: relative; }
/* relative z-10 rounded-sm overflow-hidden shadow-2xl */
.trust-image__photo {
  position: relative;
  z-index: 1;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}
.trust-image__photo img { width: 100%; }

/* absolute -bottom-10 -left-10 bg-bg-black p-10 text-white z-20 shadow-2xl border-l-4 border-primary */
.trust-badge {
  position: absolute;
  bottom: -2.5rem;
  left: -2.5rem;
  background: var(--bg-black);
  padding: 2.5rem;
  color: #fff;
  z-index: 20;
  box-shadow: var(--shadow-2xl);
  border-left: 4px solid var(--primary);
}
.trust-badge svg { color: var(--primary); width: 3rem; height: 3rem; margin-bottom: 1.5rem; }
/* font-display text-2xl tracking-widest mb-1 uppercase */
.trust-badge__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.25rem;
}
/* text-[10px] opacity-50 uppercase tracking-[0.3em] font-accent */
.trust-badge__sub {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
/* absolute -top-10 -right-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl */
.trust-glow {
  position: absolute;
  top: -2.5rem; right: -2.5rem;
  width: 10rem; height: 10rem;
  background: rgba(212,25,32,0.1);
  border-radius: 9999px;
  filter: blur(3rem);
  z-index: 0;
}

/* ============================================================
   SERVICES SECTION (homepage)
   section py-32 bg-bg-black text-white relative
   ============================================================ */
.section-services-home {
  padding: 8rem 0;
  background: var(--bg-black);
  color: #fff;
  position: relative;
}
/* absolute inset-0 stardust opacity-20 */
.section-services-home::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Ccircle cx='1.5' cy='1.5' r='0.5' fill='%23ffffff18'/%3E%3C/svg%3E");
  background-size: 30px 30px;
  pointer-events: none;
}

/* flex flex-col md:flex-row justify-between items-end mb-24 gap-8 */
.services-home-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6rem;
  gap: 2rem;
}

/* text-5xl md:text-6xl mb-6 leading-tight */
.services-home-header__title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}
/* text-white/40 text-lg font-sans */
.services-home-header__desc {
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.4);
  font-size: 1.125rem;
}

/* View all: text-primary font-accent text-xs uppercase tracking-[0.3em] font-bold flex items-center gap-3 hover:gap-5 transition-all group border-b border-primary/20 pb-2 */
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 1px solid rgba(212,25,32,0.2);
  padding-bottom: 0.5rem;
  text-decoration: none;
  transition: gap var(--trans);
  white-space: nowrap;
  align-self: flex-end;
}
.view-all:hover { gap: 1.25rem; }
.view-all svg { transition: transform var(--trans); }
.view-all:hover svg { transform: translateX(0.25rem); }

/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/10 border border-white/10 */
.services-home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}

/* bg-bg-black p-12 hover:bg-white/[0.02] transition-all group relative overflow-hidden */
.service-card-home {
  background: var(--bg-black);
  padding: 3rem;
  transition: background var(--trans);
  position: relative;
  overflow: hidden;
}
.service-card-home:hover { background: rgba(255,255,255,0.02); }

/* absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full translate-x-16 -translate-y-16 group-hover:scale-150 transition-transform duration-700 */
.service-card-home::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8rem; height: 8rem;
  background: rgba(212,25,32,0.05);
  border-radius: 9999px;
  transform: translate(50%, -50%);
  transition: transform var(--trans-700);
}
.service-card-home:hover::before { transform: translate(50%, -50%) scale(1.5); }

/* text-primary mb-10 relative z-10 */
.service-card-home__icon {
  color: var(--primary);
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.service-card-home__icon svg { width: 48px; height: 48px; stroke-width: 1.5; }

/* text-2xl mb-6 tracking-wider font-display uppercase */
.service-card-home__title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
/* text-white/40 text-sm leading-relaxed mb-10 font-sans */
.service-card-home__desc {
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.4);
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
/* flex items-center gap-3 text-white/60 group-hover:text-primary font-accent text-[10px] uppercase tracking-[0.3em] font-bold transition-all */
.service-card-home__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  transition: color var(--trans), gap var(--trans);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.service-card-home:hover .service-card-home__link { color: var(--primary); gap: 1rem; }
.service-card-home__link svg { transition: transform var(--trans); }
.service-card-home:hover .service-card-home__link svg { transform: translateX(0.5rem); }

/* ============================================================
   WHY CHOOSE US SECTION
   section py-32 bg-white relative
   ============================================================ */
.section-why {
  padding: 8rem 0;
  background: #fff;
  position: relative;
}

/* flex flex-col lg:flex-row gap-24 items-center */
.why-grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  align-items: center;
}

/* lg:w-1/2 relative */
.why-image { position: relative; }
/* relative z-10 rounded-sm overflow-hidden shadow-2xl */
.why-image__photo { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-2xl); }
.why-image__photo img { width: 100%; }

/* absolute -top-10 -left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10 */
.why-glow {
  position: absolute;
  width: 16rem; height: 16rem;
  background: rgba(212,25,32,0.05);
  border-radius: 9999px;
  filter: blur(3rem);
  z-index: -1;
}
.why-glow--tl { top: -2.5rem; left: -2.5rem; }
.why-glow--br { bottom: -2.5rem; right: -2.5rem; }

/* text-5xl md:text-6xl text-bg-black mb-10 leading-tight */
.why__title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  color: var(--bg-black);
  margin-bottom: 2.5rem;
  line-height: 1.1;
}

/* space-y-8 */
.why-points { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 4rem; }

/* flex gap-6 items-start group */
.why-point { display: flex; gap: 1.5rem; align-items: flex-start; }
/* bg-primary/5 p-3 rounded-sm text-primary group-hover:bg-primary group-hover:text-white transition-all duration-300 */
.why-point__icon {
  background: rgba(212,25,32,0.05);
  padding: 0.75rem;
  border-radius: 2px;
  color: var(--primary);
  flex-shrink: 0;
  transition: background var(--trans), color var(--trans);
}
.why-point__icon svg { width: 20px; height: 20px; display: block; }
.why-point:hover .why-point__icon { background: var(--primary); color: #fff; }

/* text-gray-800 font-display text-lg tracking-wide block */
.why-point__text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  color: #1F2937;
  padding-top: 0.25rem;
}
/* w-0 group-hover:w-full h-px bg-primary/20 transition-all duration-500 mt-2 */
.why-point__line {
  width: 0;
  height: 1px;
  background: rgba(212,25,32,0.2);
  transition: width var(--trans-500);
  margin-top: 0.5rem;
}
.why-point:hover .why-point__line { width: 100%; }

/* ============================================================
   CTA SECTION
   section relative py-32 overflow-hidden
   ============================================================ */
.section-cta {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
}
/* absolute inset-0 z-0 */
.section-cta__bg { position: absolute; inset: 0; z-index: 0; }
/* w-full h-full object-cover brightness-[0.2] */
.section-cta__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.2);
}
/* absolute inset-0 bg-primary/20 mix-blend-multiply */
.section-cta__overlay {
  position: absolute; inset: 0;
  background: rgba(212,25,32,0.2);
  mix-blend-mode: multiply;
}
/* relative z-10 max-w-5xl mx-auto px-6 text-center */
.section-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
/* text-5xl md:text-7xl text-white mb-8 leading-tight font-display tracking-tight */
.section-cta__title {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  color: #fff;
  margin-bottom: 2rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* text-white/60 mb-12 text-xl font-sans max-w-3xl mx-auto leading-relaxed */
.section-cta__desc {
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.6);
  margin-bottom: 3rem;
  font-size: 1.25rem;
  max-width: 48rem;
  margin-inline: auto;
  line-height: 1.7;
}

/* ============================================================
   FOOTER
   footer bg-bg-black text-white pt-24 pb-12 border-t border-white/5
   ============================================================ */
.site-footer {
  background: var(--bg-black);
  color: #fff;
  padding: 6rem 0 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-24 */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  margin-bottom: 6rem;
}

/* Footer brand: space-y-8 */
.footer-brand { display: flex; flex-direction: column; gap: 2rem; }
.footer-brand__logo { height: 3rem; width: auto; }
/* text-white/50 font-sans text-sm leading-relaxed max-w-xs */
.footer-brand__desc {
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  line-height: 1.8;
  max-width: 18rem;
}

/* Social: flex gap-5 */
.footer-social { display: flex; gap: 1.25rem; }
/* w-10 h-10 rounded-full bg-white/5 flex items-center justify-center transition-colors cursor-pointer border border-white/10 */
.footer-social__item {
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--trans), transform var(--trans);
}
.footer-social__item:hover { color: var(--primary); transform: translateY(-5px); }
.footer-social__item svg { width: 1rem; height: 1rem; }

/* font-display text-xs uppercase tracking-[0.3em] text-primary mb-8 */
.footer-col__heading {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--primary);
  margin-bottom: 2rem;
}
/* flex flex-col gap-4 */
.footer-col__links { display: flex; flex-direction: column; gap: 1rem; }
/* hover:text-white transition-colors duration-300 flex items-center gap-2 group text-white/50 text-sm */
.footer-col__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  text-align: left;
  transition: color var(--trans), gap var(--trans);
}
.footer-col__link:hover { color: #fff; gap: 0.75rem; }
.footer-col__link svg {
  width: 12px; height: 12px;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity var(--trans), transform var(--trans);
}
.footer-col__link:hover svg { opacity: 1; transform: translateX(0); }

/* Contact info: flex flex-col gap-6 */
.footer-contact { display: flex; flex-direction: column; gap: 1.5rem; }
/* flex gap-4 text-white/50 text-sm */
.footer-contact__item {
  display: flex;
  gap: 1rem;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  align-items: flex-start;
}
/* w-10 h-10 rounded-sm bg-white/5 flex items-center justify-center shrink-0 border border-white/10 */
.footer-contact__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer-contact__icon svg { width: 1rem; height: 1rem; color: var(--primary); }
/* font-display tracking-widest */
.footer-contact__mono { font-family: var(--font-display); letter-spacing: 0.15em; }
.footer-contact__tight { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Footer bottom: pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8 text-white/30 text-[10px] uppercase tracking-[0.3em] */
.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.3);
}
.footer-bottom__links { display: flex; gap: 2.5rem; }
.footer-bottom__links button,
.footer-bottom__links a {
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--trans);
  font-family: inherit;
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.footer-bottom__links button:hover,
.footer-bottom__links a:hover { color: #fff; }

/* ============================================================
   INNER PAGE HERO
   pt-40 pb-32 bg-white
   ============================================================ */
.page-hero {
  padding-top: 10rem;
  padding-bottom: 2rem;
  background: #fff;
}
/* max-w-3xl mb-24 */
.page-hero__content { max-width: 48rem; margin-bottom: 6rem; }
/* text-6xl md:text-7xl text-bg-black mb-8 leading-tight font-display tracking-tighter */
.page-hero__title {
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--bg-black);
  margin-bottom: 2rem;
  line-height: 1.0;
  letter-spacing: -0.02em;
}
/* text-gray-500 text-xl leading-relaxed font-sans */
.page-hero__desc {
  font-family: var(--font-sans);
  color: var(--gray-500);
  font-size: 1.25rem;
  line-height: 1.7;
}

/* ============================================================
   SERVICES FULL PAGE
   ============================================================ */
.services-page { padding: 2rem 0 8rem; background: #fff; }

/* Category filter: flex flex-wrap gap-3 lg:mb-4 */
.cat-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
/* px-6 py-3 rounded-sm font-accent text-[10px] uppercase tracking-[0.2em] font-bold transition-all duration-300 border */
.cat-filter {
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  transition: all var(--trans);
  border: 1px solid #F3F4F6;
  background: #fff;
  color: #9CA3AF;
  cursor: pointer;
}
.cat-filter.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(212,25,32,0.2);
}
.cat-filter:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* Section header: flex items-center gap-6 mb-12 */
.section-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3rem; }
/* w-12 h-1 bg-primary */
.section-header__line { width: 3rem; height: 4px; background: var(--primary); flex-shrink: 0; }
/* text-3xl font-display tracking-tight uppercase */
.section-header__title { font-size: clamp(1.5rem, 3vw, 2rem); }

/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 */
.services-full-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 8rem;
}

/* group relative bg-light-gray h-[500px] overflow-hidden cursor-pointer */
.service-full-card {
  position: relative;
  background: var(--light-gray);
  height: 500px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0;
}

/* absolute inset-0 z-0 */
.service-full-card__bg { position: absolute; inset: 0; z-index: 0; }
/* w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-110 */
.service-full-card__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--trans-700), transform var(--trans-700);
}
.service-full-card:hover .service-full-card__bg img {
  filter: grayscale(0);
  transform: scale(1.1);
}
/* absolute inset-0 bg-gradient-to-t from-bg-black via-bg-black/40 to-transparent opacity-90 group-hover:opacity-80 */
.service-full-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-black), rgba(10,10,10,0.4), transparent);
  opacity: 0.9;
  transition: opacity var(--trans);
  z-index: 1;
}
.service-full-card:hover .service-full-card__overlay { opacity: 0.8; }

/* absolute inset-0 z-10 p-12 flex flex-col justify-between */
.service-full-card__inner {
  position: absolute; inset: 0;
  z-index: 2;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* flex justify-between items-start */
.service-full-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
/* w-16 h-16 bg-primary flex items-center justify-center text-white rounded-sm shadow-xl group-hover:rotate-[360deg] transition-transform duration-700 */
.service-full-card__icon {
  width: 4rem; height: 4rem;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 10px 25px rgba(212,25,32,0.4);
  transition: transform var(--trans-700);
}
.service-full-card:hover .service-full-card__icon { transform: rotate(360deg); }
.service-full-card__icon svg { width: 32px; height: 32px; stroke-width: 1.5; }

/* text-white/30 font-accent text-[10px] uppercase tracking-[0.4em] font-bold */
.service-full-card__num {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-weight: 700;
}

/* text-3xl text-white mb-4 font-display tracking-tight uppercase leading-tight group-hover:text-primary */
.service-full-card__title {
  font-size: 1.875rem;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color var(--trans);
}
.service-full-card:hover .service-full-card__title { color: var(--primary); }

/* text-white/50 text-sm mb-8 line-clamp-3 font-sans leading-relaxed group-hover:text-white/80 */
.service-full-card__desc {
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  margin-bottom: 2rem;
  line-height: 1.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: color var(--trans);
}
.service-full-card:hover .service-full-card__desc { color: rgba(255,255,255,0.8); }

/* flex items-center gap-4 text-white font-accent text-[10px] uppercase tracking-[0.3em] font-bold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500 */
.service-full-card__cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--trans-500), transform var(--trans-500);
}
.service-full-card__cta svg { color: var(--primary); }
.service-full-card:hover .service-full-card__cta { opacity: 1; transform: translateY(0); }

/* absolute bottom-0 left-0 w-0 h-1 bg-primary group-hover:w-full transition-all duration-700 */
.service-full-card__bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 4px;
  background: var(--primary);
  transition: width var(--trans-700);
  z-index: 3;
}
.service-full-card:hover .service-full-card__bar { width: 100%; }

/* ============================================================
   PRODUCTS GRID
   grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 8rem;
}

/* bg-light-gray p-10 border border-transparent hover:border-primary/20 transition-all group relative overflow-hidden */
.product-card {
  background: var(--light-gray);
  padding: 2.5rem;
  border: 1px solid transparent;
  transition: border-color var(--trans), box-shadow var(--trans);
  position: relative;
  overflow: hidden;
}
.product-card:hover { border-color: rgba(212,25,32,0.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
/* absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full translate-x-12 -translate-y-12 group-hover:scale-150 */
.product-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 6rem; height: 6rem;
  background: rgba(212,25,32,0.05);
  border-radius: 9999px;
  transform: translate(50%, -50%);
  transition: transform var(--trans-700);
}
.product-card:hover::before { transform: translate(50%, -50%) scale(1.5); }

/* relative z-10 */
.product-card__inner { position: relative; z-index: 1; }

/* w-12 h-12 bg-white flex items-center justify-center text-primary mb-8 shadow-sm group-hover:bg-primary group-hover:text-white transition-colors */
.product-card__icon {
  width: 3rem; height: 3rem;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background var(--trans), color var(--trans);
}
.product-card:hover .product-card__icon { background: var(--primary); color: #fff; }
.product-card__icon svg { width: 24px; height: 24px; }

/* text-xl font-display tracking-tight uppercase mb-4 group-hover:text-primary transition-colors */
.product-card__title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  transition: color var(--trans);
}
.product-card:hover .product-card__title { color: var(--primary); }

/* text-gray-500 text-sm font-sans leading-relaxed */
.product-card__desc {
  font-family: var(--font-sans);
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.7;
}
/* mt-8 flex items-center gap-2 text-[10px] font-accent font-bold uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 */
.product-card__link {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  opacity: 0;
  transition: opacity var(--trans), gap var(--trans);
  background: none; border: none; cursor: pointer;
}
.product-card:hover .product-card__link { opacity: 1; }
.product-card__link:hover { gap: 1rem; }

/* ============================================================
   TRUST BANNER (services page)
   p-16 bg-bg-black text-white relative overflow-hidden
   ============================================================ */
.trust-banner {
  padding: 4rem;
  background: var(--bg-black);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.trust-banner::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 16rem; height: 16rem;
  background: rgba(212,25,32,0.1);
  border-radius: 9999px;
  filter: blur(3rem);
}
/* relative z-10 flex flex-col lg:flex-row justify-between items-center gap-12 */
.trust-banner__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
/* text-4xl font-display tracking-tight mb-4 uppercase */
.trust-banner__title { font-size: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 1rem; }
/* text-white/40 text-lg font-sans */
.trust-banner__desc { font-family: var(--font-sans); color: rgba(255,255,255,0.4); font-size: 1.125rem; }
/* flex flex-wrap justify-center gap-12 opacity-50 grayscale hover:grayscale-0 transition-all */
.trust-banner__certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all var(--trans);
}
.trust-banner:hover .trust-banner__certs { opacity: 1; filter: grayscale(0); }
/* flex flex-col items-center gap-2 */
.cert-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.cert-item svg { width: 40px; height: 40px; color: var(--primary); }
/* text-[10px] uppercase tracking-widest font-bold */
.cert-item span {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
}

/* ============================================================
   SERVICE / PRODUCT DETAIL PAGE
   pt-40 pb-32 bg-white
   ============================================================ */
.detail-page { padding-top: 10rem; padding-bottom: 8rem; background: #fff; }

/* flex flex-col lg:flex-row gap-24 items-center mb-32 */
.detail-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  align-items: center;
  margin-bottom: 8rem;
}

/* Back link: flex items-center gap-3 text-primary font-accent text-[10px] uppercase tracking-[0.3em] font-bold mb-10 hover:gap-5 transition-all group */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2.5rem;
  transition: gap var(--trans);
  background: none; border: none; cursor: pointer;
  text-decoration: none;
}
.detail-back:hover { gap: 1.25rem; }
.detail-back svg { transform: rotate(180deg); transition: transform var(--trans); width: 14px; height: 14px; }
.detail-back:hover svg { transform: rotate(180deg) translateX(0.25rem); }

/* text-6xl md:text-7xl text-bg-black mb-10 leading-[1.1] font-display tracking-tighter */
.detail-title {
  font-size: clamp(3rem, 7vw, 4.5rem);
  color: var(--bg-black);
  margin-bottom: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* text-gray-500 text-xl mb-12 leading-relaxed font-sans */
.detail-desc {
  font-family: var(--font-sans);
  color: var(--gray-500);
  font-size: 1.25rem;
  margin-bottom: 3rem;
  line-height: 1.7;
}

/* lg:w-1/2 relative */
.detail-image { position: relative; }
/* rounded-sm overflow-hidden shadow-2xl aspect-[4/5] lg:aspect-[4/3] */
.detail-image__frame {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  aspect-ratio: 4/3;
}
.detail-image__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}
.detail-image__frame:hover img { transform: scale(1.1); }

/* absolute -bottom-10 -right-10 bg-bg-black p-12 text-white z-20 shadow-2xl border-l-4 border-primary hidden xl:block */
.detail-badge {
  position: absolute;
  bottom: -2.5rem; right: -2.5rem;
  background: var(--bg-black);
  padding: 3rem;
  color: #fff;
  z-index: 20;
  box-shadow: var(--shadow-2xl);
  border-left: 4px solid var(--primary);
  display: none;
}
.detail-badge svg { color: var(--primary); width: 3rem; height: 3rem; margin-bottom: 1.5rem; }
.detail-badge__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.detail-badge__sub {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.4;
}
/* absolute -top-12 -left-12 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10 */
.detail-glow {
  position: absolute;
  top: -3rem; left: -3rem;
  width: 16rem; height: 16rem;
  background: rgba(212,25,32,0.05);
  border-radius: 9999px;
  filter: blur(3rem);
  z-index: -1;
}

/* Features & Benefits: grid grid-cols-1 lg:grid-cols-2 gap-px bg-gray-100 border border-gray-100 mb-32 */
.detail-fb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: #F3F4F6;
  border: 1px solid #F3F4F6;
  margin-bottom: 8rem;
}

/* bg-white p-16 lg:p-24 */
.detail-features { background: #fff; padding: 4rem; }
/* bg-light-gray p-16 lg:p-24 */
.detail-benefits { background: var(--light-gray); padding: 4rem; }

/* flex items-center gap-6 mb-12 */
.detail-col__header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3rem; }
/* w-16 h-16 bg-primary/5 flex items-center justify-center text-primary rounded-sm */
.detail-col__icon {
  width: 4rem; height: 4rem;
  background: rgba(212,25,32,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.detail-col__icon svg { width: 32px; height: 32px; }
/* text-4xl font-display tracking-tight uppercase */
.detail-col__title { font-size: clamp(1.5rem, 3vw, 2.5rem); }

/* space-y-6 */
.feature-list { display: flex; flex-direction: column; gap: 1.5rem; }
/* flex items-start gap-6 group */
.feature-item { display: flex; align-items: flex-start; gap: 1.5rem; }
/* w-2 h-2 bg-primary rounded-full mt-2.5 group-hover:scale-150 transition-transform */
.feature-dot {
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 9999px;
  flex-shrink: 0;
  margin-top: 0.625rem;
  transition: transform var(--trans);
}
.feature-item:hover .feature-dot { transform: scale(1.5); }
/* text-gray-600 text-lg font-sans leading-relaxed */
.feature-text { font-family: var(--font-sans); color: #4B5563; font-size: 1.0625rem; line-height: 1.7; }

/* grid grid-cols-1 gap-10 */
.benefit-list { display: flex; flex-direction: column; gap: 2.5rem; }
/* flex gap-6 items-start group */
.benefit-item { display: flex; gap: 1.5rem; align-items: flex-start; }
/* text-primary mt-1 group-hover:rotate-12 transition-transform */
.benefit-item__icon { color: var(--primary); flex-shrink: 0; margin-top: 0.25rem; transition: transform var(--trans); }
.benefit-item:hover .benefit-item__icon { transform: rotate(12deg); }
.benefit-item__icon svg { width: 24px; height: 24px; }
/* text-bg-black font-bold block mb-2 uppercase text-[10px] tracking-[0.3em] font-accent */
.benefit-item__label {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--bg-black);
  display: block;
  margin-bottom: 0.5rem;
}
/* text-gray-600 text-lg font-sans leading-relaxed */
.benefit-item__text { font-family: var(--font-sans); color: #4B5563; font-size: 1.0625rem; line-height: 1.7; }

/* ============================================================
   CATALOG GRID
   mb-32 / flex flex-col items-center text-center mb-20
   ============================================================ */
.catalog-section { margin-bottom: 8rem; }
.catalog-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 5rem; }
/* font-accent text-primary font-bold tracking-[0.4em] uppercase text-xs mb-4 */
.catalog-header__eyebrow {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 1rem;
  display: block;
}
/* text-5xl font-display tracking-tight uppercase */
.catalog-header__title { font-size: clamp(2rem, 4vw, 3rem); }
/* w-24 h-1 bg-primary mt-8 */
.catalog-header__line { width: 6rem; height: 4px; background: var(--primary); margin-top: 2rem; }

/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 */
.catalog-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }

/* group bg-white border border-gray-100 hover:border-primary/30 transition-all duration-500 shadow-sm hover:shadow-2xl */
.catalog-item {
  background: #fff;
  border: 1px solid #F3F4F6;
  transition: border-color var(--trans-500), box-shadow var(--trans-500);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.catalog-item:hover { border-color: rgba(212,25,32,0.3); box-shadow: var(--shadow-2xl); }

/* aspect-square overflow-hidden bg-light-gray relative */
.catalog-item__img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--light-gray);
  position: relative;
}
.catalog-item__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--trans-700);
}
.catalog-item:hover .catalog-item__img img { transform: scale(1.1); }

/* absolute inset-0 bg-bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center */
.catalog-item__overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.2);
  opacity: 0;
  transition: opacity var(--trans);
  display: flex; align-items: center; justify-content: center;
}
.catalog-item:hover .catalog-item__overlay { opacity: 1; }
/* bg-white text-bg-black px-8 py-3 font-display text-xs tracking-widest uppercase hover:bg-primary hover:text-white transition-colors */
.catalog-item__quote {
  background: #fff;
  color: var(--bg-black);
  padding: 0.75rem 2rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background var(--trans), color var(--trans);
  text-decoration: none;
}
.catalog-item__quote:hover { background: var(--primary); color: #fff; }

/* p-10 */
.catalog-item__body { padding: 2.5rem; }
/* text-2xl font-display tracking-tight uppercase mb-4 group-hover:text-primary transition-colors */
.catalog-item__title { font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 1rem; transition: color var(--trans); }
.catalog-item:hover .catalog-item__title { color: var(--primary); }
/* text-gray-500 text-sm font-sans leading-relaxed mb-6 */
.catalog-item__desc { font-family: var(--font-sans); color: var(--gray-500); font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.5rem; }
/* flex items-center justify-between pt-6 border-t border-gray-50 */
.catalog-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid #F9FAFB;
}
/* text-[10px] font-accent font-bold uppercase tracking-widest text-gray-400 */
.catalog-item__ref {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #9CA3AF;
}

/* ============================================================
   BOTTOM CTA (dark)
   bg-bg-black p-20 lg:p-32 text-center text-white relative overflow-hidden
   ============================================================ */
.dark-cta {
  background: var(--bg-black);
  padding: 5rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dark-cta__glow-tr {
  position: absolute;
  top: 0; right: 0;
  width: 24rem; height: 24rem;
  background: rgba(212,25,32,0.1);
  border-radius: 9999px;
  transform: translate(50%, -50%);
  filter: blur(120px);
}
.dark-cta__glow-bl {
  position: absolute;
  bottom: 0; left: 0;
  width: 24rem; height: 24rem;
  background: rgba(212,25,32,0.05);
  border-radius: 9999px;
  transform: translate(-50%, 50%);
  filter: blur(120px);
}
.dark-cta__inner { position: relative; z-index: 1; max-width: 48rem; margin-inline: auto; }
/* text-5xl md:text-6xl mb-8 font-display tracking-tight leading-tight */
.dark-cta__title { font-size: clamp(2.5rem, 5vw, 3.75rem); margin-bottom: 2rem; line-height: 1.05; }
/* text-white/40 mb-12 text-xl font-sans leading-relaxed */
.dark-cta__desc { font-family: var(--font-sans); color: rgba(255,255,255,0.4); margin-bottom: 3rem; font-size: 1.25rem; line-height: 1.7; }

/* ============================================================
   ABOUT PAGE
   pt-40 pb-32 bg-white
   ============================================================ */
.about-page { padding-top: 10rem; padding-bottom: 8rem; background: #fff; }

/* flex flex-col lg:flex-row gap-24 mb-32 items-center */
.about-intro-grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  margin-bottom: 8rem;
  align-items: center;
}

/* text-6xl md:text-7xl text-bg-black mb-10 leading-[1.1] font-display tracking-tighter */
.about-title {
  font-size: clamp(3rem, 7vw, 4.5rem);
  color: var(--bg-black);
  margin-bottom: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* space-y-8 text-gray-500 text-lg leading-relaxed font-sans */
.about-text { display: flex; flex-direction: column; gap: 2rem; font-family: var(--font-sans); color: var(--gray-500); font-size: 1.125rem; line-height: 1.9; }

/* first-letter: text-5xl font-display text-primary mr-3 float-left */
.about-text p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--primary);
  float: left;
  margin-right: 0.75rem;
  line-height: 0.8;
  margin-top: 0.25rem;
}

/* relative z-10 rounded-sm overflow-hidden shadow-2xl border-8 border-white */
.about-image__frame {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  border: 8px solid #fff;
  position: relative;
  z-index: 1;
}
.about-image__frame img { width: 100%; }

/* grid grid-cols-1 md:grid-cols-2 gap-16 */
.about-cards { display: grid; grid-template-columns: 1fr; gap: 4rem; }

/* bg-light-gray p-16 relative group overflow-hidden */
.about-card {
  padding: 4rem;
  position: relative;
  overflow: hidden;
}
.about-card--light { background: var(--light-gray); }
/* bg-bg-black text-white p-16 relative group overflow-hidden */
.about-card--dark { background: var(--bg-black); color: #fff; }

/* absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full translate-x-16 -translate-y-16 group-hover:scale-150 transition-transform duration-700 */
.about-card__glow {
  position: absolute;
  width: 8rem; height: 8rem;
  border-radius: 9999px;
  background: rgba(212,25,32,0.05);
  transition: transform var(--trans-700);
  pointer-events: none;
}
.about-card--light .about-card__glow { top: 0; right: 0; transform: translate(50%, -50%); }
.about-card--dark .about-card__glow { bottom: 0; left: 0; transform: translate(-50%, 50%); background: rgba(212,25,32,0.1); }
.about-card--light:hover .about-card__glow { transform: translate(50%, -50%) scale(1.5); }
.about-card--dark:hover .about-card__glow { transform: translate(-50%, 50%) scale(1.5); }

.about-card svg { color: var(--primary); width: 3rem; height: 3rem; margin-bottom: 2rem; }
/* text-4xl mb-8 font-display tracking-tight uppercase */
.about-card__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 2rem; }
/* text-gray-500 text-lg leading-relaxed font-sans */
.about-card__desc { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.8; }
.about-card--light .about-card__desc { color: var(--gray-500); }
.about-card--dark .about-card__desc { color: rgba(255,255,255,0.5); }

/* ============================================================
   TRAINING PAGE
   ============================================================ */
.training-page { padding-top: 10rem; padding-bottom: 8rem; background: #fff; }

/* flex flex-col lg:flex-row gap-24 items-center mb-32 */
.training-intro-grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  align-items: center;
  margin-bottom: 8rem;
}

/* grid grid-cols-2 gap-6 */
.training-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; position: relative; }
/* rounded-sm overflow-hidden shadow-2xl mt-12 */
.training-photo-a { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-2xl); margin-top: 3rem; }
.training-photo-b { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-2xl); }
.training-photo-a img, .training-photo-b img { width: 100%; height: 100%; object-fit: cover; }
/* absolute -bottom-12 -left-12 w-48 h-48 border-2 border-primary/10 -z-10 */
.training-photo-dec {
  position: absolute;
  bottom: -3rem; left: -3rem;
  width: 12rem; height: 12rem;
  border: 2px solid rgba(212,25,32,0.1);
  z-index: -1;
}

/* text-center mb-20 */
.training-areas-header { text-align: center; margin-bottom: 5rem; }
/* text-5xl font-display tracking-tight uppercase */
.training-areas-title { font-size: clamp(2rem, 4vw, 3rem); }
/* w-24 h-1 bg-primary mx-auto mt-6 */
.training-areas-line { width: 6rem; height: 4px; background: var(--primary); margin: 1.5rem auto 0; }

/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 */
.training-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }

/* bg-light-gray p-12 flex flex-col gap-8 group hover:bg-bg-black hover:text-white transition-all duration-500 relative overflow-hidden */
.training-card {
  background: var(--light-gray);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  transition: background var(--trans-500), color var(--trans-500);
}
.training-card:hover { background: var(--bg-black); color: #fff; }

/* absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full translate-x-12 -translate-y-12 group-hover:scale-150 transition-transform duration-700 */
.training-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 6rem; height: 6rem;
  background: rgba(212,25,32,0.05);
  border-radius: 9999px;
  transform: translate(50%, -50%);
  transition: transform var(--trans-700);
}
.training-card:hover::before { transform: translate(50%, -50%) scale(1.5); }

/* text-primary group-hover:scale-110 transition-transform relative z-10 */
.training-card__icon {
  color: var(--primary);
  transition: transform var(--trans);
  position: relative;
  z-index: 1;
}
.training-card:hover .training-card__icon { transform: scale(1.1); }
.training-card__icon svg { width: 48px; height: 48px; stroke-width: 1.5; }

/* font-display text-2xl tracking-wider uppercase relative z-10 leading-tight */
.training-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

/* ============================================================
   CONTACT PAGE
   pt-40 pb-32 bg-white
   ============================================================ */
.contact-page { padding-top: 10rem; padding-bottom: 8rem; background: #fff; }

/* grid grid-cols-1 lg:grid-cols-2 gap-24 */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 6rem; }

/* bg-white p-12 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.1)] border border-gray-100 relative */
.contact-form-card {
  background: #fff;
  padding: 3rem;
  box-shadow: 0 32px 64px -12px rgba(0,0,0,0.1);
  border: 1px solid #F3F4F6;
  position: relative;
}
/* absolute top-0 left-0 w-full h-2 bg-primary */
.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--primary);
}

/* text-3xl mb-10 font-display tracking-tight uppercase */
.contact-form-card__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2.5rem; }

/* space-y-8 */
.contact-form { display: flex; flex-direction: column; gap: 2rem; }
/* grid grid-cols-1 md:grid-cols-2 gap-8 */
.form-row-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
/* space-y-2 */
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
/* block text-[10px] uppercase tracking-[0.3em] font-bold text-gray-400 font-accent */
.form-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: #9CA3AF;
}
/* w-full bg-light-gray border-b-2 border-transparent p-4 focus:border-primary focus:bg-white transition-all outline-none font-sans */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--light-gray);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text);
  transition: border-color var(--trans), background var(--trans);
  outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-bottom-color: var(--primary);
  background: #fff;
}
.form-textarea { resize: none; }
.form-select { appearance: none; cursor: pointer; }

/* Contact info col: space-y-16 */
.contact-info { display: flex; flex-direction: column; gap: 4rem; }
/* text-xs uppercase tracking-[0.4em] text-primary font-bold font-accent mb-10 */
.contact-info__heading {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2.5rem;
}
/* space-y-10 */
.locations { display: flex; flex-direction: column; gap: 2.5rem; }
/* flex gap-8 items-start group */
.location { display: flex; gap: 2rem; align-items: flex-start; }
/* w-16 h-16 bg-light-gray flex items-center justify-center text-primary shrink-0 group-hover:bg-primary group-hover:text-white transition-all duration-300 */
.location__icon {
  width: 4rem; height: 4rem;
  background: var(--light-gray);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: background var(--trans), color var(--trans);
}
.location:hover .location__icon { background: var(--primary); color: #fff; }
.location__icon svg { width: 28px; height: 28px; }
/* font-display text-2xl tracking-tight uppercase mb-2 */
.location__title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 0.5rem; }
/* text-gray-500 leading-relaxed font-sans */
.location__addr { font-family: var(--font-sans); color: var(--gray-500); line-height: 1.7; }

/* grid grid-cols-1 sm:grid-cols-2 gap-8 */
.direct-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
/* bg-light-gray p-8 group hover:bg-bg-black transition-all duration-500 */
.direct-card {
  background: var(--light-gray);
  padding: 2rem;
  transition: background var(--trans-500);
}
.direct-card:hover { background: var(--bg-black); }
.direct-card svg { color: var(--primary); width: 2rem; height: 2rem; margin-bottom: 1.5rem; transition: transform var(--trans); display: block; }
.direct-card:hover svg { transform: scale(1.1); }
/* block text-[10px] uppercase tracking-[0.3em] text-gray-400 font-accent mb-2 */
.direct-card__label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #9CA3AF;
  margin-bottom: 0.5rem;
}
/* block font-display text-xl tracking-widest group-hover:text-white transition-colors */
.direct-card__val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  color: var(--bg-black);
  transition: color var(--trans);
  text-decoration: none;
}
.direct-card:hover .direct-card__val { color: #fff; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* data-animate: opacity-0 translateY(2rem) → is-visible: opacity-1 translateY(0) */
[data-animate] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-animate].is-visible { opacity: 1; transform: translateY(0); }
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }

/* ============================================================
   RESPONSIVE — Mirror Tailwind breakpoints (md=768 lg=1024)
   ============================================================ */
@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .mobile-toggle { display: none; }

  .services-home-header { flex-direction: row; align-items: flex-end; }
  .services-home-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: row; }

  .form-row-2 { grid-template-columns: repeat(2, 1fr); }
  .direct-grid { grid-template-columns: repeat(2, 1fr); }
  .training-grid { grid-template-columns: repeat(2, 1fr); }
  .about-cards { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .services-home-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { flex-direction: row; }
  .why-image, .why-content { width: 50%; }
  .detail-fb-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-features { padding: 6rem; }
  .detail-benefits { padding: 6rem; }
  .detail-badge { display: block; }
  .detail-hero-grid { flex-direction: row; }
  .detail-hero-grid > * { width: 50%; }
  .about-intro-grid { flex-direction: row; }
  .about-intro-grid > * { width: 50%; }
  .training-intro-grid { flex-direction: row; }
  .training-intro-grid > * { width: 50%; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1.5fr 1.5fr; }
  .services-full-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .training-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-banner__inner { flex-direction: row; text-align: left; }
  .dark-cta { padding: 8rem; }
}

/* WordPress admin bar offset */
.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header { top: 46px; }
}