/* ============================================================
   LonarX — legacy page bridge
   Loaded AFTER each page's own inline <style> so it wins the
   cascade. Maps the original template's class names and CSS
   variables onto the new design system in assets/theme.css.
   Lets the 41 pre-existing pages adopt the new look without
   rewriting each page's bespoke layout CSS.
   ============================================================ */

/* --- Remap the legacy variable names to the new palette --- */
:root{
  --bg:#F9F8F3;
  --surface:#ffffff;
  --card:#ffffff;
  --border:#E8E3D8;
  --accent:#D77206;
  --glow:#D77206;
  --text:#16181F;
  --muted:#67707F;
  --nav-scrolled-bg:hsl(40 24% 97% / .82);
  --nav-mobile-bg:hsl(40 24% 97% / .97);
  --subtle-shadow:var(--shadow-sm);
}

body{
  font-family:var(--font-sans)!important;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.65;
}

/* --- Typography: Playfair out, Satoshi in --- */
h1,h2,h3,h4,h5,h6,.logo{
  font-family:var(--font-display)!important;
  font-weight:500!important;
  letter-spacing:-.025em;
  line-height:1.1;
  color:hsl(var(--foreground));
}
h1{font-size:clamp(2.4rem,5vw,3.9rem)!important;letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)!important;letter-spacing:-.03em}
h3{letter-spacing:-.02em}

/* --- Wider container to match the new homepage --- */
.wrap{max-width:1400px!important}

/* --- Accent rule under section headers --- */
.accent-line{
  width:44px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,hsl(var(--primary)),#F0A324);
}
.section-header h2{margin-bottom:.85rem}
.section-header p{color:hsl(var(--muted-foreground))}

/* ============================================================
   Navigation
   ============================================================ */
nav#navbar{
  position:sticky;top:0;z-index:90;
  padding:1rem 4%;
  background:transparent;
  transition:all .35s var(--ease-out);
}
nav#navbar.scrolled{
  background:hsl(var(--background));
  border-bottom:1px solid hsl(var(--border));
  box-shadow:var(--shadow-sm);
}
nav#navbar .container{max-width:1400px}

/* Brand: flex aligned wordmark + icon */
.logo, .brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:.6rem!important;
  font-size:1.4rem!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  background:none!important;
  -webkit-text-fill-color:hsl(var(--foreground))!important;
  color:hsl(var(--foreground))!important;
  text-decoration:none!important;
}
.logo::before, .brand::before{
  display:none!important;
  content:none!important;
}

nav .links{gap:.35rem!important}
nav .links a{
  padding:.55rem .8rem;border-radius:var(--radius-sm);
  font-size:.9rem!important;font-weight:500;
  color:hsl(var(--muted-foreground))!important;
  transition:color .2s,background-color .2s;
}
nav .links a:hover{color:hsl(var(--foreground))!important;background:hsl(var(--accent))}
nav .links a.active{color:hsl(var(--primary))!important;font-weight:600}

.dropdown-content{
  background:hsl(var(--popover))!important;
  border:1px solid hsl(var(--border))!important;
  border-radius:var(--radius-xl)!important;
  box-shadow:var(--shadow-xl)!important;
  padding:.5rem!important;
  backdrop-filter:none!important;
}
.dropdown-content a{
  border-bottom:none!important;
  border-radius:var(--radius-sm);
  padding:.6rem .8rem!important;
  font-size:.88rem!important;
  color:hsl(var(--foreground))!important;
}
.dropdown-content a:hover{
  background:hsl(var(--accent))!important;
  color:hsl(var(--foreground))!important;
  padding-left:.8rem!important;
}

.nav-cta{
  background:hsl(var(--primary))!important;color:#fff!important;
  border-radius:var(--radius-md)!important;
  padding:.75rem 1.4rem!important;
  font-size:.9rem!important;font-weight:600;
  box-shadow:var(--shadow-primary);
  border:1px solid transparent;
  transition:all .2s var(--ease-out);
}
.nav-cta:hover{
  background:hsl(27 96% 38%)!important;transform:translateY(-2px);
  box-shadow:0 16px 32px hsl(var(--primary) / .3);
}

.hamburger span{background:hsl(var(--foreground))}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem!important;
  border-radius:var(--radius-md)!important;
  font-family:var(--font-sans);
  font-size:.92rem!important;font-weight:600;
  letter-spacing:-.005em;
  border:1px solid transparent;
  transition:all .2s var(--ease-out);
}
.btn-primary{
  background:hsl(var(--primary))!important;color:#fff!important;
  box-shadow:var(--shadow-primary);
}
.btn-primary:hover{
  background:hsl(27 96% 38%)!important;transform:translateY(-2px);
  box-shadow:0 16px 32px hsl(var(--primary) / .3);
}
.btn-secondary{
  background:hsl(var(--card))!important;color:hsl(var(--foreground))!important;
  border:1px solid hsl(var(--border))!important;box-shadow:var(--shadow-xs);
}
.btn-secondary:hover{
  border-color:hsl(var(--primary) / .45)!important;
  color:hsl(var(--primary))!important;
  transform:translateY(-2px);box-shadow:var(--shadow-md);
}

/* ============================================================
   Generic card-ish surfaces used across the legacy pages
   ============================================================ */
.plan,.faq-item,.svc-card,.case-card,.city-card,.tool-card,.post-card{
  border-radius:var(--radius-xl)!important;
  border:1px solid hsl(var(--border))!important;
  background:hsl(var(--card))!important;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.plan:hover,.svc-card:hover,.case-card:hover,.city-card:hover,.tool-card:hover,.post-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:hsl(var(--primary) / .3)!important;
  transform:translateY(-4px);
}

/* ============================================================
   Footer
   ============================================================ */
footer{
  border-top:1px solid hsl(var(--border));
  background:hsl(var(--muted) / .5);
}
footer h4{
  font-family:var(--font-sans)!important;
  font-size:.76rem!important;font-weight:700!important;
  letter-spacing:.12em;text-transform:uppercase;
  color:hsl(var(--muted-foreground))!important;
}
footer a{color:hsl(var(--muted-foreground));transition:color .2s}
footer a:hover{color:hsl(var(--primary))}

.social-ico{
  border:1px solid hsl(var(--border));
  background:hsl(var(--card));
  color:hsl(var(--muted-foreground));
  transition:all .25s var(--ease-out);
}
.social-ico:hover{
  color:hsl(var(--primary));border-color:hsl(var(--primary));
  transform:translateY(-3px);box-shadow:var(--shadow-sm);
}

/* ============================================================
   Mobile sticky action bar
   ============================================================ */
.mobile-call-wizard{
  background:hsl(var(--background) / .93)!important;
  border-top:1px solid hsl(var(--border))!important;
}
.wizard-btn{border-radius:var(--radius-md)!important;font-weight:600}
.wizard-call{background:hsl(var(--primary))!important;color:#fff!important;box-shadow:var(--shadow-primary)}
.wizard-audit{
  background:hsl(var(--card))!important;
  color:hsl(var(--foreground))!important;
  border:1px solid hsl(var(--border))!important;
}

/* --- Respect reduced motion --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ============================================================
   Entrance animation (paired with assets/reveal.js)
   ============================================================ */
[data-rv]{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
[data-rv].rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   Media cards (markets + pricing imagery)
   ============================================================ */
.media-top{
  position:relative;height:170px;overflow:hidden;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  background:hsl(var(--muted));
}
.media-top img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.media-top::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,hsl(222 30% 8% / .55) 100%);
}
a:hover .media-top img,.plan:hover .media-top img,.city-card:hover .media-top img{transform:scale(1.07)}

.media-label{
  position:absolute;left:1rem;bottom:.85rem;z-index:2;
  color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  text-shadow:0 2px 12px hsl(222 30% 8% / .5);
}
.media-chip{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  padding:.25rem .7rem;border-radius:var(--radius-pill);
  background:hsl(0 0% 100%);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:hsl(27 96% 34%);
}

/* Wide banner image */
.banner{
  position:relative;overflow:hidden;
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  aspect-ratio:21/7;
}
.banner img{width:100%;height:100%;object-fit:cover}
.banner-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:2rem;color:#fff;
  background:linear-gradient(100deg,hsl(222 30% 8% / .78),hsl(27 60% 22% / .55));
}
.banner-veil h2{color:#fff!important;margin-bottom:.5rem}
.banner-veil p{color:hsl(0 0% 100% / .85);max-width:44rem;font-size:.98rem}
@media(max-width:760px){
  .banner{aspect-ratio:16/10}
  .banner-veil{padding:1.25rem}
}

/* ============================================================
   Legacy page enhancements (paired with assets/enhance.js)
   ============================================================ */

/* --- Entrance reveal. Visible by default; JS arms the hide. --- */
.rv-armed{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.rv-armed.rv-on{opacity:1;transform:none}

/* --- Feature card hover lift ---
   Formerly a pointer-tracked 3D tilt with a mix-blend-mode glare.
   See the matching note in theme.css. */
.has-tilt{
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
}
.has-tilt:hover{transform:translateY(-4px)}

/* Feature cards get the new surface treatment */
.feature-card{
  border-radius:var(--radius-xl)!important;
  border:1px solid hsl(var(--border))!important;
  background:hsl(var(--card))!important;
  box-shadow:var(--shadow-sm);
}
.feature-card:hover{
  box-shadow:var(--shadow-xl);
  border-color:hsl(var(--primary) / .32)!important;
}
/* accent bar that draws in on hover */
.feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,hsl(var(--primary)),#F0A324);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.feature-card:hover::before{transform:scaleX(1)}

/* Icons inside feature cards lift with the card */
.feature-card i,.feature-card .ico{
  transition:transform .45s var(--ease-out),color .3s;
}
.feature-card:hover > i:first-child,
.feature-card:hover .ico{transform:translateY(-3px) scale(1.1) rotate(-6deg)}

/* --- Page hero banner --- */
.page-banner{
  position:relative;overflow:hidden;
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  aspect-ratio:21/6;
  margin-inline:auto;max-width:1200px;
}
.page-banner img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.2s var(--ease-out);
}
.page-banner:hover img{transform:scale(1.08)}
.page-banner-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:2rem;color:#fff;
  background:linear-gradient(100deg,hsl(222 30% 8% / .74),hsl(27 60% 22% / .5));
}
.page-banner-veil h2{color:#fff!important;margin-bottom:.45rem;font-size:clamp(1.4rem,3vw,2.1rem)!important}
.page-banner-veil p{color:hsl(0 0% 100% / .85);max-width:42rem;font-size:.95rem;line-height:1.6}
@media(max-width:760px){
  .page-banner{aspect-ratio:16/10}
  .page-banner-veil{padding:1.25rem}
}

/* --- Split media block (image beside copy) --- */
.split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.split-media{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.split-media:hover img{transform:scale(1.06)}
@media(max-width:900px){ .split{grid-template-columns:1fr} }

@media(prefers-reduced-motion:reduce){
  .rv-armed{opacity:1!important;transform:none!important}
  .has-tilt{transform:none!important}
  .has-tilt::after{display:none}
}

/* ============================================================
   Orange / black / white gradient treatment for legacy pages
   ============================================================ */

/* Legacy pages set their own body background, which would sit on top
   of the global body::before wash. Make it transparent so it shows. */
body{background:transparent!important}

/* Brand gradient on legacy buttons and nav CTA */
.btn-primary,.nav-cta,.wizard-call{
  background:var(--grad-brand)!important;
  color:#fff!important;
  box-shadow:0 8px 22px hsl(var(--primary) / .38),0 2px 6px hsl(var(--primary-deep) / .3)!important;
}
.btn-primary:hover,.nav-cta:hover,.wizard-call:hover{
  background:linear-gradient(120deg,hsl(12 100% 40%),hsl(20 100% 48%) 46%,hsl(32 100% 56%))!important;
  box-shadow:0 18px 36px hsl(var(--primary) / .45)!important;
}

/* Gradient cap + edge on legacy card surfaces */
.plan,.feature-card,.svc-card,.case-card,.city-card,.tool-card,.post-card{
  position:relative;
  background-image:var(--grad-edge);
  background-size:100% 4px;
  background-repeat:no-repeat;
  background-position:0 0;
}

/* Accent rule and eyebrows pick up the gradient */
.accent-line{background:var(--grad-edge)!important;height:4px!important;width:52px!important;border-radius:3px}
.badge-loc,.pill i,.chip i{color:hsl(var(--primary))}

/* Section dividers */
section + section{position:relative}
section + section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,hsl(var(--primary) / .45) 30%,hsl(var(--primary-lift) / .4) 70%,transparent);
}

/* Ink CTA blocks — the black end of the palette */
.cta-panel,.art-cta{
  background:linear-gradient(140deg,hsl(0 0% 7%) 0%,hsl(0 0% 12%) 48%,hsl(16 72% 22%) 100%)!important;
}

.logo::before, .brand::before{display:none!important;content:none!important}
.brand-mark{background:none!important}

/* Media overlays warm up */
.media-top::after{
  background:linear-gradient(180deg,transparent 42%,hsl(16 60% 10% / .62) 100%)!important;
}
.page-banner-veil{
  background:linear-gradient(100deg,hsl(0 0% 6% / .74),hsl(18 78% 26% / .55))!important;
}