:root {
  --navy: #041a38;
  --navy-2: #072958;
  --blue: #075fb9;
  --cyan: #4bb8eb;
  --gold: #d4ad67;
  --ink: #092342;
  --muted: #66778b;
  --paper: #f3f7fa;
  --line: rgba(7, 43, 82, .14);
  --ease: cubic-bezier(.2, .76, .24, 1);
  --content: min(1640px, calc(100vw - 9vw));

  /* D4 typography contract: one responsive scale shared by home + inner pages. */
  --type-hero: clamp(58px, 4.6vw, 88px);
  --type-inner-h1: clamp(44px, 3.6vw, 64px);
  --type-section-h2: clamp(42px, 3.45vw, 64px);
  --type-page-h2: clamp(30px, 2.75vw, 48px);
  --type-body: clamp(15px, .9vw, 17px);
  --type-meta: clamp(11px, .68vw, 13px);
}

/*
 * D4 breakpoint contract
 * phone < 768 | tablet <= 1199 | desktop >= 1200
 * standard desktop 1366-1679 | wide >= 1680 | ultrawide >= 2400.
 * Component-specific breakpoints are kept only where the layout actually changes.
 */
@media (max-width: 1199px) {
  :root {
    --type-hero: clamp(38px, 10vw, 52px);
    --type-inner-h1: clamp(34px, 8.4vw, 48px);
    --type-section-h2: clamp(32px, 7.6vw, 44px);
    --type-page-h2: clamp(28px, 6.5vw, 38px);
    --type-body: clamp(14px, 3.8vw, 16px);
    --type-meta: 12px;
  }
}
@media (min-width: 1680px) {
  :root {
    --type-hero: clamp(68px, 4.25vw, 88px);
    --type-inner-h1: clamp(50px, 3.15vw, 64px);
    --type-section-h2: clamp(48px, 3.15vw, 64px);
  }
}

* { box-sizing: border-box; }
img.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0; background: #fff; color: var(--ink); overflow-x: hidden;
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
section, footer { position: relative; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

.page-loader { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; background: var(--navy); color: #fff; animation: loader-exit 1.05s var(--ease) 1.05s forwards; pointer-events: none; }
.loader-mark { display: flex; align-items: center; gap: 18px; animation: loader-mark 1s var(--ease) both; }
.loader-mark > span:last-child { font-size: 28px; font-weight: 800; letter-spacing: .18em; }
.page-loader > i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--cyan); animation: loader-line .9s var(--ease) both; }
@keyframes loader-line { from { width: 0; } to { width: 100%; } }
@keyframes loader-mark { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes loader-exit { to { transform: translateY(-101%); visibility: hidden; } }

.scroll-progress { position: fixed; z-index: 250; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cyan), #e9f8ff, var(--gold)); box-shadow: 0 0 16px #47b9ef; transform: scaleX(0); transform-origin: left center; transition: transform .06s linear; will-change: transform; }
[data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .85s ease, transform .95s var(--ease), clip-path 1.1s var(--ease); }
[data-reveal="left"] { transform: translateX(-58px); }
[data-reveal="right"] { transform: translateX(58px); }
[data-reveal="scale"] { transform: scale(.94); }

.eyebrow { display: flex; gap: 13px; margin: 0 0 24px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow > span { width: 38px; height: 1px; background: currentColor; }
.eyebrow.dark { color: var(--blue); }
.eyebrow.light { color: #82ccf4; }
h1, h2 { margin: 0; font-weight: 650; line-height: 1.03; letter-spacing: -.052em; }
h1 em, h2 em { font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif; font-style: italic; font-weight: 500; letter-spacing: -.045em; }

.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { position: relative; width: 47px; aspect-ratio: 1; display: grid; place-items: center; color: currentColor; border: 1px solid currentColor; border-radius: 15px 7px 15px 7px; transform: rotate(30deg); }
.brand-mark::before { content: ""; position: absolute; inset: 6px; border: 1px solid currentColor; border-radius: 10px 5px 10px 5px; }
.brand-mark span { transform: rotate(-30deg); font-size: 11px; font-weight: 800; letter-spacing: -.06em; }
.brand-type { display: flex; flex-direction: column; }
.brand-type strong {font-size: 20px;line-height: 1.1;font-weight: 800;letter-spacing: .055em;}
.brand-type small {margin-top: 6px;color: #6d7c8e;font-size: var(--type-meta);line-height: 1;font-weight: 600;letter-spacing: .08em;text-transform: uppercase;font-size: 10px;}

.site-header { position: fixed; inset: 0 0 auto; padding: 16px clamp(18px, 3vw, 58px) 0; transition: padding .35s var(--ease); }
.site-header.scrolled { padding-top: 7px; }
.header-shell { width: min(1820px, 100%); min-height: 78px; margin: 0 auto; padding: 0 12px 0 20px; display: grid; grid-template-columns: minmax(220px, .8fr) auto minmax(220px, .8fr); align-items: center; gap: 24px; color: var(--ink); border: 1px solid rgba(255,255,255,.72); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(0,22,54,.17); backdrop-filter: blur(22px) saturate(1.3); transition: min-height .35s var(--ease), border-radius .35s var(--ease), box-shadow .35s ease; }
.site-header.scrolled .header-shell { min-height: 64px; border-radius: 16px; box-shadow: 0 11px 34px rgba(0,22,54,.2); }
/* Home scroll performance: the fixed glass header repaints on every scroll frame.
   Use an almost-opaque surface instead of a large backdrop blur on the Home page. */
body.is-home .header-shell { backdrop-filter: none; background: rgba(255,255,255,.975); }
.site-header .brand-mark { color: var(--blue); }
.desktop-nav { height: 100%; display: flex; align-items: center; gap: clamp(18px, 1.65vw, 34px); }
.desktop-nav a { position: relative; height: 100%; display: inline-flex; align-items: center; gap: 4px; color: #304963; white-space: nowrap; transition: color .3s ease; }
.desktop-nav a svg { width: 13px; }
.desktop-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; border-radius: 4px 4px 0 0; background: var(--blue); transition: .35s var(--ease); }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--blue); }
.desktop-nav a:hover::after, .desktop-nav a.active::after { left: 0; right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.header-actions button, .menu-button { display: grid; place-items: center; color: var(--ink); border: 1px solid #dbe6ef; border-radius: 50%; background: #fff; cursor: pointer; transition: .3s var(--ease); }
.header-actions button:hover { color: #fff; border-color: var(--blue); background: var(--blue); transform: rotate(8deg); }
.header-actions button svg, .menu-button svg { width: 17px; }
.header-cta { display: inline-flex; align-items: center; gap: 24px; color: #fff; border-radius: 999px; background: var(--navy); transition: .3s var(--ease); }
.header-cta svg { width: 16px; }
.header-cta:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 22px #075fb930; }
.menu-button { display: none; }

.mobile-menu { position: fixed; z-index: 300; inset: 0; padding: 24px 6vw 36px; display: flex; flex-direction: column; color: #fff; background: radial-gradient(circle at 80% 20%, #0b4e8d, transparent 40%), var(--navy); transform: translateX(101%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; overflow-y: auto; }
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8vh; }
.mobile-menu-head .brand-type small { color: #9bb4ca; }
.mobile-menu-head > button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #ffffff42; border-radius: 50%; color: #fff; background: transparent; }
.mobile-menu > p { margin: 0 0 10px; color: #78c8f2; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.mobile-menu > a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; padding: 15px 0; border-bottom: 1px solid #ffffff22; font-size: clamp(24px, 7vw, 42px); font-weight: 600; }
.mobile-menu > a small { color: #7893ae; font-size: 9px; }
.mobile-menu > a svg { width: 20px; }
.mobile-contact { margin-top: 35px; display: flex; flex-wrap: wrap; gap: 8px 28px; color: #a7b9cb; font-size: 13px; }

.hero { min-height: max(820px, 100svh); color: #fff; overflow: hidden; background: var(--navy); }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transform: scale(1.075); transition: opacity 1.25s ease, transform 7.4s ease; }
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide img { object-fit: cover; object-position: center; }
.hero-slide:nth-child(2) img, .hero-slide:nth-child(3) img { object-position: center; }
.hero-wash { position: absolute; inset: 0; }
.hero-grid { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(90deg,#000,transparent 68%); }
.hero-aura { position: absolute; right: -9vw; top: 18%; width: 38vw; aspect-ratio: 1; border: 1px solid #ffffff2e; border-radius: 50%; box-shadow: 0 0 0 6vw #ffffff08, 0 0 0 12vw #ffffff05; animation: aura 9s ease-in-out infinite alternate; }
@keyframes aura { to { transform: scale(1.08) rotate(12deg); } }
.hero-copy { position: absolute; z-index: 3; left: clamp(26px, 7.2vw, 138px); top: 46%; transform: translateY(-49%); animation: hero-copy-in .95s var(--ease) both; }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(-43%); } to { opacity: 1; transform: translateY(-49%); } }
.hero h1 { max-width: 1050px; }
.hero h1 em { color: #a9ddf8; }
.hero-lead { width: min(650px, 90%); color: rgba(255,255,255,.78); line-height: 1.72; }
.hero-actions { display: flex; align-items: center; }
.primary-button { display: inline-flex; align-items: center; color: var(--navy); border-radius: 999px; background: #fff; box-shadow: 0 18px 38px #00102755; font-weight: 800; text-transform: uppercase; transition: .35s var(--ease); }
.primary-button svg { width: 17px; }
.primary-button:hover { color: #fff; background: var(--blue); transform: translateY(-3px); }
.text-button { display: inline-flex; align-items: center; }
.text-button svg { width: 17px; transition: transform .3s ease; }
.text-button:hover svg { transform: translateY(5px); }
.hero-meta { position: absolute; z-index: 3; top: 44%; right: clamp(24px, 4vw, 72px); display: flex; align-items: center; gap: 10px; color: #d2e4f2; writing-mode: vertical-rl; font-size: var(--type-meta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-meta svg { width: 14px; color: var(--cyan); }
.hero-slider-nav { position: absolute; z-index: 5; right: clamp(28px, 7.2vw, 138px); display: flex; align-items: center; gap: 25px; }
.slide-count { display: flex; align-items: baseline; gap: 7px; }
.slide-count strong { font-size: 25px; font-weight: 600; }
.slide-count span, .slide-count small { color: #ffffff77; font-size: 10px; }
.slide-bars { display: flex; align-items: center; gap: 7px; }
.slide-bars button { width: 40px; height: 20px; padding: 9px 0; border: 0; background: transparent; cursor: pointer; }
.slide-bars i { display: block; width: 100%; height: 2px; background: #ffffff45; overflow: hidden; }
.slide-bars button.active i::after { content: ""; display: block; height: 100%; background: #fff; animation: slide-progress 6.8s linear both; }
@keyframes slide-progress { from { width: 0; } to { width: 100%; } }
.hero-slider-nav > div:last-child { display: flex; }
.hero-slider-nav > div:last-child button { display: grid; place-items: center; color: #fff; border: 1px solid #ffffff55; background: #061a3855; backdrop-filter: blur(6px); cursor: pointer; transition: .3s ease; }
.hero-slider-nav > div:last-child button:first-child { border-radius: 50% 0 0 50%; }
.hero-slider-nav > div:last-child button:last-child { border-left: 0; border-radius: 0 50% 50% 0; }
.hero-slider-nav > div:last-child button:hover { color: var(--navy); background: #fff; }
.hero-slider-nav svg { width: 16px; }
.hero-stats { position: absolute; z-index: 4; left: clamp(26px, 7.2vw, 138px); right: clamp(26px, 7.2vw, 138px); bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #ffffff2b; border-bottom: 0; border-radius: 25px 25px 0 0; background: rgba(3,24,54,.82); backdrop-filter: blur(20px); overflow: hidden; }
.hero-stats > div { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #ffffff24; }
.hero-stats > div:last-child { border: 0; }
.hero-stats strong { line-height: 1; }
.hero-stats sup { color: var(--gold); }
.hero-stats span { margin-top: 9px; color: #aec2d3; font-size: var(--type-meta); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.about { padding: clamp(110px, 9vw, 170px) max(4.5vw, calc((100vw - 1640px)/2)) 0; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(55px, 7vw, 125px); align-items: center; background: #fff; }
.section-index { position: absolute; top: 52px; right: max(4.5vw, calc((100vw - 1640px)/2)); color: #a1afbd; font-size: var(--type-meta); font-weight: 700; letter-spacing: .16em; }
.about-frame { isolation: isolate; }
.about-frame img { object-fit: cover; transition: transform 1.2s var(--ease); }
.about-frame:hover img { transform: scale(1.045); }
.about-seal { position: absolute; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; border-radius: 50%; }
.about-seal svg { width: 23px; margin-bottom: 7px; }
.about-seal strong { line-height: 1.2; }
.about-seal span { margin-top: 4px; color: #c8eafd; text-transform: uppercase; }
.about-visual > p { position: absolute; left: -28px; bottom: 32%; margin: 0; color: #9aacba; font-size: 8px; font-weight: 700; letter-spacing: .18em; transform: rotate(-90deg); transform-origin: left bottom; }
.about-copy { max-width: 760px; }
.about h2 em { color: var(--blue); }
.about-lead { max-width: 680px; color: var(--muted); line-height: 1.85; }
.about-proof { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-proof > div { display: grid; }
.about-proof > div + div { border-left: 1px solid var(--line); }
.about-proof > div > strong { color: var(--blue); }
.about-proof p { margin: 0; display: flex; flex-direction: column; }
.about-proof span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.outline-link { display: inline-flex; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--ink); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.outline-link svg { width: 16px; transition: .3s var(--ease); }
.outline-link:hover svg { transform: translate(4px,-4px); }
.solution-ribbon { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.solution-ribbon article { display: grid; align-items: center; border-right: 1px solid var(--line); transition: .45s var(--ease); }
.solution-ribbon article:last-child { border: 0; }
.solution-ribbon article > span { position: absolute; color: #9aabba; }
.solution-ribbon article > svg:first-of-type { color: var(--blue); stroke-width: 1.5; }
.solution-ribbon article > svg:last-child { width: 17px; opacity: 0; transform: translate(-8px,8px); transition: .35s var(--ease); }
.solution-ribbon h3 { margin: 0; }
.solution-ribbon p { margin: 5px 0 0; color: var(--muted); }
.solution-ribbon article:hover { color: #fff; background: var(--navy); box-shadow: 0 24px 45px #031a3730; }
.solution-ribbon article:hover p { color: #b7c8d7; }
.solution-ribbon article:hover > svg:first-of-type { color: var(--cyan); }
.solution-ribbon article:hover > svg:last-child { opacity: 1; transform: none; }

.products { min-height: 100svh; padding: clamp(110px, 9vw, 175px) max(4.5vw, calc((100vw - 1640px)/2)); color: #fff; background: radial-gradient(circle at 73% 44%, #0d4f90 0%, #072a59 27%, #041a38 68%); overflow: hidden; }
.products::before { content: "HỆ THỐNG"; position: absolute; top: -2vw; right: -1vw; color: #ffffff08; font-size: 14vw; line-height: 1; font-weight: 800; letter-spacing: -.075em; }
.product-orbit { position: absolute; border: 1px solid #66c6f224; border-radius: 50%; }
.orbit-one { width: 56vw; aspect-ratio: 1; top: 7%; right: -9%; }
.orbit-two { width: 39vw; aspect-ratio: 1; top: 18%; right: -.5%; }
.product-heading { position: relative; z-index: 2; }
.products h2 em { color: #93d4f6; }
.product-layout { position: relative; z-index: 2; margin-top: clamp(60px, 6vw, 105px); display: grid; align-items: stretch; }
.product-nav { border-top: 1px solid #ffffff28; }
.product-nav button { width: 100%; display: grid; grid-template-rows: auto auto; gap: 3px 12px; align-content: center; color: #fff; text-align: left; border: 0; border-bottom: 1px solid #ffffff28; background: transparent; cursor: pointer; transition: padding .35s var(--ease), background .35s ease; }
.product-nav button > span { grid-row: 1/3; color: #74c7ef; }
.product-nav button strong { font-weight: 600; }
.product-nav button small { color: #8ea9bf; }
.product-nav button svg { grid-column: 3; grid-row: 1/3; width: 17px; align-self: center; opacity: 0; transform: translate(-10px,10px); transition: .35s var(--ease); }
.product-nav button:hover, .product-nav button.active { padding-left: 22px; background: #ffffff0d; }
.product-nav button.active strong { color: #80d1f8; }
.product-nav button.active svg { opacity: 1; transform: none; }
.product-showcase { display: grid; border: 1px solid #ffffff2e; background: #ffffff0a; box-shadow: 0 40px 90px #00091d66; backdrop-filter: blur(6px); overflow: hidden; }
.product-image { position: relative; overflow: hidden; background: #dfe6ec; }
.product-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #02162e70, transparent 42%); }
.product-image > img { object-fit: cover; object-position: 50% 45%; transition: transform 1s var(--ease); }
.product-image:hover > img { transform: scale(1.045); }
.product-image-label { position: absolute; z-index: 2; left: 28px; bottom: 24px; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.quality-seal { position: absolute; z-index: 3; top: 28px; right: 26px; width: 88px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--navy); border: 6px solid #ffffffbb; border-radius: 50%; background: var(--gold); box-shadow: 0 15px 30px #0011294a; transform: rotate(7deg); }
.quality-seal svg { width: 17px; }
.quality-seal span { font-size: 8px; line-height: 1.45; font-weight: 800; text-transform: uppercase; }
.product-info { display: flex; flex-direction: column; justify-content: center; animation: info-in .6s var(--ease) both; }
@keyframes info-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.product-info > p { margin: 0 0 19px; color: #75c8f0; font-weight: 700; text-transform: uppercase; }
.product-info h3 { margin: 0; line-height: 1.15; font-weight: 600; }
.product-info > strong { margin-top: 13px; color: #a8c3d8; font-weight: 600; }
.product-info > span { margin-top: 27px; color: #b8c9d8; }
.product-info ul { margin: 28px 0 34px; padding: 23px 0; border-top: 1px solid #ffffff24; border-bottom: 1px solid #ffffff24; list-style: none; }
.product-info li { display: flex; align-items: center; gap: 10px; color: #d8e4ed; }
.product-info li svg { width: 14px; color: var(--cyan); }
.product-info > a { display: flex; justify-content: space-between; align-items: center; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-info > a svg { width: 17px; transition: .3s var(--ease); }
.product-info > a:hover svg { transform: translate(5px,-5px); }

.projects { padding: clamp(110px, 9vw, 170px) max(4.5vw, calc((100vw - 1640px)/2)); background: var(--paper); }
.projects::before { content: "DỰ ÁN"; position: absolute; top: 2vw; right: 0; color: #e7eef4; font-size: 13vw; font-weight: 800; letter-spacing: -.075em; }
.projects-head { position: relative; z-index: 2; }
.projects h2 em { color: var(--blue); }
.project-showcase { position: relative; z-index: 2; display: grid; }
.project-main { position: relative; min-height: 650px; overflow: hidden; border: 1px solid #c8d9e6; background: var(--navy) url("images/hero-treatment.png") center / cover no-repeat; box-shadow: 0 32px 72px #05284d24; }
.project-main > img { object-fit: cover; opacity: 1; visibility: visible; animation: project-photo 1.1s var(--ease) both; }
@keyframes project-photo { from { opacity: .4; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.project-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #031a38cc, transparent 55%), linear-gradient(90deg, #031a3845, transparent); }
.project-code { position: absolute; top: 34px; left: 38px; display: flex; flex-direction: column; }
.project-code span { color: #c5d5e2; letter-spacing: .14em; }
.project-code strong { letter-spacing: .04em; }
.project-location { position: absolute; left: 38px; bottom: 35px; display: flex; align-items: center; gap: 10px; }
.project-location svg { width: 16px; color: var(--cyan); }
.project-detail { min-height: 650px; display: flex; flex-direction: column; justify-content: center; color: #fff; background: var(--navy); animation: info-in .6s var(--ease) both; }
.project-detail > p { margin: 0 0 36px; color: var(--cyan); font-weight: 700; }
.project-detail > p span { color: #829bb1; }
.project-detail > strong { display: flex; align-items: flex-end; color: #fff; line-height: .92; font-weight: 500; letter-spacing: -.07em; white-space: nowrap; }
.project-detail > strong small { letter-spacing: 0; }
.project-detail > span { color: #96aabd; }
.project-detail > a { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff27; font-weight: 800; text-transform: uppercase; }
.project-detail > a svg { width: 17px; }
.project-arrows { display: flex; }
.project-arrows button { display: grid; place-items: center; color: #fff; border: 1px solid #ffffff35; background: transparent; cursor: pointer; transition: .3s ease; }
.project-arrows button:first-child { border-radius: 50% 0 0 50%; }
.project-arrows button:last-child { border-left: 0; border-radius: 0 50% 50% 0; }
.project-arrows button:hover { color: var(--navy); background: #fff; }
.project-arrows svg { width: 15px; }
.project-thumbs { grid-column: 1/-1; grid-template-columns: repeat(5,1fr); }
.project-thumbs button { position: relative; color: var(--ink); text-align: left; border: 1px solid #dce5ec; background: #fff; cursor: pointer; overflow: hidden; transition: .35s var(--ease); }
.project-thumbs button > span { color: #8da0af; font-size: 8px; }
.project-thumbs button div { display: flex; flex-direction: column; }
.project-thumbs button small { margin-top: 4px; color: var(--muted); }
.project-thumbs button i { position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--blue); transition: right .5s var(--ease); }
.project-thumbs button:hover, .project-thumbs button.active { border-color: #acd2ed; box-shadow: 0 15px 30px #06284d13; }
.project-thumbs button.active { color: var(--blue); }
.project-thumbs button.active i { right: 0; }

.capability { padding: clamp(110px, 9vw, 175px) max(4.5vw, calc((100vw - 1640px)/2)); background: #fff; }
.capability::before { content: ""; position: absolute; right: -190px; top: 100px; width: 520px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 70px #f7f9fb, 0 0 0 71px var(--line); }
.capability-head { position: relative; z-index: 2; text-align: center; }
.capability h2 em { color: var(--blue); }
.capability-head > p:last-child { margin: 26px auto 0; color: var(--muted); }
.process-line { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5,1fr); }
.process-line::before { content: ""; position: absolute; }
.process-line article { text-align: center; padding: 0 clamp(10px,1.7vw,30px); }
.process-icon { aspect-ratio: 1; display: grid; place-items: center; }
.process-icon > svg { width: 30px; color: var(--blue); stroke-width: 1.5; }
.process-icon span { position: absolute; aspect-ratio: 1; color: #fff; background: var(--navy); }
.process-line article:hover .process-icon { color: #fff; }
.process-line article:hover .process-icon > svg { color: #fff; }
.process-line h3 { margin: 0 0 10px; }
.process-line p { margin: 0; color: var(--muted); }
.capability-band { position: relative; z-index: 2; max-width: 1050px; margin: 82px auto 0; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.capability-band svg { width: 18px; color: var(--blue); }
.capability-band span { color: var(--muted); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.capability-band i { width: 4px; height: 4px; border-radius: 50%; background: #aec0cf; }

.news { padding: clamp(110px, 9vw, 175px) max(4.5vw, calc((100vw - 1640px)/2)); display: grid; gap: clamp(28px, 4vw, 70px); background: #edf3f7; }
.news-head { grid-column: 1/-1; margin-bottom: 25px; display: grid; grid-template-columns: 1fr auto; }
.news-head .eyebrow, .news-head h2 { grid-column: 1; }
.news h2 em { color: var(--blue); }
.news-head > a { grid-column: 2; grid-row: 1/3; padding-bottom: 9px; border-bottom: 1px solid var(--ink); font-weight: 800; text-transform: uppercase; }
.news-head > a svg { width: 16px; }
.featured-news { border: 1px solid #d3e0e9; border-radius: 38px 38px 8px 38px; background: #fff; box-shadow: 0 28px 64px #0423411a; }
.news-photo { position: relative; height: clamp(300px, 28vw, 470px); overflow: hidden; background: #dce9f1 url("images/hero-treatment.png") center / cover no-repeat; }
.news-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#031a3866,transparent 45%); }
.news-photo img { object-fit: cover; opacity: 1; visibility: visible; transition: transform 1s var(--ease); }
.featured-news:hover .news-photo img { transform: scale(1.05); }
.news-photo > span { position: absolute; z-index: 2; color: #fff; backdrop-filter: blur(7px); font-weight: 800; }
.featured-news p, .news-stack p { margin: 0 0 14px; display: flex; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.featured-news p span, .news-stack p span { color: var(--blue); }
.featured-news time, .news-stack time { color: #8b9bab; }
.featured-news h3 { margin: 0; max-width: 800px; line-height: 1.42; }
.featured-news a { margin-top: 27px; display: inline-flex; align-items: center; gap: 20px; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.featured-news a svg { width: 16px; }
.news-stack { display: grid; align-content: stretch; }
.news-stack article { display: grid; align-items: center; border-radius: 20px; background: #fff; transition: .4s var(--ease); }
.news-stack article:hover { box-shadow: 0 19px 42px #04234114; }
.news-thumb { position: relative; }
.news-thumb img { object-fit: cover; transition: transform .7s var(--ease); }
.news-stack article:hover .news-thumb img { transform: scale(1.08); }
.news-stack h3 { margin: 0; }
.news-stack article > a { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: .35s var(--ease); }
.news-stack article > a svg { width: 16px; }
.news-stack article:hover > a { color: #fff; background: var(--blue); transform: rotate(45deg); }

.partners { padding: 31px max(4.5vw, calc((100vw - 1640px)/2)); display: grid; align-items: center; gap: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.partners-label { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.partners-label span { width: 26px; height: 1px; background: var(--blue); }
.logo-marquee { overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-track { width: max-content; display: flex; align-items: center; animation: marquee 28s linear infinite; }
.logo-track .partner-item { min-width: 185px; min-height: 76px; padding: 12px 28px; color: #8796a5; border-right: 1px solid var(--line); text-align: center; font-size: 18px; font-weight: 800; letter-spacing: -.02em; filter: grayscale(1); transition: .3s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.logo-track .partner-item:hover, .logo-track .partner-item:focus-visible { color: var(--blue); filter: none; transform: scale(1.04); }
.logo-track .partner-item img { max-width: 132px; max-height: 42px; width:auto; height:auto; object-fit:contain; }
.logo-track .partner-item small { max-width: 150px; color:#718293; font-size:9px; font-weight:600; line-height:1.35; letter-spacing:0; text-transform:none; }
.logo-track a.partner-item:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; border-radius:10px; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

footer { padding: clamp(100px, 9vw, 165px) max(4.5vw, calc((100vw - 1640px)/2)) 30px; color: #fff; background: var(--navy); overflow: hidden; }
.footer-ambient { position: absolute; right: -9vw; top: -12vw; width: 48vw; aspect-ratio: 1; border: 1px solid #ffffff16; border-radius: 50%; box-shadow: 0 0 0 7vw #ffffff07, 0 0 0 14vw #ffffff04; }
.footer-top { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; gap: 9vw; }
.footer-cta h2 em { color: #8cd2f5; }
.footer-cta > a { margin-top: 42px; display: inline-flex; align-items: center; color: var(--navy); border-radius: 999px; background: #fff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: .35s var(--ease); }
.footer-cta > a:hover { color: #fff; background: var(--blue); transform: translateY(-3px); }
.footer-cta > a svg { width: 17px; }
.footer-contact { align-self: end; border-top: 1px solid #ffffff2a; }
.footer-contact > div { display: grid; padding: 21px 0; border-bottom: 1px solid #ffffff2a; }
.footer-contact svg { width: 18px; color: var(--cyan); stroke-width: 1.5; }
.footer-contact p { margin: 0; color: #c0cedb; }
.footer-contact small { display: block; color: #7890a8; font-weight: 700; }
.footer-bottom { position: relative; z-index: 2; padding-top: 28px; display: grid; align-items: center; border-top: 1px solid #ffffff26; }
.footer-brand .brand-type small { color: #8fa5b8; }
.footer-bottom > p { color: #7f94a8; }
.footer-bottom > div { justify-self: end; display: flex; color: #aabac9; }
.footer-bottom > div a:hover { color: #fff; }

@media (max-width: 1320px) {
  .header-shell { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-actions { display: none; }
  .menu-button { display: grid; justify-self: end; }
  .product-layout { grid-template-columns: .5fr 1.5fr; gap: 35px; }
  .product-showcase { grid-template-columns: 1.1fr .9fr; }
  .project-detail { padding: 42px; }
  .news-stack article { grid-template-columns: 110px 1fr auto; }
  .news-thumb { height: 120px; }
}

@media (max-width: 1199px) {
  :root { --content: calc(100vw - 44px); }
  .hero-meta { display: none; }
  .about { grid-template-columns: 1fr 1fr; gap: 50px; }
  .about-proof { grid-template-columns: 1fr; }
  .about-proof > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .solution-ribbon { grid-template-columns: 1fr 1fr; }
  .solution-ribbon article:nth-child(2) { border-right: 0; }
  .solution-ribbon article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .product-layout { grid-template-columns: 1fr; }
  .product-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .product-nav button:nth-child(odd) { border-right: 1px solid #ffffff28; }
  .project-main, .project-detail { min-height: 580px; }
  .project-thumbs { overflow-x: auto; grid-template-columns: repeat(5,220px); padding-bottom: 10px; scrollbar-width: thin; }
  .news { grid-template-columns: 1fr; }
  .news-head, .featured-news, .news-stack { grid-column: 1; }
  .process-line { grid-template-columns: repeat(3,1fr); gap: 52px 0; }
  .process-line::before { display: none; }
  .process-line article:nth-child(4) { grid-column: 1/2; margin-left: 50%; }
  .process-line article:nth-child(5) { grid-column: 2/3; margin-left: 50%; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  body { font-size: 15px; }
  .site-header { padding: 9px 9px 0; }
  .site-header.scrolled { padding-top: 5px; }
  .header-shell { min-height: 63px; padding: 0 9px 0 15px; border-radius: 17px; }
  .site-header.scrolled .header-shell { min-height: 58px; border-radius: 15px; }
  .site-header .brand-mark { width: 38px; }
  .site-header .brand-type strong { font-size: 21px; }
  .site-header .brand-type small { display: none; }
  .menu-button { width: 41px; height: 41px; }
  .mobile-menu { padding: 18px 22px 32px; }
  .mobile-menu-head { margin-bottom: 45px; }
  .mobile-menu > a { font-size: 24px; padding: 11px 0; }
  .hero { min-height: max(850px, 100svh); }
  .hero-slide img { object-position: 61% center; }
  .hero-slide:nth-child(2) img { object-position: 58% center; }
  .hero-slide:nth-child(3) img { object-position: 63% center; }
  .hero-wash { background: linear-gradient(90deg,rgba(3,18,40,.94),rgba(3,22,48,.6) 62%,rgba(3,20,43,.28)),linear-gradient(0deg,rgba(3,20,43,.88),transparent 58%); }
  .hero-grid { background-size: 58px 58px; }
  .hero-copy { left: 22px; top: 41%; width: calc(100% - 44px); }
  .eyebrow { margin-bottom: 18px; font-size: 9px; }
  .hero h1 { font-size: var(--type-hero); line-height: 1.07; }
  .hero-lead { width: 100%; margin: 22px 0 27px; font-size: 14px; line-height: 1.65; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; }
  .primary-button { width: 100%; justify-content: space-between; min-height: 53px; }
  .text-button { margin-left: 5px; }
  .hero-slider-nav { left: 22px; right: 22px; bottom: 184px; justify-content: space-between; gap: 12px; }
  .slide-count { display: none; }
  .slide-bars button { width: 32px; }
  .hero-stats { left: 15px; right: 15px; grid-template-columns: 1fr 1fr; border-radius: 20px 20px 0 0; }
  .hero-stats > div { min-height: 74px; padding: 12px 15px; }
  .hero-stats > div:nth-child(2) { border-right: 0; }
  .hero-stats > div:nth-child(-n+2) { border-bottom: 1px solid #ffffff24; }
  .hero-stats strong { font-size: 20px; }
  .hero-stats span { margin-top: 5px; font-size: var(--type-meta); }
  .about { padding: 100px 22px 0; display: flex; flex-direction: column; gap: 58px; align-items: stretch; }
  .section-index { top: 34px; right: 22px; }
  .about-visual { width: 100%; max-width: 560px; align-self: center; padding-right: 24px; }
  .about-visual::before { right: 40px; border-radius: 82px 24px 82px 24px; }
  .about-visual::after { left: -5px; top: 42px; width: 52px; height: 52px; }
  .about-frame { height: 440px; border-width: 6px; border-radius: 82px 24px 82px 24px; }
  .about-seal { width: 125px; border-width: 6px; }
  .about-visual > p { display: none; }
  .about h2, .products h2, .projects h2, .capability h2, .news h2 { font-size: var(--type-section-h2); line-height: 1.08; }
  .about-lead { margin: 25px 0; font-size: 15px; line-height: 1.75; }
  .solution-ribbon { margin-top: 30px; grid-template-columns: 1fr; }
  .solution-ribbon article, .solution-ribbon article:nth-child(2) { min-height: 125px; border-right: 0; border-bottom: 1px solid var(--line); }
  .products { min-height: auto; padding: 95px 22px; }
  .product-layout { margin-top: 50px; }
  .product-nav { grid-template-columns: 1fr; }
  .product-nav button:nth-child(odd) { border-right: 0; }
  .product-showcase { min-height: 0; grid-template-columns: 1fr; border-radius: 34px 34px 8px 34px; }
  .product-image { min-height: 430px; }
  .product-info { padding: 32px 25px; }
  .product-info > span { font-size: 13px; }
  .projects { padding: 95px 16px; }
  .projects-head { padding: 0 6px; }
  .project-showcase { margin-top: 48px; grid-template-columns: 1fr; }
  .project-main { min-height: 480px; border-radius: 32px 32px 0 0; }
  .project-detail { min-height: auto; padding: 34px 25px; border-radius: 0 0 32px 8px; }
  .project-detail > p { margin-bottom: 25px; }
  .project-detail > strong { font-size: 48px; }
  .project-detail h3 { margin-top: 25px; font-size: 21px; }
  .project-detail > a { margin-top: 30px; }
  .project-thumbs { grid-template-columns: repeat(5,205px); }
  .capability { padding: 95px 22px; }
  .capability-head { text-align: left; }
  .capability-head .eyebrow { justify-content: flex-start; }
  .process-line { margin-top: 60px; grid-template-columns: 1fr; gap: 0; }
  .process-line article, .process-line article:nth-child(4), .process-line article:nth-child(5) { grid-column: auto; margin: 0; display: grid; grid-template-columns: 78px 1fr; gap: 0 18px; padding-bottom: 27px; text-align: left; }
  .process-icon { grid-row: 1/3; width: 72px; margin: 0; }
  .process-line h3 { align-self: end; margin: 4px 0 4px; }
  .process-line p { align-self: start; }
  .capability-band { margin-top: 30px; padding: 22px; justify-content: flex-start; flex-wrap: wrap; border-radius: 25px; }
  .capability-band span { width: calc(100% - 45px); }
  .news { padding: 95px 22px; gap: 28px; }
  .news-head { display: block; margin-bottom: 15px; }
  .news-head > a { width: max-content; margin-top: 30px; }
  .featured-news { border-radius: 28px 28px 7px 28px; }
  .news-photo { height: 300px; }
  .news-stack article { grid-template-columns: 94px 1fr auto; gap: 13px; padding: 10px; }
  .news-thumb { height: 105px; }
  .news-stack p { gap: 8px; flex-direction: column; }
  .news-stack h3 { font-size: 14px; }
  .news-stack article > a { width: 37px; height: 37px; }
  .partners { display: block; padding: 26px 22px; }
  .partners-label { margin-bottom: 18px; }
  .logo-track .partner-item { min-width: 155px; font-size: 15px; padding-inline:20px; }
  footer { padding: 95px 22px 26px; }
  .footer-top { grid-template-columns: 1fr; gap: 65px; }
  .footer-bottom { margin-top: 75px; grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom > div { justify-self: start; }
  .footer-bottom > p { order: 3; }
}

@media (max-width: 430px) {
  .hero-copy { top: 39%; }
  .hero h1 { font-size: var(--type-hero); }
  .hero-lead { font-size: 13px; }
  .text-button { display: none; }
  .slide-bars { gap: 4px; }
  .hero-slider-nav > div:last-child button { width: 39px; height: 39px; }
  .about-frame { height: 380px; border-radius: 64px 20px 64px 20px; }
  .about-seal { width: 112px; }
  .about-proof { grid-template-columns: 1fr; }
  .product-image { min-height: 390px; }
  .quality-seal { width: 75px; top: 20px; right: 18px; border-width: 4px; }
  .project-main { min-height: 420px; }
  .project-code { top: 24px; left: 24px; }
  .project-location { left: 24px; bottom: 24px; }
  .project-detail > strong { font-size: 42px; }
  .news-stack article { grid-template-columns: 1fr auto; }
  .news-thumb { grid-column: 1/-1; height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .page-loader { display: none; }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}

/* Static HTML icon helpers */
.product-jump { grid-column: 3; grid-row: 1/3; align-self: center; font-size: 17px; opacity: 0; transform: translate(-10px,10px); transition: .35s var(--ease); }
.product-nav button:hover .product-jump, .product-nav button.active .product-jump { opacity: 1; transform: none; }
.solution-jump { width: 17px; opacity: 0; transform: translate(-8px,8px); transition: .35s var(--ease); }
.solution-ribbon article:hover .solution-jump { opacity: 1; transform: none; }
.process-glyph { font-weight: 500; }


/* === DBCO interaction & scale upgrade 2026-09-11 === */
body.dragging, body.dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
.hero, .product-showcase, .project-main { touch-action: pan-y; }
.drag-track { cursor: grab; touch-action: pan-y; }
.drag-track.is-dragging { cursor: grabbing; scroll-snap-type: none !important; }
.drag-hint { position: relative; z-index: 5; width: max-content; color: currentColor; opacity: .62; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.hero-drag-hint { position: absolute; left: clamp(26px,7.2vw,138px); bottom: 128px; color: #d4e8f6; }
.product-drag-hint { color: #9acdea; }

.about::after, .projects::after, .news::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; pointer-events:none; opacity:.36; background:radial-gradient(circle,rgba(75,184,235,.13),transparent 68%); }
.about::after { right:-130px; top:18%; }
.projects::after { left:-150px; top:34%; }
.news::after { right:-140px; bottom:4%; }
.fx-pointer-glow { position:fixed; z-index:12; left:0; top:0; width:440px; height:440px; margin:-220px 0 0 -220px; border-radius:50%; pointer-events:none; opacity:.24; background:radial-gradient(circle,rgba(75,184,235,.15),transparent 68%); transform:translate3d(-999px,-999px,0); mix-blend-mode:multiply; }
main { position:relative; z-index:2; }
.site-header { z-index:100; }

.hero .eyebrow { align-items:flex-start; line-height:1.4; }
#hero-label { display:block; }
.hero-slide img { will-change:transform; }
.hero-grid { animation:grid-drift 18s linear infinite alternate; }
@keyframes grid-drift { to { transform:translate3d(18px,10px,0); } }

.about-copy > .eyebrow { line-height:1.35; }
.about-copy > .eyebrow > span:first-child { flex:0 0 48px; margin-top:.65em; }
.about-proof { max-width:780px; }
.about-proof > div { position:relative; gap:16px; align-items:center; transition:.4s var(--ease); }
.about-proof > div + div { padding-left:26px; }
.about-proof > div:hover { background:linear-gradient(90deg,rgba(7,95,185,.045),transparent); }
.about-proof > div > strong { align-self:start; padding-top:5px; font-size:11px; letter-spacing:.08em; }
.proof-icon { width:46px; height:46px; display:grid; place-items:center; color:var(--blue)!important; border:1px solid #b9d5e9; border-radius:15px 7px 15px 7px; background:#f6fbff; font-size:22px!important; margin:0!important; transition:.4s var(--ease); }
.about-proof > div:hover .proof-icon { color:#fff!important; background:var(--blue); border-color:var(--blue); transform:rotate(-7deg) scale(1.05); box-shadow:0 12px 26px rgba(7,95,185,.2); }
.about-proof b { font-size:clamp(15px,1.08vw,18px); line-height:1.35; }
.about-proof p > span { margin-top:7px; font-size:clamp(12px,.88vw,15px); line-height:1.55; }

.solution-ribbon { border:0; }
.solution-ribbon article { grid-template-columns:60px 1fr auto; gap:18px; border:1px solid var(--line)!important; border-radius:24px 8px 24px 8px; box-shadow:0 16px 40px rgba(4,35,65,.06); }
.solution-ribbon article > span { top:20px; left:22px; font-size:9px; font-weight:700; }
.solution-ribbon article > svg:first-of-type { width:44px; height:44px; padding:8px; border:1px solid #bdd8ea; border-radius:14px 7px 14px 7px; }
.solution-ribbon h3 { line-height:1.2; }
.solution-ribbon p { margin-top:8px; line-height:1.5; }
.solution-ribbon article:hover { transform:translateY(-10px) scale(1.015); }
.solution-ribbon article:hover > svg:first-of-type { border-color:#4bb8eb66; background:#ffffff10; }
.product-layout { grid-template-columns:.52fr 1.48fr; gap:clamp(42px,5vw,94px); }
.product-nav button { min-height:104px; grid-template-columns:42px 1fr auto; padding:18px 12px; }
.product-nav button > span { font-size:10px; }
.product-nav button strong { line-height:1.3; }
.product-nav button small { margin-top:3px; line-height:1.45; }
.product-showcase { grid-template-columns:1.16fr .84fr; border-radius:48px 48px 12px 48px; }
.product-info { padding:clamp(42px,4vw,76px); }
.product-info > strong { line-height:1.5; }
.product-info li { padding:7px 0; }
.project-thumbs { display:flex; overflow-x:auto; padding:4px 4px 18px; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; }
.project-thumbs::-webkit-scrollbar { display:none; }
.project-thumbs button { flex:0 0 clamp(245px,18.5vw,330px); display:grid; gap:12px; padding:10px 14px 16px; scroll-snap-align:start; border-radius:20px 8px 20px 8px; box-shadow:0 12px 30px rgba(6,40,77,.06); }
.project-thumb-image { grid-column:1/-1; grid-row:1; position:relative; width:100%; overflow:hidden; border-radius:14px 6px 14px 6px; }
.project-thumb-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,26,56,.22),transparent); }
.project-thumb-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .65s var(--ease); pointer-events:none; }
.project-thumbs button:hover .project-thumb-image img, .project-thumbs button.active .project-thumb-image img { transform:scale(1.07); }
.project-thumb-index { grid-column:1; grid-row:2; color:#7e93a5; font-weight:800; padding-top:3px; }
.project-thumbs button div { grid-column:2; grid-row:2; }
.project-thumbs button strong { line-height:1.4; }
.project-thumbs button small { line-height:1.4; }
.project-thumbs button:hover, .project-thumbs button.active { transform:translateY(-4px); }

.news { grid-template-columns:1.05fr .95fr; }
.news-excerpt { margin:18px 0 0!important; display:block!important; max-width:760px; color:var(--muted); font-weight:400!important; letter-spacing:0!important; text-transform:none!important; }
.news-stack article { border:1px solid #d8e4ec; }
.news-summary { color:var(--muted); }
.news-stack article:hover { transform:translateX(-6px) translateY(-2px); }

.about-frame img, .product-image > img, .project-main > img, .news-photo img { will-change:auto; translate:none; }

@media (max-width:1320px) {
  .solution-ribbon article { min-height:190px; padding:32px 22px; }
  .product-showcase, .product-image { min-height:620px; }
  .news-stack article { grid-template-columns:126px 1fr auto; }
}
@media (max-width:1199px) {
  .solution-ribbon { gap:10px; }
  .product-drag-hint { margin-bottom:-14px; }
  .project-main, .project-detail { min-height:600px; }
  .project-thumbs { grid-template-columns:none; }
  .news { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .fx-pointer-glow { display:none; }
  .hero .eyebrow { max-width:calc(100vw - 44px); line-height:1.42; }
  #hero-label { max-width:calc(100vw - 95px); }
  .hero-drag-hint { left:22px; bottom:155px; font-size:7px; }
  .product-drag-hint { margin-top:18px; font-size:7px; }
  .about-copy > .eyebrow { font-size:12px; line-height:1.5; }
  .about-proof > div { grid-template-columns:28px 44px 1fr; min-height:105px; padding:18px 0; gap:12px; }
  .about-proof > div + div { padding-left:0; }
  .proof-icon { width:42px; height:42px; font-size:19px!important; }
  .about-proof b { font-size:15px; }
  .about-proof p > span { font-size:12px; }
  .solution-ribbon { gap:10px; border:0; }
  .solution-ribbon article, .solution-ribbon article:nth-child(2) { min-height:150px; grid-template-columns:52px 1fr auto; padding:27px 20px; border:1px solid var(--line)!important; border-radius:20px 7px 20px 7px; }
  .solution-ribbon h3 { font-size:19px; }
  .solution-ribbon p { font-size:12px; }
  .product-nav { overflow-x:auto; display:flex; gap:8px; padding-bottom:8px; border-top:0; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .product-nav::-webkit-scrollbar { display:none; }
  .product-nav button { flex:0 0 82%; min-height:92px; padding:15px; border:1px solid #ffffff24!important; border-radius:17px 7px 17px 7px; scroll-snap-align:start; }
  .product-showcase, .product-image { min-height:0; }
  .product-image { min-height:440px; }
  .product-info h3 { font-size:34px; }
  .product-info > span { font-size:14px; }
  .project-main { min-height:500px; }
  .project-detail { min-height:auto; }
  .project-thumbs { padding-left:0; }
  .project-thumbs button { flex-basis:245px; min-height:184px; }
  .news-stack article { grid-template-columns:108px 1fr auto; min-height:132px; gap:13px; padding:10px; }
  .news-thumb { height:112px; }
  .news-summary { display:none; }
}
@media (max-width:430px) {
  .hero-drag-hint { display:none; }
  .about-proof > div { grid-template-columns:24px 40px 1fr; }
  .solution-ribbon article { min-height:142px; }
  .product-image { min-height:400px; }
  .project-thumbs button { flex-basis:226px; }
  .news-stack article { grid-template-columns:1fr auto; }
  .news-thumb { grid-column:1/-1; height:185px; }
}


/* === DBCO refinement patch 2026-09-11 (round 2) === */
img, a, button { -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; }
.desktop-nav a { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav a span { display: block; }
.header-cta { min-height: 50px; padding: 0 18px 0 22px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.header-actions button, .menu-button { width: 46px; height: 46px; }
.hero, .hero *, .product-showcase, .product-showcase *, .project-showcase, .project-showcase * { -webkit-user-select: none; user-select: none; }
.hero, .product-showcase, .project-main, .product-nav, .project-thumbs { cursor: grab; }
.hero.is-dragging, .product-showcase.is-dragging, .project-main.is-dragging, .product-nav.is-dragging, .project-thumbs.is-dragging { cursor: grabbing; }
.eyebrow > span:first-child { flex: 0 0 38px; width: 38px; height: 1px; background: currentColor; }
.eyebrow > span:not(:first-child) { width: auto; height: auto; background: none; }
.hero .eyebrow { gap: 16px; margin-bottom: 26px; max-width: min(760px, 76vw); font-size: clamp(13px, .95vw, 16px); font-weight: 800; letter-spacing: .16em; }
#hero-label { width: auto !important; height: auto !important; max-width: none; white-space: nowrap; overflow-wrap: normal; }
.hero-copy { width: min(980px, 74vw); }
.hero h1 { font-size: var(--type-hero); }
.hero-lead { margin: 34px 0 38px; font-size: clamp(17px, 1.16vw, 21px); }
.hero-actions { gap: 18px; }
.primary-button { min-height: 64px; gap: 42px; padding: 0 24px 0 28px; font-size: 13px; letter-spacing: .1em; }
.text-button { min-height: 60px; padding: 0 24px; gap: 16px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: .35s var(--ease); }
.text-button:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.text-button span, .primary-button span { display: inline-grid; place-items: center; min-width: 24px; }
.hero-slider-nav { bottom: 150px; }
.hero-slider-nav > div:last-child button { width: 48px; height: 48px; }
.hero-slider-nav .slide-count strong { font-size: 20px; }
.about { padding-top: clamp(105px, 8.8vw, 158px); }
.about-copy > .eyebrow { margin-bottom: 24px; font-size: clamp(15px, 1.05vw, 18px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about h2 { font-size: var(--type-section-h2); }
.about-lead { margin: 24px 0 24px; font-size: clamp(17px, 1.15vw, 20px); }
.about-proof { margin-bottom: 28px; }
.about-proof > div { min-height: 108px; padding: 18px 18px 18px 0; }
.outline-link { padding: 0 10px 0 24px; border: 1px solid #c9dae8; border-radius: 999px; background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%); box-shadow: 0 16px 34px rgba(6, 40, 77, .08); }
.outline-link span { display: inline-grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 10px 20px rgba(7, 95, 185, .24); }
.outline-link:hover { transform: translateY(-2px); }
.outline-link:hover span { transform: translate(3px,-3px) rotate(8deg); }
.solution-ribbon { margin-top: clamp(52px, 5vw, 86px); gap: 14px; }
.solution-ribbon article { position: relative; min-height: 190px; padding: 34px 28px; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%); }
.solution-ribbon article::before, .solution-ribbon article::after { content: ""; position: absolute; width: 26px; height: 26px; border-color: rgba(7,95,185,.18); pointer-events: none; transition: .35s var(--ease); }
.solution-ribbon article::before { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; border-radius: 14px 0 0 0; }
.solution-ribbon article::after { right: 12px; bottom: 12px; border-right: 1px solid; border-bottom: 1px solid; border-radius: 0 0 14px 0; }
.solution-ribbon article > svg:first-of-type { transition: transform .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.solution-ribbon article:hover::before, .solution-ribbon article:hover::after { border-color: rgba(75,184,235,.55); }
.solution-ribbon article:hover > svg:first-of-type { transform: rotate(14deg) scale(1.08); }
.solution-ribbon h3 { font-size: clamp(20px, 1.4vw, 26px); }
.solution-ribbon p { font-size: clamp(13px, .92vw, 16px); }
.project-thumbs { scroll-behavior: smooth; }
@media (max-width: 1199px) {
  #hero-label { white-space: normal; max-width: calc(100vw - 120px); }
}
@media (max-width: 760px) {
  .desktop-nav a { font-size: 12px; }
  .hero .eyebrow { max-width: calc(100vw - 48px); font-size: 11px; }
  #hero-label { max-width: calc(100vw - 96px); white-space: normal; }
  .hero-actions { width: 100%; }
  .primary-button, .text-button { width: 100%; justify-content: space-between; }
  .text-button { display: inline-flex !important; }
  .about-visual { padding: 12px 18px 34px 12px; }
  .about-visual::before { right: 28px; bottom: 34px; }
  .about-visual::after { left: 6px; top: 18px; width: 48px; height: 48px; }
  .about-copy > .eyebrow { font-size: 12px; }
  .outline-link { width: 100%; justify-content: space-between; }
  .solution-ribbon { margin-top: 26px; }
  .solution-ribbon article { min-height: 152px; }
}


/* === DBCO refinement patch 2026-09-11 (round 3) === */
.product-heading .eyebrow, .projects-head .eyebrow, .capability-head .eyebrow, .news-head .eyebrow, .footer-cta .eyebrow { text-transform: none; }
.product-heading .eyebrow, .projects-head .eyebrow, .capability-head .eyebrow, .news-head .eyebrow, .footer-cta .eyebrow, .about-copy > .eyebrow { font-size: clamp(15px, 1.04vw, 18px); letter-spacing: .14em; }
.product-heading .eyebrow > span:first-child, .projects-head .eyebrow > span:first-child, .capability-head .eyebrow > span:first-child, .news-head .eyebrow > span:first-child, .footer-cta .eyebrow > span:first-child { flex: 0 0 54px; width: 54px; }
.product-drag-hint { margin-top: 16px; opacity: .82; }

/* clean about corners */
.outline-link { justify-content: space-between; gap: 14px; }

/* products typography */
.products { padding-top: clamp(100px, 8vw, 150px); padding-bottom: clamp(86px, 7vw, 118px); }
.product-drag-hint { margin-bottom: 6px; }
.product-showcase { min-height: 650px; }
.product-image { min-height: 650px; }

/* projects scale + fit */
.projects { padding-top: clamp(96px, 8vw, 140px); padding-bottom: clamp(86px, 7vw, 118px); }
.projects-head { max-width: 1020px; }
.project-main { border-radius: 36px 0 0 12px; }
.project-detail { padding: clamp(30px, 3vw, 48px); border-radius: 0 12px 36px 0; }
.project-detail > p { margin-bottom: 24px; }
.project-detail h3 { margin: 22px 0 12px; line-height: 1.34; }
.project-detail > span { line-height: 1.7; }
.project-detail > a { margin-top: 28px; padding-top: 16px; }
.project-arrows { margin-top: 24px; }
.project-thumbs { margin-top: 12px; gap: 10px; }
.project-thumbs button { flex-basis: clamp(228px, 16vw, 290px); min-height: 168px; }
.project-thumb-image { height: 76px; }
.project-thumb-index { font-size: 10px; }
.project-thumbs button strong { font-size: clamp(13px, .96vw, 16px); }
.project-thumbs button small { font-size: 11px; }

/* capability larger and unclipped */
.capability { padding-top: clamp(96px, 8vw, 142px); padding-bottom: clamp(92px, 7vw, 128px); }
.capability-head { max-width: 980px; margin: 0 auto; }
.capability h2 { font-size: var(--type-section-h2); }
.capability-head > p:last-child { max-width: 780px; line-height: 1.8; }
.process-icon { margin-bottom: 26px; }
.capability-band span { font-size: 10px; }

/* news bigger */
.news { padding-top: clamp(96px, 8vw, 140px); padding-bottom: clamp(92px, 7vw, 124px); }
.featured-news > div:last-child { padding: clamp(30px, 3vw, 48px); }
.news-stack { gap: 18px; }
.news-stack article { gap: 22px; }
.news-summary { line-height: 1.6; }

/* footer larger */
footer { padding-top: clamp(96px, 8vw, 142px); }
.footer-cta > a { padding: 0 20px 0 26px; }
.footer-contact p { line-height: 1.78; }
.footer-bottom { margin-top: 88px; }

@media (max-width: 1199px) {
  .project-showcase { grid-template-columns: 1fr; }
  .project-main, .project-detail { min-height: auto; }
  .process-line { padding-top: 0; }
  .process-line article { padding-top: 0; }
}

@media (max-width: 760px) {
  .about-visual { padding: 8px 14px 28px 8px; }
  .about-visual::before { right: 24px; bottom: 30px; border-radius: 32px 14px 32px 14px; }
  .about-visual::after { left: 10px; top: 18px; width: 44px; height: 18px; border-radius: 14px 0 0 0; }
  .about-frame { border-radius: 32px 14px 32px 14px; }
  .outline-link { min-width: 0; width: 100%; }
  .products h2, .projects h2, .capability h2, .news h2, .footer-cta h2 { font-size: var(--type-section-h2); }
  .product-drag-hint { font-size: 10px; }
  .project-main { min-height: 460px; }
  .project-thumbs button { flex-basis: 236px; min-height: 170px; }
  .capability-head > p:last-child, .process-line p, .footer-contact p, .news-excerpt { font-size: 14px !important; }
  .news-stack article { grid-template-columns: 118px 1fr auto; min-height: 136px; gap: 12px; padding: 10px; }
  .news-thumb { height: 114px; }
}


/* === DBCO refinement patch 2026-09-11 (round 4) === */
.about { overflow: visible; }
.about-visual::before { border-width: 1px; border-color: rgba(120,170,208,.58); }
.about-frame { border-width: 8px; }
.outline-link { min-height: 62px; min-width: 292px; padding-left: 26px; padding-right: 10px; font-size: 13px; }
.outline-link span { width: 38px; height: 38px; }

.product-heading .eyebrow, .projects-head .eyebrow, .capability-head .eyebrow, .news-head .eyebrow, .footer-cta .eyebrow, .partners-label { text-transform: none; }
.product-heading .eyebrow, .projects-head .eyebrow, .capability-head .eyebrow, .news-head .eyebrow, .footer-cta .eyebrow, .partners-label, .about-copy > .eyebrow { font-size: clamp(16px, 1.1vw, 19px); font-weight: 800; letter-spacing: .15em; line-height: 1.2; }
.product-heading .eyebrow > span:first-child, .projects-head .eyebrow > span:first-child, .capability-head .eyebrow > span:first-child, .news-head .eyebrow > span:first-child, .footer-cta .eyebrow > span:first-child, .partners-label span { flex: 0 0 44px; width: 44px; }
.product-drag-hint { font-size: 14px; letter-spacing: .08em; }
.products h2 { font-size: var(--type-section-h2); }
.product-heading { max-width: 1100px; }
.product-nav button { padding-top: 20px; padding-bottom: 20px; }
.product-nav button span { font-size: 12px; }
.product-nav button strong { font-size: clamp(20px, 1.3vw, 24px); }
.product-nav button small { font-size: clamp(14px, .9vw, 16px); }
.product-info > p { font-size: 13px; letter-spacing: .09em; }
.product-info h3 { font-size: clamp(40px, 3vw, 58px); }
.product-info > strong { font-size: clamp(16px, 1vw, 18px); }
.product-info > span { font-size: clamp(17px, 1.08vw, 19px); line-height: 1.8; }
.product-info li { font-size: clamp(14px, .92vw, 16px); }
.product-info > a { font-size: 12px; padding-top: 22px; }

.projects h2 { font-size: var(--type-section-h2); }
.project-showcase { margin-top: 40px; grid-template-columns: 1.42fr .58fr; }
.project-main, .project-detail { min-height: 590px; }
.project-code span { font-size: 12px; }
.project-code strong { font-size: 34px; }
.project-location { font-size: 15px; }
.project-detail > p { font-size: 17px; }
.project-detail > strong { gap: 12px; font-size: clamp(62px, 4.4vw, 88px); }
.project-detail > strong small { margin-bottom: 10px; color: #a9d7f0; font-size: 18px; font-weight: 700; }
.project-detail h3 { font-size: clamp(28px, 2.05vw, 36px); }
.project-detail > span { font-size: 16px; }
.project-detail > a { font-size: 13px; letter-spacing: .08em; }
.project-arrows button { width: 50px; height: 50px; }

.capability-head .eyebrow { justify-content: center; margin-bottom: 28px; }
.capability-head > p:last-child { font-size: 18px; }
.process-line article:hover { z-index: 5; }
.process-line::before { z-index: 0; }
.process-icon { position: relative; z-index: 3; isolation: isolate; }
.process-icon span { display: grid; place-items: center; z-index: 7; border-radius: 999px; }
.capability-band { gap: 24px; }
.capability-band > span:nth-child(2) { letter-spacing: .13em; text-transform: none; }

.news-head { align-items: center; }
.news h2 { font-size: var(--type-section-h2); }
.news-head > a { align-self: center; display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 4px 0 0; font-size: 13px; letter-spacing: .08em; }
.featured-news { overflow: hidden; }
.news-photo > span { top: 24px; left: 24px; padding: 10px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; background: rgba(4,26,56,.82); }
.featured-news p, .news-stack p { gap: 18px; font-size: 11px; }
.featured-news h3 { font-size: clamp(32px, 2.45vw, 46px); }
.news-excerpt { font-size: clamp(16px, 1.08vw, 18px) !important; line-height: 1.75; }
.news-stack article { grid-template-columns: 176px 1fr auto; min-height: 176px; padding: 18px; }
.news-thumb { height: 140px; overflow: hidden; border-radius: 18px; }
.news-stack h3 { font-size: clamp(20px, 1.35vw, 24px); line-height: 1.38; }
.news-summary { display: block; margin-top: 10px; font-size: clamp(14px, .92vw, 15px); }
.news-stack article > a { width: 50px; height: 50px; font-size: 15px; }

.partners { padding-top: 34px; padding-bottom: 34px; grid-template-columns: 230px 1fr; }
.partners-label { color: #73859a; font-size: 13px; }
.logo-track span { font-size: clamp(18px, 1.18vw, 26px); font-weight: 700; }

.footer-cta h2 { font-size: var(--type-section-h2); }
.footer-cta > a { min-height: 64px; gap: 28px; font-size: 13px; }
.footer-contact > div { grid-template-columns: 38px 1fr; gap: 18px; }
.footer-contact > div > span:first-child { font-size: 20px; }
.footer-contact p { font-size: 15px; }
.footer-contact small { margin-bottom: 6px; font-size: 11px; letter-spacing: .14em; text-transform: none; }
.footer-bottom > p { font-size: 13px; }
.footer-bottom > div { gap: 34px; font-size: 13px; }

@media (max-width: 1199px) {
  .capability-head .eyebrow { justify-content: flex-start; }
  .project-showcase { grid-template-columns: 1fr; }
  .project-main, .project-detail { min-height: auto; }
}

@media (max-width: 760px) {
  .product-heading .eyebrow, .projects-head .eyebrow, .capability-head .eyebrow, .news-head .eyebrow, .footer-cta .eyebrow, .partners-label, .about-copy > .eyebrow { font-size: 13px; }
  .product-drag-hint { font-size: 11px; }
  .project-main { min-height: 440px; }
  .project-detail > strong small { font-size: 15px; }
  .news-head > a { min-height: 46px; font-size: 11px; }
  .partners { grid-template-columns: 1fr; }
  .partners-label { margin-bottom: 18px; }
  .footer-contact p { font-size: 14px; }
}


/* === DBCO refinement patch 2026-09-11 (round 5 - about frame cleanup) === */
.about-visual::before {
  left: 12px;
  bottom: 34px;
}
.about-visual::after {
  top: 24px;
  border-top: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
}
.about-seal {
  border-width: 8px;
}

@media (max-width: 760px) {
  .about-visual { padding: 10px 18px 26px 10px; }
  .about-visual::before { left: 10px; top: 10px; right: 24px; bottom: 28px; border-radius: 26px; }
  .about-visual::after { left: 18px; top: 18px; width: 34px; height: 12px; border-radius: 10px 0 0 0; }
  .about-frame { border-width: 8px; border-radius: 26px; }
  .about-seal { width: 118px; border-width: 6px; }
}


/* === DBCO Option C - premium soft frame === */
.about-visual {
  position: relative;
  max-width: 710px;
  padding: 22px 28px 34px 18px;
  isolation: isolate;
}

/* soft background plate */
.about-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: 4px;
  width: 42%;
  height: 34%;
  border: 0;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(202,226,244,.88), rgba(231,241,249,.62));
  box-shadow: none;
  transform: translate(10px,-4px);
  pointer-events: none;
}

/* second soft depth block */
.about-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 8px;
  width: 48%;
  height: 30%;
  border: 0;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(235,243,249,.96), rgba(215,229,240,.72));
  transform: translate(-4px,8px);
  pointer-events: none;
}

.about-frame {
  position: relative;
  z-index: 2;
  height: clamp(445px, 35vw, 605px);
  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 40px;
  background: #dce9f1 url("images/hero-treatment.png") center / cover no-repeat;
  box-shadow:
    0 28px 58px rgba(6,27,58,.16),
    0 8px 22px rgba(7,95,185,.08);
}

.about-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 18px;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: none;
  pointer-events: none;
}

.about-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.02), transparent 62%, rgba(0,29,63,.13));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  pointer-events: none;
}

.about-frame img {
  border-radius: inherit;
}

.about-seal {
  z-index: 5;
  right: 4px;
  bottom: 2px;
  width: 142px;
  border: 7px solid #fff;
  background: linear-gradient(145deg, #0a6bc5, #075fb9);
  box-shadow: 0 18px 40px rgba(6,44,86,.22);
}

.about-seal strong { font-size: 20px; }
.about-seal span { font-size: 9px; }
.about-visual > p { display: none !important; }

@media (max-width: 760px) {
  .about-visual { padding: 16px 18px 28px 10px; }
  .about-visual::before { width: 46%; height: 28%; border-radius: 26px; transform: translate(4px,0); }
  .about-visual::after { width: 52%; height: 24%; border-radius: 26px; transform: translate(-2px,5px); }
  .about-frame { border-width: 6px; border-radius: 28px; }
  .about-frame::before { left: 14px; top: 14px; width: 42px; height: 3px; }
  .about-seal { width: 116px; border-width: 6px; right: 0; bottom: 0; }
  .about-seal strong { font-size: 17px; }
}


/* === DBCO fix 2026-09-11 (capability step-number clipping) === */
.process-icon { overflow: visible; }
.process-icon span {
  line-height: 1;
}
@media (max-width: 760px) {
  .process-line { padding-top: 10px; }
  .process-line article { padding-top: 8px; }
  .process-icon span { top: 0; right: -2px; width: 32px; height: 32px; }
}


/* === DBCO hero stat count-up === */
.hero-stats .count-up,
.hero-stats .count-range {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}
.hero-stats .count-range .range-start,
.hero-stats .count-range .range-end {
  display: inline-block;
  text-align: center;
}


/* === DBCO combined micro-fixes 2026-09-11 === */
/* Keep every decorative heading line vertically centered with its label. */
.eyebrow { align-items: center !important; }
.eyebrow > span:first-child,
.about-copy > .eyebrow > span:first-child,
.product-heading .eyebrow > span:first-child,
.projects-head .eyebrow > span:first-child,
.capability-head .eyebrow > span:first-child,
.news-head .eyebrow > span:first-child,
.footer-cta .eyebrow > span:first-child,
.partners-label > span:first-child {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

/* Precisely center the dash in DN 50–600 instead of relying on font glyph metrics. */
.hero-stats .count-range {
  white-space: nowrap;
  line-height: 1;
}
.hero-stats .count-range .range-prefix,
.hero-stats .count-range .range-start,
.hero-stats .count-range .range-end {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.hero-stats .count-range .range-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Project thumbnail buttons stay clickable even though the row is draggable. */
.project-thumbs button {
  pointer-events: auto;
  touch-action: pan-y;
}
.project-thumbs button * { pointer-events: none; }


/* === DBCO refinement patch 2026-09-11 (stats scale + capability alignment/effects) === */
/* Hero stats: scale up numbers for stronger visual hierarchy */
.hero-stats > div {
  position: relative;
  min-height: 124px;
  padding: 24px clamp(20px, 2.2vw, 42px);
  overflow: hidden;
}
.hero-stats > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(75,184,235,.08) 35%, transparent 70%);
  transform: translateX(-125%);
  animation: heroStatSweep 7.2s ease-in-out infinite;
  pointer-events: none;
}
.hero-stats > div:nth-child(2)::before { animation-delay: .45s; }
.hero-stats > div:nth-child(3)::before { animation-delay: .9s; }
.hero-stats > div:nth-child(4)::before { animation-delay: 1.35s; }
.hero-stats strong {
  font-size: clamp(38px, 2.8vw, 58px);
  font-weight: 600;
  letter-spacing: -.045em;
}
.hero-stats sup { font-size: .4em; }
.hero-stats > div > span {
  margin-top: 10px;
  font-size: var(--type-meta);
  letter-spacing: .14em;
}
.hero-stats .count-range {
  display: inline-flex;
  align-items: center;
  gap: .12em;
  font-weight: 600;
  letter-spacing: -.04em;
}
.hero-stats .count-range .range-prefix {
  font-weight: 700;
}
.hero-stats .count-range .range-separator {
  width: .48em;
  font-size: .8em;
  transform: translateY(-.02em);
}

/* Capability section: center connector line and add refined motion */
.capability { position: relative; overflow: visible; }
.capability::after {
  content: "";
  position: absolute;
  inset: auto auto 26% 8%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(75,184,235,.08), transparent 68%);
  filter: blur(2px);
  pointer-events: none;
}
.process-line article {
  position: relative;
  z-index: 1;
  padding-top: 0;
}
.process-line article:nth-child(1) { --float-delay: 0s; }
.process-line article:nth-child(2) { --float-delay: .35s; }
.process-line article:nth-child(3) { --float-delay: .7s; }
.process-line article:nth-child(4) { --float-delay: 1.05s; }
.process-line article:nth-child(5) { --float-delay: 1.4s; }
.capability.capability-live .process-line article {
  animation-delay: var(--float-delay);
}
.process-icon::before {
  content: "";
  position: absolute;
}
.capability.capability-live .process-icon::before {
  animation-delay: var(--float-delay);
}
.process-icon span {
  font-weight: 800;
}
.process-glyph {
  position: relative;
  z-index: 2;
  color: var(--blue);
}
.process-line h3 {
  margin-bottom: 12px;
  font-size: 22px;
}
.process-line p {
  font-size: 16px;
  line-height: 1.72;
}
.capability-band {
  margin-top: 72px;
  padding: 28px 40px;
  box-shadow: 0 16px 34px rgba(6, 40, 77, .06);
}
.capability-band strong { font-size: 17px; }
.capability-band > span:first-child { font-size: 15px; }
.capability-band > span:nth-child(2) { font-size: 13px; }

@keyframes heroStatSweep {
  0%, 14% { transform: translateX(-125%); opacity: 0; }
  18%, 34% { transform: translateX(105%); opacity: 1; }
  100% { transform: translateX(105%); opacity: 0; }
}
@keyframes capabilityLineFlow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
@keyframes capabilityFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes capabilityPulse {
  0% { opacity: 0; transform: scale(.9); }
  18% { opacity: .6; }
  70% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.18); }
}

@media (max-width: 1199px) {
  .hero-stats strong { font-size: clamp(32px, 3.2vw, 46px); }
  .hero-stats .count-range { font-size: clamp(30px, 3.1vw, 42px); }
  .process-line { --step-icon-size: 112px; --step-top-gap: 28px; }
  .process-line::before { left: calc(10% + 8px); right: calc(10% + 8px); }
}
@media (max-width: 760px) {
  .hero-stats > div { min-height: 84px; padding: 14px 15px; }
  .hero-stats strong { font-size: 24px; }
  .hero-stats .count-range { font-size: 24px; }
  .hero-stats > div > span { margin-top: 6px; font-size: var(--type-meta); }
  .process-line { --step-icon-size: 72px; --step-top-gap: 10px; }
  .process-line::before { display: none; }
  .capability::after { display: none; }
  .capability-band { padding: 22px; }
  .capability-band strong { font-size: 15px; }
}


/* === DBCO refinement patch 2026-09-11 (restore block shape + smoother effects + safe images) === */
/* Keep the original block-shaped step cards instead of circles */
.process-line {
  --step-icon-size: 118px;
  --step-top-gap: 24px;
  margin-top: 74px;
}
.process-line::before {
  left: calc(10% + 6px);
  right: calc(10% + 6px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(7,95,185,0) 0%, rgba(75,184,235,.42) 18%, rgba(7,95,185,.58) 50%, rgba(75,184,235,.42) 82%, rgba(7,95,185,0) 100%);
  background-size: 180% 100%;
  animation: capabilityLineFlowSoft 10s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(75,184,235,.08);
}
.process-line article {
  transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .55s cubic-bezier(.22,.61,.36,1);
}
.capability.capability-live .process-line article {
  animation: capabilityFloatSoft 6.8s ease-in-out infinite;
}
.process-icon {
  width: var(--step-icon-size);
  margin: 0 auto 30px;
  border: 1px solid rgba(174, 192, 207, .8);
  border-radius: 38% 62% 53% 47% / 48% 42% 58% 52%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  box-shadow: 0 14px 32px rgba(6, 40, 77, .06);
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s cubic-bezier(.22,.61,.36,1), background .55s cubic-bezier(.22,.61,.36,1), border-color .55s cubic-bezier(.22,.61,.36,1);
}
.process-icon::before {
  inset: -8px;
  border-radius: 38% 62% 53% 47% / 48% 42% 58% 52%;
  border: 1px dashed rgba(75,184,235,.26);
  opacity: 0;
  transform: scale(.94);
}
.capability.capability-live .process-icon::before {
  animation: capabilityPulseSoft 4.8s ease-out infinite;
}
.process-icon span {
  top: -4px;
  right: -4px;
  width: 36px;
  height: 36px;
  font-size: 11px;
  box-shadow: 0 10px 18px rgba(6, 27, 58, .14);
}
.process-glyph {
  font-size: 38px;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), color .45s cubic-bezier(.22,.61,.36,1);
}
.process-line article:hover .process-icon {
  border-color: rgba(75,184,235,.58);
  background: linear-gradient(180deg, #ffffff 0%, #f1f8fe 100%);
  box-shadow: 0 20px 38px rgba(7,95,185,.12);
}
.process-line article:hover .process-glyph {
  transform: scale(1.06);
  color: var(--blue);
}
.process-line article:hover h3 { color: var(--blue); }

/* Make image motion gentler so no visual crop feels abrupt */
.about-frame img,
.product-image > img,
.project-main > img,
.news-photo img {
  transform-origin: center center;
}
.about-frame:hover img,
.product-image:hover > img,
.featured-news:hover .news-photo img {
  transform: scale(1.02);
}

@keyframes capabilityLineFlowSoft {
  0% { background-position: 0% 50%; opacity: .88; }
  50% { background-position: 100% 50%; opacity: 1; }
  100% { background-position: 180% 50%; opacity: .88; }
}
@keyframes capabilityFloatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes capabilityPulseSoft {
  0% { opacity: 0; transform: scale(.95); }
  20% { opacity: .28; }
  70% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (max-width: 1199px) {
  .process-line { --step-icon-size: 112px; --step-top-gap: 22px; }
}
@media (max-width: 760px) {
  .process-line { --step-icon-size: 72px; --step-top-gap: 10px; }
  .process-line article:hover { transform: none; }
  .process-line article:hover .process-icon { transform: none; }
}

/* === DBCO HTML parity patch 2026-09-12 ===
   Align the Laravel/CMS markup with the original demo visual selectors.
   Fixes: about proof columns, demo CTA icon, project thumbnail copy,
   capability copy visibility and the original hero counter structure. */

/* About proof: the visual CSS was designed for index + icon + copy. */
.about-proof > div {
  grid-template-columns: 34px 50px minmax(0, 1fr);
}
.about-proof .proof-icon {
  grid-column: 2;
  display: grid;
  place-items: center;
  flex: none;
}
.about-proof .proof-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-proof .proof-copy {
  grid-column: 3;
  min-width: 0;
}
.about-proof .proof-copy b,
.about-proof .proof-copy > span {
  width: auto;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.outline-link > span {
  flex: 0 0 auto;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.outline-link > span svg {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Project thumbnails: image row and information row must not occupy the same grid cell. */
.project-thumbs button {
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 88px minmax(52px, auto);
  align-content: start;
}
.project-thumbs button .project-thumb-image {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  width: 100%;
  height: 88px;
  min-width: 0;
}
.project-thumbs button .project-thumb-copy {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  padding-top: 1px;
}
.project-thumbs button .project-thumb-copy strong,
.project-thumbs button .project-thumb-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-thumbs button .project-thumb-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.project-thumbs button .project-thumb-copy small {
  margin-top: 5px;
  white-space: nowrap;
}
.project-thumbs button > i {
  z-index: 4;
}

/* Keep all five capability items visibly paired with their title and description. */
.process-line article {
  min-width: 0;
}
.process-line h3,
.process-line p {
  position: relative;
  z-index: 2;
}
@media (min-width: 761px) {
  .process-line h3 {
    min-height: 1.45em;
  }
  .process-line p {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Restore the demo counter hierarchy. */
.hero-stats .count-up,
.hero-stats .count-range {
  position: relative;
  z-index: 1;
}
.hero-stats .count-up sup {
  margin-left: .04em;
}

@media (max-width: 760px) {
  .about-proof > div {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }
  .about-proof .proof-icon {
    width: 42px;
    height: 42px;
  }
  .about-proof .proof-icon svg {
    width: 21px;
    height: 21px;
  }
  .project-thumbs button {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: 82px minmax(52px, auto);
  }
  .project-thumbs button .project-thumb-image {
    height: 82px;
  }
}

/* === DBCO capability vertical clipping fix 2026-09-12 ===
   Root cause: the global [data-reveal].is-visible rule applies a clip-path
   to each capability article, which clips the step badge/pulse/hover motion
   even when overflow is visible. Keep reveal opacity/transform, but disable
   clipping for these five process items and reserve a little vertical room. */
.process-line article[data-reveal],
.process-line article[data-reveal].is-visible {
  clip-path: none !important;
  overflow: visible !important;
}
.process-line {
  padding-top: 42px;
  padding-bottom: 10px;
  overflow: visible !important;
  align-items: start;
}
.process-line::before {
  top: calc(42px + (var(--step-icon-size) / 2));
}
.process-line article {
  overflow: visible !important;
  transform-origin: center top;
}
.process-icon,
.process-icon::before,
.process-icon span {
  overflow: visible;
}
/* Keep the interaction alive but inside a safe vertical travel range. */
.capability.capability-live .process-line article {
  animation-name: capabilityFloatSafe;
}
.process-line article:hover {
  transform: translateY(-2px);
}
.process-line article:hover .process-icon {
  transform: translateY(-2px) rotate(-1.5deg);
}
@keyframes capabilityFloatSafe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@media (max-width: 1199px) {
  .process-line { padding-top: 36px; }
  .process-line::before { top: calc(36px + (var(--step-icon-size) / 2)); }
}
@media (max-width: 760px) {
  .process-line { padding-top: 14px; padding-bottom: 0; }
  .process-line article[data-reveal],
  .process-line article[data-reveal].is-visible { clip-path: none !important; }
}

/* === DBCO responsive + mobile swipe refinement 2026-09-13 (R3) ===
   Goals: stable product/project composition from desktop to phone, native
   momentum on horizontal rails, and non-janky horizontal swipe on touch. */

/* Gesture surfaces: keep vertical page scrolling native while allowing JS to
   recognise a deliberate horizontal swipe. The `translate` property is kept
   independent from reveal/parallax transforms. */
.product-showcase,
.project-main {
  --swipe-x: 0px;
  translate: var(--swipe-x) 0;
  transition: translate .22s cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y pinch-zoom;
  will-change: translate;
}
.product-showcase.is-dragging,
.project-main.is-dragging {
  transition: none;
}

/* Horizontal choice rails use the browser's own inertial scrolling on touch. */
.product-nav,
.project-thumbs {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-nav::-webkit-scrollbar,
.project-thumbs::-webkit-scrollbar { display: none; }

/* Prevent images/text selection from stealing swipe gestures. */
.product-showcase img,
.project-main img,
.product-nav img,
.project-thumbs img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Laptop/tablet: avoid an over-tall product panel and keep project copy readable. */
@media (max-width: 1320px) and (min-width: 1200px) {
  .products,
  .projects { padding-left: 36px; padding-right: 36px; }
  .product-layout { grid-template-columns: minmax(250px,.56fr) minmax(0,1.44fr); gap: 34px; }
  .product-showcase { grid-template-columns: minmax(0,1.08fr) minmax(310px,.92fr); min-height: 600px; }
  .product-image { min-height: 600px; }
  .product-info { padding: 38px 34px; }
  .project-showcase { grid-template-columns: minmax(0,1.28fr) minmax(330px,.72fr); }
  .project-main,
  .project-detail { min-height: 590px; }
  .project-detail { padding: 36px 32px; }
}

/* Tablet: stack the large panels, but keep horizontal rails easy to browse. */
@media (max-width: 1199px) {
  .products,
  .projects { padding-left: 24px; padding-right: 24px; }
  .product-layout { margin-top: 42px; gap: 24px; }
  .product-nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 3px 2px 10px;
    border-top: 0;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
  }
  .product-nav button,
  .product-nav button:nth-child(odd) {
    flex: 0 0 min(42vw, 360px);
    min-height: 102px;
    padding: 16px 16px;
    border: 1px solid #ffffff24;
    border-radius: 18px 8px 18px 8px;
    scroll-snap-align: start;
  }
  .product-nav button:hover,
  .product-nav button.active { padding-left: 18px; }
  .product-showcase { grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); min-height: 560px; }
  .product-image { min-height: 560px; }
  .product-info { padding: 34px 30px; }

  .project-showcase { margin-top: 42px; grid-template-columns: 1fr; }
  .project-main { min-height: clamp(430px, 59vw, 590px); border-radius: 30px 30px 0 0; }
  .project-detail { min-height: auto; padding: 34px 32px; border-radius: 0 0 30px 10px; }
  .project-detail > strong { font-size: clamp(52px, 8vw, 72px); }
  .project-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-top: 12px;
    padding: 4px 2px 16px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
  }
  .project-thumbs button {
    flex: 0 0 min(38vw, 300px);
    min-height: 170px;
    scroll-snap-align: start;
  }
}

/* Phones: full-width cards, compact heights, finger-sized controls, smooth rails. */
@media (max-width: 760px) {
  .products,
  .projects {
    padding-top: 84px;
    padding-bottom: 84px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .product-heading,
  .projects-head { padding: 0; }
  .products h2,
  .projects h2 { font-size: var(--type-section-h2); line-height: 1.06; }
  .product-drag-hint { margin-top: 14px; margin-bottom: 0; font-size: 10px; line-height: 1.5; }

  .product-layout { margin-top: 30px; gap: 16px; }
  .product-nav {
    margin: 0 -16px;
    padding: 2px 16px 10px;
    gap: 10px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    touch-action: pan-x pan-y;
  }
  .product-nav button,
  .product-nav button:nth-child(odd) {
    flex: 0 0 min(82vw, 330px);
    min-height: 92px;
    grid-template-columns: 30px minmax(0,1fr) 18px;
    gap: 3px 9px;
    padding: 14px 14px;
    border-radius: 17px 8px 17px 8px;
    scroll-snap-align: start;
  }
  .product-nav button:hover,
  .product-nav button.active { padding-left: 14px; }
  .product-nav button > span { font-size: 10px; }
  .product-nav button strong { font-size: 17px; line-height: 1.25; }
  .product-nav button small { font-size: 11px; line-height: 1.35; }

  .product-showcase {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 28px 28px 9px 28px;
    box-shadow: 0 22px 56px #00091d52;
  }
  .product-image {
    min-height: 0;
    height: clamp(300px, 76vw, 410px);
  }
  .product-image-label { left: 18px; bottom: 17px; font-size: 7px; }
  .quality-seal { width: 72px; top: 17px; right: 15px; border-width: 4px; }
  .quality-seal svg { width: 14px; }
  .quality-seal span { font-size: 7px; }
  .product-info { padding: 26px 20px 24px; justify-content: flex-start; }
  .product-info > p { margin-bottom: 13px; font-size: 10px; }
  .product-info h3 { font-size: clamp(29px, 8vw, 36px); line-height: 1.12; }
  .product-info > strong { margin-top: 10px; font-size: 14px; }
  .product-info > span { margin-top: 18px; font-size: 14px; line-height: 1.7; }
  .product-info ul { margin: 20px 0 22px; padding: 16px 0; }
  .product-info li { padding: 5px 0; font-size: 12px; line-height: 1.45; }
  .product-info > a { min-height: 44px; font-size: 10px; }

  .project-showcase { margin-top: 30px; }
  .project-main {
    min-height: 0;
    height: clamp(320px, 82vw, 440px);
    border-radius: 28px 28px 0 0;
  }
  .project-code { top: 20px; left: 20px; }
  .project-code span { font-size: 8px; }
  .project-code strong { font-size: 20px; }
  .project-location { left: 20px; right: 20px; bottom: 20px; font-size: 11px; }
  .project-detail { padding: 26px 20px 24px; border-radius: 0 0 28px 9px; }
  .project-detail > p { margin-bottom: 18px; font-size: 12px; }
  .project-detail > strong { font-size: clamp(44px, 13vw, 60px); white-space: normal; flex-wrap: wrap; }
  .project-detail > strong small { margin-bottom: 4px; font-size: 11px; }
  .project-detail h3 { margin: 20px 0 10px; font-size: clamp(22px, 6vw, 28px); line-height: 1.3; }
  .project-detail > span { font-size: 14px; line-height: 1.65; }
  .project-detail > a { margin-top: 24px; padding-top: 16px; min-height: 44px; font-size: 10px; }
  .project-arrows { margin-top: 20px; }
  .project-arrows button { width: 48px; height: 48px; }

  .project-thumbs {
    margin: 12px -16px 0;
    padding: 4px 16px 16px;
    gap: 10px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    touch-action: pan-x pan-y;
  }
  .project-thumbs button {
    flex: 0 0 min(79vw, 310px);
    min-height: 170px;
    grid-template-columns: 30px minmax(0,1fr);
    grid-template-rows: 92px minmax(50px,auto);
    padding: 10px 12px 14px;
    border-radius: 18px 8px 18px 8px;
    scroll-snap-align: start;
    transform: none;
  }
  .project-thumbs button:hover,
  .project-thumbs button.active { transform: none; }
  .project-thumbs button .project-thumb-image { height: 92px; border-radius: 13px 6px 13px 6px; }
  .project-thumb-index { font-size: 9px; }
  .project-thumbs button strong { font-size: 13px; line-height: 1.35; }
  .project-thumbs button small { font-size: 10px; }
}

@media (max-width: 430px) {
  .products,
  .projects { padding-left: 14px; padding-right: 14px; }
  .product-nav { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; scroll-padding-inline: 14px; }
  .project-thumbs { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; scroll-padding-inline: 14px; }
  .product-nav button { flex-basis: 84vw; }
  .product-image { height: clamp(286px, 78vw, 350px); }
  .project-main { height: clamp(300px, 84vw, 380px); }
  .project-thumbs button { flex-basis: 82vw; }
}

/* Coarse pointers must feel native: no hover lift, no grab cursor. */
@media (hover: none), (pointer: coarse) {
  .product-nav,
  .project-thumbs,
  .product-showcase,
  .project-main { cursor: auto; }
  .product-nav button:hover,
  .project-thumbs button:hover { transform: none; }
  .product-image:hover > img,
  .project-thumbs button:hover .project-thumb-image img { transform: none; }
}

/* Homepage-wide responsive safety net (R3). */
@media (max-width: 1199px) {
  .product-layout,
  .product-showcase,
  .product-image,
  .product-info,
  .project-showcase,
  .project-main,
  .project-detail,
  .news-head,
  .featured-news,
  .news-stack,
  .process-line,
  .about-copy,
  .about-visual { min-width: 0; }
  .product-info h3,
  .project-detail h3,
  .project-detail > span,
  .news h3,
  .process-line h3,
  .process-line p { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .products::before,
  .projects::before { font-size: 26vw; opacity: .7; }
  .product-orbit { opacity: .55; }
  .project-detail,
  .product-info { width: 100%; }
  .news-stack article > div,
  .footer-contact,
  .footer-bottom > div { min-width: 0; }
  .news-stack h3,
  .news-summary { overflow-wrap: anywhere; }
}

/* === DBCO mobile products rebuild R4 · 2026-09-13 ===
   Scope is intentionally phone-only. Desktop/tablet >=761px remains unchanged. */
.product-mobile-controls { display: none; }

@media (max-width: 760px) {
  /* Section rhythm */
  .products {
    padding: 76px 16px 82px;
    overflow: hidden;
  }
  .product-heading { max-width: 100%; }
  .products h2 {
    max-width: 12ch;
    font-size: var(--type-section-h2);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  .product-drag-hint {
    margin: 13px 0 0;
    max-width: 32ch;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: .06em;
  }
  .product-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 25px;
  }

  /* Compact selector: two choices are visible instead of one oversized card. */
  .product-nav {
    order: 1;
    display: flex;
    gap: 8px;
    margin: 0 -16px;
    padding: 2px 16px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y;
  }
  .product-nav button,
  .product-nav button:nth-child(odd) {
    flex: 0 0 min(52vw, 210px);
    min-height: 68px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 15px 6px 15px 6px;
    background: rgba(255,255,255,.035);
    scroll-snap-align: start;
    box-shadow: none;
  }
  .product-nav button:hover,
  .product-nav button.active {
    padding-left: 12px;
    background: rgba(255,255,255,.105);
    border-color: rgba(128,209,248,.6) !important;
  }
  .product-nav button > span {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    color: #83d4fa;
    font-size: 10px;
    font-weight: 800;
  }
  .product-nav button strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .product-nav button small,
  .product-nav button .product-jump { display: none; }

  /* Mobile-only swipe/status control. */
  .product-mobile-controls {
    order: 2;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 42px;
    align-items: center;
    gap: 10px;
    margin: 5px 0 13px;
  }
  .product-mobile-controls > button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
  }
  .product-mobile-controls > button:active { transform: scale(.95); }
  .product-mobile-controls svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .product-mobile-status {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
  }
  .product-mobile-swipe {
    color: #9bb8cf;
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: .06em;
  }
  .product-mobile-status strong {
    flex: 0 0 auto;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .product-mobile-status strong small {
    margin-left: 3px;
    color: #7696b0;
    font-size: 10px;
    font-weight: 700;
  }

  /* Rebuilt showcase: visual card + clean copy instead of one very tall framed block. */
  .product-showcase {
    order: 3;
    min-height: 0;
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    touch-action: pan-y pinch-zoom;
  }
  .product-image {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px 24px 7px 24px;
    background: #dfe6ec;
    box-shadow: 0 22px 48px rgba(0,9,29,.34);
  }
  .product-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: none;
  }
  .product-image::after {
    background: linear-gradient(0deg, rgba(2,22,46,.62), transparent 46%);
  }
  .product-image-label {
    left: 16px;
    right: 82px;
    bottom: 15px;
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .11em;
  }
  .quality-seal {
    width: 60px;
    height: 60px;
    top: 14px;
    right: 13px;
    border-width: 3px;
    box-shadow: 0 10px 24px rgba(0,14,35,.22);
  }
  .quality-seal svg { width: 12px; }
  .quality-seal span { font-size: 6px; line-height: 1.18; }

  .product-info {
    width: 100%;
    padding: 22px 2px 0;
    justify-content: flex-start;
    background: transparent;
  }
  .product-info > p {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 6px 9px;
    color: #9edcff;
    border: 1px solid rgba(128,209,248,.24);
    border-radius: 999px;
    background: rgba(128,209,248,.07);
    font-size: 9px;
    letter-spacing: .09em;
  }
  .product-info h3 {
    max-width: 15ch;
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.08;
    letter-spacing: -.025em;
    overflow-wrap: normal;
  }
  .product-info > strong {
    margin-top: 8px;
    color: #b6cde0;
    font-size: 13px;
    line-height: 1.45;
  }
  .product-info > span {
    margin-top: 14px;
    color: #c5d4e0;
    font-size: 13px;
    line-height: 1.62;
  }
  .product-info ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 18px 0 18px;
    padding: 0;
    border: 0;
  }
  .product-info li {
    min-height: 42px;
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    color: #e0eaf2;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px 5px 12px 5px;
    background: rgba(255,255,255,.045);
    font-size: 12px;
    line-height: 1.4;
  }
  .product-info li svg {
    width: 15px;
    color: #79d0f9;
  }
  .product-info > a {
    min-height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 0 16px 0 18px;
    color: #05284d;
    border-radius: 15px 6px 15px 6px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(0,7,24,.2);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .product-info > a svg { width: 18px; }

  /* Mobile stability: remove desktop-only parallax/hover transforms in the product visual. */
  .product-image > img {
    translate: 0 0 !important;
    will-change: auto;
  }
  .product-image:hover > img { transform: none; }
}

@media (max-width: 430px) {
  .products { padding-left: 14px; padding-right: 14px; }
  .product-nav {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    scroll-padding-inline: 14px;
  }
  .product-nav button,
  .product-nav button:nth-child(odd) { flex-basis: 56vw; }
  .product-mobile-controls { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 8px; }
  .product-mobile-controls > button { width: 40px; height: 40px; }
  .product-mobile-swipe { max-width: 18ch; }
  .product-image { aspect-ratio: 1.22 / 1; }
  .product-info h3 { font-size: clamp(27px, 8.4vw, 32px); }
}

@media (max-width: 360px) {
  .product-nav button,
  .product-nav button:nth-child(odd) { flex-basis: 62vw; }
  .product-mobile-swipe { display: none; }
  .product-mobile-status { justify-content: center; }
  .product-image { aspect-ratio: 1.16 / 1; }
  .product-info { padding-top: 19px; }
  .product-info > span { font-size: 12.5px; }
}

/* === DBCO mobile homepage final responsive pass R5 · 2026-09-13 ===
   Purpose: compact, readable portrait composition without touching desktop.
   Scope: phones + portrait tablets only (<=820px). */
@media (max-width: 1199px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .site-header { padding: max(7px, env(safe-area-inset-top)) 8px 0; }
  .header-shell { min-height: 60px; padding: 0 8px 0 13px; border-radius: 16px; }
  .site-header.scrolled .header-shell { min-height: 56px; }
  .site-header .brand-mark { width: 36px; }
  .site-header .brand-type strong { font-size: 20px; }
  .site-header .brand-type small { display: none; }
  .menu-button { width: 40px; height: 40px; }

  /* Hero: keep all copy below the fixed header and keep the whole slide compact. */
  .hero {
    height: clamp(620px, 92svh, 760px);
    min-height: 0;
    max-height: 760px;
    overflow: hidden;
  }
  .hero-slide img { object-position: 58% center; }
  .hero-wash {
    background:
      linear-gradient(90deg, rgba(3,18,40,.96) 0%, rgba(3,22,48,.78) 56%, rgba(3,20,43,.35) 100%),
      linear-gradient(0deg, rgba(3,20,43,.94) 0%, rgba(3,20,43,.20) 55%, rgba(3,20,43,.42) 100%);
  }
  .hero-aura { display: none; }
  .hero-grid { opacity: .065; background-size: 52px 52px; }
  .hero-copy {
    left: 16px;
    right: 16px;
    top: calc(max(80px, env(safe-area-inset-top) + 72px));
    width: auto;
    max-width: 540px;
    transform: none;
    animation: none;
  }
  .hero .eyebrow { max-width: 100%; margin-bottom: 11px; font-size: 8px; line-height: 1.35; }
  .hero .eyebrow > span:first-child { flex-basis: 34px; width: 34px; }
  .hero h1 {
    max-width: 18ch;
    margin: 0;
    font-size: var(--type-hero);
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .hero h1 br { display: none; }
  .hero h1 em::before { content: " "; }
  .hero-lead {
    width: 100%;
    max-width: 42ch;
    margin: 14px 0 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: rgba(255,255,255,.82);
    font-size: 12.5px;
    line-height: 1.52;
  }
  .hero-actions { display: block; }
  .hero .primary-button {
    width: min(255px, 100%);
    min-height: 45px;
    gap: 20px;
    padding: 0 15px 0 18px;
    font-size: 9px;
  }
  .hero .text-button { display: none; }
  .hero-meta, .hero-drag-hint { display: none; }
  .hero-slider-nav {
    left: 16px;
    right: 16px;
    bottom: 86px;
    min-height: 40px;
    justify-content: space-between;
    gap: 10px;
  }
  .hero-slider-nav .slide-count { display: flex; }
  .hero-slider-nav .slide-count strong { font-size: 20px; }
  .hero-slider-nav .slide-bars { display: none; }
  .hero-slider-nav > div:last-child button { width: 40px; height: 40px; }
  .hero-stats {
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 74px;
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px 16px 0 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-stats::-webkit-scrollbar { display: none; }
  .hero-stats > div {
    flex: 0 0 min(44vw, 175px);
    min-height: 72px;
    padding: 10px 12px;
    border-right: 1px solid #ffffff24 !important;
    border-bottom: 0 !important;
    scroll-snap-align: start;
  }
  .hero-stats strong { font-size: 19px; }
  .hero-stats span { margin-top: 4px; font-size: var(--type-meta); line-height: 1.25; }

  /* Shared mobile section scale. */
  .about h2, .products h2, .projects h2, .capability h2, .news h2,
  .footer-cta h2 {
    font-size: var(--type-section-h2);
    line-height: 1.06;
    letter-spacing: -.035em;
  }
  .about, .products, .projects, .capability, .news { padding-left: 16px; padding-right: 16px; }
  .eyebrow { margin-bottom: 12px; }

  /* About: compact visual, readable proof cards, horizontally swipeable solution cards. */
  .about {
    padding-top: 66px;
    padding-bottom: 62px;
    gap: 28px;
  }
  .section-index { top: 22px; right: 16px; }
  .about-visual { width: 100%; max-width: 480px; padding: 0 18px 20px 0; }
  .about-visual::before { left: -7px; right: 27px; top: -7px; bottom: 30px; border-radius: 50px 16px 50px 16px; }
  .about-visual::after { top: 26px; width: 38px; height: 38px; }
  .about-frame { height: clamp(225px, 66vw, 300px); border-width: 4px; border-radius: 50px 16px 50px 16px; }
  .about-seal { width: 82px; border-width: 4px; }
  .about-seal strong { font-size: 13px; }
  .about-seal span { font-size: 6px; }
  .about-copy { max-width: 100%; }
  .about-copy > .eyebrow { font-size: 11px; }
  .about-lead { margin: 16px 0 18px; font-size: 13px; line-height: 1.62; }
  .about-proof {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .about-proof > div,
  .about-proof > div + div {
    min-width: 0;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px 5px 14px 5px;
    background: #f8fbfd;
  }
  .about-proof > div > strong { padding: 0; font-size: 9px; }
  .about-proof .proof-icon { display: none; }
  .about-proof p { min-width: 0; }
  .about-proof b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
  .about-proof p > span { margin-top: 4px; font-size: 10px; line-height: 1.4; }
  .outline-link { min-height: 48px; width: min(100%, 290px); }
  .solution-ribbon {
    width: auto;
    margin: 30px -16px 0;
    padding: 2px 16px 12px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: visible;
    border: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .solution-ribbon::-webkit-scrollbar { display: none; }
  .solution-ribbon article,
  .solution-ribbon article:nth-child(2) {
    flex: 0 0 min(72vw, 250px);
    min-height: 118px;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 10px;
    padding: 22px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 18px 7px 18px 7px;
    scroll-snap-align: start;
  }
  .solution-ribbon article > svg:first-of-type { width: 25px; }
  .solution-ribbon h3 { font-size: 17px; }
  .solution-ribbon p { font-size: 11px; line-height: 1.45; }

  /* Product: keep R4 behaviour but reduce the vertical footprint further. */
  .products { padding-top: 66px; padding-bottom: 68px; }
  .products h2 { max-width: 14ch; }
  .product-layout { margin-top: 20px; }
  .product-nav { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .product-nav button,
  .product-nav button:nth-child(odd) { flex-basis: min(48vw, 195px); min-height: 60px; padding: 8px 10px; }
  .product-nav button strong { font-size: 13px; }
  .product-mobile-controls { margin: 3px 0 10px; }
  .product-image { aspect-ratio: 1.58 / 1; border-radius: 20px 20px 6px 20px; }
  .quality-seal { width: 54px; height: 54px; top: 10px; right: 10px; }
  .product-info { padding-top: 17px; }
  .product-info h3 { max-width: none; font-size: clamp(25px, 7vw, 31px); }
  .product-info > strong { font-size: 12px; }
  .product-info > span {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.52;
  }
  .product-info ul { gap: 5px; margin: 13px 0 14px; }
  .product-info li { min-height: 36px; padding: 7px 9px; font-size: 11px; }
  .product-info > a { min-height: 46px; }

  /* Projects: image + information share one card so the active project fits one portrait screen. */
  .projects { padding-top: 66px; padding-bottom: 62px; }
  .projects::before { font-size: 24vw; }
  .projects-head { max-width: 100%; padding: 0; }
  .project-showcase {
    position: relative;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "project-card" "project-thumbs";
  }
  .project-main,
  .project-detail {
    grid-area: project-card;
    min-width: 0;
    min-height: 0;
  }
  .project-main {
    height: clamp(320px, 55svh, 410px);
    border-radius: 24px 24px 8px 24px;
    box-shadow: 0 20px 44px rgba(5,40,77,.18);
  }
  .project-shade {
    background: linear-gradient(0deg, rgba(3,18,40,.98) 0%, rgba(3,18,40,.82) 34%, rgba(3,18,40,.08) 68%), linear-gradient(90deg, rgba(3,18,40,.30), transparent 66%);
  }
  .project-code {
    top: 15px;
    left: auto;
    right: 15px;
    z-index: 5;
    align-items: flex-end;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    background: rgba(3,18,40,.44);
    backdrop-filter: blur(8px);
  }
  .project-code span { font-size: 6px; }
  .project-code strong { font-size: 15px; }
  .project-location {
    z-index: 5;
    top: 15px;
    left: 15px;
    right: auto;
    bottom: auto;
    max-width: calc(100% - 120px);
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(3,18,40,.5);
    backdrop-filter: blur(8px);
    font-size: 9px;
    line-height: 1.25;
  }
  .project-detail {
    z-index: 4;
    align-self: end;
    width: 100%;
    min-height: 0;
    padding: 94px 16px 15px;
    justify-content: flex-end;
    color: #fff;
    border-radius: 0 0 8px 24px;
    background: linear-gradient(0deg, rgba(3,18,40,.98) 0%, rgba(3,18,40,.80) 54%, transparent 100%);
    pointer-events: none;
  }
  .project-detail > * { pointer-events: auto; }
  .project-detail > p { position: absolute; right: 16px; bottom: 122px; margin: 0; font-size: 9px; }
  .project-detail > strong { margin: 0; font-size: clamp(28px, 8vw, 38px); line-height: .95; }
  .project-detail > strong small { margin-bottom: 2px; font-size: 9px; }
  .project-detail h3 {
    max-width: 18ch;
    margin: 9px 0 4px;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.18;
    text-wrap: balance;
  }
  .project-detail > span {
    max-width: 34ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #c3d2df;
    font-size: 11px;
    line-height: 1.45;
  }
  .project-detail > a {
    width: calc(100% - 96px);
    min-height: 34px;
    margin-top: 9px;
    padding-top: 9px;
    font-size: 8px;
  }
  .project-arrows {
    position: absolute;
    right: 15px;
    bottom: 13px;
    z-index: 6;
    margin: 0;
  }
  .project-arrows button { width: 38px; height: 38px; background: rgba(3,18,40,.35); backdrop-filter: blur(8px); }
  .project-thumbs {
    grid-area: project-thumbs;
    width: auto;
    margin: 9px -16px 0;
    padding: 2px 16px 8px;
    gap: 7px;
    overflow-x: auto;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
  }
  .project-thumbs button {
    flex: 0 0 94px;
    width: 94px;
    min-height: 67px;
    display: block;
    padding: 5px;
    border-radius: 12px 5px 12px 5px;
    scroll-snap-align: start;
  }
  .project-thumbs button .project-thumb-image {
    width: 100%;
    height: 55px;
    border-radius: 9px 4px 9px 4px;
  }
  .project-thumb-index {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 3px 5px;
    color: #fff;
    border-radius: 999px;
    background: rgba(3,18,40,.72);
    font-size: 7px;
  }
  .project-thumb-copy { display: none !important; }

  /* Capability: five steps become a short native horizontal rail. */
  .capability { padding-top: 66px; padding-bottom: 62px; overflow: hidden; }
  .capability-head { text-align: left; }
  .capability-head .eyebrow { justify-content: flex-start; }
  .capability-head > p:last-child { margin-top: 14px; font-size: 13px; line-height: 1.55; }
  .process-line {
    width: auto;
    margin: 28px -16px 0;
    padding: 6px 16px 14px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .process-line::-webkit-scrollbar { display: none; }
  .process-line::before { display: none; }
  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5) {
    flex: 0 0 min(68vw, 245px);
    min-height: 188px;
    display: block;
    margin: 0;
    padding: 16px;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 20px 7px 20px 7px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(5,40,77,.06);
    scroll-snap-align: start;
  }
  .process-icon { width: 58px; margin: 0 0 18px; }
  .process-icon span { top: -6px; right: -8px; width: 25px; height: 25px; font-size: 8px; }
  .process-glyph { font-size: 23px; }
  .process-line h3 { margin: 0 0 6px; font-size: 17px; }
  .process-line p { margin: 0; font-size: 12px; line-height: 1.5; }
  .capability-band {
    margin-top: 15px;
    padding: 14px 16px;
    gap: 8px 10px;
    border-radius: 16px 6px 16px 6px;
  }
  .capability-band svg { width: 22px; }
  .capability-band span { width: calc(100% - 34px); font-size: 8px; }
  .capability-band i { display: none; }
  .capability-band strong { width: 100%; font-size: 10px; line-height: 1.45; }

  /* News: one concise feature + horizontally browsable cards instead of four full screens. */
  .news { padding-top: 66px; padding-bottom: 62px; gap: 0; }
  .news-head { margin: 0 0 20px; }
  .news-head > a { margin-top: 16px; font-size: 9px; }
  .featured-news { display: block; overflow: hidden; border-radius: 22px 22px 7px 22px; }
  .news-photo { height: clamp(190px, 52vw, 240px); }
  .featured-news > div:last-child { padding: 18px 16px 19px; }
  .featured-news p { font-size: 8px; }
  .featured-news h3 { margin: 10px 0 0; font-size: clamp(20px, 5.8vw, 25px); line-height: 1.25; }
  .news-excerpt {
    margin-top: 9px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .featured-news > div:last-child > a { margin-top: 14px; font-size: 9px; }
  .news-stack {
    width: auto;
    margin: 12px -16px 0;
    padding: 2px 16px 10px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .news-stack::-webkit-scrollbar { display: none; }
  .news-stack article {
    flex: 0 0 min(76vw, 285px);
    min-height: 235px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 110px auto;
    gap: 10px 8px;
    padding: 9px;
    border-radius: 17px 6px 17px 6px;
    scroll-snap-align: start;
  }
  .news-thumb { grid-column: 1/-1; grid-row: 1; width: 100%; height: 110px; border-radius: 12px 5px 12px 5px; overflow: hidden; }
  .news-stack article > div:nth-child(2) { grid-column: 1; grid-row: 2; min-width: 0; }
  .news-stack article > a { grid-column: 2; grid-row: 2; align-self: end; width: 34px; height: 34px; }
  .news-stack p { flex-direction: row; gap: 6px; font-size: 7px; }
  .news-stack h3 {
    margin-top: 7px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
  }
  .news-summary { display: none; }

  .partners { padding: 22px 16px; }
  .partners-label { margin-bottom: 12px; font-size: 9px; }
  .logo-track span { min-width: 132px; font-size: 13px; }

  /* Footer: preserve information but remove excessive vertical whitespace. */
  footer { padding: 62px 16px 22px; }
  .footer-top { gap: 34px; }
  .footer-cta > a { margin-top: 22px; min-height: 48px; }
  .footer-contact > div { grid-template-columns: 22px 1fr; gap: 10px; padding: 13px 0; }
  .footer-contact p { font-size: 11px; line-height: 1.55; }
  .footer-bottom { margin-top: 42px; padding-top: 20px; gap: 16px; }
  .footer-bottom > div { gap: 18px; flex-wrap: wrap; font-size: 9px; }
}

@media (max-width: 430px) {
  .hero { height: clamp(600px, 94svh, 700px); }
  .hero-copy { top: calc(max(78px, env(safe-area-inset-top) + 70px)); }
  .hero h1 { font-size: var(--type-hero); }
  .hero-lead { font-size: 12px; }
  .hero-stats > div { flex-basis: 45vw; }
  .about, .products, .projects, .capability, .news { padding-left: 14px; padding-right: 14px; }
  .solution-ribbon, .product-nav, .project-thumbs, .process-line, .news-stack {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    scroll-padding-inline: 14px;
  }
  .about-proof { grid-template-columns: 1fr 1fr; }
  .product-nav button, .product-nav button:nth-child(odd) { flex-basis: 53vw; }
  .product-image { aspect-ratio: 1.48 / 1; }
  .project-main { height: clamp(310px, 54svh, 370px); }
  .project-thumbs button { flex-basis: 88px; width: 88px; }
  .process-line article, .process-line article:nth-child(4), .process-line article:nth-child(5) { flex-basis: min(72vw, 235px); }
}

@media (max-width: 360px) {
  .hero { height: 610px; }
  .hero h1 { font-size: var(--type-hero); max-width: 17ch; }
  .hero-lead { -webkit-line-clamp: 2; }
  .hero .primary-button { min-height: 43px; }
  .hero-slider-nav { bottom: 83px; }
  .hero-stats { height: 70px; }
  .hero-stats > div { min-height: 68px; flex-basis: 46vw; }
  .about-proof { grid-template-columns: 1fr; }
  .about-proof > div, .about-proof > div + div { min-height: 88px; }
  .product-mobile-swipe { display: none; }
  .product-image { aspect-ratio: 1.42 / 1; }
  .project-main { height: 315px; }
  .project-detail > p { display: none; }
  .project-detail h3 { font-size: 18px; }
  .project-detail > a { width: calc(100% - 88px); }
}

@media (max-width: 1199px) and (max-height: 700px) {
  .hero { height: 610px; }
  .hero-copy { top: calc(max(76px, env(safe-area-inset-top) + 68px)); }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: var(--type-hero); }
  .hero-lead { margin: 10px 0 12px; -webkit-line-clamp: 2; font-size: 11.5px; }
  .hero .primary-button { min-height: 42px; }
  .project-main { height: 310px; }
}

/* R5 mobile robustness corrections after portrait visual audit. */
@media (max-width: 1199px) {
  .hero .text-button { display: none !important; }
  .product-info li {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    min-width: 0;
  }
  .product-info li svg { flex: 0 0 15px; }
  .footer-contact > div > svg { grid-column: 1; }
  .footer-contact > div > p { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
}

/* R5 final phone-height refinements: keep short portrait screens compact without changing desktop. */
@media (max-width: 1199px) {
  .hero h1 { font-size: var(--type-hero); line-height: 1.04; }
  .hero-copy { padding-right: max(0px, env(safe-area-inset-right)); }
  .hero-stats { overscroll-behavior-inline: contain; }
  .solution-ribbon,
  .product-nav,
  .project-thumbs,
  .process-line,
  .news-stack { overscroll-behavior-inline: contain; touch-action: pan-x pan-y; }
}

@media (max-width: 430px) {
  .about-frame { height: clamp(205px, 59vw, 255px); }
  .about-lead { font-size: 12.5px; line-height: 1.55; }
  .solution-ribbon article,
  .solution-ribbon article:nth-child(2) { min-height: 108px; }
  .news-photo { height: clamp(172px, 48vw, 210px); }
  .news-stack article { min-height: 215px; grid-template-rows: 96px auto; }
  .news-thumb { height: 96px; }
}

@media (max-width: 360px) {
  /* 320-360px phones: retain readable two-column proof cards instead of a very tall stack. */
  .about-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-proof > div,
  .about-proof > div + div { min-height: 96px; padding: 10px; }
  .about-proof b { font-size: 11px; }
  .about-proof p > span {
    font-size: 9px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

@media (max-width: 1199px) and (max-height: 700px) {
  /* The hero must not be taller than the physical portrait viewport on short phones. */
  .hero {
    height: min(100svh, 590px);
    min-height: 540px;
    max-height: 590px;
  }
  .hero-copy { top: calc(max(72px, env(safe-area-inset-top) + 66px)); }
  .hero .eyebrow { margin-bottom: 7px; }
  .hero h1 { font-size: var(--type-hero); line-height: 1.03; }
  .hero-lead { margin: 9px 0 11px; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.42; }
  .hero .primary-button { min-height: 40px; width: min(220px, 100%); }
  .hero-slider-nav { bottom: 75px; min-height: 36px; }
  .hero-slider-nav > div:last-child button { width: 36px; height: 36px; }
  .hero-stats { height: 66px; }
  .hero-stats > div { min-height: 64px; padding: 8px 10px; }
  .hero-stats strong { font-size: 17px; }

  /* Projects: fit heading + active project + swipe thumbnails inside one short portrait screen. */
  .projects { padding-top: 46px; padding-bottom: 34px; }
  .projects h2 { font-size: var(--type-section-h2); }
  .projects .eyebrow { margin-bottom: 8px; }
  .project-showcase { margin-top: 13px; }
  .project-main { height: clamp(250px, 45svh, 285px); }
  .project-code, .project-location { top: 10px; }
  .project-code { right: 10px; padding: 5px 7px; }
  .project-location { left: 10px; max-width: calc(100% - 100px); padding: 5px 7px; }
  .project-detail { padding: 66px 12px 10px; }
  .project-detail > p { bottom: 100px; right: 12px; }
  .project-detail > strong { font-size: clamp(23px, 7vw, 29px); }
  .project-detail h3 { margin: 6px 0 3px; font-size: 16px; line-height: 1.12; max-width: 20ch; }
  .project-detail > span { -webkit-line-clamp: 1; font-size: 9.5px; }
  .project-detail > a { min-height: 30px; width: calc(100% - 82px); margin-top: 6px; padding-top: 7px; font-size: 7px; }
  .project-arrows { right: 10px; bottom: 9px; }
  .project-arrows button { width: 32px; height: 32px; }
  .project-thumbs { margin-top: 6px; padding-bottom: 4px; }
  .project-thumbs button { flex-basis: 72px; width: 72px; min-height: 54px; padding: 4px; }
  .project-thumbs button .project-thumb-image { height: 44px; }
  .project-thumb-index { top: 6px; left: 6px; font-size: 6px; }

  /* Keep process and news browsing compact on short screens. */
  .capability { padding-top: 48px; padding-bottom: 42px; }
  .capability h2 { font-size: var(--type-section-h2); }
  .capability-head > p:last-child { margin-top: 9px; font-size: 11px; }
  .process-line { margin-top: 18px; padding-bottom: 8px; }
  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5) { min-height: 154px; padding: 13px; }
  .process-icon { width: 48px; margin-bottom: 11px; }
  .process-line h3 { font-size: 15px; }
  .process-line p { font-size: 10.5px; }
  .capability-band { margin-top: 9px; padding: 10px 12px; }

  .news { padding-top: 48px; padding-bottom: 42px; }
  .news h2 { font-size: var(--type-section-h2); }
  .news-head { margin-bottom: 13px; }
  .news-head > a { margin-top: 10px; }
  .news-photo { height: 145px; }
  .featured-news > div:last-child { padding: 13px 13px 14px; }
  .featured-news h3 { margin-top: 7px; font-size: 18px; }
  .news-excerpt { -webkit-line-clamp: 2; margin-top: 6px !important; font-size: 10.5px !important; }
  .featured-news > div:last-child > a { margin-top: 9px; }
  .news-stack { margin-top: 8px; }
  .news-stack article { min-height: 176px; grid-template-rows: 78px auto; padding: 7px; }
  .news-thumb { height: 78px; }
  .news-stack h3 { -webkit-line-clamp: 2; font-size: 11.5px; }
  .news-stack article > a { width: 30px; height: 30px; }
}

/* R5 final compacting after measured 320/360/390/430 portrait audit. */
@media (max-width: 430px) {
  .products { padding-top: 54px; padding-bottom: 52px; }
  .products h2 { font-size: var(--type-section-h2); }
  .product-layout { margin-top: 15px; }
  .product-nav button,
  .product-nav button:nth-child(odd) { min-height: 52px; padding: 7px 9px; }
  .product-nav button small { display: none; }
  .product-mobile-controls { margin: 2px 0 8px; }
  .product-image { aspect-ratio: 1.66 / 1; }
  .product-info { padding-top: 14px; }
  .product-info > p { margin-bottom: 5px; }
  .product-info h3 { font-size: clamp(24px, 6.8vw, 29px); }
  .product-info > strong { margin-top: 2px; font-size: 11px; }
  .product-info > span { margin-top: 8px; -webkit-line-clamp: 2; font-size: 11.5px; }
  .product-info ul { margin: 10px 0 11px; gap: 4px; }
  .product-info li { min-height: 32px; padding: 6px 8px; font-size: 10px; }
  .product-info > a { min-height: 43px; }
}

@media (max-width: 1199px) and (max-height: 700px) {
  .hero-copy { top: calc(max(80px, env(safe-area-inset-top) + 74px)); }
  .products { padding-top: 46px; padding-bottom: 42px; }
  .products h2 { font-size: var(--type-section-h2); }
  .product-heading .eyebrow { margin-bottom: 8px; }
  .product-layout { margin-top: 12px; }
  .product-nav button,
  .product-nav button:nth-child(odd) { min-height: 48px; }
  .product-mobile-controls { grid-template-columns: 36px minmax(0,1fr) 36px; }
  .product-mobile-controls > button { width: 36px; height: 36px; }
  .product-image { aspect-ratio: 1.72 / 1; }
  .product-info { padding-top: 11px; }
  .product-info > p { font-size: 7px; }
  .product-info h3 { font-size: 23px; }
  .product-info > strong { font-size: 10px; }
  .product-info > span { margin-top: 6px; -webkit-line-clamp: 2; font-size: 10.5px; }
  .product-info ul { margin: 8px 0 9px; }
  .product-info li { min-height: 29px; padding: 5px 7px; font-size: 9.5px; }
  .product-info > a { min-height: 40px; }
}

/* === R6 mobile composition + smooth hero slider + section wheel snap (2026-09-13) === */
/* Swiper is only initialized on mobile; these rules preserve the existing desktop hero stack. */
.hero-slides-track { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-mobile-dots { display: none; }
html.section-snapping, html.section-snapping body { scroll-behavior: auto !important; }
@media (min-width: 1024px) {
  .hero, .about, .products, .projects, .capability, .news, .partners, footer { scroll-margin-top: 78px; }
}

@media (max-width: 1199px) {
  /* Mobile must not use horizontal content rails. Only the hero itself remains swipeable. */
  .solution-ribbon,
  .product-nav,
  .project-thumbs,
  .process-line,
  .news-stack,
  .hero-stats {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior-inline: auto !important;
    touch-action: auto !important;
  }

  /* Hero: Swiper handles horizontal intent while allowing normal vertical page movement. */
  .hero {
    height: min(100svh, 760px);
    min-height: 560px;
    max-height: 760px;
  }
  .hero-slides.swiper { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
  .hero-slides-track.swiper-wrapper {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: 100%;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }
  .hero-slide.swiper-slide {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-slide.swiper-slide img {
    transform: scale(1.015);
    transition: transform .85s cubic-bezier(.22,.61,.36,1);
  }
  .hero-slide.swiper-slide-active img { transform: scale(1); }
  .hero-slides.is-swiping .hero-slide img { transition-duration: .18s; }

  .hero-copy {
    top: calc(max(78px, env(safe-area-inset-top) + 70px));
    left: 16px;
    width: calc(100% - 32px);
    max-width: 540px;
    transform: none;
  }
  @keyframes hero-copy-in {
    from { opacity: 0; transform: translate3d(0,10px,0); }
    to { opacity: 1; transform: none; }
  }
  .hero .eyebrow { margin-bottom: 9px; max-width: 90%; font-size: 9px; line-height: 1.35; }
  #hero-label { max-width: 34ch; }
  .hero h1 {
    max-width: 17ch;
    margin: 0;
    font-size: var(--type-hero);
    line-height: 1.06;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .hero h1 br { line-height: .9; }
  .hero-lead {
    width: min(100%, 38ch);
    margin: 10px 0 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.48;
  }
  .hero .primary-button { width: min(220px, 74vw); min-height: 42px; padding-inline: 16px; font-size: 8px; }
  .hero-slider-nav {
    left: 16px;
    right: 16px;
    bottom: 136px;
    min-height: 38px;
  }
  .hero-slider-nav .slide-count strong { font-size: 18px; }
  .hero-slider-nav > div:last-child button { width: 37px; height: 37px; }

  /* 4 KPI blocks, fixed 2 x 2 grid. No swipe rail. */
  .hero-stats {
    left: 10px;
    right: 10px;
    bottom: 0;
    width: auto;
    height: 126px;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-template-rows: repeat(2, 1fr);
    border-radius: 16px 16px 0 0;
    background: rgba(3,24,54,.88);
  }
  .hero-stats > div {
    min-width: 0;
    min-height: 0;
    height: 63px;
    padding: 8px 11px;
    justify-content: center;
    border-right: 1px solid #ffffff24 !important;
    border-bottom: 1px solid #ffffff24 !important;
  }
  .hero-stats > div:nth-child(2n) { border-right: 0 !important; }
  .hero-stats > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .hero-stats strong {
    max-width: 100%;
    font-size: 18px !important;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .hero-stats span {
    margin-top: 4px;
    font-size: var(--type-meta) !important;
    line-height: 1.25;
    letter-spacing: .08em;
  }

  /* About solution families: exactly four equal cards in a 2 x 2 grid. */
  .solution-ribbon {
    width: 100%;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 8px !important;
  }
  .solution-ribbon article,
  .solution-ribbon article:nth-child(2) {
    width: auto;
    min-width: 0;
    min-height: 116px;
    display: grid;
    grid-template-columns: 31px minmax(0,1fr);
    align-content: center;
    gap: 8px;
    padding: 20px 10px 12px;
    border: 1px solid var(--line) !important;
    border-radius: 16px 6px 16px 6px;
    transform: none !important;
  }
  .solution-ribbon article > span { top: 8px; left: 10px; font-size: 7px; }
  .solution-ribbon article > svg:first-of-type { width: 29px; height: 29px; padding: 5px; }
  .solution-ribbon h3 { font-size: 14px; line-height: 1.16; }
  .solution-ribbon p {
    margin-top: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.35;
  }
  .solution-jump { display: none; }

  /* Products: four selectors are a fixed 2 x 2 grid, not a horizontal scroller. */
  .product-drag-hint { display: none; }
  .product-nav {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px;
    border: 0;
  }
  .product-nav button,
  .product-nav button:nth-child(odd) {
    width: 100%;
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    grid-template-rows: 1fr;
    gap: 6px;
    align-items: center;
    padding: 9px 10px !important;
    border: 1px solid #ffffff24 !important;
    border-radius: 12px 5px 12px 5px;
    background: #ffffff08;
  }
  .product-nav button > span { grid-row: auto; font-size: 8px; }
  .product-nav button strong { font-size: 11.5px; line-height: 1.25; }
  .product-nav button small, .product-nav button svg { display: none; }
  .product-nav button.active { border-color: #68c7f3 !important; background: #ffffff12; }
  .product-mobile-controls { margin: 8px 0 10px; }
  .product-mobile-swipe { font-size: 7px; letter-spacing: .07em; }
  .product-showcase { touch-action: pan-y; }

  /* Projects: one active card + dots/arrows. Thumbnails are data-only on mobile. */
  .project-thumbs { display: none !important; }
  .project-mobile-dots {
    grid-area: project-thumbs;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    min-height: 24px;
  }
  .project-mobile-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #afc2d1;
    transition: width .3s var(--ease), background .3s ease;
  }
  .project-mobile-dots button.active { width: 24px; background: var(--blue); }
  .project-main { touch-action: pan-y; }

  /* Capability steps: 2 columns, final step spans both columns. */
  .process-line {
    width: 100%;
    margin: 26px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .process-line::before { display: none; }
  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5) {
    min-width: 0;
    min-height: 142px;
    display: block;
    padding: 14px 12px;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 16px 6px 16px 6px;
    background: #fff;
  }
  .process-line article:nth-child(5) {
    grid-column: 1 / -1;
    min-height: 112px;
    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
  }
  .process-line article:nth-child(5) .process-icon { grid-row: 1 / 3; margin: 0; }
  .process-icon { width: 52px; margin: 0 0 10px; }
  .process-icon span { width: 23px; top: -5px; right: -3px; }
  .process-glyph { font-size: 22px; }
  .process-line h3 { margin: 0 0 5px; font-size: 14px; }
  .process-line p { font-size: 10px; line-height: 1.42; }
  .process-line article:hover .process-icon { transform: none; box-shadow: none; }

  /* News: compact 2 x 2 supporting grid, no horizontal swipe rail. */
  .news-stack {
    width: 100%;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  .news-stack article {
    min-width: 0;
    min-height: 190px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 78px 1fr;
    align-content: start;
    gap: 8px;
    padding: 7px;
    border-radius: 14px;
  }
  .news-thumb { grid-column: 1; height: 78px; }
  .news-stack article > div:nth-child(2) { min-width: 0; }
  .news-stack p { gap: 4px; margin-bottom: 5px; font-size: 6.5px; }
  .news-stack h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .news-summary { display: none; }
  .news-stack article > a { position: absolute; right: 7px; bottom: 7px; width: 28px; height: 28px; }

  /* Disable old rail cursor/drag affordances on touch layout. */
  .drag-track { cursor: default; touch-action: auto; }
}

@media (max-width: 430px) {
  .hero { min-height: 560px; height: min(100svh, 720px); }
  .hero-copy { top: calc(max(76px, env(safe-area-inset-top) + 68px)); }
  .hero h1 { font-size: var(--type-hero); }
  .hero-slider-nav { bottom: 132px; }
  .hero-stats { height: 122px; }
  .hero-stats > div { height: 61px; }
  .hero-stats strong { font-size: 17px !important; }
  .hero-stats span { font-size: var(--type-meta) !important; }

  .solution-ribbon article,
  .solution-ribbon article:nth-child(2) { min-height: 108px; padding: 18px 9px 10px; }
  .solution-ribbon h3 { font-size: 13px; }

  .product-nav button,
  .product-nav button:nth-child(odd) { min-height: 62px; }
  .product-nav button strong { font-size: 10.5px; }

  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5) { min-height: 132px; padding: 12px 10px; }
  .process-line article:nth-child(5) { min-height: 104px; }

  .news-stack article { min-height: 178px; grid-template-rows: 72px 1fr; }
  .news-thumb { height: 72px; }
}

@media (max-width: 360px) {
  .hero { height: min(100svh, 650px); min-height: 550px; }
  .hero h1 { font-size: var(--type-hero); }
  .hero-lead { font-size: 10.5px; }
  .hero .primary-button { min-height: 39px; }
  .hero-slider-nav { bottom: 126px; }
  .hero-stats { left: 8px; right: 8px; height: 118px; }
  .hero-stats > div { height: 59px; padding: 7px 9px; }
  .hero-stats strong { font-size: 16px !important; }
  .hero-stats span { font-size: var(--type-meta) !important; }

  .solution-ribbon { gap: 6px !important; }
  .solution-ribbon article,
  .solution-ribbon article:nth-child(2) { min-height: 103px; grid-template-columns: 27px minmax(0,1fr); gap: 6px; padding-inline: 8px; }
  .solution-ribbon article > svg:first-of-type { width: 26px; height: 26px; }
  .solution-ribbon h3 { font-size: 12px; }
  .solution-ribbon p { font-size: 8px; }

  .product-nav { gap: 6px; }
  .product-nav button,
  .product-nav button:nth-child(odd) { min-height: 58px; grid-template-columns: 20px minmax(0,1fr); padding: 8px !important; }
  .product-nav button strong { font-size: 10px; }

  .process-line { gap: 6px !important; }
  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5) { min-height: 125px; padding: 10px 9px; }
  .process-line article:nth-child(5) { min-height: 100px; }
  .process-line h3 { font-size: 13px; }
  .process-line p { font-size: 9px; }

  .news-stack { gap: 6px; }
  .news-stack article { min-height: 170px; grid-template-rows: 68px 1fr; padding: 6px; }
  .news-thumb { height: 68px; }
  .news-stack h3 { font-size: 10px; }
}

/* Very short portrait screens: keep text clear above the KPI grid. */
@media (max-width: 1199px) and (max-height: 620px) {
  .hero { min-height: 540px; height: 100svh; max-height: 620px; }
  .hero-copy { top: calc(max(70px, env(safe-area-inset-top) + 64px)); }
  .hero .eyebrow { margin-bottom: 6px; }
  .hero h1 { font-size: var(--type-hero); }
  .hero-lead { margin: 7px 0 9px; font-size: 10px; line-height: 1.38; }
  .hero .primary-button { min-height: 37px; width: min(205px, 72vw); }
  .hero-slider-nav { bottom: 122px; }
  .hero-slider-nav > div:last-child button { width: 33px; height: 33px; }
  .hero-stats { height: 114px; }
  .hero-stats > div { height: 57px; }
}
@media (max-width: 1199px) {
  /* Keep the product selector full-width through small tablets as well. */
  .product-layout {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
  }
}
@media (max-width: 1199px) {
  /* If the Swiper CDN is unavailable, retain a functional fade fallback instead of a broken rail. */
  .hero-slides.swiper-fallback .hero-slides-track { display: block; }
  .hero-slides.swiper-fallback .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .55s ease !important;
  }
  .hero-slides.swiper-fallback .hero-slide.active { opacity: 1 !important; pointer-events: auto; }
}

/* === R7 hero contrast, equal KPI scale, clean mobile edges, centered capability, social footer === */
.hero-wash {
  z-index: 1;
  pointer-events: none;
}
.hero-grid,
.hero-aura { z-index: 2; pointer-events: none; }

/* DN50-600 uses the same main scale as the other KPI values. */
.hero-stats .count-range { font-size: clamp(38px, 2.8vw, 58px) !important; }
.hero-stats .count-range .range-prefix {
  margin-right: .04em;
  font-size: .68em;
  letter-spacing: .025em;
}
.hero-stats .count-range .range-start,
.hero-stats .count-range .range-end { min-width: auto; }

/* Center both capability messages as one visual unit. */
.capability-band {
  justify-content: center;
  text-align: center;
}
.capability-band > svg { flex: 0 0 auto; }
.capability-band-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.capability-band-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.capability-band-copy strong {
  font-size: 16px;
  line-height: 1.45;
  text-wrap: balance;
}

/* Social links configured from Admin > Settings. */
.footer-bottom {
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
}
.footer-bottom.has-socials { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.footer-bottom > p { justify-self: center; }
.footer-socials {
  justify-self: start !important;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
}
.footer-socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #bfd0de;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  background: #ffffff08;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s var(--ease);
}
.footer-socials a:hover {
  color: #fff;
  border-color: #73c9f2;
  background: #075fb9;
  transform: translateY(-2px);
}
.footer-socials svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-socials a[aria-label="Facebook"] svg path { fill: currentColor; stroke: none; }
.footer-links { justify-self: end !important; }

@media (max-width: 1199px) {
  /* Keep the text-side image fade on mobile too. */
  .hero-wash {
    background:
      linear-gradient(90deg, rgba(2,13,30,.98) 0%, rgba(3,19,42,.94) 42%, rgba(3,20,43,.68) 70%, rgba(3,20,43,.38) 100%),
      linear-gradient(0deg, rgba(3,20,43,.92) 0%, rgba(3,20,43,.12) 56%, rgba(3,20,43,.30) 100%);
  }
  .hero-stats .count-range { font-size: 18px !important; }
  .hero-stats .count-range .range-prefix { font-size: .72em; }

  /* Remove large decorative circles that can overlap edges on narrow screens. */
  .product-orbit,
  .about::after,
  .projects::after,
  .news::after,
  .capability::before,
  .capability::after,
  .footer-ambient,
  .fx-pointer-glow { display: none !important; }

  /* Decorative frame strokes no longer sit outside the image on mobile. */
  .about-visual { padding: 0 !important; }
  .about-visual::before,
  .about-visual::after { display: none !important; }
  .about-seal {
    right: 10px;
    bottom: 10px;
    width: 66px;
    border-width: 3px;
    box-shadow: 0 10px 24px rgba(6,44,86,.24);
  }
  .about-seal strong { font-size: 10px; }
  .about-seal span { font-size: 5px; }
  .quality-seal {
    top: 9px;
    right: 9px;
    width: 48px;
    height: 48px;
    border-width: 3px;
    transform: none;
  }

  .capability-band {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px !important;
    padding: 15px 14px !important;
    border-radius: 18px !important;
    text-align: center;
  }
  .capability-band svg { width: 20px; }
  .capability-band-copy { width: 100%; gap: 4px; }
  .capability-band-copy span {
    width: auto !important;
    font-size: 8.5px;
    line-height: 1.35;
    letter-spacing: .09em;
  }
  .capability-band-copy strong {
    width: 100%;
    font-size: 11px;
    line-height: 1.45;
  }

  .footer-bottom {
    grid-template-columns: 1fr !important;
    justify-items: start;
    gap: 17px !important;
  }
  .footer-brand { order: 1; }
  .footer-socials { order: 2; }
  .footer-links { order: 3; justify-self: start !important; }
  .footer-bottom > p { order: 4 !important; justify-self: start; }
  .footer-socials a { width: 40px; height: 40px; }
}

@media (max-width: 430px) {
  .hero-stats .count-range { font-size: 17px !important; }
  .capability-band-copy strong { font-size: 10.5px; }
}

@media (max-width: 360px) {
  .hero-stats .count-range { font-size: 16px !important; }
  .footer-socials { gap: 6px !important; }
  .footer-socials a { width: 37px; height: 37px; }
}

/* === R8 mobile polish: hero spacing/KPI parity, unclipped cards, project Swiper, tap zoom guard === */
.project-mobile-swiper { display: none; }

@media (max-width: 1199px) {
  /* Mobile page safety: keep decorative effects from clipping real content. */
  html { max-width: 100%; overflow-x: hidden; }
  body { max-width: 100%; overflow-x: hidden; }
  main { overflow: visible !important; }
  .about,
  .products,
  .projects,
  .capability,
  .news,
  .partners { overflow: visible !important; }

  /* Remove large edge decorations/ghost lettering on phones. */
  .products::before,
  .projects::before,
  .about::after,
  .projects::after,
  .news::after,
  .capability::before,
  .capability::after,
  .product-orbit,
  .footer-ambient { display: none !important; }

  /* Prevent the asymmetric desktop corner treatment from visually cutting controls. */
  .solution-ribbon article,
  .solution-ribbon article:nth-child(2),
  .product-nav button,
  .product-nav button:nth-child(odd),
  .product-info li,
  .product-info > a,
  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5),
  .news-stack article,
  .featured-news,
  .capability-band {
    border-radius: 14px !important;
  }
  .product-showcase,
  .product-info,
  .product-layout,
  .project-mobile-swiper,
  .project-mobile-slide,
  .project-mobile-card,
  .project-mobile-copy {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  .product-image,
  .news-photo,
  .news-thumb,
  .about-frame { overflow: hidden !important; }
  .product-image { border-radius: 18px !important; }

  /* Move hero copy lower while keeping clear space above the KPI/navigation area. */
  .hero-copy {
    top: clamp(112px, 16svh, 142px) !important;
  }

  /* All four KPI blocks use the same value/label typography. */
  .hero-stats strong,
  .hero-stats .count-range {
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
  }
  .hero-stats .count-range .range-prefix,
  .hero-stats .count-range .range-start,
  .hero-stats .count-range .range-separator,
  .hero-stats .count-range .range-end {
    font-size: 1em !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  .hero-stats span {
    font-size: var(--type-meta) !important;
    line-height: 1.25 !important;
    letter-spacing: .08em !important;
  }

  /* Disable double-tap zoom on controls while preserving normal page/pinch behaviour elsewhere. */
  .hero a,
  .hero button,
  .product-mobile-controls button,
  .product-nav button,
  .project-mobile-swiper a,
  .project-mobile-swiper button,
  .project-mobile-swiper .swiper-slide {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #hero-swiper,
  #project-mobile-swiper { touch-action: pan-y; }

  /* Mobile projects use a real Swiper instead of the desktop data-switching surface. */
  .projects > .project-showcase { display: none !important; }
  .project-mobile-swiper {
    display: block;
    width: 100%;
    margin-top: 28px;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
  }
  .project-mobile-swiper > .swiper-wrapper {
    align-items: stretch;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }
  .project-mobile-slide {
    height: auto;
    display: flex;
    box-sizing: border-box;
  }
  .project-mobile-card {
    position: relative;
    width: 100%;
    min-height: clamp(430px, 64svh, 535px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    border: 1px solid #c7d9e6;
    border-radius: 20px;
    background: var(--navy);
    box-shadow: 0 20px 44px rgba(5,40,77,.18);
    overflow: hidden;
  }
  .project-mobile-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.012);
    transition: transform .72s cubic-bezier(.22,.61,.36,1);
  }
  .project-mobile-slide.swiper-slide-active .project-mobile-card > img { transform: scale(1); }
  .project-mobile-swiper.is-swiping .project-mobile-card > img { transition-duration: .18s; }
  .project-mobile-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(0deg, rgba(3,18,40,.98) 0%, rgba(3,18,40,.84) 42%, rgba(3,18,40,.18) 70%, rgba(3,18,40,.10) 100%),
      linear-gradient(90deg, rgba(3,18,40,.35), transparent 66%);
    pointer-events: none;
  }
  .project-mobile-topline {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
  }
  .project-mobile-place,
  .project-mobile-code {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(3,18,40,.48);
    backdrop-filter: blur(8px);
    font-size: 9px;
    line-height: 1.25;
  }
  .project-mobile-place {
    max-width: calc(100% - 84px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .project-mobile-place svg {
    flex: 0 0 auto;
    width: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }
  .project-mobile-code { flex: 0 0 auto; font-weight: 800; letter-spacing: .08em; }
  .project-mobile-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 118px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .project-mobile-copy > p {
    margin: 0 0 8px;
    color: #a9c2d5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
  }
  .project-mobile-copy > strong {
    display: inline-flex;
    align-items: flex-end;
    gap: 7px;
    font-size: clamp(29px, 8vw, 39px);
    line-height: .95;
    letter-spacing: -.035em;
  }
  .project-mobile-copy > strong small {
    margin-bottom: 3px;
    color: #bdd1df;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
  }
  .project-mobile-copy h3 {
    max-width: 19ch;
    margin: 10px 0 5px;
    font-size: clamp(19px, 5.2vw, 23px);
    line-height: 1.18;
    text-wrap: balance;
  }
  .project-mobile-copy > span {
    max-width: 38ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #c8d6e1;
    font-size: 11px;
    line-height: 1.45;
  }
  .project-mobile-copy > a {
    width: min(245px, calc(100% - 8px));
    min-height: 42px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px 0 16px;
    color: var(--navy);
    border-radius: 12px;
    background: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .project-mobile-copy > a svg { width: 17px; }
  .project-mobile-controls {
    min-height: 44px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 42px;
    align-items: center;
    gap: 10px;
  }
  .project-mobile-prev,
  .project-mobile-next {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ink);
    border: 1px solid #ccdbe6;
    border-radius: 50%;
    background: #fff;
  }
  .project-mobile-prev svg,
  .project-mobile-next svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .project-mobile-pagination {
    position: static !important;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  .project-mobile-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #a9bdcb;
    opacity: 1;
    transition: width .28s var(--ease), background .28s ease;
  }
  .project-mobile-bullet.active { width: 24px; background: var(--blue); }

  /* CDN fallback: one project at a time, still usable with the lightweight swipe handler. */
  .project-mobile-swiper.swiper-fallback { overflow: visible; }
  .project-mobile-swiper.swiper-fallback > .swiper-wrapper { display: block; }
  .project-mobile-swiper.swiper-fallback .project-mobile-slide { display: none; }
  .project-mobile-swiper.swiper-fallback .project-mobile-slide.fallback-active { display: flex; }
  .project-mobile-swiper.swiper-fallback .project-mobile-pagination { display: none; }
}

@media (max-width: 430px) {
  .hero-copy { top: clamp(108px, 15.5svh, 128px) !important; }
  .hero-stats strong,
  .hero-stats .count-range { font-size: 17px !important; }
  .hero-stats .count-range .range-prefix { font-size: 1em !important; }
  .project-mobile-card { min-height: clamp(410px, 61svh, 500px); }
}

@media (max-width: 360px) {
  .hero-copy { top: clamp(102px, 15svh, 116px) !important; }
  .hero-stats strong,
  .hero-stats .count-range { font-size: 16px !important; }
  .hero-stats .count-range .range-prefix { font-size: 1em !important; }
  .project-mobile-card { min-height: 400px; }
  .project-mobile-copy { padding-inline: 14px; }
}

@media (max-width: 1199px) and (max-height: 620px) {
  .hero-copy { top: clamp(96px, 17svh, 108px) !important; }
  .project-mobile-card { min-height: 390px; }
}
@media (max-width: 1199px) {
  .hero-stats .count-range {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap !important;
  }
}

/* === R9 clipping audit & content-edge safety (2026-09-13) ===
   Root cause fixed globally: the old .is-visible rule gave every reveal node
   a rounded clip-path. That clipped headings, buttons, shadows and child cards.
   Only an explicit data-reveal="clip" is now allowed to use clip-path. */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: none;
}
[data-reveal="clip"] {
  transform: none;
  clip-path: inset(0 100% 0 0 round 34px);
}
[data-reveal="clip"].is-visible {
  clip-path: inset(0 0 0 0 round 34px);
}

/* The page root must not clip section shadows/content vertically. Horizontal
   overflow is already controlled at body level. */
main { overflow: visible; }

@media (max-width: 1199px) {
  :root {
    --mobile-card-radius: 14px;
    --mobile-media-radius: 18px;
  }

  /* Never clip semantic/content wrappers on mobile. Media/sliders below are
     the only elements intentionally allowed to mask their own pixels. */
  [data-reveal],
  [data-reveal].is-visible,
  .about,
  .about-visual,
  .about-copy,
  .about-proof,
  .solution-ribbon,
  .product-heading,
  .product-layout,
  .product-nav,
  .product-showcase,
  .product-info,
  .projects,
  .projects-head,
  .project-showcase,
  .project-mobile-slide,
  .project-mobile-copy,
  .capability,
  .capability-head,
  .process-line,
  .process-line article,
  .capability-band,
  .news,
  .news-head,
  .news-stack,
  .news-stack article,
  .partners,
  footer,
  .footer-top,
  .footer-cta,
  .footer-contact,
  .footer-bottom {
    clip-path: none !important;
    overflow: visible !important;
  }

  /* Media masks only: symmetric radii and no content/button is placed outside
     these boxes. */
  .about-frame {
    overflow: hidden !important;
    border-radius: var(--mobile-media-radius) !important;
  }
  .product-image {
    overflow: hidden !important;
    border-radius: var(--mobile-media-radius) !important;
  }
  .project-mobile-card {
    overflow: hidden !important;
    border-radius: var(--mobile-media-radius) !important;
  }
  .news-photo {
    overflow: hidden !important;
    border-radius: var(--mobile-media-radius) var(--mobile-media-radius) 0 0 !important;
  }
  .news-thumb {
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  /* Swiper viewport must mask adjacent slides, but it gets breathing room so
     card borders/shadows are not shaved at the viewport edge. */
  .project-mobile-swiper {
    overflow: hidden !important;
    border-radius: 0 !important;
    padding: 2px !important;
    margin-left: -2px !important;
    margin-right: -2px !important;
    width: calc(100% + 4px) !important;
  }

  /* Normalize content-card corners. Old desktop asymmetric corner shapes are
     deliberately removed on mobile to avoid the visual "cut corner" effect. */
  .about-proof > div,
  .about-proof > div + div,
  .solution-ribbon article,
  .solution-ribbon article:nth-child(2),
  .product-nav button,
  .product-nav button:nth-child(odd),
  .product-info li,
  .product-info > a,
  .process-line article,
  .process-line article:nth-child(4),
  .process-line article:nth-child(5),
  .capability-band,
  .news-stack article {
    border-radius: var(--mobile-card-radius) !important;
  }
  .featured-news {
    overflow: hidden !important;
    border-radius: var(--mobile-media-radius) !important;
  }

  /* Product copy used the desktop info-in transform. During the animation it
     moved 22px outside the viewport and could be visibly shaved by body x-mask. */
  .product-info {
    animation: none !important;
    transform: none !important;
  }

  /* Touch layouts should not lift/translate cards outside their own row. */
  .solution-ribbon article:hover,
  .news-stack article:hover,
  .process-line article:hover {
    transform: none !important;
  }

  /* Ensure buttons/links at the bottom of cards always have internal space. */
  .product-info > a,
  .project-mobile-copy > a,
  .featured-news > div:last-child > a,
  .news-stack article > a,
  .outline-link {
    position: relative;
    z-index: 3;
    max-width: 100%;
  }
}

/* R9 tablet edge case: 761-820px was still inheriting the desktop two-column
   product media sizing while the rest of the page had already switched to the
   touch layout. Stack it only in this narrow tablet range. */
@media (min-width: 761px) and (max-width: 1199px) {
  .product-showcase {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .product-image {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
  .product-info {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* === R10 mobile interaction polish: lighter hero, centered DBCO CTA,
   swipeable products, looping project thumbnail rail, compact expertise seal === */
.product-mobile-swiper,
.project-mobile-thumbs { display: none; }

/* Keep the text-side contrast, but reveal about 20% more of the hero image. */
.hero-wash {
  background:
    linear-gradient(90deg, rgba(2,13,30,.80) 0%, rgba(3,19,42,.73) 31%, rgba(3,20,43,.50) 52%, rgba(3,20,43,.20) 76%, rgba(3,20,43,.27) 100%),
    linear-gradient(0deg, rgba(3,20,43,.67) 0%, rgba(3,20,43,.13) 54%, rgba(3,20,43,.22) 100%);
}

@media (max-width: 1199px) {
  .hero-wash {
    background:
      linear-gradient(90deg, rgba(2,13,30,.80) 0%, rgba(3,19,42,.75) 42%, rgba(3,20,43,.54) 70%, rgba(3,20,43,.30) 100%),
      linear-gradient(0deg, rgba(3,20,43,.74) 0%, rgba(3,20,43,.10) 56%, rgba(3,20,43,.24) 100%);
  }

  /* About CTA: centered on phones/tablets instead of visually leaning left. */
  .about-copy .outline-link {
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
  }

  /* Keep the circular expertise badge compact and fully inside its own circle. */
  .about-seal {
    right: 10px !important;
    bottom: 10px !important;
    width: 74px !important;
    height: 74px !important;
    padding: 7px !important;
    border-width: 3px !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }
  .about-seal svg {
    width: 14px !important;
    margin-bottom: 2px !important;
    flex: 0 0 auto;
  }
  .about-seal strong {
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    letter-spacing: .03em;
  }
  .about-seal span {
    width: 52px;
    max-width: 52px;
    margin-top: 3px !important;
    font-size: 5.2px !important;
    line-height: 1.18 !important;
    letter-spacing: .025em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
  }

  /* Product selectors stay a fixed 2x2 grid; the actual product content is now
     a real Swiper so users can swipe the large card naturally and circularly. */
  .products > .product-layout > .product-showcase { display: none !important; }
  .product-mobile-swiper {
    order: 3;
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    overflow: hidden !important;
    border-radius: 0;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
    isolation: isolate;
  }
  .product-mobile-swiper > .swiper-wrapper {
    align-items: stretch;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }
  .product-mobile-slide {
    height: auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .product-mobile-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--mobile-media-radius,18px);
    background: #dfe6ec;
    box-shadow: 0 22px 48px rgba(0,9,29,.30);
  }
  .product-mobile-media > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.012);
    transition: transform .72s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  .product-mobile-slide.swiper-slide-active .product-mobile-media > img { transform: scale(1); }
  .product-mobile-swiper.is-swiping .product-mobile-media > img { transition-duration: .18s; }
  .product-mobile-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2,22,46,.54), transparent 45%);
    pointer-events: none;
  }
  .product-mobile-media .product-image-label { z-index: 2; }
  .product-mobile-media .quality-seal { z-index: 3; }

  .product-mobile-copy {
    width: 100%;
    min-width: 0;
    padding: 20px 2px 0;
    color: #fff;
  }
  .product-mobile-copy > p {
    width: fit-content;
    margin: 0 0 11px;
    padding: 6px 9px;
    color: #9edcff;
    border: 1px solid rgba(128,209,248,.24);
    border-radius: 999px;
    background: rgba(128,209,248,.07);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .product-mobile-copy h3 {
    max-width: 15ch;
    margin: 0;
    font-size: clamp(27px,8vw,34px);
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
  }
  .product-mobile-copy > strong {
    display: block;
    margin-top: 8px;
    color: #b6cde0;
    font-size: 13px;
    line-height: 1.45;
  }
  .product-mobile-copy > span {
    margin-top: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #c5d4e0;
    font-size: 12.5px;
    line-height: 1.55;
  }
  .product-mobile-copy ul {
    display: grid;
    gap: 7px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
  }
  .product-mobile-copy li {
    min-height: 40px;
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #e0eaf2;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: var(--mobile-card-radius,14px);
    background: rgba(255,255,255,.045);
    font-size: 11.5px;
    line-height: 1.38;
  }
  .product-mobile-copy li svg {
    width: 15px;
    color: #79d0f9;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .product-mobile-copy > a {
    width: 100%;
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 15px 0 17px;
    color: #05284d;
    border-radius: var(--mobile-card-radius,14px);
    background: #fff;
    box-shadow: 0 16px 32px rgba(0,7,24,.18);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .product-mobile-copy > a svg { width: 18px; }
  .product-mobile-swiper.swiper-fallback > .swiper-wrapper { display: block; }
  .product-mobile-swiper.swiper-fallback .product-mobile-slide { display: none; }
  .product-mobile-swiper.swiper-fallback .product-mobile-slide.fallback-active { display: flex; }

  /* Project thumbnail carousel restored beneath the main project slide. It is
     looped when there are enough projects and stays synchronized with the main Swiper. */
  .project-mobile-controls {
    grid-template-columns: 42px minmax(0,1fr) 42px;
    margin-top: 8px;
  }
  .project-mobile-thumbs {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 2px 0 3px;
    overflow: hidden !important;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
  }
  .project-mobile-thumbs > .swiper-wrapper {
    align-items: stretch;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }
  .project-mobile-thumb {
    position: relative;
    width: auto;
    height: 58px;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid #c9d8e3;
    border-radius: 12px;
    background: #fff;
    opacity: .62;
    overflow: hidden;
    box-sizing: border-box;
    transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
  }
  .project-mobile-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    pointer-events: none;
  }
  .project-mobile-thumb span {
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: 2;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 999px;
    background: rgba(3,18,40,.72);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
  }
  .project-mobile-thumb.active {
    opacity: 1;
    border-color: #2da9e9;
    box-shadow: 0 7px 16px rgba(6,40,77,.16);
  }
  .project-mobile-thumbs.swiper-fallback {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .project-mobile-thumbs.swiper-fallback::-webkit-scrollbar { display: none; }
  .project-mobile-thumbs.swiper-fallback > .swiper-wrapper { gap: 8px; }

  #hero-swiper,
  #product-mobile-swiper,
  #project-mobile-swiper,
  #project-mobile-thumbs { touch-action: pan-y; }
  .product-mobile-swiper a,
  .product-mobile-swiper button,
  .project-mobile-thumbs button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 430px) {
  .product-mobile-media { aspect-ratio: 1.22 / 1; }
  .product-mobile-copy h3 { font-size: clamp(27px,8.4vw,32px); }
  .project-mobile-thumb { height: 54px; }
}

@media (max-width: 360px) {
  .about-seal { width: 70px !important; height: 70px !important; }
  .about-seal span { width: 48px; max-width: 48px; font-size: 4.9px !important; }
  .project-mobile-thumb { height: 51px; }
}

/* === R11 mobile compact carousel pass =====================================
   - Product selector: one horizontal Swiper row, exactly 2 products visible.
   - Project thumbs: one horizontal Swiper row, exactly 2 project cards visible,
     with the same title/location information used by the desktop thumbnail list.
   - About CTA: force true visual centering on touch layouts.
   Desktop/laptop layout is intentionally unchanged. ======================== */
.product-mobile-picker { display: none; }

@media (max-width: 1199px) {
  /* The desktop product navigation remains the canonical data source for JS,
     but the mobile UI uses a dedicated, compact two-up Swiper. */
  .products > .product-layout > .product-nav { display: none !important; }

  .product-mobile-picker {
    order: 1;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 6px 0 8px;
    padding: 1px 0 3px;
    overflow: hidden !important;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
    isolation: isolate;
  }
  .product-mobile-picker > .swiper-wrapper {
    align-items: stretch;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }
  .product-mobile-picker-card,
  .product-mobile-picker-card:nth-child(odd) {
    position: relative;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 64px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 10px !important;
    color: #dceaf7;
    border: 1px solid rgba(143,194,231,.32) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
    text-align: left;
    transform: none !important;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
  }
  .product-mobile-picker-card > span {
    min-width: 0;
    color: #78cfff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .07em;
  }
  .product-mobile-picker-card > strong {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
  }
  .product-mobile-picker-card.active {
    border-color: rgba(106,204,252,.92) !important;
    background: rgba(18,104,165,.28) !important;
    box-shadow: inset 0 -2px 0 #47bffc !important;
  }
  .product-mobile-picker-card:active { transform: scale(.985) !important; }

  .product-mobile-picker.swiper-fallback {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .product-mobile-picker.swiper-fallback::-webkit-scrollbar { display: none; }
  .product-mobile-picker.swiper-fallback > .swiper-wrapper {
    width: max-content;
    display: flex;
    gap: 8px;
  }
  .product-mobile-picker.swiper-fallback .product-mobile-picker-card {
    width: calc((100vw - 40px) / 2) !important;
    flex: 0 0 calc((100vw - 40px) / 2);
  }

  /* Keep the controls compact; the two-up selector is now the primary chooser. */
  .product-mobile-controls {
    order: 2;
    grid-template-columns: 36px minmax(0,1fr) 36px !important;
    gap: 8px !important;
    min-height: 36px;
    margin: 0 0 10px !important;
  }
  .product-mobile-controls > button {
    width: 36px !important;
    height: 36px !important;
  }
  .product-mobile-swipe { display: none !important; }
  .product-mobile-status { min-height: 36px; justify-content: center; }
  .product-mobile-status strong { margin: 0; }

  /* R10 content Swiper remains below the selector and stays synchronized. */
  .product-mobile-swiper { order: 3; margin-top: 0; }

  /* Project thumbnail rail: two full information cards per viewport. */
  .project-mobile-thumbs {
    margin-top: 11px !important;
    padding: 2px 0 4px !important;
    overflow: hidden !important;
  }
  .project-mobile-thumbs > .swiper-wrapper {
    align-items: stretch;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }
  .project-mobile-thumb,
  .project-mobile-thumb:nth-child(n) {
    position: relative;
    height: auto !important;
    min-width: 0;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 !important;
    padding: 6px !important;
    color: #092b50;
    border: 1px solid #cfdae4 !important;
    border-radius: 14px !important;
    background: #fff !important;
    opacity: .72;
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
    transform: none !important;
    transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .project-mobile-thumb > span,
  .project-mobile-thumb > .project-mobile-thumb-copy {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 !important;
    color: inherit !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: normal !important;
  }
  .project-mobile-thumb-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 9px !important;
    background: #dce5ec !important;
  }
  .project-mobile-thumb-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0 !important;
    pointer-events: none;
  }
  .project-mobile-thumb-media b {
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: 2;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    color: #fff;
    border-radius: 999px;
    background: rgba(3,18,40,.78);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .04em;
  }
  .project-mobile-thumb-copy {
    display: grid !important;
    gap: 3px;
    padding: 0 3px 3px !important;
  }
  .project-mobile-thumb-copy strong {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #0a2e54;
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -.01em;
  }
  .project-mobile-thumb-copy small {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #71869a;
    font-size: 9.5px;
    font-weight: 650;
    line-height: 1.25;
  }
  .project-mobile-thumb.active {
    opacity: 1;
    border-color: #249fdd !important;
    box-shadow: 0 9px 22px rgba(6,40,77,.14) !important;
  }
  .project-mobile-thumb.active .project-mobile-thumb-copy strong { color: #0069ad; }
  .project-mobile-thumb:active { transform: scale(.988) !important; }

  .project-mobile-thumbs.swiper-fallback {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .project-mobile-thumbs.swiper-fallback::-webkit-scrollbar { display: none; }
  .project-mobile-thumbs.swiper-fallback > .swiper-wrapper {
    width: max-content;
    display: flex;
    gap: 10px;
  }
  .project-mobile-thumbs.swiper-fallback .project-mobile-thumb {
    width: calc((100vw - 42px) / 2) !important;
    flex: 0 0 calc((100vw - 42px) / 2) !important;
  }

  /* Force the About CTA to the geometric center of the content column. */
  .about-copy > .outline-link {
    display: flex !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(100%, 286px) !important;
    min-width: 0 !important;
    margin: 18px auto 0 !important;
  }

  #product-mobile-picker,
  #product-mobile-swiper,
  #project-mobile-swiper,
  #project-mobile-thumbs { touch-action: pan-y; }
  .product-mobile-picker button,
  .project-mobile-thumbs button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

@media (max-width: 430px) {
  .product-mobile-picker-card,
  .product-mobile-picker-card:nth-child(odd) { min-height: 60px; padding: 8px 9px !important; }
  .product-mobile-picker-card > strong { font-size: 10.8px; }
  .project-mobile-thumb,
  .project-mobile-thumb:nth-child(n) { min-height: 136px; }
  .project-mobile-thumb-copy strong { font-size: 11px; }
  .project-mobile-thumb-copy small { font-size: 9px; }
}

@media (max-width: 360px) {
  .product-mobile-picker-card,
  .product-mobile-picker-card:nth-child(odd) { grid-template-columns: 24px minmax(0,1fr); min-height: 58px; gap: 5px; padding: 7px !important; }
  .product-mobile-picker-card > strong { font-size: 10px; }
  .project-mobile-thumb,
  .project-mobile-thumb:nth-child(n) { min-height: 128px; padding: 5px !important; }
  .project-mobile-thumb-copy strong { font-size: 10.2px; }
  .project-mobile-thumb-copy small { font-size: 8.5px; }
  .about-copy > .outline-link { width: min(100%, 272px) !important; }
}

/* === R23 / Stage 3 · unified mobile interaction contract ================
   Static replacement for the old runtime-injected CSS. This is the single
   final contract for mobile navigation + product/project controls. ========= */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.product-mobile-picker-shell,
.project-mobile-thumb-shell{display:none}
.hero-stats .count-range,
.hero-stats .count-range .range-prefix,
.hero-stats .count-range .range-start,
.hero-stats .count-range .range-separator,
.hero-stats .count-range .range-end{color:#fff!important;-webkit-text-fill-color:#fff!important}
.hero-stats .count-range .range-prefix{opacity:1!important}

body.mobile-nav-open{overflow:hidden}

@media(max-width:1199px){
  /* Navigation and touch target baseline */
  .menu-button,
  .mobile-menu-head>button,
  .hero-slider-nav>div:last-child button,
  .product-mobile-side-arrow,
  .project-mobile-thumb-arrow{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .mobile-menu{padding:max(18px,env(safe-area-inset-top)) 22px max(30px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  .mobile-menu-head{margin-bottom:36px}
  .mobile-menu>p{font-size:12px}
  .mobile-menu>a{min-height:54px;padding:12px 0;font-size:clamp(22px,6vw,30px)}
  .mobile-menu>a small{font-size:12px}
  .mobile-contact a{min-height:44px;display:inline-flex;align-items:center}

  /* Product selector: two cards between fixed 44px controls. */
  .product-mobile-controls,.product-mobile-status,#product-current-mobile{display:none!important}
  .product-mobile-picker-shell{order:1;display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:center!important;column-gap:10px!important;width:100%!important;min-width:0!important;margin:12px 0 22px!important}
  .product-mobile-prev{grid-column:1!important}.product-mobile-picker{grid-column:2!important}.product-mobile-next{grid-column:3!important}
  .product-mobile-picker{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:1px 0 3px!important;overflow:hidden!important;box-sizing:border-box!important;touch-action:pan-y!important}
  .product-mobile-picker>.swiper-wrapper{display:flex!important;align-items:stretch!important;box-sizing:border-box!important}
  .product-mobile-picker.swiper-initialized .product-mobile-picker-card{flex-shrink:0!important;min-width:0!important;max-width:none!important;margin:0!important;box-sizing:border-box!important}
  .product-mobile-picker-card,.product-mobile-picker-card:nth-child(odd){min-height:68px!important;padding:9px 10px!important;border-radius:13px!important}
  .product-mobile-picker-card>strong{font-size:12px!important;line-height:1.25!important}.product-mobile-picker-card>span{font-size:12px!important}
  .product-mobile-swiper{order:2!important;width:100%!important;min-width:0!important;margin-top:0!important}

  /* Project selector: same geometry and readable card labels. */
  .project-mobile-pagination{display:none!important}
  .project-mobile-thumb-shell{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:center!important;column-gap:10px!important;width:100%!important;min-width:0!important;margin:18px 0 4px!important}
  .project-mobile-prev{grid-column:1!important}.project-mobile-thumbs{grid-column:2!important}.project-mobile-next{grid-column:3!important}
  .project-mobile-thumbs{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:2px 0 5px!important;overflow:hidden!important;box-sizing:border-box!important;touch-action:pan-y!important}
  .project-mobile-thumbs>.swiper-wrapper{display:flex!important;align-items:stretch!important;box-sizing:border-box!important}
  .project-mobile-thumbs.swiper-initialized .project-mobile-thumb{flex-shrink:0!important;min-width:0!important;max-width:none!important;margin:0!important;box-sizing:border-box!important}
  .project-mobile-thumb,.project-mobile-thumb:nth-child(n){height:auto!important;min-height:142px!important;padding:6px!important;border-radius:14px!important;box-sizing:border-box!important;justify-content:flex-start!important}
  .project-mobile-thumb-media{width:100%!important;aspect-ratio:16/9!important;display:block!important;overflow:hidden!important;border-radius:9px!important}
  .project-mobile-thumb-copy{min-width:0!important;min-height:48px!important;display:grid!important;gap:4px!important;padding:5px 6px 6px!important}
  .project-mobile-thumb-copy strong{font-size:12px!important;line-height:1.28!important}.project-mobile-thumb-copy small{font-size:12px!important;line-height:1.3!important}
  .project-mobile-thumb-media b{min-width:24px!important;height:24px!important;font-size:11px!important}
  .project-mobile-thumb-arrow{color:#0b365d!important;border-color:#bfd1df!important;background:#fff!important;box-shadow:0 8px 20px rgba(6,40,77,.10)!important}

  .product-mobile-side-arrow,.project-mobile-thumb-arrow{display:grid!important;place-items:center!important;padding:0!important;border-radius:50%!important;box-sizing:border-box!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}
  .product-mobile-side-arrow svg,.project-mobile-thumb-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* Fallback keeps the same two-card geometry when Swiper/CDN is unavailable. */
  .product-mobile-picker.swiper-fallback,.project-mobile-thumbs.swiper-fallback{padding-left:2px!important;padding-right:2px!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch}
  .product-mobile-picker.swiper-fallback::-webkit-scrollbar,.project-mobile-thumbs.swiper-fallback::-webkit-scrollbar{display:none}
  .product-mobile-picker.swiper-fallback>.swiper-wrapper,.project-mobile-thumbs.swiper-fallback>.swiper-wrapper{width:max-content!important;display:flex!important;gap:8px!important}
  .product-mobile-picker.swiper-fallback .product-mobile-picker-card,.project-mobile-thumbs.swiper-fallback .project-mobile-thumb{width:calc((100vw - 136px)/2)!important;flex:0 0 calc((100vw - 136px)/2)!important}

  #product-mobile-picker,#product-mobile-swiper,#project-mobile-swiper,#project-mobile-thumbs{touch-action:pan-y;overscroll-behavior-inline:contain}

  /* Functional text must remain readable on phones. Decorative labels may be
     smaller, but navigation/status/action text is never reduced to 5-9px. */
  .hero .eyebrow,.hero-stats span,.primary-button,.outline-link,.news-head>a,.featured-news a,.featured-news p,.news-stack p,.product-info>a{font-size:12px!important}
  .primary-button,.outline-link{min-height:44px}
  .news-stack h3{font-size:14px!important;line-height:1.35!important}
  .about-seal span{font-size:10px!important;line-height:1.2!important}
  .solution-ribbon article>span{font-size:10px!important}
}

@media(max-width:430px){
  .product-mobile-picker-shell,.project-mobile-thumb-shell{grid-template-columns:44px minmax(0,1fr) 44px!important;column-gap:8px!important}
  .product-mobile-picker-card,.product-mobile-picker-card:nth-child(odd){min-height:66px!important;padding:8px 9px!important}
  .project-mobile-thumb,.project-mobile-thumb:nth-child(n){min-height:138px!important}
  .mobile-menu{padding-inline:18px}
}

@media(max-width:360px){
  .product-mobile-picker-shell,.project-mobile-thumb-shell{column-gap:7px!important}
  .product-mobile-picker-card,.product-mobile-picker-card:nth-child(odd){min-height:64px!important;padding:8px!important}
  .project-mobile-thumb,.project-mobile-thumb:nth-child(n){min-height:134px!important;padding:5px!important}
  .product-mobile-picker.swiper-fallback .product-mobile-picker-card,.project-mobile-thumbs.swiper-fallback .project-mobile-thumb{width:calc((100vw - 126px)/2)!important;flex-basis:calc((100vw - 126px)/2)!important}
}

/* === R25.4 · mobile carousel spacing + transition stability 2026-09-15 ===
   Fixes the legacy 86px project-thumb width, creates deliberate breathing room
   between selectors, and keeps mobile slide synchronization one-directional. */
@media (max-width: 1199px) {
  /* Product categories: two readable cards with a real visual gutter. */
  .product-mobile-picker-shell {
    column-gap: 12px !important;
    margin-top: 14px !important;
    margin-bottom: 24px !important;
  }
  .product-mobile-picker {
    padding: 2px 2px 5px !important;
  }
  .product-mobile-picker-card,
  .product-mobile-picker-card:nth-child(odd) {
    min-height: 70px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(0, 8, 27, .08) !important;
  }
  .product-mobile-picker-card.active {
    box-shadow: inset 0 -2px 0 #47bffc, 0 10px 24px rgba(0, 18, 48, .16) !important;
  }

  /* Project thumbs: let Swiper own slide width. The old 86px !important width
     was the reason 3-4 tiny cards appeared stuck together on phones. */
  .project-mobile-thumb-shell {
    column-gap: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
  }
  .project-mobile-thumbs {
    padding: 3px 2px 8px !important;
  }
  .project-mobile-thumbs.swiper-initialized .project-mobile-thumb {
    width: auto;
    flex: 0 0 auto;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .project-mobile-thumb,
  .project-mobile-thumb:nth-child(n) {
    min-height: 146px !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 20px rgba(6, 40, 77, .055) !important;
  }
  .project-mobile-thumb.active {
    box-shadow: 0 12px 28px rgba(6, 40, 77, .16) !important;
  }

  /* Fallback geometry keeps the same gutter if Swiper is unavailable. */
  .product-mobile-picker.swiper-fallback > .swiper-wrapper,
  .project-mobile-thumbs.swiper-fallback > .swiper-wrapper {
    gap: 14px !important;
  }
  .product-mobile-picker.swiper-fallback .product-mobile-picker-card {
    width: calc((100vw - 142px) / 2) !important;
    flex-basis: calc((100vw - 142px) / 2) !important;
  }
  .project-mobile-thumbs.swiper-fallback .project-mobile-thumb {
    width: calc((100vw - 142px) / 2) !important;
    flex-basis: calc((100vw - 142px) / 2) !important;
  }

  /* Smooth the large product/project scene itself. Swiper owns one transform
     only; wrapper height is kept stable so text/image changes never kick the
     page vertically during a horizontal swipe. */
  .product-mobile-swiper > .swiper-wrapper,
  .project-mobile-swiper > .swiper-wrapper {
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }
  .product-mobile-slide,
  .project-mobile-slide {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
  .product-mobile-media,
  .product-mobile-copy,
  .project-mobile-card,
  .project-mobile-card > img,
  .project-mobile-copy,
  .project-mobile-topline {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .product-mobile-copy {
    opacity: .72;
    transform: translate3d(0, 8px, 0);
    transition: opacity .32s ease, transform .46s cubic-bezier(.22,.61,.36,1);
  }
  .product-mobile-slide.swiper-slide-active .product-mobile-copy {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .project-mobile-copy,
  .project-mobile-topline {
    opacity: .68;
    transform: translate3d(0, 7px, 0);
    transition: opacity .32s ease, transform .46s cubic-bezier(.22,.61,.36,1);
  }
  .project-mobile-slide.swiper-slide-active .project-mobile-copy,
  .project-mobile-slide.swiper-slide-active .project-mobile-topline {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .product-mobile-swiper.is-transitioning .product-mobile-media > img,
  .project-mobile-swiper.is-transitioning .project-mobile-card > img {
    transition-duration: .46s !important;
  }
}

@media (max-width: 430px) {
  .product-mobile-picker-shell,
  .project-mobile-thumb-shell { column-gap: 10px !important; }
  .project-mobile-thumb,
  .project-mobile-thumb:nth-child(n) { min-height: 142px !important; }
}

@media (max-width: 360px) {
  .product-mobile-picker-shell,
  .project-mobile-thumb-shell { column-gap: 9px !important; }
  .product-mobile-picker.swiper-fallback .product-mobile-picker-card,
  .project-mobile-thumbs.swiper-fallback .project-mobile-thumb {
    width: calc((100vw - 132px) / 2) !important;
    flex-basis: calc((100vw - 132px) / 2) !important;
  }
}

/* === R25.4b · homepage mobile news readability 2026-09-15 ===============
   The previous 2-column support-news grid squeezed Vietnamese headlines into
   narrow columns. On phones, supporting stories are now wide swipe cards; the
   category stays above the title, the date sits below the title, and summaries
   use normal body weight. Desktop keeps the existing news geometry. ========== */
.news-date {
  display: block;
  margin-top: 7px;
  color: #8b9bab;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .035em;
  text-transform: none;
}
.news-meta { margin-bottom: 8px !important; }
.news-summary,
.news-excerpt { font-weight: 400 !important; }

@media (max-width: 1199px) {
  .is-home .news {
    padding-top: 56px !important;
    padding-bottom: 54px !important;
  }
  .is-home .news-head { margin-bottom: 18px !important; }
  .is-home .featured-news > .news-copy { padding: 17px 16px 18px !important; }
  .is-home .featured-news .news-meta {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: var(--type-meta) !important;
    line-height: 1.3 !important;
  }
  .is-home .featured-news h3 {
    margin: 0 !important;
    font-size: clamp(20px, 5.8vw, 25px) !important;
    line-height: 1.28 !important;
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
  }
  .is-home .featured-news .news-date {
    margin-top: 7px;
    font-size: var(--type-meta);
    opacity: .9;
  }
  .is-home .news-excerpt {
    margin-top: 9px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  /* Wide swipe cards prevent one-word-per-line headlines while keeping the
     homepage compact. The next card peeks in to make the horizontal gesture
     obvious without adding another control row. */
  .is-home .news-stack {
    width: auto !important;
    margin: 14px -16px 0 !important;
    padding: 2px 16px 12px !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 13px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .is-home .news-stack::-webkit-scrollbar { display: none; }
  .is-home .news-stack article {
    position: relative;
    flex: 0 0 min(84vw, 340px) !important;
    width: min(84vw, 340px) !important;
    min-width: min(84vw, 340px) !important;
    min-height: 286px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: 142px minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px 8px !important;
    padding: 9px !important;
    border-radius: 18px 7px 18px 7px !important;
    scroll-snap-align: start;
    overflow: hidden;
  }
  .is-home .news-thumb {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 142px !important;
    border-radius: 13px 5px 13px 5px !important;
  }
  .is-home .news-stack .news-card-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    padding: 0 2px 3px !important;
  }
  .is-home .news-stack .news-meta {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: var(--type-meta) !important;
    line-height: 1.25 !important;
  }
  .is-home .news-stack h3 {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.34 !important;
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
  }
  .is-home .news-stack .news-date {
    margin-top: 6px !important;
    font-size: var(--type-meta) !important;
    font-weight: 500 !important;
  }
  .is-home .news-summary {
    margin-top: 7px !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--muted) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
  }
  .is-home .news-stack article > a {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: end !important;
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 430px) {
  .is-home .news-stack {
    margin-left: -14px !important;
    margin-right: -14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    scroll-padding-inline: 14px;
  }
  .is-home .news-stack article {
    flex-basis: min(86vw, 326px) !important;
    width: min(86vw, 326px) !important;
    min-width: min(86vw, 326px) !important;
    grid-template-rows: 132px minmax(0, 1fr) !important;
    min-height: 272px !important;
  }
  .is-home .news-thumb { height: 132px !important; }
}

@media (max-width: 360px) {
  .is-home .news-stack article {
    flex-basis: min(88vw, 300px) !important;
    width: min(88vw, 300px) !important;
    min-width: min(88vw, 300px) !important;
    grid-template-rows: 122px minmax(0, 1fr) !important;
  }
  .is-home .news-thumb { height: 122px !important; }
  .is-home .news-stack h3 { font-size: 13px !important; }
}

/* === R25.4c · stable mobile product/project scene height =================== */
@media (max-width: 1199px) {
  .product-mobile-swiper > .swiper-wrapper,
  .project-mobile-swiper > .swiper-wrapper {
    align-items: stretch !important;
  }
  .product-mobile-slide,
  .project-mobile-slide {
    height: auto !important;
    align-self: stretch;
  }
  .product-mobile-picker-card,
  .project-mobile-thumb {
    margin-inline: 0 !important;
  }
}

/* DBCO R28.5 - Home About video media (mobile-safe progressive playback) */
.about-frame>.about-media-fallback,.about-frame>.about-media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0);transition:transform 1.2s var(--ease),opacity .22s ease}
.about-frame>.about-media-fallback{z-index:1;opacity:1}
.about-frame>.about-media-video{z-index:2;display:block!important;visibility:visible!important;opacity:1;pointer-events:none;background:transparent}
.about-frame.has-video.is-video-playing>.about-media-fallback{opacity:0}
.about-frame.has-video.video-failed>.about-media-video{opacity:0}
.about-frame.has-video.video-failed>.about-media-fallback{opacity:1}
.about-video-play{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);min-height:48px;padding:0 18px;display:none;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;background:rgba(4,36,70,.9);box-shadow:0 14px 34px rgba(0,20,44,.28);backdrop-filter:blur(10px);font:700 12px/1 system-ui,sans-serif;cursor:pointer}
.about-frame.video-blocked>.about-video-play{display:inline-flex}
.about-video-play[hidden]{display:none!important}.about-video-play span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fff;color:var(--blue);font-size:10px;padding-left:2px}
.about-frame:hover>.about-media-fallback,.about-frame:hover>.about-media-video{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.about-frame>.about-media-fallback,.about-frame>.about-media-video{transition:opacity .12s linear!important;transform:none!important}}
@media (hover:none),(max-width:1199px){.about-frame:hover>.about-media-fallback,.about-frame:hover>.about-media-video{transform:none}.about-frame>.about-media-video{display:block!important;visibility:visible!important}.about-frame.has-video:not(.is-video-playing):not(.video-failed)>.about-video-play{display:inline-flex}.about-video-play{min-height:46px;padding:0 15px;font-size:11px}}

/* ========================================================================
   R28.3 — Product category home + header mega menu
   ======================================================================== */
.header-shell { position: relative; }
.desktop-nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.desktop-nav-item > .desktop-nav-link { height: 100%; }
.desktop-nav-item .nav-chevron { width: 14px; height: 14px; margin-left: 2px; transition: transform .25s ease; }
.desktop-nav-item:hover .nav-chevron,
.desktop-nav-item:focus-within .nav-chevron { transform: rotate(180deg); }

.product-mega-menu {
  position: absolute;
  z-index: 130;
  top: calc(100% - 2px);
  left: 50%;
  width: min(1120px, calc(100vw - 72px));
  padding: 22px;
  color: #102943;
  border: 1px solid rgba(13,68,116,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 28px 70px rgba(1,25,53,.2);
  backdrop-filter: blur(24px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transform-origin: top center;
  transition: opacity .22s ease, transform .28s var(--ease), visibility .22s;
}
.has-product-mega:hover .product-mega-menu,
.has-product-mega:focus-within .product-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.product-mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 16px;
}
.product-mega-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 0 2px 16px;
  border-bottom: 1px solid #e6edf4;
}
.product-mega-head > div { display: grid; gap: 5px; }
.product-mega-head span { color: #1686d9; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.product-mega-head strong { color: #092747; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.desktop-nav .product-mega-menu a,
.desktop-nav .product-mega-menu a:hover,
.desktop-nav .product-mega-menu a:focus {
  height: auto;
  text-transform: none;
  letter-spacing: normal;
}
.desktop-nav .product-mega-menu a::after { display: none !important; }
.product-mega-all {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  color: #fff !important;
  border-radius: 999px;
  background: #092747;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.product-mega-all svg { width: 15px !important; }
.product-mega-all:hover { background: #0876c9; }
.product-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.product-mega-column {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e5edf4;
  border-radius: 16px;
  background: linear-gradient(180deg,#fbfdff 0%,#f4f8fc 100%);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.product-mega-column:hover {
  transform: translateY(-2px);
  border-color: #b8d7ec;
  box-shadow: 0 12px 28px rgba(9,55,94,.09);
}
.product-mega-root {
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
  color: #092747 !important;
  border-bottom: 1px solid #dfe8f0;
}
.product-mega-root > span { color: #1787d5; font-size: 10px; font-weight: 800; }
.product-mega-root > strong { min-width: 0; font-size: 14px; line-height: 1.3; font-weight: 800; }
.product-mega-root > svg { width: 15px !important; }
.product-mega-children { display: grid; gap: 10px; padding-top: 12px; }
.product-mega-branch { display: grid; gap: 5px; }
.product-mega-branch > a {
  display: inline-flex !important;
  width: fit-content;
  color: #294d6d !important;
  font-size: 12px !important;
  line-height: 1.35;
  font-weight: 750 !important;
}
.product-mega-branch > a:hover { color: #0876c9 !important; }
.product-mega-level3 { display: grid; gap: 3px; padding-left: 11px; border-left: 1px solid #dce8f1; }
.product-mega-level3 a {
  display: inline-flex !important;
  width: fit-content;
  color: #6b8195 !important;
  font-size: 10.5px !important;
  line-height: 1.35;
  font-weight: 600 !important;
}
.product-mega-level3 a:hover { color: #0876c9 !important; }

.product-category-filter {
  display: grid;
  gap: 5px;
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid #dbe9f3;
  border-radius: 12px;
  background: #f6fbff;
}
.product-category-filter span { color: #7890a5; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.product-category-filter strong { color: #0b355c; font-size: 14px; }
.product-category-filter a { width: fit-content; color: #0876c9; font-size: 11px; font-weight: 800; }

.mobile-product-menu { border-bottom: 1px solid #ffffff22; }
.mobile-product-menu-head { display: grid; grid-template-columns: minmax(0,1fr) 46px; align-items: center; gap: 8px; }
.mobile-product-menu-head > a {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 12px 0;
  color: #fff;
  font-size: clamp(22px,6vw,30px);
  font-weight: 650;
}
.mobile-product-menu-head > a small { color: #7893ae; font-size: 12px; }
.mobile-product-menu-head > button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #b9dcf2;
  border: 1px solid #ffffff29;
  border-radius: 13px;
  background: #ffffff0b;
  cursor: pointer;
}
.mobile-product-menu-head > button svg { width: 18px; transition: transform .25s ease; }
.mobile-product-menu.is-open .mobile-product-menu-head > button svg { transform: rotate(180deg); }
.mobile-product-tree { padding: 6px 0 16px 42px; }
.mobile-product-tree[hidden] { display: none !important; }
.mobile-product-root { padding: 9px 0; border-top: 1px solid #ffffff12; }
.mobile-product-root:first-child { border-top: 0; }
.mobile-product-root > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #8ed7fb; font-size: 14px; }
.mobile-product-root > a strong { font-weight: 800; }
.mobile-product-root > a span { color: #6caed3; }
.mobile-product-children { display: grid; gap: 8px; padding: 10px 0 0 12px; }
.mobile-product-branch { display: grid; gap: 6px; }
.mobile-product-branch > a { color: #fff; font-size: 13px; line-height: 1.35; font-weight: 650; }
.mobile-product-level3 { display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-product-level3 a {
  padding: 5px 8px;
  color: #b9cad9;
  border: 1px solid #ffffff1b;
  border-radius: 999px;
  background: #ffffff08;
  font-size: 10.5px;
  line-height: 1.2;
}

@media (max-width: 1280px) and (min-width: 1200px) {
  .product-mega-menu { width: min(980px, calc(100vw - 48px)); padding: 18px; }
  .product-mega-grid { gap: 9px; }
  .product-mega-column { padding: 11px; }
  .product-mega-root > strong { font-size: 12.5px; }
  .product-mega-branch > a { font-size: 11px !important; }
  .product-mega-level3 a { font-size: 9.5px !important; }
}

@media (max-width: 1199px) {
  .product-mega-menu { display: none !important; }
}


/* R28.5 mobile home-video hardening: video remains visible even if JS fails. */
@media (max-width:1199px){.about-frame.has-video{background:transparent}.about-frame.has-video .about-media-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;background:transparent!important}.about-frame.has-video.is-video-playing .about-media-fallback{opacity:0!important}.about-frame.has-video.video-failed .about-media-video{opacity:0!important}.about-frame.has-video.video-failed .about-media-fallback{opacity:1!important}}

/* === R28.9 · Home news overflow guard =====================================
   Keep long Vietnamese summaries inside the homepage news cards at every
   viewport. Descriptions use body typography (not uppercase/bold) and are
   clamped independently from category/date metadata. ======================= */
.is-home .news {
  min-width: 0;
  overflow: hidden;
}
.is-home .featured-news,
.is-home .news-stack,
.is-home .news-stack article,
.is-home .news-copy,
.is-home .news-card-copy {
  min-width: 0;
  max-width: 100%;
}
.is-home .news-copy,
.is-home .news-card-copy {
  overflow: hidden;
}
.is-home .featured-news h3,
.is-home .news-stack h3,
.is-home .news-excerpt,
.is-home .news-summary {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}
.is-home .news-excerpt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden !important;
  margin-top: 10px !important;
  gap: 0 !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
}
.is-home .news-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}
.is-home .news-stack article {
  overflow: hidden;
}
@media (min-width: 1200px) and (max-height: 900px) {
  .is-home .news-excerpt { -webkit-line-clamp: 2; }
  .is-home .news-summary { -webkit-line-clamp: 2; }
}
@media (max-width: 1199px) {
  .is-home .news-excerpt {
    -webkit-line-clamp: 3;
    font-size: 12px !important;
  }
  .is-home .news-summary {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    font-size: 10.5px !important;
  }
}

/* ========================================================================
   R28.15 - Brand assets + professional product mega menu
   ======================================================================== */
.brand-logo-img{
  display:block;
  flex:0 0 auto;
  width:auto;
  max-width:168px;
  height: 68px;
  object-fit:contain;
  object-position:left center;
}
.brand-logo-img--loader{max-width:128px;height:48px;object-position:center}
.footer-brand .brand-logo-img{max-width:150px;height:46px}
.mobile-menu .brand-logo-img{max-width:142px;height:42px}

@media (min-width:1200px){
  .product-mega-menu{
    width:min(1380px,calc(100vw - 56px));
    padding:26px;
    border-radius:27px;
    box-shadow:0 34px 90px rgba(1,25,53,.24);
  }
  .product-mega-head{margin-bottom:20px;padding-bottom:19px}
  .product-mega-head strong{font-size:24px}
  .product-mega-body{
    display:grid;
    grid-template-columns:minmax(250px,310px) minmax(0,1fr);
    gap:20px;
    align-items:stretch;
  }
  .product-mega-preview{
    position:relative;
    display:flex;
    min-width:0;
    min-height:360px;
    overflow:hidden;
    border-radius:21px;
    background:#062f54;
  }
  .product-mega-preview__media{position:absolute;inset:0}
  .product-mega-preview__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,28,52,.06) 8%,rgba(3,28,52,.92) 94%)}
  .product-mega-preview__media img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .24s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .product-mega-preview__media img.is-switching{opacity:.18;transform:scale(1.035)}
  .product-mega-preview__copy{position:relative;z-index:2;align-self:flex-end;display:grid;gap:8px;padding:24px;color:#fff}
  .product-mega-preview__copy small{color:#8fd5f7;font-size:9px;font-weight:900;letter-spacing:.16em}
  .product-mega-preview__copy strong{font-size:24px;line-height:1.12;letter-spacing:-.025em}
  .product-mega-preview__copy p{margin:0;color:#c7d9e6;font-size:12px;line-height:1.65}
  .product-mega-preview__copy>span{margin-top:5px;color:#fff;font-size:10.5px;font-weight:800}
  .product-mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-mega-column{
    padding:15px 16px;
    border-radius:18px;
    background:linear-gradient(145deg,#fff,#f5f9fc);
  }
  .product-mega-column.is-preview-active,.product-mega-column:hover{
    border-color:#92c8e6;
    background:linear-gradient(145deg,#fff,#eef8fe);
    box-shadow:0 14px 32px rgba(9,55,94,.105);
  }
  .product-mega-root{
    grid-template-columns:48px minmax(0,1fr) 18px;
    gap:12px;
    min-height:58px;
    padding:3px 0 13px;
  }
  .product-mega-icon{
    display:grid!important;
    place-items:center;
    width:44px;
    height:44px;
    overflow:hidden;
    border:1px solid #d8e7ef;
    border-radius:12px;
    background:#fff;
  }
  .product-mega-icon img{display:block;width:100%;height:100%;padding:4px;object-fit:contain}
  .product-mega-root__copy{display:grid;gap:3px;min-width:0}
  .product-mega-root__copy small{color:#94a8b6;font-size:8.5px;font-weight:900;letter-spacing:.11em}
  .product-mega-root__copy strong{color:#0d395a;font-size:14px;line-height:1.3}
  .product-mega-children{gap:13px;padding-top:13px}
  .product-mega-branch{gap:7px}
  .product-mega-branch>a{font-size:12.5px!important;line-height:1.45}
  .product-mega-level3{gap:5px;padding-left:13px}
  .product-mega-level3 a{font-size:10.5px!important;line-height:1.45}
}
@media (min-width:1200px) and (max-width:1260px){
  .product-mega-menu{width:calc(100vw - 36px);padding:20px}
  .product-mega-body{grid-template-columns:230px minmax(0,1fr);gap:14px}
  .product-mega-preview{min-height:330px}
  .product-mega-preview__copy{padding:18px}
  .product-mega-preview__copy strong{font-size:20px}
  .product-mega-column{padding:12px}
  .product-mega-root{grid-template-columns:40px minmax(0,1fr) 15px;gap:8px}
  .product-mega-icon{width:37px;height:37px}
}


/* ================================================================
   R28.18-D7 - Mobile / touch / motion consolidation
   Keep touch scrolling native; decorative motion is desktop-only.
   ================================================================ */
:root{--visual-viewport-height:100dvh}
.mobile-menu{height:var(--visual-viewport-height,100dvh);max-height:var(--visual-viewport-height,100dvh)}
@media (hover:none),(pointer:coarse){
  .fx-pointer-glow{display:none!important}
  .about-frame img,.product-image>img,.project-main>img,.news-photo img{--parallax-y:0px!important}
  a,button,[role="button"]{-webkit-tap-highlight-color:rgba(7,93,164,.12)}
}
@media (max-width:1199px){
  #hero-swiper,#product-mobile-picker,#product-mobile-swiper,#project-mobile-swiper,#project-mobile-thumbs{touch-action:pan-y pinch-zoom!important;overscroll-behavior-inline:contain;-webkit-tap-highlight-color:transparent}
  #product-mobile-picker>.swiper-wrapper,#product-mobile-swiper>.swiper-wrapper,#project-mobile-swiper>.swiper-wrapper,#project-mobile-thumbs>.swiper-wrapper{will-change:transform}
  .product-mobile-picker.swiper-fallback,.project-mobile-thumbs.swiper-fallback,.product-nav,.project-thumbs,.news-stack{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:none}
  .product-mobile-picker.swiper-fallback::-webkit-scrollbar,.project-mobile-thumbs.swiper-fallback::-webkit-scrollbar,.product-nav::-webkit-scrollbar,.project-thumbs::-webkit-scrollbar,.news-stack::-webkit-scrollbar{display:none}
  .menu-button,.mobile-menu-head>button,.product-mobile-prev,.product-mobile-next,.project-mobile-prev,.project-mobile-next{min-width:44px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .fx-pointer-glow{display:none!important}
  .reveal,[data-reveal],.capability-live *{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}