/* The Ride ATL — site styles v1.1 (Phase 1: faithful rebuild of the Duda layout, chrome palette, Exo 2) */
:root{
--ink:#000; --ink-2:#0b0b0c; --ink-3:#151517; --line:#2a2a2e;
--text:#f2f3f5; --muted:#b4b8be; --dim:#8a8f96;
--chrome:#c7cbd1; --chrome-2:#eef0f2; --chrome-ink:#5d6168;
--chrome-grad:linear-gradient(180deg,#fbfcfd 0%,#d7dbe0 38%,#9ca2aa 52%,#c9cdd3 70%,#eef0f2 100%);
--card:#e9eaec; --card-ink:#1a1b1e;
--max:1180px; --radius:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--ink);color:var(--text);font-family:"Exo 2",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--chrome-2)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.center{text-align:center}
.muted{color:var(--muted)}
h1,h2,h3,h4{font-family:"Exo 2",sans-serif;margin:0 0 .5em;line-height:1.15}

/* section titles: bold uppercase, chrome, underlined (Duda style) */
.sec-title{font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.2rem);letter-spacing:.02em;text-align:center;margin-bottom:24px}
.sec-title span{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent;border-bottom:3px solid var(--chrome);padding-bottom:2px;line-height:1.5}
.sub-title{font-weight:700;color:var(--chrome);font-size:1.35rem;text-align:center;margin:28px 0 12px}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:#000;border-bottom:1px solid var(--line)}
.site-header .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:124px;max-width:1456px;margin:0 auto;padding:0 28px}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:24px}
.hdr-left{justify-content:space-between}
.hdr-right{justify-content:space-around}
.brand img{height:100px;width:auto}
.brand .txt{font-weight:800;font-size:1.6rem;color:#fff;text-decoration:none}
.menu-btn{background:none;border:0;color:#fff;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px}
.menu-btn i{display:block;width:26px;height:2px;background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-family:"Exo 2",sans-serif;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;border:1px solid var(--chrome);color:var(--chrome-2);background:transparent;cursor:pointer;text-decoration:none;transition:.2s ease;border-radius:var(--radius)}
.btn:hover{background:rgba(200,205,212,.12)}
.btn-sm{padding:8px 14px;font-size:.66rem;line-height:1.2}
.btn-chrome{background:var(--chrome-grad);color:#000;border-color:#e3e6ea;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.btn-chrome:hover{filter:brightness(1.07);background:var(--chrome-grad)}
@media (max-width:760px){
.site-header .bar{height:92px;padding:0 14px}
.brand img{height:68px}
}

/* drawer */
.drawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:.25s}
.drawer nav{position:absolute;top:0;left:0;bottom:0;width:min(320px,86vw);background:#0b0b0c;border-right:1px solid var(--line);padding:26px 28px;transform:translateX(-100%);transition:.25s ease;display:flex;flex-direction:column;gap:4px;overflow:auto}
.drawer.open{pointer-events:auto}
.drawer.open .scrim{opacity:1}
.drawer.open nav{transform:none}
.drawer nav a{color:var(--text);text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-weight:500;font-size:.9rem;padding:11px 0;border-bottom:1px solid #1c1c20}
.drawer nav a:hover{color:#fff}
.drawer .close{align-self:flex-end;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;margin-bottom:10px}

/* hero */
.hero{position:relative;min-height:calc(100vh - 124px);max-height:900px;display:flex;align-items:center;justify-content:center;text-align:center;background:#05070b center/cover no-repeat;background-image:url(/assets/img/hero.webp)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.35) 60%,rgba(0,0,0,.75))}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .inner{position:relative;z-index:1;padding:40px 20px}
.hero h1{font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(2.1rem,5.4vw,4.1rem);letter-spacing:.01em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6);margin:0}
.hero .tag{font-weight:700;font-style:italic;font-size:clamp(1.1rem,2.2vw,1.6rem);margin-top:14px;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* generic section */
section{padding:84px 0;position:relative}
.bg-photo{background:#000 center/cover no-repeat}
.bg-photo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72)}
.bg-photo>.wrap{position:relative;z-index:1}

/* about */
.about p{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;color:#dfe1e4}
.about .cta-line{font-weight:600;font-style:italic;text-transform:uppercase;letter-spacing:.03em;margin-top:22px;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* features over dash */
.features{background-image:url(/assets/img/dash.webp)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;text-align:center}
.feat-grid svg{width:44px;height:44px;margin:0 auto 12px;stroke:var(--chrome);fill:none;stroke-width:1.4}
.feat-grid h4{font-weight:700;text-transform:uppercase;color:var(--chrome-2);font-size:1.15rem;letter-spacing:.04em;margin-bottom:10px}
.feat-grid .lead{font-weight:600;color:#fff}
.feat-grid p{color:#d4d7db;font-size:.95rem}
@media (max-width:860px){.feat-grid{grid-template-columns:1fr;gap:40px}}

/* services */
.svc-note{text-align:center;font-weight:600;color:var(--chrome);font-size:.95rem;margin-bottom:34px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:960px;margin:0 auto}
.svc-card{background:var(--card);color:var(--card-ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.svc-card img{aspect-ratio:3/2;object-fit:cover;width:100%;background:#222}
.svc-card .body{padding:18px 18px 22px;text-align:center}
.svc-card h3{font-weight:500;text-transform:uppercase;font-size:1rem;letter-spacing:.05em;margin-bottom:12px}
.svc-card .strong{font-weight:700;font-size:.92rem}
.svc-card ul{list-style:none;padding:0;margin:10px 0 0;font-style:italic;font-size:.9rem}
.svc-card .it{font-style:italic;font-size:.9rem}
@media (max-width:860px){.svc-grid{grid-template-columns:1fr;max-width:420px}}

/* packages (tabs) over grill */
.packages{background-image:url(/assets/img/grill.webp)}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px;margin:6px 0 30px}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:#fff;font-family:"Exo 2",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;padding:8px 14px;cursor:pointer}
.tabs button[aria-selected=true]{border-bottom-color:var(--chrome);background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tabpanel{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;max-width:980px;margin:0 auto}
.tabpanel.active{display:grid}
.tabpanel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:#222}
.tabpanel h3{font-weight:600;font-size:1.35rem;color:#fff}
.tabpanel p{color:#dfe1e4}
@media (max-width:760px){.tabpanel{grid-template-columns:1fr}.tabpanel.active{display:grid}}

/* reviews */
.reviews{background:#000}
.carousel{position:relative;max-width:820px;margin:0 auto;text-align:center;min-height:190px}
.slide{display:none}
.slide.active{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.slide blockquote{margin:0;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:400;color:#fff}
.slide cite{display:block;margin-top:14px;font-style:normal;font-weight:600;color:var(--chrome);letter-spacing:.08em;text-transform:uppercase}
.dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--chrome);background:transparent;cursor:pointer;padding:0}
.dots button[aria-current=true]{background:var(--chrome)}
.stars{font-size:2.6rem;letter-spacing:.12em;text-align:center;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;margin-top:46px}
.review-cta{display:block;text-align:center;font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.8rem);margin-top:12px;text-decoration:none}
.review-cta span{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent;border-bottom:3px solid var(--chrome)}

/* contact row */
.contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center;max-width:900px;margin:0 auto}
.contact-row svg{width:34px;height:34px;stroke:var(--chrome);fill:none;stroke-width:1.3;margin:0 auto 12px}
.contact-row a,.contact-row .t{color:var(--chrome-2);font-weight:500;text-decoration:none}
.contact-row .cap{text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;font-weight:600;color:var(--chrome)}
@media (max-width:700px){.contact-row{grid-template-columns:1fr}}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:26px 0 30px;background:#000;font-size:.78rem;color:var(--muted)}
.site-footer .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.site-footer a:hover{color:#fff}
.site-footer .links{display:flex;gap:26px;flex-wrap:wrap}
.social{display:flex;gap:14px}
.social svg{width:18px;height:18px;fill:var(--chrome)}
@media (max-width:700px){.site-footer .row{flex-direction:column;text-align:center}}

/* inner pages (book, sms, legal) */
.page-head{padding:70px 0 30px;text-align:center;background:radial-gradient(900px 300px at 50% 0%,rgba(200,205,212,.12),transparent 60%)}
.page-head h1{font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.2rem)}
.page-head .lead{max-width:680px;margin:0 auto;color:var(--muted)}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.3em;font-size:.75rem;font-weight:600;color:var(--chrome);margin-bottom:10px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.card{background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:28px}
.card h3{font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.display{font-weight:700;font-size:1.5rem}
.legal{max-width:820px;margin:0 auto}
.legal h2{font-weight:700;font-size:1.3rem;margin-top:2.2em;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.legal h3{font-size:1rem;margin-top:1.4em;color:var(--chrome-2)}
.legal li{margin-bottom:.5em}
.legal .box{border:1px solid var(--chrome-ink);background:rgba(200,205,212,.06);border-radius:10px;padding:22px 24px;margin:24px 0}

/* forms */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
label{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
input,select,textarea{width:100%;background:#0c0c0e;border:1px solid var(--line);color:#fff;border-radius:6px;padding:13px 14px;font:inherit;font-weight:400;font-size:1rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--chrome)}
textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:6px;background:#0c0c0e;text-transform:none;letter-spacing:0}
.check input{width:20px;height:20px;margin-top:3px;flex:0 0 auto;accent-color:var(--chrome)}
.check span{font-size:.93rem;color:#dadde1;font-weight:400}
.fine{font-size:.85rem;color:var(--muted)}
.notice{padding:14px 16px;border-radius:6px;margin-top:6px;display:none}
.notice.ok{display:block;background:rgba(80,170,110,.12);border:1px solid rgba(80,170,110,.5);color:#bfe8cc}
.notice.err{display:block;background:rgba(210,80,80,.12);border:1px solid rgba(210,80,80,.5);color:#f3c1c1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-gold{background:var(--chrome-grad);color:#000;border-color:#e3e6ea}
.svc-card img,.tabpanel img{height:auto}
.contact-row svg{display:block}
.brand{text-decoration:none}

/* ==========================================================================
   Motion kit v1.3 — IntelAgent effects translated to The Ride's chrome/silver
   (BL-376 Phase 3a). Source patterns in the IntelAgent app:
   flyover dropdowns (CustomizableDashboard), .hover-lift, tracking-dot halo +
   pulse ring, glass surfaces (surface-raised/95 + backdrop-blur), 3D Command
   Center glass depth. Each effect is gated by an html.fx-<name> class that
   assets/site.js sets, so any one can be switched off in one place.
   Hover-only effects apply on devices that can hover; all motion stops under
   prefers-reduced-motion.
   ========================================================================== */
:root{
--ease-out:cubic-bezier(.22,1,.36,1);
--glow:0 0 0 1px rgba(222,226,231,.6),0 0 26px rgba(214,218,224,.22),0 22px 44px rgba(0,0,0,.6);
--sheen:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.6) 47%,rgba(255,255,255,.12) 55%,transparent 68%);
}

/* 1 · Glass header — frosted, see-through once the page scrolls */
.fx-glass .site-header{transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.fx-glass .site-header.is-scrolled{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 1px 0 rgba(214,218,224,.16),0 12px 32px rgba(0,0,0,.45)}

/* 2 · Chrome sheen — a band of light sweeps across buttons */
.fx-sheen .btn{position:relative;overflow:hidden;isolation:isolate;transition:background-color .25s ease,border-color .25s ease,box-shadow .35s var(--ease-out),transform .35s var(--ease-out),filter .25s ease}
.fx-sheen .btn::after{content:"";position:absolute;inset:-2px;background:var(--sheen);transform:translateX(-130%);pointer-events:none;z-index:-1}
@media (hover:hover){
.fx-sheen .btn:hover{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(214,218,224,.28);transform:translateY(-1px)}
.fx-sheen .btn:hover::after{transform:translateX(130%);transition:transform .8s var(--ease-out)}
}
.fx-sheen .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 3 · Flyover menu — frosted drawer, links cascade in one by one */
.fx-flyover .drawer .scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .45s var(--ease-out)}
.fx-flyover .drawer nav{background:rgba(11,11,12,.78);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-right:1px solid rgba(214,218,224,.18);box-shadow:24px 0 60px rgba(0,0,0,.55);transition:transform .55s var(--ease-out)}
.fx-flyover .drawer nav a{position:relative;opacity:0;transform:translateX(-16px);transition:opacity .35s ease,transform .45s var(--ease-out),color .25s ease,padding-left .3s var(--ease-out)}
.fx-flyover .drawer.open nav a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 60ms + 140ms),calc(var(--i,0) * 60ms + 140ms),0s,0s}
.fx-flyover .drawer nav a::before{content:"";position:absolute;left:-28px;top:50%;width:3px;height:0;background:var(--chrome-grad);transform:translateY(-50%);transition:height .3s var(--ease-out)}
.fx-flyover .drawer nav a:hover,.fx-flyover .drawer nav a:focus-visible{padding-left:10px;color:#fff}
.fx-flyover .drawer nav a:hover::before,.fx-flyover .drawer nav a:focus-visible::before{height:62%}

/* 4 · Hover-lift + chrome glow — service cards rise and glow, photo eases in
   5 · Spotlight — soft light follows the cursor across the card
   6 · 3D tilt — card tips toward the cursor (the 3D Command Center depth) */
.svc-card{position:relative;--lift:0px;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.svc-card img{transition:transform .9s var(--ease-out)}
.svc-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.34),rgba(255,255,255,.08) 38%,transparent 62%);mix-blend-mode:soft-light}
@media (hover:hover){
.fx-lift .svc-card:hover{--lift:-8px;box-shadow:var(--glow)}
.fx-lift .svc-card:hover img{transform:scale(1.05)}
.fx-spot .svc-card:hover::after{opacity:1}
.fx-lift .tabpanel img{transition:box-shadow .45s var(--ease-out),transform .45s var(--ease-out)}
.fx-lift .tabpanel img:hover{box-shadow:var(--glow);transform:translateY(-4px)}
}
.fx-tilt .svc-card{transition:transform .2s ease-out,box-shadow .45s var(--ease-out)}

/* 7 · Icon halo — Fleet / Drivers / VIP icons glow with a pulse ring
   (the app's tracking-dot halo, in chrome) */
.feat-grid>div{position:relative}
.feat-grid svg{transition:filter .4s ease,transform .45s var(--ease-out),stroke .3s ease}
.feat-grid>div::before{content:"";position:absolute;left:50%;top:22px;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;border:1px solid var(--chrome);opacity:0;pointer-events:none}
@keyframes fx-ring{0%{transform:scale(.7);opacity:.6}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
@media (hover:hover){
.fx-halo .feat-grid>div:hover svg{stroke:#fff;filter:drop-shadow(0 0 10px rgba(236,239,242,.7));transform:scale(1.08)}
.fx-halo .feat-grid>div:hover::before{animation:fx-ring 1.9s ease-out infinite}
}

/* 8 · Tab highlight — chrome underline grows on hover, package panels fly in */
.fx-tabs .tabs button{position:relative;border-bottom-color:transparent !important;transition:color .25s ease,text-shadow .3s ease}
.fx-tabs .tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:-3px;height:3px;background:var(--chrome-grad);transform:scaleX(0);transition:transform .4s var(--ease-out);border-radius:2px}
.fx-tabs .tabs button[aria-selected=true]::after{transform:scaleX(1)}
@media (hover:hover){.fx-tabs .tabs button:hover::after{transform:scaleX(1)}.fx-tabs .tabs button[aria-selected=false]:hover{text-shadow:0 0 14px rgba(236,239,242,.55)}}
@keyframes fx-flyin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.fx-tabs .tabpanel.active{animation:fx-flyin .65s var(--ease-out)}

/* 9 · Scroll reveal — sections rise into view in a staggered cascade */
.fx-reveal .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.fx-reveal .rv.in{opacity:1;transform:none}
.fx-reveal .svc-card.rv.in{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift))}

/* 10 · Contact & social glow — icons lift and glow */
.social a,.contact-row>div svg{transition:transform .35s var(--ease-out),filter .35s ease}
.social svg{transition:fill .25s ease}
@media (hover:hover){
.fx-social .social a:hover{transform:translateY(-3px);filter:drop-shadow(0 0 8px rgba(236,239,242,.65))}
.fx-social .social a:hover svg{fill:#fff}
.fx-social .contact-row>div:hover svg{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(236,239,242,.6))}
}

/* ==========================================================================
   Pop accents v1.3 (Val, 2026-09-27) — two locked IntelAgent Peacock tokens
   (Design System v1.07):
   · AMBER  #F0B429 — goes wherever the old Duda site used its yellow/gold:
     "Everyone Is A VIP!", section titles + underlines, Our Evolution / Our
     Mission, the VIP-program line, Fleet / Drivers / VIP headings, the
     on-demand note, the review call-to-action, and the contact row.
   · TURQUOISE (Peacock Teal) #03B7C9 — the hover + selection highlight.
     Selection is "hollow": only the icon's outline and its title take the
     colour, never a solid fill.
   Contrast on black: amber 11.3:1, turquoise 8.6:1 (both clear WCAG AAA).
   On the light service cards the title uses the AAA teal #006277 (5.8:1).
   ========================================================================== */
:root{
--amber:#F0B429;
--amber-grad:linear-gradient(180deg,#FFE7A3 0%,#F7C94E 34%,#F0B429 52%,#C98E12 74%,#F5C84A 100%);
--turq:#03B7C9;
--turq-ink:#006277;
--turq-glow:0 0 0 1px rgba(3,183,201,.85),0 0 28px rgba(3,183,201,.32),0 22px 44px rgba(0,0,0,.6);
}

/* Amber — where the old site was yellow */
.hero .tag,.about .cta-line,.sec-title span,.review-cta span{background:var(--amber-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-title span,.review-cta span{border-bottom-color:var(--amber)}
.sub-title,.svc-note,.feat-grid h4{color:var(--amber)}
.contact-row a,.contact-row .t,.contact-row .cap{color:var(--amber)}
.feat-grid h4,.contact-row a,.contact-row .t,.contact-row .cap{transition:color .3s ease}

/* Turquoise — hover + selection highlight (hollow: outline + title only) */
.feat-grid svg,.contact-row svg{transition:stroke .3s ease,filter .4s ease,transform .45s var(--ease-out)}
@media (hover:hover){
.feat-grid>div:hover svg{stroke:var(--turq)}
.feat-grid>div:hover h4{color:var(--turq)}
.fx-halo .feat-grid>div:hover svg{stroke:var(--turq);filter:drop-shadow(0 0 10px rgba(3,183,201,.65))}
.contact-row>div:hover svg{stroke:var(--turq)}
.contact-row>div:hover a,.contact-row>div:hover .t,.contact-row>div:hover .cap{color:var(--turq)}
.fx-social .contact-row>div:hover svg{filter:drop-shadow(0 0 10px rgba(3,183,201,.6))}
.social a:hover svg,.fx-social .social a:hover svg{fill:var(--turq)}
.fx-social .social a:hover{filter:drop-shadow(0 0 8px rgba(3,183,201,.6))}
.site-footer a:hover{color:var(--turq)}
.menu-btn:hover i{background:var(--turq);box-shadow:0 0 8px rgba(3,183,201,.6)}
.btn:hover{border-color:var(--turq);color:var(--turq);background:rgba(3,183,201,.08)}
.fx-sheen .btn:hover{border-color:var(--turq);box-shadow:0 0 0 1px rgba(3,183,201,.35),0 0 22px rgba(3,183,201,.35)}
.btn-chrome:hover,.btn-gold:hover,.fx-sheen .btn-chrome:hover,.fx-sheen .btn-gold:hover{color:#000;border-color:var(--turq);background:var(--chrome-grad)}
.fx-lift .svc-card:hover{box-shadow:var(--turq-glow)}
.svc-card:hover h3{color:var(--turq-ink)}
.fx-lift .tabpanel img:hover{box-shadow:var(--turq-glow)}
.tabs button:hover{color:var(--turq)}
.fx-tabs .tabs button[aria-selected=false]:hover{text-shadow:0 0 14px rgba(3,183,201,.5)}
.dots button:hover{border-color:var(--turq)}
.review-cta:hover span{background:none;color:var(--turq);border-bottom-color:var(--turq)}
.drawer nav a:hover,.fx-flyover .drawer nav a:hover{color:var(--turq)}
}
.fx-halo .feat-grid>div::before{border-color:var(--turq)}
.svc-card h3{transition:color .3s ease}
/* Selection states */
.tabs button[aria-selected=true]{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--turq);border-bottom-color:var(--turq)}
.fx-tabs .tabs button::after{background:var(--turq);box-shadow:0 0 10px rgba(3,183,201,.55)}
.dots button[aria-current=true]{background:transparent;border-color:var(--turq);box-shadow:inset 0 0 0 2px var(--turq)}
.fx-flyover .drawer nav a::before{background:var(--turq);box-shadow:0 0 8px rgba(3,183,201,.6)}
.drawer nav a:focus-visible{color:var(--turq)}
.menu-btn[aria-expanded=true] i{background:var(--turq)}
input:focus,select:focus,textarea:focus{border-color:var(--turq);box-shadow:0 0 0 3px rgba(3,183,201,.18)}
.check input{accent-color:var(--turq)}
.btn:focus-visible,.fx-sheen .btn:focus-visible,.tabs button:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--turq);outline-offset:3px}

/* Menu close (×) — turquoise hover, like every other control */
.drawer .close,.sms-dialog .close,.glass-dialog .close{transition:color .25s ease,transform .35s var(--ease-out),text-shadow .3s ease}
@media (hover:hover){.drawer .close:hover,.sms-dialog .close:hover,.glass-dialog .close:hover{color:var(--turq);transform:rotate(90deg);text-shadow:0 0 12px rgba(3,183,201,.6)}}
.drawer .close:focus-visible,.sms-dialog .close:focus-visible,.glass-dialog .close:focus-visible{outline:2px solid var(--turq);outline-offset:3px;color:var(--turq)}

/* Text Message Program popup (Privacy Policy) — glass panel, flies in */
.sms-dialog,.glass-dialog{width:min(1040px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;margin:auto;padding:34px 34px 30px;border:1px solid rgba(214,218,224,.22);border-radius:14px;background:rgba(12,12,14,.9);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(3,183,201,.12)}
.sms-dialog::backdrop,.glass-dialog::backdrop{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sms-dialog[open],.glass-dialog[open]{animation:fx-flyin .55s var(--ease-out)}
.sms-dialog h2,.glass-dialog h2{font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .3em;background:var(--amber-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sms-dialog .close,.glass-dialog .close{position:absolute;top:12px;right:16px;background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;padding:6px}
.sms-dialog>.muted,.glass-dialog>.muted{max-width:680px;margin-bottom:22px}
.sms-dialog .legal{margin:0}
.sms-dialog .legal h3{margin-top:0;color:var(--amber)}
@media (max-width:640px){.sms-dialog,.glass-dialog{padding:26px 18px 22px}}

/* Burnt orange legal headings — carried over from the current Duda site's
   Privacy Policy and Terms (#C45F0B, bold). 5.0:1 on black (WCAG AA). */
:root{--burnt:#C45F0B}
.legal-head h1,.legal h2,.legal .box h3,.sms-dialog .legal h3{color:var(--burnt)}

/* v1.6 (2026-09-27) */
/* "Everyone Is A VIP!" — larger */
.hero .tag{font-size:clamp(1.55rem,3.6vw,2.6rem);margin-top:18px;letter-spacing:.01em}

/* Request-a-quote page: one intro block above the form, VIP card below it */
.book-head .lead{max-width:680px;margin:0 auto;color:#dfe1e4}
.book-head .talk{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 14px}
.book-head .fine{margin:0}
.book-stack{max-width:820px;display:grid;gap:22px}
.vip-card h3{color:var(--amber)}

/* Operating area — opens the service-area map (same Google My Map as the old site) */
.area-link{display:block;text-decoration:none;border-radius:10px;padding:4px 8px;color:inherit}
.area-link .cap,.area-link .t{display:block}
.area-link .t{margin-top:8px}
.area-cta{display:inline-block;margin-top:12px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome);border-bottom:1px solid currentColor;transition:color .3s ease}
@media (hover:hover){.area-link:hover .area-cta{color:var(--turq)}}
.area-link:focus-visible{outline:2px solid var(--turq);outline-offset:4px}
.area-dialog .map-frame{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0c0c0e}
.area-dialog .map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.area-dialog .map-frame{aspect-ratio:3/4}}

@media (prefers-reduced-motion:reduce){
.svc-card{--rx:0deg !important;--ry:0deg !important}
.fx-reveal .rv{opacity:1;transform:none;transition:none}
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
}

/* Landing intro film (LOCKED v1, 2026-09-27) */
.intro{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .9s ease}
.intro[hidden]{display:none}
.intro video{width:100%;height:100%;object-fit:contain;background:#000}
.intro.out{opacity:0;pointer-events:none}
html.intro-on{overflow:hidden}
.intro-skip{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));font:600 .78rem/1 'Exo 2',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#d6dae0;background:rgba(0,0,0,.4);border:1px solid rgba(214,218,224,.4);border-radius:999px;padding:.8em 1.3em;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;animation:introSkip .6s ease .8s forwards;transition:color .2s,border-color .2s,box-shadow .2s}
.intro-skip:hover,.intro-skip:focus-visible{color:var(--turq);border-color:var(--turq);box-shadow:0 0 18px var(--turq-glow);outline:none}
@keyframes introSkip{to{opacity:1}}

/* AI VIP Concierge chat (2026-09-28) */
.chat{position:fixed;right:20px;bottom:92px;z-index:9000;width:min(390px,calc(100vw - 24px));height:min(600px,calc(100vh - 130px));display:flex;flex-direction:column;border:1px solid rgba(214,218,224,.22);border-radius:16px;background:rgba(12,12,14,.92);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(3,183,201,.14);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .25s ease,transform .3s var(--ease-out,ease)}
.chat.open{opacity:1;transform:none}
.chat[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 18px;border-bottom:1px solid var(--line)}
.chat-title{flex:1;display:flex;flex-direction:column;line-height:1.2}
.chat-title strong{font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.04em;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chat-title span{font-size:.75rem;color:var(--dim)}
.chat .close{background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;padding:2px 6px;transition:color .25s ease,transform .35s ease,text-shadow .3s ease}
.chat-reset{background:none;border:1px solid var(--line);color:var(--muted);font:500 .7rem/1 "Exo 2",sans-serif;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.55em .9em;cursor:pointer;transition:color .2s,border-color .2s}
@media (hover:hover){.chat .close:hover{color:var(--turq);transform:rotate(90deg);text-shadow:0 0 12px rgba(3,183,201,.6)}.chat-reset:hover{color:var(--turq);border-color:var(--turq)}}
.chat .close:focus-visible,.chat-reset:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
.chat-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{align-self:flex-start;background:var(--ink-3);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--text)}
.msg.me{align-self:flex-end;background:linear-gradient(180deg,#eef0f2,#c9cdd3);color:#0b0b0c;font-weight:500;border-bottom-right-radius:4px}
.msg.typing{display:flex;gap:5px;padding:13px 14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--turq);opacity:.35;animation:chatDot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes chatDot{50%{opacity:1;transform:translateY(-3px)}}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.chat-chips[hidden]{display:none}
.chip{background:none;border:1px solid rgba(214,218,224,.35);color:var(--chrome-2);border-radius:999px;padding:.5em .95em;font:500 .8rem/1 "Exo 2",sans-serif;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s}
@media (hover:hover){.chip:hover{color:var(--turq);border-color:var(--turq);box-shadow:0 0 14px var(--turq-glow)}}
.chip:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;resize:none;background:#0b0b0c;border:1px solid var(--line);border-radius:10px;color:var(--text);font:400 .93rem/1.4 "Exo 2",sans-serif;padding:9px 11px;max-height:120px}
.chat-form textarea:focus{outline:none;border-color:var(--turq);box-shadow:0 0 0 1px var(--turq)}
.chat-send{background:var(--chrome-grad);color:#0b0b0c;border:0;border-radius:10px;padding:0 16px;font:700 .8rem/1 "Exo 2",sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.chat-send:disabled{opacity:.5;cursor:default}
.chat-send:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
.chat-foot{margin:0;padding:0 14px 12px;font-size:.72rem;color:var(--dim);text-align:center}
.chat-foot a{color:var(--muted)}
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:8999;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border-radius:999px;border:1px solid rgba(214,218,224,.35);background:rgba(12,12,14,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--chrome-2);font:700 .78rem/1 "Exo 2",sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.55);transition:color .2s,border-color .2s,box-shadow .2s}
@media (hover:hover){.chat-fab:hover{color:var(--turq);border-color:var(--turq);box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 18px var(--turq-glow)}}
.chat-fab:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
html.intro-on .chat-fab{display:none}
@media (max-width:600px){
.chat{right:0;bottom:0;width:100vw;height:100dvh;height:100vh;border-radius:0;border:0}
@supports (height:100dvh){.chat{height:100dvh}}
html.chat-on{overflow:hidden}
html.chat-on .chat-fab{display:none}
.chat-fab span{display:none}.chat-fab{width:56px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.chat{transition:none}.msg.typing i{animation:none;opacity:.8}}
.chat-form{align-items:flex-end}
.chat-form textarea{min-height:40px;height:40px;margin:0;width:auto}
.chat-send{height:40px}

/* Contact launcher (2026-09-29): ONE button bottom right. Hover (tap on touch) cascades two
   options upward: Message Us (concierge chat) and Call Us (dialer). Turquoise pulse at rest,
   turquoise highlight on hover, per the Pop-accent spec. While the chat is open the launcher shows X. */
.fab-dock{position:fixed;right:20px;bottom:20px;z-index:8999;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab-main{position:relative;box-sizing:border-box;width:56px;height:56px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(214,218,224,.35);background:rgba(12,12,14,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--chrome-2);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.55);transition:color .25s ease,border-color .25s ease,box-shadow .3s ease}
.fab-main b{grid-area:1/1;display:grid;place-items:center;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.fab-main .ic-close{opacity:0;transform:rotate(-90deg) scale(.6)}
html.chat-on .fab-main .ic-open{opacity:0;transform:rotate(90deg) scale(.6)}
html.chat-on .fab-main .ic-close{opacity:1;transform:none}
.fab-main::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--turq);opacity:0;pointer-events:none;animation:fabPulse 2.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes fabPulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.4);opacity:0}}
.fab-dock.open .fab-main,html.chat-on .fab-main{color:var(--turq);border-color:var(--turq);box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 1px rgba(3,183,201,.35),0 0 22px rgba(3,183,201,.45)}
html.chat-on .fab-main::after{animation:none;opacity:0}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fab-dock.open .fab-menu{pointer-events:auto}
.fab-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:48px;min-width:48px;padding:0 12px;border-radius:999px;border:1px solid rgba(214,218,224,.35);background:rgba(12,12,14,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(0,0,0,.5);color:var(--chrome-2);text-decoration:none;cursor:pointer;font:700 .74rem/1 "Exo 2",sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-right:4px;opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1),color .2s ease,border-color .2s ease,box-shadow .25s ease}
.fab-item{position:relative}
/* each option pulses turquoise while hovered (same ring as the launcher, a little quicker) */
.fab-item::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none}
.fab-item:hover::after,.fab-item:focus-visible::after{animation:fabItemPulse 1.3s cubic-bezier(.22,1,.36,1) infinite}
@keyframes fabItemPulse{0%{box-shadow:0 0 0 0 rgba(3,183,201,.75)}100%{box-shadow:0 0 0 14px rgba(3,183,201,0)}}
@media (prefers-reduced-motion:reduce){.fab-item:hover::after,.fab-item:focus-visible::after{animation:none}}
.fab-item i{flex:none;display:grid;place-items:center;width:22px;height:22px}
.fab-item span{display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-right:0;transition:max-width .45s cubic-bezier(.22,1,.36,1),margin-right .45s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.fab-dock.open .fab-item{opacity:1;transform:none;visibility:visible}
/* cascade upward: the option nearest the launcher (Call Us) rises first, then Message Us */
.fab-dock.open .fab-item:nth-child(2){transition-delay:0s}
.fab-dock.open .fab-item:nth-child(1){transition-delay:.07s}
/* hover an option: its label slides out to the LEFT (same reveal as the launchers had) */
.fab-item:hover,.fab-item:focus-visible{color:var(--turq);border-color:var(--turq);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 18px rgba(3,183,201,.4);outline:none;transition-delay:0s}
.fab-item:hover span,.fab-item:focus-visible span{max-width:200px;opacity:1;margin-right:10px}
/* touch screens can't hover: show the labels whenever the menu is open */
@media (hover:none){.fab-dock.open .fab-item span{max-width:200px;opacity:1;margin-right:10px}}
.fab-main:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
html.intro-on .fab-dock{display:none}
html.chat-on .fab-menu{display:none}
@media (max-width:600px){html.chat-on .fab-dock{display:none}}
@media (prefers-reduced-motion:reduce){.fab-main::after{animation:none}.fab-item,.fab-main b{transition:none}}
