:root{
  --brand:#0082CB;
  --brand-2:#467FF7;
  --brand-dark:#005f96;
  --teal:#00CBBF;
  --teal-dark:#00a89e;
  --sand:#E0A85B;
  --sand-dark:#c98a36;
  --ink:#1f2228;
  --ink-soft:#555555;
  --ink-mute:#766B6B;
  --line:#e3e8ef;
  --bg:#ffffff;
  --bg-2:#f3f3f3;
  --bg-3:#eaf4fb;
  --bg-dark:#0d2740;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,28,46,.06), 0 2px 8px rgba(15,28,46,.06);
  --shadow:0 18px 50px -22px rgba(0,76,121,.35), 0 6px 14px -8px rgba(0,76,121,.18);
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.serif{font-family:'Roboto Slab',Georgia,serif}
/* offset anchored scroll so fixed topbar doesn't cover headings */
[id]{scroll-margin-top:90px}

/* ---------- Top bar (transparent over hero) ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:linear-gradient(180deg, rgba(8,22,38,.55) 0%, rgba(8,22,38,0) 100%);
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.topbar.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 4px 18px -10px rgba(0,76,121,.2);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand:hover{color:#fff}
.topbar.scrolled .brand{color:var(--ink)}
.topbar.scrolled .brand:hover{color:var(--ink)}
.brand-logo{height:40px;width:auto;display:block}
/* While the bar is transparent over the dark hero, sit the logo on a soft white chip so it stays legible */
.topbar .brand-logo{
  padding:6px 12px;border-radius:10px;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.topbar.scrolled .brand-logo{
  background:transparent;box-shadow:none;padding:0;
}
footer .brand-logo{height:34px;background:transparent;box-shadow:none;padding:0}

/* primary nav */
.nav{display:none;align-items:center;gap:6px}
@media(min-width:980px){ .nav{display:flex} }
.nav a{
  color:rgba(255,255,255,.92);font-weight:600;font-size:14.5px;
  padding:8px 14px;border-radius:999px;transition:background .2s ease, color .2s ease;
}
.nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.topbar.scrolled .nav a{color:var(--ink-soft)}
.topbar.scrolled .nav a:hover{background:var(--bg-3);color:var(--brand-dark)}

.topbar-cta{display:flex;align-items:center;gap:10px}

/* ---------- Mobile hamburger + dropdown menu ---------- */
.nav-toggle{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.2)}
.topbar.scrolled .nav-toggle{background:var(--bg-3);color:var(--brand-dark);border-color:rgba(0,130,203,.18)}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .ico-close{display:none}
.nav-toggle.open .ico-menu{display:none}
.nav-toggle.open .ico-close{display:block}
/* hamburger only shows below the desktop-nav breakpoint */
@media(min-width:980px){ .nav-toggle{display:none} }
/* on small screens drop the inline call + quote buttons; they live in the menu and bottom bar */
@media(max-width:979px){
  .topbar-cta .phone-link,
  .topbar-cta > .btn{display:none}
}
.mobile-menu{
  display:none;
  position:absolute;top:calc(100% + 8px);left:12px;right:12px;
  flex-direction:column;gap:4px;
  padding:10px;border-radius:16px;
  background:rgba(255,255,255,.98);
  border:1px solid var(--line);
  box-shadow:var(--shadow);backdrop-filter:saturate(140%) blur(10px);
}
.mobile-menu.open{display:flex;animation:fadeIn .18s ease}
.mobile-menu a{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;border-radius:10px;
  color:var(--ink);font-weight:600;font-size:16px;
}
.mobile-menu a:hover{background:var(--bg-3);color:var(--brand-dark)}
.mobile-menu .mm-call{color:var(--brand-dark);border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 8px 8px}
.mobile-menu .mm-call svg{width:18px;height:18px}
.mobile-menu .btn{margin-top:6px}
@media(min-width:980px){ .mobile-menu{display:none!important} }

.phone-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;
  font-weight:600;font-size:14px;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.phone-link:hover{background:rgba(255,255,255,.2);color:#fff}
.topbar.scrolled .phone-link{background:var(--bg-3);color:var(--brand-dark);border-color:rgba(0,130,203,.18)}
.topbar.scrolled .phone-link:hover{background:#dceefa;color:var(--brand-dark)}
.phone-link svg{width:16px;height:16px}
.phone-link .num{display:none}
@media(min-width:560px){ .phone-link .num{display:inline} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;border-radius:999px;
  font-weight:700;font-size:15px;letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-primary{
  background:linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 100%);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(0,130,203,.65), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{
  box-shadow:0 20px 36px -10px rgba(0,130,203,.75), inset 0 1px 0 rgba(255,255,255,.45);
  color:#fff;transform:translateY(-1px);
}
.btn-accent{
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
  color:#022b29;
  box-shadow:0 14px 30px -10px rgba(0,203,191,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-accent:hover{color:#022b29;transform:translateY(-1px)}
.btn-sand{
  background:linear-gradient(180deg, var(--sand) 0%, var(--sand-dark) 100%);
  color:#3a2706;
  box-shadow:0 14px 30px -10px rgba(224,168,91,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-sand:hover{color:#3a2706;transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.btn-glass{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
}
.btn-glass:hover{background:rgba(255,255,255,.22);color:#fff}
.btn-ghost-dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-block{width:100%}
.btn .ico{width:18px;height:18px}

/* ============================================================
   FULL-BLEED CINEMATIC HERO
============================================================ */
.hero{
  position:relative;
  width:100%;
  isolation:isolate;overflow:hidden;
  color:#fff;
}
/* hero background image */
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background:
    url("/googhouse.jpg") center center/cover no-repeat,
    #0d2740;
  animation:slowZoom 22s ease-out forwards;
  will-change:transform;
}
@keyframes slowZoom{ from{transform:scale(1.12)} to{transform:scale(1)} }
/* gradient overlays for legibility */
.hero-overlay{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,22,38,.5) 0%, rgba(8,22,38,.2) 45%, rgba(8,22,38,.35) 80%, #0d2740 100%);
}
/* a subtle blue cast to tie the photo to the brand */
.hero-tint{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 700px at 75% 30%, rgba(0,130,203,.18), transparent 60%);
  mix-blend-mode:screen;
}

.hero-inner{
  position:relative;z-index:1;
  width:100%;padding:78px 0 30px;
}
@media(min-width:760px){ .hero-inner{padding:84px 0 40px} }
/* Phones: tighten the header and lift the hero copy to close the gap above the headline */
@media(max-width:600px){
  .topbar .wrap{height:58px}
  /* content-box keeps the logo image the same size with or without the chip padding,
     so it doesn't appear to "zoom" when the bar switches to its scrolled state */
  .topbar .brand-logo{box-sizing:content-box;height:28px}
  .hero-inner{padding-top:10px}
}
/* copy + cards stacked; hero hugs the content so cards sit high on the page */
.hero-stack{display:flex;flex-direction:column}
.hero-copy{max-width:680px}
/* cards sit just below the copy instead of being pinned to the bottom */
.hero-copy + .pillar-grid{margin-top:26px}
@media(min-width:760px){ .hero-copy + .pillar-grid{margin-top:34px} }
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:16px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:17px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px rgba(0,203,191,.8)}

h1.hero-title{
  font-family:'Roboto Slab',Georgia,serif;font-weight:900;
  /* sized to stay on a single line from phones up to desktop */
  font-size:clamp(19px, 4.55vw, 54px);
  line-height:1.05;letter-spacing:-1px;
  margin:0 0 14px;color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.45);
  white-space:nowrap;max-width:none;
}
h1.hero-title .accent{
  background:linear-gradient(90deg, #87E9E2 0%, var(--teal) 50%, #80c8f5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* On phones the single-line constraint shrinks the headline too far.
   Let it wrap and scale it up for a stronger first impression. */
@media(max-width:600px){
  h1.hero-title{
    white-space:normal;
    font-size:clamp(32px,9vw,46px);
    line-height:1.1;letter-spacing:-.5px;
  }
}
.hero-sub{
  font-size:clamp(17px,2.1vw,21px);
  color:rgba(255,255,255,.92);
  max-width:640px;margin:0 0 20px;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Mobile: the sticky bottom bar already offers Call + Get a Quote, so hide the
   redundant hero CTAs, and raise the hero photo 400px to reveal the excavator. */
@media (max-width:779px){
  .hero-ctas{display:none}
  .hero-bg{background-position:center calc(50% - 400px)}
  /* No fade on the service cards on mobile — show them on page load. */
  .pillar-grid .pillar.reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   FOUR SERVICE PILLARS (left -> right)
============================================================ */
.pillar-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){ .pillar-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .pillar-grid{grid-template-columns:repeat(4,1fr)} }
.pillar{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:0 26px 60px -28px rgba(0,30,60,.65), var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pillar:hover{transform:translateY(-5px);box-shadow:0 36px 70px -30px rgba(0,30,60,.7)}
.pillar-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.pillar-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pillar:hover .pillar-media img{transform:scale(1.06)}
.pillar-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,39,64,0) 40%, rgba(13,39,64,.55) 100%);
}
/* fallback icon shown when an image fails to load */
.pillar-media .fallback-ico{
  position:absolute;inset:0;z-index:1;display:none;place-items:center;color:rgba(255,255,255,.9);
}
.pillar-media .fallback-ico svg{width:64px;height:64px}
.pillar-media.noimg{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%)}
.pillar-media.noimg .fallback-ico{display:grid}
.pillar.docks .pillar-media{background:linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%)}
.pillar.seawall .pillar-media{background:linear-gradient(135deg, var(--sand) 0%, var(--sand-dark) 100%)}
.pillar.barge .pillar-media{background:linear-gradient(135deg, #2d6da3 0%, #0d2740 100%)}
.pillar-tag{
  position:absolute;left:14px;top:14px;z-index:2;
  padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.4px;
  background:rgba(255,255,255,.92);color:var(--brand-dark);backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
}
.pillar.docks .pillar-tag{color:var(--teal-dark)}
.pillar.seawall .pillar-tag{color:var(--sand-dark)}
.pillar.barge .pillar-tag{color:#13456e}
.pillar-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.pillar-body h3{
  margin:0 0 5px;font-family:'Roboto Slab',serif;font-weight:800;
  font-size:20px;color:#0d2740;letter-spacing:-.2px;
}
.pillar-body p{margin:0 0 14px;color:var(--ink-soft);font-size:14px;flex:1}
.pillar-link{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-weight:700;font-size:15px;color:var(--brand);
  padding:10px 16px;border-radius:999px;background:var(--bg-3);
  border:1px solid rgba(0,130,203,.18);
  transition:gap .2s ease, background .2s ease, color .2s ease;
}
.pillar-link svg{width:16px;height:16px;transition:transform .2s ease}
.pillar-link:hover{background:#dceefa;color:var(--brand-dark);gap:11px}
.pillar-link:hover svg{transform:translateX(2px)}
.pillar.docks .pillar-link{color:var(--teal-dark);background:rgba(0,203,191,.12);border-color:rgba(0,203,191,.28)}
.pillar.docks .pillar-link:hover{background:rgba(0,203,191,.2);color:var(--teal-dark)}
.pillar.seawall .pillar-link{color:var(--sand-dark);background:rgba(224,168,91,.14);border-color:rgba(224,168,91,.32)}
.pillar.seawall .pillar-link:hover{background:rgba(224,168,91,.24);color:var(--sand-dark)}
.pillar.barge .pillar-link{color:#13456e;background:rgba(45,109,163,.12);border-color:rgba(45,109,163,.28)}
.pillar.barge .pillar-link:hover{background:rgba(45,109,163,.2);color:#0d2740}

/* ---------- Section base ---------- */
section{padding:90px 0;position:relative}
.sec-head{max-width:760px;margin:0 auto 48px;text-align:center}
.sec-head h2{
  font-family:'Roboto Slab',serif;font-weight:800;
  font-size:clamp(30px,4.8vw,50px);letter-spacing:-.3px;line-height:1.1;
  margin:10px 0 14px;color:#0d2740;
}
.sec-head p{color:var(--ink-soft);font-size:17px;margin:0}
.kicker{color:var(--brand);font-weight:700;letter-spacing:2.4px;text-transform:uppercase;font-size:12px}

/* ============================================================
   PRODUCT SECTION (image + copy split, alternating)
============================================================ */
.product .split{
  display:grid;grid-template-columns:1fr;gap:34px;align-items:center;
}
@media(min-width:900px){ .product .split{grid-template-columns:1.05fr 1fr;gap:54px} }
.product .split.flip .media{order:-1}
@media(min-width:900px){ .product .split.flip .media{order:2} }
.product .media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:4/3;background:linear-gradient(135deg, #cce5f4 0%, #e6f5f4 100%);
}
.product .media img{width:100%;height:100%;object-fit:cover}
.product .copy .kicker{display:inline-block;margin-bottom:8px}
.product .copy h2{
  font-family:'Roboto Slab',serif;font-weight:800;
  font-size:clamp(28px,4vw,42px);letter-spacing:-.3px;line-height:1.12;
  margin:0 0 14px;color:#0d2740;
}
.product .copy .lead{color:var(--ink-soft);font-size:17px;margin:0 0 22px}
.feat-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:15.5px}
.feat-list svg{
  width:22px;height:22px;flex:0 0 auto;margin-top:1px;color:var(--brand);
}
.product.alt .feat-list svg{color:var(--teal-dark)}
.product.alt3 .feat-list svg{color:var(--sand-dark)}
.product.alt2 .feat-list svg{color:#2d6da3}
.product .actions{display:flex;flex-wrap:wrap;gap:12px}
.product.alt{background:linear-gradient(180deg, var(--bg-2) 0%, #fff 100%)}
.product.alt3{background:linear-gradient(180deg, #fbf3e7 0%, #fff 100%)}
.product.alt3 .kicker{color:var(--sand-dark)}
.product.alt2{background:var(--bg-dark);color:#fff}
.product.alt2 .copy h2{color:#fff}
.product.alt2 .copy .lead{color:#c3d8e8}
.product.alt2 .feat-list li{color:#e8f1f8}
.product.alt2 .kicker{color:var(--teal)}
.product.alt2 .media{border-color:rgba(255,255,255,.12)}

/* ---------- Process ---------- */
.process .why-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){ .process .why-grid{grid-template-columns:repeat(4,1fr)} }
.step{
  position:relative;padding:26px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.step .num{
  font-family:'Roboto Slab',serif;font-size:42px;line-height:1;letter-spacing:-1px;
  background:linear-gradient(135deg, var(--brand), var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
}
.step h4{margin:8px 0 6px;font-size:18px;color:#0d2740;font-family:'Roboto Slab',serif}
.step p{margin:0;color:var(--ink-soft);font-size:14.5px}

/* ---------- Gallery ---------- */
.gallery{background:var(--bg-2)}
.g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){ .g-grid{grid-template-columns:repeat(3,1fr);gap:14px} }
@media(min-width:1000px){ .g-grid{grid-template-columns:repeat(4,1fr)} }
.g-item{
  position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg, #cce5f4 0%, #e6f5f4 100%);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.g-item:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.g-item:hover img{transform:scale(1.08)}
.g-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(13,39,64,.5) 100%);
  opacity:0;transition:opacity .2s ease;
}
.g-item:hover::after{opacity:1}

/* ---------- CTA strip ---------- */
.cta-strip{
  background:
    radial-gradient(900px 500px at 85% 30%, rgba(0,203,191,.25), transparent 60%),
    linear-gradient(135deg, #0d2740 0%, #154a72 100%);
  color:#fff;border-top:1px solid rgba(255,255,255,.05);
}
.cta-strip .wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:900px){ .cta-strip .wrap{grid-template-columns:1.4fr 1fr} }
.cta-strip h2{
  font-family:'Roboto Slab',serif;font-weight:800;
  font-size:clamp(28px,4.2vw,46px);letter-spacing:-.3px;line-height:1.1;
  margin:0 0 10px;color:#fff;
}
.cta-strip p{color:#c3d8e8;margin:0 0 4px}
.cta-strip .kicker{color:var(--teal)}
.cta-strip .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
@media(min-width:900px){ .cta-strip .actions{justify-content:flex-end} }

/* ---------- Footer ---------- */
footer{padding:48px 0 100px;color:var(--ink-soft);font-size:14px;background:#fff;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media(min-width:700px){ .foot{grid-template-columns:1fr auto} }
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--brand)}
footer .brand{color:var(--ink);display:flex;align-items:center}
.foot-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Sticky mobile bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:8px;padding:10px 12px;
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -10px rgba(0,76,121,.18);
  backdrop-filter:blur(10px);
}
.mobile-bar .btn{flex:1;padding:13px 14px;font-size:14px}
@media(min-width:780px){ .mobile-bar{display:none} }
@media(max-width:779px){ body{padding-bottom:74px} }

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(13,39,64,.6);backdrop-filter:blur(6px);
}
.modal.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  width:100%;max-width:620px;max-height:92svh;overflow:auto;
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-bottom:0;
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 50px -10px rgba(0,30,60,.35);
  animation:slideUp .3s cubic-bezier(.2,.8,.2,1);
}
@media(min-width:700px){
  .modal{align-items:center;padding:24px}
  .modal-card{border-radius:22px;border-bottom:1px solid var(--line)}
}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);z-index:2;
}
.modal-head h3{margin:0;font-family:'Roboto Slab',serif;font-weight:800;font-size:22px;color:#0d2740;letter-spacing:-.2px}
.modal-close{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-soft);
}
.modal-close:hover{background:#e3eaf2;color:var(--ink)}
.modal-body{padding:20px 22px 24px}
.modal-body .lead{color:var(--ink-soft);margin:0 0 18px;font-size:14.5px}

/* ---------- Forms ---------- */
.field{margin-bottom:14px}
.row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:520px){ .row.cols-2{grid-template-columns:1fr 1fr} .row.cols-3{grid-template-columns:1fr 1fr 1fr} }
label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
input,select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(0,130,203,.15);
}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a8290 50%),linear-gradient(135deg,#7a8290 50%,transparent 50%);background-position:calc(100% - 18px) 18px, calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
/* Compact variant — tightens the quote modal so it fits without so much scrolling */
.compact .field{margin-bottom:10px}
.compact .row{gap:10px}
.compact input,.compact select,.compact textarea{padding:10px 12px;border-radius:9px}
.compact textarea{min-height:78px}
.compact label{margin-bottom:4px}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
.ok-msg{
  display:none;margin-top:12px;padding:14px;border-radius:10px;
  background:rgba(0,203,191,.1);border:1px solid rgba(0,203,191,.35);color:#066b65;
  font-size:14px;
}
.ok-msg.show{display:block}
.ok-msg.err{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.4);color:#b91c1c}
.ok-msg a{color:inherit;font-weight:600;text-decoration:underline}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* Let the hero background breathe for a couple seconds, then fade the
   four service cards in with a gentle left-to-right stagger. */
.pillar-grid .pillar.reveal{transition-delay:1.2s}
.pillar-grid .pillar:nth-child(2).reveal{transition-delay:1.29s}
.pillar-grid .pillar:nth-child(3).reveal{transition-delay:1.38s}
.pillar-grid .pillar:nth-child(4).reveal{transition-delay:1.47s}

/* ---------- Skip ---------- */
.skip{position:absolute;left:-9999px;top:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px;border-radius:6px;z-index:200}

/* GLightbox parks the prev/next arrows off-screen (top:-100%) below 769px and only
   repositions them on desktop. Bring them back on mobile so they're tappable. */
@media(max-width:768px){
  .glightbox-clean .gprev,
  .glightbox-clean .gnext{
    top:50%;transform:translateY(-50%);
    width:42px;height:42px;border-radius:50%;
    background-color:rgba(0,0,0,.45);
  }
  .glightbox-clean .gprev{left:12px}
  .glightbox-clean .gnext{right:12px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0!important;animation-iteration-count:1!important;transition-duration:0!important;transition-delay:0!important;scroll-behavior:auto!important}
  .hero-bg{animation:none}
}