/*
Theme Name: Gulf Ports Logistics
Theme URI: https://gulfports-sa.com
Author: CodeLink
Description: Custom theme for موانئ الخليج للخدمات اللوجستية, built to the company's own printed brand system — curved swoops, navy title bars, circular icon badges and light-blue pill cards. Arabic-first RTL, no build step, no jQuery, no plugins.
Version: 3.0.0
Requires PHP: 8.0
Text Domain: gulfports
*/

/* ============================================================
   TAJAWAL — self-hosted, Arabic + Latin subsets only.
   ============================================================ */
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-arabic-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-arabic-800-normal.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Tajawal;src:url('assets/fonts/tajawal-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

/* ============================================================
   TOKENS
   ------------------------------------------------------------
   Palette sampled from the printed brochure, not invented.

   One accent hue (the logo's blue) in two tints, chosen by
   contrast, not by taste:
     --accent      #2E6DB4  text on LIGHT   (4.96:1 on --page)
     --accent-lift #5AADE4  text on NAVY    (5.60:1 on --navy-900)
   The light tint never carries text on a light ground: it
   measures 2.46:1 there, which fails AA even at display size.

   Radius scale is locked to three values and nothing else:
     --r     panels, cards, images
     --r-sm  inputs, notices, small chips
     999px   pills and buttons only
   ============================================================ */
:root{
  --navy-900:#0F2B5B;   /* deepest — bands, headlines */
  --navy-800:#14366B;
  --navy-700:#1B4D8F;   /* title bars */
  --accent:#2E6DB4;     /* on light */
  --accent-mid:#3E86C9;
  --accent-lift:#5AADE4;/* on navy */
  --blue-200:#A9D2EF;
  --pill-a:#EAF4FC;
  --pill-b:#D7E9F8;
  --page:#F4F9FD;
  --ink:#173A63;        /* body copy — navy, never grey */
  --ink-soft:#4A6B93;   /* 5.14:1 on --page */
  --line:#DCE9F5;

  --shell:1180px;
  --pad:clamp(1.15rem,4vw,3rem);
  --gap-sec:clamp(3.5rem,7.5vw,6.5rem);

  --r:22px;
  --r-sm:12px;

  /* Scale ratio ≥1.35 between steps. The previous scale sat at ~1.2 and
     read as uncommitted: the hero headline capped at 3.5rem on a 1440
     canvas, which is a body-copy decision wearing a headline's job. */
  --fs-display:clamp(3rem,7vw,6rem);
  --fs-h1:clamp(2.4rem,5vw,4rem);
  --fs-h2:clamp(1.9rem,4vw,3rem);
  --fs-h3:clamp(1.05rem,2vw,1.3rem);
  --fs-body:1.0625rem;

  /* The brochure's cover wedge, as an angle the page can reuse. */
  --cut:5.5vw;

  --shadow-sm:0 4px 14px rgba(15,43,91,.06);
  --shadow-md:0 12px 32px rgba(15,43,91,.09);
  --shadow-lg:0 22px 54px rgba(15,43,91,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:Tajawal,system-ui,sans-serif;
  font-size:var(--fs-body);line-height:1.9;   /* Arabic wants the air */
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;color:var(--navy-900);letter-spacing:0}
h1,h2{font-weight:800;line-height:1.28}
h3,h4{font-weight:700;line-height:1.4}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent-mid);outline-offset:3px;border-radius:4px}

/* width:100% is load-bearing. As a grid or flex item, `margin-inline:auto`
   on an auto-width box makes it shrink to fit-content instead of filling
   its track, which silently centres and narrows the hero. */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:var(--gap-sec)}
.sec--navy{background:var(--navy-900);color:#fff}
.sec--white{background:#fff}
.sec--flush{padding-top:0}
/* A navy field with a curve on both edges needs room between them. */
.sec--band{padding-block:clamp(1rem,3vw,2rem) clamp(2.5rem,5vw,4rem)}
/* Inner templates start below the fixed header rather than under it. */
.sec--inner{padding-top:clamp(7.5rem,13vw,9.5rem);min-height:60svh}

.prose{max-width:68ch}
.prose h1{font-size:var(--fs-h2)}
.prose>*+*{margin-top:1.2rem}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{list-style:disc;padding-inline-start:1.4rem}
.prose li{margin-top:.4rem}
.mt-2{margin-top:2rem}

/* Hidden from sight, still in the accessibility tree. Clipped to nothing
   rather than parked at -9999px: an off-canvas box in an RTL document
   sits to the RIGHT of the viewport and only stays invisible because
   `overflow-x:hidden` happens to be on <body>. */
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.skip{position:fixed;top:.6rem;inset-inline-start:.9rem;z-index:200;
  background:#fff;color:var(--navy-900);font-weight:700;
  padding:.7rem 1.2rem;border-radius:999px;box-shadow:var(--shadow-lg);
  transform:translateY(-200%);transition:transform .18s}
.skip:focus{transform:none}

/* ------------------------------------------------------------
   Section head: two-tone headline over the brochure's dash-dot
   rule. Start-aligned everywhere — one alignment for the whole
   page, not centred here and left there.
   ------------------------------------------------------------ */
.h-two{font-size:var(--fs-h2);text-wrap:balance}
.h-two .b{display:block;font-weight:800;color:var(--navy-900)}
.h-two .l{display:block;font-weight:500;color:var(--accent)}
.sec--navy .h-two .b{color:#fff}
.sec--navy .h-two .l{color:var(--accent-lift)}
.hero .h-two{font-size:var(--fs-display)}

.dashdot{display:flex;align-items:center;gap:.5rem;margin-top:1.05rem}
.dashdot::before{content:'';height:3px;width:66px;background:var(--accent-mid);border-radius:2px}
.dashdot::after{content:'';height:7px;width:7px;border-radius:50%;background:var(--navy-800)}
.sec--navy .dashdot::after{background:#fff}

/* Sized in rem, not ch: `ch` resolves against this element's own 17px
   font-size, which caps the 2.6rem headline inside it at ~450px. */
.shead{max-width:min(100%,48rem)}
.lede{color:var(--ink-soft);max-width:52ch;font-size:1.05rem;margin-top:1.15rem}
.sec--navy .lede{color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------
   BUTTONS — two fills, each measured against the ground it sits
   on. The brand's light blue is never a button fill: white text
   on it is 2.46:1.
     .btn--light  white on navy grounds    (11.8:1)
     .btn--navy   navy on light grounds    (11.8:1)
     .btn--ghost  outline, navy grounds only
   ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  white-space:nowrap;font-weight:700;font-size:1rem;padding:.92rem 2.1rem;
  border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .12s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn--light{background:#fff;color:var(--navy-900);box-shadow:var(--shadow-md)}
.btn--light:hover{background:var(--pill-a);box-shadow:var(--shadow-lg)}
.btn--navy{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm)}
.btn--navy:hover{background:var(--navy-900);box-shadow:var(--shadow-md)}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn--sm{padding:.62rem 1.45rem;font-size:.95rem}
.btn--block{width:100%}

/* Dotted world-map wash the brochure runs behind navy areas. */
.dots{background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.2px);
  background-size:11px 11px}

/* The defining motif: a curved edge between a navy field and a light one.
   The wrapper carries the ground the curve is cutting into; the path
   carries the curve. See gp_swoop(). */
.swoop-wrap{display:block;line-height:0}
/* -1px: the curve's own colour bleeds over the section below so the
   antialiased last row does not read as a hairline rule. */
.swoop{display:block;width:100%;height:clamp(44px,6.5vw,96px);margin-block-end:-1px}
.swoop path{fill:currentColor}

/* ============================================================
   HEADER — fixed from the first paint so it never jumps from
   absolute to fixed mid-scroll; only its ground changes.
   ============================================================ */
.head{position:fixed;inset-inline:0;top:0;z-index:60;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.head.stuck{background:rgba(15,43,91,.96);box-shadow:0 2px 22px rgba(15,43,91,.28);
  backdrop-filter:saturate(140%) blur(8px)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-block:.7rem;min-height:64px}
.head__act{display:flex;align-items:center;gap:.75rem}
.brand{display:flex;align-items:center;gap:.7rem}
/* Half the mark is navy, so on a navy ground it needs its own white
   field or it reads as a single stray light-blue arrow. */
.brand img{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;padding:7px;
  box-shadow:0 4px 12px rgba(0,0,0,.2)}
.brand b{display:block;font-size:1rem;font-weight:800;color:#fff;line-height:1.25}
.brand s{display:block;text-decoration:none;font-size:.72rem;font-weight:500;color:var(--blue-200);line-height:1.2}
.brand--lg{margin-bottom:1rem}
.brand--lg img{width:52px;height:52px;padding:8px}
.brand--lg b{font-size:1.1rem}
.nav{display:flex;gap:1.85rem}
.nav a{position:relative;font-weight:500;font-size:.98rem;color:rgba(255,255,255,.84);padding-block:.35rem}
.nav a::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;
  background:var(--accent-lift);transform:scaleX(0);transform-origin:inline-end;transition:transform .25s}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1);transform-origin:inline-start}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:0;color:#fff;cursor:pointer}
.mnav{display:none;background:rgba(15,43,91,.98);backdrop-filter:blur(8px);
  max-height:calc(100dvh - 64px);overflow-y:auto}
.mnav.open{display:block}
/* :not(.btn) is load-bearing. `.mnav a` is (class + type) and outranks
   `.btn--light` (class alone), so an unscoped rule repainted the CTA's
   label white on its own white pill and the button read as blank. */
.mnav a:not(.btn){display:block;padding:.95rem 0;color:#fff;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.12)}
.mnav .btn{margin-block:1.2rem .4rem}
@media(max-width:900px){.nav,.head__act .btn{display:none}.burger{display:inline-flex}}

/* ============================================================
   HERO — asymmetric split: copy on the inline-start side of a
   navy wash, the footage clearing toward the far edge.
   ============================================================ */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate;
  display:grid;align-items:center;min-height:min(100svh,860px)}
/* The brochure cover cuts a navy wedge across its top corner. Same angle,
   as a clip on the section's trailing edge rather than a background image,
   so it survives any viewport without a second asset. */
.hero::after{content:'';position:absolute;inset-inline:0;bottom:0;height:var(--cut);z-index:1;
  background:var(--navy-800);clip-path:polygon(0 100%,100% 0,100% 100%)}
[dir=ltr] .hero::after{clip-path:polygon(0 0,100% 100%,0 100%)}
.hero__bg{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover}
/* The plate is 21:9 and a portrait viewport crops roughly 60% of its width
   away. Shifting that crop toward the quay was tried and reverted: it
   lands on the crane legs, which are the darkest mass in the frame, and
   the fold went heavy again. Centred keeps the ship's bow and the lit
   water, which is the half of the photograph worth keeping.
   A purpose-shot portrait plate is the real fix. */
@media(max-width:880px){
  .hero__bg img,.hero__bg video{object-position:50% 42%}
}
.hero__bg video{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.hero__bg video.on{opacity:1}
/* The copy runs from the inline-start edge to roughly 55% across, so the
   wash has to still be carrying at 55%: measured against the actual
   footage, .66 there put the body copy at 4.12:1. */
/* The brochure is a bright document: its photographs keep their sky. The
   previous wash ran at .97 across the copy side, which left a navy panel
   with a ghost of a crane in it — the image was paid for and then painted
   over. Capped at .62 here, and the copy earns its contrast from a local
   scrim behind the text block rather than from drowning the whole frame. */
.hero__wash{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to left,rgba(15,43,91,.62) 0%,rgba(15,43,91,.55) 38%,rgba(15,43,91,.4) 62%,rgba(15,43,91,.18) 86%,rgba(15,43,91,.08) 100%)}
[dir=ltr] .hero__wash{background:linear-gradient(to right,rgba(15,43,91,.62) 0%,rgba(15,43,91,.55) 38%,rgba(15,43,91,.4) 62%,rgba(15,43,91,.18) 86%,rgba(15,43,91,.08) 100%)}
/* Below the split the copy spans the full width, so the wash must too —
   but it stays a photograph there as well. */
@media(max-width:880px){
  .hero__wash,[dir=ltr] .hero__wash{
    background:linear-gradient(to top,rgba(15,43,91,.74) 0%,rgba(15,43,91,.54) 55%,rgba(15,43,91,.26) 100%)}
}
.hero__dots{position:absolute;inset-block:0;inset-inline-start:0;width:48%;z-index:-1;opacity:.45}
.hero__in{position:relative;padding-block:clamp(6.5rem,11vw,7.5rem) clamp(3rem,7vw,4.5rem)}
/* The copy sits against the inline-start edge of the shell, where the
   navy wash is at full strength. It must NOT inherit .shell's auto
   margins, or it centres itself over the brightest part of the frame. */
.hero__copy{max-width:44rem;position:relative}
/* Now that the global wash is light enough to keep the photograph, the
   type carries its own ground. A soft ellipse rather than a panel: a
   hard-edged box over a photo reads as a caption card, not as a hero. */
.hero__copy::before{content:'';position:absolute;z-index:-1;
  inset-block:-14% -18%;inset-inline:-24% -60%;
  background:radial-gradient(60% 60% at 30% 50%,
    rgba(9,28,60,.86) 0%,rgba(9,28,60,.72) 45%,rgba(9,28,60,.3) 72%,transparent 100%)}
[dir=ltr] .hero__copy::before{inset-inline:-60% -24%;
  background:radial-gradient(60% 60% at 70% 50%,
    rgba(9,28,60,.86) 0%,rgba(9,28,60,.72) 45%,rgba(9,28,60,.3) 72%,transparent 100%)}
@media(max-width:880px){.hero__copy::before{inset-inline:-30%;
  background:radial-gradient(75% 60% at 50% 55%,
    rgba(9,28,60,.8) 0%,rgba(9,28,60,.62) 55%,transparent 100%)}}

.hero h1{color:#fff;text-shadow:0 2px 28px rgba(9,28,60,.55)}
.hero h1 .b{color:#fff}
/* The second line is the longer half of the sentence: subordinate size
   as well as subordinate weight, so the headline holds two lines. At the
   new display size .6em was still competing; .52 lets the first line lead. */
.hero h1 .l{color:var(--accent-lift);font-size:.52em;line-height:1.35;margin-top:.4rem}
.hero__p{margin-top:1.6rem;color:#fff;max-width:42ch;font-size:1.15rem;line-height:1.85;
  text-shadow:0 1px 16px rgba(9,28,60,.6)}
.hero__cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.85rem}
/* One solid, one outline. Two white pills side by side gave the fold no
   primary action — and the header CTA was a third copy of the same shape. */
.hero__cta .btn--light{background:var(--accent);color:#fff;box-shadow:var(--shadow-lg)}
.hero__cta .btn--light:hover{background:var(--accent-mid)}

/* Navy band under the hero: the four transport modes, as printed. */
.modes{background:var(--navy-800);position:relative;z-index:2}
.modes__in{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding-block:1.6rem}
.mode{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  color:#fff;position:relative}
.mode+.mode::before{content:'';position:absolute;inset-block:12%;inset-inline-start:0;
  width:1px;background:rgba(255,255,255,.22)}
.mode svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:1.6}
.mode span{font-size:.9rem;font-weight:500}
@media(max-width:560px){
  .modes__in{grid-template-columns:repeat(2,1fr);gap:1.3rem .5rem}
  .mode:nth-child(3)::before{display:none}
}

/* ============================================================
   SERVICE ROWS — brochure page 4: a photo and a white card
   meeting flush, the pair mirroring on every second row so the
   eye never settles into a template.
   ============================================================ */
.srv{display:grid;gap:0;margin-bottom:clamp(1.5rem,3vw,2.6rem);align-items:stretch}
.srv__img{border-radius:var(--r);overflow:hidden;min-height:230px;background:var(--line);order:-1}
.srv__img img{width:100%;height:100%;object-fit:cover;min-height:230px}
/* The card no longer stretches to the photo's height. Previously it did,
   and the content floated inside roughly 40% empty white — the single
   loudest "unfinished" signal on the page. Now the photo sets the row
   height, the card sizes to its own content and centres against it. */
.srv__body{position:relative;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:0 0 1.5rem;
  display:flex;flex-direction:column;gap:.15rem}
@media(min-width:880px){
  .srv__body{align-self:center}
  /* The brochure's signature move: the card overlaps the photograph with
     a white gutter reading as a cut, rather than the two meeting flush
     on one flat plane. */
  .srv__body{margin-inline-end:-3.5rem;z-index:1;
    box-shadow:0 24px 60px rgba(15,43,91,.18)}
  .srv:nth-child(even) .srv__body{margin-inline-end:0;margin-inline-start:-3.5rem}
  .srv__img{margin-block:1.6rem}
}

@media(min-width:880px){
  .srv{grid-template-columns:1fr 52%}
  /* odd rows: card on the inline-start, photo on the outside */
  .srv__body{order:1}
  .srv__img {order:2}
  /* even rows mirror the pair */
  .srv:nth-child(even){grid-template-columns:52% 1fr}
  .srv:nth-child(even) .srv__body{order:2}
  .srv:nth-child(even) .srv__img{order:1}
}
/* One row per page leaves the shell and bleeds to the viewport edge, so
   the grid is not the only thing the eye ever sees. Third row: the photo
   runs off the trailing edge the way the brochure runs photos off the
   page trim. */
@media(min-width:1180px){
  /* Row 3 is odd, so its photo sits on the inline-END side; that is the
     edge it runs off. --pad keeps the shell's own gutter out of the sum. */
  .srv:nth-child(3){grid-template-columns:44% 1fr}
  .srv:nth-child(3) .srv__img{
    margin-inline-end:calc(((100vw - var(--shell)) / -2) - var(--pad));
    border-start-end-radius:0;border-end-end-radius:0}
}

/* The padding lives on the anchor, not the bar: as an inline child the
   link was a 17px-tall tap target inside a 45px bar. */
.srv__bar{background:linear-gradient(to left,var(--navy-700),var(--accent));
  color:#fff;font-weight:800;font-size:var(--fs-h3);
  padding:0;display:inline-block;max-width:calc(100% - 5.5rem);
  border-start-start-radius:var(--r);border-end-end-radius:var(--r)}
.srv__bar a{display:block;padding:.75rem 1.5rem;color:inherit;border-radius:inherit}
[dir=ltr] .srv__bar{background:linear-gradient(to right,var(--navy-700),var(--accent))}
.srv:nth-child(even) .srv__bar{border-start-start-radius:0;border-start-end-radius:var(--r)}
@media(max-width:879px){.srv:nth-child(even) .srv__bar{border-start-start-radius:var(--r);border-start-end-radius:0}}
.srv__list{padding:1.2rem 1.5rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.srv__list li{font-size:.92rem;font-weight:500;color:var(--navy-700);
  background:var(--pill-a);border-radius:999px;padding:.3rem .95rem}
.srv__note{padding:1rem 1.5rem 0;color:var(--ink);font-size:1.02rem;line-height:1.85;max-width:44ch}

/* Navy disc, white icon, pale ring — lifted from the brochure. */
.badge{position:absolute;top:.6rem;inset-inline-end:1.15rem;
  width:64px;height:64px;border-radius:50%;background:var(--navy-800);
  display:grid;place-items:center;box-shadow:0 0 0 5px var(--pill-a),0 6px 16px rgba(15,43,91,.18)}
.badge svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.6}
@media(max-width:520px){.badge{width:52px;height:52px;top:.45rem;inset-inline-end:.9rem}.badge svg{width:26px;height:26px}}

/* ============================================================
   SLOGAN BAND — one wide photograph carrying the company's own
   line. A breather between two dense sections, and the only
   full-bleed image on the page.
   ============================================================ */
.band{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(240px,34vw,380px);display:grid;place-items:center;text-align:center}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Enough scrim for AAA on the line, not so much that the photograph
   stops being a photograph. */
.band::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,43,91,.42) 0%,rgba(15,43,91,.62) 55%,rgba(15,43,91,.9) 100%)}
.band__t{color:#fff;font-size:clamp(1.5rem,3.8vw,2.7rem);font-weight:800;line-height:1.5;
  padding:clamp(2.5rem,6vw,4rem) var(--pad);max-width:42ch;text-wrap:balance;
  /* The scrim is light enough now to keep the golden hour in the photo,
     so the line carries its own halo instead of leaning on the gradient. */
  text-shadow:0 2px 24px rgba(9,28,60,.8),0 1px 4px rgba(9,28,60,.5)}
.band__t i{font-style:normal;color:var(--accent-lift)}

/* ============================================================
   VALUE-ADDED — deliberately NOT another photo row. A navy grid
   of four regulatory cards; the third layout family on the page.
   ============================================================ */
.vgrid{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:720px){.vgrid{grid-template-columns:1fr 1fr}}
.vcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:1.7rem 1.6rem;
  display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;
  transition:background .25s,border-color .25s,transform .25s}
.vcard:hover{background:rgba(255,255,255,.1);border-color:rgba(90,173,228,.5);transform:translateY(-3px)}
.vcard__ic{width:58px;height:58px;border-radius:50%;background:var(--accent-lift);
  display:grid;place-items:center;flex:none}
.vcard__ic svg{width:29px;height:29px;stroke:var(--navy-900);fill:none;stroke-width:1.7}
.vcard h3{color:#fff;font-size:var(--fs-h3);font-weight:800}
.vcard p{margin-top:.5rem;color:rgba(255,255,255,.76);font-size:.97rem;line-height:1.8}
.vcard ul{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.4rem}
.vcard li{font-size:.85rem;font-weight:500;color:var(--blue-200);
  background:rgba(255,255,255,.08);border-radius:999px;padding:.28rem .85rem}

/* ============================================================
   PROCESS RAIL — four steps on a single connecting line. Fourth
   layout family; the numeral carries the order, which is the
   whole content of the section.
   ============================================================ */
.rail{display:grid;gap:1.6rem;margin-top:2.8rem;position:relative}
@media(min-width:820px){
  .rail{grid-template-columns:repeat(4,1fr);gap:1.4rem}
  /* the line runs behind the discs, from the first to the last */
  .rail::before{content:'';position:absolute;top:36px;inset-inline:12.5%;   /* half the 72px disc */
    height:2px;background:linear-gradient(to left,var(--line),var(--accent-mid),var(--line))}
}
.step{position:relative;text-align:center;display:grid;justify-items:center;gap:.7rem}
.step__n{width:72px;height:72px;border-radius:50%;background:#fff;border:2px solid var(--pill-b);
  display:grid;place-items:center;position:relative;z-index:1;box-shadow:var(--shadow-md);
  transition:border-color .25s,box-shadow .25s}
.step:hover .step__n{border-color:var(--accent-mid);box-shadow:var(--shadow-lg)}
.step__n svg{width:32px;height:32px;stroke:var(--accent);fill:none;stroke-width:1.6}
.step__n b{position:absolute;inset-block-start:-4px;inset-inline-start:-4px;
  width:26px;height:26px;border-radius:50%;background:var(--navy-800);color:#fff;
  font-size:.76rem;font-weight:700;display:grid;place-items:center;line-height:1;
  box-shadow:0 0 0 3px var(--page)}
.sec--white .step__n b{box-shadow:0 0 0 3px #fff}
.step h3{font-size:1.12rem;font-weight:800}
.step p{color:var(--ink-soft);font-size:1rem;line-height:1.8;max-width:32ch}

/* ============================================================
   WHY US — the brochure's capsules, two to a row. Fifth family.
   ============================================================ */
.pills{display:grid;gap:.9rem;margin-top:2.6rem}
@media(min-width:760px){.pills{grid-template-columns:1fr 1fr;gap:1rem 1.2rem}}
.pill{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem;
  background:linear-gradient(to left,var(--pill-a),var(--pill-b));
  border-radius:999px;padding:.55rem .7rem .55rem 1.7rem;
  box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s}
[dir=ltr] .pill{padding:.55rem 1.7rem .55rem .7rem;background:linear-gradient(to right,var(--pill-a),var(--pill-b))}
.pill:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pill h3{font-size:clamp(1rem,1.8vw,1.15rem);font-weight:700}
.pill__div{width:3px;height:32px;background:var(--accent);border-radius:2px;opacity:.45}
.pill__badge{width:56px;height:56px;border-radius:50%;background:var(--navy-800);
  display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 5px 14px rgba(15,43,91,.2)}
.pill__badge svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.6}

/* ============================================================
   ABOUT — prose beside the vision / mission pair, brochure p.3.
   Sixth family.
   ============================================================ */
.about{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media(min-width:960px){.about{grid-template-columns:.85fr 1.15fr}}
.about__p{margin-top:1.4rem;color:var(--ink-soft);line-height:1.95}
.vm{display:grid;gap:1.1rem;position:relative}
/* Layered pair: the photograph sits behind, the vision card rides up over
   its lower edge with a white gutter cutting between them. The gutter is
   a border on the card, not a gap, so it stays a clean trim at any width. */
.vm__shot{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md)}
.vm__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media(min-width:960px){
  .vm{gap:0}
  .vm__shot{margin-inline-end:2.5rem}
  .vm__card--dark{margin-top:-3.5rem;margin-inline-start:2.5rem;position:relative;z-index:1;
    border:6px solid var(--page);box-shadow:0 22px 54px rgba(15,43,91,.22)}
  .sec--white .vm__card--dark{border-color:#fff}
  .vm__card--light{margin-top:1.1rem}
}
.vm__card{border-radius:var(--r);padding:1.8rem 1.75rem;display:flex;gap:1.2rem;align-items:flex-start}
.vm__card--dark{background:var(--navy-800);color:#fff}
.vm__card--dark h3{color:#fff}
.vm__card--light{background:var(--pill-b)}
.vm__ic{width:62px;height:62px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 4px 14px rgba(15,43,91,.14)}
.vm__ic svg{width:30px;height:30px;stroke:var(--navy-800);fill:none;stroke-width:1.6}
.vm__card--light .vm__ic{background:var(--navy-800)}
.vm__card--light .vm__ic svg{stroke:#fff}
.vm h3{font-size:var(--fs-h3);font-weight:800}
.vm p{margin-top:.45rem;font-size:1rem;line-height:1.85}
.vm__card--dark p{color:rgba(255,255,255,.82)}
/* --ink-soft on --pill-b measures 4.43:1, just under AA. --ink is 9.3:1. */
.vm__card--light p{color:var(--ink)}

/* ============================================================
   CONTACT — details list beside the form. Seventh family.
   ============================================================ */
.cgrid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media(min-width:920px){.cgrid{grid-template-columns:1fr 1fr}}
.cinfo{display:grid;gap:1.15rem;margin-top:2rem}
.cinfo li{display:flex;align-items:center;gap:1rem}
.cinfo .ic{width:52px;height:52px;border-radius:50%;background:var(--navy-800);
  display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(15,43,91,.16)}
.cinfo .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7}
.cinfo b{display:block;font-size:.85rem;font-weight:500;color:var(--ink-soft)}
.cinfo span{font-size:1.05rem;font-weight:700;color:var(--navy-900)}
/* Tapping a phone number is the primary conversion on a phone. Inline
   links were 17px tall, under the 24px WCAG 2.5.8 target minimum. */
.cinfo a{display:inline-block;padding-block:.3rem;min-height:24px}
.cinfo a:hover{color:var(--accent)}
.foot li a,.foot__b a{display:inline-block;padding-block:.22rem;min-height:24px}

.form{background:#fff;border-radius:var(--r);padding:clamp(1.35rem,3vw,2.1rem);
  box-shadow:var(--shadow-md)}
.f{margin-bottom:1rem}
.f label{display:block;font-weight:500;font-size:.93rem;margin-bottom:.4rem;color:var(--navy-900)}
.f input,.f textarea{width:100%;padding:.85rem 1.05rem;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--page);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s,background .2s}
.f textarea{resize:vertical;min-height:7rem}
/* Placeholders sit at 5.14:1 on --page; they are hints, never labels. */
.f ::placeholder{color:var(--ink-soft);opacity:1}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--accent-mid);background:#fff}
.f--hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.note{border-radius:var(--r-sm);padding:.9rem 1.1rem;margin-bottom:1.1rem;font-weight:500}
.note--ok{background:#E7F5EC;color:#155F35}
.note--bad{background:#FDECEC;color:#961D1D}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* Masthead. Navy by default; with a photograph behind it on a single
   service page, where the scrim keeps the type at display contrast. */
.phead{position:relative;isolation:isolate;background:var(--navy-900);color:#fff;
  padding-block:clamp(7.5rem,13vw,9.5rem) clamp(2.5rem,5vw,4rem);overflow:hidden}
.phead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phead--img::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to left,rgba(15,43,91,.96) 0%,rgba(15,43,91,.9) 45%,rgba(15,43,91,.62) 78%,rgba(15,43,91,.45) 100%)}
.phead__in{position:relative;max-width:min(100%,52rem)}
.phead .h-two .b{color:#fff}
.phead .h-two .l{color:var(--accent-lift);font-size:.66em;font-weight:500}
.phead .dashdot::after{background:#fff}
.phead .lede{color:rgba(255,255,255,.86)}

.crumb{margin-bottom:1.4rem;font-size:.9rem}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.crumb li{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.65)}
.crumb li+li::before{content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.4);flex:none}
.crumb a{color:rgba(255,255,255,.8)}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumb [aria-current]{color:#fff;font-weight:500}

.nav a.is-here{color:#fff}
.nav a.is-here::after{transform:scaleX(1)}
.mnav a.is-here{color:var(--accent-lift)}

/* ---- services index: photo-topped cards. A different family from the
       home page's alternating rows, so the two never look interchangeable. */
.sgrid{display:grid;gap:1.4rem}
@media(min-width:760px){.sgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.sgrid--3{grid-template-columns:repeat(3,1fr)}}

.scard{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md);
  transition:transform .25s,box-shadow .25s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.scard__link{display:flex;flex-direction:column;height:100%}
.scard__img{position:relative;display:block;aspect-ratio:16/10;background:var(--line)}
.scard__img img{width:100%;height:100%;object-fit:cover}
.scard .badge{top:auto;bottom:-26px;inset-inline-end:1.2rem;width:56px;height:56px;
  box-shadow:0 0 0 5px #fff,0 6px 16px rgba(15,43,91,.2)}
.scard .badge svg{width:28px;height:28px}
.scard__body{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem 1.6rem;flex:1}
.scard__bar{display:block;font-size:var(--fs-h3);font-weight:800;color:var(--navy-900);
  max-width:calc(100% - 4.5rem)}
.scard__note{color:var(--ink-soft);font-size:.98rem;line-height:1.8}
.scard__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.scard__chips span{font-size:.85rem;font-weight:500;color:var(--navy-700);
  background:var(--pill-a);border-radius:999px;padding:.26rem .8rem}
.scard__more,.srv__more{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;
  font-weight:700;font-size:.95rem;color:var(--accent)}
.srv__more{padding:1rem 1.5rem 0;margin-top:0}
.scard__arrow{width:18px;height:18px;flex:none;transition:transform .2s}
.scard:hover .scard__arrow,.srv__more:hover .scard__arrow{transform:translateX(-4px)}
.srv__bar a{color:inherit}

/* ---- one service: body beside a sticky rail ---- */
.svc{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start}
@media(min-width:960px){.svc{grid-template-columns:1fr 22rem}}
.svc__lead{font-size:1.15rem;line-height:1.9;color:var(--ink)}
.h-sub{font-size:1.3rem;font-weight:800;margin-top:2.2rem;margin-bottom:1.1rem;color:var(--navy-900)}
@media(min-width:960px){.svc__side{position:sticky;top:6rem;display:grid;gap:1rem}}
.svc__side{display:grid;gap:1rem}

.sbox{background:#fff;border-radius:var(--r);padding:1.6rem 1.5rem;box-shadow:var(--shadow-md);
  display:grid;gap:.75rem;justify-items:start}
.sbox__ic{width:56px;height:56px;border-radius:50%;background:var(--navy-800);
  display:grid;place-items:center;margin-bottom:.2rem}
.sbox__ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.6}
.sbox h2{font-size:1.2rem;font-weight:800}
.sbox p{color:var(--ink-soft);font-size:.98rem;line-height:1.8}
.sbox .btn{margin-top:.3rem}
.sbox__tel{font-weight:800;font-size:1.15rem;color:var(--navy-900);
  display:inline-block;padding-block:.3rem;min-height:24px}
.sbox__tel:hover{color:var(--accent)}
/* On the --pill-b ground, --ink-soft is 4.43:1 and --accent is 4.26:1.
   Both just miss AA, so this card darkens one step. Same trap as
   .vm__card--light p. */
.sbox--link{background:var(--pill-b);box-shadow:none;transition:background .2s,transform .2s}
.sbox--link:hover{background:var(--pill-a);transform:translateY(-3px)}
.sbox--link p{color:var(--ink)}
.sbox--link .scard__more{color:var(--navy-700)}

/* ---- icon list, used for sub-services and documents ---- */
.ilist{display:grid;gap:.85rem}
@media(min-width:640px){.ilist--2{grid-template-columns:1fr 1fr;gap:.9rem 1.6rem}}
.ilist li{display:flex;align-items:flex-start;gap:.85rem;font-size:1.02rem;color:var(--ink)}
.ilist__ic{width:34px;height:34px;border-radius:50%;background:var(--pill-b);flex:none;
  display:grid;place-items:center}
.ilist__ic svg{width:18px;height:18px;stroke:var(--navy-800);fill:none;stroke-width:1.8}

/* ---- vertical timeline for the process page ---- */
.tline{display:grid;gap:0;position:relative}
.tstep{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  padding-bottom:2.4rem;position:relative}
.tstep:last-child{padding-bottom:0}
/* the spine runs from disc to disc, not past the last one */
.tstep:not(:last-child)::before{content:'';position:absolute;top:80px;bottom:8px;
  inset-inline-start:35px;width:2px;border-radius:2px;
  background:linear-gradient(var(--accent-mid),var(--pill-b))}
.tstep__n{width:72px;height:72px;border-radius:50%;background:#fff;border:2px solid var(--pill-b);
  display:grid;place-items:center;position:relative;z-index:1;box-shadow:var(--shadow-sm)}
.tstep__n svg{width:32px;height:32px;stroke:var(--accent);fill:none;stroke-width:1.6}
.tstep__n b{position:absolute;inset-block-start:-4px;inset-inline-start:-4px;
  width:26px;height:26px;border-radius:50%;background:var(--navy-800);color:#fff;
  font-size:.76rem;font-weight:700;display:grid;place-items:center;line-height:1;
  box-shadow:0 0 0 3px var(--page)}
/* A card, not bare text — but a card sized to its copy. Spanning the full
   1180px shell for two lines of text left roughly two thirds of every row
   as blank white, which read as unfinished rather than as space.
   The accent stripe that used to sit on the inline-start edge is gone:
   a coloured bar down the side of a card is alert-box decoration, and
   the numbered disc beside it already carries the same signal. */
.tstep__b{background:#fff;border-radius:var(--r);padding:1.5rem 1.7rem;
  box-shadow:var(--shadow-md);align-self:start;max-width:60ch}
.tstep__b h2{font-size:1.3rem;font-weight:800}
.tstep__b p{margin-top:.5rem;color:var(--ink-soft);line-height:1.9;max-width:62ch}
.sec--white .tstep__b{background:var(--page)}

.docs{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:900px){.docs{grid-template-columns:.9fr 1.1fr;align-items:start}}

/* ---- reasons: a card per reason, two up ---- */
.rgrid{display:grid;gap:1.2rem}
@media(min-width:720px){.rgrid{grid-template-columns:1fr 1fr}}
/* No accent rule along the top edge either — same alert-box tell, same
   redundancy with the icon disc the card already carries. */
.reason{background:#fff;border-radius:var(--r);padding:1.7rem 1.6rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s,transform .25s}
.reason:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.reason__ic{width:60px;height:60px;border-radius:50%;background:var(--navy-800);
  display:grid;place-items:center;margin-bottom:1rem}
.reason__ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.6}
.reason h2{font-size:1.2rem;font-weight:800}
.reason p{margin-top:.5rem;color:var(--ink-soft);line-height:1.85}

/* ---- transport modes as a light list ---- */
.modelist{display:grid;gap:.8rem}
@media(min-width:560px){.modelist--row{grid-template-columns:repeat(4,1fr)}}
/* Logical padding, not the four-value shorthand: the icon sits at the
   inline-start, so in RTL a physical `padding-right` puts the gap on the
   wrong side of the pill. */
.modelist li{display:flex;align-items:center;gap:.9rem;background:var(--pill-a);
  border-radius:999px;padding-block:.6rem;padding-inline:.6rem 1.6rem;
  font-weight:700;color:var(--navy-900)}
@media(min-width:520px){.modelist--2{grid-template-columns:1fr 1fr}}
.modelist--row li,.modelist--2 li{flex-direction:column;border-radius:var(--r);
  padding-block:1.5rem;padding-inline:1rem;text-align:center;gap:.7rem}
.modelist__ic{width:48px;height:48px;border-radius:50%;background:var(--navy-800);flex:none;
  display:grid;place-items:center}
.modelist__ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.6}

/* ---- closing call to action ---- */
.ctaband__in{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:center}
@media(min-width:820px){.ctaband__in{grid-template-columns:1.3fr auto}}
.ctaband__act{display:flex;flex-wrap:wrap;gap:.85rem}
.btn__ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}

.about__img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-md)}
.about__p--lead{font-size:1.15rem;color:var(--ink);margin-top:0}
.vm--wide{margin-top:0}
@media(min-width:820px){.vm--wide{grid-template-columns:1fr 1fr}}
.vm h2{font-size:var(--fs-h3);font-weight:800}
.vm__card--dark h2{color:#fff}

.cinfo--lg{margin-top:0}
.cnote{margin-top:2.4rem;background:var(--pill-a);border-radius:var(--r);padding:1.6rem 1.5rem}
.cnote h2{font-size:1.1rem;font-weight:800;margin-bottom:1rem}
.cnote .ilist__ic{background:#fff}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--navy-900);color:rgba(255,255,255,.78);padding-block:3.2rem 1.5rem}
.foot__g{display:grid;gap:2.2rem}
@media(min-width:640px){.foot__g{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.foot__g{grid-template-columns:1.7fr 1fr 1fr 1.1fr}}
.foot h2{color:var(--accent-lift);font-size:.95rem;font-weight:700;margin-bottom:.9rem}
.foot li{padding-block:.28rem;font-size:.97rem}
.foot a:hover{color:var(--accent-lift)}
.foot__tag{max-width:38ch;font-size:.98rem;margin-top:1rem}
.foot__b{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.86rem;color:rgba(255,255,255,.55)}

/* Brand navy with a pale ring, matching the brochure's icon discs. Default
   WhatsApp green was the one element on the page that looked bought
   rather than built, and it was the only non-brand hue in the palette. */
.wa{position:fixed;inset-block-end:1.1rem;inset-inline-end:1.1rem;z-index:70;
  width:56px;height:56px;border-radius:50%;background:var(--navy-800);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(255,255,255,.9),0 10px 26px rgba(15,43,91,.3);
  transition:transform .2s,background .2s,box-shadow .2s}
.wa:hover{transform:scale(1.06);background:var(--accent);
  box-shadow:0 0 0 4px #fff,0 14px 32px rgba(15,43,91,.36)}

/* ============================================================
   MOTION — one device, used for one reason: content enters in
   reading order so the eye is led down the page. Nothing loops.
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none}

/* Service rows arrive from the side their half of the pair sits on, so
   the alternating layout is legible as motion and not just as position. */
@media(min-width:880px){
  .srv.rv{transform:translateY(26px) translateX(3rem)}
  .srv:nth-child(even).rv{transform:translateY(26px) translateX(-3rem)}
  .srv.rv.in{transform:none}
}

/* The rail draws from the first disc to the last once the section is
   reached. scaleX on a 2px line, not a width animation. */
@media(min-width:820px){
  .rail::before{transform:scaleX(0);transform-origin:inline-start;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s}
  .rail.drawn::before{transform:scaleX(1)}
}
.tstep:not(:last-child)::before{transform:scaleY(0);transform-origin:top;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 120ms)}
.tline.drawn .tstep:not(:last-child)::before{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    transition-delay:0ms!important}
  .rv{opacity:1;transform:none}
  .srv.rv,.srv:nth-child(even).rv{transform:none}
  .rail::before{transform:scaleX(1)}
  .tstep:not(:last-child)::before{transform:scaleY(1)}
}