:root {
  --navy: #071a2f;
  --navy-soft: #102844;
  --navy-deep: #04101c;
  --gold: #c9a227;
  --gold-soft: #e6c766;
  --white: #ffffff;
  --light: #f5f3ee;
  --text: #1f2933;
  --text-muted: #55636f;
  --hairline: rgba(7, 26, 47, 0.1);
  --hairline-dark: rgba(255, 255, 255, 0.14);
  --radius: 10px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--light);
  line-height: 1.6;
}

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

.container {
  width: min(1160px, 92%);
  max-width: 100%;
  margin: 0 auto;
}
.narrow { width: min(720px, 92%); }

/* ==================================================
   HEADER
================================================== */
.site-header {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}
/* .site-header must stay a positioned ancestor even where the mobile
   override below drops "sticky" back to "relative" - the dropdown nav
   panel (position: absolute; top: 100%) anchors to this element. */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  min-height: 74px;
}
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.brand-mark {
  /* height-controlled, width: auto so the aspect ratio can never be
     distorted. Floor is deliberately generous (42px) so the mark reads
     with real presence on mobile rather than shrinking to a token icon;
     ceiling (58px) keeps the header from growing excessively tall. */
  height: clamp(42px, 9vw, 58px);
  width: auto;
  flex-shrink: 0;
}
nav#site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
nav#site-nav a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
nav#site-nav a:hover {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}

.nav-toggle {
  /* Neutralise native button chrome - Safari/iOS in particular can render
     its own default button appearance (a light rounded/pill shape) through
     custom styles unless appearance is explicitly reset. */
  appearance: none;
  -webkit-appearance: none;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==================================================
   HERO
================================================== */
.hero {
  background: linear-gradient(rgba(7,26,47,0.86), rgba(7,26,47,0.86)), radial-gradient(circle at top right, #26476a, var(--navy));
  color: var(--white);
  padding: 96px 0 100px;
}
.hero-content { max-width: 760px; }
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
  font-weight: 700;
}
h1 {
  font-size: clamp(2.1rem, 6vw, 4.5rem);
  line-height: 1.08;
  margin: 14px 0 22px;
  letter-spacing: -1.5px;
  font-weight: 800;
  text-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
}
.hero-text {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7;
  color: #d8e2f0;
  margin-bottom: 30px;
}
.button {
  display: inline-block;
  margin-top: 6px;
  background: var(--gold);
  color: var(--navy);
  padding: 13px 26px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease;
}
.button:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

/* ==================================================
   SECTION BASICS
================================================== */
.section { padding: 72px 0; }
h2 {
  color: var(--navy);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 6px 0 0;
}
.dark h2 { color: var(--gold-soft); }
.section-lead {
  max-width: 620px;
  color: var(--text-muted);
  font-size: 1.02rem;
  margin: 14px 0 0;
}
.dark .section-lead { color: #b9c6d4; }
.dark p { color: #c7d3e0; }
.narrow p { max-width: 640px; line-height: 1.75; }

.dark {
  background: var(--navy);
  color: var(--white);
}

/* ==================================================
   PILLARS
================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  /* Automotive/LOS are taller than Property (much larger brand marks) -
     without this, CSS Grid's default row-stretch would force Property to
     grow to match, changing its appearance even though its rules are
     untouched. */
  align-items: start;
}
.pillar-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
}

/* Shared icon zone - Property's SVG mark only now (Automotive/LOS moved to
   the .pillar-showcase treatment below). */
.pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--light);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.pillar-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar-name {
  color: var(--navy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.92rem;
  margin: 0 0 8px;
}
.pillar-desc {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.pillar-active {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.pillar-active a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pillar-active a:hover { color: var(--gold); }

/* ==================================================
   PILLAR SHOWCASES (Automotive/Podium, Technology/LOS)

   Deliberately not styled as bordered "cards" like Property - these are
   brand panels: no border box, no shadow, no icon chip. The brand mark is
   the hero element; gold appears only at the eyebrow and the CTA, nothing
   else. Automotive and LOS share this base but size their own mark to
   its own aspect ratio, so the two don't become identical templates.
================================================== */
.pillar-showcase {
  min-width: 0;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 36px 28px 32px;
}
.pillar-showcase .eyebrow {
  margin: 0 0 20px;
}
.showcase-mark {
  display: block;
  margin-bottom: 22px;
}
.showcase-mark img {
  display: block;
  width: 100%;
  height: auto;
}
.showcase-desc {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 22px;
}
.showcase-cta {
  display: block;
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  transition: color 0.2s ease;
}
.showcase-cta:hover { color: var(--gold); }

/* Non-linked status line (Property has no live destination to point to,
   unlike Podium's external site or LOS's #los section) - same structural
   position and hairline divider as .showcase-cta, but the label alone
   carries the gold accent rather than the whole line being a link. */
.showcase-status {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  line-height: 1.5;
}
.showcase-status-label {
  color: var(--gold-soft);
  font-weight: 700;
}

.pillar-showcase-property .showcase-mark { max-width: 280px; }
.pillar-showcase-automotive .showcase-mark { max-width: 250px; }
.pillar-showcase-los .showcase-mark { max-width: 190px; }

/* PRESERVED FOR REACTIVATION - People/Recruitment pillar removed from the
   public site (2026-08-16). Uncomment alongside the matching <article> in
   index.html and restore the 4-column .pillars grid to bring it back.
.pillar-showcase-people .showcase-mark { max-width: 260px; }

People has both a status line (like Property) and a linked CTA (like
Automotive/LOS) - the status line keeps its divider against the
description above it, but the CTA sits directly under it without a
second redundant hairline so close to the first.
.pillar-showcase-people .showcase-status { margin-bottom: 14px; }
.pillar-showcase-people .showcase-cta { border-top: none; padding-top: 0; }
*/

/* ==================================================
   ENGINEERING SOLUTIONS - complementary capability, not a fourth pillar,
   so it stays a plain narrow section rather than the .pillars card grid.
================================================== */
.engineering-support {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.engineering-support h2 { font-size: 1.55rem; }
.capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.capability-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(7, 26, 47, 0.24);
  border-radius: 4px;
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ==================================================
   PROOF OF MODEL (Podium)
================================================== */
.proof-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 30px 0 34px;
  border-top: 1px solid var(--hairline-dark);
}
.proof-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 22px 20px 4px 0;
  border-left: 1px solid var(--hairline-dark);
}
.proof-item:first-child { border-left: none; padding-left: 0; }
.proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}
.proof-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proof-title {
  color: var(--white);
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0 0 5px;
}
.proof-desc {
  color: #b9c6d4;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* ==================================================
   LOS SECTION
================================================== */
.los-mark {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 10px;
  overflow: hidden;
}
.los-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================================================
   THE LAURUS STANDARD - the flagship brand section, so principles are
   presented as an editorial, column-divided list rather than boxed
   feature cards.
================================================== */
#standard blockquote {
  position: relative;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--gold-soft);
  border: none;
  margin: 22px 0 26px;
  padding: 0 0 0 28px;
}
#standard blockquote::before {
  content: "\201C";
  position: absolute;
  left: -6px;
  top: -22px;
  font-size: 4.5rem;
  font-weight: 800;
  color: rgba(201, 162, 39, 0.28);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--hairline-dark);
}
.principle {
  min-width: 0;
  padding: 26px 24px 4px 0;
  border-left: 1px solid var(--hairline-dark);
}
.principle:first-child { border-left: none; padding-left: 0; }
.principle-index {
  display: block;
  color: rgba(201, 162, 39, 0.55);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.principle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold);
}
.principle-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.principle-name {
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
.principle-desc {
  color: #b9c6d4;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* ==================================================
   LAURUS APPROVED - premium navy panel, matching the pillar showcases so
   it visually belongs with Property/Podium/LOS. Stacked (shield above
   copy) on mobile; side-by-side from 700px up where there's room for it
   without cramping either element.
================================================== */
.approved-panel {
  padding-top: 40px;
  padding-bottom: 40px;
}
.approved-layout {
  background: var(--navy);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
}
.approved-shield {
  display: block;
  width: 100%;
  max-width: 160px;
  margin: 0 auto 24px;
}
.approved-shield img {
  display: block;
  width: 100%;
  height: auto;
}
.approved-copy h2 {
  color: var(--gold-soft);
  margin: 0;
}
.approved-copy h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--gold);
  margin: 14px auto 18px;
}
.approved-copy p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

@media (min-width: 700px) {
  .approved-layout {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
    padding: 40px 44px;
  }
  .approved-shield {
    max-width: 165px;
    margin: 0;
    flex-shrink: 0;
  }
  .approved-copy h2::after {
    margin: 14px 0 18px;
  }
}

/* ==================================================
   MISC / FOOTER
================================================== */
.contact a { color: var(--navy); font-weight: 700; }
.footer {
  background: var(--navy-soft);
  color: var(--white);
  padding: 26px 0;
}
.footer p {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.small { color: var(--gold); font-size: 0.78rem; }

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width: 800px) {
  /* Stacked mobile header: a 160-180px-wide logo cannot sit balanced next
     to a 44px toggle in one row, so the logo gets its own centred row and
     the toggle sits directly beneath it, tightly spaced. The header drops
     "sticky" for "relative" here - at this size, pinning it permanently
     would occupy a large share of a phone viewport while scrolling; it
     still needs to stay a positioned ancestor for the dropdown nav below. */
  .site-header { position: relative; }

  .nav {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 14px 0 12px;
    min-height: 0;
  }

  .brand-mark {
    width: clamp(155px, 42vw, 190px);
    height: auto;
  }

  .nav-toggle { display: flex; }

  nav#site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--navy-soft);
    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
    transition: max-height 0.25s ease, visibility 0.25s ease;
  }
  nav#site-nav.is-open { max-height: 320px; visibility: visible; }
  nav#site-nav a {
    padding: 15px 6%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
  }

  .pillars,
  .proof-list,
  .principles { grid-template-columns: 1fr; }

  .proof-item,
  .principle {
    border-left: none;
    padding-left: 0;
    padding-top: 22px;
    border-top: 1px solid var(--hairline-dark);
  }
  .proof-item:first-child,
  .principle:first-child {
    border-top: none;
    padding-top: 22px;
  }
  .proof-list,
  .principles { border-top: none; }

  .hero { padding: 56px 0 60px; }
  .section { padding: 48px 0; }

  /* .section's shorthand above resets top/bottom on any element that also
     carries one of these classes, silently overriding their intended 40px
     (equal specificity, later source order wins on shorthand vs longhand). */
  .engineering-support,
  .approved-panel {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 480px) {
  .hero-text { font-size: 16px; }
  h2 { font-size: 1.55rem; }
}