/* ==========================================================================
   N2N — corrections
   --------------------------------------------------------------------------
   Deliberately separate from styles.css and components.css, which came across
   from the approved prototype untouched. Anything here is a fix for a bug that
   exists in the prototype too, documented so it can be folded back into the
   source files (or reverted) later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .b-light was unreadable until hovered.

   styles.css:85 sets `.b-light{color:var(--ink)}`, and --ink is #2B1026 — a
   near-black plum. Both places the class is used sit on a dark plum surface:
   the homepage hero and the mobile menu panel. Dark text on a dark background
   is invisible until the hover state flips to an ivory fill.

   Given the ivory border colour on the same rule, --ivory was almost certainly
   intended. Hover is already correct and is left alone.
   -------------------------------------------------------------------------- */
.b-light { color: var(--ivory); }

/* --------------------------------------------------------------------------
   Legal pages: heading hierarchy.

   components.css:121 styles legal headings as `.legal h4` — small uppercase
   Montserrat — because in the prototype the legal text sat in a modal written
   by hand. Written as real pages in the editor, the headings are H2 and H3,
   which is the correct document outline for accessibility and SEO.

   These use the site's Fraunces display face so the pages match the rest of
   the site, but at a smaller scale than the global h2 (which reaches 50px and
   would overwhelm a text document). H2 and H3 stay clearly distinct.

   The original .legal h4 rule still applies untouched, so anything using H4
   keeps the small uppercase treatment.
   -------------------------------------------------------------------------- */
.legal h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--plum);
  text-transform: none;
  margin: 38px 0 12px;
}

.legal h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.3;
  color: var(--mulberry);
  text-transform: none;
  margin: 26px 0 9px;
}

.legal h2:first-child,
.legal h3:first-child { margin-top: 0; }

/* Trailing block margin inside the editor-generated wrapper. */
.legal > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact form — compact two-column layout.

   The form is six stacked fields at 50px tall with 18px gaps, which runs long
   enough that the submit button falls below the fold on most laptops and the
   whole thing reads as a survey rather than a quick enquiry.

   This pairs the short fields (Name/Email, Interest/How did you hear) into two
   columns and tightens the vertical rhythm. Done purely with CSS grid on the
   existing markup — no template or class-name changes, so the DOM stays exactly
   as the approved prototype had it.

   The hidden nonce input is display:none and the honeypot is absolutely
   positioned, so neither takes a grid cell.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .cform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 13px;
    padding: clamp(24px, 2.6vw, 32px);
  }

  /* Everything spans both columns unless paired below. */
  .cform > * { grid-column: 1 / -1; }

  .cform > [data-f="name"]     { grid-column: 1; }
  .cform > [data-f="email"]    { grid-column: 2; }
  .cform > [data-f="interest"] { grid-column: 1; }
  .cform > .fld:has(#c-heard)  { grid-column: 2; }

  /* Grid gap handles spacing now. */
  .cform .fld { margin-bottom: 0; }
}

/* Tighter fields, both layouts. */
.cform .fld label { margin-bottom: 5px; }

.cform .fld input,
.cform .fld select,
.cform .fld textarea {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14.5px;
  border-radius: 10px;
}

.cform .fld select { background-position: right 14px center; padding-right: 38px; }

.cform .fld textarea { min-height: 84px; }

.cform .formnote { margin-top: 10px; }

/* Keep tap targets comfortable on touch, where the layout is single column. */
@media (max-width: 760px) {
  .cform .fld input,
  .cform .fld select,
  .cform .fld textarea { min-height: 48px; }
  .cform .fld { margin-bottom: 13px; }
}

/* --------------------------------------------------------------------------
   Services hero — collage rebuilt as a staggered editorial grid.

   The prototype positions four cards absolutely at four different sizes with
   three different rotations. `k1` is 44% x 92% — roughly the area of the other
   three combined — so it dominates, the satellites read as offcuts, and `k2`
   sits half-hidden behind it. The rotations make an already uneven composition
   look accidental rather than art-directed.

   This replaces the absolute positioning with a two-column grid on a 5-row
   track. Column one runs 60/40, column two runs 40/60, so the horizontal seams
   deliberately don't line up — an offset rhythm that reads as composed. All
   four images get equal visual weight, one radius and one shadow.

   CSS only: the markup, class names and data-pic slots are untouched.
   -------------------------------------------------------------------------- */
.hsv-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
  aspect-ratio: 1.04;
  min-height: clamp(340px, 40vw, 480px);
}

/* Reset the absolute placement and the rotations. */
.hsv-art .hsv-card {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 16px;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .62);
  outline: 1px solid rgba(216, 193, 207, .14);
  outline-offset: -1px;
}

/* Column 1: tall then short. Column 2: short then tall. */
.hsv-art .hsv-card.k1 { grid-column: 1; grid-row: 1 / span 3; }
.hsv-art .hsv-card.k2 { grid-column: 1; grid-row: 4 / span 2; }
.hsv-art .hsv-card.k3 { grid-column: 2; grid-row: 1 / span 2; }
.hsv-art .hsv-card.k4 { grid-column: 2; grid-row: 3 / span 3; }

/* Nudge the columns apart vertically for the editorial offset. */
.hsv-art .hsv-card.k1,
.hsv-art .hsv-card.k2 { transform: translateY(calc(-1 * clamp(8px, 1.2vw, 18px))); }
.hsv-art .hsv-card.k3,
.hsv-art .hsv-card.k4 { transform: translateY(clamp(8px, 1.2vw, 18px)); }

/* Keep the glow behind the cards, not between them. */
.hsv-art .hsv-glow { z-index: 0; }
.hsv-art .hsv-card { z-index: 2; }
.hsv-art .hsv-dots { z-index: 3; }

@media (max-width: 1080px) {
  .hsv-art { aspect-ratio: 1.15; min-height: clamp(300px, 52vw, 400px); }
}

/* Mobile: a clean 2x2. The prototype hid two of the four here, which left an
   unbalanced pair; all four fit comfortably in a square grid. */
@media (max-width: 780px) {
  .hsv-art {
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 1.18;
    min-height: 0;
    gap: 10px;
  }
  .hsv-art .hsv-card.k2,
  .hsv-art .hsv-card.k3 { display: block; }
  .hsv-art .hsv-card.k1 { grid-column: 1; grid-row: 1; }
  .hsv-art .hsv-card.k2 { grid-column: 2; grid-row: 1; }
  .hsv-art .hsv-card.k3 { grid-column: 1; grid-row: 2; }
  .hsv-art .hsv-card.k4 { grid-column: 2; grid-row: 2; }
  .hsv-art .hsv-card { border-radius: 13px; transform: none; }
}