/* Swiss Metrotiles — Main Stylesheet */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --cream: #f7f5ef;
  --brown: #452112;
  --near-black: #24222e;
  --charcoal: #202325;
  --footer-bg: #351508;
  --text-mid: #525252;
  --text-dark: #2c150f;
  --border: #c9c7c4;
  --white: #fff;
  --font: "Archivo", system-ui, sans-serif;
  --font-cond: "Archivo Condensed", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-w: 1628px;
  --gutter: clamp(20px, 3vw, 50px);
  --scale: 1;

  /* Aliases used by inner-page templates (about/approach/contact/products/single-*) */
  --dark: var(--near-black);
  --mid: var(--text-mid);
  --light: #ece8df;
  --off-white: var(--cream);
  --cream-alt: #efeadf;
  --accent: #c8a96e;
  --content-max: var(--max-w);
  --nav-h: 100px;
}

/* ── RESET ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--font);
  color: var(--near-black);
  background: var(--footer-bg);
  overflow-x: hidden;
}
html,
body {
  overscroll-behavior: none;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
ul {
  list-style: none;
}

/* ── INTRO LOADER ────────────────────────────────────────── */
.intro-loader {
  position: fixed;
  width: 100svw;
  height: 100svh;
  top: 0;
  left: 0;
  background: var(--cream);
  z-index: 10000;
  pointer-events: none;
}
.intro-card-wrap {
  width: clamp(200px, 29vw, 100px);
  height: clamp(240px, 29vw, 250px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* will-change: transform, width; */
  position: absolute;
}
/* CARD */

.intro-card {
  width: clamp(200px, 29vw, 100px);
  height: clamp(240px, 29vw, 250px);
  perspective: 1000px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transform-style: preserve-3d;
}

/* IMAGE LAYERS */

.intro-img-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  backface-visibility: hidden;
  /* transform-origin: center bottom;
  transform-style: preserve-3d;
  will-change: transform, opacity; */
}

/* BARS WIPE */

.intro-bars {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 100;
  pointer-events: none;
}

.intro-bars span {
  flex: 1;
  background: var(--cream);
  transform: translateY(100%);
}

.intro-img-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.intro-counter {
  font-family: var(--font-cond);
  font-size: clamp(42px, 6vw, 103px);
  font-weight: 400;
  letter-spacing: -0.05em;
  color: #525252;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 1000000000;
}

/* ── PAGE TRANSITION ─────────────────────────────────────── */
.page-mask {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.page-mask.visible {
  opacity: 1;
  pointer-events: all;
}

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.rv.d1 {
  transition-delay: 0.1s;
}
.rv.d2 {
  transition-delay: 0.2s;
}
.rv.d3 {
  transition-delay: 0.3s;
}
.rv.d4 {
  transition-delay: 0.4s;
}
.rv.fade {
  transform: none;
}

/* ── SITE NAV ────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 600px;
  height: 60px;
  padding: 0 20px;
  background: rgba(36, 34, 46, 0.95);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 8px;
  will-change: width;
  overflow: hidden;
}
.nav-quote-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-quote-btn svg {
  flex-shrink: 0;
  color: #fff;
  opacity: 0.8;
}
.nav-wordmark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
}
.nav-wordmark svg {
  display: block;
  height: 18px;
  width: auto;
  flex-shrink: 0;
}
.nav-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #fff;
  flex-shrink: 0;
}
.nav-close-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  color: #fff;
  pointer-events: none;
}

/* ── MENU PANEL ──────────────────────────────────────────── */
.menu-panel {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 400px;
  background: rgba(36, 34, 46, 1);
  border-radius: 8px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
  visibility: hidden;
  will-change: transform, opacity;
  max-height: calc(100svh - 140px);
  overflow-y: auto;
}
.menu-tag {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #918f82;
}
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-wrap {
  overflow: hidden;
  display: block;
  padding-bottom: 2px;
}
.ml-wrap a {
  display: block;
  font-family: var(--font);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -1px;
  color: #d9d9d9;
  transition: color 0.2s;
  will-change: transform;
}
.ml-wrap a:hover,
.ml-wrap a[aria-current="page"] {
  color: #fff;
}
.menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 4px 0;
}
.menu-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-contact-label {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: #918f82;
  min-width: 42px;
}
.menu-contact-value {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: color 0.2s;
}
.menu-contact-value:hover {
  color: rgba(255, 255, 255, 0.7);
}
.menu-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  background: #fff;
  color: var(--near-black);
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  transition: background 0.2s;
}
.menu-cta-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}
.menu-cta-btn svg {
  flex-shrink: 0;
}

/* ── MENU BACKDROP ───────────────────────────────────────── */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  visibility: hidden;
  will-change: opacity;
}

/* ── SECTION TAGS ────────────────────────────────────────── */
.section-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--near-black);
  margin-bottom: 12px;
}
.section-tag.light {
  color: #fff;
}
.section-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.section-tag-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 30px 0 0;
  border-top: 1px solid var(--border);
}
.section-tag-row.light {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.section-hr {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  transform-origin: left center;
}
/* The hero's eyebrow reuses .section-tag-row for its dot+fade-in animation,
   but shouldn't carry the divider line meant for mid-page section headers. */
.page-hero-inner .section-hr,
.chairman-statement .section-hr,
.contact-row-label .section-hr,
.contact-cta-text > .section-tag-row .section-hr,
.pdp-other-collections .section-hr,
.pdp-need-help .section-hr {
  display: none;
}
.section-tag-row.light .section-hr {
  background: rgba(255, 255, 255, 0.12);
}

/* ── ACTION BUTTONS ──────────────────────────────────────── */
.smt-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 20px;
  border-radius: 8px;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  height: 48px;
}
.smt-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.smt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.smt-btn-dark {
  background: var(--near-black);
  color: #fff;
}
.smt-btn-white {
  background: #fff;
  color: var(--near-black);
}

/* ── HOVER SLIDE ─────────────────────────────────────────── */
.hover-slide {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.hs-1,
.hs-2 {
  display: block;
  font-size: 14px;
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
/* .hs-1/.hs-2 are reused by applySlideHover() for several different
   components (nav/menu buttons, smt-btn, menu links) — .ml-wrap a has its
   own much larger font-size that the shared rule above would otherwise
   clobber, so it's restored here specifically. */
.ml-wrap a .hs-1,
.ml-wrap a .hs-2 {
  font-size: inherit;
}
.hs-2 {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  pointer-events: none;
}
a:hover .hs-1,
button:hover .hs-1,
a:hover .hs-2,
button:hover .hs-2 {
  transform: translateY(-100%);
}

/* ── HERO SECTION ────────────────────────────────────────── */
.hero-section {
  background: var(--cream);
  position: relative;
  overflow: visible;
}

/*
  hero-viewport: full-viewport column.
  heading sits at top (padding-top),
  hero-card-row uses margin-top:auto to anchor to bottom,
  hero-bottom-bar is absolute at bottom:0 of this viewport.
  padding-bottom:80px reserves space for the absolute bar.
*/
.hero-viewport {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(140px, 13vw, 230px);
  padding-bottom: 80px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.hero-heading-mask {
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.text-reveal-clip {
  overflow: hidden;
}

.hero-bg-texture {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-bg-texture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.hero-heading {
  position: relative;
  z-index: 2;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 103px);
  color: var(--brown);
  text-align: center;
  letter-spacing: -0.05em;
  line-height: 1;
  max-width: clamp(300px, 92vw, 1500px);
  margin-bottom: clamp(30px, 4vw, 60px);
}

/* margin-top:auto anchors the card-row to the bottom of the viewport */
.hero-card-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-top: auto;
}

/* vw-based width keeps card proportional to viewport at any zoom level */
.hero-card-scroll {
  position: relative;
  z-index: 10;
  width: clamp(240px, 29vw, 500px);
  flex-shrink: 0;
  margin-bottom: clamp(-300px, -17.4vw, -80px);
}

.hero-card {
  width: 100%;
  border: 5px solid #fcf6ec;
  border-radius: 8px;
  overflow: hidden;
  background: #d9d9d9;
  clip-path: inset(100% 0% 0% 0%);
  will-change: clip-path, transform;
}
.hero-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.hero-sub {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: clamp(16px, 2.5vw, 40px);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(16px, 2.1vw, 36px);
  color: var(--text-dark);
  letter-spacing: -0.03em;
  line-height: 1.4;
  max-width: clamp(260px, 30vw, 514px);
}

.hero-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--border);
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: #525252;
  mix-blend-mode: multiply;
}
.hero-scroll-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-scroll-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #525252;
  flex-shrink: 0;
}

/* ── FULLWIDTH BANNER ────────────────────────────────────── */
.banner-fullwidth {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 50vw;
  max-height: 850px;
  min-height: 300px;
  overflow: hidden;
  background: #d9d9d9;
  padding-top: clamp(120px, 13vw, 220px);
}
.banner-fullwidth img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── ABOUT SECTION ───────────────────────────────────────── */
.about-section {
  background: var(--cream);
  padding: clamp(100px, 13vw, 50px) var(--gutter);
}
.about-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 60px);
  align-items: flex-start;
}
.about-text {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 58px);
  color: var(--brown);
  letter-spacing: -0.02em;
  line-height: 1.17;
}

/* ── PRODUCTS SECTION ────────────────────────────────────── */
.products-section {
  background: var(--cream);
  padding: 0 var(--gutter) clamp(60px, 6vw, 100px);
}
.products-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.prod-featured-row {
  display: grid;
  grid-template-columns: minmax(240px, 480px) 400px;
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
  justify-content: center;
  padding-top: clamp(40px, 5vw, 80px);
  margin-bottom: clamp(60px, 8vw, 120px);
}
.prod-main-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #d9d9d9;
  cursor: pointer;
}
.prod-main-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3/4;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prod-main-card:hover img {
  transform: scale(1.07);
}
.prod-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-card-label {
  font-family: var(--font);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -1px;
  text-align: center;
  padding: 16px;
  line-height: 1.3;
}
.prod-copy-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 400px;
  max-width: 400px;
}
.prod-copy-text {
  font-family: var(--font);
  font-size: 18px;
  color: #525252;
  line-height: 1.6;
}
.prod-copy-text strong {
  font-weight: 600;
  color: #000;
}

/* Scattered grid: 3 product cards */
.prod-scattered-grid {
  display: grid;
  grid-template-columns: 380fr 352fr 338fr 130fr 428fr;
  align-items: flex-start;
  padding-top: clamp(20px, 4vw, 60px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.prod-scatter-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #d9d9d9;
  cursor: pointer;
}
.prod-scatter-card:nth-child(1) {
  grid-column: 1;
  aspect-ratio: 380/480;
  align-self: end;
  margin-top: 80px;
}
.prod-scatter-card:nth-child(2) {
  grid-column: 3;
  aspect-ratio: 338/430;
  align-self: start;
}
.prod-scatter-card:nth-child(3) {
  grid-column: 5;
  aspect-ratio: 428/543;
  align-self: start;
  margin-top: 60px;
}
.prod-scatter-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prod-scatter-card:hover img {
  transform: scale(1.07);
}
.prod-scatter-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.prod-scatter-label {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
}

/* ── PRODUCT / PROJECT SCATTER GRID (Products page, Projects archive) ──
   Same visual language as .prod-scattered-grid/.prod-scatter-card above
   (used on the homepage), but a plain uniform grid instead of the
   homepage's hand-placed staggered layout, and the label sits inside its
   own media box rather than a separate overlay wrapper. */
.prod-scattered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.prod-scatter-media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
  background: #d9d9d9;
}
.prod-scatter-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prod-scatter:hover .prod-scatter-media img {
  transform: scale(1.07);
}
.prod-scatter-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%);
}
.prod-scatter-media .prod-scatter-label {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-size: 32px;
  text-align: left;
}

/* ── "OTHER COLLECTIONS" CAROUSEL (product detail page) ──────
   Reuses .prod-scatter-media/.prod-scatter-label as-is, in a horizontal
   scroll-snap row instead of the Products page's grid. */
.prod-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.prod-carousel::-webkit-scrollbar {
  display: none;
}
.prod-carousel-card {
  flex: 0 0 clamp(220px, 26vw, 320px);
  scroll-snap-align: start;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.project-card {
  cursor: pointer;
}
.project-card-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--light);
}
.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.project-card:hover .project-card-media img {
  transform: scale(1.07);
}
.project-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
}
.project-card-info {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #fff;
}
.project-card-meta {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}
.project-card-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .prod-scattered,
  .projects-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .prod-scattered,
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* ── SHOWROOM SECTION ────────────────────────────────────── */
.showroom-section {
  background: var(--charcoal);
  color: #fff;
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.showroom-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  height: 100%;
  position: relative;
}
.showroom-media {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: #8a8a8a;
  /* Size and position managed by GSAP */
}
.showroom-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.showroom-copy {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: clamp(360px, 40vw, 680px);
  z-index: 2;
  /* yPercent and x managed by GSAP */
}
.showroom-heading {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 58px);
  letter-spacing: -1px;
  line-height: 1.17;
  color: #fff;
}

/* ── SERVICES SECTION ────────────────────────────────────── */
.services-section {
  background: var(--cream);
  padding: clamp(60px, 6vw, 100px) var(--gutter);
}
.services-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.services-header {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 50px);
  margin-bottom: clamp(20px, 3vw, 40px);
}
.services-heading {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 58px);
  color: var(--brown);
  letter-spacing: -1px;
  line-height: 1.17;
}
.services-list {
  display: flex;
  flex-direction: column;
}
.service-item {
  border-bottom: 1px solid var(--border);
}
.service-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  cursor: pointer;
}
.service-title-row {
  display: flex;
  align-items: center;
  gap: 30px;
}
.service-num {
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.service-title {
  font-family: var(--font);
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  color: #000;
  letter-spacing: -1px;
}
.service-plus-btn {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #000;
  transition: background 0.2s, color 0.2s, border-color 0.2s,
    transform 0.35s var(--ease);
}
.service-plus-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.service-plus-btn svg path {
  stroke: currentColor;
}
.service-item.open .service-plus-btn {
  background: var(--near-black);
  color: #fff;
  border-color: var(--near-black);
  transform: rotate(45deg);
}
.service-body {
  display: flex;
  gap: clamp(20px, 3vw, 50px);
  padding-bottom: 0;
  align-items: flex-start;
  overflow: hidden;
  height: 0;
}
/* CSS fallback when GSAP is unavailable */
.service-item.open .service-body {
  height: auto;
  padding-bottom: 30px;
}
/* Desktop: the original 3-part row — primary image, copy, secondary image
   at the far right (top-aligned) — restored by letting the wrapper
   disappear from the box model so its two images become direct flex
   items of .service-body again, reordered around the copy in between.
   Below 768px this wrapper becomes a real flex row instead (see media
   query), grouping the two images side by side above the copy, with the
   secondary one smaller and bottom-aligned — same structure as
   .process-media's media-a/media-b pair in the "6 steps" section. */
.service-body-media {
  display: contents;
}
.service-body-img {
  order: 1;
  flex-shrink: 0;
  width: clamp(180px, 32vw, 562px);
  overflow: hidden;
  border-radius: 4px;
  background: #8a8a8a;
}
.service-body-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.service-body-copy {
  order: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service-body-text {
  font-family: var(--font);
  font-size: 18px;
  color: #525252;
  line-height: 1.6;
}
.service-body-img-secondary {
  order: 3;
  flex-shrink: 0;
  width: clamp(100px, 16vw, 220px);
  align-self: flex-start;
  overflow: hidden;
  border-radius: 4px;
  background: #8a8a8a;
}
.service-body-img-secondary img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.services-empty {
  font-family: var(--font);
  font-size: 16px;
  color: #888;
  padding: 20px 0;
}

/* ── DUAL IMAGE SECTION ──────────────────────────────────── */
.dual-image-section {
  background: var(--white);
  padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(20px, 2vw, 40px);
  overflow-x: hidden;
}
.dual-image-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-end;
}
.dual-img-small {
  flex-shrink: 0;
  width: clamp(160px, 27vw, 465px);
  border-radius: 4px;
  overflow: hidden;
  background: #d9d9d9;
  will-change: transform;
}
.dual-img-small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 465 / 566;
}
.dual-img-large {
  flex-shrink: 0;
  width: clamp(260px, 41.5vw, 718px);
  border-radius: 4px;
  overflow: hidden;
  background: #d9d9d9;
}
.dual-img-large img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 718 / 972;
}

/* ── OTHER BUSINESSES ────────────────────────────────────── */
.businesses-section {
  background: var(--white);
  padding: clamp(60px, 6vw, 100px) var(--gutter);
}
.businesses-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.businesses-text {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 58px);
  color: var(--brown);
  letter-spacing: -1px;
  line-height: 1.17;
  margin-top: clamp(30px, 4vw, 50px);
  margin-bottom: clamp(50px, 6vw, 100px);
}
.business-cards {
  display: flex;
  gap: clamp(16px, 3vw, 50px);
}
.business-card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.business-card-logo {
  height: clamp(100px, 5.5vw, 86px);
  padding: clamp(16px, 1.8vw, 25px);
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.business-card-logo img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.business-card-body {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 5vw, 80px);
  padding: 30px;
  flex: 1;
}
.business-card-desc {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.5;
}

/* ── SCROLL CONTAINER — sits above fixed footer ──────────── */
#scroll-container {
  position: relative;
  z-index: 1;
  /* #footer-reveal-spacer (appended by main.js) is the empty trailing block
     that lets the fixed, lower-z-index footer show through at the real end
     of the page — it's given pointer-events:none inline so clicks reach the
     footer beneath it. But that alone isn't enough: with pointer-events:none
     only on the spacer, a click there still lands on THIS container (the
     spacer's own parent, covering the exact same area) instead of passing
     through, which is why footer buttons looked clickable but weren't.
     Disabling pointer-events here and re-enabling it on every direct child
     section lets clicks fall through only in that empty spacer's area. */
  pointer-events: none;
}
#scroll-container > * {
  pointer-events: auto;
}

/* ── FOOTER — fixed behind scroll container, revealed on scroll ── */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background: var(--footer-bg);
  color: #fff;
  overflow: hidden;
}
.footer-inner {
  display: grid;
  grid-template-columns: clamp(180px, 31vw, 538px) 1fr;
  column-gap: 100px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.footer-image {
  overflow: hidden;
  flex-shrink: 0;
  background: #8a8a8a;
  min-height: clamp(200px, 37vw, 633px);
}
.footer-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.footer-content {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 100px);
  padding-right: var(--gutter);
  padding-left: 0;
}
.footer-cta-row {
  display: flex;
  gap: clamp(20px, 3vw, 50px);
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(40px, 5vw, 100px) 0 clamp(30px, 4vw, 50px);
  border-bottom: 1px solid rgba(103, 75, 63, 1);
}
.footer-cta-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 40px);
  letter-spacing: -2px;
  line-height: 1.3;
  color: #fff;
}
.footer-contact-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: clamp(40px, 5vw, 80px);
}
.footer-email,
.footer-phone {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 36px);
  color: #fff;
  letter-spacing: -1px;
}
.footer-bottom-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-address {
  font-family: var(--font);
  font-size: 16px;
  color: #dad5cd;
  line-height: 1.5;
  max-width: 280px;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.footer-copyright,
.footer-credit {
  font-family: var(--font);
  font-size: 16px;
  color: #dad5cd;
  line-height: 1.5;
}
.footer-credit a {
  color: #fff;
  text-decoration: underline;
}
.footer-watermark {
  text-align: center;
  font-family: var(--font);
  font-size: 15.2vw;
  color: #dad5cd;
  letter-spacing: -0.05em;
  line-height: 0.95;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
  padding: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.footer-watermark div {
  transform: translateX(-0.1em);
}
.wm-bold {
  font-weight: 700;
}

.wm-medium {
  font-weight: 500;
}

/* ── INNER PAGES ─────────────────────────────────────────── */
.page-hero {
  min-height: 55svh;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--gutter) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.page-hero-title {
  font-size: clamp(44px, 7.5vw, 108px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.93;
  margin-top: 20px;
  color: var(--near-black);
}
.page-hero-title em {
  font-style: normal;
  font-weight: 400;
}

.content-sec {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.content-sec-inner {
  margin: 0 auto;
}
.content-sec.dark-sec {
  background: var(--near-black);
  color: #fff;
  border-top: none;
}

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--near-black);
}
.sec-label::before {
  content: "◆";
  font-size: 6px;
}
.sec-label.light,
.sec-label.light::before {
  color: rgba(255, 255, 255, 0.9);
}

.sec-title {
  font-size: clamp(30px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}
.sec-title em {
  font-style: normal;
}
.t-body {
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.8;
  color: #525252;
}
.dark-sec .t-body {
  color: rgba(255, 255, 255, 0.45);
}

.col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.col-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.col-2-3 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.feature-list {
  display: flex;
  flex-direction: column;
}
.feature-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.feature-num {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #b8b4ac;
  padding-top: 3px;
}
.feature-title {
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.feature-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #525252;
}

.timeline {
  display: flex;
  flex-direction: column;
}
.timeline-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.timeline-step {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(36, 34, 46, 0.1);
}
.timeline-title {
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.timeline-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #525252;
}

/* ── ABOUT — MISSION STATEMENT (fixed image, scrolling text) ───────── */
/* #mission-fixed (image only) is rendered in header.php, OUTSIDE
   #scroll-container, so it can be genuinely position:fixed relative to the
   viewport (see the comment in header.php for why). This anchor holds the
   real, in-flow text — it scrolls with the page like everything else — and
   is also the ScrollTrigger reference for the colour-sweep in main.js. */
.mission-anchor {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.mission-fixed {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  /* The image sits at reduced opacity and the gradient below it is only
     partly opaque, so on their own they let whatever is behind this layer
     (the footer, which is fixed and only ever mostly — not fully — hidden
     by its own reveal animation, see main.js) show through. This solid
     base guarantees the section is fully opaque regardless, since z-index
     alone only controls paint order, not how much shows through it. */
  background: var(--near-black);
}
.mission-fixed.is-hidden {
  opacity: 0;
}
.mission-fixed .mission-media {
  position: absolute;
  inset: 0;
}
/* Static baseline contrast for the bottom-anchored text, independent of the
   scroll-driven #mission-overlay (which starts fully transparent). */
.mission-fixed .mission-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 34, 46, 0) 0%,
    rgba(36, 34, 46, 0.75) 100%
  );
}
.mission-fixed .mission-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Starts fully clear; JS fades this down to 0.55 as the section scrolls
     through, same range as the overlay fade-in and text colour sweep. */
  opacity: 1;
}
/* No overlay by default — it fades in via JS as the mission-anchor section
   scrolls through, so the image starts clear and darkens toward the end. */
.mission-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 34, 46, 1) 0%,
    rgba(36, 34, 46, 1) 100%
  );
}
.mission-content {
  max-width: 820px;
  padding: clamp(40px, 6vw, 80px) var(--gutter);
}
.mission-text {
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mission-text .char {
  color: #6e6b66;
}

/* ── ABOUT — PROCESS STEPPER ("Trust the process") ─────────── */
/* The whole section (title + stepper) is what gets pinned once it reaches
   the top of the viewport, so the eyebrow/heading stay on screen exactly
   like the step content beneath them — matching the reference. A single
   .process-section-inner carries the max-width/gutter (as every other
   section's own "-inner" wrapper does), so nothing inside repeats it. */
.process-section {
  background: #f7f1e9;
}
.process-section-inner {
  margin: 0 auto;
  padding: clamp(100px, 13vw, 50px) 0;
  /* Keep the section's own horizontal gutter so content never touches the
     browser edge, independent of the vertical padding above. */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.process-title-row {
  flex-shrink: 0;
  margin-bottom: clamp(24px, 4vh, 48px);
}

.process-stepper {
  position: relative;
}
.process-stepper-inner {
  position: relative;
}
.process-step {
  display: grid;
  grid-template-columns: minmax(0, 65%) 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
  width: 100%;
  padding: clamp(24px, 3vh, 40px) 0;
  border-top: 1px solid var(--border);
}
.process-step:first-child {
  border-top: none;
}

/* JS-enhanced (pinned) state: the section fills exactly one viewport height
   (see .process-section.is-pinned below), the stepper fills whatever space
   is left under the title, and steps stack on top of one another inside it,
   crossfading as ScrollTrigger reports progress. */
.process-section.is-pinned .process-section-inner {
  height: 100svh;
}
.process-section.is-pinned .process-stepper {
  flex: 1;
  min-height: 0;
}
.process-section.is-pinned .process-stepper-inner {
  height: 100%;
}
.process-stepper.is-pinned .process-step {
  position: absolute;
  inset: 0;
  border-top: none;
  pointer-events: none;
  /* The step becoming active is always drawn above every other step,
     whichever direction you're scrolling, so its media reveal always
     overlaps (rather than races) whatever was showing before it. */
  z-index: 1;
}
.process-stepper.is-pinned .process-step.is-active {
  pointer-events: auto;
  z-index: 2;
}
/* Content still crossfades... */
.process-stepper.is-pinned .process-content {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.process-stepper.is-pinned .process-step.is-active .process-content {
  opacity: 1;
}
/* ...but the media wipes in/out vertically instead of fading. The outgoing
   step's clip-path change is delayed by the full reveal duration (rather
   than reverting immediately), so it stays fully visible underneath —
   covered progressively by the incoming step's own reveal — instead of
   both being briefly hidden at once and flashing blank. */
.process-stepper.is-pinned .process-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0s 0.8s;
}
.process-stepper.is-pinned .process-step.is-active .process-media {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.8s var(--ease);
}
.process-stepper.is-pinned .process-media-a img,
.process-stepper.is-pinned .process-media-b img {
  transform: scale(1.15);
  transition: transform 0s 0.8s;
}
.process-stepper.is-pinned .process-step.is-active .process-media-a img,
.process-stepper.is-pinned .process-step.is-active .process-media-b img {
  transform: scale(1);
  transition: transform 1s var(--ease);
}

/* Width and height are both given explicit caps (never just one, with the
   other left to aspect-ratio) so the boxes can never compute larger than
   their column — object-fit:cover on the <img> absorbs any mismatch between
   the capped box and the 4/3 aspect-ratio instead of the box overflowing. */
.process-media {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.process-media-a {
  flex: 0 1 64%;
  max-width: 64%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
}
.process-media-b {
  flex: 0 1 32%;
  max-width: 32%;
  align-self: flex-end;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
}
.process-section.is-pinned .process-media {
  height: 100%;
  max-height: 100%;
}
.process-section.is-pinned .process-media-a {
  height: 100%;
  max-height: 100%;
}
.process-section.is-pinned .process-media-b {
  height: 62%;
  max-height: 62%;
}
.process-media-a img,
.process-media-b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.process-content-bottom {
  margin-top: auto;
}

.process-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mid);
}
.process-counter-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border: 2px solid var(--mid);
  border-radius: 20px;
  color: var(--mid);
}
.process-step-title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.process-step-desc {
  max-width: 46ch;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--mid);
  margin-bottom: 20px;
}

/* Browsers always render a <details>'s <summary> in its own slot ahead of
   the rest of the content, regardless of source order — reordering the
   markup doesn't change the visual result. Making the element a reversed
   flex column flips that fixed slot order instead, so the list renders
   above the "Read more" control while the control still sits, and stays,
   at the bottom of this block. */
.process-detail {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
}
.process-detail[open] {
  gap: 16px;
}
.process-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--near-black);
}
.process-detail summary::-webkit-details-marker {
  display: none;
}
.process-detail .process-more-label-open {
  display: none;
}
.process-detail[open] .process-more-label-open {
  display: inline;
}
.process-detail[open] .process-more-label-closed {
  display: none;
}
/* A single plus icon that rotates 45deg into an "x" on open, instead of
   swapping to a "x" glyph at a smaller font-size — same icon, same size,
   in both states. The pill itself (40x28, not a circle) must stay put —
   only the icon inside it rotates, so it's a real nested element rather
   than the rotation living on the pill's own ::after. */
.process-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border-radius: 20px;
  background: var(--near-black);
  flex-shrink: 0;
}
.process-more-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  color: #fff;
  transition: transform 0.3s var(--ease);
}
.process-detail[open] .process-more-icon svg {
  transform: rotate(45deg);
}
.process-detail-body {
  height: 0;
  overflow: hidden;
}
.process-detail[open] .process-detail-body {
  height: auto;
}
.process-detail-list {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.process-detail-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mid);
}
.process-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

/* Sits exactly at the gap between the 60%/1fr grid columns of a step, so it
   reads as a divider between the media and the content — and, filled by JS,
   as the step progress bar. */
.process-progress {
  position: absolute;
  top: 0;
  left: calc(65% + (clamp(32px, 5vw, 72px) / 2));
  width: 1px;
  height: 100%;
  background: var(--border);
  display: none;
}
.process-progress-fill {
  width: 100%;
  background: var(--near-black);
  height: 0%;
}
.process-stepper.is-pinned .process-progress {
  display: block;
}

/* ── ABOUT — TESTIMONIAL / PROJECT CARDS ────────────────────── */
.testimonial-card {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}
.testimonial-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.testimonial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 92%);
  margin: clamp(20px, 4vw, 48px);
  padding: clamp(32px, 4vw, 48px);
  background: rgba(36, 34, 46, 0.88);
  color: #fff;
}
.testimonial-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.testimonial-quote {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.testimonial-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}
.testimonial-author {
  font-size: 13px;
  font-weight: 500;
}
.testimonial-role {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

/* ── ABOUT — CHAIRMAN / STANDARDS ────────────────────────────── */
.chairman-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.chairman-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.chairman-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chairman-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 34, 46, 0) 0%,
    rgba(36, 34, 46, 0.75) 100%
  );
}
.chairman-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.chairman-statement {
  color: #fff;
}
.chairman-heading {
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 20px 0 24px;
}
.chairman-heading em {
  font-style: normal;
  font-weight: 400;
}
.chairman-para {
  max-width: 46ch;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: #f7f1e9;
}
.chairman-card {
  background: var(--cream);
  padding: clamp(32px, 4vw, 48px);
  border-radius: 2px;
}
.chairman-quote-mark {
  display: block;
  font-family: var(--font);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--near-black);
  margin-bottom: 8px;
}
.chairman-quote {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--near-black);
  margin-bottom: 24px;
}
.chairman-author {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--near-black);
}
.chairman-role {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mid);
  margin-bottom: 24px;
}
.chairman-stats {
  display: flex;
  flex-direction: column;
}
.chairman-stat {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.chairman-stat-num {
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--near-black);
}
.chairman-stat-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--mid);
  margin-top: 4px;
}
@media (max-width: 1100px) {
  .chairman-inner {
    grid-template-columns: 1fr;
  }
  .chairman-statement {
    margin-bottom: 8px;
  }
}
@media (max-width: 640px) {
  /* Small enough to keep "Certified at every level." (and the Products
     page's equivalent) on one line at this width. */
  .chairman-heading {
    font-size: 26px;
  }
  /* Stronger and reaching further up than the desktop gradient, since the
     tag/heading/paragraph block takes up more of the image's height once
     it's stacked full-width on mobile. */
  .chairman-media-overlay {
    background: linear-gradient(
      180deg,
      rgba(36, 34, 46, 0) 30%,
      rgba(36, 34, 46, 0.85) 100%
    );
  }
}

/* Below 1101px the step layout stacks (media above text), which makes a
   single step taller than one viewport — incompatible with the pinned,
   absolutely-positioned crossfade used on desktop. The JS stepper only
   pins above this same breakpoint (see main.js), so this rule keeps the
   two in sync and lets tablet/mobile fall back to a normal scrolling list. */
@media (max-width: 1100px) {
  /* The JS stepper only pins above this breakpoint (see main.js); these are
     a defensive reset in case the viewport crosses it after pinning was
     already applied (e.g. rotating a tablet), so a stray .is-pinned class
     never leaves the section stuck at a fixed height. */
  .process-section-inner {
    min-height: 0;
    padding-top: clamp(60px, 10vh, 100px);
  }
  .process-section.is-pinned .process-section-inner {
    height: auto;
  }
  .process-section.is-pinned .process-stepper {
    flex: none;
  }
  .process-section.is-pinned .process-stepper-inner,
  .process-section.is-pinned .process-media,
  .process-section.is-pinned .process-media-a,
  .process-section.is-pinned .process-media-b {
    height: auto;
    max-height: none;
  }
  .process-step {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
  }
  .process-step:first-child {
    border-top: none;
  }
  .process-media {
    margin-bottom: 8px;
  }
  /* margin-top:auto only does anything inside the pinned, fixed-height
     column (desktop) — here the column is content-sized, so it resolves
     to 0 and the description sits flush under the title with no gap. */
  .process-content-bottom {
    margin-top: 12px;
  }
  .process-stepper.is-pinned .process-step {
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }
  .process-stepper.is-pinned .process-stepper-inner {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .standards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── FORMS ───────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-group.full {
  grid-column: 1 / -1;
}
.form-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #525252;
}
.form-label .required-asterisk {
  color: #c0392b;
  margin-left: 2px;
}
.form-input,
.form-select,
.form-textarea {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  color: var(--near-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(26, 25, 23, 0.22);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-bottom-color: var(--near-black);
}
.form-textarea {
  resize: none;
  min-height: 110px;
  overflow: hidden;
}
.form-input.has-error,
.form-select.has-error,
.form-textarea.has-error {
  border-bottom-color: #c0392b;
}
.form-error {
  display: none;
  font-size: 12px;
  color: #c0392b;
  margin-top: -2px;
}
.form-error.is-visible {
  display: block;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2324222e' stroke-width='1.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
  cursor: pointer;
}

/* ── PRODUCT DETAIL PAGE ──────────────────────────────────────
   Not an e-commerce layout — every product shows the same simple
   structure (image carousel, title, description, one CTA), built from
   the featured image + Gallery Images field on smt_product (see
   functions.php, group_smt_product), so content is fully admin-editable
   without any per-product options or specs to keep in sync. */
.pdp {
  background: var(--cream);
}
.pdp-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(24px, 3vw, 40px)) var(--gutter) clamp(60px, 8vw, 100px);
}
.pdp-back-row {
  margin-bottom: clamp(24px, 3vw, 40px);
}
.pdp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 500;
  color: var(--near-black);
}
.pdp-back svg {
  width: 16px;
  height: 16px;
}

/* Image on the left, content on the right on desktop; stacked on mobile. */
.pdp-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 900px) {
  .pdp-layout {
    grid-template-columns: 1fr;
  }
}

/* Carousel: horizontal scroll-snap, one full-width slide per image, a
   product-title overlay bottom-left (same treatment as .prod-scatter-media
   elsewhere) and dot indicators synced to scroll position via JS. */
.pdp-carousel {
  margin-bottom: 0;
}
.pdp-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 4px;
}
.pdp-carousel-track::-webkit-scrollbar {
  display: none;
}
.pdp-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--light);
}
.pdp-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}
.pdp-carousel-overlay {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 20px;
}
.pdp-carousel-title {
  font-family: var(--font);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #fff;
}
.pdp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.pdp-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.pdp-carousel-dot.is-active {
  background: var(--near-black);
  transform: scale(1.2);
}

.pdp-info {
  max-width: 68ch;
}
.pdp-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.pdp-desc {
  margin-bottom: 28px;
}
.pdp-desc p + p {
  margin-top: 12px;
}
.pdp-cta {
  display: inline-flex;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery-item {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #c0b8ac;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img {
  transform: scale(1.04);
}

/* ── UTILITY ─────────────────────────────────────────────── */
.not-found {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px var(--gutter);
  background: var(--cream);
}
.not-found-num {
  font-size: clamp(120px, 20vw, 220px);
  font-weight: 400;
  letter-spacing: -0.08em;
  color: rgba(36, 34, 46, 0.08);
  line-height: 1;
}
.not-found-msg {
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: -0.03em;
  margin: 20px 0 40px;
}

.posts-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 48px 0 0;
}
.posts-nav a,
.posts-nav span {
  font-size: 12px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: #525252;
  transition: background 0.2s, color 0.2s;
}
.posts-nav a:hover,
.posts-nav .current {
  background: var(--near-black);
  color: #fff;
  border-color: var(--near-black);
}

/* Legacy inner-page buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
  white-space: nowrap;
  cursor: pointer;
}
.btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.btn-dark {
  background: var(--near-black);
  color: #fff;
  border-color: var(--near-black);
}
.btn-dark:hover {
  background: rgba(36, 34, 46, 0.8);
}
.btn-outline {
  background: transparent;
  color: var(--near-black);
  border-color: rgba(26, 25, 23, 0.2);
}
.btn-outline:hover {
  background: var(--near-black);
  color: #fff;
  border-color: var(--near-black);
}
.btn-outline-inv {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-outline-inv:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── IMAGE PLACEHOLDERS ──────────────────────────────────── */
.img-ph {
  width: 100%;
  height: 100%;
  display: block;
}
.img-ph-a {
  background: linear-gradient(145deg, #c8c0b4, #a09488);
}
.img-ph-b {
  background: linear-gradient(145deg, #b0a898, #8c8478);
}
.img-ph-c {
  background: linear-gradient(145deg, #d4cec4, #b4aca0);
}
.img-ph-d {
  background: linear-gradient(145deg, #a8a094, #887e74);
}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  .prod-scattered-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .prod-scatter-card:nth-child(1),
  .prod-scatter-card:nth-child(2),
  .prod-scatter-card:nth-child(3) {
    aspect-ratio: 3/4;
    margin-top: 0;
  }
}

@media (max-width: 1100px) {
  .site-nav {
    width: calc(100% - 40px);
  }
  .menu-panel {
    width: calc(100% - 40px);
  }
  .showroom-layout {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-image {
    min-height: 300px;
    width: 100%;
  }
  .footer-content {
    padding-left: var(--gutter);
  }
  .prod-featured-row {
    grid-template-columns: 1fr;
  }
  .prod-copy-col {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .page-hero {
    min-height: auto;
  }
  .mission-text {
    font-size: 28px;
  }
  .prod-scatter-media .prod-scatter-label,
  .prod-scatter-label,
  .prod-card-label {
    font-size: 28px;
  }
  /* Below 769px the pin/scrub scroll-jack is skipped in JS (it's the main
     source of scroll lag on true mobile widths — tablet portrait and up
     keeps the desktop pinned treatment), so this section needs a plain
     static fallback instead of the GSAP-only absolute positioning it uses
     above that width — built to land where the desktop version's scroll
     ends up: the image full-bleed with the copy overlapping its
     bottom-left corner over a dark gradient, same treatment as
     .chairman-section. */
  .showroom-section {
    height: auto;
    min-height: 88svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .showroom-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .showroom-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(36, 34, 46, 0) 40%,
      rgba(36, 34, 46, 0.8) 100%
    );
  }
  .showroom-section-inner {
    position: relative;
    z-index: 1;
    height: auto;
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-bottom: clamp(32px, 6vw, 56px);
    padding-left: 16px;
    padding-right: 0;
  }
  .showroom-copy {
    position: static;
    max-width: 100%;
    margin-top: 20px;
    transform: none !important;
  }
  .site-nav {
    width: calc(100% - 32px);
    top: 20px;
    padding: 0 16px;
    height: 54px;
  }
  /* Two elements only on mobile — logo left, hamburger right. The wordmark
     is absolutely centred by default (built for the 3-element desktop
     pill), so it's switched into normal flow here and lands on the left
     purely from justify-content:space-between once the quote button is
     out of the layout. */
  .nav-quote-btn {
    display: none;
  }
  .nav-wordmark {
    position: static;
    transform: none;
  }
  .menu-panel {
    width: calc(100% - 32px);
    top: 100px;
    padding: 36px;
  }
  /* On mobile, card-row stacks vertically — no auto-push needed. The hero
     no longer needs to fill the screen (that was only to anchor the old
     bottom bar), and the card keeps the same overlap-the-banner treatment
     as desktop instead of sitting flush above it. */
  .hero-viewport {
    min-height: auto;
    padding-top: 150px;
    padding-bottom: 0;
  }
  .hero-card-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: clamp(40px, 8vw, 60px);
  }
  .hero-sub {
    position: relative;
    bottom: auto;
    left: auto;
    max-width: 100%;
    font-size: clamp(16px, 4.5vw, 24px);
    align-self: flex-start;
  }
  .hero-card-scroll {
    width: clamp(200px, 56vw, 340px);
  }
  .hero-bottom-bar {
    display: none;
  }
  .banner-fullwidth {
    padding-top: 0;
  }
  .prod-scattered-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* Reset the desktop staggered placement (individual grid-column/
     align-self/margin-top per card) to a plain, even 2-up grid — every
     card the same width and height instead of the hand-placed layout. */
  .prod-scatter-card:nth-child(1),
  .prod-scatter-card:nth-child(2),
  .prod-scatter-card:nth-child(3) {
    grid-column: auto;
    align-self: stretch;
    aspect-ratio: 3/4;
    margin-top: 0;
  }
  .dual-image-inner {
    gap: 10px;
  }
  .dual-img-small {
    width: clamp(120px, 36vw, 260px);
  }
  .dual-img-large {
    width: clamp(180px, 54vw, 400px);
  }
  .business-cards {
    flex-direction: column;
  }
  .business-card-body {
    flex-direction: column;
    gap: 20px;
  }
  .footer-cta-row {
    flex-direction: column;
  }
  .footer-cta-text {
    font-size: 28px;
    letter-spacing: -0.5px;
  }
  .service-body {
    flex-direction: column;
  }
  .service-body-media {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
  }
  .service-body-img {
    order: initial;
    flex: 0 1 68%;
    max-width: 68%;
    width: auto;
  }
  .service-body-copy {
    order: initial;
  }
  .service-body-img-secondary {
    order: initial;
    flex: 0 1 30%;
    max-width: 30%;
    width: auto;
    align-self: flex-end;
  }
  .col-2,
  .col-3-2,
  .col-2-3 {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* iOS Safari (and some Android browsers) auto-zoom the viewport when
     focusing any input with a computed font-size under 16px — bumping it
     to 16px here (mobile only, to keep the desktop 15px type scale)
     stops that zoom-on-tap behaviour. */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .business-cards {
    flex-direction: column;
  }
}

/* ── CONTACT PAGE (fluid.glass/contact structure) ────────────
   Info-only page — hero, get-in-touch/address rows, statement + image —
   with the actual enquiry form in a centered modal (#quote-modal). */
.contact-row {
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.contact-row-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 60px);
}
.contact-row-label .section-tag-row {
  border-top: none;
  padding: 0;
}
.contact-row-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
}
.contact-col-title {
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--mid);
  margin-bottom: 10px;
}
.contact-col-link {
  font-size: 18px;
  font-weight: 400;
  color: var(--near-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.contact-col-link:hover {
  color: var(--mid);
}
.contact-col p.t-body {
  font-size: 15px;
}
.contact-loc-name {
  font-weight: 400;
  color: var(--near-black);
}
.contact-loc-name::after {
  content: ",";
}

.contact-cta-section {
  border-top: 1px solid var(--border);
  background: var(--cream);
  padding: clamp(60px, 8vw, 100px) 0;
}
.contact-cta-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.contact-cta-text > .section-tag-row {
  border-top: none;
  padding: 0 0 16px;
}
.contact-cta-heading {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.contact-cta-sub p.t-body {
  margin-bottom: 24px;
  max-width: 42ch;
}
.contact-cta-media {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
}
.contact-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── QUOTE MODAL ──────────────────────────────────────────── */
.quote-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(36, 34, 46, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 1101;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.quote-modal-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: 8px;
  padding: clamp(32px, 5vw, 48px);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s var(--ease);
}
.quote-modal-backdrop.is-open,
.quote-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.quote-modal.is-open .quote-modal-panel {
  transform: translateY(0) scale(1);
}
.quote-modal-close {
  position: absolute;
  top: clamp(20px, 3vw, 28px);
  right: clamp(20px, 3vw, 28px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--near-black);
  cursor: pointer;
}
.quote-modal-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.quote-modal-sub {
  font-size: 14px;
  color: var(--mid);
  margin-bottom: 28px;
}
.quote-modal-privacy {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 16px;
}

.pill-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pill-option {
  padding: 12px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 500;
  color: var(--near-black);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pill-option:hover {
  border-color: var(--near-black);
}
.pill-option.is-active {
  background: var(--near-black);
  border-color: var(--near-black);
  color: #fff;
}

@media (max-width: 900px) {
  .contact-row-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-row-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .contact-cta-inner {
    grid-template-columns: 1fr;
  }
  .contact-cta-media {
    aspect-ratio: 16/10;
  }
}

/* ── QUOTE MODAL — MOBILE (app-drawer) ───────────────────────
   Below 768px the centered modal becomes a full-width sheet docked to
   the bottom of the screen, sliding up from off-screen like a native
   app drawer instead of scaling in from the page centre. */
@media (max-width: 768px) {
  .quote-modal {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  .quote-modal-panel {
    width: 100%;
    max-width: 100%;
    max-height: 86vh;
    border-radius: 20px 20px 0 0;
    padding: 28px 20px clamp(28px, 6vh, 40px);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease);
  }
  .quote-modal.is-open .quote-modal-panel {
    transform: translateY(0);
  }
}