/* ==========================================================================
   HCGL Online — home-v2.css
   Loaded by the homepage (index.html) after style.css. Every rule here is an
   override of the shared design system.

   WHAT THIS IS FOR
   index.html carries gradient across ~60% of its scroll height, in a palette
   built on peach, pink, lilac and mint. Two things follow from that:

     1. White stops being the page's ground and the tint becomes it, which is
        the difference between "gradient as an accent" (Stripe, Linear) and
        "gradient as wallpaper".
     2. Pink and lilac pastel is the register of consumer wellness and leisure
        brands. This business sells net rates to agency owners.

   So this file changes three things and nothing else:
     • the mesh palette — brand gold plus two cool tones, no pink, no lilac
     • the gradient tokens — gold → neutral → cool, same idea, no magenta
     • a defined bottom edge on the hero instead of a soft fade to nothing

   The wash REMOVAL is not here — it is a markup change, made in
   _build/build.py › home_v2(), which strips wash--sand and wash--lagoon so
   the page alternates white / tint / white / tint instead of tinting almost
   everything.
   ========================================================================== */

/* --- gradient tokens, re-mixed ------------------------------------------- */
/* Same structure as the originals (a warm start resolving to a cool end) with
   the magenta and violet stops taken out. Reads as paper catching light
   rather than as colour applied to paper. */
:root {
  --g-dawn:   linear-gradient(135deg, #FFFDF7 0%, #FDF4E2 26%, #EFF3F8 62%, #E8F1F3 100%);
  --g-dusk:   linear-gradient(160deg, #FCFAF5 0%, #F8F3E7 32%, #EDF1F6 72%, #E8F0F2 100%);
  --g-lagoon: linear-gradient(140deg, #EFF6F7 0%, #F0F4F9 50%, #F7F5EE 100%);
  --g-sand:   linear-gradient(135deg, #FFFEF9 0%, #FFF9ED 48%, #FFFCF6 100%);
  --g-mint:   linear-gradient(145deg, #FBFEFC 0%, #F3FAF6 50%, #F7FCF9 100%);
}

/* --- the mesh: gold + two cools ----------------------------------------- */
/* Lower opacity and a wider blur as well as a new palette. At .62 the blobs
   were reading as discrete coloured shapes; at .40 they read as light. */
.mesh i { opacity: .40; filter: blur(92px); }

.mesh i:nth-child(1) { background: #F6E2AF; }   /* brand gold, muted     */
.mesh i:nth-child(2) { background: #DCE6F0; }   /* cool slate            */
.mesh i:nth-child(3) { background: #C8DBE8; }   /* steel blue            */
.mesh i:nth-child(4) { background: #CEE6E3; }   /* restrained teal       */

/* --- keep the top-left corner clear for the logo ------------------------ */
/* The gold blob sat directly behind the wordmark, and the "G" is gold: on
   #F6E2AF it measures 1.53:1, which is why the team could barely see it.
   Swapping it for the cool tone does NOT help — #DCE6F0 measures 1.55:1,
   because the problem is LIGHTNESS, not hue. Gold #E8B10C is a mid-light
   colour, so a light blue sits nearer its own lightness than cream does.
   The lightest available ground wins, so the fix is to move the blob out of
   the corner entirely and let the logo sit on the base gradient's first stop
   (#FFFDF7 → 1.92:1, the best any light hero can do).
   The gold also simply looks better behind the login card than behind the
   masthead. A genuine fix needs a dark masthead — see the note in README. */
.mesh i:nth-child(1) { left: 38vw; top: -20vw; }

/* --- a bounded hero ------------------------------------------------------ */
/* The original hero dissolved into the section below it, which is what makes
   a gradient read as wallpaper: no edge, so no intent. A hairline plus a
   white section underneath turns the same gradient into a defined panel. */
.hero { border-bottom: 1px solid var(--rule); }

/* The route map is drawn in the accent colours; with pink gone from the
   ground it needs slightly more contrast to stay legible. */
.hero__paths .land { opacity: .30; }

/* --- sections that lost their wash -------------------------------------- */
/* build.py strips the wash classes, so these land on paper. Give them a
   hairline top rule instead, so the page still has section boundaries once
   the colour is no longer providing them. */
.stats.section { background: var(--paper); border-top: 1px solid var(--rule); }
.stats.section + * { border-top: 0; }

/* Keeps the closing band from sitting directly against a tinted section. */
.cta { border-top: 1px solid rgba(255, 255, 255, .9); }


/* ==========================================================================
   DISPLAY TYPE — same Fraunces, quirk dialled out
   ==========================================================================
   Fraunces has two expressive variable axes and style.css runs both hot:
   headings at SOFT 20 / WONK 1, and the gold italic accents at SOFT 60 /
   WONK 1. WONK is short for "wonky" — it substitutes deliberately skewed
   letterforms — and SOFT rounds the terminals. Together they are what makes
   Fraunces read warm and editorial, which is why lifestyle and DTC brands
   reach for it.

   That is the same mismatch as the pink ground: expressive-consumer, where
   this business needs authoritative-trade.

   The fix is not a different typeface. Dropping the serif for a grotesk would
   land this on exactly the same generic sans its competitors use, and lose the
   one distinctive thing about the page. Instead both axes go to 0, which is
   the SAME font — no extra download, no new request — just upright and
   composed rather than soft and wonky. Weight comes up a little and tracking
   tightens, because a neutral serif needs slightly more presence to hold a
   74px line.

   Accents keep the italic (it is doing real work separating the gold phrase
   from the ink one) but lose the wobble: SOFT 15 / WONK 0.
   ========================================================================== */
.d1, .d2, .d3 {
  font-weight: 650;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -.026em;
}
.d1 { letter-spacing: -.034em; }

.d1 i, .d2 i {
  font-variation-settings: "SOFT" 15, "WONK" 0;
}

/* The smaller display uses — card and section sub-heads — carry a trace of
   softness so they don't read as a different family from the big headings. */
.dc__b h3, .seg h3, .off h3, .vmv__c h3, .login__top h2, .login__top .login__title {
  font-variation-settings: "SOFT" 8, "WONK" 0;
}


/* ==========================================================================
   HERO ROUTE FIELD — the background animation
   ==========================================================================
   Inline SVG plus CSS keyframes. No canvas, no WebGL, no library, and no JS:
   the old hero map was injected by fx.js › routeMap(), so if that script
   failed the hero background was simply empty. This one is in the markup, so
   it is there before a single byte of JS runs.

   WHAT IT IS, AND HOW IT DIFFERS FROM THE REFERENCE
   The reference (aoryx.travelexe.com) uses six drifting wave groups with
   light glints — beautiful, but abstract: the waves have no beginning, no end
   and no meaning. Same technique here, aimed at something that says what the
   business does:

     • each band is a ROUTE CORRIDOR, tapering from thick at origin to thin at
       destination, so direction of travel reads without a single arrowhead
     • a glint travels ALONG the corridor — one booking moving down a route
     • three destination nodes pulse, and each pulse is timed to the glint
       arriving, so it reads as a confirmation landing rather than decoration

   Cost: 5 ribbons + 5 glints + 3 nodes = 13 animated elements, all compositor
   properties (transform, opacity, stroke-dashoffset). No paint per frame.
   ========================================================================== */
.hero__paths--rf{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* No mask. The corridors fan from the lower middle out through the
     top-right corner, so the headline column is empty canvas by geometry —
     which is exactly what lets the ribbons be bold instead of ghostly. A
     mask was what forced the first attempt to be too faint to see. */
}
.hero__paths--rf .rf{display:block;width:100%;height:100%}

/* the hairline down the centre of each corridor */
.rf__rail{fill:none;stroke:rgba(20,23,29,.13);stroke-width:1}

/* the travelling highlight. pathLength normalises every corridor to 1000 user
   units, so one keyframe drives all five regardless of their real lengths. */
.rf__glint{
  fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke:rgba(232,177,12,.95);
  stroke-dasharray:54 946;
  stroke-dashoffset:1000;
  animation:rfGlint 9s cubic-bezier(.45,0,.55,1) infinite;
}
.rf__glint--1{stroke:rgba(46,111,183,.85);animation-duration:11.5s;animation-delay:-3.2s}
.rf__glint--2{stroke:rgba(47,125,123,.85);animation-duration:13.4s;animation-delay:-7.1s}
.rf__glint--3{stroke:rgba(20,23,29,.5); animation-duration:15.2s;animation-delay:-1.8s}
.rf__glint--4{stroke:rgba(232,177,12,.7);animation-duration:12.2s;animation-delay:-5.4s}
.rf__glint--5{stroke:rgba(47,125,123,.6);animation-duration:16.8s;animation-delay:-9.3s}
@keyframes rfGlint{
  0%   {stroke-dashoffset:1000;opacity:0}
  6%   {opacity:1}
  88%  {opacity:1}
  100% {stroke-dashoffset:0;opacity:0}
}

/* Slow drift on each corridor group, staggered so the field breathes rather
   than pumping in unison. Tiny amplitudes — this should be felt, not watched. */
.rf__g{transform-box:fill-box;transform-origin:50% 50%;will-change:transform}
.rf__g--0{animation:rfDrift0 19s ease-in-out infinite}
.rf__g--1{animation:rfDrift1 23s ease-in-out infinite}
.rf__g--2{animation:rfDrift2 27s ease-in-out infinite}
.rf__g--3{animation:rfDrift3 31s ease-in-out infinite}
.rf__g--4{animation:rfDrift1 25s ease-in-out infinite reverse}
.rf__g--5{animation:rfDrift2 33s ease-in-out infinite reverse}
@keyframes rfDrift0{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-14px,10px,0)}}
@keyframes rfDrift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-8px,0)}}
@keyframes rfDrift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-9px,-12px,0)}}
@keyframes rfDrift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(16px,7px,0)}}

/* destination nodes — the dot holds, the ring expands and fades on arrival */
/* the bloom the corridors emerge from */
.rf__bloom{animation:rfBloom 11s ease-in-out infinite}
@keyframes rfBloom{0%,100%{opacity:.55}50%{opacity:.95}}
.rf__dot{fill:rgba(232,177,12,.9)}
.rf__ring{
  fill:none;stroke:rgba(232,177,12,.7);stroke-width:1.6;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:rfArrive 9s ease-out infinite;animation-delay:var(--d,0s)
}
@keyframes rfArrive{
  0%   {transform:scale(.4);opacity:0}
  8%   {opacity:.9}
  55%  {transform:scale(3.1);opacity:0}
  100% {transform:scale(3.1);opacity:0}
}

/* Motion off: the composition stays — corridors, rails and nodes are all
   still there and still say "routes". Only the movement stops. */
.rf__icon-disc{fill:rgba(12,16,20,.82);stroke:#E8B10C;stroke-width:1.15}
.rf__icon{color:#fff;offset-rotate:0deg}
.rf__icon-g{stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rf__icon--0{offset-path:path('M352.0,636.0 C700.0,470.0 1010.0,300.0 1300.0,96.0');animation:rfRide 9s cubic-bezier(.45,0,.55,1) infinite}
.rf__icon--1{offset-path:path('M352.0,636.0 C720.0,546.0 1060.0,430.0 1300.0,250.0');animation:rfRide 11.5s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-3.2s}
.rf__icon--2{offset-path:path('M352.0,636.0 C660.0,386.0 940.0,190.0 1210.0,-40.0');animation:rfRide 13.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-7.1s}
.rf__icon--3{offset-path:path('M352.0,636.0 C740.0,596.0 1100.0,520.0 1300.0,396.0');animation:rfRide 15.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-1.8s}
.rf__icon--4{offset-path:path('M352.0,636.0 C620.0,330.0 830.0,96.0 980.0,-70.0');animation:rfRide 12.2s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-5.4s}
.rf__icon--5{offset-path:path('M352.0,636.0 C760.0,610.0 1140.0,590.0 1300.0,520.0');animation:rfRide 16.8s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-9.3s}
@keyframes rfRide{
  0%  {offset-distance:0%;opacity:0}
  8%  {opacity:1}
  88% {opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* Reduced-motion no longer freezes the route-field SVG (drift, glints,
   orbiting icons). Kept live regardless of the OS "reduce motion" setting. */