/* ---------- Services, chapter 1: Customs Clearance & Compliance (#customs) ----------
   One documentation desk. js/customs.js (GSAP) moves a camera over it within its view of the stage (css/stage.css):
   .cc-world is the desk in world units (1 unit = 1px of the 3088 x 1923 layout below), the camera is the transform
   on .cc-world, and everything else (documents, callouts, notes, the index) is set from the same timeline.
   Without html.cc-on (reduced motion, no JS) the desk is laid out statically in percentages and every stage is
   shown as text in the index. All rules are scoped to .cc-*. */

.cc {
  --cc-ink: #0a1320;
  --cc-panel-bg: #0b1624;
  --cc-gold: #d4aa5c;
  --cc-gold-ink: #8a6526;
  --cc-text: rgba(233, 238, 245, 0.78);
  --panel: clamp(340px, 34vw, 560px);
  position: relative;
  background: var(--cc-ink);
}
.cc ol { list-style: none; }

.cc-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.cc-on .cc-stage { /* the panel's navy across the whole stage, so nothing seams while the desk is still hidden */
  contain: layout paint;
  background: linear-gradient(180deg, #0c1828 0%, var(--cc-panel-bg) 60%, #0a1422 100%);
}

/* ---------- The scene (right) ---------- */
.cc-scene {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--panel);
  right: 0;
  overflow: hidden;
  background: #0c1727;
}

/* World layout: 3088 x 1923 units. Static (no .cc-on): scaled to the scene with percentages.
   Moving (.cc-on): one unit per px, placed by the camera transform. */
.cc-world {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  aspect-ratio: 3088 / 1923;
  transform: translateY(-50%);
}
.cc-on .cc-world {
  left: 0;
  right: auto;
  top: 0;
  width: 3088px;
  height: 1923px;
  aspect-ratio: auto;
  transform-origin: 0 0;
}
.cc-desk,
.cc-light {
  position: absolute;
  left: -69.82%;
  top: -132.76%;
  width: 239.64%;
  height: 365.57%;
  max-width: none;
  pointer-events: none;
}
.cc-light { /* warm window light over the documents, falling off into the desk */
  background:
    radial-gradient(ellipse 17% 15% at 58% 43%, rgba(255, 226, 180, 0.1), rgba(255, 226, 180, 0) 100%),
    radial-gradient(ellipse 27% 25% at 51% 49%, rgba(5, 10, 18, 0) 58%, rgba(5, 10, 18, 0.5) 100%);
}

.cc-doc {
  position: absolute;
  left: calc(var(--x) / 3088 * 100%);
  top: calc(var(--y) / 1923 * 100%);
  width: calc(var(--w) / 3088 * 100%);
  height: calc(var(--h) / 1923 * 100%);
  transform-origin: 50% 50%;
}
.cc-doc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.cc-doc[data-doc="folder"] .cc-doc__img { border-radius: 1.09% / 0.8%; }
.cc-doc__shadow { /* the shadow art holds a sheet at 60% x 70.3% of its canvas; offset down-right, away from the light */
  position: absolute;
  left: -33.33%;
  top: -21.1%;
  width: 166.67%;
  height: 142.2%;
  max-width: none;
  transform: translate(0.9%, 1.7%);
}
.cc-doc__dim { position: absolute; inset: 0; background: #08111d; opacity: 0; }

/* Screen-space layers over the desk */
.cc-spot { /* darkens everything but a soft pool around the subject */
  position: absolute;
  left: 0;
  top: 0;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  background: radial-gradient(circle closest-side, rgba(6, 11, 20, 0) 8%, rgba(6, 11, 20, 0.46) 22%, rgba(6, 11, 20, 0.6) 100%);
  opacity: 0;
  pointer-events: none;
}
.cc-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cc-field { fill: rgba(182, 137, 58, 0.1); stroke: #9a7430; stroke-width: 1.2; opacity: 0; }
.cc-line { stroke: #9a7430; stroke-width: 1; opacity: 0; }
.cc-dot { fill: #b6893a; stroke: #f8f5ee; stroke-width: 1.5; opacity: 0; }
.cc-corner { fill: none; stroke: var(--cc-gold); stroke-width: 1.2; opacity: 0; }
.cc-tag {
  position: absolute;
  left: 0;
  top: 0;
  text-shadow: 0 0 3px #f6f2ea, 0 0 7px #f6f2ea;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cc-gold-ink);
  opacity: 0;
  pointer-events: none;
}
.cc-shade { /* lens falloff, the seam into the panel, and a quiet band for the notes */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--cc-panel-bg) 0, rgba(11, 22, 36, 0.55) 3%, rgba(11, 22, 36, 0) 12%),
    linear-gradient(180deg, rgba(8, 15, 26, 0.88) 0, rgba(8, 15, 26, 0.55) 22%, rgba(8, 15, 26, 0) 40%),
    radial-gradient(ellipse 75% 80% at 55% 56%, rgba(5, 10, 18, 0) 55%, rgba(5, 10, 18, 0.5) 100%);
}

/* ---------- Stage notes: the brief explanation over the scene ---------- */
.cc-notes {
  position: absolute;
  z-index: 15;
  left: calc(var(--panel) + clamp(32px, 4vw, 76px));
  top: 150px;
  width: min(460px, 42vw);
  pointer-events: none;
}
.cc-notes::before { /* a quiet pool behind the notes, whatever the camera is looking at */
  content: "";
  position: absolute;
  inset: -100px -170px -90px -130px;
  background: radial-gradient(closest-side, rgba(8, 15, 26, 0.93) 42%, rgba(8, 15, 26, 0.66) 68%, rgba(8, 15, 26, 0));
}
.cc-note { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; text-shadow: 0 2px 18px rgba(4, 9, 16, 0.55); }
.cc-note__num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--cc-gold);
}
.cc-note__num::after { content: ""; width: 36px; height: 1px; background: var(--cc-gold); opacity: 0.8; }
.cc-note__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.cc-note__text { margin-top: 12px; font-size: 1rem; line-height: 1.65; color: var(--cc-text); }

.cc-topfade { /* the chapter's rising edge: About's white, through its pale sky, into the navy (js scales it away) */
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  z-index: 25;
  background: linear-gradient(
    180deg,
    #fff 0,
    #f5f9fd 9%,
    #e2ecf9 21%,
    rgba(186, 211, 243, 0.82) 34%,
    rgba(111, 168, 236, 0.42) 52%,
    rgba(111, 168, 236, 0.14) 72%,
    rgba(111, 168, 236, 0) 100%
  );
  transform-origin: 50% 0;
  pointer-events: none;
  opacity: 0;
}
.cc-on .cc-topfade { display: none; }

/* ---------- Our Services -> Customs (motion only; js/customs.js drives every value) ---------- */
.cc-w { display: inline-block; transform-origin: 0 0; } /* the heading, word by word, while it travels */

/* ---------- The panel (left): title and the six stages ---------- */
.cc-panel {
  position: absolute;
  z-index: 20;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 150px clamp(28px, 4.4vw, 84px) 56px;
  background: linear-gradient(180deg, #0c1828 0%, var(--cc-panel-bg) 60%, #0a1422 100%);
}
.cc-on .cc.cc-arriving .cc-panel { background: none; } /* while the chapter opens; the stage is the same navy */
.cc-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e7ecf2;
}
.cc-label::before { content: ""; width: 40px; height: 1px; background: var(--color-gold); }
.cc-title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 3vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
}

.cc-index { position: relative; margin-top: 44px; padding-left: 24px; }
.cc-index::before { /* track */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.cc-index::after { /* the gold indicator, placed by js on the active stage */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--bar-h, 0px);
  background: var(--cc-gold);
  transform: translateY(var(--bar-y, 0px));
}
.cc-index__item {
  padding: 12px 0;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e7ecf2;
}
.cc-index__head { display: grid; grid-template-columns: 42px 1fr; align-items: baseline; }
.cc-index__num { font-weight: 700; letter-spacing: 0.12em; color: var(--cc-gold); }
.cc-index__text {
  display: block;
  margin: 6px 0 0 42px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cc-text);
}
/* While the camera runs, the index is orientation only: the stage copy appears on the scene instead. */
.cc-on .cc-index__item {
  opacity: 0.38;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cc-on .cc-index__num { color: color-mix(in srgb, var(--cc-gold) calc(var(--e, 0) * 100%), #8d99a9); }
.cc-on .cc-index__head:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 6px; }
.cc-on .cc-index__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* no JS / reduced motion: nothing moves, so the scene notes are not needed */
html:not(.cc-on) .cc-notes,
html:not(.cc-on) .cc-spot,
html:not(.cc-on) .cc-draw,
html:not(.cc-on) .cc-tag { display: none; }
html:not(.cc-on) .cc-stage { height: auto; min-height: max(600px, 100vh); min-height: max(600px, 100svh); }
html:not(.cc-on) .cc-panel { position: relative; min-height: inherit; padding-top: 170px; padding-bottom: 64px; }
html:not(.cc-on) .cc-index { margin-top: 30px; }
html:not(.cc-on) .cc-index__item { padding: 10px 0; }

/* Shorter laptop screens */
@media (min-width: 860px) and (max-height: 820px) {
  .cc-panel { padding-top: 132px; padding-bottom: 32px; }
  .cc-index { margin-top: 30px; }
  .cc-index__item { padding: 9px 0; }
  .cc-notes { top: 136px; }
  .cc-note__title { font-size: 1.32rem; }
}

/* ---------- Phones / small tablets: the scene fills the screen, the index becomes a progress strip ---------- */
@media (max-width: 859px) {
  .cc-scene { left: 0; }
  .cc-shade {
    background:
      linear-gradient(180deg, rgba(8, 15, 26, 0.9) 0, rgba(8, 15, 26, 0.6) 22%, rgba(8, 15, 26, 0) 36%),
      linear-gradient(0deg, rgba(8, 15, 26, 0.92) 0, rgba(8, 15, 26, 0.7) 22%, rgba(8, 15, 26, 0) 42%),
      radial-gradient(ellipse 90% 70% at 50% 50%, rgba(5, 10, 18, 0) 60%, rgba(5, 10, 18, 0.4) 100%);
  }
  .cc-on .cc-panel {
    bottom: auto;
    right: 0;
    width: auto;
    display: block;
    padding: 118px 20px 0;
    background: none;
  }
  .cc-on .cc-label { position: absolute; left: 20px; top: 88px; opacity: 0; } /* phones: the title stands alone */
  .cc-on .cc-title { margin: 0; font-size: 1.12rem; line-height: 1.25; }
  .cc-on .cc-title br { display: none; }
  .cc-on .cc-index { display: flex; gap: 6px; margin-top: 12px; padding: 0; }
  .cc-on .cc-index::before,
  .cc-on .cc-index::after { display: none; }
  .cc-on .cc-index__item {
    flex: 1;
    display: block;
    padding: 0 0 7px;
    font-size: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--cc-gold) calc(var(--e, 0) * 100%), transparent);
  }
  .cc-on .cc-index__head { display: block; }
  .cc-on .cc-index__num { font-size: 0.66rem; }
  .cc-on .cc-index__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .cc-notes { left: 20px; right: 20px; top: auto; bottom: 30px; width: auto; }
  .cc-note { top: auto; bottom: 0; }
  .cc-note__title { font-size: 1.2rem; margin-top: 8px; }
  .cc-note__text { font-size: 0.92rem; line-height: 1.55; margin-top: 8px; }
  .cc-note__text br { display: none; }
  .cc-tag { font-size: 0.58rem; }

  /* static (no JS / reduced motion): panel first, then the desk */
  html:not(.cc-on) .cc-stage { height: auto; min-height: 0; display: flex; flex-direction: column; }
  html:not(.cc-on) .cc-panel { order: -1; width: auto; min-height: 0; padding: 120px 20px 28px; }
  html:not(.cc-on) .cc-scene { position: relative; left: auto; height: 68vw; min-height: 260px; }
  html:not(.cc-on) .cc-world { left: -30%; right: -30%; }
}