/* =========================================================
   SENTRY SHADING — styles.css
   Architectural / editorial. Black + cream + single gold accent.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --gold:        #CE9F41;
  --gold-dark:   #A47F2E;
  --black:       #000000;
  --off-black:   #1A1B1C;
  --cream:       #F5F0E8;
  --white:       #FFFFFF;
  --grey-light:  #F2F2F2;
  --grey-mid:    #D4D4D4;
  --grey-text:   #3A3A3A;
  --grey-label:  #A0A0A0;
  --hairline:    rgba(0,0,0,0.08);
  --hairline-on-dark: rgba(255,255,255,0.10);

  --text-hero:    clamp(3rem, 7vw, 5.75rem);
  --text-h2:      clamp(1.75rem, 3.4vw, 2.5rem);
  --text-section: clamp(1.35rem, 2.2vw, 1.625rem);
  --text-sub:     0.95rem;
  --text-body:    0.9375rem;
  --text-small:   0.8125rem;
  --text-micro:   0.75rem;

  --max-width:    1320px;
  --gutter:       clamp(1.5rem, 5vw, 5rem);
  --section-v:    clamp(4.5rem, 8vw, 7.5rem);
  --card-gap:     1.5rem;
  --radius:       2px;

  --nav-h:        60px;   /* single row: logo | links | stacked-CTAs, all bottom-aligned */
  --nav-h-mobile: 136px;  /* 3-row mobile: logo / links / CTAs stacked */

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--grey-text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

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

/* ---------- Brand mark (real PNG, tightly cropped) ---------- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.brand-mark__img { height: 43px; width: auto; display: block; }
.brand-mark__img--stack { height: 120px; }
@media (max-width: 720px) {
  .brand-mark__img { height: 36px; }
  .brand-mark__img--stack { height: 96px; }
}
@media (max-width: 480px) {
  .brand-mark__img--stack { height: 72px; }
}

/* ---------- Navigation (2-row layout: logo+CTAs top, nav links bottom) ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: var(--nav-h);
  background: var(--black);
  z-index: 100;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--hairline-on-dark);
}
.nav__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.2rem clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo links cta";
  align-items: end;
  column-gap: 1.75rem;
}
/* The links and CTA stack sit on the baseline (align-items:end on .nav__inner);
   the logo is a fixed-height mark, so it centres in the bar instead. */
.nav__logo { grid-area: logo; color: var(--white); flex-shrink: 0; align-self: center; }
.nav__links {
  grid-area: links;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nav__link {
  position: relative;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 0;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--gold); }
.nav__link.is-active::after { display: none; }

.nav__cta {
  grid-area: cta;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  flex-shrink: 0;
}
.nav__cta .btn {
  font-size: 0.54rem;
  padding: 0.3rem 0.85rem;
  letter-spacing: 0.12em;
  line-height: 1;
  border-width: 1px;
  min-width: 165px;
  text-align: center;
}
.nav__cta-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.9;
  transition: opacity 0.2s var(--ease);
}
.nav__cta-link:hover { opacity: 1; }

/* Gated client portal — carries .btn.btn--gold in the markup so it picks up
   every button rule, including the three nav breakpoint overrides. Adding type
   or padding here would fall out of sync with the CTA at some widths, so this
   block only handles the lock icon. */
.nav__portal { gap: 0.45rem; }
.nav__portal svg {
  width: 10px;
  height: 10px;
  opacity: 0.9;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.btn--gold       { background: var(--gold); color: var(--black); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn--outline-light:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--outline-dark  { background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline-dark:hover { background: var(--black); color: var(--white); }
.btn--outline-gold  { background: transparent; color: var(--white); border-color: var(--gold); }
.btn--outline-gold:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.btn--lg { padding: 1.05rem 1.75rem; font-size: 0.82rem; }
.btn--block { width: 100%; padding: 1.15rem; font-size: 0.85rem; }

.nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--black);
  border-top: 1px solid var(--hairline-on-dark);
  padding: 0.5rem 1.25rem 2rem;
  display: none;
  flex-direction: column;
  z-index: 99;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile .nav__link {
  display: block;
  padding: 18px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--hairline-on-dark);
}
.nav__mobile .nav__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Hamburger is no longer needed — 2-row nav always shows everything */
.nav__toggle, .nav__mobile { display: none !important; }

/* ---------- Resources dropdown (audience split: Architects / Installers) ---------- */
.nav__drop { position: relative; display: flex; align-items: flex-end; }
.nav__link--drop {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; cursor: pointer;
}
.nav__link--drop svg { width: 10px; height: 10px; transition: transform 0.2s var(--ease); }
.nav__drop.is-open .nav__link--drop svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 260px;
  background: var(--black);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 120;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.nav__drop.is-open .nav__menu,
.nav__drop:hover .nav__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__menu-link {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  transition: background-color 0.18s var(--ease);
}
.nav__menu-link strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white);
}
.nav__menu-link span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.55);
}
.nav__menu-link:hover { background: rgba(255,255,255,0.07); }
.nav__menu-link:hover strong,
.nav__menu-link.is-active strong { color: var(--gold); }

/* Progressive shrink: tighten link spacing + CTA width at mid widths so single-row nav stays balanced */
@media (max-width: 1280px) {
  .nav__links { gap: 1.1rem; }
  .nav__link { font-size: 0.66rem; letter-spacing: 0.09em; }
  .nav__cta .btn { min-width: 160px; font-size: 0.55rem; padding: 0.3rem 0.7rem; }
}
@media (max-width: 1080px) {
  .nav__links { gap: 0.85rem; }
  .nav__link { font-size: 0.62rem; letter-spacing: 0.07em; }
  .nav__cta .btn { min-width: 140px; }
}

/* Narrow mobile: stack to 3 rows (logo / links / CTAs) so nothing crowds */
@media (max-width: 560px) {
  .nav__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "links"
      "cta";
    column-gap: 0;
    row-gap: 0.4rem;
    padding: 0.6rem 1rem;
    justify-items: center;
  }
  .nav__logo { justify-self: center; }
  .nav__cta { justify-self: center; padding-bottom: 0.5rem; }
  .nav__links { flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; padding: 0.55rem 0; }
  .nav__link { font-size: 0.62rem; letter-spacing: 0.08em; }
  .nav__cta { flex-direction: column; width: 100%; max-width: 260px; }
  .nav__cta .btn { min-width: 0; width: 100%; padding: 0.5rem 1rem; }
  /* Absolute-positioned dropdown would overflow a 320px screen — pin it to the
     viewport edges instead of centring it on its (tiny) trigger. */
  .nav__menu {
    position: fixed;
    left: 1rem; right: 1rem;
    transform: none;
    min-width: 0;
  }
  .nav__drop.is-open .nav__menu,
  .nav__drop:hover .nav__menu { transform: none; }
}

.page-spacer { height: var(--nav-h); }
@media (max-width: 560px) { .page-spacer { height: var(--nav-h-mobile); } }

/* ---------- Hero (interior pages) ---------- */
.hero {
  position: relative;
  height: clamp(440px, 60vh, 580px);
  overflow: hidden;
  background: var(--black);
  margin-top: var(--nav-h);
}
@media (max-width: 920px) { .hero { margin-top: var(--nav-h-mobile); height: 420px; } }

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.hero.is-loaded .hero__bg { transform: scale(1); }

/* All hero backgrounds — slow Ken Burns motion. Subtle vertical pan + zoom
   suggests shades drifting up and down over the windows without needing
   actual frame animation. Applied to every hero (home, shading-solutions,
   innovations, projects, about, resources) for cohesive site feel. */
.hero.is-loaded .hero__bg,
.hero__bg {
  animation: hero-ken-burns 24s ease-in-out infinite alternate;
  will-change: transform, background-position;
}
@keyframes hero-ken-burns {
  0%   { transform: scale(1.06); background-position: center 35%; }
  100% { transform: scale(1.10); background-position: center 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}
.hero__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  line-height: 0.95;
  max-width: 920px;
}
.hero__sub {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 1.25rem 0 0;
}
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}
/* Under a centred .sec-head the button row has to centre too, or it hangs off
   the left while the heading above it is centred. */
.btn-row--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* ---------- Hero (Home — full viewport) ---------- */
.hero--full {
  height: 100vh;
  min-height: 640px;
  margin-top: 0;
}
.hero--full .hero__content { padding-bottom: clamp(4rem, 10vh, 7rem); padding-top: var(--nav-h); }
.hero--full .hero__title { font-size: clamp(2.75rem, 6vw, 5rem); }

/* ---------- Sections ---------- */
section { padding: var(--section-v) 0; }
/* When two same-bg sections sit back-to-back, eliminate the double padding
   and let an internal section header create the rhythm instead. */
.bg-cream + .bg-cream { padding-top: 0; }
.bg-cream + .bg-cream > .container > .sec-head:first-child { margin-top: clamp(3rem, 5vw, 4.5rem); }
.bg-cream  { background: var(--cream); }
.bg-white  { background: var(--white); }
.bg-grey   { background: var(--grey-light); }
.bg-black  { background: var(--black); color: rgba(255,255,255,0.82); }
.bg-black p { color: rgba(255,255,255,0.78); }

/* ---------- Section heads ---------- */
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; }
/* Rhythm through a section head: eyebrow, headline, sub. Each step down in
   weight gets a little more air than the one above it, and the headline sits
   at 1.18 so a two-line uppercase heading breathes instead of stacking tight. */
.sec-head__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--text-section);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.3;
  margin: 0 0 0.85rem;
}
.sec-head__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--text-h2);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;      /* keeps the two lines close to even length */
}
.sec-head__sub {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: var(--grey-text);
  max-width: 620px;
  margin: 1.5rem auto 0;   /* auto so the constrained block centres with its text */
  line-height: 1.75;
  text-wrap: pretty;
}
.bg-black .sec-head__title { color: var(--white); }
.bg-black .sec-head__sub  { color: rgba(255,255,255,0.78); }

.eyebrow {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--text-h2);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.bg-black .h2 { color: var(--white); }

.body { font-family: 'Manrope', sans-serif; font-size: 0.95rem; line-height: 1.7; color: var(--grey-text); }
.bg-black .body { color: rgba(255,255,255,0.78); }

/* ---------- Generic grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Pillars (Home) ----------
   .pillar__num / __label / __body share the same numbered-column typography
   as .why-col (About) — declared together below so the two card patterns
   stay in sync; each keeps its own rule treatment (inline rule vs. top
   border) and card-specific sizing. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.pillar__rule { display: block; width: 36px; height: 1.5px; background: var(--gold); margin-bottom: 1.25rem; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; gap: 2.25rem; } }

/* ---------- System cards (Home) ---------- */
.sys-card { background: var(--white); display: flex; flex-direction: column; gap: 1.25rem; }
.sys-card__img {
  aspect-ratio: 4/3;
  background: var(--grey-light);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sys-card__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.08em;
}
.sys-card p { font-size: 0.9rem; line-height: 1.65; flex: 1; }
.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.link-gold:hover { color: var(--gold-dark); gap: 12px; }
.link-gold::after { content: '→'; font-size: 1em; }

/* ---------- Product card (mockup-true) ---------- */
.product-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.25s var(--ease);
}
.product-card:hover { transform: translateY(-3px); }
.product-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.product-card--link:hover .product-card__img { filter: drop-shadow(0 12px 18px rgba(0,0,0,0.12)); }
.product-card--link:hover .product-card__spec { color: var(--gold); gap: 10px; }
.product-card__spec {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-label);
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.product-card__img {
  aspect-ratio: 16/10;
  background-color: var(--cream);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  padding: 0;
}
.product-card__body { padding: 1rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.product-card__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.06em;
  line-height: 1.35;
}
.product-card__pn {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: var(--grey-label);
  letter-spacing: 0.06em;
}

/* ---------- Section-within-section (sub block) ---------- */
.sub-block { margin-bottom: clamp(6.5rem, 11vw, 9.5rem); }
.sub-block:last-child { margin-bottom: 0; }
.sub-block__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.12em;
  margin: 0;
  padding-bottom: 0.85rem;
  border-bottom: 1.5px solid var(--gold);
}
.bg-black .sub-block__label { color: var(--white); border-bottom-color: var(--hairline-on-dark); }

/* ---------- Manual options 3-wide grid (hardware-only window, landscape end-cap detail) ---------- */
.manual-grid {
  gap: 2rem 2.5rem !important;
}
.manual-grid .product-card__img {
  background-size: contain;
  background-position: center;
  background-color: transparent;
  aspect-ratio: 4/5;
  min-height: 280px;
  transition: transform 0.25s var(--ease);
}
.manual-grid--4up { gap: 1.75rem 1.5rem !important; align-items: start; margin-top: 0; }
.manual-grid--4up .product-card {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
  transition: transform 0.25s var(--ease);
}
.manual-grid--4up .product-card:hover { transform: translateY(-3px); }
/* Every tile is the same box on every row, and the fabric is cropped to the
   same bottom line, so the row reads as one continuous band. The source photos
   run 1.037–1.143 h/w; the box is set just under the shallowest of those so
   taller shots only ever lose fabric off the bottom, never get cropped at the
   sides. Hardware stays pinned to the top via object-position. */
.manual-grid--4up .product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.03;
  font-size: 0; /* kill inline-block whitespace */
}
.manual-grid--4up .product-card__photo-wrap {
  display: block;
  position: absolute;
  inset: 0;
  border-right: 1px solid var(--gold);
  transition: border-color 0.25s var(--ease);
  overflow: hidden;
}
.manual-grid--4up .product-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Motorized footer: description on top, icons row full-width below ---------- */
.motor-card__footer {
  display: block;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.motor-card__footer .motor-card__desc {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--grey-text, var(--black));
  max-width: 900px;
}
.motor-card__footer .innov-icons {
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  width: 100%;
}
.motor-card__footer .innov-icons__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Power-source badge (Style A: filled gold circle, top-left of frame) ---------- */
.power-badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 3;
}
.power-badge svg { width: 19px; height: 19px; }

/* One badge per section, beside the heading — it labels the whole row's power
   type, so repeating it on all four tiles was noise (and it landed wherever
   each photo's hardware happened to sit). */
.sub-block__row { display: inline-flex; align-items: center; gap: 0.6rem; }
.power-badge--inline {
  position: static;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  box-shadow: none;
}
.power-badge--inline svg { width: 14px; height: 14px; }
.manual-grid--4up .product-card__body {
  padding: 0.5rem 0 0;
  align-items: center;
  text-align: center;
  border-top: 0;
  margin-top: 0;
  gap: 0.25rem;
}
.manual-grid--4up .product-card__title {
  font-size: 0.82rem;
  line-height: 1.3;
  min-height: 2.6em;  /* reserves space for 2 lines so all card bodies align vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}
.manual-grid--4up .product-card__pn { font-size: 0.7rem; }
.manual-grid--4up .product-card__spec { justify-content: center; font-size: 0.66rem; }
@media (max-width: 1000px) {
  .grid-4.manual-grid--4up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid-4.manual-grid--4up { grid-template-columns: 1fr; }
}
.product-card--link:hover .manual-grid .product-card__img,
.manual-grid .product-card--link:hover .product-card__img { transform: translateY(-4px); }

/* ---------- Motorized card (catalog-exact, PDF page 5) ---------- */
.motor-grid { gap: 3rem 3rem !important; }
.motor-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 2rem 0 0;
  border-top: 1.5px solid var(--gold);
}
.motor-card__body { padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.motor-card__products { margin-top: 0.25rem; }
.motor-card__products .pn { color: var(--gold); font-weight: 600; letter-spacing: 0.04em; font-size: 0.78rem; }
.motor-card__pn-list li { margin-bottom: 0.2rem; }
.motor-card__icon-strip {
  width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0 0;
}
.motor-card__footnote {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  color: var(--grey-text);
  margin: 0.25rem 0 0;
  font-style: italic;
}

/* ---------- Architect Resources (catalog page 31) ---------- */
.architect {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.architect__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem;
  line-height: 1;
}
.architect__body {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--grey-text);
  margin: 0 0 2rem;
}
.architect__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.architect__drawings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.architect__drawing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--hairline);
  padding: 0.75rem;
  border-radius: 4px;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.architect__drawing:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.architect__drawing img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.6rem;
}
.architect__drawing-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  color: var(--black);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
@media (max-width: 980px) {
  .architect { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .architect__drawings { grid-template-columns: 1fr; gap: 1rem; }
}
.motor-card__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.08em;
  margin: 0;
}
.motor-card__label small {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.motor-card__desc { font-size: 0.9rem; line-height: 1.65; color: var(--grey-text); }
.motor-card__pn-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.motor-card__pn-list { font-family: 'Manrope', sans-serif; font-size: 0.78rem; color: var(--grey-text); line-height: 1.85; }

/* ---------- Innovation block (mockup-true: text+render left, photo right) ---------- */
.innov {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.innov--reverse .innov__text { order: 2; }
.innov--reverse .innov__media { order: 1; }
.innov__text { max-width: 560px; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.innov__media { min-width: 0; }
.innov__text .innov__h {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}
.innov__text > p { margin: 0; line-height: 1.7; color: var(--grey-text); font-size: 0.95rem; }
.innov__product {
  margin-top: 0.5rem;
  width: 100%;
  aspect-ratio: 16/7;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}
/* SentrySolar product image — 25% larger than the standard product slot */
#sentrysolar .innov__product {
  aspect-ratio: 16/7;
  background-size: contain;
  background-position: center;
  margin-top: 1rem;
  transform: scale(1.3);
  transform-origin: center;
}
.innov__product--transparent {
  background-color: transparent;
  background-size: 90% auto;
  background-position: center;
  border-radius: 0;
  overflow: visible;
}
.innov__product video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--grey-light);
}
.innov__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding: 0.7rem 1.1rem;
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 100%;
}
.innov__pill svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--gold); animation: slidePulse 1.6s var(--ease) infinite; }

.swiftset-arrows {
  position: absolute;
  right: 9%;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 72px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.45));
  animation: bracketBob 2.2s var(--ease) infinite;
}
.swiftset-arrows svg { width: 100%; height: 100%; color: var(--gold); }
@keyframes bracketBob {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 8px)); }
}

.innov__caption {
  position: absolute;
  right: 1rem;
  bottom: -2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.innov__caption svg { width: 14px; height: 14px; color: var(--gold); animation: slidePulse 1.6s var(--ease) infinite; }
@keyframes slidePulse {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

.innov__media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--grey-light);
  min-height: 480px;
  height: 100%;
}
.bg-black .innov__media { background-color: var(--off-black); }

@media (max-width: 880px) {
  .innov { grid-template-columns: 1fr; }
  .innov--reverse .innov__text { order: 1; }
  .innov--reverse .innov__media { order: 2; }
  .innov__media { width: 100%; height: auto; min-height: 0; aspect-ratio: 16/10; }
  /* The 1.3x scale bleeds past its own box on purpose (desktop "breaking the
     grid" effect) — on a single-column mobile layout that bleed just runs
     off the screen and causes horizontal scroll, so drop it here. */
  #sentrysolar .innov__product { transform: none; margin-top: 0.5rem; }
}

/* ---------- Innovation icon row (matches product guide pattern, always 5-in-a-row) ---------- */
.innov-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  width: 100%;
  justify-items: center;
}
/* Motor cards specifically — labels are longer than innovation page icons,
   so allow them to wrap and ensure no column wins the width race. */
.motor-card__icons.innov-icons {
  width: 100%;
}
.motor-card__icons .innov-icons__label {
  font-size: 0.66rem;
  line-height: 1.25;
}
.innov-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  list-style: none;
}
.innov-icons__label {
  /* 'anywhere' let the grid shrink a column below its longest word, which
     split 'customization' mid-word. 'break-word' keeps whole words intact
     and only breaks if a single word genuinely cannot fit. */
  overflow-wrap: break-word;
  hyphens: none;
}
/* Mobile: drop 5-icon row to 3 columns so 5 icons wrap as 3+2 without crushing */
@media (max-width: 540px) {
  .innov-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 0.5rem;
  }
  /* Motor-card override is forced to flex on desktop — switch back to grid on mobile */
  .motor-card__footer .innov-icons {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: initial !important;
    gap: 1.25rem 0.5rem !important;
  }
  .motor-card__footer .innov-icons__item { flex: initial; }
}
@media (max-width: 480px) {
  .innov-icons { gap: 1.1rem 0.4rem; }
  .innov-icons__bubble { width: 44px !important; height: 44px !important; }
  .innov-icons__bubble svg { width: 22px !important; height: 22px !important; }
  .innov-icons__label { font-size: 0.62rem; }
}
.innov-icons__bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EBE3D2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.55rem;
}
.bg-white .innov-icons__bubble { background: var(--cream); }
.innov-icons__bubble svg { width: 28px; height: 28px; color: var(--gold); }
.innov-icons__label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--black);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------- DuoTone: keeps the standard .innov 2-col top, adds a full-width scene below ---------- */
#duotone .innov { grid-template-columns: 1fr 1.5fr; }
#duotone .innov__media {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--cream);
  aspect-ratio: 16/10;
  min-height: 0;
  height: auto;
  align-self: center;
}
.duotone-scene {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  aspect-ratio: 16 / 9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--cream);
}

/* ---------- Innovation tag pills (Innovations intro) ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.tag {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--black);
  color: var(--black);
  background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.tag:hover { background: var(--black); color: var(--white); }
.bg-black .tag { border-color: rgba(255,255,255,0.45); color: var(--white); }
.bg-black .tag:hover { background: var(--white); color: var(--black); }
.tag.is-active { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ---------- Innovation teaser tiles (Home — 2x2) ---------- */
.innov-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 3rem;
}
.innov-tile { padding-top: 1.25rem; border-top: 1.5px solid var(--gold); }
.innov-tile__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: 0.04em;
  margin: 0 0 0.45rem;
}
.innov-tile__line { font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: rgba(255,255,255,0.72); line-height: 1.6; }
@media (max-width: 640px) { .innov-tiles { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Fabric cards (Home) ---------- */
.fabric-card {
  background: transparent;
  display: flex;
  flex-direction: column;
}
.fabric-card__swatch {
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center top;
  background-color: var(--cream);
}
.fabric-card__body { padding: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.fabric-card__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  background: var(--cream);
  color: var(--gold-dark);
  border-radius: 2px;
  width: fit-content;
}
.fabric-card p { font-size: 0.88rem; line-height: 1.6; color: var(--grey-text); }

/* ---------- Vista swatch tiles (Shading Solutions black fabric section) ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.swatch {
  position: relative;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-color: var(--off-black);
  display: flex;
  align-items: flex-end;
  padding: 1.1rem;
}
.swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5));
}
.swatch__label {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: 0.04em;
}
@media (max-width: 640px) { .swatch-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Story / timeline ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.story-photo {
  aspect-ratio: 4/5;
  background: var(--grey-light);
  background-size: cover;
  background-position: center;
}
.timeline-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
}
.timeline-row:last-of-type { border-bottom: 0; }
.timeline-row__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.15rem;
}
.timeline-row__body { font-size: 0.92rem; line-height: 1.7; color: var(--grey-text); }
.pull-quote {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  color: var(--black);
  border-left: 2px solid var(--gold);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2.25rem 0 0;
  letter-spacing: 0.01em;
}
@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 1rem 0; }
}

/* ---------- Why / Specifier column grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.why-col { padding-top: 1.25rem; border-top: 1.5px solid var(--gold); }
/* Same numbered-column label/body typography as .pillar (Home/Architect
   Resources) — shared here, sized per card. */
.pillar__label, .why-col__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem;
  line-height: 1.3;
}
.pillar__label { font-size: 1.05rem; }
.why-col__label { font-size: 0.95rem; }
.pillar__body, .why-col__body {
  font-family: 'Manrope', sans-serif;
  color: var(--grey-text);
  line-height: 1.7;
}
.pillar__body { font-size: 0.9rem; }
.why-col__body { font-size: 0.88rem; line-height: 1.65; }
.pillar__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  margin-bottom: 1.25rem;
}
.why-col__num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- Resource tiles ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.resource-tile {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 2.25rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.resource-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.resource-tile__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--gold);
  margin-bottom: 0.5rem;
  border-radius: 2px;
}
.resource-tile__icon svg { width: 22px; height: 22px; }
.resource-tile__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.resource-tile p { font-size: 0.88rem; line-height: 1.65; flex: 1; }
.resource-tile .btn { align-self: flex-start; margin-top: 0.75rem; }
@media (max-width: 880px) { .resource-grid { grid-template-columns: 1fr; } }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--black);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.cta-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: center;
}
.cta-banner__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.05;
  margin: 0 0 0.75rem;
}
.cta-banner__body { font-size: 0.95rem; color: rgba(255,255,255,0.75); max-width: 520px; line-height: 1.65; }
@media (max-width: 720px) { .cta-banner__inner { grid-template-columns: 1fr; } }

/* ---------- Footer (thin gold band — per XD mockup) ---------- */
.footer {
  background: var(--gold);
  color: var(--white);
  padding: 1.1rem 0;
}
.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.footer__inner a { color: var(--white); transition: opacity 0.2s var(--ease); }
.footer__inner a:hover { opacity: 0.75; }
.footer__sep { opacity: 0.6; margin: 0 0.5rem; }
@media (max-width: 720px) {
  .footer__inner { flex-direction: column; gap: 0.4rem; text-align: center; }
}

/* ---------- Contact form (mockup-true) ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-info { padding-right: 1rem; }
.contact-info p { margin-bottom: 1.5rem; line-height: 1.7; }
.contact-info__lines { margin-top: 2.5rem; }
.contact-info__lines a {
  display: block;
  color: var(--black);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.contact-info__lines a:hover { color: var(--gold); }

.form input, .form textarea {
  width: 100%;
  padding: 1.1rem 1.15rem;
  background: var(--grey-light);
  border: 0;
  border-radius: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  color: var(--black);
  margin-bottom: 1rem;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form input::placeholder, .form textarea::placeholder { color: var(--grey-label); letter-spacing: 0.01em; }
.form input:focus, .form textarea:focus {
  outline: none;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.form textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.form button[type="submit"] {
  width: 100%;
  height: 58px;
  background: var(--gold);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  border: 0;
  transition: background-color 0.2s var(--ease);
  margin-top: 0.5rem;
}
.form button[type="submit"]:hover { background: var(--gold-dark); }
.form button[type="submit"]:disabled { opacity: 0.7; cursor: wait; }
.form-success {
  padding: 2rem;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  color: var(--black);
  font-weight: 500;
  line-height: 1.6;
}
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Configurator page ----------
   Slim header banner so iframe sits high on the page (above the fold).
*/
.configurator-hero {
  position: relative;
  height: clamp(180px, 22vh, 240px);
  overflow: hidden;
  background: var(--black);
  margin-top: var(--nav-h);
}
@media (max-width: 920px) { .configurator-hero { margin-top: var(--nav-h-mobile); height: 160px; } }
.configurator-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.configurator-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
}
.configurator-hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.configurator-hero__copy { color: var(--white); }
.configurator-hero__copy .hero__eyebrow { color: var(--gold); }
.configurator-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.configurator-hero .hero__sub { max-width: 620px; font-size: 0.85rem; }
.configurator-hero .hero__eyebrow { margin: 0 0 0.5rem; font-size: 0.65rem; }

/* Iframe fills entire viewport below the nav — no hero, no padding, edge-to-edge */
.configurator-stage {
  background: var(--cream);
  padding: 0;
  margin-top: var(--nav-h);
}
.configurator-frame-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
}
.configurator-frame {
  width: 100%;
  display: block;
  height: calc(100vh - var(--nav-h));
  border: 0;
  background: var(--white);
  border-radius: 0;
}
@media (max-width: 920px) {
  .configurator-stage { margin-top: var(--nav-h-mobile); }
  .configurator-frame { height: calc(100vh - var(--nav-h-mobile)); }
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.step__num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.step__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
}
.step__body { font-size: 0.9rem; line-height: 1.7; color: var(--grey-text); }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; gap: 2rem; } }

.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.callout {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.25s var(--ease);
}
.callout:hover { border-color: var(--gold); }
.callout__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}
.callout p { margin-bottom: 1.25rem; line-height: 1.65; }
.callout .btn { align-self: flex-start; }
@media (max-width: 720px) { .callouts { grid-template-columns: 1fr; } }

/* ---------- Project lightbox modal (click tile → full image + catalog specs) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
  overflow-y: auto;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 2rem;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  z-index: 2;
  transition: color 0.2s var(--ease);
}
.lightbox__close:hover { color: var(--gold); }
.lightbox__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  max-width: 1200px;
  width: 100%;
  background: var(--cream);
  border-radius: 4px;
  overflow: hidden;
  max-height: 90vh;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
}
.lightbox.is-open .lightbox__inner { transform: scale(1); }
.lightbox__media {
  margin: 0;
  background: var(--off-black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.lightbox__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s var(--ease);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav:hover { background: var(--gold); color: var(--black); transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__count {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.lightbox__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox__dot:hover { background: rgba(255, 255, 255, 0.75); }
.lightbox__dot.is-active { background: var(--gold); transform: scale(1.3); }
.lightbox__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.lightbox__thumb {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--cream);
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
  opacity: 0.72;
}
.lightbox__thumb:hover { opacity: 1; transform: translateY(-1px); }
.lightbox__thumb.is-active { border-color: var(--gold); opacity: 1; }
.lightbox__specs {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
}
.lightbox__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.lightbox__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
  line-height: 1.05;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 1rem;
}
.lightbox__specs-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.lightbox__specs-list > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.85rem;
  align-items: baseline;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.lightbox__specs-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.lightbox__specs-list dt {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lightbox__specs-list dd {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  color: var(--black);
  line-height: 1.5;
}
.lightbox__specs-list dd.pn {
  font-family: 'Manrope', sans-serif;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}
@media (max-width: 880px) {
  .lightbox__inner { grid-template-columns: 1fr; max-height: 95vh; }
  .lightbox__media { aspect-ratio: 16/10; max-height: 45vh; }
  .lightbox__specs-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .lightbox__nav { width: 36px; height: 36px; }
  .lightbox__nav svg { width: 18px; height: 18px; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

/* Tile affordance — clickable feel */
.project-tile { cursor: pointer; }
.project-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.project-tile__expand-hint {
  display: block;
  margin-top: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: #E7C273;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.project-tile:hover .project-tile__expand-hint,
.project-tile:focus-visible .project-tile__expand-hint { opacity: 1; transform: translateY(0); }

/* ---------- Projects grid ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--grey-mid); }
.project-tile {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--grey-mid);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
}
.project-tile__overlay {
  position: absolute; inset: 0;
  /* The old ramp stayed clear until 35% down, so the project name and the top
     spec rows sat on bare photo and vanished against bright interiors. This
     starts darkening immediately and lands much heavier behind the text. */
  background: linear-gradient(180deg,
              rgba(0,0,0,0.30) 0%,
              rgba(0,0,0,0.55) 30%,
              rgba(0,0,0,0.80) 60%,
              rgba(0,0,0,0.92) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  padding: 1.5rem;
}
.project-tile:hover .project-tile__overlay { opacity: 1; }
.project-tile__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 18px rgba(0,0,0,0.5);
}
.project-tile__specs { display: flex; flex-direction: column; gap: 0.35rem; font-family: 'Manrope', sans-serif; font-size: 0.78rem; color: #fff; font-weight: 500; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.project-tile__specs p { margin: 0; display: grid; grid-template-columns: 88px 1fr; gap: 0.5rem; }
.project-tile__k { color: #E7C273; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.85); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; align-self: center; }
@media (max-width: 880px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .projects-grid { grid-template-columns: 1fr; } }

/* ---------- Noir + Velour duo ---------- */
.duo-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.duo-callout__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
}
.duo-callout p { margin: 0.85rem 0 1.25rem; line-height: 1.7; }
@media (max-width: 980px) { .duo-callouts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .duo-callouts { grid-template-columns: 1fr; gap: 2.25rem; } }

/* ---------- Black-section variants ---------- */
.bg-black .product-card__title, .bg-black .motor-card__label, .bg-black .fabric-card__name { color: var(--white); }
.bg-black .product-card__pn, .bg-black .motor-card__desc, .bg-black .motor-card__pn-list { color: rgba(255,255,255,0.72); }
.bg-black .product-card__img, .bg-black .motor-card__img { border-color: var(--hairline-on-dark); background: var(--off-black); }

/* ---------- Full contact form (Sentry quote-request shape, matches SleekFence model) ---------- */
.form--full { display: flex; flex-direction: column; gap: 1.25rem; }
.form--full .form__row { display: grid; gap: 1rem; }
.form--full .form__row--2 { grid-template-columns: 1fr 1fr; }
.form--full .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form--full .form__field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.form--full .form__field--full { grid-column: 1 / -1; }
.form--full .form__field label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: 0.04em;
}
.form--full .form__field input,
.form--full .form__field select,
.form--full .form__field textarea {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--white);
  color: var(--black);
  transition: border-color 0.18s var(--ease);
}
.form--full .form__field input::placeholder,
.form--full .form__field textarea::placeholder { color: var(--grey-label); }
.form--full .form__field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}
.form--full .form__field input:focus,
.form--full .form__field select:focus,
.form--full .form__field textarea:focus { outline: none; border-color: var(--gold); }
.form--full .form__field textarea { resize: vertical; min-height: 100px; }
.form--full .form__submit {
  align-self: flex-start;
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 0.95rem 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s var(--ease);
}
.form--full .form__submit:hover { background: var(--gold-bright, #E0AC4F); }
.form--full .form__submit--full {
  align-self: stretch;
  width: 100%;
  background: var(--black);
  color: var(--white);
  padding: 1.1rem 2rem;
  font-size: 0.92rem;
}
.form--full .form__submit--full:hover { background: var(--gold); color: var(--black); }
.form--full .form__fineprint {
  margin: 0.4rem 0 0;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  color: var(--grey-label);
}

/* Dropzone */
.form--full .form__dropzone {
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  background: var(--cream);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.form--full .form__dropzone.is-dragover {
  border-color: var(--gold);
  background: rgba(206, 159, 65, 0.05);
}
.form--full .form__dropzone-prompt {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  color: var(--grey-text);
}
.form--full .form__dropzone-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.form--full .form__dropzone-btn:hover { background: var(--gold-bright, #E0AC4F); transform: translateY(-1px); }
.form--full .form__dropzone-help {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--grey-label);
}
.form--full .form__dropzone-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}
.form--full .form__dropzone-list li {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: var(--black);
  padding: 0.35rem 0.6rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 720px) {
  .form--full .form__row--3, .form--full .form__row--2 { grid-template-columns: 1fr; }
}

/* ---------- Visually hidden ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Section head: stacked GOLD eyebrow + BLACK title (mockup pattern) ---------- */
.sec-head--stacked .sec-head__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 0.85rem;
}
.sec-head--stacked .sec-head__anchor {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}
.bg-black .sec-head--stacked .sec-head__anchor { color: var(--white); }

/* ---------- Home hero: single CTA button placement ---------- */
.hero--full .hero__buttons { margin-top: 1.5rem; }

/* ---------- Home: Why Choose 2-col (4 reasons left + photo right) ---------- */
.why-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.why-home > div { min-width: 0; }
.why-home__photo {
  background-size: cover;
  background-position: center;
  background-color: var(--grey-light);
  align-self: stretch;
  min-height: 480px;
  width: 100%;
  max-width: 100%;
}
.why-home__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.25rem;
  min-width: 0;
}
.why-home__item { min-width: 0; }
.why-home__item .why-col__label { margin-top: 0.5rem; }
@media (max-width: 980px) { .why-home { grid-template-columns: 1fr; } }
@media (max-width: 540px) {
  .why-home__list { grid-template-columns: 1fr; }
  /* Photo is too tall when stacked on phones — shrink min-height */
  .why-home__photo { min-height: 260px; aspect-ratio: 4/3; }
}

/* ---------- Home Innovations photo-overlay cards (per mockup, continuous strip — no gap = no boxy feel) ---------- */
.innov-photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.innov-photo {
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--off-black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
}
.innov-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.innov-photo__inner { position: relative; z-index: 1; color: var(--white); }
.innov-photo__kicker {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.4rem;
}
.innov-photo__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.85rem;
  line-height: 1;
}
.innov-photo__body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
@media (max-width: 980px) { .innov-photo-row { grid-template-columns: 1fr; gap: 1rem; } .innov-photo { aspect-ratio: 16/10; } }

/* ---------- Product Guide promo (Home — cream bg, booklet mockup + DOWNLOAD) ---------- */
.pg-promo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.pg-promo__book {
  aspect-ratio: 4/3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.18));
}
.pg-promo__text { max-width: 420px; }
.pg-promo__text .h2 { margin-bottom: 1.25rem; }
.pg-promo__text p { margin-bottom: 1.5rem; line-height: 1.7; }
/* .sec-head is centred and heavily spaced for full-width section headers. In
   this column it sits above left-aligned body copy and a button, so it has to
   match them. */
.pg-promo__text .sec-head { text-align: left; margin-bottom: 1.5rem; }
@media (max-width: 880px) { .pg-promo { grid-template-columns: 1fr; } .pg-promo__book { aspect-ratio: 16/10; } }

/* ---------- Contact section: white card on grey bg (per mockup) ---------- */
.contact-section { background: var(--grey-light); }
.contact-card {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--white);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
  box-shadow: 0 4px 28px rgba(0,0,0,0.04);
}

/* ---------- Utility ---------- */
.flow > * + * { margin-top: 1.25rem; }

/* ---------- Certified Installer tier cards (For Installers) ---------- */
.tier-intro {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--grey-text);
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tier-card {
  min-width: 0;
  background: var(--cream);
  border-top: 3px solid var(--hairline);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tier-card--mid { border-top-color: #A8A9AD; }
.tier-card--top { border-top-color: var(--gold); }
.tier-card__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  margin: 0;
}
.tier-card__req {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.tier-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tier-card__list li {
  font-family: 'Manrope', sans-serif;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--grey-text);
  padding-left: 1.1rem;
  position: relative;
}
.tier-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.tier-note {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--grey-label);
}
@media (max-width: 880px) { .tier-grid { grid-template-columns: 1fr; } }

/* ---------- Audience path cards (home: Architects / Installers / End users) ---------- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.path-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--cream);
  border-top: 3px solid var(--gold);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.path-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.09); }
.path-card--end { background: var(--black); border-top-color: var(--gold); }
.path-card__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  margin: 0;
}
.path-card--end .path-card__label { color: var(--white); }
.path-card__body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--grey-text);
  margin: 0;
  flex: 1;
}
.path-card--end .path-card__body { color: rgba(255,255,255,0.72); }
.path-card__cta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.25rem;
}
@media (max-width: 880px) { .path-grid { grid-template-columns: 1fr; } }

/* ---------- Fabric Studio (Architect Resources) ---------- */
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.68rem; letter-spacing: 0.12em; }

.fs-intro {
  max-width: 68ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--grey-text);
}
.fs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.fs-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.fs-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.09); }
.fs-card__swatch {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--grey-light);
}
.fs-card__body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.fs-card__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  margin: 0;
}
.fs-card__meta {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  color: var(--grey-label);
  margin: 0 0 1rem;
}
.fs-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }

/* Preview overlay — the PDF renders in the browser's own viewer, so architects
   can flip through the swatch card without committing to a 10 MB download. */
.fs-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}
.fs-modal[hidden] { display: none; }
.fs-modal__panel {
  background: var(--black);
  width: min(1100px, 100%);
  height: min(90vh, 100%);
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline-on-dark);
}
.fs-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--hairline-on-dark);
}
.fs-modal__head h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); margin: 0;
}
.fs-modal__head-actions { display: flex; align-items: center; gap: 0.75rem; }
.fs-modal__close {
  background: transparent; border: 0; color: rgba(255,255,255,0.7);
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 0.3rem;
}
.fs-modal__close:hover { color: var(--gold); }
.fs-modal__frame { flex: 1; width: 100%; border: 0; background: var(--off-black); }

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

/* Fabric Studio: notice shown when the studio is deep-linked to one family */
.fs-filter {
  max-width: 68ch;
  margin: -1rem auto clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  color: var(--grey-text);
}
.fs-filter strong { color: var(--black); }
.fs-filter a {
  color: var(--gold); font-weight: 600; margin-left: 0.5rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.fs-filter a:hover { color: var(--gold-dark); }

/* ---------- Fabric families: three-up, equal weight ----------
   Replaces the stacked full-width promo + the small card row. Side by side so
   all three families are comparable in one view without scrolling. Sits on
   black so the swatches carry the section. */
.fam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  /* one row per band: swatch, eyebrow, headline, body, spec, cta */
  grid-template-rows: auto auto auto auto auto auto;
}
/* Subgrid makes each column share the grid's rows, so the divider, spec line,
   chips and button all sit on the same baseline across the three families even
   when the copy runs to different lengths. Without it (older browsers) the flex
   fallback below still stacks correctly, just without the shared baselines. */
.fam {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@supports (grid-template-rows: subgrid) {
  .fam {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
  }
}

.fam__swatch {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--off-black);
  margin-bottom: 1.5rem;
}
.fam__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--gold); color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4rem 0.8rem;
}
.fam__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 0.65rem;
}
.fam__head {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.fam__body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem; line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin: 0 0 1.25rem;
}
.fam__spec {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem; color: rgba(255,255,255,0.55);
  margin: 0 0 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-on-dark);
}
/* flex fallback: push the button down so it still lands last */
.fam__cta { margin-top: auto; align-self: flex-start; }
@supports (grid-template-rows: subgrid) {
  .fam__cta { margin-top: 0; align-self: start; }
}

@media (max-width: 980px) {
  .fam-grid { grid-template-columns: 1fr; gap: 3rem; }
  .fam__swatch { aspect-ratio: 16 / 9; }
}

/* ---------- Per-tab section menus in the nav ----------
   Same shell as the Resources menu, but each row is a single in-page section
   link rather than a title + description. */
.nav__menu--sections { min-width: 210px; }
.nav__menu-link--slim {
  display: block;
  padding: 0.55rem 0.85rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}
.nav__menu-link--slim:hover { background: rgba(255,255,255,0.08); color: var(--white); }
/* the tab itself is a link now, so it must not pick up button styling */
a.nav__link--drop { text-decoration: none; }

/* ---------- Combined contact form: conditional blocks + attachments ----------
   The revealed fields are ordinary form fields, so they sit on the same ground
   as the rest of the form. A tinted panel made them read as a separate thing
   bolted on. The heading alone carries the grouping. ------------------------- */
.form__reveal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.form__reveal[hidden] { display: none; }
.form__reveal.is-open { animation: revealIn 0.28s var(--ease) both; }
@keyframes revealIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .form__reveal.is-open { animation: none; }
}
.form__reveal-head {
  margin-top: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
}

/* Attachment control. The real input is hidden and the label is the target,
   so the whole panel is clickable and keyboard focus still lands correctly. */
.filedrop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.75rem 1.25rem;
  background: var(--grey-light);
  border: 1px dashed var(--grey-mid);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.filedrop:hover { border-color: var(--gold); background: var(--white); }
.filedrop:focus-within { border-color: var(--gold); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--gold); }
.filedrop svg { width: 22px; height: 22px; color: var(--gold); }
.filedrop__text {
  font-family: 'Manrope', sans-serif;
  font-size: 0.86rem;
  color: var(--grey-text);
}
.filedrop__text strong { color: var(--black); font-weight: 600; }
.filedrop__hint {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  color: var(--grey-label);
}
.filedrop input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.filedrop__list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.filedrop__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: var(--grey-text);
  padding: 0.4rem 0.6rem;
  background: var(--grey-light);
  font-variant-numeric: tabular-nums;
}
.filedrop__list li.is-over { color: #8A2B2B; background: #FBEDED; }

@media (max-width: 640px) {
}

/* ---------- Form rows: keep inputs on a shared baseline ----------
   A label that wraps to two lines ("Approx. number of shades") used to push its
   own input down while its neighbours stayed put. Subgrid puts every label in
   one band and every input in the next, so the inputs line up whatever the
   labels do. Fallback reserves two lines of label height. */
.form--full .form__row { grid-auto-rows: min-content; align-items: start; }
.form--full .form__row > .form__field > label { min-height: 2.4em; display: flex; align-items: flex-end; }
@supports (grid-template-rows: subgrid) {
  .form--full .form__row { grid-template-rows: auto auto; }
  .form--full .form__row > .form__field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  /* Subgrid handles it, so drop the reserved height and its dead space. */
  .form--full .form__row > .form__field > label { min-height: 0; display: block; align-self: end; }
}

/* ---------- Form controls: one height for inputs and selects ----------
   A select renders ~16px taller than a text input at identical font, padding
   and border, so rows mixing the two looked ragged. min-height:0, height:auto
   and field-sizing all leave it taller, so the height is set explicitly.
   Derived from the same tokens the controls already use, rather than a magic
   pixel value, so it tracks any change to font size or padding.
   Textarea is deliberately excluded: it has to grow. */
.form--full { --control-line: 1.35; --control-h: calc(0.92rem * var(--control-line) + 1.7rem + 2px); }
.form--full .form__field input,
.form--full .form__field select {
  line-height: var(--control-line);
  height: var(--control-h);
}

/* ---------- Form rows: equal columns regardless of option text ----------
   1fr is minmax(auto, 1fr), so a select's widest option ("$50,000 to
   $100,000") sets a floor that pushes its track past its share and overflows
   the panel. minmax(0, 1fr) lets the track shrink so the columns stay equal
   and the control clips its own text instead. */
.form--full .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form--full .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form--full .form__field select { text-overflow: ellipsis; }

/* Grid items default to min-width:auto, so a select refuses to shrink below its
   widest option and spills out of its (correctly sized) track. This lets the
   controls shrink to their column. */
.form--full .form__row > .form__field { min-width: 0; }
.form--full .form__field input,
.form--full .form__field select,
.form--full .form__field textarea { min-width: 0; max-width: 100%; }