/* BadgerMecX — base styles.
   Built from the approved V2 homepage mockup (Technical.dc.html).
   Tokens first; every colour used on the site is listed here. */

:root {
  --navy: #0A1633;
  --navy-deep: #070F24;
  --blue: #1F4FFF;
  --blue-dark: #0A2FC7;
  --ink: #4A5470;
  --muted: #6B7A99;
  --line: #E3E6EC;
  --line-strong: #C5CBD6;
  --paper: #FFFFFF;
  --paper-alt: #F4F6FA;
  --orange: #C2410C;
  --gutter: 120px;
  /* The approved design is 1440 wide with 120 margins: a 1200 content column.
     On wider screens the column stays 1200 and the page breathes around it. */
  --content: 1200px;
  --pad: max(var(--gutter), calc((100% - var(--content)) / 2));
}

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

/* Kısa bir sayfada footer içeriğin bittiği yerde bitiyor ve altında beyaz
   bir şerit kalıyordu — sayfa ekrandan kısa olduğunda footer ekranın dibine
   inmiyor. Gövde dikey bir flex sütunu, `main` de boşluğu yiyen öğe: içerik
   azsa footer aşağı itiliyor, çoksa hiçbir şey değişmiyor.
   `100dvh` telefonda adres çubuğunu hesaba katar; desteklemeyen tarayıcıda
   `100vh` geçerli kalır. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: Archivo, "IBM Plex Sans", sans-serif; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 24px; }
h1 { font-size: 64px; }
h2 { font-size: 44px; }
h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0 0 18px; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; }

main { display: block; }
/* Boşluğu yiyen öğe bu. `flex: 1 0 auto` — büyür ama asla kendi içeriğinin
   altına sıkışmaz; `1 1 auto` olsaydı uzun sayfalarda içerik ezilirdi.
   `main` de kendi içinde flex sütunu: yoksa footer aşağı iniyor ama boşluk
   bu kez main'in İÇİNDE kalıyordu — giriş sayfasında lacivert panel bitip
   altında beyaz bir şerit kalması buydu. Sütun olunca `flex: 1` verilen
   bölüm o boşluğu dolduruyor. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.site-footer { flex-shrink: 0; }
@supports (min-height: 100dvh) { body { min-height: 100dvh; } }
/* Wagtail wraps every StreamField block in its own div, so section padding
   is set on the section itself, never on a `main > section` selector. */
.section { padding: 100px var(--pad); }
main > article,
main > h1,
main > section:not(.section),
main > ul,
main > p,
main > nav { padding-left: var(--pad); padding-right: var(--pad); }
main > section:not(.section) { padding-top: 100px; padding-bottom: 100px; }
main > h1 { padding-top: 80px; }
main > ul:last-child, main > p:last-child { padding-bottom: 80px; }

.intro { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 720px; }
.eyebrow, .meta, .code, .equation, .methods, .standard, .expertise, .role {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.equation { text-transform: none; letter-spacing: 0.04em; color: var(--blue); }

/* ---------------------------------------------------------------- header */
/* The whole header stays on screen — the dark strip with the language menu and the account link too (owner,
   15 Oct; on 13 Oct only the menu bar stayed). nav.js writes --strip-h (the strip wraps to two lines on a phone).
   --bar is the pinned header (strip + menu bar); --hdr is everything pinned at the top — that plus,
   on inner pages, the dark breadcrumb row (blog.css .crumb) that sticks right under it. Everything else that
   sticks sits under --hdr, and anchors (#verification, #capabilities…) stop below it via scroll-padding. */
:root { --bar: 104px; --hdr: 104px; --strip-h: 32px; }
html { scroll-padding-top: calc(var(--hdr) + 16px); }
.site-header { position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--line-strong); }
.site-header.is-stuck .site-header__bar { box-shadow: inset 0 1px 0 #fff, 0 8px 24px -16px rgba(10, 22, 51, .45); }

/* Reading progress: a thin vertical bar on the left edge, filled top-down as the page scrolls (nav.js). */
.scroll-progress { position: fixed; left: 0; top: 0; bottom: 0; z-index: 95; width: 3px; background: rgba(10, 22, 51, .06);
                   opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.scroll-progress.is-on { opacity: 1; }
.scroll-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--blue), #6E93FF);
                     transform-origin: top; transform: scaleY(var(--p, 0)); }
@media print { .site-header { position: static; } .scroll-progress { display: none; } }
.site-header__strip {
  min-height: 32px; background: var(--navy); color: #A9B4CF;
  display: flex; align-items: center; justify-content: space-between;
  /* The strip runs to the window edges with a small inset, not to the
     1200 content column — it reads as a status bar that way. */
  padding: 0 clamp(20px, 2.2vw, 48px);
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.02em;
  /* Above the white bar (z-index 40): the language menu drops down over it, not behind it. */
  position: relative; z-index: 50;
}
.site-header__strip a { color: #C3CCE2; }
.site-header__strip a:hover { color: #fff; }
.site-header__bar {
  height: 72px;
  background: linear-gradient(180deg, #F8F9FB 0%, #E6E9EE 55%, #D7DCE3 100%);
  box-shadow: inset 0 1px 0 #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
}
/* Menüye Materials eklenince 1200'lük kolonda logo, menü ve GET QUOTE birbirine
   değiyordu. Header çubuğu masaüstünde sayfa kolonundan daha geniş bir kolona
   yayılıyor (en fazla 1360 px — 1200 sıkışık, 1520 fazla açıktı; kenarlarda 24–48 px): logo sola, düğme sağa açılıyor,
   menü ortada nefes alıyor. Sayfa içeriği ve açılır menü bandı 1200'de kalıyor.
   1100 px altında (hamburger menü) eski dolgu geçerli; panel `--pad`'e göre çiziliyor. */
@media (min-width: 1101px) {
  .site-header__bar { padding: 0 max(clamp(24px, 3vw, 48px), calc((100% - 1360px) / 2)); }
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: #000; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
/* A transparent 2 px underline on every item, so the blue one on the active / hovered item does not lift its text. */
.site-nav a { color: #3A4460; padding: 6px 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--navy); border-bottom: 2px solid var(--blue); }
.site-nav .nav-item__btn, .site-nav .nav-item__btn:hover { background: none; border-radius: 0; }
.nav-item__btn { font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; border-bottom: 2px solid transparent; color: #3A4460; padding: 6px 0; cursor: pointer; }
.nav-item__btn:hover, .nav-item__btn.is-active, .has-drop.is-open .nav-item__btn { color: var(--navy); border-bottom: 2px solid var(--blue); }
.btn-quote { background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; padding: 13px 20px; border-radius: 3px; }
.btn-quote:hover { background: var(--blue); color: #fff; }

/* header extras */
.site-header__right { display: flex; align-items: center; gap: 18px; }
.site-header__sep { width: 1px; height: 14px; background: #2E3F6E; }
.signin { display: inline-flex; align-items: center; gap: 6px; color: #fff; letter-spacing: 0.06em; }
.lang { position: relative; }
.lang__toggle { background: none; border: 0; padding: 0; color: #C3CCE2; font: inherit; letter-spacing: 0.06em; cursor: pointer; }
.lang__toggle:hover { color: #fff; background: none; }
.lang__menu { position: absolute; right: 0; top: 24px; z-index: 40; background: #0A1633; border: 1px solid #22346A; border-radius: 3px; display: flex; flex-direction: column; min-width: 190px; }
.lang__menu[hidden] { display: none; }
.lang__menu a { padding: 10px 14px; color: #C3CCE2; font-size: 12px; letter-spacing: 0.06em; }
.lang__menu a:hover { background: #0D1B40; color: #fff; }
.caret { font-size: 10px; color: #6B7A99; }

/* dropdowns — open on hover / keyboard focus; on touch the first tap opens (nav.js) */
.site-header__bar { position: relative; z-index: 40; }
/* Açılır menü, header boyunca uzanan bir bant.
   `.nav-item` masaüstünde `static`: panel ona göre değil,
   `.site-header__bar`'a göre konumlanıyor (o zaten `position: relative`),
   ve ancak böyle tam genişliğe çıkabiliyor. Mobilde `.nav-item` zaten
   `static` olduğu için orası etkilenmiyor. */
.nav-item { position: static; display: flex; align-items: center; height: 72px; }
.nav-item .caret { display: inline-block; transition: transform .2s ease; }
.nav-drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50; padding-top: 0;
  transform: translateY(-6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-drop__panel {
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 50px -26px rgba(10,22,51,.4);
  padding: 26px var(--pad) 24px;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 48px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop, .has-drop.is-open .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s;
}
.has-drop:hover .caret, .has-drop:focus-within .caret, .has-drop.is-open .caret { transform: rotate(180deg); }
.site-nav .nav-drop a { border-bottom: 0; }

.nav-drop__label { display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); padding-right: 32px; }
.nav-drop__eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.nav-drop__tagline { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.22; color: var(--navy); }

.nav-drop__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; align-content: start; }
/* `.site-nav a` üst menü başlıkları için `white-space: nowrap` veriyor ve
   panelin içindeki bağlantılar da onun altında kalıyordu: açıklamalar satır
   başı yapamayıp tek satırda kesiliyordu ("…with c", "…optimiz"). */
.site-nav .nav-drop__item {
  display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
  border-radius: 5px; color: var(--navy); white-space: normal;
}
.site-nav .nav-drop__item:hover, .site-nav .nav-drop__item:focus { background: var(--paper-alt); border-bottom: 0; color: var(--navy); }
.nav-drop__code { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--orange); }
.nav-drop__t { font-size: 14.5px; font-weight: 600; }
.nav-drop__d { font-size: 12.5px; line-height: 1.5; color: #5A6480; }
.site-nav .nav-drop__all { margin-top: 2px; display: inline-flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.site-nav .nav-drop__all:hover { border-bottom: 0; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .nav-drop, .nav-item .caret { transition: none; } }
.tag-new { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.06em; color: #fff; background: var(--orange); padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
.nav-new { display: inline-flex; align-items: center; }

/* ------------------------------------------------- mobil menü (≤1100px)
   1100px'in altında .site-nav gizleniyordu ve yerine hiçbir şey konmamıştı:
   telefonda sitede logo ve GET QUOTE dışında gidilecek yer yoktu. Services,
   Blog, Calculators, Tessera, Ventures — hiçbirine erişilemiyordu.

   Panel ayrı bir menü listesi değil, aynı <nav>. İki liste tutulsaydı biri
   güncellenip diğeri unutulurdu; menüye eklenen her sayfa buraya da gelsin
   diye tek kaynak. Masaüstü kuralları bu bloğun dışında ve değişmedi. */
/* İkisi de yalnızca mobil panelin parçası. Gizlemeyi unutmak sessiz bir hata
   değil, gürültülü bir hata: <button> varsayılan olarak çizilir ve global
   `button` kuralı onu mavi dolgulu bir kutu yapar. Masaüstü başlığında
   SERVICES, BLOG ve CALCULATORS'ın yanında üç mavi kutu belirmişti. */
.nav-burger, .nav-item__more { display: none; }

/* Dar masaüstü: menü sığıyor ama nefes almıyor. 1101–1240 arasında marka,
   menü ve GET QUOTE birbirine **değiyordu** — "BADGERMECXCOMPANY" tek kelime
   gibi okunuyordu. Menüyü bu genişlikte hamburger'e çevirmek yerine
   daraltıyoruz: 1280'lik bir laptopta tam menü, gizlenmiş menüden iyidir.
   `min-width: 1101px` şart — altında menü zaten dikey panel ve buradaki
   `gap` onun `gap: 0`'ını ezerdi. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .site-nav { gap: 14px; font-size: 12px; }
  .btn-quote { padding: 12px 14px; font-size: 12px; }
  .brand { font-size: 12px; gap: 8px; }
}

@media (max-width: 1100px) {
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;           /* dokunma hedefi 44px — daha küçüğü ıskalanıyor */
    margin-right: -8px; padding: 0; border: 0; border-radius: 4px;
    background: none; color: var(--navy); cursor: pointer; order: 3;
  }
  .nav-burger:hover, .nav-burger:focus-visible { background: rgba(10, 22, 51, .07); }
  .nav-burger__box { display: block; width: 22px; height: 16px; position: relative; }
  .nav-burger__box i {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .22s ease, opacity .15s ease, top .22s ease;
  }
  .nav-burger__box i:nth-child(1) { top: 0; }
  .nav-burger__box i:nth-child(2) { top: 7px; }
  .nav-burger__box i:nth-child(3) { top: 14px; }
  /* Açıkken çarpıya dönüşüyor: aynı düğme kapatma düğmesi olduğu için
     ikonun da kapatmayı anlatması gerekiyor. */
  .is-nav-open .nav-burger__box i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .is-nav-open .nav-burger__box i:nth-child(2) { opacity: 0; }
  .is-nav-open .nav-burger__box i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  .site-header__bar { flex-wrap: wrap; height: auto; min-height: 72px; gap: 12px; }
  .btn-quote { order: 2; padding: 11px 16px; font-size: 12px; }
  .brand { order: 1; margin-right: auto; }

  /* Panel: başlığın altına açılıyor, sayfanın üstünü kaplamıyor —
     böylece içerik yerinde kalıyor ve kapatınca sayfa zıplamıyor. */
  .site-nav {
    order: 4; display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad) 18px;
    border-top: 1px solid var(--line-strong); background: #F4F6FA;
    max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
  }
  .is-nav-open .site-nav { display: flex; }

  /* Her satır tam genişlik ve 48px yüksek: telefonda yanlış bağlantıya
     basmanın en yaygın sebebi küçük ve bitişik hedefler. */
  /* `!important` bilerek: masaüstünde `.site-nav a:hover` (0,2,1) alt çizgiyi
     2px maviye çeviriyor ve listede parmağın değdiği satır ayrı kalınlıkta
     görünüyordu. Buradaki çizgi süs değil, satırları ayıran şey. */
  /* `display: block`, `flex` değil. Flex yapınca metin düğümü ile satır içi
     SVG ayrı birer flex öğesi oluyor; Tessera'nın son harfi yerine geçen
     işaret taban hizasını ve harf aralığını kaybedip yazının üstüne biniyor.
     Blok bırakınca satır içi akış korunuyor, yükseklik de padding'den
     geliyor — flex'e ihtiyaç yok. */
  .site-nav > a,
  .nav-item__link {
    display: block; min-height: 48px; padding: 14px 0; width: 100%;
    border-bottom: 1px solid #E3E8F2 !important; white-space: normal;
  }
  /* Bu ikisinde satır içi işaret yok ve okun sağa yaslanması gerekiyor. */
  .nav-item__btn { display: flex; align-items: center; padding: 0; min-height: 48px; }
  .site-nav > a:hover, .site-nav > a[aria-current="page"] { color: var(--blue); }
  /* `stretch`, `center` değil: başlık ile ok düğmesi ayrı yüksekliklerde
     ortalanınca alt çizgileri iki farklı hizada çıkıyor ve satırı ayıran
     çizgi kırık görünüyor. Gerilince ikisi de satır boyu, çizgi tek. */
  .nav-item { display: flex; flex-wrap: wrap; align-items: stretch; height: auto; width: 100%; position: static; }
  .nav-item__link { flex: 1 1 auto; width: auto; }

  /* Kendi sayfası olan başlığın okunu ayrı düğme çiziyor, içindeki ok
     fazlalık. Ama kendi sayfası OLMAYAN başlıkta (Company) ayrı düğme yok:
     onun oku tek işaret, gizlenirse satır açılmaz görünür ve kimse basmaz.
     İlk denemede tam bu oldu — Company ölü bir satır gibi duruyordu. */
  .nav-item__link:not(.nav-item__btn) .caret { display: none; }
  .nav-item__btn .caret { margin-left: auto; font-size: 12px; transition: transform .2s ease; }

  .nav-item__more {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; min-height: 48px; padding: 0; border: 0;
    border-bottom: 1px solid #E3E8F2; background: none;
    /* Global `button` kuralı 3px köşe yuvarlıyor; alt çizgi o yüzden
       satırın çizgisiyle birleşmeyip kırık görünüyordu. */
    border-radius: 0;
    color: #6B7A99; font-size: 12px; cursor: pointer;
  }
  /* `button:hover { background: var(--navy) }` (0,1,1) sade bir sınıf
     kuralını (0,1,0) yeniyor: ok, basıldıktan sonra lacivert dolu bir kutuya
     dönüşüyordu. Aynı özgüllükle geri alıyoruz. */
  .nav-item__more:hover, .nav-item__more:focus, .nav-item__more:focus-visible {
    background: rgba(10, 22, 51, .06); color: var(--navy);
  }
  .nav-item__more span { display: block; transition: transform .2s ease; }
  .has-drop.is-open .nav-item__more span,
  .has-drop.is-open .nav-item__btn .caret { transform: rotate(180deg); }

  /* Açılır menü mobilde kutu değil, girintili bir alt liste. Masaüstündeki
     mutlak konumlandırma ve gizleme burada geçersiz. */
  .nav-drop {
    position: static; transform: none; opacity: 1; visibility: hidden;
    pointer-events: none; transition: none; flex-basis: 100%;
    height: 0; overflow: hidden;
  }
  .has-drop.is-open .nav-drop { visibility: visible; pointer-events: auto; height: auto; transform: none; }
  /* Üzerine gelince açılma kuralı mobilde kapalı: parmakta "hover" bir kez
     takılıp kalıyor ve menü kendiliğinden açık kalıyordu. */
  .has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop { height: 0; visibility: hidden; pointer-events: none; }
  .has-drop.is-open:hover .nav-drop, .has-drop.is-open:focus-within .nav-drop { height: auto; visibility: visible; pointer-events: auto; }
  .nav-drop__panel {
    min-width: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none;
    background: none; padding: 4px 0 8px 14px; border-left: 2px solid #D5DCEA; margin: 6px 0 8px;
    display: block;                      /* masaüstündeki iki sütunlu bant burada yok */
  }
  .nav-drop__label { display: none; }    /* bölüm adı zaten üstteki başlıkta yazıyor */
  .nav-drop__items { display: block; }
  .site-nav .nav-drop__item { min-height: 44px; justify-content: center; padding: 8px 10px; gap: 2px; }
  .nav-drop__code { display: none; }
  .nav-drop__d { display: none; }        /* açıklamalar dar ekranda satırı üçe katlıyor */
  .site-nav .nav-drop__all { margin-top: 2px; min-height: 44px; display: flex; align-items: center; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-deep); color: #A9B4CF; padding: 64px var(--pad) 28px; font-size: 14px; }
.site-footer a { color: #A9B4CF; }
.site-footer a:hover { color: #fff; }
.site-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer__logo { font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: #fff; }
.site-footer__brand p { margin: 0; line-height: 1.6; max-width: 300px; }
.site-footer__contact { font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.7; }
.site-footer__contact a { color: #C3CCE2; }
.site-footer__contact a:hover { color: #fff; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__head { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.1em; color: #fff; }
.site-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid #1C2B55; margin-top: 44px; padding-top: 22px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.site-footer__social { display: flex; gap: 20px; }

/* ------------------------------------------------------------ home blocks
   Ported from the approved V2 mockup (Technical.dc.html). Colours, sizes and
   spacing follow it; change them there first, then here. */

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; margin-bottom: 44px; }
.sec-head__left { display: flex; flex-direction: column; gap: 12px; }
.sec-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.12em; color: var(--blue); margin: 0; text-transform: uppercase; }
.sec-head h2 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 42px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--navy); }
.sec-head__note { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.6; color: #4A5570; }
.sec-head__link { font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--blue); }
.sec-head__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: left; }
.sec-head__right .sec-head__note { align-self: stretch; }

/* hero ------------------------------------------------------------------ */
.section.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #0A1633; color: #fff;
  padding: 72px var(--pad) 0;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 620px;
}
/* The blueprint grid sits above any background media and below the text. */
/* --grid-a is set per hero block in the admin (0-200 %). */
.hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --ga: calc(var(--grid-a, 100) / 100);
  background-image:
    linear-gradient(rgba(130,160,255, calc(.10 * var(--ga))) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,160,255, calc(.10 * var(--ga))) 1px, transparent 1px),
    linear-gradient(rgba(130,160,255, calc(.04 * var(--ga))) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,160,255, calc(.04 * var(--ga))) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__slide video { opacity: 0; transition: opacity .8s ease; }
.hero__slide video.is-playing { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero.dim-soft .hero__scrim, .page-hero.dim-soft .hero__scrim { background: linear-gradient(90deg, rgba(10,22,51,.80), rgba(10,22,51,.45) 60%, rgba(10,22,51,.25)); }
.hero.dim-medium .hero__scrim, .page-hero.dim-medium .hero__scrim { background: linear-gradient(90deg, rgba(10,22,51,.90), rgba(10,22,51,.62) 60%, rgba(10,22,51,.40)); }
.hero.dim-strong .hero__scrim, .page-hero.dim-strong .hero__scrim { background: linear-gradient(90deg, rgba(10,22,51,.95), rgba(10,22,51,.78) 55%, rgba(10,22,51,.58)); }
/* Page heroes (blog, team…) reuse the homepage hero layers: photo, scrim, grid. */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--navy); }
.page-hero > :not(.hero__bg):not(.hero__scrim):not(.hero__grid) { position: relative; z-index: 2; }
.page-hero .hero__bg img, .page-hero .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .page-hero .hero__video { display: none; } }
.hero__grid-content { position: relative; z-index: 2; display: flex; gap: 56px; align-items: center; }
.hero__inner { flex: 1 1 0; display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.hero__eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.12em; color: #FF8A57; margin: 0; }
.section.hero h1 { font-family: Archivo, sans-serif; font-weight: 800; font-size: 60px; line-height: 1.03; letter-spacing: -0.015em; color: #fff; margin: 0; text-shadow: 0 2px 24px rgba(10,22,51,.45); }
.hero__intro { margin: 0; font-size: 18px; line-height: 1.6; color: #C3CCE2; max-width: 560px; }
.hero__equation {
  margin: 0; align-self: flex-start; font-family: "IBM Plex Mono", monospace; font-size: 15px;
  color: #fff; border: 1px solid #2E3F6E; background: rgba(13,27,64,.85); padding: 14px 18px; border-radius: 4px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.btn { display: inline-block; background: var(--blue); color: #fff; font-weight: 600; font-size: 16px; padding: 16px 26px; border-radius: 4px; }
.btn:hover { background: #fff; color: var(--navy); }
.btn--ghost { background: rgba(10,22,51,.55); border: 1px solid #3A4B7A; font-weight: 500; }
.hero__titleblock {
  position: relative; z-index: 2;
  display: flex; margin: 48px calc(-1 * var(--pad)) 0; border-top: 1px solid #22346A;
  background: rgba(10,22,51,.55); backdrop-filter: blur(2px);
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.06em; color: #8C9AC0;
}
.hero__titleblock span { padding: 12px 20px; border-right: 1px solid #22346A; }
.hero__titleblock span:first-child { padding-left: var(--pad); }
.hero__titleblock span:last-child { border-right: 0; color: #3DD17A; }

/* hero figure */
.hero__inner { flex: 1 1 0; }
.hero-fig { margin: 0; width: 560px; flex-shrink: 0; background: #0F1D42; border: 1px solid #2A3D75; border-radius: 6px; overflow: hidden; }
.hero-fig figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #2A3D75; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #A9B4CF; }
.hero-fig__body { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.hero-fig__body img { border-radius: 4px; }
.hero-fig__scale { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #A9B4CF; }
.hero-fig__bar { width: 14px; height: 200px; border-radius: 2px; background: linear-gradient(#E5262B, #FF6A2B, #FFC53D, #D8E23B, #7ED957, #2CC9A0, #17A7D6, #1E6FE5, #1F3BD1); }

/* media band — image or video, right under the header */
.section.media-band { position: relative; padding: 0; overflow: hidden; background: var(--navy); }
.media-band__media, .media-band__media img, .media-band__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-band--band .media-band__media { height: 420px; }
.media-band--tall .media-band__media { height: 620px; }
.media-band--full .media-band__media { height: calc(100vh - 104px); min-height: 480px; }
.media-band__video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.media-band__video.is-playing { opacity: 1; }
.media-band__poster { position: absolute; inset: 0; }
.media-band.is-dim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,22,51,.78) 0%, rgba(10,22,51,.45) 55%, rgba(10,22,51,.15) 100%);
}
.media-band__overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: 0 var(--pad); color: #fff; max-width: 900px;
}
.media-band__overlay h2 { font-family: Archivo, sans-serif; font-weight: 800; font-size: 46px; line-height: 1.06; color: #fff; margin: 0; }
.media-band__overlay p { margin: 0; font-size: 18px; line-height: 1.6; color: #C3CCE2; max-width: 560px; }
.media-band__caption {
  position: absolute; left: var(--pad); bottom: 18px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: #C3CCE2;
}

/* telemetry band -------------------------------------------------------- */
.section.telemetry {
  background: #0D1A3A; border-top: 1px solid #22346A; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  font-family: "IBM Plex Mono", monospace; min-height: 120px;
}
.telemetry__cell { display: flex; flex-direction: column; justify-content: center; gap: 8px; border-right: 1px solid #22346A; padding: 18px 28px 18px 0; }
.telemetry__cell:first-child { padding-left: 0; }
.telemetry__cell + .telemetry__cell { padding-left: 28px; }
.telemetry__cell:last-child { border-right: 0; }
.telemetry__label { font-size: 11px; letter-spacing: 0.1em; color: #7C89AD; }
.telemetry__value { font-size: 22px; color: #fff; }
/* Masaüstünde her değer tek satır: "ISO · ASCE · EN · MIL" beşte birlik sütuna sığmayıp
   "EN · MIL"i alt satıra atıyordu ve şeridin hizası bozuluyordu. Sütunlar yine eşit
   paylaşıyor ama hiçbiri içeriğinden dar olamıyor — uzun değer kendine yer açıyor,
   kısa olanlar biraz daralıyor. Kaç değer girildiği fark etmez (panelden değişebilir).
   1240px altında eski 3'lü / 2'li ızgara geçerli, orada satır kırılabilir. */
@media (min-width: 1241px) {
  .section.telemetry { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); }
  .telemetry__value { white-space: nowrap; }
}

/* capability spec sheets ------------------------------------------------ */
.section.capabilities { background: var(--paper-alt); }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.spec-card { background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; display: flex; flex-direction: column; }
.spec-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid #E3E8F2;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #4A5570;
}
.spec-card__spec, .spec-card__spec a { color: var(--blue); }
.spec-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.spec-card__body h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 22px; margin: 0; color: var(--navy); letter-spacing: 0; }
.spec-card__eq {
  margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--navy);
  background: var(--paper-alt); border: 1px solid #E3E8F2; padding: 12px 14px; border-radius: 4px;
}
.spec-card__rows { display: grid; grid-template-columns: 92px 1fr; gap: 10px 8px; margin: 0; font-size: 13px; line-height: 1.5; }
.spec-card__rows dt { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: #6A7490; padding-top: 2px; }
.spec-card__rows dd { margin: 0; color: #0E1526; }
.spec-card__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.spec-card__anim { width: 132px; height: 78px; flex-shrink: 0; border: 1px solid #E3E8F2; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.spec-card__anim svg { display: block; overflow: visible; }

/* animated logo mark (bmx-anim.js) ---------------------------------------- */
.brand__mark { display: block; overflow: visible; }

/* verification & validation --------------------------------------------- */
.bpl {
  background-color: var(--paper-alt);
  background-image:
    linear-gradient(rgba(10,22,51,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,51,.06) 1px, transparent 1px),
    linear-gradient(rgba(10,22,51,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,51,.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.section.verification { display: flex; gap: 64px; align-items: flex-start; }
.verification__text { width: 500px; flex-shrink: 0; display: flex; flex-direction: column; gap: 22px; }
.verification__text h2 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 42px; line-height: 1.1; margin: 0; }
.verification__intro { margin: 0; font-size: 16px; line-height: 1.6; color: #4A5570; }
.checks { display: flex; flex-direction: column; border-top: 1px solid #C9D1E3; }
.checks__row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #C9D1E3; }
.checks__n { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: #FF6A2B; font-weight: 600; }
.checks__title { display: block; font-family: Archivo, sans-serif; font-weight: 700; font-size: 17px; color: var(--navy); }
.checks__body { display: block; font-size: 14px; line-height: 1.5; color: #4A5570; margin-top: 4px; }
.verification__figures { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.fig { margin: 0; background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.fig figcaption { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #4A5570; }
.fig img { display: block; width: 100%; height: auto; }
.fig__placeholder { height: 220px; display: flex; align-items: center; justify-content: center; border: 1px dashed #C9D1E3; color: #6A7490; font-family: "IBM Plex Mono", monospace; font-size: 13px; }

/* process ---------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.steps li { border-top: 1px solid var(--navy); padding-top: 18px; }
.steps__n { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.1em; color: var(--blue); }
.steps h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; margin: 10px 0 8px; letter-spacing: 0; }
.steps p { margin: 0; font-size: 15px; line-height: 1.55; color: #4A5570; }

/* cases as technical reports --------------------------------------------- */
.cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case { background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; }
.case__head { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #E3E8F2; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #4A5570; }
.case__body { padding: 20px; }
.case__body h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 16px; letter-spacing: 0; }
.case__body dl { display: grid; grid-template-columns: 84px 1fr; gap: 10px 8px; margin: 0; font-size: 13px; }
.case__body dt { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: #6A7490; }
.case__body dd { margin: 0; color: #0E1526; }
.case__result { color: var(--blue); font-weight: 600; }

/* team */
/* Columns from the template (layout_tags.even_cols) so the rows are full: five people → one row of five. */
.team__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; }
.team__grid.is-dense { gap: 16px; }
.team__grid.is-dense .member__body { padding: 16px 14px 18px; gap: 7px; }
.team__grid.is-dense .member__name { font-size: 17px; }
.team__grid.is-dense .member__role { font-size: 13px; }
.team__grid.is-dense .member__blurb { font-size: 12.5px; }
@media (min-width: 701px) and (max-width: 1240px) { .team__grid.is-dense { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)) !important; } }
@media (min-width: 701px) and (max-width: 1000px) {
  .team__grid.is-dense { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .team__grid.is-dense > .member { scroll-snap-align: start; }
}
.member { background: #fff; border: 1px solid #D5DCEA; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.member__photo { aspect-ratio: 4 / 5; background-color: #DCE2EE; background-image: repeating-linear-gradient(135deg, rgba(14,21,38,.06) 0 10px, transparent 10px 20px); display: flex; align-items: flex-end; }
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member__ph { padding: 10px 14px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #4A5570; }
.member__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.member__name { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; color: var(--navy); }
.member__role { font-size: 14px; font-weight: 500; color: var(--blue); }
.member__blurb { font-size: 13px; line-height: 1.5; color: #4A5570; }
.member__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--navy); background: #EEF2FF; padding: 4px 8px; border-radius: 3px; }
.member__link { font-size: 13px; font-weight: 600; padding-top: 6px; color: var(--blue); }
.hiring { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--navy); border-radius: 8px; padding: 20px 28px; color: #fff; }
.hiring__text { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 16px; }
.hiring__label { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; color: #FF8A57; }
.hiring__cta { font-weight: 600; font-size: 14px; color: #fff; border: 1px solid #3A4B7A; padding: 12px 18px; border-radius: 4px; white-space: nowrap; }
.hiring__cta:hover { background: #fff; color: var(--navy); }

/* industries -------------------------------------------------------------- */
.industries__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #D5DCEA; border-left: 1px solid #D5DCEA; }
.industry { border-right: 1px solid #D5DCEA; border-bottom: 1px solid #D5DCEA; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; color: #0E1526; }
.industry:hover { background: var(--paper-alt); }
.industry svg { flex-shrink: 0; margin-top: 2px; }
.industry__text { display: flex; flex-direction: column; gap: 6px; }
.industry__name { font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); }
.industry__loads { font-size: 13px; color: #4A5570; line-height: 1.5; }

/* standards --------------------------------------------------------------- */
.section.standards table { width: 100%; border-collapse: collapse; }
.section.standards th, .section.standards td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.section.standards th { font-family: "IBM Plex Mono", monospace; font-size: 14px; width: 180px; color: var(--navy); }
.section.standards td { color: #4A5570; font-size: 15px; }
.standards__domain { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; color: #6A7490; text-align: right; }
.standards__note { margin: -20px 0 24px; font-size: 14px; color: #6A7490; }

/* why us columns ---------------------------------------------------------- */
.columns__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.column h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 10px; letter-spacing: 0; }
.column p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5570; }
.column__n { display: block; margin-bottom: 14px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--blue); }

/* navy blueprint variant (default) */
.bp {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(130,160,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,160,255,.10) 1px, transparent 1px),
    linear-gradient(rgba(130,160,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,160,255,.04) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.columns--navy .sec-eyebrow { color: #FF8A57; }
.columns--navy .sec-head h2 { color: #fff; }
.columns--navy .columns__grid { gap: 20px; }
.columns--navy .column {
  position: relative; padding: 26px 24px 28px; border: 1px solid #2A3D75; border-radius: 6px;
  background: rgba(13,26,58,.72); backdrop-filter: blur(2px);
}
.columns--navy .column::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: #FF6A2B; border-radius: 6px 6px 0 0; transform: scaleX(.18); transform-origin: left; transition: transform .4s ease; }
.columns--navy .column:hover::before { transform: scaleX(1); }
.columns--navy .column__n { color: #FF8A57; }
.columns--navy .column h3 { color: #fff; }
.columns--navy .column p { color: #C3CCE2; }
.columns--grid .column { padding: 24px; background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; }

/* closing CTA — the problem statement box --------------------------------- */
.section.problem-statement {
  background-color: var(--blue); color: #fff; display: flex; align-items: center; gap: 72px;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px;
}
.ps__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.ps__eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.12em; color: #FFD2BC; margin: 0; }
.section.problem-statement h2 { font-family: Archivo, sans-serif; font-weight: 800; font-size: 48px; line-height: 1.08; color: #fff; margin: 0; }
.ps__intro { margin: 0; font-size: 17px; line-height: 1.6; color: #DCE4FF; max-width: 480px; }
.ps__promises { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 14px; color: #E3E9FF; }
.ps__form { width: 540px; flex-shrink: 0; background: #fff; border-radius: 6px; padding: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ps__field { display: flex; flex-direction: column; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: #4A5570; }
.ps__field--wide, .ps__form > button, .ps__form > .ps__error { grid-column: 1 / -1; }
.ps__field input, .ps__field select, .ps__field textarea { width: 100%; border: 1px solid #C9D1E3; border-radius: 4px; padding: 0 12px; height: 44px; font-size: 15px; font-family: "IBM Plex Sans", sans-serif; color: var(--navy); }
.ps__field textarea { height: 90px; padding: 10px 12px; resize: none; }
.ps__form button { height: 50px; border: 0; border-radius: 4px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 600; }
.ps__form button:hover { background: #0D1B40; }
.ps__error { color: #C2410C; font-family: "IBM Plex Sans", sans-serif; font-size: 12px; }

.section.blog-teaser h2 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 42px; }
.section.blog-teaser { border-top: 1px solid #E3E8F2; padding-top: 80px; }
.section.blog-teaser .blog-empty { margin: 0; color: #4A5570; }
.bt-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; }
.bt-lead { display: flex; flex-direction: column; gap: 16px; color: #0E1526; }
.bt-lead__cover, .bt-row__thumb {
  display: block; overflow: hidden; border-radius: 8px;
  background-color: #16264F;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px), linear-gradient(180deg, #22386B 0%, #0B1736 100%);
}
.bt-lead__cover { height: 300px; }
.bt-lead__cover img, .bt-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bt-lead:hover img, .bt-row:hover img { transform: scale(1.03); }
.bt-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #6A7490; }
.bt-flag { color: #fff; background: var(--blue); padding: 3px 8px; border-radius: 3px; }
.bt-lead__title { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); }
.bt-lead__ex { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5570; }
.bt-more { font-weight: 600; font-size: 14px; color: var(--blue); }
.bt-lead:hover .bt-lead__title, .bt-row:hover .bt-row__title { color: var(--blue); }
.bt-list { display: flex; flex-direction: column; border-top: 1px solid #E3E8F2; }
.bt-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid #E3E8F2; color: #0E1526; }
.bt-row__thumb { height: 96px; border-radius: 6px; }
.bt-row__text { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bt-row__title { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--navy); }
@media (max-width: 1100px) { .bt-grid { grid-template-columns: 1fr; } .bt-lead__cover { height: 220px; } }
@media (max-width: 640px) { .bt-row { grid-template-columns: 96px 1fr; gap: 14px; } .bt-row__thumb { height: 72px; } .bt-row__title { font-size: 16px; } }

/* ---------------------------------------------------------------- listings */
.service-list, .posts { list-style: none; margin: 0; padding: 0; }
.service-list li, .posts li { border-top: 1px solid var(--line); padding: 28px 0; }
.service-list h2, .posts h2 { font-size: 28px; margin-bottom: 8px; }
.service-list p, .posts p { color: var(--ink); margin: 0; }
.spec { display: grid; grid-template-columns: 200px 1fr; gap: 12px 24px; margin: 32px 0; }
.spec dt { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; }
.team > article { border-top: 1px solid var(--line); padding: 28px 0; }
.team > article > img { display: block; width: 240px; max-width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.openings article { border-top: 1px solid var(--line); padding: 24px 0; }

/* -------------------------------------------------------------- forms */
form p { margin-bottom: 18px; }
label { display: block; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; max-width: 520px; padding: 13px 14px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--navy);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
button, .button { font: inherit; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; border: 0; border-radius: 3px; padding: 15px 26px; background: var(--blue); color: #fff; }
button:hover { background: var(--navy); }

/* ------------------------------------------------------- cookie banner */
.cookie-banner {
  /* A compact card in the corner: the text sets its size, not the window. */
  position: fixed; left: 20px; bottom: 20px; z-index: 50; width: min(400px, calc(100vw - 40px));
  background: var(--navy); color: #C3CCE2; padding: 18px 20px 16px; border-radius: 6px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 40px -20px rgba(10,22,51,.6);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 13px; line-height: 1.55; }
.cookie-banner .cookie-banner__k { font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; color: #6E93FF; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-banner__actions button { flex: 1; }
.cookie-banner button { padding: 10px 16px; font-size: 13px; }
.button--ghost, .cookie-banner .button--ghost { background: transparent; border: 1px solid #3A4B7A; color: #fff; }
.button--ghost:hover { background: #fff; color: var(--navy); }
.cookie-banner a { color: #fff; text-decoration: underline; }

@media (max-width: 1240px) {
  /* .hero__grid dekoratif ızgara katmanı (aria-hidden, boş div); içerik
     .hero__grid-content içinde. Bu kural yıllarca yanlış elemana yazılıydı,
     o yüzden hero mobilde hiç tek sütuna düşmedi ve figür ekranın sağına
     taşıp sayfayı yatay kaydırılabilir yaptı. */
  .hero__grid-content { flex-direction: column; align-items: stretch; gap: 32px; }
  .hero-fig { width: 100%; }
  .spec-grid, .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__grid, .industries__grid, .columns__grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section.verification { flex-direction: column; }
  .verification__text { width: auto; }
  .section.problem-statement { flex-direction: column; align-items: stretch; }
  .ps__form { width: auto; }
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section.telemetry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  :root { --gutter: 48px; }
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  /* `.hero h1` (0,1,1) kuralı, 208. satırdaki `.section.hero h1` (0,2,1)
     kuralına yeniliyordu; yani kahraman başlık 1100px'in altında hiç
     küçülmedi, 390px'te 60px olarak 5 satıra yayıldı. Aynı özgüllük. */
  .section.hero h1 { font-size: 40px; }
  .site-nav { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .cases article { grid-template-columns: 1fr; gap: 12px; }
}

/* Telefon. 1240px kuralları ızgaraları ikiye düşürüyordu ama hiçbir yerde
   bire inmiyordu, yani 390px'te bir spec kartının içine 20px'lik iki yan
   boşluktan sonra 125px kalıyordu — kartın içindeki 132px'lik animasyon
   kutusu tek başına bundan geniş. Sonuç: ana sayfa yatay kaydırılıyordu.
   Aynı şekilde .sec-head satır yönünde 64px boşlukla duruyor ve sağdaki
   bağlantı `white-space: nowrap` olduğu için kırılamıyordu.
   Bu blok 640'tan sonra geliyor: eşit özgüllükte sonraki kural kazanır. */
@media (max-width: 760px) {
  /* Başlık ile sağdaki bağlantı/not artık alt alta. */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec-head__right { align-items: flex-start; }
  .sec-head__link { white-space: normal; }
  .sec-head__note { max-width: none; }

  /* Tek sütun: kart genişliği ~350px'e çıkıyor, içindekiler sığıyor.
     `1fr` değil `minmax(0, 1fr)`: düz `1fr` bir ızgara rayına örtük olarak
     `min-width: auto` verir, yani ray kartın min-content genişliğinin altına
     inemez. 320px'te kart 326px kalıp sayfayı yine kaydırıyordu. */
  .spec-grid, .cases__grid { grid-template-columns: minmax(0, 1fr); }
  .team__grid, .industries__grid, .columns__grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .spec-card { min-width: 0; }
  /* Animasyon kutusu başlığın altına. `flex-wrap` ile denedim ama kısa
     başlıklı kartta ("CFD Analysis") kutu yanda kalıp uzun başlıklılarda
     alta düşüyordu: altı kartın beşi bir türlü, biri başka türlü. Sütuna
     çevirince altısı da aynı. */
  .spec-card__title { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section.telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Ağ: kart ne kadar daralırsa daralsın içeriği dışına çıkmasın. Uzun bir
     değer ya da ileride eklenecek daha geniş bir animasyon kutusu sayfayı
     yeniden kaydırılabilir yapmasın. */
  .spec-card__anim { max-width: 100%; }
  .spec-card__rows { grid-template-columns: 84px 1fr; }
  .spec-card__rows dd { overflow-wrap: anywhere; }

  /* Başlık boyları. Yukarıdaki `h2 { font-size: 32px }` kuralının özgüllüğü
     (0,0,1); `.sec-head h2` (0,1,1) ve `.section.problem-statement h2`
     (0,2,1) onu yeniyor. Sonuç: telefonda ana sayfada tek cümlelik bir
     başlık 42–48px'te beş satıra yayılıyordu. Aynı özgüllükle yazıyoruz.
     Bunun tekrar kaçmaması için apps/core/tests_mobile.py var. */
  .section.hero h1 { font-size: 32px; }
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  .sec-head h2 { font-size: 26px; }
  .section.problem-statement h2, .section.blog-teaser h2 { font-size: 26px; }
  .verification__text h2 { font-size: 26px; }
  .media-band__overlay h2 { font-size: 28px; }
}

/* flash messages */
.flash { padding: 14px var(--pad) 0; display: flex; flex-direction: column; gap: 8px; }
.flash--in { padding: 0 0 8px; }
.flash__m { margin: 0; padding: 12px 16px; border-radius: 4px; background: #EEF2FF; color: var(--navy); font-size: 14px; border-left: 3px solid var(--blue); }
.flash__m--success { background: #EEF8F1; border-left-color: #2E7D45; }
.flash__m--error { background: #FDEEEE; border-left-color: #B42318; }
.flash__m--warning { background: #FFF4D6; border-left-color: #8A6100; }
/* Site-wide messages ("You have signed out.") float over the page under the pinned header instead of pushing the
   hero down, and leave by themselves (nav.js): 5 s, errors 10 s, or on ×. */
.flash--toast { position: fixed; top: calc(var(--hdr, 104px) + 14px); right: 24px; z-index: 96; width: min(420px, calc(100% - 32px)); padding: 0; pointer-events: none; }
.flash--toast .flash__m { position: relative; padding: 14px 44px 14px 16px; background-color: #fff; box-shadow: 0 18px 40px -18px rgba(10, 22, 51, .45), 0 1px 2px rgba(10, 22, 51, .12); pointer-events: auto;
                          transition: opacity .3s ease, transform .3s ease; }
.flash--toast .flash__m--success { background-color: #F3FAF5; }
.flash--toast .flash__m--error { background-color: #FEF5F5; }
.flash--toast .flash__m.is-leaving { opacity: 0; transform: translateY(-8px); }
.flash__x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #6A7490; font-size: 18px; line-height: 28px; cursor: pointer; }
.flash__x:hover { background: rgba(10, 22, 51, .06); color: var(--navy); }
@media (max-width: 640px) { .flash--toast { right: 16px; } }



/* --- Product brand in the header (Tessera) ---------------------------------
   Shown only on a page whose "Wear the product brand in the header" box is on.
   The wordmark carries the mark as its final letter, so there is no second
   logo beside it; "BY BADGERMECX" keeps the parent brand visible and links home. */
/* The product brand reuses .brand untouched — same gap, same type, same colour — so the only
   thing that changes when you cross onto the product page is the mark and the name. Its SVG
   carries extra viewBox padding (mark-brand.svg) so the drawing fills the 28px box to the same
   ratio as the BadgerMecX mark: both read 22.9 x 20.5, and the name starts at the same x. */
.brand__mark--product { display: block; height: 28px; width: auto; }

/* The product logo links to the BadgerMecX home page and, on hover, becomes the BadgerMecX logo.
   Resting state = mark-brand.svg, stroke for stroke. Hover state = the BadgerMecX mark at the same
   size: outer triangle M5 56 L32 8 L59 56 Z and inner chevron M18.5 56 L32 32 L45.5 56, stroke 4.8
   (the 24-unit logo's 1.6, times three). The chevron gets there by flipping about y = 44. */
.brand__chev, .brand__leg, .brand__cap, .brand__base { fill: none; stroke-linejoin: round; stroke-linecap: round;
  transition: stroke .48s ease, stroke-width .48s ease, stroke-dashoffset .48s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, transform .48s cubic-bezier(.3, .9, .3, 1.15); }
.brand__chev, .brand__leg { stroke: #0A1633; stroke-width: 6; }
.brand__cap { stroke: #C2410C; stroke-width: 6; stroke-linecap: butt; }
.brand__base { stroke: #000; stroke-width: 4.8; stroke-dasharray: 54; stroke-dashoffset: 54; opacity: 0; }
.brand__chev { transform-box: view-box; transform-origin: 32px 44px; }
.brand__names { display: grid; align-items: center; height: 1.3em; overflow: hidden; }
/* site.css turns every hovered link blue; here the hover state IS the black BadgerMecX logo */
.brand--product, .brand--product:hover, .brand--product:focus-visible { color: #000; }
.brand__name { grid-area: 1 / 1; white-space: nowrap; transition: transform .48s cubic-bezier(.2, .8, .2, 1), opacity .34s ease; }
.brand__name--home { opacity: 0; transform: translateY(105%); }
/* Only where there is a pointer to hover with. A phone has none: there the logo stays the product's,
   and a tap goes home. Keyboard focus gets the same change, so the destination is announced to the eye too. */
@media (hover: hover) and (pointer: fine) {
  .brand--product:hover .brand__chev, .brand--product:hover .brand__leg, .brand--product:hover .brand__cap { stroke: #000; stroke-width: 4.8; }
  .brand--product:hover .brand__chev { transform: scaleY(-1); }
  .brand--product:hover .brand__base { stroke-dashoffset: 0; opacity: 1; }
  .brand--product:hover .brand__name { opacity: 0; transform: translateY(-105%); }
  .brand--product:hover .brand__name--home { opacity: 1; transform: translateY(0); }
}
.brand--product:focus-visible .brand__chev, .brand--product:focus-visible .brand__leg, .brand--product:focus-visible .brand__cap { stroke: #000; stroke-width: 4.8; }
.brand--product:focus-visible .brand__chev { transform: scaleY(-1); }
.brand--product:focus-visible .brand__base { stroke-dashoffset: 0; opacity: 1; }
.brand--product:focus-visible .brand__name { opacity: 0; transform: translateY(-105%); }
.brand--product:focus-visible .brand__name--home { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .brand__chev, .brand__leg, .brand__cap, .brand__base, .brand__name { transition: none; } }

/* The product name with its last letter set as the mark (menu label, and anywhere the
   name is written out). Height in em so it tracks the text; baseline alignment puts the
   mark's feet on the text baseline, because the viewBox is cropped to its visual bounds. */
.tsr-a { display: inline-block; height: 0.698em; width: auto; vertical-align: baseline; }

/* Visually hidden, still read aloud — used to restore a letter replaced by a glyph. */
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ---------------------------------------------------------------- Materials brand
   The header of the Materials section (core/partials/header.html, page.materials_brand): the mark grows a crystal
   lattice and the name takes "Materials" as a subscript. */
/* Same footprint as the plain BadgerMecX brand: 28 px mark, the name at the brand's own size, and "Materials"
   positioned absolutely so it takes no width. The menu is centred between the logo and GET QUOTE, so a wider logo
   pushed every menu item ~40 px right when crossing onto /materials/. Now Company, Services… sit exactly where
   they sit on the home page; the subscript hangs into the gap towards the menu. Measured in
   apps/software/tests_brand_browser.py. */
.brand--materials .mat-mark { width: 28px; height: 28px; overflow: visible; }
.mat-mark__out, .mat-mark__in { stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.mat-mark__out { stroke: #000; }
.mat-mark__in { stroke: var(--blue); stroke-dasharray: 18.4; animation: matDraw 6s ease-in-out infinite; }
.mat-mark__atoms circle { fill: var(--orange); transform-box: fill-box; transform-origin: center; animation: matPop 6s ease-in-out infinite; }
.mat-mark__atoms g { animation: matJit .45s linear infinite; }
.mat-mark__atoms g:nth-child(2) circle { animation-delay: .15s; } .mat-mark__atoms g:nth-child(2) { animation-delay: -.1s; }
.mat-mark__atoms g:nth-child(3) circle { animation-delay: .3s; }  .mat-mark__atoms g:nth-child(3) { animation-delay: -.2s; }
.mat-mark__atoms g:nth-child(4) circle { animation-delay: .45s; } .mat-mark__atoms g:nth-child(4) { animation-delay: -.3s; }
.mat-mark__atoms g:nth-child(5) circle { animation-delay: .6s; }  .mat-mark__atoms g:nth-child(5) { animation-delay: -.15s; }
.mat-mark__atoms g:nth-child(6) circle { animation-delay: .75s; } .mat-mark__atoms g:nth-child(6) { animation-delay: -.25s; }
.brand__word { position: relative; }
/* Hangs right under the name, flush right, in every language (the menu labels need the room beside it). */
.brand__sub { position: absolute; right: 0; top: calc(100% + 1px); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .02em; color: var(--blue); white-space: nowrap; pointer-events: none; }
/* Below 1240 px the gap to the menu (and on phones to GET QUOTE) is too small for it: it hangs under the name instead. */

@keyframes matDraw { 0% { stroke-dashoffset: 18.4; } 22%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -18.4; } }
@keyframes matPop { 0%, 8% { transform: scale(0); } 16%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
@keyframes matJit { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.35px, -.25px); } 50% { transform: translate(-.3px, .2px); } 75% { transform: translate(.2px, .35px); } }
/* Hover / focus: back to the BadgerMecX logo — the link goes home (header.html). The subscript only fades. */
.mat-mark__in, .mat-mark__atoms, .brand__sub { transition: opacity .25s ease, stroke .25s ease; }
.brand--materials:hover .mat-mark__in, .brand--materials:focus-visible .mat-mark__in { animation: none; stroke-dashoffset: 0; stroke: #000; }
.brand--materials:hover .mat-mark__atoms, .brand--materials:focus-visible .mat-mark__atoms { opacity: 0; }
.brand--materials:hover .brand__sub, .brand--materials:focus-visible .brand__sub { opacity: 0; }
.brand--materials:hover, .brand--materials:focus-visible { color: #000; }
@media (prefers-reduced-motion: reduce) {
  .mat-mark__in, .mat-mark__atoms circle, .mat-mark__atoms g { animation: none; }
  .mat-mark__in { stroke-dashoffset: 0; }
}

/* Bot checks on the forms (apps/core/antibot.py) */
.ab-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ab-widget { display: block; margin: 4px 0 2px; --altcha-max-width: 100%; --altcha-border-radius: 4px; }
.ab-failed { padding: 72px var(--pad); }
.ab-failed__card { max-width: 640px; margin: 0 auto; padding: 36px; background: #fff; border: 1px solid #DCE2EC; border-radius: 8px; }
.ab-failed__card h1 { margin: 6px 0 14px; font-family: Archivo, sans-serif; font-size: 30px; line-height: 1.15; color: var(--navy); }
.ab-failed__card p { font-size: 16px; line-height: 1.6; color: #3A4460; }
.ab-failed__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 4px; background: var(--blue); color: #fff !important; font-weight: 600; text-decoration: none; }
.ab-failed__small { font-size: 14px !important; color: #6A7490 !important; }

/* Plan tags (ProTag.dc.html, ProPlus.dc.html): Pro holographic foil, Pro+ rainbow. Motion stops on reduced motion. */
.ptag { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 16px; padding: 0 6px; margin-left: 4px; border-radius: 3px; font: 700 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; vertical-align: middle; white-space: nowrap; }
.ptag--big { height: 22px; padding: 0 9px; margin-left: 8px; border-radius: 4px; font-size: 12px; }
.ptag--pro { overflow: hidden; color: #0A1633; background: linear-gradient(115deg, #FFD6E8, #C9F2FF 25%, #E8D6FF 45%, #FFF4C2 65%, #C8FFE0 85%, #FFD6E8) 0 0 / 250% 100%; animation: ptag-slide 6s linear infinite; }
.ptag--pro::after { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 10px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); transform: skewX(-20deg); animation: ptag-shine 3.2s ease-in-out infinite; }
.ptag--light.ptag--pro { box-shadow: inset 0 0 0 1px rgba(10,22,51,.08); }
.ptag--plus { --rb: linear-gradient(90deg, #FF3B3B, #FF9F1C, #FFE14D, #3DDC84, #2EC5FF, #7B61FF, #FF3BC4, #FF3B3B); color: transparent; background: var(--rb) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: ptag-slide 4s linear infinite; }
.ptag--light.ptag--plus { --rb: linear-gradient(90deg, #E01E1E, #F07B00, #C9A100, #14A35A, #0A8FD6, #5B3FE0, #D11F9C, #E01E1E); }
.ptag--plus::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: var(--rb) 0 0 / 200% 100%; animation: ptag-slide 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes ptag-slide { to { background-position: 200% 0; } }
@keyframes ptag-shine { 0%, 60% { left: -14px; } 100% { left: calc(100% + 14px); } }
@media (prefers-reduced-motion: reduce) { .ptag, .ptag::before, .ptag::after { animation: none !important; } }

/* showcase: our own tools (templates/core/blocks/showcase.html, canvas HomeShowcase option A) ---------------- */
.showcase .sec-eyebrow { color: #FF8A57; }
.showcase .sec-head h2 { color: #fff; }
.showcase .sec-head__note { color: #B9C3DA; }
.showcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.showcase__card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 8px; }
.showcase__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #E9ECF2; }
.showcase__media img, .showcase__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase__media video { z-index: 1; opacity: 0; transition: opacity .5s ease; }
.showcase__media video.is-playing { opacity: 1; }
.showcase__play { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--navy);
  font: 600 13px "IBM Plex Sans", sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(10,22,51,.25); }
.showcase__play svg { fill: var(--navy); }
.showcase__play:hover { background: #fff; }
.showcase__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.showcase__kicker { font: 500 11.5px "IBM Plex Mono", monospace; letter-spacing: .12em; color: #C2410C; }
.showcase__body h3 { margin: 0; font: 700 21px/1.25 Archivo, sans-serif; color: var(--navy); }
.showcase__body p { margin: 0; font-size: 14px; line-height: 1.55; color: #4A5570; }
.showcase__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.showcase__chips i { padding: 4px 8px; border-radius: 4px; background: #EEF2FF; color: #2A3A7A; font: 500 11.5px "IBM Plex Mono", monospace; font-style: normal; }
.showcase__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; padding-top: 12px; }
.showcase__go { font: 600 14px "IBM Plex Sans", sans-serif; color: var(--blue); text-decoration: none; }
.showcase__go:hover { text-decoration: underline; }
.showcase__li { font: 500 13px "IBM Plex Sans", sans-serif; color: #6A7490; }
.showcase__viewer { width: min(1200px, 94vw); padding: 0; border: 0; border-radius: 8px; background: #000; color: #fff; }
.showcase__viewer::backdrop { background: rgba(7,15,36,.82); }
.showcase__frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 80vh; background: #000; }
.showcase__cap { margin: 0; padding: 10px 16px; font: 500 13px "IBM Plex Sans", sans-serif; color: #B9C3DA; background: var(--navy-deep); }
.showcase__close { position: absolute; z-index: 1; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  padding: 0; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 900px) { .showcase__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- scripts without capitals or spaces
   Japanese (15 Oct 2026): no capitals and no spaces between words. The wide letter-spacing that makes the
   English eyebrows and labels read as "engineering" spreads Japanese glyphs apart, so it is switched off
   everywhere except the wordmark; lines break between characters with the strict Japanese rules.
   The text itself falls back to the visitor's Japanese system font (fonts.css explains why). */
html[lang="ja"] body { line-break: strict; word-break: normal; overflow-wrap: break-word; }
html[lang="ja"] body *:not(.brand):not(.brand *):not(.site-footer__logo) { letter-spacing: normal !important; }
html[lang="ja"] body { font-family: "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; }

/* Arabic reads right to left (base.html sets dir="rtl"). Flex and grid rows, text alignment and logical
   margins follow the direction by themselves; the rules below turn the few physical left/right ones.
   Letter-spacing breaks the joining of Arabic letters, so it is off for Arabic text. Numbers, units,
   codes and formulas are embedded left to right as they are. */
html[dir="rtl"] body *:not(.brand):not(.brand *):not(.site-footer__logo) { letter-spacing: normal !important; }
html[dir="rtl"] body { font-family: "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif; }
html[dir="rtl"] .lang__menu { right: auto; left: 0; }
html[dir="rtl"] .cookie-banner { left: auto; right: 20px; }
html[dir="rtl"] .scroll-progress { left: auto; right: 0; }
html[dir="rtl"] code, html[dir="rtl"] .equation, html[dir="rtl"] pre, html[dir="rtl"] svg text { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

/* Long-word languages (German, French, Russian, Spanish, Turkish): the desktop menu and GET QUOTE were
   wrapping onto two lines and the brand touched the first item. Tighter tracking and gaps in the
   desktop band, labels kept on one line; long compound words in card titles hyphenate. */
.nav-item__btn, .btn-quote { white-space: nowrap; }
.site-nav { margin-inline: 20px; }
@media (min-width: 1101px) and (max-width: 1600px) {
  html:is([lang="de"], [lang="fr"], [lang="ru"], [lang="es"], [lang="tr"]) .site-nav { gap: 18px; letter-spacing: .03em; font-size: 12px; }
  html:is([lang="de"], [lang="fr"], [lang="ru"], [lang="es"], [lang="tr"]) .btn-quote { letter-spacing: .04em; padding: 12px 14px; font-size: 12px; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  html:is([lang="de"], [lang="fr"], [lang="ru"], [lang="es"], [lang="tr"]) .site-nav { gap: 12px; font-size: 11.5px; letter-spacing: .02em; }
}
html:is([lang="de"], [lang="fr"], [lang="ru"], [lang="es"], [lang="tr"]) body { hyphens: auto; overflow-wrap: break-word; }
html:is([lang="de"], [lang="fr"], [lang="ru"], [lang="es"], [lang="tr"]) :is(.mx-dc, .mx-dc__t) { min-width: 0; }