/* ==========================================================================
   NORTHPORT — site stylesheet
   Placeholder site: home + contact.
   Brand tokens mirrored from /brand/colors.css so the site loads one file.
   ========================================================================== */

:root {
  /* Brand */
  --np-navy:        #17395B;
  --np-navy-deep:   #102A44;
  --np-white:       #FFFFFF;
  --np-ink:         #1F2933;
  --np-slate:       #6E7B88;
  --np-mist:        #A9B4BF;
  --np-border:      #D7DEE6;
  --np-surface:     #EDF1F5;
  --np-page:        #F4F6F8;

  /* Accessibility note --------------------------------------------------
     Brand --np-slate (#6E7B88) measures 4.33:1 on white and 4.00:1 on
     --np-page, both under the 4.5:1 WCAG AA minimum for body text.
     --np-slate-text is a slightly darker sibling used ONLY for running
     copy: 5.38:1 on white, 4.97:1 on page, 4.74:1 on surface.
     --np-slate is left untouched for dividers, borders and icon strokes,
     so this file stays in sync with brand/colors.css.
     -------------------------------------------------------------------- */
  --np-slate-text:  #5F6C78;

  /* Type
     --np-font-display is the headline face: Schibsted Grotesk, a modern
     editorial sans. Deliberately not Archivo — Archivo is built for tight
     functional settings and is excellent locked into the wordmark at
     0.20em tracking, but goes flat at 50px. Schibsted has more shape in
     its letterforms while staying in the same sans family as the logo.
     --np-font-head stays Archivo for the small wide-tracked labels that
     echo the wordmark. */
  --np-font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --np-font-head:    'Archivo', system-ui, -apple-system, sans-serif;
  --np-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --np-tracking-lg:  0.16em;

  /* Layout */
  --np-container:   1180px;
  --np-gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --np-header-h:    72px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--np-font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--np-ink);
  background: var(--np-white);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2 {
  font-family: var(--np-font-display);
  font-weight: 600;
  color: var(--np-ink);
  margin: 0;
  line-height: 1.14;
  /* Grotesques open up at display sizes; negative tracking pulls the
     word shapes back together. */
  letter-spacing: -0.028em;
}

p { margin: 0; }
a { color: var(--np-navy); }

:focus-visible {
  outline: 2px solid var(--np-navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible { outline-color: var(--np-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--np-container), 100% - (var(--np-gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--np-navy);
  color: var(--np-white);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.measure    { max-width: 62ch; }
.measure-sm { max-width: 30ch; }

.on-navy, .on-navy h1, .on-navy h2 { color: var(--np-white); }

.eyebrow {
  font-family: var(--np-font-head);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-lg);
  color: var(--np-slate-text);
  margin: 0 0 1.125rem;
}
.on-navy .eyebrow { color: var(--np-mist); }

/* Schibsted has a large x-height, so it reads bigger than a serif at the
   same pixel size and needs less of it. */
.h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--np-slate-text);
}
.on-navy .lede { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--np-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 1.0625rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--primary { background: var(--np-navy); color: var(--np-white); }
.btn--primary:hover { background: var(--np-navy-deep); }

.btn--on-navy { background: var(--np-white); color: var(--np-navy); }
.btn--on-navy:hover { background: var(--np-surface); }

.btn--outline {
  background: transparent;
  color: var(--np-navy);
  border-color: var(--np-border);
}
.btn--outline:hover { border-color: var(--np-navy); background: var(--np-page); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--np-border);
}

.site-header__inner {
  height: var(--np-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* Clear space around the wordmark = cap height, per the brand rules. */
.site-header__logo { display: block; padding-block: 4px; }
.site-header__logo img { width: 168px; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }

/* :not(.btn) matters. `.site-nav a` outscores `.btn--primary` on
   specificity (0,1,1 vs 0,1,0), so without it these rules repaint the
   Contact button's label ink-on-navy — and aria-current would make it
   navy-on-navy. Scope them away from buttons instead of escalating. */
.site-nav a:not(.btn) {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--np-ink);
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-nav a:not(.btn):hover { color: var(--np-navy); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--np-navy); font-weight: 600; }

.site-nav .btn { padding: 0.75rem 1.25rem; }

/* One nav item, so no menu is needed at any width. The wordmark shrinks to
   132px on small screens, still above the 120px brand minimum. */
@media (max-width: 620px) {
  .site-header__logo img { width: 132px; }
  .site-nav .btn { padding: 0.6875rem 1rem; }
}

/* --------------------------------------------------------------------------
   Hero — photo slot
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Scales with the viewport rather than sitting at a flat 760px. The photo
     is 2.08:1; on a wide monitor a short hero crops it to a letterbox slice
     and cuts the boat off. Letting the hero grow keeps the whole boat in
     frame, and with nothing below but a footer a tall hero is the point. */
  min-height: clamp(560px, calc(100svh - var(--np-header-h)), 1000px);
  background-color: var(--np-navy-deep);
  /* Drop a file at assets/img/hero.jpg and it appears here — no code change.
     The navy scrim is a brand rule for type over a photo, and it doubles as
     the placeholder state so the page looks finished with no image present.

     The gradient is left-weighted on purpose. An aerial wake shot puts a
     near-white band right where the headline sits; a flat scrim either
     leaves the type unreadable or muddies the whole photo. Heavy on the
     left protects the text, light on the right keeps the boat visible.
     At 0.88 even a pure-white wake pixel composites to rgb(45,68,90) —
     about 9:1 against white type. */
  background-image:
    /* Left-weighted, because the headline sits on the left and this photo's
       sky is bright (up to 229/255 there). At 0.86 even the brightest sky
       composites dark enough for white type; the right stays light so the
       boat reads as a photograph rather than a navy silhouette. */
    /* Stops are anchored to the CONTAINER, not the viewport. .container is
       max-width 1180px and centred, so on a 2560px screen the headline
       starts at x=690 — a viewport-anchored gradient ends its dark band
       right where the text begins. The calc() below reproduces the
       container's own centring maths so the band always tracks the text. */
    linear-gradient(to right,
      rgba(16, 42, 68, 0.88) 0,
      rgba(16, 42, 68, 0.85) calc(max(2.5rem, (100% - 1180px) / 2) + 640px),
      rgba(16, 42, 68, 0.36) calc(max(2.5rem, (100% - 1180px) / 2) + 1180px),
      rgba(16, 42, 68, 0.24) 100%),
    /* AVIF is 89 KB against the JPEG's 252 KB. Browsers without AVIF
       support fall through to the JPEG automatically. */
    image-set(url('../img/hero.avif') type('image/avif'),
              url('../img/hero.jpg')  type('image/jpeg'));
  background-size: cover;
  /* X 62% puts the boat right-of-centre, clear of the headline. */
  background-position: 62% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Narrow screens. The photo is 2.08:1 against a portrait viewport, so `cover`
   shows only ~26% of its width — any slice cuts the boat. 78% lands on the
   bow and hull rather than the masts. Text runs full width here, so the
   scrim is even rather than left-weighted. */
@media (max-width: 700px) {
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(16, 42, 68, 0.82) 0%,
        rgba(16, 42, 68, 0.86) 100%),
      image-set(url('../img/hero.avif') type('image/avif'),
                url('../img/hero.jpg')  type('image/jpeg'));
    background-position: 78% 55%;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 10vw, 7rem);
  max-width: 40rem;
}
.hero .h1 { text-wrap: balance; }

/* One orchestrated entrance on load. Nothing else moves. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: np-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.reveal:nth-child(1) { animation-delay: 0.05s; }
.reveal:nth-child(2) { animation-delay: 0.16s; }

@keyframes np-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* Compact hero for interior pages. */
.page-hero {
  background: var(--np-navy);
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* --------------------------------------------------------------------------
   Editorial split — asymmetric, label left, body right
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.split__body > p + p { margin-top: 1.125rem; }
.split__body > .rule-list { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* The opening statement of the section, set a step up from the body copy. */
.statement {
  font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
  line-height: 1.5;
  color: var(--np-ink);
  letter-spacing: -0.012em;
}

/* Hairline-ruled list. Deliberately not cards: no boxes, no shadows, no
   icons — the rules do the separating and the type does the work. */
.rule-list { margin: 0; }

.rule-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--np-border);
}
.rule-list__item:last-child { border-bottom: 1px solid var(--np-border); }

.rule-list dt {
  font-family: var(--np-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--np-ink);
  letter-spacing: -0.01em;
}
.rule-list dd {
  margin: 0;
  color: var(--np-slate-text);
  font-size: 0.9688rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .rule-list__item { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--np-navy);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.cta-band .btn-row { margin-top: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--np-navy-deep);
  color: var(--np-mist);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.site-footer__logo img { width: 176px; }
.site-footer a {
  color: var(--np-white);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
}
.site-footer a:hover { border-bottom-color: var(--np-white); }
.site-footer__legal {
  width: 100%;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8438rem;
  color: rgba(169, 180, 191, 0.85);
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-ink);
}
.field .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--np-slate-text);
}

.field input,
.field textarea {
  font-family: var(--np-font-body);
  font-size: 1rem;
  color: var(--np-ink);
  background: var(--np-white);
  border: 1px solid var(--np-border);
  border-radius: 2px;
  padding: 0.875rem 1rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.field input:hover, .field textarea:hover { border-color: var(--np-mist); }

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--np-navy);
  box-shadow: 0 0 0 3px rgba(23, 57, 91, 0.12);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot — bots fill this in, humans never see it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside {
  background: var(--np-page);
  border: 1px solid var(--np-border);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: 1.5rem;
}
.aside__item { display: grid; gap: 0.35rem; }
.aside__label {
  font-family: var(--np-font-head);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-lg);
  color: var(--np-slate-text);
}
.aside__item a {
  color: var(--np-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--np-border);
  justify-self: start;
}
.aside__item a:hover { border-bottom-color: var(--np-navy); }
.aside__item p { font-size: 0.9375rem; color: var(--np-slate-text); }

/* --------------------------------------------------------------------------
   Minimal centred pages (thanks, 404)
   -------------------------------------------------------------------------- */

.centered {
  min-height: 58vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.centered .lede { margin: 1.125rem auto 0; max-width: 42ch; }
.centered .btn-row { justify-content: center; }