/* Page sections & components */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.row-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* who we are media */
.media-stack { position: relative; }
.media-stack .tile.tall { aspect-ratio: 4 / 4.6; border-radius: var(--r-xl); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8); }
.float-card { position: absolute; left: -24px; bottom: 32px; padding: 20px 24px; display: grid; gap: 4px; }
.float-card b { font: 500 3rem/1 var(--font-display); }
.float-card span { font: 600 0.72rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }

/* categories */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.cat-grid .tile { aspect-ratio: 4 / 3.6; }
.cat-grid .tile:nth-child(1) { grid-row: span 2; aspect-ratio: auto; }

/* product rail */
.rail { overflow-x: auto; overflow-y: hidden; padding: 10px 0 30px; scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail-track { display: flex; gap: 20px; padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2); width: max-content; }
.rail .pcard { width: clamp(250px, 24vw, 310px); scroll-snap-align: start; }

/* product card */
.pcard { border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.pcard .pimg { display: block; aspect-ratio: 4 / 4.4; overflow: hidden; margin: 8px 8px 0; border-radius: calc(var(--r-lg) - 6px); background: var(--navy-700); }
.pcard .pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; }
.pcard:hover .pimg img { transform: scale(1.07); }
.pcard .pbody { padding: 18px 20px 20px; display: grid; gap: 6px; align-content: start; }
.pcard small { font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.pcard h3 { font-size: 1.45rem; }
.pcard p { margin: 0; font-size: 0.88rem; }
.pcard .fabric { color: var(--text-3); font-size: 0.82rem; }
.pacts { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
.qlink { font: 700 0.76rem/1 var(--font-ui); letter-spacing: 0.08em; color: var(--gold-light); }
.qlink:hover { color: var(--gold); }

/* md teaser */
.md-teaser { display: grid; grid-template-columns: 0.8fr 1.2fr; overflow: hidden; border-radius: var(--r-xl); }
.md-photo { position: relative; min-height: 420px; background: linear-gradient(145deg, #243044, #121a26); }
.md-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.md-photo.img-fallback::before, .letter .ph.img-fallback::before { content: 'AA'; position: absolute; inset: 0; display: grid; place-items: center; font: 500 clamp(4rem, 9vw, 7rem)/1 var(--font-display); color: rgba(201, 169, 110, 0.55); letter-spacing: 0.06em; }
.letter .ph { position: relative; }
.md-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(14, 20, 29, 0.6)); }
.md-body { padding: clamp(28px, 5vw, 64px); }
blockquote { margin: 0 0 18px; font: 500 italic clamp(1.4rem, 2.2vw, 2rem)/1.35 var(--font-display); color: var(--text); border-left: 2px solid var(--gold); padding-left: 22px; }
.sign { display: grid; gap: 2px; margin-top: 8px; }
.sign b { font: 500 1.6rem/1 var(--font-display); color: var(--gold-light); }
.sign span { font-size: 0.84rem; color: var(--text-3); }

/* parallax band */
.parallax-band { overflow: hidden; }
.band-bg { position: absolute; inset: -14% 0; background-size: cover; background-position: center; z-index: -1; opacity: 0.35; }
.band-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy-850), rgba(14, 20, 29, 0.55) 30%, rgba(14, 20, 29, 0.55) 70%, var(--navy-850)); }

/* solutions summary cards */
.sol-card { padding: 10px 10px 24px; }
.sol-card > :not(.sol-img):not(.sheen) { padding-inline: 14px; }
.sol-img { aspect-ratio: 16 / 11; overflow: hidden; border-radius: calc(var(--r-lg) - 8px); margin-bottom: 8px; background: var(--navy-700); }
.sol-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sol-card:hover .sol-img img { transform: scale(1.07); }
.sol-card .tag { font: 700 0.66rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.sol-card h3 { font-size: 1.35rem; }

/* QA & advantages */
.qa-panel { padding: clamp(28px, 4vw, 48px); align-self: start; }
.qa-panel .ticks { margin-top: 20px; }
.adv-list { display: grid; gap: 12px; }
.adv { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 20px; border-radius: var(--r-md); }
.adv b { font: 500 1.5rem/1 var(--font-display); color: var(--gold); }
.adv h4 { font: 700 0.98rem/1.3 var(--font-ui); margin: 0 0 6px; }
.adv p { margin: 0; font-size: 0.88rem; }

/* systems teaser */
.sys-card h3 { font-size: 1.7rem; margin-bottom: 6px; }
.sys-card .link { color: var(--gold-light); font: 700 0.8rem/1 var(--font-ui); letter-spacing: 0.08em; margin-top: 8px; }
.s5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.s5 div { padding: 14px 10px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; display: grid; gap: 4px; }
.s5 b { font: 500 1.8rem/1 var(--font-display); color: var(--gold-light); }
.s5 span { font: 700 0.62rem/1.2 var(--font-ui); letter-spacing: 0.1em; }
.s5 small { font-size: 0.72rem; color: var(--text-3); }
.p7 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p7 span { padding: 8px 12px; border-radius: 999px; font: 600 0.76rem/1 var(--font-ui); background: rgba(201, 169, 110, 0.08); box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.28) inset; color: var(--text-2); }
.p7 em { font: italic 500 1.1rem/1.1 var(--font-display); color: var(--gold-light); margin-left: 6px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(16px, 2vw, 24px); align-items: start; }
.contact-info, .contact-form-wrap { padding: clamp(26px, 4vw, 48px); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.info-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.info-list small { font: 700 0.68rem/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.info-list p { margin: 6px 0 6px; color: var(--text); }
.info-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.map-frame { margin-top: 24px; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--line); }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05) brightness(0.9); }

/* ---------- About ---------- */
.mv-grid .card h3 { font-size: 2rem; }
.tl-section { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 130px) 0; }
#timeline { overflow: hidden; }
.tl-track { display: flex; gap: 22px; width: max-content; padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2); position: relative; }
.tl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; }
.tl-item { width: clamp(280px, 30vw, 380px); padding: 30px; display: grid; gap: 10px; align-content: start; }
.tl-item b { font: 500 3.6rem/1 var(--font-display); }
.tl-item h3 { font-size: 1.6rem; }
.tl-item p { margin: 0; }
#timeline.tl-static { overflow-x: auto; scrollbar-width: none; }

/* ---------- MD page ---------- */
.letter { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.letter .portrait { position: sticky; top: calc(var(--header-h) + 40px); padding: 10px; border-radius: var(--r-xl); }
.letter .portrait .ph { aspect-ratio: 4 / 5; border-radius: calc(var(--r-xl) - 8px); overflow: hidden; background: linear-gradient(145deg, #243044, #121a26); }
.letter .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.letter .portrait .cap { padding: 18px 12px 8px; }
.letter-body { padding: clamp(28px, 5vw, 60px); }
.letter-body p { font-size: 1.1rem; line-height: 1.85; color: var(--text); }
.letter-body .salute { font: italic 500 1.8rem/1.2 var(--font-display); color: var(--gold-light); }
.pillars3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; }
.pillars3 div { padding: 18px; border-radius: 16px; background: rgba(201, 169, 110, 0.08); box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.25) inset; }
.pillars3 b { display: block; font: 500 1.35rem/1.1 var(--font-display); color: var(--gold-light); }
.pillars3 span { font-size: 0.85rem; color: var(--text-2); }

/* ---------- Solutions page ---------- */
.sol-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(60px, 9vw, 120px); }
.sol-row.flip .sol-media { order: 2; }
.sol-media { position: relative; }
.sol-media .tile { aspect-ratio: 5 / 4; border-radius: var(--r-xl); }
.sol-num { position: absolute; top: 18px; left: 18px; padding: 14px 18px; font: 500 2rem/1 var(--font-display); color: var(--gold-light); }
.sol-text { padding: clamp(26px, 4vw, 48px); }
.caps-h { font: 700 0.72rem/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 22px 0 14px; }

/* ---------- Systems page ---------- */
.s5-steps { display: grid; gap: 14px; counter-reset: s; position: relative; }
.s5-step { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; padding: 22px 26px; }
.s5-n { font: 500 3.6rem/1 var(--font-display); }
.s5-step small { font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.24em; color: var(--gold); }
.s5-step h3 { font-size: 1.8rem; margin: 6px 0; }
.s5-step p { margin: 0; }
.orbit { position: relative; width: min(980px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbit::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(201, 169, 110, 0.35); animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px; }
.orbit-core small { font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); }
.orbit-core b { font: 500 clamp(1.6rem, 3vw, 2.6rem)/1 var(--font-display); }
.orbit-item { position: absolute; left: 50%; top: 50%; width: clamp(180px, 22%, 230px); padding: 18px; transform: translate(-50%, -50%) rotate(var(--a)) translateX(min(36vw, 355px)) rotate(calc(-1 * var(--a))); }
.orbit-item.in { transform: translate(-50%, -50%) rotate(var(--a)) translateX(min(36vw, 355px)) rotate(calc(-1 * var(--a))); }
.orbit-item b { font: 500 1.1rem/1 var(--font-display); color: var(--gold); }
.orbit-item h3 { font-size: 1.2rem; margin: 6px 0; }
.orbit-item p { font-size: 0.8rem; margin: 0; }

/* ---------- Gallery ---------- */
.gallery-grid { columns: 3 300px; column-gap: 20px; }
.g-item { position: relative; display: block; break-inside: avoid; margin-bottom: 20px; border-radius: var(--r-lg); overflow: hidden; }
.g-item .tile { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.g-item:nth-child(3n + 1) .tile { aspect-ratio: 4 / 5; }
.g-item .cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; border-radius: 16px; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.g-item .cap small { font: 700 0.64rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.g-item .cap h3 { font-size: 1.4rem; margin: 4px 0; }
.g-item .cap p { margin: 0; font-size: 0.82rem; }
.g-item .arrow { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); transition: all 0.4s var(--ease); }
.g-item:hover .arrow { background: var(--gold); color: #1a1408; transform: rotate(-45deg); }
.g-item:hover img { transform: scale(1.06); }

/* ---------- Catalogue ---------- */
.cat-bar { position: sticky; top: calc(var(--header-h) + 24px); z-index: 20; padding: 12px; margin-bottom: 30px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border-radius: 20px; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar .chip { flex-shrink: 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.prod-layout { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.prod-side { position: sticky; top: calc(var(--header-h) + 40px); padding: 30px; display: grid; gap: 16px; }
.prod-side h3 { font-size: 1.6rem; }
.prod-side .chips { margin-top: 4px; }
.prod-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orbit { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .orbit::before { display: none; }
  .orbit-core { position: relative; left: auto; top: auto; transform: none; width: auto; aspect-ratio: auto; border-radius: var(--r-lg); padding: 30px; grid-column: 1 / -1; }
  .orbit-item, .orbit-item.in { position: relative; left: auto; top: auto; transform: none; width: auto; }
}
@media (max-width: 980px) {
  .split, .md-teaser, .contact-grid, .letter, .sol-row, .prod-layout { grid-template-columns: 1fr; }
  .sol-row.flip .sol-media { order: 0; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid .tile:nth-child(1) { grid-row: auto; aspect-ratio: 4 / 3.6; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter .portrait, .prod-side { position: relative; top: auto; }
  .md-photo { min-height: 360px; }
  .float-card { left: 16px; }
}
@media (max-width: 640px) {
  .cat-grid, .product-grid, .orbit, .pillars3 { grid-template-columns: 1fr; }
  .s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .s5 small { display: none; }
  .s5-step { grid-template-columns: 1fr; gap: 6px; }
  .row-head { align-items: start; }
  .rail .pcard { width: 78vw; }
  .md-body blockquote { font-size: 1.3rem; }
}