/* ==========================================================================
   Stridebytes Consulting · styles
   Editorial direction: warm paper, serif display (Newsreader), sans body
   (Hanken Grotesk), one blue accent. No ↗ arrows, no em dashes in copy.
   ========================================================================== */

/* ---------- fonts (self-hosted, SIL OFL, see assets/fonts/OFL-*.txt) ----------
   Variable fonts subset to Latin + Romanian (ă â î ș ț), weights and optical
   sizes limited to what the site uses: Newsreader roman opsz 22-72 (no upright
   serif text below 22px), italic opsz 15-72. Setting serif text smaller than
   that renders it with the nearest optical size. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/newsreader-roman.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/newsreader-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/hanken-grotesk.woff2') format('woff2');
}

:root {
  --paper: #F4F1EA;
  --paper-tint: #ECE8DE;
  --surface: #FBFAF6;
  --white: #FFFFFF;
  --ink: #1B1D19;
  --text-2: #4E524A;
  --muted: #5A5E55;
  --line: #D9D5CA;
  --selected: #E3DED2;   /* selected language and service tab: a darker paper, outlined in ink */
  --chip-line: #CFCABD;
  --sage: #E4E7DA;
  --sage-line: #C4CAB6;
  --sage-text: #49513F;
  --sage-ink: #3D4A33;
  --sage-label: #565F4E;
  --ok-bg: #E3EBDD;
  --ok: #2E6B2A;

  --accent: #2B4BC0;
  --accent-hover: #2240A8;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 84px;
  --radius: 6px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: italic; }
::selection { background: #D7DFFB; color: #203887; }
/* accent ring: at least 5.9:1 on every light surface (the lighter #7A94EA was under 3:1) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* hidden="until-found" (the inactive service tab, js/main.js) must stay findable: find in page and text links open it */
[hidden]:not([hidden="until-found"]) { display: none !important; }
/* js/main.js sets it for one instant jump after the service tabs change the page height on load */
html.no-smooth-scroll { scroll-behavior: auto; }
.nowrap { white-space: nowrap; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* the hero and About are inset: their 1200px max includes the gutters (as in the canvas) */
.container-inset { max-width: var(--container); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 12px 18px; background: var(--white); border-radius: 4px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px;
  border: 0; border-radius: 5px;
  font-size: 15px; line-height: 1; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s;
}
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { display: flex; width: 100%; height: 48px; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-light { background: var(--white); color: var(--accent); }
.btn-light:hover { background: #EEF1FC; }
.btn[aria-disabled="true"] { cursor: progress; opacity: .75; }

.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.text-link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.text-link-plain {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.text-link-plain:hover { color: var(--accent); }

/* ---------- eyebrow / headings ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; line-height: normal; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow-accent { color: var(--accent); line-height: 1.6; }
.eyebrow-sage { color: var(--sage-label); }
.eyebrow-light { color: rgba(255, 255, 255, .85); }
.eyebrow-line { display: block; flex-shrink: 0; width: 28px; height: 1px; background: currentColor; }

h2 {
  margin-top: 20px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.03em;
}
h2 em { color: var(--accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 241, 234, .95);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 36px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.brand-mark { color: var(--accent); }
.brand-text { display: flex; flex-direction: column; gap: 5px; }
.brand-name { font-family: var(--serif); font-size: 26px; line-height: .9; font-weight: 500; letter-spacing: -0.6px; }
.brand-sub { font-size: 9px; line-height: 1; letter-spacing: 3.2px; text-transform: uppercase; padding-left: 1px; color: var(--muted); }
.brand-footer { gap: 10px; }
.brand-footer .brand-text { gap: 4px; }
.brand-footer .brand-name { font-size: 22px; letter-spacing: -0.5px; }
.brand-footer .brand-sub { font-size: 8px; letter-spacing: 2.8px; }

.nav-desktop { display: flex; gap: 36px; margin-left: auto; font-size: 14px; font-weight: 500; }
.nav-desktop a { padding: 12px 0; text-decoration: none; transition: color .18s; }
.nav-desktop a:hover { color: var(--accent); }

.menu-toggle {
  display: none; margin-left: auto; flex-shrink: 0;
  align-items: center; height: 40px; padding: 0 14px;
  border: 1px solid var(--chip-line); border-radius: 5px; background: transparent;
  font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
}
.menu-toggle > span { display: inline-flex; align-items: center; gap: 10px; }

/* language switch (Limba site-ului): RO and EN inside one pill outlined in ink, the current language
   a filled inner pill like the selected service tab. 40 px tall like the header button; each half
   takes taps up to 2 px beyond the outline, so its target is 44 px tall, and 44 px wide when only
   the flags show (see responsive). The names stay for screen readers when the letters hide. */
.lang-switch {
  display: flex; flex-shrink: 0;
  margin-right: -16px; /* 20 px from the header button, 36 px from the nav */
  padding: 3px; border: 1px solid var(--ink); border-radius: 999px;
}
.lang-switch a {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; min-width: 40px; padding: 0 13px; border-radius: 999px;
  font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 1px;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.lang-switch a::before { content: ''; position: absolute; inset: -6px 0; }
.lang-switch a:first-child::before { left: -4px; }
.lang-switch a:last-child::before { right: -4px; }
.lang-switch a:not([aria-current]):hover { color: var(--accent); background: rgba(43, 75, 192, .08); }
.lang-switch a[aria-current] { background: var(--selected); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* a hairline over the flag's edge keeps the yellow and white stripes from fading into the paper */
.lang-switch .flag { flex-shrink: 0; border-radius: 1.5px; outline: 1px solid rgba(27, 29, 25, .18); outline-offset: -1px; }
/* forced colours: the system highlight marks the current language; the flags keep their colours */
@media (forced-colors: active) {
  .lang-switch a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .lang-switch .flag { forced-color-adjust: none; }
}
.menu-toggle-close { display: none !important; }
.menu-toggle[aria-expanded="true"] .menu-toggle-open { display: none !important; }
.menu-toggle[aria-expanded="true"] .menu-toggle-close { display: inline-flex !important; }

.mobile-backdrop {
  position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
  background: rgba(27, 29, 25, .32);
}
.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px rgba(27, 29, 25, .12);
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.mobile-menu nav { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 28px; }
.mobile-menu nav > a:not(.btn) {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 30px; line-height: 1.1; letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-menu nav > a span { font-style: italic; font-size: 16px; color: var(--muted); }
.mobile-menu .btn { margin-top: 24px; }
.mobile-menu-contact { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.mobile-menu-contact a { text-decoration: none; }
.mobile-menu-contact a:hover { color: var(--accent); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 5.5vw, 80px); padding-bottom: clamp(64px, 7vw, 104px); }
.hero-title {
  margin-top: 28px; max-width: 1100px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.03em;
}
.hero-title em { color: var(--accent); }
.hero-title-short { display: none; }

.hero-row {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 6vw, 88px); align-items: start;
}
/* two columns from 1000px: the text takes 45% of the row, the screenshot 55% */
@media (min-width: 1000px) {
  .hero-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.hero-intro { max-width: 500px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.75; color: var(--text-2); }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-note { margin-top: 28px; max-width: 440px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.dot { flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #4F7A45; }

.hero-visual { min-width: 0; }
.browser {
  border-radius: 7px; overflow: hidden;
  border: 1px solid #DCD8CE; background: var(--white);
  box-shadow: 0 24px 60px rgba(37, 47, 36, .13), 0 2px 6px rgba(37, 47, 36, .06);
}
.browser-bar {
  box-sizing: content-box; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  background: #FAF9F6; border-bottom: 1px solid #E6E3DB;
}
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D3D0C8; }
.browser-bar span { margin: 0 auto; padding-right: 40px; font-size: 11px; letter-spacing: .3px; color: #6E7168; }
.browser a { display: block; }
/* the figure clips its overflow, so draw the focus ring inside the link */
.browser a:focus-visible { outline-offset: -3px; }
.browser img { width: 100%; height: auto; aspect-ratio: 1600 / 819; }

.checklist-card {
  position: relative; z-index: 2;
  width: min(306px, 74%);
  margin: clamp(-92px, -6vw, -36px) 0 0 clamp(-32px, -2vw, -8px);
  padding: clamp(13px, 1.44vw, 20px) clamp(14px, 1.62vw, 22px);
  background: var(--white); border: 1px solid #E2DED4; border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(31, 36, 28, .14);
  transform: rotate(-3deg); transform-origin: left top;
}
.checklist-title { font-size: 10px; line-height: normal; font-weight: 600; letter-spacing: 1.45px; text-transform: uppercase; color: var(--muted); }
.checklist-card ul { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }
.checklist-card li { display: flex; align-items: center; gap: 9px; font-size: 12.6px; line-height: 1.4; }
.check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.check svg { width: 11px; height: 11px; }

/* ---------- proof strip ---------- */
/* three items of different widths: equal space between them, first and last on the edges */
.proof {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 24px; padding: 32px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.proof div { display: flex; flex-direction: column; gap: 6px; }
.proof strong { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
.proof span { font-size: 14px; line-height: 1.5; color: var(--muted); }
/* client logos: one colour, sized by eye so the three read as equals (Hilti's solid box is set smaller) */
.proof-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; min-height: 35px; }
.proof .logo { display: block; flex-shrink: 0; height: 26px; width: auto; color: var(--ink); }
.proof .logo-sky { height: 28px; }
.proof .logo-hilti { height: 18px; }

/* ---------- sections ---------- */
.section { padding-block: var(--section-y); }
.section-tinted { background: var(--paper-tint); border-block: 1px solid #DED9CD; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px; margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head > div { flex: 1 1 560px; min-width: 0; }
.section-head-lg { margin-bottom: clamp(48px, 5vw, 72px); }
.section-desc { flex: 0 1 360px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.small-note { margin-top: 28px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- services ---------- */
.group-label {
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font-size: 12px; line-height: normal; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
}
.group-label-spaced { margin-top: clamp(48px, 5vw, 64px); }

/* audience tabs (WAI-ARIA tabs, js/main.js): pills on the ink rule the first group label drew.
   Outlined in ink, not chip-line, so they never read as the static chips below. */
/* equal widths: 1fr columns in a shrink-to-fit grid all take the widest label's width.
   The ink rule moves to the shown panel, since the tablist is only as wide as its tabs. */
.service-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; width: fit-content; margin-bottom: 14px; }
.service-panel[role="tabpanel"]:not([hidden]) { border-top: 1px solid var(--ink); }
.service-tab {
  height: 44px; padding: 0 14px;
  border: 1px solid var(--ink); border-radius: 999px; background: transparent;
  font-size: 14px; line-height: 1; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.service-tab[aria-selected="false"]:hover { border-color: var(--accent); color: var(--accent); }
/* selected: the darker paper fill plus a second pixel of ink, so the state never rests on the tint alone */
.service-tab[aria-selected="true"] { background: var(--selected); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); cursor: default; }
/* the global focus rule sets a 2px radius; keep the ring round */
.service-tab:focus-visible { border-radius: 999px; }
.service-panel:focus-visible { outline-offset: 8px; }
/* a jump to a panel (#pentru-echipe, /en/#for-teams) keeps the tabs above it in view: their height, 44 + 14 px.
   Set before JavaScript too, so a first paint at the hash lands where the tabs leave it (no shift). */
.service-panel { scroll-margin-top: 58px; }
/* phones: two equal halves of the row, the label a little smaller where the halves get narrow
   (it needs 150 px at 12.5 px); below 340 px, where even that doesn't fit, one under the other */
@media (max-width: 479.98px) {
  .service-tabs { width: auto; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .service-tab { padding: 0 8px; font-size: 13px; }
}
@media (max-width: 389.98px) {
  .service-tab { padding: 0 4px; font-size: 12.5px; }
}
@media (max-width: 339.98px) {
  .service-tabs { grid-template-columns: 1fr; }
  .service-panel { scroll-margin-top: 110px; }
}
/* forced colours drop the ink fill; mark the selected tab with the system highlight */
@media (forced-colors: active) {
  .service-tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline-color: CanvasText; }
}

.service {
  display: flex; flex-wrap: wrap; gap: 20px 48px;
  padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--line);
}
.service-head { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.service-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.service-num { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1; color: var(--muted); }
.service-icon {
  box-sizing: content-box; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--accent); color: var(--accent);
  display: grid; place-items: center;
}
.service h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.service-body { flex: 2 1 420px; min-width: 0; }
.service-body p { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.service-link { flex: 0 0 auto; align-self: flex-start; font-size: 14px; }
.service-body .service-price { margin-top: 16px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.service-body .service-start { margin-top: 16px; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--ink); }
/* a fixed head column, so the link's width no longer moves the body: every card's columns start at the same x */
@media (min-width: 1000px) {
  .service-head { flex: 0 0 max(300px, calc((100% - 96px) / 3)); }
}

.chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border: 1px solid var(--chip-line); border-radius: 999px; font-size: 13px; line-height: 1.4; }

/* optional features (add-ons): native disclosures, name and audience in the summary, the FAQ's plus and minus marker */
.addons-intro { margin-top: 20px; max-width: 640px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.addons {
  margin-top: clamp(24px, 3vw, 32px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 0 40px;
}
/* each item draws the rules above and below it; the -1px lets a row's top rule sit on the one above,
   so a short last row ends under its own items instead of boxing in an empty cell */
.addon { margin-top: -1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.addon summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 0;
}
.addon summary::-webkit-details-marker { display: none; }
.addon summary::after { content: '+'; content: '+' / ''; flex-shrink: 0; margin-top: 1px; color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; }
.addon details[open] summary::after { content: '\2212'; content: '\2212' / ''; }
.addon-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.addon-name { font-family: var(--serif); font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.addon-for { font-size: 13px; line-height: 1.5; color: var(--muted); }
.addon summary:hover .addon-name { color: var(--accent); }
.addon details p { padding: 0 40px 20px 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.addons-note { margin-top: clamp(24px, 3vw, 32px); max-width: 720px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.addons-note + .text-link { margin-top: 8px; }

/* ---------- projects ---------- */
.featured {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.featured-copy { min-width: 0; }
.badge-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ok-bg); color: #2B5527;
  font-size: 12px; line-height: normal; font-weight: 600; letter-spacing: .2px;
}
.badge-live span { width: 6px; height: 6px; border-radius: 50%; background: #3E7D36; }
.featured h3 { margin-top: 24px; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.featured-copy > p:not(.badge-live) { margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--text-2); }
.specs { margin-top: 28px; border-top: 1px solid var(--line); }
.specs div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { flex: 0 0 130px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.specs dd { flex: 1 1 220px; font-size: 15px; line-height: 1.6; }
.featured .text-link { margin-top: 24px; }

.devices { min-width: 0; }
.devices-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.device-tablet, .device-phone { position: relative; display: block; overflow: hidden; border: solid #1B1D19; }
.device-tablet {
  grid-column: 1 / 11; grid-row: 1;
  aspect-ratio: 4 / 3;
  border-width: clamp(7px, .8vw, 11px); border-radius: clamp(14px, 1.4vw, 20px);
  background: #FEFEFC; box-shadow: 0 22px 50px rgba(40, 36, 28, .18);
}
.device-phone {
  grid-column: 9 / 13; grid-row: 1; align-self: end; z-index: 2;
  aspect-ratio: 9 / 19;
  border-width: clamp(5px, .6vw, 7px); border-radius: clamp(18px, 2vw, 28px);
  background: #F9F2F0; box-shadow: 0 26px 54px rgba(40, 36, 28, .3);
}
.device-tablet img, .device-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device-tablet img { object-position: center top; }
.devices figcaption { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; line-height: 1.4; color: var(--muted); }

.concepts { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 32px; }
.concept { min-width: 0; }
.concept-frame { padding: clamp(20px, 3vw, 40px); border-radius: var(--radius); }
.concept-frame-forma { background: #DBDED2; }
.concept-frame-casa { background: #DED7C9; }
.concept-window { border-radius: 4px; overflow: hidden; padding: clamp(16px, 2vw, 24px); box-shadow: 0 18px 36px rgba(34, 43, 33, .16); }
.concept-forma { background: #EDEAE2; color: #344336; }
.concept-casa { background: #FAF5E9; color: #514E3F; }
.concept-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .4px; }
.forma-logo { font-size: 22px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.casa-logo { line-height: normal; padding-bottom: 14px; border-bottom: 1px solid #DDD8C7; text-align: center; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; }
.concept-heading { margin: 20px 0 14px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.08; letter-spacing: -0.02em; }
.concept-heading-center { margin-top: 16px; text-align: center; }
.concept-window img { width: 100%; height: auto; aspect-ratio: 2.2; object-fit: cover; object-position: center bottom; }
.concept-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 18px; }
.concept-info h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.3px; }
.concept-info p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.tag { flex-shrink: 0; line-height: normal; padding: 6px 9px; border: 1px solid #BDB8AA; border-radius: 3px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 44px 40px; }
.steps li { position: relative; padding-top: 28px; border-top: 1px solid var(--ink); }
.steps li::before {
  content: ''; position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--accent);
}
.steps li.step-highlight::before { background: var(--accent); }
.step-label { font-size: 12px; line-height: normal; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.steps h3 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.steps li > p:last-child { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---------- about ---------- */
.about {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: start;
  padding: clamp(28px, 5vw, 64px); background: var(--sage); border-radius: var(--radius);
}
.about h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; }
.about h2 em { color: var(--sage-ink); }
.about-body p { font-size: 17px; line-height: 1.8; color: var(--sage-text); }
.values { margin-top: 32px; border-top: 1px solid var(--sage-line); }
.values li { line-height: normal; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--sage-line); font-size: 15px; font-weight: 500; }
.values span { font-family: var(--serif); font-style: italic; color: var(--sage-label); }

/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(36px, 6vw, 88px); align-items: start; }
.faq-grid h2 + .text-link { margin-top: 16px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 20px 0;
  font-size: 17px; line-height: 1.4; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; content: '+' / ''; flex-shrink: 0; color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; content: '\2212' / ''; }
.faq summary:hover { color: var(--accent); }
.faq details p { padding: 0 40px 24px 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
.faq details p a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- contact ---------- */
.contact { padding-block: clamp(64px, 8vw, 112px); background: var(--accent); color: var(--white); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact h2 { margin-top: 24px; font-size: clamp(40px, 4.8vw, 68px); line-height: 1.04; }
.contact h2 em { color: rgba(255, 255, 255, .8); }
.contact-copy { margin-top: 24px; max-width: 420px; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .88); }
.contact-list { margin-top: 40px; max-width: 460px; border-top: 1px solid rgba(255, 255, 255, .3); }
.contact-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 15px; line-height: normal;
}
.contact-list li > span { color: rgba(255, 255, 255, .8); }
.contact-list a, .contact-list strong { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

.contact-form {
  min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px 16px; align-content: start;
  padding: clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13px; line-height: normal; font-weight: 500; color: rgba(255, 255, 255, .92); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid transparent; border-radius: 4px;
  background: var(--white); color: var(--ink); font-size: 16px; line-height: normal;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
/* invalid fields: dark red edge on the white control (6.5:1) plus a written message, not colour alone */
.field [aria-invalid="true"] { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.consent input[aria-invalid="true"] { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.field-error { font-size: 13px; line-height: 1.4; font-weight: 500; color: #FFFFFF; }
.field-error::before { content: "! "; content: "! " / ""; font-weight: 600; }
.field-error:empty { display: none; }
/* the default blue focus ring is too faint on the blue band */
.contact :focus-visible { outline-color: #FFFFFF; }
.consent { display: flex; align-items: flex-start; gap: 12px; }
.consent input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--white); }
.consent label { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.form-status { padding: 14px 16px; border-radius: 4px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); font-size: 14px; line-height: 1.6; }
/* the status is a live region, so it stays in the accessibility tree; it is only hidden visually while empty */
.form-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.form-status[data-state="error"] { border-color: #FFB4A8; }
.form-status[data-state="success"] { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { padding: 48px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 48px; }
.company { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.company strong { color: var(--ink); font-weight: 500; }
.company a { text-decoration: none; }
.company a:hover { color: var(--accent); }
.legal { display: flex; flex-direction: column; font-size: 13px; line-height: normal; }
.legal a { padding: 4px 0; text-decoration: none; }
.legal a:hover { color: var(--accent); }
.legal a.sal { margin-top: 14px; padding: 0; align-self: flex-start; }
.sal img { width: 250px; max-width: 100%; height: 50px; object-fit: contain; object-position: left center; }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 12px; line-height: normal; color: var(--muted);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- inner pages (legal pages, 404) ---------- */
.page-head { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-title {
  margin-top: 28px; max-width: 900px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -0.035em;
}
.page-title em { color: var(--accent); }
.page-lead { margin-top: 24px; max-width: 620px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.75; color: var(--text-2); }
.page-meta { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.page-head-404 { padding-bottom: var(--section-y); border-bottom: 0; }
.page-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.prose { padding-top: clamp(40px, 5vw, 64px); padding-bottom: var(--section-y); }
/* text keeps a reading width; tables may use the whole container */
.prose > * { max-width: 760px; }
.prose > .table-wrap { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em;
}
.prose h3 { margin-top: 32px; font-size: 17px; line-height: 1.4; font-weight: 600; }
.prose p, .prose li, .prose dd { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.prose p { margin-top: 16px; }
.prose ul { margin-top: 12px; }
.prose ul li { position: relative; margin-top: 8px; padding-left: 22px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.prose dl { margin-top: 16px; border-top: 1px solid var(--line); }
.prose dl > div { display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.prose dt { flex: 0 0 200px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.prose dd { flex: 1 1 280px; min-width: 0; }
.table-wrap { margin-top: 20px; overflow-x: auto; }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.prose th, .prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.prose td { color: var(--text-2); }
.toc { margin-top: 32px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.toc p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.toc ol { margin-top: 12px; columns: 2 240px; column-gap: 32px; counter-reset: toc; }
.toc li { break-inside: avoid; padding: 4px 0; font-size: 15px; line-height: 1.5; counter-increment: toc; }
.toc li::before { content: counter(toc) '. '; font-family: var(--serif); font-style: italic; color: var(--muted); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.legal a[aria-current="page"] { color: var(--accent); }

/* ---------- responsive ---------- */
/* small laptops: the nav, the language switch and the header button share the row with tighter gaps */
@media (min-width: 861px) and (max-width: 1023.98px) {
  .header-inner, .nav-desktop { gap: 24px; }
  .lang-switch { margin-right: -8px; }
}
@media (max-width: 860px) {
  .nav-desktop, .header-cta { display: none; }
  /* logo on the left; the language switch and the menu button together on the right */
  .header-inner { gap: 12px; }
  .lang-switch { margin: 0 0 0 auto; }
  .menu-toggle { display: inline-flex; margin-left: 0; }
  .proof { flex-direction: column; }
}
/* only the flags where the row is short of room: next to the full nav on the smallest laptops, and on phones */
@media (min-width: 861px) and (max-width: 959.98px), (max-width: 639.98px) {
  .lang-switch a { padding: 0; }
  .lang-switch a > span:not(.visually-hidden) { display: none; }
}
/* phones: the menu button shows its icon only, so the logo, the switch and the button fit one row
   down to 360 px. The label is clipped off to the left of the icon, not removed: it stays the
   button's name for screen readers */
@media (max-width: 639.98px) {
  .menu-toggle { width: 40px; padding: 0; justify-content: center; }
  .menu-toggle > span { width: 16px; overflow: hidden; justify-content: flex-end; }
  .menu-toggle svg { flex-shrink: 0; }
}
/* below 360 px the logo takes the footer's smaller size to leave room for both */
@media (max-width: 359.98px) {
  .header-inner { gap: 8px; }
  .site-header .brand { gap: 9px; }
  .site-header .brand-mark { width: 25px; height: 25px; }
  .site-header .brand-text { gap: 4px; }
  .site-header .brand-name { font-size: 21px; letter-spacing: -0.5px; }
  .site-header .brand-sub { font-size: 8px; letter-spacing: 2.8px; }
}
/* without JavaScript the "Meniu" button could not open anything: the section links take its place,
   as a row under the logo (the logo and the language switch keep the first row). Browsers that do not
   know `scripting` keep the button. The taller sticky header needs a larger scroll padding: two rows of
   links below 360 px. */
@media (max-width: 860px) and (scripting: none) {
  html { scroll-padding-top: 136px; }
  .menu-toggle { display: none; }
  .header-inner { flex-wrap: wrap; row-gap: 6px; min-height: 0; padding-block: 20px 6px; }
  .nav-desktop { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 0 20px; margin-left: 0; order: 1; }
}
@media (max-width: 359.98px) and (scripting: none) {
  html { scroll-padding-top: 181px; }
}
@media (max-width: 639.98px) {
  .hero-title-long { display: none; }
  .hero-title-short { display: inline; }
}

/* motion (js/main.js): blocks below the fold wait invisible until they scroll into view, then fade up.
   Only JavaScript adds .reveal-pending, and only when the visitor allows motion. */
.reveal-pending { opacity: 0; }
/* disclosures animate their height (js/main.js): clipped while they move, and the marker
   turns back to + as soon as one starts closing */
details.is-animating { overflow: hidden; }
.faq details.is-closing summary::after, .addon details.is-closing summary::after { content: '+'; content: '+' / ''; }

/* print shows both service groups under their labels, as without JavaScript */
@media print {
  .reveal-pending { opacity: 1 !important; }
  .service-tabs { display: none !important; }
  .service-panel[hidden], .service-panel .panel-label[hidden] { display: block !important; content-visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}