/* ==========================================================================
   ZEREN CONSTRUCTION — brand override layer
   Loaded AFTER style.css + responsive.css. Re-skins the Tecture template to
   the Zeren logo: polished brass on near-black.
   Palette sampled directly from the client's logo artwork.
   ========================================================================== */

:root {
  /* --- Zeren brass, sampled from the logo --- */
  --zeren-gold-deep: #624222;
  --zeren-gold-core: #a67e4f;
  --zeren-gold:      #c9a063;
  --zeren-gold-lite: #debc8c;
  --zeren-gold-hi:   #faebcf;

  --zeren-ink:    #08090a;
  --zeren-panel:  #101112;
  --zeren-panel2: #16171a;
  --zeren-line:   rgba(222, 188, 140, 0.16);
  --zeren-line-strong: rgba(222, 188, 140, 0.34);

  /* --- re-point Tecture's own tokens --- */
  --tecture-base: #c9a063;
  --tecture-base-rgb: 201, 160, 99;
  --tecture-black: #101112;
  --tecture-black-rgb: 16, 17, 18;
  --tecture-gray: #a7a49e;
  --tecture-gray-rgb: 167, 164, 158;
  --tecture-bdr-color: rgba(222, 188, 140, 0.16);
}

body,
.body-bg-color-1 { background-color: var(--zeren-ink); }

body { color: #a5a29c; letter-spacing: 0.01em; }

/* The template paints two hairlines down the page — make them brass. */
.theme-border-left,
.theme-border-right { background-color: var(--zeren-line); }

/* --------------------------------------------------------------------------
   1. Type
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: #f3f0ea; letter-spacing: -0.015em; }

/* Small brass eyebrow above section titles */
.zeren-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--tecture-font-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--zeren-gold);
  margin-bottom: 18px;
}
.zeren-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zeren-gold));
}

.zeren-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--zeren-line-strong), transparent);
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.thm-btn {
  background-color: transparent;
  color: var(--zeren-gold-hi);
  border: 1px solid var(--zeren-line-strong);
  border-radius: 0;
  font-family: var(--tecture-font-2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 18px 34px;
  position: relative;
  overflow: hidden;
  transition: color .45s ease, border-color .45s ease;
  z-index: 1;
}
.thm-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--zeren-gold-core), var(--zeren-gold-lite));
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  z-index: -1;
}
.thm-btn:hover { color: #17130c; border-color: var(--zeren-gold-lite); }
.thm-btn:hover::before { transform: translateY(0); }

.thm-btn--solid {
  color: #17130c;
  border-color: transparent;
  background: linear-gradient(100deg, var(--zeren-gold-core), var(--zeren-gold-lite));
}
.thm-btn--solid::before { background: #f4e2c2; }
.thm-btn--solid:hover { color: #17130c; }

/* --------------------------------------------------------------------------
   3. Surfaces
   -------------------------------------------------------------------------- */
.zeren-card {
  background: linear-gradient(180deg, var(--zeren-panel2), var(--zeren-panel));
  border: 1px solid var(--zeren-line);
  transition: border-color .45s ease, transform .45s ease;
}
.zeren-card:hover {
  border-color: var(--zeren-line-strong);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   4. Signature effects
   -------------------------------------------------------------------------- */

/* 4b. Slow image reveal — the photo settles as it scrolls in. */
.zeren-reveal { overflow: hidden; }
.zeren-reveal img,
.zeren-reveal .zeren-reveal__bg {
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(.16,.84,.32,1);
  will-change: transform;
}
.zeren-reveal.is-in img,
.zeren-reveal.is-in .zeren-reveal__bg { transform: scale(1); }

/* 4c. Hairline brass frame that draws itself on hover. */
.zeren-frame { position: relative; }
.zeren-frame::before,
.zeren-frame::after {
  content: "";
  position: absolute;
  background: var(--zeren-gold);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.zeren-frame::before {
  left: 0; right: 0; top: 0; height: 1px;
  transform: scaleX(0);
  transform-origin: left;
}
.zeren-frame::after {
  top: 0; bottom: 0; left: 0; width: 1px;
  transform: scaleY(0);
  transform-origin: top;
}
.zeren-frame:hover::before { transform: scaleX(1); }
.zeren-frame:hover::after  { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .zeren-reveal img,
  .zeren-reveal .zeren-reveal__bg { transform: none; transition: none; }
  .thm-btn::before { transition: none; }
}

/* ==========================================================================
   5. Layout primitives
   ========================================================================== */
.zeren-section { position: relative; padding: 130px 0; }
.zeren-section--alt { background: linear-gradient(180deg, #0b0c0d, var(--zeren-panel) 40%, #0b0c0d); }

.zeren-h2 {
  font-family: var(--tecture-font-2);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
}

.zeren-lead { font-size: 19px; line-height: 32px; color: #cdc9c1; }

.zeren-sechead { max-width: 780px; margin-bottom: 64px; }
.zeren-sechead__sub { color: #8d8a84; max-width: 60ch; }
.zeren-sechead--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.zeren-ticks { margin: 30px 0 0; }
.zeren-ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  color: #b9b5ae;
}
.zeren-ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 1px;
  background: var(--zeren-gold);
}

.zeren-quote {
  margin: 38px 0 0;
  padding: 22px 0 0 26px;
  border-left: 1px solid var(--zeren-line-strong);
  font-family: var(--tecture-font-2);
  font-size: 21px;
  line-height: 1.4;
  color: var(--zeren-gold-lite);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   6. Header
   ========================================================================== */
.zeren-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: background-color .45s ease, border-color .45s ease, padding .45s ease;
  border-bottom: 1px solid transparent;
  padding: 14px 0;
}
.zeren-header.is-stuck {
  background: rgba(8, 9, 10, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--zeren-line);
  padding: 6px 0;
}
.zeren-header .main-menu,
.zeren-header .main-menu__wrapper { background: transparent; padding: 0; }

.zeren-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
/* Horizontal lockup: mark on the left, wordmark to its right. Two elements so
   each can be sized and animated on its own.

   Alignment: the wordmark's visual mass sits ~14% ABOVE its bounding box centre,
   because ZEREN is heavy and CONSTRUCTION is a thin line underneath. Centring the
   two boxes therefore makes the text look like it rides high against the mark.
   The wordmark is nudged down by roughly half that difference, which lands ZEREN's
   cap-height on the mark's top and CONSTRUCTION's baseline near the mark's base.
   Full optical centring overshoots and the text then rides low. */
.zeren-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.zeren-header__mark {
  height: 44px;
  width: auto;
  transition: height .45s ease;
}
.zeren-header__word {
  height: 40px;
  width: auto;
  position: relative;
  top: 5px;                       /* the optical nudge, ~0.125 x its height */
  transition: height .45s ease, top .45s ease;
}
.zeren-header.is-stuck .zeren-header__mark { height: 37px; }
.zeren-header.is-stuck .zeren-header__word { height: 34px; top: 4px; }

@media (max-width: 575px) {
  .zeren-header__logo { gap: 10px; }
  .zeren-header__mark { height: 36px; }
  .zeren-header__word { height: 33px; top: 4px; }
}

.zeren-header__nav .main-menu__list {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zeren-header__nav .main-menu__list > li > a {
  font-family: var(--tecture-font-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfcbc4;
  position: relative;
  padding-bottom: 6px;
  transition: color .35s ease;
}
.zeren-header__nav .main-menu__list > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--zeren-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.zeren-header__nav .main-menu__list > li > a:hover,
.zeren-header__nav .main-menu__list > li.current > a { color: var(--zeren-gold-hi); }
.zeren-header__nav .main-menu__list > li > a:hover::after,
.zeren-header__nav .main-menu__list > li.current > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.zeren-header__right { display: flex; align-items: center; gap: 20px; }
.zeren-header__ig { color: #cfcbc4; font-size: 18px; transition: color .35s ease; }
.zeren-header__ig:hover { color: var(--zeren-gold); }
.zeren-header__btn { padding: 14px 26px; font-size: 12.5px; }
.zeren-header .mobile-nav__toggler { display: none; color: var(--zeren-gold-hi); font-size: 20px; }


/* ==========================================================================
   7. Hero
   ========================================================================== */
.zeren-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 190px 0 120px;
  overflow: hidden;
}
.zeren-hero__media { position: absolute; inset: 0; }
.zeren-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  animation: zerenDrift 26s ease-in-out infinite alternate;
}
@keyframes zerenDrift {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}
.zeren-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,7,8,.96) 0%, rgba(6,7,8,.86) 38%, rgba(6,7,8,.42) 72%, rgba(6,7,8,.62) 100%),
    linear-gradient(180deg, rgba(6,7,8,.9) 0%, rgba(6,7,8,.25) 34%, rgba(6,7,8,.94) 100%);
}
.zeren-hero .container { position: relative; z-index: 2; }
.zeren-hero__content { max-width: 830px; }

.zeren-hero__title {
  font-family: var(--tecture-font-2);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(44px, 7.4vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.022em;
  margin: 0 0 30px;
}

.zeren-hero__text {
  max-width: 62ch;
  font-size: 18px;
  line-height: 31px;
  color: #c4c0b9;
}
.zeren-hero__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.zeren-hero__cue {
  margin-top: 46px;
  font-family: var(--tecture-font-2);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(222,188,140,.62);
}

/* ==========================================================================
   8. Running band
   Two identical lists side by side, translated -50% forever. No plugin, so a
   language switch reaches every copy of the text.
   ========================================================================== */
.zeren-marquee {
  border-top: 1px solid var(--zeren-line);
  border-bottom: 1px solid var(--zeren-line);
  background: var(--zeren-panel);
  padding: 26px 0;
}
.zeren-marquee__viewport { overflow: hidden; }
.zeren-marquee__track {
  display: flex;
  width: max-content;
  animation: zerenMarquee 42s linear infinite;
}
.zeren-marquee:hover .zeren-marquee__track { animation-play-state: paused; }
.zeren-marquee__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zeren-marquee__list li {
  display: flex;
  align-items: center;
  font-family: var(--tecture-font-2);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  /* headroom matters: the viewport clips overflow, and French uppercase
     accents (REVÊTEMENT) sit above the cap height */
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f6b64;
  white-space: nowrap;
  padding: 0 30px;
}
.zeren-marquee__list li::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 60px;
  background: var(--zeren-gold);
  transform: rotate(45deg);
}
@keyframes zerenMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .zeren-marquee__track { animation: none; }
}

/* ==========================================================================
   10. About
   ========================================================================== */
.zeren-about__media img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   11. Services
   ========================================================================== */
.zeren-service { padding: 42px 34px 38px; height: 100%; }
.zeren-service__num {
  display: block;
  font-family: var(--tecture-font-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--zeren-gold);
  margin-bottom: 22px;
}
.zeren-service__title {
  font-family: var(--tecture-font-2);
  font-size: 23px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}
.zeren-service p { margin: 0; font-size: 16px; line-height: 27px; color: #9b978f; }

/* ==========================================================================
   12. Featured band
   ========================================================================== */
.zeren-band {
  position: relative;
  padding: 150px 0;
  overflow: hidden;
}
.zeren-band__bg { position: absolute; inset: 0; display: block; }
.zeren-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.zeren-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,7,8,.95) 0%, rgba(6,7,8,.8) 46%, rgba(6,7,8,.35) 100%);
}
.zeren-band .container { position: relative; z-index: 2; }
.zeren-band__content { max-width: 660px; }
.zeren-band__content p { color: #bdb9b2; margin: 0; }

/* ==========================================================================
   13. Work grid
   ========================================================================== */
.zeren-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.zeren-filter__btn {
  cursor: pointer;
  padding: 11px 22px;
  border: 1px solid var(--zeren-line);
  background: transparent;
  font-family: var(--tecture-font-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a5a29c;
  transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}
.zeren-filter__btn:hover { color: var(--zeren-gold-hi); border-color: var(--zeren-line-strong); }
.zeren-filter__btn.is-active {
  color: #17130c;
  background: linear-gradient(100deg, var(--zeren-gold-core), var(--zeren-gold-lite));
  border-color: transparent;
}
.zeren-filter__btn:focus-visible { outline: 2px solid var(--zeren-gold); outline-offset: 3px; }

/* Flat CSS grid — uniform cells, so a hidden card can never strand a hole. */
.zeren-workgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
}
.zeren-work.is-hidden { display: none; }

.zeren-work { position: relative; height: 100%; }
.zeren-work a { display: block; overflow: hidden; position: relative; }
.zeren-work img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.16,.84,.32,1), filter .6s ease;
}
.zeren-work:hover img { transform: scale(1.05); filter: brightness(1.07); }

.zeren-work__meta {
  padding: 20px 2px 0;
  border-top: 1px solid var(--zeren-line);
  margin-top: 18px;
}
.zeren-work__cat {
  margin: 0 0 6px;
  font-family: var(--tecture-font-2);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zeren-gold);
}
.zeren-work__title {
  margin: 0 0 4px;
  font-family: var(--tecture-font-2);
  font-size: 25px;
  text-transform: uppercase;
}
.zeren-work__loc { margin: 0; font-size: 14.5px; color: #8b8880; }

/* gallery */
.zeren-gallery { margin-top: 96px; }
.zeren-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.zeren-gallery__item { display: block; overflow: hidden; position: relative; }
.zeren-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.16,.84,.32,1), filter .5s ease;
}
.zeren-gallery__item:hover img { transform: scale(1.06); filter: brightness(1.08); }

/* ==========================================================================
   14. Process
   ========================================================================== */
.zeren-step { padding-top: 26px; border-top: 1px solid var(--zeren-line); height: 100%; }
.zeren-step__num {
  display: block;
  font-family: var(--tecture-font-2);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--zeren-gold);
  margin-bottom: 16px;
}
.zeren-step__title {
  font-family: var(--tecture-font-2);
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.zeren-step p { margin: 0; font-size: 16px; line-height: 27px; color: #9b978f; }
.zeren-process__close {
  margin: 66px 0 0;
  text-align: center;
  font-family: var(--tecture-font-2);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zeren-gold-lite);
}

/* ==========================================================================
   15. Contact
   ========================================================================== */
.zeren-contact { overflow: hidden; }
.zeren-contact__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  max-width: 620px;
  opacity: .05;
  pointer-events: none;
}
.zeren-contact__mark img { width: 100%; height: auto; }

.zeren-contact__list { margin: 40px 0 0; border-top: 1px solid var(--zeren-line); }
.zeren-contact__list li {
  display: flex;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--zeren-line);
}
.zeren-contact__k {
  flex: 0 0 130px;
  font-family: var(--tecture-font-2);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7f7c76;
  padding-top: 3px;
}
.zeren-contact__v { color: #e6e3dd; }
.zeren-contact__v a { color: var(--zeren-gold-lite); }
.zeren-contact__v a:hover { color: var(--zeren-gold-hi); }
.zeren-contact__list li[data-placeholder] .zeren-contact__v { opacity: .5; }

.zeren-form { position: relative; }
.zeren-form label {
  display: block;
  font-family: var(--tecture-font-2);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #85827c;
  margin-bottom: 8px;
}
.zeren-form input,
.zeren-form textarea,
.zeren-form select {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--zeren-line);
  color: #eeebe5;
  padding: 15px 17px;
  font-size: 16px;
  border-radius: 0;
  outline: none;
  transition: border-color .35s ease, background-color .35s ease;
}
.zeren-form input::placeholder,
.zeren-form textarea::placeholder { color: #6b6863; }
.zeren-form input:focus,
.zeren-form textarea:focus,
.zeren-form select:focus {
  border-color: var(--zeren-gold);
  background: rgba(255,255,255,.05);
}
.zeren-form textarea { resize: vertical; min-height: 130px; }
.zeren-form button { margin-top: 8px; cursor: pointer; }
.zeren-form__note { margin: 14px 0 0; font-size: 14.5px; color: var(--zeren-gold-lite); }
.zeren-form__note.is-error { color: #e0a3a3; }
.zeren-form__note.is-ok { color: var(--zeren-gold-hi); }
.zeren-form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

/* Honeypot. Moved off-screen rather than display:none, which some bots skip.
   aria-hidden + tabindex="-1" in the markup keep people out of it. */
.zeren-form__trap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */
.zeren-footer { padding: 80px 0 44px; border-top: 1px solid var(--zeren-line); background: #060708; }
.zeren-footer__top { text-align: center; }
.zeren-footer__logo img { height: 118px; width: auto; }
.zeren-footer__tag {
  margin: 20px 0 14px;
  font-family: var(--tecture-font-2);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--zeren-gold);
}
.zeren-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 44px; }
.zeren-footer__nav a {
  font-family: var(--tecture-font-2);
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5a29c;
}
.zeren-footer__nav a:hover { color: var(--zeren-gold-hi); }
.zeren-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 30px;
  font-size: 14.5px;
  color: #7b7873;
}
.zeren-footer__bottom p { margin: 0; }
.zeren-footer__ig { color: #a5a29c; display: inline-flex; align-items: center; gap: 9px; }
.zeren-footer__ig:hover { color: var(--zeren-gold-hi); }

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .zeren-workgrid { gap: 28px 24px; }
}

@media (max-width: 991px) {
  .zeren-section { padding: 92px 0; }
  .zeren-header__nav { display: none; }
  .zeren-header .mobile-nav__toggler { display: inline-block; }
  .zeren-header__btn { display: none; }
  .zeren-hero { padding: 150px 0 90px; min-height: auto; }
  .zeren-hero__media img { object-position: center 45%; }
  .zeren-workgrid { grid-template-columns: repeat(2, 1fr); }
  .zeren-gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .zeren-band { padding: 100px 0; }
  .zeren-contact__mark { display: none; }
}

@media (max-width: 575px) {
  .zeren-section { padding: 74px 0; }
  .zeren-hero__btns .thm-btn { width: 100%; text-align: center; }
  .zeren-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .zeren-sechead { margin-bottom: 44px; }
  .zeren-contact__list li { flex-direction: column; gap: 4px; }
  .zeren-contact__k { flex: none; }
  .zeren-footer__nav { gap: 18px; }
  .zeren-workgrid { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   18. Corrections against the base template
   ========================================================================== */

/* Tecture paints a filled bar behind the active/hovered nav link. We use a
   hairline underline instead, so kill the bar. */
.zeren-header__nav .main-menu__list > li > a::before { display: none !important; }
.zeren-header__nav .main-menu__list > li > a { padding: 0 0 6px; }

/* The hero photo is a cold blue-sky shot; pull the saturation back so the sky
   stops competing with the brass and the black stays black. */
.zeren-hero__media img {
  filter: saturate(.82) contrast(1.04) brightness(1.02);
}
.zeren-hero__scrim {
  background:
    linear-gradient(90deg, rgba(5,6,7,.97) 0%, rgba(5,6,7,.9) 40%, rgba(5,6,7,.55) 74%, rgba(5,6,7,.72) 100%),
    linear-gradient(180deg, rgba(5,6,7,.92) 0%, rgba(5,6,7,.35) 32%, rgba(5,6,7,.96) 100%),
    radial-gradient(120% 90% at 18% 55%, rgba(98,66,34,.16), transparent 60%);
}

/* Same treatment on the featured band. */
.zeren-band__bg img { filter: saturate(.9) contrast(1.03) brightness(1.04); }

/* Own scroll-in reveal. Replaces WOW.js, which could leave elements stuck at
   visibility:hidden if its scroll handler never fired. */
.js .zeren-fade {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16,.84,.32,1);
  transition-delay: var(--d, 0ms);
}
.zeren-fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zeren-fade { opacity: 1; transform: none; transition: none; }
}

/* Body copy rhythm — the base template zeroes paragraph margins. */
.zeren-about__body p + p,
.zeren-about__body .zeren-lead + p { margin-top: 18px; }
.zeren-about__body p { margin-bottom: 0; }
.zeren-band__content p { margin-top: 6px; }

/* ==========================================================================
   19. Preloader — brand it, and stop referencing the template's missing
   assets/images/loader.png (which 404s).
   ========================================================================== */
.preloader {
  background-color: var(--zeren-ink);
  background-image: none;
}
.preloader__image {
  background-image: url("../img/brand/header-mark.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 74px;
  height: 99px;
  animation: zerenPulse 1.5s ease-in-out infinite;
}
@keyframes zerenPulse {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-6px); }
}

/* ==========================================================================
   20. Language switch
   ========================================================================== */
.zeren-lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.zeren-lang__btn {
  background: none;
  border: 0;
  padding: 2px 1px;
  cursor: pointer;
  font-family: var(--tecture-font-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #6f6c66;
  transition: color .3s ease;
}
.zeren-lang__btn:hover { color: var(--zeren-gold-lite); }
.zeren-lang__btn.is-active { color: var(--zeren-gold-hi); }
.zeren-lang__btn:focus-visible { outline: 1px solid var(--zeren-gold); outline-offset: 3px; }
.zeren-lang__sep {
  width: 1px;
  height: 12px;
  background: var(--zeren-line-strong);
}

.zeren-lang--drawer {
  margin: 26px 0 6px;
  padding-top: 22px;
  border-top: 1px solid var(--zeren-line);
}
.zeren-lang--drawer .zeren-lang__btn { font-size: 14px; }

/* ==========================================================================
   21. Motion
   One vocabulary throughout: things wipe, mask and draw, the way a panel goes
   up. No floating, no bouncing, no shimmer.
   ========================================================================== */

/* 21a. Headlines rise out of a mask, line by line.
   The padding/negative-margin pair buys room for descenders and for French
   uppercase accents without letting the text peek out of the mask early. */
/* flex column, because adjacent negative margins would otherwise collapse
   into one and leave a gap between the masked lines */
.js .zeren-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.zeren-lines .ln {
  display: block;
  overflow: hidden;
  padding: 0.12em 0 0.14em;
  margin: -0.12em 0 -0.14em;
}
.js .zeren-lines .ln__i {
  display: block;
  transform: translateY(108%);
  transition: transform 1.05s cubic-bezier(.16,.84,.32,1);
  transition-delay: calc(var(--i, 0) * 105ms);
}
.zeren-lines.is-in .ln__i { transform: translateY(0); }

/* 21b. Photographs wipe up into place instead of just fading. */
.js .zeren-reveal img,
.js .zeren-reveal .zeren-reveal__bg {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.07);
  transition: clip-path 1.15s cubic-bezier(.16,.84,.32,1),
              transform 1.6s cubic-bezier(.16,.84,.32,1);
}
.zeren-reveal.is-in img,
.zeren-reveal.is-in .zeren-reveal__bg {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* 21c. The rule beside an eyebrow draws itself. */
.js .zeren-eyebrow::before { width: 0; transition: width .85s cubic-bezier(.22,.61,.36,1) .1s; }
.zeren-eyebrow.is-in::before { width: 34px; }

/* 21d. Brass hairline draws across a project card on hover. */
.zeren-work__meta { position: relative; }
.zeren-work__meta::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--zeren-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
}
.zeren-work:hover .zeren-work__meta::after { transform: scaleX(1); }

/* 21e. Gallery tiles come in on a stagger. */
.zeren-gallery__item:nth-child(1) { transition-delay: 0ms; }
.zeren-gallery__item:nth-child(2) img { transition-delay: 70ms; }
.zeren-gallery__item:nth-child(3) img { transition-delay: 140ms; }
.zeren-gallery__item:nth-child(4) img { transition-delay: 210ms; }
.zeren-gallery__item:nth-child(5) img { transition-delay: 60ms; }
.zeren-gallery__item:nth-child(6) img { transition-delay: 130ms; }
.zeren-gallery__item:nth-child(7) img { transition-delay: 200ms; }
.zeren-gallery__item:nth-child(8) img { transition-delay: 270ms; }

/* 21f. Reading position, as a brass hairline across the very top. */
.zeren-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 120;
  pointer-events: none;
}
.zeren-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--zeren-gold-core), var(--zeren-gold-lite));
  transform-origin: left;
}

/* 21g. The logo assembles once, on load. */
@keyframes zerenMarkIn {
  from { opacity: 0; transform: translateY(7px) scale(.93); }
  to   { opacity: 1; transform: none; }
}
@keyframes zerenWordIn {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.zeren-header__mark { animation: zerenMarkIn .75s cubic-bezier(.16,.84,.32,1) both; }
.zeren-header__word { animation: zerenWordIn .95s cubic-bezier(.16,.84,.32,1) .14s both; }

/* 21h. Language swap crossfades rather than snapping. */
[data-en], [data-fr] { transition: opacity .16s ease; }
.lang-swapping [data-en], .lang-swapping [data-fr] { opacity: .18; }

@media (prefers-reduced-motion: reduce) {
  .zeren-lines .ln__i { transform: none; transition: none; }
  .zeren-reveal img,
  .zeren-reveal .zeren-reveal__bg { clip-path: none; transform: none; transition: none; }
  .zeren-eyebrow::before { width: 34px; transition: none; }
  .zeren-work__meta::after { display: none; }
  .zeren-header__mark,
  .zeren-header__word { animation: none; }
  [data-en], [data-fr] { transition: none; }
  .lang-swapping [data-en], .lang-swapping [data-fr] { opacity: 1; }
}
.zeren-form__note a { color: var(--zeren-gold-lite); text-decoration: underline; }
.zeren-form__note a:hover { color: var(--zeren-gold-hi); }

/* ==========================================================================
   22. Photography first
   The work is what the client is judged on, so the images carry the page:
   nothing dims them at rest, and every one opens full size.
   ========================================================================== */

/* Discreet cue that a photo opens larger. Slides in from the corner on hover. */
.zeren-work a,
.zeren-gallery__item { position: relative; display: block; overflow: hidden; }

.zeren-work a::after,
.zeren-gallery__item::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(222, 188, 140, .55);
  background-color: rgba(8, 9, 10, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faebcf' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M9 15L15 9M15 9H10M15 9V14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  opacity: 0;
  transform: translate(6px, 6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.zeren-work:hover a::after,
.zeren-gallery__item:hover::after { opacity: 1; transform: translate(0, 0); }

/* Slightly more room between gallery tiles now that they are the main event. */
.zeren-gallery__grid { gap: 16px; }

/* Lightbox on black, so a photo is never framed in template grey. */
.mfp-bg { background: #05070a; opacity: .96 !important; }
.mfp-img { box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.mfp-figure::after { box-shadow: none; }
.mfp-counter { color: rgba(222,188,140,.7); font-family: var(--tecture-font-2); letter-spacing: .18em; }
.mfp-arrow-left::after { border-right-color: var(--zeren-gold-lite); }
.mfp-arrow-right::after { border-left-color: var(--zeren-gold-lite); }

@media (prefers-reduced-motion: reduce) {
  .zeren-work a::after,
  .zeren-gallery__item::after { transition: none; }
}

@media (hover: none) {
  /* touch devices get no hover, so show the cue at rest */
  .zeren-work a::after,
  .zeren-gallery__item::after { opacity: .8; transform: none; }
}

/* Lightbox caption */
.mfp-zeren .mfp-title { padding-top: 14px; color: #c9c5be; }
.zeren-lb__t {
  display: block;
  font-family: var(--tecture-font-2);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #f2efe9;
}
.zeren-lb__s {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: rgba(222, 188, 140, .75);
}
.mfp-fade.mfp-bg { opacity: 0; transition: opacity .3s ease; }
.mfp-fade.mfp-bg.mfp-ready { opacity: .96; }
.mfp-fade.mfp-bg.mfp-removing { opacity: 0; }
.mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: opacity .3s ease; }
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }

/* ==========================================================================
   23. Proudly Canadian
   The leaf is the official Font Awesome canadian-maple-leaf glyph, inlined so
   it renders even if the icon font fails. Red is the only non-brand colour on
   the page, so it is used small and sparingly — at this size it reads as a
   flag, not as decoration.
   ========================================================================== */
.zeren-ca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--zeren-line);
  font-family: var(--tecture-font-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b9b5ae;
  white-space: nowrap;
}
.zeren-ca__leaf {
  width: 15px;
  height: 15px;
  flex: none;
  fill: #d8232a;
}
.zeren-ca__sep {
  width: 3px;
  height: 3px;
  background: var(--zeren-gold);
  transform: rotate(45deg);
  flex: none;
}

/* plain variant: no frame, for the footer */
.zeren-ca--plain {
  border: 0;
  padding: 0;
  color: #8b8880;
  letter-spacing: 0.16em;
}

/* hero foot: badge and the pride line share a row, and wrap on small screens */
.zeren-hero__foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 46px;
}
.zeren-hero__foot .zeren-hero__cue { margin-top: 0; }

/* about: sits between the bullets and the pull quote */
.zeren-ca--about { margin-top: 30px; }

.zeren-footer__top .zeren-ca--plain { margin: 6px 0 26px; }

@media (max-width: 575px) {
  .zeren-hero__foot { gap: 14px; margin-top: 34px; }
  .zeren-ca { font-size: 11.5px; letter-spacing: 0.16em; padding: 7px 12px; }
}