/* ==========================================================================
   MB AutoZorgas - custom stylesheet
   No framework. Mobile-first: base rules target phones, media queries add
   layout for wider screens. Brand values live in the :root variables below,
   so colours and spacing can be adjusted in one place.
   ========================================================================== */

:root {
  /* Brand palette */
  --navy:        #1B3A8C;
  --navy-dark:   #152E70;
  --blue:        #2E7BD6;
  --blue-light:  #EAF2FC;
  --orange:      #F7901E;
  --orange-dark: #DE7C0C;

  /* Neutrals */
  --white:       #FFFFFF;
  --grey-bg:     #F2F4F8;
  --grey-line:   #DDE3ED;
  --text:        #1F2633;
  --text-muted:  #5A6577;

  /* Type */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --space:       1rem;
  --space-lg:    2rem;
  --space-xl:    3.5rem;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 2px 8px rgba(27, 58, 140, .08);
  --shadow-lift: 0 8px 24px rgba(27, 58, 140, .16);
  --container:   1140px;
  --transition:  .18s ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--blue); }

h1, h2, h3 { line-height: 1.22; margin: 0 0 .6em; font-weight: 700; color: var(--navy); }
h1 { font-size: clamp(1.85rem, 6vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 4.5vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
.h3 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); color: var(--navy); margin: 0 0 .8em; font-weight: 700; }

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Keyboard users can jump straight to the content. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--white);
  padding: .7rem 1.1rem; text-decoration: none; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.15rem;
}

.center { text-align: center; }

/* Present for screen readers and the document outline, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .72rem 1.3rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-dark); color: var(--white); }

/* The tap-to-call button is the site's main conversion point: orange, biggest. */
.btn--call { background: var(--orange); color: #3A2200; box-shadow: var(--shadow); }
.btn--call:hover { background: var(--orange-dark); color: #3A2200; box-shadow: var(--shadow-lift); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--lg { padding: .95rem 1.7rem; font-size: 1.08rem; }
.btn--sm { padding: .45rem .9rem; font-size: .92rem; }

@media (max-width: 480px) {
  /* Full-width primary call button on narrow phones. */
  .hero .btn--lg { width: 100%; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding-top: .6rem;
  padding-bottom: .6rem;
}

.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: auto; height: 42px; }

.site-header__right { display: flex; align-items: center; gap: .6rem; }

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  padding: .4rem .55rem;
  border-radius: var(--radius);
}
.site-header__phone:hover { background: var(--blue-light); color: var(--navy); }
.site-header__phone span { font-size: .95rem; }

/* Hamburger (plain button, toggled by main.js) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block; height: 2px; width: 100%;
  background: var(--navy); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Navigation - collapsed on phones, inline from 768px up
   -------------------------------------------------------------------------- */
.site-nav { display: none; border-top: 1px solid var(--grey-line); background: var(--white); }
.site-nav.is-open { display: block; }

.site-nav__list { list-style: none; display: flex; flex-direction: column; }
.site-nav__list > li { border-bottom: 1px solid var(--grey-line); }
.site-nav__list > li:last-child { border-bottom: 0; }

.site-nav__link {
  display: block;
  padding: .85rem .2rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.site-nav__link:hover { color: var(--blue); }
.site-nav__link.is-current { color: var(--blue); }

.site-nav__cta-item { padding: .8rem .2rem; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; border-top: 0; }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
  }
  .site-nav__list > li { border-bottom: 0; }
  .site-nav__link {
    padding: .55rem .85rem;
    border-radius: var(--radius);
    position: relative;
  }
  .site-nav__link:hover { background: var(--blue-light); }
  .site-nav__link.is-current::after {
    content: "";
    position: absolute; left: .85rem; right: .85rem; bottom: .15rem;
    height: 2px; background: var(--orange); border-radius: 2px;
  }
  .site-nav__cta-item { display: none; } /* the header already shows the phone */
  .site-header__logo img { height: 52px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(46, 123, 214, .14), transparent 70%),
    var(--white);
  border-bottom: 1px solid var(--grey-line);
}

.hero__inner {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  text-align: center;
}

.hero__logo {
  width: auto;
  height: 96px;
  margin: 0 auto var(--space);
}

.hero__title { margin-bottom: .5em; }

.hero__intro {
  max-width: 58ch;
  margin: 0 auto 1.6rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.hero__note {
  margin: 1.1rem auto 0;
  max-width: 48ch;
  color: var(--navy);
  font-weight: 500;
  font-size: .97rem;
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .7rem .95rem;
  text-align: left;
}

@media (min-width: 768px) {
  .hero__inner { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .hero__logo { height: 130px; }
  .hero__note { text-align: center; border-left: 0; border-top: 3px solid var(--blue);
                border-radius: 0 0 var(--radius) var(--radius); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--space-lg) 0; }
.section--alt { background: var(--grey-bg); }
.section--narrow .container { max-width: 760px; }
.section--page-head { padding-bottom: 0; }

.section__title { margin-bottom: .45em; }
.section__lead {
  max-width: 62ch;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}
.section__action { margin: var(--space-lg) 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.section__action--center { justify-content: center; }

@media (min-width: 768px) {
  .section { padding: var(--space-xl) 0; }
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.service-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
}

.service-card {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.service-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.service-card__icon {
  width: 40px; height: 40px;
  fill: var(--blue);
  margin-bottom: .7rem;
}
.service-card__title { margin-bottom: .4em; }
.service-card__text { margin: 0; color: var(--text-muted); font-size: .96rem; }

@media (min-width: 560px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   "Why us"
   -------------------------------------------------------------------------- */
.advantage-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.advantage { padding-left: 1.1rem; border-left: 3px solid var(--orange); }
.advantage__title { margin-bottom: .35em; }
.advantage__text { margin: 0; color: var(--text-muted); font-size: .96rem; }

@media (min-width: 620px) { .advantage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .advantage-grid { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Works feed - "post cards" (/darbai)

   The works come from the business's Facebook Page, so each entry is presented
   as a post: brand mark + name + date, the text, a photo mosaic, and a link
   back to the original. Brand colours only - no imitation of Facebook's blue,
   icons or logo.
   -------------------------------------------------------------------------- */
.section--feed { padding-top: var(--space-lg); }

/* Heading, intro and cards share one centred column so their left edges line up.
   .container adds 1.15rem of padding on each side, so that is added back here
   to make the cards themselves exactly 680px wide on a wide screen. */
.feed-column { max-width: calc(680px + 2.3rem); }

.feed-head { margin-bottom: 2rem; }   /* ~32px between the intro and the first card */
.feed-head .section__title { margin-bottom: .4em; }
.feed-head__lead { margin: 0; color: var(--text-muted); }

.feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.post {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* --- header row --- */
.post__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem .75rem;
}

.post__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--white);
  border: 1px solid var(--grey-line);
  object-fit: contain;       /* the logo is letterboxed, never cropped */
  padding: 1px;
}

.post__head-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.post__author { font-weight: 600; color: var(--navy); font-size: 1rem; }
.post__date { font-size: .84rem; color: var(--text-muted); }

/* --- post text --- */
.post__body { padding: 0 1rem .9rem; }

.post__text {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: break-word;
}

/* Collapsed state for long posts; expanded by the "Rodyti daugiau" button.
   A fade at the bottom hints that there is more to read. */
.post__text--clamped {
  position: relative;
  max-height: 7.8em;
  overflow: hidden;
}
.post__text--clamped::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.4em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}

.post__more {
  margin-top: .45rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post__more:hover { color: var(--blue); }

/* --- photo mosaic ---
   One grid per photo count. Tiles are cropped with object-fit: cover and have
   fixed aspect ratios, so the card height never depends on the photos. */
.mosaic {
  display: grid;
  gap: 3px;
  background: var(--grey-line);
  grid-template-columns: repeat(6, 1fr);
}

.mosaic__tile {
  position: relative;
  display: block;
  grid-column: span 6;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--grey-bg);
  cursor: pointer;
  overflow: hidden;
}

.mosaic__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition), opacity var(--transition);
}
.mosaic__tile:hover .mosaic__image { transform: scale(1.03); opacity: .94; }

/* "+N" overlay on the last tile when there are more photos than tiles. */
.mosaic__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 46, 112, .62);
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 1 photo: full width */
.mosaic--1 .mosaic__tile { aspect-ratio: 4 / 3; }

/* 2 photos: side by side */
.mosaic--2 .mosaic__tile { grid-column: span 3; aspect-ratio: 1 / 1; }

/* 3 photos: one large on top, two below */
.mosaic--3 .mosaic__tile:nth-child(1) { grid-column: span 6; aspect-ratio: 16 / 9; }
.mosaic--3 .mosaic__tile:nth-child(2),
.mosaic--3 .mosaic__tile:nth-child(3) { grid-column: span 3; aspect-ratio: 1 / 1; }

/* 4 photos: 2x2 */
.mosaic--4 .mosaic__tile { grid-column: span 3; aspect-ratio: 1 / 1; }

/* 5 or more: two on top, three below (the last one carries the "+N") */
.mosaic--5 .mosaic__tile:nth-child(1),
.mosaic--5 .mosaic__tile:nth-child(2) { grid-column: span 3; aspect-ratio: 3 / 2; }
.mosaic--5 .mosaic__tile:nth-child(3),
.mosaic--5 .mosaic__tile:nth-child(4),
.mosaic--5 .mosaic__tile:nth-child(5) { grid-column: span 2; aspect-ratio: 1 / 1; }

/* On a narrow phone the three-across row gets short, so soften the crop. */
@media (max-width: 420px) {
  .mosaic--5 .mosaic__tile:nth-child(3),
  .mosaic--5 .mosaic__tile:nth-child(4),
  .mosaic--5 .mosaic__tile:nth-child(5) { aspect-ratio: 3 / 4; }
  .mosaic__more { font-size: 1.3rem; }
}

/* --- footer row --- */
.post__foot { padding: .8rem 1rem .9rem; border-top: 1px solid var(--grey-line); }

.post__source {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}
.post__source:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.post__source-icon { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

.post__fallback { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: .9rem 1rem; }

.empty-state {
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space);
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.empty-state .hero__note { text-align: left; }

/* --------------------------------------------------------------------------
   Works preview on the home page - compact cards linking to /darbai
   -------------------------------------------------------------------------- */
.work-preview-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
}

.work-preview {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.work-preview:hover { border-color: var(--blue); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.work-preview__link { display: block; text-decoration: none; color: inherit; }

.work-preview__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--grey-bg);
}

.work-preview__body { padding: .9rem 1rem 1.1rem; }
.work-preview__title { display: block; font-weight: 600; color: var(--navy); line-height: 1.35; }
.work-preview__meta { display: block; margin-top: .25rem; font-size: .85rem; color: var(--text-muted); }

@media (min-width: 600px) { .work-preview-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Lightbox: plain JS, no library. Hidden until a photo is clicked.
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  background: rgba(14, 22, 40, .93);
}
.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__image {
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--navy-dark);
}
.lightbox__caption { color: #E6ECF7; font-size: .92rem; padding-top: .7rem; }

.lightbox__close,
.lightbox__nav {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  transition: background-color var(--transition);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }

.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
.lightbox__nav--prev { order: -1; }

/* On phones the arrows sit at the bottom so they are reachable with a thumb. */
@media (max-width: 600px) {
  .lightbox { flex-wrap: wrap; align-content: center; }
  .lightbox__figure { flex: 1 0 100%; order: 1; }
  .lightbox__nav { order: 2; margin-top: .8rem; }
  .lightbox__nav--prev { order: 2; }
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-line);
  background: var(--grey-bg);
  line-height: 0;
}
.map iframe { width: 100%; height: 300px; border: 0; }
.map__link { margin: .7rem 0 0; font-size: .93rem; }

@media (min-width: 768px) { .map iframe { height: 380px; } }

/* --------------------------------------------------------------------------
   Contact strip (home page) - one compact navy band: a single line and the
   call button. The full contact details are in the footer only.
   -------------------------------------------------------------------------- */
.contact-strip { background: var(--navy); color: var(--white); padding: var(--space-lg) 0; }

.contact-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space);
}

.contact-strip__text {
  margin: 0;
  max-width: 52ch;
  font-size: 1.02rem;
  color: #E3EAF8;
}

@media (min-width: 760px) {
  .contact-strip__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  .contact-strip__text { font-size: 1.08rem; }
}

/* --------------------------------------------------------------------------
   Contacts page
   -------------------------------------------------------------------------- */
.contacts-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }

@media (min-width: 900px) {
  .contacts-layout { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
}

.detail-list { margin: 0 0 var(--space-lg); }
.detail-list dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-top: .9rem;
}
.detail-list dd { margin: .1rem 0 0; font-size: 1.05rem; }
.detail-list__strong { font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.detail-list__note { font-size: .97rem; color: var(--navy); font-weight: 500; }

.contacts-details .map { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { background: var(--grey-bg); border-radius: var(--radius-lg); padding: 1.25rem; }

.form__row { margin-bottom: 1rem; }

.form__label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: .3rem; color: var(--navy); }
.req { color: var(--orange-dark); }
.opt { font-weight: 400; color: var(--text-muted); font-size: .88rem; }

.form__input {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 123, 214, .16);
  outline: none;
}
.form__input.has-error { border-color: #C62828; background: #FFF7F7; }
.form__textarea { resize: vertical; min-height: 140px; }

.form__error { margin: .35rem 0 0; color: #C62828; font-size: .88rem; font-weight: 500; }
.form__note { margin: 1rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  border-radius: var(--radius);
  padding: .9rem 1.05rem;
  margin-bottom: var(--space);
  font-size: .96rem;
}
.alert--success { background: #E8F6EC; border-left: 4px solid #2E7D32; color: #1B5E20; }
.alert--error   { background: #FDECEC; border-left: 4px solid #C62828; color: #8E1C1C; }
.alert a { color: inherit; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.error-code {
  font-size: clamp(3.5rem, 16vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--blue-light);
  margin: 0 0 .1em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--grey-bg); border-top: 1px solid var(--grey-line); padding-top: var(--space-lg); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.site-footer__logo { width: auto; height: 54px; }
.site-footer__tagline { margin: .6rem 0 0; color: var(--text-muted); font-size: .95rem; }

.site-footer__heading { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); margin-bottom: .6em; }

.site-footer__list { list-style: none; }
.site-footer__list li { margin-bottom: .35rem; text-wrap: pretty; }
.site-footer__list a { font-weight: 600; text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }

.site-footer__links { list-style: none; margin-bottom: 1rem; }
.site-footer__links li { margin-bottom: .3rem; }
.site-footer__links a { font-weight: 500; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }

.site-footer__legal {
  border-top: 1px solid var(--grey-line);
  padding-top: 1rem;
  padding-bottom: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem;
  font-size: .87rem;
  color: var(--text-muted);
}
.site-footer__legal p { margin: 0; }

@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1.35fr 1.25fr; gap: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}