/* AI Diligence — single stylesheet. Self-hosted fonts, no external request. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/opensans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --heading:  #333333;
  --body:     #666666;
  --accent:   #026e9f;
  --dark:     #131418;
  --border:   #e4e8eb;
  --white:    #ffffff;
  --blue:     #03a9f4;
  --green:    #4caf50;
  --amber:    #fbc02d;
  --purple:   #8c239f;
  --radius:   14px;
  --width:    1140px;
  --sans:     "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
}

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

h1, h2, h3, h4 { font-family: var(--display); color: var(--heading); }

a { color: var(--accent); }

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ----------
   Solid by default, so the page stays readable without JavaScript.
   A small script adds .over-hero while the hero is still in view. */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background .25s ease, border-color .25s ease;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--heading);
  transition: color .25s ease;
}
.brand img { height: 30px; width: auto; transition: filter .25s ease; }

.nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nav a {
  padding: 7px 4px;
  margin: 0 8px;
  text-decoration: none;
  color: var(--body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav a:hover { color: var(--heading); border-bottom-color: var(--accent); }

/* Over the hero photo: transparent bar, white type. */
.site-header.over-hero {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header.over-hero .brand,
.site-header.over-hero .nav a { color: var(--white); }
.site-header.over-hero .brand img { filter: brightness(0) invert(1); }
.site-header.over-hero .nav a:hover { border-bottom-color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--white) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid var(--accent);
  transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: #01587f; border-color: #01587f; }
.btn svg { width: 17px; height: 17px; fill: currentColor; stroke: none; flex: none; }

.btn.on-photo {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .75);
}
.btn.on-photo:hover { background: var(--white); color: var(--heading) !important; border-color: var(--white); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 0 130px;
  background-image:
    linear-gradient(rgba(12, 10, 22, .55), rgba(12, 10, 22, .68)),
    url("../img/canyon.jpg");
  background-size: cover;
  background-position: center 38%;
}

.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 26px;
  color: var(--white);
  letter-spacing: -.01em;
}

.hero p { color: rgba(255, 255, 255, .88); margin: 0 0 8px; font-size: 1.05rem; }

.hero .service-lines {
  list-style: none;
  padding: 0;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, .93);
  font-size: 1.02rem;
}
.hero .service-lines li { margin: 5px 0; }

/* ---------- Overlapping panel ---------- */

.panel-holder { position: relative; z-index: 5; }

.panel {
  margin-top: -86px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(20, 30, 40, .07), 0 22px 60px rgba(20, 30, 40, .13);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.pillar {
  padding: 46px 30px 44px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.pillar:first-child { border-left: 0; }

.pillar .icon {
  width: 86px; height: 86px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar .icon svg {
  width: 38px; height: 38px;
  stroke: var(--white); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pillar .icon.blue   { background: var(--blue); }
.pillar .icon.green  { background: var(--green); }
.pillar .icon.amber  { background: var(--amber); }
.pillar .icon.purple { background: var(--purple); }

.pillar h3 { margin: 0 0 14px; font-size: 1.16rem; font-weight: 400; }
.pillar p  { margin: 0; font-size: .94rem; }

@media (max-width: 980px) {
  .panel { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(3) { border-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .panel { grid-template-columns: 1fr; margin-top: -60px; }
  .pillar { border-left: 0; border-top: 1px solid var(--border); }
  .pillar:first-child { border-top: 0; }
}

/* ---------- Sections ---------- */

.section { padding: 92px 0; }
.section-title {
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  font-weight: 300;
  margin: 0 0 12px;
  letter-spacing: -.005em;
}
.section-kicker {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 300;
  color: var(--body);
  margin: 0 0 34px;
  font-family: var(--display);
}
.section .lede { max-width: 70ch; margin: 0 0 40px; font-size: 1.04rem; }

/* Focus areas: two columns of title + text, no boxes. */
.focus {
  display: grid;
  gap: 34px 60px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.focus h3 {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 700;
  color: var(--heading);
}
.focus p { margin: 0; font-size: .96rem; }

/* ---------- Photo section with floating card ---------- */

.photo-section {
  padding: 90px 0;
  background-image:
    linear-gradient(rgba(18, 10, 24, .28), rgba(18, 10, 24, .28)),
    url("../img/canyon.jpg");
  background-size: cover;
  background-position: center 72%;
}

.float-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(10, 12, 20, .3);
  padding: 62px 60px;
  max-width: 860px;
  margin: 0 auto;
}
.float-card .section-title { margin-bottom: 6px; }
.float-card .section-kicker { margin-bottom: 26px; }

.caps { list-style: none; padding: 0; margin: 0 0 26px; }
.caps li { padding-left: 20px; position: relative; margin: 7px 0; }
.caps li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 620px) {
  .float-card { padding: 38px 26px; }
  .photo-section { padding: 56px 0; }
}

/* ---------- Founder ---------- */

.founder { display: grid; gap: 44px; grid-template-columns: 260px 1fr; align-items: start; }
.founder img { border-radius: var(--radius); box-shadow: 0 14px 40px rgba(20, 30, 40, .16); }
.founder h3 { margin: 0 0 2px; font-size: 1.4rem; font-weight: 400; }
.founder p { margin: 0 0 14px; }

@media (max-width: 700px) {
  .founder { grid-template-columns: 1fr; gap: 28px; }
  .founder img { max-width: 240px; }
}

/* ---------- Closing band ---------- */

.cta-band {
  background: var(--dark);
  padding: 84px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 14px; }
.cta-band p { color: rgba(255, 255, 255, .68); margin: 0 0 30px; }

/* ---------- Footer ---------- */

.site-footer {
  background: #000;
  color: rgba(255, 255, 255, .62);
  padding: 26px 0;
  font-size: .88rem;
  text-align: center;
}
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

/* ---------- Small screens ---------- */

@media (max-width: 700px) {
  .hero { min-height: 520px; padding: 120px 0 110px; }
  .section { padding: 62px 0; }
  .cta-band { padding: 58px 0; }
  .site-header .wrap { min-height: 56px; padding: 10px 18px; gap: 6px; }
  .brand { font-size: .9rem; letter-spacing: .12em; }
  .brand img { height: 26px; }
  .nav a { margin: 0 5px; font-size: .76rem; letter-spacing: .08em; }
  /* Four letterspaced items do not fit at 390px; the two section anchors are
     reachable by scrolling, so they step aside for About and Contact. */
  .nav a:nth-child(1), .nav a:nth-child(2) { display: none; }
}