/* Hookline Towing — static export stylesheet */

:root {
  --bg: oklch(0.165 0.008 60);
  --bg2: oklch(0.205 0.009 58);
  --surface: oklch(0.23 0.011 56);
  --fg: oklch(0.95 0.006 85);
  --muted: oklch(0.72 0.014 72);
  --line: oklch(0.33 0.012 66);
  --accent: oklch(0.79 0.115 75);
  --accent-2: oklch(0.7 0.135 295);
  --logo: oklch(0.7 0.135 295);
  --blue: oklch(0.6 0.15 252);
  --ease: cubic-bezier(0.22,1,0.36,1);
  --maxw: 1200px;
}
[data-theme="light"] {
  --bg: oklch(0.965 0.007 85);
  --bg2: oklch(0.93 0.009 80);
  --surface: oklch(0.995 0.004 90);
  --fg: oklch(0.21 0.012 56);
  --muted: oklch(0.44 0.014 62);
  --line: oklch(0.86 0.012 76);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Geist',system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body[data-dyslexia="on"],body[data-dyslexia="on"] *{font-family:'Lexend',sans-serif !important}
img{max-width:100%}
input,textarea,select{font-family:inherit}
::selection{background:var(--accent);color:#1a1410}

/* Keyframes */
@keyframes hl-kenburns{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.2) translate(-2%,-2%)}}
@keyframes hl-sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes hl-slidein-r{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes hl-slidein-d{from{transform:translateY(-22px);opacity:0}to{transform:none;opacity:1}}
@keyframes hl-fadein{from{opacity:0}to{opacity:1}}
@keyframes hl-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].hl-in{opacity:1;transform:none}

/* Header hover states */
#hl-contact-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
#hl-search-btn:hover,#hl-settings-btn:hover,#hl-hamburger:hover{background:rgba(150,168,150,.16)}
#hl-contact-menu a:hover{background:color-mix(in oklab,var(--accent) 16%,transparent)}

/* CTA buttons */
a[data-hot]{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a[data-hot]:hover{transform:translateY(-2px);box-shadow:0 20px 44px -18px var(--accent)}

/* Nav links */
#hl-desktop-nav a{transition:color .25s var(--ease)}
#hl-desktop-nav a:hover{color:var(--fg) !important}
#hl-mobile-nav a:hover{color:var(--fg) !important;text-decoration:underline;text-decoration-color:var(--logo);text-underline-offset:5px}

/* Footer links */
footer a:not([data-hot]):hover{color:var(--accent) !important}

/* Responsive */
@media(max-width:879px){
  #hl-desktop-nav{display:none !important}
  #hl-hamburger{display:flex !important}
}
@media(max-width:559px){
  .hl-phone-text{display:none}
}

/* Contact method cards hover */
.contact-method{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.contact-method:hover{transform:translateY(-4px)}
.contact-method-alt:hover{border-color:var(--accent) !important}

/* Service cards hover */
.service-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.service-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(0,0,0,.65);border-color:var(--accent) !important}
.service-card:hover img{transform:scale(1.06)}
.service-card img{transition:transform .7s var(--ease)}
.service-card:hover .service-arrow{transform:translateX(4px)}
.service-arrow{transition:transform .3s var(--ease)}

/* Article card hover */
.article-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.article-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -20px rgba(0,0,0,.6);border-color:var(--accent) !important}
.article-card:hover img{transform:scale(1.05)}
.article-card img{transition:transform .7s var(--ease)}

/* Social icons hover */
.social-icon:hover{transform:translateY(-3px);border-color:var(--accent) !important;box-shadow:0 0 22px -4px var(--accent)}
.social-icon{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}

/* Page transitions */
html.hl-fade body{opacity:0;transition:opacity .32s var(--ease)}
body{opacity:1;transition:opacity .4s var(--ease)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  [data-kb]{animation:none !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important;transform:none !important}
  [data-sway],[data-float]{animation:none !important}
}