/*
© 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 6 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_005.css — THE FINAL STYLESHEET.
  This file contains: all responsive breakpoints (mobile -> 8K),
    the :lang(zh) CJK guards, and the global reduced-motion safety
    net PHYSICALLY LAST so nothing after it can leak motion back in
    (sister-site session-0032 lesson, adopted as house law in D9).
*/

/* ============================================================
   SECTION 19: RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------
   -- Jacques: These are rules that change the layout based on
     screen size. Like having different blueprints for different
     building sizes.
   ============================================================ */

/* ---------- MOBILE SLIDE-OVER NAV (<= 820px) ----------
   Full-height panel sliding from the right; JS traps focus,
   Esc closes, body scroll locks via body.no-scroll. */
@media screen and (max-width: 820px) {
  .hamburger { display: flex; }

  .header-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--clr-charcoal);
    padding: calc(var(--header-height) + var(--sp-md)) var(--sp-lg) var(--sp-lg);
    gap: 0;
    transform: translateX(100%);      /* parked off-screen right */
    transition: transform var(--trans-normal);
    z-index: 1500;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .header-nav.mobile-open { transform: translateX(0); }

  .header-nav a {
    color: var(--clr-light);
    padding: var(--sp-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    border-radius: 0;
  }
  .header-nav a:hover,
  .header-nav a:focus { background-color: rgba(164, 156, 144, 0.12); color: var(--clr-taupe); }
  .header-nav a.active { color: var(--clr-taupe); }
  .header-nav a.active::after { left: 0; right: auto; width: 3px; height: 60%; bottom: 20%; }

  .header-nav a.nav-cta {
    margin: var(--sp-md) 0 0;
    text-align: center;
    padding: var(--sp-sm) var(--sp-md);
  }

  /* Hamburger floats above the open panel so it becomes the close button */
  .hamburger { position: relative; z-index: 1600; }
  body.no-scroll { overflow: hidden; }

  /* Thumbs are a desktop luxury */
  .carousel-filmstrip { display: none; }

  /* Timeline collapses to a single left rail */
  .timeline::before { left: 12px; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0;
    width: 100%;
    text-align: left;
    padding: 0 0 var(--sp-xl) var(--sp-2xl);
  }
  .page-hero { padding: var(--sp-2xl) var(--sp-md) var(--sp-xl); }
}

/* ---------- SMALL LAPTOPS (<= 1024px): cards go 2-up ---------- */
@media screen and (max-width: 1024px) {
  .card-grid, .why-strip .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PHONES (<= 640px) ---------- */
@media screen and (max-width: 640px) {
  .card-grid, .why-strip .card-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .section { padding: var(--sp-2xl) var(--sp-md); }

  /* Nobody hovers on a phone, and a big scale makes wrapped lines
     jump. Keep the partner-quote grow gentle so the sentence stays put. */
  .partner-quote-link:hover,
  .partner-quote-link:focus-visible { transform: scale(1.06); }

  /* Hero eyebrow gets mobile breathing room */
  .hero-tagline-1 { letter-spacing: 0.08em; line-height: 1.5; }
}

/* ---------- SMALLEST PHONES (<= 480px) ---------- */
@media screen and (max-width: 480px) {
  :root {
    --header-height: 56px;          /* Smaller header on tiny screens */
    --carousel-arrow-size: 40px;    /* Smaller arrows */
    --sp-3xl: 40px;
    --sp-2xl: 32px;
  }

  /* Carousel takes full width on mobile */
  .carousel { border-radius: var(--radius-sm); }
  .carousel-image-wrap { aspect-ratio: 4 / 3; }   /* Taller on mobile */

  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }
  .carousel-arrow-left  { left: var(--sp-xs); }
  .carousel-arrow-right { right: var(--sp-xs); }

  /* Fullscreen arrows smaller on mobile */
  .fullscreen-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
  .fullscreen-arrow-left  { left: var(--sp-sm); }
  .fullscreen-arrow-right { right: var(--sp-sm); }

  /* Hero tighter on mobile, watermark shrinks out of the way */
  .hero { padding: var(--sp-2xl) var(--sp-md); }
  .hero-watermark { width: 60vw; opacity: 0.07; }
}

/* ---------- TABLET (481px - 768px) ---------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .carousel-image-wrap { aspect-ratio: 16 / 9; }   /* Standard widescreen */
  .carousel { border-radius: var(--radius-md); }
}

/* ---------- LAPTOP (769px - 1366px) ---------- */
@media screen and (min-width: 769px) and (max-width: 1366px) {
  .carousel-image-wrap { aspect-ratio: 16 / 9; }
  .carousel-arrow {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
  }
  .carousel-arrow-left  { left: var(--sp-md); }
  .carousel-arrow-right { right: var(--sp-md); }
}

/* ---------- DESKTOP (1367px - 2560px) up to 4K ---------- */
@media screen and (min-width: 1367px) and (max-width: 2560px) {
  .carousel-image-wrap { aspect-ratio: 16 / 9; }
  .carousel-arrow {
    width: 56px;
    height: 56px;
    font-size: 1.8rem;
  }
}

/* ---------- BIG SCREENS (>= 900px): section rhythm ----------
   Each major band gets more air above and below so the page
   breathes. Phones keep the tighter spacing. */
@media (min-width: 900px) {
  .section { padding: calc(var(--sp-3xl) * 1.5) var(--sp-lg); }
}

/* ---------- 4K to 8K (2561px+) ---------- */
/* -- Students: 8K is 7680x4320 pixels. At this size everything
   must scale up so text is still readable and images are sharp. */
@media screen and (min-width: 2561px) {
  :root {
    --max-width: 2400px;          /* Wider content area for 8K */
    --header-height: 100px;       /* Taller header */
    --carousel-arrow-size: 72px;  /* Bigger arrows */
    --sp-3xl: 100px;
    --sp-2xl: 72px;
  }

  html { font-size: 20px; }       /* 1rem = 20px on 8K screens */

  .header-logo img,
  .header-logo-img { height: 64px; }

  .carousel-image-wrap { aspect-ratio: 21 / 9; }   /* Ultra-wide for 8K */

  .carousel-arrow {
    width: 72px;
    height: 72px;
    font-size: 2.5rem;
  }
  .carousel-arrow-left  { left: var(--sp-lg); }
  .carousel-arrow-right { right: var(--sp-lg); }

  .fullscreen-arrow {
    width: 80px;
    height: 80px;
    font-size: 3rem;
  }

  .footer-wordmark { font-size: 2rem; }
  .timeline, .timeline-impact { max-width: 1400px; }
  .contact-hero { max-width: 1100px; }
  .hero-watermark { width: min(30vw, 720px); }
}

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

/* ---------- COARSE POINTERS: 44px language rows ----------
   The language menu rows were too skinny for thumbs, so on
   phones and tablets each row gets taller tap padding. */
@media (pointer: coarse) {
  .lang-dropdown a { padding-top: 12px; padding-bottom: 12px; }
}

/* ============================================================
   SECTION 20: CJK GUARDS (:lang(zh))
   ---------------------------------------------------------
   -- Ryan: Chinese letters like to sit shoulder to shoulder.
     Spreading letters apart looks smart in English but breaks the
     even rhythm of Chinese characters, so on the Chinese pages we
     switch the spreading off (uppercase is a harmless no-op).
   -- Our two custom fonts contain zero CJK glyphs (verified on
     the sibling site), so we also name good Chinese fallback
     fonts, best first, and give CJK text more line air (>= 1.6).
   ============================================================ */
:lang(zh) .hero-tagline-1, :lang(zh) .hero-tagline-2,
:lang(zh) .hero-tagline-3, :lang(zh) .eyebrow,
:lang(zh) .section-head .eyebrow, :lang(zh) .page-hero .eyebrow,
:lang(zh) .carousel-heading, :lang(zh) .footer-heading,
:lang(zh) .footer-wordmark, :lang(zh) .timeline-year { letter-spacing: normal; }

: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;
}

/* CJK glyphs fill the em box — tight line spacing makes wrapped
   lines rub together, so Chinese text gets more air (>= 1.6). */
:lang(zh) body { line-height: 1.7; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(zh) .hero-tagline-1, :lang(zh) .hero-tagline-2,
:lang(zh) .hero-tagline-3, :lang(zh) .carousel-heading,
:lang(zh) .card-title, :lang(zh) .timeline-card h3 { line-height: 1.6; }

/* ============================================================
   SECTION 21: REDUCED MOTION — GLOBAL SAFETY NET
   MUST STAY LAST — the final rules in the final stylesheet, so
   nothing can leak motion back in after them.
   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. The partner
   quote link keeps its instant grow (that is fine — no glide).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header,
  .header-inner,
  .header-logo img,
  .header-logo-img,
  .header-nav,
  .card,
  .card::before,
  .btn,
  .partner-quote-link,
  .carousel-image-wrap picture.carousel-slide,
  .carousel-image-wrap picture.carousel-slide.active,
  .carousel-thumb,
  .carousel-pause-btn,
  .carousel-arrow,
  .fullscreen-arrow { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* End of the HOCWS stylesheets — this net is the last word. */