/*
TTMK_site/css/TTMK_styles.css — www.toptronictrademark.com
Generated/Updated on: 2026-09-05T12:40:02+1000
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced without the written permission of Toptronic® Ltd.
For copyright inquiries: jacques@toptronic.com
Build: 002 | Styles for the 2-page toptronictrademark.com site.
WHITE background theme (Jacques' order, session 0041): light pages,
dark navy text, gold accents (darkened on white for contrast).
Old-engine friendly: plain hex colors and px sizes FIRST, modern
clamp()/custom properties only as progressive enhancement (0039 lesson).
*/

/* ---------- 1. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  /* fallbacks first (old engines) */
  background-color: #ffffff;
  color: #1c2b4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
@supports (font-family: system-ui) {
  body { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
}

a { color: #a16a00; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- 2. Header ---------- */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e3e8f2;
  padding: 14px 0;
  position: relative;
  z-index: 10;
}
.site-header .wrap {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.brand { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 12px; }
.brand img { height: 44px; width: auto; display: block; border-radius: 8px; }
.brand-name {
  color: #12203c; font-size: 20px; font-weight: 700; letter-spacing: 1px;
}
.brand-name .reg { font-size: 12px; vertical-align: super; }

.site-nav a {
  color: #44506b; font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  margin-left: 26px; padding: 6px 2px;
}
.site-nav a.active, .site-nav a:hover { color: #a16a00; }

/* ---------- 3. Hero ---------- */
.hero {
  background-color: #f4f7fc; /* fallback first */
  background-image: -webkit-linear-gradient(160deg, #f4f7fc 55%, #e8eefb);
  background-image: linear-gradient(160deg, #f4f7fc 55%, #e8eefb);
  border-bottom: 1px solid #e3e8f2;
  padding: 72px 0 64px;
  text-align: center;
}
.hero h1 {
  color: #12203c;
  font-size: 34px; /* fallback */
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.15; letter-spacing: 0.5px;
}
.hero .gold { color: #a16a00; }
.hero p.tag {
  color: #44506b; font-size: 17px; max-width: 760px;
  margin: 22px auto 0; text-transform: uppercase; letter-spacing: 1px;
}
/* Brand statement line (verbatim, uppercase). Gold rules make it pop
   on the light hero; plain color + borders stay as old-engine fallback. */
.hero p.brandline {
  color: #a16a00; font-size: 15px; max-width: 820px;
  margin: 26px auto 0; letter-spacing: 1px; font-weight: 700;
  border-top: 1px solid #d9e0ec;
  padding-top: 18px;
}
.hero .hands { margin-top: 34px; }
.hero .hands img { width: 180px; height: auto; border-radius: 10px; display: inline-block; }

/* ---------- 4. Phone banner (the ONE number) ---------- */
.phone-banner { text-align: center; padding: 52px 0 10px; }
.phone-banner .label {
  color: #5d6b8a; text-transform: uppercase; letter-spacing: 3px; font-size: 14px;
}
.phone-banner a.big {
  display: inline-block; margin-top: 10px;
  color: #a16a00; font-size: 30px; font-size: clamp(26px, 5vw, 44px);
  font-weight: 700; letter-spacing: 1px;
}
.phone-banner .sub { color: #5d6b8a; font-size: 14px; margin-top: 6px; }

/* ---------- 5. Cards / info grid ---------- */
.grid {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; margin: 44px 0;
}
.grid > * { -webkit-box-flex: 1; -ms-flex: 1 1 280px; flex: 1 1 280px; }
.card {
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 14px;
  padding: 28px 26px; text-align: center;
}
.card h2 { color: #12203c; font-size: 19px; letter-spacing: 1px; margin-bottom: 12px; }
.card p, .card a { font-size: 17px; }
.card .small { color: #5d6b8a; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 8px; }

/* ---------- 6. Map ---------- */
.map-section { padding: 10px 0 60px; }
.map-section h2 { color: #12203c; font-size: 22px; text-align: center; margin-bottom: 18px; }
.map-box { border: 1px solid #d9e0ec; border-radius: 14px; overflow: hidden; }
.map-box iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-block; margin-top: 14px; padding: 12px 26px;
  background-color: #f0b429; color: #12203c; font-weight: 700;
  border-radius: 999px; letter-spacing: 1px; font-size: 15px;
}
.btn:hover, .btn:focus { text-decoration: none; background-color: #ffc94d; }

/* ---------- 8. Footer ---------- */
.site-footer { border-top: 1px solid #e3e8f2; padding: 30px 0 40px; text-align: center; }
.site-footer p { color: #5d6b8a; font-size: 13px; }
.site-footer a { color: #44506b; }
.site-footer .stars { margin: 0 auto 12px; width: 140px; border-radius: 8px; display: block; }

/* ---------- 8b. THE TOPTRONIC FAMILY (same pattern as t10142.com) ---------- */
.family { margin: 0 auto 24px; padding-bottom: 20px; border-bottom: 1px solid #e3e8f2; max-width: 900px; }
.family h2 {
  color: #12203c; font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 14px;
}
.family ul {
  list-style: none; padding: 0; margin: 0;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  gap: 8px 22px;
}
/* old-engine flex-gap fallback (0039 lesson) */
.family li { margin: 4px 11px; }
@supports (gap: 8px) { .family li { margin: 0; } }
.family a { color: #44506b; font-size: 14px; }
.family a:hover, .family a:focus { color: #a16a00; }
.family a[aria-current="page"] { color: #a16a00; font-weight: 700; }

/* ---------- 8c. Visitor IP + country-from-IP line ---------- */
.footer-ip { margin-top: 14px; font-size: 12px; color: #5d6b8a; letter-spacing: 0.02em; }
.footer-ip .ip-value { font-family: Consolas, "Cascadia Mono", monospace; color: #44506b; }

/* ---------- 8c-b. Dual logo (TOPTRONIC + Microchip) — session 0053 ----------
   Jacques' order: same as the old site — bottom of the footer, centered,
   270px wide (the old site shipped this exact file at width=270). */
.footer-dual-logo { margin: 18px 0 4px; }
.footer-dual-logo img { width: 270px; height: auto; display: block; margin: 0 auto; }

/* ---------- 8d. Country + Language selectors (header, top right) ----------
   WHAT: a small preference widget — a native <select> for Language (its
   options depend on the chosen country) and a custom dropdown for Country
   with a filter box above the list (type "Sw" -> Switzerland/Sweden).
   WHY CUSTOM for country only: a native <select> cannot host a filter box.
   Old-engine friendly: plain colors/px first, then enhancements. The whole
   widget is hidden in the HTML and revealed by JS, so with JavaScript
   disabled the header looks exactly as it did before (fail-soft). */
.geo-zone {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
  gap: 6px 14px;
}
#geo-selectors {
  display: none; /* JS reveals it as flex when everything is built */
  position: relative;
}
#geo-selectors[data-ready="1"] { display: -webkit-box; display: -ms-flexbox; display: flex; }
#geo-selectors { -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.geo-label {
  color: #5d6b8a; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  margin-right: 4px;
}
.geo-select {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px; color: #12203c; background-color: #ffffff;
  border: 1px solid #d9e0ec; border-radius: 8px; padding: 7px 10px;
  max-width: 210px;
}
/* Desktop rule: the Language + Country row is ONE line, always. Long
   country names shrink instead of wrapping (the language <select> yields
   space first, then the label truncates with an ellipsis). Wrapping is
   allowed ONLY inside the 640px mobile block. */
.geo-label { white-space: nowrap; }
.geo-lang { min-width: 0; }
#geo-selectors[data-ready="1"] { flex-wrap: nowrap; -ms-flex-wrap: nowrap; }
#geo-selectors .geo-hint { width: auto; }
.geo-select:focus { outline: 2px solid #f0b429; outline-offset: 1px; }
.geo-select:disabled { color: #9aa7c2; background-color: #f4f7fc; }
.geo-country-btn { cursor: pointer; text-align: left; min-width: 150px; max-width: 210px; }
/* The country text truncates with an ellipsis instead of pushing the row
   into a second line ("United Kingdom — Dutch (F…"). */
.geo-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Globe icon + text inside the country button: a tiny flex row keeps the
   16px icon and the label vertically aligned at every font size. */
.geo-country-btn {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
}
.geo-globe { -ms-flex-negative: 0; flex-shrink: 0; color: #a16a00; }
/* Honesty hint: "Preference saved. This site is currently in English
   only." — fades out after ~4 s. Absolutely positioned so it NEVER
   changes the widget's height (the one-line desktop rule stays true
   whether the hint is visible or not). */
.geo-hint {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  width: 100%; font-size: 12px; color: #5d6b8a;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease;
  z-index: 51;
}
.geo-hint.is-visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .geo-hint { transition: none; } }
/* The dropdown panel: filter box on top, scrollable country list below.
   z-index keeps it above the hero and cards; panel is position:absolute
   inside the relatively-positioned #geo-selectors. */
.geo-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  width: 260px; background-color: #ffffff;
  border: 1px solid #d9e0ec; border-radius: 12px;
  box-shadow: 0 10px 26px rgba(18, 32, 60, 0.16);
  padding: 10px;
}
.geo-filter {
  width: 100%; font-size: 14px; color: #12203c;
  border: 1px solid #d9e0ec; border-radius: 8px; padding: 7px 9px;
  margin-bottom: 8px;
}
.geo-filter:focus { outline: 2px solid #f0b429; outline-offset: 1px; }
.geo-list { max-height: 240px; overflow-y: auto; }
.geo-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
  color: #44506b; font-size: 14px; padding: 8px 10px;
  font-family: Georgia, "Times New Roman", serif;
}
.geo-opt:hover, .geo-opt:focus { background-color: #f4f7fc; color: #a16a00; outline: none; }
.geo-opt.is-active { color: #a16a00; font-weight: 700; }
.geo-empty { color: #9aa7c2; font-size: 13px; padding: 8px 10px; }
/* Footer line that echoes the honest selection (see Tltd_geo_selectors). */
.geo-footer-line { margin-top: 6px; font-size: 12px; color: #5d6b8a; }

/* ---------- 9. Small screens (no drawer needed: only 2 links) ---------- */
@media (max-width: 640px) {
  .site-header .wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; }
  .site-nav a { margin: 0 12px; }
  /* Selectors: on phones the two controls may stack (there is no room for
     one row); the ellipsis rules above keep each control tidy. */
  #geo-selectors[data-ready="1"] { justify-content: center; flex-wrap: wrap; -ms-flex-wrap: wrap; }
  .geo-panel { right: auto; left: 50%; margin-left: -130px; }
  .hero { padding: 52px 0 46px; }
  .map-box iframe { height: 300px; }
}

/* ---------- 10. Reduced motion (nothing animates on this site yet; net stays last) ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* End of Tltd_styles.css */

/* --- Session 0050b: About / Registrations / Investors pages --- */
.about-block { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 24px; margin-bottom: 24px; }
.about-block h2 { color: #e8b84b; margin-bottom: 14px; }
.about-block p { color: #c9d4ea; line-height: 1.65; margin: 0 0 12px; font-size: 15px; }
.about-block img { display: block; max-width: 100%; border-radius: 10px; margin: 14px auto;
  border: 1px solid rgba(255,255,255,0.12); }
.card img { display: block; max-width: 100%; border-radius: 10px; margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.12); }
.brandline { color: #8fa0c2; font-size: 12px; letter-spacing: 0.04em; margin: 10px 0; }
@media (max-width: 720px) { .about-block { padding: 16px; } }
/* --- Session 0051: ONE-LINE header on desktop (Jacques' order) ---
   PROBLEM: brand + 5 nav links + the Language/Country selectors measured
   187 + 628 + 418 = 1233px at a 1080px viewport, so the selectors wrapped
   to a second line. FIX (measured in a real browser): slightly smaller nav
   text/spacing, a slightly smaller logo, and tighter selector boxes bring
   the total to ~988px with ~48px of spare room. Plain px only (old-engine
   friendly). Below 640px the old stacking behaviour is untouched. */
@media (min-width: 641px) {
  .site-nav a { font-size: 13px; letter-spacing: 1px; margin-left: 14px; }
  .brand img { height: 36px; }
  .brand-name { font-size: 17px; }
  .geo-select { padding: 6px 8px; max-width: 160px; font-size: 13px; }
  .geo-country-btn { min-width: 120px; max-width: 160px; }
  .geo-label { margin-right: 2px; letter-spacing: 1px; font-size: 10px; }
  #geo-selectors { gap: 4px 8px; }
}

/* --- Session 0053: ONE-LINE header rule (Jacques' order; adopted from TLabs) ---
   TTMK header budget: brand + 5 nav links + the Language/Country
   selectors together exceed a 1080px viewport, so this rule enforces ONE
   visual row — .wrap becomes nowrap on desktop and each of the three
   blocks is allowed to shrink (nav links tighten, selector boxes shrink).
   Everything stays on the same line from 1024px up; between 641-1023px
   the row may still wrap (as before). Below 640px the mobile stacking is
   untouched. */
@media (min-width: 1024px) {
  .site-header .wrap { flex-wrap: nowrap; -ms-flex-wrap: nowrap; max-width: 1200px; }
  /* Session 0053c (Jacques): there IS room — show TOPTRONIC® LABORATORIES
     in full beside the logo. The row stretches wider (1200px) and the
     brand name never truncates. */
  .brand { min-width: 0; flex-shrink: 0; }
  .brand-name { white-space: nowrap; }
  .site-nav { min-width: 0; white-space: nowrap; gap: 4px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  /* Session 0053b (Jacques: menu text must never overlap): real spacing
     between links — padding on each side + whitespace nowrap per link, so
     translated longer labels can never paint over each other. */
  .site-nav a { font-size: 12px; letter-spacing: 0.5px; margin-left: 0; padding: 6px 11px; white-space: nowrap; }
  .geo-zone { min-width: 0; }
  #geo-selectors { flex-wrap: nowrap; -ms-flex-wrap: nowrap; }
  .geo-select { padding: 5px 6px; max-width: 140px; font-size: 12px; }
  .geo-country-btn { min-width: 110px; max-width: 140px; }
  .geo-label { font-size: 9px; margin-right: 2px; }
}

/* End of session 0050b additions */

/* ---------- 11. TTMK article pages (session 0053) ---------- */
.article-list { list-style: none; margin: 34px 0; padding: 0; }
.article-list li { margin: 0 0 12px; }
.article-list a {
  display: block; padding: 14px 18px;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 12px;
  color: #12203c; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase;
}
.article-list a:hover, .article-list a:focus { color: #a16a00; border-color: #f0b429; text-decoration: none; }
.article-body p { margin: 0 0 16px; max-width: 820px; margin-left: auto; margin-right: auto; }
.article-body ul { max-width: 780px; margin: 0 auto 18px; padding-left: 22px; }
.article-body li { margin-bottom: 12px; color: #2a3a5c; }
.article-eyebrow {
  color: #a16a00; font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  text-align: center; margin: 0 0 10px; font-weight: 700;
}
.brand-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px auto; max-width: 980px; }
.brand-grid img { height: 56px; width: auto; filter: grayscale(0); background-color: #fff;
  border: 1px solid #e3e8f2; border-radius: 10px; padding: 8px 14px; }
.product-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px auto; max-width: 980px; }
.product-grid img { max-height: 170px; width: auto; background-color: #fff;
  border: 1px solid #e3e8f2; border-radius: 10px; padding: 6px; }
.section-title { text-align: center; color: #12203c; font-size: 20px; letter-spacing: 1px; margin: 40px 0 8px; }

/* ---------- 12. Blog post cards on Articles (session 0053) ----------
   Mirrors the old /posts layout: thumbnail image on top, title link and
   teaser paragraph under it, 3 cards per row on desktop. */
.post-grid { display: flex; flex-wrap: wrap; gap: 22px; margin: 30px 0; }
.post-card {
  flex: 1 1 280px; max-width: 380px; margin: 0 auto;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 14px;
  padding: 16px; text-align: center;
}
.post-card img {
  width: 100%; height: auto; border-radius: 10px; display: block;
  border: 1px solid #e3e8f2; background-color: #fff;
}
.post-card-title {
  display: block; margin: 12px 0 8px; color: #12203c; font-weight: 700;
  font-size: 15px; line-height: 1.4;
}
.post-card-title:hover, .post-card-title:focus { color: #a16a00; }
.post-card p { color: #5d6b8a; font-size: 13px; line-height: 1.5; }
/* End of session 0053 additions */

/* ---------- 13. TTMK additions (session 0060) ----------
   WHAT: styles for the TTMK page set — the six advantage cards on the
   home page, the advantage hub list, the examples gallery, the About
   gallery and the small extras (eyebrow line, slim hero, note, download
   row). Same white/gold theme as the base; plain px + hex first. */

/* Home: eyebrow line above the h1 (small, gold, letterspaced). */
.eyebrow {
  color: #a16a00; font-size: 13px; letter-spacing: 3px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 14px;
}

/* Slim hero variant for inner pages: less vertical padding, left text. */
.hero.slim { padding: 48px 0 40px; text-align: left; }
.hero.slim h1 { font-size: clamp(26px, 4vw, 40px); }
.hero.slim .tag { margin-left: 0; max-width: 860px; text-align: left; }
.hero.slim .note {
  color: #5d6b8a; font-size: 14px; margin-top: 12px;
  text-transform: none; letter-spacing: 0.2px;
}

/* Home: the story blocks (risk / answer / conclusion). */
.story { margin-top: 40px; }
.story-block { max-width: 860px; margin: 0 auto 30px; }
.story-block h2 { color: #12203c; font-size: 21px; letter-spacing: 0.5px; margin-bottom: 10px; }
.story-block p { color: #2a3a5c; line-height: 1.65; }

/* Home: six advantage cards (2 rows x 3 columns on desktop). */
.adv-grid {
  display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 44px;
}
.adv-card {
  flex: 1 1 300px; max-width: 340px; margin: 0 auto;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 14px;
  padding: 22px 20px; text-align: center;
}
.adv-card:hover, .adv-card:focus { border-color: #f0b429; text-decoration: none; }
.adv-card h3 { color: #12203c; font-size: 16px; letter-spacing: 0.5px; margin-bottom: 8px; }
.adv-card p { color: #5d6b8a; font-size: 14px; line-height: 1.55; }

/* Advantages hub list: title + description in one clickable row. */
.adv-list { list-style: none; margin: 30px 0; padding: 0; }
.adv-list li { margin: 0 0 12px; }
.adv-list a {
  display: block; padding: 14px 18px;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 12px;
}
.adv-list a:hover, .adv-list a:focus { color: #a16a00; border-color: #f0b429; text-decoration: none; }
.adv-list span { display: block; color: #12203c; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.adv-list small { display: block; color: #5d6b8a; font-size: 13px; margin-top: 4px; }

/* Examples gallery: responsive image grid with captions. */
.ex-grid { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 44px; }
.ex-grid figure {
  flex: 1 1 260px; max-width: 340px; margin: 0 auto;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 12px;
  padding: 10px; text-align: center;
}
.ex-grid img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
.ex-grid figcaption { color: #5d6b8a; font-size: 12px; margin-top: 8px; }

/* About page gallery. */
.about-gallery p { margin: 18px 0 12px; color: #2a3a5c; }
.about-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0; }
.about-grid img {
  flex: 1 1 300px; max-width: 480px; width: 100%; height: auto;
  border: 1px solid #e3e8f2; border-radius: 10px; background-color: #fff;
}
.about-gallery > img {
  display: block; max-width: 100%; margin: 22px auto;
  border: 1px solid #e3e8f2; border-radius: 10px;
}
.dl-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0 44px; }
.btn.ghost { background-color: #ffffff; border: 1px solid #d9e0ec; color: #a16a00; }
.btn.ghost:hover, .btn.ghost:focus { background-color: #f4f7fc; }

/* Contact block. */
.contact-block { text-align: center; padding-bottom: 44px; }
.contact-block p { margin: 8px 0; }
.contact-block .hands img { width: 180px; border-radius: 10px; margin-top: 26px; }

/* Mobile: cards stack full width (flex-basis handles it); tighten hero. */
@media (max-width: 640px) {
  .hero.slim { padding: 36px 0 30px; }
  .adv-card, .ex-grid figure { max-width: 100%; }
}
/* End of TTMK additions */

/* TTMK additions (0065, 2026-09-06T17:07:40+10:00): flag grid, cert gallery, sites grid. */
.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin: 24px 0; }
.flag-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.flag-card:hover, .flag-card:focus { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.flag-card img { width: 84px; height: auto; border-radius: 6px; }
.flag-card span { font-size: .85rem; color: #222; text-align: center; line-height: 1.25; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 24px 0; }
.cert-grid a { display: block; border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; background: #fff; }
.cert-grid img { width: 100%; height: auto; display: block; }
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 24px 0; }
.sites-grid a { display: block; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 8px; font-size: .85rem; text-decoration: none; color: #14418c; overflow-wrap: anywhere; }
.sites-grid a:hover, .sites-grid a:focus { background: #f2f6ff; }