/* ============================================================
   Raven Industrial V2
   Layered on top of ../css/styles.css. Nothing here may live in
   the shared stylesheet: the root site loads that same file and
   must not change while V2 is under review.
   ============================================================ */

/* ------------------------------------------------------------
   1. Static blueprint grid
   Not animated, per Caleb. Minor 32px rule with a heavier
   160px major rule, the way a real blueprint sheet is ruled.
   Line colour inverts with the section ground.
   ------------------------------------------------------------ */
.section {
  --bp-minor: rgba(27, 50, 67, 0.055);
  --bp-major: rgba(27, 50, 67, 0.10);
}
.section-dark,
.section-deep,
.ground-navy,
.ground-abyss {
  --bp-minor: rgba(155, 191, 212, 0.07);
  --bp-major: rgba(155, 191, 212, 0.13);
}

.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--bp-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-minor) 1px, transparent 1px),
    linear-gradient(var(--bp-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-major) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  background-position: -1px -1px;
}
.section > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   2. Section grounds
   Reordered so the Caleb section sits on blue and its dark
   stat panel stops reading as a hole in the page.
   Alternation runs dark / light / dark / light all the way down.
   ------------------------------------------------------------ */
.ground-navy  { background: var(--navy); color: var(--white); }
.ground-abyss { background: var(--navy-abyss); color: var(--white); }
.ground-navy h2, .ground-abyss h2 { color: var(--white); }
/* The opacity that used to mute these to below AA is now gone from
   styles.css itself, so the root site is fixed too. Kept as a belt-and-braces
   override for the grounds V2 adds. */
.section .section-index { opacity: 1; }
.ground-navy .section-index,
.ground-abyss .section-index { color: var(--light-blue); opacity: 1; }

/* --- 01 Principle, now on dark --- */
/* This block is meant to sit centred in the page, not on the left rail the rest
   of the site starts on. The 960px column was already centred, but left-aligned
   ragged type inside it put the visible weight left of centre, which is what read
   as "offset". Centring the type as well makes it read the way it was intended. */
#principle.manifesto .container { text-align: center; }
#principle.manifesto p { color: var(--off-white); }
#principle .lead-word { color: var(--vibrant-blue); }
#principle .underscore { color: var(--gold); font-weight: 700; }

/* --- Caleb, now on blue --- */
#leadership h2 { color: var(--white); }
#leadership .cred-copy p { color: var(--light-blue); }
#leadership .cred-role { color: var(--vibrant-blue); }
#leadership .blueprint-panel {
  background: rgba(12, 24, 32, 0.72);
  border-color: rgba(155, 191, 212, 0.22);
  /* Full height beside the portrait, so the three stats spread across the plate
     instead of clustering in the middle of it. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- Origins, now on light --- */
#development.ground-light { background: var(--off-white); color: var(--ink); }
#development.ground-light h2 { color: var(--navy); }
#development.ground-light .section-index { color: var(--blue-text); opacity: 1; }
#development.ground-light .legacy-inner p { color: #33454f; }

/* facet-top-rev cuts the top RIGHT corner down, so on the left, where this
   section's text sits, the angled edge is already at its highest. The shared
   rule still adds a whole facet-height of padding to clear a cut that is not
   there, which left a band of dead space above the heading. Pull it back so
   the text sits close to the line. Facets are off below 760px, so this is
   scoped above that. */
@media (min-width: 761px) {
  #development.facet-top-rev { padding-top: clamp(4rem, 7vw, 6.5rem); }
}

/* --- Closing CTA, now on dark --- */
#cta.ground-abyss h2 { color: var(--white); }
#cta.ground-abyss p { color: var(--light-blue); }

/* Ghost button needs an ink version wherever a section flipped to light */
.btn-ghost-dark {
  border: 1px solid rgba(27, 50, 67, 0.35);
  color: var(--navy);
  background: transparent;
}
.btn-ghost-dark:hover {
  border-color: var(--navy);
  background: rgba(27, 50, 67, 0.06);
}

/* ------------------------------------------------------------
   3. Our Services
   A ruled schedule, not a card grid. Six categories, one line
   of scope each, because Caleb dislikes long service copy.
   ------------------------------------------------------------ */
.svc-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap);
  align-items: start;
  margin-bottom: 3.2rem;
}
.svc-head p { color: #33454f; font-size: 1.05rem; }

/* A drafting sheet subdivided by shared rules, not six floating cards.
   Cells are defined by the hairlines between them, carry a corner
   registration mark and a sheet number, and stay transparent so the
   blueprint grid behind reads straight through them. No radius, no
   shadow, nothing floating. */
.svc-sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(27, 50, 67, 0.2);
  border-left: 1px solid rgba(27, 50, 67, 0.2);
}
.svc-cell {
  position: relative;
  padding: 2.4rem 1.9rem 2.5rem;
  border-right: 1px solid rgba(27, 50, 67, 0.2);
  border-bottom: 1px solid rgba(27, 50, 67, 0.2);
  transition: background 0.45s var(--ease);
}
.svc-cell:hover { background: rgba(27, 50, 67, 0.045); }

/* Drafting registration marks, top-left and bottom-right */
.svc-cell::before,
.svc-cell::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
.svc-cell::before {
  top: 9px; left: 9px;
  border-top: 2px solid var(--gold-dark);
  border-left: 2px solid var(--gold-dark);
}
.svc-cell::after {
  bottom: 9px; right: 9px;
  border-bottom: 2px solid var(--gold-dark);
  border-right: 2px solid var(--gold-dark);
}
.svc-cell:hover::before,
.svc-cell:hover::after { width: 20px; height: 20px; }

.svc-cell h3 {
  color: var(--navy);
  font-size: 1.14rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.svc-cell p { color: #33454f; font-size: 0.97rem; }

@media (prefers-reduced-motion: reduce) {
  .svc-cell, .svc-cell::before, .svc-cell::after { transition: none; }
}

.svc-note {
  margin-top: 2.6rem;
  max-width: 780px;
  border-left: 2px solid var(--gold);
  padding-left: 1.3rem;
  font-size: 1.06rem;
  color: #33454f;
}
.svc-note strong { color: var(--navy); font-weight: 600; }

/* Second tier: development management routes off to its own page */
.svc-actions { margin-top: 2.8rem; display: flex; justify-content: center; }

/* ------------------------------------------------------------
   3b. Sector strip
   Asset types folded into Who We Help rather than given their own
   section, so the page does not ask a visitor to place themselves
   twice. Hairline separators, no pills: these are not interactive.
   ------------------------------------------------------------ */
.sector-strip {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(155, 191, 212, 0.16);
}
.sector-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
  margin-bottom: 0.95rem;
}
.sector-label,
.sector-scale {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sector-label { color: var(--gold); }
.sector-scale { color: var(--light-blue); }

.sector-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.5rem 1.7rem;
}
/* A leading tick per item rather than separators between them. A separator
   dangles at the start of a line whenever the list wraps; a leading mark
   never does, and it reuses the /01 motif from the value rows. */
.sector-list li {
  display: flex;
  gap: 0.45rem;
  color: var(--light-blue);
  font-size: 0.95rem;
  line-height: 1.25;
}
.sector-list li::before { content: '/'; color: var(--gold-dark); }

/* ------------------------------------------------------------
   4. Authority / case studies
   Hairline plates on a blueprint ground. Deliberately not
   rounded floating cards.
   ------------------------------------------------------------ */
.auth-head { max-width: 780px; margin-bottom: 3.2rem; }
.auth-head p { color: #33454f; font-size: 1.05rem; margin-top: 1rem; }

.auth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.case {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(27, 50, 67, 0.18);
  background: rgba(255, 255, 255, 0.55);
}
.case-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
  overflow: hidden;
}
.case-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(155, 191, 212, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 191, 212, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
}
.case-plate img { width: 100%; height: 100%; object-fit: cover; }
.case-plate .plate-note {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(155, 191, 212, 0.75);
}
.case-body { padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.case-spec {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin-bottom: 0.6rem;
}
.case h2,
.case h4 { color: var(--navy); font-size: 1.12rem; line-height: 1.3; }
.case-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #5a6a74;
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}
/* Only the unclassed description paragraph, so it cannot override the
   margin-top:auto that pins .case-role to the bottom of the plate. */
.case-body > p:not([class]) { color: #33454f; font-size: 0.96rem; margin-top: 0.9rem; }
/* C19: a footnote under the plate, not a labelled row. Smaller, quieter,
   and no divider rule competing with the card border. */
.case-role {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  /* #6b7a84 looked right but measured 4.21:1 on the light card, under AA at
     this size. Shrinking the type raised the bar; the colour had to come back. */
  color: #5a6a74;
}
.case-role span { color: var(--navy); font-weight: 600; }

.auth-actions { margin-top: 2.8rem; display: flex; justify-content: center; }

/* Placeholder copy stays obvious until Caleb sends his descriptions */
.ph {
  background: rgba(226, 197, 51, 0.22);
  border-bottom: 1px dashed var(--gold-dark);
  color: #4a3d0b;
  padding: 0 0.15em;
}

/* ------------------------------------------------------------
   4b. Experience block, merged under Leadership
   The case plates were built for the light ground. Since the merge
   put them on navy, everything that carried ink colour needs a
   dark-ground counterpart or it disappears.
   ------------------------------------------------------------ */
.exp-head {
  margin: clamp(2.6rem, 5vw, 4rem) 0 2.1rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(155, 191, 212, 0.18);
}
.exp-title { color: var(--white); font-size: 1.32rem; }
.exp-head p { color: var(--light-blue); margin-top: 0.5rem; max-width: 640px; }

.ground-navy .case {
  border-color: rgba(155, 191, 212, 0.22);
  background: rgba(12, 24, 32, 0.34);
}
/* navy-deep plate on a navy ground disappears. Drop it to abyss so the
   image area still reads as a distinct plate. */
.ground-navy .case-plate { background: var(--navy-abyss); }
.ground-navy .case-spec { color: var(--vibrant-blue); }
.ground-navy .case h2,
.ground-navy .case h4 { color: var(--white); }
.ground-navy .case-meta { color: var(--light-blue); }
.ground-navy .case-body > p:not([class]) { color: var(--light-blue); }
.ground-navy .case-role { color: #9fb4c2; }
.ground-navy .case-role span { color: var(--white); }
.ground-navy .ph {
  background: rgba(226, 197, 51, 0.16);
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

/* ------------------------------------------------------------
   5. Caleb portrait
   ------------------------------------------------------------ */
/* All three columns share one top and one bottom edge. Centring them left the
   portrait, the copy and the stat panel each starting and ending at a different
   height, which Caleb read as the section being out of alignment. */
.cred-inner.cred-v2 {
  grid-template-columns: 0.72fr 1.15fr 1fr;
  align-items: stretch;
}
.cred-portrait { position: relative; }
/* The source frame is already graded with a desaturated background and the
   subject left in colour. Do not grayscale it, that throws the grade away. */
.cred-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cred-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(155, 191, 212, 0.28);
  pointer-events: none;
}

/* ------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .auth-grid { grid-template-columns: 1fr; }
  .svc-head, .value-head { grid-template-columns: 1fr; }
  .svc-sheet { grid-template-columns: repeat(2, 1fr); }
  .cred-inner.cred-v2 { grid-template-columns: 1fr; }
  .cred-portrait { max-width: 340px; }
}
@media (max-width: 620px) {
  .svc-sheet { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .svc-cell { padding: 2rem 1.5rem 2.1rem; }
}

/* ------------------------------------------------------------
   6. Interior pages brought onto the same system
   development.html and contact.html were still the old build. They now
   load this sheet, so the blueprint grid applies to their sections too,
   and their grounds follow the home page rhythm.
   ------------------------------------------------------------ */

/* --- Development --- */
/* .dev-note hard-codes an off-white background later in styles.css than
   .section-deep, so flipping it dark needs the two-class override. */
.dev-note.section-deep { background: var(--navy-deep); color: var(--white); }
.dev-note.section-deep p { color: var(--light-blue); }
.dev-note.section-deep a { color: var(--vibrant-blue); }

/* Capabilities moved from dark to light, so everything that was set for a
   dark ground has to come back to ink. */
.dev-caps.section-tint .section-index { color: var(--blue-text); }
.dev-caps.section-tint .dev-block h2 { color: var(--navy); }
.dev-caps.section-tint .dev-block p { color: #33454f; }

/* Closing CTA now matches the one on the home page */
.cta.ground-abyss h2 { color: var(--white); }
.cta.ground-abyss p { color: var(--light-blue); }

/* --- Contact --- */
/* A hairline plate, not a rounded card floating on a shadow. Same shape
   language as the case plates and the services sheet. */
.contact-form {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid rgba(27, 50, 67, 0.18);
  background: rgba(255, 255, 255, 0.72);
}
.contact-form input,
.contact-form textarea { border-radius: 0; }