/* SGT — trilingual corporate site */
:root {
  --blue: #0a5c9e;
  --blue-d: #063f70;
  --teal: #0f9b8e;
  --green: #17a34a;
  --ink: #10202c;
  --body: #3c4a55;
  --muted: #6d7d89;
  --line: #dfe6ec;
  --bg: #ffffff;
  --bg-alt: #f4f8fb;
  --bg-deep: #072a45;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(10, 40, 70, .08);
  --maxw: 1240px;
  --topbar: 34px;   /* slim brand strip — scrolls away */
  --navbar: 58px;   /* sticky nav bar height */
}

* { box-sizing: border-box; }
/* <picture> must not create a box, so images stay direct layout children of
   their grid/flex parents and every `img` rule keeps working unchanged.
   Its <source> would otherwise become a grid/flex item too (display:contents
   hoists all children) and shove real grids off by a cell — force it out of
   layout. Source selection happens before layout, so this is safe. */
picture { display: contents; }
picture > source { display: none; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar) + 18px); }
body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--body);
  background: var(--bg);
  line-height: 1.72;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body[data-lang="zh"] { line-height: 1.85; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.28; margin: 0 0 .6em; font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 62px 0; }
.section--alt { background: var(--bg-alt); }
.section--deep {
  background: linear-gradient(135deg, var(--bg-deep), #0b4a6f 55%, #0d6b62);
  color: #d8e6ef;
}
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep .lead { color: #b9d0de; }

.eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-bottom: 10px;
}
.section--deep .eyebrow { color: #6fd6c6; }
h2.h-sec { font-size: clamp(25px, 3.1vw, 35px); margin-bottom: .3em; }
.lead { font-size: 17.5px; color: var(--muted); max-width: 74ch; margin-bottom: 1.5em; }

/* ---------- header ----------
   Two tiers: a slim brand strip that scrolls away, and the nav bar that sticks.
   The whole header is sticky at a negative offset equal to the strip height, so
   the strip slides out and the bar lands flush at the top. This is what buys the
   nav enough room to stay on ONE row in all three languages — the old layout
   had the 60-char company name competing with 11 links and wrapped to two rows. */
.hdr {
  position: sticky; top: calc(-1 * var(--topbar)); z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__top { border-bottom: 1px solid rgba(0,0,0,.05); background: rgba(244,248,251,.6); }
.hdr__topin {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--topbar); font-size: 11.5px; color: var(--muted);
}
.hdr__co { font-weight: 600; color: var(--body); }
.hdr__tag { letter-spacing: .04em; text-align: right; }
.hdr__in { display: flex; align-items: center; gap: 12px; height: var(--navbar); }
.logo { flex: none; display: flex; align-items: center; }
.logo__mark {
  font-weight: 800; font-size: 25px; letter-spacing: .04em;
  background: linear-gradient(100deg, var(--blue), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav { margin-left: auto; display: flex; gap: 1px; align-items: center; }
.nav a {
  position: relative; font-size: 13px; color: var(--body); padding: 8px 9px;
  border-radius: 8px; white-space: nowrap; transition: color .18s ease, background .18s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.nav a:hover { color: var(--blue); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on { color: var(--blue); font-weight: 600; }

.langs {
  display: flex; gap: 2px; margin-left: 12px; flex: none;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 2px;
}
.langs button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 0; background: none; color: var(--muted);
  padding: 4px 10px; border-radius: 999px; transition: background .18s ease, color .18s ease;
}
.langs button:hover { color: var(--blue); }
.langs button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.navtoggle {
  display: none; font: inherit; font-size: 19px; cursor: pointer; color: var(--body);
  background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 11px;
}

/* scroll-progress hairline along the bottom edge of the header */
.hdr__prog {
  height: 2px; width: 0; background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width .1s linear;
}

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(4,30,52,.93) 0%, rgba(5,45,70,.86) 45%, rgba(10,90,85,.62) 100%);
}
.hero__in { position: relative; padding: 108px 0 96px; max-width: 860px; }
.hero__kicker {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: #7fe0cd; font-weight: 700; margin-bottom: 16px;
}
.hero h1 { color: #fff; font-size: clamp(30px, 5vw, 54px); margin-bottom: .5em; }
.hero p { font-size: 18px; color: #cfe2ee; max-width: 70ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn {
  display: inline-block; padding: 12px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
}
.btn--p { background: var(--teal); color: #fff; }
.btn--p:hover { background: #0c8a7e; }
.btn--g { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn--g:hover { background: rgba(255,255,255,.12); }

/* ---------- stats ---------- */
.stats { background: var(--bg-deep); color: #cfe0ec; }
.stats__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: rgba(255,255,255,.1);
}
.stat { background: var(--bg-deep); padding: 26px 20px; }
.stat b {
  display: block; font-size: 26px; color: #fff; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 4px;
}
.stat span { font-size: 13px; color: #9fbdd0; line-height: 1.5; display: block; }

/* ---------- generic cards ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Masonry packing for groups of pure-text cards.
   These descriptions range from one line to twenty, and in a CSS grid the row
   stretches to the tallest card — leaving a large void inside every shorter one.
   Multi-column flow lets each card end where its text ends and packs the next
   one straight underneath, so there is no dead space at any height. */
.cards { column-gap: 22px; }
.cards > * { break-inside: avoid; margin-bottom: 22px; }
.cards--2 { columns: 2; }
.cards--3 { columns: 3; }
.cards--4 { columns: 4; }
@media (max-width: 1100px) { .cards--4 { columns: 3; } }
@media (max-width: 900px)  { .cards--3, .cards--4 { columns: 2; } }
@media (max-width: 640px)  { .cards--2, .cards--3, .cards--4 { columns: 1; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.section--alt .card { box-shadow: none; }
/* Title-dominant cards: the heading is the thing you scan, the body is support.
   Bodies were the same 16px as the base text, so titles didn't stand out — now
   headings are larger/darker and body copy is a size down and muted. */
.card h3 { font-size: 19.5px; letter-spacing: -.01em; }
.card h4 {
  font-size: 16.5px; margin-bottom: .4em; color: var(--ink);
  letter-spacing: -.005em; line-height: 1.32;
}
.card > p, .card > ul, .card details > p, .card details ul,
.card .mini p, .card__body p {
  font-size: 14px; color: var(--muted); line-height: 1.62;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card--flat { box-shadow: none; }
.section--deep .card {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  box-shadow: none; color: #cfe0ec;
}
.section--deep .feature {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
}
.section--deep .feature__body p { color: #b9d0de; }

.tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  background: #e7f4f2; color: #0b7a70; padding: 4px 10px; border-radius: 999px;
  margin: 0 6px 6px 0;
}
.section--deep .tag { background: rgba(111,214,198,.16); color: #7fe0cd; }
.num {
  font-size: 13px; font-weight: 800; color: #fff; background: var(--teal);
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex: none;
}
.num--blue { background: var(--blue); }

/* ---------- about ---------- */
.about__co { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.culture { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 30px; }
.culture div { border-left: 3px solid var(--teal); padding: 4px 0 4px 16px; }
.culture h4 { font-size: 15px; margin-bottom: .2em; }
.culture p { font-size: 14.5px; margin: 0; color: var(--muted); }

/* ---------- people ---------- */
.chief { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
.chief__photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.chief__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.chief h3 { font-size: 26px; margin-bottom: .1em; }
.chief .role { color: var(--teal); font-weight: 600; margin-bottom: 1em; }
.chief ul { list-style: none; padding: 0; margin-bottom: 1.2em; }
.chief ul li { padding-left: 18px; position: relative; font-size: 15px; }
.chief ul li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.chief__bio { font-size: 15px; color: var(--muted); }
/* Five executives: a 3-column grid leaves a dangling empty cell on row two,
   which reads as a mistake. Flex-wrap + centered justify pulls the trailing two
   into the middle so the block always looks intentional. */
.execs {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 26px 30px;
  justify-content: center; align-items: flex-start;
}
.exec {
  flex: 0 1 210px; border-top: 3px solid var(--blue); padding-top: 16px;
}
.exec h4 { font-size: 17px; }
.exec ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ---------- feature blocks ---------- */
.def {
  border-left: 4px solid var(--teal); background: var(--bg-alt);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 30px;
  font-size: 17px; color: var(--ink);
}
.section--deep .def { background: rgba(255,255,255,.07); color: #e2eef5; }
.kw { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.kw span {
  font-size: 15px; font-weight: 700; color: var(--blue);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 18px; background: #fff;
}
.section--deep .kw span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #9ee6da; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 30px 0; }
.gallery img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare div { padding: 20px 22px; border-radius: var(--radius); font-size: 15px; }
.compare .bad { background: #fdf0ee; border: 1px solid #f6d8d2; color: #8c3a2a; }
.compare .good { background: #eaf7f1; border: 1px solid #cbe9da; color: #1a6b46; }

/* ---------- steps & timeline ---------- */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; }
.section--deep .step { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.step h4 { font-size: 16px; }
.step p { font-size: 14.5px; margin: 0; color: var(--muted); }
.section--deep .step p { color: #b6cddc; }

.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.section--deep .tl::before { background: rgba(255,255,255,.2); }
.tl__i { position: relative; padding-bottom: 26px; }
.tl__i::before {
  content: ""; position: absolute; left: -30px; top: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(15,155,142,.15);
}
.tl__y { font-weight: 800; color: var(--blue); font-size: 15px; }
.section--deep .tl__y { color: #7fe0cd; }
.tl__i p { margin: .2em 0 0; font-size: 15px; }

/* ---------- layer stack ---------- */
.stack { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.stack div {
  padding: 13px 20px; font-size: 14.5px; font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.stack div:last-child { border-bottom: 0; }
.stack div:nth-child(1) { background: #0f172a; }
.stack div:nth-child(2) { background: #1e3a52; }
.stack div:nth-child(3) { background: #2c5670; }
.stack div:nth-child(4) { background: #3a7288; }
.stack div:nth-child(5) { background: #4a8d8a; }
.stack div:nth-child(6) { background: #5aa87c; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14.5px; }
thead th {
  background: linear-gradient(100deg, var(--blue), var(--teal)); color: #fff;
  text-align: left; padding: 13px 18px; font-weight: 600; white-space: nowrap;
}
tbody td { padding: 12px 18px; border-top: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--bg-alt); }
td.nowrap { white-space: nowrap; color: var(--muted); }

/* ---------- media ---------- */
/* Each <video> sized itself to its own intrinsic aspect ratio, so the three
   tiles had different media heights and the row went jagged with white gaps.
   Pinning every player and placeholder to the same 16:9 box lines them up. */
.videos {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.video video, .video__na {
  width: 100%; aspect-ratio: 16/9; height: auto; display: block;
  border-radius: var(--radius); background: #000; object-fit: cover;
}
.video__na { border: 1px solid rgba(255,255,255,.18); }
.video h4 { margin: 14px 0 .2em; font-size: 17px; }
.video p { font-size: 14.5px; color: var(--muted); margin: 0; }
.section--deep .video p { color: #b6cddc; }

/* ---------- contact ---------- */
.office { border-top: 3px solid var(--teal); padding-top: 18px; }
.office h4 { font-size: 17px; }
.office dl { margin: 0; font-size: 15px; }
.office dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.office dd { margin: 2px 0 0; }
.direct {
  margin-top: 34px; background: linear-gradient(100deg, var(--blue), var(--teal));
  color: #fff; border-radius: var(--radius); padding: 24px 28px;
  display: flex; gap: 8px 26px; align-items: baseline; flex-wrap: wrap;
}
.direct b { font-size: 18px; }
.direct a { color: #fff; font-size: 20px; font-weight: 700; }

.ftr { background: #06202f; color: #7d97a8; padding: 34px 0; font-size: 13.5px; }
.ftr__in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ftr b { color: #cfe0ec; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .tech__item, .chief, .app { grid-template-columns: 1fr; }
  .tech__item:nth-child(even) .tech__media { order: 0; }
  .chief__photo { max-width: 280px; }
}
/* the nav needs the full row below ~1150px in Vietnamese (longest labels) */
@media (max-width: 1150px) {
  .nav a { font-size: 12.5px; padding: 8px 7px; }
  .nav a::after { left: 7px; right: 7px; }
}
@media (max-width: 980px) {
  .navtoggle { display: block; order: 3; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    flex-direction: column; align-items: stretch; padding: 10px 18px 16px; gap: 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 6px; border-bottom: 1px solid var(--bg-alt); font-size: 14px; }
  .nav a::after { display: none; }
  .nav a.on { background: var(--bg-alt); }
  .langs { margin-left: auto; }
  .hdr__tag { display: none; }
  .compare { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero__in { padding: 78px 0 66px; }
}


/* ================= visual-first components ================= */

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 0 0 26px; }
.tile { background: #fff; padding: 20px 18px; }
.tile b { display: block; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.tile b i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--teal); margin-left: 3px; }
.tile span { font-size: 13px; color: var(--muted); display: block; margin-top: 4px; }
.section--alt .tiles { background: #dbe4ec; }
.section--deep .tiles { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.18); }
.section--deep .tile { background: #0a3450; }
.section--deep .tile b { color: #fff; }
.section--deep .tile span { color: #9fbdd0; }

/* progressive disclosure */
details { margin: 10px 0 0; }
/* NOTE: do not set `display` on <summary> — it detaches the native disclosure
   toggle in some engines and the panel stops opening. Keep the default box and
   lay the custom marker out inline instead. */
details > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--blue);
  list-style: none; padding: 7px 0;
}
details > summary::marker { content: ""; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor;
  font-size: 13px; line-height: 1; margin-right: 7px; vertical-align: -4px;
}
details[open] > summary::before { content: "–"; }
details > summary:hover { color: var(--teal); }
.section--deep details > summary { color: #7fe0cd; }
details[open] > summary { margin-bottom: 4px; }

/* technology cards */
.tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tcard__img { position: relative; }
.tcard__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.tcard__code { position: absolute; left: 14px; bottom: 14px; font-weight: 800; font-size: 12px;
  letter-spacing: .08em; color: #fff; background: rgba(8,40,62,.82); backdrop-filter: blur(4px);
  padding: 5px 11px; border-radius: 7px; }
.tcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.tcard__body h3 { font-size: 17px; margin-bottom: .15em; }
.tcard__sub { color: var(--teal); font-size: 13.5px; font-weight: 600; margin-bottom: .9em; }
.tcard__body ul { font-size: 14.5px; margin-bottom: 0; }
.tcard__core { margin-top: auto; padding-top: 14px; }

/* split media + text — the text column drives the height; the photo is absolutely
   positioned so it never pushes the row taller than the text, then fills and
   crops to match it exactly. This kills the white gap on whichever side is
   shorter, regardless of the image's own aspect ratio. */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; align-items: stretch; }
.split__media { position: relative; min-height: 200px; border-radius: var(--radius); overflow: hidden; }
.split__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.split > :not(.split__media):not(.split__media--pair) { align-self: center; }

/* full-width photo banner with overlay */
.banner { position: relative; border-radius: var(--radius); overflow: hidden; }
.banner > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.banner--map > img { object-fit: contain; background: #eaf1f7; }
.banner__in { position: relative; background: linear-gradient(100deg, rgba(6,32,52,.92), rgba(8,60,72,.72));
  padding: 34px 36px; color: #dce9f1; }
.banner__in h3 { color: #fff; }
.banner__in p { margin: 0; color: #b9d0de; }
.banner .culture div { border-left-color: #6fd6c6; }
.banner .culture h4 { color: #fff; }
.banner .culture p { color: #b9d0de; }

/* captioned photo grid */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.shots figure { margin: 0; }
.shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.shots figcaption { font-size: 13px; color: var(--muted); margin-top: 7px; }
.section--deep .shots figcaption { color: #9fbdd0; }

/* rain before/after */
.rain__g { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rain__g figure { margin: 0; }
.rain__g img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.rain__g figcaption { font-size: 13px; margin-top: 8px; padding-left: 10px; border-left: 3px solid; }
.rain__bad figcaption { border-color: #c2703a; color: #8c4a24; }
.rain__good figcaption { border-color: var(--teal); color: #0b7a70; }

/* application scenario */
.app { border-top: 1px solid var(--line); padding: 28px 0 6px; }
.app__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.app__n { font-size: 30px; font-weight: 800; color: var(--teal); line-height: 1; flex: none; }
.app__head h3 { margin: 0; font-size: 20px; }
/* photos as a full-width strip on top; text and project notes below in two
   columns. No side-by-side image/text column, so no height mismatch is even
   possible — the recurring "tall images beside short text" gap cannot occur. */
.app__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.app__strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.app__info { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: start; }
.app__txt ul { margin: 0; }
.app__proj { display: grid; gap: 10px; align-content: start; }
.app__proj div { background: var(--bg-alt); border-radius: 10px; padding: 13px 16px; }
.app__proj h4 { font-size: 14.5px; margin-bottom: .15em; }
.app__proj p { font-size: 13px; color: var(--muted); margin: 0; }
.section--alt .app__proj div { background: #e8eff5; }

.mini { border-left: 3px solid var(--teal); padding-left: 14px; margin-bottom: 14px; }
.mini h4 { font-size: 14.5px; margin-bottom: .15em; }
.mini p { font-size: 14px; color: var(--muted); margin: 0; }
.stack__h { font-weight: 700; color: var(--ink); margin-bottom: 10px; }

/* ================= charts & diagrams ================= */
.vz { margin: 0 0 8px; }
.vz-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 8px; }
.vz-unit { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.section--deep .vz-title { color: #fff; }
.vz svg { width: 100%; height: auto; overflow: visible; }
.vz-grid { stroke: var(--line); stroke-width: 1; }
.section--deep .vz-grid { stroke: rgba(255,255,255,.16); }
.vz-tick { font-size: 11px; fill: var(--muted); }
.section--deep .vz-tick { fill: #9fbdd0; }
.vz-val { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.section--deep .vz-val { fill: #fff; }
.vz-note { font-size: 11.5px; fill: var(--muted); }
.section--deep .vz-note { fill: #9fbdd0; }
.vz-lyr { font-size: 12px; font-weight: 600; fill: #fff; }
.vz-dim { stroke: var(--ink); stroke-width: 1.4; }
.section--deep .vz-dim { stroke: #fff; }
.vz-dot { stroke: #fff; stroke-width: 2; }
.section--deep .vz-dot { stroke: var(--bg-deep); }

/* bar chart */
.vz-bars { display: grid; gap: 12px; }
.vz-bar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 12px; align-items: center; }
.vz-bar__l { font-size: 14px; color: var(--body); }
.section--deep .vz-bar__l { color: #cfe0ec; }
.vz-bar__t { background: var(--line); border-radius: 4px; height: 14px; overflow: hidden; }
.section--deep .vz-bar__t { background: rgba(255,255,255,.14); }
.vz-bar__f { height: 100%; border-radius: 4px; }
.vz-bar__v { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 46px; text-align: right; }
.section--deep .vz-bar__v { color: #fff; }

/* ranking climb */
.vz-climb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.vz-climb__i { text-align: center; }
.vz-climb__bar { background: linear-gradient(180deg, var(--teal), #0b7a70); border-radius: 8px 8px 0 0;
  height: calc(60px + var(--h)); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; }
.vz-climb__y { font-weight: 800; color: var(--ink); font-size: 14px; padding-top: 8px;
  border-top: 2px solid var(--line); }
.vz-climb__l { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.section--deep .vz-climb__y { color: #fff; border-color: rgba(255,255,255,.2); }
.section--deep .vz-climb__l { color: #9fbdd0; }

/* numbered process flow */
.vz-flow { list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.vz-flow li { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-alt);
  border-radius: 10px; padding: 14px 16px; margin: 0; font-size: 14px; }
.section--alt .vz-flow li { background: #e8eff5; }
.vz-flow__n { font-weight: 800; color: var(--teal); flex: none; font-size: 13px; padding-top: 1px; }

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .app__info { grid-template-columns: 1fr; }
  .vz-climb { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rain__g { grid-template-columns: 1fr; }
  .app__strip { grid-template-columns: repeat(2, 1fr); }
  .vz-bar { grid-template-columns: 1fr auto; }
  .vz-bar__t { grid-column: 1 / -1; }
}

/* the About block stacks two photos; each cell fills its half so the pair
   matches the height of the company cards beside it (no white gap under it) */
.split__media--pair { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 320px; }
.split__media--pair .ph { position: relative; min-height: 0; border-radius: var(--radius); overflow: hidden; }
.split__media--pair .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* two-column feature: the image is actually visible (the old overlay banner
   sat at 92% opacity on top of the photo, hiding it completely) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/11; }
.feature__body { padding: 30px 34px 30px 4px; }
.feature__body h3 { margin-bottom: .5em; }
.feature__body p { color: var(--muted); }
.feature--map .feature__media { background: #fff; padding: 14px; }
.feature--map .feature__media img { object-fit: contain; aspect-ratio: 4/3; }
.feature .tiles { margin: 18px 0 0; }
.section--alt .feature { background: #fff; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature__body { padding: 0 26px 28px; }
}


/* ---------- imagery added to formerly text-only blocks ---------- */

/* executive portraits: the source crops are hexagon-masked on a near-white
   plate, so they sit on a tinted disc rather than being clipped again */
.exec__photo {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden;
  background: var(--bg-alt); margin-bottom: 12px; border: 1px solid var(--line);
}
.exec__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.exec { border-top: 3px solid var(--blue); padding-top: 18px; }

.chief__more { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; margin-top: 20px; }
.chief__more figure { margin: 0; }
/* the podium crop is portrait; bias the 4:3 cover box upward so the subject's
   head is not cut off */
.chief__more img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  object-position: center 18%; border-radius: 10px;
}
.chief__more figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* certificate wall: the wide scans get a full row, the portrait ones a half */
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; align-items: start; }
.certs figure { margin: 0; }
.certs img {
  width: 100%; height: auto; max-height: 360px; object-fit: contain;
  border-radius: 10px; background: #fff; border: 1px solid var(--line);
}
.certs figcaption { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.certs__wide { grid-column: 1 / -1; }

/* small supporting photos inside a card */
.card__media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin: 4px 0 14px; }
.card__media img {
  width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}

/* construction sequence: photo-topped step cards */
.seq {
  display: grid; gap: 18px; margin: 8px 0 4px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.seq__i {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.section--deep .seq__i { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.seq__ph { position: relative; }
.seq__ph img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.seq__n {
  position: absolute; left: 10px; top: 10px; min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; font-weight: 800; font-size: 13px;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.seq__b { padding: 14px 16px 16px; }
.seq__b h4 { font-size: 15px; margin-bottom: .3em; color: var(--ink); }
.section--deep .seq__b h4 { color: #fff; }
.seq__b p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55; }

/* "landmark firsts" — title-first list, two columns, packs with no orphan cell */
.firsts {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 26px;
}
.firsts__i {
  break-inside: avoid; display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--line); margin: 0;
}
.firsts__i:first-child { border-top: 0; }
.firsts__b {
  flex: none; font-size: 13px; font-weight: 800; color: var(--teal);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.firsts__t { display: flex; flex-direction: column; gap: 3px; }
.firsts__t b { color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.4; }
.firsts__p { font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .firsts { columns: 1; } }

/* chart beside a supporting photograph */
.split--chart { grid-template-columns: 1.55fr 1fr; align-items: center; gap: 28px; }
.split__fig { margin: 0; }
.split__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.split__fig figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* video placeholder still shows the frame it is a placeholder for */
.video__na { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; }
.video__na img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.7); }
.video__namsg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 22px 26px; font-size: 14px; color: #dbe9f2;
}

@media (max-width: 900px) {
  .chief__more, .certs, .split--chart { grid-template-columns: 1fr; }
  .certs__wide { grid-column: auto; }
}


/* ================= page artwork =================
   A flat white page read as an unfinished draft. These are two fixed layers
   behind everything: an engineering-drawing grid and an aggregate speckle,
   both at very low alpha, plus soft corner washes in the brand colours.
   Fixed (not repeating per-section) so scrolling costs nothing to composite. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(880px 620px at 88% -8%, rgba(15,155,142,.10), transparent 62%),
    radial-gradient(760px 560px at 4% 4%, rgba(10,92,158,.09), transparent 60%),
    linear-gradient(180deg, #fbfdfe, #ffffff 42%);
}
/* 1mm/5mm engineering grid + aggregate speckle */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,92,158,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,92,158,.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(16,32,44,.045) 1.1px, transparent 1.2px),
    radial-gradient(circle at 70% 75%, rgba(16,32,44,.035) 1.3px, transparent 1.4px);
  background-size: 160px 160px, 160px 160px, 90px 90px, 130px 130px;
  /* fade the drafting grid out through the middle of the page so it reads as a
     paper texture at the edges rather than graph paper behind the content */
  mask-image: radial-gradient(115% 85% at 50% 0%, #000 12%, rgba(0,0,0,.25) 55%, transparent 85%);
}
/* sections sit above the artwork; the tinted ones keep their own fill */
.section, .stats, .hero, .ftr { position: relative; }
.section--alt { background: rgba(244,248,251,.82); backdrop-filter: blur(1px); }

/* lane-marking motif: a dashed centre line running down the left gutter of
   each alternating band — reads as road without shouting */
.section--alt::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: repeating-linear-gradient(180deg,
    rgba(15,155,142,.30) 0 22px, transparent 22px 44px);
}
.section--deep { position: relative; overflow: hidden; }
.section--deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(120% 90% at 80% 10%, #000, transparent 70%);
}
.section--deep > .wrap { position: relative; }


/* ================= motion =================
   Scroll reveal. --rvd staggers siblings within a grid so a row of cards
   arrives as a wave. Applied by enhance() in main.js after every render. */
/* Content is visible by default and only hidden once main.js has confirmed it
   can actually animate it back in (html.anim). Without this gate a browser with
   no IntersectionObserver — or a zero-height viewport, which really happens in
   embedded/preview frames — would leave the entire page stuck at opacity 0. */
html.anim .rv { opacity: 0; transform: translateY(16px); }
/* a transform on a multi-column child creates a containing block and can break
   the column flow — fade these in without moving them */
html.anim .cards > .rv { transform: none; }
/* must match the specificity of the rule above (0,2,1) or the hidden state
   wins and revealed elements stay invisible */
html.anim .rv--in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1) var(--rvd, 0ms),
              transform .55s cubic-bezier(.22,.61,.36,1) var(--rvd, 0ms);
}

/* interactive lift on the things that are actually cards */
.card, .tcard, .tile, .video, .feature, .exec, .office {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .tcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10,40,70,.13);
  border-color: rgba(15,155,142,.4);
}
.tcard__img img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.tcard:hover .tcard__img img { transform: scale(1.055); }
.shots figure img, .app__strip img, .split__media img {
  transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
.shots figure:hover img, .app__strip img:hover, .split__media img:hover {
  transform: scale(1.035);
}
.tile:hover { background: #f7fbfd; }
.section--deep .tile:hover { background: #0c3f5f; }
.btn { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn--p:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,155,142,.35); }
.btn--g:hover { transform: translateY(-2px); }
.stat { transition: background .3s ease; }
.stat:hover { background: #0a3654; }

/* bar chart fills grow in when their figure scrolls into view */
.vz-bar__f { width: var(--w, 0); transition: width .95s cubic-bezier(.22,.61,.36,1) .1s; }
html.anim .rv .vz-bar__f { width: 0; }
html.anim .rv--in .vz-bar__f { width: var(--w, 0); }
.vz-climb__bar { transition: height .7s cubic-bezier(.34,1.4,.64,1) var(--rvd, 0ms); }
html.anim .rv .vz-climb__bar { height: 40px; }
html.anim .rv--in .vz-climb__bar { height: calc(60px + var(--h)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .rv { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}