/* =========================================================================
   DAL Autoservice — Rebrand design system
   DAL Autoservice design system
   Graphite + brand red · modern workshop · Sora + Manrope
   ========================================================================= */

:root{
  color-scheme:light;
  /* surfaces — light */
  --bg:        #f1f3f7;
  --bg-1:      #ffffff;
  --bg-2:      #ffffff;
  --bg-3:      #eef1f6;
  --panel:     rgba(15,23,42,.018);
  --line:      rgba(15,23,42,.13);
  --line-2:    rgba(15,23,42,.07);

  /* ink */
  --ink:       #0e1726;
  --ink-dim:   #4b566b;
  --ink-faint: #8a93a4;

  /* DAL red */
  --blue:      #e31f2b;
  --blue-2:    #b9131e;
  --blue-br:   #c51622;
  --cyan:      #ff5a61;
  --glow:      rgba(227,31,43,.32);
  --glow-soft: rgba(227,31,43,.10);

  /* type */
  --display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.9rem,7vw,6.2rem);
  --fs-h2: clamp(2.3rem,4.6vw,4rem);
  --fs-h3: 1.125rem;
  --fs-h4: 1rem;
  --fs-h5: .95rem;
  --fs-h6: .85rem;

  /* metrics */
  --wrap: 1240px;
  --r:   14px;
  --r-lg: 22px;
  --btn-sm: 32px;
  --btn-md: 48px;
  --btn-lg: 52px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:        #080b10;
  --bg-1:      #0e131c;
  --bg-2:      #111827;
  --bg-3:      #1a2230;
  --panel:     rgba(255,255,255,.035);
  --line:      rgba(255,255,255,.16);
  --line-2:    rgba(255,255,255,.08);
  --ink:       #f5f7fb;
  --ink-dim:   #c2cad8;
  --ink-faint: #818b9d;
  --glow:      rgba(227,31,43,.42);
  --glow-soft: rgba(227,31,43,.16);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  letter-spacing:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:90;
  transform-origin:left center;
  transform:scaleX(var(--scroll-progress,0));
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
::selection{ background:var(--blue); color:#fff }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
p,h1,h2,h3,li,a,button{ overflow-wrap:break-word }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit }

/* grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px }

/* ---------- typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue-br);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--blue));
}
.eyebrow.center::after{
  content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--blue),transparent);
}
h1,h2,h3,h4,h5,h6{ font-family:var(--display); font-weight:700; line-height:1.12; letter-spacing:0 }
h1{ font-size:var(--fs-h1) }
h2{ font-size:var(--fs-h2) }
h3{ font-size:var(--fs-h3) }
h4{ font-size:var(--fs-h4) }
h5{ font-size:var(--fs-h5) }
h6{ font-size:var(--fs-h6) }
.h-xl{ font-size:var(--fs-h1); line-height:1.02 }
.h-lg{ font-size:var(--fs-h2); line-height:1.02 }
.h-md{ font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.06 }
.lead{ font-size:1.12rem; color:var(--ink-dim); max-width:min(60ch,100%) }
.txt-blue{ color:var(--blue-br) }
.muted{ color:var(--ink-dim) }
.faint{ color:var(--ink-faint) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--btn-md); height:var(--btn-md); padding:0 22px; border-radius:100px; font-weight:700; font-size:.95rem;
  letter-spacing:0; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .4s var(--ease); flex:none }
.btn svg path,
.btn svg circle,
.btn svg line,
.btn svg polyline{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.btn-primary{
  background:var(--blue); color:#fff;
  box-shadow:0 8px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -10px var(--glow) }
.btn-primary:hover svg{ transform:translateX(4px) }
.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--blue); background:var(--glow-soft); transform:translateY(-3px) }
.btn-ghost:hover svg{ transform:translateX(4px) }
.btn-sm{ min-height:var(--btn-sm); height:var(--btn-sm); padding:0 14px; font-size:.86rem }
.btn-lg{ min-height:var(--btn-lg); height:var(--btn-lg); padding:0 28px; font-size:1rem }

/* shimmer on primary */
.btn-primary::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .7s var(--ease);
}
.btn-primary:hover::after{ transform:translateX(120%) }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; transition:all .4s var(--ease);
  background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.hdr.scrolled{
  background:color-mix(in srgb, var(--bg-1) 72%, transparent);
  border-bottom-color:var(--line-2); box-shadow:0 8px 30px -22px rgba(15,23,42,.4);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px; transition:height .4s var(--ease) }
.hdr.scrolled .hdr-in{ height:66px }

.brand{ display:flex; align-items:center; gap:13px }
.brand-logo{ width:auto; max-width:178px; height:auto; max-height:52px; display:block }
.footer-logo{ width:190px }
.brand-mark{ width:42px; height:42px; flex:none }
.brand-txt{ display:flex; flex-direction:column; line-height:1 }
.brand-txt b{ font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:0 }
.brand-txt span{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px }

.nav{ display:flex; gap:6px; margin-left:auto; margin-right:8px }
.nav a{
  padding:9px 16px; border-radius:100px; font-weight:600; font-size:.93rem; color:var(--ink-dim);
  position:relative; transition:color .25s; white-space:nowrap; overflow-wrap:normal;
}
.nav a:hover{ color:var(--ink) }
.nav a.active{ color:var(--ink) }
.hdr:not(.scrolled) .nav a{ color:var(--ink-dim); text-shadow:none }
.hdr:not(.scrolled) .nav a:hover,
.hdr:not(.scrolled) .nav a.active{ color:var(--ink) }
.nav a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--blue); border-radius:2px;
}
.hdr-cta{ display:flex; align-items:center; gap:12px }
.hdr-cta .btn{ min-height:0; max-height:var(--btn-lg); height:var(--btn-lg); padding-top:0; padding-bottom:0 }
.hdr-cta .btn-icon-only{ width:var(--btn-lg); padding-left:0; padding-right:0; justify-content:center; border-radius:50% }
.hdr-cta .btn-icon-only svg{ margin:0 }
.theme-control{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:6px 8px 6px 10px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(145deg,var(--bg-3),var(--bg-1)); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 34px -26px rgba(15,23,42,.7);
}
.theme-control__label{
  color:var(--ink-faint); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.theme-control select{
  min-width:92px; height:34px; border:0; border-radius:8px; outline:0;
  background:var(--bg-1); color:var(--ink); font:inherit; font-size:13px; font-weight:700;
  padding:0 28px 0 10px; cursor:pointer;
}
.theme-control select:focus-visible{ box-shadow:0 0 0 3px var(--glow-soft) }
.hdr:not(.scrolled) .btn-ghost{
  color:var(--ink);
  border-color:var(--line);
  background:rgba(255,255,255,.58);
}
.hdr:not(.scrolled) .btn-ghost:hover{ background:var(--glow-soft); border-color:var(--blue) }
html[data-theme="dark"] .hdr:not(.scrolled) .btn-ghost{ background:rgba(14,19,28,.64) }
html[data-theme="dark"] .theme-control{ background:linear-gradient(145deg,#252b35,#111827) }
html[data-theme="dark"] .theme-control select{ background:#111827 }
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px }
.burger svg{ width:20px; height:20px }

/* mobile menu */
.mobile{
  position:fixed; inset:0; z-index:55; background:color-mix(in srgb, var(--bg-1) 96%, transparent); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; padding:90px 32px 32px; gap:6px;
  transform:translateY(-100%); opacity:0; pointer-events:none; transition:all .5s var(--ease);
}
.mobile.open{ transform:translateY(0); opacity:1; pointer-events:auto }
.mobile a{ font-family:var(--display); font-size:2rem; font-weight:700; letter-spacing:0; padding:14px 0; border-bottom:1px solid var(--line-2) }
.mobile .btn{
  width:fit-content;
  max-width:100%;
  margin-top:22px;
  padding:0 28px;
  border-bottom:0;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1;
  justify-content:center;
}
.theme-control-footer{ order:3; margin-left:auto }
.m-close{ position:absolute; top:24px; right:28px; width:46px; height:46px; border:1px solid var(--line); border-radius:50% }

/* ---------- section frame ---------- */
.section{ padding:clamp(80px,11vw,150px) 0; position:relative }
.sec-head{ max-width:760px; margin-bottom:clamp(48px,6vw,76px) }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center }
.sec-head .eyebrow{ margin-bottom:22px }
.sec-head .lead{ margin-top:22px }
.sec-head.center .lead{ margin-left:auto; margin-right:auto }

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal][data-d="1"]{ transition-delay:.08s }
[data-reveal][data-d="2"]{ transition-delay:.16s }
[data-reveal][data-d="3"]{ transition-delay:.24s }
[data-reveal][data-d="4"]{ transition-delay:.32s }
[data-reveal][data-d="5"]{ transition-delay:.4s }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
}

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line-2); padding:26px 0; background:var(--bg-1); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marquee-track{ display:flex; gap:54px; width:max-content; animation:marq 32s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-item{ display:inline-flex; align-items:center; gap:16px; font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:0; color:var(--ink); white-space:nowrap }
.marquee-item span{ color:var(--ink-faint) }
.marquee-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; box-shadow:0 0 14px var(--glow) }
@keyframes marq{ to{ transform:translateX(calc(-50% - 27px)) } }

/* ---------- footer ---------- */
.footer{ background:var(--bg-1); border-top:1px solid var(--line-2); padding:80px 0 36px }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:42px }
.footer h4{ font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px; font-weight:700 }
.footer-links{ display:flex; flex-direction:column; gap:12px }
.footer-links a{ color:var(--ink-dim); transition:color .25s, transform .25s; width:fit-content }
.footer-links a:hover{ color:var(--blue-br); transform:translateX(4px) }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:64px; padding-top:28px; border-top:1px solid var(--line-2); color:var(--ink-faint); font-size:13.5px }
.social{ display:flex; gap:10px }
.social a{ width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:all .3s var(--ease) }
.social a:hover{ border-color:var(--blue); background:var(--glow-soft); transform:translateY(-3px) }
.social svg{ width:17px; height:17px }

.contact-grid,
.legal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.legal-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.legal-grid .tst-card{ gap:12px }
.legal-grid .tst-card h3{ font-size:var(--fs-h3); margin-bottom:4px }
.legal-grid .tst-card p + p{ margin-top:10px }
.map-frame{
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  min-height:360px;
  background:var(--bg-3);
}
.map-frame iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
}
.article-hero{
  position:relative;
  padding:clamp(64px,9vw,116px) 0 clamp(42px,6vw,74px);
  overflow:hidden;
}
.article-title{
  margin:22px 0 20px;
  max-width:100%;
  font-size:clamp(2.5rem,8vw,5.4rem);
  line-height:1.04;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(240px,320px);
  gap:clamp(42px,7vw,92px);
  align-items:start;
  justify-content:center;
}
.article-main{
  max-width:760px;
  font-size:1.06rem;
  line-height:1.78;
}
.article-main h2{ font-size:clamp(1.55rem,2.2vw,2.15rem); margin:48px 0 14px; line-height:1.12 }
.article-main h2:first-child{ margin-top:0 }
.article-main h3{ font-size:var(--fs-h3); margin:26px 0 10px }
.article-main p{ color:var(--ink-dim); margin:0 0 22px }
.article-main a{ color:var(--blue-br); font-weight:700 }
.article-main ul{ margin:16px 0 30px; padding-left:1.25em; color:var(--ink-dim) }
.article-main li{ margin-bottom:11px; padding-left:4px }
.article-side{
  position:sticky;
  top:92px;
  display:grid;
  gap:34px;
  align-self:start;
}
.side-card{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
}
.side-card h3{ font-size:var(--fs-h3); margin-bottom:14px }
.side-card p{ color:var(--ink-dim) }
.side-card a:not(.btn){ display:block; color:var(--ink-dim); padding:10px 0; border-bottom:1px solid var(--line-2); line-height:1.35 }
.side-card a:not(.btn):hover{ color:var(--blue-br) }
.side-card .btn{ margin-top:4px }
.article-image{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/9;
  margin-top:30px;
}
.article-image img{ width:100%; height:100%; object-fit:cover }
.service-card-link{ display:flex; flex-direction:column; color:inherit }

/* ---------- floating book btn ---------- */
.float-book{
  position:fixed; right:26px; bottom:26px; z-index:45;
  display:inline-flex; align-items:center; justify-content:center; gap:11px; height:var(--btn-md); padding:0 22px; border-radius:100px;
  background:var(--blue); color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:0 14px 40px -8px var(--glow);
  transform:translateY(140%); transition:transform .55s var(--ease);
  overflow:visible;
}
.float-book.show{ transform:translateY(0) }
.float-book svg{ width:18px; height:18px; flex:none }
.float-book svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.float-book::before{
  content:""; position:absolute; inset:-4px; border-radius:100px; border:1px solid var(--blue);
  opacity:.5; animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.5 } 100%{ transform:scale(1.18); opacity:0 } }

/* ---------- utility glow blobs ---------- */
.glow-blob{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0 }

@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr }
  .contact-grid,.legal-grid{ grid-template-columns:1fr }
  .article-layout{ grid-template-columns:1fr }
  .article-main{ max-width:none }
  .article-side{ position:static; border-top:1px solid var(--line-2); padding-top:28px }
  .article-title{ font-size:clamp(2.3rem,10vw,4.2rem) }
}
@media (max-width:860px){
  .nav, .hdr-cta .btn{ display:none }
  .burger{ display:flex }
}
@media (max-width:620px){
  .wrap{ padding:0 20px }
  .hdr-in{ min-width:0 }
  .brand-logo{ max-width:160px; max-height:52px }
  .hdr-cta{ margin-left:auto }
  .burger{ background:var(--bg-1); border-color:var(--line); color:var(--ink) }
  .hdr:not(.scrolled) .burger{ background:color-mix(in srgb, var(--bg-1) 72%, transparent); border-color:var(--line); color:var(--ink) }
  .footer-grid{ grid-template-columns:1fr }
  .float-book{
    right:max(18px, env(safe-area-inset-right));
    bottom:max(18px, env(safe-area-inset-bottom));
    width:58px;
    height:58px;
    padding:0;
    border-radius:50%;
    gap:0;
  }
  .float-book span{ display:none }
  .float-book svg{ width:22px; height:22px }
  .article-title{ font-size:clamp(2rem,12vw,3.3rem) }
}