/* ============================================================
   LonarX Design System
   Architecture ported from shadcn/ui: semantic HSL-triplet
   custom properties, a single --radius scale, and a --ring
   focus token. Written as plain CSS so it works without React.
   Theme: warm light ("Sandstone"), amber primary, teal support.
   ============================================================ */

:root{
  /* --- shadcn semantic tokens (HSL triplets, no hsl() wrapper) --- */
  --background:            40 24% 97%;
  --foreground:           222 20% 11%;

  --card:                    0 0% 100%;
  --c-card:                  0 0% 100%;
  --card-foreground:       222 20% 11%;

  --popover:                 0 0% 100%;
  --popover-foreground:    222 20% 11%;

  /* Brand axis: orange → black → white. No third hue. */
  --primary:                22 100% 50%;   /* vivid orange   #FF6A00 */
  --primary-deep:           16 100% 42%;   /* burnt orange   #D63B00 */
  --primary-lift:           34 100% 58%;   /* amber highlight */
  --primary-foreground:      0 0% 100%;

  --secondary:               0 0% 8%;      /* near-black */
  --secondary-foreground:    0 0% 100%;

  /* Reusable gradients */
  --grad-brand: linear-gradient(120deg, hsl(var(--primary-deep)) 0%, hsl(var(--primary)) 46%, hsl(var(--primary-lift)) 100%);
  --grad-ink:   linear-gradient(140deg, hsl(0 0% 6%) 0%, hsl(0 0% 13%) 52%, hsl(18 62% 18%) 100%);
  --grad-edge:  linear-gradient(90deg, hsl(var(--primary-deep)) 0%, hsl(var(--primary)) 50%, hsl(var(--primary-lift)) 100%);

  --muted:                  40 18% 94%;
  --c-muted:                 40 18% 94%;
  /* Darkened from 44% — the orange wash pushed body copy and nav links
     below WCAG AA (2.2:1 and 1.3:1) at the previous value. */
  --muted-foreground:      220 14% 30%;

  --accent:                 40 22% 92%;
  --c-accent:                40 22% 92%;
  --accent-foreground:     222 20% 11%;

  --destructive:             0 74% 58%;
  --destructive-foreground:  0 0% 100%;

  --success:               152 60% 40%;
  --info:                  217 91% 60%;

  --border:                 38 22% 88%;
  --c-border:                38 22% 88%;
  --input:                  38 22% 88%;
  --ring:                   27 96% 43%;

  --radius: 0.875rem;

  /* --- derived radii --- */
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 3px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 8px);
  --radius-2xl: calc(var(--radius) + 18px);
  --radius-pill: 999px;

  /* --- layered elevation (soft, warm-tinted for depth) --- */
  --shadow-xs: 0 1px 2px hsl(30 24% 18% / .05);
  --shadow-sm: 0 1px 2px hsl(30 24% 18% / .05), 0 2px 6px hsl(30 24% 18% / .04);
  --shadow-md: 0 2px 4px hsl(30 24% 18% / .04), 0 8px 18px hsl(30 24% 18% / .07);
  --shadow-lg: 0 4px 8px hsl(30 24% 18% / .04), 0 18px 36px hsl(30 24% 18% / .09),
               0 36px 68px hsl(30 24% 18% / .06);
  --shadow-xl: 0 8px 16px hsl(30 24% 18% / .05), 0 28px 56px hsl(30 24% 18% / .11),
               0 56px 100px hsl(30 24% 18% / .08);
  --shadow-primary: 0 10px 24px hsl(var(--primary) / .22), 0 2px 6px hsl(var(--primary) / .18);

  /* --- typography --- */
  --font-display: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* --- layout --- */
  --container: 1400px;
  --gutter: 5vw;

  /* --- motion --- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.65;
  font-size:16px;
  /* clip, not hidden — hidden would make body a scroll container */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ============================================================
   Page background
   Previously a fixed, viewport-sized pseudo-element stacking seven
   gradients with an infinite background-position animation. Because
   background-position cannot be composited on the GPU, it repainted
   the full viewport every frame, forever — the single biggest cause
   of scroll jank on every page. Now a flat surface colour, painted
   once by `body` above.
   ============================================================ */

/* Pages that still carry an .aurora div: it has nothing left to draw. */
.aurora{display:none!important}

img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}

:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ============================================================
   Typography scale
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.08;
  color:hsl(var(--foreground));
}
h1{font-size:clamp(2.75rem,6vw,4.5rem);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(2rem,4.2vw,3.25rem);letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.02em;line-height:1.25}
h4{font-size:1.05rem;letter-spacing:-.015em}

.display-xl{font-size:clamp(3.25rem,8vw,6rem);font-weight:700;letter-spacing:-.04em;line-height:.98}
.text-gradient{
  background:linear-gradient(112deg,hsl(var(--primary-deep)) 0%,hsl(var(--primary)) 42%,hsl(var(--primary-lift)) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.text-ink-gradient{
  background:linear-gradient(120deg,hsl(0 0% 8%) 0%,hsl(0 0% 26%) 60%,hsl(var(--primary)) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);color:hsl(var(--muted-foreground));line-height:1.7}
.muted{color:hsl(var(--muted-foreground))}

/* Eyebrow / kicker label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:hsl(var(--primary));
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(3rem,6vw,5.25rem)}
.section-header{max-width:760px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-header.center{margin-inline:auto;text-align:center}
.section-header h2{margin-block:.85rem .9rem}

.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* ============================================================
   Button — shadcn anatomy
   ============================================================ */
.btn{
  --btn-h:2.85rem;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  height:var(--btn-h);padding-inline:1.4rem;
  border-radius:var(--radius-md);
  font-family:var(--font-sans);
  font-size:.9rem;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .18s var(--ease-out),color .18s var(--ease-out),
             border-color .18s var(--ease-out),box-shadow .25s var(--ease-out),
             transform .25s var(--ease-out);
  transform:translateZ(0);
}
.btn-lg{--btn-h:3.35rem;padding-inline:1.9rem;font-size:.97rem}
.btn:active{transform:translateY(1px) scale(.99)}

.btn-primary{
  background:var(--grad-brand);color:hsl(var(--primary-foreground));
  box-shadow:0 8px 22px hsl(var(--primary) / .38), 0 2px 6px hsl(var(--primary-deep) / .3);
}
.btn-primary:hover{
  background:linear-gradient(120deg,hsl(12 100% 40%) 0%,hsl(20 100% 48%) 46%,hsl(32 100% 56%) 100%);
  transform:translateY(-2px);
  box-shadow:0 18px 36px hsl(var(--primary) / .45),0 3px 10px hsl(var(--primary-deep) / .35);
}

.btn-outline{
  background:hsl(var(--c-card));color:hsl(var(--foreground));
  border-color:hsl(var(--c-border));box-shadow:var(--shadow-xs);
}
.btn-outline:hover{border-color:hsl(var(--primary) / .45);color:hsl(var(--primary));
  transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn-ghost{background:transparent;color:hsl(var(--foreground))}
.btn-ghost:hover{background:hsl(var(--c-accent))}

.btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.btn-secondary:hover{background:hsl(22 100% 42%);transform:translateY(-2px)}

/* ============================================================
   Badge — shadcn anatomy
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .7rem;border-radius:var(--radius-pill);
  font-size:.73rem;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;line-height:1.4;
}
.badge-primary{background:hsl(var(--primary) / .1);color:hsl(27 96% 34%);border-color:hsl(var(--primary) / .22)}
.badge-success{background:hsl(var(--success) / .12);color:hsl(152 60% 26%);border-color:hsl(var(--success) / .25)}
.badge-info{background:hsl(var(--info) / .12);color:hsl(217 91% 42%);border-color:hsl(var(--info) / .25)}
.badge-muted{background:hsl(var(--c-muted));color:hsl(var(--muted-foreground));border-color:hsl(var(--c-border))}
.badge-outline{background:transparent;color:hsl(var(--muted-foreground));border-color:hsl(var(--c-border))}

/* ============================================================
   Card — shadcn anatomy + 3D tilt affordance
   ============================================================ */
.card{
  position:relative;
  background:hsl(var(--c-card));
  border:1px solid hsl(var(--c-border));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
}
.card-header{padding:1.6rem 1.6rem .85rem}
.card-content{padding:0 1.6rem 1.6rem}
.card-footer{padding:0 1.6rem 1.6rem;display:flex;align-items:center;gap:.75rem}
.card-title{font-size:1.15rem;margin-bottom:.5rem}
.card-description{color:hsl(var(--muted-foreground));font-size:.92rem;line-height:1.65}

/* --- Card hover lift ---
   Replaces the old 3D tilt engine: every .tilt element carried
   perspective + preserve-3d + will-change:transform, which promoted
   each card to its own compositor layer, and a pointer-tracked
   mix-blend-mode glare on top. A plain translate costs nothing. */
.tilt{
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
}
.tilt:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:hsl(var(--primary) / .3);
}
/* Kept as no-ops so existing markup does not need rewriting. */
.tilt-layer,.tilt-layer-deep{transform:none}

/* ============================================================
   Surfaces
   ============================================================ */
/* Was backdrop-filter:blur(16px) saturate(180%). Backdrop blur forces
   the browser to re-sample everything painted behind the element on
   every frame it moves — very costly while scrolling. Opaque now. */
.glass{
  background:hsl(0 0% 100%);
  border:1px solid hsl(var(--c-border));
  box-shadow:var(--shadow-lg);
}
.surface-muted{background:hsl(var(--c-muted))}
/* ============================================================
   Gradient system
   Warm amber ←→ cool teal is the brand axis. Everything below
   pulls from those two so the page reads as one palette rather
   than flat cream with an orange button on it.
   ============================================================ */

/* Alternating section washes.
   Each of these used to stack two large radial gradients over a
   linear one. Flat tints give the same section-to-section rhythm
   for a fraction of the paint cost. */
.surface-tint{background:hsl(38 34% 96%)}
.surface-warm{background:hsl(30 44% 96%)}
.surface-cool{background:hsl(40 26% 97%)}

/* Section hairline removed. It was position:absolute but .section is never
   position:relative, so the pseudo-element escaped to the initial containing
   block and painted a stray full-width rule straight through the cards.
   The .surface-* background tints already separate the sections. */

/* Card edge. Was a gradient painted through a mask-composite cutout —
   an expensive way to draw what a border already does. */
.card{position:relative}

/* Coloured cap across the top of every card */
.card > :first-child::before{content:none}
.card{
  background-image:linear-gradient(90deg,
    hsl(24 100% 58%) 0%, hsl(38 100% 62%) 45%, hsl(22 100% 46%) 100%);
  background-size:100% 4px;
  background-repeat:no-repeat;
  background-position:0 0;
}
.card:hover{border-color:hsl(var(--primary) / .35);box-shadow:var(--shadow-md)}

/* Gradient eyebrow rule */
.eyebrow::after{
  content:'';display:inline-block;width:2.2rem;height:2px;border-radius:2px;
  margin-left:.6rem;vertical-align:middle;
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--secondary) / .5),transparent);
}

/* Icon tiles pick up the dual-tone gradient */
.icon-tile{
  background:linear-gradient(145deg,hsl(var(--primary) / .2),hsl(38 92% 62% / .1) 60%,hsl(var(--secondary) / .08));
  border-color:hsl(var(--primary) / .24);
}
.icon-tile.teal{
  background:linear-gradient(145deg,hsl(var(--secondary) / .22),hsl(22 100% 55% / .1) 60%,hsl(var(--primary) / .07));
  border-color:hsl(var(--secondary) / .26);
}

/* Badges get a soft gradient fill */
.badge-primary{
  background:linear-gradient(135deg,hsl(var(--primary) / .16),hsl(38 92% 62% / .09));
}
.badge-success{
  background:linear-gradient(135deg,hsl(var(--success) / .18),hsl(22 100% 45% / .08));
}

.separator{height:1px;background:hsl(var(--c-border));border:0}

/* Icon tile */
.icon-tile{
  display:grid;place-items:center;
  width:3rem;height:3rem;border-radius:var(--radius-md);
  background:linear-gradient(145deg,hsl(var(--primary) / .14),hsl(var(--primary) / .04));
  border:1px solid hsl(var(--primary) / .18);
  color:hsl(var(--primary));font-size:1.15rem;
}
.icon-tile.teal{
  background:linear-gradient(145deg,hsl(var(--secondary) / .14),hsl(var(--secondary) / .04));
  border-color:hsl(var(--secondary) / .2);color:hsl(var(--secondary));
}

/* Content is visible by default — no scroll-reveal states. */

/* ============================================================
   Motion patterns
   (technique ported from a MotionSites "Modern Agency" reference:
    text-roll CTA, rotating arrow chip, expanding pill, numbered
    section badge. All rebuilt in plain CSS — no React/Tailwind.)
   ============================================================ */
/* --- Text-roll button: label slides up, duplicate follows --- */
.btn-roll{padding-right:.4rem;gap:.85rem}
.roll{display:block;height:1.25em;overflow:hidden;position:relative}
.roll span{display:block;transition:transform .5s cubic-bezier(.25,.1,.25,1)}
.btn-roll:hover .roll span{transform:translateY(-100%)}

/* --- Arrow chip that straightens on hover --- */
.arrow-chip{
  display:grid;place-items:center;flex-shrink:0;
  width:1.85rem;height:1.85rem;border-radius:50%;
  background:hsl(var(--primary-foreground));color:hsl(var(--primary));
  font-size:.7rem;
  transform:rotate(-45deg);
  transition:transform .5s cubic-bezier(.25,.1,.25,1);
}
.btn-roll:hover .arrow-chip{transform:rotate(0deg)}
.btn-outline .arrow-chip{background:hsl(var(--primary));color:#fff}

/* --- Expanding pill revealed on card hover --- */
.expand-pill{
  position:absolute;left:1rem;bottom:1rem;z-index:4;
  display:flex;align-items:center;gap:.5rem;
  height:2.25rem;width:2.25rem;padding:0 .65rem;
  border-radius:var(--radius-pill);
  background:hsl(var(--c-card));color:hsl(var(--foreground));
  font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:width .35s ease-in-out;
}
.expand-pill i{flex-shrink:0;transform:rotate(-45deg);transition:transform .35s ease-in-out}
.expand-pill span{opacity:0;transition:opacity .25s ease-in-out}
.card:hover .expand-pill,.media-card:hover .expand-pill{width:9.5rem}
.card:hover .expand-pill span,.media-card:hover .expand-pill span{opacity:1;transition-delay:.1s}
.card:hover .expand-pill i,.media-card:hover .expand-pill i{transform:rotate(0)}

/* --- Numbered section badge row --- */
.badge-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.badge-num{
  display:grid;place-items:center;flex-shrink:0;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:hsl(var(--foreground));color:hsl(var(--background));
  font-size:.7rem;font-weight:700;
}
.badge-pill{
  padding:.3rem .9rem;border-radius:var(--radius-pill);
  border:1px solid hsl(var(--c-border));
  font-size:.78rem;font-weight:500;color:hsl(var(--muted-foreground));
}

/* ============================================================
   Cinematic scroll layer
   ============================================================ */


/* A 3D stage: children get real perspective depth */
.scene{perspective:1400px;perspective-origin:50% 45%}
.scene-near{perspective:900px}



/* Showcase feature rows */
.beat{
  padding:1rem 1.15rem;border-radius:var(--radius-md);
  border:1px solid transparent;
  transition:all .35s var(--ease-out);
}
.beat.is-live{
  background:hsl(var(--c-card));
  border-color:hsl(var(--c-border));box-shadow:var(--shadow-xs);
}
.beat:hover{border-color:hsl(var(--primary) / .3);box-shadow:var(--shadow-sm);transform:translateX(4px)}
.beat h4{margin-bottom:.2rem;font-size:.98rem}
.beat p{font-size:.86rem;color:hsl(var(--muted-foreground));line-height:1.55}



/* ============================================================
   Micro-interactions
   All hover/idle driven — nothing hides content or gates it
   behind scroll position.
   ============================================================ */

/* Nav links grow an underline from the centre */
.nav-links > li > a{position:relative}
.nav-links > li > a::after{
  content:'';position:absolute;left:.8rem;right:.8rem;bottom:.28rem;
  height:2px;border-radius:2px;background:hsl(var(--primary));
  transform:scaleX(0);transform-origin:50%;
  transition:transform .32s var(--ease-out);
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after{transform:scaleX(1)}

/* Light sweep across primary buttons on hover */
.btn-primary{overflow:hidden}
.btn-primary::before{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,hsl(0 0% 100% / .38),transparent);
  transform:skewX(-18deg);pointer-events:none;
  transition:left .65s var(--ease-out);
}
.btn-primary:hover::before{left:130%}

/* Icon tiles lift and rotate slightly with their card */
.icon-tile{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.card:hover .icon-tile{transform:translateY(-3px) rotate(-6deg) scale(1.06);box-shadow:var(--shadow-md)}

/* Process circles pulse a ring on hover */
.process-num{position:relative}
.process-num::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid hsl(var(--primary) / .35);
  opacity:0;transform:scale(.85);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.process-step:hover .process-num::after{opacity:1;transform:scale(1)}

/* Stat numbers nudge up on hover of their row */
.stat-row > div{transition:transform .35s var(--ease-out)}
.stat-row > div:hover{transform:translateY(-4px)}

/* Comparison rows tint as you read down them */
.compare-row:hover .compare-cell{background:hsl(var(--primary) / .04)}
.compare-cell{transition:background-color .3s var(--ease-out)}

/* FAQ chevron and row shift */
.faq-item{transition:border-color .25s,box-shadow .25s,transform .25s var(--ease-out)}
.faq-item:hover{transform:translateX(3px)}

/* Testimonial avatars bloom */

/* Footer social icons stagger a bounce on row hover */
.socials:hover .social{transform:translateY(-3px)}
.socials .social{transition:transform .3s var(--ease-out),color .25s,border-color .25s,box-shadow .25s}
.socials .social:nth-child(2){transition-delay:.04s}
.socials .social:nth-child(3){transition-delay:.08s}
.socials .social:nth-child(4){transition-delay:.12s}

/* Badge dot keeps a soft breath */
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
.badge-primary .pulse-dot{animation:breathe 2.6s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .btn-primary::before{display:none}
  .badge-primary .pulse-dot{animation:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  :root{--gutter:1.25rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .tilt{transform:none!important}
  .tilt::after{display:none}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .tilt{transform:none!important}
}

/* ============================================================
   Brand mark — actual LonarX logo
   ============================================================ */
.brand-mark, img.brand-mark{
  display:inline-block!important;
  width:2.15rem!important;
  height:2.15rem!important;
  flex-shrink:0!important;
  border-radius:50%!important;
  object-fit:cover!important;
  background:none;
  box-shadow:0 4px 12px hsl(var(--primary) / .35);
  vertical-align:middle!important;
}
.brand, a.brand, .logo, a.logo{
  display:inline-flex!important;
  align-items:center!important;
  gap:.6rem!important;
  font-family:var(--font-display, 'Satoshi', sans-serif)!important;
  font-size:1.4rem!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  text-decoration:none!important;
  color:hsl(var(--foreground))!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
}

/* ============================================================
   Nav legibility over the gradient
   Nav links measured 1.74:1 against the strongest band — well
   under WCAG AA. A permanent frosted bar fixes it without
   dulling the wash behind the page.
   ============================================================ */
/* Opaque, not frosted. A sticky bar with backdrop-filter re-blurs the
   content passing under it on every scroll frame — the second-worst
   offender after the animated background. */
.nav,nav#navbar{
  background:hsl(40 40% 99%);
  border-bottom:1px solid hsl(var(--c-border));
}
.nav.scrolled,nav#navbar.scrolled{
  box-shadow:var(--shadow-sm);
}
.nav-links > li > a,nav .links a{color:hsl(220 20% 17%)!important}
.nav-links > li > a:hover,nav .links a:hover{color:hsl(var(--primary-deep))!important}
.nav-links > li > a.active,nav .links a.active{color:hsl(var(--primary-deep))!important}


/* ---------- Unified Services mega dropdown (all pages) ---------- */
.dropdown{position:relative}
.dropdown-panel{
  position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(46rem,88vw);padding:1.25rem;z-index:1000;
  background:hsl(var(--popover));border:1px solid hsl(var(--c-border));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem 1.25rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility .25s;
}
.dropdown:hover .dropdown-panel,.dropdown:focus-within .dropdown-panel,.dropdown.open .dropdown-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.dd-group-label{
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:hsl(var(--primary));padding:.4rem .6rem .1rem;display:block;
}
.dd-item{display:block;padding:.6rem;border-radius:var(--radius-sm);
  transition:background-color .18s;border-bottom:none!important;text-decoration:none}
.dd-item:hover{background:hsl(var(--c-accent))}
.dd-item strong{display:block;font-size:.88rem;font-weight:600;margin-bottom:.1rem;
  color:hsl(var(--foreground))}
.dd-item span{display:block;font-size:.76rem;color:hsl(var(--muted-foreground));line-height:1.45}
.dd-col{display:flex;flex-direction:column}
@media(max-width:900px){
  /* The hover panel makes no sense on touch. Turn it into an accordion that
     opens in place when "Services" is tapped, instead of hiding the twelve
     service pages from every phone visitor. */
  /* the desktop centring transform is more specific than a bare
     .dropdown-panel selector, so reset it at matching specificity —
     otherwise the panel renders 50% of its width off to the left */
  .dropdown .dropdown-panel,
  .dropdown.open .dropdown-panel,
  .dropdown:hover .dropdown-panel,
  .dropdown:focus-within .dropdown-panel{
    transform:none;
  }
  .dropdown-panel{
    position:static;transform:none;width:auto;
    padding:.25rem 0 .5rem;margin:.35rem 0 0;
    grid-template-columns:1fr;gap:.15rem;
    background:transparent;border:0;box-shadow:none;border-radius:0;
    display:none;opacity:1;visibility:visible;pointer-events:auto;
    transition:none;
  }
  .dropdown.open .dropdown-panel{display:grid}
  /* hover must not open it on touch — only the .open class does */
  .dropdown:hover .dropdown-panel,
  .dropdown:focus-within .dropdown-panel{display:none}
  .dropdown.open:hover .dropdown-panel,
  .dropdown.open:focus-within .dropdown-panel{display:grid}

  .dropdown > a .fa-caret-down{transition:transform .25s var(--ease-out)}
  .dropdown.open > a .fa-caret-down{transform:rotate(180deg)}

  .dd-group-label{padding:.6rem .6rem .15rem}
  .dd-item{padding:.55rem .6rem}
  .dd-item span{display:none}          /* keep the accordion short enough to scroll */
}

/* ============================================================
   Video Showcase — responsive 16:9 embed or self-hosted <video>
   ============================================================ */
.video-showcase{padding:5rem var(--gutter,4%);border-top:1px solid hsl(var(--c-border))}
.video-showcase .section-header{max-width:700px;margin:0 auto 3rem;text-align:center}
.video-showcase .section-header h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:.75rem}
.video-showcase .section-header p{color:hsl(var(--muted-foreground));font-size:1.05rem;line-height:1.7}
.video-wrap{max-width:900px;margin:0 auto;position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid hsl(var(--c-border))}
.video-wrap::before{content:'';display:block;padding-top:56.25%}
.video-wrap iframe,.video-wrap video,.video-wrap img{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:cover;display:block;background:hsl(var(--c-muted))}

/* caption strip under a demo video */
.video-note{max-width:900px;margin:1rem auto 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:.5rem 1.25rem;color:hsl(var(--muted-foreground));font-size:.86rem}
.video-note span{display:inline-flex;align-items:center;gap:.4rem}
.video-note span::before{content:'';width:5px;height:5px;border-radius:50%;background:hsl(var(--primary))}

/* ============================================================
   Vertical reel gallery (9:16) + before/after device pair
   ============================================================ */
.reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:820px;margin:0 auto}
.reel{position:relative;border-radius:22px;overflow:hidden;background:#111;border:1px solid hsl(var(--c-border));
  box-shadow:var(--shadow-lg);transition:transform .35s var(--ease-out),box-shadow .35s}
.reel::before{content:'';display:block;padding-top:177.78%}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel:hover{transform:translateY(-6px)}
.reel-tag{position:absolute;left:.7rem;bottom:.7rem;z-index:2;background:rgba(15,17,21,.72);color:#fff;
  border-radius:999px;padding:.25rem .7rem;font-size:.72rem;font-weight:600;backdrop-filter:blur(6px)}

.ba-pair{display:flex;align-items:flex-start;justify-content:center;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap}
.ba-col{text-align:center;max-width:300px}
.ba-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted-foreground));
  margin-bottom:.75rem;font-weight:600}
.ba-frame{position:relative;border-radius:26px;overflow:hidden;border:1px solid hsl(var(--c-border));
  background:#fff;box-shadow:var(--shadow-lg)}
.ba-frame img,.ba-frame video{display:block;width:100%;height:auto}
.ba-arrow{color:hsl(var(--muted-foreground));font-size:1.5rem;flex:none;align-self:center;margin-top:1.5rem}
.ba-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px}
.ba-shots img{aspect-ratio:1;object-fit:cover;border-radius:2px}

@media(max-width:820px){
  .reel-grid{grid-template-columns:1fr;max-width:300px}
  .ba-arrow{transform:rotate(90deg);margin:0}
}

/* ============================================================
   FAQ Accordion — rendy.io-inspired clean expand/collapse
   ============================================================ */
.faq-section{padding:5rem var(--gutter,4%);border-top:1px solid hsl(var(--c-border))}
.faq-section .section-header{max-width:700px;margin:0 auto 3rem;text-align:center}
.faq-section .section-header h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:.75rem}
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid hsl(var(--c-border));transition:border-color .25s}
.faq-item:first-child{border-top:1px solid hsl(var(--c-border))}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 0;cursor:pointer;width:100%;text-align:left;
  font-family:var(--font-sans);font-size:1rem;font-weight:500;
  color:hsl(var(--foreground));background:none;border:none;
  transition:color .2s
}
.faq-question:hover{color:hsl(var(--primary))}
.faq-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1px solid hsl(var(--c-border));
  display:grid;place-items:center;font-size:.9rem;font-weight:300;
  color:hsl(var(--muted-foreground));
  transition:transform .3s var(--ease-out),border-color .3s,color .3s,background .3s
}
.faq-item.open .faq-icon{transform:rotate(45deg);border-color:hsl(var(--primary));color:hsl(var(--primary));background:hsl(var(--primary) / .08)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out),opacity .3s}
.faq-answer-inner{padding:0 0 1.5rem;color:hsl(var(--muted-foreground));font-size:.92rem;line-height:1.7}

/* ============================================================
   Rendy / Partner Showcase Section
   ============================================================ */
.rendy-section{padding:5rem var(--gutter,4%);border-top:1px solid hsl(var(--c-border));background:hsl(38 34% 96%)}
.rendy-header{max-width:700px;margin:0 auto 3rem;text-align:center}
.rendy-header h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:.75rem}
.rendy-header p{color:hsl(var(--muted-foreground));font-size:1.05rem;line-height:1.7}
.rendy-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:900px;margin:0 auto}
.rendy-step{text-align:center;padding:2rem 1.5rem;background:hsl(var(--c-card));border:1px solid hsl(var(--c-border));border-radius:var(--radius-xl);transition:all .3s var(--ease-out)}
.rendy-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:hsl(var(--primary) / .3)}
.rendy-step-num{
  width:48px;height:48px;border-radius:50%;
  background:hsl(var(--primary) / .1);border:2px solid hsl(var(--primary));
  display:grid;place-items:center;margin:0 auto 1rem;
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:hsl(var(--primary))
}
.rendy-step h3{font-size:1.05rem;margin-bottom:.5rem}
.rendy-step p{color:hsl(var(--muted-foreground));font-size:.88rem;line-height:1.6}
@media(max-width:760px){
  .rendy-steps{grid-template-columns:1fr}
}

/* ============================================================
   Enhanced Footer Social Icons
   ============================================================ */
.footer-socials{display:flex;gap:.75rem;flex-wrap:wrap}
.footer-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid hsl(var(--c-border));
  color:hsl(var(--muted-foreground));font-size:1rem;
  text-decoration:none;
  transition:all .25s var(--ease-out)
}
.footer-social:hover{color:hsl(var(--primary));border-color:hsl(var(--primary));background:hsl(var(--primary) / .08);transform:translateY(-3px)}

/* ============================================================
   Pre-launch: cookie consent, form states, 404 / thank-you
   Loaded on all pages, so the JS in enhance.js can inject the
   consent bar and the sticky mobile bar without editing pages.
   ============================================================ */

/* --- Cookie consent bar --- */
.cookie-bar{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:10000;
  max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.25rem;
  background:hsl(var(--c-card));
  border:1px solid hsl(var(--c-border));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  transform:translateY(140%);
  transition:transform .45s var(--ease-out);
}
.cookie-bar.is-in{transform:none}
.cookie-bar p{
  flex:1 1 300px;margin:0;
  font-size:.86rem;line-height:1.6;
  color:hsl(var(--muted-foreground));
}
.cookie-bar a{color:hsl(var(--primary));font-weight:600;text-decoration:none}
.cookie-bar a:hover{text-decoration:underline}
.cookie-actions{display:flex;gap:.6rem;flex:0 0 auto}
.cookie-btn{
  padding:.6rem 1.1rem;border-radius:var(--radius-md);
  font-family:inherit;font-size:.84rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  transition:all .2s var(--ease-out);white-space:nowrap;
}
.cookie-accept{background:hsl(var(--primary));color:#fff;box-shadow:var(--shadow-primary)}
.cookie-accept:hover{transform:translateY(-2px)}
.cookie-decline{background:transparent;color:hsl(var(--muted-foreground));border-color:hsl(var(--c-border))}
.cookie-decline:hover{color:hsl(var(--foreground));border-color:hsl(var(--primary) / .45)}
@media(max-width:768px){
  /* clear the sticky mobile action bar */
  .cookie-bar{bottom:76px;left:.6rem;right:.6rem;padding:.9rem 1rem}
  .cookie-actions{width:100%}
  .cookie-btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .cookie-bar{transition:none}
}

/* --- Form validation + submit states --- */
.field{position:relative}
.field-error{
  display:none;
  margin-top:.4rem;
  font-size:.79rem;font-weight:500;
  color:hsl(var(--destructive,0 72% 46%));
}
.field.has-error .field-error{display:block}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:hsl(var(--destructive,0 72% 46%))!important;
  background:hsl(var(--destructive,0 72% 46%) / .04);
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus{
  box-shadow:0 0 0 3px hsl(var(--destructive,0 72% 46%) / .12);
}
.form-status{
  display:none;align-items:flex-start;gap:.6rem;
  padding:.85rem 1rem;border-radius:var(--radius-md);
  font-size:.86rem;line-height:1.55;margin-bottom:.25rem;
}
.form-status.is-on{display:flex}
.form-status.is-error{
  background:hsl(var(--destructive,0 72% 46%) / .08);
  color:hsl(var(--destructive,0 72% 46%));
  border:1px solid hsl(var(--destructive,0 72% 46%) / .25);
}
.form-status.is-ok{
  background:hsl(142 62% 40% / .09);
  color:hsl(142 62% 28%);
  border:1px solid hsl(142 62% 40% / .28);
}

/* --- Button loading state (works on .btn and .cookie-btn) --- */
.is-loading{position:relative;pointer-events:none;opacity:.75}
.is-loading > *{visibility:hidden}
.is-loading::after{
  content:'';position:absolute;top:50%;left:50%;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;visibility:visible;
  animation:lx-spin .6s linear infinite;
}
@keyframes lx-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .is-loading::after{animation-duration:1.6s}
}

/* --- Skeleton placeholder (embed loading states) --- */
.skeleton{
  position:relative;overflow:hidden;
  background:hsl(var(--c-muted));border-radius:var(--radius-lg);
}
.skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,hsl(0 0% 100% / .55),transparent);
  transform:translateX(-100%);
  animation:lx-shimmer 1.4s infinite;
}
@keyframes lx-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .skeleton::after{animation:none}
}

/* --- 404 / thank-you link cards --- */
.nf-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.nf-card{
  display:flex;align-items:center;gap:.9rem;
  padding:1.1rem 1.25rem;
  background:hsl(var(--c-card));
  border:1px solid hsl(var(--c-border));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs);
  text-decoration:none;color:inherit;
  transition:all .25s var(--ease-out);
}
.nf-card:hover{
  transform:translateY(-3px);
  border-color:hsl(var(--primary) / .35);
  box-shadow:var(--shadow-lg);
}
.nf-ico{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--primary) / .1);color:hsl(var(--primary));
  font-size:1rem;
}
.nf-card strong{display:block;font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.nf-card em{
  display:block;font-style:normal;
  font-size:.82rem;color:hsl(var(--muted-foreground));line-height:1.45;
}
.nf-go{
  margin-left:auto;flex:none;
  color:hsl(var(--muted-foreground));font-size:.85rem;
  transition:transform .25s var(--ease-out),color .25s;
}
.nf-card:hover .nf-go{transform:translateX(4px);color:hsl(var(--primary))}
@media(max-width:700px){ .nf-grid{grid-template-columns:1fr} }

/* --- Thank-you "what happens next" steps --- */
.ty-steps{display:grid;gap:1rem}
.ty-step{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.25rem 1.4rem;
  background:hsl(var(--c-card));
  border:1px solid hsl(var(--c-border));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs);
}
.ty-num{
  flex:none;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--primary));color:#fff;
  font-size:.86rem;font-weight:700;
}
.ty-step strong{display:block;font-size:.98rem;margin-bottom:.3rem}
.ty-step p{margin:0;font-size:.88rem;line-height:1.6;color:hsl(var(--muted-foreground))}

/* --- Footer NAP (name / address / phone) --- */
.footer-nap{
  font-style:normal;
  margin-top:1.4rem;
  display:flex;flex-direction:column;gap:.12rem;
  font-size:.82rem;line-height:1.7;
  color:hsl(var(--muted-foreground));
}
.footer-nap strong{
  color:hsl(var(--foreground));
  font-size:.86rem;font-weight:600;
  margin-bottom:.2rem;
}
.footer-nap a{color:hsl(var(--muted-foreground));text-decoration:none}
.footer-nap a:hover{color:hsl(var(--primary))}
/* On the minimal footers the block sits on its own row above the copyright */
address.footer-nap.container{
  margin:0 auto 1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid hsl(var(--c-border));
}
@media(min-width:761px){
  address.footer-nap.container{
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:.15rem 1.1rem;
  }
  address.footer-nap.container strong{margin-bottom:0}
}

/* ============================================================
   Mobile tap targets
   The hamburger rendered at 24x17 — it is the only navigation
   at mobile widths, so give it (and the footer links) a proper
   44px touch area without changing how anything looks.
   ============================================================ */
@media(max-width:768px){
  .hamburger{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    margin:-10px -10px -10px 0;   /* keep the visual position identical */
    padding:10px;
  }
  footer a,
  .footer-nap a{
    display:inline-block;
    padding-block:.35rem;          /* 17px text -> ~28px target */
  }
  footer li{margin-bottom:.35rem}
  .social-ico,.footer-social{width:44px;height:44px}
  /* Sticky bar buttons already span the width; make sure they clear 44px */
  .wizard-btn{min-height:44px;display:flex;align-items:center;justify-content:center;gap:.4rem}
}
@media(max-width:768px){
  /* Phone / email are primary actions on a phone — give them real hit area.
     Inline links inside prose are left alone (WCAG 2.5.8 inline exception). */
  a[href^="tel:"]:not(.wizard-btn):not(.btn):not(.social-ico):not(.footer-social),
  a[href^="mailto:"]:not(.wizard-btn):not(.btn):not(.social-ico):not(.footer-social){
    display:inline-block;
    padding-block:.5rem;
  }
  p a[href^="tel:"], p a[href^="mailto:"]{padding-block:0}
}

/* ============================================================
   Mobile navigation panel
   Each legacy page opens the menu with inline styles from its own
   <script>. Those set a translucent background and no elevation, so
   the hero showed straight through it. Pin the presentation here.
   ============================================================ */
@media(max-width:900px){
  nav .links{
    background:#FDFCF8 !important;
    box-shadow:0 18px 40px rgba(22,24,31,.16) !important;
    border-bottom:1px solid var(--lx-line,#E8E3D8) !important;
    z-index:1200 !important;
    max-height:calc(100vh - 5rem);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:.75rem 1.25rem 1.25rem !important;
    gap:.15rem !important;
    align-items:stretch !important;
    text-align:left;
  }
  nav .links > li{width:100%}
  nav .links > li > a{
    display:block;width:100%;
    padding:.8rem .6rem !important;
    border-radius:10px;
    border-bottom:1px solid rgba(22,24,31,.07);
    font-size:1rem !important;
  }
  nav .links > li:last-child > a{border-bottom:none}
  /* the nav bar itself must be opaque once the menu is open */
  nav#navbar:has(.links[style*="flex"]){
    background:#FDFCF8 !important;
    border-bottom:1px solid var(--lx-line,#E8E3D8);
  }
}

/* While a mobile menu is open, the fixed bars must not sit on top of it. */
@media(max-width:900px){
  body.nav-open .cookie-bar{opacity:0;pointer-events:none;transform:translateY(140%)}
  body.nav-open .mobile-call-wizard{opacity:0;pointer-events:none}
  .mobile-call-wizard{transition:opacity .25s var(--ease-out)}
  .drawer{z-index:10050}
}

/* --- Services links on the minimal footer (markets, blogs, quiz) --- */
.footer-services{margin:0 auto 1.5rem;padding-bottom:1.5rem;border-bottom:1px solid hsl(var(--c-border))}
.footer-services h4{
  font-family:var(--font-sans);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));margin-bottom:.85rem;
}
.footer-services ul{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem 1.5rem;list-style:none;
}
.footer-services a{font-size:.84rem;color:hsl(var(--muted-foreground));text-decoration:none}
.footer-services a:hover{color:hsl(var(--primary))}
@media(max-width:900px){ .footer-services ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .footer-services ul{grid-template-columns:1fr} }

/* --- Full 4-column footer (site-wide canonical footer, matching index.html) ---
   Moved here from being index.html-only inline CSS on 2026-09-05: every other
   page reused this footer's HTML but had no matching styles, so it rendered
   unstyled everywhere except the homepage. */
.footer{
  border-top:1px solid hsl(var(--border));
  padding-block:4rem 2rem;
  background:hsl(var(--muted) / .5)
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:3rem
}
.footer h4{
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:hsl(var(--muted-foreground));
  margin-bottom:1rem;
  font-family:var(--font-sans);
  font-weight:700
}
.footer li{margin-bottom:.6rem}
.footer li a{
  font-size:.88rem;
  color:hsl(var(--muted-foreground));
  transition:color .2s
}
.footer li a:hover{color:hsl(var(--primary))}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:2rem;
  border-top:1px solid hsl(var(--border));
  font-size:.82rem;
  color:hsl(var(--muted-foreground))
}
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr}
  .footer{padding-bottom:6rem}
}

/* ============================================================
   Base nav shell: .nav / .nav-links / .hamburger / .drawer / .brand
   Restored here 2026-09-05 — this base structural CSS was supposed to
   live in assets/article.css, but that file has been an empty 0-byte
   placeholder since the original upload (same failed transfer that also
   left markets/san-diego-ca.html, a couple of avatar SVGs, and two video
   assets empty). Every page loading article.css instead of duplicating
   this CSS inline (all 105 market pages, locations.html, markets/index.html,
   and the root-level blog-*.html posts) has been rendering an unstyled,
   non-functional nav — desktop nav-links stacked vertically instead of a
   horizontal bar, and the mobile drawer statically inline instead of a
   fixed off-canvas panel — since before this project started. This is a
   pre-existing bug, not something introduced by later edits.
   Reference: the inline <style> block in blogs/how-many-leads-1000-month-meta-ads.html,
   one of the pages that happened to duplicate this CSS locally and so was
   never affected.
   ============================================================ */
.page{position:relative;z-index:1}
.nav{position:sticky;top:0;z-index:90;padding:1rem 0;transition:box-shadow .35s var(--ease-out);background:hsl(var(--background))}
.nav.scrolled{border-bottom:1px solid hsl(var(--border));box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.03em;color:hsl(var(--foreground));text-decoration:none}
.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none}
.hamburger{display:none;width:2.6rem;height:2.6rem;flex-shrink:0;border-radius:var(--radius-sm);border:1px solid hsl(var(--border));background:hsl(var(--card));place-items:center;cursor:pointer;color:hsl(var(--foreground))}
.drawer{position:fixed;inset:0;z-index:120;background:hsl(var(--background));padding:1.25rem;overflow-y:auto;transform:translateX(100%);transition:transform .4s var(--ease-out)}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;padding:.85rem .5rem;border-bottom:1px solid hsl(var(--border));font-weight:500;color:hsl(var(--foreground));text-decoration:none}
.drawer a:hover{color:hsl(var(--primary))}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
@media(max-width:900px){
  .nav-links,.nav .btn{display:none}
  .hamburger{display:grid}
}

/* ============================================================
   Partner Promotion Bar — fixed announcement strip at top
   z-index stacking: nav=90 < promo=95 < drawer=120 < cookie=10000
   ============================================================ */
.promo-bar{
  position:fixed;top:0;left:0;right:0;z-index:95;
  background:var(--grad-ink, linear-gradient(140deg, hsl(0 0% 6%) 0%, hsl(0 0% 13%) 52%, hsl(18 62% 18%) 100%));
  color:hsl(0 0% 94%);
  font-family:var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size:.82rem;font-weight:500;
  letter-spacing:.01em;
  border-bottom:1px solid hsl(0 0% 100% / .06);
  transform:translateY(-100%);opacity:0;
  transition:transform .45s var(--ease-out, cubic-bezier(.22,1,.36,1)),
             opacity .35s ease;
}
.promo-bar.is-in{
  transform:translateY(0);opacity:1;
}
.promo-bar-inner{
  display:flex;align-items:center;justify-content:center;
  gap:.6rem;
  max-width:var(--container,1400px);
  margin:0 auto;
  padding:.5rem 2.8rem .5rem 1rem;
  text-align:center;
  flex-wrap:wrap;
}
.promo-bar-label{
  color:hsl(var(--primary, 22 100% 50%));
  font-weight:700;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.08em;
  white-space:nowrap;
}
.promo-bar-links{
  display:flex;align-items:center;
  gap:.2rem;flex-wrap:wrap;
  justify-content:center;
}
.promo-bar-links a{
  color:hsl(0 0% 95%);
  text-decoration:none;
  padding:.18rem .5rem;
  border-radius:var(--radius-sm, 4px);
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.promo-bar-links a:hover,
.promo-bar-links a:focus-visible{
  background:hsl(var(--primary, 22 100% 50%) / .18);
  color:#fff;
  text-decoration:underline;
}
.promo-bar-sep{
  color:hsl(0 0% 100% / .25);
  font-size:.7rem;
  user-select:none;
}
.promo-bar-close{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  background:none;border:none;
  color:hsl(0 0% 100% / .4);
  font-size:1.15rem;line-height:1;
  cursor:pointer;padding:.25rem .4rem;
  border-radius:var(--radius-sm, 4px);
  transition:color .2s ease, background .2s ease;
}
.promo-bar-close:hover,
.promo-bar-close:focus-visible{
  color:#fff;background:hsl(0 0% 100% / .1);
}

/* When promo bar is visible, push the sticky nav down */
body.has-promo .nav,
body.has-promo nav#navbar{
  top:var(--promo-h, 36px);
}

@media(max-width:600px){
  .promo-bar-inner{
    flex-direction:column;gap:.2rem;
    padding:.45rem 2.2rem .45rem .8rem;
  }
  .promo-bar-label{font-size:.68rem}
  .promo-bar-links{gap:.05rem}
  .promo-bar-links a{font-size:.78rem;padding:.12rem .3rem}
  body.has-promo .nav,
  body.has-promo nav#navbar{
    top:var(--promo-h, 56px);
  }
}