/* =========================================================================
   Out of Round — beta
   Light technical / architectural design system
   ========================================================================= */

:root {
	/* Palette (from brief) */
	--graphite: #172027;
	--warm-white: #f4f2ec;
	--paper: #fbfaf6;
	--copper: #a64b2a;      /* Akustika accent */
	--tech-blue: #285d7a;   /* IT accent */
	--line: #d7d4cc;        /* rules & borders */
	--muted: #5c6268;

	--copper-ink: #8a3d22;
	--blue-ink: #204b62;
	--brand-red: #dd0018;   /* oficiální logo Out of Round */

	/* Semantic */
	--bg: var(--warm-white);
	--fg: var(--graphite);
	--accent: var(--graphite);
	--accent-ink: var(--graphite);

	/* Type */
	--sans: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Metrics */
	--wrap: 1220px;
	--radius: 8px;
	--gap: clamp(1.5rem, 4vw, 3rem);
}

body.section-akustika { --accent: var(--copper); --accent-ink: var(--copper-ink); }
body.section-it       { --accent: var(--tech-blue); --accent-ink: var(--blue-ink); }

/* ---- Reset-ish --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	font-size: 1.0625rem;            /* ~17px */
	line-height: 1.6;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 700px) { body { font-size: 1.125rem; } }  /* ~18px */

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; margin: 0 0 .5em; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }   /* 36 -> 60 */
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1rem; max-width: 68ch; }
ul, ol { max-width: 68ch; }

.mono { font-family: var(--mono); }
.eyebrow {
	font-family: var(--mono);
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1rem;
	display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
	content: ""; width: 1.75rem; height: 2px; background: var(--accent); flex: none;
}

/* ---- Focus ----------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--graphite); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- Layout --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--paper); }

.grid { display: grid; gap: var(--gap); }
.grid > *, .hero__grid > * { min-width: 0; }
@media (min-width: 800px) {
	.grid-2 { grid-template-columns: 1fr 1fr; }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.lead { font-size: 1.15em; color: #2c343a; }

/* ---- Header / nav -------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--warm-white) 88%, transparent);
	backdrop-filter: saturate(140%) blur(6px);
	position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	padding-block: .85rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--graphite); flex: none; }
.brand__logo { height: 2rem; width: auto; display: block; }
.brand__tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; white-space: nowrap; align-self: center; padding-left: .7rem; border-left: 1px solid var(--line); }
@media (max-width: 560px) { .brand__tag { display: none; } .brand__logo { height: 1.8rem; } }

.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0; align-items: center; }
.nav a {
	display: block; padding: .5rem .8rem; text-decoration: none; color: var(--graphite);
	border-radius: 6px; font-size: .98rem;
}
.nav a:hover { background: #e9e6dd; }
.nav a.btn { color: #fff; }
.nav a.btn:hover { background: #000; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav a.is-akustika[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--copper); }
.nav a.is-it[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--tech-blue); }

.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.15rem; border-radius: 6px;
	font: inherit; font-size: .98rem; font-weight: 500;
	text-decoration: none; cursor: pointer;
	border: 1px solid var(--graphite);
	background: var(--graphite); color: #fff;
	transition: transform .06s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--graphite); }
.btn--akustika { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn--it { background: var(--tech-blue); border-color: var(--tech-blue); color: #fff; }
.btn--ghost.btn--akustika { background: transparent; color: var(--copper-ink); }
.btn--ghost.btn--it { background: transparent; color: var(--blue-ink); }
.btn--sm { padding: .5rem .85rem; font-size: .9rem; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex; margin-left: auto; align-items: center; gap: .5rem;
		background: transparent; border: 1px solid var(--line); border-radius: 6px;
		padding: .5rem .75rem; font: inherit; font-size: .9rem; cursor: pointer; color: var(--graphite);
	}
	.nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--warm-white); border-bottom: 1px solid var(--line);
		padding: .75rem clamp(1.1rem, 4vw, 2.5rem) 1.25rem;
	}
	.nav.is-open { display: block; }
	.nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
	.nav a { padding: .8rem .6rem; border-bottom: 1px solid var(--line); }
	.nav li:last-child a { border-bottom: 0; }
	.nav .btn { margin-top: .6rem; justify-content: center; }
}

/* ---- Hero --------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.hero__grid { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 950px) { .hero__grid { grid-template-columns: 55fr 45fr; } }
.hero h1 { margin-bottom: .35em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.hero__art { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }

/* ---- Cards ------------------------------------------------------- */
.card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	padding: clamp(1.25rem, 3vw, 2rem);
	display: flex; flex-direction: column; gap: .5rem;
}
.card--pad0 { padding: 0; overflow: hidden; }
.card__media { border-bottom: 1px solid var(--line); background: var(--warm-white); }
.card__body { padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: .5rem; }
.card h3 { margin-bottom: .15em; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card__tag {
	font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; background: var(--accent); padding: .2rem .5rem; border-radius: 3px; align-self: flex-start;
}
.card__tag--akustika { background: var(--copper); }
.card__tag--it { background: var(--tech-blue); }

.discipline { border-top: 3px solid var(--accent); }
.discipline--akustika { border-top-color: var(--copper); }
.discipline--it { border-top-color: var(--tech-blue); }

/* ---- Steps ----------------------------------------------------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 3.25rem; }
.step::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	position: absolute; left: 0; top: .05rem;
	font-family: var(--mono); font-size: .95rem; color: var(--accent);
	border: 1px solid var(--line); border-radius: 5px; padding: .15rem .4rem; background: var(--paper);
}

/* ---- People --------------------------------------------------- */
.person { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.1rem; align-items: start; }
.person__mark { width: 4.5rem; height: 4.5rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }
.person__role { font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .4rem; }
.person__meta { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .95rem; }
.person__meta li { margin-bottom: .2rem; }

/* ---- Lists of services --------------------------------------- */
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.ticks li::before {
	content: ""; position: absolute; left: 0; top: .58em;
	width: .7rem; height: .7rem; border: 2px solid var(--accent); border-top: 0; border-right: 0;
	transform: rotate(-45deg) translateY(-2px);
}

.deflist { border-top: 1px solid var(--line); }
.deflist > div { display: grid; gap: .2rem .5rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .deflist > div { grid-template-columns: 12rem 1fr; } }
.deflist dt { font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.deflist dd { margin: 0; }

/* ---- Callout ------------------------------------------------- */
.callout {
	border: 1px solid var(--line); border-left: 3px solid var(--accent);
	border-radius: var(--radius); background: var(--paper);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}
.callout p:last-child { margin-bottom: 0; }

/* ---- Forms ------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 500; margin-bottom: .35rem; }
.field .hint { font-size: .88rem; color: var(--muted); margin: .2rem 0 0; }
.field input, .field select, .field textarea {
	width: 100%; font: inherit; padding: .65rem .75rem;
	border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 1rem 1.1rem; border-radius: 6px; margin-bottom: 1.5rem; background: var(--paper); }
.notice--err { border-left-color: #b23b3b; }

fieldset.area-fields { border: 0; padding: 0; margin: 0; }
fieldset.area-fields[hidden] { display: none; }

/* ---- Footer ---------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); padding-block: clamp(2.5rem, 6vw, 4rem); font-size: .95rem; }
.site-footer h2 { font-size: .8125rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-footer a { color: var(--graphite); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--muted); font-family: var(--mono); font-size: .8rem; }

/* ---- Utility -------------------------------------------- */
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.measure { max-width: 68ch; }
.center { text-align: center; }
.muted { color: var(--muted); }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}