@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700;1,800&family=Bree+Serif&family=Crete+Round:ital@0;1&family=Vast+Shadow&display=swap');

/* =========================================================
   CLIENT CLEAN BASE v1
   Generic reusable website foundation.
   No brand-specific naming.
   Architecture:
   - site-shell: 100%
   - content-container: 85% desktop / 100% tablet-mobile
   - components: 100% of parent
   - no 100vw layout widths
   ========================================================= */

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

html,
body {
  width: 100%;
  margin: 0;
  overflow-x: clip;
}




img,
video,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}

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

button {
  cursor: pointer;
}

/* =========================================
   Title Alignment Helpers
========================================= */

.tw-center {
  text-align: center;
}

.tw-center .copy,
.tw-center .eyebrow {
  margin-inline: auto;
}



/* ---------- TOKENS ---------- */
:root {
  --page-bg: #555;
  --surface: #d8d8d8;
  --paper: #f4f4f0;
  --ink: #111;
  --muted: rgba(0,0,0,.65);
  --nothing: rgba(0,0,0,0);
  --dark: #080b0e;
  --dark-2: #1a1a1a;
  --light: #fff;
  --accent: #b8ef42;
  --radius: 1.4rem;
  --radius-lg: 2rem;
  --gap: 1rem;
  --container-max: 1600px;
  --container-width: 85%;
  --nav-height: 74px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}




/* ---------- BASE ---------- */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  text-rendering: geometricPrecision;
	
  background-image:url("../assets/Site-Graphics/tw-tech-bg.png");

    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;	
}

.site-shell {
  width: 100%;
    position: relative;

    background-image:url("../assets/Site-Graphics/tw-tech-bg.png");

    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;

    min-height: 100vh;
}


.content-container {
  width: min(var(--container-width), var(--container-max));
  margin-inline: auto;
  background: var(--surface);
}

/* Every top-level component obeys the parent container. */
.content-container > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ---------- SHARED COMPONENT HELPERS ---------- */
.section {
  padding: clamp(2.5rem, 4rem, 5rem);
}

.section--light {
  background: var(--paper);
  color: var(--ink);
}

.section--dark {
  background: var(--dark);
  color: var(--light);
}
.section--clear {
  background: var(--nothing);
  color: var(--light);
}


.section--accent {
  background:
    radial-gradient(circle at 82% 12%, rgba(184,239,66,.20), transparent 28%),
    linear-gradient(135deg, #f4f4f0 0%, #e9eadf 100%);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--dark {
  color: #5f7d18;
}

.heading-xl,
.section-title {
  margin: 0;
  text-transform: uppercase;
  line-height: .9;
}

.heading-xl {
  font-size: clamp(1.5rem, 3.25rem, 5rem);
}

.section-title {
  font-family: "Vast Shadow", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: .025em;
  max-width: 100%;
}

.copy {
  margin: 0; padding-bottom:25px;
  max-width: 38rem;
  line-height: 1.58;
  color: var(--muted);
}

.section--dark .copy {
  color: rgba(255,255,255,.72);
}

.copyB {
  margin: 0; padding-bottom:25px;
  line-height: 1.58;
  color: var(--muted);
}

.section--dark .copyB {
  color: rgba(255,255,255,.72);
}



.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 3.1rem;
  padding: 0 1.25rem;
  margin-top: 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.button--dark {
  background: var(--dark);
  color: var(--light);
}

/* ---------- NAV ---------- */
.site-nav {
  height: var(--nav-height);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 150px;
  gap: 2px;
  background: #888;
}

.site-nav__brand,
.site-nav__links,
.site-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: #000;
  color: #fff;
}

.site-nav__brand {
  font-size: 1.8rem;
}

.site-nav__links {
  gap: clamp(.75rem, 1.5rem, 2rem);
  font-size: 1rem;
}

.site-nav__cta {
  font-weight: 800;
}

/* ---------- HR ---------- */
.c-hr {
  position: relative;
  overflow: hidden;
  min-height: 36rem;
  background: var(--dark);
  color: var(--light);
}

.c-hr__track {
  display: flex;
  height: 100%;
  transition: transform 650ms var(--ease);
}

.c-hr__slide {
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 36rem;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 5rem, 6rem);
  background:
    radial-gradient(circle at 80% 20%, rgba(184,239,66,.32), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px),
    linear-gradient(135deg, #111 0%, #2d2d2d 54%, #070707 100%);
}

.c-hr__content {
  width: 100%;
  max-width: 80%;
}

.c-hr__content .copy {
  color: rgba(255,255,255,.90);
}

.c-hr__arrow,
.c-cr__arrow {
  position: absolute;
  z-index: 5;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.c-hr__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.c-hr__arrow--prev {
  left: 1rem;
}

.c-hr__arrow--next {
  right: 1rem;
}

/* ---------- SCL / SCR / VC / PK SHARED FLEX ROWS ---------- */
.c-scl,
.c-scr,
.c-vc,
.c-pk,
.c-tb__panel-inner {
  display: flex;
  align-items: stretch;
  gap: clamp(1.5rem, 2.5rem, 3rem);
}

.c-scl > *,
.c-scr > *,
.c-vc > *,
.c-pk > *,
.c-tb__panel-inner > * {
  flex: 1 1 0;
  min-width: 0;
}

/* SCL = split content with media/image on the left and copy/content on the right. */
.c-scl__media {
  order: 1;
}

.c-scl__copy {
  order: 2;
}

/* SCR = split content with copy/content on the left and media/image on the right. */
.c-scr__copy {
  order: 1;
}

.c-scr__media {
  order: 2;
}

.media-box {
  min-height: 22rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.42), transparent 20%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.24) 0 2px, transparent 2px 20px),
    linear-gradient(135deg, #9b9b9b, #d3d3d3);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.media-box--dark {
  background:
    linear-gradient(135deg, rgba(184,239,66,.18), transparent 48%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #2b2b2b, #090909);
  color: #fff;
}

.media-box span {
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
}

/* ---------- CG ---------- */
.c-cg__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 2rem;
}

.c-cg__card {
  min-width: 0;
  padding: 1rem;
  border-radius: var(--radius);
  background: #fff;
}

.c-cg__card .media-box {
  min-height: 12rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.c-cg__card h3 {
  margin: .4rem 0;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- NF ---------- */
.c-nf__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 2rem;
}

.c-nf__item {
  min-width: 0;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: #f0f0ed;
}

.c-nf__number {
  display: block;
  margin-bottom: 1rem;
  color: rgba(0,0,0,.14);
  font-size: 3.4rem;
  font-weight: 900;
  line-height: .8;
}

/* ---------- TB ---------- */
.c-tb__controls {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 2rem 0 1.5rem;
}

.c-tb__button {
  min-height: 2.8rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.c-tb__button[aria-selected="true"] {
  background: #111;
  color: #fff;
}

.c-tb__panel {
  display: none;
}

.c-tb__panel.is-active {
  display: block;
}

.c-tb__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 2.5rem, 3rem);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.9);
}

.c-tb__copy h3 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.4rem, 4rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

/* ---------- TX ---------- */

.c-tx {
  background: var(--dark);
  color: var(--light);
}

.c-tx__grid {
  display: grid;
  gap: 1.5rem;
}

.c-tx--1 .c-tx__grid {
  grid-template-columns: minmax(0, 1fr);
}

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

.c-tx--3 .c-tx__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-tx__copy {
  min-width: 0;
  font-size: clamp(1rem, 1.2rem, 1.28rem);
  line-height: 1.65;
  color: var(--paper);
}

.c-tx__copy p {
  margin: 0;
	 line-height: 1.58;
  color: var(--muted);
}

/* ---------- GL ---------- */
.c-gl__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

.c-gl__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.c-gl__item {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  background: #222;
  color: #fff;
}

.c-gl__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-gl__item span {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

.c-gl__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72));
}

/* ---------- CR ---------- */
.c-cr {
  position: relative;
  overflow: visible;
}

.c-cr__header {
  margin-bottom: 2rem;
}

.c-cr__viewport {
  position: relative;
  margin-inline: 4rem;
  overflow: visible;
}

.c-cr__window {
  overflow: hidden;
}

.c-cr__track {
  display: flex;
  gap: var(--gap);
  transition: transform 650ms var(--ease);
}

.c-cr__card {
  flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.c-cr__image {
  min-height: 12rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #c7c7c7 0%, #8d8d8d 100%);
}

.c-cr__content {
  padding: 1rem;
}

.c-cr__content h3 {
  margin: .35rem 0 .5rem;
  line-height: 1;
  text-transform: uppercase;
}

.c-cr__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.c-cr__arrow--prev {
  left: -3.6rem;
}

.c-cr__arrow--next {
  right: -3.6rem;
}

/* ---------- RW ---------- */
.c-rw__shell {
  position: relative;
}

.c-rw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.c-rw__card {
  position: relative;
  min-width: 0;
  min-height: 24rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #999;
}

.c-rw__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-rw__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: .9rem;
  background: rgba(0,0,0,.72);
  color: #fff;
  border-radius: .8rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* ---------- FT ---------- */
.c-ft {
  position: relative;
  min-height: 40rem;
  overflow: hidden;
  background: #111;
}

.c-ft__map {
  position: absolute;
  inset: 0;
}

.c-ft__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1);
}

.c-ft__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100% - 3rem), 48rem);
  transform: translate(-50%, -50%);
  padding: clamp(1.5rem, 2.5rem, 3rem);
  border-radius: var(--radius-lg);
  background: rgba(17,17,17,.92);
  color: #fff;
}

.c-ft__content {
  display: flex;
  gap: 1.5rem;
}

.c-ft__content > * {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,.86);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-height: 80vh;
  width: auto;
}

/* ---------- TABLET ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  :root {
    --container-width: 100%;
    --nav-height: 64px;
  }

  .section {
    padding: clamp(2rem, 3rem, 3.5rem);
  }

  .site-nav {
    grid-template-columns: 150px minmax(0, 1fr) 110px;
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .site-nav__links {
    gap: .75rem;
    font-size: .9rem;
  }

  .site-nav__brand,
  .site-nav__cta {
    font-size: .95rem;
  }

  .c-hr {
    min-height: auto;
  }

  .c-hr__slide {
    min-height: 34rem;
    padding: 2.5rem;
  }

  .heading-xl {
    font-size: clamp(3rem, 5rem, 5.4rem);
    max-width: 10ch;
  }

  .c-scl,
  .c-scr,
  .c-vc,
  .c-pk {
    flex-wrap: wrap;
  }

  .c-scl > *,
  .c-scr > *,
  .c-vc > *,
  .c-pk > * {
    flex-basis: 100%;
  }

  .c-scl__media,
  .c-scl__copy,
  .c-scr__copy,
  .c-scr__media {
    order: initial;
  }

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

  .c-nf__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-tb__panel-inner {
    gap: 1rem;
  }

  .c-tb__copy {
    padding: 1.25rem;
  }

  .c-tb__copy h3 {
    font-size: clamp(1.8rem, 2.7rem, 3rem);
  }

  .c-gl__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-cr__viewport {
    margin-inline: 3.5rem;
  }

  .c-cr__card {
    flex-basis: calc((100% - (var(--gap) * 2)) / 3);
  }

  .c-rw__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-rw__card {
    min-height: 20rem;
  }

  .c-tx--2 .c-tx__grid,
  .c-tx--3 .c-tx__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-ft__panel {
    width: min(calc(100% - 3rem), 44rem);
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  :root {
    --container-width: 100%;
    --nav-height: auto;
  }

  .section {
    padding: 2rem 1.25rem;
  }

  .site-nav {
    height: auto;
    grid-template-columns: 1fr;
  }

  .site-nav__brand,
  .site-nav__links,
  .site-nav__cta {
    min-height: 56px;
  }

  .site-nav__links {
    flex-wrap: wrap;
    padding: .75rem;
  }

  .c-hr__slide {
    min-height: 31rem;
    padding: 2rem 1.25rem;
  }

  .heading-xl {
    font-size: clamp(1.7rem, 2.2rem, 3.4rem);
  }

  .c-scl,
  .c-scr,
  .c-vc,
  .c-pk,
  .c-tb__panel-inner,
  .c-ft__content {
    flex-direction: column;
  }

  .c-cg__grid,
  .c-nf__grid,
  .c-rw__grid,
  .c-tx__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* GL is intentionally excluded from global mobile stacking.
     Gallery remains a scan-based thumbnail grid on mobile. */
  .c-gl__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-cr__viewport {
    margin-inline: 0;
  }

  .c-cr__arrow {
    display: none;
  }

  .c-cr__card {
    flex-basis: 86%;
  }

  .c-ft {
    min-height: 48rem;
  }
}


/* =========================================================
   CR Slider Upgrade v1
   Clean, parent-contained, responsive, arrow-safe.
   ========================================================= */

.c-cr {
  overflow: visible;
}

.c-cr__viewport {
  position: relative;
  margin-inline: 4rem;
  overflow: visible;
}

.c-cr__window {
  width: 100%;
  overflow: hidden;
}

.c-cr__track {
  display: flex;
  gap: var(--gap);
  transition: transform 520ms var(--ease);
  will-change: transform;
}

.c-cr__card {
  flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
  min-width: 0;
  transform: translateZ(0);
}

.c-cr__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.c-cr__arrow--prev {
  left: -3.6rem;
}

.c-cr__arrow--next {
  right: -3.6rem;
}

.c-cr__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.c-cr__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}

.c-cr__dot {
  width: .6rem;
  height: .6rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(0,0,0,.25);
}

.c-cr__dot.is-active {
  width: 1.8rem;
  background: var(--ink);
}

/* Tablet keeps 3 visible inside parent. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-cr__viewport {
    margin-inline: 3.25rem;
  }

  .c-cr__card {
    flex-basis: calc((100% - (var(--gap) * 2)) / 3);
  }

  .c-cr__arrow--prev {
    left: -3rem;
  }

  .c-cr__arrow--next {
    right: -3rem;
  }

  .c-cr__image {
    min-height: 11rem;
  }
}

/* Mobile shows one strong card with arrows hidden. */
@media (max-width: 600px) {
  .c-cr__viewport {
    margin-inline: 0;
  }

  .c-cr__card {
    flex-basis: 86%;
  }

  .c-cr__arrow {
    display: none;
  }
}


/* =========================================================
   CR 5-Block Vertical Card Adjustment
   ========================================================= */

.c-cr__header .copy {
  margin-top: 1rem;
}

.c-cr__card {
  min-height: 34rem;
  display: flex;
  flex-direction: column;
}

.c-cr__image {
  min-height: 17rem;
  flex: 0 0 auto;
}

.c-cr__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c-cr__content p:not(.eyebrow) {
  line-height: 1.48;
  color: rgba(0,0,0,.66);
}

.c-cr__content a {
  margin-top: auto;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (min-width: 601px) and (max-width: 900px) {
  .c-cr__card {
    min-height: 32rem;
  }

  .c-cr__image {
    min-height: 15rem;
  }
}

@media (max-width: 600px) {
  .c-cr__card {
    min-height: 31rem;
  }

  .c-cr__image {
    min-height: 15rem;
  }
}


/* =========================================================
   CR Slider Fixed: 7 Total / 5 Visible
   ========================================================= */

.c-cr__viewport {
  position: relative;
  margin-inline: 4rem;
  overflow: visible;
}

.c-cr__window {
  width: 100%;
  overflow: hidden;
}

.c-cr__track {
  display: flex;
  gap: var(--gap);
  transition: transform 520ms var(--ease);
  will-change: transform;
}

.c-cr__card {
  flex: 0 0 calc((100% - (var(--gap) * 4)) / 5);
  width: calc((100% - (var(--gap) * 4)) / 5);
  min-width: 0;
  max-width: none;
}

.c-cr__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
}

.c-cr__arrow--prev {
  left: -3.6rem;
}

.c-cr__arrow--next {
  right: -3.6rem;
}

.c-cr__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.c-cr__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}

.c-cr__dot {
  width: .6rem;
  height: .6rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(0,0,0,.25);
}

.c-cr__dot.is-active {
  width: 1.8rem;
  background: var(--ink);
}

@media (min-width: 601px) and (max-width: 900px) {
  .c-cr__viewport {
    margin-inline: 3.25rem;
  }

  .c-cr__card {
    flex-basis: calc((100% - (var(--gap) * 4)) / 5);
    width: calc((100% - (var(--gap) * 4)) / 5);
  }

  .c-cr__arrow--prev {
    left: -3rem;
  }

  .c-cr__arrow--next {
    right: -3rem;
  }
}

@media (max-width: 600px) {
  .c-cr__viewport {
    margin-inline: 0;
  }

  .c-cr__card {
    flex-basis: 86%;
    width: 86%;
  }

  .c-cr__arrow {
    display: none;
  }
}


/* =========================================================
   CR Responsive Controls Update
   Desktop: 5 visible
   Tablet: 3 visible
   Mobile: 1 full card, arrows beside dots
   ========================================================= */

/* Desktop baseline: 5 visible */
.c-cr__card {
  flex: 0 0 calc((100% - (var(--gap) * 4)) / 5);
  width: calc((100% - (var(--gap) * 4)) / 5);
}

/* Tablet: 3 visible */
@media (min-width: 601px) and (max-width: 900px) {
  .c-cr__viewport {
    margin-inline: 3.25rem;
  }

  .c-cr__card {
    flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
    width: calc((100% - (var(--gap) * 2)) / 3);
  }
}

/* Mobile: 1 full card, no partial peek; arrows sit beside dots */
@media (max-width: 600px) {
  .c-cr__viewport {
    margin-inline: 0;
  }

  .c-cr__card {
    flex: 0 0 100%;
    width: 100%;
  }

  .c-cr__arrow {
    display: inline-flex;
    position: static;
    transform: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .c-cr__mobile-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: 1.25rem;
  }

  .c-cr__mobile-controls .c-cr__dots {
    margin-top: 0;
  }
}


/* =========================================================
   CR Controls + Drag Fix
   Tablet and mobile controls live below slider with arrows beside dots.
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {
  .c-cr__viewport {
    margin-inline: 0;
  }

  .c-cr__arrow {
    display: inline-flex;
    position: static;
    transform: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .c-cr__mobile-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: 1.25rem;
  }

  .c-cr__mobile-controls .c-cr__dots {
    margin-top: 0;
  }
}

.c-cr__track {
  touch-action: pan-y;
  cursor: grab;
}

.c-cr__track.is-dragging {
  cursor: grabbing;
}


/* =========================================================
   CR Tablet Arrow Edge Alignment
   Arrows on same row as dots but pushed to edges
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

  .c-cr__mobile-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
  }

  .c-cr__mobile-controls .c-cr__arrow--prev {
    justify-self: start;
  }

  .c-cr__mobile-controls .c-cr__dots {
    justify-self: center;
  }

  .c-cr__mobile-controls .c-cr__arrow--next {
    justify-self: end;
  }
}


/* =========================================================
   RW Card Row v1
   Clean grid-first expandable card row.
   Desktop/tablet: 3 visible cards.
   Mobile: stacked cards.
   ========================================================= */

.c-rw__header {
  margin-bottom: 2rem;
}

.c-rw__header .copy {
  margin-top: 1rem;
}

.c-rw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.c-rw__card {
  position: relative;
  min-width: 0;
  min-height: 28rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #080b0e;
  color: #fff;
  transition:
    grid-column 420ms var(--ease),
    min-height 420ms var(--ease),
    transform 320ms var(--ease),
    opacity 320ms var(--ease);
}





.c-rw__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease), filter 520ms var(--ease);
}

.c-rw__card::after {
  display: none;
}

.c-rw__condensed,	
.c-rw__expanded {
  position: relative;
  z-index: 2;
}

.c-rw__condensed {
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem;
}

.c-rw__condensed h3,
.c-rw__expanded h3 {
  margin: 0;
  line-height: .95;
  text-transform: uppercase;
}

.c-rw__condensed h3 {
  font-size: clamp(1.35rem, 2.2rem, 2.5rem);
}

.c-rw__condensed button,
.c-rw__expanded a,
.c-rw__close {
  width: max-content;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #111;
  padding: .7rem 1rem;
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.c-rw__expanded {
  display: none;
  min-height: 28rem;
  padding: clamp(1.25rem, 2.5rem, 3rem);
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  gap: 1rem;
}

.c-rw__expanded p:not(.eyebrow) {
  max-width: 38rem;
  margin: 0;
  color: rgba(255,255,255,100);
  line-height: 1.55;
}

.c-rw__expanded h3 {
  font-size: clamp(2.4rem, 4rem, 4.8rem);
  max-width: 12ch;
}

.c-rw__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}

/* Expanded layout: selected card spans row, others hide gracefully. */
.c-rw.is-expanded .c-rw__card {
  display: none;
}

.c-rw.is-expanded .c-rw__card.is-expanded {
  display: block;
  grid-column: 1 / -1;
  min-height: 30rem;
}

.c-rw__card.is-expanded img {
  transform: scale(1.04);
}

.c-rw__card.is-expanded .c-rw__condensed {
  display: none;
}

.c-rw__card.is-expanded .c-rw__expanded {
  display: flex;
}

/* Tablet: same 3-card condensed behavior, expanded spans parent. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-rw__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-rw__card,
  .c-rw__condensed {
    min-height: 22rem;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded,
  .c-rw__expanded {
    min-height: 28rem;
  }

  .c-rw__condensed h3 {
    font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  }

  .c-rw__expanded h3 {
    font-size: clamp(2rem, 6vw, 3.4rem);
  }
}

/* Mobile: stacked cards, expansion remains in-place. */
@media (max-width: 600px) {
  .c-rw__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-rw__card,
  .c-rw__condensed {
    min-height: 24rem;
  }

  .c-rw.is-expanded .c-rw__card {
    display: block;
  }

  .c-rw.is-expanded .c-rw__card:not(.is-expanded) {
    display: none;
  }

  .c-rw__expanded {
    min-height: 27rem;
  }
}


/* =========================================================
   RW Aspect Ratio Update
   Condensed = 9:16
   Expanded = 16:9
   Click anywhere to expand; no expand button.
   ========================================================= */

.c-rw__card {
  aspect-ratio: 9 / 16;
  min-height: 0;
  cursor: pointer;
}

.c-rw__condensed {
  min-height: 0;
  height: 100%;
}

.c-rw.is-expanded .c-rw__card.is-expanded {
  aspect-ratio: 16 / 9;
  min-height: 0;
  cursor: default;
}

.c-rw__expanded {
  min-height: 0;
  height: 100%;
}

.c-rw__condensed button {
  display: none;
}

@media (min-width: 601px) and (max-width: 900px) {
  .c-rw__card,
  .c-rw__condensed {
    min-height: 0;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded,
  .c-rw__expanded {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .c-rw__card,
  .c-rw__condensed {
    min-height: 0;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded {
    aspect-ratio: 16 / 9;
  }

  .c-rw__expanded {
    min-height: 0;
  }
}


/* =========================================================
   RW 4-Slot Horizontal Expansion System
   Condensed: 4 cards at 9:16 ratio
   Expanded: same row height, spans 3 slots horizontally
   Slot 1 -> columns 1-3
   Slot 2 -> columns 1-3
   Slot 3 -> columns 2-4
   Slot 4 -> columns 2-4
   ========================================================= */

.c-rw__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.c-rw__card {
  position: relative;
  aspect-ratio: 9 / 16;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #080b0e;
  color: #fff;
  cursor: pointer;
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease),
    filter 260ms var(--ease);
}

.c-rw__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 260ms var(--ease), transform 520ms var(--ease), filter 520ms var(--ease);
}

.c-rw__image--expanded {
  opacity: 0;
}

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

.c-rw__condensed,
.c-rw__expanded {
  position: relative;
  z-index: 2;
}

.c-rw__condensed {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
}

.c-rw__condensed h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.8rem);
  line-height: .95;
  text-transform: uppercase;
}

.c-rw__expanded {
  display: none;
  height: 100%;
  min-height: 0;
  padding: clamp(1.25rem, 2.5rem, 3rem);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
}

.c-rw__expanded h3 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.25rem, 4.8vw, 5rem);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.c-rw__expanded p:not(.eyebrow) {
  max-width: 38rem;
  margin: 0;
  color: rgba(255,255,255,100);
  line-height: 1.55;
}

.c-rw__expanded a,
.c-rw__close {
  width: max-content;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #111;
  padding: .7rem 1rem;
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.c-rw__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}

/* Expanded state keeps row height by staying in the same grid row. */
.c-rw.is-expanded .c-rw__card.is-occluded {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.c-rw.is-expanded .c-rw__card.is-expanded {
  aspect-ratio: auto;
  height: 100%;
  cursor: default;
  z-index: 3;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="1"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="2"] {
  grid-column: 1 / span 3;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="3"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="4"] {
  grid-column: 2 / span 3;
}

.c-rw__card.is-expanded .c-rw__image--condensed {
  opacity: 0;
}

.c-rw__card.is-expanded .c-rw__image--expanded {
  opacity: 1;
  transform: scale(1.015);
  filter:none;
}

.c-rw__card.is-expanded .c-rw__condensed {
  display: none;
}

.c-rw__card.is-expanded .c-rw__expanded {
  display: flex;
}

/* Explicit slot placement keeps non-occluded cards in position. */
.c-rw__card[data-slot="1"] { grid-column: 1; }
.c-rw__card[data-slot="2"] { grid-column: 2; }
.c-rw__card[data-slot="3"] { grid-column: 3; }
.c-rw__card[data-slot="4"] { grid-column: 4; }

/* Tablet keeps the same interaction but tighter type. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-rw__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .c-rw__expanded {
    padding: 1.5rem;
  }

  .c-rw__expanded h3 {
    font-size: clamp(1.9rem, 5vw, 3.4rem);
  }

  .c-rw__expanded p:not(.eyebrow) {
    max-width: 30rem;
  }
}

/* Mobile: stack condensed cards, expanded card becomes 16:9. */
@media (max-width: 600px) {
  .c-rw__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-rw__card[data-slot] {
    grid-column: auto;
  }

  .c-rw.is-expanded .c-rw__card:not(.is-expanded) {
    display: none;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded {
    grid-column: auto;
    aspect-ratio: 16 / 9;
  }

  .c-rw__expanded {
    padding: 1.25rem;
  }

  .c-rw__expanded h3 {
    font-size: clamp(1.8rem, 9vw, 3rem);
  }
}


/* =========================================================
   RW Fixed-Stage Expansion Correction
   This overrides the grid-expansion attempt.
   Four fixed 9:16 slots. Expanded card keeps x-height and only grows wider.
   ========================================================= */

.c-rw__grid {
  position: relative !important;
  display: block !important;
  width: 100%;
  --rw-gap: var(--gap, 1rem);
  --rw-card-w: calc((100% - (var(--rw-gap) * 3)) / 4);
  /* 9:16 card height = width * 16 / 9 */
  height: calc(var(--rw-card-w) * 16 / 9);
  min-height: 0;
  overflow: hidden;
}

.c-rw__card,
.c-rw__card[data-slot] {
  position: absolute !important;
  top: 0;
  height: 100% !important;
  width: var(--rw-card-w) !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  grid-column: auto !important;
  transition:
    left 460ms var(--ease),
    width 460ms var(--ease),
    opacity 260ms var(--ease),
    visibility 260ms var(--ease);
}

.c-rw__card[data-slot="1"] {
  left: 0;
}

.c-rw__card[data-slot="2"] {
  left: calc((var(--rw-card-w) + var(--rw-gap)) * 1);
}

.c-rw__card[data-slot="3"] {
  left: calc((var(--rw-card-w) + var(--rw-gap)) * 2);
}

.c-rw__card[data-slot="4"] {
  left: calc((var(--rw-card-w) + var(--rw-gap)) * 3);
}

.c-rw.is-expanded .c-rw__card.is-expanded {
  height: 100% !important;
  width: calc((var(--rw-card-w) * 3) + (var(--rw-gap) * 2)) !important;
  aspect-ratio: auto !important;
  z-index: 5;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="1"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="2"] {
  left: 0 !important;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="3"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="4"] {
  left: calc(var(--rw-card-w) + var(--rw-gap)) !important;
}

.c-rw.is-expanded .c-rw__card.is-occluded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-rw__condensed {
  height: 100%;
  min-height: 0 !important;
}

.c-rw__expanded {
  height: 100%;
  min-height: 0 !important;
}

/* Keep the expanded image/video from changing stage geometry. */
.c-rw__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet: same fixed-stage pattern, just inside full-width parent. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-rw__grid {
    --rw-gap: .75rem;
    height: calc(var(--rw-card-w) * 16 / 9);
  }

  .c-rw__expanded {
    padding: 1.25rem;
  }

  .c-rw__expanded h3 {
    font-size: clamp(1.8rem, 4.5vw, 3rem);
  }

  .c-rw__expanded p:not(.eyebrow) {
    max-width: 28rem;
  }
}

/* Mobile: abandon horizontal expansion and stack cards safely. */
@media (max-width: 600px) {
  .c-rw__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    height: auto;
    overflow: visible;
  }

  .c-rw__card,
  .c-rw__card[data-slot] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
  }

  .c-rw.is-expanded .c-rw__card:not(.is-expanded) {
    display: none;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    left: auto !important;
  }
}


/* =========================================================
   RW Grid-Stage Fixed
   Proven pattern:
   - parent stage is relative
   - cards are absolute
   - 4 visual slots
   - expanded cards occupy 3 slots
   - height is fixed by aspect-ratio, not fragile height calc
   ========================================================= */

.c-rw__grid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 36 / 16;
  min-height: 24rem;
  overflow: hidden !important;

  --rw-gap: var(--gap, 1rem);
  --rw-slot: calc((100% - (var(--rw-gap) * 3)) / 4);
}

.c-rw__card,
.c-rw__card[data-slot] {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  width: var(--rw-slot) !important;
  min-height: 0 !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  grid-column: auto !important;
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: none !important;
  transition:
    left 460ms var(--ease),
    width 460ms var(--ease),
    opacity 260ms var(--ease),
    visibility 260ms var(--ease);
}

.c-rw__card[data-slot="1"] {
  left: 0 !important;
}

.c-rw__card[data-slot="2"] {
  left: calc((var(--rw-slot) + var(--rw-gap)) * 1) !important;
}

.c-rw__card[data-slot="3"] {
  left: calc((var(--rw-slot) + var(--rw-gap)) * 2) !important;
}

.c-rw__card[data-slot="4"] {
  left: calc((var(--rw-slot) + var(--rw-gap)) * 3) !important;
}

.c-rw.is-expanded .c-rw__card.is-expanded {
  width: calc((var(--rw-slot) * 3) + (var(--rw-gap) * 2)) !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  z-index: 5;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="1"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="2"] {
  left: 0 !important;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="3"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="4"] {
  left: calc(var(--rw-slot) + var(--rw-gap)) !important;
}

.c-rw.is-expanded .c-rw__card.is-occluded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.c-rw__image,
.c-rw__card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.c-rw__image--condensed {
  opacity: 1;
}

.c-rw__image--expanded {
  opacity: 0;
}

.c-rw__card.is-expanded .c-rw__image--condensed {
  opacity: 0 !important;
}

.c-rw__card.is-expanded .c-rw__image--expanded {
  opacity: 1 !important;
  transform: scale(1.015);
  filter: brightness(.78) saturate(1.05);
}

.c-rw__condensed {
  height: 100% !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.c-rw__expanded {
  height: 100% !important;
  min-height: 0 !important;
  display: none;
}

.c-rw__card.is-expanded .c-rw__condensed {
  display: none !important;
}

.c-rw__card.is-expanded .c-rw__expanded {
  display: flex !important;
}

/* Keep close above content. */
.c-rw__close {
  z-index: 6;
}

/* Tablet keeps same 4-slot interaction, with slightly lower min-height. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-rw__grid {
    aspect-ratio: 36 / 16;
    min-height: 19rem;
    --rw-gap: .75rem;
  }

  .c-rw__expanded {
    padding: 1.25rem;
  }

  .c-rw__expanded h3 {
    font-size: clamp(1.8rem, 4.5vw, 3rem);
  }
}

/* Mobile abandons the 4-slot stage and becomes safe stacked cards. */
@media (max-width: 600px) {
  .c-rw__grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--gap, 1rem);
    aspect-ratio: auto;
    min-height: 0;
    overflow: visible !important;
  }

  .c-rw__card,
  .c-rw__card[data-slot] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }

  .c-rw.is-expanded .c-rw__card:not(.is-expanded) {
    display: none !important;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    left: auto !important;
  }
}


/* =========================================================
   RW Slider Layer
   Desktop/tablet: 4 visible slots + expand within visible window.
   Mobile: 1 visible card at a time.
   ========================================================= */

.c-rw__shell {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  gap: 1rem;
  align-items: center;
}

.c-rw__viewport {
  min-width: 0;
  overflow: hidden;
}

.c-rw__arrow,
.c-rw__control {
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.c-rw__arrow:disabled,
.c-rw__control:disabled {
  opacity: .35;
  cursor: default;
}

.c-rw__controls {
  display: none;
}

/* Re-assert stage math inside viewport */
.c-rw__grid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 36 / 16;
  min-height: 24rem;
  overflow: hidden !important;
  --rw-gap: var(--gap, 1rem);
  --rw-slot: calc((100% - (var(--rw-gap) * 3)) / 4);
}

.c-rw__card {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  width: var(--rw-slot) !important;
  aspect-ratio: auto !important;
  transition:
    left 460ms var(--ease),
    width 460ms var(--ease),
    opacity 260ms var(--ease),
    visibility 260ms var(--ease);
}

.c-rw__card:not(.is-window-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.c-rw__card[data-slot="1"] { left: 0 !important; }
.c-rw__card[data-slot="2"] { left: calc((var(--rw-slot) + var(--rw-gap)) * 1) !important; }
.c-rw__card[data-slot="3"] { left: calc((var(--rw-slot) + var(--rw-gap)) * 2) !important; }
.c-rw__card[data-slot="4"] { left: calc((var(--rw-slot) + var(--rw-gap)) * 3) !important; }

.c-rw.is-expanded .c-rw__card.is-expanded {
  width: calc((var(--rw-slot) * 3) + (var(--rw-gap) * 2)) !important;
  z-index: 5;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="1"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="2"] {
  left: 0 !important;
}

.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="3"],
.c-rw.is-expanded .c-rw__card.is-expanded[data-slot="4"] {
  left: calc(var(--rw-slot) + var(--rw-gap)) !important;
}

.c-rw.is-expanded .c-rw__card.is-occluded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.c-rw__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
}

.c-rw__dot {
  width: .6rem;
  height: .6rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(0,0,0,.25);
}

.c-rw__dot.is-active {
  width: 1.8rem;
  background: var(--ink);
}

/* Tablet: keep 4 visible, controls beside dots below row */
@media (min-width: 601px) and (max-width: 900px) {
  .c-rw__shell {
    display: block;
  }

  .c-rw__arrow {
    display: none;
  }

  .c-rw__grid {
    min-height: 19rem;
    --rw-gap: .75rem;
  }

  .c-rw__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .c-rw__control--prev {
    justify-self: start;
  }

  .c-rw__control--next {
    justify-self: end;
  }

  .c-rw__dots {
    justify-self: center;
  }
}

/* Mobile: one card at a time, no partial card */
@media (max-width: 600px) {
  .c-rw__shell {
    display: block;
  }

  .c-rw__arrow {
    display: none;
  }

  .c-rw__grid {
    aspect-ratio: 9 / 16;
    min-height: 0;
    --rw-gap: 0px;
    --rw-slot: 100%;
  }

  .c-rw__card,
  .c-rw__card[data-slot] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  .c-rw.is-expanded .c-rw__card.is-expanded {
    width: 100% !important;
    left: 0 !important;
  }

  .c-rw.is-expanded .c-rw__card:not(.is-expanded) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .c-rw__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .c-rw__control--prev {
    justify-self: start;
  }

  .c-rw__control--next {
    justify-self: end;
  }

  .c-rw__dots {
    justify-self: center;
  }
}


/* =========================================================
   CR Desktop 4 Visible + Inside Edge Arrows
   ========================================================= */

/* Give the slider its full parent width and place arrows inside the viewport edges. */
.c-cr__viewport {
  margin-inline: 0;
  padding-inline: 3.5rem;
  position: relative;
}

.c-cr__window {
  overflow: hidden;
}

/* Desktop: 4 visible */
.c-cr__card {
  flex: 0 0 calc((100% - (var(--gap) * 3)) / 4);
  width: calc((100% - (var(--gap) * 3)) / 4);
}

/* Arrows sit inside the container edge, not outside. */
.c-cr__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.c-cr__arrow--prev {
  left: 0;
}

.c-cr__arrow--next {
  right: 0;
}

/* Tablet remains 3 visible, arrows stay in the lower control row from prior pass. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-cr__viewport {
    margin-inline: 0;
    padding-inline: 0;
  }

  .c-cr__card {
    flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
    width: calc((100% - (var(--gap) * 2)) / 3);
  }

  .c-cr__arrow {
    position: static;
    transform: none;
  }
}

/* Mobile remains 1 full card, arrows in the lower control row. */
@media (max-width: 600px) {
  .c-cr__viewport {
    margin-inline: 0;
    padding-inline: 0;
  }

  .c-cr__card {
    flex: 0 0 100%;
    width: 100%;
  }

  .c-cr__arrow {
    position: static;
    transform: none;
  }
}


/* =========================================================
   CR + RW Arrow Alignment Polish
   ========================================================= */

/* Desktop: slight inset padding from edge */
.c-cr__arrow--prev,
.c-rw__arrow--prev {
  left: .75rem;
}

.c-cr__arrow--next,
.c-rw__arrow--next {
  right: .75rem;
}

/* Mobile + Tablet Controls: arrows pushed to edges, dots centered */
@media (max-width: 900px) {

  .c-cr__mobile-controls,
  .c-rw__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
  }

  .c-cr__mobile-controls .c-cr__arrow--prev,
  .c-rw__control--prev {
    justify-self: start;
  }

  .c-cr__mobile-controls .c-cr__arrow--next,
  .c-rw__control--next {
    justify-self: end;
  }

  .c-cr__mobile-controls .c-cr__dots,
  .c-rw__dots {
    justify-self: center;
  }

}


/* =========================================================
   Motion System v1
   Lightweight, layout-safe, reusable.
   No horizontal drift. No viewport-width tricks.
   ========================================================= */

:root {
  --motion-fast: 180ms;
  --motion-med: 360ms;
  --motion-slow: 680ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Scroll reveal: layout-safe fade + small vertical lift only */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
  will-change: opacity, transform;
}

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

/* Optional stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-ease);
}

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 140ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 260ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 380ms; }

/* Hover polish: safe transforms only on individual cards/buttons */
.button,
.c-tb__button,
.c-cr__arrow,
.c-rw__arrow,
.c-cr__dot,
.c-rw__dot,
.c-cr__control,
.c-rw__control {
  transition:
    transform var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    width var(--motion-fast) ease;
}

.button:hover,
.c-tb__button:hover,
.c-cr__arrow:not(:disabled):hover,
.c-rw__arrow:not(:disabled):hover,
.c-cr__control:not(:disabled):hover,
.c-rw__control:not(:disabled):hover {
  transform: translateY(-2px);
}

.c-hr__arrow:not(:disabled):hover {
  transform: translateY(-50%) scale(1.04);
}

/* Cards: micro-lift without altering layout calculations */
.c-cg__card,
.c-nf__item,
.c-gl__item,
.c-cr__card,
.c-rw__card {
  transition:
    transform var(--motion-med) var(--motion-ease),
    box-shadow var(--motion-med) var(--motion-ease),
    opacity var(--motion-med) var(--motion-ease),
    filter var(--motion-med) var(--motion-ease);
}

.c-cg__card:hover,
.c-nf__item:hover,
.c-gl__item:hover,
.c-cr__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.14);
}

/* RW card hover should not fight expansion math */
.c-rw__card:not(.is-expanded):hover {
  filter: brightness(1.05);
}

.c-rw.is-expanded .c-rw__card:hover {
  transform: none;
}

/* Image polish */
.c-gl__item img,
.c-cr__image,
.c-rw__image,
.c-cg__card .media-box,
.media-box {
  transition:
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease);
}

.c-gl__item:hover img,
.c-rw__card:not(.is-expanded):hover .c-rw__image--condensed {
  transform: scale(1.035);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   RW Mobile Details Mode
   Mobile removes expanded behavior and shows View Details on condensed card.
   ========================================================= */

.c-rw__mobile-link {
  display: none;
}

@media (max-width: 600px) {
  .c-rw__condensed {
    gap: .75rem;
  }

  .c-rw__mobile-link {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #111;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .c-rw__expanded {
    display: none !important;
  }

  .c-rw__card.is-expanded .c-rw__condensed {
    display: flex !important;
  }

  .c-rw__card.is-expanded .c-rw__image--condensed {
    opacity: 1 !important;
  }

  .c-rw__card.is-expanded .c-rw__image--expanded {
    opacity: 0 !important;
  }
}


/* =========================================================
   RW Drag / Swipe Support
   ========================================================= */

.c-rw__grid {
  touch-action: pan-y;
  cursor: grab;
}

.c-rw__grid.is-dragging {
  cursor: grabbing;
}

.c-rw__grid.is-dragging .c-rw__card {
  transition:
    opacity 180ms ease,
    visibility 180ms ease !important;
}


/* =========================================================
   RW Mobile Drag Fix
   The viewport owns swipe detection so card/image/link layers don't block it.
   ========================================================= */

.c-rw__viewport {
  touch-action: pan-y;
}

.c-rw__viewport.is-dragging {
  cursor: grabbing;
}

@media (max-width: 600px) {
  .c-rw__viewport {
    touch-action: pan-y;
  }

  .c-rw__grid {
    cursor: grab;
  }
}


/* =========================================================
   RW Mobile-Only Drag Policy
   Desktop/tablet are click-to-expand only.
   ========================================================= */

@media (min-width: 601px) {
  .c-rw__grid {
    cursor: pointer;
    touch-action: auto;
  }

  .c-rw__viewport {
    touch-action: auto;
  }
}

@media (max-width: 600px) {
  .c-rw__grid,
  .c-rw__viewport {
    touch-action: pan-y;
  }

  .c-rw__grid {
    cursor: grab;
  }

  .c-rw__grid.is-dragging {
    cursor: grabbing;
  }
}


/* =========================================================
   Header / Full-Width Hero / Footer Refinement
   ========================================================= */

/* Full-width black header background, inner navigation keeps original position. */
.site-header {
  width: 100%;
  background: #000;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  width: min(var(--container-width), var(--container-max));
  margin-inline: auto;
  background: #000;
}

.site-header .site-nav {
  width: 100%;
  height: var(--nav-height);
  background: #000;
}

/* Preserve the existing nav structure but remove any visible page-edge gap. */
.site-header .site-nav__brand,
.site-header .site-nav__links,
.site-header .site-nav__cta {
  background: #000;
}

/* Hero section spans full page width. */
.site-shell > .c-hr {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.site-shell > .c-hr .c-hr__slide {
  min-height: clamp(34rem, 62vh, 48rem);
  padding-inline: max(3rem, calc((100% - var(--container-max)) / 2 + 3rem));
}

/* Footer: full-width map with right-side overlay panel. */
.c-ft {
  position: relative;
  width: 100%;
  min-height: clamp(44rem, 72vh, 56rem);
  overflow: hidden;
  background: #050505;
  color: #fff;
}

.c-ft__map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.c-ft__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.08) brightness(.62);
}

.c-ft__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.96) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
  pointer-events: none;
}

.c-ft__panel {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(5vw, calc((100% - var(--container-max)) / 2 + 4rem));
  width: min(44rem, calc(100% - 3rem));
  transform: translateY(-50%);
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.72), rgba(5,5,5,.90));
  backdrop-filter: blur(8px);
}

.c-ft__title {
  margin: 0 0 2rem;
  font-size: clamp(3.4rem, 6vw, 6.6rem);
  line-height: .88;
  letter-spacing: -.06em;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

.c-ft__title strong {
  font-style: normal;
}

.c-ft__content {
  display: grid;
  grid-template-columns: minmax(0, .9fr) auto minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.c-ft__contact p {
  margin: 0 0 1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}

.c-ft__contact span {
  display: block;
  margin-bottom: .3rem;
  color: rgba(255,255,255,.52);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.c-ft__socials {
  display: flex;
  gap: .6rem;
  margin: 1.25rem 0 1.75rem;
}

.c-ft__socials a {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
}

.c-ft__divider,
.c-ft__link-divider {
  width: 1px;
  min-height: 100%;
  background: rgba(255,255,255,.20);
}

.c-ft__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.c-ft__links div:not(.c-ft__link-divider) {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.c-ft__links a {
  color: #fff;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-strip {
  width: 100%;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  color: rgba(255,255,255,.60);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .72rem;
  letter-spacing: .08em;
}

.footer-strip p {
  margin: 0;
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .site-header__inner {
    width: 100%;
  }

  .site-shell > .c-hr .c-hr__slide {
    padding-inline: 2.5rem;
    min-height: 36rem;
  }

  .c-ft {
    min-height: 52rem;
  }

  .c-ft__panel {
    left: 50%;
    right: auto;
    width: min(calc(100% - 3rem), 44rem);
    transform: translate(-50%, -50%);
  }

  .c-ft__content {
    grid-template-columns: minmax(0, .9fr) auto minmax(0, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .site-header__inner {
    width: 100%;
  }

  .site-header {
    position: sticky;
  }

  .site-shell > .c-hr .c-hr__slide {
    padding-inline: 1.25rem;
    min-height: 32rem;
  }

  .c-ft {
    min-height: 58rem;
  }

  .c-ft__panel {
    left: 50%;
    right: auto;
    top: 50%;
    width: min(calc(100% - 2rem), 34rem);
    transform: translate(-50%, -50%);
    padding: 1.5rem;
  }

  .c-ft__title {
    font-size: clamp(2.7rem, 14vw, 4.4rem);
  }

  .c-ft__content,
  .c-ft__links {
    grid-template-columns: 1fr;
  }

  .c-ft__divider,
  .c-ft__link-divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
  }
}


/* =========================================================
   Mobile Nav + Footer Refinement v2
   ========================================================= */

/* Hide hamburger on desktop/tablet. */
.site-nav__toggle {
  display: none;
}

/* Footer overlay: solid black on right fading left into map. */
.c-ft__panel {
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.96) 46%, rgba(0,0,0,.98) 100%);
  backdrop-filter: none;
  padding-left: clamp(4rem, 6vw, 7rem);
}

.c-ft__title {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-style: normal;
}

.c-ft__title,
.c-ft__title strong {
  font-style: normal;
}

.c-ft__content {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.c-ft__links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.c-ft__link-group {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.c-ft__horizontal-rule {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.22);
}

.c-ft__divider,
.c-ft__link-divider {
  display: none;
}

/* Mobile nav: mini brand left, hamburger right. */
@media (max-width: 600px) {
  .site-nav {
    height: 64px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-inline: 1rem;
    position: relative;
  }

  .site-nav__brand {
    justify-content: flex-start;
    min-height: 64px;
    font-size: 1rem;
    font-weight: 800;
  }

  .site-nav__cta {
    display: none;
  }

  .site-nav__toggle {
    display: inline-flex;
    grid-column: 3;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .28rem;
    z-index: 120;
  }

  .site-nav__toggle span {
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .site-nav.is-open .site-nav__toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

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

  .site-nav.is-open .site-nav__toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .75rem 1rem 1rem;
    background: #000;
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.25);
    z-index: 110;
  }

  .site-nav.is-open .site-nav__links {
    display: flex;
  }

  .site-nav__links a {
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    font-size: 1.05rem;
    font-weight: 800;
  }

  /* Footer mobile refinement */
  .c-ft {
    min-height: 60rem;
  }

  .c-ft__shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.96) 100%);
  }

  .c-ft__panel {
    width: min(calc(100% - 2rem), 35rem);
    background:
      linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 70%, rgba(0,0,0,.62) 100%);
    padding: 1.5rem;
  }

  .c-ft__title {
    margin-bottom: 1.5rem;
  }

  .c-ft__content {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .c-ft__links {
    gap: 1rem;
  }
}

/* Tablet footer keeps two-column panel over the map. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-ft__panel {
    background:
      linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.78) 22%, rgba(0,0,0,.96) 100%);
    padding-left: 3rem;
  }

  .c-ft__content {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  }
}


/* =========================================================
   GL Gallery Update
   Six items, condensed thumbnails, expanded lightbox, mobile 4-up.
   ========================================================= */

.c-gl__header {
  display: block;
  margin-bottom: 2rem;
}

.c-gl__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-gl__item {
  aspect-ratio: 1 / 1;
}

.c-gl__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox {
  gap: 1rem;
}

.lightbox__frame {
  position: relative;
  width: min(92vw, 72rem);
  max-height: 84vh;
  display: grid;
  place-items: center;
}

.lightbox__frame img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.45);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: 1rem;
}

.lightbox__nav--next {
  right: 1rem;
}

.lightbox__close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 3;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #111;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .c-gl__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
  }

  .c-gl__item {
    border-radius: .65rem;
  }

  .c-gl__item span {
    display: none;
  }

  .lightbox {
    padding: 1rem;
  }

  .lightbox__frame {
    width: 100%;
  }

  .lightbox__nav {
    width: 2.6rem;
    height: 2.6rem;
  }

  .lightbox__nav--prev {
    left: .5rem;
  }

  .lightbox__nav--next {
    right: .5rem;
  }
}


/* =========================================================
   GL Mobile Fix
   Mobile: 3 thumbnails per row.
   Mobile lightbox uses condensed image via JS.
   ========================================================= */

@media (max-width: 600px) {
  .c-gl__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
}


/* =========================================================
   GL Mobile 3-Up Hard Override
   Overrides the global mobile grid stack rule.
   ========================================================= */

@media (max-width: 600px) {
  .c-gl .c-gl__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }

  .c-gl .c-gl__item {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }
}


/* =========================================================
   GL MOBILE FINAL FIX — FORCE 3 COLUMNS
   ========================================================= */

@media (max-width: 600px) {
  .section.c-gl .c-gl__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  .section.c-gl .c-gl__item {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }
}


/* =========================================================
   System Tighten v1 — Component-Scoped Mobile Grids
   Root principle:
   Mobile does not mean every grid stacks.
   Each component owns its responsive behavior.
   ========================================================= */

@media (max-width: 600px) {
  /* Generic content grids that should stack */
  .c-cg__grid,
  .c-nf__grid,
  .c-rw__grid,
  .c-tx__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* GL is a thumbnail/gallery component, so it keeps a 3-up scan grid. */
  .c-gl .c-gl__grid,
  .section.c-gl .c-gl__grid,
  .content-container .c-gl__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .c-gl .c-gl__item,
  .section.c-gl .c-gl__item,
  .content-container .c-gl__item {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }
}


/* =========================================================
   Footer Full-Height Panel + Mobile Stack
   Desktop/tablet: right content panel attached to top/right/bottom.
   Mobile: map stacks above content block.
   ========================================================= */

.c-ft {
  position: relative;
  min-height: clamp(44rem, 72vh, 56rem);
  overflow: hidden;
}

.c-ft__panel {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(44rem, 48%);
  height: 100%;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
  padding-left: clamp(4rem, 6vw, 7rem);
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.96) 48%, rgba(0,0,0,.98) 100%);
}

.c-ft__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.24));
}

/* Tablet keeps attached full-height panel, but allows more width. */
@media (min-width: 601px) and (max-width: 900px) {
  .c-ft {
    min-height: 52rem;
  }

  .c-ft__panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(44rem, 58%);
    height: 100%;
    transform: none;
    padding: 2.5rem;
    padding-left: 3.25rem;
    background:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 22%, rgba(0,0,0,.96) 100%);
  }
}

/* Mobile: map and content become separate stacked blocks. */
@media (max-width: 600px) {
  .c-ft {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    background: #050505;
  }

  .c-ft__map {
    position: relative;
    inset: auto;
    width: 100%;
    height: 18rem;
    min-height: 18rem;
    order: 1;
  }

  .c-ft__shade {
    display: none;
  }

  .c-ft__panel {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    max-width: none;
    transform: none;
    padding: 1.5rem;
    background: #050505;
  }

  .c-ft__content {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}


/* =========================================================
   Footer Link Hover (Green Accent)
   ========================================================= */

.c-ft__links a {
  position: relative;
  transition: color 180ms ease;
}

.c-ft__links a:hover {
  color: var(--accent);
}

.c-ft__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 220ms ease;
}

.c-ft__links a:hover::after {
  width: 100%;
}


/* =========================================================
   NF Mobile Title Fix + CR Loop Support
   ========================================================= */

@media (max-width: 600px) {
  .c-nf .section-title {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(2.25rem, 12vw, 3.7rem);
    letter-spacing: -0.045em;
  }

  .c-nf {
    overflow: visible;
  }
}

/* CR loop: arrows stay active because carousel wraps endlessly. */
.c-cr__arrow:disabled,
.c-cr__control:disabled {
  opacity: 1;
  cursor: pointer;
}


/* =========================================================
   Stationary Slider Arrow Hover Fix
   Prevent CR/RW arrows from bouncing on hover.
   ========================================================= */

.c-cr__arrow:hover,
.c-cr__control:hover,
.c-rw__arrow:hover,
.c-rw__control:hover {
  transform: none !important;
}

.c-hr__arrow:hover {
  transform: translateY(-50%) !important;
}

/* Desktop-positioned CR/RW arrows that rely on vertical centering keep it. */
@media (min-width: 901px) {
  .c-cr__arrow:hover,
  .c-rw__arrow:hover {
    transform: translateY(-50%) !important;
  }
}


/* =========================================================
   CR + RW Slider Arrow Outside Edge Fix
   - No hover movement
   - Arrows sit just outside exterior card edges
   - Not overlayed on cards
   ========================================================= */

/* Kill all motion/hover movement on slider arrows. */
.c-cr__arrow,
.c-cr__arrow:hover,
.c-cr__control,
.c-cr__control:hover,
.c-rw__arrow,
.c-rw__arrow:hover,
.c-rw__control,
.c-rw__control:hover {
  transform: none !important;
}

/* Desktop CR: arrows outside the card window, not overlayed. */
@media (min-width: 901px) {
  .c-cr__viewport {
    margin-inline: 3.75rem !important;
    padding-inline: 0 !important;
    position: relative;
  }

  .c-cr__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .c-cr__arrow:hover {
    transform: translateY(-50%) !important;
  }

  .c-cr__arrow--prev {
    left: -3.75rem !important;
  }

  .c-cr__arrow--next {
    right: -3.75rem !important;
  }

  /* Desktop RW: arrows outside the card stage, not overlayed. */
  .c-rw__shell {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem !important;
    gap: 0.75rem !important;
  }

  .c-rw__arrow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    align-self: center;
    justify-self: center;
  }

  .c-rw__arrow:hover {
    transform: none !important;
  }
}

/* Tablet + mobile lower-control arrows stay on the control row edges, stationary. */
@media (max-width: 900px) {
  .c-cr__mobile-controls,
  .c-rw__controls {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
  }

  .c-cr__mobile-controls .c-cr__arrow--prev,
  .c-rw__control--prev {
    justify-self: start !important;
    transform: none !important;
  }

  .c-cr__mobile-controls .c-cr__arrow--next,
  .c-rw__control--next {
    justify-self: end !important;
    transform: none !important;
  }

  .c-cr__mobile-controls .c-cr__arrow:hover,
  .c-rw__control:hover {
    transform: none !important;
  }

  .c-cr__mobile-controls .c-cr__dots,
  .c-rw__dots {
    justify-self: center !important;
  }
}


/* =========================================================
   TB Mobile Overlay Layout
   Mobile only: media sits behind copy so tab content shares space.
   ========================================================= */

@media (max-width: 600px) {
  .c-tb__panel-inner {
    position: relative;
    display: block;
    min-height: 28rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #111;
  }

  .c-tb__panel-inner .media-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    opacity: .72;
    filter: brightness(.72) saturate(1.05);
  }

  .c-tb__panel-inner .media-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.86) 100%),
      linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12));
  }

  .c-tb__panel-inner .media-box span {
    opacity: 0;
  }

  .c-tb__copy {
    position: relative;
    z-index: 2;
    min-height: 28rem;
    justify-content: flex-end;
    padding: 1.35rem;
    border-radius: 0;
    background: transparent;
    color: #fff;
  }

  .c-tb__copy .eyebrow {
    color: var(--accent);
  }

  .c-tb__copy h3 {
    max-width: 11ch;
    font-size: clamp(2rem, 10vw, 3.2rem);
    color: #fff;
  }

  .c-tb__copy .copy,
  .c-tb__copy p {
    color: rgba(255,255,255,.82);
  }

  .c-tb__copy .button,
  .c-tb__copy .button--dark {
    background: var(--accent);
    color: #111;
  }
}

/* =========================================================
   HS Tablet + Mobile Content Centering
   ========================================================= */
@media (max-width: 900px) {
  .c-hr__content {
    text-align: center;
    align-items: center;
    margin-inline: auto;
  }

  .c-hr__content .eyebrow,
  .c-hr__content h1,
  .c-hr__content p,
  .c-hr__content .button {
    text-align: center;
    margin-inline: auto;
  }

  .c-hr__content h1 {
    max-width: 18ch;
  }

  .c-hr__content p {
    max-width: 32rem;
  }
}


/* Trade Waters home image pass fixes */
.media-box {
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.media-box img,
.c-cg__card .media-box img,
.c-cr__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-scl .media-box,
.c-scr .media-box {
  aspect-ratio: 1 / 1;
  min-height: 0;
  align-self: stretch;
}
.c-scl .media-box img,
.c-scr .media-box img {
  object-fit: cover;
}
.tw-hero-slide {
  background-repeat: no-repeat;
}
.c-cr__image {
  overflow: hidden;
}


/* Trade Waters SCL/SCR background art pass */
.tw-bg-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tw-bg-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

.tw-bg-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tw-bg-sclA::before {
  background-image: url('../assets/Site-Graphics/section-BG-dots.png');
}

.tw-bg-sclA::after {
  background: linear-gradient(90deg, rgba(244,244,240,0), rgba(244,244,240,0));
}

.tw-bg-scl::before {
  background-image: url('../assets/Site-Graphics/SCL-Background-Auburn_BG.png');
}

.tw-bg-scl::after {
  background: linear-gradient(90deg, rgba(244,244,240,0), rgba(244,244,240,0));
}


.tw-bg-scr::before {
  background-image: url('../assets/Site-Graphics/SCR-Background-Aqua-BG.png');
}

.tw-bg-scr::after {
 background:
    linear-gradient(90deg, rgba(239,238,231,.15),),
    url('../assets/Site-Graphics/Shadow-Up.png') left bottom / 100% auto no-repeat;
}

.tw-bg-scLD::before {
  background-image: url('../assets/Site-Graphics/Hex-green-BG1.png');
}

.tw-bg-sclD::after {
  background: linear-gradient(90deg, rgba(244,244,240,0), rgba(244,244,240,0));
}

.tw-bg-section .media-box {
  position: relative;
  z-index: 1;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,83);
}

.tw-bg-section .c-scl__copy,
.tw-bg-section .c-sclD__copy,
.tw-bg-section .c-sclA__copy,
.tw-bg-section .c-scr__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}
}


/* =========================================================
   Trade Waters Site Structure Pass
   Keeps baseline styling; adds dropdown navigation + content helpers.
   ========================================================= */
.site-nav__links { overflow: visible; }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__item > a { display: inline-flex; align-items: center; min-height: 100%; }
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(.5rem);
  min-width: 13rem;
  padding: .65rem;
  border-radius: 1rem;
  background: rgba(0,0,0,.94);
  color: #fff;
  display: none;
  flex-direction: column;
  gap: .2rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.25);
  z-index: 200;
}
.site-nav__dropdown a { padding: .75rem .85rem; border-radius: .7rem; font-size: .9rem; font-weight: 800; }
.site-nav__dropdown a:hover, .site-nav__dropdown a:focus { background: rgba(255,255,255,.10); }
.site-nav__item:hover .site-nav__dropdown, .site-nav__item:focus-within .site-nav__dropdown { display: flex; }
.tw-feature-list { margin: 1.25rem 0 0; padding-left: 1.1rem; line-height: 1.65; color: var(--muted); }
.section--dark .tw-feature-list { color: rgba(255,255,255,.72); }
.tw-process-list { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap); margin-top: 2rem; }
.tw-process-card { padding: 1.25rem; border-radius: var(--radius); background: rgba(255,255,255,.9); min-width:0; }
.tw-process-card h3 { margin:.4rem 0 .6rem; text-transform: uppercase; line-height: 1; }
.tw-process-card p { margin:0; line-height:1.48; color: var(--muted); }
.tw-simple-hero .c-hr__slide { background-size: cover; background-position:center; }
.tw-calc-steps .c-nf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tw-process-list, .tw-calc-steps .c-nf__grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) {
  .site-nav__item { display:block; }
  .site-nav__item > a { min-height:auto; width:100%; }
  .site-nav__dropdown {
    position: static;
    transform:none;
    display:flex;
    min-width:0;
    padding:.25rem 0 .65rem .9rem;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .site-nav__dropdown a { padding:.65rem 0; border-bottom: 1px solid rgba(255,255,255,.10); font-size:.95rem; }
}


/* =========================================================
   TW Fix Pass: RW restored + footer title safe spacing
   ========================================================= */
.c-ft {
  min-height: 46rem;
}
.c-ft__panel {
  justify-content: flex-start;
  padding-top: clamp(4rem, 5vw, 5.5rem);
  padding-bottom: clamp(3rem, 4vw, 4.5rem);
  overflow: hidden;
}
.c-ft__title {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: .9;
  margin-top: 0;
}
@media (min-width: 901px) {
  .c-ft__panel {
    width: min(46rem, 50%);
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .c-ft { min-height: 54rem; }
  .c-ft__panel {
    justify-content: flex-start;
    padding-top: 3rem;
    width: min(44rem, 62%);
  }
  .c-ft__title { font-size: clamp(2.8rem, 6vw, 4.8rem); }
}
@media (max-width: 600px) {
  .c-ft__panel {
    padding-top: 2rem;
    overflow: visible;
  }
  .c-ft__title {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }
}

/* =========================================================
   TW Fix Pass: Dropdown hover bridge
   Keeps Services submenu open while moving from parent link to submenu.
   ========================================================= */
@media (min-width: 601px) {
  .site-nav__item {
    position: relative;
  }

  .site-nav__item::after {
    content: "";
    position: absolute;
    left: -1rem;
    right: -1rem;
    top: 100%;
    height: .9rem;
    z-index: 199;
  }

  .site-nav__dropdown {
    top: calc(100% + .35rem);
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(0);
    transition: opacity 160ms var(--ease), visibility 160ms var(--ease);
  }

  .site-nav__item:hover .site-nav__dropdown,
  .site-nav__item:focus-within .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}


/* =========================================================
   TW Fine Tune Pass: Nav logo + simplified nav + SCL shadow overlay
   ========================================================= */
.site-header .site-nav {
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.site-nav__brand {
  justify-content: flex-start;
  overflow:visible;
  padding: 0 1.25rem;
  line-height: 0;
}

.site-nav__brand img {
  display: block;
  height: calc(var(--nav-height) * 1.26);
  width: auto;
  max-width: none;
  object-fit: contain;
}

.site-nav__links {
  justify-content: flex-end;
  padding-right: 1.25rem;
}

.tw-bg-scl::before {
  background-image: url('../assets/Site-Graphics/Shadow-Up1.png'), url('../assets/Site-Graphics/SCL-Background-Auburn_BG.png');
  background-size: 100% auto, cover;
  background-position: bottom center, center;
  background-repeat: no-repeat, no-repeat;
}
.tw-bg-sclD::before {
  background-image: url('../assets/Site-Graphics/Shadow-Up.png'), url('../assets/Site-Graphics/Hex-green-BG1.png');
  background-size: 100% auto, cover;
  background-position: bottom center, center;
  background-repeat: no-repeat, no-repeat;
}

@media (min-width: 601px) and (max-width: 900px) {
  .site-header .site-nav {
    grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  }

  .site-nav__brand img {
    height: calc(var(--nav-height) * 1.24);
  }
}

@media (max-width: 600px) {
  .site-header .site-nav {
    grid-template-columns: 1fr;
  }

  .site-nav__brand {
    justify-content: center;
    padding: 0 1rem;
    min-height: 64px;
  }

  .site-nav__brand img {
    height: 82px;
  }

  .site-nav__links {
    justify-content: center;
    padding-right: .75rem;
  }
}


/* =========================================================
   Trade Waters Brand Styling Pass
   Fonts and navigation based on uploaded brand kit + nav example.
   ========================================================= */
:root {
  --tw-black: #05080a;
  --tw-deep: #0b1117;
  --tw-slate: #26313c;
  --tw-cream: #f3efe5;
  --tw-mint: #89d7bd;
  --tw-mint-dark: #4aa983;
  --tw-gold: #c7a75a;
  --accent: #b8ef42;
}

body {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  background: #555;
	  background-color: #080b0e;

}

.heading-xl,
.c-ft__title {
  font-family: 'Vast Shadow', Georgia, serif;
  font-weight: 400;
}

.section-title,
.c-tb__copy h3,
.c-cr__content h3,
.c-rw__condensed h3,
.c-rw__expanded h3,
.tw-process-card h3,
.c-nf__item h3,
.c-cg__card h3 {
  font-family: 'Vast Shadow', Georgia, serif;
	font-weight: 400;
}

.copy,
.c-tx__copy,
.c-cr__content p:not(.eyebrow),
.tw-process-card p,
.c-ft__contact,
.c-ft__links a {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
}

.button {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  letter-spacing: .055em;
}

/* Navigation: logo fills nav height and clips top/bottom like supplied example. */
.site-header {
  background: linear-gradient(90deg, #020405 0%, #05080a 42%, #1f2a34 100%);
  border-bottom: 7px solid var(--tw-mint);
}

.site-header__inner {
  width: min(var(--container-width), var(--container-max));
  background: transparent;
}

.site-header .site-nav {
  --nav-height: 96px;
  height: var(--nav-height);
  grid-template-columns: minmax(420px, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: linear-gradient(90deg, #020405 0%, #05080a 46%, #24313d 100%);
  overflow: visible;
}

.site-header .site-nav__brand,
.site-header .site-nav__links {
  background: transparent;
}

.site-nav__brand {
  position: relative;
  justify-content: flex-start;
  align-items: center;
  min-height: var(--nav-height);
  height: var(--nav-height);
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  overflow: hidden;
}

.site-nav__brand img {
  width: min(520px, 42vw);
  max-width: none;
  height: 156%;
  object-fit: contain;
  object-position: left center;
  transform: translateY(-1px);
  filter: drop-shadow(0 .2rem .2rem rgba(0,0,0,.22));
}

.site-nav__links {
  align-items: center;
  justify-content: flex-end;
  gap: clamp(2.2rem, 4vw, 4.6rem);
  padding: 0 clamp(1.5rem, 4vw, 3.6rem) 0 1.25rem;
  min-height: var(--nav-height);
}

.site-nav__links > a,
.site-nav__item > a {
  font-family: 'Crete Round', Georgia, serif;
  font-style: italic;
  color: rgba(243,239,229,.78);
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 .12rem .15rem rgba(0,0,0,.36);
  transition: color 180ms ease, transform 180ms ease;
}

.site-nav__links > a:hover,
.site-nav__item:hover > a,
.site-nav__item:focus-within > a {
  color: var(--tw-cream);
  transform: translateY(-1px);
}

.site-nav__item {
  min-height: var(--nav-height);
  align-items: center;
}

.site-nav__item::after {
  content: "";
  position: absolute;
  left: -1rem;
  right: -1rem;
  top: 100%;
  height: 1.2rem;
}

.site-nav__dropdown {
  top: calc(100% + .65rem);
  left: 50%;
  min-width: 15rem;
  padding: .85rem;
  border: 1px solid rgba(137,215,189,.26);
  border-radius: 0;
  background: rgba(5,8,10,.96);
  box-shadow: 0 1.2rem 2.6rem rgba(0,0,0,.45);
}

.site-nav__dropdown a {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  font-style: normal;
  color: rgba(243,239,229,.82);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  border-radius: 0;
}

.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus {
  background: rgba(137,215,189,.12);
  color: var(--tw-cream);
}

/* Brand kit typography rhythm. */
.eyebrow {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  color: var(--tw-mint);
}

.eyebrow--dark {
  color: var(--tw-mint-dark);
}

.section--light {
  background: #efeee7;
}

.section--dark {
  background: #080b0e;
}

.section--accent {
  background:
    radial-gradient(circle at 78% 16%, rgba(137,215,189,.20), transparent 30%),
    linear-gradient(135deg, #eeece4 0%, #d8d4c8 100%);
}

.media-box {
  border-radius: 1.6rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 1.25rem 3rem rgba(0,0,0,.20);
}

.c-cr__card,
.c-cg__card,
.c-nf__item,
.tw-process-card {
  border-radius: 1.25rem;
  box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.08);
}

/* SCL/SCR background artwork + bottom shadow overlay. */
.tw-bg-section {
  position: relative;
  overflow: hidden;
}

.tw-bg-section .c-scl__copy,
.tw-bg-section .c-scr__copy,
.tw-bg-section .media-box {
  position: relative;
  z-index: 3;
}

.tw-bg-scl::after {
  background:
    linear-gradient(90deg, rgba(239,238,231,.15),),
    url('../assets/Site-Graphics/Shadow-Up.png') left bottom / 100% auto no-repeat;
}

.tw-bg-scl::after {
  background:
    linear-gradient(90deg, rgba(239,238,231,.15),),
    url('../assets/Site-Graphics/Shadow-Up.png') left bottom / 100% auto no-repeat;
}

.tw-bg-scr::after {
   background:
    linear-gradient(90deg, rgba(239,238,231,.15),),
    url('../assets/Site-Graphics/Shadow-Up.png') left bottom / 100% auto no-repeat;
}

/* Give major content modules a more Trade Waters editorial feel without changing structure. */
.c-hr__slide {
  background-size: cover;
  background-position: center;
}

.c-gl__item span,
.c-rw__label,
.c-rw__condensed h3 {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

.c-ft__title {
  color: var(--tw-cream);
  text-transform: none;
  line-height: .86;
}

.c-ft__links a {
  letter-spacing: .08em;
}

/* Tablet nav */
@media (min-width: 601px) and (max-width: 900px) {
  .site-header .site-nav {
    --nav-height: 82px;
    grid-template-columns: minmax(300px, .8fr) auto;
  }

  .site-nav__brand img {
    width: min(390px, 45vw);
    height: 150%;
  }

  .site-nav__links {
    gap: 1.35rem;
    padding-right: 1.25rem;
  }

  .site-nav__links > a,
  .site-nav__item > a {
    font-size: .92rem;
    letter-spacing: .09em;
  }
}

/* Mobile: keep logo clipped, dropdown visible inside hamburger menu. */
@media (max-width: 600px) {
  .site-header {
    border-bottom-width: 5px;
  }

	 .site-nav__links {
    background: rgba(8, 11, 14, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(184, 239, 66, 0.45);
    border-bottom: 1px solid rgba(184, 239, 66, 0.25);
  }

  .site-nav__dropdown {
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45);
  }

  .site-nav__dropdown a {
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
  }
	
  .site-header .site-nav {
    --nav-height: 68px;
    height: var(--nav-height);
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 0;
    overflow: visible;
  }

  .site-nav__brand {
    min-height: var(--nav-height);
    height: var(--nav-height);
    padding-left: 1rem;
  }

  .site-nav__brand img {
    width: min(320px, 74vw);
    height: 152%;
  }

  .site-nav__toggle {
    display: inline-flex;
    grid-column: 2;
    margin-right: .9rem;
    background: rgba(243,239,229,.08);
    border-color: rgba(243,239,229,.24);
  }

  .site-nav__links {
    top: var(--nav-height);
    background: rgba(5,8,10,.98);
    border-top: 1px solid rgba(137,215,189,.20);
  }

  .site-nav__links > a,
  .site-nav__item > a {
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 1rem;
    letter-spacing: .08em;
    transform: none;
  }

  .site-nav__item {
    min-height: auto;
  }

  .site-nav__dropdown {
    top: auto;
    border: 0;
  }
}


/* Commercial image update pass */
.media-box img,
.c-cr__image img,
.c-gl__item img,
.c-rw__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Mural integration pass */
.c-gl__grid {
  align-items: stretch;
}

.c-gl__item img,
.c-cr__image img,
.media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* HERO SLIDER */
.hero-slider{
 position:relative;
 min-height:100vh;
 overflow:hidden;
}
.hero-slide{
 position:absolute;
 inset:0;
 opacity:0;
 transition:opacity .8s ease;
 background-size:cover;
 background-position:center;
 display:flex;
 align-items:center;
}
.hero-slide.active{opacity:1;z-index:2;}
.hero-overlay{
 position:absolute;
 inset:0;
 background:linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35));
}
.hero-content{
 position:relative;
 z-index:2;
 max-width:720px;
 padding:0 8vw;
 color:white;
}
.hero-content h1{
 font-size:clamp(3rem,6vw,6rem);
 line-height:.95;
 margin:0 0 1.5rem;
}
.hero-content p{
 max-width:640px;
 font-size:1.1rem;
 line-height:1.7;
 margin-bottom:2rem;
}
.hero-nav{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 width:78px;
 height:78px;
 border:none;
 background-color:transparent;
 background-size:contain;
 background-repeat:no-repeat;
 cursor:pointer;
 z-index:10;
 transition:transform .2s ease;
}
.hero-nav:hover{transform:translateY(-50%) scale(1.06);}
.hero-prev{
 left:30px;
 background-image:url('../assets/Site-Graphics/Prev-Arrow.png');
}
.hero-next{
 right:30px;
 background-image:url('../assets/Site-Graphics/Next-Arrow.png');
}
.hero-prev:hover{
 background-position:bottom;
}
.hero-next:hover{
 background-position:bottom;
}




/* Mural page RW uses the native baseline RW component */
#mural-featured-work .c-rw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

#mural-featured-work .c-rw__card {
  position: relative;
  display: block;
  min-height: 30rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
}

#mural-featured-work .c-rw__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mural-featured-work .c-rw__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: .9rem;
  border-radius: .8rem;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  #mural-featured-work .c-rw__grid {
    grid-template-columns: 1fr;
  }
}


/* Homepage HS service slider pass */
.tw-home-hs {
  position: relative;
  overflow: hidden;
}

.tw-home-hs .c-hr__track {
  display: flex;
  width: 100%;
  transition: transform .7s ease;
}

.tw-home-hs .c-hr__slide {
  flex: 0 0 100%;
  min-width: 100%;
  background-size: cover;
  background-position: center;
}

.tw-home-hs .c-hr__arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.tw-home-hs .c-hr__arrow--prev {
  left: 2rem;
}

.tw-home-hs .c-hr__arrow--next {
  right: 2rem;
}

.tw-home-hs .c-hr__arrow img {
  width: 100%;
  height: 200%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.tw-home-hs .c-hr__arrow:hover img {
  object-position: bottom;
}

@media (max-width: 900px) {
  .tw-home-hs .c-hr__arrow {
    width: 54px;
    height: 54px;
  }

  .tw-home-hs .c-hr__arrow--prev {
    left: 1rem;
  }

  .tw-home-hs .c-hr__arrow--next {
    right: 1rem;
  }
}


/* Homepage HS arrow visibility tweak */
.tw-home-hs .c-hr__arrow {
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: transparent !important;
  border-radius: 0;
}

.tw-home-hs .c-hr__arrow img {
  width: 48px;
  height: 96px;
  max-width: none;
  object-fit: cover;
  object-position: 0 0;
  transition: transform 180ms ease;
  transform: translateY(0);
}

.tw-home-hs .c-hr__arrow:hover img,
.tw-home-hs .c-hr__arrow:focus-visible img {
  transform: translateY(-48px);
}

@media (max-width: 900px) {
  .tw-home-hs .c-hr__arrow {
    width: 40px;
    height: 40px;
  }

  .tw-home-hs .c-hr__arrow img {
    width: 40px;
    height: 80px;
  }

  .tw-home-hs .c-hr__arrow:hover img,
  .tw-home-hs .c-hr__arrow:focus-visible img {
    transform: translateY(-40px);
  }
}


/* Homepage HS traditional arrow controls */
.tw-home-hs .c-hr__arrow {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 999px;
  background: rgba(0,0,0,.68) !important;
  color: #fff;
  font-size: 2.4rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.tw-home-hs .c-hr__arrow:hover,
.tw-home-hs .c-hr__arrow:focus-visible {
  background: var(--accent) !important;
  color: #111;
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.06);
}

.tw-home-hs .c-hr__arrow img {
  display: none !important;
}

@media (max-width: 900px) {
  .tw-home-hs .c-hr__arrow {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 2rem;
  }
}