/* ALCA Models — Home Page Styles */

:root {
  --teal: #008b8b;
  --teal-dark: #007070;
  --teal-deep: #005a5a;
  --teal-muted: rgba(0, 139, 139, 0.08);
  --footer-bg-edge: #050605;
  --footer-bg-mid: #0a1f1e;
  --footer-bg-glow: #0e3532;
  --footer-text: #b0b0b0;
  --footer-text-muted: #b0b0b0;
  --footer-accent: #00c2c2;
  --footer-heading: #ffffff;
  --dark: #151515;
  --gray: #5c5c5c;
  --gray-light: #9a9a9a;
  --text: #151515;
  --text-muted: #5c5c5c;
  --border: #e8e8e8;
  --bg: #ffffff;
  --bg-subtle: #f7f7f7;
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);
  --section-spacing: clamp(4rem, 8vw, 7rem);
  --btn-radius: 5px 5px 15px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --page-guide-lines: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(20% - 1px),
    rgba(0, 0, 0, 0.055) calc(20% - 1px),
    rgba(0, 0, 0, 0.055) 20%
  );
  --about-guide-lines: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(20% - 1px),
    rgba(0, 0, 0, 0.11) calc(20% - 1px),
    rgba(0, 0, 0, 0.11) 20%
  );
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray);
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
}

address {
  font-style: normal;
}

.container-full {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section-spacing {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
}

.text-teal { color: var(--teal); }
.text-dark { color: var(--dark); }

/* ── Header ── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
}

.nav-brand img {
  height: 44px;
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.5rem);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 0;
  min-width: 300px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 1100;
}

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

.nav-dropdown-link {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray);
  line-height: 1.4;
  transition: color var(--transition), background var(--transition);
}

.nav-dropdown-link:hover,
.nav-dropdown-link.is-active {
  color: var(--teal);
  background: var(--teal-muted);
}

.nav-link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--teal);
}

.nav-dot {
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 2px;
  display: none;
}

.nav-link.active .nav-dot {
  display: block;
}

.nav-chevron {
  font-size: 0.7rem;
  margin-left: 2px;
}

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

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  transition: var(--transition);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: var(--btn-radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-text-inner {
  position: relative;
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}

.btn-text,
.btn-hover-text {
  display: block;
  padding: 0.875rem 1.25rem;
  line-height: 1.25;
  white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-hover-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
}

.btn-slide:hover .btn-text {
  transform: translateY(-100%);
}

.btn-slide:hover .btn-hover-text {
  transform: translateY(0);
}

.btn-sm .btn-text,
.btn-sm .btn-hover-text {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.btn-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  align-self: stretch;
  flex-shrink: 0;
  overflow: hidden;
}

.btn-icon-wrap img {
  width: 14px;
  height: 14px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-icon-hover {
  position: absolute;
  transform: translateX(-30px);
}

.btn-slide:hover .btn-icon-wrap .btn-icon-default {
  transform: translateX(30px);
}

.btn-slide:hover .btn-icon-wrap .btn-icon-hover {
  transform: translateX(0);
}

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

.btn-teal .btn-icon-dark {
  background: var(--dark);
}

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

.btn-dark .btn-icon-teal {
  background: var(--teal);
}

.btn-outline {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  padding: 0.75rem 1.5rem;
}

.btn-sm .btn-icon-wrap {
  width: 38px;
  min-width: 38px;
}

/* ── Hero ── */
.hero-section {
  padding-top: 100px;
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

.hero-wrap {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5vw, 4rem) 0 2rem;
}

.grid-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.pre-title {
  margin-bottom: 1.5rem;
  line-height: 0;
}

.pre-title-square {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #0aa9a9;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 139, 139, 0.18);
  animation: none !important;
  transform: none !important;
}

.pre-title-square::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(0, 139, 139, 0.28);
  background: transparent;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--dark);
  letter-spacing: -0.02em;
}

.hero-right {
  padding-bottom: 0.5rem;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1rem;
}

.hero-description {
  font-size: 1rem;
  color: var(--gray);
  margin-bottom: 1.75rem;
  max-width: 420px;
  line-height: 1.7;
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

.hero-location {
  font-size: 0.875rem;
  color: var(--gray-light);
}

.hero-scroll {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gray-light);
  text-transform: uppercase;
  transition: color var(--transition);
}

.hero-scroll:hover {
  color: var(--teal);
}

.section-lines {
  display: flex;
  gap: 0;
  height: 1px;
  position: relative;
  z-index: 1;
}

.section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Hero Video */
.hero-video-wrap {
  position: relative;
  width: 100%;
  height: clamp(280px, 40vw, 520px);
  overflow: hidden;
  background: var(--dark);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 24%,
    rgba(0, 20, 24, 0.12) 42%,
    rgba(0, 84, 90, 0.42) 66%,
    rgba(0, 92, 96, 0.7) 84%,
    rgba(0, 96, 98, 0.9) 100%
  );
}

.video-control {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 2;
}

.video-control:hover {
  background: #fff;
}

.video-control .icon-play[hidden],
.video-control.paused .icon-pause {
  display: none;
}

.video-control.paused .icon-play {
  display: block !important;
}

/* ── About ── */
.about-section.section-spacing {
  position: relative;
  background-color: #f3f3f3;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  padding-top: clamp(3rem, 6vw, 4.75rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
  overflow: visible;
}

.about-section .about-grid--single {
  margin-bottom: clamp(1.25rem, 2.8vw, 2rem);
}

.about-section .stats-circles {
  position: relative;
  z-index: 3;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: 0;
  margin-bottom: 0;
}

.about-section .stat-circle--dark {
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
}

.capabilities-gradient {
  display: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.about-grid--single {
  grid-template-columns: 1fr;
  max-width: 640px;
}

.about-grid--panel {
  max-width: 100%;
}

.about-intro-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.9fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  background-color: #efefef;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  border: 1px solid #e4e4e4;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.2rem, 3vw, 1.8rem);
}

.about-intro-meta {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 3.4rem;
}

.about-intro-meta .pre-title {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.about-intro-meta .section-label {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #1c2225;
  line-height: 1.35;
}

.about-intro-content .section-title {
  margin-bottom: 1.1rem;
  max-width: 18ch;
}

.about-intro-content .section-text {
  max-width: 62ch;
  margin-bottom: 1.4rem;
}

.section-label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.section-text {
  font-size: 1rem;
  color: var(--gray);
  margin-bottom: 2rem;
  max-width: 520px;
  line-height: 1.7;
}

/* ── Stats circles ── */
.stats-circles {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: transparent;
}

.stats-circles-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.3vw, 1.9rem);
}

.stats-circles-row--bottom {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.stat-circle {
  width: clamp(190px, 21vw, 245px);
  height: clamp(190px, 21vw, 245px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.75rem;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.stat-circle:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.stat-circle--outline {
  background: #fff;
  border: 2px solid var(--dark);
}

.stat-circle--light {
  background: #fff;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.stat-circle--dark {
  background: var(--dark);
  border: none;
  padding: 1.35rem 1.15rem;
  gap: 0.35rem;
  overflow: visible;
}

.stat-circle--dark .stat-circle-title {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  color: var(--teal);
}

.stat-circle--dark .stat-circle-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  max-width: 210px;
}

.stat-circle--dark .stat-circle-sub {
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

.stat-circle--dark .stat-circle-btn {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.stat-circle--dark .stat-circle-btn .btn-text {
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

.stat-circle--dark .stat-circle-btn .btn-icon-wrap {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.stat-circle--media {
  padding: 0;
  overflow: hidden;
  position: relative;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.stat-circle--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stat-circle-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.stat-circle-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
}

.stat-circle-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}

.stat-circle-number .count-value,
.stat-circle-number .stat-plus {
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 800;
  color: var(--dark);
}

.stat-circle-stat .stat-countries {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray);
  margin-top: 0.2rem;
}

.stat-circle-desc {
  font-size: 0.875rem;
  color: var(--gray);
  line-height: 1.5;
  max-width: 200px;
}

.stat-circle--dark .stat-circle-desc,
.stat-circle--dark .stat-circle-sub {
  color: rgba(255, 255, 255, 0.85);
}

.stat-circle--dark .stat-circle-sub {
  color: rgba(255, 255, 255, 0.65);
}

.stat-circle-sub {
  font-size: 0.8rem;
  color: var(--gray-light);
  margin-top: 0.35rem;
  margin-bottom: 1rem;
  max-width: 220px;
  line-height: 1.45;
}

.stat-circle-btn {
  margin-top: 0.25rem;
}

.stat-circle-stat.is-counted .count-value {
  animation: numberPop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Services (capabilities session) ── */
.services-section {
  position: relative;
  background-color: #fff;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  overflow: visible;
}

.services-section.section-spacing {
  padding-top: clamp(4.5rem, 10vw, 7rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.services-header {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.services-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
}

.services-title {
  margin-bottom: 0;
  max-width: 720px;
}

.services-header-btn {
  flex-shrink: 0;
}

.service-list {
  border-top: 1px solid var(--border);
}

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

.service-item-link {
  position: relative;
  display: block;
  padding: clamp(1rem, 2vw, 1.35rem) 3.5rem clamp(1rem, 2vw, 1.35rem) 0;
  color: inherit;
  transition: background var(--transition);
}

.service-item.is-active .service-item-link {
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.service-item-toggle {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.service-item-inner {
  display: grid;
  grid-template-columns: minmax(240px, 36%) 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}

.service-item-leading {
  min-width: 0;
}

.service-item-image-wrap {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-subtle);
  height: 72px;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-item.is-active .service-item-image-wrap {
  height: clamp(160px, 22vw, 220px);
}

.service-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

.service-item:not(.is-active) .service-item-image {
  filter: saturate(0.85);
}

.service-item.is-active .service-item-image {
  transform: scale(1.02);
}

.service-item-content {
  min-width: 0;
  padding-top: 0.15rem;
}

.service-item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0;
}

.service-item-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
  margin: 0;
}

.service-item-features-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-light);
  flex-shrink: 0;
}

.service-item-features {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    margin 0.4s ease;
  margin-top: 0;
}

.service-item.is-active .service-item-features {
  max-height: 280px;
  opacity: 1;
  margin-top: 1rem;
}

.service-item-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-item-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray);
  line-height: 1.45;
}

.service-item-features-list li img {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 14px;
  height: 14px;
}

.service-item-arrow {
  position: absolute;
  top: clamp(1rem, 2vw, 1.35rem);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--teal);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  transition: background var(--transition);
  z-index: 2;
}

.service-item-arrow img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-item-arrow .service-arrow-hover {
  position: absolute;
  transform: translate(-30px, 30px);
}

.service-item-link:hover .service-item-arrow {
  background: var(--teal-dark);
}

.service-item-link:hover .service-arrow-default {
  transform: translate(30px, -30px);
}

.service-item-link:hover .service-arrow-hover {
  transform: translate(0, 0);
}

.service-item:not(.is-active) .service-item-link:hover {
  background: rgba(0, 139, 139, 0.03);
}

.service-item.is-active .service-item-link {
  background: rgba(0, 139, 139, 0.04);
}

/* ── Services index & detail pages ── */
.page-hero {
  padding-top: 120px;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-hero .section-title {
  margin-bottom: 0.5rem;
}

.technologies-hero {
  padding-top: 132px;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.technologies-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.technologies-hero-copy .section-title {
  max-width: 13.5ch;
  font-size: clamp(2.8rem, 5.3vw, 4.65rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}

.technologies-hero-copy .text-teal {
  color: var(--teal);
}

.technologies-hero-action {
  padding-bottom: 0.5rem;
}

.technologies-stack {
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.technologies-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.technology-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 1.75rem 1.45rem 1.5rem;
  background: var(--dark);
  color: #fff;
}

.technology-card-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.28;
  margin-bottom: 1.6rem;
  text-align: center;
}

.technology-card-title span {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.02rem;
  font-weight: 600;
}

.technology-card-description {
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.55rem;
}

.technology-card-meta {
  display: grid;
  gap: 1rem;
  margin-top: auto;
}

.technology-meta-item {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.technology-meta-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.technology-meta-value {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.technologies-cta-wrap {
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.technologies-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.35rem 1.6rem;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--dark);
  background-image: url("../images/cta-bg-pattern.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.technologies-cta-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.technologies-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 0.45rem;
  max-width: 18ch;
  text-wrap: balance;
}

.technologies-cta-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  margin: 0;
  max-width: 56ch;
}

.technologies-cta .btn-cta-light {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
  align-self: center;
  background: #fff;
  color: var(--dark);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.technologies-cta .btn-cta-light .btn-text {
  display: flex;
  align-items: center;
  padding: 0.95rem 1.15rem 0.95rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
}

.technologies-cta .btn-cta-light .btn-icon-teal {
  background: var(--teal);
  min-width: 46px;
}

.technologies-cta .btn-cta-light .btn-icon-wrap img {
  filter: brightness(0) invert(1);
}

body.page-about {
  background-color: #fff;
  background-image: none;
}

/* Vertical guides — same solid-line style as footer (main content only) */
body.page-about main .container-full {
  position: relative;
}

body.page-about main .container-full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--about-guide-lines);
}

body.page-about main .container-full > * {
  position: relative;
  z-index: 1;
}

/* ── About us (Webflow-like screenshot) ── */
.aboutus-title {
  padding-top: 88px;
  padding-bottom: 34px;
}

.aboutus-title-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.aboutus-title-icon {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 139, 139, 0.12);
}

.aboutus-title-text {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.8vw, 3rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.1;
}

.aboutus-industrial {
  padding-bottom: 0;
}

.aboutus-industrial > .container-full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.aboutus-industrial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
}

.aboutus-industrial-media {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 42vw, 620px);
}

.aboutus-industrial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aboutus-industrial-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  background: rgba(24, 24, 24, 0.86);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  line-height: 1.25;
}

.aboutus-industrial-copy {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: linear-gradient(180deg, rgba(10, 112, 115, 0.95) 0%, rgba(1, 51, 54, 1) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.aboutus-industrial-copy p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.85;
}

.aboutus-industrial-copy strong {
  font-weight: 900;
}

.aboutus-session {
  position: relative;
  margin-top: 0;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background-color: #f5f5f5;
  background-image: linear-gradient(180deg, #f8f8f8 0%, #f3f3f3 48%, #f5f5f5 100%);
}

/* Subtle paper grain (Webflow noise + light SVG) */
.aboutus-session::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("https://cdn.prod.website-files.com/69e5f41f094bae21bdc47126/69e5f421094bae21bdc4740e_bg-noice.gif");
  background-size: 200px 200px, auto;
  mix-blend-mode: multiply;
  opacity: 0.16;
}

.aboutus-session > .container-full {
  position: relative;
}

.aboutus-session-body {
  position: relative;
}

.aboutus-session-body::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 100vw;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.52);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.aboutus-session-intro {
  display: grid;
  grid-template-columns: minmax(52px, 0.16fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
  position: relative;
  z-index: 1;
}

.aboutus-session-marker {
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 0 0 12px rgba(0, 0, 0, 0.04);
}

.aboutus-session-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  transform: translate(-50%, -50%);
}

.aboutus-session-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.6vw, 3.35rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.aboutus-session-title-dark {
  display: block;
  color: var(--dark);
}

.aboutus-session-title-teal {
  display: block;
  color: var(--teal);
}

.aboutus-session-grid {
  display: grid;
  grid-template-columns: minmax(200px, 0.74fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.35rem, 3vw, 3.25rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

.aboutus-session-body .aboutus-session-intro,
.aboutus-session-body .aboutus-session-grid {
  position: relative;
  z-index: 1;
}

.aboutus-session-media img {
  width: 100%;
  min-height: clamp(340px, 42vw, 460px);
  object-fit: cover;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(0, 139, 139, 0.22);
  background: #fff;
}

.aboutus-session-label {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--dark);
}

.aboutus-session-story p,
.aboutus-session-capabilities p {
  margin: 0 0 1.15rem;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--text-muted);
}

.aboutus-session-story p:last-child {
  margin-bottom: 0;
}

.aboutus-session-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.aboutus-session-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--dark);
  font-size: 0.98rem;
  font-weight: 500;
  transition: color var(--transition);
}

.aboutus-session-link:hover {
  color: var(--teal);
}

.aboutus-session-link-arrow {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--teal);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
}

.aboutus-session-btn {
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .aboutus-industrial-grid {
    grid-template-columns: 1fr;
  }

  .aboutus-industrial-media {
    min-height: 300px;
  }

  .aboutus-session-intro {
    grid-template-columns: 1fr;
  }

  .aboutus-session-title {
    max-width: none;
  }

  .aboutus-session-grid {
    grid-template-columns: 1fr;
  }

  .aboutus-session-media img {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .aboutus-session-link {
    font-size: 0.92rem;
  }

  .aboutus-session-btn {
    width: 100%;
    justify-content: center;
  }
}

.about-page-hero {
  position: relative;
  padding-top: 132px;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  background-color: #fff;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.about-page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.about-page-hero-copy {
  max-width: 760px;
}

.about-page-hero-title {
  max-width: 11ch;
  margin-bottom: 1rem;
  font-size: clamp(2.8rem, 5.3vw, 4.65rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.about-page-hero-lead {
  max-width: 52ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.about-page-hero-action {
  padding-bottom: 0.35rem;
}

.about-page-hero-lines {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  height: auto;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  max-width: 1440px;
  z-index: 0;
  pointer-events: none;
}

.about-page-hero-lines .section-line {
  flex: none;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.06);
}

.about-page-intro {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background-color: #f3f3f3;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.about-intro-panel--page {
  max-width: 100%;
}

.about-intro-panel--page .about-page-quote {
  margin-top: 1.35rem;
  margin-bottom: 0;
}

.about-page-values {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background-color: #fff;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.about-page-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.about-info-box {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
  transition: transform var(--transition), box-shadow var(--transition);
}

.about-info-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.1);
}

.about-info-box--dark {
  background: var(--dark);
  border-color: rgba(255, 255, 255, 0.1);
}

.about-info-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: rgba(0, 139, 139, 0.08);
  border: 1px solid rgba(0, 139, 139, 0.12);
}

.about-info-box--dark .about-info-box-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.about-info-box--dark .about-info-box-icon img {
  filter: brightness(0) invert(1);
}

.about-info-box-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}

.about-info-box--dark .about-info-box-title {
  color: #fff;
}

.about-info-box-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.about-info-box--dark .about-info-box-text {
  color: rgba(255, 255, 255, 0.76);
}

.about-page-overview {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  background-color: #f3f3f3;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.about-page-overview-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.about-page-overview-grid--reverse {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
}

.about-page-media {
  min-height: 560px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dark);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.14);
}

.about-page-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-page-panel {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: #f5f7f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

.about-page-panel .section-title {
  max-width: 12ch;
  margin-bottom: 1rem;
}

.about-page-panel p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.about-page-panel p:last-of-type {
  margin-bottom: 1.25rem;
}

.about-page-panel .btn {
  margin-top: 0.25rem;
}

.about-page-quote {
  margin-top: 1.5rem;
  padding: 1.2rem 1.35rem;
  border-radius: 10px;
  background: var(--dark);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #fff;
}

.about-page-story {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background-color: #fff;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.about-page-story-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.about-page-facility-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--dark);
  border-radius: 12px;
  color: #fff;
}

.about-page-facility-label {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.about-page-facility-title {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
}

.about-page-facility-media {
  overflow: hidden;
  border-radius: 10px;
}

.about-page-facility-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.about-page-caption {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.about-page-story-copy {
  padding-top: 0.35rem;
}

.about-page-story-copy .section-title {
  max-width: 10ch;
  margin-bottom: 1rem;
}

.about-page-story-copy p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.about-page-story-copy p:last-of-type {
  margin-bottom: 0;
}

.about-page-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.about-page-audience span {
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dark);
}

.about-page-cta-wrap {
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.about-page-cta {
  background-image:
    linear-gradient(135deg, rgba(0, 139, 139, 0.18), rgba(0, 0, 0, 0) 55%),
    url("../images/cta-bg-pattern.png");
}

.service-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 1.25rem;
}

.service-back:hover {
  color: var(--teal-dark);
}

.service-detail-section {
  padding-bottom: var(--section-spacing);
}

.service-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.service-detail-image {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
}

.service-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-detail-content h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin: 2rem 0 1rem;
}

.service-detail-content h2:first-of-type {
  margin-top: 0;
}

.service-detail-content p {
  margin-bottom: 1rem;
  line-height: 1.65;
}

.service-detail-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.service-detail-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.service-detail-features li img {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.service-related {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}

.service-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.service-related-card {
  display: block;
  padding: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.service-related-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.service-related-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.35rem;
}

.service-related-card span {
  font-size: 0.85rem;
  color: var(--teal);
}

/* ── Services index (Webflow card grid) ── */
.service-inner-section {
  padding-top: 120px;
  background-color: #f2f2f2;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.service-inner-shell {
  max-width: min(1260px, 100%);
  margin: 0 auto;
  background-color: #ececec;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  border: 1px solid #e3e3e3;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.service-inner-header {
  text-align: center;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.service-inner-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark);
  line-height: 1.15;
}

.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.service-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  color: inherit;
  border: 20px solid #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: #fff;
}

.service-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
}

.service-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.service-card-link:hover .service-card-image-wrap img {
  transform: scale(1.04);
}

.service-card-arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background var(--transition), transform var(--transition);
}

.service-card-link:hover .service-card-arrow {
  transform: scale(1.05);
}

.service-card-arrow img {
  width: 14px;
  height: 14px;
  display: block;
}

.service-card-body {
  padding: 0.9rem 1rem 1rem;
}

.service-card-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.9rem);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

.service-card-body p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* ── Service detail (Webflow template) ── */
.section-spacing-top {
  padding-top: 120px;
}

.section-spacing-bottom {
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.service-details-section {
  background-color: var(--bg-subtle);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.service-details-section--architectural {
  background-color: #fff;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.service-details-top {
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.service-detail-main {
  max-width: 720px;
  margin: 0 auto;
}

.service-details-top--architectural {
  padding-bottom: clamp(2.5rem, 4vw, 3.1rem);
}

.service-details-top--architectural.container-full {
  max-width: none;
  padding-left: clamp(0.5rem, 1vw, 1rem);
  padding-right: clamp(0.5rem, 1vw, 1rem);
}

.service-detail-main--architectural {
  max-width: 100%;
  padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.2rem, 3vw, 2.25rem);
  background: #efefef;
  border: 1px solid #e3e3e3;
  border-radius: 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.service-detail-main--architectural .service-detail-name {
  margin-bottom: 0.75rem;
}

.service-detail-main--architectural .service-detail-description {
  max-width: 700px;
  margin-bottom: 1.75rem;
}

.service-detail-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.service-detail-description {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.service-detail-button {
  display: flex;
  justify-content: center;
}

/* Service detail hero: full image visible (no crop from max-height + cover) */
.service-detail-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Industrial hero: wide photos — fill band vertically (less white above/below) */
.service-detail-image--industrial {
  width: 100%;
  height: clamp(280px, 36vw, 460px);
  max-height: none;
  object-fit: cover;
  object-position: center center;
}

.service-more-info {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--bg);
}

.service-more-info--architectural {
  background: #efefef;
}

.service-more-info--architectural .more-info-inner {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.service-more-info--architectural .feature-main {
  background: #fafafa;
  border: 1px solid #ececec;
}

.more-info-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

.service-info-description h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1rem;
}

.service-info-description p {
  line-height: 1.65;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.service-info-description ul {
  margin: 0.5rem 0 1rem;
  padding-left: 0;
  list-style: none;
}

.service-info-description li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
  line-height: 1.55;
}

.service-info-description li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

.grid-feature {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  align-items: stretch;
}

.feature-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.15rem, 2vw, 1.35rem);
  background: #f0f0f0;
  border-radius: 0;
}

.feature-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  background: var(--dark);
  flex-shrink: 0;
}

.feature-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.feature-name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.35vw, 1.0625rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.feature-description {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  margin-top: auto;
}

.service-category-panel {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--bg-subtle);
  overflow: hidden;
}

.service-category-panel .container,
.service-category-panel .container-full {
  position: relative;
  z-index: 1;
}

.service-category-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.5rem;
}

.grid-category-info {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg);
}

.grid-category-info.head {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  background: var(--dark);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.grid-category-info.head .category-name,
.grid-category-info.head .category-details {
  padding: 1rem 1.25rem;
  color: var(--bg);
}

.grid-category-info.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  border-top: 1px solid var(--border);
}

.category-name-wrap,
.category-name {
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
  border-right: 1px solid var(--border);
  background: rgba(0, 139, 139, 0.04);
}

.category-details-wrap,
.category-details {
  padding: 1.1rem 1.25rem;
}

.category-details ul {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.category-details li {
  margin-bottom: 0.35rem;
}

.service-category-panel--architectural {
  isolation: isolate;
  padding: clamp(3.75rem, 8vw, 5.25rem) 0 clamp(8.5rem, 18vw, 12.5rem);
  background: #171717;
  min-height: clamp(560px, 70vw, 760px);
}

.service-category-panel--architectural::before,
.service-category-panel--architectural::after {
  content: none;
}

.service-category-panel--architectural .bg-gradient {
  display: block;
  inset: auto 0 0 0;
  height: clamp(170px, 24vw, 260px);
  background: linear-gradient(
    180deg,
    rgba(23, 23, 23, 0) 0%,
    rgba(9, 53, 54, 0.42) 52%,
    rgba(0, 139, 139, 0.92) 100%
  );
}

.service-category-panel--architectural .line-wrapper {
  display: none;
}

.service-category-panel--architectural .section-line {
  background: rgba(255, 255, 255, 0.04);
}

.service-category-panel--architectural .container-full {
  max-width: 1320px;
}

.architectural-category-top {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 1fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.architectural-category-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  place-items: center;
  margin-top: 0.35rem;
}

.architectural-category-badge span {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #00a6a2;
  box-shadow: 0 0 0 2px rgba(0, 166, 162, 0.15);
}

.service-category-panel--architectural .service-category-title {
  margin: 0;
  color: #f4f4f4;
  font-size: clamp(2.35rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 14.5ch;
}

.service-category-panel--architectural .grid-category-info {
  border: none;
  background: transparent;
}

.service-category-panel--architectural .grid-category-info.head,
.service-category-panel--architectural .grid-category-info.row {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-category-panel--architectural .grid-category-info.row {
  border-top: none;
}

.service-category-panel--architectural .category-name-wrap,
.service-category-panel--architectural .category-details-wrap {
  padding: 0;
}

.service-category-panel--architectural .category-name-wrap {
  background: transparent;
}

.service-category-panel--architectural .grid-category-info.head .category-name,
.service-category-panel--architectural .grid-category-info.head .category-details {
  padding: 0 0 1rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
}

.service-category-panel--architectural .grid-category-info.row .category-name,
.service-category-panel--architectural .grid-category-info.row .category-details {
  padding: 1.05rem 0 1.45rem;
  border: none;
  background: transparent;
}

.service-category-panel--architectural .grid-category-info.row .category-name {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.55;
}

.service-category-panel--architectural .grid-category-info.row .category-details {
  color: rgba(255, 255, 255, 0.72);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  padding-left: 1.25rem;
}

.service-category-panel--architectural .category-details ul {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
  line-height: 1.95;
  color: inherit;
}

.service-category-panel--architectural .category-details li {
  position: relative;
  margin-bottom: 0.18rem;
  padding-left: 1rem;
}

.service-category-panel--architectural .category-details li::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
}

.line-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--container-padding);
  z-index: 0;
}

.section-line {
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
  height: 100%;
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 139, 139, 0.04) 0%,
    transparent 35%,
    transparent 65%,
    rgba(0, 139, 139, 0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.service-step-section {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg-subtle);
  overflow: hidden;
}

.service-step-section .line-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--container-padding);
  z-index: 0;
}

.service-step-section--architectural .line-wrapper {
  padding: 0;
  display: block;
}

.service-step-section--architectural .section-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.service-step-section--architectural .section-line:nth-child(1) {
  left: 17.5%;
}

.service-step-section--architectural .section-line:nth-child(2) {
  left: 50%;
}

.service-step-section--architectural .section-line:nth-child(3) {
  left: 82.5%;
}

.service-step-section--architectural .section-line:nth-child(4),
.service-step-section--architectural .section-line:nth-child(5) {
  display: none;
}

.service-step-section--architectural .step-circles {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  max-width: 320px;
}

.service-step-section .container,
.service-step-section .container-full {
  position: relative;
  z-index: 1;
}

.service-step-section .pre-title-square {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  box-shadow: 0 0 0 12px #fff;
}

.grid-step {
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(300px, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.step-title-inner .section-title {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.12;
}

.step-button {
  margin-top: 1.5rem;
}

.step-circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.step-circle {
  position: relative;
  flex: 0 0 auto;
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}

.step-circle--1 {
  background: var(--dark);
}

.step-circle--1 .step-label {
  color: var(--teal);
}

.step-circle--1 h3 {
  color: #fff;
}

.step-circle--2 {
  background: #fff;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08);
}

.step-circle--2 .step-label {
  color: var(--gray-light);
}

.step-circle--2 h3 {
  color: var(--teal);
}

.step-circle--3 {
  background: var(--teal);
}

.step-circle--3 .step-label {
  color: #fff;
}

.step-circle--3 h3 {
  color: var(--dark);
}

.step-circle .step-label,
.step-circle .service-step-num {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 500;
  margin-bottom: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
}

.step-circle h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.28;
  margin: 0;
  max-width: 14ch;
}

.service-faq-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--bg-subtle);
}

.service-faq-section--architectural {
  background: #fff;
}

.service-faq-section--architectural .faq-list {
  display: grid;
  gap: 1.45rem;
  border-top: none;
  max-width: 820px;
  margin: 0 auto;
}

.service-faq-section--architectural .faq-item {
  padding: 0 clamp(1rem, 2vw, 1.5rem);
  background: #ececec;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  box-shadow: none;
}

.service-faq-section--architectural .faq-question {
  padding: 1.2rem 0;
  font-size: 0.98rem;
  line-height: 1.4;
}

.service-faq-section--architectural .faq-item.is-open .faq-question {
  color: var(--dark);
}

.service-faq-section--architectural .faq-answer {
  padding: 0 3.25rem 1.35rem 0;
  opacity: 0;
}

.service-faq-section--architectural .faq-item.is-open .faq-answer {
  padding-bottom: 1.35rem;
}

.service-faq-section--architectural .faq-answer p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5f5f5f;
}

.service-faq-section--architectural .faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
}

.service-faq-section--architectural .faq-icon::before,
.service-faq-section--architectural .faq-icon::after {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 12px;
  height: 2px;
  margin: 0;
  background: #fff;
  transform-origin: center;
}

.service-faq-section--architectural .faq-icon::before {
  transform: translate(-50%, -50%);
}

.service-faq-section--architectural .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 1;
}

.service-faq-section--architectural .faq-item.is-open .faq-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.service-faq-section--architectural .faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 1;
}

.service-faq-section--faq-page {
  padding-top: clamp(4rem, 7vw, 5.4rem);
  padding-bottom: clamp(4rem, 7vw, 5.4rem);
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.service-faq-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
}

.faq-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--dark);
  transition: transform var(--transition), opacity var(--transition);
}

.faq-icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
}

.faq-icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
}

.faq-item.is-open .faq-icon::after {
  transform: scaleY(0);
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, padding 0.35s ease;
  padding-bottom: 0;
}

.faq-item.is-open .faq-answer {
  max-height: 400px;
  opacity: 1;
  padding-bottom: 1.25rem;
}

.faq-answer p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* Legacy aliases for other service pages */
.service-detail-tagline,
.service-detail-description {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.service-detail-hero-image,
.service-detail-image:not(.service-detail-image--industrial) {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

.service-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  align-items: stretch;
}

.service-feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.15rem, 2vw, 1.35rem);
  background: #f0f0f0;
  border: none;
  border-radius: 0;
}

.service-feature-card .feature-icon-wrap {
  margin-bottom: 1rem;
}

.service-feature-card h2 {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.35vw, 1.0625rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.service-feature-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  margin-top: auto;
}
.service-category-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background-color: var(--bg-subtle);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}
.service-category-heading { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--dark); margin-bottom: 1.5rem; }
.service-category-table { border: 1px solid var(--border); overflow: hidden; background: var(--bg); }
.service-category-row { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; border-bottom: 1px solid var(--border); }
.service-category-row:last-child { border-bottom: none; }
.service-category-row--head { background: var(--dark); color: var(--bg); font-weight: 700; font-size: 0.9rem; }
.service-category-row--head .service-category-name,
.service-category-row--head .service-category-details { color: var(--bg); }
.service-category-name { padding: 1.1rem 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--dark); border-right: 1px solid var(--border); background: rgba(0, 139, 139, 0.04); }
.service-category-row--head .service-category-name { background: transparent; border-right-color: rgba(255, 255, 255, 0.15); }
.service-category-details { padding: 1.1rem 1.25rem; }
.service-category-details ul { margin: 0; padding-left: 1.1rem; line-height: 1.6; font-size: 0.9375rem; }
.service-step-header {
  display: none;
}

.service-step-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.service-step-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}

.service-step-card:nth-child(1) {
  background: var(--dark);
}

.service-step-card:nth-child(1) .service-step-num {
  color: var(--teal);
}

.service-step-card:nth-child(1) h3 {
  color: #fff;
}

.service-step-card:nth-child(2) {
  background: #fff;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08);
}

.service-step-card:nth-child(2) .service-step-num {
  color: var(--gray-light);
}

.service-step-card:nth-child(2) h3 {
  color: var(--teal);
}

.service-step-card:nth-child(3) {
  background: var(--teal);
}

.service-step-card:nth-child(3) .service-step-num {
  color: #fff;
}

.service-step-card:nth-child(3) h3 {
  color: var(--dark);
}

.service-step-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.28;
  margin: 0;
  max-width: 14ch;
}

.service-step-num {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 500;
  margin-bottom: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
}
.service-faq-list { border-top: 1px solid var(--border); }
.service-faq-item { border-bottom: 1px solid var(--border); }
.service-faq-item h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--dark); }
.service-faq-item p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }

/* ── CTA ── */
.cta-section {
  position: relative;
  background-color: #fff;
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.cta-section.section-spacing {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.cta-inner {
  max-width: min(1040px, 92vw);
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}

.cta-banner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 0;
  padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--dark);
  background-image: url("../images/cta-bg-pattern.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  isolation: isolate;
}

.cta-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.8vw, 3.15rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.02em;
  text-align: left;
  max-width: 14ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.cta-title .text-teal {
  color: #fff;
}

.cta-banner .btn-cta-light {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  color: var(--dark);
}

.cta-banner .btn-cta-light .btn-text-inner {
  height: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  line-height: 1.25;
}

.cta-banner .btn-cta-light .btn-text,
.cta-banner .btn-cta-light .btn-hover-text {
  padding: 0.875rem 1.25rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--dark);
}

.cta-banner .btn-cta-light .btn-hover-text {
  color: var(--dark);
}

.cta-banner .btn-cta-light .btn-icon-teal {
  background: var(--teal);
}

.cta-banner .btn-cta-light .btn-icon-wrap img {
  filter: brightness(0) invert(1);
}

.cta-section--architectural-form {
  background: url("https://cdn.prod.website-files.com/69e5f41f094bae21bdc47126/69e5f421094bae21bdc472fe_CTA%20bg%20(2).webp") center / cover no-repeat;
  min-height: clamp(520px, 62vw, 760px);
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.cta-section--architectural-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 14, 15, 0.72) 0%, rgba(11, 14, 15, 0.8) 100%),
    linear-gradient(90deg, rgba(11, 14, 15, 0.24) 0%, rgba(11, 14, 15, 0.08) 100%);
  z-index: 0;
}

.cta-form-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.12);
  z-index: 1;
}

.cta-section--architectural-form .container {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.cta-form-shell {
  text-align: center;
}

.cta-form-badge {
  width: 38px;
  height: 38px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.82);
  display: grid;
  place-items: center;
}

.cta-form-badge span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal);
}

.cta-form-title {
  margin: 0 auto 2rem;
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 4.8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #fff;
}

.cta-form-title span {
  color: var(--teal);
}

.cta-contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.96fr);
  gap: 1rem 1.5rem;
  align-items: start;
}

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

.cta-contact-form input,
.cta-contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(26, 26, 26, 0.62);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem 1.25rem;
  border-radius: 5px;
  outline: none;
  backdrop-filter: blur(2px);
}

.cta-contact-form input::placeholder,
.cta-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.cta-contact-form input:focus,
.cta-contact-form textarea:focus {
  border-color: rgba(0, 194, 194, 0.65);
  box-shadow: 0 0 0 2px rgba(0, 194, 194, 0.12);
}

.cta-contact-form textarea {
  min-height: 155px;
  resize: vertical;
}

.cta-send-btn {
  align-self: start;
  min-width: 94px;
  padding: 0.95rem 1.35rem;
  border: none;
  border-radius: 5px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.cta-send-btn:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

/* ── Group ── */
.group-section--bg {
  position: relative;
  background-image: url("../images/pennar-industrial-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

.group-section--bg .container-full {
  position: relative;
  z-index: 1;
}

.group-content-panel {
  max-width: 640px;
  background: rgba(21, 21, 21, 0.88);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 6px;
}

.group-content-panel .group-stats {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.group-section--bg .section-title {
  color: #fff;
}

.group-section--bg .group-list li {
  color: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.group-section--bg .group-stat h3 {
  color: #fff;
}

.group-section--bg .group-stat p,
.group-section--bg .group-desc {
  color: rgba(255, 255, 255, 0.75);
}

.group-section--bg .group-locations {
  color: var(--teal);
}

.group-section--bg .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.group-section--bg .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.group-grid {
  display: block;
}

.group-content-panel .group-list li:last-child {
  border-bottom: none;
}

.group-list li {
  font-size: 0.95rem;
  color: var(--gray);
  padding: 0.6rem 0;
  padding-left: 1.25rem;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.group-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 1px;
}

.group-stat h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.group-stat p {
  font-size: 1rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.group-locations {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.group-desc {
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 1.5rem;
}

.group-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ── Global presence session ── */
.global-presence-session {
  background: #1a1b1d;
  padding-top: clamp(3.2rem, 7vw, 5rem);
  padding-bottom: clamp(3.2rem, 7vw, 5rem);
}

.global-presence-card {
  max-width: min(980px, 100%);
  margin: 0 auto;
}

.global-presence-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: #f2f2f2;
}

.global-presence-locations {
  margin: 0 0 1.65rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72);
}

.global-presence-image-wrap {
  border: 5px solid #050505;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: #000;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 0.45rem;
}

.global-presence-image {
  width: 100%;
  height: auto;
  display: block;
}

.global-presence-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.global-presence-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #f2f2f2;
  max-width: 18ch;
}

.global-presence-btn {
  flex-shrink: 0;
}

/* ── Industries (tabbed) ── */
.industry-section {
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.industry-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.industry-header .pre-title {
  display: flex;
  justify-content: center;
}

.industry-title {
  margin-bottom: 0;
}

.industry-tabs {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.industry-tabs-menu {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.industry-tab {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.125rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  text-align: center;
  line-height: 1.35;
}

.industry-tab:last-child {
  border-right: none;
}

.industry-tab:hover {
  color: var(--dark);
  background: rgba(255, 255, 255, 0.6);
}

.industry-tab.is-active {
  color: var(--dark);
  background: var(--bg);
  border-bottom-color: var(--teal);
}

.industry-tabs-content {
  position: relative;
  min-height: 458px;
}

.industry-panel {
  display: none;
  animation: industryFadeIn 0.35s ease;
}

.industry-panel.is-active {
  display: block;
}

@keyframes industryFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.industry-content-grid {
  display: grid;
  grid-template-columns: 814px 1fr;
  min-height: 458px;
}

.industry-image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  width: 814px;
  max-width: 100%;
  height: 458px;
  flex-shrink: 0;
}

.industry-image {
  width: 814px;
  max-width: 100%;
  height: 458px;
  object-fit: cover;
  display: block;
}

.industry-content {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
}

.industry-icon-box {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
}

.industry-icon-box::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--teal);
}

.industry-icon {
  display: none;
}

.industry-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.industry-description {
  font-size: 1rem;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 400px;
}

.industry-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.industry-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dark);
}

.industry-list-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ── Why ── */
.why-section--bg {
  position: relative;
  background-image: url("../images/why-alca-bg.png");
  background-size: cover;
  background-position: center;
}

.why-section--bg .container-full {
  position: relative;
  z-index: 1;
}

.why-content-panel {
  max-width: 560px;
  background: rgba(21, 21, 21, 0.88);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 6px;
}

.why-content-panel .section-title {
  margin-bottom: 1.25rem;
}

.why-content-panel .why-list li:first-child {
  padding-top: 0;
}

.why-section--bg .section-title {
  color: #fff;
}

.why-section--bg .why-list li {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.why-section--bg .why-list li strong {
  color: #fff;
}

.why-grid {
  display: block;
}

.why-list li {
  font-size: 1rem;
  color: var(--gray);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}

.why-list li strong {
  color: var(--dark);
  font-weight: 700;
}

/* ── Form submission ── */
.alca-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.alca-form-status {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  min-height: 1.25rem;
}

.alca-form-status.is-success {
  color: #7dffd4;
}

.alca-form-status.is-error {
  color: #ff9a9a;
}

.footer-form-status {
  margin-top: 0.65rem;
  color: var(--footer-text-muted);
}

.footer-form-status.is-success {
  color: var(--footer-accent);
}

.footer-form-status.is-error {
  color: #ff9a9a;
}

.cta-form-status {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.cta-form-status.is-success {
  color: #7dffd4;
}

.cta-form-status.is-error {
  color: #ff9a9a;
}

form.is-submitting .cta-send-btn,
form.is-submitting .contact-submit-btn,
form.is-submitting .footer-newsletter-submit {
  opacity: 0.7;
  cursor: wait;
}

/* ── Footer ── */
.footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--footer-text);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  background-color: var(--footer-bg-edge);
  background-image: linear-gradient(180deg, var(--footer-bg-mid) 0%, var(--footer-bg-edge) 100%);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.45;
}

.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
}

.footer-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.footer-shadow {
  position: absolute;
  width: min(620px, 82vw);
  height: auto;
  max-width: none;
  opacity: 0.82;
  will-change: transform;
  transform-style: preserve-3d;
}

.footer-shadow._01 {
  top: -26%;
  right: -24%;
  left: auto;
  bottom: auto;
  transform: translate3d(0, 0, 0) rotate(60deg) scale(1.68);
  animation: footerGlowDriftOne 22s ease-in-out infinite;
}

.footer-shadow._02 {
  bottom: -26%;
  left: -24%;
  top: auto;
  right: auto;
  transform: translate3d(0, 0, 0) rotate(12deg) scale(1.62);
  animation: footerGlowDriftTwo 20s ease-in-out infinite alternate;
}

@keyframes footerGlowDriftOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(60deg) scale(1.68);
  }
  50% {
    transform: translate3d(34px, 20px, 0) rotate(60deg) scale(1.68);
  }
}

@keyframes footerGlowDriftTwo {
  0% {
    transform: translate3d(86px, 14px, 0) rotate(12deg) scale(1.62);
  }
  100% {
    transform: translate3d(-86px, 14px, 0) rotate(12deg) scale(1.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-shadow._01,
  .footer-shadow._02 {
    animation: none;
  }
}

.footer > .container-full {
  position: relative;
  z-index: 1;
}

/* New footer guide lines across full section */
.footer > .container-full::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(20% - 1px),
    rgba(255, 255, 255, 0.16) calc(20% - 1px),
    rgba(255, 255, 255, 0.16) 20%
  );
  opacity: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.05fr)
    minmax(120px, 0.7fr)
    minmax(260px, 1.2fr)
    minmax(170px, 0.9fr)
    minmax(190px, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}

/* Demo-like vertical guides across footer columns */
.footer-grid::before {
  display: none;
}

/* Services column: keep long link labels on one line (desktop) */
.footer-col:nth-child(3) .footer-links .footer-link {
  white-space: nowrap;
}

.footer-col {
  padding: 0 clamp(1rem, 2vw, 2rem);
}

.footer-col:first-child {
  padding-left: 0;
}

.footer-col + .footer-col {
  border-left: none;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--footer-heading);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.footer-desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--footer-text-muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 240px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--footer-text-muted);
  line-height: 1.45;
}

.footer-link {
  color: var(--footer-text-muted);
  transition: color var(--transition);
}

.footer-link:hover,
.footer-link.is-active {
  color: var(--footer-accent);
}

.footer-links--plain li {
  color: var(--footer-text-muted);
}

.footer-address {
  font-style: normal;
}

.footer-address p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--footer-text-muted);
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

.footer-address p:last-child {
  margin-bottom: 0;
}

.footer-hours p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--footer-text-muted);
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

.footer-hours p:last-child {
  margin-bottom: 0;
}

.footer-hours strong {
  color: var(--footer-heading);
  font-weight: 700;
}

.footer-newsletter {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  max-width: 100%;
}

.footer-newsletter input {
  flex: 1;
  min-width: 0;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--footer-heading);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  outline: none;
  transition: border-color var(--transition);
}

.footer-newsletter input::placeholder {
  color: rgba(176, 176, 176, 0.45);
}

.footer-newsletter input:focus {
  border-color: rgba(0, 194, 194, 0.45);
}

.footer-newsletter-submit {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.footer-newsletter-submit img {
  filter: brightness(0);
  opacity: 1;
}

.footer-newsletter-submit:hover {
  background: #f0f0f0;
  transform: translateX(2px);
}

.footer-watermark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.085);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(0.75rem, 2vw, 1.25rem);
  pointer-events: none;
  user-select: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px dashed rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(176, 176, 176, 0.55);
}

.footer-bottom p {
  color: inherit;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.footer-social .footer-link {
  color: var(--footer-heading);
  font-size: 0.8125rem;
}

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

/* ── Scroll to top ── */
.scroll-top {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--btn-radius);
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 139, 139, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--teal-dark);
  box-shadow: 0 10px 32px rgba(0, 112, 112, 0.45);
}

.scroll-top:active {
  transform: translateY(-2px);
}

.scroll-top.is-visible:active {
  transform: translateY(-2px);
}

.scroll-top:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 3px;
}

.scroll-top svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .about-intro-panel {
    grid-template-columns: 1fr;
  }

  .about-intro-meta .pre-title {
    margin-bottom: 1rem;
  }

  .about-intro-meta .section-label {
    margin-bottom: 0.5rem;
  }

  .about-intro-content .section-title,
  .about-intro-content .section-text {
    max-width: none;
  }

  .stats-circles-row {
    flex-wrap: wrap;
  }

  .service-detail-image:not(.service-detail-image--industrial),
  .service-detail-hero-image {
    max-height: none;
    height: auto;
    object-fit: contain;
  }

  .service-detail-image--industrial {
    height: clamp(220px, 52vw, 400px);
    object-fit: cover;
    object-position: center center;
  }

  .grid-hero,
  .about-grid,
  .group-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .stats-circles-row {
    flex-direction: column;
  }

  .stat-circle {
    width: min(300px, 85vw);
    height: min(300px, 85vw);
  }

  .about-section .stats-circles {
    margin-bottom: clamp(-5.5rem, -12vw, -7.5rem);
  }

  .capabilities-gradient {
    height: clamp(11rem, 28vw, 16rem);
  }

  .services-section.section-spacing {
    padding-top: clamp(5.5rem, 13vw, 8rem);
  }

  .services-title-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .global-presence-text {
    max-width: none;
  }

  .service-item-inner {
    grid-template-columns: 1fr;
  }

  .service-item-image-wrap {
    width: 100%;
  }

  .service-item-link {
    padding-right: 3.25rem;
  }

  .service-detail-grid {
    grid-template-columns: 1fr;
  }

  .service-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .about-page-hero-grid,
  .about-page-overview-grid,
  .about-page-story-grid {
    grid-template-columns: 1fr;
  }

  .about-page-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-intro-panel--page {
    grid-template-columns: 1fr;
  }

  .about-page-media {
    min-height: 420px;
  }

  .technologies-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .service-detail-main--architectural {
    border-radius: 1.5rem;
  }

  .technology-card {
    min-height: 390px;
  }

  .grid-feature,
  .service-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-category-info.head,
  .grid-category-info.row,
  .service-category-row {
    grid-template-columns: 1fr;
  }

  .category-name-wrap,
  .category-name,
  .service-category-name {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .grid-step,
  .service-step-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .step-circles,
  .service-step-grid {
    max-width: 100%;
  }

  .service-faq-section--architectural .faq-answer {
    padding-right: 0;
  }

  .cta-contact-form {
    grid-template-columns: 1fr;
  }

  .cta-form-title {
    max-width: 11ch;
  }

  .architectural-category-top {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .service-category-panel--architectural {
    min-height: auto;
    padding-bottom: clamp(7rem, 14vw, 9rem);
  }

  .service-category-panel--architectural .grid-category-info.head,
  .service-category-panel--architectural .grid-category-info.row {
    grid-template-columns: 1fr;
  }

  .service-category-panel--architectural .grid-category-info.row .category-name,
  .service-category-panel--architectural .grid-category-info.row .category-details,
  .service-category-panel--architectural .grid-category-info.head .category-name,
  .service-category-panel--architectural .grid-category-info.head .category-details {
    border-bottom: none;
  }

  .service-step-section--architectural .step-circles {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }

  .service-step-section--architectural .line-wrapper {
    display: none;
  }

  .industry-content-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .industry-image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 814 / 458;
  }

  .industry-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 814 / 458;
  }

  .industry-content {
    border-left: none;
    border-top: 1px solid var(--border);
  }

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

  .footer > .container-full::before {
    background-image: repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(50% - 1px),
      rgba(255, 255, 255, 0.1) calc(50% - 1px),
      rgba(255, 255, 255, 0.1) 50%
    );
  }

  .footer-col:nth-child(3) .footer-links .footer-link {
    white-space: normal;
  }

  .footer-col {
    border-left: none;
  }

  .footer-col:nth-child(3),
  .footer-col:nth-child(5) {
    border-left: none;
  }

  .footer-col--connect {
    grid-column: 1 / -1;
    border-left: none !important;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }

  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
    align-items: stretch;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 0.5rem;
    margin-left: 0.75rem;
    padding: 0.35rem 0;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    transition: max-height var(--transition), visibility var(--transition);
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    visibility: visible;
    max-height: 480px;
  }

  .menu-toggle {
    display: flex;
  }

  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .hero-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.75rem;
  }

  .industry-tabs-menu {
    flex-direction: column;
  }

  .industry-tab {
    border-right: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  .industry-tab:last-child {
    border-bottom: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-col,
  .footer-col + .footer-col {
    border-left: none;
    padding: 0 0 1.75rem;
  }

  .footer-col:last-child {
    padding-bottom: 0;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer-newsletter {
    max-width: 100%;
  }

  .footer-shadow {
    width: min(320px, 70vw);
    opacity: 0.45;
  }

  .footer-shadow._01 {
    top: -5%;
    right: -20%;
  }

  .footer-shadow._02 {
    bottom: 0;
    left: -25%;
  }

  .service-cards-grid {
    grid-template-columns: 1fr;
  }

  .technologies-hero {
    padding-top: 110px;
  }

  .service-detail-main--architectural {
    padding: 1.35rem 1rem 1.5rem;
    border-radius: 1.25rem;
  }

  .service-detail-main--architectural .service-detail-description {
    margin-bottom: 1.35rem;
  }

  .about-page-hero {
    padding-top: 110px;
  }

  .about-page-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .about-page-hero-title {
    max-width: none;
    font-size: clamp(2.55rem, 11vw, 3.8rem);
  }

  .about-page-hero-action {
    padding-bottom: 0;
  }

  .about-page-hero-action .btn {
    width: 100%;
    justify-content: center;
  }

  .about-page-values-grid {
    grid-template-columns: 1fr;
  }

  .about-page-media {
    min-height: 340px;
  }

  .about-page-panel,
  .about-page-facility-card {
    padding: 1.2rem 1rem;
  }

  .about-page-quote {
    padding: 1rem 1.05rem;
    font-size: 1.1rem;
  }

  .about-page-audience span {
    width: 100%;
    text-align: center;
  }

  .technologies-grid {
    grid-template-columns: 1fr;
  }

  .technology-card {
    min-height: auto;
    padding: 1.45rem 1.1rem;
  }

  .technology-card-title {
    font-size: 1.08rem;
  }

  .technology-card-title span {
    font-size: 0.95rem;
  }

  .technology-card-description,
  .technology-meta-value {
    font-size: 0.9rem;
  }

  .technologies-cta {
    padding: 1.25rem 1.1rem;
  }

  .technologies-cta-title {
    max-width: 18ch;
  }

  .technologies-cta .btn-cta-light {
    width: 100%;
    justify-content: space-between;
  }

  .grid-feature,
  .service-feature-grid {
    grid-template-columns: 1fr;
  }

  .step-circle,
  .service-step-card {
    width: min(260px, 88vw);
  }

  .cta-section--architectural-form {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .cta-form-title {
    font-size: clamp(2.25rem, 11vw, 3.3rem);
    max-width: 9.5ch;
  }

  .cta-contact-form input,
  .cta-contact-form textarea {
    font-size: 0.95rem;
    padding: 0.95rem 1rem;
  }

  .service-category-panel--architectural {
    padding-top: 3.25rem;
    padding-bottom: 6rem;
  }

  .service-category-panel--architectural .service-category-title {
    font-size: clamp(2rem, 11vw, 2.9rem);
    max-width: 9.5ch;
  }

  .service-category-panel--architectural .grid-category-info.head {
    display: none;
  }

  .service-category-panel--architectural .grid-category-info.row {
    display: block;
    border: none;
    margin-bottom: 1.6rem;
  }

  .service-category-panel--architectural .grid-category-info.row.last {
    margin-bottom: 0;
  }

  .service-category-panel--architectural .grid-category-info.row .category-name {
    padding: 0 0 0.9rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
  }

  .service-category-panel--architectural .grid-category-info.row .category-details {
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1rem 1rem 1.15rem;
  }

  .service-category-panel--architectural .category-details ul {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .service-category-panel--architectural .category-details li {
    padding-left: 1.05rem;
  }

  .service-step-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
  }

  .cta-section,
  .cta-section.section-spacing {
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }

  .cta-title {
    max-width: none;
  }
}

/* ── Contact page ── */
.page-contact {
  background-color: var(--bg-subtle);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.contact-page-section {
  position: relative;
  overflow: hidden;
  padding: clamp(5.5rem, 10vw, 7.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  min-height: min(100vh, 920px);
}

.contact-page-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    var(--page-guide-lines),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 139, 139, 0.06), transparent 55%),
    linear-gradient(180deg, #f4f4f4 0%, #efefef 48%, #f7f7f7 100%);
  background-attachment: fixed, scroll, scroll;
}

.contact-page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

.contact-page-lines {
  display: none;
}

.contact-page-lines .section-line {
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.06);
  flex: none;
}

.contact-page-inner {
  position: relative;
  z-index: 1;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-info {
  position: sticky;
  top: clamp(5.5rem, 10vw, 7rem);
  padding-top: 0.5rem;
}

.contact-page-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--dark);
  margin: 0 0 1.25rem;
  max-width: 12ch;
}

.contact-page-title .text-teal {
  color: var(--teal);
}

.contact-page-lead {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 38ch;
  margin: 0 0 2rem;
}

.contact-brochure-btn {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.contact-info-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-info-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--teal);
  margin: 0 0 1rem;
}

.contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.contact-info-list a,
.contact-info-address {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  line-height: 1.45;
  transition: color var(--transition);
}

.contact-info-list a:hover {
  color: var(--teal);
}

.contact-info-address {
  margin: 0;
  max-width: 22ch;
}

.contact-form-panel {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: 16px;
  background: linear-gradient(165deg, #1a1a1a 0%, #121212 55%, #0f0f0f 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}

.contact-form-glow {
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: min(55%, 280px);
  height: min(55%, 280px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 120, 60, 0.35) 0%, transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}

.contact-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.15rem;
}

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

.contact-form-row--half {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.5rem;
}

.contact-required {
  color: var(--footer-accent);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 30, 30, 0.85);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.contact-field textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.contact-field input:hover,
.contact-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(0, 194, 194, 0.65);
  box-shadow: 0 0 0 3px rgba(0, 194, 194, 0.12);
  background: rgba(36, 36, 36, 0.95);
}

.contact-field.is-invalid input,
.contact-field.is-invalid textarea {
  border-color: #e85d5d;
  box-shadow: 0 0 0 2px rgba(232, 93, 93, 0.15);
}

.contact-field-error {
  display: block;
  min-height: 1.25rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #ff8a8a;
}

.contact-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 0.35rem;
}

.contact-submit-btn {
  min-width: 120px;
  padding: 0.95rem 1.75rem;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: var(--dark);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.contact-submit-btn:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 139, 139, 0.35);
}

.contact-form-status {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}

.contact-form-status.is-success {
  color: #7dffd4;
}

.contact-form-status.is-error {
  color: #ff9a9a;
}

.contact-map-section {
  padding: 0 0 clamp(4rem, 8vw, 6rem);
  background-color: var(--bg-subtle);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

.contact-map-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-map-embed {
  display: block;
  width: 100%;
  height: clamp(280px, 50vw, 450px);
  border: 0;
}

@media (max-width: 1024px) {
  .contact-info {
    position: static;
  }

  .contact-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-form-row--half {
    grid-template-columns: 1fr;
  }

  .contact-info-blocks {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-page-title {
    max-width: none;
  }
}

/* Light sections — vertical guide lines */
.page-hero,
.technologies-hero,
.service-detail-section {
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}

body.page-technologies {
  background-color: var(--bg);
  background-image: var(--page-guide-lines);
  background-attachment: fixed;
}