/* ==========================================================
   AEB Dammam Containers — Home design 2
   Colours sampled from the AEB logo:
   navy #113d6a (AEB letters) · royal #30538b (machine body)
   highlight #4a7eca · black #0b0f14 · white
   ========================================================== */

:root {
  --navy-950: #071526;
  --navy-900: #0b2340;
  --navy: #113d6a;
  --royal: #30538b;
  --blue: #2a62ad;
  --blue-hover: #1f4f91;
  --bright: #4a7eca;
  --ice: #cfe0f5;
  --sky: #eef4fb;
  --black: #0b0f14;
  --text: #1b2533;
  --muted: #5a677a;
  --line: #dde5ef;
  --white: #fff;
  --wa: #1fae55;

  --font: "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --r: 14px;
  --r-lg: 24px;
  --sh: 0 2px 6px rgba(11,35,64,.05), 0 12px 32px rgba(11,35,64,.08);
  --sh-lg: 0 30px 70px rgba(11,35,64,.2);
  --g: clamp(16px, 4vw, 32px);
  --sec: clamp(64px, 9vw, 112px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --hero-h: clamp(620px, 84vh, 780px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--fill { fill: currentColor; stroke: none; }
.wrap { width: 100%; max-width: 1260px; margin-inline: auto; padding-inline: var(--g); }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--navy); color: #fff; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ---------- Type helpers ---------- */
.tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--royal); }
.tag span { width: 10px; height: 10px; border-radius: 3px; background: var(--bright); box-shadow: 14px 0 0 var(--navy); margin-right: 14px; }
.tag--light { color: #b9d0ef; }
.tag--light span { box-shadow: 14px 0 0 #fff; }
.t2 { font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.85rem); font-weight: 800; color: var(--navy-900); }
.t3 { font-size: 1.3rem; font-weight: 800; }
.t4 { font-size: 1.1rem; font-weight: 700; }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); color: var(--muted); }

.head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.head .tag { justify-content: center; }
.head .t2 { margin-bottom: 14px; }
.head > p:last-child { color: var(--muted); font-size: 1.06rem; }
.head--light .t2 { color: #fff; }
.head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; text-align: left; }
.head--row .t2 { margin: 0; }

/* ---------- Buttons ---------- */
.b {
  --bg: var(--navy); --fg: #fff; --bd: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 2px solid var(--bd); border-radius: 12px;
  background: var(--bg); color: var(--fg); font-weight: 700; font-size: .96rem; line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.b:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(17,61,106,.22); }
.b .ic { transition: transform .2s; }
.b:hover .ic:last-child { transform: translateX(3px); }
.b--lg { min-height: 54px; padding: 14px 26px; font-size: 1rem; }
.b--full { width: 100%; }
.b--primary { --bg: var(--blue); }
.b--primary:hover { --bg: var(--blue-hover); }
.b--dark { --bg: var(--navy-900); }
.b--dark:hover { --bg: var(--navy); }
.b--line { --bg: transparent; --fg: var(--navy); --bd: var(--ice); }
.b--line:hover { --bd: var(--navy); --bg: var(--white); }
.b--glass { --bg: rgba(255,255,255,.08); --bd: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.b--glass:hover { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.b--wa { --bg: var(--wa); }
.b--wa:hover { --bg: #189448; }
.b--wa:hover .ic { transform: none; }
@media (max-width: 480px) { .b { white-space: normal; } .head--row .b { width: 100%; } }

/* ==========================================================
   HEADER
   ========================================================== */
.hdr { position: sticky; top: 0; z-index: 100; }
.hdr__top { background: var(--navy-900); color: #b9c8db; font-size: .82rem; }
.hdr__top-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 40px; }
.hdr__note { margin: 0; display: flex; align-items: center; gap: 8px; }
.hdr__contacts { display: flex; gap: 22px; }
.hdr__contacts li, .hdr__contacts a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hdr__contacts a:hover { color: #fff; }
.hdr__top .ic { width: 15px; height: 15px; color: var(--bright); }

.hdr__main { background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.hdr.is-scrolled .hdr__main { box-shadow: 0 10px 30px rgba(11,35,64,.1); }
.hdr__inner { display: flex; align-items: center; gap: 24px; min-height: 84px; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 64px; height: 64px; object-fit: contain; }
.brand__name { display: grid; line-height: 1; }
.brand__name b { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 700; letter-spacing: .18em; color: var(--navy); }
.brand__name span { margin-top: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--black); }
.brand--light img { background: #fff; border-radius: 14px; padding: 4px; }
.brand--light .brand__name b { color: #fff; }
.brand--light .brand__name span { color: #b9c8db; }

.menu { margin-inline: auto; }
.menu__list { display: flex; align-items: center; gap: 2px; }
.menu__list > li { position: relative; }
.menu__link {
  display: flex; align-items: center; gap: 4px; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  font-weight: 600; font-size: .95rem; color: var(--text); white-space: nowrap; transition: background .2s, color .2s;
}
.menu__link:hover, .menu__drop.is-open > .menu__link { background: var(--sky); color: var(--navy); }
.menu__link.is-current { color: var(--navy); background: var(--sky); }
.menu__btn .ic { width: 16px; height: 16px; transition: transform .2s; }
.menu__drop.is-open .menu__btn .ic { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 560px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.mega--sm { width: 300px; }
.menu__drop.is-open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__list--1 { grid-template-columns: 1fr; }
.mega__list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: .84rem; color: var(--muted); transition: background .15s; }
.mega__list a:hover { background: var(--sky); }
.mega__list b { display: block; font-size: .94rem; color: var(--navy-900); }
.mega__ic { width: 42px; height: 42px; flex: none; padding: 6px; border-radius: 10px; background: var(--sky); color: var(--navy); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mega__ic--s { padding: 10px; stroke-width: 1.8; }

.hdr__actions { display: flex; align-items: center; gap: 12px; }
.toggle { display: none; width: 48px; height: 48px; padding: 14px 12px; border: 0; border-radius: 12px; background: var(--navy); flex-direction: column; justify-content: space-between; }
.toggle span { height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu__cta { display: none; }

@media (min-width: 1024px) {
  .menu__drop:hover > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .menu__drop:hover .menu__btn .ic { transform: rotate(180deg); }
}
/* Compact desktop header so six menu items fit between 1024px and 1180px */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hdr__inner { gap: 14px; }
  .brand { gap: 10px; }
  .brand img { width: 52px; height: 52px; }
  .brand__name b { font-size: 1.5rem; }
  .brand__name span { font-size: .66rem; letter-spacing: .12em; }
  .menu__link { padding: 9px 8px; font-size: .92rem; }
  .hdr__quote { padding: 10px 16px; }
  .hdr__quote .ic { display: none; }
}
@media (max-width: 1023px) {
  .toggle { display: flex; }
  .hdr__inner { min-height: 74px; }
  .brand img { width: 54px; height: 54px; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px var(--g) 24px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 50px rgba(11,35,64,.18);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .25s, visibility .25s;
  }
  .menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .menu__list { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__list > li { border-bottom: 1px solid var(--line); }
  .menu__link { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 1.04rem; border-radius: 0; }
  .menu__link:hover, .menu__link.is-current, .menu__drop.is-open > .menu__link { background: none; }
  .mega { position: static; width: auto; padding: 0 0 12px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .mega::before { display: none; }
  .menu__drop.is-open > .mega { display: block; transform: none; }
  .mega__list { grid-template-columns: 1fr; }
  .menu__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .hdr { position: sticky; }
  .hdr__main { position: relative; }
}
@media (max-width: 900px) { .hdr__note, .hdr__contacts .hdr__hours { display: none; } .hdr__top-inner { justify-content: center; } }
@media (max-width: 560px) {
  .hdr__quote { display: none; }
  .hdr__contacts { gap: 14px; font-size: .78rem; }
  .menu__cta { grid-template-columns: 1fr; }
  .brand__name b { font-size: 1.45rem; }
  .brand__name span { font-size: .64rem; letter-spacing: .12em; }
}
@media (max-width: 400px) { .hdr__contacts li:nth-child(2) { display: none; } }

/* ==========================================================
   HERO
   ========================================================== */
.hero2 { position: relative; padding: 16px 16px 0; background: #fff; }
.hero2__frame { position: relative; height: var(--hero-h); border-radius: 28px; overflow: hidden; background: var(--navy-950); color: #fff; isolation: isolate; }
.hero2__slides { position: absolute; inset: 0; }
.hs { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; }
.hs.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; z-index: -2; transform: scale(1.06); transition: transform 8s linear; will-change: transform; backface-visibility: hidden; }
.hs.is-active .hs__img { transform: scale(1); }
.hero2.is-offscreen .hs__img { transition: none; }
.hs::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,21,38,.93) 0%, rgba(11,35,64,.8) 34%, rgba(17,61,106,.32) 52%, rgba(17,61,106,.06) 72%),
    linear-gradient(0deg, rgba(7,21,38,.8) 0%, rgba(7,21,38,0) 30%);
}
.hs__body { padding-bottom: 120px; }
.hs__body > * { max-width: 600px; }
.hs__title { text-shadow: 0 2px 18px rgba(7,21,38,.45); margin: 0 0 18px; font-weight: 800; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.8rem); line-height: 1.06; letter-spacing: -.03em; }
.hs__text { text-shadow: 0 1px 10px rgba(7,21,38,.5); font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); color: #cddaea; max-width: 540px; margin-bottom: 30px; }
.hs__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hs__body > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hs.is-active .hs__body > * { opacity: 1; transform: none; }
.hs.is-active .hs__body > :nth-child(1) { transition-delay: .2s; }
.hs.is-active .hs__body > :nth-child(2) { transition-delay: .32s; }
.hs.is-active .hs__body > :nth-child(3) { transition-delay: .44s; }
.hs.is-active .hs__body > :nth-child(4) { transition-delay: .56s; }

.hero2__tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: 26px; }
.htab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.6); text-align: left; transition: color .2s; }
.htab:hover, .htab.is-active { color: #fff; }
.htab__bar { grid-column: 1 / -1; display: block; height: 3px; margin-bottom: 12px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.htab__bar i { display: block; height: 100%; background: var(--bright); transform: scaleX(0); transform-origin: left; }
.htab.is-active .htab__bar i { transform: scaleX(1); }
.htab.is-running .htab__bar i { transform: scaleX(0); animation: fill var(--dur, 7s) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.htab b { font-size: .82rem; font-weight: 800; color: var(--bright); }
.htab__label { font-weight: 600; font-size: .92rem; }

/* Quick quote card */
.qq {
  position: absolute; z-index: 10; right: max(32px, calc((100% - 1260px) / 2 + 32px)); top: calc(16px + (var(--hero-h) - 120px) / 2); transform: translateY(-50%);
  width: 360px; padding: 26px; background: #fff; border-radius: 22px; box-shadow: var(--sh-lg);
}
.qq__eyebrow { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bright); }
.qq__title { font-size: 1.5rem; font-weight: 800; color: var(--navy-900); margin-bottom: 16px; }
.qq .f { margin-bottom: 12px; }
.qq__note { margin: 10px 0 0; font-size: .8rem; text-align: center; color: var(--muted); }

/* form fields (shared) */
.f { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.f label, .f legend { padding: 0; font-size: .84rem; font-weight: 600; color: var(--navy-900); }
.f > label span, .f > legend span { color: #c0392b; }
.f input, .f select, .f textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 1rem; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.f textarea { min-height: 92px; resize: vertical; }
.f select { appearance: none; padding-right: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23113d6a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat, #fff; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 4px rgba(74,126,202,.2); }
.f.is-invalid input, .f.is-invalid select { border-color: #c0392b; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--sky); }
.seg2 label { position: relative; }
.seg2 input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg2 span { display: grid; place-items: center; min-height: 40px; border-radius: 9px; font-weight: 700; font-size: .95rem; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.seg2 input:checked + span { background: var(--navy); color: #fff; box-shadow: 0 4px 10px rgba(17,61,106,.25); }
.seg2 input:focus-visible + span { outline: 3px solid var(--bright); }
.seg2--light { margin: 0; height: 50px; }
.seg2--light label, .seg2--light span { height: 100%; min-height: 0; }
fieldset.f > legend { margin-bottom: 6px; }

@media (max-width: 1100px) {
  .hero2 { padding: 16px 16px 0; }
  .qq { position: relative; right: auto; top: auto; transform: none; width: auto; max-width: 640px; margin: -70px auto 0; }
  .hs__body { padding-bottom: 150px; }
}
@media (max-width: 760px) {
  :root { --hero-h: 640px; }
  .hero2 { padding: 0; }
  .hero2__frame { border-radius: 0; }
  .hs { align-items: flex-end; }
  .hs__img { object-position: 76% 50%; }
  .hs::before { background: linear-gradient(0deg, rgba(7,21,38,.97) 0%, rgba(11,35,64,.85) 50%, rgba(11,35,64,.35) 80%, rgba(11,35,64,.2) 100%); }
  .hs__body { padding-bottom: 150px; }
  .hs__btns .b { flex: 1 1 200px; }
  .htab__label { display: none; }
  .hero2__tabs { gap: 10px; padding-bottom: 96px; }
  .qq { margin: -72px 12px 0; padding: 22px 18px; }
}
@media (max-width: 380px) { .hs__title { font-size: 1.9rem; } }

/* Content inside the 16px-inset rounded frames lines up with the page grid */
.hero2__frame .wrap, .ph > .wrap { padding-inline: clamp(calc(var(--g) - 16px), calc((100% - 1228px) / 2 + var(--g) - 16px), var(--g)); }
@media (max-width: 760px) { .hero2__frame .wrap, .ph > .wrap { padding-inline: var(--g); } }
/* ---------- Trust ---------- */
.trust2 { padding: 28px 0 0; }
.trust2__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust2__list li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); font-size: .9rem; color: var(--muted); line-height: 1.35; }
.trust2__list b { display: block; font-size: 1.08rem; color: var(--navy-900); }
.trust2__ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--sky); color: var(--navy); }
.trust2__ic .ic { width: 24px; height: 24px; }
@media (max-width: 1000px) { .trust2__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .trust2__list { gap: 10px; } .trust2__list li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; } }

/* ==========================================================
   SECTIONS
   ========================================================== */
.sec { padding-block: var(--sec); }
.sec--sky { background: var(--sky); }

/* Intro */
.intro2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.intro2__copy .t2 { margin-bottom: 20px; }
.intro2__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.intro2__visual { display: grid; place-items: center; }
.orbit { container-type: inline-size; position: relative; width: min(100%, 460px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--sky) 0 56%, transparent 56.3%), repeating-radial-gradient(circle, var(--ice) 0 1px, transparent 1px 34px); }
.orbit::before { content: ""; position: absolute; inset: 9%; 
  /* border: 2px dashed var(--ice);  */ border: 2px dashed #113D6A;
  border-radius: 50%; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit__logo { position: absolute; 
  /* inset: 24%;  */ inset: 10%;
  display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: var(--sh-lg); }
.orbit__logo img { 
  /* width: 78%;  */ width: 100%;
}
.orbit__pill {
  --r: 41cqw;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  padding: 8px 14px; border-radius: 30px; background: var(--navy); color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px rgba(17,61,106,.25);
}
.orbit__pill:nth-of-type(even) { background: var(--bright); }
@media (max-width: 900px) { .intro2 { grid-template-columns: 1fr; } .intro2__visual { order: 2; } }
@media (max-width: 420px) { .orbit__pill { font-size: .7rem; padding: 6px 10px; } }

/* Product explorer */
.px { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.px__tabs { display: grid; gap: 8px; align-content: start; }
.px__tab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid transparent; border-radius: var(--r); background: #fff; font-weight: 700; font-size: 1rem; color: var(--navy-900); text-align: left; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.px__tab svg { width: 40px; height: 40px; flex: none; padding: 5px; border-radius: 10px; background: var(--sky); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: background .2s; }
.px__tab:hover { border-color: var(--ice); }
.px__tab.is-active { background: var(--navy); color: #fff; box-shadow: 0 12px 26px rgba(17,61,106,.25); }
.px__tab.is-active svg { background: rgba(255,255,255,.12); }
.px__panels { min-width: 0; }
.pp { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 100%; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.pp[hidden] { display: none; }
.pp.is-active { animation: ppin .45s var(--ease); }
@keyframes ppin { from { opacity: 0; transform: translateY(10px); } }
.pp__art { position: relative; display: grid; place-items: center; align-content: center; gap: 18px; 
  /* padding: 32px;  */padding-bottom: 32px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--royal) 60%, var(--bright) 130%); color: #fff; overflow: hidden; }
.pp__art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px); }
.pp__art svg { position: relative; width: min(80%, 230px); height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pp__art span { position: relative; padding: 6px 14px; border-radius: 30px; background: rgba(255,255,255,.14); font-size: .84rem; font-weight: 700; text-align: center; }
.pp__body { padding: clamp(24px, 4vw, 40px); }
.pp__body .t3 { font-size: 1.6rem; color: var(--navy-900); margin-bottom: 12px; }
.pp__body > p { color: var(--muted); }
.pp__h { margin: 20px 0 10px; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--royal); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 30px; background: var(--sky); color: var(--navy); font-size: .86rem; font-weight: 600; }
.uses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.uses li { position: relative; padding-left: 20px; font-size: .94rem; }
.uses li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--bright); }
.pp__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (max-width: 1000px) {
  .px { grid-template-columns: 1fr; }
  .px__tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .px__tab { flex: none; padding: 10px 14px; font-size: .92rem; }
  .px__tab svg { width: 32px; height: 32px; }
}
@media (max-width: 700px) {
  .pp { grid-template-columns: 1fr; }
  .pp__art { padding: 26px; }
  .pp__art svg { width: 140px; }
  .uses { grid-template-columns: 1fr; }
  .pp__btns .b { flex: 1 1 100%; }
}

/* Sizes table */
.sz { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sz__row { display: grid; grid-template-columns: 1.3fr 1.6fr 1.3fr 1.3fr .7fr .9fr; align-items: center; gap: 18px; padding: 20px 26px; border-top: 1px solid var(--line); font-size: .94rem; transition: background .2s; }
.sz__row:first-child { border-top: 0; }
a.sz__row:hover { background: var(--sky); }
.sz__row--head { background: var(--navy); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-block: 14px; }
.sz__name h3 { font-size: 1.08rem; font-weight: 800; color: var(--navy-900); }
.sz__name em { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 20px; background: var(--bright); color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; }
.sz__scale { display: block; height: 22px; }
.sz__scale i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--royal) 0 4px, var(--navy) 4px 8px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2); }
.sz__scale--hc { height: 26px; }
.sz__scale--hc i { background: repeating-linear-gradient(90deg, var(--bright) 0 4px, var(--royal) 4px 8px); }
.sz__cap { font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.sz__note { margin-top: 16px; font-size: .86rem; color: var(--muted); }
@media (max-width: 960px) {
  .sz { border: 0; border-radius: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: visible; }
  .sz__row--head { display: none; }
  .sz__row { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); }
  .sz__name, .sz__scale { grid-column: 1 / -1; }
  .sz__row [data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 600px) { .sz { grid-template-columns: 1fr; } }

/* Services — sticky intro card + numbered service list */
.b--light { --bg: #fff; --fg: var(--navy); }
.b--light:hover { --bg: var(--sky); }

.sv { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.sv__side { position: sticky; top: 140px; }
.sv__card {
  position: relative; overflow: hidden; padding: clamp(28px, 3.5vw, 40px); border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, var(--bright) 0%, var(--royal) 35%, var(--navy) 70%, var(--navy-900) 100%);
  box-shadow: 0 30px 60px rgba(17,61,106,.25);
}
.sv__card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 20px); pointer-events: none; }
.sv__card > * { position: relative; }
.sv__card .t2 { color: #fff; margin-bottom: 16px; }
.sv__card > p { color: #d3e1f3; }
.sv__stat { display: flex; align-items: center; gap: 16px; margin: 28px 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.sv__stat b { font-size: 3.6rem; font-weight: 800; line-height: 1; }
.sv__stat span { color: #d3e1f3; font-size: .95rem; line-height: 1.4; }
.sv__btns { display: grid; gap: 10px; }

.sv__list { display: grid; gap: 0; border-top: 1px solid #d3deeb; }
.sv__list > li { border-bottom: 1px solid #d3deeb; }
.sr {
  position: relative; display: grid; grid-template-columns: 48px 60px 1fr 52px; align-items: center; gap: 20px;
  padding: 26px 22px; border-radius: 18px; isolation: isolate;
  transition: color .3s;
}
.sr::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 18px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy) 60%, var(--royal));
  opacity: 0; transform: scaleX(.96); transition: opacity .3s, transform .4s var(--ease);
}
.sr:hover::before, .sr:focus-visible::before { opacity: 1; transform: none; }
.sr__num { font-size: .9rem; font-weight: 800; color: var(--bright); letter-spacing: .06em; }
.sr__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(11,35,64,.06); transition: background .3s, color .3s; }
.sr__ic .ic { width: 28px; height: 28px; stroke-width: 1.7; }
.sr__main { display: grid; gap: 6px; min-width: 0; }
.sr__title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 800; color: var(--navy-900); transition: color .3s; }
.sr__text { color: var(--muted); transition: color .3s; }
.sr__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sr__tags span { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-size: .78rem; font-weight: 600; color: var(--royal); transition: border-color .3s, color .3s, background .3s; }
.sr__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.sr__go .ic { width: 22px; height: 22px; }

.sr:hover .sr__title, .sr:focus-visible .sr__title { color: #fff; }
.sr:hover .sr__text, .sr:focus-visible .sr__text { color: #c9d8ec; }
.sr:hover .sr__ic, .sr:focus-visible .sr__ic { background: rgba(255,255,255,.12); color: #fff; }
.sr:hover .sr__tags span, .sr:focus-visible .sr__tags span { border-color: rgba(255,255,255,.22); color: #e6eef9; background: rgba(255,255,255,.06); }
.sr:hover .sr__go, .sr:focus-visible .sr__go { background: #fff; border-color: #fff; color: var(--navy); transform: rotate(45deg); }
.sr:focus-visible { outline-offset: -2px; }

@media (max-width: 1000px) {
  .sv { grid-template-columns: 1fr; }
  .sv__side { position: static; }
  .sv__btns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sr { grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 4px; padding: 20px 4px; }
  .sr__main { display: contents; }
  .sr__title { grid-column: 2; padding-right: 48px; align-self: end; }
  .sr__text { grid-column: 2; padding-right: 48px; font-size: .94rem; }
  .sr__tags { grid-column: 1 / -1; margin-top: 10px; }
  .sr__tags span { font-size: .74rem; }
  .sr__num { display: none; }
  .sr__ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; align-self: start; }
  .sr__go { position: absolute; top: 20px; right: 4px; width: 40px; height: 40px; }
  .sr::before { inset: 4px -8px; }
  .sv__btns { grid-template-columns: 1fr; }
  .sv__stat b { font-size: 3rem; }
}

/* Why */
.why2 { position: relative; padding-block: var(--sec); color: #fff; background: linear-gradient(120deg, rgba(7,21,38,.97), rgba(17,61,106,.9)), url("../images/hero-blue/port-crane-customs-clearance.svg") center / cover no-repeat; }
.why2__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--r-lg); overflow: hidden; }
.why2__grid li { position: relative; padding: 34px 28px; background: rgba(7,21,38,.72); transition: background .3s; }
.why2__grid li:hover { background: rgba(17,61,106,.85); }
.why2__num { position: absolute; top: 24px; right: 26px; font-size: .8rem; font-weight: 800; color: var(--bright); }
.why2__grid .ic { width: 44px; height: 44px; margin-bottom: 22px; color: var(--bright); stroke-width: 1.6; }
.why2__grid h3 { margin-bottom: 10px; }
.why2__grid p { color: #b9c8db; font-size: .95rem; }
@media (max-width: 960px) { .why2__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why2__grid { grid-template-columns: 1fr; } .why2__grid li { padding: 26px 22px; } }

/* Timeline */
.tl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tl::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 31px; height: 2px; background: linear-gradient(90deg, var(--navy), var(--bright)); }
.tl__item { position: relative; text-align: center; }
.tl__dot { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); color: var(--navy); font-size: 1.4rem; font-weight: 800; box-shadow: 0 0 0 8px #fff; transition: background .25s, color .25s; }
.tl__item:hover .tl__dot { background: var(--navy); color: #fff; }
.tl__item h3 { margin-bottom: 8px; color: var(--navy-900); }
.tl__item p { color: var(--muted); font-size: .95rem; max-width: 260px; margin-inline: auto; }
@media (max-width: 860px) {
  .tl { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-inline: auto; }
  .tl::before { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; background: linear-gradient(180deg, var(--navy), var(--bright)); }
  .tl__item { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; text-align: left; padding-bottom: 28px; }
  .tl__item:last-child { padding-bottom: 0; }
  .tl__dot { grid-row: span 2; margin: 0; }
  .tl__item h3 { align-self: end; }
  .tl__item p { margin: 0; }
}

/* Delivery areas */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.areas__copy .t2 { margin-bottom: 16px; }
.areas__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0 12px; }
.areas__list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-radius: 12px; font-weight: 600; color: var(--navy-900); box-shadow: 0 1px 3px rgba(11,35,64,.06); }
.areas__list .ic { color: var(--bright); }
.areas__more { font-size: .9rem; color: var(--muted); margin-bottom: 26px; }
.areas__map { margin: 0; padding: 20px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh); }
.areas__map svg { width: 100%; max-height: 620px; margin-inline: auto; }
.areas__map figcaption { margin-top: 10px; font-size: .78rem; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .areas { grid-template-columns: 1fr; } .areas__map svg { max-height: 520px; } }
@media (max-width: 360px) { .areas__list { grid-template-columns: 1fr; } }

/* Reviews — Google style */
.grv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.grv__sum { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px; text-align: center; background: #fff; border: 1px solid #e3e6ea; border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 6px 18px rgba(60,64,67,.08); }
.gg { width: 34px; height: 34px; flex: none; }
.grv__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.grv__brand span { display: grid; text-align: left; line-height: 1.15; font-size: .86rem; color: #5f6368; }
.grv__brand b { font-size: 1.05rem; color: #202124; }
.grv__word { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #202124; }
.grv__score { display: flex; align-items: center; gap: 10px; }
.grv__score b { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #202124; }
.grv__count { margin: 0 0 14px; font-size: .9rem; color: #5f6368; }
.grv__count b { color: #202124; }
.grv__write { margin-top: 6px; font-size: .88rem; font-weight: 700; color: #1a73e8; }
.grv__write:hover { text-decoration: underline; }

.gstars { display: inline-flex; gap: 2px; color: #fbbc04; }
.gstars svg { width: 18px; height: 18px; fill: currentColor; }
.gstars--lg svg { width: 22px; height: 22px; }

.grv__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; }
.grv__track::-webkit-scrollbar { display: none; }
.grv__track:focus-visible { outline: 3px solid var(--bright); outline-offset: 4px; border-radius: var(--r-lg); }
.gcard { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px; scroll-snap-align: start; background: #fff; border: 1px solid #e3e6ea; border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 6px 18px rgba(60,64,67,.06); }
.gcard__top { display: flex; align-items: center; gap: 12px; }
.gcard__av { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--c, #1a73e8); color: #fff; font-weight: 700; font-size: 1.1rem; }
.gcard__top figcaption { display: grid; min-width: 0; line-height: 1.3; }
.gcard__top figcaption b { font-size: .96rem; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard__top figcaption span { font-size: .8rem; color: #70757a; }
.gcard__g { width: 22px; height: 22px; margin-left: auto; }
.gcard__text { margin: 0; font-size: .95rem; line-height: 1.6; color: #3c4043; }
.gcard__text p { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.gcard.is-open .gcard__text p { display: block; -webkit-line-clamp: unset; }
.gcard__more { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; font-size: .86rem; font-weight: 700; color: #1a73e8; }
.gcard__more:hover { text-decoration: underline; }

.grv__nav { display: flex; flex: none; gap: 10px; }
.head--row:has(> .grv__nav) > div:first-child { flex: 1 1 0; min-width: 0; }
.grv__arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); transition: background .2s, color .2s, border-color .2s; }
.grv__arrow:first-child .ic { transform: rotate(180deg); }
.grv__arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.grv__arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 1100px) { .grv__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 860px) {
  .grv { grid-template-columns: 1fr; }
  .grv__sum { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand brand" "score word" "count count" "btn btn" "write write"; justify-items: start; text-align: left; }
  .grv__brand { grid-area: brand; }
  .grv__score { grid-area: score; }
  .grv__word { grid-area: word; align-self: center; justify-self: end; font-size: 1rem; }
  .grv__count { grid-area: count; }
  .grv__sum .b { grid-area: btn; }
  .grv__write { grid-area: write; justify-self: center; }
}
@media (max-width: 560px) {
  .grv__track { grid-auto-columns: 86%; }
  .grv__nav { display: none; }
}

/* FAQ */
.faq2 { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq2__head .t2 { margin-bottom: 14px; }
.faq2__head p { color: var(--muted); margin-bottom: 24px; }
.faq2__list { display: grid; gap: 12px; }
.qa { background: #fff; border-radius: var(--r); box-shadow: 0 1px 3px rgba(11,35,64,.06); transition: box-shadow .2s; }
.qa[open] { box-shadow: var(--sh); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.04rem; font-weight: 700; color: var(--navy-900); }
.qa__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sky); color: var(--navy); transition: transform .25s, background .25s, color .25s; }
.qa[open] .qa__ic { transform: rotate(45deg); background: var(--navy); color: #fff; }
.qa p { padding: 0 22px 22px; margin: 0; color: var(--muted); }
@media (max-width: 900px) { .faq2 { grid-template-columns: 1fr; } }

/* ==========================================================
   INNER PAGES (About, Contact)
   ========================================================== */

/* Page hero */
.ph { position: relative; margin: 16px 16px 0; padding: clamp(36px, 4.5vw, 56px) 0 clamp(36px, 4.5vw, 56px); border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--navy-950); color: #fff; }
.ph--overlap { padding-bottom: calc(clamp(36px, 4.5vw, 56px) + 56px); }
@media (max-width: 760px) { .ph--overlap { padding-bottom: clamp(36px, 4.5vw, 56px); } }
.ph__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,21,38,.95) 0%, rgba(11,35,64,.85) 45%, rgba(17,61,106,.45) 100%); }
.ph__in > * { max-width: 860px; }
.ph__in > .ph__title { max-width: 1040px; }
.ph__title { margin: 0 0 12px; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
.ph__text { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: #cddaea; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: .86rem; font-weight: 600; color: #9fc0ec; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.35); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
@media (max-width: 760px) { .ph { margin: 0; border-radius: 0; } .ph::before { background: linear-gradient(0deg, rgba(7,21,38,.95), rgba(11,35,64,.8)); } }

/* About — story */
.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.story__copy .t2 { margin-bottom: 18px; }
.story__ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 26px; }
.story__ticks li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy-900); }
.story__ticks .ic { width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; stroke-width: 3; }
.story__media { position: relative; margin: 0 0 24px; }
.story__media > img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 75% 60%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.story__badge { position: absolute; left: -20px; bottom: -24px; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; background: #fff; border-radius: 18px; box-shadow: var(--sh-lg); font-size: .88rem; color: var(--muted); line-height: 1.35; }
.story__badge img { width: 56px; height: 56px; border-radius: 12px; }
.story__badge b { display: block; color: var(--navy-900); font-size: 1rem; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story__badge { left: 16px; } }
@media (max-width: 420px) { .story__ticks { grid-template-columns: 1fr; } }

/* About — facts */
.facts { padding: 0 0 var(--sec); }
.facts__list { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(120deg, var(--navy-900), var(--navy) 60%, var(--royal)); color: #fff; }
.facts__list li { display: grid; gap: 4px; padding: 30px 28px; }
.facts__list li + li { border-left: 1px solid rgba(255,255,255,.14); }
.facts__list b { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; line-height: 1.1; }
.facts__list span { color: #b9c8db; font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 800px) { .facts__list { grid-template-columns: 1fr 1fr; } .facts__list li:nth-child(3) { border-left: 0; } .facts__list li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } }
@media (max-width: 380px) { .facts__list li { padding: 22px 18px; } }

/* About — approach */
.approach { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.approach__quote .t2 { margin-bottom: 18px; }
.approach__quote blockquote { margin: 0; padding-left: 22px; border-left: 4px solid var(--bright); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; line-height: 1.5; color: var(--navy); }
.approach__list { display: grid; gap: 14px; }
.approach__list li { position: relative; padding: 24px 24px 24px 84px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .25s, box-shadow .25s; }
.approach__list li:hover { border-color: var(--bright); box-shadow: var(--sh); }
.approach__n { position: absolute; left: 24px; top: 22px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sky); color: var(--navy); font-weight: 800; font-size: .9rem; }
.approach__list h3 { margin-bottom: 4px; color: var(--navy-900); }
.approach__list p { color: var(--muted); font-size: .95rem; }
.facts + .sec { padding-top: 0; }
@media (max-width: 900px) { .approach { grid-template-columns: 1fr; } }

/* About — why (5 items) */
.why3 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--r-lg); overflow: hidden; }
.why3 li { padding: 30px 24px; background: rgba(7,21,38,.72); transition: background .3s; }
.why3 li:hover { background: rgba(17,61,106,.85); }
.why3 .ic { width: 40px; height: 40px; margin-bottom: 18px; color: var(--bright); stroke-width: 1.6; }
.why3 h3 { margin-bottom: 8px; }
.why3 p { color: #b9c8db; font-size: .94rem; }
@media (max-width: 1100px) { .why3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .why3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .why3 { grid-template-columns: 1fr; } }

/* About — industries */
.inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.inds li { padding: 28px 24px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh); transition: transform .25s var(--ease); }
.inds li:hover { transform: translateY(-4px); }
.inds__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--navy), var(--bright)); color: #fff; }
.inds__ic .ic { width: 38px; height: 38px; stroke-width: 2.2; }
.inds h3 { margin-bottom: 8px; color: var(--navy-900); }
.inds p { color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) { .inds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .inds { grid-template-columns: 1fr; } }

/* CTA band */
.cta3 { padding: 0 0 var(--sec); background: var(--sky); }
.cta3__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); color: #fff; background: radial-gradient(800px 300px at 100% 0%, rgba(74,126,202,.5), transparent 60%), linear-gradient(120deg, var(--navy-950), var(--navy)); }
.cta3__in > div:first-child { max-width: 620px; }
.cta3__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; margin-bottom: 10px; }
.cta3__in p { color: #b9c8db; }
.cta3__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .cta3__btns, .cta3__btns .b { width: 100%; } }

/* Contact — cards */
.cc { position: relative; z-index: 2; margin-top: -56px; }
.cc__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cc__card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 26px 24px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); transition: transform .25s var(--ease); }
a.cc__card:hover { transform: translateY(-4px); }
.cc__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--bright)); color: #fff; }
.cc__ic .ic { width: 24px; height: 24px; }
.cc__ic--wa { background: var(--wa); }
.cc__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cc__value { font-size: 1.08rem; color: var(--navy-900); overflow-wrap: anywhere; line-height: 1.35; }
.cc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .9rem; color: var(--blue); }
.cc__go .ic { transition: transform .2s; }
a.cc__card:hover .cc__go .ic { transform: translateX(4px); }
.cc__note { margin-top: auto; padding-top: 12px; font-size: .86rem; color: var(--muted); }
@media (max-width: 1000px) { .cc__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cc { margin-top: 24px; } }
@media (max-width: 480px) {
  .cc__list { grid-template-columns: 1fr; gap: 10px; }
  .cc__card { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; box-shadow: var(--sh); }
  .cc__ic { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .cc__go, .cc__note { display: none; }
  .cc__value { font-size: 1rem; }
}

/* Contact — form + side */
.ct { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.qf { padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); scroll-margin-top: 120px; }
.qf .t2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 10px; }
.qf__intro { color: var(--muted); margin-bottom: 24px; }
.qf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.f--full { grid-column: 1 / -1; }
.qf__note { margin: 12px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.ct__side { display: grid; gap: 16px; position: sticky; top: 130px; }
.visit { padding: 28px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(150deg, var(--navy-900), var(--navy) 60%, var(--royal)); }
.visit__title { font-size: 1.4rem; font-weight: 800; margin-bottom: 18px; }
.visit__addr { display: flex; gap: 12px; margin-bottom: 14px; color: #e6eef9; }
.visit__addr .ic { margin-top: 3px; color: var(--bright); }
.visit__addr small { color: #9fc0ec; }
.visit__note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: .9rem; color: #b9c8db; }
.map { overflow: hidden; border-radius: var(--r-lg); background: var(--sky); aspect-ratio: 4 / 3; box-shadow: var(--sh); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 960px) { .ct { grid-template-columns: 1fr; } .ct__side { position: static; } }
@media (max-width: 480px) { .qf__grid { grid-template-columns: 1fr; } }

/* Contact — areas */
.areas-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.areas-strip__list li { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border-radius: 30px; font-weight: 600; color: var(--navy-900); box-shadow: 0 1px 3px rgba(11,35,64,.06); }
.areas-strip__list .ic { color: var(--bright); }

/* Contact — option 2 (split panel, map band, next steps) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx { padding: clamp(20px, 3vw, 40px) var(--g) 0; }
.cx__frame { display: grid; grid-template-columns: 1fr 1.15fr; max-width: 1196px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--sh-lg); }
.cx__info {
  position: relative; padding: clamp(32px, 5vw, 64px); color: #fff; isolation: isolate;
  background: radial-gradient(120% 70% at 100% 0%, var(--bright) 0%, var(--royal) 30%, var(--navy) 62%, var(--navy-900) 100%);
}
.cx__info::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px); }
.cx__title { margin: 0 0 14px; font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.45rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
.cx__lead { color: #cddaea; font-size: 1.08rem; margin-bottom: 30px; }
.cx__list { display: grid; gap: 4px; margin-bottom: 30px; }
.cx__list a, .cx__list div { display: flex; align-items: center; gap: 16px; padding: 12px 14px; margin: 0 -14px; border-radius: 14px; transition: background .2s; }
.cx__list a:hover { background: rgba(255,255,255,.08); }
.cx__ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(255,255,255,.12); }
.cx__ic .ic { width: 22px; height: 22px; }
.cx__ic--wa { background: var(--wa); }
.cx__list small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fc0ec; }
.cx__list b { display: block; font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
.cx__call { padding: 22px; border-radius: 18px; background: rgba(7,21,38,.4); border: 1px solid rgba(255,255,255,.14); }
.cx__call p { margin-bottom: 14px; color: #cddaea; font-weight: 600; }
.cx__call-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.cx__form { border: 0; border-radius: 0; box-shadow: none; padding: clamp(28px, 4.5vw, 60px); }
.cx__form-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; color: var(--navy-900); margin-bottom: 8px; }
.cx__mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; padding: 0; border: 0; }
.cx__mode label { position: relative; }
.cx__mode input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cx__mode span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; border: 1.5px solid var(--line); border-radius: 14px; font-weight: 700; color: var(--muted); transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.cx__mode .ic { width: 24px; height: 24px; }
.cx__mode label:hover span { border-color: var(--ice); }
.cx__mode input:checked + span { border-color: var(--navy); background: var(--sky); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.cx__mode input:focus-visible + span { outline: 3px solid var(--bright); outline-offset: 2px; }
@media (max-width: 1000px) { .cx__frame { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cx { padding: 0; } .cx__frame { border-radius: 0; box-shadow: none; } }
@media (max-width: 400px) { .cx__call-btns { grid-template-columns: 1fr; } .cx__mode span { min-height: 72px; font-size: .9rem; } }

/* Map band */
.mapband { position: relative; margin-top: var(--sec); min-height: 480px; display: flex; align-items: center; background: var(--sky); }
.mapband__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.mapband__wrap { position: relative; display: flex; justify-content: flex-end; pointer-events: none; }
.mapband__card { pointer-events: auto; max-width: 420px; padding: 32px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.mapband__title { font-size: 1.6rem; font-weight: 800; color: var(--navy-900); margin-bottom: 10px; }
.mapband__card > p { color: var(--muted); }
.mapband__facts { display: grid; gap: 10px; margin: 18px 0 22px; }
.mapband__facts li { display: flex; gap: 10px; font-weight: 600; color: var(--navy-900); font-size: .95rem; }
.mapband__facts .ic { margin-top: 3px; color: var(--bright); }
@media (max-width: 760px) {
  .mapband { flex-direction: column; align-items: stretch; min-height: 0; }
  .mapband__map { position: relative; height: 300px; }
  .mapband__wrap { margin-top: -60px; padding-bottom: 8px; }
  .mapband__card { max-width: none; padding: 24px; }
}

/* Next steps */
.nx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.nx li { position: relative; padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .25s, box-shadow .25s; }
.nx li:hover { border-color: var(--bright); box-shadow: var(--sh); }
.nx__n { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.2rem; font-weight: 800; box-shadow: 0 0 0 6px var(--sky); }
.nx li:not(:last-child)::after { content: ""; position: absolute; top: 55px; right: -21px; width: 22px; height: 2px; background: var(--bright); }
.nx h3 { margin-bottom: 8px; color: var(--navy-900); }
.nx p { color: var(--muted); }
@media (max-width: 860px) { .nx { grid-template-columns: 1fr; gap: 14px; } .nx li::after { display: none; } }

/* ==========================================================
   GET A QUOTE page
   ========================================================== */
.qh { padding: clamp(40px, 6vw, 72px) 0 clamp(110px, 12vw, 150px); background: radial-gradient(900px 400px at 90% -10%, rgba(74,126,202,.45), transparent 60%), linear-gradient(160deg, var(--navy-950), var(--navy) 130%); color: #fff; text-align: center; }
.qh__in > * { margin-inline: auto; }
.qh .crumbs ol { justify-content: center; }
.qh__title { max-width: 760px; margin: 0 auto 14px; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
.qh__text { max-width: 600px; color: #cddaea; font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); }
.qh__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.qh__pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; font-size: .86rem; font-weight: 600; color: #e6eef9; }
.qh__pills .ic { color: var(--bright); }

.qw-sec { display: flow-root; padding-bottom: var(--sec); background: var(--sky); }
.qw-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; position: relative; align-items: start; margin-top: clamp(-110px, -10vw, -80px); }

.qw { position: relative; padding: clamp(22px, 4vw, 44px); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); scroll-margin-top: 120px; }
.qw__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.qw__steps li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); }
.qw__steps span { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px solid var(--line); font-weight: 800; font-size: .86rem; transition: background .25s, border-color .25s, color .25s; }
.qw__steps li.is-current { color: var(--navy-900); font-weight: 700; }
.qw__steps li.is-current span { border-color: var(--navy); background: var(--navy); color: #fff; }
.qw__steps li.is-done span { border-color: var(--bright); background: var(--bright); color: #fff; }
.qw__bar { height: 4px; margin-bottom: 30px; border-radius: 4px; background: var(--sky); overflow: hidden; }
.qw__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--bright)); transform: scaleX(.25); transform-origin: left; transition: transform .4s var(--ease); }

.qs { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.qw.is-wizard .qs { display: none; }
.qw.is-wizard .qs.is-active { display: block; animation: qsin .4s var(--ease); }
@keyframes qsin { from { opacity: 0; transform: translateX(14px); } }
.qw:not(.is-wizard) .qw__steps, .qw:not(.is-wizard) .qw__bar, .qw:not(.is-wizard) .qw__next, .qw:not(.is-wizard) .qw__back { display: none; }
.qw:not(.is-wizard) .qw__submit { display: inline-flex; }
.qs__title { display: block; padding: 0; margin-bottom: 20px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; color: var(--navy-900); outline: none; }
.qs__count { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bright); }
.qs__t-service { display: none; }
.qw.is-service .qs__t-container { display: none; }
.qw.is-service .qs__t-service { display: inline; }
.qs__hint { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sky); font-size: .88rem; color: var(--muted); }
.qs__hint .ic { margin-top: 2px; color: var(--bright); }
/* .qs .f + .f, .qw__row + .f, .f + .summary { margin-top: 14px; } */.qs .f + .f, .qw__row + .f, .f + .summary, .qw__row + .qw__row, .summary { margin-top: 14px; }
.qs .qw__row > .f { margin-top: 0; }
.qs__cond { margin-top: 18px; }
.f__label { font-size: .84rem; font-weight: 600; color: var(--navy-900); }
.seg2--3 { grid-template-columns: repeat(3, 1fr); margin: 0; }

/* choice cards */
.choice { display: grid; gap: 12px; }
.choice--3 { grid-template-columns: repeat(3, 1fr); }
.choice--6 { grid-template-columns: repeat(6, 1fr); margin-bottom: 18px; }
.choice--2 { grid-template-columns: 1fr 1fr; }
.ch { position: relative; display: block; }
.ch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.ch__box { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 18px; border: 1.5px solid var(--line); border-radius: 16px; transition: border-color .2s, background .2s, box-shadow .2s; }
.ch__box b { font-size: 1rem; color: var(--navy-900); }
.ch__box small { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.ch__ic { width: 40px; height: 40px; margin-bottom: 6px; padding: 9px; border-radius: 12px; background: var(--sky); color: var(--navy); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background .2s, color .2s; }
.ch__ic--lg { width: 52px; height: 52px; padding: 6px; stroke-width: 2.2; }
.ch:hover .ch__box { border-color: var(--ice); }
.ch input:checked + .ch__box { border-color: var(--navy); background: var(--sky); box-shadow: inset 0 0 0 1px var(--navy); }
.ch input:checked + .ch__box .ch__ic { background: var(--navy); color: #fff; }
.ch input:focus-visible + .ch__box { outline: 3px solid var(--bright); outline-offset: 2px; }
.ch--sm .ch__box { align-items: center; text-align: center; padding: 16px 8px; }
.ch--sm .ch__ic { margin: 0 auto 4px; }
.ch--row .ch__box { flex-direction: row; align-items: center; gap: 14px; }
.ch--row .ch__ic { margin: 0; flex: none; }
.ch--row .ch__box > span { display: grid; gap: 2px; }

.qw__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stepper { display: grid; grid-template-columns: 48px 1fr 48px; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.stepper button { border: 0; background: var(--sky); font-size: 1.3rem; font-weight: 700; color: var(--navy); transition: background .2s; }
.stepper button:hover { background: var(--ice); }
.stepper input { min-height: 46px; border: 0 !important; border-radius: 0 !important; text-align: center; font-weight: 700; box-shadow: none !important; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.summary { padding: 20px; border-radius: 16px; background: var(--sky); }
.summary__title { margin-bottom: 12px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--royal); }
.summary__list { margin: 0; display: grid; gap: 8px; }
.summary__list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: .94rem; }
.summary__list dt { color: var(--muted); }
.summary__list dd { margin: 0; font-weight: 600; color: var(--navy-900); overflow-wrap: anywhere; }
.qw:not(.is-wizard) .summary { display: none; }

.qw__nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.qw__nav .b[hidden] { display: none; }
.qw__next, .qw__submit { margin-left: auto; }
.qw__back-ic { transform: rotate(180deg); }
.b:hover .qw__back-ic { transform: rotate(180deg) translateX(3px); }
.qw__note { margin: 12px 0 0; font-size: .82rem; color: var(--muted); text-align: right; }

/* side */
.qa-side { display: grid; gap: 16px; position: sticky; top: 130px; }
.qa-side__card { padding: 28px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(120% 70% at 100% 0%, var(--bright) 0%, var(--royal) 32%, var(--navy) 65%, var(--navy-900) 100%); box-shadow: var(--sh-lg); }
.qa-side__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 18px; }
.qa-side__list { display: grid; gap: 12px; margin-bottom: 24px; }
.qa-side__list li { display: flex; gap: 12px; font-size: .94rem; color: #e6eef9; line-height: 1.45; }
.qa-side__list .ic { width: 22px; height: 22px; padding: 4px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); stroke-width: 3; }
.qa-side__talk { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.qa-side__talk p { margin: 0 0 4px; font-weight: 700; }
.qa-side__visit { display: flex; gap: 14px; padding: 20px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh); font-size: .92rem; color: var(--muted); }
.qa-side__visit > .ic { width: 40px; height: 40px; padding: 9px; flex: none; border-radius: 12px; background: var(--sky); color: var(--navy); }
.qa-side__visit b { display: block; color: var(--navy-900); }
.qa-side__visit a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1060px) {
  .qw-grid { grid-template-columns: 1fr; }
  .qa-side { position: static; grid-template-columns: 1fr 1fr; }
  .choice--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .qw-grid { margin-top: -80px; }
  .qa-side { grid-template-columns: 1fr; }
  .choice--3, .choice--2 { grid-template-columns: 1fr; }
  .choice--3 .ch__box { flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 14px; padding: 16px; }
  .choice--3 .ch__ic { margin: 0; }
  .choice--3 .ch__box small { flex-basis: 100%; padding-left: 54px; margin-top: -10px; }
  .qw__steps b { display: none; }
  .qw__steps li { justify-content: center; }
  .qw__row { grid-template-columns: 1fr; }
  .qw__note { text-align: center; }
  .qw__nav .b--lg { flex: 1; }
}
@media (max-width: 400px) {
  .choice--6 { grid-template-columns: repeat(2, 1fr); }
  .summary__list div { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================
   PRODUCT PAGES (Dry Containers, …)
   ========================================================== */
.ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 22px; }
.ph__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ph__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ph__chips li { padding: 6px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 30px; font-size: .84rem; font-weight: 600; color: #e6eef9; }
@media (max-width: 480px) { .ph__btns, .ph__btns .b { flex: 1 1 100%; } }

/* Overview */
.pov { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.pov__copy .t2 { margin-bottom: 18px; }
.pov__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pov__art { margin: 0; padding: clamp(20px, 3vw, 36px); background: var(--sky); border-radius: var(--r-lg); }
.pov__art svg { width: 100%; height: auto; }
.pov__art figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .pov { grid-template-columns: 1fr; } }

/* Benefits */
.bens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.bens li { padding: 26px 22px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh); transition: transform .25s var(--ease); }
.bens li:hover { transform: translateY(-4px); }
.bens__ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--bright)); color: #fff; }
.bens__ic .ic { width: 24px; height: 24px; }
.bens h3 { margin-bottom: 6px; color: var(--navy-900); }
.bens p { color: var(--muted); font-size: .94rem; }
@media (max-width: 1100px) { .bens { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .bens { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .bens { grid-template-columns: 1fr; } }

/* Size cards */
.dsz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dsz__card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: border-color .25s, box-shadow .25s; }
.dsz__card:hover { border-color: var(--bright); box-shadow: var(--sh); }
.dsz__card--pop { border: 2px solid var(--navy); }
.dsz__badge { position: absolute; top: -12px; left: 20px; padding: 3px 10px; border-radius: 20px; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dsz__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dsz__name { font-size: 1.2rem; font-weight: 800; color: var(--navy-900); }
.dsz__cap { font-size: 1.3rem; font-weight: 800; color: var(--blue); white-space: nowrap; }
.dsz__bar { display: block; height: 20px; }
.dsz__bar::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--royal) 0 4px, var(--navy) 4px 8px); }
.dsz__bar--hc { height: 24px; }
.dsz__bar--hc::before { background: repeating-linear-gradient(90deg, var(--bright) 0 4px, var(--royal) 4px 8px); }
.dsz__specs { margin: 0; display: grid; gap: 10px; }
.dsz__specs div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.dsz__specs dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dsz__specs dd { margin: 0; font-weight: 700; color: var(--navy-900); }
.dsz__fit { flex: 1; margin: 0; font-size: .9rem; color: var(--muted); }
.dsz__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dsz__btns .b { min-height: 44px; padding: 10px 12px; }
@media (max-width: 1100px) { .dsz { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dsz { grid-template-columns: 1fr; } }

/* New or used */
.cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cond__card { display: flex; flex-direction: column; padding: 28px 26px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh); }
.cond__card > p:first-of-type { flex: 1; color: var(--text); }
.cond__tag { align-self: flex-start; margin-bottom: 16px; padding: 6px 14px; border-radius: 30px; background: var(--sky); color: var(--navy); font-weight: 800; font-size: .9rem; }
.cond__card--new { background: linear-gradient(150deg, var(--navy-900), var(--navy) 60%, var(--royal)); color: #fff; }
.cond__card--new > p:first-of-type { color: #e6eef9; }
.cond__card--new .cond__tag { background: #fff; }
.cond__best { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cond__card--new .cond__best { border-color: rgba(255,255,255,.16); color: #9fc0ec; }
.cond__use { margin: 0; font-weight: 700; color: var(--navy-900); }
.cond__card--new .cond__use { color: #fff; }
@media (max-width: 860px) { .cond { grid-template-columns: 1fr; } }

/* Uses */
.uses2 { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.uses2__head .t2 { margin-bottom: 14px; }
.uses2__head p { color: var(--muted); }
.uses2__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uses2__list li { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); font-weight: 600; color: var(--navy-900); }
.uses2__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.uses2__list .ic { width: 44px; height: 44px; padding: 10px; flex: none; border-radius: 12px; background: var(--sky); color: var(--navy); stroke-width: 1.8; }
@media (max-width: 900px) { .uses2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .uses2__list { grid-template-columns: 1fr; } }

/* Other types */
.others { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.others a { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.others a:hover { border-color: var(--bright); box-shadow: var(--sh); transform: translateY(-3px); }
.others__ic { width: 52px; height: 52px; padding: 6px; border-radius: 14px; background: var(--sky); color: var(--navy); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.others span { display: grid; gap: 4px; font-size: .88rem; color: var(--muted); padding-right: 20px; }
.others b { font-size: 1rem; color: var(--navy-900); }
.others a > .ic { position: absolute; top: 22px; right: 18px; color: var(--navy); transition: transform .25s; }
.others a:hover > .ic { transform: rotate(45deg); }
@media (max-width: 1100px) { .others { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .others { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .others { grid-template-columns: 1fr; } .others a { flex-direction: row; align-items: center; } .others__ic { flex: none; } }

.cta3--white { background: #fff; }

/* Product pages — sizes + key facts, 4-up benefits, compare */
.bens--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .bens--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .bens--4 { grid-template-columns: 1fr; } }

.psz { display: grid; gap: 18px; align-items: stretch; }
.psz--1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.psz--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .95fr); }
.dsz__btns--1 { grid-template-columns: 1fr; }
.dsz__cap--ask { font-size: .9rem; color: var(--muted); }
.kf { display: flex; flex-direction: column; gap: 18px; padding: 28px 26px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(120% 70% at 100% 0%, var(--bright) 0%, var(--royal) 32%, var(--navy) 65%, var(--navy-900) 100%); }
.kf__title { font-size: 1.2rem; font-weight: 800; }
.kf__list { flex: 1; margin: 0; display: grid; gap: 12px; align-content: start; }
.kf__list div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.16); }
.kf__list dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fc0ec; }
.kf__list dd { margin: 0; font-weight: 600; color: #fff; line-height: 1.45; }
@media (max-width: 1000px) { .psz--2 { grid-template-columns: 1fr 1fr; } .psz--2 .kf { grid-column: 1 / -1; } }
@media (max-width: 600px) { .psz--1, .psz--2 { grid-template-columns: 1fr; } }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cmp__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh); }
.cmp__card .b { align-self: flex-start; margin-top: auto; }
.cmp__ic { width: 64px; height: 64px; padding: 8px; border-radius: 16px; background: linear-gradient(135deg, var(--navy), var(--bright)); color: #fff; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp__card .t3 { color: var(--navy-900); }
.cmp__list { display: grid; gap: 10px; }
.cmp__list li { display: flex; gap: 10px; color: var(--text); }
.cmp__list .ic { width: 22px; height: 22px; padding: 4px; flex: none; border-radius: 50%; background: var(--sky); color: var(--navy); stroke-width: 3; }
.cmp__here { align-self: flex-start; margin-top: auto; padding: 6px 14px; border-radius: 30px; background: var(--navy); color: #fff; font-size: .82rem; font-weight: 700; }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } }

/* ==========================================================
   CONTAINER SIZES page
   ========================================================== */
/* Toolbar: filters + unit switch, sticks under the header */
.tb { position: sticky; top: var(--hdr-h, 124px); z-index: 50; margin-top: 20px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.tb__in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 12px; }
.tb__filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tb__filters::-webkit-scrollbar { display: none; }
.flt { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 30px; background: #fff; font-weight: 700; font-size: .9rem; color: var(--navy-900); transition: background .2s, color .2s, border-color .2s; }
.flt span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sky); font-size: .74rem; color: var(--navy); }
.flt:hover { border-color: var(--ice); }
.flt.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.flt.is-on span { background: rgba(255,255,255,.18); color: #fff; }
.tb__units { display: flex; flex: none; padding: 4px; border-radius: 12px; background: var(--sky); }
.unit { padding: 8px 14px; border: 0; border-radius: 9px; background: none; font-weight: 700; font-size: .86rem; color: var(--muted); }
.unit.is-on { background: #fff; color: var(--navy); box-shadow: 0 2px 6px rgba(11,35,64,.12); }

/* Layout: jump list + cards */
.cs-sec { padding-top: clamp(32px, 4vw, 48px); }
.cs-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; }
.jump { position: sticky; top: calc(var(--hdr-h, 124px) + 90px); }
.jump__title { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jump__list { display: grid; gap: 2px; margin-bottom: 22px; border-left: 2px solid var(--line); }
.jump__list a { display: block; margin-left: -2px; padding: 8px 14px; border-left: 2px solid transparent; font-weight: 600; font-size: .94rem; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.jump__list a:hover { color: var(--navy); }
.jump__list a.is-active { border-left-color: var(--bright); color: var(--navy-900); background: var(--sky); }
.jump__help { padding: 18px; border-radius: var(--r); background: var(--sky); font-size: .88rem; color: var(--muted); }
.jump__help b { display: block; color: var(--navy-900); margin-bottom: 4px; }
.jump__help .b { margin-top: 12px; min-height: 42px; }

.cs-list { display: grid; gap: 22px; min-width: 0; }
.cs { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; scroll-margin-top: calc(var(--hdr-h, 124px) + 84px); transition: border-color .25s, box-shadow .25s; }
.cs:hover { border-color: var(--ice); box-shadow: var(--sh); }
.cs[hidden] { display: none; }
.cs:target { border-color: var(--bright); box-shadow: 0 0 0 4px rgba(74,126,202,.15); }
.cs__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.cs__num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 800; font-size: 1rem; }
.cs__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cs__cat, .cs__badge { padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cs__cat { background: var(--sky); color: var(--navy); }
.cs__badge { background: var(--bright); color: #fff; }
.cs__name { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); font-weight: 800; color: var(--navy-900); }
.cs__cap { text-align: right; line-height: 1.1; }
.cs__cap b { display: block; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.4rem); font-weight: 800; color: var(--blue); }
.cs__cap small { font-size: .78rem; font-weight: 600; color: var(--muted); }
.cs__desc { margin: 16px 0 0; color: var(--muted); max-width: 760px; }

.scale { margin: 20px 0 0; padding: 14px 16px 6px; border-radius: var(--r); background: linear-gradient(180deg, #f7faff, var(--sky)); }
.scale__svg { display: block; width: 100%; height: auto; }

.cs__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cs__specs div { padding: 14px 16px; }
.cs__specs div + div { border-left: 1px solid var(--line); }
.cs__specs dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.cs__specs dd { margin: 0; font-weight: 700; color: var(--navy-900); font-size: .96rem; }

.cs__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-top: 18px; }
.cs__info { min-width: 0; flex: 1 1 380px; }
.cs__fact { display: flex; gap: 8px; margin: 0 0 10px; font-size: .92rem; font-weight: 600; color: var(--navy-900); }
.cs__fact .ic { margin-top: 3px; color: var(--bright); stroke-width: 3; }
.cs__uses { display: flex; flex-wrap: wrap; gap: 6px; }
.cs__uses li { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--royal); }
.cs__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-empty { padding: 30px; text-align: center; color: var(--muted); }

/* Compare table */
.cmpt__hint { margin: 0; color: var(--muted); font-size: .92rem; }
.cmpt { overflow-x: auto; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh); }
.cmpt table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .94rem; }
.cmpt th, .cmpt td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cmpt thead th { background: var(--navy); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cmpt tbody tr:nth-child(even) { background: #f7faff; }
.cmpt tbody tr:hover { background: var(--sky); }
.cmpt tbody th a { font-weight: 800; color: var(--navy-900); text-decoration: underline; text-decoration-color: var(--ice); text-underline-offset: 4px; }
.cmpt tbody th a:hover { text-decoration-color: var(--bright); }
.cmpt tbody tr:last-child th, .cmpt tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1060px) {
  .cs-layout { grid-template-columns: 1fr; }
  .jump { display: none; }
}
@media (max-width: 760px) {
  .tb { margin-top: 0; }
  .tb__in { flex-direction: column; align-items: stretch; }
  .tb__units { align-self: flex-start; }
  .cs__specs { grid-template-columns: 1fr 1fr; }
  .cs__specs div:nth-child(3) { border-left: 0; }
  .cs__specs div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cs__head { grid-template-columns: auto 1fr; }
  .cs__cap { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .cs__cap b { display: inline; }
  .scale { padding: 10px 8px 4px; }
}
@media (max-width: 480px) {
  .cs__specs { grid-template-columns: 1fr; }
  .cs__specs div + div { border-left: 0; border-top: 1px solid var(--line); }
  .cs__num { width: 44px; height: 44px; }
  .cs__btns, .cs__btns .b { width: 100%; }
}

/* ==========================================================
   CONTAINER SIZES — option 2 (showroom)
   ========================================================== */
.shw { position: relative; margin: 16px 16px 0; padding: clamp(32px, 4vw, 52px) 0 clamp(36px, 4vw, 56px); border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(900px 500px at 75% 10%, rgba(74,126,202,.38), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(42,98,173,.3), transparent 60%), linear-gradient(160deg, #071526, #0b2340 60%, #113d6a); }
.shw::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(159,192,236,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(159,192,236,.07) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.shw > .wrap { padding-inline: clamp(calc(var(--g) - 16px), calc((100% - 1228px) / 2 + var(--g) - 16px), var(--g)); }
.shw__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: 26px; }
.shw__head > div:first-child { max-width: 760px; }
.shw__title { margin: 0 0 12px; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
.shw__text { margin: 0; color: #cddaea; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }

.units { display: flex; flex: none; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.units__b { padding: 8px 16px; border: 0; border-radius: 9px; background: none; font-weight: 700; font-size: .88rem; color: #b9c8db; transition: background .2s, color .2s; }
.units__b.is-on { background: #fff; color: var(--navy); }

/* picker */
.pks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.pk { display: grid; gap: 2px; padding: 12px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.05); color: #cddaea; text-align: left; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.pk b { font-size: .96rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk small { font-size: .78rem; font-weight: 600; color: #9fc0ec; }
.pk:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.pk.is-on { background: #fff; border-color: #fff; }
.pk.is-on b { color: var(--navy-900); }
.pk.is-on small { color: var(--blue); }

/* viewer */
.viewer { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.stage { position: relative; margin: 0; min-height: 360px; border-radius: 22px; background: radial-gradient(70% 60% at 50% 55%, rgba(74,126,202,.25), transparent 70%), rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(159,192,236,.35), transparent); }
.stage__svg { display: block; width: 100%; height: 100%; min-height: 360px; }
.stage__cap { position: absolute; left: 18px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; background: rgba(7,21,38,.55); font-size: .78rem; font-weight: 600; color: #cddaea; }
.stage__dot { width: 8px; height: 8px; border-radius: 50%; background: #7ee0a6; box-shadow: 0 0 0 4px rgba(126,224,166,.2); }

.vp { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.vp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vp__cat, .vp__badge { padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vp__cat { background: var(--sky); color: var(--navy); }
.vp__badge { background: var(--bright); color: #fff; }
.vp__badge[hidden] { display: none; }
.vp__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; color: var(--navy-900); margin-bottom: 8px; }
.vp__desc { margin: 0 0 18px; font-size: .94rem; color: var(--muted); }
.vp__dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.vp__dims div { padding: 12px; border-radius: 14px; background: linear-gradient(160deg, var(--navy-900), var(--navy)); color: #fff; }
.vp__dims small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9fc0ec; }
.vp__dims b { display: block; margin-top: 2px; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vp__specs div { padding: 12px 14px; }
.vp__specs div:nth-child(2) { border-left: 1px solid var(--line); }
.vp__specs .vp__wide { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.vp__specs dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vp__specs dd { margin: 2px 0 0; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.vp__fact { display: flex; gap: 8px; margin: 0 0 18px; font-size: .9rem; font-weight: 600; color: var(--navy-900); }
.vp__fact .ic { margin-top: 3px; color: var(--bright); stroke-width: 3; }
.vp__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.vp__btns .b--lg { min-height: 50px; padding: 12px 14px; font-size: .94rem; }
.b--ghost2 { --bg: transparent; --fg: var(--navy); --bd: var(--ice); }
.b--ghost2:hover { --bd: var(--navy); }

@media (max-width: 1100px) {
  .pks { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pks::-webkit-scrollbar { display: none; }
  .pk { flex: none; min-width: 120px; }
  .viewer { grid-template-columns: 1fr; }
  .stage, .stage__svg { min-height: 0; }
}
@media (max-width: 760px) {
  .shw { margin: 0; border-radius: 0; }
  .shw > .wrap { padding-inline: var(--g); }
  .stage { border-radius: 16px; }
  .stage__cap { left: 10px; bottom: 8px; font-size: .7rem; }
}
@media (max-width: 420px) {
  .vp__dims b { font-size: .95rem; }
  .vp__btns { grid-template-columns: 1fr; }
}

/* capacity chart */
.chart-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.chart-wrap__copy .t2 { margin-bottom: 14px; }
.chart-wrap__note { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--sky); font-size: .88rem; color: var(--muted); }
.chart { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 150px 1fr 74px; align-items: center; gap: 14px; }
.bar a { font-weight: 700; font-size: .94rem; color: var(--navy-900); }
.bar a:hover { color: var(--blue); }
.bar__track { height: 34px; border-radius: 10px; background: var(--sky); overflow: hidden; }
.bar__track i { display: block; height: 100%; width: var(--w); border-radius: 10px; transform: scaleX(0); transform-origin: left;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px), linear-gradient(90deg, var(--navy), var(--bright)); transition: transform 1.1s var(--ease); }
.bar--open .bar__track i { background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px), linear-gradient(90deg, var(--royal), #7aa8e6); }
.bar--reefer .bar__track i { background: repeating-linear-gradient(90deg, rgba(11,35,64,.08) 0 3px, transparent 3px 9px), linear-gradient(90deg, #9fb0c2, #dfe7ef); }
.chart.is-in .bar__track i { transform: scaleX(1); }
.chart.is-in .bar:nth-child(2) i { transition-delay: .08s; } .chart.is-in .bar:nth-child(3) i { transition-delay: .16s; } .chart.is-in .bar:nth-child(4) i { transition-delay: .24s; }
.chart.is-in .bar:nth-child(5) i { transition-delay: .32s; } .chart.is-in .bar:nth-child(6) i { transition-delay: .4s; } .chart.is-in .bar:nth-child(7) i { transition-delay: .48s; }
.bar b { font-weight: 800; color: var(--navy-900); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .chart-wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bar { grid-template-columns: 1fr auto; gap: 6px 10px; } .bar__track { grid-column: 1 / -1; grid-row: 2; height: 26px; } }
.js .chart:not(.is-in) .bar__track i { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .bar__track i { transform: none !important; } }

/* card grid */
.gcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gc { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh); scroll-margin-top: 140px; transition: transform .25s var(--ease), box-shadow .25s; }
.gc:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.gc:target { box-shadow: 0 0 0 3px var(--bright), var(--sh-lg); }
.gc__art { position: relative; padding: 10px 6px 0; background: linear-gradient(180deg, #f5f9ff, #e4eefa); }
.gc__svg { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.gc__badge { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 20px; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gc__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 18px 18px 20px; }
.gc__cat { align-self: flex-start; padding: 2px 9px; border-radius: 20px; background: var(--sky); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.gc__name { font-size: 1.15rem; font-weight: 800; color: var(--navy-900); }
.gc__meta { margin: 0 0 6px; display: grid; gap: 8px; flex: 1; }
.gc__meta dt { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gc__meta dd { margin: 0; font-weight: 700; font-size: .92rem; color: var(--navy-900); }
.gc__btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.gc__btns .b { min-height: 42px; padding: 9px 14px; font-size: .88rem; }
@media (max-width: 1100px) { .gcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gcs { grid-template-columns: 1fr; } }

/* what fits inside */
.fits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fit { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.fit__name { margin: 16px 0 6px; font-size: 1.08rem; font-weight: 800; color: var(--navy-900); }
.fit__name span { display: block; margin-top: 2px; font-size: .86rem; font-weight: 700; color: var(--blue); }
.fit p { margin: 0; font-size: .92rem; color: var(--muted); }
.fit__plan { position: relative; display: grid; gap: 4px; height: 86px; padding: 6px; border: 3px solid var(--navy); border-radius: 6px; background: var(--sky); }
.fit__plan i { border-radius: 3px; background: linear-gradient(135deg, #c99a58, #a77a3d); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.fit__plan--10 { width: 30%; display: flex; align-items: center; justify-content: center; }
.fit__free { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: max-content; max-width: 210%; font-size: .78rem; font-weight: 600; color: var(--muted); }
.fit__plan--20 { width: 52%; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); }
.fit__plan--40 { width: 100%; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(2, 1fr); }
.fit__plan--hc { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; border-top-width: 3px; height: 98px; margin-top: -12px; }
.fit__rack { height: 4px; border-radius: 2px; background: var(--royal); }
.fit__plan--hc em { position: absolute; right: -2px; top: -26px; padding: 2px 8px; border-radius: 10px; background: var(--bright); color: #fff; font-style: normal; font-size: .72rem; font-weight: 800; }
@media (max-width: 1100px) { .fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fits { grid-template-columns: 1fr; } }

/* ==========================================================
   SERVICE PAGES
   ========================================================== */
.svi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.svi__copy .t2 { margin-bottom: 18px; }
.svi__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.svi__one { margin: 0; color: var(--muted); font-weight: 600; }
.others--6 { grid-template-columns: repeat(3, 1fr); }
.others--3 { grid-template-columns: repeat(3, 1fr); }
.others__ic--s { padding: 13px; stroke-width: 1.7; }
@media (max-width: 900px) { .svi { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .others--6, .others--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .others--6, .others--3 { grid-template-columns: 1fr; } }

/* Photos — About page */
.ph__img--photo { object-position: 85% 55%; }
.story__media picture img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 28% 55%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.gal__intro { max-width: 460px; margin: 0; color: var(--muted); }
.gal { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; height: clamp(440px, 46vw, 620px); }
.gal__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh); background: var(--navy-900); }
.gal__item--big { grid-row: 1 / -1; }
.gal__item picture, .gal__item img { display: block; width: 100%; height: 100%; }
.gal__item img { object-fit: cover; transition: transform .8s var(--ease); }
.gal__item:hover img { transform: scale(1.04); }
.gal__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 22px 18px; color: #d3e1f3; font-size: .9rem; line-height: 1.45; background: linear-gradient(0deg, rgba(7,21,38,.88), rgba(7,21,38,0)); }
.gal__item figcaption b { display: block; margin-bottom: 2px; color: #fff; font-size: 1.05rem; }
.gal__item--big figcaption { padding: 70px 28px 24px; font-size: .96rem; }
.gal__item--big figcaption b { font-size: 1.3rem; }
@media (max-width: 900px) {
  .gal { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .gal__item--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .gal__item { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .gal { grid-template-columns: 1fr; }
  .gal__item, .gal__item--big { aspect-ratio: 4 / 3; }
}

/* Footer */
.ft { background: var(--navy-950); color: #9fb1c7; font-size: .93rem; }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 40px 32px; padding-block: 72px 56px; }
.ft__brand p { margin: 20px 0 24px; max-width: 360px; }
.ft__title { margin-bottom: 18px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ft__col ul { display: grid; gap: 10px; }
.ft__col a:hover { color: #fff; }
.ft__col ul a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s, transform .2s; }
.ft__col ul a::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s, background .2s;
}
.ft__col ul a:hover { transform: translateX(3px); }
.ft__col ul a:hover::before { background: #fff; }
.ft__contact { display: grid; gap: 12px; }
.ft__contact a, .ft__contact span { display: flex; align-items: flex-start; gap: 10px; overflow-wrap: anywhere; }
.ft__contact .ic { margin-top: 3px; color: var(--bright); }
.ft__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.ft__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; font-size: .84rem; }
.ft__sep { margin: 0 8px; opacity: .5; }
.ft__credit { color: #fff; font-weight: 700; }
@media (min-width: 761px) { .ft__bottom-inner { padding-right: calc(var(--g) + 70px); } }
@media (max-width: 1080px) { .ft__grid { grid-template-columns: repeat(3, 1fr); } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 720px) { .ft__grid { grid-template-columns: 1fr 1fr; padding-block: 56px 40px; } .ft__col:last-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .ft__grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp (desktop) + bottom dock (mobile) */
.wa2 { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 10px 26px rgba(31,174,85,.45); transition: transform .2s; }
.wa2:hover { transform: scale(1.08); }
.wa2 .ic { width: 30px; height: 30px; }
.dock { display: none; }
@media (max-width: 760px) {
  .wa2 { display: none; }
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,35,64,.1);
    transform: translateY(110%); transition: transform .3s var(--ease);
  }
  .dock.is-visible { transform: none; }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 12px; font-weight: 700; font-size: .9rem; }
  .dock__call { background: var(--sky); color: var(--navy); }
  .dock__wa { background: var(--wa); color: #fff; }
  .dock__quote { background: var(--blue); color: #fff; }
  .ft { padding-bottom: 72px; }
}

/* Reveal */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hs__img, .hs.is-active .hs__img { transform: none; }
  .js .rv { opacity: 1; transform: none; }
}
.blend-image {
  background: #174b83;
  overflow: hidden;
  border-radius: 20px;
}

.blend-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 1. Define both gradients for Safari (-webkit) and standard browsers */
  -webkit-mask-image: 
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  
  mask-image: 
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);

  /* 2. Intersect the two masks so only the overlapping 'black' areas show */
  -webkit-mask-composite: source-in; /* Safari support */
  mask-composite: intersect;         /* Modern standard syntax (Chrome, Firefox, Edge) */
}