/* =========================================================================
   ZULK Transportation - home6: the "warm sunset" light concept
   ------------------------------------------------------------------------
   Loaded on top of zulk.css, but unlike the other concepts home6 does NOT
   reuse home1.css and does NOT share site.partials.home-sections - every
   section on the page is built here. That is deliberate: the sunset palette
   needs its own spacing, shadow and type scale, and reusing the dark
   concept's rules would have meant fighting them at every turn.

   Everything is prefixed .h6- and the page-level rules are scoped to
   body.h6-page, so nothing here can leak into the dark concepts.

   The palette:
     coral -> amber -> gold, on warm cream. Gold is the existing brand
     colour and it survives as the end of the gradient and as the CTA fill,
     so the page still reads as the same company.

   Depth in a light theme has to be earned. Three things do that work here:
     1. surfaces are warm off-whites, never pure #fff on #fff
     2. shadows are warm-tinted (brown-orange, not grey) and layered
     3. one light direction - shadows sit below and slightly right, and the
        tilt effects shift them in the same direction as the card turns.

   Motion is opt-out: every animation is disabled under
   prefers-reduced-motion, and the pointer-driven ones only bind on
   (hover: hover) so touch devices get the static composition.
   ========================================================================= */

body.h6-page{
  /* ---- surfaces ---- */
  --h6-cream:#FFF9F2;          /* page base - warm, never white          */
  --h6-cream2:#FFF2E4;         /* alternate bands                         */
  --h6-card:#FFFFFF;           /* cards lift off the cream by being white */
  --h6-glass:rgba(255,252,247,.82);

  /* ---- the sunset: FILL colours ----
     These are the brand hues and they are unchanged. They are only ever
     used as backgrounds - buttons, the ticker, icon chips, the closing
     band - never as text, because none of them clears 3:1 against cream
     (coral is 2.65:1, amber 1.82:1, gold 2.10:1). */
  --h6-coral:#FF6B6B;
  --h6-amber:#FFA94D;
  --h6-gold:#D3A94F;
  --h6-rose:#C0468A;
  --h6-sun:linear-gradient(100deg,var(--h6-coral) 0%,var(--h6-amber) 52%,var(--h6-gold) 100%);
  --h6-sun-soft:linear-gradient(100deg,rgba(255,107,107,.16),rgba(255,169,77,.16) 52%,rgba(211,169,79,.16));

  /* ---- the sunset: TEXT colours ----
     The same hues taken down in luminance until they clear WCAG AA (4.5:1)
     on every surface the page uses, including the peach card tint. Same
     family, same warmth - just dark enough to read. Measured on cream
     #FFF9F2: coral 5.14:1, amber 5.18:1, gold 5.56:1, rose 6.42:1. */
  --h6-coral-ink:#C4362B;
  --h6-amber-ink:#9A5B12;
  --h6-gold-ink:#7E611A;
  --h6-rose-ink:#A32C6B;
  /* Gradient text (emphasised words, stat numbers) uses this, not --h6-sun:
     a gradient is only as readable as its lightest stop. */
  --h6-sun-ink:linear-gradient(100deg,var(--h6-coral-ink) 0%,var(--h6-amber-ink) 52%,var(--h6-gold-ink) 100%);

  /* ---- ink ----
     ink2 and mut were the main offenders: mut was #9A8778, which is only
     3.29:1 on cream and was carrying every small uppercase label on the
     page ("STEP 2 OF 3", "Up to 14 passengers", stat captions, dates). */
  --h6-ink:#2A1F1A;            /* headings / primary copy   15.34:1        */
  --h6-ink2:#4A3B33;           /* body copy                 10.22:1        */
  --h6-mut:#6E5A4C;            /* meta, small labels         6.22:1        */
  --h6-line:rgba(122,74,44,.18);

  /* ---- warm elevation scale ----
     Brown-orange tint rather than neutral grey: a grey shadow on cream
     reads as dirt, a warm one reads as light. */
  --h6-sh1:0 1px 2px rgba(90,52,30,.05), 0 4px 12px rgba(90,52,30,.06);
  --h6-sh2:0 2px 6px rgba(90,52,30,.06), 0 14px 30px rgba(90,52,30,.09);
  --h6-sh3:0 8px 20px rgba(90,52,30,.08), 0 30px 64px rgba(90,52,30,.14);
  --h6-glow:0 16px 40px rgba(255,122,80,.30);

  --h6-r:20px;
  --h6-r-lg:28px;

  background:var(--h6-cream);
  color:var(--h6-ink2);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}

body.h6-page ::selection{background:var(--h6-amber);color:var(--h6-ink)}

/* ================= shared type & bits ================= */
.h6-wrap{width:min(1240px,92%);margin-inline:auto}
.h6-wrap--narrow{width:min(860px,92%)}

.h6-h2{
  font-family:'Marcellus',Georgia,serif;
  font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--h6-ink);
  margin:0 0 16px;
}
/* The gradient only ever lands on the emphasised words, so it stays a
   highlight instead of becoming the page's body colour. */
.h6-h2 em,.h6-grad{
  font-style:normal;
  background:var(--h6-sun-ink);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.h6-lead{font-size:1.06rem;line-height:1.7;color:var(--h6-ink2);max-width:620px;margin:0 0 30px}
.h6-center{text-align:center}
.h6-center .h6-lead{margin-inline:auto}

.h6-lbl{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--h6-coral-ink);margin-bottom:18px;
}
.h6-lbl::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--h6-sun)}
.h6-lbl--center{justify-content:center}

.h6-sec{padding:clamp(72px,10vw,132px) 0;position:relative}
.h6-sec--alt{background:var(--h6-cream2)}
.h6-sec--tight{padding:clamp(48px,6vw,72px) 0}

/* ---- buttons ---- */
.h6-btn{
  --mx:0px;--my:0px;                       /* set by the magnetic script */
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;border-radius:999px;border:1px solid var(--h6-line);
  font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--h6-ink);background:var(--h6-card);text-decoration:none;cursor:pointer;
  box-shadow:var(--h6-sh1);
  transform:translate(var(--mx),var(--my));
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,color .28s,border-color .28s;
}
.h6-btn:hover{box-shadow:var(--h6-sh2);border-color:transparent;color:var(--h6-coral-ink)}

/* Deep ink on the bright gradient rather than white. White on coral is
   2.78:1 and on amber 1.90:1 - both fail at this text size. Keeping the
   fill vivid and darkening the label instead preserves the palette and
   lands at 5.4:1 over the coral end, 8:1 over the amber. */
.h6-btn--sun{
  border-color:transparent;color:var(--h6-ink);background:var(--h6-sun);
  box-shadow:var(--h6-glow);
}
.h6-btn--sun:hover{color:var(--h6-ink);box-shadow:0 22px 54px rgba(255,122,80,.42)}
/* A second gradient layered underneath, revealed on hover, so the fill
   shifts warm without a repaint of the text. */
.h6-btn--sun::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(100deg,var(--h6-rose),var(--h6-coral) 55%,var(--h6-amber));
  transition:opacity .35s;z-index:-1;
}
.h6-btn--sun:hover::after{opacity:1}

.h6-btn--ghost{background:transparent;box-shadow:none}
.h6-btn--ghost:hover{background:var(--h6-card);box-shadow:var(--h6-sh1)}

/* ---- scroll reveal ----
   The hidden state is gated behind .h6-anim, which an inline script in the
   shell puts on <html> before first paint. That gate is the important part:
   the rule used to be an unconditional `.h6-rev{opacity:0}`, so ANY failure
   to reach .is-in - no JS, a script error, a blocked file, an observer that
   never fired - left that element permanently invisible with no way back.
   With the gate, the worst case is that content appears without animating.

   Delays are also shorter than they were (.06 steps, .24s max rather than
   .09/.45s): a card at the end of a stagger was visibly lagging a second
   behind its neighbours, which reads as "that one card is faded". */
.h6-anim .h6-rev{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.h6-anim .h6-rev.is-in{opacity:1;transform:none}
.h6-anim .h6-rev[data-d="1"]{transition-delay:.06s}
.h6-anim .h6-rev[data-d="2"]{transition-delay:.12s}
.h6-anim .h6-rev[data-d="3"]{transition-delay:.18s}
.h6-anim .h6-rev[data-d="4"]{transition-delay:.24s}
.h6-anim .h6-rev[data-d="5"]{transition-delay:.30s}

/* =========================================================================
   NAV
   ========================================================================= */
#h6nav{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:20px 0;
  transition:background .4s,box-shadow .4s,padding .4s;
}
/* Over the hero the bar is transparent - but this hero is LIGHT. The veil is
   94% cream at the top-left, exactly where the nav copy sits, so the white
   copy this started with was very nearly invisible. The transparent state now
   uses the same dark ink as the stuck state and the logo keeps its own
   colours; the halo is white rather than black, for the stretch of bar that
   crosses the unveiled part of the photograph. */
#h6nav .h6-nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
#h6nav .zt-logo img{height:46px;width:auto;transition:filter .4s}
.h6-nav__links{display:flex;gap:30px;align-items:center}
.h6-nav__links a{
  position:relative;color:var(--h6-ink);text-decoration:none;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(255,249,242,.92);transition:color .3s;
}
.h6-nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;border-radius:2px;
  background:var(--h6-sun);transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.h6-nav__links a:hover::after{width:100%}
.h6-nav__actions{display:flex;align-items:center;gap:14px}
#h6nav .h6-btn{padding:12px 26px;font-size:.72rem;background:rgba(255,255,255,.62);color:var(--h6-ink);border-color:rgba(122,74,44,.28);backdrop-filter:blur(8px);box-shadow:none}
#h6nav .h6-btn:hover{background:#fff;color:var(--h6-coral-ink);border-color:transparent}
.h6-nav__toggle{display:none;background:none;border:0;color:var(--h6-ink);font-size:1.5rem;cursor:pointer;line-height:1}

#h6nav.is-stuck{
  background:var(--h6-glass);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--h6-line),0 10px 30px rgba(90,52,30,.07);
  padding:12px 0;
}
#h6nav.is-stuck .zt-logo img{filter:none;height:40px}
#h6nav.is-stuck .h6-nav__links a{color:var(--h6-ink);text-shadow:none}
#h6nav.is-stuck .h6-nav__links a:hover{color:var(--h6-coral-ink)}
#h6nav.is-stuck .h6-btn{background:var(--h6-sun);color:var(--h6-ink);border-color:transparent;box-shadow:var(--h6-glow)}
#h6nav.is-stuck .h6-nav__toggle{color:var(--h6-ink)}

.h6-draw{
  position:fixed;inset:0 0 auto;z-index:59;padding:96px 6% 28px;
  background:var(--h6-glass);backdrop-filter:blur(18px);
  box-shadow:var(--h6-sh2);
  display:none;flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;transition:opacity .3s,transform .3s;
}
.h6-draw.is-open{display:flex;opacity:1;transform:none}
.h6-draw a{
  padding:13px 0;color:var(--h6-ink);text-decoration:none;
  font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--h6-line);
}
.h6-draw a:last-child{border-bottom:0;color:var(--h6-coral-ink)}

/* =========================================================================
   HERO - bright-graded editorial photo, drifting colour blooms, split text
   ========================================================================= */
.h6-hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:150px 0 100px;overflow:hidden;isolation:isolate;
}
.h6-hero__bg{position:absolute;inset:0;z-index:-3}
.h6-hero__bg img{
  width:100%;height:100%;object-fit:cover;
  /* The "bright grade": lift the blacks, warm the whole frame and pull
     saturation up so a night-shot photograph sits inside a light page. */
  filter:brightness(1.16) contrast(.92) saturate(1.25) sepia(.14);
  transform:scale(1.06);
  will-change:transform;
}
/* Cream veil - top-left stays readable for the copy, bottom melts into the
   page so there is no hard seam above the next section. */
.h6-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(255,249,242,.94) 0%,rgba(255,249,242,.72) 34%,rgba(255,249,242,.14) 62%,rgba(255,242,228,.30) 100%),
    linear-gradient(to bottom,rgba(255,249,242,.55) 0%,rgba(255,249,242,0) 26%,rgba(255,249,242,.10) 70%,var(--h6-cream) 100%);
}

/* ---- drifting colour blooms ----
   Four blurred radial shapes on their own layer. The keyframes give them a
   slow ambient drift; the pointer/scroll parallax is applied by JS as an
   extra translate on the container, so the two never fight. */
.h6-blooms{position:absolute;inset:-12%;z-index:-2;pointer-events:none;will-change:transform}
.h6-bloom{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.60;mix-blend-mode:multiply;
  animation:h6drift 22s ease-in-out infinite alternate;
}
.h6-bloom--1{width:46vw;height:46vw;left:-6%;top:-8%;  background:radial-gradient(circle,rgba(255,107,107,.62),transparent 68%);animation-duration:24s}
.h6-bloom--2{width:38vw;height:38vw;right:4%;top:6%;   background:radial-gradient(circle,rgba(255,169,77,.60),transparent 68%);animation-duration:19s;animation-delay:-6s}
.h6-bloom--3{width:34vw;height:34vw;left:26%;bottom:-14%;background:radial-gradient(circle,rgba(192,70,138,.42),transparent 68%);animation-duration:27s;animation-delay:-11s}
.h6-bloom--4{width:28vw;height:28vw;right:22%;bottom:-6%;background:radial-gradient(circle,rgba(211,169,79,.55),transparent 68%);animation-duration:21s;animation-delay:-3s}
@keyframes h6drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(4vw,-3vw,0) scale(1.14)}
}

.h6-hero__in{position:relative;z-index:2;max-width:820px}
.h6-hero h1{
  font-family:'Marcellus',Georgia,serif;font-weight:400;
  font-size:clamp(2.9rem,7.4vw,6rem);line-height:1.02;letter-spacing:-.02em;
  color:var(--h6-ink);margin:0 0 22px;
}
.h6-hero h1 em{font-style:normal;background:var(--h6-sun-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---- split text ----
   JS wraps each word in .h6-word > span. The mask is the word box, the
   inner span is what rises, so letters never bleed outside the line box. */
.h6-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.h6-word>span{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.16,.84,.28,1)}
.is-split-in .h6-word>span{transform:none}

.h6-hero__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.h6-hero__meta{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h6-mut)}

.h6-hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.h6-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border:1px solid var(--h6-line);box-shadow:var(--h6-sh1);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--h6-ink);
}
.h6-badge i{color:var(--h6-coral-ink);font-size:.82rem}

.h6-scroll{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--h6-mut);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.h6-scroll i{display:block;width:1px;height:46px;background:linear-gradient(to bottom,var(--h6-coral),transparent);animation:h6cue 2s ease-in-out infinite}
@keyframes h6cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* =========================================================================
   TICKER
   ========================================================================= */
/* Dark ink on the bright gradient, for the same reason as the sun button:
   white on the amber midpoint is 1.90:1. The band stays exactly as vivid. */
.h6-ticker{
  background:var(--h6-sun);color:var(--h6-ink);overflow:hidden;
  padding:15px 0;position:relative;z-index:1;
}
.h6-ticker__track{display:flex;gap:44px;width:max-content;animation:h6ticker 42s linear infinite}
.h6-ticker span{display:inline-flex;align-items:center;gap:44px;font-size:.76rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.h6-ticker b{opacity:.5;font-weight:400}
@keyframes h6ticker{to{transform:translateX(-50%)}}

/* =========================================================================
   STATS + SELF-DRAWING ROUTE LINE
   ========================================================================= */
.h6-route__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,80px);align-items:center}
.h6-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.h6-stat{
  background:var(--h6-card);border-radius:var(--h6-r);padding:24px 22px;
  box-shadow:var(--h6-sh1);border:1px solid var(--h6-line);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s;
}
.h6-stat:hover{transform:translateY(-5px);box-shadow:var(--h6-sh2)}
.h6-stat b{
  display:block;font-family:'Marcellus',Georgia,serif;font-size:2.6rem;line-height:1;
  background:var(--h6-sun-ink);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.h6-stat small{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h6-mut)}

/* ---- the journey scene ----
   Four planes inside one perspective. The card itself rotates toward the
   pointer; each plane sits at a different translateZ, so they separate as it
   turns. The Z values are what makes this read as depth rather than as a
   picture that wobbles - the car at 78px visibly rides above the route. */
.h6-scene{perspective:1400px}
.h6-scene__card{
  --rx:0deg;--ry:0deg;
  position:relative;overflow:hidden;
  aspect-ratio:520/300;                  /* locked to the SVG viewBox, so the
                                            car's percentage positions land
                                            exactly on the path at any width */
  background:var(--h6-card);border:1px solid var(--h6-line);
  border-radius:var(--h6-r-lg);box-shadow:var(--h6-sh2);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s;
}
.h6-scene.is-tilting .h6-scene__card{transition:transform .12s linear,box-shadow .4s;box-shadow:var(--h6-sh3)}

/* Plane 0 - the photograph, graded up and veiled back until it reads as
   ground texture rather than a picture competing with the route. */
.h6-scene__ground{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transform:translateZ(0);
}
/* A warm veil over the map: enough to tie the tans and the one cool bay into
   the sunset palette, light enough that the street grid still reads. The two
   radial tints put warmth at the two ends of the journey. */
.h6-scene__wash{
  position:absolute;inset:0;transform:translateZ(6px);pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 88%,rgba(255,107,107,.16),transparent 60%),
    radial-gradient(110% 85% at 86% 16%,rgba(211,169,79,.20),transparent 60%),
    linear-gradient(180deg,rgba(255,249,242,.26),rgba(255,242,228,.42));
}

/* Plane 1 - the route */
.h6-scene__map{position:absolute;inset:0;transform:translateZ(34px)}
.h6-scene__map svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.h6-route__path{
  fill:none;stroke:url(#h6sun);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  transition:stroke-dashoffset 2.6s cubic-bezier(.5,.05,.25,1);
  filter:drop-shadow(0 4px 10px rgba(196,54,43,.30));
}
.is-in .h6-route__path{stroke-dashoffset:0}
/* The casing. Slightly wider than the route and in the street colour, so the
   coloured line looks laid ON the road network rather than floating over it. */
.h6-route__road{
  fill:none;stroke:#FFFDF8;stroke-width:11;stroke-linecap:round;
  filter:drop-shadow(0 2px 4px rgba(90,52,30,.16));
}

/* Plane 2 - the car. left/top are written by JS as percentages of the box. */
.h6-scene__car{
  position:absolute;left:12.31%;top:78.67%;      /* the airport pin, pre-JS */
  /* Kept small on purpose. At map scale the car is a marker, not the
     subject - anything much larger reads as a car photograph with a map
     behind it, and it swallows the airport pin it starts on. */
  /* Lifted well above its anchor point so it rides the line without sitting
     on top of the pin label it starts (and finishes) on. */
  width:13%;transform:translateZ(78px) translate(-50%,-78%) rotate(var(--rot,0deg));
  opacity:0;transition:opacity .5s ease;
  will-change:left,top;
}
.is-in .h6-scene__car{opacity:1}
.h6-scene__car img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 9px rgba(90,52,30,.32))}
/* Contact shadow, so the car sits ON the route instead of floating over it. */
.h6-scene__car-shadow{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:78%;height:7px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(90,52,30,.32),transparent 70%);
}

/* Plane 3 - the pins, highest so they clear the car as the scene turns */
.h6-scene__pin{
  position:absolute;transform:translateZ(104px) translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,1.6,.4,1);
}
.h6-scene__pin--a{left:12.31%;top:78.67%}       /* 64,236 in the 520x300 box */
.h6-scene__pin--b{left:87.69%;top:21.33%}       /* 456,64                    */
.is-in .h6-scene__pin{opacity:1}
.is-in .h6-scene__pin--a{transition-delay:.15s}
.is-in .h6-scene__pin--b{transition-delay:2.25s}
.h6-scene__dot{
  width:14px;height:14px;border-radius:50%;background:var(--h6-sun);
  box-shadow:0 0 0 6px rgba(255,169,77,.24),0 4px 12px rgba(90,52,30,.28);
}
.h6-scene__pin--b .h6-scene__dot{animation:h6pulse 2.4s ease-out infinite}
@keyframes h6pulse{
  0%{box-shadow:0 0 0 6px rgba(255,169,77,.30),0 4px 12px rgba(90,52,30,.28)}
  70%{box-shadow:0 0 0 20px rgba(255,169,77,0),0 4px 12px rgba(90,52,30,.28)}
  100%{box-shadow:0 0 0 6px rgba(255,169,77,0),0 4px 12px rgba(90,52,30,.28)}
}
.h6-scene__pin b{
  font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--h6-ink);white-space:nowrap;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,252,247,.92);backdrop-filter:blur(6px);
  box-shadow:var(--h6-sh1);
}

/* =========================================================================
   FLEET - 3D tilt cards
   ========================================================================= */
.h6-fleet__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;margin-top:46px}

/* perspective lives on the wrapper so each card rotates in its own space */
.h6-tilt{perspective:1100px}
.h6-tilt__in{
  --rx:0deg;--ry:0deg;
  position:relative;height:100%;
  background:var(--h6-card);border:1px solid var(--h6-line);
  border-radius:var(--h6-r-lg);overflow:hidden;
  box-shadow:var(--h6-sh1);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s;
}
.h6-tilt.is-tilting .h6-tilt__in{transition:transform .12s linear,box-shadow .4s;box-shadow:var(--h6-sh3)}

.h6-tilt__art{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--h6-sun-soft);   /* shows while the photo loads */
}
/* Fills the frame. This started as object-fit:contain at 88%x82%, which was
   built for transparent cut-out PNGs - but the real data is photographs with
   their own backgrounds, so every one floated as a small rectangle inside a
   peach border. Cover, plus a warm grade to pull the mostly-dark studio and
   night shots toward the page palette.

   The image is scaled slightly beyond the frame to leave room for the
   pointer parallax that home6.js applies, and it deliberately does NOT sit
   on its own translateZ any more: at cover size a raised plane grows under
   perspective and spills past the card, because overflow:hidden does not
   clip across a preserve-3d boundary. The depth now comes from the caption
   floating above it instead. */
.h6-tilt__art img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  filter:saturate(1.12) contrast(.96) brightness(1.04) sepia(.10);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
/* Warm scrim, bottom-weighted, so the caption is legible over any photograph
   without having to trust what is in the frame. */
.h6-tilt__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(38,20,12,.86) 0%,rgba(38,20,12,.52) 26%,rgba(38,20,12,.12) 52%,rgba(255,140,90,.10) 100%);
}
.h6-tilt__cap{
  position:absolute;left:0;right:0;bottom:0;padding:20px 22px;
  transform:translateZ(40px);
}
.h6-tilt.is-tilting .h6-tilt__art img{transition:transform .12s linear}
/* A soft specular sweep that tracks the pointer across the card. */
.h6-tilt__sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.55),transparent 62%);
  transition:opacity .4s;
}
.h6-tilt:hover .h6-tilt__sheen{opacity:1}

.h6-tilt__body{padding:20px 22px 24px;transform:translateZ(26px)}

/* The class badge now sits on the scrimmed photograph rather than on the card
   body, so it is a solid gradient pill with ink on it - which is both the
   brand colour at full strength and comfortably readable over any image. */
.h6-tilt__tag{
  display:inline-block;margin-bottom:9px;padding:5px 12px;border-radius:999px;
  background:var(--h6-sun);color:var(--h6-ink);
  font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.h6-tilt__name{
  font-family:'Marcellus',Georgia,serif;font-size:1.42rem;font-weight:400;
  color:#FFF9F2;margin:0;text-shadow:0 2px 14px rgba(28,14,8,.5);
}

/* Specs - passengers, luggage, and the accessibility badge where it applies. */
.h6-tilt__specs{
  display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px;
  font-size:.8rem;color:var(--h6-ink2);
}
.h6-tilt__specs span{display:inline-flex;align-items:center;gap:7px}
.h6-tilt__specs i{color:var(--h6-amber-ink);font-size:.86rem}
.h6-tilt__wc{color:var(--h6-coral-ink);font-weight:500}
.h6-tilt__wc i{color:var(--h6-coral-ink)!important}

/* Only the features this vehicle does NOT share with the rest of the fleet -
   see the intersect in home6.blade.php. */
.h6-tilt__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.h6-tilt__chips span{
  padding:5px 11px;border-radius:999px;
  background:var(--h6-sun-soft);border:1px solid var(--h6-line);
  font-size:.7rem;color:var(--h6-ink2);
}
.h6-tilt__link{
  display:inline-flex;align-items:center;gap:9px;color:var(--h6-coral-ink);text-decoration:none;
  font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.h6-tilt__link i{transition:transform .3s}
.h6-tilt__in:hover .h6-tilt__link i{transform:translateX(5px)}

.h6-fleet__cta{margin-top:44px;text-align:center}

/* =========================================================================
   STICKY SCROLL-THROUGH - the booking flow, one colour per step
   ========================================================================= */
.h6-flow{background:var(--h6-cream2)}
.h6-flow__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,70px);align-items:start}

/* Left column pins; the right column scrolls past it and drives the swap. */
.h6-flow__stage{position:sticky;top:118px;height:min(560px,72vh)}
.h6-flow__card{
  position:absolute;inset:0;border-radius:var(--h6-r-lg);overflow:hidden;
  background:var(--h6-card);box-shadow:var(--h6-sh2);border:1px solid var(--h6-line);
  display:grid;place-items:center;padding:40px;text-align:center;
  opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.h6-flow__card.is-on{opacity:1;transform:none;pointer-events:auto}
.h6-flow__card::before{content:"";position:absolute;inset:0;opacity:.14;background:var(--step,var(--h6-sun))}
.h6-flow__icon{
  position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--step,var(--h6-sun));color:var(--h6-ink);font-size:2.3rem;margin:0 auto 24px;
  box-shadow:0 18px 40px rgba(90,52,30,.20);
}
.h6-flow__num{position:relative;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--h6-mut);margin-bottom:12px}
.h6-flow__ttl{position:relative;font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--h6-ink);margin:0 0 12px}
.h6-flow__txt{position:relative;color:var(--h6-ink2);max-width:420px;margin:0 auto;line-height:1.7}

.h6-flow__steps{display:flex;flex-direction:column;gap:10px}
.h6-flow__step{
  padding:32px 30px;border-radius:var(--h6-r);cursor:pointer;
  border:1px solid transparent;background:transparent;text-align:left;width:100%;
  transition:background .45s,border-color .45s,box-shadow .45s,transform .45s;
}
.h6-flow__step:not(:last-child){margin-bottom:min(14vh,120px)}
.h6-flow__step.is-on{background:var(--h6-card);border-color:var(--h6-line);box-shadow:var(--h6-sh2)}
/* The inactive step is de-emphasised by COLOUR, not by opacity. It used to
   carry opacity:.55, which multiplied straight into the text and left the
   inactive copy at roughly 2.4:1 - that was what made "Pickup, drop-off and
   the time you need to be there" and the inactive headings unreadable. Both
   states now sit on real tokens, so the dimmest one is still 6.2:1. */
.h6-flow__step h3{
  font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.5rem;margin:0 0 10px;
  color:var(--h6-mut);transition:color .45s;
}
.h6-flow__step.is-on h3{color:var(--h6-ink)}
.h6-flow__step p{margin:0;line-height:1.7;color:var(--h6-mut);transition:color .45s}
.h6-flow__step.is-on p{color:var(--h6-ink2)}
.h6-flow__bar{display:block;height:3px;border-radius:3px;background:var(--h6-line);margin-bottom:18px;width:56px;overflow:hidden}
.h6-flow__bar::after{content:"";display:block;height:100%;width:0;background:var(--step,var(--h6-sun));transition:width .5s}
.h6-flow__step.is-on .h6-flow__bar::after{width:100%}

/* =========================================================================
   SERVICES
   ========================================================================= */
.h6-svc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:24px;margin-top:46px}
.h6-svc{
  position:relative;background:var(--h6-card);border:1px solid var(--h6-line);
  border-radius:var(--h6-r-lg);padding:32px 28px 30px;overflow:hidden;
  box-shadow:var(--h6-sh1);text-decoration:none;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;
}
.h6-svc:hover{transform:translateY(-7px);box-shadow:var(--h6-sh3)}
/* Each card carries its own tint, seeded per service, so the grid is varied
   but stable between page loads. */
.h6-svc::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tint,var(--h6-sun));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.h6-svc:hover::before{transform:scaleX(1)}
.h6-svc__ico{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:var(--tint,var(--h6-sun));color:var(--h6-ink);font-size:1.5rem;margin-bottom:22px;
  box-shadow:0 12px 26px rgba(90,52,30,.16);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1);
}
.h6-svc:hover .h6-svc__ico{transform:rotate(-7deg) scale(1.08)}
.h6-svc__ico img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.h6-svc h3{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.32rem;color:var(--h6-ink);margin:0 0 10px}
.h6-svc p{margin:0 0 18px;line-height:1.68;color:var(--h6-ink2);font-size:.94rem}
.h6-svc__price{font-size:.8rem;color:var(--h6-mut);margin-bottom:16px}
.h6-svc__price b{font-family:'Marcellus',Georgia,serif;font-size:1.3rem;color:var(--h6-ink)}
.h6-svc__more{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--h6-coral-ink)}
.h6-svc__more i{transition:transform .3s}
.h6-svc:hover .h6-svc__more i{transform:translateX(5px)}

/* =========================================================================
   WHY - four promises
   ========================================================================= */
.h6-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:46px}
.h6-why__item{position:relative;padding:30px 26px;border-radius:var(--h6-r);background:var(--h6-card);border:1px solid var(--h6-line);box-shadow:var(--h6-sh1);transition:transform .45s,box-shadow .45s}
.h6-why__item:hover{transform:translateY(-6px);box-shadow:var(--h6-sh2)}
.h6-why__item b{
  display:block;font-family:'Marcellus',Georgia,serif;font-size:2.4rem;line-height:1;margin-bottom:14px;
  background:var(--h6-sun-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.h6-why__item h3{font-size:1.08rem;color:var(--h6-ink);margin:0 0 8px;font-weight:500}
.h6-why__item p{margin:0;font-size:.92rem;line-height:1.68;color:var(--h6-ink2)}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.h6-tst__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:12px}
.h6-tst__score{text-align:right}
.h6-tst__score b{display:block;font-family:'Marcellus',Georgia,serif;font-size:3rem;line-height:1;background:var(--h6-sun-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.h6-tst__score small{font-size:.74rem;color:var(--h6-mut);letter-spacing:.12em;text-transform:uppercase}

.h6-tst__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:34px}
.h6-tst__card{
  position:relative;background:var(--h6-card);border:1px solid var(--h6-line);
  border-radius:var(--h6-r-lg);padding:32px 28px;box-shadow:var(--h6-sh1);
  transition:transform .45s,box-shadow .45s;
}
.h6-tst__card:hover{transform:translateY(-6px);box-shadow:var(--h6-sh2)}
/* Oversized quote mark, clipped by the card - a warm detail rather than a
   literal glyph sitting in the copy. */
.h6-tst__card::before{
  content:"\201C";position:absolute;right:22px;top:-2px;
  font-family:'Marcellus',Georgia,serif;font-size:6rem;line-height:1;
  background:var(--h6-sun);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;opacity:.24;
}
.h6-tst__stars{color:var(--h6-amber-ink);letter-spacing:.16em;margin-bottom:14px;font-size:.95rem}
.h6-tst__stars small{color:var(--h6-mut);letter-spacing:.08em;margin-left:8px;font-size:.74rem}
.h6-tst__card h3{font-size:1.06rem;color:var(--h6-ink);margin:0 0 10px;font-weight:500}
.h6-tst__card p{margin:0 0 22px;line-height:1.74;color:var(--h6-ink2);font-size:.96rem;position:relative}
.h6-tst__who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--h6-line)}
.h6-ava{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;background:var(--h6-sun);color:var(--h6-ink);
  font-size:.86rem;font-weight:500;letter-spacing:.06em;
}
.h6-tst__who b{display:block;color:var(--h6-ink);font-size:.94rem;font-weight:500}
.h6-tst__who small{color:var(--h6-mut);font-size:.78rem}

/* =========================================================================
   FAQ
   ========================================================================= */
.h6-faq{margin-top:38px;display:flex;flex-direction:column;gap:12px}
.h6-faq__item{
  background:var(--h6-card);border:1px solid var(--h6-line);border-radius:var(--h6-r);
  box-shadow:var(--h6-sh1);overflow:hidden;transition:box-shadow .4s,border-color .4s;
}
.h6-faq__item[open]{box-shadow:var(--h6-sh2)}
.h6-faq__item summary{
  list-style:none;cursor:pointer;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-size:1.02rem;color:var(--h6-ink);font-weight:500;
}
.h6-faq__item summary::-webkit-details-marker{display:none}
.h6-faq__item summary::after{
  content:"+";flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:1.15rem;font-weight:400;
  background:var(--h6-sun-soft);color:var(--h6-coral-ink);transition:transform .35s,background .35s,color .35s;
}
.h6-faq__item[open] summary::after{content:"+";transform:rotate(45deg);background:var(--h6-sun);color:var(--h6-ink)}
.h6-faq__item>div{padding:0 26px 24px;line-height:1.76;color:var(--h6-ink2)}

/* =========================================================================
   JOURNAL
   ========================================================================= */
.h6-journal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:46px}
.h6-post{
  display:block;text-decoration:none;background:var(--h6-card);
  border:1px solid var(--h6-line);border-radius:var(--h6-r-lg);overflow:hidden;
  box-shadow:var(--h6-sh1);transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;
}
.h6-post:hover{transform:translateY(-7px);box-shadow:var(--h6-sh3)}
.h6-post__art{aspect-ratio:16/10;overflow:hidden;background:var(--h6-sun-soft);display:grid;place-items:center}
.h6-post__art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.h6-post:hover .h6-post__art img{transform:scale(1.07)}
.h6-post__art i{font-size:2.6rem;color:var(--h6-amber-ink)}
.h6-post__body{padding:26px 24px 28px}
.h6-post__date{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--h6-mut);margin-bottom:10px}
.h6-post h3{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.22rem;color:var(--h6-ink);margin:0 0 10px}
.h6-post p{margin:0 0 16px;font-size:.92rem;line-height:1.68;color:var(--h6-ink2)}
.h6-post__link{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--h6-coral-ink)}

/* =========================================================================
   PARTNERS
   ========================================================================= */
.h6-partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px 52px;margin-top:32px}
/* The knock-back is on the LOGO only. It used to sit on .h6-partner, which
   also wraps the text fallback shown for partners with no logo uploaded -
   so those names rendered at 55% opacity and read as broken. */
.h6-partner{display:grid;place-items:center;min-height:52px;transition:transform .4s}
.h6-partner:hover{transform:translateY(-3px)}
.h6-partner img{max-height:46px;width:auto;object-fit:contain;opacity:.62;filter:grayscale(1);transition:opacity .4s,filter .4s}
.h6-partner:hover img{opacity:1;filter:none}
.h6-partner span{font-family:'Marcellus',Georgia,serif;font-size:1.14rem;color:var(--h6-ink)}

/* =========================================================================
   CLOSING CTA - the one full-bleed sunset band
   ========================================================================= */
/* The band keeps the full-strength sunset gradient; the copy on it is deep
   ink instead of white. White here was 2.78:1 at the coral end and 1.90:1
   over the amber midpoint - the worst contrast on the page, and on the
   largest call to action. Ink over the same gradient runs 5.4:1 to 8:1. */
.h6-close{position:relative;overflow:hidden;background:var(--h6-sun);color:var(--h6-ink);text-align:center;padding:clamp(80px,11vw,140px) 0}
/* Two soft white blooms keep the flat gradient from looking like a swatch. */
.h6-close::before,.h6-close::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.34;
  background:radial-gradient(circle,#fff,transparent 70%);
}
.h6-close::before{width:40vw;height:40vw;left:-8%;top:-30%}
.h6-close::after{width:34vw;height:34vw;right:-6%;bottom:-34%}
.h6-close__in{position:relative;z-index:1}
.h6-close h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.12;margin:0 0 16px;color:var(--h6-ink)}
.h6-close p{max-width:600px;margin:0 auto 34px;line-height:1.72;color:var(--h6-ink);opacity:.88}
.h6-close .h6-btn{background:#fff;color:var(--h6-coral-ink);border-color:transparent;box-shadow:0 16px 40px rgba(120,50,20,.26)}
.h6-close .h6-btn:hover{transform:translate(var(--mx),calc(var(--my) - 3px));box-shadow:0 24px 56px rgba(120,50,20,.34)}
.h6-close .h6-btn--ghost{background:transparent;color:var(--h6-ink);border-color:rgba(42,31,26,.44);box-shadow:none}
.h6-close .h6-btn--ghost:hover{background:rgba(255,255,255,.38);color:var(--h6-ink);border-color:transparent}
.h6-close__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.h6-close__phone{
  display:inline-block;margin-top:34px;font-family:'Marcellus',Georgia,serif;
  font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--h6-ink);text-decoration:none;
  border-bottom:2px solid rgba(42,31,26,.38);transition:border-color .35s;
}
.h6-close__phone:hover{border-color:var(--h6-ink)}
.h6-close__or{font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--h6-ink);opacity:.78;margin-top:38px}

/* =========================================================================
   CONCEPT SWITCHER (preview chrome, not part of the design)
   ========================================================================= */
.h6-switch{
  position:fixed;right:16px;bottom:16px;z-index:80;display:flex;gap:4px;padding:6px;
  background:var(--h6-glass);backdrop-filter:blur(14px);
  border:1px solid var(--h6-line);border-radius:999px;box-shadow:var(--h6-sh2);
}
.h6-switch a{
  min-width:32px;height:32px;padding:0 11px;border-radius:999px;
  display:grid;place-items:center;text-decoration:none;
  font-size:.72rem;letter-spacing:.06em;color:var(--h6-ink2);transition:background .3s,color .3s;
}
.h6-switch a:hover{background:var(--h6-sun-soft);color:var(--h6-coral-ink)}
.h6-switch a[aria-current]{background:var(--h6-sun);color:var(--h6-ink)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .h6-route__grid,.h6-flow__grid{grid-template-columns:1fr}
  /* Once stacked there is nothing to pin against, so the sticky stage
     becomes a normal block above the steps. */
  .h6-flow__stage{position:relative;top:0;height:auto;aspect-ratio:4/3;margin-bottom:26px}
  .h6-flow__step:not(:last-child){margin-bottom:10px}
  .h6-flow__card{position:absolute}
}
@media (max-width:860px){
  .h6-nav__links{display:none}
  .h6-nav__toggle{display:block}
  #h6nav .h6-nav__actions .h6-btn{display:none}
  .h6-hero{min-height:auto;padding:130px 0 84px}
  .h6-hero__bg::after{background:
    linear-gradient(to bottom,rgba(255,249,242,.86) 0%,rgba(255,249,242,.58) 40%,rgba(255,249,242,.72) 74%,var(--h6-cream) 100%)}
  .h6-scroll{display:none}
  .h6-stats{grid-template-columns:1fr 1fr}
  .h6-tst__head{flex-direction:column;align-items:flex-start}
  .h6-tst__score{text-align:left}
}
@media (max-width:520px){
  .h6-stats{grid-template-columns:1fr}
  .h6-hero__foot .h6-btn{width:100%}
  .h6-flow__step{padding:24px 20px}
}

/* =========================================================================
   REDUCED MOTION
   Everything above is decoration; none of it carries meaning that is lost
   by switching it off. The blooms stay (they are colour, not movement) but
   stop drifting.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  body.h6-page *,body.h6-page *::before,body.h6-page *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* Must out-specify `.h6-anim .h6-rev`, hence the ancestor here too. */
  .h6-rev,.h6-anim .h6-rev{opacity:1;transform:none}
  .h6-word>span{transform:none}
  .h6-route__path{stroke-dashoffset:0}
  /* Opacity only - these carry translateZ and -50% centring in their
     transform, so blanking it would knock them off the route. */
  .h6-scene__pin,.h6-scene__car{opacity:1}
  .h6-hero__bg img{transform:none}
}