/* ============================================================
   Atlant Appliance Repair — homepage (2026 redesign)
   Static, self-contained. Layout is inline in index.html;
   this file holds tokens, interactions, animations & responsive.
   ============================================================ */
:root{ --accent:#E11414; --accent-deep:#B00F0F; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif; color:var(--text); background:var(--bg); overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
input,select,button,textarea{ font-family:inherit; font-size:inherit; }
::placeholder{ color:var(--muted); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* keep anchored sections clear of the sticky header */
section[id], span#top{ scroll-margin-top:132px; }

/* ---------- animations ---------- */
@keyframes fadeUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.fadeup-1{ animation:fadeUp .8s .05s both ease-out; }
.fadeup-2{ animation:fadeUp .8s .18s both ease-out; }

/* ---------- hover states ---------- */
.svc{ position:relative; }
.svc:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(21,23,28,.32); border-color:var(--text); }
.svc:hover .svc-arrow{ background:var(--accent); color:#fff; transform:translateX(3px); }
.navlink{ transition:color .15s; }
.navlink:hover{ color:var(--accent); }
.areacard:hover{ background:var(--ink-2); color:#fff; border-color:var(--text); }
.areacard:hover .area-sub{ color:rgba(255,255,255,.6); }
.btn-pri:hover{ filter:brightness(.92); }
.btn-ghost:hover{ background:var(--hero-chip); color:var(--hero-text); border-color:var(--hero-text); }
.brandtile:hover{ border-color:var(--text); }
.marquee-track:hover{ animation-play-state:paused; }

/* ---------- nav dropdowns (desktop) ---------- */
.has-dd{ position:relative; }
.dd-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
  min-width:0; width:max-content; max-width:340px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.28); padding:8px; margin-top:2px;
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s;
  max-height:64vh; overflow:auto; z-index:70;
}
.has-dd:hover .dd-menu, .has-dd:focus-within .dd-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(2px); }
.dd-menu.dd-wide{ min-width:0; max-width:380px; }
.dd-menu.dd-wide .dd-inner{ columns:2; column-gap:6px; }
.dd-menu a{ display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; break-inside:avoid; }
.dd-menu a:hover{ background:var(--surface-2); color:var(--accent); }

/* ---------- mobile header / menu ---------- */
.mobile-bar{ display:none; }
.hamburger{ display:grid; place-items:center; width:44px; height:44px; border-radius:11px; border:1px solid var(--line-2); background:transparent; cursor:pointer; }
.hamburger span{ display:block; width:20px; height:2px; background:var(--text); position:relative; }
.hamburger span::before,.hamburger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); }
.hamburger span::before{ top:-6px; } .hamburger span::after{ top:6px; }
.mobile-menu{ display:none; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 20px 18px; }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:12px 6px; font-weight:600; font-size:16px; border-bottom:1px solid var(--line); }
.mobile-menu .mm-actions{ display:flex; gap:10px; margin-top:14px; }
.mobile-menu .mm-actions a{ flex:1; text-align:center; border-bottom:none; border-radius:12px; padding:14px; font-weight:700; }

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hero-grid{ grid-template-columns:1fr !important; gap:44px !important; }
  .book-grid{ grid-template-columns:1fr !important; gap:40px !important; }
  .disc-grid{ grid-template-columns:1fr !important; gap:34px !important; }
  .svc-grid,.why-grid,.steps-grid,.areas-grid,.reviews-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .stat-strip{ grid-template-columns:repeat(2,1fr) !important; row-gap:20px !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:767px){
  .desktop-nav{ display:none !important; }
  .mobile-bar{ display:flex !important; }
  .util-bar{ display:none !important; }
  .svc-grid,.why-grid,.steps-grid,.areas-grid,.reviews-grid,.disc-tiles,.footer-grid{ grid-template-columns:1fr !important; }
  .stat-strip{ grid-template-columns:repeat(2,1fr) !important; }
  .pad-section{ padding-top:56px !important; padding-bottom:32px !important; }
  .disc-panel{ padding:34px 22px !important; }
  .hero-inner{ padding:54px 20px 64px !important; }
  .book-inner{ padding:56px 20px !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fadeup-1,.fadeup-2{ animation:none !important; }
  .marquee-track{ animation:none !important; }
  .marquee-wrap{ overflow-x:auto !important; }
}

/* Services: land with the section top edge at the very top of the viewport */
#services{ scroll-margin-top:0 !important; }