/* =====================================================================
   Elev8depictions, cinematic edition
   --------------------------------------------------------------------
   Design system, navbar, footer, repeating components.

   A note from Kort, the founder: this stylesheet is hand-written.
   No Tailwind, no SASS, no build step. If you want to make a change,
   open the file, find the section header, edit, refresh. The way the
   web used to be, and still is when nobody's looking.

   Section order:
     01  CSS variables (the brand palette)
     02  Reset and base typography
     03  Ambient layers (aurora, stars, grain)
     04  Cursor glow
     05  Scroll progress bar
     06  Navbar
     07  Buttons
     08  Page headers and section heads
     09  Reveal-on-scroll
     10  Kinetic marquee
     11  Spotlight border cards
     12  Odometer counter
     13  Footer
     14  Founding Five pill
     15  Helpers, utilities and typography
     16  Preloader
     17  Google review badge
     18  Care Plan teaser
   ===================================================================== */

/* ─── 01  Variables ─── The brand. Don't change these without a reason. */
:root{
  --bg:#0A0518;             /* Midnight, sits behind everything */
  --bg-deep:#03010A;        /* Deepest blue, used for footer fade */
  --bg-card:#120832;        /* A whisper warmer than the bg */
  --violet:#1B0F4A;
  --rich:#3B1C82;
  --amber:#F59E0B;          /* Brand primary */
  --amber-hot:#FBBF24;      /* Brand primary, hover state */
  --amber-soft:rgba(245,158,11,0.08);
  --cyan:#22D3EE;
  --off-white:#ECE6FA;
  --text-dim:#C9B8F0;       /* Body copy on dark backgrounds */
  --lavender:#9A82E8;       /* Captions and metadata only */
  --border:rgba(154,130,232,0.14);
  --border-strong:rgba(154,130,232,0.28);
  --glass:rgba(3,1,10,0.65);
  --ease:cubic-bezier(.16,1,.3,1);   /* The one easing curve I use */
}

/* ─── 02  Reset and base ─── Box-sizing, no margin, system font fallback. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--off-white);
  font-weight:400;
  line-height:1.6;
  overflow-x:clip;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,h4,h5,.display{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.03em;
  color:var(--off-white);
}
.serif-it{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.02em;
  color:var(--amber);
}
.amber{color:var(--amber)}
.cyan{color:var(--cyan)}

/* All-caps mono labels. Used everywhere as section eyebrows. */
.mono{
  font-family:'JetBrains Mono',monospace;
  font-size:0.74rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--lavender);
  font-weight:600;
}

/* Layout containers. .wrap is the standard 1280px column. */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 32px}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}

/* ─── 03  Ambient background ─── Aurora blobs, stars, film grain. */
.aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);mix-blend-mode:screen}
.aurora::before{
  width:720px;height:720px;background:var(--rich);
  top:-240px;left:-120px;
  animation:auroraFloatA 24s ease-in-out infinite;
  opacity:0.45;
}
.aurora::after{
  width:560px;height:560px;background:#6D28D9;
  bottom:-220px;right:-120px;
  animation:auroraFloatB 30s ease-in-out infinite;
  opacity:0.3;
}
@keyframes auroraFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40vw,30vh) scale(1.15)}}
@keyframes auroraFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40vw,-20vh) scale(1.2)}}

/* Twelve hand-placed pinpoint stars. Tile repeats so it covers the page. */
.stars{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0.85;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff,    transparent 60%),
    radial-gradient(1px   1px   at 28% 62%, #e8d5ff, transparent 60%),
    radial-gradient(1.2px 1.2px at 45%  8%, #fff,    transparent 60%),
    radial-gradient(1px   1px   at 58% 42%, #c8b8ff, transparent 60%),
    radial-gradient(1.8px 1.8px at 72% 78%, #fff,    transparent 60%),
    radial-gradient(1px   1px   at 85% 22%, #d4c4ff, transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 54%, #fff,    transparent 60%),
    radial-gradient(1px   1px   at  6% 88%, #b8a8ff, transparent 60%),
    radial-gradient(0.8px 0.8px at 38% 92%, #fff,    transparent 60%),
    radial-gradient(1.1px 1.1px at 65% 14%, #e0d0ff, transparent 60%),
    radial-gradient(0.9px 0.9px at 18% 48%, #fff,    transparent 60%),
    radial-gradient(1px   1px   at 78% 36%, #fff,    transparent 60%);
  background-size:1200px 1000px;
  background-repeat:repeat;
  animation:starsTwinkle 6s ease-in-out infinite;
}
@keyframes starsTwinkle{0%,100%{opacity:0.75}50%{opacity:1}}

/* SVG turbulence as film grain. Cheap, chunky, looks expensive. */
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─── 04  Cursor glow ─── Soft amber halo that follows the mouse. */
.cursor-glow{
  position:fixed;width:500px;height:500px;border-radius:50%;
  pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(245,158,11,0.13) 0%, rgba(245,158,11,0.04) 30%, transparent 60%);
  transform:translate(-50%,-50%);
  will-change:transform;
  mix-blend-mode:screen;
  opacity:0;transition:opacity .4s;
}
.cursor-glow.active{opacity:1}
@media (hover:none){.cursor-glow{display:none}}

/* ─── 05  Scroll progress bar ─── Pinned to the very top edge. */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:linear-gradient(90deg, var(--amber), var(--amber-hot), var(--cyan));
  transform-origin:0 50%;transform:scaleX(0);
}

/* ─── 06  Navbar ─── Sticky. Goes solid when you scroll past the hero.
   --------------------------------------------------------------------
   The padding-top env() handles iOS notch/Dynamic Island devices and
   any browser that reports a top safe-area inset. Without it, the
   status bar covers the top half of the navbar on iPhone X+ models.
   The pages also need <meta viewport-fit="cover"> for env() to fire. */
.nav{
  position:sticky;top:0;z-index:100;
  padding-top:env(safe-area-inset-top, 0);
  background:rgba(10,5,24,0.7);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transition:background .4s, border-color .4s;
}
.nav.scrolled{background:rgba(10,5,24,0.92);border-bottom-color:var(--border-strong)}
.nav-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0}

.brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk';font-weight:700;font-size:1.1rem;letter-spacing:-0.02em;color:var(--off-white)}
.brand-glyph{
  width:38px;height:38px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(245,158,11,0.3);
  display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,#2a1660 0%,#1E1035 100%);
  position:relative;
}
.brand-glyph::before{
  content:"";position:absolute;inset:0;
  background:conic-gradient(from 0deg, transparent, rgba(245,158,11,0.22), transparent);
  animation:brandGlyphSpin 5s linear infinite;
  opacity:0.7;
}
.brand-glyph img{
  width:78%;height:78%;object-fit:contain;display:block;
  position:relative;z-index:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
@keyframes brandGlyphSpin{to{transform:rotate(360deg)}}

.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{font-size:0.86rem;color:var(--text-dim);padding:8px 14px;border-radius:8px;transition:all .3s var(--ease);position:relative;font-weight:500}
.nav-links a:hover{color:var(--off-white);background:rgba(245,158,11,0.08)}
.nav-links a.active{color:var(--amber)}
.nav-links a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;
  height:1.5px;background:var(--amber);border-radius:2px;
  box-shadow:0 0 12px var(--amber);
}
.nav-cta{
  padding:9px 18px !important;
  background:var(--amber);color:var(--bg-deep) !important;
  font-weight:600;border-radius:8px;margin-left:8px;
}
.nav-cta:hover{
  background:var(--amber-hot) !important;color:var(--bg-deep) !important;
  transform:translateY(-1px);box-shadow:0 8px 24px rgba(245,158,11,0.35);
}

/* ─── Navbar reviews chip ───
   Tiny "★ 5.0 Google" pill injected by shared.js. Always-visible
   social proof, doubles as a quick anchor link to the reviews section
   on the home page. Stays compact on every screen size. */
.nav-reviews-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 10px;border-radius:100px;
  background:rgba(245,158,11,0.07);
  border:1px solid rgba(245,158,11,0.32);
  text-decoration:none;
  margin-right:8px;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.nav-reviews-chip:hover{
  background:rgba(245,158,11,0.14);
  border-color:var(--amber);
  transform:translateY(-1px);
}
.nav-reviews-chip .nav-rc-star{
  color:var(--amber);font-size:0.95rem;line-height:1;
  text-shadow:0 0 8px rgba(245,158,11,0.5);
}
.nav-reviews-chip .nav-rc-text{
  display:inline-flex;align-items:baseline;gap:5px;
  font-family:'Space Grotesk',sans-serif;line-height:1;
}
.nav-reviews-chip .nav-rc-text strong{
  color:var(--off-white);font-weight:700;font-size:0.86rem;letter-spacing:-0.01em;
}
.nav-reviews-chip .nav-rc-source{
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--lavender);font-weight:600;
}

/* On smaller screens hide the "Google" label, keep the rating+star.
   The chip gets even smaller below 540px to save room next to the
   burger menu. */
@media (max-width:880px){
  .nav-reviews-chip{margin-right:6px;padding:6px 10px 6px 9px}
  .nav-reviews-chip .nav-rc-source{display:none}
}
@media (max-width:400px){
  .nav-reviews-chip{padding:5px 8px 5px 7px;gap:6px}
  .nav-reviews-chip .nav-rc-text strong{font-size:0.78rem}
  .nav-reviews-chip .nav-rc-star{font-size:0.85rem}
}

/* Mobile burger. Three lines, no animation, simple is fine. */
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:8px;
  background:rgba(245,158,11,0.1);
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  transition:background .2s;
}
.nav-toggle:hover{background:rgba(245,158,11,0.18)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--off-white);border-radius:2px}

@media(max-width:880px){
  /* The dropdown opens just under the navbar. We add the safe-area
     inset so it lands flush below the nav on notched iPhones too.
     --------------------------------------------------------------
     Earlier this used transform: translateY(-110%) on its own to
     hide the closed state. That looks fine in isolation, but it
     only moves the menu up by 110% of its own height. If the menu
     is taller than 110% of its top offset, the bottom edge stays
     visible at the very top of the viewport, painting the amber
     "Start a project" CTA button above the actual navbar. The fix:
     also flip visibility, with a delayed transition so the slide
     animation still plays before the element disappears. */
  .nav-links{
    position:fixed;top:calc(74px + env(safe-area-inset-top, 0));right:0;left:0;
    background:rgba(10,5,24,0.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border-strong);
    flex-direction:column;align-items:stretch;gap:0;
    padding:16px 24px 24px;
    transform:translateY(-120%);
    visibility:hidden;
    pointer-events:none;
    /* On close: transform animates first, THEN visibility flips after .4s. */
    transition:transform .4s var(--ease), visibility 0s linear .4s;
  }
  .nav-links.open{
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
    /* On open: visibility flips immediately so the slide is visible. */
    transition:transform .4s var(--ease), visibility 0s linear 0s;
  }
  .nav-links a{padding:14px 16px;font-size:1rem;border-radius:10px}
  .nav-cta{margin-left:0;margin-top:8px;text-align:center}
  .nav-toggle{display:flex}
}

/* ─── 07  Buttons ─── Primary (amber), Ghost (outlined), Magnetic modifier. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:12px;
  font-weight:600;font-size:0.93rem;letter-spacing:0.005em;
  cursor:pointer;
  transition:all .3s var(--ease);
  position:relative;
  font-family:'Inter',sans-serif;
  border:none;text-align:center;line-height:1;white-space:nowrap;
}
.btn-primary{
  background:var(--amber);color:var(--bg-deep);
  box-shadow:0 8px 28px rgba(245,158,11,0.28);
  overflow:hidden;
  isolation:isolate;
}
/* Shimmer sweep across primary buttons every few seconds.
   Borrowed from the 21st.dev / shadcn-ui button pattern: a thin
   diagonal gradient slides across the button with a long pause in
   between, just enough to catch the eye without becoming noisy.
   Pause/sweep ratio is ~70/30 of the cycle. */
.btn-primary::after{
  content:"";
  position:absolute;
  top:0;left:-90%;
  width:60%;height:100%;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.0) 25%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.0) 75%,
    transparent 100%);
  transform:skewX(-22deg);
  animation:btnShimmer 5s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
  z-index:0;
}
.btn-primary > *{position:relative;z-index:1}
@keyframes btnShimmer{
  0%, 70%{ left:-90%; opacity:1 }
  100%{ left:160%; opacity:1 }
}
/* Pause shimmer when hovered (combined hover-glow is enough on its own) */
.btn-primary:hover::after{animation-play-state:paused}
.btn-primary:hover{
  background:var(--amber-hot);
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(245,158,11,0.42);
}
.btn-ghost{
  background:rgba(154,130,232,0.06);
  color:var(--off-white);
  border:1px solid var(--border-strong);
}
.btn-ghost:hover{
  background:rgba(154,130,232,0.12);
  border-color:var(--lavender);
  transform:translateY(-2px);
}
.btn-magnetic{position:relative;will-change:transform}

/* ─── 08  Page headers and section heads ─── */
.page-header{
  padding:80px 0 60px;text-align:center;
  position:relative;border-bottom:1px solid var(--border);
}
.page-header .mono{display:block;margin-bottom:18px}
.page-header h1{
  font-size:clamp(2.6rem,7vw,5.2rem);
  line-height:0.98;margin-bottom:22px;
  letter-spacing:-0.04em;
}
.page-header .lead{
  font-size:clamp(1rem,1.6vw,1.18rem);
  color:var(--text-dim);
  max-width:680px;margin:0 auto;line-height:1.6;
}
.page-header-decor{
  position:absolute;left:50%;top:0;
  width:1px;height:40px;
  background:linear-gradient(180deg,transparent,var(--amber));
  transform:translateX(-50%);opacity:0.5;
}

.section-head{margin-bottom:54px;max-width:780px}
.section-head .mono{display:block;margin-bottom:14px}
.section-head h2{font-size:clamp(2rem,4.8vw,3.4rem);margin-bottom:18px}
.section-head p{color:var(--text-dim);font-size:1.05rem;line-height:1.65}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ─── 09  Reveal on scroll ─── */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

/* ─── 10  Kinetic marquee ─── Brisk, draggable, never frantic. */
.kinetic-marquee{
  padding:32px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(3,1,10,0.4), rgba(27,15,74,0.3));
  overflow:hidden;position:relative;
  /* Soft fade on the edges so words don't pop in or out abruptly. */
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.km-track{
  display:flex;gap:80px;
  white-space:nowrap;will-change:transform;
  align-items:center;
  user-select:none;
}
.km-item{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Space Grotesk';font-weight:600;
  font-size:clamp(1.3rem,2.5vw,2rem);
  color:var(--text-dim);
  letter-spacing:-0.01em;
  pointer-events:none;  /* So drag works smoothly on the track itself */
}
.km-item .km-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 12px var(--amber);
  flex-shrink:0;
}
.km-item.km-italic{
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--amber);font-weight:400;
}

/* ─── 11  Spotlight border cards ─── Cursor-tracked amber radial glow. */
.spot-card{
  position:relative;
  background:linear-gradient(180deg, rgba(27,15,74,0.5), rgba(18,8,50,0.4));
  border:1px solid var(--border);
  border-radius:18px;
  padding:34px 30px;
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
}
.spot-card::before{
  content:"";position:absolute;inset:-1px;border-radius:19px;
  background:radial-gradient(circle 250px at var(--mx,50%) var(--my,50%), rgba(245,158,11,0.16), transparent 60%);
  opacity:0;transition:opacity .4s var(--ease);
  pointer-events:none;
}
.spot-card:hover{border-color:var(--border-strong)}
.spot-card:hover::before{opacity:1}
.spot-card-content{position:relative;z-index:1}

/* ─── 12  Odometer ─── */
.odometer{
  display:inline-flex;
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  line-height:1;letter-spacing:-0.04em;
}
.odo-strip{display:inline-block;overflow:hidden;height:1em}
.odo-strip-inner{
  display:flex;flex-direction:column;line-height:1;
  transition:transform 1.4s cubic-bezier(.65,0,.05,1);
}
.odo-strip-inner span{height:1em;display:block}

/* ─── 13  Footer ─── */
.site-footer{
  margin-top:120px;padding:80px 0 40px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(3,1,10,0.6));
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:56px;margin-bottom:56px;
}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{max-width:340px}
.footer-brand p{margin-top:18px;color:var(--text-dim);font-size:0.92rem;line-height:1.6}
.site-footer h4{
  font-family:'Space Grotesk';font-size:0.78rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px;font-weight:600;
}
.site-footer a{
  display:block;color:var(--text-dim);font-size:0.92rem;
  padding:5px 0;
  transition:color .25s var(--ease);
}
.site-footer a:hover{color:var(--amber)}
.footer-bot{
  padding-top:32px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
  color:var(--lavender);font-size:0.82rem;
}

/* ─── 14  Founding Five pill ─── Used in headers, footers, ambient nudges. */
.founding-pill{
  display:inline-flex;align-items:center;gap:14px;
  padding:10px 20px 10px 14px;border-radius:14px;
  background:linear-gradient(135deg, rgba(15,8,38,0.96), rgba(30,16,53,0.96));
  border:1px solid rgba(245,158,11,0.45);
  box-shadow:0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  text-decoration:none;color:var(--off-white);
  transition:all .35s var(--ease);
}
.founding-pill:hover{border-color:var(--amber);box-shadow:0 16px 40px rgba(245,158,11,0.28)}
.founding-pill .fp-star{color:var(--amber);font-size:1rem;text-shadow:0 0 12px rgba(245,158,11,0.7)}
.founding-pill .fp-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.founding-pill .fp-text strong{font-family:'Space Grotesk';font-weight:700;font-size:0.86rem;color:var(--amber);letter-spacing:0.01em}
.founding-pill .fp-text .fp-sub{
  font-family:'JetBrains Mono';font-size:0.6rem;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--lavender);margin-top:3px;
}
.founding-pill .fp-arrow{color:var(--amber);font-size:1.05rem;transition:transform .3s var(--ease)}
.founding-pill:hover .fp-arrow{transform:translateX(3px)}

/* ─── 15  Helpers ─── */
.section{padding:100px 0}
.section-tight{padding:64px 0}
.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin:80px 0;width:100%;
}
.glass{
  background:linear-gradient(180deg, rgba(27,15,74,0.4), rgba(18,8,50,0.3));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
}
.text-dim{color:var(--text-dim)}
.text-muted{color:var(--lavender)}
.center{text-align:center}

.section-cta{margin-top:60px;text-align:center}
.section-cta-line{font-size:1.05rem;color:var(--text-dim);margin-bottom:16px}
.section-cta-line em{
  font-style:normal;color:var(--amber);
  font-family:'Playfair Display',serif;font-style:italic;font-weight:400;
}
.section-cta-note{display:block;margin-top:14px;font-size:0.78rem;color:var(--lavender);letter-spacing:0.05em}

.lead{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--text-dim);line-height:1.65}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono';font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--lavender);font-weight:600;
}
.eyebrow .live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 14px var(--amber);
  animation:liveDotPulse 1.6s ease-in-out infinite;
}
@keyframes liveDotPulse{0%,100%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

.pull-quote{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.35;
  color:var(--off-white);
  padding:24px 0 24px 28px;
  border-left:2px solid var(--amber);
  margin:32px 0;letter-spacing:-0.01em;
}

.tag-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:100px;
  font-family:'JetBrains Mono';font-size:0.66rem;
  letter-spacing:0.14em;text-transform:uppercase;
  background:rgba(245,158,11,0.1);
  color:var(--amber);
  border:1px solid rgba(245,158,11,0.25);
  font-weight:600;
}

/* ─── 16  Preloader ─── Shown for ~400ms on first load, then fades out. */
.preloader{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 50%, #0B0628 0%, var(--bg-deep) 70%);
  z-index:999;display:grid;place-items:center;
  transition:opacity .6s ease, visibility .6s;
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader-mark{display:flex;align-items:center;gap:14px}
.preloader-mark .pm-glyph{
  width:46px;height:46px;border-radius:11px;
  background:linear-gradient(135deg,#2a1660,#1E1035);
  border:1px solid rgba(245,158,11,0.4);
  display:grid;place-items:center;overflow:hidden;
  position:relative;
}
.preloader-mark .pm-glyph::before{
  content:"";position:absolute;inset:0;
  background:conic-gradient(from 0deg, transparent, rgba(245,158,11,0.4), transparent);
  animation:preloaderSpin 1.4s linear infinite;
}
@keyframes preloaderSpin{to{transform:rotate(360deg)}}
.preloader-mark .pm-glyph img{
  width:78%;height:78%;object-fit:contain;
  position:relative;z-index:1;
}
.preloader-mark .pm-text{display:flex;flex-direction:column;line-height:1.2}
.preloader-mark .pm-text strong{font-family:'Space Grotesk';font-weight:700;font-size:1.05rem;color:var(--off-white)}
.preloader-mark .pm-text span{
  font-family:'JetBrains Mono';font-size:0.62rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--amber);margin-top:4px;
}

/* ─── 17  Google review badge ─── Used on review cards across the site. */
.google-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 8px;border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border-strong);
  font-family:'Inter',sans-serif;
  font-size:0.72rem;color:var(--text-dim);font-weight:500;
}
.google-badge .g-logo{
  width:14px;height:14px;flex-shrink:0;
}
.google-badge strong{color:var(--off-white);font-weight:600}

/* Linked variant: clickable badge that opens the review on Google for
   verification. Hovers brighter, shows the arrow. */
.google-badge--link{
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.google-badge--link:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--amber);
}
.google-badge--link .gb-arrow{
  margin-left:2px;color:var(--amber);font-weight:700;
  font-family:'Space Grotesk',sans-serif;font-size:0.78rem;
  transition:transform .25s var(--ease);
}
.google-badge--link:hover .gb-arrow{transform:translate(2px,-2px)}

/* Small "View on Google" link that sits inside each review card's
   author row, on the right. Lets visitors verify the review's real. */
.review-google-link{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--lavender);font-weight:600;
  text-decoration:none;
  padding:6px 10px;border-radius:6px;
  border:1px solid var(--border);
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.review-google-link:hover{
  color:var(--amber);border-color:rgba(245,158,11,0.4);
  background:rgba(245,158,11,0.06);
}

/* ─── 18  Comparison-slider dominant label ─────────────────────────────
   Used by the drag-to-compare sliders on /index, /work and the case
   study pages. Whichever side of the split is showing the most gets
   the .dominant class added by the slider JS, which switches it from
   a quiet pill to a bright amber pill so the visitor knows which
   version they're currently looking at. */
.ba-label{transition:all .35s var(--ease)}
.ba-label.dominant{
  background:var(--amber);
  color:var(--bg-deep) !important;
  transform:scale(1.08);
  box-shadow:0 8px 24px rgba(245,158,11,0.45);
  border:1px solid var(--amber);
}

/* ─── 19  Care Plan teaser ─── Drop-in card used on process and contact. */
.care-card{
  position:relative;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg, #1a0d40 0%, #0a0518 70%);
  border:1px solid var(--border-strong);
  padding:56px;
  display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center;
}
@media(max-width:780px){.care-card{grid-template-columns:1fr;padding:42px 28px;gap:28px;text-align:center}}
.care-card::before{
  content:"";position:absolute;left:-100px;top:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,0.18), transparent 60%);
  filter:blur(40px);pointer-events:none;
}
.care-illu{
  position:relative;width:100%;aspect-ratio:1;max-width:240px;margin:0 auto;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(34,211,238,0.18), rgba(245,158,11,0.12));
  border:1px solid var(--border-strong);
  display:grid;place-items:center;
  overflow:hidden;
}
.care-illu::before{
  content:"";position:absolute;inset:18px;border-radius:18px;
  border:1px dashed rgba(154,130,232,0.4);
}
.care-illu svg{width:50%;height:50%;color:var(--amber);filter:drop-shadow(0 0 14px rgba(245,158,11,0.5))}
.care-content h3{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:14px;line-height:1.05}
.care-content p{color:var(--text-dim);font-size:1rem;line-height:1.65;margin-bottom:18px}
.care-perks{
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;
}
.care-perk{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:8px;
  background:rgba(154,130,232,0.08);
  font-family:'JetBrains Mono';font-size:0.66rem;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;
}
.care-perk::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 8px var(--amber);
}
.care-content .btn{align-self:flex-start}

/* =====================================================================
   ─── 20  MOBILE PASS ──────────────────────────────────────────────
   --------------------------------------------------------------------
   Everything above is the desktop-leaning baseline. This section
   is the mobile rework.

   I researched how top mobile sites (Stripe, Notion, Mailchimp,
   Apple, Octopus Energy, Monzo) handle the same problems I had:

     - Thumb-reach: most thumbs land in the bottom 1/3 of the screen
       comfortably, the top 1/3 is awkward one-handed. So the primary
       action belongs at the bottom (sticky CTA bar).

     - Touch targets: 48dp minimum (Material), 44pt minimum (Apple
       HIG). I'm going for 48px+ on every button and form input.

     - Typography: 16-18px body minimum, 1.55-1.65 line-height. The
       desktop's clamp() values were squeezing body text to ~14px on
       small screens, which is too small for older eyes (much of my
       Shropshire SMB demographic is 40-60).

     - Speed: rural 4G in Shropshire isn't always fantastic, so the
       aurora animations slow down or pause on smaller screens to
       save battery and CPU.

     - Spacing: desktop 100-140px sections feel like dead air on
       mobile. Crunching to 56-72px keeps the page moving.

     - Motion: prefers-reduced-motion respected at the bottom. No
       autoplay surprises for users who've turned it off.

   ===================================================================== */

/* ─── Sticky bottom CTA bar (mobile only) ───────────────────────────
   Two big buttons: Call (left) + WhatsApp (right). Always visible
   while scrolling, hides when you reach the footer so it doesn't
   sit on top of the contact info. Injected by shared.js so I don't
   have to copy the markup into every HTML file. */
.mobile-cta-bar{
  display:none;  /* shown only at narrow widths via the media query below */
  position:fixed;left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0));
  z-index:120;
  padding:8px;
  border-radius:18px;
  background:rgba(10,5,24,0.85);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(154,130,232,0.22);
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,158,11,0.05);
  gap:8px;
  transform:translateY(0);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
  pointer-events:auto;
}
.mobile-cta-bar.hidden{
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
}
.mobile-cta-bar a{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;  /* big tap target, comfortable for any thumb */
  padding:0 18px;border-radius:12px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:0.95rem;
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  letter-spacing:-0.005em;
}
.mobile-cta-bar a:active{transform:scale(0.97)}
.mobile-cta-bar a svg{width:20px;height:20px;flex-shrink:0}
.mobile-cta-bar .mcta-call{
  background:rgba(154,130,232,0.1);
  color:var(--off-white);
  border:1px solid var(--border-strong);
}
.mobile-cta-bar .mcta-wa{
  background:var(--amber);
  color:var(--bg-deep);
  box-shadow:0 8px 24px rgba(245,158,11,0.3);
}
.mobile-cta-bar .mcta-label{
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:-0.005em;
}

/* ─── Mobile breakpoint: everything narrower than 880px ─────────── */
@media (max-width: 880px){

  /* Show the sticky bottom CTA bar on touch widths.
     Add room at the bottom of the body so content can scroll past it. */
  .mobile-cta-bar{display:flex}
  body.has-mobile-cta{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0))}

  /* Body text larger and more readable. The clamp() values across
     the site already scale down on mobile, but several of them dip
     below 16px which is too small. Anchor body to 17px. */
  body{font-size:17px;line-height:1.65}
  p{font-size:1rem;line-height:1.7}

  /* Lead paragraphs (used in page headers and intros) get a slight
     bump so they actually feel like a "lead" rather than fine print. */
  .lead{font-size:1.05rem;line-height:1.65}

  /* Main containers get a touch less side padding so things feel
     less cramped against the edge but still have safe gutters. */
  .wrap, .wrap-narrow{padding-left:22px;padding-right:22px}

  /* Section padding compresses on mobile.
     Desktop "100-140px" feels like miles on a phone. */
  .section{padding:64px 0}
  .section-tight{padding:48px 0}

  /* Page headers shrink their vertical padding too. */
  .page-header{padding:60px 0 40px}

  /* Section heads tighten up so the eyebrow + h2 + lede hold
     together better on a small screen. */
  .section-head{margin-bottom:38px}
  .section-head h2{margin-bottom:14px}

  /* Buttons get a guaranteed 48px tap height on mobile. The desktop
     button has 14px vertical padding + ~20px line height = 48px,
     but margin/transform combos can shrink that on some pages.
     Also: allow text to wrap. The desktop default is white-space:
     nowrap which forces single-line text and overflows the button on
     narrow widths (the "Start with a free demo" bug). On mobile we
     let the text wrap to two lines if needed, the button just gets
     a touch taller, no overflow. */
  .btn{
    min-height:50px;
    padding:14px 22px;
    font-size:0.96rem;
    white-space:normal;
    line-height:1.25;
  }

  /* Multi-button rows (.btn-row, .final-cta-row, hero CTAs etc.)
     stack vertically on mobile so each button gets the full width.
     Two side-by-side primary CTAs at 375px is a recipe for cramped
     buttons and overflowing text. Better to give each its own row.
     Cap width so they don't look ridiculous on tablets. */
  .btn-row,
  .final-cta-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }
  .btn-row .btn,
  .final-cta-row .btn{
    width:100%;
    justify-content:center;
  }

  /* Page header h1 ramps down a touch so it doesn't take a whole
     viewport of vertical space on small screens. */
  .page-header h1{font-size:clamp(2.2rem, 9vw, 3.4rem)}
  .page-header .lead{font-size:1.04rem}

  /* Section heading h2 follows the same treatment. */
  .section-head h2{font-size:clamp(1.7rem, 6vw, 2.4rem)}

  /* Spotlight cards: tighter padding so they don't dwarf the screen. */
  .spot-card{padding:28px 24px;border-radius:16px}

  /* Kinetic marquee items get smaller and a touch tighter so they
     don't dominate the viewport, and the band itself slims down. */
  .kinetic-marquee{padding:22px 0}
  .km-track{gap:50px}
  .km-item{font-size:1.15rem}

  /* Footer compresses, 4 cols becomes 1 col already, but tighten
     the top padding so it doesn't feel endless. */
  .site-footer{margin-top:64px;padding:56px 0 32px}
  .footer-grid{margin-bottom:40px}
  .site-footer h4{margin-bottom:12px}

  /* Pull quote tightens: less left padding, smaller font. */
  .pull-quote{padding:18px 0 18px 22px;font-size:clamp(1.2rem, 4vw, 1.6rem);margin:24px 0}

  /* Care card on mobile: stack with sensible gaps. */
  .care-card{padding:36px 26px;gap:24px}

  /* Final CTA section pulls in. */
  .final-cta{padding:80px 0 60px !important}
  .final-cta h2{font-size:clamp(2rem, 7vw, 3rem)}

  /* Form inputs get more room. */
  input, select, textarea{
    font-size:16px !important;  /* keeps iOS from zooming on focus */
    min-height:50px;
  }
  textarea{min-height:120px}
}

/* ─── Extra tight on phones under 400px (iPhone SE etc) ──────────── */
@media (max-width: 400px){
  .wrap, .wrap-narrow{padding-left:18px;padding-right:18px}
  .km-item{font-size:1rem}
  .km-track{gap:40px}
  .section{padding:54px 0}
  .page-header{padding:48px 0 32px}

  /* Mobile CTA bar: shorter labels so they fit at iPhone SE width. */
  .mobile-cta-bar a{padding:0 14px;font-size:0.9rem;gap:7px}
}

/* ─── Reduced motion preference ─────────────────────────────────────
   Some people get genuinely nauseous from auto-animations.
   Respect that. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Pause the heavy ambient animations entirely. */
  .aurora::before,
  .aurora::after,
  .stars,
  .brand-glyph::before,
  .preloader-mark .pm-glyph::before{
    animation:none !important;
  }
}

/* =====================================================================
   ─── 21  MOBILE UI POLISH PASS ─────────────────────────────────────
   --------------------------------------------------------------------
   The base mobile pass (section 20) sorted typography, touch targets
   and the sticky CTA. This pass closes the "feels sloppy" gap:

   The actual research-backed rule for mobile alignment isn't "centre
   everything" or "left everything" — it's per content type. Studied
   the mobile patterns on Apple, Stripe, Linear, Notion, Vercel,
   Monzo, Octopus and Mailchimp. They all converge on this:

     CENTER on mobile:
       - Headlines, eyebrows, section heads
       - Stats / prices / single-line trust labels
       - Card titles + key numbers
       - CTAs and button rows

     LEFT-ALIGN on mobile:
       - Body paragraphs (2+ lines)
       - Bullet lists / feature lists
       - Form labels and inputs
       - FAQ answers

   The earlier mobile pass left some section heads left-aligned
   (whichever ones didn't have the .center class), and the card
   internals (svc-card, tier, etc.) were inheriting left-align from
   document defaults. This pass forces the right alignment per
   content type without touching long-form paragraphs.
   ===================================================================== */

@media (max-width:880px){

  /* ─── Section heads always centre on mobile ───
     Regardless of whether they have the .center class on desktop.
     This was the biggest source of the "sloppy" feeling — on
     /work and /reviews the section heads weren't centred and they
     felt different to /services or /process which were. */
  .section-head{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .section-head .mono,
  .section-head h2,
  .section-head p{
    text-align:center;
  }
  /* But: if a section head sits ABOVE long-form content, the
     paragraph inside it can wrap to 2-3 lines. Centred 3-line
     text on a 17px font is borderline OK. We give it a max-width
     so each line is comfortable to read. */
  .section-head p{
    max-width:38ch;
    margin-left:auto;
    margin-right:auto;
  }

  /* ─── Service preview cards on home ───
     Title, eyebrow and price centre. Feature bullets stay left
     because lists read fastest at left-align. */
  .svc-card{text-align:center}
  .svc-card .svc-num,
  .svc-card h3,
  .svc-card .svc-for,
  .svc-card .svc-price,
  .svc-card .svc-cta{text-align:center}
  .svc-card .svc-list{text-align:left}
  .svc-card .svc-list li{padding-left:26px}
  /* The bullet markers on the list need to centre as a group too
     so the list sits in the middle of the card. */
  .svc-card .svc-list{display:inline-block;max-width:max-content;margin-left:auto;margin-right:auto}

  /* ─── Tier cards on services ───
     Same rule: card chrome centres, the feature list itself stays
     left-aligned so checkmarks read naturally. The featured "Founding
     Five" badge sits inline at the top on mobile (set in the
     services.html mobile pass already). */
  .tier{text-align:center}
  .tier .tier-num,
  .tier h3,
  .tier .tier-for,
  .tier .tier-anchor,
  .tier .tier-price,
  .tier .tier-price-founding{text-align:center}
  .tier ul{text-align:left;display:inline-block;max-width:max-content;margin-left:auto;margin-right:auto}
  .tier .tier-fineprint{text-align:center}

  /* ─── Inclusion cards on services ───
     Small icon + title + description per card. All centre on mobile. */
  .inclusion{text-align:center}
  .inclusion-icon{margin-left:auto;margin-right:auto}
  .inclusion h4,
  .inclusion p{text-align:center}

  /* ─── Coming-soon cards on work ───
     Same treatment so the project tiles read consistently. */
  .coming-card{text-align:center}
  .coming-card .coming-meta{justify-content:center}
  .coming-card .coming-tag{text-align:center;display:block}

  /* ─── Review cards on home ───
     The quote itself stays left-aligned (it's body text, multi-line),
     but the star row and the author block centre to anchor the card. */
  .review-card{padding-left:32px;padding-right:32px}
  .review-stars{text-align:center;display:block}
  .review-head{justify-content:center}
  .review-who{justify-content:center;text-align:center}
  .review-who-text{text-align:center}
  .review-google-link{margin-left:0;margin-top:14px}

  /* ─── Framework grid on about ───
     The big number + title + description per row. Centre everything
     so each item reads as a self-contained card on mobile. */
  .framework-item{flex-direction:column;text-align:center;gap:14px;align-items:center}
  .framework-num{width:auto;padding:0}
  .framework-text strong,
  .framework-text .ftag,
  .framework-text .fexample{text-align:center;display:block}

  /* ─── Founder feature on about ───
     Photo full-width, body content centres on mobile so the
     attribution line reads cleanly under the portrait. */
  .founder-body{text-align:center}
  .founder-body h2{text-align:center}
  .founder-body p{text-align:left}  /* paragraphs stay left for reading */
  .founder-sig{margin-left:auto;margin-right:auto}

  /* ─── Stack-stack cards on process ───
     Each phase card on mobile becomes a centred unit. */
  .stack-card{text-align:center}
  .stack-card .stack-card-step,
  .stack-card h3{text-align:center}
  .stack-card p{text-align:left}  /* descriptions stay left */
  .stack-card .stack-detail{justify-content:center;text-align:center}

  /* ─── Stats grid: stat labels centre under stat numbers ───
     Already mostly centred but enforce here for any drift. */
  .stat-cell,
  .studio-stat,
  .cine-hero-stat{text-align:center}

  /* ─── FAQ on services ───
     The summary line is the question (one line, centre would feel
     odd because the +/× icon is on the right). Keep summary left.
     Body answer stays left (long-form paragraphs). */
  .faq summary,
  .faq-body{text-align:left}

  /* ─── Form labels and inputs ─── always left, even on mobile */
  .form-card label,
  .form-card input,
  .form-card select,
  .form-card textarea,
  .form-legend{text-align:left}
}

/* ─── Footer mobile polish ───
   The footer was inheriting left-align on mobile which made the
   columns feel like four separate left-justified blocks. Now the
   whole footer centres as a single, intentional block on mobile.
   The brand mark gets its own row centred. Column headings centre.
   Link lists centre as a stack. Copyright line stacks vertically. */
@media (max-width:880px){
  .site-footer{
    margin-top:80px;
    padding:64px 0 32px;
    text-align:center;
  }
  .footer-grid{gap:42px;margin-bottom:42px}
  .footer-brand{margin:0 auto;max-width:340px;text-align:center}
  .footer-brand .brand{
    justify-content:center;display:inline-flex;
    margin:0 auto 4px;
  }
  .footer-brand p{
    margin:14px auto 0;
    max-width:300px;
    font-size:0.95rem;
    line-height:1.6;
  }
  .site-footer h4{
    text-align:center;
    margin-bottom:14px;
  }
  .site-footer a{
    text-align:center;
    padding:7px 0;  /* more breathing room for thumb taps */
  }
  .footer-bot{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:8px;
    padding-top:28px;
    align-items:center;
  }
  /* Only the DIRECT children of .footer-bot stack as blocks.
     The inner #yearStamp <span> sits inline inside its parent
     copyright line, otherwise "©" / "2026" / "Elev8depictions…"
     end up on three separate lines. */
  .footer-bot > span{display:block}
  .footer-bot > span > span{display:inline}
}

/* ─── Card tactile feedback (all touchable cards) ───
   :active gives a brief "press down" effect when tapped. Hover
   doesn't exist on touch screens so this is what confirms the
   visitor that the card registered their tap. Subtle enough not
   to feel cartoonish, firm enough to feel intentional. */
.svc-card:active,
.tier:active,
.spot-card:active,
.review-card:active,
a.review-card:active,
.coming-card:active,
.framework-item:active,
.info-card:active,
.next-card:active,
.howto-step:active,
.alt-card:active,
.demo-link:active,
.project-card:active{
  transform:scale(0.985);
  transition:transform .12s var(--ease);
}

/* ─── Subtle section dividers on mobile ───
   Between major sections, a thin amber-gradient line so the page
   reads as a sequence of chapters rather than one long blur of
   scroll. Only shows on mobile because desktop has enough whitespace
   to do the same job visually. */
@media (max-width:880px){
  /* The .section + .section / section + section patterns get a
     thin divider above them. Skipped on first sections (no
     previous-sibling) and on full-bleed sections like the marquee. */
  .section + .section::before,
  .services-preview::before,
  .work-preview::before,
  .reviews-band::before,
  .case-feature::before,
  .compare-band + .section::before,
  .coming-band::before,
  .vault-band::before,
  .care-band::before,
  .founding-band::before,
  .framework-band::before,
  .philosophy-band::before,
  .contact-band::before,
  .founding-inline::before,
  .testimonial-band::before,
  .alt-band::before,
  .howto-band::before,
  .existing-band::before{
    content:"";
    position:absolute;
    left:50%;top:0;
    width:64px;height:1px;
    background:linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
    transform:translateX(-50%);
  }
  /* Position context for the divider */
  .services-preview,.work-preview,.reviews-band,.case-feature,
  .coming-band,.vault-band,.care-band,.founding-band,.framework-band,
  .philosophy-band,.contact-band,.founding-inline,.testimonial-band,
  .alt-band,.howto-band,.existing-band{
    position:relative;
  }
}

/* ─── Form input focus halo ───
   The amber border already says "this is focused" but on mobile
   the halo is what really sells it. Slightly larger box-shadow so
   the active field is unmistakable, especially with thumbs
   covering half the screen. */
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  box-shadow:
    0 0 0 3px rgba(245,158,11,0.22),
    0 0 24px rgba(245,158,11,0.12);
}

/* ─── Back-to-top floating button ───
   Appears on mobile once you've scrolled past 80% of any long page.
   Same visual language as the sticky CTA bar (rounded, blurred,
   amber accent) but smaller and discreet. Sits above the sticky CTA
   bar in the bottom-right so it doesn't crowd the main actions.
   Injected by shared.js. */
.back-to-top{
  display:none;  /* shown via .visible class from JS */
  position:fixed;
  right:14px;
  bottom:calc(86px + env(safe-area-inset-bottom, 0));
  z-index:115;
  width:44px;height:44px;border-radius:50%;
  background:rgba(10,5,24,0.92);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(245,158,11,0.4);
  cursor:pointer;
  color:var(--amber);
  align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  transform:translateY(20px);opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease), background .25s var(--ease);
}
.back-to-top.visible{
  display:flex;
  transform:translateY(0);opacity:1;
}
.back-to-top:hover{background:rgba(245,158,11,0.15)}
.back-to-top:active{transform:translateY(2px) scale(0.95)}
.back-to-top svg{width:18px;height:18px}
@media(min-width:881px){.back-to-top{display:none !important}}

/* ─── Primary button polish ───
   Subtle inner-highlight gradient so the amber feels lit from above
   rather than flat. Stronger active state for tactile feedback when
   tapped on a touch screen (matters more on mobile where there's no
   hover state to confirm the press). Applies on all screen sizes. */
.btn-primary{
  background:linear-gradient(180deg, #FBBF24 0%, var(--amber) 100%);
  box-shadow:
    0 8px 28px rgba(245,158,11,0.28),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover{
  background:linear-gradient(180deg, #FFCB47 0%, var(--amber-hot) 100%);
  transform:translateY(-2px);
  box-shadow:
    0 14px 40px rgba(245,158,11,0.42),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:active{
  transform:translateY(0) scale(0.98);
  box-shadow:
    0 4px 14px rgba(245,158,11,0.32),
    inset 0 2px 6px rgba(0,0,0,0.15);
}

/* ════════════════════════════════════════════════════════════════
   IMAGE-FRAMED SECTIONS · 2026-05 redesign
   These live in shared.css so every page can use them. Used by:
     - index.html (showcase + final CTA bleed sections)
     - services.html (final CTA bleed)
     - work.html (Buckatree feature)
     - contact.html (will use bleed at top)
     - about.html (will use bleed for founder portrait)
   Brand colours and font-family inherit from the existing vars.
   ════════════════════════════════════════════════════════════════ */

/* Full-bleed image section template (used by hero showcase + final CTA) */
.bleed-section{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;justify-content:center;
  padding:120px 32px;
  overflow:hidden;
  text-align:center;
}
.bleed-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  z-index:0;
  animation:bleedZoom 28s ease-in-out infinite alternate;
}
@keyframes bleedZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.bleed-bg{animation:none}}
.bleed-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(10,5,24,0.55), rgba(10,5,24,0.78) 70%),
    linear-gradient(180deg, rgba(10,5,24,0.5) 0%, rgba(10,5,24,0.4) 50%, rgba(10,5,24,0.85) 100%);
  z-index:1;
}
.bleed-inner{position:relative;z-index:2;max-width:880px;width:100%}
.bleed-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--amber);font-weight:600;
  margin-bottom:32px;
  padding:8px 16px;border-radius:100px;
  background:rgba(10,5,24,0.6);backdrop-filter:blur(10px);
  border:1px solid rgba(245,158,11,0.3);
}
.bleed-eyebrow .live-dot{background:var(--amber);box-shadow:0 0 12px var(--amber)}
.bleed-h2{
  font-size:clamp(2.8rem,7vw,5.6rem);line-height:1.04;letter-spacing:-0.03em;
  margin-bottom:24px;color:var(--off-white);
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.bleed-sub{
  font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.55;
  color:rgba(244,237,224,0.88);
  max-width:620px;margin:0 auto 44px;
  text-shadow:0 2px 12px rgba(0,0,0,0.4);
}
.bleed-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 36px;border-radius:14px;
  background:var(--amber);color:var(--bg-deep);
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:-0.01em;
  text-decoration:none;
  box-shadow:0 14px 40px rgba(245,158,11,0.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bleed-cta:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(245,158,11,0.6)}
.bleed-meta{
  margin-top:32px;
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;
  letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(244,237,224,0.55);
}

/* Mobile pass */
@media (max-width:880px){
  .bleed-section{padding:80px 22px;min-height:auto}
  .bleed-inner{max-width:none}
  .bleed-eyebrow{font-size:0.62rem;padding:6px 12px;margin-bottom:20px}
  .bleed-h2{font-size:clamp(2rem,9vw,3rem);margin-bottom:18px}
  .bleed-sub{font-size:1rem;margin-bottom:32px}
  .bleed-cta{padding:14px 26px;font-size:0.98rem;width:100%;justify-content:center;max-width:340px}
  .bleed-meta{font-size:0.6rem;margin-top:22px}
}

/* ─── Buckatree-style big hero link block ───
   A clickable image card that links out to a live demo. Used on
   work.html and demo.html. The overlay sits on top of the photo
   with a CTA pill at the bottom. Hover lifts the image slightly
   and scales the photo behind it. */
.bk-hero-link{
  display:block;position:relative;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--border-strong);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  text-decoration:none;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bk-hero-link:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 100px rgba(0,0,0,0.6);
}
.bk-hero-link img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;
  transition:transform .8s var(--ease);
}
.bk-hero-link:hover img{transform:scale(1.03)}
.bk-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,5,24,0.85));
  display:flex;align-items:flex-end;justify-content:center;
  padding:36px;pointer-events:none;
}
.bk-hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:12px;
  background:var(--amber);color:var(--bg-deep);
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:-0.005em;
  box-shadow:0 12px 40px rgba(245,158,11,0.5);
}
@media (max-width:780px){
  .bk-hero-overlay{padding:22px}
  .bk-hero-cta{font-size:0.9rem;padding:12px 22px}
}

/* ─── End of stylesheet ─── If you've made it this far, hello. */