/* ===========================================================================
   OverSite Holdings — site styles
   Built from the "OverSite Holdings.dc.html" design-canvas prototype
   (the main / warm variant). Layered on top of css/design-system.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Brand palette — overrides the Industry design-system defaults.
   Warm & welcoming: ivory ground, charcoal ink and bands lit by a
   sunrise-orange glow. Orange links the family; condensed caps nod to
   ON SITE; teal marks Insight only.
   --------------------------------------------------------------------------- */
:root {
  --color-bg: #faf5ee;
  --color-surface: #f0ede8;
  --color-text: #262625;
  --color-graphite: #262625;
  --color-stone-ink: #6b6966;
  --color-midnight: #262625;
  --color-teal: #3aafc4;
  --color-accent: #ff6d1f;
  --color-divider: color-mix(in srgb, #262625 16%, transparent);

  --color-accent-100: #fff0e6;
  --color-accent-200: #ffd9c2;
  --color-accent-300: #ffb98f;
  --color-accent-400: #ff9555;
  --color-accent-500: #ff7a33;
  --color-accent-600: #e85c12;
  --color-accent-700: #b8490e;
  --color-accent-800: #8a360b;
  --color-accent-900: #5a240a;

  /* Cream ink used on the dark bands */
  --color-cream: #fdf8f1;
  --color-cream-dim: #c6c3be;

  --page-max: 1200px;
  --page-gutter: clamp(20px, 5vw, 72px);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  text-wrap: pretty;
}

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }

/* Shared containers -------------------------------------------------------- */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}

/* A dark band inverts the text tokens so descendants inherit correctly. */
.band-dark {
  background: var(--color-graphite);
  color: var(--color-cream);
  --color-text: var(--color-cream);
  --color-stone-ink: var(--color-cream-dim);
  --color-divider: color-mix(in srgb, #fdf8f1 16%, transparent);
}

/* Section eyebrow: orange tick, label, hairline to the right edge. */
.section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.section-head .tick {
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  flex: none;
}
.section-head .label {
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-stone-ink);
}
.section-head .rule {
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.section { padding: 96px 0; scroll-margin-top: 80px; }

/* Display headings --------------------------------------------------------- */
.display {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}
.display .hl { color: var(--color-accent-600); }
.band-dark .display .hl { color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   2. Navigation
   --------------------------------------------------------------------------- */
.site-nav {
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.site-nav .nav-brand img {
  height: 42px;
  width: auto;
}
.site-nav .nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.site-nav .nav-link:hover { color: var(--color-accent-400); }

/* Buttons shared by nav + hero + form -------------------------------------- */
.btn-cta {
  color: var(--color-graphite);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px;
}
.btn-lg {
  padding: 12px 20px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.band-dark .btn-secondary { color: var(--color-cream); }

/* ---------------------------------------------------------------------------
   3. Hero
   --------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(circle 520px at 94% 0%,
      color-mix(in srgb, #ff7a2a 62%, transparent) 0,
      color-mix(in srgb, #ff5a1f 26%, transparent) 38%,
      color-mix(in srgb, #ff5a1f 8%, transparent) 62%,
      transparent 80%),
    var(--color-graphite);
}
.hero-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) var(--page-gutter) clamp(64px, 9vw, 104px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 48px clamp(40px, 6vw, 88px);
  align-items: center;
}
/* The headline spans the full grid; the copy and the org chart sit below it. */
.hero-head {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-eyebrow .tick {
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  flex: none;
}
.hero-eyebrow .text {
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-cream-dim);
}
.hero h1 {
  font-size: clamp(48px, 7.6vw, 108px);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 0 -0.05em;
  font-weight: 600;
}
.hero h1 span { display: block; }
.hero h1 .hl { color: var(--color-accent); }

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-copy p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
  color: color-mix(in srgb, #fdf8f1 82%, transparent);
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Org chart ---------------------------------------------------------------- */
.orgchart {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.orgchart .node {
  background: color-mix(in srgb, #fdf8f1 6%, transparent);
  display: flex;
  flex-direction: column;
}
.orgchart .node-parent {
  width: min(100%, 320px);
  padding: 20px 24px;
  border-top: 4px solid var(--color-accent);
  gap: 6px;
}
.orgchart .kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-cream-dim);
}
.orgchart .name {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.orgchart .node-parent .name { font-size: 26px; }
.orgchart .stem {
  width: 2px;
  height: 36px;
  background: var(--color-cream-dim);
}
.orgchart .branch {
  width: calc(50% + 8px);
  height: 32px;
  display: flex;
}
.orgchart .branch .left {
  flex: 1;
  border-top: 2px solid var(--color-teal);
  border-left: 2px solid var(--color-teal);
}
.orgchart .branch .right {
  flex: 1;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}
.orgchart .children {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.orgchart .node-child {
  padding: 20px;
  gap: 8px;
}
.orgchart .node-child .name { font-size: 21px; line-height: 1.05; }
.orgchart .node-child .meta { font-size: 13px; color: var(--color-cream-dim); }
.orgchart .node-insight { border-top: 4px solid var(--color-teal); }
.orgchart .node-insight .kicker { color: #8fdbe8; }
.orgchart .node-onsite { border-top: 4px solid var(--color-accent); }
.orgchart .node-onsite .kicker { color: var(--color-accent-300); }

/* ---------------------------------------------------------------------------
   4. Purpose
   --------------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}
.prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.prose p { margin: 0; }

/* ---------------------------------------------------------------------------
   5. Scripture band
   --------------------------------------------------------------------------- */
.scripture {
  background:
    radial-gradient(ellipse 70% 100% at 10% 0%,
      color-mix(in srgb, #3a8fd0 32%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 70% at 100% 100%,
      color-mix(in srgb, #3aafc4 10%, transparent), transparent 60%),
    var(--color-graphite);
  padding: clamp(64px, 9vw, 112px) 0;
}
.scripture .plate { border-top: 4px solid var(--color-accent); }
.scripture figure {
  margin: 0;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.scripture blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  max-width: 36ch;
  text-indent: -0.32em;
}
.scripture blockquote .hl { color: var(--color-accent); }
.scripture figcaption {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-cream-dim);
}

/* ---------------------------------------------------------------------------
   6. Pillars — ruled columns, no boxes (card style "1a")
   --------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 3.5vw, 48px);
}
/* Two stacked background layers draw the rule: a full-width ink bar with a
   48px orange lead-in riding on top of it. */
.pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 48px 4px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 0 0 / 100% 4px no-repeat;
}
.pillar .num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--color-stone-ink);
}
.pillar h3 {
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}
.pillar .role {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
}
.pillar p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* ---------------------------------------------------------------------------
   7. Company cards
   --------------------------------------------------------------------------- */
.companies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.company {
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-surface);
}
.company-insight { border-top: 6px solid var(--color-teal); }
.company-onsite { border-top: 6px solid var(--color-accent); }

/* Each logo sits on its own plate so it keeps the contrast it was drawn for. */
.logo-plate {
  align-self: flex-start;
  height: 92px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
}
.logo-plate-dark { background: var(--color-graphite); }
.logo-plate-dark img { height: 40px; width: auto; }
.logo-plate-light { background: #fffcf7; }
.logo-plate-light img { height: 68px; width: auto; }

.company .role {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}
.company-insight .role { color: #1d5f6c; }
.company-onsite .role { color: var(--color-accent-700); }
.company h3 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}
.company p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  flex: 1;
}
.company-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--color-text);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.company-link:hover {
  background: var(--color-accent-700);
  color: var(--color-cream);
}

/* ---------------------------------------------------------------------------
   8. Contact + footer band
   --------------------------------------------------------------------------- */
.closing {
  background:
    radial-gradient(circle 420px at 8% 32%,
      color-mix(in srgb, #ff7a2a 58%, transparent) 0,
      color-mix(in srgb, #ff5a1f 24%, transparent) 36%,
      color-mix(in srgb, #ff5a1f 7%, transparent) 62%,
      transparent 82%),
    radial-gradient(ellipse 50% 70% at 100% 0%,
      color-mix(in srgb, #3a8fd0 14%, transparent), transparent 60%),
    var(--color-graphite);
}
.contact { padding: clamp(72px, 9vw, 112px) 0; scroll-margin-top: 80px; }
.contact-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 48ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.contact-form .input {
  background: color-mix(in srgb, #fdf8f1 7%, transparent);
  color: var(--color-cream);
}
.contact-form .input::placeholder { color: color-mix(in srgb, #fdf8f1 45%, transparent); }
.contact-form .actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.form-status {
  font-size: 14px;
  color: var(--color-accent-400);
}
.form-status.is-error { color: #ff9a8f; }
.form-status[hidden] { display: none; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer ------------------------------------------------------------------- */
.site-footer { color: var(--color-cream-dim); }
.site-footer .inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) 28px;
}
.site-footer .top {
  padding-top: 56px;
  border-top: 1px solid color-mix(in srgb, #fdf8f1 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px 48px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-brand img {
  height: 40px;
  width: auto;
  align-self: flex-start;
}
.footer-brand p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 34ch;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.footer-col .heading {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-cream-dim);
  margin-bottom: 4px;
}
.footer-col a { color: var(--color-cream); text-decoration: none; }
.footer-col a:hover { color: var(--color-accent-400); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, #fdf8f1 14%, transparent);
  font-size: 13px;
}
.footer-verse {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-cream);
}
.footer-verse cite {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin-left: 8px;
}

/* ---------------------------------------------------------------------------
   9. Accessibility helpers
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--color-accent);
  color: var(--color-graphite);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}