@charset "utf-8";

/*
Theme Name: Cargora - Freight Forwarding & Logistics HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Thermal Print & Barcode
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Hero Slider
   7.2 Split & Hairlines
   7.3 Tabs
   7.4 Mode Icons
   7.5 Voices
   7.6 People
   7.7 Posts
   7.8 Departures & Offices
   7.9 Quick Quote
   7.10 Accordion
   7.11 Client Strip & Crumbs
8. Home One
   8.1 Take-Off
   8.2 Fastest Band
9. Home Two
   9.1 Yellow Hero
   9.2 Track Bar
   9.3 Storage & Solutions
   9.4 Tiles & Figures
   9.5 Voices On Tarpaulin
   9.6 Box Sizes
   9.7 Global & Pros
   9.8 Fleet
   9.9 Operating & Support
10. Home Three
   10.1 Studio Hero
   10.2 Rail Cards & Control
   10.3 Budget Compare
   10.4 Pros Grid
   10.5 The Aisle
   10.6 Rail Tabs, Map, Numbers
11. Inner Pages
   11.1 Bands & Rows
   11.2 Services
   11.3 Industries & Cases
   11.4 People & Profile
   11.5 Careers
   11.6 Network
   11.7 FAQ & Contact
12. Freight Tools
   12.1 Choice Cards & Chips
   12.2 Quote
   12.3 Tracking
   12.4 Wizard
   12.5 Schedules
   12.6 Container Guide
   12.7 Customs
13. Blog & Account
   13.1 Blog List
   13.2 Sidebar
   13.3 Article
   13.4 Account Pages
   13.5 Coming Soon & 404
14. Subheader
15. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --cg-yellow: #F7C600;
  --cg-yellow-rgb: 247, 198, 0;
  --cg-yellow-d: #D9A300;
  --cg-yellow-ink: #7A5D00;
  --cg-ink: #1B1B1B;
  --cg-ink-rgb: 27, 27, 27;
  --cg-deep: #12171B;
  --cg-deep-rgb: 18, 23, 27;
  --cg-grey: #DFDFDF;
  --cg-studio: #E5E5E5;
  --cg-white: #FFFFFF;
  /* semantic: the white page is the default; [data-theme="dark"] is the night shift */
  --cg-bg: #FFFFFF;
  --cg-bg-rgb: 255, 255, 255;
  --cg-surface: #FFFFFF;
  --cg-band: #DFDFDF;
  --cg-band-2: #EBEBEB;
  --cg-soft: #F6F6F6;
  --cg-heading: #1B1B1B;
  --cg-heading-rgb: 27, 27, 27;
  --cg-text: #5B5B5B;
  --cg-muted: #6B6B6B;
  --cg-line: #DFDFDF;
  --cg-line-2: #AFAFAF;
  --cg-field: #F2F2F2;
  --cg-primary: #F7C600;
  --cg-on-primary: #1B1B1B;
  --cg-accent-text: #7A5D00;
  --cg-ok: #1F7A45;
  --cg-warn: #995800;
  --cg-bad: #B42318;
  --cg-shadow: 0 18px 40px rgba(18, 23, 27, 0.1);
  --cg-shadow-lg: 0 28px 70px rgba(18, 23, 27, 0.18);
  --cg-ease: cubic-bezier(0.57, 0.57, 0, 0.97);
  --cg-ease-2: cubic-bezier(0.23, 1, 0.32, 1);
  /* type */
  --cg-ff-body: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
  --cg-ff-mono: 'Martian Mono', 'SFMono-Regular', Consolas, monospace;
  --cg-fs-h1: clamp(42px, 4.5vw, 65px);
  --cg-fs-h2: clamp(32px, 3.1vw, 45px);
  --cg-fs-h3: clamp(24px, 2.2vw, 32px);
  --cg-fs-h4: 22px;
  --cg-fs-h5: 18px;
  --cg-fs-h6: 16px;
  /* WebGL colours (per section below) */
  --gl-1: #FFFFFF;
  --gl-2: #1B1B1B;
  --gl-3: #F7C600;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --cg-bg: #111315;
  --cg-bg-rgb: 17, 19, 21;
  --cg-surface: #1A1D20;
  --cg-band: #16191C;
  --cg-band-2: #1F2327;
  --cg-soft: #15181B;
  --cg-heading: #F2F2F0;
  --cg-heading-rgb: 242, 242, 240;
  --cg-text: #B9BDC1;
  --cg-muted: #A3A8AD;
  --cg-line: rgba(242, 242, 240, 0.12);
  --cg-line-2: rgba(242, 242, 240, 0.26);
  --cg-field: #1F2327;
  --cg-accent-text: #F7C600;
  --cg-ok: #5CC489;
  --cg-warn: #F0B35A;
  --cg-bad: #F08A7E;
  --cg-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  --cg-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
  --gl-1: #111315;
  --gl-2: #F2F2F0;
  --gl-alpha: 0.42;
}
/* bands that stay dark in both themes: the footer, the ink bands, the fleet band */
.is-night,
.is-deep {
  --cg-heading: #FFFFFF;
  --cg-heading-rgb: 255, 255, 255;
  --cg-text: rgba(255, 255, 255, 0.76);
  --cg-muted: rgba(255, 255, 255, 0.64);
  --cg-line: rgba(255, 255, 255, 0.12);
  --cg-line-2: rgba(255, 255, 255, 0.26);
  --cg-accent-text: #F7C600;
  --cg-surface: #24282C;
  --cg-band-2: #24282C;
  --cg-field: rgba(255, 255, 255, 0.08);
  --cg-ok: #5CC489;
  --cg-warn: #F0B35A;
  --cg-bad: #F08A7E;
  --gl-1: #1B1B1B;
  --gl-2: #FFFFFF;
  --gl-alpha: 0.42;
  background-color: var(--cg-ink);
  color: var(--cg-text);
}
.is-deep {
  --gl-1: #12171B;
  background-color: var(--cg-deep);
}
/* the yellow bands (the Home 02 hero, the figures band): ink copy in both themes */
.is-yellow {
  --cg-heading: #1B1B1B;
  --cg-heading-rgb: 27, 27, 27;
  --cg-text: #3D3300;
  --cg-muted: #574800;
  --cg-line: rgba(27, 27, 27, 0.18);
  --cg-line-2: rgba(27, 27, 27, 0.4);
  --cg-accent-text: #1B1B1B;
  --cg-surface: #FFFFFF;
  --cg-field: rgba(255, 255, 255, 0.6);
  --cg-primary: #1B1B1B;
  --cg-on-primary: #FFFFFF;
  --gl-1: #F7C600;
  --gl-2: #1B1B1B;
  --gl-alpha: 0.3;
  background-color: var(--cg-yellow);
  color: var(--cg-text);
}
/* the studio grey the rolling stock was shot on: a light plate in both themes */
.is-studio,
.cg-stage {
  --cg-heading: #1B1B1B;
  --cg-heading-rgb: 27, 27, 27;
  --cg-text: #565656;
  --cg-muted: #626262;
  --cg-line: rgba(27, 27, 27, 0.12);
  --cg-line-2: rgba(27, 27, 27, 0.3);
  --cg-accent-text: #7A5D00;
  --cg-surface: #FFFFFF;
  --cg-band-2: #EDEDED;
  --cg-field: #F2F2F2;
  background-color: var(--cg-studio);
  color: var(--cg-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cg-bg);
  color: var(--cg-text);
  font-family: var(--cg-ff-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--cg-ease-2), background-color 0.3s var(--cg-ease-2);
}
a:hover {
  color: var(--cg-accent-text);
}
::selection {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
:focus-visible {
  outline: 2px solid var(--cg-yellow);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Sarabun bold for every heading, tight; the mono for labels, codes and figures */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--cg-heading);
  font-family: var(--cg-ff-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--cg-fs-h1);
  line-height: 1.1;
}
h2 {
  font-size: var(--cg-fs-h2);
  line-height: 1.15;
}
h3 {
  font-size: var(--cg-fs-h3);
  line-height: 1.22;
}
h4 {
  font-size: var(--cg-fs-h4);
  line-height: 1.26;
}
h5 {
  font-size: var(--cg-fs-h5);
  line-height: 1.3;
}
h6 {
  font-size: var(--cg-fs-h6);
  line-height: 1.36;
}
/* a heading at its outline level that looks like another level */
.cg-h1 {
  font-size: var(--cg-fs-h1);
  line-height: 1.1;
}
.cg-h2 {
  font-size: var(--cg-fs-h2);
  line-height: 1.15;
}
.cg-h3 {
  font-size: var(--cg-fs-h3);
  line-height: 1.22;
}
.cg-h4 {
  font-size: var(--cg-fs-h4);
  line-height: 1.26;
}
.cg-h5 {
  font-size: var(--cg-fs-h5);
  line-height: 1.3;
}
.cg-h6 {
  font-size: var(--cg-fs-h6);
  line-height: 1.36;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.cg-lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--cg-text);
}
.cg-mono,
.cg-code {
  font-family: var(--cg-ff-mono);
  font-weight: 400;
  letter-spacing: 0;
}
.cg-code {
  font-size: 0.82em;
  letter-spacing: 0.02em;
}
.cg-num {
  font-variant-numeric: lining-nums tabular-nums;
}
.cg-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* word masks for the R3 title rise: padded on every side so no letter is cut */
.cg-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.08em 0.22em;
  margin: -0.14em -0.08em -0.22em;
  vertical-align: top;
}
.cg-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-130 {
  padding-top: 130px;
}
.sec-pb-130 {
  padding-bottom: 130px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.cg-bg-band {
  background-color: var(--cg-band);
}
.cg-bg-soft {
  background-color: var(--cg-soft);
}
/* a working panel: forms, summaries, wizards */
.cg-panel {
  padding: 40px 42px;
  background: var(--cg-surface);
}
.cg-bg-band .cg-panel {
  background: var(--cg-band-2);
}
.cg-panel.is-night {
  background: var(--cg-ink);
}
.cg-panel h2,
.cg-panel h3 {
  margin-bottom: 20px;
}
/* photo band: one style everywhere (cover photo under an ink wash from the copy side, white copy) */
.cg-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--cg-ink);
  --cg-heading: #FFFFFF;
  --cg-text: rgba(255, 255, 255, 0.88);
  --cg-muted: rgba(255, 255, 255, 0.72);
  --cg-accent-text: #F7C600;
  --cg-line: rgba(255, 255, 255, 0.2);
  --cg-line-2: rgba(255, 255, 255, 0.34);
  color: var(--cg-text);
}
.cg-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(18, 23, 27, 0.86) 0%, rgba(18, 23, 27, 0.6) 46%, rgba(18, 23, 27, 0.12) 100%);
}
.cg-photo-band.is-centre::after {
  background: rgba(18, 23, 27, 0.6);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a big left title; Cargora's eyebrow is a shipping-label line - a short barcode, then the
   words in the mono */
.cg-title {
  margin-bottom: 56px;
}
.cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--cg-muted);
  font-family: var(--cg-ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cg-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 12px;
  background: linear-gradient(90deg, var(--cg-heading) 0 2px, transparent 2px 4px, var(--cg-heading) 4px 5px, transparent 5px 7px,
    var(--cg-heading) 7px 10px, transparent 10px 11px, var(--cg-heading) 11px 12px, transparent 12px 15px, var(--cg-yellow) 15px 18px,
    transparent 18px 19px, var(--cg-heading) 19px 20px, transparent 20px 22px);
}
.cg-title h2,
.cg-title .cg-h2 {
  max-width: 820px;
}
/* a title followed by copy keeps its distance */
h2.cg-words:not(:last-child),
h3.cg-words:not(:last-child) {
  margin-bottom: 20px;
}
.cg-title .cg-lead {
  max-width: 620px;
  margin: 22px 0 0;
}
.cg-title.text-center h2,
.cg-title.text-center .cg-h2,
.cg-title.text-center .cg-lead {
  margin-left: auto;
  margin-right: auto;
}
.cg-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.cg-title.is-split .cg-lead {
  max-width: 460px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's flat yellow button with its plus; house physics: the face turns ink, the plus turns a quarter, a small
   lift and shadow */
.cg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--cg-primary);
  color: var(--cg-on-primary);
  font-family: var(--cg-ff-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--cg-ease-2), color 0.35s var(--cg-ease-2), box-shadow 0.35s var(--cg-ease-2), transform 0.35s var(--cg-ease-2);
}
.cg-btn i {
  position: relative;
  font-size: 13px;
  transition: transform 0.45s var(--cg-ease-2);
}
.cg-btn:hover {
  background: var(--cg-ink);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(18, 23, 27, 0.2);
  transform: translateY(-2px);
}
.cg-btn:hover i.fa-plus {
  transform: rotate(90deg);
}
.cg-btn:hover i.fa-arrow-right {
  transform: translateX(5px);
}
[data-theme="dark"] .cg-btn:hover,
.is-night .cg-btn:hover,
.is-deep .cg-btn:hover,
.cg-photo-band .cg-btn:hover {
  background: #FFFFFF;
  color: var(--cg-ink);
}
.is-yellow .cg-btn:hover {
  background: #FFFFFF;
  color: var(--cg-ink);
}
.cg-btn.is-ink {
  background: var(--cg-ink);
  color: #FFFFFF;
}
.cg-btn.is-ink:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
[data-theme="dark"] .cg-btn.is-ink,
.is-night .cg-btn.is-ink {
  background: #FFFFFF;
  color: var(--cg-ink);
}
/* tonal: the panel grey face, ink text, the plus in the accent */
.cg-btn.is-tonal {
  background: var(--cg-band-2);
  color: var(--cg-heading);
}
.cg-btn.is-tonal i {
  color: var(--cg-accent-text);
}
.cg-btn.is-tonal:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.cg-btn.is-tonal:hover i {
  color: var(--cg-ink);
}
.is-night .cg-btn.is-tonal,
.is-deep .cg-btn.is-tonal,
.cg-photo-band .cg-btn.is-tonal {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.is-night .cg-btn.is-tonal i,
.is-deep .cg-btn.is-tonal i,
.cg-photo-band .cg-btn.is-tonal i {
  color: var(--cg-yellow);
}
.cg-btn.is-sm {
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
}
.cg-btn.is-block {
  width: 100%;
}
/* the base's signature link: a yellow disc with a plus, two short lines beside it */
.cg-more {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--cg-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}
.cg-more .disc {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-size: 13px;
  transition: transform 0.45s var(--cg-ease-2), background-color 0.3s ease, color 0.3s ease;
}
.cg-more .disc i {
  transition: transform 0.45s var(--cg-ease-2);
}
.cg-more > span:last-child {
  display: flex;
  flex-direction: column;
}
.cg-more small {
  color: var(--cg-muted);
  font-size: 13px;
  font-weight: 500;
}
.cg-more:hover {
  color: var(--cg-heading);
}
.cg-more:hover .disc {
  background: var(--cg-ink);
  color: var(--cg-yellow);
  transform: scale(1.08);
}
.cg-more:hover .disc i {
  transform: rotate(90deg);
}
[data-theme="dark"] .cg-more:hover .disc,
.is-night .cg-more:hover .disc,
.cg-photo-band .cg-more:hover .disc {
  background: #FFFFFF;
  color: var(--cg-ink);
}
.is-yellow .cg-more .disc {
  background: var(--cg-ink);
  color: var(--cg-yellow);
}
.is-yellow .cg-more:hover .disc {
  background: #FFFFFF;
  color: var(--cg-ink);
}
.cg-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cg-heading);
  font-size: 15px;
  font-weight: 700;
}
.cg-link i {
  color: var(--cg-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--cg-ease-2);
}
.cg-link:hover i {
  transform: translateX(5px);
}
.cg-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}

/*----- 1.5 Forms -----*/
.cg-field {
  position: relative;
  margin-bottom: 22px;
}
.cg-field label,
.cg-flabel {
  display: block;
  margin-bottom: 8px;
  color: var(--cg-muted);
  font-size: 14px;
  font-weight: 600;
}
/* tonal fields: a grey face with the base's underline, which turns yellow on focus */
.cg-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 18px;
  border: 0;
  border-bottom: 2px solid var(--cg-line-2);
  border-radius: 0;
  background: var(--cg-field);
  color: var(--cg-heading);
  font-family: var(--cg-ff-body);
  font-size: 17px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cg-bg-band .cg-input {
  background: var(--cg-surface);
}
textarea.cg-input {
  height: 160px;
  padding-top: 16px;
  resize: vertical;
}
.cg-input::placeholder {
  color: var(--cg-muted);
}
.cg-input:focus {
  border-bottom-color: var(--cg-yellow);
  outline: 0;
}
.cg-input.is-invalid {
  border-bottom-color: var(--cg-bad);
}
.cg-input[type="date"] {
  color-scheme: light;
}
[data-theme="dark"] .cg-input[type="date"],
.is-night .cg-input[type="date"] {
  color-scheme: dark;
}
.cg-field > i {
  position: absolute;
  right: 18px;
  top: 51px;
  color: var(--cg-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.cg-field.is-area > i {
  top: 54px;
}
.cg-field .cg-input.is-mono {
  font-family: var(--cg-ff-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--cg-muted);
}
.form-status.is-ok {
  color: var(--cg-ok);
}
.form-status.is-error {
  color: var(--cg-bad);
}
.cg-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  cursor: pointer;
}
.cg-check input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 4px;
  accent-color: var(--cg-ink);
}
[data-theme="dark"] .cg-check input {
  accent-color: var(--cg-yellow);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cg-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cg-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--cg-ease-2);
}
.cg-social a:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
  transform: translateY(-3px);
}
.is-night .cg-social a,
.is-deep .cg-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.cg-face {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
/* overlapping faces + a count */
.cg-faces {
  display: inline-flex;
  align-items: center;
}
.cg-faces img {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--cg-bg);
  border-radius: 50%;
  object-fit: cover;
}
.cg-faces img:first-child {
  margin-left: 0;
}
.cg-faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--cg-bg);
  border-radius: 50%;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-family: var(--cg-ff-mono);
  font-size: 11px;
  font-weight: 500;
}
.cg-bg-band .cg-faces img,
.cg-bg-band .cg-faces .more {
  border-color: var(--cg-band);
}
.is-night .cg-faces img,
.is-night .cg-faces .more,
.cg-photo-band .cg-faces img,
.cg-photo-band .cg-faces .more {
  border-color: var(--cg-ink);
}
.cg-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.cg-avatars .txt {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.35;
}
.cg-avatars .txt b {
  color: var(--cg-heading);
  font-size: 16px;
}
.cg-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-size: 20px;
  transition: transform 0.4s var(--cg-ease-2), background-color 0.4s ease, color 0.4s ease;
}
.cg-play i {
  margin-left: 4px;
}
.cg-play:hover {
  background: #FFFFFF;
  color: var(--cg-ink);
  transform: scale(1.06);
}
/* a progress line: filled by the engines */
.cg-meter {
  position: relative;
  height: 4px;
  background: var(--cg-line);
}
.cg-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--cg-yellow);
  transition: width 1.2s var(--cg-ease-2);
}
.cg-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--cg-yellow-d);
  font-size: 12px;
}
/* a small status label in the mono (On Time, In Transit, Closed) */
.cg-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cg-accent-text);
  font-family: var(--cg-ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cg-tag.is-ok {
  color: var(--cg-ok);
}
.cg-tag.is-bad {
  color: var(--cg-bad);
}
.cg-tag.is-muted {
  color: var(--cg-muted);
}
/* a status dot before "Open now" lines */
.cg-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--cg-muted);
  vertical-align: middle;
}
.is-open .cg-dot,
.cg-dot.is-open {
  background: #2FA866;
  box-shadow: 0 0 0 4px rgba(47, 168, 102, 0.18);
}
.cg-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--cg-ink);
  color: #FFFFFF;
  font-size: 16px;
  box-shadow: var(--cg-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--cg-ease-2);
}
.cg-toast i {
  color: var(--cg-yellow);
}
.cg-toast.is-shown {
  transform: translate(-50%, 0);
}
.cg-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--cg-ease-2), background-color 0.3s ease;
}
.cg-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cg-back-top:hover {
  background: var(--cg-ink);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.cg-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.cg-gl.is-on {
  opacity: 1;
}
/* illustrated icons in two inks: ink lines on light grounds, light lines in the dark theme and on dark bands */
.cg-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.cg-ico img {
  width: 100%;
  height: 100%;
}
.cg-ico .ico-night,
[data-theme="dark"] .cg-ico .ico-day,
.is-night .cg-ico .ico-day,
.is-deep .cg-ico .ico-day,
.cg-photo-band .cg-ico .ico-day {
  display: none;
}
[data-theme="dark"] .cg-ico .ico-night,
.is-night .cg-ico .ico-night,
.is-deep .cg-ico .ico-night,
.cg-photo-band .cg-ico .ico-night {
  display: block;
}
.is-yellow .cg-ico .ico-day,
.is-studio .cg-ico .ico-day,
.cg-stage .cg-ico .ico-day {
  display: block;
}
.is-yellow .cg-ico .ico-night,
.is-studio .cg-ico .ico-night,
.cg-stage .cg-ico .ico-night {
  display: none;
}
/* the line drawings (modes) in two inks */
.cg-art .art-night,
[data-theme="dark"] .cg-art .art-day {
  display: none;
}
[data-theme="dark"] .cg-art .art-night {
  display: block;
}
/* label / value rows (transit, cut-off, rates, hours, facts) */
.cg-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cg-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cg-line);
}
.cg-rows li > span {
  color: var(--cg-text);
}
.cg-rows li > b {
  color: var(--cg-heading);
  font-weight: 600;
  text-align: right;
}
.cg-rows li > b.cg-mono {
  font-size: 14px;
  font-weight: 500;
}
.cg-rows li.is-today > span,
.cg-rows li.is-today > b {
  color: var(--cg-heading);
  font-weight: 700;
}
.cg-rows li.is-today > span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--cg-yellow);
  vertical-align: 2px;
}

/*----- 1.7 Thermal Print & Barcode -----*/
/* Thermal Print: a photo prints downward in bands like a label printer - the print head travels its lower edge and a
   scan-line texture fades from what is already printed (main.js arms it) */
.cg-print {
  position: relative;
  overflow: hidden;
}
.cg-print .cg-head {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  z-index: 4;
  height: 10px;
  margin-top: -5px;
  background: linear-gradient(180deg, rgba(27, 27, 27, 0) 0, rgba(27, 27, 27, 0.9) 40%, var(--cg-yellow) 40%, var(--cg-yellow) 60%, rgba(27, 27, 27, 0.9) 60%, rgba(27, 27, 27, 0) 100%);
  box-shadow: 0 0 18px rgba(var(--cg-yellow-rgb), 0.55);
  pointer-events: none;
}
.cg-print .cg-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(0, 0, 0, 0.08) 1px 3px);
  pointer-events: none;
}
/* the hover accent: a barcode and its code slide in on the card's corner */
.cg-bc {
  position: relative;
}
.cg-bc::before,
.cg-bc::after {
  position: absolute;
  right: 18px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translateX(26px);
  transition: opacity 0.35s ease, transform 0.5s var(--cg-ease-2);
}
.cg-bc::before {
  content: "";
  top: 18px;
  width: 74px;
  height: 30px;
  padding: 5px 7px;
  background: #FFFFFF linear-gradient(90deg, #1B1B1B 0 2px, transparent 2px 3px, #1B1B1B 3px 4px, transparent 4px 7px, #1B1B1B 7px 10px,
    transparent 10px 11px, #1B1B1B 11px 12px, transparent 12px 14px, #1B1B1B 14px 15px, transparent 15px 18px, #1B1B1B 18px 21px,
    transparent 21px 22px, #1B1B1B 22px 23px, transparent 23px 25px, #1B1B1B 25px 27px, transparent 27px 29px, #1B1B1B 29px 30px,
    transparent 30px 33px, #1B1B1B 33px 36px, transparent 36px 37px, #1B1B1B 37px 38px, transparent 38px 40px, #1B1B1B 40px 42px,
    transparent 42px 45px, #1B1B1B 45px 46px, transparent 46px 47px, #1B1B1B 47px 50px, transparent 50px 52px, #1B1B1B 52px 53px,
    transparent 53px 55px, #1B1B1B 55px 57px, transparent 57px 58px, #1B1B1B 58px 60px) content-box no-repeat;
  box-shadow: 0 8px 20px rgba(18, 23, 27, 0.18);
}
.cg-bc::after {
  content: attr(data-code);
  top: 48px;
  min-width: 74px;
  padding: 2px 6px 3px;
  background: #FFFFFF;
  color: #1B1B1B;
  font-family: var(--cg-ff-mono);
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  transition-delay: 0.05s;
}
.cg-bc:hover::before,
.cg-bc:hover::after,
.cg-bc:focus-within::before,
.cg-bc:focus-within::after {
  opacity: 1;
  transform: none;
}

/*======================
2. Preloader
========================*/
/* Barcode Scan: a shipping label on the page's ground; a red scanner line passes over its barcode, the bars close up
   into Cargora's chevron and turn yellow, the mark lands on them, the wordmark slides out and the panel lifts.
   main.js plays it once a session; without JS it never shows. */
.cg-preloader {
  display: none;
}
.js .cg-preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cg-bg);
}
.pre-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pre-row {
  position: relative;
  display: flex;
  align-items: center;
}
.pre-word {
  position: relative;
  display: block;
  width: 0;
  overflow: hidden;
}
.pre-word img {
  display: block;
  width: 330px;
  max-width: none;
  height: auto;
  margin-right: 22px;
}
.pre-code {
  position: relative;
  width: 214px;
  height: 190px;
}
.pre-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
}
.pre-bars span {
  display: block;
  height: 100%;
  background: var(--cg-heading);
}
.pre-laser {
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: 0;
  z-index: 2;
  width: 3px;
  margin-left: -1px;
  background: #E5322D;
  box-shadow: 0 0 10px 2px rgba(229, 50, 45, 0.6), 0 0 34px 8px rgba(229, 50, 45, 0.25);
  opacity: 0;
}
.pre-mark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.pre-mark.is-light,
[data-theme="dark"] .pre-mark.is-ink,
[data-theme="dark"] .pre-word .is-ink {
  display: none;
}
[data-theme="dark"] .pre-mark.is-light,
[data-theme="dark"] .pre-word .is-light {
  display: block;
}
.pre-word .is-light {
  display: none;
}
.pre-num {
  color: var(--cg-muted);
  font-family: var(--cg-ff-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*======================
3. Header
========================*/
/* The base's header: the logo left, the menu, a hairline divider, "Track Your Order" with its flag, and the menu mark
   in a square at the right edge; the current item carries a yellow bar along the header's top edge. Four moods:
   "over" lies on a photo hero (white ink), "solid" is the white bar, "yellow" the Home 02 bar, "studio" sits on the
   Home 03 grey. All turn into the white bar once the page scrolls. */
.cg-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--cg-surface);
  --hd-ink: var(--cg-heading);
  --hd-hover: var(--cg-heading);
  --hd-line: var(--cg-line);
  --hd-square: var(--cg-ink);
  --hd-square-ink: #FFFFFF;
}
.cg-header .wide {
  display: flex;
  align-items: center;
  padding: 0 0 0 40px;
}
.cg-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.cg-logo img {
  height: 38px;
  width: auto;
}
.cg-logo .logo-light,
[data-theme="dark"] .cg-logo .logo-main {
  display: none;
}
[data-theme="dark"] .cg-logo .logo-light {
  display: block;
}
/* over a photo hero the logo is always the light one */
.header-style-over:not(.is-sticky) .cg-logo .logo-main {
  display: none;
}
.header-style-over:not(.is-sticky) .cg-logo .logo-light {
  display: block;
}
/* on the yellow and studio bars it stays ink in both themes */
.header-style-yellow:not(.is-sticky) .cg-logo .logo-main,
.header-style-studio:not(.is-sticky) .cg-logo .logo-main {
  display: block;
}
.header-style-yellow:not(.is-sticky) .cg-logo .logo-light,
.header-style-studio:not(.is-sticky) .cg-logo .logo-light {
  display: none;
}
.header-style-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-style-over:not(.is-sticky) {
  --hd-bar: transparent;
  --hd-ink: #FFFFFF;
  --hd-hover: #FFFFFF;
  --hd-line: rgba(255, 255, 255, 0.24);
  --hd-square: transparent;
  --hd-square-ink: #FFFFFF;
}
.header-style-yellow:not(.is-sticky) {
  --hd-bar: var(--cg-yellow);
  --hd-ink: #1B1B1B;
  --hd-hover: #1B1B1B;
  --hd-line: rgba(27, 27, 27, 0.24);
  --hd-square: #1B1B1B;
  --hd-square-ink: #FFFFFF;
}
.header-style-studio {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-style-studio:not(.is-sticky) {
  --hd-bar: transparent;
  --hd-ink: #1B1B1B;
  --hd-hover: #1B1B1B;
  --hd-line: rgba(27, 27, 27, 0.16);
  --hd-square: #1B1B1B;
  --hd-square-ink: #FFFFFF;
}
[data-theme="dark"] .header-style-studio:not(.is-sticky) {
  --hd-ink: #F2F2F0;
  --hd-hover: #F2F2F0;
  --hd-line: rgba(242, 242, 240, 0.14);
  --hd-square: #F7C600;
  --hd-square-ink: #1B1B1B;
}
[data-theme="dark"] .header-style-studio:not(.is-sticky) .cg-logo .logo-main {
  display: none;
}
[data-theme="dark"] .header-style-studio:not(.is-sticky) .cg-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 38px;
  background: var(--cg-ink);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  overflow: visible;
  transition: height 0.4s var(--cg-ease-2), opacity 0.3s ease;
}
.header-style-over:not(.is-sticky) .header-top {
  background: rgba(18, 23, 27, 0.34);
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
  padding-right: 40px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-top a:hover {
  color: var(--cg-yellow);
}
.header-top i {
  margin-right: 8px;
  color: var(--cg-yellow);
  font-size: 12px;
}
.cg-open {
  display: inline-flex;
  align-items: center;
}
.header-top .cg-dot {
  background: rgba(255, 255, 255, 0.5);
}
.header-top .is-open .cg-dot {
  background: #5CC489;
  box-shadow: 0 0 0 4px rgba(92, 196, 137, 0.2);
}
.top-clock {
  font-family: var(--cg-ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 88px;
  gap: 40px;
}
.cg-nav {
  margin-left: auto;
}
.header-right {
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px 0 30px;
  border-left: 1px solid var(--hd-line);
}
.header-track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 14px;
  color: var(--hd-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.header-track i {
  font-size: 14px;
}
.header-track:hover {
  color: var(--hd-ink);
  opacity: 0.75;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.header-style-yellow:not(.is-sticky) .header-icon:hover {
  background: #1B1B1B;
  color: var(--cg-yellow);
}
.cg-theme-toggle .ti-sun,
[data-theme="dark"] .cg-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .cg-theme-toggle .ti-sun {
  display: inline-block;
}
/* the base's menu mark: three lines in a square at the right edge */
.cg-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 88px;
  height: auto;
  border: 0;
  border-left: 1px solid var(--hd-line);
  background: var(--hd-square);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cg-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--hd-square-ink);
  transition: width 0.3s var(--cg-ease-2), transform 0.3s var(--cg-ease-2);
}
.cg-menu-toggle span:nth-child(2) {
  width: 16px;
  transform: translateX(4px);
}
.cg-menu-toggle:hover {
  background: var(--cg-yellow);
}
.cg-menu-toggle:hover span {
  width: 24px;
  transform: none;
  background: var(--cg-ink);
}

/*----- 3.3 Main Menu -----*/
.cg-nav > ul {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cg-nav li {
  position: relative;
}
.cg-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 34px 0;
  color: var(--hd-ink);
  font-size: 15.5px;
  font-weight: 600;
}
/* the current item: a yellow bar along the header's top edge, the width of the item */
.cg-nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  height: 3px;
  background: var(--cg-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--cg-ease-2);
}
.header-style-yellow:not(.is-sticky) .cg-nav > ul > li > a::before {
  background: #1B1B1B;
}
.cg-nav > ul > li:hover > a::before,
.cg-nav > ul > li.active > a::before {
  transform: scaleX(1);
}
.cg-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--cg-ease-2);
}
.cg-nav > ul > li:hover > a,
.cg-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.cg-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.cg-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -26px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--cg-surface);
  box-shadow: var(--cg-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--cg-ease-2), transform 0.35s var(--cg-ease-2), visibility 0.3s;
}
.cg-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--cg-yellow);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.cg-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.cg-nav li:hover > .sub-menu,
.cg-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cg-nav .sub-menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 26px;
  color: var(--cg-heading);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.3s var(--cg-ease-2), padding 0.35s var(--cg-ease-2);
}
.cg-nav .sub-menu a::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--cg-yellow);
  transition: width 0.35s var(--cg-ease-2);
}
.cg-nav .sub-menu a i {
  font-size: 9px;
  color: var(--cg-muted);
}
.cg-nav .sub-menu li:hover > a,
.cg-nav .sub-menu li.active > a {
  padding-left: 46px;
  color: var(--cg-heading);
}
.cg-nav .sub-menu li:hover > a::before,
.cg-nav .sub-menu li.active > a::before {
  width: 12px;
}
.cg-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.cg-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.cg-nav .has-mega {
  position: static;
}
.cg-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  background: var(--cg-surface);
  box-shadow: var(--cg-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--cg-ease-2), transform 0.35s var(--cg-ease-2), visibility 0.3s;
}
.cg-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.cg-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--cg-yellow);
}
.cg-nav .has-mega:hover > .mega-menu,
.cg-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--cg-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--cg-band);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--cg-ease-2);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--cg-muted);
  font-family: var(--cg-ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mega-meta b {
  font-size: 17px;
  font-weight: 700;
}
.mega-card.is-current b,
.mega-card:hover b {
  box-shadow: inset 0 -3px 0 var(--cg-yellow);
}

/*----- 3.5 Sticky Header -----*/
.cg-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: cg-header-in 0.6s var(--cg-ease-2) both;
}
.cg-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.cg-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(18, 23, 27, 0.12);
}
.cg-header.is-sticky .header-main .wide {
  height: 74px;
}
.cg-header.is-sticky .cg-nav > ul > li > a {
  padding: 27px 0;
}
.cg-header.is-sticky .cg-menu-toggle {
  width: 74px;
}
.cg-header-spacer {
  display: none;
}
.cg-header-spacer.is-on {
  display: block;
}
@keyframes cg-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.cg-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--cg-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--cg-ease-2), box-shadow 0.6s var(--cg-ease-2);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.cg-offcanvas.open {
  box-shadow: var(--cg-shadow-lg);
  transform: none;
}
.cg-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(18, 23, 27, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.cg-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--cg-line);
}
.offcanvas-head .cg-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--cg-ease-2);
}
.offcanvas-close:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--cg-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--cg-heading);
  font-family: var(--cg-ff-body);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--cg-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--cg-ease-2);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--cg-line);
  color: var(--cg-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--cg-yellow);
  color: var(--cg-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--cg-ff-mono);
  font-size: 20px;
}
.oc-mail {
  color: var(--cg-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.cg-select {
  position: relative;
}
.cg-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.cg-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid var(--cg-line-2);
  border-radius: 0;
  background: var(--cg-field);
  font-family: var(--cg-ff-body);
  font-size: 17px;
  text-align: left;
  color: var(--cg-heading);
  transition: border-color 0.3s var(--cg-ease-2);
}
.cg-select.is-open .select-button,
.cg-select .select-button:hover {
  border-bottom-color: var(--cg-yellow);
}
.cg-bg-band .cg-select .select-button,
.quick-quote .cg-select .select-button {
  background: var(--cg-surface);
}
.cg-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cg-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--cg-accent-text);
  transition: transform 0.35s var(--cg-ease-2);
}
.cg-select.is-open .select-button i {
  transform: rotate(180deg);
}
.cg-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--cg-surface);
  border-top: 2px solid var(--cg-yellow);
  box-shadow: var(--cg-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--cg-ease-2), transform 0.3s var(--cg-ease-2), visibility 0.3s;
}
.cg-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--cg-yellow);
  transform: translateY(-10px);
}
.cg-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cg-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--cg-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--cg-ease-2), color 0.2s var(--cg-ease-2);
}
.cg-select .select-option .option-meta {
  font-family: var(--cg-ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
.cg-select .select-option .option-meta.is-none {
  color: var(--cg-muted);
}
.cg-select .select-option.is-focused,
.cg-select .select-option:hover {
  background-color: var(--cg-band-2);
}
.cg-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.cg-select .select-option.is-selected {
  color: var(--cg-accent-text);
}
.cg-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--cg-accent-text);
}
.cg-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--cg-band-2);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.cg-lang {
  position: relative;
  flex-shrink: 0;
}
.cg-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--cg-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cg-lang .lang-btn:hover,
.cg-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--cg-ink);
}
.cg-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.cg-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.cg-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cg-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
}
.cg-lang.is-icon .lang-btn:hover,
.cg-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--cg-ink);
  color: #FFFFFF;
}
.cg-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--cg-surface);
  box-shadow: var(--cg-shadow-lg);
  font-family: var(--cg-ff-body);
  text-align: start;
  white-space: normal;
}
.cg-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.cg-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.cg-lang .lang-menu[hidden] {
  display: none;
}
.cg-lang .lang-group {
  margin: 6px 10px;
  font-family: var(--cg-ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cg-muted);
}
.cg-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cg-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cg-line);
}
.cg-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cg-heading);
  font-family: var(--cg-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.cg-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cg-muted);
}
.cg-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--cg-accent-text);
  opacity: 0;
}
.cg-lang .lang-item:hover,
.cg-lang .lang-item[aria-pressed="true"] {
  background: var(--cg-band-2);
}
.cg-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.cg-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.cg-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--cg-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cg-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Hero Slider -----*/
/* the base's main hero: a full-bleed photograph, white copy, thin chevrons at the edges and the mode row along the
   foot whose bars run with the slide */
.cg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cg-deep);
}
.cg-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 900px;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-one .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(18, 23, 27, 0.72) 0%, rgba(18, 23, 27, 0.42) 48%, rgba(18, 23, 27, 0.05) 80%),
    linear-gradient(0deg, rgba(18, 23, 27, 0.55) 0%, rgba(18, 23, 27, 0) 30%);
}
.hero-copy {
  position: relative;
  max-width: 760px;
  padding: 120px 0 170px;
  --cg-heading: #FFFFFF;
  --cg-text: rgba(255, 255, 255, 0.88);
  --cg-muted: rgba(255, 255, 255, 0.78);
  color: var(--cg-text);
}
.hero-copy .cg-eyebrow::before {
  background: linear-gradient(90deg, #FFFFFF 0 2px, transparent 2px 4px, #FFFFFF 4px 5px, transparent 5px 7px, #FFFFFF 7px 10px,
    transparent 10px 11px, #FFFFFF 11px 12px, transparent 12px 15px, var(--cg-yellow) 15px 18px, transparent 18px 19px, #FFFFFF 19px 20px, transparent 20px 22px);
}
.hero-copy h1,
.hero-copy .cg-h1 {
  margin-bottom: 24px;
}
.hero-copy .cg-lead {
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-copy .cg-more {
  color: #FFFFFF;
}
.hero-copy .cg-more small {
  color: rgba(255, 255, 255, 0.72);
}
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  color: #FFFFFF;
  font-size: 30px;
  transition: color 0.3s ease, transform 0.4s var(--cg-ease-2);
}
/* both arrows stack on the photo side, clear of the copy column at every width */
.hero-prev {
  right: 26px;
  margin-top: -68px;
}
.hero-next {
  right: 26px;
  margin-top: 4px;
}
.hero-arrow:hover {
  color: var(--cg-yellow);
}
.hero-prev:hover {
  transform: translateX(-4px);
}
.hero-next:hover {
  transform: translateX(4px);
}
.hero-modes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 5;
}
.hero-modes ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.hero-modes button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  transition: color 0.3s ease;
}
.hero-modes button i {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: var(--cg-yellow);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-modes li.is-active button {
  color: #FFFFFF;
}
.hero-modes button:hover {
  color: #FFFFFF;
}
.hero-modes li.is-done button i {
  transform: scaleX(1);
}

/*----- 7.2 Split & Hairlines -----*/
/* the base's copy column: a vertical hairline at its side, a horizontal one above its disc link */
.split-copy {
  position: relative;
  padding: 40px 54px 0 0;
  border-right: 1px solid var(--cg-line-2);
}
.split-copy h2 {
  margin-bottom: 22px;
}
.split-copy .cg-rows {
  margin-top: 10px;
}
.split-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 30px;
  margin: 30px -54px 0 0;
  padding: 30px 54px 40px 0;
  border-top: 1px solid var(--cg-line-2);
}
.split-media {
  position: relative;
  overflow: hidden;
}
.split-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.8s var(--cg-ease-2);
}
.split-media:hover img {
  transform: scale(1.03);
}
.split-copy.is-right {
  padding: 40px 0 0 54px;
  border-right: 0;
  border-left: 1px solid var(--cg-line-2);
}
.split-copy.is-right .split-foot {
  margin: 30px 0 0 -54px;
  padding: 30px 0 40px 54px;
}

/*----- 7.3 Tabs -----*/
/* the base's tab row: labels on a hairline, the active one barred in yellow across its cell */
.tab-row {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--cg-line-2);
}
.tab-row button {
  position: relative;
  padding: 0 0 22px;
  color: var(--cg-heading);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.tab-row button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--cg-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--cg-ease-2);
}
.tab-row button.is-active::after,
.tab-row button:hover::after {
  transform: scaleX(1);
}
.tab-row button:hover::after {
  background: var(--cg-line-2);
}
.tab-row button.is-active:hover::after {
  background: var(--cg-yellow);
}
.mt-panel[hidden] {
  display: none;
}
.mt-art img {
  display: block;
  width: 100%;
  height: auto;
}
.mt-copy {
  max-width: 470px;
  margin-left: auto;
}
.mt-copy h3 {
  margin-bottom: 20px;
}
.mt-copy .cg-rows {
  margin: 8px 0 0;
}
.mt-foot {
  margin-top: 30px;
}

/*----- 7.4 Mode Icons -----*/
.mode-icon .cg-ico {
  margin-bottom: 26px;
}
.mode-icon h3 {
  margin-bottom: 12px;
}
.mode-icon p {
  margin-bottom: 14px;
  font-size: 16px;
}
.mi-from {
  color: var(--cg-heading);
  font-size: 12px;
}

/*----- 7.5 Voices -----*/
.cg-quote-glyph {
  display: block;
  margin-bottom: 26px;
  color: transparent;
  font-size: 64px;
  line-height: 1;
  -webkit-text-stroke: 1.5px #FFFFFF;
}
.cg-quote {
  margin: 0;
}
.cg-quote p {
  margin-bottom: 36px;
  color: var(--cg-heading);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.cg-quote footer {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cg-quote footer span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.cg-quote footer small {
  color: var(--cg-muted);
  font-size: 13px;
}
.cg-quote footer b {
  color: var(--cg-heading);
  font-size: 18px;
}
.slider-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
}
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.slider-arrow:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.cg-photo-band .slider-arrow,
.is-night .slider-arrow,
.is-deep .slider-arrow {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.cg-photo-band .slider-arrow:hover,
.is-night .slider-arrow:hover,
.is-deep .slider-arrow:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cg-review {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 18px;
  color: var(--cg-heading);
}
.cg-review .fa-google {
  font-size: 20px;
}
.rv-score {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.rv-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.rv-txt small {
  color: var(--cg-muted);
  font-size: 13px;
}
.cg-review.is-light .cg-stars {
  color: var(--cg-yellow);
}

/*----- 7.6 People -----*/
/* the base's team row: a round face, the role small above the name */
.team-mini {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--cg-heading);
}
.team-mini img {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.5s var(--cg-ease-2);
}
.team-mini span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.team-mini small {
  margin-bottom: 4px;
  color: var(--cg-muted);
  font-size: 13px;
}
.team-mini b {
  font-size: 18px;
}
.team-mini:hover {
  color: var(--cg-heading);
}
.team-mini:hover img {
  transform: scale(1.05);
}
.team-card {
  display: flex;
  gap: 24px;
  height: 100%;
  padding: 30px;
  background: var(--cg-band-2);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.cg-bg-band .team-card {
  background: var(--cg-surface);
}
.team-card:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.tc-face {
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
}
.tc-body {
  flex: 1;
  min-width: 0;
}
.tc-body h3 {
  margin: 6px 0 10px;
}
.tc-body .cg-rows li {
  padding: 8px 0;
  font-size: 15px;
}
.tc-social {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.tc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cg-surface);
  color: var(--cg-heading);
  font-size: 13px;
}
.tc-social a:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}

/*----- 7.7 Posts -----*/
/* the base's post card: the photo, then the big day number beside a hairline, the category and the title */
.post-card {
  height: 100%;
  transition: transform 0.45s var(--cg-ease-2);
}
.post-card:hover {
  transform: translateY(-6px);
}
.pcd-img {
  display: block;
  overflow: hidden;
}
.pcd-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s var(--cg-ease-2);
}
.post-card:hover .pcd-img img {
  transform: scale(1.04);
}
.pcd-body {
  display: flex;
  gap: 22px;
  padding-top: 26px;
}
.pcd-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  width: 54px;
  padding-right: 18px;
  border-right: 1px solid var(--cg-line-2);
  color: var(--cg-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.pcd-date b {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pcd-copy {
  min-width: 0;
}
.pcd-cat {
  display: block;
  margin-bottom: 6px;
  color: var(--cg-muted);
  font-size: 13px;
}
.pcd-copy h3 {
  margin-bottom: 12px;
}
.pcd-copy p {
  margin-bottom: 20px;
  font-size: 16px;
}
.post-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--cg-line-2);
}
.post-row:first-child {
  padding-top: 0;
}
.pr-img {
  display: block;
  overflow: hidden;
}
.pr-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pr-body {
  display: flex;
  gap: 26px;
  padding-left: 40px;
  border-left: 1px solid var(--cg-line-2);
}
.pr-body h3 {
  margin-bottom: 10px;
}
.pr-body p {
  font-size: 16px;
}

/*----- 7.8 Departures & Offices -----*/
/* label rows with a live clock: the next departure on each lane, an office's local time */
.dep-panel {
  position: relative;
  z-index: 3;
  padding: 34px 36px 30px;
  background: var(--cg-surface);
  box-shadow: var(--cg-shadow);
}
.dp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cg-heading);
}
.dep-list {
  margin-bottom: 22px;
}
.dep-row {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 0.7fr;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cg-line);
}
.dep-lane,
.dep-when {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.dep-lane b,
.dep-when b {
  color: var(--cg-heading);
  font-size: 15.5px;
  font-weight: 600;
}
.dep-lane small,
.dep-when small {
  color: var(--cg-muted);
  font-size: 13px;
}
.dep-lane small.cg-mono {
  font-size: 11px;
}
.dep-left {
  justify-self: end;
  padding: 5px 9px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 11px;
  white-space: nowrap;
}
.dep-left.is-soon {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.dep-left.is-closed {
  background: transparent;
  color: var(--cg-muted);
}
.office-row {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1.4fr;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cg-line);
}
.or-city {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.or-city b {
  color: var(--cg-heading);
  font-size: 16px;
  font-weight: 600;
}
.or-city small {
  color: var(--cg-muted);
  font-size: 13px;
}
.or-time {
  color: var(--cg-heading);
  font-size: 15px;
}
.office-row .cg-open {
  justify-self: end;
  font-size: 14px;
}

/*----- 7.9 Quick Quote -----*/
.quick-quote {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.8fr 0.8fr 1.3fr;
  align-items: end;
  gap: 18px;
  margin-top: 60px;
  padding: 30px;
  background: var(--cg-band-2);
}
.cg-bg-band .quick-quote {
  background: var(--cg-surface);
}
.qq-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--cg-muted);
  font-size: 14px;
  font-weight: 600;
}
.qq-result {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
  padding: 10px 0 10px 24px;
  border-left: 1px solid var(--cg-line-2);
}
.qq-price {
  color: var(--cg-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}
.qq-meta {
  margin: 4px 0 8px;
  color: var(--cg-muted);
  font-size: 14px;
  line-height: 1.4;
}
.statement {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(28px, 2.6vw, 40px);
  text-align: center;
}

/*----- 7.10 Accordion -----*/
/* the base's two-column accordion table: service, a short line, the yellow disc that turns to minus */
.acc-table-head {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr 46px;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cg-line-2);
  color: var(--cg-muted);
  font-size: 13px;
}
.acc-item {
  border-bottom: 1px solid var(--cg-line-2);
}
.acc-title {
  margin: 0;
  font-size: inherit;
}
.acc-head {
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  color: var(--cg-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
.acc-head.is-cols {
  grid-template-columns: 0.9fr 1.6fr 46px;
}
.acc-head .acc-line {
  color: var(--cg-text);
  font-size: 16px;
  font-weight: 400;
}
.acc-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  justify-self: end;
  border-radius: 50%;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-size: 12px;
  transition: transform 0.4s var(--cg-ease-2), background-color 0.3s ease;
}
.acc-item.is-open .acc-disc {
  transform: rotate(135deg);
}
.acc-head:hover .acc-disc {
  background: var(--cg-ink);
  color: var(--cg-yellow);
}
[data-theme="dark"] .acc-head:hover .acc-disc {
  background: #FFFFFF;
  color: var(--cg-ink);
}
.acc-body {
  padding: 0 70px 24px 0;
}
.acc-body.is-cols {
  padding-left: calc(36% + 10px);
}
.acc-body[hidden] {
  display: none;
}

/*----- 7.11 Client Strip & Crumbs -----*/
.client-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-strip li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 20px;
  border-right: 1px solid var(--cg-line);
}
.client-strip li:last-child {
  border-right: 0;
}
.client-strip img {
  max-width: 150px;
  max-height: 36px;
  width: auto;
  opacity: 0.72;
  transition: opacity 0.3s ease, transform 0.4s var(--cg-ease-2);
}
.client-strip li:hover img {
  opacity: 1;
  transform: translateY(-3px);
}
.cg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--cg-muted);
  font-size: 14px;
}
.cg-crumbs i {
  font-size: 8px;
}
.cg-crumbs a:hover {
  color: var(--cg-heading);
}
.cg-crumbs span {
  color: var(--cg-heading);
}

/*======================
8. Home One
========================*/
/*----- 8.1 Take-Off -----*/
/* Home 01's scroll moment: an air band with a runway along its foot; as the section passes, the freighter rolls down
   the runway, rotates, lifts, tucks its gear and climbs out through the right edge (main.js scrubs it on the
   section's own travel; never pinned) */
.cg-takeoff {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 330px;
}
.to-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #E4E9ED 0%, #EEF1F3 55%, #F7F8F9 100%);
}
[data-theme="dark"] .to-sky {
  background: linear-gradient(180deg, #0C0F12 0%, #13171B 60%, #191D21 100%);
}
.to-copy h2 {
  margin-bottom: 20px;
}
.to-copy .cg-lead {
  margin-bottom: 34px;
}
.to-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 330px;
  pointer-events: none;
}
.to-runway {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background:
    linear-gradient(90deg, #FFFFFF 0 70px, transparent 70px 130px) 0 46px / 130px 4px repeat-x,
    linear-gradient(180deg, #FFFFFF 0 3px, transparent 3px) 0 8px / 100% 3px no-repeat,
    linear-gradient(180deg, #FFFFFF 0 3px, transparent 3px) 0 85px / 100% 3px no-repeat,
    #2B3036;
}
.to-lights {
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
  background: radial-gradient(circle at 3px 3px, #FFE58A 0 2.5px, transparent 3px) 0 0 / 60px 6px repeat-x;
}
/*rtl:ignore*/
.to-plane {
  position: absolute;
  left: 0;
  bottom: 92px;
  width: 640px;
  transform-origin: 54% 96%;
  will-change: transform;
}
.to-plane img {
  display: block;
  width: 100%;
  height: auto;
}
/*rtl:ignore*/
.to-plane .to-gear {
  position: absolute;
  inset: 0;
  transform-origin: 50% 64%;
}
/*rtl:ignore*/
.to-shadow {
  position: absolute;
  left: 20%;
  right: 22%;
  bottom: -10px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 70%);
}

/*----- 8.2 Fastest Band -----*/
.cg-fastest {
  display: flex;
  align-items: center;
  min-height: 680px;
  padding: 120px 0;
}
.cg-fastest .band-img {
  object-position: center 60%;
}
.fastest-copy h2 {
  margin-bottom: 20px;
}

/*======================
9. Home Two
========================*/
/*----- 9.1 Yellow Hero -----*/
/* the base's cargo home: the yellow ground, the container render at the right, the pager under a hairline */
.hero-two {
  background: var(--cg-yellow);
}
.hero-two .swiper-slide {
  min-height: 760px;
  align-items: flex-start;
}
.hero-two .hero-img {
  left: 42%;
  right: 0;
  width: auto;
  object-fit: cover;
}
.hero-stage-copy {
  position: relative;
  max-width: 520px;
  padding: 120px 0 170px;
}
.hero-stage-copy h1,
.hero-stage-copy .cg-h1 {
  margin-bottom: 22px;
  font-size: clamp(40px, 4vw, 60px);
}
.hero-stage-copy .cg-lead {
  margin-bottom: 34px;
}
.hero-pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 5;
}
.hp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 70px;
  border-top: 1px solid rgba(27, 27, 27, 0.4);
}
.hp-row .hero-prev,
.hp-row .hero-next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  color: #1B1B1B;
  font-size: 15px;
  font-weight: 700;
}
.hp-row .hero-prev i,
.hp-row .hero-next i {
  font-size: 18px;
  transition: transform 0.35s var(--cg-ease-2);
}
.hp-row .hero-prev:hover i {
  transform: translateX(-4px);
}
.hp-row .hero-next:hover i {
  transform: translateX(4px);
}
.hp-nums {
  display: flex;
}
.hp-nums button {
  position: relative;
  min-width: 80px;
  padding: 18px 0;
  color: #1B1B1B;
  font-family: var(--cg-ff-mono);
  font-size: 13px;
}
.hp-nums button.is-active {
  border-left: 1px solid rgba(27, 27, 27, 0.4);
  border-right: 1px solid rgba(27, 27, 27, 0.4);
}
.hp-nums button.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 3px;
  background: #1B1B1B;
}

/*----- 9.2 Track Bar -----*/
/* the base's maritime home bar: an ink box with the call centre and the location, a yellow box with the tracking
   field and an ink button; it overlaps the hero's foot */
.cg-trackbar {
  position: relative;
  z-index: 6;
  margin-top: -1px;
  background: linear-gradient(180deg, var(--cg-yellow) 0 50%, var(--cg-band) 50% 100%);
}
.tb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tb-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 34px 40px;
}
.tb-item {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.5;
}
.tb-head {
  margin-bottom: 8px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
}
.tb-head i {
  margin-right: 8px;
  color: var(--cg-yellow);
}
.tb-item a:hover {
  color: var(--cg-yellow);
}
.tb-form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 40px;
  background: var(--cg-yellow);
}
.tb-form .cg-input {
  flex: 1;
  background: transparent;
  border-bottom-color: rgba(27, 27, 27, 0.5);
  color: #1B1B1B;
}
.tb-form .cg-input::placeholder {
  color: #574800;
}
.tb-form .cg-input:focus {
  border-bottom-color: #1B1B1B;
}

/*----- 9.3 Storage & Solutions -----*/
.storage-cut {
  display: block;
}
.storage-cut img {
  display: block;
  width: 100%;
  height: auto;
}
.storage-copy h2 {
  margin-bottom: 30px;
}
.storage-copy h3 {
  margin-bottom: 12px;
}
.storage-copy .split-foot {
  margin-right: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.solutions {
  padding: 34px 36px;
  background: var(--cg-band-2);
}
.solutions h3 {
  margin-bottom: 16px;
}
.solutions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  color: var(--cg-text);
  font-size: 16px;
}
.solutions a i {
  font-size: 11px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.35s var(--cg-ease-2);
}
.solutions a:hover {
  color: var(--cg-heading);
}
.solutions a:hover i {
  opacity: 1;
  transform: none;
}

/*----- 9.4 Tiles & Figures -----*/
.tiles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tile {
  position: relative;
  display: block;
  min-height: 440px;
  overflow: hidden;
  color: #FFFFFF;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--cg-ease-2);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 23, 27, 0.6), rgba(18, 23, 27, 0.05) 60%);
}
.tile-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-50%);
}
.tile-copy small {
  font-size: 14px;
}
.tile-copy b {
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.15;
}
.tile:hover {
  color: #FFFFFF;
}
.tile:hover img {
  transform: scale(1.04);
}
.cg-figures {
  padding: 90px 0;
}
.fig-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.fig-row li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 22px;
  border-left: 1px solid rgba(27, 27, 27, 0.5);
}
.fig-row span {
  color: #1B1B1B;
  font-size: 14px;
  font-weight: 500;
}
.fig-row b {
  color: #1B1B1B;
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/*----- 9.5 Voices On Tarpaulin -----*/
.big-rating h2 {
  margin-bottom: 26px;
}
.cg-review.is-big {
  margin: 0 0 34px;
}
.cg-review.is-big .rv-score {
  font-size: 72px;
}
.cg-review.is-big .fa-google {
  font-size: 30px;
}

/*----- 9.6 Box Sizes -----*/
/* Home 02's scroll moment: a EUR pallet, a 20' and a 40' drawn to one scale (100 px a metre at full size); the stage
   starts close on the pallet and draws back until the two boxes stand beside it, a metre ruler under them (main.js
   sets the scale and scrubs it on the section's own travel, one way) */
.bx-stage {
  position: relative;
  height: 420px;
  overflow: hidden;
}
/*rtl:ignore*/
.bx-scene {
  --m: 50;
  --inv: 1;
  position: absolute;
  left: 0;
  bottom: 96px;
  width: calc(var(--m) * 21.85px);
  height: calc(var(--m) * 2.6px);
  transform-origin: 0 100%;
}
.bx-item {
  position: absolute;
  bottom: 0;
}
.bx-item img {
  display: block;
  width: 100%;
  height: auto;
}
/*rtl:ignore*/
.bx-item.is-pallet {
  left: 0;
  width: calc(var(--m) * 1.2px);
}
/*rtl:ignore*/
.bx-item.is-20 {
  left: calc(var(--m) * 2.4px);
  width: calc(var(--m) * 6.058px);
}
/*rtl:ignore*/
.bx-item.is-40 {
  left: calc(var(--m) * 9.66px);
  width: calc(var(--m) * 12.192px);
}
/*rtl:ignore*/
.bx-label {
  position: absolute;
  left: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  color: var(--cg-text);
  font-family: var(--cg-ff-mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  transform: scale(var(--inv));
  transform-origin: 0 0;
}
/*rtl:ignore*/
.bx-item.is-pallet .bx-label {
  top: auto;
  bottom: 100%;
  margin: 0 0 14px;
  transform-origin: 0 100%;
}
.bx-label small {
  font-size: inherit;
}
.bx-label b {
  color: var(--cg-heading);
  font-family: var(--cg-ff-body);
  font-size: 16px;
}
.bx-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 94px;
  height: 2px;
  background: var(--cg-heading);
}
.bx-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 34px 0 120px;
  border-top: 1px solid var(--cg-line-2);
}
.bx-facts li {
  display: flex;
  flex-direction: column;
  font-size: 15px;
}
.bx-facts b {
  color: var(--cg-heading);
  font-size: 20px;
}

/*----- 9.7 Global & Pros -----*/
.pros {
  margin-top: 110px;
}
.pros h3 {
  margin-bottom: 44px;
}
.cg-video {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  overflow: hidden;
}
.cg-video .band-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-video .container {
  display: flex;
  justify-content: center;
}

/*----- 9.8 Fleet -----*/
/* the base's dark fleet band with the container on its crane hook, which sways a little; the partner strip below */
.cg-fleet {
  overflow: hidden;
}
.fleet-copy h2 {
  margin-bottom: 30px;
}
.fcl-quote .fq-fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.fcl-quote .qq-field label {
  color: var(--cg-muted);
}
.fq-out {
  margin: 14px 0 30px;
}
.fleet-hang {
  position: relative;
  margin: -40px 0 0;
  transform-origin: 52% 0;
  animation: cg-sway 6s ease-in-out infinite;
}
.fleet-hang img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
@keyframes cg-sway {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}
.cg-fleet .client-strip {
  margin-top: 110px;
  border-top: 1px solid var(--cg-line);
}

/*----- 9.9 Operating & Support -----*/
.office-list {
  margin-top: 26px;
}
.support-panel {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  padding: 40px 44px;
  background: var(--cg-band-2);
}
.cg-bg-band .support-panel {
  background: var(--cg-surface);
}
.sp-main,
.sp-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.sp-phone {
  margin-bottom: 18px;
  color: var(--cg-heading);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
}
.sp-mail {
  color: var(--cg-heading);
  font-size: 18px;
  font-weight: 600;
}
.sp-side b {
  margin-bottom: 12px;
  color: var(--cg-heading);
  font-size: 18px;
}

/*======================
10. Home Three
========================*/
/*----- 10.1 Studio Hero -----*/
/* the base's rail home: the whole page on the studio grey its rolling stock was shot on, the cut-outs standing on it;
   in the dark theme the page goes dark and each cut-out keeps its grey plate */
body.is-studio-page {
  background: var(--cg-studio);
}
[data-theme="dark"] body.is-studio-page {
  background: var(--cg-bg);
}
[data-theme="dark"] .is-studio {
  --cg-heading: #F2F2F0;
  --cg-heading-rgb: 242, 242, 240;
  --cg-text: #B9BDC1;
  --cg-muted: #A3A8AD;
  --cg-line: rgba(242, 242, 240, 0.12);
  --cg-line-2: rgba(242, 242, 240, 0.26);
  --cg-accent-text: #F7C600;
  --cg-surface: #1A1D20;
  --cg-band-2: #1F2327;
  --cg-field: #1F2327;
  background-color: var(--cg-bg);
  color: var(--cg-text);
}
.hero-three {
  background: var(--cg-studio);
}
[data-theme="dark"] .hero-three {
  background: var(--cg-bg);
}
.hero-three .swiper-slide {
  min-height: 820px;
  padding-top: 110px;
}
.hero-three .hero-stage-copy {
  padding: 60px 0 120px;
}
.hero-three .hero-stage-copy h1,
.hero-three .hero-stage-copy .cg-h1 {
  font-size: clamp(42px, 4.4vw, 64px);
}
.hero-cut {
  position: relative;
  padding-bottom: 90px;
}
.hero-cut img,
.rc-cut img,
.budget-cut img,
.rail-cut img,
.numbers-cut img,
.needs-cut img {
  display: block;
  width: 100%;
  height: auto;
}
/* the cut-outs' grey plates read as plates in the dark theme */
[data-theme="dark"] .hero-cut img,
[data-theme="dark"] .rc-cut img,
[data-theme="dark"] .budget-cut img,
[data-theme="dark"] .rail-cut img,
[data-theme="dark"] .numbers-cut img,
[data-theme="dark"] .needs-cut img,
[data-theme="dark"] .storage-cut img {
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hero-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 5;
}
.hc-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hc-row .cg-mono {
  color: var(--cg-heading);
  font-size: 13px;
}
.hc-row .cg-mono b {
  font-weight: 500;
}
.hero-three .slider-arrow {
  background: var(--cg-surface);
}
.hero-three .slider-arrow:hover {
  background: var(--cg-yellow);
}

/*----- 10.2 Rail Cards & Control -----*/
.rail-card {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  align-items: center;
  gap: 30px;
}
.rc-copy {
  padding-left: 30px;
  border-left: 1px solid var(--cg-line-2);
}
.rc-copy h3 {
  margin: 30px 0 12px;
}
.rc-foot {
  margin: 26px -0px 0 -30px;
  padding: 24px 0 30px 30px;
  border-top: 1px solid var(--cg-line-2);
}
.control-title {
  max-width: 560px;
  margin-bottom: 50px;
  font-size: var(--cg-fs-h3);
}

/*----- 10.3 Budget Compare -----*/
.mode-compare {
  position: relative;
  z-index: 2;
  padding: 34px 36px;
  background: var(--cg-surface);
}
.mc-fields {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 26px;
}
.mc-bars li {
  display: grid;
  grid-template-columns: 110px 1fr 150px;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--cg-line);
}
.mc-bars .mc-mode {
  color: var(--cg-heading);
  font-weight: 700;
}
.mc-bars .mc-bar {
  position: relative;
  height: 14px;
  background: var(--cg-band-2);
}
.mc-bars .mc-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cg-heading);
  transition: width 0.8s var(--cg-ease-2);
}
.mc-bars li.is-best .mc-bar span {
  background: var(--cg-yellow);
}
.mc-bars .mc-val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}
.mc-bars .mc-val b {
  color: var(--cg-heading);
  font-size: 18px;
}
.mc-bars .mc-val small {
  color: var(--cg-muted);
  font-family: var(--cg-ff-mono);
  font-size: 11px;
}
.budget-cut {
  width: 70%;
  margin: -30px 0 0 auto;
}

/*----- 10.4 Pros Grid -----*/
.cg-pros-grid h2 {
  margin-bottom: 44px;
}
.pros-row > div {
  flex: 0 0 auto;
  width: 33.333%;
}

/*----- 10.5 The Aisle -----*/
/* Home 03's scroll moment: a racked aisle seen side on; three forklifts drive in, lift their pallets to a bay, set them
   down and drive on (main.js scrubs it on the section's own travel, one way). 100 px = 1.2 m at full size. */
.cg-aisle {
  overflow: hidden;
}
.aisle-stage {
  --u: 1;
  position: relative;
  height: 520px;
  margin-top: 10px;
}
.aisle-rack {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 60px;
  height: 420px;
}
.rk-post {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 100%;
  margin-left: -6px;
  background: repeating-linear-gradient(180deg, #3E464E 0 18px, #4C555E 18px 22px);
}
.rk-post:nth-child(1) {
  left: 0%;
}
.rk-post:nth-child(2) {
  left: 20%;
}
.rk-post:nth-child(3) {
  left: 40%;
}
.rk-post:nth-child(4) {
  left: 60%;
}
.rk-post:nth-child(5) {
  left: 80%;
}
.rk-post:nth-child(6) {
  left: 100%;
}
.rk-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  margin-left: -6px;
  margin-right: -6px;
  background: linear-gradient(180deg, #F7C600 0 70%, #C99A00 70%);
}
.rk-beam.is-1 {
  bottom: 150px;
}
.rk-beam.is-2 {
  bottom: 300px;
}
.rk-load,
.fl-pallet {
  position: absolute;
  width: 112px;
  height: auto;
}
.aisle-fleet {
  position: absolute;
  inset: 0 6% 60px;
}
/*rtl:ignore*/
.fl-unit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
}
/*rtl:ignore*/
.fl-truck {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 336px;
}
.fl-truck img {
  display: block;
  width: 100%;
  height: auto;
}
/*rtl:ignore*/
.fl-truck .fl-forks {
  position: absolute;
  left: 0;
  bottom: 0;
}
.aisle-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background:
    repeating-linear-gradient(90deg, rgba(247, 198, 0, 0.9) 0 40px, transparent 40px 80px) 0 10px / 100% 6px no-repeat,
    #2B3036;
}
.aisle-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 40px 0 110px;
}
.aisle-facts li {
  display: flex;
  flex-direction: column;
}
.aisle-facts b {
  color: var(--cg-heading);
  font-size: 22px;
}

/*----- 10.6 Rail Tabs, Map, Numbers -----*/
.tabs-title {
  max-width: 520px;
  margin-bottom: 44px;
  font-size: var(--cg-fs-h3);
}
.rail-lead {
  margin-bottom: 22px;
  font-size: 16px;
}
.cg-map-band {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.cg-map-band .cg-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4);
}
.map-card {
  position: relative;
  z-index: 2;
  max-width: 470px;
  padding: 44px 44px 40px;
  background: var(--cg-band);
}
.map-card h3 {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--cg-line-2);
}
.mc-label {
  display: block;
  margin-bottom: 4px;
  color: var(--cg-muted);
  font-size: 13px;
}
.mc-phone {
  display: block;
  margin-bottom: 22px;
  color: var(--cg-heading);
  font-size: 30px;
  font-weight: 700;
}
.mc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.mc-cols b {
  color: var(--cg-heading);
  font-size: 16px;
  line-height: 1.35;
}
.numbers-title {
  margin-bottom: 20px;
  font-size: var(--cg-fs-h3);
}
.numbers-cut {
  width: 80%;
  margin: -40px 0 10px auto;
}
.num-rows li {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr auto;
  align-items: center;
  gap: 30px;
  padding: 34px 0 34px 40px;
  border-bottom: 1px solid var(--cg-line-2);
  border-left: 1px solid var(--cg-line-2);
}
.num-rows b {
  color: var(--cg-heading);
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.num-rows p {
  margin: 0;
  font-size: 16px;
}
.cg-more.is-bare {
  gap: 0;
}
.needs-cut {
  max-width: 400px;
  margin: 0 auto;
}
.needs-sub {
  margin: 30px 0 12px;
}
.cg-needs .split-foot {
  margin-right: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.cg-needs h2 {
  font-size: var(--cg-fs-h2);
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Bands & Rows -----*/
.cg-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px 40px;
}
.cta-row h2 {
  max-width: 640px;
}
.cg-ops-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cg-ops-band .cg-open {
  margin-right: 20px;
  color: #FFFFFF;
}
.cg-wing-band {
  display: flex;
  align-items: center;
  min-height: 460px;
}
.wing-line {
  max-width: 820px;
  margin: 0 auto;
  color: #FFFFFF;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.cg-clients .client-strip li {
  height: 150px;
}
.history li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--cg-line-2);
}
.history li:first-child {
  border-top: 1px solid var(--cg-line-2);
}
.history .cg-mono {
  grid-row: span 2;
  color: var(--cg-heading);
  font-size: 18px;
  font-weight: 500;
}
.history b {
  color: var(--cg-heading);
  font-size: 19px;
}
.history p {
  margin: 0;
  font-size: 16px;
}
.promise-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.promise-row.is-four {
  margin-top: 90px;
}
.promise-row li {
  padding: 26px 0 0;
  border-top: 2px solid var(--cg-heading);
}
.promise-row .cg-mono {
  display: inline-block;
  margin-bottom: 18px;
  padding: 3px 7px;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-size: 11px;
}
.promise-row h3 {
  margin-bottom: 10px;
}
.promise-row p {
  font-size: 16px;
}

/*----- 11.2 Services -----*/
.service-card {
  height: 100%;
  background: var(--cg-surface);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.service-card:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.sc-img {
  display: block;
  overflow: hidden;
}
.sc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--cg-ease-2);
}
.service-card:hover .sc-img img {
  transform: scale(1.04);
}
.sc-body {
  position: relative;
  padding: 0 26px 24px;
}
.sc-body .cg-ico {
  position: relative;
  width: 64px;
  height: 64px;
  margin: -32px 0 14px;
  padding: 10px;
  background: var(--cg-surface);
}
.sc-body h3 {
  margin-bottom: 8px;
}
.sc-body p {
  margin-bottom: 12px;
  font-size: 15px;
}
.sc-body .cg-rows li {
  padding: 8px 0;
  font-size: 14.5px;
}
.svc-hero {
  margin-bottom: 40px;
}
.svc-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.svc-main h2,
.case-main h2,
.job-main h2 {
  margin-bottom: 20px;
}
.svc-compare {
  margin: 30px 0 10px;
}
.svc-col {
  height: 100%;
  padding: 28px 28px 20px;
  background: var(--cg-band-2);
}
.svc-col h3 {
  margin-bottom: 12px;
}
.svc-col .cg-rows li {
  font-size: 15px;
}
.svc-sub {
  margin: 56px 0 22px;
}
.svc-note {
  margin-top: 14px;
  color: var(--cg-muted);
  font-size: 14px;
}
.svc-steps li {
  display: grid;
  grid-template-columns: 56px 220px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cg-line);
}
.svc-steps .cg-mono {
  color: var(--cg-accent-text);
  font-size: 12px;
}
.svc-steps b {
  color: var(--cg-heading);
  font-size: 17px;
}
.svc-steps p {
  margin: 0;
  font-size: 16px;
}
.svc-steps.is-compact {
  margin: 10px 0 40px;
}
.svc-pair {
  margin-top: 40px;
}
.svc-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.svc-side .widget,
.cg-sidebar .widget {
  margin-bottom: 30px;
  padding: 30px;
  background: var(--cg-band-2);
}
.svc-side .widget.is-night,
.svc-side .widget.is-yellow,
.cg-sidebar .widget.is-night,
.cg-sidebar .widget.is-yellow {
  background: var(--cg-ink);
}
.svc-side .widget.is-yellow,
.cg-sidebar .widget.is-yellow {
  background: var(--cg-yellow);
}
.widget h2 {
  margin-bottom: 18px;
}
.svc-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cg-line);
  color: var(--cg-heading);
  font-weight: 600;
}
.svc-nav a i {
  font-size: 11px;
  color: var(--cg-muted);
  transition: transform 0.35s var(--cg-ease-2);
}
.svc-nav a:hover i {
  transform: translateX(4px);
}
.svc-nav li.is-current a {
  padding-left: 14px;
  box-shadow: inset 3px 0 0 var(--cg-yellow);
}
.widget-cta p {
  font-size: 15px;
}
.widget-cta .cg-rows {
  margin-bottom: 20px;
}
.widget-cta .cg-rows li {
  font-size: 15px;
}
.track-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.widget-contact {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 4px 16px;
}
.widget-contact span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.widget-contact small {
  color: var(--cg-muted);
  font-size: 13px;
}
.widget-contact b {
  color: var(--cg-heading);
}
.widget-contact .cg-link {
  grid-column: 1 / -1;
  margin-top: 12px;
}

/*----- 11.3 Industries & Cases -----*/
.industry-card {
  height: 100%;
  background: var(--cg-band-2);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.industry-card:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.ic-img {
  display: block;
  overflow: hidden;
}
.ic-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--cg-ease-2);
}
.industry-card:hover .ic-img img {
  transform: scale(1.04);
}
.ic-body {
  padding: 0 24px 24px;
}
.ic-body .cg-ico {
  width: 60px;
  height: 60px;
  margin: -30px 0 12px;
  padding: 9px;
  background: var(--cg-band-2);
}
.ic-body h3 {
  margin-bottom: 14px;
}
.ic-share {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ic-share .cg-meter {
  flex: 1;
}
.ic-share b {
  color: var(--cg-heading);
  font-size: 13px;
}
.ic-body small {
  color: var(--cg-muted);
  font-size: 13px;
}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-tabs button {
  min-height: 44px;
  padding: 0 16px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.filter-tabs button:hover {
  background: var(--cg-line);
}
.filter-tabs button.is-active {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.cg-bg-band .filter-tabs button {
  background: var(--cg-surface);
}
.cg-bg-band .filter-tabs button.is-active {
  background: var(--cg-yellow);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.case-card {
  height: 100%;
  background: var(--cg-surface);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.cg-cases .case-card {
  background: var(--cg-band-2);
}
.case-card:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.cc-img {
  display: block;
  overflow: hidden;
}
.cc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.cc-copy {
  padding: 26px 28px 28px;
}
.cc-copy h3 {
  margin: 8px 0 18px;
}
.cc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
  padding: 16px 0;
  border-top: 1px solid var(--cg-line-2);
  border-bottom: 1px solid var(--cg-line-2);
}
.cc-results li {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.cc-results b {
  color: var(--cg-heading);
  font-size: 20px;
}
.cc-results span {
  color: var(--cg-muted);
  font-size: 12.5px;
}
.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 10px 0 40px;
}
.case-results li {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--cg-yellow);
  color: #3D3300;
}
.case-results b {
  color: #1B1B1B;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
}
.case-quote {
  margin: 0 0 40px;
  padding: 34px 0 0;
  border-top: 2px solid var(--cg-heading);
}
.case-quote p {
  color: var(--cg-heading);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
}
.case-quote footer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.case-quote footer span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.case-quote small {
  color: var(--cg-muted);
  font-size: 13px;
}
.case-quote b {
  color: var(--cg-heading);
}
.case-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--cg-line-2);
}
.case-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cg-heading);
}
.case-nav a span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.case-nav a.is-next {
  text-align: right;
}
.case-nav small {
  color: var(--cg-muted);
  font-size: 13px;
}
.more-cases-title {
  margin-bottom: 44px;
}
.case-facts .cg-rows li {
  font-size: 15px;
}

/*----- 11.4 People & Profile -----*/
.profile-card {
  position: sticky;
  top: 100px;
  padding: 40px 34px 34px;
}
.pc-face {
  display: block;
  width: 112px;
  height: 112px;
  margin-bottom: 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--cg-yellow);
}
.profile-card h2 {
  margin-bottom: 18px;
}
.profile-card .cg-rows {
  margin-bottom: 24px;
}
.profile-card .cg-rows li {
  font-size: 15px;
}
.profile-main h2 {
  margin-bottom: 20px;
}
.profile-sub {
  margin: 40px 0 16px;
}
.skill-rows li > b {
  width: 55%;
}
.skill-rows .cg-meter {
  display: block;
  width: 100%;
}
.profile-main .dep-list {
  margin-bottom: 40px;
}

/*----- 11.5 Careers -----*/
.job-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.job-tools .cg-input {
  width: 260px;
  height: 48px;
}
.job-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr 46px;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  margin-bottom: 10px;
  background: var(--cg-surface);
  transition: transform 0.4s var(--cg-ease-2), box-shadow 0.4s var(--cg-ease-2);
}
.job-row:hover {
  box-shadow: var(--cg-shadow);
  transform: translateX(6px);
}
.job-row > span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.jr-title a {
  color: var(--cg-heading);
  font-size: 18px;
  font-weight: 700;
}
.job-row small {
  color: var(--cg-muted);
  font-size: 13.5px;
}
.job-row b {
  color: var(--cg-heading);
  font-size: 15px;
  font-weight: 600;
}
.jr-posted {
  color: var(--cg-muted);
  font-size: 11px;
}
.apply-title {
  margin-top: 60px;
}
.apply-form {
  padding: 34px;
  background: var(--cg-band-2);
}
.apply-form .cg-check {
  margin-bottom: 22px;
}
.cg-file {
  padding-top: 14px;
  font-size: 14px;
}

/*----- 11.6 Network -----*/
.net-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--cg-heading);
}
.net-tools .cg-input {
  width: 300px;
  height: 48px;
}
.office-card {
  height: 100%;
  padding: 28px 28px 24px;
  background: var(--cg-band-2);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.office-card:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.oc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.oc-time {
  padding: 4px 8px;
  background: var(--cg-ink);
  color: var(--cg-yellow);
  font-size: 13px;
}
.office-card h3 {
  margin-bottom: 6px;
}
.oc-addr {
  margin-bottom: 14px;
  font-size: 15px;
}
.office-card .cg-rows {
  margin-bottom: 16px;
}
.office-card .cg-rows li {
  padding: 8px 0;
  font-size: 14.5px;
}
.office-card .cg-open {
  font-size: 14px;
}

/*----- 11.7 FAQ & Contact -----*/
.faq-side {
  position: sticky;
  top: 100px;
}
.faq-search {
  margin-bottom: 30px;
}
.faq-side .widget {
  margin-bottom: 26px;
  padding: 28px;
  background: var(--cg-band-2);
}
.faq-side .widget.is-night {
  background: var(--cg-ink);
}
.faq-group {
  margin-bottom: 56px;
}
.faq-group[hidden] {
  display: none;
}
.faq-title {
  margin-bottom: 10px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cg-heading);
}
.contact-phone {
  display: block;
  margin: 26px 0 26px;
}
.contact-offices {
  margin-top: 36px;
}
.contact-form {
  padding: 40px;
  background: var(--cg-band-2);
}
.map-ops {
  margin-bottom: 18px;
}
.reach-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 34px 30px;
  background: var(--cg-surface);
  color: var(--cg-text);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.reach-card .cg-ico {
  margin-bottom: 14px;
}
.reach-card b {
  color: var(--cg-heading);
  font-size: 20px;
}
.reach-card:hover {
  color: var(--cg-text);
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.inco-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 18px 0 0;
  color: var(--cg-muted);
  font-size: 14px;
}
.inco-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.inco-legend .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.inco-legend .is-s {
  background: var(--cg-heading);
}
.inco-legend .is-b {
  box-shadow: inset 0 0 0 2px var(--cg-line-2);
}

/*======================
12. Freight Tools
========================*/
/*----- 12.1 Choice Cards & Chips -----*/
/* radio and checkbox cards: the input hidden, its card shows the state (a yellow bar and an ink edge when chosen) */
.mode-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.level-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.choice-card {
  position: relative;
  display: block;
  cursor: pointer;
}
.choice-card input,
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 18px 18px;
  background: var(--cg-band-2);
  color: var(--cg-text);
  font-size: 14px;
  line-height: 1.4;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s var(--cg-ease-2);
}
.cc-body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--cg-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--cg-ease-2);
}
.cc-body .cg-ico {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
}
.cc-body b {
  color: var(--cg-heading);
  font-size: 16px;
}
.cc-body .cg-mono,
.cc-body small.cg-mono {
  font-size: 10.5px;
  color: var(--cg-muted);
}
.choice-card:hover .cc-body {
  transform: translateY(-3px);
}
.choice-card.is-checked .cc-body {
  background: var(--cg-surface);
  box-shadow: inset 0 0 0 2px var(--cg-heading);
}
.choice-card.is-checked .cc-body::before {
  transform: scaleX(1);
}
.choice-card input:focus-visible + .cc-body {
  outline: 2px solid var(--cg-yellow);
  outline-offset: 3px;
}
.extra-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 22px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.chip-choice span::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--cg-line-2);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chip-choice.is-checked span {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.chip-choice.is-checked span::before {
  border-color: var(--cg-ink);
  background: var(--cg-ink);
  box-shadow: inset 0 0 0 3px var(--cg-yellow);
}
.chip-choice input:focus-visible + span {
  outline: 2px solid var(--cg-yellow);
  outline-offset: 3px;
}
.chip-choice.is-wide {
  display: flex;
}
.chip-choice.is-wide span {
  width: 100%;
}
.cg-bg-band .cc-body,
.cg-bg-band .chip-choice span {
  background: var(--cg-surface);
}

/*----- 12.2 Quote -----*/
.qt-block {
  margin: 0 0 34px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--cg-line);
}
.qt-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  float: none;
  width: auto;
  margin-bottom: 20px;
  padding: 0;
  color: var(--cg-heading);
  font-size: 22px;
  font-weight: 700;
}
.qt-legend .cg-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-size: 11px;
}
.qt-value {
  max-width: 420px;
}
.qt-summary,
.wz-side,
.landed-out {
  position: sticky;
  top: 100px;
  padding: 38px 36px 34px;
}
.qs-total {
  display: flex;
  flex-direction: column;
  margin: 4px 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cg-line-2);
}
.qs-total b {
  color: var(--cg-heading);
  font-size: clamp(44px, 4vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.qs-total span {
  margin-top: 10px;
  color: var(--cg-text);
  font-size: 15px;
}
.qt-summary .cg-rows li,
.wz-side .cg-rows li,
.landed-out .cg-rows li {
  padding: 9px 0;
  font-size: 15px;
}
.qs-lines,
.qs-when {
  margin-top: 18px;
}
.qs-rule {
  margin: 18px 0 24px;
  color: var(--cg-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.landed-out .cg-rows li.is-sub > span,
.landed-out .cg-rows li.is-sub > b {
  color: var(--cg-muted);
  font-style: italic;
}
.mc-bars.is-wide li {
  grid-template-columns: 140px 1fr 200px;
  padding: 18px 0;
}

/*----- 12.3 Tracking -----*/
.trk-search {
  margin-bottom: 50px;
}
.trk-form {
  display: flex;
  gap: 14px;
}
.trk-form .cg-input {
  flex: 1;
  height: 64px;
  font-size: 17px;
}
.trk-form .cg-btn {
  height: 64px;
}
.trk-demos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--cg-muted);
  font-size: 14px;
}
.demo-no {
  padding: 6px 10px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 11.5px;
  transition: background-color 0.3s ease;
}
.demo-no:hover {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.trk-empty,
.trk-missing {
  padding: 70px 30px;
  background: var(--cg-band-2);
  text-align: center;
}
.trk-empty .cg-ico,
.trk-missing .cg-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}
.trk-empty h2,
.trk-missing h2 {
  margin-bottom: 10px;
}
.trk-card {
  padding: 44px;
  background: var(--cg-band-2);
}
.trk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--cg-heading);
}
.cg-mono-head {
  font-family: var(--cg-ff-mono);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: 0;
}
.trk-lane {
  margin: 8px 0 0;
}
.trk-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.trk-status .cg-tag {
  padding: 6px 10px;
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.trk-status .cg-tag.is-ok {
  background: #2FA866;
  color: #FFFFFF;
}
.trk-status b {
  color: var(--cg-heading);
  font-size: 22px;
}
.trk-status small {
  color: var(--cg-muted);
  font-size: 13px;
}
.trk-route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin: 40px 0 46px;
}
.tr-end {
  color: var(--cg-heading);
  font-weight: 700;
}
.tr-line {
  position: relative;
  height: 4px;
  background: var(--cg-line-2);
}
/*rtl:ignore*/
.tr-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--cg-yellow);
}
/*rtl:ignore*/
.tr-pin {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--cg-surface);
  box-shadow: 0 0 0 3px var(--cg-yellow);
}
.tr-pin .cg-ico {
  width: 34px;
  height: 34px;
}
.trk-sub {
  margin-bottom: 18px;
}
.trk-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 14px;
  padding: 0 0 22px;
}
.trk-timeline li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: -2px;
  width: 2px;
  background: var(--cg-line-2);
}
.trk-timeline li:last-child::before {
  display: none;
}
.tl-dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--cg-surface);
  box-shadow: inset 0 0 0 2px var(--cg-line-2);
}
.trk-timeline li.is-done .tl-dot {
  background: var(--cg-heading);
  box-shadow: none;
}
.trk-timeline li.is-now .tl-dot {
  background: var(--cg-yellow);
  box-shadow: 0 0 0 5px rgba(var(--cg-yellow-rgb), 0.3);
}
.trk-timeline li > div {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.trk-timeline b {
  color: var(--cg-heading);
  font-size: 16px;
}
.trk-timeline span {
  color: var(--cg-muted);
  font-size: 14px;
}
.trk-timeline time {
  color: var(--cg-text);
  font-family: var(--cg-ff-mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.trk-timeline li.is-next b,
.trk-timeline li.is-next time {
  color: var(--cg-muted);
}
.trk-facts li {
  padding: 9px 0;
  font-size: 15px;
}
.trk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.alert-form {
  padding: 34px;
  background: var(--cg-surface);
}

/*----- 12.4 Wizard -----*/
.wz-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 44px;
  border-bottom: 1px solid var(--cg-line-2);
}
.wz-progress button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 0 18px;
  color: var(--cg-muted);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.wz-progress button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--cg-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--cg-ease-2);
}
.wz-progress .cg-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 10px;
}
.wz-progress li.is-current button,
.wz-progress li.is-done button {
  color: var(--cg-heading);
}
.wz-progress li.is-current button::after,
.wz-progress li.is-done button::after {
  transform: scaleX(1);
}
.wz-progress li.is-current .cg-mono {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.wz-progress li.is-done .cg-mono {
  background: var(--cg-heading);
  color: var(--cg-bg);
}
.wz-step {
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step[hidden] {
  display: none;
}
.wz-step legend {
  float: none;
  width: auto;
  margin-bottom: 14px;
  padding: 0;
  color: var(--cg-heading);
  font-weight: 700;
}
.wz-note {
  margin-bottom: 26px;
  color: var(--cg-muted);
  font-size: 15px;
}
.wz-review li {
  font-size: 15px;
}
.wz-review li > b {
  max-width: 60%;
}
.wz-review + .cg-check {
  margin-top: 26px;
}
.wz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--cg-line);
}
.wz-nav [hidden] {
  display: none;
}
.wz-done {
  padding: 50px 40px;
  background: var(--cg-band-2);
  text-align: center;
}
.wz-done .cg-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.wz-done h2 {
  margin-bottom: 12px;
}
.wz-done p {
  max-width: 520px;
  margin: 0 auto 26px;
}
.wz-side-title {
  margin: 30px 0 14px;
}
.wz-next-list li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--cg-line);
  font-size: 15px;
}
.wz-next-list .cg-mono {
  color: var(--cg-yellow);
  font-size: 11px;
  line-height: 2.1;
}

/*----- 12.5 Schedules -----*/
.sch-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--cg-heading);
}
.sch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sch-tabs button,
.inco-chips button {
  min-height: 46px;
  padding: 0 18px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.sch-tabs button:hover,
.inco-chips button:hover {
  background: var(--cg-line);
}
.sch-tabs button.is-active,
.inco-chips button.is-active {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.sch-selects {
  display: grid;
  grid-template-columns: 220px 200px;
  gap: 16px;
}
.sch-row {
  display: grid;
  grid-template-columns: 130px 1.4fr 1fr 1.2fr 0.8fr;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cg-line);
  transition: background-color 0.3s ease;
}
.sch-row:hover {
  background: var(--cg-soft);
}
.sch-row > span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.sch-row b {
  color: var(--cg-heading);
  font-size: 15.5px;
  font-weight: 600;
}
.sch-row small {
  color: var(--cg-muted);
  font-size: 13px;
}
.sch-row small.cg-mono,
.sch-row small .cg-mono {
  font-size: 11px;
}
.sch-row small .is-soon {
  padding: 1px 5px;
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.sch-row > .sch-mode {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.sch-mode .cg-ico {
  width: 38px;
  height: 38px;
}
.sch-note,
.sch-foot {
  margin-top: 22px;
  color: var(--cg-muted);
  font-size: 15px;
}
.sch-foot i {
  margin-right: 8px;
  color: var(--cg-accent-text);
}

/*----- 12.6 Container Guide -----*/
.box-card {
  height: 100%;
  padding: 30px 30px 26px;
  background: var(--cg-band-2);
  transition: transform 0.45s var(--cg-ease-2), box-shadow 0.45s var(--cg-ease-2);
}
.box-card:hover {
  box-shadow: var(--cg-shadow);
  transform: translateY(-6px);
}
.box-card.is-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 300px;
}
.box-card.is-cta.is-yellow {
  background: var(--cg-yellow);
}
.box-card.is-cta.is-night {
  background: var(--cg-ink);
}
.box-card.is-cta p {
  margin-bottom: 22px;
}
.bc-draw {
  position: relative;
  aspect-ratio: 13556 / 2698;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--cg-heading);
}
.bc-box {
  position: absolute;
  left: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, var(--cg-yellow) 0 6px, var(--cg-yellow-d) 6px 8px);
}
.bc-box.is-20dv {
  width: 43.5%;
  height: 88.7%;
}
.bc-box.is-40dv {
  width: 88.8%;
  height: 88.7%;
}
.bc-box.is-40hc {
  width: 88.8%;
  height: 100%;
}
.bc-box.is-45hc {
  width: 100%;
  height: 100%;
}
.bc-box.is-20rf {
  width: 40.2%;
  height: 84.2%;
  background: repeating-linear-gradient(90deg, #E6E8EA 0 6px, #C9CDD1 6px 8px);
}
.bc-box.is-40rf {
  width: 85.4%;
  height: 94.7%;
  background: repeating-linear-gradient(90deg, #E6E8EA 0 6px, #C9CDD1 6px 8px);
}
.bc-box.is-20ot {
  width: 43.5%;
  height: 87.3%;
  background: repeating-linear-gradient(90deg, #3A434C 0 6px, #2B3036 6px 8px);
}
.box-card h3 {
  margin: 6px 0 8px;
}
.box-card p {
  margin-bottom: 14px;
  font-size: 15px;
}
.box-card .cg-rows li {
  padding: 8px 0;
  font-size: 14.5px;
}
.planner-in .chip-choice {
  margin-top: 4px;
}
.planner-out {
  padding: 34px;
  background: var(--cg-surface);
}
.pl-floor-wrap {
  padding: 14px;
  background: var(--cg-band-2);
  border: 3px solid var(--cg-heading);
}
.pl-floor {
  position: relative;
  width: 100%;
}
.pl-cell {
  position: absolute;
  border: 1px solid var(--cg-surface);
  background: repeating-linear-gradient(0deg, #C99E64 0 6px, #B88D55 6px 8px);
}
.pl-cell.is-empty {
  background: transparent;
  border: 1px dashed var(--cg-line-2);
}
.pl-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 26px 0 10px;
}
.pl-figures li {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 1px solid var(--cg-line-2);
  font-size: 14px;
}
.pl-figures b {
  color: var(--cg-heading);
  font-size: 36px;
  line-height: 1.1;
}
.pl-use li > b {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 60%;
}
.pl-use .cg-meter {
  flex: 1;
}
.pl-use .cg-mono {
  min-width: 44px;
  font-size: 13px;
}
.pl-note {
  margin: 16px 0 0;
  color: var(--cg-muted);
  font-size: 15px;
}
.cg-table-wrap {
  width: 100%;
}
.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cg-table th,
.cg-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--cg-line);
  text-align: left;
}
.cg-table thead th {
  color: var(--cg-muted);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid var(--cg-heading);
}
.cg-table tbody th {
  color: var(--cg-heading);
  font-weight: 700;
}
.cg-table td.cg-mono {
  font-size: 13px;
}
.which-out {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--cg-yellow);
}
.which-out b {
  color: var(--cg-heading);
  font-size: 28px;
  line-height: 1.2;
}
.which-out p {
  margin: 0;
  font-size: 15px;
}
.cg-which {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/*----- 12.7 Customs -----*/
.docs-in h2 {
  margin-bottom: 24px;
}
.docs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--cg-heading);
}
.docs-head b {
  color: var(--cg-heading);
  font-size: 30px;
}
.docs-head span {
  color: var(--cg-muted);
  font-size: 15px;
}
.docs-list li {
  display: grid;
  grid-template-columns: 40px 1.3fr 1fr 0.9fr;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--cg-line);
}
.docs-list .dl-no {
  color: var(--cg-accent-text);
  font-size: 11px;
}
.docs-list b {
  color: var(--cg-heading);
  font-size: 16px;
}
.docs-list .dl-by {
  font-size: 15px;
}
.docs-list .dl-when {
  color: var(--cg-muted);
  font-size: 11px;
  text-align: right;
}
.inco-pick {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  text-align: right;
}
.inco-pick b {
  color: var(--cg-heading);
  font-size: 22px;
}
.inco-pick span {
  color: var(--cg-text);
  font-size: 15px;
}
.inco-wrap {
  padding: 26px;
  background: var(--cg-surface);
}
.inco-chips {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.inco-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.inco-table th,
.inco-table td {
  padding: 9px 4px;
  border-bottom: 1px solid var(--cg-line);
  text-align: center;
}
.inco-table tbody th {
  width: 190px;
  color: var(--cg-heading);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.inco-table thead th:first-child {
  width: 190px;
  color: var(--cg-muted);
  font-weight: 600;
  text-align: left;
}
.inco-table thead button {
  width: 100%;
  padding: 8px 0;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-family: var(--cg-ff-mono);
  font-size: 11px;
}
.inco-table thead button.is-active {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.inco-table td {
  color: transparent;
  font-size: 0;
}
.inco-table td::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
}
.inco-table td.is-s::before {
  background: var(--cg-heading);
}
.inco-table td.is-b::before {
  box-shadow: inset 0 0 0 2px var(--cg-line-2);
}
.inco-table td.is-on {
  background: rgba(var(--cg-yellow-rgb), 0.16);
}
.inco-table td.is-on.is-s::before {
  background: var(--cg-yellow-d);
}
.landed-form {
  margin-top: 26px;
}

/*======================
13. Blog & Account
========================*/
/*----- 13.1 Blog List -----*/
/* Freight notes: wide photo posts with the yellow date tile, an ink quote post and a yellow link post between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--cg-ease-2);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.03);
}
.post-date {
  position: absolute;
  left: 28px;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 82px;
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.post-date b {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 23, 27, 0.3);
}
.post-thumb.is-video .cg-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -46px 0 0 -46px;
}
.post-gallery .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  background: rgba(255, 255, 255, 0.92);
  color: var(--cg-ink);
  pointer-events: auto;
}
.post-audio {
  position: absolute;
  left: 130px;
  right: 24px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(18, 23, 27, 0.8);
  color: #FFFFFF;
}
.pa-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.pa-bar {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
}
.pa-bar span {
  position: absolute;
  inset: 0 70% 0 0;
  background: var(--cg-yellow);
}
.pa-time {
  font-family: var(--cg-ff-mono);
  font-size: 12px;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--cg-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .cg-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--cg-heading);
  font-weight: 600;
}
.bp-body h3 {
  margin-bottom: 14px;
}
.bp-body h3 a,
.blog-post.is-quote h3 a,
.blog-post.is-link h3 a {
  color: var(--cg-heading);
}
.bp-body p {
  margin-bottom: 22px;
}
.blog-post.is-quote,
.blog-post.is-link {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
}
.blog-post.is-quote {
  background: var(--cg-ink);
  --cg-heading: #FFFFFF;
  --cg-muted: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.78);
}
.blog-post.is-link {
  background: var(--cg-yellow);
  --cg-heading: #1B1B1B;
  --cg-muted: #574800;
  color: #3D3300;
}
.blog-post.is-quote h3,
.blog-post.is-link h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post .pcd-cat a {
  color: var(--cg-heading);
}
.blog-post .nc-by {
  color: var(--cg-heading);
  font-size: 14px;
  font-weight: 700;
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(255, 255, 255, 0.1);
  font-size: 120px;
}
.blog-post.is-link .bp-glyph {
  color: rgba(27, 27, 27, 0.12);
}
.cg-pagination {
  display: flex;
  gap: 8px;
  margin-top: 60px;
}
.cg-pagination a,
.cg-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-family: var(--cg-ff-mono);
  font-size: 13px;
  transition: background-color 0.3s ease;
}
.cg-pagination a:hover,
.cg-pagination .is-current {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}

/*----- 13.2 Sidebar -----*/
.widget-search {
  position: relative;
}
.widget-search input {
  width: 100%;
  height: 54px;
  padding: 0 54px 0 18px;
  border: 0;
  border-bottom: 2px solid var(--cg-line-2);
  background: var(--cg-surface);
  color: var(--cg-heading);
  font-family: var(--cg-ff-body);
  font-size: 16px;
}
.widget-search input:focus {
  border-bottom-color: var(--cg-yellow);
  outline: 0;
}
.widget-search button {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 54px;
  color: var(--cg-heading);
}
.widget-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--cg-line);
  color: var(--cg-text);
}
.widget-cats a:hover {
  color: var(--cg-heading);
}
.widget-cats .cg-mono {
  font-size: 12px;
}
.side-posts li {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cg-line);
}
.side-posts .thumb img {
  display: block;
  width: 82px;
  height: 66px;
  object-fit: cover;
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--cg-muted);
  font-size: 11px;
}
.side-posts h3 a {
  color: var(--cg-heading);
}
.widget-tags {
  line-height: 2;
}
.widget-tags a {
  color: var(--cg-heading);
  font-weight: 600;
}
.widget-tags a:hover {
  box-shadow: inset 0 -2px 0 var(--cg-yellow);
}

/*----- 13.3 Article -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
}
.article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 22px;
}
.article-body > h3 {
  margin: 40px 0 16px;
  font-size: var(--cg-fs-h4);
}
.article-quote {
  margin: 36px 0;
  padding: 34px 40px;
  border-left: 4px solid var(--cg-yellow);
  background: var(--cg-band-2);
}
.article-quote p {
  margin-bottom: 12px;
  color: var(--cg-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.article-quote cite {
  color: var(--cg-muted);
  font-style: normal;
  font-size: 15px;
}
.article-rows {
  margin: 20px 0 30px;
}
.article-rows div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cg-line);
}
.article-rows dt {
  color: var(--cg-heading);
}
.article-rows dd {
  margin: 0;
  font-family: var(--cg-ff-mono);
  font-size: 13px;
}
.article-pair {
  margin: 10px 0 30px;
}
.cg-zoom {
  display: block;
  overflow: hidden;
}
.cg-zoom img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--cg-ease-2);
}
.cg-zoom:hover img {
  transform: scale(1.04);
}
.article-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0;
  background: var(--cg-band-2);
}
.article-cta span {
  display: flex;
  flex-direction: column;
}
.article-cta b {
  color: var(--cg-heading);
  font-size: 18px;
}
.article-cta small {
  color: var(--cg-muted);
  font-size: 14px;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0;
  padding: 22px 0;
  border-top: 1px solid var(--cg-line-2);
  border-bottom: 1px solid var(--cg-line-2);
}
.article-foot p {
  margin: 0;
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cg-band-2);
  color: var(--cg-heading);
  font-size: 14px;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.author-box {
  display: flex;
  gap: 26px;
  margin-bottom: 40px;
  padding: 34px;
  background: var(--cg-band-2);
}
.author-box img {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}
.post-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cg-heading);
}
.post-nav a span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.post-nav small {
  color: var(--cg-muted);
  font-size: 13px;
}
.post-nav .pn-next {
  justify-content: flex-end;
  text-align: right;
}
.post-nav .pn-all {
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--cg-yellow);
  color: var(--cg-ink);
}
.comment-list {
  margin: 20px 0 40px;
}
.comment-list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--cg-line);
}
.comment-list li img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list ul {
  grid-column: 2;
}
.comment-list b {
  display: block;
  color: var(--cg-heading);
}
.comment-list span {
  color: var(--cg-muted);
  font-family: var(--cg-ff-mono);
  font-size: 11px;
}
.comment-list p {
  margin: 8px 0;
}
.comment-form {
  background: var(--cg-band-2);
}
.comment-form h3 {
  margin-bottom: 20px;
}

/*----- 13.4 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  background: var(--cg-band-2);
}
.account-wrap.is-narrow {
  min-height: 520px;
}
.account-side {
  display: flex;
  align-items: flex-end;
}
.account-side::after {
  background: linear-gradient(0deg, rgba(18, 23, 27, 0.9) 0%, rgba(18, 23, 27, 0.35) 60%, rgba(18, 23, 27, 0.1) 100%);
}
.as-copy {
  position: relative;
  padding: 44px;
}
.as-title {
  margin-bottom: 10px;
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.account-form {
  align-self: center;
  padding: 56px;
}
.account-form h1 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--cg-heading);
  font-weight: 700;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin-top: 20px;
  font-size: 15px;
}
.pass-toggle {
  position: absolute;
  right: 6px;
  top: 37px;
  width: 44px;
  height: 44px;
  color: var(--cg-muted);
}
.pass-meter {
  display: block;
  height: 4px;
  margin-top: 10px;
  background: var(--cg-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cg-bad);
  transition: width 0.4s ease, background-color 0.4s ease;
}
.pass-meter span[data-score="3"] {
  background: var(--cg-yellow-d);
}
.pass-meter span[data-score="4"] {
  background: #2FA866;
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--cg-muted);
  font-size: 13px;
}
.portal-side {
  padding: 28px;
  background: var(--cg-band-2);
}
.ps-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cg-line-2);
}
.ps-who span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ps-who small {
  color: var(--cg-muted);
  font-size: 13px;
}
.ps-who b {
  color: var(--cg-heading);
}
.ps-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--cg-text);
  font-weight: 600;
}
.ps-nav a i {
  width: 18px;
  color: var(--cg-muted);
}
.ps-nav a.is-current,
.ps-nav a:hover {
  color: var(--cg-heading);
}
.ps-nav a.is-current i {
  color: var(--cg-accent-text);
}
.portal-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.portal-figures li {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--cg-band-2);
  font-size: 14px;
}
.portal-figures li:first-child {
  background: var(--cg-yellow);
  color: #3D3300;
}
.portal-figures b {
  color: var(--cg-heading);
  font-size: 32px;
  line-height: 1.1;
}
.portal-figures li:first-child b {
  color: #1B1B1B;
}
.portal-title {
  margin-bottom: 16px;
}
.portal-table td a {
  color: var(--cg-heading);
  font-size: 13px;
}
.portal-pair {
  margin-top: 30px;
}
.portal-box {
  height: 100%;
  background: var(--cg-band-2);
}
.portal-box .cg-rows li {
  font-size: 15px;
}

/*----- 13.5 Coming Soon & 404 -----*/
.cg-bare-page {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 60px 0;
}
.bare-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
}
.bare-logo {
  display: block;
  width: fit-content;
  margin-bottom: 50px;
}
.bare-logo img {
  height: 40px;
  width: auto;
}
.bare-inner h1 {
  max-width: 620px;
  margin-bottom: 20px;
}
.bare-inner .cg-lead {
  max-width: 560px;
  margin-bottom: 34px;
}
.launch-count {
  display: flex;
  gap: 14px;
  margin-bottom: 34px;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 104px;
  padding: 18px 12px;
  background: #1B1B1B;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}
.launch-count b {
  color: var(--cg-yellow);
  font-family: var(--cg-ff-mono);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.1;
}
.bare-news {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 560px;
  margin-bottom: 30px;
}
.bare-news .cg-input {
  flex: 1;
  min-width: 220px;
}
.bare-news .form-status {
  flex-basis: 100%;
}
.bare-art img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  transform-origin: 52% 0;
  animation: cg-sway 6s ease-in-out infinite;
}
.cg-bare-page .cg-social a {
  background: rgba(27, 27, 27, 0.1);
  color: #1B1B1B;
}
.lost-label {
  position: relative;
  max-width: 470px;
  padding: 30px;
  background: #FFFFFF;
  color: #1B1B1B;
  box-shadow: var(--cg-shadow-lg);
  transform: rotate(-3deg);
}
.ll-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid #1B1B1B;
}
.ll-top img {
  height: 28px;
  width: auto;
}
.ll-top .cg-mono {
  font-size: 13px;
}
.ll-code {
  height: 90px;
  margin: 20px 0;
  background: linear-gradient(90deg, #1B1B1B 0 4px, transparent 4px 6px, #1B1B1B 6px 7px, transparent 7px 11px, #1B1B1B 11px 15px,
    transparent 15px 16px, #1B1B1B 16px 18px, transparent 18px 22px, #1B1B1B 22px 23px, transparent 23px 25px) 0 0 / 25px 100% repeat-x;
}
.ll-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ll-rows span {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.ll-rows small {
  color: #6B6B6B;
}
.ll-stamp {
  position: absolute;
  right: 26px;
  top: 120px;
  padding: 8px 14px;
  border: 3px solid #B42318;
  color: #B42318;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-14deg);
}
.ll-big {
  margin-top: 18px;
  color: #1B1B1B;
  font-size: 110px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.cg-error h1 {
  margin-bottom: 20px;
}
.cg-error .cg-lead {
  margin-bottom: 34px;
}

/*======================
14. Subheader
========================*/
/* inner pages: the base's photo title (a photograph, the title big at the left in white) or its plain title block
   (yellow, or ink with the slowly turning graticule) */
.cg-subheader {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cg-subheader.is-photo {
  display: flex;
  align-items: flex-end;
  min-height: 620px;
  padding: 220px 0 90px;
  background: var(--cg-deep);
  --cg-heading: #FFFFFF;
  --cg-text: rgba(255, 255, 255, 0.86);
  --cg-muted: rgba(255, 255, 255, 0.72);
  color: var(--cg-text);
}
.cg-subheader.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(18, 23, 27, 0.78) 0%, rgba(18, 23, 27, 0.4) 55%, rgba(18, 23, 27, 0.1) 100%),
    linear-gradient(0deg, rgba(18, 23, 27, 0.5) 0%, rgba(18, 23, 27, 0) 40%);
}
.sub-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-subheader.is-plain {
  padding: 230px 0 100px;
}
.cg-subheader.is-yellow.is-plain {
  padding-top: 110px;
}
.sub-copy {
  position: relative;
  max-width: 780px;
}
.sub-copy h1 {
  margin-bottom: 18px;
}
.sub-copy .cg-lead {
  margin-bottom: 28px;
}
.cg-subheader.is-photo .cg-eyebrow::before,
.cg-subheader.is-night .cg-eyebrow::before {
  background: linear-gradient(90deg, #FFFFFF 0 2px, transparent 2px 4px, #FFFFFF 4px 5px, transparent 5px 7px, #FFFFFF 7px 10px,
    transparent 10px 11px, #FFFFFF 11px 12px, transparent 12px 15px, var(--cg-yellow) 15px 18px, transparent 18px 19px, #FFFFFF 19px 20px, transparent 20px 22px);
}
.cg-subheader .cg-crumbs a:hover {
  color: var(--cg-heading);
}

/*======================
15. Footer
========================*/
/* the base's footer: the logo, four columns of links and a thin bottom bar, on ink (or on the grey band on Home 02).
   Cargora's signature sits across its top: a container ship rocking on Gerstner waves, drawn on a canvas in the
   footer's own colours, with the next sailing beside it. */
.cg-footer {
  position: relative;
}
.cg-footer.is-band {
  --cg-heading: #1B1B1B;
  --cg-text: #565656;
  --cg-muted: #626262;
  --cg-line: rgba(27, 27, 27, 0.14);
  --cg-line-2: rgba(27, 27, 27, 0.3);
  --cg-accent-text: #7A5D00;
  --cg-band-2: #EBEBEB;
  background: var(--cg-grey);
  color: var(--cg-text);
}
[data-theme="dark"] .cg-footer.is-band {
  --cg-heading: #F2F2F0;
  --cg-text: #B9BDC1;
  --cg-muted: #A3A8AD;
  --cg-line: rgba(242, 242, 240, 0.12);
  --cg-line-2: rgba(242, 242, 240, 0.26);
  --cg-accent-text: #F7C600;
  --cg-band-2: #1F2327;
  background: var(--cg-band);
}
.footer-sea {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-bottom: 1px solid var(--cg-line);
}
.cg-ship {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sea-note {
  position: relative;
  z-index: 2;
  padding-top: 44px;
}
.sea-line {
  margin: 0 0 4px;
  color: var(--cg-heading);
  font-size: 18px;
}
.sea-line b {
  font-weight: 700;
}
.sea-cut {
  color: var(--cg-muted);
  font-family: var(--cg-ff-mono);
  font-size: 12px;
}
.footer-main {
  padding: 90px 0 70px;
}
.footer-logo img {
  height: 40px;
  width: auto;
}
.cg-footer .footer-logo .logo-main,
.cg-footer.is-band .footer-logo .logo-light,
[data-theme="dark"] .cg-footer.is-band .footer-logo .logo-main {
  display: none;
}
.cg-footer .footer-logo .logo-light,
.cg-footer.is-band .footer-logo .logo-main,
[data-theme="dark"] .cg-footer.is-band .footer-logo .logo-light {
  display: block;
}
.footer-brand p {
  max-width: 330px;
  margin: 24px 0 26px;
  font-size: 16px;
}
.cg-footer .widget h2 {
  margin-bottom: 24px;
}
.footer-links li,
.footer-contact li {
  margin-bottom: 12px;
  font-size: 15.5px;
}
.footer-links a:hover,
.footer-contact a:hover {
  color: var(--cg-heading);
}
.footer-contact .cg-open {
  font-size: 14px;
}
.footer-clocks li {
  padding: 8px 0;
  font-size: 15px;
}
.footer-clocks b {
  font-size: 13px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--cg-line);
  font-size: 14.5px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--cg-heading);
}
.footer-bottom-links {
  display: flex;
  gap: 26px;
}
/* the ship's colours, read by main.js (ink footer, grey footer, and the grey footer at night) */
.cg-ship {
  --sh-sea-1: #262C32;
  --sh-sea-2: #2F363D;
  --sh-sea-3: #20252A;
  --sh-hull: #3A434C;
  --sh-deck: #4A545E;
  --sh-bridge: #F2F2F0;
  --sh-window: #1B1B1B;
  --sh-box-a: #F7C600;
  --sh-box-b: #E6E8EA;
  --sh-box-c: #8A9299;
  --sh-box-d: #C99A00;
  --sh-line: rgba(0, 0, 0, 0.25);
  --sh-accent: #F7C600;
}
.cg-footer.is-band .cg-ship {
  --sh-sea-1: #D2D5D8;
  --sh-sea-2: #C6CACE;
  --sh-sea-3: #BABFC3;
  --sh-hull: #1B1B1B;
  --sh-deck: #2B3036;
  --sh-bridge: #FFFFFF;
  --sh-window: #1B1B1B;
  --sh-box-a: #F7C600;
  --sh-box-b: #FFFFFF;
  --sh-box-c: #7D858C;
  --sh-box-d: #3A434C;
  --sh-line: rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .cg-footer.is-band .cg-ship {
  --sh-sea-1: #1D2125;
  --sh-sea-2: #23282D;
  --sh-sea-3: #191C20;
  --sh-hull: #3A434C;
  --sh-deck: #4A545E;
  --sh-bridge: #F2F2F0;
  --sh-box-b: #E6E8EA;
  --sh-box-d: #C99A00;
}