/* ==========================================================
   GoldBest Services - Base (page-wide rules shared by every page)
   Link this first, before the section stylesheets.
   ========================================================== */

html { background: #fff; }
body {
  position: relative;
  margin: 0;
  background: transparent;           /* lets the side fibers show (they sit behind the content) */
}
img { max-width: 100%; height: auto; }

/* Older article and service pages still use the original content markup. */
.pagetitle,
.page-title-1 h1 {
  width: min(1100px, calc(100% - 32px));
  margin: 28px auto 20px;
  color: #0b2545;
  font: 800 clamp(28px, 6vw, 44px)/1.15 "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.pagetitle u { text-decoration: none; }
.page-title-1 .container { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
.page-title-1 h1 { width: auto; }
.page-content {
  padding: 12px 0 64px;
  color: #3f4d61;
  font: 400 16px/1.65 "Plus Jakarta Sans", system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.page-content > .container { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
.page-content .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; margin-bottom: 32px; }
.page-content .row > [class^="grid_"] { flex: 1 1 320px; min-width: 0; }
.page-content .row > .grid_8 { flex: 2 1 500px; }
.page-content .row > .grid_4 { flex: 1 1 240px; }
.page-content h2, .page-content h3 { margin: 0 0 16px; color: #0b2545; line-height: 1.25; }
.page-content h2 { font-size: clamp(24px, 4vw, 34px); }
.page-content h3 { font-size: clamp(21px, 3vw, 27px); }
.page-content p { margin: 0 0 1em; }
.page-content a { color: #1c4580; }
.page-content a:has(> img) { display: inline-block; max-width: 100%; }
.page-content img { max-width: min(100%, calc(100vw - 32px)); }
.page-content .nivoSlider { position: relative; max-width: 100%; overflow: hidden; border-radius: 16px; }
.page-content .nivoSlider img { display: block; max-width: 100%; }
.page-content .nivo-directionNav { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.page-content .tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.page-content .tabs a { display: inline-block; padding: 8px 12px; border-radius: 8px; background: #e8f0fb; text-decoration: none; }

/* smooth, short cross-fade when moving from page to page (browsers without support just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* old <br> spacers between page sections: spacing is handled by the sections now */
body > br { display: none; }


/* ---------- Side fibers (animated decor in the empty left/right margins) ----------
   body::before / body::after : the strands. Each layer is 2 screens tall and scrolls
     by exactly one screen, the SVG tile repeats seamlessly, so the flow never jumps.
     Left flows up, right flows down; a second, independent animation sways them sideways.
   html::before / html::after : soft glows that slowly breathe.
   Performance: only `transform`, `translate` and `opacity` are animated (GPU compositor,
   no repaint, no layout), no images, no JS. Hidden below 1100px and for reduced motion. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  z-index: -1;
  width: clamp(130px, calc(50vw - 560px), 300px);
  height: 200vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 1000' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M70 0C130 167 10 333 70 500C130 667 10 833 70 1000' stroke='%23ebb741' stroke-opacity='0.75' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M58 0C122 167 -6 333 58 500C122 667 -6 833 58 1000' stroke='%23ebb741' stroke-opacity='0.4' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M86 0C28 167 144 333 86 500C28 667 144 833 86 1000' stroke='%235fa8e8' stroke-opacity='0.55' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 0C-24 333 116 667 46 1000' stroke='%231c4580' stroke-opacity='0.26' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M110 0C164 333 56 667 110 1000' stroke='%235fa8e8' stroke-opacity='0.38' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M32 0C80 167 -16 333 32 500C80 667 -16 833 32 1000' stroke='%231c4580' stroke-opacity='0.18' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M128 0C82 167 174 333 128 500C82 667 174 833 128 1000' stroke='%23ebb741' stroke-opacity='0.3' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M96 0C172 333 20 667 96 1000' stroke='%231c4580' stroke-opacity='0.16' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='118' cy='210' r='2.2' fill='%23ebb741' fill-opacity='.7'/%3E%3Ccircle cx='60' cy='560' r='1.6' fill='%235fa8e8' fill-opacity='.7'/%3E%3Ccircle cx='132' cy='830' r='1.8' fill='%23ebb741' fill-opacity='.5'/%3E%3C/svg%3E") 0 0 / 100% 100vh repeat-y;
  pointer-events: none;
  will-change: transform;
}
body::before {
  left: 0;
  animation:
    gb-flow-up 48s linear infinite,
    gb-sway 11s ease-in-out infinite alternate;
}
body::after {
  right: 0;
  animation:
    gb-flow-down 56s linear infinite,
    gb-sway 13s ease-in-out -6s infinite alternate;
}
@keyframes gb-flow-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -100vh, 0); }
}
@keyframes gb-flow-down {                /* mirrored copy, moving the other way */
  from { transform: scaleX(-1) translate3d(0, -100vh, 0); }
  to   { transform: scaleX(-1) translate3d(0, 0, 0); }
}
@keyframes gb-sway {
  from { translate: -10px 0; }
  to   { translate: 10px 0; }
}

html::before,
html::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: clamp(160px, calc(50vw - 520px), 360px);
  pointer-events: none;
  will-change: opacity, transform;
}
html::before {
  left: 0;
  background:
    radial-gradient(70% 34% at 22% 30%, rgba(95, 168, 232, .16), transparent 70%),
    radial-gradient(60% 28% at 30% 78%, rgba(235, 183, 65, .14), transparent 70%);
  animation: gb-breathe 9s ease-in-out infinite alternate;
}
html::after {
  right: 0;
  background:
    radial-gradient(70% 34% at 78% 66%, rgba(95, 168, 232, .16), transparent 70%),
    radial-gradient(60% 28% at 70% 22%, rgba(235, 183, 65, .14), transparent 70%);
  animation: gb-breathe 11s ease-in-out -4s infinite alternate;
}
@keyframes gb-breathe {
  from { opacity: .45; transform: translate3d(0, -2%, 0) scale(.96); }
  to   { opacity: 1;   transform: translate3d(0, 2%, 0) scale(1.04); }
}

/* only where there is empty side space */
@media (max-width: 1100px) {
  body::before, body::after,
  html::before, html::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  html::before, html::after { animation: none; }
}