/* =====================================================================
   STYLEWOOD INTERIO — newsite
   Dark editorial luxe. Charcoal · brass · ivory · walnut.
   ===================================================================== */

:root {
  /* Palette */
  --bg-0: #0b0a08;            /* obsidian */
  --bg-1: #15130f;            /* onyx */
  --bg-2: #1d1a14;            /* warm charcoal */
  --bg-3: #2a2519;            /* walnut shadow */
  --line: rgba(217, 196, 145, 0.14);

  --ink-1: #f6f1e6;           /* ivory */
  --ink-2: #d8cfbb;           /* parchment */
  --ink-3: #95897a;           /* muted dust */
  --ink-4: #5c5448;           /* faded slate */

  --gold-1: #d9c491;          /* brass highlight */
  --gold-2: #b89859;          /* deep brass */
  --gold-3: #8c6c2f;          /* burnt gold */
  --copper: #c0784a;          /* copper accent */

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 12vw, 160px);
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 24px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg-0);
  overflow-x: hidden;
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* Selection */
::selection { background: var(--gold-2); color: var(--bg-0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-3); }

/* ---------- Typography ---------- */
.display, h1, h2, h3, .h-serif {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--ink-1);
}
h1, .display-1 { font-size: clamp(48px, 8vw, 124px); font-weight: 300; }
h2, .display-2 { font-size: clamp(40px, 6vw, 84px); font-weight: 300; }
h3, .display-3 { font-size: clamp(28px, 3.6vw, 48px); }
.lede { font-size: clamp(17px, 1.4vw, 21px); color: var(--ink-2); max-width: 64ch; }
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--gold-1);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold-2);
}
.italic { font-style: italic; color: var(--gold-1); }
.muted { color: var(--ink-3); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  padding: 0 var(--gutter);
  margin: 0 auto;
}
section { padding: var(--section-y) 0; position: relative; }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), color 0.4s, background 0.4s, border-color 0.4s;
  isolation: isolate;
  white-space: nowrap;
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(6px); }

.btn-primary {
  background: var(--gold-2);
  color: var(--bg-0);
  border: 1px solid var(--gold-2);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-1);
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary:hover::before { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink-1);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--gold-2); color: var(--gold-1); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background 0.5s, padding 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  padding: 10px var(--gutter);
  background: rgba(11, 10, 8, 0.94);
  border-bottom-color: var(--line);
}
.site-header.scrolled .brand img { height: 46px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-1);
  flex-shrink: 0;
}
/* logo-v2.png is trimmed to the artwork (413x130), so height maps 1:1 to what
   you actually see — no transparent padding inflating the box into the hero. */
.brand img { display: block; height: 64px; width: auto; transition: height 0.4s; }
@media (max-width: 720px) { .brand img { height: 44px; } }
.brand-text {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.brand-text small {
  display: block;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--gold-1);
  margin-top: 4px;
  text-transform: uppercase;
}
.nav-primary {
  display: flex;
  gap: 2px;
}
.nav-primary a {
  /* 11.7px = 13px −10%. Padding and tracking pulled in with it so seven items
     stop crowding the logo. */
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 11.7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  position: relative;
  transition: color 0.3s;
}
.nav-primary a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 1px;
  background: var(--gold-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav-primary a:hover { color: var(--ink-1); }
.nav-primary a:hover::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-1);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.icon-btn:hover { border-color: var(--gold-2); color: var(--gold-1); background: rgba(217, 196, 145, 0.06); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  color: var(--ink-1);
}
.menu-toggle span {
  width: 18px; height: 1px; background: currentColor; position: relative; display: block;
}
.menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle.active span { background: transparent; }
.menu-toggle.active span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle.active span::after { transform: translateY(-6px) rotate(-45deg); }

/* Tighten the nav just above its cutoff so 7 items + logo + CTA still fit on one line. */
@media (max-width: 1280px) {
  .nav-primary a { padding: 10px 8px; letter-spacing: 0.04em; }
}

@media (max-width: 1100px) {
  .nav-primary { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  z-index: 49;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 48px);
  color: var(--ink-1);
}
.mobile-menu a:hover { color: var(--gold-1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 50svh;
  display: flex;
  align-items: flex-end;
  padding-top: 250px;
  padding-bottom: clamp(30px, 5vh, 60px);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 720px) {
  .hero { padding-top: 170px; }
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--bg-1);
}
.hero__bg .slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__bg .slide.active { opacity: 1; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,10,8,0.55) 0%, rgba(11,10,8,0.30) 35%, rgba(11,10,8,0.92) 100%),
    radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(11,10,8,0.5) 100%);
}
.hero__inner { position: relative; width: 100%; }
.hero__eyebrow { margin-bottom: 32px; }
.hero h1 {
  font-size: clamp(24px, 4.5vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 300;
  max-width: 22ch;
}
.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
}
.hero h1 .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero h1 .word:nth-child(1) > span { animation-delay: 0.1s; }
.hero h1 .word:nth-child(2) > span { animation-delay: 0.18s; }
.hero h1 .word:nth-child(3) > span { animation-delay: 0.26s; }
.hero h1 .word:nth-child(4) > span { animation-delay: 0.34s; }
@keyframes rise { to { transform: translateY(0); } }
.hero h1 .rotator {
  display: inline-block;
  position: relative;
  font-style: italic;
  color: var(--gold-1);
  min-width: 6ch;
}
.hero h1 .rotator span {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.hero h1 .rotator span.in { opacity: 1; transform: translateY(0); position: relative; }
.hero h1 .rotator span.out { opacity: 0; transform: translateY(-40%); }

.hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 14px;
  font-size: 0.85em;
}
.hero__sub p { max-width: 56ch; font-size: 13px; line-height: 1.5; }
.hero__eyebrow { margin-bottom: 16px !important; font-size: 11px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__corners {
  position: absolute;
  inset: clamp(120px, 14vh, 160px) var(--gutter) clamp(28px, 4vh, 48px);
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__corners .right { text-align: right; }

.hero__indicators {
  position: absolute;
  bottom: 36px;
  left: var(--gutter);
  display: flex;
  gap: 10px;
  z-index: 2;
}
.hero__indicators button {
  width: 36px; height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hero__indicators button::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold-1);
  transform: scaleX(0); transform-origin: left;
}
.hero__indicators button.active::after {
  animation: indicator 6s linear forwards;
}
@keyframes indicator {
  to { transform: scaleX(1); }
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__scroll .line {
  width: 60px; height: 1px; background: var(--line); position: relative; overflow: hidden;
}
.hero__scroll .line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold-1);
  transform: translateX(-100%);
  animation: scroll-cue 2.4s ease-in-out infinite;
}
@keyframes scroll-cue {
  to { transform: translateX(100%); }
}

/* ---------- Marquee (brand strip / quote) ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--bg-1);
  padding: 28px 0;
  gap: 80px;
}
.marquee__track {
  display: flex;
  gap: 80px;
  animation: marquee 32s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--ink-3);
  align-items: center;
}
.marquee__track .star { color: var(--gold-2); font-style: normal; font-size: 0.6em; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- About preview ---------- */
.about {
  position: relative;
  background: var(--bg-1);
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }

.about__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-l);
  overflow: hidden;
  isolation: isolate;
}
.about__visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.about__visual:hover img { transform: scale(1.04); }
.about__visual::after {
  content: "EST. 2018";
  position: absolute;
  left: 24px; bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-1);
  background: rgba(11,10,8,0.55);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.about__copy h2 { margin: 24px 0 28px; }
.about__copy p + p { margin-top: 18px; }
.about__signature {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-1);
}
.about__signature .line {
  width: 40px; height: 1px; background: var(--gold-2);
}

/* ---------- Stats ---------- */
.stats {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  padding: clamp(56px, 8vw, 100px) 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 28px 32px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
@media (max-width: 900px) {
  .stat { border-left: 0; border-top: 1px solid var(--line); padding: 24px var(--gutter); }
  .stat:first-child, .stat:nth-child(2) { border-top: 0; }
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 300;
  color: var(--gold-1);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stat__num small { font-size: 0.5em; color: var(--gold-2); }
.stat__label {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Services ---------- */
.services { background: var(--bg-0); }
.services__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 64px;
}
@media (max-width: 900px) { .services__head { grid-template-columns: 1fr; } }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}
@media (max-width: 900px) { .services__grid { grid-template-columns: 1fr; } }

.service {
  background: var(--bg-1);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.5s;
}
.service::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 80% at 0% 0%, rgba(217,196,145,0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
}
.service:hover { background: var(--bg-2); }
.service:hover::before { opacity: 1; }
.service__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold-2);
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
}
.service h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  margin: 0 0 16px;
  color: var(--ink-1);
}
.service p { color: var(--ink-3); font-size: 15px; }
.service__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--gold-3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 36px;
  color: var(--gold-1);
  transition: transform 0.5s var(--ease-out), border-color 0.4s, background 0.4s;
}
.service:hover .service__icon {
  transform: rotate(-12deg) scale(1.1);
  border-color: var(--gold-1);
  background: rgba(217,196,145,0.06);
}

/* ---------- Process ---------- */
.process {
  background: var(--bg-1);
  position: relative;
  overflow: hidden;
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/about-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  filter: grayscale(100%);
  pointer-events: none;
}
.process__head {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}
.process__head .eyebrow { justify-content: center; display: inline-flex; }
.process__head h2 { margin-top: 24px; }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) { .process__steps { grid-template-columns: 1fr; } }
.step {
  background: var(--bg-1);
  padding: 48px 32px;
  position: relative;
  transition: background 0.5s;
}
.step:hover { background: var(--bg-2); }
.step__index {
  font-family: var(--font-display);
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-2);
  line-height: 1;
  margin-bottom: 28px;
}
.step h4 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink-1);
  margin: 0 0 14px;
}
.step p { font-size: 14px; color: var(--ink-3); }

/* ---------- Featured projects ---------- */
.projects { background: var(--bg-0); }
.projects__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 64px;
}
.projects__grid {
  display: grid;
  /* 4 across ≈ 45% of the old 2-across tile width (50% up from the 6-across
     step). Gutter stays tight so the tiles, not the gaps, carry the page. */
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1280px) { .projects__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .projects__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 480px)  { .projects__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.project {
  position: relative;
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-1);
  aspect-ratio: 4/5;
}
.project.tall { aspect-ratio: 4/5; }
.project.wide { aspect-ratio: 4/3; }
.project img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.project::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,10,8,0.0) 35%, rgba(11,10,8,0.85) 100%);
}
.project:hover img { transform: scale(1.04); }
.project__meta {
  position: absolute;
  left: 32px; right: 32px; bottom: 32px;
  z-index: 2;
  color: var(--ink-1);
}
.project__meta .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold-1);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.project__meta h3 {
  font-size: clamp(24px, 3vw, 36px);
  margin: 0;
  color: var(--ink-1);
}
.project__meta .arrow {
  display: inline-block;
  margin-top: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
}
.project:hover .arrow { transform: translateX(8px); background: var(--gold-1); color: var(--bg-0); border-color: var(--gold-1); }

/* --- Small-tile scale ---------------------------------------------------
   The caption was sized for a ~670px tile; at ~336px the old 32px inset and
   clamp(24px,3vw,36px) heading overflow the card. Everything below is the
   same design stepped down, not a different one. */
.project__meta { left: 18px; right: 18px; bottom: 18px; }
.project__meta .tag {
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.project__meta h3 { font-size: clamp(15px, 1.5vw, 21px); line-height: 1.22; }
/* The centred play badge already signals "clickable" — the arrow puck is
   redundant at this size and eats a third of the card. */
.project__meta .arrow { display: none; }

.project.has-video::before {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  background-size: 16px 17px;
}
.project__close { top: 9px; right: 9px; width: 30px; height: 30px; font-size: 19px; }
.project__sound { top: 9px; right: 9px; padding: 5px 10px; font-size: 9px; letter-spacing: 0.12em; }

/* Video tiles — a play badge so the tile reads as a clip, not a page link.
   Only tiles carrying .has-video (i.e. a real YouTube href) get it. */
.project.has-video::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(11,10,8,0.34) no-repeat center/22px 24px;
  /* white play triangle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M3 2l19 11L3 24z' fill='%23fff'/%3E%3C/svg%3E");
  backdrop-filter: blur(2px);
  transition: transform 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s;
  pointer-events: none;
}
.project.has-video:hover::before {
  transform: scale(1.08);
  border-color: var(--gold-1);
  background-color: rgba(217,196,145,0.30);
}
/* A tile with no clip yet shouldn't pretend to be clickable. */
.project[href="#"] { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .project.has-video::before { transition: none; }
}

/* Inline player — fills the tile once the visitor clicks play. */
.project__player {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 4;
  border: 0;
  background: #000;
}
/* Vertical clips (YouTube Shorts, 9:16) in a 4:5 tile. Fitted rather than
   cropped — filling the tile would cut ~30% off the top and bottom, which is
   where Shorts usually carry their text. The slim margins fall on the tile's
   own dark background, so they read as framing, not as letterboxing. */
.project[data-vertical] .project__player {
  left: 50%;
  right: auto;
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
}

/* While playing, hide the poster overlays so nothing sits over the video. */
.project.is-playing::before,
.project.is-playing::after { opacity: 0; pointer-events: none; }
.project.is-playing img { opacity: 0; }
.project.is-playing:hover img { transform: none; }
/* Full playback hides the caption; the silent hover preview keeps it,
   so the tile still reads as "Aparna Serene Park" while it previews. */
.project.is-playing:not(.is-preview) .project__meta { opacity: 0; pointer-events: none; }
.project.is-preview::after { opacity: 1; }
.project.is-preview .project__meta { z-index: 5; }

/* "Click for sound" — shown only during the muted hover preview. */
.project__sound {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(11,10,8,0.66);
  color: var(--ink-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.project__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(11,10,8,0.72);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s;
}
.project__close:hover { background: var(--gold-1); color: var(--bg-0); border-color: var(--gold-1); }

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--bg-1);
  position: relative;
}
.testimonial {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.4;
  color: var(--ink-1);
  margin: 0 0 36px;
}
.testimonial__quote::before {
  content: "“";
  display: block;
  font-size: clamp(80px, 10vw, 140px);
  color: var(--gold-2);
  line-height: 0.6;
  margin-bottom: 24px;
}
.testimonial__author {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-1);
}
.testimonial__role {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}
.testimonials__nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 56px;
}
.testimonials__nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-1);
  transition: all 0.3s;
}
.testimonials__nav button:hover { border-color: var(--gold-2); color: var(--gold-1); }

/* ---------- CTA Banner ---------- */
.cta-banner {
  position: relative;
  padding: clamp(80px, 14vw, 200px) 0;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("../img/cta-bg.jpg") center/cover;
  filter: grayscale(70%) brightness(0.45);
}
.cta-banner::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,10,8,0.7), rgba(11,10,8,0.95));
}
.cta-banner h2 { margin-bottom: 28px; }
.cta-banner .lede { margin: 0 auto 40px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-1);
  padding: clamp(60px, 8vw, 100px) 0 32px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand p { color: var(--ink-3); font-size: 14px; max-width: 36ch; }
.footer-brand .brand img { height: 40px; }

.footer-col h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin: 0 0 24px;
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col li { font-size: 14px; color: var(--ink-2); transition: color 0.3s; }
.footer-col a:hover { color: var(--gold-1); }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 12px;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.socials a:hover { border-color: var(--gold-2); color: var(--gold-1); background: rgba(217,196,145,0.06); }

/* ---------- Floating WA ---------- */
.fab-wa {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 40;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.35);
  transition: transform 0.4s var(--ease-out);
}
.fab-wa:hover { transform: scale(1.1); }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-x {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-x.in-view { opacity: 1; transform: translateX(0); }
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-out);
}
.reveal-clip.in-view { clip-path: inset(0 0 0 0); }

/* ---------- Skip offscreen work (perf) ---------- */
.about, .stats, .services, .process, .projects, .testimonials, .cta-banner, .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.flex { display: flex; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============== Contact form (inside the contact modal) ============== */
.contact-form {
  margin: 0;
  max-width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.contact-form .form-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.contact-form .form-row .form-field { margin-bottom: 0; }
.contact-form label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 7px;
}
.contact-form .req { color: var(--gold-2); margin-left: 2px; }
.contact-form .opt { color: rgba(255,255,255,0.4); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #f4ead2;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(217, 196, 145, 0.22);
  border-radius: 8px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
}
.contact-form textarea { resize: vertical; min-height: 90px; }
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23d9c491' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.contact-form select option { background: #1a1814; color: #f4ead2; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.3); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gold-2);
  background: rgba(0, 0, 0, 0.55);
}
.contact-form .has-error { border-color: #d97a6c !important; }
.contact-form .field-error {
  margin-top: 5px;
  font-size: 12px;
  color: #e89c91;
  letter-spacing: 0.02em;
}
.contact-form .hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form .form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: flex-end;
}
.contact-form .form-status {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.02em;
  min-height: 18px;
}
.contact-form .form-status.ok { color: #b6e5b5; }
.contact-form .form-status.err { color: #e89c91; }
.contact-form button[type="submit"]:disabled { opacity: 0.65; cursor: progress; }

@media (max-width: 640px) {
  .contact-form { padding: 20px; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form .form-row .form-field { margin-bottom: 14px; }
  .contact-form .form-actions { justify-content: stretch; }
  .contact-form .form-actions .btn { flex: 1; text-align: center; }
}

/* ============== Contact modal ============== */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.contact-modal.is-open { display: flex; animation: cmFadeIn 0.25s ease both; }
.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, #161310 0%, #0d0b09 100%);
  border: 1px solid rgba(217, 196, 145, 0.18);
  border-radius: 16px;
  padding: 32px 32px 28px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(217,196,145,0.04);
  animation: cmRise 0.35s var(--ease-out) both;
}
.contact-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(217, 196, 145, 0.2);
  border-radius: 50%;
  color: var(--gold-1);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.contact-modal__close:hover { background: rgba(217, 196, 145, 0.08); border-color: var(--gold-2); }
.contact-modal__header { text-align: center; margin-bottom: 22px; padding-right: 36px; }
.contact-modal__header .eyebrow { color: var(--gold-1); }
.contact-modal__header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.18;
  margin: 8px 0 6px;
  color: #f4ead2;
}
.contact-modal__header h3 .italic { color: var(--gold-1); font-style: italic; }
.contact-modal__header p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
  letter-spacing: 0.01em;
}

@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmRise   { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .contact-modal { padding: 0; align-items: stretch; }
  .contact-modal__panel {
    max-width: 100%;
    border-radius: 0;
    min-height: 100vh;
    max-height: 100vh;
    padding: 24px 18px 28px;
    border: 0;
  }
  .contact-modal__header { margin-bottom: 18px; padding-right: 40px; }
}

/* ============== About: 4-pillar grid (under main about block) ============== */
.about__pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(48px, 6vw, 80px);
}
.pillar {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px 22px;
  transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease-out);
}
.pillar:hover { background: var(--bg-2); border-color: rgba(217,196,145,0.28); transform: translateY(-3px); }
.pillar__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-1);
  margin-bottom: 14px;
}
.pillar h4 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-1);
  margin: 0 0 8px;
  font-weight: 400;
}
.pillar p { font-size: 14px; color: var(--ink-3); margin: 0; line-height: 1.6; }
@media (max-width: 980px) { .about__pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .about__pillars { grid-template-columns: 1fr; } }

/* ============== Why Choose ============== */
.why-choose { background: var(--bg-1); }
.why-choose__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.why-choose__head .eyebrow { justify-content: center; }
.why-choose__head h2 { margin: 14px 0 0; }
.why-choose__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}
.why-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 32px 26px;
  transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease-out);
}
.why-card:hover { background: var(--bg-3); border-color: rgba(217,196,145,0.3); transform: translateY(-4px); }
.why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(217,196,145,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-1);
  margin-bottom: 18px;
  background: rgba(217,196,145,0.04);
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink-1);
  margin: 0 0 10px;
}
.why-card p { font-size: 14px; color: var(--ink-3); margin: 0; line-height: 1.65; }
@media (max-width: 980px) { .why-choose__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .why-choose__grid { grid-template-columns: 1fr; } }

/* ============== Service Departments (under services grid) ============== */
.departments { margin-top: clamp(60px, 7vw, 100px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.departments__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.departments__head .eyebrow { justify-content: center; }
.departments__head h3 { font-size: clamp(26px, 3.4vw, 38px); margin: 12px 0 8px; }
.departments__head p { font-size: 14px; }
.departments__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.dept {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px 22px;
}
.dept__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,196,145,0.06);
  color: var(--gold-1);
  margin-bottom: 14px;
}
.dept h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-1);
  margin: 0 0 12px;
}
.dept ul { font-size: 13px; color: var(--ink-2); }
.dept li {
  position: relative;
  padding: 5px 0 5px 14px;
  border-bottom: 1px dashed rgba(217,196,145,0.08);
}
.dept li:last-child { border-bottom: 0; }
.dept li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 5px; height: 5px;
  background: var(--gold-2);
  border-radius: 50%;
}
@media (max-width: 980px) { .departments__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .departments__grid { grid-template-columns: 1fr; } }

/* ============== Process: support 6 steps ============== */
.process__steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .process__steps--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process__steps--6 { grid-template-columns: 1fr; } }
.process__head .lede { margin-top: 16px; max-width: 60ch; }

/* ============== Trusted-at (under projects) ============== */
.trusted { margin-top: clamp(60px, 7vw, 100px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.trusted__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.trusted__head .eyebrow { justify-content: center; }
.trusted__head h3 { font-size: clamp(26px, 3.4vw, 40px); margin: 12px 0 0; }
.trusted__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
.trusted__col {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px 26px;
}
.trusted__col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-1);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.trusted__list { font-family: var(--font-display); font-size: 18px; color: var(--ink-1); }
.trusted__list li { padding: 7px 0; border-bottom: 1px dashed rgba(217,196,145,0.08); }
.trusted__list li:last-child { border-bottom: 0; }
@media (max-width: 880px) { .trusted__cols { grid-template-columns: 1fr; } }

/* ============== Team ============== */
.team { background: var(--bg-1); }
.team__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.team__head .eyebrow { justify-content: center; }
.team__head h2 { margin: 14px 0 14px; }
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}
.role {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 30px 26px;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}
.role:hover { transform: translateY(-4px); border-color: rgba(217,196,145,0.3); }
.role__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(217,196,145,0.08);
  border: 1px solid rgba(217,196,145,0.22);
  color: var(--gold-1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.role h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-1);
  margin: 0 0 10px;
}
.role p { font-size: 14px; color: var(--ink-3); margin: 0; line-height: 1.65; }
@media (max-width: 980px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .team__grid { grid-template-columns: 1fr; } }

/* ============== Brand strip ============== */
.brand-strip { padding: clamp(60px, 8vw, 100px) 0; background: var(--bg-0); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brand-strip__head { text-align: center; margin-bottom: 36px; }
.brand-strip__head .eyebrow { justify-content: center; }
.brand-strip__head h3 { font-size: clamp(22px, 2.8vw, 32px); margin: 12px 0 0; font-weight: 400; }
.brand-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  max-width: 920px;
  margin: 0 auto;
}
.brand-strip__list li {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-2);
  padding: 8px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.brand-strip__list li:hover { color: var(--gold-1); border-color: var(--gold-2); background: rgba(217,196,145,0.04); }
@media (max-width: 540px) { .brand-strip__list li { font-size: 18px; padding: 6px 16px; } }

/* ============== Footer: contact cards ============== */
.footer-col--contact .contact-card {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(217,196,145,0.08);
}
.footer-col--contact .contact-card:last-child { border-bottom: 0; }
.contact-card__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 6px;
}
.footer-col--contact .contact-card a {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  padding: 2px 0;
  transition: color 0.25s;
}
.footer-col--contact .contact-card a:hover { color: var(--gold-1); }
.footer-col--contact .contact-card--email a { font-size: 13px; }
.btn.btn-sm { padding: 10px 18px; font-size: 11px; }

/* Footer grid: now 5 columns (brand + 4 cols) */
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr 0.9fr 0.9fr 1.2fr 0.9fr; }
}

/* ============== Videos section ============== */
.videos { background: var(--bg-1); }
.videos__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.videos__head .eyebrow { justify-content: center; }
.videos__head h2 { margin: 14px 0 12px; }
.videos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.videos__empty {
  text-align: center;
  color: var(--ink-3);
  padding: 32px 16px;
  font-size: 14px;
}
.videos__empty a { color: var(--gold-1); border-bottom: 1px solid currentColor; }

.vcard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
  display: flex;
  flex-direction: column;
}
.vcard:hover { transform: translateY(-4px); border-color: rgba(217,196,145,0.3); }
.vcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: block;
  overflow: hidden;
}
.vcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out), opacity 0.3s;
}
.vcard__media:hover img { transform: scale(1.05); opacity: 0.85; }
.vcard__noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(217,196,145,0.4); font-size: 28px;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}
.vcard__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(217,196,145,0.92);
  color: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: transform 0.3s, background 0.3s;
  pointer-events: none;
}
.vcard__media:hover .vcard__play { transform: translate(-50%,-50%) scale(1.08); background: var(--gold-1); }
.vcard__body { padding: 20px 22px 22px; }
.vcard__body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-1);
  margin: 0 0 6px;
}
.vcard__body p {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 980px) { .videos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .videos__grid { grid-template-columns: 1fr; } }

/* Video lightbox */
.vbox {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vbox.is-open { display: flex; animation: cmFadeIn 0.25s ease both; }
.vbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); }
.vbox__panel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
  animation: cmRise 0.35s var(--ease-out) both;
}
.vbox__close {
  position: absolute;
  top: -42px; right: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.vbox__close:hover { background: rgba(255,255,255,0.1); }
.vbox__frame { width: 100%; height: 100%; }
.vbox__frame iframe, .vbox__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }

@media (max-width: 720px) {
  .vbox { padding: 12px; }
  .vbox__close { top: -38px; }
}

/* ============== Testimonials: clickable cards (linking to verified reviews) ============== */
a.testimonial {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 28px 32px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease-out);
  position: relative;
  cursor: pointer;
}
a.testimonial:hover {
  border-color: rgba(217, 196, 145, 0.25);
  background: rgba(217, 196, 145, 0.03);
  transform: translateY(-3px);
}
a.testimonial:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 4px;
}

.testimonial__stars {
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--gold-1);
  margin-bottom: 14px;
  text-shadow: 0 0 1px rgba(184, 152, 89, 0.4);
}
.testimonial__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-1);
  opacity: 0.75;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.testimonial__cta .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
a.testimonial:hover .testimonial__cta { opacity: 1; }
a.testimonial:hover .testimonial__cta .arrow { transform: translate(3px, -3px); }

.testimonials__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  text-align: center;
}
.testimonials__footnote {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  a.testimonial { padding: 22px 18px 20px; }
}

/* Footer "Visit" — address links out to the Google Business listing. */
.visit-map {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: inherit;
  transition: color 0.3s;
}
.visit-map svg { flex: 0 0 auto; margin-top: 4px; color: var(--gold-1); }
.visit-map:hover { color: var(--gold-1); }

/* ---------- Phone header ----------
   Below 720px the brand + call icon + "Free Consultation" + hamburger no longer
   fit: the row overflowed to 563px inside a 390px screen and, because the body
   clips horizontally, the HAMBURGER WAS PUSHED OFF-SCREEN — the menu could not
   be opened at all. The text CTA is the widest item and is the one to drop:
   the drawer, the hero buttons and the WhatsApp bubble all still offer it. */
@media (max-width: 720px) {
  .nav-cta .btn-primary { display: none; }
  .nav-cta { gap: 10px; }
  .site-header { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .site-header.scrolled { padding-left: 16px; padding-right: 16px; }
}

/* The drawer's display type (clamp(28px,6vw,48px)) is meant for its nav links.
   The CTA button inherited it too and, being nowrap, blew out to 484px wide
   inside a 390px screen. Put the button back on button scale. */
.mobile-menu .btn {
  font-family: var(--font-sans);
  font-size: 13px;
  max-width: calc(100% - 40px);
}