/* ==========================================================================
   Consilium Digitale, consiliumdigitale.lt
   Every value here comes from the Consilium Digitale Brandbook v1.0.
   Do not introduce colours, typefaces or effects that are not in it.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:root {
  /* --- colour, brandbook section 03 ------------------------------------ */
  --paper:      #FAF8F4;   /* base ground everywhere */
  --white:      #FFFFFF;   /* cards on paper only */
  --sand:       #F2EDE4;   /* surface, quiet bands */

  --navy:       #1E3A5F;   /* primary authority, the mark */
  --navy-900:   #0F1C2D;   /* deepest ground */
  --navy-800:   #162C48;
  --navy-500:   #3A5C86;

  --brass:      #8A6B3D;   /* expressive accent, 10 percent of the page */
  --brass-300:  #C89B54;   /* accents on dark grounds */

  --petrol:     #14524E;   /* secondary, unused on a page this small */
  --signal:     #2D6BD4;   /* interactive only, never decorative */

  --ink:        #14181C;
  --body:       #4D525A;
  --muted:      #6B6F78;
  --on-dark:    #A9B4C2;

  --rule:       #E4DED4;   /* warm hairline, the default on paper */
  --rule-cool:  #EEF0F2;
  --rule-dark:  #2A3E58;

  /* --- form and space, brandbook section 04 ---------------------------- */
  --radius:     3px;
  --shell:      1140px;
  --side:       clamp(20px, 5vw, 64px);
  --rhythm:     clamp(72px, 10vw, 128px);
  --header-h:   68px;

  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Instrument Sans', system-ui, sans-serif;

  --focus: var(--signal);
}

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--side);
}

/* --- headings. Serif 400 only, one italic navy accent word at most ------ */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
}
h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.15; }
h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; line-height: 1.3; }

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--navy);
}

.lead {
  font-size: clamp(17px, 1.8vw, 18px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--body);
  max-width: 34em;
}
.prose p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  max-width: 66ch;          /* the brandbook measure */
}
.prose p + p { margin-top: 1.1em; }

/* --- the eyebrow device, the only uppercase in the system --------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;      /* 24px clear beneath, per the brandbook */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow-dark { color: var(--brass-300); }

/* --- focus, signal blue is reserved for interactive states ------------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.contact :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible { outline-color: var(--brass-300); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--paper);
  padding: 12px 20px;
  font-size: 14px;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ============================== BUTTONS ================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-900); border-color: var(--navy-900); }

.btn-invert {
  background: var(--paper);
  color: var(--navy-900);
  border-color: var(--paper);
}
.btn-invert:hover { background: var(--white); border-color: var(--white); }

.btn-sm { min-height: 40px; padding: 10px 20px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }

/* --- quiet arrow links -------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease;
}
.link-arrow:hover { border-bottom-color: var(--brass); color: var(--brass); }
.link-on-dark { color: var(--paper); border-bottom-color: var(--rule-dark); }
.link-on-dark:hover { color: var(--brass-300); border-bottom-color: var(--brass-300); }

.ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5;
       stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.ico-xs { width: 13px; height: 13px; }

/* =============================== HEADER ================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

/* --- the horizontal lockup, mark height is cap height plus 30 percent --- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
}
.lockup-mark { width: 23px; height: 23px; flex: none; }
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark-roman  { color: var(--ink); }
.wordmark-italic { color: var(--navy); font-style: italic; }

.nav-desktop ul { display: flex; align-items: center; gap: 28px; }
.nav-desktop a {
  font-size: 15px;
  color: var(--body);
  text-decoration: none;
  transition: color .18s ease;
}
.nav-desktop a:hover { color: var(--ink); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.bars { display: block; width: 20px; }
.bars i {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
}
.bars i + i { margin-top: 5px; }

.nav-mobile {
  border-top: 1px solid var(--rule);
  padding: 12px var(--side) 24px;
  background: var(--paper);
}
.nav-mobile ul { display: grid; }
.nav-mobile a:not(.btn) {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.nav-mobile .btn { margin-top: 20px; }

/* ================================ HERO ================================== */
/* The hero has to clear the fold on a laptop. Windows display scaling means a
   1280 wide screen often reports only about 660 to 700 CSS pixels of height,
   so the padding and the arc are both sized to fit inside that, not inside a
   full 900. */
.hero {
  position: relative;
  overflow: hidden;               /* crops the oversized arc */
  padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px);
}
.hero-grid { position: relative; }
.hero-copy { position: relative; z-index: 1; max-width: 38rem; }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 36px; }

/* Composition one: oversized arc, cropped. Sits behind the copy on small
   screens at low presence, and beside it from 768px up. */
.hero-figure {
  position: absolute;
  top: 50%;
  right: calc(var(--side) * -1);
  translate: 0 -50%;
  width: min(52vw, 560px);
  opacity: .10;
  pointer-events: none;
}
.hero-figure img { width: 100%; height: auto; }

/* =============================== SECTIONS =============================== */
.section { padding-block: var(--rhythm); }
#apie { background: var(--sand); }

.section-head { margin-bottom: 32px; }
.prose-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 32px;
}

/* =============================== KONTAKTAI ============================== */
.contact {
  background: var(--navy-900);
  padding-block: var(--rhythm);
}
.contact h2 { color: var(--paper); margin-bottom: 20px; }
.contact h2 em { color: var(--brass-300); }
.lead-dark { color: var(--on-dark); }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}

/* ================================ FOOTER ================================ */
.site-footer {
  background: var(--navy-900);
  border-top: 1px solid var(--rule-dark);
  padding-block: 48px 0;
}
.footer-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-name {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--paper);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.footer-meta { font-size: 14px; color: var(--on-dark); }
.footer-links ul { display: grid; gap: 12px; }
.footer-links a {
  font-size: 14px;
  color: var(--on-dark);
  text-decoration: none;
  transition: color .18s ease;
}
.footer-links a:hover { color: var(--paper); }

.footer-base {
  border-top: 1px solid var(--rule-dark);
  padding-block: 22px 26px;
}
.footer-base p { font-size: 13px; color: var(--on-dark); }

/* ============================ SLAPUKŲ JUOSTA ============================
   The brandbook forbids shadows and glows, so this sits on the page with a
   hairline and a solid paper ground rather than lifting off it. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  background: var(--white);
  border-top: 1px solid var(--rule);
}
.consent[hidden] { display: none; }
.consent-inner {
  display: grid;
  gap: 16px;
  padding-block: 18px 20px;
}
.consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  max-width: 74ch;
}
.consent-text a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .btn { flex: 1 1 auto; min-width: 130px; }

.btn-outline {
  background: transparent;
  border-color: var(--rule);
  color: var(--body);
}
.btn-outline:hover { border-color: var(--muted); color: var(--ink); }

/* a button that has to read as a footer link */
.linkish {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--on-dark);
  cursor: pointer;
  transition: color .18s ease;
}
.linkish:hover { color: var(--paper); }

/* ============================= LEGAL PAGES ============================== */
.legal { padding-block: clamp(48px, 7vw, 88px) var(--rhythm); }
.legal-title { margin-bottom: 12px; }
.legal-date { font-size: 14px; color: var(--muted); margin-bottom: 48px; }
.legal-body { max-width: 66ch; }
.legal-body h2 {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.3;
  margin: clamp(36px, 4vw, 52px) 0 14px;
}
.legal-body h2 .sn { color: var(--brass); margin-right: 8px; }
.legal-body p { font-size: 16px; line-height: 1.7; color: var(--body); }
.legal-body p + p { margin-top: 1.1em; }
.legal-list { margin: 0 0 1.2em; padding-left: 1.15em; list-style: disc; }
.legal-list li { margin-bottom: .55em; line-height: 1.7; }
.legal-list li::marker { color: var(--brass); }
.legal-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.legal-back:hover { color: var(--brass); }

/* Tables are wider than a phone, so each scrolls inside its own container
   rather than pushing the whole page sideways. */
.legal-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5em;
}
.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.legal-table-kv { min-width: 0; }
.legal-table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.legal-table td,
.legal-table tbody th {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.6;
  color: var(--body);
  min-width: 9rem;
}
.legal-table tbody th {
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.legal-table-kv td,
.legal-table-kv tbody th { min-width: 0; }
.legal-table-kv tbody th { width: 38%; }
.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--sand);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 767px) {
  .nav-desktop, .nav-cta { display: none; }
}

@media (min-width: 768px) {
  .nav-toggle, .nav-mobile { display: none; }

  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; }
  .hero-figure {
    position: relative;
    top: auto; right: auto; translate: none;
    width: auto;
    opacity: 1;
    margin-right: calc(var(--side) * -2);
  }
  /* sized so the copy, not the arc, sets the hero height */
  .hero-figure img { width: min(100%, 380px); margin-left: auto; }

  .apie-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); }
  .section-head { margin-bottom: 0; }

  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
  .footer-links ul { justify-items: end; }

  .consent-inner { grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
  .consent-actions .btn { flex: 0 0 auto; }
}

/* Short laptop screens, which is most of them once Windows scaling is on.
   Tighten the hero further so the heading, the line under it and the button
   are all above the fold. */
@media (min-width: 768px) and (max-height: 760px) {
  h1 { font-size: clamp(34px, 4.6vw, 56px); }
  .hero { padding-block: 48px 64px; }
  .hero h1 { margin-bottom: 20px; }
  .hero .lead { margin-bottom: 30px; }
  .hero-figure img { width: min(100%, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}