@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;
  object-fit: contain;
  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; }
@media (max-width: 800px) {
  .menu-toggle {
    display: inline-grid;
    place-content: center;
    gap: 4px;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--m-green);
    cursor: pointer;
  }
  .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
.mobile-menu {
  position: fixed;
  inset: 60px 0 0;
  z-index: 49;
  background: rgba(0,20,18,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity .25s ease; }
html.menu-open { overflow: hidden; }
.mobile-menu-sheet {
  max-height: 100%;
  overflow-y: auto;
  padding: 8px 20px 28px;
  background: #fff;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 40px rgba(0,20,18,.25);
  transform: translateY(-12px);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.menu-open .mobile-menu-sheet { transform: none; }
.mobile-menu ul { margin: 0; padding: 0; list-style: none; }
.mobile-menu-sheet > ul > li { border-bottom: 1px solid #e4ece8; }
.mobile-menu-sheet > ul > li > a { display: block; padding: 16px 4px; color: var(--m-green); font-size: 18px; font-weight: 600; }
.mobile-menu a.active, .mobile-menu a:hover { color: var(--m-orange); }
.mobile-menu-sub { padding: 0 0 12px 14px !important; margin-top: -6px !important; }
.mobile-menu-sub a { display: block; padding: 8px 4px; color: var(--m-muted); font-size: 15px; }
@media (min-width: 801px) { .mobile-menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu-sheet, .menu-toggle span { transition: 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: var(--m-deep);
  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); }
/* Exactly one screen under the 60px header. svh is the height with a phone's
   browser bars showing, so nothing hides under them; vh is the fallback. The
   floor keeps a short landscape phone from squeezing the headline out. */
.home-page .home-hero {
  height: calc(100vh - 60px);
  height: calc(100svh - 60px);
  min-height: 520px;
  max-width: none;
  padding: 48px clamp(24px, 9vw, 138px);
  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/posters/introweb.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;
  /* Shares the row however many figures there are; wraps on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 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; }
/* The whole picture, at its own shape - nothing cut to fit a frame. */
.home-page .feature-media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.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 .hero-copy { width: min(520px, 70%); }
  .home-page .feature-stats { 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: 480px;
    padding: 40px 22px;
    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; }
}

/* On the deep canvas like the other pages: after the video, every block is a
   rounded card. Tones alternate as elsewhere; home-tone--* on the markup picks
   each one. */
.home-page .refs,
.home-page .features-intro,
.home-page .feature-row,
.home-page .fleet-section,
.home-page .partners-section {
  box-sizing: border-box;
  width: min(var(--m-card-max), calc(100% - 2 * var(--m-gutter)));
  max-width: none;
  margin: 0 auto 40px;
  border-radius: 28px;
}
.home-page .features-intro,
.home-page .fleet-section,
.home-page .partners-section { padding: clamp(56px, 7vw, 110px) clamp(32px, 5.5vw, 96px); }
.home-page .feature-row { padding: clamp(44px, 6vw, 88px) clamp(32px, 5.5vw, 96px); }
.home-page .features-intro, .home-page .partners-section, .home-page .home-tone--light { background: #f4f7f5; }
.home-page .home-tone--warm { background: #fbf3ea; }
.home-page .home-tone--green { background: var(--m-green); }
.home-page .partners-section { margin-bottom: 14vh; text-align: center; }

/* The logo strip is a white card, since the grey logos were cut on white. Its
   ends fade under overlays now; a mask would fade the card edges as well. */
.home-page .refs { position: relative; width: 100%; margin: 0 0 40px; padding: 30px 0 34px; border-radius: 0; background: #fff; border-bottom: 0; -webkit-mask-image: none; mask-image: none; }
.home-page .refs::before, .home-page .refs::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 9%; pointer-events: none; }
.home-page .refs::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.home-page .refs::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

/* Green cards: light type, and the outline button drawn in white. */
.home-page .home-tone--green h2, .home-page .home-tone--green h3 { color: #fff; }
.home-page .home-tone--green .feature-copy > p, .home-page .home-tone--green .lead { color: rgba(255,255,255,.78); }
.home-page .home-tone--green .feature-points li { color: rgba(255,255,255,.86); }
.home-page .home-tone--green .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.home-page .home-tone--green .btn-outline:hover { background: #fff; border-color: #fff; color: var(--m-green); }
.home-page .fleet-split img { border-radius: 14px; }
@media (max-width: 600px) {
  .home-page .refs,
  .home-page .features-intro,
  .home-page .feature-row,
  .home-page .fleet-section,
  .home-page .partners-section { width: calc(100% - 24px); margin-bottom: 20px; border-radius: 20px; }
  .home-page .features-intro, .home-page .fleet-section, .home-page .partners-section, .home-page .feature-row { padding: 36px 22px 40px; }
  .home-page .refs { width: 100%; margin: 0 0 20px; padding: 26px 0 30px; border-radius: 0; }
  .home-page .partners-section { margin-bottom: 10vh; }
}
/* The map closes the page as a full-width white band that runs straight into
   the white footer under it - one closing banner, not one more card. */
.home-page .partners-section { width: 100%; max-width: none; margin: 8vh 0 0; padding: clamp(64px, 8vw, 112px) var(--m-gutter) clamp(40px, 5vw, 72px); border-radius: 0; background: #fff; }
.home-page .partners-section .office-map { max-width: 1040px; height: clamp(300px, 30vw, 400px); }
.home-page .site-footer { border-top-color: #e4ece8; }

.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; }
/* ---- Software page (motion lives in assets/js/parallax.js) ----
   Everything here reads as a finished page without the script. The script adds
   .sw-motion to <html>, and only then does the opening get its scroll length
   and the pieces their starting positions. */
.software-page { --sw-deep: #002e29; background: var(--sw-deep); }
.sw-progress { position: fixed; top: 60px; left: 0; right: 0; z-index: 49; height: 3px; pointer-events: none; display: none; }
.sw-motion .sw-progress { display: block; }
.sw-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--inner-orange), #ffd29c); transform: scaleX(0); transform-origin: 0 50%; }

/* Opening */
.sw-intro { position: relative; background: var(--sw-deep); color: #fff; }
.sw-motion .sw-intro { height: calc(100vh - 60px + 140vh); }
.sw-intro-stage { position: relative; overflow: hidden; padding: 72px 24px 80px; }
.sw-motion .sw-intro-stage { position: sticky; top: 60px; height: calc(100vh - 60px); padding: 0; }
.sw-intro-grid {
  position: absolute;
  inset: -20% 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, #000 15%, transparent 72%);
  will-change: transform;
}
.sw-intro-glow {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 110vw;
  height: 80vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(243,149,60,.34), rgba(0,168,150,.16) 55%, transparent);
  pointer-events: none;
}
.sw-intro-copy { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.sw-motion .sw-intro-copy { position: absolute; top: clamp(34px, 8vh, 92px); left: 0; right: 0; padding: 0 24px; will-change: transform, opacity; }
.sw-eyebrow { margin: 0 0 16px; color: var(--inner-orange); font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.sw-intro h1 {
  margin: 0;
  font-size: clamp(60px, 10.5vw, 160px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  background: linear-gradient(180deg, #fff 35%, #8fd3c6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sw-tagline { max-width: 560px; margin: 22px auto 0; color: rgba(255,255,255,.78); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.sw-screen-wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 56px; perspective: 1400px; }
.sw-motion .sw-screen-wrap { position: absolute; inset: 0; align-items: center; margin: 0; }
.sw-screen {
  position: relative;
  width: min(1100px, 84vw);
  aspect-ratio: 1902 / 938;
  overflow: hidden;
  border-radius: 22px;
  background: #0d1110 url("../../images/site/RemoteD1.png") center / cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 70px 120px -40px rgba(0,0,0,.75), 0 0 90px rgba(243,149,60,.2);
  will-change: transform;
}
.sw-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-intro-label {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 5vh, 48px);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,30,27,.62);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
}
.sw-motion .sw-intro-label { display: inline-flex; }
.sw-intro-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--inner-orange); box-shadow: 0 0 0 0 rgba(243,149,60,.6); animation: sw-pulse 1.8s ease-out infinite; }
@keyframes sw-pulse { to { box-shadow: 0 0 0 12px rgba(243,149,60,0); } }

/* Name bands */
.sw-marquee { overflow: hidden; padding: 9vh 0 11vh; background: var(--sw-deep); color: #fff; }
.sw-marquee-row {
  display: flex;
  align-items: center;
  gap: .45em;
  width: max-content;
  font-size: clamp(52px, 8.5vw, 140px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  white-space: nowrap;
  will-change: transform;
}
.sw-marquee-row i { flex: none; width: .22em; height: .22em; border-radius: 50%; background: var(--inner-orange); }
.sw-marquee-row--outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.4); }
.sw-marquee-row--outline i { background: transparent; box-shadow: inset 0 0 0 2px rgba(243,149,60,.8); }

@media (max-width: 800px) {
  .sw-motion .sw-intro { height: calc(100vh - 60px + 90vh); }
  .sw-screen { width: 88vw; border-radius: 14px; }
  .sw-marquee { padding: 6vh 0 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-intro-label i { animation: none; }
}

/* ==== Shared page system ====
   The look the software page set, used across the site: a dark hero band, and
   content in rounded cards on a deep green canvas.

   - Reveals sit behind .m-motion. A one-line script in each page's head adds it
     only when the visitor has not asked for less motion, and assets/js/reveal.js
     marks each [data-reveal] part .is-in as it reaches the view.
   - A picture wrapped in <button class="m-zoom" data-zoom> opens large in the
     shared viewer (assets/js/lightbox.js).
   Colours are their own tokens so a page on any theme (inner, solutions, home)
   can use the pieces. */
:root {
  --m-green: #00554d;
  --m-orange: #f3953c;
  --m-ink: #172321;
  --m-muted: #53635f;
  --m-deep: #002e29;
  /* Every card on the site is this wide at most, with this gap to the edge. */
  --m-card-max: 1440px;
  --m-gutter: clamp(12px, 3vw, 40px);
}
.m-page { background: var(--m-deep); }

/* Hero band */
.m-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(84px, 13vh, 140px) 24px clamp(72px, 11vh, 120px);
  background: var(--m-deep);
  color: #fff;
  text-align: center;
}
.m-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 10%, transparent 70%);
}
.m-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40%;
  z-index: -1;
  width: 110vw;
  height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(243,149,60,.3), rgba(0,168,150,.14) 55%, transparent);
  pointer-events: none;
}
.m-hero-copy { position: relative; max-width: 920px; margin: 0 auto; }
/* With a photo: it fills the band under a deep wash that keeps the type
   readable, in place of the grid. */
.m-hero--photo { display: grid; place-items: center; min-height: clamp(440px, 64vh, 680px); }
.m-hero-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.m-hero--photo::before { background: linear-gradient(180deg, rgba(0,46,41,.62) 0%, rgba(0,46,41,.74) 55%, rgba(0,46,41,.96) 100%); -webkit-mask-image: none; mask-image: none; }
.m-eyebrow { margin: 0 0 16px; color: var(--m-orange); font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.m-hero h1 {
  margin: 0;
  font-size: clamp(48px, 8.5vw, 124px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.045em;
  background: linear-gradient(180deg, #fff 35%, #8fd3c6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-tagline { max-width: 640px; margin: 22px auto 0; color: rgba(255,255,255,.78); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.m-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.m-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background .25s ease, border-color .25s ease;
}
.m-chips a:hover, .m-chips a:focus-visible { background: var(--m-orange); border-color: var(--m-orange); outline: none; }

/* Products hero: one card per series, saying what job it does. */
.m-needs { margin-top: 40px; }
.m-needs-q { margin: 0 0 16px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.m-needs ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; }
.m-needs a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  color: #fff;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s ease, box-shadow .25s ease;
}
.m-needs a:hover, .m-needs a:focus-visible { transform: translateY(-4px); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--m-orange, #f3953c); outline: none; }
.m-need-art { width: 100%; max-width: 168px; height: auto; margin-bottom: 14px; fill: none; stroke: rgba(255,255,255,.88); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-need-art .a { fill: rgba(243,149,60,.22); stroke: var(--m-orange, #f3953c); }
.m-need-art .m { stroke: var(--m-orange, #f3953c); stroke-width: 2.2; }
.m-need-art .g { stroke: rgba(255,255,255,.28); stroke-dasharray: 3 4; }
.m-needs strong { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.m-need-how { margin: 8px 0 16px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }
.m-need-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); color: var(--m-orange, #f3953c); font-size: 13px; font-weight: 700; }
.m-need-foot svg { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.m-needs a:hover .m-need-foot svg, .m-needs a:focus-visible .m-need-foot svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .m-needs ul { grid-template-columns: 1fr; }
  .m-need-art { max-width: 140px; }
}

/* Cards */
.m-stack { padding: 0 var(--m-gutter) 14vh; background: var(--m-deep); }
.m-card {
  position: relative;
  max-width: var(--m-card-max);
  margin: 0 auto 40px;
  padding: clamp(40px, 6vw, 100px) clamp(32px, 5.5vw, 96px);
  overflow: hidden;
  border-radius: 28px;
  scroll-margin-top: 84px;
}
.m-card:last-child { margin-bottom: 0; }
.m-card-main { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.m-card-main--flip { grid-template-columns: 1.15fr .85fr; }
.m-card-main--flip > .m-media { order: -1; }
.m-card-copy { position: relative; z-index: 1; }
.m-card-head { position: relative; z-index: 1; max-width: 760px; }
.m-num {
  display: block;
  margin-bottom: 18px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--m-orange);
  font-size: clamp(64px, 8vw, 124px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
}
.m-kicker { margin: 0 0 12px; color: var(--m-orange); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.m-card h2 { margin: 0 0 20px; font-size: clamp(32px, 3.8vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-align: left; }
.m-card .lead { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.75; text-align: left; }
.m-card .lead + .lead { margin-top: 18px; }
.m-card-head .lead { max-width: 760px; }
.m-card--light { background: #f4f7f5; }
.m-card--warm { background: #fbf3ea; }
.m-card--green { background: var(--m-green); }
.m-card--light h2, .m-card--warm h2, .m-card--light h3, .m-card--warm h3 { color: var(--m-green); }
.m-card--light .lead, .m-card--warm .lead { color: var(--m-muted); }
.m-card--green h2, .m-card--green h3 { color: #fff; }
.m-card--green .lead { color: rgba(255,255,255,.78); }
.m-media { position: relative; perspective: 1200px; }
.m-shot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,48,43,.08), 0 40px 80px -30px rgba(0,30,27,.55);
  transform-origin: 50% 100%;
}
.m-shot img { width: 100%; height: auto; border-radius: 0; }
.m-dots {
  position: absolute;
  right: -10%;
  bottom: -18%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(243,149,60,.6) 1.6px, transparent 2px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 60% 60%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 60% 60%, #000 30%, transparent 72%);
}
.m-card-main--flip .m-dots { right: auto; left: -10%; }
.m-card--green .m-dots { background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.6px, transparent 2px); }
/* The same dots in the corner of every light card on the site, behind its
   content. A card that already has dots beside its picture keeps just those. */
:is(.m-card--light, .m-card--warm, .home-page .features-intro, .home-page .home-tone--light, .home-page .home-tone--warm, .solutions-section):not(:has(.m-dots)) { position: relative; isolation: isolate; }
:is(.m-card--light, .m-card--warm, .home-page .features-intro, .home-page .home-tone--light, .home-page .home-tone--warm, .solutions-section):not(:has(.m-dots))::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(243,149,60,.55) 1.6px, transparent 2px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 75% 75%, #000 25%, transparent 70%);
  mask-image: radial-gradient(circle at 75% 75%, #000 25%, transparent 70%);
  pointer-events: none;
}

/* A heading for a group of cards, on the deep canvas between them. */
.m-section-head { max-width: var(--m-card-max); margin: 0 auto 32px; color: #fff; scroll-margin-top: 84px; }
.m-card + .m-section-head { margin-top: 14vh; }
.m-section-head .m-eyebrow { margin-bottom: 12px; }
.m-section-head h2 { margin: 0 0 14px; color: #fff; font-size: clamp(32px, 4vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.m-section-head p:not(.m-eyebrow) { max-width: 640px; margin: 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; }

/* A band on the deep canvas: a line of copy and the screens it runs on. */
.m-devices {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: var(--m-card-max);
  margin: 0 auto 40px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: #fff;
}
.m-devices h3 { margin: 0 0 12px; color: #fff; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.m-devices p:not(.m-kicker) { margin: 0; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.7; }
@media (max-width: 900px) { .m-devices { grid-template-columns: 1fr; } }

/* The devices in that band: a TV at the back, a computer in front of it on
   the left and a phone on the right, each a drawn frame round a screenshot.
   All sizes are shares of the scene, so it scales as one picture. */
.m-screens { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 16 / 11; }
.m-screens::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(243,149,60,.28), transparent); filter: blur(24px); }
.m-device { position: absolute; }
.m-device-screen { position: relative; overflow: hidden; border: clamp(4px, .55vw, 7px) solid #0b100f; border-radius: 8px; background: #0b100f; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 28px 56px -18px rgba(0,0,0,.65); }
.m-device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A soft glare across the glass. */
.m-device-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 40%); pointer-events: none; }
.m-device-stand { position: relative; display: block; margin: 0 auto; background: linear-gradient(90deg, #172120, #2e3a39, #172120); }
.m-device-stand::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 5px; border-radius: 5px 5px 2px 2px; background: #2a3534; transform: translateX(-50%); }

.m-device--tv { top: 0; right: 0; width: 74%; }
.m-device--tv .m-device-screen { aspect-ratio: 16 / 9; }
.m-device--tv .m-device-stand { width: 5%; height: clamp(8px, 1.2vw, 14px); }
.m-device--tv .m-device-stand::after { width: 520%; }

.m-device--pc { left: 0; bottom: 0; width: 52%; }
/* A thicker lower edge, like a monitor's chin. */
.m-device--pc .m-device-screen { aspect-ratio: 16 / 10; border-bottom-width: clamp(10px, 1.3vw, 16px); }
.m-device--tv img, .m-device--pc img { object-position: left top; }
.m-device--pc .m-device-stand { width: 12%; height: clamp(14px, 2.2vw, 28px); }
.m-device--pc .m-device-stand::after { width: 300%; }

.m-device--phone { right: 3%; bottom: 0; width: 17%; }
.m-device--phone .m-device-screen { aspect-ratio: 9 / 19; border-radius: clamp(14px, 2vw, 24px); }
/* The phone shows the software's own phone layout. */
.m-device--phone img { object-position: center top; }
.m-device--phone .m-device-screen::before { content: ""; position: absolute; z-index: 1; top: 3%; left: 50%; width: 30%; height: 3%; border-radius: 999px; background: #0b100f; transform: translateX(-50%); }

/* They come in one after another as the band reaches the view. */
.m-motion .m-devices .m-device { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.m-motion .m-devices .m-device--tv { transition-delay: .15s; }
.m-motion .m-devices .m-device--pc { transition-delay: .3s; }
.m-motion .m-devices .m-device--phone { transition-delay: .45s; }
.m-motion .m-devices.is-in .m-device { opacity: 1; transform: none; }

/* Features: icon, title and a sentence each */
.m-features { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(0,85,77,.12); }
.m-card-head + .m-features { margin-top: clamp(32px, 4vw, 48px); }
.m-card--green .m-features { border-top-color: rgba(255,255,255,.16); }
.m-features-head h3 { margin: 0 0 28px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
/* Fits however many there are - two share the row, three split it. */
.m-feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.m-feature {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 34px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,48,43,.07), 0 24px 50px -30px rgba(0,30,27,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.m-card--green .m-feature { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.m-feature-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 26px; border-radius: 16px; background: rgba(243,149,60,.14); color: var(--m-orange); transition: background .35s ease, color .35s ease; }
.m-feature-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-feature h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; line-height: 1.25; }
.m-feature p { margin: 0; color: var(--m-muted); font-size: 15px; line-height: 1.65; }
.m-card--green .m-feature p { color: rgba(255,255,255,.74); }
@media (hover: hover) {
  .m-feature:hover, .m-motion [data-reveal].is-in .m-feature:hover { transform: translateY(-4px); transition-delay: 0s; }
  .m-feature:hover { box-shadow: 0 0 0 1px rgba(0,48,43,.08), 0 30px 60px -28px rgba(0,30,27,.45); }
  .m-card--green .m-feature:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
  .m-feature:hover .m-feature-icon { background: var(--m-orange); color: #fff; }
}

/* Product tiles: a picture and a name */
.m-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.m-model { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(0,48,43,.07), 0 24px 50px -30px rgba(0,30,27,.35); }
.m-card--green .m-model { box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.m-model .m-zoom img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 18px; background: #f4f7f5; border-radius: 0; }
.m-model h3 { margin: 0; padding: 18px 22px 20px; color: var(--m-green) !important; font-size: 18px; font-weight: 700; }

.m-card-head + .m-models { margin-top: clamp(32px, 4vw, 48px); }

/* A form in a card: the card sets the width, the form fills it. */
.m-card--form { max-width: 980px; }
.m-card .contact-form { max-width: none; margin: 32px 0 0; }

/* Closing call to action, a card of its own at the end of a page. */
.m-cta {
  position: relative;
  max-width: var(--m-card-max);
  margin: 40px auto 0;
  padding: clamp(64px, 9vw, 130px) 24px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(ellipse 70% 90% at 50% 120%, rgba(243,149,60,.38), transparent 62%), linear-gradient(160deg, #00685e, #003a34);
  color: #fff;
  text-align: center;
}
.m-cta h2 { max-width: 720px; margin: 0 auto 30px; color: #fff; font-size: clamp(30px, 4vw, 54px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
.m-btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  border-radius: var(--btn-radius);
  background: var(--m-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .25s ease, color .25s ease;
}
.m-btn:hover, .m-btn:focus-visible { background: #fff; color: var(--m-green); outline: none; }

/* Zoomable pictures */
.m-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; cursor: zoom-in; overflow: hidden; }
.m-zoom img { display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.m-zoom:focus-visible { outline: 3px solid var(--m-orange); outline-offset: -3px; }
.m-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,30,27,.72);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: background .3s ease, transform .3s ease;
}
.m-zoom-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) {
  .m-zoom:hover img { transform: scale(1.03); }
  .m-zoom:hover .m-zoom-hint { background: var(--m-orange); transform: scale(1.08); }
}

/* A video in place of a picture: it plays silently while on screen
   (lightbox.js). With less motion asked for, a click plays it instead. */
.m-video-player { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: inherit; background: #000; }
.m-video-player.is-still { cursor: pointer; }
/* A screen recording wider than 16:9 keeps its own shape, so no edge of the app is cut off. */
.m-video-player--screen { aspect-ratio: 1920 / 944; }
.home-page .feature-media .m-video-player { border-radius: 14px; }
/* A feature picture opens larger on click; its frame keeps the rounded corners while it zooms on hover. */
.home-page .feature-media .m-zoom { border-radius: 14px; }
.home-page .feature-media .m-zoom img { border-radius: 0; }
/* The same for a YouTube video: its poster until the player is actually
   playing, then the player, scaled up a touch so YouTube's own title and
   logo overlays fall outside the frame. */
.m-yt { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: inherit; background: #000; }
.m-yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transform: scale(1.12); transition: opacity .6s ease; }
.m-yt.is-playing .m-yt-frame { opacity: 1; }
.m-yt.is-still { cursor: pointer; }
.home-page .feature-media .m-yt { border-radius: 14px; }
/* Filling a box of any shape (the home hero): the player is sized to cover it,
   like object-fit: cover, and the poster is whatever the box already shows. */
.m-yt--cover { aspect-ratio: auto; background: transparent; container-type: size; }
.m-yt--cover .m-yt-frame { inset: auto; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%) scale(1.15); }

/* The viewer lightbox.js opens */
.m-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: #fff; }
.m-lightbox[open] { display: grid; place-items: center; }
.m-lightbox::backdrop { background: rgba(0,20,18,.88); backdrop-filter: blur(6px); }
html:has(.m-lightbox[open]) { overflow: hidden; }
.m-lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 72px 20px 28px; }
.m-lightbox-figure img { width: auto; max-width: min(1600px, 94vw); height: auto; max-height: calc(100vh - 150px); border-radius: 12px; background: #fff; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.m-lightbox-figure figcaption { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.m-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease;
}
.m-lightbox-close:hover, .m-lightbox-close:focus-visible { background: var(--m-orange); outline: none; }
.m-lightbox-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Gallery: two sections on the deep canvas. Videos open with a featured one
   (large, with a line of copy and a watch button), then an even grid; photos
   are a mosaic with the first one large. Tiles are 16:9 - a picture of another
   shape is trimmed to fill (from the centre) and opens whole in the viewer. */
.g-section { padding: 0 var(--m-gutter) 12vh; background: var(--m-deep); scroll-margin-top: 60px; }
.g-inner { max-width: var(--m-card-max); margin: 0 auto; }
.g-head { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.g-head .m-eyebrow { margin-bottom: 12px; }
.g-head h2 { margin: 0; color: #fff; font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }

.g-feature {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 24px;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.g-feature-copy { padding-right: clamp(4px, 2vw, 28px); color: #fff; }
.g-feature-copy h3 { margin: 0 0 16px; color: #fff; font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.g-feature-copy p:not(.m-kicker) { margin: 0 0 28px; color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.7; }
.g-feature-copy .m-btn { gap: 10px; border: 0; font-family: inherit; cursor: pointer; }
.g-feature-copy .m-btn svg { width: 16px; height: 16px; fill: currentColor; }
.g-tile--feature .g-play { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.g-tile--feature .g-play svg { width: 34px; height: 34px; }

.g-grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.g-grid--videos { grid-template-columns: repeat(3, 1fr); }
/* Photos share the row evenly; from five up they become a mosaic, the first
   one large and four small ones filling the space beside it exactly. */
.g-grid--photos { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.g-grid--photos:has(> .g-item:nth-child(5)) { grid-template-columns: repeat(4, 1fr); }
.g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child { grid-column: span 2; grid-row: span 2; }
.g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child .g-tile { height: 100%; }
.g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child .g-tile img { height: 100%; aspect-ratio: auto; }
.g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child .g-title { font-size: clamp(18px, 1.8vw, 24px); }
.g-item { margin: 0; }
.g-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #0b2a26;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.6);
  transition: transform .35s ease, box-shadow .35s ease;
}
.g-tile[data-video], .g-tile[data-youtube] { cursor: zoom-in; }
.g-tile .m-yt, .g-tile .m-video-player { border-radius: 0; }
.g-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.g-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(0,20,18,0), rgba(0,20,18,.85)); pointer-events: none; }
.g-caption { position: absolute; left: 20px; right: 70px; bottom: 18px; z-index: 1; }
.g-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.g-tile .m-zoom-hint { z-index: 1; }
/* On a video tile the hint is a play mark: the video opens larger on click. */
.g-video-hint svg { fill: currentColor; stroke: none; margin-left: 2px; }
.g-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: rgba(243,149,60,.95);
  transition: transform .3s ease;
}
/* A soft ring breathing out of the play button. */
.g-play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(243,149,60,.5); animation: g-pulse 2.2s ease-out infinite; }
@keyframes g-pulse { to { box-shadow: 0 0 0 18px rgba(243,149,60,0); } }
.g-play svg { position: relative; width: 26px; height: 26px; margin-left: 3px; fill: #fff; }
.g-tile:focus-visible { outline: 3px solid var(--m-orange); outline-offset: 3px; }
@media (hover: hover) {
  .g-tile:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(0,0,0,.75); }
  .g-tile:hover img { transform: scale(1.05); }
  .g-tile:hover .g-play { transform: scale(1.08); }
  .g-tile:hover .m-zoom-hint { background: var(--m-orange); }
}
@media (prefers-reduced-motion: reduce) {
  .g-play::before { animation: none; }
  .g-tile, .g-tile img { transition: none; }
  .g-tile:hover { transform: none; }
}
.g-section .m-cta { margin-top: 12vh; }
.m-lightbox-figure video { width: auto; max-width: min(1600px, 94vw); max-height: calc(100vh - 150px); border-radius: 12px; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
/* A YouTube player: 16:9, as wide as the screen allows without running taller than it. */
.m-lightbox-tube { pointer-events: none; display: block; width: min(1280px, 94vw, calc((100vh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.m-lightbox-tube[hidden] { display: none; }
/* The viewer's own video bar: play/pause, ten seconds either way, a position
   slider (filled orange up to where the video is) and the time. With it
   showing, the video gives up a little height for it. */
.m-lightbox.has-bar .m-lightbox-figure video { max-height: calc(100vh - 214px); cursor: pointer; }
.m-lightbox.has-bar .m-lightbox-tube { width: min(1280px, 94vw, calc((100vh - 214px) * 16 / 9)); }
.m-lightbox-bar { display: flex; align-items: center; gap: 6px; width: min(1280px, 94vw); padding: 6px 14px 6px 6px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.m-lightbox-bar[hidden] { display: none; }
.m-lightbox-bar button { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; transition: background .2s ease; }
.m-lightbox-bar button:hover, .m-lightbox-bar button:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.m-lightbox-bar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.m-lightbox-bar text { fill: currentColor; stroke: none; font-size: 7px; font-weight: 700; text-anchor: middle; }
.m-lb-play { background: var(--m-orange, #f3953c) !important; }
.m-lb-play .i-play { display: none; fill: currentColor; }
.m-lightbox-bar.is-paused .m-lb-play .i-play { display: block; }
.m-lightbox-bar.is-paused .m-lb-play .i-pause { display: none; }
.m-lb-seek { flex: 1; min-width: 0; height: 24px; margin: 0 8px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.m-lb-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--m-orange, #f3953c) var(--p, 0%), rgba(255,255,255,.22) var(--p, 0%)); }
.m-lb-seek::-moz-range-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--m-orange, #f3953c) var(--p, 0%), rgba(255,255,255,.22) var(--p, 0%)); }
.m-lb-seek::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(243,149,60,.4); -webkit-appearance: none; appearance: none; }
.m-lb-seek::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(243,149,60,.4); }
.m-lb-seek:focus-visible { outline: 2px solid var(--m-orange, #f3953c); outline-offset: 4px; border-radius: 6px; }
.m-lb-time { flex: none; min-width: 86px; color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 520px) {
  .m-lightbox-bar { gap: 2px; padding: 4px 10px 4px 4px; }
  .m-lightbox-bar button { width: 36px; height: 36px; }
  .m-lb-seek { margin: 0 6px; }
  .m-lb-time { min-width: 0; font-size: 12px; }
}
@media (max-width: 1000px) {
  .g-feature { grid-template-columns: 1fr; }
  .g-feature-copy { padding: 4px 8px 10px; }
  .g-grid--videos, .g-grid--photos, .g-grid--photos:has(> .g-item:nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
  .g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child { grid-row: auto; }
  .g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child .g-tile img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .g-grid--videos, .g-grid--photos, .g-grid--photos:has(> .g-item:nth-child(5)) { grid-template-columns: 1fr; }
  .g-grid--photos:has(> .g-item:nth-child(5)) .g-item:first-child { grid-column: auto; }
  .g-title { font-size: 15px; }
  .g-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .g-tile--feature .g-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
}

/* Motion. The hero copy rises on load; everything marked data-reveal comes in
   once as it reaches the view. data-reveal="up" moves the element itself,
   data-reveal="stagger" its children one after another, and a bare data-reveal
   on a card part animates the known pieces inside it. */
@keyframes m-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes m-zoom-in { from { opacity: 0; transform: scale(.9); } }
@keyframes m-fade { from { opacity: 0; } }
.m-motion .m-hero-copy > * { animation: m-rise 1s cubic-bezier(.16,1,.3,1) both; }
.m-motion .m-hero-copy > :nth-child(2) { animation-delay: .1s; }
.m-motion .m-hero-copy > :nth-child(3) { animation-delay: .2s; }
.m-motion .m-hero-copy > :nth-child(4) { animation-delay: .3s; }
.m-motion .m-lightbox[open] .m-lightbox-figure img { animation: m-zoom-in .5s cubic-bezier(.16,1,.3,1); }
.m-motion .m-lightbox[open]::backdrop { animation: m-fade .3s ease; }

.m-motion [data-reveal="up"],
.m-motion [data-reveal="stagger"] > *,
.m-motion [data-reveal] .m-card-copy > *,
.m-motion [data-reveal] .m-card-head > *,
.m-motion [data-reveal] .m-features-head,
.m-motion [data-reveal] .m-feature,
.m-motion [data-reveal] .m-model {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.m-motion [data-reveal] .m-shot {
  opacity: 0;
  transform: translateY(56px) rotateX(10deg) scale(.96);
  transition: opacity 1s ease .15s, transform 1.3s cubic-bezier(.16,1,.3,1) .15s;
}
.m-motion [data-reveal="stagger"] > :nth-child(2),
.m-motion [data-reveal] .m-card-copy > :nth-child(2),
.m-motion [data-reveal] .m-card-head > :nth-child(2),
.m-motion [data-reveal] .m-feature:nth-child(1),
.m-motion [data-reveal] .m-model:nth-child(1) { transition-delay: .1s; }
.m-motion [data-reveal="stagger"] > :nth-child(3),
.m-motion [data-reveal] .m-card-copy > :nth-child(3),
.m-motion [data-reveal] .m-card-head > :nth-child(3),
.m-motion [data-reveal] .m-feature:nth-child(2),
.m-motion [data-reveal] .m-model:nth-child(2) { transition-delay: .2s; }
.m-motion [data-reveal="stagger"] > :nth-child(4),
.m-motion [data-reveal] .m-card-copy > :nth-child(4),
.m-motion [data-reveal] .m-card-head > :nth-child(4),
.m-motion [data-reveal] .m-feature:nth-child(3),
.m-motion [data-reveal] .m-model:nth-child(3) { transition-delay: .3s; }
.m-motion [data-reveal="stagger"] > :nth-child(n+5),
.m-motion [data-reveal] .m-card-copy > :nth-child(n+5) { transition-delay: .4s; }
.m-motion [data-reveal="up"].is-in,
.m-motion [data-reveal="stagger"].is-in > *,
.m-motion [data-reveal].is-in .m-card-copy > *,
.m-motion [data-reveal].is-in .m-card-head > *,
.m-motion [data-reveal].is-in .m-features-head,
.m-motion [data-reveal].is-in .m-feature,
.m-motion [data-reveal].is-in .m-model,
.m-motion [data-reveal].is-in .m-shot { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .m-card { margin-bottom: 20px; padding: 32px 22px 40px; border-radius: 20px; }
  .m-card-main, .m-card-main--flip { grid-template-columns: 1fr; }
  .m-card-main--flip > .m-media { order: 0; }
  .m-card .lead { font-size: 16px; }
  .m-features { margin-top: 44px; }
  .m-feature-list { grid-template-columns: 1fr; gap: 14px; }
}

.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 { padding-left: 22px; padding-right: 22px; }
  .inner-page .product-card img { height: 215px; }
}

.solutions-page {
  --solutions-green: #00554d;
  --solutions-orange: #f3953c;
  --solutions-ink: #172321;
  --solutions-soft: #f4f7f5;
  background: var(--m-deep);
  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: 820px; }
.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;
}
/* The height buttons (carriers only) and a picture card per payload. */
.picker-head--second { margin-top: 28px; }
.picker-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.picker-seg button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 16px;
  border: 1px solid #dce6e1;
  border-radius: 12px;
  background: #fff;
  color: var(--m-green);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.picker-seg small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #8fa39d; }
.picker-seg button:hover { border-color: var(--m-green); }
.picker-seg button.on { background: var(--m-green); border-color: var(--m-green); color: #fff; }
.picker-seg button.on small { color: rgba(255,255,255,.75); }
.picker-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 8px 12px;
  border: 1px solid #dce6e1;
  border-radius: 14px;
  background: #fff;
  color: var(--m-green);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
.picker-card img { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 6px; object-fit: contain; }
.picker-card b { font-size: 14px; font-weight: 800; }
.picker-card small { font-size: 11px; font-weight: 600; color: #8fa39d; }
.picker-card:hover { border-color: var(--m-green); transform: translateY(-2px); }
.picker-card.on { border-color: var(--m-orange); box-shadow: 0 0 0 1px var(--m-orange), 0 14px 26px -16px rgba(0,48,43,.45); }
.picker-card.on b { color: var(--m-orange); }
/* Another height: still clickable, it just switches the height too. */
.picker-card.is-dim { opacity: .42; }
.picker-card.is-dim:hover { opacity: .85; }
.picker-seg button:focus-visible, .picker-card:focus-visible { outline: 3px solid var(--m-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .picker-card, .picker-seg button { transition: none; } .picker-card:hover { transform: none; } }

.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 {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, #eef4f1);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* The robot fits inside an even margin whatever its shape: a wide carrier is
   held by the width, a tall stacker by the height. A percentage max-height
   never took hold here, so tall models ran off the top and bottom. */
.model-art img { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; 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: #fff; 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;
}
/* Each one a small tile: an icon, then the name over its value. */
.series-shared ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.series-shared li { display: grid; grid-template-columns: 38px 1fr; align-items: center; column-gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f6f8f7; font-size: 12.5px; color: #53635f; }
.series-shared li svg { grid-row: span 2; width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: rgba(243,149,60,.12); fill: none; stroke: var(--m-orange, #f3953c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.series-shared li span { align-self: end; line-height: 1.3; }
.series-shared li b { align-self: start; font-size: 14px; line-height: 1.35; color: var(--inner-ink, #172321); }
@media (max-width: 520px) {
  .series-shared ul { grid-template-columns: 1fr 1fr; gap: 8px; }
  .series-shared li { grid-template-columns: 30px 1fr; column-gap: 8px; padding: 8px; }
  .series-shared li svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; }
  .series-shared li b { font-size: 13px; }
}

/* 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;
  background: #fff;
  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; }
  /* A phone gets the cards as a row to swipe rather than a grid of slivers. */
  .picker-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .picker-card { scroll-snap-align: start; }
}

/* On the deep canvas like the other pages: each series is a card, in the same
   light / warm / light rhythm, and the ecosystem block a green one. */
.solutions-section { box-sizing: border-box; width: min(var(--m-card-max), calc(100% - 2 * var(--m-gutter))); margin: 0 auto 40px; padding: clamp(48px, 7vw, 100px) clamp(32px, 5.5vw, 96px); border-radius: 28px; background: #f4f7f5; }
.section-tint { background: #fbf3ea; }
.series-heading { max-width: 690px; margin-bottom: 48px; }
.series-heading h2, .solutions-ecosystem 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 { box-sizing: border-box; width: min(var(--m-card-max), calc(100% - 2 * var(--m-gutter))); margin: 0 auto 40px; padding: clamp(48px, 7vw, 100px) clamp(32px, 5.5vw, 96px); border-radius: 28px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(40px, 8vw, 120px); background: var(--m-green); }
.solutions-ecosystem h2 { color: #fff; }
.solutions-page .solutions-ecosystem .btn-primary { background: var(--m-orange); border-color: var(--m-orange); }
.solutions-page .solutions-ecosystem .btn-primary:hover { background: #fff; border-color: #fff; color: var(--m-green); }
.solutions-ecosystem > div > p:not(.eyebrow) { max-width: 440px; margin: 0 0 28px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.7; }
.solutions-ecosystem img { width: 100%; height: auto; }
.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: 0 var(--m-gutter) 14vh; }
.solutions-cta .m-cta { margin-top: 0; }
.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, .solutions-ecosystem { width: calc(100% - 24px); margin-bottom: 20px; padding: 32px 22px 40px; border-radius: 20px; }
  .solutions-grid, .solutions-grid.single-product, .solutions-grid.two-products { grid-template-columns: 1fr; }
  .solutions-page .product-card img { height: 215px; }
  .solutions-cta { padding: 0 16px 10vh; }
}

/* ---------- 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; }