/* =========================
   MachLab – Global Styles
   ========================= */

/* CSS variables (brand palette, radii, shadows, container) */
:root {
  --green-900: #0E3B1E;
  --green-700: #166534; /* deep accent */
  --green-600: #1a7d45; /* brand */
  --green-500: #22A64D; /* primary */
  --green-300: #7AD68F;
  --green-200: #C8F3D5;
  --green-100: #EAFBEF;

  --stone-900: #0b0f13;
  --stone-700: #2a323a;
  --stone-500: #5e6b78;

  --white: #ffffff;

  --radius-2xl: 24px;
  --shadow-lg: 0 20px 60px rgba(16, 55, 31, .18);
  --shadow-md: 0 10px 30px rgba(16, 55, 31, .14);

  --container: min(1120px, 92vw);
}

/* Resets / base */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--stone-900);
  background: linear-gradient(180deg, var(--white), var(--green-100));
  overflow-x: hidden;
}

/* =========================
   Layout Utilities
   ========================= */
.container {
  width: var(--container);
  margin-inline: auto;
}

.flex { display: flex; }

.center {
  align-items: center;
  justify-content: center;
}

/* Buttons */
.btn {
  --bg: var(--stone-900);
  --fg: var(--white);
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.25rem;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-md);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-ghost {
  --bg: transparent;
  --fg: var(--stone-900);
  border: 1px solid rgba(16, 55, 31, .12);
  backdrop-filter: saturate(160%) blur(4px);
}

.btn-primary { --bg: var(--green-600); }

   ========================= */
/* Header len hore, nie cez celé okno */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;     /* zrušili sme inset:0; (hlavne bottom) */
  z-index: 50;
  width: 100%;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 2rem;
  width: 100%;
  margin: 0;

  background: color-mix(in oklab, var(--white) 80%, transparent);
  border-bottom: 1px solid rgba(16, 55, 31, .08);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: var(--shadow-md);
  border-radius: 0;
}

/* Brand lockup */
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 800;
  letter-spacing: .5px;
}

.brand .logo {
  width: 38px;
  aspect-ratio: 1;
  border-radius: 12px;
  background:
    conic-gradient(from 120deg, var(--green-500), var(--green-300), var(--green-700));
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .7),
    0 6px 14px rgba(34, 166, 77, .35);
}

.brand-name { font-size: 1.05rem; }

/* Primary nav (desktop) */
nav.primary { display: none; }

@media (width >= 992px) {
  nav.primary {
    display: flex;
    gap: .2rem;
  }

  nav.primary a {
    padding: .7rem .9rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    color: var(--stone-900);
  }

  nav.primary a:hover {
    background: var(--green-100);
  }

  .hamburger { display: none; }
}

/* Hamburger (mobile) */
.hamburger {
  --size: 46px;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 12px;
  border: 1px solid rgba(16, 55, 31, .12);
  background: rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.hamburger span {
  position: relative;
  width: 22px;
  height: 2px;
  background: var(--stone-900);
  display: block;
}

.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.hamburger span::before { top: -7px; }
.hamburger span::after  { bottom: -7px; }

.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; rotate: 45deg; }
.hamburger[aria-expanded="true"] span::after  { bottom: 0; rotate: -45deg; }

/* =========================
   Full-screen Overlay Menu
   ========================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 20% 10%, color-mix(in oklab, var(--green-200) 50%, transparent), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, color-mix(in oklab, var(--green-300) 30%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .86));
  filter: saturate(120%) blur(6px);
}

.overlay nav {
  position: relative;
  display: grid;
  place-items: center;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.overlay a {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: 700;
  color: var(--green-900);
}

.overlay a .dot {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--green-500);
  box-shadow: 0 6px 16px rgba(34, 166, 77, .45);
}

.overlay .foot {
  padding: 1.2rem;
  text-align: center;
  color: var(--stone-500);
}

/* =========================
   Hero
   ========================= */
.hero {
  position: relative;
  padding: clamp(110px, 10vw, 140px) 0 96px;
  overflow: clip;

  /* Background image (adjust path if needed) */
  background: url("img/machlab-bg.jpg") center / cover no-repeat;
  color: #0b0f13;
}

/* 20% white overlay over the background for text legibility */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.2rem;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
}

@media (width < 980px) {
  .hero .container { grid-template-columns: 1fr; }
}

/* Hero text bits */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .38rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  background: rgba(34, 166, 77, .12);
  color: var(--green-700);
  border: 1px solid rgba(34, 166, 77, .25);
}

.eyebrow .ping {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--green-500);
  position: relative;
}

.eyebrow .ping::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid color-mix(in oklab, var(--green-500) 60%, transparent);
  animation: ping 1.6s infinite ease-out;
}

@keyframes ping {
  from { transform: scale(.4); opacity: 1; }
  to   { transform: scale(1.5); opacity: 0; }
}

h1 {
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  line-height: 1.04;
  margin: 0;
  letter-spacing: -.02em;
}

.headline-accent {
  background: linear-gradient(120deg, var(--green-900), var(--green-600) 50%, var(--green-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  color: var(--stone-700);
  margin: .8rem 0 1.4rem;
}

.cta {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Right-side visual block */
.scene {
  position: relative;
  aspect-ratio: 1.05 / 1;
  border-radius: var(--radius-2xl);
  isolation: isolate;
  background:
    radial-gradient(300px 300px at 80% 20%, rgba(34, 166, 77, .25), transparent 60%),
    linear-gradient(145deg, var(--white), var(--green-100));
  border: 1px solid rgba(16, 55, 31, .08);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Moss ring */
.moss-ring {
  position: absolute;
  inset: 6% auto auto 6%;
  width: min(56%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #0a2e17, #35b35c 40%, #0f5a2d 70%, #7AD68F 100%);
  filter: saturate(120%);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.2),
    0 24px 80px rgba(34,166,77,.35);
}

.moss-ring::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}

/* Clock */
.clock {
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: min(46%, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--white), #eef9f1);
  border: 6px solid var(--green-200);
  box-shadow:
    0 18px 60px rgba(16,55,31,.16),
    inset 0 0 0 2px rgba(34,166,77,.3);
}

.clock::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(26,125,69,.08) 0 12deg,
    transparent 12deg 24deg
  );
}

.hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  background: var(--green-700);
  transform-origin: bottom center;
}

.hand.h1 { height: 34%; rotate: var(--r1); }
.hand.h2 { height: 28%; rotate: var(--r2); background: var(--green-500); }

.hand.pin {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--green-700);
  left: calc(50% - 5px);
  top:  calc(50% - 5px);
  box-shadow: 0 0 0 4px rgba(34,166,77,.2);
}

/* Floating blobs */
.blob {
  position: absolute;
  filter: blur(20px);
  opacity: .65;
  mix-blend: multiply;
  border-radius: 50%;
}

.blob.b1 {
  width: 320px;
  height: 320px;
  left: -60px;
  top: -60px;
  background: radial-gradient(circle at 30% 30%, var(--green-300), transparent 60%);
}

.blob.b2 {
  width: 240px;
  height: 240px;
  right: -40px;
  bottom: -40px;
  background: radial-gradient(circle at 60% 60%, var(--green-200), transparent 55%);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 22px;
  display: flex;
  gap: .7rem;
  align-items: center;
  color: var(--stone-500);
  font-weight: 600;
}

.mouse {
  width: 22px;
  height: 32px;
  border: 2px solid currentColor;
  border-radius: 12px;
  position: relative;
}

.mouse::after {
  content: "";
  width: 3px;
  height: 6px;
  position: absolute;
  left: 50%;
  top: 6px;
  translate: -50% 0;
  border-radius: 4px;
  background: currentColor;
  animation: wheel 1.6s infinite ease-in-out;
}

@keyframes wheel {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

/* Sticky elevation on scroll */
.elevate {
  transition: box-shadow .25s ease, transform .25s ease;
}

.elevate.is-stuck {
  box-shadow: var(--shadow-lg);
  transform: translateY(2px);
}

/* =========================
   Accessibility / Prefs
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .eyebrow .ping::after { animation: none; }
  .mouse::after { animation: none; }
}

/* =========================
   Dark Mode
   ========================= */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(180deg, #0f1713, #0b130f);
  }

  .nav-wrap {
    background: rgba(18, 28, 23, .6);
    border-color: rgba(255, 255, 255, .06);
  }

  .brand .logo {
    box-shadow:
      inset 0 0 0 3px rgba(255, 255, 255, .22),
      0 6px 16px rgba(34, 166, 77, .35);
  }

  .overlay::before {
    background: linear-gradient(180deg, rgba(12,20,16,.9), rgba(14,18,16,.85));
  }

  .eyebrow { background: rgba(34, 166, 77, .18); }
  .lead { color: #a6b3be; }
  nav.primary a { color: #e6f2ea; }

  .btn-ghost {
    --fg: #e6f2ea;
    border-color: rgba(255, 255, 255, .14);
  }

  .scene {
    background: linear-gradient(145deg, #101813, #0e1712);
    border-color: rgba(255, 255, 255, .06);
  }

  h1 { color: #f5fff9; }
}
/* Eyebrow – biely text a lepší kontrast na machovom BG */
.hero .eyebrow {
  color: #fff;
  background: rgba(0, 0, 0, 0.28);   /* jemný tmavý film pod textom */
  border-color: rgba(255, 255, 255, 0.25);
}

/* bodka vľavo tiež biela (ak chceš ponechať zelenú, tento blok vynechaj) */
.hero .eyebrow .ping {
  background: #fff;
}
.hero .eyebrow .ping::after {
  border-color: rgba(255, 255, 255, 0.45);
}
/* Texty v hero sekcii biele pre lepší kontrast */
.hero h1,
.hero .lead {
  color: #fff;
}

.hero .lead {
  opacity: 0.95; /* jemné zjemnenie pre vizuálny balans */
}
/* Scéna vpravo – namiesto vizuálov použijeme obrázok */
.scene {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.1/1;

  background: url("mach-scene.jpg") center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-lg);
}

/* odstránime vnútorné prvky (ak ich tam nechceš vôbec) */
.scene .moss-ring,
.scene .clock,
.scene .blob {
  display: none;
}
.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;              /* výška prechodu */
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
  z-index: 2;
}
.scroll-cue { z-index: 3; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
.scroll-cue .mouse { border-color:#fff; }
.scroll-cue .mouse::after { background:#fff; }
/* Header – kompaktnejší a s vnútorným odsadením */
.nav-wrap{
  padding: 10px clamp(16px, 3vw, 32px); /* menšia výška + príjemné odsadenie zľava */
}

/* Logo – len tvoj PNG, väčšie */
.brand .logo{
  height: 76px;          /* uprav podľa chuti (napr. 54px) */
  width: auto;
  object-fit: contain;
  border: none;
  box-shadow: none;
  background: none;
  display: block;
}

/* Desktop – správne media queries */
@media (min-width: 992px){
  nav.primary{
    display: flex;
    gap: 8px;
    margin-left: auto;   /* menu doprava */
  }
  nav.primary a{
    padding: .6rem .8rem; /* nižšia výška hlavičky */
    border-radius: 10px;
  }
  .hamburger{ display: none; } /* hamburger len na mobile */
}

/* Mobile – menu skryté, hamburger vpravo */
@media (max-width: 991.98px){
  nav.primary{ display: none; }
  .hamburger{ display: grid; margin-left: auto; }
}
/* --- HERO FIX: žiadne prekrytie klikov --- */

/* Dekoračné vrstvy nechytajú myš */
.hero::before,
.scene,
.scene * {
  pointer-events: none;
}

/* Textový stĺpec a CTA nad všetkým */
.hero .container { position: relative; z-index: 1; }
.hero .container > div:first-child { position: relative; z-index: 5; }

/* CTA tlačidlá určite klikateľné */
.cta .btn {
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

/* Ak máš spodný gradient pod scénou, tiež nesmie blokovať */
.scene::after { pointer-events: none; }

/* (odporúčané) plynulé rolovanie + offset za pevným headerom */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* uprav podľa skutočnej výšky headera */
}
/* === HERO FIX: odblokuj myš a kliky === */

/* 1) Všetky dekorácie vpravo (scéna) nech neberú myš */
.scene,
.scene * {
  pointer-events: none !important;
  z-index: 1;
}

/* 2) Textový stĺpec s CTA nad všetkým */
.hero { position: relative; }
.hero .container { position: relative; z-index: 2; }
.hero .container > div:first-child {
  position: relative;
  z-index: 5;
}

/* 3) Biela „hmla“ cez pozadie nech neblokuje */
.hero::before { pointer-events: none !important; }

/* 4) CTA linky sú klikateľné a navrchu */
.cta .btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 6;
  cursor: pointer;
}

/* 5) Plynulé rolovanie + rezerva za fixnou hlavičkou */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* uprav podľa výšky headera */
}
/* ===== Products ===== */
.section-products {
  padding: 72px 0 110px;
}

.products-head h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  margin: 0 0 .4rem;
}

.products-head p {
  margin: 0 0 1.4rem;
  color: var(--stone-700);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.product-card {
  grid-column: span 12;
  border: 1px solid rgba(16,55,31,.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-rows: auto 1fr;
}

@media (min-width: 720px) {
  .product-card { grid-column: span 6; }
}
@media (min-width: 1040px) {
  .product-card { grid-column: span 4; }
}

.p-media {
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(145deg, var(--white), var(--green-100));
  background-size: cover;
  background-position: center;
}

.p-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .86rem;
  color: var(--green-900);
  background: rgba(234, 251, 239, .9);
  border: 1px solid rgba(34,166,77,.25);
  backdrop-filter: saturate(160%) blur(2px);
}

.p-body {
  padding: 16px 16px 14px;
  display: grid;
  gap: 10px;
}

.p-body h3 {
  margin: 2px 0 4px;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.p-specs {
  margin: 0;
  padding-left: 18px;
  color: var(--stone-700);
  line-height: 1.4;
  display: grid;
  gap: 4px;
}

.p-foot {
  margin-top: 6px;
  display: grid;
  gap: 10px;
}

.p-price {
  font-size: 1rem;
  color: var(--stone-700);
}

.p-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Dark mode tweaking */
@media (prefers-color-scheme: dark) {
  .product-card { background: #111714; border-color: rgba(255,255,255,.06); }
  .p-body h3 { color: #f4fff7; }
  .p-price { color: #cfe3d7; }
  .p-specs { color: #b4c2ba; }
  .p-badge {
    background: rgba(16, 24, 20, .6);
    color: #e8fff2;
    border-color: rgba(255,255,255,.12);
  }
}

/* Poznámka pod gridom */
.products-note {
  margin-top: 18px;
  color: var(--stone-700);
  font-size: .98rem;
}
/* ===== Kontakt ===== */
.section-contact {
  padding: 72px 0 110px;
}

.contact-head h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  margin: 0 0 .4rem;
}
.contact-head p {
  margin: 0 0 1.4rem;
  color: var(--stone-700);
}

.contact-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
}

.contact-card {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(16,55,31,.08);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklab, var(--green-300) 40%, rgba(16,55,31,.12));
}

@media (min-width: 760px) {
  .contact-card { grid-column: span 6; }
}
@media (min-width: 1040px) {
  .contact-card { grid-column: span 4; }
}

.cc-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
}

.cc-body { display: grid; gap: 4px; }
.cc-title { font-weight: 700; }
.cc-text { color: var(--stone-700); }

.socials { margin-top: 8px; display: flex; gap: 8px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(16,55,31,.12);
  background: rgba(255,255,255,.8);
  text-decoration: none;
  color: var(--stone-900);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.social-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(34,166,77,.35);
  box-shadow: var(--shadow-md);
  background: var(--green-100);
}

.contact-note {
  margin-top: 18px;
  color: var(--stone-700);
  font-size: .98rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .contact-card { background: #111714; border-color: rgba(255,255,255,.06); }
  .cc-icon { background: #0f1713; color: #c8eed6; }
  .cc-text, .contact-head p, .contact-note { color: #cfe3d7; }
  .social-btn { background: rgba(16,24,20,.6); color: #f4fff7; border-color: rgba(255,255,255,.12); }
  .social-btn:hover { background: rgba(34,166,77,.2); }
}
/* ===== Kontakt – company block ===== */
.company-card{
  margin-top: 16px;
  border: 1px solid rgba(16,55,31,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 16px;
}

.company-card h3{
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.company-card h4{
  margin: 14px 0 6px;
  font-size: 1.05rem;
  color: var(--stone-700);
}

.company-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  margin: 0 0 6px;
}

.company-list dt{
  font-weight: 700;
  color: var(--stone-700);
}

.company-list dd{
  margin: 0;
}

.company-list > div{
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
  gap: 12px;
}

.company-address{
  font-style: normal;
  line-height: 1.5;
}

.company-card .note{
  color: var(--stone-500);
  font-size: .9em;
  margin-left: 6px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .company-card{ background:#111714; border-color: rgba(255,255,255,.06);}
  .company-card h4{ color:#cfe3d7; }
  .company-list dt{ color:#cfe3d7; }
  .company-card .note{ color:#b4c2ba; }
}