/* ==========================================================================
   Main landing page (repo root) — page-specific styles.
   Everything reusable lives in /assets/css/main.css. This file only holds
   overrides and one-off layout needs specific to this page.
   Destination for the Meta ad campaign running Bespoke's brand hero film.
   ========================================================================== */

/* Anchor offset so fixed header doesn't cover section tops on jump-links */
section[id] { scroll-margin-top: 90px; }

/* ==========================================================================
   Scroll-scrubbed hero: framing-to-finished build timelapse.
   The section is tall (scrub runway); .hero-sticky pins the viewport.
   The framing layer sits on top and fades out as scroll progresses,
   revealing the finished home underneath. home.js drives opacity/scale.
   ========================================================================== */
#hero.hero-scrub {
  display: block;
  min-height: 230svh;
  overflow: visible; /* .hero sets overflow:hidden, which kills position:sticky */
}
#hero .hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
#hero .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  will-change: opacity, transform;
}
#hero .hero-img-framing { z-index: 1; }
#hero .hero-media::after { z-index: 2; }
#hero .hero-content, #hero .hero-scroll-cue { z-index: 3; }
#hero .hero-content { position: relative; }
#hero .hero-scroll-cue { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  #hero.hero-scrub { min-height: 100svh; }
  #hero .hero-img-framing { display: none; }
}

/* ==========================================================================
   Meet the builders — video section + motto pull-quote
   ========================================================================== */
#meet .meet-intro {
  max-width: 760px;
  margin: 0 auto 20px;
}
#meet .meet-intro p { font-size: 17px; }

.motto {
  max-width: 720px;
  margin: 36px auto 44px;
  text-align: center;
  padding: 28px 20px;
  border-top: 1px solid rgba(221,153,51,0.35);
  border-bottom: 1px solid rgba(221,153,51,0.35);
}
.motto .motto-latin {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 10px;
}
.motto .motto-en {
  display: block;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--clr-body-text-onlight);
}

/* Bespoke hero film (Wistia) */
.video-frame {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(27, 27, 27, 0.18);
  background: var(--clr-black);
}

/* ==========================================================================
   What We Build — offering cards
   ========================================================================== */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .offer-grid { grid-template-columns: 1fr; }
}
.offer-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(221,153,51,0.18);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.offer-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.offer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.offer-card:hover .offer-card-media img { transform: scale(1.05); }
.offer-card-media .offer-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  letter-spacing: 1px;
}
.offer-card-body { padding: 26px 28px 30px; }
.offer-card-body h3 {
  font-size: 17px;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  color: var(--clr-white);
}
.offer-card-body p { font-size: 14.5px; margin: 0; color: var(--clr-body-text-ondark); }

/* Text-only variant, no photo match yet — gold top rule instead of an icon */
.offer-card--text {
  border-top: 2px solid var(--clr-gold);
  justify-content: center;
}
.offer-card--text .offer-card-body { padding-top: 40px; padding-bottom: 40px; }

/* ==========================================================================
   The Bespoke Process — four steps
   ========================================================================== */
.process-steps.step-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
@media (max-width: 1100px) {
  .process-steps.step-list { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .process-steps.step-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Portfolio strip
   ========================================================================== */
#portfolio .gallery-grid { margin-top: 44px; }
#portfolio .gallery-grid a { display: block; cursor: zoom-in; }

/* ==========================================================================
   Why Bespoke
   ========================================================================== */
.watermark-house {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .watermark-house { display: none; }
}
.watermark-host { position: relative; overflow: hidden; }
.watermark-host .container { position: relative; z-index: 1; }

#why-bespoke .benefit-list { max-width: 640px; margin: 40px auto 0; }
#why-bespoke .value-row { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   FAQ section sits on dark, reuse .section-dark; center the head
   ========================================================================== */
#faq .section-head p { color: var(--clr-body-text-ondark); }

/* Lead form section */
#lead-form .section-head { margin-bottom: 40px; }
#lead-form .section-head p { color: var(--clr-body-text-ondark); }

/* Sticky mini bar CTA sizing on small screens */
@media (max-width: 420px) {
  .header-actions .btn { padding: 11px 18px; font-size: 13px; }
}