/* ============================================================================
   Vireo Homes — shared site styles (all pages)
   Engineered/organic thesis: grid + hairlines + mono data vs. curve + green.
   border-radius:0 on all structural elements. Green is a scalpel (<4%/viewport).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--vireo-green); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 500; margin: 0; }

:focus-visible { outline: 1.5px solid var(--vireo-green); outline-offset: 3px; }
input, select, textarea, button { font: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--bone); color: var(--ink); padding: 10px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  transition: top var(--dur-micro);
}
.skip-link:focus { top: 8px; }

/* ---- shared type helpers ---- */
.mono { font-family: var(--font-mono); letter-spacing: 0.08em; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--graphite);
}
.eyebrow--dark { color: var(--aluminium); }
.display {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.08;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---- container / section rhythm ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; }
.section { padding: clamp(88px, 12vw, 176px) var(--gutter); }
.section--light { background: var(--bone); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--dark  { background: var(--ink);  color: var(--bone); }
.section-head {
  margin: 0 0 44px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.02em; line-height: 1.08;
}

/* ============================================================================
   Home hero — static, full-height, no scroll-jacking
   ========================================================================= */
.home-hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--bone); overflow: hidden;
}
.home-hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/assets/img/hero-exterior.jpg?v=fe56cf5c');
  background-size: cover; background-position: center 38%;
}
.home-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,18,13,0.55) 0%, rgba(6,18,13,0.28) 34%, rgba(6,18,13,0.72) 72%, rgba(6,18,13,0.9) 100%),
              linear-gradient(90deg, rgba(6,18,13,0.55) 0%, rgba(6,18,13,0.1) 60%);
}
.home-hero__inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: calc(72px + clamp(48px, 8vw, 110px)) var(--gutter) clamp(36px, 5vw, 64px);
  animation: fadeUp var(--dur-scene) var(--ease-in) both;
}
.home-hero__eyebrow { margin-bottom: 22px; }
.home-hero__h1 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(44px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.03em;
}
.home-hero__sub {
  margin: 26px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6;
  color: rgba(244, 242, 237, 0.9);
}
.home-hero__ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.home-hero__data {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hairline-bone);
  background: rgba(6, 18, 13, 0.55); backdrop-filter: blur(3px);
}
.home-hero__cell {
  padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono);
}
.home-hero__cell + .home-hero__cell { border-left: 1px solid var(--hairline-bone); }
.home-hero__cell span { font-size: 10px; letter-spacing: 0.12em; color: var(--aluminium); }
.home-hero__cell strong {
  font-size: clamp(16px, 1.6vw, 22px); font-weight: 500; letter-spacing: 0.04em;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .home-hero__data { grid-template-columns: repeat(2, 1fr); }
  .home-hero__cell + .home-hero__cell { border-left: 0; }
  .home-hero__cell:nth-child(even) { border-left: 1px solid var(--hairline-bone); }
  .home-hero__cell:nth-child(n+3) { border-top: 1px solid var(--hairline-bone); }
}

/* ============================================================================
   Header / nav
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 32px; height: 72px;
  padding: 0 clamp(20px, 3.4vw, 48px);
  background: rgba(6, 18, 13, 0.93);
  border-bottom: 1px solid var(--hairline-bone);
  backdrop-filter: saturate(120%) blur(2px);
}
.header-lockup { display: flex; align-items: center; gap: 12px; flex: none; }
.header-lockup .wordmark {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.22em; color: var(--bone);
}
.primary-nav {
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(12px, 1.8vw, 26px); flex-wrap: wrap; justify-content: flex-end;
}
.primary-nav a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: rgba(244, 242, 237, 0.82); transition: color var(--dur-micro);
}
.primary-nav a:hover { color: var(--bone); }
.primary-nav a[aria-current="page"] { color: var(--vireo-green); }

.nav-toggle { display: none; }

/* ============================================================================
   Buttons — one green CTA per viewport
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border-radius: 0; border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  padding: 16px 26px; transition: background var(--dur-micro),
    border-color var(--dur-micro), color var(--dur-micro);
  background: transparent; color: inherit;
}
.btn--green { background: var(--vireo-green); color: var(--bone); border-color: var(--vireo-green); transition: background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro), box-shadow var(--dur-micro); }
.btn--green:hover { background: var(--vireo-green-deep); border-color: var(--vireo-green-deep); box-shadow: 0 0 28px rgba(14, 140, 76, 0.35); }
.btn--solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--solid:hover { border-color: var(--vireo-green); color: var(--vireo-green); }
.btn--ghost-dark { border-color: rgba(244, 242, 237, 0.55); color: var(--bone); }
.btn--ghost-dark:hover { border-color: var(--vireo-green); color: var(--vireo-green); }
.btn--ghost-light { border-color: rgba(11, 10, 8, 0.45); color: var(--ink); }
.btn--ghost-light:hover { border-color: var(--vireo-green); color: var(--vireo-green); }
.btn--sm { padding: 10px 18px; font-size: 11px; }

.header-cta { flex: none; }

/* ============================================================================
   Trust bar
   ========================================================================= */
.trust-bar {
  display: flex; flex-wrap: wrap; background: var(--ink);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.trust-bar span {
  flex: 1; min-width: 160px; text-align: center; padding: 20px 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--aluminium);
}
.trust-bar span + span { border-left: 1px solid var(--hairline); }

/* ============================================================================
   Datasheet grid (spec data — never a "feature card")
   ========================================================================= */
.datasheet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.datasheet__cell { background: var(--ink); padding: 32px 28px 36px; }
.datasheet__ref { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--vireo-green); }
.datasheet__val {
  margin-top: 18px; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(34px, 3vw, 44px); color: var(--bone);
}
.datasheet__label { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--aluminium); }
.datasheet__note { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(168, 166, 159, 0.6); }

/* spec table (key/value rows) */
.spec-table { margin-top: 40px; border-top: 1px solid var(--hairline-dark); }
.spec-table--dark { border-top-color: var(--hairline); }
.spec-row {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline-dark);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  flex-wrap: wrap;
}
.spec-table--dark .spec-row { border-bottom-color: var(--hairline); }
.spec-row > span:first-child { color: var(--graphite); }
.spec-table--dark .spec-row > span:first-child { color: var(--aluminium); }
.spec-row > span:last-child { text-align: right; }

/* ============================================================================
   Systems index (sequential rows)
   ========================================================================= */
.index-list { border-top: 1px solid var(--hairline-dark); }
.index-row {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  flex-wrap: wrap; padding: 26px 8px; border-bottom: 1px solid var(--hairline-dark);
  transition: background var(--dur-micro);
}
.index-row:hover { background: var(--paper); }
.index-row__num { font-family: var(--font-mono); font-size: 12px; color: var(--vireo-green); width: 28px; flex: none; }
.index-row__thumb {
  flex: none; width: 88px; background: #EFEDE6; border: 1px solid var(--hairline-dark);
  padding: 6px; display: flex; justify-content: center;
}
.index-row__thumb img { display: block; object-fit: contain; }
.index-row__body { flex: 1 1 240px; min-width: 200px; }
.index-row__title { display: block; font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; }
.index-row__desc { display: block; margin-top: 4px; font-size: 15px; color: var(--graphite); }
.index-row__meta { display: flex; gap: clamp(14px, 2vw, 36px); flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite); }
.index-row__arrow { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }

/* ============================================================================
   Editorial two-column (text + figure)
   ========================================================================= */
.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 5vw, 80px);
}
.two-col--end { align-items: end; }
.two-col--start { align-items: start; }
.measure { max-width: 34rem; }
.lede { margin: 26px 0 0; font-size: 17px; line-height: 1.6; }
.section--light .lede { color: #2E2C27; }
.section--dark .lede { color: rgba(244, 242, 237, 0.85); }

figure.framed { margin: 0; }
figure.framed > .frame { border: 1px solid var(--hairline-dark); overflow: hidden; }
.section--dark figure.framed > .frame { border-color: var(--hairline); }
figure.framed img { display: block; width: 100%; object-fit: cover; }
figure.framed figcaption {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--graphite);
}
.section--dark figure.framed figcaption { color: var(--aluminium); }

/* principles cards (no icons, no rounded corners) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 3.4vw, 56px); }
.card__frame { border: 1px solid var(--hairline-dark); }
.card__frame img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card__head { display: flex; gap: 14px; align-items: baseline; margin-top: 18px; }
.card__num { font-family: var(--font-mono); font-size: 12px; color: var(--vireo-green); }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; }
.card__body { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--graphite); }

/* logo strip */
.logo-strip {
  margin-top: clamp(56px, 7vw, 96px); padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
  display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap;
}
.logo-strip img { height: 30px; width: auto; filter: grayscale(1); opacity: 0.65; }

/* ============================================================================
   Forms
   ========================================================================= */
.rfq-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.field { display: block; }
.field > span { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite); }
.field input, .field select, .field textarea {
  width: 100%; box-sizing: border-box; background: transparent;
  border: 1px solid rgba(11, 10, 8, 0.3); border-radius: 0; padding: 13px 14px;
  font-size: 15px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--vireo-green); outline: none; }
.field--full { grid-column: 1 / -1; }
.file-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  border: 1px dashed rgba(11, 10, 8, 0.35); padding: 22px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite);
  transition: border-color var(--dur-micro), color var(--dur-micro);
}
.file-drop:hover { border-color: var(--vireo-green); color: var(--vireo-green); }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--graphite); }
.form-success { border: 1px solid rgba(11, 10, 8, 0.3); padding: 40px 36px; }

/* ============================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--ink); color: var(--bone); border-top: 1px solid var(--hairline); padding: clamp(56px, 7vw, 96px) var(--gutter) 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(32px, 4vw, 64px); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-content: start; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.footer-nav a { color: var(--aluminium); transition: color var(--dur-micro); }
.footer-nav a:hover { color: var(--vireo-green); }
.footer-col { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 2; color: var(--aluminium); }
.footer-col a { color: var(--bone); }
.footer-col a:hover { color: var(--vireo-green); }
.footer-legal {
  margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(168, 166, 159, 0.6);
}
.link-inline:hover { color: var(--vireo-green); }

/* ============================================================================
   Sub-page hero (non-home pages)
   ========================================================================= */
.page-hero { position: relative; padding: calc(72px + clamp(72px, 10vw, 150px)) var(--gutter) clamp(56px, 8vw, 112px); overflow: hidden; }
.page-hero--photo { color: var(--bone); }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-img, none);
  background-size: cover; background-position: center;
}
.page-hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,18,13,0.92) 0%, rgba(6,18,13,0.72) 48%, rgba(6,18,13,0.4) 100%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.page-hero__crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--aluminium); }
.page-hero__crumbs a:hover { color: var(--vireo-green); }
.page-hero h1 { margin: 22px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.03em; line-height: 0.98; max-width: 18ch; }
.page-hero__sub { margin: 24px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: rgba(244, 242, 237, 0.9); }

/* product / swatch grids for sub-pages — natural aspect, no crop, no letterbox */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1px; background: var(--hairline-dark); border: 1px solid var(--hairline-dark); }
.product-card { background: var(--bone); display: flex; flex-direction: column; }
.product-card__img { background: #EFEDE6; border-bottom: 1px solid var(--hairline-dark); overflow: hidden; }
.product-card__img img { display: block; width: 100%; height: auto; }
.product-card__img a { display: block; width: 100%; cursor: zoom-in; }
.product-card__title { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.product-card__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--graphite); line-height: 1.9; padding: 16px 20px 20px; margin-top: auto; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--hairline-dark); border: 1px solid var(--hairline-dark); }
.swatch { background: var(--bone); display: flex; flex-direction: column; }
.swatch a { display: block; width: 100%; cursor: zoom-in; }
.swatch img { display: block; width: 100%; height: auto; background: #EFEDE6; }
.swatch figcaption { padding: 8px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--graphite); margin-top: auto; }

/* masonry-ish gallery */
.gallery-grid { columns: 3 280px; column-gap: 16px; }
.gallery-grid figure { margin: 0 0 16px; break-inside: avoid; border: 1px solid var(--hairline); }
.gallery-grid img { display: block; width: 100%; }

/* faqs */
.faq-item { border-bottom: 1px solid var(--hairline-dark); }
.faq-item summary { cursor: pointer; padding: 24px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--vireo-green); }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 0 0 24px; max-width: 68ch; color: #2E2C27; }

/* ============================================================================
   Scroll reveal (the "wing wipe" — reveal once, never re-trigger, no loop)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-in), transform var(--dur-reveal) var(--ease-in); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }

/* hero intro keyframes (from the approved design) */
@keyframes maskUp { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .gallery-grid { columns: 2 220px; }
}
@media (max-width: 767px) {
  .primary-nav { display: none; position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(6,18,13,0.98); border-bottom: 1px solid var(--hairline-bone); padding: 8px 0; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 14px clamp(20px, 3.4vw, 48px); font-size: 12px; }
  .primary-nav .header-cta { margin: 8px clamp(20px, 3.4vw, 48px); }
  .nav-toggle { display: inline-flex; margin-left: auto; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(244,242,237,0.4); color: var(--bone); cursor: pointer; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .gallery-grid { columns: 1; }
  .footer-legal { flex-direction: column; }

  /* ---- systems index rows: stack, full-width media ---- */
  .index-row { display: block; padding: 22px 8px; }
  .index-row__num { display: inline-block; margin-bottom: 10px; }
  .index-row__thumb { width: 100%; max-width: 300px; margin: 0 0 14px; }
  .index-row__thumb img { width: 100%; height: auto; }
  .index-row__title { font-size: 22px; }
  .index-row__meta { margin-top: 10px; }
  .index-row__arrow { display: none; }
}