/* =========================
  Reno Lead Media — Classic Light Theme
   ========================= */

/* ---- Variables (Reno Lead Media Theme) ---- */
:root {
  --bg: #fcfcfc;           /* Clean, bright gallery white */
  --panel: #ffffff;
  --card-bg: #ffffff;
  
  /* Primary Navy: Sampled from the "Reno" text and house icon in newlogo2.png */
  --text: #14365d;        
  --muted: #51606a;        /* Balanced grey for secondary text */

  /* The "Authority" Palette (Navy) */
  --accent: #14365d;       /* Primary Navy from logo */
  --accent-dark: #0d2541;  /* Deep shadow for hover states */
  
  /* The "Lead & Growth" Palette (Orange) */
  /* Sampled from the "Lead" text and growth arrow in newlogo2.png */
  --accent-light: #ff6b00; /* Vibrant Orange for high-conversion CTAs */
  --accent-2: #ff6b00;     /* Matching brand orange */

  --glass: rgba(20, 54, 93, 0.04);
  --radius: 12px;
  --transition: 200ms cubic-bezier(.2,.9,.2,1);
  --container-max: 1100px;
  --nav-height: 76px;
}



/* ---- Reset / base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #eef6f8 120%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
/* prevent horizontal scrolling */
html, body { overflow-x: hidden; }

/* ---- Header ---- */
header{
  position: relative !important;
  top: auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,253,0.98));
  border-bottom:1px solid rgba(2,6,8,0.06);
  box-shadow: 0 6px 18px rgba(2,6,8,0.04);
  backdrop-filter: blur(4px);
  z-index: 2000 !important;          /* sit above main content */
  overflow: visible !important;      /* don’t clip dropdown */
}

/* header container */
.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:.5rem 1rem;
  display:grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | cta */
  align-items:center;
  gap:1rem;
  min-height:var(--nav-height);
  position: relative;                /* positioning context for menu */
}

/* Make brand link interactive */
.brand{
  color: var(--accent);
  transition: color var(--transition), transform var(--transition), filter var(--transition);
  cursor: pointer;
}
.brand:hover,
.brand:focus-visible{
  color: var(--accent-2);
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 20px rgba(11,143,120,.18));
  text-decoration: none;
}
.brand svg{ display:block } /* avoid baseline gaps */

/* Brand (left) */
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:.3px;
  font-size:1.05rem;
}
.brand-dot{
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-light),var(--accent-dark));
  box-shadow:0 8px 24px rgba(11,15,17,0.06);
  flex-shrink:0;
}

/* Center nav wrapper */
.nav-wrap{ justify-self:center; display:flex; align-items:center; gap:1rem; min-width:0; }

.nav-list{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}

.nav-list li{ margin:0; }
.nav-list a{
  display:inline-flex;
  align-items:center;
  padding:.6rem .9rem;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  border-radius:10px;
  background: transparent;
  border:1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  font-size:1rem;
}

.nav-list a:hover,
.nav-list a:focus{
  transform:translateY(-3px);
  background: linear-gradient(90deg, rgb(255, 255, 255), rgba(11,143,120,0.06));
  box-shadow: 0 10px 28px rgba(227, 68, 24, 0.04);
  outline: none;
}

.nav-list a.active{
  background: var(--accent-dark);
  color:#ffffff;
  box-shadow: 0 18px 48px rgba(13,37,65,0.16);
  transform:none;
}

/* CTA (right) */
.header-cta{ display:flex; gap:.6rem; align-items:center; justify-content:center; }

.btn{
  padding:.6rem 1rem;
  border-radius:10px;
  font-weight:700;
  color:#ffffff !important;

  /* ✅ LEFT darker → RIGHT lighter (more contrast) */
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-light)
  );

  border:none;
  text-decoration:none;
  box-shadow:0 12px 36px rgba(20,46,92,0.18);
  transition: all var(--transition);
}

.btn {
  padding: .7rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  color: #ffffff !important;
  border: 1px solid rgba(255, 107, 0, 0.35);
  text-decoration: none;
  background: linear-gradient(135deg, #14365d, #0d2541);
  box-shadow:
    inset 0 0 0 1px rgba(255, 107, 0, 0.12),
    0 10px 22px rgba(13, 37, 65, 0.22);
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff6b00, #e65f00);
  box-shadow: 0 12px 24px rgba(255, 107, 0, 0.28);
  filter: none;
}





/* Pressed state (desktop + mobile) */
.btn:active{
  transform: translateY(0);          /* cancel hover lift */
  box-shadow: 0 6px 18px rgba(11,15,17,0.22);
  filter: brightness(0.96);          /* slightly darker = pressed */
}








/* ghost button with white background + slate border + dark teal text */
.btn-ghost{
  padding:.6rem .9rem;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #4a6570;
  color:#0b0c10;
  text-decoration:none;
  font-weight:600;
  transition: background .2s, color .2s, border-color .2s;
}

.btn-ghost:hover{
  background:#4a6570;
  color:#ffffff;
}



/* mobile toggle (hamburger) */
.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  padding:.5rem .6rem;   /* nicer tap target */
  cursor:pointer;
  color:var(--muted);
  border-radius:8px;
}
.nav-toggle svg{ display:block }

/* mobile menu (dropdown) — LEFT aligned by default */
.mobile-menu{
  display:none;
  position:absolute;
  left:.5rem;            /* align to the left */
  right:auto;
  transform:none;        /* no centering transform */
  top: calc(var(--nav-height) + 8px);
  background: var(--panel);
  border-radius:10px;
  padding:.6rem;
  width:420px;
  max-width: calc(100% - 1rem);  /* prevent overflow on small screens */
  max-height: calc(100dvh - var(--nav-height) - 12px); /* scroll-safe on phones */
  overflow:auto;
  box-shadow: 0 18px 70px rgba(2,6,8,0.06);
  border:1px solid rgba(2,6,8,0.06);
  z-index:1000;
}


header.is-open .mobile-menu { display: block; }

.mobile-menu ul{
  display:flex; flex-direction:column; gap:.2rem;
  margin:0; padding:0; list-style:none;
}
.mobile-menu a{
  padding:.9rem 1rem;
  color:var(--text);
  text-decoration:none;
  display:block;
  border-radius:8px;
}
.mobile-menu a:hover{ background: rgba(11,143,120,0.06) }

/* ---------- Main / content ---------- */
.container{
  max-width:var(--container-max);
  margin: 2.25rem auto;
  padding: 1rem;
  display:flex;
  justify-content:center;
}

main.card{
  width:100%;
  max-width:980px;
  background: var(--panel);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow: 0 10px 40px rgba(2,6,8,0.06);
  color:var(--text);
  border: 1px solid rgba(2,6,8,0.04);
}

/* ---------- Hero ---------- */
 
/* Force the hero into a single centered column */
.hero{
  display:block !important;              /* override any flex/grid layout */
  text-align:center;                     /* center headings by default */
}
.hero .hero-left{
  max-width: 720px;                      /* tidy readable width */
  margin: 0 auto !important;             /* center the block itself */
  text-align: center !important;         /* ensure text is centered */
}
.hero .hero-actions{
  display:flex;                          /* ensure button row centers */
  justify-content:center !important;
  gap: .6rem;
  flex-wrap: wrap;
}
/* Make the image block centered and tidy */
.hero .hero-art .card{
  width:100%;
  max-width:560px;
  margin:1.2rem auto 0 auto;             /* centers the image card */
}
.hero .hero-art img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:12px;
}

/* Optional: a bit tighter on phones */
@media (max-width:700px){
  .hero .hero-left{ padding: 0 14px; }
  .hero .hero-art .card{ max-width: 520px; }
}
 

/* Logo size */
.logo {
  height: 64px;   /* try 56 first */
  width: auto;
}

header .header-inner{
  align-items: center;
}

header .logo{
  height: 90px !important;   /* try 90 first */
  width: auto !important;
  display: block;
}


@media (max-width: 700px){
  header .logo{
    height: 52px !important; /* slightly smaller on mobile */
  }
}

.brand{
  display:flex;
  align-items:center;
  transition: transform 200ms ease, filter 200ms ease;
}

.brand:hover{
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 25px rgba(11, 183, 193, 0.25));
}



.hero{
  display:grid;
  grid-template-columns: 1fr minmax(280px,420px);
  gap:2rem;
  align-items:center;
}

.hero-left{ text-align:left }
.hero-left h1{
  margin:0 0 .6rem 0;
  font-family:Poppins, Inter, sans-serif;
  font-size:2rem;
  line-height:1.05;
  color:var(--text);
}
.lead{ margin:0 0 1rem 0; color:var(--muted); font-size:1.05rem; }

.hero-actions{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin-top:.8rem; }

.hero-art .card{
  background: linear-gradient(180deg, rgba(247,250,252,1), rgba(255,255,255,1));
  padding:1rem;
  border-radius:10px;
  border: 1px solid rgba(2,6,8,0.04);
}
.hero-art img{ width:100%; height:auto; display:block; border-radius:8px; object-fit:cover; }

/* services grid */
.services{
  margin-top:1.6rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.service{
  background: var(--card-bg);
  border-radius:10px;
  padding:1rem;
  min-height:120px;
  color:var(--text);
  box-shadow: 0 8px 30px rgba(2,6,8,0.04);
  border:1px solid rgba(2,6,8,0.06);
}
.service h4{ margin:0 0 .5rem 0; font-size:1.02rem; font-weight:700; font-family:Poppins, Inter, sans-serif; color:var(--text); }
.service p{ margin:0; color:var(--muted); font-size:.96rem; }

/* about / packages block */
.about{ margin-top:1.5rem; display:flex; gap:1.25rem; align-items:center; justify-content:space-between; }
.about p{ color:var(--muted); margin:0; }

footer{ margin-top:2rem; padding:1.25rem; text-align:center; color:var(--muted); font-size:.95rem; }

/* focus for keyboard users */
a:focus, button:focus { outline: 3px solid rgba(11,143,120,0.12); outline-offset: 2px; }

/* ---- Accessibility / tweaks for light theme ---- */
.lead,
.muted,
.service p,
.about p,
.card p,
footer,
.container p {
  color: var(--muted);
  line-height:1.6;
}

h1, h2, h3, h4, .service h4, .brand-text { color: var(--text); }

a { color: var(--accent); text-decoration: underline; }
a:hover, a:focus { color: var(--accent-2); text-decoration: none; }


 

.kicker, .small { color: rgba(81,96,106,0.9); font-size: .95em; }

.mobile-menu a { color: var(--text); }

.service + .service { border-left: none; }

.reader {
  background: #ffffff;
  color: var(--text);
}
.reader p, .reader .lead {
  font-size: 16px;
  line-height: 1.75;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}

/* ====== Mobile menu backdrop when open (non-breaking) ====== */
header.is-open::after{
  content:"";
  position: fixed;
  inset: var(--nav-height) 0 0 0;  /* start under the header */
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1999;                   /* under the header (2000) but above content */
  pointer-events: none;
}

/* End of Classic Light Theme CSS */

/* ===== Blue Way Digital — Contact form tweaks ===== */
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-field.full { grid-column: 1 / -1; }
.form-label {
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-weight:600;
  font-size:0.95rem;
}
.form-control {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(2,6,8,0.06);
  background:var(--card-bg);
  color:var(--text);
  font-size:1rem;
  transition: box-shadow var(--transition), border-color var(--transition);
  box-shadow: none;
  outline:none;
}
.form-control:focus {
  border-color: rgba(11,143,120,0.18);
  box-shadow: 0 8px 20px rgba(11,143,120,0.06);
}
.form-textarea { min-height:140px; resize:vertical; }
.bwd-form .btn { min-width:160px; }
.bwd-form .btn-ghost { padding:10px 12px; }
#formMessage { font-size:0.95rem; }
#formMessage.success { color:#0b7a3a; font-weight:600; }
#formMessage.error { color:#b42727; font-weight:600; }

/* =========================
   ALL MOBILE / RESPONSIVE LOGIC — MOVED TO END
   ========================= */

/* Nav: prevent horizontal overflow before 640px breakpoint */
@media (max-width: 820px){
  .nav-list { white-space: normal; flex-wrap: wrap; gap: .25rem; }
  .nav-list a { font-size: .95rem; padding: .5rem .7rem; }
}

/* Hero: force single column sooner, shrink headline a bit */
@media (max-width: 820px){
  .hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-left h1 { font-size: 1.6rem; }
}

/* Tablets / small laptops */
@media (max-width:980px){
  .hero{ grid-template-columns: 1fr; text-align:left; }
  .services{ grid-template-columns: repeat(2,1fr); }
}

/* --- Mobile: center brand, hamburger on right — works even if nav-toggle is inside .nav-wrap --- */
@media (max-width:700px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* left spacer | brand | right (hamburger) */
    align-items:center;
  }

  /* Flatten .nav-wrap so its children (like .nav-toggle) join the parent grid */
@media (max-width:700px){
  .nav-wrap{ display:flex !important; }
}


  /* Hide desktop nav & CTA */
  .nav-list, .header-cta { display: none !important; }

  /* Brand centered in the middle column */
  .brand{
    grid-column: 2;
    justify-self: center;
  }
  .brand svg{ max-width:62vw; height:auto; display:block; }

  /* Place hamburger in right column whether nested or direct */
  .header-inner > .nav-toggle,
  .nav-wrap .nav-toggle{
    display: inline-flex !important;
    grid-column: 3;
    justify-self: end;
    margin: 0 !important;
    padding: .5rem .6rem;
  }

  /* Left-align dropdown and keep it fully visible */
  .mobile-menu{
    position: fixed;                 /* escape stacking contexts */
    top: var(--nav-height);          /* sits just below the header */
    left: .5rem;
    right: .5rem;                    /* keep it inside viewport */
    transform: none;
    width: auto;                     /* width now controlled by left/right */
    max-width: none;
    max-height: calc(100dvh - var(--nav-height) - 12px);
    overflow: auto;
    z-index: 3000;                   /* above everything but header (and overlay is under this) */
    background: var(--panel);
    border: 1px solid rgba(2,6,8,0.06);
    border-radius: 10px;
    box-shadow: 0 18px 70px rgba(2,6,8,0.10);
  }

  /* Prevent background scroll when menu open (class toggled by JS) */
  body.menu-open { overflow: hidden; }
}

/* Reduce global paddings for small screens */
@media (max-width: 640px){
  .container { padding: 0.75rem; }
  main.card { padding: 1.25rem; }
  .services { grid-template-columns: 1fr; }
}

/* Extra tightening for small phones (≤600px) */
@media (max-width:600px){
  .header-inner{ padding:.4rem .75rem; }
  .nav-toggle{ padding:.45rem .55rem; }
  .hero-left h1{ font-size:1.4rem; }
  .container { padding: 0.75rem; }
  main.card { padding: 1.25rem; }
}

/* Form grid: extra-tight for very small devices */
@media (max-width: 400px){
  .form-control { font-size: .95rem; padding: 9px 10px; }
  .bwd-form .btn { min-width: 140px; }
}


/* === Mobile menu portalized to <body> when open === */
.mobile-menu--portal{
  position: fixed;
  top: var(--nav-height, 76px);
  left: .5rem;
  right: .5rem;
  max-height: calc(100dvh - var(--nav-height, 76px) - 12px);
  overflow: auto;
  background: var(--panel, #fff);
  border: 1px solid rgba(2,6,8,0.06);
  border-radius: 10px;
  box-shadow: 0 18px 70px rgba(2,6,8,0.12);
  z-index: 999999; /* sit above everything */
}

#menu-backdrop{
  position: fixed;
  top: var(--nav-height, 76px);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 999990; /* just under the menu */
}

/* Avoid background scrolling while open */
body.menu-open { overflow: hidden; }


/* To make Pro package more popular */
.badge-popular {
  background: var(--accent-2); /* Use the Gold from logo */
  color: #ffffff;
  /* ... rest of your styles */
}






 /*  customer portal style */
.customer-portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;   /* adjust 32–40px */
  height: 34px;
  margin-right: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.customer-portal-icon {
  width: 100%;
  height: 100%;
}

.cp-bg {
  fill: #0bb7c1; /* your teal brand color */
}

.cp-avatar {
  fill: #ffffff;
}

/* Optional hover */
.customer-portal-link:hover .cp-bg {
  fill: #0b8f78; /* darker teal */
}

/* mobile menu customer portal icon tweaks */
.mobile-menu .customer-portal-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
}



   /* =========================================
   PRICING TABLE — MOBILE SHRINK (LEFT-ALIGNED, NO SHIFT)
   Put this at the VERY END of style.css
   ========================================= */

@media (max-width: 820px){
  .table-wrap{
    overflow: hidden !important;   /* no sideways scroll */
    width: 100% !important;
  }

  /* keep the table layout stable */
  #compare-table{
    border-collapse: collapse;
    table-layout: fixed !important;
    min-width: 0 !important;

    /* ✅ shrink the table itself */
    transform: scale(0.92);
    transform-origin: top left;

    /* ✅ compensate so it doesn't get clipped on the right */
    width: calc(100% / 0.92) !important;
  }

  #compare-table th,
  #compare-table td{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: .88rem !important;
    padding: .6rem !important;
  }

  /* remove any sticky column behavior */
  #compare-table th:first-child,
  #compare-table td:first-child{
    position: static !important;
    left: auto !important;
  }
}

/* Extra-small phones */
@media (max-width: 420px){
  #compare-table{
    transform: scale(0.88);
    width: calc(100% / 0.88) !important;
  }

  #compare-table th,
  #compare-table td{
    font-size: .84rem !important;
  }
}

/* Force booking button color to stay consistent on mobile */
@media (hover: none) and (pointer: coarse){
  .btn,
  .btn:hover,
  .btn:focus,
  .btn:focus-visible,
  .btn:active{
    background: var(--accent) !important;
    color:#ffffff !important;
  }
}



/* ===== FORCE mobile menu to open from RIGHT ===== */
@media (max-width: 950px){

  #mobileMenu.mobile-menu{
    position: absolute !important;
    top: calc(var(--nav-height) + 8px) !important;
    right: 12px !important;
    left: auto !important;

    width: min(320px, 92vw) !important;
    max-width: none !important;
  }

}

/* ===== LANDSCAPE phone cleanup ===== */
@media (max-width: 950px) and (orientation: landscape){

  .header-inner{
    min-height: 60px !important;
    padding: .35rem .75rem !important;
  }

  header .logo{
    height: 44px !important;
  }

  .nav-toggle{
    padding: .4rem .5rem !important;
  }

}


footer a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

footer a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Force all service cards to look identical everywhere */
.services .service:nth-child(2),
.services .service:nth-child(2):hover,
.services .service:nth-child(2):active,
.services .service:nth-child(2):focus,
.services .service:nth-child(2):focus-within{
  border: 1px solid rgba(2,6,8,0.06) !important;
  box-shadow: 0 8px 30px rgba(2,6,8,0.04) !important;
  background: var(--card-bg) !important;
  transform: none !important;
  outline: none !important;
}


/* Restore Most Popular badge glow */
.badge-popular {
  background: linear-gradient(135deg, #ff6b00, #e65f00) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 107, 0, 0.35),
    0 10px 28px rgba(255, 107, 0, 0.24),
    0 0 22px rgba(255, 107, 0, 0.45) !important;
}

/* Restore Growth card glow */
body.page-pricing .services .service:nth-child(2){
  border: 2px solid rgba(255, 107, 0, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(255, 107, 0, 0.20),
    0 18px 48px rgba(13, 37, 65, 0.16),
    0 0 28px rgba(255, 107, 0, 0.32) !important;
  transform: translateY(-2px);
}

body.page-pricing .services .service:nth-child(2):hover{
  box-shadow:
    0 0 0 1px rgba(255, 107, 0, 0.28),
    0 22px 60px rgba(13, 37, 65, 0.20),
    0 0 34px rgba(255, 107, 0, 0.42) !important;
}