/* ===== Base / layout (sticky footer) ===== */
html, body { height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#333;
  background:#fff;
  display:flex;               /* key */
  flex-direction:column;      /* key */
  min-height:100vh;           /* key */
}
.container, .header-container, .footer-container{max-width:1200px;margin:0 auto;}
body.nav-lock { overflow: hidden; }

/* =======================================
   HEADER
   ======================================= */
.site-header{
  background:#fff;
  border-bottom:1px solid #eaeaea;
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.03);
}
.header-container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  min-height:72px;            /* used by mobile drawer offset */
}

/* Keep a single logo rule */
.logo img { height: clamp(42px, 20vw, 92px); width:auto; }

.nav-menu ul{list-style:none; display:flex; gap:26px; margin:0; padding:0;}
.nav-menu a{
  text-decoration:none; font-weight:600; color:#333; padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
.nav-menu a:hover{color:#2F80ED;}
.nav-menu a.active{border-bottom:2px solid #FBC02D; color:#111;}

/* =======================================
   FOOTER
   ======================================= */
.site-footer{
  margin-top:auto;                 /* pushes footer to bottom */
  background:#111; color:#ddd;
  padding:40px 20px 0;
}
.footer-container{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:28px; max-width:1200px; margin:0 auto;
}
.footer-about, .footer-links, .footer-contact{flex:1 1 260px; min-width:240px;}
.footer-logo{height:100px; margin-bottom:10px;}
.footer-links h4, .footer-contact h4{color:#fff; margin:0 0 10px;}
.footer-links ul{list-style:none; padding:0; margin:0;}
.footer-links li{margin:6px 0;}
.footer-links a{color:#ddd; text-decoration:none; transition:color .25s;}
.footer-links a:hover{color:#2F80ED;}
.footer-bottom{
  text-align:center; border-top:1px solid #2a2a2a;
  margin-top:22px; padding:16px 0; font-size:14px; color:#aaa;
}

/* ===============================
   RESPONSIVE HEADER POLISH
   =============================== */
.nav-menu ul { align-items:center; }
.nav-menu a {
  padding:8px 2px;
  border-bottom:2px solid transparent;
  transition:color .22s ease, border-color .22s ease;
}
.nav-menu a:hover { color:#2F80ED; }
.nav-menu a.active { border-bottom-color:#FBC02D; color:#111; }

/* Hamburger (hidden on desktop) */
.nav-toggle {
  appearance:none; border:0; background:transparent; display:none;
  width:42px; height:42px; position:relative; border-radius:10px; cursor:pointer;
}
.nav-toggle span {
  position:absolute; left:9px; right:9px; height:2px; background:#111; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle span:nth-child(1){ top:13px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:27px; }

/* ===============================
   MOBILE NAV (drawer)
   =============================== */
@media (max-width: 992px){
  .nav-toggle { display:inline-block; }

  /* Drawer sits BELOW header; width-limited; height shrinks to content */
  .nav-menu{
    position: fixed;
    right: 0;
    left: auto;
    top: 72px;                              /* matches .header-container min-height */
    width: 82vw;
    max-width: 360px;
    height: auto;                            /* key: not full screen */
    max-height: calc(100dvh - 72px);        /* safe on mobile browsers */
    overflow-y: auto;
    background:#fff;
    border-left:1px solid #eee;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -12px 0 24px rgba(0,0,0,.06);
    padding: 20px;                           /* content padding only */
    z-index: 1002;                           /* above backdrop */
  }

  .nav-menu ul { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav-menu a { font-size: 16.5px; padding: 10px 2px; }

  /* Backdrop sits under drawer; accepts taps to close */
  .nav-backdrop{
    position: fixed; inset:0;
    background: rgba(0,0,0,.28);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index: 1001;                           /* below .nav-menu */
  }

  /* When open */
  .site-header.nav-open .nav-menu { transform: translateX(0%); }
  .site-header.nav-open .nav-backdrop { opacity:1; visibility:visible; }

  /* Hamburger morph to X */
  .site-header.nav-open .nav-toggle span:nth-child(1){ transform:rotate(45deg); top:20px; }
  .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.nav-open .nav-toggle span:nth-child(3){ transform:rotate(-45deg); top:20px; }
}

/* Focus ring for accessibility */
.nav-toggle:focus-visible,
.nav-menu a:focus-visible { outline:2px solid #7D5BA6; outline-offset:3px; border-radius:6px; }

/* =======================================
   UTILITIES / RESPONSIVE
   ======================================= */
.section{max-width:1200px; margin:0 auto; padding:56px 20px;}
.h1{font-size:clamp(84px, 14vw, 200px); font-weight:800; color:#111; letter-spacing:-.02em;}
.lead{color:#6b7280; line-height:1.65; font-weight:500;}

@media (max-width: 768px){
  .header-container{padding:12px 16px;}
  .nav-menu ul{gap:16px;}
  .section{padding:40px 16px;}
}

/* =======================================
   GLOBAL BASELINE & TOKENS
   ======================================= */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { display:block; max-width:100%; height:auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Fluid tokens */
:root{
  --maxw: 1200px;

  /* Spacing scale */
  --space-1: clamp(6px, .6vw, 10px);
  --space-2: clamp(10px, 1.2vw, 16px);
  --space-3: clamp(14px, 2vw, 24px);
  --space-4: clamp(18px, 3vw, 40px);

  /* Radius */
  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 16px;

  /* Shadows */
  --shadow-1: 0 10px 24px rgba(0,0,0,.12);
  --shadow-2: 0 18px 45px rgba(0,0,0,.12);

  /* Safe viewport unit fallback */
  --vh: 1vh;
}
@supports (height: 1svh){
  :root{ --vh: 1svh; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior:auto !important;
  }
}

/* Global container utility */
.container{ width:min(var(--maxw), 100%); margin-inline:auto; padding-inline:20px; }

/* Space before footer */
section + footer,
.workfull + footer,
.tools-wrap + footer{
  margin-top: clamp(24px, 4vw, 40px);
}