/* ===== Base (from original helmet) ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #f6f8f7; }
::placeholder { color: #a7aeac; }
input, select, textarea, button { font-family: inherit; }

/* ===== Hover effects (translated from style-hover) ===== */
.nav-link:hover { color: oklch(0.50 0.07 215) !important; }
.nav-cta:hover { background: oklch(0.50 0.085 215) !important; }
.btn-primary:hover { background: oklch(0.50 0.085 215) !important; }
.btn-white:hover { box-shadow: 0 2px 10px rgba(0,0,0,.10) !important; }
.lead-card:hover { box-shadow: 0 16px 44px -18px rgba(40,80,110,.45) !important; transform: translateY(-3px); }
.back-link:hover { color: oklch(0.42 0.07 215) !important; }
.footer-link:hover { color: #fff !important; }

/* ===== Focus effects (translated from style-focus) ===== */
.field:focus { border-color: oklch(0.62 0.075 215) !important; }

/* links reset so anchors look like the original clickable divs/spans */
a { text-decoration: none; color: inherit; }

/* =========================================================
   RESPONSIVE LAYER
   Overrides the design's fixed inline layout at smaller
   screen sizes. Targets the original inline-style values
   via attribute selectors so the HTML stays untouched.
   ========================================================= */

/* never let anything cause horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

/* ---------- TABLET (<= 1024px) : 3-up grids become 2-up ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* keep the logo text on one line at every size */
[style*="font:800 18px/1 'Hanken Grotesk'"] { white-space: nowrap; }

/* ---------- Hamburger button (injected by script.js) ---------- */
.nav-toggle {
  display: none;            /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 38px;
  padding: 8px;
  border: none; background: transparent; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 24px; border-radius: 2px;
  background: oklch(0.45 0.06 220);
  transition: transform .2s, opacity .2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- NAV (<= 880px) : collapse the links into the hamburger menu ---------- */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none !important;            /* override inline display:flex */
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch !important;     /* override inline align-items:center */
    gap: 2px !important;
    padding: 8px 16px 16px;
    background: #fff;
    border-bottom: 1px solid #eef1f0;
    box-shadow: 0 14px 26px -16px rgba(40,80,110,.30);
  }
  .nav-menu.open { display: flex !important; }
  .nav-menu a { margin-left: 0 !important; }

  /* hide the footer's nav links on mobile */
  [style*="gap:22px"][style*="rgba(255,255,255,.72)"] { display: none !important; }
}

/* ---------- NARROW / MOBILE (<= 760px) : everything single column ---------- */
@media (max-width: 760px) {
  /* all multi-column content grids collapse to one column
     (the "1fr 1fr" match also covers the "1fr 1fr 1fr" sections) */
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:.85fr 1.15fr"],
  [style*="grid-template-columns:.8fr 1.2fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* service-area band + remote/services pointer rows: stack neatly */
  [style*="align-items:center"][style*="gap:22px"],
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-wrap: wrap !important;
  }

  /* trim the big horizontal section padding so content breathes */
  [style*="padding:84px 40px 76px"] { padding: 56px 20px 48px !important; }
  [style*="padding:80px 40px 20px"] { padding: 48px 20px 12px !important; }
  [style*="padding:44px 40px 20px"] { padding: 28px 20px 12px !important; }
  [style*="padding:40px 40px 80px"] { padding: 24px 20px 56px !important; }
  [style*="padding:80px 40px"]      { padding: 56px 20px !important; }
  [style*="padding:72px 40px 56px"] { padding: 52px 20px 40px !important; }
  [style*="padding:64px 40px 24px"] { padding: 44px 20px 16px !important; }
  [style*="padding:40px 40px 24px"] { padding: 24px 20px 16px !important; }
  [style*="padding:24px 40px 24px"] { padding: 16px 20px !important; }
  [style*="padding:24px 40px 88px"] { padding: 16px 20px 56px !important; }
  [style*="padding:72px 40px 40px"] { padding: 52px 20px 28px !important; }
  [style*="padding:64px 40px 36px"] { padding: 44px 20px 24px !important; }
  [style*="padding:36px 40px 24px"] { padding: 24px 20px 16px !important; }
  [style*="padding:26px 40px 0"]    { padding: 20px 20px 0 !important; }
  [style*="padding:28px 40px 88px"] { padding: 20px 20px 56px !important; }
  [style*="padding:56px 40px"]      { padding: 40px 20px !important; }
  [style*="padding:16px 40px"]      { padding: 12px 16px !important; }
  /* footer */
  [style*="padding:40px"][style*="oklch(0.30 0.035 230)"] { padding: 28px 20px !important; }
}

/* ---------- SMALL PHONES (<= 560px) : scale down headings ---------- */
@media (max-width: 560px) {
  [style*="font:800 52px"] { font-size: 33px !important; }
  [style*="font:800 48px"] { font-size: 31px !important; }
  [style*="font:800 46px"] { font-size: 30px !important; }
  [style*="font:800 44px"] { font-size: 29px !important; }
  [style*="font:800 38px"] { font-size: 27px !important; }
  [style*="font:800 28px"] { font-size: 23px !important; }
  [style*="font:600 30px"] { font-size: 21px !important; }
  [style*="font:600 24px"] { font-size: 19px !important; }
  [style*="font:800 24px"] { font-size: 21px !important; }
  [style*="font-size:18px"] { font-size: 16px !important; }
}

/* =========================================================
   ENTRANCE ANIMATIONS
   - The whole page softly fades in on every load, so the
     multi-page navigation no longer "flashes" white.
   - Content sections fade + slide up as they scroll into
     view. The .reveal / .in classes are added by script.js;
     if JS is off, nothing is hidden (content stays visible).
   ========================================================= */

/* page fade-in on load */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageFadeIn .45s ease both; }

/* scroll reveal: hidden start state + revealed state */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* accessibility: users who prefer reduced motion get no animation */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}