/*
© 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
  PLWS :: Plazdiez Website — CSS Styles Part 6 (design-polish layer, Session 0029)
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-08-11T15:59:47+10:00 (s0039: clamp fallbacks, selector splits, reduced-motion net +mobile-open)
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  Contains: deep-contrast tokens, premium type layer, focus-ring dark overrides,
    light-context contrast fixes, micro-interactions, hero fold CTA, email quieting,
    heritage line, hero hierarchy, section rhythm, card elevation, image treatment,
    footer wordmark, trust strip, timeline summary (Session 0030).
  Spec: docs/PLWS_Chrome_Spec_0027.md + docs/PLWS_Plan_004_DesignReview_0029.md
*/

/* ============================================================
   SECTION 28: DEEP-CONTRAST TOKENS (s0029) — amber/steel variants
   that pass WCAG AA 4.5:1 on light backgrounds
   ============================================================ */
:root {
  --clr-brand-deep: #8f5d00;   /* 5.62:1 on white, 5.26:1 on paper — deep brass for light-context amber text */
  --clr-steel-deep: #5c6575;   /* 5.50:1 on paper — secondary text on light */
}

/* ============================================================
   SECTION 29: PREMIUM TYPE LAYER (P-04) — the Apple/Microsoft
   1%-ers: selection tint, balanced headings, anchor offset
   ============================================================ */
::selection { background: rgba(232, 160, 32, 0.35); }
.section-head h2,
.page-hero h1,
.card-title,
.timeline-card h3,
.cs-section h2,
.contact-hero h1 { text-wrap: balance; }
html { scroll-padding-top: calc(var(--header-height) + 8px); }

/* ============================================================
   SECTION 30: FOCUS RING DARK OVERRIDES (P-07) — ink ring on
   light (global), amber ring on dark sections
   ============================================================ */
.section-dark :focus-visible,
.site-footer :focus-visible,
.carousel :focus-visible,
.fullscreen-overlay :focus-visible { outline-color: var(--clr-brand); }

/* ============================================================
   SECTION 31: LIGHT-CONTEXT CONTRAST FIXES (P-08 + E-01aes) —
   measured AA passes
   ============================================================ */
.card-outcome { color: var(--clr-brand-deep); }        /* was the legacy hover amber, 3.00:1 on white */
.cs-label { color: var(--clr-brand-deep); }            /* same fail class, one more line */
.contact-note { color: var(--clr-steel-deep); }        /* was steel 2.86:1 on paper */
.carousel-instruction { opacity: 0.9; }                /* was 0.7 ~4.1:1 on paper */
.btn-outline { color: var(--clr-brand-deep); border-color: var(--clr-brand-deep); } /* 5.62:1 — safe on any background; session 0038: one hue per element */

/* ============================================================
   SECTION 32: MICRO-INTERACTIONS + RADIUS FAMILY (P-10 + amendment)
   ============================================================ */
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.card,
.timeline-card,
.timeline-impact { border-radius: var(--radius-lg); }   /* 8px -> 12px, family-wide so About matches Home */
@media (hover: hover) {
  .chip {
    transition: background var(--trans-fast), border-color var(--trans-fast);
  }
  .chip:hover {
    background: rgba(232, 160, 32, 0.22);
    border-color: rgba(232, 160, 32, 0.6);
  }
}

/* ============================================================
   SECTION 33: CONTACT PAGE — quiet the second email (P-12):
   the big amber button keeps the action, the plain address
   reads as copyable text
   ============================================================ */
.contact-hero .footer-mail {
  color: var(--clr-steel-deep);
  font-weight: 400;
}

/* ============================================================
   SECTION 34: HERO FOLD CTA (P-11, leader-approved) — one amber
   action inside the hero frame, reuses cta_button key
   ============================================================ */
.hero-cta { margin-top: var(--sp-lg); }

/* ============================================================
   SECTION 35: HERITAGE LINE (s0030) — the small "40+ years"
   caption on the About page hero. We say how long Paul has
   done this work, quietly — proof, not a party.
   ============================================================ */
.heritage-line {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-steel);
  margin-top: var(--sp-md);
}
.heritage-line::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--clr-brand);
  margin: 0 auto var(--sp-sm);
}
.page-hero .heritage-line { color: var(--clr-steel-deep); }            /* 5.50:1 on paper — AA pass */
.page-hero .heritage-line::before { background: var(--clr-brand-deep); } /* 5.26:1 on paper — AA pass */

/* ============================================================
   SECTION 36: HERO HIERARCHY (s0030) — tagline-1 shrinks to a
   quiet eyebrow (it now carries the longer 40+ years line, so
   we let the words wrap evenly) and tagline-2 becomes the one
   and only headline, tracked a touch tighter.
   ============================================================ */
.hero-tagline-1 {
  font-size: 1.3rem; font-size: clamp(1.1rem, 2.2vw, 1.5rem); /* 2017 fallback first */
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
  text-wrap: balance;
}
.hero-tagline-2 { letter-spacing: 1px; }   /* was 2px in styles_001 — tightens the sole headline */

/* ============================================================
   SECTION 37: SECTION RHYTHM (s0030) — on big screens each
   major band gets more air above and below (64px -> 96px) so
   the page breathes. Phones keep the tighter spacing.
   ============================================================ */
@media (min-width: 900px) {
  .section { padding: calc(var(--sp-3xl) * 1.5) var(--sp-lg); }
}

/* ============================================================
   SECTION 38: CARD ELEVATION (s0030) — cards sit flat and calm
   until you touch them; the shadow is earned on hover, not
   shouted all the time.
   ============================================================ */
.card { box-shadow: none; }
@media (hover: hover) {
  .card:hover { box-shadow: var(--shadow-md); }
}

/* ============================================================
   SECTION 39: IMAGE TREATMENT (s0030) — carousel photos get
   rounded corners and a faint edge, the same finished look
   the cards already have.
   ============================================================ */
.carousel img {
  border-radius: var(--radius-md);
  border: 1px solid rgba(20, 22, 26, 0.08);
}

/* ============================================================
   SECTION 40: FOOTER WORDMARK (s0030) — the text wordmark in
   the footer gets wider letter spacing on purpose, so it reads
   like a nameplate, not a sentence.
   ============================================================ */
.footer-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ============================================================
   SECTION 41: TRUST STRIP (s0030) — the band of 4 credentials
   on the home page (between the carousel and the why-strip).
   Just quiet text and two thin lines — the facts do the work.
   ============================================================ */
.trust-strip {
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid rgba(20, 22, 26, 0.08);
  border-bottom: 1px solid rgba(20, 22, 26, 0.08);
  text-align: center;
}
.trust-strip p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-steel-deep);            /* 5.50:1 on paper — AA */
}
.trust-sep { color: var(--clr-brand-deep); margin: 0 var(--sp-sm); }

/* ============================================================
   SECTION 42: TIMELINE SUMMARY + CS TRUST NOTE (s0030) — two
   small trust lines: one inside the dark timeline-impact box,
   one under the case studies.
   ============================================================ */
/* .timeline-impact is a DARK box (ink bg, paper text) — the summary is paper at full opacity, quieter than the amber h3 it precedes */
.timeline-summary { font-weight: 600; opacity: 1; margin-bottom: var(--sp-sm); }
/* case-studies is LIGHT context — brand-deep passes AA on paper (5.26:1) */
.cs-trust-note { font-weight: 600; color: var(--clr-brand-deep); margin-top: var(--sp-sm); }

/* ============================================================
   SECTION 43: CTA BAND — balanced wrap for the new 3-grade heading
   ============================================================ */
.cta-band h2 {
  text-wrap: balance;
  line-height: 1.2;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SECTION 44: CTA BAND — paragraph measure for comfortable reading
   ============================================================ */
.cta-band p { max-width: 720px; }

/* ============================================================
   SECTION 45: TRUST STRIP — mobile line-height for wrapped credentials
   ============================================================ */
@media (max-width: 480px) {
  .trust-strip p { line-height: 1.9; }
}

/* ============================================================
   SECTION 46: HERO EYEBROW — mobile breathing for the tagline
   ============================================================ */
@media (max-width: 640px) {
  .hero-tagline-1 { letter-spacing: 1.5px; line-height: 1.4; }
}

/* ============================================================
   SECTION 47: REVEAL ENTRANCE — tighten 500ms -> 380ms (s0032, U-02)
   Elements that fade in as you scroll used to take half a second,
   which felt sleepy. Now they arrive a little quicker so the page
   feels snappy, not slow.
   ============================================================ */
.reveal { transition-duration: 380ms; }

/* ============================================================
   SECTION 48: CAROUSEL CURSOR AFFORDANCE (s0032, U-03) — cursor
   says what the click does. The mouse pointer changes shape over
   the photo (magnifier with a +) and over the big view (magnifier
   with a -), so visitors can guess the click before they make it.
   -- Ava: the little zoomy glass tells you it gets bigger!
   ============================================================ */
.carousel-image-wrap { cursor: zoom-in; }
.fullscreen-overlay { cursor: zoom-out; }

/* ============================================================
   SECTION 49: PAUSE BUTTON — 44px tap target (s0032, U-04)
   The carousel pause button was small and hard to hit on a phone.
   44 pixels is the size Apple and Google both say a finger needs.
   ============================================================ */
.carousel-pause-btn { width: 44px; height: 44px; }

/* ============================================================
   SECTION 50: TOUCH — buttons never keep a stuck hover (s0032, U-05)
   On touch screens a tap can leave a button looking "hovered"
   forever. On devices with no real mouse we turn the hover look
   off so buttons always settle back to normal.
   ============================================================ */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   SECTION 51: LANGUAGE DROPDOWN — 44px rows on touch (s0032, U-06)
   The language menu rows were too skinny for thumbs. On coarse
   pointers (phones, tablets) we add padding so each row is tall
   enough to tap without hitting the neighbour.
   ============================================================ */
@media (pointer: coarse) {
  .lang-dropdown a { padding-top: 12px; padding-bottom: 12px; }
}

/* ============================================================
   SECTION 52: NUMERALS (s0032, T-04) — tabular digits where numbers
   change/align (both fonts carry tnum, fontTools-verified).
   Tabular numbers all take the same width, so the slide counter
   "3 / 12" doesn't wobble side to side when the digits change.
   ============================================================ */
.carousel-counter, .timeline-year, .contact-direct-number { font-variant-numeric: tabular-nums; }

/* ============================================================
   SECTION 53: MEASURE (s0032, T-05) — 68ch keeps prose in the
   60-75 char band. "Measure" is how long a line of text is. Lines
   that run too wide are tiring to read, so paragraphs stop growing
   at about 68 characters.
   ============================================================ */
.case-study p, .page-content p { max-width: 68ch; }

/* ============================================================
   SECTION 54: H3 FLOOR (s0032, T-06) — a heading never renders
   below card text on phones. The heading can shrink on small
   screens, but never smaller than the text under it — a heading
   must always look like a heading.
   ============================================================ */
h3, .timeline-card h3 { font-size: 1.25rem; font-size: clamp(1.15rem, 2.5vw, 1.5rem); } /* plain value first: 2017 fallback */

/* ============================================================
   SECTION 55: HAIRLINE TOKENS (s0032, T-07) — one name for the
   ink-at-8% rule. A "hairline" is the super-thin grey line we use
   between sections. Giving it a name means every hairline on the
   site is exactly the same shade, changed in exactly one place.
   ============================================================ */
:root {
  --clr-hairline: rgba(20, 22, 26, 0.08);
  --clr-hairline-strong: rgba(20, 22, 26, 0.1);
}
.page-hero { border-bottom-color: var(--clr-hairline-strong); }

/* ============================================================
   SECTION 56: PROSE WRAP (s0032, T-08) — no lonely last word;
   progressive enhancement. Browsers that understand this move a
   word down so the last line of a paragraph is never one short,
   sad word on its own. Older browsers just ignore it — no harm.
   ============================================================ */
p, figcaption { text-wrap: pretty; }

/* ============================================================
   SECTION 57: FOOTER CONTRAST (s0032, T-09) — opacity 0.8 was
   eating contrast below AA (.footer-location is live markup,
   index.html footer). The faded footer line was too faint to read
   comfortably. Full strength text, still quiet because it is small.
   ============================================================ */
.footer-location { opacity: 1; }

/* ============================================================
   SECTION 58: CJK TRACKING (s0032, T-01) — zh-Hans: latin
   letter-spacing shreds CJK rhythm; uppercase is a harmless no-op,
   leave it. Spreading letters apart looks smart in English but
   breaks the even rhythm of Chinese characters, so in the Chinese
   pages we switch the spreading off.
   -- Ryan: Chinese letters like to sit shoulder to shoulder.
   ============================================================ */
:lang(zh) .heritage-line, :lang(zh) .trust-strip p,
:lang(zh) .section-head .eyebrow, :lang(zh) .page-hero .eyebrow,
:lang(zh) .hero-tagline-1, :lang(zh) .hero-tagline-2,
:lang(zh) .hero-tagline-3, :lang(zh) .cs-label,
:lang(zh) .footer-heading, :lang(zh) .carousel-heading,
:lang(zh) .footer-wordmark { letter-spacing: normal; }

/* ============================================================
   SECTION 59: CJK FONT STACKS (s0032, T-02) — name the CJK
   fallbacks (both woff2 fonts have zero CJK glyphs, verified).
   Our two custom fonts contain no Chinese characters at all, so
   on the Chinese pages we tell the browser which good Chinese
   fonts to use instead, best first.
   ============================================================ */
:lang(zh) {
  --font-body: 'Inter', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --font-heading: 'Archivo', 'PingFang SC', 'Hiragino Sans GB',
                  'Microsoft YaHei', 'Noto Sans SC', 'Segoe UI', sans-serif;
}

/* ============================================================
   SECTION 60: CJK LINE-HEIGHT (s0032, T-03) — CJK glyphs fill the
   em box; 1.15-1.2 makes wrapped lines touch. Chinese characters
   are taller in their boxes than Latin letters, so tight line
   spacing makes lines rub together. We give Chinese text more air.
   ============================================================ */
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(zh) .hero-tagline-1, :lang(zh) .hero-tagline-2,
:lang(zh) .carousel-heading { line-height: 1.4; }

/* ============================================================
   SECTION 61: PARTNER QUOTE (s0035) — the customers-say line on
   the home page, sitting between the trust strip and the
   why-strip. Same quiet family as the trust strip: centered
   text and one hairline, no card, no gradient. The two
   "House Of Concepts" links are the only playful moment in the
   band: point at one and it grows and lights up amber.
   ============================================================ */
.partner-quote {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--clr-hairline);
  text-align: center;
}
.partner-quote p {
  margin: 0 auto;
  max-width: 720px;              /* same comfortable measure as .cta-band p */
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clr-text);
}
/* The partner link is inline text that must scale — transform needs a
   block-ish box, so inline-block. Underline at rest: colour alone must
   never be the only "I am a link" signal (WCAG 1.4.1). */
.partner-quote-link {
  display: inline-block;
  font-weight: 600;
  color: var(--clr-brand-deep);  /* deep brass, 5.26:1 on paper — AA */
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
  transition: transform var(--trans-fast),
              color var(--trans-fast),
              background-color var(--trans-fast);
}
/* Hover AND keyboard focus get the identical treatment — parity is the
   rule: anything the mouse sees, the Tab key must see too. */
/* s0039 R9: split — old parsers kill a whole rule when one selector is
   unknown, so :focus-visible must not drag :hover down with it */
.partner-quote-link:hover {
  transform: scale(1.12);        /* "it gets bigger" — Jacques' words */
  color: var(--clr-brand-ink);   /* near-black on the amber wash      */
  background-color: rgba(232, 160, 32, 0.22);  /* --clr-brand #e8a020 at 22% — the "highlight" (literal: older-browser house rule) */
}
.partner-quote-link:focus-visible {
  transform: scale(1.12);
  color: var(--clr-brand-ink);
  background-color: rgba(232, 160, 32, 0.22);
}
/* Small screens: nobody hovers on a phone, and a big scale makes wrapped
   lines jump. Keep the grow gentle so the sentence stays put. */
@media (max-width: 640px) {
  .partner-quote-link:hover { transform: scale(1.06); }
  .partner-quote-link:focus-visible { transform: scale(1.06); }
}

/* SECTION 63: MOBILE HEADER CALL PILL + COMPACTION (s0038) — one-tap call on phones */
.header-cta-mobile { display: none; }
@media screen and (max-width: 820px) {
  .header-inner { padding: 0 12px; gap: var(--sp-sm); }
  .header-logo img { height: 44px; } /* same height as the round phone button (0115) */
  .header-cta-mobile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--clr-brand); color: var(--clr-brand-ink); border-radius: 999px; flex: none; }
  .header-cta-mobile svg { width: 20px; height: 20px; }
}

/* SECTION 64: FOOTER PHONE (s0038) — the number rides on every page */
.footer-tel { display: inline-block; margin-top: var(--sp-xs); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.footer-contact a:hover, .footer-contact a:focus { color: var(--clr-paper); }

/* SECTION 65: NAV CTA RING (s0038) — the money button separates from beige */
.header-nav a.nav-cta { box-shadow: 0 0 0 2px var(--clr-ink); }

/* ============================================================
   SECTION 66: REDUCED MOTION — GLOBAL SAFETY NET (s0032, U-01;
   renumbered 61 to 62 in s0035, 62 to 66 in s0038) —
   MUST STAY LAST of the new sections so it wins. Closes the holes:
   smooth scroll, drawer slide, header shrink, hover lifts, and
   .reveal (Section 47 must not leak into reduce mode).
   Some visitors ask their device to calm all animation down (it can
   make them dizzy or ill). This block is the promise: when that
   setting is on, nothing on the site moves or glides — everything
   just appears, instantly and quietly.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header,
  .header-inner,
  .header-logo img,
  .header-nav,
  .header-nav.mobile-open,
  .card,
  .card::before,
  .btn,
  .reveal,
  .partner-quote-link { transition: none; }
}