/* ============================================================
 * The Gate Review — world layer (site-wide chrome + browser surfaces)
 * Palette and swirl mark are fixed by the 2026-09 brand board;
 * type and composition belong to this world.
 * ============================================================ */
:root {
  --gr-navy:      #032F4F;   /* deep ocean: the field every gate stands on */
  --gr-navy-2:    #034A77;   /* ocean navy: actions on paper, raised navy  */
  --gr-navy-3:    #0360A0;   /* current: hover on navy actions             */
  --gr-aqua:      #B0F2FA;   /* brand aqua: the marker, the credit band    */
  --gr-sky:       #6BC7DE;   /* shallow sky: secondary light on navy       */
  --gr-paper:     #F4FCFD;   /* aqua mist paper                            */
  --gr-ink:       #10304A;   /* body ink on paper                          */
  --gr-ink-2:     #3E5A70;   /* secondary ink on paper                     */
  --gr-on-navy:   #FFFFFF;
  --gr-on-navy-2: #C9DDE8;   /* navy-tinted secondary text (≥ 9:1 on navy) */
  --gr-on-navy-3: #8FB0C4;   /* quiet labels on navy (≥ 6:1)               */
  --gr-line:      rgba(176, 242, 250, 0.32); /* the gate line on navy      */
  --gr-rule:      rgba(16, 48, 74, 0.16);    /* hairline on paper          */

  --gr-display: 'Schibsted Grotesk', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --gr-sans:          'Montserrat', ui-sans-serif, system-ui, sans-serif;

  --gr-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --gr-max:    1240px;
  --gr-ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Browser surfaces ---------- */
html { accent-color: var(--gr-navy-2); }
::selection { background: var(--gr-aqua); color: var(--gr-navy); }
body { caret-color: var(--gr-navy-2); }
html { scrollbar-color: var(--gr-navy-2) var(--gr-paper); }
:focus-visible { outline: 2px solid var(--gr-navy-2); outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--gr-navy);
  padding: 0 var(--gr-gutter);
  border-bottom: 1px solid var(--gr-line);
}
.site-header__inner {
  max-width: var(--gr-max);
  min-height: 76px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.primary-nav { gap: clamp(1rem, 2.2vw, 2rem); }
/* Items differ in height (Services has a toggle, Contact Us is a 44px button), so centre them on one line */
@media (min-width: 901px) {
  .primary-nav { align-items: center; }
  .primary-nav__item { display: flex; align-items: center; }
}
.primary-nav a {
  font-family: var(--gr-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gr-on-navy-2);
  padding-block: 0.4rem;
  background-image: linear-gradient(var(--gr-aqua), var(--gr-aqua));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 220ms var(--gr-ease), background-size 320ms var(--gr-ease);
}
/* Services opens its submenu, so its trigger is a button styled like the links */
.nav-dropdown__toggle {
  font-family: var(--gr-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gr-on-navy-2);
}
.nav-dropdown__toggle:hover,
.nav-dropdown__toggle:focus-visible,
.nav-dropdown.is-open .nav-dropdown__toggle { color: var(--gr-on-navy); }
/* "Services" itself links to the Services page; the chevron beside it opens the submenu */
.nav-dropdown__toggle { min-width: 24px; min-height: 32px; }
@media (max-width: 900px) {
  .nav-dropdown__link { flex: 1; }
  .nav-dropdown__toggle { width: 44px; min-height: 44px; justify-content: center; padding: 0; }
}
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  color: var(--gr-on-navy);
  background-size: 100% 1px;
}
.primary-nav a:focus-visible,
.nav-cta:focus-visible,
.nav-menu summary:focus-visible { outline-color: var(--gr-aqua); }

.site-header .nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.15rem;
  font-family: var(--gr-sans);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gr-aqua);
  background: transparent;
  border: 1px solid rgba(176, 242, 250, 0.5);
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 220ms var(--gr-ease), color 220ms var(--gr-ease), border-color 220ms var(--gr-ease);
}
.site-header .nav-cta:hover,
.site-header .nav-cta:focus-visible {
  background: var(--gr-aqua);
  color: var(--gr-navy);
  border-color: var(--gr-aqua);
}

.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--gr-on-navy);
  font-family: var(--gr-sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu__bars,
.nav-menu__bars::before {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 220ms var(--gr-ease);
}
.nav-menu__bars { position: relative; transform: translateY(-3px); }
.nav-menu__bars::before { content: ""; position: absolute; top: 6px; left: 0; }
.nav-menu[open] .nav-menu__bars { transform: translateY(0) rotate(45deg); }
.nav-menu[open] .nav-menu__bars::before { transform: translateY(-6px) rotate(-90deg); }
.nav-menu__list {
  position: absolute;
  right: calc(var(--gr-gutter) * -1);
  top: calc(100% + 16px);
  width: min(100vw, 360px);
  list-style: none;
  background: var(--gr-navy);
  border-top: 1px solid var(--gr-line);
  border-bottom: 1px solid var(--gr-line);
  padding: 0.5rem var(--gr-gutter) 1rem;
  z-index: 10;
}
.nav-menu__list a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gr-line);
  color: var(--gr-on-navy);
  text-decoration: none;
  font-family: var(--gr-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
}
.nav-menu__list li:last-child a { border-bottom: 0; }

/* Homepage, Free Tools, About, Services, Consultation, Contact and Articles: the header floats over the hero until the page scrolls */
.js .page-gate .site-header,
.js .page-tools .site-header,
.js .page-about .site-header,
.js .page-services .site-header,
.js .page-consult .site-header,
.js .page-contact .site-header,
.js .page-articles:not(.page-article) .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 260ms var(--gr-ease), border-color 260ms var(--gr-ease);
}
/* over the swirl, the outlined action keeps a solid navy ground so it stays legible */
.js .page-gate .site-header:not(.is-scrolled) .nav-cta,
.js .page-tools .site-header:not(.is-scrolled) .nav-cta,
.js .page-about .site-header:not(.is-scrolled) .nav-cta,
.js .page-services .site-header:not(.is-scrolled) .nav-cta,
.js .page-consult .site-header:not(.is-scrolled) .nav-cta,
.js .page-contact .site-header:not(.is-scrolled) .nav-cta,
.js .page-articles:not(.page-article) .site-header:not(.is-scrolled) .nav-cta { background: var(--gr-navy); }
.js .page-gate .site-header:not(.is-scrolled) .nav-cta:hover,
.js .page-tools .site-header:not(.is-scrolled) .nav-cta:hover,
.js .page-about .site-header:not(.is-scrolled) .nav-cta:hover,
.js .page-services .site-header:not(.is-scrolled) .nav-cta:hover,
.js .page-consult .site-header:not(.is-scrolled) .nav-cta:hover,
.js .page-contact .site-header:not(.is-scrolled) .nav-cta:hover,
.js .page-articles:not(.page-article) .site-header:not(.is-scrolled) .nav-cta:hover { background: var(--gr-aqua); }
.js .page-gate .site-header.is-scrolled,
.js .page-tools .site-header.is-scrolled,
.js .page-about .site-header.is-scrolled,
.js .page-services .site-header.is-scrolled,
.js .page-consult .site-header.is-scrolled,
.js .page-contact .site-header.is-scrolled,
.js .page-articles:not(.page-article) .site-header.is-scrolled {
  background: var(--gr-navy);
  border-bottom-color: var(--gr-line);
}

@media (max-width: 900px) {
  .site-header .nav-cta { min-height: 40px; padding: 0 0.9rem; font-size: 0.8rem; }
}
@media (max-width: 440px) {
  .nav-menu__label { display: none; }
  .site-header .nav-cta { padding: 0 0.7rem; font-size: 0.76rem; }
  .site-nav { gap: 0.75rem; }
  .logo { gap: 0.55rem; }
  .logo__mark { width: 34px; height: 34px; }
}
@media (max-width: 340px) {
  .site-header .nav-cta { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--gr-navy);
  color: var(--gr-on-navy-2);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gr-gutter) 2rem;
  border-top: 1px solid var(--gr-line);
}
.site-footer__inner {
  max-width: var(--gr-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2.5rem 3rem;
  align-items: start;
}
.site-footer__brand { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.site-footer__tagline {
  font-family: var(--gr-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--gr-on-navy);
  max-width: 14ch;
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.2rem 3rem;
  justify-content: end;
}
.site-footer__nav a,
.site-footer a {
  margin: 0;
  padding: 0.45rem 0;
  font-size: 0.88rem;
  color: var(--gr-on-navy-2);
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--gr-on-navy); }
.site-footer a:focus-visible { outline-color: var(--gr-aqua); }
.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gr-line);
  font-size: 0.78rem;
  color: var(--gr-on-navy-3);
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__nav { justify-content: start; gap: 0.1rem 2rem; }
}