:root{
  --bg:#05080a;
  --text:#f4f4f2;
  --muted:#c9ced1;
  --orange:#ff7a00;
  --header-h:82px;
  --max:1180px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;background:linear-gradient(180deg,rgba(2,5,8,.95),rgba(2,5,8,.66),transparent);display:flex;align-items:center}
.header-inner{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.logo img{display:block;width:56px;height:auto}
.menu-toggle{width:44px;height:44px;border:0;background:transparent;padding:9px;display:grid;gap:6px;align-content:center;justify-content:center;cursor:pointer}
.menu-toggle span{display:block;width:26px;height:2px;background:#fff;transition:.2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav{position:fixed;top:0;right:0;width:min(86vw,360px);height:100vh;padding:112px 28px 36px;background:rgba(4,7,10,.985);transform:translateX(100%);transition:transform .25s ease;border-left:1px solid rgba(255,255,255,.08);z-index:45;display:flex;flex-direction:column;gap:8px}
.nav.open{transform:translateX(0)}
.nav a,.nav button{display:block;width:100%;text-align:left;padding:15px 4px;color:#f7f7f7;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);font-size:18px;cursor:pointer}
.nav a.active,.nav button.active{color:var(--orange)}
.subnav{display:none;padding:4px 0 8px 14px}
.subnav.open{display:block}
.subnav a{font-size:15px;color:#cfd3d5;padding:12px 4px}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40}
.backdrop.open{display:block}
.page-shell{position:relative;min-height:100vh;padding-top:var(--header-h);isolation:isolate}
.page-bg{position:fixed;inset:0;z-index:-3;background-image:var(--page-bg);background-position:center center;background-size:cover;background-repeat:no-repeat}
.page-overlay{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(4,7,10,.54) 0%,rgba(4,7,10,.79) 44%,rgba(4,7,10,.95) 100%)}
.page-vignette{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 76% 35%,transparent 0,rgba(2,5,8,.10) 36%,rgba(2,5,8,.42) 100%);pointer-events:none}
.content{width:100%;max-width:var(--max);margin:0 auto;padding:44px 20px 64px}
.hero{max-width:760px;padding-top:12px}
.eyebrow{display:none}
h1{font-size:clamp(38px,11vw,62px);line-height:.98;margin:0 0 20px;font-weight:700;letter-spacing:-1.8px;text-wrap:balance}
.rule{width:58px;height:3px;background:var(--orange);margin:0 0 24px}
.tagline{font-size:clamp(20px,6vw,29px);line-height:1.2;color:var(--orange);font-weight:600;margin:0 0 18px}
.intro{font-size:17px;line-height:1.65;color:#f0f1f2;margin:0;max-width:760px}
.services{display:grid;grid-template-columns:1fr;gap:0;margin-top:38px;border-top:1px solid rgba(255,255,255,.08)}
.service{position:relative;padding:22px 0 22px 21px;border-bottom:1px solid rgba(255,255,255,.08)}
.service::before{content:"";position:absolute;left:0;top:24px;width:2px;height:34px;background:var(--orange)}
.service h2{font-size:19px;line-height:1.25;margin:0 0 9px;font-weight:600}
.service p{font-size:15px;line-height:1.55;color:#d7dadc;margin:0;max-width:560px}
.note{margin-top:34px;padding:18px 0 2px;border-top:1px solid rgba(255,255,255,.10);color:#e7e7e7;font-size:16px;line-height:1.55}
.note strong{color:var(--orange);font-weight:500}
.g-footer{padding:28px 20px 40px;text-align:center;color:#8d969b;font-size:12px;letter-spacing:.03em}
@media (min-width:640px){
  :root{--header-h:92px}
  .header-inner{padding:14px 28px}.logo img{width:66px}
  .content{padding:62px 32px 78px}
  .services{grid-template-columns:1fr 1fr;column-gap:42px}
  .service:nth-child(odd){padding-right:12px}
}
@media (min-width:980px){
  :root{--header-h:110px}
  .site-header{background:linear-gradient(180deg,rgba(2,5,8,.72),transparent)}
  .header-inner{max-width:1440px;margin:0 auto;padding:16px 48px}
  .logo img{width:82px}
  .menu-toggle{display:none}
  .nav{position:static;width:auto;height:auto;padding:0;background:transparent;transform:none;border:0;display:flex;flex-direction:row;align-items:center;gap:34px}
  .nav a,.nav button{width:auto;padding:9px 0;border:0;font-size:17px;white-space:nowrap}
  .nav a.active,.nav button.active{position:relative}
  .nav a.active::after,.nav button.active::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--orange)}
  .subnav{position:absolute;top:70px;right:250px;min-width:300px;padding:12px;background:rgba(4,7,10,.98);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.38)}
  .subnav a{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
  .backdrop{display:none!important}
  .page-bg{background-position:center center}
  .page-overlay{background:linear-gradient(90deg,rgba(4,7,10,.90) 0%,rgba(4,7,10,.76) 42%,rgba(4,7,10,.40) 73%,rgba(4,7,10,.62) 100%)}
  .content{padding:72px 48px 90px}
  .hero{max-width:800px}
  h1{font-size:62px}
  .services{grid-template-columns:1fr 1fr;column-gap:64px;margin-top:46px;max-width:1040px}
}


/* 4IP NAV STABILITY FIX — same viewport anchor as homepage */
@media (min-width:980px){
  html{overflow-y:scroll;}
  .site-header{height:110px;}
  .header-inner{max-width:none;margin:0;padding:16px 30px 0 30px;align-items:flex-start;}
  .nav{position:fixed;top:42px;right:34px;left:auto;width:auto;height:auto;padding:0;margin:0;
       background:transparent;transform:none;border:0;display:flex;flex-direction:row;align-items:center;gap:47px;z-index:60;}
  .nav a,.nav button{font-size:16px;}
}


/* 4IP GLOBAL LOGO STABILITY FIX — same viewport anchor/size as homepage */
@media (min-width:980px){
  .site-header .header-inner > .logo{
    position:fixed!important;top:18px!important;left:30px!important;right:auto!important;
    margin:0!important;z-index:1001!important;transform:none!important;
  }
  .site-header .header-inner > .logo img{
    display:block!important;width:135px!important;height:auto!important;max-height:none!important;object-fit:contain!important;
  }
}


/* 4IP FINAL HEADER ALIGNMENT — 2026-09-08
   Desktop only: logo one step smaller and same size everywhere;
   internal primary navigation uses the same viewport track as homepage. */
@media (min-width:980px){
  .site-header .header-inner > .logo img{width:120px!important;}
  .site-header .nav{
    top:42px!important;
    right:34px!important;
    padding-right:58px!important;
    gap:47px!important;
  }
}

/* 4IP INTERNAL LOGO VISUAL MATCH FIX — 2026-09-08
   Internal logo reduced to visually match the homepage logo. Desktop/laptop only. */
@media (min-width:980px){
  .site-header .header-inner > .logo img{width:105px!important;height:auto!important;}
}