/* ============ Tokens (from BRAND.md) ============ */
:root {
  --steel-900: #0D0D0D;
  --steel-700: #2B2B2B;
  --steel-500: #B3B3B3;
  --orange: #FF6A00;
  --orange-ink: #0D0D0D;
  --bg: #0D0D0D;
  --surface: #2B2B2B;
  --ink: #F5F5F5;
  --ink-muted: #B3B3B3;
  --border: rgba(245, 245, 245, 0.12);

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.75rem, 5vw + 1.5rem, 6rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-body: 1rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 500ms;

  --radius: 8px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

img, svg { max-width: 100%; display: block; }

/* Subtle film-grain overlay across the whole page — reads as tactile/premium on
   large flat dark surfaces instead of looking like a flat AI-generated gradient. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Shared base for the stock-photo accents used across hero/services/process/
   trust/faq/contact — each section's own class (.hero-photo, .trust-photo...)
   sets the side, size and mask direction so the accent alternates down the page. */
.bg-photo {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 0;
  opacity: 0.2;
  object-fit: cover;
  pointer-events: none;
  /* rx pinned to 100% of the box's own width so the fade always finishes
     exactly at the box's inner edge (the section's center line) no matter
     how wide or narrow the box is. ry is deliberately much larger than any
     realistic section height: a radial gradient's stops are distance along
     BOTH axes at once, so a small ry (e.g. 50%) puts the top/bottom edges
     right at the transparent threshold even at x=0 — the photo would fade
     out near the anchor edge too, at the top and bottom, instead of staying
     solid there. A large ry keeps opacity driven by horizontal position
     only, so the full height actually stays visible near the anchor edge. */
  --photo-ellipse: 100% 260%;
}
@media (max-width: 767px) {
  .bg-photo { width: 38%; opacity: 0.12; }
}

@media (min-width: 1024px) {
  .wrap { padding-inline: 2.5rem; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--steel-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) ease-out, background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }

.btn-accent {
  position: relative;
  overflow: hidden;
  background: var(--orange);
  color: var(--orange-ink);
}
.btn-accent:hover { background: #d94f08; }
.btn-accent::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left var(--dur-reveal) var(--ease-out);
}
.btn-accent:hover::after { left: 120%; }
@media (prefers-reduced-motion: reduce) {
  .btn-accent::after { display: none; }
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.btn-lg { padding: 0.9375rem 2rem; font-size: 1rem; }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(13, 13, 13, 0.94);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
/* backdrop-filter is expensive to composite on mobile GPUs, and this header is
   sticky (recomposites on every scroll frame). Drop it there, compensating
   with a more opaque flat background so it still reads solid over content. */
@media (max-width: 767px) {
  .site-header,
  .site-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(13, 13, 13, 0.96);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--orange); }
.logo-mark { width: 32px; height: 32px; object-fit: contain; }
.footer-logo .logo-mark { display: none; }

.nav {
  display: none;
  gap: 1.75rem;
  margin-left: auto;
}
.nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: color var(--dur-fast) ease-out;
}
.nav a:hover { color: #fff; }

.nav-cta { display: none; }

.nav-toggle {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease-out;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255, 255, 255, 0.08); }
.nav-toggle span {
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease-out, background-color var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span { background: var(--orange); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dims and blurs the page behind the open mobile menu so it reads as a
   deliberate overlay panel instead of a plain dropdown list. Sits below the
   sticky header (z-index 100) so the header — and the toggle button that
   closes the menu — stays reachable above it. */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.98), rgba(13, 13, 13, 0.99));
  border-top: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem 0.75rem;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) ease-out, transform var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.mobile-nav a:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mobile-nav a::after {
  content: "\2192";
  color: var(--orange);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) ease-out, transform var(--dur-fast) ease-out;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible {
  background: rgba(255, 106, 0, 0.1);
  color: #fff;
}
.mobile-nav a:hover::after, .mobile-nav a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}
.mobile-nav.is-open a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav.is-open a:nth-child(1) { transition-delay: 40ms; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: 70ms; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: 100ms; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: 130ms; }
.mobile-nav.is-open a:nth-child(5) { transition-delay: 160ms; }
.mobile-nav.is-open a:nth-child(6) { transition-delay: 190ms; }

/* Locked while the drawer is open so the page behind the overlay doesn't scroll. */
body.mobile-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav a, .mobile-nav-backdrop { transition-duration: 1ms !important; }
  .mobile-nav a { transform: none; }
  .mobile-nav.is-open a:nth-child(n) { transition-delay: 0ms; }
}

/* 1200px (not the old 860px) so tablets — iPad Pro 11" (834/1194) and 12.9"
   portrait (1024) included — keep the hamburger instead of cramming 6 links
   + the CTA into a header that's still touch-sized, not desktop-wide. */
@media (min-width: 1200px) {
  .nav { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 78% -15%, rgba(255, 106, 0, 0.22), transparent 55%),
    linear-gradient(165deg, #1a1a1a 0%, #0d0d0d 65%);
  color: #fff;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: 6rem;
  overflow: hidden;
}

.hero-inner { max-width: 820px; position: relative; z-index: 1; }

.hero-mark {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(52vw, 620px);
  /* Absolutely-positioned replaced elements don't reliably derive height from
     width via the width/height-attribute aspect-ratio mapping — Chrome was
     rendering this at the intrinsic 700px tall regardless of width, badly
     distorting and oversizing it on mobile. Setting aspect-ratio explicitly
     forces height to actually track width. */
  aspect-ratio: 605 / 700;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (max-width: 767px) {
  .hero-mark { width: 78vw; right: -18%; opacity: 0.1; }
}

/* Stock photo on the side opposite the logo, dissolving from that edge toward
   the middle — never reaches the logo, never covers the section. Shared recipe
   below (.bg-photo) is reused by services/process/trust/faq/contact, each just
   picks a side and a size so the accent alternates left/right down the page. */
.hero-photo {
  left: 0;
  mask-image: radial-gradient(ellipse var(--photo-ellipse) at left center, black 0%, black 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse var(--photo-ellipse) at left center, black 0%, black 82%, transparent 100%);
}

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

/* Slow-drifting glow — cheap ambient motion behind the copy, purely decorative */
.hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 10%;
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(circle, rgba(255, 106, 0, 0.16), transparent 65%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
  animation: hero-drift 16s ease-in-out infinite;
}
@keyframes hero-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 6%) scale(1.08); }
}

/* Hero copy entrance — staggered fade/rise on first paint, not scroll-triggered
   (hero is always above the fold, so the .reveal/IntersectionObserver pattern
   used elsewhere would never fire here). */
.hero .eyebrow,
.hero .display,
.hero-sub,
.hero-actions,
.hero-badge {
  animation: hero-in var(--dur-reveal) var(--ease-out) both;
}
.hero .eyebrow { animation-delay: 0ms; }
.hero .display { animation-delay: 60ms; }
.hero-sub { animation-delay: 140ms; }
.hero-actions { animation-delay: 220ms; }
.hero-badge { animation-delay: 300ms; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .hero .eyebrow, .hero .display, .hero-sub, .hero-actions, .hero-badge {
    animation: none;
  }
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1rem;
}
.eyebrow-dark { color: var(--orange); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.hero-sub {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin: 0 0 2.25rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 0.55rem;
  margin: 1.75rem 0 0;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 106, 0, 0.08);
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 999px;
}
.hero-badge i { color: var(--orange); flex-shrink: 0; }
@media (max-width: 380px) {
  .hero-badge { border-radius: 1rem; }
}

.crack-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 60px;
  fill: var(--bg);
}

/* ============ Services ============ */
.services {
  padding-block: 5rem;
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(90deg, rgba(245, 245, 245, 0.035) 0px, rgba(245, 245, 245, 0.035) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(245, 245, 245, 0.035) 0px, rgba(245, 245, 245, 0.035) 1px, transparent 1px, transparent 64px);
}

/* Spotlight that follows the cursor (desktop only, set via JS custom properties) */
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) ease-out;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 106, 0, 0.08), transparent 42%);
}
.services.has-spotlight::before { opacity: 1; }
.services .wrap { position: relative; z-index: 1; }

/* Stock photo, top-right, dissolving toward the middle. */
.services-photo {
  right: 0;
  mask-image: radial-gradient(ellipse var(--photo-ellipse) at right center, black 0%, black 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse var(--photo-ellipse) at right center, black 0%, black 82%, transparent 100%);
}

/* ============ Decorative background — FAQ ============ */
.faq { position: relative; overflow: hidden; }
.faq .wrap { position: relative; z-index: 1; }

/* Stock photo, top-left, dissolving toward the middle. */
.faq-photo {
  left: 0;
  mask-image: radial-gradient(ellipse var(--photo-ellipse) at left center, black 0%, black 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse var(--photo-ellipse) at left center, black 0%, black 82%, transparent 100%);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 2.5rem;
  color: var(--ink);
}

.services-hint {
  margin: -1.5rem 0 2rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
/* Desktop keeps the original "hover to preview" copy; mobile gets the
   collapsible-card copy. Swapped by the breakpoint below. */
.services-hint--mobile { display: none; }

.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.card:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 16px 32px -14px rgba(255, 106, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.3); }
.card:hover .card-title { color: var(--orange); }

/* Floating fan stack — hover-capable desktops only. Touch/narrow screens keep the plain grid above. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .card-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 2.5rem 1.5rem 1.5rem;
  }

  .card {
    position: relative;
    width: 250px;
    flex-shrink: 0;
    transform: rotate(var(--card-r, 0deg)) translateY(var(--card-y, 0px));
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  }
  .card:nth-child(1) { --card-r: -4deg; --card-y: 14px; }
  .card:nth-child(2) { --card-r: -1.5deg; --card-y: -8px; }
  .card:nth-child(3) { --card-r: 1.5deg; --card-y: 6px; }
  .card:nth-child(4) { --card-r: 4deg; --card-y: -12px; }

  .card:hover,
  .card:focus-within {
    transform: rotate(0deg) translateY(-20px) scale(1.08);
    z-index: 20;
    border-color: var(--orange);
    box-shadow: 0 28px 44px -16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 106, 0, 0.25), 0 20px 40px -12px rgba(255, 106, 0, 0.2);
  }

  /* When another card in the row is hovered/focused, this one steps back and shrinks */
  .card-grid:hover .card:not(:hover):not(:focus-within),
  .card-grid:focus-within .card:not(:hover):not(:focus-within) {
    transform: rotate(var(--card-r, 0deg)) translateY(calc(var(--card-y, 0px) + 8px)) scale(0.9);
    filter: brightness(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .card { transition: box-shadow var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out; transform: none !important; }
    .card-grid:hover .card:not(:hover):not(:focus-within) { filter: none; }
  }
}

/* .card-header doubles as the mobile accordion's <button> trigger, so it
   needs a button reset — inert on desktop since it only cancels default
   button chrome a plain div never had. */
.card-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.5rem 1.5rem 1rem;
  background: transparent;
  border: none;
  font: inherit;
  text-align: left;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.card-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--orange);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-icon img { width: 80%; height: 80%; object-fit: contain; }
.card:hover .card-icon { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.22); }

.card-title {
  flex: 1;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  transition: color var(--dur-fast) ease-out;
}

/* Chevron only exists for the mobile accordion state; desktop never shows it. */
.acc-chevron { display: none; }

.card-image {
  width: 100%;
  aspect-ratio: 800 / 450;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out);
  filter: grayscale(0.35) saturate(1.15) brightness(0.82) contrast(1.08) sepia(0.12);
}
.card:hover .card-image { transform: scale(1.06); filter: grayscale(0.1) saturate(1.2) brightness(0.92) contrast(1.05) sepia(0.08); }

.card-description {
  margin: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

/* Collapsible service cards, phones only ("vista móvil"): contracted by
   default (icon + title only), one open at a time. Tablet and desktop keep
   the original always-expanded hover cards above untouched. The expanding
   panel uses the grid-rows trick (0fr -> 1fr) instead of height/max-height,
   since that's the one property that can transition to/from an intrinsic
   (auto) size smoothly. */
@media (max-width: 639px) {
  .services-hint--desktop { display: none; }
  .services-hint--mobile { display: block; }

  .card-header { cursor: pointer; }
  .acc-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

  .acc-item.is-open {
    border-color: var(--orange);
    box-shadow: 0 16px 32px -14px rgba(255, 106, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .acc-toggle[aria-expanded="true"] .card-icon { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.22); }
  .acc-toggle[aria-expanded="true"] .card-title { color: var(--orange); }

  .acc-chevron {
    display: inline-block;
    flex-shrink: 0;
    color: var(--ink-muted);
    font-size: 1rem;
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease-out;
  }
  .acc-toggle[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); color: var(--orange); }

  .acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }
  .acc-toggle[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
  .acc-panel-inner { overflow: hidden; min-height: 0; }

  .card-description { padding: 1.25rem 1.25rem 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-panel, .acc-chevron, .card-icon { transition-duration: 1ms !important; }
}

/* ============ Trust strip ============ */
.trust {
  position: relative;
  background: var(--steel-700);
  color: #fff;
  padding-block: 3.5rem;
  overflow: hidden;
}
/* Concrete-like texture instead of a flat gray fill */
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Diagonal hazard-stripe seam at the top edge — a signature detail, not repeated everywhere */
.trust::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 1;
  background: repeating-linear-gradient(45deg, rgba(255, 106, 0, 0.5) 0 10px, transparent 10px 20px);
}
.trust-inner { position: relative; z-index: 1; }

/* Stock photo on the right, dissolving toward the middle (alternates with
   .hero-photo on the left and .services-photo on the right below it). */
.trust-photo {
  right: 0;
  mask-image: radial-gradient(ellipse var(--photo-ellipse) at right center, black 0%, black 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse var(--photo-ellipse) at right center, black 0%, black 82%, transparent 100%);
}
.trust-inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .trust-inner { grid-template-columns: repeat(3, 1fr); }
}
.trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.9rem;
  font-size: 1.25rem;
  color: var(--orange);
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 50%;
}
.trust-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 0.4rem;
}
.trust-item p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; }

/* ============ Process ============ */
.process {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(90deg, rgba(245, 245, 245, 0.035) 0px, rgba(245, 245, 245, 0.035) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(245, 245, 245, 0.035) 0px, rgba(245, 245, 245, 0.035) 1px, transparent 1px, transparent 64px),
    radial-gradient(rgba(245, 245, 245, 0.16) 1.5px, transparent 1.5px);
  background-size: 64px 64px, 64px 64px, 22px 22px;
}
.process .wrap { position: relative; z-index: 1; }

/* Stock photo, bottom-left, dissolving toward the middle. */
.process-photo {
  left: 0;
  mask-image: radial-gradient(ellipse var(--photo-ellipse) at left center, black 0%, black 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse var(--photo-ellipse) at left center, black 0%, black 82%, transparent 100%);
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}

.process-step { position: relative; padding-top: 0.25rem; }
.process-step::before {
  content: "";
  position: absolute;
  top: 2.6rem;
  left: -0.75rem;
  right: -0.75rem;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.process-step:first-child::before { left: 50%; }
.process-step:last-child::before { right: 50%; }
@media (max-width: 767px) {
  .process-step::before { display: none; }
}

/* No background patch here: the section behind it isn't a flat fill (it's
   --surface plus a repeating grid/dot texture, and sometimes the dissolving
   .process-photo), so any background color on this element reads as a
   mismatched gray box against that backdrop. Fully transparent instead — the
   connector line (.process-step::before) just passes behind the digits. */
.process-number {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--orange);
  padding-right: 0.5rem;
  letter-spacing: 0.02em;
}
.process-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 0.6rem;
  font-size: 1.0625rem;
  color: var(--ink-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.process-step h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0.75rem 0 0.4rem;
  color: var(--ink);
}
.process-step p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

/* ============ FAQ ============ */
.faq {
  padding-block: 5.5rem;
  background-image:
    repeating-linear-gradient(90deg, rgba(245, 245, 245, 0.035) 0px, rgba(245, 245, 245, 0.035) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(245, 245, 245, 0.035) 0px, rgba(245, 245, 245, 0.035) 1px, transparent 1px, transparent 64px);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 760px;
}

.faq-item,
.subcontract-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur-base) var(--ease-out);
}
.faq-item.is-open,
.subcontract-item.is-open { border-color: var(--orange); }

.faq-toggle,
.subcontract-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  min-height: 44px;
}
.faq-question,
.subcontract-question { flex: 1; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.faq-plus,
.subcontract-plus { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.faq-toggle[aria-expanded="true"] .faq-plus,
.subcontract-toggle[aria-expanded="true"] .subcontract-plus { transform: rotate(45deg); }

.faq-panel,
.subcontract-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-panel-inner,
.subcontract-panel-inner { overflow: hidden; }
.faq-toggle[aria-expanded="true"] + .faq-panel,
.subcontract-toggle[aria-expanded="true"] + .subcontract-panel { grid-template-rows: 1fr; }
.faq-answer { margin: 0; padding: 0 1.25rem 1.125rem; color: var(--ink-muted); font-size: 0.9375rem; }
.subcontract-panel-inner .subcontract-copy { margin: 0 0 1rem; padding: 0 1.25rem; color: var(--ink-muted); font-size: 0.9375rem; }
.subcontract-panel-inner .contact-checklist,
.subcontract-panel-inner .subcontract-cta { padding-inline: 1.25rem; }
.subcontract-panel-inner .subcontract-cta { margin: 1.25rem 0 1.125rem; }

@media (prefers-reduced-motion: reduce) {
  .faq-panel,
  .subcontract-panel { transition: none; }
  .faq-plus,
  .subcontract-plus { transition: none; }
}

/* ============ Subcontratistas ============
   B2B ask for contractors/subcontractors — secondary audience, so it's a single
   collapsed accordion item below the main quote form: closed by default, only
   opens for whoever it's actually for, never competes with the main CTA. */
.subcontract {
  padding-block: 3.5rem;
  background: var(--bg);
}
.subcontract-inner { max-width: 640px; }

/* ============ Contact ============ */
.contact {
  position: relative;
  padding-block: 5.5rem;
  background: var(--surface);
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Slow mesh-gradient glow behind the copy/form — same drift keyframe as the hero, kept subtle here */
.contact::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 40vw;
  height: 40vw;
  max-width: 480px;
  max-height: 480px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 106, 0, 0.1), transparent 65%);
  filter: blur(10px);
  animation: hero-drift 18s ease-in-out infinite;
}
.contact-inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .contact::after { animation: none; }
}

.contact-inner {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
/* Grid tracks default to fitting a child's min-content width — the "Soldadura
   metálica (enmallados, cercas, estructuras)" <select> option is wide enough
   to blow the track past small viewports, and .contact's overflow:hidden then
   silently clips the form instead of scrolling it. min-width:0 lets the track
   (and the select inside it) actually shrink to fit. */
.contact-inner > * { min-width: 0; }
@media (min-width: 900px) {
  .contact-inner { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

.contact-copy p { color: var(--ink-muted); max-width: 42ch; }

.contact-checklist {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-checklist li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: rgba(245, 245, 245, 0.82);
  font-size: 0.9375rem;
}
.contact-checklist i { color: var(--orange); flex-shrink: 0; }

.direct-email {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) ease-out;
}
.direct-email:hover { border-color: var(--orange); }

.quote-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  min-height: 44px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
}
.form-note { margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }

.field-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
}
.field-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--orange);
}
.field-checkbox label {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.5;
  cursor: pointer;
}
.field-checkbox label a { color: var(--orange); }

/* ============ Footer ============ */
.site-footer {
  position: relative;
  background-color: var(--steel-900);
  color: rgba(255, 255, 255, 0.75);
  padding-block: 3rem;
  background-image:
    repeating-linear-gradient(90deg, rgba(245, 245, 245, 0.03) 0px, rgba(245, 245, 245, 0.03) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(245, 245, 245, 0.03) 0px, rgba(245, 245, 245, 0.03) 1px, transparent 1px, transparent 64px);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(45deg, rgba(255, 106, 0, 0.5) 0 10px, transparent 10px 20px);
}
.footer-inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
}
.footer-logo { font-size: 1.25rem; margin: 0 0 0.5rem; }
.footer-tagline { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.footer-legal { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); line-height: 1.7; }
.footer-services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9375rem; }
.footer-legal-links { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; }
.footer-legal-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer-legal-links a:hover { color: var(--orange); }
.footer-bottom {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.footer-copy { margin: 0; font-size: 0.8125rem; }
.footer-credit { margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }
.footer-credit a { color: inherit; }
.footer-credit a:hover { color: var(--orange); }

/* ============ Trayectoria ============ */
.trayectoria {
  padding-block: 5.5rem;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.trayectoria-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .trayectoria-inner { grid-template-columns: 0.85fr 1fr; gap: 3.5rem; }
}

.trayectoria-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
}
.trayectoria-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.55) contrast(1.1) sepia(0.15);
}
.trayectoria-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(13, 13, 13, 0.85) 100%),
    linear-gradient(0deg, rgba(255, 106, 0, 0.14), transparent 55%);
}

.trayectoria-stat {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}
@media (max-width: 767px) {
  .trayectoria-stat {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(13, 13, 13, 0.85);
  }
}
.trayectoria-stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  color: var(--orange);
  line-height: 1;
  text-shadow: 0 2px 16px rgba(255, 106, 0, 0.35);
}
.trayectoria-stat-number::after { content: "+"; }
.trayectoria-stat-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.trayectoria-copy .h2 { margin-bottom: 1.5rem; }

.trayectoria-quote {
  position: relative;
  margin: 0;
  padding-left: 1.75rem;
  border-left: 3px solid var(--orange);
}
.trayectoria-quote::before {
  content: "\201C";
  position: absolute;
  left: -0.35rem;
  top: -1.75rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 106, 0, 0.3);
  pointer-events: none;
}
.trayectoria-quote p {
  margin: 0;
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 52ch;
}

/* ============ Legal pages ============ */
.legal-page { padding-block: 4.5rem; }
.legal-page .wrap { max-width: 820px; }
.legal-page .eyebrow { margin-bottom: 0.75rem; }
.legal-page .h2 { margin-bottom: 0.5rem; }
.legal-updated { color: var(--ink-muted); font-size: 0.875rem; margin: 0 0 2.5rem; }
.legal-inner h2,
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
}
.legal-inner h2:first-of-type,
.legal-content h2:first-of-type { margin-top: 0; }
.legal-inner p,
.legal-content p { color: var(--ink-muted); line-height: 1.7; margin: 0 0 1rem; }
.legal-inner ul,
.legal-content ul { color: var(--ink-muted); line-height: 1.7; padding-left: 1.25rem; margin: 0 0 1rem; }
.legal-inner li,
.legal-content li { margin-bottom: 0.4rem; }
.legal-inner a,
.legal-content a { color: var(--orange); }
.legal-inner strong,
.legal-content strong { color: var(--ink); }
.legal-inner code,
.legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}
.legal-inner pre,
.legal-content pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 0 0 1.25rem;
}
.legal-inner pre code,
.legal-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  line-height: 1.6;
}

/* ============ Scroll reveal ============ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger: small, deliberate offset per item so a row/list reveals in sequence, not all at once */
.card-grid .reveal:nth-child(1),
.process-steps .reveal:nth-child(1) { transition-delay: 0ms; }
.card-grid .reveal:nth-child(2),
.process-steps .reveal:nth-child(2) { transition-delay: 60ms; }
.card-grid .reveal:nth-child(3),
.process-steps .reveal:nth-child(3) { transition-delay: 120ms; }
.card-grid .reveal:nth-child(4),
.process-steps .reveal:nth-child(4) { transition-delay: 180ms; }
.faq-list .reveal:nth-child(1) { transition-delay: 0ms; }
.faq-list .reveal:nth-child(2) { transition-delay: 50ms; }
.faq-list .reveal:nth-child(3) { transition-delay: 100ms; }
.faq-list .reveal:nth-child(4) { transition-delay: 150ms; }
.faq-list .reveal:nth-child(5) { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity var(--dur-base) ease-out; transform: none; }
  .card-grid .reveal, .faq-list .reveal, .process-step.reveal { transition-delay: 0ms !important; }
  html { scroll-behavior: auto; }
}

/* ============ WhatsApp FAB ============ */
.whatsapp-fab {
  position: fixed;
  /* env(safe-area-inset-*) falls back to 0 on browsers without notch/home-
     indicator support, so this is safe everywhere — but on a real notched
     iPhone in Safari, a plain 1.1rem bottom offset sits inside the home-
     indicator gesture strip. Confirmed via WebKit test: measured 17.6px
     from the visual viewport bottom, under the 34px safe inset. */
  right: max(1.1rem, calc(1.1rem + env(safe-area-inset-right)));
  bottom: max(1.1rem, calc(1.1rem + env(safe-area-inset-bottom)));
  z-index: 90;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background: linear-gradient(160deg, #2fd668 0%, #25d366 45%, #1fa855 100%);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
  animation: whatsapp-pulse 2.8s ease-in-out infinite;
}
.whatsapp-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.whatsapp-fab:active { transform: scale(0.96); }
.whatsapp-fab svg { width: 32px; height: 32px; }

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 0 rgba(47, 214, 104, 0.45); }
  50% { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 10px rgba(47, 214, 104, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
}