/* ==========================================================================
   C to C General Construction (PTY) LTD
   style.css
   Light theme: warm off-white base, soft grey sections, deep red #B30000
   and metallic gold accents, dark text on light backgrounds.
   No libraries. One subtle 3D touch: a blueprint grid in perspective behind
   the services section, and project photos that tilt slightly on hover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --base: #FBF8F3;        /* warm off-white page base */
  --base-2: #F4EFE7;      /* slightly deeper warm */
  --surface: #EFEAE1;     /* soft warm grey section */
  --surface-2: #E7E1D6;   /* deeper warm grey (footer) */
  --card: #FFFFFF;

  --ink: #1E1A15;         /* dark warm text */
  --ink-soft: #3B352C;
  --muted: #6B6155;       /* secondary text on light */

  --red: #B30000;
  --red-deep: #7A0000;
  --gold: #8A6212;        /* dark gold, usable on light backgrounds */
  --gold-bright: #CFA227;
  --gold-deep: #6E5410;

  --line: rgba(30, 26, 21, 0.12);
  --line-strong: rgba(30, 26, 21, 0.22);

  --shadow-sm: 0 2px 8px rgba(30, 26, 21, 0.06);
  --shadow-md: 0 18px 40px rgba(30, 26, 21, 0.12);
  --shadow-lg: 0 30px 60px rgba(30, 26, 21, 0.18);

  /* Type */
  --display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap: 1100px;
  --header-h: clamp(72px, 9vw, 96px);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.075rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p { margin: 0 0 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

section { position: relative; scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Accessible, on-brand focus everywhere */
:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Progress step icons
   -------------------------------------------------------------------------- */
.progress__strip {
  display: flex;
  gap: 2rem;
  padding: 1rem 0;
  margin: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.progress__circle {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   3. Buttons (rest / hover / active / focus / disabled / loading states)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out,
              background-color 160ms ease-out, border-color 160ms ease-out;
}

.btn::after {
  content: "▶";
  position: absolute;
  right: 0.5em;
  font-size: 0.85em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.btn:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(179, 0, 0, 0.28);
  background: var(--red-deep);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
  background: var(--red-deep);
}

.btn:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--loading {
  pointer-events: none;
}

.btn--loading::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  right: 0.5em;
}

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

/* --------------------------------------------------------------------------
   4. Header (pure white, because the logo sits on a bright base)
   -------------------------------------------------------------------------- */

.btn--lg { padding: 1em 1.9em; font-size: 1.05rem; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: rgba(169, 121, 28, 0.1);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: none;
}

/* Mobile: ensure tap targets meet 44px minimum */
@media (max-width: 819px) {
  .btn {
    padding: 1em 1.5em;
    min-height: 48px;
  }
  .btn--lg {
    padding: 1.1em 1.5em;
    min-height: 52px;
  }
}

/* --------------------------------------------------------------------------
   4. Header (pure white, because the logo sits on a bright base)
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  z-index: 1000;
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; }

/* ---- Navigation ---- */
.header-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.header-nav__link {
  position: relative;
  color: var(--ink);
  transition: color 0.2s ease;
}
.header-nav__link.is-active {
  color: var(--red-deep, #7A0000);
}
.header-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--gold);
}

.header-nav__link:hover {
  color: var(--red);
}

/* Hamburger button (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.75rem;
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
.hamburger span {
  width: 24px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- Desktop (820px and up) ---- */
@media (min-width: 820px) {
  .hamburger { display: none; }
  
  /* Logo on left, nav links, then button on far right */
  .site-header__inner {
    justify-content: flex-start;
  }
  
  .header-nav__list {
    gap: 1rem;
    margin-left: 1rem;
  }
  
  .btn {
    margin-left: auto; /* push to the right */
  }
}

/* ---- Mobile (under 820px) ---- */
@media (max-width: 819px) {
  .hamburger {
    display: flex;
  }

  .header-nav__list {
    display: none;
  }

  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    z-index: 1001;
    padding: 1rem;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mobile-menu__link {
    display: block;
    padding: 1rem 1.25rem;
    color: var(--ink);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    min-height: 48px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu__link:hover,
  .mobile-menu__link:focus {
    background: var(--base-2);
    color: var(--red);
    outline: none;
  }

  .mobile-menu__link:focus-visible {
    outline: 3px solid var(--gold-bright);
    outline-offset: 2px;
  }

  .mobile-menu__cta {
    background: var(--red);
    color: #fff;
    text-align: center;
    font-weight: 700;
    margin-top: 0.5rem;
  }

  .mobile-menu__cta:hover,
  .mobile-menu__cta:focus {
    background: var(--red-deep);
    color: #fff;
  }

  .btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* At least 70px tall on desktop, 52px on mobile */
.brand__logo {
  height: clamp(52px, 7vw, 70px);
  width: auto;
}

/* --------------------------------------------------------------------------
   4b. Header: Portfolio pill (phones only)
   The desktop nav already lists Portfolio, so this compact pill only appears
   in the phone header, next to the hamburger, so the page is one tap away.
   -------------------------------------------------------------------------- */

/* Hidden everywhere by default; shown only in the phone header below. */
.header-portfolio { display: none; }

@media (max-width: 819px) {
  /* The phone header row is logo + Portfolio pill + hamburger. The header's
     "Get a free quote" button is redundant here (the hero and the hamburger
     menu both carry it), so it steps aside to make room for the pill. */
  .site-header__inner > .btn { display: none; }

  /* Keep the three header items from shrinking or wrapping. */
  .brand,
  .header-portfolio,
  .hamburger { flex: 0 0 auto; }

  .header-portfolio {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-left: auto;          /* push the pill and hamburger to the right */
    height: 44px;               /* comfortable tap target */
    padding: 0 0.9rem;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--red);
    background: #ffffff;
    border: 1.5px solid var(--red);
    border-radius: 999px;
    transition: background-color 160ms ease-out, color 160ms ease-out,
                border-color 160ms ease-out, box-shadow 160ms ease-out,
                transform 160ms ease-out;
  }

  .header-portfolio__icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
  }

  /* Hover / keyboard focus: fill deep red with white text */
  .header-portfolio:hover,
  .header-portfolio:focus-visible {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 8px 18px rgba(179, 0, 0, 0.28);
  }

  /* Press: filled red, with a small give */
  .header-portfolio:active {
    color: #ffffff;
    background: var(--red-deep);
    border-color: var(--red-deep);
    transform: translateY(0) scale(0.97);
    transition-duration: 80ms;
  }

  .header-portfolio:focus-visible {
    outline: 3px solid var(--gold-bright);
    outline-offset: 3px;
  }

  /* Current page (portfolio.html): filled red at rest */
  .header-portfolio.is-current {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
  }
  .header-portfolio.is-current:hover {
    background: var(--red-deep);
    border-color: var(--red-deep);
  }
}

/* --------------------------------------------------------------------------
   5. Hero — full-bleed video background with a dark gradient overlay
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 84vh, 780px);
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 5rem));
  padding-bottom: clamp(3rem, 8vw, 5rem);
  background-color: #201B14;       /* dark fallback while the video loads */
}

/* --- Full-bleed video background, poster while loading --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: url("video/hero-poster.jpg");
  background-size: cover;
  background-position: center 60%;
}

.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: blur(1.5px);           /* softens the low-resolution footage */
}

/* Charcoal overlay: darker on the left under the text, lighter on the right */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(22, 18, 13, 0.65) 0%,
    rgba(22, 18, 13, 0.45) 50%,
    rgba(22, 18, 13, 0.35) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__copy { max-width: 37rem; }

.hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F3E9D8;
  margin-bottom: 0.9rem;
}

/* A small metallic accent under the label — the one gold flourish in the hero */
.hero__eyebrow::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.hero h1 {
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  font-weight: 900;
  text-wrap: balance;
  margin-bottom: 0.5em;
  color: #FBF6EC;
}

.hero__tagline {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: #EFE6D3;
  margin-bottom: 1.9rem;
  max-width: 34ch;
}

/* --- Mobile: full-bleed video, stronger overlay so the text stays readable --- */
@media (max-width: 819px) {
  .hero__bg::after {
    background: linear-gradient(170deg,
      rgba(22, 18, 13, 0.55) 0%,
      rgba(22, 18, 13, 0.78) 100%);
  }

  .hero__copy { max-width: 100%; }
  .hero__copy .btn { width: 100%; text-align: center; }
}

/* --- Wider screens --- */
@media (min-width: 820px) {
  .hero {
    padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
  }
}

/* --- Hero actions: the quote CTA and its outline companion --- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* The desktop header pushes its button right with margin-left:auto; reset that
   inside these grouped button rows so they follow their own alignment. */
.hero__actions .btn,
.work__cta .btn { margin-left: 0; }

/* Equal height: give the pair the same border width (the quote button's is
   transparent, so only the outline button reads as a border). */
.hero__actions .btn { border-width: 2px; }

.btn--hero-outline {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: none;
}

/* Uses the inline arrow, not the default ▶ reveal */
.btn--hero-outline::after { content: none; }

.btn--hero-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.btn--hero-outline:active {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
}

/* Inline arrow used by the hero-outline and work CTAs */
.btn__icon {
  display: block;
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform 160ms ease-out;
}

.btn--hero-outline:hover .btn__icon,
.btn--hero-outline:focus-visible .btn__icon { transform: translateX(3px); }

@media (max-width: 819px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;                  /* 12px under the first button */
  }
  .hero__actions .btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.section__title {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  margin-bottom: 0.7rem;
}

/* Metallic rule tying every section heading to the brand accent */
.section__title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.section__lede { color: var(--muted); margin: 0; }

/* Services — soft grey band with a faint perspective blueprint grid behind */
.services {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.services::before {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  top: -45%;
  bottom: -12%;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(179, 0, 0, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 26, 21, 0.10) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  transform-origin: 50% 100%;
  transform: perspective(620px) rotateX(58deg);
  animation: blueprint-drift 22s linear infinite;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 70%, transparent);
}

@keyframes blueprint-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 44px, 0 44px; }
}

.services > .wrap { position: relative; z-index: 1; }

.services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

@media (min-width: 640px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.service {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease-out, box-shadow 220ms ease-out,
              border-color 220ms ease-out;
}

.service::after {
  content: "";
  position: absolute;
  left: clamp(1.4rem, 3vw, 2rem);
  bottom: 1.1rem;
  width: 28px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease-out;
}

.service:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(179, 0, 0, 0.28);
}
.service:hover::after { transform: scaleX(1); }

.service__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 1rem;
  display: block;
  color: var(--gold);
}

.service h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.service p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* Our work */
.work { background: var(--base); }

.work__gallery {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

@media (min-width: 820px) {
  .work__gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Portrait media cards — same language as the hero card, smaller */
.work__card { margin: 0; }

.work__card-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--gold);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 44px -26px rgba(30, 26, 21, 0.42);
}

.work__card-media img,
.work__card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__card figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.work__gallery + .work__list { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* Portfolio gallery */
.gallery__grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 820px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 819px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery__card {
  margin: 0;
}

.gallery__img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.gallery__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery__card:hover .gallery__img-wrap img,
.gallery__card:focus-within .gallery__img-wrap img {
  transform: scale(1.03);
}

.gallery__card figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* In action videos */
.gallery__in-action {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.gallery__in-action-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

@media (min-width: 820px) {
  .gallery__in-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery__card-in-action {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.gallery__card-in-action video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.gallery__caption {
  padding: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

.lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10001;
}

.lightbox__close:hover,
.lightbox__close:focus {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__close:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10001;
}

.lightbox__nav:hover,
.lightbox__nav:focus {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__nav:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.lightbox__prev {
  left: 1rem;
}

.lightbox__next {
  right: 1rem;
}

.lightbox__content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  max-height: 90vh;
}

.lightbox__image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__caption {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  text-align: center;
  max-width: 90vw;
  padding: 0 1rem;
}

@media (max-width: 480px) {
  .lightbox__close,
  .lightbox__nav {
    width: 48px;
    height: 48px;
  }
  .lightbox__close { top: 0.5rem; right: 0.5rem; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
}

.work__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.work__list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}

.work__list li:first-child { padding-top: 0; }

.work__list strong {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}

.work__list span { color: var(--muted); font-size: 0.92rem; }

/* "View full portfolio" CTA under the work list — centred on all sizes */
.work__cta {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  justify-content: center;
}

.work__cta-btn { gap: 0.55em; }

/* Uses the inline arrow, not the default ▶ reveal */
.work__cta-btn::after { content: none; }

/* Arrow slides a touch on hover and keyboard focus */
.work__cta-btn:hover .btn__icon,
.work__cta-btn:focus-visible .btn__icon { transform: translateX(4px); }

/* Areas */
.areas { background: var(--surface); }

.areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) { .areas__list { grid-template-columns: repeat(3, 1fr); } }

.areas__list li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.areas__list strong {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.areas__list span { color: var(--muted); font-size: 0.88rem; }

/* Contact */
.contact { background: var(--base); }

.contact__layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 820px) {
  .contact__layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

.contact__form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  display: grid;
  gap: 1rem;
}

.field { display: grid; gap: 0.4rem; }

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

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--base);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 1px;
  border-color: var(--gold);
}

@media (max-width: 819px) {
  .field input,
  .field select,
  .field textarea {
    padding: 1rem 0.85rem;
    min-height: 48px;
  }
}

.contact__form .btn { margin-top: 0.4rem; }

.contact__note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}

/* Inline links stay identifiable by more than colour alone */
.contact__layout p a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__layout p a:hover { color: var(--red-deep); }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-2);
  color: var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border-top: 3px solid var(--red);
}

.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--red); }

.site-footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 0;
}
}
}

@media (min-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
    grid-template-columns: 1fr 1fr 1fr;
.site-footer__logo {
  max-height: 64px;
  width: auto;
  margin: 0;
  text-align: center;
}
.site-footer__logo p {
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.site-footer__logo {
  max-height: 64px;
  width: auto;
  margin: 0;
  text-align: center;
}
.site-footer__logo p {
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.site-footer h2 {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.8rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0.3rem 0; font-size: 0.9rem; }

.site-footer p a,
.site-footer li a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   8. Motion + accessibility preferences
   -------------------------------------------------------------------------- */

/* Pause the ambient motion while the tab is hidden (class set from a tiny script) */
.is-paused .services::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .services::before,
  .service::after {
    animation: none !important;
  }

  .service,
  .btn {
    transition: none;
  }

  /* Show only the poster image, never the moving video */
  .hero__bg video { display: none; }

  .work__card-media {
    background-image: var(--poster);
    background-size: cover;
    background-position: center;
  }
  .work__card-media video { display: none; }
}

/* Gallery hover: slow zoom + bottom gradient + "View" label */
.work__gallery a:hover .work__card-media::after,
.work__gallery a:focus .work__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(34,31,30,0.8) 0%, transparent 40%);
  pointer-events: none;
}
.work__gallery a:hover .work__card-media .work__label,
.work__gallery a:focus .work__card-media .work__label {
  opacity: 1;
  bottom: 0.5rem;
}
.work__gallery a .work__card-media {
  position: relative;
}
.work__gallery a .work__card-media img {
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .work__gallery a .work__card-media img { transition: none; }
}
.work__gallery a:hover .work__card-media img,
.work__gallery a:focus .work__card-media img {
  transform: scale(1.03);
}
.work__gallery a .work__card-media {
  position: relative;
}
.work__gallery a .work__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(34,31,30,0.8) 0%, transparent 40%);
  pointer-events: none;
}
.work__gallery a .work__card-media .work__label {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, bottom 0.2s ease;
  white-space: nowrap;
}
}
/* Respect OS high-contrast / forced colours */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .services::before { display: none; }
}

/* Header nav gold underline for current page */
.header-nav__link.is-active {
  position: relative;
  padding-bottom: 4px;
}
.header-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
}

/* ==========================================================================
   WhatsApp button (full interactive) — used in contact, CTA and footer
   ========================================================================== */
.wa-btn {
  --wa-green: #25D366;
  --wa-green-hover: #1EBE5A;
  --wa-ink: #0B3D1E;
  --wa-focus: #8A6212;
}

.wa-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--wa-green);
  color: var(--wa-ink);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  overflow: visible; /* let the pulse ring escape the button box */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 16px rgba(11, 61, 30, 0.18);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out,
              background-color 160ms ease-out;
}

/* Rest: soft pulse ring, expands and fades every 3 seconds */
.wa-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--wa-green);
  opacity: 0;
  transform: scale(1);
  animation: wa-pulse 3s ease-out infinite;
  pointer-events: none;
}

@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.45; }
  60%  { transform: scale(1.22); opacity: 0;    }
  100% { transform: scale(1.22); opacity: 0;    }
}

/* Clipping layer so ripples stay inside while the pulse ring stays outside */
.wa-btn__ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.wa-btn__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(11, 61, 30, 0.3);
  transform: translate(-50%, -50%) scale(0);
  animation: wa-ripple 600ms ease-out forwards;
  pointer-events: none;
}

@keyframes wa-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.wa-btn__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
}

.wa-btn__icon svg {
  display: block;
}

.wa-btn__label {
  position: relative;
  z-index: 1;
}

/* Hover: lift, deeper shadow, brighter green, a short icon wiggle */
@media (hover: hover) and (pointer: fine) {
  .wa-btn:hover {
    transform: translateY(-2px);
    background: var(--wa-green-hover);
    box-shadow: 0 14px 28px rgba(11, 61, 30, 0.28);
  }
  .wa-btn:hover .wa-btn__icon svg {
    animation: wa-wiggle 320ms ease-out;
  }
}

@keyframes wa-wiggle {
  0%   { transform: rotate(-10deg); }
  50%  { transform: rotate(10deg);  }
  100% { transform: rotate(0deg);   }
}

/* Active: press down; the ripple itself is injected from the click point */
.wa-btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}

/* Focus-visible: dark gold ring, 2px offset */
.wa-btn:focus-visible {
  outline: 3px solid var(--wa-focus);
  outline-offset: 2px;
}

/* Disabled */
.wa-btn[aria-disabled="true"],
.wa-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.wa-btn[aria-disabled="true"]::before,
.wa-btn:disabled::before {
  animation: none;
  opacity: 0;
}

/* Loading: a tiny spinner replaces the icon for 600ms */
.wa-btn.is-loading {
  pointer-events: none;
}
.wa-btn.is-loading .wa-btn__icon svg {
  opacity: 0;
}
.wa-btn.is-loading .wa-btn__icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--wa-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: wa-spin 0.6s linear infinite;
}
@keyframes wa-spin {
  to { transform: rotate(360deg); }
}

/* The footer's WhatsApp button keeps the WhatsApp colours and no underline,
   overriding the generic footer link styles (.site-footer a / .site-footer li a). */
.site-footer li .wa-btn,
.site-footer li .wa-btn:hover,
.site-footer li .wa-btn:active {
  color: var(--wa-ink);
  text-decoration: none;
}

/* Pause the pulse while the tab is hidden (class toggled by the page script) */
.is-paused .wa-btn::before {
  animation-play-state: paused;
}

/* Reduced motion: drop the pulse, wiggle and ripple; keep colour and focus ring */
@media (prefers-reduced-motion: reduce) {
  .wa-btn::before {
    animation: none;
    opacity: 0;
  }
  .wa-btn:hover .wa-btn__icon svg {
    animation: none;
  }
  .wa-btn__ripple {
    display: none;
  }
}

/* Keeps the CTA buttons (primary + WhatsApp) spaced and centred */
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

/* ==========================================================================
   Sticky Call FAB (mobile only)
   ========================================================================== */
.call-fab {
  display: none;
  position: fixed;
  bottom: clamp(1rem, 3vh, 1.5rem);
  right: clamp(1rem, 3vw, 1.5rem);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}
.call-fab:hover,
.call-fab:focus {
  transform: scale(1.08);
  box-shadow: 0 24px 48px rgba(179, 0, 0, 0.35);
  background: var(--red-deep);
}
.call-fab:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}
.call-fab:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}
@media (max-width: 819px) {
  .call-fab {
    display: flex;
  }
  /* Reserve room at the foot of the page so the fixed Call button never
     covers the footer (including the WhatsApp link) on small screens. */
  .site-footer {
    padding-bottom: 5.5rem;
  }
}

/* ==========================================================================
   About / Our Story section
   ========================================================================== */
.about {
  background: var(--base);
}
.about__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 0.42fr 0.58fr;
  }
}
.about__photo {
  margin: 0;
  border-radius: 12px;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 520px;
}
.about__photo img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
.about__content {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.about__story p {
  margin-bottom: 1rem;
  line-height: 1.75;
}
.about__story p:last-child {
  margin-bottom: 1.5rem;
}
.about__values {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.about__value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.about__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
}
.about__standards {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.about__standards h3 {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.about__standards ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.about__standards li {
  padding: 0.25rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.about__founders {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.about__founder {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.about__founder strong {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--ink);
}
.about__founder span {
  font-size: 0.9rem;
  color: var(--muted);
}
.about__content > .btn {
  margin-top: 1rem;
}

/* Reduced motion for about section */
@media (prefers-reduced-motion: reduce) {
  .call-fab {
    transition: none;
  }

  .header-portfolio,
  .btn__icon {
    transition: none;
  }

  .btn--hero-outline:hover .btn__icon,
  .btn--hero-outline:focus-visible .btn__icon,
  .work__cta-btn:hover .btn__icon,
  .work__cta-btn:focus-visible .btn__icon {
    transform: none;
  }
}