/* moveUP site styles. The design rules behind these values are in DESIGN.md. */

/* FONTS: stored with the site in /fonts (free, SIL Open Font License) */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  /* COLOURS */
  --teal: #12B8B0; --orange: #F5A623; --navy: #17324D; --bg: #F8FAF9; --sky: #6CCFE6; --coral: #E76F51;
  --muted: #4A6278;              /* secondary text, AA on the light background */
  --teal-ink: #0B7C77;           /* darker teal for small text, AA on white */
  --edge: rgba(23,50,77,.14);    /* panel borders */
  --panel: rgba(255,255,255,.78);
  --surface: #fff;               /* solid boxes: footer, inputs, step chips, menu drop-down */
  --tint: rgba(23,50,77,.06);    /* very light fill: tabs, navy buttons */
  --grid: rgba(23,50,77,.045);   /* background grid lines */
  --input-edge: rgba(23,50,77,.22);
  --tag-ink: #9A5B00;            /* "START HERE" tag */
  --draft-ink: #A33B1F;          /* "DRAFT" labels */
  --plate: transparent;          /* behind the logos (light in the dark theme) */
  color-scheme: light;
  /* TYPE SCALE: every text size on the site comes from this list */
  --fs-h1: clamp(2.2rem, 5.2vw, 3.8rem); /* page headline */
  --fs-h2: 1.5rem;    /* section headings */
  --fs-h3: 1.2rem;    /* card and step titles */
  --fs-lead: 1.15rem; /* intro line under the headline */
  --fs-body: 1rem;    /* normal text */
  --fs-small: .9rem;  /* form labels, footer, toggles */
  --fs-step: .82rem;  /* step names in the 10-step row */
  --fs-label: .78rem; /* mono labels like "01 / PROCESS" */
  --fs-micro: .66rem; /* tiny tags like "START HERE" */
}
/* DARK THEME: chosen with the sun/moon button in the header (or the visitor's device setting).
   "--navy" is the main text colour, so here it becomes a light colour. */
:root[data-theme="dark"] {
  --navy: #E6EEF3; --bg: #0B1620; --muted: #A3B6C6; --teal-ink: #5ED8D0;
  --edge: rgba(230,238,243,.14); --panel: rgba(18,34,50,.72); --surface: #13263A;
  --tint: rgba(230,238,243,.07); --grid: rgba(108,207,230,.06); --input-edge: rgba(230,238,243,.25);
  --tag-ink: #F5B651; --draft-ink: #F08A6E; --plate: #F8FAF9;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; color: var(--navy); line-height: 1.6; font-family: "Space Grotesk", system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(50rem 28rem at 85% -5%, rgba(108,207,230,.30), transparent 65%),
    radial-gradient(40rem 26rem at -10% 25%, rgba(18,184,176,.16), transparent 65%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { font-size: var(--fs-body); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.brand { text-transform: none; }  /* name is always written "moveUP", even inside all-caps labels */
.mono { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); }
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(23,50,77,.06); }
.muted { color: var(--muted); }
.draft { font: 500 var(--fs-micro) "IBM Plex Mono"; color: var(--draft-ink); letter-spacing: .04em; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--surface); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* BUTTONS: solid-colour outline, 50% see-through fill, navy text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border-radius: 10px;
  font: 700 var(--fs-body) "Space Grotesk", sans-serif; color: var(--navy); text-decoration: none; border: 2px solid; cursor: pointer; transition: .2s; }
.btn-orange { border-color: var(--orange); background: rgba(245,166,35,.5); }
.btn-teal   { border-color: var(--teal);   background: rgba(18,184,176,.5); }
.btn-navy   { border-color: var(--navy);   background: var(--tint); }
.btn:hover  { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(108,207,230,.22), 0 6px 20px rgba(18,184,176,.25); }
.btn kbd { font: 500 var(--fs-label) "IBM Plex Mono"; opacity: .75; }

/* HEADER — equal-size logos */
header.site { position: sticky; top: 12px; z-index: 10; margin-top: 12px; }
header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; }
.logos { display: flex; align-items: center; gap: 16px; text-decoration: none; flex: none; } /* never squeezed, so the logos keep their equal size */
.logos img { height: 38px; width: auto; }
.logos img[src$="northgroup-logo.png"] { height: 44px; } /* its lettering sits small in the image, so it gets a little extra height to look equal */
.logos .div { width: 1px; height: 28px; background: var(--edge); }
nav { display: flex; gap: 4px; }
nav a { text-decoration: none; padding: 8px 14px; border-radius: 8px; font-weight: 500; color: var(--muted); }
nav a:hover, nav a[aria-current] { color: var(--navy); background: rgba(18,184,176,.12); }
/* "Client login": the last menu item, drawn as a small outlined button */
nav a.login { margin-left: 8px; padding: 6px 14px; border: 2px solid var(--navy); background: var(--tint); color: var(--navy); font-weight: 700; font-size: var(--fs-small); align-self: center; }
nav a.login:hover { background: rgba(18,184,176,.18); }
.tools { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
/* THEME BUTTON (sun/moon): needs JavaScript, so it's hidden without it */
.theme-btn { display: none; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 8px; border: 1px solid var(--edge);
  background: var(--tint); color: var(--navy); cursor: pointer; }
.js .theme-btn { display: inline-grid; }
.theme-btn:hover { border-color: var(--teal); }
.theme-btn .sun, :root[data-theme="dark"] .theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }

/* LOGOS IN THE DARK THEME: both logos have dark lettering, so they sit together on a light "plate"
   (same treatment for both, so they stay equal in size and prominence) */
:root[data-theme="dark"] .logos, :root[data-theme="dark"] .logo-pair { background: var(--plate); border-radius: 10px; padding: 5px 12px; }
:root[data-theme="dark"] .logos .div { background: rgba(23,50,77,.2); }
:root[data-theme="dark"] .hero .full-logo { background: var(--plate); border-radius: 14px; padding: 10px 18px; }

/* HERO (home: centred) */
.hero { text-align: center; padding: 64px 0 36px; }
.hero .full-logo { width: min(340px, 78%); height: auto; margin: 0 auto 18px; } /* height: auto keeps the logo's own proportions */
.hero h1, .page-head h1 { font-size: var(--fs-h1); max-width: 17ch; margin-inline: auto; }
h1 em { font-style: normal; color: var(--teal-ink); }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; margin: 0 auto 28px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
h1, h2 { text-wrap: balance; } /* even line lengths, so no word is left alone on the last line */
.hero h1 { max-width: 21ch; }   /* the home headline is two sentences, so it gets a little more width */

/* PAGE HEAD (inner pages: centred, a little shorter than the home hero) */
.page-head { text-align: center; padding: 56px 0 24px; }

/* PROCESS CONSOLE on the home page */
.console { margin: 48px 0; padding: 24px 28px; }
.console-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px dashed var(--edge); padding-bottom: 14px; margin-bottom: 22px; }
.console-head h2 { margin: 2px 0 0; }
.tabs { display: flex; gap: 4px; background: var(--tint); padding: 3px; border-radius: 8px; }
.tabs button, .tabs a { padding: 5px 14px; border-radius: 6px; border: 0; background: none; font: 700 var(--fs-small) "Space Grotesk", sans-serif; color: var(--muted); cursor: pointer; text-decoration: none; }
.tabs .on { background: var(--surface); color: var(--navy); box-shadow: 0 1px 4px rgba(23,50,77,.15); }
.track { display: grid; grid-template-columns: repeat(10, 1fr); position: relative; list-style: none; margin: 0; padding: 0; }
.track::before { content: ""; position: absolute; left: 5%; right: 5%; top: 17px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(18,184,176,.6) 0 8px, transparent 8px 14px); }
.track[hidden] { display: none; }
.track li { text-align: center; position: relative; font-size: var(--fs-step); font-weight: 500; color: var(--muted); padding: 0 2px; white-space: nowrap; }
.n { width: 35px; height: 35px; border-radius: 9px; display: grid; place-items: center; position: relative; flex: none;
  background: var(--surface); border: 1px solid var(--edge); font: 600 var(--fs-label) "IBM Plex Mono"; color: var(--navy); }
.track .n { margin: 0 auto 8px; }
.track .now { color: var(--navy); font-weight: 700; }
.now .n, .n.lit { background: rgba(18,184,176,.5); border: 2px solid var(--teal); box-shadow: 0 0 0 5px rgba(18,184,176,.14), 0 0 18px rgba(108,207,230,.9); }
.track .now .n { animation: pulse 2.4s infinite; }
.track .tag { display: block; font: 600 var(--fs-micro) "IBM Plex Mono"; letter-spacing: .06em; color: var(--tag-ink); margin-top: 2px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(18,184,176,.06), 0 0 26px rgba(108,207,230,.9); } }
.track .pick { all: unset; display: block; width: 100%; cursor: pointer; } /* a real box (not "display: contents"), so keyboard users can Tab to it */
.track li:has(.pick:hover) .n { border-color: var(--teal); }
.track li:has(.pick:focus-visible) .n { outline: 2px solid var(--navy); outline-offset: 2px; }
.console-foot { border-top: 1px dashed var(--edge); margin-top: 22px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.detail { min-height: 84px; }
.detail strong { display: block; font-size: var(--fs-h3); margin-top: 2px; }
.detail p { margin: 2px 0 0; color: var(--muted); max-width: 62ch; }
.detail .draft { margin-left: 6px; }

/* TWO PATHS (link cards) */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.path { padding: 26px; text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: .25s; }
.path:hover { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18,184,176,.1), 0 10px 30px rgba(18,184,176,.15); transform: translateY(-2px); }
.path p { color: var(--muted); margin: 0 0 10px; }
.path .go { margin-top: auto; color: var(--teal-ink); font-weight: 700; }

/* ABOUT */
.about { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; padding: 28px; margin: 48px 0; }
.about img { width: 100%; height: auto; border-radius: 12px; aspect-ratio: 1; object-fit: cover; object-position: top; border: 1px solid var(--edge); }
.about p { color: var(--muted); max-width: 70ch; }
.about .signature { color: var(--navy); font-weight: 500; font-size: var(--fs-small); margin-bottom: 0; }

/* CONTACT */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; padding: 32px; margin-bottom: 48px; }
.contact p { color: var(--muted); }
.contact form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; font-weight: 500; font-size: var(--fs-small); margin-bottom: 4px; }
input, select, textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--input-edge); background: var(--surface); color: var(--navy); font: inherit; }
textarea { min-height: 110px; }
.full { grid-column: 1 / -1; }
.form-note { font-size: var(--fs-small); margin: 0; }
.contact a { color: var(--teal-ink); }
.hp { position: absolute; left: -9999px; } /* spam trap: off-screen, never seen by people */
/* "Sent" / "didn't send" message under the button */
.contact .form-status { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid; color: var(--navy); font-weight: 500; }
.form-status a { white-space: nowrap; }
.form-status.ok  { border-color: var(--teal); background: rgba(18,184,176,.12); }
.form-status.err { border-color: var(--coral); background: rgba(231,111,81,.12); }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }

/* PROCESS PAGE: vertical timeline of step cards */
.track-switch { display: flex; justify-content: center; margin: 4px 0 8px; }
.track-switch .tabs { padding: 4px; }
.track-switch .tabs a { padding: 8px 22px; font-size: var(--fs-body); }
.steps-section { margin: 32px 0 56px; }
.steps-section > header { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.steps-section > header h2 { margin: 2px 0 0; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(18,184,176,.6) 0 8px, transparent 8px 14px); }
.timeline > li { display: grid; grid-template-columns: 35px 1fr; gap: 18px; align-items: start; margin-bottom: 14px; }
.timeline .n { margin-top: 20px; }
.step-card { padding: 18px 22px; transition: .25s; }
.step-card:hover { border-color: var(--teal); }
.step-card h3 { margin: 2px 0 4px; }
.step-card p { margin: 0; color: var(--muted); } /* text fills the card, wrapping inside its equal side padding */
.step-card .embed-box { margin-top: 14px; }
/* INSIDER TIP: a short extra line on some step cards, with a teal bar on the left */
.step-card .tip { margin-top: 12px; padding: 8px 0 8px 14px; border-left: 3px solid var(--teal); color: var(--navy); font-size: var(--fs-small); max-width: 50%; } /* tips use half the card on wide screens */
.tip .mono { margin-right: 6px; }
.steps-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 26px; margin-left: 53px; }
.steps-cta p { margin: 0; flex: 1 1 320px; }
.cta-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-side .muted { font-size: var(--fs-small); }
.cta-side a:not(.btn) { color: var(--teal-ink); }
.js .steps-section[hidden] { display: none; }

/* EMBEDS (BoldTrail iframes from NorthGroup's listings site) */
.embed-box { background: #fff; /* stays white in both themes: NorthGroup's embeds are white and can't be restyled */ border: 1px solid var(--edge); border-radius: 12px; padding: 8px; }
.embed-box iframe { display: block; width: 100%; border: 0; }
.embed-note { font-size: var(--fs-small); color: var(--muted); margin: 8px 0 0; }
/* home value box: one row on wide screens; on phones its button wraps, so it needs more height */
.value-embed { height: 60px; }
@media (max-width: 700px) { .value-embed { height: 118px; } }

/* SEARCH PAGE */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 48px; } /* same size: RDU shows it comes first by its place and "Primary area" label */
.area { overflow: hidden; display: flex; flex-direction: column; }
.area .photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tint); } /* owner's photos, 1200x675 */
.area .body { padding: 22px 24px 24px; }
.area p { color: var(--muted); }
.served { font-size: var(--fs-small); color: var(--muted); margin: 12px 0 0; }
.served .mono { color: var(--navy); margin-right: 4px; }
.search { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding: 28px; margin-bottom: 56px; align-items: start; }
.search aside { display: flex; flex-direction: column; gap: 12px; }
.search aside .btn { width: 100%; }
.search aside p { margin: 0; color: var(--muted); }
.search aside a:not(.btn) { color: var(--teal-ink); }

/* 404 */
.notfound { text-align: center; padding: 80px 0 100px; }
.notfound .n { margin: 0 auto 18px; width: fit-content; padding: 0 14px; }
.notfound h1 { font-size: var(--fs-h1); max-width: 17ch; margin-inline: auto; }

/* FOOTER */
footer { background: var(--surface); border-top: 1px solid var(--edge); padding: 36px 0 26px; }
.service { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px dashed var(--edge); }
.logo-pair { display: flex; align-items: center; gap: 28px; }
.service img { height: 46px; width: auto; }
.service img[src$="northgroup-logo.png"] { height: 53px; }
.service p { font-size: var(--fs-h2); font-weight: 700; margin: 0; flex: 1 1 280px; }
.legal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 20px; font-size: var(--fs-small); color: var(--muted); }
.legal a { color: var(--teal-ink); }
.eho { display: flex; gap: 10px; align-items: center; }

/* below 900px the ten steps no longer fit in one row: switch to a vertical rail */
@media (max-width: 900px) {
  .step-card .tip { max-width: none; } /* tablets and phones: half would be too narrow, so tips use the full card */
  .track { grid-template-columns: 1fr; }
  .track::before { left: 17px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(18,184,176,.6) 0 8px, transparent 8px 14px); }
  .track li { display: flex; align-items: center; gap: 12px; text-align: left; font-size: var(--fs-body); padding: 5px 0; }
  .track .n { margin: 0; }
  .track .pick { display: flex; align-items: center; gap: 12px; width: auto; }
  .track .tag { display: inline; margin: 0 0 0 auto; }
  .search, .areas { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .logos img { height: 28px; }
  .logos img[src$="northgroup-logo.png"] { height: 32px; }
  header .bar { position: relative; padding: 10px 12px; gap: 8px; }
  nav { display: none; }
  /* phone menu: drops down under the header bar when "Menu" is tapped */
  nav.open { display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px;
    background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 12px 30px rgba(23,50,77,.12); }
  nav.open a { padding: 12px 14px; font-size: var(--fs-body); }
  nav.open a.login { margin: 6px 0 0; text-align: center; align-self: stretch; }
  .menu-btn { display: inline-block; padding: 7px 14px; font-size: var(--fs-small); }
  .theme-btn { width: 34px; height: 34px; }
  .logo-pair { gap: 20px; }
  :root[data-theme="dark"] .logos { padding: 4px 8px; }
  .logos { gap: 10px; }
  .console-foot { flex-direction: column; align-items: stretch; }
  .hero, .page-head { padding-top: 40px; }
  .cta-row .btn { flex: 1 1 100%; }
  .paths, .about, .contact, .contact form, .legal { grid-template-columns: 1fr; }
  .about img { width: 150px; }
  .service img { height: 34px; }
  .service img[src$="northgroup-logo.png"] { height: 39px; }
  .timeline > li { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { display: none; }
  .timeline .n { display: none; }
  .step-card .mono { display: inline; }
  .steps-cta { margin-left: 0; }
  .search { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}