/* =========================================================
   W.A — Architect — global styles
   ========================================================= */

:root {
  --navy: #181B31;
  --gold: #A78D6B;
  --gray: #7A7A7A;
  --white: #FFFFFF;
  --overlay-dark: #1a1a1a;

  --sidebar-w: 136px;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}

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

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  color: var(--navy);
}

.accent { color: var(--gold); }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* =========================================================
   MOBILE TOP BAR
   ========================================================= */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--white);
}

.topbar__logo {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--navy);
}

.topbar__menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--navy);
}

@media (min-width: 1024px) {
  .topbar { display: none; }
}

/* =========================================================
   HAMBURGER ICON
   ========================================================= */

.hamburger {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  height: 25px;
}

.hamburger i {
  display: block;
  width: 2px;
  background: currentColor;
}

/* uneven bar lengths, top-aligned — as on the reference theme */
.hamburger i:nth-child(1) { height: 20px; }
.hamburger i:nth-child(2) { height: 25px; }
.hamburger i:nth-child(3) { height: 15px; }

/* =========================================================
   SIDEBAR (DESKTOP ONLY)
   ========================================================= */

.sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    z-index: 40;
    background: var(--white);
  }

  .main {
    margin-left: var(--sidebar-w);
  }
}

.sidebar__col-left {
  flex: 0 0 auto;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0;
}

.sidebar__divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.1);
}

.sidebar__col-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__logo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: rotate(-90deg);
}

.sidebar__logo-line {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  white-space: nowrap;
}

.sidebar__middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--navy);
}

.sidebar__menu-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.sidebar__tagline-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
}

.sidebar__tagline {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.04em;
}

/* each letter flips out and back, staggered 0.03s apart */
.tagline-char {
  position: relative;
  display: inline-block;
}

.sidebar__tagline-wrap:hover .tagline-char {
  animation: taglineLiquid 0.6s calc(var(--i, 0) * 0.03s) cubic-bezier(0.23, 1, 0.32, 1) both alternate;
}

@keyframes taglineLiquid {
  50% { opacity: 0; transform: translateX(-0.3em); }
  51% { opacity: 0; transform: translateX(0.3em); }
  100% { opacity: 1; transform: translateX(0); }
}

.sidebar__tagline-arrow {
  display: block;
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
}

.sidebar__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The whole pill is a 3D drum. On hover it rolls a quarter turn like a
   cylinder: the "Start a Project" face rolls up and away while the
   "Start Now" face rolls in from below, with a lift shadow. */
.start-project-btn {
  position: relative;
  width: 48px;
  height: 150px;
  color: var(--navy);
  border-radius: 2px;
  perspective: 620px;
}

/* soft ground shadow that lifts in on hover */
.start-project-btn::after {
  content: "";
  position: absolute;
  inset: 6px 2px;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(24, 27, 49, 0.14);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
}

.start-project-btn:hover::after {
  opacity: 1;
  box-shadow: 0 16px 34px rgba(24, 27, 49, 0.22);
}

/* drum pulled back by half its depth so the front face lands exactly on
   the pill's plane (true size, no overhang); it pivots on the axis
   behind that face, giving a real barrel roll */
.start-project-btn__drum {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(-75px);
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.15, 1);
}

.start-project-btn:hover .start-project-btn__drum {
  transform: translateZ(-75px) rotateX(90deg);
}

/* each face is a full grey panel — half the pill height in depth so the
   two faces meet edge-to-edge and form a square-section drum (75 = 150/2) */
.start-project-btn__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F1EE;
  border-radius: 2px;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(24, 27, 49, 0.04);
}

.start-project-btn__face--front {
  transform: translateZ(75px);
}

.start-project-btn__face--back {
  transform: rotateX(-90deg) translateZ(75px);
}

/* labels read vertically, bottom-to-top, like the sidebar */
.start-project-btn__label {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main {
  min-height: 100vh;
}

@media (max-width: 1023px) {
  .main {
    padding-top: 64px;
  }
}

/* =========================================================
   HERO CAROUSEL
   ========================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
}

.hero-carousel,
.hero-carousel .flickity-viewport,
.hero-carousel .flickity-slider {
  height: 100%;
}

.hero-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 6s linear;
}

.hero-slide.is-selected .hero-slide__bg {
  transform: scale(1.12);
}

.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 40px;
  max-width: 900px;
}

@media (min-width: 1024px) {
  .hero-slide__content {
    padding: 0 80px;
  }
}

.hero-slide__headline {
  font-size: 42px;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .hero-slide__headline { font-size: 60px; }
}

@media (min-width: 1200px) {
  .hero-slide__headline { font-size: 78px; }
}

.mask {
  display: block;
  overflow: hidden;
}

.mask__inner {
  display: block;
  transform: translateY(110%);
}

.hero-slide.is-selected .mask__inner {
  animation: maskReveal 0.9s var(--ease) 0.3s forwards;
}

@keyframes maskReveal {
  to { transform: translateY(0); }
}

.hero-slide__subtext {
  color: #E5E5E5;
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
  opacity: 0;
}

.hero-slide.is-selected .hero-slide__subtext {
  animation: fadeUp 0.9s var(--ease) 0.6s forwards;
}

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

/* Flickity pagination — pill style */
.hero-carousel .flickity-page-dots {
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-carousel .flickity-page-dots .dot {
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(255,255,255,0.5);
  opacity: 1;
  border-radius: 50%;
  transition: width 0.35s var(--ease), background 0.35s var(--ease), border-radius 0.35s var(--ease);
}

.hero-carousel .flickity-page-dots .dot.is-selected {
  width: 28px;
  border-radius: 5px;
  background: var(--white);
}

.hero-arrows {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
}

.hero-arrows__btn {
  width: 70px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--navy);
  font-size: 18px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.hero-arrows__btn--next {
  border-left: 1px solid rgba(24, 27, 49, 0.1);
}

.hero-arrows__btn:hover {
  background: var(--navy);
  color: var(--white);
}

/* =========================================================
   GENERIC CONTENT SECTIONS
   ========================================================= */

.section {
  padding: 100px 24px;
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .section { padding: 140px 24px; }
}

.section__title {
  font-size: 40px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .section__title { font-size: 56px; }
}

.section__text {
  color: var(--gray);
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
}

.footer {
  padding: 40px 24px;
  text-align: center;
  color: var(--gray);
  font-size: 13px;
  border-top: 1px solid rgba(24,27,49,0.08);
}

/* =========================================================
   FULLSCREEN NAV OVERLAY
   ========================================================= */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  visibility: hidden;
  pointer-events: none;
}

.nav-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nav-overlay__blinds {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}

.nav-overlay__blind {
  flex: 1;
  background: var(--overlay-dark);
  transform: scaleY(0);
  transform-origin: top;
}

.nav-overlay__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}

.nav-overlay__bg-graphic {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  max-width: 780px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.nav-overlay__bg-graphic img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-overlay__close {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.nav-overlay__close span {
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--white);
}

.nav-overlay__close span:first-child { transform: rotate(45deg); }
.nav-overlay__close span:last-child { transform: rotate(-45deg); }

.nav-overlay__content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 90px 24px 32px;
  max-width: 1600px;
  margin: 0 auto;
  opacity: 0;
}

@media (min-width: 1024px) {
  .nav-overlay__content {
    padding: 100px 80px 32px;
  }
}

.nav-overlay__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}

@media (min-width: 1024px) {
  .nav-overlay__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }
}

.nav-overlay__nav ul li {
  overflow: hidden;
}

.nav-overlay__nav a {
  display: inline-block;
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.75;
  color: var(--white);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

@media (min-width: 1024px) {
  .nav-overlay__nav a { font-size: 46px; }
}

.nav-overlay__nav a:hover {
  color: var(--gold);
  transform: translateX(10px);
}

.nav-overlay__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 80px;
  min-width: 280px;
}

.nav-overlay__info-block h4 {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.nav-overlay__info-block p {
  color: #e4e4e4;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 4px;
  font-family: var(--font-body);
}

.nav-overlay__info-block a:hover {
  color: var(--gold);
}

.nav-overlay__footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-overlay__socials {
  display: flex;
  gap: 14px;
}

.nav-overlay__social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav-overlay__social-icon:hover {
  background: var(--white);
  color: var(--overlay-dark);
  border-color: var(--white);
}

.nav-overlay__available {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: #cfcfcf;
  font-family: var(--font-body);
}

.nav-overlay__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  flex: none;
}

/* =========================================================
   START A PROJECT MODAL — fullscreen panel wiping down
   from the top (same curves as the reference theme)
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
  pointer-events: none;
}

.modal.is-open,
.modal.is-closing {
  visibility: visible;
}

.modal.is-open {
  pointer-events: auto;
}

.modal__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--white);
  overflow: hidden;
}

.modal.is-open .modal__panel {
  animation: modalPanelIn 0.8s cubic-bezier(0.95, 0, 0.15, 1) both;
}

.modal.is-closing .modal__panel {
  animation: modalPanelOut 0.8s cubic-bezier(0.95, 0, 0.15, 1) both;
}

@keyframes modalPanelIn {
  from { height: 0; }
  to { height: 100vh; }
}

@keyframes modalPanelOut {
  from { height: 100vh; }
  to { height: 0; }
}

.modal__content {
  height: 100vh;
  overflow-y: auto;
  opacity: 0;
}

.modal.is-open .modal__content {
  animation: modalContentIn 0.65s cubic-bezier(0.3, 1, 0.6, 1) 0.45s both;
}

.modal.is-closing .modal__content {
  animation: modalContentOut 0.25s ease both;
}

@keyframes modalContentIn {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes modalContentOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.modal__close {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__close span {
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.3s var(--ease);
}

.modal__close span:first-child { transform: rotate(45deg); }
.modal__close span:last-child { transform: rotate(-45deg); }

.modal__close:hover span:first-child { transform: rotate(45deg) scaleX(1.2); }
.modal__close:hover span:last-child { transform: rotate(-45deg) scaleX(1.2); }

.modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100vh;
  align-items: center;
  padding: 90px 24px 60px;
}

@media (min-width: 900px) {
  .modal__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    padding: 60px 80px;
  }
}

.modal__left {
  position: relative;
}

.modal__left > *:not(.modal__bg-graphic) {
  position: relative;
  z-index: 1;
}

.modal__heading {
  font-size: 34px;
  line-height: 1.12;
  margin-bottom: 34px;
  max-width: 460px;
}

@media (min-width: 768px) {
  .modal__heading { font-size: 44px; }
}

/* "Drop us a line" — crop-mark framed box */
.modal__dropline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 64px;
  margin: 0 12px 42px;
}

.modal__dropline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  right: -12px;
  border-top: 1px solid rgba(24, 27, 49, 0.25);
  border-bottom: 1px solid rgba(24, 27, 49, 0.25);
}

.modal__dropline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: -12px;
  border-left: 1px solid rgba(24, 27, 49, 0.25);
  border-right: 1px solid rgba(24, 27, 49, 0.25);
}

.modal__dropline span {
  font-size: 15px;
  color: var(--navy);
}

.modal__tagline {
  color: #b5b3ae;
  font-size: 13px;
  font-style: italic;
  margin: 0 0 34px;
}

.modal__contact-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 32px 40px;
  margin-bottom: 40px;
}

.modal__contact-block h4 {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
}

.modal__contact-block p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 4px;
}

.modal__contact-block a:hover {
  color: var(--gold);
}

.modal__socials {
  display: flex;
  gap: 14px;
}

.modal__socials a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(24, 27, 49, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.modal__socials a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* faint wireframe graphic behind the left column */
.modal__bg-graphic {
  position: absolute;
  left: -40px;
  bottom: -120px;
  width: 130%;
  max-width: 720px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.modal__bg-graphic img {
  display: block;
  width: 100%;
  height: auto;
}

/* form */

.project-form__field {
  margin-bottom: 34px;
}

.project-form__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.project-form__field input,
.project-form__field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(24,27,49,0.2);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: transparent;
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}

.project-form__field input::placeholder,
.project-form__field textarea::placeholder {
  color: #a6a4a0;
}

.project-form__field input:focus,
.project-form__field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.project-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 34px;
}

.project-form__checkbox input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
}

.project-form__checkbox label {
  font-size: 14px;
  color: var(--gray);
}

.project-form__submit {
  display: block;
  width: 100%;
  background: var(--overlay-dark);
  color: var(--white);
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 16px;
  padding: 20px 32px;
  border-radius: 0;
  transition: background 0.3s var(--ease);
}

.project-form__submit:hover {
  background: var(--gold);
}

.project-form__status {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gray);
  min-height: 1em;
}

/* =========================================================
   BODY LOCK WHEN OVERLAY/MODAL OPEN
   ========================================================= */

body.no-scroll {
  overflow: hidden;
}

/* =========================================================
   LET'S TALK OVERLAY
   ========================================================= */

.lets-talk {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.lets-talk.is-open {
  visibility: visible;
  pointer-events: auto;
}

.lets-talk__backdrop {
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.lets-talk.is-open .lets-talk__backdrop {
  opacity: 1;
}

.lets-talk__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background-image: radial-gradient(rgba(24, 27, 49, 0.16) 1px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0;
  transform: scale(0.94);
  transform-origin: bottom left;
}

@media (min-width: 1024px) {
  .lets-talk__panel {
    transform-origin: 60px calc(100% - 80px);
  }
}

.lets-talk__close {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lets-talk__close span {
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--navy);
}

.lets-talk__close span:first-child { transform: rotate(45deg); }
.lets-talk__close span:last-child { transform: rotate(-45deg); }

.lets-talk__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 100px 24px 80px;
}

@media (min-width: 1024px) {
  .lets-talk__inner {
    padding: 120px 80px 100px;
  }
}

.lets-talk__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .lets-talk__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
  }
}

.lets-talk__title {
  font-size: 56px;
  line-height: 1;
}

@media (min-width: 768px) {
  .lets-talk__title { font-size: 80px; }
}

.lets-talk__intro {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
}

.lets-talk__divider {
  margin: 40px 0;
  height: 1px;
  background: rgba(24, 27, 49, 0.15);
}

@media (min-width: 1024px) {
  .lets-talk__divider { margin: 56px 0; }
}

.lets-talk__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 1024px) {
  .lets-talk__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
  }
}

.lets-talk__email {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}

@media (min-width: 768px) {
  .lets-talk__email { font-size: 44px; }
}

.lets-talk__email:hover {
  color: var(--gold);
}

.lets-talk__email-arrow {
  color: var(--gold);
  font-size: 0.7em;
}

.lets-talk__cols {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 32px 60px;
  margin-top: 48px;
}

.lets-talk__col h4 {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 10px;
}

.lets-talk__col p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 2px;
  font-family: var(--font-body);
}

.lets-talk__col a:hover {
  color: var(--gold);
}

.lets-talk-form__field {
  margin-bottom: 26px;
}

.lets-talk-form__field label {
  display: block;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 8px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lets-talk-form__field input,
.lets-talk-form__field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(24, 27, 49, 0.2);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: transparent;
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}

.lets-talk-form__field input:focus,
.lets-talk-form__field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.lets-talk-form__submit {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 18px 32px;
  border-radius: 40px;
  transition: background 0.3s var(--ease);
}

.lets-talk-form__submit:hover {
  background: var(--gold);
}

.lets-talk-form__status {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gray);
  min-height: 1em;
}

/* =========================================================
   TOP NAVIGATION BAR (interior pages)
   ========================================================= */

body.has-topnav .main,
body.has-topnav .page {
  margin-left: 0;
}

.topnav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid rgba(24, 27, 49, 0.07);
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s var(--ease);
  will-change: transform;
}

/* stuck = scrolled past the header's own height */
.topnav.is-stuck {
  box-shadow: 0 8px 30px rgba(24, 27, 49, 0.07);
}

/* scrolling down → slide the bar up out of view */
.topnav.is-hidden {
  transform: translateY(-102%);
}

@media (prefers-reduced-motion: reduce) {
  .topnav { transition: none; }
  .topnav.is-hidden { transform: none; }
}

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 16px 24px;
}

@media (min-width: 1024px) {
  .topnav__inner { padding: 18px 50px; }
}

.topnav__logo-chip {
  display: block;
}

.topnav__logo-chip img {
  display: block;
  height: 42px;
  width: auto;
}

.topnav__nav {
  display: none;
}

@media (min-width: 1024px) {
  .topnav__nav {
    display: block;
    margin-left: auto;
  }
}

.topnav__nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
}

.topnav__nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}

.topnav__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--ease);
}

.topnav__nav a:hover::after,
.topnav__nav .is-current a::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.topnav__actions {
  display: none;
}

@media (min-width: 1024px) {
  .topnav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 40px;
  }
}

.topnav__icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(24, 27, 49, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 14px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.topnav__icon-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.topnav__dots {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 4px;
}

.topnav__dots i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* CTA — bg "unfills" downward from the top + the label swaps upward */
.topnav__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  padding: 15px 26px;
  border: 1px solid rgba(24, 27, 49, 0.18);
  border-radius: 3px;
  background: transparent;
  color: var(--navy);
  font-size: 15px;
  white-space: nowrap;
  transition: color 0.15s 0.015s var(--ease), border-color 0.3s var(--ease);
}

.topnav__cta::before,
.topnav__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scaleY(1);
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.15, 1);
}

/* underneath: the dark fill that gets revealed */
.topnav__cta::after {
  z-index: 0;
  background: var(--navy);
}

/* on top: the resting white face that collapses away on hover */
.topnav__cta::before {
  z-index: 1;
  background: var(--white);
}

.topnav__cta:hover::before {
  transform: scaleY(0);
}

.topnav__cta:hover {
  color: var(--white);
  border-color: var(--navy);
  transition: color 0.2s var(--ease), border-color 0.3s var(--ease);
}

.topnav__cta-txt {
  position: relative;
  z-index: 3;
  display: block;
  overflow: hidden;
  line-height: 1.25;
}

.topnav__cta-txt-inner {
  position: relative;
  display: inline-block;
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.15, 1);
}

/* the duplicate label that rises in from below */
.topnav__cta-txt-inner::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.15, 1);
}

.topnav__cta:hover .topnav__cta-txt-inner {
  transform: translateY(-100%);
}

.topnav__cta:hover .topnav__cta-txt-inner::after {
  transform: translateY(100%);
}

.topnav__cta-icon {
  position: relative;
  z-index: 3;
  display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
  .topnav__cta::before,
  .topnav__cta::after,
  .topnav__cta-txt-inner,
  .topnav__cta-txt-inner::after { transition: none; }
}

.topnav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}

@media (min-width: 1024px) {
  .topnav__burger { display: none; }
}

.topnav__burger span {
  display: block;
  height: 2px;
  background: var(--navy);
}

.topnav__burger span:nth-child(2) { width: 70%; }

/* mobile dropdown */
.topnav.is-open .topnav__nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid rgba(24, 27, 49, 0.08);
  padding: 12px 24px 22px;
}

.topnav.is-open .topnav__nav ul {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.topnav.is-open .topnav__nav a {
  padding: 10px 0;
  font-size: 17px;
}

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */

.page-head {
  background-color: #f7f7f7;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.085) 0,
    rgba(0, 0, 0, 0.085) 1px,
    transparent 1px,
    transparent 6px
  );
}

.page-head__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (min-width: 900px) {
  .page-head__grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

.page-head__title {
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  color: var(--navy);
}

@media (min-width: 768px) {
  .page-head__title { font-size: 76px; }
}

.page-head__intro {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 900px) {
  .page-head__intro {
    text-align: right;
    justify-self: end;
    max-width: 520px;
  }
}

/* =========================================================
   EXPERTISE + PROGRESS BARS
   ========================================================= */

.expertise {
  background: var(--white);
}

.expertise__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-top: 90px;
  padding-bottom: 60px;
}

@media (min-width: 1024px) {
  .expertise__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 90px;
    padding-top: 120px;
    padding-bottom: 80px;
  }
}

.pill {
  display: inline-block;
  margin-bottom: 22px;
  padding: 8px 18px;
  background: #f2f1ee;
  color: var(--navy);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.expertise__left p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
  margin: 24px 0 0;
  max-width: 460px;
}

.expertise__bars {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 6px;
}

.bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.bar__label {
  font-weight: 500;
  font-size: 17px;
  color: var(--navy);
}

.bar__pct {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.bar__track {
  position: relative;
  height: 2px;
  background: rgba(24, 27, 49, 0.12);
}

.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--navy);
  transition: width 1.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* =========================================================
   COLLAGE + FAQ GRID
   ========================================================= */

.faq-band {
  background: var(--white);
}

.faq-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 56px;
  padding-bottom: 100px;
}

@media (min-width: 1024px) {
  .faq-band__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 90px;
    padding-bottom: 130px;
  }
}

/* 4-image cluster inside a 459x780 block, layered like the reference:
   the tall centre photo sits over its neighbours and tucks them
   partly underneath. The overlaps are sized so that at every scroll
   position each photo keeps at least ~63% of itself visible — the
   reference tucks its neighbours by 15% and 35%, and we stay inside
   that range (see the per-pair notes on the boxes below). */
.collage {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 459 / 700;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .collage { margin: 0; }
}

/* each box drifts vertically at its own speed as the page
   scrolls, so the cluster re-composes itself (--p is set in js) */
.collage__item {
  position: absolute;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(24, 27, 49, 0.12);
  transform: translate3d(0, calc(var(--p, 0) * 1px), 0);
  will-change: transform;
}

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

/* --3 is the tall centre photo and sits on top of everything, exactly as
   the centre photo does on the reference. Because the drift is vertical
   only, each pair's horizontal overlap is fixed, which is what caps how
   much of a photo can ever be hidden:

     pair    x-overlap   worst area covered   speeds
     3 over 1   31%            24%            -95 vs -130
     3 over 2   37%            37%            -95 vs  120
     3 over 4   37%            37%            -95 vs   70
     4 over 2  100%             7%            120 vs   70  (they travel
                                                            together, so they
                                                            barely close)
   1+2 and 1+4 never overlap horizontally at all.

   --4 is tucked up under --3 rather than trailing below the cluster: it
   has to finish well before the FAQ list on the right does, otherwise it
   is still hanging in view when you reach the Our Story section. */
.collage__item--1 { left: 0;     top: 18.6%; width: 37.0%; height: 25.0%; z-index: 1; }  /* speed -130 */
.collage__item--2 { left: 56.2%; top: 17.9%; width: 43.8%; height: 31.4%; z-index: 1; }  /* speed  120 */
.collage__item--3 { left: 25.7%; top: 29.3%; width: 46.8%; height: 35.7%; z-index: 3; }  /* speed  -95 */
.collage__item--4 { left: 56.4%; top: 54.3%; width: 43.6%; height: 26.4%; z-index: 2; }  /* speed   70 */

/* rule above and below the label, as on the reference */
.faq-band__label {
  padding: 12px 0;
  margin: 0 0 32px;
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.7px;
  color: var(--navy);
  text-align: center;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 44px;
}

@media (min-width: 700px) {
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
}

.faq-item h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 12px;
}

.faq-item__plus {
  flex: none;
  color: var(--navy);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

.faq-item p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding-left: 24px;
}

/* =========================================================
   OUR STORY
   ========================================================= */

.story-band {
  background: #f7f7f5;
}

.story-band > .shell {
  padding-top: 90px;
  padding-bottom: 90px;
}

@media (min-width: 1024px) {
  .story-band > .shell {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.story-band__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.story-band__head p {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.7;
  margin: 18px 0 0;
}

.story-band__body {
  max-width: 820px;
  margin: 34px auto 0;
  text-align: center;
}

.story-band__body p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

.story-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 60px;
}

@media (min-width: 640px) {
  .story-cards { grid-template-columns: repeat(2, 1fr); }
}

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

.story-card {
  margin: 0;
  background: var(--white);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(24, 27, 49, 0.1);
}

.story-card img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.story-card figcaption {
  padding: 22px 24px 26px;
}

.story-card h4 {
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 6px;
}

.story-card figcaption p {
  color: var(--gray);
  font-size: 14px;
  margin: 0;
}

/* =========================================================
   DESIGN PROCESS STEPS
   ========================================================= */

/* faint architectural sketch sitting behind the numbered steps —
   drawn on a pseudo-element so it can be faded independently */
.steps-band {
  position: relative;
  background-color: var(--white);
}

.steps-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('images/sketch.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  opacity: 0.16;
}

.steps-band > .shell {
  padding-top: 90px;
  padding-bottom: 100px;
}

@media (min-width: 1024px) {
  .steps-band > .shell {
    padding-top: 120px;
    padding-bottom: 130px;
  }
}

.steps-band__head {
  margin-bottom: 60px;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 40px;
}

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

.step__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
}

.step__title {
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 14px;
}

.step p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  max-width: 340px;
}

.steps-band__note {
  margin: 60px 0 0;
  color: var(--gray);
  font-size: 15px;
  font-style: italic;
}

/* =========================================================
   PAGE SECTIONS — shared shell, grid lines, titles, reveals
   ========================================================= */

.page-sections {
  position: relative;
}

/* faint vertical grid lines running through the whole content area */
.page-sections::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(24, 27, 49, 0.07) 1px, transparent 1px);
  background-size: 25% 100%;
}

.page-sections section {
  position: relative;
}

.page-sections section > * {
  position: relative;
  z-index: 2;
}

.shell {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .shell {
    padding-left: 80px;
    padding-right: 80px;
  }
}

.sec-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .sec-title { font-size: 44px; }
}

/* hatched (diagonal stripe) band background, as on the theme */
.hatched {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.085) 0,
    rgba(0, 0, 0, 0.085) 1px,
    transparent 1px,
    transparent 6px
  );
}

/* scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal[data-delay="1"] { transition-delay: 0.15s; }
.reveal[data-delay="2"] { transition-delay: 0.3s; }
.reveal[data-delay="3"] { transition-delay: 0.45s; }

.reveal.in {
  opacity: 1;
  transform: none;
}

/* outlined button, as on the theme's SEE DETAILS */
.btn-outline {
  display: inline-block;
  padding: 16px 34px;
  border: 1px solid rgba(24, 27, 49, 0.25);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn-outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* =========================================================
   SERVICES INTRO — 3 icon columns
   ========================================================= */

.svc-row {
  background: var(--white);
}

/* section header — heading left, hatched dash + intro right */
.svc-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: end;
  padding-top: 90px;
}

@media (min-width: 900px) {
  .svc-head {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-top: 120px;
  }
}

.sec-title--stack {
  line-height: 1.05;
}

.svc-head__dash {
  display: block;
  width: 150px;
  height: 12px;
  margin-bottom: 18px;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(24, 27, 49, 0.14) 0,
    rgba(24, 27, 49, 0.14) 1px,
    transparent 1px,
    transparent 7px
  );
}

.svc-head__side p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.7;
  max-width: 460px;
  margin: 0;
}

.svc-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 90px;
}

@media (min-width: 768px) {
  .svc-row__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 80px;
    padding-bottom: 120px;
  }
}

.svc__icon {
  display: inline-block;
  color: var(--gold);
  margin-bottom: 26px;
}

.svc__title {
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
  margin-bottom: 14px;
}

.svc__text {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  max-width: 300px;
}

/* =========================================================
   ABOUT BAND — Why Final Fix
   ========================================================= */

.about-band {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.085) 0,
    rgba(0, 0, 0, 0.085) 1px,
    transparent 1px,
    transparent 6px
  );
}

.about-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 90px;
  padding-bottom: 90px;
}

@media (min-width: 1024px) {
  .about-band__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
  }
}

.about-band__lead {
  color: var(--navy);
  font-weight: 600;
  font-size: 16px;
  margin: 26px 0 18px;
}

.about-band__content p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 18px;
  max-width: 520px;
}

.about-band__content p.about-band__lead {
  color: var(--navy);
}

.about-band__content .btn-outline {
  margin-top: 14px;
}

.about-band__media {
  margin: 0;
}

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

/* =========================================================
   NUMBERED BENEFITS — ghost numbers
   ========================================================= */

.process {
  background: var(--white);
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px 40px;
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (min-width: 768px) {
  .process__grid {
    grid-template-columns: repeat(3, 1fr);
    padding-top: 130px;
    padding-bottom: 130px;
  }
}

.process-item {
  position: relative;
  padding-top: 46px;
}

.process-item__num {
  position: absolute;
  top: 0;
  left: -6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: rgba(24, 27, 49, 0.08);
  user-select: none;
}

.process-item__title {
  position: relative;
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 40px;
}

.process-item__text {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  max-width: 320px;
}

/* =========================================================
   PROJECTS CAROUSEL
   ========================================================= */

.projects {
  background: var(--white);
  padding-bottom: 40px;
}

.projects .sec-title {
  margin-bottom: 40px;
}

.projects__carousel-wrap {
  position: relative;
  /* the flickity viewport below is deliberately left `overflow: visible` so the
     next card peeks in — but that lets the off-screen cards run past the right
     edge of the page (~255px at 390px wide, and at every other width too).
     Clip it here instead: the peek still shows up to the page edge, and nothing
     escapes. `clip` rather than `hidden` so this does not become a scroll
     container — `overflow-x: hidden` would coerce overflow-y to auto. */
  overflow-x: clip;
}

.projects-carousel {
  width: 100%;
}

.projects-carousel .flickity-viewport {
  overflow: visible;
}

.proj-card {
  position: relative;
  width: 82%;
  margin: 0 30px 0 0;
}

@media (min-width: 768px) {
  .proj-card { width: 44%; }
}

.proj-card img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .proj-card img { height: 300px; }
}

.proj-card figcaption {
  position: absolute;
  right: 14px;
  bottom: 16px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--white);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.projects__arrows {
  position: absolute;
  left: 40px;
  bottom: 0;
  z-index: 5;
  display: flex;
}

@media (min-width: 1024px) {
  .projects__arrows { left: 96px; }
}

.projects__arrow {
  width: 58px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--navy);
  font-size: 17px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.projects__arrow + .projects__arrow {
  border-left: 1px solid rgba(24, 27, 49, 0.1);
}

.projects__arrow:hover {
  background: var(--navy);
  color: var(--white);
}

/* the shell that starts the carousel — offset so the first card lines up */
.projects__carousel-wrap {
  padding-left: 24px;
}

@media (min-width: 1024px) {
  .projects__carousel-wrap {
    padding-left: calc((100% - 1360px) / 2 + 80px);
  }
}

@media (min-width: 1024px) and (max-width: 1519px) {
  .projects__carousel-wrap {
    padding-left: 80px;
  }
}

.projects__note {
  display: inline-block;
  margin: 56px 0 60px;
  padding: 12px 24px;
  border: 1px solid rgba(24, 27, 49, 0.12);
  border-radius: 40px;
  color: var(--gray);
  font-size: 14px;
}

.projects__note a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}

.projects__note a:hover {
  color: var(--gold);
}

/* =========================================================
   STATS BAND
   ========================================================= */

.stats-band {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.085) 0,
    rgba(0, 0, 0, 0.085) 1px,
    transparent 1px,
    transparent 6px
  );
}

.stats-band > .shell {
  padding-top: 90px;
  padding-bottom: 90px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

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

.stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* on very narrow phones (320px) the 54px number + label side by side is
   ~10px wider than the grid column, which pushed the page sideways */
@media (max-width: 380px) {
  .stats-grid { gap: 32px 20px; }
  .stat { gap: 10px; }
  .stat__num { font-size: 44px; }
  .stat__label { min-width: 0; font-size: 13px; letter-spacing: 0.04em; }
}

.stat__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  color: var(--gold);
}

@media (min-width: 768px) {
  .stat__num { font-size: 64px; }
}

.stat__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: #9a9a9a;
}

.stats-band__statement {
  max-width: 700px;
  margin: 70px 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.5;
  color: var(--navy);
}

.stats-band__statement .accent {
  color: var(--gold);
}

.stats-band__lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 40px;
  margin-top: 60px;
}

@media (min-width: 768px) {
  .stats-band__lists {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stats-band__lists li {
  position: relative;
  padding: 10px 0 10px 26px;
  color: var(--navy);
  font-size: 15px;
}

.stats-band__lists li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--navy);
  font-weight: 700;
}

/* =========================================================
   GET IN TOUCH
   ========================================================= */

.contact-band {
  background: var(--white);
}

.contact-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (min-width: 1024px) {
  .contact-band__grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

.contact-band__intro {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
  margin: 28px 0 22px;
  max-width: 440px;
}

.contact-band__addr {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 44px;
}

.contact-band__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 32px;
}

.contact-band__col h6 {
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin: 0 0 14px;
}

.contact-band__col p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}

.contact-band__col a {
  color: var(--navy);
  transition: color 0.3s var(--ease);
}

.contact-band__col a:hover {
  color: var(--gold);
}

.contact-band__map {
  background: #e8e7e3;
  min-height: 320px;
}

.contact-band__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  filter: grayscale(1);
}

/* =========================================================
   SITE FOOTER (dark)
   ========================================================= */

.site-footer {
  background: #33322f;
  color: #cfcdc8;
}

.site-footer .shell {
  padding-top: 90px;
  padding-bottom: 36px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr 0.7fr;
    gap: 60px;
  }
}

.site-footer__logo-chip {
  display: inline-block;
  background: var(--white);
  border-radius: 4px;
  padding: 8px 14px;
  margin-bottom: 24px;
}

.site-footer__logo-chip img {
  display: block;
  height: 34px;
  width: auto;
}

.site-footer__blurb {
  font-size: 15px;
  line-height: 1.75;
  color: #b9b7b1;
  max-width: 340px;
  margin: 0 0 34px;
}

.site-footer h6 {
  color: var(--white);
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0 0 26px;
}

.site-footer__muted {
  color: #97958f;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}

.site-footer__strong {
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 22px;
}

.site-footer__strong a:hover {
  color: var(--gold);
}

.site-footer__menu li {
  margin-bottom: 12px;
}

.site-footer__menu a {
  color: #b9b7b1;
  font-size: 15px;
  transition: color 0.3s var(--ease);
}

.site-footer__menu a:hover {
  color: var(--white);
}

/* newsletter */

.subscribe__label {
  display: block;
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}

.subscribe__row {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 320px;
}

.subscribe__row input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 0;
  transition: border-color 0.3s var(--ease);
}

.subscribe__row input::placeholder {
  color: #85837d;
}

.subscribe__row input:focus {
  outline: none;
  border-color: var(--gold);
}

.subscribe__btn {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.subscribe__btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.subscribe__status {
  margin: 10px 0 0;
  font-size: 13px;
  color: #b9b7b1;
  min-height: 1em;
}

/* bottom bar */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__socials {
  display: flex;
  gap: 12px;
}

.site-footer__socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfcdc8;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-footer__socials a:hover {
  background: var(--white);
  border-color: var(--white);
  color: #33322f;
}

.site-footer__copy {
  color: #97958f;
  font-size: 14px;
  margin: 0;
}

/* ===================== OUR VALUED CLIENTS (marquee) ===================== */
.clients-band > .shell {
  padding-top: 90px;
  padding-bottom: 36px;
}

.clients-band__lead {
  max-width: 660px;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray);
}

/* full-bleed scrolling strip with soft edge fades */
.clients-marquee {
  position: relative;
  overflow: hidden;
  padding: 8px 0 90px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.clients-track {
  display: flex;
  width: max-content;
  animation: clients-scroll 70s linear infinite;
  will-change: transform;
}

/* pause the continuous scroll while the visitor hovers the strip */
.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

.clients-logo {
  flex: 0 0 auto;
  width: 200px;
  height: 116px;
  margin-right: 24px;          /* trailing margin on every item keeps -50% loop seamless */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid rgba(24, 27, 49, 0.09);
  border-radius: 4px;
}

.clients-logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}

.clients-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* one full set = seamless wrap */
}

/* respect users who prefer no motion: static, wrapped grid */
@media (prefers-reduced-motion: reduce) {
  .clients-marquee { -webkit-mask-image: none; mask-image: none; }
  .clients-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 18px; }
  .clients-logo { margin-right: 0; }
}