/* =====================================================
   GOLDEN LINE CLEANING — PREMIUM STYLES (FULL FILE)
   Brand palette pulled from your logo:
   Gold: #DFC05B / #FAE684, Dark: #111, Grey: #EDEDED
   ===================================================== */

/* =========================
   VARIABLES
   ========================= */
:root{
  --bg: #ffffff;
  --text: #141414;
  --muted: #555;
  --muted2: #777;
  --line: rgba(0,0,0,.10);

  --panel: #f6f6f6;
  --panel2: #ededed;

  --dark: #111111;
  --dark2:#000000;

  --gold: #dfc05b;   /* main gold (logo) */
  --gold2:#fae684;   /* lighter gold highlight */
  --gold3:#b99a3d;   /* deeper gold */

  --radius: 18px;
  --radius-sm: 12px;

  --shadow: 0 18px 45px rgba(0,0,0,.14);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.10);

  --focus: 0 0 0 4px rgba(223,192,91,.25);

  --max: 1200px;
  --max-narrow: 1100px;
}

/* =========================
   RESET / BASE
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
p{ color: var(--muted); }

::selection{ background: rgba(223,192,91,.45); }

/* =========================
   LAYOUT HELPERS
   ========================= */
.container, .wrap{
  width: 90%;
  max-width: var(--max);
  margin: 0 auto;
}
.wrap{ max-width: var(--max-narrow); }

.page{ padding: 92px 0; }
.page.alt{ background: #f7f7f7; }

.kicker{
  display:block;
  text-transform:uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 10px;
}

/* Headings – modern + expensive */
h1, h2, h3, h4{
  color: var(--text);
  letter-spacing: -0.02em;
}
.page h2{
  font-size: 36px;
  line-height: 1.12;
  margin-bottom: 14px;
}
.page h3{
  font-size: 20px;
  margin-bottom: 10px;
}
.page p{ font-size: 16px; }

/* =========================
   HEADER / NAV
   ========================= */
.header{
  background: linear-gradient(180deg, #f2f2f2, #eaeaea);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 3000;
  backdrop-filter: blur(8px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* LOGO */
.logo{ display:flex; align-items:center; }
.logo img{
  height: 92px;     /* BIG, premium */
  width: auto;
  display:block;
}

/* MENU */
.menu{
  display:flex;
  align-items:center;
  gap: 22px;
  font-weight: 650;
  font-size: 15px;
}
.menu li{ position:relative; }
.menu a{
  padding: 8px 8px;
  border-radius: 10px;
  transition: background .18s ease, transform .18s ease;
}
.menu a:hover{
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* Phone pill */
.menu .phone a{
  background: rgba(0,0,0,.06);
  padding: 10px 12px;
  font-weight: 800;
}

/* =========================
   BUTTONS (gold premium)
   ========================= */
.btn, .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;

  background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: #151515;
  border: 1px solid rgba(0,0,0,.10);

  box-shadow: 0 14px 26px rgba(0,0,0,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, color .18s ease;
}

.btn:hover, .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  filter: saturate(1.05);
}

/* Optional dark style (if you ever need it) */
.btn-dark{
  background: var(--dark);
  color:#fff;
  border: 1px solid rgba(223,192,91,.35);
}

/* =========================
   DROPDOWNS (hover + click)
   ========================= */
.dropdown-menu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;

  background:#fff;
  min-width: 240px;

  border-radius: 14px;
  padding: 10px 0;

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);

  display:none;
  z-index: 4000;
}

.dropdown-menu li a{
  display:block;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 650;
  border-radius: 0;
}
.dropdown-menu li a:hover{
  background: #f2f2f2;
}

/* show on hover */
.dropdown:hover .dropdown-menu{ display:block; }
/* show on click if script adds .open */
.dropdown.open .dropdown-menu{ display:block; }

/* =========================
   HERO (premium)
   ========================= */
.hero{
  position: relative;
  padding: 120px 0;
  background: radial-gradient(1200px 600px at 50% 0%, #f5f5f5, #e6e6e6);
  overflow:hidden;
}

/* If you add background-image on hero, add class="hero ... has-bg" */
.hero.has-bg{
  background-size: cover;
  background-position: center;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30));
  opacity: 0;
  pointer-events:none;
}
.hero.has-bg::before{ opacity: 1; }

.hero-text{
  position: relative;
  text-align:center;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 10px;
}

.hero h1{
  font-size: 52px;
  line-height: 1.04;
  margin-bottom: 14px;
}
.hero p{
  font-size: 18px;
  color: #4f4f4f;
}

.hero.has-bg h1,
.hero.has-bg p{ color:#fff; }
.hero.has-bg p{ opacity:.92; }

/* Hero CTA spacing */
.hero .btn-primary{ margin-top: 18px; }

/* =========================
   GRIDS / CARDS
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 44px;
}

.card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-soft);

  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.card-image{
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  transform: scale(1);
  transition: transform .35s ease;
}
.card:hover .card-image{ transform: scale(1.03); }

.card-image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.20));
}

/* Card body */
.card .content{
  padding: 22px 22px 26px;
}
.card h3{
  font-size: 18px;
  margin-bottom: 8px;
}
.card p{
  font-size: 15px;
  color: var(--muted);
}
.card a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 14px;

  font-weight: 850;
  padding: 9px 12px;
  border-radius: 12px;

  background: rgba(223,192,91,.22);
  border: 1px solid rgba(223,192,91,.30);
  transition: transform .18s ease, background .18s ease;
}
.card a:hover{
  transform: translateY(-1px);
  background: rgba(223,192,91,.30);
}

/* =========================
   TWO COLUMN / BOXES
   ========================= */
.two-col{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 34px;
  margin-top: 44px;
}

.box{
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 32px;
}

.list li{
  margin-bottom: 10px;
  color: var(--muted);
}

/* =========================
   CALLOUT (expensive)
   ========================= */
.callout{
  background: linear-gradient(135deg, #111, #1a1a1a);
  color:#fff;
  padding: 46px;
  border-radius: var(--radius);
  margin: 64px 0 0;
  text-align:center;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  border: 1px solid rgba(223,192,91,.18);
}
.callout h3{
  color:#fff;
  font-size: 22px;
  margin-bottom: 10px;
}
.callout p{ color: rgba(255,255,255,.88); }

/* =========================
   CTA ROW
   ========================= */
.cta-row{
  display:flex;
  gap: 16px;
  justify-content:center;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* =========================
   ESTIMATE PAGE
   ========================= */
.estimate{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  padding: 90px 0;
}

.estimate-form{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 34px;
}

.estimate-form h2{
  font-size: 26px;
  margin-bottom: 8px;
}
.estimate-form p{
  margin-bottom: 14px;
  color: var(--muted);
}

.estimate-form label{
  display:block;
  margin: 14px 0 6px;
  font-weight: 800;
  color: var(--text);
  font-size: 14px;
}

.estimate-form input,
.estimate-form select,
.estimate-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #d2d2d2;
  background:#fff;
  font-size: 15px;
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.estimate-form input:focus,
.estimate-form select:focus,
.estimate-form textarea:focus{
  border-color: rgba(223,192,91,.85);
  box-shadow: var(--focus);
}

.estimate-form textarea{
  min-height: 125px;
  resize: vertical;
}

/* Make submit look premium */
.estimate-form button{
  width: 100%;
  margin-top: 18px;
  cursor:pointer;
}

/* Includes column */
.estimate-includes{
  background: linear-gradient(180deg, #f7f7f7, #f1f1f1);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 36px;
}

.estimate-includes h3{
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--text);
}

.estimate-includes ul{
  padding-left: 18px;
  list-style: disc;
}
.estimate-includes ul li{
  margin-bottom: 10px;
  color: var(--muted);
}

/* =========================
   SERVICE AREAS
   ========================= */
.service-areas{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
}
.service-areas h4{
  margin-bottom: 8px;
  font-size: 16px;
}
.service-areas p{ color: var(--muted); }

/* =========================
   TIPS PAGE
   ========================= */
.tips-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.tip-card{
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 28px;
}
.tip-card h3{ margin-bottom: 10px; }
.tip-card ul{ padding-left: 18px; list-style: disc; }
.tip-card li{ color: var(--muted); margin-bottom: 8px; }

/* =========================
   FOOTER
   ========================= */
.footer{
  background: #0f0f0f;
  color:#fff;
  text-align:center;
  padding: 36px 0;
  margin-top: 90px;
  border-top: 1px solid rgba(223,192,91,.18);
}
.footer p{ color: rgba(255,255,255,.85); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px){
  .logo img{ height: 78px; }
  .hero{ padding: 105px 0; }
  .hero h1{ font-size: 44px; }
  .menu{ gap: 14px; font-size: 14px; }
}

@media (max-width: 820px){
  .menu{ flex-wrap: wrap; justify-content:flex-end; }
  .menu .phone a{ padding: 9px 10px; }
  .btn, .btn-primary{ padding: 11px 16px; }
}

@media (max-width: 768px){
  .header{ padding: 12px 0; }
  .logo img{ height: 60px; }
  .hero{ padding: 88px 0; }
  .hero h1{ font-size: 36px; }
  .hero p{ font-size: 16px; }
  .page{ padding: 76px 0; }
  .callout{ padding: 34px; }
  .card-image{ height: 200px; }
}
/* =========================
   CHARCOAL HEADER (FINAL)
   ========================= */

.header{
  background: linear-gradient(180deg, #1f1f1f, #141414);
  border-bottom: 1px solid rgba(223,192,91,.22);
}

/* Top nav links (visible on dark header) */
.menu a{
  color: rgba(255,255,255,.92);
}

.menu a:hover{
  background: rgba(255,255,255,.08);
}

/* Phone pill */
.menu .phone a{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
}

/* Dropdown panel (keep it white + readable) */
.dropdown-menu{
  background: #ffffff;
}

.dropdown-menu li a{
  color: #151515;
}

/* Make sure the gold CTA stays gold + readable */
.menu a.btn,
.menu a.btn-primary{
  background: linear-gradient(180deg, #fae684, #dfc05b);
  color: #151515 !important;
  border: 1px solid rgba(223,192,91,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

.menu a.btn:hover,
.menu a.btn-primary:hover{
  background: linear-gradient(180deg, #fff1a0, #dfc05b);
}
/* Ensure index.html service images show (your HTML uses .media) */
.media{
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20));
}
/* === MOBILE LOGO SIZE FIX === */
@media (max-width: 768px){
  .logo img{
    height: 72px;   /* was too small — this is the sweet spot */
    width: auto;
  }
}

@media (max-width: 480px){
  .logo img{
    height: 64px;   /* phones */
  }
}/* === MOBILE LOGO FORCE FIX === */
@media (max-width: 768px){
  .header .logo img{
    height: 78px !important;
    width: auto !important;
  }
}

@media (max-width: 480px){
  .header .logo img{
    height: 140px !important;
    width: auto !important;
  }
}
.page-content {
  margin-top: 40px;
}