/* ==========================================================================
   Polaris IT Solutions
   One stylesheet. No framework, no build step.

   Layout rule inherited from the mark: only the star sits on the axis.
   Polaris is at x=450 of the 900-unit frame, which is dead centre, so a
   centred hero figure puts the star on the page's vertical axis. The
   inscription beneath it is centred in the same box, which aligns it to
   Polaris rather than to either line of the wordmark — the wordmark's two
   lines deliberately lean opposite ways and neither is centred.

   Everything else on every page is left-aligned to one edge.
   ========================================================================== */

/* --- type -----------------------------------------------------------------
   No webfont requests. If Jost or Inter is installed locally the browser can
   use it; otherwise the stacks below fall back to common system faces. The
   wordmark itself is outlined SVG, so its appearance is independent of fonts.
   ------------------------------------------------------------------------- */

/* --- tokens -------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --ink: #14140f;          /* brand ink, warm black */
  --paper: #f2f1ec;        /* primary text            16.3:1 */
  --paper-dim: #a8a79e;    /* secondary text           7.6:1 */
  --rule: #2e2e27;         /* hairlines, non-text */
  --polaris: #4b9cd3;      /* Carolina Blue            6.2:1 */
  --polaris-lift: #7fbce4; /* hover / focus            9.0:1 */

  --display: "Jost", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --s7: 9rem;

  --measure: 62ch;
  --frame: 1080px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* The hero mark is deliberately large. Thin tapered ribbons at 460px sit
     inside the browser's antialiasing danger zone and render as grey hairs;
     at this size the visible mass is several device pixels and holds up. */
  --hero-mark: min(760px, 84vw);
}

/* --- reset --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper-dim);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--polaris); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--polaris-lift); }

:focus-visible {
  outline: 2px solid var(--polaris-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--polaris);
  color: var(--ink);
  padding: var(--s1) var(--s2);
  font-family: var(--body);
  font-weight: 500;
  z-index: 10;
}
.skip:focus { left: 0; color: var(--ink); }

/* --- frame --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- masthead ------------------------------------------------------------
   The nameplate reads POLARIS only. "IT Solutions" is the legal name and
   lives in the footer and the terms page, where a descriptor belongs. */

.masthead { border-bottom: 1px solid var(--rule); }

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-block: var(--s3);
}

.masthead-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  color: var(--paper);
}
.masthead-logo > a { display: flex; color: inherit; text-decoration: none; transition: color 0.15s ease; }
.masthead-logo svg { width: 30px; height: 30px; flex: 0 0 auto; }
.masthead-logo > a:hover svg { color: var(--polaris-lift); }

/* --- the door -------------------------------------------------------------
   The o in POLARIS is a link to the remote-support page, as it has been on
   every Polaris site. Unmarked on purpose: clients are told where it is. */

.door { color: inherit; text-decoration: none; }
.door:hover, .door:focus-visible { color: var(--polaris); }
.polaris-word .door path { transition: fill 0.15s ease; }
.polaris-word .door:hover path,
.polaris-word .door:focus-visible path { fill: #4b9cd3; }

.nameplate {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-left: auto;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}
.nav a { color: var(--paper-dim); text-decoration: none; }
.nav a:hover { color: var(--paper); }
.nav a[aria-current="page"] { color: var(--paper); }

/* --- typography ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  color: var(--paper);
  font-weight: 300;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}

.hero-title, .page-title { margin-bottom: var(--s3); }

.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  max-width: 20ch;
}

.page-title {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
}

h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

p { margin: 0 0 var(--s2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--paper);
  max-width: 50ch;
}

.quiet { color: var(--paper-dim); }

/* --- inscription ---------------------------------------------------------
   Esse Quam Videri is set as an inscription, not a tagline: small, widely
   spaced, no rule beneath it, never larger than body text. */

.inscription {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;       /* offsets the trailing letter-space */
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0;
  max-width: none;
}

/* --- sections ------------------------------------------------------------ */

.band { padding-block: clamp(3.5rem, 9vw, var(--s7)); }
.band + .band { padding-top: 0; }
.band-rule { border-top: 1px solid var(--rule); padding-top: clamp(3rem, 7vw, var(--s6)); }
.band + .band-rule { padding-top: clamp(3rem, 7vw, var(--s6)); }

/* --- hero ----------------------------------------------------------------
   One centred monument, then everything back to the left edge. */

/* The hero is .hero, not .band, so the .band sibling rules below do not
   reach it. It needs its own bottom padding or the next section's hairline
   sits flush against the lede. Matches .band-rule's padding-top so the rule
   is centred in the gap. */
.hero { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 7vw, var(--s6)); }

.hero-figure {
  width: var(--hero-mark);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Negative, because the lockup's 900-unit frame carries ~10% empty height
   below the wordmark baseline. The frame is structural and must not be
   cropped, so the inscription is pulled into that space instead. */
.hero-figure .inscription {
  text-align: center;
  margin-top: -1rem;
}

/* The lockup's wordmark is three separately positioned runs: POLARIS, IT,
   SOLUTIONS. Uncomment to let POLARIS carry the hero alone and treat the
   descriptor as legal copy that lives in the footer and the terms page.
   Note that POLARIS ink centres at x=467, not 450, so the inscription will
   no longer align to the wordmark — it stays on the star's axis. */
/* .hero-figure .polaris-word path:nth-of-type(n+2) { display: none; } */

.hero-copy { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* --- the action ----------------------------------------------------------
   The primary action is an email address at display size. Deliberately not
   a phone number: direct access is what a retainer buys. */

.actionblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s4);
}

.action {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.7vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: 0.004em;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.14em;
  transition: color 0.15s ease, border-color 0.15s ease;
  overflow-wrap: anywhere;
}
.action:hover,
.action:focus-visible { color: var(--polaris); border-bottom-color: var(--polaris); }

.actionblock .aside { font-size: 0.9375rem; color: var(--paper-dim); margin: 0; }

/* --- stacks -------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: var(--s5); }
.stack-tight { display: flex; flex-direction: column; gap: var(--s3); }

/* --- capabilities --------------------------------------------------------
   Two columns of prose, not cards. No borders, no shadows, no radius. */

.caps {
  margin: var(--s4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--s4) clamp(2rem, 5vw, 4rem);
}
.caps > div { break-inside: avoid; }
.caps p { margin: 0; max-width: 42ch; font-size: 1rem; }

/* --- case studies --------------------------------------------------------
   Each project is a block, separated by a hairline. The four labelled parts
   carry the structure; nothing decorative is added on top of them. */

.cases { display: flex; flex-direction: column; gap: 0; }

.case { padding-block: clamp(2.5rem, 6vw, 3.75rem); border-top: 1px solid var(--rule); }
.case:first-child { border-top: 0; padding-top: 0; }

.case-title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: var(--s1); }
.case-meta { font-size: 0.9375rem; color: var(--paper-dim); margin-bottom: var(--s3); }

.case-parts { margin: 0; display: grid; gap: var(--s3); }
.case-parts dt {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--polaris);
}
.case-parts dd { margin: 0.2rem 0 0; max-width: var(--measure); }

/* --- the pole ------------------------------------------------------------
   Used once, on a real sequence: the stages a project actually runs through.
   Each stage is a star strung along one axis. Structural, not decoration. */

.pole { list-style: none; margin: var(--s4) 0 0; padding: 0; }

.pole > li {
  position: relative;
  padding-left: var(--s4);
  padding-bottom: clamp(2rem, 4.5vw, 2.75rem);
  border-left: 1px solid var(--rule);
}
.pole > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.pole > li:last-child::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  height: 0.9em;
  border-left: 1px solid var(--rule);
}

.pole > li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--polaris);
}

.pole h3 { font-size: 1.1875rem; }
.pole p { margin: 0; }

/* --- portrait ------------------------------------------------------------ */

.portrait { margin: 0; }
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.portrait figcaption { margin-top: var(--s1); font-size: 0.875rem; color: var(--paper-dim); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, var(--s5));
  align-items: start;
}

/* --- clients ------------------------------------------------------------- */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
}
.clients img { max-height: 40px; width: auto; opacity: 0.72; }

/* --- detail list --------------------------------------------------------- */

.details { margin: 0; max-width: 68ch; }
.details div { padding-block: var(--s2); border-top: 1px solid var(--rule); }
.details div:first-child { border-top: 0; padding-top: 0; }
.details dt {
  font-family: var(--display);
  font-weight: 400;
  color: var(--paper-dim);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.details dd { margin: 0.15rem 0 0; color: var(--paper); font-size: 1.0625rem; }
.details + p { margin-top: var(--s3); }

/* --- legal prose --------------------------------------------------------- */

.legal { max-width: 68ch; }
.legal h2 { font-size: 1.35rem; margin-top: var(--s4); margin-bottom: 0.6rem; }
.legal h2:first-of-type { margin-top: var(--s3); }
.legal p { max-width: none; }
.legal ul { padding-left: 1.15rem; margin: 0.65rem 0; }
.legal li { margin-bottom: 0.35rem; }

/* --- footer -------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); }
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s3) var(--s4);
  padding-block: var(--s4);
  font-size: 0.875rem;
}
.footer p { margin: 0; max-width: none; }
.footer a { color: var(--paper-dim); text-decoration: none; }
.footer a:hover { color: var(--paper); }
.footer .inscription { margin-top: 0.6rem; font-size: 0.75rem; letter-spacing: 0.36em; text-indent: 0.36em; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .masthead .wrap { padding-block: var(--s2); }
  .nav { gap: var(--s2) var(--s3); font-size: 1rem; }
  .nameplate { font-size: 0.9375rem; letter-spacing: 0.18em; }
  .masthead-logo svg { width: 26px; height: 26px; }
  .hero-figure { padding-inline: 0; width: min(100%, 88vw); }
  .inscription { letter-spacing: 0.28em; text-indent: 0.28em; }
}

/* ==========================================================================
   Logo draw-on. Merged from polaris.css — one stylesheet, per spec.

   Each trail is clipped by a wedge hinged at the celestial pole. Rotating the
   wedge sweeps the reveal from the trail's start to its end. No mask, no
   stroke-dasharray, no pathLength — clipping and rotation only, which are the
   most portable operations available. Default state is fully drawn; nothing
   moves until .polaris-draw is on the <svg>.

   Rotation runs 200deg, matching the wedge. The last 20deg is travel after
   every trail is already revealed, so the visible sweep ends at ~1.2s even
   though the animation runs 1.33s. Change one and you must change the other.
   ========================================================================== */

.polaris-draw .polaris-sweep {
  transform-box: view-box;
  transform-origin: 433.5px 490px;
  animation: polaris-sweep 1.33s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
}

/* Polaris ignites blue as the wordmark arrives. The star is a filled ribbon
   and a filled dot, so this animates fill, not stroke. */
.polaris-draw .polaris-ignite {
  fill: #ffffff;
  animation: polaris-ignite 0.65s ease-out 1.15s forwards;
}

/* The inscription arrives on the same beat as the wordmark it sits under. */
.polaris-draw .polaris-word,
.hero-figure:has(.polaris-draw) .inscription {
  opacity: 0;
  animation: polaris-word 0.65s ease-out 1.15s forwards;
}

@keyframes polaris-sweep  { from { transform: rotate(200deg); } to { transform: rotate(0deg); } }
@keyframes polaris-ignite { to { fill: #4b9cd3; } }
@keyframes polaris-word   { to { opacity: 1; } }

/* Optional atmosphere. Tune in a browser, never in the asset — SVG filters
   render inconsistently across engines, which is why there are none. */
.polaris-glow { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }

@media (prefers-reduced-motion: reduce) {
  .polaris-draw .polaris-sweep  { animation: none; transform: none; }
  .polaris-draw .polaris-ignite { animation: none; fill: #4b9cd3; }
  .polaris-draw .polaris-word,
  .hero-figure:has(.polaris-draw) .inscription { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}