/* =========================================================
   Ignite Interior Decors — Stylesheet
   Layout & interaction modelled on livinor.webflow.io,
   restyled for the Ignite brand (green gradient + warm neutrals).
   HTML + CSS + JS.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --green-1: #9ed84f;
  --green-2: #35c76a;
  --green-3: #12a37a;
  --teal:    #0eb5a4;
  --grad: linear-gradient(120deg, var(--green-1), var(--green-2) 45%, var(--teal));

  --ink:      #171a16;
  --ink-soft: #4a524b;
  --ink-mute: #8a938a;
  --line:     #e7e4db;

  --cream:  #f6f4ec;
  --cream-2:#efece2;
  --card:   #ffffff;
  --dark:   #14170f;
  --dark-2: #1c2016;

  --radius: 20px;
  --radius-sm: 13px;
  --radius-lg: 30px;
  --shadow: 0 24px 60px -28px rgba(20, 30, 18, .38);
  --shadow-sm: 0 12px 30px -18px rgba(20, 30, 18, .4);

  --container: 1820px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Strong deceleration — what makes a reveal look like it settles
     into place rather than sliding to a stop. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Poppins throughout — one geometric sans, like the reference site.
     The three tokens are kept so every rule keeps its intent (display
     headings vs body copy vs the oversized hero), but they now all
     resolve to Poppins and differ only in weight/tracking below. */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-hero: "Poppins", system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Form controls do NOT inherit font-family from the page — browsers
   force their own default (Arial). Without this the submit button and
   inputs would fall back off Poppins. */
button, input, select, textarea { font-family: inherit; }

/* Fluid like the reference site, which runs ~90% of the viewport
   (≈1714px content at 1920px) rather than parking at a narrow fixed
   width and leaving wide dead gutters on large laptops. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 56px);
}

.section { padding: clamp(64px, 9vw, 128px) 0; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green-3);
}
.eyebrow::before {
  content: "✦";
  font-size: .8em;
}

/* Section headings follow the reference site: uppercase, heavy, tight.
   In-section headings (About, Why choose us, Contact) sit at this
   restrained size; the big section-head titles are scaled up below. */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.lead { font-size: 1.12rem; color: var(--ink-soft); }
p { color: var(--ink-soft); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* A light sweep passes across the button on hover. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

/* Arrows ease forward on hover. */
.btn .arrow, .service-link .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow, .service-link:hover .arrow { transform: translateX(5px); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--grad);
  color: #08130d;
  box-shadow: 0 12px 26px -12px rgba(18, 163, 122, .8);
}
.btn-primary:hover { box-shadow: 0 18px 34px -12px rgba(18, 163, 122, .9); }

.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #000; }

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

.btn-light { background: var(--cream); color: var(--ink); }
.btn-ghost-light { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-block { width: 100%; }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: var(--grad);
  z-index: 200;
  transition: transform .08s linear;
}

/* =========================================================
   HEADER
   ========================================================= */
/* Dark bar by default — inner pages have no hero behind the header, so
   the white nav needs something to sit on. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(100deg, var(--dark) 0%, var(--dark-2) 55%, #101408 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
  animation: header-drop .8s var(--ease) both;
}
@keyframes header-drop { from { transform: translateY(-100%); opacity: 0; } }

.site-header.scrolled {
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .75);
}

/* Homepage: the header is lifted OUT OF FLOW so the hero starts at the
   very top of the page and its photo runs behind the nav. Without this
   the hero begins below the header and a transparent bar just exposes
   the cream page background. */
.home .site-header { position: fixed; left: 0; right: 0; }

/* Fully transparent over the hero. The bar fades back in as soon as you
   scroll, otherwise the white nav would land on cream content below. */
.home .site-header:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.home .site-header:not(.scrolled) .main-nav a { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.home .site-header:not(.scrolled) .nav-cta { text-shadow: none; }
.home .site-header:not(.scrolled) .brand-logo { filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .55)); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  gap: 20px;
}
/* The logo PNG carries real alpha, so it sits on the dark bar without
   any blend mode — which would only muddy the green. */
.brand-logo {
  height: 58px; width: auto;
  transition: transform .4s var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.04); }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
  font-weight: 500;
  font-size: .96rem;
  color: rgba(255, 255, 255, .82);
  position: relative;
  transition: color .25s var(--ease);
}
.main-nav a:not(.nav-cta):hover,
.main-nav a.active { color: #fff; }
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a:not(.nav-cta):hover { color: #fff; }
.main-nav a:not(.nav-cta):hover::after,
.main-nav a.active:not(.nav-cta)::after { transform: scaleX(1); }
.main-nav a.active:not(.nav-cta) { color: #fff; }

/* Accent pill on the dark bar, like the reference header's CTA. */
.nav-cta {
  background: var(--grad);
  color: #08130d !important;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(18, 163, 122, .9);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.nav-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 30px -12px rgba(18, 163, 122, 1);
}

.nav-burger { display: none; }
.nav-scrim { display: none; }

/* =========================================================
   HERO (centered, star dividers, numbered services, carousel)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  color: #fff;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s var(--ease), transform 7s var(--ease);
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,16,10,.5) 0%, rgba(12,16,10,.26) 38%, rgba(12,16,10,.82) 100%),
    linear-gradient(90deg, rgba(12,16,10,.5), transparent 58%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(120px, 17vh, 190px) clamp(28px, 5vh, 48px);
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
/* Poppins is a wider, geometric face than the grotesque this was
   sized for, so the ceiling and tracking are pulled in to keep the
   headline on two lines at desktop widths. */
.hero-title {
  font-family: var(--font-hero);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8.4vw, 7.4rem);
  line-height: .98;
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-shadow: 0 8px 44px rgba(0,0,0,.4);
}
.hero-title .accent { color: #e9e0cd; }

/* Hero entrance: each block rises and settles in sequence. */
.hero-title,
.hero-tagline,
.hero-filmstrip { animation: hero-rise 1.1s var(--ease) both; }
.hero-title    { animation-delay: .15s; }
.hero-tagline  { animation-delay: .35s; }
.hero-filmstrip{ animation-delay: .5s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-tagline { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-tagline p {
  color: rgba(255,255,255,.9);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  max-width: 22ch;
}
.hero-filmstrip { display: flex; gap: 10px; }
.hero-filmstrip button {
  width: clamp(64px, 8vw, 96px);
  height: clamp(46px, 5.6vw, 66px);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  opacity: .55;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity .3s var(--ease), outline-color .3s var(--ease), transform .3s var(--ease);
}
.hero-filmstrip button:hover { transform: translateY(-3px); opacity: .85; }
.hero-filmstrip button.active { opacity: 1; outline-color: var(--green-1); }

/* =========================================================
   ABOUT + counters
   ========================================================= */
.about { background: var(--cream); }
/* Reference layout: copy + image stacked on the left, a 2x2 stat
   grid on the right, both starting from the same baseline. */
.about-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 4vw, 56px);
  /* Stretch, matching the reference: the stat grid runs the full height
     of the copy + image column so nothing is left hanging beside the
     image. The air this creates is absorbed by bottom-anchoring the
     content inside each cell (see .counter below). */
  align-items: stretch;
}
.about-left { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
/* No narrow cap — the reference lets this run the full width of its
   column, setting in 3 wide lines rather than 5 cramped ones. */
.about-text .section-title { margin: 14px 0 26px; }
.about-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.about-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--ink-soft);
}
.about-note .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green-2);
  box-shadow: 0 0 0 0 rgba(53,199,106,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(53,199,106,.55); }
  70% { box-shadow: 0 0 0 10px rgba(53,199,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,199,106,0); }
}
.about-media { position: relative; }
.about-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 11;
  object-fit: cover;
  width: 100%;
}

/* 2x2 stat grid. Hairline gaps come from the background showing
   through a 1px grid gap, so the cells read as one divided block. */
.counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr;   /* split the stretched height evenly */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Content is anchored to the BOTTOM of each cell, as on the reference.
   Centring it in a tall stretched cell is what made the whitespace look
   accidental rather than designed. */
.counter {
  background: var(--card);
  padding: clamp(28px, 3.2vw, 40px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background .4s var(--ease);
}
.counter:nth-child(2), .counter:nth-child(3) { background: var(--cream-2); }
.counter:hover { background: var(--cream); }
.counter .counter-num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.counter .counter-num .suffix { color: var(--green-3); }
.counter h4 {
  margin: 14px 0 8px;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.counter p { font-size: .88rem; color: var(--ink-mute); line-height: 1.5; }

/* =========================================================
   Section heads
   ========================================================= */
.section-head {
  display: flex;
  justify-content: space-between;
  /* start, not flex-end: the right column (blurb + button) is taller
     than the heading, so bottom-aligning pushed the heading down and
     opened a gap above it. */
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 54px;
  flex-wrap: wrap;
}
.section-head .eyebrow { margin-bottom: 12px; }
/* Section-head titles are the display headings — larger than the
   in-section .section-title above, as on the reference site. */
.section-head-title {
  max-width: 20ch;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
/* Second half of the heading drops back, e.g. "OUR FEATURED work" */
.title-muted { color: var(--ink-mute); }

.section-head-note { max-width: 42ch; color: var(--ink-mute); }
.section-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 44ch;
}

/* =========================================================
   BROWSE BY CATEGORY (homepage section shell)
   Card styling itself lives in the CATEGORY CARDS block below.
   ========================================================= */
.projects { background: var(--cream-2); }
.projects-cta { display: flex; justify-content: center; margin-top: 48px; }

/* =========================================================
   PROCESS
   ========================================================= */
.process { background: var(--dark); color: var(--cream); }

/* Staggered mosaic, like the reference: an oversized title panel on the
   left and step cards scattered across a 12-column grid rather than
   stacked in a plain list. */
.process-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: start;
}
.process-intro {
  grid-column: span 4;
  align-self: stretch;
  background: linear-gradient(160deg, var(--dark-2), #0d1108);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
}
.process-intro .eyebrow { color: var(--green-1); }
.process-headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 12px 0 16px;
}
.process-intro p { color: rgba(246, 244, 236, .6); max-width: 32ch; }

/* No card chrome, matching the reference: the step sits directly on the
   dark background. Order is label -> image -> title -> copy, which is
   set with flex `order` so the markup stays semantic. */
.process-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  padding: 0;
  transition: transform .45s var(--ease);
}
/* Offsets that give the block its scattered rhythm. */
.process-card:nth-child(3) { margin-top: 46px; }
.process-card:nth-child(4) { margin-top: -18px; }
.process-card:nth-child(5) { margin-top: 30px; }
.process-card:nth-child(6) { margin-top: -10px; }

.process-card:hover { transform: translateY(-6px); }

/* Small dot + label, not a filled pill */
.step-tag {
  order: -2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-1);
  margin-bottom: 14px;
}
.step-tag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-1);
  flex: none;
}
.process-card .step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 10px;
}
.process-card .step-desc { color: rgba(246, 244, 236, .62); font-size: .92rem; max-width: 34ch; }

/* script.js wraps content images in an .img-reveal frame, so THAT is the
   flex child here — the order has to live on the wrapper, not the <img>,
   or the image drops to the bottom of the card. */
.process-card > .img-reveal { order: -1; margin: 0 0 18px; border-radius: 10px; }
.process-card > .img-reveal .step-thumb { margin: 0; border-radius: 10px; }

/* Wide, short banner above the title. 4:1 matches the source images'
   own proportion, so they are framed rather than cropped at the sides. */
.process-card .step-thumb {
  order: -1;
  width: 100%;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 18px;
  filter: saturate(.92);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.process-card:hover .step-thumb { filter: saturate(1.05); transform: scale(1.02); }

/* Elbow connector from the previous step, as on the reference. Drawn
   with borders so there's no extra markup or image. */
.process-card:not(:nth-child(2))::before {
  content: "";
  position: absolute;
  left: -34px; top: -34px;
  width: 34px; height: 46px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  border-bottom-left-radius: 10px;
  pointer-events: none;
}
.process-card { position: relative; }
@media (max-width: 960px) { .process-card::before { display: none; } }

/* =========================================================
   SERVICES
   ========================================================= */
.services { background: var(--cream); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-card::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(53,199,106,.16), rgba(14,181,164,.16));
  color: var(--green-3);
  font-size: 1.6rem;
  margin-bottom: 22px;
}
.service-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; margin-bottom: 10px; }
.service-card .service-link { margin-top: 18px; display: inline-flex; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--green-3); }
.services-cta { display: flex; justify-content: center; margin-top: 46px; }

/* =========================================================
   CTA banner + offers strip
   ========================================================= */
.cta-banner {
  position: relative;
  color: #fff;
  text-align: center;
  background: url("https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1900&q=80") center/cover fixed;
}
.cta-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(12,18,10,.72), rgba(12,18,10,.82)); }
.cta-inner { position: relative; padding: clamp(70px, 10vw, 130px) 24px; }
.cta-inner .eyebrow { color: var(--green-1); justify-content: center; }
.cta-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.8vw, 3.5rem);
  margin: 14px 0 26px;
  letter-spacing: -0.01em;
}
.offers-strip {
  background: var(--dark-2);
  color: var(--cream);
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
}
.offers-track { display: inline-flex; gap: 40px; align-items: center; animation: marquee 24s linear infinite; }
.offers-track span { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(246,244,236,.9); }
.offers-track .sep { color: var(--green-1); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why { background: var(--cream-2); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 70px);
  align-items: center;
}
.why-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* Closer to the source photo's 16:9 so the room isn't cropped to pieces,
   while staying tall enough to balance the list beside it. */
.why-media img { aspect-ratio: 16/11; object-fit: cover; width: 100%; }
.why-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; }
.why-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.why-list .why-ico {
  flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--grad); color: #08130d; font-weight: 700;
}
.why-list h4 { font-size: 1.1rem; margin-bottom: 3px; }
.why-list p { font-size: .93rem; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials { background: var(--cream); }
.testimonial-track {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
}
.testimonial {
  flex: 0 0 min(440px, 84%);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
}
.stars { color: var(--green-2); letter-spacing: 3px; margin-bottom: 16px; }
.testimonial q {
  font-family: var(--font-display);
  font-size: 1.32rem; line-height: 1.42;
  color: var(--ink); font-weight: 400;
}
.testimonial q::before, .testimonial q::after { content: none; }
.testimonial footer { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.testimonial footer img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial footer .avatar {
  width: 48px; height: 48px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad);
  color: #08130d;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
}
.testimonial footer strong { display: block; }
.testimonial footer span { color: var(--ink-mute); font-size: .88rem; }
.carousel-controls { display: flex; gap: 12px; }
.carousel-btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.carousel-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-3px); }
.no-js .carousel-controls { display: none; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--dark); color: var(--cream); }
.contact .section-title { color: var(--cream); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 6vw, 70px);
  align-items: start;
}
.contact-info .lead { color: rgba(246,244,236,.7); }
.contact-details { list-style: none; padding: 0; margin-top: 30px; display: grid; gap: 16px; }
.contact-details li { color: var(--cream); }
.contact-details a { color: var(--green-1); }
.ci-label { display: inline-block; width: 74px; color: var(--ink-mute); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.contact-form {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 36px;
  display: grid; gap: 18px;
}
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-size: .84rem; font-weight: 600; color: rgba(246,244,236,.7); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.18);
  color: var(--cream);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(246,244,236,.4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-2);
  box-shadow: 0 0 0 4px rgba(53,199,106,.16);
}
.field select option { color: #111; }
.field textarea { resize: vertical; }
.btn.is-sent { background: var(--grad); color: #08130d; }

/* =========================================================
   FOOTER
   ========================================================= */
/* Faded interior photograph behind the dark footer.
   isolation + z-index:-1 keeps the texture behind the footer's own
   content without escaping into the page's stacking context. */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--dark-2);
  color: var(--cream);
  padding-top: 76px;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/decor/footer-bg.webp") center / cover no-repeat;
  opacity: .13;
  pointer-events: none;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 52px; }
.footer-wordmark { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.footer-wordmark em { font-style: normal; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-top: 2px; }
.footer-brand p { color: rgba(246,244,236,.6); margin-top: 14px; max-width: 32ch; }
/* Addresses render as normal body copy, not italic browser default */
address { font-style: normal; }
.contact-details address a,
.footer-col address a { transition: color .25s var(--ease); }
.contact-details address a:hover { color: var(--green-3); }
.footer-mail { display: inline-block; margin-top: 12px; color: var(--green-1); font-weight: 500; word-break: break-word; transition: opacity .25s var(--ease); }
.footer-mail:hover { opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
.contact-social a { color: var(--green-3); font-weight: 600; }
.contact-social a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(246,244,236,.8);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.footer-social a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer-social a:hover { background: var(--grad); color: #08130d; transform: translateY(-3px); border-color: transparent; }
.footer-col h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-1); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; color: rgba(246,244,236,.7); margin-bottom: 10px; transition: color .25s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 26px;
  display: flex; justify-content: space-between;
  color: rgba(246,244,236,.5); font-size: .85rem;
  flex-wrap: wrap; gap: 8px;
}
.footer-credit a { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .25s var(--ease); }
.footer-credit a:hover { opacity: .75; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   PROJECTS LISTING PAGE (interactive cursor-follow preview)
   ========================================================= */
.page-hero {
  padding: clamp(56px, 8vw, 120px) 0 clamp(30px, 4vw, 56px);
  text-align: center;
}
.page-hero .breadcrumb { color: var(--ink-mute); font-size: .88rem; margin-bottom: 16px; }
.page-hero .breadcrumb a:hover { color: var(--ink); }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.05;
  letter-spacing: -0.025em; text-transform: uppercase;
}
.page-hero p { max-width: 52ch; margin: 20px auto 0; }

/* =========================================================
   CATEGORY CARDS  (homepage grid + gallery hub)

   Each card stacks every photo in its category and crossfades
   between them — the "seamless fade" browsing effect. Only the
   first image is eager; the rest are lazy and fade in on cycle.
   ========================================================= */
/* ---- Homepage: one-row carousel with side arrows ---- */
.cat-carousel { position: relative; }
.cat-grid:not(.is-hub) {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Smoothness is passed per-call from script.js instead of being set
     here: a blanket scroll-behavior makes every programmatic scroll
     smooth, which swallows the arrow clicks. */
  padding-bottom: 6px;
  scrollbar-width: none;                 /* the arrows are the control */
}
.cat-grid:not(.is-hub)::-webkit-scrollbar { display: none; }
.cat-grid:not(.is-hub) .cat-card {
  flex: 0 0 clamp(280px, 30%, 420px);    /* ~3 visible, rest scrolls */
  scroll-snap-align: start;
}

.cat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease), opacity .3s var(--ease);
}
.cat-arrow.prev { left: -18px; }
.cat-arrow.next { right: -18px; }
.cat-arrow:hover { background: var(--grad); color: #08130d; border-color: transparent; }
.cat-arrow.prev:hover { transform: translateY(-50%) translateX(-3px); }
.cat-arrow.next:hover { transform: translateY(-50%) translateX(3px); }
.cat-arrow[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 720px) { .cat-arrow { display: none; } }

/* Hub page keeps the two-column grid */
.cat-grid.is-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: start; }

/* Card = vertical name rail + image, mirroring the reference's
   featured-work tiles. The rail carries the category name and count. */
.cat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }

.cat-rail {
  writing-mode: vertical-rl;          /* reads top-to-bottom, letters rotated */
  display: flex;
  align-items: center;
  justify-content: space-between;     /* name at the top, count at the bottom */
  gap: 16px;
  padding: 22px 14px;
  background: var(--dark);
  color: var(--cream);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease);
}
/* Alternate rail tone across the grid, as the reference does */
.cat-card:nth-child(even) .cat-rail { background: var(--cream-2); color: var(--ink); }
.cat-rail-count { font-weight: 500; letter-spacing: .1em; opacity: .6; }

.cat-media {
  position: relative;
  aspect-ratio: 4 / 3.5;
  overflow: hidden;
  background: var(--cream-2);
  display: block;
}
.cat-grid.is-hub .cat-media { aspect-ratio: 16 / 10; }

/* Stacked crossfading photos */
.cat-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s var(--ease), transform 6s var(--ease);
}
.cat-media img.is-active { opacity: 1; transform: scale(1); }
.cat-card:hover .cat-media img.is-active { transform: scale(1.07); }

.cat-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 18, 10, .55));
  pointer-events: none;
}

/* Circular arrow, centred over the image like the reference */
.cat-open {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 1.2rem;
  transform: translate(-50%, -50%) scale(.85);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease);
}
.cat-card:hover .cat-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cat-card:hover .cat-open:hover {
  background: var(--grad);
  border-color: transparent;
  color: #08130d;
}

/* Progress ticks showing which photo is on screen */
.cat-ticks {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 2;
  display: flex; gap: 5px;
}
.cat-ticks i {
  width: 14px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  transition: background .4s var(--ease), width .4s var(--ease);
}
.cat-ticks i.is-active { background: #fff; width: 22px; }

/* Ticks sit bottom-right of the image, clear of the rail */
.cat-media .cat-ticks { right: 14px; bottom: 14px; }

/* =========================================================
   CATEGORY DETAIL PAGE
   ========================================================= */
.cat-page-hero { padding: clamp(28px, 4vw, 52px) 0 0; }
.cat-breadcrumb { color: var(--ink-mute); font-size: .9rem; }
.cat-breadcrumb a:hover { color: var(--ink); }
.cat-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: end;
  margin: 14px 0 34px;
}
.cat-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 1.05; letter-spacing: -0.025em; text-transform: uppercase;
}
.cat-desc { color: var(--ink-soft); font-size: 1.06rem; }

/* Sticky category switcher — swaps galleries without a page reload */
.cat-tabs {
  position: sticky;
  top: 74px;
  z-index: 60;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
  background: linear-gradient(var(--cream) 70%, transparent);
  backdrop-filter: blur(6px);
}
.cat-tab {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.cat-tab:hover { border-color: var(--green-3); color: var(--ink); transform: translateY(-2px); }
.cat-tab.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Masonry grid — row spans are computed in script.js from real
   image dimensions, so portrait and landscape shots interlock. */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  gap: 18px;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.masonry.is-swapping { opacity: 0; transform: translateY(14px); }

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-2);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.tile.is-in { opacity: 1; transform: none; }
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: "⤢";
  position: absolute;
  right: 12px; bottom: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(250, 248, 242, .92);
  color: var(--ink);
  font-size: .9rem;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.tile:hover::after { opacity: 1; transform: none; }

/* =========================================================
   LIGHTBOX — slide + fade between photos
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(10, 14, 11, .95);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
}
.lb-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lb-close:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); }

.lb-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0 clamp(12px, 6vw, 90px);
}
/* Two buffers crossfade past each other for a seamless swap */
.lb-img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
  opacity: 0;
  transform: translateX(var(--from, 40px)) scale(.98);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.lb-img.is-active { opacity: 1; transform: none; }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 2;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lb-nav.prev { left: clamp(8px, 2vw, 26px); }
.lb-nav.next { right: clamp(8px, 2vw, 26px); }
.lb-nav:hover { background: var(--green-3); color: #08130d; }
.lb-nav.prev:hover { transform: translateY(-50%) translateX(-4px); }
.lb-nav.next:hover { transform: translateY(-50%) translateX(4px); }

.lb-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 16px 22px 22px;
  scrollbar-width: thin;
}
.lb-strip button {
  flex: none;
  width: 74px; height: 54px;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: .5;
  background: none;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.lb-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-strip button:hover { opacity: .85; }
.lb-strip button.is-active { opacity: 1; border-color: var(--green-2); }

/* =========================================================
   REVEAL (JS-driven) + shared components
   ========================================================= */
/* Longer travel on a decelerating curve reads as "settling" rather
   than "sliding" — the difference the reference site gets from GSAP. */
.js .reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  will-change: transform, opacity;
}
.js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Image reveal: the photo un-zooms behind a wipe as it enters ----
   Uses the standalone `scale` property, not `transform`, so the
   parallax below can drive `translate` on the same element without the
   two overwriting each other. */
.js .img-reveal { position: relative; overflow: hidden; }
.js .img-reveal > img { scale: 1.18; transition: scale 1.5s var(--ease-out); }
.js .img-reveal.is-visible > img { scale: 1; }
.js .img-reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cream);
  transform-origin: bottom;
  transition: transform 1.1s var(--ease-out);
  z-index: 1;
  pointer-events: none;
}
.js .img-reveal.is-visible::after { transform: scaleY(0); }
.process .img-reveal::after { background: var(--dark-2); }
@media (prefers-reduced-motion: reduce) {
  .js .img-reveal > img { transform: none; }
  .js .img-reveal::after { display: none; }
}

/* ---- Scroll-linked parallax: drives `translate` only, so it composes
   with the reveal's `scale` and stays on the compositor ---- */
.parallax { will-change: translate; }
@media (prefers-reduced-motion: reduce) { .parallax { translate: none !important; } }

/* ---- Headline reveal, line by line ---- */
.js .line-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js .line-reveal > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out);
}
.js .line-reveal.is-visible > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .line-reveal > span { transform: none; } }

/* Preloader */
.preloader {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-content: center; gap: 22px; justify-items: center;
  background: var(--dark);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader-mark { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 6vw, 3.4rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; animation: pre-pulse 1.4s var(--ease) infinite; }
.preloader-bar { width: 140px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.preloader-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: var(--grad); animation: pre-slide 1.1s var(--ease) infinite; }
@keyframes pre-pulse { 50% { opacity: .55; } }
@keyframes pre-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.loaded .preloader { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .preloader-mark, .preloader-bar::after { animation: none; } }

/* Back to top */
/* =========================================================
   FLOATING WHATSAPP BUTTON
   Always visible; sits below the back-to-top button so the two
   never overlap. Opens a chat with the message pre-filled.
   ========================================================= */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 91;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366;                 /* WhatsApp brand green */
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .65);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-float svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.wa-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 34px -8px rgba(37, 211, 102, .8); }

/* Soft outward ring so it reads as "tap me" without being noisy */
.wa-float::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: wa-ring 2.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes wa-ring {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; opacity: 0; } }

/* Back-to-top stacks above the WhatsApp button. The gap allows for its
   hidden-state translateY(16px), which would otherwise dip into it. */
.to-top {
  position: fixed; right: 28px; bottom: 108px; z-index: 90;
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: var(--ink); color: var(--cream); font-size: 1.2rem; cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  box-shadow: var(--shadow-sm);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green-3); transform: translateY(-3px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  .about-grid, .why-grid, .contact-grid, .cat-head { grid-template-columns: 1fr; }
  .about-text .section-title { max-width: none; }
  .cat-head { align-items: start; gap: 18px; }
  .cat-grid, .cat-grid.is-hub { grid-template-columns: repeat(2, 1fr); }
  /* Two-up: drop the stagger, it only reads at three columns. */
  .cat-grid:not(.is-hub) .cat-card:nth-child(n) { margin-top: 0; }
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: 1fr 1fr; }
  /* stacked layout — the stat grid no longer needs to match a sibling's height */
  .counters { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-media { max-width: 520px; }
  /* Two per row; the intro panel spans the full width above them. */
  .process-intro { grid-column: 1 / -1; min-height: 0; }
  .process-card { grid-column: span 6; }
  .process-card:nth-child(n) { margin-top: 0; }
}

@media (max-width: 720px) {
  /* The drawer is a position:fixed CHILD of the header, so the header
     must never become a containing block for it — that collapses the
     menu to header height and spills the links over the page.
     ANY of these on .site-header will do it, so all are forced off at
     this breakpoint: transform (incl. the header-drop entrance
     animation), backdrop-filter, filter, perspective, will-change.
     Do not remove without moving .main-nav out of the header. */
  .site-header, .site-header.scrolled {
    backdrop-filter: none;
    filter: none;
    perspective: none;
    will-change: auto;
    animation: none;      /* header-drop animates transform */
    transform: none;
  }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; cursor: pointer; z-index: 120;
  }
  /* White in both states: the bar is dark, and so is the open drawer. */
  .nav-burger span { display: block; height: 2px; width: 24px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 26px; padding: 40px;
    background: linear-gradient(160deg, var(--dark-2), var(--dark));
    box-shadow: -20px 0 60px -30px rgba(0,0,0,.75);
    transform: translateX(100%); z-index: 110;
    /* visibility keeps the closed drawer out of the tab order —
       an off-screen transform alone leaves its links focusable */
    visibility: hidden;
    transition: transform .4s var(--ease), visibility .4s var(--ease);
  }
  .main-nav a { font-size: 1.25rem; font-family: var(--font-display); font-weight: 600; }
  .nav-toggle-input:checked ~ .site-header .main-nav { transform: translateX(0); visibility: visible; }
  /* The header is a z-index:100 stacking context, so the drawer's own
     z-index is scoped inside it. The scrim therefore has to sit BELOW
     100 — at 105 it painted over the whole header and swallowed every
     tap meant for a menu link. */
  .nav-toggle-input:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(12,18,10,.45); z-index: 95; }
  .nav-toggle-input:checked ~ .site-header .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .site-header .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .site-header .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .hero-top { flex-direction: column; gap: 20px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .hero-filmstrip { display: none; }
}

@media (max-width: 640px) {
  .service-grid, .counters, .footer-grid, .field-row { grid-template-columns: 1fr; }
  /* single column, so drop the 2-row template from the desktop layout */
  .counters { grid-template-rows: auto; }
  .cat-grid, .cat-grid.is-hub, .masonry { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .process-card { grid-column: 1 / -1; }
  .cat-rail { padding: 16px 11px; font-size: .72rem; letter-spacing: .12em; }
  .lb-nav { width: 44px; height: 44px; font-size: 1.3rem; }
}

/* =========================================================
   SEAMLESS PAGE TRANSITIONS
   Cross-document View Transitions where supported; everything
   still works normally in browsers that don't support it.
   ========================================================= */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .cta-banner { background-attachment: scroll; }
  .tile { opacity: 1; transform: none; }
  .cat-media img { transition: opacity .2s linear; }
}