/* ADA CONTRAST */
:root{
  --surface-0: #ffffff;
  --surface-50: #f8f9fb;      /* light footer/bg */
  --text-900: #111111;        /* body text on light */
  --brand-blue-700: #0b3d91;  /* links / light backgrounds */
  --brand-blue-800: #062e6f;  /* darker blue (visited/hover or gradient end) */
  --brand-blue-750: #144ea1;  /* gradient start (slightly lighter than 700 but still AA vs white) */
  --accent-red-600: #b91c1c;  /* your alert red */
}

.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}

/* Base Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: #0f172a;
  background: #ffffff;
}

/* Layout */
.container { width: min(1150px, 92%); margin: 0 auto; }
.header-offset { padding-top: 84px; }

/* Brand Colors (derived from logo) */
:root{
  --brand-600:#2d78bb;
  --brand-700:#2367a3;
  --brand-800:#1a568b;
  --ink:#0f172a;
  --soft:#f1f5f9;
  --accent:#1f7bd1;
}

/* Top Bar / Hours */
.topbar {
  background: var(--soft);
  color:#334155;
  font-size: 14px;
}
.topbar .inner{display:flex; gap: 16px; align-items:center; justify-content:space-between; padding: 6px 0;}
.topbar .tagline{font-weight:600;}
.topbar .hours{opacity:.9}

/* NAV */
nav.nav { position: sticky; top:0; z-index: 50; background:#fff; border-bottom: 1px solid #e2e8f0; }
.nav .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; }
.brand img{ height:40px; width:auto; }
.brand-name{ color: var(--ink); font-weight:800; letter-spacing:.2px; font-size: 1.1rem; }
.menu-btn{ background:none; border:none; display:none; cursor:pointer; }
.menu-btn[aria-expanded="true"] .line:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .line:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .line:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.menu-btn .line{ width:24px; height:2px; background:#0f172a; display:block; margin:5px 0; transition: .2s ease; }

.nav-links{ list-style:none; display:flex; gap: 22px; align-items:center; }
.nav-links a{ text-decoration:none; color:#0f172a; font-weight:600; font-size: .98rem; letter-spacing:.15px; position:relative; padding: 10px 0; }

.nav-links li{ position:relative; }

.submenu{
  position:absolute; top: 100%; left:0; background:#fff; border:1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(2,8,23,.08);
  padding:10px; min-width: 260px; display:none;
}
.submenu a{ display:block; padding:10px 12px; border-radius:8px; }
.submenu a:hover{ background: var(--soft); }
.show .submenu{ display:block; }

/* Mobile */
@media (max-width: 880px){
  .menu-btn{ display:block; }
  .nav-links{ position: fixed; inset: 70px 0 0 0; background:#fff; flex-direction:column; align-items:stretch; padding: 18px; gap: 8px; transform: translateY(-10px); opacity:0; pointer-events:none; transition: .2s ease; }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .submenu{ position:static; border:none; box-shadow:none; padding:0; display:block; }
}

/* Hero */
.hero{
  background: linear-gradient(120deg, rgba(45,120,187,.08), rgba(35,103,163,.08));
  padding: 64px 0 72px;
}
.hero h1{ font-size: clamp(30px, 5vw, 52px); line-height:1.1; letter-spacing: .2px;}
.hero p{ font-size: clamp(16px, 1.6vw, 18px); margin-top: 14px; opacity:.9; }
.hero .cta{ margin-top: 28px; display:flex; gap: 14px; flex-wrap:wrap; }
.button{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding: 12px 18px; border-radius: 999px; font-weight:700; border:1px solid transparent;
}
.button.primary{ background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); color:#fff; }
.button.ghost{ border-color:#cbd5e1; color:#0f172a; }

/* Hours Card */
.hours-card{
  margin-top: 20px;
  display:grid; grid-template-columns: 1fr; gap: 10px;
  background:#fff; border:1px solid #e2e8f0; border-radius: 16px; padding: 14px;
}
.hours-card strong{ color: var(--brand-800); }

/* Sections */
.section{ padding: 56px 0; }
.section h2{ font-size: 32px; margin-bottom: 18px; }
.grid{ display:grid; gap: 18px; }
.cards-3{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card{ border:1px solid #e2e8f0; border-radius: 16px; padding: 18px; background:#fff; }
.card h3{ margin-bottom: 10px; color: var(--brand-800); }
.price{ font-weight:800; margin-bottom: 10px; }
.badge{ background: var(--soft); padding: 2px 10px; border-radius: 999px; font-size: 12px; color:#334155; display:inline-block; }

/* Footer */
footer{ margin-top: 60px; padding: 30px 0; border-top:1px solid #e2e8f0; color:#334155; background:#fff; }
footer a{ color: var(--brand-700); text-decoration:none; }



.submenu {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-links li:hover > .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.submenu {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.9);
}

.submenu {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.submenu a {
  transition: transform 0.15s ease, background 0.15s ease;
}
.submenu a:hover {
  transform: scale(1.03);
}

/* Submenu item hover scale */
.submenu a {
  transition: transform 0.12s ease, background-color 0.12s ease;
  transform-origin: left center;
}
.submenu a:hover{
  transform: scale(1.02);
}

/* Top-level nav link hover animation */
.nav-links > li > a {
  transition: transform 0.15s ease, color 0.15s ease;
}
.nav-links > li > a:hover {
  transform: translateY(-2px);
  color: var(--brand-700);
}

/* Animated underline grow from center */
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-800));
  border-radius: 3px;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after {
  width: 100%;
}

/* Animated underline that grows from the center */
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-800));
  border-radius:3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{
  transform: scaleX(1);
}

/* Fix: keep underline heights aligned by preventing vertical shift on hover */
.nav-links > li > a:hover { transform: none; }

/* Normalize nav links so underline sits at the same position for all items */
.nav-links a{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 44px; /* uniform click target */
  position: relative;
}
.nav-links a::after{
  bottom: 4px; /* consistent offset above edge */
}

/* === NAV UNDERLINE ALIGNMENT OVERRIDES === */
/* Normalize link box so underline sits at the same Y for all items */
nav.nav .nav-links a{
  display: inline-block;
  position: relative;
  line-height: 1;
  padding-block: 18px; /* top & bottom padding */
  height: auto; /* let padding define the height */
  transform: none !important; /* prevent vertical shifts */
}

/* Single source of truth for the animated underline */
nav.nav .nav-links a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;         /* tweak as needed: 4–8px works; this is centered visually */
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-800));
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

/* Show underline on hover/active consistently */
nav.nav .nav-links a:hover::after,
nav.nav .nav-links a[aria-current="page"]::after{
  transform: scaleX(1);
}

/* Comfortable list spacing inside cards */
.card {
  padding: 20px 22px; /* a bit more right/left padding */
}
.card ul{
  padding-left: 1.25rem;   /* move bullets away from the card edge */
  margin: 8px 0 0 0;
  list-style: disc;
  list-style-position: outside;
}
.card li{
  margin: 6px 0;
}

/* Nav color: pale yellow */
:root{
  --nav-bg: #F9E79B;
  --nav-border: #E6D47B; /* a touch darker for the bottom border */
}

nav.nav{
  background: var(--nav-bg);
  border-bottom-color: var(--nav-border);
}

/* Mobile menu panel */
@media (max-width: 880px){
  .nav-links{ background: var(--nav-bg); }
}

/* Submenu panel (keeps blur) */
.submenu{
  background: rgba(249, 231, 155, 0.9);
}

.image-center{ display:flex; justify-content:center; }
.image-center img{ width:768px; max-width:100%; height:auto; border-radius:12px; }
.image-center figcaption{ text-align:center; margin-top:8px; opacity:.8; }

/* FINAL: kill all space between image + caption */
figure.image-center{
  margin:0 !important;
  padding:0 !important;
  display:grid !important; /* avoids baseline gaps */
  gap:0 !important;
}
figure.image-center > img{
  display:block !important;
  margin:0 !important;
}
figure.image-center > figcaption,
figure.image-center > .hero-caption{
  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
}

/* Make all three lines bold */
.hero-caption .quote,
.hero-caption .open,
.hero-caption .hours{
  font-weight: 700;
}

/* 3-up button grid */
.button-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 780px){
  .button-grid{ grid-template-columns: 1fr; }
}

/* Full-width buttons in grid */
.button.block{
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 14px 20px;
}

/* Bigger logo without making the nav bar thicker */
.nav .nav-inner { overflow: visible; } /* let the logo bleed a bit if needed */

.brand img{
  height: 40px;                /* keep the layout height */
  transform: scale(1.35);      /* visually enlarge */
  transform-origin: left center;
}

/* optional tiny nudge if it looks a hair low on your screen */
.brand img{ transform: scale(1.35) translateY(-1px); }

/* scale down a bit on small screens if you want */
@media (max-width: 880px){
  .brand img{ transform: scale(1.2); }
}

/* Footer layout helpers */
.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin:6px 0; }
.footer-legal{
  margin-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  opacity:.85;
}
@media (max-width: 780px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* Centered text block */
.prose.center{ text-align:center; }
.prose.narrow{ max-width: 720px; margin: 12px auto 0; }

/* Two square images */
.grid-two-squares{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}
.grid-two-squares .square{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}
.grid-two-squares .square img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: stack the squares */
@media (max-width: 780px){
  .grid-two-squares{ grid-template-columns: 1fr; }
}

:root { --feature-width: 768px; }               /* single source of truth */

/* use the same width for the hero image */
.image-center > img{ width: var(--feature-width); }

/* a reusable container that matches that width */
.feature-container{
  width: var(--feature-width);
  max-width: 100%;
  margin: 12px auto 0;                          /* centered */
}

/* your two-square grid stays the same, but it now lives inside .feature-container */
.grid-two-squares{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.grid-two-squares .square{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}
.grid-two-squares .square img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Mobile stacks them */
@media (max-width: 780px){
  .grid-two-squares{ grid-template-columns: 1fr; }
}

:root { --feature-width: 768px; } /* if not already set */

/* same width as your wide image */
.feature-container{
  width: var(--feature-width);
  max-width: 100%;
  margin: 0 auto;
}

/* two-up layout */
.promo-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

/* card + image */
.promo-card{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;            /* keep both tiles uniform; adjust if you like */
}
.promo-card img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* overlay title */
.promo-title{
  position: absolute;
  top: 12px; left: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 8px 12px;
  border-radius: 10px;
}

/* caption under both images */
.promo-caption{
  text-align: center;
  margin-top: 12px;
  font-weight: 600;
}

/* stack on mobile */
@media (max-width: 780px){
  .promo-2{ grid-template-columns: 1fr; }
}

/* Titles above & centered over each image */
.promo-card{
  display: grid;
  align-content: start;
  text-align: center;              /* centers plain text */
}

.promo-card img{
  grid-row: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-card .promo-title{
  position: static;                /* not overlaid */
  grid-row: 1;                     /* sits above the image */
  justify-self: center;            /* centers the pill if used */
  margin: 0 0 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  optional pill style:
  background: var(--soft); padding: 6px 10px; border-radius: 10px;
}

/* No-crop promos: keep natural aspect ratio */
.promo-card{
  /* remove the forced ratio */
  aspect-ratio: auto;
}

.promo-card img{
  width: 100%;
  height: auto;          /* grow by natural height */
  object-fit: contain;   /* or just remove this line */
}

/* Contact layout: left info, right big map */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  align-items: start;
}

/* Big map with rounded corners */
.map-embed{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;    /* responsive height */
}
.map-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stack on mobile */
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Keyboard: open submenu when any child has focus */
.nav-links li:focus-within > .submenu{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Clear focus ring so tabbing is visible */
.nav-links a:focus{
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: 6px;
}

/*CSS — drop near bottom of styles.css:*/
/* Visually hidden until focused */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:#fff; color:#000; border:2px solid var(--brand-700); border-radius:8px;
  z-index:9999;
}

/* WCAG wants */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  .submenu{ transition:none; }
  .nav-links a::after{ transition:none; }
}

/* Mobile: collapse the SERVICES submenu until toggled */
@media (max-width: 880px){
  .nav-links .submenu{
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    margin: 0;
    padding: 0;

    max-height: 0;           /* <-- collapses */
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav-links li.sub-open > .submenu{
    max-height: 600px;       /* big enough for all items */
    opacity: 1;
    visibility: visible;
  }
}

/* Center the first H1 inside main on all pages */
main > h1{
  text-align: center;
  margin: 0 auto .75rem;
}

/* Center stuff */
.text-center { text-align: center; }