/* Direction B · Cinematic dark earth — ink/navy, sand accent, condensed uppercase display. */

.site-header { position: fixed; inset: 0 0 auto; background: rgba(22, 25, 30, .9); border-bottom-color: rgba(209, 190, 138, .2); }
.site-header .btn { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.site-header .btn:hover { background: #f1ece0; border-color: #f1ece0; }
.nav a { color: #cfd3da; }
.nav a:hover, .nav a[aria-current="page"] { color: #f1ece0; }
.nav-m .panel { background: var(--ink); }
.lede { font-size: var(--step-1); line-height: 1.45; color: #dcdfe4; max-width: 34ch; }
.sec-k { color: var(--sand); font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-7); }
.btn { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.btn:hover { background: #f1ece0; color: var(--ink); border-color: #f1ece0; }
.btn--ghost { background: transparent; color: #f1ece0; border-color: rgba(209, 190, 138, .6); }

/* ---------- Strata hero: sticky canvas stage + captions that scroll over it ---------- */
.b-hero { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.stage .poster, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .poster { object-fit: cover; object-position: 30% 50%; }
.stage canvas { opacity: 0; }
.js-canvas .stage canvas { opacity: 1; }
.js-canvas .stage .poster { visibility: hidden; }
.depth { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 18px; text-align: right; color: rgba(207, 211, 218, .5); }
.depth li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; transition: color var(--dur-2) var(--ease); }
.depth li::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width var(--dur-2) var(--ease); }
.depth li.on { color: var(--sand); }
.depth li.on::after { width: 44px; }

.steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 120px 80px; }
.cap { max-width: 600px; }
.cap .layer { color: var(--slate); margin-bottom: var(--s-4); }
.cap .num { font-family: var(--font-display); font-stretch: 66%; font-weight: 500; font-size: var(--step-3); color: var(--sand); line-height: 1; margin-bottom: var(--s-3); }
.cap h2 { font-size: var(--step-5); margin-bottom: var(--s-5); }
.cap p:not(.mono):not(.num) { font-size: var(--step-1); line-height: 1.5; color: #dcdfe4; max-width: 36ch; }
.intro h1 { font-size: var(--step-6); line-height: .9; margin: var(--s-5) 0 var(--s-6); }
.intro .mono { color: var(--sand); }
.intro .hint { margin-top: var(--s-8); color: var(--slate); }
@media (max-width: 900px) {
  .depth { top: auto; bottom: 24px; transform: none; gap: 8px; font-size: .68rem; }
  .depth li:not(.on) span { display: none; }
  .depth li::after { width: 10px; }
  .step { align-items: flex-start; padding-top: 140px; }
}

/* ---------- About ---------- */
.b-about { padding-block: var(--s-10) var(--s-9); border-top: 1px solid var(--line); }
.b-about h2 { font-size: var(--step-5); max-width: 16ch; margin-bottom: var(--s-8); }
.about-cols { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; }
.about-cols > p { font-size: var(--step-1); line-height: 1.55; max-width: 44ch; }
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.facts dt { color: var(--slate); }
.facts dd { margin: 0; font-family: var(--font-display); font-stretch: 66%; font-weight: 600; font-size: var(--step-3); color: var(--sand); text-transform: uppercase; }
@media (max-width: 900px) { .about-cols { grid-template-columns: 1fr; } }

/* ---------- Photos ---------- */
.b-photos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-inline: var(--gutter); max-width: 1600px; margin-inline: auto; align-items: end; }
.b-photos figure { margin: 0; }
.b-photos img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.05); }
.b-photos .p1 { grid-column: 1 / 9; aspect-ratio: 3 / 2; }
.b-photos .p2 { grid-column: 9 / 13; aspect-ratio: 3 / 4; transform: translateY(var(--s-8)); }
.b-photos figcaption { color: var(--slate); margin-top: var(--s-3); }
.b-photos .p2 img { height: calc(100% - 30px); }
@media (max-width: 900px) { .b-photos .p1, .b-photos .p2 { grid-column: 1 / -1; transform: none; } }

/* ---------- Services ---------- */
.b-svc { padding-block: calc(var(--s-10) + var(--s-6)) var(--s-9); }
.svc { border-top: 1px solid var(--line); }
.svc a { display: grid; grid-template-columns: 80px 5fr 6fr; gap: var(--s-6); align-items: baseline; padding-block: var(--s-6); border-bottom: 1px solid var(--line); text-decoration: none; }
.svc .mono { color: var(--sand); }
.svc .t { font-family: var(--font-display); font-stretch: 66%; font-weight: 600; text-transform: uppercase; font-size: var(--step-3); color: var(--heading); line-height: 1; transition: color var(--dur-1) var(--ease); }
.svc .s { color: var(--fg); max-width: 46ch; }
.svc a:hover .t { color: var(--sand); }
@media (max-width: 900px) { .svc a { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ---------- Novo ---------- */
.b-new { background: var(--sand); color: var(--ink); padding-block: var(--s-9); }
.b-new .wrap { display: grid; grid-template-columns: 3fr 9fr; column-gap: var(--s-6); }
.b-new .mono { color: var(--navy); }
.b-new h2 { color: var(--ink); font-size: var(--step-5); margin-bottom: var(--s-5); }
.b-new p:not(.mono) { grid-column: 2; font-size: var(--step-1); max-width: 48ch; line-height: 1.5; }
.b-new .btn { grid-column: 2; justify-self: start; margin-top: var(--s-6); background: var(--ink); color: #f1ece0; border-color: var(--ink); }
.b-new .btn:hover { background: var(--navy); border-color: var(--navy); }
@media (max-width: 900px) { .b-new .wrap { grid-template-columns: 1fr; } .b-new p:not(.mono), .b-new .btn { grid-column: 1; } }

/* ---------- Project index ---------- */
.b-index { padding-block: var(--s-10) var(--s-9); }
.pidx li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.pidx .nm { font-family: var(--font-display); font-stretch: 62%; font-weight: 600; text-transform: uppercase; font-size: var(--step-5); line-height: .98; color: var(--heading); transition: color var(--dur-1) var(--ease); }
.pidx .mono { color: #aab1bc; font-size: .8rem; text-align: right; flex: none; max-width: 40%; }
.pidx li:hover .nm { color: var(--sand); }
@media (max-width: 700px) { .pidx li { flex-direction: column; gap: 4px; } .pidx .nm { font-size: var(--step-3); } .pidx .mono { text-align: left; } }

/* ---------- Reference ---------- */
.b-ref { padding-block: var(--s-8) var(--s-9); border-top: 1px solid var(--line); }
.b-ref .partners { font-family: var(--font-display); font-stretch: 80%; font-size: var(--step-3); color: var(--heading); line-height: 1.15; max-width: 30ch; margin-bottom: var(--s-6); }
.b-ref p.mono { color: var(--slate); }

/* ---------- Usluge page ---------- */
.b-phead { position: relative; min-height: 78vh; display: flex; align-items: flex-end; padding: 140px 0 var(--s-8); overflow: hidden; border-bottom: 1px solid var(--line); }
.b-phead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; opacity: .7; }
.b-phead .wrap { position: relative; }
.b-phead .mono { color: var(--slate); }
.b-phead .mono a { color: var(--sand); text-decoration: none; }
.b-phead h1 { font-size: var(--step-6); line-height: .9; margin: var(--s-4) 0 var(--s-5); }
.b-phead .flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s-8); border-top: 1px solid var(--line); }
.b-phead .flow li { padding: var(--s-4) var(--s-4) 0 0; display: grid; gap: 4px; align-content: start; grid-template-rows: 2.6em auto; }
.b-phead .flow b { font-family: var(--font-display); font-stretch: 66%; text-transform: uppercase; font-size: var(--step-2); color: var(--heading); font-weight: 600; }
.b-phead .flow .mono { color: var(--sand); }
@media (max-width: 700px) { .b-phead .flow { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); } }

.b-ch .ch { padding-block: var(--s-9); border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.b-ch .wrap { display: grid; grid-template-columns: 2fr 5fr 5fr; gap: var(--s-7); align-items: start; }
.b-ch .num { font-family: var(--font-display); font-stretch: 62%; font-weight: 600; font-size: var(--step-6); color: var(--sand); line-height: .85; }
.b-ch h2 { font-size: var(--step-4); margin-bottom: var(--s-5); }
.b-ch .txt p { max-width: 46ch; }
.b-ch .tags { color: var(--slate); margin-top: var(--s-5); }
.b-ch figure { margin: 0; }
.b-ch img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.7) contrast(1.05); }
.b-ch .ch:nth-child(even) figure { order: -1; }
.b-ch .ch:nth-child(even) .wrap { grid-template-columns: 5fr 2fr 5fr; }
@media (max-width: 900px) {
  .b-ch .wrap, .b-ch .ch:nth-child(even) .wrap { grid-template-columns: 1fr; gap: var(--s-5); }
  .b-ch .ch:nth-child(even) figure { order: 0; }
  .b-ch .num { font-size: var(--step-5); }
}

.site-footer { background: #101317; border-top-color: var(--line); }
.site-footer h2 { color: #f1ece0; }
.site-footer .btn--ghost { color: #f1ece0; }
main { padding-top: 0; }