/*
 * Additions on top of the template's stylesheets:
 *   1. image logo (replaces the theme's text logo)
 *   2. hero carousel in the intro section
 * Loaded last so these rules win. Nothing here restyles existing components.
 */

/* ---------- logo ---------- */

.logo__img {
  display: block;
  height: 52px;
  width: auto;
  object-fit: contain;
}

.preloader__wrapper-logo .logo__img {
  height: 60px;
}

.footer .logo__img {
  height: 56px;
}

@media (max-width: 575px) {
  .logo__img {
    height: 38px;
  }
}

/* ---------- header nav ---------- */

.header .menu {
  font-size: 15px;
}

/*
 * White across both pages. main.css only turns the menu white when the header
 * carries `header_color-white` or a dark background class; the projects page
 * has neither at the top of the page, so it defaulted to #888.
 * See ProjectsGridPage — its masthead is dark so this stays readable.
 */
.header .menu>li>a,
.header .social__item a {
  color: #fff;
}

.header .menu>li>a {
  font-weight: 500;
  letter-spacing: 0.4px;
}

.header .menu>li>a:hover,
.header .social__item a:hover {
  color: var(--color-accent-primary-1);
}

.header .social__item a {
  font-size: 16px;
}

/* The sticky bar on a light background still needs dark text. */
.header_sticky.bg-white .menu>li>a,
.header_sticky.bg-white .social__item a {
  color: #181818;
}

/*
 * Active page link: gold label + the hover underline held open, so the current
 * section is always marked. NavLink adds `current-menu-item` to the <a>.
 * Listed after the sticky-white rule so gold wins on light backgrounds too.
 */
.header .menu>li>a.current-menu-item,
.header_sticky.bg-white .menu>li>a.current-menu-item {
  color: var(--color-accent-primary-1);
}

.header .menu>li:not(.menu-item-has-children) a.current-menu-item:before {
  left: 15px;
  width: calc(100% - 30px);
}

/*
 * Mobile overlay menu backdrop. The burger + fullscreen overlay only exist
 * below lg, so the ornament tile is swapped for the portrait HSD artwork
 * there. `cover` on a 9:16 source keeps the letter column on the right edge;
 * the black fallback fills anything the crop leaves bare.
 */
@media (max-width: 991px) {
  .header__curtain.bg-ornament {
    background-color: #060606;
    background-image: url(../img/general/mobile-header-bg.jpeg);
    background-position: center center;
    background-size: cover;
  }

  /*
   * main.css force-centres every widget column below lg, but the split-text
   * lines still render flush left — leaving the social icons as the only
   * centred item. Pull them onto the email/phone left edge: the list's -16px
   * bleed and the first item's 8px gutter both have to go.
   */
  .header__wrapper-overlay-widgets .social {
    text-align: left;
    margin-left: 0;
  }

  .header__wrapper-overlay-widgets .social__item:first-child {
    margin-left: 0;
  }

  /*
   * The widgets sit in their own nested .container-fluid, so its 20px padding
   * stacked on top of the overlay's own 20px and pushed the icons/email/phone
   * in to 40px while the menu links stayed at 20px. Drop the inner padding so
   * both start on the same vertical line.
   */
  .header__wrapper-overlay-widgets>.container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  /* The overlay is a centred flex column below lg, so the widgets block shrank
     to its own content and floated inwards whenever the screen was wider than
     the phone number. Stretch it so its left edge is the menu's left edge. */
  .header__wrapper-overlay-widgets {
    align-self: stretch;
  }

  /* Stacked below lg, the theme's 16px block margins double up into a ~32px
     gap between each line. Tighten them into one group. */
  .header__wrapper-overlay-widgets .social {
    margin-top: 0;
    margin-bottom: 6px;
  }

  .header__wrapper-overlay-widgets p {
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

/* ---------- hero carousel ---------- */

.hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*
   * Must be a stacking context (positioned + explicit z-index). Swiper's fade
   * effect writes an inline `z-index: 1` onto the active slide; without a
   * context here that slide escapes into .section-masthead__background and
   * paints over .section-masthead__overlay (z-index: 0), killing the dark
   * overlay. z-index:0 also overrides vendor.css's `.swiper-container{z-index:1}`,
   * so the overlay — later in tree order — wins.
   */
  z-index: 0;
}

.hero-carousel .swiper-wrapper,
.hero-carousel .swiper-slide {
  height: 100%;
}

/*
 * The template's `.overlay_dark` sits at opacity .8, which was tuned for its
 * own dim hero photo and buries these brighter renders. Lightened here only —
 * other sections keep the original value.
 */
.section-intro .section-masthead__overlay {
  opacity: 0.42;
}

/* A soft scrim behind the heading keeps it legible over bright slides. */
.hero-carousel:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg,
      rgba(24, 24, 24, 0.6) 0%,
      rgba(24, 24, 24, 0.2) 45%,
      rgba(24, 24, 24, 0) 75%);
  pointer-events: none;
  z-index: 2;
}

.hero-carousel__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}

/*
 * Ken Burns. Only the active slide drifts, so an off-screen slide is never
 * mid-zoom when it fades in. Direction alternates to keep the loop from
 * feeling mechanical. Duration matches the autoplay delay + transition speed.
 */
.hero-carousel .swiper-slide-active .hero-carousel__img {
  animation: hero-kenburns-in 7.6s linear forwards;
}

.hero-carousel .swiper-slide-active:nth-child(even) .hero-carousel__img {
  animation-name: hero-kenburns-out;
}

@keyframes hero-kenburns-in {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.12) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes hero-kenburns-out {
  from {
    transform: scale(1.12) translate3d(1.5%, 1%, 0);
  }

  to {
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .swiper-slide-active .hero-carousel__img {
    animation: none;
  }
}

/* ---------- hero carousel controls ---------- */

/*
 * The services section below uses `section_minus-mt-large`, a negative margin
 * that overlaps the hero by a fluid 100px → 300px. The controls clear it by the
 * same amount, so they never slide under the panel at any viewport width.
 */
:root {
  --hero-overlap: clamp(100px, calc(100px + 200 * ((100vw - 320px) / 1600)), 300px);
}

.hero-carousel__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 60px calc(var(--hero-overlap) + 40px);
  pointer-events: none;
}

.hero-carousel__nav {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.hero-carousel__dots {
  display: flex;
  align-items: center;
}

.hero-carousel__dot {
  position: relative;
  width: 9px;
  height: 9px;
  margin: 0 7px;
  padding: 9px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hero-carousel__dot:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.45);
  /* The hero overlay is light, so lift the dots off bright slides. */
  box-shadow: 0 1px 3px rgba(24, 24, 24, 0.45);
  transition: background-color 0.4s ease, transform 0.4s ease;
}

.hero-carousel__dot:hover:before {
  background-color: rgba(255, 255, 255, 0.7);
}

/* Drop the UA focus ring on click, keep a visible one for keyboard users. */
.hero-carousel__dot:focus {
  outline: none;
}

.hero-carousel__dot:focus-visible:before {
  background-color: #fff;
  box-shadow: 0 0 0 2px var(--color-accent-primary-1);
}

/* The active dot fills with the accent color and grows slightly. */
.hero-carousel__dot_active:before {
  background-color: var(--color-accent-primary-1);
  transform: translate(-50%, -50%) scale(1.25);
}

@media (max-width: 991px) {
  .hero-carousel__controls {
    justify-content: center;
    padding: 0 30px calc(var(--hero-overlap) + 28px);
  }
}

@media (max-width: 575px) {
  .hero-carousel__controls {
    padding: 0 20px calc(var(--hero-overlap) + 22px);
  }

  .hero-carousel__dot {
    width: 8px;
    height: 8px;
    margin: 0 5px;
  }
}

/* ---------- services section overlap (desktop) ---------- */

/*
 * On desktop the fluid negative margin pulls the services panel up to -300px,
 * so it climbs over the hero carousel. Ease the overlap here so the panel sits
 * lower, and shrink --hero-overlap by the same amount to keep the controls
 * clearing the panel edge.
 */
@media (min-width: 992px) {
  :root {
    --hero-overlap: clamp(80px, calc(80px + 120 * ((100vw - 992px) / 928)), 200px);
  }

  .section-services.section_minus-mt-large {
    margin-top: calc(-1 * var(--hero-overlap));
  }
}

/* ---------- about section (heading + principles) ---------- */

/*
 * The template renders this h2 as a heavy 700-weight serif up to 52px, which
 * reads as bulky. Lighten it to an elegant editorial statement, accent the
 * studio name, and demote the attribution to a quiet all-caps line beneath.
 */
.section-about__heading {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(23px, 1.35rem + 1vw, 34px);
  line-height: 1.35;
  letter-spacing: 0.004em;
  color: #fff;
}

.section-about__heading-mark {
  font-weight: 600;
  color: var(--color-accent-primary-1);
}

.section-about__attribution {
  margin: 1.25rem 0 0;
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.section-about__attribution span {
  color: rgb(255, 255, 255);
  white-space: nowrap;
}

/*
 * Three principles replace the year/stat counters. A simple divided list keeps
 * it calm and editorial; the line-art icons draw themselves on scroll.
 */
.about-pillars {
  margin-top: 2.75rem;
  padding: 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.about-pillar {
  display: flex;
  /* Letterform sits on the row's vertical middle, so it stays centred against
     the title + copy whether that copy runs one line or two. */
  align-items: center;
  gap: 22px;
  padding: 26px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Square box, fluid between phone and desktop so the letterform keeps its
   presence next to the fluid heading without crowding the copy. */
.about-pillar__icon {
  flex: 0 0 auto;
  width: clamp(48px, 4.6vw, 64px);
  height: clamp(48px, 4.6vw, 64px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* `contain` because the source PNGs are square with transparent margins — the
   glyph should never be cropped or stretched by the box. */
.about-pillar__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-pillar:hover .about-pillar__icon {
  transform: translateY(-3px) scale(1.06);
}

/* Scoped through `.about-pillar` so it outweighs main.css's `.bg-dark h3`,
   which would otherwise tint these titles with the warm accent. */
.about-pillar .about-pillar__title {
  margin: 3px 0 5px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.about-pillar__text {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

/*
 * Reveal-on-scroll. The letterforms fade and lift into place instead of the
 * line-art icons' stroke-drawing, keeping the same staggered cascade down the
 * three pillars. `.is-inview` is set by the IntersectionObserver in
 * SectionAbout.jsx (immediately, when reduced motion is requested).
 */
.about-pillar__icon img {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-pillars.is-inview .about-pillar__icon img {
  opacity: 1;
  transform: none;
}

.about-pillars.is-inview .about-pillar:nth-child(1) .about-pillar__icon img {
  transition-delay: 0.05s;
}

.about-pillars.is-inview .about-pillar:nth-child(2) .about-pillar__icon img {
  transition-delay: 0.28s;
}

.about-pillars.is-inview .about-pillar:nth-child(3) .about-pillar__icon img {
  transition-delay: 0.51s;
}

@media (prefers-reduced-motion: reduce) {
  .about-pillar__icon img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about-pillar__icon {
    transition: none;
  }
}

/*
 * ---------- about section layout (image + copy) ----------
 *
 * The image column shows the artwork whole: sized by its own 1280x1580 ratio,
 * capped against the viewport so nothing runs off-screen on a laptop, and
 * `contain` so a wide column letterboxes instead of cropping.
 */
.section-about__figure {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 992px) {

  /*
   * The template pulls the header (and, previously, the principles) 100px left,
   * so the copy floated over the artwork. Keep both inside the dark column and
   * give them breathing room off its left edge instead.
   */
  .section-about__header {
    margin-left: 0;
  }

  .section-about .about-pillars {
    margin-left: 0;
    padding: 0;
  }

  /*
   * `.container-fluid.no-gutters` zeroes the theme's 120px page padding, which
   * left the artwork and the copy hugging the screen corners while a wide
   * trench opened up between the two columns. Put the page padding back on the
   * container (the corners) and let the columns meet on a tighter gutter.
   */
  .section-about>.container-fluid.no-gutters {
    padding-left: clamp(48px, 6vw, 110px);
    padding-right: clamp(48px, 6vw, 110px);
  }

  /*
   * The artwork is capped by viewport height, so on a rigid 50/50 split it never
   * filled its column and the leftover width piled up in the middle. Let the
   * image column shrink to the artwork itself and give the remainder to the
   * copy: the outer corners then come purely from the container padding above,
   * and the centre gutter is exactly the copy's left padding.
   */
  .section-about .no-gutters>.section-about__wrapper-img {
    flex: 0 1 auto;
    width: auto;
    max-width: 52%;
  }

  .section-about__figure {
    justify-content: flex-start;
  }

  /* `.no-gutters > [class*=col-]` zeroes the column padding, so the gutter the
     copy needs has to be re-stated at that same specificity. */
  .section-about .no-gutters>.section-about__content {
    flex: 1 1 0%;
    width: auto;
    max-width: none;
    margin-top: 0;
    padding: 0 0 0 clamp(32px, 4.2vw, 72px);
  }

  /* Centre the copy against the artwork rather than hanging it from the top. */
  .section-about .row {
    align-items: center;
  }

  .section-about__figure img {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 140px);
  }

  /* Dots decor sat 100px right of the header, i.e. under the text once the
     header stopped hanging left. Push it back behind the column edge. */
  .section-about__decor {
    right: -40px;
  }
}

/* ---------- content heading blocks (SectionContent) ---------- */

/*
 * The template rendered the heading as an unstyled <div> in the body font,
 * left-aligned (split-text writes an inline `text-align:left` on each line that
 * beats the section's `text-center`). Restyle it as a centered editorial serif
 * with a gold eyebrow and a small rule above.
 */
.section-content__header {
  margin-left: auto;
  margin-right: auto;
}

.section-content__rule {
  display: block;
  width: 44px;
  height: 2px;
  margin: 0 auto 1.5rem;
  background: var(--color-accent-primary-1);
}

.section-content .section-content__subheading.subheading {
  margin-bottom: 1.1em;
  color: var(--color-accent-primary-1);
  font-weight: 500;
  letter-spacing: 0.26em;
  font-size: 20px;
}

/* 20px + 0.26em tracking is a wide line on a phone; drop the eyebrow to 14px so
   it stays on one line. Same (0,3,0) specificity as the rule above. */
@media (max-width: 767px) {
  .section-content .section-content__subheading.subheading {
    font-size: 14px;
  }
}

.section-content__heading {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(24px, 1.1rem + 1.5vw, 40px);
  line-height: 1.3;
  letter-spacing: 0.004em;
}

.bg-dark .section-content__heading {
  color: #fff;
}

/* Override the inline `text-align:left` the split-text lines carry. */
.section-content.text-center .split-text__line {
  text-align: center !important;
}

/* ---------- portfolio cards: text over image (CSS-only hover reveal) ---------- */

/*
 * A subtle bottom scrim slides up on hover to keep the white title/eyebrow
 * legible over any image. The reveal is pure CSS (see the min-width:1025px
 * block below) rather than GSAP, so it keeps working after the slider/grid
 * remount when live Sanity content loads — the JS hook ran only once and left
 * the new cards unwired. Below 1025px there is no hover, so text shows always.
 */
.figure-portfolio__curtain {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top,
      rgba(8, 8, 8, 0.9) 0%,
      rgba(8, 8, 8, 0.5) 34%,
      rgba(8, 8, 8, 0) 70%) !important;
}

/*
 * Force white text on every card. The heading is an <h3>, and the theme's
 * `.bg-dark h3` rule (specificity 0,1,1) tints it beige, so the override has to
 * be at least as specific — hence the `.figure-portfolio` prefix (0,2,0).
 * Title sits on top (bold); the category is a bold eyebrow directly beneath it.
 */
.figure-portfolio .figure-portfolio__heading,
.figure-portfolio .figure-portfolio__category {
  color: #fff;
}

.figure-portfolio .figure-portfolio__heading {
  font-weight: 700;
}

.figure-portfolio .figure-portfolio__category {
  margin-top: 0.55em;
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Clean text-only card, matching the reference — drop the arrow glyph. */
.figure-portfolio__icon {
  display: none;
}

/* Desktop: text/scrim hidden until hover, revealed with CSS transitions. */
@media (min-width: 1025px) {
  .figure-portfolio__curtain {
    transform: translateY(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .figure-portfolio__content .figure-portfolio__heading,
  .figure-portfolio__content .figure-portfolio__category {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .figure-portfolio__content .figure-portfolio__category {
    transition-delay: 0.06s;
  }

  .figure-portfolio__wrapper-img img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .figure-portfolio:hover .figure-portfolio__curtain {
    transform: translateY(0);
  }

  .figure-portfolio:hover .figure-portfolio__content .figure-portfolio__heading,
  .figure-portfolio:hover .figure-portfolio__content .figure-portfolio__category {
    opacity: 1;
    transform: translateY(0);
  }

  .figure-portfolio:hover .figure-portfolio__wrapper-img img {
    transform: scale(1.06);
  }
}

/* Below 1025px there is no hover: show the scrim and text constantly. */
@media (max-width: 1024px) {
  .figure-portfolio__curtain {
    transform: none !important;
  }

  .figure-portfolio__category,
  .figure-portfolio__heading {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .figure-portfolio__curtain,
  .figure-portfolio__heading,
  .figure-portfolio__category,
  .figure-portfolio__wrapper-img img {
    transition: none !important;
  }
}

/* Grid cards read larger on desktop; the slider keeps its own smaller size via
   the rule below (same specificity, later in the file). */
@media (min-width: 992px) {
  .section-portfolio .figure-portfolio__heading {
    font-size: 25px;
  }
}

/* Below lg the theme's fluid h3 runs oversized on a card; hold it at 20px. */
@media (max-width: 991px) {
  .section-portfolio .figure-portfolio__heading {
    font-size: 20px;
  }
}

/* Slider titles: keep to one line, a touch smaller, with tighter card padding. */
.slider-projects .figure-portfolio__content {
  padding: 26px;
}

.slider-projects .figure-portfolio__heading {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------- contact form ---------- */

/*
 * The form panel pulls upward (section-offset_top) to overlap the slider. On
 * narrow screens that overlap landed on top of the slider arrows, hiding them.
 * Give the arrows clearance below the slides and lift them above the panel.
 */
.slider-projects .slider__footer-relative {
  padding-bottom: clamp(64px, 12vw, 100px);
}

.slider-projects__nav {
  position: relative;
  z-index: 61;
}

/* Panel: more breathing room, a soft edge + shadow so it reads as a card. */
.section-form .section-offset__content {
  padding-top: clamp(44px, 7vw, 76px);
  padding-bottom: clamp(40px, 6vw, 64px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* Head: gold eyebrow, white heading, muted supporting line. */
.form-contact__head {
  margin-bottom: 2.5rem;
}

.form-contact__eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.section-form .form__heading {
  margin-bottom: 0.7rem;
  color: #fff;
  font-size: clamp(26px, 2.2vw, 40px);
  font-weight: 600;
  letter-spacing: 0.004em;
}

.form-contact__sub {
  max-width: 44ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1.7;
}

/* Inputs: brighter underline, white text, gold focus. */
.section-form .input-float__input {
  padding: 15px 0 10px;
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 16px;
}

.section-form .input-float__input:focus {
  border-bottom-color: var(--color-accent-primary-1);
}

.section-form .input-float__label {
  color: rgba(255, 255, 255, 0.5);
}

/*
 * The theme floats labels via JS-toggled classes that this React build never
 * adds, so drive the float purely from CSS. Inputs carry placeholder=" " so
 * :not(:placeholder-shown) means "has a value".
 */
.section-form .input-float__input:focus+.input-float__label,
.section-form .input-float__input:not(:placeholder-shown)+.input-float__label {
  transform: scale(0.8571) translateY(-2rem);
}

.section-form .input-float__input:focus+.input-float__label {
  color: var(--color-accent-primary-1);
}

/* Phone field: fixed +91 prefix, with the input and label cleared past it. */
.input-phone__prefix {
  position: absolute;
  left: 0;
  top: 1em;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.75;
  pointer-events: none;
}

.section-form .input-phone__input {
  padding-left: 2.7em;
}

.section-form .input-float__label_phone {
  left: 2.7em;
}

/* When floated, pull the phone label back to the shared left edge. */
.section-form .input-phone__input:focus+.input-float__label_phone,
.section-form .input-phone__input:not(:placeholder-shown)+.input-float__label_phone {
  transform: scale(0.8571) translate(-3.15em, -2rem);
}

.section-form .form__row {
  margin-bottom: 0.6rem;
}

/* Button: gold, full width, lifts on hover. */
.section-form .form-contact .button {
  margin-top: 1.6rem;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: var(--color-accent-primary-1);
  border-color: var(--color-accent-primary-1);
  color: #181818;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.section-form .form-contact .button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(198, 159, 115, 0.35);
}

@media (max-width: 575px) {
  .section-form .section-offset__content {
    padding-left: 22px;
    padding-right: 22px;
  }

  .form-contact__head {
    margin-bottom: 1.9rem;
  }
}

/* ---------- projects slider arrows ---------- */

/*
 * The theme's arrows were 18px and #888 — invisible on the dark slider. Make
 * them clear circular controls, centered below the slider, with a gold hover.
 */
.slider-projects__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.slider-projects .slider-projects__arrow {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: none;
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.slider-projects .slider-projects__arrow:hover {
  background-color: var(--color-accent-primary-1);
  border-color: var(--color-accent-primary-1);
  color: #181818;
}

.slider-projects .slider-projects__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.slider-projects .slider-projects__arrow.swiper-button-disabled:hover {
  background: none;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.slider-projects__arrow i {
  font-size: 26px;
}

.slider-projects .slider__footer-relative {
  padding-top: 34px;
}

/* ---------- projects filter bar ---------- */

/*
 * Dark projects masthead. The band holds a title block AND the filter tabs so
 * the fixed nav, the page title, and the filters read as three distinct tiers
 * instead of one cramped strip. `section_mt-small`'s top margin exposed the
 * off-white body above the bar, so zero it out; the bar's own top padding
 * clears the fixed nav.
 */
.section-portfolio.section_mt-small {
  margin-top: 0;
}

.section-portfolio .filter.bg-off-white {
  background-color: #000 !important;
  padding-top: clamp(168px, 15vw, 220px);
  padding-bottom: clamp(30px, 3.5vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- masthead title block (white text only) ---- */
.projects-masthead {
  max-width: 660px;
  margin: 0 auto clamp(34px, 4.5vw, 60px);
  text-align: center;
}

.projects-masthead__title {
  margin: 0 0 1.1rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(30px, 10px, 72px);
  font-weight: 500;
  line-height: 1.06;
}

.projects-masthead__sub {
  max-width: 48ch;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}

/* All filter labels are white; the active tab is full-white + the gold
 * underline, inactive tabs a touch dimmer so the active one still reads. */
.section-portfolio .filter__item {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  letter-spacing: 0.14em;
  transition: color 0.3s ease;
}

.section-portfolio .filter__item:hover,
.section-portfolio .filter__item.filter__item_active {
  color: #fff;
}

/* Thicken the gold active-underline slightly (theme hides it below 1280px,
 * where labels stack — leave that hide in place, so no display override here). */
.section-portfolio .filter__underline {
  height: 2px;
  border-radius: 2px;
}

/* Breathing room between the dark bar and the first row of images. */
.section-portfolio__wrapper-grid {
  padding-top: clamp(34px, 4.5vw, 64px);
}

@media (max-width: 991px) {
  .section-portfolio .filter.bg-off-white {
    padding-top: clamp(112px, 24vw, 140px);
  }

  /* Stacked filter labels on mobile get a little vertical rhythm. */
  .section-portfolio .filter__item {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* ---------- intro headline + lead copy ---------- */

/*
 * The headline renders as one unbroken line at every viewport width. `nowrap`
 * plus `width: max-content` let it extend past its col-lg-6 into the empty
 * second column instead of wrapping. At this family/weight/tracking the string
 * measures ~19.8em, so the size is derived from the available width
 * ((100vw - 56px) / 20) — that keeps the line inside the container's 20px
 * gutters, with slack for a classic scrollbar, all the way down to 320px — and
 * is capped at 40px so it stops growing on wide screens. Pure white Montserrat
 * with tight tracking and a soft shadow keeps it crisp over the carousel.
 */
.bg-dark .section-intro__heading {
  width: max-content;
  max-width: none;
  color: #fff;
  font-family: var(--font-primary);
  font-size: min(40px, calc((100vw - 56px) / 20));
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/*
 * Like the headline, the lead runs as one unbroken line from 992px up: nowrap
 * plus width: max-content let it spill out of its col-lg-6 into the empty
 * second column instead of wrapping. The string measures ~46em, so the size is
 * capped against the available width to keep it inside the container gutters.
 * Below 992px it wraps normally (see the media query) — the line is far too
 * long to hold at those widths.
 */
.bg-dark .section-intro__lead {
  width: max-content;
  max-width: none;
  white-space: nowrap;
  margin-top: 0;
  color: #fff;
  font-family: var(--font-primary);
  font-size: min(14px, calc((100vw - 96px) / 46));
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 991px) {
  .bg-dark .section-intro__lead {
    width: auto;
    max-width: 100%;
    white-space: normal;
    margin-top: 0;
    font-size: 14px;
  }
}

@media (max-width: 575px) {

  /* Sizing is handled by the viewport-derived font-size above, which already
   * fits the single line at these widths; only the rhythm changes here. */
  .bg-dark .section-intro__heading {
    line-height: 1.2;
  }

  /*
   * On mobile the masthead centers its content vertically. Nudge the headline
   * toward the lower part of the hero so it sits above the carousel dots rather
   * than dead-center. Desktop/tablet keep the centered layout.
   */
  .section-intro .section-masthead__header {
    margin-top: 48vh;
  }

  /*
   * The single-line headline shrinks with the viewport down here, so the lead
   * tracks the same width-derived scale (just a smaller ratio) instead of
   * sitting at a fixed 15px — otherwise on ~320px screens the body copy would
   * end up larger than the heading and flip the hierarchy.
   */
  .bg-dark .section-intro__lead {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.6;
  }
}

/* ---------- services (editorial strip) ---------- */

/*
 * One compact band: a gold "Our Expertise" overline, then the three
 * disciplines on a single serif line separated by small gold diamonds. Each
 * name deep-links to the projects grid; on hover it warms to gold and an
 * underline grows from the centre. Overline, names and diamonds all carry
 * .section-services__content so servicesAnimation staggers them in as one
 * cascade.
 */
/*
 * One grid, two rows: the names and diamonds each take a column on row 2, and
 * the overline sits on row 1 in the middle name's column so "Our Expertise"
 * centres on "Interiors" rather than on the row as a whole (the outer two
 * names have different widths, so those two centres don't coincide). The nav
 * is display:contents so its children become grid items directly.
 */
.section-services__inner {
  /* Lift the content above the absolutely-positioned __bg panel that follows
     it in the DOM (the old layout got this from the wrapper items' z-index). */
  z-index: 50;
  display: grid;
  justify-content: center;
  align-items: center;
  column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
  row-gap: 2.5rem;
  padding-top: clamp(56px, 4vw + 40px, 84px);
  padding-bottom: clamp(60px, 4vw + 44px, 92px);
}

/*
 * Zero-width so the overline can't widen the (auto-sized) column it shares
 * with the middle name; its children overflow the empty box symmetrically,
 * which leaves them centred on that column.
 */
.section-services__overline {
  grid-row: 1;
  justify-self: center;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.section-services__rule {
  flex: none;
  width: 44px;
  height: 1px;
  background-color: rgba(198, 159, 115, 0.45);
}

.section-services__label {
  flex: none;
  /* letter-spacing trails an empty 0.34em after the last letter, which pushes
     the words off-centre between the two rules (and, stacked on mobile, off
     the centre the service names sit on). Pull it back so the glyphs centre. */
  margin-right: -0.34em;
  color: var(--color-accent-primary-1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The nav is a pass-through wrapper: names and diamonds are the grid items. */
.section-services__list {
  display: contents;
}

.section-services__name,
.section-services__diamond {
  grid-row: 2;
}

/* Rotated square drawn on a pseudo-element so GSAP's y-transform on the
   animated span can't clobber the 45° rotation. */
.section-services__diamond {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
}

.section-services__diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  background-color: rgba(198, 159, 115, 0.5);
}

.section-services__name {
  position: relative;
  padding: 0.2rem 0 0.55rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(26px, 1rem + 1.6vw, 40px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  outline: none;
  transition: color 0.35s ease;
}

/* Gold underline that grows from the centre on hover/focus. */
.section-services__name::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-accent-primary-1);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-services__name:hover,
.section-services__name:focus-visible {
  color: var(--color-accent-primary-1);
}

.section-services__name:hover::after,
.section-services__name:focus-visible::after {
  width: 100%;
}

/*
 * From 1200px up the template's __bg panel stops short of the right edge
 * (width: 100% - (100vw - 1140px)/2 - 20px), so content centred on the 1140
 * container reads off to the right of the visible band. Nudge the whole inner
 * left by half the missing width to recentre it on the panel. `right` on the
 * already-relative inner shifts it visually without narrowing the box, which
 * would wrap the three names onto two lines.
 */
@media (min-width: 1200px) {
  .section-services__inner {
    right: calc(((100vw - 1140px) / 2 + 20px) / 2);
  }
}

@media (max-width: 767px) {

  /* Stack the names vertically; the diamonds become quiet row separators. The
     column grid is dropped, so the overline goes back to centring on the
     stack. */
  .section-services__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .section-services__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1.1rem;
  }

  .section-services__overline {
    width: auto;
  }
}

/* ---------- contacts: labelled cards ---------- */

.figure-contact__label {
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Phone + email links: white, with a gold hover kept as the affordance. */
.section-contacts .figure-contact__item,
.section-contacts .figure-contact__item a {
  color: #fff;
}

.section-contacts .figure-contact__item a {
  transition: color 0.3s ease;
}

.section-contacts .figure-contact__item a:hover {
  color: var(--color-accent-primary-1);
}

/* "Our latest works" eyebrow: white instead of the gold accent. The theme's
 * .section-content .section-content__subheading.subheading (0,3,0) wins over a
 * plain class, so match its specificity to override. */
.section-content .section-content__subheading.subheading,
.section-content .section-content__subheading.subheading * {
  color: #fff;
}

/* ---------- footer ---------- */

/*
 * Dark, three-column footer that grounds the page under the contacts section.
 * A drifting dotted SVG + a swept accent line supply the "moving" texture; a
 * pulsing status dot adds a small point of life. All motion is opt-out via
 * prefers-reduced-motion at the bottom of this block.
 */
.footer-hsd {
  position: relative;
  overflow: hidden;
  background-color: #181818;
  padding: 0;
}

/* Swept accent hairline along the top edge. */
.footer-hsd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      var(--color-accent-primary-1),
      transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: footer-hsd-sweep 7s ease-in-out infinite;
}

/* Faint dotted field, oversized and drifting one tile for a seamless loop. */
.footer-hsd__dots {
  position: absolute;
  top: -24px;
  left: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  color: var(--color-accent-primary-1);
  opacity: 0.07;
  pointer-events: none;
  animation: footer-hsd-drift 26s linear infinite;
}

.footer-hsd__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: 28px;
}

.footer-hsd__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(30px, 3.5vw, 48px);
}

.footer-hsd__brand .logo__img {
  height: 52px;
}

.footer-hsd__tagline {
  max-width: 40ch;
  margin: 1.4rem 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1.7;
}

.footer-hsd__social .social {
  margin: 0;
  padding: 0;
}

/* Bottom bar: copyright + back-to-top, divided by a hairline. */
.footer-hsd__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-hsd__copyright {
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
}

.footer-hsd__totop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
    transform 0.3s ease;
}

.footer-hsd__totop:hover {
  background-color: var(--color-accent-primary-1);
  border-color: var(--color-accent-primary-1);
  color: #181818;
  transform: translateY(-2px);
}

@keyframes footer-hsd-sweep {
  0% {
    background-position: -60% 0;
  }

  100% {
    background-position: 160% 0;
  }
}

@keyframes footer-hsd-drift {
  to {
    transform: translate(24px, 24px);
  }
}

/* Mobile: stack brand over social, centered bottom bar. */
@media (max-width: 575px) {
  .footer-hsd__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }

  .footer-hsd__bottom {
    flex-direction: column-reverse;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .footer-hsd::before,
  .footer-hsd__dots {
    animation: none;
  }
}

/* ---------- sticky WhatsApp button ---------- */

/*
 * Fixed bottom-right CTA on every page. WhatsApp green with a soft glow halo to
 * match the reference; an expanding pulse ring draws the eye (motion opt-out
 * below). Sits above page chrome but below the transition curtain.
 */
.whatsapp-fab {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 30% 26%, #d8b98f, #c69f73 62%);
  box-shadow: 0 0 0 8px rgba(198, 159, 115, 0.16),
    0 12px 30px rgba(198, 159, 115, 0.42);
  transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    box-shadow 0.3s ease, filter 0.3s ease;
}

.whatsapp-fab:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.04);
  box-shadow: 0 0 0 10px rgba(198, 159, 115, 0.2),
    0 16px 38px rgba(198, 159, 115, 0.5);
}

.whatsapp-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.whatsapp-fab__icon {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
}

/* Expanding ring behind the button. */
.whatsapp-fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(198, 159, 115, 0.55);
  animation: whatsapp-fab-pulse 2.6s ease-out infinite;
}

@keyframes whatsapp-fab-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  70% {
    transform: scale(1.7);
    opacity: 0;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (max-width: 575px) {
  .whatsapp-fab {
    width: 54px;
    height: 54px;
  }

  .whatsapp-fab__icon {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab__pulse {
    animation: none;
  }
}

/* ============================================================
 *  Artwork gallery — the projects-grid-2 layout, re-skinned with
 *  the site's Montserrat type and gold/white palette. Dark end to
 *  end so the white header nav stays legible over it.
 * ============================================================ */

.section-artwork {
  overflow: hidden;
}

/* Masthead: big centred heading. Generous top padding clears the fixed nav. */
.section-artwork__masthead {
  padding-top: clamp(168px, 15vw, 220px);
  padding-bottom: clamp(28px, 4vw, 56px);
  text-align: center;
}

.artwork-masthead {
  max-width: 720px;
  margin: 0 auto;
}

.artwork-masthead__eyebrow {
  margin-bottom: 1.15rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.artwork-masthead .artwork-masthead__title {
  margin: 0 0 1.25rem;
  color: #fff;
  font-family: var(--font-secondary);
  /* Matches .projects-masthead__title so "Artworks" reads at the same size as "Our Projects". */
  font-size: clamp(30px, 10px, 72px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.artwork-masthead__sub {
  max-width: 52ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-primary);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}

/* Short gold rule anchoring the masthead above the grid. */
.artwork-masthead::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: clamp(1.6rem, 2.5vw, 2.2rem) auto 0;
  background: var(--color-accent-primary-1);
}

/* Grid: breathing room before the first row, vertical rhythm between rows. */
.section-artwork__wrapper-grid {
  padding-top: clamp(24px, 3.5vw, 56px);
}

.section-artwork .grid__item {
  margin-bottom: clamp(40px, 4.5vw, 72px);
}

.section-artwork__wrapper-grid .container-fluid {
  padding-left: clamp(24px, 5vw, 90px);
  padding-right: clamp(24px, 5vw, 90px);
}

/*
 * Card: rounded image window with a slow zoom on hover, title in the display
 * face turning gold, and the medium as a small tracked eyebrow beneath. The
 * theme's default hover (card shrink + content shift) is neutralised.
 */
.section-artwork .figure-portfolio-big {
  z-index: 0;
}

.section-artwork .figure-portfolio-big__wrapper-img {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.section-artwork .figure-portfolio-big__wrapper-img-inner,
.section-artwork .figure-portfolio-big:hover .figure-portfolio-big__wrapper-img-inner {
  transform: none;
}

.section-artwork .figure-portfolio-big__content,
.section-artwork .figure-portfolio-big:hover .figure-portfolio-big__content {
  transform: none;
}

.section-artwork .figure-portfolio-big__wrapper-img img {
  display: block;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-artwork .figure-portfolio-big:hover .figure-portfolio-big__wrapper-img img {
  transform: scale(1.05);
}

/* White title (the dark theme otherwise tints headings beige) in the site's
 * display face; gold on hover. */
.section-artwork .figure-portfolio-big__heading {
  margin: 0.85em 0 0.3em;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  transition: color 0.3s ease;
}

.section-artwork .figure-portfolio-big:hover .figure-portfolio-big__heading {
  color: var(--color-accent-primary-1);
}

.section-artwork .figure-portfolio-big__category {
  color: var(--color-accent-primary-1);
  font-size: 12.5px;
  letter-spacing: 0.22em;
}

@media (max-width: 991px) {
  .section-artwork__masthead {
    padding-top: clamp(112px, 26vw, 150px);
  }
}

@media (max-width: 767px) {
  .section-artwork__wrapper-grid .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
 *  About page — a full-viewport spread on plain black: compact
 *  centred masthead over a two-panel card (portrait | story +
 *  services). Sized with vh-aware clamps + a max-height fallback
 *  so the whole card fits on laptop screens without scrolling.
 * ============================================================ */

.section-about-studio {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Same top clearance as the other page mastheads (contact/artwork/project). */
  padding-top: clamp(168px, 15vw, 220px);
  padding-bottom: clamp(36px, 6vh, 88px);
}

/* ---- compact centred masthead ---- */
.about-masthead {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-masthead__eyebrow {
  margin-bottom: 0.9rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.about-masthead .about-masthead__title {
  margin: 0 0 0.9rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(30px, 2.4vw + 1.4vh, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.about-masthead__sub {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-primary);
  font-size: clamp(14px, 1vw, 16.5px);
  line-height: 1.7;
}

/* ---- two-panel card, echoing .contact-card ---- */
.about-card {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  width: 100%;
  max-width: 1120px;
  margin: clamp(22px, 3.5vh, 44px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background-color: #181818;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: contact-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Left: portrait fills the panel; founder caption over a bottom scrim. */
.about-card__media {
  position: relative;
  min-height: 340px;
}

.about-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor crop to the top so the head is never cut off. */
  object-position: center top;
}

.about-card__person {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 20px 18px;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

/* Doubled class so the white wins over the theme's `.bg-dark h3` beige tint. */
.about-card__person-name.about-card__person-name {
  margin: 0;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.about-card__person-role {
  margin-top: 0.3rem;
  color: white;
  font-size: clamp(9px, 2.6vw, 11px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right: story + services on the contact aside's warm gradient. */
.about-card__body {
  padding: clamp(26px, 2.4vw, 44px) clamp(26px, 2.8vw, 52px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(198, 159, 115, 0.12), transparent 55%),
    #181818;
}

.about-card__text p {
  margin: 0 0 1.05em;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-primary);
  font-size: clamp(13.5px, 0.75vw + 0.45vh, 15.5px);
  line-height: 1.72;
}

.about-card__text p:last-child {
  margin-bottom: 0;
}

.about-card__rule {
  width: 100%;
  height: 1px;
  margin: clamp(1.1rem, 2.2vh, 1.7rem) 0 clamp(1rem, 1.8vh, 1.4rem);
  background: rgba(255, 255, 255, 0.12);
}

/* Services title + chips share one compact footer row. */
.about-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
}

.about-card__services-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(17px, 1.2vw, 21px);
  font-weight: 500;
}

.about-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-card__services li {
  padding: 7px 16px;
  border: 1px solid rgba(198, 159, 115, 0.35);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- short laptop screens: tighten further so the card fits ---- */
@media (max-height: 760px) and (min-width: 992px) {
  .section-about-studio {
    padding-top: 96px;
    padding-bottom: 28px;
  }

  .about-masthead__sub {
    display: none;
  }

  .about-masthead .about-masthead__title {
    margin-bottom: 0.4rem;
  }

  .about-card__media {
    min-height: 300px;
  }
}

/* ---- stack on tablet/mobile: fit-to-screen no longer applies ---- */
@media (max-width: 991px) {
  .section-about-studio {
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(112px, 24vw, 150px);
  }

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

  .about-card__media {
    min-height: 0;
    /* Portrait box (taller than wide) so the square source photo covers by
       height, not width — that keeps the whole head in frame instead of
       cropping it off the top. */
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 575px) {
  .about-card__body {
    padding: 26px 20px;
  }

  /* Tighten tracking further on the narrowest phones so the role line
     ("Principal Architect & Founder") stays on one line without overflow. */
  .about-card__person-role {
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-card {
    animation: none;
  }
}

/* ============================================================
 *  Contact page — compact dark masthead above the reused form
 *  and contact-details sections. No map (per request).
 * ============================================================ */

.section-contact-masthead {
  /* Top padding must always clear the fixed header (~136px). Min 168px keeps a
     comfortable gap even on short laptops where the vw term is small. */
  padding-top: clamp(168px, 15vw, 220px);
  padding-bottom: clamp(30px, 4vw, 56px);
}

.contact-masthead {
  max-width: 640px;
  margin: 0 auto;
}

.contact-masthead__eyebrow {
  margin-bottom: 1.15rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.contact-masthead .contact-masthead__title {
  margin: 0 0 1.3rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(30px, 10px, 72px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.contact-masthead__sub {
  max-width: 52ch;
  margin: 0 auto;
  color: #fff;
  font-family: var(--font-primary);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}

/* ------------------------------------------------------------
 *  Two-column contact card: info panel (details + animated
 *  blueprint motif) beside the message form. Self-contained to
 *  the contact page, so the landing form/contacts are untouched.
 * ------------------------------------------------------------ */

.section-contact-main {
  padding-top: clamp(8px, 2vw, 24px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.contact-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background-color: #333;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: contact-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes contact-card-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- info panel ---- */
.contact-card__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(36px, 3.4vw, 56px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(198, 159, 115, 0.14), transparent 55%),
    #181818;
}

.contact-card__aside-inner {
  position: relative;
  z-index: 2;
}

.contact-card__eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.contact-card__title {
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(20px, 1.75vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}

.contact-card__lead {
  max-width: 34ch;
  margin: 0 0 2.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.75;
}

.contact-detail {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-detail__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: contact-row-in 0.5s ease both;
}

.contact-detail__row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-detail__row:nth-child(1) {
  animation-delay: 0.25s;
}

.contact-detail__row:nth-child(2) {
  animation-delay: 0.35s;
}

.contact-detail__row:nth-child(3) {
  animation-delay: 0.45s;
}

@keyframes contact-row-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.contact-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--color-accent-primary-1);
  background: rgba(198, 159, 115, 0.12);
  border: 1px solid rgba(198, 159, 115, 0.28);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.contact-detail__row:hover .contact-detail__icon {
  background: var(--color-accent-primary-1);
  color: #181818;
  transform: translateY(-2px);
}

.contact-detail__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-detail__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-detail__value {
  color: #fff;
  font-size: 15.5px;
  text-decoration: none;
  transition: color 0.25s ease;
  word-break: break-word;
}

a.contact-detail__value:hover {
  color: var(--color-accent-primary-1);
}

/* line-art building elevation (decorative) that draws itself in */
.contact-blueprint {
  position: absolute;
  right: -46px;
  bottom: -40px;
  width: 300px;
  height: 300px;
  color: rgba(198, 159, 115, 0.55);
  pointer-events: none;
  z-index: 1;
  animation: bp-float 10s ease-in-out infinite alternate;
}

.contact-blueprint line,
.contact-blueprint path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-blueprint__draw line,
.contact-blueprint__draw path {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: bp-draw 2.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.contact-blueprint__win line {
  opacity: 0;
  stroke: rgba(198, 159, 115, 0.32);
  animation: bp-fade 1.2s ease forwards;
  animation-delay: 2.2s;
}

@keyframes bp-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes bp-fade {
  to {
    opacity: 1;
  }
}

@keyframes bp-float {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-8px);
  }
}

/* ---- form panel ---- */
.contact-card__form {
  display: flex;
  align-items: center;
  padding: clamp(36px, 3.4vw, 60px);
}

.contact-card__form .form-contact {
  width: 100%;
}

.section-contact-main .form-contact__head {
  margin-bottom: 1.8rem;
  text-align: left;
}

.section-contact-main .form__heading {
  font-size: clamp(24px, 1.8vw, 32px);
}

@media (max-width: 991px) {
  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-blueprint {
    right: -70px;
    bottom: -70px;
    width: 240px;
    height: 240px;
  }
}

@media (max-width: 575px) {

  .contact-card__aside,
  .contact-card__form {
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .contact-card,
  .contact-detail__row {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .contact-blueprint,
  .contact-blueprint__draw line,
  .contact-blueprint__draw path,
  .contact-blueprint__win line {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
 *  Awards page — dark masthead + an image-forward card grid of
 *  honours and press, modelled on the reference architecture
 *  award pages and built from the blog post-preview card.
 * ============================================================ */

/* ---- masthead ---- */
.section-awards-page__masthead {
  padding-top: clamp(168px, 15vw, 220px);
  padding-bottom: clamp(36px, 5vw, 72px);
}

.awards-masthead {
  max-width: 720px;
  margin: 0 auto;
}

.awards-masthead__eyebrow {
  margin-bottom: 1.15rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.awards-masthead .awards-masthead__title {
  margin: 0 0 1.3rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(30px, 10px, 72px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.awards-masthead__sub {
  max-width: 56ch;
  margin: 0 auto;
  color: #fff;
  font-family: var(--font-primary);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}

/* ---- card grid ---- */
.section-awards-page__grid {
  padding-bottom: clamp(70px, 9vw, 130px);
}

.award-card__col {
  margin-bottom: clamp(28px, 3.2vw, 44px);
}

.award-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #333;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s ease;
}

.award-card:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 159, 115, 0.4);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

/* Media: fixed 4:3 window, image scales gently on hover. */
.award-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.award-card__media .lazy {
  width: 100%;
  height: 100%;
}

.award-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.award-card:hover .award-card__media img {
  transform: scale(1.06);
}

/* Gold year badge, top-left over the image. */
.award-card__year {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: var(--color-accent-primary-1);
  color: #1a1206;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 2px;
}

.award-card__body {
  flex: 1 1 auto;
  padding: clamp(20px, 2vw, 28px);
}

.award-card__org {
  margin-bottom: 0.7rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* `.color-white h3` on the section (0,1,1) beats a lone class, so keep the
   card prefix to hold the title white against the #333 card. */
.award-card .award-card__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 500;
  line-height: 1.25;
}

/* ============================================================
 *  Project detail — dark, editorial page modelled on the project-1
 *  template: left-aligned masthead, two-column description, then a
 *  rhythm of full-width parallax image bands (vertical side caption,
 *  alternating sides) and paired portrait grids. Every image opens a
 *  lightbox. Re-skinned in the site's Montserrat/serif + gold accent,
 *  white text throughout so the header nav stays legible.
 * ============================================================ */

/* ---- masthead (left-aligned, editorial) ---- */
.section-project-masthead {
  /* Top padding must clear the fixed header (~136px) on every viewport. */
  padding-top: clamp(150px, 14vw, 210px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

.project-masthead {
  max-width: 1000px;
}

.project-masthead__eyebrow {
  margin-bottom: 1.1rem;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.project-masthead .project-masthead__title {
  margin: 0 0 1.3rem;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.01em;
}

/* Specs line: pipe-separated values, echoing the reference metadata row. */
.project-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.15rem;
  margin-bottom: 1.6rem;
}

.project-masthead__meta-item {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-primary);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.project-masthead__meta-item+.project-masthead__meta-item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 1.15rem;
  border-radius: 50%;
  background: var(--color-accent-primary-1);
  vertical-align: middle;
}

.project-masthead__intro {
  max-width: 62ch;
  margin: 0;
  color: white;
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.8;
}

/* Longer artwork description under the title/intro (Sanity `description`). */
.project-masthead__desc {
  max-width: 68ch;
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-primary);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.85;
}

.project-masthead__rule {
  display: block;
  width: 56px;
  height: 2px;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--color-accent-primary-1);
}

/* ---- description (two-column, project-1 content block) ---- */
.section-project-desc {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 80px);
}

.project-desc__row {
  align-items: flex-start;
}

.project-desc__lead-text {
  margin: 0;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.004em;
}

.project-desc__body p {
  margin: 0 0 1.4em;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-primary);
  font-size: clamp(15px, 0.9rem + 0.3vw, 17px);
  line-height: 1.9;
}

.project-desc__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .project-desc__lead {
    margin-bottom: 1.8rem;
  }
}

/* ---- image sequence: full-width bands + paired grids ---- */
.section-project-media {
  padding-top: clamp(8px, 2vw, 24px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* Full-width band: tall parallax image with a caption that runs up one side. */
.project-band {
  position: relative;
  margin: 0 0 clamp(28px, 4vw, 60px);
  cursor: pointer;
}

.project-band__media {
  position: relative;
  height: clamp(360px, 78vh, 860px);
  overflow: hidden;
  /* Matches the page dark so any parallax edge-reveal stays invisible. */
  background: #181818;
}

.project-band__media .art-parallax__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Vertical caption pinned to the alternating side, rotated to read upward. */
.project-band__caption {
  position: absolute;
  bottom: clamp(18px, 3vw, 40px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.project-band_left .project-band__caption {
  left: clamp(14px, 2.5vw, 34px);
}

.project-band_right .project-band__caption {
  right: clamp(14px, 2.5vw, 34px);
}

/* Zoom affordance on hover, shared by bands and grid items. */
.project-band__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  background: rgba(24, 24, 24, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-band:hover .project-band__zoom,
.project-grid__item:hover .project-band__zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Paired portrait grid. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 46px);
  margin-bottom: clamp(28px, 4vw, 60px);
}

.project-grid__item {
  margin: 0;
  cursor: pointer;
}

.project-grid__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #181818;
}

.project-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-grid__item:hover .project-grid__media img {
  transform: scale(1.05);
}

.project-grid__caption {
  margin-top: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-grid__media {
    aspect-ratio: 4 / 5;
  }

  .project-band__caption {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* ---- prev / all / next nav ---- */
.section-project-nav {
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-nav__row {
  align-items: stretch;
}

.project-nav__side {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.4s ease;
}

.project-nav__side_next {
  justify-content: flex-end;
  text-align: right;
}

.project-nav__side:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.project-nav__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.project-nav__eyebrow {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project-nav__title {
  color: #fff;
  font-family: var(--font-secondary);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  transition: color 0.3s ease;
}

.project-nav__side:hover .project-nav__title {
  color: var(--color-accent-primary-1);
}

.project-nav__arrow {
  flex: none;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-nav__side_prev:hover .project-nav__arrow {
  color: var(--color-accent-primary-1);
  transform: translateX(-6px);
}

.project-nav__side_next:hover .project-nav__arrow {
  color: var(--color-accent-primary-1);
  transform: translateX(6px);
}

/* Centre cell: "All Projects", divided from the sides by hairlines. */
.project-nav__all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: clamp(28px, 3.5vw, 44px) 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.4s ease;
}

.project-nav__all:hover {
  background-color: rgba(198, 159, 115, 0.08);
}

.project-nav__all-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.project-nav__all:hover .project-nav__all-icon {
  background-color: var(--color-accent-primary-1);
  border-color: var(--color-accent-primary-1);
  color: #181818;
}

.project-nav__all-label {
  font-family: var(--font-primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* Stack the three cells on tablet/mobile; keep the centre link between them. */
@media (max-width: 767px) {

  .project-nav__side,
  .project-nav__all {
    justify-content: center;
    text-align: center;
    padding: 26px 20px;
    border-left: 0;
    border-right: 0;
  }

  .project-nav__side {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .project-nav__all {
    order: 3;
    flex-direction: row;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .project-nav__all-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .project-grid__media img,
  .project-band__zoom,
  .project-nav__arrow,
  .project-nav__title {
    transition: none;
  }
}

/* ============================================================
 *  Lightbox — full-screen image preview with prev/next, a counter
 *  and caption. Sits above all page chrome (header is z-index 500).
 * ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lightbox-in 0.3s ease both;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lightbox__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.lightbox__img {
  max-width: min(1200px, 88vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  animation: lightbox-img-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lightbox-img-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 1.1rem;
}

.lightbox__caption {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lightbox__counter {
  margin-left: auto;
  color: var(--color-accent-primary-1);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* Close + arrow controls: circular, gold on hover. */
.lightbox__close,
.lightbox__arrow {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
    transform 0.3s ease;
}

.lightbox__close:hover,
.lightbox__arrow:hover {
  background: var(--color-accent-primary-1);
  border-color: var(--color-accent-primary-1);
  color: #181818;
}

.lightbox__close {
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  width: 48px;
  height: 48px;
  font-size: 24px;
}

.lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 30px;
}

.lightbox__arrow:hover {
  transform: translateY(-50%) scale(1.06);
}

.lightbox__arrow_prev {
  left: clamp(12px, 2.5vw, 40px);
}

.lightbox__arrow_next {
  right: clamp(12px, 2.5vw, 40px);
}

@media (max-width: 575px) {
  .lightbox__arrow {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .lightbox__img {
    max-height: 72vh;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lightbox,
  .lightbox__img {
    animation: none;
  }

  .lightbox__close,
  .lightbox__arrow {
    transition: none;
  }
}

/* ============================================================
 *  Global: pure-black page backgrounds. The theme's dark surfaces
 *  (#181818 / #222) all drop to true black; bg-dark-3 (#333) and
 *  the contact/about cards stay lighter as elevated surfaces so
 *  content still has depth against the black.
 * ============================================================ */

body {
  background-color: #000;
}

.bg-dark,
.bg-dark-2 {
  background-color: #000;
}

/* Projects grid: the one remaining light section goes black too. Card text
 * is white-on-image (curtain reveal), so nothing else needs re-tinting. */
.section-portfolio.bg-white {
  background-color: #000;
}