/* ============================================================
   Danaos Bulk — "Grid" proposal
   Near-black sheet, hairline cells, huge light numerals against
   bold labels. One cool accent, monochrome logo. No gradients,
   no red, nothing slides sideways on hover.
   ============================================================ */
:root {
  --ink: #0a3566;
  --deep: #072a52;
  --white: #f1f3f2;
  --grey: #939598;
  --sheet: #e9ecef;
  --blue: #3366fc;
  --sky: #8fb0ff;
  --pad: clamp(14px, 1.8vw, 30px);
  --head: 62px;
  --r: clamp(18px, 2.4vw, 40px);
  --line: rgba(241, 243, 242, .26);
  --paper: #eef0f2;
  --line-d: rgba(10, 53, 102, .38);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  /* type scale: every font size on the site comes from these eight steps */
  --fs-xs: clamp(11px, .85vw, 16px);                    /* labels, captions, tabs */
  --fs-s: clamp(14px, 1.05vw, 20px);                    /* small text, specs, links */
  --fs-body: clamp(16px, min(1.3vw, 2.8vh), 28px);      /* paragraphs */
  --fs-lead: clamp(18px, min(1.9vw, 3.5vh), 46px);      /* names, list items, statements */
  --fs-h3: clamp(22px, min(2.6vw, 5vh), 56px);          /* card and sub headings */
  --fs-h2: clamp(30px, min(4.4vw, 9vh), 100px);         /* section headings */
  --fs-display: clamp(40px, min(6.6vw, 16vh), 150px);   /* hero, contact, directory title */
  --fs-mega: clamp(70px, 13vw, 250px);                  /* counters and the DAB wordmark */
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Inter Tight from Google Fonts has no arrow glyphs (↑ ↓ ← → ↗), so the browser used to draw them in another font (Inter / system).
   These five tiny faces are the arrows cut from the real Inter Tight, one per weight, so every arrow stays Inter Tight. */
@font-face { font-family: 'Inter Tight Arrows'; font-style: normal; font-weight: 200; unicode-range: U+2190-2197; src: url(data:font/woff2;base64,d09GMgABAAAAAAM0AA8AAAAABswAAALcAAMBBgAAAAAAAAAAAAAAAAAAAAAAAAAAG2wcKAZgP1NUQVREAEwRCAqCIIFZATYCJAMUCxAABCAFhFwHIAwHG3UFCB4HORmvab4sFjzQasvKvYjgyb+oev17uNCsyBTmnTPIKcCQykDO8ffuHvVpBfS0sa1wT/5z3bu2SJZogKFEzLi/ADTSJrSRU7n9INcvFryEFWtq/fgOWHcuf7CBDayZXftW2kCeDXjAA9Opm6pF6qdBi1QpYcf27UaBugHGSQsWLQ4gH9hKCcgy/BBD+3diAhKdkdX0yMcTqpKGjH667fYTQlnIImlMYpBBSDEBF3A452/8rURpfH4FN8x/Or3ionQrAHwkNdv7rImatizrcg8/ffpeW3nu//ZU30uXbMFuhbyp9Cb6aCmEqoSGhAHSybs9Ym3ZOz1i3YSGrBBSdAeBgGjveZBQoKEQaMimoKoqoU/fK/te22wqeNkHNT/i/QPAUAZlSVYSotnUBlRAa1QwEbsByCAhgMm5Vquz9nTt1EQ5vXW702l3u2yuD3f3UqNduV7pYG96stNP2l9ej9uWxNVOqmte8Dz7r3bPBBS9Ynsgfdz9UZo+cPCLF1/YvDsGD15e6bXLXur1v6/lyhtvWFk364lBA5e/rcDVBw1+4vwLzXr4zUt30Uv0xJDBB48fMgAIFFFe/eqzAzcrM36Tiip4e58yD/D5P7c1/u78h40bqteiLIHgO52OK1z4n40FgjygyOxKHypnxIS40o8xwRMCFVdo6YiCAAD2sZauUYhcw00xzOLCCP9zSWs/coU5vpPZm5R0i+PKhjnAtjbJpJZoq6VhhWuvoRPXTUv1ut3VsUwqpktMEV3EZxq6qwsVWHguLydntqj4XpIRukYb7TgT8mWIUHecL1J3GHI1LDayMJUgNnQInF9j6ic3IL5NJbjxRhljjAmGdLpl9pb2oyIAu2rXRUSH95Nc5Xl1XyrzgH5vnDGojwtZ9th48O8vgVIBm4lwc10QTwoJ3JD3vH83H/FcGOq2S8UajhFiQsNeSlJzwnOKksKg9P+9LlJ+LJpnf/PFAA==) format('woff2'); }
@font-face { font-family: 'Inter Tight Arrows'; font-style: normal; font-weight: 300; unicode-range: U+2190-2197; src: url(data:font/woff2;base64,d09GMgABAAAAAAM0AA8AAAAABqQAAALdAAMBBgAAAAAAAAAAAAAAAAAAAAAAAAAAG2wcKAZgP1NUQVREAEwRCAqCIIFSATYCJAMUCxAABCAFhDQHIAwHG0YFKJ4HtjHs0dT34lj0S43hXYyHJ//iPXfeLD/BnkbEFixTppY7sJf3r/3a21MNZet5tOqav/rb05Cw6bRGinSGzpD5l/rIkPsC0EgDtiYux/9bx/SJD/jkL/L3NhbYBBur0gUcWBq9QAsoHZMKOODANHVTi0fBx6qIuBBK2VF27UiBur5GS3NHiwPkdnNoQ06G/2Fil+TbkKALspobsj2hKmkro7fOlzIhlBkvxBPI9NcfKcUIBWzO+dsYqkRpTH4PT21/Or3ndnoeAL6RGq390EBNSxZ2uYcvPXs9Xnnr/9ZUv0h31yPPQ14b/Rg9NRVCVUJbCX2lY4qKpCU7xpmks9BWVggpuoBAQLSJoSChQFuFQFvZRFRVJfTs9XCvGg0F739Q4xu+3I2gDMqSrCREo6EFqIDmqGAc1gOQQUIMIeda7ZIrnsUTdv5UrlVt8+nKDnJi2+mZW1Ys10ttliqlaLP1zJ6JbUe8nKVkq6PXo1jWeov0q/baWFW9t2U7JL7tsPtr6eKPWxYtXlwP/8UnF5cua3939t04/vnUibcNX3L489PJn2azrfVyy/TPPqbs8TW7tWTx/9NH/CcQKKI88Qz/s67F1N+qRRV8urPFbAB+/OeFtnf472Dbm9WHUyHg+cSo3VgE/3PIEsHepchsDSobSd84A9/R10sCFQ9par+4AAAVgaYeU4hcwzORDlLo7Wspae5jqTDeM4sZlEo6uyiV9bRRbG68obVoqameIrVR117qrKn66bqoYyGHhWObQhyTRrCgUajQmVSs5bXIFegZYYRDBD6NCwWaDtGYmvbxKVrmGVmYsiGJ7+C32IhxTwAQfOuwUWMMN9JIY3ftFAvtLe2ncwV2wwrGxPGZRap6OtzncN35SHm0kUYbTa6qJNTt9+fzOXQSAaJmYZDK4QtQA/PKttFgZYbXtCl5t8W0LYGWHRFxw+HX5BUFM/r/dbcV34zGlTfyHQ==) format('woff2'); }
@font-face { font-family: 'Inter Tight Arrows'; font-style: normal; font-weight: 400; unicode-range: U+2190-2197; src: url(data:font/woff2;base64,d09GMgABAAAAAAMgAA8AAAAABrQAAALIAAMBBgAAAAAAAAAAAAAAAAAAAAAAAAAAG2wcKAZgP1NUQVRIAEwRCAqCIIFSATYCJAMUCxAABCAFhEAHIAwHG1YFERWcDwF+HMbukTNxpqxEfL6/tb2Jw3h43r/+XfvMGT7ofqOmk1RfVBsIJVhK5USq4ColPAGwqNuA6+k5s4tduN/tzJNgE5fj/w0yfWyRJ32R3ZrnE2yMARxYYIFE9aDFi9NoAYcPpOk2iw6PjoaJOjHoRIGGsSZJV12zZI3OIzvPHNMpw+/Qd3jvqWNqHEZWj8f0T6hJChmjDbbvJ4SKkMVw+YjxxiO9BXACjuf8VdyhTHlyfh8P6X88ve+W9DgAfCe1en9qUdfNqtVLV3vLyFH3V9/6v1fty3TbDvE45G3lTzBSuxBqEgoJY6Xz+w+ciW4Ontl5JAYLhawkpBgCAiUkKe4gvQYSSiiUBArZDNTUJIwcdfeo+1stAe94oNZ3vj4iUAEVSVYWotXSBaqgE1VMxQ5ABgmBTM71+iU3Xu65eKzrcmdPfc+682fX7KvtX3e5c31PpVHuW7e/N/r2rT97ubZ/7Zlz6/fWe86dX7unT+/evb+qPz9FRO/vPaD2fduqZ5vvnzx+682QOX58BdGzvjx78uSUd5fcEo8+8NBjNxl+/Gjz/aefeLrZPH78xpvNL38Skx9/886+33Q0lTXdu0tUJva75fD2rjm/1Uo18NmhrkXw8z9PFn/98t+p4lLtFVQkELxjtJ8H/ufEDQIEUSmzL76luiiK2OejKDwkUHWXdidU41ybX5ublESu45EYfOdC/8hc0ul3rmSW17hsvPu4ssGucBVjbWA7TTNaE93a9QcGI43nGaLBsaqtebMhXuXhK87TjDKiDseWhSHkHaGJeWW2kFqn5X7TUAz3bIeNa5y+Kw5PHwC/bRvmmbbtZ1hnosfCMS8fXG+HW8A+aZmHcfes7f5QQ61ru67vdhaz+N8/Q1vEIbHJm7IWkMn9PD/NKXsLM2xrC7BGK2coGFRLRRmB0f8v3KL6pWhd+2K+FQA=) format('woff2'); }
@font-face { font-family: 'Inter Tight Arrows'; font-style: normal; font-weight: 500; unicode-range: U+2190-2197; src: url(data:font/woff2;base64,d09GMgABAAAAAANEAA8AAAAABrAAAALsAAMBBgAAAAAAAAAAAAAAAAAAAAAAAAAAG2wcKAZgP1NUQVREAEwRCAqCJIFWATYCJAMUCxAABCAFhDwHIAwHG1IFAB6FTdkz9jhJTQ3NTfMdQbFW9uztA3DC5VmiSxQBqbBjcqmoOAZFpAA1ws3/uvqzZNs0aeV0EPPAyz9/nRzSvavg6+cGZoUIwkROQNuCBP+B0/H29Vy/ONART2T+wS7YO3oKNLDAJtBAewckTQMOTNNtIh2eDZVNo6A9BQp1EqcYMDazAixzCZQBFin8Dr05DMwAHVuQKrDClhPkS1RToQNXPUsIuQo7zDaP6cKNOALMBOxO02/xVQ453dI7OBD/6eSOTclRAHgtyVZ6z6JAOTB4yOwyuNKufXlX/lcC+c+SLRNhRyEdr35GOyYh5EtQTYFOFCs4HmE2YNZSIoW5YKqpZIQkmgAEAqImvoIEGVRTClRT6Q3Ily9Bu/a235vNOsgbZV/zYi4MuSBXIpUjRDarDOSBUuShB2AqAFKQIFBI04KCV46q2VfNt9Ys9oKpa6XCCqvj1mqWdXtuYc6qNc4RVdNHFGo6bhUV1xl9pVhapZ0c06b9KzjR3VV3ps0Euje1iZXHJ5uNzQ3wG411mrLfORs3xpd0nRMXx44ueQNrmtatub+9/MLymzfXrds/BH16PFRBLaLeOImSE5uOQdRoPN6kmsHtgUAmcstufhw4wdrzLT+TDx7PLhsCgA9/jlf/uv1vcfXq/Kd7IWB7R7+mlYH/LNoAA7fPpEyPJ/IGYbaYDt6i3JZAnh2KLaQVAFBbKrZHRqQFOBSFuRQ6+ZASpZ5LGb1tr6Y8KUejjpSrA1os1VO4EOVMOhhQg9QCjUjhZzYxYLCsNELGJISQIqDMYtAEBWnrGAIOD+EhSI6sS0SEjAIJchBZmEyQEpYFcSLmjZkxKQNhQCvd1kNzrDUGIH+blYFLCIuKSmbabkuWzVoe2hVYmucUpBCgZhV3PT4/LCunAnKycVFxceU2j4F3+/0FUJaIQUFwgwoQXhYkw3nvLOIIWAcoIIVRstIiIFmaLEKYEISgsyQ+SmD0fzZJn4nsxqs2AwA=) format('woff2'); }
@font-face { font-family: 'Inter Tight Arrows'; font-style: normal; font-weight: 600; unicode-range: U+2190-2197; src: url(data:font/woff2;base64,d09GMgABAAAAAANAAA8AAAAABsAAAALnAAMBBgAAAAAAAAAAAAAAAAAAAAAAAAAAG2wcKAZgP1NUQVREAEwRCAqCJIFWATYCJAMUCxAABCAFhEwHIAwHG2IFAJ6FsfMijMqa7m79XcTD/4/V7vszvgoMLl1EqolXoohmTTTY07ehHmni89d+7e2do5Y2Yar5q79FQ2VoZpFIaHxCvWt0ok8nKQFoW6IQ9d/A6Xj7eq5fHPBIR/j5fLB3uAcYWGATKI/yi6VpwIFpuk2kQ7oSjU1DoQsFynrpFJkwaXkbCjYsRRsKZOF3mK1f6duQ4giySmbI6YSipCKGHmruq4SQZ1ghlnpMH7VISYKagOPZXKs0R5xc/2wzzvt/OjU7mK4AwHupio8qShrBtOkrWxDq1v1M4eF/QPFpOrwEuQLZRbkMuskTQlFCRQS9RHavVpEUgbU7OJPUICpiMkKKjgCBgGiT5gAkZFARFaiIGQIUFSV0636i+5nqCh59o+p73mxAkAd5SVZOiOoaQAHUo4CBwAoAsiAhrJ/Nlsw15+4v3rup8KS+uLRi1gHbllPKrJOCvRb5cm7vLKUkWq2azU5Sykzc35PSR7sOdsRSJStXfirdGrBVzSvXQOpDb2zChUuX50/34p2fR+dM+1967lx7/zQ1svfOTjLWOOjkiddw3PNxzuSksMnYlRkW8Xj/ANxlvUsGNS3/lDfoM5oeBAKZyE+YfLp6ceHwt2KmCB6ta5gEfPlT5dfVf9sqB4rP+kLAMkevdV8E/uPrHsG8SibLqnihMDNyY6X3qHFToOC4WlskBQAoCNQ6LSOyJVyMDrEU+vmTknqfpIwRnjezOCmngzMprw9VrDdIZyMa5ekjUhtFKqQO8pQ/t6McTOOwcGwLEMekEWyRWDSTHCbRHolGoUIqhFyBQW3aBAQ+jQsFWgU0plYOn6LNmlnLFtiQxLedbXdLLXMXBQTfOmxUl1bt2nVH2iGbtqzYWkVmYHNZwZg4Pm+Tqj5dnuJwHfFx1U7tOnWyD1USmvH31/kcOokAURMYpHL4AlR9/zKFBjXB8FoJ8zDbGF1LoI1WIWmBbykaRBmj/7cdVL4fVe/EDgEAAA==) format('woff2'); }
body { margin: 0; background: var(--paper); color: var(--white); font-size: var(--fs-body); font-family: 'Inter Tight', 'Inter Tight Arrows', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-weight: 400; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading, body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; font-weight: inherit; }
::selection { background: var(--blue); color: #fff; }

.tiny { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.small { font-size: var(--fs-s); font-weight: 400; opacity: .75; }


/* ---------- section tones: mostly white sheets, navy only to close ---------- */
[data-theme="light"] { --bg: var(--paper); --fg: var(--ink); --line: rgba(10, 53, 102, .3); --inv-bg: var(--ink); --inv-fg: #fff; --slot: #dfe3e8; }
[data-theme="dark"] { --bg: var(--ink); --fg: var(--white); --line: rgba(241, 243, 242, .26); --inv-bg: var(--white); --inv-fg: var(--ink); --slot: #072a52; }
#fleet, #investors { --bg: #fff; }

/* ---------- slots ---------- */
.slot { position: relative; overflow: hidden; background: var(--slot, #dfe3e8); display: block; width: 100%; height: 100%; }
.slot img, .slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(calc(1 - var(--c, 0))); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.slot__ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg, #fff); opacity: .45; text-align: center; padding: 8px; }
.slot.is-filled .slot__ph { display: none; }

/* ---------- squares (loader / hero / menu) ---------- */
.tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; }
.tiles i { background: var(--ink); opacity: var(--o, 1); transition: opacity .3s linear; transition-delay: calc(var(--t, 0) * 1s); outline: 1px solid var(--ink); }
body.is-done .tiles--hero i { transition-delay: 0s; }

/* ---------- loader ---------- */
.pl { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.pl .tiles i { --o: 1; }
body.is-loaded .pl .tiles i { --o: 0; }
.pl__in { position: absolute; left: var(--pad); bottom: var(--pad); display: flex; flex-direction: column; gap: 6px; transition: opacity .4s; }
.pl__n { font-size: var(--fs-mega); font-weight: 200; letter-spacing: -.05em; line-height: .8; font-variant-numeric: tabular-nums; }
body.is-loaded .pl__in { opacity: 0; }
body.is-done .pl { display: none; }
html.seen .pl { display: none; }
html.seen body.is-loaded .hero .line > span { transition-delay: .1s; }
html.seen body.is-loaded .hero .line:nth-child(2) > span { transition-delay: .22s; }

/* ---------- section marker ---------- */
.here { position: fixed; left: var(--pad); bottom: var(--pad); z-index: 70; display: flex; align-items: center; gap: 12px; color: var(--here, #fff); pointer-events: none; opacity: 0; transition: opacity .6s, color .4s; }
body.is-done .here { opacity: 1; }
.here { display: none !important; } /* the section name / progress indicator is switched off */
.here__t { display: block; height: 1.3em; overflow: hidden; }
.here__t b { display: block; font-weight: 600; transition: transform .6s var(--ease), opacity .4s; }
.here__t b.out { transform: translateY(-110%); opacity: 0; }
.here__t b.pre { transform: translateY(110%); opacity: 0; transition: none; }
.here__bar { display: block; width: 64px; height: 1px; background: currentColor; opacity: .9; position: relative; }
.here__bar::before { content: ""; position: absolute; inset: 0; background: var(--bgc, var(--ink)); opacity: .55; }
.here__bar b { position: absolute; left: 0; top: 0; display: block; height: 100%; width: var(--p, 0%); background: currentColor; }

/* ---------- header ---------- */
.header { --fg: var(--white); --hbg: var(--ink); --hov: var(--ink); position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--head); padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--fg); transition: color .4s, background-color .4s; }
.header.is-solid { background: var(--hbg); box-shadow: inset 0 -1px 0 rgba(128, 128, 128, .35); }
.header[data-theme-state="light"] { --fg: var(--ink); --hbg: var(--sheet); --hov: var(--white); }
body.menu-open .header { --fg: var(--white); --hbg: var(--ink); --hov: var(--ink); background: transparent !important; box-shadow: none !important; }
.logo { position: relative; display: block; height: 24px; justify-self: start; }
.logo img { height: 24px; width: auto; transition: opacity .4s; }
.logo__b { position: absolute; left: 0; top: 0; opacity: 0; }
.header[data-theme-state="light"] .logo__w { opacity: 0; } .header[data-theme-state="light"] .logo__b { opacity: 1; }
body.menu-open .logo__w { opacity: 1 !important; } body.menu-open .logo__b { opacity: 0 !important; }
.nav { display: flex; gap: clamp(14px, 2vw, 34px); }
.nav a { position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.head__r { justify-self: end; display: flex; gap: 8px; }
.hbox { position: relative; overflow: hidden; border: 1px solid currentColor; border-radius: 999px; padding: 10px 16px; isolation: isolate; display: block; }
.hbox::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.hbox:hover::before { transform: scaleY(1); }
@media (hover: none) { .hbox:hover::before { transform: scaleY(0); } .hbox:hover span { color: inherit; } }
.hbox span { transition: color .3s; }
.hbox:hover span, .hbox:focus-visible span { color: var(--hov); }
.hbox:focus-visible::before { transform: scaleY(1); }
.hbox:focus-visible { outline: 0; }
.hbox__t { display: grid; overflow: hidden; height: 1.25em; }
.hbox__t b { grid-area: 1 / 1; font-weight: inherit; transition: transform .5s var(--ease-io); }
.hbox__t b:last-child { transform: translateY(120%); }
/* plus and cross are drawn, not typed, so they are always upright */
.ic { display: inline-block; position: relative; width: .8em; height: .8em; margin-left: .55em; vertical-align: -.02em; font-style: normal; }
.ic::before, .ic::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1.5px; background: currentColor; border-radius: 1px; }
.ic::after { transform: rotate(90deg); }
.ic--x { transform: rotate(45deg); }
body.menu-open .hbox__t b:first-child { transform: translateY(-120%); }
body.menu-open .hbox__t b:last-child { transform: none; }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; background: var(--ink); opacity: 0; transition: opacity .2s linear, visibility 0s .2s; }
body.menu-open .menu { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu__in { position: absolute; inset: 0; padding: var(--head) var(--pad) 0; display: flex; flex-direction: column; }
.mlist { flex: 1; display: grid; grid-template-rows: repeat(5, 1fr); min-height: 0; }
.mi { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--pad); border-top: 1px solid var(--line); isolation: isolate; opacity: 0; transition: opacity .15s; }
body.menu-open .mi { opacity: 1; transition-delay: .12s; }
.mi::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); border-radius: 20px; background: var(--white); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-io); z-index: -1; }
.mi:hover::before { transform: scaleY(1); }
.mi:hover { color: var(--ink); }
.mi__t { display: flex; align-items: baseline; gap: 14px; font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.04em; line-height: .92; }
.mi__t::after { content: ""; position: absolute; inset: 0; }
.mi__s { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mi__s a { border-bottom: 1px solid transparent; } .mi__s a:hover { border-bottom-color: currentColor; }
.menu__foot { height: 54px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); opacity: 0; transition: opacity .15s .1s; }
body.menu-open .menu__foot { opacity: 1; }

/* ---------- shared: lines, cells, rising text ---------- */
.line { display: block; overflow: hidden; padding: 0 .16em .24em 0; margin: 0 -.16em -.24em 0; }
.line > span { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--ease); }
.in .line > span, .line.in > span, body.is-loaded .hero .line > span { transform: none; }
body.is-loaded .hero .line > span { transition-delay: .9s; }
body.is-loaded .hero .line:nth-child(2) > span { transition-delay: 1.05s; }
.sec { position: relative; z-index: 1; background: var(--bg); color: var(--fg); padding: clamp(40px, 6vw, 100px) var(--pad) clamp(60px, 8vw, 130px); }
.sh { display: grid; grid-template-columns: 1fr auto; gap: var(--pad); border-top: 1px solid currentColor; padding: 14px 0; position: relative; }
.sh::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: currentColor; transform-origin: left; }
.sh h2 { font-weight: 600; font-size: var(--fs-s); }
.cells { position: relative; overflow: hidden; border-radius: var(--r); display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 0; }
.cells::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--r); pointer-events: none; z-index: 5; }
.cell { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--pad); clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-io); transition-delay: calc(var(--i, 0) * 110ms); }
.cells.in .cell { clip-path: inset(0); }
.cells.in .cell > * { animation: cellIn 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + .25s); }
@keyframes cellIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.hero { position: relative; height: 170vh; background: var(--paper); }
.hero__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: 0 0 var(--r) var(--r); }
.hero__img { position: absolute; inset: 0; }
.hero__img .slot { position: absolute; inset: 0; transform: scale(var(--s, 1.08)); }
.hero__img .slot img, .hero__img .slot video { filter: none; }
.hero__img::after { content: ""; position: absolute; inset: 0; background: rgba(7, 42, 82, .28); }
.tiles--hero { z-index: 1; pointer-events: none; }
.tiles--hero i { background: var(--paper); outline-color: var(--paper); }
.tiles--hero i { --o: 1; }
.hero__cross { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__cross i { position: absolute; width: 22px; height: 22px; }
.hero__cross i::before, .hero__cross i::after { content: ""; position: absolute; background: var(--white); }
.hero__cross i::before { left: 10px; top: 0; width: 1px; height: 22px; } .hero__cross i::after { top: 10px; left: 0; height: 1px; width: 22px; }
.hero__cross i:nth-child(1) { left: var(--pad); top: calc(var(--head) + 10px); } .hero__cross i:nth-child(2) { right: var(--pad); top: calc(var(--head) + 10px); }
.hero__cross i:nth-child(3) { left: var(--pad); bottom: calc(var(--pad) + 22px); } .hero__cross i:nth-child(4) { right: var(--pad); bottom: calc(var(--pad) + 22px); }
.hero__txt { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 52px); display: grid; grid-template-columns: 1fr; align-items: end; gap: var(--pad); will-change: transform; }
.hero__t { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.05em; line-height: .98; max-width: 22em; }
.hero__p { font-size: var(--fs-body); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; padding-bottom: .5em; }
.hero__meta { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); top: calc(var(--head) + 12px); display: flex; gap: clamp(18px, 3vw, 54px); padding-left: 36px; }
.hero__scroll { position: absolute; z-index: 3; right: var(--pad); bottom: calc(var(--pad) - 6px); }

/* ---------- about ---------- */
.about__s { grid-column: 1 / 9; padding: clamp(22px, 3vw, 54px); }
.statement { font-size: var(--fs-lead); font-weight: 300; letter-spacing: -.035em; line-height: 1.12; }
.statement b { font-weight: 600; }
.about__i { grid-column: 9 / 13; padding: 0; display: flex; flex-direction: column; }
.about__i .slot { flex: 1; min-height: 240px; --c: 0; }
.about__i:hover .slot { --c: 1; }
.about__i figcaption { padding: 12px var(--pad); opacity: .7; }
.about__k { grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: clamp(130px, 13vw, 210px); }
.big { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.06em; line-height: .85; }

/* ---------- industry: the globe ---------- */
.cells--ind { grid-template-columns: 5fr 7fr; margin-top: 0; }
.ind__t { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); padding: clamp(18px, 2.4vw, 40px); }
.ind__t .statement { font-size: var(--fs-lead); }
.ind__p { font-size: var(--fs-body); font-weight: 300; line-height: 1.45; max-width: 30em; opacity: .85; }
.ind__lanes { margin-top: auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ind__lanes button { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 18px; border-bottom: 1px solid var(--line); transition: color .35s; }
.ind__lanes button::before { content: ""; position: absolute; inset: 5px 0; background: var(--ink); border-radius: 14px; transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.ind__lanes button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; flex: none; transition: background-color .3s; }
.ind__lanes button.on { color: #fff; }
.ind__lanes button.on::before { transform: none; }
.ind__lanes button.on::after { background: currentColor; }
.ind__lanes b { font-weight: 600; }
.ind__g { padding: 0; min-height: clamp(360px, 44vw, 700px); }
.globe { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; user-select: none; }
.globe.is-drag { cursor: grabbing; }
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe__hint { position: absolute; left: var(--pad); bottom: var(--pad); opacity: .6; pointer-events: none; transition: opacity .5s; }
.globe.is-drag .globe__hint { opacity: 0; }
.globe__off { position: absolute; inset: 0; display: none; place-items: center; text-align: center; opacity: .5; }
.globe.no-gl .globe__off { display: grid; } .globe.no-gl .globe__hint { display: none; }

/* ---------- fleet index ---------- */
.fi { position: relative; overflow: hidden; border-radius: var(--r); --rh: clamp(64px, 5.2vw, 84px); --ro: clamp(270px, 25vw, 350px); }
.fi::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--r); pointer-events: none; z-index: 5; }
.fi__top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pad); padding: clamp(18px, 2.4vw, 36px) var(--pad) clamp(16px, 2vw, 28px); padding-left: clamp(18px, 2.4vw, 36px); }
.fi__count { display: flex; align-items: flex-end; gap: 14px; }
.fi__n { font-size: var(--fs-display); font-weight: 200; letter-spacing: -.07em; line-height: .78; font-variant-numeric: tabular-nums; }
.fi__count span { padding-bottom: .5em; opacity: .75; }
.fi__count i { font-style: normal; font-variant-numeric: tabular-nums; }
.fi__filter { display: flex; gap: 6px; padding-right: clamp(0px, .6vw, 10px); }
.fi__filter button { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; transition: background-color .35s, color .35s, border-color .35s; }
.fi__filter button i { font-style: normal; opacity: .55; }
.fi__filter button:hover { border-color: var(--fg); }
.fi__filter button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.fi__cols, .r-compact { display: grid; grid-template-columns: minmax(max-content, 1.5fr) 1fr 1fr 1fr 1fr 1.4fr 3rem; align-items: center; }
.fi__cols { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); opacity: .6; }
.fi__cols span:first-child { padding-left: clamp(18px, 2.4vw, 36px); }
.fi__list { margin: 0; padding: 0; }
.row { position: relative; height: var(--rh); overflow: hidden; border-bottom: 1px solid var(--line); transition: height .8s var(--ease), opacity .5s, background-color .5s, color .5s; }
.row:last-child { border-bottom: 0; }
.row.open { height: var(--ro); background: var(--ink); color: #fff; }
.row.out { height: 0; opacity: 0; pointer-events: none; border-bottom-color: transparent; }
.r-compact { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); cursor: pointer; outline: none; transition: opacity .3s, background-color .3s; }
.row:not(.open) .r-compact:hover { background: rgba(10, 53, 102, .05); }
.r-compact:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.row.open .r-compact { opacity: 0; pointer-events: none; }
.r-num { padding-left: clamp(18px, 2.4vw, 36px); font-size: var(--fs-lead); font-weight: 200; letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: .5; transition: opacity .3s; }
.r-compact:hover .r-num { opacity: 1; }
.r-name { padding-left: clamp(18px, 2.4vw, 36px); padding-right: 12px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.r-type { opacity: .65; } .row.nb .r-type { opacity: 1; color: var(--blue); }
.r-c { font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.r-arrow { justify-self: end; padding-right: clamp(18px, 2vw, 32px); font-size: var(--fs-lead); font-weight: 200; opacity: .5; }
.r-open { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(230px, .9fr) 2.2fr minmax(220px, .85fr); gap: clamp(14px, 2vw, 32px); align-items: center; padding: 12px clamp(18px, 2.4vw, 36px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.row.open .r-open { opacity: 1; pointer-events: auto; transition: opacity .6s .3s; }
.ro-id { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); min-width: 0; }
.ro-num { display: block; flex: none; line-height: 0; }
.ro-num svg { display: block; height: clamp(44px, 4.4vw, 78px); width: auto; overflow: visible; fill: none; stroke: #fff; stroke-width: 1px; stroke-linejoin: round; }
.ro-num path { vector-effect: non-scaling-stroke; }
.ro-nm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ro-kick { opacity: .7; white-space: nowrap; }
.row.nb .ro-kick { color: var(--sky); opacity: 1; }
.ro-name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.045em; line-height: .95; overflow-wrap: anywhere; }
.ro-prof { position: relative; height: 100%; min-height: 0; }
.ro-prof svg { position: absolute; inset: 0; width: 100%; height: 100%; --sw: 3; }
.ro-spec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-dwt { display: flex; align-items: flex-end; gap: 10px; }
.sp-dwt b { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.05em; line-height: .85; font-variant-numeric: tabular-nums; }
.sp-dwt .tiny { padding-bottom: 2px; opacity: .65; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.sp-grid > div { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.sp-grid > div:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 14px; }
.sp-grid dt { opacity: .6; font-size: var(--fs-xs); } .sp-grid dd { margin: 2px 0 0; font-weight: 600; letter-spacing: -.01em; font-size: var(--fs-s); }
.sp-grid .un { font-weight: 400; opacity: .7; }
.fl__note { padding-top: 14px; font-size: var(--fs-s); font-weight: 400; opacity: .6; line-height: 1.35; }
/* blueprint drawing — drawn in white on the open navy row */
.bp { color: #fff; --bpbg: var(--ink); }
.bp .bp-draw { fill: none; stroke: currentColor; stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp .bp-main { stroke-width: calc(var(--sw) * 1.15); }
.bp .bp-thin { opacity: .5; stroke-width: calc(var(--sw) * .75); }
.bp .bp-hair { opacity: .38; stroke-width: calc(var(--sw) * .6); }
.bp .bp-wl { opacity: .8; stroke: var(--sky); stroke-width: calc(var(--sw) * .8); stroke-dasharray: .006 .006; }
.bp .bp-ruler { opacity: .6; stroke-width: calc(var(--sw) * .7); }
.bp .bp-dim { stroke: var(--sky); stroke-width: calc(var(--sw) * .8); }
.bp .bp-hull { fill: rgba(255, 255, 255, .06); }
.bp .bp-sub { fill: rgba(143, 176, 255, .16); }
.bp .bp-arrow { fill: var(--sky); }
.bp .bp-gap { fill: var(--bpbg); }
.bp .bp-t { font-family: 'Inter Tight', 'Inter Tight Arrows', sans-serif; font-size: 14px; letter-spacing: .08em; fill: currentColor; opacity: 0; transition: opacity .6s .9s; }
.bp .bp-hn, .bp .bp-tick { font-size: 12px; opacity: .6; }
.bp .bp-dimt { fill: var(--sky); font-size: 15px; font-weight: 600; }
.bp.bp-nb .bp-hull { fill: none; } .bp.bp-nb .bp-main { opacity: .85; }
.row.open .bp .bp-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) calc(.3s + var(--d) * .8s); }
.row.open .bp .bp-t { opacity: 1; }
.row.open .bp .bp-wl { stroke-dasharray: 6 6; }

/* ---------- why ---------- */
.why__h { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.06em; line-height: .86; margin: clamp(24px, 4vw, 70px) 0 clamp(24px, 3vw, 50px); }
.cells--why { grid-template-columns: repeat(3, 1fr); }
.why__c { display: flex; flex-direction: column; gap: 14px; padding: 0 0 var(--pad); isolation: isolate; overflow: hidden; }
.why__c > p.tiny, .why__c > h3, .why__c > .why__p { padding: 0 var(--pad); }
.why__img { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); }
.why__img .slot { --c: 0; }
.why__c::before { content: ""; position: absolute; inset: 0; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-io); z-index: -1; }
.why__c:hover::before, .why__c:focus-visible::before { transform: scaleY(1); }
.why__c:hover, .why__c:focus-visible { color: var(--inv-fg); outline: 0; }
.why__c:hover .why__img .slot, .why__c:focus-visible .why__img .slot { --c: 1; }
.why__c h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.why__p { font-size: var(--fs-body); font-weight: 300; line-height: 1.4; letter-spacing: -.005em; max-width: 36em; }

/* ---------- investors (light sheet) ---------- */
.cells--inv { grid-template-columns: 5fr 7fr; }
.inv__big { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(18px, 2.4vw, 40px); min-height: clamp(320px, 38vw, 640px); }
.inv__dab { font-size: var(--fs-mega); font-weight: 200; letter-spacing: -.07em; line-height: .78; }
.inv__p { font-size: var(--fs-body); font-weight: 400; max-width: 28em; }
.inv__t { padding: 0; display: flex; flex-direction: column; }
.inv__t li { border-bottom: 1px solid var(--line); }
.inv__t li:last-child { border-bottom: 0; }
.inv__h { display: grid; grid-template-columns: 1fr 80px 40px; gap: var(--pad); padding: 14px var(--pad); opacity: .6; }
.inv__t a { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr 80px 40px; gap: var(--pad); align-items: center; padding: clamp(14px, 1.9vw, 30px) var(--pad); }
.inv__t a::before { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-io); z-index: -1; }
.inv__t a:hover::before { transform: scaleY(1); }
.inv__t a:hover { color: #fff; }
.inv__l { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.inv__t i { font-style: normal; font-size: var(--fs-lead); text-align: right; }

/* ---------- news ---------- */
.cells--news { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(20px, 3vw, 50px); }
.ncard { display: flex; flex-direction: column; gap: 12px; isolation: isolate; overflow: hidden; }
.ncard .slot { aspect-ratio: 3 / 2; height: auto; flex: none; --c: 0; margin-bottom: 6px; border-radius: calc(var(--r) * .55); }
.ncard:hover .slot { --c: 1; }
.ncard::before { content: ""; position: absolute; inset: 0; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-io); z-index: -1; }
.ncard:hover::before { transform: scaleY(1); } .ncard:hover { color: var(--inv-fg); }
.ncard h3 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }

/* ---------- contact ---------- */
.contact__a { display: flex; align-items: center; justify-content: space-between; gap: var(--pad); margin-top: clamp(30px, 6vw, 100px); border-bottom: 1px solid var(--line); padding: clamp(18px, 2.2vw, 34px) 0; position: relative; isolation: isolate; align-items: center; }
.contact__a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); border-radius: var(--r); background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-io); z-index: -1; }
.contact__a { transition: border-color .3s; }
.contact__a:hover::before { transform: scaleY(1); } .contact__a:hover { color: var(--inv-fg); border-bottom-color: transparent; }
.contact__t { font-size: var(--fs-display); font-weight: 200; letter-spacing: -.07em; line-height: .84; }
.contact__a i { font-style: normal; font-size: var(--fs-h2); font-weight: 200; line-height: .8; }
.contact__s { margin-top: 18px; font-size: var(--fs-body); font-weight: 300; opacity: .8; }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 1; background: var(--bg); color: var(--fg); padding: 0 var(--pad) 52px; }
.cells--foot { grid-template-columns: repeat(4, 1fr); }
.footer h4 { margin-bottom: 16px; opacity: .6; }
.footer ol li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.footer ol li + li { border-top: 0; } /* one line under each column title, none between the links */
.footer ol li span { opacity: .5; width: 1ch; font-variant-numeric: tabular-nums; }
.footer ol a { position: relative; }
.footer ol a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.footer ol a:hover::after { transform: scaleX(1); }
.footer__mark { margin: clamp(30px, 5vw, 90px) 0 clamp(12px, 1.6vw, 26px); clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-io); }
.footer__mark.in { clip-path: inset(0); }
.footer__mark img { width: 100%; height: auto; }
.footer__bottom { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: var(--pad); border-top: 1px solid var(--line); padding-top: 14px; padding-left: 0; }
.footer__bottom span:nth-child(3) { opacity: .6; }
.footer__bottom .by { opacity: .85; transition: opacity .3s; }
.footer__bottom .by:hover { opacity: 1; }
.footer__bottom .by__n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }


/* ============================================================
   FLOORS — the inner pages. Every floor is one full-height screen.
   What does not fit is folded into a wheel, tabs, rows or a panel.
   ============================================================ */
html.floors { scroll-snap-type: y proximity; }
body.about .here { display: none; }
.floor { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); padding: calc(var(--head) + clamp(8px, 1.6vh, 22px)) var(--pad) clamp(18px, 3.4vh, 42px); scroll-snap-align: start; }
.floor .f-in { flex: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); min-height: 0; }
.floor .f-in > .cells, .floor .f-in > .hy, .floor .f-in > .bd { flex: 1; min-height: 0; }
.floor .cells { grid-template-rows: minmax(0, 1fr); }
.floor .sh { padding: clamp(8px, 1.2vh, 14px) 0; }
.floor .cell { min-height: 0; }
.floor .tiny, .floor .tabs button, .floor .fi__filter button { font-size: var(--fs-xs); }
.footer.floor { padding-bottom: clamp(18px, 3.4vh, 42px); }
.f-foot .f-in { justify-content: flex-end; }
.f-foot .footer__mark { margin: clamp(14px, 3vh, 40px) 0 clamp(8px, 1.4vh, 20px); }

/* floor rail */
.rail { position: fixed; right: calc(var(--pad) / 2 - 11px); top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 4px; color: var(--rail, #fff); transition: color .4s, opacity .6s; opacity: 0; }
body.is-done .rail { opacity: 1; }
.rail button { position: relative; width: 22px; height: 22px; display: grid; place-items: center; }
.rail button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: transform .35s var(--ease), background-color .3s; }
.rail button.on::before { background: var(--rail-a, currentColor); border-color: var(--rail-a, currentColor); transform: scale(1.35); }
.rail button::after { content: attr(data-l); position: absolute; right: 26px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.rail button:hover::after, .rail button:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* about us — the directory */
.cells--dir { grid-template-columns: 7fr 5fr; }
.dir__l { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 2.4vh, 28px); padding: clamp(18px, 2.4vw, 40px); }
.dir__h { font-size: var(--fs-display); font-weight: 200; letter-spacing: -.06em; line-height: .86; }
.dir__p { font-size: var(--fs-body); font-weight: 300; line-height: 1.4; max-width: 34em; opacity: .9; }
.dir__list { display: flex; flex-direction: column; }
.dir__list a { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(9px, 1.7vh, 18px) 4px; border-top: 1px solid var(--line); font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1; transition: color .35s, padding .45s var(--ease); }
.dir__list li:last-child a { border-bottom: 1px solid var(--line); }
.dir__list a::before { content: ""; position: absolute; inset: 0 -1px; border-radius: 14px; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.dir__list a:hover { color: var(--inv-fg); padding-left: 16px; padding-right: 16px; } .dir__list a:hover::before { transform: scaleY(1); }
.dir__list i { font-style: normal; font-weight: 200; font-size: inherit; }
.dir__i { padding: 0; display: flex; flex-direction: column; }
.dir__i .slot { flex: 1; min-height: 200px; --c: 1; }
.dir__i figcaption { padding: 12px var(--pad); opacity: .7; }

/* history — the wheel */
.hy { position: relative; overflow: hidden; min-height: clamp(380px, 62vh, 900px); --x0: 36%; --R: 380px; }
.hy { cursor: grab; user-select: none; -webkit-user-select: none; } .hy.is-drag { cursor: grabbing; } .hy.is-drag .hy__it, .hy.is-drag .hy__txt { transition: none; }
.hy__intro { position: absolute; left: 0; top: clamp(4px, 2vh, 24px); width: min(320px, 23vw); font-size: var(--fs-body); font-weight: 300; line-height: 1.4; opacity: .9; }
.hy__wheel { position: absolute; inset: 0; }
.hy__arc { position: absolute; left: calc(var(--x0) - 2 * var(--R)); top: calc(50% - var(--R)); width: calc(2 * var(--R)); height: calc(2 * var(--R)); border: 1px solid var(--line); border-radius: 50%; clip-path: inset(0 0 0 50%); pointer-events: none; }
.hy__items { margin: 0; padding: 0; }
.hy__it { position: absolute; left: calc(var(--x0) - var(--R)); top: 50%; width: 0; height: 0; transform-origin: 0 0; transition: transform .9s var(--ease), opacity .6s; cursor: pointer; opacity: .55; }
.hy__it.far { opacity: 0; pointer-events: none; }
.hy__it span { position: absolute; left: 30px; top: 0; transform: translateY(-50%); white-space: nowrap; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: .5; transition: opacity .5s; }
.hy__it:hover span { opacity: .9; }
.hy__it.on span { opacity: 0; }
.hy__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); opacity: .35; transition: opacity .4s, transform .4s var(--ease); }
.hy__it.on .hy__dot { opacity: 1; transform: scale(1.5); background: var(--accent, var(--blue)); }
.hy__close--m { display: none; }
.hy__close { position: absolute; left: 0; bottom: 0; width: min(280px, 20vw); font-size: var(--fs-s); font-weight: 400; line-height: 1.4; opacity: .75; }
.hy__txt { position: absolute; left: calc(var(--x0) + 56px); right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: clamp(40px, 5.2vw, 120px); pointer-events: none; }
.hy__txt > * { pointer-events: auto; }
.hy__yr { flex: none; width: 5.4em; font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.hy__body { flex: 1 1 0; min-width: 0; max-width: min(640px, 40vw); }
.hy__t { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 8px; }
.hy__t:empty { display: none; }
.hy__p { font-size: var(--fs-body); font-weight: 300; line-height: 1.45; }
.hy__txt.swap .hy__yr, .hy__txt.swap .hy__body { animation: hySwap .7s var(--ease) both; }
.hy__txt.swap .hy__body { animation-delay: .06s; }
@keyframes hySwap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hy__ctl { position: absolute; right: 0; bottom: 0; display: flex; gap: 6px; }
.hy__ctl button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-s); transition: background-color .3s, color .3s, opacity .3s; }
.hy__ctl button:hover:not(:disabled) { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.hy__ctl button:disabled { opacity: .3; cursor: default; }

/* industry */
.cells--in2 { grid-template-columns: 5fr 7fr; }
.in2__l { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 2vh, 24px); padding: clamp(18px, 2.4vw, 40px); }
.in2__l .statement { font-size: var(--fs-lead); }
.dyk { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); }
.dyk .small { font-size: var(--fs-s); max-width: 38em; }
.dyk__b { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: clamp(38px, 6vh, 80px); padding: 0 16px; border-radius: 14px; overflow: hidden; font-size: var(--fs-s); }
.dyk__b i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); opacity: .12; z-index: -1; transition: width 1.4s var(--ease) .4s; }
.dyk__b--new i { background: var(--blue); opacity: .2; }
.in .dyk__b i, .cells.in .dyk__b i { width: var(--w); }
.dyk__b b { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-size: var(--fs-body); }
.dyk__b small { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; opacity: .65; }
.in2__r { display: flex; flex-direction: column; padding: clamp(14px, 2vw, 32px); gap: clamp(12px, 2.4vh, 28px); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background-color .35s, color .35s, border-color .35s; }
.tabs button:hover { border-color: var(--fg); }
.tabs button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.panels { flex: 1; min-height: 0; position: relative; }
.panel { display: none; flex-direction: column; gap: clamp(10px, 2vh, 22px); height: 100%; overflow: auto; scrollbar-width: thin; }
.panel.on { display: flex; animation: cellIn .6s var(--ease) both; }
.pn__h { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.05em; line-height: .95; }
.pn__p { font-size: var(--fs-body); font-weight: 300; line-height: 1.45; max-width: 40em; }
.chips { flex: 1; min-height: 120px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.chips li { border: 1px solid var(--line); border-radius: 18px; padding: clamp(14px, 2vh, 22px); display: flex; align-items: flex-end; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.035em; line-height: 1; text-transform: none; transition: background-color .4s, color .4s, border-color .4s; }
.chips li:hover { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo > div { border: 1px solid var(--line); border-radius: 18px; padding: clamp(14px, 2vh, 22px); display: flex; flex-direction: column; gap: 10px; min-height: clamp(110px, 18vh, 190px); }
.duo p:last-child { font-size: var(--fs-body); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; }
.scale { display: flex; gap: 4px; height: clamp(18px, 3vh, 30px); }
.scale i { display: block; width: var(--w); border-radius: 8px; background: var(--ink); opacity: .14; transition: opacity .3s; }
.scale i.us { opacity: 1; } .scale i.nw { background: var(--blue); }
.scale i.hot { outline: 2px solid var(--blue); outline-offset: 2px; }
.lg { display: flex; flex-direction: column; }
.lg li { display: flex; justify-content: space-between; gap: 16px; padding: clamp(7px, 1.2vh, 12px) 0; border-top: 1px solid var(--line); font-size: var(--fs-body); }
.lg li:last-child { border-bottom: 1px solid var(--line); }
.lg__n { font-weight: 600; letter-spacing: -.02em; } .lg__r { opacity: .7; text-align: right; }
.lg li.us .lg__n::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 10px; } .lg li.us.nw .lg__n::before { background: var(--blue); }
.terms { display: flex; flex-direction: column; }
.terms > div { display: grid; grid-template-columns: minmax(80px, 1fr) 4fr; gap: 16px; padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid var(--line); }
.terms dd { margin: 0; font-size: var(--fs-body); font-weight: 300; line-height: 1.45; }
.lnk { align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* strategy */
.cells--str { grid-template-columns: 6fr 6fr; }
.str__a, .str__b { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 2vh, 24px); padding: clamp(18px, 2.4vw, 40px); }
.str__a .statement { font-size: var(--fs-h3); }
.str__from { font-size: var(--fs-lead); font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.str__lines { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 16px); }
.str__lines i { display: block; height: 9px; border-radius: 6px; background: currentColor; opacity: .13; } .str__lines i.short { width: 52%; }
.tbc { display: flex; align-items: center; gap: 12px; opacity: .85; }
.tbc span { border: 1px dashed currentColor; border-radius: 999px; padding: 6px 11px 6px 12px; }

/* management */
.cells--mg { grid-template-columns: 1fr 1fr; }
.mg { position: relative; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); padding: clamp(14px, 1.8vw, 28px); overflow: hidden; isolation: isolate; }
.mg__pic { flex: 1 1 0; min-height: 90px; max-height: clamp(160px, 40vh, 420px); border-radius: calc(var(--r) * .5); overflow: hidden; }
.mg__pic .slot { --c: 0; transition: none; } .mg:hover .mg__pic .slot { --c: 1; }
.mg__id h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.mg__id .tiny { margin-top: 8px; opacity: .7; }
.mg__pre { font-size: var(--fs-body); font-weight: 300; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mg__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; transition: background-color .35s, color .35s, border-color .35s; }
.mg__btn:hover { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.mg__pane { position: absolute; inset: 0; z-index: 3; background: var(--ink); color: #fff; padding: clamp(18px, 2vw, 32px); display: flex; flex-direction: column; gap: 14px; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease-io); }
.mg.open .mg__pane { clip-path: inset(0); }
.mg__pane h4 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; padding-right: 90px; }
.mg__x { position: absolute; right: clamp(14px, 1.6vw, 24px); top: clamp(14px, 1.6vw, 24px); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 9px 14px; }
.mg__x:hover { background: #fff; color: var(--ink); }
.mg__bio { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .4) transparent; }
.mg__bio p { font-size: var(--fs-body); font-weight: 300; line-height: 1.5; max-width: 62em; }

/* board of directors — rows that open in place */
.bd { overflow: hidden; border-radius: var(--r); position: relative; --bh: clamp(46px, 7vh, 96px); --bo: clamp(270px, 46vh, 640px); }
.bd::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--r); pointer-events: none; z-index: 5; }
.bd__list { margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; }
.bd__row { position: relative; flex: none; height: var(--bh); overflow: hidden; border-bottom: 1px solid var(--line); transition: height .8s var(--ease), background-color .5s, color .5s; }
.bd__row:last-child { border-bottom: 0; }
.bd__row.open { height: var(--bo); background: var(--white); color: var(--ink); }
.bd__h { position: absolute; left: 0; right: 0; top: 0; height: var(--bh); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 44px; align-items: center; gap: var(--pad); padding: 0 clamp(18px, 2.4vw, 36px); width: 100%; outline: none; }
.bd__row:not(.open) .bd__h:hover { background: rgba(255, 255, 255, .06); }
.bd__h:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); }
.bd__n { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.bd__r { opacity: .7; }
.bd__h i { font-style: normal; font-size: var(--fs-lead); font-weight: 200; justify-self: end; transition: transform .5s var(--ease); }
.bd__row.open .bd__h i { transform: rotate(45deg); }
.bd__o { position: absolute; left: 0; right: 0; top: var(--bh); bottom: 0; display: grid; grid-template-columns: clamp(120px, 16vw, 380px) 1fr; gap: clamp(16px, 2.4vw, 40px); padding: 4px clamp(18px, 2.4vw, 36px) clamp(14px, 2.4vh, 26px); opacity: 0; transition: opacity .3s; }
.bd__row.open .bd__o { opacity: 1; transition: opacity .6s .3s; }
.bd__pic { border-radius: calc(var(--r) * .4); overflow: hidden; } .bd__pic .slot { --slot: #dfe3e8; --c: 0; }
.bd__row.open .bd__pic .slot { --c: 1; }
.bd__bio { overflow: auto; min-height: 0; scrollbar-width: thin; }
.bd__bio p { font-size: var(--fs-body); font-weight: 300; line-height: 1.5; columns: 2 280px; column-gap: clamp(20px, 2.4vw, 40px); }

/* committees */
.cells--cm { grid-template-columns: 5fr 7fr; }
.cm__l { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2.4vw, 40px); }
.cm__l .statement { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.06em; line-height: .9; }
.cm__t { padding: 0; display: flex; flex-direction: column; justify-content: center; }
.cm__t li { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: var(--pad); padding: clamp(10px, 2.2vh, 24px) clamp(18px, 2.4vw, 36px); border-bottom: 1px solid var(--line); }
.cm__t li:last-child { border-bottom: 0; }
.cm__t .cm__h { opacity: .6; padding-top: clamp(14px, 2vh, 22px); padding-bottom: clamp(10px, 1.6vh, 16px); }
.cm__n { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.cm__s { justify-self: start; border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; }
.cm__s--chair { background: var(--ink); color: #fff; }
.cm__s--member { border-color: var(--ink); }
.cm__s--tbc { border: 1px dashed currentColor; opacity: .7; }
.cm__s--no { padding: 8px 0; opacity: .4; font-size: var(--fs-s); }

@media (max-width: 1000px) {
  .cells--dir, .cells--in2, .cells--str, .cells--cm, .cells--op2, .cells--op3, .cells--op6, .cells--cl { grid-template-columns: 1fr; }
  .cells--mg { grid-template-columns: 1fr; }
  .floor .cells { grid-template-rows: none; }
  .dir__i .slot { min-height: 240px; }
  .rail { display: none; }
  .bd__o { grid-template-columns: 1fr; } .bd__pic { display: none; }
}
@media (max-width: 700px) {
  :root { --fs-xs: 11px; --fs-s: 14px; --fs-body: 16px; --fs-lead: 18px; --fs-h3: 24px; --fs-h2: clamp(30px, 9vw, 52px); --fs-display: 11.5vw; }
  .hy { min-height: clamp(520px, 78vh, 760px); --x0: 22%; }
  .hy__intro { position: static; width: auto; padding-bottom: 8px; }
  .hy > .hy__close { display: none; } .hy__close--m { display: block; position: static; width: auto; padding-top: 18px; }
  .hy__wheel { inset: 0 0 auto 0; height: 52%; }
  .hy__it span { font-size: var(--fs-body); left: 22px; }
  .hy__txt { left: 0; right: 0; top: auto; bottom: 0; transform: none; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 56px; }
  .hy__body { max-width: none; }
  .hy__ctl { bottom: 0; flex-direction: column; }
  .duo { grid-template-columns: 1fr; }
  .duo > div { min-height: 0; }
  .dyk .small { display: none; }
  .in2__l .statement { font-size: var(--fs-lead); }
  .in2__l, .in2__r { gap: 12px; padding: 16px; }
  .chips { min-height: 0; grid-auto-rows: auto; }
  .chips li { min-height: 60px; padding: 12px 14px; font-size: var(--fs-lead); }
  .panel { height: auto; overflow: visible; }
  .mg__pic { flex: none; height: 15vh; min-height: 90px; }
  .mg { gap: 8px; padding: 14px; }
  .mg__pre { -webkit-line-clamp: 2; }
  .terms > div { grid-template-columns: 1fr; gap: 4px; }
  .cm__t li { grid-template-columns: 1fr auto; }
  .bd { --bh: 56px; --bo: 440px; }
  .bd__h { grid-template-columns: 1fr 36px; } .bd__r { display: none; }
  .bd__bio p { columns: 1; }
}

/* ---------- responsive ---------- */
.dots, .mi__x { display: none; }
@media (max-width: 1000px) {
  .nav { display: none; }
  .header { grid-template-columns: 1fr auto; }
  .hero { height: 180vh; }
  .hero__txt { grid-template-columns: 1fr; }
  .hero__meta { padding-left: 0; flex-wrap: wrap; gap: 6px 18px; }
  .about__s, .about__i { grid-column: 1 / -1; } .about__k { grid-column: 1 / -1; min-height: 140px; }
  .cells--why, .cells--inv, .cells--news, .cells--ind { grid-template-columns: 1fr; }
  .ind__g { min-height: 440px; }
  .r-open { grid-template-columns: minmax(200px, .9fr) 1.6fr; grid-template-rows: 1fr auto; } .ro-spec { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; gap: 24px; } .ro-spec > * { flex: 1; }
  .cells--foot { grid-template-columns: 1fr 1fr; }
  .footer__bottom { grid-template-columns: 1fr 1fr; }
  .inv__h, .inv__t a { grid-template-columns: 1fr 60px 28px; }
  .here { display: none; }

  /* menu becomes an accordion: tap + to open a group's links */
  .mlist { display: flex; flex-direction: column; grid-template-rows: none; overflow-y: auto; }
  .mi { grid-template-columns: 1fr auto; align-items: center; gap: 0; padding: 18px 0; flex: none; }
  .mi:hover::before { transform: scaleY(0); } .mi:hover { color: inherit; }
  .mi__t { grid-column: 1; grid-row: 1; font-size: var(--fs-h2); }
  .mi__s { display: none; grid-column: 1 / -1; grid-row: 2; padding-top: 14px; gap: 8px 18px; }
  .mi.open .mi__s { display: flex; }
  .mi__x { display: block; grid-column: 2; grid-row: 1; position: relative; z-index: 3; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; }
  .mi__x::before, .mi__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: 0 0 0 -7px; background: currentColor; transition: transform .4s var(--ease); }
  .mi__x::after { transform: rotate(90deg); }
  .mi.open .mi__x::after { transform: rotate(0); }
}
@media (hover: none) {
  .why__img .slot, .ncard .slot { --c: 1; }
}
@media (max-width: 700px) {
  :root { --head: 58px; }
  .hbox:not(.hbox--menu) { display: none; }
  .sh { grid-template-columns: 1fr; }

  /* hero */
  .hero__t { font-size: var(--fs-h2); }
  .hero__meta { padding-left: 36px; }
  .hero__meta span:last-child { display: none; }
  .hero__p { padding-bottom: 0; margin-top: 12px; }

  /* about: the three facts become compact label · number rows */
  .about__s { padding: 22px 18px; }
  .about__i .slot { flex: none; min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .about__k { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; min-height: 0; padding: 18px; }
  .about__k .tiny { grid-column: 1; grid-row: 1; }
  .about__k .small { grid-column: 1; grid-row: 2; }
  .about__k .big { grid-column: 2; grid-row: 1 / 3; font-size: var(--fs-h2); }

  /* industry + fleet index */
  .ind__g { min-height: 360px; }
  .ind__lanes button { padding: 16px 16px; }
  .fi { --rh: 62px; --ro: 400px; }
  .fi__top { flex-direction: column; align-items: flex-start; }
  .fi__filter { width: 100%; padding-right: 0; } .fi__filter button { flex: 1; justify-content: center; padding: 11px 6px; gap: 6px; font-size: var(--fs-xs); }
  .fi__cols { display: none; }
  .fi__list { border-top: 1px solid var(--line); }
  .r-compact, .fi--detail .r-compact { grid-template-columns: minmax(0, 1fr) auto 2.6rem; } .r-compact .r-c { padding-right: 4px; }
  .r-compact > :nth-child(2), .r-compact > :nth-child(4), .r-compact > :nth-child(5), .r-compact > :nth-child(6) { display: none; }
  .r-name, .fi--detail .r-name { padding-left: 16px; } .r-arrow { padding-right: 14px; }
  .r-open { grid-template-columns: 1fr; grid-template-rows: auto 120px 1fr; align-items: start; gap: 14px; padding: 18px 16px; }
  .ro-num svg { height: 46px; } .ro-name { font-size: var(--fs-h3); }
  .ro-spec { flex-direction: column; align-items: stretch; gap: 10px; }
  .ro-prof { height: 120px; }

  /* why / investors */
  .why__h { margin: 28px 0 22px; }
  .inv__big { min-height: 260px; padding: 18px; }
  .inv__dab { font-size: 38vw; }
  .inv__t a { grid-template-columns: 1fr auto 28px; padding: 18px var(--pad); }

  /* news: a swipe carousel with the next card peeking in */
  .cells--news { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; border-radius: 0; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cells--news::-webkit-scrollbar { display: none; }
  .cells--news::after { display: none; }
  .cells--news .ncard { flex: 0 0 78%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r); }
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .22; transition: opacity .3s, transform .3s; cursor: pointer; }
  .dots i.on { opacity: 1; transform: scale(1.25); }

  /* contact */
  .contact__t { font-size: var(--fs-display); }

  /* footer: accordion */
  .cells--foot { grid-template-columns: 1fr; }
  .cells--foot .cell { padding: 0 var(--pad); border-right: 0; }
  .footer h4 { margin: 0; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; opacity: 1; cursor: pointer; }
  .footer h4::after { content: "+"; font-size: var(--fs-lead); font-weight: 300; line-height: 1; opacity: .7; }
  .footer .cell.open h4::after { content: "−"; }
  .footer .cell ol { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .45s var(--ease), visibility 0s .45s; }
  .footer .cell.open ol { max-height: 420px; visibility: visible; padding-bottom: 12px; transition-delay: 0s; }
  .footer__bottom { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .line > span { transform: none; } .cell { clip-path: none; } .footer__mark { clip-path: none; }
}

/* accent: brand blue on the one thing that is active; sky on dark floors */
.hy__yr { color: var(--accent, var(--blue)); }
.floor[data-theme="dark"] { --accent: var(--sky); }
.dir__list a { transition: color .3s, padding .45s var(--ease); } .dir__list a:hover { color: var(--blue); }

/* operations */
.cells--op2 { grid-template-columns: 5fr 7fr; }
.cells--op3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.floor .cells--op6 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.op__l, .op__c { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 22px); padding: clamp(18px, 2.2vw, 40px); }
.op__l { justify-content: space-between; }
.op__l .statement, .op__c .statement { font-size: var(--fs-lead); }
.op__c > p:not(.tiny):not(.statement):not(.tbc), .op__c .bl, .kv__v { font-size: var(--fs-body); font-weight: 300; line-height: 1.4; }
.op__k { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.op__k:not(:first-child) { margin-top: clamp(6px, 1.4vh, 18px); }
.bl { display: flex; flex-direction: column; gap: .35em; }
.bl li { position: relative; padding-left: 1.1em; }
.bl li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--blue)); }
.kv { padding: 0; display: flex; flex-direction: column; }
.kv li { flex: 1; min-height: 0; border-bottom: 1px solid var(--line); } .kv li:last-child { border-bottom: 0; }
.kv a, .kv .kv__a { position: relative; isolation: isolate; height: 100%; display: grid; grid-template-columns: minmax(120px, 2fr) 5fr auto; align-items: center; gap: var(--pad); padding: clamp(12px, 2vh, 28px) clamp(18px, 2.4vw, 36px); transition: color .35s; }
.kv a::before { content: ""; position: absolute; inset: 0; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.kv a:hover { color: var(--inv-fg); } .kv a:hover::before { transform: scaleY(1); }
.kv__k { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.kv i { font-style: normal; font-size: var(--fs-lead); font-weight: 200; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
.esg__r { display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 28px); }
.esg__d { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.06em; line-height: .95; }
.f-env .cell, .f-opm .cell { border-bottom: 1px solid var(--line); }

/* tab cards, after the Figma folder: the open tab is one shape with its panel (concave rounded notches
   where they meet); the other tabs stand next to it as separate cards */
.tcw { padding: clamp(14px, 2vw, 32px); display: flex; flex-direction: column; }
.tc { --tcg: 12px; --tcp: clamp(16px, 1.5vw, 24px); filter: drop-shadow(1px 0 0 var(--line)) drop-shadow(-1px 0 0 var(--line)) drop-shadow(0 1px 0 var(--line)) drop-shadow(0 -1px 0 var(--line)); --tc-bg: color-mix(in srgb, var(--fg) 11%, var(--bg)); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--tcg); }
.tc__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--tcg); align-items: stretch; }
.tc__tab { position: relative; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 2vh, 22px) var(--tcp); background: var(--tc-bg); border-radius: 18px; transition: background-color .35s; cursor: pointer; }
.tc__tab b { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.tc__tab span { font-size: var(--fs-s); line-height: 1.3; opacity: .65; }
.tc__tab:hover { background: color-mix(in srgb, var(--fg) 16%, var(--bg)); }
.tc__tab.on { border-radius: 22px 22px 0 0; background: var(--tc-bg); margin-bottom: calc(-1 * var(--tcg)); padding-bottom: calc(clamp(14px, 2vh, 22px) + var(--tcg)); cursor: default; }
.tc__tab.on b { color: var(--accent, var(--blue)); }
.tc__tab.on span { opacity: .85; }
.tc__tab.on:not(:first-child)::before, .tc__tab.on:not(:last-child)::after { content: ""; position: absolute; bottom: 0; width: var(--tcg); height: var(--tcg); box-shadow: 0 0 0 var(--tcg) var(--tc-bg); clip-path: inset(0); pointer-events: none; }
.tc__tab.on:not(:first-child)::before { right: 100%; border-bottom-right-radius: var(--tcg); clip-path: inset(0 -1px 0 1px); }
.tc__tab.on:not(:last-child)::after { left: 100%; border-bottom-left-radius: var(--tcg); clip-path: inset(0 1px 0 -1px); }
.tc__panels { flex: 1; min-height: 0; background: var(--tc-bg); border-radius: 22px; padding: clamp(18px, 2.4vw, 40px) var(--tcp); }
.tc:has(.tc__tab:first-child.on) .tc__panels { border-top-left-radius: 0; }
.tc:has(.tc__tab:last-child.on) .tc__panels { border-top-right-radius: 0; }
.tc__panels .pn__p { max-width: 44em; }

/* carousel */
.car { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 20px); padding: clamp(14px, 2vw, 32px); min-width: 0; }
.car__vp { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; border-radius: 22px; }
.car__vp::-webkit-scrollbar { display: none; } .car__vp.is-drag { cursor: grabbing; user-select: none; }
.car__vp:focus-visible { outline: 2px solid var(--accent, var(--blue)); outline-offset: 3px; }
.car__track { display: flex; gap: 12px; height: 100%; }
.car__c { flex: 0 0 clamp(260px, 62%, 640px); scroll-snap-align: start; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 20px); padding: clamp(18px, 2vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--fg) 6%, var(--bg)); overflow: auto; scrollbar-width: thin; }
.car__c:last-child { scroll-snap-align: end; }
.car__c .tiny { opacity: .6; }
.car__h { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.car__c > p:last-child, .acc__b p { font-size: var(--fs-body); font-weight: 300; line-height: 1.45; }
.car__bar { display: flex; align-items: center; gap: 18px; }
.car__prog { flex: 1; height: 2px; background: var(--line); position: relative; border-radius: 2px; }
.car__prog b { position: absolute; top: -1px; height: 4px; border-radius: 4px; background: var(--accent, var(--blue)); left: 0; width: 30%; transition: left .15s linear; }
.car__btns { display: flex; gap: 6px; }
.car__b { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-s); transition: background-color .3s, color .3s, opacity .3s; }
.car__b:hover:not(:disabled) { background: var(--accent, var(--blue)); color: #fff; border-color: var(--accent, var(--blue)); }
.car__b:disabled { opacity: .3; cursor: default; }

/* expanding strips */
.acc { display: flex; padding: 0; min-width: 0; --cw: clamp(64px, 6vw, 110px); }
.acc__s { position: relative; flex: 0.0001 1 var(--cw); min-width: 0; overflow: hidden; border-right: 1px solid var(--line); transition: flex-grow .8s var(--ease-io), background-color .4s; }
.acc__s:last-child { border-right: 0; }
.acc__s.open { flex-grow: 1; background: color-mix(in srgb, var(--fg) 7%, var(--bg)); }
.acc__s:not(.open):hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.acc__h { position: absolute; left: 0; top: 0; bottom: 0; width: var(--cw); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: clamp(14px, 2.4vh, 26px) 0; cursor: pointer; }
.acc__t { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.acc__h i { font-style: normal; font-size: var(--fs-lead); font-weight: 200; line-height: 1; transition: transform .5s var(--ease), color .3s; }
.acc__s.open .acc__h i { transform: rotate(45deg); color: var(--accent, var(--blue)); }
.acc__s.open .acc__h { box-shadow: inset 3px 0 0 var(--accent, var(--blue)); }
.acc__h:focus-visible { outline: 2px solid var(--accent, var(--blue)); outline-offset: -4px; }
.acc__b { position: absolute; left: var(--cw); right: 0; top: 0; bottom: 0; padding: clamp(18px, 2.2vw, 36px); overflow: auto; scrollbar-width: thin; opacity: 0; transition: opacity .25s; }
.acc__s.open .acc__b { opacity: 1; transition: opacity .5s .35s; }
.acc__b p { max-width: 36em; }

@media (max-width: 1000px) {
  .acc { flex-direction: column; }
  .acc__s { flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .acc__h { position: static; width: auto; flex-direction: row; align-items: center; padding: 16px 18px; width: 100%; }
  .acc__t { writing-mode: horizontal-tb; transform: none; }
  .acc__b { position: static; display: none; padding: 0 18px 18px; opacity: 1; }
  .acc__s.open .acc__b { display: block; }
  .car__c { flex-basis: 82%; }
  .tc__tabs { overflow-x: auto; scrollbar-width: none; grid-auto-columns: max-content; }
  .tc__tab span { display: none; }
  .tc__tab.on::before, .tc__tab.on::after { display: none; }
}

/* operations: brand blue on what is active or primary */
.op__l > .tiny, .op__c > .tiny, .car__c > .tiny { color: var(--accent, var(--blue)); opacity: 1; }
.op__k { color: var(--accent, var(--blue)); }
.car__h { color: var(--accent, var(--blue)); }
.car__b:last-child:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.car__b:last-child:not(:disabled):hover { filter: brightness(1.1); }
.acc__h i { color: var(--accent, var(--blue)); }
.acc__s.open .acc__h { box-shadow: inset 4px 0 0 var(--accent, var(--blue)); }
.acc__s.open .acc__t { color: var(--accent, var(--blue)); }
.esg__d { color: var(--accent, var(--blue)); }
.esg__r .lnk { border-bottom-color: var(--accent, var(--blue)); }
.f-esg .tbc span, .f-safety .tbc span { color: var(--accent, var(--blue)); }

/* while the menu is open the page edge (scrollbar gutter) is navy too, not a white strip */
html:has(body.menu-open) { background: var(--ink); }

.cells--cl { grid-template-columns: 1fr; }
.cl__t { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2.4vw, 40px); }
.cl__t .tiny { color: var(--accent, var(--blue)); }
.cl__s { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.05em; line-height: 1.02; max-width: 26em; }

.ov__a, .ov__b { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 22px); }
.ov__a .tiny, .ov__b .tiny { color: var(--accent, var(--blue)); }
.ov__c { font-size: var(--fs-body); font-weight: 300; line-height: 1.4; max-width: 34em; }

/* icons and glyphs are never italic */
i, em { font-style: normal; }

/* fleet */
.fi--detail .fi__cols, .fi--detail .r-compact { grid-template-columns: minmax(max-content, 1.4fr) .95fr .9fr .95fr minmax(0, 1.5fr) minmax(0, 1.9fr) 3rem; }
.fi--detail .fi__cols span:first-child, .fi--detail .r-name { padding-left: clamp(18px, 2.4vw, 36px); }
.fi--detail .ro-id { padding-left: clamp(0px, .4vw, 8px); }
.fi--detail .fi__cols span, .fi--detail .r-c { padding-right: 10px; }
.r-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-fdet .f-in > .fi { flex: none; --rh: clamp(64px, 5.2vw, 84px); --ro: clamp(270px, 25vw, 350px); }
.floor.f-fdet { padding-bottom: clamp(48px, 10vh, 110px); }
.f-fdet .fi__top { padding-top: clamp(22px, 3vh, 38px); padding-bottom: clamp(18px, 2.6vh, 30px); }
.f-fdet .fi__n { font-size: var(--fs-h2); }
.fi--detail .sp-grid > div { padding-top: 5px; padding-bottom: 5px; }
.fst { padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.fst__c { padding: clamp(18px, 2.2vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(8px, 1.4vh, 16px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fst__c:nth-child(2n) { border-right: 0; } .fst__c:nth-child(n+3) { border-bottom: 0; }
.fst__c .tiny, .fsum__c > .tiny { opacity: .65; }
.fst__n, .fsum__n { font-size: var(--fs-display); font-weight: 200; letter-spacing: -.07em; line-height: .9; font-variant-numeric: tabular-nums; color: var(--accent, var(--blue)); }
.fst__n span, .fsum__n span, .fsum__d span { font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; margin-left: .5em; color: var(--fg); opacity: .65; }
.fst__t { font-size: var(--fs-body); font-weight: 300; line-height: 1.35; max-width: 20em; }
.fsum__c { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 1.8vh, 22px); padding: clamp(18px, 2.2vw, 36px); }
.fsum__c--tot { background: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
.fsum__d { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.fsum__x { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.fsum__x > div { padding: 10px 0; } .fsum__x > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.fsum__x dt { opacity: .6; } .fsum__x dd { margin: 4px 0 0; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.02em; }

/* investor relations */
.sub { display: flex; flex-direction: column; gap: 10px; }
.sub__r { display: flex; gap: 8px; }
.sub input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-body); color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; outline: none; transition: border-color .3s; }
.sub input::placeholder { color: inherit; opacity: .45; }
.sub input:focus { border-color: var(--accent, var(--blue)); }
.sub button { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--blue); color: #fff; border-radius: 999px; padding: 0 22px; transition: filter .3s; }
.sub button:hover { filter: brightness(1.1); }
.fx { padding: 0; display: flex; flex-direction: column; }
.fx__h { padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.4vw, 36px) 8px; opacity: .65; }
.kv--x { flex: 1; border: 0; }
.kv--x li { border-top: 1px solid var(--line); border-bottom: 0; }
.kv--x li:last-child { border-bottom: 0; }
.kv--x .kv__k { color: var(--accent, var(--blue)); }
.sh__big { justify-content: space-between; }
.quote { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.quote .tiny:first-child { opacity: .65; }
.quote__v { font-size: var(--fs-h2); font-weight: 200; letter-spacing: -.05em; line-height: 1; }
.kf { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.kf > div { padding: 14px 0; border-bottom: 1px solid var(--line); } .kf > div:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 18px; } .kf > div:nth-last-child(-n+2) { border-bottom: 0; }
.kf .tiny { opacity: .65; } .kf__v { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.05em; line-height: 1; margin-top: 6px; color: var(--accent, var(--blue)); }
.cal { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(14px, 2vw, 32px); margin: clamp(10px, 2vh, 22px) 0 0; }
.cal > div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.cal dt { font-weight: 600; } .cal dd { margin: 0; opacity: .6; }
.acc__b .tbc { margin-top: 12px; }
.rel { padding: 0; display: flex; flex-direction: column; }
.rel li { border-bottom: 1px solid var(--line); } .rel li:last-child { border-bottom: 0; }
.rel__h { display: grid; gap: var(--pad); grid-template-columns: 8rem 1fr 3rem; padding: 16px clamp(18px, 2.4vw, 36px); opacity: .6; }
.rel a { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: var(--pad); padding: clamp(14px, 2.6vh, 28px) clamp(18px, 2.4vw, 36px); position: relative; isolation: isolate; transition: color .35s; }
.rel a::before { content: ""; position: absolute; inset: 0; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.rel a:hover { color: var(--blue); } .rel a:hover::before { transform: scaleY(1); }
.rel__d { font-size: var(--fs-s); opacity: .7; font-variant-numeric: tabular-nums; } .rel__t { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.rel i { justify-self: end; font-style: normal; font-size: var(--fs-lead); font-weight: 200; }
.f-fin .acc__b .cal { grid-template-columns: 1fr; }

/* contact */
.addr { display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 30px); }
.addr li { border-top: 1px solid var(--line); padding-top: clamp(10px, 1.8vh, 18px); display: flex; flex-direction: column; gap: 8px; }
.addr .tiny { color: var(--accent, var(--blue)); }
.addr__t { font-size: var(--fs-lead); font-weight: 300; letter-spacing: -.02em; line-height: 1.25; max-width: 30em; }
.addr__t span { opacity: .6; }
.ct__c { justify-content: flex-start; }
.ct__c > .tiny:first-child { color: var(--accent, var(--blue)); }
.ct__v { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ct__n { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.ct__s { font-size: var(--fs-body); font-weight: 300; line-height: 1.35; }
.ct__f { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ct__f .tiny { opacity: .65; }
.ct__d { margin: auto 0 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.ct__d > div { padding: 12px 0; border-bottom: 1px solid var(--line); } .ct__d > div:last-child { border-bottom: 0; }
.ct__d dt { opacity: .65; } .ct__d dd { margin: 4px 0 0; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.02em; }
.ct__c .lnk { color: var(--accent, var(--blue)); border-bottom-color: currentColor; }
.op__c.ct__c > p.ct__v:not(.tiny):not(.statement):not(.tbc) { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.04em; line-height: 1.05; }
.op__c.ct__c > p.ct__n:not(.tiny):not(.statement):not(.tbc) { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.op__c.ct__c > p.ct__s:not(.tiny):not(.statement):not(.tbc), .op__c.ct__c .ct__f p.ct__s:not(.tiny):not(.statement):not(.tbc) { font-size: var(--fs-lead); font-weight: 300; line-height: 1.3; letter-spacing: -.02em; }
.ct__c--inv { gap: clamp(10px, 1.8vh, 20px); }

/* fleet index on tablets: the vessel name always shows in full, the secondary columns step aside */
@media (min-width: 701px) and (max-width: 1100px) {
  .fi__cols, .r-compact, .fi--detail .fi__cols, .fi--detail .r-compact { grid-template-columns: minmax(max-content, 1.6fr) 1fr 1fr 1fr 3rem; }
  .fi__cols > :nth-child(5), .fi__cols > :nth-child(6), .r-compact > :nth-child(5), .r-compact > :nth-child(6) { display: none; }
}
@media (min-width: 1001px) { .contact__t { position: relative; top: -.02em; } }

/* board & senior executives on the homepage */
.sec.board .bd { margin-top: 0; }
.bd__m { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-d); opacity: .8; }
.bd__m b { font-weight: 600; border: 1px dashed currentColor; border-radius: 999px; padding: 3px 10px; margin-left: 4px; }
/* contact details on the homepage */
.cells--cnt { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 48px); }
.cnt__c { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.2vw, 36px); font-size: var(--fs-body); font-weight: 300; line-height: 1.35; }
.cnt__c .tiny { opacity: .65; margin-top: clamp(8px, 1.6vh, 16px); } .cnt__c .tiny:first-child { margin-top: 0; color: var(--sky); opacity: 1; }
.cnt__c span { opacity: .65; } .cnt__n { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.tbc-i { display: inline-block; border: 1px dashed currentColor; border-radius: 999px; padding: 2px 9px 2px 10px; width: fit-content; justify-self: end; align-self: center; line-height: 1.25; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; opacity: .8; }
@media (max-width: 1000px) { .cells--cnt { grid-template-columns: 1fr; } }
.sec.board .bd { --bo: clamp(470px, 64vh, 660px); }
@media (max-width: 700px) { .sec.board .bd { --bo: 560px; } }

/* share information section */
.cells--inv1 { grid-template-columns: 1fr; }
.shr__t small { display: block; font-size: var(--fs-s); font-weight: 300; letter-spacing: 0; margin-top: 8px; opacity: .7; }
.shr__r { display: grid; grid-template-columns: minmax(120px, 1fr) 2.4fr; gap: var(--pad); align-items: center; padding: clamp(14px, 1.9vw, 30px) var(--pad); }
.shr__r .tiny { opacity: .65; } .shr__v { font-size: var(--fs-body); font-weight: 300; line-height: 1.35; }
.shr .inv__t a::before { background: var(--blue); }
@media (max-width: 700px) { .shr__r { grid-template-columns: 1fr; gap: 6px; } }
.sec.board .bd--two { --bo: clamp(420px, 56vh, 600px); }
.sec[hidden] { display: none !important; }

/* operations management: manager statement, two topic cards, crewing offices on a route line */
.floor .cells--opm { grid-template-columns: 4fr 4.4fr 3.6fr; grid-template-rows: minmax(min-content, 1.25fr) minmax(min-content, 1fr); }
.opm__l { grid-row: 1 / span 2; grid-column: 1; }
.opm__s { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 22px); }
.opm__big { font-size: var(--fs-display); font-weight: 200; letter-spacing: -.07em; line-height: .85; }
.opm__y { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: clamp(12px, 2vh, 22px); }
.opm__y .tiny { opacity: .75; }
.opm__c { isolation: isolate; justify-content: flex-start; }
.opm__c::before { content: ""; position: absolute; inset: 0; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.opm__c > * { transition: color .35s; }
.opm__c:hover::before { transform: scaleY(1); }
.opm__c:hover { color: var(--inv-fg); }
.opm__c:hover > .tiny { color: var(--inv-fg); }
.opm__h { font-size: var(--fs-h3); font-weight: 200; letter-spacing: -.05em; line-height: .95; }
.opm__w { grid-column: 2 / span 2; }
.opm__w > p:not(.tiny) { max-width: 40em; }
.opm__off { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.opm__off li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 2.4vh, 24px) 12px 0 0; }
.opm__off li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--blue)); }
.opm__co { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.opm__c:hover .opm__off, .opm__c:hover .opm__off li::before { border-color: currentColor; }
@media (max-width: 1000px) {
  .floor .cells--opm { grid-template-columns: 1fr; grid-template-rows: none; }
  .opm__l, .opm__w { grid-row: auto; grid-column: auto; }
  .opm__big { font-size: var(--fs-h2); }
  .opm__l { gap: 24px; }
}
@media (max-width: 700px) {
  .opm__off { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .opm__off li { padding-bottom: 10px; }
  .opm__off li:nth-child(n+3)::before { display: none; }
}

/* operations quality: intro statement with a 50+ numeral, then three topic columns */
.floor .cells--ql { grid-template-columns: 1fr 1fr 2fr; grid-template-rows: auto minmax(min-content, 1fr); }
.qlt__i { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--pad) clamp(24px, 6vw, 120px); padding: clamp(18px, 2.2vw, 40px); }
.qlt__s { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 22px); align-self: stretch; }
.qlt__i .tiny { color: var(--accent, var(--blue)); opacity: 1; }
.qlt__i .statement { font-size: var(--fs-lead); max-width: 30em; }
.qlt__y { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: clamp(12px, 2vh, 22px); min-width: clamp(160px, 18vw, 320px); }
.qlt__y .tiny { color: inherit; opacity: .75; }
.qlt__x { margin-top: auto; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: clamp(12px, 2vh, 20px); }
.qlt__x--flow { margin-top: clamp(4px, 1vh, 12px); border-top: 0; padding-top: 0; }
.qlt__x .tiny:first-child { opacity: .75; }
.qlt__z { margin-top: auto; }
.opm__c:hover .tags li, .opm__c:hover .qlt__x { border-color: currentColor; }
@media (max-width: 1000px) {
  .floor .cells--ql { grid-template-columns: 1fr; grid-template-rows: none; }
  .qlt__i { grid-column: auto; grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .qlt__y .opm__big { font-size: var(--fs-h2); }
  .qlt__y { min-width: 0; }
}

/* operations ESG report: the whole report cell is one link and fills on hover */
.f-esg .op__l .statement { font-size: var(--fs-h3); }
.esg__c { padding: 0; }
.esg__a { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 2vh, 22px); padding: clamp(18px, 2.2vw, 40px); transition: color .35s; }
.esg__a::before { content: ""; position: absolute; inset: 0; background: var(--inv-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-io); z-index: -1; }
.esg__a:hover { color: var(--inv-fg); } .esg__a:hover::before { transform: scaleY(1); }
.esg__t { color: var(--accent, var(--blue)); transition: color .35s; }
.esg__a:hover .esg__t, .esg__a:hover .esg__d { color: inherit; }
.esg__b { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); }
.esg__a:focus-visible { outline: 2px solid var(--accent, var(--blue)); outline-offset: -4px; }
.esg__m { display: inline-flex; align-items: center; gap: 10px; }
.esg__m i { font-style: normal; font-size: var(--fs-lead); font-weight: 200; line-height: 1; }

/* fleet index on phones: the open row needs room for all eight specs (the Fleet page rule above had cut it to 270px) */
@media (max-width: 700px) {
  .fi--detail, .f-fdet .f-in > .fi--detail { --rh: 62px; --ro: 440px; }
}

/* vessel panel: full-width spec rows (manager, remarks, type on newbuildings) */
.sp-grid > div.sp-wide { grid-column: 1 / -1; border-left: 0; padding-left: 0; }

/* investor relations: card floors, calendar list, analysts list, governance links */
.floor .cells--ir { grid-template-rows: minmax(min-content, 1fr); }
.ir__n { font-size: var(--fs-body); font-weight: 300; line-height: 1.4; }
.qlt__x .tbc { font-size: var(--fs-xs); }
.ir__t.qlt__x--end { margin-top: auto; }
.ir__t { margin: 0; display: flex; flex-direction: column; }
.ir__t > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(8px, 1.4vh, 14px) 0; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.ir__t dt { opacity: .75; } .ir__t dd { margin: 0; font-weight: 600; text-align: right; }
.opm__c:hover .ir__t > div { border-color: currentColor; }
.ir__c { padding: 0; display: flex; flex-direction: column; justify-content: center; }
.ir__cal { margin: 0; display: flex; flex-direction: column; flex: 1; }
.ir__cal > div { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--pad); padding: 0 clamp(18px, 2.4vw, 36px); border-bottom: 1px solid var(--line); font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.ir__cal > div:last-child { border-bottom: 0; }
.ir__cal small { font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; opacity: .7; }
.ir__links { margin: 0; margin-top: auto; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.ir__links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(12px, 2vh, 20px) 0; border-top: 1px solid var(--line); font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.ir__links i { font-style: normal; font-weight: 200; }
.opm__c:hover .ir__links, .opm__c:hover .ir__links a { border-color: currentColor; }
@media (max-width: 1000px) {
  .floor .cells--ir { grid-template-rows: none; }
  .ir__c { min-height: 0; }
  .ir__cal > div { padding-top: 14px; padding-bottom: 14px; }
}

/* two- and three-column Operations / Investor floors stack on tablets and phones (the earlier media rule was overridden by the base rules defined after it) */
@media (max-width: 1000px) {
  .cells--op2, .cells--op3 { grid-template-columns: 1fr; }
}

/* menu: a dot between the sub-links (sits in the gap, so it never shifts the layout) */
.mi__s a { position: relative; }
.mi__s a:not(:last-child)::after { content: "·"; position: absolute; left: 100%; top: 0; width: 20px; text-align: center; opacity: .7; pointer-events: none; }
@media (max-width: 1000px) { .mi__s a:not(:last-child)::after { width: 18px; } }
.mi__s a.eol::after { display: none; }

/* sections reduced to the sheets' own text */
.floor .cells--one { grid-template-columns: 1fr; }
.cells--one .op__l .statement { max-width: 30em; }
.fst--2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.r-ex { font-size: var(--fs-s); font-weight: 300; letter-spacing: 0; opacity: .7; white-space: nowrap; }
.cells--one .cm__t { justify-content: flex-start; }

/* home page: remaining sentences of the intro, News & Media TBC */
.about__p { margin-top: clamp(12px, 2vh, 24px); max-width: 36em; font-size: var(--fs-body); font-weight: 300; line-height: 1.45; }
.news__t { display: flex; align-items: center; min-height: clamp(120px, 16vh, 200px); }
.sec .cells--one { grid-template-columns: 1fr; }

/* investors: statement floors as a title cell and a statement cell (no added content) */
.ir__big { font-size: var(--fs-display); font-weight: 200; letter-spacing: -.06em; line-height: .95; overflow-wrap: anywhere; }
.ir__ttl { justify-content: flex-end; }
.ir__st { justify-content: space-between; }
.ir__st .statement { font-size: var(--fs-h3); line-height: 1.08; max-width: 22em; }

/* management: small square portraits instead of wide banners */
.mg__pic { flex: none; width: clamp(140px, 14vw, 280px); max-height: none; min-height: 0; aspect-ratio: 1; }
.mg__pic .slot img { object-position: 50% 25%; }
@media (max-width: 700px) { .mg__pic { height: auto; min-height: 0; width: 120px; } }

/* phones: board portrait shown above the biography, panel grows with its content */
.bd__r2 { display: none; }
@media (max-width: 700px) {
  :root { interpolate-size: allow-keywords; }
  .bd__row.open { height: auto; }
  .bd__row.open .bd__o { position: static; display: grid; grid-template-columns: 1fr; gap: 16px; padding: calc(var(--bh) + 4px) 18px 22px; opacity: 1; }
  .bd__pic { display: block; }
  .bd__row.open .bd__pic { aspect-ratio: 4 / 5; }
  .bd__bio { overflow: visible; }
  .bd__r2 { display: block; opacity: .7; margin-bottom: 12px; }
  .bd__pic .slot img { object-position: 50% 20%; }

  /* menu on phones: sub-links as a plain list with hairlines, no dots */
  .mi__s { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .mi__s a { display: block; padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .mi__s a:hover { border-bottom-color: transparent; }
  .mi__s a:not(:last-child)::after { display: none; }
}

/* menu on phones: sub-page links use the body token */
@media (max-width: 700px) { .mi__s.tiny { font-size: var(--fs-body); } .mi__s a { padding: 11px 0; } }

/* committees: director rows share the full height of the table */
.cells--one .cm__t li:not(.cm__h) { flex: 1 1 0; }

/* home: the About floor slides up over the breaking hero, so there is no empty grey screen between them */
#about.about { margin-top: -45vh; border-radius: var(--r) var(--r) 0 0; }

/* quick links: the hover fill is the dark navy, not the bright blue */
.inv .inv__t a::before { background: var(--ink); }

/* Management (desktop): large square portrait, name and role on top; the intro and the
   "Full biography" button sit at the bottom of the cell. Phones keep the compact row. */
@media (min-width: 701px) {
  .mg { gap: clamp(12px, 1.15vw, 22px); }
  .mg__pic { width: min(100%, 23.2vw, 42vh); }
  .mg__pic .slot img { object-position: 50% 40%; }
  .mg__id { display: flex; flex-direction: column; gap: clamp(12px, 1.15vw, 22px); }
  .mg__id h3 { line-height: 1.2; }
  .mg__id .tiny { margin-top: 0; }
  .mg__pre { margin-top: auto; line-height: 1.4; }
  /* open biography: the name stays on top, the text sits at the bottom of the pane */
  .mg__bio { flex: 0 1 auto; margin-top: auto; }
}

/* home hero: the headline uses the display size (128 in the design) and sits on one line when it fits */
.hero__t { font-size: var(--fs-display); display: flex; flex-wrap: wrap; column-gap: .22em; max-width: none; }
@media (max-width: 700px) { .hero__t { font-size: var(--fs-h2); } }

/* home · Share information fills the screen height like the floors; the five rows share the height equally */
@media (min-width: 701px) {
  .sec.shr { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--head) + clamp(8px, 1.6vh, 22px)); padding-bottom: clamp(18px, 3.4vh, 42px); }
  .sec.shr .sh { flex: none; }
  .sec.shr .cells { flex: 1; min-height: 0; grid-template-rows: minmax(min-content, 1fr); }
  .sec.shr .inv__big { min-height: 0; }
  .shr__t li { flex: 1 1 0; display: flex; }
  .shr__t li > a, .shr__t li > .shr__r { flex: 1; }
}

/* investors · Share information has two cards now (the TBC card was removed) */
@media (min-width: 1001px) { .floor .cells--ir2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* investors · Press releases: a list of announcements (newest first) above the Newsweb link */
.pr__c { display: flex; flex-direction: column; }
.pr__list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.pr__list li { flex: 1 1 0; min-height: 0; display: flex; border-bottom: 1px solid var(--line); }
.pr__list a { flex: 1; display: grid; grid-template-columns: minmax(7em, 9em) 1fr auto; align-items: center; gap: var(--pad); padding: 0 clamp(18px, 2.2vw, 40px); transition: background-color .35s, color .35s; }
.pr__list a:hover { background: var(--inv-bg); color: var(--inv-fg); }
.pr__d { opacity: .65; }
.pr__t { font-size: var(--fs-body); font-weight: 300; line-height: 1.3; }
.pr__list i { font-style: normal; font-size: var(--fs-lead); font-weight: 200; }
.pr__all { flex: none; }
@media (max-width: 700px) { .pr__list li { flex: none; } .pr__list a { grid-template-columns: 1fr auto; padding-top: 14px; padding-bottom: 14px; row-gap: 4px; } .pr__d { grid-column: 1 / -1; } }

/* investors · Analysts: indicative list of analysts and company-paid research (placeholder text until real names exist) */
.an__c { gap: clamp(14px, 2.4vh, 28px); }
.an__c .statement { margin-bottom: auto; }
.an__s { display: flex; flex-direction: column; gap: clamp(6px, 1vh, 12px); }
.an__s .tiny { opacity: .65; }
.an__list { margin: 0; display: flex; flex-direction: column; }
.an__list li { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr; gap: var(--pad); align-items: baseline; padding: clamp(10px, 1.5vh, 16px) 0; border-top: 1px solid var(--line); font-size: var(--fs-body); font-weight: 300; line-height: 1.3; }
.an__list li:last-child { border-bottom: 1px solid var(--line); }
.an__r { grid-template-columns: 8em 1fr auto !important; }
.an__k { opacity: .65; }
.an__note { opacity: .65; max-width: 44em; }
@media (max-width: 700px) { .an__list li, .an__r { grid-template-columns: 1fr !important; gap: 4px; } }

/* home · Senior executives: small note on the executive management membership date */
.bd__since { display: flex; align-items: center; gap: 10px; font-size: var(--fs-s); font-weight: 400; opacity: .75; margin-bottom: clamp(10px, 1.6vh, 16px); }


/* client preview: "Contact us" in the footer area is a plain heading, not a link */
.contact__a--static { cursor: default; }
.contact__a--static::before { display: none; }
.contact__a--static:hover { color: inherit; border-bottom-color: var(--line); }

/* client preview: the footer starts with its logo now (no link columns above it); keep the logo's top margin inside the dark footer */
.footer { display: flow-root; }

/* home · bios with two paragraphs: one paragraph per column */
.bd__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 40px); }
.bd__cols p { columns: auto; }
@media (max-width: 1000px) { .bd__cols { grid-template-columns: 1fr; gap: 1em; } }