/* signature-web v3 · base/base.css  (reset + typography + layout + the four components every draft leaves generic) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-text); font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-body); font-kerning: normal; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--c-accent); color: var(--c-accent-ink); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }

/* ---- type roles (roles, not tags: a section title can be .t-h2 on an h3) ---- */
.t-display { font-family: var(--f-display); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-display); text-wrap: balance; }
.t-display-xl { font-family: var(--f-display); font-size: var(--t-display-xl); line-height: .92; letter-spacing: -.035em; font-weight: var(--w-display); text-wrap: balance; }
.t-h2 { font-family: var(--f-display); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); font-weight: var(--w-h2); text-wrap: balance; }
.t-h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; text-wrap: balance; }
.t-lead { font-size: var(--t-lead); line-height: 1.45; color: var(--c-ink-2); max-width: var(--measure); text-wrap: pretty; }
.t-body { font-size: var(--t-body); max-width: var(--measure); text-wrap: pretty; }
.t-small { font-size: var(--t-small); line-height: 1.5; }
.t-label { font-size: var(--t-label); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-3); }   /* FUNCTIONAL labels only: form fields, table heads, PRIEŠ/PO */
.t-caption { font-size: var(--t-small); line-height: 1.4; color: var(--c-ink-2); }   /* data captions, normal case: "Trakų raj. · 120 m² · 2025" */
.t-num { font-variant-numeric: tabular-nums lining-nums; }
.t-mono { font-family: var(--f-mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.accent { color: var(--c-accent); }
p + p { margin-top: 1em; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: none; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.sec { padding-block: var(--sec-top) var(--sec-bottom); }
.sec--tight { --sec-top: var(--sec-tight); --sec-bottom: var(--sec-tight); }
.sec--flush { --sec-top: 0; --sec-bottom: 0; }
.bg-2 { background: var(--c-bg-2); }
.hair-t { border-top: var(--hair); }
.hair-b { border-bottom: var(--hair); }

/* ---- photographs: always visible, never animated in; fixed aspect per role ---- */
.ph { position: relative; overflow: clip; background: var(--c-bg-2); border-radius: var(--r); }
.ph > img, .ph > video { width: 100%; height: 100%; object-fit: cover; }
.ph--3x2 { aspect-ratio: 3 / 2; } .ph--4x5 { aspect-ratio: 4 / 5; } .ph--1x1 { aspect-ratio: 1; } .ph--16x9 { aspect-ratio: 16 / 9; } .ph--21x9 { aspect-ratio: 21 / 9; } .ph--2x3 { aspect-ratio: 2 / 3; }
a.ph > img, .ph--link > img { transition: transform var(--d-media) var(--ease); transform-origin: 50% 50%; }
@media (hover: hover) and (pointer: fine) { a.ph:hover > img, .ph--link:hover > img { transform: scale(var(--zoom)); } }

/* ---- buttons: one system. vertical to horizontal padding about 1 : 1.9 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 26px; border-radius: var(--r-ctl); background: var(--c-ink); color: var(--c-bg); font-size: var(--t-small); font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: background-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease), transform var(--d-fb) var(--ease), border-color var(--d-ui) var(--ease); }
.btn:active { transform: scale(.98); }
.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-ink); }
.btn--phone { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--c-accent); color: var(--c-accent-ink); } .btn--ghost:hover { background: var(--c-ink); color: var(--c-bg); } }
.link { display: inline-flex; align-items: baseline; gap: 6px; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size var(--d-ui) var(--ease-io); }
@media (hover: hover) and (pointer: fine) { .link:hover { background-size: 40% 1px; } }
.link--arrow::after { content: "→"; transition: transform var(--d-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) { .link--arrow:hover::after { transform: translateX(4px); } }

/* ---- forms: every state designed; labels visible; button labelled with the outcome ---- */
.field { display: grid; gap: 6px; }
.field > label { font-size: var(--t-small); color: var(--c-ink-2); }
.field > input, .field > select, .field > textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-ctl); transition: border-color var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease); }
.field > textarea { min-height: 120px; resize: vertical; }
.field > input:hover, .field > textarea:hover { border-color: var(--c-ink-3); }
.field > input:focus-visible, .field > textarea:focus-visible, .field > select:focus-visible { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.field[data-state="error"] > input, .field[data-state="error"] > textarea { border-color: var(--c-accent); }
.field .msg { font-size: var(--t-small); color: var(--c-accent); min-height: 1.2em; }
.form-done { padding: var(--s-5); border: var(--hair); font-size: var(--t-small); }   /* inline confirmation, never alert() */

/* ---- reveal: hidden state ONLY under [data-anim] set by script; photos never carry .rv ---- */
[data-anim] .rv { opacity: 0; transform: translateY(var(--rise)); }
.rv { transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); transition-delay: var(--delay, 0ms); will-change: auto; }
[data-anim] .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-anim] .rv { opacity: 1; transform: none; transition: none; } }

/* ---- utilities ---- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot::before { content: "·"; margin-inline: .45em; color: var(--c-ink-3); }
.rail { display: flex; gap: var(--plate-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* ---- phone protocol (PHONE.md): content edits and phone rhythm ---- */
@media (max-width: 759px) {
  .m-hide, [data-phone="cut"] { display: none !important; }
  :root { --sec: clamp(48px, 13vw, 64px); --sec-tight: 40px; }
  .field > input, .field > select, .field > textarea { font-size: 16px; }
}
@media (min-width: 760px) { .m-only { display: none !important; } }