:root {
  --bg: #050505;
  --bg-elevated: #0c0c0c;
  --bg-soft: #121212;
  --text: #ffffff;
  --text-muted: #b3b3b3;
  --red: #e10600;
  --red-bright: #ff1a14;
  --red-glow: rgba(225, 6, 0, 0.45);
  --line: rgba(225, 6, 0, 0.55);
  --border: rgba(255, 255, 255, 0.12);
  --font-display: "Michroma", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-banner: "Cormorant Garamond", Georgia, serif;
  --max: 1280px;
  --header-h: 78px;
  --header-height: 78px;
  --transition: 0.25s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(225, 6, 0, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(225, 6, 0, 0.14), transparent 50%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.015) 6px,
      rgba(255, 255, 255, 0.015) 7px
    ),
    var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

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

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Header – mirrors Onward fixed transparent header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.brand-icon {
  width: 40px;
  height: 40px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}

.brand-sub {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  color: var(--red);
  font-weight: 600;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-desktop > a,
.nav-dropdown-toggle {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease;
}

.nav-desktop > a:hover,
.nav-desktop > a.is-active,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.is-active {
  color: var(--text);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: #0a0a0a;
  border: 1px solid var(--border);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.65rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-dropdown-menu a:hover {
  color: var(--text);
  background: rgba(225, 6, 0, 0.12);
}

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

.header-social {
  display: none;
  align-items: center;
  gap: 0.35rem;
}

.header-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.header-social a:hover {
  color: #fff;
}

.header-social svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-bright);
  transform: translateY(-1px);
}

.btn-white {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.btn-white:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
}

.burger {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.burger span {
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(5, 5, 5, 0.97);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  z-index: 99;
}

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

.mobile-nav a {
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.85rem;
}

.mobile-nav a:hover {
  color: #fff;
}

/* Hero – full bleed, brand first */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 3rem) 1.5rem 4rem;
  overflow: hidden;
}

.hero-glow-left,
.hero-glow-right {
  position: absolute;
  width: 2px;
  pointer-events: none;
  filter: blur(1px);
}

.hero-glow-left {
  left: 0;
  top: 0;
  bottom: 35%;
  background: linear-gradient(180deg, transparent, var(--red), transparent);
  box-shadow: 0 0 30px 8px var(--red-glow);
  animation: pulse-glow 4s ease-in-out infinite;
}

.hero-glow-right {
  right: 0;
  top: 35%;
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--red), transparent);
  box-shadow: 0 0 30px 8px var(--red-glow);
  animation: pulse-glow 4s ease-in-out infinite 1.2s;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 2.5rem;
}

.hero-brand-block {
  opacity: 0;
  transform: translateY(28px);
  animation: rise 0.9s ease forwards 0.15s;
}

.hero-logo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hero-logo-row img {
  width: 64px;
  height: 64px;
}

.hero-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.2rem);
  letter-spacing: 0.12em;
  line-height: 1;
  margin: 0;
}

.hero-wordmark span {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.42em;
  letter-spacing: 0.45em;
  color: var(--red);
  font-weight: 600;
}

.hero-wordmark span::before,
.hero-wordmark span::after {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: var(--red);
  flex-shrink: 0;
}

.hero-tagline {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-tagline em {
  font-style: normal;
  color: var(--red);
  font-weight: 600;
}

.hero-copy {
  max-width: 42rem;
  opacity: 0;
  transform: translateY(28px);
  animation: rise 0.9s ease forwards 0.4s;
}

.hero-copy h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  letter-spacing: 0.06em;
  line-height: 1.55;
  font-weight: 400;
}

.hero-copy p {
  margin: 0 0 1.75rem;
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 36rem;
}

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

.hero-rule {
  width: min(220px, 40%);
  height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
  margin: 0.5rem 0 0;
  opacity: 0;
  animation: rise 0.8s ease forwards 0.65s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sections */
.section {
  padding: 5.5rem 1.5rem;
  position: relative;
}

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}

.section-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.section-lead {
  margin: 0 0 2.5rem;
  color: var(--text-muted);
  max-width: 40rem;
  font-size: 1.02rem;
}

.section-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Services grid – not cards: open layout with divider lines */
.service-list {
  display: grid;
  gap: 0;
}

.service-item {
  display: grid;
  gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  transition: background 0.25s ease;
}

.service-item:last-child {
  border-bottom: 1px solid var(--border);
}

.service-item:hover {
  background: linear-gradient(90deg, rgba(225, 6, 0, 0.08), transparent 55%);
}

.service-index {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--red);
}

.service-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}

.service-item p {
  margin: 0;
  color: var(--text-muted);
  max-width: 38rem;
}

.service-item a {
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.service-item a:hover {
  color: var(--red);
}

/* Process / how we work */
.process-steps {
  display: grid;
  gap: 2rem;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-left: 4rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.process-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--red);
}

.process-step h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.process-step p {
  margin: 0;
  color: var(--text-muted);
  max-width: 36rem;
}

/* Contact strip on home */
.contact-strip {
  padding: 4rem 1.5rem 5rem;
}

.contact-strip-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  align-items: end;
}

.contact-strip a.email-link {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.08em;
  word-break: break-word;
}

.contact-strip a.email-link:hover {
  color: var(--red);
}

.contact-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.location-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.location-line::before,
.location-line::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--red);
}

.location-line svg {
  color: var(--red);
  flex-shrink: 0;
}

/* Contact page form */
.contact-layout {
  display: grid;
  gap: 3rem;
}

.contact-details {
  display: grid;
  gap: 1rem;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.contact-icon {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}

.contact-row a:hover,
.contact-row span {
  color: #fff;
}

.contact-form {
  display: grid;
  gap: 1.1rem;
}

.form-field {
  display: grid;
  gap: 0.45rem;
}

.form-field label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: #fff;
  padding: 0.95rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--red);
}

.form-field textarea {
  min-height: 150px;
  resize: vertical;
}

.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form-message {
  padding: 1rem;
  border: 1px solid var(--border);
  font-size: 0.9rem;
}

.form-message.success {
  border-color: rgba(0, 180, 80, 0.5);
  color: #9dffc0;
}

.form-message.error {
  border-color: var(--red);
  color: #ffb4b0;
}

/* Page hero for inner pages */
.page-hero {
  padding: calc(var(--header-h) + 4rem) 1.5rem 3rem;
  border-bottom: 1px solid var(--border);
}

.page-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.page-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  letter-spacing: 0.1em;
}

.page-hero p {
  margin: 0;
  color: var(--text-muted);
  max-width: 38rem;
}

/* Service detail blocks */
.service-detail {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border);
}

.service-detail:last-child {
  border-bottom: 0;
}

.service-detail h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.1em;
}

.service-detail p {
  color: var(--text-muted);
  max-width: 42rem;
}

.service-detail ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.service-detail li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--text-muted);
}

.service-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.55rem;
  height: 1px;
  background: var(--red);
}

/* Footer */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 3rem 1.5rem 2rem;
  overflow: hidden;
}

.footer-glow {
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 50%;
  height: 120%;
  background: radial-gradient(circle, rgba(225, 6, 0, 0.18), transparent 65%);
  pointer-events: none;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.footer-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.footer-name {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.16em;
  font-size: 0.95rem;
}

.footer-name span {
  color: var(--red);
}

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

.footer-tag em {
  font-style: normal;
  color: var(--red);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 2rem;
}

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

.footer-contact .sep {
  opacity: 0.35;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-bottom p {
  margin: 0;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

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

/* Reveal helper */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
  }

  .header-social {
    display: flex;
  }

  .burger {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1.05fr 1fr;
    align-items: end;
    gap: 3rem;
  }

  .service-item {
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
  }

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3rem;
  }

  .contact-strip-inner {
    grid-template-columns: 1.4fr auto;
  }

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

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

/* --- Onward-style home hero --- */
body.is-home-hero {
  overflow: hidden;
  background: #000;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

html:has(body.is-home-hero) {
  height: 100%;
}

body.is-home-hero .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

body.is-home-hero .site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

body.is-home-hero #main {
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.home-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) 1.5rem 5rem;
  overflow: hidden;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  z-index: 0;
}

.home-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.78) 100%),
    rgba(0, 0, 0, 0.28);
}

.home-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  animation: rise 0.9s ease forwards 0.15s;
}

.home-hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.85rem;
}

.home-hero__brand img {
  width: clamp(110px, 18vw, 150px);
  height: auto;
  object-fit: contain;
}

.home-hero__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3.4vw, 2.45rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 40rem;
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}

.home-hero__desc {
  margin: 0 0 2.15rem;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 36rem;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
}

.home-hero__actions .btn {
  min-width: 150px;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-hero__email {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.home-hero__email:hover {
  color: var(--red);
}

@media (max-width: 767px) {
  .home-hero {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-h) + 1.25rem) 1.25rem 5.5rem;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
  }

  .home-hero__media,
  .home-hero__overlay {
    width: 100%;
    height: 100%;
  }

  .home-hero__video {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .home-hero__overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.88) 100%),
      rgba(0, 0, 0, 0.25);
  }

  .home-hero__content {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .home-hero__brand {
    justify-content: center;
    width: 100%;
    margin-bottom: 1.35rem;
  }

  .home-hero__brand img {
    width: clamp(88px, 28vw, 120px);
    margin: 0 auto;
  }

  .home-hero__title,
  .home-hero__desc {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .home-hero__title {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem);
    margin-bottom: 1rem;
  }

  .home-hero__desc {
    font-size: 0.85rem;
    margin-bottom: 1.75rem;
  }

  .home-hero__actions {
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
  }

  .home-hero__email {
    display: none;
  }
}

/* --- Conversational Lead Form (Take Action) --- */
body.is-lead-page {
  overflow: hidden;
  background: #000;
}

body.is-lead-page .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

body.is-lead-page .site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.75);
  backdrop-filter: blur(12px);
}

body.is-lead-page #main {
  padding: 0;
}

.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 52px;
  height: 52px;
  background: #25d366;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 999;
  outline: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.whatsapp-float:hover,
.whatsapp-float:focus,
.whatsapp-float:focus-visible {
  transform: translateY(-2px);
  filter: none;
  outline: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}

body.is-lead-page .whatsapp-float {
  bottom: 4.75rem;
  right: 1.25rem;
}

body.is-home-hero .whatsapp-float {
  bottom: 1.25rem;
  right: 1.5rem;
}

@media (max-width: 767px) {
  .whatsapp-float {
    width: 54px;
    height: 54px;
    right: 1.15rem;
    left: auto;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0.35rem;
    z-index: 1000;
  }

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

  body.is-home-hero .whatsapp-float {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    right: 1.15rem;
    margin-bottom: 0.35rem;
  }

  body.is-lead-page .whatsapp-float {
    left: 1.15rem;
    right: auto;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0.35rem;
  }
}

.lead-form {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #000;
}

.lead-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  z-index: 1;
}

.lead-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 2;
}

.lead-step__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.lead-step__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.lead-step__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--header-height) + 0.5rem) 1.5rem 3rem;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lead-step__inner::-webkit-scrollbar {
  display: none;
}

.lead-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 0.6rem;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-body);
  vertical-align: middle;
  border-radius: 3px;
  transform: translateY(-2px);
}

.lead-step__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.75rem;
}

.lead-step__desc {
  font-size: 14px;
  line-height: 1.65;
  color: #cfcfcf;
  margin: 0 0 1.5rem;
}

.lead-required {
  color: var(--red-bright);
  margin-left: 0.25rem;
}

.lead-field {
  margin-bottom: 1.25rem;
}

.lead-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
}

.lead-hint {
  display: block;
  font-size: 12px;
  color: #999;
  margin: -0.35rem 0 0.65rem;
}

.lead-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  padding: 0.65rem 0;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  color: #fff;
  caret-color: var(--red);
  background-image: linear-gradient(to right, var(--red), var(--red-bright));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size 0.45s ease, border-color var(--transition);
}

.lead-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.lead-field input:focus {
  outline: none;
  border-bottom-color: transparent;
  background-size: 100% 2px;
}

.lead-field input:-webkit-autofill,
.lead-field input:-webkit-autofill:hover,
.lead-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: var(--red);
  transition: background-color 600000s 0s, color 600000s 0s, background-size 0.45s ease;
}

.lead-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.lead-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}

.lead-choice:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.lead-choice.is-selected {
  border-color: var(--red);
  background: rgba(225, 6, 0, 0.22);
}

.lead-choice__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.lead-choice.is-selected .lead-choice__key {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.lead-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.lead-btn:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.lead-btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.lead-error {
  color: #ff7a7a;
  font-size: 13px;
  min-height: 1.2em;
  margin-bottom: 0.5rem;
}

.lead-nav {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 10;
}

.lead-nav__arrow {
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
}

.lead-nav__arrow:hover {
  background: var(--red);
  color: #fff;
}

.lead-nav__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

.lead-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.lead-nav__brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.lead-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 10;
}

.lead-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width 0.5s ease;
}

@media (max-width: 640px) {
  .lead-step__inner {
    padding: calc(var(--header-height) + 0.5rem) 1.25rem 5rem;
    text-align: center;
  }

  .lead-step__title,
  .lead-step__desc,
  .lead-field label,
  .lead-hint,
  .lead-error {
    text-align: center;
  }

  .lead-choices {
    align-items: center;
  }

  .lead-choice {
    font-size: 13px;
    justify-content: center;
    text-align: center;
  }

  .lead-field input {
    text-align: center;
  }

  .lead-btn {
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   WEBSITE UPGRADE — ONBOARDING / PORTAL / LEGAL / LEAD FORM
============================================================ */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}
.footer-links a:hover { color: #fff; }

.home-hero__legal {
  position: absolute;
  left: 1.5rem;
  bottom: 1.1rem;
  z-index: 3;
  display: flex;
  gap: 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}
.home-hero__legal a:hover { color: #fff; }

.onboarding-block { padding-top: 1rem; }
.onboarding-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: 2rem;
  background: var(--border);
  border: 1px solid var(--border);
}
.onboarding-grid article {
  position: relative;
  min-height: 190px;
  padding: 1.5rem;
  background: #070707;
}
.onboarding-grid article > span {
  display: block;
  margin-bottom: 1.3rem;
  color: var(--red);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
}
.onboarding-grid h3 {
  margin: 0 0 .65rem;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .08em;
}
.onboarding-grid p {
  margin: 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.65;
}

.portal-grid { display: grid; gap: 2.5rem; }
.portal-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.portal-feature-list { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.portal-feature-list > div { background: #090909; padding: 1.35rem; }
.portal-feature-list strong { display: block; margin-bottom: .45rem; color: #fff; }
.portal-feature-list span { color: var(--text-muted); font-size: .9rem; line-height: 1.55; }

.legal-copy { max-width: 820px; }
.legal-copy h2 {
  margin: 2.4rem 0 .8rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .06em;
}
.legal-copy p, .legal-copy li { color: var(--text-muted); line-height: 1.8; }
.legal-copy a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal-copy a:hover { color: var(--red); }
.legal-copy ul { padding-left: 1.3rem; }
.legal-updated { color: rgba(255,255,255,.5)!important; font-size: .82rem; }
.legal-note {
  margin: 1.6rem 0 2.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(225,6,0,.35);
  background: rgba(225,6,0,.07);
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.65;
}

.lead-optional { color: rgba(255,255,255,.55); font-size: .78em; font-weight: 400; }
.lead-privacy-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .75rem;
  align-items: start;
  margin: 1.4rem 0 .5rem;
  max-width: 46rem;
  color: rgba(255,255,255,.76);
  font-size: .82rem;
  line-height: 1.55;
}
.lead-privacy-check input { margin-top: .2rem; width: 17px; height: 17px; accent-color: var(--red); }
.lead-privacy-check a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lead-hp { position: absolute!important; left: -9999px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }

@media (min-width: 768px) {
  .onboarding-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1024px) {
  .onboarding-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: .55rem .9rem; }
  .home-hero__legal { left: 50%; transform: translateX(-50%); bottom: .75rem; white-space: nowrap; }
  .portal-actions .btn { width: 100%; }
  .legal-section { padding-top: 3.5rem; }
}

/* =========================================================
   CARBON CONTENT 2026 — RED / BLACK WEBSITE SYSTEM
   ========================================================= */
:root{
  --cc-red:#ef1b25;
  --cc-red-deep:#b90912;
  --cc-black:#070707;
  --cc-panel:#101010;
  --cc-panel-2:#151515;
  --cc-white:#fff;
  --cc-muted:#a2a2a2;
  --cc-line:rgba(255,255,255,.12);
  --cc-shell:min(1460px,calc(100vw - 48px));
}
body{background:#070707;color:#fff}
body:not(.is-lead-page){padding-top:0}
.site-header{height:76px;background:linear-gradient(to bottom,rgba(4,4,4,.86),rgba(4,4,4,.15));border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(6,6,6,.92);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:blur(14px)}
.header-inner{max-width:none;width:var(--cc-shell);padding:0}
.brand-lockup{gap:10px;min-width:max-content}
.brand-lockup .brand-icon{width:40px;height:40px}
.brand-wordmark{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.brand-wordmark strong{font-family:var(--font-display);font-size:.9rem;letter-spacing:.22em;font-weight:600}
.brand-wordmark small{font-family:var(--font-body);font-size:.57rem;letter-spacing:.38em;color:#fff;font-weight:600}
.nav-desktop{display:flex;gap:1.55rem}
.nav-desktop>a{position:relative;color:#c6c6c6;font-size:.68rem;letter-spacing:.11em}
.nav-desktop>a:after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:2px;background:var(--cc-red);transition:right .25s ease}
.nav-desktop>a:hover:after,.nav-desktop>a.is-active:after{right:0}
.header-social{display:flex}.header-social a{color:#eee}.header-social a:hover{color:var(--cc-red)}
.header-cta{min-width:132px;text-align:center}
.btn.btn-primary{background:linear-gradient(135deg,#f31d27,#cf0711);border:1px solid #ff313a;color:#fff;box-shadow:0 8px 30px rgba(239,27,37,.18)}
.btn.btn-primary:hover{background:#ff2631;transform:translateY(-1px)}
.btn.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.24);color:#fff}
.btn.btn-outline:hover{border-color:var(--cc-red);background:rgba(239,27,37,.08)}

.cc-shell{width:var(--cc-shell);margin:0 auto}
.cc-kicker,.cc-eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;font-weight:700;color:#d2d2d2;margin:0 0 15px;display:flex;align-items:center;gap:10px}
.cc-eyebrow:before{content:"";width:30px;height:2px;background:var(--cc-red);display:inline-block}
.cc-section{padding:82px 0;background:#080808}
.cc-section--tight{padding-top:35px}
.cc-section h2,.cc-page-hero h1,.cc-project-hero h1,.cc-cta h2{font-family:var(--font-serif);font-weight:600;line-height:.98}
.cc-section-head{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(280px,.9fr) auto;align-items:end;gap:28px;margin-bottom:30px}
.cc-section-head h2{font-size:clamp(2.3rem,4vw,4.3rem);margin:0}
.cc-section-head>p{color:var(--cc-muted);max-width:570px;margin:0;line-height:1.7;font-size:.9rem}
.cc-section-head--simple{grid-template-columns:1fr auto}
.cc-text-link{text-transform:uppercase;letter-spacing:.12em;font-size:.69rem;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--cc-red);white-space:nowrap}

.cc-hero{min-height:790px;height:100vh;max-height:960px;position:relative;display:flex;align-items:center;overflow:hidden;background:#050505}
.cc-hero__media,.cc-hero__overlay{position:absolute;inset:0}
.cc-hero__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.78)}
.cc-hero__overlay{background:linear-gradient(90deg,rgba(3,3,3,.95) 0%,rgba(3,3,3,.82) 28%,rgba(3,3,3,.28) 70%,rgba(3,3,3,.58) 100%),linear-gradient(0deg,#070707 0%,transparent 26%)}
.cc-hero__content{position:relative;z-index:2;width:var(--cc-shell);margin:0 auto;padding-top:55px;max-width:1460px}
.cc-hero__content>*{max-width:780px}
.cc-hero h1{font-family:var(--font-serif);font-size:clamp(4rem,7vw,7.2rem);line-height:.84;letter-spacing:-.035em;margin:0 0 28px;font-weight:600}
.cc-hero h1 span{color:var(--cc-red)}
.cc-hero__content>p:not(.cc-kicker){color:#c9c9c9;font-size:clamp(.95rem,1.25vw,1.18rem);line-height:1.65;max-width:650px}
.cc-hero__actions{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}
.cc-play-link{display:flex;align-items:center;gap:11px;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700}.cc-play{width:42px;height:42px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:.65rem;padding-left:2px}

.cc-section--portfolio{background:linear-gradient(180deg,#090909,#070707)}
.cc-category-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}
.cc-category-card{height:255px;position:relative;background-image:var(--cover);background-size:cover;background-position:center;overflow:hidden;border:1px solid rgba(255,255,255,.09);transition:transform .25s,border-color .25s}
.cc-category-card:hover{transform:translateY(-4px);border-color:rgba(239,27,37,.65)}
.cc-category-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.88) 100%)}
.cc-category-card__label{position:absolute;left:14px;right:30px;bottom:17px;font-family:var(--font-serif);font-size:1.35rem;line-height:1}.cc-category-card__arrow{position:absolute;right:14px;bottom:15px;font-size:1.2rem}

.cc-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cc-project-grid--home{grid-template-columns:repeat(4,minmax(0,1fr))}.cc-project-card{position:relative;min-height:340px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#111}.cc-project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.cc-project-card:hover img{transform:scale(1.035)}.cc-project-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.94) 100%)}.cc-project-card__meta,.cc-project-card__title,.cc-project-card__client,.cc-project-card__arrow{position:absolute;z-index:2}.cc-project-card__meta{left:18px;bottom:76px;text-transform:uppercase;letter-spacing:.13em;color:#ddd;font-size:.58rem}.cc-project-card__title{left:18px;right:45px;bottom:38px;font-family:var(--font-serif);font-size:1.65rem;line-height:1}.cc-project-card__client{left:18px;right:45px;bottom:17px;color:#a4a4a4;font-size:.7rem}.cc-project-card__arrow{right:17px;bottom:21px}.cc-video-badge{position:absolute;top:13px;right:13px;z-index:2;background:var(--cc-red);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;padding:6px 9px;border-radius:99px}.cc-project-card--portfolio{min-height:430px}

.cc-services-preview{background:radial-gradient(circle at 10% 0,rgba(239,27,37,.12),transparent 33%),#0b0b0b}.cc-service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cc-service-cards>a{border:1px solid var(--cc-line);background:linear-gradient(145deg,#121212,#0a0a0a);padding:32px;min-height:250px;transition:border-color .25s,transform .25s}.cc-service-cards>a:hover{border-color:var(--cc-red);transform:translateY(-3px)}.cc-service-cards span{color:var(--cc-red);font-weight:800}.cc-service-cards h3{font-family:var(--font-serif);font-size:2rem;margin:42px 0 10px}.cc-service-cards p{color:var(--cc-muted);font-size:.85rem;line-height:1.7;max-width:360px}

.cc-packages-preview{background:#070707}.cc-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cc-price-card{position:relative;border:1px solid var(--cc-line);background:linear-gradient(155deg,#121212,#090909);padding:28px;min-height:100%;display:flex;flex-direction:column}.cc-price-card.is-popular{border-color:var(--cc-red);background:radial-gradient(circle at 85% 0,rgba(239,27,37,.18),transparent 38%),#101010}.cc-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--cc-red);padding:5px 14px;border-radius:99px;text-transform:uppercase;font-size:.55rem;letter-spacing:.15em;font-weight:800;white-space:nowrap}.cc-price-card h3{font-family:var(--font-body);font-size:1rem;margin:0 0 12px}.cc-price{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}.cc-price strong{font-size:2.2rem;color:var(--cc-red)}.cc-price span{color:#aaa;font-size:.73rem}.cc-price-card ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px;color:#c8c8c8;font-size:.78rem;line-height:1.45;flex:1}.cc-price-card li:before{content:"✓";color:var(--cc-red);font-weight:800;margin-right:8px}.cc-price-card .btn{align-self:flex-start}

.cc-cta{padding:85px 0;background:radial-gradient(circle at 80% 50%,rgba(239,27,37,.16),transparent 28%),#090909;border-top:1px solid rgba(255,255,255,.08)}.cc-cta__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.cc-cta h2{font-size:clamp(2.5rem,5vw,5rem);max-width:900px;margin:0}.cc-cta .btn{min-width:160px}

.cc-page-hero{padding:190px 0 95px;min-height:520px;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,rgba(239,27,37,.15),transparent 30%),linear-gradient(120deg,#090909,#050505)}.cc-page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 70%,rgba(255,255,255,.02) 70%)}.cc-page-hero .cc-shell{position:relative;z-index:2}.cc-page-hero h1{font-size:clamp(3.8rem,7vw,7.2rem);max-width:1000px;margin:0 0 24px}.cc-page-hero h1 span{color:var(--cc-red)}.cc-page-hero p:not(.cc-eyebrow){color:#aaa;max-width:720px;font-size:1rem;line-height:1.7}.cc-page-hero--portfolio{background:linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.67)),url('../images/portfolio/club.jpg') center/cover}.cc-page-hero--packages{background:linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.72)),url('../images/lead-welcome-bg.jpg') center/cover}

.cc-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.cc-filter-bar a{border:1px solid var(--cc-line);padding:9px 13px;border-radius:99px;font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:#aaa}.cc-filter-bar a:hover,.cc-filter-bar a.is-active{background:var(--cc-red);color:#fff;border-color:var(--cc-red)}.cc-empty{border:1px solid var(--cc-line);padding:50px;text-align:center;background:#0d0d0d}.cc-empty p{color:var(--cc-muted)}

.cc-project-hero{min-height:72vh;position:relative;display:flex;align-items:flex-end;overflow:hidden}.cc-project-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cc-project-hero__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.08) 65%)}.cc-project-hero__content{position:relative;z-index:2;padding-bottom:65px}.cc-project-hero h1{font-size:clamp(4rem,8vw,8rem);margin:0 0 10px}.cc-project-hero__content>p:last-child{color:#c8c8c8}.cc-project-intro{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;max-width:1100px;margin:0 auto 55px}.cc-project-intro h2{font-size:3.5rem;margin:0}.cc-project-intro>p{color:#b2b2b2;line-height:1.8;margin:0}.cc-video-frame{max-width:1200px;margin:0 auto 25px;aspect-ratio:16/9;background:#000;border:1px solid var(--cc-line)}.cc-video-frame video,.cc-video-frame iframe{width:100%;height:100%;border:0;object-fit:cover}.cc-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:1200px;margin:0 auto}.cc-gallery img{width:100%;height:560px;object-fit:cover;border:1px solid var(--cc-line)}

.cc-packages-page{padding-top:55px}.cc-package-group{margin-bottom:70px}.cc-package-group__head{display:flex;align-items:end;justify-content:space-between;gap:30px;border-bottom:1px solid rgba(239,27,37,.72);padding-bottom:12px;margin-bottom:18px}.cc-package-group__head>div{display:flex;align-items:center;gap:12px}.cc-group-num{display:grid;place-items:center;width:26px;height:26px;border-radius:3px;background:var(--cc-red);font-size:.72rem;font-weight:800}.cc-package-group__head h2{font-family:var(--font-serif);font-size:2.6rem;margin:0}.cc-package-group__head p{color:#aaa;text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;margin:0}.cc-price-grid--photography{grid-template-columns:repeat(5,minmax(0,1fr))}.cc-price-grid--videography{grid-template-columns:repeat(3,minmax(0,1fr))}.cc-price-grid--addons{grid-template-columns:repeat(5,minmax(0,1fr))}.cc-price-grid--photography .cc-price-card,.cc-price-grid--addons .cc-price-card{padding:20px}.cc-price-grid--photography .cc-price strong,.cc-price-grid--addons .cc-price strong{font-size:1.7rem}.cc-price-grid--addons .cc-price-card{min-height:160px}.cc-price-grid--addons .cc-price-card .btn{display:none}.cc-package-note{color:#777;text-align:center;max-width:850px;margin:0 auto;font-size:.78rem;line-height:1.7}

.cc-footer{background:#050505;border-top:1px solid rgba(255,255,255,.08)}.footer-inner{max-width:none;width:var(--cc-shell)}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:35px 0 25px;border-bottom:1px solid var(--cc-line)}.footer-top>p{font-family:var(--font-serif);font-size:2rem;margin:0}.footer-top>p span{color:var(--cc-red)}.footer-contact{justify-content:center}.footer-bottom{align-items:center}

/* Existing internal pages inherit the new brand treatment. */
.page-hero{background:radial-gradient(circle at 80% 10%,rgba(239,27,37,.12),transparent 30%),#080808}.page-hero h1,.section-title{font-family:var(--font-serif)}.section-label{color:var(--cc-red)}

@media(max-width:1200px){
  :root{--cc-shell:min(100% - 34px,1200px)}
  .header-social{display:none}.nav-desktop{gap:1rem}.nav-desktop>a{font-size:.62rem}
  .cc-category-strip{grid-template-columns:repeat(4,1fr)}.cc-category-card{height:240px}.cc-project-grid--home{grid-template-columns:repeat(2,1fr)}
  .cc-price-grid--photography{grid-template-columns:repeat(3,1fr)}.cc-price-grid--addons{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .nav-desktop{display:none}.burger{display:flex}.header-cta{display:none}.brand-wordmark small{display:none}
  .cc-hero{min-height:720px;height:92vh}.cc-hero h1{font-size:clamp(3.5rem,12vw,6rem)}
  .cc-section-head{grid-template-columns:1fr}.cc-section-head--simple{grid-template-columns:1fr auto}.cc-category-strip{grid-template-columns:repeat(2,1fr)}
  .cc-project-grid,.cc-service-cards,.cc-price-grid,.cc-price-grid--photography,.cc-price-grid--videography,.cc-price-grid--addons{grid-template-columns:repeat(2,1fr)}
  .cc-project-intro{grid-template-columns:1fr;gap:20px}.cc-gallery img{height:400px}.footer-top{align-items:flex-start;flex-direction:column}.footer-top>p{font-size:1.6rem}
}
@media(max-width:620px){
  :root{--cc-shell:calc(100% - 28px)}
  .site-header{height:66px}.brand-lockup .brand-icon{width:34px;height:34px}.brand-wordmark strong{font-size:.73rem}.header-inner{width:calc(100% - 28px)}
  .cc-hero{min-height:680px}.cc-hero__overlay{background:linear-gradient(90deg,rgba(3,3,3,.94),rgba(3,3,3,.5)),linear-gradient(0deg,#070707,transparent 35%)}.cc-hero h1{font-size:3.6rem}.cc-hero__content>p:not(.cc-kicker){font-size:.9rem}.cc-section{padding:58px 0}.cc-section-head--simple{grid-template-columns:1fr}.cc-category-strip{grid-template-columns:1fr 1fr}.cc-category-card{height:190px}.cc-category-card__label{font-size:1.12rem}.cc-project-grid,.cc-project-grid--home,.cc-service-cards,.cc-price-grid,.cc-price-grid--photography,.cc-price-grid--videography,.cc-price-grid--addons{grid-template-columns:1fr}.cc-project-card,.cc-project-card--portfolio{min-height:360px}.cc-page-hero{padding:150px 0 65px;min-height:430px}.cc-page-hero h1{font-size:3.8rem}.cc-package-group__head{align-items:flex-start;flex-direction:column}.cc-package-group__head h2{font-size:2.1rem}.cc-gallery{grid-template-columns:1fr}.cc-gallery img{height:auto;aspect-ratio:4/3}.cc-cta__inner{align-items:flex-start;flex-direction:column}.cc-cta h2{font-size:3rem}.footer-contact{align-items:flex-start;gap:8px}.footer-contact .sep{display:none}
}

/* V3 media section labels */
.cc-media-heading{margin:46px 0 18px;max-width:760px}.cc-media-heading h2{margin:.2rem 0 .5rem;font-size:clamp(28px,3vw,44px)}.cc-media-heading p:last-child{color:var(--muted,#a0a0a0);max-width:680px;line-height:1.6}.cc-media-heading--gallery{margin-top:58px}


/* V4: actual Carbon logo lockup */
.brand-lockup--image{display:flex;align-items:center;min-width:max-content}
.brand-full-logo{display:block;width:auto;height:54px;object-fit:contain}
.footer-top .brand-full-logo{height:62px}
@media(max-width:720px){
  .brand-full-logo{height:44px}
  .footer-top .brand-full-logo{height:50px}
}

/* V4: category cards always use real image elements, avoiding blank CSS-background cards */
.cc-category-card__image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease,filter .35s ease;
}
.cc-category-card:hover .cc-category-card__image{transform:scale(1.035)}
.cc-category-card__shade,.cc-category-card__label,.cc-category-card__arrow{z-index:2}
.cc-category-card__shade{pointer-events:none}

/* V4: project videos can be vertical reels, landscape films or square */
.cc-video-frame{
  width:100%;
  transition:max-width .25s ease,aspect-ratio .25s ease,border-radius .25s ease;
}
.cc-video-frame.is-landscape,
.cc-video-frame.is-auto{
  max-width:1200px;
  aspect-ratio:16/9;
  border-radius:0;
}
.cc-video-frame.is-portrait{
  max-width:430px;
  aspect-ratio:9/16;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.4);
}
.cc-video-frame.is-square{
  max-width:720px;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
}
.cc-video-frame video,.cc-video-frame iframe{display:block;background:#000}
@media(max-width:600px){
  .cc-video-frame.is-portrait{max-width:min(92vw,430px);border-radius:18px}
}

/* =========================================================
   V5 MOBILE / IOS SCROLL + EXACT LOGO SAFE PATCH
   ========================================================= */
/* The homepage previously inherited overflow:hidden from the old single-screen hero.
   V5 restores normal page scrolling on iOS/Safari/WhatsApp in-app browsers. */
html:has(body.is-home-hero){
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
body.is-home-hero{
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
body.is-home-hero #main{
  min-height:0;
  overflow:visible;
}

/* Exact Carbon brand artwork extracted from the supplied logo file. */
.brand-lockup--image{flex:0 0 auto}
.brand-full-logo{
  width:auto;
  height:52px;
  max-width:min(245px,42vw);
  object-fit:contain;
  object-position:left center;
}
.footer-top .brand-full-logo{height:58px;max-width:260px}

@media(max-width:767px){
  html,body{overflow-x:hidden}
  body.is-home-hero{position:static}
  .site-header{height:78px}
  .header-inner{min-height:78px}
  .brand-full-logo{height:46px;max-width:190px}
  .cc-hero{
    height:auto;
    min-height:100svh;
    max-height:none;
    padding:108px 0 72px;
    align-items:center;
  }
  .cc-hero__content{padding-top:0}
  .cc-hero h1{font-size:clamp(3.15rem,13.5vw,4.2rem);line-height:.9}
  .cc-hero__actions{gap:18px}
  .cc-section{padding:56px 0}
  .cc-section-head{gap:18px;margin-bottom:26px}
  .cc-section-head>p{font-size:.95rem;line-height:1.65}
  .cc-category-strip{gap:10px}
  .cc-category-card{height:200px}
  .cc-category-card__label{font-size:1.2rem;line-height:1.05}
  .whatsapp-float{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
}

@media(max-width:430px){
  :root{--cc-shell:calc(100% - 28px)}
  .brand-full-logo{height:43px;max-width:170px}
  .cc-hero{padding-top:100px;padding-bottom:64px}
  .cc-hero h1{font-size:clamp(3rem,14vw,3.75rem)}
  .cc-kicker{font-size:.64rem;letter-spacing:.18em}
  .cc-category-card{height:184px}
}