/* ==================================================
   SUNRISE TOWING LLC – FINAL CSS (READY)
   Creamy white • Yellow/orange • MAX GLOW (Phone + Call)
   ================================================== */

:root{
  --bg: #fbf7ef;
  --panel: #ffffff;
  --panel2: #fff1cf;
  --text: #1b1b1b;
  --muted: #6f6f6f;

  --yellow: #ffb400;
  --yellow-strong: #ffd84d;
  --orange: #ff7a00;
}

/* ===== RESET ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{ text-decoration:none; color:inherit; }

/* ===== GLOBAL ===== */
.container{ max-width:1200px; margin:auto; padding:0 16px; }
.small{ font-size:14px; color:var(--muted); line-height:1.6; }

/* ===== HEADER ===== */
.topbar{
  background: var(--panel2);
  border-bottom: 6px solid var(--yellow);
}
.navwrap{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 0;
}

/* ===== LOGO ===== */
.brand{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand img{
  width:96px;
  height:96px;
  object-fit:contain;
  background:#fff;
  padding:14px;
  border-radius:20px;
  box-shadow:
    0 12px 34px rgba(0,0,0,0.35),
    0 0 0 5px rgba(255,180,0,0.9);
}
.title{ font-size:22px; font-weight:900; }
.sub{ font-size:12px; color:var(--muted); }

/* ===== NAV ===== */
.nav{
  margin-left:auto;
  display:flex;
  gap:18px;
}
.nav a{
  font-size:14px;
  padding:8px 12px;
  border-radius:10px;
}
.nav a:hover{
  background:rgba(255,180,0,0.18);
}

/* ==================================================
   TOP RIGHT PHONE – FULL FILL + MAX GLOW
   ================================================== */
.phone{
  margin-left:18px;
  font-size:18px;
  font-weight:900;
  color:#000;

  background: linear-gradient(135deg, #ff7a00, #ffb400);
  padding:16px 24px;
  border-radius:22px;

  box-shadow:
    0 0 18px 6px rgba(255,122,0,0.9),
    0 0 40px 14px rgba(255,180,0,0.9),
    0 18px 60px rgba(255,140,0,1);

  animation: phoneGlowMax 1.4s infinite alternate;
}

@keyframes phoneGlowMax{
  from{
    box-shadow:
      0 0 18px 6px rgba(255,122,0,0.9),
      0 0 40px 14px rgba(255,180,0,0.9),
      0 18px 60px rgba(255,140,0,1);
  }
  to{
    box-shadow:
      0 0 30px 12px rgba(255,122,0,1),
      0 0 60px 24px rgba(255,180,0,1),
      0 26px 90px rgba(255,140,0,1);
  }
}

/* ==================================================
   CALL BUTTON – FULL FILL + MAX GLOW
   ================================================== */
.btn{
  display:inline-block;
  background: linear-gradient(135deg, #ff7a00, #ffb400);
  color:#000;
  font-weight:900;

  padding:20px 34px;
  border-radius:26px;

  box-shadow:
    0 0 22px 8px rgba(255,122,0,0.9),
    0 0 48px 18px rgba(255,180,0,0.9),
    0 22px 70px rgba(255,140,0,1);

  animation: callGlowMax 1.3s infinite alternate;
}

@keyframes callGlowMax{
  from{
    box-shadow:
      0 0 22px 8px rgba(255,122,0,0.9),
      0 0 48px 18px rgba(255,180,0,0.9),
      0 22px 70px rgba(255,140,0,1);
  }
  to{
    box-shadow:
      0 0 36px 16px rgba(255,122,0,1),
      0 0 72px 30px rgba(255,180,0,1),
      0 32px 110px rgba(255,140,0,1);
  }
}

/* Secondary button calm */
.btn.secondary{
  background: transparent;
  color: #000;
  border: 2px solid var(--yellow);
  animation: none;
  box-shadow: none;
  padding: 14px 22px;
  border-radius: 18px;
}

/* ===== LAYOUT ===== */
.section{ margin:64px 0; }
.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  margin-top:36px;
}
.card{
  background: var(--panel);
  border: 3px solid rgba(255,180,0,0.55);
  border-radius: 20px;
  padding: 26px;
}

/* ===== HERO IMAGE – YELLOW CUBE ===== */
.heroSingle{
  background: linear-gradient(135deg, var(--yellow), var(--yellow-strong));
  padding:16px;
  border-radius:26px;
  box-shadow: 0 18px 48px rgba(255,180,0,0.55);
}
.heroSingle img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:18px;
}

/* ===== SERVICES GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:30px;
}
.serviceCard{
  border:3px solid rgba(255,180,0,0.55);
  transition: .2s;
}
.serviceCard:hover{
  border-color: var(--orange);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(255,140,0,0.45);
}
.serviceCard h3{
  margin-top:0;
  color: var(--orange);
}
.serviceCard .link{
  font-weight:900;
  color: var(--orange);
}

/* ===== FOOTER ===== */
.footer{
  background: var(--panel2);
  margin-top:80px;
  padding:40px 0;
  border-top: 6px solid var(--yellow);
}
.hr{
  height:2px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  margin:20px 0;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .split{ grid-template-columns:1fr; }
  .heroSingle img{ height:260px; }
  .nav{ display:none; }
  .phone{ margin-left:auto; }
}
@media(max-width:600px){
  .grid{ grid-template-columns:1fr; }
  .brand img{
    width:74px;
    height:74px;
    padding:10px;
  }
  .phone{
    font-size:16px;
    padding:14px 18px;
  }
  .btn{
    padding:18px 28px;
  }
}