/* ============================================================
   NORTHIC MEDIA — SHARED SITE STYLES
   Loaded on every page. Edit this file to change design tokens,
   typography, buttons, or header/footer styling site-wide.
   ============================================================ */

:root{
  --navy:#0F1B2E;
  --navy-soft:#1D3258;
  --slate:#55627A;
  --slate-light:#8792A6;
  --bg:#FFFFFF;
  --bg-soft:#F5F7F9;
  --bg-soft-2:#EDF0F3;
  --amber:#FF7A29;
  --amber-dark:#E4650F;
  --teal:#1FB6A0;
  --teal-soft:#E8FAF6;
  --line:#E3E7EC;
  --gold:#F5A623;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--navy); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; line-height:1.15; letter-spacing:-0.01em; font-weight:700; color:var(--navy);}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.03em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
section{padding:80px 0;}
@media(max-width:720px){ section{padding:54px 0;} }

/* -------- Buttons (used everywhere) -------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16.5px; padding:16px 28px; border-radius:8px; border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
.btn-primary{background:var(--amber); color:var(--navy); box-shadow:0 5px 0 var(--amber-dark);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--amber-dark);}
.btn-outline{background:transparent; color:var(--navy); border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--navy);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.btn-block{width:100%;}

/* ============================================================
   HEADER (header.html) — announcement bar + nav
   ============================================================ */
.announce{background:var(--navy); color:#C9D2E0; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:9px 16px;}
.announce b{color:var(--amber); font-weight:600;}

nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px;}
.logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--navy); display:flex; align-items:center; gap:8px; flex-shrink:0;}
.logo .dot{width:9px; height:9px; border-radius:2px; background:var(--amber); display:inline-block;}
.nav-links{display:flex; align-items:center; gap:32px; font-weight:600; font-size:14.5px;}
.nav-links > a:hover{color:var(--amber-dark);}
.nav-cta{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.nav-phone{font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--slate); font-weight:600; white-space:nowrap;}
.nav-phone:hover{color:var(--amber-dark);}
.nav-cta .btn{white-space:nowrap;}

/* Industries dropdown (desktop) */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{background:none; border:none; font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; color:var(--navy); cursor:pointer; display:flex; align-items:center; gap:5px; padding:0;}
.nav-dropdown-toggle:hover{color:var(--amber-dark);}
.caret{font-size:10px; transition:transform .18s ease; display:inline-block;}
.nav-dropdown.open .caret{transform:rotate(180deg);}
.nav-dropdown-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 36px -16px rgba(15,27,46,0.25); padding:10px; min-width:240px; margin-top:16px; z-index:60; display:grid; grid-template-columns:1fr 1fr; gap:2px; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s ease;}
.nav-dropdown.open .nav-dropdown-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{padding:10px 12px; border-radius:7px; font-size:13.5px; font-weight:500; color:var(--navy); white-space:nowrap;}
.nav-dropdown-menu a:hover{background:var(--bg-soft); color:var(--amber-dark);}

/* Hamburger (mobile) */
.hamburger{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer; padding:0; flex-shrink:0;}
.hamburger span{width:18px; height:2px; background:var(--navy); border-radius:2px; margin:0 auto; transition:transform .2s ease, opacity .2s ease;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile menu panel */
.mobile-menu{display:none; flex-direction:column; background:#fff; border-top:1px solid var(--line); padding:10px 24px 22px;}
.mobile-menu.open{display:flex;}
.mobile-menu a, .mobile-accordion-toggle{padding:14px 2px; font-weight:600; font-size:15.5px; color:var(--navy); border-bottom:1px solid var(--line); text-align:left; background:none; border-left:none; border-right:none; border-top:none; border-radius:0; width:100%; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Inter',sans-serif;}
.mobile-accordion-toggle .caret{transition:transform .18s ease;}
.mobile-accordion-toggle.open .caret{transform:rotate(180deg);}
.mobile-submenu{display:none; flex-direction:column; padding-left:12px;}
.mobile-submenu.open{display:flex;}
.mobile-submenu a{border-bottom:1px solid var(--bg-soft); font-weight:500; font-size:14.5px; color:var(--slate); padding:12px 2px;}
.mobile-phone{color:var(--amber-dark) !important;}
.mobile-menu .btn{margin-top:16px;}

@media(max-width:800px){
  .nav-links{display:none;}
  .nav-cta .nav-phone, .nav-cta .btn-primary{display:none;}
  .hamburger{display:flex;}
}
@media(max-width:480px){
  .logo{font-size:15.5px;}
}
@media(max-width:360px){
  .logo{font-size:14px;}
  .logo .dot{width:7px; height:7px;}
}

/* -------- Shared section header pattern (used on most inner pages) -------- */
.section-head{text-align:center; max-width:680px; margin:0 auto 48px;}
.kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:var(--amber-dark); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; display:block;}
.section-head h2{font-size:32px;}
@media(max-width:720px){ .section-head h2{font-size:24px;} }
.section-head p{color:var(--slate); font-size:16.5px; margin-top:12px;}

/* ============================================================
   FOOTER (footer.html)
   ============================================================ */
footer{background:var(--navy); color:#8EA0BC; padding:56px 0 26px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:32px; margin-bottom:40px;}
.foot-grid li, .foot-grid p, .foot-grid a{overflow-wrap:anywhere; word-break:break-word;}
@media(max-width:800px){ .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:32px;} }
@media(max-width:460px){ .foot-grid{grid-template-columns:minmax(0,1fr); row-gap:30px;} }
.foot-logo{font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:18px; margin-bottom:14px;}
.foot-grid p{font-size:13.5px; line-height:1.7; max-width:280px;}
.foot-social{display:flex; gap:10px; margin-top:18px;}
.foot-social a{width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid #24344F; display:flex; align-items:center; justify-content:center; color:#8EA0BC; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.foot-social a:hover{background:var(--amber); color:var(--navy); border-color:var(--amber);}
footer h5{color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; font-family:'IBM Plex Mono',monospace;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14px;}
footer li a:hover{color:#fff;}
.foot-bottom{border-top:1px solid #24344F; padding-top:22px; text-align:center; font-size:12.5px;}

/* -------- Sticky mobile CTA (optional, used on some pages) -------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--line); padding:12px 16px; box-shadow:0 -10px 24px -12px rgba(10,18,32,0.15); display:none; align-items:center; gap:12px;}
.sticky-cta.show{display:flex;}
.sticky-cta .stxt{font-size:13px; font-weight:600; flex:1;}
.sticky-cta .btn{padding:11px 16px; font-size:13.5px;}