/* =========================================================================
   INDNOV — Shared stylesheet
   Design intent: an industrial technical-datasheet feel (precise, left-
   aligned, hairline rules, square corners) rather than a soft marketing
   "SaaS card" look. Palette is built from the INDNOV logo's ocean blue.
   One accent color (signal rust) is spent deliberately on calls to action
   and the single highlighted diagram; everything else stays disciplined
   navy / ocean-blue / paper neutrals.
   ========================================================================= */

:root {
  /* --- Color tokens --- */
  --ink:          #0d1b2e;   /* primary text — near-black with a navy cast */
  --ink-soft:     #48586b;   /* secondary text */
  --steel-900:    #051c3f;   /* deepest brand tone — footer, hero base */
  --steel-800:    #0a2c5c;   /* logo navy */
  --steel-700:    #12457c;
  --steel-600:    #1f5f9e;
  --steel-300:    #a9c8e3;
  --steel-100:    #dde8f2;
  --paper:        #f3f5f6;   /* page background */
  --paper-alt:    #e8edf1;   /* alternating section background */
  --white:        #ffffff;
  --line:         #d2dbe2;   /* hairline borders */
  --line-dark:    rgba(255,255,255,0.16);
  --signal:       #b1531f;   /* single accent — used sparingly */
  --signal-dark:  #8c4118;

  /* --- Type --- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* --- Spacing scale --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 9rem;

  --radius: 2px;
  --max-w: 1180px;
}

/* --- Reset / base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 3vw + 1.4rem, 4rem); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 1.4vw + 1.2rem, 2.35rem); font-weight: 700; line-height: 1.18; }
h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 var(--sp-2); max-width: 62ch; }
.lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* --- Layout helpers --- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.section { padding: var(--sp-6) 0; }
.section--tight { padding: var(--sp-5) 0; }
.section--alt { background: var(--paper-alt); }
.section--steel { background: var(--steel-900); color: var(--steel-100); }
.section--steel h2, .section--steel h3 { color: var(--white); }
.section--steel p { color: var(--steel-300); }
.rule { border: none; border-top: 1px solid var(--line); margin: 0; }
.rule--light { border-top: 1px solid var(--line-dark); }

/* --- Header / Nav --- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  z-index: 20;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--max-w);
  margin: 0 auto;
}
.wordmark {
  display: block;
  height: 26px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--signal);
}
.nav-links .nav-cta {             /* outranks .nav-links a, whose padding-bottom would push the label down */
  background: var(--steel-800);
  color: var(--white) !important;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border-bottom: none !important;
}
.nav-links .nav-cta:hover { background: var(--steel-700); }

/* mobile nav — pure CSS checkbox toggle, no JS required */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle-label span {
  width: 24px; height: 2px; background: var(--ink); display: block;
}

@media (max-width: 780px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) clamp(1.25rem, 4vw, 3rem);
    display: none;
  }
  .nav-toggle-label { display: flex; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-cta { margin-top: var(--sp-1); }
}

/* --- Hero ---
   Base hero: a CSS technical-schematic treatment (grid + two offset
   plates) echoing the "two layers" positioning. The homepage adds
   .hero--photo (below) to show the sailing photograph instead.
*/
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--steel-900) 0%, var(--steel-700) 100%);
  color: var(--white);
  padding: var(--sp-7) 0 var(--sp-6);
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
}
.hero::before {
  /* fine technical grid, low-opacity */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 64px);
  pointer-events: none;
}
.hero::after {
  /* two offset translucent plates — the layer motif, abstracted */
  content: "";
  position: absolute;
  right: -8%;
  top: 8%;
  width: 62%;
  height: 84%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 55%),
    linear-gradient(180deg, transparent 62%, rgba(177,83,31,0.14) 63%, rgba(177,83,31,0.14) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  transform: skewX(-6deg);
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--steel-300);
  margin-bottom: var(--sp-2);
}
.hero h1 { color: var(--white); max-width: 20ch; }
.hero .lede { color: var(--steel-100); margin-top: var(--sp-2); max-width: 46ch; }
.hero-actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Photo variant (homepage): regatta photograph under a navy overlay.
   The overlay is darkest bottom-left, where the headline and buttons sit
   over the white spray, and clears toward the boats on the right. */
.hero--photo {
  background-color: var(--steel-900);
  background-image:
    linear-gradient(0deg, rgba(5,28,63,0.55) 0%, rgba(5,28,63,0) 45%),
    linear-gradient(100deg, rgba(5,28,63,0.85) 0%, rgba(5,28,63,0.5) 45%, rgba(5,28,63,0.05) 100%),
    url('../img/hero.webp');
  background-size: cover;
  background-position: 65% center;
}
.hero--photo::before, .hero--photo::after { display: none; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--signal);
  color: var(--white);
  border-color: var(--signal);
}
.btn-primary:hover { background: var(--signal-dark); border-color: var(--signal-dark); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost:hover { border-color: var(--white); }
.btn-ghost--dark {
  color: var(--ink);
  border-color: var(--ink-soft);
}
.btn-ghost--dark:hover { border-color: var(--ink); }

/* --- Positioning / two-column layer explainer --- */
.layers-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (max-width: 860px) {
  .layers-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.layer-diagram {
  border: 1px solid var(--line);
  background: var(--white);
  padding: var(--sp-3);
}
.layer-diagram figcaption {
  margin-top: var(--sp-2);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.layer-plate {
  border: 1px solid var(--ink);
  padding: 0.9rem 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.layer-plate--top {
  background: var(--steel-800);
  color: var(--white);
  border-color: var(--steel-800);
  box-shadow: 0 0 0 3px rgba(177,83,31,0.35);
  margin-bottom: var(--sp-1);
}
.layer-plate--top small,
.layer-plate--bottom small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  margin-top: 0.2rem;
  opacity: 0.85;
}
.layer-plate--bottom {
  background: repeating-linear-gradient(45deg, var(--steel-100), var(--steel-100) 6px, var(--steel-300) 6px, var(--steel-300) 7px);
  color: var(--steel-900);
}

/* --- "What we do" scenario rows (no card-kit; hairline-divided rows) --- */
.scenario-list { border-top: 1px solid var(--line); }
.scenario-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.scenario-row p {
  margin: 0;
  font-weight: 600;
  font-size: 1.08rem;
  max-width: 46ch;
}
.scenario-row .target {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--signal-dark);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .scenario-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* --- Services page --- */
.service-block {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.service-block:last-of-type { border-bottom: none; }
.service-block ul {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}
.service-block li {
  padding: 0.6rem 0 0.6rem 1.3rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.service-block li:first-child { border-top: none; }
.service-block li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05rem;
  width: 7px; height: 7px;
  background: var(--signal);
}
.platform-line {
  margin-top: var(--sp-2);
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
}
.blueprint-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-weight: 600;
  color: var(--steel-700);
  border-bottom: 1px solid var(--steel-700);
}
.blueprint-link:hover { color: var(--signal-dark); border-color: var(--signal-dark); }

/* --- How we work list (About) --- */
.principle {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle h3 { margin-bottom: 0.35rem; }
.principle p { max-width: 60ch; color: var(--ink-soft); margin: 0; }

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-detail { margin-bottom: var(--sp-3); }
.contact-detail dt {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}
.contact-detail dd { margin: 0; font-size: 1.05rem; }

/* --- Closing CTA band --- */
.cta-band {
  background: var(--steel-900);
  color: var(--white);
  padding: var(--sp-5) 0;
  text-align: left;
}
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-3); }

/* --- Footer --- */
.site-footer {
  background: var(--steel-900);
  color: var(--steel-300);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-dark);
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 0.9rem;
}
.footer-row a { color: var(--steel-300); }
.footer-row a:hover { color: var(--white); }
.footer-links { display: flex; gap: var(--sp-3); }