/* Bay Motors Towing Services
   Palette: Coffee Bean #1A0706 · Black Cherry #55100D · Alabaster #D9D9D9
            Soft Pearl #F2F1ED (paper) · Amber Beacon #F2A73B (signal)
            Red #E11D34 — matched to bay-motors.com so the two sites share one red.
   Structure, paper sections, logo glow, aurora and spotlight are ported from
   bay-motors.com assets/{site.css,editorial.css,site.js}. */

@font-face{font-family:"Bay Display";src:url("/assets/fonts/barlow-condensed-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Bay Display";src:url("/assets/fonts/barlow-condensed-800-italic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Bay Text";src:url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* dark ground */
  --coffee:#1A0706; --coffee-deep:#120504; --cherry:#55100D; --cherry-soft:#2B0B08;
  --alabaster:#D9D9D9; --mut:rgba(217,217,217,.60); --line:#3D0F0B;
  /* paper: warm off-white, same family as bay-motors.com --ed-paper */
  --paper:#F2F1ED; --paper-2:#E8E6DF; --ink:#14171C; --ink-mut:#5B6068;
  --line-light:rgba(20,23,28,.16);
  /* one red across both sites */
  --red:#E11D34; --red-hi:#F5304A; --red-lift:#FF5C68; --rf-red:225,29,52;
  --red-ink:#B3162A;  /* small text on paper: #E11D34 is only 4.20:1 on #F2F1ED, this is 6.06:1.
                         Same red bay-motors.com uses as --red-dark. */
  --accent:#F2A73B;   /* Amber Beacon: signal. Red is action. */
  --wrap:1140px; --bar:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--coffee);color:var(--alabaster);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:var(--bar);position:relative}
img,video{max-width:100%;display:block}
a{color:var(--red-lift)}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--red);color:#fff;padding:10px 16px;z-index:99;border-radius:6px}

/* ---- fixed aurora backdrop: red pools + drifting rays ---- */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 45% at 6% 2%,    rgba(var(--rf-red),.20), transparent 60%),
    radial-gradient(55% 45% at 98% 26%,  rgba(var(--rf-red),.15), transparent 62%),
    radial-gradient(70% 55% at 50% 106%, rgba(var(--rf-red),.24), transparent 66%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 50px,
    rgba(var(--rf-red),.15) 50px 52px, transparent 52px 104px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 8%,#000 62%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 8%,#000 62%,#000 100%);
  filter:blur(2.5px);opacity:.55;animation:rf-drift 26s linear infinite}
@keyframes rf-drift{to{transform:translateY(-104px)}}

/* ---- header + the glowing wordmark (ported from bay-motors site.css) ---- */
.hdr{position:relative;z-index:5;border-bottom:1px solid var(--line);background:rgba(13,16,22,.97)}
.hdr .wrap{display:flex;align-items:center;gap:18px;min-height:70px}
.logo{font-family:"Bay Display",Impact,sans-serif;font-style:italic;font-size:27px;letter-spacing:.03em;
  color:#fff;text-decoration:none;line-height:1;display:flex;flex-direction:column;
  animation:logo-glow 4.5s ease-in-out infinite}
.logo span{color:var(--red)}
.logo small{font-family:"Bay Text",sans-serif;font-style:normal;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);margin-top:4px;text-shadow:none}
@keyframes logo-glow{
  0%,100%{text-shadow:0 0 5px rgba(var(--rf-red),.40), 0 0 12px rgba(var(--rf-red),.26)}
  50%    {text-shadow:0 0 9px rgba(var(--rf-red),.70), 0 0 22px rgba(var(--rf-red),.48)}}
.nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.72);text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.hdr-call{background:var(--red);color:#fff;text-decoration:none;font-weight:800;padding:11px 18px;border-radius:8px;white-space:nowrap}
.hdr-call:hover{background:var(--red-hi)}

/* ---- hero: the film stays a clean plate, no aurora over it ---- */
.hero{position:relative;min-height:clamp(460px,74vh,700px);display:flex;align-items:center;overflow:hidden;background:var(--coffee-deep)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,5,4,.95) 0%,rgba(18,5,4,.80) 46%,rgba(18,5,4,.26) 100%)}
.hero .wrap{position:relative;z-index:2;padding:56px 0}
.eyebrow{font-family:"Bay Text",sans-serif;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--accent);margin:0 0 14px}
h1{font-family:"Bay Display",Impact,sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(40px,8vw,78px);line-height:.94;margin:0 0 18px;letter-spacing:.01em}
h1 em{font-style:italic;color:var(--accent);display:block}
.lede{font-size:clamp(17px,2.1vw,20px);color:rgba(217,217,217,.88);max-width:48ch;margin:0 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:10px;padding:16px 26px;font-size:18px;
  transition:transform .18s ease,background .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-call{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(var(--rf-red),.36)}
.btn-call:hover{background:var(--red-hi)}
.btn-ghost{border:1px solid var(--line);color:var(--alabaster);background:rgba(85,16,13,.35)}
.btn-ghost:hover{border-color:var(--red);color:var(--red-lift)}
.note{margin:18px 0 0;color:var(--mut);font-size:14px}
.vid-toggle{position:absolute;right:16px;bottom:16px;z-index:3;background:rgba(18,5,4,.76);color:var(--alabaster);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}

/* ---- sections ---- */
section{padding:66px 0;position:relative}
section.alt{background:rgba(85,16,13,.42);border-block:1px solid var(--line)}
h2{font-family:"Bay Display",Impact,sans-serif;font-style:italic;text-transform:uppercase;
  font-size:clamp(27px,4.4vw,42px);line-height:1;margin:0 0 14px}
h3{font-family:"Bay Text",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:17px;margin:0 0 8px}
.intro{color:var(--mut);max-width:60ch;margin:0 0 30px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}

/* ---- PAPER sections: the clean white bands from bay-motors.com.
       Opaque, so the red aurora stops at their edge, and marked .no-aurora
       in the markup so no beams are injected behind them. ---- */
section.light{background:var(--paper);color:var(--ink);border-block:1px solid var(--line-light)}
section.light h2{color:var(--ink)}
section.light h3{color:var(--ink)}
section.light .intro{color:var(--ink-mut)}
section.light .eyebrow{color:var(--red-ink)}
section.light .lede{color:var(--ink-mut)}
section.light h1{color:var(--ink)}
section.light h1 em{color:var(--red)}
section.light ul.list li{color:var(--ink)}
section.light ul.list li::before{background:var(--red)}
section.light .card{background:#fff;border:1px solid var(--line-light);border-left:3px solid var(--red);
  box-shadow:0 2px 4px rgba(20,23,28,.05), 0 12px 28px rgba(20,23,28,.09)}
section.light .card p{color:var(--ink-mut)}
section.light .card .num{color:var(--red-ink)}
section.light .callout{background:#fff;border:1px solid var(--line-light);
  box-shadow:0 2px 4px rgba(20,23,28,.05), 0 12px 28px rgba(20,23,28,.09);color:var(--ink)}
section.light .callout strong{color:var(--red-ink)}
section.light .callout p{color:var(--ink-mut)}
section.light .btn-ghost{border-color:var(--line-light);color:var(--ink);background:transparent}
section.light .btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
section.light .big-num{color:var(--ink)}
section.light a{color:var(--red-ink)}
section.light .spot-sheen{background:radial-gradient(360px circle at calc(var(--sx,50%) + 30px) calc(var(--sy,50%) + 30px),
  rgba(var(--rf-red),.09), transparent 62%)}

/* ---- surfaces: lifted so cards read as objects on the page ---- */
.card{background:linear-gradient(180deg,rgba(58,15,11,.86) 0%,rgba(38,10,7,.86) 100%);
  border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;padding:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px rgba(0,0,0,.42)}
.card p{margin:0;color:var(--mut);font-size:15.5px}
.card .num{font-family:"Bay Display",Impact,sans-serif;font-style:italic;color:var(--accent);font-size:15px;display:block;margin-bottom:6px}
ul.list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
ul.list li{padding-left:26px;position:relative;color:rgba(217,217,217,.86)}
ul.list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--red);border-radius:2px}
.callout{background:linear-gradient(180deg,rgba(58,15,11,.86) 0%,rgba(38,10,7,.86) 100%);
  border:1px solid var(--line);border-radius:14px;padding:28px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px rgba(0,0,0,.42)}
.callout strong{color:var(--accent)}
.big-num{font-family:"Bay Display",Impact,sans-serif;font-style:italic;font-size:clamp(30px,5vw,46px);
  color:var(--alabaster);text-decoration:none;display:inline-block}

/* ---- per-section rising beams ---- */
.has-aurora{position:relative;overflow:hidden}
.has-aurora > .wrap{position:relative;z-index:1}
.ambient-beams,.ambient-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.ambient-beams{overflow:hidden}
.ambient-beams span{position:absolute;bottom:-20%;height:65%;border-radius:2px;opacity:0;
  background:linear-gradient(to top,
    rgba(var(--rf-red),0) 0%, rgba(var(--rf-red),.50) 40%,
    rgba(255,110,124,.68) 52%, rgba(255,180,190,.60) 60%, rgba(var(--rf-red),0) 100%);
  animation-name:auroraDrift;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  will-change:transform,opacity}
@keyframes auroraDrift{
  0%{transform:translateY(115%);opacity:0}
  25%{opacity:.85} 55%{opacity:.55} 80%{opacity:.2}
  100%{transform:translateY(-190%);opacity:0}}
.ambient-glow{background:radial-gradient(ellipse 60% 55% at var(--gx,30%) 100%,
  rgba(var(--rf-red),.24) 0%, rgba(var(--rf-red),.10) 50%, rgba(var(--rf-red),0) 75%);
  animation:auroraPulse var(--gdur,16s) ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes auroraPulse{from{transform:scale(.94);opacity:.55}to{transform:scale(1.06);opacity:1}}
.aurora-paused .ambient-beams span,.aurora-paused .ambient-glow{animation-play-state:paused}

/* ---- spotlight cards ---- */
.spot{position:relative}
.spot-ring,.spot-sheen{position:absolute;border-radius:inherit;opacity:var(--spot-o,0);
  transition:opacity .5s ease;pointer-events:none}
.spot-ring{inset:-1px;padding:1px;
  background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),
    rgba(255,116,138,1), rgba(var(--rf-red),.5) 42%, transparent 74%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;z-index:2}
.spot-sheen{inset:-30px;border-radius:0;
  background:radial-gradient(360px circle at calc(var(--sx,50%) + 30px) calc(var(--sy,50%) + 30px),
    rgba(var(--rf-red),.16), transparent 62%);z-index:0}

/* ---- footer + sticky bar ---- */
footer{background:rgba(13,16,22,.96);border-top:1px solid var(--line);padding:46px 0 28px;color:var(--mut);font-size:15px;position:relative}
.fgrid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:26px}
footer h3{color:#fff}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{color:var(--mut);text-decoration:none}
footer a:hover{color:var(--red-lift)}
.fbot{border-top:1px solid var(--line);padding-top:18px;font-size:13.5px}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;height:var(--bar);
  border-top:1px solid var(--line);background:rgba(13,16,22,.98)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:800;font-size:17px}
.callbar .cb-call{background:var(--red);color:#fff}
.callbar .cb-text{color:#fff}

@media (min-width:900px){.callbar{display:none}body{padding-bottom:0}}
@media (max-width:899px){
  .nav{display:none}
  .hdr-call{margin-left:auto;padding:9px 14px;font-size:15px}
  .hero::after{background:linear-gradient(180deg,rgba(18,5,4,.74) 0%,rgba(18,5,4,.92) 70%)}
  section{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){
  .hero video{display:none}
  .ambient-beams,.ambient-glow{display:none}
  body::after{animation:none}
  .logo{animation:none;text-shadow:0 0 8px rgba(var(--rf-red),.5)}
  .btn:hover{transform:none}
  .spot-ring,.spot-sheen{transition:none}
}