* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:#dff4ff; color:#dff4ff; font-family:Candara, Optima, 'Segoe UI', sans-serif; font-size:16px;
  line-height:1.5; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }

.mond { max-width:1200px; margin:0 auto; display:grid; gap:7px; padding:7px;
  background:#dff4ff;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(120px,auto);
  grid-template-areas:
    "nav  nav  nav  nav  nav  nav"
    "hero hero hero red  red  imga"
    "hero hero hero yel  blu  imga"
    "abt  abt  abt  abt  svc1 svc2"
    "imgb imgc imgc imgc svc1 svc2"
    "imgb quo  quo  quo  reds reds"
    "con  con  con  con  con  con"
    "foot foot foot foot foot foot"; }

.cell { background:#02101c; color:#dff4ff; padding:22px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.cell.img { padding:0; }

.nav { grid-area:nav; flex-direction:row; align-items:center;
  justify-content:space-between; padding:16px 22px; }
.brand { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-0.01em; text-transform:uppercase; }
.nav nav a { margin-left:22px; font-weight:600; font-size:14px; color:#4a6a7a; }
.nav nav a:hover { color:#00e0ff; }

.hero { grid-area:hero; justify-content:center; }
.kick { text-transform:uppercase; letter-spacing:0.26em; font-size:12px;
  color:#00e0ff; margin-bottom:16px; }
.hero h1 { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; line-height:0.92;
  font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-0.03em; text-transform:uppercase; }
.dek { color:#4a6a7a; margin:18px 0 24px; max-width:34ch; font-size:1.1rem; }
.btn { align-self:flex-start; background:#00e0ff; color:#141414;
  font-weight:800; letter-spacing:0.1em; text-transform:uppercase; font-size:13px;
  padding:14px 26px; }
.btn:hover { background:#dff4ff; color:#02101c; }

.red { grid-area:red; background:#00e0ff; color:#141414; }
.red .big { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; font-size:3.4rem; line-height:1; }
.red .tag { text-transform:uppercase; letter-spacing:0.16em; font-size:11px;
  margin-top:8px; opacity:0.9; }
.yellow { grid-area:yel; background:#8cf1ff; color:#141414; }
.blue { grid-area:blu; background:#015a6a; color:#ffffff; }
.yellow h3,.blue h3 { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; font-size:1.05rem;
  margin-bottom:8px; }
.yellow p,.blue p { font-size:0.9rem; opacity:0.92; }

.imga { grid-area:imga; } .imgb { grid-area:imgb; } .imgc { grid-area:imgc; }

.about { grid-area:abt; }
.about h2 { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; font-size:1.7rem; margin-bottom:10px; }
.about p { color:#4a6a7a; max-width:60ch; }

.svc { }
.mond .svc:nth-of-type(8) { grid-area:svc1; }
.mond .svc:nth-of-type(9) { grid-area:svc2; }
.svc h3 { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; font-size:1.1rem; margin-bottom:8px; }
.svc p { color:#4a6a7a; font-size:0.92rem; }

.quote { grid-area:quo; background:#015a6a; color:#ffffff; }
.quote blockquote { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:700; font-size:clamp(1.2rem,3vw,1.9rem);
  line-height:1.2; }
.quote cite { font-style:normal; margin-top:12px; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; opacity:0.85; }

.redsm { grid-area:reds; background:#8cf1ff; }

.contact { grid-area:con; }
.contact h2 { font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-weight:800; font-size:1.7rem; margin-bottom:8px; }
.contact p { color:#4a6a7a; margin-bottom:16px; }
.lines { display:flex; flex-wrap:wrap; gap:24px; font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif; font-size:1.2rem; }
.lines a:hover { color:#00e0ff; }
.lines span { color:#4a6a7a; font-family:Candara, Optima, 'Segoe UI', sans-serif; font-size:1rem; }

.foot { grid-area:foot; background:#dff4ff; color:#00040a; flex-direction:row;
  justify-content:center; text-align:center; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; padding:16px; }

@media (max-width:820px){
  .mond{ grid-template-columns:1fr 1fr;
    grid-template-areas:
      "nav nav" "hero hero" "red imga" "yel blu"
      "abt abt" "svc1 svc2" "imgb imgc" "quo quo"
      "reds reds" "con con" "foot foot"; }
}


.xq{box-sizing:border-box;font-family:Candara, Optima, 'Segoe UI', sans-serif;color:#dff4ff;padding:56px 24px;width:100%}
.xq *{box-sizing:border-box;margin:0}
.xq .xq-wrap{max-width:1060px;margin:0 auto}
.xq h2{font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif;font-size:1.7rem;line-height:1.2;margin-bottom:8px}
.xq .xq-kick{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#00e0ff;margin-bottom:10px;font-weight:700}

.xq-checklist{list-style:none;padding:0;margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 26px}
.xq-checklist li{position:relative;padding:10px 0 10px 32px;border-bottom:1px dashed rgba(223,244,255,0.14)}
.xq-checklist li::before{content:"\2713";position:absolute;left:0;top:8px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:#00e0ff;color:#141414;font-size:.75rem;font-weight:800}


.xq-hours{border-top:1px solid rgba(223,244,255,0.14)}
.xq-hours-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;align-items:start}
.xq-hours address{font-style:normal;color:#4a6a7a;line-height:1.8;margin-top:8px}
.xq-hourtable{width:100%;border-collapse:collapse}
.xq-hourtable th,.xq-hourtable td{text-align:left;padding:12px 6px;border-bottom:1px solid rgba(223,244,255,0.14)}
.xq-hourtable th{font-family:Futura, 'Century Gothic', 'Segoe UI', sans-serif}
.xq-hourtable td{color:#00e0ff;font-weight:700;text-align:right}


/* =====================================================
   DESIGN DNA: midnight-glass
   Whole-page visual system applied over the layout
   archetype. Appended last so it wins the cascade.
   ===================================================== */
html::before{content:'';position:fixed;inset:0;z-index:99980;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.5));opacity:.5;}
h1,h2,h3{letter-spacing:-0.02em !important;font-weight:700 !important}
img{border-radius:16px !important;box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.18) !important}
a[class*="btn"],button,span[class*="btn"]{border-radius:999px !important;box-shadow:0 10px 30px rgba(0,224,255,.45),inset 0 1px 0 rgba(255,255,255,.25) !important}
div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{border-radius:20px !important;border:1px solid rgba(255,255,255,.16) !important;box-shadow:0 24px 60px rgba(0,0,0,.35) !important}