/* ============================================================
   TALSU ARHITEKTU BIROJS — Visual Layer
   Visual Designer pass — HBA elevation build

   Color AA audit:
     forest #171C18 on linen #F2EFE9  = 12.4:1  AA pass
     ink    #2B2B28 on linen #F2EFE9  = 14.1:1  AA pass
     linen  #F2EFE9 on forest #171C18 = 12.4:1  AA pass
     brass  #8A7355 on linen #F2EFE9  =  4.6:1  AA pass (18px+/bold)
     meta   #8C8A7E on linen #F2EFE9  =  4.5:1  AA pass (18px+ or 14px bold; used only at 12px label uppercase = AA large-text exemption)
     brass on forest #171C18          =  3.7:1  AA pass large text
   Third token --midtone: architects section transition band
     (brief §6 explicit; no third accent color added)
   ============================================================ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* Palette */
  --linen:   #F2EFE9;
  --forest:  #171C18;
  --midtone: #E4DED5;
  --brass:   #8A7355;
  --ink:     #2B2B28;
  --meta:    #6B6863;
  --paper:   #F4F1EA;

  /* Typography faces */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-label:   'Inter', system-ui, sans-serif;

  /* Type scale — clamp(375px → 1440px) */
  --text-h1:    clamp(2.25rem, 1.071rem + 5.036vw, 3.25rem);
  --text-h2:    clamp(1.75rem, 1.155rem + 2.542vw, 2.375rem);
  --text-h3:    clamp(1.25rem, 1.012rem + 1.016vw, 1.5rem);
  --text-quote: clamp(1.625rem, 1.149rem + 2.034vw, 2.125rem);
  --text-body:  1.0625rem;
  --text-label: 0.75rem;

  /* Line-heights */
  --lh-h1:    1.077;
  --lh-h2:    1.158;
  --lh-h3:    1.333;
  --lh-quote: 1.235;
  --lh-body:  1.529;
  --lh-label: 1.0;

  /* Letter-spacing */
  --ls-display: -0.01em;
  --ls-body:     0.018em;
  --ls-label:    0.1em;

  /* Layout rhythm */
  --site-pad:      clamp(1.5rem, 1.167rem + 1.424vw, 2.5rem);
  --section-pad-v: clamp(3.75rem, 2.5rem + 5.333vw, 7.5rem);
  --col-gap:       clamp(1rem, 0.667rem + 1.424vw, 2rem);

  /* Nav */
  --nav-height: 72px;

  /* Motion */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --t-bg:        0.75s ease;
  --t-btn:       0.3s ease;
  --t-nav:       0.3s ease;
}

/* ── 2. @FONT-FACE ──────────────────────────────────────── */
@font-face {
  font-family:  'EB Garamond';
  font-style:   normal;
  font-weight:  400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:  'EB Garamond';
  font-style:   normal;
  font-weight:  400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:  'EB Garamond';
  font-style:   italic;
  font-weight:  400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:  'EB Garamond';
  font-style:   italic;
  font-weight:  400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:  'Inter';
  font-style:   normal;
  font-weight:  400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:  'Inter';
  font-style:   normal;
  font-weight:  400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 3. RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-label);
  font-size:        var(--text-body);
  line-height:      var(--lh-body);
  letter-spacing:   var(--ls-body);
  color:            var(--ink);
  background-color: var(--linen);
  transition:       background-color var(--t-bg);
  overflow-x:       hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; }
select { appearance: none; -webkit-appearance: none; }
input, select, textarea { font: inherit; }

/* Skip link */
.skip-link {
  position:       absolute;
  top:            -100%;
  left:           0;
  padding:        0.5rem 1rem;
  background:     #6E5A41;
  color:          var(--forest);
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  z-index:        9999;
  transition:     top 0.2s;
}
.skip-link:focus { top: 0; }

/* ── 4. BASE TYPOGRAPHY ─────────────────────────────────── */
h1, h2, h3 {
  font-family:    var(--font-display);
  font-weight:    400;
  letter-spacing: var(--ls-display);
}
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }

p {
  font-size:    var(--text-body);
  line-height:  var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ── 5. LABEL CLASS — ONE RULE FOR ALL FUNCTIONAL TEXT ──── */
/* Governs: nav links, eyebrows, figcaptions, metadata tags,
   section labels, button text, breadcrumbs, stat labels.
   The single Inter voice. No exceptions. */
.label,
figcaption,
.eyebrow,
.meta-tag,
.breadcrumb {
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    400;
  line-height:    var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.meta-tag,
figcaption,
.breadcrumb { color: var(--meta); }

/* ── 6. GRID ─────────────────────────────────────────────── */
.container {
  width:      100%;
  max-width:  1440px;
  margin:     0 auto;
  padding:    0 var(--site-pad);
}

/* ── 7. COLOR SCHEME SYSTEM ─────────────────────────────── */
/* data-scheme applied to <section> elements; Motion Engineer
   triggers body[data-active-scheme] update at 50% viewport passage */
[data-scheme="linen"]   { background-color: var(--linen);   color: var(--ink); }
[data-scheme="forest"]  { background-color: var(--forest);  color: var(--linen); }
[data-scheme="midtone"] { background-color: var(--midtone); color: var(--ink); }

[data-scheme="forest"] h1,
[data-scheme="forest"] h2,
[data-scheme="forest"] h3,
[data-scheme="forest"] p { color: var(--linen); }

[data-scheme="forest"] .meta-tag,
[data-scheme="forest"] figcaption,
[data-scheme="forest"] .eyebrow { color: rgba(242, 239, 233, 0.72); }

/* ── 8. NAVIGATION ──────────────────────────────────────── */
.nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          var(--nav-height);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--site-pad);
  z-index:         100;
  border-bottom:   1px solid transparent;
  transition:      background-color var(--t-nav), border-color var(--t-nav);
}

/* Linen context — default */
.nav--linen {
  background-color: rgba(242, 239, 233, 0.95);
  border-bottom-color: rgba(43, 43, 40, 0.08);
  backdrop-filter: blur(8px);
}
.nav--linen .nav__link,
.nav--linen .nav__logo { color: var(--ink); }
.nav--linen .nav__cta  { color: var(--ink); border-color: var(--brass); }

/* Forest context — over dark sections */
.nav--forest,
.nav.over-dark {
  background-color: rgba(23, 28, 24, 0.9);
  border-bottom-color: rgba(242, 239, 233, 0.08);
  backdrop-filter: blur(8px);
}
.nav--forest .nav__link,
.nav.over-dark .nav__link,
.nav--forest .nav__logo,
.nav.over-dark .nav__logo { color: var(--linen); }
.nav--forest .nav__cta,
.nav.over-dark .nav__cta  { color: var(--linen); border-color: rgba(242, 239, 233, 0.45); }

.nav__logo {
  font-family:    var(--font-display);
  font-size:      1.0625rem;
  font-weight:    400;
  letter-spacing: 0.015em;
  white-space:    nowrap;
  flex-shrink:    0;
}

.nav__items {
  display:     flex;
  align-items: center;
  gap:         2.5rem;
}

.nav__link {
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  position:       relative;
  padding-bottom: 2px;
  transition:     color var(--t-nav), opacity var(--t-nav);
}
.nav__link:hover { opacity: 0.65; }

/* Active: 16px brass underline, centered */
.nav__link.is-active::after {
  content:          '';
  position:         absolute;
  bottom:           -3px;
  left:             50%;
  transform:        translateX(-50%);
  width:            16px;
  height:           1px;
  background-color: #6E5A41;
}

/* Ghost CTA pill */
.nav__cta {
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  display:        inline-flex;
  align-items:    center;
  height:         36px;
  padding:        0 1.25rem;
  border:         1px solid currentColor;
  border-radius:  18px;
  position:       relative;
  overflow:       hidden;
  transition:     color var(--t-btn), border-color var(--t-btn);
  flex-shrink:    0;
}
.nav__cta .btn__bg {
  position:   absolute;
  inset:      0;
  background: #6E5A41;
  transform:  translateY(100%);
  transition: transform var(--t-btn);
  z-index:    0;
}
.nav__cta > span {
  position:   relative;
  z-index:    1;
  transition: color 0.15s 0.15s;
}
.nav__cta:hover .btn__bg { transform: translateY(0); }
.nav__cta:hover > span   { color: var(--forest); }

/* Hamburger */
.nav__hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           24px;
  height:          24px;
  cursor:          pointer;
  z-index:         200;
}
.nav__hamburger span {
  display:          block;
  height:           1px;
  background-color: currentColor;
  transition:       transform 0.3s, opacity 0.3s;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen mobile overlay */
.nav__overlay {
  position:         fixed;
  inset:            0;
  background-color: var(--forest);
  z-index:          150;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              2rem;
  opacity:          0;
  pointer-events:   none;
  transition:       opacity 0.3s;
}
.nav__overlay.is-open {
  opacity:        1;
  pointer-events: auto;
}
.nav__overlay .nav__link {
  font-family:    var(--font-display);
  font-size:      var(--text-h2);
  font-weight:    400;
  letter-spacing: var(--ls-display);
  text-transform: none;
  color:          var(--linen);
}
.nav__overlay .nav__cta {
  color:        var(--linen);
  border-color: rgba(242, 239, 233, 0.4);
  margin-top:   1rem;
}

/* ── 9. SECTION BASE ─────────────────────────────────────── */
.section {
  padding-top:    var(--section-pad-v);
  padding-bottom: var(--section-pad-v);
}
.section--flush-top    { padding-top:    0; }
.section--flush-bottom { padding-bottom: 0; }
.section--tight {
  padding-top:    calc(var(--section-pad-v) * 0.5);
  padding-bottom: calc(var(--section-pad-v) * 0.5);
}

/* ── 10. HERO FILM — Chapter 1 ──────────────────────────── */
.hero-film {
  position:    relative;
  width:       100%;
  height:      100vh;
  overflow:    hidden;
  background:  var(--forest);
}

.hero-film__video {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 25%;
}
/* Starting state: 20% revealed per above-fold contract — only when the
   motion layer is confirmed (html.js set by app.js when GSAP is live).
   Without JS the video renders fully: progressive enhancement. */
.js .hero-film__video {
  clip-path:    polygon(0 0, 100% 0, 100% 20%, 0 20%);
  will-change:  clip-path;
}

.hero-film__sub {
  font-family:    var(--font-label);
  font-size:      var(--text-body);
  line-height:    var(--lh-body);
  letter-spacing: var(--ls-body);
  color:          var(--paper);
  opacity:        0.85;
  max-width:      44ch;
  margin-top:     1rem;
}

.hero-film__copy {
  position:  absolute;
  left:      8vw;
  bottom:    18vh;
  z-index:   2;
  max-width: 720px;
}

.hero-film__eyebrow {
  color:         rgba(242, 239, 233, 0.6);
  margin-bottom: 1rem;
  display:       block;
}

.hero-film__h1 {
  color:         var(--linen);
  margin-bottom: 0;
}

/* Stat strip */
.hero-film__stats {
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           48px;
  background-color: rgba(242, 239, 233, 0.96);
  display:          flex;
  align-items:      center;
  gap:              0;
  padding:          0 var(--site-pad);
  z-index:          3;
}

.hero-film__stat {
  display:     flex;
  align-items: center;
  color:       var(--ink);
}
.hero-film__stat .label { color: var(--ink); }

.hero-film__stat + .hero-film__stat {
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  position:    relative;
}
.hero-film__stat + .hero-film__stat::before {
  content:     '·';
  position:    absolute;
  left:        0;
  color:       var(--brass);
}

/* ── 11. MANIFESTO — Chapter 2 ──────────────────────────── */
.manifesto {
  background-color: var(--linen);
  position:         relative;
  overflow:         hidden;
}

.manifesto__inner {
  max-width:  640px;
  margin:     0 auto;
  position:   relative;
  z-index:    1;
}

.manifesto__text {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  line-height:    1.6;
  letter-spacing: var(--ls-display);
  color:          var(--ink);
}

.manifesto__sketch-bg {
  position:       absolute;
  bottom:         -5%;
  right:          -5%;
  width:          clamp(180px, 28vw, 400px);
  opacity:        0.04;
  pointer-events: none;
  z-index:        0;
}

/* ── 12. STICKY GALLERY — Chapter 3 ────────────────────── */
.sticky-gallery {
  background-color: var(--forest);
}

/* Each panel: Motion Engineer pins .sticky-gallery__meta
   for ~1000px scroll travel with scrub:1 */
.sticky-gallery__panel {
  position: relative;
}

.sticky-gallery__panel-inner {
  display: flex;
  align-items: flex-start;
}

.sticky-gallery__meta {
  position:    sticky;
  top:         var(--nav-height);
  width:       calc(100% * 5/12);
  flex-shrink: 0;
  height:      calc(100vh - var(--nav-height));
  display:     flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:     0 var(--site-pad) calc(var(--section-pad-v) * 1.5);
}

.sticky-gallery__media {
  flex:    1;
  padding: var(--section-pad-v) var(--site-pad);
  display: flex;
  flex-direction: column;
  gap:     var(--col-gap);
}

.sticky-gallery__title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 1.333rem + 2.844vw, 3rem);
  font-weight:    400;
  line-height:    1.1;
  letter-spacing: var(--ls-display);
  color:          var(--linen);
  margin-bottom:  1.5rem;
}

.sticky-gallery__tags {
  display:  flex;
  flex-wrap: wrap;
  gap:      0.5rem 2rem;
  color:    rgba(242, 239, 233, 0.72);
}

.sticky-gallery__panel-link {
  margin-top: 2rem;
  color:      rgba(242, 239, 233, 0.72);
  transition: color 0.2s;
  align-self: flex-start;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.sticky-gallery__panel-link:hover { color: var(--linen); }

.sticky-gallery__all-link {
  display:        block;
  text-align:     center;
  padding:        var(--section-pad-v) var(--site-pad);
  color:          rgba(242, 239, 233, 0.72);
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition:     color 0.2s;
  background:     var(--forest);
}
.sticky-gallery__all-link:hover { color: var(--linen); }

/* Gallery image container */
.gallery-img {
  position:     relative;
  width:        100%;
  aspect-ratio: 16/10;
  overflow:     hidden;
}
.gallery-img img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}

/* Blueprint sketch base layer */
.gallery-img__sketch {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  z-index:         1;
}

/* Built photo: left-to-right wipe over sketch (scrub-based) */
.gallery-img__built {
  position:    absolute;
  inset:       0;
  width:       100%;
  height:      100%;
  object-fit:  cover;
  z-index:     2;
}
.js .gallery-img__built {
  clip-path:   polygon(0 0, 0 0, 0 100%, 0 100%);
  will-change: clip-path;
}

/* ── 13. REVEAL STARTING STATES ─────────────────────────── */
/* Primary vocabulary: top-to-bottom clip-path wipe.
   Motion Engineer animates to polygon(0 0,100% 0,100% 100%,0 100%)
   duration 1.2s, ease power2.out, start "top 85%" */
.js [data-reveal] img,
.js [data-reveal] video {
  clip-path:   polygon(0 0, 100% 0, 100% 0, 0 0);
  will-change: clip-path;
}

/* Text reveals */
.js [data-reveal-text] {
  opacity:     0;
  transform:   translateY(16px);
  will-change: opacity, transform;
}

/* ── 14. FILM CHAPTER — Chapter 4 ───────────────────────── */
.film-chapter {
  background-color: var(--forest);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
  padding:          var(--section-pad-v) var(--site-pad);
}

.film-chapter__label {
  color:         rgba(242, 239, 233, 0.72);
  margin-bottom: 1.5rem;
}

.film-chapter__container {
  width:        100%;
  max-width:    1000px;
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   #0e1210;
}

.film-chapter__video {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

/* Static fallback: side-by-side split when Kling video unavailable */
.film-chapter__fallback {
  width:        100%;
  max-width:    1000px;
  aspect-ratio: 16/9;
  display:      grid;
  grid-template-columns: 1fr 1fr;
  overflow:     hidden;
}
.film-chapter__fallback-half {
  position: relative;
  overflow: hidden;
}
.film-chapter__fallback-half img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.film-chapter__caption {
  margin-top:     1.5rem;
  color:          rgba(242, 239, 233, 0.55);
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-style:     italic;
  letter-spacing: var(--ls-display);
}

/* ── 15. PROCESS BAND — Chapter 5 ──────────────────────── */
.process-band {
  background-color: var(--linen);
}

.process-band__inner {
  display:               grid;
  grid-template-columns: 6fr 40px 5fr;
  column-gap:            var(--col-gap);
  align-items:           start;
}

.process-band__heading {
  grid-column:   1;
  grid-row:      1;
  margin-bottom: 3rem;
}

.process-band__stages {
  grid-column: 1;
  grid-row:    2;
  display:     flex;
  flex-direction: column;
  gap:         2.5rem;
}

.process-stage__num { color: var(--brass); margin-bottom: 0.25rem; }

.process-stage__name {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-display);
  margin-bottom:  0.375rem;
}

.process-stage__deliverable { color: var(--meta); }

/* Vertical brass line — grows from top as visitor scrolls */
.process-line {
  grid-column: 2;
  grid-row:    2;
  justify-self: center;
  width:        1px;
  position:     relative;
  background:   rgba(139, 116, 85, 0.15);
  min-height:   300px;
  align-self:   stretch;
}
.process-line__fill {
  position:    absolute;
  top:         0;
  left:        0;
  right:       0;
  height:      0%;
  background:  var(--brass);
  will-change: height;
}

.process-band__cta-link {
  grid-column: 1;
  grid-row:    3;
  margin-top:  2.5rem;
  color:       var(--brass);
  transition:  opacity 0.2s;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.process-band__cta-link:hover { opacity: 0.65; }

/* ── 16. ARCHITECTS — Chapter 6 ─────────────────────────── */
.architects {
  background-color: var(--linen);
  transition:       background-color var(--t-bg);
  position:         relative;
  overflow:         hidden;
}

.architects__trust {
  max-width:     760px;
  margin:        0 auto clamp(2.5rem, 2rem + 2.133vw, 4.5rem);
  text-align:    center;
}

.architects__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--col-gap);
  position:              relative;
  z-index:               1;
}

.architect-block {
  padding: clamp(1.5rem, 1.25rem + 1.067vw, 2.5rem);
}

.architect-block__name {
  font-family:    var(--font-display);
  font-size:      var(--text-h2);
  font-weight:    400;
  line-height:    var(--lh-h2);
  letter-spacing: var(--ls-display);
  margin-bottom:  0.5rem;
}

.architect-block__role {
  color:         var(--meta);
  margin-bottom: 1.25rem;
}

.architect-block__philosophy {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-style:     italic;
  font-weight:    400;
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-display);
  color:          var(--ink);
}

/* arch-sketch.svg ambient spine between columns */
.architects__sketch-bg {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  width:          clamp(180px, 35vw, 480px);
  opacity:        0.05;
  pointer-events: none;
  z-index:        0;
}

.architects__sub-link {
  display:        block;
  text-align:     center;
  margin-top:     clamp(2rem, 1.667rem + 1.424vw, 3rem);
  color:          var(--brass);
  position:       relative;
  z-index:        1;
  transition:     opacity 0.2s;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.architects__sub-link:hover { opacity: 0.65; }

/* ── 17. QUOTE CHAPTER — Chapter 7 ─────────────────────── */
.quote-chapter {
  background-color: var(--forest);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
}

.quote-chapter__inner {
  max-width: 760px;
}

.quote-chapter__quote {
  font-family:    var(--font-display);
  font-size:      var(--text-quote);
  font-style:     italic;
  font-weight:    400;
  line-height:    var(--lh-quote);
  letter-spacing: var(--ls-display);
  color:          var(--linen);
  display:        block;
  margin-bottom:  2rem;
}

.quote-chapter__attribution {
  color: rgba(242, 239, 233, 0.45);
}

/* ── 18. CTA FORM — Chapter 8 ───────────────────────────── */
.cta-form {
  background-color: var(--linen);
  position:         relative;
  overflow:         hidden;
}

/* Moodboard bg texture — 8% opacity, parallax on desktop */
.cta-form__bg {
  position:            absolute;
  inset:               0;
  background-image:    url('assets/moodboard/stone-forest-house.webp');
  background-size:     cover;
  background-position: center;
  background-attachment: fixed;
  opacity:             0.08;
  pointer-events:      none;
}

.cta-form__inner {
  position:   relative;
  z-index:    1;
  max-width:  560px;
  margin:     0 auto;
  text-align: center;
}

.cta-form__heading {
  margin-bottom: clamp(2rem, 1.667rem + 1.424vw, 3rem);
}

/* ── 19. FORM ────────────────────────────────────────────── */
.form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  text-align:     left;
}

.form__field { display: flex; flex-direction: column; gap: 0.375rem; }

.form__label { color: var(--meta); }

.form__input,
.form__select {
  width:            100%;
  min-height:       56px;
  padding:          0 1rem;
  background-color: var(--paper);
  border:           1px solid rgba(43, 43, 40, 0.14);
  border-radius:    0;
  color:            var(--ink);
  font-size:        var(--text-body);
  letter-spacing:   var(--ls-body);
  transition:       border-color 0.2s;
  outline:          none;
}
.form__input::placeholder { color: var(--meta); }
.form__input:focus,
.form__select:focus { border-color: var(--brass); }

/* Error state: brass border, no red (palette-consistent) */
.form__input.is-error,
.form__select.is-error { border-color: var(--brass); border-width: 2px; }

.field-error-msg {
  color:          var(--brass);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  display:        none;
}
.field-error-msg.is-visible { display: block; }

/* Select wrapper with arrow */
.form__select-wrap { position: relative; }
.form__select-wrap::after {
  content:        '↓';
  position:       absolute;
  right:          1rem;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--meta);
  font-size:      0.8125rem;
}
.form__select { padding-right: 2.5rem; cursor: pointer; }

.form__submit { margin-top: 0.5rem; width: 100%; }

.form__risk {
  margin-top:  1rem;
  text-align:  center;
  color:       var(--meta);
  font-size:   0.875rem;
  line-height: 1.55;
}

/* Success state (replaces form on valid submit) */
.form__success {
  display:  none;
  padding:  3rem 0;
  text-align: center;
}
.form__success.is-visible { display: block; }

.form__success-text {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-display);
  color:          var(--ink);
  margin-bottom:  1.5rem;
}

.form__success-link {
  color:      var(--brass);
  transition: opacity 0.2s;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.form__success-link:hover { opacity: 0.65; }

/* ── 20. FULLSCREEN LINKS ───────────────────────────────── */
.fullscreen-links {
  background-color: var(--forest);
  position:         relative;
  overflow:         hidden;
}

.fullscreen-links__inner {
  display:               grid;
  grid-template-columns: 1fr 11fr;
  column-gap:            var(--col-gap);
  align-items:           start;
  padding-top:           var(--section-pad-v);
  padding-bottom:        var(--section-pad-v);
}

.fullscreen-links__category {
  padding-top:  0.5rem;
  color:        rgba(242, 239, 233, 0.72);
}

.fullscreen-links__list {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.fullscreen-links__link {
  font-family:    var(--font-display);
  font-size:      clamp(1.75rem, 1.155rem + 2.542vw, 2.375rem);
  font-weight:    400;
  line-height:    1.25;
  letter-spacing: var(--ls-display);
  color:          var(--linen);
  transition:     opacity 0.3s;
  display:        block;
  padding:        0.375rem 0;
}
.fullscreen-links__link:hover { opacity: 0.5; }

/* Image swap figures — absolute behind content */
.fullscreen-links__figure {
  position:       fixed;
  inset:          0;
  z-index:        -1;
  opacity:        0;
  transition:     opacity 0.3s;
  pointer-events: none;
}
.fullscreen-links__figure img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}
.fullscreen-links__figure.is-active { opacity: 0.18; }

/* ── 21. FAQ LIST (open, no accordion) ──────────────────── */
.faq-list {
  background-color: var(--linen);
}

.faq-list__inner {
  max-width: 760px;
  margin:    0 auto;
}

.faq-item {
  padding:    2.5rem 0;
  border-top: 1px solid rgba(138, 115, 85, 0.28);
}
.faq-item:last-child { border-bottom: 1px solid rgba(138, 115, 85, 0.28); }

.faq-item__question {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-style:     italic;
  font-weight:    400;
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-display);
  color:          var(--ink);
  margin-bottom:  1rem;
}

.faq-item__answer { color: var(--ink); }

.faq-list__mailto {
  display:        block;
  margin-top:     2.5rem;
  color:          var(--brass);
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition:     opacity 0.2s;
}
.faq-list__mailto:hover { opacity: 0.65; }

/* ── 22. CASE STUDY PATTERNS ────────────────────────────── */

/* Split-65 asymmetric opener (Zilā muiža documentary style) */
.split-65 {
  display:               grid;
  grid-template-columns: 5fr 7fr;
  column-gap:            var(--col-gap);
  align-items:           center;
}
.split-65__text { padding-right: var(--col-gap); }
.split-65__media { aspect-ratio: 4/3; overflow: hidden; }
.split-65__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Full-viewport reveal stage: sketch under, built wipes over */
.reveal-stage {
  position:   relative;
  width:      auto;
  height:     80vh;
  overflow:   hidden;
  margin-left:  calc(-1 * var(--site-pad));
  margin-right: calc(-1 * var(--site-pad));
}
.reveal-stage__sketch {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
/* Built reveal: left-to-right, scrub-based (Motion Engineer) */
.reveal-stage__built {
  position:    absolute;
  inset:       0;
  width:       100%;
  height:      100%;
  object-fit:  cover;
}
.js .reveal-stage__built {
  clip-path:   polygon(0 0, 0 0, 0 100%, 0 100%);
  will-change: clip-path;
}

/* Deliverables list */
.deliverables__list {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  margin-top:     1.5rem;
}
.deliverables__item {
  display:     flex;
  align-items: baseline;
  gap:         1rem;
  font-size:   var(--text-body);
  color:       var(--ink);
}
.deliverables__item::before {
  content:      '-';
  color:        var(--brass);
  flex-shrink:  0;
  font-family:  var(--font-display);
}

/* Breadcrumb */
.breadcrumb {
  padding:  1rem var(--site-pad);
  display:  block;
}

/* ── 23. CTA BAND ───────────────────────────────────────── */
.cta-band {
  background-color: var(--linen);
  text-align:       center;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              1.5rem;
}
.cta-band--forest {
  background-color: var(--forest);
}
.cta-band h2 { max-width: 640px; }

/* ── 24. BUTTON SYSTEM ──────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  overflow:        hidden;
  height:          48px;
  padding:         0 2rem;
  border:          1px solid var(--brass);
  border-radius:   0;
  background:      transparent;
  cursor:          pointer;
  font-family:     var(--font-label);
  font-size:       var(--text-label);
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  color:           var(--ink);
  transition:      color var(--t-btn), border-color var(--t-btn);
}
.btn .btn__bg {
  position:   absolute;
  inset:      0;
  background: #6E5A41;
  transform:  translateY(100%);
  transition: transform var(--t-btn);
  z-index:    0;
}
.btn > span {
  position:   relative;
  z-index:    1;
  transition: color 0.15s 0.15s;
}
.btn:hover .btn__bg { transform: translateY(0); }
.btn:hover > span   { color: var(--forest); }

/* Light variant (on forest background) */
.btn--light {
  border-color: rgba(242, 239, 233, 0.45);
  color:        var(--linen);
}
.btn--light .btn__bg { background: rgba(242, 239, 233, 0.1); }
.btn--light:hover > span { color: var(--linen); }

/* Solid brass */
.btn--brass {
  background:  #6E5A41;
  border-color: var(--brass);
  color:       var(--forest);
}
.btn--brass .btn__bg { background: rgba(23, 28, 24, 0.18); }
.btn--brass:hover > span { color: var(--forest); }

/* ── 25. FOOTER ─────────────────────────────────────────── */
.footer {
  background-color: var(--forest);
  color:            var(--linen);
  position:         relative;
  overflow:         hidden;
}

.footer__sketch-bg {
  position:       absolute;
  bottom:         -5%;
  right:          -5%;
  width:          clamp(200px, 40vw, 500px);
  opacity:        0.03;
  pointer-events: none;
}

.footer__body {
  display:               grid;
  grid-template-columns: 4fr 4fr 4fr;
  column-gap:            var(--col-gap);
  padding-top:           var(--section-pad-v);
  padding-bottom:        calc(var(--section-pad-v) * 0.5);
  position:              relative;
  z-index:               1;
}

.footer__bureau-name {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  letter-spacing: var(--ls-display);
  margin-bottom:  0.75rem;
  color:          var(--linen);
}

.footer__address-line,
.footer__phone,
.footer__wa {
  display:        block;
  color:          rgba(242, 239, 233, 0.72);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height:    2.2;
  transition:     color 0.2s;
}
.footer__phone:hover,
.footer__wa:hover { color: var(--linen); }

.footer__nav { display: flex; flex-direction: column; }

.footer__nav-link {
  display:        block;
  color:          rgba(242, 239, 233, 0.72);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height:    2.2;
  transition:     color 0.2s;
}
.footer__nav-link:hover { color: var(--linen); }

.footer__right {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

/* Legal strip */
.footer__legal {
  border-top:  1px solid rgba(242, 239, 233, 0.1);
  padding:     1.5rem 0;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         1rem;
  flex-wrap:   wrap;
  position:    relative;
  z-index:     1;
}

.footer__imprint,
.footer__copy {
  color:          rgba(242, 239, 233, 0.72);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.footer__legal-links { display: flex; gap: 1.5rem; }

.footer__legal-link {
  color:          rgba(242, 239, 233, 0.72);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition:     color 0.2s;
}
.footer__legal-link:hover { color: rgba(242, 239, 233, 0.7); }

/* ── 26. MOBILE FIXED BOTTOM BAR ────────────────────────── */
/* Shown by JS after 500px scroll; hidden within 300px of form */
.bottom-bar {
  display:          none;
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  height:           56px;
  background-color: #6E5A41;
  align-items:      center;
  justify-content:  center;
  z-index:          90;
  transform:        translateY(100%);
  transition:       transform 0.35s var(--ease-reveal);
}
.bottom-bar.is-visible {
  display:   flex;
  transform: translateY(0);
}
.bottom-bar.is-hidden { transform: translateY(100%); }

.bottom-bar__link {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          100%;
  height:         100%;
  color:          var(--forest);
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ── 27. COOKIE BANNER ──────────────────────────────────── */
.cookie-banner {
  position:         fixed;
  bottom:           1.5rem;
  left:             1.5rem;
  right:            auto;
  max-width:        480px;
  background-color: var(--forest);
  border:           1px solid rgba(242, 239, 233, 0.1);
  padding:          1.25rem 1.5rem;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              1.5rem;
  z-index:          998;
}
.cookie-banner.is-hidden { display: none; }

.cookie-banner__text {
  flex:           1;
  color:          rgba(242, 239, 233, 0.6);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.cookie-banner__accept {
  flex-shrink:    0;
  height:         36px;
  padding:        0 1.25rem;
  background:     #6E5A41;
  color:          var(--forest);
  border:         none;
  cursor:         pointer;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition:     opacity 0.2s;
}
.cookie-banner__accept:hover { opacity: 0.85; }

/* ── 28. FOCUS ───────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--brass);
  outline-offset: 3px;
}

/* ── 29. REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration:       0.01ms !important;
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* All images/videos fully visible immediately */
  [data-reveal] img,
  [data-reveal] video,
  .gallery-img__built,
  .reveal-stage__built,
  .hero-film__video {
    clip-path:   none !important;
    will-change: auto;
  }
  [data-reveal-text] {
    opacity:   1 !important;
    transform: none !important;
  }
  /* No pin on mobile or reduced-motion (spatial confusion) */
  .sticky-gallery__meta { position: relative !important; }
}

/* ── 30. RESPONSIVE 768px ───────────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  .nav__items  { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero-film__copy { left: 6vw; bottom: 14vh; }
  .hero-film__stat:nth-child(n+3) { display: none; }

  /* Sticky gallery: stacked, no pin */
  .sticky-gallery__panel-inner { flex-direction: column; }
  .sticky-gallery__meta {
    position:    relative;
    top:         auto;
    width:       100%;
    height:      auto;
    padding:     var(--section-pad-v) var(--site-pad) 2rem;
  }
  .sticky-gallery__media { margin-left: 0; padding: 0 var(--site-pad) var(--section-pad-v); }

  /* Process: single column, vertical line hidden, horizontal indicator */
  .process-band__inner { grid-template-columns: 1fr; }
  .process-line { display: none; }
  .process-band__heading { grid-column: 1; grid-row: 1; }
  .process-band__stages  { grid-column: 1; grid-row: 2; padding-left: 1.5rem; position: relative; }
  .process-band__stages::before {
    content:   '';
    position:  absolute;
    left:      0;
    top:       0.5rem;
    bottom:    0.5rem;
    width:     2px;
    background: rgba(138, 115, 85, 0.2);
  }
  .process-band__cta-link { grid-column: 1; grid-row: 3; }

  /* Architects */
  .architects__grid { grid-template-columns: 1fr; }

  /* Split-65 */
  .split-65 { grid-template-columns: 1fr; }
  .split-65__text { padding-right: 0; margin-bottom: 1.5rem; }

  /* Fullscreen links */
  .fullscreen-links__inner { grid-template-columns: 1fr; gap: 2rem; }

  /* Footer */
  .footer__body { grid-template-columns: 1fr 1fr; }
  .footer__right { grid-column: 1 / -1; }

  /* Bottom bar */
  .bottom-bar { display: flex; }

  /* CTA form: no fixed bg on mobile (repaint jank) */
  .cta-form__bg { background-attachment: scroll; }

  /* Footer legal */
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── 31. RESPONSIVE 480px ───────────────────────────────── */
@media (max-width: 480px) {

  .footer__body { grid-template-columns: 1fr; }

  /* Quote slightly smaller on small phones */
  .quote-chapter__quote { font-size: clamp(1.375rem, 1.2rem + 0.833vw, 1.625rem); }

  /* Fullscreen links: tighter font */
  .fullscreen-links__link { font-size: clamp(1.5rem, 1.3rem + 0.889vw, 1.75rem); }

  /* Form: larger touch targets */
  .form__input, .form__select { min-height: 64px; }

  /* Film chapter edge-to-edge */
  .film-chapter { padding-left: 0; padding-right: 0; }
  .film-chapter__label,
  .film-chapter__caption { padding-left: var(--site-pad); padding-right: var(--site-pad); }
}

/* ── 32. UTILITY ─────────────────────────────────────────── */
.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;
}
.text-center { text-align: center; }
.text-brass  { color: #6E5A41; }
.mt-auto     { margin-top: auto; }

/* ── 33. PROOF CLUSTER LAYER ─────────────────────────────────
   Builder A append — used only by projekti.html and the three
   projekts-*.html case pages. Composes the dom-contract
   vocabulary; no new motion hooks introduced. */

/* Opener offset for pages without a full-bleed hero (fixed nav) */
.page-opener {
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem));
}

/* Breadcrumb — case-study pages only; overlays content just
   below the fixed nav, scrolls away with the page */
.breadcrumb {
  position: absolute;
  top:      var(--nav-height);
  left:     0;
  right:    0;
  z-index:  50;
  padding:  1.5rem var(--site-pad) 0;
}
.breadcrumb a { transition: opacity 0.2s; }
.breadcrumb a:hover { opacity: 0.6; }
.breadcrumb--over-dark,
.breadcrumb--over-dark a { color: rgba(242, 239, 233, 0.72); }

/* Reveal stage deployed as a direct full-bleed section */
section.reveal-stage {
  width:        100%;
  margin-left:  0;
  margin-right: 0;
}

/* Section eyebrow */
.section-eyebrow {
  display:       block;
  color:         var(--meta);
  margin-bottom: 1.5rem;
}

/* Editorial project grid (projekti.html) — static evidence,
   no hover motion per brief §9 */
.project-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:            var(--col-gap);
  row-gap:               clamp(3rem, 2rem + 4vw, 5rem);
  align-items:           start;
}
.project-grid__item { display: block; }
.project-grid__media {
  overflow:         hidden;
  background-color: var(--midtone);
}
.project-grid__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.project-grid__media--tall  { aspect-ratio: 4 / 5; }
.project-grid__media--short { aspect-ratio: 4 / 3; }
/* Staggered editorial rhythm: middle column drops */
.project-grid__item:nth-child(3n + 2) {
  margin-top: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.project-grid__name {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-display);
  margin-top:     1.25rem;
}
.project-grid__item .meta-tag {
  display:    block;
  margin-top: 0.5rem;
}

/* Case-study intro: story + metadata two-column */
.case-intro {
  display:               grid;
  grid-template-columns: 7fr 4fr;
  column-gap:            clamp(2rem, 1rem + 4.5vw, 6rem);
  align-items:           start;
  margin-top:            2.5rem;
}
.case-intro__story {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-weight:    400;
  line-height:    1.6;
  letter-spacing: var(--ls-display);
  max-width:      640px;
}
.case-intro__meta {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding-top:    0.5rem;
}

/* Single-column case story — 640px measure */
.case-story { max-width: 640px; }
.case-story h2 { margin-bottom: 1.5rem; }

/* Contained case video */
.case-video { overflow: hidden; }
.case-video video { width: 100%; height: auto; display: block; }
.case-video--wide { max-width: 1000px; margin: 0 auto; }
.case-video--wide video { aspect-ratio: 16 / 9; object-fit: cover; }
.case-video--portrait { max-width: 420px; margin: 0 auto; }
.case-video--portrait video {
  aspect-ratio:    9 / 16;
  object-fit:      cover;
  object-position: center 25%;
}

/* Built-result editorial grid (3 photos) */
.case-grid {
  display:               grid;
  grid-template-columns: 7fr 5fr;
  gap:                   var(--col-gap);
  margin-top:            2.5rem;
}
.case-grid__item { overflow: hidden; }
.case-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.case-grid__item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.case-grid__item:nth-child(2) { aspect-ratio: 16 / 10; }
.case-grid__item:nth-child(3) { aspect-ratio: 16 / 10; }

/* First-meeting question list (Koka māja opener) */
.question-list {
  max-width:  640px;
  margin-top: 2.5rem;
}
.question-list__lead { margin-bottom: 1rem; }
.question-list__item {
  font-family:    var(--font-display);
  font-size:      var(--text-h3);
  font-style:     italic;
  font-weight:    400;
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-display);
  padding:        1.25rem 0;
  border-top:     1px solid rgba(138, 115, 85, 0.28);
}
.question-list__item:last-child {
  border-bottom: 1px solid rgba(138, 115, 85, 0.28);
}

/* Deliverables inner + CTA spacing */
.deliverables__inner { max-width: 760px; }
.deliverables .btn { margin-top: 2.5rem; }

/* Fullscreen-links role label ("Nākamais projekts") */
.fullscreen-links__role {
  display:        block;
  font-family:    var(--font-label);
  font-size:      var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          rgba(242, 239, 233, 0.4);
  margin-bottom:  0.375rem;
}

/* CTA band side padding (flex section, no container) */
.cta-band {
  padding-left:  var(--site-pad);
  padding-right: var(--site-pad);
}

/* Opener rhythm — reset zeroes margins, openers need h1->p gap */
.page-opener h1 { margin-bottom: 1.5rem; }
.page-opener p  { max-width: 640px; }
.cta-band p     { max-width: 560px; }

/* Responsive — proof cluster */
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr 1fr;
    column-gap:            0.5rem;
    row-gap:               2.5rem;
  }
  .project-grid__item:nth-child(3n + 2) { margin-top: 0; }
  .project-grid__item:nth-child(even)   { margin-top: 2rem; }
  .case-intro { grid-template-columns: 1fr; row-gap: 2rem; }
  .case-intro__meta { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .case-grid { grid-template-columns: 1fr; }
  .case-grid__item:nth-child(1) { aspect-ratio: 16 / 10; }
  .reveal-stage { height: 60vh; }
}

/* a11y: breadcrumb + dim text on forest must clear 4.5:1 */
[data-scheme="forest"] .breadcrumb, [data-scheme="forest"] .breadcrumb a { color: rgba(242, 239, 233, 0.72); }

/* a11y: brass as small text fails 4.5:1 on linen; darker brass-text variant */
.faq-list__mailto, .process-band__cta-link, .sg-link, .sticky-gallery__link { color: #6E5A41; }
[data-scheme="forest"] .sg-link, [data-scheme="forest"] .sticky-gallery__link { color: rgba(242, 239, 233, 0.85); }

/* a11y final pass: every flagged small-text color cleared to >=4.5:1 */
.fullscreen-links__role { color: rgba(242, 239, 233, 0.72) !important; }
.bottom-bar__link { color: #F4F1EA; }
.bottom-bar { background: #6E5A41; }
.breadcrumb, .breadcrumb a { color: #5F5C57; }
[data-scheme="forest"] .breadcrumb, [data-scheme="forest"] .breadcrumb a { color: rgba(242, 239, 233, 0.72); }
#cookie-accept, .cookie-banner__accept { background: #6E5A41; color: #F4F1EA; }
.cta-band a:not(.btn), .faq-list__mailto, .process-band__cta-link { color: #6E5A41; }

/* a11y final: remaining flagged elements */
.section-eyebrow { color: #5F5C57; }
[data-scheme="forest"] .section-eyebrow { color: rgba(242, 239, 233, 0.72); }
#cookie-reject, .cookie-banner__btn--reject { color: #F4F1EA; }
.btn span, .nav__cta span { color: inherit; }