@import url("https://cdn.jsdelivr.net/npm/flag-icons@7.3.2/css/flag-icons.min.css");

:root {
  --bg: #0b0d10;
  --bg-alt: #14171c;
  --card: #191c22;
  --accent: #e2492d;
  --accent-dark: #b93a22;
  --text: #f3f4f6;
  --text-muted: #9aa0a6;
  --border: #262a31;
  --radius: 10px;
  /* Every button, nav call-to-action and the language switch share this, so
     the corners match wherever they sit side by side. The page themes used
     to set their own near-square 2px each, in seven places. */
  --btn-radius: 8px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* "poppins-extralight" is not a family a browser knows - it is the name the
     Wix site used. Poppins itself is loaded in every page head, so the stack
     resolves to it; the extra-light look comes from the weight below. */
  font-family: poppins-extralight, poppins, sans-serif;
  font-weight: 200;
  scroll-behavior: smooth;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(11,13,16,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.logo span { color: var(--accent); }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

/* Products menu. The trigger stays a real link, so a tap on a touch screen -
   where there is no hover - still opens the products page. The panel is for
   pointer and keyboard users, hence :focus-within alongside :hover. */
.nav-links .nav-item { position: relative; display: flex; align-items: center; }
.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  /* The gap between trigger and panel is padding inside the element, not a
     margin: a real gap would drop the hover as the pointer crosses it. */
  padding-top: 14px;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.nav-links .nav-item:hover .nav-menu,
.nav-links .nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-menu-panel {
  min-width: 252px;
  padding: 12px 10px;
  background: #fff;
  border: 1px solid #dce6e1;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 48, 43, .16);
}
.nav-menu-head {
  margin: 10px 10px 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa39d;
}
.nav-menu-head:first-child { margin-top: 2px; }
.nav-menu-panel a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 14px !important;
  font-weight: 600;
  white-space: nowrap;
}
.nav-menu-panel a:hover { background: #f1f6f4; }

/* ---- Products: a wide two-column panel of tiles ---- */
/* The nav stretches to the full height of the bar, so the hover area of each
   trigger reaches the bar's bottom edge and the pointer never crosses a gap on
   its way into a panel. */
.nav-links { align-self: stretch; }
.nav-links .nav-item { align-self: stretch; }

/* Too wide to hang off its own trigger without running off one side or the
   other, so this panel is positioned against the header and centred on the
   page instead. It is still inside the trigger in the markup, which is what
   keeps it open while the pointer is over it. */
.nav-links .nav-item--mega { position: static; }
.nav-item--mega .nav-menu { top: 100%; padding-top: 10px; }
.nav-menu-panel.is-mega {
  display: flex;
  gap: 22px;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-width: 0;
  padding: 18px 20px 20px;
}
.nav-menu-col--side { padding-left: 22px; border-left: 1px solid #e4ece8; }
.nav-menu-panel.is-mega .nav-menu-head { margin: 0 2px 10px; }
.nav-menu-panel.is-mega .nav-menu-tiles + .nav-menu-head { margin-top: 16px; }
.nav-menu-tiles { display: grid; grid-template-columns: repeat(4, 112px); gap: 8px; }
.nav-menu-col--side .nav-menu-tiles { grid-template-columns: repeat(2, 112px); }

.nav-menu-panel a.nav-tile {
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px 10px;
  border: 1px solid #e4ece8;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.nav-menu-panel a.nav-tile:hover {
  border-color: var(--solutions-green, #00554d);
  background: #f4f8f6;
  transform: translateY(-1px);
}
.nav-menu-panel .nav-tile img {
  width: 84px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 0;
}
.nav-menu-panel .nav-tile span { font-size: 13px; font-weight: 700; line-height: 1.2; }

@media (max-width: 980px) {
  .nav-menu-tiles { grid-template-columns: repeat(3, 104px); }
  .nav-menu-col--side .nav-menu-tiles { grid-template-columns: repeat(1, 104px); }
}
@media (max-width: 760px) {
  .nav-menu-tiles { grid-template-columns: repeat(2, 100px); }
}

/* A fixed box for every thumbnail, whatever the robot's proportions: the
   renders are cropped to the machine, so without it a tall stacker would tower
   over a low tow truck and the rows would not line up. */
.nav-menu-panel img {
  width: 64px;
  height: 48px;
  flex: 0 0 64px;
  object-fit: contain;
  border-radius: 5px;
}
/* Language switch. Stays visible on narrow screens, where the rest of the nav
   is hidden: changing language matters more there, not less. */
.lang-toggle {
  padding: 7px 11px;
  border: 1px solid #cbdad5;
  border-radius: var(--btn-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.lang-toggle:hover { border-color: currentColor; }
.home-page .lang-toggle { color: var(--home-green); }
.home-page .lang-toggle:hover { color: var(--home-orange); }
.inner-page .lang-toggle { color: var(--inner-green); }
.inner-page .lang-toggle:hover { color: var(--inner-orange); }
.solutions-page .lang-toggle { color: var(--solutions-green); }
.solutions-page .lang-toggle:hover { color: var(--solutions-orange); }

.nav-cta {
  padding: 9px 18px;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
}
.nav-cta:hover { background: var(--accent-dark); }
.menu-toggle { display: none; }

.hero {
  position: relative;
  padding: 90px 32px 70px;
  text-align: center;
  background: radial-gradient(ellipse at top, #1b1006 0%, var(--bg) 60%);
}
.hero h1 {
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.hero p.tagline {
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 28px;
}
.hero img {
  max-width: 640px;
  margin: 0 auto 30px;
}
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--border);
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { background: transparent; color: var(--text); }
.btn-outline:hover { border-color: var(--text-muted); }

.section {
  padding: 64px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.section h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  text-align: center;
}
.section .lead {
  color: var(--text-muted);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}
.product-card img { width: 100%; height: 170px; object-fit: contain; background: #0f1114; padding: 12px; }
.product-card .body { padding: 16px; }
.product-card .weight { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.product-card h3 { margin: 6px 0 4px; font-size: 20px; }
.product-card p { margin: 0; color: var(--text-muted); font-size: 13px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.split img { border-radius: 12px; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  /* Hide the page links, not the whole nav. Hiding .nav-links took the contact
     button and the language switch with it, and the phone rules below 600px
     only brought them back under 600 - so a tablet held upright had no way to
     reach either. */
  .nav-links > a:not(.nav-cta), .nav-links .nav-item { display: none; }
  .hero h1 { font-size: 30px; }
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 48px 32px 24px;
}
.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 14px; }
.footer-office { margin-bottom: 18px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.footer-office strong { color: var(--text); display: block; }
.country-flag { display: inline-block; width: 24px; height: 16px; margin-right: 7px; vertical-align: -3px; }
.footer-links a { display: block; margin-bottom: 10px; font-size: 14px; color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1100px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.contact-form {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  text-align: left;
}
.contact-form .field-full { grid-column: 1 / -1; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 15px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form ::placeholder {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-muted);
  opacity: 1;
}
/* The department field has no free-text state to fall back on, so its whole
   caption ("please select a department...") is styled the same way a
   placeholder is, all the time, rather than only until it is filled in. */
.contact-form select {
  appearance: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 13l5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.contact-consent input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.contact-form .btn-primary {
  justify-self: start;
  padding: 14px 42px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.contact-form .btn-primary:disabled { opacity: .6; cursor: default; }
.contact-note { font-size: 13px; min-height: 18px; }
.contact-note.err { color: #d33; }
@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
}

.auth-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
}
.auth-card h1 { font-size: 20px; margin: 0 0 6px; text-align: center; }
.auth-card p.sub { color: var(--text-muted); font-size: 13px; text-align: center; margin: 0 0 24px; }
.auth-card button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.auth-card button:hover { background: var(--accent-dark); }
.auth-error {
  color: #f87171;
  font-size: 13px;
  margin: -4px 0 12px;
  min-height: 16px;
}

/* Single sign-on is the way in; the password form below it is only there until
   everyone has moved across, so it is styled as the quieter of the two. */
.auth-card button.sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  background: #fff;
  color: #1b1b1b;
  border: 1px solid #cbd5d1;
}
.auth-card button.sso:hover { background: #f2f5f4; border-color: #9fb3ad; }
.auth-card button.sso svg { flex: 0 0 auto; }
.auth-card button.sso[disabled] { opacity: .6; cursor: default; }

.auth-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

.login-page .auth-card button.sso { border-radius: var(--btn-radius); background: #fff; color: #1b1b1b; border: 1px solid #cbdad5; }
.login-page .auth-card button.sso:hover { background: #eef3f1; border-color: #9fb3ad; }

.home-page {
  --home-green: #00554d;
  --home-orange: #f3953c;
  --home-ink: #172321;
  --home-soft: #f4f7f5;
  background: #fff;
  color: var(--home-ink);
  font-family: poppins-extralight, poppins, sans-serif;
}
.home-page .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 0 clamp(24px, 6vw, 86px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #dce6e1;
  backdrop-filter: blur(10px);
}
.home-page .brand-mark { display: inline-flex; width: 100px; }
.brand-mark img { width: 100%; height: auto; }
.home-page .nav-links { gap: clamp(16px, 2.4vw, 34px); }
.home-page .nav-links a { color: var(--home-green); font-size: 15px; }
.home-page .nav-links a:hover { color: var(--home-orange); }
.home-page .nav-cta {
  padding: 12px 20px;
  border-radius: var(--btn-radius);
  background: var(--home-orange);
  color: #fff !important;
  letter-spacing: .02em;
}
.home-page .nav-cta:hover { background: var(--home-green); }
.home-page .home-hero {
  min-height: min(820px, 94vh);
  max-width: none;
  padding: 168px clamp(24px, 9vw, 138px) 88px;
  display: flex;
  align-items: center;
  text-align: left;
  /* The poster is the background, so the hero is complete before the video
     arrives and stays complete if it never does. */
  background-image: url("../../images/site/hero-poster.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.home-page .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* The wash that keeps the headline readable sits above the footage; it used to
   be the first layer of background-image, which a video cannot slide under. */
.home-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%);
}
.home-page .hero-copy { position: relative; z-index: 2; width: min(520px, 52%); }
.home-page .eyebrow {
  margin: 0 0 18px;
  color: var(--home-orange);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.home-page .home-hero h1 {
  max-width: 540px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(52px, 7vw, 94px);
  line-height: .95;
  letter-spacing: -.03em;
}
/* Only the accent word. The whole headline is spans now, one per translation
   key, so colouring every span turned the first word orange too. */
.home-page .home-hero h1 span.accent { color: var(--home-orange); }
.home-page .hero-intro {
  max-width: 380px;
  margin: 0 0 34px;
  color: rgba(255,255,255,.9);
  font-size: 19px;
  line-height: 1.5;
}
.home-page .btn {
  border-radius: var(--btn-radius);
  padding: 15px 25px;
  letter-spacing: .02em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* A second button on top of the footage: the page's outline button is drawn for
   a light background, so over the video it borrows white instead. */
.btn-on-media {
  border-color: rgba(255,255,255,.65) !important;
  color: #fff !important;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
}
.btn-on-media:hover { background: rgba(255,255,255,.18); border-color: #fff !important; }
.home-page .btn-primary { background: var(--home-green); border-color: var(--home-green); }
.home-page .btn-primary:hover { background: var(--home-orange); border-color: var(--home-orange); }
.home-page .section { max-width: 1180px; padding: 112px 32px; }
.home-page .section h2 {
  color: var(--home-green);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.home-page .section .lead { color: #53635f; font-size: 17px; line-height: 1.75; }
/* ---------- Bizi ayıran özellikler ----------
   Bölüm girişi ortalanmış; altındaki her özellik, yarısı görsel yarısı metin
   olan tam genişlikte bir satır. Tek ve çift satırlar birbirinin aynası, böylece
   sayfa aşağı indikçe görsel bir sağda bir solda kalıyor. */
.home-page .features-intro { text-align: center; padding-bottom: 72px; }
.home-page .features-intro .eyebrow { margin-bottom: 14px; }
.home-page .features-intro > h2 { max-width: 820px; margin: 0 auto 22px; }
.home-page .features-intro > .lead { max-width: 760px; margin: 0 auto; }

.home-page .feature-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 56px auto 0;
  padding: 34px 0 0;
  border-top: 1px solid #dce6e1;
  list-style: none;
}
.home-page .feature-stats li { display: grid; gap: 6px; }
.home-page .feature-stats strong {
  color: var(--home-green);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.home-page .feature-stats span { color: #78908a; font-size: 13.5px; }

.home-page .feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px;
}
/* Çift sıradakilerde görsel sağa geçiyor: aynı blok, ters yerleşim. */
.home-page .feature-row:nth-of-type(even) .feature-media { order: 2; }
.home-page .feature-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--home-soft);
}
.home-page .feature-copy .eyebrow { margin-bottom: 14px; font-size: 13px; }
.home-page .feature-copy h3 {
  margin: 0 0 16px;
  color: var(--home-green);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.home-page .feature-copy > p { margin: 0; color: #53635f; font-size: 17px; line-height: 1.7; }
.home-page .feature-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.home-page .feature-points li {
  position: relative;
  padding-left: 26px;
  color: #33423e;
  font-size: 15.5px;
  line-height: 1.5;
}
/* Onay işareti, ikon dosyası olmadan: iki kenarı olan bir kutu döndürülüyor. */
.home-page .feature-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 6px;
  height: 10px;
  border: solid var(--home-orange);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.home-page .feature-copy .btn { margin-top: 28px; }
.home-page .fleet-section { max-width: none; background: var(--home-soft); }
.home-page .fleet-split { max-width: 1116px; margin: 0 auto; grid-template-columns: 1.1fr .9fr; gap: clamp(45px, 8vw, 120px); }
.home-page .fleet-split img { width: 100%; border-radius: 0; }
.home-page .fleet-split h2 { max-width: 440px; margin-bottom: 20px; }
.home-page .fleet-split .lead { max-width: 440px; }
.home-page .btn-outline { border-color: var(--home-green); color: var(--home-green); }
.home-page .btn-outline:hover { background: var(--home-green); color: #fff; }
.home-page .partners-section { max-width: none; padding-top: 128px; padding-bottom: 128px; }
.home-page .partners-section h2 { margin-bottom: 34px; }
/* Only the first line; the second is its own span for translation now and
   would otherwise turn orange as well. */
.home-page .partners-section h2 span.accent { color: var(--home-orange); }
.home-page .partners-section img { width: min(100%, 802px); border-radius: 0 !important; }
.home-page .site-footer { background: #fff; border-top: 1px solid #dce6e1; }
.home-page .footer-grid h4, .home-page .footer-office strong { color: var(--home-green); }
.home-page .footer-office, .home-page .footer-links a, .home-page .footer-bottom { color: #53635f; }
.home-page .footer-links a:hover { color: var(--home-orange); }
.home-page .footer-bottom { border-color: #dce6e1; }
@media (max-width: 900px) {
  .home-page .home-hero { min-height: 760px; padding-top: 150px; }
  .home-page .hero-copy { width: min(520px, 70%); }
  .home-page .feature-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .home-page .site-header { padding: 0 20px; }
  .home-page .brand-mark { width: 108px; }
  .home-page .nav-links { display: flex; gap: 10px; }
  .home-page .nav-links a:not(.nav-cta) { display: none; }
  .home-page .nav-links .nav-item { display: none; }
  .home-page .nav-cta { padding: 10px 12px; font-size: 12px !important; }
  .home-page .home-hero {
    min-height: 680px;
    padding: 128px 22px 62px;
    background-position: 62% center;
  }
  /* A left-to-right wash does nothing on a narrow screen: the text spans the
     whole width, so it ends up over the picture either way. Top-to-bottom keeps
     the words on near-white and lets the footage through underneath them. */
  .home-page .home-hero::before {
    background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.16) 78%, rgba(0,0,0,.04) 100%);
  }
  .home-page .hero-copy { width: 100%; }
  .home-page .home-hero h1 { font-size: 58px; }
  .home-page .section { padding: 76px 22px; }
  /* Tek sütun: görsel her zaman metnin üstünde, ters yerleşim iptal. */
  .home-page .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
  .home-page .feature-row:nth-of-type(even) .feature-media { order: 0; }
  .home-page .fleet-split { grid-template-columns: 1fr; gap: 42px; }
}

.inner-page {
  --inner-green: #00554d;
  --inner-orange: #f3953c;
  --inner-ink: #172321;
  --inner-muted: #53635f;
  background: #fff;
  color: var(--inner-ink);
  font-family: poppins-extralight, poppins, sans-serif;
}
.inner-page .site-header {
  height: 60px;
  box-sizing: border-box;
  padding: 0 clamp(24px, 6vw, 86px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #dce6e1;
  backdrop-filter: blur(10px);
}
.inner-page .brand-mark { display: inline-flex; width: 100px; }
.inner-page .brand-mark img { width: 100%; height: auto; }
.inner-page .nav-links { gap: clamp(16px, 2.4vw, 34px); }
.inner-page .nav-links a { color: var(--inner-green); font-size: 15px; }
.inner-page .nav-links a:hover, .inner-page .nav-links a.active { color: var(--inner-orange); }
.inner-page .nav-cta { padding: 12px 20px; border-radius: var(--btn-radius); background: var(--inner-orange); color: #fff !important; }
.inner-page .nav-cta:hover { background: var(--inner-green); }
.inner-page .section { max-width: 1180px; padding: 110px 32px; scroll-margin-top: 76px; }
.inner-page .section h2 { color: var(--inner-green); font-size: clamp(32px, 4vw, 54px); line-height: 1.08; letter-spacing: -.025em; }
.inner-page .section .lead { color: var(--inner-muted); font-size: 17px; line-height: 1.75; }
.inner-page .split { gap: clamp(40px, 8vw, 120px); }
.inner-page .split img { border-radius: 0; }
.inner-page .divider { background: #dce6e1; }
.inner-page .hero { padding: 78px 32px 62px; background: var(--inner-green); }
.inner-page .hero h1 { color: #fff; font-size: clamp(38px, 5vw, 70px) !important; }
.inner-page .product-card { border: 0; border-radius: 0; background: #0d1110; color: #fff; box-shadow: 0 16px 34px rgba(0,48,43,.12); }
.inner-page .product-card img { height: 250px; padding: 0; background: #000; object-fit: cover; }
.inner-page .product-card .body { min-height: 108px; padding: 22px 24px; }
.inner-page .product-card h3 { color: #fff; font-size: 23px; }
.inner-page .product-card p { color: rgba(255,255,255,.7); }
.inner-page .product-card .weight { color: var(--inner-orange); }
.inner-page .site-footer { background: #fff; border-top: 1px solid #dce6e1; }
.inner-page .footer-grid h4, .inner-page .footer-office strong { color: var(--inner-green); }
.inner-page .footer-office, .inner-page .footer-links a, .inner-page .footer-bottom { color: var(--inner-muted); }
.inner-page .footer-links a:hover { color: var(--inner-orange); }
.inner-page .footer-bottom { border-color: #dce6e1; }
.accessories-page .section:first-of-type { background: #f4f7f5; max-width: none; padding-left: max(32px, calc((100% - 1116px) / 2)); padding-right: max(32px, calc((100% - 1116px) / 2)); }
.accessories-page .section:first-of-type .split { max-width: 1116px; margin: 0 auto; }
.accessories-page .section:nth-of-type(2) { max-width: 1116px; }
.software-page .section:nth-of-type(even) { background: #f4f7f5; max-width: none; padding-left: max(32px, calc((100% - 1116px) / 2)); padding-right: max(32px, calc((100% - 1116px) / 2)); }
.software-page .section:nth-of-type(even) .split { max-width: 1116px; margin: 0 auto; }
.about-page .section, .contact-page .section { max-width: 1116px; }
.about-page .section:first-of-type {
  max-width: none;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.about-page .about-hero-content {
  position: relative;
  display: flex;
  min-height: 78vh;
  max-width: none;
  padding: 0 clamp(24px, 9vw, 138px);
  align-items: center;
  background: var(--inner-green);
}
.about-page .about-hero-content > img {
  position: absolute;
  z-index: 0;
  inset: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  max-width: none;
  object-fit: cover;
  filter: blur(3px);
  transform: scale(1.04);
  opacity: .78;
}
.about-page .about-hero-content::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,85,77,.94) 0%, rgba(0,85,77,.76) 34%, rgba(0,85,77,.2) 70%, rgba(0,85,77,.08) 100%);
}
.about-page .about-hero-content > div {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
}
.about-page .about-hero-content .eyebrow { color: var(--inner-orange); }
.about-page .about-hero-content h2 { color: #fff; font-size: clamp(44px, 6vw, 82px); }
.about-page .about-hero-content .lead { color: rgba(255,255,255,.82); margin: 0; max-width: 540px; }
.about-page .section:first-of-type > div:last-child { max-width: 760px; margin: 0 auto; padding: 90px 32px; background: #fff; }
.about-page .section:first-of-type > div:last-child .lead {
  margin-bottom: 28px;
  color: #243a35;
  font-size: 18px;
  line-height: 1.8;
}
.contact-page .section > h2 { margin-bottom: 20px; }
.inner-page .contact-form input, .inner-page .contact-form select, .inner-page .contact-form textarea {
  border: 1px solid #d8e2de;
  background: #fff;
  color: var(--inner-ink);
}
.inner-page .contact-form ::placeholder { color: #97a29d; }
.inner-page .contact-form select { color: #97a29d; }
.inner-page .contact-consent { color: var(--inner-muted); }
.inner-page .contact-consent a { color: var(--inner-green); text-decoration: underline; }
.inner-page .contact-form .btn-primary { background: var(--inner-orange); border-color: var(--inner-orange) !important; }
.inner-page .contact-note.ok { color: var(--inner-green); font-weight: 700; }
.login-page .site-header { position: sticky; }
.login-page .auth-wrap { min-height: calc(100vh - 60px); background: #f4f7f5; }
.login-page .auth-card { max-width: 430px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 18px 45px rgba(0,48,43,.12); }
.login-page .auth-card h1 { color: var(--inner-green); font-size: 28px; }
.login-page .auth-card p.sub { color: var(--inner-muted); }
.login-page .auth-card button { border-radius: var(--btn-radius); background: var(--inner-green); }
.login-page .auth-card button:hover { background: var(--inner-orange); }
@media (max-width: 600px) {
  .inner-page .site-header { padding: 0 20px; }
  .inner-page .brand-mark { width: 108px; }
  .inner-page .nav-links { display: flex; gap: 10px; }
  .inner-page .nav-links a:not(.nav-cta) { display: none; }
  .inner-page .nav-links .nav-item { display: none; }
  .inner-page .nav-cta { padding: 10px 12px; font-size: 12px !important; }
  .inner-page .section { padding: 76px 22px; }
  .inner-page .section:first-of-type, .software-page .section:nth-of-type(even) { padding-left: 22px; padding-right: 22px; }
  .inner-page .product-card img { height: 215px; }
  .about-page .section:first-of-type { min-height: 720px; }
  .about-page .about-hero-content { min-height: 720px; padding: 48px 22px; }
  .about-page .about-hero-content > img { object-position: 60% center; }
  .about-page .about-hero-content::after { background: linear-gradient(90deg, rgba(0,85,77,.9), rgba(0,85,77,.48)); }
  .about-page .section:first-of-type > div:last-child { padding: 70px 22px; }
}

.solutions-page {
  --solutions-green: #00554d;
  --solutions-orange: #f3953c;
  --solutions-ink: #172321;
  --solutions-soft: #f4f7f5;
  background: #fff;
  color: var(--solutions-ink);
  font-family: poppins-extralight, poppins, sans-serif;
}
.solutions-page .product-card { scroll-margin-top: 76px; }
.solutions-page .site-header {
  height: 60px;
  box-sizing: border-box;
  padding: 0 clamp(24px, 6vw, 86px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #dce6e1;
  backdrop-filter: blur(10px);
}
.solutions-page .brand-mark { display: inline-flex; width: 100px; }
.solutions-page .brand-mark img { width: 100%; height: auto; }
.solutions-page .nav-links { gap: clamp(16px, 2.4vw, 34px); }
.solutions-page .nav-links a { color: var(--solutions-green); font-size: 15px; }
.solutions-page .nav-links a:hover, .solutions-page .nav-links a.active { color: var(--solutions-orange); }
.solutions-page .nav-cta { background: var(--solutions-orange); border-radius: var(--btn-radius); padding: 12px 20px; color: #fff !important; }
.solutions-page .nav-cta:hover { background: var(--solutions-green); }
.solutions-page .eyebrow {
  margin: 0 0 15px;
  color: var(--solutions-orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* ---------- Product series: one payload selector per AMR type ---------- */
/* Every model sits in the page; the script hides all but one. Without it the
   visitor gets a plain list of all of them, which is a fair fallback, and the
   figures are in the HTML rather than assembled by script. */
.series-heading { margin-bottom: 34px; }

.picker { max-width: 660px; }
.picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.picker-what {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #53635f;
}
.picker-now { font-size: 15px; font-weight: 800; color: var(--solutions-green); }
.picker-range { width: 100%; margin: 0; accent-color: var(--solutions-green); }
.picker-ticks { display: flex; justify-content: space-between; margin-top: 8px; }
.picker-ticks span {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #8fa39d;
}
.picker-ticks span:first-child { text-align: left; }
.picker-ticks span:last-child { text-align: right; }
.picker-ticks span.on { color: var(--solutions-green); }
.picker-ticks small { display: block; font-size: 10.5px; font-weight: 600; color: #b3c2bd; }
.picker-ticks span.on small { color: #53635f; }

.models { margin-top: 30px; }
.model {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* Which model is on screen is decided only when scripts run. Without them every
   model stays visible and the section reads as a plain list of the range. The
   html.js class is set in the page head, before anything paints, so switching
   never shows all eleven for a frame. */
html.js .model { display: none; }
html.js .model.is-shown { display: grid; }
.model-art {
  border-radius: 16px;
  background: linear-gradient(160deg, #f4f8f6, #e8f0ec);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.model-art img { width: 82%; max-height: 80%; object-fit: contain; }
.model-pay {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--solutions-green);
}
.model-pay span { font-size: .4em; font-weight: 700; color: #8fa39d; margin-left: 6px; }
.model-payhint {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa39d;
}
.model-copy h3 { margin: 14px 0 16px; font-size: 24px; font-weight: 800; color: var(--inner-ink, #172321); }
.model-specs { margin: 0; border-top: 1px solid #e4ece8; }
.model-specs div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #e4ece8;
  font-size: 13.5px;
}
.model-specs dt { margin: 0; color: #8fa39d; font-weight: 600; }
.model-specs dd { margin: 0; color: var(--inner-ink, #172321); font-weight: 700; text-align: right; }

/* What every model in the series shares, said once instead of on each one. */
.series-shared { margin-top: 26px; padding: 18px 22px; background: #f1f6f4; border-radius: 12px; }
.series-shared h4 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #53635f;
}
.series-shared ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.series-shared li { font-size: 13px; color: #33423e; }
.series-shared li b { color: var(--inner-ink, #172321); }

/* The SE carries the same payload as the C1500, so it cannot be a stop on the
   slider; it is a different machine and sits on its own. */
.series-variant {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid #dce6e1;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  align-items: center;
  scroll-margin-top: 76px;
}
.series-variant img { width: 100%; }
.variant-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: #e6f0ec;
  color: var(--solutions-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.series-variant h3 { margin: 10px 0 8px; font-size: 20px; font-weight: 800; color: var(--inner-ink, #172321); }
.series-variant p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: #53635f; }
.variant-mini { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: #33423e; }
.variant-mini b { color: var(--inner-ink, #172321); }

.solutions-page .series { scroll-margin-top: 76px; }

@media (max-width: 860px) {
  .model, .series-variant { grid-template-columns: 1fr; }
  .picker-ticks small { display: none; }
}

.solutions-section { max-width: 1180px; margin: 0 auto; padding: 110px 32px; }
.section-tint { max-width: none; padding-left: max(32px, calc((100% - 1116px) / 2)); padding-right: max(32px, calc((100% - 1116px) / 2)); background: var(--solutions-soft); }
.series-heading { max-width: 690px; margin-bottom: 48px; }
.series-heading h2, .solutions-ecosystem h2, .solutions-cta h2 { margin: 0 0 15px; color: var(--solutions-green); font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -.025em; }
.series-heading > p:last-child { margin: 0; color: #53635f; font-size: 17px; line-height: 1.6; }
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.solutions-grid.single-product { grid-template-columns: minmax(0, 760px); }
.solutions-grid.two-products { grid-template-columns: minmax(0, 760px); }
.solutions-page .product-card { border: 0; border-radius: 0; background: #0d1110; color: #fff; text-align: left; box-shadow: 0 16px 34px rgba(0, 48, 43, .12); transition: transform .25s ease, box-shadow .25s ease; }
.solutions-page .product-card:hover { transform: translateY(-5px); box-shadow: 0 24px 40px rgba(0, 48, 43, .2); }
.solutions-page .product-card img { width: 100%; height: 250px; padding: 0; object-fit: cover; background: #000; }
.solutions-page .product-card .body { min-height: 145px; padding: 22px 24px 25px; }
.solutions-page .product-card .weight { color: var(--solutions-orange); font-size: 12px; letter-spacing: .12em; }
.solutions-page .product-card h3 { margin: 8px 0 7px; color: #fff; font-size: 25px; }
.solutions-page .product-card p:not(.weight) { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.55; }
.solutions-ecosystem { padding: 110px max(32px, calc((100% - 1116px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(40px, 8vw, 120px); background: #fff; }
.solutions-ecosystem > div > p:not(.eyebrow) { max-width: 440px; margin: 0 0 28px; color: #53635f; font-size: 17px; line-height: 1.7; }
.solutions-ecosystem img { width: 100%; max-height: 390px; object-fit: cover; }
.solutions-page .btn { border-radius: var(--btn-radius); padding: 15px 25px; }
.solutions-page .btn-primary { background: var(--solutions-green); border-color: var(--solutions-green); color: #fff; }
.solutions-page .btn-primary:hover { background: var(--solutions-orange); border-color: var(--solutions-orange); }
.solutions-cta { padding: 120px 32px; text-align: center; background: var(--solutions-soft); }
.solutions-cta h2 { max-width: 680px; margin: 0 auto 28px; }
.solutions-page .site-footer { background: #fff; border-top: 1px solid #dce6e1; }
.solutions-page .footer-grid h4, .solutions-page .footer-office strong { color: var(--solutions-green); }
.solutions-page .footer-office, .solutions-page .footer-links a, .solutions-page .footer-bottom { color: #53635f; }
.solutions-page .footer-links a:hover { color: var(--solutions-orange); }
.solutions-page .footer-bottom { border-color: #dce6e1; }
@media (max-width: 900px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .solutions-ecosystem { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .solutions-page .product-card { scroll-margin-top: 76px; }
.solutions-page .site-header { padding: 0 20px; }
  .solutions-page .brand-mark { width: 108px; }
  .solutions-page .nav-links { display: flex; gap: 10px; }
  .solutions-page .nav-links a:not(.nav-cta) { display: none; }
  .solutions-page .nav-links .nav-item { display: none; }
  .solutions-page .nav-cta { padding: 10px 12px; font-size: 12px !important; }
  .solutions-section { padding: 76px 22px; }
  .section-tint { padding-left: 22px; padding-right: 22px; }
  .solutions-grid, .solutions-grid.single-product, .solutions-grid.two-products { grid-template-columns: 1fr; }
  .solutions-page .product-card img { height: 215px; }
  .solutions-ecosystem { padding: 76px 22px; }
  .solutions-cta { padding: 80px 22px; }
}

/* ---------- References strip ---------- */
/* Logos are pre-processed to one grey on a transparent ground, so the strip
   does no filtering of its own and every mark arrives in the same tone. */
.refs {
  padding: 34px 0 38px;
  background: #fff;
  border-bottom: 1px solid #e4ece8;
  overflow: hidden;
  /* fade the ends so logos slide in and out instead of being sliced */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.refs-title {
  margin: 0 0 24px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8fa39d;
}
.refs-track { display: flex; width: max-content; animation: refs-scroll 42s linear infinite; }
.refs:hover .refs-track { animation-play-state: paused; }
/* The gap is repeated as padding at the end of each row, so both copies are
   the same width and moving by half the track lands exactly on the seam. */
.refs-row {
  display: flex;
  align-items: center;
  gap: 64px;
  margin: 0;
  padding: 0 64px 0 0;
  list-style: none;
}
.refs-row li { display: flex; align-items: center; height: 60px; }
/* Grey by default, true colours on hover/focus: two images stacked and
   crossfaded rather than a CSS filter, since a flat grey-out was already baked
   into strip/*.webp per logo (Hyundai in particular needed its own background
   kept, which a filter over the single asset could not do either way). */
.ref-logo { position: relative; display: flex; align-items: center; justify-content: center; }
.ref-logo img { display: block; max-width: none; }
.ref-logo-grey { opacity: .85; transition: opacity .2s ease; }
.ref-logo-color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .2s ease;
}
.ref-logo:hover .ref-logo-grey, .ref-logo:focus-within .ref-logo-grey { opacity: 0; }
.ref-logo:hover .ref-logo-color, .ref-logo:focus-within .ref-logo-color { opacity: 1; }
@keyframes refs-scroll { to { transform: translateX(-50%); } }

/* No motion wanted: a still, wrapped row, and the duplicate goes away. */
@media (prefers-reduced-motion: reduce) {
  .refs { -webkit-mask-image: none; mask-image: none; }
  .refs-track { animation: none; width: auto; justify-content: center; }
  .refs-row { flex-wrap: wrap; justify-content: center; gap: 28px 48px; padding: 0 24px; }
  .refs-row[aria-hidden="true"] { display: none; }
}
@media (max-width: 600px) {
  .refs { padding: 26px 0 30px; }
  .refs-row { gap: 44px; padding-right: 44px; }
  .ref-logo img { transform: scale(.85); }
}

/* ---------- Office map ---------- */
.office-map {
  position: relative;
  /* Leaflet gives its panes z-indexes up to 1000; a stacking context of its own
     keeps them under the sticky header and the menus that drop from it. */
  z-index: 0;
  height: 420px;
  max-width: 1040px;
  margin: 8px auto 44px;
  border-radius: 16px;
  overflow: hidden;
  background: #eef3f1;
  text-align: left;
}
.office-map .leaflet-tile-pane { filter: saturate(.35) brightness(1.05) contrast(.95); }
.office-map .leaflet-container, .office-map.leaflet-container { font: inherit; background: #eef3f1; }

.office-pin-wrap { background: none; border: 0; }
.office-pin {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--home-orange, #f3953c);
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 40, 36, .3);
}
/* a slow ring so the three pins read as "here" at a glance */
.office-pin::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--home-orange, #f3953c);
  animation: office-ping 2.4s ease-out infinite;
}
@keyframes office-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .office-pin::after { animation: none; display: none; } }

.leaflet-tooltip.office-label {
  padding: 4px 10px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 40, 36, .16);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--home-green, #00554d);
}
.leaflet-tooltip.office-label::before { display: none; }

.office-popup { display: grid; gap: 4px; min-width: 190px; font-size: 13px; line-height: 1.5; color: #33423e; }
.office-popup strong { font-size: 14.5px; font-weight: 800; color: var(--home-green, #00554d); }
.office-popup a { color: var(--home-green, #00554d); font-weight: 600; }
.office-popup a:hover { color: var(--home-orange, #f3953c); }

/* Before the map loads, and if it never can: the offices as a plain list. */
.office-map.is-list { height: auto; padding: 26px 28px; }
.office-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.office-list li { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.55; color: #53635f; }
.office-list strong { font-size: 15px; font-weight: 800; color: var(--home-green, #00554d); }

@media (max-width: 760px) {
  .office-map { height: 320px; border-radius: 12px; }
  .office-list { grid-template-columns: 1fr; }
}

/* ---------- Footer: the portal key ---------- */
.footer-bottom-end { display: inline-flex; align-items: center; gap: 14px; }
.footer-portal {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  opacity: .45;
  transition: opacity .2s ease;
}
.footer-portal:hover, .footer-portal:focus-visible { opacity: 1; }