/* ==========================================================================
   Canada Bridge — layout.css : navbar, hero, sections grid, footer
   ========================================================================== */

/* ---- Navbar ---- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(82,156,176,0);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
  will-change:background;
}
.nav.scrolled{background:var(--teal-deep);box-shadow:0 8px 30px rgba(10,50,72,.18)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.nav__brand{display:flex;align-items:center;color:#fff}
.brand-logo{height:48px;width:auto;display:block}
.nav__brand .sun{width:26px;height:26px;border-radius:50%;background:var(--ember);flex:none;
  box-shadow:0 0 0 4px rgba(218,111,77,.28)}
.nav__menu{display:flex;align-items:center;gap:30px}
.nav__link{
  position:relative;overflow:hidden;height:1.2em;display:inline-block;
  font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
.nav__link span{display:block;transition:transform .35s var(--ease)}
.nav__link span::after{content:attr(data-t);position:absolute;left:0;top:100%;display:block}
.nav__link:hover span{transform:translateY(-100%)}
/* ---- Nav dropdown ---- */
.nav__item{position:relative;display:flex;align-items:center;gap:4px}
.nav__caret{background:none;border:0;color:#fff;cursor:pointer;padding:0 2px;
  font-size:20px;font-weight:400;line-height:1;display:flex;align-items:center;transition:transform .3s var(--ease)}
.has-drop:hover .nav__caret,.has-drop.open .nav__caret{transform:rotate(45deg)}
.nav__drop{position:absolute;top:100%;left:-20px;width:min(560px,72vw);background:var(--bg);
  padding:20px;border:1px solid rgba(0,0,0,.2);border-radius:2px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:130}
.has-drop:hover .nav__drop,.has-drop.open .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop-link{display:block;padding:8px 8px 8px 0;color:var(--body);font-size:14px;font-weight:600;
  font-family:var(--font-body);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;
  transition:color .2s var(--ease)}
.nav__drop-link:hover{color:var(--ember-ink)}
.nav__actions{display:flex;align-items:center;gap:16px}
.nav__burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav__burger span{width:24px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .3s}
.nav.open .nav__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){opacity:0}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---- Hero (full-bleed background image, like reference) ---- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;overflow:hidden;background:var(--navy)}
.hero__bg{position:absolute;inset:-8% 0 0 0;z-index:0}
.hero__bg img{width:100%;height:112%;object-fit:cover;will-change:transform}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,50,72,.55) 0%,rgba(10,50,72,.12) 32%,rgba(10,50,72,.35) 70%,rgba(10,50,72,.85) 100%)}
.hero__sun{position:absolute;top:26%;right:8%;width:min(24vw,240px);aspect-ratio:1;border-radius:50%;
  background:var(--ember);opacity:.9;z-index:1;will-change:transform;mix-blend-mode:normal}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter);flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h)}
.hero__inner h1{color:#fff;max-width:15ch;text-shadow:0 2px 30px rgba(10,50,72,.4)}
.hero__stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(10,50,72,0),rgba(10,50,72,.35))}
.hero__stats .container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:30px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__num{font-family:var(--font-display);font-size:clamp(48px,6.5vw,92px);line-height:1;color:#fff}
.stat__num .plus{color:var(--ember)}
.stat__label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,242,.82)}
.stat+.stat{padding-left:24px;border-left:1px solid rgba(255,255,255,.16)}

/* ---- Generic two-col ---- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.split__media img{width:100%;height:clamp(300px,38vw,520px);object-fit:cover}
.stack>*+*{margin-top:22px}

/* ---- Grids ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.section-head p{margin-top:14px}

/* ---- Footer ---- */
.footer{background:var(--navy);color:rgba(238,242,242,.7);padding-block:72px 34px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-light)}
.footer__brand{display:flex;align-items:center;color:#fff;margin-bottom:16px}
.footer__brand .brand-logo{height:58px}
.footer__brand .sun{width:26px;height:26px;border-radius:50%;background:var(--ember);flex:none}
.footer h2{font-family:var(--font-display);font-size:20px;color:#fff;margin-bottom:16px;letter-spacing:-.01em;line-height:1}
.footer a{color:rgba(238,242,242,.7);transition:color .3s var(--ease)}
.footer a:hover{color:var(--ember-lite)}
.footer__col li+li{margin-top:10px}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:26px;font-size:13px;flex-wrap:wrap}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--gutter:16px}
  .nav__menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--navy);padding:8px 24px 24px;
    transform:translateY(-120%);transition:transform .4s var(--ease);
  }
  .nav.open .nav__menu{transform:none}
  .nav__link{height:auto;width:100%;padding:16px 0;border-bottom:1px solid var(--line-light);font-size:18px}
  .nav__link:hover span{transform:none}
  .nav__link span::after{display:none}
  .nav__burger{display:flex}
  .nav__actions .btn{display:none}
  .nav__item{flex-direction:column;align-items:stretch;width:100%;gap:0;
    border-bottom:1px solid var(--line-light)}
  .nav__item .nav__link{border-bottom:0;flex:1}
  .nav__item{display:grid;grid-template-columns:1fr auto}
  .nav__caret{color:#fff;padding:16px 4px}
  .nav__drop{position:static;grid-column:1 / -1;width:auto;min-width:0;border:0;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:rgba(0,0,0,.18);padding:0;max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  .has-drop.open .nav__drop{max-height:640px}
  .nav__drop-link{padding:12px 16px;white-space:normal}
  .hero{min-height:92svh}
  .hero__stats .container{grid-template-columns:1fr 1fr 1fr;gap:12px;padding-block:22px}
  .stat+.stat{padding-left:12px}
  .stat__num{font-size:clamp(34px,11vw,48px)}
  .stat__label{font-size:10px;letter-spacing:.08em}
  .hero__sun{width:150px;top:18%}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:-1}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
}
@media (min-width:861px){
  .nav__burger{display:none}
}