/* ISAR GROUP - shared site styles */
:root {
  --black: #0e0e0d;
  --graphite: #2b2a29;
  --coal: #181817;
  --red: #e4010c;
  --bone: #f2f1ed;
  --white: #ffffff;
  --dim: rgba(255,255,255,.56);
  --hair: rgba(255,255,255,.12);
  --hair-dark: rgba(14,14,13,.12);
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(16px, 4vw, 56px);
  /* One rhythm for every section: vertical padding, title size, title-to-content gap */
  --sec-y: clamp(72px, 8vw, 128px);
  --title: clamp(32px, 3.8vw, 60px);
  --head-gap: clamp(40px, 4.5vw, 64px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--black); color: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1600px; margin: 0 auto; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tri { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--red); }

/* ---------- Preloader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--black); display: grid; place-items: center; animation: loaderOut .9s var(--ease) 1.9s forwards; }
.loader svg { width: 120px; height: auto; }
.loader .em-path { fill: transparent; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease) .1s forwards, fillIn .4s ease 1.2s forwards; }
.loader .em-tri { transform: translateY(40%); opacity: 0; animation: triUp .6s var(--ease) 1.1s forwards; }
.em-tri { transform-box: fill-box; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { fill: #fff; stroke-width: 0; } }
@keyframes triUp { to { transform: none; opacity: 1; } }
@keyframes loaderOut { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- Header: minimal bar + full-screen menu ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 120; transition: transform .6s var(--ease); }
.hdr::before { content: ""; position: absolute; inset: 0; background: rgba(14,14,13,.74); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--hair); opacity: 0; transition: opacity .4s; }
.hdr.solid::before { opacity: 1; }
.hdr.hide { transform: translateY(-100%); }
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; transition: height .5s var(--ease); }
.hdr.solid .bar { height: 76px; }
.brand { display: flex; align-items: center; }
.brand .clip { display: block; }
.brand svg { display: block; width: 173px; height: 40px; color: #fff; transition: width .5s var(--ease), height .5s var(--ease); }
.hdr.solid .brand svg { width: 151px; height: 35px; }
.hdr-right { display: flex; align-items: center; gap: 12px; }
.hdr-cta { transition: opacity .4s, color .5s var(--ease); }
body.menu-open .hdr-cta { opacity: 0; pointer-events: none; }

/* Section links in the bar, styled like the language switch: an outlined capsule with a red pill
   (.hnav-pill, added by main.js) that rests on the current page and slides to the hovered item */
.hnav { position: relative; flex: none; margin: 0 auto; display: flex; height: 44px; white-space: nowrap; padding: 3px; border: 1px solid var(--hair); border-radius: 100px; isolation: isolate; }
.hnav a { position: relative; display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.7); }
.hnav > a, .hnav-dd > a { z-index: 1; display: flex; align-items: center; height: 100%; padding: 0 clamp(12px, 1.25vw, 18px); border-radius: 100px; transition: color .3s; }
.hnav .t { position: relative; display: block; overflow: hidden; line-height: 1.4; }
.hnav .t span { display: block; }
.hnav .t span + span { display: none; }
.hnav a.is-current, .hnav > a:hover, .hnav-dd:hover > a { color: #fff; }
.hnav-pill { position: absolute; z-index: 0; top: 3px; left: 0; height: calc(100% - 6px); width: 0; border-radius: 100px; background: var(--red); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; }
.hnav-pill.on { opacity: 1; }
.hnav-pill.instant { transition: none; }
/* Desktop dropdown (Şirkət): full-width dark panel of icon cards under the header, on hover or keyboard focus.
   .hnav-dd stays static so the panel is placed against the centred .hnav and spans the page width */
.hnav-dd { position: static; }
.hnav-dd > a { display: flex; align-items: center; gap: 6px; }
.hnav-dd > a svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .4s var(--ease); }
.hnav-dd:hover > a svg, .hnav-dd:focus-within > a svg { transform: rotate(180deg); }
/* --dd-x (set by main.js) is the distance from the nav's left edge to the page centre, so the panel stays centred on the page */
.hdd { position: absolute; left: var(--dd-x, 50%); top: 100%; width: var(--dd-w, min(1240px, calc(100vw - 64px))); white-space: normal; translate: -50% 0; padding-top: 30px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
.hnav-dd:hover .hdd, .hnav-dd:focus-within .hdd { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .45s var(--ease), visibility 0s; }
/* Services panel: six cards in a 3 x 2 grid, a little shorter than the company cards */
.hdd-svc { grid-template-columns: repeat(3, 1fr) !important; }
.hnav .hdd .hdd-svc a { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; min-height: 0; padding: 20px 46px 20px 20px; }
.hdd-svc .hdd-ic { grid-row: 1 / 3; margin: 0; }
.hdd-svc b { grid-column: 2; margin-top: 0; font-size: 16px; }
.hdd-svc small { grid-column: 2; margin-top: 4px; }
.hdd-svc .hdd-ar { top: 50%; margin-top: -9px; }
.hdd-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; border-radius: 22px; background: rgba(20,20,19,.96); border: 1px solid var(--hair); box-shadow: 0 30px 80px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.hnav .hdd a { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 196px; padding: 22px 20px 20px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid transparent; color: #fff; opacity: 0; transform: translateY(10px); transition: background .3s, border-color .3s, opacity .35s, transform .5s var(--ease); }
.hnav-dd:hover .hdd a, .hnav-dd:focus-within .hdd a { opacity: 1; transform: none; transition-delay: 0s, 0s, calc(.06s + var(--i) * .04s), calc(.06s + var(--i) * .04s); }
/* Hover: red fills the card from the bottom, the icon circle turns white and the arrow slides in diagonally */
.hnav .hdd a { overflow: hidden; isolation: isolate; }
.hnav .hdd a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.hnav .hdd a:hover::before { transform: scaleY(1); }
.hnav .hdd a small { transition: color .4s; }
.hnav .hdd a:hover small { color: rgba(255,255,255,.85); }
.hnav .hdd a.is-current { border-color: rgba(228,1,12,.7); }
.hnav .hdd a.is-current::after { content: none; }
.hdd-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border-radius: 50%; background: rgba(255,255,255,.07); transition: background .35s, transform .5s var(--ease); }
.hdd-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.hnav .hdd a.is-current .hdd-ic { background: var(--red); }
.hnav .hdd a.is-current .hdd-ic svg { stroke: #fff; }
.hnav .hdd a:hover .hdd-ic { background: #fff; transform: scale(1.08); }
.hnav .hdd a:hover .hdd-ic svg { stroke: var(--red); }
.hdd b { margin-top: 28px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.hdd small { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.55); }
.hdd-ar { position: absolute; right: 20px; top: 34px; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translate(-10px, 10px) rotate(-45deg); transition: opacity .3s, transform .5s var(--ease); }
.hnav .hdd a:hover .hdd-ar { opacity: 1; transform: rotate(-45deg); }
.hdr .menu-btn { display: none; }
/* Menu button: three bare lines; when open they fold into a cross (the middle one fades) on a dark circle */
.menu-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; transition: background .4s, transform .3s var(--ease); }
.menu-btn:hover { transform: scale(1.06); }
.menu-btn:active { transform: scale(.94); }
.mb-txt { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mb-ic { position: relative; width: 22px; height: 14px; }
.mb-ic i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #fff; transition: transform .5s var(--ease), top .5s var(--ease), opacity .3s, background .4s; }
.mb-ic i:nth-child(1) { top: 0; }
.mb-ic i:nth-child(2) { top: 6px; }
.mb-ic i:nth-child(3) { top: 12px; }
body.menu-open .mb-ic i { top: 6px; }
body.menu-open .mb-ic i:nth-child(1) { transform: rotate(45deg); }
body.menu-open .mb-ic i:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .mb-ic i:nth-child(3) { transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* The capsule nav needs room between the logo and the right-hand group: tighten it, then hand over to the menu button */
@media (max-width: 1340px) { .hnav a { font-size: 14px; } .hnav > a, .hnav-dd > a { padding: 0 12px; } }
@media (max-width: 1200px) {
  .hdr-cta, .hnav { display: none; }
  .hdr .menu-btn { display: grid; }
}
@media (max-width: 1100px) {
  .hdr-cta, .hnav { display: none; }
  .hdr .menu-btn { display: grid; }
}
@media (max-width: 560px) {
  .bar { height: 76px; }
  .brand svg { width: 151px; height: 35px; }
  .hdr.solid .brand svg { width: 134px; height: 31px; }
  .menu-btn { width: 44px; height: 44px; }
}
/* Language switch: the red pill slides under the chosen (or hovered) language */
.lang-sw { position: relative; display: grid; grid-template-columns: repeat(3, 44px); height: 44px; border: 1px solid var(--hair); border-radius: 100px; isolation: isolate; }
.lang-sw a { position: relative; z-index: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: .06em; padding-left: .06em; color: rgba(255,255,255,.55); transition: color .3s; }
.lang-sw a:hover, .lang-sw a[aria-current] { color: #fff; }
.lang-sw .pill { position: absolute; z-index: 0; top: 3px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--red); transition: transform .5s var(--ease); }
.lang-sw[data-i="1"] .pill { transform: translateX(44px); }
.lang-sw[data-i="2"] .pill { transform: translateX(88px); }
.lang-sw:has(a:nth-child(1):hover) .pill { transform: translateX(0); }
.lang-sw:has(a:nth-child(2):hover) .pill { transform: translateX(44px); }
.lang-sw:has(a:nth-child(3):hover) .pill { transform: translateX(88px); }

.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 26px; border-radius: 100px; font-size: 15px; font-weight: 600; overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); }
.btn:hover::before { transform: none; }
.btn .ar { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red::before { background: #fff; }
.btn-red:hover { color: var(--black); }
.btn-out { border: 1px solid rgba(255,255,255,.3); }
.btn-out::before { background: #fff; }
.btn-out:hover { color: var(--black); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14px; }

/* ---------- Hero: full-bleed photo slider ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; background: var(--black); }
@keyframes fade { to { opacity: 1; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* Slides are stacked in one grid cell; only .is-active is shown */
.slides { position: relative; flex: 1; display: grid; }
.slide { grid-area: 1 / 1; position: relative; display: flex; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 1.2s; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
html:not(.js) .slide:first-child { opacity: 1; visibility: visible; }
.slide-bg { position: absolute; inset: 0; overflow: hidden; background: var(--graphite); }
.slide-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 10s cubic-bezier(.2,.6,.3,1); }
.slide.is-active .slide-bg img { transform: scale(1.02); }
.slide-bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(14,14,13,.9) 0%, rgba(14,14,13,.66) 38%, rgba(14,14,13,.18) 72%, rgba(14,14,13,.1) 100%),
    linear-gradient(180deg, rgba(14,14,13,.55) 0%, transparent 24%, transparent 62%, rgba(14,14,13,.85) 100%); }
.hero-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 140px; padding-bottom: 130px; }
.hero-copy { max-width: 1000px; }
.hero-title { font-size: clamp(34px, 4.8vw, 84px); line-height: .98; font-weight: 600; letter-spacing: -.018em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); }
.slide.is-active .hero-title .line > span, html:not(.js) .hero-title .line > span { transform: none; }
.slide.is-active .hero-title .line:nth-child(1) > span { transition-delay: .25s; }
.slide.is-active .hero-title .line:nth-child(2) > span { transition-delay: .33s; }
.slide.is-active .hero-title .line:nth-child(3) > span { transition-delay: .41s; }
.hero-title .r { color: var(--red); }
.hero-lead { margin-top: 28px; max-width: 520px; font-size: clamp(16px, 1.2vw, 19px); color: rgba(255,255,255,.78); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.slide .fd { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s var(--ease); }
.slide.is-active .fd, html:not(.js) .slide .fd { opacity: 1; transform: none; }
.slide.is-active .fd.d1 { transition-delay: .6s; }
.slide.is-active .fd.d2 { transition-delay: .75s; }

/* Slider navigation: tabs with autoplay progress + arrows */
.hero-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(6, 1fr) auto; border-top: 1px solid var(--hair); background: rgba(14,14,13,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hn { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 24px; text-align: left; border-right: 1px solid var(--hair); color: rgba(255,255,255,.45); transition: color .3s, background .3s; }
.hn:first-child { padding-left: var(--gutter); }
.hn:hover { color: #fff; background: rgba(255,255,255,.03); }
.hn.is-active { color: #fff; }
.hn .n { font-family: var(--mono); font-size: 12px; color: var(--red); }
.hn .t { font-size: 15px; font-weight: 500; }
.hn i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.hn i b { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.arrows { display: flex; }
.arrows button { width: 80px; display: grid; place-items: center; border-right: 1px solid var(--hair); transition: background .3s; }
.arrows button:last-child { border-right: 0; }
.arrows button:hover { background: var(--red); }
.arrows svg { width: 20px; height: 20px; }
.arrows .prev svg { transform: rotate(180deg); }

/* ---------- Sections ---------- */
.sec { padding: var(--sec-y) 0; position: relative; }
/* Two light sections in a row would stack both paddings; keep a single gap */
.sec.light + .sec.light:not(.qp-std-sec):not(.ab-close) { padding-top: calc(var(--sec-y) * .35); }
.sec-label { display: flex; align-items: center; gap: 14px; color: var(--dim); margin-bottom: 40px; }
.sec-label b { color: var(--red); font-weight: 500; }
.light { background: var(--bone); color: var(--black); }
.light .sec-label { color: rgba(14,14,13,.55); }
.h2 { font-size: var(--title); line-height: 1.05; font-weight: 600; letter-spacing: -.018em; }
.h2 em { font-style: normal; color: var(--red); }

.reveal { opacity: 0; transform: translateY(48px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(72px, 9vw, 140px); border-top: 1px solid var(--hair); }
.stat { padding: 32px 24px 0 0; border-right: 1px solid var(--hair); padding-left: 24px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(64px, 8vw, 132px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.stat b sup { font-size: .35em; color: var(--red); vertical-align: top; margin-left: 4px; }
.stat span { display: block; margin-top: 16px; color: var(--dim); max-width: 220px; }
@keyframes ping { 70% { box-shadow: 0 0 0 28px rgba(228,1,12,0); } 100% { box-shadow: 0 0 0 0 rgba(228,1,12,0); } }

/* Footer */

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hdr-cta { display: none; }
}
@media (max-width: 800px) {
  .hero-main { padding-top: 110px; padding-bottom: 110px; }
  .slide-bg img { object-position: 70% center; }
  .hero-nav { grid-template-columns: 1fr auto; }
  .hn { display: none; }
  .hn.is-active { display: flex; padding-left: var(--gutter); }
  .arrows button { width: 64px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 28px 16px 28px 0; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { padding-left: 16px; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

[id] { scroll-margin-top: 150px; }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; min-height: 68svh; display: flex; align-items: flex-end; padding: 210px 0 88px; overflow: hidden; background: var(--graphite); }
.page-hero .bg { position: absolute; inset: 0; overflow: hidden; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 12s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(14,14,13,.9) 0%, rgba(14,14,13,.62) 42%, rgba(14,14,13,.2) 100%),
    linear-gradient(180deg, rgba(14,14,13,.6) 0%, transparent 30%, transparent 55%, rgba(14,14,13,.9) 100%); }
.page-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.crumbs { display: flex; align-items: center; gap: 12px; color: var(--dim); margin-bottom: 28px; opacity: 0; animation: fadeUp .9s var(--ease) .1s forwards; transform: translateY(16px); }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: #fff; }
.crumbs .tri { transform: rotate(90deg); border-bottom-width: 8px; border-left-width: 5px; border-right-width: 5px; }
.page-title { font-size: clamp(40px, 6.2vw, 108px); line-height: .94; font-weight: 600; letter-spacing: -.02em; }
.page-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.page-title .line > span { display: inline-block; transform: translateY(105%); animation: lineUp 1.1s var(--ease) .15s forwards; }
.page-title .line:nth-child(2) > span { animation-delay: .23s; }
.page-title .r { color: var(--red); }
@keyframes lineUp { to { transform: none; } }
.page-lead { margin-top: 26px; max-width: 620px; font-size: clamp(16px, 1.3vw, 20px); color: rgba(255,255,255,.76); opacity: 0; transform: translateY(16px); animation: fadeUp .9s var(--ease) .45s forwards; }

/* Sticky in-page navigation */
.subnav { position: sticky; top: 0; transition: top .6s var(--ease); z-index: 50; background: rgba(14,14,13,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 20px 18px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.55); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .3s, border-color .3s; }
.subnav a:first-child { padding-left: 0; }
.subnav a:hover, .subnav a.on { color: #fff; border-color: var(--red); }
/* Phones: links share the width evenly so a short list fits without being cut; longer lists still scroll */
@media (max-width: 560px) {
  .subnav .wrap { justify-content: space-between; gap: 14px; }
  .subnav a { padding: 16px 0; font-size: 12.5px; }
  /* Phones: the section bar is hidden on every page; the page reads fine by scrolling */
  .subnav { display: none; }
}

/* Two-column section: label left, content right */
.split { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; }
.split .sec-label { margin: 8px 0 0; align-self: start; }

/* About page, told as a scroll story: statement lights up word by word, a photo opens to full screen,
   mission/vision as outlined words, principles travel sideways in a pinned section, closing quote */
.ab-state { max-width: 1320px; font-size: clamp(30px, 4.3vw, 70px); font-weight: 600; line-height: 1.08; letter-spacing: -.022em; }
.ab-state .w { color: rgba(14,14,13,.14); transition: color .45s; }
.ab-state .w.on { color: var(--black); }
.ab-state .w.acc.on { color: var(--red); }
.ab-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(64px, 8vw, 130px); }
.ab-cols p { padding-top: 22px; border-top: 1px solid var(--hair-dark); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: rgba(14,14,13,.7); }
.ab-cols p .mono { display: block; margin-bottom: 18px; font-size: 13px; color: var(--red); }
.ab-stats { grid-template-columns: repeat(3, 1fr); margin-top: clamp(64px, 7vw, 120px); }
.light .stats, .light .stat { border-color: var(--hair-dark); }
.light .stat span { color: rgba(14,14,13,.6); }

/* --p (0 to 1) is the scroll progress through the section, set by main.js */
.ab-zoom { --p: 0; position: relative; height: 230vh; background: var(--bone); }
.ab-zoom-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ab-zoom-media { --zy: 20%; --zx: 28%; position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p)) * var(--zy)) calc((1 - var(--p)) * var(--zx)) round calc((1 - var(--p)) * 28px)); }
.ab-zoom-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - var(--p) * .25)); }
.ab-zoom-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,14,13,.9), rgba(14,14,13,.15) 60%); opacity: var(--p); }
.ab-zoom-txt { position: absolute; left: 0; right: 0; bottom: 9vh; color: #fff; opacity: clamp(0, calc((var(--p) - .82) * 6), 1); transform: translateY(calc((1 - var(--p)) * 60px)); }
.ab-zoom-txt .mono { font-size: 13px; color: rgba(255,255,255,.7); }
.ab-zoom-txt p { max-width: 980px; margin-top: 18px; font-size: clamp(22px, 2.6vw, 42px); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }

.mv-row { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: end; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--hair); }
.mv-row:last-child { border-bottom: 1px solid var(--hair); }
.mv-word { font-size: clamp(54px, 8.2vw, 136px); font-weight: 700; line-height: .9; letter-spacing: -.035em; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.38); transition: color .6s var(--ease), -webkit-text-stroke-color .6s; }
.mv-row:hover .mv-word { color: var(--red); -webkit-text-stroke-color: var(--red); }
.mv-row .mono { font-size: 13px; color: var(--red); }
.mv-row p { margin-top: 16px; font-size: clamp(20px, 1.9vw, 30px); font-weight: 500; line-height: 1.35; color: #fff; }

/* Brands page: a 3x3 wall of brand tiles on dark; hover fills a tile red. Past brand on a quiet line below */
.br-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(48px, 5vw, 80px); background: var(--hair); border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; }
.br { position: relative; display: grid; place-items: center; min-height: clamp(180px, 17vw, 260px); padding: 40px 28px; background: var(--black); text-align: center; overflow: hidden; isolation: isolate; }
.br::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: translateY(101%); transition: transform .6s var(--ease); }
.br:hover::before { transform: none; }
.br-n { position: absolute; left: 22px; top: 20px; font-size: 12px; color: var(--red); transition: color .4s; }
.br:hover .br-n { color: rgba(255,255,255,.75); }
.br-logo { width: clamp(170px, 17vw, 250px); height: auto; transition: transform .6s var(--ease); }
.br-logo-tall { width: clamp(120px, 11vw, 168px); }

.br-logo-sq { width: clamp(116px, 10.5vw, 156px); }
.br-logo-wide { width: clamp(200px, 20vw, 290px); }
.br:hover .br-logo { transform: scale(1.06); }
/* On the red hover fill, logos turn fully white so their red parts do not disappear */
.br-logo { transition: transform .6s var(--ease), filter .4s; }
.br:hover .br-logo { filter: brightness(0) invert(1); }
/* Full-colour illustrated logos keep their colours (a white silhouette would lose the drawing) */
.br-logo-color { width: clamp(140px, 12.5vw, 190px); }
.br:hover .br-logo-color { filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
/* Kəndimizin Süfrəsi vector logo: outlines recoloured white, inner letters in the tile colour, so no hover filter */
.br-logo-ks { width: clamp(160px, 14vw, 210px); }
.br:hover .br-logo-ks { filter: none; }
/* Past brand: a quiet wide card; the logo carries a tilted red "sold" stamp */
.bp { display: grid; grid-template-columns: minmax(220px, 4fr) 8fr; margin-top: 20px; border: 1px dashed rgba(255,255,255,.18); border-radius: 22px; overflow: hidden; }
.bp-logo { position: relative; display: grid; place-items: center; min-height: 190px; padding: 32px; border-right: 1px dashed rgba(255,255,255,.18); }
.bp-logo img { width: clamp(140px, 12vw, 180px); height: auto; opacity: .45; filter: grayscale(1); }
.bp-stamp { position: absolute; right: 18px; top: 18px; padding: 5px 12px; border: 2px solid var(--red); border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--red); transform: rotate(8deg); }
.bp-txt { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px clamp(28px, 4vw, 56px); }
.bp-txt .mono { font-size: 12px; color: var(--dim); }
.bp-txt b { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; color: rgba(255,255,255,.8); }
.bp-txt p { max-width: 520px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.5); }
@media (max-width: 560px) { .bp { grid-template-columns: 1fr; } .bp-logo { min-height: 160px; border-right: 0; border-bottom: 1px dashed rgba(255,255,255,.18); } .bp-txt { padding: 24px; } }
/* Brand tiles: logo centred with the category peeking at the foot; on hover the tile fills red, the logo lifts
   and shrinks and an info panel (category, name, description, link) slides up. Touch screens show the info. */
.br { min-height: clamp(260px, 21vw, 320px); padding: 0; }
.br-mark { display: grid; place-items: center; position: absolute; inset: 0 0 46px; transition: transform .7s var(--ease); }
.br-mark .br-logo { transition: transform .7s var(--ease), filter .4s; }
.br-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 26px 24px; text-align: left; transform: translateY(calc(100% - 44px)); transition: transform .7s var(--ease); }
.br-cat { display: inline-block; padding: 4px 10px; border: 1px solid var(--hair); border-radius: 99px; font-size: 11px; color: rgba(255,255,255,.6); transition: border-color .4s, color .4s; }
.br-info b { display: block; margin-top: 14px; font-size: 20px; font-weight: 600; color: #fff; opacity: 0; transition: opacity .4s; }
.br-info p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.88); opacity: 0; transition: opacity .4s; }
.br-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #fff; opacity: 0; transition: opacity .4s; }
.br-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.br-link:hover svg { transform: translate(2px, -2px); }
.br:hover .br-mark { transform: translateY(-26%) scale(.72); }
.br:hover .br-info { transform: none; }
.br:hover .br-info b, .br:hover .br-info p, .br:hover .br-link { opacity: 1; transition-delay: .15s; }
.br:hover .br-cat { border-color: rgba(255,255,255,.55); color: #fff; }
@media (hover: none), (max-width: 900px) {
  .br { display: flex; flex-direction: column; min-height: 0; }
  .br-mark { position: relative; inset: auto; min-height: 150px; }
  .br-info { position: relative; transform: none; padding: 0 20px 22px; }
  .br-info b, .br-info p, .br-link { opacity: 1; }
  .br-info p { color: rgba(255,255,255,.62); }
  .br:hover .br-mark { transform: none; }
}
@media (max-width: 900px) { .br-grid { grid-template-columns: repeat(2, 1fr); } .br:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .br-grid { grid-template-columns: 1fr; } .br:last-child:nth-child(odd) { grid-column: auto; } .br-mark { min-height: 140px; } .br { min-height: 0; padding: 0; } .br-n { left: 14px; top: 12px; } .br-logo { width: 136px; } .br-logo-tall { width: 104px; } .br-logo-sq { width: 88px; } .br-logo-color { width: 112px; } .br-logo-wide { width: 150px; } .br-grid { border-radius: 16px; } }

/* Quality policy page: lead paragraph, three pillar cards on dark, numbered commitments, ISO standards */
.qp-lead { max-width: 860px; margin-top: clamp(40px, 5vw, 72px); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: rgba(14,14,13,.7); }
.qp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(48px, 5vw, 80px); background: var(--hair); border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; }
.qp-p { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: clamp(28px, 3vw, 44px); background: var(--black); overflow: hidden; isolation: isolate; scroll-margin-top: 150px; }
.qp-p::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #151514; opacity: 0; transition: opacity .5s; }
.qp-p:hover::before { opacity: 1; }
.qp-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--hair); transition: background .4s, border-color .4s; }
.qp-ic svg { width: 28px; height: 28px; fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.qp-p:hover .qp-ic { background: var(--red); border-color: var(--red); }
.qp-p:hover .qp-ic svg { stroke: #fff; }
.qp-n { position: absolute; right: 20px; top: 8px; font-size: clamp(90px, 9vw, 140px); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.12); pointer-events: none; }
.qp-p .mono { margin-top: auto; padding-top: 48px; font-size: 13px; color: var(--red); }
.qp-p h3 { margin-top: 12px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: #fff; }
.qp-p p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.62); }
.qp-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 80px); margin-top: clamp(48px, 5vw, 80px); }
.qp-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--hair-dark); }
.qp-list li .mono { font-size: 13px; color: var(--red); }
.qp-list li p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--black); }
.qp-std-sec { padding-top: 0; }
.qp-std-sec .split { padding-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--hair-dark); }
.qp-std { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(48px, 5vw, 80px); }
.qp-s { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: 22px; background: #fff; transition: transform .5s var(--ease), box-shadow .5s; }
.qp-s:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(14,14,13,.08); }
.qp-s .mono { font-size: 13px; color: var(--red); }
.qp-s b { margin-top: 6px; font-size: clamp(56px, 6vw, 92px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--black); }
.qp-s p { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair-dark); font-size: 16px; line-height: 1.5; color: rgba(14,14,13,.65); }
@media (max-width: 900px) { .qp-pillars, .qp-std { grid-template-columns: 1fr; } .qp-p { min-height: 0; } .qp-list { grid-template-columns: 1fr; } }

/* Human resources page: a six-step development path on dark (a red line runs through the steps), CV invitation */
.hr-path { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px clamp(28px, 4vw, 64px); margin-top: clamp(56px, 6vw, 96px); counter-reset: none; }
.hr-st { position: relative; padding-top: 34px; border-top: 1px solid var(--hair); }
.hr-st::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--red); transition: width .6s var(--ease); }
.hr-st:hover::before { width: 100%; }
.hr-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--hair); transition: background .4s, border-color .4s; }
.hr-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.hr-st:hover .hr-ic { background: var(--red); border-color: var(--red); }
.hr-st:hover .hr-ic svg { stroke: #fff; }
.hr-st > b { position: absolute; right: 0; top: 30px; font-size: 13px; font-weight: 500; color: var(--dim); }
.hr-st h3 { margin-top: 26px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.hr-st p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .hr-path { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hr-path { grid-template-columns: 1fr; gap: 40px; } }

/* Vacancies: the open position as a large white card, filled positions as a quiet list below */
.vc { display: grid; grid-template-columns: 8fr 4fr; margin-top: clamp(48px, 5vw, 80px); border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px rgba(14,14,13,.06); }
.vc-main { padding: clamp(28px, 4vw, 56px); }
.vc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(31,157,85,.1); font-size: 12px; color: #1a7f45; }
.vc-badge i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; animation: vcPulse 1.8s ease-in-out infinite; }
@keyframes vcPulse { 50% { box-shadow: 0 0 0 6px rgba(31,157,85,0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(31,157,85,.45); } }
.vc h3 { margin-top: 18px; font-size: clamp(28px, 3vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.vc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vc-meta span { padding: 5px 12px; border: 1px solid var(--hair-dark); border-radius: 99px; font-size: 12px; color: rgba(14,14,13,.6); }
.vc-intro { max-width: 640px; margin-top: 24px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: rgba(14,14,13,.72); }
.vc-req { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair-dark); }
.vc-req .mono { font-size: 12px; color: var(--red); }
.vc-req ul { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.vc-req li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.5; color: var(--black); }
.vc-req li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.vc-apply { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: clamp(28px, 4vw, 48px); background: var(--black); color: #fff; }
.vc-apply p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.7); }
.vc-mail { font-size: 18px; font-weight: 600; color: #fff; transition: color .3s; }
.vc-mail:hover { color: var(--red); }
.vc-closed-t { display: block; margin-top: clamp(48px, 5vw, 72px); font-size: 12px; color: rgba(14,14,13,.5); }
.vc-closed { list-style: none; margin-top: 16px; border-top: 1px solid var(--hair-dark); }
.vc-closed li { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair-dark); }
.vc-closed b { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; color: rgba(14,14,13,.45); text-decoration: line-through; text-decoration-color: rgba(14,14,13,.25); }
.vc-closed span { font-size: 14px; color: rgba(14,14,13,.4); }
.vc-closed i { padding: 4px 12px; border-radius: 99px; background: rgba(14,14,13,.06); font-size: 11px; font-style: normal; color: rgba(14,14,13,.5); }
@media (max-width: 900px) { .vc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vc-closed li { grid-template-columns: 1fr auto; gap: 6px 12px; } .vc-closed span { grid-row: 2; } }
/* Services: dark bento grid over a faint engineering grid. A red light (--mx/--my, set by main.js) follows the
   cursor along every card edge; photos are monochrome until hovered, when a scan line sweeps across */
.fx { position: relative; background: var(--black); overflow: hidden; border-top: 1px solid var(--hair); }
.fx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent); pointer-events: none; }
.fx::after { content: ""; position: absolute; left: 50%; top: -20%; width: 70%; height: 60%; translate: -50% 0; background: radial-gradient(closest-side, rgba(228,1,12,.16), transparent); pointer-events: none; }
.fx-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(180px, 14.5vw, 230px); gap: 10px; }
.fx-c1 { grid-column: span 7; grid-row: span 2; }
.fx-c2, .fx-c3 { grid-column: span 5; }
.fx-c4, .fx-c5 { grid-column: span 4; }
.fx-card { --mx: -500px; --my: -500px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border-radius: 16px; background: #121211; border: 1px solid rgba(255,255,255,.08); overflow: hidden; isolation: isolate; scroll-margin-top: 130px; }
.fx-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.42); transform: scale(1.02); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.fx-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,10,9,.92) 8%, rgba(10,10,9,.2) 60%, rgba(10,10,9,.5)); }
.fx-card:hover img { filter: none; transform: scale(1.07); }
/* cursor light on the border: a radial gradient masked down to a 1px ring */
.fx-card::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,60,60,.95), rgba(228,1,12,.35) 30%, transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; }
.fx-grid:hover .fx-card::before { opacity: 1; }
.fx-scan { position: absolute; left: 0; right: 0; top: -30%; z-index: -1; height: 30%; background: linear-gradient(180deg, transparent, rgba(228,1,12,.18) 70%, rgba(255,90,90,.55) 98%, transparent); opacity: 0; pointer-events: none; }
.fx-card:hover .fx-scan { animation: fxScan 1.4s var(--ease) both; }
@keyframes fxScan { 0% { top: -30%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.fx-hud { position: absolute; inset: 0; pointer-events: none; }
.fx-hud i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(255,255,255,.35); transition: border-color .4s, transform .5s var(--ease); }
.fx-hud i:nth-child(1) { left: 12px; top: 12px; border-left-width: 1px; border-top-width: 1px; }
.fx-hud i:nth-child(2) { right: 12px; top: 12px; border-right-width: 1px; border-top-width: 1px; }
.fx-hud i:nth-child(3) { left: 12px; bottom: 12px; border-left-width: 1px; border-bottom-width: 1px; }
.fx-hud i:nth-child(4) { right: 12px; bottom: 12px; border-right-width: 1px; border-bottom-width: 1px; }
.fx-card:hover .fx-hud i { border-color: var(--red); }
.fx-card:hover .fx-hud i:nth-child(1) { transform: translate(4px, 4px); }
.fx-card:hover .fx-hud i:nth-child(2) { transform: translate(-4px, 4px); }
.fx-card:hover .fx-hud i:nth-child(3) { transform: translate(4px, -4px); }
.fx-card:hover .fx-hud i:nth-child(4) { transform: translate(-4px, -4px); }
.fx-top { display: flex; justify-content: flex-end; gap: 12px; padding: 4px 8px 0; font-size: 11px; }
.fx-top b { font-weight: 500; color: var(--red); }
.fx-top em { font-style: normal; color: rgba(255,255,255,.5); text-align: right; }
.fx-body { padding: 0 8px 4px; }
.fx-card h2 { font-size: clamp(19px, 1.6vw, 25px); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: #fff; }
.fx-c1 h2 { font-size: clamp(26px, 2.7vw, 40px); }
.fx-card p { max-width: 480px; margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-c1 p { -webkit-line-clamp: 2; font-size: 15px; }
.fx-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: #fff; }
.fx-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.fx-card:hover .fx-go { color: var(--red); }
.fx-card:hover .fx-go svg { transform: translate(3px, -3px); }
@media (max-width: 900px) {
  .fx-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  .fx-c1 { grid-column: span 2; grid-row: span 1; }
  .fx-c2, .fx-c3, .fx-c4, .fx-c5 { grid-column: span 1; }
  .fx-card img { filter: grayscale(.4) brightness(.5); }
}
@media (max-width: 560px) { .fx-grid { grid-template-columns: 1fr; } .fx-c1 { grid-column: auto; } }
@keyframes skZoom { from { transform: scale(1.18); } to { transform: none; } }
@keyframes skRise { from { opacity: 0; transform: translateY(48px); } }
@keyframes skMarq { to { transform: translateX(-50%); } }
@keyframes skSpin { to { transform: rotate(360deg); } }
/* Company hub: intro and figures on the dark grid, then the bento of company pages (reuses .fx-card) */
.co { padding-top: calc(64px + 56px); padding-bottom: clamp(56px, 6vw, 88px); border-top: 0; }
.co-head { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.co-title { margin-top: 0; font-size: clamp(34px, 4vw, 62px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; color: #fff; }
.co-title em { font-style: normal; color: var(--red); }
.co-intro p { max-width: 560px; margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.62); }
.co-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
.co-stats > div { padding: 18px 10px 0 16px; border-left: 1px solid rgba(255,255,255,.08); }
.co-stats > div:first-child { padding-left: 0; border-left: 0; }
.co-stats b { display: block; font-size: clamp(30px, 3vw, 46px); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: #fff; }
.co-stats b sup { font-size: .45em; color: var(--red); margin-left: 2px; }
.co-stats dd { margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.5); }
.co-grid { grid-auto-rows: clamp(190px, 15vw, 240px); }
.co-c1 { grid-column: span 7; grid-row: span 2; }
.co-c2, .co-c3 { grid-column: span 5; }
.co-c4 { grid-column: span 12; }
.co-c1 h2 { font-size: clamp(26px, 2.7vw, 40px); }
.co-logos { position: absolute; left: 0; right: 0; top: 0; height: 50%; z-index: -2; display: grid; grid-template-columns: repeat(9, 1fr); place-items: center; gap: 0 18px; padding: 44px 34px 0; opacity: .3; filter: grayscale(1); transition: opacity .6s, filter .6s; }
.fx-card .co-logos img { position: static; z-index: auto; width: auto; height: auto; max-width: 100%; max-height: 34px; object-fit: contain; filter: none; transform: none; transition: none; }
.fx-card:hover .co-logos img { filter: none; transform: none; }
.co-c2:hover .co-logos { opacity: .85; filter: none; }
.fx-top .co-badge { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; padding: 4px 10px; border-radius: 99px; background: rgba(31,157,85,.14); color: #5fd28f; font-style: normal; }
.co-badge i { width: 7px; height: 7px; border-radius: 50%; background: #2fbf6b; animation: vcPulse 1.8s ease-in-out infinite; }
@media (max-width: 900px) {
  .co { padding-top: calc(60px + 36px); }
  .co-head { grid-template-columns: 1fr; }
  .co-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  .co-c1, .co-c4 { grid-column: span 2; grid-row: span 1; }
  .co-c2, .co-c3 { grid-column: span 1; }
}
@media (max-width: 900px) { .co-logos { gap: 0 8px; padding: 46px 18px 0; height: auto; } .fx-card .co-logos img { max-height: 22px; } }
@media (max-width: 560px) { .co-grid { grid-template-columns: 1fr; } .co-c1, .co-c2, .co-c3, .co-c4 { grid-column: auto; } .co-stats { grid-template-columns: 1fr 1fr; row-gap: 18px; } .co-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } }

/* About page body text is justified (both edges straight); hyphenation keeps word gaps even.
   Large display text stays left-aligned: too few words per line leave wide gaps */
.ab-cols p, .stk-b p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }

/* Principles: wide cards stick under the header and stack on each other; main.js shrinks the covered ones (--k) */
.stk { margin-top: clamp(48px, 5vw, 80px); }
.stk-c { --k: 0; position: sticky; top: calc(150px + var(--i) * 16px); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 72px); align-items: center; min-height: clamp(220px, 32vh, 320px); margin-bottom: 28px; padding: clamp(28px, 4vw, 60px); border-radius: 26px; background: #fff; color: var(--black); box-shadow: 0 -12px 40px rgba(14,14,13,.07); transform-origin: 50% 0; transform: scale(calc(1 - var(--k) * .06)); filter: brightness(calc(1 - var(--k) * .12)); }
.stk-c:nth-child(2), .stk-c:nth-child(4) { background: var(--black); color: #fff; }
.stk-c:nth-child(5) { background: var(--red); color: #fff; }
.stk-n { min-width: 2ch; font-size: clamp(64px, 8.5vw, 140px); font-weight: 700; line-height: .82; letter-spacing: -.055em; color: var(--red); }
.stk-c:nth-child(5) .stk-n { color: #fff; }
.stk-b h3 { font-size: clamp(30px, 3.4vw, 54px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.stk-b p { max-width: 600px; margin-top: 16px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: rgba(14,14,13,.62); }
.stk-c:nth-child(2) .stk-b p, .stk-c:nth-child(4) .stk-b p { color: rgba(255,255,255,.62); }
.stk-c:nth-child(5) .stk-b p { color: rgba(255,255,255,.85); }
.stk-ic { display: grid; place-items: center; width: clamp(72px, 7vw, 108px); height: clamp(72px, 7vw, 108px); border-radius: 50%; background: rgba(228,1,12,.08); }
.stk-ic svg { width: 44%; height: 44%; fill: none; stroke: var(--red); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.stk-c:nth-child(2) .stk-ic, .stk-c:nth-child(4) .stk-ic { background: rgba(255,255,255,.06); }
.stk-c:nth-child(5) .stk-ic { background: rgba(255,255,255,.14); }
.stk-c:nth-child(5) .stk-ic svg { stroke: #fff; }
.ab-close { padding-top: clamp(40px, 5vw, 80px); }
.ab-bq { max-width: 1180px; margin: 0 auto; text-align: center; }
.ab-bq::before { content: "“"; display: block; height: .55em; font-size: clamp(90px, 10vw, 160px); font-weight: 700; line-height: 1; color: var(--red); }
.ab-bq p { font-size: clamp(26px, 3.3vw, 54px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.ab-bq em { font-style: normal; color: var(--red); }
.ab-bq cite { display: block; margin-top: 32px; font-size: 13px; font-style: normal; color: rgba(14,14,13,.5); }

/* Phones and tablets */
@media (max-width: 900px) {
  .ab-cols { grid-template-columns: 1fr; }
  .mv-row { grid-template-columns: 1fr; align-items: start; }
  .ab-zoom-media { --zy: 22%; --zx: 14%; }
  .stk-c { grid-template-columns: 1fr auto; top: calc(120px + var(--i) * 12px); min-height: 0; }
  .stk-n { grid-column: 1; }
  .stk-ic { grid-column: 2; grid-row: 1; }
  .stk-b { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mv-row p { font-size: 18px; }
  /* Phones: the three figures stay in one compact row */
  .ab-stats { grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
  .ab-stats .stat { padding: 20px 10px 0 12px; border-right: 1px solid var(--hair-dark); border-bottom: 0; }
  .ab-stats .stat:first-child { padding-left: 0; }
  .ab-stats .stat:last-child { border-right: 0; padding-right: 0; }
  .ab-stats .stat b { font-size: clamp(38px, 12vw, 52px); }
  .ab-stats .stat span { margin-top: 10px; font-size: 12.5px; line-height: 1.35; }
  .ab-zoom { height: 180vh; }
  .ab-zoom-media { --zy: 26%; --zx: 6%; }
  .ab-zoom-txt { bottom: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-zoom { --p: 1; height: auto; }
  .ab-zoom-pin { position: relative; height: 80vh; }
  .ab-state .w { color: var(--black); }
  .ab-state .w.acc { color: var(--red); }
}

/* Card grid */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 64px; }
.card { background: var(--black); padding: 36px 32px 40px; transition: background .4s; }
.card:hover { background: var(--coal); }
.card .n { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: .08em; }
.card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; margin: 18px 0 12px; }
.card p { color: var(--dim); font-size: 15px; }
.light .cards { background: var(--hair-dark); border-color: var(--hair-dark); }
.light .card { background: var(--bone); }
.light .card:hover { background: #e9e8e3; }
.light .card p { color: rgba(14,14,13,.62); }
.form { background: #fff; border-radius: 20px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; color: var(--black); box-shadow: 0 30px 80px rgba(14,14,13,.08); }
.form h2 { grid-column: 1 / -1; font-size: 30px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(14,14,13,.7); }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 14px 16px; border: 1px solid rgba(14,14,13,.14); border-radius: 10px; background: var(--bone); color: var(--black); width: 100%; transition: border-color .2s, background .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); background: #fff; }
.form textarea { min-height: 140px; resize: vertical; }
.form .btn { grid-column: 1 / -1; justify-content: center; }
.map { margin-top: clamp(64px, 8vw, 110px); border-radius: 20px; overflow: hidden; height: 460px; background: #ddd; filter: grayscale(1) contrast(1.05); }
.map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .page-hero { padding: 160px 0 64px; min-height: 60svh; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .map { height: 340px; }
}
@media (max-width: 560px) { .hdr-right { gap: 10px; } .lang-sw { grid-template-columns: repeat(3, 34px); height: 36px; } .lang-sw .pill { width: 28px; height: 28px; left: 3px; } .lang-sw[data-i="1"] .pill, .lang-sw:has(a:nth-child(2):hover) .pill { transform: translateX(34px); } .lang-sw[data-i="2"] .pill, .lang-sw:has(a:nth-child(3):hover) .pill { transform: translateX(68px); } }
body.hdr-up .subnav { top: 84px; }

@media (max-width: 1400px) { .hn { padding: 22px 18px; gap: 10px; } .hn .t { font-size: 14px; } }
@media (max-width: 1250px) { .hn .n { display: none; } }
.hn .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Home: About (photo + copy + principles + key facts) ---------- */
.about-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.about-content { display: flex; flex-direction: column; padding-top: 10px; }
.about-h { font-size: var(--title); line-height: 1.05; }
.about-lead { margin-top: 0; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; font-weight: 500; color: #fff; }
.about-text { margin-top: 18px; max-width: 700px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.64); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.principles .pr { position: relative; padding-top: 20px; border-top: 1px solid var(--hair); }
.principles .pr::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 2px; background: var(--red); }
.principles h3 { font-size: 18px; font-weight: 600; }
.principles p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--dim); }
.about-content > .btn { align-self: flex-start; margin-top: 44px; }
@media (max-width: 1100px) {
  .about-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; gap: 20px; }
}
/* ---------- Home: Services / specializations ---------- */
.sv-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-bottom: var(--head-gap); }
.sv-head .h2 { max-width: 1040px; }
.sv-aside { max-width: 360px; }
.sv-aside p { font-size: 15px; line-height: 1.6; color: rgba(14,14,13,.62); }
.sv-aside .btn { margin-top: 24px; }
@media (max-width: 1100px) { .sv-head { grid-template-columns: 1fr; } }

/* Services: expanding photo panels. The hovered (or auto-advanced) panel opens, the rest shrink to labelled strips */
.xp-wrap { display: flex; gap: 10px; height: clamp(520px, 46vw, 720px); }
.xp { position: relative; flex: 1; min-width: 0; border-radius: 18px; overflow: hidden; background: var(--graphite); color: #fff; transition: flex 1s var(--ease); }
.xp.on { flex: 5.5; }
.xp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.xp.on img { transform: none; }
.xp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,13,.15) 0%, rgba(14,14,13,.35) 40%, rgba(14,14,13,.88) 100%); transition: background .6s; }
.xp:not(.on)::after { background: linear-gradient(180deg, rgba(14,14,13,.55), rgba(14,14,13,.75)); }
.xp:not(.on):hover::after { background: linear-gradient(180deg, rgba(14,14,13,.3), rgba(14,14,13,.6)); }
.xp-v { position: absolute; z-index: 1; inset: 22px 0 22px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: opacity .35s; }
.xp-v .n { font-family: var(--sans); font-size: 26px; font-weight: 600; letter-spacing: 0; color: #fff; }
.xp-v .t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; font-weight: 600; white-space: nowrap; max-height: 78%; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.9); }
.xp.on .xp-v { opacity: 0; pointer-events: none; }
.xp-c { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(22px, 2.4vw, 36px); max-width: 640px; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease); }
.xp.on .xp-c { opacity: 1; transform: none; transition: opacity .6s .35s, transform .8s var(--ease) .35s; }
.xp-c .n { display: inline-block; padding: 5px 10px; border-radius: 100px; background: var(--red); color: #fff; font-size: 11px; }
.xp-c h3 { margin-top: 12px; font-size: clamp(22px, 2.1vw, 34px); font-weight: 600; line-height: 1.15; }
.xp-c p { margin-top: 12px; max-width: 520px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }
.xp-c .more { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; font-weight: 600; }
.xp-c .more .ar { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.xp:hover .xp-c .more { color: var(--red); }
.xp:hover .xp-c .more .ar { transform: translateX(4px); }
.xp-bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); opacity: 0; transition: opacity .4s; }
.xp-bar b { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.xp.on .xp-bar { opacity: 1; }
@media (max-width: 900px) {
  .xp-wrap { height: 460px; margin: 0 calc(var(--gutter) * -1) 0 0; padding-right: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .xp-wrap::-webkit-scrollbar { display: none; }
  .xp, .xp.on { flex: 0 0 82%; height: 100%; scroll-snap-align: start; }
  .xp::after, .xp:not(.on)::after { background: linear-gradient(180deg, transparent 30%, rgba(14,14,13,.88) 100%); }
  .xp-v, .xp-bar { display: none; }
  .xp-c, .xp.on .xp-c { opacity: 1; transform: none; }
}
@keyframes mkIn { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.btn-out-dark { height: 48px; border: 1px solid rgba(14,14,13,.2); color: var(--black); }
.btn-out-dark::before { background: var(--black); }
.btn-out-dark:hover { color: #fff; }

/* ---------- Home: partners (single rail of one-colour logos) ---------- */
.pt-sec { padding: clamp(28px, 3vw, 44px) 0; background: var(--red); }
.pt-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pt-track { list-style: none; display: flex; align-items: center; width: max-content; animation: ptMove 106s linear infinite; }
.pt-marquee:hover .pt-track { animation-play-state: paused; }
.pt-track li { flex: none; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 52px; }
.pt-track img { display: block; height: 44px; width: auto; max-width: 160px; object-fit: contain; filter: invert(1); opacity: .9; transition: opacity .4s, transform .6s var(--ease); }
.pt-track li:hover img { opacity: 1; transform: scale(1.08); }
/* Optical balance: heavy wordmarks a touch smaller, airy ones a touch larger */
.pt-track img[src*="stp-"] { height: 30px; }
.pt-track img[src*="four-seasons-"], .pt-track img[src*="azersun-"], .pt-track img[src*="isr-holding-"], .pt-track img[src*="fa-company-"], .pt-track img[src*="telli-"], .pt-track img[src*="cerkezli-"] { height: 54px; }
.pt-track img[src*="ilgim-"] { height: 58px; }
.pt-track img[src*="berqa-"] { height: 40px; }
.pt-track img[src*="media-balans-"] { height: 48px; }
.pt-track img[src*="absheron-saffron-"] { height: 66px; }
@keyframes ptMove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pt-marquee { overflow-x: auto; }
  .pt-track { animation: none; }
}
@media (max-width: 600px) {
  .pt-track { animation-duration: 72s; }
  .pt-track li { height: 44px; padding: 0 26px; }
  .pt-track img { height: 34px; max-width: 116px; }
}
/* ---------- Footer ---------- */
/* Footer sits a shade deeper than dark sections and has a hairline on top, so a dark last section never merges into it */
.ft { background: #090908; color: #fff; padding-top: var(--sec-y); border-top: 1px solid var(--hair); }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr; gap: 56px; padding-bottom: 72px; }
.ft-logo { display: inline-block; color: #fff; }
.ft-logo svg { display: block; width: 190px; height: auto; }
.ft-brand p { color: rgba(255,255,255,.6); max-width: 330px; margin-top: 24px; line-height: 1.65; }
.ft-soc { display: flex; gap: 10px; margin-top: 28px; }
.ft-soc a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; transition: background .35s, border-color .35s; }
.ft-soc a:hover { background: var(--red); border-color: var(--red); }
.ft svg:not(.ar) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-soc svg { width: 18px; height: 18px; }
.ft h4 { font-size: 18px; font-weight: 600; margin-bottom: 26px; }
.ft h4 i { font-style: normal; color: var(--red); }
.ft ul { list-style: none; display: grid; gap: 14px; }
.ft-links a, .ft-contact a { color: rgba(255,255,255,.75); transition: color .3s; }
.ft-links a:hover, .ft-contact a:hover { color: #fff; }
.ft-contact li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; }
.ft-contact svg { width: 18px; height: 18px; margin-top: 3px; color: rgba(255,255,255,.45); }
.ft-talk p { color: rgba(255,255,255,.75); max-width: 300px; line-height: 1.6; }
.ft-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 15px 24px; border-radius: 999px; background: #fff; color: var(--black); font-weight: 600; font-size: 15px; transition: background .35s, color .35s; }
.ft-btn .ar { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.ft-btn:hover { background: var(--red); color: #fff; }
.ft-btn:hover .ar { transform: translateX(4px); }
.ft-bottom { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.5); }
.ft-legal { display: flex; align-items: center; margin-left: auto; }
.ft-legal a + a { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.18); }
.ft-bottom a { color: rgba(255,255,255,.7); transition: color .3s; }
.ft-bottom a:hover { color: #fff; }
.ft-credit { display: inline-flex; align-items: center; gap: 10px; padding-left: 32px; border-left: 1px solid rgba(255,255,255,.18); }
.ft-credit img { display: block; height: 21px; width: auto; transition: opacity .3s; }
.ft-credit a:hover img { opacity: .75; }
@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 48px 64px; }
  .ft-brand p { max-width: 360px; }
  .ft-bottom { justify-content: space-between; gap: 16px; }
  .ft-credit { flex-basis: 100%; justify-content: center; padding-left: 0; border-left: 0; margin-top: 4px; }
}
@media (max-width: 600px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 0; padding-bottom: 0; }
  .ft-brand, .ft-talk { grid-column: 1 / -1; text-align: center; }
  .ft-brand { padding-bottom: 40px; }
  .ft-logo svg { width: 170px; margin: 0 auto; }
  .ft-brand p { margin: 20px auto 0; font-size: 15px; }
  .ft-soc { justify-content: center; margin-top: 24px; }
  .ft-grid > div:nth-child(2) { padding-right: 18px; }
  .ft-grid > div:nth-child(3) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.12); }
  .ft h4 { font-size: 16px; margin-bottom: 20px; }
  .ft ul { gap: 14px; font-size: 14px; }
  .ft-contact li { grid-template-columns: 16px 1fr; gap: 8px; }
  .ft-contact svg { width: 15px; height: 15px; margin-top: 2px; }
  .ft-contact a { overflow-wrap: anywhere; }
  .ft-talk { padding: 48px 0; }
  .ft-talk p { margin: 0 auto; font-size: 15px; }
  .ft-btn { margin-top: 22px; }
  .ft-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 13px; }
  .ft-rights { display: block; margin-top: 6px; }
  .ft-legal { margin-left: 0; padding-left: 0; border-left: 0; }
  .ft-credit { margin-top: 8px; }
}

/* ---------- Tablet refinements ---------- */
@media (min-width: 701px) and (max-width: 1100px) {
  /* Hero headline scales with the wider tablet screen instead of sitting at the phone minimum */
  .hero-title { font-size: clamp(34px, 6.4vw, 64px); }
}

/* ---------- Phone refinements ---------- */
/* Grid children may shrink below their content, so wide tables scroll inside their wrapper instead of widening the page */
.split > * { min-width: 0; }
/* Long words (e.g. Russian page titles) wrap instead of running off the screen */
.page-title, .h2, .hero-title { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 560px) {
  .page-title { font-size: clamp(32px, 8.6vw, 48px); }
}

/* ---------- Mobile header + light full-screen menu ---------- */
.lang-dd { position: relative; display: none; }
.lang-dd-btn { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; transition: color .4s; }
.lang-dd-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.lang-dd.open .lang-dd-btn svg { transform: rotate(180deg); }
.lang-dd-list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 96px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(14,14,13,.18); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
.lang-dd.open .lang-dd-list { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease), visibility 0s; }
.lang-dd-list a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--black); }
.lang-dd-list a:hover { background: var(--bone); }
.lang-dd-list a[aria-current] { color: var(--red); }

/* Full-screen menu: white panel filled by a grid of icon tiles (2×3 on phones, 3×2 on wider screens) */
.menu { position: fixed; inset: 0; z-index: 110; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--black); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .65s cubic-bezier(.7,0,.2,1), visibility 0s .65s; }
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s; }
.menu-inner { display: flex; flex-direction: column; min-height: 100%; padding-top: 96px; padding-bottom: 16px; }
/* Bento layout: tiles of mixed sizes (tall, wide, large) placed by order */
.mtiles { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, minmax(96px, 1fr)); gap: 10px; }
.mtiles > a:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.mtiles > a:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.mtiles > a:nth-child(3) { grid-area: 2 / 2 / 4 / 3; }
.mtiles > a:nth-child(4) { grid-area: 3 / 1 / 5 / 2; }
.mtiles > a:nth-child(5) { grid-area: 4 / 2 / 5 / 3; }
.mtiles > a:nth-child(6) { grid-area: 5 / 1 / 6 / 3; }
.mtiles > a { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; padding: 16px 16px 18px; border-radius: 20px; background: #F4F4F2; border: 1px solid transparent; text-align: left; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.mtiles > a:nth-child(6) { flex-direction: row; align-items: center; justify-content: flex-start; }
/* Each tile carries a large thin outline of its icon, sized to the tile, so big tiles never look empty */
.mtiles > a { position: relative; overflow: hidden; container-type: size; }
.mt-ic, .mt-t { position: relative; z-index: 1; }
.mt-bg { position: absolute; right: -12%; bottom: -10%; width: min(96cqw, 78cqh); height: min(96cqw, 78cqh); fill: none; stroke: var(--red); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: .2; pointer-events: none; transition: opacity .4s, transform .6s var(--ease); }
.mt-bg * { vector-effect: non-scaling-stroke; }
.mtiles > a:hover .mt-bg { opacity: .32; transform: translate(-4px, -4px) rotate(-4deg); }
.mtiles > a:nth-child(6) .mt-bg { right: 4%; bottom: auto; top: 50%; width: min(40cqw, 150cqh); height: min(40cqw, 150cqh); translate: 0 -50%; }
.mtiles > a.is-current .mt-bg { opacity: .3; }
.mtiles > a:nth-child(1) .mt-t, .mtiles > a:nth-child(3) .mt-t, .mtiles > a:nth-child(4) .mt-t { font-size: 20px; }
.mtiles > a:hover { background: #EDEDEA; }
.mtiles > a:active { transform: scale(.97); }
.mt-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(14,14,13,.06); transition: background .3s; }
.mt-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.mt-t { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--black); hyphens: auto; }
.mtiles > a.is-current { background: #fff; border-color: var(--red); }
.mtiles > a.is-current .mt-ic { background: var(--red); box-shadow: none; }
.mtiles > a.is-current .mt-ic svg { stroke: #fff; }
.mtiles > a { opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .6s var(--ease), background .3s, border-color .3s; }
body.menu-open .mtiles > a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .04s), calc(.25s + var(--i) * .04s), 0s, 0s; }
@media (min-width: 600px) {
  .menu-inner { padding-top: 116px; padding-bottom: 20px; }
  .mtiles { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, minmax(150px, 1fr)); gap: 14px; }
  .mtiles > a:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
  .mtiles > a:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
  .mtiles > a:nth-child(3) { grid-area: 1 / 4 / 3 / 5; }
  .mtiles > a:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
  .mtiles > a:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
  .mtiles > a:nth-child(6) { grid-area: 3 / 2 / 4 / 5; }
  .mtiles > a { padding: 22px 22px 24px; border-radius: 24px; }
  .mt-ic { width: 64px; height: 64px; } .mt-ic svg { width: 28px; height: 28px; }
  .mtiles > a:nth-child(n) .mt-t { font-size: 18px; }
  .mtiles > a:nth-child(1) .mt-t { font-size: 30px; }
}
/* While the light menu is open the header switches to dark ink on a white bar */
body.menu-open .brand svg, body.menu-open .lang-dd-btn { color: var(--black); }
body.menu-open .hdr::before { opacity: 1; background: #fff; border-bottom-color: var(--hair-dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .hdr.hide { transform: none; }
body.menu-open .menu-btn { background: var(--black); }
body.menu-open .mb-ic i { background: #fff; }
@media (max-width: 1100px) {
  .hdr-right .lang-sw { display: none; }
  .lang-dd { display: block; }
}

/* ================= Header v2: Raycast-inspired glass bar in ISAR colours =================
   Compact bar; transparent at the top, dark frosted glass once scrolled. The nav sits in a faint glass capsule
   with a soft glass highlight instead of a red pill; the call to action is a white pill with a red glow.
   Dropdowns are frosted glass panels; red appears only as light (icon glow, current-page outline). */
.hdr::before { background: rgba(9,9,9,.6); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border-bottom-color: rgba(255,255,255,.07); box-shadow: inset 0 -1px 0 rgba(255,255,255,.02); }
.bar { height: 80px; }
.hdr.solid .bar { height: 64px; }
.brand svg { width: 150px; height: 35px; }
.hdr.solid .brand svg { width: 132px; height: 31px; }
.hnav { height: 40px; padding: 3px; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.hnav a { font-size: 14px; color: rgba(255,255,255,.62); }
.hnav > a, .hnav-dd > a { padding: 0 clamp(12px, 1.1vw, 16px); }
.hnav a.is-current, .hnav > a:hover, .hnav-dd:hover > a { color: #fff; }
.hnav-pill { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.3); }
.lang-sw { grid-template-columns: repeat(3, 38px); height: 40px; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.lang-sw a { font-size: 11px; color: rgba(255,255,255,.5); }
.lang-sw .pill { top: 3px; left: 3px; width: 32px; height: 32px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.lang-sw[data-i="1"] .pill, .lang-sw:has(a:nth-child(2):hover) .pill { transform: translateX(38px); }
.lang-sw[data-i="2"] .pill, .lang-sw:has(a:nth-child(3):hover) .pill { transform: translateX(76px); }
.lang-sw:has(a:nth-child(1):hover) .pill { transform: none; }
.hdr-cta.btn { height: 38px; padding: 0 16px; gap: 10px; font-size: 14px; background: #fff; color: var(--black); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 6px 22px rgba(228,1,12,.28); transition: box-shadow .4s, transform .3s var(--ease), color .4s; }
.hdr-cta.btn::before { background: var(--red); }
.hdr-cta.btn:hover { color: #fff; box-shadow: 0 0 0 1px rgba(228,1,12,.6), 0 8px 30px rgba(228,1,12,.55); }
.hdd { padding-top: 16px; }
.hdd-in { padding: 8px; gap: 6px; border-radius: 18px; background: rgba(14,14,14,.72); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); border-color: rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); }
.hnav .hdd a { min-height: 168px; padding: 20px 18px 18px; border-radius: 13px; background: transparent; border: 1px solid transparent; transition: background .35s, border-color .35s, opacity .35s, transform .5s var(--ease); }
.hnav .hdd a::before { background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,.015)); transform: none; opacity: 0; transition: opacity .35s; }
.hnav .hdd a:hover::before { transform: none; opacity: 1; }
.hnav .hdd a:hover { border-color: rgba(255,255,255,.09); }
.hnav .hdd a:hover small { color: rgba(255,255,255,.7); }
.hdd-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(228,1,12,.1); box-shadow: inset 0 0 0 1px rgba(228,1,12,.22); transition: background .35s, box-shadow .35s, transform .5s var(--ease); }
.hdd-ic svg { width: 20px; height: 20px; }
.hnav .hdd a:hover .hdd-ic { background: var(--red); box-shadow: 0 0 26px rgba(228,1,12,.55); transform: none; }
.hnav .hdd a:hover .hdd-ic svg { stroke: #fff; }
.hnav .hdd a.is-current { border-color: rgba(228,1,12,.4); background: rgba(228,1,12,.05); }
.hnav .hdd a.is-current .hdd-ic { background: var(--red); box-shadow: 0 0 22px rgba(228,1,12,.45); }
.hdd b { margin-top: 22px; font-size: 15.5px; font-weight: 600; }
.hdd small { font-size: 13px; color: rgba(255,255,255,.5); }
.hdd-ar { width: 16px; height: 16px; stroke: rgba(255,255,255,.8); }
.hnav .hdd .hdd-svc a { padding: 16px 40px 16px 16px; column-gap: 14px; grid-template-columns: 42px 1fr; }
.hdd-svc b { font-size: 15px; }
@media (max-width: 560px) { .bar { height: 68px; } .hdr.solid .bar { height: 60px; } .brand svg { width: 132px; height: 31px; } .hdr.solid .brand svg { width: 120px; height: 28px; } }

/* ================= Header v3: floating glass box (Raycast pattern) =================
   The bar becomes a rounded frosted box inset from the page edges; the full-width strip is gone.
   --bx is the box's inner padding (main.js reads it to size the dropdowns to the box). */
.hdr { padding-top: 10px; }
.hdr::before { display: none; }
.bar { --bx: 22px; height: 60px; padding-left: calc(var(--gutter) + var(--bx)); padding-right: calc(var(--gutter) + 8px); }
.bar::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; border-radius: 16px; background: rgba(16,16,16,.55); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 40px rgba(0,0,0,.35); transition: background .4s; }
.hdr.solid .bar { height: 60px; }
.hdr.solid .bar::before { background: rgba(14,14,14,.82); }
.bar { isolation: isolate; }
.brand svg, .hdr.solid .brand svg { width: 124px; height: 29px; }
.hnav { height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.hnav > a, .hnav-dd > a { height: 36px; padding: 0 14px; border-radius: 9px; }
.hnav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); }
.hnav-pill { background: rgba(255,255,255,.06); box-shadow: none; top: 50%; height: 36px; margin-top: -18px; border-radius: 9px; }
.hnav a.is-current { color: #fff; }
.lang-sw { grid-template-columns: repeat(3, 34px); height: 34px; border: 0; background: none; box-shadow: none; }
.lang-sw .pill { top: 2px; left: 2px; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.08); box-shadow: none; }
.lang-sw[data-i="1"] .pill, .lang-sw:has(a:nth-child(2):hover) .pill { transform: translateX(34px); }
.lang-sw[data-i="2"] .pill, .lang-sw:has(a:nth-child(3):hover) .pill { transform: translateX(68px); }
.hdr-right { gap: 14px; }
/* light, slightly raised button like Raycast's "Download" */
.hdr-cta.btn { height: 36px; padding: 0 14px; gap: 8px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #111; background: linear-gradient(180deg, #fafafa, #dcdcdc); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.4); transition: background .3s, box-shadow .3s, color .3s; }
.hdr-cta.btn::before { display: none; }
.hdr-cta.btn:hover { color: #111; background: linear-gradient(180deg, #fff, #e9e9e9); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 3px rgba(228,1,12,.25), 0 4px 18px rgba(228,1,12,.35); }
.hdd { padding-top: 10px; }
@media (max-width: 1200px) { .bar { padding-right: calc(var(--gutter) + 12px); } }
@media (max-width: 560px) { .hdr { padding-top: 8px; } .bar, .hdr.solid .bar { --bx: 16px; height: 56px; } .bar::before { border-radius: 14px; } .brand svg, .hdr.solid .brand svg { width: 112px; height: 26px; } }
/* White mobile menu open: the floating box turns white so the dark logo and icons stay visible */
body.menu-open .bar::before { background: #fff; border-color: var(--hair-dark); box-shadow: 0 10px 30px rgba(14,14,13,.08); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Header v3, ISAR touches: corporate red CTA with a glossy highlight, a red light line along the box's
   lower edge (fading out to both ends), red-tinted glass on the chosen language, radius matched to site cards */
.bar::before { border-radius: 18px; }
.bar::after { content: ""; position: absolute; left: calc(var(--gutter) + 18%); right: calc(var(--gutter) + 18%); bottom: 0; z-index: -1; height: 1px; background: linear-gradient(90deg, transparent, rgba(228,1,12,.9), transparent); box-shadow: 0 0 14px rgba(228,1,12,.6); opacity: .8; pointer-events: none; }
body.menu-open .bar::after { opacity: 0; }
.hdr-cta.btn { color: #fff; background: linear-gradient(180deg, #f2232c, var(--red) 55%, #c4000a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.2), 0 6px 20px rgba(228,1,12,.35); }
.hdr-cta.btn:hover { color: #fff; background: linear-gradient(180deg, #ff3a42, #ec0b16 55%, #d0000b); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.2), 0 0 0 3px rgba(228,1,12,.22), 0 8px 28px rgba(228,1,12,.55); }
.lang-sw a[aria-current] { color: #fff; }
.lang-sw .pill { background: rgba(228,1,12,.22); box-shadow: inset 0 0 0 1px rgba(228,1,12,.45); }
@media (max-width: 560px) { .bar::before { border-radius: 16px; } }

/* ================= Header v4: three floating islands that merge on scroll =================
   At the top of the page the logo, the nav and the actions are three separate frosted islands with the
   photo showing between them. Once scrolled (.hdr.solid) the islands drop their own glass and a single bar
   fades in behind them, so they read as one merged bar with the red signature line. */
.bar { --bx: 0px; height: 64px; padding-left: var(--gutter); padding-right: var(--gutter); }
.bar::before { inset: 0 calc(var(--gutter) - 8px); opacity: 0; transition: opacity .5s var(--ease), background .4s; }
.bar::after { opacity: 0; transition: opacity .5s; }
.hdr.solid .bar::before { opacity: 1; }
.hdr.solid .bar::after { opacity: .8; }
.brand, .hnav, .hdr-right { border: 1px solid rgba(255,255,255,.09); background: rgba(16,16,16,.5); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.3); transition: background .5s var(--ease), border-color .5s, box-shadow .5s; }
.brand { height: 52px; padding: 0 18px; border-radius: 16px; }
.hnav { height: 52px; padding: 7px; border-radius: 16px; }
.hnav > a, .hnav-dd > a { height: 38px; border-radius: 10px; }
.hnav-pill { height: 38px; margin-top: -19px; border-radius: 10px; }
.hdr-right { height: 52px; padding: 0 7px 0 12px; border-radius: 16px; }
.hdr.solid .brand, .hdr.solid .hnav, .hdr.solid .hdr-right { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .brand, body.menu-open .hdr-right { background: #fff; border-color: var(--hair-dark); box-shadow: none; }
@media (max-width: 1200px) { .hdr-right { padding: 0 4px 0 10px; } }
@media (max-width: 560px) { .bar, .hdr.solid .bar { height: 56px; } .brand { height: 48px; padding: 0 14px; border-radius: 14px; } .hdr-right { height: 48px; border-radius: 14px; } }

/* ================= Header v5: flat full-width bar (Ankar pattern) =================
   Overrides v2-v4: no box, no islands, no capsules or pills. Plain links, a plain language switch,
   a near-square white button that fills red on hover, and two hairline verticals at the content edges
   like the frame of a drawing. Transparent at the top, dark with a hairline once scrolled. */
.hdr { padding-top: 0; }
.hdr::before { display: block; background: rgba(9,9,11,.82); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; }
.bar, .hdr.solid .bar { --bx: 0px; height: 64px; padding-left: var(--gutter); padding-right: var(--gutter); }
.bar::before { display: block; inset: 0 calc(var(--gutter) - 22px); opacity: 1; border: 0; border-left: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.bar::after, .hdr.solid .bar::after { display: none; }
.hdr.solid .bar::before { background: none; }
.brand, .hnav, .hdr-right, .hdr.solid .brand, .hdr.solid .hnav, .hdr.solid .hdr-right, body.menu-open .brand, body.menu-open .hdr-right { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand svg, .hdr.solid .brand svg { width: 128px; height: 30px; }
.hnav-pill { display: none; }
.hnav > a, .hnav-dd > a { height: 64px; padding: 0 15px; border-radius: 0; }
.hnav a { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.7); }
.hnav a.is-current, .hnav > a:hover, .hnav-dd:hover > a { color: #fff; }
.hnav-dd > a svg { opacity: .55; }
.hdr-right { gap: 18px; }
.lang-sw { grid-template-columns: repeat(3, 28px); height: 28px; background: none; border: 0; box-shadow: none; }
.lang-sw .pill { display: none; }
.lang-sw a { font-size: 11px; color: rgba(255,255,255,.42); }
.lang-sw a[aria-current], .lang-sw a:hover { color: #fff; }
.hdr-cta.btn { height: 36px; padding: 0 16px; gap: 8px; border-radius: 4px; font-size: 14px; font-weight: 500; color: var(--black); background: #fff; box-shadow: none; }
.hdr-cta.btn::before { display: block; background: var(--red); }
.hdr-cta.btn:hover { color: #fff; background: #fff; box-shadow: none; }
.hdd { padding-top: 0; }
.hdd-in { border-radius: 0 0 14px 14px; border-top-color: transparent; }
body.hdr-up .subnav { top: 64px; }
@media (max-width: 560px) { .bar, .hdr.solid .bar { height: 60px; } .bar::before { display: none; } .brand svg, .hdr.solid .brand svg { width: 116px; height: 27px; } }
/* Header v5: no frame lines at the content edges */
.bar::before, .hdr.solid .bar::before { display: none; }

/* Language: one dropdown on every screen size. Globe + current code + chevron; the list is a dark glass
   panel with each language's own name and a red tick on the current one */
.hdr-right .lang-sw { display: none; }
.lang-dd { display: block; }
.lang-dd-btn { gap: 7px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.8); transition: color .3s, background .3s; }
.lang-dd-btn:hover, .lang-dd.open .lang-dd-btn { color: #fff; background: rgba(255,255,255,.07); }
.lang-globe { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .8; }
.lang-dd-list { top: calc(100% + 10px); min-width: 196px; padding: 6px; border-radius: 12px; background: rgba(16,16,16,.88); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.lang-dd-list a { display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); }
.lang-dd-list a b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.45); }
.lang-dd-list a svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lang-dd-list a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lang-dd-list a[aria-current] { color: #fff; }
.lang-dd-list a[aria-current] svg { opacity: 1; }
body.menu-open .lang-dd-btn { color: var(--black); }
/* Company page only: simple footer, just the bottom row */
body:has(.co) .ft { padding-top: 0; }
body:has(.co) .ft-grid { display: none; }
body:has(.co) .ft-bottom { border-top: 0; padding-top: 26px; padding-bottom: 26px; }
/* Company page fills the screen: the footer stays at the bottom and the content sits centred in the space above it */
body:has(.co) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(.co) main { flex: 1; display: flex; }
body:has(.co) .co { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(40px, 4vw, 64px); }
body:has(.co) .co > .wrap { width: 100%; }
.co-title { font-size: clamp(32px, 3.5vw, 54px); }
.co-head { align-items: center; }
/* Company page balance: content starts under the header and the card rows grow with the screen height,
   so the bento fills the space down to the footer instead of leaving a gap below it */
body:has(.co) .co { justify-content: flex-start; padding-top: calc(64px + 44px); }
.co-head { margin-bottom: clamp(24px, 3vw, 40px); }
.co-grid { grid-auto-rows: clamp(200px, calc((100vh - 420px) / 3), 320px); }
/* Brands card: text on the left, the nine logos as a tidy 3x3 grid on the right, all white; own colours on hover */
.fx-card.co-c2 .fx-body { max-width: 50%; }
.fx-card.co-c2 .co-logos { left: auto; right: 34px; top: calc(50% + 12px); bottom: auto; width: 40%; height: auto; padding: 0; translate: 0 -50%; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; opacity: .55; filter: brightness(0) invert(1); transition: opacity .5s, filter .5s; }
.fx-card.co-c2 .co-logos img { max-height: 28px; max-width: 100%; }
.fx-card.co-c2:hover .co-logos { opacity: 1; filter: none; }
.fx-card.co-c2::after { background: linear-gradient(90deg, rgba(10,10,9,.6), rgba(10,10,9,.2) 55%, rgba(10,10,9,.35)); }
@media (max-width: 900px) {
  .co-grid { grid-auto-rows: 250px; }
  .fx-card.co-c2 .fx-body { max-width: none; }
  .fx-card.co-c2 .co-logos { left: 22px; right: 22px; top: 54px; width: auto; translate: none; grid-template-columns: repeat(9, 1fr); gap: 0 8px; }
  .fx-card.co-c2 .co-logos img { max-height: 22px; }
  .fx-card.co-c2::after { background: linear-gradient(0deg, rgba(10,10,9,.92) 8%, rgba(10,10,9,.2) 60%, rgba(10,10,9,.5)); }
}
/* Services page: company layout without the intro; the 6-card bento fills the screen above the simple footer */
.svx .fx-grid { grid-auto-rows: clamp(170px, calc((100vh - 260px) / 3), 320px); }
.fx.svx { padding-top: calc(64px + 30px); }
.svx .fx-grid { grid-auto-rows: clamp(170px, calc((100vh - 310px) / 3), 320px); }
/* Services intro mirrors the company page: title and lead on the left, a quiet note on the right */
.svx-head { align-items: end; }
.fx.svx { padding-top: calc(64px + 44px); }
.svx .fx-grid { grid-auto-rows: clamp(170px, calc((100vh - 420px) / 3), 300px); }

/* ================= Brand grid, tidy version =================
   Static cards on every screen: a fixed-height logo stage with all logos fitted to the same box, then the
   category tag, name, description and (optional) link aligned to one baseline grid. No red fill on hover:
   the card lifts slightly and its border turns red, like the other dark cards on the site. */
.br-grid { gap: 0; }
.br { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; text-align: left; transition: background .4s; }
.br::before { display: none; }
.br:hover { background: #141413; }
.br::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color .4s; }
.br:hover::after { border-color: rgba(228,1,12,.45); }
.br-n { top: 22px; left: 26px; z-index: 1; }
.br-mark, .br:hover .br-mark { position: relative; inset: auto; display: grid; place-items: center; height: 190px; min-height: 0; padding: 36px 40px 10px; transform: none; }
.br-mark .br-logo, .br-mark .br-logo-sq, .br-mark .br-logo-tall, .br-mark .br-logo-wide, .br-mark .br-logo-color, .br-mark .br-logo-ks { width: auto; height: auto; max-width: 70%; max-height: 110px; object-fit: contain; }
.br-mark .br-logo-wide, .br-mark img[alt="MONARX"] { max-width: 78%; max-height: 60px; }
.br:hover .br-logo { transform: scale(1.04); filter: none; }
.br-info, .br:hover .br-info { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 28px 28px; transform: none; }
.br-info b, .br-info p, .br-link { opacity: 1; }
.br-info b { margin-top: 14px; }
.br-info p { color: rgba(255,255,255,.58); }
.br:hover .br-info p { color: rgba(255,255,255,.75); }
.br-link { margin-top: auto; padding-top: 14px; }
.br-link:hover { color: var(--red); }
.br-cat, .br:hover .br-cat { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .br-mark, .br:hover .br-mark { height: 160px; } }
@media (max-width: 560px) { .br-mark, .br:hover .br-mark { height: 150px; padding: 34px 30px 6px; } .br-info, .br:hover .br-info { padding: 4px 20px 24px; } }
/* cell dividers back (1px gap over the hairline background) and logos balanced to similar visual weight */
.br-grid { gap: 1px; }
.br { background: var(--black); }
.br-mark .br-logo { max-height: 92px; max-width: 56%; }
.br-mark img[alt="Ravia Jewels"], .br-mark img[alt="BLACK LOFT"], .br-mark img[alt="İSAR KARGO"] { max-height: 74px; }
.br-mark img[alt="Bir Qutu Hədiyyə"], .br-mark img[alt="YÜKTAP.az"] { max-height: 104px; }
.st { position: relative; height: calc((var(--n) + .6) * 100vh); background: #000; }
.st-scene { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.st-scene:first-child, .st-scene.on { clip-path: inset(0 0 0 0); }
.st-scene img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 2.4s cubic-bezier(.2,.6,.2,1); }
.st-scene.on img { transform: none; }
.st-cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .9s var(--ease); }
.st-cap.on { opacity: 1; transform: none; transition-delay: .25s; }
.st-cap .mono { font-size: 12px; color: var(--red); }
.st-cap h3 { max-width: 24ch; margin-top: 14px; font-size: clamp(30px, 4vw, 66px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.st-dots { position: absolute; right: var(--gutter); top: 50%; display: flex; flex-direction: column; gap: 10px; translate: 0 -50%; }
.st-dots i { width: 3px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.22); transition: background .4s, height .4s var(--ease); }
.st-dots i.on { height: 44px; background: var(--red); }
@media (max-width: 900px) { .st-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-scene, .st-scene img, .st-cap { transition: none; } }

/* ================= Service story v2: scroll-scrubbed effects =================
   Everything below is driven by scroll position from main.js (no timed transitions):
   scenes zoom through (next photo grows from a rounded card to full screen while the previous one recedes),
   captions rise word by word out of a mask, a huge outlined counter rolls, the band slides, the hero parallaxes. */
.st-scene, .st-scene:first-child, .st-scene.on { clip-path: none; transition: none; }
.st-scene { --e: 0; --x: 0; z-index: 0; clip-path: inset(calc((1 - var(--e)) * 22%) calc((1 - var(--e)) * 30%) round calc((1 - var(--e)) * 36px)); filter: brightness(calc(1 - var(--x) * .55)); transform: scale(calc(1 - var(--x) * .08)); will-change: clip-path, transform; }
.st-scene img, .st-scene.on img { transform: scale(calc(1.25 - var(--e) * .25 + var(--x) * .05)); transition: none; will-change: transform; }
.st-cap, .st-cap.on { opacity: 1; transform: none; transition: none; }
.st-cap .mono { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.st-cap.on .mono { opacity: 1; transform: none; transition-delay: .1s; }
@keyframes stWord { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-scene { clip-path: none !important; } }
.st-scene { opacity: clamp(0, calc(var(--e) * 8), 1); }
.bp-txt > p { max-width: 520px; margin-top: 20px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.62); }
@keyframes bpDraw { to { stroke-dashoffset: 0; } }
@keyframes bpFade { to { opacity: 1; } }
.qp-list li p b { font-weight: 600; }
/* Pages with a section bar keep the header in place, and the bar sits right under it */
body:has(.subnav) .hdr.hide { transform: none; }
.subnav, body.hdr-up .subnav { top: 64px; }

/* ================= Scope cards: drawing sheets with a flashlight =================
   Each card is a dark drawing sheet: fine grid, inner border frame, the photo as a faint negative "drawing".
   The pointer is a flashlight: a soft circle (--r, animated via @property) reveals the real photo under the
   drawing around --mx/--my. The title sits in a framed title block whose frame turns red on hover. */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.ds-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(200px, 17vw, 260px); gap: 12px; margin-top: clamp(48px, 5vw, 80px); }
.ds { --mx: 50%; --my: 50%; position: relative; grid-column: span 4; overflow: hidden; isolation: isolate; border-radius: 6px; background-color: #0b0c0d; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 24px 24px; cursor: crosshair; }
.ds:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.ds:nth-child(2), .ds:nth-child(3) { grid-column: span 5; }
.ds:nth-child(7), .ds:last-child:nth-child(3n+1) { grid-column: span 12; }
.ds img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-bp { z-index: -2; filter: grayscale(1) invert(1) contrast(1.7) brightness(.9); opacity: .2; mix-blend-mode: screen; transition: opacity .5s; }
.ds-real { --r: 0px; z-index: -1; -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, transparent 100%); transition: --r .7s cubic-bezier(.2,.8,.2,1); }
.ds:hover .ds-real { --r: 300px; }
.ds:hover .ds-bp { opacity: .32; }
.ds::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(5,5,5,.75), transparent 55%); pointer-events: none; }
.ds-frame { position: absolute; inset: 10px; z-index: 1; border: 1px solid rgba(255,255,255,.14); pointer-events: none; transition: border-color .4s; }
.ds-frame::before, .ds-frame::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid rgba(255,255,255,.6); transition: border-color .4s; }
.ds-frame::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.ds-frame::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.ds:hover .ds-frame, .ds:hover .ds-frame::before, .ds:hover .ds-frame::after { border-color: var(--red); }
.ds-tb { position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px); padding: 14px 20px 16px; border-top: 1px solid rgba(255,255,255,.14); border-right: 1px solid rgba(255,255,255,.14); background: rgba(8,8,8,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .4s; }
.ds:hover .ds-tb { border-color: var(--red); }
.ds-tb h3 { font-size: clamp(16px, 1.35vw, 21px); font-weight: 500; line-height: 1.3; color: #fff; }
.ds:nth-child(1) .ds-tb h3 { font-size: clamp(22px, 2.2vw, 34px); max-width: 18ch; }
.ds-tb i { position: absolute; width: 7px; height: 7px; border: 1px solid var(--red); background: #0b0c0d; transform: rotate(45deg); }
.ds-tb i:nth-of-type(1) { left: -4px; top: -4px; }
.ds-tb i:nth-of-type(2) { right: -4px; bottom: -4px; }
/* touch screens: no flashlight, the photo shows softly instead */
@media (hover: none) { .ds-real { -webkit-mask-image: none; mask-image: none; opacity: .55; } }
@media (max-width: 900px) { .ds-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; } .ds, .ds:nth-child(n) { grid-column: span 1; grid-row: span 1; } .ds:nth-child(1), .ds:nth-child(7) { grid-column: span 2; } }
@media (max-width: 560px) { .ds-grid { grid-template-columns: 1fr; } .ds, .ds:nth-child(n) { grid-column: auto; } }
/* a zero-radius mask still paints in some engines, so the real photo is also hidden by opacity until hover */
.ds-real { opacity: 0; transition: --r .7s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ds:hover .ds-real { opacity: 1; }
.ds-bp { opacity: .32; }
@media (hover: none) { .ds-real { opacity: .55; } }
/* Abstract mosaic: every card a different size, rows of different heights, no gaps */
@media (min-width: 901px) {
  .ds-grid { grid-auto-rows: auto; }
  /* seven cards (four rows) */
  .ds-grid:has(> .ds:nth-child(7)) { grid-template-rows: clamp(220px, 17vw, 270px) clamp(170px, 13vw, 210px) clamp(200px, 15vw, 240px) clamp(160px, 12vw, 190px); }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(1) { grid-column: 1 / 6;  grid-row: 1 / 3; }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(2) { grid-column: 6 / 10; grid-row: 1 / 2; }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 2; }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(4) { grid-column: 6 / 9;  grid-row: 2 / 4; }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(5) { grid-column: 9 / 13; grid-row: 2 / 4; }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(6) { grid-column: 1 / 6;  grid-row: 3 / 5; }
  .ds-grid:has(> .ds:nth-child(7)) > .ds:nth-child(7) { grid-column: 6 / 13; grid-row: 4 / 5; }
  /* four cards (three rows) */
  .ds-grid:not(:has(> .ds:nth-child(5))) { grid-template-rows: clamp(200px, 15vw, 250px) clamp(170px, 13vw, 210px) clamp(190px, 14vw, 230px); }
  .ds-grid:not(:has(> .ds:nth-child(5))) > .ds:nth-child(1) { grid-column: 1 / 6;  grid-row: 1 / 4; }
  .ds-grid:not(:has(> .ds:nth-child(5))) > .ds:nth-child(2) { grid-column: 6 / 13; grid-row: 1 / 2; }
  .ds-grid:not(:has(> .ds:nth-child(5))) > .ds:nth-child(3) { grid-column: 6 / 9;  grid-row: 2 / 4; }
  .ds-grid:not(:has(> .ds:nth-child(5))) > .ds:nth-child(4) { grid-column: 9 / 13; grid-row: 2 / 4; }
}
@media (max-width: 900px) { .ds-grid .ds:nth-child(n) { grid-column: span 1; grid-row: span 1; } .ds-grid .ds:nth-child(1) { grid-column: span 2; } .ds-grid .ds:last-child:nth-child(even) { grid-column: span 2; } }
@media (max-width: 560px) { .ds-grid .ds:nth-child(n) { grid-column: auto; } }
/* Five services: bento bottom row splits in two halves; dropdown is 3 + 2 */
.fx-c4, .fx-c5 { grid-column: span 6; }
@media (max-width: 900px) { .fx-c4, .fx-c5 { grid-column: span 1; } }
@media (max-width: 560px) { .fx-c4, .fx-c5 { grid-column: auto; } }
/* services dropdown: five cards side by side, icon on top */
.hdd-svc { grid-template-columns: repeat(5, 1fr) !important; }
.hnav .hdd .hdd-svc a { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 18px 18px 20px; row-gap: 0; align-items: start; }
.hdd-svc .hdd-ic { grid-row: auto; grid-column: 1; margin: 0 0 18px; }
.hdd-svc b, .hdd-svc small { grid-column: 1; }
.hnav .hdd .hdd-svc a { min-height: 0; height: auto; align-content: start; }
.hnav .hdd .hdd-svc a b { margin-top: 0 !important; }
.hdd-svc .hdd-ar { top: 22px; right: 18px; margin-top: 0; }
/* production dropdown: seven products in one row */
.hdd-prd { grid-template-columns: repeat(7, 1fr) !important; }
.hnav .hdd .hdd-prd a { padding: 16px 14px 18px; }
.hdd-prd .hdd-ar { right: 14px; top: 20px; }
.hdd-prd b { font-size: 14px !important; line-height: 1.3; }
.hdd-prd small { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; }

/* Dropdown icons v2: bigger duotone drawings with a small hover animation each */
.hdd-svc .hdd-ic { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, rgba(228,1,12,.16), rgba(228,1,12,.04)); box-shadow: inset 0 0 0 1px rgba(228,1,12,.24); }
.hnav .hdd .hdd-svc .hdd-ic { width: 58px; height: 58px; border-radius: 16px; }
.hnav .hdd .hdd-svc .hdd-ic svg { width: 36px !important; height: 36px !important; stroke-width: 1.45; overflow: visible; }
.hdd-ic .f { fill: var(--red); fill-opacity: .18; stroke: none; transition: fill .3s, fill-opacity .3s; }
.hdd-ic .pt circle { fill: var(--red); stroke: none; transition: fill .3s; }
.hdd-ic .ln { stroke-dasharray: 2.4 2.2; }
.hdd-ic .st { stroke-dasharray: 9; stroke-dashoffset: 0; }
.hdd-ic .sw { transform-box: view-box; transform-origin: 15px 3.5px; }
.hnav .hdd a:hover .hdd-ic .f { fill: #fff; fill-opacity: .25; }
.hnav .hdd a:hover .hdd-ic .pt circle { fill: #fff; }
.hnav .hdd a:hover .hdd-ic .ln { animation: icFlow .9s linear infinite; }
.hnav .hdd a:hover .hdd-ic .st { animation: icRise 1.4s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .sw { animation: icSwing 1.6s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .pt circle { animation: icSpray 1.1s ease-out infinite; }
.hnav .hdd a:hover .hdd-ic .pt circle:nth-child(2) { animation-delay: .15s; }
.hnav .hdd a:hover .hdd-ic .pt circle:nth-child(3) { animation-delay: .3s; }
.hnav .hdd a:hover .hdd-ic .pt circle:nth-child(4) { animation-delay: .45s; }
.hnav .hdd a:hover .hdd-ic .pt circle:nth-child(5) { animation-delay: .6s; }
@keyframes icFlow { to { stroke-dashoffset: -9.2; } }
@keyframes icRise { 0% { transform: translateY(2px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-3px); opacity: 0; } }
@keyframes icSwing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes icSpray { 0% { transform: translateX(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(3px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hnav .hdd a:hover .hdd-ic * { animation: none !important; } }
.hdd-prd { grid-template-columns: repeat(4, 1fr) !important; }
.hdd-prd b { font-size: 15px !important; }
/* Company dropdown: same card layout and animated icons as Services and Production */
.hdd-co { grid-template-columns: repeat(4, 1fr) !important; }
.hdd-ic .fl { transform-box: fill-box; transform-origin: left center; }
.hdd-ic .ck { stroke-dasharray: 9; stroke-dashoffset: 0; }
.hnav .hdd a:hover .hdd-ic .fl { animation: icWave 1s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .ly { animation: icLayer 1.4s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .ly2 { animation: icLayer2 1.4s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .ck { animation: icCheck 1.6s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .sd { animation: icSideL 1.6s ease-in-out infinite; }
.hnav .hdd a:hover .hdd-ic .sd2 { animation: icSideR 1.6s ease-in-out infinite; }
@keyframes icWave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(.88); } }
@keyframes icLayer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.2px); } }
@keyframes icLayer2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.6px); } }
@keyframes icCheck { 0% { stroke-dashoffset: 9; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -9; } }
@keyframes icSideL { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(.8px); } }
@keyframes icSideR { 0%, 100% { transform: translateX(1.5px); } 50% { transform: translateX(-.8px); } }
.bro-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@keyframes kvFlash { from { color: var(--red); } to { color: inherit; } }
@keyframes inFlow { to { stroke-dashoffset: -32; } }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.igt { border-collapse: separate; border-spacing: 0; min-width: 2400px; font-size: 13px; font-variant-numeric: tabular-nums; }
.igt th, .igt td { padding: 10px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--hair-dark); border-right: 1px solid rgba(14,14,13,.06); }
.igt thead th { position: sticky; top: 0; background: var(--black); color: rgba(255,255,255,.7); font: 500 11px var(--mono); letter-spacing: .04em; padding: 12px 8px; border-color: rgba(255,255,255,.08); }
.igt thead th b { display: block; color: #fff; font: 700 14px var(--sans); letter-spacing: 0; }
.igt thead th.on { background: var(--red); }
.igt tbody tr:nth-child(even) td:not(.igt-u) { background: #faf9f6; }
.igt tbody tr:hover td:not(.igt-u) { background: #fbefee; }
.igt tbody tr[data-k="kw"] td, .igt tbody tr[data-k="ef"] td { font-weight: 600; }
.igc { position: relative; padding: clamp(72px, 7vw, 112px) 0; background: radial-gradient(70% 60% at 70% 55%, #2a2120 0%, var(--black) 70%); color: #fff; overflow: hidden; scroll-margin-top: 120px; }
.igc::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(80% 70% at 60% 55%, #000, transparent); mask-image: radial-gradient(80% 70% at 60% 55%, #000, transparent); pointer-events: none; }
.igc .wrap { position: relative; }
.igc-head { display: grid; grid-template-columns: auto 1fr; gap: 10px 40px; align-items: end; }
.igc-head .mono, .igx-head .mono { grid-column: 1 / -1; color: var(--red); }
.igc-head .h2 { max-width: 15ch; }
.igc-head p { max-width: 42ch; justify-self: end; color: var(--dim); }
.igc-model { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: clamp(40px, 5vw, 72px); }
.igc-model .mono { color: var(--dim); }
.igc-model b { font-size: clamp(40px, 5.5vw, 84px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.igc-model em { font-style: normal; color: var(--red); }
/* slider */
.igc-range { margin-top: 18px; }
.igc-in { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--red) 0 var(--p, 45%), rgba(255,255,255,.14) var(--p, 45%) 100%); outline: none; cursor: pointer; }
.igc-in::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid var(--red); box-shadow: 0 0 0 6px rgba(228,1,12,.25), 0 6px 20px rgba(0,0,0,.5); cursor: grab; }
.igc-in::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid var(--red); box-shadow: 0 0 0 6px rgba(228,1,12,.25); cursor: grab; }
.igc-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(228,1,12,.45); }
.igc-ticks { display: grid; grid-template-columns: repeat(30, 1fr); margin-top: 14px; }
.igc-ticks button { position: relative; padding: 12px 0 0; background: none; border: 0; color: rgba(255,255,255,.38); font: 500 10.5px var(--mono); cursor: pointer; transition: color .2s; }
.igc-ticks button::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 7px; background: rgba(255,255,255,.25); }
.igc-ticks button:hover, .igc-ticks button.on { color: #fff; }
.igc-ticks button.on::before { background: var(--red); height: 10px; }
/* metrics + stage */
.igc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 4vw, 64px); }
.igc-mets { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.igc-m { padding: 26px 20px 26px 0; border-bottom: 1px solid var(--hair); }
.igc-m:nth-child(odd) { border-right: 1px solid var(--hair); }
.igc-m:nth-child(even) { padding-left: 24px; }
.igc-m b { font-size: clamp(30px, 3.4vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.igc-m i { margin-left: 6px; font-style: normal; color: var(--red); font-size: 15px; font-weight: 600; }
.igc-m small { display: block; margin-top: 10px; color: var(--dim); font-size: 13.5px; }
.igc-stage { position: relative; margin: 0; height: clamp(300px, 30vw, 440px); display: grid; place-items: end center; }
.igc-stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 34px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(228,1,12,.28), transparent); filter: blur(6px); }
.igc-boiler { position: relative; z-index: 1; width: calc(100% * var(--sc, .6)); transition: width .55s var(--ease); padding-bottom: 46px; }
.igc-boiler img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.igc-dim { position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: var(--red); }
.igc-dim::before, .igc-dim::after { content: ""; position: absolute; top: -6px; width: 1.5px; height: 13px; background: var(--red); }
.igc-dim::before { left: 0; } .igc-dim::after { right: 0; }
.igc-dim b { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); padding: 2px 12px; background: var(--black); border: 1px solid var(--red); border-radius: 100px; font: 600 12px var(--mono); white-space: nowrap; }
.igc-stats { list-style: none; margin: clamp(32px, 3vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.igc-stats li { padding: 14px 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); }
.igc-stats small { display: block; min-height: 2.6em; color: var(--dim); font-size: 12px; line-height: 1.3; }
.igc-stats b { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.igc-stats i { font-style: normal; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 500; }
[data-s].tick { animation: valTick .45s var(--ease); }
@keyframes valTick { from { color: var(--red); transform: translateY(-3px); } to { transform: none; } }
/* construction */
.igx-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 3vw, 48px); }
.igx-head p { color: rgba(14,14,13,.6); max-width: 52ch; }
/* table */
.igx-all { scroll-margin-top: 120px; }
.igt thead th[data-i] { cursor: pointer; transition: background .2s; }
.igt thead th[data-i]:hover { background: #2a2a28; }
.igt thead th.on, .igt thead th.on:hover { background: var(--red); }
@media (max-width: 1200px) { .igc-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .igc-head { grid-template-columns: 1fr; } .igc-head p { justify-self: start; }
  .igc-grid { grid-template-columns: 1fr; }
  .igc-ticks button { font-size: 0; } .igc-ticks button.on { font-size: 10.5px; }
}
@media (max-width: 560px) { .igc-stats { grid-template-columns: 1fr 1fr; } }.igc-m b { white-space: nowrap; }
.igc-m:nth-child(2) b { font-size: clamp(26px, 2.6vw, 40px); }
.igc-boiler { width: calc(var(--sc, .6) * min(100%, clamp(260px, 30vw, 430px))); }

.igc-mets { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
/* configurator stage: fixed technical drawing, only the C value changes */
.igc-boiler.igc-draw { width: min(100%, 470px) !important; transition: none; }
.igc-draw img { filter: invert(1) !important; mix-blend-mode: screen; opacity: .88; }
.igc-stage::after { display: none; }.igc-draw img { filter: none !important; mix-blend-mode: normal; opacity: .9; }
.igc-stage { height: auto; padding: 10px 0 0; }
.igc-boiler.igc-draw { padding-bottom: 54px; }
.igc-boiler.igc-draw { width: min(100%, 560px) !important; }
.igb { --mx: 50%; --my: 50%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--hair-dark); isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.igb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(220px circle at var(--mx) var(--my), rgba(228,1,12,.12), transparent 70%); opacity: 0; transition: opacity .35s; }
.igb:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(14,14,13,.09); }
.igb:hover::after { opacity: 1; }
.igb h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 5px; max-width: 80%; }
.igb p { font-size: 13px; line-height: 1.45; color: rgba(14,14,13,.6); }
.igb:last-child { grid-column: 1 / -1; min-height: 120px; }

/* ================= IGS-2 product launch page ================= */
.pm-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; background: var(--black); color: #fff; overflow: hidden; }
.pm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; transform: scale(1.04); animation: pmZoom 14s ease-out forwards; }
@keyframes pmZoom { to { transform: scale(1); } }
.pm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.96) 0%, rgba(10,10,9,.55) 34%, rgba(10,10,9,.05) 62%), linear-gradient(90deg, rgba(10,10,9,.55), transparent 55%); }
.pm-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding-top: clamp(100px, 9vw, 130px); padding-bottom: clamp(24px, 3vw, 40px); }
.pm-hero-bottom { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 420px); align-items: end; justify-content: space-between; gap: 32px; }
.pm-title { font-size: clamp(110px, 17vw, 280px); font-weight: 700; letter-spacing: -.06em; line-height: .78; margin-left: -.04em; }
.pm-title i { font-style: normal; color: var(--red); }
.pm-hero-side { padding-bottom: 10px; }
.pm-name { font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; }
.pm-tag { margin-top: 10px; color: rgba(255,255,255,.7); }
.pm-hero-side .bro-act { margin-top: 24px; }
.pm-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(28px, 3vw, 48px); border-top: 1px solid rgba(255,255,255,.16); }
.pm-stats > div { padding: 20px 20px 0 0; }
.pm-stats > div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.16); }
.pm-stats b { display: block; font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.pm-stats span { color: rgba(255,255,255,.6); font-size: 14px; }
/* sticky product bar */
.pm-bar { position: sticky; top: 64px; z-index: 40; background: rgba(14,14,13,.78); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.pm-bar-in { display: flex; align-items: center; gap: 24px; height: 56px; }
.pm-bar-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.pm-bar-name i { font-style: normal; color: var(--red); }
.pm-bar-links { display: flex; gap: 26px; margin-left: auto; }
.pm-bar-links a { font-size: 14px; color: rgba(255,255,255,.65); transition: color .2s; }
.pm-bar-links a:hover { color: #fff; }
/* scrubbed statement */
.pm-state { background: var(--black); padding: clamp(96px, 11vw, 180px) 0 clamp(64px, 7vw, 110px); }
.pm-st.ab-state .w { color: rgba(255,255,255,.12); }
.pm-st.ab-state .w.on { color: #fff; }
.pm-st.ab-state .w.acc.on { color: var(--red); }
/* bento */
.pm-con { background: var(--black); padding-bottom: clamp(80px, 8vw, 128px); scroll-margin-top: 120px; }
.pm-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.pmb { --mx: 50%; --my: 50%; position: relative; overflow: hidden; isolation: isolate; grid-column: span 4; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 26px; border-radius: 26px; background: #161615; border: 1px solid rgba(255,255,255,.07); color: #fff; transition: border-color .4s; }
.pmb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(228,1,12,.22), transparent 70%); opacity: 0; transition: opacity .35s; }
.pmb:hover { border-color: rgba(228,1,12,.35); }
.pmb:hover::after { opacity: 1; }
.pmb h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.pmb p { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.5; }
.pmb-art { position: absolute; z-index: -1; top: -22px; right: -22px; width: 150px; height: 150px; fill: none; stroke: rgba(255,255,255,.08); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; transition: transform .9s var(--ease), stroke .4s; }
.pmb:hover .pmb-art { transform: rotate(-8deg) scale(1.08); stroke: rgba(228,1,12,.55); }
.pmb-main { grid-column: span 8; grid-row: span 2; justify-content: space-between; padding: 34px; background: radial-gradient(70% 60% at 55% 65%, rgba(228,1,12,.16), transparent 70%), #121211; }
.pmb-head .mono { color: var(--red); }
.pmb-head .h2 { margin-top: 10px; }
.pmb-main img { display: block; width: 92%; margin: 18px auto 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform 1.2s var(--ease); }
.pmb-main:hover img { transform: scale(1.03); }
.pmb-big { font-size: clamp(64px, 6vw, 96px); font-weight: 700; letter-spacing: -.05em; line-height: .85; margin-bottom: auto; }
.pmb-big sup { font-size: .4em; vertical-align: top; position: relative; top: .3em; }
.pmb-hot .pmb-big { background: linear-gradient(180deg, #fff 25%, #ff4a3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-bento > .pmb:nth-last-child(2), .pm-bento > .pmb:last-child { grid-column: span 6; }
.pmb-red { background: var(--red); border-color: var(--red); }
.pmb-red p { color: rgba(255,255,255,.85); }
.pmb-red::after { background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 70%); }
@media (max-width: 1100px) { .pmb, .pm-bento > .pmb:nth-last-child(2), .pm-bento > .pmb:last-child { grid-column: span 6; } .pmb-main { grid-column: 1 / -1; grid-row: auto; } .pm-hero-bottom { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pmb, .pm-bento > .pmb:nth-last-child(2), .pm-bento > .pmb:last-child { grid-column: 1 / -1; min-height: 0; } .pm-bar-links { display: none; } .pm-stats { grid-template-columns: 1fr; } .pm-stats > div + div { padding-left: 0; border-left: 0; } }
.pm-hero { min-height: 0; height: clamp(680px, 100svh, 1000px); }

/* ================= IGS-2 spec sheet: tabs + grouped rows + heat map ================= */
.igr-sec { background: var(--black); color: #fff; }
.igr-sec .igx-head .mono { color: var(--red); }
.igr-sec .igx-head p { color: rgba(255,255,255,.55); }
@keyframes igrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.igr { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.igr th, .igr td { padding: 11px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.06); }
.igr thead th { padding: 16px 8px 14px; font: 700 17px var(--sans); color: #fff; letter-spacing: -.01em; cursor: pointer; transition: background .2s, color .2s; border-bottom-color: rgba(255,255,255,.12); }
.igr thead th small { display: block; font: 500 10px var(--mono); color: rgba(255,255,255,.4); letter-spacing: .06em; margin-bottom: 3px; }
.igr thead th[data-i]:hover { background: rgba(255,255,255,.05); }
.igr thead th.on { background: var(--red); border-radius: 14px 14px 0 0; }
.igr thead th.on small { color: rgba(255,255,255,.8); }
.igr td:not(.igr-u) { color: rgba(255,255,255,.88); }
.igr td[style] { background: rgba(228,1,12,var(--h)); color: #fff; }
.igr tbody tr:not(.igr-g):hover td:not(.igr-u) { box-shadow: inset 0 0 0 999px rgba(255,255,255,.04); }
/* ================= IGS-2 model list (accordion, desktop + mobile) ================= */
.iga { border-radius: 24px; border: 1px solid rgba(255,255,255,.08); background: #121211; overflow: hidden; }
.iga-head, .iga-item > summary { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr .8fr .9fr .9fr 40px; align-items: center; gap: 12px; padding: 0 22px; }
.iga-head { height: 46px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.38); border-bottom: 1px solid rgba(255,255,255,.08); }
.iga-item { border-bottom: 1px solid rgba(255,255,255,.06); transition: background .3s; }
.iga-item:last-child { border-bottom: 0; }
.iga-item > summary { min-height: 64px; cursor: pointer; list-style: none; transition: background .25s; }
.iga-item > summary::-webkit-details-marker { display: none; }
.iga-item > summary:hover { background: rgba(255,255,255,.03); }
.iga-m { display: flex; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.iga-m small { font: 500 10.5px var(--mono); letter-spacing: .06em; color: rgba(255,255,255,.4); }
.iga-v { color: rgba(255,255,255,.85); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iga-v i { font-style: normal; font-size: 12px; color: rgba(255,255,255,.4); }
.iga-kw b { font-size: 17px; color: #fff; }
.iga-kw { color: rgba(255,255,255,.5); font-size: 12.5px; }
.iga-chev { justify-self: end; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); position: relative; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.iga-chev::before { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: translate(-50%, -50%) rotate(45deg); }
.iga-item[open] > summary .iga-chev { transform: rotate(180deg); background: var(--red); border-color: var(--red); }
.iga-item[open] { background: #181817; }
.iga-item.on > summary .iga-m { color: var(--red); }
.iga-item.on > summary { box-shadow: inset 3px 0 0 var(--red); }
.iga-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 22px 22px; animation: igrIn .4s var(--ease); }
.iga-g { padding: 16px 18px 8px; border-radius: 16px; background: #0f0f0e; border: 1px solid rgba(255,255,255,.07); }
.iga-g h4 { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.iga-g dl { margin: 0; }
.iga-g dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.iga-g dl > div:first-child { border-top: 0; }
.iga-g dt { color: rgba(255,255,255,.6); }
.iga-g dd { margin: 0; color: #fff; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iga-g dd i { font-style: normal; font-weight: 500; font-size: 11.5px; color: rgba(255,255,255,.4); }
@media (max-width: 900px) {
  .iga-head, .iga-item > summary { grid-template-columns: 1fr auto 34px; padding: 0 16px; }
  .iga-x { display: none; }
  .iga-body { grid-template-columns: 1fr; padding: 4px 12px 14px; }
}
@media (max-width: 640px) { .pm-bar-links { display: flex; gap: 16px; } .pm-bar-links a { font-size: 13px; } }

/* product hero without a scene photo: cut-out boiler on a dark stage */
.pm-hero:has(.pm-bg-cut) { background: radial-gradient(60% 70% at 72% 52%, #3a1a19 0%, #121110 55%, var(--black) 100%); }
@keyframes pmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pm-hero:has(.pm-bg-cut)::after { background: linear-gradient(0deg, rgba(10,10,9,.92) 0%, rgba(10,10,9,.2) 30%, transparent 55%); }
.igc-ticks { grid-template-columns: repeat(var(--n, 30), 1fr); }

/* bento main tile as a full photo */
.pmb-photo { padding: 34px; justify-content: flex-start; }
.pmb-photo img { position: absolute; inset: 0; z-index: -2; width: 100% !important; height: 100%; margin: 0; object-fit: cover; object-position: 55% 60%; filter: none; }
.pmb-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.35) 30%, transparent 55%); }
.pmb-photo:hover img { transform: scale(1.04); }.pmb-photo { min-height: clamp(460px, 44vw, 640px); }
.pmb-photo img { object-position: 50% 100%; }
.pmb-photo::before { background: linear-gradient(180deg, rgba(10,10,9,.9) 0%, rgba(10,10,9,.55) 26%, transparent 46%); }
.pm-hero::after { background: linear-gradient(180deg, rgba(10,10,9,.75) 0%, transparent 18%), linear-gradient(0deg, rgba(10,10,9,.96) 0%, rgba(10,10,9,.55) 34%, rgba(10,10,9,.05) 62%), linear-gradient(90deg, rgba(10,10,9,.55), transparent 55%); }
/* ================= IBS: series switch + boiler photo stage ================= */
.igc-unit:not(.on), .ibs-list:not(.on) { display: none; }
.igc-unit.on, .ibs-list.on { animation: igrIn .45s var(--ease); }
.ibs-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-top: clamp(28px, 3vw, 44px); border-radius: 18px; background: #151514; border: 1px solid rgba(255,255,255,.08); }
.igx-all .ibs-switch { margin: 0 0 14px; }
.ibs-switch button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 190px; padding: 12px 18px; border: 0; border-radius: 13px; background: transparent; color: rgba(255,255,255,.6); font: 600 16px var(--sans); text-align: left; cursor: pointer; transition: background .3s, color .3s; }
.ibs-switch button small { font: 500 11px var(--mono); letter-spacing: .05em; color: inherit; opacity: .75; }
.ibs-switch button:hover { color: #fff; }
.ibs-switch button.on { background: var(--red); color: #fff; box-shadow: 0 10px 28px rgba(228,1,12,.3); }
.ibs-body { grid-template-columns: 1fr; }
.ibs-body dl { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
.ibs-body dl > div:nth-child(-n+3) { border-top: 0; }
.pmb-tall img { object-position: 50% 22%; }
@media (max-width: 900px) { .ibs-body dl { grid-template-columns: 1fr; } .ibs-body dl > div:nth-child(-n+3) { border-top: 1px solid rgba(255,255,255,.06); } .ibs-body dl > div:first-child { border-top: 0; } .ibs-switch { display: grid; width: 100%; } .ibs-switch button { min-width: 0; } }
.igc-unit .igc-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.pmb-tall { background: radial-gradient(70% 90% at 75% 50%, rgba(228,1,12,.18), transparent 70%), #121211; }
.pmb-tall img { left: auto !important; right: 0; width: 56% !important; object-position: 50% 24%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.pmb-tall::before { display: none; }
.pmb-tall .pmb-head { max-width: 46%; }
@media (max-width: 640px) { .pmb-tall { min-height: 520px; } .pmb-tall img { width: 100% !important; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); } .pmb-tall .pmb-head { max-width: none; } }
/* IBS bento: show the whole boiler (full photo height, right side) */
.pmb-tall { min-height: clamp(520px, 46vw, 680px); }
.pmb-tall img { top: 0; bottom: 0; right: 0; left: auto !important; height: 100% !important; width: auto !important; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%); mask-image: linear-gradient(90deg, transparent 0%, #000 20%); }
.pmb-tall:hover img { transform: none; }
@media (max-width: 640px) { .pmb-tall { min-height: 600px; } .pmb-tall img { width: 100% !important; height: auto !important; top: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%); } }
/* ================= ISBS: standards + materials ================= */
.isb-sec { border-top: 1px solid rgba(255,255,255,.06); }
.isb-stds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.isb-std { position: relative; padding: 22px 22px 24px; border-radius: 20px; background: #151514; border: 1px solid rgba(255,255,255,.07); transition: border-color .3s; }
.isb-std:hover { border-color: rgba(228,1,12,.4); }
.isb-std b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.isb-std .mono { position: absolute; top: 24px; right: 22px; color: var(--red); }
.isb-std p { margin-top: 10px; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.5; }
.isb-mh { margin: clamp(40px, 4vw, 64px) 0 14px; font-size: 22px; font-weight: 600; color: #fff; }
.isb-twrap { overflow-x: auto; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #121211; }
.isb-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.isb-t th, .isb-t td { padding: 13px 18px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.isb-t thead th { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.isb-t tbody th { font-weight: 600; color: #fff; }
.isb-t td:first-child { color: var(--red); font: 600 12px var(--mono); width: 40px; }
.isb-t tbody tr:last-child th, .isb-t tbody tr:last-child td { border-bottom: 0; }
.isb-t tbody tr:hover { background: rgba(255,255,255,.03); }
@media (max-width: 900px) { .isb-stds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .isb-stds { grid-template-columns: 1fr; } }
/* ================= İstehsalat hub ================= */
.ph-title { font-size: clamp(64px, 11vw, 190px); }
.ph-sec { background: var(--black); color: #fff; padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 7vw, 112px); scroll-margin-top: 80px; }
.ph-sec .igx-head .mono { color: var(--red); }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.phc { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #141413; border: 1px solid rgba(255,255,255,.07); transition: border-color .4s, transform .6s var(--ease); }
.phc:hover { border-color: rgba(228,1,12,.45); transform: translateY(-4px); }
.phc-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #d9d7d3; }
.phc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.phc:hover .phc-img img { transform: scale(1.05); }
.phc-img img[src*="ibs-studio"] { object-position: 50% 30%; }
.phc-n { position: absolute; top: 18px; left: 18px; padding: 6px 10px; border-radius: 100px; background: rgba(14,14,13,.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.phc-body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; padding: 26px 28px 28px; }
.phc-code { grid-column: 1; font-size: clamp(38px, 3.6vw, 58px); font-weight: 700; letter-spacing: -.04em; line-height: .95; }
.phc-code i { font-style: normal; color: var(--red); }
.phc-name { grid-column: 1; color: rgba(255,255,255,.62); font-size: 15.5px; }
.phc-specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.phc-specs > span { padding: 14px 12px 0 0; color: rgba(255,255,255,.5); font-size: 12.5px; }
.phc-specs > span + span { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.1); }
.phc-specs b { display: block; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.phc-go { grid-column: 2; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; border: 1px solid rgba(255,255,255,.2); font-size: 14px; font-weight: 600; transition: background .3s, border-color .3s; }
.phc:hover .phc-go { background: var(--red); border-color: var(--red); }
.ph-ov { padding-top: 0; }
.ph-t tbody tr { cursor: pointer; }
.ph-t th a { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.ph-t th a i { font-style: normal; color: var(--red); }
.ph-t td b { color: #fff; }
.ph-t tbody tr:hover th a { color: var(--red); }
@media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .phc-body { grid-template-columns: 1fr; } .phc-go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; } .phc-specs b { font-size: 15px; } }.phc-go .ar, .phc-go svg { width: 16px; height: 16px; flex: none; }
.phc-go { padding: 11px 18px; }
.phc-img img[src*="ibs-studio"] { object-fit: contain; object-position: 50% 50%; background: linear-gradient(90deg, #8f9196 0%, #c9cbcf 18%, #c9cbcf 82%, #8f9196 100%); }
/* ================= Projects blog ================= */
.bl-hero { background: var(--black); color: #fff; padding: clamp(120px, 11vw, 160px) 0 clamp(28px, 3vw, 44px); }
.bl-hero-row { display: grid; grid-template-columns: auto minmax(0, 420px); align-items: end; justify-content: space-between; gap: 32px; margin-top: clamp(28px, 3vw, 48px); }
.bl-h { font-size: clamp(64px, 11vw, 180px); font-weight: 700; letter-spacing: -.06em; line-height: .82; }
.bl-h i { font-style: normal; color: var(--red); }
.bl-sub { color: rgba(255,255,255,.62); font-size: 17px; padding-bottom: 8px; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 3vw, 48px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.bl-chips button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: rgba(255,255,255,.7); font: 500 14px var(--sans); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.bl-chips button span { font: 500 11px var(--mono); opacity: .6; }
.bl-chips button:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.bl-chips button.on { background: var(--red); border-color: var(--red); color: #fff; }
.bl-sec { background: var(--black); color: #fff; padding: clamp(24px, 3vw, 40px) 0 clamp(80px, 8vw, 128px); }
.bl-label { display: block; color: var(--red); margin-bottom: 14px; }
.bl-card { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #141413; border: 1px solid rgba(255,255,255,.07); transition: border-color .4s, transform .6s var(--ease); }
.bl-card:hover { border-color: rgba(228,1,12,.45); transform: translateY(-4px); }
.bl-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #222; }
.bl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bl-card:hover .bl-img img { transform: scale(1.05); }
.bl-txt { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.bl-meta { color: rgba(255,255,255,.45); }
.bl-t { font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.bl-lead { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 600; color: #fff; }
.bl-go .ar { width: 16px; height: 16px; transition: transform .3s; }
.bl-card:hover .bl-go { color: var(--red); }
.bl-card:hover .bl-go .ar { transform: translateX(4px); }
.bl-feat { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.bl-feat .bl-img { aspect-ratio: auto; min-height: 420px; }
.bl-feat .bl-txt { justify-content: flex-end; padding: clamp(28px, 3vw, 44px); }
.bl-feat .bl-t { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; }
.bl-feat .bl-lead { -webkit-line-clamp: 5; font-size: 16px; }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.bl-grid:empty { display: none; }
.bl-none { color: rgba(255,255,255,.5); margin-top: 20px; }
.bl-card.bl-hide { display: none; }
/* post */
.po-hero { position: relative; min-height: clamp(520px, 78vh, 760px); display: flex; background: var(--black); color: #fff; overflow: hidden; }
.po-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.po-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,9,.7) 0%, rgba(10,10,9,.15) 30%, rgba(10,10,9,.92) 100%); }
.po-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding-top: clamp(100px, 9vw, 130px); padding-bottom: clamp(40px, 4vw, 64px); }
.po-cat { margin-top: auto; align-self: flex-start; padding: 7px 12px; border-radius: 100px; background: var(--red); color: #fff; }
.po-t { margin-top: 18px; max-width: 18ch; font-size: clamp(40px, 5.6vw, 88px); font-weight: 700; letter-spacing: -.04em; line-height: .98; }
.po { background: var(--black); color: #fff; }
.po-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 6vw, 110px); padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }
.po-lead { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 28px; }
.po-body p:not(.po-lead) { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.75; margin-bottom: 18px; max-width: 64ch; }
.po-back { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: rgba(255,255,255,.7); font-weight: 600; font-size: 14px; }
.po-back .ar { width: 16px; height: 16px; transform: rotate(180deg); }
.po-back:hover { color: var(--red); }
.po-facts { position: sticky; top: 100px; align-self: start; padding: 22px 24px; border-radius: 22px; background: #141413; border: 1px solid rgba(255,255,255,.08); }
.po-facts dl { margin: 0; }
.po-facts dl > div { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); }
.po-facts dl > div:first-child { border-top: 0; padding-top: 0; }
.po-facts dt { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.po-facts dd { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
.po-more { border-top: 1px solid rgba(255,255,255,.06); padding-top: clamp(48px, 5vw, 72px); }
.po-more .bl-grid { margin-top: 0; }
@media (max-width: 1000px) { .bl-feat { grid-template-columns: 1fr; } .bl-feat .bl-img { min-height: 0; aspect-ratio: 16 / 10; } .bl-grid { grid-template-columns: 1fr 1fr; } .po-grid { grid-template-columns: 1fr; } .po-facts { position: static; } .bl-hero-row { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .bl-grid { grid-template-columns: 1fr; } }
/* blog article extras */
.po-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; color: rgba(255,255,255,.65); }
.po-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 22px 2px -12px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.po-body h2 { margin: 40px 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; scroll-margin-top: 110px; }
.po-toc .mono { display: block; color: var(--red); margin-bottom: 12px; }
.po-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.po-toc li { counter-increment: toc; border-top: 1px solid rgba(255,255,255,.08); }
.po-toc li:first-child { border-top: 0; }
.po-toc a { display: flex; gap: 12px; padding: 12px 0; color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.4; transition: color .2s; }
.po-toc a::before { content: counter(toc, decimal-leading-zero); font: 600 11px var(--mono); color: rgba(255,255,255,.35); padding-top: 3px; }
.po-toc a:hover { color: #fff; }
.po-toc a:hover::before { color: var(--red); }
/* ================= Certification ================= */
.cer-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cer-c { --mx: 50%; --my: 50%; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 28px 28px 30px; min-height: 300px; border-radius: 26px; background: #141413; border: 1px solid rgba(255,255,255,.07); transition: border-color .4s; }
.cer-c::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(228,1,12,.2), transparent 70%); opacity: 0; transition: opacity .35s; }
.cer-c:hover { border-color: rgba(228,1,12,.4); } .cer-c:hover::after { opacity: 1; }
.cer-iso { color: var(--red); }
.cer-n { display: inline; font-size: clamp(56px, 5vw, 84px); font-weight: 700; letter-spacing: -.05em; line-height: .9; margin-top: 6px; }
.cer-y { color: rgba(255,255,255,.4); margin-top: 6px; }
.cer-tag { position: absolute; top: 26px; right: 24px; padding: 5px 10px; border-radius: 100px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); font-size: 11.5px; }
.cer-c h3 { margin-top: auto; padding-top: 26px; font-size: 18px; font-weight: 600; }
.cer-c p { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.55; }
.cer-proc { padding-top: 0; }
.cer-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: s; }
.cer-s { position: relative; padding: 24px 22px 26px; border-radius: 22px; background: #141413; border: 1px solid rgba(255,255,255,.07); }
.cer-s::before { content: ""; position: absolute; top: 40px; left: 72px; right: -13px; height: 1px; background: linear-gradient(90deg, rgba(228,1,12,.6), transparent); }
.cer-s:last-child::before { display: none; }
.cer-sn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); font: 700 13px var(--mono); }
.cer-s h3 { margin-top: 22px; font-size: 17px; font-weight: 600; }
.cer-s p { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 13.5px; line-height: 1.5; }
.cer-ben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cer-bl { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.cer-bl li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.cer-bl b { font-size: 19px; font-weight: 600; }
.cer-bl p { color: rgba(255,255,255,.62); font-size: 15px; }
@media (max-width: 1100px) { .cer-grid { grid-template-columns: 1fr 1fr; } .cer-steps { grid-template-columns: 1fr 1fr; } .cer-s::before { display: none; } .cer-ben { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cer-grid, .cer-steps { grid-template-columns: 1fr; } .cer-bl li { grid-template-columns: 1fr; gap: 6px; } }
/* ================= Contact ================= */
.ct-hero { padding-bottom: clamp(40px, 4vw, 64px); }
.ct-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.ct-card { --mx: 50%; --my: 50%; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 210px; padding: 24px; border-radius: 24px; background: #141413; border: 1px solid rgba(255,255,255,.08); color: #fff; transition: border-color .35s, transform .5s var(--ease); }
.ct-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(228,1,12,.22), transparent 70%); opacity: 0; transition: opacity .3s; }
.ct-card:hover { border-color: rgba(228,1,12,.45); } .ct-card:hover::after { opacity: 1; }
a.ct-card:hover { transform: translateY(-4px); }
.ct-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(228,1,12,.12); box-shadow: inset 0 0 0 1px rgba(228,1,12,.3); }
.ct-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-l { margin-top: auto; padding-top: 26px; color: rgba(255,255,255,.45); }
.ct-v { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.ct-arr { position: absolute; top: 24px; right: 24px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.ct-arr .ar { width: 15px; height: 15px; transform: rotate(-45deg); }
a.ct-card:hover .ct-arr { background: var(--red); border-color: var(--red); }
.ct-copy { position: absolute; top: 24px; right: 24px; height: 32px; padding: 0 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: rgba(255,255,255,.8); font: 600 12px var(--sans); cursor: pointer; transition: background .25s, border-color .25s; }
.ct-copy:hover, .ct-copy.done { background: var(--red); border-color: var(--red); color: #fff; }
.ct-sec { border-top: 1px solid rgba(255,255,255,.06); padding-top: clamp(56px, 6vw, 96px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ct-form .igx-head .mono { color: var(--red); } .ct-form .igx-head p { color: rgba(255,255,255,.55); }
.ct-topics { border: 0; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-topics legend { color: rgba(255,255,255,.45); margin-bottom: 12px; }
.ct-topics label { cursor: pointer; }
.ct-topics input { position: absolute; opacity: 0; pointer-events: none; }
.ct-topics span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.72); font-size: 14px; transition: background .25s, border-color .25s, color .25s; }
.ct-topics label:hover span { border-color: rgba(255,255,255,.4); color: #fff; }
.ct-topics input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.ct-topics input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-f { position: relative; display: block; margin-bottom: 12px; }
.ct-f input, .ct-f textarea { width: 100%; padding: 26px 18px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: #141413; color: #fff; font: 500 16px var(--sans); outline: none; resize: vertical; transition: border-color .25s, background .25s; }
.ct-f textarea { min-height: 150px; }
.ct-f span { position: absolute; left: 19px; top: 18px; color: rgba(255,255,255,.45); font-size: 15px; pointer-events: none; transition: top .2s, font-size .2s, color .2s; }
.ct-f input:focus, .ct-f textarea:focus { border-color: var(--red); background: #181817; }
.ct-f input:focus + span, .ct-f input:not(:placeholder-shown) + span, .ct-f textarea:focus + span, .ct-f textarea:not(:placeholder-shown) + span { top: 8px; font-size: 11.5px; color: rgba(255,255,255,.6); }
.ct-f em { display: none; margin: 6px 0 0 4px; font-style: normal; font-size: 12.5px; color: #ff4a3d; }
.ct-f.err input, .ct-f.err textarea { border-color: #ff4a3d; }
.ct-f.err em { display: block; }
.ct-send { margin-top: 10px; }
.ct-side { display: grid; gap: 12px; position: sticky; top: 110px; }
.ct-box { padding: 26px; border-radius: 24px; background: #141413; border: 1px solid rgba(255,255,255,.08); }
.ct-box h3 { font-size: 20px; font-weight: 600; }
.ct-box p { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 14.5px; }
.ct-big { display: block; margin: 20px 0 16px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.02em; color: #fff; transition: color .2s; }
.ct-big:hover { color: var(--red); }
.ct-wa { width: 100%; justify-content: center; }
.ct-wa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-stl { color: var(--red); }
.ct-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.ct-steps li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ct-steps li:first-child { border-top: 0; }
.ct-steps b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(228,1,12,.14); color: var(--red); font: 700 12px var(--mono); }
.ct-steps strong { display: block; font-size: 15px; color: #fff; }
.ct-steps span { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.45; }
@media (max-width: 1100px) { .ct-cards { grid-template-columns: 1fr 1fr; } .ct-grid { grid-template-columns: 1fr; } .ct-side { position: static; } }
@media (max-width: 600px) { .ct-cards, .ct-row { grid-template-columns: 1fr; } .ct-card { min-height: 170px; } }.ct-soc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ct-soc a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; transition: background .25s, border-color .25s, color .25s; }
.ct-soc a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.ct-soc svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-v a { color: inherit; } .ct-v a:hover { color: var(--red); }

/* ================= Legal pages ================= */
.lg-hero { padding-bottom: clamp(32px, 3vw, 48px); border-bottom: 1px solid rgba(255,255,255,.06); }
.lg-h { margin-top: clamp(28px, 3vw, 48px); font-size: clamp(48px, 7.5vw, 120px); font-weight: 700; letter-spacing: -.05em; line-height: .92; }
.lg-h i { font-style: normal; color: var(--red); }
.lg-upd { display: inline-block; margin-top: 22px; padding: 7px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
.lg .po-body h2 { display: flex; gap: 14px; align-items: baseline; }
.lg .po-body h2 span { font: 600 13px var(--mono); color: var(--red); }
.lg .po-body p:not(.po-lead) { max-width: 72ch; }.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-msg { margin: 6px 0 4px; padding: 14px 18px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.ct-msg.ok { background: rgba(36,160,90,.14); border: 1px solid rgba(36,160,90,.5); color: #b9f0cf; }
.ct-msg.bad { background: rgba(228,1,12,.12); border: 1px solid rgba(228,1,12,.5); color: #ffc2bd; }
.ct-send:disabled { opacity: .6; cursor: wait; }
/* ================= 404 ================= */
.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: radial-gradient(60% 60% at 70% 40%, #2a1514 0%, var(--black) 70%); color: #fff; padding: 120px 0 80px; }
.nf-l { color: var(--red); }
.nf-h { margin: 14px 0 8px; font-size: clamp(120px, 22vw, 340px); font-weight: 700; letter-spacing: -.07em; line-height: .8; }
.nf-h i { font-style: normal; color: var(--red); }
.nf-t { max-width: 46ch; font-size: clamp(18px, 1.6vw, 22px); color: rgba(255,255,255,.75); margin-top: 18px; }
.nf-en { margin-top: 8px; color: rgba(255,255,255,.4); font-size: 14px; }
.nf .bro-act { margin-top: 28px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.nf-links a { color: rgba(255,255,255,.6); font-size: 14px; } .nf-links a:hover { color: var(--red); }
/* ================= Cookie consent ================= */
.ck-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; display: flex; align-items: flex-end; gap: 24px; max-width: 1100px; margin: 0 auto; padding: 20px 22px; border-radius: 22px; background: rgba(20,20,19,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.5); color: #fff; animation: ckIn .5s var(--ease); }
.ck-bar[hidden] { display: none; }
@keyframes ckIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ck-main { flex: 1; min-width: 0; }
.ck-t { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.ck-main p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5; }
.ck-main p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ck-opts { display: grid; gap: 8px; margin-top: 14px; }
.ck-opts[hidden] { display: none; }
.ck-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.ck-opt input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
.ck-opt b { display: block; font-size: 14px; } .ck-opt small { display: block; color: rgba(255,255,255,.55); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.ck-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ck-b { height: 42px; padding: 0 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; font: 600 13.5px var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.ck-b:hover { border-color: rgba(255,255,255,.5); }
.ck-b[hidden] { display: none; }
.ck-all, .ck-save { background: var(--red); border-color: var(--red); }
.ck-all:hover, .ck-save:hover { background: #fff; color: var(--black); border-color: #fff; }
.ft-ck { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ft-ck:hover { color: var(--red); }
@media (max-width: 760px) { .ck-bar { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; padding: 18px; } .ck-btns { justify-content: stretch; } .ck-b { flex: 1 1 45%; } }.ct-nt { margin: 6px 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: #121211; }
.ct-nt summary { padding: 12px 16px; cursor: pointer; color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ct-nt summary::-webkit-details-marker { display: none; }
.ct-nt summary::after { content: "+"; color: var(--red); font-size: 18px; line-height: 1; }
.ct-nt[open] summary::after { content: "−"; }
.ct-nt p { padding: 0 16px 14px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.55; }
.ct-nt p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ct-agree { display: grid; grid-template-columns: 20px 1fr; gap: 4px 12px; align-items: start; margin-bottom: 8px; cursor: pointer; }
.ct-agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
.ct-agree span { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.45; }
.ct-agree em { grid-column: 2; display: none; font-style: normal; font-size: 12.5px; color: #ff4a3d; }
.ct-agree.err em { display: block; } .ct-agree.err span { color: #ffc2bd; }