/* =====================================================================
   Motion layer (2026-10) — animated home hero with 3D moving boxes,
   flipping words, crossing ribbons, scroll reveals, tilt cards,
   morphing shapes and spinning badges on every page.
   Loaded after visual-upgrade.css. Everything stops for reduced motion.
   ===================================================================== */

@property --ll-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --kraft-1: #E3BB70;
  --kraft-2: #CF9C4B;
  --kraft-3: #B7823A;
  --kraft-4: #9C6A2C;
}

/* Calmer type scale: the old 5.4rem headline was too big on desktop */
h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.03em; }
.page-header h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }

/* ---------------------------------------------------------------------
   HEADER LOGO — coin-flip entrance, circling gold ring, light sweep,
   shimmering "Legend", a spin on hover and when the header tucks in
   --------------------------------------------------------------------- */
.brand { perspective: 600px; }
.brand-badge {
  position: relative; isolation: isolate;
  display: block; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 14px;
  transform-style: preserve-3d;
  animation: ll-coin-in 1.1s var(--ease-spring) .1s backwards;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), transform .9s var(--ease-out);
}
.brand-badge::before {
  content: ''; position: absolute; inset: -2.5px; z-index: -1; border-radius: 16px;
  background: conic-gradient(from var(--ll-angle), #D4A350, #F7E1A6 18%, #186355 40%, #0F1F38 55%, #E9C77D 78%, #D4A350);
  animation: ll-angle 4.5s linear infinite;
}
.brand-badge::after {
  content: ''; position: absolute; inset: -6px; z-index: -2; border-radius: 20px;
  background: radial-gradient(closest-side, rgba(212,163,80,.45), transparent);
  opacity: 0; animation: ll-badge-glow 6s ease-in-out 1.6s infinite;
}
.brand-badge picture { position: relative; display: block; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #0F1F38; }
.brand-badge picture::after {
  content: ''; position: absolute; inset: -30%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: ll-logo-shine 6s ease-in-out 1.6s infinite;
  pointer-events: none;
}
.brand-badge .brand-logo { width: 100%; height: 100%; border-radius: 0; box-shadow: none; display: block; }
.brand:hover .brand-badge, .brand:focus-visible .brand-badge { transform: rotateY(360deg); }
.site-header.scrolled .brand-badge { width: 42px; height: 42px; animation: ll-badge-tuck .8s var(--ease-spring); }

.brand-name { animation: ll-brand-wipe .9s var(--ease-out) .45s backwards; }
.brand-tag  { animation: ll-brand-wipe .9s var(--ease-out) .6s backwards; }
.brand-gold {
  background: linear-gradient(100deg, #9A6E24 0%, #D4A350 30%, #F2D493 45%, #B98A3B 60%, #8A6420 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ll-shimmer 6s linear 1.6s infinite;
}

@keyframes ll-coin-in { from { transform: rotateY(-200deg) scale(.4); opacity: 0; } 55% { opacity: 1; } to { transform: none; } }
@keyframes ll-badge-tuck { 0% { transform: rotateY(0) rotate(0); } 60% { transform: rotateY(180deg) rotate(-6deg); } 100% { transform: rotateY(360deg) rotate(0); } }
@keyframes ll-logo-shine { 0%, 70% { transform: translateX(-130%); } 86%, 100% { transform: translateX(130%); } }
@keyframes ll-badge-glow { 0%, 66%, 100% { opacity: 0; } 80% { opacity: 1; } }
@keyframes ll-brand-wipe { from { opacity: 0; transform: translateX(-8px); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 768px) {
  .brand-badge { width: 44px; height: 44px; border-radius: 13px; }
  .site-header.scrolled .brand-badge { width: 40px; height: 40px; }
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1200;
  background: linear-gradient(90deg, #186355, #D4A350 45%, #F3D896);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   HOME HERO
   --------------------------------------------------------------------- */
.hero.hx {
  display: block;
  min-height: 0;
  padding: clamp(40px, 5vw, 64px) 0 clamp(104px, 9vw, 132px);
  background: radial-gradient(120% 100% at 82% 0%, #1D3D66 0%, #10223D 46%, #0A1628 100%);
}
.hero.hx::before, .hero.hx::after { content: none; }

.hx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hx-spot {
  position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 34%), rgba(212,163,80,.20), transparent 62%);
  transition: background .2s linear;
}
.hx-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 70% at 60% 35%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 70% at 60% 35%, #000 30%, transparent 100%);
}
/* A perspective "road" that keeps rolling toward you */
.hx-road {
  position: absolute; left: -50%; right: -50%; bottom: -8%; height: 62%;
  background-image:
    linear-gradient(rgba(212,163,80,.30) 2px, transparent 2px),
    linear-gradient(90deg, rgba(212,163,80,.22) 2px, transparent 2px);
  background-size: 90px 90px;
  transform: perspective(420px) rotateX(64deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 40%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 40%, transparent 85%);
  animation: ll-road 2.4s linear infinite;
  opacity: .55;
}
@keyframes ll-road { to { background-position: 0 90px, 0 0; } }

/* Floating outline shapes that turn and drift (and follow the pointer) */
.hx-shape { position: absolute; display: block; will-change: transform; }
.hx-ring   { width: 120px; height: 120px; top: 9%; left: 43%; border: 2px solid rgba(233,199,125,.30); border-radius: 50%; animation: ll-drift 11s ease-in-out infinite; }
.hx-ring::after { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #E9C77D; box-shadow: 0 0 16px #E9C77D; }
.hx-ring   { animation: ll-drift 11s ease-in-out infinite, ll-turn 14s linear infinite; }
.hx-tri    { width: 54px; height: 54px; top: 70%; left: 4%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 56 52H4z' fill='none' stroke='%2346C2A0' stroke-width='3' stroke-linejoin='round' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: ll-turn 16s linear infinite reverse, ll-drift 9s ease-in-out infinite; }
.hx-plus   { width: 30px; height: 30px; top: 16%; left: 6%;
  background: linear-gradient(#E9C77D, #E9C77D) center/100% 4px no-repeat, linear-gradient(#E9C77D, #E9C77D) center/4px 100% no-repeat;
  opacity: .55; border-radius: 2px; animation: ll-turn 9s linear infinite, ll-drift 7s ease-in-out infinite; }
.hx-square { width: 46px; height: 46px; bottom: 30%; left: 49%; border: 2px solid rgba(70,194,160,.42); border-radius: 12px; animation: ll-cube-flip 10s ease-in-out infinite; }
.hx-dot    { width: 14px; height: 14px; top: 34%; left: 52%; border-radius: 50%; background: #D4A350; box-shadow: 0 0 22px 4px rgba(212,163,80,.55); animation: ll-drift 6s ease-in-out infinite; }
.hx-zig    { width: 90px; height: 24px; top: 6%; right: 6%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 24'%3E%3Cpath d='M2 20 14 4l12 16 12-16 12 16 12-16 12 16 12-16' fill='none' stroke='%23E9C77D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: ll-drift 8s ease-in-out infinite reverse; }

@keyframes ll-turn  { to { rotate: 360deg; } }
@keyframes ll-drift { 0%, 100% { translate: 0 0; } 50% { translate: 10px -18px; } }
@keyframes ll-cube-flip {
  0%, 100% { transform: perspective(300px) rotateX(0) rotateY(0); }
  25% { transform: perspective(300px) rotateX(180deg) rotateY(0); }
  50% { transform: perspective(300px) rotateX(180deg) rotateY(180deg); }
  75% { transform: perspective(300px) rotateX(360deg) rotateY(180deg); }
}

.hx-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hx-copy { position: relative; z-index: 2; transform: translateY(calc(var(--hx-sp, 0) * 36px)); opacity: calc(1 - var(--hx-sp, 0) * .5); }

.hx-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 8px 14px 8px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: ll-pop .7s var(--ease-out) both;
}
.hx-pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #3DDC97; flex-shrink: 0; }
.hx-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #3DDC97; animation: ll-ping 1.8s var(--ease-out) infinite; }
@keyframes ll-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes ll-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }

.hx-title {
  color: #fff;
  font-size: clamp(2.6rem, 4.9vw, 4.35rem);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 .32em;
  max-width: none;
  text-shadow: none;
}
.hx-line { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.06em; }
.hx-line > span { display: inline-block; animation: ll-rise 1s var(--ease-out) both; }
.hx-line + .hx-line > span { animation-delay: .1s; }
@keyframes ll-rise { from { transform: translateY(108%) rotate(5deg); } to { transform: none; } }

.hx-gold {
  background: linear-gradient(100deg, #C9933C 0%, #F7E1A6 22%, #D4A350 40%, #B98A3B 62%, #EFD08A 82%, #C9933C 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: ll-rise 1s var(--ease-out) .1s both, ll-shimmer 7s linear 1s infinite !important;
}
@keyframes ll-shimmer { to { background-position: -220% 0; } }

.hx-flip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .38em;
  margin: 0 0 14px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: rgba(255,255,255,.88);
  animation: ll-pop .8s var(--ease-out) .25s both;
}
.hx-words { position: relative; display: inline-grid; perspective: 700px; color: #E9C77D; }
.hx-words b {
  grid-area: 1 / 1; font-weight: 800; white-space: nowrap;
  transform-origin: 50% 50% -.7em;
  transform: rotateX(-100deg); opacity: 0;
  transition: transform .7s var(--ease-out), opacity .4s ease;
}
.hx-words b.on  { transform: none; opacity: 1; }
.hx-words b.out { transform: rotateX(100deg); opacity: 0; }
.hx-words::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 3px; border-radius: 3px;
  width: var(--ww, 100%);
  background: linear-gradient(90deg, #D4A350, #F3D896);
  transition: width .6s var(--ease-out);
}
.no-js .hx-words b:first-child { transform: none; opacity: 1; }

.hx-lede {
  max-width: 520px; margin: 0 0 26px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
  color: rgba(255,255,255,.78);
  animation: ll-pop .8s var(--ease-out) .35s both;
}
.hx-actions { margin-bottom: 26px; animation: ll-pop .8s var(--ease-out) .45s both; }
.hx-actions .btn { transition: transform .25s var(--ease-out), box-shadow .25s, background .25s, color .25s; }
.hx-arrow { display: inline-block; transition: transform .3s var(--ease-spring); }
.btn:hover .hx-arrow { transform: translateX(5px); }

.hx-proof {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch;
  animation: ll-pop .8s var(--ease-out) .55s both;
}
.hx-proof li {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 2px 24px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.hx-proof li:first-child { padding-left: 0; border-left: 0; }
.hx-proof-top { display: flex; align-items: center; gap: 9px; min-height: 26px; }
.hx-proof strong { color: #fff; font-family: var(--font-heading); font-size: 1.55rem; line-height: 1; letter-spacing: -.02em; }
.hx-proof-label { color: rgba(255,255,255,.62); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.hx-stars5 { display: inline-flex; align-items: center; gap: 2px; color: #F3C969; line-height: 0; }
.hx-stars5 svg { display: block; flex-shrink: 0; }

/* ---------- The 3D stage ---------- */
.hx-stage {
  position: relative;
  height: clamp(380px, 38vw, 500px);
  perspective: 1100px;
  perspective-origin: 50% 40%;
  animation: ll-pop 1s var(--ease-out) .2s both;
}
.hx-morph {
  position: absolute; left: 50%; top: 48%;
  width: min(420px, 84%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: ll-morph 13s ease-in-out infinite, ll-turn 36s linear infinite;
}
.hx-morph-fill {
  background:
    radial-gradient(circle at 30% 28%, rgba(247,225,166,.38), transparent 46%),
    linear-gradient(140deg, rgba(212,163,80,.42), rgba(24,99,85,.42) 70%, rgba(15,31,56,.2));
  box-shadow: inset 0 0 60px rgba(255,255,255,.08), 0 40px 120px -40px rgba(212,163,80,.45);
}
.hx-morph-line {
  width: min(500px, 98%);
  border: 1.5px dashed rgba(233,199,125,.38);
  animation: ll-morph 17s ease-in-out infinite reverse, ll-turn 48s linear infinite reverse;
}
@keyframes ll-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 63% 37% 38% 62% / 55% 61% 39% 45%; }
  66% { border-radius: 36% 64% 52% 48% / 63% 35% 65% 37%; }
}

.hx-world {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--hx-sp, 0) * -70px))
    rotateX(calc(-14deg + var(--hx-ty, 0deg)))
    rotateY(calc(-22deg + var(--hx-tx, 0deg) + var(--hx-sp, 0) * 50deg))
    scale(var(--hx-scale, 1));
}

/* A box: .bx positions it, .bx-turn turns it, .f are the six faces */
.bx {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d;
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
  animation: ll-bob var(--bob, 5s) ease-in-out var(--bob-delay, 0s) infinite;
}
.bx-turn { position: absolute; inset: 0; transform-style: preserve-3d; animation: var(--turn, none); }
.bx .f {
  position: absolute; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(90,58,18,.28), inset 0 0 24px rgba(90,58,18,.16);
  overflow: hidden;
  font-style: normal;
}
.f-front, .f-back { width: var(--w); height: var(--h); left: 0; top: 0; }
.f-front { transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(165deg, var(--kraft-1), var(--kraft-2)); }
.f-back  { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: linear-gradient(165deg, var(--kraft-2), var(--kraft-3)); }
.f-right, .f-left { width: var(--d); height: var(--h); top: 0; left: calc((var(--w) - var(--d)) / 2); }
.f-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(165deg, var(--kraft-2), var(--kraft-4)); }
.f-left  { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(165deg, var(--kraft-1), var(--kraft-3)); }
.f-top, .f-bottom { width: var(--w); height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2); }
.f-top    { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: linear-gradient(180deg, #F0CF8C, var(--kraft-1)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: var(--kraft-4); }
/* Tape across the lid and down the front */
.bx-tape { position: absolute; inset: 0 auto 0 50%; width: 24%; translate: -50% 0; background: linear-gradient(90deg, #0F1F38, #1A3557 50%, #0F1F38); box-shadow: 0 0 0 1px rgba(233,199,125,.25); }
.bx-tape::after { content: ''; position: absolute; inset: 0 auto 0 50%; width: 2px; translate: -50% 0; background: rgba(233,199,125,.7); }
.f-front::before, .f-back::before { content: ''; position: absolute; top: 0; left: 50%; width: 24%; height: 22%; translate: -50% 0; background: linear-gradient(90deg, #0F1F38, #1A3557 50%, #0F1F38); }
.bx-label { display: grid; place-items: center; width: 46%; aspect-ratio: 1; margin-top: 12%; padding: 5%; border-radius: 14px; background: #FFFDF7; box-shadow: 0 6px 14px -6px rgba(60,35,5,.45); rotate: -4deg; }
.bx-label img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.bx-print { margin-top: 14%; color: rgba(70,42,10,.72); font: 800 11px/1.25 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.bx-arrows { display: block; font-size: 20px; letter-spacing: 0; line-height: 1; margin-bottom: 4px; }
.bx-stamp { margin-top: 18%; padding: 4px 10px; border: 2.5px solid rgba(160,40,30,.75); border-radius: 6px; color: rgba(160,40,30,.8); font: 900 12px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; rotate: -10deg; }

.bx-a { --w: 210px; --h: 150px; --d: 178px; --y: 96px;  --bob: 6s;   --turn: ll-swing 9s ease-in-out infinite alternate; }
.bx-b { --w: 156px; --h: 112px; --d: 136px; --y: -34px; --bob: 6s;   --bob-delay: -.4s; --turn: ll-spin 18s linear infinite reverse; }
.bx-c { --w: 104px; --h: 76px;  --d: 92px;  --y: -128px; --bob: 6s;  --bob-delay: -.8s; --turn: ll-spin 12s linear infinite; }
.bx-m { --w: 46px;  --h: 36px;  --d: 42px;  --bob: 4s; --turn: ll-tumble 7s linear infinite; }
.bx-m .f-front::before, .bx-m .f-back::before { height: 30%; }
.bx-m1 { --x: 236px; --y: -6px; }
.bx-m2 { --x: -236px; --y: 30px; --bob-delay: -2s; --turn: ll-tumble 9s linear infinite reverse; }
.bx-m .bx-tape { width: 26%; }

@keyframes ll-bob    { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes ll-spin   { to { transform: rotateY(360deg); } }
@keyframes ll-swing  { from { transform: rotateY(-26deg); } to { transform: rotateY(26deg); } }
@keyframes ll-tumble { to { transform: rotateX(360deg) rotateY(720deg); } }

.hx-shadow {
  position: absolute; left: 50%; top: 50%;
  width: 360px; height: 360px; margin: -180px 0 0 -180px;
  transform: translateY(176px) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.2) 55%, transparent);
  animation: ll-shadow 6s ease-in-out infinite;
}
@keyframes ll-shadow { 50% { opacity: .7; } }

.hx-orbit { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translateY(-20px) rotateZ(-9deg); }
.hx-orbit-spin { transform-style: preserve-3d; animation: ll-spin 15s linear infinite; }

/* Spinning circular-text badge */
.hx-badge {
  position: absolute; top: 2%; right: 3%;
  width: clamp(104px, 10vw, 132px); height: auto;
  animation: ll-turn 18s linear infinite;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.35));
}
.hx-badge-bg { fill: #D4A350; stroke: rgba(15,31,56,.25); stroke-width: 2; }
.hx-badge text { font: 800 15.5px var(--font-heading); letter-spacing: 1.5px; fill: #0F1F38; }
.hx-badge-star { fill: #0F1F38; transform-origin: 100px 100px; animation: ll-turn 18s linear infinite reverse; }

/* Glass chips that float around the boxes */
.hx-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
}
.hx-chip-1 { top: 22%; left: 0; animation: ll-pop .8s var(--ease-spring) .8s both, ll-float 6s ease-in-out 1.6s infinite; }
.hx-chip-2 { bottom: 9%; right: 2%; animation: ll-pop .8s var(--ease-spring) 1s both, ll-float 7s ease-in-out 1.8s infinite reverse; }
.hx-chip .hx-stars5 svg { width: 13px; height: 13px; }
.hx-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #3DDC97; color: #0F1F38; font-size: 12px; }
@keyframes ll-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Phones/tablets use a pre-rendered image of the stack instead of live 3D */
.hx-stack { display: none; }
@media (max-width: 1024px) {
  .hx-world { display: none !important; }
  .hx-stack {
    display: block; position: absolute; left: 50%; top: 50%;
    width: 250px; margin: -151px 0 0 -125px;
    animation: ll-stack-in .9s var(--ease-spring) .25s backwards, ll-stack-float 6s ease-in-out 1.2s infinite;
    will-change: transform;
  }
  .hx-stack img { display: block; width: 100%; height: auto; }
  /* keep the phone hero light: no repaint-heavy loops */
  .hx-road { animation: none; }
  .hx-morph-fill { animation: ll-turn 40s linear infinite; }
  .hx-gold { animation: ll-rise 1s var(--ease-out) .1s both !important; }
  .hx-copy { transform: none !important; opacity: 1 !important; }
  .brand-gold { animation: none; background-position: 30% 0; }
  .qq-card-wrap::before { animation: none; }
  .qq-card-wrap::after { display: none; }
  .ll-deco .hx-morph { animation: ll-turn 40s linear infinite; }
}
@media (max-width: 768px) {
  .hx-stack { width: 196px; margin: -118px 0 0 -98px; }
}
@keyframes ll-stack-in { from { opacity: 0; transform: translateY(-40px) scale(.9); } }
@keyframes ll-stack-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-9px) rotate(1.2deg); } }

/* ---------- Crossing ribbons ---------- */
.hx-ribbons {
  position: relative; z-index: 5;
  height: 150px; margin: -82px 0 -48px;
  overflow: hidden; overflow: clip;
  pointer-events: none;
}
.rib {
  position: absolute; top: 50%; left: -6%; width: 112%;
  padding: 15px 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(.92rem, 1.35vw, 1.12rem);
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.rib-light { background: #FFFFFF; color: #0F1F38; transform: translateY(-50%) rotate(2.4deg); box-shadow: 0 14px 34px -18px rgba(15,31,56,.45); border-block: 1px solid rgba(15,31,56,.08); }
.rib-gold  { z-index: 1; background: linear-gradient(90deg, #C8963E, #E7C47A 50%, #C8963E); color: #0F1F38; transform: translateY(-50%) rotate(-2.6deg); box-shadow: 0 18px 40px -16px rgba(10,22,40,.6); }
.rib-track { display: flex; width: max-content; will-change: transform; animation: ll-marquee 44s linear infinite; }
.rib-track[data-rib="1"] { animation-direction: reverse; }
.rib-run i { font-style: normal; display: inline-block; margin: 0 .85em; }
.rib-gold .rib-run i { color: #0F1F38; }
.rib-light .rib-run i { color: #D4A350; }
.rib-js .rib-track { animation: none; }
@keyframes ll-marquee { to { transform: translateX(-25%); } }

/* ---------- Quick quote + numbers ---------- */
.section.qq { padding-top: clamp(78px, 8vw, 112px); }
.qq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 470px);
  grid-template-areas: "copy card";
  column-gap: clamp(32px, 6vw, 88px); row-gap: 28px;
  align-items: start;
}
.qq-copy { grid-area: copy; align-self: center; }
.qq-copy h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.06; margin: 12px 0 14px; }
.qq-copy p { color: #5a687d; font-size: 1.08rem; max-width: 520px; margin: 0; }
.qq-stats { grid-area: nums; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-self: start; }
.qq-stat {
  position: relative; overflow: hidden;
  padding: 20px 20px 18px; border-radius: 22px;
  background: #fff; border: 1px solid rgba(15,31,56,.08);
  box-shadow: 0 22px 44px -32px rgba(15,31,56,.45);
}
.qq-stat::after { content: ''; position: absolute; right: -26px; bottom: -26px; width: 84px; height: 84px; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: linear-gradient(140deg, rgba(212,163,80,.28), rgba(24,99,85,.18)); animation: ll-morph 12s ease-in-out infinite; }
.qq-stat .stat-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: #0F1F38; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.qq-stat .stat-label { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5a687d; }

.qq-card-wrap { grid-area: card; position: relative; border-radius: 30px; padding: 2px; isolation: isolate; }
.qq-card-wrap::before,
.qq-card-wrap::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--ll-angle), #D4A350, #186355 25%, #0F1F38 45%, #E9C77D 70%, #D4A350);
  animation: ll-angle 6s linear infinite;
}
.qq-card-wrap::after { z-index: -2; filter: blur(26px); opacity: .32; inset: 10px; }
@keyframes ll-angle { to { --ll-angle: 360deg; } }
.hero-card.qq-card,
.hero-card.qq-card:hover { margin: 0; max-width: none; border-radius: 28px; transform: none; background: #fff; border: 0; }

/* ---------------------------------------------------------------------
   SITE-WIDE MOTION
   --------------------------------------------------------------------- */
/* Reveals now rise and turn in 3D, one after another */
.js .reveal { opacity: 1; transform: none; transform-origin: 50% 100%; transition: opacity .7s ease, transform .9s var(--ease-out); }
.js .reveal.rv-pending { opacity: 0; transform: perspective(1000px) translateY(30px) rotateX(7deg) scale(.98); }
.js .reveal.in { transition-delay: var(--rv-delay, 0s); }
/* Forms are never hidden behind an animation */
.js .reveal:has(form), .js .reveal.qq-card-wrap { opacity: 1; transform: none; transition: none; }

/* Headings: each word slides up out of a mask */
.ll-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.ll-w > span { display: inline-block; transition: transform .9s var(--ease-out); transition-delay: calc(var(--wi, 0) * 45ms + var(--rv-delay, 0s)); }
.rv-pending .ll-w > span, .ll-w-wait .ll-w > span { transform: translateY(105%) rotate(4deg); }

/* Gallery photos unfold from the middle */
.js .gallery-tile.reveal { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0px); transition: clip-path 1.1s var(--ease-out); }
.js .gallery-tile.reveal.rv-pending { clip-path: inset(14% 14% 14% 14% round 26px); }
.js .gallery-tile.reveal img { transition: transform 1.4s var(--ease-out); }
.js .gallery-tile.reveal.rv-pending img { transform: scale(1.2); }
.js .gallery-tile.reveal.in img { transition-delay: var(--rv-delay, 0s); }
.js .gallery-tile.reveal.in:hover img { transform: scale(1.05); transition-delay: 0s; transition-duration: .6s; }

/* Step numbers flip over when they arrive */
.process-step .step-num { transition: transform .9s var(--ease-spring), background .3s; transition-delay: calc(var(--rv-delay, 0s) + .2s); }
.js .process-step.reveal.rv-pending .step-num { transform: perspective(400px) rotateY(180deg) scale(.6); }

/* Service icons do a little turn on hover */
.service-card .service-icon, .benefit .benefit-icon { transition: transform .6s var(--ease-spring); }
.service-card:hover .service-icon, .benefit:hover .benefit-icon { transform: rotate(-8deg) scale(1.1); }

/* Pointer tilt (set by motion.js) */
.ll-tilt { transform-style: preserve-3d; will-change: transform; }
.ll-tilting { transition: transform .12s linear !important; }

/* ---------- Decorations injected into page headers and the CTA band ---------- */
.ll-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ll-deco .hx-morph { left: auto; right: -90px; top: 50%; width: 340px; translate: 0 -50%; }
.ll-deco .hx-morph-fill { opacity: .55; }
.ll-deco .hx-morph-line { right: -130px; width: 420px; }
.ll-deco .hx-ring { top: 18%; left: 7%; width: 76px; height: 76px; }
.ll-deco .hx-plus { top: auto; bottom: 18%; left: 16%; }
.ll-deco .hx-square { bottom: auto; top: 22%; left: auto; right: 22%; }
.ll-deco .hx-dot { top: auto; bottom: 26%; left: auto; right: 34%; }
.ll-deco-stage { position: absolute; right: 4%; bottom: 8%; width: 120px; height: 120px; perspective: 700px; opacity: .92; }
.ll-deco-stage .hx-world { --hx-scale: 1; transform: rotateX(-18deg) rotateY(-28deg); }
.ll-deco-stage .bx { --w: 74px; --h: 56px; --d: 64px; --turn: ll-spin 10s linear infinite; }
.ll-deco-stage .bx .f-front::before, .ll-deco-stage .bx .f-back::before { height: 26%; }
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band .ll-deco .hx-morph { right: auto; left: -120px; }
.cta-band .ll-deco .hx-morph-line { left: -160px; right: auto; }
.cta-band .ll-deco .hx-ring { left: auto; right: 6%; top: 14%; }

.section-dark { position: relative; overflow: hidden; isolation: isolate; }
.section-dark > .container { position: relative; z-index: 1; }
.section-dark .ll-deco .hx-morph { right: auto; left: -140px; top: 30%; }
.section-dark .ll-deco .hx-morph-line { left: -180px; right: auto; top: 30%; }
.section-dark .ll-deco .hx-ring { left: auto; right: 8%; top: 12%; }
.section-dark .ll-deco .hx-square, .section-dark .ll-deco .hx-dot { display: none; }
.section-dark .ll-deco .hx-plus { bottom: 10%; left: 4%; }

/* Home reviews: a slow sideways loop on bigger screens (pauses on hover), swipe cards on phones */
.review-grid.rv-marquee {
  display: block; overflow: hidden; padding: 12px 0 28px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rv-track { display: flex; gap: 20px; width: max-content; animation: ll-glide 70s linear infinite; }
.rv-marquee:hover .rv-track, .rv-marquee:focus-within .rv-track { animation-play-state: paused; }
.rv-track .review-card { flex: 0 0 360px; margin: 0; opacity: 1; transform: none; transition: transform .35s var(--ease-out), box-shadow .35s; }
.rv-track .review-card:hover { transform: translateY(-6px) rotate(-.6deg); }
@keyframes ll-glide { to { transform: translateX(calc(-50% - 10px)); } }

/* Background shapes fade in softly (they are added after the page paints) */
.ll-deco { animation: ll-fade-in .8s ease both; }
@keyframes ll-fade-in { from { opacity: 0; } }

/* Pause everything that is off-screen */
.ll-paused, .ll-paused * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hx-inner { grid-template-columns: 1fr; gap: 8px; }
  .hx-copy { text-align: left; }
  .hx-plus { left: auto; right: 10%; top: 44%; }
  .hx-stage { z-index: 1; }
  .hx-stage { height: 360px; max-width: 560px; width: 100%; margin: 0 auto; --hx-scale: .82; }
  .hx-world { --hx-scale: .82; }
  .qq-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "card"; }
  .qq-card-wrap { max-width: 620px; width: 100%; }
  .ll-deco-stage { right: 2%; bottom: 4%; }
}
@media (max-width: 768px) {
  .hero.hx { padding: 30px 0 96px; }
  .hx-kicker { font-size: 11px; margin-bottom: 14px; }
  .hx-title { font-size: clamp(2.5rem, 12.4vw, 3.4rem); }
  .hx-flip { font-size: 1.12rem; }
  .hx-lede { margin-bottom: 20px; }
  .hx-actions { flex-direction: column; align-items: stretch; margin-bottom: 0; }
  .hx-actions .btn { width: 100%; justify-content: center; }
  .hx-proof { display: none; }
  .hx-stage { height: 300px; margin-top: 4px; }
  .hx-world { --hx-scale: .62; }
  .hx-badge { width: 92px; top: 0; right: 0; }
  .hx-badge text { font-size: 16px; }
  .hx-chip { font-size: 12px; padding: 8px 11px; }
  .hx-chip-1 { top: 8%; left: 0; }
  .hx-chip-2 { bottom: 4%; right: 0; }
  .hx-morph-fill { width: 78%; }
  .hx-ring { width: 80px; height: 80px; }
  .hx-square, .hx-zig, .hx-plus, .hx-dot { display: none; }
  .hx-ring { left: auto; right: -24px; top: 2%; }
  .hx-tri { top: auto; bottom: 30%; left: 2%; width: 40px; height: 40px; }
  .hx-ribbons { height: 120px; margin: -70px 0 -40px; }
  .rib { padding: 11px 0; font-size: .82rem; }
  .qq-stat { padding: 16px 16px 14px; }
  .ll-deco-stage, .ll-deco .hx-ring, .ll-deco .hx-square, .ll-deco .hx-dot { display: none; }
  .review-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 6px 16px 18px; scrollbar-width: none;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-grid .review-card { flex: 0 0 86%; scroll-snap-align: center; margin: 0; }
  .ll-deco .hx-morph { width: 220px; right: -110px; }
  .ll-deco .hx-morph-line { display: none; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION: keep the look, drop the movement
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx-ribbons *, .ll-deco, .ll-deco *, .qq *, .scroll-progress, .hx-stack,
  .brand-badge, .brand-badge::before, .brand-badge::after, .brand-badge picture::after, .brand-name, .brand-tag, .brand-gold { animation: none !important; transition: none !important; }
  .hx-words b { transform: none; opacity: 0; }
  .hx-words b.on { opacity: 1; }
  .js .reveal, .js .reveal.rv-pending, .js .gallery-tile.reveal, .js .gallery-tile.reveal img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ll-w > span, .rv-pending .ll-w > span, .ll-w-wait .ll-w > span { transform: none !important; }
  .js .process-step.reveal.rv-pending .step-num { transform: none; }
}


/* =====================================================================
   CALM PAGE CHANGES (2026-10)
   ===================================================================== */
html { scroll-behavior: auto; }   /* in-page links still glide (main.js); arriving at /page#section jumps straight there */

/* Entrance animations play on the first page of a visit only (html.ll-first is set in <head>) */
html:not(.ll-first) .brand-badge,
html:not(.ll-first) .brand-name,
html:not(.ll-first) .brand-tag,
html:not(.ll-first) .hx-kicker,
html:not(.ll-first) .hx-flip,
html:not(.ll-first) .hx-lede,
html:not(.ll-first) .hx-actions,
html:not(.ll-first) .hx-proof,
html:not(.ll-first) .hx-stage,
html:not(.ll-first) .hx-line > span { animation: none; }
html:not(.ll-first) .hx-gold { animation: ll-shimmer 7s linear 1s infinite !important; }
html:not(.ll-first) .hx-chip-1 { animation: ll-float 6s ease-in-out infinite; }
html:not(.ll-first) .hx-chip-2 { animation: ll-float 7s ease-in-out infinite reverse; }
html:not(.ll-first) .hx-stack { animation: ll-stack-float 6s ease-in-out infinite; }
html:not(.ll-first) .ll-deco { animation: none; }
@media (max-width: 1024px) { html:not(.ll-first) .hx-gold { animation: none !important; } }

/* Soft cross-fade between pages (Chrome, Edge, Safari 18.2+); header and bottom nav stay put */
@view-transition { navigation: auto; }
.site-header { view-transition-name: ll-header; }
.app-nav { view-transition-name: ll-nav; }
::view-transition-group(ll-header), ::view-transition-group(ll-nav) { animation: none; }
::view-transition-old(root) { animation: ll-vt-out .16s ease both; }
::view-transition-new(root) { animation: ll-vt-in .24s ease both; }
@keyframes ll-vt-out { to { opacity: 0; } }
@keyframes ll-vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Gold progress line the moment a link is tapped (cleared when the next page shows) */
html.ll-leaving .scroll-progress { transform: scaleX(.7) !important; transition: transform 2.5s cubic-bezier(.1, .7, .2, 1) !important; opacity: 1; }

/* =====================================================================
   DECLUTTER (2026-10): one ribbon, calm quote section, real crew photo
   ===================================================================== */
.hx-ribbons { height: 104px; margin: -60px 0 -34px; }
.rib-gold { transform: translateY(-50%) rotate(-1.8deg); }
.qq-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.qq-points li { position: relative; padding-left: 32px; color: #33435a; font-weight: 600; line-height: 1.45; }
.qq-points li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: #FBF3E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%238A6420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(212,163,80,.45);
}
.qq-points a { color: #8A6420; font-weight: 800; white-space: nowrap; }
.intro-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(15,31,56,.55); }
.intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-photo figcaption {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 14px;
  background: rgba(15,31,56,.82); color: #fff; font-size: 13.5px; font-weight: 800;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.intro-photo-stars { color: #F3C969; letter-spacing: 1px; }
@media (max-width: 768px) {
  .hx-ribbons { height: 92px; margin: -54px 0 -30px; }
  .qq-points { margin-top: 16px; gap: 10px; }
  .intro-photo { border-radius: 22px; }
}