/* Van Garage Door — custom design for Cassiopeia child template */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&display=swap");

:root{
  --vgd-bg:#F2F4F6; --vgd-surface:#FFFFFF; --vgd-ink:#141C24; --vgd-muted:#56656F; --vgd-line:#D5DCE2;
  --vgd-steel:#1C2B3A; --vgd-steel-ink:#EAF0F5; --vgd-steel-muted:#9DB0C0;
  --vgd-accent:#E8621A; --vgd-accent-soft:#FBE7DA;
  --cassiopeia-color-primary:#1C2B3A;
  --cassiopeia-color-link:#E8621A;
  --cassiopeia-color-hover:#C24F12;
}

/* ---------- base ---------- */
body.site{background:var(--vgd-bg);color:var(--vgd-ink);font-family:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55}
.site-grid{gap:0}
h1,h2,h3,.vgd-display{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;text-wrap:balance;line-height:1;margin:0}
.vgd h2{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.vgd .eyebrow{font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--vgd-accent);margin-bottom:12px}
.vgd .lead{font-size:18px;color:var(--vgd-muted);max-width:40rem;margin:18px 0 0}
.vgd .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:4px;font-weight:600;text-decoration:none;font-size:16px;border:2px solid transparent;color:inherit}
.vgd .btn-accent{background:var(--vgd-accent);color:#fff}
.vgd .btn-ghost{border-color:currentColor}
.vgd .num{font-variant-numeric:tabular-nums}
.vgd img{max-width:100%;display:block}

/* full-bleed sections inside the component column */
.vgd-full{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.vgd .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.vgd section{padding:80px 0}
.vgd section + section{border-top:1px solid var(--vgd-line)}

/* hide Cassiopeia chrome we don't need on the one-page layout */
.page-header, .com-content-article > .page-header, .article-info, .breadcrumb, .container-header .mod-breadcrumbs, .item-page .article-header{display:none}
.com-content-article{padding:0}
.container-component{padding:0 !important}
.container-component .grid-child, .container-component > .grid-child{padding-inline:0}
.container-component .grid-child{max-width:none}

/* ---------- header / menu ---------- */
html{overflow-x:clip}
.site-grid .container-header.full-width, .container-header{background:var(--vgd-surface) !important;border-bottom:1px solid var(--vgd-line);position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:32px;padding:0 max(24px, calc(50% - 560px))}
.site-grid .container-header .grid-child, .container-header .grid-child{grid-column:auto;padding:0;margin:0;max-width:none;width:auto}
.site-grid .container-header .container-nav{grid-column:auto;justify-self:end;display:flex;align-items:center}
.container-header .navbar-brand{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.02em;color:var(--vgd-ink);text-decoration:none;padding:16px 0;display:block}
.container-header .navbar-brand img{height:50px;width:auto;max-width:min(100%,260px);object-fit:contain}
.container-header .navbar-brand .site-description{display:none}
.container-header .mod-menu{gap:26px;margin:0}
.container-header .mod-menu > li > a{color:var(--vgd-muted);font-weight:500;padding:.5rem 0;font-size:16px}
.container-header .mod-menu > li > a:hover, .container-header .mod-menu > li.active > a{color:var(--vgd-ink);text-decoration:none}
.container-header .mod-menu > li > a.vgd-call{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;color:var(--vgd-accent);font-variant-numeric:tabular-nums}
.container-header .navbar-toggler{border-color:var(--vgd-line);color:var(--vgd-ink)}
@media (max-width:991.98px){
  .site-grid .container-header.full-width{grid-template-columns:1fr auto}
  .container-header .navbar{position:static}
  .container-header .navbar-toggler{border:1px solid var(--vgd-line);border-radius:4px;padding:8px 10px;background:var(--vgd-surface);color:var(--vgd-ink)}
  .container-header .navbar-collapse{position:absolute;left:0;right:0;top:100%;background:var(--vgd-surface);border-bottom:1px solid var(--vgd-line);box-shadow:0 12px 24px rgba(20,28,36,.12);padding:8px 24px 16px}
  .container-header .mod-menu{flex-direction:column;gap:0;align-items:stretch}
  .container-header .mod-menu > li > a{display:block;padding:12px 0;border-bottom:1px solid var(--vgd-line);font-size:17px}
  .container-header .mod-menu > li:last-child > a{border-bottom:0}
}
@media (max-width:520px){
  .vgd .vgd-services .grid{grid-template-columns:1fr}
  .vgd-services .grid > div{border-right:0 !important;border-bottom:1px solid var(--vgd-line) !important}
  .vgd-services .grid > div:last-child{border-bottom:0 !important}
  .vgd section{padding:56px 0}
  .vgd-hero .wrap{padding-top:40px;padding-bottom:48px}
  .vgd-hero .stats{gap:22px;flex-wrap:wrap}
  .vgd-topbar .wrap{justify-content:center;text-align:center}
}

.site-grid .container-header .container-nav, .container-header .container-nav{justify-content:flex-end;margin-left:auto}
.container-header .mod-menu{justify-content:flex-end}
.container-header .navbar-toggler{margin-left:auto}

/* top strip */
.vgd-topbar{background:var(--vgd-steel);color:var(--vgd-steel-ink);font-size:14px}
.vgd-topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding:8px 24px;flex-wrap:wrap}
.vgd-topbar .wrap > div{color:var(--vgd-steel-muted)}
.vgd-topbar b{font-weight:600}

/* ---------- hero ---------- */
.vgd .vgd-hero{background:var(--vgd-steel);color:var(--vgd-steel-ink);padding:0}
.vgd .vgd-contact{padding:80px 0}
.vgd-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.vgd-hero h1{font-size:clamp(48px,7.5vw,92px);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;color:var(--vgd-steel-ink)}
.vgd-hero h1 em{font-style:normal;color:var(--vgd-accent)}
.vgd-hero p{font-size:19px;max-width:32rem;color:var(--vgd-steel-muted);margin:22px 0 30px}
.vgd-hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.vgd-hero .actions .btn-ghost{color:var(--vgd-steel-ink)}
.vgd-hero .actions .btn-accent{color:#fff}
.vgd-hero .photo{border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:#000}
.vgd-hero .photo img{width:100%;height:100%;object-fit:cover}
.vgd-hero .stats{display:flex;gap:36px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15)}
.vgd-hero .stats div{font-family:"Barlow Condensed",sans-serif;font-size:30px;font-weight:700;line-height:1}
.vgd-hero .stats small{display:block;font-family:"Barlow",sans-serif;font-size:13px;font-weight:500;color:var(--vgd-steel-muted);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:820px){.vgd-hero .wrap{grid-template-columns:1fr}.vgd-hero .photo{order:-1}}

/* ---------- services ---------- */
.vgd-services .grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border:1px solid var(--vgd-line);background:var(--vgd-surface)}
.vgd-services .grid > div{padding:22px 24px;border-right:1px solid var(--vgd-line);border-bottom:1px solid var(--vgd-line);font-weight:500;display:flex;gap:12px;align-items:flex-start}
.vgd-services .grid > div::before{content:"";flex:0 0 10px;height:10px;margin-top:7px;background:var(--vgd-accent)}
.vgd-services .grid > div:nth-child(3n){border-right:0}
.vgd-services .grid > div:nth-last-child(-n+3){border-bottom:0}
@media (max-width:760px){
  .vgd-services .grid{grid-template-columns:1fr 1fr}
  .vgd-services .grid > div:nth-child(3n){border-right:1px solid var(--vgd-line)}
  .vgd-services .grid > div:nth-child(2n){border-right:0}
  .vgd-services .grid > div:nth-last-child(-n+3){border-bottom:1px solid var(--vgd-line)}
  .vgd-services .grid > div:last-child{border-bottom:0}
}
.vgd .offer{margin-top:28px;display:flex;gap:18px;align-items:center;padding:20px 24px;background:var(--vgd-accent-soft);border-left:5px solid var(--vgd-accent)}
.vgd .offer b{font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;white-space:nowrap}
@media (max-width:600px){.vgd .offer{flex-direction:column;align-items:flex-start}}

/* ---------- about ---------- */
.vgd-about .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.vgd-about .side h2{position:sticky;top:96px}
.vgd-about .body p{margin:0 0 18px;max-width:38rem}
.vgd-about .body h3{font-size:22px;font-weight:700;text-transform:uppercase;margin:30px 0 10px}
.vgd-about .body h3:first-child{margin-top:0}
@media (max-width:820px){.vgd-about .wrap{grid-template-columns:1fr}.vgd-about .side h2{position:static}}

/* ---------- areas strip ---------- */
.vgd-areas{padding:40px 0;background:var(--vgd-surface);border-top:1px solid var(--vgd-line);border-bottom:1px solid var(--vgd-line)}
.vgd-areas .wrap{display:flex;gap:10px 28px;flex-wrap:wrap;align-items:center}
.vgd-areas strong{font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;margin-right:8px}
.vgd-areas span{font-weight:500;color:var(--vgd-muted)}

/* ---------- gallery ---------- */
.vgd-gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.vgd-gallery .grid a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--vgd-surface);border-radius:4px}
.vgd-gallery .grid img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vgd-gallery .grid a:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.vgd-gallery .grid img{transition:none}}
@media (max-width:640px){.vgd-gallery .grid{grid-template-columns:1fr 1fr}}

/* ---------- contact ---------- */
.vgd-contact{background:var(--vgd-steel);color:var(--vgd-steel-ink)}
.vgd-contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.vgd-contact h2{color:var(--vgd-steel-ink)}
.vgd-contact p{color:var(--vgd-steel-muted);max-width:30rem}
.vgd-contact .big{font-family:"Barlow Condensed",sans-serif;font-size:clamp(44px,7vw,80px);font-weight:800;color:var(--vgd-accent);text-decoration:none;display:block;line-height:1;margin:10px 0 6px}
.vgd-contact dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 24px}
.vgd-contact dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vgd-steel-muted);font-weight:600;padding-top:4px}
.vgd-contact dd{margin:0;font-size:18px;font-weight:500}
.vgd-contact dd a{color:var(--vgd-steel-ink);text-decoration:none}
.vgd-contact dd a:hover{text-decoration:underline}
@media (max-width:760px){.vgd-contact .wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.container-footer{background:var(--vgd-steel) !important;color:var(--vgd-steel-muted);font-size:13px;border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.container-footer a{color:var(--vgd-steel-ink)}
.container-footer .grid-child{max-width:1120px;margin:0 auto;padding:0 24px}
.back-to-top-link{background:var(--vgd-accent);border-color:var(--vgd-accent)}