:root{--uas-skyline-image:url("../img/la-flag-skyline-3.webp")}
@media (max-width:767px){:root{--uas-skyline-image:url("../img/la-flag-skyline-3-mobile-v76.webp")}}
/* United American Signs — light design system in the logo colours (navy, red, white) */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-bold.woff") format("woff");font-weight:600 800;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-semibold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-extrabold.woff") format("woff");font-weight:800 900;font-display:swap}

:root{
  --navy:#24066b; --navy-2:#3b2391; --navy-3:#6a58b8; --red:#ec1905; --red-d:#cf1604; --red-t:#cc1607;   /* red-t: small red text (contrast) */
  --paper:#fff; --mist:#f6f8fd; --sky:#eef3fc; --tint:#f1effa;
  --night:#fff;                                             /* (old name) the page colour */
  --panel:#fff; --panel-2:#f7f8fd;
  --line:rgba(36,6,107,.11); --line-2:rgba(36,6,107,.2);
  --text:#170d48; --muted:#2f2958; --dim:#5b5780;
  --c1:var(--navy); --c2:var(--red);
  --shadow:0 1px 2px rgba(23,13,72,.05),0 14px 34px -20px rgba(23,13,72,.32);
  --glow-red:0 0 0 1px rgba(236,25,5,.22),0 16px 36px -16px rgba(236,25,5,.5),0 0 28px -8px rgba(236,25,5,.28);
  --glow-navy:0 0 0 1px rgba(36,6,107,.2),0 16px 36px -16px rgba(36,6,107,.45),0 0 28px -8px rgba(59,35,145,.26);
  --display:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1240px; --gutter:clamp(16px,4vw,40px);
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.7,0,.84,0);
  --util-h:34px;
  --header-h:calc(96px + var(--util-h));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{margin:0;min-height:100vh;background:transparent;color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65;font-weight:500;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
svg{width:1.15em;height:1.15em;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
::selection{background:var(--navy);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* ---------- background layers ----------
   page: white. The logo particles draw on a transparent canvas above the LA panorama (top section only). */
#bg3d{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;z-index:-3;display:block;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
#bg3d.is-on{opacity:1}
.scrim,.grain,.cursor-light{display:none}

/* the bright LA panorama: behind the top section, fading into white */
.hero::before,.phero::before{content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 44%,rgba(255,255,255,.7) 54%,rgba(255,255,255,0) 68%),linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),var(--uas-skyline-image) center bottom/100% auto no-repeat}
/* home: the flag-and-skyline picture is drawn by bg.js (it zooms into the Hollywood sign on scroll); here only a white veil keeps the words clear */
.page-home .hero::before{z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 36%,rgba(255,255,255,.5) 52%,rgba(255,255,255,0) 64%)}
.page-home .site-header{background:rgba(255,255,255,.86);box-shadow:0 8px 26px -22px rgba(23,13,72,.5)}   /* the header reads over the bright picture */
.page-home .hero .lede,.page-home .hero .kicker{text-shadow:0 0 2px #fff,0 0 8px #fff,0 0 18px rgba(255,255,255,.95),0 0 32px rgba(255,255,255,.8)}
.page-home .hero h1,.page-home .hero .is-split .ch{text-shadow:0 0 10px rgba(255,255,255,.9),0 0 28px rgba(255,255,255,.85)}
.page-home .hero .is-split .ch:hover{text-shadow:0 0 10px rgba(255,255,255,.9),0 0 22px rgba(236,25,5,.45)}
.no-webgl .page-home .hero::before{z-index:-4;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 36%,rgba(255,255,255,.5) 52%,rgba(255,255,255,0) 64%),linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),var(--uas-skyline-image) center 42%/cover no-repeat}
/* inner pages: the skyline is sized to the header band (never taller than 560px), anchored bottom right */
.phero::before{z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.55) 56%,rgba(255,255,255,.1) 72%)}
.no-webgl .phero::before{z-index:-4;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.55) 56%,rgba(255,255,255,.1) 72%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 22%),linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),var(--uas-skyline-image) center 42%/cover no-repeat}
.phero--split::before{z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 44%,rgba(255,255,255,.45) 62%,rgba(255,255,255,.3) 100%)}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(72px,10vw,140px);position:relative}
.section--tight{padding-block:clamp(48px,7vw,90px)}
main{display:block;position:relative}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:650;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance;color:var(--navy)}
h1{font-size:clamp(2.25rem,5.2vw,4.9rem);font-weight:720;line-height:1.02}
h2{font-size:clamp(1.85rem,3.6vw,3.15rem)}
h3{font-size:clamp(1.2rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.01em}
h4{font-size:1.06rem;font-weight:600;letter-spacing:0}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.05rem,1.35vw,1.22rem);color:var(--muted);max-width:60ch;line-height:1.7}
.muted{color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:.7em;font-family:var(--body);font-weight:800;font-size:clamp(.8rem,1vw,.9rem);text-transform:uppercase;letter-spacing:.14em;color:var(--red-t);margin-bottom:1rem}
.kicker::before{content:"";width:28px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red) 0 60%,var(--navy) 60%)}
.glow-text{color:var(--navy)}
.neon-sign{font-family:var(--display);font-weight:800;color:var(--navy);text-shadow:.05em .05em 0 var(--red)}

/* section heading block */
.head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .kicker{justify-content:center}
.head p{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{--bc:var(--navy);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.02em;cursor:pointer;border:0;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s;isolation:isolate;overflow:hidden}
.btn svg{width:18px;height:18px;flex:none}
/* buttons keep their own text colour wherever they sit (text blocks colour and underline normal links) */
.btn,.btn:hover,.btn:focus-visible{text-decoration:none}
a.btn.btn--primary,button.btn.btn--primary,a.btn.btn--primary:hover{color:#fff}
a.btn.btn--tube,button.btn.btn--tube{color:var(--navy)}
a.btn.btn--tube:hover,button.btn.btn--tube:hover{color:#fff}
.btn--primary{color:#fff;font-weight:700;background:linear-gradient(180deg,#f02a12,var(--red-d));box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -12px rgba(236,25,5,.75)}
.btn--primary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s var(--ease);z-index:-1}
.btn--primary:hover::after{background-position:-40% 0}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 0 0 4px rgba(236,25,5,.12),0 16px 34px -12px rgba(236,25,5,.7),0 0 26px -6px rgba(236,25,5,.45)}
.btn--tube{color:var(--navy);background:#fff;box-shadow:0 0 0 1.5px var(--navy) inset,0 6px 18px -12px rgba(36,6,107,.5)}
.btn--tube:hover{transform:translateY(-2px);color:#fff;background:var(--navy);box-shadow:0 0 0 1.5px var(--navy) inset,0 0 0 4px rgba(36,6,107,.1),0 16px 34px -12px rgba(36,6,107,.6),0 0 26px -6px rgba(59,35,145,.4)}
.btn--small{min-height:42px;padding:0 1.2em;font-size:.78rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--navy);border-bottom:2px solid rgba(236,25,5,.45);padding-bottom:2px;transition:color .25s,border-color .25s,gap .3s var(--ease)}
.link-arrow:hover{color:var(--red);border-color:var(--red);gap:.8em}
.link-arrow svg{width:16px;height:16px}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:60;height:var(--header-h);display:flex;flex-direction:column;align-items:stretch;transition:background .4s,backdrop-filter .4s,height .4s var(--ease),box-shadow .4s}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--navy) 20%,var(--navy) 50%,var(--red) 50%,var(--red) 80%,transparent);opacity:0;transition:opacity .4s}
.is-scrolled .site-header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);height:calc(70px + var(--util-h));box-shadow:0 8px 30px -20px rgba(23,13,72,.45)}
.is-scrolled .site-header::after{opacity:.8}
.header-in{flex:1;min-height:0;display:flex;align-items:center;gap:24px;width:min(1360px,100% - var(--gutter)*2);margin-inline:auto}
/* license / contact utility bar (v48) */
.util{height:var(--util-h);flex:none;background:var(--navy);color:#eae6ff;font-size:.8rem;font-weight:500;letter-spacing:.01em;position:relative;z-index:2}
.util::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red)}
.util-in{height:100%;display:flex;align-items:center;gap:22px;width:min(1360px,100% - var(--gutter)*2);margin-inline:auto;white-space:nowrap}
.util svg{width:15px;height:15px;flex:none}
.u-lic,.u-area{display:inline-flex;align-items:center;gap:7px}
.u-lic b{font-weight:700;color:#fff}.u-num{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.u-lic svg{color:#ff6b5c}
.u-tel{margin-left:auto;color:#fff;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}.u-tel:hover{color:#ffb4ab}
.u-soc{display:flex;gap:4px}.u-soc a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#d9d3ff;transition:color .25s,background .25s}.u-soc a:hover{color:#fff;background:rgba(255,255,255,.14)}.u-soc svg{width:14px;height:14px}
.hero-soc{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--muted)}
.socials--sm a{width:40px;height:40px}.socials--sm svg{width:18px;height:18px}
.brand{--bh:86px;display:flex;align-items:center;flex:none;position:relative;margin-left:-16px;transition:--bh .4s}
.brand img{height:var(--bh);width:auto;transition:height .4s var(--ease),filter .35s ease}
.brand .logo-word,.flogo-lock .logo-word{margin-left:calc(var(--bh) * -0.196)}
.is-scrolled .brand{--bh:68px}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav > ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.nav a.nav-link,.nav button.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-weight:700;font-size:.95rem;color:var(--muted);background:none;border:0;cursor:pointer;position:relative;transition:color .25s}
.nav .nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--navy) 50%,var(--red) 50%);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav .nav-link:hover,.nav .nav-link[aria-current="page"],.nav .has-drop:focus-within > .nav-link{color:var(--navy)}
.nav .nav-link:hover::after,.nav .nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link svg{width:14px;height:14px;transition:transform .3s}
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:560px;padding:14px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -24px rgba(23,13,72,.38);display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.drop--narrow{min-width:280px;grid-template-columns:1fr}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.has-drop:hover > .nav-link svg,.has-drop.open > .nav-link svg{transform:rotate(180deg)}
.drop a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;font-weight:650;font-size:.93rem;color:var(--muted);transition:background .2s,color .2s}
.drop a:hover{background:var(--tint);color:var(--navy)}
.drop a .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--red);box-shadow:0 0 0 3px rgba(236,25,5,.12)}
.drop a:nth-child(even) .dot{background:var(--navy);box-shadow:0 0 0 3px rgba(36,6,107,.1)}
.drop a img{width:44px;height:34px;object-fit:cover;border-radius:7px;flex:none}
.header-cta{display:flex;align-items:center;gap:12px;margin-left:14px}
.phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--navy);white-space:nowrap}
.phone svg{width:18px;height:18px;color:var(--red)}
.menu-btn{display:none;flex:none;margin-left:auto;width:48px;height:48px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.85);cursor:pointer;position:relative;box-shadow:0 6px 18px -12px rgba(23,13,72,.4)}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--navy);transition:transform .35s var(--ease),opacity .2s}
.menu-btn span:nth-child(2){background:var(--red)}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:23px}.menu-btn span:nth-child(3){top:29px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.98);padding:calc(var(--header-h) + 16px) var(--gutter) 40px;overflow-y:auto;opacity:0;visibility:hidden;clip-path:circle(0 at calc(100% - 44px) 42px);transition:clip-path .7s var(--ease),opacity .3s,visibility .7s}
.menu-open .mnav{opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 44px) 42px)}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav > ul > li{border-bottom:1px solid var(--line)}
.mnav ul a,.mnav summary{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--navy);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:22px;height:22px;transition:transform .3s;color:var(--red)}
.mnav details[open] summary svg{transform:rotate(180deg)}
.mnav details ul a{font-family:var(--body);font-size:1.05rem;font-weight:650;color:var(--muted);padding:10px 12px}
.mnav .btn{display:flex;width:100%;margin-top:24px;min-height:58px;justify-content:center;font-size:.95rem}
.mnav .phone{margin-top:18px;justify-content:center;width:100%;font-size:1.1rem}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 120px;position:relative}
.hero h1{max-width:13.5ch;margin-bottom:.45em}
.hero .lede{margin-bottom:2rem;color:#221a50;font-weight:550}
.chase span{display:inline-block;opacity:.3;transition:opacity .2s}
.chase span.on{opacity:1}
.rating{display:inline-flex;align-items:center;gap:12px;margin-top:34px;padding:10px 16px 10px 12px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow);font-weight:650;font-size:.92rem;color:var(--muted)}
.rating b{color:var(--navy);font-family:var(--display);font-size:1rem}
.rating > svg{width:22px;height:22px;flex:none}
.rating span{white-space:nowrap}
@media (max-width:640px){.rating{flex-wrap:wrap;gap:8px 10px;border-radius:18px}.rating span{white-space:normal;flex-basis:100%}.hero .rating{max-width:232px}}
.stars{display:inline-flex;gap:2px;color:var(--red)}
.stars svg{width:15px;height:15px}
.scroll-cue{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);width:26px;height:42px;border-radius:14px;border:1.5px solid var(--line-2);background:rgba(255,255,255,.7)}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--red);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* marquee */
.marquee{position:absolute;left:0;right:0;bottom:0;overflow:hidden;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 48s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee a{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.7vw,1.4rem);letter-spacing:.015em;line-height:1.2;color:var(--navy);white-space:nowrap;transition:color .3s,text-shadow .3s;display:flex;align-items:center;gap:48px;padding-right:48px}
.marquee a.alt{color:var(--navy-2)}
.marquee a:hover{color:var(--red);text-shadow:0 0 18px rgba(236,25,5,.3)}
.marquee a::after{content:"";flex:none;width:9px;height:9px;transform:rotate(45deg);background:var(--red)}
.marquee a.alt::after{background:var(--navy)}
@keyframes marq{to{transform:translateX(-50%)}}

/* inner page hero */
.phero{padding:calc(var(--header-h) + clamp(50px,8vw,110px)) 0 clamp(40px,6vw,80px);position:relative}
.phero h1{font-size:clamp(2.1rem,4.6vw,4.2rem);max-width:18ch}
.phero--split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.86rem;font-weight:700;color:var(--dim);margin-bottom:22px;list-style:none;padding:0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red-t)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-2)}

/* ---------- panels & cards ---------- */
.glass{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);isolation:isolate;transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s}
.spot{--mx:50%;--my:0%}
.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(420px circle at var(--mx) var(--my),var(--red),rgba(36,6,107,.7) 32%,transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px circle at var(--mx) var(--my),rgba(59,35,145,.05),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
.spot:hover::before,.spot:hover::after{opacity:1}
.glass.spot:hover{box-shadow:0 1px 2px rgba(23,13,72,.05),0 22px 44px -22px rgba(23,13,72,.4),0 0 30px -10px rgba(236,25,5,.28)}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{padding:30px 28px 28px}
.value .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;background:var(--tint);color:var(--navy)}
.value:nth-child(2) .ico{background:#fdeceb;color:var(--red)}
.value:nth-child(3) .ico{background:var(--sky);color:var(--navy-2)}
.value .ico svg{width:26px;height:26px}
.value h3{margin-bottom:.6em}
.value p{color:var(--muted);margin:0;font-size:.98rem}

/* services grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{display:flex;flex-direction:column;padding:12px 12px 22px;--c1:var(--navy);--c2:var(--red)}
.svc .frame{margin-bottom:20px}
.svc h3{padding:0 10px;margin-bottom:.45em;font-size:1.22rem;transition:color .3s}
.svc p{padding:0 10px;color:var(--muted);font-size:.95rem;margin-bottom:1.1em;flex:1}
.svc .link-arrow{margin:0 10px;align-self:flex-start}
.svc-grid--wide .svc:nth-child(1),.svc-grid--wide .svc:nth-child(6),.svc-grid--wide .svc:nth-child(9){grid-column:span 2}
.svc-grid--wide .svc:nth-child(1) .frame .img,.svc-grid--wide .svc:nth-child(6) .frame .img,.svc-grid--wide .svc:nth-child(9) .frame .img{aspect-ratio:16/8.4}

/* ---------- image frames ---------- */
.frame{position:relative;border-radius:var(--r-md);padding:1.5px;background:linear-gradient(135deg,var(--navy),rgba(36,6,107,.25) 40%,rgba(236,25,5,.3) 62%,var(--red));box-shadow:0 14px 30px -20px rgba(23,13,72,.5);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s;will-change:transform}
.frame .img{position:relative;border-radius:calc(var(--r-md) - 1.5px);overflow:hidden;background:var(--sky);aspect-ratio:4/3}
.frame .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1.4s var(--ease),opacity .6s}
.frame:hover{box-shadow:0 22px 40px -22px rgba(23,13,72,.55),0 0 30px -8px rgba(236,25,5,.35)}
.frame:hover .img img{transform:scale(1.045)}
.frame .hud{position:absolute;inset:-7px;pointer-events:none}
.frame .hud::before,.frame .hud::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--navy);opacity:.85}
.frame .hud::before{left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:6px}
.frame .hud::after{right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:6px;border-color:var(--red)}
.frame--tall .img{aspect-ratio:4/5}
.frame--wide .img{aspect-ratio:16/10}
.frame--free .img{aspect-ratio:auto}
/* reveal: images come into focus with a light sweep */
.gen .img img{filter:blur(12px) saturate(1.2) brightness(1.1);transform:scale(1.12)}
.gen .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.0) 40%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 60%,transparent 100%);background-size:100% 300%;background-position:0 100%;opacity:.9;pointer-events:none;transition:opacity .4s .9s}
.gen.is-in .img img{filter:none;transform:none}
.gen.is-in .img::after{animation:scan 1.1s var(--ease) forwards;opacity:0}
@keyframes scan{0%{background-position:0 100%;opacity:.9}100%{background-position:0 0%;opacity:0}}

/* logo plate */
.logo-plate{position:relative;border-radius:28px;padding:clamp(28px,4vw,52px);background:radial-gradient(120% 90% at 50% 35%,#fff,var(--mist) 70%);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.logo-plate img{width:100%;max-width:420px;margin-inline:auto;filter:drop-shadow(0 14px 18px rgba(23,13,72,.18));animation:hum 6s ease-in-out infinite}
.logo-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:sweep 6s ease-in-out infinite}
@keyframes hum{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sweep{0%{background-position:130% 0}60%,100%{background-position:-30% 0}}

/* split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.split + .split{margin-top:clamp(60px,8vw,110px)}
.split--rev > :first-child{order:2}
.split .prose{max-width:58ch}
.layered{position:relative;padding:0 9% 9% 0}
.layered .inset{position:absolute;right:0;bottom:0;width:40%;z-index:2}
.layered .inset .frame{box-shadow:0 20px 40px -14px rgba(23,13,72,.45)}
.split--rev .layered{padding:0 0 9% 9%}
.split--rev .layered .inset{right:auto;left:0}

/* prose */
.prose{color:var(--muted);font-size:1.03rem}
.prose h2,.prose h3,.prose h4{color:var(--navy);margin-top:1.6em}
.prose h3{font-size:clamp(1.3rem,1.9vw,1.65rem)}
.prose h4{font-family:var(--display);font-size:1.08rem}
.prose > :first-child{margin-top:0}
.prose strong{color:var(--text);font-weight:750}
.prose a:not(.btn){color:var(--navy-2);font-weight:650;text-decoration:underline;text-decoration-color:rgba(236,25,5,.5);text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--red)}
.prose ul{list-style:none;padding:0;margin:0 0 1.3em}
.prose ul li{position:relative;padding-left:30px;margin-bottom:.6em}
.prose ul li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(236,25,5,.14)}
.prose ul.ticks li::before{width:16px;height:9px;border-radius:0;background:none;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg);top:.42em;left:2px;box-shadow:none}
.prose ul.ticks--alt li::before{border-color:var(--navy)}
.prose ul.diamonds li::before{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--navy);box-shadow:none}
.prose p.lead-strong{font-size:1.15rem;color:var(--text)}

/* checklist (why choose) */
.checks{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgba(23,13,72,.4);font-weight:650;color:var(--text)}
.checks li svg{width:22px;height:22px;flex:none;color:var(--red);margin-top:2px}

/* service area map */
.area{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center}
.constellation{position:relative;aspect-ratio:1.15/1;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(90% 80% at 50% 45%,#fff,var(--sky))}
.constellation svg{position:absolute;inset:0;width:100%;height:100%}
.constellation .ln{stroke:url(#lg);stroke-width:1.4;opacity:.6;stroke-dasharray:4 6;animation:dash 18s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}
.constellation .pulse{fill:var(--red)}
.constellation .node circle.core{fill:var(--navy)}
.constellation .node circle.halo{fill:none;stroke:var(--navy);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:ping 3s var(--ease) infinite}
.constellation .node:nth-child(even) circle.halo{stroke:var(--red);animation-delay:1.2s}
.constellation .node text{fill:#1d1452;font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.02em;paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:4px;stroke-linejoin:round;font-feature-settings:"ss01"}
.constellation .node.hq text{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;fill:var(--red-t)}
.constellation .node.hq circle.core{fill:var(--red)}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.chips li,.chips a{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-weight:700;font-size:.9rem;color:var(--navy)}
.chips a{transition:border-color .3s,box-shadow .3s,color .3s}
.chips a:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 20px -6px rgba(236,25,5,.45)}

/* reviews */
.reviews-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.score{display:flex;align-items:center;gap:20px}
.score .big{font-family:var(--display);font-size:clamp(3.4rem,7vw,5.6rem);font-weight:750;line-height:1;color:var(--navy);text-shadow:.04em .04em 0 var(--red)}
.score .stars svg{width:22px;height:22px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(360px,82vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 24px;scrollbar-width:thin;scrollbar-color:var(--navy-3) transparent;overscroll-behavior-x:contain}
.rail > *{scroll-snap-align:start}
.review{padding:26px;display:flex;flex-direction:column;gap:16px}
.review blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--text);flex:1}
.review blockquote::before{content:"\201C";display:block;font-family:var(--display);font-size:3rem;line-height:.6;color:var(--red);margin-bottom:10px}
.review footer{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--navy) 50%,var(--red) 50%);flex:none}
.review footer b{display:block;color:var(--navy)}
.rail-nav{display:flex;gap:10px}
.rail-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:box-shadow .3s,border-color .3s,color .3s}
.rail-nav button:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 22px -6px rgba(236,25,5,.5)}
.rail-nav svg{width:20px;height:20px}

/* FAQ */
.faq{display:grid;gap:12px;max-width:900px}
.faq--center{margin-inline:auto}
.qa{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgba(23,13,72,.4);transition:border-color .3s,box-shadow .3s}
.qa[open]{border-color:rgba(36,6,107,.3);box-shadow:0 14px 30px -18px rgba(23,13,72,.45),0 0 26px -12px rgba(236,25,5,.3)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;font-weight:750;font-size:1.04rem;color:var(--navy)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);position:relative;transition:transform .4s var(--ease),border-color .3s,color .3s}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;border-radius:2px}
.qa summary .pm::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.qa[open] summary .pm{transform:rotate(180deg);border-color:var(--red);color:var(--red)}
.qa[open] summary .pm::after{transform:rotate(0)}
.qa .ans{padding:0 22px 20px;color:var(--muted)}
.qa .ans p:last-child{margin-bottom:0}
.qa .ans a:not(.btn){color:var(--navy-2);font-weight:750;text-decoration:underline;text-decoration-color:rgba(236,25,5,.5);text-underline-offset:3px}

/* mission/vision */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mv .glass{padding:clamp(28px,4vw,46px)}
.mv h3{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--navy)}
.mv h3::after{content:"";display:block;width:46px;height:3px;margin-top:14px;border-radius:2px;background:var(--red)}
.mv .glass:nth-child(2) h3::after{background:var(--navy)}
.mv p{color:var(--muted);margin:0;font-size:1.05rem}

/* forms */
.quote{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start;padding:clamp(24px,4vw,56px)}
.quote .logo-plate{padding:24px}
.quote .logo-plate img{max-width:280px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.field{position:relative}
.field label{display:block;font-weight:750;font-size:.86rem;margin-bottom:7px;color:var(--navy)}
.field label .req{color:var(--red-t);margin-left:2px}
.field input,.field select,.field textarea{width:100%;min-height:54px;padding:14px 16px;border-radius:13px;border:1px solid var(--line-2);background:var(--mist);color:var(--text);font:inherit;font-size:1rem;transition:border-color .25s,box-shadow .25s,background .25s;appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2324066b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field select option{background:#fff;color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(36,6,107,.1),0 0 22px -8px rgba(59,35,145,.45);background:#fff}
.field input[type=file]{padding:12px;min-height:auto}
.field input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:9px;padding:8px 14px;background:var(--navy);color:#fff;font-weight:700;cursor:pointer}
.field .hint{font-size:.82rem;color:var(--dim);margin-top:6px}
.field.invalid input,.field.invalid textarea{border-color:#d0142c;box-shadow:0 0 0 3px rgba(208,20,44,.12)}
.field .err{display:none;color:#c0102a;font-size:.84rem;margin-top:6px;font-weight:700}
.field.invalid .err{display:block}
.hp{position:absolute!important;left:-9999px!important}
.form-status{grid-column:1/-1;border-radius:14px;padding:16px 18px;font-weight:700;display:none}
.form-status.ok{display:block;background:var(--tint);border:1px solid rgba(36,6,107,.3);color:var(--navy)}
.form-status.bad{display:block;background:#fdeceb;border:1px solid rgba(208,20,44,.4);color:#a50d22}
.form .btn{justify-self:start}
.form.sending .btn{opacity:.6;pointer-events:none}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{display:flex;flex-direction:column;padding:12px 12px 24px}
.post-card .frame{margin-bottom:18px}
.post-card time{font-size:.84rem;font-weight:750;color:var(--red-t);padding:0 10px;margin-bottom:8px;display:block}
.post-card h3{padding:0 10px;font-size:1.12rem;line-height:1.3;flex:1;transition:color .3s}
.post-card p{padding:0 10px;color:var(--muted);font-size:.94rem}
.post-card .link-arrow{margin:0 10px;align-self:flex-start}
.post-body{max-width:760px;margin-inline:auto}
.post-meta{color:var(--muted);font-weight:650;margin-bottom:24px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:60px auto 0}
.post-nav a{padding:22px;color:var(--navy);font-weight:700}
.post-nav small{display:block;color:var(--red-t);font-weight:750;margin-bottom:6px}
.post-nav a:last-child{text-align:right}

/* gallery / portfolio */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button,.filters a{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-weight:750;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--muted);transition:all .3s var(--ease)}
.filters button:hover,.filters a:hover{color:var(--navy);border-color:var(--navy);box-shadow:0 0 20px -8px rgba(36,6,107,.45)}
.filters button[aria-pressed="true"],.filters a[aria-current="page"]{color:#fff;background:var(--navy);border-color:var(--navy);box-shadow:0 10px 24px -12px rgba(36,6,107,.7)}
.filters .n{font-size:.78rem;opacity:.75}
.masonry{columns:4 260px;column-gap:16px}
.masonry .tile{break-inside:avoid;margin-bottom:16px;display:block;cursor:zoom-in;width:100%;border:0;padding:0;background:none;text-align:left}
.masonry .tile .frame .img{aspect-ratio:auto}
.masonry .tile .frame .img img{height:auto;display:block}
/* JS masonry on CSS grid (see main.js); CSS columns above remain the no-JS fallback */
.masonry.is-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-auto-rows:2px;column-gap:var(--mgap,16px);row-gap:0;align-items:start}
.masonry.is-grid .tile{margin:0;break-inside:auto}
.masonry .tile.is-hidden{display:none}
.gallery-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:30px}

/* lightbox (photos read best on a deep navy backdrop) */
.lb{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:72px 1fr 72px;grid-template-rows:1fr auto;align-items:center;background:rgba(16,6,48,.94);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;color:#fff}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;grid-column:2;display:grid;place-items:center;height:calc(100vh - 110px);padding:20px 0}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 0 0 1.5px rgba(255,255,255,.5),0 30px 80px -20px rgba(0,0,0,.7);transition:opacity .3s,transform .4s var(--ease)}
.lb.loading img{opacity:.25;transform:scale(.98)}
.lb button{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;justify-self:center;transition:box-shadow .3s,border-color .3s,background .3s}
.lb button:hover{border-color:#fff;background:var(--red);box-shadow:0 0 24px -4px rgba(236,25,5,.7)}
.lb button svg{width:22px;height:22px}
.lb .lb-close{position:absolute;top:18px;right:18px}
.lb .lb-bar{grid-column:1/-1;display:flex;justify-content:center;gap:16px;padding:0 0 22px;color:rgba(255,255,255,.8);font-weight:700}

/* carousel (why choose) */
.carousel{position:relative}
.carousel .frame .img{aspect-ratio:4/3.4}
.carousel .slides{position:absolute;inset:0}
.carousel .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 6s linear}
.carousel .slides img.on{opacity:1;transform:scale(1)}
.carousel .dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carousel .dots button{width:30px;height:4px;border-radius:4px;border:0;padding:0;background:var(--line-2);cursor:pointer;transition:background .3s}
.carousel .dots button[aria-current="true"]{background:var(--red)}

/* city cards */
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.city{padding:28px}
.city h2,.city h3{font-size:1.3rem;display:flex;align-items:center;gap:12px;transition:color .3s}
.city h2::before,.city h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(236,25,5,.14);flex:none}
.city:nth-child(even) h2::before,.city:nth-child(even) h3::before{background:var(--navy);box-shadow:0 0 0 4px rgba(36,6,107,.12)}
.city p{color:var(--muted);font-size:.97rem}
.city .link-arrow{margin-top:6px}

/* service detail */
.svc-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,5vw,70px);align-items:start}
.aside{position:sticky;top:96px;display:grid;gap:18px}
.aside .glass{padding:24px}
.aside h3{font-size:1.1rem}
.aside .btn{width:100%}
.aside ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.aside ul a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-weight:650;color:var(--muted);font-size:.94rem}
.aside ul a:hover,.aside ul a[aria-current="page"]{background:var(--tint);color:var(--navy)}
.aside ul a .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.aside ul li:nth-child(even) a .dot{background:var(--navy)}
.aside .phone{font-size:1.15rem;margin:6px 0 16px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.cinfo{display:grid;gap:12px;margin-bottom:22px}
.cinfo a,.cinfo div{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgba(23,13,72,.4);transition:border-color .3s,box-shadow .3s}
.cinfo a:hover{border-color:rgba(236,25,5,.45);box-shadow:0 14px 30px -18px rgba(23,13,72,.45),0 0 26px -10px rgba(236,25,5,.4)}
.cinfo svg{width:22px;height:22px;flex:none;color:var(--red);margin-top:2px}
.cinfo b{display:block;font-weight:750;color:var(--navy)}
.cinfo span{color:var(--muted);font-size:.95rem}
.socials{display:flex;gap:10px}
.socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;color:var(--navy);transition:all .3s var(--ease)}
.socials a:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 22px -4px rgba(236,25,5,.5);transform:translateY(-2px)}
.socials svg{width:20px;height:20px}

/* CTA band: the one deep navy block, with the logo's stripes */
.cta-band{position:relative;overflow:hidden;padding:clamp(36px,6vw,70px);display:grid;grid-template-columns:1.3fr auto;gap:30px;align-items:center}
.glass.cta-band{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);border-color:transparent;color:#fff;box-shadow:0 26px 60px -30px rgba(23,13,72,.8)}
.cta-band h2{margin:0 0 .3em;color:#fff}
.cta-band p{margin:0;color:rgba(255,255,255,.82)}
.cta-band::before{content:"";position:absolute;top:0;bottom:0;right:0;left:auto;width:48%;padding:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(118deg,rgba(236,25,5,.75) 0 24px,rgba(236,25,5,0) 24px 48px,rgba(255,255,255,.22) 48px 72px,rgba(255,255,255,0) 72px 96px);
  -webkit-mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 60%,#000 100%);mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 60%,#000 100%);opacity:.55}
.cta-band.spot:hover::before{opacity:.75}
.glass.cta-band::after{background:radial-gradient(500px circle at var(--mx) var(--my),rgba(255,255,255,.08),transparent 55%)}
.cta-band a.btn.btn--tube,.cta-band button.btn.btn--tube{color:#fff;background:rgba(255,255,255,.06);box-shadow:0 0 0 1.5px rgba(255,255,255,.85) inset}
.cta-band a.btn.btn--tube:hover,.cta-band button.btn.btn--tube:hover{color:var(--navy);background:#fff;box-shadow:0 0 0 1.5px #fff inset,0 0 26px -4px rgba(255,255,255,.55)}
.cta-band .link-arrow{color:#fff}
.cta-band .phone{color:#fff}

/* footer */
.site-footer{position:relative;padding:clamp(60px,8vw,100px) 0 30px;margin-top:0;background:linear-gradient(180deg,rgba(246,248,253,0),var(--mist) 14%);border-top:1px solid var(--line)}
.site-footer::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--navy) 20%,var(--navy) 50%,var(--red) 50%,var(--red) 80%,transparent)}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.25fr;gap:36px}
.fgrid h3{font-size:.95rem;margin-bottom:18px;color:var(--navy)}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fgrid ul a{color:var(--muted);font-weight:650;font-size:.95rem;transition:color .2s}
.fgrid ul a:hover{color:var(--red)}
.flogo-lock{--bh:70px;display:flex;align-items:center;margin:0 0 14px -14px;perspective:900px}
.flogo-lock img{height:var(--bh);width:auto;transition:filter .35s ease}
.flogo p{color:var(--muted);font-size:.95rem;max-width:34ch}
.fcontact li{color:var(--muted);font-size:.95rem;display:flex;gap:10px}
.fcontact svg{width:18px;height:18px;flex:none;color:var(--red);margin-top:4px}
.fcontact small{display:block;color:var(--dim);font-size:.82rem}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:.88rem}

.fcredit{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.ver{color:var(--dim);font-size:.82rem;font-weight:650;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;background:#fff}
.credit{color:var(--muted);font-weight:650;transition:color .25s,text-shadow .25s}
.credit b{font-family:var(--display);font-weight:700;letter-spacing:.06em;color:var(--navy)}
.credit:hover,.credit:hover b{color:var(--red);text-shadow:0 0 16px rgba(236,25,5,.35)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.is-in{opacity:1;transform:none;filter:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.no-js .rv{opacity:1;transform:none;filter:none}
.no-js .gen .img img{filter:none;transform:none}

/* hero entrance (orchestrated once per page) */
.enter > *{opacity:0;transform:translateY(30px);filter:blur(10px)}
.is-ready .enter > *{animation:rise 1.1s var(--ease) forwards}
.is-ready .enter > *:nth-child(2){animation-delay:.12s}
.is-ready .enter > *:nth-child(3){animation-delay:.24s}
.is-ready .enter > *:nth-child(4){animation-delay:.36s}
.is-ready .enter > *:nth-child(5){animation-delay:.48s}
.is-ready .enter > *:nth-child(6){animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none;filter:none}}

/* ---------- page transitions ---------- */
#pt{position:fixed;inset:0;z-index:150;pointer-events:none;overflow:hidden}
#pt .pt-solid{position:absolute;inset:0;background:#fff}
#pt .pt-logo{position:absolute;left:50%;top:50%;width:160px;transform:translate(-50%,-50%);opacity:0}
html.pt-in #pt{pointer-events:auto}
html.pt-in #pt .pt-solid{opacity:1}
html:not(.pt-in) #pt .pt-solid{opacity:0;transition:opacity .5s}
.pt-cover #pt{pointer-events:auto}
.pt-piece{position:absolute;will-change:transform,opacity,clip-path}
/* failsafe: never leave the cover up */
html.pt-in #pt{animation:ptfail 0s 3.5s forwards}
@keyframes ptfail{to{visibility:hidden}}

/* header/footer logo: a soft glow + 3D flip on hover or tap */
.brand{perspective:900px}
.logo-mark{transform-origin:50% 50%}
.brand:hover img,.brand:focus-visible img,.brand.is-flip img,.flogo-lock:hover img{filter:drop-shadow(0 6px 10px rgba(36,6,107,.2)) drop-shadow(0 0 16px rgba(236,25,5,.18))}
.brand:hover .logo-mark,.brand.is-flip .logo-mark,.flogo-lock:hover .logo-mark{animation:lflip 1s cubic-bezier(.65,0,.25,1) both}
@keyframes lflip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ---------- type effects ---------- */
h1.is-split{color:var(--navy)}
.is-split .w{display:inline-block;white-space:nowrap}
.is-split .ch{display:inline-block;color:var(--navy);transition:color .25s,text-shadow .25s,transform .35s var(--ease)}
.js .is-split .ch{opacity:0}
.is-ready .is-split .ch{animation:ignite .9s calc(.25s + var(--i) * 22ms) var(--ease) both}
@keyframes ignite{0%{opacity:0;filter:blur(8px);transform:translateY(.3em)}100%{opacity:1;filter:none;transform:none}}
.is-split .ch:hover{color:var(--red);text-shadow:0 0 20px rgba(236,25,5,.35);transform:translateY(-.08em)}
.is-split.lit .ch{animation:none;opacity:1}
.decoding{color:var(--red)}
.svc:hover h3,.post-card:hover h3,.post-card:hover h2,.city:hover h2,.city:hover h3,.value:hover h3{color:var(--red)}
.nav .nav-link:hover,.nav .nav-link[aria-current="page"]{text-shadow:none}

/* logo stage: the particles reassemble into the 3D logo here, on a soft light stage */
.logo-stage{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 clamp(36px,6vw,70px);pointer-events:none;
  background:radial-gradient(48% 40% at 50% 44%,rgba(59,35,145,.07),rgba(59,35,145,0) 70%),radial-gradient(70% 30% at 50% 82%,rgba(236,25,5,.05),transparent 70%)}
.logo-stage .btn-row,.logo-stage a{pointer-events:auto}
.stage-foot{text-align:center;display:grid;justify-items:center;gap:18px}
.stage-foot .btn-row{justify-content:center}
.stage-cap{margin:0;color:var(--navy);font-weight:650;max-width:52ch;font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6}
.stage-fallback{display:none;width:min(520px,80vw);margin:auto auto 40px}
.no-webgl .stage-fallback{display:block}
.no-webgl .logo-stage{min-height:auto;padding-top:60px}
/* no WebGL: the logo mark as a plain picture where the 3D one would stand */
.no-webgl [data-eagle="1"] .hero::after{content:"";position:absolute;right:max(4vw,24px);top:calc(var(--header-h) + 9vh);width:min(23vw,360px);aspect-ratio:1000/717;background:url("../img/logo-mark-hero.webp") center/contain no-repeat;z-index:-1;pointer-events:none}
.no-webgl .page-home .hero::after{top:calc(var(--header-h) + 1vh);width:min(20vw,300px)}
@media (max-aspect-ratio:1/1){.no-webgl [data-eagle="1"] .hero::after{right:auto;left:50%;transform:translateX(-50%);top:calc(var(--header-h) + 8px);width:min(58vw,340px)}}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gutter);position:relative}
.nf::before{content:"";position:absolute;inset:0;z-index:-4;background:radial-gradient(50% 40% at 50% 58%,#fff,rgba(255,255,255,.4) 100%),linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),var(--uas-skyline-image) center bottom/100% auto no-repeat}
.nf .neon-sign{font-size:clamp(6rem,22vw,14rem);line-height:1;margin-bottom:10px}
[data-eagle="1"] .nf{padding-top:calc(var(--header-h) + clamp(170px,26vh,260px))}   /* room for the logo above the words */
.nf .neon-sign{font-size:clamp(4.5rem,16vw,10rem)}

/* ---------- responsive ---------- */
@media (max-width:1320px){
  .header-cta .phone{display:none}
  .brand{--bh:78px}
}
@media (max-width:1180px){
  .u-area{display:none}
  .nav,.header-cta .phone{display:none}
  .menu-btn{display:block}
  .header-cta{margin-left:auto}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .svc-grid,.posts,.cities{grid-template-columns:1fr 1fr}
  .svc-grid--wide .svc:nth-child(6),.svc-grid--wide .svc:nth-child(9){grid-column:auto}
  .svc-grid--wide .svc:nth-child(6) .frame .img,.svc-grid--wide .svc:nth-child(9) .frame .img{aspect-ratio:4/3}
  .values{grid-template-columns:1fr}
  .split,.area,.quote,.contact-grid,.phero--split .wrap,.svc-body,.mv{grid-template-columns:1fr}
  .split--rev > :first-child{order:0}
  .aside{position:static}
  .cta-band{grid-template-columns:1fr}
}
/* portrait screens: the panorama becomes a band at the top (the logo floats over it); the words start below it on white */
@media (max-aspect-ratio:1/1){
  .hero,.phero{--band:30vw}
  [data-eagle="1"] .hero,[data-eagle="1"] .phero{--band:min(58vw,330px)}
  .hero{padding-top:calc(var(--header-h) + var(--band) + 18px);align-items:flex-start}
  .phero{padding-top:calc(var(--header-h) + var(--band) + 18px)}
  .page-home .hero::before{display:none}
  .no-webgl .page-home .hero::before{display:block;z-index:-4;bottom:auto;height:calc(var(--header-h) + var(--band) + 12px);background:linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 24%),linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),var(--uas-skyline-image) 63% 45%/auto 200% no-repeat}
  .phero{--band:min(58vw,330px)}
  .phero::before,.phero--split::before{display:none}
  .no-webgl .phero::before{display:block;z-index:-4;bottom:auto;height:calc(var(--header-h) + var(--band) + 12px);background:linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 24%),linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),var(--uas-skyline-image) 63% 45%/auto 200% no-repeat}
}
@media (max-width:640px){
  :root{--util-h:30px;--header-h:calc(72px + var(--util-h))}
  .util{font-size:.72rem}.util-in{gap:12px}.u-area,.u-soc,.u-lic b{display:none}.u-lic::after{content:"Licensed C-45 Sign Contractor";order:-1;font-weight:700;color:#fff}.u-lic{gap:6px}.u-lic svg{display:none}.util-in{overflow:hidden;justify-content:center}.u-tel{margin-left:0}
  .kicker.chase{flex-wrap:wrap;row-gap:.35em;letter-spacing:.1em}
  body{font-size:16px}
  .svc-grid,.posts,.cities{grid-template-columns:1fr}
  .svc-grid--wide .svc:nth-child(1){grid-column:auto}
  .svc-grid--wide .svc:nth-child(1) .frame .img{aspect-ratio:4/3}
  .form{grid-template-columns:1fr}
  .header-cta .btn{display:none}
  .brand{--bh:62px;margin-left:-12px}
  @media (max-width:375px){.brand{--bh:54px}.is-scrolled .brand{--bh:50px}}
  .is-scrolled .brand{--bh:56px}
  .fgrid{grid-template-columns:1fr}
  .hero{padding-bottom:110px;align-items:flex-end}
  .scroll-cue{display:none}
  .masonry{columns:2 140px;column-gap:10px}
  .masonry .tile{margin-bottom:10px}
  .lb{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lb figure{grid-column:1;height:calc(100vh - 120px)}
  .lb .lb-prev,.lb .lb-next{display:none}
  .post-nav{grid-template-columns:1fr}
  .post-nav a:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.enter > *{opacity:1!important;transform:none!important;filter:none!important}
  .gen .img img{filter:none!important;transform:none!important}
  .marquee-track{animation:none}
}
@media print{body{background:#fff}#bg3d,.site-header,#pt{display:none}.hero::before,.phero::before{display:none}body{background:#fff;color:#000}}

/* Phones: a shorter footer. Quick links and Services sit side by side, the social icons and the bottom line are centred. */
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr 1fr;gap:34px 18px}
  .fgrid > .flogo,.fgrid > div:last-child{grid-column:1/-1}
  .fgrid ul a{font-size:.92rem}
  .flogo .socials{justify-content:center}
  .fbottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
  .fcredit{justify-content:center}
}
/* Photo viewer: the viewer handles pinch, drag and double-tap itself, so the page never zooms behind it */
.lb{touch-action:none;-webkit-user-select:none;user-select:none}
.lb figure{overflow:hidden}
.lb img{will-change:transform;-webkit-user-drag:none;touch-action:none}
.lb.is-zoomed img{cursor:grab}
.lb.is-zoomed img:active{cursor:grabbing}
.lb .lb-close{z-index:3}
.lb .lb-prev,.lb .lb-next,.lb .lb-bar{position:relative;z-index:2}

/* ================================================================== v48: Shop Signs mega-menu, catalog, product pages, quote builder */
.has-drop--mega{position:static}
.drop--mega{top:calc(100% - 6px);width:min(1100px,calc(100vw - 48px));min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 18px;padding:22px 22px 16px}
.mcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.mhead{margin:0 0 6px;padding:0 10px 8px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red-t)}
.drop--mega a{padding:8px 10px;font-size:.92rem}
.mfoot{grid-column:1/-1;display:flex;align-items:center;gap:26px;margin-top:10px;padding:14px 10px 2px;border-top:1px solid var(--line)}
.mfoot .btn{margin-left:auto;color:#fff}
.drop--mega .mfoot a.link-arrow{padding:0 0 2px;border-radius:0;background:none}
.drop--mega .mfoot a.btn{padding:0 1.4em}
.mnav .mgroup > span{display:block;padding:12px 12px 4px;font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-t)}
.mnav .mgroup ul{padding:0}
/* catalog */
.proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.proof li{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);border-left:4px solid var(--red)}
.proof li:nth-child(even){border-left-color:var(--navy)}
.proof b{font-family:var(--display);font-size:1.05rem;color:var(--navy)}.proof span{color:var(--muted);font-size:.92rem}
.jump{margin:28px 0 0}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cat-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cat-card{display:flex;flex-direction:column;padding:14px 14px 20px;color:inherit}
.cat-card h3{font-size:1.12rem;margin:16px 6px 6px}
.cat-card p{margin:0 6px 16px;color:var(--muted);font-size:.94rem;flex:1}
.cat-card > .link-arrow,.cat-actions{margin:0 6px}
.cat-card > .link-arrow{align-self:flex-start}
.cat-link{color:inherit}
.cat-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cat-q{font-weight:700;font-size:.9rem;color:var(--red-t)}
.cat-q:hover{text-decoration:underline}
/* process */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:p}
.pstep{position:relative;padding:24px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.pstep h3{font-size:1.15rem;margin:10px 0 6px}.pstep p{margin:0;color:var(--muted);font-size:.95rem}
.pnum{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.08em;color:#fff;background:var(--navy);border-radius:999px;padding:4px 11px}
.pstep:nth-child(even) .pnum{background:var(--red)}
.pstep:not(:last-child)::after{content:"";position:absolute;top:36px;right:-14px;width:10px;height:10px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:rotate(45deg)}
/* product detail */
.pgal{display:grid;gap:12px}
.pmain{display:block;cursor:zoom-in}
.pthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pthumb{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1;border:1px solid var(--line);cursor:zoom-in;background:var(--sky)}
.pthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pthumb:hover img{transform:scale(1.06)}
.variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.variant{padding:24px 24px 22px;border-top:3px solid var(--red)}
.variant:nth-child(even){border-top-color:var(--navy)}
.variant h3{font-size:1.1rem;margin:0 0 8px}.variant p{margin:0;color:var(--muted);font-size:.96rem}
.split--top{align-items:start}
.specs{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:.95rem}
.specs th,.specs td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{width:34%;font-weight:700;color:var(--navy);background:var(--mist)}
.note{font-size:.88rem;color:var(--muted);margin-top:12px}
.art{padding:clamp(22px,3vw,34px)}.art h3{margin-bottom:16px}.art .checks{margin:0}
/* quote builder */
.qwiz{padding:clamp(22px,4vw,48px);max-width:980px;margin-inline:auto}
.qbar{display:none}
.qstep{border:0;margin:0 0 34px;padding:0;min-width:0}
.qstep legend{display:block;padding:0;margin-bottom:20px;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--navy);line-height:1.2}
.qn{display:block;font-family:var(--body);font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red-t);margin-bottom:6px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.tcard,.pill{position:relative;cursor:pointer}
.tcard input,.pill input{position:absolute;opacity:0;width:1px;height:1px}
.tcard span{display:flex;align-items:center;min-height:58px;padding:12px 16px 12px 44px;border-radius:14px;border:1px solid var(--line-2);background:#fff;font-weight:650;color:var(--navy);transition:border-color .2s,box-shadow .2s,background .2s}
.tcard span::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid var(--line-2);background:#fff;transition:all .2s}
.tcard input:checked + span{border-color:var(--navy);background:var(--tint);box-shadow:0 0 0 3px rgba(36,6,107,.12)}
.tcard input:checked + span::before{border:5px solid var(--red)}
.tcard input:focus-visible + span,.pill input:focus-visible + span{outline:3px solid var(--red);outline-offset:2px}
.flabel{display:block;font-weight:750;font-size:.86rem;margin-bottom:9px;color:var(--navy)}.flabel small,.field label small{font-weight:500;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-weight:650;font-size:.93rem;color:var(--muted);transition:all .2s}
.pill input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.qstep > .err{display:none;color:#c0102a;font-size:.88rem;font-weight:700;margin:12px 0 0}
.qstep.invalid > .err{display:block}
.drop-zone{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:140px;padding:22px;border-radius:16px;border:2px dashed var(--line-2);background:var(--mist);text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin:0!important}
.drop-zone:hover,.drop-zone.over{border-color:var(--navy);background:var(--tint)}
.drop-zone svg{width:28px;height:28px;color:var(--red)}.drop-zone b{font-family:var(--display);color:var(--navy)}.drop-zone span{font-size:.86rem;color:var(--muted);font-weight:500}
.vh-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.vh-file:focus-visible + .flist,.upl:focus-within .drop-zone{outline:3px solid var(--red);outline-offset:2px}
.flist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.flist li{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:.9rem}
.flist li.bad{border-color:#d0142c;color:#c0102a}
.upl.invalid .drop-zone{border-color:#d0142c}
.consent{font-size:.86rem;color:var(--muted);margin:4px 0 0}
.qnav{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.qwiz .q-back,.qwiz .q-next{display:none}
.qalt{text-align:center;margin-top:22px;color:var(--muted)}
.qwiz.sending .q-send{opacity:.6;pointer-events:none}
/* with JavaScript: one step at a time */
.js .qwiz .qbar{display:flex;list-style:none;margin:0 0 30px;padding:0;gap:8px;counter-reset:none}
.js .qbar li{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--mist);font-size:.86rem;font-weight:700;color:var(--muted);border-bottom:3px solid transparent}
.js .qbar li span{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--line-2);font-size:.8rem}
.js .qbar li.on{background:var(--tint);color:var(--navy);border-bottom-color:var(--red)}
.js .qbar li.on span,.js .qbar li.done span{background:var(--navy);color:#fff;border-color:var(--navy)}
.js .qwiz .qstep{display:none;margin-bottom:28px}
.js .qwiz .qstep.on{display:block;animation:qin .45s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .qwiz .q-back,.js .qwiz .q-next{display:inline-flex}
.js .qwiz .q-send{display:none}
.js .qwiz[data-at="0"] .q-back{visibility:hidden}
.js .qwiz[data-at="3"] .q-next{display:none}
.js .qwiz[data-at="3"] .q-send{display:inline-flex}
.qnav .q-back{margin-right:auto}
@media (max-width:1180px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.drop--mega{gap:6px 10px}}
@media (max-width:980px){.cat-grid,.cat-grid--3,.variants{grid-template-columns:repeat(2,minmax(0,1fr))}.process,.proof{grid-template-columns:repeat(2,1fr)}.pstep::after{display:none}.split--top{grid-template-columns:1fr}}
@media (max-width:640px){.cat-grid,.cat-grid--3,.variants{grid-template-columns:1fr}.proof{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr}
  .js .qbar li{font-size:0;gap:0;justify-content:center;padding:8px}.js .qbar li span{font-size:.8rem}.tgrid{grid-template-columns:1fr 1fr}.tcard span{font-size:.88rem;padding-left:38px;min-height:54px}.tcard span::before{left:12px}
  .qnav .btn{flex:1}.qnav .q-back{flex:0 0 auto}.specs th{width:40%}}
.drop--mega::before{content:"";position:absolute;left:0;right:0;top:-34px;height:34px}
.qwiz{scroll-margin-top:calc(var(--header-h) + 16px)}
.tcard{display:flex}.tcard span{position:relative;flex:1}
@media (max-width:640px){.tgrid{gap:8px}.tcard span{padding:10px 10px 10px 34px;font-size:.86rem;line-height:1.3}.tcard span::before{left:11px;width:14px;height:14px;margin-top:-7px}}

/* v49: the pale veil over the background picture is fixed to the screen, so the picture looks the same
   above and below the end of the page header (no hard colour line) */
@media (min-aspect-ratio:1/1){
  .page-home .hero::before,.phero::before,.phero--split::before{position:fixed;inset:0}
  .no-webgl .page-home .hero::before,.no-webgl .phero::before{position:absolute}
}

/* v49: blog posts */
.post-body.prose{font-size:1.06rem;line-height:1.75}
.post-body .lead-in{font-size:1.2rem;line-height:1.65;color:var(--navy);font-weight:500;margin-bottom:34px}
.post-body h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;margin:44px 0 14px}
.post-body h3{font-family:var(--body);font-size:1rem;font-weight:800;color:var(--navy);margin:22px 0 12px}
.pnum-sec{margin:34px 0;padding:0 0 30px;border-bottom:1px solid var(--line)}
.pnum-sec:last-of-type{border-bottom:0}
.post-body h2.nh{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:clamp(1.25rem,2.2vw,1.55rem);margin:0 0 12px}
.nb{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;font-size:1rem;font-weight:700;letter-spacing:.02em}
.pnum-sec:nth-of-type(even) .nb{background:var(--red)}
.nh em{font-style:normal;font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.nh em.hot{background:rgba(236,25,5,.1);color:var(--red-t)}.nh em.not{background:var(--tint);color:var(--muted)}
.tip{display:flex;gap:14px;align-items:flex-start;margin:16px 0 0;padding:16px 18px;border-radius:14px;background:var(--mist);border-left:4px solid var(--red)}
.tip b{flex:none;font-family:var(--display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red-t);padding-top:3px}
.tip p{margin:0;font-size:.98rem}
.post-body .checks{margin:0 0 10px}
.post-cta{margin:50px 0 0;padding:clamp(24px,4vw,38px);border-radius:var(--r-lg);background:linear-gradient(135deg,var(--navy),#3a1592);color:#e9e5ff}
.post-cta h2{color:#fff;margin:0 0 10px}.post-cta p{color:#e3defc}.post-cta .btn-row{margin:20px 0 6px}
.post-cta .btn--tube{color:#fff;border-color:rgba(255,255,255,.6)}
.post-cta-more{font-size:.92rem;margin:14px 0 0}.post-cta-more a{color:#fff;text-decoration:underline}
.ptag{display:inline-block;margin-right:10px;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--navy);font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.post-card .ptag{margin:0 0 0 8px;vertical-align:1px}
.post-cta a:not(.btn){color:#fff;border-bottom:1px solid rgba(255,255,255,.6);text-decoration:none}
.post-cta .btn--tube{background:transparent}
.post-card .ptag{align-self:flex-start;width:auto;margin:6px 10px 0}
.prose .checks li::before,.post-body .checks li::before{content:none;display:none}
.prose .checks li{padding-left:16px}
.prose ul.checks li{padding:14px 16px}.prose ul.checks li::before{content:none}

/* ================================================================== v51: home sections in the order of the client's picture */
.hsec{padding-block:clamp(34px,5vw,60px)}
.rule-head{display:flex;align-items:center;gap:22px;margin:0 0 clamp(22px,3vw,34px)}
.rule-head::before,.rule-head::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--red))}
.rule-head::after{background:linear-gradient(90deg,var(--red),transparent)}
.rule-head h2{margin:0;font-size:clamp(1.5rem,2.6vw,2.15rem);text-align:center;white-space:nowrap}
.exgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.exbox{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--navy);box-shadow:0 14px 30px -20px rgba(23,13,72,.55);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.exi{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sky)}
.exi img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.exl{display:block;padding:11px 12px;text-align:center;color:#fff;font-family:var(--display);font-weight:600;font-size:.98rem;line-height:1.25;background:var(--navy);border-top:3px solid var(--red)}
.exbox:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(23,13,72,.7)}
.exbox:hover .exi img{transform:scale(1.06)}
.exmore{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin:26px 0 0}
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.hstep{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.hstep:not(:last-child)::after{content:"\2192";position:absolute;right:-26px;top:50%;transform:translateY(-50%);color:var(--navy);font-size:1.3rem;font-weight:700}
.hico{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(236,25,5,.08);color:var(--red)}
.hico svg{width:26px;height:26px}
.hstep h3,.hw h3{font-size:1.05rem;margin:2px 0 4px}.hstep p,.hw p{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.fgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fproj{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--navy);box-shadow:0 18px 40px -24px rgba(23,13,72,.6)}
.fpi,.fpi img{display:block;width:100%;height:100%}.fpi img{object-fit:cover;transition:transform .7s var(--ease)}
.fproj:hover .fpi img{transform:scale(1.05)}
.fpt{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(0deg,rgba(20,8,60,.92),rgba(20,8,60,.55) 60%,transparent);color:#fff;display:flex;flex-direction:column;gap:2px}
.fpt small{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ffb4ab}
.fpt b{font-family:var(--display);font-size:1.2rem;line-height:1.2}
.fpt em{font-style:normal;font-size:.86rem;font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-top:4px}.fpt em svg{width:15px;height:15px}
.hwhy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hw{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.hrevs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hrev{margin:0;padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.hrev .stars{display:flex;gap:2px;color:#e8a317}.hrev .stars svg{width:18px;height:18px}
.hrev blockquote{margin:12px 0 14px;font-weight:600;color:var(--navy);line-height:1.5;flex:1}
.hrev figcaption{font-size:.88rem;color:var(--muted)}
@media (max-width:1100px){.hsteps{grid-template-columns:repeat(2,minmax(0,1fr))}.hstep:nth-child(2)::after{display:none}.hwhy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.exgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgrid3,.hrevs{grid-template-columns:1fr}.fproj{aspect-ratio:16/10}}
@media (max-width:640px){.hsteps,.hwhy{grid-template-columns:1fr;gap:12px}.hstep::after{display:none}.rule-head{gap:12px}.rule-head h2{white-space:normal;font-size:1.4rem}.exl{font-size:.86rem;padding:9px 8px}.exgrid{gap:10px}}

/* v51: CNC routing services page */
.cnc-intro{padding:clamp(22px,3vw,32px) clamp(22px,4vw,40px);border-left:5px solid var(--red)}
.cnc-intro p{margin:0;font-size:1.1rem;line-height:1.7;color:var(--navy);font-weight:500}
.cnc-serv{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.cserv{grid-column:span 2;padding:26px 24px}.cserv:nth-child(4),.cserv:nth-child(5){grid-column:span 3}
.cserv h3{font-size:1.15rem;margin:16px 0 8px}.cserv p{margin:0;color:var(--muted);font-size:.96rem}
.cico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;flex:none}
.cico svg{width:26px;height:26px}
.cserv:nth-child(even) .cico{background:var(--red)}
.mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mats li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy)}
.mats li:nth-child(even){border-top-color:var(--red)}
.mats b{font-family:var(--display);font-size:1.05rem;color:var(--navy)}.mats span{color:var(--muted);font-size:.93rem}
.cnc-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cwhy{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cwhy:last-child{grid-column:1/-1}
.cwhy h3{font-size:1.08rem;margin:2px 0 6px}.cwhy p{margin:0;color:var(--muted);font-size:.95rem}
.slogan{font-family:var(--display);font-weight:600;letter-spacing:.02em;opacity:.85;margin-top:10px}
@media (max-width:980px){.cnc-serv{grid-template-columns:1fr 1fr}.cserv,.cserv:nth-child(4),.cserv:nth-child(5){grid-column:span 1}.cserv:last-child{grid-column:1/-1}.mats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cnc-serv,.mats,.cnc-why{grid-template-columns:1fr}.cserv:last-child{grid-column:auto}}
/* v51: one colour for menu dots; centred top bar; logo without a box */
.drop a .dot,.drop a:nth-child(even) .dot,.aside ul a .dot,.aside ul li:nth-child(even) a .dot{background:var(--navy);box-shadow:0 0 0 3px rgba(36,6,107,.12)}
.util-in{justify-content:center;gap:28px}
.logo-plate{background:none;border:0;box-shadow:none;padding:0}
.logo-plate::before,.logo-plate::after{display:none}
.logo-plate img{filter:drop-shadow(0 14px 24px rgba(23,13,72,.18))}

/* ================================================================== v52 */
/* service-area map: no lighter band at the top, a soft city street map underneath */
.constellation{aspect-ratio:460/380;background:linear-gradient(160deg,#f7f6fd,#eceafa)}
.constellation.glass{padding:0}
.citymap .blocks path{stroke:rgba(36,6,107,.07);stroke-width:1}
.citymap .road{fill:none;stroke:rgba(36,6,107,.16);stroke-width:5;stroke-linecap:round}
.citymap .road--red{stroke:rgba(236,25,5,.14)}
.citymap .road + .road{stroke-width:4}
.citymap .river{fill:none;stroke:rgba(90,120,220,.18);stroke-width:7;stroke-linecap:round}
.citymap .parks ellipse{fill:rgba(36,6,107,.05)}

/* headings: a slow light sweep through the letters, and a short underline that draws in */
@property --na{syntax:"<angle>";initial-value:0deg;inherits:false}
.glow-text,.head h2,.rule-head h2{background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 42%,#5a2bd9 47%,var(--red) 50%,#5a2bd9 53%,var(--navy) 58%,var(--navy) 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hshine 9s ease-in-out infinite}
@keyframes hshine{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
.head h2.flick{position:relative;padding-bottom:.28em}
.head h2.flick::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--navy),var(--red));transform:scaleX(0);transform-origin:left;transition:transform 1s .25s var(--ease)}
.head h2.flick.is-in::after{transform:scaleX(1)}
.rule-head.rv{filter:none}
.rule-head.rv::before,.rule-head.rv::after{transform:scaleX(0);transition:transform 1.1s .15s var(--ease)}
.rule-head.rv::before{transform-origin:right}.rule-head.rv::after{transform-origin:left}
.rule-head.rv.is-in::before,.rule-head.rv.is-in::after{transform:scaleX(1)}

/* How We Work: the steps light up one after another, the arrows flow */
.hstep{animation:hstepOn 8s ease-in-out infinite}
.hstep:nth-child(2){animation-delay:2s}.hstep:nth-child(3){animation-delay:4s}.hstep:nth-child(4){animation-delay:6s}
@keyframes hstepOn{0%,30%,100%{transform:none;border-color:var(--line);box-shadow:var(--shadow)}8%,22%{transform:translateY(-6px);border-color:rgba(236,25,5,.55);box-shadow:0 18px 34px -18px rgba(236,25,5,.45),0 0 0 3px rgba(236,25,5,.08)}}
.hstep .hico{animation:hicoOn 8s ease-in-out infinite;animation-delay:inherit}
.hstep:nth-child(2) .hico{animation-delay:2s}.hstep:nth-child(3) .hico{animation-delay:4s}.hstep:nth-child(4) .hico{animation-delay:6s}
@keyframes hicoOn{0%,30%,100%{background:rgba(236,25,5,.08);color:var(--red);transform:none}10%,20%{background:var(--red);color:#fff;transform:scale(1.08) rotate(-6deg)}}
.hstep:not(:last-child)::after{animation:hflow 1.6s ease-in-out infinite}
@keyframes hflow{0%,100%{transform:translateY(-50%) translateX(-3px);opacity:.45}50%{transform:translateY(-50%) translateX(4px);opacity:1;color:var(--red)}}

/* neon tube running around a frame (replaces the corner brackets) */
.neon-run,.frame .hud{--nc1:#ff2a14;--nc2:#3d6bff}
.frame .hud{inset:-4px;border-radius:calc(var(--r-md) + 4px);padding:2px;background:conic-gradient(from var(--na),transparent 0deg,transparent 200deg,var(--nc1) 250deg,#fff 268deg,var(--nc2) 290deg,transparent 340deg);
  -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 exclude,linear-gradient(#000 0 0);animation:nspin 6s linear infinite;opacity:.95}
.frame .hud::before,.frame .hud::after{display:none}
.frame:hover .hud{animation-duration:2.4s}
@keyframes nspin{to{--na:360deg}}
/* Why Choose Us: neon boxes */
.hw{position:relative;isolation:isolate;border-color:transparent;transition:transform .35s var(--ease)}
.hw::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;z-index:-1;background:conic-gradient(from var(--na),#3d6bff,#ff2a14,#fff,#3d6bff,#ff2a14,#3d6bff);
  -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 exclude,linear-gradient(#000 0 0);animation:nspin 7s linear infinite}
.hw::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;box-shadow:0 0 0 1px rgba(255,42,20,.25),0 0 18px -2px rgba(255,42,20,.35),0 0 30px -6px rgba(61,107,255,.35);animation:nflick 5s steps(1) infinite}
.hw:nth-child(2)::before{animation-delay:-1.7s}.hw:nth-child(3)::before{animation-delay:-3.4s}.hw:nth-child(4)::before{animation-delay:-5.1s}
.hw:nth-child(2)::after{animation-delay:-1.3s}.hw:nth-child(3)::after{animation-delay:-2.6s}.hw:nth-child(4)::after{animation-delay:-3.9s}
.hw .hico{background:var(--navy);color:#fff;box-shadow:0 0 14px -2px rgba(255,42,20,.65)}
.hw .hico svg{filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}
.hw:hover{transform:translateY(-4px)}
@keyframes nflick{0%,100%{opacity:1}43%{opacity:.35}44%{opacity:1}46%{opacity:.5}47%{opacity:1}}

/* the logo on its own: no box, no shadow, nothing clipped; a light sweep and tilt on hover */
.logo-plate{overflow:visible;width:fit-content;max-width:100%;margin-inline:auto;position:relative;transition:transform .6s var(--ease)}
.logo-plate img{display:block;filter:none!important;animation:none!important;max-width:min(100%,440px);height:auto}
.logo-plate::after{content:"";display:block!important;position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.85) 48%,rgba(255,120,100,.6) 52%,transparent 70%);background-size:260% 100%;background-position:120% 0;
  -webkit-mask:url("../img/logo-large-v52.webp") center/100% 100% no-repeat;mask:url("../img/logo-large-v52.webp") center/100% 100% no-repeat;transition:opacity .3s}
.logo-plate:hover{transform:perspective(900px) rotateY(-8deg) rotateX(3deg) scale(1.03)}
.logo-plate:hover::after{opacity:1;animation:lsweep 1.2s var(--ease) forwards}
@keyframes lsweep{to{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){.glow-text,.head h2,.rule-head h2,.hstep,.hstep .hico,.hstep::after,.frame .hud,.hw::before,.hw::after{animation:none!important}}

/* v53 */
/* the white wash over the background picture fades out near the bottom logo */
.page-home .hero::before,.phero::before,.phero--split::before{opacity:var(--veil,1)}
/* split headline letters: no clipped gradient (it left a ghost copy when a letter moved on hover); a colour wave instead */
.is-split{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--navy)!important}
.is-ready .enter > .is-split{animation:rise 1.1s var(--ease) forwards}
.is-ready .enter > .is-split:nth-child(2){animation-delay:.12s}
:not(.enter) > .is-split{animation:none}
.is-ready .is-split .ch{animation:ignite .9s calc(.25s + var(--i) * 22ms) var(--ease) both,chwave 9s calc(2s + var(--i) * 45ms) ease-in-out infinite}
.is-split.lit .ch{animation:chwave 9s calc(2s + var(--i) * 45ms) ease-in-out infinite;opacity:1}
@keyframes chwave{0%,8%,100%{color:var(--navy)}4%{color:var(--red)}}
.is-split .ch:hover{text-shadow:none}
/* engraved downtown LA drawing behind the white parts of every page */
html{background:#fafafa}
body::before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;background:url("../img/la-relief-v57.webp") center 58%/cover no-repeat;opacity:var(--relief,1);transition:opacity .25s linear}
@media (max-aspect-ratio:1/1){body::before{background-size:auto 70%;background-position:center bottom;background-color:#fafafa}}
@media print{body::before{display:none}}

/* v78: offscreen decorative headline animations are paused, not removed. */
.glow-text.perf-offscreen,.head h2.perf-offscreen,.rule-head h2.perf-offscreen,
.is-split.perf-offscreen .ch{animation-play-state:paused!important}
/* v79: endless decorative animations run only while their section is near the screen (main.js toggles .perf-live) */
.js .head h2:not(.perf-live),.js .rule-head h2:not(.perf-live),
.js .frame:not(.perf-live) .hud,
.js .hwhy:not(.perf-live) .hw::before,.js .hwhy:not(.perf-live) .hw::after,
.js .hsteps:not(.perf-live) .hstep,.js .hsteps:not(.perf-live) .hstep .hico,.js .hsteps:not(.perf-live) .hstep::after,
.js .constellation:not(.perf-live) .ln,.js .constellation:not(.perf-live) circle.halo,
.js .logo-plate:not(.perf-live) img,.js .logo-plate:not(.perf-live)::after{animation-play-state:paused!important}