/* ===============================
   FONTS — BrandDisplay (local)
   Add fonts/Satoshi-*.woff2 for custom font
================================ */
@font-face {
  font-family: 'BrandDisplay';
  src: url('./fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BrandDisplay';
  src: url('./fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BrandDisplay';
  src: url('./fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   DESIGN TOKENS (single source)
================================ */
:root {
  --font-display: 'BrandDisplay', sans-serif;
  --font-body: 'BrandDisplay', sans-serif;
  --theme-bg: #000000;
  --theme-text: #ffffff;
  --theme-muted: rgba(255, 255, 255, 0.76);
  --theme-accent: #ed1c51;
  --theme-border: rgba(255, 255, 255, 0.44);
  --theme-header-border: rgba(255, 255, 255, 0.3);
  --theme-overlay: #0a0a0a;
  --theme-overlay-opacity: 0.2;
  --theme-chip-bg: rgba(0, 0, 0, 0.34);
  --theme-about-bg: #ffffff;
  --theme-about-text: #11151c;
  --container-max: 1460px;
}
/* ===============================
   BASE
================================ */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 0.75rem 1rem;
  background: var(--theme-accent);
  color: var(--theme-text);
  text-decoration: none;
  font-family: var(--font-body);
  z-index: 10000;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--theme-text);
  outline-offset: 2px;
}

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

/* ===============================
   LAYOUT — Header
================================ */
.site-header,
#header-outer {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--theme-bg);
  z-index: 9999;
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(14px, 6vw, 88px);
  padding-bottom: 5px;
  height: 62px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}

.header-inner::after {
  content: "";
  position: absolute;
  left: clamp(14px, 6vw, 88px);
  right: clamp(14px, 6vw, 88px);
  bottom: 4px;
  height: 2px;
  background: var(--theme-accent);
  z-index: 1;
  pointer-events: none;
}

.logo-link {
  color: var(--theme-text);
  text-decoration: none;
  font-family: var(--font-display);
  line-height: 1;
  position: relative;
  z-index: 2;
}

.logo-link.logo-wordmark {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;
  width: auto;
  height: auto;
  overflow: visible;
  color: var(--theme-text);
  font-size: clamp(21px, 2.5vw, 34px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.menu-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--theme-text);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.95vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 2;
}

.menu-icon {
  position: relative;
  width: 20px;
  height: 11px;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--theme-accent);
}

.menu-icon::before {
  top: 0;
}

.menu-icon::after {
  bottom: 0;
}

.menu-text {
  line-height: 1;
}

body.explore-open {
  overflow: hidden;
}

.explore-drawer {
  position: fixed;
  inset: 0;
  z-index: 11000;
  pointer-events: none;
  visibility: hidden;
}

.explore-overlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.34);
  opacity: 0;
  transition: opacity 240ms ease;
}

.explore-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(560px, 42vw);
  height: 100%;
  background: #ffffff;
  color: #000000;
  transform: translateX(100%);
  transition: transform 260ms ease;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  box-sizing: border-box;
}

.explore-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.explore-panel-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  color: #000000;
}

.explore-close {
  border: 0;
  background: transparent;
  color: #000000;
  font-family: var(--font-body);
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}

.explore-nav {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.explore-social {
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  gap: 12px;
}

.explore-social-link {
  width: 70px;
  height: 70px;
  border-radius: 0;
  border: 0;
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.explore-social-link::after {
  content: none;
}

.explore-social-link svg {
  width: 48px;
  height: 48px;
}

.explore-social-link:hover {
  color: var(--theme-accent);
}

.explore-social-link:hover::after {
  transform: none;
}

.explore-item {
  position: relative;
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--theme-accent);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(24px, 2.1vw, 34px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000000;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .explore-item {
    color: transparent;
    background-image:
      linear-gradient(90deg, var(--theme-accent), var(--theme-accent)),
      linear-gradient(90deg, #000000, #000000);
    background-repeat: no-repeat;
    background-size: 0% 100%, 100% 100%;
    background-position: 0 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-size 240ms ease;
  }

  .explore-item:hover {
    background-size: 100% 100%, 100% 100%;
  }
}

body.explore-open .explore-drawer {
  pointer-events: auto;
  visibility: visible;
}

body.explore-open .explore-overlay {
  opacity: 1;
}

body.explore-open .explore-panel {
  transform: translateX(0);
}
.hero {
  min-height: 980px;
  padding-top: 170px;
  padding-bottom: 0px;
  background: var(--theme-bg);
  position: relative;
  overflow: hidden;
}
.hero::after {
  display: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  text-align: center;
  padding: 0 20px;
}
.hero-title {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 700;
  font-size: clamp(60px, 13vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--theme-text);
  text-align: center;
  position: relative;
  z-index: 2;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-media-wrap {
  position: relative;
  width: min(1400px, calc(100vw - 80px));
  aspect-ratio: 2.11 / 1;
  margin-top: -64px;
  margin-bottom: 20px;
  overflow: hidden;
}
.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  background: var(--theme-overlay);
  opacity: var(--theme-overlay-opacity);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ===============================
   SECTION — About
================================ */
.about {
  padding: 80px 40px;
  background: var(--theme-bg);
  text-align: center;
}

.about#about-us {
  scroll-margin-top: 78px;
}
.about,
.about * {
  font-family: 'BrandDisplay', sans-serif !important;
  color: var(--theme-text);
}
.about-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.about-rotating{
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  margin: 30px 0 40px;
}
.about-inner > p:first-of-type {
  font-weight: 500;
}
.about-eyebrow {
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 40px;
  opacity: 0.7;
}
.about-title {
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.05;
  margin-bottom: 50px;
}
/* ROTATING WORDS */

.rotating-wrapper {
  display: inline;
}

.rotating-word {
  display: inline-block;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;

  font-family: inherit;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: absolute;
  left: 0;
  white-space: normal;
}

.rotating-word.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.about-text {
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  max-width: 1000px;
  margin: 0 auto 60px auto;
}
.about-team {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 60px 0 80px 0;
  flex-wrap: wrap;
}
.team-member {
  text-align: center;
}
.team-member img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 18px;
}
.team-member h4 {
  font-weight: 600;
  margin-bottom: 6px;
}
.team-member span {
  font-size: 14px;
  opacity: 0.7;
}
.about-button,
.service-enquire-button {
  display: inline-block;
  padding: 14px 40px;
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.28s ease, border-color 0.28s ease;
}
.about-button {
  margin-bottom: 100px;
}
.service-enquire-button {
  margin-top: 18px;
}
.about-button::after,
.service-enquire-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
  z-index: -1;
}
.about-button:hover,
.service-enquire-button:hover {
  color: var(--theme-text);
  border-color: var(--theme-accent);
}
.about-button:hover::after,
.service-enquire-button:hover::after {
  transform: scaleX(1);
}
.about-divider {
  width: 1px;
  height: 120px;
  background: var(--theme-text);
  margin: 0 auto;
  transform: scaleY(0);
  transform-origin: top;
  animation: dividerGrow 1.2s ease forwards;
}
@keyframes dividerGrow {
  to {
    transform: scaleY(1);
  }
}
@media (max-width: 1100px) {
  .hero {
    min-height: 980px;
    padding-top: 124px;
  }
  .hero-media-wrap {
    width: min(1430px, calc(100vw - 48px));
    margin-top: -30px;
  }
}
/* ===============================
   SERVICES SECTION
================================ */

.services {
  background: var(--theme-bg);
  padding: 60px 0 100px 0;
}

.services-inner {
  width: 100%;
}

.services-header {
  text-align: center;
  margin-bottom: 100px;
}

.services-eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  opacity: 0.6;
  margin-bottom: 20px;
}

.services-title {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.service-content h3 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
}

.service-content p {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--theme-text);
  opacity: 1;
}

.service-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

@media (max-width: 768px) {
  .header-inner {
    padding-left: clamp(12px, 4.2vw, 20px);
    padding-right: clamp(12px, 4.2vw, 20px);
    padding-bottom: 8px;
    height: 60px;
  }
  .header-inner::after {
    left: clamp(12px, 4.2vw, 20px);
    right: clamp(12px, 4.2vw, 20px);
    bottom: 5px;
  }
  .logo-link.logo-wordmark {
    font-size: clamp(16px, 5.2vw, 22px);
    letter-spacing: 0.05em;
  }
  .menu-text {
    font-size: clamp(14px, 4.6vw, 19px);
    letter-spacing: 0.05em;
  }
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    width: 18px;
  }
  .menu-icon {
    height: 10px;
  }
  .hero {
    min-height: auto;
    height: auto;
    padding-top: 130px;
    padding-bottom: 20px;
  }
  .hero-title {
    font-size: clamp(60px, 13vw, 200px);
    line-height: 0.85;
    margin-bottom: -18px;
    position: relative;
    z-index: 3;
  }
  .hero-media-wrap {
    width: 95%;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    position: relative;
    z-index: 1;
  }
  .about {
    padding-top: 70px;
  }
  .about .about-title {
    font-size: clamp(34px, 8vw, 42px);
    line-height: 1.15;
  }
  .about p {
    font-size: 17px;
    line-height: 1.6;
  }
}
/* ================================= */
/* SERVICES – MOBILE + DESKTOP SAFE */
/* ================================= */

/* ---------- MOBILE SLIDER ---------- */

@media (max-width: 768px) {

  .about-team {
    gap: 32px;
    margin: 40px 0 48px 0;
  }

  .about-button {
    margin-bottom: 44px;
  }

  .about-divider {
    height: 72px;
  }

  .services {
    padding-top: 24px;
    position: relative;
  }

  .services::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 80px;
    width: 1px;
    height: 110px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, var(--theme-accent) 100%);
    pointer-events: none;
    z-index: 2;
  }

  .services-desktop {
    display: none;
  }

  .services-mobile {
    display: block;
  }

  .services-mobile-eyebrow {
    display: block;
    width: calc(100% - 8vw);
    margin: 0 auto;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 2px;
    opacity: 0.7;
    text-align: center;
  }

  .services-mobile-eyebrow::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.5px;
    margin: 12px auto 0;
    background: var(--theme-accent);
  }

  .services-mobile-title {
    margin: 24px auto 36px;
    width: calc(100% - 8vw);
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.15;
    text-align: center;
  }

  .services-list {
    display: flex;
    flex-direction: row;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-left: 4vw;
    padding-right: 4vw;
    scroll-padding-left: 4vw;
    scroll-padding-right: 4vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .services-list::-webkit-scrollbar {
    display: none;
  }

  .service-item {
    flex: 0 0 92%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-snap-align: center;
    text-decoration: none;
    color: inherit;
  }

  .service-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
  }

  .service-content h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.004em;
  }

  .service-content p {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.48;
    font-weight: 400;
    color: var(--theme-text);
    opacity: 1;
  }

  .service-enquire-button {
    margin-top: 18px;
  }

}


/* ---------- DESKTOP STICKY ENGINE ---------- */

@media (min-width: 769px) {

  .services-desktop {
    display: block;
    background: var(--theme-bg);
    height: 400vh;
    position: relative;
  }

  .services-mobile {
    display: none;
  }

  .services-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0 0 0 clamp(24px, 3vw, 48px);
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 48vw);
    gap: clamp(28px, 3.5vw, 56px);
    align-items: center;
  }

  .services-text {
    position: relative;
    z-index: 3;
    align-self: center;
    justify-self: stretch;
    display: flex;
    justify-content: center;
    --desktop-text-lock-shift: 0px;
    transform: translateY(var(--desktop-text-lock-shift));
  }

  .services-text-inner {
    max-width: 390px;
    transition: opacity 260ms ease;
  }

  .services-text-inner.is-changing {
    opacity: 0;
  }

  .service-heading {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(30px, 3.1vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .service-description {
    margin: 22px 0 0;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--theme-text);
  }

  .service-enquire-button {
    margin-top: 24px;
  }

  .services-images {
    position: relative;
    height: 100vh;
    width: min(48vw, 900px);
    justify-self: end;
    border-radius: 14px 0 0 14px;
    overflow: hidden;
    background: var(--theme-bg);
  }

  .service-image-panel {
    position: absolute;
    inset: -8vh 0;
    background-size: cover;
    background-position: center;
    will-change: clip-path, transform;
    transform: translateY(calc(var(--shift, 0) * 1%));
    clip-path: inset(0 0 calc(var(--cover, 0) * 1%) 0);
  }

  .service-image-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - (var(--cover, 0) * 1%));
    height: clamp(44px, 7vh, 72px);
    transform: translateY(-50%);
    background: var(--theme-bg);
    opacity: var(--bar-opacity, 0);
    pointer-events: none;
  }

}

/* ===============================
   HERO — Ring + viewport
================================ */
.hero {
  --header-h: 62px;
  --hero-gap: 14px;
  padding-top: var(--hero-gap) !important;
  min-height: calc(100vh - var(--header-h));
  height: calc(100vh - var(--header-h));
  position: relative;
  z-index: 1;
  overflow: visible;
}

.hero-content {
  position: relative;
  padding-top: 0;
  height: 100%;
}

.hero-title--ring {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-16px);
  width: min(
    620px,
    calc((100vw - clamp(88px, 8vw, 160px)) * 0.52),
    calc((100vh - var(--header-h) - clamp(28px, 4vh, 48px)) * 0.92)
  );
  height: min(
    620px,
    calc((100vw - clamp(88px, 8vw, 160px)) * 0.52),
    calc((100vh - var(--header-h) - clamp(28px, 4vh, 48px)) * 0.92)
  );
  margin: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-ring-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-ring-svg text {
  fill: var(--theme-text);
  font-family: "BrandDisplay", sans-serif;
  font-size: clamp(26px, 2.5vw, 40px);
  letter-spacing: 0.035em;
}

.hero-ring-text--mobile {
  display: none;
}

.hero-ring-svg .word-circle-svg,
.word-circle {
  color: var(--theme-accent) !important;
  fill: var(--theme-accent);
}

.logo-link.logo-wordmark,
.menu-link,
.menu-text,
.service-heading,
.service-content h3 {
  color: var(--theme-text) !important;
}

.hero-media-wrap {
  margin-top: 0 !important;
  position: fixed !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(-16px);
  width: min(
    1240px,
    calc(100vw - clamp(88px, 8vw, 160px)),
    calc((100vh - var(--header-h) - clamp(28px, 4vh, 48px)) * 16 / 9)
  );
  height: auto !important;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--header-h) - clamp(28px, 4vh, 48px)) !important;
  z-index: 1;
}

.hero video {
  object-position: center center;
}

.hero-scroll-cue {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: 8px !important;
  z-index: 5 !important;
  width: 20px;
  height: 24px;
  pointer-events: none;
  opacity: 0.9;
  animation: hero-scroll-burst 5s ease-in-out infinite;
}

.hero-scroll-cue::before,
.hero-scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.2px solid var(--theme-accent);
  border-bottom: 2.2px solid var(--theme-accent);
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
}

.hero-scroll-cue::before {
  top: 1px;
  opacity: 0.96;
}

.hero-scroll-cue::after {
  top: 9px;
  opacity: 0.8;
}

@keyframes hero-scroll-burst {
  0%, 8% {
    transform: translate(-50%, 0);
    opacity: 0.75;
  }
  13% {
    transform: translate(-50%, 8px);
  }
  18% {
    transform: translate(-50%, 0);
  }
  23% {
    transform: translate(-50%, 7px);
  }
  28% {
    transform: translate(-50%, 0);
  }
  33% {
    transform: translate(-50%, 8px);
    opacity: 0.85;
  }
  40%, 100% {
    transform: translate(-50%, 0);
    opacity: 0.62;
  }
}

.about {
  position: relative;
  z-index: 7;
  background: var(--theme-about-bg) !important;
  padding-top: 44px !important;
}

.about,
.about * {
  color: var(--theme-about-text) !important;
}

.about .about-title,
.about .about-eyebrow {
  color: var(--theme-about-text) !important;
}

.about .about-eyebrow {
  display: block;
  margin-bottom: 16px;
}

.about .about-eyebrow::after {
  content: "";
  display: block;
  width: min(100%, 980px);
  height: 1.5px;
  margin: 12px auto 0;
  background: var(--theme-accent);
}

.about .team-member span {
  color: var(--theme-about-text) !important;
  opacity: 1 !important;
}

.about .rotating-word {
  color: var(--theme-accent) !important;
}

.about-button {
  color: var(--theme-about-text) !important;
  border-color: var(--theme-about-text) !important;
}

.about-button::after {
  background: var(--theme-accent) !important;
}

.about-button:hover {
  color: var(--theme-text) !important;
}

.about-divider {
  background: linear-gradient(180deg, var(--theme-bg), var(--theme-accent)) !important;
}

.services,
.services-desktop,
.services-mobile {
  position: relative;
  z-index: 6;
  background: var(--theme-bg) !important;
}

.services#services-section {
  scroll-margin-top: 0;
}

.contact-reveal-host {
  position: relative;
  z-index: 7;
}

.contact-reveal-stack {
  position: relative;
}

.services-reveal-host {
  position: relative;
  z-index: 6;
  min-height: var(--services-host-height, auto);
}

@media (min-width: 769px) {
  .services-reveal-host {
    margin-top: -32vh;
    padding-top: 32vh;
    min-height: var(--services-host-height, 400vh);
  }

  body.services-reveal-active .services {
    position: fixed !important;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    clip-path: inset(calc((1 - var(--services-reveal, 0)) * 100%) 0 0 0);
    -webkit-clip-path: inset(calc((1 - var(--services-reveal, 0)) * 100%) 0 0 0);
  }

  body.services-reveal-complete .services {
    position: relative !important;
    inset: auto;
    clip-path: none;
    -webkit-clip-path: none;
    pointer-events: auto;
  }
}

.service-image-panel::after {
  background: var(--theme-bg) !important;
}

.section-photo-divider,
.contact-us {
  display: none;
}

.section-photo-divider {
  overflow: hidden;
}

.contact-us {
  overflow: hidden;
  isolation: isolate;
}

.contact-us-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.contact-us-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-us-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(110% 85% at 18% 32%, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.78) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.contact-us-inner {
  position: relative;
  z-index: 2;
}

.contact-faq-section {
  position: relative;
  z-index: 7;
  background: #ffffff;
  padding: 14px 0 44px;
}

.contact-faq-wrap {
  width: calc(100% - 10vw);
  max-width: 430px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .services-desktop .services-text-inner {
    max-width: 460px;
  }

  .services-desktop .service-heading {
    max-width: 16ch;
    font-size: clamp(26px, 2.5vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.006em;
    font-weight: 600;
    display: block;
    overflow: visible;
    text-wrap: balance;
    margin: 0 0 16px;
  }

  .services-desktop .service-description {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.44;
    letter-spacing: 0.003em;
    margin: 0;
    max-width: 33ch;
  }

  .section-photo-divider {
    display: block;
    width: 100%;
    background: var(--theme-bg);
    position: relative;
    z-index: 7;
  }

  .section-photo-divider img {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 520px);
    object-fit: cover;
  }

  .contact-us {
    display: block;
    background: transparent;
    position: relative;
    z-index: 7;
    padding: clamp(56px, 9vw, 124px) clamp(24px, 10vw, 132px) clamp(72px, 10vw, 140px);
  }

  .contact-us-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .contact-us-desktop-copy {
    display: block;
  }

  .contact-us-mobile-copy {
    display: none;
  }

  .contact-us .contact-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .contact-us .contact-desktop-main {
    text-align: center;
  }

  .contact-us .contact-desktop-actions {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.58));
    backdrop-filter: blur(4px);
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-eyebrow {
    display: block;
    width: min(100%, 760px);
    max-width: none;
    margin: 0 auto;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 2px;
    opacity: 0.7;
    text-align: center;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-eyebrow::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.5px;
    margin: 12px auto 0;
    background: var(--theme-accent);
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-title {
    width: min(100%, 760px);
    margin: 26px 0 0;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 700;
    font-size: clamp(44px, 5.6vw, 72px);
    line-height: 1.04;
    letter-spacing: 0.008em;
    text-align: center;
    color: var(--theme-text);
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-note {
    width: min(100%, 720px);
    max-width: none;
    margin: 24px 0 0;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 500;
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.5;
    color: var(--theme-text);
    opacity: 0.9;
    text-align: center;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-channels {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contact-us .contact-us-desktop-copy .contact-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: var(--theme-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 180ms ease, background-color 180ms ease;
  }

  .contact-us .contact-us-desktop-copy .contact-channel:hover {
    border-color: rgba(237, 28, 81, 0.9);
    background: rgba(237, 28, 81, 0.12);
  }

  .contact-us .contact-us-desktop-copy .contact-channel-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(237, 28, 81, 0.2);
    border: 1px solid rgba(237, 28, 81, 0.7);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-email {
    width: 100%;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    gap: 10px;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-email input,
  .contact-us .contact-us-desktop-copy .contact-mobile-email textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--theme-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.42;
    padding: 12px 13px;
    box-sizing: border-box;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-email textarea {
    resize: vertical;
    min-height: 104px;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-email input::placeholder,
  .contact-us .contact-us-desktop-copy .contact-mobile-email textarea::placeholder {
    color: rgba(255, 255, 255, 0.62);
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-email button {
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-email button:hover {
    border-color: var(--theme-accent);
    background: var(--theme-accent);
    color: var(--theme-bg);
  }

  .contact-us .contact-us-desktop-copy .contact-mobile-title,
  .contact-us .contact-us-desktop-copy .contact-mobile-note {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-us h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(40px, 6.4vw, 78px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.02em;
    color: #ed1c51;
  }

  .contact-us p {
    margin: 24px 0 0;
    max-width: 46ch;
    font-size: 22px;
    line-height: 1.55;
    color: var(--theme-text);
  }

  .contact-us-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    min-width: 260px;
    min-height: 58px;
    padding: 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: var(--theme-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
  }

  .contact-us-link:hover {
    border-color: var(--theme-accent);
    background: var(--theme-accent);
    color: var(--theme-bg);
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .contact-us {
    padding: clamp(56px, 8vw, 88px) clamp(20px, 6vw, 56px) clamp(64px, 8vw, 96px);
  }

  .contact-us .contact-desktop-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-us .contact-desktop-actions {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .about#about-us {
    scroll-margin-top: 60px;
  }

  body {
    --header-h: 60px;
  }

  .menu-text {
    display: none;
  }

  .header-inner {
    height: 60px;
    padding-left: clamp(12px, 4.2vw, 20px);
    padding-right: clamp(12px, 4.2vw, 20px);
    padding-bottom: 8px;
  }

  .header-inner::after {
    left: clamp(12px, 4.2vw, 20px);
    right: clamp(12px, 4.2vw, 20px);
    bottom: 5px;
  }

  /* Sticky stack (SOMA-style): Hero → About → Services each stick and next scrolls over. No JS needed for stacking. */
  .hero {
    --header-h: 60px;
    --hero-gap: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: calc(100vh - var(--header-h));
    height: calc(100vh - var(--header-h));
    padding-bottom: 0 !important;
  }

  .hero-title--ring {
    position: fixed !important;
    top: calc(50% + (var(--header-h) / 2));
    width: var(--mobile-ring-size, min(88vw, 500px));
    height: var(--mobile-ring-size, min(88vw, 500px));
    transform: translate(-50%, -50%);
    transition: opacity 180ms ease;
  }

  .hero-ring-svg text {
    font-size: clamp(20px, 4.8vw, 30px);
    letter-spacing: 0.025em;
  }

  .hero-ring-text--desktop {
    display: none;
  }

  .hero-ring-text--mobile {
    display: block;
  }

  .hero-media-wrap {
    position: fixed !important;
    left: 50%;
    top: calc(50% + (var(--header-h) / 2)) !important;
    width: clamp(560px, 170vw, 1100px);
    margin-top: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - var(--header-h) - 72px) !important;
    transform: translate(-50%, -50%);
    transition: opacity 180ms ease;
  }

  body.hero-underlay-complete .hero-media-wrap,
  body.hero-underlay-complete .hero-scroll-cue {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .hero-scroll-cue {
    bottom: 6px !important;
  }

  /* Mobile: Hero sticky so About scrolls over video; About and Services in normal flow for reliable scroll. */
  .about-reveal-host {
    position: relative;
    margin-top: 56px;
  }

  .about {
    padding-top: 8px !important;
  }

  .about-rotating {
    font-size: clamp(33px, 6vw, 38px);
  }

  .about-rotating .rotating-wrapper {
    display: block;
    margin-top: 6px;
    min-height: 1.35em;
  }

  .about-rotating .rotating-word {
    white-space: nowrap;
  }

  .services-reveal-host {
    position: relative;
  }

  body.services-reveal-active .services {
    position: fixed !important;
    left: 0;
    right: 0;
    top: var(--header-h);
    bottom: 0;
    z-index: 6;
    pointer-events: auto;
    clip-path: inset(calc((1 - var(--services-reveal, 0)) * 100%) 0 0 0);
    -webkit-clip-path: inset(calc((1 - var(--services-reveal, 0)) * 100%) 0 0 0);
  }

  body.services-reveal-complete .services {
    position: relative !important;
    inset: auto;
    clip-path: none;
    -webkit-clip-path: none;
    pointer-events: auto;
  }

  .services {
    min-height: calc(100vh - var(--header-h));
    padding-top: 96px !important;
    padding-bottom: 18px !important;
  }

  .section-photo-divider {
    display: block;
    width: 100%;
    background: var(--theme-bg);
    position: relative;
    z-index: 7;
  }

  .section-photo-divider img {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 520px);
    object-fit: cover;
  }

  .contact-us {
    display: block;
    background: transparent;
    position: relative;
    z-index: 7;
    padding: 34px 0 56px;
  }

  .contact-reveal-host {
    margin-top: 0;
    padding-top: 0;
  }

  .contact-us-inner {
    width: 100%;
  }

  .contact-us-desktop-copy {
    display: none;
  }

  .contact-us-mobile-copy {
    display: block;
  }

  .contact-mobile-eyebrow {
    display: block;
    width: calc(100% - 8vw);
    margin: 0 auto;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 2px;
    opacity: 0.7;
    text-align: center;
  }

  .contact-mobile-eyebrow::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.5px;
    margin: 12px auto 0;
    background: var(--theme-accent);
  }

  .contact-mobile-title {
    width: calc(100% - 8vw);
    margin: 24px auto 0;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.15;
    text-align: center;
    color: var(--theme-text);
  }

  .contact-mobile-note {
    width: calc(100% - 8vw);
    margin: 18px auto 0;
    font-family: 'BrandDisplay', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.58;
    text-align: center;
    color: var(--theme-text);
    opacity: 0.9;
  }

  .contact-mobile-channels {
    width: calc(100% - 8vw);
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contact-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: var(--theme-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.03);
  }

  .contact-channel-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(237, 28, 81, 0.2);
    border: 1px solid rgba(237, 28, 81, 0.7);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .contact-mobile-email {
    width: calc(100% - 8vw);
    margin: 16px auto 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    gap: 10px;
  }

  .contact-mobile-email input,
  .contact-mobile-email textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--theme-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 13px;
    box-sizing: border-box;
  }

  .contact-mobile-email textarea {
    resize: vertical;
    min-height: 92px;
  }

  .contact-mobile-email input::placeholder,
  .contact-mobile-email textarea::placeholder {
    color: rgba(255, 255, 255, 0.62);
  }

  .contact-mobile-email button {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* CONTACT REWORK */

.contact-content {
  width: 100%;
}

.contact-us .contact-kicker {
  display: block;
  width: calc(100% - 8vw);
  margin: 0 auto;
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 2px;
  opacity: 0.7;
  text-align: center;
}

.contact-us .contact-kicker::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  margin: 12px auto 0;
  background: var(--theme-accent);
}

.contact-us .contact-headline {
  width: calc(100% - 8vw);
  margin: 24px auto 0;
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.15;
  text-align: center;
  color: var(--theme-text);
}

.contact-us .contact-note {
  width: calc(100% - 8vw);
  margin: 18px auto 0;
  font-family: 'BrandDisplay', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.58;
  text-align: center;
  color: var(--theme-text);
  opacity: 0.9;
}

.contact-us .contact-icon-row {
  width: calc(100% - 8vw);
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.contact-us .contact-icon-button {
  width: 56px;
  height: 56px;
  border-radius: 0;
  border: 0;
  color: var(--theme-text);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: visible;
  z-index: 1;
  transition: color 220ms ease, transform 180ms ease;
}

.contact-us .contact-icon-button::after {
  content: none;
}

.contact-us .contact-icon-button svg {
  width: 24px;
  height: 24px;
  display: block;
}

.contact-us .contact-icon-button:hover {
  color: var(--theme-accent);
  transform: translateY(-1px);
}

.contact-us .contact-icon-button:hover::after {
  transform: none;
}

.contact-us .contact-lower-grid {
  width: calc(100% - 10vw);
  max-width: 430px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.contact-us .contact-faq-inline {
  display: none;
}

.contact-us .contact-lower-grid > * {
  min-width: 0;
}

.contact-us .contact-mobile-email {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 10px;
}

.contact-us .contact-mobile-email #contact-name {
  grid-column: 1;
}

.contact-us .contact-mobile-email #contact-email {
  grid-column: 2;
}

.contact-us .contact-mobile-email #contact-message,
.contact-us .contact-mobile-email button {
  grid-column: 1 / -1;
}

.contact-us .contact-mobile-email input,
.contact-us .contact-mobile-email textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(237, 28, 81, 0.92);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--theme-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  padding: 13px 14px;
  box-sizing: border-box;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.contact-us .contact-mobile-email textarea {
  resize: vertical;
  min-height: 118px;
}

.contact-us .contact-mobile-email input::placeholder,
.contact-us .contact-mobile-email textarea::placeholder {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-weight: 500;
}

.contact-us .contact-mobile-email input:focus,
.contact-us .contact-mobile-email textarea:focus {
  outline: none;
  border-bottom-color: var(--theme-accent);
  background: rgba(255, 255, 255, 0.24);
}

.contact-us .contact-mobile-email button {
  min-height: 0;
  width: fit-content;
  justify-self: start;
  padding: 14px 40px;
  border: 1px solid var(--theme-border);
  border-radius: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 220ms ease, border-color 220ms ease;
}

.contact-us .contact-mobile-email button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
  z-index: -1;
}

.contact-us .contact-faq,
.contact-faq-section .contact-faq {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

.contact-faq-section .contact-faq-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.contact-us .contact-faq h3,
.contact-faq-section .contact-faq h3 {
  margin: 0 0 8px;
  font-family: 'BrandDisplay', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  text-align: center;
}

.contact-us .contact-faq details,
.contact-faq-section .contact-faq details {
  border-top: 0;
  padding: 10px 0;
}

.contact-us .contact-faq details:first-of-type,
.contact-faq-section .contact-faq details:first-of-type {
  border-top: 0;
}

.contact-us .contact-faq summary,
.contact-faq-section .contact-faq summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: #000000;
  list-style: none;
}

.contact-us .contact-faq summary::-webkit-details-marker,
.contact-faq-section .contact-faq summary::-webkit-details-marker {
  display: none;
}

.contact-us .contact-faq p,
.contact-faq-section .contact-faq p {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #000000;
  opacity: 1;
}

.contact-us .contact-faq ul,
.contact-faq-section .contact-faq ul {
  margin: 8px 0 0 0;
  padding-left: 18px;
}

.contact-us .contact-faq li,
.contact-faq-section .contact-faq li {
  margin: 4px 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #000000;
  opacity: 1;
}

@media (min-width: 769px) {
  .contact-us .contact-kicker {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    font-size: 13px;
  }

  .contact-us .contact-headline {
    font-size: clamp(44px, 5.6vw, 72px);
    line-height: 1.04;
    width: min(100%, 980px);
  }

  .contact-us .contact-note {
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.5;
    width: min(100%, 900px);
  }

  .contact-us .contact-icon-row {
    width: min(100%, 760px);
    justify-content: space-between;
    gap: 18px;
  }

  .contact-us .contact-icon-button {
    width: 70px;
    height: 70px;
  }

  .contact-us .contact-icon-button svg {
    width: 48px;
    height: 48px;
  }

  .contact-us .contact-icon-button:hover::after,
  .contact-us .contact-mobile-email button:hover::after {
    transform: scaleX(1);
  }

  .contact-us .contact-mobile-email button:hover {
    border-color: var(--theme-accent);
  }

  .contact-us .contact-lower-grid {
    width: min(100%, 980px);
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: initial;
    gap: 26px;
    align-items: start;
  }

  .contact-us .contact-mobile-email {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding: 0;
  }

  .contact-us .contact-mobile-email textarea {
    min-height: 390px;
  }

  .contact-us .contact-faq-inline {
    display: block;
    color: var(--theme-text);
    border: 0;
    background: transparent;
    padding: 0;
  }

  .contact-us .contact-faq-inline h3 {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 30px;
    font-weight: 700;
    color: var(--theme-text);
    text-align: center;
  }

  .contact-us .contact-faq-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 0;
  }

  .contact-us .contact-faq-inline-column details {
    border-top: 0;
    padding: 10px 0;
  }

  .contact-us .contact-faq-inline-column details:first-of-type {
    border-top: 0;
  }

  .contact-us .contact-faq-inline-column summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--theme-text);
  }

  .contact-us .contact-faq-inline-column summary::-webkit-details-marker {
    display: none;
  }

  .contact-us .contact-faq-inline-column p {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
  }

  .contact-us .contact-faq-inline-column ul {
    margin: 8px 0 0;
    padding-left: 18px;
  }

  .contact-us .contact-faq-inline-column li {
    margin: 4px 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
  }

  .contact-us .contact-faq-inline-column details:hover > summary,
  .contact-us .contact-faq-inline-column details[open] > summary {
    color: var(--theme-accent);
  }

  .contact-us .contact-faq,
  .contact-faq-section .contact-faq {
    min-height: 100%;
    padding: 16px;
  }

  .contact-us .contact-faq summary,
  .contact-faq-section .contact-faq summary {
    padding: 2px 0;
    white-space: normal;
    line-height: 1.4;
    transition: color 220ms ease;
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .contact-us .contact-faq summary,
    .contact-faq-section .contact-faq summary {
      color: transparent;
      background-image:
        linear-gradient(90deg, var(--theme-accent), var(--theme-accent)),
        linear-gradient(90deg, var(--theme-text), var(--theme-text));
      background-repeat: no-repeat;
      background-size: 0% 100%, 100% 100%;
      background-position: 0 0, 0 0;
      -webkit-background-clip: text;
      background-clip: text;
      transition: background-size 240ms ease;
    }

    .contact-faq-section .contact-faq summary {
      background-image:
        linear-gradient(90deg, var(--theme-accent), var(--theme-accent)),
        linear-gradient(90deg, #111111, #111111);
    }

    .contact-us .contact-faq details:hover > summary,
    .contact-us .contact-faq details[open] > summary,
    .contact-faq-section .contact-faq details:hover > summary,
    .contact-faq-section .contact-faq details[open] > summary {
      background-size: 100% 100%, 100% 100%;
    }
  }

  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .contact-us .contact-faq details:hover > summary,
    .contact-us .contact-faq details[open] > summary,
    .contact-faq-section .contact-faq details:hover > summary,
    .contact-faq-section .contact-faq details[open] > summary {
      color: var(--theme-accent);
    }
  }

  .contact-faq-section {
    display: none;
  }

  .contact-faq-wrap {
    width: min(100%, 980px);
    max-width: none;
  }

  .contact-faq-section .contact-faq-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 38px;
  }

  .contact-faq-section .contact-faq-column details:first-of-type {
    border-top: 0;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .contact-us .contact-lower-grid {
    width: min(100%, 980px);
    max-width: none;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-us .contact-mobile-email {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .contact-us .contact-mobile-email textarea {
    min-height: 240px;
  }

  .contact-us .contact-faq-inline {
    display: block;
  }

  .contact-us .contact-faq-inline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  .contact-us .contact-faq-inline-column p {
    font-size: 15px;
  }

  .contact-us .contact-faq-inline-column li {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .contact-us .contact-icon-button {
    width: 52px;
    height: 52px;
  }

  .contact-us .contact-icon-button svg {
    width: 34px;
    height: 34px;
  }

  .explore-panel {
    width: 100vw;
    max-width: none;
    padding: 18px 18px 22px;
  }

  .explore-panel-head h2 {
    font-size: 22px;
  }

  .explore-item {
    font-size: 22px;
    padding: 10px 0;
  }

  .explore-social {
    gap: 10px;
  }

  .explore-social-link {
    width: 70px;
    height: 70px;
  }

  .explore-social-link svg {
    width: 48px;
    height: 48px;
  }

  .contact-us .contact-faq details[open] > summary,
  .contact-faq-section .contact-faq details[open] > summary {
    color: var(--theme-accent);
  }

  .about-button:active::after,
  .about-button:focus-visible::after,
  .service-enquire-button:active::after,
  .service-enquire-button:focus-visible::after,
  .contact-us .contact-mobile-email button:active::after,
  .contact-us .contact-mobile-email button:focus-visible::after,
  .contact-us .contact-icon-button:active::after,
  .contact-us .contact-icon-button:focus-visible::after {
    transform: scaleX(1);
  }

  .about-button:active,
  .about-button:focus-visible,
  .service-enquire-button:active,
  .service-enquire-button:focus-visible,
  .contact-us .contact-mobile-email button:active,
  .contact-us .contact-mobile-email button:focus-visible,
  .contact-us .contact-icon-button:active,
.contact-us .contact-icon-button:focus-visible {
    border-color: var(--theme-accent);
    color: var(--theme-text);
  }
}

/* FOOTER */

.site-footer {
  background: #000000;
  border-top: 0;
  padding: 20px 0 28px;
}

.footer-inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 clamp(14px, 6vw, 88px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: end;
}

.footer-contact {
  min-width: 0;
  width: 100%;
}

.footer-divider {
  width: 100%;
  height: 2px;
  background: var(--theme-accent);
  margin: 0 0 14px;
}

.footer-address,
.footer-hours {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 34px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--theme-text);
}

.footer-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-word-circle {
  color: var(--theme-accent);
}

.footer-hours {
  margin-top: 12px;
  color: var(--theme-text);
}

.footer-contact-links {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-link {
  color: var(--theme-text);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 34px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  transition: color 220ms ease;
}

.footer-link:hover {
  color: var(--theme-accent);
}

.footer-social {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-social-link {
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 0;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.footer-social-link::after {
  content: none;
}

.footer-social-link svg {
  width: 42px;
  height: 42px;
  display: block;
}

.footer-social-link:hover {
  color: var(--theme-accent);
}

.footer-social-link:hover::after {
  transform: none;
}

.footer-divider-bottom {
  margin: 24px 0 0;
}

.footer-brand {
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer-brand img {
  width: clamp(180px, 18vw, 320px);
  height: auto;
  object-fit: contain;
}

@media (min-width: 769px) {
  .site-footer {
    position: relative;
    z-index: 8;
    padding: 22px 0 30px;
  }

  .footer-inner {
    width: min(100%, var(--container-max));
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: end;
  }

  .footer-contact {
    max-width: none;
  }

  .footer-divider {
    margin: 0 0 14px;
  }

  .footer-address,
  .footer-hours,
  .footer-link {
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.3;
    letter-spacing: 0.01em;
  }

  .footer-hours,
  .footer-contact-links,
  .footer-social {
    margin-top: 12px;
  }

  .footer-social-link {
    width: 58px;
    height: 58px;
  }

  .footer-social-link svg {
    width: 38px;
    height: 38px;
  }

  .footer-divider-bottom {
    margin-top: 24px;
  }

  .footer-brand {
    display: none;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 16px 0 24px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 clamp(18px, 5vw, 26px);
  }

  .footer-contact {
    position: relative;
  }

  .footer-divider {
    margin: 0 0 12px;
  }

  .footer-address,
  .footer-hours,
  .footer-link {
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.02em;
  }

  .footer-hours,
  .footer-contact-links,
  .footer-social {
    margin-top: 10px;
  }

  .footer-social-link {
    width: 52px;
    height: 52px;
  }

  .footer-social-link svg {
    width: 34px;
    height: 34px;
  }

  .footer-brand {
    display: none;
  }

  .footer-divider-bottom {
    margin-top: 20px;
  }
}