/* NOIR Property Services — relaunch scaffold (preview only, no production deploy)
   Palette sampled from brand board by desig-intern-glm:
   cream #F4F1E8 · near-black #101211 · cyan #00AAC8 · yellow #F9DF42
   Contrast rules (WCAG, per desig-intern-glm's audit, reproduced by qa-security):
   - cream-on-near-black 16.65:1 · cyan-on-near-black 6.79:1  → dark sections: both OK for text
   - black-on-cream 16.65:1 · cyan-on-cream 2.45:1 FAIL       → cream sections: black text only;
     cyan is strictly decorative on cream (rules, chips, underlines) — never text, never a
     standalone focus cue on cream (sub-3:1 fails the focus-state requirement too).
   - yellow is a punctuation accent only; never body text. */
:root {
  --noir-cream: #F4F1E8;
  --noir-black: #101211;
  --noir-cyan: #00AAC8;
  --noir-yellow: #F9DF42;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif; /* provisional: no webfont loaded; face unconfirmed */
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--noir-cream);
  color: var(--noir-black);
  line-height: 1.6;
}

/* ---------- Focus: one global system (qa-security + lead-designer spec) ----------
   Cream sections: near-black outline (cyan alone is sub-3:1 on cream — not a valid state cue).
   Dark sections: cyan outline is allowed (6.79:1). :focus-visible so mouse clicks stay clean
   and keyboard focus is always visible. */
:focus-visible { outline: 3px solid var(--noir-black); outline-offset: 2px; }
.services :focus-visible, .hero-media :focus-visible { outline-color: var(--noir-cyan); }

/* ---------- Header: compact wordmark, cream surface ---------- */
.site-header {
  background: var(--noir-cream);
  border-bottom: 2px solid var(--noir-black);
  padding: 1rem 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wordmark { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; color: var(--noir-black); text-decoration: none; }
.wordmark .descriptor {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
/* Nav scaled to read as interactive next to display type (desig-intern-glm) */
.site-header nav a {
  color: var(--noir-black); text-decoration: none; margin-left: 1.5rem;
  font-size: 1rem; font-weight: 500;
}
.site-header nav a:hover { text-decoration: underline; text-decoration-color: var(--noir-cyan); text-decoration-thickness: 3px; }

/* ---------- Hero: solid cream text block, photo in adjacent region (lead-designer lock) ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
}
.hero-text {
  background: var(--noir-cream);
  padding: 6vh 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* One h1 = one primary statement (lead-designer copy deck) */
.hero-text h1 {
  font-family: var(--font-display);
  /* Max tuned so "Property work," fits one line in a half-width column at 1280 (two-line break goal) */
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  color: var(--noir-black);
}
/* Eyebrow above the h1 */
.hero-text .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
/* Divider scaled into a deliberate element, bridging headline and paragraph */
.hero-text .accent-rule { display: block; width: 140px; height: 12px; background: var(--noir-cyan); margin: 1.4rem 0; }
/* Sub-line steps ~45% below the h1; weight 500 so it doesn't compete with the display headline on mobile */
.hero-text .hero-subline {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  max-width: 28rem;
  margin-bottom: 2rem;
}
/* Hero CTA: near-black fill, cream text; hover swaps to cyan fill + near-black text
   (cyan can't be text on cream). Padding is constant between states so the touch
   target never shifts (qa-security). Focus: 2px near-black outline, 3px offset. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* flex-column parent would otherwise stretch it full-width banner-style */
  min-height: 44px;
  padding: 0.9rem 1.3rem; /* taller than wide — banner-ish when horizontal padding dominates (desig-intern-glm) */
  background: var(--noir-black);
  color: var(--noir-cream);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--noir-black);
}
.hero-cta:hover { background: var(--noir-cyan); color: var(--noir-black); border-color: var(--noir-cyan); }
.hero-cta:focus-visible { outline: 2px solid var(--noir-black); outline-offset: 3px; }

.hero-media {
  background: var(--noir-black); /* solid token band behind placeholder so contrast never depends on the photo */
  display: flex;
}
/* HERO + SERVICE PHOTOGRAPHY (stock, owner-approved interim use — see ATTRIBUTION.md).
   The dashed .photo-placeholder treatment was removed when real images landed (its DELETION
   TASK is fulfilled). Captions sit BELOW images, never over them (lead-designer lock). */
.hero-figure {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 45vh;
}
.hero-figure img {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-caption {
  background: var(--noir-black);
  color: var(--noir-cream);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  text-align: center;
}

/* ---------- Test enquiry form button: local-only flow, visually secondary to the (offline) primary ---------- */
.enquiry .test-button {
  margin-top: 1.5rem; margin-left: 0.75rem; padding: 0.8rem 1.3rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  background: var(--noir-cream); color: var(--noir-black);
  border: 2px solid var(--noir-black); cursor: pointer; min-height: 44px;
}
.enquiry .test-button:hover { background: var(--noir-cyan); border-color: var(--noir-cyan); } /* hover swap keeps padding constant */

/* ---------- Services: dark sections may use cream/cyan text freely ---------- */
.services { background: var(--noir-black); color: var(--noir-cream); padding: 5vh 4vw; }
.services h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 2rem; }
.services h2 .descriptor { display: block; color: var(--noir-cyan); font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0.5rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.service-card { border-top: 4px solid var(--noir-cyan); padding-top: 1rem; }
.service-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--noir-cream); }
.service-card p { font-size: 0.95rem; color: var(--noir-cream); }
.service-card .caption-note { display: block; margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--noir-cyan); text-transform: uppercase; }
/* Stock photo inside a service card: image, then caption band below it */
.service-figure { margin: 0.75rem 0 0; }
.service-figure img { width: 100%; height: auto; display: block; }
.service-figure figcaption { font-size: 0.7rem; color: var(--noir-cream); margin-top: 0.4rem; letter-spacing: 0.04em; }

/* ---------- Process + service area: structural shells awaiting owner-confirmed facts ---------- */
.process, .service-area { background: var(--noir-cream); color: var(--noir-black); padding: 5vh 4vw; border-top: 2px solid var(--noir-black); }
.process h2, .service-area h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 1.5rem; }
.process h2 .descriptor, .service-area h2 .descriptor { display: block; color: var(--noir-black); font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0.5rem; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 60rem; }
.process-card { border: 2px solid var(--noir-black); padding: 1.5rem; }
.process-card .step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--noir-black); font-family: var(--font-display); margin-bottom: 0.75rem; }
.process-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.5rem; }
.process-card p { font-size: 0.95rem; }
.service-area .area-current { max-width: 34rem; }

/* ---------- Enquiry form: UI ONLY — no submission path until storage/retention/spam plan is decided (qa-security) ---------- */
.enquiry { background: var(--noir-cream); color: var(--noir-black); padding: 5vh 4vw; border-top: 10px solid var(--noir-black); }
.enquiry h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.5rem; }
.enquiry .status-note {
  background: var(--noir-black);
  color: var(--noir-cream);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin: 1rem 0 2rem;
  border-left: 6px solid var(--noir-yellow); /* sparse yellow accent, dark surface */
}
.enquiry form { max-width: 34rem; }
.enquiry label { display: block; font-weight: 600; font-size: 0.85rem; margin: 1rem 0 0.25rem; }
.enquiry .helper { font-size: 0.85rem; color: var(--noir-black); margin-bottom: 0.4rem; }
.enquiry input, .enquiry select, .enquiry textarea {
  width: 100%; padding: 0.6rem; border: 2px solid var(--noir-black);
  background: var(--noir-cream); color: var(--noir-black); font-family: var(--font-body); font-size: 1rem;
}
/* Focus on cream uses the global near-black outline above — cyan is not a valid cue here. */
.enquiry .optional { font-weight: 400; font-size: 0.75rem; }
/* Visible disabled-state label (lead-designer): title attr never renders on touch devices.
   Stacked below the button deliberately — inline wraps to a broken second line at 390px. */
.enquiry .button-note { display: block; margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--noir-black); }
.enquiry button {
  margin-top: 1.5rem; padding: 0.8rem 2rem; font-family: var(--font-display);
  font-size: 1rem; background: var(--noir-black); color: var(--noir-cream);
  border: none; cursor: not-allowed; /* disabled: no backend exists yet */
}
/* honeypot field hidden from humans; will be wired when the Worker endpoint exists */
.enquiry .hp-field { position: absolute; left: -9999px; }

/* ---------- Footer: one-colour proof logic — cream section, no yellow ---------- */
.site-footer { background: var(--noir-cream); color: var(--noir-black); padding: 2rem 4vw; border-top: 2px solid var(--noir-black); font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* Preview annotations are review UI, not final marketing content. */
.preview-banner { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.75rem 4vw; background: var(--noir-black); color: var(--noir-cream); font-size: 0.875rem; }
.preview-banner strong { color: var(--noir-yellow); }
.draft-note { max-width: 42rem; margin-top: 0.75rem; }
.draft-label { display: table; max-width: 100%; margin-bottom: 0.65rem; padding: 0.2rem 0.55rem; border: 1px solid currentColor; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
.section-note { max-width: 42rem; margin-bottom: 1.5rem; }
.site-header { gap: 0.75rem 1.5rem; flex-wrap: wrap; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; }

/* ---------- Mobile: text stacks above photo (lead-designer lock) ---------- */
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 5vh 6vw; }
  /* Cap the hero photo so it doesn't push services far below the fold
     (also shrinks the image area a leaked preview URL would screenshot — qa-security) */
  .hero-figure { min-height: 0; }
  .hero-figure img { max-height: 220px; }
  .hero-media { min-height: 0; }
  .service-grid, .process-grid { grid-template-columns: 1fr; }
  .site-header nav a { margin-left: 0; }
}