/* Direction A · Engineering precision — paper, navy type, sand hairlines, visible column grid. */

.site-header { background: var(--paper); border-bottom-color: var(--sand); }
main { position: relative; z-index: 1; }
.kicker { color: var(--muted); margin-bottom: var(--s-5); }
.kicker a { text-decoration: none; border-bottom: 1px solid var(--sand); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; color: var(--fg); }
.tag { display: inline-block; border: 1px solid var(--sand); padding: 2px 7px; margin: 0 6px 6px 0; font-size: 0.72rem; color: var(--navy); border-radius: var(--radius); }

/* visible 12-column grid */
.grid-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grid-lines .wrap { height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.grid-lines i { border-left: 1px solid rgba(209, 190, 138, .38); border-right: 1px solid rgba(209, 190, 138, .38); }
@media (max-width: 900px) { .grid-lines .wrap { grid-template-columns: repeat(4, 1fr); } .grid-lines i:nth-child(n+5) { display: none; } }

.g12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }

/* section heading: mono index in cols 1–3, statement in 4–12 */
.sec-h { display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; align-items: baseline;
  font-size: var(--step-3); padding-top: var(--s-5); border-top: 1px solid var(--navy); margin-bottom: var(--s-8); }
.sec-h > span { color: var(--muted); font-weight: 400; letter-spacing: .06em; font-stretch: normal; }
@media (max-width: 900px) { .sec-h { grid-template-columns: 1fr; row-gap: var(--s-3); } }

/* ---------- Hero with the self-drawing cross-section ---------- */
.a-hero { height: 240vh; }
.a-hero .stick { position: sticky; top: 77px; height: calc(100vh - 77px); min-height: 600px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.a-hero .copy { grid-column: 1 / 6; }
.a-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.9rem); margin-bottom: var(--s-6); }
.a-hero .ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.xs-fig { grid-column: 6 / 13; margin: 0; }
.xs-fig figcaption { display: flex; gap: var(--s-4); color: var(--muted); font-size: .7rem; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--sand); }
.xs-fig figcaption span { color: var(--navy); }
.xs { width: 100%; height: auto; max-height: calc(100vh - 160px); overflow: visible; }
.xs path, .xs rect { vector-effect: non-scaling-stroke; }
.xs .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.xs .axis path { stroke: var(--slate); stroke-width: 1; fill: none; }
.xs text { font: 500 11px var(--font-mono); fill: var(--navy); letter-spacing: .06em; }
.xs .axis text { fill: var(--slate); font-weight: 400; }
.xs .if { fill: none; stroke: var(--navy); stroke-width: 1.4; }
.xs .if:first-of-type { stroke-width: 2; }
.xs .frame { fill: none; stroke: var(--navy); stroke-width: .8; }
.xs .lbl rect { fill: var(--paper); stroke: var(--sand); }
.xs .gw path:first-child { stroke: var(--water); stroke-width: 1.4; stroke-dasharray: 7 5; fill: none; }
.xs .gw path + path { fill: var(--water); }
.xs .gw text { fill: var(--water); }
.xs .mast { fill: none; stroke: var(--navy); stroke-width: 1.5; }
.xs .hole { fill: none; stroke: var(--navy); stroke-width: 3; }
.xs .smp { fill: var(--sand); stroke: var(--navy); stroke-width: 1; }
.xs .tip { fill: var(--navy); }
.xs .bld path:first-child { fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 5 4; }
.xs .bld .fnd { fill: rgba(37, 54, 76, .14); stroke: var(--navy); stroke-width: 1.2; }
.xs .bld text { fill: var(--navy); font-size: 10px; }

@media (max-width: 900px) {
  .a-hero { height: auto; }
  .a-hero .stick { position: static; height: auto; min-height: 0; display: block; padding-block: var(--s-7) var(--s-6); }
  .xs-fig { margin-top: var(--s-7); }
  .xs { max-height: none; }
}

/* ---------- O nama: spec sheet ---------- */
.a-spec, .a-svc, .a-log, .a-ref { padding-block: var(--s-9); }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--sand); }
.spec > div { padding: var(--s-5) var(--s-5) var(--s-6) 0; border-bottom: 1px solid var(--sand); }
.spec > div + div { padding-left: var(--s-5); border-left: 1px solid var(--sand); }
.spec > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.spec .wide { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
.spec dt { color: var(--muted); margin-bottom: var(--s-3); }
.spec dd { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 500; font-size: var(--step-2); color: var(--navy); line-height: 1.15; }
.spec dd.std { font-family: var(--font-mono); font-stretch: normal; font-size: var(--step-0); line-height: 1.7; }
@media (max-width: 900px) {
  .spec { grid-template-columns: 1fr; }
  .spec > div, .spec > div + div { padding-left: 0; border-left: 0; }
}

/* ---------- Usluge list ---------- */
.svc-list { border-top: 1px solid var(--sand); }
.svc-list a { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-block: var(--s-5); border-bottom: 1px solid var(--sand); text-decoration: none; align-items: baseline;
  transition: background var(--dur-1) var(--ease); }
.svc-list a:hover { background: rgba(209, 190, 138, .16); }
.svc-list .no { grid-column: 1 / 2; color: var(--muted); }
.svc-list .t { grid-column: 2 / 5; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--step-1); color: var(--navy); line-height: 1.2; }
.svc-list .s { grid-column: 5 / 9; color: var(--fg); }
.svc-list .tags { grid-column: 9 / 13; text-align: right; }
@media (max-width: 900px) {
  .svc-list a { grid-template-columns: 40px 1fr; row-gap: var(--s-2); }
  .svc-list .t, .svc-list .s, .svc-list .tags { grid-column: 2; text-align: left; }
}

/* ---------- Novo ---------- */
.a-new { background: var(--navy); color: #e5e1d6; padding-block: var(--s-9); position: relative; }
.a-new .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.a-new .flag { grid-column: 1 / 4; color: var(--sand); }
.a-new h2 { grid-column: 4 / 13; color: var(--paper); font-size: var(--step-4); margin-bottom: var(--s-6); }
.a-new p:not(.flag) { grid-column: 4 / 10; font-size: var(--step-1); line-height: 1.5; }
.a-new .btn { grid-column: 4 / 13; justify-self: start; margin-top: var(--s-6); color: var(--paper); border-color: var(--sand); }
.a-new .btn:not(.btn--ghost) { background: var(--sand); color: var(--ink); }
.a-new .btn:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }
@media (max-width: 900px) { .a-new .wrap { display: block; } .a-new h2 { margin-top: var(--s-4); } }

/* ---------- Figures ---------- */
.a-figs { padding-block: var(--s-9) 0; }
.a-figs .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: var(--s-7); align-items: end; }
.a-figs figure { margin: 0; }
.a-figs img { width: 100%; border: 1px solid var(--sand); background: var(--white); }
.a-figs figcaption { margin-top: var(--s-2); color: var(--muted); font-size: .7rem; }
.a-figs figcaption span { color: var(--navy); margin-right: var(--s-3); }
.a-figs .f1 { grid-column: 1 / 8; }
.a-figs .f2 { grid-column: 8 / 13; }
.a-figs .f3 { grid-column: 4 / 9; }
.a-figs .f2 img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .a-figs .f1, .a-figs .f2, .a-figs .f3 { grid-column: 1 / -1; } }

/* ---------- Project log (borehole-log table) ---------- */
.log-scroll { overflow-x: auto; }
.log { width: 100%; border-collapse: collapse; }
.log th, .log td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--sand); vertical-align: middle; }
.log thead th { color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--navy); padding-block: 10px; }
.log tbody th { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--step-1); color: var(--navy); }
.log td.mono { color: var(--muted); white-space: nowrap; }
.log td:first-child { width: 7em; }
.log .strip { width: 56px; padding-right: 24px; }
.log tbody tr { transition: background var(--dur-1) var(--ease); }
.log tbody tr:hover { background: rgba(209, 190, 138, .16); }
.hx { display: block; width: 32px; height: 28px; border: 1px solid var(--navy); }
.hx-inf { background: #ece4d2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0' stroke='%2325364c' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.hx-vis { background: #f1e8cf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='.9' fill='%2325364c' fill-opacity='.55'/%3E%3Ccircle cx='6' cy='6' r='.9' fill='%2325364c' fill-opacity='.55'/%3E%3C/svg%3E"); }
.hx-ind { background: #dcd8cf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 .5h14M5 1v7' stroke='%2325364c' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.hx-ene { background: #e8dfc6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='2.4' fill='none' stroke='%2325364c' stroke-opacity='.5'/%3E%3C/svg%3E"); }
@media (max-width: 700px) {
  .log thead th:nth-child(2), .log thead th:nth-child(4), .log td.strip, .log tbody td:nth-child(4) { display: none; }
  .log td:first-child { width: auto; }
  .log tbody th { font-size: var(--step-0); }
  .log th, .log td { padding-right: 10px; }
}

/* ---------- Reference ---------- */
.ref-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.ref-grid > div:first-child { grid-column: 1 / 8; }
.ref-grid > div:last-child { grid-column: 9 / 13; }
.ref-grid p.mono { color: var(--muted); margin-bottom: var(--s-4); }
.ref-grid .big { font-family: var(--font-display); font-stretch: 112%; font-size: var(--step-2); color: var(--navy); line-height: 1.3; }
.ref-grid .std li { padding-block: var(--s-3); border-bottom: 1px solid var(--sand); color: var(--navy); text-transform: none; }
@media (max-width: 900px) { .ref-grid > div:first-child, .ref-grid > div:last-child { grid-column: 1 / -1; } .ref-grid > div + div { margin-top: var(--s-7); } }

/* ---------- Usluge page ---------- */
.a-phead { padding-block: var(--s-9) var(--s-8); }
.a-phead h1 { font-size: var(--step-6); margin-bottom: var(--s-6); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s-8); border-top: 1px solid var(--navy); counter-reset: f; }
.flow li { padding: var(--s-4) var(--s-4) 0 0; display: grid; gap: 4px; position: relative; }
.flow li + li { padding-left: var(--s-4); border-left: 1px solid var(--sand); }
.flow li b { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; color: var(--navy); font-size: var(--step-1); }
.flow li span:last-child { color: var(--muted); }
.flow .mono { color: var(--muted); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; row-gap: var(--s-5); } .flow li:nth-child(3) { padding-left: 0; border-left: 0; } }

.a-ulist { padding-bottom: var(--s-9); }
.u-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-block: var(--s-7); border-top: 1px solid var(--sand); scroll-margin-top: 90px; }
.u-row:first-child { border-top-color: var(--navy); }
.u-row .no { grid-column: 1 / 2; color: var(--muted); }
.u-main { grid-column: 2 / 8; }
.u-main h2 { font-size: var(--step-3); margin-bottom: var(--s-5); }
.u-main p { max-width: 58ch; }
.u-spec { grid-column: 9 / 13; margin: 0; }
.u-spec > div { padding-block: var(--s-3); border-bottom: 1px solid var(--sand); }
.u-spec dt { color: var(--muted); margin-bottom: 6px; }
.u-spec dd { margin: 0; }
@media (max-width: 900px) {
  .u-row { grid-template-columns: 40px 1fr; row-gap: var(--s-5); }
  .u-main, .u-spec { grid-column: 2; }
}

.site-footer { background: var(--paper); position: relative; z-index: 1; border-top-color: var(--navy); }
.site-footer .iso { border-top-color: var(--sand); }