/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com
  HOCWS :: House Of Concepts Website — CSS Styles Part 5 of 6
  Project: House Of Concepts Web Site (HOCWS) — www.houseofconcepts.co.za
  Generated: 2026-08-08T11:55:59+1000
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  Continuation from styles_004.css
  This file contains: page-hero (subpage title bands + the 404 page),
    the About timeline, and the contact page strip.
  Content continues in styles_006.css (responsive, CJK, reduced motion).
*/

/* ============================================================
   SECTION 16: PAGE-HERO — subpage title band
   -- Every content page opens with an eyebrow label, a big title
     and one honest intro line, over a hairline rule. The 404 page
     uses the same band (static English, no i18n — deliberate).
   ============================================================ */
.page-hero {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-3xl) var(--sp-lg) var(--sp-2xl);
  text-align: center;
  border-bottom: var(--frame-thin) solid var(--clr-hairline-strong);
}
.page-hero .eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--clr-taupe-dark);
  font-weight: 600;
  display: block;
  margin-bottom: var(--sp-sm);
}
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--sp-md); text-wrap: balance; }
.page-hero p,
.page-hero .page-hero-intro { font-size: 1.05rem; opacity: 0.85; max-width: 640px; margin: 0 auto var(--sp-md); }

/* ============================================================
   SECTION 17: ABOUT — vertical timeline (era-based, D11)
   -- Ava: like a ladder of Michael's working life — each rung is
     an era with a little story card.
   -- The era labels use .timeline-year and are styled so a REAL
     year ("1998") can replace an era word ("The Partnership")
     later WITHOUT any re-layout (Decision 0035, D11).
   -- Desktop: cards alternate left/right of a center rail.
     Mobile: single left rail, cards stack (see styles_006.css).
   ============================================================ */
.timeline {
  position: relative;
  max-width: 900px;
  margin: var(--sp-2xl) auto;
  padding: var(--sp-md) 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--clr-hairline-strong);
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 var(--sp-xl) var(--sp-2xl);
}
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; }
/* Era/year badge sits ON the rail — taupe fill, charcoal text
   (4.58:1, AA). Tabular digits keep real years aligned later. */
.timeline-year {
  display: inline-block;
  background: var(--clr-taupe);
  color: var(--clr-charcoal);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: var(--sp-xs) var(--sp-md);
  border-radius: 999px;
  margin-bottom: var(--sp-sm);
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.timeline-card {
  background: var(--clr-white);
  border: var(--frame-thin) solid var(--clr-hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.timeline-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-xs); text-wrap: balance; }
.timeline-card p { font-size: 0.95rem; opacity: 0.85; margin-bottom: 0; }
/* Impact band closes the timeline — a charcoal card, taupe heading */
.timeline-impact {
  max-width: 900px;
  margin: 0 auto var(--sp-2xl);
  background: var(--clr-charcoal);
  color: var(--clr-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  text-align: center;
}
.timeline-impact h3 { color: var(--clr-taupe); margin-bottom: var(--sp-sm); }
.timeline-impact p { margin-left: auto; margin-right: auto; }
/* The summary line inside the dark impact box: full-strength,
   quieter than the taupe h3 it precedes */
.timeline-summary { font-weight: 600; opacity: 1; margin-bottom: var(--sp-sm); }

/* ============================================================
   SECTION 18: CONTACT page
   -- The conversion page: one giant friendly mailto button, the
     masked cellular/SMS strip, a response-time promise, and the
     location line. Mirrors the sibling site exactly (D8).
   ============================================================ */
.contact-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-3xl) var(--sp-lg);
  text-align: center;
}
.contact-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--sp-md); text-wrap: balance; }
.contact-hero .contact-lead { font-size: 1.1rem; opacity: 0.85; margin-bottom: var(--sp-2xl); }
.contact-mail-btn {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  padding: var(--sp-md) var(--sp-2xl);
  word-break: break-all;
}
.contact-note {
  margin-top: var(--sp-xl);
  font-size: 0.9rem;
  color: var(--clr-taupe-dark);     /* quiet but AA on the warm page */
}
.contact-note strong { color: var(--clr-charcoal); }

/* Direct contact strip — one line above the email button:
   [icon] Cellular   [icon] SMS   +27 82 926 0316
   -- Jacques: professional and trustworthy. Ava: doorbells on one
     shelf. Spacing (not a glyph) so the row wraps cleanly on phones. */
.contact-direct {
  display: flex;
  flex-wrap: wrap;               /* wraps to 2 lines on small phones */
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
  margin: 0 auto var(--sp-md);   /* sits above the mailto button */
}
.contact-direct-link,
.contact-direct-number {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* comfortable touch target on phones */
  text-decoration: none;
}
.contact-direct-link {
  gap: var(--sp-xs);
  color: var(--clr-charcoal);
  font-weight: 500;
}
.contact-direct-icon {
  width: 1em;                    /* = the label's font size: icons must
                                    NOT tower over the lettering */
  height: 1em;
  flex: none;                    /* icon never shrinks inside the row */
}
.contact-direct-number {
  color: var(--clr-charcoal);    /* charcoal on warm off-white = trust */
  font-weight: 600;
  letter-spacing: 0.04em;        /* airy spacing fits the spaced number */
  border-bottom: 2px solid var(--clr-taupe-dark);  /* taupe-dark anchor line */
  font-variant-numeric: tabular-nums;
}
.contact-direct-link:hover { text-decoration: underline; }
.contact-direct-number:hover { border-bottom-color: var(--clr-charcoal); }

/* Content continues in styles_006.css (responsive, CJK, reduced motion) */