:root {
  --paper: #f6f2ea;
  --paper-2: #efe8dc;
  --ink: #1a2118;
  --muted: #5f675a;
  --line: #d8d0c2;
  --green: #1f4d2e;
  --green-deep: #14341f;
  --moss: #3d5c3f;
  --soil: #6b4f34;
  --white: #fffdf8;
  --container: 1080px;
  --display: "Bricolage Grotesque", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
}

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

/* Keyboard-focus visibility: applies everywhere, regardless of which
   stylesheet styled the element - deliberately using :focus-visible so mouse
   clicks don't get an outline, only keyboard/assistive-tech navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--premium-lime, #b9d66b);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  z-index: 200;
  top: -100px;
  left: 16px;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  background: var(--green-deep);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 0;
}

html {
  scroll-behavior: smooth;
  /* clip (not hidden/auto) so it doesn't turn html into a scroll container -
     that would break position:sticky on .site-header. This exists because
     .reveal--left/.reveal--right start translateX()'d off to the side before
     they scroll into view, which briefly widens the page's natural width on
     mobile and makes the browser zoom the whole viewport out to fit it. */
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
  background:
    linear-gradient(180deg, rgba(31, 77, 46, 0.04), transparent 18rem),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 11px,
      rgba(26, 33, 24, 0.015) 11px,
      rgba(26, 33, 24, 0.015) 12px
    ),
    var(--paper);
}

img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-deep); }

.container {
  width: min(100% - 2.4rem, var(--container));
  margin-inline: auto;
}

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

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 242, 234, 0.94);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: var(--green-deep);
}

.brand-sub {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav ul {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.site-nav a[aria-current="page"],
.site-nav a:hover {
  color: var(--green);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.header-phone {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem;
}

.nav-toggle span {
  display: block;
  height: 1px;
  margin: 0.45rem 0;
  background: var(--ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn svg {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.btn-solid {
  background: var(--green);
  color: var(--white);
}

.btn-solid:hover {
  background: var(--green-deep);
  color: var(--white);
}

.btn-line {
  background: transparent;
  border-color: rgba(255, 253, 248, 0.55);
  color: var(--white);
}

.btn-line:hover {
  background: rgba(255, 253, 248, 0.1);
  color: var(--white);
}

.btn-light {
  background: var(--white);
  color: var(--green-deep);
}

.btn-light:hover {
  background: var(--paper-2);
  color: var(--green-deep);
}

.text-link {
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

/* Hero */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: grid;
  align-items: end;
  color: var(--white);
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(12, 22, 14, 0.78) 0%, rgba(12, 22, 14, 0.42) 48%, rgba(12, 22, 14, 0.58) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(88, 122, 58, 0.35), transparent 50%),
    linear-gradient(160deg, #1b3a24 0%, #2a4a2d 35%, #3e5c30 62%, #1e3320 100%);
}

.hero-foliage {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 80%, rgba(120, 150, 70, 0.28) 0 8%, transparent 9%),
    radial-gradient(circle at 22% 88%, rgba(70, 110, 55, 0.35) 0 12%, transparent 13%),
    radial-gradient(circle at 78% 70%, rgba(95, 130, 60, 0.25) 0 14%, transparent 15%),
    radial-gradient(circle at 88% 85%, rgba(55, 90, 45, 0.4) 0 18%, transparent 19%),
    linear-gradient(180deg, transparent 45%, rgba(10, 18, 12, 0.55) 100%);
  animation: foliageDrift 16s ease-in-out infinite alternate;
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

@keyframes foliageDrift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.05) translateY(-1.5%); }
}

.hero-frame {
  position: relative;
  z-index: 1;
  padding: 7.5rem 0 4.5rem;
  max-width: 44rem;
  animation: heroIn 0.9s ease both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(1.1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-brand {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 5.6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.hero-kicker {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, 0.72);
}

.hero h1 {
  margin: 1.4rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.hero-lead {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: 1.12rem;
  color: rgba(255, 253, 248, 0.88);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
  margin-top: 1.8rem;
}

.hero-call {
  color: rgba(255, 253, 248, 0.92);
  text-decoration: none;
  font-weight: 600;
}

.hero-call:hover { color: #fff; }
.hero-call.light { color: rgba(255, 253, 248, 0.9); }

/* Sections */
.section {
  padding: 4.8rem 0;
}

.section-soft {
  background: color-mix(in srgb, var(--paper-2) 80%, white);
  border-block: 1px solid var(--line);
}

.section-dark {
  background: #152018;
  color: var(--white);
}

.section-dark a { color: #d7e6d4; }
.section-dark .text-link { color: #fff; }

.section-intro {
  max-width: 38rem;
  margin-bottom: 2.4rem;
}

.section-intro h2,
.about-copy h2,
.area-block h2,
.closing h2,
.page-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

.section-intro p,
.about-copy > p,
.area-block p,
.ba-meta p,
.quotes p {
  color: var(--muted);
}

.section-dark .about-copy > p,
.section-dark .about-aside p {
  color: rgba(255, 253, 248, 0.78);
}

.section-label {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9bb39a;
}

.section-foot { margin-top: 1.8rem; }

/* Trust */
.band-trust {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.trust-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: center;
}

.trust-score {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--display);
}

.trust-score strong {
  font-size: 2.4rem;
  letter-spacing: -0.04em;
}

.trust-label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.trust-copy p:last-child { margin: 0.2rem 0 0; }

.stars { color: var(--soil); letter-spacing: 0.08em; }
.star--empty { opacity: 0.35; }

/* Services list */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.service-list a {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: padding-left .2s ease, background .2s ease;
}

.service-list a:hover {
  padding-left: 0.4rem;
  background: linear-gradient(90deg, rgba(31, 77, 46, 0.05), transparent 55%);
}

.service-index {
  font-family: var(--display);
  font-weight: 650;
  color: var(--moss);
}

.service-main {
  display: grid;
  gap: 0.25rem;
}

.service-main strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-main em {
  font-style: normal;
  color: var(--muted);
}

.service-go {
  color: var(--green);
  font-size: 1.2rem;
  margin-top: 0.2rem;
}

/* About */
.about-block {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
}

.about-aside {
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255, 253, 248, 0.18);
}

.about-aside h3 {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/* Competence */
.competence-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}

.competence-row h3 {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.2rem;
}

.competence-row p {
  margin: 0;
  color: var(--muted);
}

/* Before / After */
.ba-stack {
  display: grid;
  gap: 2rem;
}

.ba-item {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 1.4rem;
  align-items: center;
}

.ba-slider {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #2a3528;
}

.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.ba-before {
  width: var(--pos, 50%);
  overflow: hidden;
  border-right: 2px solid #fff;
  z-index: 1;
}

.ba-ph {
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.4rem;
  color: #fff;
}

.ba-ph-before {
  background:
    linear-gradient(135deg, #4a5445, #2f382c),
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,.04) 8px, rgba(0,0,0,.04) 16px);
}

.ba-ph-after {
  background:
    linear-gradient(145deg, #35553a, #1f3d28),
    radial-gradient(circle at 60% 40%, rgba(150, 180, 90, 0.25), transparent 45%);
}

.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 2;
}

.ba-meta h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.4rem;
}

/* Catalog */
.catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.catalog-col h3 {
  margin: 0 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.15rem;
}

.catalog-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-col li {
  padding: 0.35rem 0;
  color: var(--muted);
  border-bottom: 1px dotted rgba(95, 103, 90, 0.25);
}

/* Quotes */
.quotes {
  display: grid;
  gap: 0;
}

.quotes blockquote {
  margin: 0;
  padding: 1.4rem 0 1.4rem 1.2rem;
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--green);
}

.quotes blockquote:last-child {
  border-bottom: 1px solid var(--line);
}

.quotes p {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
}

.quotes footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
}

.quotes cite {
  font-style: normal;
  font-weight: 700;
}

/* Area */
.area-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
}

.area-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-names li {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

/* Closing */
.closing {
  background: var(--green-deep);
  color: var(--white);
  padding: 4.5rem 0;
}

.closing-inner { max-width: 40rem; }
.closing p { color: rgba(255, 253, 248, 0.8); }

/* Page internals */
.page-hero {
  padding: 4.5rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(31, 77, 46, 0.05), transparent);
}

.page-hero .lead,
.page-hero .eyebrow {
  color: var(--muted);
}

.page-hero .eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prose {
  max-width: 42rem;
}

.prose :where(h2, h3) {
  font-family: var(--display);
  letter-spacing: -0.02em;
}

.prose :where(p, li) { color: var(--muted); }

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2rem;
}

.contact-details,
.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.4rem;
}

.contact-details {
  list-style: none;
  margin: 1rem 0 0;
  padding: 1.2rem;
}

.form-row {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.75rem 0.85rem;
  font: inherit;
}

.form-check label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.form-message {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
}

.form-message.is-success { background: #e5efe4; color: var(--green-deep); }
.form-message.is-error { background: #f4e4e1; color: #7a2b22; }

.card-grid,
.services-grid,
.expertise-grid,
.review-grid,
.ba-grid,
.inventory-grid {
  display: grid;
  gap: 1rem;
}

.services-grid,
.expertise-grid,
.review-grid,
.ba-grid { grid-template-columns: 1fr; }

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

.service-card,
.expertise-item,
.review-card,
.inventory-group,
.panel,
.ba-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 1.1rem 0;
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
}

.cta-band {
  background: var(--green-deep);
  color: #fff;
  padding: 3.5rem 0;
}

.cta-inner {
  display: grid;
  gap: 1rem;
}

.trust-rating--page { margin-top: 1rem; }

/* Footer */
.site-footer {
  background: #101712;
  color: #c8d2c5;
  padding: 3.5rem 0 1.4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 1.6rem;
}

.footer-brand strong {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--display);
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -0.02em;
}

.footer-logo {
  display: block;
  width: auto;
  max-width: 380px;
  height: 176px;
  margin: -32px 0 0.4rem -8px;
  object-fit: contain;
  object-position: left top;
}

.site-footer h3 {
  margin: 0 0 0.8rem;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li,
.site-footer p { margin: 0 0 0.45rem; }

.site-footer a {
  color: #c8d2c5;
  text-decoration: none;
}

.site-footer a:hover { color: #fff; }

.footer-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem !important;
}

.footer-areas li {
  margin: 0 !important;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 0.9rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #8d988b;
}

.footer-bottom p {
  margin: 0;
}

.footer-credit {
  color: #788579;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-credit strong {
  color: #9ca99b;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.footer-credit:hover,
.footer-credit:hover strong {
  color: #c5dc80;
}

/* Motion */
.reveal {
  opacity: 0;
  transform: translateY(1.8rem);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal--zoom {
  transform: scale(0.92);
}

.reveal--zoom.is-in {
  transform: scale(1);
}

.reveal--left {
  transform: translate(-2rem, 0);
}

.reveal--left.is-in {
  transform: none;
}

.reveal--right {
  transform: translate(2rem, 0);
}

.reveal--right.is-in {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--zoom,
  .reveal--left,
  .reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 960px) {
  /* Sideways translate on narrow/tablet screens pushes the not-yet-revealed
     element past the edge of the viewport, which makes mobile browsers widen
     the whole page to fit it (visible as an unwanted zoomed-out viewport on
     load). Fall back to the same vertical-only motion as the base .reveal.
     960px covers every width where a two-column layout has already
     collapsed to one column (the layouts do so at 900px), leaving no side
     margin to absorb the +/-2rem horizontal offset. */
  .reveal--left,
  .reveal--right {
    transform: translateY(1.2rem);
  }
}

@media (max-width: 960px) {
  .trust-row,
  .about-block,
  .ba-item,
  .area-block,
  .contact-layout,
  .split {
    grid-template-columns: 1fr;
  }

  .competence-row,
  .catalog,
  .footer-grid,
  .inventory-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 4.4rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem 1.2rem 1.3rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; }
  .header-actions { flex-direction: column; align-items: stretch; }

  .competence-row,
  .catalog,
  .footer-grid,
  .area-names,
  .inventory-grid {
    grid-template-columns: 1fr;
  }

  .hero-frame { padding-top: 5.5rem; }
  .service-list a { grid-template-columns: 2.4rem 1fr; }
  .service-go { display: none; }
  .trust-row { grid-template-columns: 1fr; }
}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: #25d366;
  border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(3, 12, 7, 0.45);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.whatsapp-float:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 32px -8px rgba(3, 12, 7, 0.5);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
}

.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(37, 211, 102, 0.55);
  border-radius: 999px;
  animation: whatsapp-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes whatsapp-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

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

@media (max-width: 640px) {
  .whatsapp-float {
    left: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  transition: opacity 420ms ease, visibility 420ms ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preloader__ring {
  width: 44px;
  height: 44px;
  border: 3px solid var(--line);
  border-top-color: var(--green);
  border-radius: 999px;
  animation: preloader-spin 800ms linear infinite;
}

.preloader__word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--green-deep);
}

@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__ring {
    animation: none;
    border-top-color: var(--green);
    opacity: 0.7;
  }
}

/* ---------- Mobile sticky CTA bar ---------- */

.mobile-cta-bar {
  display: none;
}

@media (max-width: 760px) {
  .mobile-cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 65;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--green-deep);
    /* Extends the bar's own background under the iPhone home-indicator
       instead of leaving a mismatched gap there (needs viewport-fit=cover
       on the viewport meta tag to have any effect). */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px rgba(3, 12, 7, 0.25);
  }

  .mobile-cta-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px 8px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
  }

  .mobile-cta-bar__item:hover,
  .mobile-cta-bar__item:active,
  .mobile-cta-bar__item:focus-visible {
    color: #fff;
    text-decoration: none;
  }

  .mobile-cta-bar__item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
  }

  .mobile-cta-bar__item:last-child {
    border-right: 0;
  }

  .mobile-cta-bar__item svg {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }

  .mobile-cta-bar__item--whatsapp {
    background: #1f7a49;
  }

  /* The floating WhatsApp bubble would otherwise sit on top of this bar on
     small screens - the bar's own WhatsApp action replaces it here. */
  .whatsapp-float {
    display: none;
  }

  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}