/* Fonts are preconnected and loaded from index.html — no @import here,
   an @import would block rendering and duplicate the same request. */

:root {
  --ink: #141414;
  --ink-soft: rgba(20, 20, 20, 0.78);
  --paper: #ffffff;
  --paper-soft: #f6f5f2;
  --line: rgba(20, 20, 20, 0.13);
  --line-soft: rgba(20, 20, 20, 0.08);
  --muted: #66655f;
  --muted-soft: #8c8b84;

  /* Logo palette, palest to deepest, plus the brand blue provided
     separately -- it anchors the deep end of the graded gradients below. */
  --teal-50: #d0eef0;
  --teal-100: #b4e8eb;
  --teal-200: #99e6e9;
  --teal-300: #79e1ea;
  --teal-400: #1fd8e0;
  --teal-500: #78cacc;
  --teal-600: #9dbcbe;
  --teal-700: #618286;
  --teal-800: #2c4347;
  --brand-blue: #2596be;

  /* --accent is the brand blue -- the site's one lead color for text-sized
     accents (markers, links, focus rings) as well as the gradient below. */
  --accent: var(--brand-blue);
  --gradient-dark: linear-gradient(
    135deg,
    var(--teal-800) 0%,
    var(--teal-700) 55%,
    var(--brand-blue) 100%
  );
  --gradient-bright: linear-gradient(135deg, var(--teal-400), var(--brand-blue));

  --footer-bg: #ffffff;
  --footer-text: rgba(20, 20, 20, 0.86);
  --footer-muted: rgba(20, 20, 20, 0.56);
  --footer-line: rgba(20, 20, 20, 0.14);

  --container: min(1240px, calc(100% - 3rem));
  --header-h: 5.5rem;
  --font-heading: "Jost", sans-serif;
  --font-body: "Work Sans", sans-serif;

  --step-h1: clamp(2.75rem, 1.85rem + 4vw, 3.5rem);
  --step-h2: clamp(1.85rem, 1.4rem + 2vw, 2.75rem);
  --step-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --step-body: clamp(0.98rem, 0.94rem + 0.15vw, 1.05rem);
  --step-eyebrow: 0.78rem;

  --scroll-progress: 0;
}

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

/* Smooth scrolling is driven by script.js (rAF easing) so it works even when
   the browser or OS suppresses native smooth scroll. Keep this "auto" so the
   two do not fight each other. */
html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--paper);
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

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

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

button {
  border: 0;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  outline: 0;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-h1);
  line-height: 1.02;
}

h2 {
  font-size: var(--step-h2);
  line-height: 1.1;
}

h3 {
  font-size: var(--step-h3);
  font-weight: 600;
}

h4 {
  font-size: 1.1rem;
}

p {
  margin: 0;
  font-size: var(--step-body);
}

ul {
  margin: 0;
  padding-left: 1.1rem;
}

main {
  position: relative;
}

section[id] {
  scroll-margin-top: var(--header-h);
}

.container {
  width: var(--container);
  margin: 0 auto;
}

.section {
  padding: 6rem 0;
}

.section:nth-of-type(even) {
  background: var(--paper-soft);
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  color: var(--muted);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-heading {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 20px;
}

.section-heading--center .eyebrow,
.section-heading--center .section-title,
.section-heading--center .section-copy {
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  color: var(--ink);
}

.section-copy {
  max-width: 42rem;
  color: var(--muted);
  line-height: 1.85;
}

.rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.4rem;
  background: var(--accent);
}

.section-heading--center .rule {
  margin-left: auto;
  margin-right: auto;
}

/* Flat image frames: no radius, no shadow, no blur — full-bleed rectangles. */
[data-image-reveal] {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--paper-soft);
}

[data-image-reveal] > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.2, 1);
}

[data-image-reveal]:hover > img {
  transform: scale(1.03);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.9rem 1.9rem;
  border: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}

/* Every button variant now shares one look -- brand-blue fill, black
   label -- regardless of what surface it sits on; only the hover shade
   differs slightly to give press feedback. */
.button--dark,
.button--outline,
.button--light {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.button--dark:hover,
.button--outline:hover,
.button--light:hover {
  background: #1c7793;
  border-color: #1c7793;
  color: var(--ink);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.65, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.65, 0.2, 1);
}

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

/* ---------- Header / Nav ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;  
  padding: 1.4rem 0;
  background: #fff;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    padding 0.3s ease;
}

.site-header.is-solid {
  padding: 1rem 0;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-mark {
  display: inline-flex;
}

.brand-mark__logo {
  display: block;
  height: 3rem;
  width: auto;
}

.nav-toggle {
  display: none;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  position: absolute;
  width: 1.3rem;
  height: 1.5px;
  background: #fff;
  transition:
    transform 0.24s ease,
    opacity 0.24s ease,
    background-color 0.3s ease;
}

.site-header.is-solid .nav-toggle span {
  background: var(--ink);
}

.nav-toggle span:first-child {
  transform: translateY(-4px);
}

.nav-toggle span:last-child {
  transform: translateY(4px);
}

.site-header.is-nav-open .nav-toggle span:first-child {
  transform: rotate(45deg);
}

.site-header.is-nav-open .nav-toggle span:last-child {
  transform: rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  color: #000;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s ease, opacity 0.2s ease;
}

.site-nav a:hover {
  opacity: 0.7;
}

.site-nav a.is-current {
  opacity: 1;
  box-shadow: inset 0 -1px 0 currentColor;
}

.site-header.is-solid .site-nav a {
  color: var(--ink);
}

/* ---------- Hero: full-bleed photo slider ----------
   A simple, classic pattern: one full-bleed photo per slide, a bold
   headline and short copy sitting low over a dark scrim, and a row of
   thin progress bars for pagination — crossfading between slides with a
   staggered entrance for the text each time. */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #0e0e0e;
  color: #fff;
}

.hero__slider {
  position: relative;
  min-height: inherit;
}

.hero__slides {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: clamp(5.5rem, 13vh, 8.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.hero__slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__slide-scrim {
  position: absolute;
  inset: 0;
  /* Graded top-to-bottom: brand blue (37,150,190) where the wash is faint
     and legibility isn't at stake, settling into the much darker --teal-800
     (44,67,71) by the text zone, where it has to stay dark enough for
     white text regardless of the photo underneath. */
  background: linear-gradient(
    180deg,
    rgba(37, 150, 190, 0.3) 0%,
    rgba(44, 67, 71, 0.24) 42%,
    rgba(44, 67, 71, 0.86) 100%
  );
}

.hero__slide-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.5rem;
}

.hero__slide-content [data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.65, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.hero__slide.is-active .hero__slide-content [data-anim] {
  opacity: 1;
  transform: translateY(0);
}

.hero__slide.is-active .hero__slide-content [data-anim]:nth-child(1) { transition-delay: 0.05s; }
.hero__slide.is-active .hero__slide-content [data-anim]:nth-child(2) { transition-delay: 0.18s; }
.hero__slide.is-active .hero__slide-content [data-anim]:nth-child(3) { transition-delay: 0.3s; }

.hero__slide-title {
  color: #fff;
  font-size: var(--step-h1);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3);
}

.hero__slide-text {
  max-width: 30rem;
  margin-top: 0.9rem;
  color: rgba(238, 238, 235, 0.9);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.6;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.25);
}

.hero__slide-content .button {
  justify-self: start;
  margin-top: 1.3rem;
}

.hero__bars-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 4;
}

.hero__bars {
  display: flex;
  gap: 0.5rem;
}

.hero__bars button {
  width: 2.6rem;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.32);
  transition: background-color 0.3s ease;
}

.hero__bars button:hover {
  background: rgba(255, 255, 255, 0.6);
}

.hero__bars button.is-active {
  background: #fff;
}

.hero__scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  animation: bob 2.4s ease-in-out infinite;
}

@media (max-width: 640px) {
  .hero__slide {
    padding-bottom: 6.5rem;
  }

  .hero__slide-content .button {
    width: 100%;
  }

  .hero__bars button {
    width: 1.8rem;
  }
}

/* ---------- About ---------- */

.about__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: center;
}

.about__media {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1rem;
  align-items: start;
}

.about__media-main {
  min-height: 32rem;
}

.about__media-side {
  min-height: 20rem;
  margin-top: 3rem;
}

.about__content {
  display: grid;
  gap: 1.1rem;
}

/* ---------- Services ---------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--paper);
}

.services .section:nth-of-type(even) .service-card,
.services.section:nth-of-type(even) .service-card {
  background: var(--paper-soft);
}

.service-card__media {
  min-height: 100%;
  aspect-ratio: 4 / 5;
}

.service-card__content {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.service-card ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.service-card li::marker {
  color: var(--accent);
}

/* ---------- Why choose us ---------- */

.why-us__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: center;
}

.why-us__content {
  display: grid;
  gap: 1.1rem;
}

.why-us__list {
  display: grid;
  gap: 0;
  margin-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}

.feature-card__index {
  color: var(--muted-soft);
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.why-us__visual {
  display: grid;
  gap: 1rem;
}

.why-us__image {
  min-height: 26rem;
}

.why-us__note {
  padding: 1.5rem;
  border: 1px solid var(--line);
}

/* ---------- Process ---------- */

.process__timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 2.75rem;
}

.timeline-card {
  display: grid;
  gap: 0.8rem;
  padding: 0 1.5rem 0 0;
  border-left: 1px solid var(--line);
  padding-left: 1.5rem;
}

.timeline-card:first-child,
.timeline-card:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 0;
}

.timeline-card__step {
  color: var(--muted-soft);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
}

/* ---------- Contact ---------- */

.contact__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
}

.contact__content {
  display: grid;
  gap: 1.1rem;
}

.contact__details {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.contact__details a,
.contact__details span {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

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

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

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.form-field {
  display: grid;
  gap: 0.5rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field span {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-bottom-color: var(--ink);
  outline: none;
}

.form-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.contact-form__status {
  min-height: 1.3rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-form__status.is-success {
  color: #2e6a3a;
}

.contact-form__status.is-error {
  color: #8b3026;
}

/* ---------- New-studio content patterns ---------- */

/* Text section paired with a single supporting image (intro, founder). */
.content-media {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.content-media--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}

.content-media--reverse .content-media__media {
  order: 2;
}

.content-media__media {
  min-height: 22rem;
  align-self: stretch;
}

.content-media__content .section-heading,
.content-media__content .longform {
  max-width: none;
}

.longform {
  display: grid;
  gap: 1.15rem;
  max-width: 44rem;
}

.section-heading--center + .longform {
  margin-left: auto;
  margin-right: auto;
}

.longform p {
  color: var(--muted);
  line-height: 1.85;
}

.longform .lead {
  color: var(--ink);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.7;
}

.tag-line {
  display: grid;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.4;
}

.longform .button {
  margin-top: 0.7rem;
  justify-self: start;
}

/* Founder-era why-us: the note column sits at the top, not floating mid-void */
.why-us .why-us__visual {
  align-self: start;
}

.portfolio__note {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 2.5rem;
}

.portfolio__note p {
  max-width: 40rem;
  color: var(--muted);
}

.portfolio__note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0 auto;
}

/* ---------- Portfolio gallery ----------
   A plain, edge-to-edge grid (per reference: nicepage.com "we-create-
   exclusive-interior-design") -- images butt up against each other with
   no gap and no captions, filtered by tabs sitting in the section head. */

.gallery {
  position: relative;
  background: var(--paper-soft);
}

/* Main category tabs -- a floating pill "track" with a sliding dark
   indicator that glides beneath whichever tab is active (positioned by
   script.js via transform, measured from each button's own layout box). */
.gallery__filters {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 0.15rem;
  margin: 0.8rem auto 0;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.filter-track-indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  background: var(--ink);
  transition:
    transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.filter-track-indicator.is-ready {
  opacity: 1;
}

.filter-btn {
  position: relative;
  z-index: 1;
  padding: 0.55rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    color 0.25s ease,
    transform 0.2s ease;
}

.filter-btn:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.filter-btn.is-active {
  color: #fff;
  transform: none;
}

/* Second-level filter row -- one sub-project/stall per button, shown only
   for whichever main category is currently selected. Individually
   outlined pills (rather than a shared sliding track) since a list this
   long -- up to 60 buttons for Exhibition -- reads better as a flowing
   grid than as one segmented control. */
.gallery__subfilters {
  margin-top: 1.1rem;
}

.gallery__subfilter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 18px;
  animation: subfilters-in 0.4s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}

.gallery__subfilter-group[hidden] {
  display: none;
}

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

.filter-btn--sub {
  padding: 0.4rem 0.85rem;
  font-size: 0.66rem;
  border-color: var(--line);
  background: var(--paper);
}

.filter-btn--sub:hover {
  border-color: var(--ink);
  transform: translateY(-2px) scale(1.03);
}

.filter-btn--sub.is-active {
  background: var(--ink);
  border-color: var(--ink);
  transform: none;
}

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

.gallery__grid[data-reveal] {
  transform: none;
}

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  background: var(--line-soft);
  opacity: 0;
}

.gallery__grid.is-visible .gallery-item,
.gallery-item.is-repop {
  animation: gallery-pop 0.5s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}

.gallery__grid.is-visible .gallery-item:nth-child(2) { animation-delay: 0.04s; }
.gallery__grid.is-visible .gallery-item:nth-child(3) { animation-delay: 0.08s; }
.gallery__grid.is-visible .gallery-item:nth-child(4) { animation-delay: 0.12s; }
.gallery__grid.is-visible .gallery-item:nth-child(5) { animation-delay: 0.16s; }
.gallery__grid.is-visible .gallery-item:nth-child(6) { animation-delay: 0.2s; }
.gallery__grid.is-visible .gallery-item:nth-child(7) { animation-delay: 0.24s; }
.gallery__grid.is-visible .gallery-item:nth-child(8) { animation-delay: 0.28s; }
.gallery__grid.is-visible .gallery-item:nth-child(9) { animation-delay: 0.32s; }
.gallery__grid.is-visible .gallery-item:nth-child(10) { animation-delay: 0.36s; }
.gallery__grid.is-visible .gallery-item:nth-child(11) { animation-delay: 0.4s; }
.gallery__grid.is-visible .gallery-item:nth-child(12) { animation-delay: 0.44s; }

@keyframes gallery-pop {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-item.is-hidden {
  display: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
}

.gallery-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  z-index: 1;
}

.gallery__empty {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--muted);
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  /* Solid, not translucent: a semi-transparent scrim here left a stale,
     see-through composited layer on some phones once the GSAP opacity fade
     finished, letting the page underneath show through the "backdrop". */
  background: #0a0a0a;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__figure {
  margin: 0;
  display: grid;
  gap: 0.85rem;
  max-width: min(1100px, 100%);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

.lightbox.is-open .lightbox__figure {
  transform: scale(1);
}

.lightbox__img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #0a0a0a;
}

.lightbox__caption {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  width: 2.8rem;
  height: 2.8rem;
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.lightbox__nav {
  flex: none;
  width: 3rem;
  height: 3rem;
  color: #fff;
  font-size: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lightbox__nav {
    position: absolute;
    bottom: 1.2rem;
  }

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

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

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 5.5rem 0 2rem;
  border-top: 1px solid var(--line);
}

.back-to-top {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  transform: translate(-50%, -50%);
  border: 1px solid var(--footer-line);
  border-radius: 50%;
  background: var(--footer-bg);
  color: var(--ink);
  font-size: 1.2rem;
  transition: border-color 0.2s ease;
}

.back-to-top:hover {
  border-color: var(--ink);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--footer-line);
}

.site-footer__name {
  margin: 0 0 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--footer-line);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.site-footer address {
  display: grid;
  gap: 0.5rem;
  font-style: normal;
  color: var(--footer-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.site-footer address a:hover {
  color: var(--ink);
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.site-footer__links div {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.site-footer__links h3 {
  margin-bottom: 0.3rem;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__links a {
  width: fit-content;
  max-width: 100%;
  color: var(--footer-muted);
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.site-footer__links a:hover {
  color: var(--ink);
}

.site-footer__legal {
  margin: 2rem auto 0;
  width: var(--container);
  color: var(--footer-muted);
  font-size: 0.82rem;
}

@keyframes bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

@media (max-width: 1120px) {
  .services__grid,
  .process__timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-card {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
  }

  .timeline-card:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 920px) {
  :root {
    --header-h: 4.5rem;
  }

  .nav-toggle {
    display: inline-flex;
    background: #000;
    padding: 1px;
    border-radius: 13px;
  }

  /* The toggle button's own background is always black on mobile, so its
     bars must always be white -- regardless of the header's is-solid
     state, which otherwise flips them to near-black and makes them
     disappear against the button. */
  .nav-toggle span,
  .site-header.is-solid .nav-toggle span {
    background: #fff;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    background-color: var(--ink);
    background-image: var(--gradient-dark);
  }

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

  .site-nav a {
    padding: 0.75rem 0;
    font-size: 1.4rem;
    color: #fff;
  }

  .about__layout,
  .why-us__layout,
  .content-media,
  .content-media--reverse,
  .contact__layout,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .content-media--reverse .content-media__media {
    order: 0;
  }

  .content-media__media {
    min-height: 18rem;
  }

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

  .about__media-side {
    margin-top: 0;
  }

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

@media (max-width: 720px) {
  :root {
    --container: calc(100% - 2rem);
  }

  .section {
    padding: 4.5rem 0;
  }

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

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

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

  .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .gallery-item {
    opacity: 1;
    transform: none;
  }
}